@psnext/design-system 2.3.0 → 2.5.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.cjs

@@ -1,8 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
+const require_Icon = require("../../Icon.cjs");
 const require_primitives_Button_index = require("../Button/index.cjs");
-let lucide_react = require("lucide-react");
 let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
 //#region src/primitives/Pagination/Pagination.tsx
 /** Accessible pagination navigation landmark that wraps the list of page links. */
 function Pagination({ className, ...props }) {
@@ -69,7 +70,10 @@ function PaginationEllipsis({ className, ...props }) {
 		"data-slot": "pagination-ellipsis",
 		className: require_cn.cn("flex size-9 items-center justify-center", className),
 		...props,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.MoreHorizontalIcon, { className: "size-4" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+			as: lucide_react.MoreHorizontalIcon,
+			className: "size-4"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "sr-only",
 			children: "More pages"
 		})]

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["cn","buttonVariants","MoreHorizontalIcon"],"sources":["../../../src/primitives/Pagination/Pagination.tsx"],"sourcesContent":["import { MoreHorizontalIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { type Button, buttonVariants } from \"@/primitives/Button\";\nimport { cn } from \"@/utils\";\n\n/** Accessible pagination navigation landmark that wraps the list of page links. */\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\"mx-auto flex w-full justify-center\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Horizontal list container holding the individual pagination items. */\nfunction PaginationContent({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"flex flex-row items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Single list item wrapper for a pagination link, ellipsis, or control. */\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />;\n}\n\ntype PaginationLinkProps = {\n  /** Marks this link as the current page; renders the outline (selected) style and sets `aria-current`. */\n  isActive?: boolean;\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">;\n\n/** Clickable page link styled with the Button variants; pass `isActive` for the current page. */\nfunction PaginationLink({ className, isActive, size = \"icon\", ...props }: PaginationLinkProps) {\n  return (\n    <a\n      aria-current={isActive ? \"page\" : undefined}\n      data-slot=\"pagination-link\"\n      data-active={isActive}\n      className={cn(\n        buttonVariants({\n          variant: isActive ? \"outline\" : \"ghost\",\n          size,\n        }),\n        // Pagination buttons are 8px-rounded squares (Figma 294:233630), not pills.\n        \"rounded-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** \"Previous\" control: a pagination link with a leading chevron and accessible label. */\nfunction PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"px-2.5\", className)}\n      {...props}\n    >\n      Previous\n    </PaginationLink>\n  );\n}\n\n/** \"Next\" control: a pagination link with a trailing chevron and accessible label. */\nfunction PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"px-2.5\", className)}\n      {...props}\n    >\n      Next\n    </PaginationLink>\n  );\n}\n\n/** Non-interactive ellipsis indicating skipped page ranges. */\nfunction PaginationEllipsis({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\"flex size-9 items-center justify-center\", className)}\n      {...props}\n    >\n      <MoreHorizontalIcon className=\"size-4\" />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  );\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationLink,\n  PaginationItem,\n  PaginationPrevious,\n  PaginationNext,\n  PaginationEllipsis,\n};\n"],"mappings":";;;;;;;AAOA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,MAAK;EACL,cAAW;EACX,aAAU;EACV,WAAWA,WAAAA,GAAG,sCAAsC,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAqC;CAC9E,OACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,eAAe,EAAE,GAAG,SAAqC;CAChE,OAAO,iBAAA,GAAA,kBAAA,KAAC,MAAD;EAAI,aAAU;EAAkB,GAAI;CAAQ,CAAA;AACrD;;AASA,SAAS,eAAe,EAAE,WAAW,UAAU,OAAO,QAAQ,GAAG,SAA8B;CAC7F,OACE,iBAAA,GAAA,kBAAA,KAAC,KAAD;EACE,gBAAc,WAAW,SAAS,KAAA;EAClC,aAAU;EACV,eAAa;EACb,WAAWA,WAAAA,GACTC,gCAAAA,eAAe;GACb,SAAS,WAAW,YAAY;GAChC;EACF,CAAC,GAED,aACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAsD;CAChG,OACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EACE,cAAW;EACX,MAAK;EACL,WAAWD,WAAAA,GAAG,UAAU,SAAS;EACjC,GAAI;YACL;CAEe,CAAA;AAEpB;;AAGA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAsD;CAC5F,OACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EACE,cAAW;EACX,MAAK;EACL,WAAWA,WAAAA,GAAG,UAAU,SAAS;EACjC,GAAI;YACL;CAEe,CAAA;AAEpB;;AAGA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAuC;CACjF,OACE,iBAAA,GAAA,kBAAA,MAAC,QAAD;EACE,eAAA;EACA,aAAU;EACV,WAAWA,WAAAA,GAAG,2CAA2C,SAAS;EAClE,GAAI;YAJN,CAME,iBAAA,GAAA,kBAAA,KAACE,aAAAA,oBAAD,EAAoB,WAAU,SAAU,CAAA,GACxC,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAAU;EAAgB,CAAA,CACtC;;AAEV"}
+{"version":3,"file":"index.cjs","names":["cn","buttonVariants","Icon","MoreHorizontalIcon"],"sources":["../../../src/primitives/Pagination/Pagination.tsx"],"sourcesContent":["import { Icon } from \"@/primitives/Icon\";\nimport { MoreHorizontalIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { type Button, buttonVariants } from \"@/primitives/Button\";\nimport { cn } from \"@/utils\";\n\n/** Accessible pagination navigation landmark that wraps the list of page links. */\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\"mx-auto flex w-full justify-center\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Horizontal list container holding the individual pagination items. */\nfunction PaginationContent({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"flex flex-row items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Single list item wrapper for a pagination link, ellipsis, or control. */\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />;\n}\n\ntype PaginationLinkProps = {\n  /** Marks this link as the current page; renders the outline (selected) style and sets `aria-current`. */\n  isActive?: boolean;\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">;\n\n/** Clickable page link styled with the Button variants; pass `isActive` for the current page. */\nfunction PaginationLink({ className, isActive, size = \"icon\", ...props }: PaginationLinkProps) {\n  return (\n    <a\n      aria-current={isActive ? \"page\" : undefined}\n      data-slot=\"pagination-link\"\n      data-active={isActive}\n      className={cn(\n        buttonVariants({\n          variant: isActive ? \"outline\" : \"ghost\",\n          size,\n        }),\n        // Pagination buttons are 8px-rounded squares (Figma 294:233630), not pills.\n        \"rounded-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** \"Previous\" control: a pagination link with a leading chevron and accessible label. */\nfunction PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"px-2.5\", className)}\n      {...props}\n    >\n      Previous\n    </PaginationLink>\n  );\n}\n\n/** \"Next\" control: a pagination link with a trailing chevron and accessible label. */\nfunction PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"px-2.5\", className)}\n      {...props}\n    >\n      Next\n    </PaginationLink>\n  );\n}\n\n/** Non-interactive ellipsis indicating skipped page ranges. */\nfunction PaginationEllipsis({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\"flex size-9 items-center justify-center\", className)}\n      {...props}\n    >\n      <Icon as={MoreHorizontalIcon} className=\"size-4\" />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  );\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationLink,\n  PaginationItem,\n  PaginationPrevious,\n  PaginationNext,\n  PaginationEllipsis,\n};\n"],"mappings":";;;;;;;;AAQA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,MAAK;EACL,cAAW;EACX,aAAU;EACV,WAAWA,WAAAA,GAAG,sCAAsC,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAqC;CAC9E,OACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,eAAe,EAAE,GAAG,SAAqC;CAChE,OAAO,iBAAA,GAAA,kBAAA,KAAC,MAAD;EAAI,aAAU;EAAkB,GAAI;CAAQ,CAAA;AACrD;;AASA,SAAS,eAAe,EAAE,WAAW,UAAU,OAAO,QAAQ,GAAG,SAA8B;CAC7F,OACE,iBAAA,GAAA,kBAAA,KAAC,KAAD;EACE,gBAAc,WAAW,SAAS,KAAA;EAClC,aAAU;EACV,eAAa;EACb,WAAWA,WAAAA,GACTC,gCAAAA,eAAe;GACb,SAAS,WAAW,YAAY;GAChC;EACF,CAAC,GAED,aACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAsD;CAChG,OACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EACE,cAAW;EACX,MAAK;EACL,WAAWD,WAAAA,GAAG,UAAU,SAAS;EACjC,GAAI;YACL;CAEe,CAAA;AAEpB;;AAGA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAsD;CAC5F,OACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EACE,cAAW;EACX,MAAK;EACL,WAAWA,WAAAA,GAAG,UAAU,SAAS;EACjC,GAAI;YACL;CAEe,CAAA;AAEpB;;AAGA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAuC;CACjF,OACE,iBAAA,GAAA,kBAAA,MAAC,QAAD;EACE,eAAA;EACA,aAAU;EACV,WAAWA,WAAAA,GAAG,2CAA2C,SAAS;EAClE,GAAI;YAJN,CAME,iBAAA,GAAA,kBAAA,KAACE,aAAAA,MAAD;GAAM,IAAIC,aAAAA;GAAoB,WAAU;EAAU,CAAA,GAClD,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAAU;EAAgB,CAAA,CACtC;;AAEV"}

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 "../../index49.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 "../../index49.js";
 export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };

package/dist/primitives/Pagination/index.js

@@ -1,7 +1,8 @@
 import { t as cn } from "../../cn.js";
+import { t as Icon } from "../../Icon.js";
 import { buttonVariants } from "../Button/index.js";
-import { MoreHorizontalIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { MoreHorizontalIcon } from "lucide-react";
 //#region src/primitives/Pagination/Pagination.tsx
 /** Accessible pagination navigation landmark that wraps the list of page links. */
 function Pagination({ className, ...props }) {
@@ -68,7 +69,10 @@ function PaginationEllipsis({ className, ...props }) {
 		"data-slot": "pagination-ellipsis",
 		className: cn("flex size-9 items-center justify-center", className),
 		...props,
-		children: [/* @__PURE__ */ jsx(MoreHorizontalIcon, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+		children: [/* @__PURE__ */ jsx(Icon, {
+			as: MoreHorizontalIcon,
+			className: "size-4"
+		}), /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
 			children: "More pages"
 		})]

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Pagination/Pagination.tsx"],"sourcesContent":["import { MoreHorizontalIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { type Button, buttonVariants } from \"@/primitives/Button\";\nimport { cn } from \"@/utils\";\n\n/** Accessible pagination navigation landmark that wraps the list of page links. */\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\"mx-auto flex w-full justify-center\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Horizontal list container holding the individual pagination items. */\nfunction PaginationContent({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"flex flex-row items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Single list item wrapper for a pagination link, ellipsis, or control. */\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />;\n}\n\ntype PaginationLinkProps = {\n  /** Marks this link as the current page; renders the outline (selected) style and sets `aria-current`. */\n  isActive?: boolean;\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">;\n\n/** Clickable page link styled with the Button variants; pass `isActive` for the current page. */\nfunction PaginationLink({ className, isActive, size = \"icon\", ...props }: PaginationLinkProps) {\n  return (\n    <a\n      aria-current={isActive ? \"page\" : undefined}\n      data-slot=\"pagination-link\"\n      data-active={isActive}\n      className={cn(\n        buttonVariants({\n          variant: isActive ? \"outline\" : \"ghost\",\n          size,\n        }),\n        // Pagination buttons are 8px-rounded squares (Figma 294:233630), not pills.\n        \"rounded-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** \"Previous\" control: a pagination link with a leading chevron and accessible label. */\nfunction PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"px-2.5\", className)}\n      {...props}\n    >\n      Previous\n    </PaginationLink>\n  );\n}\n\n/** \"Next\" control: a pagination link with a trailing chevron and accessible label. */\nfunction PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"px-2.5\", className)}\n      {...props}\n    >\n      Next\n    </PaginationLink>\n  );\n}\n\n/** Non-interactive ellipsis indicating skipped page ranges. */\nfunction PaginationEllipsis({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\"flex size-9 items-center justify-center\", className)}\n      {...props}\n    >\n      <MoreHorizontalIcon className=\"size-4\" />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  );\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationLink,\n  PaginationItem,\n  PaginationPrevious,\n  PaginationNext,\n  PaginationEllipsis,\n};\n"],"mappings":";;;;;;AAOA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,MAAK;EACL,cAAW;EACX,aAAU;EACV,WAAW,GAAG,sCAAsC,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAqC;CAC9E,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,eAAe,EAAE,GAAG,SAAqC;CAChE,OAAO,oBAAC,MAAD;EAAI,aAAU;EAAkB,GAAI;CAAQ,CAAA;AACrD;;AASA,SAAS,eAAe,EAAE,WAAW,UAAU,OAAO,QAAQ,GAAG,SAA8B;CAC7F,OACE,oBAAC,KAAD;EACE,gBAAc,WAAW,SAAS,KAAA;EAClC,aAAU;EACV,eAAa;EACb,WAAW,GACT,eAAe;GACb,SAAS,WAAW,YAAY;GAChC;EACF,CAAC,GAED,aACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAsD;CAChG,OACE,oBAAC,gBAAD;EACE,cAAW;EACX,MAAK;EACL,WAAW,GAAG,UAAU,SAAS;EACjC,GAAI;YACL;CAEe,CAAA;AAEpB;;AAGA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAsD;CAC5F,OACE,oBAAC,gBAAD;EACE,cAAW;EACX,MAAK;EACL,WAAW,GAAG,UAAU,SAAS;EACjC,GAAI;YACL;CAEe,CAAA;AAEpB;;AAGA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAuC;CACjF,OACE,qBAAC,QAAD;EACE,eAAA;EACA,aAAU;EACV,WAAW,GAAG,2CAA2C,SAAS;EAClE,GAAI;YAJN,CAME,oBAAC,oBAAD,EAAoB,WAAU,SAAU,CAAA,GACxC,oBAAC,QAAD;GAAM,WAAU;aAAU;EAAgB,CAAA,CACtC;;AAEV"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Pagination/Pagination.tsx"],"sourcesContent":["import { Icon } from \"@/primitives/Icon\";\nimport { MoreHorizontalIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { type Button, buttonVariants } from \"@/primitives/Button\";\nimport { cn } from \"@/utils\";\n\n/** Accessible pagination navigation landmark that wraps the list of page links. */\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\"mx-auto flex w-full justify-center\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Horizontal list container holding the individual pagination items. */\nfunction PaginationContent({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"flex flex-row items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Single list item wrapper for a pagination link, ellipsis, or control. */\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />;\n}\n\ntype PaginationLinkProps = {\n  /** Marks this link as the current page; renders the outline (selected) style and sets `aria-current`. */\n  isActive?: boolean;\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">;\n\n/** Clickable page link styled with the Button variants; pass `isActive` for the current page. */\nfunction PaginationLink({ className, isActive, size = \"icon\", ...props }: PaginationLinkProps) {\n  return (\n    <a\n      aria-current={isActive ? \"page\" : undefined}\n      data-slot=\"pagination-link\"\n      data-active={isActive}\n      className={cn(\n        buttonVariants({\n          variant: isActive ? \"outline\" : \"ghost\",\n          size,\n        }),\n        // Pagination buttons are 8px-rounded squares (Figma 294:233630), not pills.\n        \"rounded-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** \"Previous\" control: a pagination link with a leading chevron and accessible label. */\nfunction PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"px-2.5\", className)}\n      {...props}\n    >\n      Previous\n    </PaginationLink>\n  );\n}\n\n/** \"Next\" control: a pagination link with a trailing chevron and accessible label. */\nfunction PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"px-2.5\", className)}\n      {...props}\n    >\n      Next\n    </PaginationLink>\n  );\n}\n\n/** Non-interactive ellipsis indicating skipped page ranges. */\nfunction PaginationEllipsis({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\"flex size-9 items-center justify-center\", className)}\n      {...props}\n    >\n      <Icon as={MoreHorizontalIcon} className=\"size-4\" />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  );\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationLink,\n  PaginationItem,\n  PaginationPrevious,\n  PaginationNext,\n  PaginationEllipsis,\n};\n"],"mappings":";;;;;;;AAQA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,MAAK;EACL,cAAW;EACX,aAAU;EACV,WAAW,GAAG,sCAAsC,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAqC;CAC9E,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,eAAe,EAAE,GAAG,SAAqC;CAChE,OAAO,oBAAC,MAAD;EAAI,aAAU;EAAkB,GAAI;CAAQ,CAAA;AACrD;;AASA,SAAS,eAAe,EAAE,WAAW,UAAU,OAAO,QAAQ,GAAG,SAA8B;CAC7F,OACE,oBAAC,KAAD;EACE,gBAAc,WAAW,SAAS,KAAA;EAClC,aAAU;EACV,eAAa;EACb,WAAW,GACT,eAAe;GACb,SAAS,WAAW,YAAY;GAChC;EACF,CAAC,GAED,aACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAsD;CAChG,OACE,oBAAC,gBAAD;EACE,cAAW;EACX,MAAK;EACL,WAAW,GAAG,UAAU,SAAS;EACjC,GAAI;YACL;CAEe,CAAA;AAEpB;;AAGA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAsD;CAC5F,OACE,oBAAC,gBAAD;EACE,cAAW;EACX,MAAK;EACL,WAAW,GAAG,UAAU,SAAS;EACjC,GAAI;YACL;CAEe,CAAA;AAEpB;;AAGA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAuC;CACjF,OACE,qBAAC,QAAD;EACE,eAAA;EACA,aAAU;EACV,WAAW,GAAG,2CAA2C,SAAS;EAClE,GAAI;YAJN,CAME,oBAAC,MAAD;GAAM,IAAI;GAAoB,WAAU;EAAU,CAAA,GAClD,oBAAC,QAAD;GAAM,WAAU;aAAU;EAAgB,CAAA,CACtC;;AAEV"}

package/dist/primitives/Popover/index.cjs

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
-let radix_ui = require("radix-ui");
 let react_jsx_runtime = require("react/jsx-runtime");
+let radix_ui = require("radix-ui");
 //#region src/primitives/Popover/Popover.tsx
 /** Root of the popover: holds open state and coordinates the trigger and content. */
 function Popover({ ...props }) {

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 "../../index45.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 "../../index45.js";
 export { Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger };

package/dist/primitives/Popover/index.js

@@ -1,6 +1,6 @@
 import { t as cn } from "../../cn.js";
-import { Popover as Popover$1 } from "radix-ui";
 import { jsx } from "react/jsx-runtime";
+import { Popover as Popover$1 } from "radix-ui";
 //#region src/primitives/Popover/Popover.tsx
 /** Root of the popover: holds open state and coordinates the trigger and content. */
 function Popover({ ...props }) {

package/dist/primitives/Progress/index.cjs

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
-let radix_ui = require("radix-ui");
 let react_jsx_runtime = require("react/jsx-runtime");
+let radix_ui = require("radix-ui");
 //#region src/primitives/Progress/Progress.tsx
 const progressIndicatorVariants = {
 	default: "bg-primary-invert-bg",

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

@@ -1,2 +1,2 @@
-import { t as Progress } from "../../index46.cjs";
+import { t as Progress } from "../../index50.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 "../../index50.js";
 export { Progress };

package/dist/primitives/Progress/index.js

@@ -1,6 +1,6 @@
 import { t as cn } from "../../cn.js";
-import { Progress as Progress$1 } from "radix-ui";
 import { jsx } from "react/jsx-runtime";
+import { Progress as Progress$1 } from "radix-ui";
 //#region src/primitives/Progress/Progress.tsx
 const progressIndicatorVariants = {
 	default: "bg-primary-invert-bg",

package/dist/primitives/RadioGroup/index.cjs

@@ -1,9 +1,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
+const require_Icon = require("../../Icon.cjs");
 let react = require("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");
 //#region src/primitives/RadioGroup/RadioGroup.tsx
 /** Root of a set of mutually-exclusive radio options; lays them out vertically or horizontally. */
 function RadioGroup({ className, orientation = "vertical", ...props }) {
@@ -19,12 +20,15 @@ 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",
 			className: "relative flex items-center justify-center",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CircleIcon, { className: "absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current stroke-current" })
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+				as: lucide_react.CircleIcon,
+				className: "absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current stroke-current"
+			})
 		})
 	});
 }