@devalok/shilp-sutra 0.53.0 → 0.54.0

package/dist/composed/loading-skeleton.js

@@ -3,102 +3,125 @@ import { Skeleton as t } from "../ui/skeleton.js";
 import * as n from "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/composed/loading-skeleton.tsx
-var a = n.forwardRef(function({ className: n, ...a }, o) {
+var a = (e, t) => Math.max(0, Math.floor(typeof e == "number" && !Number.isNaN(e) ? e : t));
+function o(e) {
+	return {
+		role: "status",
+		"aria-busy": !0,
+		"aria-label": e ?? "Loading"
+	};
+}
+function s({ label: e }) {
+	return /* @__PURE__ */ i("span", {
+		className: "sr-only",
+		children: [e ?? "Loading", "…"]
+	});
+}
+var c = n.forwardRef(function({ className: n, label: a, ...c }, l) {
 	return /* @__PURE__ */ i("div", {
-		ref: o,
-		...a,
-		className: e("rounded-surface border border-card-strong bg-surface-raised p-ds-05b", n),
+		ref: l,
+		...o(a),
+		...c,
+		className: e("rounded-surface border border-card bg-surface-raised p-ds-05b", n),
 		children: [
+			/* @__PURE__ */ r(s, { label: a }),
 			/* @__PURE__ */ i("div", {
 				className: "flex items-center justify-between pb-ds-05",
-				children: [/* @__PURE__ */ r(t, { className: "h-ds-05 w-[128px] bg-surface-raised-hover" }), /* @__PURE__ */ r(t, { className: "h-ico-sm w-ico-sm rounded bg-surface-raised-hover" })]
+				children: [/* @__PURE__ */ r(t, { className: "h-ds-05 w-ds-13" }), /* @__PURE__ */ r(t, { className: "h-ico-sm w-ico-sm rounded" })]
 			}),
 			/* @__PURE__ */ i("div", {
 				className: "space-y-ds-04",
 				children: [
-					/* @__PURE__ */ r(t, { className: "h-ds-04 w-full bg-surface-raised-hover" }),
-					/* @__PURE__ */ r(t, { className: "h-ds-04 w-4/5 bg-surface-raised-hover" }),
-					/* @__PURE__ */ r(t, { className: "h-ds-04 w-3/5 bg-surface-raised-hover" })
+					/* @__PURE__ */ r(t, { className: "h-ds-04 w-full" }),
+					/* @__PURE__ */ r(t, { className: "h-ds-04 w-4/5" }),
+					/* @__PURE__ */ r(t, { className: "h-ds-04 w-3/5" })
 				]
 			}),
 			/* @__PURE__ */ i("div", {
 				className: "flex items-center gap-ds-03 pt-ds-05",
-				children: [/* @__PURE__ */ r(t, { className: "h-ds-xs w-ds-xs rounded-pill bg-surface-raised-hover" }), /* @__PURE__ */ r(t, { className: "h-ds-04 w-ds-11 bg-surface-raised-hover" })]
+				children: [/* @__PURE__ */ r(t, { className: "h-ds-xs w-ds-xs rounded-pill" }), /* @__PURE__ */ r(t, { className: "h-ds-04 w-ds-11" })]
 			})
 		]
 	});
 });
-a.displayName = "CardSkeleton";
-var o = n.forwardRef(function({ rows: n = 5, columns: a = 4, className: o, ...s }, c) {
+c.displayName = "CardSkeleton";
+var l = n.forwardRef(function({ rows: n = 5, columns: c = 4, className: l, label: u, ...d }, f) {
+	let p = a(n, 5), m = Math.max(1, a(c, 4));
 	return /* @__PURE__ */ i("div", {
-		ref: c,
-		...s,
-		className: e("overflow-hidden rounded-surface border border-card-strong", o),
-		children: [/* @__PURE__ */ r("div", {
-			className: "flex items-center gap-ds-05 border-b border-surface-border-strong bg-surface-raised px-ds-05 py-ds-04",
-			children: Array.from({ length: a }).map((n, i) => /* @__PURE__ */ r(t, { className: e("h-ds-04 bg-surface-raised-hover", i === 0 ? "w-ds-13" : "flex-1") }, `head-${i}`))
-		}), Array.from({ length: n }).map((i, o) => /* @__PURE__ */ r("div", {
-			className: e("flex items-center gap-ds-05 px-ds-05 py-ds-04", o < n - 1 && "border-b border-surface-border-strong"),
-			style: { animationDelay: `${o * 50}ms` },
-			children: Array.from({ length: a }).map((n, i) => /* @__PURE__ */ r(t, { className: e("h-ds-04 bg-surface-raised-hover", i === 0 ? "w-ds-13" : "flex-1") }, `cell-${o}-${i}`))
-		}, `row-${o}`))]
+		ref: f,
+		...o(u),
+		...d,
+		className: e("overflow-hidden rounded-surface border border-card", l),
+		children: [
+			/* @__PURE__ */ r(s, { label: u }),
+			/* @__PURE__ */ r("div", {
+				className: "flex items-center gap-ds-05 border-b border-surface-border-strong bg-surface-raised px-ds-05 py-ds-04",
+				children: Array.from({ length: m }).map((n, i) => /* @__PURE__ */ r(t, { className: e("h-ds-04", i === 0 ? "w-ds-13" : "flex-1") }, `head-${i}`))
+			}),
+			Array.from({ length: p }).map((n, i) => /* @__PURE__ */ r("div", {
+				className: e("flex items-center gap-ds-05 px-ds-05 py-ds-04", i < p - 1 && "border-b border-surface-border-strong"),
+				children: Array.from({ length: m }).map((n, a) => /* @__PURE__ */ r(t, { className: e("h-ds-04", a === 0 ? "w-ds-13" : "flex-1") }, `cell-${i}-${a}`))
+			}, `row-${i}`))
+		]
 	});
 });
-o.displayName = "TableSkeleton";
-var s = n.forwardRef(function({ columns: n = 4, cardsPerColumn: a = 3, className: o, ...s }, c) {
-	return /* @__PURE__ */ r("div", {
-		ref: c,
-		...s,
-		className: e("flex gap-ds-05 overflow-x-auto", o),
-		children: Array.from({ length: n }).map((e, n) => /* @__PURE__ */ i("div", {
+l.displayName = "TableSkeleton";
+var u = n.forwardRef(function({ columns: n = 4, cardsPerColumn: c = 3, className: l, label: u, ...d }, f) {
+	let p = a(n, 4), m = a(c, 3);
+	return /* @__PURE__ */ i("div", {
+		ref: f,
+		...o(u),
+		...d,
+		className: e("flex gap-ds-05 overflow-x-auto", l),
+		children: [/* @__PURE__ */ r(s, { label: u }), Array.from({ length: p }).map((e, n) => /* @__PURE__ */ i("div", {
 			className: "flex w-[272px] shrink-0 flex-col gap-ds-03",
 			children: [/* @__PURE__ */ i("div", {
 				className: "flex items-center justify-between px-ds-02 py-ds-03",
 				children: [/* @__PURE__ */ i("div", {
 					className: "flex items-center gap-ds-03",
 					children: [
-						/* @__PURE__ */ r(t, { className: "h-ds-04 w-ds-04 rounded bg-surface-raised-hover" }),
-						/* @__PURE__ */ r(t, { className: "h-ds-04 w-ds-11 bg-surface-raised-hover" }),
-						/* @__PURE__ */ r(t, { className: "h-ds-05 w-ds-05b rounded-pill bg-surface-raised-hover" })
+						/* @__PURE__ */ r(t, { className: "h-ds-04 w-ds-04 rounded" }),
+						/* @__PURE__ */ r(t, { className: "h-ds-04 w-ds-11" }),
+						/* @__PURE__ */ r(t, { className: "h-ds-05 w-ds-05b rounded-pill" })
 					]
-				}), /* @__PURE__ */ r(t, { className: "h-ico-sm w-ico-sm rounded bg-surface-raised-hover" })]
-			}), Array.from({ length: a }).map((e, o) => /* @__PURE__ */ i("div", {
-				className: "rounded-surface border border-card-strong bg-surface-raised p-ds-04",
-				style: { animationDelay: `${(n * a + o) * 50}ms` },
+				}), /* @__PURE__ */ r(t, { className: "h-ico-sm w-ico-sm rounded" })]
+			}), Array.from({ length: m }).map((e, a) => /* @__PURE__ */ i("div", {
+				className: "rounded-surface border border-card bg-surface-raised p-ds-04",
 				children: [/* @__PURE__ */ i("div", {
 					className: "space-y-ds-03",
-					children: [/* @__PURE__ */ r(t, { className: "h-ds-04 w-4/5 bg-surface-raised-hover" }), /* @__PURE__ */ r(t, { className: "h-ds-04 w-3/5 bg-surface-raised-hover" })]
+					children: [/* @__PURE__ */ r(t, { className: "h-ds-04 w-4/5" }), /* @__PURE__ */ r(t, { className: "h-ds-04 w-3/5" })]
 				}), /* @__PURE__ */ i("div", {
 					className: "flex items-center justify-between pt-ds-04",
 					children: [/* @__PURE__ */ i("div", {
 						className: "flex items-center gap-ds-02b",
-						children: [/* @__PURE__ */ r(t, { className: "h-ico-md w-ico-md rounded-pill bg-surface-raised-hover" }), /* @__PURE__ */ r(t, { className: "h-ds-03 w-ds-10 bg-surface-raised-hover" })]
-					}), /* @__PURE__ */ r(t, { className: "h-ds-05 w-ds-lg rounded-pill bg-surface-raised-hover" })]
+						children: [/* @__PURE__ */ r(t, { className: "h-ico-md w-ico-md rounded-pill" }), /* @__PURE__ */ r(t, { className: "h-ds-03 w-ds-10" })]
+					}), /* @__PURE__ */ r(t, { className: "h-ds-05 w-ds-lg rounded-pill" })]
 				})]
-			}, `card-${n}-${o}`))]
-		}, `col-${n}`))
+			}, `card-${n}-${a}`))]
+		}, `col-${n}`))]
 	});
 });
-s.displayName = "BoardSkeleton";
-var c = n.forwardRef(function({ rows: n = 6, showAvatar: a = !0, className: o, ...s }, c) {
-	return /* @__PURE__ */ r("div", {
-		ref: c,
-		...s,
-		className: e("flex flex-col", o),
-		children: Array.from({ length: n }).map((o, s) => /* @__PURE__ */ i("div", {
-			className: e("flex items-center gap-ds-04 py-ds-04", s < n - 1 && "border-b border-surface-border-strong"),
-			style: { animationDelay: `${s * 50}ms` },
+u.displayName = "BoardSkeleton";
+var d = n.forwardRef(function({ rows: n = 6, showAvatar: c = !0, className: l, label: u, ...d }, f) {
+	let p = a(n, 6);
+	return /* @__PURE__ */ i("div", {
+		ref: f,
+		...o(u),
+		...d,
+		className: e("flex flex-col", l),
+		children: [/* @__PURE__ */ r(s, { label: u }), Array.from({ length: p }).map((n, a) => /* @__PURE__ */ i("div", {
+			className: e("flex items-center gap-ds-04 py-ds-04", a < p - 1 && "border-b border-surface-border-strong"),
 			children: [
-				a && /* @__PURE__ */ r(t, { className: "h-ds-sm w-ds-sm shrink-0 rounded-pill bg-surface-raised-hover" }),
+				c && /* @__PURE__ */ r(t, { className: "h-ds-sm w-ds-sm shrink-0 rounded-pill" }),
 				/* @__PURE__ */ i("div", {
 					className: "flex flex-1 flex-col gap-ds-02b",
-					children: [/* @__PURE__ */ r(t, { className: "h-ds-04 w-2/5 bg-surface-raised-hover" }), /* @__PURE__ */ r(t, { className: "h-ds-03 w-3/5 bg-surface-raised-hover" })]
+					children: [/* @__PURE__ */ r(t, { className: "h-ds-04 w-2/5" }), /* @__PURE__ */ r(t, { className: "h-ds-03 w-3/5" })]
 				}),
-				/* @__PURE__ */ r(t, { className: "h-ds-05b w-[56px] rounded-pill bg-surface-raised-hover" })
+				/* @__PURE__ */ r(t, { className: "h-ds-05b w-ds-09 rounded-pill" })
 			]
-		}, `list-${s}`))
+		}, `list-${a}`))]
 	});
 });
-c.displayName = "ListSkeleton";
+d.displayName = "ListSkeleton";
 //#endregion
-export { s as BoardSkeleton, a as CardSkeleton, c as ListSkeleton, o as TableSkeleton };
+export { u as BoardSkeleton, c as CardSkeleton, d as ListSkeleton, l as TableSkeleton };

package/dist/composed/loading-skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"loading-skeleton.js","names":[],"sources":["../../src/composed/loading-skeleton.tsx"],"sourcesContent":["// @server-safe\nimport * as React from 'react'\n\nimport { cn } from '../ui/lib/utils'\nimport { Skeleton } from '../ui/skeleton'\n\nexport interface CardSkeletonProps extends React.ComponentPropsWithoutRef<'div'> {\n  className?: string\n}\n\nconst CardSkeleton = React.forwardRef<HTMLDivElement, CardSkeletonProps>(\n  function CardSkeleton({ className, ...props }, ref) {\n  return (\n    <div\n      ref={ref}\n      {...props}\n      className={cn(\n        'rounded-surface border border-card-strong bg-surface-raised p-ds-05b',\n        className,\n      )}\n    >\n      <div className=\"flex items-center justify-between pb-ds-05\">\n        <Skeleton className=\"h-ds-05 w-[128px] bg-surface-raised-hover\" />\n        <Skeleton className=\"h-ico-sm w-ico-sm rounded bg-surface-raised-hover\" />\n      </div>\n      <div className=\"space-y-ds-04\">\n        <Skeleton className=\"h-ds-04 w-full bg-surface-raised-hover\" />\n        <Skeleton className=\"h-ds-04 w-4/5 bg-surface-raised-hover\" />\n        <Skeleton className=\"h-ds-04 w-3/5 bg-surface-raised-hover\" />\n      </div>\n      <div className=\"flex items-center gap-ds-03 pt-ds-05\">\n        <Skeleton className=\"h-ds-xs w-ds-xs rounded-pill bg-surface-raised-hover\" />\n        <Skeleton className=\"h-ds-04 w-ds-11 bg-surface-raised-hover\" />\n      </div>\n    </div>\n  )\n},\n)\n\nCardSkeleton.displayName = 'CardSkeleton'\n\nexport interface TableSkeletonProps extends CardSkeletonProps {\n  rows?: number\n  columns?: number\n}\n\nconst TableSkeleton = React.forwardRef<HTMLDivElement, TableSkeletonProps>(\n  function TableSkeleton({\n  rows = 5,\n  columns = 4,\n  className,\n  ...props\n}, ref) {\n  return (\n    <div\n      ref={ref}\n      {...props}\n      className={cn(\n        'overflow-hidden rounded-surface border border-card-strong',\n        className,\n      )}\n    >\n      {/* Header */}\n      <div className=\"flex items-center gap-ds-05 border-b border-surface-border-strong bg-surface-raised px-ds-05 py-ds-04\">\n        {Array.from({ length: columns }).map((_, i) => (\n          <Skeleton\n            key={`head-${i}`}\n            className={cn(\n              'h-ds-04 bg-surface-raised-hover',\n              i === 0 ? 'w-ds-13' : 'flex-1',\n            )}\n          />\n        ))}\n      </div>\n\n      {/* Rows */}\n      {Array.from({ length: rows }).map((_, rowIndex) => (\n        <div\n          key={`row-${rowIndex}`}\n          className={cn(\n            'flex items-center gap-ds-05 px-ds-05 py-ds-04',\n            rowIndex < rows - 1 && 'border-b border-surface-border-strong',\n          )}\n          style={{ animationDelay: `${rowIndex * 50}ms` }}\n        >\n          {Array.from({ length: columns }).map((_, colIndex) => (\n            <Skeleton\n              key={`cell-${rowIndex}-${colIndex}`}\n              className={cn(\n                'h-ds-04 bg-surface-raised-hover',\n                colIndex === 0 ? 'w-ds-13' : 'flex-1',\n              )}\n            />\n          ))}\n        </div>\n      ))}\n    </div>\n  )\n},\n)\n\nTableSkeleton.displayName = 'TableSkeleton'\n\nexport interface BoardSkeletonProps extends CardSkeletonProps {\n  columns?: number\n  cardsPerColumn?: number\n}\n\nconst BoardSkeleton = React.forwardRef<HTMLDivElement, BoardSkeletonProps>(\n  function BoardSkeleton({\n  columns = 4,\n  cardsPerColumn = 3,\n  className,\n  ...props\n}, ref) {\n  return (\n    <div ref={ref} {...props} className={cn('flex gap-ds-05 overflow-x-auto', className)}>\n      {Array.from({ length: columns }).map((_, colIndex) => (\n        <div\n          key={`col-${colIndex}`}\n          className=\"flex w-[272px] shrink-0 flex-col gap-ds-03\"\n        >\n          {/* Column header */}\n          <div className=\"flex items-center justify-between px-ds-02 py-ds-03\">\n            <div className=\"flex items-center gap-ds-03\">\n              <Skeleton className=\"h-ds-04 w-ds-04 rounded bg-surface-raised-hover\" />\n              <Skeleton className=\"h-ds-04 w-ds-11 bg-surface-raised-hover\" />\n              <Skeleton className=\"h-ds-05 w-ds-05b rounded-pill bg-surface-raised-hover\" />\n            </div>\n            <Skeleton className=\"h-ico-sm w-ico-sm rounded bg-surface-raised-hover\" />\n          </div>\n\n          {/* Column cards */}\n          {Array.from({ length: cardsPerColumn }).map((_, cardIndex) => (\n            <div\n              key={`card-${colIndex}-${cardIndex}`}\n              className=\"rounded-surface border border-card-strong bg-surface-raised p-ds-04\"\n              style={{ animationDelay: `${(colIndex * cardsPerColumn + cardIndex) * 50}ms` }}\n            >\n              <div className=\"space-y-ds-03\">\n                <Skeleton className=\"h-ds-04 w-4/5 bg-surface-raised-hover\" />\n                <Skeleton className=\"h-ds-04 w-3/5 bg-surface-raised-hover\" />\n              </div>\n              <div className=\"flex items-center justify-between pt-ds-04\">\n                <div className=\"flex items-center gap-ds-02b\">\n                  <Skeleton className=\"h-ico-md w-ico-md rounded-pill bg-surface-raised-hover\" />\n                  <Skeleton className=\"h-ds-03 w-ds-10 bg-surface-raised-hover\" />\n                </div>\n                <Skeleton className=\"h-ds-05 w-ds-lg rounded-pill bg-surface-raised-hover\" />\n              </div>\n            </div>\n          ))}\n        </div>\n      ))}\n    </div>\n  )\n},\n)\n\nBoardSkeleton.displayName = 'BoardSkeleton'\n\nexport interface ListSkeletonProps extends CardSkeletonProps {\n  rows?: number\n  showAvatar?: boolean\n}\n\nconst ListSkeleton = React.forwardRef<HTMLDivElement, ListSkeletonProps>(\n  function ListSkeleton({\n  rows = 6,\n  showAvatar = true,\n  className,\n  ...props\n}, ref) {\n  return (\n    <div ref={ref} {...props} className={cn('flex flex-col', className)}>\n      {Array.from({ length: rows }).map((_, i) => (\n        <div\n          key={`list-${i}`}\n          className={cn(\n            'flex items-center gap-ds-04 py-ds-04',\n            i < rows - 1 && 'border-b border-surface-border-strong',\n          )}\n          style={{ animationDelay: `${i * 50}ms` }}\n        >\n          {showAvatar && (\n            <Skeleton className=\"h-ds-sm w-ds-sm shrink-0 rounded-pill bg-surface-raised-hover\" />\n          )}\n          <div className=\"flex flex-1 flex-col gap-ds-02b\">\n            <Skeleton className=\"h-ds-04 w-2/5 bg-surface-raised-hover\" />\n            <Skeleton className=\"h-ds-03 w-3/5 bg-surface-raised-hover\" />\n          </div>\n          <Skeleton className=\"h-ds-05b w-[56px] rounded-pill bg-surface-raised-hover\" />\n        </div>\n      ))}\n    </div>\n  )\n},\n)\n\nListSkeleton.displayName = 'ListSkeleton'\n\nexport { BoardSkeleton, CardSkeleton, ListSkeleton,TableSkeleton }\n"],"mappings":"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"}
+{"version":3,"file":"loading-skeleton.js","names":[],"sources":["../../src/composed/loading-skeleton.tsx"],"sourcesContent":["// @server-safe\nimport * as React from 'react'\n\nimport { cn } from '../ui/lib/utils'\nimport { Skeleton } from '../ui/skeleton'\n\n// Non-negative integer count (guards Array.from against NaN / negatives → RangeError).\nconst clamp = (n: number | undefined, fallback: number) =>\n  Math.max(0, Math.floor(typeof n === 'number' && !Number.isNaN(n) ? n : fallback))\n\n// role=status + aria-busy so AT announces the loading region (child Skeletons are\n// aria-hidden). sr-only label gives the announcement text.\nfunction statusProps(label?: string) {\n  return { role: 'status' as const, 'aria-busy': true, 'aria-label': label ?? 'Loading' }\n}\nfunction SrLabel({ label }: { label?: string }) {\n  return <span className=\"sr-only\">{label ?? 'Loading'}…</span>\n}\n\nexport interface CardSkeletonProps extends React.ComponentPropsWithoutRef<'div'> {\n  className?: string\n  /** Accessible label for the loading region. @default 'Loading' */\n  label?: string\n}\n\nconst CardSkeleton = React.forwardRef<HTMLDivElement, CardSkeletonProps>(\n  function CardSkeleton({ className, label, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        {...statusProps(label)}\n        {...props}\n        className={cn('rounded-surface border border-card bg-surface-raised p-ds-05b', className)}\n      >\n        <SrLabel label={label} />\n        <div className=\"flex items-center justify-between pb-ds-05\">\n          <Skeleton className=\"h-ds-05 w-ds-13\" />\n          <Skeleton className=\"h-ico-sm w-ico-sm rounded\" />\n        </div>\n        <div className=\"space-y-ds-04\">\n          <Skeleton className=\"h-ds-04 w-full\" />\n          <Skeleton className=\"h-ds-04 w-4/5\" />\n          <Skeleton className=\"h-ds-04 w-3/5\" />\n        </div>\n        <div className=\"flex items-center gap-ds-03 pt-ds-05\">\n          <Skeleton className=\"h-ds-xs w-ds-xs rounded-pill\" />\n          <Skeleton className=\"h-ds-04 w-ds-11\" />\n        </div>\n      </div>\n    )\n  },\n)\nCardSkeleton.displayName = 'CardSkeleton'\n\nexport interface TableSkeletonProps extends CardSkeletonProps {\n  rows?: number\n  columns?: number\n}\n\nconst TableSkeleton = React.forwardRef<HTMLDivElement, TableSkeletonProps>(\n  function TableSkeleton({ rows = 5, columns = 4, className, label, ...props }, ref) {\n    const r = clamp(rows, 5)\n    const c = Math.max(1, clamp(columns, 4))\n    return (\n      <div\n        ref={ref}\n        {...statusProps(label)}\n        {...props}\n        className={cn('overflow-hidden rounded-surface border border-card', className)}\n      >\n        <SrLabel label={label} />\n        {/* Header */}\n        <div className=\"flex items-center gap-ds-05 border-b border-surface-border-strong bg-surface-raised px-ds-05 py-ds-04\">\n          {Array.from({ length: c }).map((_, i) => (\n            <Skeleton key={`head-${i}`} className={cn('h-ds-04', i === 0 ? 'w-ds-13' : 'flex-1')} />\n          ))}\n        </div>\n        {/* Rows */}\n        {Array.from({ length: r }).map((_, rowIndex) => (\n          <div\n            key={`row-${rowIndex}`}\n            className={cn(\n              'flex items-center gap-ds-05 px-ds-05 py-ds-04',\n              rowIndex < r - 1 && 'border-b border-surface-border-strong',\n            )}\n          >\n            {Array.from({ length: c }).map((_, colIndex) => (\n              <Skeleton\n                key={`cell-${rowIndex}-${colIndex}`}\n                className={cn('h-ds-04', colIndex === 0 ? 'w-ds-13' : 'flex-1')}\n              />\n            ))}\n          </div>\n        ))}\n      </div>\n    )\n  },\n)\nTableSkeleton.displayName = 'TableSkeleton'\n\nexport interface BoardSkeletonProps extends CardSkeletonProps {\n  columns?: number\n  cardsPerColumn?: number\n}\n\nconst BoardSkeleton = React.forwardRef<HTMLDivElement, BoardSkeletonProps>(\n  function BoardSkeleton({ columns = 4, cardsPerColumn = 3, className, label, ...props }, ref) {\n    const c = clamp(columns, 4)\n    const cards = clamp(cardsPerColumn, 3)\n    return (\n      <div ref={ref} {...statusProps(label)} {...props} className={cn('flex gap-ds-05 overflow-x-auto', className)}>\n        <SrLabel label={label} />\n        {Array.from({ length: c }).map((_, colIndex) => (\n          <div key={`col-${colIndex}`} className=\"flex w-[272px] shrink-0 flex-col gap-ds-03\">\n            {/* Column header */}\n            <div className=\"flex items-center justify-between px-ds-02 py-ds-03\">\n              <div className=\"flex items-center gap-ds-03\">\n                <Skeleton className=\"h-ds-04 w-ds-04 rounded\" />\n                <Skeleton className=\"h-ds-04 w-ds-11\" />\n                <Skeleton className=\"h-ds-05 w-ds-05b rounded-pill\" />\n              </div>\n              <Skeleton className=\"h-ico-sm w-ico-sm rounded\" />\n            </div>\n            {/* Column cards */}\n            {Array.from({ length: cards }).map((_, cardIndex) => (\n              <div\n                key={`card-${colIndex}-${cardIndex}`}\n                className=\"rounded-surface border border-card bg-surface-raised p-ds-04\"\n              >\n                <div className=\"space-y-ds-03\">\n                  <Skeleton className=\"h-ds-04 w-4/5\" />\n                  <Skeleton className=\"h-ds-04 w-3/5\" />\n                </div>\n                <div className=\"flex items-center justify-between pt-ds-04\">\n                  <div className=\"flex items-center gap-ds-02b\">\n                    <Skeleton className=\"h-ico-md w-ico-md rounded-pill\" />\n                    <Skeleton className=\"h-ds-03 w-ds-10\" />\n                  </div>\n                  <Skeleton className=\"h-ds-05 w-ds-lg rounded-pill\" />\n                </div>\n              </div>\n            ))}\n          </div>\n        ))}\n      </div>\n    )\n  },\n)\nBoardSkeleton.displayName = 'BoardSkeleton'\n\nexport interface ListSkeletonProps extends CardSkeletonProps {\n  rows?: number\n  showAvatar?: boolean\n}\n\nconst ListSkeleton = React.forwardRef<HTMLDivElement, ListSkeletonProps>(\n  function ListSkeleton({ rows = 6, showAvatar = true, className, label, ...props }, ref) {\n    const r = clamp(rows, 6)\n    return (\n      <div ref={ref} {...statusProps(label)} {...props} className={cn('flex flex-col', className)}>\n        <SrLabel label={label} />\n        {Array.from({ length: r }).map((_, i) => (\n          <div\n            key={`list-${i}`}\n            className={cn(\n              'flex items-center gap-ds-04 py-ds-04',\n              i < r - 1 && 'border-b border-surface-border-strong',\n            )}\n          >\n            {showAvatar && <Skeleton className=\"h-ds-sm w-ds-sm shrink-0 rounded-pill\" />}\n            <div className=\"flex flex-1 flex-col gap-ds-02b\">\n              <Skeleton className=\"h-ds-04 w-2/5\" />\n              <Skeleton className=\"h-ds-03 w-3/5\" />\n            </div>\n            <Skeleton className=\"h-ds-05b w-ds-09 rounded-pill\" />\n          </div>\n        ))}\n      </div>\n    )\n  },\n)\nListSkeleton.displayName = 'ListSkeleton'\n\nexport { BoardSkeleton, CardSkeleton, ListSkeleton, TableSkeleton }\n"],"mappings":"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"}

package/dist/composed/master-detail.d.ts

@@ -1,13 +1,23 @@
 "use client";
 import * as React from 'react';
 /**
- * A responsive master-detail layout. On desktop, shows a fixed-width list panel
- * alongside a detail panel. Below the breakpoint, switches to a stacked view
- * with animated transitions and a back button.
+ * A responsive master-detail layout. Desktop: fixed-width list panel + detail
+ * panel. Below the breakpoint: stacked view with a back button. The list is an
+ * ARIA `listbox` with roving keyboard nav (Arrow/Home/End + Enter/Space).
+ *
+ * Selection can be **controlled** (`selected`) or **owned** by the component
+ * (`defaultSelected` + `onSelect`, deriving each row's active state from its
+ * `value` — no hand-wiring `active` + `onClick` per row).
  */
-export interface MasterDetailProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** ID of currently selected item. null = no selection (show list on mobile). */
+export interface MasterDetailProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    /** Controlled selected item id. `null` = no selection. Omit for uncontrolled. */
     selected?: string | null;
+    /** Uncontrolled initial selection. */
+    defaultSelected?: string | null;
+    /** Called with a row's `value` when it's chosen (click or Enter/Space). */
+    onSelect?: (value: string) => void;
+    /** Accessible name for the list (the `listbox`). @default 'Items' */
+    label?: string;
     /** Called when mobile back button is pressed. */
     onBack?: () => void;
     /** Master panel width on desktop. @default '280px' */
@@ -16,7 +26,7 @@ export interface MasterDetailProps extends React.HTMLAttributes<HTMLDivElement>
     breakpoint?: 'sm' | 'md' | 'lg';
     /** Content to show in the detail pane when nothing is selected. */
     emptyState?: React.ReactNode;
-    /** Called when user presses ArrowUp/ArrowDown while the list has focus. */
+    /** Called when the user presses ArrowUp/ArrowDown while the list has focus. */
     onNavigate?: (direction: 'up' | 'down') => void;
 }
 interface MasterDetailListProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -24,11 +34,14 @@ interface MasterDetailListProps extends React.HTMLAttributes<HTMLDivElement> {
 interface MasterDetailDetailProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 interface MasterDetailListItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Explicit active state. Omit to derive from `value` === the selected id. */
     active?: boolean;
+    /** Row id — enables derived selection + auto-fires `onSelect` on activate. */
+    value?: string;
 }
-declare function MasterDetailList({ children, className, ...props }: MasterDetailListProps): React.JSX.Element | null;
+declare function MasterDetailList({ children, className, 'aria-label': ariaLabel, ...props }: MasterDetailListProps): React.JSX.Element | null;
 declare function MasterDetailDetail({ children, className, ...props }: MasterDetailDetailProps): React.JSX.Element | null;
-declare function MasterDetailRoot({ selected, onBack, masterWidth, breakpoint, emptyState, onNavigate, children, className, style, ...props }: MasterDetailProps): React.JSX.Element;
+declare function MasterDetailRoot({ selected, defaultSelected, onSelect, label, onBack, masterWidth, breakpoint, emptyState, onNavigate, children, className, style, ...props }: MasterDetailProps): React.JSX.Element;
 declare const MasterDetail: typeof MasterDetailRoot & {
     List: typeof MasterDetailList;
     Detail: typeof MasterDetailDetail;

package/dist/composed/master-detail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"master-detail.d.ts","sourceRoot":"","sources":["../../src/composed/master-detail.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAW9B;;;;GAIG;AACH,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E,gFAAgF;IAChF,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,mEAAmE;IACnE,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAC/B,mEAAmE;IACnE,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,2EAA2E;IAC3E,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,CAAA;CAChD;AAED,UAAU,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE/E,UAAU,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEjF,UAAU,yBAA0B,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACvF,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AA0DD,iBAAS,gBAAgB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,4BAgFjF;AAED,iBAAS,kBAAkB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,4BA4BrF;AAwCD,iBAAS,gBAAgB,CAAC,EACxB,QAAe,EACf,MAAM,EACN,WAAqB,EACrB,UAAiB,EACjB,UAAU,EACV,UAAU,EACV,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,iBAAiB,qBA4BnB;AAED,QAAA,MAAM,YAAY;;;;CAIhB,CAAA;AAEF,OAAO,EAAE,YAAY,EAAE,CAAA;AACvB,YAAY,EAAE,yBAAyB,EAAE,CAAA"}
+{"version":3,"file":"master-detail.d.ts","sourceRoot":"","sources":["../../src/composed/master-detail.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B;;;;;;;;GAQG;AACH,MAAM,WAAW,iBAEf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC9D,iFAAiF;IACjF,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,sCAAsC;IACtC,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC/B,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,mEAAmE;IACnE,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAC/B,mEAAmE;IACnE,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,+EAA+E;IAC/E,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,CAAA;CAChD;AAED,UAAU,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAC/E,UAAU,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AACjF,UAAU,yBAA0B,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACvF,8EAA8E;IAC9E,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AA6CD,iBAAS,gBAAgB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,4BA2D1G;AAED,iBAAS,kBAAkB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,4BA4BrF;AA4CD,iBAAS,gBAAgB,CAAC,EACxB,QAAQ,EACR,eAAsB,EACtB,QAAQ,EACR,KAAe,EACf,MAAM,EACN,WAAqB,EACrB,UAAiB,EACjB,UAAU,EACV,UAAU,EACV,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,iBAAiB,qBAmCnB;AAED,QAAA,MAAM,YAAY;;;;CAIhB,CAAA;AAEF,OAAO,EAAE,YAAY,EAAE,CAAA;AACvB,YAAY,EAAE,yBAAyB,EAAE,CAAA"}

package/dist/composed/master-detail.js

@@ -6,14 +6,14 @@ import { Button as r } from "../ui/button.js";
 import * as i from "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import { IconArrowLeft as s } from "@tabler/icons-react";
-import { AnimatePresence as c, motion as l } from "framer-motion";
+import { AnimatePresence as c, motion as l, useReducedMotion as u } from "framer-motion";
 //#region src/composed/master-detail.tsx
-var u = {
+var d = {
 	sm: "640px",
 	md: "768px",
 	lg: "1024px"
 };
-function d(e) {
+function f(e) {
 	let [t, n] = i.useState(!1);
 	return i.useEffect(() => {
 		if (typeof window > "u") return;
@@ -23,77 +23,84 @@ function d(e) {
 		return t.addEventListener("change", r), () => t.removeEventListener("change", r);
 	}, [e]), t;
 }
-var f = i.createContext({
+var p = i.createContext({
 	selected: null,
+	label: "Items",
 	isMobile: !1,
 	activeIndex: 0,
 	setActiveIndex: () => {},
-	registerItemRef: () => {},
-	itemCount: 0,
-	setItemCount: () => {}
+	registerItemRef: () => {}
 });
-function p({ children: e, className: n, ...r }) {
-	let { selected: o, isMobile: s, onNavigate: c, activeIndex: l, setActiveIndex: u, registerItemRef: d, setItemCount: p } = i.useContext(f), m = i.useRef([]), h = i.Children.count(e);
-	i.useEffect(() => {
-		p(h);
-	}, [h, p]);
-	let g = i.useMemo(() => {
+function m(e, t) {
+	if (!i.isValidElement(e)) return !1;
+	let n = e.props;
+	return n.active ?? (n.value != null && n.value === t);
+}
+function h({ children: e, className: n, "aria-label": r, ...o }) {
+	let { selected: s, label: c, isMobile: l, onNavigate: u, activeIndex: d, setActiveIndex: f, registerItemRef: h } = i.useContext(p), g = i.useRef([]), _ = i.Children.count(e), v = i.useMemo(() => {
 		let t = -1;
 		return i.Children.forEach(e, (e, n) => {
-			i.isValidElement(e) && e.props.active && (t = n);
+			m(e, s) && (t = n);
 		}), t;
-	}, [e]);
+	}, [e, s]);
 	if (i.useEffect(() => {
-		g >= 0 && u(g);
-	}, [g, u]), s && o) return null;
-	function _(e) {
+		v >= 0 && f(v);
+	}, [v, f]), l && s) return null;
+	function y(e) {
 		if (e.key === "ArrowDown") {
 			e.preventDefault();
-			let t = Math.min(l + 1, h - 1);
-			u(t), m.current[t]?.focus(), c?.("down");
+			let t = Math.min(d + 1, _ - 1);
+			f(t), g.current[t]?.focus(), u?.("down");
 		} else if (e.key === "ArrowUp") {
 			e.preventDefault();
-			let t = Math.max(l - 1, 0);
-			u(t), m.current[t]?.focus(), c?.("up");
-		} else if (e.key === "Home") e.preventDefault(), u(0), m.current[0]?.focus();
+			let t = Math.max(d - 1, 0);
+			f(t), g.current[t]?.focus(), u?.("up");
+		} else if (e.key === "Home") e.preventDefault(), f(0), g.current[0]?.focus();
 		else if (e.key === "End") {
 			e.preventDefault();
-			let t = h - 1;
-			u(t), m.current[t]?.focus();
+			let t = _ - 1;
+			f(t), g.current[t]?.focus();
 		}
 	}
 	return /* @__PURE__ */ a("div", {
 		role: "listbox",
+		"aria-label": r ?? c,
 		tabIndex: -1,
-		className: t("overflow-y-auto focus-visible:outline-hidden", !s && "border-r border-surface-border", n),
-		onKeyDown: _,
-		...r,
+		className: t("overflow-y-auto focus-visible:outline-hidden", !l && "border-e border-surface-border", n),
+		onKeyDown: y,
+		...o,
 		children: i.Children.map(e, (e, t) => i.isValidElement(e) ? i.cloneElement(e, {
 			ref: (e) => {
-				m.current[t] = e, d(t, e);
+				g.current[t] = e, h(t, e);
 			},
-			tabIndex: t === l ? 0 : -1
+			tabIndex: t === d ? 0 : -1
 		}) : e)
 	});
 }
-function m({ children: u, className: d, ...p }) {
-	let { selected: m, isMobile: h, onBack: g, emptyState: _ } = i.useContext(f);
-	return h && !m ? null : /* @__PURE__ */ o("div", {
-		className: t("flex-1 overflow-y-auto", d),
-		...p,
-		children: [h && g && /* @__PURE__ */ a("div", {
+function g({ children: d, className: f, ...m }) {
+	let { selected: h, isMobile: g, onBack: _, emptyState: v } = i.useContext(p), y = u();
+	return g && !h ? null : /* @__PURE__ */ o("div", {
+		role: "region",
+		"aria-label": "Detail",
+		"aria-live": "polite",
+		className: t("flex-1 overflow-y-auto", f),
+		...m,
+		children: [g && _ && /* @__PURE__ */ a("div", {
 			className: "border-b border-surface-border px-ds-04 py-ds-03",
 			children: /* @__PURE__ */ a(r, {
 				variant: "ghost",
 				size: "xs",
-				onClick: g,
-				startIcon: /* @__PURE__ */ a(n, { icon: s }),
+				onClick: _,
+				startIcon: /* @__PURE__ */ a(n, {
+					icon: s,
+					className: "rtl:-scale-x-100"
+				}),
 				children: "Back"
 			})
 		}), /* @__PURE__ */ a(c, {
 			mode: "wait",
 			children: /* @__PURE__ */ a(l.div, {
-				initial: h ? {
+				initial: g && !y ? {
 					x: 20,
 					opacity: 0
 				} : !1,
@@ -101,64 +108,71 @@ function m({ children: u, className: d, ...p }) {
 					x: 0,
 					opacity: 1
 				},
-				exit: h ? {
+				exit: g && !y ? {
 					x: -20,
 					opacity: 0
 				} : void 0,
-				transition: e.snappy,
-				children: m ? u : _ ?? u
-			}, m ?? "empty")
+				transition: y ? { duration: 0 } : e.snappy,
+				children: h ? d : v ?? d
+			}, h ?? "empty")
 		})]
 	});
 }
-var h = i.forwardRef(function({ active: e = !1, children: n, className: r, onKeyDown: i, ...o }, s) {
-	function c(e) {
-		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.target.click()), i?.(e);
+var _ = i.forwardRef(function({ active: e, value: n, children: r, className: o, onKeyDown: s, onClick: c, ...l }, u) {
+	let { selected: d, onSelect: f } = i.useContext(p), m = e ?? (n != null && n === d);
+	function h(e) {
+		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.currentTarget.click()), s?.(e);
+	}
+	function g(e) {
+		n != null && f?.(n), c?.(e);
 	}
 	return /* @__PURE__ */ a("button", {
-		ref: s,
+		ref: u,
 		type: "button",
 		role: "option",
-		"aria-selected": e,
-		"data-active": e || void 0,
-		onKeyDown: c,
-		className: t("flex w-full items-center px-ds-04 py-ds-03 text-left text-body-md font-sans text-surface-fg", "transition-colors duration-fast-01 ease-productive-standard", "hover:bg-surface-raised-hover", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-7 focus-visible:ring-inset", e && "bg-accent-2 text-accent-11 font-medium", r),
-		...o,
-		children: n
+		"aria-selected": m,
+		"data-active": m || void 0,
+		onKeyDown: h,
+		onClick: g,
+		className: t("flex w-full items-center px-ds-04 py-ds-03 text-left text-body-md font-sans text-surface-fg", "transition-colors duration-fast-01 ease-productive-standard", "hover:bg-surface-raised-hover", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-7 focus-visible:ring-inset", m && "bg-accent-2 text-accent-11 font-medium", o),
+		...l,
+		children: r
 	});
 });
-function g({ selected: e = null, onBack: n, masterWidth: r = "280px", breakpoint: o = "md", emptyState: s, onNavigate: c, children: l, className: p, style: m, ...h }) {
-	let g = d(`(max-width: ${u[o]})`), [_, v] = i.useState(0), [y, b] = i.useState(0), x = i.useRef([]), S = i.useCallback((e, t) => {
-		x.current[e] = t;
+function v({ selected: e, defaultSelected: n = null, onSelect: r, label: o = "Items", onBack: s, masterWidth: c = "280px", breakpoint: l = "md", emptyState: u, onNavigate: m, children: h, className: g, style: _, ...v }) {
+	let y = f(`(max-width: ${d[l]})`), [b, x] = i.useState(0), S = i.useRef([]), C = e !== void 0, [w, T] = i.useState(n), E = C ? e ?? null : w, D = i.useCallback((e) => {
+		C || T(e), r?.(e);
+	}, [C, r]), O = i.useCallback((e, t) => {
+		S.current[e] = t;
 	}, []);
-	return /* @__PURE__ */ a(f.Provider, {
+	return /* @__PURE__ */ a(p.Provider, {
 		value: {
-			selected: e,
-			isMobile: g,
-			onBack: n,
-			emptyState: s,
-			onNavigate: c,
-			activeIndex: _,
-			setActiveIndex: v,
-			registerItemRef: S,
-			itemCount: y,
-			setItemCount: b
+			selected: E,
+			onSelect: D,
+			label: o,
+			isMobile: y,
+			onBack: s,
+			emptyState: u,
+			onNavigate: m,
+			activeIndex: b,
+			setActiveIndex: x,
+			registerItemRef: O
 		},
 		children: /* @__PURE__ */ a("div", {
-			className: t("flex h-full", !g && "grid", p),
+			className: t("flex h-full", !y && "grid", g),
 			style: {
-				...m,
-				...g ? {} : { gridTemplateColumns: `${r} 1fr` }
+				..._,
+				...y ? {} : { gridTemplateColumns: `${c} 1fr` }
 			},
-			...h,
-			children: l
+			...v,
+			children: h
 		})
 	});
 }
-var _ = Object.assign(g, {
-	List: p,
-	Detail: m,
-	ListItem: h
+var y = Object.assign(v, {
+	List: h,
+	Detail: g,
+	ListItem: _
 });
 //#endregion
-export { _ as MasterDetail };
+export { y as MasterDetail };