@devalok/shilp-sutra 0.53.0 → 0.55.0

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 };

package/dist/composed/master-detail.js.map

@@ -1 +1 @@
-{"version":3,"file":"master-detail.js","names":[],"sources":["../../src/composed/master-detail.tsx"],"sourcesContent":["'use client'\n\nimport { IconArrowLeft } from '@tabler/icons-react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Button } from '../ui/button'\nimport { Icon } from '../ui/icon'\nimport { springs } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\n\n// ============================================================\n// Types\n// ============================================================\n\n/**\n * A responsive master-detail layout. On desktop, shows a fixed-width list panel\n * alongside a detail panel. Below the breakpoint, switches to a stacked view\n * with animated transitions and a back button.\n */\nexport interface MasterDetailProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** ID of currently selected item. null = no selection (show list on mobile). */\n  selected?: string | null\n  /** Called when mobile back button is pressed. */\n  onBack?: () => void\n  /** Master panel width on desktop. @default '280px' */\n  masterWidth?: string\n  /** Breakpoint below which stacked mode activates. @default 'md' */\n  breakpoint?: 'sm' | 'md' | 'lg'\n  /** Content to show in the detail pane when nothing is selected. */\n  emptyState?: React.ReactNode\n  /** Called when user presses ArrowUp/ArrowDown while the list has focus. */\n  onNavigate?: (direction: 'up' | 'down') => void\n}\n\ninterface MasterDetailListProps extends React.HTMLAttributes<HTMLDivElement> {}\n\ninterface MasterDetailDetailProps extends React.HTMLAttributes<HTMLDivElement> {}\n\ninterface MasterDetailListItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  active?: boolean\n}\n\n// ============================================================\n// Breakpoint values\n// ============================================================\n\nconst breakpoints: Record<string, string> = {\n  sm: '640px',\n  md: '768px',\n  lg: '1024px',\n}\n\nfunction useMediaQuery(query: string): boolean {\n  const [matches, setMatches] = React.useState(false)\n\n  React.useEffect(() => {\n    if (typeof window === 'undefined') return\n    const mql = window.matchMedia(query)\n    setMatches(mql.matches)\n    const handler = (e: MediaQueryListEvent) => setMatches(e.matches)\n    mql.addEventListener('change', handler)\n    return () => mql.removeEventListener('change', handler)\n  }, [query])\n\n  return matches\n}\n\n// ============================================================\n// Context\n// ============================================================\n\ninterface MasterDetailContextValue {\n  selected: string | null\n  isMobile: boolean\n  onBack?: () => void\n  emptyState?: React.ReactNode\n  onNavigate?: (direction: 'up' | 'down') => void\n  activeIndex: number\n  setActiveIndex: (index: number) => void\n  registerItemRef: (index: number, el: HTMLButtonElement | null) => void\n  itemCount: number\n  setItemCount: (count: number) => void\n}\n\nconst MasterDetailContext = React.createContext<MasterDetailContextValue>({\n  selected: null,\n  isMobile: false,\n  activeIndex: 0,\n  setActiveIndex: () => {},\n  registerItemRef: () => {},\n  itemCount: 0,\n  setItemCount: () => {},\n})\n\n// ============================================================\n// Compound Components\n// ============================================================\n\nfunction MasterDetailList({ children, className, ...props }: MasterDetailListProps) {\n  const { selected, isMobile, onNavigate, activeIndex, setActiveIndex, registerItemRef, setItemCount } = React.useContext(MasterDetailContext)\n  const itemRefsLocal = React.useRef<(HTMLButtonElement | null)[]>([])\n\n  // Count children and register with context\n  const childCount = React.Children.count(children)\n  React.useEffect(() => {\n    setItemCount(childCount)\n  }, [childCount, setItemCount])\n\n  // Keep roving focus in sync with the active/selected item, so keyboard nav\n  // starts on the current selection instead of always the first row.\n  const activeChildIndex = React.useMemo(() => {\n    let idx = -1\n    React.Children.forEach(children, (child, i) => {\n      if (\n        React.isValidElement(child) &&\n        (child.props as { active?: boolean }).active\n      ) {\n        idx = i\n      }\n    })\n    return idx\n  }, [children])\n  React.useEffect(() => {\n    if (activeChildIndex >= 0) setActiveIndex(activeChildIndex)\n  }, [activeChildIndex, setActiveIndex])\n\n  // On mobile, hide list when something is selected\n  if (isMobile && selected) return null\n\n  function handleKeyDown(e: React.KeyboardEvent) {\n    if (e.key === 'ArrowDown') {\n      e.preventDefault()\n      const next = Math.min(activeIndex + 1, childCount - 1)\n      setActiveIndex(next)\n      itemRefsLocal.current[next]?.focus()\n      onNavigate?.('down')\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault()\n      const prev = Math.max(activeIndex - 1, 0)\n      setActiveIndex(prev)\n      itemRefsLocal.current[prev]?.focus()\n      onNavigate?.('up')\n    } else if (e.key === 'Home') {\n      e.preventDefault()\n      setActiveIndex(0)\n      itemRefsLocal.current[0]?.focus()\n    } else if (e.key === 'End') {\n      e.preventDefault()\n      const last = childCount - 1\n      setActiveIndex(last)\n      itemRefsLocal.current[last]?.focus()\n    }\n  }\n\n  return (\n    <div\n      role=\"listbox\"\n      tabIndex={-1}\n      className={cn(\n        'overflow-y-auto focus-visible:outline-hidden',\n        !isMobile && 'border-r border-surface-border',\n        className,\n      )}\n      onKeyDown={handleKeyDown}\n      {...props}\n    >\n      {React.Children.map(children, (child, i) => {\n        if (!React.isValidElement(child)) return child\n        return React.cloneElement(child as React.ReactElement<any>, {\n          ref: (el: HTMLButtonElement | null) => {\n            itemRefsLocal.current[i] = el\n            registerItemRef(i, el)\n          },\n          tabIndex: i === activeIndex ? 0 : -1,\n        })\n      })}\n    </div>\n  )\n}\n\nfunction MasterDetailDetail({ children, className, ...props }: MasterDetailDetailProps) {\n  const { selected, isMobile, onBack, emptyState } = React.useContext(MasterDetailContext)\n\n  // On mobile, hide detail when nothing selected\n  if (isMobile && !selected) return null\n\n  return (\n    <div className={cn('flex-1 overflow-y-auto', className)} {...props}>\n      {isMobile && onBack && (\n        <div className=\"border-b border-surface-border px-ds-04 py-ds-03\">\n          <Button variant=\"ghost\" size=\"xs\" onClick={onBack} startIcon={<Icon icon={IconArrowLeft} />}>\n            Back\n          </Button>\n        </div>\n      )}\n      <AnimatePresence mode=\"wait\">\n        <motion.div\n          key={selected ?? 'empty'}\n          initial={isMobile ? { x: 20, opacity: 0 } : false}\n          animate={{ x: 0, opacity: 1 }}\n          exit={isMobile ? { x: -20, opacity: 0 } : undefined}\n          transition={springs.snappy}\n        >\n          {selected ? children : (emptyState ?? children)}\n        </motion.div>\n      </AnimatePresence>\n    </div>\n  )\n}\n\nconst MasterDetailListItem = React.forwardRef<HTMLButtonElement, MasterDetailListItemProps>(\n  function MasterDetailListItem({ active = false, children, className, onKeyDown, ...props }, ref) {\n    function handleKeyDown(e: React.KeyboardEvent<HTMLButtonElement>) {\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        ;(e.target as HTMLButtonElement).click()\n      }\n      onKeyDown?.(e)\n    }\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        role=\"option\"\n        aria-selected={active}\n        data-active={active || undefined}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          'flex w-full items-center px-ds-04 py-ds-03 text-left text-body-md font-sans text-surface-fg',\n          'transition-colors duration-fast-01 ease-productive-standard',\n          'hover:bg-surface-raised-hover',\n          'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-7 focus-visible:ring-inset',\n          active && 'bg-accent-2 text-accent-11 font-medium',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </button>\n    )\n  },\n)\n\n// ============================================================\n// MasterDetail Root\n// ============================================================\n\nfunction MasterDetailRoot({\n  selected = null,\n  onBack,\n  masterWidth = '280px',\n  breakpoint = 'md',\n  emptyState,\n  onNavigate,\n  children,\n  className,\n  style,\n  ...props\n}: MasterDetailProps) {\n  const isMobile = useMediaQuery(`(max-width: ${breakpoints[breakpoint]})`)\n  const [activeIndex, setActiveIndex] = React.useState(0)\n  const [itemCount, setItemCount] = React.useState(0)\n  const itemRefs = React.useRef<(HTMLButtonElement | null)[]>([])\n\n  const registerItemRef = React.useCallback((index: number, el: HTMLButtonElement | null) => {\n    itemRefs.current[index] = el\n  }, [])\n\n  return (\n    <MasterDetailContext.Provider value={{ selected, isMobile, onBack, emptyState, onNavigate, activeIndex, setActiveIndex, registerItemRef, itemCount, setItemCount }}>\n      <div\n        className={cn(\n          'flex h-full',\n          !isMobile && 'grid',\n          className,\n        )}\n        style={{\n          ...style,\n          ...(isMobile ? {} : { gridTemplateColumns: `${masterWidth} 1fr` }),\n        }}\n        {...props}\n      >\n        {children}\n      </div>\n    </MasterDetailContext.Provider>\n  )\n}\n\nconst MasterDetail = Object.assign(MasterDetailRoot, {\n  List: MasterDetailList,\n  Detail: MasterDetailDetail,\n  ListItem: MasterDetailListItem,\n})\n\nexport { MasterDetail }\nexport type { MasterDetailListItemProps }\n"],"mappings":"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"}
+{"version":3,"file":"master-detail.js","names":[],"sources":["../../src/composed/master-detail.tsx"],"sourcesContent":["'use client'\n\nimport { IconArrowLeft } from '@tabler/icons-react'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Button } from '../ui/button'\nimport { Icon } from '../ui/icon'\nimport { springs } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\n\n/**\n * A responsive master-detail layout. Desktop: fixed-width list panel + detail\n * panel. Below the breakpoint: stacked view with a back button. The list is an\n * ARIA `listbox` with roving keyboard nav (Arrow/Home/End + Enter/Space).\n *\n * Selection can be **controlled** (`selected`) or **owned** by the component\n * (`defaultSelected` + `onSelect`, deriving each row's active state from its\n * `value` — no hand-wiring `active` + `onClick` per row).\n */\nexport interface MasterDetailProps\n  // Replaces the rarely-used native text-selection `onSelect` with our row-select callback.\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n  /** Controlled selected item id. `null` = no selection. Omit for uncontrolled. */\n  selected?: string | null\n  /** Uncontrolled initial selection. */\n  defaultSelected?: string | null\n  /** Called with a row's `value` when it's chosen (click or Enter/Space). */\n  onSelect?: (value: string) => void\n  /** Accessible name for the list (the `listbox`). @default 'Items' */\n  label?: string\n  /** Called when mobile back button is pressed. */\n  onBack?: () => void\n  /** Master panel width on desktop. @default '280px' */\n  masterWidth?: string\n  /** Breakpoint below which stacked mode activates. @default 'md' */\n  breakpoint?: 'sm' | 'md' | 'lg'\n  /** Content to show in the detail pane when nothing is selected. */\n  emptyState?: React.ReactNode\n  /** Called when the user presses ArrowUp/ArrowDown while the list has focus. */\n  onNavigate?: (direction: 'up' | 'down') => void\n}\n\ninterface MasterDetailListProps extends React.HTMLAttributes<HTMLDivElement> {}\ninterface MasterDetailDetailProps extends React.HTMLAttributes<HTMLDivElement> {}\ninterface MasterDetailListItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Explicit active state. Omit to derive from `value` === the selected id. */\n  active?: boolean\n  /** Row id — enables derived selection + auto-fires `onSelect` on activate. */\n  value?: string\n}\n\nconst breakpoints: Record<string, string> = { sm: '640px', md: '768px', lg: '1024px' }\n\nfunction useMediaQuery(query: string): boolean {\n  const [matches, setMatches] = React.useState(false)\n  React.useEffect(() => {\n    if (typeof window === 'undefined') return\n    const mql = window.matchMedia(query)\n    setMatches(mql.matches)\n    const handler = (e: MediaQueryListEvent) => setMatches(e.matches)\n    mql.addEventListener('change', handler)\n    return () => mql.removeEventListener('change', handler)\n  }, [query])\n  return matches\n}\n\ninterface MasterDetailContextValue {\n  selected: string | null\n  onSelect?: (value: string) => void\n  label: string\n  isMobile: boolean\n  onBack?: () => void\n  emptyState?: React.ReactNode\n  onNavigate?: (direction: 'up' | 'down') => void\n  activeIndex: number\n  setActiveIndex: (index: number) => void\n  registerItemRef: (index: number, el: HTMLButtonElement | null) => void\n}\n\nconst MasterDetailContext = React.createContext<MasterDetailContextValue>({\n  selected: null,\n  label: 'Items',\n  isMobile: false,\n  activeIndex: 0,\n  setActiveIndex: () => {},\n  registerItemRef: () => {},\n})\n\nfunction itemIsActive(child: React.ReactNode, selected: string | null): boolean {\n  if (!React.isValidElement(child)) return false\n  const p = child.props as { active?: boolean; value?: string }\n  return p.active ?? (p.value != null && p.value === selected)\n}\n\nfunction MasterDetailList({ children, className, 'aria-label': ariaLabel, ...props }: MasterDetailListProps) {\n  const { selected, label, isMobile, onNavigate, activeIndex, setActiveIndex, registerItemRef } =\n    React.useContext(MasterDetailContext)\n  const itemRefsLocal = React.useRef<(HTMLButtonElement | null)[]>([])\n  const childCount = React.Children.count(children)\n\n  // Roving focus starts on the active/selected row (derived from `active` or `value`).\n  const activeChildIndex = React.useMemo(() => {\n    let idx = -1\n    React.Children.forEach(children, (child, i) => {\n      if (itemIsActive(child, selected)) idx = i\n    })\n    return idx\n  }, [children, selected])\n  React.useEffect(() => {\n    if (activeChildIndex >= 0) setActiveIndex(activeChildIndex)\n  }, [activeChildIndex, setActiveIndex])\n\n  if (isMobile && selected) return null\n\n  function handleKeyDown(e: React.KeyboardEvent) {\n    if (e.key === 'ArrowDown') {\n      e.preventDefault()\n      const next = Math.min(activeIndex + 1, childCount - 1)\n      setActiveIndex(next); itemRefsLocal.current[next]?.focus(); onNavigate?.('down')\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault()\n      const prev = Math.max(activeIndex - 1, 0)\n      setActiveIndex(prev); itemRefsLocal.current[prev]?.focus(); onNavigate?.('up')\n    } else if (e.key === 'Home') {\n      e.preventDefault(); setActiveIndex(0); itemRefsLocal.current[0]?.focus()\n    } else if (e.key === 'End') {\n      e.preventDefault()\n      const last = childCount - 1\n      setActiveIndex(last); itemRefsLocal.current[last]?.focus()\n    }\n  }\n\n  return (\n    <div\n      role=\"listbox\"\n      aria-label={ariaLabel ?? label}\n      tabIndex={-1}\n      className={cn('overflow-y-auto focus-visible:outline-hidden', !isMobile && 'border-e border-surface-border', className)}\n      onKeyDown={handleKeyDown}\n      {...props}\n    >\n      {React.Children.map(children, (child, i) => {\n        if (!React.isValidElement(child)) return child\n        return React.cloneElement(child as React.ReactElement<any>, {\n          ref: (el: HTMLButtonElement | null) => {\n            itemRefsLocal.current[i] = el\n            registerItemRef(i, el)\n          },\n          tabIndex: i === activeIndex ? 0 : -1,\n        })\n      })}\n    </div>\n  )\n}\n\nfunction MasterDetailDetail({ children, className, ...props }: MasterDetailDetailProps) {\n  const { selected, isMobile, onBack, emptyState } = React.useContext(MasterDetailContext)\n  const reduced = useReducedMotion()\n  if (isMobile && !selected) return null\n\n  return (\n    // aria-live so AT users are told the detail changed when the selection swaps.\n    <div role=\"region\" aria-label=\"Detail\" aria-live=\"polite\" className={cn('flex-1 overflow-y-auto', className)} {...props}>\n      {isMobile && onBack && (\n        <div className=\"border-b border-surface-border px-ds-04 py-ds-03\">\n          <Button variant=\"ghost\" size=\"xs\" onClick={onBack} startIcon={<Icon icon={IconArrowLeft} className=\"rtl:-scale-x-100\" />}>\n            Back\n          </Button>\n        </div>\n      )}\n      <AnimatePresence mode=\"wait\">\n        <motion.div\n          key={selected ?? 'empty'}\n          initial={isMobile && !reduced ? { x: 20, opacity: 0 } : false}\n          animate={{ x: 0, opacity: 1 }}\n          exit={isMobile && !reduced ? { x: -20, opacity: 0 } : undefined}\n          transition={reduced ? { duration: 0 } : springs.snappy}\n        >\n          {selected ? children : (emptyState ?? children)}\n        </motion.div>\n      </AnimatePresence>\n    </div>\n  )\n}\n\nconst MasterDetailListItem = React.forwardRef<HTMLButtonElement, MasterDetailListItemProps>(\n  function MasterDetailListItem({ active, value, children, className, onKeyDown, onClick, ...props }, ref) {\n    const { selected, onSelect } = React.useContext(MasterDetailContext)\n    const isActive = active ?? (value != null && value === selected)\n\n    function handleKeyDown(e: React.KeyboardEvent<HTMLButtonElement>) {\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        ;(e.currentTarget as HTMLButtonElement).click()\n      }\n      onKeyDown?.(e)\n    }\n    function handleClick(e: React.MouseEvent<HTMLButtonElement>) {\n      if (value != null) onSelect?.(value)\n      onClick?.(e)\n    }\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        role=\"option\"\n        aria-selected={isActive}\n        data-active={isActive || undefined}\n        onKeyDown={handleKeyDown}\n        onClick={handleClick}\n        className={cn(\n          'flex w-full items-center px-ds-04 py-ds-03 text-left text-body-md font-sans text-surface-fg',\n          'transition-colors duration-fast-01 ease-productive-standard',\n          'hover:bg-surface-raised-hover',\n          'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-7 focus-visible:ring-inset',\n          isActive && 'bg-accent-2 text-accent-11 font-medium',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </button>\n    )\n  },\n)\n\nfunction MasterDetailRoot({\n  selected,\n  defaultSelected = null,\n  onSelect,\n  label = 'Items',\n  onBack,\n  masterWidth = '280px',\n  breakpoint = 'md',\n  emptyState,\n  onNavigate,\n  children,\n  className,\n  style,\n  ...props\n}: MasterDetailProps) {\n  const isMobile = useMediaQuery(`(max-width: ${breakpoints[breakpoint]})`)\n  const [activeIndex, setActiveIndex] = React.useState(0)\n  const itemRefs = React.useRef<(HTMLButtonElement | null)[]>([])\n\n  // Controlled when `selected` is provided; otherwise own the selection.\n  const isControlled = selected !== undefined\n  const [internalSelected, setInternalSelected] = React.useState<string | null>(defaultSelected)\n  const resolvedSelected = isControlled ? selected ?? null : internalSelected\n\n  const handleSelect = React.useCallback(\n    (value: string) => {\n      if (!isControlled) setInternalSelected(value)\n      onSelect?.(value)\n    },\n    [isControlled, onSelect],\n  )\n\n  const registerItemRef = React.useCallback((index: number, el: HTMLButtonElement | null) => {\n    itemRefs.current[index] = el\n  }, [])\n\n  return (\n    <MasterDetailContext.Provider\n      value={{ selected: resolvedSelected, onSelect: handleSelect, label, isMobile, onBack, emptyState, onNavigate, activeIndex, setActiveIndex, registerItemRef }}\n    >\n      <div\n        className={cn('flex h-full', !isMobile && 'grid', className)}\n        style={{ ...style, ...(isMobile ? {} : { gridTemplateColumns: `${masterWidth} 1fr` }) }}\n        {...props}\n      >\n        {children}\n      </div>\n    </MasterDetailContext.Provider>\n  )\n}\n\nconst MasterDetail = Object.assign(MasterDetailRoot, {\n  List: MasterDetailList,\n  Detail: MasterDetailDetail,\n  ListItem: MasterDetailListItem,\n})\n\nexport { MasterDetail }\nexport type { MasterDetailListItemProps }\n"],"mappings":"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"}

package/dist/composed/member-picker.d.ts

@@ -1,4 +1,3 @@
-"use client";
 import * as React from 'react';
 export interface MemberPickerMember {
     id: string;

package/dist/composed/multi-select-popover.d.ts

@@ -1,4 +1,3 @@
-"use client";
 import * as React from 'react';
 export interface MultiSelectItem {
     id: string;

package/dist/composed/page-skeletons.d.ts

@@ -1,11 +1,17 @@
 import * as React from 'react';
 export interface DashboardSkeletonProps extends React.ComponentPropsWithoutRef<'div'> {
+    /** Accessible label for the loading region. @default 'Loading' */
+    label?: string;
 }
 declare const DashboardSkeleton: React.ForwardRefExoticComponent<DashboardSkeletonProps & React.RefAttributes<HTMLDivElement>>;
 export interface ProjectListSkeletonProps extends React.ComponentPropsWithoutRef<'div'> {
+    /** Accessible label for the loading region. @default 'Loading' */
+    label?: string;
 }
 declare const ProjectListSkeleton: React.ForwardRefExoticComponent<ProjectListSkeletonProps & React.RefAttributes<HTMLDivElement>>;
 export interface TaskDetailSkeletonProps extends React.ComponentPropsWithoutRef<'div'> {
+    /** Accessible label for the loading region. @default 'Loading' */
+    label?: string;
 }
 declare const TaskDetailSkeleton: React.ForwardRefExoticComponent<TaskDetailSkeletonProps & React.RefAttributes<HTMLDivElement>>;
 export { DashboardSkeleton, ProjectListSkeleton, TaskDetailSkeleton, };

package/dist/composed/page-skeletons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-skeletons.d.ts","sourceRoot":"","sources":["../../src/composed/page-skeletons.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,MAAM,WAAW,sBAAuB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;CAAG;AAExF,QAAA,MAAM,iBAAiB,+FAkDtB,CAAA;AAMD,MAAM,WAAW,wBAAyB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;CAAG;AAE1F,QAAA,MAAM,mBAAmB,iGA2DxB,CAAA;AAMD,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;CAAG;AAEzF,QAAA,MAAM,kBAAkB,gGA8CvB,CAAA;AAID,OAAO,EACL,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,GACnB,CAAA"}
+{"version":3,"file":"page-skeletons.d.ts","sourceRoot":"","sources":["../../src/composed/page-skeletons.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAgB9B,MAAM,WAAW,sBAAuB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IACnF,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,QAAA,MAAM,iBAAiB,+FAmDtB,CAAA;AAMD,MAAM,WAAW,wBAAyB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IACrF,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,QAAA,MAAM,mBAAmB,iGA4DxB,CAAA;AAMD,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IACpF,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,QAAA,MAAM,kBAAkB,gGA+CvB,CAAA;AAID,OAAO,EACL,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,GACnB,CAAA"}

package/dist/composed/page-skeletons.js

@@ -3,142 +3,164 @@ 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/page-skeletons.tsx
-var a = "bg-surface-raised-hover", o = n.forwardRef(function({ className: n, ...o }, s) {
+function a(e) {
+	return {
+		role: "status",
+		"aria-busy": !0,
+		"aria-label": e ?? "Loading"
+	};
+}
+function o({ label: e }) {
+	return /* @__PURE__ */ i("span", {
+		className: "sr-only",
+		children: [e ?? "Loading", "…"]
+	});
+}
+var s = n.forwardRef(function({ className: n, label: s, ...c }, l) {
 	return /* @__PURE__ */ i("div", {
-		ref: s,
-		...o,
+		ref: l,
+		...a(s),
+		...c,
 		className: e("flex flex-col gap-ds-06", n),
-		children: [/* @__PURE__ */ r("div", {
-			className: "grid grid-cols-1 gap-ds-05 sm:grid-cols-2 lg:grid-cols-4",
-			children: Array.from({ length: 4 }).map((n, o) => /* @__PURE__ */ i("div", {
-				className: "flex flex-col gap-ds-04 rounded-overlay-lg border border-card-strong bg-surface-raised p-ds-05b",
+		children: [
+			/* @__PURE__ */ r(o, { label: s }),
+			/* @__PURE__ */ r("div", {
+				className: "grid grid-cols-1 gap-ds-05 sm:grid-cols-2 lg:grid-cols-4",
+				children: Array.from({ length: 4 }).map((e, n) => /* @__PURE__ */ i("div", {
+					className: "flex flex-col gap-ds-04 rounded-surface border border-card bg-surface-raised p-ds-05b",
+					children: [
+						/* @__PURE__ */ i("div", {
+							className: "flex items-center justify-between",
+							children: [/* @__PURE__ */ r(t, { className: "h-ds-04 w-ds-11" }), /* @__PURE__ */ r(t, { className: "h-ds-sm w-ds-sm rounded-surface" })]
+						}),
+						/* @__PURE__ */ r(t, { className: "h-ds-xs-plus w-ds-10" }),
+						/* @__PURE__ */ r(t, { className: "h-ds-03 w-[112px]" })
+					]
+				}, `stat-${n}`))
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "rounded-surface border border-card bg-surface-raised p-ds-06",
 				children: [
 					/* @__PURE__ */ i("div", {
-						className: "flex items-center justify-between",
-						children: [/* @__PURE__ */ r(t, { className: e("h-ds-04 w-ds-11", a) }), /* @__PURE__ */ r(t, { className: e("h-ds-sm w-ds-sm rounded-surface", a) })]
+						className: "mb-ds-06 flex items-center justify-between",
+						children: [/* @__PURE__ */ r(t, { className: "h-ds-05b w-[128px]" }), /* @__PURE__ */ i("div", {
+							className: "flex items-center gap-ds-03",
+							children: [
+								/* @__PURE__ */ r(t, { className: "h-ds-sm w-ds-sm rounded-surface" }),
+								/* @__PURE__ */ r(t, { className: "h-ds-05 w-[112px]" }),
+								/* @__PURE__ */ r(t, { className: "h-ds-sm w-ds-sm rounded-surface" })
+							]
+						})]
 					}),
-					/* @__PURE__ */ r(t, { className: e("h-ds-xs-plus w-ds-10", a) }),
-					/* @__PURE__ */ r(t, { className: e("h-ds-03 w-[112px]", a) })
+					/* @__PURE__ */ r("div", {
+						className: "mb-ds-03 grid grid-cols-7 gap-ds-03",
+						children: Array.from({ length: 7 }).map((e, n) => /* @__PURE__ */ r(t, { className: "mx-auto h-ds-04 w-ds-07" }, `wh-${n}`))
+					}),
+					/* @__PURE__ */ r("div", {
+						className: "grid grid-cols-7 gap-ds-03",
+						children: Array.from({ length: 35 }).map((e, n) => /* @__PURE__ */ r(t, { className: "mx-auto h-ds-md w-ds-md rounded-pill" }, `cal-${n}`))
+					})
 				]
-			}, `stat-${o}`))
-		}), /* @__PURE__ */ i("div", {
-			className: "rounded-overlay-lg border border-card-strong bg-surface-raised p-ds-06",
-			children: [
-				/* @__PURE__ */ i("div", {
-					className: "mb-ds-06 flex items-center justify-between",
-					children: [/* @__PURE__ */ r(t, { className: e("h-ds-05b w-[128px]", a) }), /* @__PURE__ */ i("div", {
-						className: "flex items-center gap-ds-03",
-						children: [
-							/* @__PURE__ */ r(t, { className: e("h-ds-sm w-ds-sm rounded-surface", a) }),
-							/* @__PURE__ */ r(t, { className: e("h-ds-05 w-[112px]", a) }),
-							/* @__PURE__ */ r(t, { className: e("h-ds-sm w-ds-sm rounded-surface", a) })
-						]
-					})]
-				}),
-				/* @__PURE__ */ r("div", {
-					className: "mb-ds-03 grid grid-cols-7 gap-ds-03",
-					children: Array.from({ length: 7 }).map((n, i) => /* @__PURE__ */ r(t, { className: e("mx-auto h-ds-04 w-ds-07", a) }, `wh-${i}`))
-				}),
-				/* @__PURE__ */ r("div", {
-					className: "grid grid-cols-7 gap-ds-03",
-					children: Array.from({ length: 35 }).map((n, i) => /* @__PURE__ */ r(t, { className: e("mx-auto h-ds-md w-ds-md rounded-pill", a) }, `cal-${i}`))
-				})
-			]
-		})]
+			})
+		]
 	});
 });
-o.displayName = "DashboardSkeleton";
-var s = n.forwardRef(function({ className: n, ...o }, s) {
+s.displayName = "DashboardSkeleton";
+var c = n.forwardRef(function({ className: n, label: s, ...c }, l) {
 	return /* @__PURE__ */ i("div", {
-		ref: s,
-		...o,
+		ref: l,
+		...a(s),
+		...c,
 		className: e("flex flex-col gap-ds-06", n),
 		children: [
+			/* @__PURE__ */ r(o, { label: s }),
 			/* @__PURE__ */ i("div", {
 				className: "flex flex-col gap-ds-05 sm:flex-row sm:items-center sm:justify-between",
 				children: [/* @__PURE__ */ i("div", {
 					className: "flex flex-col gap-ds-03",
-					children: [/* @__PURE__ */ r(t, { className: e("h-ds-06 w-[112px]", a) }), /* @__PURE__ */ r(t, { className: e("h-ds-04 w-ds-13", a) })]
-				}), /* @__PURE__ */ r(t, { className: e("h-ds-sm-plus w-[128px] rounded-surface", a) })]
+					children: [/* @__PURE__ */ r(t, { className: "h-ds-06 w-[112px]" }), /* @__PURE__ */ r(t, { className: "h-ds-04 w-ds-13" })]
+				}), /* @__PURE__ */ r(t, { className: "h-ds-sm-plus w-[128px] rounded-surface" })]
 			}),
 			/* @__PURE__ */ i("div", {
 				className: "flex flex-col gap-ds-04 sm:flex-row sm:items-center",
-				children: [/* @__PURE__ */ r(t, { className: e("h-ds-sm-plus flex-1 rounded-surface", a) }), /* @__PURE__ */ r("div", {
+				children: [/* @__PURE__ */ r(t, { className: "h-ds-sm-plus flex-1 rounded-surface" }), /* @__PURE__ */ r("div", {
 					className: "flex gap-ds-02b",
-					children: Array.from({ length: 4 }).map((n, i) => /* @__PURE__ */ r(t, { className: e("h-ds-sm w-ds-10 rounded-surface", a) }, `f-${i}`))
+					children: Array.from({ length: 4 }).map((e, n) => /* @__PURE__ */ r(t, { className: "h-ds-sm w-ds-10 rounded-surface" }, `f-${n}`))
 				})]
 			}),
 			/* @__PURE__ */ r("div", {
 				className: "grid grid-cols-1 gap-ds-05 sm:grid-cols-2 lg:grid-cols-3",
-				children: Array.from({ length: 6 }).map((n, o) => /* @__PURE__ */ i("div", {
-					className: "flex flex-col gap-ds-05 rounded-overlay-lg border border-card-strong bg-surface-raised p-ds-05b",
+				children: Array.from({ length: 6 }).map((e, n) => /* @__PURE__ */ i("div", {
+					className: "flex flex-col gap-ds-05 rounded-surface border border-card bg-surface-raised p-ds-05b",
 					children: [
 						/* @__PURE__ */ i("div", {
 							className: "flex items-center justify-between",
-							children: [/* @__PURE__ */ r(t, { className: e("h-ds-05b w-ds-10 rounded-pill", a) }), /* @__PURE__ */ r(t, { className: e("h-ds-05 w-ds-11 rounded-control", a) })]
+							children: [/* @__PURE__ */ r(t, { className: "h-ds-05b w-ds-10 rounded-pill" }), /* @__PURE__ */ r(t, { className: "h-ds-05 w-ds-11 rounded-control" })]
 						}),
 						/* @__PURE__ */ i("div", {
 							className: "flex flex-col gap-ds-03",
 							children: [
-								/* @__PURE__ */ r(t, { className: e("h-ds-05 w-3/4", a) }),
-								/* @__PURE__ */ r(t, { className: e("h-ds-04 w-full", a) }),
-								/* @__PURE__ */ r(t, { className: e("h-ds-04 w-2/3", a) })
+								/* @__PURE__ */ r(t, { className: "h-ds-05 w-3/4" }),
+								/* @__PURE__ */ r(t, { className: "h-ds-04 w-full" }),
+								/* @__PURE__ */ r(t, { className: "h-ds-04 w-2/3" })
 							]
 						}),
 						/* @__PURE__ */ i("div", {
 							className: "flex items-center justify-between pt-ds-02",
 							children: [/* @__PURE__ */ r("div", {
 								className: "flex -space-x-ds-03",
-								children: Array.from({ length: 3 }).map((n, i) => /* @__PURE__ */ r(t, { className: e("h-ds-xs-plus w-ds-xs-plus rounded-pill", a) }, `av-${o}-${i}`))
-							}), /* @__PURE__ */ r(t, { className: e("h-ds-04 w-ds-md", a) })]
+								children: Array.from({ length: 3 }).map((e, i) => /* @__PURE__ */ r(t, { className: "h-ds-xs-plus w-ds-xs-plus rounded-pill" }, `av-${n}-${i}`))
+							}), /* @__PURE__ */ r(t, { className: "h-ds-04 w-ds-md" })]
 						})
 					]
-				}, `proj-${o}`))
+				}, `proj-${n}`))
 			})
 		]
 	});
 });
-s.displayName = "ProjectListSkeleton";
-var c = n.forwardRef(function({ className: n, ...o }, s) {
+c.displayName = "ProjectListSkeleton";
+var l = n.forwardRef(function({ className: n, label: s, ...c }, l) {
 	return /* @__PURE__ */ i("div", {
-		ref: s,
-		...o,
-		className: e("flex h-full flex-col gap-0 rounded-overlay-lg border border-card-strong bg-surface-raised", n),
+		ref: l,
+		...a(s),
+		...c,
+		className: e("flex h-full flex-col gap-0 rounded-surface border border-card bg-surface-raised", n),
 		children: [
+			/* @__PURE__ */ r(o, { label: s }),
 			/* @__PURE__ */ i("div", {
 				className: "flex items-center justify-between border-b border-surface-border-strong px-ds-05b py-ds-05",
-				children: [/* @__PURE__ */ r(t, { className: e("h-ds-05b w-[192px]", a) }), /* @__PURE__ */ i("div", {
+				children: [/* @__PURE__ */ r(t, { className: "h-ds-05b w-[192px]" }), /* @__PURE__ */ i("div", {
 					className: "flex items-center gap-ds-03",
-					children: [/* @__PURE__ */ r(t, { className: e("h-ds-xs-plus w-ds-xs-plus rounded-surface", a) }), /* @__PURE__ */ r(t, { className: e("h-ds-xs-plus w-ds-xs-plus rounded-surface", a) })]
+					children: [/* @__PURE__ */ r(t, { className: "h-ds-xs-plus w-ds-xs-plus rounded-surface" }), /* @__PURE__ */ r(t, { className: "h-ds-xs-plus w-ds-xs-plus rounded-surface" })]
 				})]
 			}),
 			/* @__PURE__ */ r("div", {
 				className: "flex flex-col gap-0 border-b border-surface-border-strong px-ds-05b py-ds-05",
-				children: Array.from({ length: 5 }).map((n, o) => /* @__PURE__ */ i("div", {
+				children: Array.from({ length: 5 }).map((e, n) => /* @__PURE__ */ i("div", {
 					className: "flex items-center gap-ds-05 py-ds-03",
-					children: [/* @__PURE__ */ r(t, { className: e("h-ds-04 w-ds-12 shrink-0", a) }), /* @__PURE__ */ r(t, { className: e("h-ds-06 w-[128px] rounded-control", a) })]
-				}, `prop-${o}`))
+					children: [/* @__PURE__ */ r(t, { className: "h-ds-04 w-ds-12 shrink-0" }), /* @__PURE__ */ r(t, { className: "h-ds-06 w-[128px] rounded-control" })]
+				}, `prop-${n}`))
 			}),
 			/* @__PURE__ */ r("div", {
 				className: "border-b border-surface-border-strong px-ds-05b",
 				children: /* @__PURE__ */ r("div", {
 					className: "flex gap-ds-05 py-ds-04",
-					children: Array.from({ length: 3 }).map((n, i) => /* @__PURE__ */ r(t, { className: e("h-ds-05 w-ds-10", a) }, `tab-${i}`))
+					children: Array.from({ length: 3 }).map((e, n) => /* @__PURE__ */ r(t, { className: "h-ds-05 w-ds-10" }, `tab-${n}`))
 				})
 			}),
 			/* @__PURE__ */ i("div", {
 				className: "flex flex-1 flex-col gap-ds-04 px-ds-05b py-ds-05",
 				children: [
-					/* @__PURE__ */ r(t, { className: e("h-ds-04 w-full", a) }),
-					/* @__PURE__ */ r(t, { className: e("h-ds-04 w-4/5", a) }),
-					/* @__PURE__ */ r(t, { className: e("h-ds-04 w-3/5", a) }),
-					/* @__PURE__ */ r(t, { className: e("mt-ds-03 h-ds-04 w-full", a) }),
-					/* @__PURE__ */ r(t, { className: e("h-ds-04 w-2/3", a) })
+					/* @__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__ */ r(t, { className: "mt-ds-03 h-ds-04 w-full" }),
+					/* @__PURE__ */ r(t, { className: "h-ds-04 w-2/3" })
 				]
 			})
 		]
 	});
 });
-c.displayName = "TaskDetailSkeleton";
+l.displayName = "TaskDetailSkeleton";
 //#endregion
-export { o as DashboardSkeleton, s as ProjectListSkeleton, c as TaskDetailSkeleton };
+export { s as DashboardSkeleton, c as ProjectListSkeleton, l as TaskDetailSkeleton };