@agentero/design-system 0.26.3 → 0.27.1

package/mcp/manifests/components.json

@@ -1672,6 +1672,320 @@
       ],
       "import": "import { CheckList } from \"@agentero/design-system\";"
     },
+    "components-checkbox": {
+      "id": "components-checkbox",
+      "name": "Checkbox",
+      "path": "./src/checkbox/checkbox.stories.tsx",
+      "jsDocTags": {
+        "summary": [
+          "Base checkbox control, with mixed state, unaware of form libraries"
+        ],
+        "example": [
+          "<Label htmlFor=\"terms\">I accept the terms</Label>\n<Checkbox id=\"terms\" name=\"terms\" required />"
+        ]
+      },
+      "description": "Base control for a boolean the user confirms later. Headless: pair it with\na `Label` and `htmlFor`, or give it an `aria-label`. There is no `status`\nprop — set `aria-invalid` and the destructive treatment follows.",
+      "summary": "Base checkbox control, with mixed state, unaware of form libraries",
+      "reactComponentMeta": {
+        "displayName": "Checkbox",
+        "exportName": "Checkbox",
+        "filePath": "/home/runner/work/design-system/design-system/src/checkbox/checkbox.tsx",
+        "description": "Base control for a boolean the user confirms later: one item of a\nmulti-select, a terms tick, a row picked for a bulk action. Supports the\nmixed state for a parent that summarises a partially selected group.\nKeeps the legacy 16px surface, glyphs and state colours during adoption.\n\nHeadless like [Input](?path=/docs/components-input--docs): pair it with\n[Label](?path=/docs/components-label--docs) and `htmlFor`, or give it an\n`aria-label`. There is no `status` prop — set `aria-invalid`.\n\nUse [Switch](?path=/docs/components-switch--docs) when the change applies\nimmediately, and [CheckList](?path=/docs/components-check-list--docs) for a\nread-only list of ticked items.",
+        "jsDocTags": {
+          "summary": [
+            "Base checkbox control, with mixed state, unaware of form libraries"
+          ],
+          "example": [
+            "<Label htmlFor=\"terms\">I accept the terms</Label>\n<Checkbox id=\"terms\" name=\"terms\" required />"
+          ]
+        },
+        "props": {
+          "defaultChecked": {
+            "name": "defaultChecked",
+            "required": false,
+            "type": {
+              "name": "CheckedState | undefined"
+            },
+            "description": "Initial state for an uncontrolled checkbox.",
+            "defaultValue": null,
+            "parent": {
+              "name": "CheckboxProps",
+              "fileName": "node_modules/@radix-ui/react-checkbox/dist/index.d.mts"
+            },
+            "declarations": [
+              {
+                "name": "CheckboxProps",
+                "fileName": "node_modules/@radix-ui/react-checkbox/dist/index.d.mts"
+              },
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/checkbox/checkbox.tsx"
+              }
+            ]
+          },
+          "aria-invalid": {
+            "name": "aria-invalid",
+            "required": false,
+            "type": {
+              "name": "boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\" | undefined"
+            },
+            "description": "Indicates the entered value does not conform to the format expected by the application.\nDrives the destructive border and fill. Point `aria-describedby` at the error message.",
+            "defaultValue": null,
+            "parent": {
+              "name": "AriaAttributes",
+              "fileName": "node_modules/@types/react/index.d.ts"
+            },
+            "declarations": [
+              {
+                "name": "AriaAttributes",
+                "fileName": "node_modules/@types/react/index.d.ts"
+              },
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/checkbox/checkbox.tsx"
+              }
+            ]
+          },
+          "asChild": {
+            "name": "asChild",
+            "required": false,
+            "type": {
+              "name": "boolean"
+            },
+            "description": "",
+            "defaultValue": null,
+            "parent": {
+              "name": "PrimitivePropsWithRef",
+              "fileName": "node_modules/@radix-ui/react-label/node_modules/@radix-ui/react-primitive/dist/index.d.mts"
+            },
+            "declarations": [
+              {
+                "name": "TypeLiteral",
+                "fileName": "node_modules/@radix-ui/react-label/node_modules/@radix-ui/react-primitive/dist/index.d.mts"
+              }
+            ]
+          },
+          "value": {
+            "name": "value",
+            "required": false,
+            "type": {
+              "name": "string | (readonly string[] & string) | undefined"
+            },
+            "description": "Value submitted when checked. Defaults to `'on'`.",
+            "defaultValue": null,
+            "parent": {
+              "name": "ButtonHTMLAttributes",
+              "fileName": "node_modules/@types/react/index.d.ts"
+            },
+            "declarations": [
+              {
+                "name": "ButtonHTMLAttributes",
+                "fileName": "node_modules/@types/react/index.d.ts"
+              },
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/checkbox/checkbox.tsx"
+              }
+            ]
+          },
+          "disabled": {
+            "name": "disabled",
+            "required": false,
+            "type": {
+              "name": "boolean"
+            },
+            "description": "Blocks interaction and greys the box out; the value is not submitted.",
+            "defaultValue": null,
+            "parent": {
+              "name": "ButtonHTMLAttributes",
+              "fileName": "node_modules/@types/react/index.d.ts"
+            },
+            "declarations": [
+              {
+                "name": "ButtonHTMLAttributes",
+                "fileName": "node_modules/@types/react/index.d.ts"
+              },
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/checkbox/checkbox.tsx"
+              }
+            ]
+          },
+          "name": {
+            "name": "name",
+            "required": false,
+            "type": {
+              "name": "string"
+            },
+            "description": "Form field name. Needed for uncontrolled form usage.",
+            "defaultValue": null,
+            "parent": {
+              "name": "ButtonHTMLAttributes",
+              "fileName": "node_modules/@types/react/index.d.ts"
+            },
+            "declarations": [
+              {
+                "name": "ButtonHTMLAttributes",
+                "fileName": "node_modules/@types/react/index.d.ts"
+              },
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/checkbox/checkbox.tsx"
+              }
+            ]
+          },
+          "checked": {
+            "name": "checked",
+            "required": false,
+            "type": {
+              "name": "CheckedState | undefined"
+            },
+            "description": "Controlled state. `'indeterminate'` renders a dash and announces `aria-checked=\"mixed\"`.",
+            "defaultValue": null,
+            "parent": {
+              "name": "CheckboxProps",
+              "fileName": "node_modules/@radix-ui/react-checkbox/dist/index.d.mts"
+            },
+            "declarations": [
+              {
+                "name": "CheckboxProps",
+                "fileName": "node_modules/@radix-ui/react-checkbox/dist/index.d.mts"
+              },
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/checkbox/checkbox.tsx"
+              }
+            ]
+          },
+          "required": {
+            "name": "required",
+            "required": false,
+            "type": {
+              "name": "boolean"
+            },
+            "description": "Marks the control required for the browser and assistive technology.",
+            "defaultValue": null,
+            "parent": {
+              "name": "CheckboxProps",
+              "fileName": "node_modules/@radix-ui/react-checkbox/dist/index.d.mts"
+            },
+            "declarations": [
+              {
+                "name": "CheckboxProps",
+                "fileName": "node_modules/@radix-ui/react-checkbox/dist/index.d.mts"
+              },
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/checkbox/checkbox.tsx"
+              }
+            ]
+          },
+          "onCheckedChange": {
+            "name": "onCheckedChange",
+            "required": false,
+            "type": {
+              "name": "(checked: CheckedState) => void"
+            },
+            "description": "Fires with the next state (`true`, `false` or `'indeterminate'`) on click and on Space.",
+            "defaultValue": null,
+            "parent": {
+              "name": "CheckboxProps",
+              "fileName": "node_modules/@radix-ui/react-checkbox/dist/index.d.mts"
+            },
+            "declarations": [
+              {
+                "name": "CheckboxProps",
+                "fileName": "node_modules/@radix-ui/react-checkbox/dist/index.d.mts"
+              },
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/checkbox/checkbox.tsx"
+              }
+            ]
+          }
+        }
+      },
+      "stories": [
+        {
+          "id": "components-checkbox--default",
+          "name": "Default",
+          "snippet": "const Default = () => <Checkbox disabled={false} aria-label=\"Select row\" />;",
+          "description": "",
+          "summary": "Default standalone checkbox"
+        },
+        {
+          "id": "components-checkbox--checked",
+          "name": "Checked",
+          "snippet": "const Checked = () => <Checkbox disabled={false} aria-label=\"Select row\" defaultChecked />;",
+          "description": "",
+          "summary": "Checked state"
+        },
+        {
+          "id": "components-checkbox--indeterminate",
+          "name": "Indeterminate",
+          "snippet": "const Indeterminate = () => <Checkbox disabled={false} aria-label=\"Select row\" checked=\"indeterminate\" />;",
+          "description": "A state you set, never one the user clicks into: use it for a parent that\ngoverns a partially selected group.",
+          "summary": "Mixed state for a partially selected group"
+        },
+        {
+          "id": "components-checkbox--uncontrolled-indeterminate",
+          "name": "Uncontrolled Indeterminate",
+          "snippet": "const UncontrolledIndeterminate = () => <Checkbox disabled={false} aria-label=\"Select row\" defaultChecked=\"indeterminate\" />;",
+          "description": "Starts mixed without a controlled value, then toggles through checked and unchecked.",
+          "summary": "Uncontrolled checkbox starting in the mixed state"
+        },
+        {
+          "id": "components-checkbox--disabled",
+          "name": "Disabled",
+          "snippet": "const Disabled = () => (\n    <div className=\"flex items-center gap-6\">\n        <Checkbox disabled aria-label=\"Disabled unchecked\" />\n        <Checkbox disabled defaultChecked aria-label=\"Disabled checked\" />\n        <Checkbox disabled checked=\"indeterminate\" aria-label=\"Disabled mixed\" />\n    </div>\n);",
+          "description": "",
+          "summary": "Disabled in every state"
+        },
+        {
+          "id": "components-checkbox--invalid",
+          "name": "Invalid",
+          "snippet": "const Invalid = () => (\n    <div className=\"flex flex-col gap-2\">\n        <div className=\"flex items-center gap-2\">\n            <Checkbox id=\"terms\" aria-invalid aria-describedby=\"terms-error\" required />\n            <Label htmlFor=\"terms\">I accept the terms of service</Label>\n        </div>\n        <p id=\"terms-error\" className=\"text-sm text-text-input-destructive\">\n            You must accept the terms to continue.\n        </p>\n    </div>\n);",
+          "description": "",
+          "summary": "Failed validation, driven by aria-invalid"
+        },
+        {
+          "id": "components-checkbox--with-label",
+          "name": "With Label",
+          "snippet": "const WithLabel = () => (\n    <div className=\"flex items-center gap-2\">\n        <Checkbox id=\"newsletter\" name=\"newsletter\" />\n        <Label htmlFor=\"newsletter\">Email me product updates</Label>\n    </div>\n);",
+          "description": "",
+          "summary": "Labelled checkbox with the text in the hit target"
+        },
+        {
+          "id": "components-checkbox--controlled",
+          "name": "Controlled",
+          "snippet": "const Controlled = () => {\n    const [accepted, setAccepted] = useState(false);\n\n    return (\n        <div className=\"flex items-center gap-2\">\n            <Checkbox\n                id=\"controlled\"\n                checked={accepted}\n                onCheckedChange={value => setAccepted(value === true)}\n            />\n            <Label htmlFor=\"controlled\">Auto-renew policy {accepted ? '(on)' : '(off)'}</Label>\n        </div>\n    );\n};",
+          "description": "",
+          "summary": "Controlled checkbox driven by component state"
+        },
+        {
+          "id": "components-checkbox--select-all",
+          "name": "Select All",
+          "snippet": "const SelectAll = () => {\n    const carriers = ['Openly', 'Lemonade', 'Bamboo'];\n    const [selected, setSelected] = useState<string[]>(['Openly']);\n    const allSelected = selected.length === carriers.length;\n\n    return (\n        <div className=\"flex flex-col gap-3\">\n            <div className=\"flex items-center gap-2\">\n                <Checkbox\n                    id=\"select-all\"\n                    checked={allSelected ? true : selected.length > 0 ? 'indeterminate' : false}\n                    onCheckedChange={value => setSelected(value === true ? carriers : [])}\n                />\n                <Label htmlFor=\"select-all\">Select all carriers</Label>\n            </div>\n            <div className=\"ms-6 flex flex-col gap-2\">\n                {carriers.map(carrier => (\n                    <div key={carrier} className=\"flex items-center gap-2\">\n                        <Checkbox\n                            id={carrier}\n                            checked={selected.includes(carrier)}\n                            onCheckedChange={value =>\n                                setSelected(prev =>\n                                    value === true ? [...prev, carrier] : prev.filter(name => name !== carrier)\n                                )\n                            }\n                        />\n                        <Label htmlFor={carrier}>{carrier}</Label>\n                    </div>\n                ))}\n            </div>\n        </div>\n    );\n};",
+          "description": "",
+          "summary": "Parent select-all checkbox governing a group"
+        },
+        {
+          "id": "components-checkbox--inside-selected-group",
+          "name": "Inside Selected Group",
+          "snippet": "const InsideSelectedGroup = () => (\n    <div className=\"group\" data-state=\"checked\">\n        <Checkbox aria-label=\"Select carriers\" defaultChecked=\"indeterminate\" />\n    </div>\n);",
+          "description": "A surrounding selection container must not change the checkbox's own glyph.",
+          "summary": "Mixed checkbox inside another selected group"
+        },
+        {
+          "id": "components-checkbox--legacy-states",
+          "name": "Legacy States",
+          "snippet": "const LegacyStates = () => (\n    <div className=\"flex flex-col gap-6\">\n        {[false, true].map(invalid => (\n            <div key={String(invalid)} className=\"flex flex-col gap-4\">\n                {[false, true].map(disabled => (\n                    <div key={String(disabled)} className=\"flex items-center gap-6\">\n                        {([false, true, 'indeterminate'] as const).map(checked => (\n                            <Checkbox\n                                key={String(checked)}\n                                aria-label={`${invalid ? 'Invalid' : 'Valid'} ${disabled ? 'disabled' : 'enabled'} ${checked}`}\n                                checked={checked}\n                                disabled={disabled}\n                                aria-invalid={invalid}\n                            />\n                        ))}\n                    </div>\n                ))}\n            </div>\n        ))}\n    </div>\n);",
+          "description": "Preserves the legacy palette and 16px footprint for every value and validation state.",
+          "summary": "Legacy checkbox colours across all interaction states"
+        }
+      ],
+      "import": "import { Checkbox, Label } from \"@agentero/design-system\";"
+    },
     "components-command": {
       "id": "components-command",
       "name": "Command.Root",
@@ -4384,13 +4698,13 @@
               }
             ]
           },
-          "placeholder": {
-            "name": "placeholder",
+          "required": {
+            "name": "required",
             "required": false,
             "type": {
-              "name": "string"
+              "name": "boolean"
             },
-            "description": "Short hint shown while the field is empty. It disappears on the first\nkeystroke, so it is never a substitute for a label.",
+            "description": "Marks the control required for both the browser and assistive technology.",
             "defaultValue": null,
             "parent": {
               "name": "InputHTMLAttributes",
@@ -4407,13 +4721,13 @@
               }
             ]
           },
-          "readOnly": {
-            "name": "readOnly",
+          "placeholder": {
+            "name": "placeholder",
             "required": false,
             "type": {
-              "name": "boolean"
+              "name": "string"
             },
-            "description": "Keeps the value focusable and copyable but not editable, and still\nsubmits it. Unlike `disabled`, it stays in the tab order.",
+            "description": "Short hint shown while the field is empty. It disappears on the first\nkeystroke, so it is never a substitute for a label.",
             "defaultValue": null,
             "parent": {
               "name": "InputHTMLAttributes",
@@ -4430,13 +4744,13 @@
               }
             ]
           },
-          "required": {
-            "name": "required",
+          "readOnly": {
+            "name": "readOnly",
             "required": false,
             "type": {
               "name": "boolean"
             },
-            "description": "Marks the control required for both the browser and assistive technology.",
+            "description": "Keeps the value focusable and copyable but not editable, and still\nsubmits it. Unlike `disabled`, it stays in the tab order.",
             "defaultValue": null,
             "parent": {
               "name": "InputHTMLAttributes",
@@ -4591,12 +4905,12 @@
             "defaultValue": null,
             "parent": {
               "name": "PrimitivePropsWithRef",
-              "fileName": "node_modules/cmdk/node_modules/@radix-ui/react-primitive/dist/index.d.mts"
+              "fileName": "node_modules/@radix-ui/react-label/node_modules/@radix-ui/react-primitive/dist/index.d.mts"
             },
             "declarations": [
               {
                 "name": "TypeLiteral",
-                "fileName": "node_modules/cmdk/node_modules/@radix-ui/react-primitive/dist/index.d.mts"
+                "fileName": "node_modules/@radix-ui/react-label/node_modules/@radix-ui/react-primitive/dist/index.d.mts"
               }
             ]
           },
@@ -5296,9 +5610,16 @@
           "snippet": "const WithAnchor = () => (\n    <Popover.Root>\n        <div className=\"flex flex-col items-center gap-4\">\n            <Popover.Anchor className=\"rounded-md border border-border-default-base-primary px-4 py-2 text-sm text-text-default-base-secondary\">\n                Anchored here\n            </Popover.Anchor>\n            <Popover.Trigger asChild>\n                <Button variant=\"secondary\">Toggle from below</Button>\n            </Popover.Trigger>\n        </div>\n        <Popover.Content side=\"top\">\n            <p className=\"text-sm text-text-default-base-primary\">Positioned against the anchor</p>\n        </Popover.Content>\n    </Popover.Root>\n);",
           "description": "`Anchor` positions the Content against an element other than the Trigger —\nuseful when the visual anchor differs from the toggle button.",
           "summary": "Popover positioned against a separate `Anchor` element"
+        },
+        {
+          "id": "components-popover--modal-from-inside-popover",
+          "name": "Modal From Inside Popover",
+          "snippet": "const ModalFromInsidePopover = () => (\n    <Popover.Root>\n        <Popover.Trigger asChild>\n            <Button variant=\"secondary\">Renewal 2026</Button>\n        </Popover.Trigger>\n        <Popover.Content align=\"start\">\n            <div className=\"flex flex-col gap-3\">\n                <p className=\"text-sm text-text-default-base-primary\">\n                    Applied to 12 contracts across 3 carriers.\n                </p>\n                <Modal.Root>\n                    <Modal.Trigger asChild>\n                        <Button variant=\"secondary\" size=\"sm\">\n                            Delete tag\n                        </Button>\n                    </Modal.Trigger>\n                    <Modal.Content>\n                        <Modal.Title>Delete this tag?</Modal.Title>\n                        <Modal.Description>\n                            It will be removed from the 12 contracts that carry it.\n                        </Modal.Description>\n                        <Modal.Footer>\n                            <Modal.Close asChild>\n                                <Button variant=\"ghost\">Cancel</Button>\n                            </Modal.Close>\n                            <Button variant=\"primary\">Delete</Button>\n                        </Modal.Footer>\n                    </Modal.Content>\n                </Modal.Root>\n            </div>\n        </Popover.Content>\n    </Popover.Root>\n);",
+          "description": "A Modal opened from a button inside the Popover. Both share\n`--z-index-top-layer`, so the modal opens last and paints over the popover\nwhile the overlay dims it. The popover stays mounted underneath, which keeps\nfocus returning to its trigger once the modal closes.",
+          "summary": "Modal opened from inside a Popover paints above it"
         }
       ],
-      "import": "import { Button, Popover } from \"@agentero/design-system\";"
+      "import": "import { Button, Modal, Popover } from \"@agentero/design-system\";"
     },
     "components-progress": {
       "id": "components-progress",
@@ -7261,6 +7582,6 @@
   },
   "meta": {
     "docgen": "react-component-meta",
-    "durationMs": 4038
+    "durationMs": 4717
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.26.3",
+	"version": "0.27.1",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",
@@ -45,6 +45,10 @@
 			"types": "./src/check-list/index.d.ts",
 			"import": "./src/check-list/index.js"
 		},
+		"./checkbox": {
+			"types": "./src/checkbox/index.d.ts",
+			"import": "./src/checkbox/index.js"
+		},
 		"./command": {
 			"types": "./src/command/index.d.ts",
 			"import": "./src/command/index.js"
@@ -150,6 +154,7 @@
 	"dependencies": {
 		"@radix-ui/react-accordion": "^1.2.14",
 		"@radix-ui/react-avatar": "^1.1.11",
+		"@radix-ui/react-checkbox": "^1.3.11",
 		"@radix-ui/react-dialog": "^1.1.19",
 		"@radix-ui/react-dropdown-menu": "^2.1.16",
 		"@radix-ui/react-hover-card": "^1.1.19",

package/src/checkbox/checkbox.d.ts

@@ -0,0 +1,74 @@
+import { ComponentPropsWithRef } from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+/** Style recipe for Checkbox. Slots: `root` (the box), `indicator` (the glyph). */
+export declare const checkboxRecipe: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            root?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            root?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    indicator: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            root?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    indicator: string;
+}, import('tailwind-variants').TVReturnType<unknown, {
+    root: string[];
+    indicator: string;
+}, undefined, unknown, unknown, undefined>>;
+/** Radix Checkbox root props; the ones redeclared here are the ones docgen would otherwise omit. */
+export type CheckboxProps = Omit<ComponentPropsWithRef<typeof CheckboxPrimitive.Root>, 'children'> & {
+    /** Controlled state. `'indeterminate'` renders a dash and announces `aria-checked="mixed"`. */
+    checked?: CheckboxPrimitive.CheckboxProps['checked'];
+    /** Initial state for an uncontrolled checkbox. */
+    defaultChecked?: CheckboxPrimitive.CheckboxProps['defaultChecked'];
+    /** Fires with the next state (`true`, `false` or `'indeterminate'`) on click and on Space. */
+    onCheckedChange?: CheckboxPrimitive.CheckboxProps['onCheckedChange'];
+    /** Blocks interaction and greys the box out; the value is not submitted. */
+    disabled?: boolean;
+    /** Marks the control required for the browser and assistive technology. */
+    required?: boolean;
+    /** Form field name. Needed for uncontrolled form usage. */
+    name?: string;
+    /** Value submitted when checked. Defaults to `'on'`. */
+    value?: string;
+    /** Drives the destructive border and fill. Point `aria-describedby` at the error message. */
+    'aria-invalid'?: ComponentPropsWithRef<'button'>['aria-invalid'];
+};
+/**
+ * Base control for a boolean the user confirms later: one item of a
+ * multi-select, a terms tick, a row picked for a bulk action. Supports the
+ * mixed state for a parent that summarises a partially selected group.
+ * Keeps the legacy 16px surface, glyphs and state colours during adoption.
+ *
+ * Headless like [Input](?path=/docs/components-input--docs): pair it with
+ * [Label](?path=/docs/components-label--docs) and `htmlFor`, or give it an
+ * `aria-label`. There is no `status` prop — set `aria-invalid`.
+ *
+ * Use [Switch](?path=/docs/components-switch--docs) when the change applies
+ * immediately, and [CheckList](?path=/docs/components-check-list--docs) for a
+ * read-only list of ticked items.
+ *
+ * @summary Base checkbox control, with mixed state, unaware of form libraries
+ *
+ * @example
+ * <Label htmlFor="terms">I accept the terms</Label>
+ * <Checkbox id="terms" name="terms" required />
+ */
+export declare const Checkbox: ({ className, ref, ...props }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;

package/src/checkbox/checkbox.js

@@ -0,0 +1,43 @@
+import { cn as e } from "../../lib/utils.js";
+import { IconCheck as t, IconMinus as n } from "./icons.js";
+import { tv as r } from "tailwind-variants";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import * as o from "@radix-ui/react-checkbox";
+//#region src/checkbox/checkbox.tsx
+var s = r({ slots: {
+	root: [
+		"group/checkbox box-border inline-flex size-4 shrink-0 appearance-none items-center justify-center rounded-sm",
+		"border border-solid border-border-input-default bg-bg-input-normal",
+		"cursor-pointer transition-colors duration-200 ease-in-out",
+		"data-[state=checked]:border-bg-checkbox-selected data-[state=checked]:bg-bg-checkbox-selected",
+		"data-[state=indeterminate]:border-bg-checkbox-selected data-[state=indeterminate]:bg-bg-checkbox-selected",
+		"outline-solid outline-2 outline-offset-2 outline-transparent",
+		"focus-visible:outline-focus-ring-button-primary",
+		"aria-invalid:border-border-input-destructive",
+		"aria-invalid:focus-visible:outline-focus-ring-button-destructive",
+		"aria-invalid:data-[state=checked]:border-bg-default-danger-primary aria-invalid:data-[state=checked]:bg-bg-default-danger-primary",
+		"aria-invalid:data-[state=indeterminate]:border-bg-default-danger-primary aria-invalid:data-[state=indeterminate]:bg-bg-default-danger-primary",
+		"disabled:cursor-not-allowed disabled:border-border-checkbox-disabled",
+		"disabled:data-[state=checked]:border-bg-checkbox-disabled disabled:data-[state=checked]:bg-bg-checkbox-disabled",
+		"disabled:data-[state=indeterminate]:border-bg-checkbox-disabled disabled:data-[state=indeterminate]:bg-bg-checkbox-disabled",
+		"aria-invalid:disabled:border-bg-checkbox-invalid-disabled",
+		"aria-invalid:disabled:data-[state=checked]:border-bg-checkbox-invalid-disabled aria-invalid:disabled:data-[state=checked]:bg-bg-checkbox-invalid-disabled",
+		"aria-invalid:disabled:data-[state=indeterminate]:border-bg-checkbox-invalid-disabled aria-invalid:disabled:data-[state=indeterminate]:bg-bg-checkbox-invalid-disabled"
+	],
+	indicator: "flex items-center justify-center text-text-default-base-inverse-primary"
+} }), c = ({ className: r, ref: c, ...l }) => {
+	let u = s();
+	return /* @__PURE__ */ i(o.Root, {
+		ref: c,
+		"data-slot": "checkbox",
+		className: e(u.root(), r),
+		...l,
+		children: /* @__PURE__ */ a(o.Indicator, {
+			"data-slot": "checkbox-indicator",
+			className: u.indicator(),
+			children: [/* @__PURE__ */ i(t, { className: "hidden size-3.5 group-data-[state=checked]/checkbox:block" }), /* @__PURE__ */ i(n, { className: "hidden size-3.5 group-data-[state=indeterminate]/checkbox:block" })]
+		})
+	});
+};
+//#endregion
+export { c as Checkbox, s as checkboxRecipe };

package/src/checkbox/icons.d.ts

@@ -0,0 +1,5 @@
+import { SVGProps } from 'react';
+/** @summary Material Sharp check used by the legacy checkbox */
+export declare const IconCheck: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+/** @summary Rounded minus used by the legacy checkbox's mixed state */
+export declare const IconMinus: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/src/checkbox/icons.js

@@ -0,0 +1,28 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/checkbox/icons.tsx
+var t = (t) => /* @__PURE__ */ e("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "currentColor",
+	stroke: "currentColor",
+	"aria-hidden": "true",
+	xmlns: "http://www.w3.org/2000/svg",
+	...t,
+	children: /* @__PURE__ */ e("path", { d: "M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" })
+}), n = (t) => /* @__PURE__ */ e("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	xmlns: "http://www.w3.org/2000/svg",
+	...t,
+	children: /* @__PURE__ */ e("path", { d: "M5 12h14" })
+});
+//#endregion
+export { t as IconCheck, n as IconMinus };

package/src/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export { Checkbox, checkboxRecipe } from './checkbox';
+export type { CheckboxProps } from './checkbox';

package/src/checkbox/index.js

@@ -0,0 +1,2 @@
+import { Checkbox as e, checkboxRecipe as t } from "./checkbox.js";
+export { e as Checkbox, t as checkboxRecipe };

package/src/dropdown-menu/dropdown-menu.js

@@ -17,7 +17,7 @@ var s = ({ className: t, ...n }) => /* @__PURE__ */ r(a.Trigger, {
 s.displayName = "DropdownMenu.Trigger";
 var c = a.Portal, l = n({
 	base: [
-		"z-[1000] flex flex-col rounded-lg bg-bg-default-base-primary p-1 shadow-xl",
+		"z-(--z-index-top-layer) flex flex-col rounded-lg bg-bg-default-base-primary p-1 shadow-xl",
 		"border border-border-default-base-primary",
 		"will-change-[transform,opacity]",
 		"data-[state=open]:animate-[dropdownSlideIn_200ms_ease-out]",
@@ -73,7 +73,7 @@ var h = ({ className: n, children: o, ...s }) => /* @__PURE__ */ i(a.SubTrigger,
 });
 h.displayName = "DropdownMenu.SubTrigger";
 var g = n({ base: [
-	"z-[1000] flex flex-col rounded-lg bg-bg-default-base-primary p-1 shadow-xl",
+	"z-(--z-index-top-layer) flex flex-col rounded-lg bg-bg-default-base-primary p-1 shadow-xl",
 	"border border-border-default-base-primary",
 	"will-change-[transform,opacity]",
 	"data-[state=open]:animate-[dropdownSlideIn_200ms_ease-out]",

package/src/hover-card/hover-card.js

@@ -14,7 +14,7 @@ var o = (e) => /* @__PURE__ */ n(i.Trigger, {
 });
 o.displayName = "HoverCard.Trigger";
 var s = i.Portal, c = t({ base: [
-	"z-(--z-index-flyover) max-w-80 rounded-lg bg-bg-default-base-primary p-4 shadow-xl",
+	"z-(--z-index-top-layer) max-w-80 rounded-lg bg-bg-default-base-primary p-4 shadow-xl",
 	"border border-border-default-base-primary",
 	"text-sm text-text-default-base-primary",
 	"will-change-[transform,opacity]",