@namroodinc/liquid-editorial 0.1.1 → 0.1.4

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SortableList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,cAAc,EAEnB,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,iGAAiG;IACjG,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,SAAS,CAAC;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAQD;;;;;GAKG;AACH,eAAO,MAAM,YAAY,gHA6ExB,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

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

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

@@ -1 +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"}
+{"version":3,"file":"index.js","names":["Icon","isItem","isValidElement","child","SortableList","forwardRef","rest","dndId","useId","activeId","setActiveId","useState","order","setOrder","items","prevItems","setPrevItems","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","handleStart","useCallback","event","handleEnd","over","active","from","to","next","arrayMove","onReorder","childArray","Children","children","rows","ordered","id","activeRow","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  Children,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useId,\n  useState,\n  type HTMLAttributes,\n  type ReactElement,\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. Defaults to the row's content. */\n  renderDragOverlay?: (id: string) => ReactNode;\n  children?: ReactNode;\n}\n\ntype ItemElement = ReactElement<SortableListItemProps>;\n\nfunction isItem(child: ReactNode): child is ItemElement {\n  return isValidElement<SortableListItemProps>(child) && typeof child.props.id === \"string\";\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 keeps the dropped order\n * itself, so it works on its own; pass `onReorder` to mirror it into your data.\n * A new `items` value from the parent always wins.\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 [order, setOrder] = useState(items);\n    const [prevItems, setPrevItems] = useState(items);\n    if (items !== prevItems && items.join(\"\\u0000\") !== prevItems.join(\"\\u0000\")) {\n      setPrevItems(items);\n      setOrder(items);\n    }\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 = order.indexOf(String(active.id));\n        const to = order.indexOf(String(over.id));\n        if (from < 0 || to < 0) return;\n        const next = arrayMove(order, from, to);\n        setOrder(next);\n        onReorder?.(next);\n      },\n      [order, onReorder],\n    );\n\n    // Rows follow the list's own order; anything that isn't a row keeps its place at the end.\n    const childArray = Children.toArray(children);\n    const rows = new Map(childArray.filter(isItem).map((child) => [child.props.id, child]));\n    const ordered = [\n      ...order.flatMap((id) => rows.get(id) ?? []),\n      ...childArray.filter((child) => !isItem(child) || !order.includes(child.props.id)),\n    ];\n    const activeRow = activeId ? rows.get(activeId) : undefined;\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={order} strategy={verticalListSortingStrategy}>\n          <ul\n            ref={ref}\n            className={[\"ds-sortable-list\", className].filter(Boolean).join(\" \")}\n            {...rest}\n          >\n            {ordered}\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\">\n                {renderDragOverlay ? renderDragOverlay(activeId) : activeRow?.props.children}\n              </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/Table/index.cjs

@@ -1,2 +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){return e.filter(Boolean).join(` `)}var i=(0,t.forwardRef)(function({className:e,children:t,...i},a){return(0,n.jsx)(`div`,{ref:a,className:r(`ds-table-frame`,e),...i,children:t})}),a=(0,t.forwardRef)(function({start:e,end:t,className:i,...a},o){return(0,n.jsxs)(`div`,{ref:o,className:r(`ds-table-toolbar`,i),...a,children:[(0,n.jsx)(`div`,{className:`ds-table-toolbar__group`,children:e}),(0,n.jsx)(`div`,{className:`ds-table-toolbar__group`,children:t})]})}),o=(0,t.forwardRef)(function({className:e,children:t,...i},a){return(0,n.jsx)(`div`,{className:`ds-table-frame__scroll`,children:(0,n.jsx)(`table`,{ref:a,className:r(`ds-table`,e),...i,children:t})})}),s=(0,t.forwardRef)(function({className:e,...t},r){return(0,n.jsx)(`thead`,{ref:r,className:e,...t})}),c=(0,t.forwardRef)(function({className:e,...t},r){return(0,n.jsx)(`tbody`,{ref:r,className:e,...t})}),l=(0,t.forwardRef)(function({isSelected:e=!1,isInteractive:t=!1,className:r,...i},a){return(0,n.jsx)(`tr`,{ref:a,"data-selected":e||void 0,"data-interactive":t||void 0,tabIndex:t?0:void 0,className:r,...i})}),u=(0,t.forwardRef)(function({align:e=`start`,width:t=`auto`,className:r,...i},a){return(0,n.jsx)(`th`,{ref:a,scope:`col`,"data-align":e,"data-width":t,className:r,...i})}),d=(0,t.forwardRef)(function({align:e=`start`,width:t=`auto`,emphasis:r=`default`,className:i,...a},o){return(0,n.jsx)(`td`,{ref:o,"data-align":e,"data-width":t,"data-emphasis":r==="default"?void 0:r,className:i,...a})}),f=(0,t.forwardRef)(function({icon:t=`info`,title:i,description:a,action:o,className:s,...c},l){return(0,n.jsxs)(`div`,{ref:l,className:r(`ds-table-empty`,s),...c,children:[(0,n.jsx)(e.t,{name:t,size:24}),(0,n.jsx)(`span`,{style:{color:`var(--color-text)`,fontWeight:`var(--font-weight-bold)`},children:i}),a&&(0,n.jsx)(`span`,{children:a}),o]})});exports.Table=o,exports.TableBody=c,exports.TableCell=d,exports.TableEmpty=f,exports.TableFrame=i,exports.TableHead=s,exports.TableHeaderCell=u,exports.TableRow=l,exports.TableToolbar=a;
+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){return e.filter(Boolean).join(` `)}var i=(0,t.forwardRef)(function({className:e,children:t,...i},a){return(0,n.jsx)(`div`,{ref:a,className:r(`ds-table-frame`,e),...i,children:t})}),a=(0,t.forwardRef)(function({start:e,end:t,className:i,...a},o){return(0,n.jsxs)(`div`,{ref:o,className:r(`ds-table-toolbar`,i),...a,children:[(0,n.jsx)(`div`,{className:`ds-table-toolbar__group`,children:e}),(0,n.jsx)(`div`,{className:`ds-table-toolbar__group`,children:t})]})});function o(e){return t.Children.toArray(e).some(e=>(0,t.isValidElement)(e)&&(e.type!==t.Fragment||o(e.props.children)))}var s=(0,t.createContext)({emptyMessage:`No data found.`}),c=(0,t.forwardRef)(function({emptyMessage:e=`No data found.`,isEmpty:t,className:i,children:a,...o},c){return(0,n.jsx)(s.Provider,{value:{emptyMessage:e,isEmpty:t},children:(0,n.jsx)(`div`,{className:`ds-table-frame__scroll`,children:(0,n.jsx)(`table`,{...o,ref:c,className:r(`ds-table`,i),children:a})})})}),l=(0,t.forwardRef)(function({className:e,...t},r){return(0,n.jsx)(`thead`,{ref:r,className:e,...t})}),u=(0,t.forwardRef)(function({className:e,children:r,...i},a){let{emptyMessage:c,isEmpty:l}=(0,t.useContext)(s);return(0,n.jsx)(`tbody`,{ref:a,className:e,...i,children:l??!o(r)?(0,n.jsx)(d,{children:(0,n.jsx)(p,{colSpan:1e3,className:`ds-table__empty-cell`,children:(0,n.jsx)(m,{title:c,role:`status`})})}):r})}),d=(0,t.forwardRef)(function({isSelected:e=!1,isInteractive:t=!1,className:r,...i},a){return(0,n.jsx)(`tr`,{ref:a,"data-selected":e||void 0,"data-interactive":t||void 0,tabIndex:t?0:void 0,className:r,...i})}),f=(0,t.forwardRef)(function({align:e=`start`,width:t=`auto`,className:r,...i},a){return(0,n.jsx)(`th`,{ref:a,scope:`col`,"data-align":e,"data-width":t,className:r,...i})}),p=(0,t.forwardRef)(function({align:e=`start`,width:t=`auto`,emphasis:r=`default`,className:i,...a},o){return(0,n.jsx)(`td`,{ref:o,"data-align":e,"data-width":t,"data-emphasis":r==="default"?void 0:r,className:i,...a})}),m=(0,t.forwardRef)(function({icon:t=`info`,title:i=`No data found.`,description:a,action:o,className:s,...c},l){return(0,n.jsxs)(`div`,{ref:l,className:r(`ds-table-empty`,s),...c,children:[(0,n.jsx)(e.t,{name:t,size:24}),(0,n.jsx)(`span`,{style:{color:`var(--color-text)`,fontWeight:`var(--font-weight-bold)`},children:i}),a&&(0,n.jsx)(`span`,{children:a}),o]})});exports.Table=c,exports.TableBody=u,exports.TableCell=p,exports.TableEmpty=m,exports.TableFrame=i,exports.TableHead=l,exports.TableHeaderCell=f,exports.TableRow=d,exports.TableToolbar=a;
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["forwardRef","Icon","require_Icon","react","react_jsx_runtime","cx","parts","TableFrame","rest","className","TableToolbar","start","end","Table","TableHead","TableBody","TableRow","isSelected","isInteractive","TableHeaderCell","align","width","TableCell","emphasis","TableEmpty","icon","title","description","action"],"sources":["../../../src/components/Table/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type HTMLAttributes,\n  type ReactNode,\n  type TableHTMLAttributes,\n  type TdHTMLAttributes,\n  type ThHTMLAttributes,\n} from \"react\";\nimport { Icon } from \"../Icon\";\nimport type { IconName } from \"../Icon/icons\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport interface TableFrameProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n}\n\n/** The 3px collection frame every table, list and board sits inside. */\nexport const TableFrame = forwardRef<HTMLDivElement, TableFrameProps>(function TableFrame(\n  { className, children, ...rest },\n  ref,\n) {\n  return (\n    <div ref={ref} className={cx(\"ds-table-frame\", className)} {...rest}>\n      {children}\n    </div>\n  );\n});\n\nexport interface TableToolbarProps extends HTMLAttributes<HTMLDivElement> {\n  /** Left side — usually a select-all checkbox, a title and a count badge. */\n  start?: ReactNode;\n  /** Right side — filters and the one primary action. */\n  end?: ReactNode;\n}\n\n/** The band above the rules: selection, title, count, filters, primary action. */\nexport const TableToolbar = forwardRef<HTMLDivElement, TableToolbarProps>(\n  function TableToolbar({ start, end, className, ...rest }, ref) {\n    return (\n      <div ref={ref} className={cx(\"ds-table-toolbar\", className)} {...rest}>\n        <div className=\"ds-table-toolbar__group\">{start}</div>\n        <div className=\"ds-table-toolbar__group\">{end}</div>\n      </div>\n    );\n  },\n);\n\nexport interface TableProps extends TableHTMLAttributes<HTMLTableElement> {\n  children?: ReactNode;\n}\n\n/** The rules layer. Always render it inside a `TableFrame`. */\nexport const Table = forwardRef<HTMLTableElement, TableProps>(function Table(\n  { className, children, ...rest },\n  ref,\n) {\n  return (\n    <div className=\"ds-table-frame__scroll\">\n      <table ref={ref} className={cx(\"ds-table\", className)} {...rest}>\n        {children}\n      </table>\n    </div>\n  );\n});\n\nexport const TableHead = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(\n  function TableHead({ className, ...rest }, ref) {\n    return <thead ref={ref} className={className} {...rest} />;\n  },\n);\n\nexport const TableBody = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(\n  function TableBody({ className, ...rest }, ref) {\n    return <tbody ref={ref} className={className} {...rest} />;\n  },\n);\n\nexport interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {\n  /** Paints the soft fill and the solid rail. Never changes the row's size. */\n  isSelected?: boolean;\n  /** Marks the row clickable: hover fill plus a pointer cursor. */\n  isInteractive?: boolean;\n}\n\nexport const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(function TableRow(\n  { isSelected = false, isInteractive = false, className, ...rest },\n  ref,\n) {\n  return (\n    <tr\n      ref={ref}\n      data-selected={isSelected || undefined}\n      data-interactive={isInteractive || undefined}\n      tabIndex={isInteractive ? 0 : undefined}\n      className={className}\n      {...rest}\n    />\n  );\n});\n\nexport type TableAlign = \"start\" | \"end\";\nexport type TableCellWidth = \"auto\" | \"control\";\n\nexport interface TableHeaderCellProps\n  extends Omit<ThHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n  align?: TableAlign;\n  width?: TableCellWidth;\n}\n\nexport const TableHeaderCell = forwardRef<HTMLTableCellElement, TableHeaderCellProps>(\n  function TableHeaderCell({ align = \"start\", width = \"auto\", className, ...rest }, ref) {\n    return (\n      <th\n        ref={ref}\n        scope=\"col\"\n        data-align={align}\n        data-width={width}\n        className={className}\n        {...rest}\n      />\n    );\n  },\n);\n\nexport type TableCellEmphasis = \"default\" | \"primary\" | \"muted\";\n\nexport interface TableCellProps\n  extends Omit<TdHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n  align?: TableAlign;\n  width?: TableCellWidth;\n  /** `primary` is the row's identity cell — one per row, never two. */\n  emphasis?: TableCellEmphasis;\n}\n\nexport const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(function TableCell(\n  { align = \"start\", width = \"auto\", emphasis = \"default\", className, ...rest },\n  ref,\n) {\n  return (\n    <td\n      ref={ref}\n      data-align={align}\n      data-width={width}\n      data-emphasis={emphasis === \"default\" ? undefined : emphasis}\n      className={className}\n      {...rest}\n    />\n  );\n});\n\nexport interface TableEmptyProps extends HTMLAttributes<HTMLDivElement> {\n  icon?: IconName;\n  title: string;\n  description?: string;\n  /** One action at most — the thing that ends the empty state. */\n  action?: ReactNode;\n}\n\n/** What the frame shows when the collection has no rows. */\nexport const TableEmpty = forwardRef<HTMLDivElement, TableEmptyProps>(function TableEmpty(\n  { icon = \"info\", title, description, action, className, ...rest },\n  ref,\n) {\n  return (\n    <div ref={ref} className={cx(\"ds-table-empty\", className)} {...rest}>\n      <Icon name={icon} size={24} />\n      <span style={{ color: \"var(--color-text)\", fontWeight: \"var(--font-weight-bold)\" }}>\n        {title}\n      </span>\n      {description && <span>{description}</span>}\n      {action}\n    </div>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"index.cjs","names":["forwardRef","Children","isValidElement","Fragment","createContext","useContext","Icon","require_Icon","react","react_jsx_runtime","cx","parts","TableFrame","rest","className","TableToolbar","start","end","hasBodyContent","children","child","TableContext","Table","TableHead","TableBody","isEmpty","TableRow","TableCell","TableEmpty","emptyMessage","isSelected","isInteractive","TableHeaderCell","align","width","emphasis","icon","title","description","action"],"sources":["../../../src/components/Table/index.tsx"],"sourcesContent":["import {\n  Children,\n  Fragment,\n  createContext,\n  forwardRef,\n  isValidElement,\n  useContext,\n  type HTMLAttributes,\n  type ReactNode,\n  type TableHTMLAttributes,\n  type TdHTMLAttributes,\n  type ThHTMLAttributes,\n} from \"react\";\nimport { Icon } from \"../Icon\";\nimport type { IconName } from \"../Icon/icons\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport interface TableFrameProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n}\n\n/** The 3px collection frame every table, list and board sits inside. */\nexport const TableFrame = forwardRef<HTMLDivElement, TableFrameProps>(function TableFrame(\n  { className, children, ...rest },\n  ref,\n) {\n  return (\n    <div ref={ref} className={cx(\"ds-table-frame\", className)} {...rest}>\n      {children}\n    </div>\n  );\n});\n\nexport interface TableToolbarProps extends HTMLAttributes<HTMLDivElement> {\n  /** Left side — usually a select-all checkbox, a title and a count badge. */\n  start?: ReactNode;\n  /** Right side — filters and the one primary action. */\n  end?: ReactNode;\n}\n\n/** The band above the rules: selection, title, count, filters, primary action. */\nexport const TableToolbar = forwardRef<HTMLDivElement, TableToolbarProps>(\n  function TableToolbar({ start, end, className, ...rest }, ref) {\n    return (\n      <div ref={ref} className={cx(\"ds-table-toolbar\", className)} {...rest}>\n        <div className=\"ds-table-toolbar__group\">{start}</div>\n        <div className=\"ds-table-toolbar__group\">{end}</div>\n      </div>\n    );\n  },\n);\n\nexport interface TableProps extends TableHTMLAttributes<HTMLTableElement> {\n  /** Message shown when a body has no rows. */\n  emptyMessage?: string;\n  /** Override empty-child detection when rows are rendered by custom components. */\n  isEmpty?: boolean;\n  children?: ReactNode;\n}\n\nfunction hasBodyContent(children: ReactNode): boolean {\n  return Children.toArray(children).some((child) =>\n    isValidElement<{ children?: ReactNode }>(child) &&\n      (child.type !== Fragment || hasBodyContent(child.props.children)),\n  );\n}\n\nconst TableContext = createContext<{\n  emptyMessage: string;\n  isEmpty?: boolean;\n}>({ emptyMessage: \"No data found.\" });\n\n/** The rules layer. Always render it inside a `TableFrame`. */\nexport const Table = forwardRef<HTMLTableElement, TableProps>(function Table(\n  { emptyMessage = \"No data found.\", isEmpty, className, children, ...rest },\n  ref,\n) {\n  return (\n    <TableContext.Provider value={{ emptyMessage, isEmpty }}>\n      <div className=\"ds-table-frame__scroll\">\n        <table {...rest} ref={ref} className={cx(\"ds-table\", className)}>\n          {children}\n        </table>\n      </div>\n    </TableContext.Provider>\n  );\n});\n\nexport const TableHead = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(\n  function TableHead({ className, ...rest }, ref) {\n    return <thead ref={ref} className={className} {...rest} />;\n  },\n);\n\nexport const TableBody = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(\n  function TableBody({ className, children, ...rest }, ref) {\n    const { emptyMessage, isEmpty } = useContext(TableContext);\n    return (\n      <tbody ref={ref} className={className} {...rest}>\n        {(isEmpty ?? !hasBodyContent(children)) ? (\n          <TableRow>\n            {/* HTML's maximum span covers the row without inspecting columns. */}\n            <TableCell colSpan={1000} className=\"ds-table__empty-cell\">\n              <TableEmpty title={emptyMessage} role=\"status\" />\n            </TableCell>\n          </TableRow>\n        ) : children}\n      </tbody>\n    );\n  },\n);\n\nexport interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {\n  /** Paints the soft fill and the solid rail. Never changes the row's size. */\n  isSelected?: boolean;\n  /** Marks the row clickable: hover fill plus a pointer cursor. */\n  isInteractive?: boolean;\n}\n\nexport const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(function TableRow(\n  { isSelected = false, isInteractive = false, className, ...rest },\n  ref,\n) {\n  return (\n    <tr\n      ref={ref}\n      data-selected={isSelected || undefined}\n      data-interactive={isInteractive || undefined}\n      tabIndex={isInteractive ? 0 : undefined}\n      className={className}\n      {...rest}\n    />\n  );\n});\n\nexport type TableAlign = \"start\" | \"end\";\nexport type TableCellWidth = \"auto\" | \"control\";\n\nexport interface TableHeaderCellProps\n  extends Omit<ThHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n  align?: TableAlign;\n  width?: TableCellWidth;\n}\n\nexport const TableHeaderCell = forwardRef<HTMLTableCellElement, TableHeaderCellProps>(\n  function TableHeaderCell({ align = \"start\", width = \"auto\", className, ...rest }, ref) {\n    return (\n      <th\n        ref={ref}\n        scope=\"col\"\n        data-align={align}\n        data-width={width}\n        className={className}\n        {...rest}\n      />\n    );\n  },\n);\n\nexport type TableCellEmphasis = \"default\" | \"primary\" | \"muted\";\n\nexport interface TableCellProps\n  extends Omit<TdHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n  align?: TableAlign;\n  width?: TableCellWidth;\n  /** `primary` is the row's identity cell — one per row, never two. */\n  emphasis?: TableCellEmphasis;\n}\n\nexport const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(function TableCell(\n  { align = \"start\", width = \"auto\", emphasis = \"default\", className, ...rest },\n  ref,\n) {\n  return (\n    <td\n      ref={ref}\n      data-align={align}\n      data-width={width}\n      data-emphasis={emphasis === \"default\" ? undefined : emphasis}\n      className={className}\n      {...rest}\n    />\n  );\n});\n\nexport interface TableEmptyProps extends HTMLAttributes<HTMLDivElement> {\n  icon?: IconName;\n  title?: string;\n  description?: string;\n  /** One action at most — the thing that ends the empty state. */\n  action?: ReactNode;\n}\n\n/** What the frame shows when the collection has no rows. */\nexport const TableEmpty = forwardRef<HTMLDivElement, TableEmptyProps>(function TableEmpty(\n  { icon = \"info\", title = \"No data found.\", description, action, className, ...rest },\n  ref,\n) {\n  return (\n    <div ref={ref} className={cx(\"ds-table-empty\", className)} {...rest}>\n      <Icon name={icon} size={24} />\n      <span style={{ color: \"var(--color-text)\", fontWeight: \"var(--font-weight-bold)\" }}>\n        {title}\n      </span>\n      {description && <span>{description}</span>}\n      {action}\n    </div>\n  );\n});\n"],"mappings":"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"}

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

@@ -14,6 +14,10 @@ export interface TableToolbarProps extends HTMLAttributes<HTMLDivElement> {
 /** The band above the rules: selection, title, count, filters, primary action. */
 export declare const TableToolbar: import("react").ForwardRefExoticComponent<TableToolbarProps & import("react").RefAttributes<HTMLDivElement>>;
 export interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
+    /** Message shown when a body has no rows. */
+    emptyMessage?: string;
+    /** Override empty-child detection when rows are rendered by custom components. */
+    isEmpty?: boolean;
     children?: ReactNode;
 }
 /** The rules layer. Always render it inside a `TableFrame`. */
@@ -44,7 +48,7 @@ export interface TableCellProps extends Omit<TdHTMLAttributes<HTMLTableCellEleme
 export declare const TableCell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
 export interface TableEmptyProps extends HTMLAttributes<HTMLDivElement> {
     icon?: IconName;
-    title: string;
+    title?: string;
     description?: string;
     /** One action at most — the thing that ends the empty state. */
     action?: ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACtB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,aAAa,CAAC;AAMrB,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wEAAwE;AACxE,eAAO,MAAM,UAAU,4GASrB,CAAC;AAEH,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,4EAA4E;IAC5E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uDAAuD;IACvD,GAAG,CAAC,EAAE,SAAS,CAAC;CACjB;AAED,kFAAkF;AAClF,eAAO,MAAM,YAAY,8GASxB,CAAC;AAEF,MAAM,WAAW,UAAW,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IACvE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,+DAA+D;AAC/D,eAAO,MAAM,KAAK,yGAWhB,CAAC;AAEH,eAAO,MAAM,SAAS,6IAIrB,CAAC;AAEF,eAAO,MAAM,SAAS,6IAIrB,CAAC;AAEF,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,mBAAmB,CAAC;IACxE,6EAA6E;IAC7E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iEAAiE;IACjE,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,QAAQ,+GAcnB,CAAC;AAEH,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;AACzC,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,SAAS,CAAC;AAEhD,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC7D,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB;AAED,eAAO,MAAM,eAAe,uHAa3B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEhE,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC7D,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED,eAAO,MAAM,SAAS,iHAcpB,CAAC;AAEH,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gEAAgE;IAChE,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,4DAA4D;AAC5D,eAAO,MAAM,UAAU,4GAcrB,CAAC"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACtB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,aAAa,CAAC;AAMrB,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wEAAwE;AACxE,eAAO,MAAM,UAAU,4GASrB,CAAC;AAEH,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,4EAA4E;IAC5E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uDAAuD;IACvD,GAAG,CAAC,EAAE,SAAS,CAAC;CACjB;AAED,kFAAkF;AAClF,eAAO,MAAM,YAAY,8GASxB,CAAC;AAEF,MAAM,WAAW,UAAW,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IACvE,6CAA6C;IAC7C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kFAAkF;IAClF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAcD,+DAA+D;AAC/D,eAAO,MAAM,KAAK,yGAahB,CAAC;AAEH,eAAO,MAAM,SAAS,6IAIrB,CAAC;AAEF,eAAO,MAAM,SAAS,6IAgBrB,CAAC;AAEF,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,mBAAmB,CAAC;IACxE,6EAA6E;IAC7E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iEAAiE;IACjE,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,QAAQ,+GAcnB,CAAC;AAEH,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;AACzC,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,SAAS,CAAC;AAEhD,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC7D,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB;AAED,eAAO,MAAM,eAAe,uHAa3B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEhE,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC7D,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED,eAAO,MAAM,SAAS,iHAcpB,CAAC;AAEH,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gEAAgE;IAChE,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,4DAA4D;AAC5D,eAAO,MAAM,UAAU,4GAcrB,CAAC"}

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

@@ -14,6 +14,10 @@ export interface TableToolbarProps extends HTMLAttributes<HTMLDivElement> {
 /** The band above the rules: selection, title, count, filters, primary action. */
 export declare const TableToolbar: import("react").ForwardRefExoticComponent<TableToolbarProps & import("react").RefAttributes<HTMLDivElement>>;
 export interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
+    /** Message shown when a body has no rows. */
+    emptyMessage?: string;
+    /** Override empty-child detection when rows are rendered by custom components. */
+    isEmpty?: boolean;
     children?: ReactNode;
 }
 /** The rules layer. Always render it inside a `TableFrame`. */
@@ -44,7 +48,7 @@ export interface TableCellProps extends Omit<TdHTMLAttributes<HTMLTableCellEleme
 export declare const TableCell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
 export interface TableEmptyProps extends HTMLAttributes<HTMLDivElement> {
     icon?: IconName;
-    title: string;
+    title?: string;
     description?: string;
     /** One action at most — the thing that ends the empty state. */
     action?: ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACtB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,aAAa,CAAC;AAMrB,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wEAAwE;AACxE,eAAO,MAAM,UAAU,4GASrB,CAAC;AAEH,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,4EAA4E;IAC5E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uDAAuD;IACvD,GAAG,CAAC,EAAE,SAAS,CAAC;CACjB;AAED,kFAAkF;AAClF,eAAO,MAAM,YAAY,8GASxB,CAAC;AAEF,MAAM,WAAW,UAAW,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IACvE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,+DAA+D;AAC/D,eAAO,MAAM,KAAK,yGAWhB,CAAC;AAEH,eAAO,MAAM,SAAS,6IAIrB,CAAC;AAEF,eAAO,MAAM,SAAS,6IAIrB,CAAC;AAEF,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,mBAAmB,CAAC;IACxE,6EAA6E;IAC7E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iEAAiE;IACjE,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,QAAQ,+GAcnB,CAAC;AAEH,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;AACzC,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,SAAS,CAAC;AAEhD,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC7D,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB;AAED,eAAO,MAAM,eAAe,uHAa3B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEhE,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC7D,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED,eAAO,MAAM,SAAS,iHAcpB,CAAC;AAEH,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gEAAgE;IAChE,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,4DAA4D;AAC5D,eAAO,MAAM,UAAU,4GAcrB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACtB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,aAAa,CAAC;AAMrB,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wEAAwE;AACxE,eAAO,MAAM,UAAU,4GASrB,CAAC;AAEH,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,4EAA4E;IAC5E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uDAAuD;IACvD,GAAG,CAAC,EAAE,SAAS,CAAC;CACjB;AAED,kFAAkF;AAClF,eAAO,MAAM,YAAY,8GASxB,CAAC;AAEF,MAAM,WAAW,UAAW,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IACvE,6CAA6C;IAC7C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kFAAkF;IAClF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAcD,+DAA+D;AAC/D,eAAO,MAAM,KAAK,yGAahB,CAAC;AAEH,eAAO,MAAM,SAAS,6IAIrB,CAAC;AAEF,eAAO,MAAM,SAAS,6IAgBrB,CAAC;AAEF,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,mBAAmB,CAAC;IACxE,6EAA6E;IAC7E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iEAAiE;IACjE,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,QAAQ,+GAcnB,CAAC;AAEH,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;AACzC,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,SAAS,CAAC;AAEhD,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC7D,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB;AAED,eAAO,MAAM,eAAe,uHAa3B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEhE,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC7D,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED,eAAO,MAAM,SAAS,iHAcpB,CAAC;AAEH,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gEAAgE;IAChE,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,4DAA4D;AAC5D,eAAO,MAAM,UAAU,4GAcrB,CAAC"}

package/dist/components/Table/index.js

@@ -1,102 +1,121 @@
 import { t as e } from "../../chunks/Icon-CGY1FNXT.js";
-import { forwardRef as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Children as t, Fragment as n, createContext as r, forwardRef as i, isValidElement as a, useContext as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/Table/index.tsx
-function i(...e) {
+function l(...e) {
 	return e.filter(Boolean).join(" ");
 }
-var a = t(function({ className: e, children: t, ...r }, a) {
-	return /* @__PURE__ */ n("div", {
-		ref: a,
-		className: i("ds-table-frame", e),
-		...r,
+var u = i(function({ className: e, children: t, ...n }, r) {
+	return /* @__PURE__ */ s("div", {
+		ref: r,
+		className: l("ds-table-frame", e),
+		...n,
 		children: t
 	});
-}), o = t(function({ start: e, end: t, className: a, ...o }, s) {
-	return /* @__PURE__ */ r("div", {
-		ref: s,
-		className: i("ds-table-toolbar", a),
-		...o,
-		children: [/* @__PURE__ */ n("div", {
+}), d = i(function({ start: e, end: t, className: n, ...r }, i) {
+	return /* @__PURE__ */ c("div", {
+		ref: i,
+		className: l("ds-table-toolbar", n),
+		...r,
+		children: [/* @__PURE__ */ s("div", {
 			className: "ds-table-toolbar__group",
 			children: e
-		}), /* @__PURE__ */ n("div", {
+		}), /* @__PURE__ */ s("div", {
 			className: "ds-table-toolbar__group",
 			children: t
 		})]
 	});
-}), s = t(function({ className: e, children: t, ...r }, a) {
-	return /* @__PURE__ */ n("div", {
-		className: "ds-table-frame__scroll",
-		children: /* @__PURE__ */ n("table", {
-			ref: a,
-			className: i("ds-table", e),
-			...r,
-			children: t
+});
+function f(e) {
+	return t.toArray(e).some((e) => a(e) && (e.type !== n || f(e.props.children)));
+}
+var p = r({ emptyMessage: "No data found." }), m = i(function({ emptyMessage: e = "No data found.", isEmpty: t, className: n, children: r, ...i }, a) {
+	return /* @__PURE__ */ s(p.Provider, {
+		value: {
+			emptyMessage: e,
+			isEmpty: t
+		},
+		children: /* @__PURE__ */ s("div", {
+			className: "ds-table-frame__scroll",
+			children: /* @__PURE__ */ s("table", {
+				...i,
+				ref: a,
+				className: l("ds-table", n),
+				children: r
+			})
 		})
 	});
-}), c = t(function({ className: e, ...t }, r) {
-	return /* @__PURE__ */ n("thead", {
-		ref: r,
+}), h = i(function({ className: e, ...t }, n) {
+	return /* @__PURE__ */ s("thead", {
+		ref: n,
 		className: e,
 		...t
 	});
-}), l = t(function({ className: e, ...t }, r) {
-	return /* @__PURE__ */ n("tbody", {
+}), g = i(function({ className: e, children: t, ...n }, r) {
+	let { emptyMessage: i, isEmpty: a } = o(p);
+	return /* @__PURE__ */ s("tbody", {
 		ref: r,
 		className: e,
-		...t
+		...n,
+		children: a ?? !f(t) ? /* @__PURE__ */ s(_, { children: /* @__PURE__ */ s(y, {
+			colSpan: 1e3,
+			className: "ds-table__empty-cell",
+			children: /* @__PURE__ */ s(b, {
+				title: i,
+				role: "status"
+			})
+		}) }) : t
 	});
-}), u = t(function({ isSelected: e = !1, isInteractive: t = !1, className: r, ...i }, a) {
-	return /* @__PURE__ */ n("tr", {
-		ref: a,
+}), _ = i(function({ isSelected: e = !1, isInteractive: t = !1, className: n, ...r }, i) {
+	return /* @__PURE__ */ s("tr", {
+		ref: i,
 		"data-selected": e || void 0,
 		"data-interactive": t || void 0,
 		tabIndex: t ? 0 : void 0,
-		className: r,
-		...i
+		className: n,
+		...r
 	});
-}), d = t(function({ align: e = "start", width: t = "auto", className: r, ...i }, a) {
-	return /* @__PURE__ */ n("th", {
-		ref: a,
+}), v = i(function({ align: e = "start", width: t = "auto", className: n, ...r }, i) {
+	return /* @__PURE__ */ s("th", {
+		ref: i,
 		scope: "col",
 		"data-align": e,
 		"data-width": t,
-		className: r,
-		...i
+		className: n,
+		...r
 	});
-}), f = t(function({ align: e = "start", width: t = "auto", emphasis: r = "default", className: i, ...a }, o) {
-	return /* @__PURE__ */ n("td", {
-		ref: o,
+}), y = i(function({ align: e = "start", width: t = "auto", emphasis: n = "default", className: r, ...i }, a) {
+	return /* @__PURE__ */ s("td", {
+		ref: a,
 		"data-align": e,
 		"data-width": t,
-		"data-emphasis": r === "default" ? void 0 : r,
-		className: i,
-		...a
+		"data-emphasis": n === "default" ? void 0 : n,
+		className: r,
+		...i
 	});
-}), p = t(function({ icon: t = "info", title: a, description: o, action: s, className: c, ...l }, u) {
-	return /* @__PURE__ */ r("div", {
+}), b = i(function({ icon: t = "info", title: n = "No data found.", description: r, action: i, className: a, ...o }, u) {
+	return /* @__PURE__ */ c("div", {
 		ref: u,
-		className: i("ds-table-empty", c),
-		...l,
+		className: l("ds-table-empty", a),
+		...o,
 		children: [
-			/* @__PURE__ */ n(e, {
+			/* @__PURE__ */ s(e, {
 				name: t,
 				size: 24
 			}),
-			/* @__PURE__ */ n("span", {
+			/* @__PURE__ */ s("span", {
 				style: {
 					color: "var(--color-text)",
 					fontWeight: "var(--font-weight-bold)"
 				},
-				children: a
+				children: n
 			}),
-			o && /* @__PURE__ */ n("span", { children: o }),
-			s
+			r && /* @__PURE__ */ s("span", { children: r }),
+			i
 		]
 	});
 });
 //#endregion
-export { s as Table, l as TableBody, f as TableCell, p as TableEmpty, a as TableFrame, c as TableHead, d as TableHeaderCell, u as TableRow, o as TableToolbar };
+export { m as Table, g as TableBody, y as TableCell, b as TableEmpty, u as TableFrame, h as TableHead, v as TableHeaderCell, _ as TableRow, d as TableToolbar };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Icon","cx","parts","TableFrame","forwardRef","rest","className","TableToolbar","start","end","Table","TableHead","TableBody","TableRow","isSelected","isInteractive","TableHeaderCell","align","width","TableCell","emphasis","TableEmpty","icon","title","description","action"],"sources":["../../../src/components/Table/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type HTMLAttributes,\n  type ReactNode,\n  type TableHTMLAttributes,\n  type TdHTMLAttributes,\n  type ThHTMLAttributes,\n} from \"react\";\nimport { Icon } from \"../Icon\";\nimport type { IconName } from \"../Icon/icons\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport interface TableFrameProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n}\n\n/** The 3px collection frame every table, list and board sits inside. */\nexport const TableFrame = forwardRef<HTMLDivElement, TableFrameProps>(function TableFrame(\n  { className, children, ...rest },\n  ref,\n) {\n  return (\n    <div ref={ref} className={cx(\"ds-table-frame\", className)} {...rest}>\n      {children}\n    </div>\n  );\n});\n\nexport interface TableToolbarProps extends HTMLAttributes<HTMLDivElement> {\n  /** Left side — usually a select-all checkbox, a title and a count badge. */\n  start?: ReactNode;\n  /** Right side — filters and the one primary action. */\n  end?: ReactNode;\n}\n\n/** The band above the rules: selection, title, count, filters, primary action. */\nexport const TableToolbar = forwardRef<HTMLDivElement, TableToolbarProps>(\n  function TableToolbar({ start, end, className, ...rest }, ref) {\n    return (\n      <div ref={ref} className={cx(\"ds-table-toolbar\", className)} {...rest}>\n        <div className=\"ds-table-toolbar__group\">{start}</div>\n        <div className=\"ds-table-toolbar__group\">{end}</div>\n      </div>\n    );\n  },\n);\n\nexport interface TableProps extends TableHTMLAttributes<HTMLTableElement> {\n  children?: ReactNode;\n}\n\n/** The rules layer. Always render it inside a `TableFrame`. */\nexport const Table = forwardRef<HTMLTableElement, TableProps>(function Table(\n  { className, children, ...rest },\n  ref,\n) {\n  return (\n    <div className=\"ds-table-frame__scroll\">\n      <table ref={ref} className={cx(\"ds-table\", className)} {...rest}>\n        {children}\n      </table>\n    </div>\n  );\n});\n\nexport const TableHead = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(\n  function TableHead({ className, ...rest }, ref) {\n    return <thead ref={ref} className={className} {...rest} />;\n  },\n);\n\nexport const TableBody = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(\n  function TableBody({ className, ...rest }, ref) {\n    return <tbody ref={ref} className={className} {...rest} />;\n  },\n);\n\nexport interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {\n  /** Paints the soft fill and the solid rail. Never changes the row's size. */\n  isSelected?: boolean;\n  /** Marks the row clickable: hover fill plus a pointer cursor. */\n  isInteractive?: boolean;\n}\n\nexport const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(function TableRow(\n  { isSelected = false, isInteractive = false, className, ...rest },\n  ref,\n) {\n  return (\n    <tr\n      ref={ref}\n      data-selected={isSelected || undefined}\n      data-interactive={isInteractive || undefined}\n      tabIndex={isInteractive ? 0 : undefined}\n      className={className}\n      {...rest}\n    />\n  );\n});\n\nexport type TableAlign = \"start\" | \"end\";\nexport type TableCellWidth = \"auto\" | \"control\";\n\nexport interface TableHeaderCellProps\n  extends Omit<ThHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n  align?: TableAlign;\n  width?: TableCellWidth;\n}\n\nexport const TableHeaderCell = forwardRef<HTMLTableCellElement, TableHeaderCellProps>(\n  function TableHeaderCell({ align = \"start\", width = \"auto\", className, ...rest }, ref) {\n    return (\n      <th\n        ref={ref}\n        scope=\"col\"\n        data-align={align}\n        data-width={width}\n        className={className}\n        {...rest}\n      />\n    );\n  },\n);\n\nexport type TableCellEmphasis = \"default\" | \"primary\" | \"muted\";\n\nexport interface TableCellProps\n  extends Omit<TdHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n  align?: TableAlign;\n  width?: TableCellWidth;\n  /** `primary` is the row's identity cell — one per row, never two. */\n  emphasis?: TableCellEmphasis;\n}\n\nexport const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(function TableCell(\n  { align = \"start\", width = \"auto\", emphasis = \"default\", className, ...rest },\n  ref,\n) {\n  return (\n    <td\n      ref={ref}\n      data-align={align}\n      data-width={width}\n      data-emphasis={emphasis === \"default\" ? undefined : emphasis}\n      className={className}\n      {...rest}\n    />\n  );\n});\n\nexport interface TableEmptyProps extends HTMLAttributes<HTMLDivElement> {\n  icon?: IconName;\n  title: string;\n  description?: string;\n  /** One action at most — the thing that ends the empty state. */\n  action?: ReactNode;\n}\n\n/** What the frame shows when the collection has no rows. */\nexport const TableEmpty = forwardRef<HTMLDivElement, TableEmptyProps>(function TableEmpty(\n  { icon = \"info\", title, description, action, className, ...rest },\n  ref,\n) {\n  return (\n    <div ref={ref} className={cx(\"ds-table-empty\", className)} {...rest}>\n      <Icon name={icon} size={24} />\n      <span style={{ color: \"var(--color-text)\", fontWeight: \"var(--font-weight-bold)\" }}>\n        {title}\n      </span>\n      {description && <span>{description}</span>}\n      {action}\n    </div>\n  );\n});\n"],"mappings":";;;;AAYA,SAASC,EAAG,GAAGC,GAAuC;CACpD,OAAOA,EAAM,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AACvC;AAOA,IAAaC,IAAaC,EAA4C,SACpE,EAAE,cAAW,aAAU,GAAGC,KAC1B,GACA;CACA,OACE,kBAAC,OAAD;EAAU;EAAK,WAAWJ,EAAG,kBAAkBK,CAAS;EAAG,GAAID;EAC5D;CACE,CAAA;AAET,CAAC,GAUYE,IAAeH,EAC1B,SAAsB,EAAE,UAAO,QAAK,cAAW,GAAGC,KAAQ,GAAK;CAC7D,OACE,kBAAC,OAAD;EAAU;EAAK,WAAWJ,EAAG,oBAAoBK,CAAS;EAAG,GAAID;EAAjE,UAAA,CACE,kBAAC,OAAD;GAAK,WAAU;GAA2B,UAAAG;EAAW,CAAA,GACrD,kBAAC,OAAD;GAAK,WAAU;GAA2B,UAAAC;EAAS,CAAA,CAChD;;AAET,CACF,GAOaC,IAAQN,EAAyC,SAC5D,EAAE,cAAW,aAAU,GAAGC,KAC1B,GACA;CACA,OACE,kBAAC,OAAD;EAAK,WAAU;EACb,UAAA,kBAAC,SAAD;GAAY;GAAK,WAAWJ,EAAG,YAAYK,CAAS;GAAG,GAAID;GACxD;EACI,CAAA;CACJ,CAAA;AAET,CAAC,GAEYM,IAAYP,EACvB,SAAmB,EAAE,cAAW,GAAGC,KAAQ,GAAK;CAC9C,OAAO,kBAAC,SAAD;EAAY;EAAgB;EAAW,GAAIA;CAAO,CAAA;AAC3D,CACF,GAEaO,IAAYR,EACvB,SAAmB,EAAE,cAAW,GAAGC,KAAQ,GAAK;CAC9C,OAAO,kBAAC,SAAD;EAAY;EAAgB;EAAW,GAAIA;CAAO,CAAA;AAC3D,CACF,GASaQ,IAAWT,EAA+C,SACrE,EAAE,gBAAa,IAAO,mBAAgB,IAAO,cAAW,GAAGC,KAC3D,GACA;CACA,OACE,kBAAC,MAAD;EACO;EACL,iBAAeS,KAAc,KAAA;EAC7B,oBAAkBC,KAAiB,KAAA;EACnC,UAAUA,IAAgB,IAAI,KAAA;EACnB;EACX,GAAIV;CACL,CAAA;AAEL,CAAC,GAWYW,IAAkBZ,EAC7B,SAAyB,EAAE,WAAQ,SAAS,WAAQ,QAAQ,cAAW,GAAGC,KAAQ,GAAK;CACrF,OACE,kBAAC,MAAD;EACO;EACL,OAAM;EACN,cAAYY;EACZ,cAAYC;EACD;EACX,GAAIb;CACL,CAAA;AAEL,CACF,GAYac,IAAYf,EAAiD,SACxE,EAAE,WAAQ,SAAS,WAAQ,QAAQ,cAAW,WAAW,cAAW,GAAGC,KACvE,GACA;CACA,OACE,kBAAC,MAAD;EACO;EACL,cAAYY;EACZ,cAAYC;EACZ,iBAAeE,MAAa,YAAY,KAAA,IAAYA;EACzC;EACX,GAAIf;CACL,CAAA;AAEL,CAAC,GAWYgB,IAAajB,EAA4C,SACpE,EAAE,UAAO,QAAQ,UAAO,gBAAa,WAAQ,cAAW,GAAGC,KAC3D,GACA;CACA,OACE,kBAAC,OAAD;EAAU;EAAK,WAAWJ,EAAG,kBAAkBK,CAAS;EAAG,GAAID;EAA/D,UAAA;GACE,kBAACL,GAAD;IAAM,MAAMsB;IAAM,MAAM;GAAK,CAAA;GAC7B,kBAAC,QAAD;IAAM,OAAO;KAAE,OAAO;KAAqB,YAAY;IAA0B;IAC9E,UAAAC;GACG,CAAA;GACLC,KAAe,kBAAC,QAAD,EAAA,UAAOA,EAAkB,CAAA;GACxCC;EACE;;AAET,CAAC"}
+{"version":3,"file":"index.js","names":["Icon","cx","parts","TableFrame","forwardRef","rest","className","TableToolbar","start","end","hasBodyContent","Children","children","isValidElement","child","Fragment","TableContext","createContext","Table","TableHead","TableBody","useContext","isEmpty","TableRow","TableCell","TableEmpty","emptyMessage","isSelected","isInteractive","TableHeaderCell","align","width","emphasis","icon","title","description","action"],"sources":["../../../src/components/Table/index.tsx"],"sourcesContent":["import {\n  Children,\n  Fragment,\n  createContext,\n  forwardRef,\n  isValidElement,\n  useContext,\n  type HTMLAttributes,\n  type ReactNode,\n  type TableHTMLAttributes,\n  type TdHTMLAttributes,\n  type ThHTMLAttributes,\n} from \"react\";\nimport { Icon } from \"../Icon\";\nimport type { IconName } from \"../Icon/icons\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport interface TableFrameProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n}\n\n/** The 3px collection frame every table, list and board sits inside. */\nexport const TableFrame = forwardRef<HTMLDivElement, TableFrameProps>(function TableFrame(\n  { className, children, ...rest },\n  ref,\n) {\n  return (\n    <div ref={ref} className={cx(\"ds-table-frame\", className)} {...rest}>\n      {children}\n    </div>\n  );\n});\n\nexport interface TableToolbarProps extends HTMLAttributes<HTMLDivElement> {\n  /** Left side — usually a select-all checkbox, a title and a count badge. */\n  start?: ReactNode;\n  /** Right side — filters and the one primary action. */\n  end?: ReactNode;\n}\n\n/** The band above the rules: selection, title, count, filters, primary action. */\nexport const TableToolbar = forwardRef<HTMLDivElement, TableToolbarProps>(\n  function TableToolbar({ start, end, className, ...rest }, ref) {\n    return (\n      <div ref={ref} className={cx(\"ds-table-toolbar\", className)} {...rest}>\n        <div className=\"ds-table-toolbar__group\">{start}</div>\n        <div className=\"ds-table-toolbar__group\">{end}</div>\n      </div>\n    );\n  },\n);\n\nexport interface TableProps extends TableHTMLAttributes<HTMLTableElement> {\n  /** Message shown when a body has no rows. */\n  emptyMessage?: string;\n  /** Override empty-child detection when rows are rendered by custom components. */\n  isEmpty?: boolean;\n  children?: ReactNode;\n}\n\nfunction hasBodyContent(children: ReactNode): boolean {\n  return Children.toArray(children).some((child) =>\n    isValidElement<{ children?: ReactNode }>(child) &&\n      (child.type !== Fragment || hasBodyContent(child.props.children)),\n  );\n}\n\nconst TableContext = createContext<{\n  emptyMessage: string;\n  isEmpty?: boolean;\n}>({ emptyMessage: \"No data found.\" });\n\n/** The rules layer. Always render it inside a `TableFrame`. */\nexport const Table = forwardRef<HTMLTableElement, TableProps>(function Table(\n  { emptyMessage = \"No data found.\", isEmpty, className, children, ...rest },\n  ref,\n) {\n  return (\n    <TableContext.Provider value={{ emptyMessage, isEmpty }}>\n      <div className=\"ds-table-frame__scroll\">\n        <table {...rest} ref={ref} className={cx(\"ds-table\", className)}>\n          {children}\n        </table>\n      </div>\n    </TableContext.Provider>\n  );\n});\n\nexport const TableHead = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(\n  function TableHead({ className, ...rest }, ref) {\n    return <thead ref={ref} className={className} {...rest} />;\n  },\n);\n\nexport const TableBody = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(\n  function TableBody({ className, children, ...rest }, ref) {\n    const { emptyMessage, isEmpty } = useContext(TableContext);\n    return (\n      <tbody ref={ref} className={className} {...rest}>\n        {(isEmpty ?? !hasBodyContent(children)) ? (\n          <TableRow>\n            {/* HTML's maximum span covers the row without inspecting columns. */}\n            <TableCell colSpan={1000} className=\"ds-table__empty-cell\">\n              <TableEmpty title={emptyMessage} role=\"status\" />\n            </TableCell>\n          </TableRow>\n        ) : children}\n      </tbody>\n    );\n  },\n);\n\nexport interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {\n  /** Paints the soft fill and the solid rail. Never changes the row's size. */\n  isSelected?: boolean;\n  /** Marks the row clickable: hover fill plus a pointer cursor. */\n  isInteractive?: boolean;\n}\n\nexport const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(function TableRow(\n  { isSelected = false, isInteractive = false, className, ...rest },\n  ref,\n) {\n  return (\n    <tr\n      ref={ref}\n      data-selected={isSelected || undefined}\n      data-interactive={isInteractive || undefined}\n      tabIndex={isInteractive ? 0 : undefined}\n      className={className}\n      {...rest}\n    />\n  );\n});\n\nexport type TableAlign = \"start\" | \"end\";\nexport type TableCellWidth = \"auto\" | \"control\";\n\nexport interface TableHeaderCellProps\n  extends Omit<ThHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n  align?: TableAlign;\n  width?: TableCellWidth;\n}\n\nexport const TableHeaderCell = forwardRef<HTMLTableCellElement, TableHeaderCellProps>(\n  function TableHeaderCell({ align = \"start\", width = \"auto\", className, ...rest }, ref) {\n    return (\n      <th\n        ref={ref}\n        scope=\"col\"\n        data-align={align}\n        data-width={width}\n        className={className}\n        {...rest}\n      />\n    );\n  },\n);\n\nexport type TableCellEmphasis = \"default\" | \"primary\" | \"muted\";\n\nexport interface TableCellProps\n  extends Omit<TdHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n  align?: TableAlign;\n  width?: TableCellWidth;\n  /** `primary` is the row's identity cell — one per row, never two. */\n  emphasis?: TableCellEmphasis;\n}\n\nexport const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(function TableCell(\n  { align = \"start\", width = \"auto\", emphasis = \"default\", className, ...rest },\n  ref,\n) {\n  return (\n    <td\n      ref={ref}\n      data-align={align}\n      data-width={width}\n      data-emphasis={emphasis === \"default\" ? undefined : emphasis}\n      className={className}\n      {...rest}\n    />\n  );\n});\n\nexport interface TableEmptyProps extends HTMLAttributes<HTMLDivElement> {\n  icon?: IconName;\n  title?: string;\n  description?: string;\n  /** One action at most — the thing that ends the empty state. */\n  action?: ReactNode;\n}\n\n/** What the frame shows when the collection has no rows. */\nexport const TableEmpty = forwardRef<HTMLDivElement, TableEmptyProps>(function TableEmpty(\n  { icon = \"info\", title = \"No data found.\", description, action, className, ...rest },\n  ref,\n) {\n  return (\n    <div ref={ref} className={cx(\"ds-table-empty\", className)} {...rest}>\n      <Icon name={icon} size={24} />\n      <span style={{ color: \"var(--color-text)\", fontWeight: \"var(--font-weight-bold)\" }}>\n        {title}\n      </span>\n      {description && <span>{description}</span>}\n      {action}\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/components/Table/style.css

@@ -75,6 +75,10 @@
     font-weight: var(--font-weight-medium);
   }
 
+  .ds-table td.ds-table__empty-cell {
+    padding: 0;
+  }
+
   .ds-table td[data-emphasis="muted"] {
     color: var(--color-text-muted);
     font-size: var(--font-size-sm);