@psnext/design-system 2.3.0 → 2.4.0

package/dist/MultiColumn.js

@@ -0,0 +1,335 @@
+import { t as cn } from "./cn.js";
+import { t as Icon } from "./Icon.js";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { GripVerticalIcon } from "lucide-react";
+//#region src/layouts/MultiColumn/MultiColumn.utils.ts
+/**
+* Parses the browser-resolved `grid-template-columns` value (always
+* space-separated px values in a real browser, regardless of how the tracks
+* were authored) into a plain array of numbers.
+*/
+function resolvePxTracks(computedGridTemplateColumns) {
+	return computedGridTemplateColumns.split(" ").map((token) => token.trim()).filter(Boolean).map((token) => Number.parseFloat(token));
+}
+/** Parses an authored `minmax(<min>px,<max>px)` track into numeric px bounds, or null for any other track shape. */
+function parseMinMaxPx(track) {
+	const match = track.match(/^minmax\(\s*([\d.]+)px\s*,\s*([\d.]+)px\s*\)$/);
+	if (!match) return null;
+	return {
+		min: Number(match[1]),
+		max: Number(match[2])
+	};
+}
+/**
+* Given the current resolved px widths of two adjacent tracks, shifts the
+* boundary between them by `deltaPx` (left grows, right shrinks, or vice
+* versa) while keeping their combined width constant. Clamps each side to
+* `minSizePx` and, when a side was originally authored as `minmax(min,max)`,
+* to that side's own bounds — so a minmax() column's configured range
+* survives being resized, rather than being silently discarded.
+*/
+function computeResizedPair(currentPx, deltaPx, minSizePx, bounds) {
+	const total = currentPx[0] + currentPx[1];
+	const leftMin = Math.max(minSizePx, bounds[0]?.min ?? Number.NEGATIVE_INFINITY);
+	const leftMax = Math.min(total - minSizePx, bounds[0]?.max ?? Number.POSITIVE_INFINITY);
+	const rightMin = Math.max(minSizePx, bounds[1]?.min ?? Number.NEGATIVE_INFINITY);
+	const rightMax = Math.min(total - minSizePx, bounds[1]?.max ?? Number.POSITIVE_INFINITY);
+	let left = currentPx[0] + deltaPx;
+	left = Math.min(Math.max(left, leftMin), leftMax);
+	let right = total - left;
+	if (right < rightMin) {
+		right = rightMin;
+		left = total - right;
+	} else if (right > rightMax) {
+		right = rightMax;
+		left = total - right;
+	}
+	return [left, right];
+}
+/** Moves `id` one step left (-1) or right (+1) in a left-to-right order list; a no-op copy at either boundary or if `id` isn't present. */
+function moveIdInOrder(order, id, direction) {
+	const index = order.indexOf(id);
+	if (index === -1) return [...order];
+	const targetIndex = index + direction;
+	if (targetIndex < 0 || targetIndex >= order.length) return [...order];
+	const next = [...order];
+	[next[index], next[targetIndex]] = [next[targetIndex], next[index]];
+	return next;
+}
+/** Swaps the positions of `idA` and `idB` in a left-to-right order list; a no-op copy if either id is missing or they're equal. */
+function swapIdsInOrder(order, idA, idB) {
+	if (idA === idB) return [...order];
+	const indexA = order.indexOf(idA);
+	const indexB = order.indexOf(idB);
+	if (indexA === -1 || indexB === -1) return [...order];
+	const next = [...order];
+	[next[indexA], next[indexB]] = [next[indexB], next[indexA]];
+	return next;
+}
+//#endregion
+//#region src/layouts/MultiColumn/MultiColumn.tsx
+const multiColumnVariants = cva("flex flex-col", {
+	variants: {
+		gap: {
+			none: "gap-0",
+			sm: "gap-3",
+			md: "gap-4",
+			lg: "gap-6",
+			xl: "gap-8"
+		},
+		stackBelow: {
+			sm: "sm:grid sm:grid-cols-[var(--mc-columns)]",
+			md: "md:grid md:grid-cols-[var(--mc-columns)]",
+			lg: "lg:grid lg:grid-cols-[var(--mc-columns)]",
+			xl: "xl:grid xl:grid-cols-[var(--mc-columns)]"
+		}
+	},
+	defaultVariants: {
+		gap: "lg",
+		stackBelow: "lg"
+	}
+});
+const stackBelowVisibleClass = {
+	sm: "hidden sm:flex",
+	md: "hidden md:flex",
+	lg: "hidden lg:flex",
+	xl: "hidden xl:flex"
+};
+const MIN_COLUMN_SIZE_PX_DEFAULT = 80;
+const RESIZE_KEYBOARD_STEP_PX = 16;
+function parseMinColumnSize(minColumnSize) {
+	if (!minColumnSize) return MIN_COLUMN_SIZE_PX_DEFAULT;
+	const parsed = Number.parseFloat(minColumnSize);
+	return Number.isFinite(parsed) ? parsed : MIN_COLUMN_SIZE_PX_DEFAULT;
+}
+/** Boundary (center-of-gap) px offsets from the grid's left edge, one per gap between adjacent tracks. */
+function computeHandlePositionsPx(grid) {
+	const computed = getComputedStyle(grid);
+	const tracksPx = resolvePxTracks(computed.gridTemplateColumns);
+	const gapPx = Number.parseFloat(computed.columnGap) || 0;
+	const positions = [];
+	let trackSum = 0;
+	for (let i = 0; i < tracksPx.length - 1; i++) {
+		trackSum += tracksPx[i];
+		positions.push(trackSum + i * gapPx + gapPx / 2);
+	}
+	return positions;
+}
+/** CSS Grid N-column layout — pass one track per column via `columns`; stacks below `stackBelow`. */
+function MultiColumn({ className, style, columns, gap, stackBelow, resizable, onColumnsChange, minColumnSize, reorderable, onReorderChange, children, ...props }) {
+	const gridRef = React.useRef(null);
+	const effectiveStackBelow = stackBelow ?? "lg";
+	const columnsKey = columns.join(" ");
+	const [liveColumns, setLiveColumns] = React.useState(columns);
+	const [syncedColumnsKey, setSyncedColumnsKey] = React.useState(columnsKey);
+	if (columnsKey !== syncedColumnsKey) {
+		setSyncedColumnsKey(columnsKey);
+		setLiveColumns(columns);
+	}
+	const effectiveColumns = resizable ? liveColumns : columns;
+	const minColumnSizePx = parseMinColumnSize(minColumnSize);
+	function commitColumns(next) {
+		setLiveColumns(next);
+		onColumnsChange?.(next);
+	}
+	const dragStateRef = React.useRef(null);
+	const [resizingIndex, setResizingIndex] = React.useState(null);
+	function resizeByDelta(index, deltaPx, startTracksPx) {
+		const originalBounds = columns.map(parseMinMaxPx);
+		const [leftPx, rightPx] = computeResizedPair([startTracksPx[index], startTracksPx[index + 1]], deltaPx, minColumnSizePx, [originalBounds[index] ?? null, originalBounds[index + 1] ?? null]);
+		const next = [...effectiveColumns];
+		next[index] = `${leftPx}px`;
+		next[index + 1] = `${rightPx}px`;
+		commitColumns(next);
+	}
+	function handleResizePointerDown(index) {
+		return (event) => {
+			if (event.button !== 0 && event.pointerType === "mouse") return;
+			event.preventDefault();
+			const grid = gridRef.current;
+			if (!grid) return;
+			const startTracksPx = resolvePxTracks(getComputedStyle(grid).gridTemplateColumns);
+			dragStateRef.current = {
+				index,
+				startClientX: event.clientX,
+				startTracksPx
+			};
+			setResizingIndex(index);
+			document.body.style.cursor = "col-resize";
+			const onMove = (moveEvent) => {
+				const state = dragStateRef.current;
+				if (!state) return;
+				resizeByDelta(state.index, moveEvent.clientX - state.startClientX, state.startTracksPx);
+			};
+			const onEnd = () => {
+				dragStateRef.current = null;
+				document.body.style.cursor = "";
+				setResizingIndex(null);
+				window.removeEventListener("pointermove", onMove);
+				window.removeEventListener("pointerup", onEnd);
+				window.removeEventListener("pointercancel", onEnd);
+			};
+			window.addEventListener("pointermove", onMove);
+			window.addEventListener("pointerup", onEnd);
+			window.addEventListener("pointercancel", onEnd);
+		};
+	}
+	function handleResizeKeyDown(index) {
+		return (event) => {
+			if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+			event.preventDefault();
+			const grid = gridRef.current;
+			if (!grid) return;
+			const startTracksPx = resolvePxTracks(getComputedStyle(grid).gridTemplateColumns);
+			resizeByDelta(index, event.key === "ArrowRight" ? RESIZE_KEYBOARD_STEP_PX : -16, startTracksPx);
+		};
+	}
+	const [handleLeftPx, setHandleLeftPx] = React.useState([]);
+	React.useLayoutEffect(() => {
+		if (!resizable) return;
+		const grid = gridRef.current;
+		if (!grid) return;
+		const recompute = () => setHandleLeftPx(computeHandlePositionsPx(grid));
+		recompute();
+		const observer = new ResizeObserver(recompute);
+		observer.observe(grid);
+		return () => observer.disconnect();
+	}, [resizable, effectiveColumns]);
+	const childArray = React.Children.toArray(children);
+	function idFor(child, index) {
+		if (typeof child.props.id === "string" && child.props.id.length > 0) return child.props.id;
+		if (reorderable && process.env.NODE_ENV !== "production") console.warn("MultiColumn: a MultiColumnItem is missing an `id` prop while `reorderable` is set. Falling back to a generated id — pass `id` on every MultiColumnItem for stable `onReorderChange` results.");
+		return child.key != null ? String(child.key) : `mc-item-${index}`;
+	}
+	const [order, setOrder] = React.useState(() => childArray.map((child, index) => ({
+		id: idFor(child, index),
+		initialOrder: child.props.order ?? index
+	})).sort((a, b) => a.initialOrder - b.initialOrder).map((entry) => entry.id));
+	function commitOrder(next) {
+		setOrder(next);
+		onReorderChange?.(next);
+	}
+	const [draggingId, setDraggingId] = React.useState(null);
+	const [dropTargetId, setDropTargetId] = React.useState(null);
+	function itemIdAtPoint(clientX, clientY) {
+		return document.elementFromPoint(clientX, clientY)?.closest("[data-slot=\"multi-column-item\"]")?.id;
+	}
+	function handleGripPointerDown(id) {
+		return (event) => {
+			event.preventDefault();
+			setDraggingId(id);
+			document.body.style.cursor = "grabbing";
+			function removeListeners() {
+				window.removeEventListener("pointermove", onMove);
+				window.removeEventListener("pointerup", onUp);
+				window.removeEventListener("pointercancel", onCancel);
+			}
+			function endDrag() {
+				document.body.style.cursor = "";
+				setDraggingId(null);
+				setDropTargetId(null);
+			}
+			const onMove = (moveEvent) => {
+				const targetId = itemIdAtPoint(moveEvent.clientX, moveEvent.clientY);
+				setDropTargetId(targetId && targetId !== id ? targetId : null);
+			};
+			const onUp = (upEvent) => {
+				removeListeners();
+				const targetId = itemIdAtPoint(upEvent.clientX, upEvent.clientY);
+				if (targetId && targetId !== id) commitOrder(swapIdsInOrder(order, id, targetId));
+				endDrag();
+			};
+			const onCancel = () => {
+				removeListeners();
+				endDrag();
+			};
+			window.addEventListener("pointermove", onMove);
+			window.addEventListener("pointerup", onUp);
+			window.addEventListener("pointercancel", onCancel);
+		};
+	}
+	function handleGripKeyDown(id) {
+		return (event) => {
+			if (!event.ctrlKey || event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+			event.preventDefault();
+			commitOrder(moveIdInOrder(order, id, event.key === "ArrowRight" ? 1 : -1));
+		};
+	}
+	const orderIndexById = new Map(order.map((id, index) => [id, index]));
+	const renderedChildren = reorderable ? childArray.map((child, index) => {
+		const id = idFor(child, index);
+		return React.cloneElement(child, {
+			key: id,
+			id,
+			order: orderIndexById.get(id) ?? child.props.order ?? index,
+			className: cn(child.props.className, id === draggingId && "opacity-50", id === dropTargetId && id !== draggingId && "ring-2 ring-focus ring-offset-2"),
+			dragHandleProps: {
+				className: stackBelowVisibleClass[effectiveStackBelow],
+				"aria-label": "Drag to reorder this column. Press Ctrl+Left or Ctrl+Right to reorder via keyboard.",
+				tabIndex: 0,
+				onPointerDown: handleGripPointerDown(id),
+				onKeyDown: handleGripKeyDown(id)
+			}
+		});
+	}) : children;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: gridRef,
+		"data-slot": "multi-column",
+		className: cn(multiColumnVariants({
+			gap,
+			stackBelow
+		}), resizable && "relative", className),
+		style: {
+			"--mc-columns": effectiveColumns.join(" "),
+			...style
+		},
+		...props,
+		children: [renderedChildren, resizable && effectiveColumns.slice(0, -1).map((_, index) => /* @__PURE__ */ jsx("div", {
+			"data-slot": "multi-column-handle",
+			role: "separator",
+			"aria-orientation": "vertical",
+			"aria-label": `Resize columns ${index + 1} and ${index + 2}. Use Arrow Left or Arrow Right to resize via keyboard.`,
+			tabIndex: 0,
+			draggable: false,
+			className: cn("absolute inset-y-0 z-10 w-px -translate-x-1/2 touch-none cursor-col-resize items-center justify-center bg-primary-border after:absolute after:inset-y-0 after:left-1/2 after:w-3 after:-translate-x-1/2 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-focus focus-visible:ring-offset-1", stackBelowVisibleClass[effectiveStackBelow], index === resizingIndex && "w-0.5 bg-focus"),
+			style: { left: `${handleLeftPx[index] ?? 0}px` },
+			onPointerDown: handleResizePointerDown(index),
+			onKeyDown: handleResizeKeyDown(index)
+		}, `multi-column-handle-${index}`))]
+	});
+}
+const alignSelfClass = {
+	start: "self-start",
+	center: "self-center",
+	end: "self-end",
+	stretch: "self-stretch"
+};
+/** A single column slot inside MultiColumn; `order` and `align` apply without reshuffling the DOM. */
+function MultiColumnItem({ className, style, order, align, dragHandleProps, children, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "multi-column-item",
+		className: cn(dragHandleProps && "relative", align && alignSelfClass[align], className),
+		style: order !== void 0 ? {
+			order,
+			...style
+		} : style,
+		...props,
+		children: [children, dragHandleProps && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"data-slot": "multi-column-item-grip",
+			draggable: false,
+			...dragHandleProps,
+			className: cn("absolute top-1 right-1 z-10 size-5 cursor-grab touch-none items-center justify-center rounded-2 border bg-primary-border text-muted-txt focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-focus focus-visible:ring-offset-1 active:cursor-grabbing", dragHandleProps.className),
+			children: /* @__PURE__ */ jsx(Icon, {
+				as: GripVerticalIcon,
+				className: "size-3"
+			})
+		})]
+	});
+}
+//#endregion
+export { MultiColumnItem as n, multiColumnVariants as r, MultiColumn as t };
+
+//# sourceMappingURL=MultiColumn.js.map

package/dist/MultiColumn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiColumn.js","names":[],"sources":["../src/layouts/MultiColumn/MultiColumn.utils.ts","../src/layouts/MultiColumn/MultiColumn.tsx"],"sourcesContent":["// Pure helpers for MultiColumn's resizable/reorderable interactions, kept\n// separate from the component so the math is unit-testable without a real\n// browser — a real browser is still required to prove the DOM/CSS wiring\n// (see MultiColumn.tsx and the Storybook stories), since jsdom doesn't run\n// layout and can't resolve fr/%/minmax() tracks to pixels.\n\n/** A column's original `minmax(min,max)` bounds in px, or null if it wasn't authored as minmax(). */\ntype MinMaxBoundsPx = { min: number; max: number } | null;\n\n/**\n * Parses the browser-resolved `grid-template-columns` value (always\n * space-separated px values in a real browser, regardless of how the tracks\n * were authored) into a plain array of numbers.\n */\nfunction resolvePxTracks(computedGridTemplateColumns: string): number[] {\n  return computedGridTemplateColumns\n    .split(\" \")\n    .map((token) => token.trim())\n    .filter(Boolean)\n    .map((token) => Number.parseFloat(token));\n}\n\n/** Parses an authored `minmax(<min>px,<max>px)` track into numeric px bounds, or null for any other track shape. */\nfunction parseMinMaxPx(track: string): MinMaxBoundsPx {\n  const match = track.match(/^minmax\\(\\s*([\\d.]+)px\\s*,\\s*([\\d.]+)px\\s*\\)$/);\n  if (!match) return null;\n  return { min: Number(match[1]), max: Number(match[2]) };\n}\n\n/**\n * Given the current resolved px widths of two adjacent tracks, shifts the\n * boundary between them by `deltaPx` (left grows, right shrinks, or vice\n * versa) while keeping their combined width constant. Clamps each side to\n * `minSizePx` and, when a side was originally authored as `minmax(min,max)`,\n * to that side's own bounds — so a minmax() column's configured range\n * survives being resized, rather than being silently discarded.\n */\nfunction computeResizedPair(\n  currentPx: readonly [number, number],\n  deltaPx: number,\n  minSizePx: number,\n  bounds: readonly [MinMaxBoundsPx, MinMaxBoundsPx],\n): [number, number] {\n  const total = currentPx[0] + currentPx[1];\n  const leftMin = Math.max(minSizePx, bounds[0]?.min ?? Number.NEGATIVE_INFINITY);\n  const leftMax = Math.min(total - minSizePx, bounds[0]?.max ?? Number.POSITIVE_INFINITY);\n  const rightMin = Math.max(minSizePx, bounds[1]?.min ?? Number.NEGATIVE_INFINITY);\n  const rightMax = Math.min(total - minSizePx, bounds[1]?.max ?? Number.POSITIVE_INFINITY);\n\n  let left = currentPx[0] + deltaPx;\n  left = Math.min(Math.max(left, leftMin), leftMax);\n  let right = total - left;\n  if (right < rightMin) {\n    right = rightMin;\n    left = total - right;\n  } else if (right > rightMax) {\n    right = rightMax;\n    left = total - right;\n  }\n  return [left, right];\n}\n\n/** Moves `id` one step left (-1) or right (+1) in a left-to-right order list; a no-op copy at either boundary or if `id` isn't present. */\nfunction moveIdInOrder(order: readonly string[], id: string, direction: -1 | 1): string[] {\n  const index = order.indexOf(id);\n  if (index === -1) return [...order];\n  const targetIndex = index + direction;\n  if (targetIndex < 0 || targetIndex >= order.length) return [...order];\n  const next = [...order];\n  [next[index], next[targetIndex]] = [next[targetIndex], next[index]];\n  return next;\n}\n\n/** Swaps the positions of `idA` and `idB` in a left-to-right order list; a no-op copy if either id is missing or they're equal. */\nfunction swapIdsInOrder(order: readonly string[], idA: string, idB: string): string[] {\n  if (idA === idB) return [...order];\n  const indexA = order.indexOf(idA);\n  const indexB = order.indexOf(idB);\n  if (indexA === -1 || indexB === -1) return [...order];\n  const next = [...order];\n  [next[indexA], next[indexB]] = [next[indexB], next[indexA]];\n  return next;\n}\n\nexport {\n  resolvePxTracks,\n  parseMinMaxPx,\n  computeResizedPair,\n  moveIdInOrder,\n  swapIdsInOrder,\n  type MinMaxBoundsPx,\n};\n","import { Icon } from \"@/primitives/Icon\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { GripVerticalIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils\";\nimport {\n  type MinMaxBoundsPx,\n  computeResizedPair,\n  moveIdInOrder,\n  parseMinMaxPx,\n  resolvePxTracks,\n  swapIdsInOrder,\n} from \"./MultiColumn.utils\";\n\n// MultiColumn — CSS Grid N-column layout. `columns` is one grid track per\n// column (fixed \"240px\", percent \"20%\", fractional \"1fr\", or \"minmax(200px,1fr)\"),\n// so the array's length sets the column count. Stacks to a single column\n// (flex-col) below `stackBelow`. The per-instance track list can't be a static\n// Tailwind class (it's computed at runtime), so it's set as the `--mc-columns`\n// custom property via inline style and referenced by a static arbitrary-value\n// class (`<bp>:grid-cols-[var(--mc-columns)]`) — the same technique Sidebar\n// already ships (`w-(--sidebar-width)`), so Tailwind's source scanner still\n// sees a literal class string to generate.\nconst multiColumnVariants = cva(\"flex flex-col\", {\n  variants: {\n    gap: {\n      none: \"gap-0\",\n      sm: \"gap-3\",\n      md: \"gap-4\",\n      lg: \"gap-6\",\n      xl: \"gap-8\",\n    },\n    stackBelow: {\n      sm: \"sm:grid sm:grid-cols-[var(--mc-columns)]\",\n      md: \"md:grid md:grid-cols-[var(--mc-columns)]\",\n      lg: \"lg:grid lg:grid-cols-[var(--mc-columns)]\",\n      xl: \"xl:grid xl:grid-cols-[var(--mc-columns)]\",\n    },\n  },\n  defaultVariants: {\n    gap: \"lg\",\n    stackBelow: \"lg\",\n  },\n});\n\n// resizable/reorderable affordances are hidden below `stackBelow` (nothing to\n// horizontally resize or drag once columns are stacked full-width). Listed as\n// literal strings (like the variants above) so Tailwind's scanner sees them\n// regardless of which breakpoint is picked at runtime.\nconst stackBelowVisibleClass = {\n  sm: \"hidden sm:flex\",\n  md: \"hidden md:flex\",\n  lg: \"hidden lg:flex\",\n  xl: \"hidden xl:flex\",\n} as const;\n\ntype MultiColumnBreakpoint = keyof typeof stackBelowVisibleClass;\n\ntype MultiColumnProps = React.ComponentProps<\"div\"> &\n  VariantProps<typeof multiColumnVariants> & {\n    /**\n     * One CSS grid track per column, in any combination — length sets the\n     * column count (3, 4, 5, ...N):\n     * - fixed: `\"240px\"` / `\"16rem\"`\n     * - percent: `\"20%\"`\n     * - fractional (fluid, shares remaining space): `\"1fr\"`, `\"2fr\"`\n     * - minmax (clamp between a min and max): `\"minmax(200px,1fr)\"`\n     */\n    columns: string[];\n    /** Space between columns (and between stacked rows below `stackBelow`). */\n    gap?: VariantProps<typeof multiColumnVariants>[\"gap\"];\n    /** Breakpoint the grid activates at; below it, columns stack vertically. Defaults to `\"lg\"`. */\n    stackBelow?: VariantProps<typeof multiColumnVariants>[\"stackBelow\"];\n    /** Renders a drag handle between adjacent columns that live-resizes them. Default off. */\n    resizable?: boolean;\n    /**\n     * Fires with the updated `columns` array while/after dragging a resize\n     * handle. Pass a `columns` value that changes in response to be fully\n     * controlled; omit to let MultiColumn track size internally.\n     */\n    onColumnsChange?: (columns: string[]) => void;\n    /** Minimum size (in px, e.g. `\"80px\"`) a column can be resized down to. Defaults to `\"80px\"`. */\n    minColumnSize?: string;\n    /**\n     * Renders a drag grip on each MultiColumnItem for drag-and-drop\n     * reordering, plus Ctrl+ArrowLeft/Right keyboard reordering when a grip\n     * is focused. Default off. Give each MultiColumnItem a stable `id` when\n     * using this — without one, MultiColumn falls back to a generated id\n     * (with a console warning) so it degrades safely rather than throwing.\n     */\n    reorderable?: boolean;\n    /** Fires with the new left-to-right order of MultiColumnItem `id`s whenever a drag or keyboard move changes order. */\n    onReorderChange?: (orderedIds: string[]) => void;\n  };\n\nconst MIN_COLUMN_SIZE_PX_DEFAULT = 80;\nconst RESIZE_KEYBOARD_STEP_PX = 16;\n\nfunction parseMinColumnSize(minColumnSize: string | undefined): number {\n  if (!minColumnSize) return MIN_COLUMN_SIZE_PX_DEFAULT;\n  const parsed = Number.parseFloat(minColumnSize);\n  return Number.isFinite(parsed) ? parsed : MIN_COLUMN_SIZE_PX_DEFAULT;\n}\n\n/** Boundary (center-of-gap) px offsets from the grid's left edge, one per gap between adjacent tracks. */\nfunction computeHandlePositionsPx(grid: HTMLElement): number[] {\n  const computed = getComputedStyle(grid);\n  const tracksPx = resolvePxTracks(computed.gridTemplateColumns);\n  const gapPx = Number.parseFloat(computed.columnGap) || 0;\n  const positions: number[] = [];\n  let trackSum = 0;\n  for (let i = 0; i < tracksPx.length - 1; i++) {\n    trackSum += tracksPx[i];\n    positions.push(trackSum + i * gapPx + gapPx / 2);\n  }\n  return positions;\n}\n\n/** CSS Grid N-column layout — pass one track per column via `columns`; stacks below `stackBelow`. */\nfunction MultiColumn({\n  className,\n  style,\n  columns,\n  gap,\n  stackBelow,\n  resizable,\n  onColumnsChange,\n  minColumnSize,\n  reorderable,\n  onReorderChange,\n  children,\n  ...props\n}: MultiColumnProps) {\n  const gridRef = React.useRef<HTMLDivElement>(null);\n  const effectiveStackBelow: MultiColumnBreakpoint = stackBelow ?? \"lg\";\n\n  // ---- Resize state (controlled if the parent re-supplies a changed\n  // `columns` value, uncontrolled otherwise) — adjusted during render rather\n  // than in an effect, per React's documented pattern for deriving state from\n  // a changing prop without an extra render/paint.\n  const columnsKey = columns.join(\" \");\n  const [liveColumns, setLiveColumns] = React.useState(columns);\n  const [syncedColumnsKey, setSyncedColumnsKey] = React.useState(columnsKey);\n  if (columnsKey !== syncedColumnsKey) {\n    setSyncedColumnsKey(columnsKey);\n    setLiveColumns(columns);\n  }\n  const effectiveColumns = resizable ? liveColumns : columns;\n\n  const minColumnSizePx = parseMinColumnSize(minColumnSize);\n\n  function commitColumns(next: string[]) {\n    // Only `liveColumns` changes here — `syncedColumnsKey` must keep tracking\n    // the last-seen `columns` PROP value (not the live value), or the\n    // render-time sync check above would see our own resize as a \"parent\n    // changed `columns`\" event and immediately reset it back.\n    setLiveColumns(next);\n    onColumnsChange?.(next);\n  }\n\n  const dragStateRef = React.useRef<{\n    index: number;\n    startClientX: number;\n    startTracksPx: number[];\n  } | null>(null);\n  // Which handle is actively being dragged, so it can be visibly highlighted\n  // — the live column resizing is the main feedback, but the handle itself\n  // giving no indication of being \"engaged\" reads as unresponsive too.\n  const [resizingIndex, setResizingIndex] = React.useState<number | null>(null);\n\n  function resizeByDelta(index: number, deltaPx: number, startTracksPx: number[]) {\n    // Original minmax() bounds, from the ORIGINAL `columns` prop — remembered\n    // even after a drag freezes a column to an explicit px value, so its\n    // configured range is never silently discarded.\n    const originalBounds: MinMaxBoundsPx[] = columns.map(parseMinMaxPx);\n    const [leftPx, rightPx] = computeResizedPair(\n      [startTracksPx[index], startTracksPx[index + 1]],\n      deltaPx,\n      minColumnSizePx,\n      [originalBounds[index] ?? null, originalBounds[index + 1] ?? null],\n    );\n    const next = [...effectiveColumns];\n    next[index] = `${leftPx}px`;\n    next[index + 1] = `${rightPx}px`;\n    commitColumns(next);\n  }\n\n  function handleResizePointerDown(index: number) {\n    return (event: React.PointerEvent<HTMLDivElement>) => {\n      if (event.button !== 0 && event.pointerType === \"mouse\") return;\n      event.preventDefault();\n      const grid = gridRef.current;\n      if (!grid) return;\n      const startTracksPx = resolvePxTracks(getComputedStyle(grid).gridTemplateColumns);\n      const startClientX = event.clientX;\n      dragStateRef.current = { index, startClientX, startTracksPx };\n      setResizingIndex(index);\n      // A body-level cursor override, since without pointer capture the\n      // cursor would otherwise flicker to whatever's under the pointer as it\n      // slips off the thin 1px handle during the drag.\n      document.body.style.cursor = \"col-resize\";\n\n      const onMove = (moveEvent: PointerEvent) => {\n        const state = dragStateRef.current;\n        if (!state) return;\n        resizeByDelta(state.index, moveEvent.clientX - state.startClientX, state.startTracksPx);\n      };\n      const onEnd = () => {\n        dragStateRef.current = null;\n        document.body.style.cursor = \"\";\n        setResizingIndex(null);\n        window.removeEventListener(\"pointermove\", onMove);\n        window.removeEventListener(\"pointerup\", onEnd);\n        window.removeEventListener(\"pointercancel\", onEnd);\n      };\n      window.addEventListener(\"pointermove\", onMove);\n      window.addEventListener(\"pointerup\", onEnd);\n      // A trackpad/touch gesture the browser reinterprets as scroll/pan fires\n      // `pointercancel` instead of `pointerup` — clean up the drag state\n      // either way, or it would otherwise get stuck mid-drag.\n      window.addEventListener(\"pointercancel\", onEnd);\n    };\n  }\n\n  function handleResizeKeyDown(index: number) {\n    return (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key !== \"ArrowLeft\" && event.key !== \"ArrowRight\") return;\n      event.preventDefault();\n      const grid = gridRef.current;\n      if (!grid) return;\n      const startTracksPx = resolvePxTracks(getComputedStyle(grid).gridTemplateColumns);\n      const step = event.key === \"ArrowRight\" ? RESIZE_KEYBOARD_STEP_PX : -RESIZE_KEYBOARD_STEP_PX;\n      resizeByDelta(index, step, startTracksPx);\n    };\n  }\n\n  // Handle positions are read from the real rendered layout (resolved px,\n  // including fr/%/minmax()) and kept in sync via ResizeObserver — this is a\n  // real-browser-only guarantee; jsdom doesn't run layout, so this path is\n  // verified manually/in Storybook, not by the unit test suite.\n  const [handleLeftPx, setHandleLeftPx] = React.useState<number[]>([]);\n  React.useLayoutEffect(() => {\n    if (!resizable) return;\n    const grid = gridRef.current;\n    if (!grid) return;\n    const recompute = () => setHandleLeftPx(computeHandlePositionsPx(grid));\n    recompute();\n    const observer = new ResizeObserver(recompute);\n    observer.observe(grid);\n    return () => observer.disconnect();\n  }, [resizable, effectiveColumns]);\n\n  // ---- Reorder state ----\n  const childArray = React.Children.toArray(children) as React.ReactElement<MultiColumnItemProps>[];\n\n  function idFor(child: React.ReactElement<MultiColumnItemProps>, index: number): string {\n    if (typeof child.props.id === \"string\" && child.props.id.length > 0) return child.props.id;\n    if (reorderable && process.env.NODE_ENV !== \"production\") {\n      console.warn(\n        \"MultiColumn: a MultiColumnItem is missing an `id` prop while `reorderable` is set. Falling back to a generated id — pass `id` on every MultiColumnItem for stable `onReorderChange` results.\",\n      );\n    }\n    return child.key != null ? String(child.key) : `mc-item-${index}`;\n  }\n\n  const [order, setOrder] = React.useState<string[]>(() =>\n    childArray\n      .map((child, index) => ({\n        id: idFor(child, index),\n        initialOrder: child.props.order ?? index,\n      }))\n      .sort((a, b) => a.initialOrder - b.initialOrder)\n      .map((entry) => entry.id),\n  );\n\n  function commitOrder(next: string[]) {\n    setOrder(next);\n    onReorderChange?.(next);\n  }\n\n  // Live drag feedback: which item is being dragged (dimmed) and which item\n  // it's currently hovering over (outlined as the drop target) — without\n  // this, dragging gives no visual feedback at all until the drop commits.\n  const [draggingId, setDraggingId] = React.useState<string | null>(null);\n  const [dropTargetId, setDropTargetId] = React.useState<string | null>(null);\n\n  function itemIdAtPoint(clientX: number, clientY: number): string | undefined {\n    const el = document.elementFromPoint(clientX, clientY);\n    return el?.closest<HTMLElement>('[data-slot=\"multi-column-item\"]')?.id;\n  }\n\n  function handleGripPointerDown(id: string) {\n    return (event: React.PointerEvent<HTMLButtonElement>) => {\n      event.preventDefault();\n      setDraggingId(id);\n      // A body-level cursor override, since without pointer capture the\n      // cursor would otherwise flicker to whatever's under the pointer as it\n      // moves over other elements during the drag.\n      document.body.style.cursor = \"grabbing\";\n\n      function removeListeners() {\n        window.removeEventListener(\"pointermove\", onMove);\n        window.removeEventListener(\"pointerup\", onUp);\n        window.removeEventListener(\"pointercancel\", onCancel);\n      }\n      function endDrag() {\n        document.body.style.cursor = \"\";\n        setDraggingId(null);\n        setDropTargetId(null);\n      }\n      const onMove = (moveEvent: PointerEvent) => {\n        const targetId = itemIdAtPoint(moveEvent.clientX, moveEvent.clientY);\n        setDropTargetId(targetId && targetId !== id ? targetId : null);\n      };\n      const onUp = (upEvent: PointerEvent) => {\n        removeListeners();\n        const targetId = itemIdAtPoint(upEvent.clientX, upEvent.clientY);\n        if (targetId && targetId !== id) {\n          commitOrder(swapIdsInOrder(order, id, targetId));\n        }\n        endDrag();\n      };\n      // A trackpad/touch gesture the browser reinterprets as scroll/pan fires\n      // `pointercancel` instead of `pointerup` — just clean up, no drop.\n      const onCancel = () => {\n        removeListeners();\n        endDrag();\n      };\n      window.addEventListener(\"pointermove\", onMove);\n      window.addEventListener(\"pointerup\", onUp);\n      window.addEventListener(\"pointercancel\", onCancel);\n    };\n  }\n\n  function handleGripKeyDown(id: string) {\n    return (event: React.KeyboardEvent<HTMLButtonElement>) => {\n      if (!event.ctrlKey || (event.key !== \"ArrowLeft\" && event.key !== \"ArrowRight\")) return;\n      event.preventDefault();\n      commitOrder(moveIdInOrder(order, id, event.key === \"ArrowRight\" ? 1 : -1));\n    };\n  }\n\n  const orderIndexById = new Map(order.map((id, index) => [id, index]));\n\n  const renderedChildren = reorderable\n    ? childArray.map((child, index) => {\n        const id = idFor(child, index);\n        return React.cloneElement(child, {\n          key: id,\n          id,\n          order: orderIndexById.get(id) ?? child.props.order ?? index,\n          // Merge with (not replace) the item's own className, so the\n          // dragged item dims and the current drop target gets a ring —\n          // otherwise a drag gives no visual feedback at all until it drops.\n          // (`ring-*`, not `outline-*`, matching this file's/`Resizable`'s\n          // existing convention for visible highlights — a bare `outline-2`\n          // has no `outline-style`, so it renders nothing on its own.)\n          className: cn(\n            child.props.className,\n            id === draggingId && \"opacity-50\",\n            id === dropTargetId && id !== draggingId && \"ring-2 ring-focus ring-offset-2\",\n          ),\n          dragHandleProps: {\n            className: stackBelowVisibleClass[effectiveStackBelow],\n            \"aria-label\":\n              \"Drag to reorder this column. Press Ctrl+Left or Ctrl+Right to reorder via keyboard.\",\n            tabIndex: 0,\n            onPointerDown: handleGripPointerDown(id),\n            onKeyDown: handleGripKeyDown(id),\n          },\n        });\n      })\n    : children;\n\n  return (\n    <div\n      ref={gridRef}\n      data-slot=\"multi-column\"\n      className={cn(multiColumnVariants({ gap, stackBelow }), resizable && \"relative\", className)}\n      style={{ \"--mc-columns\": effectiveColumns.join(\" \"), ...style } as React.CSSProperties}\n      {...props}\n    >\n      {renderedChildren}\n      {resizable &&\n        effectiveColumns\n          .slice(0, -1)\n          .map((_, index) => (\n            <div\n              key={`multi-column-handle-${index}`}\n              data-slot=\"multi-column-handle\"\n              role=\"separator\"\n              aria-orientation=\"vertical\"\n              aria-label={`Resize columns ${index + 1} and ${index + 2}. Use Arrow Left or Arrow Right to resize via keyboard.`}\n              tabIndex={0}\n              draggable={false}\n              className={cn(\n                \"absolute inset-y-0 z-10 w-px -translate-x-1/2 touch-none cursor-col-resize items-center justify-center bg-primary-border after:absolute after:inset-y-0 after:left-1/2 after:w-3 after:-translate-x-1/2 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-focus focus-visible:ring-offset-1\",\n                stackBelowVisibleClass[effectiveStackBelow],\n                index === resizingIndex && \"w-0.5 bg-focus\",\n              )}\n              style={{ left: `${handleLeftPx[index] ?? 0}px` }}\n              onPointerDown={handleResizePointerDown(index)}\n              onKeyDown={handleResizeKeyDown(index)}\n            />\n          ))}\n    </div>\n  );\n}\n\nconst alignSelfClass = {\n  start: \"self-start\",\n  center: \"self-center\",\n  end: \"self-end\",\n  stretch: \"self-stretch\",\n} as const;\n\ntype MultiColumnItemProps = React.ComponentProps<\"div\"> & {\n  /** Visual position via CSS `order`, independent of DOM/source order. */\n  order?: number;\n  /** Cross-axis alignment for this column only (`align-self`). */\n  align?: keyof typeof alignSelfClass;\n  /**\n   * Injected automatically by the parent MultiColumn when `reorderable` is\n   * set — renders a drag grip inside this item and wires pointer/keyboard\n   * reordering. Not meant to be passed directly.\n   */\n  dragHandleProps?: React.ComponentProps<\"button\">;\n};\n\n/** A single column slot inside MultiColumn; `order` and `align` apply without reshuffling the DOM. */\nfunction MultiColumnItem({\n  className,\n  style,\n  order,\n  align,\n  dragHandleProps,\n  children,\n  ...props\n}: MultiColumnItemProps) {\n  return (\n    <div\n      data-slot=\"multi-column-item\"\n      className={cn(dragHandleProps && \"relative\", align && alignSelfClass[align], className)}\n      style={order !== undefined ? { order, ...style } : style}\n      {...props}\n    >\n      {children}\n      {dragHandleProps && (\n        <button\n          type=\"button\"\n          data-slot=\"multi-column-item-grip\"\n          draggable={false}\n          {...dragHandleProps}\n          className={cn(\n            \"absolute top-1 right-1 z-10 size-5 cursor-grab touch-none items-center justify-center rounded-2 border bg-primary-border text-muted-txt focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-focus focus-visible:ring-offset-1 active:cursor-grabbing\",\n            dragHandleProps.className,\n          )}\n        >\n          <Icon as={GripVerticalIcon} className=\"size-3\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport {\n  MultiColumn,\n  MultiColumnItem,\n  multiColumnVariants,\n  type MultiColumnProps,\n  type MultiColumnItemProps,\n};\n"],"mappings":"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"}

package/dist/Sidebar.cjs

@@ -1,18 +1,19 @@
 const require_chunk = require("./chunk.cjs");
 const require_cn = require("./cn.cjs");
+const require_Icon = require("./Icon.cjs");
 const require_primitives_Button_index = require("./primitives/Button/index.cjs");
 const require_primitives_Separator_index = require("./primitives/Separator/index.cjs");
 const require_primitives_Input_index = require("./primitives/Input/index.cjs");
 const require_primitives_Tooltip_index = require("./primitives/Tooltip/index.cjs");
 const require_primitives_Sheet_index = require("./primitives/Sheet/index.cjs");
 const require_primitives_Skeleton_index = require("./primitives/Skeleton/index.cjs");
+let class_variance_authority = require("class-variance-authority");
 let react = require("react");
 let react$1 = require_chunk.__toESM(react, 1);
 react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");
 let radix_ui = require("radix-ui");
-let react_jsx_runtime = require("react/jsx-runtime");
-let class_variance_authority = require("class-variance-authority");
 //#region src/utils/use-mobile.ts
 const MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
@@ -174,7 +175,7 @@ function SidebarTrigger({ className, onClick, ...props }) {
 			toggleSidebar();
 		},
 		...props,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.PanelLeftIcon, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, { as: lucide_react.PanelLeftIcon }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "sr-only",
 			children: "Toggle Sidebar"
 		})]

package/dist/Sidebar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.cjs","names":["React","React","TooltipProvider","cn","Sheet","SheetContent","SheetHeader","SheetTitle","SheetDescription","Button","PanelLeftIcon","Input","Separator","Slot","Tooltip","TooltipTrigger","TooltipContent","Skeleton"],"sources":["../src/utils/use-mobile.ts","../src/primitives/Sidebar/Sidebar.tsx"],"sourcesContent":["import * as React from \"react\";\n\nconst MOBILE_BREAKPOINT = 768;\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    };\n    mql.addEventListener(\"change\", onChange);\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    return () => mql.removeEventListener(\"change\", onChange);\n  }, []);\n\n  return !!isMobile;\n}\n","\"use client\";\n\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { PanelLeftIcon } from \"lucide-react\";\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { Button } from \"@/primitives/Button\";\nimport { Input } from \"@/primitives/Input\";\nimport { Separator } from \"@/primitives/Separator\";\nimport { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from \"@/primitives/Sheet\";\nimport { Skeleton } from \"@/primitives/Skeleton\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"@/primitives/Tooltip\";\nimport { useIsMobile } from \"@/utils\";\nimport { cn } from \"@/utils\";\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\";\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH = \"16rem\";\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\";\nconst SIDEBAR_WIDTH_ICON = \"3rem\";\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\";\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\";\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  openMobile: boolean;\n  setOpenMobile: (open: boolean) => void;\n  isMobile: boolean;\n  toggleSidebar: () => void;\n};\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null);\n\n/** Hook to read/control sidebar state (open, toggle, mobile); must be used inside `SidebarProvider`. */\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext);\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\");\n  }\n\n  return context;\n}\n\n/** Context provider that owns the sidebar open/collapsed state and the toggle keyboard shortcut. Wrap your layout in this. */\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Initial open state when uncontrolled. */\n  defaultOpen?: boolean;\n  /** Controlled open state; pair with `onOpenChange`. */\n  open?: boolean;\n  /** Called when the open state changes (controlled mode). */\n  onOpenChange?: (open: boolean) => void;\n}) {\n  const isMobile = useIsMobile();\n  const [openMobile, setOpenMobile] = React.useState(false);\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen);\n  const open = openProp ?? _open;\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value;\n      if (setOpenProp) {\n        setOpenProp(openState);\n      } else {\n        _setOpen(openState);\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n    },\n    [setOpenProp, open],\n  );\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);\n  }, [isMobile, setOpen, setOpenMobile]);\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n        event.preventDefault();\n        toggleSidebar();\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, [toggleSidebar]);\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\";\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],\n  );\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <TooltipProvider delayDuration={0}>\n        <div\n          data-slot=\"sidebar-wrapper\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH,\n              \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n              ...style,\n            } as React.CSSProperties\n          }\n          className={cn(\n            \"group/sidebar-wrapper has-data-[variant=inset]:bg-muted-bg flex min-h-svh w-full\",\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </TooltipProvider>\n    </SidebarContext.Provider>\n  );\n}\n\n/** The sidebar panel itself: renders as a fixed desktop rail or a mobile Sheet, driven by `SidebarProvider` state. */\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Which edge the sidebar sits on. */\n  side?: \"left\" | \"right\";\n  /** Visual treatment: standard rail, a floating card, or an inset surface. */\n  variant?: \"sidebar\" | \"floating\" | \"inset\";\n  /** How the sidebar collapses: slide off-canvas, shrink to an icon rail, or never collapse. */\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\";\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-muted-bg text-primary-txt flex h-full w-(--sidebar-width) flex-col\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-muted-bg text-primary-txt w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    );\n  }\n\n  return (\n    <div\n      className=\"group peer text-primary-txt hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\",\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className,\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-muted-bg group-data-[variant=floating]:border-primary-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-8 group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n\n/** Icon button that toggles the sidebar open/collapsed. */\nfunction SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon\"\n      className={cn(\"size-7\", className)}\n      onClick={(event) => {\n        onClick?.(event);\n        toggleSidebar();\n      }}\n      {...props}\n    >\n      <PanelLeftIcon />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  );\n}\n\n/** Thin draggable rail along the sidebar edge that toggles it on click. */\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-primary-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-1 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 sm:flex\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offcanvas]:bg-muted-bg group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The main content region that sits beside the sidebar. */\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-primary-bg relative flex w-full flex-1 flex-col\",\n        \"md:peer-data-[variant=inset]:m-0.5 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-12 md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-0.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Sidebar-styled text input, e.g. for a search field in the header. */\nfunction SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-primary-bg h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Top region of the sidebar, typically a brand mark or workspace switcher. */\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Bottom region of the sidebar, typically a user menu or settings link. */\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Horizontal divider between sidebar sections, inset to match the sidebar padding. */\nfunction SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-primary-border mx-0.5 w-auto\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Scrollable middle region of the sidebar that holds the groups and menus. */\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A labelled section within the sidebar content. */\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\"relative flex w-full min-w-0 flex-col p-2\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Heading for a `SidebarGroup`; hidden when the sidebar is collapsed to icons. */\nfunction SidebarGroupLabel({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Render as the child element (Radix Slot) instead of a `div`. */\n  asChild?: boolean;\n}) {\n  const Comp = asChild ? Slot.Root : \"div\";\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"text-primary-txt/70 ring-focus flex h-8 shrink-0 items-center rounded-6 px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-1 [&>svg]:shrink-0\",\n        \"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Small action button anchored to the top-right of a `SidebarGroup` (e.g. an add button). */\nfunction SidebarGroupAction({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  /** Render as the child element (Radix Slot) instead of a `button`. */\n  asChild?: boolean;\n}) {\n  const Comp = asChild ? Slot.Root : \"button\";\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        \"text-primary-txt ring-focus hover:bg-secondary-bg hover:text-primary-txt absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-6 p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-1 [&>svg]:shrink-0\",\n        // Increases the hit area of the button on mobile.\n        \"after:absolute after:-inset-2 md:after:hidden\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Wrapper for the body of a `SidebarGroup`, below its label. */\nfunction SidebarGroupContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"w-full text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\n/** `ul` list container for sidebar menu items. */\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"flex w-full min-w-0 flex-col gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\n/** `li` row within a `SidebarMenu`; holds a button plus optional action/badge. */\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Style variants for `SidebarMenuButton` — `variant` (default | outline) and `size` (default | sm | lg). */\nconst sidebarMenuButtonVariants = cva(\n  \"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-6 p-2 text-left text-sm outline-hidden ring-focus transition-[width,height,padding] hover:bg-secondary-bg/50 hover:text-primary-txt focus-visible:ring-2 active:bg-secondary-bg active:text-primary-txt disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-2 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-secondary-bg data-[active=true]:font-medium data-[active=true]:text-primary-txt data-[state=open]:hover:bg-secondary-bg/50 data-[state=open]:hover:text-primary-txt group-data-[collapsible=icon]:size-2! group-data-[collapsible=icon]:p-0.5! [&>span:last-child]:truncate [&>svg]:size-1 [&>svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-secondary-bg/50 hover:text-primary-txt\",\n        outline:\n          \"bg-primary-bg shadow-[0_0_0_1px_var(--primary-border)] hover:bg-secondary-bg/50 hover:text-primary-txt hover:shadow-[0_0_0_1px_var(--secondary-bg)]\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\n/** The primary clickable item in a sidebar menu; shows a tooltip when collapsed to icons. */\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  /** Render as the child element (Radix Slot), e.g. to wrap a link. */\n  asChild?: boolean;\n  /** Marks the item as the current/active route. */\n  isActive?: boolean;\n  /** Tooltip shown when the sidebar is collapsed to icons; string or `TooltipContent` props. */\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>;\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot.Root : \"button\";\n  const { isMobile, state } = useSidebar();\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  );\n\n  if (!tooltip) {\n    return button;\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    };\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  );\n}\n\n/** Secondary action button anchored to the right of a menu item (e.g. a kebab menu). */\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  /** Render as the child element (Radix Slot) instead of a `button`. */\n  asChild?: boolean;\n  /** Only reveal the action on row hover/focus instead of always showing it. */\n  showOnHover?: boolean;\n}) {\n  const Comp = asChild ? Slot.Root : \"button\";\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"text-primary-txt ring-focus hover:bg-secondary-bg hover:text-primary-txt peer-hover/menu-button:text-primary-txt absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-6 p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-1 [&>svg]:shrink-0\",\n        // Increases the hit area of the button on mobile.\n        \"after:absolute after:-inset-2 md:after:hidden\",\n        \"peer-data-[size=sm]/menu-button:top-1\",\n        \"peer-data-[size=default]/menu-button:top-1.5\",\n        \"peer-data-[size=lg]/menu-button:top-2.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        showOnHover &&\n          \"peer-data-[active=true]/menu-button:text-primary-txt group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Count/status badge anchored to the right of a menu item. */\nfunction SidebarMenuBadge({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-primary-txt pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-6 px-1 text-xs font-medium tabular-nums select-none\",\n        \"peer-hover/menu-button:text-primary-txt peer-data-[active=true]/menu-button:text-primary-txt\",\n        \"peer-data-[size=sm]/menu-button:top-1\",\n        \"peer-data-[size=default]/menu-button:top-1.5\",\n        \"peer-data-[size=lg]/menu-button:top-2.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Loading placeholder for a menu item, with a random text width for a natural skeleton. */\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Also render a square icon placeholder before the text. */\n  showIcon?: boolean;\n}) {\n  // Random width between 50 to 90%.\n  const width = React.useMemo(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`;\n  }, []);\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"flex h-8 items-center gap-2 rounded-6 px-2\", className)}\n      {...props}\n    >\n      {showIcon && <Skeleton className=\"size-4 rounded-6\" data-sidebar=\"menu-skeleton-icon\" />}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  );\n}\n\n/** Nested `ul` list of sub-items under a menu item; hidden when collapsed to icons. */\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        \"border-primary-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** `li` row within a `SidebarMenuSub`. */\nfunction SidebarMenuSubItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Clickable link for a sub-menu item (renders as an `a` by default). */\nfunction SidebarMenuSubButton({\n  asChild = false,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  /** Render as the child element (Radix Slot) instead of an `a`. */\n  asChild?: boolean;\n  /** Text size of the sub-button. */\n  size?: \"sm\" | \"md\";\n  /** Marks the sub-item as the current/active route. */\n  isActive?: boolean;\n}) {\n  const Comp = asChild ? Slot.Root : \"a\";\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-sub-button\"\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        \"text-primary-txt ring-focus hover:bg-secondary-bg/50 hover:text-primary-txt active:bg-secondary-bg active:text-primary-txt [&>svg]:text-primary-txt flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-6 px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-1 [&>svg]:shrink-0\",\n        \"data-[active=true]:bg-secondary-bg data-[active=true]:font-medium data-[active=true]:text-primary-txt\",\n        size === \"sm\" && \"text-xs\",\n        size === \"md\" && \"text-sm\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n};\n"],"mappings":"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"}
+{"version":3,"file":"Sidebar.cjs","names":["React","React","TooltipProvider","cn","Sheet","SheetContent","SheetHeader","SheetTitle","SheetDescription","Button","Icon","PanelLeftIcon","Input","Separator","Slot","Tooltip","TooltipTrigger","TooltipContent","Skeleton"],"sources":["../src/utils/use-mobile.ts","../src/primitives/Sidebar/Sidebar.tsx"],"sourcesContent":["import * as React from \"react\";\n\nconst MOBILE_BREAKPOINT = 768;\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    };\n    mql.addEventListener(\"change\", onChange);\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    return () => mql.removeEventListener(\"change\", onChange);\n  }, []);\n\n  return !!isMobile;\n}\n","\"use client\";\n\nimport { Icon } from \"@/primitives/Icon\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { PanelLeftIcon } from \"lucide-react\";\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { Button } from \"@/primitives/Button\";\nimport { Input } from \"@/primitives/Input\";\nimport { Separator } from \"@/primitives/Separator\";\nimport { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from \"@/primitives/Sheet\";\nimport { Skeleton } from \"@/primitives/Skeleton\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"@/primitives/Tooltip\";\nimport { useIsMobile } from \"@/utils\";\nimport { cn } from \"@/utils\";\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\";\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH = \"16rem\";\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\";\nconst SIDEBAR_WIDTH_ICON = \"3rem\";\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\";\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\";\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  openMobile: boolean;\n  setOpenMobile: (open: boolean) => void;\n  isMobile: boolean;\n  toggleSidebar: () => void;\n};\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null);\n\n/** Hook to read/control sidebar state (open, toggle, mobile); must be used inside `SidebarProvider`. */\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext);\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\");\n  }\n\n  return context;\n}\n\n/** Context provider that owns the sidebar open/collapsed state and the toggle keyboard shortcut. Wrap your layout in this. */\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Initial open state when uncontrolled. */\n  defaultOpen?: boolean;\n  /** Controlled open state; pair with `onOpenChange`. */\n  open?: boolean;\n  /** Called when the open state changes (controlled mode). */\n  onOpenChange?: (open: boolean) => void;\n}) {\n  const isMobile = useIsMobile();\n  const [openMobile, setOpenMobile] = React.useState(false);\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen);\n  const open = openProp ?? _open;\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value;\n      if (setOpenProp) {\n        setOpenProp(openState);\n      } else {\n        _setOpen(openState);\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n    },\n    [setOpenProp, open],\n  );\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);\n  }, [isMobile, setOpen, setOpenMobile]);\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n        event.preventDefault();\n        toggleSidebar();\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, [toggleSidebar]);\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\";\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],\n  );\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <TooltipProvider delayDuration={0}>\n        <div\n          data-slot=\"sidebar-wrapper\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH,\n              \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n              ...style,\n            } as React.CSSProperties\n          }\n          className={cn(\n            \"group/sidebar-wrapper has-data-[variant=inset]:bg-muted-bg flex min-h-svh w-full\",\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </TooltipProvider>\n    </SidebarContext.Provider>\n  );\n}\n\n/** The sidebar panel itself: renders as a fixed desktop rail or a mobile Sheet, driven by `SidebarProvider` state. */\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Which edge the sidebar sits on. */\n  side?: \"left\" | \"right\";\n  /** Visual treatment: standard rail, a floating card, or an inset surface. */\n  variant?: \"sidebar\" | \"floating\" | \"inset\";\n  /** How the sidebar collapses: slide off-canvas, shrink to an icon rail, or never collapse. */\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\";\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-muted-bg text-primary-txt flex h-full w-(--sidebar-width) flex-col\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-muted-bg text-primary-txt w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    );\n  }\n\n  return (\n    <div\n      className=\"group peer text-primary-txt hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\",\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className,\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-muted-bg group-data-[variant=floating]:border-primary-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-8 group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n\n/** Icon button that toggles the sidebar open/collapsed. */\nfunction SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon\"\n      className={cn(\"size-7\", className)}\n      onClick={(event) => {\n        onClick?.(event);\n        toggleSidebar();\n      }}\n      {...props}\n    >\n      <Icon as={PanelLeftIcon} />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  );\n}\n\n/** Thin draggable rail along the sidebar edge that toggles it on click. */\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-primary-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-1 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 sm:flex\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offcanvas]:bg-muted-bg group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The main content region that sits beside the sidebar. */\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-primary-bg relative flex w-full flex-1 flex-col\",\n        \"md:peer-data-[variant=inset]:m-0.5 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-12 md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-0.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Sidebar-styled text input, e.g. for a search field in the header. */\nfunction SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-primary-bg h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Top region of the sidebar, typically a brand mark or workspace switcher. */\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Bottom region of the sidebar, typically a user menu or settings link. */\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Horizontal divider between sidebar sections, inset to match the sidebar padding. */\nfunction SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-primary-border mx-0.5 w-auto\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Scrollable middle region of the sidebar that holds the groups and menus. */\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A labelled section within the sidebar content. */\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\"relative flex w-full min-w-0 flex-col p-2\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Heading for a `SidebarGroup`; hidden when the sidebar is collapsed to icons. */\nfunction SidebarGroupLabel({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Render as the child element (Radix Slot) instead of a `div`. */\n  asChild?: boolean;\n}) {\n  const Comp = asChild ? Slot.Root : \"div\";\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"text-primary-txt/70 ring-focus flex h-8 shrink-0 items-center rounded-6 px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-1 [&>svg]:shrink-0\",\n        \"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Small action button anchored to the top-right of a `SidebarGroup` (e.g. an add button). */\nfunction SidebarGroupAction({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  /** Render as the child element (Radix Slot) instead of a `button`. */\n  asChild?: boolean;\n}) {\n  const Comp = asChild ? Slot.Root : \"button\";\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        \"text-primary-txt ring-focus hover:bg-secondary-bg hover:text-primary-txt absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-6 p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-1 [&>svg]:shrink-0\",\n        // Increases the hit area of the button on mobile.\n        \"after:absolute after:-inset-2 md:after:hidden\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Wrapper for the body of a `SidebarGroup`, below its label. */\nfunction SidebarGroupContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"w-full text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\n/** `ul` list container for sidebar menu items. */\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"flex w-full min-w-0 flex-col gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\n/** `li` row within a `SidebarMenu`; holds a button plus optional action/badge. */\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Style variants for `SidebarMenuButton` — `variant` (default | outline) and `size` (default | sm | lg). */\nconst sidebarMenuButtonVariants = cva(\n  \"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-6 p-2 text-left text-sm outline-hidden ring-focus transition-[width,height,padding] hover:bg-secondary-bg/50 hover:text-primary-txt focus-visible:ring-2 active:bg-secondary-bg active:text-primary-txt disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-2 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-secondary-bg data-[active=true]:font-medium data-[active=true]:text-primary-txt data-[state=open]:hover:bg-secondary-bg/50 data-[state=open]:hover:text-primary-txt group-data-[collapsible=icon]:size-2! group-data-[collapsible=icon]:p-0.5! [&>span:last-child]:truncate [&>svg]:size-1 [&>svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-secondary-bg/50 hover:text-primary-txt\",\n        outline:\n          \"bg-primary-bg shadow-[0_0_0_1px_var(--primary-border)] hover:bg-secondary-bg/50 hover:text-primary-txt hover:shadow-[0_0_0_1px_var(--secondary-bg)]\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\n/** The primary clickable item in a sidebar menu; shows a tooltip when collapsed to icons. */\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  /** Render as the child element (Radix Slot), e.g. to wrap a link. */\n  asChild?: boolean;\n  /** Marks the item as the current/active route. */\n  isActive?: boolean;\n  /** Tooltip shown when the sidebar is collapsed to icons; string or `TooltipContent` props. */\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>;\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot.Root : \"button\";\n  const { isMobile, state } = useSidebar();\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  );\n\n  if (!tooltip) {\n    return button;\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    };\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  );\n}\n\n/** Secondary action button anchored to the right of a menu item (e.g. a kebab menu). */\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  /** Render as the child element (Radix Slot) instead of a `button`. */\n  asChild?: boolean;\n  /** Only reveal the action on row hover/focus instead of always showing it. */\n  showOnHover?: boolean;\n}) {\n  const Comp = asChild ? Slot.Root : \"button\";\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"text-primary-txt ring-focus hover:bg-secondary-bg hover:text-primary-txt peer-hover/menu-button:text-primary-txt absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-6 p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-1 [&>svg]:shrink-0\",\n        // Increases the hit area of the button on mobile.\n        \"after:absolute after:-inset-2 md:after:hidden\",\n        \"peer-data-[size=sm]/menu-button:top-1\",\n        \"peer-data-[size=default]/menu-button:top-1.5\",\n        \"peer-data-[size=lg]/menu-button:top-2.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        showOnHover &&\n          \"peer-data-[active=true]/menu-button:text-primary-txt group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Count/status badge anchored to the right of a menu item. */\nfunction SidebarMenuBadge({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-primary-txt pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-6 px-1 text-xs font-medium tabular-nums select-none\",\n        \"peer-hover/menu-button:text-primary-txt peer-data-[active=true]/menu-button:text-primary-txt\",\n        \"peer-data-[size=sm]/menu-button:top-1\",\n        \"peer-data-[size=default]/menu-button:top-1.5\",\n        \"peer-data-[size=lg]/menu-button:top-2.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Loading placeholder for a menu item, with a random text width for a natural skeleton. */\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Also render a square icon placeholder before the text. */\n  showIcon?: boolean;\n}) {\n  // Random width between 50 to 90%.\n  const width = React.useMemo(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`;\n  }, []);\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"flex h-8 items-center gap-2 rounded-6 px-2\", className)}\n      {...props}\n    >\n      {showIcon && <Skeleton className=\"size-4 rounded-6\" data-sidebar=\"menu-skeleton-icon\" />}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  );\n}\n\n/** Nested `ul` list of sub-items under a menu item; hidden when collapsed to icons. */\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        \"border-primary-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** `li` row within a `SidebarMenuSub`. */\nfunction SidebarMenuSubItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Clickable link for a sub-menu item (renders as an `a` by default). */\nfunction SidebarMenuSubButton({\n  asChild = false,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  /** Render as the child element (Radix Slot) instead of an `a`. */\n  asChild?: boolean;\n  /** Text size of the sub-button. */\n  size?: \"sm\" | \"md\";\n  /** Marks the sub-item as the current/active route. */\n  isActive?: boolean;\n}) {\n  const Comp = asChild ? Slot.Root : \"a\";\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-sub-button\"\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        \"text-primary-txt ring-focus hover:bg-secondary-bg/50 hover:text-primary-txt active:bg-secondary-bg active:text-primary-txt [&>svg]:text-primary-txt flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-6 px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-1 [&>svg]:shrink-0\",\n        \"data-[active=true]:bg-secondary-bg data-[active=true]:font-medium data-[active=true]:text-primary-txt\",\n        size === \"sm\" && \"text-xs\",\n        size === \"md\" && \"text-sm\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n};\n"],"mappings":"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"}