@psnext/design-system 2.4.0 → 2.6.0

package/dist/primitives/NotchedCard/index.js

@@ -0,0 +1,385 @@
+import { t as cn } from "../../cn.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/NotchedCard/NotchedCard.tsx
+const CORNER_KEYS = [
+	"tl",
+	"tr",
+	"br",
+	"bl"
+];
+const useIsoLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+const round2 = (v) => Math.round(v * 100) / 100;
+/**
+* Builds the notched outline as an SVG path, walking clockwise from the top
+* edge. Convex turns sweep outward (sweep=1); the inner corner of each notch
+* is a concave fillet (sweep=0). Exported for testing — not part of the
+* typical component API.
+*/
+function buildNotchedCardPath({ w, h, radius, notchRadius, notches }) {
+	if (w <= 0 || h <= 0) return "";
+	const R = Math.max(0, Math.min(radius, w / 2, h / 2));
+	const arc = (rr, x, y, sweep) => `A ${round2(rr)} ${round2(rr)} 0 0 ${sweep} ${round2(x)} ${round2(y)}`;
+	const line = (x, y) => `L ${round2(x)} ${round2(y)}`;
+	const pt = ([x, y]) => `${round2(x)} ${round2(y)}`;
+	const prep = (c) => {
+		if (!c || c.w <= 0 || c.h <= 0) return null;
+		const nw = Math.min(c.w, w - 2 * R);
+		const nh = Math.min(c.h, h - 2 * R);
+		if (nw <= R || nh <= R) return null;
+		return {
+			nw,
+			nh,
+			r: Math.max(0, Math.min(notchRadius, nw - R, nh - R))
+		};
+	};
+	const tl = prep(notches.tl);
+	const tr = prep(notches.tr);
+	const br = prep(notches.br);
+	const bl = prep(notches.bl);
+	const corner = {
+		tl: tl ? {
+			entry: [0, tl.nh + R],
+			exit: [tl.nw + R, 0],
+			cmds: [
+				arc(R, R, tl.nh, 1),
+				line(tl.nw - tl.r, tl.nh),
+				arc(tl.r, tl.nw, tl.nh - tl.r, 0),
+				line(tl.nw, R),
+				arc(R, tl.nw + R, 0, 1)
+			]
+		} : {
+			entry: [0, R],
+			exit: [R, 0],
+			cmds: [arc(R, R, 0, 1)]
+		},
+		tr: tr ? {
+			entry: [w - tr.nw - R, 0],
+			exit: [w, tr.nh + R],
+			cmds: [
+				arc(R, w - tr.nw, R, 1),
+				line(w - tr.nw, tr.nh - tr.r),
+				arc(tr.r, w - tr.nw + tr.r, tr.nh, 0),
+				line(w - R, tr.nh),
+				arc(R, w, tr.nh + R, 1)
+			]
+		} : {
+			entry: [w - R, 0],
+			exit: [w, R],
+			cmds: [arc(R, w, R, 1)]
+		},
+		br: br ? {
+			entry: [w, h - br.nh - R],
+			exit: [w - br.nw - R, h],
+			cmds: [
+				arc(R, w - R, h - br.nh, 1),
+				line(w - br.nw + br.r, h - br.nh),
+				arc(br.r, w - br.nw, h - br.nh + br.r, 0),
+				line(w - br.nw, h - R),
+				arc(R, w - br.nw - R, h, 1)
+			]
+		} : {
+			entry: [w, h - R],
+			exit: [w - R, h],
+			cmds: [arc(R, w - R, h, 1)]
+		},
+		bl: bl ? {
+			entry: [bl.nw + R, h],
+			exit: [0, h - bl.nh - R],
+			cmds: [
+				arc(R, bl.nw, h - R, 1),
+				line(bl.nw, h - bl.nh + bl.r),
+				arc(bl.r, bl.nw - bl.r, h - bl.nh, 0),
+				line(R, h - bl.nh),
+				arc(R, 0, h - bl.nh - R, 1)
+			]
+		} : {
+			entry: [R, h],
+			exit: [0, h - R],
+			cmds: [arc(R, 0, h - R, 1)]
+		}
+	};
+	return [
+		`M ${pt(corner.tl.exit)}`,
+		line(...corner.tr.entry),
+		...corner.tr.cmds,
+		line(...corner.br.entry),
+		...corner.br.cmds,
+		line(...corner.bl.entry),
+		...corner.bl.cmds,
+		line(...corner.tl.entry),
+		...corner.tl.cmds,
+		"Z"
+	].join(" ");
+}
+const sameBox = (a, b) => a === b || !!a && !!b && a.w === b.w && a.h === b.h;
+/**
+* Style for an invisible float that reserves a side's notched corners inside
+* the content flow, so flowing content wraps around the cutouts instead of
+* running under them. `shape-inside` never shipped in any browser; a float
+* with `shape-outside` is the standard equivalent. A top-only corner is just
+* the float's own box; a bottom corner needs the float to span the content
+* height with a polygon covering only the corner bands (joined by a zero-width
+* "keyhole" along the box edge, which keeps the polygon simple and valid).
+*/
+function sideSpacerStyle(side, rects, innerH) {
+	const top = rects.top && rects.top.w > 0 && rects.top.h > 0 ? rects.top : null;
+	const bottom = rects.bottom && rects.bottom.w > 0 && rects.bottom.h > 0 ? rects.bottom : null;
+	if (!top && !bottom) return null;
+	const base = {
+		float: side,
+		pointerEvents: "none"
+	};
+	if (!bottom) return {
+		...base,
+		width: top.w,
+		height: top.h
+	};
+	const px = (v) => `${round2(v)}px`;
+	const bandTop = `calc(100% - ${px(bottom.h)})`;
+	const shape = side === "left" ? top ? `polygon(0 0, ${px(top.w)} 0, ${px(top.w)} ${px(top.h)}, 0 ${px(top.h)}, 0 ${bandTop}, ${px(bottom.w)} ${bandTop}, ${px(bottom.w)} 100%, 0 100%)` : `polygon(0 ${bandTop}, ${px(bottom.w)} ${bandTop}, ${px(bottom.w)} 100%, 0 100%)` : top ? `polygon(100% 0, calc(100% - ${px(top.w)}) 0, calc(100% - ${px(top.w)}) ${px(top.h)}, 100% ${px(top.h)}, 100% ${bandTop}, calc(100% - ${px(bottom.w)}) ${bandTop}, calc(100% - ${px(bottom.w)}) 100%, 100% 100%)` : `polygon(100% ${bandTop}, calc(100% - ${px(bottom.w)}) ${bandTop}, calc(100% - ${px(bottom.w)}) 100%, 100% 100%)`;
+	return {
+		...base,
+		width: Math.max(top?.w ?? 0, bottom.w),
+		height: Math.max(innerH, (top?.h ?? 0) + bottom.h),
+		shapeOutside: shape
+	};
+}
+const notchedCardVariants = {
+	default: {
+		background: "bg-glass-none-bg",
+		shadow: "drop-shadow-sm",
+		text: "text-primary-txt",
+		borderedByDefault: true
+	},
+	muted: {
+		background: "bg-muted-bg",
+		shadow: "",
+		text: "text-primary-txt",
+		borderedByDefault: true
+	},
+	glass: {
+		background: "bg-glass-40-bg backdrop-blur-glass",
+		shadow: "",
+		text: "text-primary-txt",
+		borderedByDefault: false
+	},
+	brand: {
+		background: "bg-[image:linear-gradient(to_right,var(--theme-brand-700),var(--theme-brand-500-primary))]",
+		shadow: "",
+		text: "text-white",
+		borderedByDefault: false
+	},
+	inverted: {
+		background: "bg-primary-invert-bg",
+		shadow: "",
+		text: "text-primary-invert-txt",
+		borderedByDefault: false
+	}
+};
+/** Card with corner slots that notch the background around their content. */
+function NotchedCard({ children, topLeftComponent, topRightComponent, bottomLeftComponent, bottomRightComponent, variant = "default", backgroundImage, backgroundImageOpacity = .8, radius = 16, notchRadius = 12, notchGap = 12, padding = 24, avoidNotches = true, bordered, className, backgroundClassName, contentClassName, style, ...props }) {
+	const rootRef = React.useRef(null);
+	const cornerRefs = {
+		tl: React.useRef(null),
+		tr: React.useRef(null),
+		br: React.useRef(null),
+		bl: React.useRef(null)
+	};
+	const contentRef = React.useRef(null);
+	const [box, setBox] = React.useState({
+		w: 0,
+		h: 0
+	});
+	const [contentH, setContentH] = React.useState(0);
+	const [sizes, setSizes] = React.useState({
+		tl: null,
+		tr: null,
+		br: null,
+		bl: null
+	});
+	const cornerSlots = [
+		[
+			"tl",
+			topLeftComponent,
+			{
+				top: 0,
+				left: 0
+			}
+		],
+		[
+			"tr",
+			topRightComponent,
+			{
+				top: 0,
+				right: 0
+			}
+		],
+		[
+			"br",
+			bottomRightComponent,
+			{
+				bottom: 0,
+				right: 0
+			}
+		],
+		[
+			"bl",
+			bottomLeftComponent,
+			{
+				bottom: 0,
+				left: 0
+			}
+		]
+	];
+	const hasCorners = cornerSlots.some(([, node]) => node != null && node !== false);
+	const measure = React.useCallback(() => {
+		const root = rootRef.current;
+		if (!root) return;
+		setBox((prev) => {
+			const next = {
+				w: root.offsetWidth,
+				h: root.offsetHeight
+			};
+			return sameBox(prev, next) ? prev : next;
+		});
+		setContentH((prev) => {
+			const next = contentRef.current?.offsetHeight ?? 0;
+			return prev === next ? prev : next;
+		});
+		setSizes((prev) => {
+			const next = {};
+			let changed = false;
+			for (const k of CORNER_KEYS) {
+				const el = cornerRefs[k].current;
+				next[k] = el ? {
+					w: el.offsetWidth,
+					h: el.offsetHeight
+				} : null;
+				if (!sameBox(prev[k], next[k])) changed = true;
+			}
+			return changed ? next : prev;
+		});
+	}, []);
+	useIsoLayoutEffect(() => {
+		if (!hasCorners) return;
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const ro = new ResizeObserver(measure);
+		if (rootRef.current) ro.observe(rootRef.current);
+		if (contentRef.current) ro.observe(contentRef.current);
+		for (const k of CORNER_KEYS) {
+			const el = cornerRefs[k].current;
+			if (el) ro.observe(el);
+		}
+		return () => ro.disconnect();
+	}, [
+		measure,
+		hasCorners,
+		topLeftComponent,
+		topRightComponent,
+		bottomRightComponent,
+		bottomLeftComponent
+	]);
+	const notches = Object.fromEntries(CORNER_KEYS.map((k) => [k, sizes[k] ? {
+		w: sizes[k].w + notchGap,
+		h: sizes[k].h + notchGap
+	} : null]));
+	const path = hasCorners ? buildNotchedCardPath({
+		w: box.w,
+		h: box.h,
+		radius,
+		notchRadius,
+		notches
+	}) : "";
+	const styles = notchedCardVariants[variant];
+	const showBorder = bordered ?? styles.borderedByDefault;
+	const inset = (v) => Math.max(0, (v ?? 0) - padding + notchGap);
+	const toRect = (notch) => notch ? {
+		w: inset(notch.w),
+		h: inset(notch.h)
+	} : null;
+	const spacerSides = [["left", {
+		top: toRect(notches.tl),
+		bottom: toRect(notches.bl)
+	}], ["right", {
+		top: toRect(notches.tr),
+		bottom: toRect(notches.br)
+	}]];
+	const innerH = Math.max(0, contentH - 2 * padding);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: rootRef,
+		"data-slot": "notched-card",
+		"data-variant": variant,
+		className: cn("group relative isolate", styles.text, className),
+		style,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				className: cn("absolute inset-0 -z-10", styles.shadow),
+				children: /* @__PURE__ */ jsx("div", {
+					"data-slot": "notched-card-background",
+					className: cn("absolute inset-0 overflow-hidden", styles.background, backgroundClassName),
+					style: path ? {
+						clipPath: `path("${path}")`,
+						WebkitClipPath: `path("${path}")`
+					} : { borderRadius: radius },
+					children: backgroundImage && /* @__PURE__ */ jsx("img", {
+						src: backgroundImage,
+						alt: "",
+						className: "absolute inset-0 size-full object-cover",
+						style: { opacity: backgroundImageOpacity }
+					})
+				})
+			}),
+			showBorder && (path ? /* @__PURE__ */ jsx("svg", {
+				"aria-hidden": true,
+				"data-slot": "notched-card-border",
+				viewBox: `0 0 ${box.w} ${box.h}`,
+				width: box.w,
+				height: box.h,
+				className: "pointer-events-none absolute inset-0",
+				focusable: "false",
+				children: /* @__PURE__ */ jsx("path", {
+					d: path,
+					fill: "none",
+					strokeWidth: 1,
+					className: "stroke-primary-border"
+				})
+			}) : /* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				"data-slot": "notched-card-border",
+				className: "pointer-events-none absolute inset-0 border border-primary-border",
+				style: { borderRadius: radius }
+			})),
+			/* @__PURE__ */ jsxs("div", {
+				ref: contentRef,
+				"data-slot": "notched-card-content",
+				className: cn("relative", contentClassName),
+				style: { padding },
+				children: [avoidNotches && spacerSides.map(([side, rects]) => {
+					const spacerStyle = sideSpacerStyle(side, rects, innerH);
+					return spacerStyle ? /* @__PURE__ */ jsx("div", {
+						"aria-hidden": true,
+						"data-slot": "notched-card-spacer",
+						"data-side": side,
+						style: spacerStyle
+					}, side) : null;
+				}), children]
+			}),
+			cornerSlots.map(([key, node, pos]) => node != null && node !== false ? /* @__PURE__ */ jsx("div", {
+				ref: cornerRefs[key],
+				"data-slot": "notched-card-corner",
+				"data-corner": key,
+				className: "absolute flex w-max items-center",
+				style: pos,
+				children: node
+			}, key) : null)
+		]
+	});
+}
+//#endregion
+export { NotchedCard, buildNotchedCardPath, notchedCardVariants };
+
+//# sourceMappingURL=index.js.map

package/dist/primitives/NotchedCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/NotchedCard/NotchedCard.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/* NotchedCard — a card whose background is a clipped shape. Any corner that\n   receives content gets a rectangular bite taken out of the background, sized\n   to that content, with a concave fillet at the inner corner. With no corner\n   content it renders as a plain rounded rectangle (no measuring, no clip). */\n\nconst CORNER_KEYS = [\"tl\", \"tr\", \"br\", \"bl\"] as const;\ntype CornerKey = (typeof CORNER_KEYS)[number];\n\ntype CornerBox = { w: number; h: number };\ntype CornerSizes = Record<CornerKey, CornerBox | null>;\n\n// useLayoutEffect on the client, useEffect during SSR (avoids the React warning).\nconst useIsoLayoutEffect = typeof window !== \"undefined\" ? React.useLayoutEffect : React.useEffect;\n\nconst round2 = (v: number) => Math.round(v * 100) / 100;\n\n/**\n * Builds the notched outline as an SVG path, walking clockwise from the top\n * edge. Convex turns sweep outward (sweep=1); the inner corner of each notch\n * is a concave fillet (sweep=0). Exported for testing — not part of the\n * typical component API.\n */\nfunction buildNotchedCardPath({\n  w,\n  h,\n  radius,\n  notchRadius,\n  notches,\n}: {\n  w: number;\n  h: number;\n  radius: number;\n  notchRadius: number;\n  notches: CornerSizes;\n}): string {\n  if (w <= 0 || h <= 0) return \"\";\n\n  const R = Math.max(0, Math.min(radius, w / 2, h / 2));\n  const arc = (rr: number, x: number, y: number, sweep: 0 | 1) =>\n    `A ${round2(rr)} ${round2(rr)} 0 0 ${sweep} ${round2(x)} ${round2(y)}`;\n  const line = (x: number, y: number) => `L ${round2(x)} ${round2(y)}`;\n  const pt = ([x, y]: readonly [number, number]) => `${round2(x)} ${round2(y)}`;\n\n  // A notch only survives if there is room for it between the outer radii.\n  const prep = (c: CornerBox | null) => {\n    if (!c || c.w <= 0 || c.h <= 0) return null;\n    const nw = Math.min(c.w, w - 2 * R);\n    const nh = Math.min(c.h, h - 2 * R);\n    if (nw <= R || nh <= R) return null;\n    const r = Math.max(0, Math.min(notchRadius, nw - R, nh - R));\n    return { nw, nh, r };\n  };\n\n  type Corner = {\n    entry: readonly [number, number];\n    exit: readonly [number, number];\n    cmds: string[];\n  };\n\n  const tl = prep(notches.tl);\n  const tr = prep(notches.tr);\n  const br = prep(notches.br);\n  const bl = prep(notches.bl);\n\n  const corner: Record<CornerKey, Corner> = {\n    tl: tl\n      ? {\n          entry: [0, tl.nh + R],\n          exit: [tl.nw + R, 0],\n          cmds: [\n            arc(R, R, tl.nh, 1),\n            line(tl.nw - tl.r, tl.nh),\n            arc(tl.r, tl.nw, tl.nh - tl.r, 0),\n            line(tl.nw, R),\n            arc(R, tl.nw + R, 0, 1),\n          ],\n        }\n      : { entry: [0, R], exit: [R, 0], cmds: [arc(R, R, 0, 1)] },\n    tr: tr\n      ? {\n          entry: [w - tr.nw - R, 0],\n          exit: [w, tr.nh + R],\n          cmds: [\n            arc(R, w - tr.nw, R, 1),\n            line(w - tr.nw, tr.nh - tr.r),\n            arc(tr.r, w - tr.nw + tr.r, tr.nh, 0),\n            line(w - R, tr.nh),\n            arc(R, w, tr.nh + R, 1),\n          ],\n        }\n      : { entry: [w - R, 0], exit: [w, R], cmds: [arc(R, w, R, 1)] },\n    br: br\n      ? {\n          entry: [w, h - br.nh - R],\n          exit: [w - br.nw - R, h],\n          cmds: [\n            arc(R, w - R, h - br.nh, 1),\n            line(w - br.nw + br.r, h - br.nh),\n            arc(br.r, w - br.nw, h - br.nh + br.r, 0),\n            line(w - br.nw, h - R),\n            arc(R, w - br.nw - R, h, 1),\n          ],\n        }\n      : { entry: [w, h - R], exit: [w - R, h], cmds: [arc(R, w - R, h, 1)] },\n    bl: bl\n      ? {\n          entry: [bl.nw + R, h],\n          exit: [0, h - bl.nh - R],\n          cmds: [\n            arc(R, bl.nw, h - R, 1),\n            line(bl.nw, h - bl.nh + bl.r),\n            arc(bl.r, bl.nw - bl.r, h - bl.nh, 0),\n            line(R, h - bl.nh),\n            arc(R, 0, h - bl.nh - R, 1),\n          ],\n        }\n      : { entry: [R, h], exit: [0, h - R], cmds: [arc(R, 0, h - R, 1)] },\n  };\n\n  return [\n    `M ${pt(corner.tl.exit)}`,\n    line(...corner.tr.entry),\n    ...corner.tr.cmds,\n    line(...corner.br.entry),\n    ...corner.br.cmds,\n    line(...corner.bl.entry),\n    ...corner.bl.cmds,\n    line(...corner.tl.entry),\n    ...corner.tl.cmds,\n    \"Z\",\n  ].join(\" \");\n}\n\nconst sameBox = (a: CornerBox | null, b: CornerBox | null) =>\n  a === b || (!!a && !!b && a.w === b.w && a.h === b.h);\n\ntype SideRects = { top: CornerBox | null; bottom: CornerBox | null };\n\n/**\n * Style for an invisible float that reserves a side's notched corners inside\n * the content flow, so flowing content wraps around the cutouts instead of\n * running under them. `shape-inside` never shipped in any browser; a float\n * with `shape-outside` is the standard equivalent. A top-only corner is just\n * the float's own box; a bottom corner needs the float to span the content\n * height with a polygon covering only the corner bands (joined by a zero-width\n * \"keyhole\" along the box edge, which keeps the polygon simple and valid).\n */\nfunction sideSpacerStyle(\n  side: \"left\" | \"right\",\n  rects: SideRects,\n  innerH: number,\n): React.CSSProperties | null {\n  const top = rects.top && rects.top.w > 0 && rects.top.h > 0 ? rects.top : null;\n  const bottom = rects.bottom && rects.bottom.w > 0 && rects.bottom.h > 0 ? rects.bottom : null;\n  if (!top && !bottom) return null;\n\n  const base: React.CSSProperties = { float: side, pointerEvents: \"none\" };\n  if (!bottom) {\n    // Type-narrowing: !bottom && the guard above means top is set.\n    return { ...base, width: (top as CornerBox).w, height: (top as CornerBox).h };\n  }\n\n  const px = (v: number) => `${round2(v)}px`;\n  const bandTop = `calc(100% - ${px(bottom.h)})`;\n  const shape =\n    side === \"left\"\n      ? top\n        ? `polygon(0 0, ${px(top.w)} 0, ${px(top.w)} ${px(top.h)}, 0 ${px(top.h)}, 0 ${bandTop}, ${px(bottom.w)} ${bandTop}, ${px(bottom.w)} 100%, 0 100%)`\n        : `polygon(0 ${bandTop}, ${px(bottom.w)} ${bandTop}, ${px(bottom.w)} 100%, 0 100%)`\n      : top\n        ? `polygon(100% 0, calc(100% - ${px(top.w)}) 0, calc(100% - ${px(top.w)}) ${px(top.h)}, 100% ${px(top.h)}, 100% ${bandTop}, calc(100% - ${px(bottom.w)}) ${bandTop}, calc(100% - ${px(bottom.w)}) 100%, 100% 100%)`\n        : `polygon(100% ${bandTop}, calc(100% - ${px(bottom.w)}) ${bandTop}, calc(100% - ${px(bottom.w)}) 100%, 100% 100%)`;\n\n  return {\n    ...base,\n    width: Math.max(top?.w ?? 0, bottom.w),\n    height: Math.max(innerH, (top?.h ?? 0) + bottom.h),\n    shapeOutside: shape,\n  };\n}\n\n// Variant fill goes on the clipped background layer; text colour goes on the\n// root so corner slots and content inherit it. Shadows must be drop-shadow\n// (a filter, applied to the layer's parent) — box-shadow gets clipped away.\nconst notchedCardVariants = {\n  default: {\n    background: \"bg-glass-none-bg\",\n    shadow: \"drop-shadow-sm\",\n    text: \"text-primary-txt\",\n    borderedByDefault: true,\n  },\n  muted: {\n    background: \"bg-muted-bg\",\n    shadow: \"\",\n    text: \"text-primary-txt\",\n    borderedByDefault: true,\n  },\n  // Translucent glass over textured backgrounds — blur is part of the deal.\n  glass: {\n    background: \"bg-glass-40-bg backdrop-blur-glass\",\n    shadow: \"\",\n    text: \"text-primary-txt\",\n    borderedByDefault: false,\n  },\n  // Active product's brand gradient, matching Card's brand variant.\n  brand: {\n    background:\n      \"bg-[image:linear-gradient(to_right,var(--theme-brand-700),var(--theme-brand-500-primary))]\",\n    shadow: \"\",\n    text: \"text-white\",\n    borderedByDefault: false,\n  },\n  inverted: {\n    background: \"bg-primary-invert-bg\",\n    shadow: \"\",\n    text: \"text-primary-invert-txt\",\n    borderedByDefault: false,\n  },\n} as const;\n\ntype NotchedCardVariant = keyof typeof notchedCardVariants;\n\ntype NotchedCardProps = React.ComponentProps<\"div\"> & {\n  /** Content pinned to the top-left corner; its footprint is notched out of the background. */\n  topLeftComponent?: React.ReactNode;\n  /** Content pinned to the top-right corner; its footprint is notched out of the background. */\n  topRightComponent?: React.ReactNode;\n  /** Content pinned to the bottom-left corner; its footprint is notched out of the background. */\n  bottomLeftComponent?: React.ReactNode;\n  /** Content pinned to the bottom-right corner; its footprint is notched out of the background. */\n  bottomRightComponent?: React.ReactNode;\n  /** Background fill of the card surface. Default `default` (solid surface). */\n  variant?: NotchedCardVariant;\n  /** Image URL rendered as the card's background (object-fit: cover), slightly transparent. */\n  backgroundImage?: string;\n  /** Opacity of the background image. Default `0.8`. */\n  backgroundImageOpacity?: number;\n  /** Outer corner radius in px. Default `16`. */\n  radius?: number;\n  /** Concave fillet radius at each notch's inner corner in px. Default `12`. */\n  notchRadius?: number;\n  /** Gutter in px between corner content and the background edge. Default `12`. */\n  notchGap?: number;\n  /** Content padding in px. Default `24`. */\n  padding?: number;\n  /** Keep flowing content out of the notched corners via invisible float\n      spacers. Needs flow (block/inline) content — set `false` if\n      `contentClassName` turns the wrapper into a flex/grid container.\n      Default `true`. */\n  avoidNotches?: boolean;\n  /** Draw the outline stroke. Defaults per variant (`default`/`muted` on, others off). */\n  bordered?: boolean;\n  /** Extra classes for the clipped background layer — set the fill here (e.g.\n      `bg-…`, gradients). The layer sits behind the content, so plain `hover:`\n      variants never fire on it; the root carries the `group` marker — use\n      `group-hover:bg-…` for hover fills (plain `hover:` works on `className`,\n      which styles the root itself). */\n  backgroundClassName?: string;\n  /** Extra classes for the content wrapper. */\n  contentClassName?: string;\n};\n\n/** Card with corner slots that notch the background around their content. */\nfunction NotchedCard({\n  children,\n  topLeftComponent,\n  topRightComponent,\n  bottomLeftComponent,\n  bottomRightComponent,\n  variant = \"default\",\n  backgroundImage,\n  backgroundImageOpacity = 0.8,\n  radius = 16,\n  notchRadius = 12,\n  notchGap = 12,\n  padding = 24,\n  avoidNotches = true,\n  bordered,\n  className,\n  backgroundClassName,\n  contentClassName,\n  style,\n  ...props\n}: NotchedCardProps) {\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const tlRef = React.useRef<HTMLDivElement>(null);\n  const trRef = React.useRef<HTMLDivElement>(null);\n  const brRef = React.useRef<HTMLDivElement>(null);\n  const blRef = React.useRef<HTMLDivElement>(null);\n  const cornerRefs: Record<CornerKey, React.RefObject<HTMLDivElement>> = {\n    tl: tlRef,\n    tr: trRef,\n    br: brRef,\n    bl: blRef,\n  };\n\n  const contentRef = React.useRef<HTMLDivElement>(null);\n\n  const [box, setBox] = React.useState<CornerBox>({ w: 0, h: 0 });\n  const [contentH, setContentH] = React.useState(0);\n  const [sizes, setSizes] = React.useState<CornerSizes>({\n    tl: null,\n    tr: null,\n    br: null,\n    bl: null,\n  });\n\n  const cornerSlots: Array<[CornerKey, React.ReactNode, React.CSSProperties]> = [\n    [\"tl\", topLeftComponent, { top: 0, left: 0 }],\n    [\"tr\", topRightComponent, { top: 0, right: 0 }],\n    [\"br\", bottomRightComponent, { bottom: 0, right: 0 }],\n    [\"bl\", bottomLeftComponent, { bottom: 0, left: 0 }],\n  ];\n  const hasCorners = cornerSlots.some(([, node]) => node != null && node !== false);\n\n  const measure = React.useCallback(() => {\n    const root = rootRef.current;\n    if (!root) return;\n    setBox((prev) => {\n      const next = { w: root.offsetWidth, h: root.offsetHeight };\n      return sameBox(prev, next) ? prev : next;\n    });\n    setContentH((prev) => {\n      const next = contentRef.current?.offsetHeight ?? 0;\n      return prev === next ? prev : next;\n    });\n    setSizes((prev) => {\n      const next = {} as CornerSizes;\n      let changed = false;\n      for (const k of CORNER_KEYS) {\n        const el = cornerRefs[k].current;\n        next[k] = el ? { w: el.offsetWidth, h: el.offsetHeight } : null;\n        if (!sameBox(prev[k], next[k])) changed = true;\n      }\n      return changed ? next : prev;\n    });\n  }, []);\n\n  useIsoLayoutEffect(() => {\n    if (!hasCorners) return;\n    measure();\n    if (typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver(measure);\n    if (rootRef.current) ro.observe(rootRef.current);\n    if (contentRef.current) ro.observe(contentRef.current);\n    for (const k of CORNER_KEYS) {\n      const el = cornerRefs[k].current;\n      if (el) ro.observe(el);\n    }\n    return () => ro.disconnect();\n  }, [\n    measure,\n    hasCorners,\n    topLeftComponent,\n    topRightComponent,\n    bottomRightComponent,\n    bottomLeftComponent,\n  ]);\n\n  // Corner content box + gutter = the bite taken out of the background.\n  const notches = Object.fromEntries(\n    CORNER_KEYS.map((k) => [\n      k,\n      sizes[k]\n        ? { w: (sizes[k] as CornerBox).w + notchGap, h: (sizes[k] as CornerBox).h + notchGap }\n        : null,\n    ]),\n  ) as CornerSizes;\n\n  const path = hasCorners\n    ? buildNotchedCardPath({ w: box.w, h: box.h, radius, notchRadius, notches })\n    : \"\";\n\n  const styles = notchedCardVariants[variant];\n  const showBorder = bordered ?? styles.borderedByDefault;\n\n  // Notch footprints translated into content-box coordinates, extended by\n  // `notchGap` so flowing content keeps a gutter from the cut edges.\n  const inset = (v?: number) => Math.max(0, (v ?? 0) - padding + notchGap);\n  const toRect = (notch: CornerBox | null) =>\n    notch ? { w: inset(notch.w), h: inset(notch.h) } : null;\n  const spacerSides: Array<[\"left\" | \"right\", SideRects]> = [\n    [\"left\", { top: toRect(notches.tl), bottom: toRect(notches.bl) }],\n    [\"right\", { top: toRect(notches.tr), bottom: toRect(notches.br) }],\n  ];\n  const innerH = Math.max(0, contentH - 2 * padding);\n\n  return (\n    <div\n      ref={rootRef}\n      data-slot=\"notched-card\"\n      data-variant={variant}\n      className={cn(\"group relative isolate\", styles.text, className)}\n      style={style}\n      {...props}\n    >\n      {/* Background layer — the only thing that gets clipped. The wrapper owns\n          the drop-shadow filter: filters apply before clipping, so a shadow on\n          the clipped element itself would be cut away with it. */}\n      <div aria-hidden className={cn(\"absolute inset-0 -z-10\", styles.shadow)}>\n        <div\n          data-slot=\"notched-card-background\"\n          className={cn(\"absolute inset-0 overflow-hidden\", styles.background, backgroundClassName)}\n          style={\n            path\n              ? { clipPath: `path(\"${path}\")`, WebkitClipPath: `path(\"${path}\")` }\n              : { borderRadius: radius }\n          }\n        >\n          {backgroundImage && (\n            <img\n              src={backgroundImage}\n              alt=\"\"\n              className=\"absolute inset-0 size-full object-cover\"\n              style={{ opacity: backgroundImageOpacity }}\n            />\n          )}\n        </div>\n      </div>\n\n      {/* Outline — stroked (not clipped) so it follows the notches and stays crisp. */}\n      {showBorder &&\n        (path ? (\n          <svg\n            aria-hidden\n            data-slot=\"notched-card-border\"\n            viewBox={`0 0 ${box.w} ${box.h}`}\n            width={box.w}\n            height={box.h}\n            className=\"pointer-events-none absolute inset-0\"\n            focusable=\"false\"\n          >\n            <path d={path} fill=\"none\" strokeWidth={1} className=\"stroke-primary-border\" />\n          </svg>\n        ) : (\n          <div\n            aria-hidden\n            data-slot=\"notched-card-border\"\n            className=\"pointer-events-none absolute inset-0 border border-primary-border\"\n            style={{ borderRadius: radius }}\n          />\n        ))}\n\n      {/* Content — uniform padding; float spacers keep flowing content out of\n          the notched corners. */}\n      <div\n        ref={contentRef}\n        data-slot=\"notched-card-content\"\n        className={cn(\"relative\", contentClassName)}\n        style={{ padding }}\n      >\n        {avoidNotches &&\n          spacerSides.map(([side, rects]) => {\n            const spacerStyle = sideSpacerStyle(side, rects, innerH);\n            return spacerStyle ? (\n              <div\n                key={side}\n                aria-hidden\n                data-slot=\"notched-card-spacer\"\n                data-side={side}\n                style={spacerStyle}\n              />\n            ) : null;\n          })}\n        {children}\n      </div>\n\n      {/* Corner slots — outside the background, inside the cutouts. */}\n      {cornerSlots.map(([key, node, pos]) =>\n        node != null && node !== false ? (\n          <div\n            key={key}\n            ref={cornerRefs[key]}\n            data-slot=\"notched-card-corner\"\n            data-corner={key}\n            className=\"absolute flex w-max items-center\"\n            style={pos}\n          >\n            {node}\n          </div>\n        ) : null,\n      )}\n    </div>\n  );\n}\n\nexport {\n  NotchedCard,\n  buildNotchedCardPath,\n  notchedCardVariants,\n  type NotchedCardProps,\n  type NotchedCardVariant,\n};\n"],"mappings":";;;;AAWA,MAAM,cAAc;CAAC;CAAM;CAAM;CAAM;AAAI;AAO3C,MAAM,qBAAqB,OAAO,WAAW,cAAc,MAAM,kBAAkB,MAAM;AAEzF,MAAM,UAAU,MAAc,KAAK,MAAM,IAAI,GAAG,IAAI;;;;;;;AAQpD,SAAS,qBAAqB,EAC5B,GACA,GACA,QACA,aACA,WAOS;CACT,IAAI,KAAK,KAAK,KAAK,GAAG,OAAO;CAE7B,MAAM,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,QAAQ,IAAI,GAAG,IAAI,CAAC,CAAC;CACpD,MAAM,OAAO,IAAY,GAAW,GAAW,UAC7C,KAAK,OAAO,EAAE,EAAE,GAAG,OAAO,EAAE,EAAE,OAAO,MAAM,GAAG,OAAO,CAAC,EAAE,GAAG,OAAO,CAAC;CACrE,MAAM,QAAQ,GAAW,MAAc,KAAK,OAAO,CAAC,EAAE,GAAG,OAAO,CAAC;CACjE,MAAM,MAAM,CAAC,GAAG,OAAkC,GAAG,OAAO,CAAC,EAAE,GAAG,OAAO,CAAC;CAG1E,MAAM,QAAQ,MAAwB;EACpC,IAAI,CAAC,KAAK,EAAE,KAAK,KAAK,EAAE,KAAK,GAAG,OAAO;EACvC,MAAM,KAAK,KAAK,IAAI,EAAE,GAAG,IAAI,IAAI,CAAC;EAClC,MAAM,KAAK,KAAK,IAAI,EAAE,GAAG,IAAI,IAAI,CAAC;EAClC,IAAI,MAAM,KAAK,MAAM,GAAG,OAAO;EAE/B,OAAO;GAAE;GAAI;GAAI,GADP,KAAK,IAAI,GAAG,KAAK,IAAI,aAAa,KAAK,GAAG,KAAK,CAAC,CACzC;EAAE;CACrB;CAQA,MAAM,KAAK,KAAK,QAAQ,EAAE;CAC1B,MAAM,KAAK,KAAK,QAAQ,EAAE;CAC1B,MAAM,KAAK,KAAK,QAAQ,EAAE;CAC1B,MAAM,KAAK,KAAK,QAAQ,EAAE;CAE1B,MAAM,SAAoC;EACxC,IAAI,KACA;GACE,OAAO,CAAC,GAAG,GAAG,KAAK,CAAC;GACpB,MAAM,CAAC,GAAG,KAAK,GAAG,CAAC;GACnB,MAAM;IACJ,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC;IAClB,KAAK,GAAG,KAAK,GAAG,GAAG,GAAG,EAAE;IACxB,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,GAAG,GAAG,CAAC;IAChC,KAAK,GAAG,IAAI,CAAC;IACb,IAAI,GAAG,GAAG,KAAK,GAAG,GAAG,CAAC;GACxB;EACF,IACA;GAAE,OAAO,CAAC,GAAG,CAAC;GAAG,MAAM,CAAC,GAAG,CAAC;GAAG,MAAM,CAAC,IAAI,GAAG,GAAG,GAAG,CAAC,CAAC;EAAE;EAC3D,IAAI,KACA;GACE,OAAO,CAAC,IAAI,GAAG,KAAK,GAAG,CAAC;GACxB,MAAM,CAAC,GAAG,GAAG,KAAK,CAAC;GACnB,MAAM;IACJ,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,CAAC;IACtB,KAAK,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,CAAC;IAC5B,IAAI,GAAG,GAAG,IAAI,GAAG,KAAK,GAAG,GAAG,GAAG,IAAI,CAAC;IACpC,KAAK,IAAI,GAAG,GAAG,EAAE;IACjB,IAAI,GAAG,GAAG,GAAG,KAAK,GAAG,CAAC;GACxB;EACF,IACA;GAAE,OAAO,CAAC,IAAI,GAAG,CAAC;GAAG,MAAM,CAAC,GAAG,CAAC;GAAG,MAAM,CAAC,IAAI,GAAG,GAAG,GAAG,CAAC,CAAC;EAAE;EAC/D,IAAI,KACA;GACE,OAAO,CAAC,GAAG,IAAI,GAAG,KAAK,CAAC;GACxB,MAAM,CAAC,IAAI,GAAG,KAAK,GAAG,CAAC;GACvB,MAAM;IACJ,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,IAAI,GAAG,KAAK,GAAG,GAAG,IAAI,GAAG,EAAE;IAChC,IAAI,GAAG,GAAG,IAAI,GAAG,IAAI,IAAI,GAAG,KAAK,GAAG,GAAG,CAAC;IACxC,KAAK,IAAI,GAAG,IAAI,IAAI,CAAC;IACrB,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,GAAG,CAAC;GAC5B;EACF,IACA;GAAE,OAAO,CAAC,GAAG,IAAI,CAAC;GAAG,MAAM,CAAC,IAAI,GAAG,CAAC;GAAG,MAAM,CAAC,IAAI,GAAG,IAAI,GAAG,GAAG,CAAC,CAAC;EAAE;EACvE,IAAI,KACA;GACE,OAAO,CAAC,GAAG,KAAK,GAAG,CAAC;GACpB,MAAM,CAAC,GAAG,IAAI,GAAG,KAAK,CAAC;GACvB,MAAM;IACJ,IAAI,GAAG,GAAG,IAAI,IAAI,GAAG,CAAC;IACtB,KAAK,GAAG,IAAI,IAAI,GAAG,KAAK,GAAG,CAAC;IAC5B,IAAI,GAAG,GAAG,GAAG,KAAK,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC;IACpC,KAAK,GAAG,IAAI,GAAG,EAAE;IACjB,IAAI,GAAG,GAAG,IAAI,GAAG,KAAK,GAAG,CAAC;GAC5B;EACF,IACA;GAAE,OAAO,CAAC,GAAG,CAAC;GAAG,MAAM,CAAC,GAAG,IAAI,CAAC;GAAG,MAAM,CAAC,IAAI,GAAG,GAAG,IAAI,GAAG,CAAC,CAAC;EAAE;CACrE;CAEA,OAAO;EACL,KAAK,GAAG,OAAO,GAAG,IAAI;EACtB,KAAK,GAAG,OAAO,GAAG,KAAK;EACvB,GAAG,OAAO,GAAG;EACb,KAAK,GAAG,OAAO,GAAG,KAAK;EACvB,GAAG,OAAO,GAAG;EACb,KAAK,GAAG,OAAO,GAAG,KAAK;EACvB,GAAG,OAAO,GAAG;EACb,KAAK,GAAG,OAAO,GAAG,KAAK;EACvB,GAAG,OAAO,GAAG;EACb;CACF,EAAE,KAAK,GAAG;AACZ;AAEA,MAAM,WAAW,GAAqB,MACpC,MAAM,KAAM,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;;;;;;;;;;AAarD,SAAS,gBACP,MACA,OACA,QAC4B;CAC5B,MAAM,MAAM,MAAM,OAAO,MAAM,IAAI,IAAI,KAAK,MAAM,IAAI,IAAI,IAAI,MAAM,MAAM;CAC1E,MAAM,SAAS,MAAM,UAAU,MAAM,OAAO,IAAI,KAAK,MAAM,OAAO,IAAI,IAAI,MAAM,SAAS;CACzF,IAAI,CAAC,OAAO,CAAC,QAAQ,OAAO;CAE5B,MAAM,OAA4B;EAAE,OAAO;EAAM,eAAe;CAAO;CACvE,IAAI,CAAC,QAEH,OAAO;EAAE,GAAG;EAAM,OAAQ,IAAkB;EAAG,QAAS,IAAkB;CAAE;CAG9E,MAAM,MAAM,MAAc,GAAG,OAAO,CAAC,EAAE;CACvC,MAAM,UAAU,eAAe,GAAG,OAAO,CAAC,EAAE;CAC5C,MAAM,QACJ,SAAS,SACL,MACE,gBAAgB,GAAG,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC,EAAE,MAAM,QAAQ,IAAI,GAAG,OAAO,CAAC,EAAE,GAAG,QAAQ,IAAI,GAAG,OAAO,CAAC,EAAE,kBAClI,aAAa,QAAQ,IAAI,GAAG,OAAO,CAAC,EAAE,GAAG,QAAQ,IAAI,GAAG,OAAO,CAAC,EAAE,kBACpE,MACE,+BAA+B,GAAG,IAAI,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC,EAAE,SAAS,QAAQ,gBAAgB,GAAG,OAAO,CAAC,EAAE,IAAI,QAAQ,gBAAgB,GAAG,OAAO,CAAC,EAAE,sBAC9L,gBAAgB,QAAQ,gBAAgB,GAAG,OAAO,CAAC,EAAE,IAAI,QAAQ,gBAAgB,GAAG,OAAO,CAAC,EAAE;CAEtG,OAAO;EACL,GAAG;EACH,OAAO,KAAK,IAAI,KAAK,KAAK,GAAG,OAAO,CAAC;EACrC,QAAQ,KAAK,IAAI,SAAS,KAAK,KAAK,KAAK,OAAO,CAAC;EACjD,cAAc;CAChB;AACF;AAKA,MAAM,sBAAsB;CAC1B,SAAS;EACP,YAAY;EACZ,QAAQ;EACR,MAAM;EACN,mBAAmB;CACrB;CACA,OAAO;EACL,YAAY;EACZ,QAAQ;EACR,MAAM;EACN,mBAAmB;CACrB;CAEA,OAAO;EACL,YAAY;EACZ,QAAQ;EACR,MAAM;EACN,mBAAmB;CACrB;CAEA,OAAO;EACL,YACE;EACF,QAAQ;EACR,MAAM;EACN,mBAAmB;CACrB;CACA,UAAU;EACR,YAAY;EACZ,QAAQ;EACR,MAAM;EACN,mBAAmB;CACrB;AACF;;AA6CA,SAAS,YAAY,EACnB,UACA,kBACA,mBACA,qBACA,sBACA,UAAU,WACV,iBACA,yBAAyB,IACzB,SAAS,IACT,cAAc,IACd,WAAW,IACX,UAAU,IACV,eAAe,MACf,UACA,WACA,qBACA,kBACA,OACA,GAAG,SACgB;CACnB,MAAM,UAAU,MAAM,OAAuB,IAAI;CAKjD,MAAM,aAAiE;EACrE,IALY,MAAM,OAAuB,IAKjC;EACR,IALY,MAAM,OAAuB,IAKjC;EACR,IALY,MAAM,OAAuB,IAKjC;EACR,IALY,MAAM,OAAuB,IAKjC;CACV;CAEA,MAAM,aAAa,MAAM,OAAuB,IAAI;CAEpD,MAAM,CAAC,KAAK,UAAU,MAAM,SAAoB;EAAE,GAAG;EAAG,GAAG;CAAE,CAAC;CAC9D,MAAM,CAAC,UAAU,eAAe,MAAM,SAAS,CAAC;CAChD,MAAM,CAAC,OAAO,YAAY,MAAM,SAAsB;EACpD,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,CAAC;CAED,MAAM,cAAwE;EAC5E;GAAC;GAAM;GAAkB;IAAE,KAAK;IAAG,MAAM;GAAE;EAAC;EAC5C;GAAC;GAAM;GAAmB;IAAE,KAAK;IAAG,OAAO;GAAE;EAAC;EAC9C;GAAC;GAAM;GAAsB;IAAE,QAAQ;IAAG,OAAO;GAAE;EAAC;EACpD;GAAC;GAAM;GAAqB;IAAE,QAAQ;IAAG,MAAM;GAAE;EAAC;CACpD;CACA,MAAM,aAAa,YAAY,MAAM,GAAG,UAAU,QAAQ,QAAQ,SAAS,KAAK;CAEhF,MAAM,UAAU,MAAM,kBAAkB;EACtC,MAAM,OAAO,QAAQ;EACrB,IAAI,CAAC,MAAM;EACX,QAAQ,SAAS;GACf,MAAM,OAAO;IAAE,GAAG,KAAK;IAAa,GAAG,KAAK;GAAa;GACzD,OAAO,QAAQ,MAAM,IAAI,IAAI,OAAO;EACtC,CAAC;EACD,aAAa,SAAS;GACpB,MAAM,OAAO,WAAW,SAAS,gBAAgB;GACjD,OAAO,SAAS,OAAO,OAAO;EAChC,CAAC;EACD,UAAU,SAAS;GACjB,MAAM,OAAO,CAAC;GACd,IAAI,UAAU;GACd,KAAK,MAAM,KAAK,aAAa;IAC3B,MAAM,KAAK,WAAW,GAAG;IACzB,KAAK,KAAK,KAAK;KAAE,GAAG,GAAG;KAAa,GAAG,GAAG;IAAa,IAAI;IAC3D,IAAI,CAAC,QAAQ,KAAK,IAAI,KAAK,EAAE,GAAG,UAAU;GAC5C;GACA,OAAO,UAAU,OAAO;EAC1B,CAAC;CACH,GAAG,CAAC,CAAC;CAEL,yBAAyB;EACvB,IAAI,CAAC,YAAY;EACjB,QAAQ;EACR,IAAI,OAAO,mBAAmB,aAAa;EAC3C,MAAM,KAAK,IAAI,eAAe,OAAO;EACrC,IAAI,QAAQ,SAAS,GAAG,QAAQ,QAAQ,OAAO;EAC/C,IAAI,WAAW,SAAS,GAAG,QAAQ,WAAW,OAAO;EACrD,KAAK,MAAM,KAAK,aAAa;GAC3B,MAAM,KAAK,WAAW,GAAG;GACzB,IAAI,IAAI,GAAG,QAAQ,EAAE;EACvB;EACA,aAAa,GAAG,WAAW;CAC7B,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAGD,MAAM,UAAU,OAAO,YACrB,YAAY,KAAK,MAAM,CACrB,GACA,MAAM,KACF;EAAE,GAAI,MAAM,GAAiB,IAAI;EAAU,GAAI,MAAM,GAAiB,IAAI;CAAS,IACnF,IACN,CAAC,CACH;CAEA,MAAM,OAAO,aACT,qBAAqB;EAAE,GAAG,IAAI;EAAG,GAAG,IAAI;EAAG;EAAQ;EAAa;CAAQ,CAAC,IACzE;CAEJ,MAAM,SAAS,oBAAoB;CACnC,MAAM,aAAa,YAAY,OAAO;CAItC,MAAM,SAAS,MAAe,KAAK,IAAI,IAAI,KAAK,KAAK,UAAU,QAAQ;CACvE,MAAM,UAAU,UACd,QAAQ;EAAE,GAAG,MAAM,MAAM,CAAC;EAAG,GAAG,MAAM,MAAM,CAAC;CAAE,IAAI;CACrD,MAAM,cAAoD,CACxD,CAAC,QAAQ;EAAE,KAAK,OAAO,QAAQ,EAAE;EAAG,QAAQ,OAAO,QAAQ,EAAE;CAAE,CAAC,GAChE,CAAC,SAAS;EAAE,KAAK,OAAO,QAAQ,EAAE;EAAG,QAAQ,OAAO,QAAQ,EAAE;CAAE,CAAC,CACnE;CACA,MAAM,SAAS,KAAK,IAAI,GAAG,WAAW,IAAI,OAAO;CAEjD,OACE,qBAAC,OAAD;EACE,KAAK;EACL,aAAU;EACV,gBAAc;EACd,WAAW,GAAG,0BAA0B,OAAO,MAAM,SAAS;EACvD;EACP,GAAI;YANN;GAWE,oBAAC,OAAD;IAAK,eAAA;IAAY,WAAW,GAAG,0BAA0B,OAAO,MAAM;cACpE,oBAAC,OAAD;KACE,aAAU;KACV,WAAW,GAAG,oCAAoC,OAAO,YAAY,mBAAmB;KACxF,OACE,OACI;MAAE,UAAU,SAAS,KAAK;MAAK,gBAAgB,SAAS,KAAK;KAAI,IACjE,EAAE,cAAc,OAAO;eAG5B,mBACC,oBAAC,OAAD;MACE,KAAK;MACL,KAAI;MACJ,WAAU;MACV,OAAO,EAAE,SAAS,uBAAuB;KAC1C,CAAA;IAEA,CAAA;GACF,CAAA;GAGJ,eACE,OACC,oBAAC,OAAD;IACE,eAAA;IACA,aAAU;IACV,SAAS,OAAO,IAAI,EAAE,GAAG,IAAI;IAC7B,OAAO,IAAI;IACX,QAAQ,IAAI;IACZ,WAAU;IACV,WAAU;cAEV,oBAAC,QAAD;KAAM,GAAG;KAAM,MAAK;KAAO,aAAa;KAAG,WAAU;IAAyB,CAAA;GAC3E,CAAA,IAEL,oBAAC,OAAD;IACE,eAAA;IACA,aAAU;IACV,WAAU;IACV,OAAO,EAAE,cAAc,OAAO;GAC/B,CAAA;GAKL,qBAAC,OAAD;IACE,KAAK;IACL,aAAU;IACV,WAAW,GAAG,YAAY,gBAAgB;IAC1C,OAAO,EAAE,QAAQ;cAJnB,CAMG,gBACC,YAAY,KAAK,CAAC,MAAM,WAAW;KACjC,MAAM,cAAc,gBAAgB,MAAM,OAAO,MAAM;KACvD,OAAO,cACL,oBAAC,OAAD;MAEE,eAAA;MACA,aAAU;MACV,aAAW;MACX,OAAO;KACR,GALM,IAKN,IACC;IACN,CAAC,GACF,QACE;;GAGJ,YAAY,KAAK,CAAC,KAAK,MAAM,SAC5B,QAAQ,QAAQ,SAAS,QACvB,oBAAC,OAAD;IAEE,KAAK,WAAW;IAChB,aAAU;IACV,eAAa;IACb,WAAU;IACV,OAAO;cAEN;GACE,GARE,GAQF,IACH,IACN;EACG;;AAET"}

package/dist/primitives/Pagination/index.d.cts

@@ -1,2 +1,2 @@
-import { a as PaginationLink, i as PaginationItem, n as PaginationContent, o as PaginationNext, r as PaginationEllipsis, s as PaginationPrevious, t as Pagination } from "../../index45.cjs";
+import { a as PaginationLink, i as PaginationItem, n as PaginationContent, o as PaginationNext, r as PaginationEllipsis, s as PaginationPrevious, t as Pagination } from "../../index50.cjs";
 export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };

package/dist/primitives/Pagination/index.d.ts

@@ -1,2 +1,2 @@
-import { a as PaginationLink, i as PaginationItem, n as PaginationContent, o as PaginationNext, r as PaginationEllipsis, s as PaginationPrevious, t as Pagination } from "../../index45.js";
+import { a as PaginationLink, i as PaginationItem, n as PaginationContent, o as PaginationNext, r as PaginationEllipsis, s as PaginationPrevious, t as Pagination } from "../../index50.js";
 export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };

package/dist/primitives/Popover/index.d.cts

@@ -1,2 +1,2 @@
-import { a as PopoverHeader, i as PopoverDescription, n as PopoverAnchor, o as PopoverTitle, r as PopoverContent, s as PopoverTrigger, t as Popover } from "../../index42.cjs";
+import { a as PopoverHeader, i as PopoverDescription, n as PopoverAnchor, o as PopoverTitle, r as PopoverContent, s as PopoverTrigger, t as Popover } from "../../index21.cjs";
 export { Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger };

package/dist/primitives/Popover/index.d.ts

@@ -1,2 +1,2 @@
-import { a as PopoverHeader, i as PopoverDescription, n as PopoverAnchor, o as PopoverTitle, r as PopoverContent, s as PopoverTrigger, t as Popover } from "../../index42.js";
+import { a as PopoverHeader, i as PopoverDescription, n as PopoverAnchor, o as PopoverTitle, r as PopoverContent, s as PopoverTrigger, t as Popover } from "../../index21.js";
 export { Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger };

package/dist/primitives/Progress/index.d.cts

@@ -1,2 +1,2 @@
-import { t as Progress } from "../../index46.cjs";
+import { t as Progress } from "../../index51.cjs";
 export { Progress };

package/dist/primitives/Progress/index.d.ts

@@ -1,2 +1,2 @@
-import { t as Progress } from "../../index46.js";
+import { t as Progress } from "../../index51.js";
 export { Progress };

package/dist/primitives/RadioGroup/index.cjs

@@ -20,7 +20,7 @@ function RadioGroup({ className, orientation = "vertical", ...props }) {
 function RadioGroupItem({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.RadioGroup.Item, {
 		"data-slot": "radio-group-item",
-		className: require_cn.cn("aspect-square size-4 shrink-0 rounded-full border border-secondary-border bg-input-bg text-primary-invert-bg transition-[color,box-shadow] outline-none focus-visible:ring-3 focus-visible:ring-focus data-[state=checked]:border-selected-border disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger-border aria-invalid:ring-focus-error aria-invalid:text-danger-txt", className),
+		className: require_cn.cn("relative aspect-square size-4 shrink-0 rounded-full border border-secondary-border bg-input-bg text-primary-invert-bg transition-[color,box-shadow] outline-none after:absolute after:-inset-1 after:rounded-full after:content-[''] focus-visible:ring-3 focus-visible:ring-focus data-[state=checked]:border-selected-border disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger-border aria-invalid:ring-focus-error aria-invalid:text-danger-txt", className),
 		...props,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.RadioGroup.Indicator, {
 			"data-slot": "radio-group-indicator",

package/dist/primitives/RadioGroup/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["RadioGroupPrimitive","cn","Icon","CircleIcon"],"sources":["../../../src/primitives/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { Icon } from \"@/primitives/Icon\";\nimport { CircleIcon } from \"lucide-react\";\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\";\nimport { useId } from \"react\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root of a set of mutually-exclusive radio options; lays them out vertically or horizontally. */\nfunction RadioGroup({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root> & {\n  /** Stack the items in a column (`vertical`) or wrap them in a row (`horizontal`). */\n  orientation?: \"vertical\" | \"horizontal\";\n}) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        orientation === \"horizontal\" ? \"flex flex-row flex-wrap gap-4 items-center\" : \"grid gap-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A single selectable radio control; pair it with a label for accessible option text. */\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        // Dot color rides on currentColor: the checked dot is the inverted fill,\n        // flipping to the danger color under aria-invalid (Figma radio spec).\n        \"aspect-square size-4 shrink-0 rounded-full border border-secondary-border bg-input-bg text-primary-invert-bg transition-[color,box-shadow] outline-none focus-visible:ring-3 focus-visible:ring-focus data-[state=checked]:border-selected-border disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger-border aria-invalid:ring-focus-error aria-invalid:text-danger-txt\",\n        className,\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"relative flex items-center justify-center\"\n      >\n        <Icon\n          as={CircleIcon}\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current stroke-current\"\n        />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  );\n}\n\n/** A card-style radio option with a bordered surface, title, and description that highlights when checked. */\nfunction RichRadioItem({\n  className,\n  value,\n  title,\n  description,\n  flipped = false,\n  id,\n  ...props\n}: Omit<React.ComponentProps<typeof RadioGroupPrimitive.Item>, \"children\"> & {\n  /** Value submitted when this option is selected. */\n  value: string;\n  /** Bold heading shown at the top of the card. */\n  title?: React.ReactNode;\n  /** Secondary muted text shown beneath the title. */\n  description?: React.ReactNode;\n  /** Place the radio control on the trailing edge instead of the leading edge. */\n  flipped?: boolean;\n}) {\n  const generatedId = useId();\n  const itemId = id ?? generatedId;\n  return (\n    <label\n      data-slot=\"rich-radio-item\"\n      htmlFor={itemId}\n      className={cn(\n        \"flex cursor-pointer items-start gap-3 rounded-10 border border-primary-border bg-muted-bg p-3 text-primary-txt transition-colors has-[[data-state=checked]]:border-selected-border has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50\",\n        flipped ? \"flex-row-reverse\" : \"flex-row\",\n        className,\n      )}\n    >\n      <RadioGroupItem\n        data-slot=\"rich-radio-item-control\"\n        id={itemId}\n        value={value}\n        className=\"mt-0.75\"\n        {...props}\n      />\n      <span data-slot=\"rich-radio-item-content\" className=\"flex flex-col gap-1.5\">\n        {title != null && (\n          <span data-slot=\"rich-radio-item-title\" className=\"text-sm leading-5\">\n            {title}\n          </span>\n        )}\n        {description != null && (\n          <span\n            data-slot=\"rich-radio-item-description\"\n            className=\"text-xs leading-4 text-muted-txt\"\n          >\n            {description}\n          </span>\n        )}\n      </span>\n    </label>\n  );\n}\n\nexport { RadioGroup, RadioGroupItem, RichRadioItem };\n"],"mappings":";;;;;;;;;AASA,SAAS,WAAW,EAClB,WACA,cAAc,YACd,GAAG,SAIF;CACD,OACE,iBAAA,GAAA,kBAAA,KAACA,SAAAA,WAAoB,MAArB;EACE,aAAU;EACV,oBAAkB;EACL;EACb,WAAWC,WAAAA,GACT,gBAAgB,eAAe,+CAA+C,cAC9E,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,eAAe,EACtB,WACA,GAAG,SACqD;CACxD,OACE,iBAAA,GAAA,kBAAA,KAACD,SAAAA,WAAoB,MAArB;EACE,aAAU;EACV,WAAWC,WAAAA,GAGT,kYACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACD,SAAAA,WAAoB,WAArB;GACE,aAAU;GACV,WAAU;aAEV,iBAAA,GAAA,kBAAA,KAACE,aAAAA,MAAD;IACE,IAAIC,aAAAA;IACJ,WAAU;GACX,CAAA;EAC4B,CAAA;CACP,CAAA;AAE9B;;AAGA,SAAS,cAAc,EACrB,WACA,OACA,OACA,aACA,UAAU,OACV,IACA,GAAG,SAUF;CACD,MAAM,eAAA,GAAA,MAAA,OAAoB;CAC1B,MAAM,SAAS,MAAM;CACrB,OACE,iBAAA,GAAA,kBAAA,MAAC,SAAD;EACE,aAAU;EACV,SAAS;EACT,WAAWF,WAAAA,GACT,oPACA,UAAU,qBAAqB,YAC/B,SACF;YAPF,CASE,iBAAA,GAAA,kBAAA,KAAC,gBAAD;GACE,aAAU;GACV,IAAI;GACG;GACP,WAAU;GACV,GAAI;EACL,CAAA,GACD,iBAAA,GAAA,kBAAA,MAAC,QAAD;GAAM,aAAU;GAA0B,WAAU;aAApD,CACG,SAAS,QACR,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,aAAU;IAAwB,WAAU;cAC/C;GACG,CAAA,GAEP,eAAe,QACd,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,aAAU;IACV,WAAU;cAET;GACG,CAAA,CAEJ;IACD;;AAEX"}
+{"version":3,"file":"index.cjs","names":["RadioGroupPrimitive","cn","Icon","CircleIcon"],"sources":["../../../src/primitives/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { Icon } from \"@/primitives/Icon\";\nimport { CircleIcon } from \"lucide-react\";\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\";\nimport { useId } from \"react\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root of a set of mutually-exclusive radio options; lays them out vertically or horizontally. */\nfunction RadioGroup({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root> & {\n  /** Stack the items in a column (`vertical`) or wrap them in a row (`horizontal`). */\n  orientation?: \"vertical\" | \"horizontal\";\n}) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        orientation === \"horizontal\" ? \"flex flex-row flex-wrap gap-4 items-center\" : \"grid gap-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A single selectable radio control; pair it with a label for accessible option text. */\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        // Keep the visible control at 16px while expanding the click/tap target to 24px.\n        // This follows the repo's hit-area pattern (negative inset pseudo-element)\n        // so surrounding layout stays unchanged.\n        // Dot color rides on currentColor: the checked dot is the inverted fill,\n        // flipping to the danger color under aria-invalid (Figma radio spec).\n        \"relative aspect-square size-4 shrink-0 rounded-full border border-secondary-border bg-input-bg text-primary-invert-bg transition-[color,box-shadow] outline-none after:absolute after:-inset-1 after:rounded-full after:content-[''] focus-visible:ring-3 focus-visible:ring-focus data-[state=checked]:border-selected-border disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger-border aria-invalid:ring-focus-error aria-invalid:text-danger-txt\",\n        className,\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"relative flex items-center justify-center\"\n      >\n        <Icon\n          as={CircleIcon}\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current stroke-current\"\n        />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  );\n}\n\n/** A card-style radio option with a bordered surface, title, and description that highlights when checked. */\nfunction RichRadioItem({\n  className,\n  value,\n  title,\n  description,\n  flipped = false,\n  id,\n  ...props\n}: Omit<React.ComponentProps<typeof RadioGroupPrimitive.Item>, \"children\"> & {\n  /** Value submitted when this option is selected. */\n  value: string;\n  /** Bold heading shown at the top of the card. */\n  title?: React.ReactNode;\n  /** Secondary muted text shown beneath the title. */\n  description?: React.ReactNode;\n  /** Place the radio control on the trailing edge instead of the leading edge. */\n  flipped?: boolean;\n}) {\n  const generatedId = useId();\n  const itemId = id ?? generatedId;\n  return (\n    <label\n      data-slot=\"rich-radio-item\"\n      htmlFor={itemId}\n      className={cn(\n        \"flex cursor-pointer items-start gap-3 rounded-10 border border-primary-border bg-muted-bg p-3 text-primary-txt transition-colors has-[[data-state=checked]]:border-selected-border has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50\",\n        flipped ? \"flex-row-reverse\" : \"flex-row\",\n        className,\n      )}\n    >\n      <RadioGroupItem\n        data-slot=\"rich-radio-item-control\"\n        id={itemId}\n        value={value}\n        className=\"mt-0.75\"\n        {...props}\n      />\n      <span data-slot=\"rich-radio-item-content\" className=\"flex flex-col gap-1.5\">\n        {title != null && (\n          <span data-slot=\"rich-radio-item-title\" className=\"text-sm leading-5\">\n            {title}\n          </span>\n        )}\n        {description != null && (\n          <span\n            data-slot=\"rich-radio-item-description\"\n            className=\"text-xs leading-4 text-muted-txt\"\n          >\n            {description}\n          </span>\n        )}\n      </span>\n    </label>\n  );\n}\n\nexport { RadioGroup, RadioGroupItem, RichRadioItem };\n"],"mappings":";;;;;;;;;AASA,SAAS,WAAW,EAClB,WACA,cAAc,YACd,GAAG,SAIF;CACD,OACE,iBAAA,GAAA,kBAAA,KAACA,SAAAA,WAAoB,MAArB;EACE,aAAU;EACV,oBAAkB;EACL;EACb,WAAWC,WAAAA,GACT,gBAAgB,eAAe,+CAA+C,cAC9E,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,eAAe,EACtB,WACA,GAAG,SACqD;CACxD,OACE,iBAAA,GAAA,kBAAA,KAACD,SAAAA,WAAoB,MAArB;EACE,aAAU;EACV,WAAWC,WAAAA,GAMT,+cACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACD,SAAAA,WAAoB,WAArB;GACE,aAAU;GACV,WAAU;aAEV,iBAAA,GAAA,kBAAA,KAACE,aAAAA,MAAD;IACE,IAAIC,aAAAA;IACJ,WAAU;GACX,CAAA;EAC4B,CAAA;CACP,CAAA;AAE9B;;AAGA,SAAS,cAAc,EACrB,WACA,OACA,OACA,aACA,UAAU,OACV,IACA,GAAG,SAUF;CACD,MAAM,eAAA,GAAA,MAAA,OAAoB;CAC1B,MAAM,SAAS,MAAM;CACrB,OACE,iBAAA,GAAA,kBAAA,MAAC,SAAD;EACE,aAAU;EACV,SAAS;EACT,WAAWF,WAAAA,GACT,oPACA,UAAU,qBAAqB,YAC/B,SACF;YAPF,CASE,iBAAA,GAAA,kBAAA,KAAC,gBAAD;GACE,aAAU;GACV,IAAI;GACG;GACP,WAAU;GACV,GAAI;EACL,CAAA,GACD,iBAAA,GAAA,kBAAA,MAAC,QAAD;GAAM,aAAU;GAA0B,WAAU;aAApD,CACG,SAAS,QACR,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,aAAU;IAAwB,WAAU;cAC/C;GACG,CAAA,GAEP,eAAe,QACd,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,aAAU;IACV,WAAU;cAET;GACG,CAAA,CAEJ;IACD;;AAEX"}

package/dist/primitives/RadioGroup/index.d.cts

@@ -1,2 +1,2 @@
-import { n as RadioGroupItem, r as RichRadioItem, t as RadioGroup } from "../../index47.cjs";
+import { n as RadioGroupItem, r as RichRadioItem, t as RadioGroup } from "../../index52.cjs";
 export { RadioGroup, RadioGroupItem, RichRadioItem };

package/dist/primitives/RadioGroup/index.d.ts

@@ -1,2 +1,2 @@
-import { n as RadioGroupItem, r as RichRadioItem, t as RadioGroup } from "../../index47.js";
+import { n as RadioGroupItem, r as RichRadioItem, t as RadioGroup } from "../../index52.js";
 export { RadioGroup, RadioGroupItem, RichRadioItem };

package/dist/primitives/RadioGroup/index.js

@@ -19,7 +19,7 @@ function RadioGroup({ className, orientation = "vertical", ...props }) {
 function RadioGroupItem({ className, ...props }) {
 	return /* @__PURE__ */ jsx(RadioGroup$1.Item, {
 		"data-slot": "radio-group-item",
-		className: cn("aspect-square size-4 shrink-0 rounded-full border border-secondary-border bg-input-bg text-primary-invert-bg transition-[color,box-shadow] outline-none focus-visible:ring-3 focus-visible:ring-focus data-[state=checked]:border-selected-border disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger-border aria-invalid:ring-focus-error aria-invalid:text-danger-txt", className),
+		className: cn("relative aspect-square size-4 shrink-0 rounded-full border border-secondary-border bg-input-bg text-primary-invert-bg transition-[color,box-shadow] outline-none after:absolute after:-inset-1 after:rounded-full after:content-[''] focus-visible:ring-3 focus-visible:ring-focus data-[state=checked]:border-selected-border disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger-border aria-invalid:ring-focus-error aria-invalid:text-danger-txt", className),
 		...props,
 		children: /* @__PURE__ */ jsx(RadioGroup$1.Indicator, {
 			"data-slot": "radio-group-indicator",

package/dist/primitives/RadioGroup/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["RadioGroupPrimitive"],"sources":["../../../src/primitives/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { Icon } from \"@/primitives/Icon\";\nimport { CircleIcon } from \"lucide-react\";\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\";\nimport { useId } from \"react\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root of a set of mutually-exclusive radio options; lays them out vertically or horizontally. */\nfunction RadioGroup({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root> & {\n  /** Stack the items in a column (`vertical`) or wrap them in a row (`horizontal`). */\n  orientation?: \"vertical\" | \"horizontal\";\n}) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        orientation === \"horizontal\" ? \"flex flex-row flex-wrap gap-4 items-center\" : \"grid gap-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A single selectable radio control; pair it with a label for accessible option text. */\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        // Dot color rides on currentColor: the checked dot is the inverted fill,\n        // flipping to the danger color under aria-invalid (Figma radio spec).\n        \"aspect-square size-4 shrink-0 rounded-full border border-secondary-border bg-input-bg text-primary-invert-bg transition-[color,box-shadow] outline-none focus-visible:ring-3 focus-visible:ring-focus data-[state=checked]:border-selected-border disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger-border aria-invalid:ring-focus-error aria-invalid:text-danger-txt\",\n        className,\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"relative flex items-center justify-center\"\n      >\n        <Icon\n          as={CircleIcon}\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current stroke-current\"\n        />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  );\n}\n\n/** A card-style radio option with a bordered surface, title, and description that highlights when checked. */\nfunction RichRadioItem({\n  className,\n  value,\n  title,\n  description,\n  flipped = false,\n  id,\n  ...props\n}: Omit<React.ComponentProps<typeof RadioGroupPrimitive.Item>, \"children\"> & {\n  /** Value submitted when this option is selected. */\n  value: string;\n  /** Bold heading shown at the top of the card. */\n  title?: React.ReactNode;\n  /** Secondary muted text shown beneath the title. */\n  description?: React.ReactNode;\n  /** Place the radio control on the trailing edge instead of the leading edge. */\n  flipped?: boolean;\n}) {\n  const generatedId = useId();\n  const itemId = id ?? generatedId;\n  return (\n    <label\n      data-slot=\"rich-radio-item\"\n      htmlFor={itemId}\n      className={cn(\n        \"flex cursor-pointer items-start gap-3 rounded-10 border border-primary-border bg-muted-bg p-3 text-primary-txt transition-colors has-[[data-state=checked]]:border-selected-border has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50\",\n        flipped ? \"flex-row-reverse\" : \"flex-row\",\n        className,\n      )}\n    >\n      <RadioGroupItem\n        data-slot=\"rich-radio-item-control\"\n        id={itemId}\n        value={value}\n        className=\"mt-0.75\"\n        {...props}\n      />\n      <span data-slot=\"rich-radio-item-content\" className=\"flex flex-col gap-1.5\">\n        {title != null && (\n          <span data-slot=\"rich-radio-item-title\" className=\"text-sm leading-5\">\n            {title}\n          </span>\n        )}\n        {description != null && (\n          <span\n            data-slot=\"rich-radio-item-description\"\n            className=\"text-xs leading-4 text-muted-txt\"\n          >\n            {description}\n          </span>\n        )}\n      </span>\n    </label>\n  );\n}\n\nexport { RadioGroup, RadioGroupItem, RichRadioItem };\n"],"mappings":";;;;;;;;AASA,SAAS,WAAW,EAClB,WACA,cAAc,YACd,GAAG,SAIF;CACD,OACE,oBAACA,aAAoB,MAArB;EACE,aAAU;EACV,oBAAkB;EACL;EACb,WAAW,GACT,gBAAgB,eAAe,+CAA+C,cAC9E,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,eAAe,EACtB,WACA,GAAG,SACqD;CACxD,OACE,oBAACA,aAAoB,MAArB;EACE,aAAU;EACV,WAAW,GAGT,kYACA,SACF;EACA,GAAI;YAEJ,oBAACA,aAAoB,WAArB;GACE,aAAU;GACV,WAAU;aAEV,oBAAC,MAAD;IACE,IAAI;IACJ,WAAU;GACX,CAAA;EAC4B,CAAA;CACP,CAAA;AAE9B;;AAGA,SAAS,cAAc,EACrB,WACA,OACA,OACA,aACA,UAAU,OACV,IACA,GAAG,SAUF;CACD,MAAM,cAAc,MAAM;CAC1B,MAAM,SAAS,MAAM;CACrB,OACE,qBAAC,SAAD;EACE,aAAU;EACV,SAAS;EACT,WAAW,GACT,oPACA,UAAU,qBAAqB,YAC/B,SACF;YAPF,CASE,oBAAC,gBAAD;GACE,aAAU;GACV,IAAI;GACG;GACP,WAAU;GACV,GAAI;EACL,CAAA,GACD,qBAAC,QAAD;GAAM,aAAU;GAA0B,WAAU;aAApD,CACG,SAAS,QACR,oBAAC,QAAD;IAAM,aAAU;IAAwB,WAAU;cAC/C;GACG,CAAA,GAEP,eAAe,QACd,oBAAC,QAAD;IACE,aAAU;IACV,WAAU;cAET;GACG,CAAA,CAEJ;IACD;;AAEX"}
+{"version":3,"file":"index.js","names":["RadioGroupPrimitive"],"sources":["../../../src/primitives/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { Icon } from \"@/primitives/Icon\";\nimport { CircleIcon } from \"lucide-react\";\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\";\nimport { useId } from \"react\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root of a set of mutually-exclusive radio options; lays them out vertically or horizontally. */\nfunction RadioGroup({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root> & {\n  /** Stack the items in a column (`vertical`) or wrap them in a row (`horizontal`). */\n  orientation?: \"vertical\" | \"horizontal\";\n}) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        orientation === \"horizontal\" ? \"flex flex-row flex-wrap gap-4 items-center\" : \"grid gap-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A single selectable radio control; pair it with a label for accessible option text. */\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        // Keep the visible control at 16px while expanding the click/tap target to 24px.\n        // This follows the repo's hit-area pattern (negative inset pseudo-element)\n        // so surrounding layout stays unchanged.\n        // Dot color rides on currentColor: the checked dot is the inverted fill,\n        // flipping to the danger color under aria-invalid (Figma radio spec).\n        \"relative aspect-square size-4 shrink-0 rounded-full border border-secondary-border bg-input-bg text-primary-invert-bg transition-[color,box-shadow] outline-none after:absolute after:-inset-1 after:rounded-full after:content-[''] focus-visible:ring-3 focus-visible:ring-focus data-[state=checked]:border-selected-border disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger-border aria-invalid:ring-focus-error aria-invalid:text-danger-txt\",\n        className,\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"relative flex items-center justify-center\"\n      >\n        <Icon\n          as={CircleIcon}\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current stroke-current\"\n        />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  );\n}\n\n/** A card-style radio option with a bordered surface, title, and description that highlights when checked. */\nfunction RichRadioItem({\n  className,\n  value,\n  title,\n  description,\n  flipped = false,\n  id,\n  ...props\n}: Omit<React.ComponentProps<typeof RadioGroupPrimitive.Item>, \"children\"> & {\n  /** Value submitted when this option is selected. */\n  value: string;\n  /** Bold heading shown at the top of the card. */\n  title?: React.ReactNode;\n  /** Secondary muted text shown beneath the title. */\n  description?: React.ReactNode;\n  /** Place the radio control on the trailing edge instead of the leading edge. */\n  flipped?: boolean;\n}) {\n  const generatedId = useId();\n  const itemId = id ?? generatedId;\n  return (\n    <label\n      data-slot=\"rich-radio-item\"\n      htmlFor={itemId}\n      className={cn(\n        \"flex cursor-pointer items-start gap-3 rounded-10 border border-primary-border bg-muted-bg p-3 text-primary-txt transition-colors has-[[data-state=checked]]:border-selected-border has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50\",\n        flipped ? \"flex-row-reverse\" : \"flex-row\",\n        className,\n      )}\n    >\n      <RadioGroupItem\n        data-slot=\"rich-radio-item-control\"\n        id={itemId}\n        value={value}\n        className=\"mt-0.75\"\n        {...props}\n      />\n      <span data-slot=\"rich-radio-item-content\" className=\"flex flex-col gap-1.5\">\n        {title != null && (\n          <span data-slot=\"rich-radio-item-title\" className=\"text-sm leading-5\">\n            {title}\n          </span>\n        )}\n        {description != null && (\n          <span\n            data-slot=\"rich-radio-item-description\"\n            className=\"text-xs leading-4 text-muted-txt\"\n          >\n            {description}\n          </span>\n        )}\n      </span>\n    </label>\n  );\n}\n\nexport { RadioGroup, RadioGroupItem, RichRadioItem };\n"],"mappings":";;;;;;;;AASA,SAAS,WAAW,EAClB,WACA,cAAc,YACd,GAAG,SAIF;CACD,OACE,oBAACA,aAAoB,MAArB;EACE,aAAU;EACV,oBAAkB;EACL;EACb,WAAW,GACT,gBAAgB,eAAe,+CAA+C,cAC9E,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,eAAe,EACtB,WACA,GAAG,SACqD;CACxD,OACE,oBAACA,aAAoB,MAArB;EACE,aAAU;EACV,WAAW,GAMT,+cACA,SACF;EACA,GAAI;YAEJ,oBAACA,aAAoB,WAArB;GACE,aAAU;GACV,WAAU;aAEV,oBAAC,MAAD;IACE,IAAI;IACJ,WAAU;GACX,CAAA;EAC4B,CAAA;CACP,CAAA;AAE9B;;AAGA,SAAS,cAAc,EACrB,WACA,OACA,OACA,aACA,UAAU,OACV,IACA,GAAG,SAUF;CACD,MAAM,cAAc,MAAM;CAC1B,MAAM,SAAS,MAAM;CACrB,OACE,qBAAC,SAAD;EACE,aAAU;EACV,SAAS;EACT,WAAW,GACT,oPACA,UAAU,qBAAqB,YAC/B,SACF;YAPF,CASE,oBAAC,gBAAD;GACE,aAAU;GACV,IAAI;GACG;GACP,WAAU;GACV,GAAI;EACL,CAAA,GACD,qBAAC,QAAD;GAAM,aAAU;GAA0B,WAAU;aAApD,CACG,SAAS,QACR,oBAAC,QAAD;IAAM,aAAU;IAAwB,WAAU;cAC/C;GACG,CAAA,GAEP,eAAe,QACd,oBAAC,QAAD;IACE,aAAU;IACV,WAAU;cAET;GACG,CAAA,CAEJ;IACD;;AAEX"}

package/dist/primitives/Resizable/index.d.cts

@@ -1,2 +1,2 @@
-import { n as ResizablePanel, r as ResizablePanelGroup, t as ResizableHandle } from "../../index48.cjs";
+import { n as ResizablePanel, r as ResizablePanelGroup, t as ResizableHandle } from "../../index53.cjs";
 export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

package/dist/primitives/Resizable/index.d.ts

@@ -1,2 +1,2 @@
-import { n as ResizablePanel, r as ResizablePanelGroup, t as ResizableHandle } from "../../index48.js";
+import { n as ResizablePanel, r as ResizablePanelGroup, t as ResizableHandle } from "../../index53.js";
 export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

package/dist/primitives/ScrollArea/index.d.cts

@@ -1,2 +1,2 @@
-import { n as ScrollBar, t as ScrollArea } from "../../index49.cjs";
+import { n as ScrollBar, t as ScrollArea } from "../../index54.cjs";
 export { ScrollArea, ScrollBar };

package/dist/primitives/ScrollArea/index.d.ts

@@ -1,2 +1,2 @@
-import { n as ScrollBar, t as ScrollArea } from "../../index49.js";
+import { n as ScrollBar, t as ScrollArea } from "../../index54.js";
 export { ScrollArea, ScrollBar };

package/dist/primitives/Select/index.d.cts

@@ -1,2 +1,2 @@
-import { a as SelectLabel, c as SelectSeparator, i as SelectItem, l as SelectTrigger, n as SelectContent, o as SelectScrollDownButton, r as SelectGroup, s as SelectScrollUpButton, t as Select, u as SelectValue } from "../../index50.cjs";
+import { a as SelectLabel, c as SelectSeparator, i as SelectItem, l as SelectTrigger, n as SelectContent, o as SelectScrollDownButton, r as SelectGroup, s as SelectScrollUpButton, t as Select, u as SelectValue } from "../../index55.cjs";
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };

package/dist/primitives/Select/index.d.ts

@@ -1,2 +1,2 @@
-import { a as SelectLabel, c as SelectSeparator, i as SelectItem, l as SelectTrigger, n as SelectContent, o as SelectScrollDownButton, r as SelectGroup, s as SelectScrollUpButton, t as Select, u as SelectValue } from "../../index50.js";
+import { a as SelectLabel, c as SelectSeparator, i as SelectItem, l as SelectTrigger, n as SelectContent, o as SelectScrollDownButton, r as SelectGroup, s as SelectScrollUpButton, t as Select, u as SelectValue } from "../../index55.js";
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };