@webiny/admin-ui 6.0.0-alpha.5 → 6.0.0-rc.0

package/ColorPicker/ColorPicker.stories.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { ColorPicker } from "./ColorPicker";
+import { ColorPicker } from "./ColorPicker.js";
 const meta = {
   title: "Components/Form/ColorPicker",
   component: ColorPicker,
@@ -164,12 +164,10 @@ export const Documentation = {
       control: "color"
     },
     validation: {
-      description: "Object containing validation state and message. Please refer to the example code for details on usage.",
-      control: "none"
+      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",
-      control: "none"
+      description: "Function called when the color changes"
     }
   }
 };

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,"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":[]}

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,4 @@
-export * from "./ColorPicker";
-export * from "./primitives";
+export * from "./ColorPicker.js";
+export * from "./primitives/index.js";
 
 //# sourceMappingURL=index.js.map

package/ColorPicker/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./ColorPicker\";\nexport * from \"./primitives\";\n"],"mappings":"AAAA;AACA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./ColorPicker.js\";\nexport * from \"./primitives/index.js\";\n"],"mappings":"AAAA;AACA","ignoreList":[]}

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.
@@ -56,7 +56,7 @@ declare const ColorPickerPrimitive: (({ align, disabled, invalid, size, variant,
     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) & {
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").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;
         originalName: string;
         displayName: string;

package/ColorPicker/primitives/ColorPickerPrimitive.js

@@ -1,18 +1,18 @@
 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", {
+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: ["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))]"]
+      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: "wby-pointer-events-none"
+      true: "pointer-events-none"
     }
   },
   defaultVariants: {
@@ -58,7 +58,7 @@ const DecoratableColorPickerPrimitive = ({
       disabled
     }))
   }, /*#__PURE__*/React.createElement("div", {
-    className: "wby-rounded-xs wby-size-full",
+    className: "rounded-xs size-full",
     style: {
       backgroundColor: vm.value
     }

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,"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":[]}

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

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { ColorPickerPrimitive } from "./ColorPickerPrimitive";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
+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,5 +1,5 @@
 import React, { useState } from "react";
-import { ColorPickerPrimitive } from "./ColorPickerPrimitive";
+import { ColorPickerPrimitive } from "./ColorPickerPrimitive.js";
 const meta = {
   title: "Components/Form Primitives/ColorPicker",
   component: ColorPickerPrimitive,
@@ -20,9 +20,9 @@ const meta = {
   render: args => {
     const [value, setValue] = useState(args.value);
     return /*#__PURE__*/React.createElement("div", {
-      className: "wby-w-full"
+      className: "w-full"
     }, /*#__PURE__*/React.createElement("div", {
-      className: "wby-flex wby-items-center wby-justify-center wby-mb-4"
+      className: "flex items-center justify-center mb-4"
     }, /*#__PURE__*/React.createElement(ColorPickerPrimitive, Object.assign({}, args, {
       value: value,
       onChange: value => console.log("Value changed:", value),
@@ -31,7 +31,7 @@ const meta = {
         setValue(value);
       }
     }))), /*#__PURE__*/React.createElement("div", {
-      className: "wby-text-center"
+      className: "text-center"
     }, "Current selected value: ", /*#__PURE__*/React.createElement("pre", null, value)));
   }
 };

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,"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-webpack5\";\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"],"mappings":"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","ignoreList":[]}

package/ColorPicker/primitives/index.d.ts

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

package/ColorPicker/primitives/index.js

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

package/ColorPicker/primitives/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./ColorPickerPrimitive\";\n"],"mappings":"AAAA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./ColorPickerPrimitive.js\";\n"],"mappings":"AAAA","ignoreList":[]}

package/ColorPicker/primitives/presenters/ColorPickerPresenter.test.js

@@ -1,7 +1,8 @@
-import { ColorPickerPresenter } from "./ColorPickerPresenter";
+import { ColorPickerPresenter } from "./ColorPickerPresenter.js";
+import { describe, expect, it, vi } from "vitest";
 describe("ColorPickerPresenter", () => {
   const presenter = new ColorPickerPresenter();
-  const onValueChange = jest.fn();
+  const onValueChange = vi.fn();
   it("should return the compatible `vm` based on params", () => {
     // `value`
     {
@@ -31,7 +32,7 @@ describe("ColorPickerPresenter", () => {
     expect(onValueChange).toHaveBeenCalledWith("#ff0000");
   });
   it("should commit the color", () => {
-    const onValueCommit = jest.fn();
+    const onValueCommit = vi.fn();
     presenter.init({
       onValueChange,
       onValueCommit
@@ -43,7 +44,7 @@ describe("ColorPickerPresenter", () => {
     expect(onValueCommit).toHaveBeenCalledWith("#00ff00");
   });
   it("should set the open state", () => {
-    const onOpenChange = jest.fn();
+    const onOpenChange = vi.fn();
     presenter.init({
       onValueChange,
       onOpenChange

package/ColorPicker/primitives/presenters/ColorPickerPresenter.test.js.map

@@ -1 +1 @@
-{"version":3,"names":["ColorPickerPresenter","describe","presenter","onValueChange","jest","fn","it","init","value","expect","vm","toBe","toEqual","open","setColor","hex","toHaveBeenCalledWith","onValueCommit","commitColor","onOpenChange","setOpen"],"sources":["ColorPickerPresenter.test.ts"],"sourcesContent":["import type { ColorState } from \"react-color\";\nimport { ColorPickerPresenter } from \"./ColorPickerPresenter\";\n\ndescribe(\"ColorPickerPresenter\", () => {\n    const presenter = new ColorPickerPresenter();\n    const onValueChange = jest.fn();\n\n    it(\"should return the compatible `vm` based on params\", () => {\n        // `value`\n        {\n            presenter.init({ value: \"#ff0000\", onValueChange });\n            expect(presenter.vm.value).toBe(\"#ff0000\");\n        }\n\n        {\n            // default: no params\n            presenter.init({ onValueChange });\n            expect(presenter.vm.value).toEqual(\"\");\n            expect(presenter.vm.open).toEqual(false);\n        }\n    });\n\n    it(\"should set the color\", () => {\n        presenter.init({ onValueChange });\n        presenter.setColor({ hex: \"#ff0000\" } as ColorState);\n        expect(presenter.vm.value).toBe(\"#ff0000\");\n        expect(onValueChange).toHaveBeenCalledWith(\"#ff0000\");\n    });\n\n    it(\"should commit the color\", () => {\n        const onValueCommit = jest.fn();\n        presenter.init({ onValueChange, onValueCommit });\n        presenter.commitColor({ hex: \"#00ff00\" } as ColorState);\n        expect(presenter.vm.value).toBe(\"#00ff00\");\n        expect(onValueCommit).toHaveBeenCalledWith(\"#00ff00\");\n    });\n\n    it(\"should set the open state\", () => {\n        const onOpenChange = jest.fn();\n        presenter.init({ onValueChange, onOpenChange });\n        presenter.setOpen(true);\n        expect(presenter.vm.open).toBe(true);\n        expect(onOpenChange).toHaveBeenCalledWith(true);\n    });\n});\n"],"mappings":"AACA,SAASA,oBAAoB;AAE7BC,QAAQ,CAAC,sBAAsB,EAAE,MAAM;EACnC,MAAMC,SAAS,GAAG,IAAIF,oBAAoB,CAAC,CAAC;EAC5C,MAAMG,aAAa,GAAGC,IAAI,CAACC,EAAE,CAAC,CAAC;EAE/BC,EAAE,CAAC,mDAAmD,EAAE,MAAM;IAC1D;IACA;MACIJ,SAAS,CAACK,IAAI,CAAC;QAAEC,KAAK,EAAE,SAAS;QAAEL;MAAc,CAAC,CAAC;MACnDM,MAAM,CAACP,SAAS,CAACQ,EAAE,CAACF,KAAK,CAAC,CAACG,IAAI,CAAC,SAAS,CAAC;IAC9C;IAEA;MACI;MACAT,SAAS,CAACK,IAAI,CAAC;QAAEJ;MAAc,CAAC,CAAC;MACjCM,MAAM,CAACP,SAAS,CAACQ,EAAE,CAACF,KAAK,CAAC,CAACI,OAAO,CAAC,EAAE,CAAC;MACtCH,MAAM,CAACP,SAAS,CAACQ,EAAE,CAACG,IAAI,CAAC,CAACD,OAAO,CAAC,KAAK,CAAC;IAC5C;EACJ,CAAC,CAAC;EAEFN,EAAE,CAAC,sBAAsB,EAAE,MAAM;IAC7BJ,SAAS,CAACK,IAAI,CAAC;MAAEJ;IAAc,CAAC,CAAC;IACjCD,SAAS,CAACY,QAAQ,CAAC;MAAEC,GAAG,EAAE;IAAU,CAAe,CAAC;IACpDN,MAAM,CAACP,SAAS,CAACQ,EAAE,CAACF,KAAK,CAAC,CAACG,IAAI,CAAC,SAAS,CAAC;IAC1CF,MAAM,CAACN,aAAa,CAAC,CAACa,oBAAoB,CAAC,SAAS,CAAC;EACzD,CAAC,CAAC;EAEFV,EAAE,CAAC,yBAAyB,EAAE,MAAM;IAChC,MAAMW,aAAa,GAAGb,IAAI,CAACC,EAAE,CAAC,CAAC;IAC/BH,SAAS,CAACK,IAAI,CAAC;MAAEJ,aAAa;MAAEc;IAAc,CAAC,CAAC;IAChDf,SAAS,CAACgB,WAAW,CAAC;MAAEH,GAAG,EAAE;IAAU,CAAe,CAAC;IACvDN,MAAM,CAACP,SAAS,CAACQ,EAAE,CAACF,KAAK,CAAC,CAACG,IAAI,CAAC,SAAS,CAAC;IAC1CF,MAAM,CAACQ,aAAa,CAAC,CAACD,oBAAoB,CAAC,SAAS,CAAC;EACzD,CAAC,CAAC;EAEFV,EAAE,CAAC,2BAA2B,EAAE,MAAM;IAClC,MAAMa,YAAY,GAAGf,IAAI,CAACC,EAAE,CAAC,CAAC;IAC9BH,SAAS,CAACK,IAAI,CAAC;MAAEJ,aAAa;MAAEgB;IAAa,CAAC,CAAC;IAC/CjB,SAAS,CAACkB,OAAO,CAAC,IAAI,CAAC;IACvBX,MAAM,CAACP,SAAS,CAACQ,EAAE,CAACG,IAAI,CAAC,CAACF,IAAI,CAAC,IAAI,CAAC;IACpCF,MAAM,CAACU,YAAY,CAAC,CAACH,oBAAoB,CAAC,IAAI,CAAC;EACnD,CAAC,CAAC;AACN,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["ColorPickerPresenter","describe","expect","it","vi","presenter","onValueChange","fn","init","value","vm","toBe","toEqual","open","setColor","hex","toHaveBeenCalledWith","onValueCommit","commitColor","onOpenChange","setOpen"],"sources":["ColorPickerPresenter.test.ts"],"sourcesContent":["import type { ColorState } from \"react-color\";\nimport { ColorPickerPresenter } from \"./ColorPickerPresenter.js\";\nimport { describe, expect, it, vi } from \"vitest\";\n\ndescribe(\"ColorPickerPresenter\", () => {\n    const presenter = new ColorPickerPresenter();\n    const onValueChange = vi.fn();\n\n    it(\"should return the compatible `vm` based on params\", () => {\n        // `value`\n        {\n            presenter.init({ value: \"#ff0000\", onValueChange });\n            expect(presenter.vm.value).toBe(\"#ff0000\");\n        }\n\n        {\n            // default: no params\n            presenter.init({ onValueChange });\n            expect(presenter.vm.value).toEqual(\"\");\n            expect(presenter.vm.open).toEqual(false);\n        }\n    });\n\n    it(\"should set the color\", () => {\n        presenter.init({ onValueChange });\n        presenter.setColor({ hex: \"#ff0000\" } as ColorState);\n        expect(presenter.vm.value).toBe(\"#ff0000\");\n        expect(onValueChange).toHaveBeenCalledWith(\"#ff0000\");\n    });\n\n    it(\"should commit the color\", () => {\n        const onValueCommit = vi.fn();\n        presenter.init({ onValueChange, onValueCommit });\n        presenter.commitColor({ hex: \"#00ff00\" } as ColorState);\n        expect(presenter.vm.value).toBe(\"#00ff00\");\n        expect(onValueCommit).toHaveBeenCalledWith(\"#00ff00\");\n    });\n\n    it(\"should set the open state\", () => {\n        const onOpenChange = vi.fn();\n        presenter.init({ onValueChange, onOpenChange });\n        presenter.setOpen(true);\n        expect(presenter.vm.open).toBe(true);\n        expect(onOpenChange).toHaveBeenCalledWith(true);\n    });\n});\n"],"mappings":"AACA,SAASA,oBAAoB;AAC7B,SAASC,QAAQ,EAAEC,MAAM,EAAEC,EAAE,EAAEC,EAAE,QAAQ,QAAQ;AAEjDH,QAAQ,CAAC,sBAAsB,EAAE,MAAM;EACnC,MAAMI,SAAS,GAAG,IAAIL,oBAAoB,CAAC,CAAC;EAC5C,MAAMM,aAAa,GAAGF,EAAE,CAACG,EAAE,CAAC,CAAC;EAE7BJ,EAAE,CAAC,mDAAmD,EAAE,MAAM;IAC1D;IACA;MACIE,SAAS,CAACG,IAAI,CAAC;QAAEC,KAAK,EAAE,SAAS;QAAEH;MAAc,CAAC,CAAC;MACnDJ,MAAM,CAACG,SAAS,CAACK,EAAE,CAACD,KAAK,CAAC,CAACE,IAAI,CAAC,SAAS,CAAC;IAC9C;IAEA;MACI;MACAN,SAAS,CAACG,IAAI,CAAC;QAAEF;MAAc,CAAC,CAAC;MACjCJ,MAAM,CAACG,SAAS,CAACK,EAAE,CAACD,KAAK,CAAC,CAACG,OAAO,CAAC,EAAE,CAAC;MACtCV,MAAM,CAACG,SAAS,CAACK,EAAE,CAACG,IAAI,CAAC,CAACD,OAAO,CAAC,KAAK,CAAC;IAC5C;EACJ,CAAC,CAAC;EAEFT,EAAE,CAAC,sBAAsB,EAAE,MAAM;IAC7BE,SAAS,CAACG,IAAI,CAAC;MAAEF;IAAc,CAAC,CAAC;IACjCD,SAAS,CAACS,QAAQ,CAAC;MAAEC,GAAG,EAAE;IAAU,CAAe,CAAC;IACpDb,MAAM,CAACG,SAAS,CAACK,EAAE,CAACD,KAAK,CAAC,CAACE,IAAI,CAAC,SAAS,CAAC;IAC1CT,MAAM,CAACI,aAAa,CAAC,CAACU,oBAAoB,CAAC,SAAS,CAAC;EACzD,CAAC,CAAC;EAEFb,EAAE,CAAC,yBAAyB,EAAE,MAAM;IAChC,MAAMc,aAAa,GAAGb,EAAE,CAACG,EAAE,CAAC,CAAC;IAC7BF,SAAS,CAACG,IAAI,CAAC;MAAEF,aAAa;MAAEW;IAAc,CAAC,CAAC;IAChDZ,SAAS,CAACa,WAAW,CAAC;MAAEH,GAAG,EAAE;IAAU,CAAe,CAAC;IACvDb,MAAM,CAACG,SAAS,CAACK,EAAE,CAACD,KAAK,CAAC,CAACE,IAAI,CAAC,SAAS,CAAC;IAC1CT,MAAM,CAACe,aAAa,CAAC,CAACD,oBAAoB,CAAC,SAAS,CAAC;EACzD,CAAC,CAAC;EAEFb,EAAE,CAAC,2BAA2B,EAAE,MAAM;IAClC,MAAMgB,YAAY,GAAGf,EAAE,CAACG,EAAE,CAAC,CAAC;IAC5BF,SAAS,CAACG,IAAI,CAAC;MAAEF,aAAa;MAAEa;IAAa,CAAC,CAAC;IAC/Cd,SAAS,CAACe,OAAO,CAAC,IAAI,CAAC;IACvBlB,MAAM,CAACG,SAAS,CAACK,EAAE,CAACG,IAAI,CAAC,CAACF,IAAI,CAAC,IAAI,CAAC;IACpCT,MAAM,CAACiB,YAAY,CAAC,CAACH,oBAAoB,CAAC,IAAI,CAAC;EACnD,CAAC,CAAC;AACN,CAAC,CAAC","ignoreList":[]}

package/ColorPicker/primitives/presenters/index.d.ts

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

package/ColorPicker/primitives/presenters/index.js

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

package/ColorPicker/primitives/presenters/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./ColorPickerPresenter\";\n"],"mappings":"AAAA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./ColorPickerPresenter.js\";\n"],"mappings":"AAAA","ignoreList":[]}

package/ColorPicker/primitives/useColorPicker.d.ts

@@ -1,4 +1,4 @@
-import type { ColorPickerPrimitiveProps } from "./ColorPickerPrimitive";
+import type { ColorPickerPrimitiveProps } from "./ColorPickerPrimitive.js";
 export declare const useColorPicker: (props: ColorPickerPrimitiveProps) => {
     vm: {
         open: boolean;

package/ColorPicker/primitives/useColorPicker.js

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { autorun } from "mobx";
-import { ColorPickerPresenter } from "./presenters";
+import { ColorPickerPresenter } from "./presenters/index.js";
 export const useColorPicker = props => {
   const params = useMemo(() => ({
     value: props.value,

package/ColorPicker/primitives/useColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useMemo","useState","autorun","ColorPickerPresenter","useColorPicker","props","params","value","onOpenChange","onValueChange","onChange","onValueCommit","onChangeComplete","presenter","init","vm","setVm","setColor","commitColor","setOpen"],"sources":["useColorPicker.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { autorun } from \"mobx\";\nimport type { ColorPickerPrimitiveProps } from \"./ColorPickerPrimitive\";\nimport type { ColorPickerPresenterParams } from \"./presenters\";\nimport { ColorPickerPresenter } from \"./presenters\";\n\nexport const useColorPicker = (props: ColorPickerPrimitiveProps) => {\n    const params: ColorPickerPresenterParams = useMemo(\n        () => ({\n            value: props.value,\n            onOpenChange: props.onOpenChange,\n            onValueChange: props.onChange,\n            onValueCommit: props.onChangeComplete\n        }),\n        [props.value, props.onOpenChange, props.onChange, props.onChangeComplete]\n    );\n\n    const presenter = useMemo(() => {\n        const presenter = new ColorPickerPresenter();\n        presenter.init(params);\n        return presenter;\n    }, []);\n\n    const [vm, setVm] = useState(presenter.vm);\n\n    useEffect(() => {\n        presenter.init(params);\n    }, [params]);\n\n    useEffect(() => {\n        return autorun(() => {\n            setVm(presenter.vm);\n        });\n    }, [presenter]);\n\n    return {\n        vm,\n        setColor: presenter.setColor,\n        commitColor: presenter.commitColor,\n        setOpen: presenter.setOpen\n    };\n};\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACpD,SAASC,OAAO,QAAQ,MAAM;AAG9B,SAASC,oBAAoB;AAE7B,OAAO,MAAMC,cAAc,GAAIC,KAAgC,IAAK;EAChE,MAAMC,MAAkC,GAAGN,OAAO,CAC9C,OAAO;IACHO,KAAK,EAAEF,KAAK,CAACE,KAAK;IAClBC,YAAY,EAAEH,KAAK,CAACG,YAAY;IAChCC,aAAa,EAAEJ,KAAK,CAACK,QAAQ;IAC7BC,aAAa,EAAEN,KAAK,CAACO;EACzB,CAAC,CAAC,EACF,CAACP,KAAK,CAACE,KAAK,EAAEF,KAAK,CAACG,YAAY,EAAEH,KAAK,CAACK,QAAQ,EAAEL,KAAK,CAACO,gBAAgB,CAC5E,CAAC;EAED,MAAMC,SAAS,GAAGb,OAAO,CAAC,MAAM;IAC5B,MAAMa,SAAS,GAAG,IAAIV,oBAAoB,CAAC,CAAC;IAC5CU,SAAS,CAACC,IAAI,CAACR,MAAM,CAAC;IACtB,OAAOO,SAAS;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM,CAACE,EAAE,EAAEC,KAAK,CAAC,GAAGf,QAAQ,CAACY,SAAS,CAACE,EAAE,CAAC;EAE1ChB,SAAS,CAAC,MAAM;IACZc,SAAS,CAACC,IAAI,CAACR,MAAM,CAAC;EAC1B,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;EAEZP,SAAS,CAAC,MAAM;IACZ,OAAOG,OAAO,CAAC,MAAM;MACjBc,KAAK,CAACH,SAAS,CAACE,EAAE,CAAC;IACvB,CAAC,CAAC;EACN,CAAC,EAAE,CAACF,SAAS,CAAC,CAAC;EAEf,OAAO;IACHE,EAAE;IACFE,QAAQ,EAAEJ,SAAS,CAACI,QAAQ;IAC5BC,WAAW,EAAEL,SAAS,CAACK,WAAW;IAClCC,OAAO,EAAEN,SAAS,CAACM;EACvB,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"names":["useEffect","useMemo","useState","autorun","ColorPickerPresenter","useColorPicker","props","params","value","onOpenChange","onValueChange","onChange","onValueCommit","onChangeComplete","presenter","init","vm","setVm","setColor","commitColor","setOpen"],"sources":["useColorPicker.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { autorun } from \"mobx\";\nimport type { ColorPickerPrimitiveProps } from \"./ColorPickerPrimitive.js\";\nimport type { ColorPickerPresenterParams } from \"./presenters/index.js\";\nimport { ColorPickerPresenter } from \"./presenters/index.js\";\n\nexport const useColorPicker = (props: ColorPickerPrimitiveProps) => {\n    const params: ColorPickerPresenterParams = useMemo(\n        () => ({\n            value: props.value,\n            onOpenChange: props.onOpenChange,\n            onValueChange: props.onChange,\n            onValueCommit: props.onChangeComplete\n        }),\n        [props.value, props.onOpenChange, props.onChange, props.onChangeComplete]\n    );\n\n    const presenter = useMemo(() => {\n        const presenter = new ColorPickerPresenter();\n        presenter.init(params);\n        return presenter;\n    }, []);\n\n    const [vm, setVm] = useState(presenter.vm);\n\n    useEffect(() => {\n        presenter.init(params);\n    }, [params]);\n\n    useEffect(() => {\n        return autorun(() => {\n            setVm(presenter.vm);\n        });\n    }, [presenter]);\n\n    return {\n        vm,\n        setColor: presenter.setColor,\n        commitColor: presenter.commitColor,\n        setOpen: presenter.setOpen\n    };\n};\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACpD,SAASC,OAAO,QAAQ,MAAM;AAG9B,SAASC,oBAAoB;AAE7B,OAAO,MAAMC,cAAc,GAAIC,KAAgC,IAAK;EAChE,MAAMC,MAAkC,GAAGN,OAAO,CAC9C,OAAO;IACHO,KAAK,EAAEF,KAAK,CAACE,KAAK;IAClBC,YAAY,EAAEH,KAAK,CAACG,YAAY;IAChCC,aAAa,EAAEJ,KAAK,CAACK,QAAQ;IAC7BC,aAAa,EAAEN,KAAK,CAACO;EACzB,CAAC,CAAC,EACF,CAACP,KAAK,CAACE,KAAK,EAAEF,KAAK,CAACG,YAAY,EAAEH,KAAK,CAACK,QAAQ,EAAEL,KAAK,CAACO,gBAAgB,CAC5E,CAAC;EAED,MAAMC,SAAS,GAAGb,OAAO,CAAC,MAAM;IAC5B,MAAMa,SAAS,GAAG,IAAIV,oBAAoB,CAAC,CAAC;IAC5CU,SAAS,CAACC,IAAI,CAACR,MAAM,CAAC;IACtB,OAAOO,SAAS;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM,CAACE,EAAE,EAAEC,KAAK,CAAC,GAAGf,QAAQ,CAACY,SAAS,CAACE,EAAE,CAAC;EAE1ChB,SAAS,CAAC,MAAM;IACZc,SAAS,CAACC,IAAI,CAACR,MAAM,CAAC;EAC1B,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;EAEZP,SAAS,CAAC,MAAM;IACZ,OAAOG,OAAO,CAAC,MAAM;MACjBc,KAAK,CAACH,SAAS,CAACE,EAAE,CAAC;IACvB,CAAC,CAAC;EACN,CAAC,EAAE,CAACF,SAAS,CAAC,CAAC;EAEf,OAAO;IACHE,EAAE;IACFE,QAAQ,EAAEJ,SAAS,CAACI,QAAQ;IAC5BC,WAAW,EAAEL,SAAS,CAACK,WAAW;IAClCC,OAAO,EAAEN,SAAS,CAACM;EACvB,CAAC;AACL,CAAC","ignoreList":[]}

package/Command/Command.d.ts

@@ -2,51 +2,12 @@ import * as React from "react";
 import { Command as CommandPrimitive } from "cmdk";
 type CommandProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive>;
 declare const Command: (({ className, ...props }: React.ComponentPropsWithoutRef<typeof CommandPrimitive>) => React.JSX.Element) & {
-    Empty: (props: Omit<{
-        children?: React.ReactNode;
-    } & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-        ref?: React.Ref<HTMLDivElement> | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>, "ref">) => React.JSX.Element;
-    Group: ({ className, ...props }: Omit<{
-        children?: React.ReactNode;
-    } & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-        ref?: React.Ref<HTMLDivElement> | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
-        heading?: React.ReactNode;
-        value?: string | undefined;
-        forceMount?: boolean | undefined;
-    } & React.RefAttributes<HTMLDivElement>, "ref">) => React.JSX.Element;
-    Input: ({ inputElement, size, inputRef, ...props }: import("./components/Input").InputProps) => React.JSX.Element;
-    Item: ({ className, children, selected, ...props }: import("./components/Item").ItemProps) => React.JSX.Element;
-    List: ({ className, ...props }: Omit<{
-        children?: React.ReactNode;
-    } & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-        ref?: React.Ref<HTMLDivElement> | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-        label?: string | undefined;
-    } & React.RefAttributes<HTMLDivElement>, "ref">) => React.JSX.Element;
-    Loading: (props: Omit<{
-        children?: React.ReactNode;
-    } & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-        ref?: React.Ref<HTMLDivElement> | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-        progress?: number | undefined;
-        label?: string | undefined;
-    } & React.RefAttributes<HTMLDivElement>, "ref">) => React.JSX.Element;
-    Separator: (props: Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-        ref?: React.Ref<HTMLDivElement> | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-        alwaysRender?: boolean | undefined;
-    } & React.RefAttributes<HTMLDivElement>, "ref">) => React.JSX.Element;
+    Empty: (props: import("./components/Empty.js").EmptyProps) => React.JSX.Element;
+    Group: ({ className, ...props }: import("./components/Group.js").GroupProps) => React.JSX.Element;
+    Input: ({ inputElement, size, inputRef, ...props }: import("./components/Input.js").InputProps) => React.JSX.Element;
+    Item: ({ className, children, selected, ...props }: import("./components/Item.js").ItemProps) => React.JSX.Element;
+    List: ({ className, ...props }: import("./components/List.js").ListProps) => React.JSX.Element;
+    Loading: (props: import("./components/Loading.js").LoadingProps) => React.JSX.Element;
+    Separator: (props: import("./components/Separator.js").SeparatorProps) => React.JSX.Element;
 };
 export { Command, type CommandProps };

package/Command/Command.js

@@ -1,12 +1,12 @@
 import * as React from "react";
 import { Command as CommandPrimitive } from "cmdk";
-import { cn, withStaticProps } from "../utils";
-import { Empty, Group, Input, Item, List, Loading, Separator } from "./components";
+import { cn, withStaticProps } from "../utils.js";
+import { Empty, Group, Input, Item, List, Loading, Separator } from "./components/index.js";
 const CommandBase = ({
   className,
   ...props
 }) => /*#__PURE__*/React.createElement(CommandPrimitive, Object.assign({
-  className: cn("wby-flex wby-h-full wby-w-full wby-flex-col wby-outline-none", className)
+  className: cn("flex h-full w-full flex-col outline-none", className)
 }, props));
 const Command = withStaticProps(CommandBase, {
   Empty,

package/Command/Command.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Command","CommandPrimitive","cn","withStaticProps","Empty","Group","Input","Item","List","Loading","Separator","CommandBase","className","props","createElement","Object","assign"],"sources":["Command.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { cn, withStaticProps } from \"~/utils\";\nimport { Empty, Group, Input, Item, List, Loading, Separator } from \"./components\";\n\ntype CommandProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive>;\n\nconst CommandBase = ({\n    className,\n    ...props\n}: React.ComponentPropsWithoutRef<typeof CommandPrimitive>) => (\n    <CommandPrimitive\n        className={cn(\"wby-flex wby-h-full wby-w-full wby-flex-col wby-outline-none\", className)}\n        {...props}\n    />\n);\n\nconst Command = withStaticProps(CommandBase, {\n    Empty,\n    Group,\n    Input,\n    Item,\n    List,\n    Loading,\n    Separator\n});\n\nexport { Command, type CommandProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,OAAO,IAAIC,gBAAgB,QAAQ,MAAM;AAClD,SAASC,EAAE,EAAEC,eAAe;AAC5B,SAASC,KAAK,EAAEC,KAAK,EAAEC,KAAK,EAAEC,IAAI,EAAEC,IAAI,EAAEC,OAAO,EAAEC,SAAS;AAI5D,MAAMC,WAAW,GAAGA,CAAC;EACjBC,SAAS;EACT,GAAGC;AACkD,CAAC,kBACtDd,KAAA,CAAAe,aAAA,CAACb,gBAAgB,EAAAc,MAAA,CAAAC,MAAA;EACbJ,SAAS,EAAEV,EAAE,CAAC,8DAA8D,EAAEU,SAAS;AAAE,GACrFC,KAAK,CACZ,CACJ;AAED,MAAMb,OAAO,GAAGG,eAAe,CAACQ,WAAW,EAAE;EACzCP,KAAK;EACLC,KAAK;EACLC,KAAK;EACLC,IAAI;EACJC,IAAI;EACJC,OAAO;EACPC;AACJ,CAAC,CAAC;AAEF,SAASV,OAAO","ignoreList":[]}
+{"version":3,"names":["React","Command","CommandPrimitive","cn","withStaticProps","Empty","Group","Input","Item","List","Loading","Separator","CommandBase","className","props","createElement","Object","assign"],"sources":["Command.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { cn, withStaticProps } from \"~/utils.js\";\nimport { Empty, Group, Input, Item, List, Loading, Separator } from \"./components/index.js\";\n\ntype CommandProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive>;\n\nconst CommandBase = ({\n    className,\n    ...props\n}: React.ComponentPropsWithoutRef<typeof CommandPrimitive>) => (\n    <CommandPrimitive\n        className={cn(\"flex h-full w-full flex-col outline-none\", className)}\n        {...props}\n    />\n);\n\nconst Command = withStaticProps(CommandBase, {\n    Empty,\n    Group,\n    Input,\n    Item,\n    List,\n    Loading,\n    Separator\n});\n\nexport { Command, type CommandProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,OAAO,IAAIC,gBAAgB,QAAQ,MAAM;AAClD,SAASC,EAAE,EAAEC,eAAe;AAC5B,SAASC,KAAK,EAAEC,KAAK,EAAEC,KAAK,EAAEC,IAAI,EAAEC,IAAI,EAAEC,OAAO,EAAEC,SAAS;AAI5D,MAAMC,WAAW,GAAGA,CAAC;EACjBC,SAAS;EACT,GAAGC;AACkD,CAAC,kBACtDd,KAAA,CAAAe,aAAA,CAACb,gBAAgB,EAAAc,MAAA,CAAAC,MAAA;EACbJ,SAAS,EAAEV,EAAE,CAAC,0CAA0C,EAAEU,SAAS;AAAE,GACjEC,KAAK,CACZ,CACJ;AAED,MAAMb,OAAO,GAAGG,eAAe,CAACQ,WAAW,EAAE;EACzCP,KAAK;EACLC,KAAK;EACLC,KAAK;EACLC,IAAI;EACJC,IAAI;EACJC,OAAO;EACPC;AACJ,CAAC,CAAC;AAEF,SAASV,OAAO","ignoreList":[]}

package/Command/components/Empty.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Command as CommandPrimitive } from "cmdk";
 const Empty = props => /*#__PURE__*/React.createElement(CommandPrimitive.Empty, Object.assign({
-  className: "wby-bg-neutral-base wby-text-neutral-strong wby-fill-neutral-xstrong wby-rounded-sm wby-p-sm wby-mx-sm wby-text-md wby-outline-none"
+  className: "bg-neutral-base text-neutral-strong fill-neutral-xstrong rounded-sm p-sm mx-sm text-md outline-none"
 }, props));
 export { Empty };
 

package/Command/components/Empty.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Command","CommandPrimitive","Empty","props","createElement","Object","assign","className"],"sources":["Empty.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Command as CommandPrimitive } from \"cmdk\";\n\ntype EmptyProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>;\n\nconst Empty = (props: EmptyProps) => (\n    <CommandPrimitive.Empty\n        className=\"wby-bg-neutral-base wby-text-neutral-strong wby-fill-neutral-xstrong wby-rounded-sm wby-p-sm wby-mx-sm wby-text-md wby-outline-none\"\n        {...props}\n    />\n);\n\nexport { Empty, type EmptyProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,OAAO,IAAIC,gBAAgB,QAAQ,MAAM;AAIlD,MAAMC,KAAK,GAAIC,KAAiB,iBAC5BJ,KAAA,CAAAK,aAAA,CAACH,gBAAgB,CAACC,KAAK,EAAAG,MAAA,CAAAC,MAAA;EACnBC,SAAS,EAAC;AAAqI,GAC3IJ,KAAK,CACZ,CACJ;AAED,SAASD,KAAK","ignoreList":[]}
+{"version":3,"names":["React","Command","CommandPrimitive","Empty","props","createElement","Object","assign","className"],"sources":["Empty.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Command as CommandPrimitive } from \"cmdk\";\n\ntype EmptyProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>;\n\nconst Empty = (props: EmptyProps) => (\n    <CommandPrimitive.Empty\n        className=\"bg-neutral-base text-neutral-strong fill-neutral-xstrong rounded-sm p-sm mx-sm text-md outline-none\"\n        {...props}\n    />\n);\n\nexport { Empty, type EmptyProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,OAAO,IAAIC,gBAAgB,QAAQ,MAAM;AAIlD,MAAMC,KAAK,GAAIC,KAAiB,iBAC5BJ,KAAA,CAAAK,aAAA,CAACH,gBAAgB,CAACC,KAAK,EAAAG,MAAA,CAAAC,MAAA;EACnBC,SAAS,EAAC;AAAqG,GAC3GJ,KAAK,CACZ,CACJ;AAED,SAASD,KAAK","ignoreList":[]}

package/Command/components/Group.js

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { Command as CommandPrimitive } from "cmdk";
-import { cn } from "../../utils";
+import { cn } from "../../utils.js";
 const Group = ({
   className,
   ...props
 }) => /*#__PURE__*/React.createElement(CommandPrimitive.Group, Object.assign({
-  className: cn("[&_[cmdk-group-heading]]:wby-px-sm [&_[cmdk-group-heading]]:wby-py-xs-plus [&_[cmdk-group-heading]]:wby-text-sm [&_[cmdk-group-heading]]:wby-font-semibold [&_[cmdk-group-heading]]:wby-text-neutral-strong", className)
+  className: cn("**:[[cmdk-group-heading]]:px-sm **:[[cmdk-group-heading]]:py-xs-plus **:[[cmdk-group-heading]]:text-sm **:[[cmdk-group-heading]]:font-semibold **:[[cmdk-group-heading]]:text-neutral-strong", className)
 }, props));
 export { Group };
 

package/Command/components/Group.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Command","CommandPrimitive","cn","Group","className","props","createElement","Object","assign"],"sources":["Group.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { cn } from \"~/utils\";\n\ntype GroupProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>;\n\nconst Group = ({ className, ...props }: GroupProps) => (\n    <CommandPrimitive.Group\n        className={cn(\n            \"[&_[cmdk-group-heading]]:wby-px-sm [&_[cmdk-group-heading]]:wby-py-xs-plus [&_[cmdk-group-heading]]:wby-text-sm [&_[cmdk-group-heading]]:wby-font-semibold [&_[cmdk-group-heading]]:wby-text-neutral-strong\",\n            className\n        )}\n        {...props}\n    />\n);\n\nexport { Group, type GroupProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,OAAO,IAAIC,gBAAgB,QAAQ,MAAM;AAClD,SAASC,EAAE;AAIX,MAAMC,KAAK,GAAGA,CAAC;EAAEC,SAAS;EAAE,GAAGC;AAAkB,CAAC,kBAC9CN,KAAA,CAAAO,aAAA,CAACL,gBAAgB,CAACE,KAAK,EAAAI,MAAA,CAAAC,MAAA;EACnBJ,SAAS,EAAEF,EAAE,CACT,6MAA6M,EAC7ME,SACJ;AAAE,GACEC,KAAK,CACZ,CACJ;AAED,SAASF,KAAK","ignoreList":[]}
+{"version":3,"names":["React","Command","CommandPrimitive","cn","Group","className","props","createElement","Object","assign"],"sources":["Group.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { cn } from \"~/utils.js\";\n\ntype GroupProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>;\n\nconst Group = ({ className, ...props }: GroupProps) => (\n    <CommandPrimitive.Group\n        className={cn(\n            \"**:[[cmdk-group-heading]]:px-sm **:[[cmdk-group-heading]]:py-xs-plus **:[[cmdk-group-heading]]:text-sm **:[[cmdk-group-heading]]:font-semibold **:[[cmdk-group-heading]]:text-neutral-strong\",\n            className\n        )}\n        {...props}\n    />\n);\n\nexport { Group, type GroupProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,OAAO,IAAIC,gBAAgB,QAAQ,MAAM;AAClD,SAASC,EAAE;AAIX,MAAMC,KAAK,GAAGA,CAAC;EAAEC,SAAS;EAAE,GAAGC;AAAkB,CAAC,kBAC9CN,KAAA,CAAAO,aAAA,CAACL,gBAAgB,CAACE,KAAK,EAAAI,MAAA,CAAAC,MAAA;EACnBJ,SAAS,EAAEF,EAAE,CACT,8LAA8L,EAC9LE,SACJ;AAAE,GACEC,KAAK,CACZ,CACJ;AAED,SAASF,KAAK","ignoreList":[]}

package/Command/components/Input.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Command as CommandPrimitive } from "cmdk";
-import type { InputPrimitiveProps } from "../../Input";
+import type { InputPrimitiveProps } from "../../Input/index.js";
 type InputProps = Omit<React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>, "size"> & InputPrimitiveProps & {
     inputElement?: React.ReactNode;
 };

package/Command/components/Input.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Command as CommandPrimitive } from "cmdk";
-import { InputPrimitive } from "../../Input";
+import { InputPrimitive } from "../../Input/index.js";
 const Input = ({
   inputElement,
   size,

package/Command/components/Input.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Command","CommandPrimitive","InputPrimitive","Input","inputElement","size","inputRef","props","createElement","Object","assign","asChild","forwardEventOnChange"],"sources":["Input.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport type { InputPrimitiveProps } from \"~/Input\";\nimport { InputPrimitive } from \"~/Input\";\n\ntype InputProps = Omit<React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>, \"size\"> &\n    InputPrimitiveProps & {\n        inputElement?: React.ReactNode;\n    };\n\nconst Input = ({ inputElement, size, inputRef, ...props }: InputProps) => {\n    return (\n        <CommandPrimitive.Input asChild {...props}>\n            {inputElement ?? (\n                <InputPrimitive size={size} forwardEventOnChange={true} inputRef={inputRef} />\n            )}\n        </CommandPrimitive.Input>\n    );\n};\n\nexport { Input, type InputProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,OAAO,IAAIC,gBAAgB,QAAQ,MAAM;AAElD,SAASC,cAAc;AAOvB,MAAMC,KAAK,GAAGA,CAAC;EAAEC,YAAY;EAAEC,IAAI;EAAEC,QAAQ;EAAE,GAAGC;AAAkB,CAAC,KAAK;EACtE,oBACIR,KAAA,CAAAS,aAAA,CAACP,gBAAgB,CAACE,KAAK,EAAAM,MAAA,CAAAC,MAAA;IAACC,OAAO;EAAA,GAAKJ,KAAK,GACpCH,YAAY,iBACTL,KAAA,CAAAS,aAAA,CAACN,cAAc;IAACG,IAAI,EAAEA,IAAK;IAACO,oBAAoB,EAAE,IAAK;IAACN,QAAQ,EAAEA;EAAS,CAAE,CAE7D,CAAC;AAEjC,CAAC;AAED,SAASH,KAAK","ignoreList":[]}
+{"version":3,"names":["React","Command","CommandPrimitive","InputPrimitive","Input","inputElement","size","inputRef","props","createElement","Object","assign","asChild","forwardEventOnChange"],"sources":["Input.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport type { InputPrimitiveProps } from \"~/Input/index.js\";\nimport { InputPrimitive } from \"~/Input/index.js\";\n\ntype InputProps = Omit<React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>, \"size\"> &\n    InputPrimitiveProps & {\n        inputElement?: React.ReactNode;\n    };\n\nconst Input = ({ inputElement, size, inputRef, ...props }: InputProps) => {\n    return (\n        <CommandPrimitive.Input asChild {...props}>\n            {inputElement ?? (\n                <InputPrimitive size={size} forwardEventOnChange={true} inputRef={inputRef} />\n            )}\n        </CommandPrimitive.Input>\n    );\n};\n\nexport { Input, type InputProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,OAAO,IAAIC,gBAAgB,QAAQ,MAAM;AAElD,SAASC,cAAc;AAOvB,MAAMC,KAAK,GAAGA,CAAC;EAAEC,YAAY;EAAEC,IAAI;EAAEC,QAAQ;EAAE,GAAGC;AAAkB,CAAC,KAAK;EACtE,oBACIR,KAAA,CAAAS,aAAA,CAACP,gBAAgB,CAACE,KAAK,EAAAM,MAAA,CAAAC,MAAA;IAACC,OAAO;EAAA,GAAKJ,KAAK,GACpCH,YAAY,iBACTL,KAAA,CAAAS,aAAA,CAACN,cAAc;IAACG,IAAI,EAAEA,IAAK;IAACO,oBAAoB,EAAE,IAAK;IAACN,QAAQ,EAAEA;EAAS,CAAE,CAE7D,CAAC;AAEjC,CAAC;AAED,SAASH,KAAK","ignoreList":[]}

package/Command/components/Item.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Command as CommandPrimitive } from "cmdk";
-import { type VariantProps } from "../../utils";
+import { type VariantProps } from "../../utils.js";
 declare const commandItemVariants: (props?: ({
     selected?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/Command/components/Item.js

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { ReactComponent as Check } from "@webiny/icons/check.svg";
 import { Command as CommandPrimitive } from "cmdk";
-import { cn, cva } from "../../utils";
-const commandItemVariants = cva(["wby-flex wby-items-center wby-justify-between wby-gap-sm-extra wby-cursor-default wby-select-none wby-rounded-sm wby-p-sm wby-mx-sm wby-text-md wby-outline-none wby-overflow-hidden", "wby-bg-neutral-base wby-text-neutral-primary wby-fill-neutral-xstrong", "data-[disabled=true]:wby-text-neutral-disabled data-[disabled=true]:wby-cursor-not-allowed", "data-[selected=true]:wby-bg-neutral-dimmed"], {
+import { cn, cva } from "../../utils.js";
+const commandItemVariants = cva(["flex items-center justify-between gap-sm-extra cursor-default select-none rounded-sm p-sm mx-sm text-md outline-none overflow-hidden", "bg-neutral-base text-neutral-primary fill-neutral-xstrong", "data-[disabled=true]:text-neutral-disabled data-[disabled=true]:cursor-not-allowed", "data-[selected=true]:bg-neutral-dimmed"], {
   variants: {
     selected: {
-      true: "wby-font-semibold wby-bg-neutral-dimmed"
+      true: "font-semibold bg-neutral-dimmed"
     }
   }
 });
@@ -19,9 +19,9 @@ const Item = ({
     selected
   }), className)
 }, props), /*#__PURE__*/React.createElement("span", {
-  className: "wby-w-full wby-overflow-hidden wby-truncate wby-whitespace-nowrap"
+  className: "w-full overflow-hidden truncate whitespace-nowrap"
 }, children), selected ? /*#__PURE__*/React.createElement(Check, {
-  className: "wby-w-md wby-h-md"
+  className: "w-md h-md"
 }) : null);
 export { Item };