@px-ui/ui 1.0.11 → 1.1.0

package/dist/components/sortable-list.d.ts

@@ -0,0 +1,153 @@
+import { t as Button } from "../button-Cfd9X6pX.js";
+import * as react_jsx_runtime228 from "react/jsx-runtime";
+import * as React$1 from "react";
+import { DndContextProps, UniqueIdentifier } from "@dnd-kit/core";
+import { SortingStrategy } from "@dnd-kit/sortable";
+
+//#region src/components/sortable-list.d.ts
+
+/**
+ * Minimal shape every sortable item must satisfy: a stable, unique `id`.
+ * Items may carry any additional fields — `SortableList` only reads `id`.
+ */
+interface SortableListItem {
+  /** Stable unique identifier used for drag tracking and reordering. */
+  id: UniqueIdentifier;
+}
+interface SortableListProps<TItem extends SortableListItem> {
+  /**
+   * The ordered list of items to render. The order of this array is the
+   * source of truth for the rendered order.
+   */
+  items: ReadonlyArray<TItem>;
+  /**
+   * Called when the user finishes a drag (or keyboard reorder) that changes
+   * the order. Receives the full re-ordered array — wire this to your state.
+   */
+  onReorder: (newOrder: TItem[]) => void;
+  /**
+   * Render a single item. The returned node is expected to render a
+   * {@link SortableItem} (directly or nested) keyed/identified by `item.id`.
+   */
+  renderItem: (item: TItem, index: number) => React$1.ReactNode;
+  /**
+   * Sorting strategy passed to the underlying `SortableContext`.
+   * @default verticalListSortingStrategy
+   */
+  strategy?: SortingStrategy;
+  /**
+   * Disable all dragging for the whole list.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Additional props forwarded to the underlying dnd-kit `DndContext`
+   * (e.g. accessibility announcements). Providing `modifiers` *replaces* the
+   * default vertical-axis restriction — pass your own (e.g.
+   * `restrictToHorizontalAxis`, alongside a matching `strategy`) for
+   * non-vertical layouts, or `[]` to remove axis locking entirely.
+   */
+  dndContextProps?: Omit<DndContextProps, "sensors" | "collisionDetection" | "onDragEnd">;
+  /** Additional className for the list container. */
+  className?: string;
+  /** Props forwarded to the list container element. */
+  containerProps?: React$1.ComponentProps<"div">;
+}
+/**
+ * Drag-and-drop sortable list. Wraps dnd-kit's `DndContext` +
+ * `SortableContext`, wires pointer and keyboard sensors, and restricts
+ * movement to the vertical axis. Fully keyboard-operable.
+ *
+ * This is a generic foundation primitive: it owns ordering/DnD plumbing and
+ * delegates the visual rendering of each row to `renderItem`, which should
+ * render a {@link SortableItem} (with an optional {@link SortableDragHandle}).
+ *
+ * @example
+ * ```tsx
+ * const [items, setItems] = React.useState([
+ *   { id: "1", label: "First" },
+ *   { id: "2", label: "Second" },
+ *   { id: "3", label: "Third" },
+ * ]);
+ *
+ * <SortableList
+ *   items={items}
+ *   onReorder={setItems}
+ *   renderItem={(item) => (
+ *     <SortableItem id={item.id} className="rounded-md border p-3">
+ *       <SortableDragHandle />
+ *       <span>{item.label}</span>
+ *     </SortableItem>
+ *   )}
+ * />
+ * ```
+ */
+declare function SortableList<TItem extends SortableListItem>({
+  items,
+  onReorder,
+  renderItem,
+  strategy,
+  disabled,
+  dndContextProps,
+  className,
+  containerProps
+}: SortableListProps<TItem>): react_jsx_runtime228.JSX.Element;
+interface SortableItemProps extends Omit<React$1.ComponentProps<"div">, "id"> {
+  /** Must match the `id` of the corresponding entry in `SortableList.items`. */
+  id: UniqueIdentifier;
+  /**
+   * When `true`, the entire item becomes the drag activator (the whole row is
+   * draggable). When `false` (the default), provide a {@link SortableDragHandle}
+   * inside to control dragging — better for items with interactive content.
+   * @default false
+   */
+  dragOnItem?: boolean;
+  /** Disable dragging for just this item. */
+  disabled?: boolean;
+}
+/**
+ * A single sortable row. Wraps `useSortable`, applies the live transform /
+ * transition, and exposes the drag attributes + listeners to a nested
+ * {@link SortableDragHandle} via context.
+ *
+ * Render exactly one `SortableItem` per `renderItem` call, with an `id`
+ * matching the data item.
+ */
+declare function SortableItem({
+  id,
+  dragOnItem,
+  disabled,
+  className,
+  style,
+  children,
+  ...props
+}: SortableItemProps): react_jsx_runtime228.JSX.Element;
+interface SortableDragHandleProps extends React$1.ComponentProps<typeof Button> {
+  /** Accessible label for the handle. @default "Drag to reorder" */
+  label?: string;
+}
+/**
+ * A grip button wired to its parent {@link SortableItem}'s drag listeners and
+ * activator ref. Use this when item content is interactive and you want only
+ * the handle to initiate a drag. Keyboard-operable: focus the handle and use
+ * Space/Enter then arrow keys to reorder.
+ *
+ * @example
+ * ```tsx
+ * <SortableItem id={item.id}>
+ *   <SortableDragHandle />
+ *   <span>{item.label}</span>
+ * </SortableItem>
+ * ```
+ */
+declare function SortableDragHandle({
+  label,
+  variant,
+  size,
+  className,
+  children,
+  ...props
+}: SortableDragHandleProps): react_jsx_runtime228.JSX.Element;
+//#endregion
+export { SortableDragHandle, SortableDragHandleProps, SortableItem, SortableItemProps, SortableList, SortableListItem, SortableListProps };
+//# sourceMappingURL=sortable-list.d.ts.map

package/dist/components/sortable-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortable-list.d.ts","names":[],"sources":["../../src/components/sortable-list.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;AAoCA;AAKiB,UALA,gBAAA,CAKiB;EAAe;EAK1B,EAAA,EARjB,gBAQiB;;AAMC,UAXP,iBAWO,CAAA,cAXyB,gBAWzB,CAAA,CAAA;EAMH;;;;EAqBD,KAAA,EAjCX,aAiCW,CAjCG,KAiCH,CAAA;EASD;;AA8EnB;;EACE,SAAA,EAAA,CAAA,QAAA,EAnHsB,KAmHtB,EAAA,EAAA,GAAA,IAAA;EACA;;;;EAIA,UAAA,EAAA,CAAA,IAAA,EAlHmB,KAkHnB,EAAA,KAAA,EAAA,MAAA,EAAA,GAlH4C,OAAA,CAAM,SAkHlD;EACA;;;;EAEyB,QAAA,CAAA,EA/Gd,eA+Gc;EAAA;AA+E3B;;;EACU,QAAA,CAAA,EAAA,OAAA;EAAI;AAwBd;;;;;;EAME,eAAA,CAAA,EA9MkB,IA8MlB,CA7ME,eA6MF,EAAA,SAAA,GAAA,oBAAA,GAAA,WAAA,CAAA;EAEC;EAAiB,SAAA,CAAA,EAAA,MAAA;EAAA;EA6EH,cAAA,CAAA,EApRE,OAAA,CAAM,cAqRvB,CAAA,KAAoC,CAAA;AAmBtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA1NgB,2BAA2B;;;;;;;;;GASxC,kBAAkB,SAAM,oBAAA,CAAA,GAAA,CAAA;UA+EV,iBAAA,SACP,KAAK,OAAA,CAAM;;MAEf;;;;;;;;;;;;;;;;;;;iBAsBU,YAAA;;;;;;;;GAQb,oBAAiB,oBAAA,CAAA,GAAA,CAAA;UA6EH,uBAAA,SACP,OAAA,CAAM,sBAAsB;;;;;;;;;;;;;;;;;;iBAmBtB,kBAAA;;;;;;;GAOb,0BAAuB,oBAAA,CAAA,GAAA,CAAA"}

package/dist/components/sortable-list.js

@@ -0,0 +1,191 @@
+"use client";
+
+import { t as cn } from "../utils-DUlptRpf.js";
+import { t as Button } from "../button-DnHwqwy0.js";
+import { GripVertical } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+
+//#region src/components/sortable-list.tsx
+const SortableItemContext = React$1.createContext(null);
+function useSortableItemContext(component) {
+	const ctx = React$1.useContext(SortableItemContext);
+	if (!ctx) throw new Error(`<${component}> must be rendered inside a <SortableItem>.`);
+	return ctx;
+}
+/**
+* Merge multiple refs (callback or object) into a single callback ref so the
+* same node can be handed to several consumers. Used to apply both dnd-kit's
+* sortable node ref and the activator node ref to one element.
+*/
+function mergeRefs(...refs) {
+	return (node) => {
+		for (const ref of refs) if (typeof ref === "function") ref(node);
+		else if (ref != null) ref.current = node;
+	};
+}
+/**
+* Drag-and-drop sortable list. Wraps dnd-kit's `DndContext` +
+* `SortableContext`, wires pointer and keyboard sensors, and restricts
+* movement to the vertical axis. Fully keyboard-operable.
+*
+* This is a generic foundation primitive: it owns ordering/DnD plumbing and
+* delegates the visual rendering of each row to `renderItem`, which should
+* render a {@link SortableItem} (with an optional {@link SortableDragHandle}).
+*
+* @example
+* ```tsx
+* const [items, setItems] = React.useState([
+*   { id: "1", label: "First" },
+*   { id: "2", label: "Second" },
+*   { id: "3", label: "Third" },
+* ]);
+*
+* <SortableList
+*   items={items}
+*   onReorder={setItems}
+*   renderItem={(item) => (
+*     <SortableItem id={item.id} className="rounded-md border p-3">
+*       <SortableDragHandle />
+*       <span>{item.label}</span>
+*     </SortableItem>
+*   )}
+* />
+* ```
+*/
+function SortableList({ items, onReorder, renderItem, strategy = verticalListSortingStrategy, disabled = false, dndContextProps, className, containerProps }) {
+	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 8 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+	const itemIds = React$1.useMemo(() => items.map((item) => item.id), [items]);
+	const handleDragEnd = React$1.useCallback((event) => {
+		const { active, over } = event;
+		if (!over || active.id === over.id) return;
+		const oldIndex = items.findIndex((item) => item.id === active.id);
+		const newIndex = items.findIndex((item) => item.id === over.id);
+		if (oldIndex === -1 || newIndex === -1) return;
+		onReorder(arrayMove(items.slice(), oldIndex, newIndex));
+	}, [items, onReorder]);
+	const { modifiers: customModifiers, ...restDndProps } = dndContextProps ?? {};
+	return /* @__PURE__ */ jsx(DndContext, {
+		sensors,
+		collisionDetection: closestCenter,
+		modifiers: customModifiers ?? [restrictToVerticalAxis],
+		onDragEnd: handleDragEnd,
+		...restDndProps,
+		children: /* @__PURE__ */ jsx(SortableContext, {
+			items: itemIds,
+			strategy,
+			disabled,
+			children: /* @__PURE__ */ jsx("div", {
+				"data-slot": "sortable-list",
+				className: cn("flex w-full flex-col gap-2", className),
+				...containerProps,
+				children: /* @__PURE__ */ jsx(DisabledProvider, {
+					value: disabled,
+					children: items.map((item, index) => /* @__PURE__ */ jsx(React$1.Fragment, { children: renderItem(item, index) }, item.id))
+				})
+			})
+		})
+	});
+}
+const ListDisabledContext = React$1.createContext(false);
+function DisabledProvider({ value, children }) {
+	return /* @__PURE__ */ jsx(ListDisabledContext.Provider, {
+		value,
+		children
+	});
+}
+/**
+* A single sortable row. Wraps `useSortable`, applies the live transform /
+* transition, and exposes the drag attributes + listeners to a nested
+* {@link SortableDragHandle} via context.
+*
+* Render exactly one `SortableItem` per `renderItem` call, with an `id`
+* matching the data item.
+*/
+function SortableItem({ id, dragOnItem = false, disabled, className, style, children, ...props }) {
+	const listDisabled = React$1.useContext(ListDisabledContext);
+	const isDisabled = disabled ?? listDisabled;
+	const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({
+		id,
+		disabled: isDisabled
+	});
+	const itemStyle = {
+		transform: transform ? `translate3d(${Math.round(transform.x)}px, ${Math.round(transform.y)}px, 0) scaleX(${transform.scaleX}) scaleY(${transform.scaleY})` : void 0,
+		transition,
+		...style
+	};
+	const contextValue = React$1.useMemo(() => ({
+		attributes,
+		listeners,
+		setActivatorNodeRef,
+		isDragging,
+		disabled: isDisabled
+	}), [
+		attributes,
+		listeners,
+		setActivatorNodeRef,
+		isDragging,
+		isDisabled
+	]);
+	const itemRef = React$1.useMemo(() => dragOnItem ? mergeRefs(setNodeRef, setActivatorNodeRef) : setNodeRef, [
+		dragOnItem,
+		setNodeRef,
+		setActivatorNodeRef
+	]);
+	const activatorProps = dragOnItem ? {
+		...attributes,
+		...listeners
+	} : {};
+	return /* @__PURE__ */ jsx(SortableItemContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: itemRef,
+			"data-slot": "sortable-item",
+			"data-dragging": isDragging || void 0,
+			"data-disabled": isDisabled || void 0,
+			style: itemStyle,
+			className: cn("flex items-center gap-2 bg-background outline-none", isDragging && "z-10 opacity-80 shadow-md", dragOnItem && !isDisabled && "cursor-grab touch-none active:cursor-grabbing", className),
+			...activatorProps,
+			...props,
+			children
+		})
+	});
+}
+/**
+* A grip button wired to its parent {@link SortableItem}'s drag listeners and
+* activator ref. Use this when item content is interactive and you want only
+* the handle to initiate a drag. Keyboard-operable: focus the handle and use
+* Space/Enter then arrow keys to reorder.
+*
+* @example
+* ```tsx
+* <SortableItem id={item.id}>
+*   <SortableDragHandle />
+*   <span>{item.label}</span>
+* </SortableItem>
+* ```
+*/
+function SortableDragHandle({ label = "Drag to reorder", variant = "ghost", size = "icon-sm", className, children, ...props }) {
+	const { attributes, listeners, setActivatorNodeRef, disabled } = useSortableItemContext("SortableDragHandle");
+	return /* @__PURE__ */ jsx(Button, {
+		ref: setActivatorNodeRef,
+		type: "button",
+		variant,
+		size,
+		"data-slot": "sortable-drag-handle",
+		"aria-label": label,
+		disabled,
+		className: cn("shrink-0 cursor-grab touch-none text-muted-foreground active:cursor-grabbing", className),
+		...attributes,
+		...listeners,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(GripVertical, { "aria-hidden": "true" })
+	});
+}
+
+//#endregion
+export { SortableDragHandle, SortableItem, SortableList };
+//# sourceMappingURL=sortable-list.js.map

package/dist/components/sortable-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortable-list.js","names":["React","itemStyle: React.CSSProperties"],"sources":["../../src/components/sortable-list.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  closestCenter,\n  useSensor,\n  useSensors,\n  type DndContextProps,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\";\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\";\nimport {\n  SortableContext,\n  arrayMove,\n  sortableKeyboardCoordinates,\n  useSortable,\n  verticalListSortingStrategy,\n  type SortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport { GripVertical } from \"lucide-react\";\n\nimport { cn } from \"@px-ui/ui/lib/utils\";\nimport { Button } from \"@px-ui/ui/components/button\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\n/**\n * Minimal shape every sortable item must satisfy: a stable, unique `id`.\n * Items may carry any additional fields — `SortableList` only reads `id`.\n */\nexport interface SortableListItem {\n  /** Stable unique identifier used for drag tracking and reordering. */\n  id: UniqueIdentifier;\n}\n\nexport interface SortableListProps<TItem extends SortableListItem> {\n  /**\n   * The ordered list of items to render. The order of this array is the\n   * source of truth for the rendered order.\n   */\n  items: ReadonlyArray<TItem>;\n\n  /**\n   * Called when the user finishes a drag (or keyboard reorder) that changes\n   * the order. Receives the full re-ordered array — wire this to your state.\n   */\n  onReorder: (newOrder: TItem[]) => void;\n\n  /**\n   * Render a single item. The returned node is expected to render a\n   * {@link SortableItem} (directly or nested) keyed/identified by `item.id`.\n   */\n  renderItem: (item: TItem, index: number) => React.ReactNode;\n\n  /**\n   * Sorting strategy passed to the underlying `SortableContext`.\n   * @default verticalListSortingStrategy\n   */\n  strategy?: SortingStrategy;\n\n  /**\n   * Disable all dragging for the whole list.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Additional props forwarded to the underlying dnd-kit `DndContext`\n   * (e.g. accessibility announcements). Providing `modifiers` *replaces* the\n   * default vertical-axis restriction — pass your own (e.g.\n   * `restrictToHorizontalAxis`, alongside a matching `strategy`) for\n   * non-vertical layouts, or `[]` to remove axis locking entirely.\n   */\n  dndContextProps?: Omit<\n    DndContextProps,\n    \"sensors\" | \"collisionDetection\" | \"onDragEnd\"\n  >;\n\n  /** Additional className for the list container. */\n  className?: string;\n\n  /** Props forwarded to the list container element. */\n  containerProps?: React.ComponentProps<\"div\">;\n}\n\n// ============================================================================\n// Per-item context\n// ============================================================================\n\ntype SortableItemContextValue = {\n  attributes: ReturnType<typeof useSortable>[\"attributes\"];\n  listeners: ReturnType<typeof useSortable>[\"listeners\"];\n  setActivatorNodeRef: ReturnType<typeof useSortable>[\"setActivatorNodeRef\"];\n  isDragging: boolean;\n  disabled: boolean;\n};\n\nconst SortableItemContext =\n  React.createContext<SortableItemContextValue | null>(null);\n\nfunction useSortableItemContext(component: string): SortableItemContextValue {\n  const ctx = React.useContext(SortableItemContext);\n  if (!ctx) {\n    throw new Error(`<${component}> must be rendered inside a <SortableItem>.`);\n  }\n  return ctx;\n}\n\n/**\n * Merge multiple refs (callback or object) into a single callback ref so the\n * same node can be handed to several consumers. Used to apply both dnd-kit's\n * sortable node ref and the activator node ref to one element.\n */\nfunction mergeRefs<T>(\n  ...refs: Array<React.Ref<T> | undefined>\n): React.RefCallback<T> {\n  return (node: T | null) => {\n    for (const ref of refs) {\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref != null) {\n        (ref as React.MutableRefObject<T | null>).current = node;\n      }\n    }\n  };\n}\n\n// ============================================================================\n// SortableList\n// ============================================================================\n\n/**\n * Drag-and-drop sortable list. Wraps dnd-kit's `DndContext` +\n * `SortableContext`, wires pointer and keyboard sensors, and restricts\n * movement to the vertical axis. Fully keyboard-operable.\n *\n * This is a generic foundation primitive: it owns ordering/DnD plumbing and\n * delegates the visual rendering of each row to `renderItem`, which should\n * render a {@link SortableItem} (with an optional {@link SortableDragHandle}).\n *\n * @example\n * ```tsx\n * const [items, setItems] = React.useState([\n *   { id: \"1\", label: \"First\" },\n *   { id: \"2\", label: \"Second\" },\n *   { id: \"3\", label: \"Third\" },\n * ]);\n *\n * <SortableList\n *   items={items}\n *   onReorder={setItems}\n *   renderItem={(item) => (\n *     <SortableItem id={item.id} className=\"rounded-md border p-3\">\n *       <SortableDragHandle />\n *       <span>{item.label}</span>\n *     </SortableItem>\n *   )}\n * />\n * ```\n */\nexport function SortableList<TItem extends SortableListItem>({\n  items,\n  onReorder,\n  renderItem,\n  strategy = verticalListSortingStrategy,\n  disabled = false,\n  dndContextProps,\n  className,\n  containerProps,\n}: SortableListProps<TItem>) {\n  const sensors = useSensors(\n    useSensor(PointerSensor, {\n      // Require a small drag distance before activating so clicks on\n      // interactive content (and taps on `dragOnItem` rows) aren't swallowed.\n      activationConstraint: { distance: 8 },\n    }),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    }),\n  );\n\n  const itemIds = React.useMemo(() => items.map((item) => item.id), [items]);\n\n  const handleDragEnd = React.useCallback(\n    (event: DragEndEvent) => {\n      const { active, over } = event;\n      if (!over || active.id === over.id) return;\n\n      const oldIndex = items.findIndex((item) => item.id === active.id);\n      const newIndex = items.findIndex((item) => item.id === over.id);\n      if (oldIndex === -1 || newIndex === -1) return;\n\n      onReorder(arrayMove(items.slice(), oldIndex, newIndex));\n    },\n    [items, onReorder],\n  );\n\n  const { modifiers: customModifiers, ...restDndProps } = dndContextProps ?? {};\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      modifiers={customModifiers ?? [restrictToVerticalAxis]}\n      onDragEnd={handleDragEnd}\n      {...restDndProps}\n    >\n      <SortableContext items={itemIds} strategy={strategy} disabled={disabled}>\n        <div\n          data-slot=\"sortable-list\"\n          className={cn(\"flex w-full flex-col gap-2\", className)}\n          {...containerProps}\n        >\n          <DisabledProvider value={disabled}>\n            {items.map((item, index) => (\n              <React.Fragment key={item.id}>\n                {renderItem(item, index)}\n              </React.Fragment>\n            ))}\n          </DisabledProvider>\n        </div>\n      </SortableContext>\n    </DndContext>\n  );\n}\n\n// Propagates the list-level `disabled` to each SortableItem without forcing\n// the consumer to thread it through `renderItem`.\nconst ListDisabledContext = React.createContext<boolean>(false);\n\nfunction DisabledProvider({\n  value,\n  children,\n}: {\n  value: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <ListDisabledContext.Provider value={value}>\n      {children}\n    </ListDisabledContext.Provider>\n  );\n}\n\n// ============================================================================\n// SortableItem\n// ============================================================================\n\nexport interface SortableItemProps\n  extends Omit<React.ComponentProps<\"div\">, \"id\"> {\n  /** Must match the `id` of the corresponding entry in `SortableList.items`. */\n  id: UniqueIdentifier;\n\n  /**\n   * When `true`, the entire item becomes the drag activator (the whole row is\n   * draggable). When `false` (the default), provide a {@link SortableDragHandle}\n   * inside to control dragging — better for items with interactive content.\n   * @default false\n   */\n  dragOnItem?: boolean;\n\n  /** Disable dragging for just this item. */\n  disabled?: boolean;\n}\n\n/**\n * A single sortable row. Wraps `useSortable`, applies the live transform /\n * transition, and exposes the drag attributes + listeners to a nested\n * {@link SortableDragHandle} via context.\n *\n * Render exactly one `SortableItem` per `renderItem` call, with an `id`\n * matching the data item.\n */\nexport function SortableItem({\n  id,\n  dragOnItem = false,\n  disabled,\n  className,\n  style,\n  children,\n  ...props\n}: SortableItemProps) {\n  const listDisabled = React.useContext(ListDisabledContext);\n  const isDisabled = disabled ?? listDisabled;\n\n  const {\n    attributes,\n    listeners,\n    setNodeRef,\n    setActivatorNodeRef,\n    transform,\n    transition,\n    isDragging,\n  } = useSortable({ id, disabled: isDisabled });\n\n  // Build the transform string locally (mirrors `CSS.Transform.toString` from\n  // `@dnd-kit/utilities`) so we don't depend on that transitive package.\n  const itemStyle: React.CSSProperties = {\n    transform: transform\n      ? `translate3d(${Math.round(transform.x)}px, ${Math.round(\n          transform.y,\n        )}px, 0) scaleX(${transform.scaleX}) scaleY(${transform.scaleY})`\n      : undefined,\n    transition,\n    ...style,\n  };\n\n  const contextValue = React.useMemo<SortableItemContextValue>(\n    () => ({\n      attributes,\n      listeners,\n      setActivatorNodeRef,\n      isDragging,\n      disabled: isDisabled,\n    }),\n    [attributes, listeners, setActivatorNodeRef, isDragging, isDisabled],\n  );\n\n  // The sortable node ref must always be applied. When the whole item is the\n  // activator, also wire the activator node ref (merged with the sortable ref)\n  // plus the drag listeners/attributes onto the root element. Memoize the\n  // merged ref so we don't detach/reattach the dnd-kit node on every render.\n  const itemRef = React.useMemo(\n    () =>\n      dragOnItem ? mergeRefs(setNodeRef, setActivatorNodeRef) : setNodeRef,\n    [dragOnItem, setNodeRef, setActivatorNodeRef],\n  );\n  const activatorProps = dragOnItem ? { ...attributes, ...listeners } : {};\n\n  return (\n    <SortableItemContext.Provider value={contextValue}>\n      <div\n        ref={itemRef}\n        data-slot=\"sortable-item\"\n        data-dragging={isDragging || undefined}\n        data-disabled={isDisabled || undefined}\n        style={itemStyle}\n        className={cn(\n          \"flex items-center gap-2 bg-background outline-none\",\n          isDragging && \"z-10 opacity-80 shadow-md\",\n          dragOnItem &&\n            !isDisabled &&\n            \"cursor-grab touch-none active:cursor-grabbing\",\n          className,\n        )}\n        {...activatorProps}\n        {...props}\n      >\n        {children}\n      </div>\n    </SortableItemContext.Provider>\n  );\n}\n\n// ============================================================================\n// SortableDragHandle\n// ============================================================================\n\nexport interface SortableDragHandleProps\n  extends React.ComponentProps<typeof Button> {\n  /** Accessible label for the handle. @default \"Drag to reorder\" */\n  label?: string;\n}\n\n/**\n * A grip button wired to its parent {@link SortableItem}'s drag listeners and\n * activator ref. Use this when item content is interactive and you want only\n * the handle to initiate a drag. Keyboard-operable: focus the handle and use\n * Space/Enter then arrow keys to reorder.\n *\n * @example\n * ```tsx\n * <SortableItem id={item.id}>\n *   <SortableDragHandle />\n *   <span>{item.label}</span>\n * </SortableItem>\n * ```\n */\nexport function SortableDragHandle({\n  label = \"Drag to reorder\",\n  variant = \"ghost\",\n  size = \"icon-sm\",\n  className,\n  children,\n  ...props\n}: SortableDragHandleProps) {\n  const { attributes, listeners, setActivatorNodeRef, disabled } =\n    useSortableItemContext(\"SortableDragHandle\");\n\n  return (\n    <Button\n      ref={setActivatorNodeRef}\n      type=\"button\"\n      variant={variant}\n      size={size}\n      data-slot=\"sortable-drag-handle\"\n      aria-label={label}\n      disabled={disabled}\n      className={cn(\n        \"shrink-0 cursor-grab touch-none text-muted-foreground active:cursor-grabbing\",\n        className,\n      )}\n      {...attributes}\n      {...listeners}\n      {...props}\n    >\n      {children ?? <GripVertical aria-hidden=\"true\" />}\n    </Button>\n  );\n}\n"],"mappings":"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"}

package/dist/components/spinner.d.ts

@@ -1,11 +1,11 @@
 import { Loader2Icon } from "lucide-react";
-import * as react_jsx_runtime295 from "react/jsx-runtime";
+import * as react_jsx_runtime271 from "react/jsx-runtime";
 
 //#region src/components/spinner.d.ts
 declare function Spinner({
   className,
   ...props
-}: React.ComponentProps<typeof Loader2Icon>): react_jsx_runtime295.JSX.Element;
+}: React.ComponentProps<typeof Loader2Icon>): react_jsx_runtime271.JSX.Element;
 //#endregion
 export { Spinner };
 //# sourceMappingURL=spinner.d.ts.map

package/dist/components/spinner.js

@@ -1,4 +1,4 @@
-import "../utils-DeIaBj75.js";
-import { t as Spinner } from "../spinner-C7yzrK_s.js";
+import "../utils-DUlptRpf.js";
+import { t as Spinner } from "../spinner-9MdgLDTZ.js";
 
 export { Spinner };

package/dist/components/stepper.d.ts

@@ -0,0 +1,171 @@
+import * as react_jsx_runtime272 from "react/jsx-runtime";
+import * as React$1 from "react";
+import * as class_variance_authority_types16 from "class-variance-authority/types";
+
+//#region src/components/stepper.d.ts
+type StepStatus = "completed" | "active" | "upcoming";
+type StepperOrientation = "horizontal" | "vertical";
+/**
+ * A single step descriptor consumed by {@link Stepper}'s convenience `steps`
+ * prop. For full control, compose `StepperItem` children directly instead.
+ */
+interface StepperStep {
+  /** Primary label shown next to the step indicator. */
+  label: React$1.ReactNode;
+  /** Optional secondary line rendered beneath the label. */
+  description?: React$1.ReactNode;
+  /** Disable navigation to this step (interactive mode only). */
+  disabled?: boolean;
+}
+declare const stepperVariants: (props?: ({
+  orientation?: "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_types16.ClassProp) | undefined) => string;
+declare const stepperItemVariants: (props?: ({
+  orientation?: "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_types16.ClassProp) | undefined) => string;
+declare const stepperTriggerVariants: (props?: ({
+  orientation?: "horizontal" | "vertical" | null | undefined;
+  interactive?: boolean | null | undefined;
+} & class_variance_authority_types16.ClassProp) | undefined) => string;
+declare const stepperIndicatorVariants: (props?: ({
+  status?: "active" | "completed" | "upcoming" | null | undefined;
+} & class_variance_authority_types16.ClassProp) | undefined) => string;
+declare const stepperSeparatorVariants: (props?: ({
+  orientation?: "horizontal" | "vertical" | null | undefined;
+  active?: boolean | null | undefined;
+} & class_variance_authority_types16.ClassProp) | undefined) => string;
+declare const stepperLabelVariants: (props?: ({
+  status?: "active" | "completed" | "upcoming" | null | undefined;
+} & class_variance_authority_types16.ClassProp) | undefined) => string;
+interface StepperProps extends Omit<React$1.ComponentProps<"ol">, "onClick"> {
+  /**
+   * Zero-based index of the currently active step. Steps before this index are
+   * treated as completed; the step at this index is emphasized; later steps are
+   * upcoming.
+   */
+  value: number;
+  /**
+   * Called with the step index when a step is activated. Providing this handler
+   * makes every step keyboard- and pointer-operable; omit it for a purely
+   * presentational indicator.
+   */
+  onValueChange?: (value: number) => void;
+  /**
+   * Layout direction.
+   * @default "horizontal"
+   */
+  orientation?: StepperOrientation;
+  /**
+   * Convenience: render steps from a data array instead of composing
+   * `StepperItem` children. Ignored when `children` are provided.
+   */
+  steps?: StepperStep[];
+}
+/**
+ * A step indicator that visualizes progress through a multi-step flow.
+ *
+ * Compose `StepperItem` children for full control, or pass a `steps` array for
+ * the common case. Steps before `value` render as completed (checked), the step
+ * at `value` is emphasized, and later steps are upcoming. Supply `onValueChange`
+ * to make steps interactive (clickable + keyboard-operable); without it the
+ * stepper is purely presentational.
+ *
+ * @example Compound
+ * ```tsx
+ * <Stepper value={step} onValueChange={setStep}>
+ *   <StepperItem step={0}>
+ *     <StepperTrigger>
+ *       <StepperIndicator />
+ *       <div className="flex flex-col items-start">
+ *         <StepperTitle>Details</StepperTitle>
+ *         <StepperDescription>Basic info</StepperDescription>
+ *       </div>
+ *     </StepperTrigger>
+ *     <StepperSeparator />
+ *   </StepperItem>
+ *   <StepperItem step={1}>
+ *     <StepperTrigger>
+ *       <StepperIndicator />
+ *       <StepperTitle>Review</StepperTitle>
+ *     </StepperTrigger>
+ *   </StepperItem>
+ * </Stepper>
+ * ```
+ *
+ * @example Convenience (data-driven)
+ * ```tsx
+ * <Stepper
+ *   value={step}
+ *   onValueChange={setStep}
+ *   steps={[{ label: "Details", description: "Basic info" }, { label: "Review" }]}
+ * />
+ * ```
+ */
+declare function Stepper({
+  value,
+  onValueChange,
+  orientation,
+  steps,
+  className,
+  children,
+  ...props
+}: StepperProps): react_jsx_runtime272.JSX.Element;
+interface StepperItemProps extends React$1.ComponentProps<"li"> {
+  /** Zero-based index of this step. The item is active when it equals `value`. */
+  step: number;
+  /** Disable navigation to this step (interactive mode only). */
+  disabled?: boolean;
+}
+/**
+ * A single step. Derives its status (completed / active / upcoming) by comparing
+ * `step` to the stepper's `value` and exposes it to descendants via context and
+ * a `data-status` attribute.
+ */
+declare function StepperItem({
+  step,
+  disabled,
+  className,
+  ...props
+}: StepperItemProps): react_jsx_runtime272.JSX.Element;
+/**
+ * The clickable (or static) region grouping a step's indicator and label.
+ * Renders a `<button>` when the stepper is interactive, a `<span>` otherwise.
+ * Prepends a visually hidden status word so the step's state is announced.
+ */
+declare function StepperTrigger({
+  className,
+  children,
+  onClick,
+  ...props
+}: React$1.ComponentProps<"button">): react_jsx_runtime272.JSX.Element;
+/**
+ * The numbered / checked circle for a step. Defaults to the one-based step
+ * number, or a check when completed; pass `children` to override (e.g. a custom
+ * icon for an error state).
+ */
+declare function StepperIndicator({
+  className,
+  children,
+  ...props
+}: React$1.ComponentProps<"span">): react_jsx_runtime272.JSX.Element;
+/** The primary label for a step. Colored by status. */
+declare function StepperTitle({
+  className,
+  ...props
+}: React$1.ComponentProps<"span">): react_jsx_runtime272.JSX.Element;
+/** Optional secondary line beneath a step's label. */
+declare function StepperDescription({
+  className,
+  ...props
+}: React$1.ComponentProps<"span">): react_jsx_runtime272.JSX.Element;
+/**
+ * The line drawn from a step toward the next one. Fills with the primary color
+ * once the step it trails is completed.
+ */
+declare function StepperSeparator({
+  className,
+  ...props
+}: React$1.ComponentProps<"span">): react_jsx_runtime272.JSX.Element;
+//#endregion
+export { StepStatus, Stepper, StepperDescription, StepperIndicator, StepperItem, StepperItemProps, StepperOrientation, StepperProps, StepperSeparator, StepperStep, StepperTitle, StepperTrigger, stepperIndicatorVariants, stepperItemVariants, stepperLabelVariants, stepperSeparatorVariants, stepperTriggerVariants, stepperVariants };
+//# sourceMappingURL=stepper.d.ts.map

package/dist/components/stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.d.ts","names":[],"sources":["../../src/components/stepper.tsx"],"sourcesContent":[],"mappings":"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"}