@financedistrict/apps-ui 0.1.0

package/dist/button.cjs

@@ -0,0 +1,366 @@
+'use strict';
+
+var React = require('react');
+var react = require('@phosphor-icons/react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/button/Button.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+function buildCutPath({
+  W,
+  H,
+  cut,
+  rTR,
+  rBL,
+  rCut,
+  ox = 0,
+  oy = 0
+}) {
+  const rCutSq = rCut / Math.SQRT2;
+  const x = (v) => v + ox;
+  const y = (v) => v + oy;
+  return [
+    `M ${x(cut + rCut)} ${y(0)}`,
+    `L ${x(W - rTR)} ${y(0)}`,
+    `Q ${x(W)} ${y(0)} ${x(W)} ${y(rTR)}`,
+    `L ${x(W)} ${y(H - cut - rCut)}`,
+    `Q ${x(W)} ${y(H - cut)} ${x(W - rCutSq)} ${y(H - cut + rCutSq)}`,
+    `L ${x(W - cut + rCutSq)} ${y(H - rCutSq)}`,
+    `Q ${x(W - cut)} ${y(H)} ${x(W - cut - rCut)} ${y(H)}`,
+    `L ${x(rBL)} ${y(H)}`,
+    `Q ${x(0)} ${y(H)} ${x(0)} ${y(H - rBL)}`,
+    `L ${x(0)} ${y(cut + rCut)}`,
+    `Q ${x(0)} ${y(cut)} ${x(rCutSq)} ${y(cut - rCutSq)}`,
+    `L ${x(cut - rCutSq)} ${y(rCutSq)}`,
+    `Q ${x(cut)} ${y(0)} ${x(cut + rCut)} ${y(0)}`,
+    `Z`
+  ].join(" ");
+}
+function useCutCornerClipPath(cut, {
+  radius = 2,
+  radiusCuts,
+  radiusTopRight,
+  radiusBottomLeft,
+  outset
+} = {}) {
+  const ref = React__namespace.useRef(null);
+  const [clipPath, setClipPath] = React__namespace.useState();
+  const [pathD, setPathD] = React__namespace.useState();
+  const [outsetPathD, setOutsetPathD] = React__namespace.useState();
+  React__namespace.useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const rTR = radiusTopRight ?? radius;
+    const rBL = radiusBottomLeft ?? radius;
+    const rCut = radiusCuts ?? radius;
+    function compute(W, H) {
+      const d = buildCutPath({ W, H, cut, rTR, rBL, rCut });
+      setClipPath(`path('${d}')`);
+      setPathD(d);
+      if (outset != null) {
+        const g = outset;
+        setOutsetPathD(
+          buildCutPath({
+            W: W + 2 * g,
+            H: H + 2 * g,
+            cut: cut + (2 - Math.SQRT2) * g,
+            rTR: rTR + g,
+            rBL: rBL + g,
+            rCut: rCut + g,
+            ox: -g,
+            oy: -g
+          })
+        );
+      }
+    }
+    const initial = el.getBoundingClientRect();
+    compute(initial.width, initial.height);
+    const ro = new ResizeObserver((entries) => {
+      const box = entries[entries.length - 1]?.borderBoxSize?.[0];
+      if (box) {
+        compute(box.inlineSize, box.blockSize);
+      } else {
+        const rect = el.getBoundingClientRect();
+        compute(rect.width, rect.height);
+      }
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [cut, radius, radiusCuts, radiusTopRight, radiusBottomLeft, outset]);
+  return { ref, clipPath, pathD, outsetPathD };
+}
+var BUTTON_CUT = { cut: 8, radius: 2, radiusCuts: 0 };
+var buttonVariants = classVarianceAuthority.cva(
+  [
+    // Layout
+    "inline-flex shrink-0 items-center justify-center gap-1",
+    // Type — the Figma `button-01` text style (Archivo Medium 14/20)
+    "button-01",
+    // Shape — cut corners are applied as a clip-path in <Button>; keep the box square
+    "rounded-none",
+    // Transition
+    "transition-colors cursor-pointer",
+    // Suppress the native ring. The Figma focus ring is drawn OUTSIDE the
+    // clip-path (which would swallow an outline here), so cut-corner variants
+    // render it on the wrapper in <Button>; ghost renders it directly (below).
+    "outline-none",
+    // Disabled
+    "disabled:pointer-events-none disabled:cursor-not-allowed",
+    // Icons
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0"
+  ],
+  {
+    variants: {
+      variation: {
+        primary: [
+          "bg-button-primary-background text-button-primary-foreground",
+          "hover:bg-button-primary-accent active:bg-button-primary-accent",
+          "disabled:bg-button-primary-muted disabled:text-button-primary-foreground-muted"
+        ],
+        brand: [
+          "bg-button-brand-primary-background text-button-brand-primary-foreground",
+          "hover:bg-button-brand-primary-accent active:bg-button-brand-primary-accent",
+          "disabled:bg-button-primary-muted disabled:text-button-primary-foreground-muted"
+        ],
+        destructive: [
+          "bg-button-destructive-background text-button-destructive-primary-foreground",
+          "hover:bg-button-destructive-accent active:bg-button-destructive-accent",
+          "disabled:bg-button-primary-muted disabled:text-button-primary-foreground-muted"
+        ],
+        // Outline — background fill + an SVG stroke border drawn in <Button>.
+        secondary: [
+          "bg-button-secondary-background text-button-secondary-foreground",
+          "hover:text-button-secondary-foreground-accent active:text-button-secondary-foreground-accent",
+          "disabled:text-button-secondary-foreground-muted"
+        ],
+        // No background, no cut corner — so no wrapper; ring on the element.
+        // `outline-solid` restores the style that base `outline-none` zeroed.
+        ghost: [
+          "bg-transparent text-button-secondary-foreground",
+          "hover:text-button-secondary-foreground-accent active:text-button-secondary-foreground-accent",
+          "disabled:text-button-secondary-foreground-muted",
+          // `rounded-xs` (2px) keeps the ghost focus ring as sharp as the other
+          // variants' corners (which now use sharp chamfers + 2px square corners).
+          "rounded-xs focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus"
+        ]
+      },
+      size: {
+        sm: "h-8 px-2.5 [&_svg:not([class*='size-'])]:size-4",
+        md: "h-10 px-2.5 [&_svg:not([class*='size-'])]:size-4",
+        lg: "h-12 px-3 [&_svg:not([class*='size-'])]:size-4"
+      },
+      iconOnly: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // Icon-only: square footprint, no horizontal padding.
+      { iconOnly: true, size: "sm", className: "w-8 px-0" },
+      { iconOnly: true, size: "md", className: "w-10 px-0" },
+      { iconOnly: true, size: "lg", className: "w-12 px-0" },
+      // Ghost has no chamfer/background, so it sits flush with no inset padding.
+      { variation: "ghost", iconOnly: false, className: "px-0" }
+    ],
+    defaultVariants: {
+      variation: "primary",
+      size: "md",
+      iconOnly: false
+    }
+  }
+);
+var FOCUS_RING_GAP = 3;
+var FOCUS_RING_WIDTH = 2;
+function setRef(ref, node) {
+  if (typeof ref === "function") ref(node);
+  else if (ref) ref.current = node;
+}
+function Button({
+  className,
+  variation = "primary",
+  size = "md",
+  iconOnly = false,
+  asChild = false,
+  loading = false,
+  leftSlot,
+  rightSlot,
+  wrapperClassName,
+  disabled,
+  style,
+  children,
+  onClick,
+  ref,
+  ...props
+}) {
+  const {
+    ref: cutRef,
+    clipPath,
+    pathD,
+    outsetPathD
+  } = useCutCornerClipPath(BUTTON_CUT.cut, {
+    radius: BUTTON_CUT.radius,
+    radiusCuts: BUTTON_CUT.radiusCuts,
+    outset: FOCUS_RING_GAP
+  });
+  const setRootRef = React__namespace.useCallback(
+    (node) => {
+      cutRef.current = node;
+      setRef(ref, node);
+    },
+    [cutRef, ref]
+  );
+  const isDisabled = disabled;
+  const hasCutCorner = variation !== "ghost";
+  const hasSvgBorder = variation === "secondary";
+  const handleClick = loading ? (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+  } : onClick;
+  const rootClassName = cn(
+    buttonVariants({ variation, size, iconOnly }),
+    hasSvgBorder && "border-0",
+    loading && "pointer-events-none",
+    className
+  );
+  const rootStyle = hasCutCorner ? { ...style, clipPath } : style;
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    loading ? /* @__PURE__ */ jsxRuntime.jsx(react.CircleNotchIcon, { className: "animate-spin", "aria-hidden": "true" }) : leftSlot,
+    !iconOnly && children,
+    iconOnly && !loading && children,
+    !iconOnly && rightSlot
+  ] });
+  let rootEl;
+  if (asChild) {
+    if (!React__namespace.isValidElement(children)) {
+      throw new Error(
+        "Button: `asChild` requires a single React element child"
+      );
+    }
+    const child = children;
+    const childProps = child.props;
+    const childOnClick = childProps.onClick;
+    rootEl = React__namespace.cloneElement(
+      child,
+      {
+        ...props,
+        ...childProps,
+        "data-slot": "button",
+        "data-loading": loading || void 0,
+        "aria-busy": loading || void 0,
+        "aria-disabled": loading || void 0,
+        // Block activation while loading; otherwise run both handlers.
+        onClick: loading ? (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+        } : (event) => {
+          onClick?.(event);
+          childOnClick?.(event);
+        },
+        ref: (node) => {
+          setRootRef(node);
+          setRef(childProps.ref, node);
+        },
+        className: cn(
+          rootClassName,
+          childProps.className
+        ),
+        style: {
+          ...rootStyle,
+          ...childProps.style
+        }
+      },
+      loading ? /* @__PURE__ */ jsxRuntime.jsx(react.CircleNotchIcon, { className: "animate-spin", "aria-hidden": "true" }) : null,
+      childProps.children
+    );
+  } else {
+    rootEl = /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        "data-slot": "button",
+        "data-loading": loading || void 0,
+        "aria-busy": loading || void 0,
+        "aria-disabled": loading || void 0,
+        className: rootClassName,
+        style: rootStyle,
+        disabled: isDisabled,
+        ...props,
+        onClick: handleClick,
+        ref: setRootRef,
+        children: content
+      }
+    );
+  }
+  if (!hasCutCorner) return rootEl;
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("group relative inline-block", wrapperClassName), children: [
+    rootEl,
+    outsetPathD && /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        className: "pointer-events-none absolute inset-0 h-full w-full overflow-visible opacity-0 group-has-[:focus-visible]:opacity-100",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: outsetPathD,
+            fill: "none",
+            strokeWidth: FOCUS_RING_WIDTH,
+            className: "stroke-focus"
+          }
+        )
+      }
+    ),
+    hasSvgBorder && pathD && /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        className: "pointer-events-none absolute inset-0 h-full w-full overflow-visible",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: pathD,
+            fill: "none",
+            strokeWidth: 1,
+            className: cn(
+              // Disabled locks the muted stroke; the hover/active accent
+              // classes must not be present at all (a `group-hover:` variant
+              // out-specifies the plain muted class, so it would still
+              // recolor the border on hover of a disabled button).
+              isDisabled ? "stroke-button-secondary-border-muted" : [
+                "stroke-button-secondary-border",
+                "group-hover:stroke-button-secondary-border-accent group-active:stroke-button-secondary-border-accent"
+              ]
+            )
+          }
+        )
+      }
+    )
+  ] });
+}
+
+exports.Button = Button;
+exports.buttonVariants = buttonVariants;

package/dist/button.d.cts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * Button styling — mirrors the Figma `button` component set
+ * (`variation` × `size` × `state` × `iconOnly`) and binds ONLY to the semantic
+ * `--button-*` token layer (never primitives). Theme switching is automatic via
+ * the `.dark` class, so no `dark:` variants are needed.
+ *
+ * Notes on states:
+ * - `hover` / `active` are handled by the `:hover` / `:active` utilities here.
+ * - `focus` is the shared focus ring (`outline-focus`), applied in the base.
+ * - `disabled` is a shared NEUTRAL-muted look for every filled variant (Figma
+ *   greys out primary/brand/destructive identically), hence they all reuse
+ *   `button-primary-muted` / `button-primary-foreground-muted`.
+ * - `loading` is a runtime prop on <Button>, not a style variant.
+ *
+ * Shape (cut corners) and the secondary border are handled in <Button>: the
+ * chamfer is a measured `clip-path` and the secondary outline is an SVG stroke
+ * that follows that shape (a CSS border would clip square across the chamfer).
+ */
+declare const buttonVariants: (props?: ({
+    variation?: "primary" | "brand" | "destructive" | "secondary" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    iconOnly?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ButtonVariantsProps = VariantProps<typeof buttonVariants>;
+
+interface ButtonProps extends Omit<React.ComponentProps<"button">, "color">, ButtonVariantsProps {
+    /**
+     * Render the single child element (e.g. an `<a>` / Next `<Link>`) as the root
+     * instead of a `<button>`, keeping all button styling. Keeps a button-styled
+     * link a real anchor (valid HTML, middle-click, open-in-new-tab).
+     */
+    asChild?: boolean;
+    /**
+     * Show a spinner and mark the button busy (`aria-busy`). Keeps the ACTIVE
+     * styling (not the greyed disabled look) but is not actionable while busy —
+     * clicks and keyboard activation are blocked and it reports `aria-disabled`.
+     */
+    loading?: boolean;
+    /** Leading content (usually a Phosphor icon). Replaced by the spinner when loading. */
+    leftSlot?: React.ReactNode;
+    /** Trailing content (usually a Phosphor icon). Stays visible when loading (per Figma). */
+    rightSlot?: React.ReactNode;
+    /** Class names for the outer wrapper span (present only for the secondary border). */
+    wrapperClassName?: string;
+}
+declare function Button({ className, variation, size, iconOnly, asChild, loading, leftSlot, rightSlot, wrapperClassName, disabled, style, children, onClick, ref, ...props }: ButtonProps): React.JSX.Element;
+
+export { Button, type ButtonProps, type ButtonVariantsProps, buttonVariants };

package/dist/button.d.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * Button styling — mirrors the Figma `button` component set
+ * (`variation` × `size` × `state` × `iconOnly`) and binds ONLY to the semantic
+ * `--button-*` token layer (never primitives). Theme switching is automatic via
+ * the `.dark` class, so no `dark:` variants are needed.
+ *
+ * Notes on states:
+ * - `hover` / `active` are handled by the `:hover` / `:active` utilities here.
+ * - `focus` is the shared focus ring (`outline-focus`), applied in the base.
+ * - `disabled` is a shared NEUTRAL-muted look for every filled variant (Figma
+ *   greys out primary/brand/destructive identically), hence they all reuse
+ *   `button-primary-muted` / `button-primary-foreground-muted`.
+ * - `loading` is a runtime prop on <Button>, not a style variant.
+ *
+ * Shape (cut corners) and the secondary border are handled in <Button>: the
+ * chamfer is a measured `clip-path` and the secondary outline is an SVG stroke
+ * that follows that shape (a CSS border would clip square across the chamfer).
+ */
+declare const buttonVariants: (props?: ({
+    variation?: "primary" | "brand" | "destructive" | "secondary" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    iconOnly?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ButtonVariantsProps = VariantProps<typeof buttonVariants>;
+
+interface ButtonProps extends Omit<React.ComponentProps<"button">, "color">, ButtonVariantsProps {
+    /**
+     * Render the single child element (e.g. an `<a>` / Next `<Link>`) as the root
+     * instead of a `<button>`, keeping all button styling. Keeps a button-styled
+     * link a real anchor (valid HTML, middle-click, open-in-new-tab).
+     */
+    asChild?: boolean;
+    /**
+     * Show a spinner and mark the button busy (`aria-busy`). Keeps the ACTIVE
+     * styling (not the greyed disabled look) but is not actionable while busy —
+     * clicks and keyboard activation are blocked and it reports `aria-disabled`.
+     */
+    loading?: boolean;
+    /** Leading content (usually a Phosphor icon). Replaced by the spinner when loading. */
+    leftSlot?: React.ReactNode;
+    /** Trailing content (usually a Phosphor icon). Stays visible when loading (per Figma). */
+    rightSlot?: React.ReactNode;
+    /** Class names for the outer wrapper span (present only for the secondary border). */
+    wrapperClassName?: string;
+}
+declare function Button({ className, variation, size, iconOnly, asChild, loading, leftSlot, rightSlot, wrapperClassName, disabled, style, children, onClick, ref, ...props }: ButtonProps): React.JSX.Element;
+
+export { Button, type ButtonProps, type ButtonVariantsProps, buttonVariants };

package/dist/button.js

@@ -0,0 +1,3 @@
+export { Button, buttonVariants } from './chunk-WJFPGGJB.js';
+import './chunk-JIXW3455.js';
+import './chunk-7EOSDFS3.js';

package/dist/checkbox.cjs

@@ -0,0 +1,74 @@
+'use strict';
+
+var react = require('@phosphor-icons/react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/checkbox/Checkbox.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var checkboxVariants = classVarianceAuthority.cva([
+  // Box — 20×20 (`size-5`), 2px radius (Figma `radius/xs`), 1px border.
+  // `peer` lets the sibling indicator react to :checked / :disabled.
+  "peer size-5 shrink-0 appearance-none rounded-xs border",
+  "cursor-pointer transition-colors",
+  // Default
+  "bg-background border-border",
+  // Hover (unselected) — focus keeps the DEFAULT border; only the ring signals
+  // focus (so focus doesn't visually read as hover).
+  "hover:border-border-accent",
+  // Focus ring — suppress the native ring, draw the shared `--focus` ring the
+  // same way ghost Button does: 2px stroke, 2px offset (`outline-solid`
+  // restores what `outline-none` zeroed).
+  "outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid focus-visible:outline-focus",
+  // Selected
+  "checked:bg-brand-primary-background checked:border-brand-primary-border",
+  "checked:hover:bg-brand-primary-accent checked:hover:border-brand-primary-border",
+  "checked:focus-visible:bg-brand-primary-accent checked:focus-visible:border-brand-primary-border",
+  // Disabled — shared neutral-muted look whether selected or not (per Figma)
+  "disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-border-muted",
+  "checked:disabled:bg-background checked:disabled:border-border-muted"
+]);
+function Checkbox({
+  className,
+  wrapperClassName,
+  onChange,
+  onCheckedChange,
+  ...props
+}) {
+  const handleChange = (event) => {
+    onChange?.(event);
+    onCheckedChange?.(event.currentTarget.checked);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("relative inline-flex shrink-0", wrapperClassName), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "checkbox",
+        "data-slot": "checkbox",
+        className: cn(checkboxVariants(), className),
+        ...props,
+        onChange: handleChange
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react.CheckIcon,
+      {
+        "aria-hidden": "true",
+        weight: "regular",
+        "data-slot": "checkbox-indicator",
+        className: cn(
+          "pointer-events-none invisible absolute inset-0 m-auto size-4",
+          "text-brand-primary-foreground",
+          "peer-checked:visible peer-disabled:text-foreground-muted"
+        )
+      }
+    )
+  ] });
+}
+
+exports.Checkbox = Checkbox;
+exports.checkboxVariants = checkboxVariants;

package/dist/checkbox.d.cts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+interface CheckboxProps extends Omit<React.ComponentProps<"input">, "type" | "size"> {
+    /**
+     * Convenience change callback with the next checked state already
+     * extracted. Fires alongside (not instead of) the native `onChange`.
+     * Controlled/uncontrolled usage is the standard input contract:
+     * `defaultChecked` (uncontrolled, the default) or `checked` + a change
+     * handler (controlled).
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Class names for the outer wrapper span (positions the ✓ indicator). */
+    wrapperClassName?: string;
+}
+/**
+ * Checkbox control — the Figma `checkbox-control` set (node 5066:9964),
+ * rendered as a real `<input type="checkbox">` so keyboard (Space), forms,
+ * and label association all come from the platform.
+ *
+ * Ships without a label (the Figma set is the bare 20×20 control): associate
+ * one by wrapping in a `<label>` or via `htmlFor`/`id`; icon-style usages
+ * need an `aria-label`.
+ *
+ * The FD Figma set has no indeterminate variant; if a consumer ever needs the
+ * native `indeterminate` flag (DOM-only, not an attribute), set it on the
+ * node via `ref`.
+ */
+declare function Checkbox({ className, wrapperClassName, onChange, onCheckedChange, ...props }: CheckboxProps): React.JSX.Element;
+
+/**
+ * Checkbox styling — mirrors the Figma `checkbox-control` component set
+ * (node 5066:9964: `state` × `selected`, one 20×20 size) and binds ONLY to the
+ * semantic token layer (never primitives). Theme switching is automatic via
+ * the `.dark` class, so no `dark:` variants are needed.
+ *
+ * Unlike Button, every Figma axis here is an *interaction* state, so there is
+ * no prop-driven variant table: `selected` maps to the native `:checked`
+ * pseudo-class and `state` maps to `:hover` / `:focus-visible` / `:disabled`.
+ *
+ * State → token map (from the Figma variants):
+ * - default:                 `bg-background` + `border-border`
+ * - hover (unselected):      border strengthens to `border-accent`
+ * - focused:                 border stays at the default; the ring alone marks focus
+ * - selected:                `bg-brand-primary-background` + `border-brand-primary-border`
+ * - selected hover/focused:  bg strengthens to `brand-primary-accent`
+ * - disabled (either):       shared neutral look — `bg-background` + `border-border-muted`
+ * - focused additionally draws the shared 2px `--focus` ring, offset 2px from
+ *   the box — the same treatment as ghost Button (design decision 2026-07-07,
+ *   overriding the flush ring the Figma node draws).
+ *
+ * Checked × hover/focus/disabled combinations are written as compound
+ * utilities (`checked:hover:`, `checked:disabled:`) so precedence is decided
+ * by selector specificity, not by Tailwind's stylesheet ordering.
+ *
+ * The ✓ indicator is a sibling of the input (an `<input>` can't have
+ * children), revealed via `peer-checked:` in <Checkbox>.
+ */
+declare const checkboxVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type CheckboxVariantsProps = VariantProps<typeof checkboxVariants>;
+
+export { Checkbox, type CheckboxProps, type CheckboxVariantsProps, checkboxVariants };

package/dist/checkbox.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+interface CheckboxProps extends Omit<React.ComponentProps<"input">, "type" | "size"> {
+    /**
+     * Convenience change callback with the next checked state already
+     * extracted. Fires alongside (not instead of) the native `onChange`.
+     * Controlled/uncontrolled usage is the standard input contract:
+     * `defaultChecked` (uncontrolled, the default) or `checked` + a change
+     * handler (controlled).
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Class names for the outer wrapper span (positions the ✓ indicator). */
+    wrapperClassName?: string;
+}
+/**
+ * Checkbox control — the Figma `checkbox-control` set (node 5066:9964),
+ * rendered as a real `<input type="checkbox">` so keyboard (Space), forms,
+ * and label association all come from the platform.
+ *
+ * Ships without a label (the Figma set is the bare 20×20 control): associate
+ * one by wrapping in a `<label>` or via `htmlFor`/`id`; icon-style usages
+ * need an `aria-label`.
+ *
+ * The FD Figma set has no indeterminate variant; if a consumer ever needs the
+ * native `indeterminate` flag (DOM-only, not an attribute), set it on the
+ * node via `ref`.
+ */
+declare function Checkbox({ className, wrapperClassName, onChange, onCheckedChange, ...props }: CheckboxProps): React.JSX.Element;
+
+/**
+ * Checkbox styling — mirrors the Figma `checkbox-control` component set
+ * (node 5066:9964: `state` × `selected`, one 20×20 size) and binds ONLY to the
+ * semantic token layer (never primitives). Theme switching is automatic via
+ * the `.dark` class, so no `dark:` variants are needed.
+ *
+ * Unlike Button, every Figma axis here is an *interaction* state, so there is
+ * no prop-driven variant table: `selected` maps to the native `:checked`
+ * pseudo-class and `state` maps to `:hover` / `:focus-visible` / `:disabled`.
+ *
+ * State → token map (from the Figma variants):
+ * - default:                 `bg-background` + `border-border`
+ * - hover (unselected):      border strengthens to `border-accent`
+ * - focused:                 border stays at the default; the ring alone marks focus
+ * - selected:                `bg-brand-primary-background` + `border-brand-primary-border`
+ * - selected hover/focused:  bg strengthens to `brand-primary-accent`
+ * - disabled (either):       shared neutral look — `bg-background` + `border-border-muted`
+ * - focused additionally draws the shared 2px `--focus` ring, offset 2px from
+ *   the box — the same treatment as ghost Button (design decision 2026-07-07,
+ *   overriding the flush ring the Figma node draws).
+ *
+ * Checked × hover/focus/disabled combinations are written as compound
+ * utilities (`checked:hover:`, `checked:disabled:`) so precedence is decided
+ * by selector specificity, not by Tailwind's stylesheet ordering.
+ *
+ * The ✓ indicator is a sibling of the input (an `<input>` can't have
+ * children), revealed via `peer-checked:` in <Checkbox>.
+ */
+declare const checkboxVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type CheckboxVariantsProps = VariantProps<typeof checkboxVariants>;
+
+export { Checkbox, type CheckboxProps, type CheckboxVariantsProps, checkboxVariants };

package/dist/checkbox.js

@@ -0,0 +1,2 @@
+export { Checkbox, checkboxVariants } from './chunk-SNU4YXOR.js';
+import './chunk-7EOSDFS3.js';