@webiny/admin-ui 6.0.0-alpha.0

package/Card/components/CardRoot.js

@@ -0,0 +1,45 @@
+import React from "react";
+import { cn, cva } from "../../utils";
+const cardRootVariants = cva("wby-flex wby-flex-col wby-bg-neutral-base wby-gap-y-md-plus wby-text-sm", {
+  variants: {
+    padding: {
+      standard: "wby-p-lg",
+      comfortable: "wby-p-xl",
+      compact: "wby-p-md"
+    },
+    elevation: {
+      none: "",
+      xs: "wby-shadow-xs",
+      sm: "wby-shadow-sm",
+      md: "wby-shadow-md",
+      lg: "wby-shadow-lg",
+      xl: "wby-shadow-xl"
+    },
+    borderRadius: {
+      none: "wby-rounded-none",
+      sm: "wby-rounded-sm",
+      md: "wby-rounded-md"
+    }
+  },
+  defaultVariants: {
+    padding: "standard",
+    elevation: "none",
+    borderRadius: "md"
+  }
+});
+const CardRoot = ({
+  className,
+  padding,
+  elevation,
+  borderRadius,
+  ...props
+}) => /*#__PURE__*/React.createElement("div", Object.assign({
+  className: cn(cardRootVariants({
+    padding,
+    elevation,
+    borderRadius
+  }), className)
+}, props));
+export { CardRoot, cardRootVariants };
+
+//# sourceMappingURL=CardRoot.js.map

package/Card/components/CardRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","cn","cva","cardRootVariants","variants","padding","standard","comfortable","compact","elevation","none","xs","sm","md","lg","xl","borderRadius","defaultVariants","CardRoot","className","props","createElement","Object","assign"],"sources":["CardRoot.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, VariantProps } from \"~/utils\";\n\nconst cardRootVariants = cva(\n    \"wby-flex wby-flex-col wby-bg-neutral-base wby-gap-y-md-plus wby-text-sm\",\n    {\n        variants: {\n            padding: {\n                standard: \"wby-p-lg\",\n                comfortable: \"wby-p-xl\",\n                compact: \"wby-p-md\"\n            },\n            elevation: {\n                none: \"\",\n                xs: \"wby-shadow-xs\",\n                sm: \"wby-shadow-sm\",\n                md: \"wby-shadow-md\",\n                lg: \"wby-shadow-lg\",\n                xl: \"wby-shadow-xl\"\n            },\n            borderRadius: {\n                none: \"wby-rounded-none\",\n                sm: \"wby-rounded-sm\",\n                md: \"wby-rounded-md\"\n            }\n        },\n        defaultVariants: {\n            padding: \"standard\",\n            elevation: \"none\",\n            borderRadius: \"md\"\n        }\n    }\n);\n\ninterface CardRootProps\n    extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\">,\n        VariantProps<typeof cardRootVariants> {}\n\nconst CardRoot = ({ className, padding, elevation, borderRadius, ...props }: CardRootProps) => (\n    <div\n        className={cn(cardRootVariants({ padding, elevation, borderRadius }), className)}\n        {...props}\n    />\n);\n\nexport { CardRoot, type CardRootProps, cardRootVariants };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,gBAAgB,GAAGD,GAAG,CACxB,yEAAyE,EACzE;EACIE,QAAQ,EAAE;IACNC,OAAO,EAAE;MACLC,QAAQ,EAAE,UAAU;MACpBC,WAAW,EAAE,UAAU;MACvBC,OAAO,EAAE;IACb,CAAC;IACDC,SAAS,EAAE;MACPC,IAAI,EAAE,EAAE;MACRC,EAAE,EAAE,eAAe;MACnBC,EAAE,EAAE,eAAe;MACnBC,EAAE,EAAE,eAAe;MACnBC,EAAE,EAAE,eAAe;MACnBC,EAAE,EAAE;IACR,CAAC;IACDC,YAAY,EAAE;MACVN,IAAI,EAAE,kBAAkB;MACxBE,EAAE,EAAE,gBAAgB;MACpBC,EAAE,EAAE;IACR;EACJ,CAAC;EACDI,eAAe,EAAE;IACbZ,OAAO,EAAE,UAAU;IACnBI,SAAS,EAAE,MAAM;IACjBO,YAAY,EAAE;EAClB;AACJ,CACJ,CAAC;AAMD,MAAME,QAAQ,GAAGA,CAAC;EAAEC,SAAS;EAAEd,OAAO;EAAEI,SAAS;EAAEO,YAAY;EAAE,GAAGI;AAAqB,CAAC,kBACtFpB,KAAA,CAAAqB,aAAA,QAAAC,MAAA,CAAAC,MAAA;EACIJ,SAAS,EAAElB,EAAE,CAACE,gBAAgB,CAAC;IAAEE,OAAO;IAAEI,SAAS;IAAEO;EAAa,CAAC,CAAC,EAAEG,SAAS;AAAE,GAC7EC,KAAK,CACZ,CACJ;AAED,SAASF,QAAQ,EAAsBf,gBAAgB","ignoreList":[]}

package/Card/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./CardFooter";
+export * from "./CardHeader";
+export * from "./CardRoot";

package/Card/components/index.js

@@ -0,0 +1,5 @@
+export * from "./CardFooter";
+export * from "./CardHeader";
+export * from "./CardRoot";
+
+//# sourceMappingURL=index.js.map

package/Card/components/index.js.map

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

package/Card/index.d.ts

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

package/Card/index.js

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

package/Card/index.js.map

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

package/Checkbox/Checkbox.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { CheckboxPrimitiveProps } from "./primitives/";
+import { FormComponentProps } from "../FormComponent";
+type CheckboxProps = CheckboxPrimitiveProps & FormComponentProps;
+declare const Checkbox: (({ description, note, validation, ...props }: CheckboxProps) => React.JSX.Element) & {
+    original: ({ description, note, validation, ...props }: CheckboxProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ description, note, validation, ...props }: CheckboxProps) => React.JSX.Element) & {
+        original: ({ description, note, validation, ...props }: CheckboxProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ description, note, validation, ...props }: CheckboxProps) => React.JSX.Element) & {
+        original: ({ description, note, validation, ...props }: CheckboxProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { Checkbox };

package/Checkbox/Checkbox.js

@@ -0,0 +1,33 @@
+import React, { useMemo } from "react";
+import { makeDecoratable } from "../utils";
+import { CheckboxPrimitive } from "./primitives/";
+import { FormComponentDescription, FormComponentErrorMessage, FormComponentNote } from "../FormComponent";
+const DecoratableCheckbox = ({
+  description,
+  note,
+  validation,
+  ...props
+}) => {
+  const {
+    isValid: validationIsValid,
+    message: validationMessage
+  } = validation || {};
+  const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-w-full"
+  }, /*#__PURE__*/React.createElement(FormComponentDescription, {
+    text: description,
+    disabled: props.disabled
+  }), /*#__PURE__*/React.createElement(CheckboxPrimitive, props), /*#__PURE__*/React.createElement(FormComponentErrorMessage, {
+    text: validationMessage,
+    invalid: invalid,
+    disabled: props.disabled
+  }), /*#__PURE__*/React.createElement(FormComponentNote, {
+    text: note,
+    disabled: props.disabled
+  }));
+};
+const Checkbox = makeDecoratable("Checkbox", DecoratableCheckbox);
+export { Checkbox };
+
+//# sourceMappingURL=Checkbox.js.map

package/Checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","makeDecoratable","CheckboxPrimitive","FormComponentDescription","FormComponentErrorMessage","FormComponentNote","DecoratableCheckbox","description","note","validation","props","isValid","validationIsValid","message","validationMessage","invalid","createElement","className","text","disabled","Checkbox"],"sources":["Checkbox.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { makeDecoratable } from \"~/utils\";\nimport { CheckboxPrimitive, CheckboxPrimitiveProps } from \"./primitives/\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentNote,\n    FormComponentProps\n} from \"~/FormComponent\";\n\ntype CheckboxProps = CheckboxPrimitiveProps & FormComponentProps;\n\nconst DecoratableCheckbox = ({ description, note, validation, ...props }: CheckboxProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    return (\n        <div className={\"wby-w-full\"}>\n            <FormComponentDescription text={description} disabled={props.disabled} />\n            <CheckboxPrimitive {...props} />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={props.disabled}\n            />\n            <FormComponentNote text={note} disabled={props.disabled} />\n        </div>\n    );\n};\nconst Checkbox = makeDecoratable(\"Checkbox\", DecoratableCheckbox);\n\nexport { Checkbox };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,eAAe;AACxB,SAASC,iBAAiB;AAC1B,SACIC,wBAAwB,EACxBC,yBAAyB,EACzBC,iBAAiB;AAMrB,MAAMC,mBAAmB,GAAGA,CAAC;EAAEC,WAAW;EAAEC,IAAI;EAAEC,UAAU;EAAE,GAAGC;AAAqB,CAAC,KAAK;EACxF,MAAM;IAAEC,OAAO,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC;EAAkB,CAAC,GAAGL,UAAU,IAAI,CAAC,CAAC;EACnF,MAAMM,OAAO,GAAGf,OAAO,CAAC,MAAMY,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAE/E,oBACIb,KAAA,CAAAiB,aAAA;IAAKC,SAAS,EAAE;EAAa,gBACzBlB,KAAA,CAAAiB,aAAA,CAACb,wBAAwB;IAACe,IAAI,EAAEX,WAAY;IAACY,QAAQ,EAAET,KAAK,CAACS;EAAS,CAAE,CAAC,eACzEpB,KAAA,CAAAiB,aAAA,CAACd,iBAAiB,EAAKQ,KAAQ,CAAC,eAChCX,KAAA,CAAAiB,aAAA,CAACZ,yBAAyB;IACtBc,IAAI,EAAEJ,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBI,QAAQ,EAAET,KAAK,CAACS;EAAS,CAC5B,CAAC,eACFpB,KAAA,CAAAiB,aAAA,CAACX,iBAAiB;IAACa,IAAI,EAAEV,IAAK;IAACW,QAAQ,EAAET,KAAK,CAACS;EAAS,CAAE,CACzD,CAAC;AAEd,CAAC;AACD,MAAMC,QAAQ,GAAGnB,eAAe,CAAC,UAAU,EAAEK,mBAAmB,CAAC;AAEjE,SAASc,QAAQ","ignoreList":[]}

package/Checkbox/Checkbox.mdx

@@ -0,0 +1,125 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as CheckboxStories from './Checkbox.stories';
+
+<Meta of={CheckboxStories} />
+
+# Checkbox
+
+Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected. A checkbox group is a grouping of checkboxes that are related to each other.
+
+## Usage
+
+<Canvas of={CheckboxStories.Documentation} source={ { code:
+`// Code for a Checkbox
+
+import React, { useState } from "react";
+import { Checkbox } from "@webiny/admin-ui";
+
+const CheckboxExample = () => {
+    const [isChecked, setIsChecked] = useState(false);
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleChange = (checked: boolean) => {
+        setIsChecked(checked);
+
+        if (!checked) {
+            setValidation({ isValid: false, message: "This field is required" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <div>
+            <Checkbox
+                label="Any field label"
+                description="Provide the required information for processing your request."
+                note="Note: Ensure your selection or input is accurate before proceeding."
+                checked={isChecked}
+                required={true}
+                onChange={handleChange}
+                validation={validation}
+            />
+        </div>
+    );
+};
+
+export default CheckboxExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Checkbox/Checkbox.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={CheckboxStories.Documentation} exclude={"onChange"}/>
+
+```tsx
+import React, { useState } from "react";
+import { Checkbox } from "@webiny/admin-ui";
+
+const CheckboxExample = () => {
+    const [isChecked, setIsChecked] = useState(false);
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleChange = (checked: boolean) => {
+        setIsChecked(checked);
+
+        if (!checked) {
+            setValidation({ isValid: false, message: "This field is required" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <div>
+            <Checkbox
+                label="Any field label"
+                description="Provide the required information for processing your request."
+                note="Note: Ensure your selection or input is accurate before proceeding."
+                checked={isChecked}
+                required={true}
+                onChange={handleChange}
+                validation={validation}
+            />
+        </div>
+    );
+};
+
+export default CheckboxExample;
+```
+
+## Anatomy
+
+### General
+Checkbox input enable users to select a single or multiple items from a list of offered choices. A checkbox input group organizes related checkbox input options together for better clarity and functionality.
+
+<img src="/images/storybook/checkbox/general.png" alt="General"/>
+
+### Checkbox input options
+Checkbox inputs can exist in two different states: Selected and Not Selected.
+
+<img src="/images/storybook/checkbox/checkbox-input-options.png" alt="Checkbox input options"/>
+
+### States
+<img src="/images/storybook/checkbox/states.png" alt="States"/>
+
+## Usage
+
+### Text overflow
+When the checkbox text content is too long for the horizontal space available, the content should wrap to form another line aligning the text and checkbox on top.
+
+<img src="/images/storybook/checkbox/text-overflow.png" alt="Text overflow"/>
+
+
+

package/Checkbox/Checkbox.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Checkbox } from "./";
+declare const meta: Meta<typeof Checkbox>;
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+export declare const Default: Story;
+export declare const WithDescription: Story;
+export declare const WithNotes: Story;
+export declare const WithErrors: Story;
+export declare const Disabled: Story;
+export declare const FullExample: Story;
+export declare const Documentation: Story;

package/Checkbox/Checkbox.stories.js

@@ -0,0 +1,170 @@
+import React, { useState, useEffect } from "react";
+import { Checkbox } from "./";
+const meta = {
+  title: "Components/Form/Checkbox",
+  component: Checkbox,
+  argTypes: {
+    disabled: {
+      control: "boolean",
+      defaultValue: false
+    }
+  },
+  parameters: {
+    layout: "padded"
+  },
+  render: args => {
+    const [checked, setChecked] = useState(args.checked);
+    return /*#__PURE__*/React.createElement(Checkbox, Object.assign({}, args, {
+      checked: checked,
+      onChange: checked => setChecked(checked)
+    }));
+  }
+};
+export default meta;
+export const Default = {
+  args: {
+    label: "Any field label"
+  }
+};
+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,
+    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 [checked, setChecked] = useState(args.checked || false);
+    const [validation, setValidation] = useState({
+      isValid: true,
+      message: ""
+    });
+
+    // Update checked state when args.checked changes
+    useEffect(() => {
+      setChecked(args.checked || false);
+    }, [args.checked]);
+    const handleChange = isChecked => {
+      setChecked(isChecked);
+
+      // Simple required validation
+      if (args.required && !isChecked) {
+        setValidation({
+          isValid: false,
+          message: "This field is required"
+        });
+      } else {
+        setValidation({
+          isValid: true,
+          message: ""
+        });
+      }
+    };
+
+    // Validate on required change
+    useEffect(() => {
+      if (args.required && !checked) {
+        setValidation({
+          isValid: false,
+          message: "This field is required"
+        });
+      } else {
+        setValidation({
+          isValid: true,
+          message: ""
+        });
+      }
+    }, [args.required, checked]);
+    return /*#__PURE__*/React.createElement(Checkbox, Object.assign({}, args, {
+      checked: checked,
+      onChange: handleChange,
+      validation: validation
+    }));
+  },
+  args: {
+    label: "Any field label",
+    checked: false,
+    disabled: false,
+    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."
+    }
+  },
+  argTypes: {
+    label: {
+      description: "Label text for the checkbox",
+      control: "text",
+      defaultValue: "Any field label"
+    },
+    checked: {
+      description: "Determines if the checkbox is checked",
+      control: "boolean",
+      defaultValue: false
+    },
+    disabled: {
+      description: "Disables the checkbox when set to true",
+      control: "boolean",
+      defaultValue: false
+    },
+    required: {
+      description: "Makes the checkbox required when set to true",
+      control: "boolean",
+      defaultValue: false
+    },
+    description: {
+      description: "Additional description text below the checkbox",
+      control: "text"
+    },
+    note: {
+      description: "Additional note text below the checkbox",
+      control: "text"
+    },
+    validation: {
+      description: "Validation state and message",
+      control: "object"
+    },
+    onChange: {
+      description: "Callback function triggered when checkbox state changes",
+      control: "none"
+    }
+  }
+};
+
+//# sourceMappingURL=Checkbox.stories.js.map

package/Checkbox/Checkbox.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","useEffect","Checkbox","meta","title","component","argTypes","disabled","control","defaultValue","parameters","layout","render","args","checked","setChecked","createElement","Object","assign","onChange","Default","label","WithDescription","description","WithNotes","note","WithErrors","validation","isValid","message","Disabled","FullExample","required","Documentation","setValidation","handleChange","isChecked"],"sources":["Checkbox.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Checkbox } from \"~/Checkbox\";\n\nconst meta: Meta<typeof Checkbox> = {\n    title: \"Components/Form/Checkbox\",\n    component: Checkbox,\n    argTypes: {\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [checked, setChecked] = useState(args.checked);\n        return <Checkbox {...args} checked={checked} onChange={checked => setChecked(checked)} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Checkbox>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Any field label\"\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        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 [checked, setChecked] = useState(args.checked || false);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update checked state when args.checked changes\n        useEffect(() => {\n            setChecked(args.checked || false);\n        }, [args.checked]);\n\n        const handleChange = (isChecked: boolean) => {\n            setChecked(isChecked);\n\n            // Simple required validation\n            if (args.required && !isChecked) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change\n        useEffect(() => {\n            if (args.required && !checked) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, checked]);\n\n        return (\n            <Checkbox {...args} checked={checked} onChange={handleChange} validation={validation} />\n        );\n    },\n    args: {\n        label: \"Any field label\",\n        checked: false,\n        disabled: false,\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    argTypes: {\n        label: {\n            description: \"Label text for the checkbox\",\n            control: \"text\",\n            defaultValue: \"Any field label\"\n        },\n        checked: {\n            description: \"Determines if the checkbox is checked\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        disabled: {\n            description: \"Disables the checkbox when set to true\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        required: {\n            description: \"Makes the checkbox required when set to true\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        description: {\n            description: \"Additional description text below the checkbox\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the checkbox\",\n            control: \"text\"\n        },\n        validation: {\n            description: \"Validation state and message\",\n            control: \"object\"\n        },\n        onChange: {\n            description: \"Callback function triggered when checkbox state changes\",\n            control: \"none\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/Checkbox/domains/CheckboxItem.d.ts

@@ -0,0 +1,24 @@
+import { CheckboxItemDto } from "./CheckboxItemDto";
+export declare class CheckboxItem {
+    private readonly _id;
+    private readonly _label;
+    private readonly _value;
+    private readonly _checked;
+    private readonly _indeterminate;
+    private readonly _disabled;
+    protected constructor(data: {
+        id: string;
+        label: any;
+        value: any;
+        checked: boolean;
+        disabled: boolean;
+        indeterminate: boolean;
+    });
+    static create(data: CheckboxItemDto): CheckboxItem;
+    get id(): string;
+    get label(): any;
+    get value(): string | number;
+    get checked(): boolean;
+    get indeterminate(): boolean;
+    get disabled(): boolean;
+}

package/Checkbox/domains/CheckboxItem.js

@@ -0,0 +1,41 @@
+import { generateId } from "../../utils";
+export class CheckboxItem {
+  constructor(data) {
+    this._id = data.id;
+    this._label = data.label;
+    this._value = data.value;
+    this._checked = data.checked;
+    this._indeterminate = data.indeterminate;
+    this._disabled = data.disabled;
+  }
+  static create(data) {
+    return new CheckboxItem({
+      id: generateId(data.id),
+      label: data.label,
+      value: data.value,
+      checked: Boolean(data.checked),
+      indeterminate: (data.indeterminate && !data.checked) ?? false,
+      disabled: data.disabled ?? false
+    });
+  }
+  get id() {
+    return this._id;
+  }
+  get label() {
+    return this._label;
+  }
+  get value() {
+    return this._value;
+  }
+  get checked() {
+    return this._checked;
+  }
+  get indeterminate() {
+    return this._indeterminate;
+  }
+  get disabled() {
+    return this._disabled;
+  }
+}
+
+//# sourceMappingURL=CheckboxItem.js.map

package/Checkbox/domains/CheckboxItem.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["generateId","CheckboxItem","constructor","data","_id","id","_label","label","_value","value","_checked","checked","_indeterminate","indeterminate","_disabled","disabled","create","Boolean"],"sources":["CheckboxItem.ts"],"sourcesContent":["import { CheckboxItemDto } from \"./CheckboxItemDto\";\nimport { generateId } from \"~/utils\";\n\nexport class CheckboxItem {\n    private readonly _id: string;\n    private readonly _label: any;\n    private readonly _value: string | number;\n    private readonly _checked: boolean;\n    private readonly _indeterminate: boolean;\n    private readonly _disabled: boolean;\n\n    protected constructor(data: {\n        id: string;\n        label: any;\n        value: any;\n        checked: boolean;\n        disabled: boolean;\n        indeterminate: boolean;\n    }) {\n        this._id = data.id;\n        this._label = data.label;\n        this._value = data.value;\n        this._checked = data.checked;\n        this._indeterminate = data.indeterminate;\n        this._disabled = data.disabled;\n    }\n\n    static create(data: CheckboxItemDto): CheckboxItem {\n        return new CheckboxItem({\n            id: generateId(data.id),\n            label: data.label,\n            value: data.value,\n            checked: Boolean(data.checked),\n            indeterminate: (data.indeterminate && !data.checked) ?? false,\n            disabled: data.disabled ?? false\n        });\n    }\n\n    get id() {\n        return this._id;\n    }\n\n    get label() {\n        return this._label;\n    }\n\n    get value() {\n        return this._value;\n    }\n\n    get checked() {\n        return this._checked;\n    }\n\n    get indeterminate() {\n        return this._indeterminate;\n    }\n\n    get disabled() {\n        return this._disabled;\n    }\n}\n"],"mappings":"AACA,SAASA,UAAU;AAEnB,OAAO,MAAMC,YAAY,CAAC;EAQZC,WAAWA,CAACC,IAOrB,EAAE;IACC,IAAI,CAACC,GAAG,GAAGD,IAAI,CAACE,EAAE;IAClB,IAAI,CAACC,MAAM,GAAGH,IAAI,CAACI,KAAK;IACxB,IAAI,CAACC,MAAM,GAAGL,IAAI,CAACM,KAAK;IACxB,IAAI,CAACC,QAAQ,GAAGP,IAAI,CAACQ,OAAO;IAC5B,IAAI,CAACC,cAAc,GAAGT,IAAI,CAACU,aAAa;IACxC,IAAI,CAACC,SAAS,GAAGX,IAAI,CAACY,QAAQ;EAClC;EAEA,OAAOC,MAAMA,CAACb,IAAqB,EAAgB;IAC/C,OAAO,IAAIF,YAAY,CAAC;MACpBI,EAAE,EAAEL,UAAU,CAACG,IAAI,CAACE,EAAE,CAAC;MACvBE,KAAK,EAAEJ,IAAI,CAACI,KAAK;MACjBE,KAAK,EAAEN,IAAI,CAACM,KAAK;MACjBE,OAAO,EAAEM,OAAO,CAACd,IAAI,CAACQ,OAAO,CAAC;MAC9BE,aAAa,EAAE,CAACV,IAAI,CAACU,aAAa,IAAI,CAACV,IAAI,CAACQ,OAAO,KAAK,KAAK;MAC7DI,QAAQ,EAAEZ,IAAI,CAACY,QAAQ,IAAI;IAC/B,CAAC,CAAC;EACN;EAEA,IAAIV,EAAEA,CAAA,EAAG;IACL,OAAO,IAAI,CAACD,GAAG;EACnB;EAEA,IAAIG,KAAKA,CAAA,EAAG;IACR,OAAO,IAAI,CAACD,MAAM;EACtB;EAEA,IAAIG,KAAKA,CAAA,EAAG;IACR,OAAO,IAAI,CAACD,MAAM;EACtB;EAEA,IAAIG,OAAOA,CAAA,EAAG;IACV,OAAO,IAAI,CAACD,QAAQ;EACxB;EAEA,IAAIG,aAAaA,CAAA,EAAG;IAChB,OAAO,IAAI,CAACD,cAAc;EAC9B;EAEA,IAAIG,QAAQA,CAAA,EAAG;IACX,OAAO,IAAI,CAACD,SAAS;EACzB;AACJ","ignoreList":[]}

package/Checkbox/domains/CheckboxItemDto.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface CheckboxItemDto {
+    id?: string;
+    label?: string | React.ReactNode;
+    value?: number | string;
+    checked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+}

package/Checkbox/domains/CheckboxItemDto.js

@@ -0,0 +1,3 @@
+export {};
+
+//# sourceMappingURL=CheckboxItemDto.js.map

package/Checkbox/domains/CheckboxItemDto.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["CheckboxItemDto.ts"],"sourcesContent":["import React from \"react\";\n\nexport interface CheckboxItemDto {\n    id?: string;\n    label?: string | React.ReactNode;\n    value?: number | string;\n    checked?: boolean;\n    indeterminate?: boolean;\n    disabled?: boolean;\n}\n"],"mappings":"","ignoreList":[]}

package/Checkbox/domains/CheckboxItemFormatted.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface CheckboxItemFormatted {
+    id: string;
+    label: string | React.ReactNode;
+    value: string | number;
+    checked: boolean;
+    indeterminate: boolean;
+    disabled: boolean;
+    hasLabel: boolean;
+}

package/Checkbox/domains/CheckboxItemFormatted.js

@@ -0,0 +1,3 @@
+export {};
+
+//# sourceMappingURL=CheckboxItemFormatted.js.map

package/Checkbox/domains/CheckboxItemFormatted.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["CheckboxItemFormatted.ts"],"sourcesContent":["import React from \"react\";\n\nexport interface CheckboxItemFormatted {\n    id: string;\n    label: string | React.ReactNode;\n    value: string | number;\n    checked: boolean;\n    indeterminate: boolean;\n    disabled: boolean;\n    hasLabel: boolean;\n}\n"],"mappings":"","ignoreList":[]}

package/Checkbox/domains/CheckboxItemMapper.d.ts

@@ -0,0 +1,5 @@
+import { CheckboxItemFormatted } from "./CheckboxItemFormatted";
+import { CheckboxItem } from "./CheckboxItem";
+export declare class CheckboxItemMapper {
+    static toFormatted(item: CheckboxItem): CheckboxItemFormatted;
+}

package/Checkbox/domains/CheckboxItemMapper.js

@@ -0,0 +1,15 @@
+export class CheckboxItemMapper {
+  static toFormatted(item) {
+    return {
+      id: item.id,
+      label: item.label,
+      value: item.value,
+      checked: item.checked,
+      indeterminate: item.indeterminate,
+      disabled: item.disabled,
+      hasLabel: !!item.label
+    };
+  }
+}
+
+//# sourceMappingURL=CheckboxItemMapper.js.map

package/Checkbox/domains/CheckboxItemMapper.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["CheckboxItemMapper","toFormatted","item","id","label","value","checked","indeterminate","disabled","hasLabel"],"sources":["CheckboxItemMapper.ts"],"sourcesContent":["import { CheckboxItemFormatted } from \"./CheckboxItemFormatted\";\nimport { CheckboxItem } from \"./CheckboxItem\";\n\nexport class CheckboxItemMapper {\n    static toFormatted(item: CheckboxItem): CheckboxItemFormatted {\n        return {\n            id: item.id,\n            label: item.label,\n            value: item.value,\n            checked: item.checked,\n            indeterminate: item.indeterminate,\n            disabled: item.disabled,\n            hasLabel: !!item.label\n        };\n    }\n}\n"],"mappings":"AAGA,OAAO,MAAMA,kBAAkB,CAAC;EAC5B,OAAOC,WAAWA,CAACC,IAAkB,EAAyB;IAC1D,OAAO;MACHC,EAAE,EAAED,IAAI,CAACC,EAAE;MACXC,KAAK,EAAEF,IAAI,CAACE,KAAK;MACjBC,KAAK,EAAEH,IAAI,CAACG,KAAK;MACjBC,OAAO,EAAEJ,IAAI,CAACI,OAAO;MACrBC,aAAa,EAAEL,IAAI,CAACK,aAAa;MACjCC,QAAQ,EAAEN,IAAI,CAACM,QAAQ;MACvBC,QAAQ,EAAE,CAAC,CAACP,IAAI,CAACE;IACrB,CAAC;EACL;AACJ","ignoreList":[]}

package/Checkbox/domains/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./CheckboxItem";
+export * from "./CheckboxItemDto";
+export * from "./CheckboxItemFormatted";
+export * from "./CheckboxItemMapper";

package/Checkbox/domains/index.js

@@ -0,0 +1,6 @@
+export * from "./CheckboxItem";
+export * from "./CheckboxItemDto";
+export * from "./CheckboxItemFormatted";
+export * from "./CheckboxItemMapper";
+
+//# sourceMappingURL=index.js.map

package/Checkbox/domains/index.js.map

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

package/Checkbox/index.d.ts

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

package/Checkbox/index.js

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

package/Checkbox/index.js.map

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