@particle-academy/react-fancy 5.21.0 → 5.23.0

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":"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","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-IE4CM2SN.js → chunk-JP4C3ROX.js}

@@ -1,10 +1,10 @@
-import { DisplayValue } from './chunk-K7JGOQJG.js';
-import { Field } from './chunk-3DJGPNUI.js';
+import { DisplayValue } from './chunk-KKWNKBKR.js';
+import { Field } from './chunk-5MU6X3KO.js';
 import { resolveOption, dirtyRingClasses } from './chunk-GFYSELJF.js';
 import { useInlineEdit } from './chunk-OL53XYHF.js';
 import { useFieldMode } from './chunk-NRXK42LO.js';
 import { useControllableState } from './chunk-6FQGMVF2.js';
-import { cn } from './chunk-DSUHZO6T.js';
+import { cn } from './chunk-MMW2JGKZ.js';
 import { useId } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -13,6 +13,7 @@ function CheckboxGroup({
   dirty,
   error,
   label,
+  labelHidden,
   description,
   required,
   disabled,
@@ -105,6 +106,7 @@ function CheckboxGroup({
       Field,
       {
         label,
+        labelHidden,
         description,
         error,
         required,
@@ -118,5 +120,5 @@ function CheckboxGroup({
 CheckboxGroup.displayName = "CheckboxGroup";
 
 export { CheckboxGroup };
-//# sourceMappingURL=chunk-IE4CM2SN.js.map
-//# sourceMappingURL=chunk-IE4CM2SN.js.map
+//# sourceMappingURL=chunk-JP4C3ROX.js.map
+//# sourceMappingURL=chunk-JP4C3ROX.js.map

package/dist/chunk-JP4C3ROX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/inputs/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":"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","file":"chunk-JP4C3ROX.js","sourcesContent":["import { useId } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { useControllableState } from \"../../../hooks/use-controllable-state\";\nimport { Field } from \"../Field\";\nimport { useFieldMode } from \"../mode/FieldMode.context\";\nimport { DisplayValue } from \"../mode/DisplayValue\";\nimport { useInlineEdit } from \"../mode/useInlineEdit\";\nimport { dirtyRingClasses, resolveOption } from \"../inputs.utils\";\nimport type { CheckboxGroupProps } from \"./CheckboxGroup.types\";\n\nexport function CheckboxGroup<V = string>({\n  size = \"md\",\n  dirty,\n  error,\n  label,\n  labelHidden,\n  description,\n  required,\n  disabled,\n  className,\n  name,\n  list,\n  value: controlledValue,\n  defaultValue = [],\n  onValueChange,\n  orientation = \"vertical\",\n  mode,\n  ...rest\n}: CheckboxGroupProps<V>) {\n  const groupId = useId();\n  const resolvedMode = useFieldMode(mode);\n  const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);\n  const [value, setValue] = useControllableState(\n    controlledValue,\n    defaultValue,\n    onValueChange,\n  );\n\n  const handleToggle = (optionValue: V) => {\n    const next = value.includes(optionValue)\n      ? value.filter((v) => v !== optionValue)\n      : [...value, optionValue];\n    setValue(next);\n  };\n\n  const sizeClasses = {\n    xs: \"h-3.5 w-3.5\",\n    sm: \"h-4 w-4\",\n    md: \"h-[18px] w-[18px]\",\n    lg: \"h-5 w-5\",\n    xl: \"h-6 w-6\",\n  }[size];\n\n  const content = !showControl ? (\n    <DisplayValue size={size} interactive={interactive} onActivate={enterEdit}>\n      {list\n        .map(resolveOption)\n        .filter((o) => value.includes(o.value))\n        .map((o) => o.label)\n        .join(\", \")}\n    </DisplayValue>\n  ) : (\n    <div\n      {...rest}\n      data-react-fancy-checkbox-group=\"\"\n      onBlur={(e) => {\n        if (interactive && !e.currentTarget.contains(e.relatedTarget as Node)) exitEdit();\n      }}\n      className={cn(\n        \"flex gap-3\",\n        orientation === \"vertical\" ? \"flex-col\" : \"flex-row flex-wrap\",\n        className,\n      )}\n    >\n      {list.map((option, index) => {\n        const resolved = resolveOption(option);\n        const optionId = `${groupId}-${index}`;\n        const isChecked = value.includes(resolved.value);\n\n        return (\n          <div key={optionId} className=\"flex items-start gap-2\">\n            <input\n              id={optionId}\n              type=\"checkbox\"\n              name={name}\n              value={String(resolved.value)}\n              checked={isChecked}\n              disabled={disabled || resolved.disabled}\n              autoFocus={interactive && index === 0}\n              onChange={() => handleToggle(resolved.value)}\n              className={cn(\n                sizeClasses,\n                \"cursor-pointer rounded border border-zinc-300 bg-white text-blue-600 transition-[border-color,box-shadow] duration-150 focus:ring-2 focus:ring-blue-500/40 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-700 dark:bg-[#1e1e24]\",\n                dirtyRingClasses(dirty),\n                error && \"border-red-500\",\n              )}\n            />\n            <div className=\"flex flex-col\">\n              <label\n                htmlFor={optionId}\n                className={cn(\n                  \"cursor-pointer text-sm text-zinc-700 dark:text-zinc-100\",\n                  (disabled || resolved.disabled) &&\n                    \"cursor-not-allowed opacity-50\",\n                )}\n              >\n                {resolved.label}\n              </label>\n              {resolved.description && (\n                <span className=\"text-xs text-zinc-500 dark:text-zinc-400\">\n                  {resolved.description}\n                </span>\n              )}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n\n  if (label || error || description) {\n    return (\n      <Field\n        label={label}\n        labelHidden={labelHidden}\n        description={description}\n        error={error}\n        required={required}\n        size={size}\n      >\n        {content}\n      </Field>\n    );\n  }\n\n  return content;\n}\n\nCheckboxGroup.displayName = \"CheckboxGroup\";\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