@webiny/admin-ui 0.0.0-unstable.06b2ede40f

package/ColorPicker/ColorPicker.stories.js

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

package/ColorPicker/ColorPicker.stories.js.map

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

package/ColorPicker/index.d.ts

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

package/ColorPicker/index.js

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

package/ColorPicker/index.js.map

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

package/ColorPicker/primitives/ColorPickerPrimitive.d.ts

@@ -0,0 +1,65 @@
+import React from "react";
+import { type InputPrimitiveProps } from "../../Input";
+import { type PopoverPrimitiveContentProps } from "../../Popover";
+interface ColorPickerPrimitiveProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /**
+     * Callback triggered when the open state changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Callback triggered when the value changes.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Callback triggered when the color selection is complete.
+     * This is called after the user has finished selecting a color.
+     */
+    onChangeComplete?: (value: string) => void;
+    /**
+     * Optional selected value.
+     */
+    value?: string;
+    /**
+     * If true, the color picker will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Popover alignment.
+     */
+    align?: PopoverPrimitiveContentProps["align"];
+    /**
+     * Size of the input field.
+     * Refer to `InputPrimitiveProps["size"]` for possible values.
+     */
+    size?: InputPrimitiveProps["size"];
+    /**
+     * Variant of the input field.
+     * Refer to `InputPrimitiveProps["variant"]` for possible values.
+     */
+    variant?: InputPrimitiveProps["variant"];
+    /**
+     * Indicates if the input field is invalid.
+     * Refer to `InputPrimitiveProps["invalid"]` for possible values.
+     */
+    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;
+    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;
+        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;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { ColorPickerPrimitive, type ColorPickerPrimitiveProps };

package/ColorPicker/primitives/ColorPickerPrimitive.js

@@ -0,0 +1,77 @@
+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))]"]
+    },
+    disabled: {
+      true: "wby-pointer-events-none"
+    }
+  },
+  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 ColorPickerPrimitive = makeDecoratable("ColorPickerPrimitive", DecoratableColorPickerPrimitive);
+export { ColorPickerPrimitive };
+
+//# sourceMappingURL=ColorPickerPrimitive.js.map

package/ColorPicker/primitives/ColorPickerPrimitive.js.map

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

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

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ColorPickerPrimitive } from "./ColorPickerPrimitive";
+declare const meta: Meta<typeof ColorPickerPrimitive>;
+export default meta;
+type Story = StoryObj<typeof ColorPickerPrimitive>;
+export declare const Default: Story;
+export declare const MediumSize: Story;
+export declare const LargeSize: Story;
+export declare const ExtraLargeSize: Story;
+export declare const PrimaryVariant: Story;
+export declare const PrimaryVariantDisabled: Story;
+export declare const PrimaryVariantInvalid: Story;
+export declare const SecondaryVariant: Story;
+export declare const SecondaryVariantDisabled: Story;
+export declare const SecondaryVariantInvalid: Story;
+export declare const GhostVariant: Story;
+export declare const GhostVariantDisabled: Story;
+export declare const GhostVariantInvalid: Story;
+export declare const WithDefaultValue: Story;
+export declare const WithStartAlign: Story;
+export declare const WithCenterAlign: Story;
+export declare const WithEndAlign: Story;

package/ColorPicker/primitives/ColorPickerPrimitive.stories.js

@@ -0,0 +1,131 @@
+import React, { useState } from "react";
+import { ColorPickerPrimitive } from "./ColorPickerPrimitive";
+const meta = {
+  title: "Components/Form Primitives/ColorPicker",
+  component: ColorPickerPrimitive,
+  argTypes: {
+    onChange: {
+      action: "onChange"
+    },
+    onChangeComplete: {
+      action: "onChangeComplete"
+    },
+    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"
+  }
+};
+
+//# sourceMappingURL=ColorPickerPrimitive.stories.js.map

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

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

package/ColorPicker/primitives/index.d.ts

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

package/ColorPicker/primitives/index.js

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

package/ColorPicker/primitives/index.js.map

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

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

@@ -0,0 +1,31 @@
+import type { ColorState } from "react-color";
+interface ColorPickerPresenterParams {
+    onOpenChange?: (open: boolean) => void;
+    onValueChange?: (value: string) => void;
+    onValueCommit?: (value: string) => void;
+    value?: string;
+}
+interface IColorPickerPresenter {
+    vm: {
+        open: boolean;
+        value: string;
+    };
+    init: (params: ColorPickerPresenterParams) => void;
+    setColor: (color: ColorState) => void;
+    setOpen: (open: boolean) => void;
+}
+declare class ColorPickerPresenter implements IColorPickerPresenter {
+    private params?;
+    private open;
+    private value;
+    constructor();
+    get vm(): {
+        open: boolean;
+        value: string;
+    };
+    init(params: ColorPickerPresenterParams): void;
+    setColor: (color: ColorState) => void;
+    commitColor: (color: ColorState) => void;
+    setOpen: (open: boolean) => void;
+}
+export { ColorPickerPresenter, type ColorPickerPresenterParams, type IColorPickerPresenter };

package/ColorPicker/primitives/presenters/ColorPickerPresenter.js

@@ -0,0 +1,34 @@
+import { makeAutoObservable } from "mobx";
+class ColorPickerPresenter {
+  params = undefined;
+  open = false;
+  value = "";
+  constructor() {
+    makeAutoObservable(this);
+  }
+  get vm() {
+    return {
+      open: this.open,
+      value: this.value
+    };
+  }
+  init(params) {
+    this.params = params;
+    this.value = params.value || "";
+  }
+  setColor = color => {
+    this.value = color.hex;
+    this.params?.onValueChange?.(color.hex);
+  };
+  commitColor = color => {
+    this.value = color.hex;
+    this.params?.onValueCommit?.(color.hex);
+  };
+  setOpen = open => {
+    this.open = open;
+    this.params?.onOpenChange?.(open);
+  };
+}
+export { ColorPickerPresenter };
+
+//# sourceMappingURL=ColorPickerPresenter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["makeAutoObservable","ColorPickerPresenter","params","undefined","open","value","constructor","vm","init","setColor","color","hex","onValueChange","commitColor","onValueCommit","setOpen","onOpenChange"],"sources":["ColorPickerPresenter.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\nimport type { ColorState } from \"react-color\";\n\ninterface ColorPickerPresenterParams {\n    onOpenChange?: (open: boolean) => void;\n    onValueChange?: (value: string) => void;\n    onValueCommit?: (value: string) => void;\n    value?: string;\n}\n\ninterface IColorPickerPresenter {\n    vm: {\n        open: boolean;\n        value: string;\n    };\n    init: (params: ColorPickerPresenterParams) => void;\n    setColor: (color: ColorState) => void;\n    setOpen: (open: boolean) => void;\n}\n\nclass ColorPickerPresenter implements IColorPickerPresenter {\n    private params?: ColorPickerPresenterParams = undefined;\n    private open = false;\n    private value = \"\";\n\n    constructor() {\n        makeAutoObservable(this);\n    }\n\n    get vm() {\n        return {\n            open: this.open,\n            value: this.value\n        };\n    }\n\n    init(params: ColorPickerPresenterParams) {\n        this.params = params;\n        this.value = params.value || \"\";\n    }\n\n    setColor = (color: ColorState) => {\n        this.value = color.hex;\n        this.params?.onValueChange?.(color.hex);\n    };\n\n    commitColor = (color: ColorState) => {\n        this.value = color.hex;\n        this.params?.onValueCommit?.(color.hex);\n    };\n\n    setOpen = (open: boolean) => {\n        this.open = open;\n        this.params?.onOpenChange?.(open);\n    };\n}\n\nexport { ColorPickerPresenter, type ColorPickerPresenterParams, type IColorPickerPresenter };\n"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,MAAM;AAoBzC,MAAMC,oBAAoB,CAAkC;EAChDC,MAAM,GAAgCC,SAAS;EAC/CC,IAAI,GAAG,KAAK;EACZC,KAAK,GAAG,EAAE;EAElBC,WAAWA,CAAA,EAAG;IACVN,kBAAkB,CAAC,IAAI,CAAC;EAC5B;EAEA,IAAIO,EAAEA,CAAA,EAAG;IACL,OAAO;MACHH,IAAI,EAAE,IAAI,CAACA,IAAI;MACfC,KAAK,EAAE,IAAI,CAACA;IAChB,CAAC;EACL;EAEAG,IAAIA,CAACN,MAAkC,EAAE;IACrC,IAAI,CAACA,MAAM,GAAGA,MAAM;IACpB,IAAI,CAACG,KAAK,GAAGH,MAAM,CAACG,KAAK,IAAI,EAAE;EACnC;EAEAI,QAAQ,GAAIC,KAAiB,IAAK;IAC9B,IAAI,CAACL,KAAK,GAAGK,KAAK,CAACC,GAAG;IACtB,IAAI,CAACT,MAAM,EAAEU,aAAa,GAAGF,KAAK,CAACC,GAAG,CAAC;EAC3C,CAAC;EAEDE,WAAW,GAAIH,KAAiB,IAAK;IACjC,IAAI,CAACL,KAAK,GAAGK,KAAK,CAACC,GAAG;IACtB,IAAI,CAACT,MAAM,EAAEY,aAAa,GAAGJ,KAAK,CAACC,GAAG,CAAC;EAC3C,CAAC;EAEDI,OAAO,GAAIX,IAAa,IAAK;IACzB,IAAI,CAACA,IAAI,GAAGA,IAAI;IAChB,IAAI,CAACF,MAAM,EAAEc,YAAY,GAAGZ,IAAI,CAAC;EACrC,CAAC;AACL;AAEA,SAASH,oBAAoB","ignoreList":[]}

package/ColorPicker/primitives/presenters/ColorPickerPresenter.test.d.ts

@@ -0,0 +1 @@
+export {};