@webiny/admin-ui 6.3.0-beta.4 → 6.4.0-beta.0

package/ColorPicker/ColorPicker.stories.js

@@ -1,175 +1,170 @@
-import React, { useState, useEffect } from "react";
+import react, { useEffect, useState } from "react";
 import { ColorPicker } from "./ColorPicker.js";
 const meta = {
-  title: "Components/Form/ColorPicker",
-  component: ColorPicker,
-  argTypes: {
-    onChange: {
-      action: "onChange"
+    title: "Components/Form/ColorPicker",
+    component: ColorPicker,
+    argTypes: {
+        onChange: {
+            action: "onChange"
+        },
+        disabled: {
+            control: "boolean",
+            defaultValue: false
+        }
     },
-    disabled: {
-      control: "boolean",
-      defaultValue: false
+    parameters: {
+        layout: "padded"
+    },
+    render: (args)=>{
+        const [value, setValue] = useState(args.value);
+        return /*#__PURE__*/ react.createElement(ColorPicker, {
+            ...args,
+            value: value,
+            onChange: setValue
+        });
     }
-  },
-  parameters: {
-    layout: "padded"
-  },
-  render: args => {
-    const [value, setValue] = useState(args.value);
-    return /*#__PURE__*/React.createElement(ColorPicker, Object.assign({}, args, {
-      value: value,
-      onChange: setValue
-    }));
-  }
 };
-export default meta;
-export const Default = {};
-export const WithLabel = {
-  args: {
-    ...Default.args,
-    label: "Any field label"
-  }
+const ColorPicker_stories = meta;
+const Default = {};
+const WithLabel = {
+    args: {
+        ...Default.args,
+        label: "Any field label"
+    }
 };
-export const WithLabelRequired = {
-  args: {
-    ...Default.args,
-    label: "Any field label",
-    required: true
-  }
+const WithLabelRequired = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true
+    }
 };
-export const WithDescription = {
-  args: {
-    ...Default.args,
-    description: "Provide the required information for processing your request."
-  }
+const WithDescription = {
+    args: {
+        ...Default.args,
+        description: "Provide the required information for processing your request."
+    }
 };
-export const WithNotes = {
-  args: {
-    ...Default.args,
-    note: "Note: Ensure your selection or input is accurate before proceeding."
-  }
+const WithNotes = {
+    args: {
+        ...Default.args,
+        note: "Note: Ensure your selection or input is accurate before proceeding."
+    }
 };
-export const WithErrors = {
-  args: {
-    ...Default.args,
-    validation: {
-      isValid: false,
-      message: "This field is required."
+const WithErrors = {
+    args: {
+        ...Default.args,
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
     }
-  }
 };
-export const Disabled = {
-  args: {
-    ...Default.args,
-    label: "Any field label",
-    disabled: true
-  }
+const Disabled = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        disabled: true
+    }
 };
-export const FullExample = {
-  args: {
-    ...Default.args,
-    label: "Any field label",
-    required: true,
-    description: "Provide the required information for processing your request.",
-    note: "Note: Ensure your selection or input is accurate before proceeding.",
-    validation: {
-      isValid: false,
-      message: "This field is required."
+const FullExample = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true,
+        description: "Provide the required information for processing your request.",
+        note: "Note: Ensure your selection or input is accurate before proceeding.",
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
     }
-  }
 };
-export const Documentation = {
-  render: args => {
-    const [value, setValue] = useState(args.value || "");
-    const [validation, setValidation] = useState({
-      isValid: true,
-      message: ""
-    });
-
-    // Update value when args.value changes
-    useEffect(() => {
-      setValue(args.value || "");
-    }, [args.value]);
-    const handleChange = newValue => {
-      setValue(newValue);
-
-      // Simple required validation
-      if (args.required && (!newValue || newValue.trim() === "")) {
-        setValidation({
-          isValid: false,
-          message: "Please select a color"
+const Documentation = {
+    render: (args)=>{
+        const [value, setValue] = useState(args.value || "");
+        const [validation, setValidation] = useState({
+            isValid: true,
+            message: ""
         });
-      } else {
-        setValidation({
-          isValid: true,
-          message: ""
+        useEffect(()=>{
+            setValue(args.value || "");
+        }, [
+            args.value
+        ]);
+        const handleChange = (newValue)=>{
+            setValue(newValue);
+            args.required && (!newValue || "" === newValue.trim()) ? setValidation({
+                isValid: false,
+                message: "Please select a color"
+            }) : setValidation({
+                isValid: true,
+                message: ""
+            });
+        };
+        useEffect(()=>{
+            args.required && (!value || "" === value.trim()) ? setValidation({
+                isValid: false,
+                message: "Please select a color"
+            }) : setValidation({
+                isValid: true,
+                message: ""
+            });
+        }, [
+            args.required,
+            value
+        ]);
+        return /*#__PURE__*/ react.createElement(ColorPicker, {
+            ...args,
+            value: value,
+            onChange: handleChange,
+            validation: validation,
+            required: args.required
         });
-      }
-    };
-
-    // Validate on required change or value change
-    useEffect(() => {
-      if (args.required && (!value || value.trim() === "")) {
-        setValidation({
-          isValid: false,
-          message: "Please select a color"
-        });
-      } else {
-        setValidation({
-          isValid: true,
-          message: ""
-        });
-      }
-    }, [args.required, value]);
-    return /*#__PURE__*/React.createElement(ColorPicker, Object.assign({}, args, {
-      value: value,
-      onChange: handleChange,
-      validation: validation,
-      required: args.required
-    }));
-  },
-  args: {
-    label: "Brand Color",
-    required: true,
-    disabled: false,
-    description: "Select your primary brand color",
-    note: "Note: Choose a color that aligns with your brand identity",
-    value: "#4285F4",
-    validation: undefined
-  },
-  argTypes: {
-    label: {
-      description: "Label text for the color picker",
-      control: "text"
-    },
-    required: {
-      description: "Makes the field required when set to true",
-      control: "boolean"
-    },
-    disabled: {
-      description: "Disables the color picker when set to true",
-      control: "boolean"
-    },
-    description: {
-      description: "Additional description text below the field",
-      control: "text"
-    },
-    note: {
-      description: "Additional note text below the field",
-      control: "text"
-    },
-    value: {
-      description: "The selected color value (hex, RGB, or named color)",
-      control: "color"
     },
-    validation: {
-      description: "Object containing validation state and message. Please refer to the example code for details on usage."
+    args: {
+        label: "Brand Color",
+        required: true,
+        disabled: false,
+        description: "Select your primary brand color",
+        note: "Note: Choose a color that aligns with your brand identity",
+        value: "#4285F4",
+        validation: void 0
     },
-    onChange: {
-      description: "Function called when the color changes"
+    argTypes: {
+        label: {
+            description: "Label text for the color picker",
+            control: "text"
+        },
+        required: {
+            description: "Makes the field required when set to true",
+            control: "boolean"
+        },
+        disabled: {
+            description: "Disables the color picker when set to true",
+            control: "boolean"
+        },
+        description: {
+            description: "Additional description text below the field",
+            control: "text"
+        },
+        note: {
+            description: "Additional note text below the field",
+            control: "text"
+        },
+        value: {
+            description: "The selected color value (hex, RGB, or named color)",
+            control: "color"
+        },
+        validation: {
+            description: "Object containing validation state and message. Please refer to the example code for details on usage."
+        },
+        onChange: {
+            description: "Function called when the color changes"
+        }
     }
-  }
 };
+export default ColorPicker_stories;
+export { Default, Disabled, Documentation, FullExample, WithDescription, WithErrors, WithLabel, WithLabelRequired, WithNotes };
 
 //# sourceMappingURL=ColorPicker.stories.js.map

package/ColorPicker/ColorPicker.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","useEffect","ColorPicker","meta","title","component","argTypes","onChange","action","disabled","control","defaultValue","parameters","layout","render","args","value","setValue","createElement","Object","assign","Default","WithLabel","label","WithLabelRequired","required","WithDescription","description","WithNotes","note","WithErrors","validation","isValid","message","Disabled","FullExample","Documentation","setValidation","handleChange","newValue","trim","undefined"],"sources":["ColorPicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ColorPicker } from \"./ColorPicker.js\";\n\nconst meta: Meta<typeof ColorPicker> = {\n    title: \"Components/Form/ColorPicker\",\n    component: ColorPicker,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <ColorPicker {...args} value={value} onChange={setValue} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof ColorPicker>;\n\nexport const Default: Story = {};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = useState(args.value || \"\");\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setValue(args.value || \"\");\n        }, [args.value]);\n\n        const handleChange = (newValue: string) => {\n            setValue(newValue);\n\n            // Simple required validation\n            if (args.required && (!newValue || newValue.trim() === \"\")) {\n                setValidation({ isValid: false, message: \"Please select a color\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && (!value || value.trim() === \"\")) {\n                setValidation({ isValid: false, message: \"Please select a color\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, value]);\n\n        return (\n            <ColorPicker\n                {...args}\n                value={value}\n                onChange={handleChange}\n                validation={validation}\n                required={args.required}\n            />\n        );\n    },\n    args: {\n        label: \"Brand Color\",\n        required: true,\n        disabled: false,\n        description: \"Select your primary brand color\",\n        note: \"Note: Choose a color that aligns with your brand identity\",\n        value: \"#4285F4\",\n        validation: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the color picker\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the color picker when set to true\",\n            control: \"boolean\"\n        },\n        description: {\n            description: \"Additional description text below the field\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the field\",\n            control: \"text\"\n        },\n        value: {\n            description: \"The selected color value (hex, RGB, or named color)\",\n            control: \"color\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onChange: {\n            description: \"Function called when the color changes\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ColorPicker/ColorPicker.stories.js","sources":["../../src/ColorPicker/ColorPicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ColorPicker } from \"./ColorPicker.js\";\n\nconst meta: Meta<typeof ColorPicker> = {\n    title: \"Components/Form/ColorPicker\",\n    component: ColorPicker,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <ColorPicker {...args} value={value} onChange={setValue} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof ColorPicker>;\n\nexport const Default: Story = {};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = useState(args.value || \"\");\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setValue(args.value || \"\");\n        }, [args.value]);\n\n        const handleChange = (newValue: string) => {\n            setValue(newValue);\n\n            // Simple required validation\n            if (args.required && (!newValue || newValue.trim() === \"\")) {\n                setValidation({ isValid: false, message: \"Please select a color\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && (!value || value.trim() === \"\")) {\n                setValidation({ isValid: false, message: \"Please select a color\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, value]);\n\n        return (\n            <ColorPicker\n                {...args}\n                value={value}\n                onChange={handleChange}\n                validation={validation}\n                required={args.required}\n            />\n        );\n    },\n    args: {\n        label: \"Brand Color\",\n        required: true,\n        disabled: false,\n        description: \"Select your primary brand color\",\n        note: \"Note: Choose a color that aligns with your brand identity\",\n        value: \"#4285F4\",\n        validation: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the color picker\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the color picker when set to true\",\n            control: \"boolean\"\n        },\n        description: {\n            description: \"Additional description text below the field\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the field\",\n            control: \"text\"\n        },\n        value: {\n            description: \"The selected color value (hex, RGB, or named color)\",\n            control: \"color\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onChange: {\n            description: \"Function called when the color changes\"\n        }\n    }\n};\n"],"names":["meta","ColorPicker","args","value","setValue","useState","Default","WithLabel","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","validation","setValidation","useEffect","handleChange","newValue","undefined"],"mappings":"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"}

package/ColorPicker/index.js

@@ -1,4 +1,2 @@
 export * from "./ColorPicker.js";
 export * from "./primitives/index.js";
-
-//# sourceMappingURL=index.js.map

package/ColorPicker/primitives/ColorPickerPrimitive.js

@@ -1,75 +1,68 @@
-import React from "react";
+import react from "react";
 import { SketchPicker } from "react-color";
 import { useColorPicker } from "./useColorPicker.js";
 import { inputVariants } from "../../Input/index.js";
 import { PopoverPrimitive } from "../../Popover/index.js";
 import { cn, cva, makeDecoratable } from "../../utils.js";
 const colorPickerVariants = cva("cursor-pointer", {
-  variants: {
-    size: {
-      md: ["size-8", "p-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] "],
-      lg: ["size-10", "p-[calc(var(--padding-sm-plus)-(var(--border-width-sm)))]"],
-      xl: ["size-14", "p-[calc(var(--padding-md)-(var(--border-width-sm)))]"]
+    variants: {
+        size: {
+            md: [
+                "size-8",
+                "p-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] "
+            ],
+            lg: [
+                "size-10",
+                "p-[calc(var(--padding-sm-plus)-(var(--border-width-sm)))]"
+            ],
+            xl: [
+                "size-14",
+                "p-[calc(var(--padding-md)-(var(--border-width-sm)))]"
+            ]
+        },
+        disabled: {
+            true: "pointer-events-none"
+        }
     },
-    disabled: {
-      true: "pointer-events-none"
+    defaultVariants: {
+        size: "lg"
     }
-  },
-  defaultVariants: {
-    size: "lg"
-  }
 });
-const DecoratableColorPickerPrimitive = ({
-  align,
-  disabled,
-  invalid,
-  size,
-  variant,
-  value,
-  onOpenChange,
-  onChange,
-  onChangeComplete,
-  ...props
-}) => {
-  const {
-    vm,
-    setColor,
-    commitColor,
-    setOpen
-  } = useColorPicker({
-    value,
-    onOpenChange,
-    onChange,
-    onChangeComplete
-  });
-  return /*#__PURE__*/React.createElement("div", props, /*#__PURE__*/React.createElement(PopoverPrimitive, {
-    open: vm.open,
-    onOpenChange: setOpen
-  }, /*#__PURE__*/React.createElement(PopoverPrimitive.Trigger, {
-    asChild: true
-  }, /*#__PURE__*/React.createElement("div", {
-    "data-disabled": disabled,
-    className: cn(inputVariants({
-      size,
-      variant,
-      invalid
-    }), colorPickerVariants({
-      size,
-      disabled
-    }))
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "rounded-xs size-full",
-    style: {
-      backgroundColor: vm.value
-    }
-  }))), /*#__PURE__*/React.createElement(PopoverPrimitive.Content, {
-    align: align,
-    onEscapeKeyDown: () => setOpen(false)
-  }, /*#__PURE__*/React.createElement(SketchPicker, {
-    color: vm.value,
-    onChange: setColor,
-    onChangeComplete: commitColor
-  }))));
+const DecoratableColorPickerPrimitive = ({ align, disabled, invalid, size, variant, value, onOpenChange, onChange, onChangeComplete, ...props })=>{
+    const { vm, setColor, commitColor, setOpen } = useColorPicker({
+        value,
+        onOpenChange,
+        onChange,
+        onChangeComplete
+    });
+    return /*#__PURE__*/ react.createElement("div", props, /*#__PURE__*/ react.createElement(PopoverPrimitive, {
+        open: vm.open,
+        onOpenChange: setOpen
+    }, /*#__PURE__*/ react.createElement(PopoverPrimitive.Trigger, {
+        asChild: true
+    }, /*#__PURE__*/ react.createElement("div", {
+        "data-disabled": disabled,
+        className: cn(inputVariants({
+            size,
+            variant,
+            invalid
+        }), colorPickerVariants({
+            size,
+            disabled
+        }))
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "rounded-xs size-full",
+        style: {
+            backgroundColor: vm.value
+        }
+    }))), /*#__PURE__*/ react.createElement(PopoverPrimitive.Content, {
+        align: align,
+        onEscapeKeyDown: ()=>setOpen(false)
+    }, /*#__PURE__*/ react.createElement(SketchPicker, {
+        color: vm.value,
+        onChange: setColor,
+        onChangeComplete: commitColor
+    }))));
 };
 const ColorPickerPrimitive = makeDecoratable("ColorPickerPrimitive", DecoratableColorPickerPrimitive);
 export { ColorPickerPrimitive };

package/ColorPicker/primitives/ColorPickerPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","SketchPicker","useColorPicker","inputVariants","PopoverPrimitive","cn","cva","makeDecoratable","colorPickerVariants","variants","size","md","lg","xl","disabled","true","defaultVariants","DecoratableColorPickerPrimitive","align","invalid","variant","value","onOpenChange","onChange","onChangeComplete","props","vm","setColor","commitColor","setOpen","createElement","open","Trigger","asChild","className","style","backgroundColor","Content","onEscapeKeyDown","color","ColorPickerPrimitive"],"sources":["ColorPickerPrimitive.tsx"],"sourcesContent":["import React from \"react\";\nimport { SketchPicker } from \"react-color\";\nimport { useColorPicker } from \"./useColorPicker.js\";\nimport { type InputPrimitiveProps, inputVariants } from \"~/Input/index.js\";\nimport { PopoverPrimitive, type PopoverPrimitiveContentProps } from \"~/Popover/index.js\";\nimport { cn, cva, makeDecoratable } from \"~/utils.js\";\n\nconst colorPickerVariants = cva(\"cursor-pointer\", {\n    variants: {\n        size: {\n            md: [\"size-8\", \"p-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] \"],\n            lg: [\"size-10\", \"p-[calc(var(--padding-sm-plus)-(var(--border-width-sm)))]\"],\n            xl: [\"size-14\", \"p-[calc(var(--padding-md)-(var(--border-width-sm)))]\"]\n        },\n        disabled: {\n            true: \"pointer-events-none\"\n        }\n    },\n    defaultVariants: {\n        size: \"lg\"\n    }\n});\n\ninterface ColorPickerPrimitiveProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n    /**\n     * Callback triggered when the open state changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    /**\n     * Callback triggered when the value changes.\n     */\n    onChange?: (value: string) => void;\n    /**\n     * Callback triggered when the color selection is complete.\n     * This is called after the user has finished selecting a color.\n     */\n    onChangeComplete?: (value: string) => void;\n    /**\n     * Optional selected value.\n     */\n    value?: string;\n    /**\n     * If true, the color picker will be disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Popover alignment.\n     */\n    align?: PopoverPrimitiveContentProps[\"align\"];\n    /**\n     * Size of the input field.\n     * Refer to `InputPrimitiveProps[\"size\"]` for possible values.\n     */\n    size?: InputPrimitiveProps[\"size\"];\n    /**\n     * Variant of the input field.\n     * Refer to `InputPrimitiveProps[\"variant\"]` for possible values.\n     */\n    variant?: InputPrimitiveProps[\"variant\"];\n    /**\n     * Indicates if the input field is invalid.\n     * Refer to `InputPrimitiveProps[\"invalid\"]` for possible values.\n     */\n    invalid?: InputPrimitiveProps[\"invalid\"];\n}\n\nconst DecoratableColorPickerPrimitive = ({\n    align,\n    disabled,\n    invalid,\n    size,\n    variant,\n    value,\n    onOpenChange,\n    onChange,\n    onChangeComplete,\n    ...props\n}: ColorPickerPrimitiveProps) => {\n    const { vm, setColor, commitColor, setOpen } = useColorPicker({\n        value,\n        onOpenChange,\n        onChange,\n        onChangeComplete\n    });\n\n    return (\n        <div {...props}>\n            <PopoverPrimitive open={vm.open} onOpenChange={setOpen}>\n                <PopoverPrimitive.Trigger asChild>\n                    <div\n                        data-disabled={disabled}\n                        className={cn(\n                            inputVariants({\n                                size,\n                                variant,\n                                invalid\n                            }),\n                            colorPickerVariants({ size, disabled })\n                        )}\n                    >\n                        <div\n                            className={\"rounded-xs size-full\"}\n                            style={{ backgroundColor: vm.value }}\n                        />\n                    </div>\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Content align={align} onEscapeKeyDown={() => setOpen(false)}>\n                    <SketchPicker\n                        color={vm.value}\n                        onChange={setColor}\n                        onChangeComplete={commitColor}\n                    />\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive>\n        </div>\n    );\n};\n\nconst ColorPickerPrimitive = makeDecoratable(\n    \"ColorPickerPrimitive\",\n    DecoratableColorPickerPrimitive\n);\n\nexport { ColorPickerPrimitive, type ColorPickerPrimitiveProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY,QAAQ,aAAa;AAC1C,SAASC,cAAc;AACvB,SAAmCC,aAAa;AAChD,SAASC,gBAAgB;AACzB,SAASC,EAAE,EAAEC,GAAG,EAAEC,eAAe;AAEjC,MAAMC,mBAAmB,GAAGF,GAAG,CAAC,gBAAgB,EAAE;EAC9CG,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,CAAC,QAAQ,EAAE,4DAA4D,CAAC;MAC5EC,EAAE,EAAE,CAAC,SAAS,EAAE,2DAA2D,CAAC;MAC5EC,EAAE,EAAE,CAAC,SAAS,EAAE,sDAAsD;IAC1E,CAAC;IACDC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ,CAAC;EACDC,eAAe,EAAE;IACbN,IAAI,EAAE;EACV;AACJ,CAAC,CAAC;AA6CF,MAAMO,+BAA+B,GAAGA,CAAC;EACrCC,KAAK;EACLJ,QAAQ;EACRK,OAAO;EACPT,IAAI;EACJU,OAAO;EACPC,KAAK;EACLC,YAAY;EACZC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AACoB,CAAC,KAAK;EAC7B,MAAM;IAAEC,EAAE;IAAEC,QAAQ;IAAEC,WAAW;IAAEC;EAAQ,CAAC,GAAG3B,cAAc,CAAC;IAC1DmB,KAAK;IACLC,YAAY;IACZC,QAAQ;IACRC;EACJ,CAAC,CAAC;EAEF,oBACIxB,KAAA,CAAA8B,aAAA,QAASL,KAAK,eACVzB,KAAA,CAAA8B,aAAA,CAAC1B,gBAAgB;IAAC2B,IAAI,EAAEL,EAAE,CAACK,IAAK;IAACT,YAAY,EAAEO;EAAQ,gBACnD7B,KAAA,CAAA8B,aAAA,CAAC1B,gBAAgB,CAAC4B,OAAO;IAACC,OAAO;EAAA,gBAC7BjC,KAAA,CAAA8B,aAAA;IACI,iBAAehB,QAAS;IACxBoB,SAAS,EAAE7B,EAAE,CACTF,aAAa,CAAC;MACVO,IAAI;MACJU,OAAO;MACPD;IACJ,CAAC,CAAC,EACFX,mBAAmB,CAAC;MAAEE,IAAI;MAAEI;IAAS,CAAC,CAC1C;EAAE,gBAEFd,KAAA,CAAA8B,aAAA;IACII,SAAS,EAAE,sBAAuB;IAClCC,KAAK,EAAE;MAAEC,eAAe,EAAEV,EAAE,CAACL;IAAM;EAAE,CACxC,CACA,CACiB,CAAC,eAC3BrB,KAAA,CAAA8B,aAAA,CAAC1B,gBAAgB,CAACiC,OAAO;IAACnB,KAAK,EAAEA,KAAM;IAACoB,eAAe,EAAEA,CAAA,KAAMT,OAAO,CAAC,KAAK;EAAE,gBAC1E7B,KAAA,CAAA8B,aAAA,CAAC7B,YAAY;IACTsC,KAAK,EAAEb,EAAE,CAACL,KAAM;IAChBE,QAAQ,EAAEI,QAAS;IACnBH,gBAAgB,EAAEI;EAAY,CACjC,CACqB,CACZ,CACjB,CAAC;AAEd,CAAC;AAED,MAAMY,oBAAoB,GAAGjC,eAAe,CACxC,sBAAsB,EACtBU,+BACJ,CAAC;AAED,SAASuB,oBAAoB","ignoreList":[]}
+{"version":3,"file":"ColorPicker/primitives/ColorPickerPrimitive.js","sources":["../../../src/ColorPicker/primitives/ColorPickerPrimitive.tsx"],"sourcesContent":["import React from \"react\";\nimport { SketchPicker } from \"react-color\";\nimport { useColorPicker } from \"./useColorPicker.js\";\nimport { type InputPrimitiveProps, inputVariants } from \"~/Input/index.js\";\nimport { PopoverPrimitive, type PopoverPrimitiveContentProps } from \"~/Popover/index.js\";\nimport { cn, cva, makeDecoratable } from \"~/utils.js\";\n\nconst colorPickerVariants = cva(\"cursor-pointer\", {\n    variants: {\n        size: {\n            md: [\"size-8\", \"p-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] \"],\n            lg: [\"size-10\", \"p-[calc(var(--padding-sm-plus)-(var(--border-width-sm)))]\"],\n            xl: [\"size-14\", \"p-[calc(var(--padding-md)-(var(--border-width-sm)))]\"]\n        },\n        disabled: {\n            true: \"pointer-events-none\"\n        }\n    },\n    defaultVariants: {\n        size: \"lg\"\n    }\n});\n\ninterface ColorPickerPrimitiveProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n    /**\n     * Callback triggered when the open state changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    /**\n     * Callback triggered when the value changes.\n     */\n    onChange?: (value: string) => void;\n    /**\n     * Callback triggered when the color selection is complete.\n     * This is called after the user has finished selecting a color.\n     */\n    onChangeComplete?: (value: string) => void;\n    /**\n     * Optional selected value.\n     */\n    value?: string;\n    /**\n     * If true, the color picker will be disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Popover alignment.\n     */\n    align?: PopoverPrimitiveContentProps[\"align\"];\n    /**\n     * Size of the input field.\n     * Refer to `InputPrimitiveProps[\"size\"]` for possible values.\n     */\n    size?: InputPrimitiveProps[\"size\"];\n    /**\n     * Variant of the input field.\n     * Refer to `InputPrimitiveProps[\"variant\"]` for possible values.\n     */\n    variant?: InputPrimitiveProps[\"variant\"];\n    /**\n     * Indicates if the input field is invalid.\n     * Refer to `InputPrimitiveProps[\"invalid\"]` for possible values.\n     */\n    invalid?: InputPrimitiveProps[\"invalid\"];\n}\n\nconst DecoratableColorPickerPrimitive = ({\n    align,\n    disabled,\n    invalid,\n    size,\n    variant,\n    value,\n    onOpenChange,\n    onChange,\n    onChangeComplete,\n    ...props\n}: ColorPickerPrimitiveProps) => {\n    const { vm, setColor, commitColor, setOpen } = useColorPicker({\n        value,\n        onOpenChange,\n        onChange,\n        onChangeComplete\n    });\n\n    return (\n        <div {...props}>\n            <PopoverPrimitive open={vm.open} onOpenChange={setOpen}>\n                <PopoverPrimitive.Trigger asChild>\n                    <div\n                        data-disabled={disabled}\n                        className={cn(\n                            inputVariants({\n                                size,\n                                variant,\n                                invalid\n                            }),\n                            colorPickerVariants({ size, disabled })\n                        )}\n                    >\n                        <div\n                            className={\"rounded-xs size-full\"}\n                            style={{ backgroundColor: vm.value }}\n                        />\n                    </div>\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Content align={align} onEscapeKeyDown={() => setOpen(false)}>\n                    <SketchPicker\n                        color={vm.value}\n                        onChange={setColor}\n                        onChangeComplete={commitColor}\n                    />\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive>\n        </div>\n    );\n};\n\nconst ColorPickerPrimitive = makeDecoratable(\n    \"ColorPickerPrimitive\",\n    DecoratableColorPickerPrimitive\n);\n\nexport { ColorPickerPrimitive, type ColorPickerPrimitiveProps };\n"],"names":["colorPickerVariants","cva","DecoratableColorPickerPrimitive","align","disabled","invalid","size","variant","value","onOpenChange","onChange","onChangeComplete","props","vm","setColor","commitColor","setOpen","useColorPicker","PopoverPrimitive","cn","inputVariants","SketchPicker","ColorPickerPrimitive","makeDecoratable"],"mappings":";;;;;;AAOA,MAAMA,sBAAsBC,IAAI,kBAAkB;IAC9C,UAAU;QACN,MAAM;YACF,IAAI;gBAAC;gBAAU;aAA6D;YAC5E,IAAI;gBAAC;gBAAW;aAA4D;YAC5E,IAAI;gBAAC;gBAAW;aAAuD;QAC3E;QACA,UAAU;YACN,MAAM;QACV;IACJ;IACA,iBAAiB;QACb,MAAM;IACV;AACJ;AA6CA,MAAMC,kCAAkC,CAAC,EACrCC,KAAK,EACLC,QAAQ,EACRC,OAAO,EACPC,IAAI,EACJC,OAAO,EACPC,KAAK,EACLC,YAAY,EACZC,QAAQ,EACRC,gBAAgB,EAChB,GAAGC,OACqB;IACxB,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,OAAO,EAAE,GAAGC,eAAe;QAC1DT;QACAC;QACAC;QACAC;IACJ;IAEA,OAAO,WAAP,GACI,oBAAC,OAAQC,OAAAA,WAAAA,GACL,oBAACM,kBAAgBA;QAAC,MAAML,GAAG,IAAI;QAAE,cAAcG;qBAC3C,oBAACE,iBAAiB,OAAO;QAAC;qBACtB,oBAAC;QACG,iBAAed;QACf,WAAWe,GACPC,cAAc;YACVd;YACAC;YACAF;QACJ,IACAL,oBAAoB;YAAEM;YAAMF;QAAS;qBAGzC,oBAAC;QACG,WAAW;QACX,OAAO;YAAE,iBAAiBS,GAAG,KAAK;QAAC;wBAI/C,oBAACK,iBAAiB,OAAO;QAAC,OAAOf;QAAO,iBAAiB,IAAMa,QAAQ;qBACnE,oBAACK,cAAYA;QACT,OAAOR,GAAG,KAAK;QACf,UAAUC;QACV,kBAAkBC;;AAM1C;AAEA,MAAMO,uBAAuBC,gBACzB,wBACArB"}