@particle-academy/react-fancy 5.21.0 → 5.22.0

package/dist/{chunk-FO4GCX67.cjs → chunk-JM2H642B.cjs}

@@ -3,7 +3,7 @@
 var chunkKJ22KE56_cjs = require('./chunk-KJ22KE56.cjs');
 var chunkL3V3BYVS_cjs = require('./chunk-L3V3BYVS.cjs');
 var chunkOUOEQZHY_cjs = require('./chunk-OUOEQZHY.cjs');
-var chunk3Z6ALUWP_cjs = require('./chunk-3Z6ALUWP.cjs');
+var chunkZU5Q77OT_cjs = require('./chunk-ZU5Q77OT.cjs');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -66,7 +66,7 @@ var ColorPicker = react.forwardRef(
               enterEdit();
             }
           } : void 0,
-          className: chunk3Z6ALUWP_cjs.cn(
+          className: chunkZU5Q77OT_cjs.cn(
             "inline-flex items-center gap-2",
             interactive && "cursor-pointer rounded-md outline-none transition-opacity hover:opacity-80 focus-visible:ring-2 focus-visible:ring-blue-500/40",
             className
@@ -75,7 +75,7 @@ var ColorPicker = react.forwardRef(
             /* @__PURE__ */ jsxRuntime.jsx(
               "span",
               {
-                className: chunk3Z6ALUWP_cjs.cn(
+                className: chunkZU5Q77OT_cjs.cn(
                   "shrink-0 rounded-full",
                   SWATCH_SIZES[size],
                   variant === "outline" && "ring-1 ring-zinc-300 dark:ring-zinc-600"
@@ -87,7 +87,7 @@ var ColorPicker = react.forwardRef(
             /* @__PURE__ */ jsxRuntime.jsx(
               "span",
               {
-                className: chunk3Z6ALUWP_cjs.cn(
+                className: chunkZU5Q77OT_cjs.cn(
                   "select-all font-mono uppercase",
                   TEXT_SIZES[size],
                   "text-zinc-700 dark:text-zinc-300"
@@ -105,7 +105,7 @@ var ColorPicker = react.forwardRef(
         ...rest,
         ref,
         "data-react-fancy-color-picker": "",
-        className: chunk3Z6ALUWP_cjs.cn("inline-flex items-center gap-2", className),
+        className: chunkZU5Q77OT_cjs.cn("inline-flex items-center gap-2", className),
         onBlur: (e) => {
           if (interactive && !e.currentTarget.contains(e.relatedTarget)) exitEdit();
         },
@@ -117,7 +117,7 @@ var ColorPicker = react.forwardRef(
               disabled,
               autoFocus: interactive,
               onClick: handleSwatchClick,
-              className: chunk3Z6ALUWP_cjs.cn(
+              className: chunkZU5Q77OT_cjs.cn(
                 "relative shrink-0 rounded-full transition-shadow",
                 SWATCH_SIZES[size],
                 variant === "outline" && "ring-1 ring-zinc-300 dark:ring-zinc-600",
@@ -143,7 +143,7 @@ var ColorPicker = react.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
-              className: chunk3Z6ALUWP_cjs.cn(
+              className: chunkZU5Q77OT_cjs.cn(
                 "select-all font-mono uppercase",
                 TEXT_SIZES[size],
                 "text-zinc-700 dark:text-zinc-300",
@@ -161,5 +161,5 @@ var ColorPicker = react.forwardRef(
 ColorPicker.displayName = "ColorPicker";
 
 exports.ColorPicker = ColorPicker;
-//# sourceMappingURL=chunk-FO4GCX67.cjs.map
-//# sourceMappingURL=chunk-FO4GCX67.cjs.map
+//# sourceMappingURL=chunk-JM2H642B.cjs.map
+//# sourceMappingURL=chunk-JM2H642B.cjs.map

package/dist/{chunk-FO4GCX67.cjs.map → chunk-JM2H642B.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorPicker/ColorPicker.tsx"],"names":["forwardRef","useControllableState","useFieldMode","useInlineEdit","useRef","useId","jsxs","cn","jsx"],"mappings":";;;;;;;;;AAOA,IAAM,aAAA,GAAgB,SAAA;AAEtB,IAAM,YAAA,GAAe;AAAA,EACnB,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,UAAA,GAAa;AAAA,EACjB,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEO,IAAM,WAAA,GAAcA,gBAAA;AAAA,EACzB,CACE;AAAA,IACE,KAAA;AAAA,IACA,YAAA,GAAe,aAAA;AAAA,IACf,QAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA,GAAO,IAAA;AAAA,IACP,OAAA,GAAU,SAAA;AAAA,IACV,QAAA,GAAW,KAAA;AAAA,IACX,SAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIC,sCAAA;AAAA,MACxB,KAAA;AAAA,MACA,YAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM,YAAA,GAAeC,+BAAa,IAAI,CAAA;AACtC,IAAA,MAAM,EAAE,aAAa,WAAA,EAAa,SAAA,EAAW,UAAS,GAAIC,+BAAA,CAAc,cAAc,QAAQ,CAAA;AAE9F,IAAA,MAAM,QAAA,GAAWC,aAAyB,IAAI,CAAA;AAC9C,IAAA,MAAM,aAAaC,WAAA,EAAM;AAEzB,IAAA,MAAM,YAAA,GAAe,CAAC,CAAA,KAA2C;AAC/D,MAAA,QAAA,CAAS,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,IACzB,CAAA;AAEA,IAAA,MAAM,oBAAoB,MAAM;AAC9B,MAAA,IAAI,CAAC,QAAA,EAAU;AACb,QAAA,QAAA,CAAS,SAAS,KAAA,EAAM;AAAA,MAC1B;AAAA,IACF,CAAA;AAEA,IAAA,IAAI,CAAC,WAAA,EAAa;AAChB,MAAA,uBACEC,eAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACE,GAAG,IAAA;AAAA,UACJ,GAAA;AAAA,UACA,+BAAA,EAA8B,EAAA;AAAA,UAC9B,WAAA,EAAU,MAAA;AAAA,UACV,IAAA,EAAM,cAAc,QAAA,GAAW,MAAA;AAAA,UAC/B,QAAA,EAAU,cAAc,CAAA,GAAI,MAAA;AAAA,UAC5B,KAAA,EAAO,cAAc,eAAA,GAAkB,MAAA;AAAA,UACvC,OAAA,EAAS,cAAc,SAAA,GAAY,MAAA;AAAA,UACnC,SAAA,EACE,WAAA,GACI,CAAC,CAAA,KAAM;AACL,YAAA,IAAI,CAAA,CAAE,GAAA,KAAQ,OAAA,IAAW,CAAA,CAAE,QAAQ,GAAA,EAAK;AACtC,cAAA,CAAA,CAAE,cAAA,EAAe;AACjB,cAAA,SAAA,EAAU;AAAA,YACZ;AAAA,UACF,CAAA,GACA,MAAA;AAAA,UAEN,SAAA,EAAWC,oBAAA;AAAA,YACT,gCAAA;AAAA,YACA,WAAA,IACE,gIAAA;AAAA,YACF;AAAA,WACF;AAAA,UAEA,QAAA,EAAA;AAAA,4BAAAC,cAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAWD,oBAAA;AAAA,kBACT,uBAAA;AAAA,kBACA,aAAa,IAAI,CAAA;AAAA,kBACjB,YAAY,SAAA,IAAa;AAAA,iBAC3B;AAAA,gBACA,KAAA,EAAO,EAAE,eAAA,EAAiB,KAAA,EAAM;AAAA,gBAChC,YAAA,EAAY,UAAU,KAAK,CAAA;AAAA;AAAA,aAC7B;AAAA,4BACAC,cAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAWD,oBAAA;AAAA,kBACT,gCAAA;AAAA,kBACA,WAAW,IAAI,CAAA;AAAA,kBACf;AAAA,iBACF;AAAA,gBAEC,gBAAM,WAAA;AAAY;AAAA;AACrB;AAAA;AAAA,OACF;AAAA,IAEJ;AAEA,IAAA,uBACED,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QACA,+BAAA,EAA8B,EAAA;AAAA,QAC9B,SAAA,EAAWC,oBAAA,CAAG,gCAAA,EAAkC,SAAS,CAAA;AAAA,QACzD,MAAA,EAAQ,CAAC,CAAA,KAAM;AACb,UAAA,IAAI,WAAA,IAAe,CAAC,CAAA,CAAE,aAAA,CAAc,SAAS,CAAA,CAAE,aAAqB,GAAG,QAAA,EAAS;AAAA,QAClF,CAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAAC,cAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cACL,QAAA;AAAA,cACA,SAAA,EAAW,WAAA;AAAA,cACX,OAAA,EAAS,iBAAA;AAAA,cACT,SAAA,EAAWD,oBAAA;AAAA,gBACT,kDAAA;AAAA,gBACA,aAAa,IAAI,CAAA;AAAA,gBACjB,YAAY,SAAA,IACV,yCAAA;AAAA,gBACF,WACI,+BAAA,GACA;AAAA,eACN;AAAA,cACA,KAAA,EAAO,EAAE,eAAA,EAAiB,KAAA,EAAM;AAAA,cAChC,YAAA,EAAY,mBAAmB,KAAK,CAAA,CAAA;AAAA,cAEpC,QAAA,kBAAAC,cAAA;AAAA,gBAAC,OAAA;AAAA,gBAAA;AAAA,kBACC,GAAA,EAAK,QAAA;AAAA,kBACL,IAAA,EAAK,OAAA;AAAA,kBACL,KAAA,EAAO,KAAA;AAAA,kBACP,QAAA,EAAU,YAAA;AAAA,kBACV,QAAA;AAAA,kBACA,SAAA,EAAU,yDAAA;AAAA,kBACV,QAAA,EAAU,EAAA;AAAA,kBACV,IAAA,EAAM,UAAU,UAAA,GAAa;AAAA;AAAA;AAC/B;AAAA,WACF;AAAA,0BAEAA,cAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAWD,oBAAA;AAAA,gBACT,gCAAA;AAAA,gBACA,WAAW,IAAI,CAAA;AAAA,gBACf,kCAAA;AAAA,gBACA,QAAA,IAAY;AAAA,eACd;AAAA,cAEC,gBAAM,WAAA;AAAY;AAAA,WACrB;AAAA,UAEC,OAAA,oBACCC,cAAA,CAAC,UAAA,EAAA,EAAS,EAAA,EAAI,YACX,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,MAAA,oCACX,QAAA,EAAA,EAAoB,KAAA,EAAO,MAAA,EAAA,EAAf,MAAuB,CACrC,CAAA,EACH;AAAA;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"chunk-FO4GCX67.cjs","sourcesContent":["import { forwardRef, useId, useRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport { useFieldMode } from \"../inputs/mode/FieldMode.context\";\nimport { useInlineEdit } from \"../inputs/mode/useInlineEdit\";\nimport type { ColorPickerProps } from \"./ColorPicker.types\";\n\nconst DEFAULT_COLOR = \"#3b82f6\";\n\nconst SWATCH_SIZES = {\n  sm: \"h-6 w-6\",\n  md: \"h-8 w-8\",\n  lg: \"h-10 w-10\",\n} as const;\n\nconst TEXT_SIZES = {\n  sm: \"text-xs\",\n  md: \"text-sm\",\n  lg: \"text-base\",\n} as const;\n\nexport const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(\n  (\n    {\n      value,\n      defaultValue = DEFAULT_COLOR,\n      onChange,\n      presets,\n      size = \"md\",\n      variant = \"outline\",\n      disabled = false,\n      className,\n      mode,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [color, setColor] = useControllableState(\n      value,\n      defaultValue,\n      onChange,\n    );\n    const resolvedMode = useFieldMode(mode);\n    const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const datalistId = useId();\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      setColor(e.target.value);\n    };\n\n    const handleSwatchClick = () => {\n      if (!disabled) {\n        inputRef.current?.click();\n      }\n    };\n\n    if (!showControl) {\n      return (\n        <div\n          {...rest}\n          ref={ref}\n          data-react-fancy-color-picker=\"\"\n          data-mode=\"view\"\n          role={interactive ? \"button\" : undefined}\n          tabIndex={interactive ? 0 : undefined}\n          title={interactive ? \"Click to edit\" : undefined}\n          onClick={interactive ? enterEdit : undefined}\n          onKeyDown={\n            interactive\n              ? (e) => {\n                  if (e.key === \"Enter\" || e.key === \" \") {\n                    e.preventDefault();\n                    enterEdit();\n                  }\n                }\n              : undefined\n          }\n          className={cn(\n            \"inline-flex items-center gap-2\",\n            interactive &&\n              \"cursor-pointer rounded-md outline-none transition-opacity hover:opacity-80 focus-visible:ring-2 focus-visible:ring-blue-500/40\",\n            className,\n          )}\n        >\n          <span\n            className={cn(\n              \"shrink-0 rounded-full\",\n              SWATCH_SIZES[size],\n              variant === \"outline\" && \"ring-1 ring-zinc-300 dark:ring-zinc-600\",\n            )}\n            style={{ backgroundColor: color }}\n            aria-label={`Color: ${color}`}\n          />\n          <span\n            className={cn(\n              \"select-all font-mono uppercase\",\n              TEXT_SIZES[size],\n              \"text-zinc-700 dark:text-zinc-300\",\n            )}\n          >\n            {color.toUpperCase()}\n          </span>\n        </div>\n      );\n    }\n\n    return (\n      <div\n        {...rest}\n        ref={ref}\n        data-react-fancy-color-picker=\"\"\n        className={cn(\"inline-flex items-center gap-2\", className)}\n        onBlur={(e) => {\n          if (interactive && !e.currentTarget.contains(e.relatedTarget as Node)) exitEdit();\n        }}\n      >\n        <button\n          type=\"button\"\n          disabled={disabled}\n          autoFocus={interactive}\n          onClick={handleSwatchClick}\n          className={cn(\n            \"relative shrink-0 rounded-full transition-shadow\",\n            SWATCH_SIZES[size],\n            variant === \"outline\" &&\n              \"ring-1 ring-zinc-300 dark:ring-zinc-600\",\n            disabled\n              ? \"cursor-not-allowed opacity-50\"\n              : \"cursor-pointer hover:ring-2 hover:ring-zinc-400 dark:hover:ring-zinc-500\",\n          )}\n          style={{ backgroundColor: color }}\n          aria-label={`Selected color: ${color}`}\n        >\n          <input\n            ref={inputRef}\n            type=\"color\"\n            value={color}\n            onChange={handleChange}\n            disabled={disabled}\n            className=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n            tabIndex={-1}\n            list={presets ? datalistId : undefined}\n          />\n        </button>\n\n        <span\n          className={cn(\n            \"select-all font-mono uppercase\",\n            TEXT_SIZES[size],\n            \"text-zinc-700 dark:text-zinc-300\",\n            disabled && \"opacity-50\",\n          )}\n        >\n          {color.toUpperCase()}\n        </span>\n\n        {presets && (\n          <datalist id={datalistId}>\n            {presets.map((preset) => (\n              <option key={preset} value={preset} />\n            ))}\n          </datalist>\n        )}\n      </div>\n    );\n  },\n);\n\nColorPicker.displayName = \"ColorPicker\";\n"]}
+{"version":3,"sources":["../src/components/ColorPicker/ColorPicker.tsx"],"names":["forwardRef","useControllableState","useFieldMode","useInlineEdit","useRef","useId","jsxs","cn","jsx"],"mappings":"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","file":"chunk-JM2H642B.cjs","sourcesContent":["import { forwardRef, useId, useRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport { useFieldMode } from \"../inputs/mode/FieldMode.context\";\nimport { useInlineEdit } from \"../inputs/mode/useInlineEdit\";\nimport type { ColorPickerProps } from \"./ColorPicker.types\";\n\nconst DEFAULT_COLOR = \"#3b82f6\";\n\nconst SWATCH_SIZES = {\n  sm: \"h-6 w-6\",\n  md: \"h-8 w-8\",\n  lg: \"h-10 w-10\",\n} as const;\n\nconst TEXT_SIZES = {\n  sm: \"text-xs\",\n  md: \"text-sm\",\n  lg: \"text-base\",\n} as const;\n\nexport const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(\n  (\n    {\n      value,\n      defaultValue = DEFAULT_COLOR,\n      onChange,\n      presets,\n      size = \"md\",\n      variant = \"outline\",\n      disabled = false,\n      className,\n      mode,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [color, setColor] = useControllableState(\n      value,\n      defaultValue,\n      onChange,\n    );\n    const resolvedMode = useFieldMode(mode);\n    const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const datalistId = useId();\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      setColor(e.target.value);\n    };\n\n    const handleSwatchClick = () => {\n      if (!disabled) {\n        inputRef.current?.click();\n      }\n    };\n\n    if (!showControl) {\n      return (\n        <div\n          {...rest}\n          ref={ref}\n          data-react-fancy-color-picker=\"\"\n          data-mode=\"view\"\n          role={interactive ? \"button\" : undefined}\n          tabIndex={interactive ? 0 : undefined}\n          title={interactive ? \"Click to edit\" : undefined}\n          onClick={interactive ? enterEdit : undefined}\n          onKeyDown={\n            interactive\n              ? (e) => {\n                  if (e.key === \"Enter\" || e.key === \" \") {\n                    e.preventDefault();\n                    enterEdit();\n                  }\n                }\n              : undefined\n          }\n          className={cn(\n            \"inline-flex items-center gap-2\",\n            interactive &&\n              \"cursor-pointer rounded-md outline-none transition-opacity hover:opacity-80 focus-visible:ring-2 focus-visible:ring-blue-500/40\",\n            className,\n          )}\n        >\n          <span\n            className={cn(\n              \"shrink-0 rounded-full\",\n              SWATCH_SIZES[size],\n              variant === \"outline\" && \"ring-1 ring-zinc-300 dark:ring-zinc-600\",\n            )}\n            style={{ backgroundColor: color }}\n            aria-label={`Color: ${color}`}\n          />\n          <span\n            className={cn(\n              \"select-all font-mono uppercase\",\n              TEXT_SIZES[size],\n              \"text-zinc-700 dark:text-zinc-300\",\n            )}\n          >\n            {color.toUpperCase()}\n          </span>\n        </div>\n      );\n    }\n\n    return (\n      <div\n        {...rest}\n        ref={ref}\n        data-react-fancy-color-picker=\"\"\n        className={cn(\"inline-flex items-center gap-2\", className)}\n        onBlur={(e) => {\n          if (interactive && !e.currentTarget.contains(e.relatedTarget as Node)) exitEdit();\n        }}\n      >\n        <button\n          type=\"button\"\n          disabled={disabled}\n          autoFocus={interactive}\n          onClick={handleSwatchClick}\n          className={cn(\n            \"relative shrink-0 rounded-full transition-shadow\",\n            SWATCH_SIZES[size],\n            variant === \"outline\" &&\n              \"ring-1 ring-zinc-300 dark:ring-zinc-600\",\n            disabled\n              ? \"cursor-not-allowed opacity-50\"\n              : \"cursor-pointer hover:ring-2 hover:ring-zinc-400 dark:hover:ring-zinc-500\",\n          )}\n          style={{ backgroundColor: color }}\n          aria-label={`Selected color: ${color}`}\n        >\n          <input\n            ref={inputRef}\n            type=\"color\"\n            value={color}\n            onChange={handleChange}\n            disabled={disabled}\n            className=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n            tabIndex={-1}\n            list={presets ? datalistId : undefined}\n          />\n        </button>\n\n        <span\n          className={cn(\n            \"select-all font-mono uppercase\",\n            TEXT_SIZES[size],\n            \"text-zinc-700 dark:text-zinc-300\",\n            disabled && \"opacity-50\",\n          )}\n        >\n          {color.toUpperCase()}\n        </span>\n\n        {presets && (\n          <datalist id={datalistId}>\n            {presets.map((preset) => (\n              <option key={preset} value={preset} />\n            ))}\n          </datalist>\n        )}\n      </div>\n    );\n  },\n);\n\nColorPicker.displayName = \"ColorPicker\";\n"]}

package/dist/{chunk-7ZDIQOFH.cjs → chunk-JV6RDIA6.cjs}

@@ -1,7 +1,7 @@
 'use strict';
 
 var chunkOUOEQZHY_cjs = require('./chunk-OUOEQZHY.cjs');
-var chunk3Z6ALUWP_cjs = require('./chunk-3Z6ALUWP.cjs');
+var chunkZU5Q77OT_cjs = require('./chunk-ZU5Q77OT.cjs');
 var react = require('react');
 var lucideReact = require('lucide-react');
 var jsxRuntime = require('react/jsx-runtime');
@@ -133,7 +133,7 @@ function FileBrowserPathBar({
     "div",
     {
       "data-react-fancy-file-browser-path": "",
-      className: chunk3Z6ALUWP_cjs.cn(
+      className: chunkZU5Q77OT_cjs.cn(
         "flex items-center gap-1 border-b border-zinc-200 px-2 py-1.5 dark:border-zinc-700",
         className
       ),
@@ -273,7 +273,7 @@ function FileBrowserNewFolder({ className }) {
         "data-react-fancy-file-browser-new-folder": "",
         onClick: () => setOpen(true),
         title: `New folder in ${path}`,
-        className: chunk3Z6ALUWP_cjs.cn(
+        className: chunkZU5Q77OT_cjs.cn(
           "flex shrink-0 items-center gap-1 rounded-md px-1.5 py-0.5 text-xs text-zinc-500 transition-colors",
           "hover:bg-zinc-100 hover:text-zinc-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-300",
           className
@@ -290,7 +290,7 @@ function FileBrowserNewFolder({ className }) {
     "div",
     {
       "data-react-fancy-file-browser-new-folder-form": "",
-      className: chunk3Z6ALUWP_cjs.cn("flex shrink-0 flex-col gap-0.5", className),
+      className: chunkZU5Q77OT_cjs.cn("flex shrink-0 flex-col gap-0.5", className),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FolderPlus, { size: 13, "aria-hidden": "true", className: "shrink-0 text-zinc-400" }),
@@ -319,7 +319,7 @@ function FileBrowserNewFolder({ className }) {
                   close();
                 }
               },
-              className: chunk3Z6ALUWP_cjs.cn(
+              className: chunkZU5Q77OT_cjs.cn(
                 "w-32 min-w-0 rounded-md border px-1.5 py-0.5 text-xs outline-none",
                 "bg-transparent text-zinc-700 placeholder:text-zinc-400 dark:text-zinc-300",
                 shown ? "border-red-400 dark:border-red-500" : "border-zinc-200 dark:border-zinc-700"
@@ -373,7 +373,7 @@ function FileBrowserToolbar({ filterPlaceholder = "Filter", className }) {
     "div",
     {
       "data-react-fancy-file-browser-toolbar": "",
-      className: chunk3Z6ALUWP_cjs.cn(
+      className: chunkZU5Q77OT_cjs.cn(
         "flex items-center gap-2 border-b border-zinc-200 px-2 py-1.5 dark:border-zinc-700",
         className
       ),
@@ -428,7 +428,7 @@ function FileBrowserToolbar({ filterPlaceholder = "Filter", className }) {
                   onClick: () => setSort(
                     active ? { by: field, direction: sort.direction === "asc" ? "desc" : "asc" } : { by: field, direction: "asc" }
                   ),
-                  className: chunk3Z6ALUWP_cjs.cn(
+                  className: chunkZU5Q77OT_cjs.cn(
                     "flex items-center gap-0.5 rounded-md px-1.5 py-0.5 text-xs transition-colors",
                     active ? "bg-zinc-100 font-medium text-zinc-900 dark:bg-zinc-800 dark:text-white" : "text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-300"
                   ),
@@ -595,7 +595,7 @@ function FileBrowserNode({ entry, depth }) {
             "data-react-fancy-file-browser-row": "",
             onClick: handleClick,
             onDoubleClick: handleDoubleClick,
-            className: chunk3Z6ALUWP_cjs.cn(
+            className: chunkZU5Q77OT_cjs.cn(
               "flex w-full cursor-pointer items-center gap-1 rounded-md py-0.5 pr-2 text-left text-[13px] transition-colors select-none",
               selected ? "bg-blue-500/15 text-blue-600 dark:text-blue-400" : "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800",
               entry.disabled && "pointer-events-none opacity-40",
@@ -615,7 +615,7 @@ function FileBrowserNode({ entry, depth }) {
                     lucideReact.ChevronRight,
                     {
                       size: 14,
-                      className: chunk3Z6ALUWP_cjs.cn("transition-transform duration-150", expanded && "rotate-90")
+                      className: chunkZU5Q77OT_cjs.cn("transition-transform duration-150", expanded && "rotate-90")
                     }
                   )
                 }
@@ -741,7 +741,7 @@ function FileBrowserTree({ ariaLabel = "Files", className }) {
       "aria-label": ariaLabel,
       "aria-multiselectable": multiple || void 0,
       "data-react-fancy-file-browser-tree": "",
-      className: chunk3Z6ALUWP_cjs.cn("min-h-0 flex-1 overflow-auto p-1", className),
+      className: chunkZU5Q77OT_cjs.cn("min-h-0 flex-1 overflow-auto p-1", className),
       onKeyDown: handleKeyDown,
       children: [
         rootEntries === void 0 && hasProvider && (rootStatus === "loading" || rootStatus === "idle") && /* @__PURE__ */ jsxRuntime.jsx(FileBrowserStatusRow, { depth: 0, kind: "loading" }),
@@ -1060,7 +1060,7 @@ function FileBrowserRoot({
     "div",
     {
       "data-react-fancy-file-browser": "",
-      className: chunk3Z6ALUWP_cjs.cn(
+      className: chunkZU5Q77OT_cjs.cn(
         "flex flex-col overflow-hidden rounded-lg border border-zinc-200 bg-white text-sm dark:border-zinc-700 dark:bg-zinc-900",
         className
       ),
@@ -1084,5 +1084,5 @@ exports.FileBrowser = FileBrowser;
 exports.FileBrowserNewFolder = FileBrowserNewFolder;
 exports.useFileBrowser = useFileBrowser;
 exports.validateFolderName = validateFolderName;
-//# sourceMappingURL=chunk-7ZDIQOFH.cjs.map
-//# sourceMappingURL=chunk-7ZDIQOFH.cjs.map
+//# sourceMappingURL=chunk-JV6RDIA6.cjs.map
+//# sourceMappingURL=chunk-JV6RDIA6.cjs.map