@namroodinc/liquid-editorial 0.0.0-stage → 0.1.1

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"}

package/dist/components/SubNav/index.js

@@ -0,0 +1,62 @@
+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/SubNav/index.tsx
+var i = t(function({ label: e, actions: t, className: i, children: a, ...o }, s) {
+	return /* @__PURE__ */ r("nav", {
+		ref: s,
+		"aria-label": e,
+		className: ["ds-subnav", i].filter(Boolean).join(" "),
+		...o,
+		children: [/* @__PURE__ */ n("ul", {
+			className: "ds-subnav__list",
+			children: a
+		}), t && /* @__PURE__ */ n("div", {
+			className: "ds-subnav__actions",
+			children: t
+		})]
+	});
+}), a = t(function({ label: t, icon: i, isActive: a, count: o, className: s, ...c }, l) {
+	return /* @__PURE__ */ n("li", {
+		className: "ds-subnav__row",
+		children: /* @__PURE__ */ r("a", {
+			ref: l,
+			className: ["ds-subnav__item", s].filter(Boolean).join(" "),
+			"data-active": a || void 0,
+			"aria-current": a ? "page" : void 0,
+			...c,
+			children: [
+				i && /* @__PURE__ */ n(e, { name: i }),
+				t,
+				o !== void 0 && /* @__PURE__ */ n("span", {
+					className: "ds-subnav__count",
+					children: o
+				})
+			]
+		})
+	});
+}), o = t(function({ label: t, icon: i, isActive: a, count: o, className: s, ...c }, l) {
+	return /* @__PURE__ */ n("li", {
+		className: "ds-subnav__row",
+		children: /* @__PURE__ */ r("button", {
+			ref: l,
+			type: "button",
+			className: ["ds-subnav__item", s].filter(Boolean).join(" "),
+			"data-active": a || void 0,
+			"aria-pressed": a,
+			...c,
+			children: [
+				i && /* @__PURE__ */ n(e, { name: i }),
+				t,
+				o !== void 0 && /* @__PURE__ */ n("span", {
+					className: "ds-subnav__count",
+					children: o
+				})
+			]
+		})
+	});
+});
+//#endregion
+export { i as SubNav, o as SubNavButton, a as SubNavItem };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Icon","SubNav","forwardRef","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":";;;;AAuBA,IAAaC,IAASC,EAAqC,SACzD,EAAE,UAAO,YAAS,cAAW,aAAU,GAAGC,KAC1C,GACA;CACA,OACE,kBAAC,OAAD;EACO;EACL,cAAYC;EACZ,WAAW,CAAC,aAAaC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAC5D,GAAIF;EAJN,UAAA,CAME,kBAAC,MAAD;GAAI,WAAU;GAAmB;EAAa,CAAA,GAC7CG,KAAW,kBAAC,OAAD;GAAK,WAAU;GAAsB,UAAAA;EAAa,CAAA,CAC3D;;AAET,CAAC,GAeYC,IAAaL,EACxB,SAAoB,EAAE,UAAO,SAAM,aAAU,UAAO,cAAW,GAAGC,KAAQ,GAAK;CAC7E,OACE,kBAAC,MAAD;EAAI,WAAU;EACZ,UAAA,kBAAC,KAAD;GACO;GACL,WAAW,CAAC,mBAAmBE,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;GAClE,eAAaG,KAAY,KAAA;GACzB,gBAAcA,IAAW,SAAS,KAAA;GAClC,GAAIL;GALN,UAAA;IAOGM,KAAQ,kBAACT,GAAD,EAAM,MAAMS,EAAO,CAAA;IAC3BL;IACAM,MAAU,KAAA,KAAa,kBAAC,QAAD;KAAM,WAAU;KAAoB,UAAAA;IAAY,CAAA;GACvE;;CACD,CAAA;AAER,CACF,GAOaC,IAAeT,EAC1B,SAAsB,EAAE,UAAO,SAAM,aAAU,UAAO,cAAW,GAAGC,KAAQ,GAAK;CAC/E,OACE,kBAAC,MAAD;EAAI,WAAU;EACZ,UAAA,kBAAC,UAAD;GACO;GACL,MAAK;GACL,WAAW,CAAC,mBAAmBE,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;GAClE,eAAaG,KAAY,KAAA;GACzB,gBAAcA;GACd,GAAIL;GANN,UAAA;IAQGM,KAAQ,kBAACT,GAAD,EAAM,MAAMS,EAAO,CAAA;IAC3BL;IACAM,MAAU,KAAA,KAAa,kBAAC,QAAD;KAAM,WAAU;KAAoB,UAAAA;IAAY,CAAA;GAClE;;CACN,CAAA;AAER,CACF"}

package/dist/components/SubNav/style.css

@@ -0,0 +1,86 @@
+@layer components {
+  .ds-subnav {
+    display: flex;
+    align-items: stretch;
+    gap: var(--space-4);
+    min-block-size: var(--subnav-height);
+    border-block-end: var(--rule-width) solid var(--rule-color);
+  }
+
+  .ds-subnav__list {
+    display: flex;
+    align-items: stretch;
+    gap: var(--space-1);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    min-inline-size: 0;
+    overflow-x: auto;
+  }
+
+  .ds-subnav__row {
+    display: flex;
+  }
+
+  .ds-subnav__item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding-inline: var(--space-3);
+    border: 0;
+    background: none;
+    color: var(--color-text-muted);
+    font: inherit;
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+    box-shadow: inset 0 calc(-1 * var(--rail-width)) 0 0 transparent;
+    transition:
+      color var(--duration-fast) var(--ease-standard),
+      box-shadow var(--duration-fast) var(--ease-standard);
+  }
+
+  .ds-subnav__item:hover {
+    color: var(--color-text);
+  }
+
+  .ds-subnav__item:focus-visible {
+    outline: var(--control-border-width) solid var(--color-focus);
+    outline-offset: -2px;
+  }
+
+  .ds-subnav__item[data-active] {
+    color: var(--color-text);
+    font-weight: var(--font-weight-bold);
+    box-shadow: inset 0 calc(-1 * var(--rail-width)) 0 0 var(--rail-color);
+  }
+
+  .ds-subnav__count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--space-5);
+    padding-inline: var(--space-1);
+    border-radius: var(--radius-pill);
+    background: var(--field-rest);
+    color: var(--color-text-muted);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-bold);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .ds-subnav__actions {
+    margin-inline-start: auto;
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ds-subnav__item {
+      transition: none;
+    }
+  }
+}

package/dist/components/Switch/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react"),t=require("react/jsx-runtime");function n(...e){return e.filter(Boolean).join(` `)}var r=(0,e.forwardRef)(function({isSelected:r,defaultSelected:i=!1,onSelectedChange:a,isDisabled:o=!1,className:s,children:c,onClick:l,...u},d){let[f,p]=(0,e.useState)(i),m=r??f;return(0,t.jsxs)(`label`,{className:n(`ds-switch`,s),children:[(0,t.jsx)(`button`,{ref:d,type:`button`,role:`switch`,"aria-checked":m,disabled:o,className:`ds-switch__track`,onClick:e=>{if(l?.(e),e.defaultPrevented)return;let t=!m;r===void 0&&p(t),a?.(t)},...u,children:(0,t.jsx)(`span`,{className:`ds-switch__knob`,"aria-hidden":`true`})}),c&&(0,t.jsx)(`span`,{className:`ds-switch__label`,children:c})]})});exports.Switch=r;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["forwardRef","useState","react","react_jsx_runtime","cx","parts","Switch","rest","internal","setInternal","defaultSelected","current","isSelected","className","isDisabled","onClick","event","next","onSelectedChange","children"],"sources":["../../../src/components/Switch/index.tsx"],"sourcesContent":["import { forwardRef, useState, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport interface SwitchProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\" | \"value\" | \"disabled\"> {\n  isSelected?: boolean;\n  defaultSelected?: boolean;\n  onSelectedChange?: (isSelected: boolean) => void;\n  isDisabled?: boolean;\n  /** Label to the right of the track. Omit it and pass `aria-label`. */\n  children?: ReactNode;\n}\n\n/** An immediate on/off — it commits as it is pressed, no Save behind it. */\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(function Switch(\n  {\n    isSelected,\n    defaultSelected = false,\n    onSelectedChange,\n    isDisabled = false,\n    className,\n    children,\n    onClick,\n    ...rest\n  },\n  ref,\n) {\n  const [internal, setInternal] = useState(defaultSelected);\n  const current = isSelected ?? internal;\n\n  return (\n    <label className={cx(\"ds-switch\", className)}>\n      <button\n        ref={ref}\n        type=\"button\"\n        role=\"switch\"\n        aria-checked={current}\n        disabled={isDisabled}\n        className=\"ds-switch__track\"\n        onClick={(event) => {\n          onClick?.(event);\n          if (event.defaultPrevented) return;\n          const next = !current;\n          if (isSelected === undefined) setInternal(next);\n          onSelectedChange?.(next);\n        }}\n        {...rest}\n      >\n        <span className=\"ds-switch__knob\" aria-hidden=\"true\" />\n      </button>\n      {children && <span className=\"ds-switch__label\">{children}</span>}\n    </label>\n  );\n});\n"],"mappings":"A,yHAGA,SAASI,EAAG,GAAGC,EAAuC,CACpD,OAAOA,EAAM,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,CACvC,CAaA,IAAaC,GAAA,EAASN,EAAAA,WAAAA,CAA2C,SAC/D,CACE,aACA,kBAAkB,GAClB,mBACA,aAAa,GACb,YACA,WACA,UACA,GAAGO,GAEL,EACA,CACA,GAAM,CAACC,EAAUC,IAAA,EAAeR,EAAAA,SAAAA,CAASS,CAAe,EAClDC,EAAUC,GAAcJ,EAE9B,OACE,EAAAL,EAAA,KAAA,CAAC,QAAD,CAAO,UAAWC,EAAG,YAAaS,CAAS,EAA3C,SAAA,EACE,EAAAV,EAAA,IAAA,CAAC,SAAD,CACO,MACL,KAAK,SACL,KAAK,SACL,eAAcQ,EACd,SAAUG,EACV,UAAU,mBACV,QAAU,GAAU,CAElB,GADAC,IAAUC,CAAK,EACXA,EAAM,iBAAkB,OAC5B,IAAMC,EAAO,CAACN,EACVC,IAAe,IAAA,IAAWH,EAAYQ,CAAI,EAC9CC,IAAmBD,CAAI,CACzB,EACA,GAAIV,EAEJ,UAAA,EAAAJ,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,kBAAkB,cAAY,MAAQ,CAAA,CAChD,CAAA,EACPgB,IAAY,EAAAhB,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,mBAAoB,UAAe,CAAA,CAC3D,C,EAEX,CAAC,E"}

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

@@ -0,0 +1,12 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+export interface SwitchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "value" | "disabled"> {
+    isSelected?: boolean;
+    defaultSelected?: boolean;
+    onSelectedChange?: (isSelected: boolean) => void;
+    isDisabled?: boolean;
+    /** Label to the right of the track. Omit it and pass `aria-label`. */
+    children?: ReactNode;
+}
+/** An immediate on/off — it commits as it is pressed, no Save behind it. */
+export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Switch/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACxF,OAAO,aAAa,CAAC;AAMrB,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;IACxF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,4EAA4E;AAC5E,eAAO,MAAM,MAAM,2GAuCjB,CAAC"}

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

@@ -0,0 +1,12 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+export interface SwitchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "value" | "disabled"> {
+    isSelected?: boolean;
+    defaultSelected?: boolean;
+    onSelectedChange?: (isSelected: boolean) => void;
+    isDisabled?: boolean;
+    /** Label to the right of the track. Omit it and pass `aria-label`. */
+    children?: ReactNode;
+}
+/** An immediate on/off — it commits as it is pressed, no Save behind it. */
+export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACxF,OAAO,aAAa,CAAC;AAMrB,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;IACxF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,4EAA4E;AAC5E,eAAO,MAAM,MAAM,2GAuCjB,CAAC"}

package/dist/components/Switch/index.js

@@ -0,0 +1,37 @@
+import { forwardRef as e, useState as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/Switch/index.tsx
+function i(...e) {
+	return e.filter(Boolean).join(" ");
+}
+var a = e(function({ isSelected: e, defaultSelected: a = !1, onSelectedChange: o, isDisabled: s = !1, className: c, children: l, onClick: u, ...d }, f) {
+	let [p, m] = t(a), h = e ?? p;
+	return /* @__PURE__ */ r("label", {
+		className: i("ds-switch", c),
+		children: [/* @__PURE__ */ n("button", {
+			ref: f,
+			type: "button",
+			role: "switch",
+			"aria-checked": h,
+			disabled: s,
+			className: "ds-switch__track",
+			onClick: (t) => {
+				if (u?.(t), t.defaultPrevented) return;
+				let n = !h;
+				e === void 0 && m(n), o?.(n);
+			},
+			...d,
+			children: /* @__PURE__ */ n("span", {
+				className: "ds-switch__knob",
+				"aria-hidden": "true"
+			})
+		}), l && /* @__PURE__ */ n("span", {
+			className: "ds-switch__label",
+			children: l
+		})]
+	});
+});
+//#endregion
+export { a as Switch };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["cx","parts","Switch","forwardRef","rest","internal","setInternal","useState","defaultSelected","current","isSelected","className","isDisabled","onClick","event","next","onSelectedChange","children"],"sources":["../../../src/components/Switch/index.tsx"],"sourcesContent":["import { forwardRef, useState, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport interface SwitchProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\" | \"value\" | \"disabled\"> {\n  isSelected?: boolean;\n  defaultSelected?: boolean;\n  onSelectedChange?: (isSelected: boolean) => void;\n  isDisabled?: boolean;\n  /** Label to the right of the track. Omit it and pass `aria-label`. */\n  children?: ReactNode;\n}\n\n/** An immediate on/off — it commits as it is pressed, no Save behind it. */\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(function Switch(\n  {\n    isSelected,\n    defaultSelected = false,\n    onSelectedChange,\n    isDisabled = false,\n    className,\n    children,\n    onClick,\n    ...rest\n  },\n  ref,\n) {\n  const [internal, setInternal] = useState(defaultSelected);\n  const current = isSelected ?? internal;\n\n  return (\n    <label className={cx(\"ds-switch\", className)}>\n      <button\n        ref={ref}\n        type=\"button\"\n        role=\"switch\"\n        aria-checked={current}\n        disabled={isDisabled}\n        className=\"ds-switch__track\"\n        onClick={(event) => {\n          onClick?.(event);\n          if (event.defaultPrevented) return;\n          const next = !current;\n          if (isSelected === undefined) setInternal(next);\n          onSelectedChange?.(next);\n        }}\n        {...rest}\n      >\n        <span className=\"ds-switch__knob\" aria-hidden=\"true\" />\n      </button>\n      {children && <span className=\"ds-switch__label\">{children}</span>}\n    </label>\n  );\n});\n"],"mappings":";;;AAGA,SAASA,EAAG,GAAGC,GAAuC;CACpD,OAAOA,EAAM,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AACvC;AAaA,IAAaC,IAASC,EAA2C,SAC/D,EACE,eACA,qBAAkB,IAClB,qBACA,gBAAa,IACb,cACA,aACA,YACA,GAAGC,KAEL,GACA;CACA,IAAM,CAACC,GAAUC,KAAeC,EAASC,CAAe,GAClDC,IAAUC,KAAcL;CAE9B,OACE,kBAAC,SAAD;EAAO,WAAWL,EAAG,aAAaW,CAAS;EAA3C,UAAA,CACE,kBAAC,UAAD;GACO;GACL,MAAK;GACL,MAAK;GACL,gBAAcF;GACd,UAAUG;GACV,WAAU;GACV,UAAU,MAAU;IAElB,IADAC,IAAUC,CAAK,GACXA,EAAM,kBAAkB;IAC5B,IAAMC,IAAO,CAACN;IAEd,AADIC,MAAe,KAAA,KAAWJ,EAAYS,CAAI,GAC9CC,IAAmBD,CAAI;GACzB;GACA,GAAIX;GAEJ,UAAA,kBAAC,QAAD;IAAM,WAAU;IAAkB,eAAY;GAAQ,CAAA;EAChD,CAAA,GACPa,KAAY,kBAAC,QAAD;GAAM,WAAU;GAAoB;EAAe,CAAA,CAC3D;;AAEX,CAAC"}