@d4gger/design-system 2.7.0 → 3.0.0

package/dist/components/spinner/Spinner.js

@@ -10,20 +10,39 @@ const SPINNER_SIZES = {
   md: "dsx-spinner--md",
   lg: "dsx-spinner--lg"
 };
+const RING_RADIUS = 9;
+const RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;
 const Spinner = React.forwardRef((props, forwardedRef) => {
-  const { asChild, children, className, label = "Loading", size = "md", ...spinnerProps } = extractProps(props, spinnerPropDefs);
+  const { asChild, children, className, label = "Loading", size = "md", state = "loading", value, ...spinnerProps } = extractProps(props, spinnerPropDefs);
   const Comp = asChild ? Slot : "span";
+  const determinate = state === "loading" && typeof value === "number";
+  const complete = state === "done" || determinate && value >= 100;
+  const statusLabel = state === "done" || complete ? "Done" : state === "error" ? "Error" : typeof value === "number" ? `${label} ${Math.round(Math.min(100, Math.max(0, value)))}%` : label;
   return /* @__PURE__ */ jsxs(
     Comp,
     {
       ...spinnerProps,
       ref: forwardedRef,
       "data-size": size,
+      "data-state": complete ? "done" : state,
       role: "status",
-      "aria-label": label,
+      "aria-label": statusLabel,
       className: classNames("dsx-spinner", SPINNER_SIZES[size], className),
       children: [
-        /* @__PURE__ */ jsx(Icon, { className: "dsx-spinner__icon", name: "loader", size: size === "sm" ? "sm" : size === "lg" ? "lg" : "md" }),
+        state === "done" || complete ? /* @__PURE__ */ jsx(Icon, { className: "dsx-spinner__icon", name: "check", size: size === "sm" ? "sm" : size === "lg" ? "lg" : "md" }) : state === "error" ? /* @__PURE__ */ jsx(Icon, { className: "dsx-spinner__icon", name: "x", size: size === "sm" ? "sm" : size === "lg" ? "lg" : "md" }) : determinate ? /* @__PURE__ */ jsxs("svg", { className: "dsx-spinner__ring", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("circle", { className: "dsx-spinner__ring-track", cx: "12", cy: "12", r: RING_RADIUS }),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: "dsx-spinner__ring-fill",
+              cx: "12",
+              cy: "12",
+              r: RING_RADIUS,
+              strokeDasharray: RING_CIRCUMFERENCE,
+              strokeDashoffset: RING_CIRCUMFERENCE * (1 - Math.min(100, Math.max(0, value)) / 100)
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx(Icon, { className: "dsx-spinner__icon", name: "loader", size: size === "sm" ? "sm" : size === "lg" ? "lg" : "md" }),
         asChild ? /* @__PURE__ */ jsx(Slottable, { children }) : children
       ]
     }

package/dist/components/spinner/Spinner.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/spinner/Spinner.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot, Slottable } from '@radix-ui/react-slot'\n\nimport { Icon } from '../icon/Icon'\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { spinnerPropDefs } from './spinner.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\nconst SPINNER_SIZES = {\n  sm: 'dsx-spinner--sm',\n  md: 'dsx-spinner--md',\n  lg: 'dsx-spinner--lg',\n} as const\n\ntype SpinnerElement = React.ComponentRef<'span'>\ntype SpinnerOwnProps = GetPropDefTypes<typeof spinnerPropDefs>\n\ninterface SpinnerProps extends React.ComponentPropsWithoutRef<'span'>, SpinnerOwnProps {}\n\nconst Spinner = React.forwardRef<SpinnerElement, SpinnerProps>((props, forwardedRef) => {\n  const { asChild, children, className, label = 'Loading', size = 'md', ...spinnerProps } = extractProps(props, spinnerPropDefs)\n\n  const Comp = asChild ? Slot : 'span'\n\n  return (\n    <Comp\n      {...spinnerProps}\n      ref={forwardedRef}\n      data-size={size}\n      role=\"status\"\n      aria-label={label}\n      className={classNames('dsx-spinner', SPINNER_SIZES[size], className)}\n    >\n      <Icon className=\"dsx-spinner__icon\" name=\"loader\" size={size === 'sm' ? 'sm' : size === 'lg' ? 'lg' : 'md'} />\n      {asChild ? <Slottable>{children}</Slottable> : children}\n    </Comp>\n  )\n})\nSpinner.displayName = 'Spinner'\n\nexport { Spinner }\nexport type { SpinnerElement, SpinnerOwnProps, SpinnerProps }\n"],
-  "mappings": "AAAA,YAAY,WAAW;AACvB,OAAO,gBAAgB;AACvB,SAAS,MAAM,iBAAiB;AAEhC,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAqB5B,SAQE,KARF;AAjBJ,MAAM,gBAAgB;AAAA,EACpB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAOA,MAAM,UAAU,MAAM,WAAyC,CAAC,OAAO,iBAAiB;AACtF,QAAM,EAAE,SAAS,UAAU,WAAW,QAAQ,WAAW,OAAO,MAAM,GAAG,aAAa,IAAI,aAAa,OAAO,eAAe;AAE7H,QAAM,OAAO,UAAU,OAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,aAAW;AAAA,MACX,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,WAAW,WAAW,eAAe,cAAc,IAAI,GAAG,SAAS;AAAA,MAEnE;AAAA,4BAAC,QAAK,WAAU,qBAAoB,MAAK,UAAS,MAAM,SAAS,OAAO,OAAO,SAAS,OAAO,OAAO,MAAM;AAAA,QAC3G,UAAU,oBAAC,aAAW,UAAS,IAAe;AAAA;AAAA;AAAA,EACjD;AAEJ,CAAC;AACD,QAAQ,cAAc;",
+  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot, Slottable } from '@radix-ui/react-slot'\n\nimport { Icon } from '../icon/Icon'\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { spinnerPropDefs } from './spinner.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\nconst SPINNER_SIZES = {\n  sm: 'dsx-spinner--sm',\n  md: 'dsx-spinner--md',\n  lg: 'dsx-spinner--lg',\n} as const\n\ntype SpinnerElement = React.ComponentRef<'span'>\ntype SpinnerOwnProps = GetPropDefTypes<typeof spinnerPropDefs>\n\ninterface SpinnerProps extends React.ComponentPropsWithoutRef<'span'>, SpinnerOwnProps {}\n\nconst RING_RADIUS = 9\nconst RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS\n\nconst Spinner = React.forwardRef<SpinnerElement, SpinnerProps>((props, forwardedRef) => {\n  const { asChild, children, className, label = 'Loading', size = 'md', state = 'loading', value, ...spinnerProps } = extractProps(props, spinnerPropDefs)\n\n  const Comp = asChild ? Slot : 'span'\n  const determinate = state === 'loading' && typeof value === 'number'\n  const complete = state === 'done' || (determinate && value >= 100)\n\n  const statusLabel = state === 'done' || complete ? 'Done' : state === 'error' ? 'Error' : typeof value === 'number' ? `${label} ${Math.round(Math.min(100, Math.max(0, value)))}%` : label\n\n  return (\n    <Comp\n      {...spinnerProps}\n      ref={forwardedRef}\n      data-size={size}\n      data-state={complete ? 'done' : state}\n      role=\"status\"\n      aria-label={statusLabel}\n      className={classNames('dsx-spinner', SPINNER_SIZES[size], className)}\n    >\n      {state === 'done' || complete ? (\n        <Icon className=\"dsx-spinner__icon\" name=\"check\" size={size === 'sm' ? 'sm' : size === 'lg' ? 'lg' : 'md'} />\n      ) : state === 'error' ? (\n        <Icon className=\"dsx-spinner__icon\" name=\"x\" size={size === 'sm' ? 'sm' : size === 'lg' ? 'lg' : 'md'} />\n      ) : determinate ? (\n        <svg className=\"dsx-spinner__ring\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <circle className=\"dsx-spinner__ring-track\" cx=\"12\" cy=\"12\" r={RING_RADIUS} />\n          <circle\n            className=\"dsx-spinner__ring-fill\"\n            cx=\"12\"\n            cy=\"12\"\n            r={RING_RADIUS}\n            strokeDasharray={RING_CIRCUMFERENCE}\n            strokeDashoffset={RING_CIRCUMFERENCE * (1 - Math.min(100, Math.max(0, value)) / 100)}\n          />\n        </svg>\n      ) : (\n        <Icon className=\"dsx-spinner__icon\" name=\"loader\" size={size === 'sm' ? 'sm' : size === 'lg' ? 'lg' : 'md'} />\n      )}\n      {asChild ? <Slottable>{children}</Slottable> : children}\n    </Comp>\n  )\n})\nSpinner.displayName = 'Spinner'\n\nexport { Spinner }\nexport type { SpinnerElement, SpinnerOwnProps, SpinnerProps }\n"],
+  "mappings": "AAAA,YAAY,WAAW;AACvB,OAAO,gBAAgB;AACvB,SAAS,MAAM,iBAAiB;AAEhC,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAsCxB,cAIA,YAJA;AAlCR,MAAM,gBAAgB;AAAA,EACpB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAOA,MAAM,cAAc;AACpB,MAAM,qBAAqB,IAAI,KAAK,KAAK;AAEzC,MAAM,UAAU,MAAM,WAAyC,CAAC,OAAO,iBAAiB;AACtF,QAAM,EAAE,SAAS,UAAU,WAAW,QAAQ,WAAW,OAAO,MAAM,QAAQ,WAAW,OAAO,GAAG,aAAa,IAAI,aAAa,OAAO,eAAe;AAEvJ,QAAM,OAAO,UAAU,OAAO;AAC9B,QAAM,cAAc,UAAU,aAAa,OAAO,UAAU;AAC5D,QAAM,WAAW,UAAU,UAAW,eAAe,SAAS;AAE9D,QAAM,cAAc,UAAU,UAAU,WAAW,SAAS,UAAU,UAAU,UAAU,OAAO,UAAU,WAAW,GAAG,KAAK,IAAI,KAAK,MAAM,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,MAAM;AAErL,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,aAAW;AAAA,MACX,cAAY,WAAW,SAAS;AAAA,MAChC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,WAAW,WAAW,eAAe,cAAc,IAAI,GAAG,SAAS;AAAA,MAElE;AAAA,kBAAU,UAAU,WACnB,oBAAC,QAAK,WAAU,qBAAoB,MAAK,SAAQ,MAAM,SAAS,OAAO,OAAO,SAAS,OAAO,OAAO,MAAM,IACzG,UAAU,UACZ,oBAAC,QAAK,WAAU,qBAAoB,MAAK,KAAI,MAAM,SAAS,OAAO,OAAO,SAAS,OAAO,OAAO,MAAM,IACrG,cACF,qBAAC,SAAI,WAAU,qBAAoB,SAAQ,aAAY,eAAY,QACjE;AAAA,8BAAC,YAAO,WAAU,2BAA0B,IAAG,MAAK,IAAG,MAAK,GAAG,aAAa;AAAA,UAC5E;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,IAAG;AAAA,cACH,IAAG;AAAA,cACH,GAAG;AAAA,cACH,iBAAiB;AAAA,cACjB,kBAAkB,sBAAsB,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC,IAAI;AAAA;AAAA,UAClF;AAAA,WACF,IAEA,oBAAC,QAAK,WAAU,qBAAoB,MAAK,UAAS,MAAM,SAAS,OAAO,OAAO,SAAS,OAAO,OAAO,MAAM;AAAA,QAE7G,UAAU,oBAAC,aAAW,UAAS,IAAe;AAAA;AAAA;AAAA,EACjD;AAEJ,CAAC;AACD,QAAQ,cAAc;",
   "names": []
 }

package/dist/components/spinner/spinner.props.cjs

@@ -23,6 +23,7 @@ __export(spinner_props_exports, {
 module.exports = __toCommonJS(spinner_props_exports);
 var import_asChild = require("../../_internal/props/asChild.prop");
 const spinnerSizes = ["sm", "md", "lg"];
+const spinnerStates = ["loading", "done", "error"];
 const spinnerPropDefs = {
   ...import_asChild.asChildPropDef,
   size: {
@@ -33,6 +34,15 @@ const spinnerPropDefs = {
   label: {
     type: "string",
     default: "Loading"
+  },
+  state: {
+    type: "enum",
+    values: spinnerStates,
+    default: "loading"
+  },
+  value: {
+    type: "number",
+    values: [25, 50, 75]
   }
 };
 //# sourceMappingURL=spinner.props.cjs.map

package/dist/components/spinner/spinner.props.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/spinner/spinner.props.ts"],
-  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst spinnerSizes = ['sm', 'md', 'lg'] as const\n\nconst spinnerPropDefs = {\n  ...asChildPropDef,\n  size: {\n    type: 'enum',\n    values: spinnerSizes,\n    default: 'md',\n  },\n  label: {\n    type: 'string',\n    default: 'Loading',\n  },\n} satisfies {\n  asChild: PropDef\n  label: PropDef\n  size: PropDef<(typeof spinnerSizes)[number]>\n}\n\nexport { spinnerPropDefs }\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA+B;AAI/B,MAAM,eAAe,CAAC,MAAM,MAAM,IAAI;AAEtC,MAAM,kBAAkB;AAAA,EACtB,GAAG;AAAA,EACH,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AACF;",
+  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst spinnerSizes = ['sm', 'md', 'lg'] as const\nconst spinnerStates = ['loading', 'done', 'error'] as const\n\nconst spinnerPropDefs = {\n  ...asChildPropDef,\n  size: {\n    type: 'enum',\n    values: spinnerSizes,\n    default: 'md',\n  },\n  label: {\n    type: 'string',\n    default: 'Loading',\n  },\n  state: {\n    type: 'enum',\n    values: spinnerStates,\n    default: 'loading',\n  },\n  value: {\n    type: 'number',\n    values: [25, 50, 75],\n  },\n} satisfies {\n  asChild: PropDef\n  label: PropDef\n  size: PropDef<(typeof spinnerSizes)[number]>\n  state: PropDef<(typeof spinnerStates)[number]>\n  value: PropDef\n}\n\nexport { spinnerPropDefs }\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA+B;AAI/B,MAAM,eAAe,CAAC,MAAM,MAAM,IAAI;AACtC,MAAM,gBAAgB,CAAC,WAAW,QAAQ,OAAO;AAEjD,MAAM,kBAAkB;AAAA,EACtB,GAAG;AAAA,EACH,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,QAAQ,CAAC,IAAI,IAAI,EAAE;AAAA,EACrB;AACF;",
   "names": []
 }

package/dist/components/spinner/spinner.props.d.cts

@@ -8,6 +8,15 @@ declare const spinnerPropDefs: {
         type: "string";
         default: string;
     };
+    state: {
+        type: "enum";
+        values: readonly ["loading", "done", "error"];
+        default: "loading";
+    };
+    value: {
+        type: "number";
+        values: number[];
+    };
     asChild: {
         type: "boolean";
         default: false;

package/dist/components/spinner/spinner.props.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.props.d.cts","sourceRoot":"","sources":["../../../src/components/spinner/spinner.props.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,eAAe;;;;;;;;;;;;;;CAepB,CAAA;AAED,OAAO,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"spinner.props.d.cts","sourceRoot":"","sources":["../../../src/components/spinner/spinner.props.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;CA0BpB,CAAA;AAED,OAAO,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/spinner/spinner.props.d.mts

@@ -8,6 +8,15 @@ declare const spinnerPropDefs: {
         type: "string";
         default: string;
     };
+    state: {
+        type: "enum";
+        values: readonly ["loading", "done", "error"];
+        default: "loading";
+    };
+    value: {
+        type: "number";
+        values: number[];
+    };
     asChild: {
         type: "boolean";
         default: false;

package/dist/components/spinner/spinner.props.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.props.d.mts","sourceRoot":"","sources":["../../../src/components/spinner/spinner.props.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,eAAe;;;;;;;;;;;;;;CAepB,CAAA;AAED,OAAO,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"spinner.props.d.mts","sourceRoot":"","sources":["../../../src/components/spinner/spinner.props.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;CA0BpB,CAAA;AAED,OAAO,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/spinner/spinner.props.d.ts

@@ -8,6 +8,15 @@ declare const spinnerPropDefs: {
         type: "string";
         default: string;
     };
+    state: {
+        type: "enum";
+        values: readonly ["loading", "done", "error"];
+        default: "loading";
+    };
+    value: {
+        type: "number";
+        values: number[];
+    };
     asChild: {
         type: "boolean";
         default: false;

package/dist/components/spinner/spinner.props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.props.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/spinner.props.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,eAAe;;;;;;;;;;;;;;CAepB,CAAA;AAED,OAAO,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"spinner.props.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/spinner.props.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;CA0BpB,CAAA;AAED,OAAO,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/spinner/spinner.props.js

@@ -1,5 +1,6 @@
 import { asChildPropDef } from "../../_internal/props/asChild.prop.js";
 const spinnerSizes = ["sm", "md", "lg"];
+const spinnerStates = ["loading", "done", "error"];
 const spinnerPropDefs = {
   ...asChildPropDef,
   size: {
@@ -10,6 +11,15 @@ const spinnerPropDefs = {
   label: {
     type: "string",
     default: "Loading"
+  },
+  state: {
+    type: "enum",
+    values: spinnerStates,
+    default: "loading"
+  },
+  value: {
+    type: "number",
+    values: [25, 50, 75]
   }
 };
 export {

package/dist/components/spinner/spinner.props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/spinner/spinner.props.ts"],
-  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst spinnerSizes = ['sm', 'md', 'lg'] as const\n\nconst spinnerPropDefs = {\n  ...asChildPropDef,\n  size: {\n    type: 'enum',\n    values: spinnerSizes,\n    default: 'md',\n  },\n  label: {\n    type: 'string',\n    default: 'Loading',\n  },\n} satisfies {\n  asChild: PropDef\n  label: PropDef\n  size: PropDef<(typeof spinnerSizes)[number]>\n}\n\nexport { spinnerPropDefs }\n"],
-  "mappings": "AAAA,SAAS,sBAAsB;AAI/B,MAAM,eAAe,CAAC,MAAM,MAAM,IAAI;AAEtC,MAAM,kBAAkB;AAAA,EACtB,GAAG;AAAA,EACH,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AACF;",
+  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst spinnerSizes = ['sm', 'md', 'lg'] as const\nconst spinnerStates = ['loading', 'done', 'error'] as const\n\nconst spinnerPropDefs = {\n  ...asChildPropDef,\n  size: {\n    type: 'enum',\n    values: spinnerSizes,\n    default: 'md',\n  },\n  label: {\n    type: 'string',\n    default: 'Loading',\n  },\n  state: {\n    type: 'enum',\n    values: spinnerStates,\n    default: 'loading',\n  },\n  value: {\n    type: 'number',\n    values: [25, 50, 75],\n  },\n} satisfies {\n  asChild: PropDef\n  label: PropDef\n  size: PropDef<(typeof spinnerSizes)[number]>\n  state: PropDef<(typeof spinnerStates)[number]>\n  value: PropDef\n}\n\nexport { spinnerPropDefs }\n"],
+  "mappings": "AAAA,SAAS,sBAAsB;AAI/B,MAAM,eAAe,CAAC,MAAM,MAAM,IAAI;AACtC,MAAM,gBAAgB,CAAC,WAAW,QAAQ,OAAO;AAEjD,MAAM,kBAAkB;AAAA,EACtB,GAAG;AAAA,EACH,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,QAAQ,CAAC,IAAI,IAAI,EAAE;AAAA,EACrB;AACF;",
   "names": []
 }

package/dist/components/spinner.css

@@ -12,6 +12,38 @@
   stroke-width: var(--dsx-icon-stroke-width-strong);
 }
 
+.dsx-spinner:where([data-state='done']) .dsx-spinner__icon,
+.dsx-spinner:where([data-state='error']) .dsx-spinner__icon {
+  animation: none;
+}
+
+.dsx-spinner:where([data-state='done']) {
+  color: var(--dsx-color-success);
+}
+
+.dsx-spinner:where([data-state='error']) {
+  color: var(--dsx-color-error);
+}
+
+.dsx-spinner__ring {
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+}
+
+.dsx-spinner__ring-track {
+  fill: none;
+  stroke: var(--dsx-color-surface);
+  stroke-width: 3;
+}
+
+.dsx-spinner__ring-fill {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 3;
+  stroke-linecap: round;
+}
+
 .dsx-spinner--sm {
   width: var(--dsx-size-sm);
   height: var(--dsx-size-sm);
@@ -26,3 +58,9 @@
   width: var(--dsx-size-lg);
   height: var(--dsx-size-lg);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .dsx-spinner__icon {
+    animation: none;
+  }
+}

package/dist/components/stepper.css

@@ -7,7 +7,20 @@
 
 .dsx-stepper--horizontal {
   flex-direction: row;
-  align-items: center;
+  /* align-items: flex-start (not center) keeps every item's top edge — and therefore every
+     Indicator, always the first element in the column — on the same line regardless of how
+     much label/description text wraps below it. Centering each item as a whole column (the
+     original rule) let items with taller wrapped content push their own Indicator to a
+     different Y than shorter items, so the dots visibly drifted off a shared line. */
+  align-items: flex-start;
+  /* Real gap between items now that the connector is drawn on each item via ::after
+     (see below) instead of a flex-sibling Separator filling the space between item boxes —
+     that filled the box-to-box gap, not the indicator-to-indicator gap, which is the actual
+     root cause of the "connects to the card, not the indicator" defect: items are wide
+     equal-width columns but the Indicator itself is a small circle at the column's left edge,
+     so a Separator sized to the leftover space between columns starts well past the
+     Indicator's own right edge, leaving a visible dead zone before the line begins. */
+  gap: var(--dsx-space-lg);
 }
 
 .dsx-stepper--vertical {
@@ -21,8 +34,52 @@
   gap: var(--dsx-space-sm);
 }
 
+/* Real fix, 2026-08-25: the base `.dsx-stepper__item` rule's `align-items: center` was
+   inherited unchanged into horizontal mode. With short single-line labels (the only content
+   this was ever visually checked against) a centered Indicator over centered-width Content
+   looks fine, because the Content box's width happens to equal the label's width. With real
+   multi-line, left-aligned descriptive text, Content's box instead sizes to its own longest
+   wrapped line and gets centered *relative to itself* — the Indicator sits above the middle
+   of that box, not above where the left-aligned text actually starts, which reads as
+   misaligned. Items also had no shared width, so different text lengths per item produced
+   uneven column widths sitting side by side. Fixed by left-aligning Indicator+Content (so the
+   dot sits at the actual start of the text) and giving every item an equal-width flex column
+   (so the row reads as a real grid instead of intrinsically-sized chunks). */
 .dsx-stepper--horizontal .dsx-stepper__item {
+  position: relative;
   flex-direction: column;
+  align-items: flex-start;
+  flex: 1;
+  min-width: 0;
+}
+
+/* Connector, ported from vertical mode's already-correct technique: an absolutely-positioned
+   line anchored directly to the Indicator's own known geometry (--dsx-size-md is its
+   diameter), not a flex-sibling that only knows about leftover space between item boxes.
+   Starts right at the Indicator's own right edge (left: --dsx-size-md) and extends past this
+   item's own right edge into the inter-item `gap` above (right: -gap), landing exactly at the
+   start of the next item's box — which is where its Indicator begins, since Indicator is
+   always flush-left in the item column. */
+.dsx-stepper--horizontal .dsx-stepper__item:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  top: calc(var(--dsx-size-md) / 2 - var(--dsx-border-width-lg) / 2);
+  left: var(--dsx-size-md);
+  right: calc(-1 * var(--dsx-space-lg));
+  height: var(--dsx-border-width-lg);
+  background: var(--dsx-color-outline-variant);
+  border-radius: var(--dsx-rounded-full);
+}
+
+.dsx-stepper--horizontal .dsx-stepper__item--complete:not(:last-child)::after {
+  background: var(--dsx-color-primary);
+}
+
+/* Separator siblings are hidden in horizontal mode too now — connectors use ::after on items,
+   same as vertical. Kept as a real DOM node (not removed from the composition API) so existing
+   consumers rendering <Stepper.Separator /> don't break; it just renders nothing visually. */
+.dsx-stepper--horizontal .dsx-stepper__separator {
+  display: none;
 }
 
 /* Vertical: row layout, indicator on left, content on right */
@@ -119,6 +176,11 @@
   color: var(--dsx-color-on-surface-variant);
 }
 
+/* Base .dsx-stepper__separator styling (flex/height/background) only actually renders in a
+   custom orientation that doesn't hide it — both shipped orientations (horizontal, vertical)
+   now draw their connector via each item's own ::after instead, so this is dead weight kept
+   only for the (currently unused) possibility of a future orientation that wants a real
+   flex-sibling connector. */
 .dsx-stepper__separator {
   flex: 1;
   height: var(--dsx-border-width-lg);
@@ -127,13 +189,6 @@
   min-width: var(--dsx-space-md);
 }
 
-.dsx-stepper--horizontal .dsx-stepper__separator {
-  align-self: flex-start;
-  margin-top: calc(var(--dsx-size-md) / 2 - var(--dsx-border-width-lg) / 2);
-  margin-left: var(--dsx-space-sm);
-  margin-right: var(--dsx-space-sm);
-}
-
 .dsx-stepper__item--complete + .dsx-stepper__separator {
   background: var(--dsx-color-primary);
 }

package/dist/components/switch/Switch.cjs

@@ -38,17 +38,13 @@ var import_react_slot = require("@radix-ui/react-slot");
 var import_extractProps = require("../../_internal/helpers/extractProps");
 var import_switch = require("./switch.props");
 var import_jsx_runtime = require("react/jsx-runtime");
-const SWITCH_SIZE_CLASS_NAMES = {
-  sm: "dsx-switch--sm",
-  md: "dsx-switch--md"
-};
 const Switch = React.forwardRef((props, forwardedRef) => {
   const { asChild, children, className, color, highContrast = false, radius = "md", size = "md", variant = "solid", ...switchProps } = (0, import_extractProps.extractProps)(props, import_switch.switchPropDefs);
   const Comp = asChild ? import_react_slot.Slot : "button";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SwitchPrimitive.Root, { ...switchProps, ref: forwardedRef, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     Comp,
     {
-      className: (0, import_classnames.default)("dsx-switch", SWITCH_SIZE_CLASS_NAMES[size], className),
+      className: (0, import_classnames.default)("dsx-switch", className),
       "data-accent-color": color,
       "data-high-contrast": highContrast ? "true" : void 0,
       "data-radius": radius,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/switch/Switch.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport * as SwitchPrimitive from '@radix-ui/react-switch'\nimport { Slot, Slottable } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { switchPropDefs } from './switch.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\nconst SWITCH_SIZE_CLASS_NAMES = {\n  sm: 'dsx-switch--sm',\n  md: 'dsx-switch--md',\n} as const\n\ntype SwitchElement = React.ComponentRef<typeof SwitchPrimitive.Root>\ntype SwitchOwnProps = GetPropDefTypes<typeof switchPropDefs>\n\ninterface SwitchProps extends Omit<React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, 'color'>, SwitchOwnProps {}\n\nconst Switch = React.forwardRef<SwitchElement, SwitchProps>((props, forwardedRef) => {\n  const { asChild, children, className, color, highContrast = false, radius = 'md', size = 'md', variant = 'solid', ...switchProps } = extractProps(props, switchPropDefs)\n  const Comp = asChild ? Slot : 'button'\n\n  return (\n    <SwitchPrimitive.Root {...switchProps} ref={forwardedRef} asChild>\n      <Comp\n        className={classNames('dsx-switch', SWITCH_SIZE_CLASS_NAMES[size], className)}\n        data-accent-color={color}\n        data-high-contrast={highContrast ? 'true' : undefined}\n        data-radius={radius}\n        data-size={size}\n        data-variant={variant}\n      >\n        {asChild ? <Slottable>{children}</Slottable> : null}\n        <SwitchPrimitive.Thumb className=\"dsx-switch__thumb\" />\n      </Comp>\n    </SwitchPrimitive.Root>\n  )\n})\nSwitch.displayName = 'Switch'\n\nexport { Switch }\nexport type { SwitchProps }\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,wBAAuB;AACvB,sBAAiC;AACjC,wBAAgC;AAEhC,0BAA6B;AAC7B,oBAA+B;AAoBzB;AAhBN,MAAM,0BAA0B;AAAA,EAC9B,IAAI;AAAA,EACJ,IAAI;AACN;AAOA,MAAM,SAAS,MAAM,WAAuC,CAAC,OAAO,iBAAiB;AACnF,QAAM,EAAE,SAAS,UAAU,WAAW,OAAO,eAAe,OAAO,SAAS,MAAM,OAAO,MAAM,UAAU,SAAS,GAAG,YAAY,QAAI,kCAAa,OAAO,4BAAc;AACvK,QAAM,OAAO,UAAU,yBAAO;AAE9B,SACE,4CAAC,gBAAgB,MAAhB,EAAsB,GAAG,aAAa,KAAK,cAAc,SAAO,MAC/D;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,kBAAAA,SAAW,cAAc,wBAAwB,IAAI,GAAG,SAAS;AAAA,MAC5E,qBAAmB;AAAA,MACnB,sBAAoB,eAAe,SAAS;AAAA,MAC5C,eAAa;AAAA,MACb,aAAW;AAAA,MACX,gBAAc;AAAA,MAEb;AAAA,kBAAU,4CAAC,+BAAW,UAAS,IAAe;AAAA,QAC/C,4CAAC,gBAAgB,OAAhB,EAAsB,WAAU,qBAAoB;AAAA;AAAA;AAAA,EACvD,GACF;AAEJ,CAAC;AACD,OAAO,cAAc;",
+  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport * as SwitchPrimitive from '@radix-ui/react-switch'\nimport { Slot, Slottable } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { switchPropDefs } from './switch.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype SwitchElement = React.ComponentRef<typeof SwitchPrimitive.Root>\ntype SwitchOwnProps = GetPropDefTypes<typeof switchPropDefs>\n\ninterface SwitchProps extends Omit<React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, 'color'>, SwitchOwnProps {}\n\nconst Switch = React.forwardRef<SwitchElement, SwitchProps>((props, forwardedRef) => {\n  const { asChild, children, className, color, highContrast = false, radius = 'md', size = 'md', variant = 'solid', ...switchProps } = extractProps(props, switchPropDefs)\n  const Comp = asChild ? Slot : 'button'\n\n  return (\n    <SwitchPrimitive.Root {...switchProps} ref={forwardedRef} asChild>\n      <Comp\n        className={classNames('dsx-switch', className)}\n        data-accent-color={color}\n        data-high-contrast={highContrast ? 'true' : undefined}\n        data-radius={radius}\n        data-size={size}\n        data-variant={variant}\n      >\n        {asChild ? <Slottable>{children}</Slottable> : null}\n        <SwitchPrimitive.Thumb className=\"dsx-switch__thumb\" />\n      </Comp>\n    </SwitchPrimitive.Root>\n  )\n})\nSwitch.displayName = 'Switch'\n\nexport { Switch }\nexport type { SwitchProps }\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,wBAAuB;AACvB,sBAAiC;AACjC,wBAAgC;AAEhC,0BAA6B;AAC7B,oBAA+B;AAezB;AANN,MAAM,SAAS,MAAM,WAAuC,CAAC,OAAO,iBAAiB;AACnF,QAAM,EAAE,SAAS,UAAU,WAAW,OAAO,eAAe,OAAO,SAAS,MAAM,OAAO,MAAM,UAAU,SAAS,GAAG,YAAY,QAAI,kCAAa,OAAO,4BAAc;AACvK,QAAM,OAAO,UAAU,yBAAO;AAE9B,SACE,4CAAC,gBAAgB,MAAhB,EAAsB,GAAG,aAAa,KAAK,cAAc,SAAO,MAC/D;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,kBAAAA,SAAW,cAAc,SAAS;AAAA,MAC7C,qBAAmB;AAAA,MACnB,sBAAoB,eAAe,SAAS;AAAA,MAC5C,eAAa;AAAA,MACb,aAAW;AAAA,MACX,gBAAc;AAAA,MAEb;AAAA,kBAAU,4CAAC,+BAAW,UAAS,IAAe;AAAA,QAC/C,4CAAC,gBAAgB,OAAhB,EAAsB,WAAU,qBAAoB;AAAA;AAAA;AAAA,EACvD,GACF;AAEJ,CAAC;AACD,OAAO,cAAc;",
   "names": ["classNames"]
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.cts","sourceRoot":"","sources":["../../../src/components/switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAIzD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAQpE,KAAK,cAAc,GAAG,eAAe,CAAC,OAAO,cAAc,CAAC,CAAA;AAE5D,UAAU,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,EAAE,cAAc;CAAG;AAE3H,QAAA,MAAM,MAAM,uFAmBV,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,CAAA;AACjB,YAAY,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"Switch.d.cts","sourceRoot":"","sources":["../../../src/components/switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAIzD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAGpE,KAAK,cAAc,GAAG,eAAe,CAAC,OAAO,cAAc,CAAC,CAAA;AAE5D,UAAU,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,EAAE,cAAc;CAAG;AAE3H,QAAA,MAAM,MAAM,uFAmBV,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,CAAA;AACjB,YAAY,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/switch/Switch.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.mts","sourceRoot":"","sources":["../../../src/components/switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAIzD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAQpE,KAAK,cAAc,GAAG,eAAe,CAAC,OAAO,cAAc,CAAC,CAAA;AAE5D,UAAU,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,EAAE,cAAc;CAAG;AAE3H,QAAA,MAAM,MAAM,uFAmBV,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,CAAA;AACjB,YAAY,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"Switch.d.mts","sourceRoot":"","sources":["../../../src/components/switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAIzD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAGpE,KAAK,cAAc,GAAG,eAAe,CAAC,OAAO,cAAc,CAAC,CAAA;AAE5D,UAAU,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,EAAE,cAAc;CAAG;AAE3H,QAAA,MAAM,MAAM,uFAmBV,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,CAAA;AACjB,YAAY,EAAE,WAAW,EAAE,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAIzD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAQpE,KAAK,cAAc,GAAG,eAAe,CAAC,OAAO,cAAc,CAAC,CAAA;AAE5D,UAAU,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,EAAE,cAAc;CAAG;AAE3H,QAAA,MAAM,MAAM,uFAmBV,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,CAAA;AACjB,YAAY,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAIzD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAGpE,KAAK,cAAc,GAAG,eAAe,CAAC,OAAO,cAAc,CAAC,CAAA;AAE5D,UAAU,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,EAAE,cAAc;CAAG;AAE3H,QAAA,MAAM,MAAM,uFAmBV,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,CAAA;AACjB,YAAY,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/switch/Switch.js

@@ -5,17 +5,13 @@ import { Slot, Slottable } from "@radix-ui/react-slot";
 import { extractProps } from "../../_internal/helpers/extractProps.js";
 import { switchPropDefs } from "./switch.props.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-const SWITCH_SIZE_CLASS_NAMES = {
-  sm: "dsx-switch--sm",
-  md: "dsx-switch--md"
-};
 const Switch = React.forwardRef((props, forwardedRef) => {
   const { asChild, children, className, color, highContrast = false, radius = "md", size = "md", variant = "solid", ...switchProps } = extractProps(props, switchPropDefs);
   const Comp = asChild ? Slot : "button";
   return /* @__PURE__ */ jsx(SwitchPrimitive.Root, { ...switchProps, ref: forwardedRef, asChild: true, children: /* @__PURE__ */ jsxs(
     Comp,
     {
-      className: classNames("dsx-switch", SWITCH_SIZE_CLASS_NAMES[size], className),
+      className: classNames("dsx-switch", className),
       "data-accent-color": color,
       "data-high-contrast": highContrast ? "true" : void 0,
       "data-radius": radius,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/switch/Switch.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport * as SwitchPrimitive from '@radix-ui/react-switch'\nimport { Slot, Slottable } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { switchPropDefs } from './switch.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\nconst SWITCH_SIZE_CLASS_NAMES = {\n  sm: 'dsx-switch--sm',\n  md: 'dsx-switch--md',\n} as const\n\ntype SwitchElement = React.ComponentRef<typeof SwitchPrimitive.Root>\ntype SwitchOwnProps = GetPropDefTypes<typeof switchPropDefs>\n\ninterface SwitchProps extends Omit<React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, 'color'>, SwitchOwnProps {}\n\nconst Switch = React.forwardRef<SwitchElement, SwitchProps>((props, forwardedRef) => {\n  const { asChild, children, className, color, highContrast = false, radius = 'md', size = 'md', variant = 'solid', ...switchProps } = extractProps(props, switchPropDefs)\n  const Comp = asChild ? Slot : 'button'\n\n  return (\n    <SwitchPrimitive.Root {...switchProps} ref={forwardedRef} asChild>\n      <Comp\n        className={classNames('dsx-switch', SWITCH_SIZE_CLASS_NAMES[size], className)}\n        data-accent-color={color}\n        data-high-contrast={highContrast ? 'true' : undefined}\n        data-radius={radius}\n        data-size={size}\n        data-variant={variant}\n      >\n        {asChild ? <Slottable>{children}</Slottable> : null}\n        <SwitchPrimitive.Thumb className=\"dsx-switch__thumb\" />\n      </Comp>\n    </SwitchPrimitive.Root>\n  )\n})\nSwitch.displayName = 'Switch'\n\nexport { Switch }\nexport type { SwitchProps }\n"],
-  "mappings": "AAAA,YAAY,WAAW;AACvB,OAAO,gBAAgB;AACvB,YAAY,qBAAqB;AACjC,SAAS,MAAM,iBAAiB;AAEhC,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAoBzB,SAQa,KARb;AAhBN,MAAM,0BAA0B;AAAA,EAC9B,IAAI;AAAA,EACJ,IAAI;AACN;AAOA,MAAM,SAAS,MAAM,WAAuC,CAAC,OAAO,iBAAiB;AACnF,QAAM,EAAE,SAAS,UAAU,WAAW,OAAO,eAAe,OAAO,SAAS,MAAM,OAAO,MAAM,UAAU,SAAS,GAAG,YAAY,IAAI,aAAa,OAAO,cAAc;AACvK,QAAM,OAAO,UAAU,OAAO;AAE9B,SACE,oBAAC,gBAAgB,MAAhB,EAAsB,GAAG,aAAa,KAAK,cAAc,SAAO,MAC/D;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,WAAW,cAAc,wBAAwB,IAAI,GAAG,SAAS;AAAA,MAC5E,qBAAmB;AAAA,MACnB,sBAAoB,eAAe,SAAS;AAAA,MAC5C,eAAa;AAAA,MACb,aAAW;AAAA,MACX,gBAAc;AAAA,MAEb;AAAA,kBAAU,oBAAC,aAAW,UAAS,IAAe;AAAA,QAC/C,oBAAC,gBAAgB,OAAhB,EAAsB,WAAU,qBAAoB;AAAA;AAAA;AAAA,EACvD,GACF;AAEJ,CAAC;AACD,OAAO,cAAc;",
+  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport * as SwitchPrimitive from '@radix-ui/react-switch'\nimport { Slot, Slottable } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { switchPropDefs } from './switch.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype SwitchElement = React.ComponentRef<typeof SwitchPrimitive.Root>\ntype SwitchOwnProps = GetPropDefTypes<typeof switchPropDefs>\n\ninterface SwitchProps extends Omit<React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, 'color'>, SwitchOwnProps {}\n\nconst Switch = React.forwardRef<SwitchElement, SwitchProps>((props, forwardedRef) => {\n  const { asChild, children, className, color, highContrast = false, radius = 'md', size = 'md', variant = 'solid', ...switchProps } = extractProps(props, switchPropDefs)\n  const Comp = asChild ? Slot : 'button'\n\n  return (\n    <SwitchPrimitive.Root {...switchProps} ref={forwardedRef} asChild>\n      <Comp\n        className={classNames('dsx-switch', className)}\n        data-accent-color={color}\n        data-high-contrast={highContrast ? 'true' : undefined}\n        data-radius={radius}\n        data-size={size}\n        data-variant={variant}\n      >\n        {asChild ? <Slottable>{children}</Slottable> : null}\n        <SwitchPrimitive.Thumb className=\"dsx-switch__thumb\" />\n      </Comp>\n    </SwitchPrimitive.Root>\n  )\n})\nSwitch.displayName = 'Switch'\n\nexport { Switch }\nexport type { SwitchProps }\n"],
+  "mappings": "AAAA,YAAY,WAAW;AACvB,OAAO,gBAAgB;AACvB,YAAY,qBAAqB;AACjC,SAAS,MAAM,iBAAiB;AAEhC,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAezB,SAQa,KARb;AANN,MAAM,SAAS,MAAM,WAAuC,CAAC,OAAO,iBAAiB;AACnF,QAAM,EAAE,SAAS,UAAU,WAAW,OAAO,eAAe,OAAO,SAAS,MAAM,OAAO,MAAM,UAAU,SAAS,GAAG,YAAY,IAAI,aAAa,OAAO,cAAc;AACvK,QAAM,OAAO,UAAU,OAAO;AAE9B,SACE,oBAAC,gBAAgB,MAAhB,EAAsB,GAAG,aAAa,KAAK,cAAc,SAAO,MAC/D;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,WAAW,cAAc,SAAS;AAAA,MAC7C,qBAAmB;AAAA,MACnB,sBAAoB,eAAe,SAAS;AAAA,MAC5C,eAAa;AAAA,MACb,aAAW;AAAA,MACX,gBAAc;AAAA,MAEb;AAAA,kBAAU,oBAAC,aAAW,UAAS,IAAe;AAAA,QAC/C,oBAAC,gBAAgB,OAAhB,EAAsB,WAAU,qBAAoB;AAAA;AAAA;AAAA,EACvD,GACF;AAEJ,CAAC;AACD,OAAO,cAAc;",
   "names": []
 }

package/dist/components/switch.css

@@ -8,7 +8,10 @@
   padding: var(--dsx-switch-padding);
   border: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
   border-radius: var(--dsx-rounded-full);
-  background: var(--dsx-color-surface-hover);
+  /* Off-track fill is one step above the page surface (industry parity: shadcn
+     bg-input, chakra bg.emphasized). If it still reads weak, the lever is a darker
+     fill, not a wider border (F2). */
+  background: var(--dsx-color-outline-variant);
   transition:
     background-color var(--dsx-motion-duration-fast, 150ms) var(--dsx-motion-easing-standard, ease),
     border-color var(--dsx-motion-duration-fast, 150ms) var(--dsx-motion-easing-standard, ease),
@@ -22,18 +25,18 @@
 }
 
 .dsx-switch[data-state='checked'] {
-  background: var(--dsx-color-primary);
-  border-color: var(--dsx-color-primary);
+  background: var(--dsx-color-accent-track);
+  border-color: var(--dsx-color-accent-track);
 }
 
 /* Variant — subtle: checked state gets a tinted fill instead of a solid one */
 .dsx-switch[data-variant='subtle'][data-state='checked'] {
-  background: var(--dsx-color-primary-ghost, color-mix(in srgb, var(--dsx-color-primary) 30%, transparent));
-  border-color: var(--dsx-color-primary);
+  background: var(--dsx-color-accent-surface);
+  border-color: var(--dsx-color-accent-track);
 }
 
 .dsx-switch[data-variant='subtle'][data-state='checked'] .dsx-switch__thumb {
-  background: var(--dsx-color-primary);
+  background: var(--dsx-color-accent-track);
 }
 
 /* Radius */
@@ -52,16 +55,34 @@
   border-color: var(--dsx-color-disabled-border);
 }
 
+.dsx-switch[data-disabled] .dsx-switch__thumb {
+  background: var(--dsx-color-on-surface);
+}
+
 .dsx-switch[data-disabled][data-state='checked'] {
   background: var(--dsx-effect-disabled-checked-layer);
 }
 
-.dsx-switch--sm {
+.dsx-switch[data-high-contrast='true'] {
+  background: var(--dsx-color-high-contrast-container);
+  border-color: var(--dsx-color-high-contrast-border);
+}
+
+.dsx-switch[data-high-contrast='true'][data-state='checked'] {
+  background: var(--dsx-color-high-contrast);
+  border-color: var(--dsx-color-high-contrast);
+}
+
+.dsx-switch[data-high-contrast='true'][data-state='checked'] .dsx-switch__thumb {
+  background: var(--dsx-color-on-high-contrast);
+}
+
+.dsx-switch[data-size='sm'] {
   width: var(--dsx-switch-width-sm);
   height: var(--dsx-switch-height-sm);
 }
 
-.dsx-switch--md {
+.dsx-switch[data-size='md'] {
   width: var(--dsx-switch-width);
   height: var(--dsx-switch-height);
 }
@@ -71,26 +92,27 @@
   width: var(--dsx-switch-thumb-size);
   height: var(--dsx-switch-thumb-size);
   border-radius: var(--dsx-rounded-full);
-  /* Was --dsx-color-on-surface (the ink/text token), rendering the resting
-     knob as a near-black circle. --dsx-color-surface-overlay is the
-     lightest/most-elevated surface tone in both themes, matching the
-     conventional floating-knob look (paired with the existing shadow). */
-  background: var(--dsx-color-surface-overlay);
+  /* Resting knob is literal paper-white in both themes and ALL accents
+     (industry parity: Radix/shadcn/chakra all use a white knob). Must be
+     --dsx-raw-white, NOT accent-contrast: spark's accent-contrast is #0c0d12,
+     which painted the OFF pin near-black on the dark track. accent-contrast
+     is only correct ON the accent track (the checked rule below). */
+  background: var(--dsx-raw-white);
   box-shadow: var(--dsx-shadow-elevation-1);
   transition: transform var(--dsx-motion-duration-fast, 150ms) var(--dsx-motion-easing-standard, ease);
 }
 
-.dsx-switch--sm .dsx-switch__thumb {
+.dsx-switch[data-size='sm'] .dsx-switch__thumb {
   width: var(--dsx-switch-thumb-size-sm);
   height: var(--dsx-switch-thumb-size-sm);
 }
 
 .dsx-switch[data-state='checked'] .dsx-switch__thumb {
-  background: var(--dsx-color-on-primary);
+  background: var(--dsx-color-accent-contrast);
   transform: translateX(var(--dsx-switch-thumb-translate));
 }
 
-.dsx-switch--sm[data-state='checked'] .dsx-switch__thumb {
+.dsx-switch[data-size='sm'][data-state='checked'] .dsx-switch__thumb {
   transform: translateX(var(--dsx-switch-thumb-translate-sm));
 }
 

package/dist/components/tableOfContents/TableOfContents.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/tableOfContents/TableOfContents.tsx"],
-  "sourcesContent": ["'use client'\nimport * as React from 'react'\nimport classNames from 'classnames'\n\ntype TableOfContentsItem = { id: string; title: React.ReactNode; level?: number }\ninterface TableOfContentsProps extends React.ComponentPropsWithoutRef<'nav'> { items: TableOfContentsItem[]; activeId?: string; onActiveIdChange?: (id: string) => void; sticky?: boolean }\n\nfunction extractTableOfContentsHeadings(root: ParentNode): Array<{ id: string; title: string; level: number }> {\n  return Array.from(root.querySelectorAll<HTMLElement>('h2[id],h3[id],h4[id]')).map((heading) => ({\n    id: heading.id, title: heading.textContent?.trim() ?? '', level: Number(heading.tagName.slice(1)),\n  }))\n}\n\nfunction useHeadingObserver(ids: string[], options: { rootMargin?: string } = {}) {\n  const [activeId, setActiveId] = React.useState<string>()\n  React.useEffect(() => {\n    if (typeof IntersectionObserver === 'undefined') return\n    const headings = ids.map((id) => document.getElementById(id)).filter((value): value is HTMLElement => Boolean(value))\n    const observer = new IntersectionObserver((entries) => {\n      const visible = entries.filter((entry) => entry.isIntersecting).sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top)\n      if (visible[0]?.target.id) setActiveId(visible[0].target.id)\n    }, { rootMargin: options.rootMargin ?? '0px 0px -70% 0px' })\n    headings.forEach((heading) => observer.observe(heading))\n    return () => observer.disconnect()\n  }, [ids.join('|'), options.rootMargin])\n  return activeId\n}\n\nconst TableOfContents = React.forwardRef<HTMLElement, TableOfContentsProps>(({ items, activeId, onActiveIdChange, sticky = true, className, ...props }, ref) => {\n  const observedId = useHeadingObserver(items.map((item) => item.id))\n  const current = activeId ?? observedId\n  React.useEffect(() => { if (observedId) onActiveIdChange?.(observedId) }, [observedId, onActiveIdChange])\n  if (items.length === 0) return null\n  return <nav {...props} ref={ref} aria-label={props['aria-label'] ?? 'Table of contents'} className={classNames('dsx-table-of-contents', className)} data-sticky={sticky ? 'true' : undefined}><ol>{items.map((item) => <li className=\"dsx-table-of-contents__item\" key={item.id} data-level={item.level ?? 2}><a className=\"dsx-table-of-contents__link\" href={`#${item.id}`} aria-current={current === item.id ? 'location' : undefined} onClick={(event) => { onActiveIdChange?.(item.id); if (!matchMedia('(prefers-reduced-motion: reduce)').matches) { event.preventDefault(); document.getElementById(item.id)?.scrollIntoView({ behavior: 'smooth' }); history.replaceState(null, '', `#${item.id}`) } }}>{item.title}</a></li>)}</ol></nav>\n})\nTableOfContents.displayName = 'TableOfContents'\n\nexport { TableOfContents, extractTableOfContentsHeadings, useHeadingObserver }\nexport type { TableOfContentsItem, TableOfContentsProps }\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,YAAuB;AACvB,wBAAuB;AA+ByR;AA1BhT,SAAS,+BAA+B,MAAuE;AAC7G,SAAO,MAAM,KAAK,KAAK,iBAA8B,sBAAsB,CAAC,EAAE,IAAI,CAAC,aAAa;AAAA,IAC9F,IAAI,QAAQ;AAAA,IAAI,OAAO,QAAQ,aAAa,KAAK,KAAK;AAAA,IAAI,OAAO,OAAO,QAAQ,QAAQ,MAAM,CAAC,CAAC;AAAA,EAClG,EAAE;AACJ;AAEA,SAAS,mBAAmB,KAAe,UAAmC,CAAC,GAAG;AAChF,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAiB;AACvD,QAAM,UAAU,MAAM;AACpB,QAAI,OAAO,yBAAyB,YAAa;AACjD,UAAM,WAAW,IAAI,IAAI,CAAC,OAAO,SAAS,eAAe,EAAE,CAAC,EAAE,OAAO,CAAC,UAAgC,QAAQ,KAAK,CAAC;AACpH,UAAM,WAAW,IAAI,qBAAqB,CAAC,YAAY;AACrD,YAAM,UAAU,QAAQ,OAAO,CAAC,UAAU,MAAM,cAAc,EAAE,KAAK,CAAC,GAAG,MAAM,EAAE,mBAAmB,MAAM,EAAE,mBAAmB,GAAG;AAClI,UAAI,QAAQ,CAAC,GAAG,OAAO,GAAI,aAAY,QAAQ,CAAC,EAAE,OAAO,EAAE;AAAA,IAC7D,GAAG,EAAE,YAAY,QAAQ,cAAc,mBAAmB,CAAC;AAC3D,aAAS,QAAQ,CAAC,YAAY,SAAS,QAAQ,OAAO,CAAC;AACvD,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,IAAI,KAAK,GAAG,GAAG,QAAQ,UAAU,CAAC;AACtC,SAAO;AACT;AAEA,MAAM,kBAAkB,MAAM,WAA8C,CAAC,EAAE,OAAO,UAAU,kBAAkB,SAAS,MAAM,WAAW,GAAG,MAAM,GAAG,QAAQ;AAC9J,QAAM,aAAa,mBAAmB,MAAM,IAAI,CAAC,SAAS,KAAK,EAAE,CAAC;AAClE,QAAM,UAAU,YAAY;AAC5B,QAAM,UAAU,MAAM;AAAE,QAAI,WAAY,oBAAmB,UAAU;AAAA,EAAE,GAAG,CAAC,YAAY,gBAAgB,CAAC;AACxG,MAAI,MAAM,WAAW,EAAG,QAAO;AAC/B,SAAO,4CAAC,SAAK,GAAG,OAAO,KAAU,cAAY,MAAM,YAAY,KAAK,qBAAqB,eAAW,kBAAAA,SAAW,yBAAyB,SAAS,GAAG,eAAa,SAAS,SAAS,QAAW,sDAAC,QAAI,gBAAM,IAAI,CAAC,SAAS,4CAAC,QAAG,WAAU,+BAA4C,cAAY,KAAK,SAAS,GAAG,sDAAC,OAAE,WAAU,+BAA8B,MAAM,IAAI,KAAK,EAAE,IAAI,gBAAc,YAAY,KAAK,KAAK,aAAa,QAAW,SAAS,CAAC,UAAU;AAAE,uBAAmB,KAAK,EAAE;AAAG,QAAI,CAAC,WAAW,kCAAkC,EAAE,SAAS;AAAE,YAAM,eAAe;AAAG,eAAS,eAAe,KAAK,EAAE,GAAG,eAAe,EAAE,UAAU,SAAS,CAAC;AAAG,cAAQ,aAAa,MAAM,IAAI,IAAI,KAAK,EAAE,EAAE;AAAA,IAAE;AAAA,EAAE,GAAI,eAAK,OAAM,KAArb,KAAK,EAAob,CAAK,GAAE,GAAK;AAC/sB,CAAC;AACD,gBAAgB,cAAc;",
+  "sourcesContent": ["'use client'\nimport * as React from 'react'\nimport classNames from 'classnames'\n\nimport type { TableOfContentsItem, TableOfContentsProps } from './tableOfContents.props'\n\nfunction extractTableOfContentsHeadings(root: ParentNode): Array<{ id: string; title: string; level: number }> {\n  return Array.from(root.querySelectorAll<HTMLElement>('h2[id],h3[id],h4[id]')).map((heading) => ({\n    id: heading.id, title: heading.textContent?.trim() ?? '', level: Number(heading.tagName.slice(1)),\n  }))\n}\n\nfunction useHeadingObserver(ids: string[], options: { rootMargin?: string } = {}) {\n  const [activeId, setActiveId] = React.useState<string>()\n  React.useEffect(() => {\n    if (typeof IntersectionObserver === 'undefined') return\n    const headings = ids.map((id) => document.getElementById(id)).filter((value): value is HTMLElement => Boolean(value))\n    const observer = new IntersectionObserver((entries) => {\n      const visible = entries.filter((entry) => entry.isIntersecting).sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top)\n      if (visible[0]?.target.id) setActiveId(visible[0].target.id)\n    }, { rootMargin: options.rootMargin ?? '0px 0px -70% 0px' })\n    headings.forEach((heading) => observer.observe(heading))\n    return () => observer.disconnect()\n  }, [ids.join('|'), options.rootMargin])\n  return activeId\n}\n\nconst TableOfContents = React.forwardRef<HTMLElement, TableOfContentsProps>(({ items, activeId, onActiveIdChange, sticky = true, className, ...props }, ref) => {\n  const observedId = useHeadingObserver(items.map((item) => item.id))\n  const current = activeId ?? observedId\n  React.useEffect(() => { if (observedId) onActiveIdChange?.(observedId) }, [observedId, onActiveIdChange])\n  if (items.length === 0) return null\n  return <nav {...props} ref={ref} aria-label={props['aria-label'] ?? 'Table of contents'} className={classNames('dsx-table-of-contents', className)} data-sticky={sticky ? 'true' : undefined}><ol>{items.map((item) => <li className=\"dsx-table-of-contents__item\" key={item.id} data-level={item.level ?? 2}><a className=\"dsx-table-of-contents__link\" href={`#${item.id}`} aria-current={current === item.id ? 'location' : undefined} onClick={(event) => { onActiveIdChange?.(item.id); if (!matchMedia('(prefers-reduced-motion: reduce)').matches) { event.preventDefault(); document.getElementById(item.id)?.scrollIntoView({ behavior: 'smooth' }); history.replaceState(null, '', `#${item.id}`) } }}>{item.title}</a></li>)}</ol></nav>\n})\nTableOfContents.displayName = 'TableOfContents'\n\nexport { TableOfContents, extractTableOfContentsHeadings, useHeadingObserver }\nexport type { TableOfContentsItem, TableOfContentsProps } from './tableOfContents.props'\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,YAAuB;AACvB,wBAAuB;AA8ByR;AA1BhT,SAAS,+BAA+B,MAAuE;AAC7G,SAAO,MAAM,KAAK,KAAK,iBAA8B,sBAAsB,CAAC,EAAE,IAAI,CAAC,aAAa;AAAA,IAC9F,IAAI,QAAQ;AAAA,IAAI,OAAO,QAAQ,aAAa,KAAK,KAAK;AAAA,IAAI,OAAO,OAAO,QAAQ,QAAQ,MAAM,CAAC,CAAC;AAAA,EAClG,EAAE;AACJ;AAEA,SAAS,mBAAmB,KAAe,UAAmC,CAAC,GAAG;AAChF,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAiB;AACvD,QAAM,UAAU,MAAM;AACpB,QAAI,OAAO,yBAAyB,YAAa;AACjD,UAAM,WAAW,IAAI,IAAI,CAAC,OAAO,SAAS,eAAe,EAAE,CAAC,EAAE,OAAO,CAAC,UAAgC,QAAQ,KAAK,CAAC;AACpH,UAAM,WAAW,IAAI,qBAAqB,CAAC,YAAY;AACrD,YAAM,UAAU,QAAQ,OAAO,CAAC,UAAU,MAAM,cAAc,EAAE,KAAK,CAAC,GAAG,MAAM,EAAE,mBAAmB,MAAM,EAAE,mBAAmB,GAAG;AAClI,UAAI,QAAQ,CAAC,GAAG,OAAO,GAAI,aAAY,QAAQ,CAAC,EAAE,OAAO,EAAE;AAAA,IAC7D,GAAG,EAAE,YAAY,QAAQ,cAAc,mBAAmB,CAAC;AAC3D,aAAS,QAAQ,CAAC,YAAY,SAAS,QAAQ,OAAO,CAAC;AACvD,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,IAAI,KAAK,GAAG,GAAG,QAAQ,UAAU,CAAC;AACtC,SAAO;AACT;AAEA,MAAM,kBAAkB,MAAM,WAA8C,CAAC,EAAE,OAAO,UAAU,kBAAkB,SAAS,MAAM,WAAW,GAAG,MAAM,GAAG,QAAQ;AAC9J,QAAM,aAAa,mBAAmB,MAAM,IAAI,CAAC,SAAS,KAAK,EAAE,CAAC;AAClE,QAAM,UAAU,YAAY;AAC5B,QAAM,UAAU,MAAM;AAAE,QAAI,WAAY,oBAAmB,UAAU;AAAA,EAAE,GAAG,CAAC,YAAY,gBAAgB,CAAC;AACxG,MAAI,MAAM,WAAW,EAAG,QAAO;AAC/B,SAAO,4CAAC,SAAK,GAAG,OAAO,KAAU,cAAY,MAAM,YAAY,KAAK,qBAAqB,eAAW,kBAAAA,SAAW,yBAAyB,SAAS,GAAG,eAAa,SAAS,SAAS,QAAW,sDAAC,QAAI,gBAAM,IAAI,CAAC,SAAS,4CAAC,QAAG,WAAU,+BAA4C,cAAY,KAAK,SAAS,GAAG,sDAAC,OAAE,WAAU,+BAA8B,MAAM,IAAI,KAAK,EAAE,IAAI,gBAAc,YAAY,KAAK,KAAK,aAAa,QAAW,SAAS,CAAC,UAAU;AAAE,uBAAmB,KAAK,EAAE;AAAG,QAAI,CAAC,WAAW,kCAAkC,EAAE,SAAS;AAAE,YAAM,eAAe;AAAG,eAAS,eAAe,KAAK,EAAE,GAAG,eAAe,EAAE,UAAU,SAAS,CAAC;AAAG,cAAQ,aAAa,MAAM,IAAI,IAAI,KAAK,EAAE,EAAE;AAAA,IAAE;AAAA,EAAE,GAAI,eAAK,OAAM,KAArb,KAAK,EAAob,CAAK,GAAE,GAAK;AAC/sB,CAAC;AACD,gBAAgB,cAAc;",
   "names": ["classNames"]
 }

package/dist/components/tableOfContents/TableOfContents.d.cts

@@ -1,15 +1,5 @@
 import * as React from 'react';
-type TableOfContentsItem = {
-    id: string;
-    title: React.ReactNode;
-    level?: number;
-};
-interface TableOfContentsProps extends React.ComponentPropsWithoutRef<'nav'> {
-    items: TableOfContentsItem[];
-    activeId?: string;
-    onActiveIdChange?: (id: string) => void;
-    sticky?: boolean;
-}
+import type { TableOfContentsProps } from './tableOfContents.props.cjs';
 declare function extractTableOfContentsHeadings(root: ParentNode): Array<{
     id: string;
     title: string;
@@ -20,5 +10,5 @@ declare function useHeadingObserver(ids: string[], options?: {
 }): string | undefined;
 declare const TableOfContents: React.ForwardRefExoticComponent<TableOfContentsProps & React.RefAttributes<HTMLElement>>;
 export { TableOfContents, extractTableOfContentsHeadings, useHeadingObserver };
-export type { TableOfContentsItem, TableOfContentsProps };
+export type { TableOfContentsItem, TableOfContentsProps } from './tableOfContents.props.cjs';
 //# sourceMappingURL=TableOfContents.d.cts.map