@namroodinc/liquid-editorial 0.0.0-stage → 0.1.0

package/dist/components/Button/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AACnF,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACjE,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mEAAmE;IACnE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM,2GAsCjB,CAAC"}

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

@@ -0,0 +1,22 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+import type { IconName } from "../Icon/icons.js";
+export type ButtonVariant = "primary" | "neutral" | "danger" | "active" | "simple";
+export type ButtonSize = "sm" | "md" | "lg";
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "disabled"> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    iconStart?: IconName;
+    iconEnd?: IconName;
+    /** Square, height-sized button. Requires `aria-label`. */
+    isIconOnly?: boolean;
+    isDisabled?: boolean;
+    /** Label stays, spinner replaces `iconStart`, press is blocked. */
+    isPending?: boolean;
+    children?: ReactNode;
+}
+/**
+ * Every action the user can take. One primary per view; a sixth variant is a
+ * conversation, not a prop.
+ */
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AACnF,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACjE,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mEAAmE;IACnE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM,2GAsCjB,CAAC"}

package/dist/components/Button/index.js

@@ -0,0 +1,37 @@
+import { t as e } from "../../chunks/Icon-CGY1FNXT.js";
+import { forwardRef as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/Button/index.tsx
+var i = t(function({ variant: t = "neutral", size: i = "md", iconStart: a, iconEnd: o, isIconOnly: s = !1, isDisabled: c = !1, isPending: l = !1, className: u, children: d, type: f = "button", ...p }, m) {
+	let h = i === "lg" ? 20 : 16;
+	return /* @__PURE__ */ r("button", {
+		ref: m,
+		type: f,
+		disabled: c || l,
+		"data-variant": t,
+		"data-size": i,
+		"data-icon-only": s || void 0,
+		"data-pending": l || void 0,
+		className: ["ds-button", u].filter(Boolean).join(" "),
+		...p,
+		children: [
+			l ? /* @__PURE__ */ n(e, {
+				name: "spinner",
+				size: h,
+				className: "ds-button__spinner"
+			}) : a && /* @__PURE__ */ n(e, {
+				name: a,
+				size: h
+			}),
+			!s && d,
+			o && !s && /* @__PURE__ */ n(e, {
+				name: o,
+				size: h
+			})
+		]
+	});
+});
+//#endregion
+export { i as Button };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Icon","Button","forwardRef","rest","glyph","size","isDisabled","isPending","variant","isIconOnly","className","iconStart","children","iconEnd"],"sources":["../../../src/components/Button/index.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport { Icon } from \"../Icon\";\nimport type { IconName } from \"../Icon/icons\";\nimport \"./style.css\";\n\nexport type ButtonVariant = \"primary\" | \"neutral\" | \"danger\" | \"active\" | \"simple\";\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"disabled\"> {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  iconStart?: IconName;\n  iconEnd?: IconName;\n  /** Square, height-sized button. Requires `aria-label`. */\n  isIconOnly?: boolean;\n  isDisabled?: boolean;\n  /** Label stays, spinner replaces `iconStart`, press is blocked. */\n  isPending?: boolean;\n  children?: ReactNode;\n}\n\n/**\n * Every action the user can take. One primary per view; a sixth variant is a\n * conversation, not a prop.\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    variant = \"neutral\",\n    size = \"md\",\n    iconStart,\n    iconEnd,\n    isIconOnly = false,\n    isDisabled = false,\n    isPending = false,\n    className,\n    children,\n    type = \"button\",\n    ...rest\n  },\n  ref,\n) {\n  const glyph = size === \"lg\" ? 20 : 16;\n  return (\n    <button\n      ref={ref}\n      type={type}\n      disabled={isDisabled || isPending}\n      data-variant={variant}\n      data-size={size}\n      data-icon-only={isIconOnly || undefined}\n      data-pending={isPending || undefined}\n      className={[\"ds-button\", className].filter(Boolean).join(\" \")}\n      {...rest}\n    >\n      {isPending ? (\n        <Icon name=\"spinner\" size={glyph} className=\"ds-button__spinner\" />\n      ) : (\n        iconStart && <Icon name={iconStart} size={glyph} />\n      )}\n      {!isIconOnly && children}\n      {iconEnd && !isIconOnly && <Icon name={iconEnd} size={glyph} />}\n    </button>\n  );\n});\n"],"mappings":";;;;AA0BA,IAAaC,IAASC,EAA2C,SAC/D,EACE,aAAU,WACV,UAAO,MACP,cACA,YACA,gBAAa,IACb,gBAAa,IACb,eAAY,IACZ,cACA,aACA,UAAO,UACP,GAAGC,KAEL,GACA;CACA,IAAMC,IAAQC,MAAS,OAAO,KAAK;CACnC,OACE,kBAAC,UAAD;EACO;EACC;EACN,UAAUC,KAAcC;EACxB,gBAAcC;EACd,aAAWH;EACX,kBAAgBI,KAAc,KAAA;EAC9B,gBAAcF,KAAa,KAAA;EAC3B,WAAW,CAAC,aAAaG,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAC5D,GAAIP;EATN,UAAA;GAWGI,IACC,kBAACP,GAAD;IAAM,MAAK;IAAU,MAAMI;IAAO,WAAU;GAAsB,CAAA,IAElEO,KAAa,kBAACX,GAAD;IAAM,MAAMW;IAAW,MAAMP;GAAQ,CAAA;GAEnD,CAACK,KAAcG;GACfC,KAAW,CAACJ,KAAc,kBAACT,GAAD;IAAM,MAAMa;IAAS,MAAMT;GAAQ,CAAA;EACxD;;AAEZ,CAAC"}

package/dist/components/Button/style.css

@@ -0,0 +1,139 @@
+@layer components {
+  .ds-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    border: var(--control-border-width) solid var(--control-border-color);
+    border-radius: var(--radius-md);
+    font-family: var(--font-sans);
+    font-weight: var(--font-weight-semibold);
+    line-height: var(--line-height-tight);
+    text-decoration: none;
+    cursor: pointer;
+    transition: background-color var(--duration-fast) var(--ease-standard);
+  }
+
+  /* Sizes — only height, padding and type size change. */
+  .ds-button[data-size="sm"] {
+    height: var(--field-height-sm);
+    padding: var(--space-1) var(--space-3);
+    font-size: var(--font-size-sm);
+  }
+
+  .ds-button[data-size="md"] {
+    height: var(--field-height-md);
+    padding: var(--space-2) var(--space-4);
+    font-size: var(--font-size-sm);
+  }
+
+  .ds-button[data-size="lg"] {
+    height: var(--field-height-lg);
+    padding: var(--space-3) var(--space-5);
+    font-size: var(--font-size-md);
+  }
+
+  .ds-button[data-icon-only] {
+    padding: 0;
+    aspect-ratio: 1;
+  }
+
+  /* Variants — state moves on the fill only. */
+  .ds-button[data-variant="primary"] {
+    background: var(--color-primary);
+    color: var(--color-text-on-solid);
+  }
+
+  .ds-button[data-variant="primary"]:hover:not(:disabled) {
+    background: var(--color-primary-hover);
+  }
+
+  .ds-button[data-variant="primary"]:active:not(:disabled) {
+    background: var(--color-primary-pressed);
+  }
+
+  .ds-button[data-variant="neutral"] {
+    background: var(--color-surface);
+    color: var(--color-text);
+  }
+
+  .ds-button[data-variant="neutral"]:hover:not(:disabled) {
+    background: var(--field-hover);
+  }
+
+  .ds-button[data-variant="neutral"]:active:not(:disabled) {
+    background: var(--field-pressed);
+  }
+
+  .ds-button[data-variant="danger"] {
+    background: var(--color-danger);
+    color: var(--color-text-on-solid);
+  }
+
+  .ds-button[data-variant="danger"]:hover:not(:disabled) {
+    background: var(--color-danger-hover, var(--color-danger));
+  }
+
+  .ds-button[data-variant="danger"]:active:not(:disabled) {
+    background: var(--color-danger-pressed, var(--color-danger));
+  }
+
+  .ds-button[data-variant="active"] {
+    background: var(--color-primary-soft);
+    color: var(--color-primary-text);
+    border-color: var(--color-primary);
+  }
+
+  .ds-button[data-variant="active"]:hover:not(:disabled) {
+    background: var(--color-primary-soft-hover);
+  }
+
+  .ds-button[data-variant="active"]:active:not(:disabled) {
+    background: var(--color-primary-soft-pressed);
+  }
+
+  .ds-button[data-variant="simple"] {
+    background: transparent;
+    border-color: transparent;
+    color: var(--color-text-muted);
+    font-weight: var(--font-weight-regular);
+  }
+
+  .ds-button[data-variant="simple"]:hover:not(:disabled) {
+    background: var(--field-hover);
+  }
+
+  .ds-button[data-variant="simple"]:active:not(:disabled) {
+    background: var(--field-pressed);
+  }
+
+  .ds-button:focus-visible {
+    outline: var(--control-border-width) solid var(--color-focus);
+    outline-offset: 2px;
+  }
+
+  .ds-button:disabled {
+    opacity: 45%;
+    cursor: not-allowed;
+  }
+
+  .ds-button[data-pending] {
+    cursor: progress;
+  }
+
+  .ds-button__spinner {
+    animation: ds-spin 900ms linear infinite;
+  }
+
+  @keyframes ds-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ds-button__spinner {
+      animation-duration: 2400ms;
+    }
+  }
+}

package/dist/components/ButtonGroup/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react"),t=require("react/jsx-runtime");var n=(0,e.forwardRef)(function({isAttached:e=!0,orientation:n=`horizontal`,className:r,children:i,...a},o){return(0,t.jsx)(`div`,{ref:o,role:`group`,"data-attached":e,"data-orientation":n,className:[`ds-button-group`,r].filter(Boolean).join(` `),...a,children:i})});exports.ButtonGroup=n;
+//# sourceMappingURL=index.cjs.map

package/dist/components/ButtonGroup/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["forwardRef","react","react_jsx_runtime","ButtonGroup","rest","isAttached","orientation","className"],"sources":["../../../src/components/ButtonGroup/index.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport \"./style.css\";\n\nexport type ButtonGroupOrientation = \"horizontal\" | \"vertical\";\n\nexport interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {\n  /** Attached segments read as one control; spaced reads as related actions. */\n  isAttached?: boolean;\n  orientation?: ButtonGroupOrientation;\n  /** Required when the group itself carries the meaning (e.g. a view switcher). */\n  \"aria-label\"?: string;\n  children?: ReactNode;\n}\n\n/**\n * A row of `Button`s that belong to one decision. Mark the current segment with\n * `variant=\"active\"` and `aria-pressed` — the group adds no selection state of\n * its own, so it stays a layout contract rather than a second control API.\n */\nexport const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(\n  function ButtonGroup(\n    { isAttached = true, orientation = \"horizontal\", className, children, ...rest },\n    ref,\n  ) {\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        data-attached={isAttached}\n        data-orientation={orientation}\n        className={[\"ds-button-group\", className].filter(Boolean).join(\" \")}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"mappings":"A,yHAmBA,IAAaG,GAAA,EAAcH,EAAAA,WAAAA,CACzB,SACE,CAAE,aAAa,GAAM,cAAc,aAAc,YAAW,WAAU,GAAGI,GACzE,EACA,CACA,OACE,EAAAF,EAAA,IAAA,CAAC,MAAD,CACO,MACL,KAAK,QACL,gBAAeG,EACf,mBAAkBC,EAClB,UAAW,CAAC,kBAAmBC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,EAClE,GAAIH,EAEH,UACE,CAAA,CAET,CACF,E"}

package/dist/components/ButtonGroup/index.d.cts

@@ -0,0 +1,17 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export type ButtonGroupOrientation = "horizontal" | "vertical";
+export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** Attached segments read as one control; spaced reads as related actions. */
+    isAttached?: boolean;
+    orientation?: ButtonGroupOrientation;
+    /** Required when the group itself carries the meaning (e.g. a view switcher). */
+    "aria-label"?: string;
+    children?: ReactNode;
+}
+/**
+ * A row of `Button`s that belong to one decision. Mark the current segment with
+ * `variant="active"` and `aria-pressed` — the group adds no selection state of
+ * its own, so it stays a layout contract rather than a second control API.
+ */
+export declare const ButtonGroup: import("react").ForwardRefExoticComponent<ButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=index.d.cts.map

package/dist/components/ButtonGroup/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonGroup/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,sBAAsB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE/D,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtE,8EAA8E;IAC9E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,sBAAsB,CAAC;IACrC,iFAAiF;IACjF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;GAIG;AACH,eAAO,MAAM,WAAW,6GAkBvB,CAAC"}

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

@@ -0,0 +1,17 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export type ButtonGroupOrientation = "horizontal" | "vertical";
+export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** Attached segments read as one control; spaced reads as related actions. */
+    isAttached?: boolean;
+    orientation?: ButtonGroupOrientation;
+    /** Required when the group itself carries the meaning (e.g. a view switcher). */
+    "aria-label"?: string;
+    children?: ReactNode;
+}
+/**
+ * A row of `Button`s that belong to one decision. Mark the current segment with
+ * `variant="active"` and `aria-pressed` — the group adds no selection state of
+ * its own, so it stays a layout contract rather than a second control API.
+ */
+export declare const ButtonGroup: import("react").ForwardRefExoticComponent<ButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonGroup/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,sBAAsB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE/D,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtE,8EAA8E;IAC9E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,sBAAsB,CAAC;IACrC,iFAAiF;IACjF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;GAIG;AACH,eAAO,MAAM,WAAW,6GAkBvB,CAAC"}

package/dist/components/ButtonGroup/index.js

@@ -0,0 +1,18 @@
+import { forwardRef as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/ButtonGroup/index.tsx
+var n = e(function({ isAttached: e = !0, orientation: n = "horizontal", className: r, children: i, ...a }, o) {
+	return /* @__PURE__ */ t("div", {
+		ref: o,
+		role: "group",
+		"data-attached": e,
+		"data-orientation": n,
+		className: ["ds-button-group", r].filter(Boolean).join(" "),
+		...a,
+		children: i
+	});
+});
+//#endregion
+export { n as ButtonGroup };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ButtonGroup","forwardRef","rest","isAttached","orientation","className"],"sources":["../../../src/components/ButtonGroup/index.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport \"./style.css\";\n\nexport type ButtonGroupOrientation = \"horizontal\" | \"vertical\";\n\nexport interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {\n  /** Attached segments read as one control; spaced reads as related actions. */\n  isAttached?: boolean;\n  orientation?: ButtonGroupOrientation;\n  /** Required when the group itself carries the meaning (e.g. a view switcher). */\n  \"aria-label\"?: string;\n  children?: ReactNode;\n}\n\n/**\n * A row of `Button`s that belong to one decision. Mark the current segment with\n * `variant=\"active\"` and `aria-pressed` — the group adds no selection state of\n * its own, so it stays a layout contract rather than a second control API.\n */\nexport const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(\n  function ButtonGroup(\n    { isAttached = true, orientation = \"horizontal\", className, children, ...rest },\n    ref,\n  ) {\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        data-attached={isAttached}\n        data-orientation={orientation}\n        className={[\"ds-button-group\", className].filter(Boolean).join(\" \")}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;AAmBA,IAAaA,IAAcC,EACzB,SACE,EAAE,gBAAa,IAAM,iBAAc,cAAc,cAAW,aAAU,GAAGC,KACzE,GACA;CACA,OACE,kBAAC,OAAD;EACO;EACL,MAAK;EACL,iBAAeC;EACf,oBAAkBC;EAClB,WAAW,CAAC,mBAAmBC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAClE,GAAIH;EAEH;CACE,CAAA;AAET,CACF"}

package/dist/components/ButtonGroup/style.css

@@ -0,0 +1,66 @@
+@layer components {
+  .ds-button-group {
+    display: inline-flex;
+    align-items: stretch;
+    align-self: start;
+    width: fit-content;
+    /* The group is the container; its children give up their outer geometry. */
+    border-radius: var(--radius-md);
+  }
+
+  /* Collapse the doubled 2px control strokes into one shared rule. */
+  .ds-button-group > .ds-button + .ds-button {
+    margin-inline-start: calc(-1 * var(--control-border-width));
+  }
+
+  .ds-button-group > .ds-button {
+    border-radius: 0;
+  }
+
+  .ds-button-group > .ds-button:first-child {
+    border-start-start-radius: var(--radius-md);
+    border-end-start-radius: var(--radius-md);
+  }
+
+  .ds-button-group > .ds-button:last-child {
+    border-start-end-radius: var(--radius-md);
+    border-end-end-radius: var(--radius-md);
+  }
+
+  /* A selected or focused segment owns the full stroke it shares. */
+  .ds-button-group > .ds-button:hover:not(:disabled),
+  .ds-button-group > .ds-button:focus-visible,
+  .ds-button-group > .ds-button[data-variant="active"],
+  .ds-button-group > .ds-button[data-variant="primary"],
+  .ds-button-group > .ds-button[data-variant="danger"] {
+    position: relative;
+    z-index: 1;
+  }
+
+  .ds-button-group[data-orientation="vertical"] {
+    flex-direction: column;
+  }
+
+  .ds-button-group[data-orientation="vertical"] > .ds-button + .ds-button {
+    margin-inline-start: 0;
+    margin-block-start: calc(-1 * var(--control-border-width));
+  }
+
+  .ds-button-group[data-orientation="vertical"] > .ds-button:first-child {
+    border-radius: var(--radius-md) var(--radius-md) 0 0;
+  }
+
+  .ds-button-group[data-orientation="vertical"] > .ds-button:last-child {
+    border-radius: 0 0 var(--radius-md) var(--radius-md);
+  }
+
+  /* Spaced: related actions that are not one control. */
+  .ds-button-group[data-attached="false"] {
+    gap: var(--space-2);
+  }
+
+  .ds-button-group[data-attached="false"] > .ds-button {
+    border-radius: var(--radius-md);
+    margin: 0;
+  }
+}

package/dist/components/Choice/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../Grid/index.cjs");let t=require("react"),n=require("react/jsx-runtime");var r=(0,t.forwardRef)(function({isIndeterminate:e=!1,className:r,children:i,...a},o){let s=(0,t.useRef)(null);return(0,t.useEffect)(()=>{s.current&&(s.current.indeterminate=e)},[e]),(0,n.jsxs)(`label`,{className:[`ds-choice`,r].filter(Boolean).join(` `),children:[(0,n.jsx)(`input`,{type:`checkbox`,className:`ds-choice__control`,"data-kind":`checkbox`,ref:e=>{s.current=e,typeof o==`function`?o(e):o&&(o.current=e)},...a}),i&&(0,n.jsx)(`span`,{className:`ds-choice__label`,children:i})]})}),i=(0,t.forwardRef)(function({className:e,children:t,...r},i){return(0,n.jsxs)(`label`,{className:[`ds-choice`,e].filter(Boolean).join(` `),children:[(0,n.jsx)(`input`,{ref:i,type:`radio`,className:`ds-choice__control`,"data-kind":`radio`,...r}),t&&(0,n.jsx)(`span`,{className:`ds-choice__label`,children:t})]})});function a({label:t,columns:r=1,children:i}){return(0,n.jsxs)(`fieldset`,{className:`ds-choice-group`,children:[(0,n.jsx)(`legend`,{className:`ds-choice-group__label`,children:t}),r===1?(0,n.jsx)(e.Stack,{gap:`sm`,children:i}):(0,n.jsx)(e.Grid,{columns:r,gap:`sm`,children:i})]})}exports.Checkbox=r,exports.ChoiceGroup=a,exports.Radio=i;
+//# sourceMappingURL=index.cjs.map

package/dist/components/Choice/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["forwardRef","useRef","Stack","Grid","require_components_Grid_index","react","react_jsx_runtime","Checkbox","rest","inner","isIndeterminate","className","node","ref","children","Radio","ChoiceGroup","label","columns"],"sources":["../../../src/components/Choice/index.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, type InputHTMLAttributes, type ReactNode } from \"react\";\nimport { Grid, Stack } from \"../Grid\";\nimport \"./style.css\";\n\nexport interface CheckboxProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"size\"> {\n  /** Display state only — clicking an indeterminate box selects all. */\n  isIndeterminate?: boolean;\n  children?: ReactNode;\n}\n\n/** An independent yes/no. 20px box at every size, in every context. */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  { isIndeterminate = false, className, children, ...rest },\n  ref,\n) {\n  const inner = useRef<HTMLInputElement | null>(null);\n\n  useEffect(() => {\n    if (inner.current) inner.current.indeterminate = isIndeterminate;\n  }, [isIndeterminate]);\n\n  return (\n    <label className={[\"ds-choice\", className].filter(Boolean).join(\" \")}>\n      <input\n        type=\"checkbox\"\n        className=\"ds-choice__control\"\n        data-kind=\"checkbox\"\n        ref={(node) => {\n          inner.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        {...rest}\n      />\n      {children && <span className=\"ds-choice__label\">{children}</span>}\n    </label>\n  );\n});\n\nexport interface RadioProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"size\"> {\n  children?: ReactNode;\n}\n\n/** One of two or more mutually exclusive choices, all of them visible. */\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(\n  { className, children, ...rest },\n  ref,\n) {\n  return (\n    <label className={[\"ds-choice\", className].filter(Boolean).join(\" \")}>\n      <input\n        ref={ref}\n        type=\"radio\"\n        className=\"ds-choice__control\"\n        data-kind=\"radio\"\n        {...rest}\n      />\n      {children && <span className=\"ds-choice__label\">{children}</span>}\n    </label>\n  );\n});\n\nexport interface ChoiceGroupProps {\n  label: string;\n  /**\n   * Run a long list in columns instead of one stack. Steps down to a single\n   * column inside a narrow container.\n   */\n  columns?: 1 | 2 | 3;\n  children: ReactNode;\n}\n\n/** A set of checkboxes or radios under one group label, spaced by Stack or Grid. */\nexport function ChoiceGroup({ label, columns = 1, children }: ChoiceGroupProps) {\n  return (\n    <fieldset className=\"ds-choice-group\">\n      <legend className=\"ds-choice-group__label\">{label}</legend>\n      {columns === 1 ? (\n        <Stack gap=\"sm\">{children}</Stack>\n      ) : (\n        <Grid columns={columns} gap=\"sm\">\n          {children}\n        </Grid>\n      )}\n    </fieldset>\n  );\n}\n"],"mappings":"A,8JAYA,IAAaO,GAAA,EAAWP,EAAAA,WAAAA,CAA4C,SAClE,CAAE,kBAAkB,GAAO,YAAW,WAAU,GAAGQ,GACnD,EACA,CACA,IAAMC,GAAA,EAAQR,EAAAA,OAAAA,CAAgC,IAAI,EAMlD,OAJA,EAAAI,EAAA,UAAA,KAAgB,CACVI,EAAM,UAAS,EAAM,QAAQ,cAAgBC,EACnD,EAAG,CAACA,CAAe,CAAC,GAGlB,EAAAJ,EAAA,KAAA,CAAC,QAAD,CAAO,UAAW,CAAC,YAAaK,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,EAAnE,SAAA,EACE,EAAAL,EAAA,IAAA,CAAC,QAAD,CACE,KAAK,WACL,UAAU,qBACV,YAAU,WACV,IAAM,GAAS,CACb,EAAM,QAAUM,EACZ,OAAOC,GAAQ,WAAYA,EAAID,CAAI,EAC9BC,IAAK,EAAI,QAAUD,EAC9B,EACA,GAAIJ,CACL,CAAA,EACAM,IAAY,EAAAR,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,mBAAoB,UAAe,CAAA,CAC3D,C,EAEX,CAAC,EAQYS,GAAA,EAAQf,EAAAA,WAAAA,CAAyC,SAC5D,CAAE,YAAW,WAAU,GAAGQ,GAC1B,EACA,CACA,OACE,EAAAF,EAAA,KAAA,CAAC,QAAD,CAAO,UAAW,CAAC,YAAaK,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,EAAnE,SAAA,EACE,EAAAL,EAAA,IAAA,CAAC,QAAD,CACO,MACL,KAAK,QACL,UAAU,qBACV,YAAU,QACV,GAAIE,CACL,CAAA,EACAM,IAAY,EAAAR,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,mBAAoB,UAAe,CAAA,CAC3D,C,EAEX,CAAC,EAaD,SAAgBU,EAAY,CAAE,QAAO,UAAU,EAAG,YAA8B,CAC9E,OACE,EAAAV,EAAA,KAAA,CAAC,WAAD,CAAU,UAAU,kBAApB,SAAA,EACE,EAAAA,EAAA,IAAA,CAAC,SAAD,CAAQ,UAAU,yBAA0B,SAAAW,CAAc,CAAA,EACzDC,IAAY,GACX,EAAAZ,EAAA,IAAA,CAACJ,EAAAA,MAAD,CAAO,IAAI,KAAM,UAAgB,CAAA,GAEjC,EAAAI,EAAA,IAAA,CAACH,EAAAA,KAAD,CAAe,UAAS,IAAI,KACzB,UACG,CAAA,CAEA,C,EAEd,C"}

package/dist/components/Choice/index.d.cts

@@ -0,0 +1,25 @@
+import { type InputHTMLAttributes, type ReactNode } from "react";
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    /** Display state only — clicking an indeterminate box selects all. */
+    isIndeterminate?: boolean;
+    children?: ReactNode;
+}
+/** An independent yes/no. 20px box at every size, in every context. */
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    children?: ReactNode;
+}
+/** One of two or more mutually exclusive choices, all of them visible. */
+export declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface ChoiceGroupProps {
+    label: string;
+    /**
+     * Run a long list in columns instead of one stack. Steps down to a single
+     * column inside a narrow container.
+     */
+    columns?: 1 | 2 | 3;
+    children: ReactNode;
+}
+/** A set of checkboxes or radios under one group label, spaced by Stack or Grid. */
+export declare function ChoiceGroup({ label, columns, children }: ChoiceGroupProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.cts.map

package/dist/components/Choice/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Choice/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEhG,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpE,sEAAsE;IACtE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,uEAAuE;AACvE,eAAO,MAAM,QAAQ,4GA0BnB,CAAC;AAEH,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,0EAA0E;AAC1E,eAAO,MAAM,KAAK,yGAgBhB,CAAC;AAEH,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,oFAAoF;AACpF,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,OAAW,EAAE,QAAQ,EAAE,EAAE,gBAAgB,+BAa7E"}

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

@@ -0,0 +1,25 @@
+import { type InputHTMLAttributes, type ReactNode } from "react";
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    /** Display state only — clicking an indeterminate box selects all. */
+    isIndeterminate?: boolean;
+    children?: ReactNode;
+}
+/** An independent yes/no. 20px box at every size, in every context. */
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    children?: ReactNode;
+}
+/** One of two or more mutually exclusive choices, all of them visible. */
+export declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface ChoiceGroupProps {
+    label: string;
+    /**
+     * Run a long list in columns instead of one stack. Steps down to a single
+     * column inside a narrow container.
+     */
+    columns?: 1 | 2 | 3;
+    children: ReactNode;
+}
+/** A set of checkboxes or radios under one group label, spaced by Stack or Grid. */
+export declare function ChoiceGroup({ label, columns, children }: ChoiceGroupProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Choice/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEhG,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpE,sEAAsE;IACtE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,uEAAuE;AACvE,eAAO,MAAM,QAAQ,4GA0BnB,CAAC;AAEH,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,0EAA0E;AAC1E,eAAO,MAAM,KAAK,yGAgBhB,CAAC;AAEH,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,oFAAoF;AACpF,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,OAAW,EAAE,QAAQ,EAAE,EAAE,gBAAgB,+BAa7E"}

package/dist/components/Choice/index.js

@@ -0,0 +1,58 @@
+import { Grid as e, Stack as t } from "../Grid/index.js";
+import { forwardRef as n, useEffect as r, useRef as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/Choice/index.tsx
+var s = n(function({ isIndeterminate: e = !1, className: t, children: n, ...s }, c) {
+	let l = i(null);
+	return r(() => {
+		l.current && (l.current.indeterminate = e);
+	}, [e]), /* @__PURE__ */ o("label", {
+		className: ["ds-choice", t].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ a("input", {
+			type: "checkbox",
+			className: "ds-choice__control",
+			"data-kind": "checkbox",
+			ref: (e) => {
+				l.current = e, typeof c == "function" ? c(e) : c && (c.current = e);
+			},
+			...s
+		}), n && /* @__PURE__ */ a("span", {
+			className: "ds-choice__label",
+			children: n
+		})]
+	});
+}), c = n(function({ className: e, children: t, ...n }, r) {
+	return /* @__PURE__ */ o("label", {
+		className: ["ds-choice", e].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ a("input", {
+			ref: r,
+			type: "radio",
+			className: "ds-choice__control",
+			"data-kind": "radio",
+			...n
+		}), t && /* @__PURE__ */ a("span", {
+			className: "ds-choice__label",
+			children: t
+		})]
+	});
+});
+function l({ label: n, columns: r = 1, children: i }) {
+	return /* @__PURE__ */ o("fieldset", {
+		className: "ds-choice-group",
+		children: [/* @__PURE__ */ a("legend", {
+			className: "ds-choice-group__label",
+			children: n
+		}), r === 1 ? /* @__PURE__ */ a(t, {
+			gap: "sm",
+			children: i
+		}) : /* @__PURE__ */ a(e, {
+			columns: r,
+			gap: "sm",
+			children: i
+		})]
+	});
+}
+//#endregion
+export { s as Checkbox, l as ChoiceGroup, c as Radio };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Checkbox","forwardRef","rest","inner","useRef","useEffect","isIndeterminate","className","node","ref","children","Radio","ChoiceGroup","label","columns","Stack","Grid"],"sources":["../../../src/components/Choice/index.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, type InputHTMLAttributes, type ReactNode } from \"react\";\nimport { Grid, Stack } from \"../Grid\";\nimport \"./style.css\";\n\nexport interface CheckboxProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"size\"> {\n  /** Display state only — clicking an indeterminate box selects all. */\n  isIndeterminate?: boolean;\n  children?: ReactNode;\n}\n\n/** An independent yes/no. 20px box at every size, in every context. */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  { isIndeterminate = false, className, children, ...rest },\n  ref,\n) {\n  const inner = useRef<HTMLInputElement | null>(null);\n\n  useEffect(() => {\n    if (inner.current) inner.current.indeterminate = isIndeterminate;\n  }, [isIndeterminate]);\n\n  return (\n    <label className={[\"ds-choice\", className].filter(Boolean).join(\" \")}>\n      <input\n        type=\"checkbox\"\n        className=\"ds-choice__control\"\n        data-kind=\"checkbox\"\n        ref={(node) => {\n          inner.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        {...rest}\n      />\n      {children && <span className=\"ds-choice__label\">{children}</span>}\n    </label>\n  );\n});\n\nexport interface RadioProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"size\"> {\n  children?: ReactNode;\n}\n\n/** One of two or more mutually exclusive choices, all of them visible. */\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(\n  { className, children, ...rest },\n  ref,\n) {\n  return (\n    <label className={[\"ds-choice\", className].filter(Boolean).join(\" \")}>\n      <input\n        ref={ref}\n        type=\"radio\"\n        className=\"ds-choice__control\"\n        data-kind=\"radio\"\n        {...rest}\n      />\n      {children && <span className=\"ds-choice__label\">{children}</span>}\n    </label>\n  );\n});\n\nexport interface ChoiceGroupProps {\n  label: string;\n  /**\n   * Run a long list in columns instead of one stack. Steps down to a single\n   * column inside a narrow container.\n   */\n  columns?: 1 | 2 | 3;\n  children: ReactNode;\n}\n\n/** A set of checkboxes or radios under one group label, spaced by Stack or Grid. */\nexport function ChoiceGroup({ label, columns = 1, children }: ChoiceGroupProps) {\n  return (\n    <fieldset className=\"ds-choice-group\">\n      <legend className=\"ds-choice-group__label\">{label}</legend>\n      {columns === 1 ? (\n        <Stack gap=\"sm\">{children}</Stack>\n      ) : (\n        <Grid columns={columns} gap=\"sm\">\n          {children}\n        </Grid>\n      )}\n    </fieldset>\n  );\n}\n"],"mappings":";;;;AAYA,IAAaA,IAAWC,EAA4C,SAClE,EAAE,qBAAkB,IAAO,cAAW,aAAU,GAAGC,KACnD,GACA;CACA,IAAMC,IAAQC,EAAgC,IAAI;CAMlD,OAJAC,QAAgB;EACd,AAAIF,EAAM,YAAS,EAAM,QAAQ,gBAAgBG;CACnD,GAAG,CAACA,CAAe,CAAC,GAGlB,kBAAC,SAAD;EAAO,WAAW,CAAC,aAAaC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAAnE,UAAA,CACE,kBAAC,SAAD;GACE,MAAK;GACL,WAAU;GACV,aAAU;GACV,MAAM,MAAS;IAEb,AADA,EAAM,UAAUC,GACZ,OAAOC,KAAQ,aAAYA,EAAID,CAAI,IAC9BC,MAAK,EAAI,UAAUD;GAC9B;GACA,GAAIN;EACL,CAAA,GACAQ,KAAY,kBAAC,QAAD;GAAM,WAAU;GAAoB;EAAe,CAAA,CAC3D;;AAEX,CAAC,GAQYC,IAAQV,EAAyC,SAC5D,EAAE,cAAW,aAAU,GAAGC,KAC1B,GACA;CACA,OACE,kBAAC,SAAD;EAAO,WAAW,CAAC,aAAaK,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAAnE,UAAA,CACE,kBAAC,SAAD;GACO;GACL,MAAK;GACL,WAAU;GACV,aAAU;GACV,GAAIL;EACL,CAAA,GACAQ,KAAY,kBAAC,QAAD;GAAM,WAAU;GAAoB;EAAe,CAAA,CAC3D;;AAEX,CAAC;AAaD,SAAgBE,EAAY,EAAE,UAAO,aAAU,GAAG,eAA8B;CAC9E,OACE,kBAAC,YAAD;EAAU,WAAU;EAApB,UAAA,CACE,kBAAC,UAAD;GAAQ,WAAU;GAA0B,UAAAC;EAAc,CAAA,GACzDC,MAAY,IACX,kBAACC,GAAD;GAAO,KAAI;GAAM;EAAgB,CAAA,IAEjC,kBAACC,GAAD;GAAe;GAAS,KAAI;GACzB;EACG,CAAA,CAEA;;AAEd"}

package/dist/components/Choice/style.css

@@ -0,0 +1,96 @@
+@layer components {
+  .ds-choice {
+    display: inline-flex;
+    align-items: start;
+    gap: 10px;
+    font-size: var(--font-size-md);
+    line-height: var(--line-height-body);
+    cursor: pointer;
+  }
+
+  .ds-choice__control {
+    appearance: none;
+    flex: none;
+    inline-size: var(--icon-md);
+    block-size: var(--icon-md);
+    margin: 0;
+    margin-block-start: calc((1lh - var(--icon-md)) / 2);
+    border: var(--control-border-width) solid var(--control-border-color);
+    background: var(--color-surface);
+    cursor: pointer;
+    display: grid;
+    place-content: center;
+    transition: background-color var(--duration-fast) var(--ease-standard);
+  }
+
+  .ds-choice__control[data-kind="checkbox"] {
+    border-radius: var(--field-radius);
+  }
+
+  .ds-choice__control[data-kind="radio"] {
+    border-radius: var(--radius-pill);
+  }
+
+  .ds-choice__control:hover:not(:disabled) {
+    background: var(--field-hover);
+  }
+
+  .ds-choice__control:focus-visible {
+    outline: var(--control-border-width) solid var(--color-focus);
+    outline-offset: 2px;
+  }
+
+  /* Checked checkbox: filled box, tick in the on-solid colour. */
+  .ds-choice__control[data-kind="checkbox"]:checked,
+  .ds-choice__control[data-kind="checkbox"]:indeterminate {
+    background: var(--color-primary);
+  }
+
+  .ds-choice__control[data-kind="checkbox"]:checked::before {
+    content: "";
+    inline-size: 13px;
+    block-size: 13px;
+    background: var(--color-text-on-solid);
+    clip-path: polygon(14% 47%, 0 61%, 40% 100%, 100% 22%, 85% 10%, 38% 71%);
+  }
+
+  .ds-choice__control[data-kind="checkbox"]:indeterminate::before {
+    content: "";
+    inline-size: 10px;
+    block-size: 2px;
+    background: var(--color-text-on-solid);
+  }
+
+  /* Selected radio: surface fill keeps, dot sits inside. */
+  .ds-choice__control[data-kind="radio"]:checked::before {
+    content: "";
+    inline-size: var(--space-2);
+    block-size: var(--space-2);
+    border-radius: var(--radius-pill);
+    background: var(--color-primary);
+  }
+
+  .ds-choice__control[aria-invalid="true"] {
+    border-color: var(--color-danger);
+  }
+
+  .ds-choice:has(.ds-choice__control:disabled) {
+    cursor: not-allowed;
+    opacity: 45%;
+  }
+
+  /* Spacing comes from the Stack or Grid inside. */
+  .ds-choice-group {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    min-inline-size: 0;
+  }
+
+  .ds-choice-group__label {
+    padding: 0;
+    margin-block-end: var(--space-1);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-semibold);
+  }
+}

package/dist/components/Container/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react"),t=require("react/jsx-runtime");var n=(0,e.forwardRef)(function({width:e=`lg`,padded:n=!0,center:r=!0,as:i=`div`,className:a,...o},s){return(0,t.jsx)(i,{ref:s,className:[`ds-container`,`ds-container--${e}`,n?`ds-container--padded`:null,r?`ds-container--center`:null,a].filter(Boolean).join(` `),...o})});exports.Container=n;
+//# sourceMappingURL=index.cjs.map

package/dist/components/Container/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["forwardRef","react","react_jsx_runtime","Container","Tag","rest","width","padded","center","className"],"sources":["../../../src/components/Container/index.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport \"./style.css\";\n\n/** The house measure scale. `full` is \"as wide as the slot allows\". */\nexport type ContainerWidth = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n\nexport interface ContainerProps extends HTMLAttributes<HTMLDivElement> {\n  /** Reading width. `sm` for a form, `md` for prose, `lg` for a page body. */\n  width?: ContainerWidth;\n  /** Gutters either side. Off inside a surface that already has padding. */\n  padded?: boolean;\n  /** Centre the measure in its slot. On by default. */\n  center?: boolean;\n  as?: \"div\" | \"main\" | \"section\" | \"article\" | \"header\" | \"footer\";\n}\n\n/**\n * Holds content to one of the system's widths and — because it declares a\n * size container — lets everything inside respond to the measure it was given\n * rather than to the window.\n */\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(function Container(\n  { width = \"lg\", padded = true, center = true, as: Tag = \"div\", className, ...rest },\n  ref,\n) {\n  return (\n    <Tag\n      ref={ref as never}\n      className={[\n        \"ds-container\",\n        `ds-container--${width}`,\n        padded ? \"ds-container--padded\" : null,\n        center ? \"ds-container--center\" : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      {...rest}\n    />\n  );\n});\n"],"mappings":"A,yHAqBA,IAAaG,GAAA,EAAYH,EAAAA,WAAAA,CAA2C,SAClE,CAAE,QAAQ,KAAM,SAAS,GAAM,SAAS,GAAM,GAAII,EAAM,MAAO,YAAW,GAAGC,GAC7E,EACA,CACA,OACE,EAAAH,EAAA,IAAA,CAACE,EAAD,CACO,MACL,UAAW,CACT,eACA,iBAAiBE,IACjBC,EAAS,uBAAyB,KAClCC,EAAS,uBAAyB,KAClCC,CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,EACX,GAAIJ,CACL,CAAA,CAEL,CAAC,E"}

package/dist/components/Container/index.d.cts

@@ -0,0 +1,19 @@
+import { type HTMLAttributes } from "react";
+/** The house measure scale. `full` is "as wide as the slot allows". */
+export type ContainerWidth = "xs" | "sm" | "md" | "lg" | "xl" | "full";
+export interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
+    /** Reading width. `sm` for a form, `md` for prose, `lg` for a page body. */
+    width?: ContainerWidth;
+    /** Gutters either side. Off inside a surface that already has padding. */
+    padded?: boolean;
+    /** Centre the measure in its slot. On by default. */
+    center?: boolean;
+    as?: "div" | "main" | "section" | "article" | "header" | "footer";
+}
+/**
+ * Holds content to one of the system's widths and — because it declares a
+ * size container — lets everything inside respond to the measure it was given
+ * rather than to the window.
+ */
+export declare const Container: import("react").ForwardRefExoticComponent<ContainerProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=index.d.cts.map