@etus/ui 0.4.0-beta.2 → 0.4.0-beta.20

package/dist/chunk-7YZ7HNXX.js

@@ -0,0 +1,268 @@
+import { cn } from './chunk-RVAYDRMA.js';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { Command } from 'cmdk';
+import { ChevronDownIcon, SearchIcon, CheckIcon } from 'lucide-react';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var comboboxTriggerVariants = cva(
+  // Base styles
+  [
+    "flex w-fit items-center justify-between gap-[var(--combobox-trigger-gap)] rounded-[var(--combobox-trigger-radius)] border bg-transparent",
+    "text-[length:var(--combobox-trigger-text)] whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none",
+    "data-[placeholder]:text-muted-foreground",
+    "[&_svg:not([class*='text-'])]:text-muted-foreground",
+    "focus-visible:border-[color:var(--combobox-trigger-border-focus)] focus-visible:ring-[color:var(--combobox-trigger-ring-primary)]/50 focus-visible:ring-[length:var(--combobox-trigger-ring-width)]",
+    "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+    "dark:bg-input/30 dark:hover:bg-input/50",
+    "disabled:cursor-not-allowed disabled:bg-[color:var(--combobox-trigger-disabled-bg)] disabled:text-[color:var(--combobox-trigger-disabled-fg)] disabled:border-[color:var(--combobox-trigger-disabled-border)]",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-[var(--combobox-trigger-height-sm)] px-[var(--combobox-trigger-padding-x-sm)] py-[var(--combobox-trigger-padding-y-sm)] text-[length:var(--combobox-trigger-text-sm)]",
+        md: "h-[var(--combobox-trigger-height-md)] px-[var(--combobox-trigger-padding-x-md)] py-[var(--combobox-trigger-padding-y-md)] text-[length:var(--combobox-trigger-text-md)]",
+        lg: "h-[var(--combobox-trigger-height-lg)] px-[var(--combobox-trigger-padding-x-lg)] py-[var(--combobox-trigger-padding-y-lg)] text-[length:var(--combobox-trigger-text-lg)]"
+      },
+      variant: {
+        default: "border-input shadow-xs",
+        filled: "border-transparent bg-muted",
+        flushed: "rounded-none border-x-0 border-t-0 border-b-input px-0 shadow-none"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "default"
+    }
+  }
+);
+var comboboxContentVariants = cva(
+  // Base styles
+  [
+    "bg-[color:var(--combobox-content-bg)] text-[color:var(--combobox-content-fg)]",
+    "z-50 w-[var(--combobox-content-min-width)] overflow-hidden rounded-[var(--combobox-content-radius)] border border-[color:var(--combobox-content-border)] shadow-[var(--combobox-content-shadow)] p-0",
+    // Animation classes
+    "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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+    "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+  ],
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var comboboxInputVariants = cva(
+  [
+    "flex h-9 w-full rounded-md bg-transparent py-3 text-sm outline-none",
+    "placeholder:text-muted-foreground",
+    "disabled:cursor-not-allowed disabled:opacity-50"
+  ],
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var comboboxItemVariants = cva(
+  [
+    "relative flex cursor-default items-center gap-2 rounded-[var(--combobox-item-radius)] px-[var(--combobox-item-padding-x)] py-[var(--combobox-item-padding-y)] text-[length:var(--combobox-item-text)]",
+    "outline-none select-none",
+    "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+    "data-[selected=true]:bg-[color:var(--combobox-item-focus-bg)] data-[selected=true]:text-[color:var(--combobox-item-focus-fg)]",
+    "[&_svg:not([class*='text-'])]:text-muted-foreground",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+  ],
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var comboboxEmptyVariants = cva(
+  ["py-6 text-center text-sm text-muted-foreground"],
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+function Combobox({
+  options,
+  value: controlledValue,
+  defaultValue,
+  placeholder = "Select an option...",
+  searchPlaceholder = "Search...",
+  emptyMessage = "No results found.",
+  disabled = false,
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  onChange,
+  onSearch,
+  size = "md",
+  variant = "default",
+  kbdHint,
+  className,
+  ...props
+}) {
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const value = controlledValue ?? internalValue;
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+  const open = controlledOpen ?? internalOpen;
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const selectedLabel = React.useMemo(() => {
+    if (!value) return null;
+    const option = options.find((opt) => opt.value === value);
+    return option?.label ?? null;
+  }, [value, options]);
+  const handleOpenChange = React.useCallback(
+    (newOpen) => {
+      if (controlledOpen === void 0) {
+        setInternalOpen(newOpen);
+      }
+      onOpenChange?.(newOpen);
+      if (!newOpen) {
+        setSearchQuery("");
+      }
+    },
+    [controlledOpen, onOpenChange]
+  );
+  const handleSelect = React.useCallback(
+    (selectedValue) => {
+      if (controlledValue === void 0) {
+        setInternalValue(selectedValue);
+      }
+      onChange?.(selectedValue);
+      handleOpenChange(false);
+    },
+    [controlledValue, onChange, handleOpenChange]
+  );
+  const handleSearchChange = React.useCallback(
+    (query) => {
+      setSearchQuery(query);
+      onSearch?.(query);
+    },
+    [onSearch]
+  );
+  return /* @__PURE__ */ jsxs(PopoverPrimitive.Root, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        className: cn(comboboxTriggerVariants({ size, variant }), className),
+        "data-size": size,
+        "data-slot": "combobox",
+        "data-variant": variant,
+        disabled,
+        role: "combobox",
+        type: "button",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "truncate",
+              "data-placeholder": !selectedLabel || void 0,
+              "data-slot": "combobox-trigger",
+              children: selectedLabel ?? placeholder
+            }
+          ),
+          /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 shrink-0 opacity-50" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+      PopoverPrimitive.Content,
+      {
+        align: "start",
+        className: cn(comboboxContentVariants()),
+        "data-slot": "combobox-content",
+        sideOffset: 4,
+        children: /* @__PURE__ */ jsxs(
+          Command,
+          {
+            className: "flex h-full w-full flex-col overflow-hidden",
+            shouldFilter: !onSearch,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b px-3", children: [
+                /* @__PURE__ */ jsx(SearchIcon, { className: "mr-2 size-4 shrink-0 opacity-50" }),
+                /* @__PURE__ */ jsx(
+                  Command.Input,
+                  {
+                    "aria-autocomplete": "list",
+                    className: cn(comboboxInputVariants()),
+                    "data-slot": "combobox-input",
+                    placeholder: searchPlaceholder,
+                    value: searchQuery,
+                    onValueChange: handleSearchChange
+                  }
+                ),
+                kbdHint && /* @__PURE__ */ jsx(
+                  "kbd",
+                  {
+                    "aria-hidden": "true",
+                    className: "ml-2 inline-flex h-5 shrink-0 items-center rounded border bg-muted px-1.5 text-[length:var(--combobox-kbd-hint-font-size)] font-semibold text-muted-foreground",
+                    "data-slot": "combobox-kbd",
+                    children: kbdHint
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs(
+                Command.List,
+                {
+                  className: "max-h-72 overflow-y-auto overflow-x-hidden p-1",
+                  "data-slot": "combobox-list",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Command.Empty,
+                      {
+                        className: cn(comboboxEmptyVariants()),
+                        "data-slot": "combobox-empty",
+                        children: emptyMessage
+                      }
+                    ),
+                    options.map((option) => /* @__PURE__ */ jsxs(
+                      Command.Item,
+                      {
+                        className: cn(comboboxItemVariants()),
+                        "data-disabled": option.disabled ?? void 0,
+                        "data-selected": value === option.value || void 0,
+                        "data-slot": "combobox-item",
+                        disabled: option.disabled ?? false,
+                        value: option.label,
+                        onSelect: () => {
+                          if (!option.disabled) {
+                            handleSelect(option.value);
+                          }
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            CheckIcon,
+                            {
+                              className: cn(
+                                "size-4",
+                                value === option.value ? "opacity-100" : "opacity-0"
+                              )
+                            }
+                          ),
+                          option.label
+                        ]
+                      },
+                      option.value
+                    ))
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    ) })
+  ] });
+}
+
+export { Combobox };
+//# sourceMappingURL=chunk-7YZ7HNXX.js.map
+//# sourceMappingURL=chunk-7YZ7HNXX.js.map

package/dist/chunk-7YZ7HNXX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/Combobox/Combobox.variants.ts","../src/components/forms/Combobox/Combobox.tsx"],"names":["CommandPrimitive"],"mappings":"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","file":"chunk-7YZ7HNXX.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * ComboboxTrigger variant styles using CVA\n */\nexport const comboboxTriggerVariants = cva(\n  // Base styles\n  [\n    \"flex w-fit items-center justify-between gap-[var(--combobox-trigger-gap)] rounded-[var(--combobox-trigger-radius)] border bg-transparent\",\n    \"text-[length:var(--combobox-trigger-text)] whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none\",\n    \"data-[placeholder]:text-muted-foreground\",\n    \"[&_svg:not([class*='text-'])]:text-muted-foreground\",\n    \"focus-visible:border-[color:var(--combobox-trigger-border-focus)] focus-visible:ring-[color:var(--combobox-trigger-ring-primary)]/50 focus-visible:ring-[length:var(--combobox-trigger-ring-width)]\",\n    \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n    \"dark:bg-input/30 dark:hover:bg-input/50\",\n    \"disabled:cursor-not-allowed disabled:bg-[color:var(--combobox-trigger-disabled-bg)] disabled:text-[color:var(--combobox-trigger-disabled-fg)] disabled:border-[color:var(--combobox-trigger-disabled-border)]\",\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"h-[var(--combobox-trigger-height-sm)] px-[var(--combobox-trigger-padding-x-sm)] py-[var(--combobox-trigger-padding-y-sm)] text-[length:var(--combobox-trigger-text-sm)]\",\n        md: \"h-[var(--combobox-trigger-height-md)] px-[var(--combobox-trigger-padding-x-md)] py-[var(--combobox-trigger-padding-y-md)] text-[length:var(--combobox-trigger-text-md)]\",\n        lg: \"h-[var(--combobox-trigger-height-lg)] px-[var(--combobox-trigger-padding-x-lg)] py-[var(--combobox-trigger-padding-y-lg)] text-[length:var(--combobox-trigger-text-lg)]\",\n      },\n      variant: {\n        default: \"border-input shadow-xs\",\n        filled: \"border-transparent bg-muted\",\n        flushed: \"rounded-none border-x-0 border-t-0 border-b-input px-0 shadow-none\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      variant: \"default\",\n    },\n  }\n)\n\n/**\n * ComboboxContent variant styles using CVA\n */\nexport const comboboxContentVariants = cva(\n  // Base styles\n  [\n    \"bg-[color:var(--combobox-content-bg)] text-[color:var(--combobox-content-fg)]\",\n    \"z-50 w-[var(--combobox-content-min-width)] overflow-hidden rounded-[var(--combobox-content-radius)] border border-[color:var(--combobox-content-border)] shadow-[var(--combobox-content-shadow)] p-0\",\n    // Animation classes\n    \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n    \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n    \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n    \"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2\",\n    \"data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n  ],\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n)\n\n/**\n * ComboboxInput variant styles using CVA\n */\nexport const comboboxInputVariants = cva(\n  [\n    \"flex h-9 w-full rounded-md bg-transparent py-3 text-sm outline-none\",\n    \"placeholder:text-muted-foreground\",\n    \"disabled:cursor-not-allowed disabled:opacity-50\",\n  ],\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n)\n\n/**\n * ComboboxItem variant styles using CVA\n */\nexport const comboboxItemVariants = cva(\n  [\n    \"relative flex cursor-default items-center gap-2 rounded-[var(--combobox-item-radius)] px-[var(--combobox-item-padding-x)] py-[var(--combobox-item-padding-y)] text-[length:var(--combobox-item-text)]\",\n    \"outline-none select-none\",\n    \"data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50\",\n    \"data-[selected=true]:bg-[color:var(--combobox-item-focus-bg)] data-[selected=true]:text-[color:var(--combobox-item-focus-fg)]\",\n    \"[&_svg:not([class*='text-'])]:text-muted-foreground\",\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  ],\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n)\n\n/**\n * ComboboxEmpty variant styles using CVA\n */\nexport const comboboxEmptyVariants = cva(\n  [\"py-6 text-center text-sm text-muted-foreground\"],\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n)\n\nexport type ComboboxTriggerVariantProps = VariantProps<typeof comboboxTriggerVariants>\nexport type ComboboxContentVariantProps = VariantProps<typeof comboboxContentVariants>\nexport type ComboboxInputVariantProps = VariantProps<typeof comboboxInputVariants>\nexport type ComboboxItemVariantProps = VariantProps<typeof comboboxItemVariants>\nexport type ComboboxEmptyVariantProps = VariantProps<typeof comboboxEmptyVariants>\n","import type { ComboboxProps } from \"./Combobox.types\"\n\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { CheckIcon, ChevronDownIcon, SearchIcon } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  comboboxContentVariants,\n  comboboxEmptyVariants,\n  comboboxInputVariants,\n  comboboxItemVariants,\n  comboboxTriggerVariants,\n} from \"./Combobox.variants\"\n\n/**\n * Combobox - A searchable select component with keyboard navigation\n *\n * Uses Radix Popover for the dropdown container and cmdk (Command) for\n * search/filter functionality with full keyboard accessibility.\n *\n * @example\n * ```tsx\n * <Combobox\n *   options={[\n *     { value: \"apple\", label: \"Apple\" },\n *     { value: \"banana\", label: \"Banana\" },\n *   ]}\n *   placeholder=\"Select a fruit...\"\n *   onChange={(value) => console.log(value)}\n * />\n * ```\n */\nfunction Combobox({\n  options,\n  value: controlledValue,\n  defaultValue,\n  placeholder = \"Select an option...\",\n  searchPlaceholder = \"Search...\",\n  emptyMessage = \"No results found.\",\n  disabled = false,\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  onChange,\n  onSearch,\n  size = \"md\",\n  variant = \"default\",\n  kbdHint,\n  className,\n  ...props\n}: ComboboxProps) {\n  // Handle controlled vs uncontrolled value\n  const [internalValue, setInternalValue] = React.useState<string | undefined>(defaultValue)\n  const value = controlledValue ?? internalValue\n\n  // Handle controlled vs uncontrolled open state\n  const [internalOpen, setInternalOpen] = React.useState(defaultOpen)\n  const open = controlledOpen ?? internalOpen\n\n  // Search query state\n  const [searchQuery, setSearchQuery] = React.useState(\"\")\n\n  // Get the label for the currently selected value\n  const selectedLabel = React.useMemo(() => {\n    if (!value) return null\n    const option = options.find((opt) => opt.value === value)\n    return option?.label ?? null\n  }, [value, options])\n\n  // Handle open state changes\n  const handleOpenChange = React.useCallback(\n    (newOpen: boolean) => {\n      if (controlledOpen === undefined) {\n        setInternalOpen(newOpen)\n      }\n      onOpenChange?.(newOpen)\n\n      // Clear search when closing\n      if (!newOpen) {\n        setSearchQuery(\"\")\n      }\n    },\n    [controlledOpen, onOpenChange]\n  )\n\n  // Handle value selection\n  const handleSelect = React.useCallback(\n    (selectedValue: string) => {\n      if (controlledValue === undefined) {\n        setInternalValue(selectedValue)\n      }\n      onChange?.(selectedValue)\n      handleOpenChange(false)\n    },\n    [controlledValue, onChange, handleOpenChange]\n  )\n\n  // Handle search input changes\n  const handleSearchChange = React.useCallback(\n    (query: string) => {\n      setSearchQuery(query)\n      onSearch?.(query)\n    },\n    [onSearch]\n  )\n\n  return (\n    <PopoverPrimitive.Root open={open} onOpenChange={handleOpenChange}>\n      <PopoverPrimitive.Trigger asChild>\n        <button\n          aria-expanded={open}\n          aria-haspopup=\"listbox\"\n          className={cn(comboboxTriggerVariants({ size, variant }), className)}\n          data-size={size}\n          data-slot=\"combobox\"\n          data-variant={variant}\n          disabled={disabled}\n          role=\"combobox\"\n          type=\"button\"\n          {...props}\n        >\n          <span\n            className=\"truncate\"\n            data-placeholder={!selectedLabel || undefined}\n            data-slot=\"combobox-trigger\"\n          >\n            {selectedLabel ?? placeholder}\n          </span>\n          <ChevronDownIcon className=\"size-4 shrink-0 opacity-50\" />\n        </button>\n      </PopoverPrimitive.Trigger>\n\n      <PopoverPrimitive.Portal>\n        <PopoverPrimitive.Content\n          align=\"start\"\n          className={cn(comboboxContentVariants())}\n          data-slot=\"combobox-content\"\n          sideOffset={4}\n        >\n          <CommandPrimitive\n            className=\"flex h-full w-full flex-col overflow-hidden\"\n            shouldFilter={!onSearch}\n          >\n            <div className=\"flex items-center border-b px-3\">\n              <SearchIcon className=\"mr-2 size-4 shrink-0 opacity-50\" />\n              <CommandPrimitive.Input\n                aria-autocomplete=\"list\"\n                className={cn(comboboxInputVariants())}\n                data-slot=\"combobox-input\"\n                placeholder={searchPlaceholder}\n                value={searchQuery}\n                onValueChange={handleSearchChange}\n              />\n              {kbdHint && (\n                <kbd\n                  aria-hidden=\"true\"\n                  className=\"ml-2 inline-flex h-5 shrink-0 items-center rounded border bg-muted px-1.5 text-[length:var(--combobox-kbd-hint-font-size)] font-semibold text-muted-foreground\"\n                  data-slot=\"combobox-kbd\"\n                >\n                  {kbdHint}\n                </kbd>\n              )}\n            </div>\n\n            <CommandPrimitive.List\n              className=\"max-h-72 overflow-y-auto overflow-x-hidden p-1\"\n              data-slot=\"combobox-list\"\n            >\n              <CommandPrimitive.Empty\n                className={cn(comboboxEmptyVariants())}\n                data-slot=\"combobox-empty\"\n              >\n                {emptyMessage}\n              </CommandPrimitive.Empty>\n\n              {options.map((option) => (\n                <CommandPrimitive.Item\n                  key={option.value}\n                  className={cn(comboboxItemVariants())}\n                  data-disabled={option.disabled ?? undefined}\n                  data-selected={value === option.value || undefined}\n                  data-slot=\"combobox-item\"\n                  disabled={option.disabled ?? false}\n                  value={option.label}\n                  onSelect={() => {\n                    if (!option.disabled) {\n                      handleSelect(option.value)\n                    }\n                  }}\n                >\n                  <CheckIcon\n                    className={cn(\n                      \"size-4\",\n                      value === option.value ? \"opacity-100\" : \"opacity-0\"\n                    )}\n                  />\n                  {option.label}\n                </CommandPrimitive.Item>\n              ))}\n            </CommandPrimitive.List>\n          </CommandPrimitive>\n        </PopoverPrimitive.Content>\n      </PopoverPrimitive.Portal>\n    </PopoverPrimitive.Root>\n  )\n}\n\nexport { Combobox }\n"]}

package/dist/chunk-AD4RW2JV.js

@@ -0,0 +1,70 @@
+import { cn } from './chunk-RVAYDRMA.js';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function IftaLabel({
+  children,
+  label,
+  className,
+  ...props
+}) {
+  const [inputId, setInputId] = React.useState();
+  const generatedId = React.useId();
+  const wrapperRef = React.useRef(null);
+  React.useEffect(() => {
+    if (wrapperRef.current) {
+      const input = wrapperRef.current.querySelector(
+        "input, select, textarea, [data-slot$='-trigger'], [data-slot='combobox']"
+      );
+      if (input) {
+        input.setAttribute("data-ifta-field", "");
+        const existingId = input.getAttribute("id");
+        if (existingId) {
+          setInputId(existingId);
+        } else {
+          const newId = `ifta-label-input-${generatedId.replaceAll(":", "")}`;
+          input.setAttribute("id", newId);
+          setInputId(newId);
+        }
+        if (input.tagName === "INPUT" && !input.hasAttribute("placeholder")) {
+          input.setAttribute("placeholder", " ");
+        }
+      }
+    }
+  }, [generatedId, children]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrapperRef,
+      className: cn(
+        "relative group [&_input]:pt-[var(--ifta-label-wrapper-padding-top)] [&_input]:pb-[var(--ifta-label-wrapper-padding-bottom)] [&_input]:h-[var(--ifta-label-wrapper-height)]",
+        // Reserve label space on non-native controls (e.g. Select/Combobox
+        // button triggers) that have no descendant <input>. Uses min-height so
+        // the control's own height variant is respected, just floored to fit.
+        "[&_[data-ifta-field]:not(input)]:pt-[var(--ifta-label-wrapper-padding-top)] [&_[data-ifta-field]:not(input)]:pb-[var(--ifta-label-wrapper-padding-bottom)] [&_[data-ifta-field]:not(input)]:min-h-[var(--ifta-label-wrapper-height)]",
+        "has-[input:disabled]:opacity-[var(--ifta-label-wrapper-disabled-opacity)] has-[[data-ifta-field]:disabled]:opacity-[var(--ifta-label-wrapper-disabled-opacity)]",
+        "has-[input:disabled]:pointer-events-none has-[input:disabled]:cursor-not-allowed",
+        "has-[[data-ifta-field]:disabled]:pointer-events-none has-[[data-ifta-field]:disabled]:cursor-not-allowed",
+        className
+      ),
+      "data-slot": "ifta-label",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "label",
+          {
+            className: "pointer-events-none absolute left-3 top-1.5 text-xs font-normal text-[color:var(--ifta-label-label-color-muted)] group-focus-within:text-[color:var(--ifta-label-label-color-foreground)] group-has-[input:not(:placeholder-shown)]:text-[color:var(--ifta-label-label-color-foreground)] group-has-[[aria-invalid=true]]:text-[color:var(--ifta-label-label-color-destructive)] group-has-[input:disabled]:text-[color:var(--ifta-label-label-color-muted)]",
+            "data-slot": "ifta-label-text",
+            htmlFor: inputId,
+            children: label
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+
+export { IftaLabel };
+//# sourceMappingURL=chunk-AD4RW2JV.js.map
+//# sourceMappingURL=chunk-AD4RW2JV.js.map

package/dist/chunk-AD4RW2JV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/IftaLabel/IftaLabel.tsx"],"names":[],"mappings":";;;;AAmBA,SAAS,SAAA,CAAU;AAAA,EACjB,QAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAmB;AACjB,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAU,KAAA,CAAA,QAAA,EAA6B;AACjE,EAAA,MAAM,cAAoB,KAAA,CAAA,KAAA,EAAM;AAChC,EAAA,MAAM,UAAA,GAAmB,aAAuB,IAAI,CAAA;AASpD,EAAM,gBAAU,MAAM;AACpB,IAAA,IAAI,WAAW,OAAA,EAAS;AACtB,MAAA,MAAM,KAAA,GAAQ,WAAW,OAAA,CAAQ,aAAA;AAAA,QAC/B;AAAA,OACF;AACA,MAAA,IAAI,KAAA,EAAO;AAIT,QAAA,KAAA,CAAM,YAAA,CAAa,mBAAmB,EAAE,CAAA;AACxC,QAAA,MAAM,UAAA,GAAa,KAAA,CAAM,YAAA,CAAa,IAAI,CAAA;AAC1C,QAAA,IAAI,UAAA,EAAY;AACd,UAAA,UAAA,CAAW,UAAU,CAAA;AAAA,QACvB,CAAA,MAAO;AACL,UAAA,MAAM,QAAQ,CAAA,iBAAA,EAAoB,WAAA,CAAY,UAAA,CAAW,GAAA,EAAK,EAAE,CAAC,CAAA,CAAA;AACjE,UAAA,KAAA,CAAM,YAAA,CAAa,MAAM,KAAK,CAAA;AAC9B,UAAA,UAAA,CAAW,KAAK,CAAA;AAAA,QAClB;AACA,QAAA,IAAI,MAAM,OAAA,KAAY,OAAA,IAAW,CAAC,KAAA,CAAM,YAAA,CAAa,aAAa,CAAA,EAAG;AACnE,UAAA,KAAA,CAAM,YAAA,CAAa,eAAe,GAAG,CAAA;AAAA,QACvC;AAAA,MACF;AAAA,IACF;AAAA,EACF,CAAA,EAAG,CAAC,WAAA,EAAa,QAAQ,CAAC,CAAA;AAG1B,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,UAAA;AAAA,MACL,SAAA,EAAW,EAAA;AAAA,QACT,4KAAA;AAAA;AAAA;AAAA;AAAA,QAIA,sOAAA;AAAA,QACA,iKAAA;AAAA,QACA,kFAAA;AAAA,QACA,0GAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,WAAA,EAAU,YAAA;AAAA,MACT,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,8bAAA;AAAA,YACV,WAAA,EAAU,iBAAA;AAAA,YACV,OAAA,EAAS,OAAA;AAAA,YAER,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,QACC;AAAA;AAAA;AAAA,GACH;AAEJ","file":"chunk-AD4RW2JV.js","sourcesContent":["import type { IftaLabelProps } from \"./IftaLabel.types\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\n\n/**\n * IftaLabel - A wrapper component with an always-visible label inside the input\n *\n * IFTA = \"In Field Top Aligned\" - the label is always visible at the top\n * of the input container, unlike FloatLabel which animates on focus.\n *\n * @example\n * ```tsx\n * <IftaLabel label=\"Email\">\n *   <TextInput value={email} onChange={(e) => setEmail(e.target.value)} />\n * </IftaLabel>\n * ```\n */\nfunction IftaLabel({\n  children,\n  label,\n  className,\n  ...props\n}: IftaLabelProps) {\n  const [inputId, setInputId] = React.useState<string | undefined>()\n  const generatedId = React.useId()\n  const wrapperRef = React.useRef<HTMLDivElement>(null)\n\n  // Find the wrapped form control and get its id.\n  // Covers native inputs/select/textarea AND button-based field shells\n  // (Select / DatePicker via the `*-trigger` data-slot, Combobox via its\n  // `combobox` data-slot), which have no descendant <input> to target.\n  // The button precedes its inner `*-trigger` span in document order, so\n  // querySelector returns the focusable button, not the span.\n  /* eslint-disable react-you-might-not-need-an-effect/no-adjust-state-on-prop-change, @eslint-react/hooks-extra/no-direct-set-state-in-use-effect -- DOM discovery for label-input association */\n  React.useEffect(() => {\n    if (wrapperRef.current) {\n      const input = wrapperRef.current.querySelector(\n        \"input, select, textarea, [data-slot$='-trigger'], [data-slot='combobox']\"\n      )\n      if (input) {\n        // Mark the discovered control so the label-space reservation below\n        // can target it regardless of element type (the [&_input] selector\n        // alone misses non-native controls like Select's trigger button).\n        input.setAttribute(\"data-ifta-field\", \"\")\n        const existingId = input.getAttribute(\"id\")\n        if (existingId) {\n          setInputId(existingId)\n        } else {\n          const newId = `ifta-label-input-${generatedId.replaceAll(':', \"\")}`\n          input.setAttribute(\"id\", newId)\n          setInputId(newId)\n        }\n        if (input.tagName === \"INPUT\" && !input.hasAttribute(\"placeholder\")) {\n          input.setAttribute(\"placeholder\", \" \")\n        }\n      }\n    }\n  }, [generatedId, children])\n  /* eslint-enable react-you-might-not-need-an-effect/no-adjust-state-on-prop-change, @eslint-react/hooks-extra/no-direct-set-state-in-use-effect */\n\n  return (\n    <div\n      ref={wrapperRef}\n      className={cn(\n        \"relative group [&_input]:pt-[var(--ifta-label-wrapper-padding-top)] [&_input]:pb-[var(--ifta-label-wrapper-padding-bottom)] [&_input]:h-[var(--ifta-label-wrapper-height)]\",\n        // Reserve label space on non-native controls (e.g. Select/Combobox\n        // button triggers) that have no descendant <input>. Uses min-height so\n        // the control's own height variant is respected, just floored to fit.\n        \"[&_[data-ifta-field]:not(input)]:pt-[var(--ifta-label-wrapper-padding-top)] [&_[data-ifta-field]:not(input)]:pb-[var(--ifta-label-wrapper-padding-bottom)] [&_[data-ifta-field]:not(input)]:min-h-[var(--ifta-label-wrapper-height)]\",\n        \"has-[input:disabled]:opacity-[var(--ifta-label-wrapper-disabled-opacity)] has-[[data-ifta-field]:disabled]:opacity-[var(--ifta-label-wrapper-disabled-opacity)]\",\n        \"has-[input:disabled]:pointer-events-none has-[input:disabled]:cursor-not-allowed\",\n        \"has-[[data-ifta-field]:disabled]:pointer-events-none has-[[data-ifta-field]:disabled]:cursor-not-allowed\",\n        className\n      )}\n      data-slot=\"ifta-label\"\n      {...props}\n    >\n      <label\n        className=\"pointer-events-none absolute left-3 top-1.5 text-xs font-normal text-[color:var(--ifta-label-label-color-muted)] group-focus-within:text-[color:var(--ifta-label-label-color-foreground)] group-has-[input:not(:placeholder-shown)]:text-[color:var(--ifta-label-label-color-foreground)] group-has-[[aria-invalid=true]]:text-[color:var(--ifta-label-label-color-destructive)] group-has-[input:disabled]:text-[color:var(--ifta-label-label-color-muted)]\"\n        data-slot=\"ifta-label-text\"\n        htmlFor={inputId}\n      >\n        {label}\n      </label>\n      {children}\n    </div>\n  )\n}\n\nexport { IftaLabel }\n"]}

package/dist/chunk-ADX6C3V7.js

@@ -0,0 +1,96 @@
+import { cn } from './chunk-RVAYDRMA.js';
+import { Slot } from '@radix-ui/react-slot';
+import { XCircleIcon, AlertTriangleIcon, CheckCircleIcon, InfoIcon } from 'lucide-react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var helpTextVariants = cva(
+  "flex items-center gap-1.5 font-normal transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "text-foreground",
+        muted: "text-muted-foreground",
+        info: "text-info",
+        success: "text-success",
+        warning: "text-warning",
+        error: "text-destructive"
+      },
+      size: {
+        sm: "text-xs leading-tight",
+        default: "text-sm leading-normal",
+        lg: "text-base leading-relaxed"
+      },
+      srOnly: {
+        true: "sr-only",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "muted",
+      size: "default",
+      srOnly: false
+    }
+  }
+);
+var helpTextIconVariants = cva("shrink-0", {
+  variants: {
+    size: {
+      sm: "size-3",
+      default: "size-4",
+      lg: "size-5"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+var variantIcons = {
+  default: null,
+  muted: null,
+  info: InfoIcon,
+  success: CheckCircleIcon,
+  warning: AlertTriangleIcon,
+  error: XCircleIcon
+};
+function HelpText({
+  className,
+  variant = "muted",
+  size = "default",
+  icon,
+  showIcon = false,
+  asChild = false,
+  srOnly = false,
+  children,
+  ...props
+}) {
+  const DefaultIcon = showIcon ? variantIcons[variant] : null;
+  const displayIcon = icon ?? (DefaultIcon ? /* @__PURE__ */ jsx(DefaultIcon, { className: cn(helpTextIconVariants({ size })) }) : null);
+  if (asChild) {
+    return /* @__PURE__ */ jsx(
+      Slot,
+      {
+        className: cn(helpTextVariants({ variant, size, srOnly }), className),
+        "data-slot": "help-text",
+        ...props,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(helpTextVariants({ variant, size, srOnly }), className),
+      "data-slot": "help-text",
+      ...props,
+      children: [
+        displayIcon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-slot": "help-text-icon", children: displayIcon }),
+        children
+      ]
+    }
+  );
+}
+
+export { HelpText, helpTextIconVariants, helpTextVariants };
+//# sourceMappingURL=chunk-ADX6C3V7.js.map
+//# sourceMappingURL=chunk-ADX6C3V7.js.map

package/dist/chunk-ADX6C3V7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/HelpText/HelpText.variants.ts","../src/components/forms/HelpText/HelpText.tsx"],"names":[],"mappings":";;;;;;AAKO,IAAM,gBAAA,GAAmB,GAAA;AAAA,EAC9B,yDAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,iBAAA;AAAA,QACT,KAAA,EAAO,uBAAA;AAAA,QACP,IAAA,EAAM,WAAA;AAAA,QACN,OAAA,EAAS,cAAA;AAAA,QACT,OAAA,EAAS,cAAA;AAAA,QACT,KAAA,EAAO;AAAA,OACT;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,uBAAA;AAAA,QACJ,OAAA,EAAS,wBAAA;AAAA,QACT,EAAA,EAAI;AAAA,OACN;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,IAAA,EAAM,SAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,OAAA;AAAA,MACT,IAAA,EAAM,SAAA;AAAA,MACN,MAAA,EAAQ;AAAA;AACV;AAEJ;AAKO,IAAM,oBAAA,GAAuB,IAAI,UAAA,EAAY;AAAA,EAClD,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,QAAA;AAAA,MACJ,OAAA,EAAS,QAAA;AAAA,MACT,EAAA,EAAI;AAAA;AACN,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM;AAAA;AAEV,CAAC;AC7BD,IAAM,YAAA,GAAe;AAAA,EACnB,OAAA,EAAS,IAAA;AAAA,EACT,KAAA,EAAO,IAAA;AAAA,EACP,IAAA,EAAM,QAAA;AAAA,EACN,OAAA,EAAS,eAAA;AAAA,EACT,OAAA,EAAS,iBAAA;AAAA,EACT,KAAA,EAAO;AACT,CAAA;AAsCA,SAAS,QAAA,CAAS;AAAA,EAChB,SAAA;AAAA,EACA,OAAA,GAAU,OAAA;AAAA,EACV,IAAA,GAAO,SAAA;AAAA,EACP,IAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,OAAA,GAAU,KAAA;AAAA,EACV,MAAA,GAAS,KAAA;AAAA,EACT,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAyD;AAEvD,EAAA,MAAM,WAAA,GAAc,QAAA,GAAW,YAAA,CAAa,OAAO,CAAA,GAAI,IAAA;AACvD,EAAA,MAAM,WAAA,GAAc,IAAA,KAAS,WAAA,mBAAc,GAAA,CAAC,WAAA,EAAA,EAAY,SAAA,EAAW,EAAA,CAAG,oBAAA,CAAqB,EAAE,IAAA,EAAM,CAAC,GAAG,CAAA,GAAK,IAAA,CAAA;AAG5G,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,uBACE,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,gBAAA,CAAiB,EAAE,SAAS,IAAA,EAAM,MAAA,EAAQ,CAAA,EAAG,SAAS,CAAA;AAAA,QACpE,WAAA,EAAU,WAAA;AAAA,QACT,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AAGA,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,GAAG,gBAAA,CAAiB,EAAE,SAAS,IAAA,EAAM,MAAA,EAAQ,CAAA,EAAG,SAAS,CAAA;AAAA,MACpE,WAAA,EAAU,WAAA;AAAA,MACT,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,WAAA,wBACE,MAAA,EAAA,EAAK,aAAA,EAAY,MAAA,EAAO,WAAA,EAAU,kBAChC,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,QAED;AAAA;AAAA;AAAA,GACH;AAEJ","file":"chunk-ADX6C3V7.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * HelpText variant styles using CVA\n */\nexport const helpTextVariants = cva(\n  \"flex items-center gap-1.5 font-normal transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"text-foreground\",\n        muted: \"text-muted-foreground\",\n        info: \"text-info\",\n        success: \"text-success\",\n        warning: \"text-warning\",\n        error: \"text-destructive\",\n      },\n      size: {\n        sm: \"text-xs leading-tight\",\n        default: \"text-sm leading-normal\",\n        lg: \"text-base leading-relaxed\",\n      },\n      srOnly: {\n        true: \"sr-only\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"muted\",\n      size: \"default\",\n      srOnly: false,\n    },\n  }\n)\n\n/**\n * HelpText icon variant styles\n */\nexport const helpTextIconVariants = cva(\"shrink-0\", {\n  variants: {\n    size: {\n      sm: \"size-3\",\n      default: \"size-4\",\n      lg: \"size-5\",\n    },\n  },\n  defaultVariants: {\n    size: \"default\",\n  },\n})\n\n// Export variant prop types\nexport type HelpTextVariantProps = VariantProps<typeof helpTextVariants>\nexport type HelpTextIconVariantProps = VariantProps<typeof helpTextIconVariants>\n","import type { HelpTextProps } from \"./HelpText.types\"\n\nimport { Slot } from \"@radix-ui/react-slot\"\nimport {\n  AlertTriangleIcon,\n  CheckCircleIcon,\n  InfoIcon,\n  XCircleIcon,\n} from \"lucide-react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  helpTextIconVariants,\n  type HelpTextVariantProps,\n  helpTextVariants,\n} from \"./HelpText.variants\"\n\n/**\n * Default icons for each variant\n */\nconst variantIcons = {\n  default: null,\n  muted: null,\n  info: InfoIcon,\n  success: CheckCircleIcon,\n  warning: AlertTriangleIcon,\n  error: XCircleIcon,\n}\n\n/**\n * HelpText displays contextual help or hint text for form fields.\n *\n * @example\n * ```tsx\n * <HelpText>Enter your email address</HelpText>\n * ```\n *\n * @example\n * ```tsx\n * // With icon\n * <HelpText icon={<InfoIcon />}>Password must be at least 8 characters</HelpText>\n * ```\n *\n * @example\n * ```tsx\n * // Different variants with showIcon\n * <HelpText variant=\"success\" showIcon>Email is available</HelpText>\n * <HelpText variant=\"warning\" showIcon>This action cannot be undone</HelpText>\n * <HelpText variant=\"error\" showIcon>Invalid format</HelpText>\n * ```\n *\n * @example\n * ```tsx\n * // With asChild\n * <HelpText asChild variant=\"info\">\n *   <span className=\"custom-class\">Custom element</span>\n * </HelpText>\n * ```\n *\n * @example\n * ```tsx\n * // Screen reader only\n * <HelpText srOnly>This is only visible to screen readers</HelpText>\n * ```\n */\nfunction HelpText({\n  className,\n  variant = \"muted\",\n  size = \"default\",\n  icon,\n  showIcon = false,\n  asChild = false,\n  srOnly = false,\n  children,\n  ...props\n}: HelpTextProps & Omit<HelpTextVariantProps, \"srOnly\">) {\n  // Determine icon to display\n  const DefaultIcon = showIcon ? variantIcons[variant] : null\n  const displayIcon = icon ?? (DefaultIcon ? <DefaultIcon className={cn(helpTextIconVariants({ size }))} /> : null)\n\n  // When asChild is true, pass only children to Slot (single child required)\n  if (asChild) {\n    return (\n      <Slot\n        className={cn(helpTextVariants({ variant, size, srOnly }), className)}\n        data-slot=\"help-text\"\n        {...props}\n      >\n        {children}\n      </Slot>\n    )\n  }\n\n  // Standard rendering with optional icon\n  return (\n    <span\n      className={cn(helpTextVariants({ variant, size, srOnly }), className)}\n      data-slot=\"help-text\"\n      {...props}\n    >\n      {displayIcon && (\n        <span aria-hidden=\"true\" data-slot=\"help-text-icon\">\n          {displayIcon}\n        </span>\n      )}\n      {children}\n    </span>\n  )\n}\n\nexport { HelpText }\n"]}

package/dist/chunk-AJUOTABG.js

@@ -0,0 +1,138 @@
+import { cn } from './chunk-RVAYDRMA.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var folderStackVariants = cva(
+  "relative flex-shrink-0 [&_[data-slot='folder-stack-tile']]:absolute [&_[data-slot='folder-stack-tile']]:bg-[color:var(--tint,theme(colors.neutral.200))] [&_[data-slot='folder-stack-tile']]:transition-colors",
+  {
+    variants: {
+      size: {
+        xs: "w-[var(--folder-stack-size-xs-width)] h-[var(--folder-stack-size-xs-height)] [&_[data-slot='folder-stack-tile']]:w-[var(--folder-stack-size-xs-tile-width)] [&_[data-slot='folder-stack-tile']]:h-[var(--folder-stack-size-xs-tile-height)] [&_[data-slot='folder-stack-tile']]:rounded-[var(--folder-stack-size-xs-tile-radius)] [&_[data-slot='folder-stack-tile']]:outline-[length:var(--folder-stack-size-xs-outline-width)]",
+        sm: "w-[var(--folder-stack-size-sm-width)] h-[var(--folder-stack-size-sm-height)] [&_[data-slot='folder-stack-tile']]:w-[var(--folder-stack-size-sm-tile-width)] [&_[data-slot='folder-stack-tile']]:h-[var(--folder-stack-size-sm-tile-height)] [&_[data-slot='folder-stack-tile']]:rounded-[var(--folder-stack-size-sm-tile-radius)] [&_[data-slot='folder-stack-tile']]:outline-[length:var(--folder-stack-size-sm-outline-width)]",
+        default: "w-[var(--folder-stack-size-default-width)] h-[var(--folder-stack-size-default-height)] [&_[data-slot='folder-stack-tile']]:w-[var(--folder-stack-size-default-tile-width)] [&_[data-slot='folder-stack-tile']]:h-[var(--folder-stack-size-default-tile-height)] [&_[data-slot='folder-stack-tile']]:rounded-[var(--folder-stack-size-default-tile-radius)] [&_[data-slot='folder-stack-tile']]:outline-[length:var(--folder-stack-size-default-outline-width)]",
+        lg: "w-[var(--folder-stack-size-lg-width)] h-[var(--folder-stack-size-lg-height)] [&_[data-slot='folder-stack-tile']]:w-[var(--folder-stack-size-lg-tile-width)] [&_[data-slot='folder-stack-tile']]:h-[var(--folder-stack-size-lg-tile-height)] [&_[data-slot='folder-stack-tile']]:rounded-[var(--folder-stack-size-lg-tile-radius)] [&_[data-slot='folder-stack-tile']]:outline-[length:var(--folder-stack-size-lg-outline-width)]",
+        xl: "w-[var(--folder-stack-size-xl-width)] h-[var(--folder-stack-size-xl-height)] [&_[data-slot='folder-stack-tile']]:w-[var(--folder-stack-size-xl-tile-width)] [&_[data-slot='folder-stack-tile']]:h-[var(--folder-stack-size-xl-tile-height)] [&_[data-slot='folder-stack-tile']]:rounded-[var(--folder-stack-size-xl-tile-radius)] [&_[data-slot='folder-stack-tile']]:outline-[length:var(--folder-stack-size-xl-outline-width)]"
+      },
+      interactive: {
+        true: "cursor-pointer transition-transform hover:scale-[1.02] focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[color:var(--ring)] motion-reduce:transition-none motion-reduce:hover:scale-100",
+        false: ""
+      },
+      active: {
+        true: "ring-[length:var(--folder-stack-interactive-active-ring-width)] ring-[color:var(--folder-stack-interactive-active-ring-color,var(--primary))] ring-offset-2 ring-offset-[color:var(--background)]",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      interactive: false,
+      active: false
+    }
+  }
+);
+var folderStackTilePositions = {
+  xs: [
+    { left: "1px", top: "0" },
+    { left: "11px", top: "0" },
+    { left: "1px", top: "10px" },
+    { left: "11px", top: "10px" }
+  ],
+  sm: [
+    { left: "1px", top: "0" },
+    { left: "15px", top: "0" },
+    { left: "1px", top: "13px" },
+    { left: "15px", top: "13px" }
+  ],
+  default: [
+    { left: "0", top: "0" },
+    { left: "18px", top: "0" },
+    { left: "0", top: "22px" },
+    { left: "18px", top: "22px" }
+  ],
+  lg: [
+    { left: "0", top: "0" },
+    { left: "28px", top: "0" },
+    { left: "0", top: "30px" },
+    { left: "28px", top: "30px" }
+  ],
+  xl: [
+    { left: "0", top: "0" },
+    { left: "36px", top: "0" },
+    { left: "0", top: "38px" },
+    { left: "36px", top: "38px" }
+  ]
+};
+function FolderStack({
+  tints,
+  size = "default",
+  interactive = false,
+  active = false,
+  className,
+  "aria-label": ariaLabel,
+  onClick,
+  ...props
+}) {
+  const sizeKey = size ?? "default";
+  const positions = folderStackTilePositions[sizeKey];
+  const slots = Array.from({ length: 4 }, (_, i) => tints[i] ?? null);
+  const handleClick = React.useCallback(
+    (event) => {
+      if (!interactive) return;
+      onClick?.(event, { tints, timestamp: Date.now() });
+    },
+    [interactive, onClick, tints]
+  );
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      if (!interactive) return;
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        onClick?.(
+          event,
+          { tints, timestamp: Date.now() }
+        );
+      }
+    },
+    [interactive, onClick, tints]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        folderStackVariants({ size, interactive, active }),
+        className
+      ),
+      "aria-label": ariaLabel,
+      "aria-pressed": interactive && active ? true : void 0,
+      "data-active": active || void 0,
+      "data-empty": slots.every((s) => s === null) || void 0,
+      "data-size": size,
+      "data-slot": "folder-stack",
+      role: interactive ? "button" : "img",
+      tabIndex: interactive ? 0 : void 0,
+      onClick: interactive ? handleClick : void 0,
+      onKeyDown: interactive ? handleKeyDown : void 0,
+      ...props,
+      children: slots.map((tint, i) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            ...positions[i],
+            "--tint": tint ?? "var(--folder-stack-empty-bg, var(--muted))"
+          },
+          "aria-hidden": "true",
+          className: "outline outline-[color:var(--folder-stack-outline-color,var(--background))]",
+          "data-empty": tint === null || void 0,
+          "data-position": i,
+          "data-slot": "folder-stack-tile"
+        },
+        `folder-stack-tile-${String(i)}`
+      ))
+    }
+  );
+}
+FolderStack.displayName = "FolderStack";
+
+export { FolderStack, folderStackVariants };
+//# sourceMappingURL=chunk-AJUOTABG.js.map
+//# sourceMappingURL=chunk-AJUOTABG.js.map