@namroodinc/liquid-editorial 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,21 @@
+import { type HTMLAttributes } from "react";
+export type SkeletonShape = "text" | "heading" | "block" | "circle";
+export interface SkeletonProps extends HTMLAttributes<HTMLSpanElement> {
+    shape?: SkeletonShape;
+    /** Any CSS length or percentage. Defaults to filling its container. */
+    width?: string;
+    /** Only for `circle`, where width and height are the same value. */
+    size?: string;
+}
+/**
+ * A placeholder with the shape of the thing that is loading. Never a spinner
+ * over a blank panel — the layout must not move when the content arrives.
+ */
+export declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonProps & import("react").RefAttributes<HTMLSpanElement>>;
+export interface SkeletonTextProps extends HTMLAttributes<HTMLDivElement> {
+    /** Number of lines; the last one renders short. */
+    lines?: number;
+}
+/** A paragraph-shaped placeholder. Announced once, as busy, to screen readers. */
+export declare const SkeletonText: import("react").ForwardRefExoticComponent<SkeletonTextProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEpE,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,eAAe,CAAC;IACpE,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,2GAkBnB,CAAC;AAEH,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,kFAAkF;AAClF,eAAO,MAAM,YAAY,8GAoBxB,CAAC"}

package/dist/components/Skeleton/index.js

@@ -0,0 +1,31 @@
+import { forwardRef as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/Skeleton/index.tsx
+var n = e(function({ shape: e = "text", width: n, size: r, className: i, style: a, ...o }, s) {
+	return /* @__PURE__ */ t("span", {
+		ref: s,
+		"aria-hidden": "true",
+		"data-shape": e,
+		className: ["ds-skeleton", i].filter(Boolean).join(" "),
+		style: {
+			inlineSize: e === "circle" ? r : n ?? "100%",
+			blockSize: e === "circle" ? r : void 0,
+			...a
+		},
+		...o
+	});
+}), r = e(function({ lines: e = 3, className: r, ...i }, a) {
+	return /* @__PURE__ */ t("div", {
+		ref: a,
+		role: "status",
+		"aria-busy": "true",
+		"aria-label": "Loading",
+		className: ["ds-skeleton-lines", r].filter(Boolean).join(" "),
+		...i,
+		children: Array.from({ length: e }, (e, r) => /* @__PURE__ */ t(n, { style: { animationDelay: `calc(var(--skeleton-stagger) * ${r})` } }, r))
+	});
+});
+//#endregion
+export { n as Skeleton, r as SkeletonText };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Skeleton","forwardRef","rest","shape","className","size","width","style","SkeletonText","lines","i"],"sources":["../../../src/components/Skeleton/index.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport \"./style.css\";\n\nexport type SkeletonShape = \"text\" | \"heading\" | \"block\" | \"circle\";\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLSpanElement> {\n  shape?: SkeletonShape;\n  /** Any CSS length or percentage. Defaults to filling its container. */\n  width?: string;\n  /** Only for `circle`, where width and height are the same value. */\n  size?: string;\n}\n\n/**\n * A placeholder with the shape of the thing that is loading. Never a spinner\n * over a blank panel — the layout must not move when the content arrives.\n */\nexport const Skeleton = forwardRef<HTMLSpanElement, SkeletonProps>(function Skeleton(\n  { shape = \"text\", width, size, className, style, ...rest },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      aria-hidden=\"true\"\n      data-shape={shape}\n      className={[\"ds-skeleton\", className].filter(Boolean).join(\" \")}\n      style={{\n        inlineSize: shape === \"circle\" ? size : (width ?? \"100%\"),\n        blockSize: shape === \"circle\" ? size : undefined,\n        ...style,\n      }}\n      {...rest}\n    />\n  );\n});\n\nexport interface SkeletonTextProps extends HTMLAttributes<HTMLDivElement> {\n  /** Number of lines; the last one renders short. */\n  lines?: number;\n}\n\n/** A paragraph-shaped placeholder. Announced once, as busy, to screen readers. */\nexport const SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(\n  function SkeletonText({ lines = 3, className, ...rest }, ref) {\n    return (\n      <div\n        ref={ref}\n        role=\"status\"\n        aria-busy=\"true\"\n        aria-label=\"Loading\"\n        className={[\"ds-skeleton-lines\", className].filter(Boolean).join(\" \")}\n        {...rest}\n      >\n        {Array.from({ length: lines }, (_, i) => (\n          <Skeleton\n            key={i}\n            style={{ animationDelay: `calc(var(--skeleton-stagger) * ${i})` }}\n          />\n        ))}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;AAiBA,IAAaA,IAAWC,EAA2C,SACjE,EAAE,WAAQ,QAAQ,UAAO,SAAM,cAAW,UAAO,GAAGC,KACpD,GACA;CACA,OACE,kBAAC,QAAD;EACO;EACL,eAAY;EACZ,cAAYC;EACZ,WAAW,CAAC,eAAeC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAC9D,OAAO;GACL,YAAYD,MAAU,WAAWE,IAAQC,KAAS;GAClD,WAAWH,MAAU,WAAWE,IAAO,KAAA;GACvC,GAAGE;EACL;EACA,GAAIL;CACL,CAAA;AAEL,CAAC,GAQYM,IAAeP,EAC1B,SAAsB,EAAE,WAAQ,GAAG,cAAW,GAAGC,KAAQ,GAAK;CAC5D,OACE,kBAAC,OAAD;EACO;EACL,MAAK;EACL,aAAU;EACV,cAAW;EACX,WAAW,CAAC,qBAAqBE,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EACpE,GAAIF;EAEH,UAAA,MAAM,KAAK,EAAE,QAAQO,EAAM,IAAI,GAAG,MACjC,kBAACT,GAAD,EAEE,OAAO,EAAE,gBAAgB,kCAAkCU,EAAE,GAAG,EACjE,GAFMA,CAEN,CACF;CACE,CAAA;AAET,CACF"}

package/dist/components/Skeleton/style.css

@@ -0,0 +1,55 @@
+@layer components {
+  .ds-skeleton {
+    display: block;
+    background: color-mix(in srgb, var(--color-text) 9%, var(--color-surface));
+    border-radius: var(--field-radius);
+    animation: ds-skeleton-pulse var(--skeleton-duration) var(--skeleton-easing) infinite;
+  }
+
+  .ds-skeleton[data-shape="text"] {
+    block-size: var(--space-4);
+  }
+
+  .ds-skeleton[data-shape="heading"] {
+    block-size: var(--space-6);
+    border-radius: var(--radius-sm);
+  }
+
+  .ds-skeleton[data-shape="block"] {
+    block-size: var(--space-12);
+    border-radius: var(--radius-md);
+  }
+
+  .ds-skeleton[data-shape="circle"] {
+    border-radius: var(--radius-pill);
+    aspect-ratio: 1;
+  }
+
+  .ds-skeleton-lines {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+  }
+
+  /* Last line is short, the way real text ends. */
+  .ds-skeleton-lines > .ds-skeleton:last-child:not(:only-child) {
+    inline-size: 62%;
+  }
+
+  @keyframes ds-skeleton-pulse {
+    0%,
+    100% {
+      opacity: 100%;
+    }
+
+    50% {
+      opacity: 45%;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ds-skeleton {
+      animation: none;
+    }
+  }
+}

package/dist/components/Slider/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(` `)}function r(e,t,n){return n===t?0:(e-t)/(n-t)*100}var i=(0,e.forwardRef)(function({value:i,defaultValue:a=0,onValueChange:o,min:s=0,max:c=100,step:l=1,hasValueLabel:u=!0,suffix:d,isDisabled:f=!1,className:p,disabled:m,...h},g){let[_,v]=(0,e.useState)(a),y=i??_;return(0,t.jsxs)(`div`,{className:n(`ds-slider`,p),"data-disabled":f||m||void 0,children:[(0,t.jsxs)(`div`,{className:`ds-slider__track`,"data-thumbs":`1`,"data-disabled":f||m||void 0,"data-at-min":y<=s||void 0,"data-at-max":y>=c||void 0,style:{"--slider-from":`0%`,"--slider-to":`${r(y,s,c)}%`},children:[(0,t.jsx)(`span`,{className:`ds-slider__rail`}),(0,t.jsx)(`span`,{className:`ds-slider__fill`}),(0,t.jsx)(`input`,{ref:g,type:`range`,className:`ds-slider__input`,min:s,max:c,step:l,value:y,disabled:f||m,onChange:e=>{let t=Number(e.target.value);i===void 0&&v(t),o?.(t)},...h})]}),u&&(0,t.jsxs)(`output`,{className:`ds-slider__value`,children:[y,d]})]})});function a({value:i,defaultValue:a={min:20,max:80},onValueChange:o,min:s=0,max:c=100,step:l=1,hasValueLabel:u=!0,suffix:d,isDisabled:f=!1,minLabel:p=`Minimum`,maxLabel:m=`Maximum`,className:h}){let[g,_]=(0,e.useState)(a),v=i??g,y=e=>{i===void 0&&_(e),o?.(e)};return(0,t.jsxs)(`div`,{className:n(`ds-slider`,h),"data-disabled":f||void 0,children:[(0,t.jsxs)(`div`,{className:`ds-slider__track`,"data-thumbs":`2`,"data-disabled":f||void 0,"data-at-min":v.min<=s||void 0,"data-at-max":v.max>=c||void 0,style:{"--slider-from":`${r(v.min,s,c)}%`,"--slider-to":`${r(v.max,s,c)}%`},children:[(0,t.jsx)(`span`,{className:`ds-slider__rail`}),(0,t.jsx)(`span`,{className:`ds-slider__fill`}),(0,t.jsx)(`input`,{type:`range`,"aria-label":p,className:`ds-slider__input`,min:s,max:c,step:l,value:v.min,disabled:f,onChange:e=>y({...v,min:Math.min(Number(e.target.value),v.max-l)})}),(0,t.jsx)(`input`,{type:`range`,"aria-label":m,className:`ds-slider__input`,min:s,max:c,step:l,value:v.max,disabled:f,onChange:e=>y({...v,max:Math.max(Number(e.target.value),v.min+l)})})]}),u&&(0,t.jsxs)(`output`,{className:`ds-slider__value`,children:[v.min,d,` – `,v.max,d]})]})}exports.RangeSlider=a,exports.Slider=i;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["forwardRef","useState","react","react_jsx_runtime","cx","parts","percent","max","min","value","Slider","rest","internal","setInternal","defaultValue","current","className","isDisabled","disabled","next","event","onValueChange","hasValueLabel","suffix","RangeSlider","commit","minLabel","step","maxLabel"],"sources":["../../../src/components/Slider/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useState,\n  type InputHTMLAttributes,\n} from \"react\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nfunction percent(value: number, min: number, max: number) {\n  if (max === min) return 0;\n  return ((value - min) / (max - min)) * 100;\n}\n\nexport interface SliderProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"value\" | \"defaultValue\" | \"onChange\"> {\n  value?: number;\n  defaultValue?: number;\n  onValueChange?: (value: number) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  /** Print the current value, in the system's mono, beside the track. */\n  hasValueLabel?: boolean;\n  /** Appended to the printed value — \"%\", \"px\", \"s\". */\n  suffix?: string;\n  isDisabled?: boolean;\n}\n\n/** One value on a continuous scale. The filled part of the track is the value. */\nexport const Slider = forwardRef<HTMLInputElement, SliderProps>(function Slider(\n  {\n    value,\n    defaultValue = 0,\n    onValueChange,\n    min = 0,\n    max = 100,\n    step = 1,\n    hasValueLabel = true,\n    suffix,\n    isDisabled = false,\n    className,\n    disabled,\n    ...rest\n  },\n  ref,\n) {\n  const [internal, setInternal] = useState(defaultValue);\n  const current = value ?? internal;\n\n  return (\n    <div className={cx(\"ds-slider\", className)} data-disabled={isDisabled || disabled || undefined}>\n      <div\n        className=\"ds-slider__track\"\n        data-thumbs=\"1\"\n        data-disabled={isDisabled || disabled || undefined}\n        data-at-min={current <= min || undefined}\n        data-at-max={current >= max || undefined}\n        style={{\n          [\"--slider-from\" as string]: \"0%\",\n          [\"--slider-to\" as string]: `${percent(current, min, max)}%`,\n        }}\n      >\n        <span className=\"ds-slider__rail\" />\n        <span className=\"ds-slider__fill\" />\n        <input\n          ref={ref}\n          type=\"range\"\n          className=\"ds-slider__input\"\n          min={min}\n          max={max}\n          step={step}\n          value={current}\n          disabled={isDisabled || disabled}\n          onChange={(event) => {\n            const next = Number(event.target.value);\n            if (value === undefined) setInternal(next);\n            onValueChange?.(next);\n          }}\n          {...rest}\n        />\n      </div>\n      {hasValueLabel && (\n        <output className=\"ds-slider__value\">\n          {current}\n          {suffix}\n        </output>\n      )}\n    </div>\n  );\n});\n\nexport interface RangeSliderValue {\n  min: number;\n  max: number;\n}\n\nexport interface RangeSliderProps {\n  value?: RangeSliderValue;\n  defaultValue?: RangeSliderValue;\n  onValueChange?: (value: RangeSliderValue) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  hasValueLabel?: boolean;\n  suffix?: string;\n  isDisabled?: boolean;\n  minLabel?: string;\n  maxLabel?: string;\n  className?: string;\n}\n\n/**\n * A span on a scale — two thumbs on one track. The thumbs cannot cross; each\n * one stops a `step` short of the other.\n */\nexport function RangeSlider({\n  value,\n  defaultValue = { min: 20, max: 80 },\n  onValueChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  hasValueLabel = true,\n  suffix,\n  isDisabled = false,\n  minLabel = \"Minimum\",\n  maxLabel = \"Maximum\",\n  className,\n}: RangeSliderProps) {\n  const [internal, setInternal] = useState<RangeSliderValue>(defaultValue);\n  const current = value ?? internal;\n\n  const commit = (next: RangeSliderValue) => {\n    if (value === undefined) setInternal(next);\n    onValueChange?.(next);\n  };\n\n  return (\n    <div className={cx(\"ds-slider\", className)} data-disabled={isDisabled || undefined}>\n      <div\n        className=\"ds-slider__track\"\n        data-thumbs=\"2\"\n        data-disabled={isDisabled || undefined}\n        data-at-min={current.min <= min || undefined}\n        data-at-max={current.max >= max || undefined}\n        style={{\n          [\"--slider-from\" as string]: `${percent(current.min, min, max)}%`,\n          [\"--slider-to\" as string]: `${percent(current.max, min, max)}%`,\n        }}\n      >\n        <span className=\"ds-slider__rail\" />\n        <span className=\"ds-slider__fill\" />\n        <input\n          type=\"range\"\n          aria-label={minLabel}\n          className=\"ds-slider__input\"\n          min={min}\n          max={max}\n          step={step}\n          value={current.min}\n          disabled={isDisabled}\n          onChange={(event) =>\n            commit({ ...current, min: Math.min(Number(event.target.value), current.max - step) })\n          }\n        />\n        <input\n          type=\"range\"\n          aria-label={maxLabel}\n          className=\"ds-slider__input\"\n          min={min}\n          max={max}\n          step={step}\n          value={current.max}\n          disabled={isDisabled}\n          onChange={(event) =>\n            commit({ ...current, max: Math.max(Number(event.target.value), current.min + step) })\n          }\n        />\n      </div>\n      {hasValueLabel && (\n        <output className=\"ds-slider__value\">\n          {current.min}\n          {suffix} – {current.max}\n          {suffix}\n        </output>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,40 @@
+import { type InputHTMLAttributes } from "react";
+export interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange"> {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Print the current value, in the system's mono, beside the track. */
+    hasValueLabel?: boolean;
+    /** Appended to the printed value — "%", "px", "s". */
+    suffix?: string;
+    isDisabled?: boolean;
+}
+/** One value on a continuous scale. The filled part of the track is the value. */
+export declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface RangeSliderValue {
+    min: number;
+    max: number;
+}
+export interface RangeSliderProps {
+    value?: RangeSliderValue;
+    defaultValue?: RangeSliderValue;
+    onValueChange?: (value: RangeSliderValue) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    hasValueLabel?: boolean;
+    suffix?: string;
+    isDisabled?: boolean;
+    minLabel?: string;
+    maxLabel?: string;
+    className?: string;
+}
+/**
+ * A span on a scale — two thumbs on one track. The thumbs cannot cross; each
+ * one stops a `step` short of the other.
+ */
+export declare function RangeSlider({ value, defaultValue, onValueChange, min, max, step, hasValueLabel, suffix, isDisabled, minLabel, maxLabel, className, }: RangeSliderProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Slider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,mBAAmB,EACzB,MAAM,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AAWrB,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC;IACnG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,kFAAkF;AAClF,eAAO,MAAM,MAAM,0GA4DjB,CAAC;AAEH,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,YAAmC,EACnC,aAAa,EACb,GAAO,EACP,GAAS,EACT,IAAQ,EACR,aAAoB,EACpB,MAAM,EACN,UAAkB,EAClB,QAAoB,EACpB,QAAoB,EACpB,SAAS,GACV,EAAE,gBAAgB,+BA4DlB"}

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

@@ -0,0 +1,40 @@
+import { type InputHTMLAttributes } from "react";
+export interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange"> {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Print the current value, in the system's mono, beside the track. */
+    hasValueLabel?: boolean;
+    /** Appended to the printed value — "%", "px", "s". */
+    suffix?: string;
+    isDisabled?: boolean;
+}
+/** One value on a continuous scale. The filled part of the track is the value. */
+export declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface RangeSliderValue {
+    min: number;
+    max: number;
+}
+export interface RangeSliderProps {
+    value?: RangeSliderValue;
+    defaultValue?: RangeSliderValue;
+    onValueChange?: (value: RangeSliderValue) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    hasValueLabel?: boolean;
+    suffix?: string;
+    isDisabled?: boolean;
+    minLabel?: string;
+    maxLabel?: string;
+    className?: string;
+}
+/**
+ * A span on a scale — two thumbs on one track. The thumbs cannot cross; each
+ * one stops a `step` short of the other.
+ */
+export declare function RangeSlider({ value, defaultValue, onValueChange, min, max, step, hasValueLabel, suffix, isDisabled, minLabel, maxLabel, className, }: RangeSliderProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,mBAAmB,EACzB,MAAM,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AAWrB,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC;IACnG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,kFAAkF;AAClF,eAAO,MAAM,MAAM,0GA4DjB,CAAC;AAEH,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,YAAmC,EACnC,aAAa,EACb,GAAO,EACP,GAAS,EACT,IAAQ,EACR,aAAoB,EACpB,MAAM,EACN,UAAkB,EAClB,QAAoB,EACpB,QAAoB,EACpB,SAAS,GACV,EAAE,gBAAgB,+BA4DlB"}

package/dist/components/Slider/index.js

@@ -0,0 +1,117 @@
+import { forwardRef as e, useState as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/Slider/index.tsx
+function i(...e) {
+	return e.filter(Boolean).join(" ");
+}
+function a(e, t, n) {
+	return n === t ? 0 : (e - t) / (n - t) * 100;
+}
+var o = e(function({ value: e, defaultValue: o = 0, onValueChange: s, min: c = 0, max: l = 100, step: u = 1, hasValueLabel: d = !0, suffix: f, isDisabled: p = !1, className: m, disabled: h, ...g }, _) {
+	let [v, y] = t(o), b = e ?? v;
+	return /* @__PURE__ */ r("div", {
+		className: i("ds-slider", m),
+		"data-disabled": p || h || void 0,
+		children: [/* @__PURE__ */ r("div", {
+			className: "ds-slider__track",
+			"data-thumbs": "1",
+			"data-disabled": p || h || void 0,
+			"data-at-min": b <= c || void 0,
+			"data-at-max": b >= l || void 0,
+			style: {
+				"--slider-from": "0%",
+				"--slider-to": `${a(b, c, l)}%`
+			},
+			children: [
+				/* @__PURE__ */ n("span", { className: "ds-slider__rail" }),
+				/* @__PURE__ */ n("span", { className: "ds-slider__fill" }),
+				/* @__PURE__ */ n("input", {
+					ref: _,
+					type: "range",
+					className: "ds-slider__input",
+					min: c,
+					max: l,
+					step: u,
+					value: b,
+					disabled: p || h,
+					onChange: (t) => {
+						let n = Number(t.target.value);
+						e === void 0 && y(n), s?.(n);
+					},
+					...g
+				})
+			]
+		}), d && /* @__PURE__ */ r("output", {
+			className: "ds-slider__value",
+			children: [b, f]
+		})]
+	});
+});
+function s({ value: e, defaultValue: o = {
+	min: 20,
+	max: 80
+}, onValueChange: s, min: c = 0, max: l = 100, step: u = 1, hasValueLabel: d = !0, suffix: f, isDisabled: p = !1, minLabel: m = "Minimum", maxLabel: h = "Maximum", className: g }) {
+	let [_, v] = t(o), y = e ?? _, b = (t) => {
+		e === void 0 && v(t), s?.(t);
+	};
+	return /* @__PURE__ */ r("div", {
+		className: i("ds-slider", g),
+		"data-disabled": p || void 0,
+		children: [/* @__PURE__ */ r("div", {
+			className: "ds-slider__track",
+			"data-thumbs": "2",
+			"data-disabled": p || void 0,
+			"data-at-min": y.min <= c || void 0,
+			"data-at-max": y.max >= l || void 0,
+			style: {
+				"--slider-from": `${a(y.min, c, l)}%`,
+				"--slider-to": `${a(y.max, c, l)}%`
+			},
+			children: [
+				/* @__PURE__ */ n("span", { className: "ds-slider__rail" }),
+				/* @__PURE__ */ n("span", { className: "ds-slider__fill" }),
+				/* @__PURE__ */ n("input", {
+					type: "range",
+					"aria-label": m,
+					className: "ds-slider__input",
+					min: c,
+					max: l,
+					step: u,
+					value: y.min,
+					disabled: p,
+					onChange: (e) => b({
+						...y,
+						min: Math.min(Number(e.target.value), y.max - u)
+					})
+				}),
+				/* @__PURE__ */ n("input", {
+					type: "range",
+					"aria-label": h,
+					className: "ds-slider__input",
+					min: c,
+					max: l,
+					step: u,
+					value: y.max,
+					disabled: p,
+					onChange: (e) => b({
+						...y,
+						max: Math.max(Number(e.target.value), y.min + u)
+					})
+				})
+			]
+		}), d && /* @__PURE__ */ r("output", {
+			className: "ds-slider__value",
+			children: [
+				y.min,
+				f,
+				" – ",
+				y.max,
+				f
+			]
+		})]
+	});
+}
+//#endregion
+export { s as RangeSlider, o as Slider };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["cx","parts","percent","max","min","value","Slider","forwardRef","rest","internal","setInternal","useState","defaultValue","current","className","isDisabled","disabled","next","event","onValueChange","hasValueLabel","suffix","RangeSlider","commit","minLabel","step","maxLabel"],"sources":["../../../src/components/Slider/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useState,\n  type InputHTMLAttributes,\n} from \"react\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nfunction percent(value: number, min: number, max: number) {\n  if (max === min) return 0;\n  return ((value - min) / (max - min)) * 100;\n}\n\nexport interface SliderProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"value\" | \"defaultValue\" | \"onChange\"> {\n  value?: number;\n  defaultValue?: number;\n  onValueChange?: (value: number) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  /** Print the current value, in the system's mono, beside the track. */\n  hasValueLabel?: boolean;\n  /** Appended to the printed value — \"%\", \"px\", \"s\". */\n  suffix?: string;\n  isDisabled?: boolean;\n}\n\n/** One value on a continuous scale. The filled part of the track is the value. */\nexport const Slider = forwardRef<HTMLInputElement, SliderProps>(function Slider(\n  {\n    value,\n    defaultValue = 0,\n    onValueChange,\n    min = 0,\n    max = 100,\n    step = 1,\n    hasValueLabel = true,\n    suffix,\n    isDisabled = false,\n    className,\n    disabled,\n    ...rest\n  },\n  ref,\n) {\n  const [internal, setInternal] = useState(defaultValue);\n  const current = value ?? internal;\n\n  return (\n    <div className={cx(\"ds-slider\", className)} data-disabled={isDisabled || disabled || undefined}>\n      <div\n        className=\"ds-slider__track\"\n        data-thumbs=\"1\"\n        data-disabled={isDisabled || disabled || undefined}\n        data-at-min={current <= min || undefined}\n        data-at-max={current >= max || undefined}\n        style={{\n          [\"--slider-from\" as string]: \"0%\",\n          [\"--slider-to\" as string]: `${percent(current, min, max)}%`,\n        }}\n      >\n        <span className=\"ds-slider__rail\" />\n        <span className=\"ds-slider__fill\" />\n        <input\n          ref={ref}\n          type=\"range\"\n          className=\"ds-slider__input\"\n          min={min}\n          max={max}\n          step={step}\n          value={current}\n          disabled={isDisabled || disabled}\n          onChange={(event) => {\n            const next = Number(event.target.value);\n            if (value === undefined) setInternal(next);\n            onValueChange?.(next);\n          }}\n          {...rest}\n        />\n      </div>\n      {hasValueLabel && (\n        <output className=\"ds-slider__value\">\n          {current}\n          {suffix}\n        </output>\n      )}\n    </div>\n  );\n});\n\nexport interface RangeSliderValue {\n  min: number;\n  max: number;\n}\n\nexport interface RangeSliderProps {\n  value?: RangeSliderValue;\n  defaultValue?: RangeSliderValue;\n  onValueChange?: (value: RangeSliderValue) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  hasValueLabel?: boolean;\n  suffix?: string;\n  isDisabled?: boolean;\n  minLabel?: string;\n  maxLabel?: string;\n  className?: string;\n}\n\n/**\n * A span on a scale — two thumbs on one track. The thumbs cannot cross; each\n * one stops a `step` short of the other.\n */\nexport function RangeSlider({\n  value,\n  defaultValue = { min: 20, max: 80 },\n  onValueChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  hasValueLabel = true,\n  suffix,\n  isDisabled = false,\n  minLabel = \"Minimum\",\n  maxLabel = \"Maximum\",\n  className,\n}: RangeSliderProps) {\n  const [internal, setInternal] = useState<RangeSliderValue>(defaultValue);\n  const current = value ?? internal;\n\n  const commit = (next: RangeSliderValue) => {\n    if (value === undefined) setInternal(next);\n    onValueChange?.(next);\n  };\n\n  return (\n    <div className={cx(\"ds-slider\", className)} data-disabled={isDisabled || undefined}>\n      <div\n        className=\"ds-slider__track\"\n        data-thumbs=\"2\"\n        data-disabled={isDisabled || undefined}\n        data-at-min={current.min <= min || undefined}\n        data-at-max={current.max >= max || undefined}\n        style={{\n          [\"--slider-from\" as string]: `${percent(current.min, min, max)}%`,\n          [\"--slider-to\" as string]: `${percent(current.max, min, max)}%`,\n        }}\n      >\n        <span className=\"ds-slider__rail\" />\n        <span className=\"ds-slider__fill\" />\n        <input\n          type=\"range\"\n          aria-label={minLabel}\n          className=\"ds-slider__input\"\n          min={min}\n          max={max}\n          step={step}\n          value={current.min}\n          disabled={isDisabled}\n          onChange={(event) =>\n            commit({ ...current, min: Math.min(Number(event.target.value), current.max - step) })\n          }\n        />\n        <input\n          type=\"range\"\n          aria-label={maxLabel}\n          className=\"ds-slider__input\"\n          min={min}\n          max={max}\n          step={step}\n          value={current.max}\n          disabled={isDisabled}\n          onChange={(event) =>\n            commit({ ...current, max: Math.max(Number(event.target.value), current.min + step) })\n          }\n        />\n      </div>\n      {hasValueLabel && (\n        <output className=\"ds-slider__value\">\n          {current.min}\n          {suffix} – {current.max}\n          {suffix}\n        </output>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/Slider/style.css

@@ -0,0 +1,156 @@
+@layer components {
+  .ds-slider {
+    display: flex;
+    align-items: center;
+    gap: var(--space-4);
+    inline-size: 100%;
+  }
+
+  .ds-slider__value {
+    flex: none;
+    min-inline-size: 4.5rem;
+    color: var(--color-text-muted);
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+    text-align: end;
+  }
+
+  /* One painted track, one or two thumbs. The rail spans the whole width; the
+   * fill lives inside the thumb travel, so a thumb always sits on its end of
+   * the fill and the left end reaches the edge. */
+  .ds-slider__track {
+    position: relative;
+    flex: 1;
+    min-inline-size: 0;
+    block-size: var(--slider-thumb-size);
+  }
+
+  .ds-slider__rail,
+  .ds-slider__fill::before {
+    position: absolute;
+    inset-block-start: calc((var(--slider-thumb-size) - var(--slider-track-height)) / 2);
+    block-size: var(--slider-track-height);
+    border-radius: var(--radius-pill);
+  }
+
+  .ds-slider__rail {
+    inset-inline: 0;
+    background: var(--field-rest);
+  }
+
+  .ds-slider__fill {
+    position: absolute;
+    inset-block: 0;
+    inset-inline: calc(var(--slider-thumb-size) / 2);
+  }
+
+  .ds-slider__fill::before {
+    content: "";
+    inset-inline-start: var(--slider-from, 0%);
+    inset-inline-end: calc(100% - var(--slider-to, 0%));
+    background: var(--color-primary);
+  }
+
+  /* At either endpoint the paint reaches the rail edge; between endpoints it
+   * terminates under the centre of the thumb. */
+  .ds-slider__track[data-thumbs="1"] .ds-slider__fill::before,
+  .ds-slider__track[data-at-min] .ds-slider__fill::before {
+    inset-inline-start: calc(var(--slider-thumb-size) / -2);
+  }
+
+  .ds-slider__track[data-at-max] .ds-slider__fill::before {
+    inset-inline-end: calc(var(--slider-thumb-size) / -2);
+  }
+
+  .ds-slider__input {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: var(--slider-thumb-size);
+    margin: 0;
+    appearance: none;
+    background: transparent;
+    cursor: pointer;
+  }
+
+  /* Stacked inputs on a range: only the thumbs take the pointer, so either
+   * end can always be grabbed. */
+  .ds-slider__track[data-thumbs="2"] .ds-slider__input {
+    pointer-events: none;
+  }
+
+  .ds-slider__input::-webkit-slider-runnable-track {
+    block-size: var(--slider-thumb-size);
+    background: transparent;
+  }
+
+  .ds-slider__input::-moz-range-track {
+    block-size: var(--slider-thumb-size);
+    background: transparent;
+  }
+
+  .ds-slider__input::-webkit-slider-thumb {
+    appearance: none;
+    inline-size: var(--slider-thumb-size);
+    block-size: var(--slider-thumb-size);
+    margin: 0;
+    border: var(--control-border-width) solid var(--control-border-color);
+    border-radius: var(--radius-pill);
+    background: var(--color-surface);
+    pointer-events: auto;
+    transition: background-color var(--duration-fast) var(--ease-standard);
+  }
+
+  .ds-slider__input::-moz-range-thumb {
+    inline-size: var(--slider-thumb-size);
+    block-size: var(--slider-thumb-size);
+    box-sizing: border-box;
+    border: var(--control-border-width) solid var(--control-border-color);
+    border-radius: var(--radius-pill);
+    background: var(--color-surface);
+    pointer-events: auto;
+  }
+
+  .ds-slider__input:hover:not(:disabled)::-webkit-slider-thumb {
+    background: var(--field-hover);
+  }
+
+  .ds-slider__input:hover:not(:disabled)::-moz-range-thumb {
+    background: var(--field-hover);
+  }
+
+  .ds-slider__input:focus-visible {
+    outline: var(--control-border-width) solid var(--color-focus);
+    outline-offset: 2px;
+    border-radius: var(--radius-pill);
+  }
+
+  /* Disabled reads on the whole track, not just the thumb: the fill drops to a
+   * muted tint and the thumb goes translucent so the fill shows through it. */
+  .ds-slider__track[data-disabled] .ds-slider__rail {
+    background: color-mix(in srgb, var(--color-text) 6%, var(--field-bg));
+  }
+
+  .ds-slider__track[data-disabled] .ds-slider__fill::before {
+    background: color-mix(in srgb, var(--color-primary) 28%, var(--field-rest));
+  }
+
+  .ds-slider__input:disabled {
+    cursor: not-allowed;
+  }
+
+  .ds-slider__input:disabled::-webkit-slider-thumb {
+    border-color: color-mix(in srgb, var(--control-border-color) 45%, transparent);
+    background: color-mix(in srgb, var(--color-surface) 55%, transparent);
+  }
+
+  .ds-slider__input:disabled::-moz-range-thumb {
+    border-color: color-mix(in srgb, var(--control-border-color) 45%, transparent);
+    background: color-mix(in srgb, var(--color-surface) 55%, transparent);
+  }
+
+  .ds-slider[data-disabled] .ds-slider__value {
+    opacity: 55%;
+  }
+
+}

package/dist/components/SortableList/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"),r=require("@dnd-kit/core"),i=require("@dnd-kit/sortable"),a=require("@dnd-kit/utilities"),o=require("@dnd-kit/modifiers");var s=(0,t.forwardRef)(function({items:a,onReorder:s,renderDragOverlay:c,className:l,children:u,...d},f){let p=(0,t.useId)(),[m,h]=(0,t.useState)(null),g=(0,r.useSensors)((0,r.useSensor)(r.PointerSensor,{activationConstraint:{distance:4}}),(0,r.useSensor)(r.KeyboardSensor,{coordinateGetter:i.sortableKeyboardCoordinates})),_=(0,t.useCallback)(e=>{h(String(e.active.id))},[]),v=(0,t.useCallback)(e=>{h(null);let{active:t,over:n}=e;if(!n||t.id===n.id)return;let r=a.indexOf(String(t.id)),o=a.indexOf(String(n.id));r<0||o<0||s?.((0,i.arrayMove)(a,r,o))},[a,s]);return(0,n.jsxs)(r.DndContext,{id:`ds-sortable-list-${p}`,sensors:g,collisionDetection:r.closestCenter,modifiers:[o.restrictToVerticalAxis],onDragStart:_,onDragEnd:v,onDragCancel:()=>h(null),children:[(0,n.jsx)(i.SortableContext,{items:a,strategy:i.verticalListSortingStrategy,children:(0,n.jsx)(`ul`,{ref:f,className:[`ds-sortable-list`,l].filter(Boolean).join(` `),...d,children:u})}),(0,n.jsx)(r.DragOverlay,{children:m?(0,n.jsxs)(`div`,{className:`ds-sortable-item`,"data-overlay":!0,children:[(0,n.jsx)(`span`,{className:`ds-sortable-item__handle`,"aria-hidden":`true`,children:(0,n.jsx)(e.t,{name:`grip-vertical`})}),(0,n.jsx)(`div`,{className:`ds-sortable-item__content`,children:c?.(m)})]}):null})]})}),c=(0,t.forwardRef)(function({id:t,label:r,action:o,className:s,children:c,...l},u){let{attributes:d,listeners:f,setNodeRef:p,transform:m,transition:h,isDragging:g}=(0,i.useSortable)({id:t});return(0,n.jsxs)(`li`,{ref:e=>{p(e),typeof u==`function`?u(e):u&&(u.current=e)},style:{transform:a.CSS.Translate.toString(m),transition:h},className:[`ds-sortable-item`,s].filter(Boolean).join(` `),"data-dragging":g||void 0,...l,children:[(0,n.jsx)(`button`,{type:`button`,className:`ds-sortable-item__handle`,"aria-label":r?`Move ${r}`:`Move item`,...d,...f,children:(0,n.jsx)(e.t,{name:`grip-vertical`})}),(0,n.jsx)(`div`,{className:`ds-sortable-item__content`,children:c}),o&&(0,n.jsx)(`div`,{className:`ds-sortable-item__action`,children:o})]})});exports.SortableList=s,exports.SortableListItem=c;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["forwardRef","useId","useState","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","useCallback","arrayMove","DndContext","closestCenter","restrictToVerticalAxis","SortableContext","verticalListSortingStrategy","DragOverlay","Icon","useSortable","CSS","require_Icon","react","react_jsx_runtime","_dnd_kit_core","_dnd_kit_sortable","_dnd_kit_utilities","_dnd_kit_modifiers","SortableList","rest","dndId","activeId","setActiveId","sensors","handleStart","event","handleEnd","over","active","from","items","to","onReorder","className","renderDragOverlay","SortableListItem","setNodeRef","node","ref","transform","isDragging","label","attributes","listeners","action"],"sources":["../../../src/components/SortableList/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useId,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport {\n  DndContext,\n  DragOverlay,\n  KeyboardSensor,\n  PointerSensor,\n  closestCenter,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type DragStartEvent,\n} from \"@dnd-kit/core\";\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\";\nimport {\n  SortableContext,\n  arrayMove,\n  sortableKeyboardCoordinates,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { Icon } from \"../Icon\";\nimport \"./style.css\";\n\nexport interface SortableListProps extends Omit<HTMLAttributes<HTMLUListElement>, \"onDragEnd\"> {\n  /** Item ids in render order. */\n  items: string[];\n  /** Fired with the whole list in its new order. Apply it to your own state. */\n  onReorder?: (items: string[]) => void;\n  /** Rendered inside the drag overlay while a row is in the air. */\n  renderDragOverlay?: (id: string) => ReactNode;\n  children?: ReactNode;\n}\n\n/**\n * A single vertical list you can re-order — the board's mechanics without the\n * lanes. Each row carries a grip on the left; the list owns dragging only, the\n * data stays yours: react to `onReorder`.\n */\nexport const SortableList = forwardRef<HTMLUListElement, SortableListProps>(\n  function SortableList({ items, onReorder, renderDragOverlay, className, children, ...rest }, ref) {\n    const dndId = useId();\n    const [activeId, setActiveId] = useState<string | null>(null);\n    const sensors = useSensors(\n      useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),\n      useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),\n    );\n\n    const handleStart = useCallback((event: DragStartEvent) => {\n      setActiveId(String(event.active.id));\n    }, []);\n\n    const handleEnd = useCallback(\n      (event: DragEndEvent) => {\n        setActiveId(null);\n        const { active, over } = event;\n        if (!over || active.id === over.id) return;\n        const from = items.indexOf(String(active.id));\n        const to = items.indexOf(String(over.id));\n        if (from < 0 || to < 0) return;\n        onReorder?.(arrayMove(items, from, to));\n      },\n      [items, onReorder],\n    );\n\n    return (\n      <DndContext\n        id={`ds-sortable-list-${dndId}`}\n        sensors={sensors}\n        collisionDetection={closestCenter}\n        modifiers={[restrictToVerticalAxis]}\n        onDragStart={handleStart}\n        onDragEnd={handleEnd}\n        onDragCancel={() => setActiveId(null)}\n      >\n        <SortableContext items={items} strategy={verticalListSortingStrategy}>\n          <ul\n            ref={ref}\n            className={[\"ds-sortable-list\", className].filter(Boolean).join(\" \")}\n            {...rest}\n          >\n            {children}\n          </ul>\n        </SortableContext>\n        <DragOverlay>\n          {activeId ? (\n            <div className=\"ds-sortable-item\" data-overlay>\n              <span className=\"ds-sortable-item__handle\" aria-hidden=\"true\">\n                <Icon name=\"grip-vertical\" />\n              </span>\n              <div className=\"ds-sortable-item__content\">{renderDragOverlay?.(activeId)}</div>\n            </div>\n          ) : null}\n        </DragOverlay>\n      </DndContext>\n    );\n  },\n);\n\nexport interface SortableListItemProps extends HTMLAttributes<HTMLLIElement> {\n  id: string;\n  /** Accessible name announced when the row is picked up. */\n  label?: string;\n  /** A control at the end of the row, e.g. a menu or a delete button. */\n  action?: ReactNode;\n  children?: ReactNode;\n}\n\n/** One row of a `SortableList`. The grip on the left is the only handle. */\nexport const SortableListItem = forwardRef<HTMLLIElement, SortableListItemProps>(\n  function SortableListItem({ id, label, action, className, children, ...rest }, ref) {\n    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n      id,\n    });\n\n    return (\n      <li\n        ref={(node) => {\n          setNodeRef(node);\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        style={{ transform: CSS.Translate.toString(transform), transition }}\n        className={[\"ds-sortable-item\", className].filter(Boolean).join(\" \")}\n        data-dragging={isDragging || undefined}\n        {...rest}\n      >\n        <button\n          type=\"button\"\n          className=\"ds-sortable-item__handle\"\n          aria-label={label ? `Move ${label}` : \"Move item\"}\n          {...attributes}\n          {...listeners}\n        >\n          <Icon name=\"grip-vertical\" />\n        </button>\n        <div className=\"ds-sortable-item__content\">{children}</div>\n        {action && <div className=\"ds-sortable-item__action\">{action}</div>}\n      </li>\n    );\n  },\n);\n"],"mappings":"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"}

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

@@ -0,0 +1,27 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export interface SortableListProps extends Omit<HTMLAttributes<HTMLUListElement>, "onDragEnd"> {
+    /** Item ids in render order. */
+    items: string[];
+    /** Fired with the whole list in its new order. Apply it to your own state. */
+    onReorder?: (items: string[]) => void;
+    /** Rendered inside the drag overlay while a row is in the air. */
+    renderDragOverlay?: (id: string) => ReactNode;
+    children?: ReactNode;
+}
+/**
+ * A single vertical list you can re-order — the board's mechanics without the
+ * lanes. Each row carries a grip on the left; the list owns dragging only, the
+ * data stays yours: react to `onReorder`.
+ */
+export declare const SortableList: import("react").ForwardRefExoticComponent<SortableListProps & import("react").RefAttributes<HTMLUListElement>>;
+export interface SortableListItemProps extends HTMLAttributes<HTMLLIElement> {
+    id: string;
+    /** Accessible name announced when the row is picked up. */
+    label?: string;
+    /** A control at the end of the row, e.g. a menu or a delete button. */
+    action?: ReactNode;
+    children?: ReactNode;
+}
+/** One row of a `SortableList`. The grip on the left is the only handle. */
+export declare const SortableListItem: import("react").ForwardRefExoticComponent<SortableListItemProps & import("react").RefAttributes<HTMLLIElement>>;
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/SortableList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAsBf,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC5F,gCAAgC;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,kEAAkE;IAClE,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,SAAS,CAAC;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,gHA0DxB,CAAC;AAEF,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,aAAa,CAAC;IAC1E,EAAE,EAAE,MAAM,CAAC;IACX,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,4EAA4E;AAC5E,eAAO,MAAM,gBAAgB,iHAgC5B,CAAC"}

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

@@ -0,0 +1,27 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export interface SortableListProps extends Omit<HTMLAttributes<HTMLUListElement>, "onDragEnd"> {
+    /** Item ids in render order. */
+    items: string[];
+    /** Fired with the whole list in its new order. Apply it to your own state. */
+    onReorder?: (items: string[]) => void;
+    /** Rendered inside the drag overlay while a row is in the air. */
+    renderDragOverlay?: (id: string) => ReactNode;
+    children?: ReactNode;
+}
+/**
+ * A single vertical list you can re-order — the board's mechanics without the
+ * lanes. Each row carries a grip on the left; the list owns dragging only, the
+ * data stays yours: react to `onReorder`.
+ */
+export declare const SortableList: import("react").ForwardRefExoticComponent<SortableListProps & import("react").RefAttributes<HTMLUListElement>>;
+export interface SortableListItemProps extends HTMLAttributes<HTMLLIElement> {
+    id: string;
+    /** Accessible name announced when the row is picked up. */
+    label?: string;
+    /** A control at the end of the row, e.g. a menu or a delete button. */
+    action?: ReactNode;
+    children?: ReactNode;
+}
+/** One row of a `SortableList`. The grip on the left is the only handle. */
+export declare const SortableListItem: import("react").ForwardRefExoticComponent<SortableListItemProps & import("react").RefAttributes<HTMLLIElement>>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SortableList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAsBf,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC5F,gCAAgC;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,kEAAkE;IAClE,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,SAAS,CAAC;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,gHA0DxB,CAAC;AAEF,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,aAAa,CAAC;IAC1E,EAAE,EAAE,MAAM,CAAC;IACX,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,4EAA4E;AAC5E,eAAO,MAAM,gBAAgB,iHAgC5B,CAAC"}