@namroodinc/liquid-editorial 0.0.0-stage → 0.1.1

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/modifiers"),a=require("@dnd-kit/sortable"),o=require("@dnd-kit/utilities");var s=(0,t.forwardRef)(function({items:o,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:a.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=o.indexOf(String(t.id)),i=o.indexOf(String(n.id));r<0||i<0||s?.((0,a.arrayMove)(o,r,i))},[o,s]);return(0,n.jsxs)(r.DndContext,{id:`ds-sortable-list-${p}`,sensors:g,collisionDetection:r.closestCenter,modifiers:[i.restrictToVerticalAxis],onDragStart:_,onDragEnd:v,onDragCancel:()=>h(null),children:[(0,n.jsx)(a.SortableContext,{items:o,strategy:a.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:i,className:s,children:c,...l},u){let{attributes:d,listeners:f,setNodeRef:p,transform:m,transition:h,isDragging:g}=(0,a.useSortable)({id:t});return(0,n.jsxs)(`li`,{ref:e=>{p(e),typeof u==`function`?u(e):u&&(u.current=e)},style:{transform:o.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}),i&&(0,n.jsx)(`div`,{className:`ds-sortable-item__action`,children:i})]})});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_modifiers","_dnd_kit_sortable","_dnd_kit_utilities","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"}

package/dist/components/SortableList/index.js

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

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

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

package/dist/components/SortableList/style.css

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

package/dist/components/Stepper/index.cjs

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

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

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

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

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

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

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