@namroodinc/liquid-editorial 0.0.0-stage → 0.1.1

package/dist/components/Select/style.css

@@ -0,0 +1,88 @@
+@layer components {
+  .ds-select-root {
+    position: relative;
+    inline-size: 100%;
+  }
+
+  .ds-select {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+    padding: 0 10px;
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .ds-select[data-size="sm"] {
+    block-size: var(--field-height-sm);
+    font-size: var(--field-font-size-sm);
+  }
+
+  .ds-select[data-size="md"] {
+    block-size: var(--field-height-md);
+    font-size: var(--field-font-size-md);
+  }
+
+  .ds-select[data-size="lg"] {
+    block-size: var(--field-height-lg);
+    font-size: var(--field-font-size-md);
+  }
+
+  .ds-select[data-placeholder] .ds-select__value {
+    color: var(--color-text-muted);
+  }
+
+  .ds-select__value {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ds-select__chevron {
+    flex: none;
+    color: var(--color-text-muted);
+  }
+
+  .ds-select__menu {
+    max-block-size: min(var(--menu-max-height), var(--popover-max-block-size, 100vh));
+    padding: var(--space-1);
+  }
+
+  .ds-select__option {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-3);
+    border-radius: var(--radius-sm);
+    color: var(--color-text);
+    font-size: var(--font-size-sm);
+    cursor: pointer;
+  }
+
+  .ds-select__option[data-active] {
+    background: var(--field-hover);
+  }
+
+  .ds-select__option[aria-selected="true"] {
+    font-weight: var(--font-weight-semibold);
+  }
+
+  .ds-select__option[aria-disabled="true"] {
+    opacity: 45%;
+    cursor: not-allowed;
+  }
+
+  .ds-select__option-body {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-inline-size: 0;
+    flex: 1;
+  }
+
+  .ds-select__option-description {
+    color: var(--color-text-muted);
+    font-size: var(--font-size-xs);
+  }
+}

package/dist/components/SelectionCard/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");function r({kind:e,title:t,description:r,children:i,className:a,inputProps:o,inputRef:s}){return(0,n.jsxs)(`label`,{className:[`ds-selection-card`,a].filter(Boolean).join(` `),children:[(0,n.jsx)(`input`,{ref:s,type:e,"data-kind":e,className:`ds-selection-card__control`,...o}),(0,n.jsxs)(`span`,{className:`ds-selection-card__text`,children:[(0,n.jsx)(`span`,{className:`ds-selection-card__title`,children:t}),r&&(0,n.jsx)(`span`,{className:`ds-selection-card__description`,children:r}),i&&(0,n.jsx)(`span`,{className:`ds-selection-card__extra`,children:i})]})]})}var i=(0,t.forwardRef)(function({title:e,description:t,children:i,className:a,...o},s){return(0,n.jsx)(r,{kind:`checkbox`,title:e,description:t,className:a,inputProps:o,inputRef:s,children:i})}),a=(0,t.forwardRef)(function({title:e,description:t,children:i,className:a,...o},s){return(0,n.jsx)(r,{kind:`radio`,title:e,description:t,className:a,inputProps:o,inputRef:s,children:i})});function o({label:t,columns:r=2,children:i}){return(0,n.jsxs)(`fieldset`,{className:`ds-selection-card-group`,children:[(0,n.jsx)(`legend`,{className:`ds-selection-card-group__label`,children:t}),(0,n.jsx)(e.Grid,{columns:r,gap:`sm`,className:`ds-selection-card-group__grid`,children:i})]})}exports.CheckboxCard=i,exports.RadioCard=a,exports.SelectionCardGroup=o;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["forwardRef","Grid","require_components_Grid_index","react","react_jsx_runtime","CardBody","className","inputRef","kind","inputProps","title","description","children","CheckboxCard","rest","ref","RadioCard","SelectionCardGroup","label"],"sources":["../../../src/components/SelectionCard/index.tsx"],"sourcesContent":["import { forwardRef, type InputHTMLAttributes, type ReactNode } from \"react\";\nimport { Grid } from \"../Grid\";\nimport \"./style.css\";\n\ninterface SelectionCardBase {\n  /** The commitment, in the user's words. */\n  title: ReactNode;\n  /** One line on what picking this means. Takes nodes, so a chip or a link can sit inline. */\n  description?: ReactNode;\n  /** Extra content under the description — a price, a sample, a badge. */\n  children?: ReactNode;\n}\n\ntype NativeInput = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"type\" | \"size\" | \"children\" | \"title\"\n>;\n\nfunction CardBody({\n  kind,\n  title,\n  description,\n  children,\n  className,\n  inputProps,\n  inputRef,\n}: SelectionCardBase & {\n  kind: \"checkbox\" | \"radio\";\n  className?: string;\n  inputProps: NativeInput;\n  inputRef: React.Ref<HTMLInputElement>;\n}) {\n  return (\n    <label className={[\"ds-selection-card\", className].filter(Boolean).join(\" \")}>\n      <input\n        ref={inputRef}\n        type={kind}\n        data-kind={kind}\n        className=\"ds-selection-card__control\"\n        {...inputProps}\n      />\n      <span className=\"ds-selection-card__text\">\n        <span className=\"ds-selection-card__title\">{title}</span>\n        {description && <span className=\"ds-selection-card__description\">{description}</span>}\n        {children && <span className=\"ds-selection-card__extra\">{children}</span>}\n      </span>\n    </label>\n  );\n}\n\nexport interface CheckboxCardProps extends SelectionCardBase, NativeInput {}\n\n/**\n * A checkbox with room to explain itself. Same 20px box as the bare control —\n * the card is a bigger target, not a different decision.\n */\nexport const CheckboxCard = forwardRef<HTMLInputElement, CheckboxCardProps>(\n  function CheckboxCard({ title, description, children, className, ...rest }, ref) {\n    return (\n      <CardBody\n        kind=\"checkbox\"\n        title={title}\n        description={description}\n        className={className}\n        inputProps={rest}\n        inputRef={ref}\n      >\n        {children}\n      </CardBody>\n    );\n  },\n);\n\nexport interface RadioCardProps extends SelectionCardBase, NativeInput {}\n\n/** One of a set of mutually exclusive options, each with its own explanation. */\nexport const RadioCard = forwardRef<HTMLInputElement, RadioCardProps>(function RadioCard(\n  { title, description, children, className, ...rest },\n  ref,\n) {\n  return (\n    <CardBody\n      kind=\"radio\"\n      title={title}\n      description={description}\n      className={className}\n      inputProps={rest}\n      inputRef={ref}\n    >\n      {children}\n    </CardBody>\n  );\n});\n\nexport interface SelectionCardGroupProps {\n  /** Group label — the question the cards answer. */\n  label: string;\n  /** Cards per row at full width. Steps down inside a narrow container. */\n  columns?: 1 | 2 | 3;\n  children: ReactNode;\n}\n\n/** A grid of selection cards under one legend, spaced by the shared Grid. */\nexport function SelectionCardGroup({ label, columns = 2, children }: SelectionCardGroupProps) {\n  return (\n    <fieldset className=\"ds-selection-card-group\">\n      <legend className=\"ds-selection-card-group__label\">{label}</legend>\n      <Grid columns={columns} gap=\"sm\" className=\"ds-selection-card-group__grid\">\n        {children}\n      </Grid>\n    </fieldset>\n  );\n}\n"],"mappings":"A,8JAkBA,SAASK,EAAS,CAChB,OACA,QACA,cACA,WACA,YACA,aACA,YAMC,CACD,OACE,EAAAD,EAAA,KAAA,CAAC,QAAD,CAAO,UAAW,CAAC,oBAAqBE,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,EAA3E,SAAA,EACE,EAAAF,EAAA,IAAA,CAAC,QAAD,CACE,IAAKG,EACL,KAAMC,EACN,YAAWA,EACX,UAAU,6BACV,GAAIC,CACL,CAAA,GACD,EAAAL,EAAA,KAAA,CAAC,OAAD,CAAM,UAAU,0BAAhB,SAAA,EACE,EAAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,2BAA4B,SAAAM,CAAY,CAAA,EACvDC,IAAe,EAAAP,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,iCAAkC,SAAAO,CAAkB,CAAA,EACnFC,IAAY,EAAAR,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,2BAA4B,UAAe,CAAA,CACpE,CACD,CAAA,CAAA,C,EAEX,CAQA,IAAaS,GAAA,EAAeb,EAAAA,WAAAA,CAC1B,SAAsB,CAAE,QAAO,cAAa,WAAU,YAAW,GAAGc,GAAQ,EAAK,CAC/E,OACE,EAAAV,EAAA,IAAA,CAACC,EAAD,CACE,KAAK,WACE,QACM,cACF,YACX,WAAYS,EACZ,SAAUC,EAET,UACO,CAAA,CAEd,CACF,EAKaC,GAAA,EAAYhB,EAAAA,WAAAA,CAA6C,SACpE,CAAE,QAAO,cAAa,WAAU,YAAW,GAAGc,GAC9C,EACA,CACA,OACE,EAAAV,EAAA,IAAA,CAACC,EAAD,CACE,KAAK,QACE,QACM,cACF,YACX,WAAYS,EACZ,SAAUC,EAET,UACO,CAAA,CAEd,CAAC,EAWD,SAAgBE,EAAmB,CAAE,QAAO,UAAU,EAAG,YAAqC,CAC5F,OACE,EAAAb,EAAA,KAAA,CAAC,WAAD,CAAU,UAAU,0BAApB,SAAA,EACE,EAAAA,EAAA,IAAA,CAAC,SAAD,CAAQ,UAAU,iCAAkC,SAAAc,CAAc,CAAA,GAClE,EAAAd,EAAA,IAAA,CAACH,EAAAA,KAAD,CAAe,UAAS,IAAI,KAAK,UAAU,gCACxC,UACG,CAAA,CACE,C,EAEd,C"}

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

@@ -0,0 +1,32 @@
+import { type InputHTMLAttributes, type ReactNode } from "react";
+interface SelectionCardBase {
+    /** The commitment, in the user's words. */
+    title: ReactNode;
+    /** One line on what picking this means. Takes nodes, so a chip or a link can sit inline. */
+    description?: ReactNode;
+    /** Extra content under the description — a price, a sample, a badge. */
+    children?: ReactNode;
+}
+type NativeInput = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "children" | "title">;
+export interface CheckboxCardProps extends SelectionCardBase, NativeInput {
+}
+/**
+ * A checkbox with room to explain itself. Same 20px box as the bare control —
+ * the card is a bigger target, not a different decision.
+ */
+export declare const CheckboxCard: import("react").ForwardRefExoticComponent<CheckboxCardProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface RadioCardProps extends SelectionCardBase, NativeInput {
+}
+/** One of a set of mutually exclusive options, each with its own explanation. */
+export declare const RadioCard: import("react").ForwardRefExoticComponent<RadioCardProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface SelectionCardGroupProps {
+    /** Group label — the question the cards answer. */
+    label: string;
+    /** Cards per row at full width. Steps down inside a narrow container. */
+    columns?: 1 | 2 | 3;
+    children: ReactNode;
+}
+/** A grid of selection cards under one legend, spaced by the shared Grid. */
+export declare function SelectionCardGroup({ label, columns, children }: SelectionCardGroupProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/SelectionCard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7E,OAAO,aAAa,CAAC;AAErB,UAAU,iBAAiB;IACzB,2CAA2C;IAC3C,KAAK,EAAE,SAAS,CAAC;IACjB,4FAA4F;IAC5F,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,KAAK,WAAW,GAAG,IAAI,CACrB,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,CACvC,CAAC;AAkCF,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB,EAAE,WAAW;CAAG;AAE5E;;;GAGG;AACH,eAAO,MAAM,YAAY,gHAexB,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,iBAAiB,EAAE,WAAW;CAAG;AAEzE,iFAAiF;AACjF,eAAO,MAAM,SAAS,6GAgBpB,CAAC;AAEH,MAAM,WAAW,uBAAuB;IACtC,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,6EAA6E;AAC7E,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,OAAW,EAAE,QAAQ,EAAE,EAAE,uBAAuB,+BAS3F"}

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

@@ -0,0 +1,32 @@
+import { type InputHTMLAttributes, type ReactNode } from "react";
+interface SelectionCardBase {
+    /** The commitment, in the user's words. */
+    title: ReactNode;
+    /** One line on what picking this means. Takes nodes, so a chip or a link can sit inline. */
+    description?: ReactNode;
+    /** Extra content under the description — a price, a sample, a badge. */
+    children?: ReactNode;
+}
+type NativeInput = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "children" | "title">;
+export interface CheckboxCardProps extends SelectionCardBase, NativeInput {
+}
+/**
+ * A checkbox with room to explain itself. Same 20px box as the bare control —
+ * the card is a bigger target, not a different decision.
+ */
+export declare const CheckboxCard: import("react").ForwardRefExoticComponent<CheckboxCardProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface RadioCardProps extends SelectionCardBase, NativeInput {
+}
+/** One of a set of mutually exclusive options, each with its own explanation. */
+export declare const RadioCard: import("react").ForwardRefExoticComponent<RadioCardProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface SelectionCardGroupProps {
+    /** Group label — the question the cards answer. */
+    label: string;
+    /** Cards per row at full width. Steps down inside a narrow container. */
+    columns?: 1 | 2 | 3;
+    children: ReactNode;
+}
+/** A grid of selection cards under one legend, spaced by the shared Grid. */
+export declare function SelectionCardGroup({ label, columns, children }: SelectionCardGroupProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionCard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7E,OAAO,aAAa,CAAC;AAErB,UAAU,iBAAiB;IACzB,2CAA2C;IAC3C,KAAK,EAAE,SAAS,CAAC;IACjB,4FAA4F;IAC5F,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,KAAK,WAAW,GAAG,IAAI,CACrB,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,CACvC,CAAC;AAkCF,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB,EAAE,WAAW;CAAG;AAE5E;;;GAGG;AACH,eAAO,MAAM,YAAY,gHAexB,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,iBAAiB,EAAE,WAAW;CAAG;AAEzE,iFAAiF;AACjF,eAAO,MAAM,SAAS,6GAgBpB,CAAC;AAEH,MAAM,WAAW,uBAAuB;IACtC,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,6EAA6E;AAC7E,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,OAAW,EAAE,QAAQ,EAAE,EAAE,uBAAuB,+BAS3F"}

package/dist/components/SelectionCard/index.js

@@ -0,0 +1,71 @@
+import { Grid as e } from "../Grid/index.js";
+import { forwardRef as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/SelectionCard/index.tsx
+function i({ kind: e, title: t, description: i, children: a, className: o, inputProps: s, inputRef: c }) {
+	return /* @__PURE__ */ r("label", {
+		className: ["ds-selection-card", o].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ n("input", {
+			ref: c,
+			type: e,
+			"data-kind": e,
+			className: "ds-selection-card__control",
+			...s
+		}), /* @__PURE__ */ r("span", {
+			className: "ds-selection-card__text",
+			children: [
+				/* @__PURE__ */ n("span", {
+					className: "ds-selection-card__title",
+					children: t
+				}),
+				i && /* @__PURE__ */ n("span", {
+					className: "ds-selection-card__description",
+					children: i
+				}),
+				a && /* @__PURE__ */ n("span", {
+					className: "ds-selection-card__extra",
+					children: a
+				})
+			]
+		})]
+	});
+}
+var a = t(function({ title: e, description: t, children: r, className: a, ...o }, s) {
+	return /* @__PURE__ */ n(i, {
+		kind: "checkbox",
+		title: e,
+		description: t,
+		className: a,
+		inputProps: o,
+		inputRef: s,
+		children: r
+	});
+}), o = t(function({ title: e, description: t, children: r, className: a, ...o }, s) {
+	return /* @__PURE__ */ n(i, {
+		kind: "radio",
+		title: e,
+		description: t,
+		className: a,
+		inputProps: o,
+		inputRef: s,
+		children: r
+	});
+});
+function s({ label: t, columns: i = 2, children: a }) {
+	return /* @__PURE__ */ r("fieldset", {
+		className: "ds-selection-card-group",
+		children: [/* @__PURE__ */ n("legend", {
+			className: "ds-selection-card-group__label",
+			children: t
+		}), /* @__PURE__ */ n(e, {
+			columns: i,
+			gap: "sm",
+			className: "ds-selection-card-group__grid",
+			children: a
+		})]
+	});
+}
+//#endregion
+export { a as CheckboxCard, o as RadioCard, s as SelectionCardGroup };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["CardBody","className","inputRef","kind","inputProps","title","description","children","CheckboxCard","forwardRef","rest","ref","RadioCard","SelectionCardGroup","label","Grid"],"sources":["../../../src/components/SelectionCard/index.tsx"],"sourcesContent":["import { forwardRef, type InputHTMLAttributes, type ReactNode } from \"react\";\nimport { Grid } from \"../Grid\";\nimport \"./style.css\";\n\ninterface SelectionCardBase {\n  /** The commitment, in the user's words. */\n  title: ReactNode;\n  /** One line on what picking this means. Takes nodes, so a chip or a link can sit inline. */\n  description?: ReactNode;\n  /** Extra content under the description — a price, a sample, a badge. */\n  children?: ReactNode;\n}\n\ntype NativeInput = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"type\" | \"size\" | \"children\" | \"title\"\n>;\n\nfunction CardBody({\n  kind,\n  title,\n  description,\n  children,\n  className,\n  inputProps,\n  inputRef,\n}: SelectionCardBase & {\n  kind: \"checkbox\" | \"radio\";\n  className?: string;\n  inputProps: NativeInput;\n  inputRef: React.Ref<HTMLInputElement>;\n}) {\n  return (\n    <label className={[\"ds-selection-card\", className].filter(Boolean).join(\" \")}>\n      <input\n        ref={inputRef}\n        type={kind}\n        data-kind={kind}\n        className=\"ds-selection-card__control\"\n        {...inputProps}\n      />\n      <span className=\"ds-selection-card__text\">\n        <span className=\"ds-selection-card__title\">{title}</span>\n        {description && <span className=\"ds-selection-card__description\">{description}</span>}\n        {children && <span className=\"ds-selection-card__extra\">{children}</span>}\n      </span>\n    </label>\n  );\n}\n\nexport interface CheckboxCardProps extends SelectionCardBase, NativeInput {}\n\n/**\n * A checkbox with room to explain itself. Same 20px box as the bare control —\n * the card is a bigger target, not a different decision.\n */\nexport const CheckboxCard = forwardRef<HTMLInputElement, CheckboxCardProps>(\n  function CheckboxCard({ title, description, children, className, ...rest }, ref) {\n    return (\n      <CardBody\n        kind=\"checkbox\"\n        title={title}\n        description={description}\n        className={className}\n        inputProps={rest}\n        inputRef={ref}\n      >\n        {children}\n      </CardBody>\n    );\n  },\n);\n\nexport interface RadioCardProps extends SelectionCardBase, NativeInput {}\n\n/** One of a set of mutually exclusive options, each with its own explanation. */\nexport const RadioCard = forwardRef<HTMLInputElement, RadioCardProps>(function RadioCard(\n  { title, description, children, className, ...rest },\n  ref,\n) {\n  return (\n    <CardBody\n      kind=\"radio\"\n      title={title}\n      description={description}\n      className={className}\n      inputProps={rest}\n      inputRef={ref}\n    >\n      {children}\n    </CardBody>\n  );\n});\n\nexport interface SelectionCardGroupProps {\n  /** Group label — the question the cards answer. */\n  label: string;\n  /** Cards per row at full width. Steps down inside a narrow container. */\n  columns?: 1 | 2 | 3;\n  children: ReactNode;\n}\n\n/** A grid of selection cards under one legend, spaced by the shared Grid. */\nexport function SelectionCardGroup({ label, columns = 2, children }: SelectionCardGroupProps) {\n  return (\n    <fieldset className=\"ds-selection-card-group\">\n      <legend className=\"ds-selection-card-group__label\">{label}</legend>\n      <Grid columns={columns} gap=\"sm\" className=\"ds-selection-card-group__grid\">\n        {children}\n      </Grid>\n    </fieldset>\n  );\n}\n"],"mappings":";;;;AAkBA,SAASA,EAAS,EAChB,SACA,UACA,gBACA,aACA,cACA,eACA,eAMC;CACD,OACE,kBAAC,SAAD;EAAO,WAAW,CAAC,qBAAqBC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAA3E,UAAA,CACE,kBAAC,SAAD;GACE,KAAKC;GACL,MAAMC;GACN,aAAWA;GACX,WAAU;GACV,GAAIC;EACL,CAAA,GACD,kBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA;IACE,kBAAC,QAAD;KAAM,WAAU;KAA4B,UAAAC;IAAY,CAAA;IACvDC,KAAe,kBAAC,QAAD;KAAM,WAAU;KAAkC,UAAAA;IAAkB,CAAA;IACnFC,KAAY,kBAAC,QAAD;KAAM,WAAU;KAA4B;IAAe,CAAA;GACpE;EACD,CAAA,CAAA;;AAEX;AAQA,IAAaC,IAAeC,EAC1B,SAAsB,EAAE,UAAO,gBAAa,aAAU,cAAW,GAAGC,KAAQ,GAAK;CAC/E,OACE,kBAACV,GAAD;EACE,MAAK;EACE;EACM;EACF;EACX,YAAYU;EACZ,UAAUC;EAET;CACO,CAAA;AAEd,CACF,GAKaC,IAAYH,EAA6C,SACpE,EAAE,UAAO,gBAAa,aAAU,cAAW,GAAGC,KAC9C,GACA;CACA,OACE,kBAACV,GAAD;EACE,MAAK;EACE;EACM;EACF;EACX,YAAYU;EACZ,UAAUC;EAET;CACO,CAAA;AAEd,CAAC;AAWD,SAAgBE,EAAmB,EAAE,UAAO,aAAU,GAAG,eAAqC;CAC5F,OACE,kBAAC,YAAD;EAAU,WAAU;EAApB,UAAA,CACE,kBAAC,UAAD;GAAQ,WAAU;GAAkC,UAAAC;EAAc,CAAA,GAClE,kBAACC,GAAD;GAAe;GAAS,KAAI;GAAK,WAAU;GACxC;EACG,CAAA,CACE;;AAEd"}

package/dist/components/SelectionCard/style.css

@@ -0,0 +1,133 @@
+@layer components {
+  .ds-selection-card {
+    display: flex;
+    align-items: start;
+    gap: var(--space-3);
+    padding: var(--space-4);
+    min-inline-size: var(--choice-card-min-width);
+    background: var(--color-surface);
+    border: var(--control-border-width) solid var(--control-border-color);
+    border-radius: var(--field-radius);
+    cursor: pointer;
+    transition:
+      background-color var(--duration-fast) var(--ease-standard),
+      border-color var(--duration-fast) var(--ease-standard);
+  }
+
+  .ds-selection-card:hover:not(:has(:disabled)) {
+    background: var(--field-hover);
+  }
+
+  .ds-selection-card:has(.ds-selection-card__control:checked) {
+    background: var(--color-primary-soft);
+    border-color: var(--color-primary);
+  }
+
+  .ds-selection-card:has(.ds-selection-card__control:focus-visible) {
+    outline: var(--control-border-width) solid var(--color-focus);
+    outline-offset: 2px;
+  }
+
+  .ds-selection-card:has(.ds-selection-card__control[aria-invalid="true"]) {
+    border-color: var(--color-danger);
+  }
+
+  .ds-selection-card:has(.ds-selection-card__control:disabled) {
+    cursor: not-allowed;
+    opacity: 45%;
+  }
+
+  /* Same control geometry as the bare checkbox and radio. */
+  .ds-selection-card__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: inherit;
+    display: grid;
+    place-content: center;
+  }
+
+  .ds-selection-card__control[data-kind="checkbox"] {
+    border-radius: var(--field-radius);
+  }
+
+  .ds-selection-card__control[data-kind="radio"] {
+    border-radius: var(--radius-pill);
+  }
+
+  .ds-selection-card__control[data-kind="checkbox"]:checked {
+    background: var(--color-primary);
+  }
+
+  .ds-selection-card__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-selection-card__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-selection-card__text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    min-inline-size: 0;
+  }
+
+  .ds-selection-card__title {
+    font-size: var(--font-size-md);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--line-height-body);
+  }
+
+  .ds-selection-card__description {
+    color: var(--color-text-muted);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-body);
+  }
+
+  .ds-selection-card__extra {
+    margin-block-start: var(--space-1);
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  .ds-selection-card-group {
+    border: 0;
+    margin: 0;
+    padding: 0;
+    min-inline-size: 0;
+  }
+
+  .ds-selection-card-group__label {
+    padding: 0;
+    margin-block-end: var(--space-3);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-bold);
+  }
+
+
+  @media (prefers-reduced-motion: reduce) {
+    .ds-selection-card {
+      transition: none;
+    }
+  }
+}

package/dist/components/SideNav/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs");let t=require("react"),n=require("react/jsx-runtime");var r=(0,t.createContext)({isCollapsed:!1});function i(){return(0,t.useContext)(r).isCollapsed}var a=(0,t.forwardRef)(function({isCollapsed:e,defaultCollapsed:i=!1,onCollapsedChange:a,label:s=`Main`,className:c,children:l,...u},d){let[f,p]=(0,t.useState)(i),m=e??f,h=(0,t.useCallback)(()=>{let t=!m;e===void 0&&p(t),a?.(t)},[e,m,a]),g=(0,t.useMemo)(()=>({isCollapsed:m}),[m]);return(0,n.jsx)(r.Provider,{value:g,children:(0,n.jsx)(o.Provider,{value:h,children:(0,n.jsx)(`nav`,{ref:d,"aria-label":s,"data-collapsed":m||void 0,className:[`ds-sidenav`,c].filter(Boolean).join(` `),...u,children:l})})})}),o=(0,t.createContext)(()=>{}),s=(0,t.forwardRef)(function({title:i,mark:a,isCollapsible:s=!0,className:c,children:l,...u},d){let{isCollapsed:f}=(0,t.useContext)(r),p=(0,t.useContext)(o);return(0,n.jsxs)(`div`,{ref:d,className:[`ds-sidenav__header`,c].filter(Boolean).join(` `),...u,children:[a&&(0,n.jsx)(`span`,{className:`ds-sidenav__mark`,children:a}),!f&&(i||l)&&(0,n.jsx)(`span`,{className:`ds-sidenav__title`,children:i??l}),s&&(0,n.jsx)(`button`,{type:`button`,className:`ds-sidenav__toggle`,"aria-label":f?`Expand navigation`:`Collapse navigation`,"aria-expanded":!f,title:f?`Expand navigation`:`Collapse navigation`,onClick:p,children:(0,n.jsx)(e.t,{name:f?`chevrons-right`:`chevrons-left`})})]})}),c=(0,t.forwardRef)(function({label:e,className:i,children:a,...o},s){let{isCollapsed:c}=(0,t.useContext)(r);return(0,n.jsxs)(`div`,{ref:s,className:[`ds-sidenav__section`,i].filter(Boolean).join(` `),"aria-label":e,role:e?`group`:void 0,...o,children:[e&&!c&&(0,n.jsx)(`span`,{className:`ds-sidenav__section-label`,children:e}),(0,n.jsx)(`ul`,{className:`ds-sidenav__list`,children:a})]})}),l=(0,t.forwardRef)(function({icon:i,label:a,isActive:o,badge:s,className:c,...l},u){let{isCollapsed:d}=(0,t.useContext)(r);return(0,n.jsx)(`li`,{className:`ds-sidenav__row`,children:(0,n.jsxs)(`a`,{ref:u,className:[`ds-sidenav__item`,c].filter(Boolean).join(` `),"data-active":o||void 0,"aria-current":o?`page`:void 0,title:d?a:void 0,...l,children:[(0,n.jsx)(e.t,{name:i}),!d&&(0,n.jsx)(`span`,{className:`ds-sidenav__label`,children:a}),!d&&s&&(0,n.jsx)(`span`,{className:`ds-sidenav__badge`,children:s}),d&&(0,n.jsx)(`span`,{className:`ds-sidenav__sr`,children:a})]})})}),u=(0,t.forwardRef)(function({className:e,children:t,...r},i){return(0,n.jsx)(`div`,{ref:i,className:[`ds-sidenav__footer`,e].filter(Boolean).join(` `),...r,children:t})});exports.SideNav=a,exports.SideNavFooter=u,exports.SideNavHeader=s,exports.SideNavItem=l,exports.SideNavSection=c,exports.useSideNavCollapsed=i;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["createContext","useContext","forwardRef","useState","useCallback","useMemo","Icon","require_Icon","react","react_jsx_runtime","SideNavContext","useSideNavCollapsed","SideNav","controlled","rest","uncontrolled","setUncontrolled","defaultCollapsed","isCollapsed","toggle","next","onCollapsedChange","value","SideNavToggleContext","label","className","SideNavHeader","mark","title","children","isCollapsible","SideNavSection","SideNavItem","isActive","icon","badge","SideNavFooter"],"sources":["../../../src/components/SideNav/index.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n  type AnchorHTMLAttributes,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { Icon } from \"../Icon\";\nimport type { IconName } from \"../Icon/icons\";\nimport \"./style.css\";\n\ninterface SideNavContextValue {\n  isCollapsed: boolean;\n}\n\nconst SideNavContext = createContext<SideNavContextValue>({ isCollapsed: false });\n\n/** Read the rail's collapsed state from anything rendered inside it. */\nexport function useSideNavCollapsed(): boolean {\n  return useContext(SideNavContext).isCollapsed;\n}\n\nexport interface SideNavProps extends HTMLAttributes<HTMLElement> {\n  /** Controlled collapsed state. Omit to let the rail own it. */\n  isCollapsed?: boolean;\n  /** Initial state when uncontrolled. */\n  defaultCollapsed?: boolean;\n  /** Fired by the header's collapse toggle. */\n  onCollapsedChange?: (isCollapsed: boolean) => void;\n  /** Accessible name for the landmark. */\n  label?: string;\n  children?: ReactNode;\n}\n\n/**\n * The primary rail: one heavy edge against the page, hairline rules between\n * sections. Collapsed it keeps the icons and drops the words — the width is a\n * token, so every rail in the product collapses to the same measure.\n */\nexport const SideNav = forwardRef<HTMLElement, SideNavProps>(function SideNav(\n  {\n    isCollapsed: controlled,\n    defaultCollapsed = false,\n    onCollapsedChange,\n    label = \"Main\",\n    className,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const [uncontrolled, setUncontrolled] = useState(defaultCollapsed);\n  const isCollapsed = controlled ?? uncontrolled;\n\n  const toggle = useCallback(() => {\n    const next = !isCollapsed;\n    if (controlled === undefined) setUncontrolled(next);\n    onCollapsedChange?.(next);\n  }, [controlled, isCollapsed, onCollapsedChange]);\n\n  const value = useMemo(() => ({ isCollapsed }), [isCollapsed]);\n\n  return (\n    <SideNavContext.Provider value={value}>\n      <SideNavToggleContext.Provider value={toggle}>\n        <nav\n          ref={ref}\n          aria-label={label}\n          data-collapsed={isCollapsed || undefined}\n          className={[\"ds-sidenav\", className].filter(Boolean).join(\" \")}\n          {...rest}\n        >\n          {children}\n        </nav>\n      </SideNavToggleContext.Provider>\n    </SideNavContext.Provider>\n  );\n});\n\nconst SideNavToggleContext = createContext<() => void>(() => {});\n\nexport interface SideNavHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Shown when the rail is open; hidden when it collapses. */\n  title?: ReactNode;\n  /** A mark that survives the collapse — a logo, a monogram. */\n  mark?: ReactNode;\n  /** Set false when the rail is permanently open. */\n  isCollapsible?: boolean;\n  children?: ReactNode;\n}\n\n/** Brand block plus the collapse toggle, above the first hairline rule. */\nexport const SideNavHeader = forwardRef<HTMLDivElement, SideNavHeaderProps>(\n  function SideNavHeader({ title, mark, isCollapsible = true, className, children, ...rest }, ref) {\n    const { isCollapsed } = useContext(SideNavContext);\n    const toggle = useContext(SideNavToggleContext);\n\n    return (\n      <div\n        ref={ref}\n        className={[\"ds-sidenav__header\", className].filter(Boolean).join(\" \")}\n        {...rest}\n      >\n        {mark && <span className=\"ds-sidenav__mark\">{mark}</span>}\n        {!isCollapsed && (title || children) && (\n          <span className=\"ds-sidenav__title\">{title ?? children}</span>\n        )}\n        {isCollapsible && (\n          <button\n            type=\"button\"\n            className=\"ds-sidenav__toggle\"\n            aria-label={isCollapsed ? \"Expand navigation\" : \"Collapse navigation\"}\n            aria-expanded={!isCollapsed}\n            title={isCollapsed ? \"Expand navigation\" : \"Collapse navigation\"}\n            onClick={toggle}\n          >\n            <Icon name={isCollapsed ? \"chevrons-right\" : \"chevrons-left\"} />\n          </button>\n        )}\n      </div>\n    );\n  },\n);\n\nexport interface SideNavSectionProps extends HTMLAttributes<HTMLDivElement> {\n  /** Section label. Hidden — but still announced — when collapsed. */\n  label?: string;\n  children?: ReactNode;\n}\n\n/** A group of items under one label, separated by a hairline rule. */\nexport const SideNavSection = forwardRef<HTMLDivElement, SideNavSectionProps>(\n  function SideNavSection({ label, className, children, ...rest }, ref) {\n    const { isCollapsed } = useContext(SideNavContext);\n\n    return (\n      <div\n        ref={ref}\n        className={[\"ds-sidenav__section\", className].filter(Boolean).join(\" \")}\n        aria-label={label}\n        role={label ? \"group\" : undefined}\n        {...rest}\n      >\n        {label && !isCollapsed && <span className=\"ds-sidenav__section-label\">{label}</span>}\n        <ul className=\"ds-sidenav__list\">{children}</ul>\n      </div>\n    );\n  },\n);\n\nexport interface SideNavItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  icon: IconName;\n  /** The words. Kept in the accessible name even when the rail is collapsed. */\n  label: string;\n  isActive?: boolean;\n  /** A count or status pill at the end of the row. Hidden when collapsed. */\n  badge?: ReactNode;\n}\n\n/**\n * One destination. The active row carries the solid rail on its leading edge —\n * the same rail as a selected table row, so selection reads the same anywhere.\n */\nexport const SideNavItem = forwardRef<HTMLAnchorElement, SideNavItemProps>(\n  function SideNavItem({ icon, label, isActive, badge, className, ...rest }, ref) {\n    const { isCollapsed } = useContext(SideNavContext);\n\n    return (\n      <li className=\"ds-sidenav__row\">\n        <a\n          ref={ref}\n          className={[\"ds-sidenav__item\", className].filter(Boolean).join(\" \")}\n          data-active={isActive || undefined}\n          aria-current={isActive ? \"page\" : undefined}\n          title={isCollapsed ? label : undefined}\n          {...rest}\n        >\n          <Icon name={icon} />\n          {!isCollapsed && <span className=\"ds-sidenav__label\">{label}</span>}\n          {!isCollapsed && badge && <span className=\"ds-sidenav__badge\">{badge}</span>}\n          {isCollapsed && <span className=\"ds-sidenav__sr\">{label}</span>}\n        </a>\n      </li>\n    );\n  },\n);\n\nexport interface SideNavFooterProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n}\n\n/** The bottom band — account, theme, help. Above the page edge, under a rule. */\nexport const SideNavFooter = forwardRef<HTMLDivElement, SideNavFooterProps>(\n  function SideNavFooter({ className, children, ...rest }, ref) {\n    return (\n      <div\n        ref={ref}\n        className={[\"ds-sidenav__footer\", className].filter(Boolean).join(\" \")}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}

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

@@ -0,0 +1,58 @@
+import { type AnchorHTMLAttributes, type HTMLAttributes, type ReactNode } from "react";
+import type { IconName } from "../Icon/icons.cjs";
+/** Read the rail's collapsed state from anything rendered inside it. */
+export declare function useSideNavCollapsed(): boolean;
+export interface SideNavProps extends HTMLAttributes<HTMLElement> {
+    /** Controlled collapsed state. Omit to let the rail own it. */
+    isCollapsed?: boolean;
+    /** Initial state when uncontrolled. */
+    defaultCollapsed?: boolean;
+    /** Fired by the header's collapse toggle. */
+    onCollapsedChange?: (isCollapsed: boolean) => void;
+    /** Accessible name for the landmark. */
+    label?: string;
+    children?: ReactNode;
+}
+/**
+ * The primary rail: one heavy edge against the page, hairline rules between
+ * sections. Collapsed it keeps the icons and drops the words — the width is a
+ * token, so every rail in the product collapses to the same measure.
+ */
+export declare const SideNav: import("react").ForwardRefExoticComponent<SideNavProps & import("react").RefAttributes<HTMLElement>>;
+export interface SideNavHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Shown when the rail is open; hidden when it collapses. */
+    title?: ReactNode;
+    /** A mark that survives the collapse — a logo, a monogram. */
+    mark?: ReactNode;
+    /** Set false when the rail is permanently open. */
+    isCollapsible?: boolean;
+    children?: ReactNode;
+}
+/** Brand block plus the collapse toggle, above the first hairline rule. */
+export declare const SideNavHeader: import("react").ForwardRefExoticComponent<SideNavHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface SideNavSectionProps extends HTMLAttributes<HTMLDivElement> {
+    /** Section label. Hidden — but still announced — when collapsed. */
+    label?: string;
+    children?: ReactNode;
+}
+/** A group of items under one label, separated by a hairline rule. */
+export declare const SideNavSection: import("react").ForwardRefExoticComponent<SideNavSectionProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface SideNavItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    icon: IconName;
+    /** The words. Kept in the accessible name even when the rail is collapsed. */
+    label: string;
+    isActive?: boolean;
+    /** A count or status pill at the end of the row. Hidden when collapsed. */
+    badge?: ReactNode;
+}
+/**
+ * One destination. The active row carries the solid rail on its leading edge —
+ * the same rail as a selected table row, so selection reads the same anywhere.
+ */
+export declare const SideNavItem: import("react").ForwardRefExoticComponent<SideNavItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export interface SideNavFooterProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+/** The bottom band — account, theme, help. Above the page edge, under a rule. */
+export declare const SideNavFooter: import("react").ForwardRefExoticComponent<SideNavFooterProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/SideNav/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,oBAAoB,EACzB,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,aAAa,CAAC;AAQrB,wEAAwE;AACxE,wBAAgB,mBAAmB,IAAI,OAAO,CAE7C;AAED,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC/D,+DAA+D;IAC/D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uCAAuC;IACvC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6CAA6C;IAC7C,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IACnD,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;GAIG;AACH,eAAO,MAAM,OAAO,sGAsClB,CAAC;AAIH,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACvF,6DAA6D;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mDAAmD;IACnD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,2EAA2E;AAC3E,eAAO,MAAM,aAAa,+GA8BzB,CAAC;AAEF,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACzE,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,sEAAsE;AACtE,eAAO,MAAM,cAAc,gHAiB1B,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/E,IAAI,EAAE,QAAQ,CAAC;IACf,8EAA8E;IAC9E,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,gHAsBvB,CAAC;AAEF,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACxE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,iFAAiF;AACjF,eAAO,MAAM,aAAa,+GAYzB,CAAC"}

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

@@ -0,0 +1,58 @@
+import { type AnchorHTMLAttributes, type HTMLAttributes, type ReactNode } from "react";
+import type { IconName } from "../Icon/icons.js";
+/** Read the rail's collapsed state from anything rendered inside it. */
+export declare function useSideNavCollapsed(): boolean;
+export interface SideNavProps extends HTMLAttributes<HTMLElement> {
+    /** Controlled collapsed state. Omit to let the rail own it. */
+    isCollapsed?: boolean;
+    /** Initial state when uncontrolled. */
+    defaultCollapsed?: boolean;
+    /** Fired by the header's collapse toggle. */
+    onCollapsedChange?: (isCollapsed: boolean) => void;
+    /** Accessible name for the landmark. */
+    label?: string;
+    children?: ReactNode;
+}
+/**
+ * The primary rail: one heavy edge against the page, hairline rules between
+ * sections. Collapsed it keeps the icons and drops the words — the width is a
+ * token, so every rail in the product collapses to the same measure.
+ */
+export declare const SideNav: import("react").ForwardRefExoticComponent<SideNavProps & import("react").RefAttributes<HTMLElement>>;
+export interface SideNavHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Shown when the rail is open; hidden when it collapses. */
+    title?: ReactNode;
+    /** A mark that survives the collapse — a logo, a monogram. */
+    mark?: ReactNode;
+    /** Set false when the rail is permanently open. */
+    isCollapsible?: boolean;
+    children?: ReactNode;
+}
+/** Brand block plus the collapse toggle, above the first hairline rule. */
+export declare const SideNavHeader: import("react").ForwardRefExoticComponent<SideNavHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface SideNavSectionProps extends HTMLAttributes<HTMLDivElement> {
+    /** Section label. Hidden — but still announced — when collapsed. */
+    label?: string;
+    children?: ReactNode;
+}
+/** A group of items under one label, separated by a hairline rule. */
+export declare const SideNavSection: import("react").ForwardRefExoticComponent<SideNavSectionProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface SideNavItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    icon: IconName;
+    /** The words. Kept in the accessible name even when the rail is collapsed. */
+    label: string;
+    isActive?: boolean;
+    /** A count or status pill at the end of the row. Hidden when collapsed. */
+    badge?: ReactNode;
+}
+/**
+ * One destination. The active row carries the solid rail on its leading edge —
+ * the same rail as a selected table row, so selection reads the same anywhere.
+ */
+export declare const SideNavItem: import("react").ForwardRefExoticComponent<SideNavItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export interface SideNavFooterProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+/** The bottom band — account, theme, help. Above the page edge, under a rule. */
+export declare const SideNavFooter: import("react").ForwardRefExoticComponent<SideNavFooterProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SideNav/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,oBAAoB,EACzB,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,aAAa,CAAC;AAQrB,wEAAwE;AACxE,wBAAgB,mBAAmB,IAAI,OAAO,CAE7C;AAED,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC/D,+DAA+D;IAC/D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uCAAuC;IACvC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6CAA6C;IAC7C,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IACnD,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;GAIG;AACH,eAAO,MAAM,OAAO,sGAsClB,CAAC;AAIH,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACvF,6DAA6D;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mDAAmD;IACnD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,2EAA2E;AAC3E,eAAO,MAAM,aAAa,+GA8BzB,CAAC;AAEF,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACzE,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,sEAAsE;AACtE,eAAO,MAAM,cAAc,gHAiB1B,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/E,IAAI,EAAE,QAAQ,CAAC;IACf,8EAA8E;IAC9E,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,gHAsBvB,CAAC;AAEF,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACxE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,iFAAiF;AACjF,eAAO,MAAM,aAAa,+GAYzB,CAAC"}