@mdigital_ui/ui 0.2.6 → 0.2.7

package/dist/{chunk-HWSLJGT7.js → chunk-Q57THXIU.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-2OGZENFC.js';
+import { cn } from './chunk-NGYLRX6F.js';
 import { cva } from 'class-variance-authority';
 import { ChevronRight, Check, Minus } from 'lucide-react';
 import React from 'react';
@@ -55,7 +55,8 @@ var Tree = React.memo(
     showLine = false,
     showIcon = true,
     defaultExpandAll = false,
-    className
+    className,
+    classNames
   }) => {
     const [internalExpandedKeys, setInternalExpandedKeys] = React.useState(defaultExpandAll ? getAllKeys(data) : defaultExpandedKeys);
     const [internalCheckedKeys, setInternalCheckedKeys] = React.useState(defaultCheckedKeys);
@@ -217,17 +218,23 @@ var Tree = React.memo(
         return /* @__PURE__ */ jsx(
           "div",
           {
-            className: "relative animate-in fade-in slide-in-from-top-1 duration-200",
+            className: cn(
+              "tree_node",
+              "relative animate-in fade-in slide-in-from-top-1 duration-200",
+              classNames?.node
+            ),
             children: /* @__PURE__ */ jsxs(
               "div",
               {
                 className: cn(
+                  "tree_nodeContent",
                   treeItemVariants({
                     size,
                     disabled: !!node.disabled,
                     selected: isSelected
                   }),
-                  className
+                  className,
+                  classNames?.nodeContent
                 ),
                 children: [
                   Array.from({ length: level }).map((_, i) => {
@@ -249,7 +256,11 @@ var Tree = React.memo(
                         e.stopPropagation();
                         handleExpand(node.key);
                       },
-                      className: "shrink-0 hover:text-primary transition-colors duration-200",
+                      className: cn(
+                        "tree_expandIcon",
+                        "shrink-0 hover:text-primary transition-colors duration-200",
+                        classNames?.expandIcon
+                      ),
                       disabled: disabled || node.disabled,
                       children: /* @__PURE__ */ jsx(
                         ChevronRight,
@@ -281,12 +292,18 @@ var Tree = React.memo(
                       ]
                     }
                   ),
-                  showIcon && node.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: node.icon }),
+                  showIcon && node.icon && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn("tree_icon", "shrink-0", classNames?.icon),
+                      children: node.icon
+                    }
+                  ),
                   /* @__PURE__ */ jsx(
                     "span",
                     {
                       onClick: () => handleSelect(node),
-                      className: "flex-1 truncate",
+                      className: cn("tree_label", "flex-1 truncate", classNames?.label),
                       children: node.label
                     }
                   )
@@ -304,6 +321,7 @@ var Tree = React.memo(
         getCheckState,
         size,
         className,
+        classNames,
         disabled,
         handleExpand,
         handleCheck,
@@ -313,12 +331,12 @@ var Tree = React.memo(
         flatNodes
       ]
     );
-    return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), children: flatNodes.map((item, index) => renderNode(item, index)) });
+    return /* @__PURE__ */ jsx("div", { className: cn("tree_root", "w-full", className, classNames?.root), children: flatNodes.map((item, index) => renderNode(item, index)) });
   }
 );
 Tree.displayName = "Tree";
 var tree_default = Tree;
 
 export { tree_default };
-//# sourceMappingURL=chunk-HWSLJGT7.js.map
-//# sourceMappingURL=chunk-HWSLJGT7.js.map
+//# sourceMappingURL=chunk-Q57THXIU.js.map
+//# sourceMappingURL=chunk-Q57THXIU.js.map

package/dist/chunk-Q57THXIU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tree/index.tsx"],"names":[],"mappings":"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","file":"chunk-Q57THXIU.js","sourcesContent":["'use client'\n\nimport { cva } from 'class-variance-authority'\nimport { Check, ChevronRight, Minus } from 'lucide-react'\nimport React from 'react'\n\nimport { cn } from '../utils'\nimport type { TreeNode, TreeProps } from './types'\n\nconst treeItemVariants = cva(\n  'flex items-center gap-2 px-2 rounded cursor-pointer select-none transition-all duration-200 ease-out',\n  {\n    variants: {\n      size: {\n        xs: 'text-xs',\n        sm: 'text-sm',\n        md: 'text-base',\n        lg: 'text-lg',\n      },\n      disabled: {\n        true: 'opacity-50 cursor-not-allowed',\n        false: 'hover:bg-surface',\n      },\n      selected: {\n        true: 'bg-primary/10 text-primary',\n        false: 'text-text-primary',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      disabled: false,\n      selected: false,\n    },\n  },\n)\n\nconst iconSizes = {\n  xs: 'h-3 w-3',\n  sm: 'h-3.5 w-3.5',\n  md: 'h-4 w-4',\n  lg: 'h-5 w-5',\n}\n\nconst Tree = React.memo<TreeProps>(\n  ({\n    data,\n    defaultExpandedKeys = [],\n    expandedKeys,\n    onExpand,\n    checkable = false,\n    checkedKeys,\n    defaultCheckedKeys = [],\n    onCheck,\n    selectable = true,\n    selectedKeys,\n    defaultSelectedKeys = [],\n    onSelect,\n    disabled = false,\n    size = 'md',\n    showLine = false,\n    showIcon = true,\n    defaultExpandAll = false,\n    className,\n    classNames,\n  }) => {\n    const [internalExpandedKeys, setInternalExpandedKeys] = React.useState<\n      string[]\n    >(defaultExpandAll ? getAllKeys(data) : defaultExpandedKeys)\n    const [internalCheckedKeys, setInternalCheckedKeys] =\n      React.useState<string[]>(defaultCheckedKeys)\n    const [internalSelectedKeys, setInternalSelectedKeys] =\n      React.useState<string[]>(defaultSelectedKeys)\n\n    const currentExpandedKeys =\n      expandedKeys !== undefined ? expandedKeys : internalExpandedKeys\n    const currentCheckedKeys =\n      checkedKeys !== undefined ? checkedKeys : internalCheckedKeys\n    const currentSelectedKeys =\n      selectedKeys !== undefined ? selectedKeys : internalSelectedKeys\n\n    function getAllKeys(nodes: TreeNode[]): string[] {\n      const keys: string[] = []\n      const traverse = (items: TreeNode[]) => {\n        items.forEach((item) => {\n          keys.push(item.key)\n          if (item.children) {\n            traverse(item.children)\n          }\n        })\n      }\n      traverse(nodes)\n      return keys\n    }\n\n    const getAllLeafKeys = React.useCallback((node: TreeNode): string[] => {\n      const keys: string[] = []\n\n      const traverse = (n: TreeNode) => {\n        if (!n.children || n.children.length === 0 || n.isLeaf) {\n          keys.push(n.key)\n        } else {\n          n.children.forEach((child) => traverse(child))\n        }\n      }\n\n      traverse(node)\n      return keys\n    }, [])\n\n    const getNodeByKey = React.useCallback(\n      (key: string): TreeNode | null => {\n        const traverse = (nodes: TreeNode[]): TreeNode | null => {\n          for (const node of nodes) {\n            if (node.key === key) return node\n            if (node.children) {\n              const found = traverse(node.children)\n              if (found) return found\n            }\n          }\n          return null\n        }\n        return traverse(data)\n      },\n      [data],\n    )\n\n    const getCheckedNodes = React.useCallback(\n      (keys: string[]): TreeNode[] => {\n        return keys\n          .map((key) => getNodeByKey(key))\n          .filter((node): node is TreeNode => node !== null)\n      },\n      [getNodeByKey],\n    )\n\n    const getCheckState = React.useCallback(\n      (node: TreeNode): { checked: boolean; indeterminate: boolean } => {\n        if (!node.children || node.children.length === 0 || node.isLeaf) {\n          return {\n            checked: currentCheckedKeys.includes(node.key),\n            indeterminate: false,\n          }\n        }\n\n        const leafKeys = getAllLeafKeys(node)\n        const checkedCount = leafKeys.filter((key) =>\n          currentCheckedKeys.includes(key),\n        ).length\n\n        return {\n          checked: checkedCount === leafKeys.length && leafKeys.length > 0,\n          indeterminate: checkedCount > 0 && checkedCount < leafKeys.length,\n        }\n      },\n      [currentCheckedKeys, getAllLeafKeys],\n    )\n\n    const handleExpand = React.useCallback(\n      (key: string) => {\n        const newExpandedKeys = currentExpandedKeys.includes(key)\n          ? currentExpandedKeys.filter((k) => k !== key)\n          : [...currentExpandedKeys, key]\n\n        if (expandedKeys === undefined) {\n          setInternalExpandedKeys(newExpandedKeys)\n        }\n        onExpand?.(newExpandedKeys)\n      },\n      [currentExpandedKeys, expandedKeys, onExpand],\n    )\n\n    const handleCheck = React.useCallback(\n      (node: TreeNode, checked: boolean) => {\n        if (disabled || node.disabled) return\n\n        const leafKeys = getAllLeafKeys(node)\n        let newCheckedKeys: string[]\n\n        if (checked) {\n          // Add all leaf keys that aren't already checked\n          const keysToAdd = leafKeys.filter(\n            (key) => !currentCheckedKeys.includes(key),\n          )\n          newCheckedKeys = [...currentCheckedKeys, ...keysToAdd]\n        } else {\n          // Remove all leaf keys\n          newCheckedKeys = currentCheckedKeys.filter(\n            (key) => !leafKeys.includes(key),\n          )\n        }\n\n        if (checkedKeys === undefined) {\n          setInternalCheckedKeys(newCheckedKeys)\n        }\n\n        const checkedNodes = getCheckedNodes(newCheckedKeys)\n        onCheck?.(newCheckedKeys, {\n          checked,\n          node,\n          checkedNodes,\n        })\n      },\n      [\n        disabled,\n        getAllLeafKeys,\n        currentCheckedKeys,\n        checkedKeys,\n        onCheck,\n        getCheckedNodes,\n      ],\n    )\n\n    const handleSelect = React.useCallback(\n      (node: TreeNode) => {\n        if (disabled || node.disabled || !selectable) return\n\n        const isSelected = currentSelectedKeys.includes(node.key)\n        const newSelectedKeys = isSelected\n          ? currentSelectedKeys.filter((k) => k !== node.key)\n          : [...currentSelectedKeys, node.key]\n\n        if (selectedKeys === undefined) {\n          setInternalSelectedKeys(newSelectedKeys)\n        }\n\n        onSelect?.(newSelectedKeys, {\n          selected: !isSelected,\n          node,\n        })\n      },\n      [disabled, selectable, currentSelectedKeys, selectedKeys, onSelect],\n    )\n\n    const flattenTree = React.useCallback(\n      (\n        nodes: TreeNode[],\n        level: number = 0,\n      ): Array<{ node: TreeNode; level: number }> => {\n        const result: Array<{ node: TreeNode; level: number }> = []\n\n        nodes.forEach((node) => {\n          result.push({ node, level })\n\n          const hasChildren =\n            node.children && node.children.length > 0 && !node.isLeaf\n          const isExpanded = currentExpandedKeys.includes(node.key)\n\n          if (hasChildren && isExpanded) {\n            result.push(...flattenTree(node.children!, level + 1))\n          }\n        })\n\n        return result\n      },\n      [currentExpandedKeys],\n    )\n\n    const flatNodes = React.useMemo(\n      () => flattenTree(data),\n      [data, flattenTree],\n    )\n\n    const renderNode = React.useCallback(\n      (\n        item: { node: TreeNode; level: number },\n        index: number,\n      ): React.ReactNode => {\n        const { node, level } = item\n        const hasChildren =\n          node.children && node.children.length > 0 && !node.isLeaf\n        const isExpanded = currentExpandedKeys.includes(node.key)\n        const isSelected = currentSelectedKeys.includes(node.key)\n        const checkState = checkable ? getCheckState(node) : null\n\n        return (\n          <div\n            key={node.key}\n            className={cn(\n              'tree_node',\n              'relative animate-in fade-in slide-in-from-top-1 duration-200',\n              classNames?.node,\n            )}\n          >\n            <div\n              className={cn(\n                'tree_nodeContent',\n                treeItemVariants({\n                  size,\n                  disabled: !!node.disabled,\n                  selected: isSelected,\n                }),\n                className,\n                classNames?.nodeContent,\n              )}\n            >\n              {/* Indentation units with vertical lines */}\n              {Array.from({ length: level }).map((_, i) => {\n                // Check if this indent level should have a vertical line\n                const shouldDrawLine =\n                  showLine &&\n                  flatNodes.slice(index + 1).some((n) => n.level === i)\n\n                return (\n                  <span\n                    key={i}\n                    className=\"relative inline-block w-4 h-6 shrink-0\"\n                  >\n                    {/* Vertical line connecting siblings */}\n                    {shouldDrawLine && (\n                      <span className=\"absolute top-0 left-1/2 bottom-0 h-full border-l border-border -translate-x-px\" />\n                    )}\n                  </span>\n                )\n              })}\n\n              {/* Expand/Collapse Icon */}\n              {hasChildren ? (\n                <button\n                  type=\"button\"\n                  onClick={(e) => {\n                    e.stopPropagation()\n                    handleExpand(node.key)\n                  }}\n                  className={cn(\n                    'tree_expandIcon',\n                    'shrink-0 hover:text-primary transition-colors duration-200',\n                    classNames?.expandIcon,\n                  )}\n                  disabled={disabled || node.disabled}\n                >\n                  <ChevronRight\n                    className={cn(\n                      iconSizes[size],\n                      'transition-transform duration-300 ease-out',\n                      isExpanded && 'rotate-90',\n                    )}\n                  />\n                </button>\n              ) : (\n                <span className={cn('shrink-0', iconSizes[size])} />\n              )}\n\n              {/* Checkbox */}\n              {checkable && (\n                <div\n                  onClick={(e) => {\n                    e.stopPropagation()\n                    handleCheck(node, !checkState?.checked)\n                  }}\n                  className={cn(\n                    'w-4 h-4 border rounded flex items-center justify-center shrink-0 cursor-pointer transition-all duration-200',\n                    checkState?.checked\n                      ? 'bg-primary border-primary'\n                      : 'border-border',\n                    (disabled || node.disabled) &&\n                      'opacity-50 cursor-not-allowed',\n                  )}\n                >\n                  {checkState?.checked && (\n                    <Check className=\"h-3 w-3 text-background animate-in zoom-in-50 duration-200\" />\n                  )}\n                  {checkState?.indeterminate && !checkState?.checked && (\n                    <Minus className=\"h-3 w-3 text-primary animate-in zoom-in-50 duration-200\" />\n                  )}\n                </div>\n              )}\n\n              {/* Icon */}\n              {showIcon && node.icon && (\n                <span\n                  className={cn('tree_icon', 'shrink-0', classNames?.icon)}\n                >\n                  {node.icon}\n                </span>\n              )}\n\n              {/* Label */}\n              <span\n                onClick={() => handleSelect(node)}\n                className={cn('tree_label', 'flex-1 truncate', classNames?.label)}\n              >\n                {node.label}\n              </span>\n            </div>\n          </div>\n        )\n      },\n      [\n        currentExpandedKeys,\n        currentSelectedKeys,\n        checkable,\n        getCheckState,\n        size,\n        className,\n        classNames,\n        disabled,\n        handleExpand,\n        handleCheck,\n        handleSelect,\n        showIcon,\n        showLine,\n        flatNodes,\n      ],\n    )\n\n    return (\n      <div className={cn('tree_root', 'w-full', className, classNames?.root)}>\n        {flatNodes.map((item, index) => renderNode(item, index))}\n      </div>\n    )\n  },\n)\n\nTree.displayName = 'Tree'\n\nexport type * from './types'\nexport default Tree\n"]}

package/dist/{chunk-NQB4V5P7.js → chunk-QDHGE7IF.js}

@@ -1,5 +1,5 @@
-import { textColorClasses } from './chunk-TUTOU4X6.js';
-import { cn } from './chunk-2OGZENFC.js';
+import { textColorClasses } from './chunk-NTPWR57C.js';
+import { cn } from './chunk-NGYLRX6F.js';
 import { cva } from 'class-variance-authority';
 import React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -24,7 +24,7 @@ var spinnerVariants = cva(
 );
 var Spinner = React.memo(
   ({ size = "sm", color = "primary", label, className }) => {
-    return /* @__PURE__ */ jsxs("div", { className: cn("inline-flex flex-col items-center gap-2", className), children: [
+    return /* @__PURE__ */ jsxs("div", { "data-slot": "root", className: cn("spinner_root", "inline-flex flex-col items-center gap-2", className), children: [
       /* @__PURE__ */ jsx(
         "div",
         {
@@ -41,5 +41,5 @@ Spinner.displayName = "Spinner";
 var spinner_default = Spinner;
 
 export { Spinner, spinner_default };
-//# sourceMappingURL=chunk-NQB4V5P7.js.map
-//# sourceMappingURL=chunk-NQB4V5P7.js.map
+//# sourceMappingURL=chunk-QDHGE7IF.js.map
+//# sourceMappingURL=chunk-QDHGE7IF.js.map

package/dist/chunk-QDHGE7IF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/spinner/index.tsx"],"names":[],"mappings":";;;;;;AAOA,IAAM,eAAA,GAAkB,GAAA;AAAA,EACtB,mFAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,gBAAA;AAAA,QACJ,EAAA,EAAI,gBAAA;AAAA,QACJ,EAAA,EAAI,kBAAA;AAAA,QACJ,EAAA,EAAI;AAAA,OACN;AAAA,MACA,KAAA,EAAO;AAAA,KACT;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM,IAAA;AAAA,MACN,KAAA,EAAO;AAAA;AACT;AAEJ,CAAA;AAEO,IAAM,UAAU,KAAA,CAAM,IAAA;AAAA,EAC3B,CAAC,EAAE,IAAA,GAAO,IAAA,EAAM,QAAQ,SAAA,EAAW,KAAA,EAAO,WAAU,KAAM;AACxD,IAAA,uBACE,IAAA,CAAC,SAAI,WAAA,EAAU,MAAA,EAAO,WAAW,EAAA,CAAG,cAAA,EAAgB,yCAAA,EAA2C,SAAS,CAAA,EACtG,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,eAAA,CAAgB,EAAE,IAAA,EAAM,OAAO,CAAA;AAAA,UAC1C,IAAA,EAAK,QAAA;AAAA,UACL,cAAY,KAAA,IAAS;AAAA;AAAA,OACvB;AAAA,MACC,KAAA,oBAAS,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,+BAA+B,QAAA,EAAA,KAAA,EAAM;AAAA,KAAA,EACjE,CAAA;AAAA,EAEJ;AACF;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA;AAGtB,IAAO,eAAA,GAAQ","file":"chunk-QDHGE7IF.js","sourcesContent":["import { cva } from 'class-variance-authority'\nimport React from 'react'\n\nimport { cn } from '../utils'\nimport { textColorClasses } from '../variants'\nimport type { SpinnerProps } from './types'\n\nconst spinnerVariants = cva(\n  'inline-block border border-current border-t-transparent rounded-full animate-spin',\n  {\n    variants: {\n      size: {\n        xs: 'w-3 h-3 border',\n        sm: 'w-4 h-4 border',\n        md: 'w-6 h-6 border-2',\n        lg: 'w-8 h-8 border-2',\n      },\n      color: textColorClasses,\n    },\n    defaultVariants: {\n      size: 'sm',\n      color: 'primary',\n    },\n  },\n)\n\nexport const Spinner = React.memo<SpinnerProps>(\n  ({ size = 'sm', color = 'primary', label, className }) => {\n    return (\n      <div data-slot=\"root\" className={cn('spinner_root', 'inline-flex flex-col items-center gap-2', className)}>\n        <div\n          className={spinnerVariants({ size, color })}\n          role=\"status\"\n          aria-label={label || 'Loading'}\n        />\n        {label && <span className=\"text-sm text-text-secondary\">{label}</span>}\n      </div>\n    )\n  },\n)\n\nSpinner.displayName = 'Spinner'\n\nexport type * from './types'\nexport default Spinner\n"]}

package/dist/{chunk-CPPFXCNB.js → chunk-QKSDVYKF.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-2OGZENFC.js';
+import { cn } from './chunk-NGYLRX6F.js';
 import { cva } from 'class-variance-authority';
 import React from 'react';
 import { jsx } from 'react/jsx-runtime';
@@ -27,12 +27,12 @@ var gridVariants = cva("w-full grid", {
 });
 var Grid = React.memo(
   ({ children, columns = 3, gap = "md", className }) => {
-    return /* @__PURE__ */ jsx("div", { className: cn(gridVariants({ gap, columns }), className), children });
+    return /* @__PURE__ */ jsx("div", { "data-slot": "root", className: cn("grid_root", gridVariants({ gap, columns }), className), children });
   }
 );
 Grid.displayName = "Grid";
 var grid_default = Grid;
 
 export { grid_default };
-//# sourceMappingURL=chunk-CPPFXCNB.js.map
-//# sourceMappingURL=chunk-CPPFXCNB.js.map
+//# sourceMappingURL=chunk-QKSDVYKF.js.map
+//# sourceMappingURL=chunk-QKSDVYKF.js.map

package/dist/chunk-QKSDVYKF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/grid/index.tsx"],"names":[],"mappings":";;;;;AAMA,IAAM,YAAA,GAAe,IAAI,aAAA,EAAe;AAAA,EACtC,QAAA,EAAU;AAAA,IACR,GAAA,EAAK;AAAA,MACH,EAAA,EAAI,OAAA;AAAA,MACJ,EAAA,EAAI,OAAA;AAAA,MACJ,EAAA,EAAI,OAAA;AAAA,MACJ,EAAA,EAAI;AAAA,KACN;AAAA,IACA,OAAA,EAAS;AAAA,MACP,CAAA,EAAG,aAAA;AAAA,MACH,CAAA,EAAG,4BAAA;AAAA,MACH,CAAA,EAAG,2CAAA;AAAA,MACH,CAAA,EAAG,2CAAA;AAAA,MACH,CAAA,EAAG,2CAAA;AAAA,MACH,CAAA,EAAG;AAAA;AACL,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,GAAA,EAAK,IAAA;AAAA,IACL,OAAA,EAAS;AAAA;AAEb,CAAC,CAAA;AAED,IAAM,OAAO,KAAA,CAAM,IAAA;AAAA,EACjB,CAAC,EAAE,QAAA,EAAU,OAAA,GAAU,GAAG,GAAA,GAAM,IAAA,EAAM,WAAU,KAAM;AACpD,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,MAAA,EAAO,WAAW,EAAA,CAAG,WAAA,EAAa,YAAA,CAAa,EAAE,KAAK,OAAA,EAAS,CAAA,EAAG,SAAS,GACvF,QAAA,EACH,CAAA;AAAA,EAEJ;AACF,CAAA;AAEA,IAAA,CAAK,WAAA,GAAc,MAAA;AAGnB,IAAO,YAAA,GAAQ","file":"chunk-QKSDVYKF.js","sourcesContent":["import { cva } from 'class-variance-authority'\nimport React from 'react'\n\nimport { cn } from '../utils'\nimport type { GridProps } from './types'\n\nconst gridVariants = cva('w-full grid', {\n  variants: {\n    gap: {\n      xs: 'gap-2',\n      sm: 'gap-4',\n      md: 'gap-6',\n      lg: 'gap-8',\n    },\n    columns: {\n      1: 'grid-cols-1',\n      2: 'grid-cols-1 md:grid-cols-2',\n      3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',\n      4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',\n      5: 'grid-cols-1 md:grid-cols-3 lg:grid-cols-5',\n      6: 'grid-cols-1 md:grid-cols-3 lg:grid-cols-6',\n    },\n  },\n  defaultVariants: {\n    gap: 'md',\n    columns: 3,\n  },\n})\n\nconst Grid = React.memo<GridProps>(\n  ({ children, columns = 3, gap = 'md', className }) => {\n    return (\n      <div data-slot=\"root\" className={cn('grid_root', gridVariants({ gap, columns }), className)}>\n        {children}\n      </div>\n    )\n  },\n)\n\nGrid.displayName = 'Grid'\n\nexport type * from './types'\nexport default Grid\n"]}

package/dist/{chunk-DP6AWUH5.js → chunk-ROA7BYGB.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-2OGZENFC.js';
+import { cn } from './chunk-NGYLRX6F.js';
 import { cva } from 'class-variance-authority';
 import React, { memo } from 'react';
 import { jsx } from 'react/jsx-runtime';
@@ -52,28 +52,46 @@ var inputGroupAddonVariants = cva(
   }
 );
 var InputGroup = memo(
-  ({ children, size = "md", className }) => {
-    return /* @__PURE__ */ jsx("div", { className: cn(inputGroupVariants({ size }), className), children: React.Children.map(children, (child) => {
-      if (React.isValidElement(child)) {
-        const displayName = child.type?.displayName;
-        if (displayName === "InputGroupInput" || displayName === "InputGroupAddon") {
-          return React.cloneElement(
-            child,
-            { size }
-          );
-        }
+  ({ children, size = "md", className, classNames }) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "inputGroup_root",
+        className: cn(
+          "inputGroup_root",
+          inputGroupVariants({ size }),
+          classNames?.root,
+          className
+        ),
+        children: React.Children.map(children, (child) => {
+          if (React.isValidElement(child)) {
+            const displayName = child.type?.displayName;
+            if (displayName === "InputGroupInput" || displayName === "InputGroupAddon") {
+              return React.cloneElement(
+                child,
+                { size, classNames }
+              );
+            }
+          }
+          return child;
+        })
       }
-      return child;
-    }) });
+    );
   }
 );
 InputGroup.displayName = "InputGroup";
 var InputGroupInput = memo(
-  ({ className, size = "md", ...props }) => {
+  ({ className, size = "md", classNames, ...props }) => {
     return /* @__PURE__ */ jsx(
       "input",
       {
-        className: cn(inputGroupInputVariants({ size }), className),
+        "data-slot": "inputGroup_input",
+        className: cn(
+          "inputGroup_input",
+          inputGroupInputVariants({ size }),
+          classNames?.input,
+          className
+        ),
         ...props
       }
     );
@@ -81,13 +99,25 @@ var InputGroupInput = memo(
 );
 InputGroupInput.displayName = "InputGroupInput";
 var InputGroupAddon = memo(
-  ({ children, size = "md", className }) => {
-    return /* @__PURE__ */ jsx("div", { className: cn(inputGroupAddonVariants({ size }), className), children });
+  ({ children, size = "md", className, classNames }) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "inputGroup_addon",
+        className: cn(
+          "inputGroup_addon",
+          inputGroupAddonVariants({ size }),
+          classNames?.addon,
+          className
+        ),
+        children
+      }
+    );
   }
 );
 InputGroupAddon.displayName = "InputGroupAddon";
 var input_group_default = InputGroup;
 
 export { InputGroupAddon, InputGroupInput, input_group_default };
-//# sourceMappingURL=chunk-DP6AWUH5.js.map
-//# sourceMappingURL=chunk-DP6AWUH5.js.map
+//# sourceMappingURL=chunk-ROA7BYGB.js.map
+//# sourceMappingURL=chunk-ROA7BYGB.js.map

package/dist/chunk-ROA7BYGB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/input-group/index.tsx"],"names":[],"mappings":"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","file":"chunk-ROA7BYGB.js","sourcesContent":["import { cva } from \"class-variance-authority\";\nimport React, { memo } from \"react\";\n\nimport { cn } from \"../utils\";\nimport type {\n  InputGroupAddonProps,\n  InputGroupClassNames,\n  InputGroupInputProps,\n  InputGroupProps,\n  InputGroupSize,\n} from \"./types\";\n\nconst inputGroupVariants = cva(\n  \"relative flex items-center w-full bg-background border border-border rounded-md transition-colors focus-within:border-primary\",\n  {\n    variants: {\n      size: {\n        xs: \"h-(--input-height-xs)\",\n        sm: \"h-(--input-height-sm)\",\n        md: \"h-(--input-height-md)\",\n        lg: \"h-(--input-height-lg)\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  },\n);\n\nconst inputGroupInputVariants = cva(\n  \"flex-1 w-full h-full bg-transparent outline-none text-text-primary placeholder:text-text-secondary/50 disabled:opacity-50 disabled:cursor-not-allowed read-only:cursor-default\",\n  {\n    variants: {\n      size: {\n        xs: \"px-(--input-padding-x-xs) text-xs\",\n        sm: \"px-(--input-padding-x-sm) text-sm\",\n        md: \"px-(--input-padding-x-md) text-base\",\n        lg: \"px-(--input-padding-x-lg) text-lg\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  },\n);\n\nconst inputGroupAddonVariants = cva(\n  \"flex items-center gap-2 text-text-secondary shrink-0\",\n  {\n    variants: {\n      size: {\n        xs: \"last:pr-2 pl-2 text-xs\",\n        sm: \"last:pr-2.5 pl-2.5 text-sm\",\n        md: \"last:pr-3 pl-3 text-base\",\n        lg: \"last:pr-4 pl-4 text-lg\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  },\n);\n\nconst InputGroup = memo<InputGroupProps>(\n  ({ children, size = \"md\", className, classNames }) => {\n    return (\n      <div\n        data-slot=\"inputGroup_root\"\n        className={cn(\n          \"inputGroup_root\",\n          inputGroupVariants({ size }),\n          classNames?.root,\n          className,\n        )}\n      >\n        {React.Children.map(children, (child) => {\n          if (React.isValidElement(child)) {\n            const displayName = (child.type as { displayName?: string })\n              ?.displayName;\n            if (\n              displayName === \"InputGroupInput\" ||\n              displayName === \"InputGroupAddon\"\n            ) {\n              return React.cloneElement(\n                child as React.ReactElement<{\n                  size?: InputGroupSize;\n                  classNames?: InputGroupClassNames;\n                }>,\n                { size, classNames },\n              );\n            }\n          }\n          return child;\n        })}\n      </div>\n    );\n  },\n);\n\nInputGroup.displayName = \"InputGroup\";\n\nexport const InputGroupInput = memo<InputGroupInputProps>(\n  ({ className, size = \"md\", classNames, ...props }) => {\n    return (\n      <input\n        data-slot=\"inputGroup_input\"\n        className={cn(\n          \"inputGroup_input\",\n          inputGroupInputVariants({ size }),\n          classNames?.input,\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\n\nInputGroupInput.displayName = \"InputGroupInput\";\n\nexport const InputGroupAddon = memo<InputGroupAddonProps>(\n  ({ children, size = \"md\", className, classNames }) => {\n    return (\n      <div\n        data-slot=\"inputGroup_addon\"\n        className={cn(\n          \"inputGroup_addon\",\n          inputGroupAddonVariants({ size }),\n          classNames?.addon,\n          className,\n        )}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nInputGroupAddon.displayName = \"InputGroupAddon\";\n\nexport type { InputGroupClassNames } from \"./types\";\nexport type * from \"./types\";\nexport default InputGroup;\n"]}

package/dist/{chunk-XG3KLPPS.js → chunk-RPIJ2KY7.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-2OGZENFC.js';
+import { cn } from './chunk-NGYLRX6F.js';
 import { cva } from 'class-variance-authority';
 import React, { useState } from 'react';
 import { jsxs } from 'react/jsx-runtime';
@@ -86,7 +86,9 @@ var Toggle = React.memo(
     disabled = false,
     icon,
     children,
-    className
+    "aria-label": ariaLabel,
+    className,
+    classNames
   }) => {
     const [internalPressed, setInternalPressed] = useState(defaultPressed);
     const pressed = controlledPressed !== void 0 ? controlledPressed : internalPressed;
@@ -103,15 +105,18 @@ var Toggle = React.memo(
       {
         type: "button",
         className: cn(
+          "toggle_root",
           singleToggleVariants({ size }),
           getSingleToggleClasses(color, variant, pressed),
           "border",
           disabled && "opacity-50 cursor-not-allowed",
+          classNames?.root,
           className
         ),
         onClick: handleClick,
         disabled,
         "aria-pressed": pressed,
+        "aria-label": ariaLabel,
         children: [
           icon,
           children
@@ -124,5 +129,5 @@ Toggle.displayName = "Toggle";
 var toggle_default = Toggle;
 
 export { toggle_default };
-//# sourceMappingURL=chunk-XG3KLPPS.js.map
-//# sourceMappingURL=chunk-XG3KLPPS.js.map
+//# sourceMappingURL=chunk-RPIJ2KY7.js.map
+//# sourceMappingURL=chunk-RPIJ2KY7.js.map

package/dist/chunk-RPIJ2KY7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/toggle/index.tsx"],"names":[],"mappings":"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","file":"chunk-RPIJ2KY7.js","sourcesContent":["'use client'\n\nimport { cva } from 'class-variance-authority'\nimport React, { useState } from 'react'\n\nimport { cn } from '../utils'\nimport type { SingleToggleProps } from './types'\n\n// Inactive hover states for each color\nconst inactiveHoverClasses = {\n  default: 'text-text-secondary hover:text-text-primary hover:bg-surface',\n  primary: 'text-text-secondary hover:text-primary hover:bg-primary/10',\n  secondary: 'text-text-secondary hover:text-secondary hover:bg-secondary/10',\n  accent: 'text-text-secondary hover:text-accent hover:bg-accent/10',\n  success: 'text-text-secondary hover:text-success hover:bg-success/10',\n  error: 'text-text-secondary hover:text-error hover:bg-error/10',\n  warning: 'text-text-secondary hover:text-warning hover:bg-warning/10',\n  info: 'text-text-secondary hover:text-info hover:bg-info/10',\n} as const\n\n// Active solid variant classes\nconst activeSolidClasses = {\n  default: 'bg-border text-text-primary',\n  primary: 'bg-primary text-background',\n  secondary: 'bg-secondary text-background',\n  accent: 'bg-accent text-background',\n  success: 'bg-success text-background',\n  error: 'bg-error text-background',\n  warning: 'bg-warning text-background',\n  info: 'bg-info text-background',\n} as const\n\n// Active soft variant classes\nconst activeSoftClasses = {\n  default: 'bg-border/20 text-text-primary',\n  primary: 'bg-primary/20 text-primary',\n  secondary: 'bg-secondary/20 text-secondary',\n  accent: 'bg-accent/20 text-accent',\n  success: 'bg-success/20 text-success',\n  error: 'bg-error/20 text-error',\n  warning: 'bg-warning/20 text-warning',\n  info: 'bg-info/20 text-info',\n} as const\n\n// Active default variant classes\nconst activeDefaultClasses = {\n  default: 'bg-surface text-text-primary',\n  primary: 'border-primary bg-primary/10 text-primary',\n  secondary: 'border-secondary bg-secondary/10 text-secondary',\n  accent: 'border-accent bg-accent/10 text-accent',\n  success: 'border-success bg-success/10 text-success',\n  error: 'border-error bg-error/10 text-error',\n  warning: 'border-warning bg-warning/10 text-warning',\n  info: 'border-info bg-info/10 text-info',\n} as const\n\ntype ToggleColor = keyof typeof inactiveHoverClasses\n\nconst getToggleClasses = (\n  color: string,\n  variant: string,\n  isActive: boolean,\n) => {\n  const toggleColor = color as ToggleColor\n\n  if (!isActive) {\n    return inactiveHoverClasses[toggleColor] || inactiveHoverClasses.default\n  }\n\n  // Active state\n  if (variant === 'solid') {\n    return activeSolidClasses[toggleColor] || activeSolidClasses.default\n  }\n  if (variant === 'soft') {\n    return activeSoftClasses[toggleColor] || activeSoftClasses.default\n  }\n  return activeDefaultClasses[toggleColor] || activeDefaultClasses.default\n}\n\nconst singleToggleVariants = cva(\n  'inline-flex items-center gap-2 font-medium transition-colors cursor-pointer border rounded-md',\n  {\n    variants: {\n      size: {\n        xs: 'text-xs px-2 py-1',\n        sm: 'text-sm px-3 py-1.5',\n        md: 'text-base px-4 py-2',\n        lg: 'text-lg px-5 py-2.5',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n)\n\n// Single toggle uses the same class logic as toggle group\nconst getSingleToggleClasses = (\n  color: string,\n  variant: string,\n  isPressed: boolean,\n) => {\n  return getToggleClasses(color, variant, isPressed)\n}\n\nconst Toggle = React.memo<SingleToggleProps>(\n  ({\n    pressed: controlledPressed,\n    defaultPressed = false,\n    color = 'primary',\n    size = 'md',\n    variant = 'default',\n    onChange,\n    disabled = false,\n    icon,\n    children,\n    'aria-label': ariaLabel,\n    className,\n    classNames,\n  }) => {\n    const [internalPressed, setInternalPressed] = useState(defaultPressed)\n\n    const pressed =\n      controlledPressed !== undefined ? controlledPressed : internalPressed\n\n    const handleClick = () => {\n      if (disabled) return\n\n      const newPressed = !pressed\n      if (controlledPressed === undefined) {\n        setInternalPressed(newPressed)\n      }\n      onChange?.(newPressed)\n    }\n\n    return (\n      <button\n        type=\"button\"\n        className={cn(\n          'toggle_root',\n          singleToggleVariants({ size }),\n          getSingleToggleClasses(color, variant, pressed),\n          'border',\n          disabled && 'opacity-50 cursor-not-allowed',\n          classNames?.root,\n          className,\n        )}\n        onClick={handleClick}\n        disabled={disabled}\n        aria-pressed={pressed}\n        aria-label={ariaLabel}\n      >\n        {icon}\n        {children}\n      </button>\n    )\n  },\n)\n\nToggle.displayName = 'Toggle'\n\nexport type * from './types'\nexport default Toggle\n"]}

package/dist/{chunk-C2MZL644.js → chunk-RW4RW4DV.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-2OGZENFC.js';
+import { cn } from './chunk-NGYLRX6F.js';
 import React from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -38,6 +38,7 @@ var InputOTP = React.memo(
     label,
     messagePosition = "bottom",
     className,
+    classNames,
     ref
   }) => {
     const inputRefs = React.useRef([]);
@@ -137,42 +138,91 @@ var InputOTP = React.memo(
       info: "text-info",
       success: "text-success"
     };
-    const MessageComponent = message && /* @__PURE__ */ jsx("p", { className: cn("text-xs mt-1", statusTextClasses[status]), children: message });
+    const MessageComponent = message && /* @__PURE__ */ jsx(
+      "p",
+      {
+        "data-slot": "inputOTP_helper",
+        className: cn(
+          "inputOTP_helper",
+          "text-xs mt-1",
+          statusTextClasses[status],
+          classNames?.helper
+        ),
+        children: message
+      }
+    );
     return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
-        className: cn("w-full", className),
+        "data-slot": "inputOTP_root",
+        className: cn("inputOTP_root", "w-full", classNames?.root, className),
         children: [
-          label && messagePosition === "top" && /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-text-primary mb-1.5", children: label }),
+          label && messagePosition === "top" && /* @__PURE__ */ jsx(
+            "label",
+            {
+              "data-slot": "inputOTP_label",
+              className: cn(
+                "inputOTP_label",
+                "block text-sm font-medium text-text-primary mb-1.5",
+                classNames?.label
+              ),
+              children: label
+            }
+          ),
           messagePosition === "top" && MessageComponent,
-          /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: Array.from({ length }).map((_, index) => /* @__PURE__ */ jsx(
-            "input",
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "inputOTP_wrapper",
+              className: cn("inputOTP_wrapper", "flex gap-2", classNames?.wrapper),
+              children: Array.from({ length }).map((_, index) => {
+                const isActive = otp[index] !== void 0 && otp[index] !== "";
+                return /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref: (el) => {
+                      inputRefs.current[index] = el;
+                    },
+                    type: "text",
+                    inputMode: type === "number" ? "numeric" : "text",
+                    maxLength: 1,
+                    value: otp[index] || "",
+                    onChange: (e) => handleChange(index, e.target.value),
+                    onKeyDown: (e) => handleKeyDown(index, e),
+                    onPaste: handlePaste,
+                    disabled,
+                    "data-slot": "inputOTP_slot",
+                    className: cn(
+                      "inputOTP_slot",
+                      "text-center font-semibold",
+                      "border rounded-md outline-none",
+                      "disabled:opacity-50 disabled:cursor-not-allowed",
+                      "text-text-primary",
+                      sizeClasses[size],
+                      statusBorderClasses[status],
+                      classNames?.slot,
+                      isActive && classNames?.slotActive
+                    ),
+                    "aria-label": `OTP digit ${index + 1}`
+                  },
+                  index
+                );
+              })
+            }
+          ),
+          label && messagePosition === "bottom" && /* @__PURE__ */ jsx(
+            "label",
             {
-              ref: (el) => {
-                inputRefs.current[index] = el;
-              },
-              type: "text",
-              inputMode: type === "number" ? "numeric" : "text",
-              maxLength: 1,
-              value: otp[index] || "",
-              onChange: (e) => handleChange(index, e.target.value),
-              onKeyDown: (e) => handleKeyDown(index, e),
-              onPaste: handlePaste,
-              disabled,
+              "data-slot": "inputOTP_label",
               className: cn(
-                "text-center font-semibold",
-                "border rounded-md outline-none",
-                "disabled:opacity-50 disabled:cursor-not-allowed",
-                "text-text-primary",
-                sizeClasses[size],
-                statusBorderClasses[status]
+                "inputOTP_label",
+                "block text-sm font-medium text-text-primary mt-1.5",
+                classNames?.label
               ),
-              "aria-label": `OTP digit ${index + 1}`
-            },
-            index
-          )) }),
-          label && messagePosition === "bottom" && /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-text-primary mt-1.5", children: label }),
+              children: label
+            }
+          ),
           messagePosition === "bottom" && MessageComponent
         ]
       }
@@ -183,5 +233,5 @@ InputOTP.displayName = "InputOTP";
 var input_otp_default = InputOTP;
 
 export { input_otp_default };
-//# sourceMappingURL=chunk-C2MZL644.js.map
-//# sourceMappingURL=chunk-C2MZL644.js.map
+//# sourceMappingURL=chunk-RW4RW4DV.js.map
+//# sourceMappingURL=chunk-RW4RW4DV.js.map

package/dist/chunk-RW4RW4DV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/input-otp/index.tsx"],"names":[],"mappings":"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","file":"chunk-RW4RW4DV.js","sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { cn } from '../utils'\nimport type { InputOTPProps } from './types'\n\n/**\n * Determine the current validation status\n */\nfunction getValidationStatus(\n  props: InputOTPProps,\n): 'default' | 'error' | 'warning' | 'info' | 'success' {\n  if (props.error) return 'error'\n  if (props.warning) return 'warning'\n  if (props.info) return 'info'\n  if (props.success) return 'success'\n  return 'default'\n}\n\n/**\n * Get the validation message to display\n */\nfunction getValidationMessage(props: InputOTPProps): string | undefined {\n  const status = getValidationStatus(props)\n  if (status === 'error' && typeof props.error === 'string') return props.error\n  if (status === 'warning' && typeof props.warning === 'string')\n    return props.warning\n  if (status === 'info' && typeof props.info === 'string') return props.info\n  if (status === 'success' && typeof props.success === 'string')\n    return props.success\n  return props.helperText\n}\n\nconst InputOTP = React.memo<InputOTPProps>(\n  ({\n    length = 6,\n    size = 'md',\n    value = '',\n    onChange,\n    onComplete,\n    error,\n    warning,\n    info,\n    success,\n    helperText,\n    disabled = false,\n    autoFocus = false,\n    type = 'text',\n    pattern,\n    label,\n    messagePosition = 'bottom',\n    className,\n    classNames,\n    ref,\n  }) => {\n    const inputRefs = React.useRef<(HTMLInputElement | null)[]>([])\n    const [otp, setOtp] = React.useState<string[]>(\n      value.split('').slice(0, length),\n    )\n\n    // Update OTP when controlled value changes\n    React.useEffect(() => {\n      setOtp(value.split('').slice(0, length))\n    }, [value, length])\n\n    // Auto-focus first input\n    React.useEffect(() => {\n      if (autoFocus && inputRefs.current[0]) {\n        inputRefs.current[0].focus()\n      }\n    }, [autoFocus])\n\n    const handleChange = React.useCallback(\n      (index: number, newValue: string) => {\n        // Only allow single character or clear\n        const char = newValue.slice(-1)\n\n        // Validate pattern if provided\n        if (pattern && char && !new RegExp(pattern).test(char)) {\n          return\n        }\n\n        const newOtp = [...otp]\n        newOtp[index] = char\n        setOtp(newOtp)\n\n        const otpValue = newOtp.join('')\n        onChange?.(otpValue)\n\n        // Auto-focus next input\n        if (char && index < length - 1) {\n          inputRefs.current[index + 1]?.focus()\n        }\n\n        // Call onComplete when all fields filled\n        if (otpValue.length === length) {\n          onComplete?.(otpValue)\n        }\n      },\n      [otp, length, onChange, onComplete, pattern],\n    )\n\n    const handleKeyDown = React.useCallback(\n      (index: number, e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Backspace') {\n          if (!otp[index] && index > 0) {\n            // Move to previous input if current is empty\n            inputRefs.current[index - 1]?.focus()\n          }\n        } else if (e.key === 'ArrowLeft' && index > 0) {\n          inputRefs.current[index - 1]?.focus()\n        } else if (e.key === 'ArrowRight' && index < length - 1) {\n          inputRefs.current[index + 1]?.focus()\n        }\n      },\n      [otp, length],\n    )\n\n    const handlePaste = React.useCallback(\n      (e: React.ClipboardEvent) => {\n        e.preventDefault()\n        const pastedData = e.clipboardData.getData('text').slice(0, length)\n\n        // Validate pasted data against pattern if provided\n        if (pattern && !new RegExp(`^${pattern}*$`).test(pastedData)) {\n          return\n        }\n\n        const newOtp = pastedData.split('').slice(0, length)\n        setOtp(newOtp)\n\n        const otpValue = newOtp.join('')\n        onChange?.(otpValue)\n\n        // Focus last filled input or first empty\n        const focusIndex = Math.min(newOtp.length, length - 1)\n        inputRefs.current[focusIndex]?.focus()\n\n        // Call onComplete if all fields filled\n        if (otpValue.length === length) {\n          onComplete?.(otpValue)\n        }\n      },\n      [length, onChange, onComplete, pattern],\n    )\n\n    const status = getValidationStatus({\n      error,\n      warning,\n      info,\n      success,\n      helperText,\n    })\n    const message = getValidationMessage({\n      error,\n      warning,\n      info,\n      success,\n      helperText,\n    })\n\n    const sizeClasses = {\n      xs: 'h-8 w-8 text-xs',\n      sm: 'h-9 w-9 text-sm',\n      md: 'h-12 w-12 text-base',\n      lg: 'h-14 w-14 text-lg',\n    }\n\n    const statusBorderClasses = {\n      default: 'border-border focus:border-primary',\n      error: 'border-error focus:border-error',\n      warning: 'border-warning focus:border-warning',\n      info: 'border-info focus:border-info',\n      success: 'border-success focus:border-success',\n    }\n\n    const statusTextClasses = {\n      default: 'text-text-secondary',\n      error: 'text-error',\n      warning: 'text-warning',\n      info: 'text-info',\n      success: 'text-success',\n    }\n\n    const MessageComponent = message && (\n      <p\n        data-slot=\"inputOTP_helper\"\n        className={cn(\n          'inputOTP_helper',\n          'text-xs mt-1',\n          statusTextClasses[status],\n          classNames?.helper,\n        )}\n      >\n        {message}\n      </p>\n    )\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"inputOTP_root\"\n        className={cn('inputOTP_root', 'w-full', classNames?.root, className)}\n      >\n        {label && messagePosition === 'top' && (\n          <label\n            data-slot=\"inputOTP_label\"\n            className={cn(\n              'inputOTP_label',\n              'block text-sm font-medium text-text-primary mb-1.5',\n              classNames?.label,\n            )}\n          >\n            {label}\n          </label>\n        )}\n        {messagePosition === 'top' && MessageComponent}\n\n        <div\n          data-slot=\"inputOTP_wrapper\"\n          className={cn('inputOTP_wrapper', 'flex gap-2', classNames?.wrapper)}\n        >\n          {Array.from({ length }).map((_, index) => {\n            const isActive = otp[index] !== undefined && otp[index] !== ''\n            return (\n              <input\n                key={index}\n                ref={(el) => {\n                  inputRefs.current[index] = el\n                }}\n                type=\"text\"\n                inputMode={type === 'number' ? 'numeric' : 'text'}\n                maxLength={1}\n                value={otp[index] || ''}\n                onChange={(e) => handleChange(index, e.target.value)}\n                onKeyDown={(e) => handleKeyDown(index, e)}\n                onPaste={handlePaste}\n                disabled={disabled}\n                data-slot=\"inputOTP_slot\"\n                className={cn(\n                  'inputOTP_slot',\n                  'text-center font-semibold',\n                  'border rounded-md outline-none',\n                  'disabled:opacity-50 disabled:cursor-not-allowed',\n                  'text-text-primary',\n                  sizeClasses[size],\n                  statusBorderClasses[status],\n                  classNames?.slot,\n                  isActive && classNames?.slotActive,\n                )}\n                aria-label={`OTP digit ${index + 1}`}\n              />\n            )\n          })}\n        </div>\n\n        {label && messagePosition === 'bottom' && (\n          <label\n            data-slot=\"inputOTP_label\"\n            className={cn(\n              'inputOTP_label',\n              'block text-sm font-medium text-text-primary mt-1.5',\n              classNames?.label,\n            )}\n          >\n            {label}\n          </label>\n        )}\n        {messagePosition === 'bottom' && MessageComponent}\n      </div>\n    )\n  },\n)\n\nInputOTP.displayName = 'InputOTP'\n\nexport type { InputOTPClassNames } from './types'\nexport type * from './types'\nexport default InputOTP\n"]}