@jp-poc/xyx/dist/index.js

Szum-Tech design system with tailwindcss support

import { cn } from './chunk-ZD2QRAOX.js';
export { cn } from './chunk-ZD2QRAOX.js';
import { LoadingIcon } from './chunk-INJBKPIE.js';
import { Dialog as Dialog$1, AlertDialog as AlertDialog$1, Label as Label$1, Avatar as Avatar$1, Tooltip as Tooltip$1, Select as Select$1, Separator as Separator$1 } from 'radix-ui';
import { cva } from 'class-variance-authority';
import { jsx, jsxs } from 'react/jsx-runtime';
import * as React from 'react';
import { Slot } from '@radix-ui/react-slot';
import { CaretSortIcon, CheckIcon, Cross1Icon } from '@radix-ui/react-icons';
import { twMerge } from 'tailwind-merge';
import { useFormContext, FormProvider, Controller } from 'react-hook-form';

var avatarCva = cva("relative flex shrink-0 overflow-hidden rounded text-gray-100", {
  variants: {
    size: {
      sm: "size-6 text-xs",
      md: "size-10 text-lg",
      lg: "size-14 text-2xl"
    }
  },
  defaultVariants: {
    size: "md"
  }
});
function Avatar({ className, size, ref, ...props }) {
  const avatarStyles = avatarCva({ size });
  return /* @__PURE__ */ jsx(Avatar$1.Root, { ref, className: cn(avatarStyles, className), ...props });
}
function AvatarImage({ className, ref, ...props }) {
  return /* @__PURE__ */ jsx(Avatar$1.Image, { ref, className: cn("aspect-square h-full w-full", className), ...props });
}
function AvatarFallback({ className, ref, ...props }) {
  return /* @__PURE__ */ jsx(
    Avatar$1.Fallback,
    {
      ref,
      className: cn("bg-gray-350 flex h-full w-full items-center justify-center", className),
      ...props
    }
  );
}
var buttonCva = cva(
  [
    "inline-flex cursor-pointer items-center justify-center align-middle no-underline transition-colors duration-300 ease-in-out",
    "select-none appearance-none rounded-sm border font-sans font-medium tracking-[.02857em]",
    "aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-50"
  ],
  {
    variants: {
      fullWidth: {
        true: "w-full"
      },
      color: {
        neutral: "",
        primary: "",
        success: "",
        warning: "",
        error: ""
      },
      size: {
        sm: "px-2.5 py-1 text-[.8125rem] leading-4",
        md: "px-4 py-1.5 text-[0.875rem] leading-5",
        lg: "px-5 py-2 text-[.9375rem] leading-6"
      },
      variant: {
        text: "border-transparent bg-transparent",
        outlined: "bg-transparent",
        contained: ""
      }
    },
    compoundVariants: [
      // ---------- TEXT ---------- //
      {
        variant: "text",
        color: "neutral",
        class: [
          "text-gray-100",
          "hover:border-gray-350 hover:bg-gray-350 hover:text-gray-100",
          "active:border-gray-400 active:bg-gray-400"
        ]
      },
      {
        variant: "text",
        color: "primary",
        class: [
          "text-primary-500",
          "hover:border-primary-500 hover:bg-primary-500 hover:text-white",
          "active:border-primary-600 active:bg-primary-600 active:text-white"
        ]
      },
      {
        variant: "text",
        color: "success",
        class: [
          "text-success-500",
          "hover:border-success-500 hover:bg-success-500 hover:text-white",
          "active:border-success-600 active:bg-success-600 active:text-white"
        ]
      },
      {
        variant: "text",
        color: "warning",
        class: [
          "text-warning-500",
          "hover:border-warning-500 hover:bg-warning-500 hover:text-white",
          "active:border-warning-600 active:bg-warning-600 active:text-white"
        ]
      },
      {
        variant: "text",
        color: "error",
        class: [
          "text-error-500",
          "hover:border-error-500 hover:bg-error-500 hover:text-white",
          "active:border-error-600 active:bg-error-600 active:text-white"
        ]
      },
      // ---------- OUTLINED ---------- //
      {
        variant: "outlined",
        color: "neutral",
        class: ["border-gray-350 text-gray-100", "hover:bg-gray-350", "active:bg-gray-400"]
      },
      {
        variant: "outlined",
        color: "primary",
        class: [
          "text-primary-500 border-primary-500",
          "hover:bg-primary-500 hover:text-white",
          "active:bg-primary-600 active:text-white"
        ]
      },
      {
        variant: "outlined",
        color: "success",
        class: [
          "text-success-500 border-success-500",
          "hover:bg-success-500 hover:text-white",
          "active:bg-success-600 active:text-white"
        ]
      },
      {
        variant: "outlined",
        color: "warning",
        class: [
          "text-warning-500 border-warning-500",
          "hover:bg-warning-500 hover:text-white",
          "active:bg-warning-600 active:text-white"
        ]
      },
      {
        variant: "outlined",
        color: "error",
        class: [
          "text-error-500 border-error-500",
          "hover:bg-error-500 hover:text-white",
          "active:bg-error-600 active:text-white"
        ]
      },
      // ---------- OUTLINED ---------- //
      {
        variant: "contained",
        color: "neutral",
        class: [
          "border-gray-350 bg-gray-350 text-gray-100",
          "hover:border-gray-300 hover:bg-gray-300",
          "active:border-gray-400 active:bg-gray-400"
        ]
      },
      {
        variant: "contained",
        color: "primary",
        class: [
          "border-primary-500 bg-primary-500 text-white",
          "hover:border-primary-400 hover:bg-primary-400",
          "active:border-primary-600 active:bg-primary-600"
        ]
      },
      {
        variant: "contained",
        color: "success",
        class: [
          "border-success-500 bg-success-500 text-white",
          "hover:border-success-400 hover:bg-success-400",
          "active:border-success-600 active:bg-success-600"
        ]
      },
      {
        variant: "contained",
        color: "warning",
        class: [
          "border-warning-500 bg-warning-500 text-white",
          "hover:border-warning-400 hover:bg-warning-400",
          "active:border-warning-600 active:bg-warning-600"
        ]
      },
      {
        variant: "contained",
        color: "error",
        class: [
          "border-error-500 bg-error-500 text-white",
          "hover:border-error-400 hover:bg-error-400",
          "active:border-error-600 active:bg-error-600"
        ]
      }
    ],
    defaultVariants: {
      fullWidth: false,
      color: "primary",
      size: "md",
      variant: "text"
    }
  }
);
var iconContainerCva = cva("", {
  variants: {
    site: {
      left: "",
      right: ""
    },
    size: {
      sm: "",
      md: "",
      lg: ""
    }
  },
  compoundVariants: [
    // ---------- LEFT ---------- //
    {
      site: "left",
      size: "sm",
      class: "-ml-0.5 mr-1.5"
    },
    {
      site: "left",
      size: "md",
      class: "-ml-1 mr-2"
    },
    {
      site: "left",
      size: "lg",
      class: "-ml-1.5 mr-2.5"
    },
    // ---------- RIGHT ---------- //
    {
      site: "right",
      size: "sm",
      class: "-mr-0.5 ml-1.5"
    },
    {
      site: "right",
      size: "md",
      class: "-mr-1 ml-2"
    },
    {
      site: "right",
      size: "lg",
      class: "-mr-1.5 ml-2.5"
    }
  ],
  defaultVariants: {
    site: "left",
    size: "md"
  }
});
var iconCva = cva("", {
  variants: {
    loading: {
      true: "animate-spin motion-reduce:hidden"
    },
    size: {
      sm: "h-4.5 w-4.5",
      md: "size-5",
      lg: "h-5.5 w-5.5"
    }
  },
  defaultVariants: {
    loading: false,
    size: "md"
  }
});
function Button({
  asChild = false,
  variant = "text",
  color = "primary",
  disabled = false,
  fullWidth = false,
  loadingPosition = "start",
  ref,
  ...props
}) {
  const {
    children,
    type = "button",
    loading = false,
    size = "md",
    endIcon,
    startIcon,
    ...rest
  } = { ...props, loadingPosition };
  const Comp = asChild ? Slot : "button";
  const buttonStyles = buttonCva({ fullWidth, size, variant, color });
  const isDisabled = disabled || loading;
  return /* @__PURE__ */ jsx(
    Comp,
    {
      ...asChild ? props : rest,
      "aria-disabled": isDisabled || void 0,
      className: buttonStyles,
      "data-state": loading ? "loading" : void 0,
      disabled: isDisabled,
      ref,
      role: Comp !== "button" ? "button" : void 0,
      tabIndex: isDisabled ? -1 : 0,
      type: Comp === "button" ? type : void 0,
      children: asChild ? /* @__PURE__ */ jsx(ButtonContent, { children }) : /* @__PURE__ */ jsx(ButtonContent, { ...props })
    }
  );
}
function ButtonContent({
  children,
  loading = false,
  size = "md",
  loadingPosition = "start",
  startIcon,
  endIcon,
  ...props
}) {
  const isStartLoading = loading && loadingPosition === "start";
  const StartIcon = isStartLoading ? /* @__PURE__ */ jsx(LoadingIcon, { "aria-label": "Loading" }) : startIcon || null;
  const startIconStyles = iconCva({ size, loading: isStartLoading });
  const startIconContainerStyles = iconContainerCva({ size, site: "left" });
  const isEndLoading = loading && loadingPosition === "end";
  const EndIcon = isEndLoading ? /* @__PURE__ */ jsx(LoadingIcon, { "aria-label": "Loading" }) : endIcon || null;
  const endIconStyles = iconCva({ size, loading: isEndLoading });
  const endIconContainerStyles = iconContainerCva({ size, site: "right" });
  const LeadingIcon = StartIcon ? /* @__PURE__ */ jsx("span", { className: startIconContainerStyles, role: isStartLoading ? "progressbar" : void 0, children: React.cloneElement(StartIcon, { className: startIconStyles }) }) : null;
  const TrailingIcon = EndIcon ? /* @__PURE__ */ jsx("span", { className: endIconContainerStyles, role: isEndLoading ? "progressbar" : void 0, children: React.cloneElement(EndIcon, { className: endIconStyles }) }) : null;
  return React.isValidElement(children) ? React.cloneElement(
    children,
    props,
    /* @__PURE__ */ jsxs(React.Fragment, { children: [
      LeadingIcon,
      React.isValidElement(children) ? children.props?.children : null,
      TrailingIcon
    ] })
  ) : /* @__PURE__ */ jsxs(React.Fragment, { children: [
    LeadingIcon,
    children,
    TrailingIcon
  ] });
}
var inputCva = cva(
  [
    "bg-app-foreground font-poppins h-10 w-full appearance-none border py-2 outline-0 transition-colors duration-300 ease-in-out",
    "placeholder:select-none placeholder:text-gray-200",
    "invalid:border-error-500 focus:border-primary-400 active:border-primary-400",
    "disabled:border-gray-400 disabled:text-gray-200 disabled:placeholder:text-gray-300"
  ],
  {
    variants: {
      invalid: {
        true: ["text-error-500 border-error-500 hover:border-error-400 focus:text-gray-100"],
        false: ["border-gray-350 hover:border-primary-500 text-gray-100"]
      },
      withStartIcon: {
        true: "pl-11",
        false: "pl-3"
      },
      withEndIcon: {
        true: "pr-11",
        false: "pr-3"
      }
    },
    defaultVariants: {
      invalid: false,
      withStartIcon: false,
      withEndIcon: false
    }
  }
);
var inputIconContainerCva = cva(
  ["pointer-events-none absolute inset-y-2 inline-flex w-10 place-content-center items-center text-center"],
  {
    variants: {
      disabled: {
        true: "text-gray-200"
      },
      site: {
        right: "right-0 border-l border-l-gray-400 pr-1",
        left: "left-0 border-r border-r-gray-400 pl-1"
      }
    },
    defaultVariants: {
      disabled: false
    }
  }
);
function Input({ invalid = false, startIcon, endIcon, disabled = false, className, ...props }) {
  const inputStyles = inputCva({ withEndIcon: !!endIcon, withStartIcon: !!startIcon, invalid });
  const inputIconStartContainer = inputIconContainerCva({ site: "left", disabled });
  const inputIconEndContainer = inputIconContainerCva({ site: "right", disabled });
  return /* @__PURE__ */ jsxs("div", { className: "text-body-2 relative text-gray-100", children: [
    startIcon ? /* @__PURE__ */ jsx("span", { className: inputIconStartContainer, children: startIcon }) : null,
    /* @__PURE__ */ jsx(
      "input",
      {
        "aria-invalid": invalid || void 0,
        disabled,
        className: cn(inputStyles, className),
        ...props
      }
    ),
    endIcon ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: inputIconEndContainer, children: endIcon }) : null
  ] });
}
function Tooltip({
  defaultOpen,
  content,
  open,
  onOpenChange,
  children,
  side,
  align,
  collisionPadding = 8,
  sideOffset = 8,
  ...props
}) {
  return /* @__PURE__ */ jsxs(Tooltip$1.Root, { delayDuration: 0, open, defaultOpen, onOpenChange, children: [
    /* @__PURE__ */ jsx(Tooltip$1.Trigger, { asChild: true, children }),
    content ? /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsxs(
      Tooltip$1.Content,
      {
        className: "text-body-1 data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade rounded bg-white p-2 text-gray-100 will-change-[transform,opacity] select-none",
        sideOffset,
        side,
        align,
        collisionPadding,
        ...props,
        children: [
          content,
          /* @__PURE__ */ jsx(Tooltip$1.Arrow, { width: 8, height: 4, className: "fill-white" })
        ]
      }
    ) }) : null
  ] });
}
function TooltipProvider({ children }) {
  return /* @__PURE__ */ jsx(Tooltip$1.Provider, { skipDelayDuration: 500, children });
}
var textareaCva = cva(
  [
    "bg-app-primary font-poppins text-body-2 h-28 min-h-10 w-full appearance-none border px-3 py-2 outline-0 transition-colors duration-300 ease-in-out placeholder:select-none placeholder:text-gray-200",
    "focus:border-primary-400",
    "active:border-primary-400",
    "disabled:border-gray-400 disabled:text-gray-200 disabled:placeholder:text-gray-300"
  ],
  {
    variants: {
      invalid: {
        true: ["text-error-500 border-error-500", "hover:border-error-400", "focus:text-gray-100"],
        false: ["border-gray-350 text-gray-100", "hover:border-primary-500"]
      }
    },
    defaultVariants: {
      invalid: false
    }
  }
);
function Textarea({ invalid = false, ...props }) {
  const textareaStyles = textareaCva({ invalid });
  return /* @__PURE__ */ jsx("textarea", { "aria-invalid": invalid || void 0, className: textareaStyles, ...props });
}
var selectCva = cva(
  [
    "bg-app-foreground text-body-2 inline-flex h-10 w-full appearance-none items-center justify-between gap-2 border px-3 py-2 text-gray-100 outline-0 transition-colors duration-300 ease-in-out",
    "placeholder:select-none placeholder:text-gray-200",
    "invalid:border-error-500 focus:border-primary-400 active:border-primary-400",
    "disabled:border-gray-400 disabled:text-gray-200 disabled:placeholder:text-gray-300"
  ],
  {
    variants: {
      invalid: {
        true: ["text-error-500 border-error-500 hover:border-error-400 focus:text-gray-100"],
        false: ["border-gray-350 hover:border-primary-500 text-gray-100"]
      }
    },
    defaultVariants: {
      invalid: false
    }
  }
);
function Select({ children, placeholder, invalid = false, ref, ...props }) {
  const selectStyles = selectCva({ invalid });
  return /* @__PURE__ */ jsxs(Select$1.Root, { ...props, children: [
    /* @__PURE__ */ jsxs(Select$1.Trigger, { className: selectStyles, ref, children: [
      /* @__PURE__ */ jsx(Select$1.Value, { placeholder }),
      /* @__PURE__ */ jsx(Select$1.Icon, { className: "-mr-1.5", children: /* @__PURE__ */ jsx(CaretSortIcon, { className: "size-5 text-gray-200" }) })
    ] }),
    /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(
      Select$1.Content,
      {
        sideOffset: 4,
        className: "bg-app-foreground z-50 w-full overflow-hidden border border-gray-400 py-1",
        children: /* @__PURE__ */ jsx(Select$1.Viewport, { children })
      }
    ) })
  ] });
}
function SelectItem({ children, ...props }) {
  return /* @__PURE__ */ jsxs(
    Select$1.Item,
    {
      className: "text-body-2 data-[state=checked]:bg-primary-300 flex w-full flex-row items-center justify-between px-3 py-2 text-gray-100 select-none data-[disabled]:pointer-events-none data-[highlighted]:bg-gray-400 data-[highlighted]:outline-none",
      ...props,
      children: [
        /* @__PURE__ */ jsx(Select$1.ItemText, { className: "flex-1", children }),
        /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) })
      ]
    }
  );
}
function Card({ className, ...props }) {
  return /* @__PURE__ */ jsx("div", { className: twMerge("bg-app-foreground h-full rounded border border-gray-400", className), ...props });
}
function CardHeader({ className, ...props }) {
  return /* @__PURE__ */ jsx("div", { className: twMerge("flex flex-col p-6", className), ...props });
}
function CardTitle({ className, ...props }) {
  return /* @__PURE__ */ jsx("h3", { className: twMerge("text-heading-5", className), ...props });
}
function CardDescription({ className, ...props }) {
  return /* @__PURE__ */ jsx("p", { className: twMerge("text-body-2 text-gray-200", className), ...props });
}
function CardContent({ className, ...props }) {
  return /* @__PURE__ */ jsx("div", { className: twMerge("p-6 pt-0", className), ...props });
}
function CardFooter({ className, ...props }) {
  return /* @__PURE__ */ jsx("div", { className: twMerge("flex items-center p-6 pt-0", className), ...props });
}
var Sheet = Dialog$1.Root;
var SheetTrigger = Dialog$1.Trigger;
var SheetClose = Dialog$1.Close;
var sheetContentStyles = cva(
  "bg-foreground data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col border-gray-400 p-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
  {
    variants: {
      side: {
        top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 border-b",
        bottom: "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 border-t",
        left: "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
        right: "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm"
      }
    },
    defaultVariants: {
      side: "right"
    }
  }
);
function SheetContent({ side = "right", className, children, ...props }) {
  return /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [
    /* @__PURE__ */ jsx(
      Dialog$1.Overlay,
      {
        className: "bg-background/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm",
        ...props
      }
    ),
    /* @__PURE__ */ jsxs(Dialog$1.Content, { className: twMerge(sheetContentStyles({ side }), className), ...props, children: [
      children,
      /* @__PURE__ */ jsxs(Dialog$1.Close, { className: "focus:ring-ring ring-primary-500 ring-offset-foreground data-[state=open]:bg-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none", children: [
        /* @__PURE__ */ jsx(Cross1Icon, { className: "size-4" }),
        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
      ] })
    ] })
  ] });
}
function SheetHeader({ className, ...props }) {
  return /* @__PURE__ */ jsx("div", { className: twMerge("flex flex-col space-y-2 text-center sm:text-left", className), ...props });
}
function SheetFooter({ className, ...props }) {
  return /* @__PURE__ */ jsx("div", { className: twMerge("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props });
}
function SheetTitle({ className, ...props }) {
  return /* @__PURE__ */ jsx(Dialog$1.Title, { className: twMerge("typography-heading-6", className), ...props });
}
function SheetDescription({ className, ...props }) {
  return /* @__PURE__ */ jsx(Dialog$1.Description, { className: twMerge("typography-body-2 text-gray-200", className), ...props });
}
function Separator({ className, orientation = "horizontal", decorative = false, ...props }) {
  return /* @__PURE__ */ jsx(
    Separator$1.Root,
    {
      decorative,
      orientation,
      "aria-orientation": orientation,
      className: cn(
        "shrink-0 bg-gray-400",
        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
        className
      ),
      ...props
    }
  );
}
function Header({ children, ...props }) {
  return /* @__PURE__ */ jsx(
    "header",
    {
      className: "bg-foreground/95 supports-[backdrop-filter]:bg-foreground/60 sticky top-0 z-50 w-full border-b border-gray-400 backdrop-blur",
      ...props,
      children: /* @__PURE__ */ jsx("div", { className: "container flex h-16 items-center", children })
    }
  );
}
var Dialog = Dialog$1.Root;
var DialogClose = Dialog$1.Close;
var dialogContentStyles = cva(
  [
    "bg-foreground fixed left-1/2 top-1/2 z-50 flex w-full -translate-x-1/2 -translate-y-1/2 flex-col rounded border border-gray-400 p-4 shadow-lg",
    "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] duration-200"
  ],
  {
    variants: {
      width: {
        xs: "max-w-xs",
        sm: "max-w-sm",
        md: "max-w-md",
        lg: "max-w-lg",
        xl: "max-w-xl",
        "2xl": "max-w-2xl",
        "3xl": "max-w-3xl",
        "4xl": "max-w-4xl",
        "5xl": "max-w-5xl",
        "6xl": "max-w-6xl",
        full: "max-w-full"
      }
    },
    defaultVariants: {
      width: "md"
    }
  }
);
function DialogOverlay(props) {
  return /* @__PURE__ */ jsx(
    Dialog$1.Overlay,
    {
      className: "bg-background/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-xs",
      ...props
    }
  );
}
function DialogContent({ className, children, width = "md", ...props }) {
  return /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [
    /* @__PURE__ */ jsx(DialogOverlay, {}),
    /* @__PURE__ */ jsxs(Dialog$1.Content, { className: twMerge(dialogContentStyles({ width }), className), ...props, children: [
      children,
      /* @__PURE__ */ jsxs(Dialog$1.Close, { className: "focus:ring-ring ring-primary-500 ring-offset-foreground data-[state=open]:bg-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none", children: [
        /* @__PURE__ */ jsx(Cross1Icon, { className: "size-4" }),
        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
      ] })
    ] })
  ] });
}
var DialogTrigger = Dialog$1.Trigger;
function DialogHeader({ className, ...props }) {
  return /* @__PURE__ */ jsx("div", { className: twMerge("mb-4 flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
}
function DialogFooter({ className, ...props }) {
  return /* @__PURE__ */ jsx("div", { className: twMerge("mt-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props });
}
function DialogTitle({ className, ...props }) {
  return /* @__PURE__ */ jsx(Dialog$1.Title, { className: twMerge("text-heading-6", className), ...props });
}
function DialogDescription({ className, ...props }) {
  return /* @__PURE__ */ jsx(Dialog$1.Description, { className: twMerge("text-body-2 text-gray-200", className), ...props });
}
var Form = FormProvider;
var FormItemContext = React.createContext({});
var FormItem = React.forwardRef(function({ className, ...props }, ref) {
  const id = React.useId();
  return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { ref, className: twMerge("space-y-2", className), ...props }) });
});
FormItem.displayName = "FormItem";
var FormFieldContext = React.createContext({});
var FormField = ({
  ...props
}) => {
  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
};
function Label({ className, ...props }) {
  return /* @__PURE__ */ jsx(
    Label$1.Root,
    {
      className: twMerge("text-subtitle-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70", className),
      ...props
    }
  );
}
var useFormField = () => {
  const fieldContext = React.useContext(FormFieldContext);
  const itemContext = React.useContext(FormItemContext);
  const { getFieldState, formState } = useFormContext();
  const fieldState = getFieldState(fieldContext.name, formState);
  if (!fieldContext) {
    throw new Error("useFormField should be used within <FormField>");
  }
  const { id } = itemContext;
  return {
    id,
    name: fieldContext.name,
    formItemId: `${id}-form-item`,
    formDescriptionId: `${id}-form-item-description`,
    formMessageId: `${id}-form-item-message`,
    ...fieldState
  };
};
var FormLabel = React.forwardRef(
  ({ className, caption, ...props }, ref) => {
    const { error, formItemId } = useFormField();
    return /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-end justify-between", children: [
      /* @__PURE__ */ jsx(
        Label,
        {
          ref,
          className: twMerge(error ? "text-error-500" : null, className),
          htmlFor: formItemId,
          ...props
        }
      ),
      caption ? /* @__PURE__ */ jsx("div", { className: "typography-caption text-gray-200", children: caption }) : null
    ] });
  }
);
FormLabel.displayName = "FormLabel";
var FormControl = React.forwardRef(function(props, ref) {
  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
  const newProps = { ...props, invalid: !!error };
  return /* @__PURE__ */ jsx(
    Slot,
    {
      ref,
      id: formItemId,
      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
      "aria-invalid": !!error,
      ...newProps
    }
  );
});
FormControl.displayName = "FormControl";
var FormMessage = React.forwardRef(function({ children, ...props }, ref) {
  const { error, formMessageId } = useFormField();
  const body = error ? String(error?.message) : children;
  if (!body) {
    return null;
  }
  return /* @__PURE__ */ jsx(HelperText, { ref, type: "error", id: formMessageId, ...props, children: body });
});
FormMessage.displayName = "FormMessage";
var FormDescription = React.forwardRef(function(props, ref) {
  const { formDescriptionId } = useFormField();
  return /* @__PURE__ */ jsx(HelperText, { ref, id: formDescriptionId, ...props });
});
FormDescription.displayName = "FormDescription";
var helperTextCva = cva("", {
  variants: {
    type: {
      description: "text-body-2 text-gray-200",
      error: "text-caption text-error-500"
    }
  },
  defaultVariants: {
    type: "description"
  }
});
function HelperText({ className, children, type = "description", role, ref, ...props }) {
  return /* @__PURE__ */ jsx(
    "p",
    {
      ref,
      className: twMerge(helperTextCva({ type }), className),
      role: type === "error" ? "alert" : role,
      ...props,
      children
    }
  );
}
var AlertDialog = AlertDialog$1.Root;
var AlertDialogTrigger = AlertDialog$1.Trigger;
function AlertDialogOverlay({ className, ...props }) {
  return /* @__PURE__ */ jsx(
    AlertDialog$1.Overlay,
    {
      className: cn(
        "bg-background/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-xs",
        className
      ),
      ...props
    }
  );
}
function AlertDialogContent({ className, ...props }) {
  return /* @__PURE__ */ jsxs(AlertDialog$1.Portal, { children: [
    /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
    /* @__PURE__ */ jsx(
      AlertDialog$1.Content,
      {
        className: cn(
          "bg-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-1/2 left-1/2 z-50 flex w-full max-w-lg -translate-x-1/2 -translate-y-1/2 flex-col rounded border border-gray-400 p-4 shadow-lg duration-200",
          className
        ),
        ...props
      }
    )
  ] });
}
function AlertDialogHeader({ className, ...props }) {
  return /* @__PURE__ */ jsx("div", { className: twMerge("mb-4 flex flex-col space-y-2 text-center sm:text-left", className), ...props });
}
function AlertDialogFooter({ className, ...props }) {
  return /* @__PURE__ */ jsx("div", { className: twMerge("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props });
}
function AlertDialogTitle({ className, ref, ...props }) {
  return /* @__PURE__ */ jsx(AlertDialog$1.Title, { ref, className: cn("text-heading-6", className), ...props });
}
function AlertDialogDescription({ className, ...props }) {
  return /* @__PURE__ */ jsx(AlertDialog$1.Description, { className: cn("text-body-2 text-gray-200", className), ...props });
}
var AlertDialogAction = AlertDialog$1.Action;
var AlertDialogCancel = AlertDialog$1.Cancel;

export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarFallback, AvatarImage, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Header, HelperText, Input, Label, Select, SelectItem, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Textarea, Tooltip, TooltipProvider };