@shipfox/react-ui 0.2.0 → 0.4.0

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { cva } from 'class-variance-authority';
+import { Icon } from '../../components/icon/index.js';
+import { cn } from '../../utils/cn.js';
+export const checkboxVariants = cva('peer shrink-0 border-none transition-all duration-100 outline-none cursor-pointer', {
+    variants: {
+        size: {
+            sm: 'size-16',
+            md: 'size-20',
+            lg: 'size-24'
+        }
+    },
+    defaultVariants: {
+        size: 'sm'
+    }
+});
+export function Checkbox({ className, size, checked, defaultChecked, onCheckedChange, ...props }) {
+    return /*#__PURE__*/ _jsx(CheckboxPrimitive.Root, {
+        "data-slot": "checkbox",
+        checked: checked,
+        defaultChecked: defaultChecked,
+        onCheckedChange: onCheckedChange,
+        className: cn(checkboxVariants({
+            size
+        }), // Unchecked state - default
+        'rounded-4 bg-checkbox-unchecked-bg shadow-checkbox-unchecked', // Unchecked state - hover
+        'hover:bg-checkbox-unchecked-bg-hover', // Unchecked state - focus
+        'focus-visible:shadow-checkbox-unchecked-focus', // Checked state
+        'data-[state=checked]:bg-checkbox-checked-bg data-[state=checked]:text-foreground-neutral-on-color data-[state=checked]:shadow-checkbox-checked', 'data-[state=checked]:hover:bg-checkbox-checked-bg-hover', 'data-[state=checked]:focus-visible:shadow-checkbox-checked-focus', // Indeterminate state
+        'data-[state=indeterminate]:bg-checkbox-indeterminate-bg data-[state=indeterminate]:text-foreground-neutral-on-color data-[state=indeterminate]:shadow-checkbox-indeterminate', 'data-[state=indeterminate]:hover:bg-checkbox-indeterminate-bg-hover', 'data-[state=indeterminate]:focus-visible:shadow-checkbox-indeterminate-focus', // Disabled state
+        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50', className),
+        ...props,
+        children: /*#__PURE__*/ _jsx(CheckboxPrimitive.Indicator, {
+            className: "flex items-center justify-center text-current",
+            children: checked === 'indeterminate' ? /*#__PURE__*/ _jsx(Icon, {
+                name: "subtractLine",
+                className: "size-16",
+                "aria-hidden": "true"
+            }) : /*#__PURE__*/ _jsx(Icon, {
+                name: "check",
+                className: "size-16",
+                "aria-hidden": "true"
+            })
+        })
+    });
+}
+
+//# sourceMappingURL=checkbox.js.map

package/dist/components/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport {cva, type VariantProps} from 'class-variance-authority';\nimport {Icon} from 'components/icon';\nimport type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\n\nexport const checkboxVariants = cva(\n  'peer shrink-0 border-none transition-all duration-100 outline-none cursor-pointer',\n  {\n    variants: {\n      size: {\n        sm: 'size-16',\n        md: 'size-20',\n        lg: 'size-24',\n      },\n    },\n    defaultVariants: {\n      size: 'sm',\n    },\n  },\n);\n\nexport type CheckboxProps = ComponentProps<typeof CheckboxPrimitive.Root> &\n  VariantProps<typeof checkboxVariants>;\n\nexport function Checkbox({\n  className,\n  size,\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  ...props\n}: CheckboxProps) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      checked={checked}\n      defaultChecked={defaultChecked}\n      onCheckedChange={onCheckedChange}\n      className={cn(\n        checkboxVariants({size}),\n        // Unchecked state - default\n        'rounded-4 bg-checkbox-unchecked-bg shadow-checkbox-unchecked',\n        // Unchecked state - hover\n        'hover:bg-checkbox-unchecked-bg-hover',\n        // Unchecked state - focus\n        'focus-visible:shadow-checkbox-unchecked-focus',\n        // Checked state\n        'data-[state=checked]:bg-checkbox-checked-bg data-[state=checked]:text-foreground-neutral-on-color data-[state=checked]:shadow-checkbox-checked',\n        'data-[state=checked]:hover:bg-checkbox-checked-bg-hover',\n        'data-[state=checked]:focus-visible:shadow-checkbox-checked-focus',\n        // Indeterminate state\n        'data-[state=indeterminate]:bg-checkbox-indeterminate-bg data-[state=indeterminate]:text-foreground-neutral-on-color data-[state=indeterminate]:shadow-checkbox-indeterminate',\n        'data-[state=indeterminate]:hover:bg-checkbox-indeterminate-bg-hover',\n        'data-[state=indeterminate]:focus-visible:shadow-checkbox-indeterminate-focus',\n        // Disabled state\n        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator className=\"flex items-center justify-center text-current\">\n        {checked === 'indeterminate' ? (\n          <Icon name=\"subtractLine\" className=\"size-16\" aria-hidden=\"true\" />\n        ) : (\n          <Icon name=\"check\" className=\"size-16\" aria-hidden=\"true\" />\n        )}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n}\n"],"names":["CheckboxPrimitive","cva","Icon","cn","checkboxVariants","variants","size","sm","md","lg","defaultVariants","Checkbox","className","checked","defaultChecked","onCheckedChange","props","Root","data-slot","Indicator","name","aria-hidden"],"mappings":";AAAA,YAAYA,uBAAuB,2BAA2B;AAC9D,SAAQC,GAAG,QAA0B,2BAA2B;AAChE,SAAQC,IAAI,QAAO,kBAAkB;AAErC,SAAQC,EAAE,QAAO,WAAW;AAE5B,OAAO,MAAMC,mBAAmBH,IAC9B,qFACA;IACEI,UAAU;QACRC,MAAM;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;QACN;IACF;IACAC,iBAAiB;QACfJ,MAAM;IACR;AACF,GACA;AAKF,OAAO,SAASK,SAAS,EACvBC,SAAS,EACTN,IAAI,EACJO,OAAO,EACPC,cAAc,EACdC,eAAe,EACf,GAAGC,OACW;IACd,qBACE,KAAChB,kBAAkBiB,IAAI;QACrBC,aAAU;QACVL,SAASA;QACTC,gBAAgBA;QAChBC,iBAAiBA;QACjBH,WAAWT,GACTC,iBAAiB;YAACE;QAAI,IACtB,4BAA4B;QAC5B,gEACA,0BAA0B;QAC1B,wCACA,0BAA0B;QAC1B,iDACA,gBAAgB;QAChB,kJACA,2DACA,oEACA,sBAAsB;QACtB,gLACA,uEACA,gFACA,iBAAiB;QACjB,gFACAM;QAED,GAAGI,KAAK;kBAET,cAAA,KAAChB,kBAAkBmB,SAAS;YAACP,WAAU;sBACpCC,YAAY,gCACX,KAACX;gBAAKkB,MAAK;gBAAeR,WAAU;gBAAUS,eAAY;+BAE1D,KAACnB;gBAAKkB,MAAK;gBAAQR,WAAU;gBAAUS,eAAY;;;;AAK7D"}

package/dist/components/checkbox/checkbox.stories.js

@@ -0,0 +1,566 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Code, Header } from '../../components/typography/index.js';
+import { Checkbox, CheckboxLabel, CheckboxLinks } from './index.js';
+const meta = {
+    title: 'Components/Checkbox',
+    component: Checkbox,
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        size: {
+            control: 'select',
+            options: [
+                'sm',
+                'md',
+                'lg'
+            ]
+        },
+        disabled: {
+            control: 'boolean'
+        },
+        checked: {
+            control: 'boolean'
+        }
+    },
+    args: {
+        size: 'md',
+        disabled: false
+    }
+};
+export default meta;
+export const Default = {
+    render: (args)=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-32",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-16",
+                    children: [
+                        /*#__PURE__*/ _jsx(Header, {
+                            variant: "h4",
+                            children: "Controlled Checkbox"
+                        }),
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "Use the controls below to change the checkbox state"
+                        }),
+                        /*#__PURE__*/ _jsx(Checkbox, {
+                            ...args
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-32",
+                    children: [
+                        /*#__PURE__*/ _jsx(Header, {
+                            variant: "h4",
+                            children: "All States"
+                        }),
+                        [
+                            'sm',
+                            'md',
+                            'lg'
+                        ].map((size)=>/*#__PURE__*/ _jsxs("div", {
+                                className: "flex flex-wrap gap-16",
+                                children: [
+                                    /*#__PURE__*/ _jsxs(Header, {
+                                        variant: "h4",
+                                        children: [
+                                            "Size: ",
+                                            size
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "flex flex-col gap-8",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Code, {
+                                                variant: "label",
+                                                className: "text-foreground-neutral-subtle",
+                                                children: "Unchecked"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Checkbox, {
+                                                size: size
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "flex flex-col gap-8",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Code, {
+                                                variant: "label",
+                                                className: "text-foreground-neutral-subtle",
+                                                children: "Checked"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Checkbox, {
+                                                size: size,
+                                                checked: true
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "flex flex-col gap-8",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Code, {
+                                                variant: "label",
+                                                className: "text-foreground-neutral-subtle",
+                                                children: "Indeterminate"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Checkbox, {
+                                                size: size,
+                                                checked: "indeterminate"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "flex flex-col gap-8",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Code, {
+                                                variant: "label",
+                                                className: "text-foreground-neutral-subtle",
+                                                children: "Disabled (Unchecked)"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Checkbox, {
+                                                size: size,
+                                                disabled: true
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "flex flex-col gap-8",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Code, {
+                                                variant: "label",
+                                                className: "text-foreground-neutral-subtle",
+                                                children: "Disabled (Checked)"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Checkbox, {
+                                                size: size,
+                                                checked: true,
+                                                disabled: true
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "flex flex-col gap-8",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Code, {
+                                                variant: "label",
+                                                className: "text-foreground-neutral-subtle",
+                                                children: "Focus"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Checkbox, {
+                                                size: size,
+                                                className: "focus"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }, size))
+                    ]
+                })
+            ]
+        }),
+    parameters: {
+        pseudo: {
+            focusVisible: '.focus'
+        }
+    }
+};
+export const CheckboxLabelStory = {
+    render: ()=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-32 pb-64 pt-32 px-32 bg-background-neutral-base",
+            children: [
+                /*#__PURE__*/ _jsx(Code, {
+                    variant: "label",
+                    className: "text-foreground-neutral-subtle",
+                    children: "CHECKBOX LABEL - WITHOUT BORDER"
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-16",
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex flex-col gap-8",
+                            children: [
+                                /*#__PURE__*/ _jsx(Code, {
+                                    variant: "label",
+                                    className: "text-foreground-neutral-subtle text-xs",
+                                    children: "Default - Unchecked"
+                                }),
+                                /*#__PURE__*/ _jsx(CheckboxLabel, {
+                                    label: "Label",
+                                    optional: true,
+                                    showInfoIcon: true,
+                                    description: "The quick brown fox jumps over a lazy dog."
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex flex-col gap-8",
+                            children: [
+                                /*#__PURE__*/ _jsx(Code, {
+                                    variant: "label",
+                                    className: "text-foreground-neutral-subtle text-xs",
+                                    children: "Hover - Unchecked"
+                                }),
+                                /*#__PURE__*/ _jsx(CheckboxLabel, {
+                                    label: "Label",
+                                    optional: true,
+                                    showInfoIcon: true,
+                                    description: "The quick brown fox jumps over a lazy dog.",
+                                    className: "hover"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex flex-col gap-8",
+                            children: [
+                                /*#__PURE__*/ _jsx(Code, {
+                                    variant: "label",
+                                    className: "text-foreground-neutral-subtle text-xs",
+                                    children: "Default - Checked"
+                                }),
+                                /*#__PURE__*/ _jsx(CheckboxLabel, {
+                                    label: "Label",
+                                    optional: true,
+                                    showInfoIcon: true,
+                                    description: "The quick brown fox jumps over a lazy dog.",
+                                    checked: true
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex flex-col gap-8",
+                            children: [
+                                /*#__PURE__*/ _jsx(Code, {
+                                    variant: "label",
+                                    className: "text-foreground-neutral-subtle text-xs",
+                                    children: "Hover - Checked"
+                                }),
+                                /*#__PURE__*/ _jsx(CheckboxLabel, {
+                                    label: "Label",
+                                    optional: true,
+                                    showInfoIcon: true,
+                                    description: "The quick brown fox jumps over a lazy dog.",
+                                    checked: true,
+                                    className: "hover"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex flex-col gap-8",
+                            children: [
+                                /*#__PURE__*/ _jsx(Code, {
+                                    variant: "label",
+                                    className: "text-foreground-neutral-subtle text-xs",
+                                    children: "Default - Indeterminate"
+                                }),
+                                /*#__PURE__*/ _jsx(CheckboxLabel, {
+                                    label: "Label",
+                                    optional: true,
+                                    showInfoIcon: true,
+                                    description: "The quick brown fox jumps over a lazy dog.",
+                                    checked: "indeterminate"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex flex-col gap-8",
+                            children: [
+                                /*#__PURE__*/ _jsx(Code, {
+                                    variant: "label",
+                                    className: "text-foreground-neutral-subtle text-xs",
+                                    children: "Disabled - Checked"
+                                }),
+                                /*#__PURE__*/ _jsx(CheckboxLabel, {
+                                    label: "Label",
+                                    checked: true,
+                                    optional: true,
+                                    showInfoIcon: true,
+                                    description: "The quick brown fox jumps over a lazy dog.",
+                                    disabled: true
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex flex-col gap-8",
+                            children: [
+                                /*#__PURE__*/ _jsx(Code, {
+                                    variant: "label",
+                                    className: "text-foreground-neutral-subtle text-xs",
+                                    children: "Disabled - Unchecked"
+                                }),
+                                /*#__PURE__*/ _jsx(CheckboxLabel, {
+                                    label: "Label",
+                                    optional: true,
+                                    showInfoIcon: true,
+                                    description: "The quick brown fox jumps over a lazy dog.",
+                                    disabled: true
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(Code, {
+                    variant: "label",
+                    className: "text-foreground-neutral-subtle mt-32",
+                    children: "CHECKBOX LABEL - WITH BORDER"
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-16",
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex flex-col gap-8",
+                            children: [
+                                /*#__PURE__*/ _jsx(Code, {
+                                    variant: "label",
+                                    className: "text-foreground-neutral-subtle text-xs",
+                                    children: "Default - Unchecked"
+                                }),
+                                /*#__PURE__*/ _jsx(CheckboxLabel, {
+                                    id: "checkbox-border-default-unchecked",
+                                    label: "Label",
+                                    optional: true,
+                                    showInfoIcon: true,
+                                    description: "The quick brown fox jumps over a lazy dog.",
+                                    border: true
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex flex-col gap-8",
+                            children: [
+                                /*#__PURE__*/ _jsx(Code, {
+                                    variant: "label",
+                                    className: "text-foreground-neutral-subtle text-xs",
+                                    children: "Hover - Unchecked"
+                                }),
+                                /*#__PURE__*/ _jsx(CheckboxLabel, {
+                                    id: "checkbox-border-hover-unchecked",
+                                    label: "Label",
+                                    optional: true,
+                                    showInfoIcon: true,
+                                    description: "The quick brown fox jumps over a lazy dog.",
+                                    border: true,
+                                    className: "hover"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex flex-col gap-8",
+                            children: [
+                                /*#__PURE__*/ _jsx(Code, {
+                                    variant: "label",
+                                    className: "text-foreground-neutral-subtle text-xs",
+                                    children: "Focus - Unchecked"
+                                }),
+                                /*#__PURE__*/ _jsx(CheckboxLabel, {
+                                    id: "checkbox-border-focus-unchecked",
+                                    label: "Label",
+                                    optional: true,
+                                    showInfoIcon: true,
+                                    description: "The quick brown fox jumps over a lazy dog.",
+                                    border: true,
+                                    className: "focus"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex flex-col gap-8",
+                            children: [
+                                /*#__PURE__*/ _jsx(Code, {
+                                    variant: "label",
+                                    className: "text-foreground-neutral-subtle text-xs",
+                                    children: "Default - Checked"
+                                }),
+                                /*#__PURE__*/ _jsx(CheckboxLabel, {
+                                    id: "checkbox-border-default-checked",
+                                    label: "Label",
+                                    optional: true,
+                                    showInfoIcon: true,
+                                    description: "The quick brown fox jumps over a lazy dog.",
+                                    checked: true,
+                                    border: true
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex flex-col gap-8",
+                            children: [
+                                /*#__PURE__*/ _jsx(Code, {
+                                    variant: "label",
+                                    className: "text-foreground-neutral-subtle text-xs",
+                                    children: "Hover - Checked"
+                                }),
+                                /*#__PURE__*/ _jsx(CheckboxLabel, {
+                                    id: "checkbox-border-hover-checked",
+                                    label: "Label",
+                                    optional: true,
+                                    showInfoIcon: true,
+                                    description: "The quick brown fox jumps over a lazy dog.",
+                                    checked: true,
+                                    border: true,
+                                    className: "hover"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex flex-col gap-8",
+                            children: [
+                                /*#__PURE__*/ _jsx(Code, {
+                                    variant: "label",
+                                    className: "text-foreground-neutral-subtle text-xs",
+                                    children: "Focus - Checked"
+                                }),
+                                /*#__PURE__*/ _jsx(CheckboxLabel, {
+                                    id: "checkbox-border-focus-checked",
+                                    label: "Label",
+                                    optional: true,
+                                    showInfoIcon: true,
+                                    description: "The quick brown fox jumps over a lazy dog.",
+                                    checked: true,
+                                    border: true,
+                                    className: "focus"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex flex-col gap-8",
+                            children: [
+                                /*#__PURE__*/ _jsx(Code, {
+                                    variant: "label",
+                                    className: "text-foreground-neutral-subtle text-xs",
+                                    children: "Default - Indeterminate"
+                                }),
+                                /*#__PURE__*/ _jsx(CheckboxLabel, {
+                                    id: "checkbox-border-default-indeterminate",
+                                    label: "Label",
+                                    optional: true,
+                                    showInfoIcon: true,
+                                    description: "The quick brown fox jumps over a lazy dog.",
+                                    checked: "indeterminate",
+                                    border: true
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex flex-col gap-8",
+                            children: [
+                                /*#__PURE__*/ _jsx(Code, {
+                                    variant: "label",
+                                    className: "text-foreground-neutral-subtle text-xs",
+                                    children: "Disabled - Unchecked"
+                                }),
+                                /*#__PURE__*/ _jsx(CheckboxLabel, {
+                                    id: "checkbox-border-disabled-unchecked",
+                                    label: "Label",
+                                    optional: true,
+                                    showInfoIcon: true,
+                                    description: "The quick brown fox jumps over a lazy dog.",
+                                    disabled: true,
+                                    border: true
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex flex-col gap-8",
+                            children: [
+                                /*#__PURE__*/ _jsx(Code, {
+                                    variant: "label",
+                                    className: "text-foreground-neutral-subtle text-xs",
+                                    children: "Disabled - Checked"
+                                }),
+                                /*#__PURE__*/ _jsx(CheckboxLabel, {
+                                    id: "checkbox-border-disabled-checked",
+                                    label: "Label",
+                                    optional: true,
+                                    showInfoIcon: true,
+                                    description: "The quick brown fox jumps over a lazy dog.",
+                                    checked: true,
+                                    disabled: true,
+                                    border: true
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex flex-col gap-8",
+                            children: [
+                                /*#__PURE__*/ _jsx(Code, {
+                                    variant: "label",
+                                    className: "text-foreground-neutral-subtle text-xs",
+                                    children: "Disabled - Indeterminate"
+                                }),
+                                /*#__PURE__*/ _jsx(CheckboxLabel, {
+                                    id: "checkbox-border-disabled-indeterminate",
+                                    label: "Label",
+                                    optional: true,
+                                    showInfoIcon: true,
+                                    description: "The quick brown fox jumps over a lazy dog.",
+                                    checked: "indeterminate",
+                                    disabled: true,
+                                    border: true
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+};
+CheckboxLabelStory.parameters = {
+    pseudo: {
+        hover: '.hover',
+        focusVisible: '.focus'
+    }
+};
+export const CheckboxLinksStory = {
+    args: {
+        disabled: true
+    },
+    render: ()=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-32 pb-64 pt-32 px-32 bg-background-neutral-base",
+            children: [
+                /*#__PURE__*/ _jsx(Code, {
+                    variant: "label",
+                    className: "text-foreground-neutral-subtle",
+                    children: "CHECKBOX LINKS"
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-16",
+                    children: [
+                        /*#__PURE__*/ _jsx(CheckboxLinks, {
+                            id: "checkbox-links-default",
+                            label: "Accept policies",
+                            links: [
+                                {
+                                    label: 'Terms of use',
+                                    href: '#'
+                                },
+                                {
+                                    label: 'Privacy Policy',
+                                    href: '#'
+                                }
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(CheckboxLinks, {
+                            id: "checkbox-links-checked",
+                            label: "Accept policies",
+                            links: [
+                                {
+                                    label: 'Terms of use',
+                                    href: '#'
+                                },
+                                {
+                                    label: 'Privacy Policy',
+                                    href: '#'
+                                }
+                            ],
+                            checked: true
+                        })
+                    ]
+                })
+            ]
+        })
+};
+
+//# sourceMappingURL=checkbox.stories.js.map