@verdify/ui 0.1.0

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,102 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/cn";
+import {
+  checkboxBoxVariants,
+  checkboxLabelVariants,
+  checkboxCheckGlyphVariants,
+  checkboxBarGlyphVariants
+} from "./checkbox.variants";
+let idSeq = 0;
+const Checkbox = React.forwardRef(
+  function Checkbox2({
+    className,
+    label,
+    description,
+    error,
+    size,
+    variant = "standalone",
+    indeterminate = false,
+    disabled = false,
+    id,
+    onCheckedChange,
+    ...props
+  }, forwardedRef) {
+    const reactId = React.useId();
+    const baseId = id ?? `checkbox-${reactId}-${idSeq += 1}`;
+    const descId = description ? `${baseId}-description` : void 0;
+    const errorId = error ? `${baseId}-error` : void 0;
+    const isMixed = variant === "parent" && indeterminate;
+    const innerRef = React.useRef(null);
+    React.useImperativeHandle(forwardedRef, () => innerRef.current);
+    React.useEffect(() => {
+      if (innerRef.current) innerRef.current.indeterminate = isMixed;
+    }, [isMixed]);
+    const describedBy = [descId, errorId].filter(Boolean).join(" ") || void 0;
+    const handleChange = (e) => {
+      onCheckedChange?.(e.currentTarget.checked);
+    };
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          "data-testid": "checkbox-control",
+          className: "flex min-h-(--size-target-mobile) items-center gap-2 sm:min-h-(--size-target-desktop)",
+          children: [
+            /* @__PURE__ */ jsxs("span", { className: "relative inline-flex shrink-0", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: innerRef,
+                  id: baseId,
+                  type: "checkbox",
+                  disabled,
+                  "aria-checked": isMixed ? "mixed" : void 0,
+                  "aria-invalid": error ? "true" : void 0,
+                  "aria-describedby": describedBy,
+                  onChange: handleChange,
+                  className: cn(checkboxBoxVariants({ size }), className),
+                  ...props
+                }
+              ),
+              !isMixed ? /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  "data-testid": "checkbox-check",
+                  "aria-hidden": "true",
+                  viewBox: "0 0 16 16",
+                  className: checkboxCheckGlyphVariants({ disabled }),
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2.5",
+                  children: /* @__PURE__ */ jsx("path", { d: "M3.5 8.5l3 3 6-6.5", strokeLinecap: "round", strokeLinejoin: "round" })
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  "data-testid": "checkbox-bar",
+                  "aria-hidden": "true",
+                  viewBox: "0 0 16 16",
+                  className: checkboxBarGlyphVariants({ disabled }),
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2.5",
+                  children: /* @__PURE__ */ jsx("path", { d: "M4 8h8", strokeLinecap: "round" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("label", { htmlFor: baseId, className: checkboxLabelVariants({ disabled }), children: label })
+          ]
+        }
+      ),
+      description ? /* @__PURE__ */ jsx("p", { id: descId, className: "text-caption text-text-secondary", children: description }) : null,
+      error ? /* @__PURE__ */ jsx("p", { id: errorId, className: "text-caption text-status-critical-fg", children: error }) : null
+    ] });
+  }
+);
+export {
+  Checkbox
+};
+//# sourceMappingURL=checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  checkboxBoxVariants,\n  checkboxLabelVariants,\n  checkboxCheckGlyphVariants,\n  checkboxBarGlyphVariants,\n  type CheckboxBoxVariantProps,\n} from \"./checkbox.variants\";\n\ntype NativeInputProps = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  \"size\" | \"type\" | \"onChange\"\n>;\n\nexport interface CheckboxProps extends NativeInputProps, CheckboxBoxVariantProps {\n  /** The visible text naming the choice. Becomes the accessible name via <label for>. */\n  label: string;\n  /** Secondary helper text beneath the label. Linked via aria-describedby. */\n  description?: string;\n  /** Validation message; sets aria-invalid and the critical-bordered error state. */\n  error?: string;\n  /** standalone = one value; parent = summarizes children (the only place mixed rests). */\n  variant?: \"standalone\" | \"parent\";\n  /** Mixed/“some children” state. Honored ONLY on variant=\"parent\"; ignored on standalone. */\n  indeterminate?: boolean;\n  /** Fired with the resolved boolean; a parent toggle resolves mixed → checked/unchecked. */\n  onCheckedChange?: (checked: boolean) => void;\n}\n\nlet idSeq = 0;\n\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n  function Checkbox(\n    {\n      className,\n      label,\n      description,\n      error,\n      size,\n      variant = \"standalone\",\n      indeterminate = false,\n      disabled = false,\n      id,\n      onCheckedChange,\n      ...props\n    },\n    forwardedRef,\n  ) {\n    const reactId = React.useId();\n    const baseId = id ?? `checkbox-${reactId}-${(idSeq += 1)}`;\n    const descId = description ? `${baseId}-description` : undefined;\n    const errorId = error ? `${baseId}-error` : undefined;\n\n    // indeterminate is a parent-only RESTING state — standalone never rests on mixed.\n    const isMixed = variant === \"parent\" && indeterminate;\n\n    const innerRef = React.useRef<HTMLInputElement>(null);\n    // bridge the forwarded ref to our inner ref (we need direct DOM access for indeterminate)\n    React.useImperativeHandle(forwardedRef, () => innerRef.current as HTMLInputElement);\n\n    // indeterminate is a DOM property, not an attribute — write it through the ref.\n    // This effect is why the component is a client component ('use client' above).\n    React.useEffect(() => {\n      if (innerRef.current) innerRef.current.indeterminate = isMixed;\n    }, [isMixed]);\n\n    const describedBy =\n      [descId, errorId].filter(Boolean).join(\" \") || undefined;\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      // a direct parent toggle resolves mixed → a single state; never rests on mixed\n      onCheckedChange?.(e.currentTarget.checked);\n    };\n\n    return (\n      <div className=\"flex flex-col gap-1\">\n        {/* control row: the box + label share one hit area no smaller than the target token */}\n        <div\n          data-testid=\"checkbox-control\"\n          className=\"flex min-h-(--size-target-mobile) items-center gap-2 sm:min-h-(--size-target-desktop)\"\n        >\n          {/* relative overlay: the box (peer) + the indicator glyphs it drives.\n              The glyphs are siblings AFTER the input so peer-* can reach them. */}\n          <span className=\"relative inline-flex shrink-0\">\n            <input\n              ref={innerRef}\n              id={baseId}\n              type=\"checkbox\"\n              disabled={disabled}\n              aria-checked={isMixed ? \"mixed\" : undefined}\n              aria-invalid={error ? \"true\" : undefined}\n              aria-describedby={describedBy}\n              onChange={handleChange}\n              className={cn(checkboxBoxVariants({ size }), className)}\n              {...props}\n            />\n            {/* check: only when :checked; never rendered in the mixed state so the\n                bar wins for an indeterminate parent (check and bar stay exclusive) */}\n            {!isMixed ? (\n              <svg\n                data-testid=\"checkbox-check\"\n                aria-hidden=\"true\"\n                viewBox=\"0 0 16 16\"\n                className={checkboxCheckGlyphVariants({ disabled })}\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2.5\"\n              >\n                <path d=\"M3.5 8.5l3 3 6-6.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n              </svg>\n            ) : null}\n            {/* horizontal bar: the single indeterminate mark, only when :indeterminate */}\n            <svg\n              data-testid=\"checkbox-bar\"\n              aria-hidden=\"true\"\n              viewBox=\"0 0 16 16\"\n              className={checkboxBarGlyphVariants({ disabled })}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2.5\"\n            >\n              <path d=\"M4 8h8\" strokeLinecap=\"round\" />\n            </svg>\n          </span>\n          <label htmlFor={baseId} className={checkboxLabelVariants({ disabled })}>\n            {label}\n          </label>\n        </div>\n        {description ? (\n          <p id={descId} className=\"text-caption text-text-secondary\">\n            {description}\n          </p>\n        ) : null}\n        {error ? (\n          <p id={errorId} className=\"text-caption text-status-critical-fg\">\n            {error}\n          </p>\n        ) : null}\n      </div>\n    );\n  },\n);\n"],"mappings":";AAsFU,SACE,KADF;AApFV,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAsBP,IAAI,QAAQ;AAEL,MAAM,WAAW,MAAM;AAAA,EAC5B,SAASA,UACP;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,cACA;AACA,UAAM,UAAU,MAAM,MAAM;AAC5B,UAAM,SAAS,MAAM,YAAY,OAAO,IAAK,SAAS,CAAE;AACxD,UAAM,SAAS,cAAc,GAAG,MAAM,iBAAiB;AACvD,UAAM,UAAU,QAAQ,GAAG,MAAM,WAAW;AAG5C,UAAM,UAAU,YAAY,YAAY;AAExC,UAAM,WAAW,MAAM,OAAyB,IAAI;AAEpD,UAAM,oBAAoB,cAAc,MAAM,SAAS,OAA2B;AAIlF,UAAM,UAAU,MAAM;AACpB,UAAI,SAAS,QAAS,UAAS,QAAQ,gBAAgB;AAAA,IACzD,GAAG,CAAC,OAAO,CAAC;AAEZ,UAAM,cACJ,CAAC,QAAQ,OAAO,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AAEjD,UAAM,eAAe,CAAC,MAA2C;AAE/D,wBAAkB,EAAE,cAAc,OAAO;AAAA,IAC3C;AAEA,WACE,qBAAC,SAAI,WAAU,uBAEb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,eAAY;AAAA,UACZ,WAAU;AAAA,UAIV;AAAA,iCAAC,UAAK,WAAU,iCACd;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAK;AAAA,kBACL,IAAI;AAAA,kBACJ,MAAK;AAAA,kBACL;AAAA,kBACA,gBAAc,UAAU,UAAU;AAAA,kBAClC,gBAAc,QAAQ,SAAS;AAAA,kBAC/B,oBAAkB;AAAA,kBAClB,UAAU;AAAA,kBACV,WAAW,GAAG,oBAAoB,EAAE,KAAK,CAAC,GAAG,SAAS;AAAA,kBACrD,GAAG;AAAA;AAAA,cACN;AAAA,cAGC,CAAC,UACA;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAY;AAAA,kBACZ,eAAY;AAAA,kBACZ,SAAQ;AAAA,kBACR,WAAW,2BAA2B,EAAE,SAAS,CAAC;AAAA,kBAClD,MAAK;AAAA,kBACL,QAAO;AAAA,kBACP,aAAY;AAAA,kBAEZ,8BAAC,UAAK,GAAE,sBAAqB,eAAc,SAAQ,gBAAe,SAAQ;AAAA;AAAA,cAC5E,IACE;AAAA,cAEJ;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAY;AAAA,kBACZ,eAAY;AAAA,kBACZ,SAAQ;AAAA,kBACR,WAAW,yBAAyB,EAAE,SAAS,CAAC;AAAA,kBAChD,MAAK;AAAA,kBACL,QAAO;AAAA,kBACP,aAAY;AAAA,kBAEZ,8BAAC,UAAK,GAAE,UAAS,eAAc,SAAQ;AAAA;AAAA,cACzC;AAAA,eACF;AAAA,YACA,oBAAC,WAAM,SAAS,QAAQ,WAAW,sBAAsB,EAAE,SAAS,CAAC,GAClE,iBACH;AAAA;AAAA;AAAA,MACF;AAAA,MACC,cACC,oBAAC,OAAE,IAAI,QAAQ,WAAU,oCACtB,uBACH,IACE;AAAA,MACH,QACC,oBAAC,OAAE,IAAI,SAAS,WAAU,wCACvB,iBACH,IACE;AAAA,OACN;AAAA,EAEJ;AACF;","names":["Checkbox"]}

package/dist/components/checkbox/checkbox.variants.d.ts

@@ -0,0 +1,15 @@
+import { type VariantProps } from "class-variance-authority";
+export declare const checkboxBoxVariants: (props?: ({
+    size?: "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const checkboxCheckGlyphVariants: (props?: ({
+    readonly disabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const checkboxBarGlyphVariants: (props?: ({
+    readonly disabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const checkboxLabelVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type CheckboxBoxVariantProps = VariantProps<typeof checkboxBoxVariants>;
+//# sourceMappingURL=checkbox.variants.d.ts.map

package/dist/components/checkbox/checkbox.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.variants.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,eAAO,MAAM,mBAAmB;;8EAmC/B,CAAC;AA6BF,eAAO,MAAM,0BAA0B;;8EAGtC,CAAC;AAEF,eAAO,MAAM,wBAAwB;;8EAGpC,CAAC;AAGF,eAAO,MAAM,qBAAqB;;8EAKhC,CAAC;AAEH,MAAM,MAAM,uBAAuB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}

package/dist/components/checkbox/checkbox.variants.js

@@ -0,0 +1,70 @@
+import { cva } from "class-variance-authority";
+const checkboxBoxVariants = cva(
+  [
+    // shape + neutral control tier at rest (unchecked)
+    "peer shrink-0 appearance-none rounded-sm border bg-control-bg text-control-fg",
+    "border-border-default",
+    // hover: the box border strengthens; box + label read as one target
+    "hover:border-border-strong",
+    // selection accent (Sovereign Violet) — the brand, NOT a status — when set
+    "checked:bg-action-primary-bg checked:text-action-primary-fg",
+    "checked:border-action-primary-bg",
+    "indeterminate:bg-action-primary-bg indeterminate:text-action-primary-fg",
+    "indeterminate:border-action-primary-bg",
+    // functional toggle: fast + verdify easing, instant under reduced motion.
+    // Never the deliberate theatre — a checkbox toggle is not the verified-check moment.
+    "transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify)",
+    "motion-reduce:duration-(--motion-duration-instant)",
+    // visible 2px signal-blue ring at 2px offset, never removed
+    "outline-none",
+    "focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2",
+    // error: critical border marks the FIELD; the fill stays the selection accent
+    "aria-invalid:border-status-critical-border",
+    // disabled: not interactive; state still reads (a disabled-checked box reads checked).
+    // DEC-C / spec §4: a disabled control is dimmed via the disabled TOKEN on the
+    // indicator (text-text-disabled, below), NOT a blanket opacity-60 on the box.
+    "disabled:pointer-events-none"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-(--size-icon-sm) w-(--size-icon-sm)",
+        md: "h-(--size-icon-md) w-(--size-icon-md)"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+const indicatorBase = [
+  "pointer-events-none absolute inset-0 m-auto hidden h-3/4 w-3/4"
+];
+const indicatorColorVariants = {
+  variants: {
+    disabled: {
+      true: "text-text-disabled",
+      false: "text-action-primary-fg"
+    }
+  },
+  defaultVariants: { disabled: false }
+};
+const checkboxCheckGlyphVariants = cva(
+  [...indicatorBase, "peer-checked:block"],
+  indicatorColorVariants
+);
+const checkboxBarGlyphVariants = cva(
+  [...indicatorBase, "peer-indeterminate:block"],
+  indicatorColorVariants
+);
+const checkboxLabelVariants = cva("text-text-primary select-none", {
+  variants: {
+    disabled: { true: "text-text-disabled", false: "" }
+  },
+  defaultVariants: { disabled: false }
+});
+export {
+  checkboxBarGlyphVariants,
+  checkboxBoxVariants,
+  checkboxCheckGlyphVariants,
+  checkboxLabelVariants
+};
+//# sourceMappingURL=checkbox.variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/checkbox/checkbox.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// The square box that carries the visual state. Token binding lives here ONLY.\n// `peer` so the overlaid indicator glyphs can react to :checked / :indeterminate.\nexport const checkboxBoxVariants = cva(\n  [\n    // shape + neutral control tier at rest (unchecked)\n    \"peer shrink-0 appearance-none rounded-sm border bg-control-bg text-control-fg\",\n    \"border-border-default\",\n    // hover: the box border strengthens; box + label read as one target\n    \"hover:border-border-strong\",\n    // selection accent (Sovereign Violet) — the brand, NOT a status — when set\n    \"checked:bg-action-primary-bg checked:text-action-primary-fg\",\n    \"checked:border-action-primary-bg\",\n    \"indeterminate:bg-action-primary-bg indeterminate:text-action-primary-fg\",\n    \"indeterminate:border-action-primary-bg\",\n    // functional toggle: fast + verdify easing, instant under reduced motion.\n    // Never the deliberate theatre — a checkbox toggle is not the verified-check moment.\n    \"transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify)\",\n    \"motion-reduce:duration-(--motion-duration-instant)\",\n    // visible 2px signal-blue ring at 2px offset, never removed\n    \"outline-none\",\n    \"focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n    // error: critical border marks the FIELD; the fill stays the selection accent\n    \"aria-invalid:border-status-critical-border\",\n    // disabled: not interactive; state still reads (a disabled-checked box reads checked).\n    // DEC-C / spec §4: a disabled control is dimmed via the disabled TOKEN on the\n    // indicator (text-text-disabled, below), NOT a blanket opacity-60 on the box.\n    \"disabled:pointer-events-none\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"h-(--size-icon-sm) w-(--size-icon-sm)\",\n        md: \"h-(--size-icon-md) w-(--size-icon-md)\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\n// The overlaid indicator glyphs sit absolutely over the box and are colored by\n// the action-primary FOREGROUND — the glyph on the brand accent fill (spec §5),\n// never a status color. `peer-*` drives visibility from the sibling input's\n// native :checked / :indeterminate state; both glyphs are pointer-transparent\n// and aria-hidden (the input carries role/state). Each glyph is centered over\n// the box and drawn at three-quarters of the box so it never touches the edge.\n//\n// DEC-C / spec §4·§5: when the control is disabled the indicator (check / bar)\n// renders in --color-text-disabled — the SAME token the label dims to — NOT a\n// blanket opacity-60 dim of the whole box. The glyph is a sibling AFTER the peer\n// input, so a `disabled` cva variant (driven by the explicit prop, mirroring\n// checkboxLabelVariants) flips text-action-primary-fg → text-text-disabled.\nconst indicatorBase = [\n  \"pointer-events-none absolute inset-0 m-auto hidden h-3/4 w-3/4\",\n];\nconst indicatorColorVariants = {\n  variants: {\n    disabled: {\n      true: \"text-text-disabled\",\n      false: \"text-action-primary-fg\",\n    },\n  },\n  defaultVariants: { disabled: false },\n} as const;\n// Check glyph: shown when the peer input is :checked. The mixed (parent-only)\n// case never renders this glyph (it is omitted in JSX when isMixed), so the\n// check and the bar stay mutually exclusive without brittle variant stacking.\nexport const checkboxCheckGlyphVariants = cva(\n  [...indicatorBase, \"peer-checked:block\"],\n  indicatorColorVariants,\n);\n// Horizontal-bar glyph: shown only when the peer input is :indeterminate.\nexport const checkboxBarGlyphVariants = cva(\n  [...indicatorBase, \"peer-indeterminate:block\"],\n  indicatorColorVariants,\n);\n\n// The label naming the choice; part of the hit area.\nexport const checkboxLabelVariants = cva(\"text-text-primary select-none\", {\n  variants: {\n    disabled: { true: \"text-text-disabled\", false: \"\" },\n  },\n  defaultVariants: { disabled: false },\n});\n\nexport type CheckboxBoxVariantProps = VariantProps<typeof checkboxBoxVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AAIhC,MAAM,sBAAsB;AAAA,EACjC;AAAA;AAAA,IAEE;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,MAAM,KAAK;AAAA,EAChC;AACF;AAcA,MAAM,gBAAgB;AAAA,EACpB;AACF;AACA,MAAM,yBAAyB;AAAA,EAC7B,UAAU;AAAA,IACR,UAAU;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,UAAU,MAAM;AACrC;AAIO,MAAM,6BAA6B;AAAA,EACxC,CAAC,GAAG,eAAe,oBAAoB;AAAA,EACvC;AACF;AAEO,MAAM,2BAA2B;AAAA,EACtC,CAAC,GAAG,eAAe,0BAA0B;AAAA,EAC7C;AACF;AAGO,MAAM,wBAAwB,IAAI,iCAAiC;AAAA,EACxE,UAAU;AAAA,IACR,UAAU,EAAE,MAAM,sBAAsB,OAAO,GAAG;AAAA,EACpD;AAAA,EACA,iBAAiB,EAAE,UAAU,MAAM;AACrC,CAAC;","names":[]}

package/dist/components/checkbox/index.d.ts

@@ -0,0 +1,3 @@
+export { Checkbox, type CheckboxProps } from "./checkbox";
+export { checkboxBoxVariants, checkboxLabelVariants, type CheckboxBoxVariantProps, } from "./checkbox.variants";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EACL,mBAAmB,EACnB,qBAAqB,EACrB,KAAK,uBAAuB,GAC7B,MAAM,qBAAqB,CAAC"}

package/dist/components/checkbox/index.js

@@ -0,0 +1,11 @@
+import { Checkbox } from "./checkbox";
+import {
+  checkboxBoxVariants,
+  checkboxLabelVariants
+} from "./checkbox.variants";
+export {
+  Checkbox,
+  checkboxBoxVariants,
+  checkboxLabelVariants
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/checkbox/index.ts"],"sourcesContent":["export { Checkbox, type CheckboxProps } from \"./checkbox\";\nexport {\n  checkboxBoxVariants,\n  checkboxLabelVariants,\n  type CheckboxBoxVariantProps,\n} from \"./checkbox.variants\";\n"],"mappings":"AAAA,SAAS,gBAAoC;AAC7C;AAAA,EACE;AAAA,EACA;AAAA,OAEK;","names":[]}

package/dist/components/command-palette/command-palette.d.ts

@@ -0,0 +1,76 @@
+import * as React from "react";
+export type CommandPaletteVariant = "commands" | "navigation" | "with-recent" | "scoped";
+export interface CommandPaletteItem {
+    /** Stable id — the option's DOM id derives from it (spec §7 aria-activedescendant target). */
+    id: string;
+    /** The result label — the row's accessible name; the row names itself by this, not its icon (spec §2). */
+    label: string;
+    /** Optional secondary line under the label (spec §2 option). Where a disabled row's short reason fits (spec §4 Disabled). */
+    secondary?: string;
+    /** Optional leading icon (spec §2): decorative, --size-icon-md; the row names itself by its label. */
+    icon?: React.ReactNode;
+    /** Optional trailing keyboard-shortcut hint (spec §2): muted label role, never a focus stop. */
+    shortcut?: React.ReactNode;
+    /** A non-runnable row (spec §4 Disabled): aria-disabled, skipped by arrow movement, not activatable. */
+    disabled?: boolean;
+    /** The group heading this row sits under (spec §2 group-label). Consecutive same-group rows are grouped. */
+    group?: string;
+}
+export interface CommandPaletteProps {
+    /** Controlled open state — the host surface owns the open shortcut (commonly Cmd/Ctrl+K), not this component (spec §6). */
+    open: boolean;
+    /** Reports open changes; called with `false` on Escape, scrim click, or running a result (spec §6/§7). */
+    onOpenChange: (open: boolean) => void;
+    /**
+     * The input's accessible name (spec §7): the input has no visible label, so it names itself via
+     * `aria-label` (for example "Search commands"). The placeholder is NEVER the accessible name.
+     */
+    inputLabel: string;
+    /** The runnable results, optionally grouped by `group` (spec §2 listbox / option). */
+    items: CommandPaletteItem[];
+    /**
+     * The recent commands/destinations shown BEFORE any query (spec §3 `with-recent`), so the frequent
+     * case is one keystroke away. Replaced by filtered `items` as soon as you type.
+     */
+    recent?: CommandPaletteItem[];
+    /** Intent (spec §3): `commands` (default), `navigation`, `with-recent`, or `scoped`. */
+    variant?: CommandPaletteVariant;
+    /** The input placeholder (spec §2): de-emphasised, never the accessible name. */
+    placeholder?: string;
+    /**
+     * Results are resolving (spec §4 Loading): sets the listbox `aria-busy` and announces busy state;
+     * the input stays focused and typeable so a slow source never freezes the keyboard. A wait is a
+     * plain wait, not theatre.
+     */
+    loading?: boolean;
+    /** The no-match text (spec §2 empty, §4): says nothing matched and what to try — never a dead end, never a blamed query. */
+    emptyText?: string;
+    /** A thin hint row showing the active keys (spec §2 footer), so the keyboard model is discoverable in place. */
+    footer?: React.ReactNode;
+    /** Run the active/clicked result (spec §6 Enter / pointer): fired with the item, after which the palette closes. */
+    onRun?: (item: CommandPaletteItem) => void;
+    className?: string;
+}
+/**
+ * CommandPalette is a keyboard-first launcher (spec §1): open it from anywhere, type a few letters,
+ * and run a command or jump to a place without leaving the keyboard. It is the accelerator OVER the
+ * visible navigation, not a replacement — every command in it is also reachable by pointer somewhere
+ * in the UI. Reach for a Menu to fire actions behind a trigger, a Select to pick a value, and the
+ * Sidebar for page-level navigation.
+ *
+ * It is a NEUTRAL overlay surface (spec §3): the scrim, panel, input, and result rows are neutral,
+ * and the active-row highlight is the SECONDARY hover fill — never Verified Green and never the
+ * brand violet. The active row reports WHERE you are in the list, not a verified result, so brand is
+ * not a state (G-U2); a verified meaning belongs to VerifiedBadge, never a palette row.
+ *
+ * It uses the WAI-ARIA APG combobox-with-listbox pattern: the input is the `role="combobox"` and the
+ * results are its `role="listbox"` popup, with the active option tracked by `aria-activedescendant`
+ * so DOM focus STAYS in the input the whole time (type-ahead keeps working, spec §4/§6/§7/§8). The
+ * OVERLAY shell — portal, focus trap, Escape, inert siblings, scrim — is the Radix `Dialog`
+ * primitive; the combobox/listbox roving is hand-rolled INSIDE it, because the spec's
+ * focus-stays-in-the-input contract is the OPPOSITE of Radix's focus-moving roving listbox and §8
+ * names focus-moving as a forbidden anti-pattern (skill: compose a role by hand when Radix can't
+ * express the spec's anatomy). A stateful component, so this file is `'use client'`.
+ */
+export declare function CommandPalette({ open, onOpenChange, inputLabel, items, recent, variant, placeholder, loading, emptyText, footer, onRun, className, }: CommandPaletteProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=command-palette.d.ts.map

package/dist/components/command-palette/command-palette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette.d.ts","sourceRoot":"","sources":["../../../src/components/command-palette/command-palette.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmB/B,MAAM,MAAM,qBAAqB,GAC7B,UAAU,GACV,YAAY,GACZ,aAAa,GACb,QAAQ,CAAC;AAEb,MAAM,WAAW,kBAAkB;IACjC,8FAA8F;IAC9F,EAAE,EAAE,MAAM,CAAC;IACX,0GAA0G;IAC1G,KAAK,EAAE,MAAM,CAAC;IACd,6HAA6H;IAC7H,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sGAAsG;IACtG,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,gGAAgG;IAChG,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,wGAAwG;IACxG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4GAA4G;IAC5G,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,mBAAmB;IAClC,2HAA2H;IAC3H,IAAI,EAAE,OAAO,CAAC;IACd,0GAA0G;IAC1G,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB,sFAAsF;IACtF,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC9B,wFAAwF;IACxF,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,iFAAiF;IACjF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4HAA4H;IAC5H,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gHAAgH;IAChH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,oHAAoH;IACpH,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAyCD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,KAAK,EACL,MAAM,EACN,OAAoB,EACpB,WAAW,EACX,OAAe,EACf,SAAoD,EACpD,MAAM,EACN,KAAK,EACL,SAAS,GACV,EAAE,mBAAmB,2CAyRrB"}

package/dist/components/command-palette/command-palette.js

@@ -0,0 +1,271 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+import { cn } from "../../lib/cn";
+import {
+  commandPaletteScrimClass,
+  commandPalettePanelClass,
+  commandPaletteInputClass,
+  commandPaletteSearchIconClass,
+  commandPaletteListboxClass,
+  commandPaletteGroupLabelClass,
+  commandPaletteOptionVariants,
+  commandPaletteLabelClass,
+  commandPaletteSecondaryClass,
+  commandPaletteOptionIconClass,
+  commandPaletteShortcutClass,
+  commandPaletteEmptyClass,
+  commandPaletteFooterClass
+} from "./command-palette.variants";
+function SearchGlyph() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "data-testid": "command-palette-search-glyph",
+      "aria-hidden": "true",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      className: "h-(--size-icon-md) w-(--size-icon-md)",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "7", cy: "7", r: "4.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M10.5 10.5L14 14", strokeLinecap: "round" })
+      ]
+    }
+  );
+}
+function groupItems(items) {
+  const out = [];
+  for (const item of items) {
+    const last = out[out.length - 1];
+    if (last && last.group === item.group) last.rows.push(item);
+    else out.push({ group: item.group, rows: [item] });
+  }
+  return out;
+}
+const matches = (item, query) => {
+  if (!query) return true;
+  const q = query.toLowerCase();
+  return item.label.toLowerCase().includes(q) || (item.secondary ? item.secondary.toLowerCase().includes(q) : false);
+};
+function CommandPalette({
+  open,
+  onOpenChange,
+  inputLabel,
+  items,
+  recent,
+  variant = "commands",
+  placeholder,
+  loading = false,
+  emptyText = "Nothing matched. Try a different word.",
+  footer,
+  onRun,
+  className
+}) {
+  void variant;
+  const reactId = React.useId();
+  const listboxId = `${reactId}-listbox`;
+  const inputId = `${reactId}-input`;
+  const statusId = `${reactId}-status`;
+  const inputRef = React.useRef(null);
+  const openerRef = React.useRef(null);
+  const [query, setQuery] = React.useState("");
+  const showRecent = query.length === 0 && recent !== void 0 && recent.length > 0;
+  const source = showRecent ? recent : items;
+  const visible = React.useMemo(
+    () => source.filter((item) => matches(item, query)),
+    [source, query]
+  );
+  const runnable = React.useMemo(() => visible.filter((item) => !item.disabled), [visible]);
+  const [activeId, setActiveId] = React.useState(null);
+  React.useEffect(() => {
+    setActiveId(runnable.length > 0 ? runnable[0].id : null);
+  }, [runnable]);
+  const optionDomId = (id) => `${reactId}-opt-${id}`;
+  const activeIndex = runnable.findIndex((item) => item.id === activeId);
+  const moveActive = (next) => {
+    if (runnable.length === 0) return;
+    const wrapped = (next % runnable.length + runnable.length) % runnable.length;
+    setActiveId(runnable[wrapped].id);
+  };
+  const runItem = (item) => {
+    if (item.disabled) return;
+    onRun?.(item);
+    onOpenChange(false);
+  };
+  const handleInputKeyDown = (event) => {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        moveActive(activeIndex < 0 ? 0 : activeIndex + 1);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        moveActive(activeIndex < 0 ? runnable.length - 1 : activeIndex - 1);
+        break;
+      case "Home":
+        event.preventDefault();
+        moveActive(0);
+        break;
+      case "End":
+        event.preventDefault();
+        moveActive(runnable.length - 1);
+        break;
+      case "PageDown":
+        event.preventDefault();
+        moveActive(Math.min(activeIndex + PAGE_STEP, runnable.length - 1));
+        break;
+      case "PageUp":
+        event.preventDefault();
+        moveActive(Math.max(activeIndex - PAGE_STEP, 0));
+        break;
+      case "Enter": {
+        event.preventDefault();
+        const item = runnable[activeIndex];
+        if (item) runItem(item);
+        break;
+      }
+      // Escape is handled on Content's onEscapeKeyDown (below), not here: Radix listens for Escape at
+      // the document level, so a React-bubbled stopPropagation on the input would not stop Radix's
+      // own close. Intercepting it on Content's onEscapeKeyDown is the only reliable seam.
+      default:
+        break;
+    }
+  };
+  const handleEscapeKeyDown = (event) => {
+    if (query.length > 0) {
+      event.preventDefault();
+      setQuery("");
+    }
+  };
+  const matchCount = visible.length;
+  const hasOptions = matchCount > 0;
+  const statusMessage = loading ? "Loading results." : matchCount === 0 ? "No results." : `${matchCount} result${matchCount === 1 ? "" : "s"}.`;
+  const groups = groupItems(visible);
+  const handleCloseAutoFocus = (event) => {
+    const opener = openerRef.current;
+    openerRef.current = null;
+    if (opener?.isConnected) {
+      event.preventDefault();
+      opener.focus();
+    }
+  };
+  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
+    /* @__PURE__ */ jsx(
+      DialogPrimitive.Overlay,
+      {
+        "data-testid": "command-palette-scrim",
+        className: commandPaletteScrimClass
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        "aria-modal": "true",
+        "aria-label": inputLabel,
+        className: cn(commandPalettePanelClass, className),
+        onOpenAutoFocus: (event) => {
+          event.preventDefault();
+          openerRef.current = document.activeElement ?? null;
+          inputRef.current?.focus();
+        },
+        onEscapeKeyDown: handleEscapeKeyDown,
+        onCloseAutoFocus: handleCloseAutoFocus,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx("span", { className: commandPaletteSearchIconClass, children: /* @__PURE__ */ jsx(SearchGlyph, {}) }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                id: inputId,
+                type: "text",
+                role: "combobox",
+                "aria-expanded": hasOptions,
+                "aria-controls": listboxId,
+                "aria-haspopup": "listbox",
+                "aria-activedescendant": activeId ? optionDomId(activeId) : void 0,
+                "aria-label": inputLabel,
+                "aria-describedby": statusId,
+                autoComplete: "off",
+                spellCheck: false,
+                placeholder,
+                value: query,
+                onChange: (event) => setQuery(event.target.value),
+                onKeyDown: handleInputKeyDown,
+                className: commandPaletteInputClass
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: listboxId,
+              role: hasOptions ? "listbox" : void 0,
+              "aria-label": hasOptions ? inputLabel : void 0,
+              "aria-busy": loading || void 0,
+              className: commandPaletteListboxClass,
+              children: !hasOptions && !loading ? (
+                // The empty state is announced as TEXT, never silence (spec §2 empty, §7 4.1.3).
+                /* @__PURE__ */ jsx("p", { className: commandPaletteEmptyClass, children: emptyText })
+              ) : groups.map((group, groupIndex) => {
+                const groupLabelId = `${reactId}-group-${groupIndex}`;
+                const rows = group.rows.map((item) => {
+                  const isActive = item.id === activeId;
+                  return /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      id: optionDomId(item.id),
+                      role: "option",
+                      "aria-selected": isActive,
+                      "aria-disabled": item.disabled || void 0,
+                      className: cn(commandPaletteOptionVariants()),
+                      onMouseMove: () => {
+                        if (!item.disabled) setActiveId(item.id);
+                      },
+                      onClick: () => runItem(item),
+                      children: [
+                        item.icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: commandPaletteOptionIconClass, children: item.icon }) : null,
+                        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+                          /* @__PURE__ */ jsx("span", { className: commandPaletteLabelClass, children: item.label }),
+                          item.secondary ? /* @__PURE__ */ jsx("span", { className: commandPaletteSecondaryClass, children: item.secondary }) : null
+                        ] }),
+                        item.shortcut ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: commandPaletteShortcutClass, children: item.shortcut }) : null
+                      ]
+                    },
+                    item.id
+                  );
+                });
+                if (!group.group) {
+                  return /* @__PURE__ */ jsx(React.Fragment, { children: rows }, groupIndex);
+                }
+                return /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": groupLabelId, children: [
+                  /* @__PURE__ */ jsx("p", { id: groupLabelId, className: commandPaletteGroupLabelClass, children: group.group }),
+                  rows
+                ] }, groupIndex);
+              })
+            }
+          ),
+          footer ? /* @__PURE__ */ jsx("div", { className: commandPaletteFooterClass, children: footer }) : null,
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              id: statusId,
+              role: "status",
+              "aria-live": "polite",
+              className: "sr-only",
+              children: statusMessage
+            }
+          )
+        ]
+      }
+    )
+  ] }) });
+}
+const PAGE_STEP = 8;
+export {
+  CommandPalette
+};
+//# sourceMappingURL=command-palette.js.map