@omnifyjp/ui 0.5.2 → 1.0.0

package/dist/chunk-NPL2R5LD.js

@@ -0,0 +1,171 @@
+import { Popover, PopoverTrigger, PopoverContent } from './chunk-C34KSTWA.js';
+import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from './chunk-6GWVQB3Q.js';
+import { Button } from './chunk-55E7D2HR.js';
+import { cn } from './chunk-DGPY4WP3.js';
+import * as React from 'react';
+import { X, ChevronsUpDown, Check } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Combobox({
+  options,
+  value,
+  onChange,
+  placeholder = "Ch\u1ECDn...",
+  searchPlaceholder = "T\xECm ki\u1EBFm...",
+  emptyText = "Kh\xF4ng t\xECm th\u1EA5y k\u1EBFt qu\u1EA3.",
+  className,
+  disabled,
+  clearable = false
+}) {
+  const [open, setOpen] = React.useState(false);
+  const selectedOption = options.find((option) => option.value === value);
+  const handleClear = (e) => {
+    e.stopPropagation();
+    onChange?.("");
+  };
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        role: "combobox",
+        "aria-expanded": open,
+        disabled,
+        className: cn(
+          "w-full justify-between",
+          !value && "text-muted-foreground",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedOption ? selectedOption.label : placeholder }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 ml-2", children: [
+            clearable && value && /* @__PURE__ */ jsx(
+              X,
+              {
+                className: "h-4 w-4 opacity-50 hover:opacity-100",
+                onClick: handleClear
+              }
+            ),
+            /* @__PURE__ */ jsx(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-50" })
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-[--radix-popover-trigger-width] p-0", align: "start", children: /* @__PURE__ */ jsxs(Command, { children: [
+      /* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder }),
+      /* @__PURE__ */ jsxs(CommandList, { children: [
+        /* @__PURE__ */ jsx(CommandEmpty, { children: emptyText }),
+        /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxs(
+          CommandItem,
+          {
+            value: option.value,
+            disabled: option.disabled,
+            onSelect: (currentValue) => {
+              onChange?.(currentValue === value ? "" : currentValue);
+              setOpen(false);
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Check,
+                {
+                  className: cn(
+                    "mr-2 h-4 w-4",
+                    value === option.value ? "opacity-100" : "opacity-0"
+                  )
+                }
+              ),
+              option.label
+            ]
+          },
+          option.value
+        )) })
+      ] })
+    ] }) })
+  ] });
+}
+function MultiCombobox({
+  options,
+  value = [],
+  onChange,
+  placeholder = "Ch\u1ECDn...",
+  searchPlaceholder = "T\xECm ki\u1EBFm...",
+  emptyText = "Kh\xF4ng t\xECm th\u1EA5y k\u1EBFt qu\u1EA3.",
+  className,
+  disabled,
+  maxSelected
+}) {
+  const [open, setOpen] = React.useState(false);
+  const selectedLabels = value.map((v) => options.find((opt) => opt.value === v)?.label).filter(Boolean);
+  const handleSelect = (selectedValue) => {
+    const newValue = value.includes(selectedValue) ? value.filter((v) => v !== selectedValue) : maxSelected && value.length >= maxSelected ? value : [...value, selectedValue];
+    onChange?.(newValue);
+  };
+  const handleClearAll = (e) => {
+    e.stopPropagation();
+    onChange?.([]);
+  };
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        role: "combobox",
+        "aria-expanded": open,
+        disabled,
+        className: cn(
+          "w-full justify-between",
+          !value.length && "text-muted-foreground",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedLabels.length > 0 ? selectedLabels.length === 1 ? selectedLabels[0] : `${selectedLabels.length} m\u1EE5c \u0111\xE3 ch\u1ECDn` : placeholder }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 ml-2", children: [
+            value.length > 0 && /* @__PURE__ */ jsx(
+              X,
+              {
+                className: "h-4 w-4 opacity-50 hover:opacity-100",
+                onClick: handleClearAll
+              }
+            ),
+            /* @__PURE__ */ jsx(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-50" })
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-[--radix-popover-trigger-width] p-0", align: "start", children: /* @__PURE__ */ jsxs(Command, { children: [
+      /* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder }),
+      /* @__PURE__ */ jsxs(CommandList, { children: [
+        /* @__PURE__ */ jsx(CommandEmpty, { children: emptyText }),
+        /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => {
+          const isSelected = value.includes(option.value);
+          const isDisabled = option.disabled || !isSelected && maxSelected && value.length >= maxSelected;
+          return /* @__PURE__ */ jsxs(
+            CommandItem,
+            {
+              value: option.value,
+              disabled: !!isDisabled,
+              onSelect: () => handleSelect(option.value),
+              children: [
+                /* @__PURE__ */ jsx(
+                  Check,
+                  {
+                    className: cn(
+                      "mr-2 h-4 w-4",
+                      isSelected ? "opacity-100" : "opacity-0"
+                    )
+                  }
+                ),
+                option.label
+              ]
+            },
+            option.value
+          );
+        }) })
+      ] })
+    ] }) })
+  ] });
+}
+
+export { Combobox, MultiCombobox };
+//# sourceMappingURL=chunk-NPL2R5LD.js.map
+//# sourceMappingURL=chunk-NPL2R5LD.js.map

package/dist/chunk-NPL2R5LD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/combobox.tsx"],"names":[],"mappings":"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","file":"chunk-NPL2R5LD.js","sourcesContent":["import * as React from \"react\";\nimport { Check, ChevronsUpDown, X } from \"lucide-react\";\n\nimport { cn } from \"../lib/utils\";\nimport { Button } from \"./button\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"./command\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\n\n/** A single option in the Combobox dropdown. */\nexport interface ComboboxOption {\n  /** Unique value for this option. */\n  value: string;\n  /** Display label shown in the dropdown list. */\n  label: string;\n  /** Whether this option is non-selectable. */\n  disabled?: boolean;\n}\n\ninterface ComboboxProps {\n  /** Available options to display in the dropdown. */\n  options: ComboboxOption[];\n  /** Currently selected value. */\n  value?: string;\n  /** Callback fired when the selected value changes. */\n  onChange?: (value: string) => void;\n  /** Placeholder text shown when no value is selected. */\n  placeholder?: string;\n  /** Placeholder text for the search input inside the dropdown. */\n  searchPlaceholder?: string;\n  /** Text shown when no options match the search query. */\n  emptyText?: string;\n  /** Additional CSS class for the trigger button. */\n  className?: string;\n  /** Whether the combobox is disabled. */\n  disabled?: boolean;\n  /** Whether to show a clear button when a value is selected. */\n  clearable?: boolean;\n}\n\n/**\n * Searchable single-select combobox built on cmdk and Radix Popover.\n * Combines a text search input with a selectable option list.\n *\n * @example\n * ```tsx\n * const [value, setValue] = useState(\"\");\n *\n * <Combobox\n *   options={[\n *     { value: \"react\", label: \"React\" },\n *     { value: \"vue\", label: \"Vue\" },\n *     { value: \"svelte\", label: \"Svelte\" },\n *   ]}\n *   value={value}\n *   onChange={setValue}\n *   placeholder=\"Select framework...\"\n *   searchPlaceholder=\"Search...\"\n *   clearable\n * />\n * ```\n */\nexport function Combobox({\n  options,\n  value,\n  onChange,\n  placeholder = \"Chọn...\",\n  searchPlaceholder = \"Tìm kiếm...\",\n  emptyText = \"Không tìm thấy kết quả.\",\n  className,\n  disabled,\n  clearable = false,\n}: ComboboxProps) {\n  const [open, setOpen] = React.useState(false);\n\n  const selectedOption = options.find((option) => option.value === value);\n\n  const handleClear = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    onChange?.(\"\");\n  };\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          role=\"combobox\"\n          aria-expanded={open}\n          disabled={disabled}\n          className={cn(\n            \"w-full justify-between\",\n            !value && \"text-muted-foreground\",\n            className\n          )}\n        >\n          <span className=\"truncate\">\n            {selectedOption ? selectedOption.label : placeholder}\n          </span>\n          <div className=\"flex items-center gap-1 ml-2\">\n            {clearable && value && (\n              <X\n                className=\"h-4 w-4 opacity-50 hover:opacity-100\"\n                onClick={handleClear}\n              />\n            )}\n            <ChevronsUpDown className=\"h-4 w-4 shrink-0 opacity-50\" />\n          </div>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-[--radix-popover-trigger-width] p-0\" align=\"start\">\n        <Command>\n          <CommandInput placeholder={searchPlaceholder} />\n          <CommandList>\n            <CommandEmpty>{emptyText}</CommandEmpty>\n            <CommandGroup>\n              {options.map((option) => (\n                <CommandItem\n                  key={option.value}\n                  value={option.value}\n                  disabled={option.disabled}\n                  onSelect={(currentValue) => {\n                    onChange?.(currentValue === value ? \"\" : currentValue);\n                    setOpen(false);\n                  }}\n                >\n                  <Check\n                    className={cn(\n                      \"mr-2 h-4 w-4\",\n                      value === option.value ? \"opacity-100\" : \"opacity-0\"\n                    )}\n                  />\n                  {option.label}\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  );\n}\n\ninterface MultiComboboxProps {\n  /** Available options to display in the dropdown. */\n  options: ComboboxOption[];\n  /** Array of currently selected values. */\n  value?: string[];\n  /** Callback fired when the selection changes. */\n  onChange?: (value: string[]) => void;\n  /** Placeholder text shown when no values are selected. */\n  placeholder?: string;\n  /** Placeholder text for the search input inside the dropdown. */\n  searchPlaceholder?: string;\n  /** Text shown when no options match the search query. */\n  emptyText?: string;\n  /** Additional CSS class for the trigger button. */\n  className?: string;\n  /** Whether the combobox is disabled. */\n  disabled?: boolean;\n  /** Maximum number of items that can be selected. */\n  maxSelected?: number;\n}\n\n/**\n * Searchable multi-select combobox that allows selecting multiple values.\n * Selected items are shown as a count in the trigger button.\n *\n * @example\n * ```tsx\n * const [selected, setSelected] = useState<string[]>([]);\n *\n * <MultiCombobox\n *   options={[\n *     { value: \"react\", label: \"React\" },\n *     { value: \"vue\", label: \"Vue\" },\n *     { value: \"svelte\", label: \"Svelte\" },\n *   ]}\n *   value={selected}\n *   onChange={setSelected}\n *   placeholder=\"Select frameworks...\"\n *   maxSelected={3}\n * />\n * ```\n */\nexport function MultiCombobox({\n  options,\n  value = [],\n  onChange,\n  placeholder = \"Chọn...\",\n  searchPlaceholder = \"Tìm kiếm...\",\n  emptyText = \"Không tìm thấy kết quả.\",\n  className,\n  disabled,\n  maxSelected,\n}: MultiComboboxProps) {\n  const [open, setOpen] = React.useState(false);\n\n  const selectedLabels = value\n    .map((v) => options.find((opt) => opt.value === v)?.label)\n    .filter(Boolean);\n\n  const handleSelect = (selectedValue: string) => {\n    const newValue = value.includes(selectedValue)\n      ? value.filter((v) => v !== selectedValue)\n      : maxSelected && value.length >= maxSelected\n      ? value\n      : [...value, selectedValue];\n\n    onChange?.(newValue);\n  };\n\n  const handleClearAll = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    onChange?.([]);\n  };\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          role=\"combobox\"\n          aria-expanded={open}\n          disabled={disabled}\n          className={cn(\n            \"w-full justify-between\",\n            !value.length && \"text-muted-foreground\",\n            className\n          )}\n        >\n          <span className=\"truncate\">\n            {selectedLabels.length > 0\n              ? selectedLabels.length === 1\n                ? selectedLabels[0]\n                : `${selectedLabels.length} mục đã chọn`\n              : placeholder}\n          </span>\n          <div className=\"flex items-center gap-1 ml-2\">\n            {value.length > 0 && (\n              <X\n                className=\"h-4 w-4 opacity-50 hover:opacity-100\"\n                onClick={handleClearAll}\n              />\n            )}\n            <ChevronsUpDown className=\"h-4 w-4 shrink-0 opacity-50\" />\n          </div>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-[--radix-popover-trigger-width] p-0\" align=\"start\">\n        <Command>\n          <CommandInput placeholder={searchPlaceholder} />\n          <CommandList>\n            <CommandEmpty>{emptyText}</CommandEmpty>\n            <CommandGroup>\n              {options.map((option) => {\n                const isSelected = value.includes(option.value);\n                const isDisabled =\n                  option.disabled ||\n                  (!isSelected && maxSelected && value.length >= maxSelected);\n\n                return (\n                  <CommandItem\n                    key={option.value}\n                    value={option.value}\n                    disabled={!!isDisabled}\n                    onSelect={() => handleSelect(option.value)}\n                  >\n                    <Check\n                      className={cn(\n                        \"mr-2 h-4 w-4\",\n                        isSelected ? \"opacity-100\" : \"opacity-0\"\n                      )}\n                    />\n                    {option.label}\n                  </CommandItem>\n                );\n              })}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"]}

package/dist/chunk-NU56GKGM.js

@@ -0,0 +1,44 @@
+import { cn } from './chunk-DGPY4WP3.js';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground"
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TogglePrimitive.Root,
+    {
+      "data-slot": "toggle",
+      className: cn(toggleVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+export { Toggle, toggleVariants };
+//# sourceMappingURL=chunk-NU56GKGM.js.map
+//# sourceMappingURL=chunk-NU56GKGM.js.map

package/dist/chunk-NU56GKGM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/toggle.tsx"],"names":[],"mappings":";;;;;AAMA,IAAM,cAAA,GAAiB,GAAA;AAAA,EACrB,+iBAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,gBAAA;AAAA,QACT,OAAA,EACE;AAAA,OACJ;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS,kBAAA;AAAA,QACT,EAAA,EAAI,oBAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR;AAEJ;AAsBA,SAAS,MAAA,CAAO;AAAA,EACd,SAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAgB;AACd,EAAA,uBACE,GAAA;AAAA,IAAiB,eAAA,CAAA,IAAA;AAAA,IAAhB;AAAA,MACC,WAAA,EAAU,QAAA;AAAA,MACV,SAAA,EAAW,GAAG,cAAA,CAAe,EAAE,SAAS,IAAA,EAAM,SAAA,EAAW,CAAC,CAAA;AAAA,MACzD,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-NU56GKGM.js","sourcesContent":["import * as React from \"react\";\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../lib/utils\";\n\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline:\n          \"border border-input bg-transparent hover:bg-accent hover:text-accent-foreground\",\n      },\n      size: {\n        default: \"h-9 px-2 min-w-9\",\n        sm: \"h-8 px-1.5 min-w-8\",\n        lg: \"h-10 px-2.5 min-w-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\ninterface ToggleProps\n  extends React.ComponentProps<typeof TogglePrimitive.Root>,\n    VariantProps<typeof toggleVariants> {}\n\n/**\n * Two-state button that can be toggled on or off, with variant and size options.\n *\n * @example\n * ```tsx\n * // Basic toggle\n * <Toggle aria-label=\"Toggle bold\">\n *   <BoldIcon className=\"size-4\" />\n * </Toggle>\n *\n * // Outline variant, small size\n * <Toggle variant=\"outline\" size=\"sm\">\n *   <ItalicIcon className=\"size-4\" />\n * </Toggle>\n * ```\n */\nfunction Toggle({\n  className,\n  variant,\n  size,\n  ...props\n}: ToggleProps) {\n  return (\n    <TogglePrimitive.Root\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nexport { Toggle, toggleVariants };\nexport type { ToggleProps };"]}

package/dist/chunk-P3M5TZD2.js

@@ -0,0 +1,24 @@
+import { cn } from './chunk-DGPY4WP3.js';
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { jsx } from 'react/jsx-runtime';
+
+var Label = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    LabelPrimitive.Root,
+    {
+      ref,
+      "data-slot": "label",
+      className: cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+});
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };
+//# sourceMappingURL=chunk-P3M5TZD2.js.map
+//# sourceMappingURL=chunk-P3M5TZD2.js.map

package/dist/chunk-P3M5TZD2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/label.tsx"],"names":[],"mappings":";;;;;AAoBA,IAAM,KAAA,GAAc,iBAGlB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,KAAQ;AAClC,EAAA,uBACE,GAAA;AAAA,IAAgB,cAAA,CAAA,IAAA;AAAA,IAAf;AAAA,MACC,GAAA;AAAA,MACA,WAAA,EAAU,OAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,qNAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;AACD,KAAA,CAAM,cAA6B,cAAA,CAAA,IAAA,CAAK,WAAA","file":"chunk-P3M5TZD2.js","sourcesContent":["import * as React from \"react\";\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\n\nimport { cn } from \"../lib/utils\";\n\ntype LabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>;\n\n/**\n * Accessible label for form controls, automatically associated via `htmlFor`.\n *\n * @example\n * ```tsx\n * // With an input\n * <Label htmlFor=\"email\">Email address</Label>\n * <Input id=\"email\" type=\"email\" />\n *\n * // Disabled state (responds to group/peer disabled)\n * <Label htmlFor=\"name\">Name</Label>\n * ```\n */\nconst Label = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  LabelProps\n>(({ className, ...props }, ref) => {\n  return (\n    <LabelPrimitive.Root\n      ref={ref}\n      data-slot=\"label\"\n      className={cn(\n        \"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nLabel.displayName = LabelPrimitive.Root.displayName;\n\nexport { Label };\nexport type { LabelProps };\n"]}

package/dist/chunk-PGWNOZDX.js

@@ -0,0 +1,28 @@
+import { cn } from './chunk-DGPY4WP3.js';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { jsx } from 'react/jsx-runtime';
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SeparatorPrimitive.Root,
+    {
+      "data-slot": "separator-root",
+      decorative,
+      orientation,
+      className: cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export { Separator };
+//# sourceMappingURL=chunk-PGWNOZDX.js.map
+//# sourceMappingURL=chunk-PGWNOZDX.js.map

package/dist/chunk-PGWNOZDX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/separator.tsx"],"names":[],"mappings":";;;;AAuBA,SAAS,SAAA,CAAU;AAAA,EACjB,SAAA;AAAA,EACA,WAAA,GAAc,YAAA;AAAA,EACd,UAAA,GAAa,IAAA;AAAA,EACb,GAAG;AACL,CAAA,EAAmB;AACjB,EAAA,uBACE,GAAA;AAAA,IAAoB,kBAAA,CAAA,IAAA;AAAA,IAAnB;AAAA,MACC,WAAA,EAAU,gBAAA;AAAA,MACV,UAAA;AAAA,MACA,WAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,gKAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-PGWNOZDX.js","sourcesContent":["import * as React from \"react\";\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\";\n\nimport { cn } from \"../lib/utils\";\n\ntype SeparatorProps = React.ComponentProps<typeof SeparatorPrimitive.Root>;\n\n/**\n * Visual divider between content sections, rendered as a horizontal or vertical line.\n *\n * @example\n * ```tsx\n * // Horizontal (default)\n * <Separator />\n *\n * // Vertical divider in a flex row\n * <div className=\"flex items-center gap-4\">\n *   <span>Left</span>\n *   <Separator orientation=\"vertical\" className=\"h-4\" />\n *   <span>Right</span>\n * </div>\n * ```\n */\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  ...props\n}: SeparatorProps) {\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator-root\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Separator };\nexport type { SeparatorProps };"]}

package/dist/chunk-QB3UWRZH.js

@@ -0,0 +1,92 @@
+import { buttonVariants } from './chunk-55E7D2HR.js';
+import { cn } from './chunk-DGPY4WP3.js';
+import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from 'lucide-react';
+import { getDefaultClassNames, DayPicker } from 'react-day-picker';
+import { jsx } from 'react/jsx-runtime';
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}) {
+  const defaultClassNames = getDefaultClassNames();
+  return /* @__PURE__ */ jsx(
+    DayPicker,
+    {
+      showOutsideDays,
+      className: cn("p-3", className),
+      classNames: {
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn("flex flex-col sm:flex-row gap-2", defaultClassNames.months),
+        month: cn("flex flex-col gap-4 w-full", defaultClassNames.month),
+        month_caption: cn(
+          "flex justify-center pt-1 relative items-center w-full",
+          defaultClassNames.month_caption
+        ),
+        caption_label: cn("text-sm font-medium select-none", defaultClassNames.caption_label),
+        dropdowns: cn(
+          "flex items-center text-sm font-medium justify-center gap-1.5",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative border border-input rounded-md",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
+        nav: cn(
+          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: "outline" }),
+          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100 select-none",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: "outline" }),
+          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100 select-none",
+          defaultClassNames.button_next
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem] select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("flex w-full mt-2", defaultClassNames.week),
+        day: cn(
+          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 select-none",
+          "[&:has([aria-selected])]:bg-accent",
+          "[&:has([aria-selected].rdp-day_range_end)]:rounded-r-md",
+          props.mode === "range" ? "[&:has(>.rdp-day_range_end)]:rounded-r-md [&:has(>.rdp-day_range_start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" : "[&:has([aria-selected])]:rounded-md",
+          defaultClassNames.day
+        ),
+        day_button: cn(
+          buttonVariants({ variant: "ghost" }),
+          "size-8 p-0 font-normal aria-selected:opacity-100"
+        ),
+        range_start: "rdp-day_range_start aria-selected:bg-primary aria-selected:text-primary-foreground rounded-l-md",
+        range_end: "rdp-day_range_end aria-selected:bg-primary aria-selected:text-primary-foreground rounded-r-md",
+        selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground rounded-md",
+        today: "bg-accent text-accent-foreground rounded-md",
+        outside: "text-muted-foreground aria-selected:text-muted-foreground",
+        disabled: "text-muted-foreground opacity-50",
+        range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground rounded-none",
+        hidden: "invisible",
+        ...classNames
+      },
+      components: {
+        Chevron: ({ className: className2, orientation, ...chevronProps }) => {
+          const Icon = orientation === "left" ? ChevronLeftIcon : orientation === "right" ? ChevronRightIcon : ChevronDownIcon;
+          return /* @__PURE__ */ jsx(Icon, { className: cn("size-4", className2), ...chevronProps });
+        }
+      },
+      ...props
+    }
+  );
+}
+
+export { Calendar };
+//# sourceMappingURL=chunk-QB3UWRZH.js.map
+//# sourceMappingURL=chunk-QB3UWRZH.js.map

package/dist/chunk-QB3UWRZH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/calendar.tsx"],"names":["className"],"mappings":"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","file":"chunk-QB3UWRZH.js","sourcesContent":["import * as React from \"react\";\nimport { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from \"lucide-react\";\nimport { DayPicker, getDefaultClassNames } from \"react-day-picker\";\n\nimport { cn } from \"../lib/utils\";\nimport { buttonVariants } from \"./button\";\n\n/**\n * Date picker calendar built on `react-day-picker` v9. Supports single, multiple,\n * and range selection modes. Styled with Shadcn UI conventions.\n *\n * @param showOutsideDays - Whether to show days from adjacent months. Defaults to `true`.\n *\n * @example\n * ```tsx\n * const [date, setDate] = useState<Date | undefined>();\n * <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n * ```\n */\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: React.ComponentProps<typeof DayPicker>) {\n  const defaultClassNames = getDefaultClassNames();\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\"flex flex-col sm:flex-row gap-2\", defaultClassNames.months),\n        month: cn(\"flex flex-col gap-4 w-full\", defaultClassNames.month),\n        month_caption: cn(\n          \"flex justify-center pt-1 relative items-center w-full\",\n          defaultClassNames.month_caption,\n        ),\n        caption_label: cn(\"text-sm font-medium select-none\", defaultClassNames.caption_label),\n        dropdowns: cn(\n          \"flex items-center text-sm font-medium justify-center gap-1.5\",\n          defaultClassNames.dropdowns,\n        ),\n        dropdown_root: cn(\n          \"relative border border-input rounded-md\",\n          defaultClassNames.dropdown_root,\n        ),\n        dropdown: cn(\"absolute inset-0 opacity-0\", defaultClassNames.dropdown),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav,\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"size-7 bg-transparent p-0 opacity-50 hover:opacity-100 select-none\",\n          defaultClassNames.button_previous,\n        ),\n        button_next: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"size-7 bg-transparent p-0 opacity-50 hover:opacity-100 select-none\",\n          defaultClassNames.button_next,\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday,\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        day: cn(\n          \"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 select-none\",\n          \"[&:has([aria-selected])]:bg-accent\",\n          \"[&:has([aria-selected].rdp-day_range_end)]:rounded-r-md\",\n          props.mode === \"range\"\n            ? \"[&:has(>.rdp-day_range_end)]:rounded-r-md [&:has(>.rdp-day_range_start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\"\n            : \"[&:has([aria-selected])]:rounded-md\",\n          defaultClassNames.day,\n        ),\n        day_button: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"size-8 p-0 font-normal aria-selected:opacity-100\",\n        ),\n        range_start:\n          \"rdp-day_range_start aria-selected:bg-primary aria-selected:text-primary-foreground rounded-l-md\",\n        range_end:\n          \"rdp-day_range_end aria-selected:bg-primary aria-selected:text-primary-foreground rounded-r-md\",\n        selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground rounded-md\",\n        today: \"bg-accent text-accent-foreground rounded-md\",\n        outside: \"text-muted-foreground aria-selected:text-muted-foreground\",\n        disabled: \"text-muted-foreground opacity-50\",\n        range_middle:\n          \"aria-selected:bg-accent aria-selected:text-accent-foreground rounded-none\",\n        hidden: \"invisible\",\n        ...classNames,\n      }}\n      components={{\n        Chevron: ({ className, orientation, ...chevronProps }) => {\n          const Icon =\n            orientation === \"left\"\n              ? ChevronLeftIcon\n              : orientation === \"right\"\n                ? ChevronRightIcon\n                : ChevronDownIcon;\n          return <Icon className={cn(\"size-4\", className)} {...chevronProps} />;\n        },\n      }}\n      {...props}\n    />\n  );\n}\n\nexport { Calendar };\n"]}

package/dist/chunk-R2CDE5DO.js

@@ -0,0 +1,33 @@
+import { cn } from './chunk-DGPY4WP3.js';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import { jsx } from 'react/jsx-runtime';
+
+function Progress({
+  className,
+  value,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ProgressPrimitive.Root,
+    {
+      "data-slot": "progress",
+      className: cn(
+        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        ProgressPrimitive.Indicator,
+        {
+          "data-slot": "progress-indicator",
+          className: "bg-primary h-full w-full flex-1 transition-all",
+          style: { transform: `translateX(-${100 - (value || 0)}%)` }
+        }
+      )
+    }
+  );
+}
+
+export { Progress };
+//# sourceMappingURL=chunk-R2CDE5DO.js.map
+//# sourceMappingURL=chunk-R2CDE5DO.js.map

package/dist/chunk-R2CDE5DO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/progress.tsx"],"names":[],"mappings":";;;;AAmBA,SAAS,QAAA,CAAS;AAAA,EAChB,SAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAkB;AAChB,EAAA,uBACE,GAAA;AAAA,IAAmB,iBAAA,CAAA,IAAA;AAAA,IAAlB;AAAA,MACC,WAAA,EAAU,UAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,gEAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA;AAAA,QAAmB,iBAAA,CAAA,SAAA;AAAA,QAAlB;AAAA,UACC,WAAA,EAAU,oBAAA;AAAA,UACV,SAAA,EAAU,gDAAA;AAAA,UACV,OAAO,EAAE,SAAA,EAAW,eAAe,GAAA,IAAO,KAAA,IAAS,EAAE,CAAA,EAAA,CAAA;AAAK;AAAA;AAC5D;AAAA,GACF;AAEJ","file":"chunk-R2CDE5DO.js","sourcesContent":["import * as React from \"react\";\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\";\n\nimport { cn } from \"../lib/utils\";\n\ntype ProgressProps = React.ComponentProps<typeof ProgressPrimitive.Root>;\n\n/**\n * Horizontal bar that indicates the completion progress of a task or operation.\n *\n * @example\n * ```tsx\n * // Basic usage (65% complete)\n * <Progress value={65} />\n *\n * // With custom styling\n * <Progress value={40} className=\"h-3\" />\n * ```\n */\nfunction Progress({\n  className,\n  value,\n  ...props\n}: ProgressProps) {\n  return (\n    <ProgressPrimitive.Root\n      data-slot=\"progress\"\n      className={cn(\n        \"bg-primary/20 relative h-2 w-full overflow-hidden rounded-full\",\n        className,\n      )}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        data-slot=\"progress-indicator\"\n        className=\"bg-primary h-full w-full flex-1 transition-all\"\n        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n      />\n    </ProgressPrimitive.Root>\n  );\n}\n\nexport { Progress };\nexport type { ProgressProps };"]}

package/dist/chunk-RQNZDWY3.js

@@ -0,0 +1,65 @@
+import { cn } from './chunk-DGPY4WP3.js';
+import * as React from 'react';
+import { OTPInput, OTPInputContext } from 'input-otp';
+import { MinusIcon } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    OTPInput,
+    {
+      "data-slot": "input-otp",
+      containerClassName: cn(
+        "flex items-center gap-2 has-disabled:opacity-50",
+        containerClassName
+      ),
+      className: cn("disabled:cursor-not-allowed", className),
+      ...props
+    }
+  );
+}
+function InputOTPGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "input-otp-group",
+      className: cn("flex items-center gap-1", className),
+      ...props
+    }
+  );
+}
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "input-otp-slot",
+      "data-active": isActive,
+      className: cn(
+        "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm bg-input-background transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
+        className
+      ),
+      ...props,
+      children: [
+        char,
+        hasFakeCaret && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "animate-caret-blink bg-foreground h-4 w-px duration-1000" }) })
+      ]
+    }
+  );
+}
+function InputOTPSeparator({ ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "input-otp-separator", role: "separator", ...props, children: /* @__PURE__ */ jsx(MinusIcon, {}) });
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };
+//# sourceMappingURL=chunk-RQNZDWY3.js.map
+//# sourceMappingURL=chunk-RQNZDWY3.js.map

package/dist/chunk-RQNZDWY3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/input-otp.tsx"],"names":[],"mappings":";;;;;;AA2BA,SAAS,QAAA,CAAS;AAAA,EAChB,SAAA;AAAA,EACA,kBAAA;AAAA,EACA,GAAG;AACL,CAAA,EAEG;AACD,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,WAAA;AAAA,MACV,kBAAA,EAAoB,EAAA;AAAA,QAClB,iDAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,SAAA,EAAW,EAAA,CAAG,6BAAA,EAA+B,SAAS,CAAA;AAAA,MACrD,GAAG;AAAA;AAAA,GACN;AAEJ;AAGA,SAAS,aAAA,CAAc,EAAE,SAAA,EAAW,GAAG,OAAM,EAAgC;AAC3E,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,yBAAA,EAA2B,SAAS,CAAA;AAAA,MACjD,GAAG;AAAA;AAAA,GACN;AAEJ;AAGA,SAAS,YAAA,CAAa;AAAA,EACpB,KAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAEG;AACD,EAAA,MAAM,eAAA,GAAwB,iBAAW,eAAe,CAAA;AACxD,EAAA,MAAM,EAAE,MAAM,YAAA,EAAc,QAAA,KAAa,eAAA,EAAiB,KAAA,CAAM,KAAK,CAAA,IAAK,EAAC;AAE3E,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,gBAAA;AAAA,MACV,aAAA,EAAa,QAAA;AAAA,MACb,SAAA,EAAW,EAAA;AAAA,QACT,ogBAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,IAAA;AAAA,QACA,YAAA,wBACE,KAAA,EAAA,EAAI,SAAA,EAAU,yEACb,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0DAAA,EAA2D,CAAA,EAC5E;AAAA;AAAA;AAAA,GAEJ;AAEJ;AAGA,SAAS,iBAAA,CAAkB,EAAE,GAAG,KAAA,EAAM,EAAgC;AACpE,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,qBAAA,EAAsB,IAAA,EAAK,aAAa,GAAG,KAAA,EACxD,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,CAAA,EACb,CAAA;AAEJ","file":"chunk-RQNZDWY3.js","sourcesContent":["import * as React from \"react\";\nimport { OTPInput, OTPInputContext } from \"input-otp\";\nimport { MinusIcon } from \"lucide-react\";\n\nimport { cn } from \"../lib/utils\";\n\n/**\n * One-time password input component built on the `input-otp` library.\n * Renders a segmented input for entering verification codes.\n *\n * @example\n * ```tsx\n * <InputOTP maxLength={6} value={otp} onChange={setOtp}>\n *   <InputOTPGroup>\n *     <InputOTPSlot index={0} />\n *     <InputOTPSlot index={1} />\n *     <InputOTPSlot index={2} />\n *   </InputOTPGroup>\n *   <InputOTPSeparator />\n *   <InputOTPGroup>\n *     <InputOTPSlot index={3} />\n *     <InputOTPSlot index={4} />\n *     <InputOTPSlot index={5} />\n *   </InputOTPGroup>\n * </InputOTP>\n * ```\n */\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string;\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"flex items-center gap-2 has-disabled:opacity-50\",\n        containerClassName,\n      )}\n      className={cn(\"disabled:cursor-not-allowed\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Groups adjacent OTP slots together visually. */\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\"flex items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Individual character slot within an OTP group. */\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number;\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext);\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm bg-input-background transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]\",\n        className,\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** Visual separator (dash) between OTP groups. */\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"input-otp-separator\" role=\"separator\" {...props}>\n      <MinusIcon />\n    </div>\n  );\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };"]}