@devalok/shilp-sutra 0.38.0 → 0.40.0

package/dist/_chunks/tooltip.js

@@ -0,0 +1,58 @@
+"use client";
+import { cn as e } from "../ui/lib/utils.js";
+import { useCallback as t, useState as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/ui/charts/_internal/legend.tsx
+function a({ items: t, position: n = "bottom", className: a }) {
+	return /* @__PURE__ */ r("div", {
+		className: e("flex gap-ds-04 text-ds-sm text-surface-fg-muted", n === "left" || n === "right" ? "flex-col" : "flex-row flex-wrap justify-center", a),
+		children: t.map((e) => /* @__PURE__ */ i("div", {
+			className: "flex items-center gap-ds-02",
+			children: [/* @__PURE__ */ r("span", {
+				className: "inline-block h-3 w-3 shrink-0 rounded-control-inner",
+				style: { backgroundColor: e.color }
+			}), /* @__PURE__ */ r("span", { children: e.label })]
+		}, e.label))
+	});
+}
+a.displayName = "Legend";
+//#endregion
+//#region src/ui/charts/_internal/tooltip.tsx
+function o({ state: t, className: n }) {
+	return t.visible ? /* @__PURE__ */ r("div", {
+		className: e("pointer-events-none absolute z-tooltip", "rounded-overlay-sm border border-surface-border-strong", "bg-surface-overlay px-ds-03 py-ds-02", "shadow-raised-hover", "text-ds-sm text-surface-fg", n),
+		style: {
+			left: t.x + 12,
+			top: t.y - 12
+		},
+		children: t.content
+	}) : null;
+}
+o.displayName = "ChartTooltip";
+function s() {
+	let [e, r] = n({
+		visible: !1,
+		x: 0,
+		y: 0,
+		content: null
+	});
+	return {
+		tooltip: e,
+		show: t((e, t, n) => {
+			r({
+				visible: !0,
+				x: e,
+				y: t,
+				content: n
+			});
+		}, []),
+		hide: t(() => {
+			r((e) => ({
+				...e,
+				visible: !1
+			}));
+		}, [])
+	};
+}
+//#endregion
+export { s as n, a as r, o as t };

package/dist/_chunks/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","names":[],"sources":["../../src/ui/charts/_internal/legend.tsx","../../src/ui/charts/_internal/tooltip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../lib/utils'\n\ninterface LegendItem {\n  label: string\n  color: string // CSS color value or var() reference\n}\n\ninterface LegendProps {\n  items: LegendItem[]\n  position?: 'top' | 'bottom' | 'left' | 'right'\n  className?: string\n}\n\nexport function Legend({ items, position = 'bottom', className }: LegendProps) {\n  const isVertical = position === 'left' || position === 'right'\n\n  return (\n    <div\n      className={cn(\n        'flex gap-ds-04 text-ds-sm text-surface-fg-muted',\n        isVertical ? 'flex-col' : 'flex-row flex-wrap justify-center',\n        className,\n      )}\n    >\n      {items.map((item) => (\n        <div key={item.label} className=\"flex items-center gap-ds-02\">\n          <span\n            className=\"inline-block h-3 w-3 shrink-0 rounded-control-inner\"\n            style={{ backgroundColor: item.color }}\n          />\n          <span>{item.label}</span>\n        </div>\n      ))}\n    </div>\n  )\n}\nLegend.displayName = 'Legend'\n\nexport type { LegendItem, LegendProps }\n","'use client'\n\nimport * as React from 'react'\nimport { useCallback,useState } from 'react'\n\nimport { cn } from '../../lib/utils'\n\ninterface TooltipState {\n  visible: boolean\n  x: number\n  y: number\n  content: React.ReactNode\n}\n\ninterface ChartTooltipProps {\n  state: TooltipState\n  className?: string\n}\n\nexport function ChartTooltip({ state, className }: ChartTooltipProps) {\n  if (!state.visible) return null\n\n  return (\n    <div\n      className={cn(\n        'pointer-events-none absolute z-tooltip',\n        'rounded-overlay-sm border border-surface-border-strong',\n        'bg-surface-overlay px-ds-03 py-ds-02',\n        'shadow-raised-hover',\n        'text-ds-sm text-surface-fg',\n        className,\n      )}\n      style={{ left: state.x + 12, top: state.y - 12 }}\n    >\n      {state.content}\n    </div>\n  )\n}\nChartTooltip.displayName = 'ChartTooltip'\n\n/** Hook to manage chart tooltip state */\nexport function useChartTooltip() {\n  const [tooltip, setTooltip] = useState<TooltipState>({\n    visible: false,\n    x: 0,\n    y: 0,\n    content: null,\n  })\n\n  const show = useCallback((x: number, y: number, content: React.ReactNode) => {\n    setTooltip({ visible: true, x, y, content })\n  }, [])\n\n  const hide = useCallback(() => {\n    setTooltip((prev) => ({ ...prev, visible: false }))\n  }, [])\n\n  return { tooltip, show, hide }\n}\n\nexport type { ChartTooltipProps,TooltipState }\n"],"mappings":";;;;AAeA,SAAgB,EAAO,EAAE,UAAO,cAAW,UAAU,gBAA0B;AAG7E,QACE,kBAAC,OAAD;EACE,WAAW,EACT,mDALa,MAAa,UAAU,MAAa,UAMpC,aAAa,qCAC1B,EACD;YAEA,EAAM,KAAK,MACV,kBAAC,OAAD;GAAsB,WAAU;aAAhC,CACE,kBAAC,QAAD;IACE,WAAU;IACV,OAAO,EAAE,iBAAiB,EAAK,OAAO;IACtC,CAAA,EACF,kBAAC,QAAD,EAAA,UAAO,EAAK,OAAa,CAAA,CACrB;KANI,EAAK,MAMT,CACN;EACE,CAAA;;AAGV,EAAO,cAAc;;;ACnBrB,SAAgB,EAAa,EAAE,UAAO,gBAAgC;AAGpE,QAFK,EAAM,UAGT,kBAAC,OAAD;EACE,WAAW,EACT,0CACA,0DACA,wCACA,uBACA,8BACA,EACD;EACD,OAAO;GAAE,MAAM,EAAM,IAAI;GAAI,KAAK,EAAM,IAAI;GAAI;YAE/C,EAAM;EACH,CAAA,GAfmB;;AAkB7B,EAAa,cAAc;AAG3B,SAAgB,IAAkB;CAChC,IAAM,CAAC,GAAS,KAAc,EAAuB;EACnD,SAAS;EACT,GAAG;EACH,GAAG;EACH,SAAS;EACV,CAAC;AAUF,QAAO;EAAE;EAAS,MARL,GAAa,GAAW,GAAW,MAA6B;AAC3E,KAAW;IAAE,SAAS;IAAM;IAAG;IAAG;IAAS,CAAC;KAC3C,EAAE,CAAC;EAMkB,MAJX,QAAkB;AAC7B,MAAY,OAAU;IAAE,GAAG;IAAM,SAAS;IAAO,EAAE;KAClD,EAAE,CAAC;EAEwB"}

package/dist/_chunks/tree-view.js

@@ -1,29 +1,31 @@
 "use client";
-import { cn as e } from "../ui/lib/utils.js";
-import { Icon as t } from "../ui/icon.js";
-import { Checkbox as n } from "../ui/checkbox.js";
-import * as r from "react";
-import { useCallback as i, useState as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { IconChevronRight as c } from "@tabler/icons-react";
+import { IconProvider as e } from "../ui/icon-context.js";
+import { cn as t } from "../ui/lib/utils.js";
+import { Icon as n } from "../ui/icon.js";
+import { t as r } from "./normalize-icon.js";
+import { Checkbox as i } from "../ui/checkbox.js";
+import * as a from "react";
+import { useCallback as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { IconChevronRight as u } from "@tabler/icons-react";
 //#region src/ui/tree-view/use-tree.ts
-function l(e = {}) {
-	let { defaultExpanded: t, defaultSelected: n, multiSelect: r, onSelect: o, onExpand: s } = e, [c, l] = a(new Set(t ?? [])), [u, d] = a(new Set(n ?? []));
+function d(e = {}) {
+	let { defaultExpanded: t, defaultSelected: n, multiSelect: r, onSelect: i, onExpand: a } = e, [c, l] = s(new Set(t ?? [])), [u, d] = s(new Set(n ?? []));
 	return {
 		expanded: c,
 		selected: u,
-		toggle: i((e) => {
+		toggle: o((e) => {
 			l((t) => {
 				let n = new Set(t);
-				return n.has(e) ? n.delete(e) : n.add(e), s?.(Array.from(n)), n;
+				return n.has(e) ? n.delete(e) : n.add(e), a?.(Array.from(n)), n;
 			});
-		}, [s]),
-		select: i((e, t) => {
+		}, [a]),
+		select: o((e, t) => {
 			d((n) => {
-				let i;
-				return r && t?.ctrlKey ? (i = new Set(n), i.has(e) ? i.delete(e) : i.add(e)) : i = new Set([e]), o?.(Array.from(i)), i;
+				let a;
+				return r && t?.ctrlKey ? (a = new Set(n), a.has(e) ? a.delete(e) : a.add(e)) : a = new Set([e]), i?.(Array.from(a)), a;
 			});
-		}, [r, o]),
+		}, [r, i]),
 		isExpanded: (e) => c.has(e),
 		isSelected: (e) => u.has(e),
 		expandAll: (e) => l(new Set(e)),
@@ -32,23 +34,23 @@ function l(e = {}) {
 }
 //#endregion
 //#region src/ui/tree-view/tree-view.tsx
-var u = r.createContext(null);
-function d() {
-	let e = r.useContext(u);
+var f = a.createContext(null);
+function p() {
+	let e = a.useContext(f);
 	if (!e) throw Error("TreeItem must be used within a <TreeView>");
 	return e;
 }
-function f(e, t = 0) {
-	return e.map((e) => /* @__PURE__ */ o(h, {
+function m(e, t = 0) {
+	return e.map((e) => /* @__PURE__ */ c(_, {
 		itemId: e.id,
 		label: e.label,
 		icon: e.icon,
 		disabled: e.disabled,
 		depth: t,
-		children: e.children && e.children.length > 0 ? f(e.children, t + 1) : void 0
+		children: e.children && e.children.length > 0 ? m(e.children, t + 1) : void 0
 	}, e.id));
 }
-function p(e) {
+function h(e) {
 	return Array.from(e.querySelectorAll("[data-tree-item]")).filter((t) => {
 		let n = t.parentElement;
 		for (; n && n !== e;) {
@@ -61,17 +63,17 @@ function p(e) {
 		return !0;
 	});
 }
-var m = r.forwardRef(({ items: t, defaultExpanded: n, defaultSelected: i, multiSelect: a = !1, checkboxes: s = !1, onSelect: c, onExpand: d, className: m, children: h, ...g }, _) => {
-	let v = l({
+var g = a.forwardRef(({ items: e, defaultExpanded: n, defaultSelected: r, multiSelect: i = !1, checkboxes: o = !1, onSelect: s, onExpand: l, className: u, children: p, ...g }, _) => {
+	let v = d({
 		defaultExpanded: n,
-		defaultSelected: i,
-		multiSelect: a,
-		onSelect: c,
-		onExpand: d
-	}), y = r.useRef(null), b = _ ?? y, x = (e) => {
+		defaultSelected: r,
+		multiSelect: i,
+		onSelect: s,
+		onExpand: l
+	}), y = a.useRef(null), b = _ ?? y, x = (e) => {
 		let t = b.current;
 		if (!t) return;
-		let n = p(t), r = n.findIndex((e) => e === document.activeElement);
+		let n = h(t), r = n.findIndex((e) => e === document.activeElement);
 		switch (e.key) {
 			case "ArrowDown":
 				e.preventDefault(), n[r + 1]?.focus();
@@ -102,46 +104,46 @@ var m = r.forwardRef(({ items: t, defaultExpanded: n, defaultSelected: i, multiS
 				e.preventDefault(), n[n.length - 1]?.focus();
 				break;
 		}
-	}, S = r.useMemo(() => ({
+	}, S = a.useMemo(() => ({
 		tree: v,
-		checkboxes: s
-	}), [v, s]), C = t ? f(t) : h;
-	return /* @__PURE__ */ o(u.Provider, {
+		checkboxes: o
+	}), [v, o]), C = e ? m(e) : p;
+	return /* @__PURE__ */ c(f.Provider, {
 		value: S,
-		children: /* @__PURE__ */ o("ul", {
+		children: /* @__PURE__ */ c("ul", {
 			ref: b,
 			role: "tree",
-			"aria-multiselectable": a || void 0,
+			"aria-multiselectable": i || void 0,
 			onKeyDown: x,
-			className: e("m-0 list-none p-0", m),
+			className: t("m-0 list-none p-0", u),
 			...g,
 			children: C
 		})
 	});
 });
-m.displayName = "TreeView";
+g.displayName = "TreeView";
 //#endregion
 //#region src/ui/tree-view/tree-item.tsx
-var h = r.forwardRef(({ itemId: i, label: a, icon: l, secondaryLabel: u, actions: f, disabled: p = !1, children: m, depth: h = 0, className: g }, _) => {
-	let v = d(), y = r.Children.count(m) > 0, b = v.tree.isExpanded(i), x = v.tree.isSelected(i), S = (e) => {
-		p || v.tree.select(i, e);
-	}, C = (e) => {
-		e.stopPropagation(), !p && v.tree.toggle(i);
-	}, w = (e) => {
-		p || ((e.key === "Enter" || e.key === " ") && (e.preventDefault(), v.tree.select(i)), e.key === "ArrowRight" && y && !b && (e.preventDefault(), e.stopPropagation(), v.tree.toggle(i)), e.key === "ArrowLeft" && y && b && (e.preventDefault(), e.stopPropagation(), v.tree.toggle(i)));
-	}, T = r.useMemo(() => {
-		if (!v.checkboxes || !y) return {
-			checked: x,
+var _ = a.forwardRef(({ itemId: o, label: s, icon: d, secondaryLabel: f, actions: m, disabled: h = !1, children: g, depth: _ = 0, className: v }, y) => {
+	let b = p(), x = a.Children.count(g) > 0, S = b.tree.isExpanded(o), C = b.tree.isSelected(o), w = (e) => {
+		h || b.tree.select(o, e);
+	}, T = (e) => {
+		e.stopPropagation(), !h && b.tree.toggle(o);
+	}, E = (e) => {
+		h || ((e.key === "Enter" || e.key === " ") && (e.preventDefault(), b.tree.select(o)), e.key === "ArrowRight" && x && !S && (e.preventDefault(), e.stopPropagation(), b.tree.toggle(o)), e.key === "ArrowLeft" && x && S && (e.preventDefault(), e.stopPropagation(), b.tree.toggle(o)));
+	}, D = a.useMemo(() => {
+		if (!b.checkboxes || !x) return {
+			checked: C,
 			indeterminate: !1
 		};
 		let e = [], t = (n) => {
-			r.Children.forEach(n, (n) => {
-				r.isValidElement(n) && n.props.itemId && (e.push(n.props.itemId), n.props.children && t(n.props.children));
+			a.Children.forEach(n, (n) => {
+				a.isValidElement(n) && n.props.itemId && (e.push(n.props.itemId), n.props.children && t(n.props.children));
 			});
 		};
-		t(m);
-		let n = e.filter((e) => v.tree.isSelected(e)).length;
-		return n === 0 && !x ? {
+		t(g);
+		let n = e.filter((e) => b.tree.isSelected(e)).length;
+		return n === 0 && !C ? {
 			checked: !1,
 			indeterminate: !1
 		} : n === e.length ? {
@@ -152,85 +154,88 @@ var h = r.forwardRef(({ itemId: i, label: a, icon: l, secondaryLabel: u, actions
 			indeterminate: !0
 		};
 	}, [
-		v.checkboxes,
-		y,
-		m,
+		b.checkboxes,
 		x,
-		v.tree
+		g,
+		C,
+		b.tree
 	]);
-	return /* @__PURE__ */ s("li", {
-		ref: _,
+	return /* @__PURE__ */ l("li", {
+		ref: y,
 		role: "treeitem",
-		"aria-expanded": y ? b : void 0,
-		"aria-selected": x,
-		"aria-level": h + 1,
-		"aria-disabled": p || void 0,
+		"aria-expanded": x ? S : void 0,
+		"aria-selected": C,
+		"aria-level": _ + 1,
+		"aria-disabled": h || void 0,
 		className: "list-none",
-		children: [/* @__PURE__ */ s("div", {
+		children: [/* @__PURE__ */ l("div", {
 			role: "presentation",
-			"data-tree-item": i,
-			tabIndex: p ? -1 : 0,
-			onClick: S,
-			onKeyDown: w,
-			style: { paddingLeft: `calc(${h} * var(--spacing-ds-05b) + var(--spacing-ds-03))` },
-			className: e("flex items-center gap-ds-02 py-ds-02 px-ds-02 rounded-ds-md cursor-pointer transition-colors duration-fast-01", "hover:bg-surface-raised", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9", x && "bg-accent-3 text-accent-11", p && "opacity-action-disabled cursor-not-allowed pointer-events-none", g),
+			"data-tree-item": o,
+			tabIndex: h ? -1 : 0,
+			onClick: w,
+			onKeyDown: E,
+			style: { paddingLeft: `calc(${_} * var(--spacing-ds-05b) + var(--spacing-ds-03))` },
+			className: t("flex items-center gap-ds-02 py-ds-02 px-ds-02 rounded-control cursor-pointer transition-colors duration-fast-01", "hover:bg-surface-raised", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9", C && "bg-accent-3 text-accent-11", h && "opacity-action-disabled cursor-not-allowed pointer-events-none", v),
 			children: [
-				y ? /* @__PURE__ */ o("button", {
+				x ? /* @__PURE__ */ c("button", {
 					type: "button",
 					tabIndex: -1,
 					"aria-hidden": "true",
-					onClick: C,
+					onClick: T,
 					className: "flex shrink-0 items-center justify-center p-0 border-0 bg-transparent cursor-pointer",
-					children: /* @__PURE__ */ o(t, {
-						icon: c,
+					children: /* @__PURE__ */ c(n, {
+						icon: u,
 						size: "sm",
-						className: e("transition-transform duration-moderate-02", b && "rotate-90")
+						className: t("transition-transform duration-moderate-02", S && "rotate-90")
 					})
-				}) : /* @__PURE__ */ o("span", {
+				}) : /* @__PURE__ */ c("span", {
 					className: "inline-block w-4 shrink-0",
 					"aria-hidden": "true"
 				}),
-				v.checkboxes && /* @__PURE__ */ o(n, {
-					checked: T.checked,
-					indeterminate: T.indeterminate,
-					disabled: p,
+				b.checkboxes && /* @__PURE__ */ c(i, {
+					checked: D.checked,
+					indeterminate: D.indeterminate,
+					disabled: h,
 					tabIndex: -1,
 					onClick: (e) => e.stopPropagation(),
 					onCheckedChange: () => {
-						p || v.tree.select(i);
+						h || b.tree.select(o);
 					},
 					className: "shrink-0"
 				}),
-				l && /* @__PURE__ */ o("span", {
+				d && /* @__PURE__ */ c("span", {
 					className: "flex shrink-0 items-center text-surface-fg-subtle",
-					children: l
+					children: /* @__PURE__ */ c(e, {
+						size: "sm",
+						children: r(d)
+					})
 				}),
-				/* @__PURE__ */ o("span", {
+				/* @__PURE__ */ c("span", {
 					className: "truncate text-ds-sm",
-					children: a
+					children: s
 				}),
-				u && /* @__PURE__ */ o("span", {
+				f && /* @__PURE__ */ c("span", {
 					className: "ml-auto truncate text-ds-xs text-surface-fg-muted",
-					children: u
+					children: f
 				}),
-				f && /* @__PURE__ */ o("span", {
+				m && /* @__PURE__ */ c("span", {
 					className: "ml-auto flex shrink-0 items-center gap-ds-01",
 					onClick: (e) => e.stopPropagation(),
 					role: "presentation",
-					children: f
+					children: m
 				})
 			]
-		}), y && /* @__PURE__ */ o("div", {
+		}), x && /* @__PURE__ */ c("div", {
 			role: "group",
-			className: e("grid transition-[grid-template-rows] duration-moderate-02 ease-productive-standard", b ? "grid-rows-[1fr]" : "grid-rows-[0fr]"),
-			children: /* @__PURE__ */ o("ul", {
+			className: t("grid transition-[grid-template-rows] duration-moderate-02 ease-productive-standard", S ? "grid-rows-[1fr]" : "grid-rows-[0fr]"),
+			children: /* @__PURE__ */ c("ul", {
 				role: "group",
 				className: "overflow-hidden m-0 p-0",
-				children: r.Children.map(m, (e) => r.isValidElement(e) ? r.cloneElement(e, { depth: h + 1 }) : e)
+				children: a.Children.map(g, (e) => a.isValidElement(e) ? a.cloneElement(e, { depth: _ + 1 }) : e)
 			})
 		})]
 	});
 });
-h.displayName = "TreeItem";
+_.displayName = "TreeItem";
 //#endregion
-export { m as n, l as r, h as t };
+export { g as n, d as r, _ as t };

package/dist/_chunks/tree-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-view.js","names":[],"sources":["../../src/ui/tree-view/use-tree.ts","../../src/ui/tree-view/tree-view.tsx","../../src/ui/tree-view/tree-item.tsx"],"sourcesContent":["import { useCallback,useState } from 'react'\n\nexport interface TreeNode {\n  id: string\n  label: string\n  icon?: React.ReactNode\n  children?: TreeNode[]\n  disabled?: boolean\n}\n\ninterface UseTreeOptions {\n  defaultExpanded?: string[]\n  defaultSelected?: string[]\n  multiSelect?: boolean\n  onSelect?: (selectedIds: string[]) => void\n  onExpand?: (expandedIds: string[]) => void\n}\n\nexport function useTree(options: UseTreeOptions = {}) {\n  const { defaultExpanded, defaultSelected, multiSelect, onSelect, onExpand } = options\n\n  const [expanded, setExpanded] = useState<Set<string>>(\n    new Set(defaultExpanded ?? []),\n  )\n  const [selected, setSelected] = useState<Set<string>>(\n    new Set(defaultSelected ?? []),\n  )\n\n  const toggle = useCallback(\n    (id: string) => {\n      setExpanded((prev) => {\n        const next = new Set(prev)\n        if (next.has(id)) next.delete(id)\n        else next.add(id)\n        onExpand?.(Array.from(next))\n        return next\n      })\n    },\n    [onExpand],\n  )\n\n  const select = useCallback(\n    (id: string, event?: React.MouseEvent) => {\n      setSelected((prev) => {\n        let next: Set<string>\n        if (multiSelect && event?.ctrlKey) {\n          next = new Set(prev)\n          if (next.has(id)) next.delete(id)\n          else next.add(id)\n        } else {\n          next = new Set([id])\n        }\n        onSelect?.(Array.from(next))\n        return next\n      })\n    },\n    [multiSelect, onSelect],\n  )\n\n  return {\n    expanded,\n    selected,\n    toggle,\n    select,\n    isExpanded: (id: string) => expanded.has(id),\n    isSelected: (id: string) => selected.has(id),\n    expandAll: (ids: string[]) => setExpanded(new Set(ids)),\n    collapseAll: () => setExpanded(new Set()),\n  }\n}\n","'use client'\n\nimport * as React from 'react'\n\nimport { cn } from '../lib/utils'\nimport { TreeItem } from './tree-item'\nimport { type TreeNode,useTree } from './use-tree'\n\n// ─── Context ────────────────────────────────────────────────────────\ninterface TreeContextValue {\n  tree: ReturnType<typeof useTree>\n  checkboxes: boolean\n}\n\nconst TreeContext = React.createContext<TreeContextValue | null>(null)\n\nexport function useTreeContext() {\n  const ctx = React.useContext(TreeContext)\n  if (!ctx) {\n    throw new Error('TreeItem must be used within a <TreeView>')\n  }\n  return ctx\n}\n\n// ─── Props ──────────────────────────────────────────────────────────\nexport interface TreeViewProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onSelect'> {\n  /** Data-driven mode: pass items array */\n  items?: TreeNode[]\n  /** Initially expanded node IDs */\n  defaultExpanded?: string[]\n  /** Initially selected node IDs */\n  defaultSelected?: string[]\n  /** Enable multi-select */\n  multiSelect?: boolean\n  /** Show checkboxes before each item */\n  checkboxes?: boolean\n  /** Called when selection changes */\n  onSelect?: (ids: string[]) => void\n  /** Called when expansion changes */\n  onExpand?: (ids: string[]) => void\n  className?: string\n  /** Declarative mode: render TreeItem children directly */\n  children?: React.ReactNode\n}\n\n// ─── Render nodes recursively (data-driven mode) ───────────────────\nfunction renderNodes(nodes: TreeNode[], depth: number = 0): React.ReactNode {\n  return nodes.map((node) => (\n    <TreeItem\n      key={node.id}\n      itemId={node.id}\n      label={node.label}\n      icon={node.icon}\n      disabled={node.disabled}\n      depth={depth}\n    >\n      {node.children && node.children.length > 0\n        ? renderNodes(node.children, depth + 1)\n        : undefined}\n    </TreeItem>\n  ))\n}\n\n// ─── Helper: collect all visible item IDs ───────────────────────────\nfunction getVisibleItemElements(container: HTMLElement): HTMLElement[] {\n  return Array.from(\n    container.querySelectorAll<HTMLElement>('[data-tree-item]'),\n  ).filter((el) => {\n    // Items inside collapsed groups should not be focusable\n    let parent = el.parentElement\n    while (parent && parent !== container) {\n      if (parent.getAttribute('role') === 'group') {\n        const grid = parent.parentElement\n        if (grid && grid.classList.contains('grid-rows-[0fr]')) {\n          return false\n        }\n      }\n      parent = parent.parentElement\n    }\n    return true\n  })\n}\n\n// ─── Component ──────────────────────────────────────────────────────\nconst TreeView = React.forwardRef<HTMLUListElement, TreeViewProps>(\n  (\n    {\n      items,\n      defaultExpanded,\n      defaultSelected,\n      multiSelect = false,\n      checkboxes = false,\n      onSelect,\n      onExpand,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const tree = useTree({\n      defaultExpanded,\n      defaultSelected,\n      multiSelect,\n      onSelect,\n      onExpand,\n    })\n\n    const innerRef = React.useRef<HTMLUListElement>(null)\n    const containerRef = (ref as React.RefObject<HTMLUListElement>) ?? innerRef\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLUListElement>) => {\n      const container = containerRef.current\n      if (!container) return\n\n      const visibleItems = getVisibleItemElements(container)\n      const currentIndex = visibleItems.findIndex(\n        (el) => el === document.activeElement,\n      )\n\n      switch (e.key) {\n        case 'ArrowDown': {\n          e.preventDefault()\n          const next = visibleItems[currentIndex + 1]\n          next?.focus()\n          break\n        }\n        case 'ArrowUp': {\n          e.preventDefault()\n          const prev = visibleItems[currentIndex - 1]\n          prev?.focus()\n          break\n        }\n        case 'ArrowRight': {\n          // Handled in TreeItem for expand; if already expanded, move to first child\n          const current = visibleItems[currentIndex]\n          if (current) {\n            const itemId = current.getAttribute('data-tree-item')\n            if (itemId && tree.isExpanded(itemId)) {\n              e.preventDefault()\n              const nextItem = visibleItems[currentIndex + 1]\n              nextItem?.focus()\n            }\n          }\n          break\n        }\n        case 'ArrowLeft': {\n          // Handled in TreeItem for collapse; if already collapsed or leaf, move to parent\n          const current = visibleItems[currentIndex]\n          if (current) {\n            const itemId = current.getAttribute('data-tree-item')\n            const treeItem = current.closest('[role=\"treeitem\"]')\n            const parentGroup = treeItem?.parentElement?.closest(\n              '[role=\"treeitem\"]',\n            )\n            if (itemId && !tree.isExpanded(itemId) && parentGroup) {\n              e.preventDefault()\n              const parentRow = parentGroup.querySelector<HTMLElement>(\n                '[data-tree-item]',\n              )\n              parentRow?.focus()\n            }\n          }\n          break\n        }\n        case 'Home': {\n          e.preventDefault()\n          visibleItems[0]?.focus()\n          break\n        }\n        case 'End': {\n          e.preventDefault()\n          visibleItems[visibleItems.length - 1]?.focus()\n          break\n        }\n      }\n    }\n\n    const ctxValue = React.useMemo<TreeContextValue>(\n      () => ({ tree, checkboxes }),\n      [tree, checkboxes],\n    )\n\n    const content = items ? renderNodes(items) : children\n\n    return (\n      <TreeContext.Provider value={ctxValue}>\n        <ul\n          ref={containerRef}\n          role=\"tree\"\n          aria-multiselectable={multiSelect || undefined}\n          onKeyDown={handleKeyDown}\n          className={cn('m-0 list-none p-0', className)}\n          {...props}\n        >\n          {content}\n        </ul>\n      </TreeContext.Provider>\n    )\n  },\n)\nTreeView.displayName = 'TreeView'\n\nexport { TreeView }\n","'use client'\n\nimport { IconChevronRight } from '@tabler/icons-react'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox'\nimport { Icon } from '../icon'\nimport { cn } from '../lib/utils'\nimport { useTreeContext } from './tree-view'\n\nexport interface TreeItemProps {\n  /** Unique identifier for this tree item */\n  itemId: string\n  /** Primary label content */\n  label: React.ReactNode\n  /** Optional icon rendered before the label */\n  icon?: React.ReactNode\n  /** Secondary label rendered after the primary label */\n  secondaryLabel?: React.ReactNode\n  /** Action buttons rendered at the end of the row */\n  actions?: React.ReactNode\n  /** Whether this item is disabled */\n  disabled?: boolean\n  /** Nested tree items */\n  children?: React.ReactNode\n  /** Depth level (used internally) */\n  depth?: number\n  /** Additional CSS class names */\n  className?: string\n}\n\nconst TreeItem = React.forwardRef<HTMLLIElement, TreeItemProps>(\n  (\n    {\n      itemId,\n      label,\n      icon,\n      secondaryLabel,\n      actions,\n      disabled = false,\n      children,\n      depth = 0,\n      className,\n    },\n    ref,\n  ) => {\n    const ctx = useTreeContext()\n    const hasChildren = React.Children.count(children) > 0\n    const isExpanded = ctx.tree.isExpanded(itemId)\n    const isSelected = ctx.tree.isSelected(itemId)\n\n    const handleRowClick = (e: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return\n      ctx.tree.select(itemId, e)\n    }\n\n    const handleChevronClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n      e.stopPropagation()\n      if (disabled) return\n      ctx.tree.toggle(itemId)\n    }\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (disabled) return\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        ctx.tree.select(itemId)\n      }\n      if (e.key === 'ArrowRight' && hasChildren && !isExpanded) {\n        e.preventDefault()\n        e.stopPropagation()\n        ctx.tree.toggle(itemId)\n      }\n      if (e.key === 'ArrowLeft' && hasChildren && isExpanded) {\n        e.preventDefault()\n        e.stopPropagation()\n        ctx.tree.toggle(itemId)\n      }\n    }\n\n    // Compute indeterminate state for checkbox mode\n    const checkboxState = React.useMemo(() => {\n      if (!ctx.checkboxes || !hasChildren) {\n        return { checked: isSelected, indeterminate: false }\n      }\n      // Collect all descendant IDs\n      const descendants: string[] = []\n      const collectIds = (nodes: React.ReactNode) => {\n        React.Children.forEach(nodes, (child) => {\n          if (React.isValidElement<TreeItemProps>(child) && child.props.itemId) {\n            descendants.push(child.props.itemId)\n            if (child.props.children) {\n              collectIds(child.props.children)\n            }\n          }\n        })\n      }\n      collectIds(children)\n      const selectedCount = descendants.filter((id) =>\n        ctx.tree.isSelected(id),\n      ).length\n      if (selectedCount === 0 && !isSelected) {\n        return { checked: false, indeterminate: false }\n      }\n      if (selectedCount === descendants.length) {\n        return { checked: true, indeterminate: false }\n      }\n      return { checked: false, indeterminate: true }\n    }, [ctx.checkboxes, hasChildren, children, isSelected, ctx.tree])\n\n    return (\n      <li\n        ref={ref}\n        role=\"treeitem\"\n        aria-expanded={hasChildren ? isExpanded : undefined}\n        aria-selected={isSelected}\n        aria-level={depth + 1}\n        aria-disabled={disabled || undefined}\n        className=\"list-none\"\n      >\n        {/* Row */}\n        <div\n          role=\"presentation\"\n          data-tree-item={itemId}\n          tabIndex={disabled ? -1 : 0}\n          onClick={handleRowClick}\n          onKeyDown={handleKeyDown}\n          style={{ paddingLeft: `calc(${depth} * var(--spacing-ds-05b) + var(--spacing-ds-03))` }}\n          className={cn(\n            'flex items-center gap-ds-02 py-ds-02 px-ds-02 rounded-ds-md cursor-pointer transition-colors duration-fast-01',\n            'hover:bg-surface-raised',\n            'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9',\n            isSelected &&\n              'bg-accent-3 text-accent-11',\n            disabled && 'opacity-action-disabled cursor-not-allowed pointer-events-none',\n            className,\n          )}\n        >\n          {/* Expand chevron */}\n          {hasChildren ? (\n            <button\n              type=\"button\"\n              tabIndex={-1}\n              aria-hidden=\"true\"\n              onClick={handleChevronClick}\n              className=\"flex shrink-0 items-center justify-center p-0 border-0 bg-transparent cursor-pointer\"\n            >\n              <Icon\n                icon={IconChevronRight}\n                size=\"sm\"\n                className={cn(\n                  'transition-transform duration-moderate-02',\n                  isExpanded && 'rotate-90',\n                )}\n              />\n            </button>\n          ) : (\n            <span className=\"inline-block w-4 shrink-0\" aria-hidden=\"true\" />\n          )}\n\n          {/* Checkbox (optional) */}\n          {ctx.checkboxes && (\n            <Checkbox\n              checked={checkboxState.checked}\n              indeterminate={checkboxState.indeterminate}\n              disabled={disabled}\n              tabIndex={-1}\n              onClick={(e) => e.stopPropagation()}\n              onCheckedChange={() => {\n                if (!disabled) ctx.tree.select(itemId)\n              }}\n              className=\"shrink-0\"\n            />\n          )}\n\n          {/* Icon */}\n          {icon && (\n            <span className=\"flex shrink-0 items-center text-surface-fg-subtle\">\n              {icon}\n            </span>\n          )}\n\n          {/* Label */}\n          <span className=\"truncate text-ds-sm\">{label}</span>\n\n          {/* Secondary label */}\n          {secondaryLabel && (\n            <span className=\"ml-auto truncate text-ds-xs text-surface-fg-muted\">\n              {secondaryLabel}\n            </span>\n          )}\n\n          {/* Actions */}\n          {actions && (\n            <span\n              className=\"ml-auto flex shrink-0 items-center gap-ds-01\"\n              onClick={(e) => e.stopPropagation()}\n              role=\"presentation\"\n            >\n              {actions}\n            </span>\n          )}\n        </div>\n\n        {/* Children (collapsible) */}\n        {hasChildren && (\n          <div\n            role=\"group\"\n            className={cn(\n              'grid transition-[grid-template-rows] duration-moderate-02 ease-productive-standard',\n              isExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',\n            )}\n          >\n            <ul role=\"group\" className=\"overflow-hidden m-0 p-0\">\n              {React.Children.map(children, (child) => {\n                if (React.isValidElement<TreeItemProps>(child)) {\n                  return React.cloneElement(child, {\n                    depth: depth + 1,\n                  })\n                }\n                return child\n              })}\n            </ul>\n          </div>\n        )}\n      </li>\n    )\n  },\n)\nTreeItem.displayName = 'TreeItem'\n\nexport { TreeItem }\n"],"mappings":"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"}
+{"version":3,"file":"tree-view.js","names":[],"sources":["../../src/ui/tree-view/use-tree.ts","../../src/ui/tree-view/tree-view.tsx","../../src/ui/tree-view/tree-item.tsx"],"sourcesContent":["import { useCallback,useState } from 'react'\n\nimport type { IconInput } from '../lib/icon-input'\n\nexport interface TreeNode {\n  id: string\n  label: string\n  icon?: IconInput\n  children?: TreeNode[]\n  disabled?: boolean\n}\n\ninterface UseTreeOptions {\n  defaultExpanded?: string[]\n  defaultSelected?: string[]\n  multiSelect?: boolean\n  onSelect?: (selectedIds: string[]) => void\n  onExpand?: (expandedIds: string[]) => void\n}\n\nexport function useTree(options: UseTreeOptions = {}) {\n  const { defaultExpanded, defaultSelected, multiSelect, onSelect, onExpand } = options\n\n  const [expanded, setExpanded] = useState<Set<string>>(\n    new Set(defaultExpanded ?? []),\n  )\n  const [selected, setSelected] = useState<Set<string>>(\n    new Set(defaultSelected ?? []),\n  )\n\n  const toggle = useCallback(\n    (id: string) => {\n      setExpanded((prev) => {\n        const next = new Set(prev)\n        if (next.has(id)) next.delete(id)\n        else next.add(id)\n        onExpand?.(Array.from(next))\n        return next\n      })\n    },\n    [onExpand],\n  )\n\n  const select = useCallback(\n    (id: string, event?: React.MouseEvent) => {\n      setSelected((prev) => {\n        let next: Set<string>\n        if (multiSelect && event?.ctrlKey) {\n          next = new Set(prev)\n          if (next.has(id)) next.delete(id)\n          else next.add(id)\n        } else {\n          next = new Set([id])\n        }\n        onSelect?.(Array.from(next))\n        return next\n      })\n    },\n    [multiSelect, onSelect],\n  )\n\n  return {\n    expanded,\n    selected,\n    toggle,\n    select,\n    isExpanded: (id: string) => expanded.has(id),\n    isSelected: (id: string) => selected.has(id),\n    expandAll: (ids: string[]) => setExpanded(new Set(ids)),\n    collapseAll: () => setExpanded(new Set()),\n  }\n}\n","'use client'\n\nimport * as React from 'react'\n\nimport { cn } from '../lib/utils'\nimport { TreeItem } from './tree-item'\nimport { type TreeNode,useTree } from './use-tree'\n\n// ─── Context ────────────────────────────────────────────────────────\ninterface TreeContextValue {\n  tree: ReturnType<typeof useTree>\n  checkboxes: boolean\n}\n\nconst TreeContext = React.createContext<TreeContextValue | null>(null)\n\nexport function useTreeContext() {\n  const ctx = React.useContext(TreeContext)\n  if (!ctx) {\n    throw new Error('TreeItem must be used within a <TreeView>')\n  }\n  return ctx\n}\n\n// ─── Props ──────────────────────────────────────────────────────────\nexport interface TreeViewProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onSelect'> {\n  /** Data-driven mode: pass items array */\n  items?: TreeNode[]\n  /** Initially expanded node IDs */\n  defaultExpanded?: string[]\n  /** Initially selected node IDs */\n  defaultSelected?: string[]\n  /** Enable multi-select */\n  multiSelect?: boolean\n  /** Show checkboxes before each item */\n  checkboxes?: boolean\n  /** Called when selection changes */\n  onSelect?: (ids: string[]) => void\n  /** Called when expansion changes */\n  onExpand?: (ids: string[]) => void\n  className?: string\n  /** Declarative mode: render TreeItem children directly */\n  children?: React.ReactNode\n}\n\n// ─── Render nodes recursively (data-driven mode) ───────────────────\nfunction renderNodes(nodes: TreeNode[], depth: number = 0): React.ReactNode {\n  return nodes.map((node) => (\n    <TreeItem\n      key={node.id}\n      itemId={node.id}\n      label={node.label}\n      icon={node.icon}\n      disabled={node.disabled}\n      depth={depth}\n    >\n      {node.children && node.children.length > 0\n        ? renderNodes(node.children, depth + 1)\n        : undefined}\n    </TreeItem>\n  ))\n}\n\n// ─── Helper: collect all visible item IDs ───────────────────────────\nfunction getVisibleItemElements(container: HTMLElement): HTMLElement[] {\n  return Array.from(\n    container.querySelectorAll<HTMLElement>('[data-tree-item]'),\n  ).filter((el) => {\n    // Items inside collapsed groups should not be focusable\n    let parent = el.parentElement\n    while (parent && parent !== container) {\n      if (parent.getAttribute('role') === 'group') {\n        const grid = parent.parentElement\n        if (grid && grid.classList.contains('grid-rows-[0fr]')) {\n          return false\n        }\n      }\n      parent = parent.parentElement\n    }\n    return true\n  })\n}\n\n// ─── Component ──────────────────────────────────────────────────────\nconst TreeView = React.forwardRef<HTMLUListElement, TreeViewProps>(\n  (\n    {\n      items,\n      defaultExpanded,\n      defaultSelected,\n      multiSelect = false,\n      checkboxes = false,\n      onSelect,\n      onExpand,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const tree = useTree({\n      defaultExpanded,\n      defaultSelected,\n      multiSelect,\n      onSelect,\n      onExpand,\n    })\n\n    const innerRef = React.useRef<HTMLUListElement>(null)\n    const containerRef = (ref as React.RefObject<HTMLUListElement>) ?? innerRef\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLUListElement>) => {\n      const container = containerRef.current\n      if (!container) return\n\n      const visibleItems = getVisibleItemElements(container)\n      const currentIndex = visibleItems.findIndex(\n        (el) => el === document.activeElement,\n      )\n\n      switch (e.key) {\n        case 'ArrowDown': {\n          e.preventDefault()\n          const next = visibleItems[currentIndex + 1]\n          next?.focus()\n          break\n        }\n        case 'ArrowUp': {\n          e.preventDefault()\n          const prev = visibleItems[currentIndex - 1]\n          prev?.focus()\n          break\n        }\n        case 'ArrowRight': {\n          // Handled in TreeItem for expand; if already expanded, move to first child\n          const current = visibleItems[currentIndex]\n          if (current) {\n            const itemId = current.getAttribute('data-tree-item')\n            if (itemId && tree.isExpanded(itemId)) {\n              e.preventDefault()\n              const nextItem = visibleItems[currentIndex + 1]\n              nextItem?.focus()\n            }\n          }\n          break\n        }\n        case 'ArrowLeft': {\n          // Handled in TreeItem for collapse; if already collapsed or leaf, move to parent\n          const current = visibleItems[currentIndex]\n          if (current) {\n            const itemId = current.getAttribute('data-tree-item')\n            const treeItem = current.closest('[role=\"treeitem\"]')\n            const parentGroup = treeItem?.parentElement?.closest(\n              '[role=\"treeitem\"]',\n            )\n            if (itemId && !tree.isExpanded(itemId) && parentGroup) {\n              e.preventDefault()\n              const parentRow = parentGroup.querySelector<HTMLElement>(\n                '[data-tree-item]',\n              )\n              parentRow?.focus()\n            }\n          }\n          break\n        }\n        case 'Home': {\n          e.preventDefault()\n          visibleItems[0]?.focus()\n          break\n        }\n        case 'End': {\n          e.preventDefault()\n          visibleItems[visibleItems.length - 1]?.focus()\n          break\n        }\n      }\n    }\n\n    const ctxValue = React.useMemo<TreeContextValue>(\n      () => ({ tree, checkboxes }),\n      [tree, checkboxes],\n    )\n\n    const content = items ? renderNodes(items) : children\n\n    return (\n      <TreeContext.Provider value={ctxValue}>\n        <ul\n          ref={containerRef}\n          role=\"tree\"\n          aria-multiselectable={multiSelect || undefined}\n          onKeyDown={handleKeyDown}\n          className={cn('m-0 list-none p-0', className)}\n          {...props}\n        >\n          {content}\n        </ul>\n      </TreeContext.Provider>\n    )\n  },\n)\nTreeView.displayName = 'TreeView'\n\nexport { TreeView }\n","'use client'\n\nimport { IconChevronRight } from '@tabler/icons-react'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox'\nimport { Icon } from '../icon'\nimport { IconProvider } from '../icon-context'\nimport type { IconInput } from '../lib/icon-input'\nimport { normalizeIcon } from '../lib/normalize-icon'\nimport { cn } from '../lib/utils'\nimport { useTreeContext } from './tree-view'\n\nexport interface TreeItemProps {\n  /** Unique identifier for this tree item */\n  itemId: string\n  /** Primary label content */\n  label: React.ReactNode\n  /** Optional icon rendered before the label. Accepts any `IconInput`. */\n  icon?: IconInput\n  /** Secondary label rendered after the primary label */\n  secondaryLabel?: React.ReactNode\n  /** Action buttons rendered at the end of the row */\n  actions?: React.ReactNode\n  /** Whether this item is disabled */\n  disabled?: boolean\n  /** Nested tree items */\n  children?: React.ReactNode\n  /** Depth level (used internally) */\n  depth?: number\n  /** Additional CSS class names */\n  className?: string\n}\n\nconst TreeItem = React.forwardRef<HTMLLIElement, TreeItemProps>(\n  (\n    {\n      itemId,\n      label,\n      icon,\n      secondaryLabel,\n      actions,\n      disabled = false,\n      children,\n      depth = 0,\n      className,\n    },\n    ref,\n  ) => {\n    const ctx = useTreeContext()\n    const hasChildren = React.Children.count(children) > 0\n    const isExpanded = ctx.tree.isExpanded(itemId)\n    const isSelected = ctx.tree.isSelected(itemId)\n\n    const handleRowClick = (e: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return\n      ctx.tree.select(itemId, e)\n    }\n\n    const handleChevronClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n      e.stopPropagation()\n      if (disabled) return\n      ctx.tree.toggle(itemId)\n    }\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (disabled) return\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        ctx.tree.select(itemId)\n      }\n      if (e.key === 'ArrowRight' && hasChildren && !isExpanded) {\n        e.preventDefault()\n        e.stopPropagation()\n        ctx.tree.toggle(itemId)\n      }\n      if (e.key === 'ArrowLeft' && hasChildren && isExpanded) {\n        e.preventDefault()\n        e.stopPropagation()\n        ctx.tree.toggle(itemId)\n      }\n    }\n\n    // Compute indeterminate state for checkbox mode\n    const checkboxState = React.useMemo(() => {\n      if (!ctx.checkboxes || !hasChildren) {\n        return { checked: isSelected, indeterminate: false }\n      }\n      // Collect all descendant IDs\n      const descendants: string[] = []\n      const collectIds = (nodes: React.ReactNode) => {\n        React.Children.forEach(nodes, (child) => {\n          if (React.isValidElement<TreeItemProps>(child) && child.props.itemId) {\n            descendants.push(child.props.itemId)\n            if (child.props.children) {\n              collectIds(child.props.children)\n            }\n          }\n        })\n      }\n      collectIds(children)\n      const selectedCount = descendants.filter((id) =>\n        ctx.tree.isSelected(id),\n      ).length\n      if (selectedCount === 0 && !isSelected) {\n        return { checked: false, indeterminate: false }\n      }\n      if (selectedCount === descendants.length) {\n        return { checked: true, indeterminate: false }\n      }\n      return { checked: false, indeterminate: true }\n    }, [ctx.checkboxes, hasChildren, children, isSelected, ctx.tree])\n\n    return (\n      <li\n        ref={ref}\n        role=\"treeitem\"\n        aria-expanded={hasChildren ? isExpanded : undefined}\n        aria-selected={isSelected}\n        aria-level={depth + 1}\n        aria-disabled={disabled || undefined}\n        className=\"list-none\"\n      >\n        {/* Row */}\n        <div\n          role=\"presentation\"\n          data-tree-item={itemId}\n          tabIndex={disabled ? -1 : 0}\n          onClick={handleRowClick}\n          onKeyDown={handleKeyDown}\n          style={{ paddingLeft: `calc(${depth} * var(--spacing-ds-05b) + var(--spacing-ds-03))` }}\n          className={cn(\n            'flex items-center gap-ds-02 py-ds-02 px-ds-02 rounded-control cursor-pointer transition-colors duration-fast-01',\n            'hover:bg-surface-raised',\n            'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9',\n            isSelected &&\n              'bg-accent-3 text-accent-11',\n            disabled && 'opacity-action-disabled cursor-not-allowed pointer-events-none',\n            className,\n          )}\n        >\n          {/* Expand chevron */}\n          {hasChildren ? (\n            <button\n              type=\"button\"\n              tabIndex={-1}\n              aria-hidden=\"true\"\n              onClick={handleChevronClick}\n              className=\"flex shrink-0 items-center justify-center p-0 border-0 bg-transparent cursor-pointer\"\n            >\n              <Icon\n                icon={IconChevronRight}\n                size=\"sm\"\n                className={cn(\n                  'transition-transform duration-moderate-02',\n                  isExpanded && 'rotate-90',\n                )}\n              />\n            </button>\n          ) : (\n            <span className=\"inline-block w-4 shrink-0\" aria-hidden=\"true\" />\n          )}\n\n          {/* Checkbox (optional) */}\n          {ctx.checkboxes && (\n            <Checkbox\n              checked={checkboxState.checked}\n              indeterminate={checkboxState.indeterminate}\n              disabled={disabled}\n              tabIndex={-1}\n              onClick={(e) => e.stopPropagation()}\n              onCheckedChange={() => {\n                if (!disabled) ctx.tree.select(itemId)\n              }}\n              className=\"shrink-0\"\n            />\n          )}\n\n          {/* Icon */}\n          {icon && (\n            <span className=\"flex shrink-0 items-center text-surface-fg-subtle\">\n              <IconProvider size=\"sm\">{normalizeIcon(icon)}</IconProvider>\n            </span>\n          )}\n\n          {/* Label */}\n          <span className=\"truncate text-ds-sm\">{label}</span>\n\n          {/* Secondary label */}\n          {secondaryLabel && (\n            <span className=\"ml-auto truncate text-ds-xs text-surface-fg-muted\">\n              {secondaryLabel}\n            </span>\n          )}\n\n          {/* Actions */}\n          {actions && (\n            <span\n              className=\"ml-auto flex shrink-0 items-center gap-ds-01\"\n              onClick={(e) => e.stopPropagation()}\n              role=\"presentation\"\n            >\n              {actions}\n            </span>\n          )}\n        </div>\n\n        {/* Children (collapsible) */}\n        {hasChildren && (\n          <div\n            role=\"group\"\n            className={cn(\n              'grid transition-[grid-template-rows] duration-moderate-02 ease-productive-standard',\n              isExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',\n            )}\n          >\n            <ul role=\"group\" className=\"overflow-hidden m-0 p-0\">\n              {React.Children.map(children, (child) => {\n                if (React.isValidElement<TreeItemProps>(child)) {\n                  return React.cloneElement(child, {\n                    depth: depth + 1,\n                  })\n                }\n                return child\n              })}\n            </ul>\n          </div>\n        )}\n      </li>\n    )\n  },\n)\nTreeItem.displayName = 'TreeItem'\n\nexport { TreeItem }\n"],"mappings":"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"}

package/dist/_chunks/use-calendar.js

@@ -77,7 +77,7 @@ var T = [
 				F ? /* @__PURE__ */ i("span", { className: "h-ds-xs-plus w-ds-xs-plus" }) : /* @__PURE__ */ i("button", {
 					type: "button",
 					onClick: () => A(w(r, 1)),
-					className: "inline-flex h-ds-xs-plus w-ds-xs-plus items-center justify-center rounded-ds-md text-surface-fg-subtle transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised-hover hover:text-surface-fg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9",
+					className: "inline-flex h-ds-xs-plus w-ds-xs-plus items-center justify-center rounded-control text-surface-fg-subtle transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised-hover hover:text-surface-fg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9",
 					"aria-label": "Previous month",
 					children: /* @__PURE__ */ i(t, {
 						icon: o,
@@ -88,14 +88,14 @@ var T = [
 				/* @__PURE__ */ i("button", {
 					type: "button",
 					onClick: j,
-					className: e("text-ds-md font-semibold text-surface-fg", j && "cursor-pointer rounded-ds-md px-ds-02 transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised-hover"),
+					className: e("text-ds-md font-semibold text-surface-fg", j && "cursor-pointer rounded-control px-ds-02 transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised-hover"),
 					"aria-label": "Switch to month/year view",
 					children: f(r, "MMMM yyyy")
 				}),
 				I ? /* @__PURE__ */ i("span", { className: "h-ds-xs-plus w-ds-xs-plus" }) : /* @__PURE__ */ i("button", {
 					type: "button",
 					onClick: () => A(l(r, 1)),
-					className: "inline-flex h-ds-xs-plus w-ds-xs-plus items-center justify-center rounded-ds-md text-surface-fg-subtle transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised-hover hover:text-surface-fg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9",
+					className: "inline-flex h-ds-xs-plus w-ds-xs-plus items-center justify-center rounded-control text-surface-fg-subtle transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised-hover hover:text-surface-fg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9",
 					"aria-label": "Next month",
 					children: /* @__PURE__ */ i(t, {
 						icon: s,
@@ -131,12 +131,12 @@ var T = [
 					"aria-label": f(t, "EEEE, MMMM d, yyyy"),
 					"aria-selected": c || u || void 0,
 					"aria-disabled": !o || s || void 0,
-					className: e("relative flex h-ds-sm w-ds-sm-plus items-center justify-center rounded-ds-md text-ds-md font-body transition-colors duration-fast-01 ease-productive-standard", !o && "pointer-events-none opacity-0", o && s && "opacity-action-disabled pointer-events-none cursor-not-allowed", o && !s && !c && !u && !l && "text-surface-fg hover:bg-surface-raised-hover", l && !u && "rounded-ds-none bg-surface-raised-hover text-surface-fg", (c || u) && "bg-accent-9 text-accent-fg hover:bg-accent-10", d && !c && !u && !s && "font-semibold text-accent-11"),
+					className: e("relative flex h-ds-sm w-ds-sm-plus items-center justify-center rounded-control text-ds-md font-body transition-colors duration-fast-01 ease-productive-standard", !o && "pointer-events-none opacity-0", o && s && "opacity-action-disabled pointer-events-none cursor-not-allowed", o && !s && !c && !u && !l && "text-surface-fg hover:bg-surface-raised-hover", l && !u && "rounded-none bg-surface-raised-hover text-surface-fg", (c || u) && "bg-accent-9 text-accent-fg hover:bg-accent-10", d && !c && !u && !s && "font-semibold text-accent-11"),
 					children: [f(t, "d"), m.length > 0 && /* @__PURE__ */ i("span", {
 						className: "flex gap-px justify-center absolute bottom-[2px] left-0 right-0",
 						children: m.slice(0, 3).map((e, t) => /* @__PURE__ */ i("span", {
 							"data-event-dot": !0,
-							className: "h-[4px] w-[4px] rounded-ds-full",
+							className: "h-[4px] w-[4px] rounded-pill",
 							style: { backgroundColor: e.color ?? "var(--color-accent-9)" }
 						}, t))
 					})]

package/dist/_chunks/use-calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-calendar.js","names":[],"sources":["../../src/composed/date-picker/calendar-grid.tsx","../../src/composed/date-picker/use-calendar.ts"],"sourcesContent":["'use client'\n\nimport { IconChevronLeft, IconChevronRight } from '@tabler/icons-react'\nimport {\n  addDays,\n  addMonths,\n  endOfMonth,\n  endOfWeek,\n  format,\n  isAfter,\n  isBefore,\n  isSameDay,\n  isSameMonth,\n  isWithinInterval,\n  lastDayOfMonth,\n  startOfDay,\n  startOfMonth,\n  startOfWeek,\n  subMonths,\n} from 'date-fns'\nimport * as React from 'react'\n\nimport { Icon } from '../../ui/icon'\nimport { cn } from '../../ui/lib/utils'\n\nconst WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']\n\nexport interface CalendarEvent {\n  date: Date\n  color?: string\n  label?: string\n}\n\nexport interface CalendarGridProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onSelect'> {\n  currentMonth: Date\n  selected?: Date | null\n  rangeStart?: Date | null\n  rangeEnd?: Date | null\n  hoverDate?: Date | null\n  onSelect: (date: Date) => void\n  onHover?: (date: Date | null) => void\n  onMonthChange: (date: Date) => void\n  onHeaderClick?: () => void\n  disabledDates?: (date: Date) => boolean\n  minDate?: Date\n  maxDate?: Date\n  /** Hide the previous-month navigation arrow */\n  hidePrevNav?: boolean\n  /** Hide the next-month navigation arrow */\n  hideNextNav?: boolean\n  /** Events to display as dot indicators on dates */\n  events?: CalendarEvent[]\n}\n\nexport const CalendarGrid = React.forwardRef<HTMLDivElement, CalendarGridProps>(\n  function CalendarGrid({\n  currentMonth,\n  selected,\n  rangeStart,\n  rangeEnd,\n  hoverDate,\n  onSelect,\n  onHover,\n  onMonthChange,\n  onHeaderClick,\n  disabledDates,\n  minDate,\n  maxDate,\n  hidePrevNav,\n  hideNextNav,\n  events,\n  className,\n  ...props\n}, forwardedRef) {\n  const gridRef = React.useRef<HTMLDivElement>(null)\n\n  const eventsByDate = React.useMemo(() => {\n    const map = new Map<string, CalendarEvent[]>()\n    if (!events) return map\n    for (const evt of events) {\n      const key = format(evt.date, 'yyyy-MM-dd')\n      const arr = map.get(key) ?? []\n      arr.push(evt)\n      map.set(key, arr)\n    }\n    return map\n  }, [events])\n\n  const monthStart = startOfMonth(currentMonth)\n  const monthEnd = endOfMonth(currentMonth)\n  const calendarStart = startOfWeek(monthStart)\n  const calendarEnd = endOfWeek(monthEnd)\n\n  const days: Date[] = []\n  let day = calendarStart\n  while (day <= calendarEnd) {\n    days.push(day)\n    day = addDays(day, 1)\n  }\n\n  const isDateDisabled = (date: Date): boolean => {\n    if (disabledDates?.(date)) return true\n    if (minDate && isBefore(date, startOfDay(minDate))) return true\n    if (maxDate && isAfter(date, startOfDay(maxDate))) return true\n    return false\n  }\n\n  const isInRange = (date: Date) => {\n    if (rangeStart && rangeEnd) {\n      const start = isBefore(rangeStart, rangeEnd) ? rangeStart : rangeEnd\n      const end = isAfter(rangeEnd, rangeStart) ? rangeEnd : rangeStart\n      return isWithinInterval(date, { start, end })\n    }\n    if (rangeStart && hoverDate) {\n      const start = isBefore(rangeStart, hoverDate) ? rangeStart : hoverDate\n      const end = isAfter(hoverDate, rangeStart) ? hoverDate : rangeStart\n      return isWithinInterval(date, { start, end })\n    }\n    return false\n  }\n\n  const isRangeEdge = (date: Date) => {\n    if (rangeStart && isSameDay(date, rangeStart)) return true\n    if (rangeEnd && isSameDay(date, rangeEnd)) return true\n    return false\n  }\n\n  const focusDate = (target: Date) => {\n    if (!gridRef.current) return\n    const dateStr = format(target, 'yyyy-MM-dd')\n    const btn = gridRef.current.querySelector<HTMLButtonElement>(\n      `[data-date=\"${dateStr}\"]`,\n    )\n    if (btn) {\n      btn.focus()\n    } else {\n      // Date is in a different month — navigate there and focus after render\n      onMonthChange(startOfMonth(target))\n    }\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    const target = e.target as HTMLElement\n    const dateStr = target.getAttribute('data-date')\n    if (!dateStr) return\n\n    const current = new Date(dateStr + 'T00:00:00')\n    let next: Date | null = null\n\n    switch (e.key) {\n      case 'ArrowLeft':\n        next = addDays(current, -1)\n        break\n      case 'ArrowRight':\n        next = addDays(current, 1)\n        break\n      case 'ArrowUp':\n        next = addDays(current, -7)\n        break\n      case 'ArrowDown':\n        next = addDays(current, 7)\n        break\n      case 'Home':\n        next = startOfMonth(current)\n        break\n      case 'End':\n        next = lastDayOfMonth(current)\n        break\n      case 'Enter':\n      case ' ': {\n        e.preventDefault()\n        if (!isDateDisabled(current) && isSameMonth(current, currentMonth)) {\n          onSelect(current)\n        }\n        return\n      }\n      default:\n        return\n    }\n\n    if (next) {\n      e.preventDefault()\n      focusDate(next)\n    }\n  }\n\n  return (\n    <div ref={forwardedRef} {...props} className={cn(\"w-[252px]\", className)}>\n      <div className=\"flex items-center justify-between px-ds-02 pb-ds-04\">\n        {hidePrevNav ? (\n          <span className=\"h-ds-xs-plus w-ds-xs-plus\" />\n        ) : (\n          <button\n            type=\"button\"\n            onClick={() => onMonthChange(subMonths(currentMonth, 1))}\n            className=\"inline-flex h-ds-xs-plus w-ds-xs-plus items-center justify-center rounded-ds-md text-surface-fg-subtle transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised-hover hover:text-surface-fg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9\"\n            aria-label=\"Previous month\"\n          >\n            <Icon icon={IconChevronLeft} size=\"sm\" stroke=\"light\" />\n          </button>\n        )}\n        <button\n          type=\"button\"\n          onClick={onHeaderClick}\n          className={cn(\n            'text-ds-md font-semibold text-surface-fg',\n            onHeaderClick &&\n              'cursor-pointer rounded-ds-md px-ds-02 transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised-hover',\n          )}\n          aria-label=\"Switch to month/year view\"\n        >\n          {format(currentMonth, 'MMMM yyyy')}\n        </button>\n        {hideNextNav ? (\n          <span className=\"h-ds-xs-plus w-ds-xs-plus\" />\n        ) : (\n          <button\n            type=\"button\"\n            onClick={() => onMonthChange(addMonths(currentMonth, 1))}\n            className=\"inline-flex h-ds-xs-plus w-ds-xs-plus items-center justify-center rounded-ds-md text-surface-fg-subtle transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised-hover hover:text-surface-fg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9\"\n            aria-label=\"Next month\"\n          >\n            <Icon icon={IconChevronRight} size=\"sm\" stroke=\"light\" />\n          </button>\n        )}\n      </div>\n\n      <div\n        ref={gridRef}\n        className=\"grid grid-cols-7 gap-0\"\n        role=\"grid\"\n        tabIndex={0}\n        aria-label=\"Calendar\"\n        onKeyDown={handleKeyDown}\n      >\n        {WEEKDAYS.map((wd) => (\n          <div\n            key={wd}\n            role=\"columnheader\"\n            className=\"flex h-ds-sm items-center justify-center text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle\"\n          >\n            {wd}\n          </div>\n        ))}\n\n        {days.map((d, i) => {\n          const inMonth = isSameMonth(d, currentMonth)\n          const disabled = isDateDisabled(d)\n          const isSelected = selected && isSameDay(d, selected)\n          const inRange = isInRange(d)\n          const edge = isRangeEdge(d)\n          const isToday = isSameDay(d, new Date())\n          const dateKey = format(d, 'yyyy-MM-dd')\n          const dayEvents = eventsByDate.get(dateKey) ?? []\n\n          return (\n            <button\n              key={i}\n              type=\"button\"\n              role=\"gridcell\"\n              data-date={dateKey}\n              tabIndex={inMonth && !disabled ? 0 : -1}\n              disabled={!inMonth || disabled}\n              onClick={() => {\n                if (inMonth && !disabled) onSelect(d)\n              }}\n              onMouseEnter={() => onHover?.(d)}\n              onMouseLeave={() => onHover?.(null)}\n              aria-label={format(d, 'EEEE, MMMM d, yyyy')}\n              aria-selected={isSelected || edge || undefined}\n              aria-disabled={!inMonth || disabled || undefined}\n              className={cn(\n                'relative flex h-ds-sm w-ds-sm-plus items-center justify-center rounded-ds-md text-ds-md font-body transition-colors duration-fast-01 ease-productive-standard',\n                !inMonth && 'pointer-events-none opacity-0',\n                inMonth && disabled && 'opacity-action-disabled pointer-events-none cursor-not-allowed',\n                inMonth && !disabled && !isSelected && !edge && !inRange &&\n                  'text-surface-fg hover:bg-surface-raised-hover',\n                inRange && !edge &&\n                  'rounded-ds-none bg-surface-raised-hover text-surface-fg',\n                (isSelected || edge) &&\n                  'bg-accent-9 text-accent-fg hover:bg-accent-10',\n                isToday && !isSelected && !edge && !disabled &&\n                  'font-semibold text-accent-11',\n              )}\n            >\n              {format(d, 'd')}\n              {dayEvents.length > 0 && (\n                <span className=\"flex gap-px justify-center absolute bottom-[2px] left-0 right-0\">\n                  {dayEvents.slice(0, 3).map((evt, idx) => (\n                    <span\n                      key={idx}\n                      data-event-dot\n                      className=\"h-[4px] w-[4px] rounded-ds-full\"\n                      style={{ backgroundColor: evt.color ?? 'var(--color-accent-9)' }}\n                    />\n                  ))}\n                </span>\n              )}\n            </button>\n          )\n        })}\n      </div>\n    </div>\n  )\n},\n)\n\nCalendarGrid.displayName = 'CalendarGrid'\n","'use client'\n\nimport { addMonths, setMonth, setYear,subMonths } from 'date-fns'\nimport { useState } from 'react'\n\nexport function useCalendar(initialMonth?: Date) {\n  const [currentMonth, setCurrentMonth] = useState(initialMonth ?? new Date())\n\n  const goToPreviousMonth = () => setCurrentMonth((prev) => subMonths(prev, 1))\n  const goToNextMonth = () => setCurrentMonth((prev) => addMonths(prev, 1))\n  const goToMonth = (month: number) =>\n    setCurrentMonth((prev) => setMonth(prev, month))\n  const goToYear = (year: number) =>\n    setCurrentMonth((prev) => setYear(prev, year))\n\n  return {\n    currentMonth,\n    setCurrentMonth,\n    goToPreviousMonth,\n    goToNextMonth,\n    goToMonth,\n    goToYear,\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-calendar.js","names":[],"sources":["../../src/composed/date-picker/calendar-grid.tsx","../../src/composed/date-picker/use-calendar.ts"],"sourcesContent":["'use client'\n\nimport { IconChevronLeft, IconChevronRight } from '@tabler/icons-react'\nimport {\n  addDays,\n  addMonths,\n  endOfMonth,\n  endOfWeek,\n  format,\n  isAfter,\n  isBefore,\n  isSameDay,\n  isSameMonth,\n  isWithinInterval,\n  lastDayOfMonth,\n  startOfDay,\n  startOfMonth,\n  startOfWeek,\n  subMonths,\n} from 'date-fns'\nimport * as React from 'react'\n\nimport { Icon } from '../../ui/icon'\nimport { cn } from '../../ui/lib/utils'\n\nconst WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']\n\nexport interface CalendarEvent {\n  date: Date\n  color?: string\n  label?: string\n}\n\nexport interface CalendarGridProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onSelect'> {\n  currentMonth: Date\n  selected?: Date | null\n  rangeStart?: Date | null\n  rangeEnd?: Date | null\n  hoverDate?: Date | null\n  onSelect: (date: Date) => void\n  onHover?: (date: Date | null) => void\n  onMonthChange: (date: Date) => void\n  onHeaderClick?: () => void\n  disabledDates?: (date: Date) => boolean\n  minDate?: Date\n  maxDate?: Date\n  /** Hide the previous-month navigation arrow */\n  hidePrevNav?: boolean\n  /** Hide the next-month navigation arrow */\n  hideNextNav?: boolean\n  /** Events to display as dot indicators on dates */\n  events?: CalendarEvent[]\n}\n\nexport const CalendarGrid = React.forwardRef<HTMLDivElement, CalendarGridProps>(\n  function CalendarGrid({\n  currentMonth,\n  selected,\n  rangeStart,\n  rangeEnd,\n  hoverDate,\n  onSelect,\n  onHover,\n  onMonthChange,\n  onHeaderClick,\n  disabledDates,\n  minDate,\n  maxDate,\n  hidePrevNav,\n  hideNextNav,\n  events,\n  className,\n  ...props\n}, forwardedRef) {\n  const gridRef = React.useRef<HTMLDivElement>(null)\n\n  const eventsByDate = React.useMemo(() => {\n    const map = new Map<string, CalendarEvent[]>()\n    if (!events) return map\n    for (const evt of events) {\n      const key = format(evt.date, 'yyyy-MM-dd')\n      const arr = map.get(key) ?? []\n      arr.push(evt)\n      map.set(key, arr)\n    }\n    return map\n  }, [events])\n\n  const monthStart = startOfMonth(currentMonth)\n  const monthEnd = endOfMonth(currentMonth)\n  const calendarStart = startOfWeek(monthStart)\n  const calendarEnd = endOfWeek(monthEnd)\n\n  const days: Date[] = []\n  let day = calendarStart\n  while (day <= calendarEnd) {\n    days.push(day)\n    day = addDays(day, 1)\n  }\n\n  const isDateDisabled = (date: Date): boolean => {\n    if (disabledDates?.(date)) return true\n    if (minDate && isBefore(date, startOfDay(minDate))) return true\n    if (maxDate && isAfter(date, startOfDay(maxDate))) return true\n    return false\n  }\n\n  const isInRange = (date: Date) => {\n    if (rangeStart && rangeEnd) {\n      const start = isBefore(rangeStart, rangeEnd) ? rangeStart : rangeEnd\n      const end = isAfter(rangeEnd, rangeStart) ? rangeEnd : rangeStart\n      return isWithinInterval(date, { start, end })\n    }\n    if (rangeStart && hoverDate) {\n      const start = isBefore(rangeStart, hoverDate) ? rangeStart : hoverDate\n      const end = isAfter(hoverDate, rangeStart) ? hoverDate : rangeStart\n      return isWithinInterval(date, { start, end })\n    }\n    return false\n  }\n\n  const isRangeEdge = (date: Date) => {\n    if (rangeStart && isSameDay(date, rangeStart)) return true\n    if (rangeEnd && isSameDay(date, rangeEnd)) return true\n    return false\n  }\n\n  const focusDate = (target: Date) => {\n    if (!gridRef.current) return\n    const dateStr = format(target, 'yyyy-MM-dd')\n    const btn = gridRef.current.querySelector<HTMLButtonElement>(\n      `[data-date=\"${dateStr}\"]`,\n    )\n    if (btn) {\n      btn.focus()\n    } else {\n      // Date is in a different month — navigate there and focus after render\n      onMonthChange(startOfMonth(target))\n    }\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    const target = e.target as HTMLElement\n    const dateStr = target.getAttribute('data-date')\n    if (!dateStr) return\n\n    const current = new Date(dateStr + 'T00:00:00')\n    let next: Date | null = null\n\n    switch (e.key) {\n      case 'ArrowLeft':\n        next = addDays(current, -1)\n        break\n      case 'ArrowRight':\n        next = addDays(current, 1)\n        break\n      case 'ArrowUp':\n        next = addDays(current, -7)\n        break\n      case 'ArrowDown':\n        next = addDays(current, 7)\n        break\n      case 'Home':\n        next = startOfMonth(current)\n        break\n      case 'End':\n        next = lastDayOfMonth(current)\n        break\n      case 'Enter':\n      case ' ': {\n        e.preventDefault()\n        if (!isDateDisabled(current) && isSameMonth(current, currentMonth)) {\n          onSelect(current)\n        }\n        return\n      }\n      default:\n        return\n    }\n\n    if (next) {\n      e.preventDefault()\n      focusDate(next)\n    }\n  }\n\n  return (\n    <div ref={forwardedRef} {...props} className={cn(\"w-[252px]\", className)}>\n      <div className=\"flex items-center justify-between px-ds-02 pb-ds-04\">\n        {hidePrevNav ? (\n          <span className=\"h-ds-xs-plus w-ds-xs-plus\" />\n        ) : (\n          <button\n            type=\"button\"\n            onClick={() => onMonthChange(subMonths(currentMonth, 1))}\n            className=\"inline-flex h-ds-xs-plus w-ds-xs-plus items-center justify-center rounded-control text-surface-fg-subtle transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised-hover hover:text-surface-fg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9\"\n            aria-label=\"Previous month\"\n          >\n            <Icon icon={IconChevronLeft} size=\"sm\" stroke=\"light\" />\n          </button>\n        )}\n        <button\n          type=\"button\"\n          onClick={onHeaderClick}\n          className={cn(\n            'text-ds-md font-semibold text-surface-fg',\n            onHeaderClick &&\n              'cursor-pointer rounded-control px-ds-02 transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised-hover',\n          )}\n          aria-label=\"Switch to month/year view\"\n        >\n          {format(currentMonth, 'MMMM yyyy')}\n        </button>\n        {hideNextNav ? (\n          <span className=\"h-ds-xs-plus w-ds-xs-plus\" />\n        ) : (\n          <button\n            type=\"button\"\n            onClick={() => onMonthChange(addMonths(currentMonth, 1))}\n            className=\"inline-flex h-ds-xs-plus w-ds-xs-plus items-center justify-center rounded-control text-surface-fg-subtle transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised-hover hover:text-surface-fg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9\"\n            aria-label=\"Next month\"\n          >\n            <Icon icon={IconChevronRight} size=\"sm\" stroke=\"light\" />\n          </button>\n        )}\n      </div>\n\n      <div\n        ref={gridRef}\n        className=\"grid grid-cols-7 gap-0\"\n        role=\"grid\"\n        tabIndex={0}\n        aria-label=\"Calendar\"\n        onKeyDown={handleKeyDown}\n      >\n        {WEEKDAYS.map((wd) => (\n          <div\n            key={wd}\n            role=\"columnheader\"\n            className=\"flex h-ds-sm items-center justify-center text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle\"\n          >\n            {wd}\n          </div>\n        ))}\n\n        {days.map((d, i) => {\n          const inMonth = isSameMonth(d, currentMonth)\n          const disabled = isDateDisabled(d)\n          const isSelected = selected && isSameDay(d, selected)\n          const inRange = isInRange(d)\n          const edge = isRangeEdge(d)\n          const isToday = isSameDay(d, new Date())\n          const dateKey = format(d, 'yyyy-MM-dd')\n          const dayEvents = eventsByDate.get(dateKey) ?? []\n\n          return (\n            <button\n              key={i}\n              type=\"button\"\n              role=\"gridcell\"\n              data-date={dateKey}\n              tabIndex={inMonth && !disabled ? 0 : -1}\n              disabled={!inMonth || disabled}\n              onClick={() => {\n                if (inMonth && !disabled) onSelect(d)\n              }}\n              onMouseEnter={() => onHover?.(d)}\n              onMouseLeave={() => onHover?.(null)}\n              aria-label={format(d, 'EEEE, MMMM d, yyyy')}\n              aria-selected={isSelected || edge || undefined}\n              aria-disabled={!inMonth || disabled || undefined}\n              className={cn(\n                'relative flex h-ds-sm w-ds-sm-plus items-center justify-center rounded-control text-ds-md font-body transition-colors duration-fast-01 ease-productive-standard',\n                !inMonth && 'pointer-events-none opacity-0',\n                inMonth && disabled && 'opacity-action-disabled pointer-events-none cursor-not-allowed',\n                inMonth && !disabled && !isSelected && !edge && !inRange &&\n                  'text-surface-fg hover:bg-surface-raised-hover',\n                inRange && !edge &&\n                  'rounded-none bg-surface-raised-hover text-surface-fg',\n                (isSelected || edge) &&\n                  'bg-accent-9 text-accent-fg hover:bg-accent-10',\n                isToday && !isSelected && !edge && !disabled &&\n                  'font-semibold text-accent-11',\n              )}\n            >\n              {format(d, 'd')}\n              {dayEvents.length > 0 && (\n                <span className=\"flex gap-px justify-center absolute bottom-[2px] left-0 right-0\">\n                  {dayEvents.slice(0, 3).map((evt, idx) => (\n                    <span\n                      key={idx}\n                      data-event-dot\n                      className=\"h-[4px] w-[4px] rounded-pill\"\n                      style={{ backgroundColor: evt.color ?? 'var(--color-accent-9)' }}\n                    />\n                  ))}\n                </span>\n              )}\n            </button>\n          )\n        })}\n      </div>\n    </div>\n  )\n},\n)\n\nCalendarGrid.displayName = 'CalendarGrid'\n","'use client'\n\nimport { addMonths, setMonth, setYear,subMonths } from 'date-fns'\nimport { useState } from 'react'\n\nexport function useCalendar(initialMonth?: Date) {\n  const [currentMonth, setCurrentMonth] = useState(initialMonth ?? new Date())\n\n  const goToPreviousMonth = () => setCurrentMonth((prev) => subMonths(prev, 1))\n  const goToNextMonth = () => setCurrentMonth((prev) => addMonths(prev, 1))\n  const goToMonth = (month: number) =>\n    setCurrentMonth((prev) => setMonth(prev, month))\n  const goToYear = (year: number) =>\n    setCurrentMonth((prev) => setYear(prev, year))\n\n  return {\n    currentMonth,\n    setCurrentMonth,\n    goToPreviousMonth,\n    goToNextMonth,\n    goToMonth,\n    goToYear,\n  }\n}\n"],"mappings":"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"}