@namroodinc/liquid-editorial 0.0.0-stage → 0.1.0

package/dist/components/SortableList/index.js

@@ -0,0 +1,85 @@
+import { t as e } from "../../chunks/Icon-CGY1FNXT.js";
+import { forwardRef as t, useCallback as n, useId as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { DndContext as s, DragOverlay as c, KeyboardSensor as l, PointerSensor as u, closestCenter as d, useSensor as f, useSensors as p } from "@dnd-kit/core";
+import { SortableContext as m, arrayMove as h, sortableKeyboardCoordinates as g, useSortable as _, verticalListSortingStrategy as v } from "@dnd-kit/sortable";
+import { CSS as y } from "@dnd-kit/utilities";
+import { restrictToVerticalAxis as b } from "@dnd-kit/modifiers";
+//#region src/components/SortableList/index.tsx
+var x = t(function({ items: t, onReorder: _, renderDragOverlay: y, className: x, children: S, ...C }, w) {
+	let T = r(), [E, D] = i(null), O = p(f(u, { activationConstraint: { distance: 4 } }), f(l, { coordinateGetter: g })), k = n((e) => {
+		D(String(e.active.id));
+	}, []), A = n((e) => {
+		D(null);
+		let { active: n, over: r } = e;
+		if (!r || n.id === r.id) return;
+		let i = t.indexOf(String(n.id)), a = t.indexOf(String(r.id));
+		i < 0 || a < 0 || _?.(h(t, i, a));
+	}, [t, _]);
+	return /* @__PURE__ */ o(s, {
+		id: `ds-sortable-list-${T}`,
+		sensors: O,
+		collisionDetection: d,
+		modifiers: [b],
+		onDragStart: k,
+		onDragEnd: A,
+		onDragCancel: () => D(null),
+		children: [/* @__PURE__ */ a(m, {
+			items: t,
+			strategy: v,
+			children: /* @__PURE__ */ a("ul", {
+				ref: w,
+				className: ["ds-sortable-list", x].filter(Boolean).join(" "),
+				...C,
+				children: S
+			})
+		}), /* @__PURE__ */ a(c, { children: E ? /* @__PURE__ */ o("div", {
+			className: "ds-sortable-item",
+			"data-overlay": !0,
+			children: [/* @__PURE__ */ a("span", {
+				className: "ds-sortable-item__handle",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ a(e, { name: "grip-vertical" })
+			}), /* @__PURE__ */ a("div", {
+				className: "ds-sortable-item__content",
+				children: y?.(E)
+			})]
+		}) : null })]
+	});
+}), S = t(function({ id: t, label: n, action: r, className: i, children: s, ...c }, l) {
+	let { attributes: u, listeners: d, setNodeRef: f, transform: p, transition: m, isDragging: h } = _({ id: t });
+	return /* @__PURE__ */ o("li", {
+		ref: (e) => {
+			f(e), typeof l == "function" ? l(e) : l && (l.current = e);
+		},
+		style: {
+			transform: y.Translate.toString(p),
+			transition: m
+		},
+		className: ["ds-sortable-item", i].filter(Boolean).join(" "),
+		"data-dragging": h || void 0,
+		...c,
+		children: [
+			/* @__PURE__ */ a("button", {
+				type: "button",
+				className: "ds-sortable-item__handle",
+				"aria-label": n ? `Move ${n}` : "Move item",
+				...u,
+				...d,
+				children: /* @__PURE__ */ a(e, { name: "grip-vertical" })
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "ds-sortable-item__content",
+				children: s
+			}),
+			r && /* @__PURE__ */ a("div", {
+				className: "ds-sortable-item__action",
+				children: r
+			})
+		]
+	});
+});
+//#endregion
+export { x as SortableList, S as SortableListItem };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Icon","SortableList","forwardRef","rest","dndId","useId","activeId","setActiveId","useState","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","handleStart","useCallback","event","handleEnd","over","active","from","items","to","onReorder","arrayMove","DndContext","closestCenter","restrictToVerticalAxis","SortableContext","verticalListSortingStrategy","className","DragOverlay","renderDragOverlay","SortableListItem","useSortable","setNodeRef","node","ref","CSS","transform","isDragging","label","attributes","listeners","action"],"sources":["../../../src/components/SortableList/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useId,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport {\n  DndContext,\n  DragOverlay,\n  KeyboardSensor,\n  PointerSensor,\n  closestCenter,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type DragStartEvent,\n} from \"@dnd-kit/core\";\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\";\nimport {\n  SortableContext,\n  arrayMove,\n  sortableKeyboardCoordinates,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { Icon } from \"../Icon\";\nimport \"./style.css\";\n\nexport interface SortableListProps extends Omit<HTMLAttributes<HTMLUListElement>, \"onDragEnd\"> {\n  /** Item ids in render order. */\n  items: string[];\n  /** Fired with the whole list in its new order. Apply it to your own state. */\n  onReorder?: (items: string[]) => void;\n  /** Rendered inside the drag overlay while a row is in the air. */\n  renderDragOverlay?: (id: string) => ReactNode;\n  children?: ReactNode;\n}\n\n/**\n * A single vertical list you can re-order — the board's mechanics without the\n * lanes. Each row carries a grip on the left; the list owns dragging only, the\n * data stays yours: react to `onReorder`.\n */\nexport const SortableList = forwardRef<HTMLUListElement, SortableListProps>(\n  function SortableList({ items, onReorder, renderDragOverlay, className, children, ...rest }, ref) {\n    const dndId = useId();\n    const [activeId, setActiveId] = useState<string | null>(null);\n    const sensors = useSensors(\n      useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),\n      useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),\n    );\n\n    const handleStart = useCallback((event: DragStartEvent) => {\n      setActiveId(String(event.active.id));\n    }, []);\n\n    const handleEnd = useCallback(\n      (event: DragEndEvent) => {\n        setActiveId(null);\n        const { active, over } = event;\n        if (!over || active.id === over.id) return;\n        const from = items.indexOf(String(active.id));\n        const to = items.indexOf(String(over.id));\n        if (from < 0 || to < 0) return;\n        onReorder?.(arrayMove(items, from, to));\n      },\n      [items, onReorder],\n    );\n\n    return (\n      <DndContext\n        id={`ds-sortable-list-${dndId}`}\n        sensors={sensors}\n        collisionDetection={closestCenter}\n        modifiers={[restrictToVerticalAxis]}\n        onDragStart={handleStart}\n        onDragEnd={handleEnd}\n        onDragCancel={() => setActiveId(null)}\n      >\n        <SortableContext items={items} strategy={verticalListSortingStrategy}>\n          <ul\n            ref={ref}\n            className={[\"ds-sortable-list\", className].filter(Boolean).join(\" \")}\n            {...rest}\n          >\n            {children}\n          </ul>\n        </SortableContext>\n        <DragOverlay>\n          {activeId ? (\n            <div className=\"ds-sortable-item\" data-overlay>\n              <span className=\"ds-sortable-item__handle\" aria-hidden=\"true\">\n                <Icon name=\"grip-vertical\" />\n              </span>\n              <div className=\"ds-sortable-item__content\">{renderDragOverlay?.(activeId)}</div>\n            </div>\n          ) : null}\n        </DragOverlay>\n      </DndContext>\n    );\n  },\n);\n\nexport interface SortableListItemProps extends HTMLAttributes<HTMLLIElement> {\n  id: string;\n  /** Accessible name announced when the row is picked up. */\n  label?: string;\n  /** A control at the end of the row, e.g. a menu or a delete button. */\n  action?: ReactNode;\n  children?: ReactNode;\n}\n\n/** One row of a `SortableList`. The grip on the left is the only handle. */\nexport const SortableListItem = forwardRef<HTMLLIElement, SortableListItemProps>(\n  function SortableListItem({ id, label, action, className, children, ...rest }, ref) {\n    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n      id,\n    });\n\n    return (\n      <li\n        ref={(node) => {\n          setNodeRef(node);\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        style={{ transform: CSS.Translate.toString(transform), transition }}\n        className={[\"ds-sortable-item\", className].filter(Boolean).join(\" \")}\n        data-dragging={isDragging || undefined}\n        {...rest}\n      >\n        <button\n          type=\"button\"\n          className=\"ds-sortable-item__handle\"\n          aria-label={label ? `Move ${label}` : \"Move item\"}\n          {...attributes}\n          {...listeners}\n        >\n          <Icon name=\"grip-vertical\" />\n        </button>\n        <div className=\"ds-sortable-item__content\">{children}</div>\n        {action && <div className=\"ds-sortable-item__action\">{action}</div>}\n      </li>\n    );\n  },\n);\n"],"mappings":";;;;;;;;AA8CA,IAAaC,IAAeC,EAC1B,SAAsB,EAAE,UAAO,cAAW,sBAAmB,cAAW,aAAU,GAAGC,KAAQ,GAAK;CAChG,IAAMC,IAAQC,EAAM,GACd,CAACC,GAAUC,KAAeC,EAAwB,IAAI,GACtDC,IAAUC,EACdC,EAAUC,GAAe,EAAE,sBAAsB,EAAE,UAAU,EAAE,EAAE,CAAC,GAClED,EAAUE,GAAgB,EAAE,kBAAkBC,EAA4B,CAAC,CAC7E,GAEMC,IAAcC,GAAa,MAA0B;EACzD,EAAY,OAAOC,EAAM,OAAO,EAAE,CAAC;CACrC,GAAG,CAAC,CAAC,GAECC,IAAYF,GACf,MAAwB;EACvB,EAAY,IAAI;EAChB,IAAM,EAAE,WAAQ,YAASC;EACzB,IAAI,CAACE,KAAQC,EAAO,OAAOD,EAAK,IAAI;EACpC,IAAME,IAAOC,EAAM,QAAQ,OAAOF,EAAO,EAAE,CAAC,GACtCG,IAAKD,EAAM,QAAQ,OAAOH,EAAK,EAAE,CAAC;EACxC,AAAIE,IAAO,KAAKE,IAAK,KACrBC,IAAYC,EAAUH,GAAOD,GAAME,CAAE,CAAC;CACxC,GACA,CAACD,GAAOE,CAAS,CACnB;CAEA,OACE,kBAACE,GAAD;EACE,IAAI,oBAAoBtB;EACf;EACT,oBAAoBuB;EACpB,WAAW,CAACC,CAAsB;EAClC,aAAab;EACb,WAAWG;EACX,oBAAoBX,EAAY,IAAI;EAPtC,UAAA,CASE,kBAACsB,GAAD;GAAwB;GAAO,UAAUC;GACvC,UAAA,kBAAC,MAAD;IACO;IACL,WAAW,CAAC,oBAAoBC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;IACnE,GAAI5B;IAEH;GACC,CAAA;EACW,CAAA,GACjB,kBAAC6B,GAAD,EAAA,UACG1B,IACC,kBAAC,OAAD;GAAK,WAAU;GAAmB,gBAAA;GAAlC,UAAA,CACE,kBAAC,QAAD;IAAM,WAAU;IAA2B,eAAY;IACrD,UAAA,kBAACN,GAAD,EAAM,MAAK,gBAAiB,CAAA;GACxB,CAAA,GACN,kBAAC,OAAD;IAAK,WAAU;IAA6B,UAAAiC,IAAoB3B,CAAQ;GAAO,CAAA,CAC5E;EACH,CAAA,IAAA,KACO,CAAA,CACH;;AAEhB,CACF,GAYa4B,IAAmBhC,EAC9B,SAA0B,EAAE,OAAI,UAAO,WAAQ,cAAW,aAAU,GAAGC,KAAQ,GAAK;CAClF,IAAM,EAAE,eAAY,cAAW,eAAY,cAAW,eAAY,kBAAegC,EAAY,EAC3F,MACF,CAAC;CAED,OACE,kBAAC,MAAD;EACE,MAAM,MAAS;GAEb,AADAC,EAAWC,CAAI,GACX,OAAOC,KAAQ,aAAYA,EAAID,CAAI,IAC9BC,MAAK,EAAI,UAAUD;EAC9B;EACA,OAAO;GAAE,WAAWE,EAAI,UAAU,SAASC,CAAS;GAAG;EAAW;EAClE,WAAW,CAAC,oBAAoBT,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EACnE,iBAAeU,KAAc,KAAA;EAC7B,GAAItC;EATN,UAAA;GAWE,kBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,cAAYuC,IAAQ,QAAQA,MAAU;IACtC,GAAIC;IACJ,GAAIC;IAEJ,UAAA,kBAAC5C,GAAD,EAAM,MAAK,gBAAiB,CAAA;GACtB,CAAA;GACR,kBAAC,OAAD;IAAK,WAAU;IAA6B;GAAc,CAAA;GACzD6C,KAAU,kBAAC,OAAD;IAAK,WAAU;IAA4B,UAAAA;GAAY,CAAA;EAChE;;AAER,CACF"}

package/dist/components/SortableList/style.css

@@ -0,0 +1,71 @@
+@layer components {
+  .ds-sortable-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .ds-sortable-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    border: var(--control-border-width) solid var(--control-border-color);
+    border-radius: var(--radius-md);
+    background: var(--color-surface);
+    padding: var(--space-3);
+    font-size: var(--font-size-sm);
+    user-select: none;
+    transition: background-color var(--duration-fast) var(--ease-standard);
+  }
+
+  .ds-sortable-item:hover {
+    background: var(--field-hover);
+  }
+
+  .ds-sortable-item[data-dragging] {
+    opacity: 35%;
+  }
+
+  .ds-sortable-item[data-overlay] {
+    box-shadow: var(--shadow-lg);
+    background: var(--color-surface);
+  }
+
+  .ds-sortable-item__handle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 0;
+    padding: 0;
+    background: none;
+    color: var(--color-text-muted);
+    cursor: grab;
+    touch-action: none;
+  }
+
+  .ds-sortable-item__handle:hover {
+    color: var(--color-text);
+  }
+
+  .ds-sortable-item__handle:focus-visible {
+    outline: var(--control-border-width) solid var(--color-focus);
+    outline-offset: 2px;
+    border-radius: var(--radius-sm);
+  }
+
+  .ds-sortable-item[data-overlay] .ds-sortable-item__handle {
+    cursor: grabbing;
+  }
+
+  .ds-sortable-item__content {
+    flex: 1;
+    min-inline-size: 0;
+  }
+
+  .ds-sortable-item__action {
+    margin-inline-start: auto;
+  }
+}

package/dist/components/Stepper/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");function r(e,t){return e<t?`complete`:e===t?`current`:`upcoming`}var i=(0,t.forwardRef)(function({steps:t,activeStep:i,size:a=`md`,label:o=`Progress`,onStepChange:s,className:c,...l},u){return(0,n.jsx)(`nav`,{ref:u,"aria-label":o,"data-size":a,className:[`ds-stepper`,c].filter(Boolean).join(` `),...l,children:(0,n.jsx)(`ol`,{className:`ds-stepper__list`,children:t.map((t,a)=>{let o=r(a,i),c=!!s&&o!==`upcoming`;return(0,n.jsxs)(`li`,{className:`ds-stepper__step`,"data-status":o,"aria-current":o===`current`?`step`:void 0,children:[(0,n.jsxs)(`span`,{className:`ds-stepper__track`,"aria-hidden":`true`,children:[(0,n.jsx)(`span`,{className:`ds-stepper__connector`,"data-side":`start`}),(0,n.jsx)(`span`,{className:`ds-stepper__connector`,"data-side":`end`})]}),(0,n.jsxs)(c?`button`:`span`,{className:`ds-stepper__marker`,...c?{type:`button`,onClick:()=>s?.(a,t.id)}:{},children:[o===`complete`?(0,n.jsx)(e.t,{name:`check`,size:16,"aria-hidden":`true`}):a+1,(0,n.jsx)(`span`,{className:`ds-stepper__sr`,children:o})]}),(0,n.jsxs)(`span`,{className:`ds-stepper__text`,children:[(0,n.jsx)(`span`,{className:`ds-stepper__label`,children:t.label}),t.description&&(0,n.jsx)(`span`,{className:`ds-stepper__description`,children:t.description})]})]},t.id)})})})});exports.Stepper=i;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["forwardRef","Icon","require_Icon","react","react_jsx_runtime","statusOf","index","activeStep","Stepper","rest","label","size","className","steps","status","interactive","onStepChange","step"],"sources":["../../../src/components/Stepper/index.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { Icon } from \"../Icon\";\nimport \"./style.css\";\n\nexport type StepperSize = \"sm\" | \"md\";\nexport type StepStatus = \"complete\" | \"current\" | \"upcoming\";\n\nexport interface Step {\n  /** Stable key, and the value reported by `onStepChange`. */\n  id: string;\n  /** The step in the user's words — sentence case. */\n  label: ReactNode;\n  /** One line on what happens here. */\n  description?: ReactNode;\n}\n\nexport interface StepperProps\n  extends Omit<HTMLAttributes<HTMLElement>, \"onChange\" | \"children\"> {\n  /** The ordered steps. Three or more spread evenly across the full width. */\n  steps: Step[];\n  /** Index of the step being worked on. Everything before it reads as complete. */\n  activeStep: number;\n  /** Marker scale. `sm` for a toolbar band, `md` for a page header. */\n  size?: StepperSize;\n  /** Accessible name for the progress bar. */\n  label?: string;\n  /**\n   * Makes completed steps (and the current one) navigable. Omit for a\n   * read-only progress indicator.\n   */\n  onStepChange?: (index: number, id: string) => void;\n}\n\nfunction statusOf(index: number, activeStep: number): StepStatus {\n  if (index < activeStep) return \"complete\";\n  if (index === activeStep) return \"current\";\n  return \"upcoming\";\n}\n\n/**\n * A linear progress rail: 1 - 2 - 3. Steps share the row equally however many\n * there are, so the last marker always lands on the trailing edge.\n */\nexport const Stepper = forwardRef<HTMLElement, StepperProps>(function Stepper(\n  { steps, activeStep, size = \"md\", label = \"Progress\", onStepChange, className, ...rest },\n  ref,\n) {\n  return (\n    <nav\n      ref={ref}\n      aria-label={label}\n      data-size={size}\n      className={[\"ds-stepper\", className].filter(Boolean).join(\" \")}\n      {...rest}\n    >\n      <ol className=\"ds-stepper__list\">\n        {steps.map((step, index) => {\n          const status = statusOf(index, activeStep);\n          const interactive = Boolean(onStepChange) && status !== \"upcoming\";\n          const Marker = interactive ? \"button\" : \"span\";\n          return (\n            <li\n              key={step.id}\n              className=\"ds-stepper__step\"\n              data-status={status}\n              aria-current={status === \"current\" ? \"step\" : undefined}\n            >\n              <span className=\"ds-stepper__track\" aria-hidden=\"true\">\n                <span className=\"ds-stepper__connector\" data-side=\"start\" />\n                <span className=\"ds-stepper__connector\" data-side=\"end\" />\n              </span>\n              <Marker\n                className=\"ds-stepper__marker\"\n                {...(interactive\n                  ? {\n                      type: \"button\" as const,\n                      onClick: () => onStepChange?.(index, step.id),\n                    }\n                  : {})}\n              >\n                {status === \"complete\" ? (\n                  <Icon name=\"check\" size={16} aria-hidden=\"true\" />\n                ) : (\n                  index + 1\n                )}\n                <span className=\"ds-stepper__sr\">{status}</span>\n              </Marker>\n              <span className=\"ds-stepper__text\">\n                <span className=\"ds-stepper__label\">{step.label}</span>\n                {step.description && (\n                  <span className=\"ds-stepper__description\">{step.description}</span>\n                )}\n              </span>\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n});\n"],"mappings":"A,2KAiCA,SAASK,EAAS,EAAe,EAAgC,CAG/D,OAFIC,EAAQC,EAAmB,WAC3BD,IAAUC,EAAmB,UAC1B,UACT,CAMA,IAAaC,GAAA,EAAUR,EAAAA,WAAAA,CAAsC,SAC3D,CAAE,QAAO,aAAY,OAAO,KAAM,QAAQ,WAAY,eAAc,YAAW,GAAGS,GAClF,EACA,CACA,OACE,EAAAL,EAAA,IAAA,CAAC,MAAD,CACO,MACL,aAAYM,EACZ,YAAWC,EACX,UAAW,CAAC,aAAcC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,EAC7D,GAAIH,EAEJ,UAAA,EAAAL,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,mBACX,SAAAS,EAAM,KAAK,EAAM,IAAU,CAC1B,IAAMC,EAAST,EAASC,EAAOC,CAAU,EACnCQ,EAAc,EAAQC,GAAiBF,IAAW,WAExD,OACE,EAAAV,EAAA,KAAA,CAAC,KAAD,CAEE,UAAU,mBACV,cAAaU,EACb,eAAcA,IAAW,UAAY,OAAS,IAAA,GAJhD,SAAA,EAME,EAAAV,EAAA,KAAA,CAAC,OAAD,CAAM,UAAU,oBAAoB,cAAY,OAAhD,SAAA,EACE,EAAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,wBAAwB,YAAU,OAAS,CAAA,GAC3D,EAAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,wBAAwB,YAAU,KAAO,CAAA,CACrD,C,IACN,EAAAA,EAAA,KAAA,CAZWW,EAAc,SAAW,OAYpC,CACE,UAAU,qBACV,GAAKA,EACD,CACE,KAAM,SACN,YAAeC,IAAeV,EAAOW,EAAK,EAAE,CAC9C,EACA,CAAC,EAPP,SAAA,CASGH,IAAW,YACV,EAAAV,EAAA,IAAA,CAACH,EAAAA,EAAD,CAAM,KAAK,QAAQ,KAAM,GAAI,cAAY,MAAQ,CAAA,EAEjDK,EAAQ,GAEV,EAAAF,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,iBAAkB,SAAAU,CAAa,CAAA,CACzC,C,IACR,EAAAV,EAAA,KAAA,CAAC,OAAD,CAAM,UAAU,mBAAhB,SAAA,EACE,EAAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,oBAAqB,SAAAa,EAAK,KAAY,CAAA,EACrDA,EAAK,cACJ,EAAAb,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,0BAA2B,SAAAa,EAAK,WAAkB,CAAA,CAEhE,C,EACJ,CA/BG,EAAAA,EAAK,EA+BR,CAER,CAAC,CACC,CAAA,CACD,CAAA,CAET,CAAC,E"}

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

@@ -0,0 +1,32 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export type StepperSize = "sm" | "md";
+export type StepStatus = "complete" | "current" | "upcoming";
+export interface Step {
+    /** Stable key, and the value reported by `onStepChange`. */
+    id: string;
+    /** The step in the user's words — sentence case. */
+    label: ReactNode;
+    /** One line on what happens here. */
+    description?: ReactNode;
+}
+export interface StepperProps extends Omit<HTMLAttributes<HTMLElement>, "onChange" | "children"> {
+    /** The ordered steps. Three or more spread evenly across the full width. */
+    steps: Step[];
+    /** Index of the step being worked on. Everything before it reads as complete. */
+    activeStep: number;
+    /** Marker scale. `sm` for a toolbar band, `md` for a page header. */
+    size?: StepperSize;
+    /** Accessible name for the progress bar. */
+    label?: string;
+    /**
+     * Makes completed steps (and the current one) navigable. Omit for a
+     * read-only progress indicator.
+     */
+    onStepChange?: (index: number, id: string) => void;
+}
+/**
+ * A linear progress rail: 1 - 2 - 3. Steps share the row equally however many
+ * there are, so the last marker always lands on the trailing edge.
+ */
+export declare const Stepper: import("react").ForwardRefExoticComponent<StepperProps & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Stepper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAExE,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;AACtC,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,CAAC;AAE7D,MAAM,WAAW,IAAI;IACnB,4DAA4D;IAC5D,EAAE,EAAE,MAAM,CAAC;IACX,oDAAoD;IACpD,KAAK,EAAE,SAAS,CAAC;IACjB,qCAAqC;IACrC,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAClE,4EAA4E;IAC5E,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,iFAAiF;IACjF,UAAU,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAQD;;;GAGG;AACH,eAAO,MAAM,OAAO,sGAwDlB,CAAC"}

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

@@ -0,0 +1,32 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export type StepperSize = "sm" | "md";
+export type StepStatus = "complete" | "current" | "upcoming";
+export interface Step {
+    /** Stable key, and the value reported by `onStepChange`. */
+    id: string;
+    /** The step in the user's words — sentence case. */
+    label: ReactNode;
+    /** One line on what happens here. */
+    description?: ReactNode;
+}
+export interface StepperProps extends Omit<HTMLAttributes<HTMLElement>, "onChange" | "children"> {
+    /** The ordered steps. Three or more spread evenly across the full width. */
+    steps: Step[];
+    /** Index of the step being worked on. Everything before it reads as complete. */
+    activeStep: number;
+    /** Marker scale. `sm` for a toolbar band, `md` for a page header. */
+    size?: StepperSize;
+    /** Accessible name for the progress bar. */
+    label?: string;
+    /**
+     * Makes completed steps (and the current one) navigable. Omit for a
+     * read-only progress indicator.
+     */
+    onStepChange?: (index: number, id: string) => void;
+}
+/**
+ * A linear progress rail: 1 - 2 - 3. Steps share the row equally however many
+ * there are, so the last marker always lands on the trailing edge.
+ */
+export declare const Stepper: import("react").ForwardRefExoticComponent<StepperProps & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAExE,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;AACtC,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,CAAC;AAE7D,MAAM,WAAW,IAAI;IACnB,4DAA4D;IAC5D,EAAE,EAAE,MAAM,CAAC;IACX,oDAAoD;IACpD,KAAK,EAAE,SAAS,CAAC;IACjB,qCAAqC;IACrC,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAClE,4EAA4E;IAC5E,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,iFAAiF;IACjF,UAAU,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAQD;;;GAGG;AACH,eAAO,MAAM,OAAO,sGAwDlB,CAAC"}

package/dist/components/Stepper/index.js

@@ -0,0 +1,69 @@
+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/Stepper/index.tsx
+function i(e, t) {
+	return e < t ? "complete" : e === t ? "current" : "upcoming";
+}
+var a = t(function({ steps: t, activeStep: a, size: o = "md", label: s = "Progress", onStepChange: c, className: l, ...u }, d) {
+	return /* @__PURE__ */ n("nav", {
+		ref: d,
+		"aria-label": s,
+		"data-size": o,
+		className: ["ds-stepper", l].filter(Boolean).join(" "),
+		...u,
+		children: /* @__PURE__ */ n("ol", {
+			className: "ds-stepper__list",
+			children: t.map((t, o) => {
+				let s = i(o, a), l = !!c && s !== "upcoming";
+				return /* @__PURE__ */ r("li", {
+					className: "ds-stepper__step",
+					"data-status": s,
+					"aria-current": s === "current" ? "step" : void 0,
+					children: [
+						/* @__PURE__ */ r("span", {
+							className: "ds-stepper__track",
+							"aria-hidden": "true",
+							children: [/* @__PURE__ */ n("span", {
+								className: "ds-stepper__connector",
+								"data-side": "start"
+							}), /* @__PURE__ */ n("span", {
+								className: "ds-stepper__connector",
+								"data-side": "end"
+							})]
+						}),
+						/* @__PURE__ */ r(l ? "button" : "span", {
+							className: "ds-stepper__marker",
+							...l ? {
+								type: "button",
+								onClick: () => c?.(o, t.id)
+							} : {},
+							children: [s === "complete" ? /* @__PURE__ */ n(e, {
+								name: "check",
+								size: 16,
+								"aria-hidden": "true"
+							}) : o + 1, /* @__PURE__ */ n("span", {
+								className: "ds-stepper__sr",
+								children: s
+							})]
+						}),
+						/* @__PURE__ */ r("span", {
+							className: "ds-stepper__text",
+							children: [/* @__PURE__ */ n("span", {
+								className: "ds-stepper__label",
+								children: t.label
+							}), t.description && /* @__PURE__ */ n("span", {
+								className: "ds-stepper__description",
+								children: t.description
+							})]
+						})
+					]
+				}, t.id);
+			})
+		})
+	});
+});
+//#endregion
+export { a as Stepper };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Icon","statusOf","index","activeStep","Stepper","forwardRef","rest","label","size","className","steps","status","interactive","onStepChange","step"],"sources":["../../../src/components/Stepper/index.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { Icon } from \"../Icon\";\nimport \"./style.css\";\n\nexport type StepperSize = \"sm\" | \"md\";\nexport type StepStatus = \"complete\" | \"current\" | \"upcoming\";\n\nexport interface Step {\n  /** Stable key, and the value reported by `onStepChange`. */\n  id: string;\n  /** The step in the user's words — sentence case. */\n  label: ReactNode;\n  /** One line on what happens here. */\n  description?: ReactNode;\n}\n\nexport interface StepperProps\n  extends Omit<HTMLAttributes<HTMLElement>, \"onChange\" | \"children\"> {\n  /** The ordered steps. Three or more spread evenly across the full width. */\n  steps: Step[];\n  /** Index of the step being worked on. Everything before it reads as complete. */\n  activeStep: number;\n  /** Marker scale. `sm` for a toolbar band, `md` for a page header. */\n  size?: StepperSize;\n  /** Accessible name for the progress bar. */\n  label?: string;\n  /**\n   * Makes completed steps (and the current one) navigable. Omit for a\n   * read-only progress indicator.\n   */\n  onStepChange?: (index: number, id: string) => void;\n}\n\nfunction statusOf(index: number, activeStep: number): StepStatus {\n  if (index < activeStep) return \"complete\";\n  if (index === activeStep) return \"current\";\n  return \"upcoming\";\n}\n\n/**\n * A linear progress rail: 1 - 2 - 3. Steps share the row equally however many\n * there are, so the last marker always lands on the trailing edge.\n */\nexport const Stepper = forwardRef<HTMLElement, StepperProps>(function Stepper(\n  { steps, activeStep, size = \"md\", label = \"Progress\", onStepChange, className, ...rest },\n  ref,\n) {\n  return (\n    <nav\n      ref={ref}\n      aria-label={label}\n      data-size={size}\n      className={[\"ds-stepper\", className].filter(Boolean).join(\" \")}\n      {...rest}\n    >\n      <ol className=\"ds-stepper__list\">\n        {steps.map((step, index) => {\n          const status = statusOf(index, activeStep);\n          const interactive = Boolean(onStepChange) && status !== \"upcoming\";\n          const Marker = interactive ? \"button\" : \"span\";\n          return (\n            <li\n              key={step.id}\n              className=\"ds-stepper__step\"\n              data-status={status}\n              aria-current={status === \"current\" ? \"step\" : undefined}\n            >\n              <span className=\"ds-stepper__track\" aria-hidden=\"true\">\n                <span className=\"ds-stepper__connector\" data-side=\"start\" />\n                <span className=\"ds-stepper__connector\" data-side=\"end\" />\n              </span>\n              <Marker\n                className=\"ds-stepper__marker\"\n                {...(interactive\n                  ? {\n                      type: \"button\" as const,\n                      onClick: () => onStepChange?.(index, step.id),\n                    }\n                  : {})}\n              >\n                {status === \"complete\" ? (\n                  <Icon name=\"check\" size={16} aria-hidden=\"true\" />\n                ) : (\n                  index + 1\n                )}\n                <span className=\"ds-stepper__sr\">{status}</span>\n              </Marker>\n              <span className=\"ds-stepper__text\">\n                <span className=\"ds-stepper__label\">{step.label}</span>\n                {step.description && (\n                  <span className=\"ds-stepper__description\">{step.description}</span>\n                )}\n              </span>\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n});\n"],"mappings":";;;;AAiCA,SAASC,EAAS,GAAe,GAAgC;CAG/D,OAFIC,IAAQC,IAAmB,aAC3BD,MAAUC,IAAmB,YAC1B;AACT;AAMA,IAAaC,IAAUC,EAAsC,SAC3D,EAAE,UAAO,eAAY,UAAO,MAAM,WAAQ,YAAY,iBAAc,cAAW,GAAGC,KAClF,GACA;CACA,OACE,kBAAC,OAAD;EACO;EACL,cAAYC;EACZ,aAAWC;EACX,WAAW,CAAC,cAAcC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAC7D,GAAIH;EAEJ,UAAA,kBAAC,MAAD;GAAI,WAAU;GACX,UAAAI,EAAM,KAAK,GAAM,MAAU;IAC1B,IAAMC,IAASV,EAASC,GAAOC,CAAU,GACnCS,IAAc,EAAQC,KAAiBF,MAAW;IAExD,OACE,kBAAC,MAAD;KAEE,WAAU;KACV,eAAaA;KACb,gBAAcA,MAAW,YAAY,SAAS,KAAA;KAJhD,UAAA;MAME,kBAAC,QAAD;OAAM,WAAU;OAAoB,eAAY;OAAhD,UAAA,CACE,kBAAC,QAAD;QAAM,WAAU;QAAwB,aAAU;OAAS,CAAA,GAC3D,kBAAC,QAAD;QAAM,WAAU;QAAwB,aAAU;OAAO,CAAA,CACrD;;MACN,kBAZWC,IAAc,WAAW,QAYpC;OACE,WAAU;OACV,GAAKA,IACD;QACE,MAAM;QACN,eAAeC,IAAeX,GAAOY,EAAK,EAAE;OAC9C,IACA,CAAC;OAPP,UAAA,CASGH,MAAW,aACV,kBAACX,GAAD;QAAM,MAAK;QAAQ,MAAM;QAAI,eAAY;OAAQ,CAAA,IAEjDE,IAAQ,GAEV,kBAAC,QAAD;QAAM,WAAU;QAAkB,UAAAS;OAAa,CAAA,CACzC;;MACR,kBAAC,QAAD;OAAM,WAAU;OAAhB,UAAA,CACE,kBAAC,QAAD;QAAM,WAAU;QAAqB,UAAAG,EAAK;OAAY,CAAA,GACrDA,EAAK,eACJ,kBAAC,QAAD;QAAM,WAAU;QAA2B,UAAAA,EAAK;OAAkB,CAAA,CAEhE;;KACJ;IA/BG,GAAAA,EAAK,EA+BR;GAER,CAAC;EACC,CAAA;CACD,CAAA;AAET,CAAC"}

package/dist/components/Stepper/style.css

@@ -0,0 +1,154 @@
+@layer components {
+  .ds-stepper {
+    inline-size: 100%;
+  }
+
+  .ds-stepper__list {
+    display: flex;
+    align-items: start;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    inline-size: 100%;
+  }
+
+  /* Every step takes the same share of the row, however many there are. */
+  .ds-stepper__step {
+    position: relative;
+    flex: 1 1 0;
+    min-inline-size: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-2);
+    text-align: center;
+    padding-inline: var(--space-2);
+  }
+
+  .ds-stepper__track {
+    position: absolute;
+    inset-block-start: calc(var(--stepper-marker-size) / 2);
+    inset-inline: 0;
+    block-size: var(--stepper-connector-width);
+    display: flex;
+  }
+
+  .ds-stepper[data-size="sm"] .ds-stepper__track {
+    inset-block-start: calc(var(--stepper-marker-size-sm) / 2);
+  }
+
+  .ds-stepper__connector {
+    flex: 1 1 0;
+    background: var(--control-border-color);
+    opacity: 35%;
+  }
+
+  .ds-stepper__step:first-child .ds-stepper__connector[data-side="start"],
+  .ds-stepper__step:last-child .ds-stepper__connector[data-side="end"] {
+    visibility: hidden;
+  }
+
+  .ds-stepper__step[data-status="complete"] .ds-stepper__connector,
+  .ds-stepper__step[data-status="current"] .ds-stepper__connector[data-side="start"] {
+    background: var(--color-primary);
+    opacity: 100%;
+  }
+
+  .ds-stepper__marker {
+    position: relative;
+    z-index: 1;
+    flex: none;
+    inline-size: var(--stepper-marker-size);
+    block-size: var(--stepper-marker-size);
+    display: grid;
+    place-content: center;
+    padding: 0;
+    font-family: inherit;
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-bold);
+    line-height: 1;
+    border: var(--control-border-width) solid var(--control-border-color);
+    border-radius: var(--radius-pill);
+    background: var(--color-surface);
+    color: var(--color-text);
+    transition: background-color var(--duration-fast) var(--ease-standard);
+  }
+
+  .ds-stepper[data-size="sm"] .ds-stepper__marker {
+    inline-size: var(--stepper-marker-size-sm);
+    block-size: var(--stepper-marker-size-sm);
+    font-size: var(--font-size-xs);
+  }
+
+  button.ds-stepper__marker {
+    cursor: pointer;
+  }
+
+  button.ds-stepper__marker:hover {
+    background: var(--field-hover);
+  }
+
+  button.ds-stepper__marker:focus-visible {
+    outline: var(--control-border-width) solid var(--color-focus);
+    outline-offset: 2px;
+  }
+
+  .ds-stepper__step[data-status="complete"] .ds-stepper__marker {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+    color: var(--color-text-on-solid);
+  }
+
+  .ds-stepper__step[data-status="current"] .ds-stepper__marker {
+    background: var(--color-primary-soft);
+    border-color: var(--color-primary);
+    color: var(--color-primary-text);
+  }
+
+  .ds-stepper__step[data-status="upcoming"] .ds-stepper__marker {
+    color: var(--color-text-muted);
+    border-color: var(--color-border-muted);
+  }
+
+  .ds-stepper__text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    min-inline-size: 0;
+  }
+
+  .ds-stepper__label {
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--line-height-body);
+  }
+
+  .ds-stepper__step[data-status="upcoming"] .ds-stepper__label {
+    color: var(--color-text-muted);
+  }
+
+  .ds-stepper__description {
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-body);
+    color: var(--color-text-muted);
+  }
+
+  .ds-stepper[data-size="sm"] .ds-stepper__description {
+    display: none;
+  }
+
+  .ds-stepper__sr {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ds-stepper__marker {
+      transition: none;
+    }
+  }
+}

package/dist/components/SubNav/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.forwardRef)(function({label:e,actions:t,className:r,children:i,...a},o){return(0,n.jsxs)(`nav`,{ref:o,"aria-label":e,className:[`ds-subnav`,r].filter(Boolean).join(` `),...a,children:[(0,n.jsx)(`ul`,{className:`ds-subnav__list`,children:i}),t&&(0,n.jsx)(`div`,{className:`ds-subnav__actions`,children:t})]})}),i=(0,t.forwardRef)(function({label:t,icon:r,isActive:i,count:a,className:o,...s},c){return(0,n.jsx)(`li`,{className:`ds-subnav__row`,children:(0,n.jsxs)(`a`,{ref:c,className:[`ds-subnav__item`,o].filter(Boolean).join(` `),"data-active":i||void 0,"aria-current":i?`page`:void 0,...s,children:[r&&(0,n.jsx)(e.t,{name:r}),t,a!==void 0&&(0,n.jsx)(`span`,{className:`ds-subnav__count`,children:a})]})})}),a=(0,t.forwardRef)(function({label:t,icon:r,isActive:i,count:a,className:o,...s},c){return(0,n.jsx)(`li`,{className:`ds-subnav__row`,children:(0,n.jsxs)(`button`,{ref:c,type:`button`,className:[`ds-subnav__item`,o].filter(Boolean).join(` `),"data-active":i||void 0,"aria-pressed":i,...s,children:[r&&(0,n.jsx)(e.t,{name:r}),t,a!==void 0&&(0,n.jsx)(`span`,{className:`ds-subnav__count`,children:a})]})})});exports.SubNav=r,exports.SubNavButton=a,exports.SubNavItem=i;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["forwardRef","Icon","require_Icon","react","react_jsx_runtime","SubNav","rest","label","className","actions","SubNavItem","isActive","icon","count","SubNavButton"],"sources":["../../../src/components/SubNav/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { Icon } from \"../Icon\";\nimport type { IconName } from \"../Icon/icons\";\nimport \"./style.css\";\n\nexport interface SubNavProps extends HTMLAttributes<HTMLElement> {\n  /** Accessible name — say what the set switches, e.g. \"Article sections\". */\n  label: string;\n  /** Controls parked at the end of the row, e.g. a view switch. */\n  actions?: ReactNode;\n  children?: ReactNode;\n}\n\n/**\n * The second level: views inside one page — Content, Settings, Revisions. A\n * hairline rule runs the full width; the active item sits on the rail.\n */\nexport const SubNav = forwardRef<HTMLElement, SubNavProps>(function SubNav(\n  { label, actions, className, children, ...rest },\n  ref,\n) {\n  return (\n    <nav\n      ref={ref}\n      aria-label={label}\n      className={[\"ds-subnav\", className].filter(Boolean).join(\" \")}\n      {...rest}\n    >\n      <ul className=\"ds-subnav__list\">{children}</ul>\n      {actions && <div className=\"ds-subnav__actions\">{actions}</div>}\n    </nav>\n  );\n});\n\ninterface SubNavItemBase {\n  label: string;\n  icon?: IconName;\n  isActive?: boolean;\n  /** A count beside the label — kept quiet, never a status colour. */\n  count?: number;\n}\n\nexport interface SubNavItemProps\n  extends SubNavItemBase,\n    Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"children\"> {}\n\n/** One view, as a link. Use `SubNavButton` when the view is client state. */\nexport const SubNavItem = forwardRef<HTMLAnchorElement, SubNavItemProps>(\n  function SubNavItem({ label, icon, isActive, count, className, ...rest }, ref) {\n    return (\n      <li className=\"ds-subnav__row\">\n        <a\n          ref={ref}\n          className={[\"ds-subnav__item\", className].filter(Boolean).join(\" \")}\n          data-active={isActive || undefined}\n          aria-current={isActive ? \"page\" : undefined}\n          {...rest}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n          {count !== undefined && <span className=\"ds-subnav__count\">{count}</span>}\n        </a>\n      </li>\n    );\n  },\n);\n\nexport interface SubNavButtonProps\n  extends SubNavItemBase,\n    Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"children\" | \"type\"> {}\n\n/** One view, as a control — for panes switched in place rather than routed. */\nexport const SubNavButton = forwardRef<HTMLButtonElement, SubNavButtonProps>(\n  function SubNavButton({ label, icon, isActive, count, className, ...rest }, ref) {\n    return (\n      <li className=\"ds-subnav__row\">\n        <button\n          ref={ref}\n          type=\"button\"\n          className={[\"ds-subnav__item\", className].filter(Boolean).join(\" \")}\n          data-active={isActive || undefined}\n          aria-pressed={isActive}\n          {...rest}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n          {count !== undefined && <span className=\"ds-subnav__count\">{count}</span>}\n        </button>\n      </li>\n    );\n  },\n);\n"],"mappings":"A,2KAuBA,IAAaK,GAAA,EAASL,EAAAA,WAAAA,CAAqC,SACzD,CAAE,QAAO,UAAS,YAAW,WAAU,GAAGM,GAC1C,EACA,CACA,OACE,EAAAF,EAAA,KAAA,CAAC,MAAD,CACO,MACL,aAAYG,EACZ,UAAW,CAAC,YAAaC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,EAC5D,GAAIF,EAJN,SAAA,EAME,EAAAF,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,kBAAmB,UAAa,CAAA,EAC7CK,IAAW,EAAAL,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,qBAAsB,SAAAK,CAAa,CAAA,CAC3D,C,EAET,CAAC,EAeYC,GAAA,EAAaV,EAAAA,WAAAA,CACxB,SAAoB,CAAE,QAAO,OAAM,WAAU,QAAO,YAAW,GAAGM,GAAQ,EAAK,CAC7E,OACE,EAAAF,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,iBACZ,UAAA,EAAAA,EAAA,KAAA,CAAC,IAAD,CACO,MACL,UAAW,CAAC,kBAAmBI,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,EAClE,cAAaG,GAAY,IAAA,GACzB,eAAcA,EAAW,OAAS,IAAA,GAClC,GAAIL,EALN,SAAA,CAOGM,IAAQ,EAAAR,EAAA,IAAA,CAACH,EAAAA,EAAD,CAAM,KAAMW,CAAO,CAAA,EAC3BL,EACAM,IAAU,IAAA,KAAa,EAAAT,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,mBAAoB,SAAAS,CAAY,CAAA,CACvE,C,EACD,CAAA,CAER,CACF,EAOaC,GAAA,EAAed,EAAAA,WAAAA,CAC1B,SAAsB,CAAE,QAAO,OAAM,WAAU,QAAO,YAAW,GAAGM,GAAQ,EAAK,CAC/E,OACE,EAAAF,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,iBACZ,UAAA,EAAAA,EAAA,KAAA,CAAC,SAAD,CACO,MACL,KAAK,SACL,UAAW,CAAC,kBAAmBI,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,EAClE,cAAaG,GAAY,IAAA,GACzB,eAAcA,EACd,GAAIL,EANN,SAAA,CAQGM,IAAQ,EAAAR,EAAA,IAAA,CAACH,EAAAA,EAAD,CAAM,KAAMW,CAAO,CAAA,EAC3BL,EACAM,IAAU,IAAA,KAAa,EAAAT,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,mBAAoB,SAAAS,CAAY,CAAA,CAClE,C,EACN,CAAA,CAER,CACF,E"}

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

@@ -0,0 +1,31 @@
+import { type AnchorHTMLAttributes, type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from "react";
+import type { IconName } from "../Icon/icons.cjs";
+export interface SubNavProps extends HTMLAttributes<HTMLElement> {
+    /** Accessible name — say what the set switches, e.g. "Article sections". */
+    label: string;
+    /** Controls parked at the end of the row, e.g. a view switch. */
+    actions?: ReactNode;
+    children?: ReactNode;
+}
+/**
+ * The second level: views inside one page — Content, Settings, Revisions. A
+ * hairline rule runs the full width; the active item sits on the rail.
+ */
+export declare const SubNav: import("react").ForwardRefExoticComponent<SubNavProps & import("react").RefAttributes<HTMLElement>>;
+interface SubNavItemBase {
+    label: string;
+    icon?: IconName;
+    isActive?: boolean;
+    /** A count beside the label — kept quiet, never a status colour. */
+    count?: number;
+}
+export interface SubNavItemProps extends SubNavItemBase, Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children"> {
+}
+/** One view, as a link. Use `SubNavButton` when the view is client state. */
+export declare const SubNavItem: import("react").ForwardRefExoticComponent<SubNavItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export interface SubNavButtonProps extends SubNavItemBase, Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "type"> {
+}
+/** One view, as a control — for panes switched in place rather than routed. */
+export declare const SubNavButton: import("react").ForwardRefExoticComponent<SubNavButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/SubNav/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,oBAAoB,EACzB,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;AAErB,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC9D,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM,qGAejB,CAAC;AAEH,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eACf,SAAQ,cAAc,EACpB,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;CAAG;AAEhE,6EAA6E;AAC7E,eAAO,MAAM,UAAU,+GAkBtB,CAAC;AAEF,MAAM,WAAW,iBACf,SAAQ,cAAc,EACpB,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;CAAG;AAEzE,+EAA+E;AAC/E,eAAO,MAAM,YAAY,iHAmBxB,CAAC"}

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

@@ -0,0 +1,31 @@
+import { type AnchorHTMLAttributes, type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from "react";
+import type { IconName } from "../Icon/icons.js";
+export interface SubNavProps extends HTMLAttributes<HTMLElement> {
+    /** Accessible name — say what the set switches, e.g. "Article sections". */
+    label: string;
+    /** Controls parked at the end of the row, e.g. a view switch. */
+    actions?: ReactNode;
+    children?: ReactNode;
+}
+/**
+ * The second level: views inside one page — Content, Settings, Revisions. A
+ * hairline rule runs the full width; the active item sits on the rail.
+ */
+export declare const SubNav: import("react").ForwardRefExoticComponent<SubNavProps & import("react").RefAttributes<HTMLElement>>;
+interface SubNavItemBase {
+    label: string;
+    icon?: IconName;
+    isActive?: boolean;
+    /** A count beside the label — kept quiet, never a status colour. */
+    count?: number;
+}
+export interface SubNavItemProps extends SubNavItemBase, Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children"> {
+}
+/** One view, as a link. Use `SubNavButton` when the view is client state. */
+export declare const SubNavItem: import("react").ForwardRefExoticComponent<SubNavItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export interface SubNavButtonProps extends SubNavItemBase, Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "type"> {
+}
+/** One view, as a control — for panes switched in place rather than routed. */
+export declare const SubNavButton: import("react").ForwardRefExoticComponent<SubNavButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SubNav/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,oBAAoB,EACzB,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;AAErB,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC9D,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM,qGAejB,CAAC;AAEH,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eACf,SAAQ,cAAc,EACpB,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;CAAG;AAEhE,6EAA6E;AAC7E,eAAO,MAAM,UAAU,+GAkBtB,CAAC;AAEF,MAAM,WAAW,iBACf,SAAQ,cAAc,EACpB,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;CAAG;AAEzE,+EAA+E;AAC/E,eAAO,MAAM,YAAY,iHAmBxB,CAAC"}