@webiny/admin-ui 0.0.0-unstable.a4637c5ce6 → 0.0.0-unstable.a4f3e4ea8b

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\";\nimport { ColorPicker } from \"./ColorPicker\";\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            control: \"none\"\n        },\n        onChange: {\n            description: \"Function called when the color changes\",\n            control: \"none\"\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\";\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.d.ts

@@ -1,2 +1,2 @@
-export * from "./ColorPicker";
-export * from "./primitives";
+export * from "./ColorPicker.js";
+export * from "./primitives/index.js";

package/ColorPicker/index.js

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

package/ColorPicker/primitives/ColorPickerPrimitive.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { type InputPrimitiveProps } from "../../Input";
-import { type PopoverPrimitiveContentProps } from "../../Popover";
+import { type InputPrimitiveProps } from "../../Input/index.js";
+import { type PopoverPrimitiveContentProps } from "../../Popover/index.js";
 interface ColorPickerPrimitiveProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
     /**
      * Callback triggered when the open state changes.
@@ -43,21 +43,22 @@ interface ColorPickerPrimitiveProps extends Omit<React.HTMLAttributes<HTMLDivEle
      */
     invalid?: InputPrimitiveProps["invalid"];
 }
-declare const ColorPickerPrimitive: (({ align, disabled, invalid, size, variant, value, onOpenChange, onChange, onChangeComplete, ...props }: ColorPickerPrimitiveProps) => React.JSX.Element) & {
-    original: ({ align, disabled, invalid, size, variant, value, onOpenChange, onChange, onChangeComplete, ...props }: ColorPickerPrimitiveProps) => React.JSX.Element;
+declare const DecoratableColorPickerPrimitive: ({ align, disabled, invalid, size, variant, value, onOpenChange, onChange, onChangeComplete, ...props }: ColorPickerPrimitiveProps) => React.JSX.Element;
+declare const ColorPickerPrimitive: typeof DecoratableColorPickerPrimitive & {
+    original: typeof DecoratableColorPickerPrimitive;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ align, disabled, invalid, size, variant, value, onOpenChange, onChange, onChangeComplete, ...props }: ColorPickerPrimitiveProps) => React.JSX.Element) & {
-        original: ({ align, disabled, invalid, size, variant, value, onOpenChange, onChange, onChangeComplete, ...props }: ColorPickerPrimitiveProps) => React.JSX.Element;
+    original: typeof DecoratableColorPickerPrimitive & {
+        original: typeof DecoratableColorPickerPrimitive;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ align, disabled, invalid, size, variant, value, onOpenChange, onChange, onChangeComplete, ...props }: ColorPickerPrimitiveProps) => React.JSX.Element) & {
-        original: ({ align, disabled, invalid, size, variant, value, onOpenChange, onChange, onChangeComplete, ...props }: ColorPickerPrimitiveProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableColorPickerPrimitive & {
+        original: typeof DecoratableColorPickerPrimitive;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

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";
-import { inputVariants } from "../../Input";
-import { PopoverPrimitive } from "../../Popover";
-import { cn, cva, makeDecoratable } from "../../utils";
-const colorPickerVariants = cva("wby-cursor-pointer", {
-  variants: {
-    size: {
-      md: ["wby-size-8", "wby-p-[calc(theme(padding.xs-plus)-theme(borderWidth.sm))] "],
-      lg: ["wby-size-10", "wby-p-[calc(theme(padding.sm-plus)-theme(borderWidth.sm))]"],
-      xl: ["wby-size-14", "wby-p-[calc(theme(padding.md)-theme(borderWidth.sm))]"]
+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)))]"
+            ]
+        },
+        disabled: {
+            true: "pointer-events-none"
+        }
     },
-    disabled: {
-      true: "wby-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: "wby-rounded-xs wby-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\";\nimport { type InputPrimitiveProps, inputVariants } from \"~/Input\";\nimport { PopoverPrimitive, type PopoverPrimitiveContentProps } from \"~/Popover\";\nimport { cn, cva, makeDecoratable } from \"~/utils\";\n\nconst colorPickerVariants = cva(\"wby-cursor-pointer\", {\n    variants: {\n        size: {\n            md: [\"wby-size-8\", \"wby-p-[calc(theme(padding.xs-plus)-theme(borderWidth.sm))] \"],\n            lg: [\"wby-size-10\", \"wby-p-[calc(theme(padding.sm-plus)-theme(borderWidth.sm))]\"],\n            xl: [\"wby-size-14\", \"wby-p-[calc(theme(padding.md)-theme(borderWidth.sm))]\"]\n        },\n        disabled: {\n            true: \"wby-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={\"wby-rounded-xs wby-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,oBAAoB,EAAE;EAClDG,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,CAAC,YAAY,EAAE,6DAA6D,CAAC;MACjFC,EAAE,EAAE,CAAC,aAAa,EAAE,4DAA4D,CAAC;MACjFC,EAAE,EAAE,CAAC,aAAa,EAAE,uDAAuD;IAC/E,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,8BAA+B;IAC1CC,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"}

package/ColorPicker/primitives/ColorPickerPrimitive.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { ColorPickerPrimitive } from "./ColorPickerPrimitive";
+import { ColorPickerPrimitive } from "./ColorPickerPrimitive.js";
 declare const meta: Meta<typeof ColorPickerPrimitive>;
 export default meta;
 type Story = StoryObj<typeof ColorPickerPrimitive>;

package/ColorPicker/primitives/ColorPickerPrimitive.stories.js

@@ -1,131 +1,134 @@
-import React, { useState } from "react";
-import { ColorPickerPrimitive } from "./ColorPickerPrimitive";
+import react, { useState } from "react";
+import { ColorPickerPrimitive } from "./ColorPickerPrimitive.js";
 const meta = {
-  title: "Components/Form Primitives/ColorPicker",
-  component: ColorPickerPrimitive,
-  argTypes: {
-    onChange: {
-      action: "onChange"
+    title: "Components/Form Primitives/ColorPicker",
+    component: ColorPickerPrimitive,
+    argTypes: {
+        onChange: {
+            action: "onChange"
+        },
+        onChangeComplete: {
+            action: "onChangeComplete"
+        },
+        onOpenChange: {
+            action: "onOpenChange"
+        }
     },
-    onChangeComplete: {
-      action: "onChangeComplete"
+    parameters: {
+        layout: "padded"
     },
-    onOpenChange: {
-      action: "onOpenChange"
-    }
-  },
-  parameters: {
-    layout: "padded"
-  },
-  render: args => {
-    const [value, setValue] = useState(args.value);
-    return /*#__PURE__*/React.createElement("div", {
-      className: "wby-w-full"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "wby-flex wby-items-center wby-justify-center wby-mb-4"
-    }, /*#__PURE__*/React.createElement(ColorPickerPrimitive, Object.assign({}, args, {
-      value: value,
-      onChange: value => console.log("Value changed:", value),
-      onChangeComplete: value => {
-        console.log("Value change complete:", value);
-        setValue(value);
-      }
-    }))), /*#__PURE__*/React.createElement("div", {
-      className: "wby-text-center"
-    }, "Current selected value: ", /*#__PURE__*/React.createElement("pre", null, value)));
-  }
-};
-export default meta;
-export const Default = {};
-export const MediumSize = {
-  args: {
-    size: "md"
-  }
-};
-export const LargeSize = {
-  args: {
-    size: "lg"
-  }
-};
-export const ExtraLargeSize = {
-  args: {
-    size: "xl"
-  }
-};
-export const PrimaryVariant = {
-  args: {
-    variant: "primary"
-  }
-};
-export const PrimaryVariantDisabled = {
-  args: {
-    ...PrimaryVariant.args,
-    disabled: true
-  }
-};
-export const PrimaryVariantInvalid = {
-  args: {
-    ...PrimaryVariant.args,
-    invalid: true
-  }
-};
-export const SecondaryVariant = {
-  args: {
-    variant: "secondary"
-  }
-};
-export const SecondaryVariantDisabled = {
-  args: {
-    ...SecondaryVariant.args,
-    disabled: true
-  }
-};
-export const SecondaryVariantInvalid = {
-  args: {
-    ...SecondaryVariant.args,
-    invalid: true
-  }
-};
-export const GhostVariant = {
-  args: {
-    variant: "ghost"
-  }
-};
-export const GhostVariantDisabled = {
-  args: {
-    ...GhostVariant.args,
-    disabled: true
-  }
-};
-export const GhostVariantInvalid = {
-  args: {
-    ...GhostVariant.args,
-    invalid: true
-  }
-};
-export const WithDefaultValue = {
-  args: {
-    ...Default.args,
-    value: "#ff0000"
-  }
-};
-export const WithStartAlign = {
-  args: {
-    ...Default.args,
-    align: "start"
-  }
-};
-export const WithCenterAlign = {
-  args: {
-    ...Default.args,
-    align: "center"
-  }
-};
-export const WithEndAlign = {
-  args: {
-    ...Default.args,
-    align: "end"
-  }
+    render: (args)=>{
+        const [value, setValue] = useState(args.value);
+        return /*#__PURE__*/ react.createElement("div", {
+            className: "w-full"
+        }, /*#__PURE__*/ react.createElement("div", {
+            className: "flex items-center justify-center mb-4"
+        }, /*#__PURE__*/ react.createElement(ColorPickerPrimitive, {
+            ...args,
+            value: value,
+            onChange: (value)=>console.log("Value changed:", value),
+            onChangeComplete: (value)=>{
+                console.log("Value change complete:", value);
+                setValue(value);
+            }
+        })), /*#__PURE__*/ react.createElement("div", {
+            className: "text-center"
+        }, "Current selected value: ", /*#__PURE__*/ react.createElement("pre", null, value)));
+    }
+};
+const ColorPickerPrimitive_stories = meta;
+const Default = {};
+const MediumSize = {
+    args: {
+        size: "md"
+    }
+};
+const LargeSize = {
+    args: {
+        size: "lg"
+    }
+};
+const ExtraLargeSize = {
+    args: {
+        size: "xl"
+    }
+};
+const PrimaryVariant = {
+    args: {
+        variant: "primary"
+    }
+};
+const PrimaryVariantDisabled = {
+    args: {
+        ...PrimaryVariant.args,
+        disabled: true
+    }
+};
+const PrimaryVariantInvalid = {
+    args: {
+        ...PrimaryVariant.args,
+        invalid: true
+    }
+};
+const SecondaryVariant = {
+    args: {
+        variant: "secondary"
+    }
+};
+const SecondaryVariantDisabled = {
+    args: {
+        ...SecondaryVariant.args,
+        disabled: true
+    }
+};
+const SecondaryVariantInvalid = {
+    args: {
+        ...SecondaryVariant.args,
+        invalid: true
+    }
+};
+const GhostVariant = {
+    args: {
+        variant: "ghost"
+    }
+};
+const GhostVariantDisabled = {
+    args: {
+        ...GhostVariant.args,
+        disabled: true
+    }
+};
+const GhostVariantInvalid = {
+    args: {
+        ...GhostVariant.args,
+        invalid: true
+    }
+};
+const WithDefaultValue = {
+    args: {
+        ...Default.args,
+        value: "#ff0000"
+    }
+};
+const WithStartAlign = {
+    args: {
+        ...Default.args,
+        align: "start"
+    }
+};
+const WithCenterAlign = {
+    args: {
+        ...Default.args,
+        align: "center"
+    }
+};
+const WithEndAlign = {
+    args: {
+        ...Default.args,
+        align: "end"
+    }
 };
+export default ColorPickerPrimitive_stories;
+export { Default, ExtraLargeSize, GhostVariant, GhostVariantDisabled, GhostVariantInvalid, LargeSize, MediumSize, PrimaryVariant, PrimaryVariantDisabled, PrimaryVariantInvalid, SecondaryVariant, SecondaryVariantDisabled, SecondaryVariantInvalid, WithCenterAlign, WithDefaultValue, WithEndAlign, WithStartAlign };
 
 //# sourceMappingURL=ColorPickerPrimitive.stories.js.map

package/ColorPicker/primitives/ColorPickerPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","ColorPickerPrimitive","meta","title","component","argTypes","onChange","action","onChangeComplete","onOpenChange","parameters","layout","render","args","value","setValue","createElement","className","Object","assign","console","log","Default","MediumSize","size","LargeSize","ExtraLargeSize","PrimaryVariant","variant","PrimaryVariantDisabled","disabled","PrimaryVariantInvalid","invalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","WithDefaultValue","WithStartAlign","align","WithCenterAlign","WithEndAlign"],"sources":["ColorPickerPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ColorPickerPrimitive } from \"./ColorPickerPrimitive\";\n\nconst meta: Meta<typeof ColorPickerPrimitive> = {\n    title: \"Components/Form Primitives/ColorPicker\",\n    component: ColorPickerPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onChangeComplete: { action: \"onChangeComplete\" },\n        onOpenChange: { action: \"onOpenChange\" }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"wby-w-full\"}>\n                <div className={\"wby-flex wby-items-center wby-justify-center wby-mb-4\"}>\n                    <ColorPickerPrimitive\n                        {...args}\n                        value={value}\n                        onChange={value => console.log(\"Value changed:\", value)}\n                        onChangeComplete={value => {\n                            console.log(\"Value change complete:\", value);\n                            setValue(value);\n                        }}\n                    />\n                </div>\n                <div className={\"wby-text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof ColorPickerPrimitive>;\n\nexport const Default: Story = {};\n\nexport const MediumSize: Story = {\n    args: {\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        size: \"xl\"\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        variant: \"primary\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        variant: \"secondary\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        variant: \"ghost\"\n    }\n};\n\nexport const GhostVariantDisabled: Story = {\n    args: {\n        ...GhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const GhostVariantInvalid: Story = {\n    args: {\n        ...GhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const WithDefaultValue: Story = {\n    args: {\n        ...Default.args,\n        value: \"#ff0000\"\n    }\n};\n\nexport const WithStartAlign: Story = {\n    args: {\n        ...Default.args,\n        align: \"start\"\n    }\n};\n\nexport const WithCenterAlign: Story = {\n    args: {\n        ...Default.args,\n        align: \"center\"\n    }\n};\n\nexport const WithEndAlign: Story = {\n    args: {\n        ...Default.args,\n        align: \"end\"\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ColorPicker/primitives/ColorPickerPrimitive.stories.js","sources":["../../../src/ColorPicker/primitives/ColorPickerPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ColorPickerPrimitive } from \"./ColorPickerPrimitive.js\";\n\nconst meta: Meta<typeof ColorPickerPrimitive> = {\n    title: \"Components/Form Primitives/ColorPicker\",\n    component: ColorPickerPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onChangeComplete: { action: \"onChangeComplete\" },\n        onOpenChange: { action: \"onOpenChange\" }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <div className={\"flex items-center justify-center mb-4\"}>\n                    <ColorPickerPrimitive\n                        {...args}\n                        value={value}\n                        onChange={value => console.log(\"Value changed:\", value)}\n                        onChangeComplete={value => {\n                            console.log(\"Value change complete:\", value);\n                            setValue(value);\n                        }}\n                    />\n                </div>\n                <div className={\"text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof ColorPickerPrimitive>;\n\nexport const Default: Story = {};\n\nexport const MediumSize: Story = {\n    args: {\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        size: \"xl\"\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        variant: \"primary\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        variant: \"secondary\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        variant: \"ghost\"\n    }\n};\n\nexport const GhostVariantDisabled: Story = {\n    args: {\n        ...GhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const GhostVariantInvalid: Story = {\n    args: {\n        ...GhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const WithDefaultValue: Story = {\n    args: {\n        ...Default.args,\n        value: \"#ff0000\"\n    }\n};\n\nexport const WithStartAlign: Story = {\n    args: {\n        ...Default.args,\n        align: \"start\"\n    }\n};\n\nexport const WithCenterAlign: Story = {\n    args: {\n        ...Default.args,\n        align: \"center\"\n    }\n};\n\nexport const WithEndAlign: Story = {\n    args: {\n        ...Default.args,\n        align: \"end\"\n    }\n};\n"],"names":["meta","ColorPickerPrimitive","args","value","setValue","useState","console","Default","MediumSize","LargeSize","ExtraLargeSize","PrimaryVariant","PrimaryVariantDisabled","PrimaryVariantInvalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","WithDefaultValue","WithStartAlign","WithCenterAlign","WithEndAlign"],"mappings":";;AAIA,MAAMA,OAA0C;IAC5C,OAAO;IACP,WAAWC;IACX,UAAU;QACN,UAAU;YAAE,QAAQ;QAAW;QAC/B,kBAAkB;YAAE,QAAQ;QAAmB;QAC/C,cAAc;YAAE,QAAQ;QAAe;IAC3C;IACA,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK;QAC7C,OAAO,WAAP,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC;YAAI,WAAW;yBACZ,oBAACD,sBAAoBA;YAChB,GAAGC,IAAI;YACR,OAAOC;YACP,UAAUA,CAAAA,QAASG,QAAQ,GAAG,CAAC,kBAAkBH;YACjD,kBAAkBA,CAAAA;gBACdG,QAAQ,GAAG,CAAC,0BAA0BH;gBACtCC,SAASD;YACb;2BAGR,oBAAC;YAAI,WAAW;WAAe,0CACH,oBAAC,aAAKA;IAI9C;AACJ;AAEA,qCAAeH;AAGR,MAAMO,UAAiB,CAAC;AAExB,MAAMC,aAAoB;IAC7B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,iBAAwB;IACjC,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,iBAAwB;IACjC,MAAM;QACF,SAAS;IACb;AACJ;AAEO,MAAMC,yBAAgC;IACzC,MAAM;QACF,GAAGD,eAAe,IAAI;QACtB,UAAU;IACd;AACJ;AAEO,MAAME,wBAA+B;IACxC,MAAM;QACF,GAAGF,eAAe,IAAI;QACtB,SAAS;IACb;AACJ;AAEO,MAAMG,mBAA0B;IACnC,MAAM;QACF,SAAS;IACb;AACJ;AAEO,MAAMC,2BAAkC;IAC3C,MAAM;QACF,GAAGD,iBAAiB,IAAI;QACxB,UAAU;IACd;AACJ;AAEO,MAAME,0BAAiC;IAC1C,MAAM;QACF,GAAGF,iBAAiB,IAAI;QACxB,SAAS;IACb;AACJ;AAEO,MAAMG,eAAsB;IAC/B,MAAM;QACF,SAAS;IACb;AACJ;AAEO,MAAMC,uBAA8B;IACvC,MAAM;QACF,GAAGD,aAAa,IAAI;QACpB,UAAU;IACd;AACJ;AAEO,MAAME,sBAA6B;IACtC,MAAM;QACF,GAAGF,aAAa,IAAI;QACpB,SAAS;IACb;AACJ;AAEO,MAAMG,mBAA0B;IACnC,MAAM;QACF,GAAGb,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMc,iBAAwB;IACjC,MAAM;QACF,GAAGd,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMe,kBAAyB;IAClC,MAAM;QACF,GAAGf,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMgB,eAAsB;IAC/B,MAAM;QACF,GAAGhB,QAAQ,IAAI;QACf,OAAO;IACX;AACJ"}

package/ColorPicker/primitives/index.d.ts

@@ -1 +1 @@
-export * from "./ColorPickerPrimitive";
+export * from "./ColorPickerPrimitive.js";

package/ColorPicker/primitives/index.js

@@ -1,3 +1 @@
-export * from "./ColorPickerPrimitive";
-
-//# sourceMappingURL=index.js.map
+export * from "./ColorPickerPrimitive.js";