@stackframe/dashboard-ui-components 2.8.76

package/dist/esm/components/cursor-blast-effect.js

@@ -0,0 +1,241 @@
+"use client";
+
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+//#region src/components/cursor-blast-effect.tsx
+const DEFAULT_BLAST_LIFETIME_MS = 720;
+const DEFAULT_MAX_ACTIVE_BLASTS = 18;
+/** Minimum rapid clicks in the time window to count as a rage click */
+const DEFAULT_RAGE_CLICK_THRESHOLD = 3;
+/** Time window (ms) in which clicks must occur to be considered rage clicking */
+const DEFAULT_RAGE_CLICK_WINDOW_MS = 600;
+/** Max distance (px) between clicks to still count as same-spot rage clicking */
+const DEFAULT_RAGE_CLICK_RADIUS_PX = 60;
+function CursorBlastEffect({ blastLifetimeMs = DEFAULT_BLAST_LIFETIME_MS, maxActiveBlasts = DEFAULT_MAX_ACTIVE_BLASTS, rageClickThreshold = DEFAULT_RAGE_CLICK_THRESHOLD, rageClickWindowMs = DEFAULT_RAGE_CLICK_WINDOW_MS, rageClickRadiusPx = DEFAULT_RAGE_CLICK_RADIUS_PX, containerRef } = {}) {
+	const [blasts, setBlasts] = useState([]);
+	const [mounted, setMounted] = useState(false);
+	const idCounterRef = useRef(0);
+	const timeoutIdsRef = useRef(/* @__PURE__ */ new Map());
+	const recentClicksRef = useRef([]);
+	const configRef = useRef({
+		blastLifetimeMs,
+		maxActiveBlasts,
+		rageClickThreshold,
+		rageClickWindowMs,
+		rageClickRadiusPx
+	});
+	configRef.current = {
+		blastLifetimeMs,
+		maxActiveBlasts,
+		rageClickThreshold,
+		rageClickWindowMs,
+		rageClickRadiusPx
+	};
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+	useEffect(() => {
+		const removeBlast = (id) => {
+			setBlasts((prev) => prev.filter((blast) => blast.id !== id));
+			const timeoutId = timeoutIdsRef.current.get(id);
+			if (timeoutId !== void 0) {
+				window.clearTimeout(timeoutId);
+				timeoutIdsRef.current.delete(id);
+			}
+		};
+		const spawnBlast = (x, y) => {
+			const cfg = configRef.current;
+			const nextId = idCounterRef.current;
+			idCounterRef.current += 1;
+			const nextBlast = {
+				id: nextId,
+				x,
+				y,
+				size: 44 + Math.random() * 20,
+				hue: 185 + Math.random() * 35
+			};
+			setBlasts((prev) => {
+				const next = [...prev, nextBlast];
+				if (next.length <= cfg.maxActiveBlasts) return next;
+				return next.slice(next.length - cfg.maxActiveBlasts);
+			});
+			const timeoutId = window.setTimeout(() => removeBlast(nextId), cfg.blastLifetimeMs);
+			timeoutIdsRef.current.set(nextId, timeoutId);
+		};
+		const onClick = (event) => {
+			const cfg = configRef.current;
+			const now = performance.now();
+			let x;
+			let y;
+			if (containerRef?.current) {
+				const rect = containerRef.current.getBoundingClientRect();
+				x = event.clientX - rect.left;
+				y = event.clientY - rect.top;
+			} else {
+				x = event.clientX;
+				y = event.clientY;
+			}
+			recentClicksRef.current = recentClicksRef.current.filter((click) => now - click.time < cfg.rageClickWindowMs);
+			recentClicksRef.current.push({
+				time: now,
+				x,
+				y
+			});
+			if (recentClicksRef.current.filter((click) => {
+				const dx = click.x - x;
+				const dy = click.y - y;
+				return Math.sqrt(dx * dx + dy * dy) <= cfg.rageClickRadiusPx;
+			}).length >= cfg.rageClickThreshold) spawnBlast(x, y);
+		};
+		const target = containerRef?.current ?? window;
+		const timeoutIds = timeoutIdsRef.current;
+		target.addEventListener("click", onClick);
+		return () => {
+			target.removeEventListener("click", onClick);
+			for (const timeoutId of timeoutIds.values()) window.clearTimeout(timeoutId);
+			timeoutIds.clear();
+		};
+	}, [containerRef]);
+	if (!mounted) return null;
+	const blastElements = /* @__PURE__ */ jsxs(Fragment, { children: [blasts.map((blast) => /* @__PURE__ */ jsxs("div", {
+		style: {
+			position: "absolute",
+			left: blast.x,
+			top: blast.y,
+			width: blast.size,
+			height: blast.size,
+			transform: "translate(-50%, -50%)",
+			willChange: "transform, opacity",
+			filter: `hue-rotate(${blast.hue}deg)`
+		},
+		children: [
+			/* @__PURE__ */ jsx("span", { className: "cursor-blast-ring" }),
+			/* @__PURE__ */ jsx("span", { className: "cursor-blast-core" }),
+			Array.from({ length: 10 }).map((_, index) => {
+				return /* @__PURE__ */ jsx("span", {
+					className: "cursor-blast-shard-wrap",
+					style: {
+						transform: `translate(-50%, -50%) rotate(${360 / 10 * index}deg)`,
+						animationDelay: `${index * 16}ms`
+					},
+					children: /* @__PURE__ */ jsx("span", { className: "cursor-blast-shard" })
+				}, `${blast.id}-${index}`);
+			})
+		]
+	}, blast.id)), /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: `
+        .cursor-blast-ring {
+          position: absolute;
+          inset: 0;
+          border-radius: 999px;
+          border: 2px solid hsl(197 98% 67% / 0.9);
+          box-shadow:
+            0 0 22px hsl(191 100% 72% / 0.6),
+            inset 0 0 12px hsl(204 100% 77% / 0.65);
+          animation: blast-ring 560ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+        }
+
+        .cursor-blast-core {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          width: 10px;
+          height: 10px;
+          border-radius: 999px;
+          transform: translate(-50%, -50%);
+          background: hsl(196 100% 85%);
+          box-shadow:
+            0 0 26px hsl(193 100% 72% / 0.9),
+            0 0 10px hsl(201 100% 85% / 0.9);
+          animation: blast-core 420ms ease-out forwards;
+        }
+
+        .cursor-blast-shard-wrap {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          width: 0;
+          height: 0;
+        }
+
+        .cursor-blast-shard {
+          position: absolute;
+          left: 0;
+          top: -1.5px;
+          width: 12px;
+          height: 3px;
+          border-radius: 999px;
+          background: linear-gradient(90deg, hsl(190 100% 84%), hsl(197 98% 67%));
+          box-shadow: 0 0 12px hsl(195 100% 70% / 0.8);
+          animation: blast-shard 680ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
+        }
+
+        @keyframes blast-ring {
+          0% {
+            transform: scale(0.2);
+            opacity: 0.95;
+          }
+          100% {
+            transform: scale(1.6);
+            opacity: 0;
+          }
+        }
+
+        @keyframes blast-core {
+          0% {
+            transform: translate(-50%, -50%) scale(0.5);
+            opacity: 1;
+          }
+          100% {
+            transform: translate(-50%, -50%) scale(2.2);
+            opacity: 0;
+          }
+        }
+
+        @keyframes blast-shard {
+          0% {
+            transform: translateX(0) scaleX(0.7);
+            opacity: 1;
+          }
+          100% {
+            transform: translateX(46px) scaleX(1.1);
+            opacity: 0;
+          }
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+          .cursor-blast-ring,
+          .cursor-blast-core,
+          .cursor-blast-shard {
+            animation-duration: 1ms;
+          }
+        }
+      ` } })] });
+	if (containerRef) return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": true,
+		style: {
+			position: "absolute",
+			inset: 0,
+			zIndex: 2147483647,
+			pointerEvents: "none",
+			overflow: "hidden",
+			borderRadius: "inherit"
+		},
+		children: blastElements
+	});
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		"aria-hidden": true,
+		style: {
+			position: "fixed",
+			inset: 0,
+			zIndex: 2147483647,
+			pointerEvents: "none"
+		},
+		children: blastElements
+	}), document.body);
+}
+
+//#endregion
+export { CursorBlastEffect };
+//# sourceMappingURL=cursor-blast-effect.js.map

package/dist/esm/components/cursor-blast-effect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cursor-blast-effect.js","names":[],"sources":["../../../src/components/cursor-blast-effect.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\n\ntype Blast = {\n  id: number,\n  x: number,\n  y: number,\n  size: number,\n  hue: number,\n};\n\nconst DEFAULT_BLAST_LIFETIME_MS = 720;\nconst DEFAULT_MAX_ACTIVE_BLASTS = 18;\n\n/** Minimum rapid clicks in the time window to count as a rage click */\nconst DEFAULT_RAGE_CLICK_THRESHOLD = 3;\n/** Time window (ms) in which clicks must occur to be considered rage clicking */\nconst DEFAULT_RAGE_CLICK_WINDOW_MS = 600;\n/** Max distance (px) between clicks to still count as same-spot rage clicking */\nconst DEFAULT_RAGE_CLICK_RADIUS_PX = 60;\n\ntype RecentClick = {\n  time: number,\n  x: number,\n  y: number,\n};\n\nexport type CursorBlastEffectProps = {\n  /** Lifetime of each blast animation in ms. Default: 720 */\n  blastLifetimeMs?: number,\n  /** Maximum number of concurrent active blasts. Default: 18 */\n  maxActiveBlasts?: number,\n  /** Minimum rapid clicks in the time window to trigger a blast. Default: 3 */\n  rageClickThreshold?: number,\n  /** Time window (ms) for counting rage clicks. Default: 600 */\n  rageClickWindowMs?: number,\n  /** Max distance (px) between clicks to count as same-spot rage clicking. Default: 60 */\n  rageClickRadiusPx?: number,\n  /**\n   * When provided, the blast effect is scoped to this container element.\n   * Clicks are only detected within the container and blasts are positioned\n   * relative to the container rather than the viewport.\n   */\n  containerRef?: React.RefObject<HTMLElement | null>,\n};\n\nexport function CursorBlastEffect({\n  blastLifetimeMs = DEFAULT_BLAST_LIFETIME_MS,\n  maxActiveBlasts = DEFAULT_MAX_ACTIVE_BLASTS,\n  rageClickThreshold = DEFAULT_RAGE_CLICK_THRESHOLD,\n  rageClickWindowMs = DEFAULT_RAGE_CLICK_WINDOW_MS,\n  rageClickRadiusPx = DEFAULT_RAGE_CLICK_RADIUS_PX,\n  containerRef,\n}: CursorBlastEffectProps = {}) {\n  const [blasts, setBlasts] = useState<Blast[]>([]);\n  const [mounted, setMounted] = useState(false);\n  const idCounterRef = useRef(0);\n  const timeoutIdsRef = useRef<Map<number, number>>(new Map());\n  const recentClicksRef = useRef<RecentClick[]>([]);\n\n  // Store latest config in refs so the effect callback always reads current values\n  const configRef = useRef({\n    blastLifetimeMs,\n    maxActiveBlasts,\n    rageClickThreshold,\n    rageClickWindowMs,\n    rageClickRadiusPx,\n  });\n  configRef.current = {\n    blastLifetimeMs,\n    maxActiveBlasts,\n    rageClickThreshold,\n    rageClickWindowMs,\n    rageClickRadiusPx,\n  };\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  useEffect(() => {\n    const removeBlast = (id: number) => {\n      setBlasts((prev) => prev.filter((blast) => blast.id !== id));\n      const timeoutId = timeoutIdsRef.current.get(id);\n      if (timeoutId !== undefined) {\n        window.clearTimeout(timeoutId);\n        timeoutIdsRef.current.delete(id);\n      }\n    };\n\n    const spawnBlast = (x: number, y: number) => {\n      const cfg = configRef.current;\n      const nextId = idCounterRef.current;\n      idCounterRef.current += 1;\n\n      const nextBlast: Blast = {\n        id: nextId,\n        x,\n        y,\n        size: 44 + Math.random() * 20,\n        hue: 185 + Math.random() * 35,\n      };\n\n      setBlasts((prev) => {\n        const next = [...prev, nextBlast];\n        if (next.length <= cfg.maxActiveBlasts) {\n          return next;\n        }\n        return next.slice(next.length - cfg.maxActiveBlasts);\n      });\n\n      const timeoutId = window.setTimeout(() => removeBlast(nextId), cfg.blastLifetimeMs);\n      timeoutIdsRef.current.set(nextId, timeoutId);\n    };\n\n    const onClick = (event: MouseEvent) => {\n      const cfg = configRef.current;\n      const now = performance.now();\n\n      let x: number;\n      let y: number;\n\n      if (containerRef?.current) {\n        const rect = containerRef.current.getBoundingClientRect();\n        x = event.clientX - rect.left;\n        y = event.clientY - rect.top;\n      } else {\n        x = event.clientX;\n        y = event.clientY;\n      }\n\n      // Prune clicks outside the time window\n      recentClicksRef.current = recentClicksRef.current.filter(\n        (click) => now - click.time < cfg.rageClickWindowMs,\n      );\n\n      recentClicksRef.current.push({ time: now, x, y });\n\n      // Count how many recent clicks are within the radius of the current click\n      const nearbyCount = recentClicksRef.current.filter((click) => {\n        const dx = click.x - x;\n        const dy = click.y - y;\n        return Math.sqrt(dx * dx + dy * dy) <= cfg.rageClickRadiusPx;\n      }).length;\n\n      if (nearbyCount >= cfg.rageClickThreshold) {\n        spawnBlast(x, y);\n      }\n    };\n\n    const target = containerRef?.current ?? window;\n    const timeoutIds = timeoutIdsRef.current;\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion -- EventTarget union requires cast\n    (target as EventTarget).addEventListener(\"click\", onClick as EventListener);\n    return () => {\n      (target as EventTarget).removeEventListener(\"click\", onClick as EventListener);\n      for (const timeoutId of timeoutIds.values()) {\n        window.clearTimeout(timeoutId);\n      }\n      timeoutIds.clear();\n    };\n  }, [containerRef]);\n\n  if (!mounted) {\n    return null;\n  }\n\n  const blastElements = (\n    <>\n      {blasts.map((blast) => (\n        <div\n          key={blast.id}\n          style={{\n            position: \"absolute\",\n            left: blast.x,\n            top: blast.y,\n            width: blast.size,\n            height: blast.size,\n            transform: \"translate(-50%, -50%)\",\n            willChange: \"transform, opacity\",\n            filter: `hue-rotate(${blast.hue}deg)`,\n          }}\n        >\n          <span className=\"cursor-blast-ring\" />\n          <span className=\"cursor-blast-core\" />\n          {Array.from({ length: 10 }).map((_, index) => {\n            const angle = (360 / 10) * index;\n            return (\n              <span\n                key={`${blast.id}-${index}`}\n                className=\"cursor-blast-shard-wrap\"\n                style={{\n                  transform: `translate(-50%, -50%) rotate(${angle}deg)`,\n                  animationDelay: `${index * 16}ms`,\n                }}\n              >\n                <span className=\"cursor-blast-shard\" />\n              </span>\n            );\n          })}\n        </div>\n      ))}\n      <style dangerouslySetInnerHTML={{ __html: `\n        .cursor-blast-ring {\n          position: absolute;\n          inset: 0;\n          border-radius: 999px;\n          border: 2px solid hsl(197 98% 67% / 0.9);\n          box-shadow:\n            0 0 22px hsl(191 100% 72% / 0.6),\n            inset 0 0 12px hsl(204 100% 77% / 0.65);\n          animation: blast-ring 560ms cubic-bezier(0.16, 1, 0.3, 1) forwards;\n        }\n\n        .cursor-blast-core {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          width: 10px;\n          height: 10px;\n          border-radius: 999px;\n          transform: translate(-50%, -50%);\n          background: hsl(196 100% 85%);\n          box-shadow:\n            0 0 26px hsl(193 100% 72% / 0.9),\n            0 0 10px hsl(201 100% 85% / 0.9);\n          animation: blast-core 420ms ease-out forwards;\n        }\n\n        .cursor-blast-shard-wrap {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          width: 0;\n          height: 0;\n        }\n\n        .cursor-blast-shard {\n          position: absolute;\n          left: 0;\n          top: -1.5px;\n          width: 12px;\n          height: 3px;\n          border-radius: 999px;\n          background: linear-gradient(90deg, hsl(190 100% 84%), hsl(197 98% 67%));\n          box-shadow: 0 0 12px hsl(195 100% 70% / 0.8);\n          animation: blast-shard 680ms cubic-bezier(0.22, 1, 0.36, 1) forwards;\n        }\n\n        @keyframes blast-ring {\n          0% {\n            transform: scale(0.2);\n            opacity: 0.95;\n          }\n          100% {\n            transform: scale(1.6);\n            opacity: 0;\n          }\n        }\n\n        @keyframes blast-core {\n          0% {\n            transform: translate(-50%, -50%) scale(0.5);\n            opacity: 1;\n          }\n          100% {\n            transform: translate(-50%, -50%) scale(2.2);\n            opacity: 0;\n          }\n        }\n\n        @keyframes blast-shard {\n          0% {\n            transform: translateX(0) scaleX(0.7);\n            opacity: 1;\n          }\n          100% {\n            transform: translateX(46px) scaleX(1.1);\n            opacity: 0;\n          }\n        }\n\n        @media (prefers-reduced-motion: reduce) {\n          .cursor-blast-ring,\n          .cursor-blast-core,\n          .cursor-blast-shard {\n            animation-duration: 1ms;\n          }\n        }\n      ` }} />\n    </>\n  );\n\n  // When scoped to a container, render inline (the container must have position: relative)\n  if (containerRef) {\n    return (\n      <div\n        aria-hidden\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          zIndex: 2147483647,\n          pointerEvents: \"none\",\n          overflow: \"hidden\",\n          borderRadius: \"inherit\",\n        }}\n      >\n        {blastElements}\n      </div>\n    );\n  }\n\n  // Default: portal to body with fixed positioning (original behaviour)\n  return createPortal(\n    <div\n      aria-hidden\n      style={{\n        position: \"fixed\",\n        inset: 0,\n        zIndex: 2147483647,\n        pointerEvents: \"none\",\n      }}\n    >\n      {blastElements}\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":"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"}

package/dist/esm/components/edit-mode.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/edit-mode.d.ts
+declare function DesignEditMode({
+  children
+}: {
+  children: React.ReactNode;
+}): react_jsx_runtime0.JSX.Element;
+declare function useDesignEditMode(): boolean;
+//#endregion
+export { DesignEditMode, useDesignEditMode };
+//# sourceMappingURL=edit-mode.d.ts.map

package/dist/esm/components/edit-mode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"edit-mode.d.ts","names":[],"sources":["../../../src/components/edit-mode.tsx"],"mappings":";;;iBAMgB,cAAA,CAAA;EAAiB;AAAA;EAAc,QAAA,EAAU,KAAA,CAAM,SAAA;AAAA,IAAW,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAQ1D,iBAAA,CAAA"}

package/dist/esm/components/edit-mode.js

@@ -0,0 +1,20 @@
+"use client";
+
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+
+//#region src/components/edit-mode.tsx
+const DesignEditModeContext = createContext(false);
+function DesignEditMode({ children }) {
+	return /* @__PURE__ */ jsx(DesignEditModeContext.Provider, {
+		value: true,
+		children
+	});
+}
+function useDesignEditMode() {
+	return useContext(DesignEditModeContext);
+}
+
+//#endregion
+export { DesignEditMode, useDesignEditMode };
+//# sourceMappingURL=edit-mode.js.map

package/dist/esm/components/edit-mode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"edit-mode.js","names":[],"sources":["../../../src/components/edit-mode.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext } from \"react\";\n\nconst DesignEditModeContext = createContext(false);\n\nexport function DesignEditMode({ children }: { children: React.ReactNode }) {\n  return (\n    <DesignEditModeContext.Provider value={true}>\n      {children}\n    </DesignEditModeContext.Provider>\n  );\n}\n\nexport function useDesignEditMode(): boolean {\n  return useContext(DesignEditModeContext);\n}\n"],"mappings":";;;;;;AAIA,MAAM,wBAAwB,cAAc,MAAM;AAElD,SAAgB,eAAe,EAAE,YAA2C;AAC1E,QACE,oBAAC,sBAAsB;EAAS,OAAO;EACpC;GAC8B;;AAIrC,SAAgB,oBAA6B;AAC3C,QAAO,WAAW,sBAAsB"}

package/dist/esm/components/empty-state.d.ts

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import React from "react";
+
+//#region src/components/empty-state.d.ts
+type DesignEmptyStateProps = {
+  icon?: React.ElementType;
+  title?: string;
+  description?: string;
+  children?: React.ReactNode;
+  className?: string;
+};
+declare function DesignEmptyState({
+  icon: Icon,
+  title,
+  description,
+  children,
+  className
+}: DesignEmptyStateProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DesignEmptyState, DesignEmptyStateProps };
+//# sourceMappingURL=empty-state.d.ts.map

package/dist/esm/components/empty-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.d.ts","names":[],"sources":["../../../src/components/empty-state.tsx"],"mappings":";;;;KAKY,qBAAA;EACV,IAAA,GAAO,KAAA,CAAM,WAAA;EACb,KAAA;EACA,WAAA;EACA,QAAA,GAAW,KAAA,CAAM,SAAA;EACjB,SAAA;AAAA;AAAA,iBAGc,gBAAA,CAAA;EACd,IAAA,EAAM,IAAA;EACN,KAAA;EACA,WAAA;EACA,QAAA;EACA;AAAA,GACC,qBAAA,GAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/esm/components/empty-state.js

@@ -0,0 +1,34 @@
+"use client";
+
+import { cn } from "@stackframe/stack-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+
+//#region src/components/empty-state.tsx
+function DesignEmptyState({ icon: Icon, title = "No data available", description, children, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col items-center justify-center py-12 px-6 text-center", className),
+		children: [
+			Icon && /* @__PURE__ */ jsx("div", {
+				className: "mb-4",
+				children: /* @__PURE__ */ jsx(Icon, { className: "h-10 w-10 text-muted-foreground/30" })
+			}),
+			/* @__PURE__ */ jsx("h3", {
+				className: "text-sm font-medium text-foreground",
+				children: title
+			}),
+			description && /* @__PURE__ */ jsx("p", {
+				className: "mt-1 text-xs text-muted-foreground max-w-[280px]",
+				children: description
+			}),
+			children && /* @__PURE__ */ jsx("div", {
+				className: "mt-4",
+				children
+			})
+		]
+	});
+}
+
+//#endregion
+export { DesignEmptyState };
+//# sourceMappingURL=empty-state.js.map

package/dist/esm/components/empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.js","names":[],"sources":["../../../src/components/empty-state.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@stackframe/stack-ui\";\nimport React from \"react\";\n\nexport type DesignEmptyStateProps = {\n  icon?: React.ElementType,\n  title?: string,\n  description?: string,\n  children?: React.ReactNode,\n  className?: string,\n};\n\nexport function DesignEmptyState({\n  icon: Icon,\n  title = \"No data available\",\n  description,\n  children,\n  className,\n}: DesignEmptyStateProps) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-col items-center justify-center py-12 px-6 text-center\",\n        className\n      )}\n    >\n      {Icon && (\n        <div className=\"mb-4\">\n          <Icon className=\"h-10 w-10 text-muted-foreground/30\" />\n        </div>\n      )}\n      <h3 className=\"text-sm font-medium text-foreground\">\n        {title}\n      </h3>\n      {description && (\n        <p className=\"mt-1 text-xs text-muted-foreground max-w-[280px]\">\n          {description}\n        </p>\n      )}\n      {children && (\n        <div className=\"mt-4\">\n          {children}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAaA,SAAgB,iBAAiB,EAC/B,MAAM,MACN,QAAQ,qBACR,aACA,UACA,aACwB;AACxB,QACE,qBAAC;EACC,WAAW,GACT,oEACA,UACD;;GAEA,QACC,oBAAC;IAAI,WAAU;cACb,oBAAC,QAAK,WAAU,uCAAuC;KACnD;GAER,oBAAC;IAAG,WAAU;cACX;KACE;GACJ,eACC,oBAAC;IAAE,WAAU;cACV;KACC;GAEL,YACC,oBAAC;IAAI,WAAU;IACZ;KACG;;GAEJ"}

package/dist/esm/components/input.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+
+//#region src/components/input.d.ts
+type DesignInputProps = {
+  prefixItem?: React.ReactNode;
+  leadingIcon?: React.ReactNode;
+  size?: "sm" | "md" | "lg";
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
+declare const DesignInput: React.FC<{
+  prefixItem?: React.ReactNode;
+  leadingIcon?: React.ReactNode;
+  size?: "sm" | "md" | "lg";
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
+  ref?: React.Ref<HTMLInputElement> | undefined;
+}>;
+//#endregion
+export { DesignInput, DesignInputProps };
+//# sourceMappingURL=input.d.ts.map

package/dist/esm/components/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","names":[],"sources":["../../../src/components/input.tsx"],"mappings":";;;KAOY,gBAAA;EACV,UAAA,GAAa,KAAA,CAAM,SAAA;EACnB,WAAA,GAAc,KAAA,CAAM,SAAA;EACpB,IAAA;AAAA,IACE,IAAA,CAAK,KAAA,CAAM,mBAAA,CAAoB,gBAAA;AAAA,cAEtB,WAAA,EAAW,KAAA,CAAA,EAAA;eALT,KAAA,CAAM,SAAA;gBACL,KAAA,CAAM,SAAA"}

package/dist/esm/components/input.js

@@ -0,0 +1,50 @@
+"use client";
+
+import { cn } from "@stackframe/stack-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRefIfNeeded } from "@stackframe/stack-shared/dist/utils/react";
+import React from "react";
+
+//#region src/components/input.tsx
+const DesignInput = forwardRefIfNeeded(({ className, type, prefixItem, leadingIcon, size = "md", ...props }, ref) => {
+	const sizeClasses = size === "sm" ? "h-7 px-2 text-xs" : size === "lg" ? "h-10 px-4 text-sm" : "h-9 px-3 text-sm";
+	const baseClasses = cn("stack-scope flex w-full rounded-xl border border-black/[0.08] dark:border-white/[0.06] bg-white/80 dark:bg-foreground/[0.03] shadow-sm ring-1 ring-black/[0.08] dark:ring-white/[0.06]", "file:border-0 file:bg-transparent file:text-sm file:font-medium", "placeholder:text-muted-foreground/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground/[0.1]", "disabled:cursor-not-allowed disabled:opacity-50", "transition-all duration-150 hover:transition-none hover:bg-white dark:hover:bg-foreground/[0.06]", sizeClasses);
+	if (prefixItem) return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-row items-center flex-1 rounded-xl border border-black/[0.08] dark:border-white/[0.06] bg-white/80 dark:bg-foreground/[0.03] shadow-sm ring-1 ring-black/[0.08] dark:ring-white/[0.06] overflow-hidden transition-all duration-150 hover:transition-none hover:bg-white dark:hover:bg-foreground/[0.06] focus-within:ring-1 focus-within:ring-foreground/[0.1]",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cn("flex self-stretch items-center justify-center select-none text-muted-foreground/70 border-r border-black/[0.06] dark:border-white/[0.06] bg-black/[0.03] dark:bg-white/[0.02]", size === "sm" ? "px-2.5 text-xs" : size === "lg" ? "px-3.5 text-sm" : "px-3 text-sm"),
+			children: prefixItem
+		}), /* @__PURE__ */ jsx("input", {
+			type,
+			className: cn("stack-scope flex w-full bg-transparent", "file:border-0 file:bg-transparent file:text-sm file:font-medium", "placeholder:text-muted-foreground/50 focus-visible:outline-none", "disabled:cursor-not-allowed disabled:opacity-50", sizeClasses, "rounded-none border-0 shadow-none ring-0 focus-visible:ring-0", className),
+			ref,
+			...props
+		})]
+	});
+	if (leadingIcon) return /* @__PURE__ */ jsxs("div", {
+		className: "relative flex flex-row items-center flex-1",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "pointer-events-none absolute left-2.5 flex items-center text-muted-foreground",
+			children: leadingIcon
+		}), /* @__PURE__ */ jsx("input", {
+			type,
+			className: cn(baseClasses, "pl-8", className),
+			ref,
+			...props
+		})]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-row items-center flex-1",
+		children: /* @__PURE__ */ jsx("input", {
+			type,
+			className: cn(baseClasses, className),
+			ref,
+			...props
+		})
+	});
+});
+DesignInput.displayName = "DesignInput";
+
+//#endregion
+export { DesignInput };
+//# sourceMappingURL=input.js.map

package/dist/esm/components/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","names":[],"sources":["../../../src/components/input.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRefIfNeeded } from \"@stackframe/stack-shared/dist/utils/react\";\nimport React from \"react\";\n\nimport { cn } from \"@stackframe/stack-ui\";\n\nexport type DesignInputProps = {\n  prefixItem?: React.ReactNode,\n  leadingIcon?: React.ReactNode,\n  size?: \"sm\" | \"md\" | \"lg\",\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\">;\n\nexport const DesignInput = forwardRefIfNeeded<HTMLInputElement, DesignInputProps>(\n  ({ className, type, prefixItem, leadingIcon, size = \"md\", ...props }, ref) => {\n    const sizeClasses = size === \"sm\"\n      ? \"h-7 px-2 text-xs\"\n      : size === \"lg\"\n        ? \"h-10 px-4 text-sm\"\n        : \"h-9 px-3 text-sm\";\n    const baseClasses = cn(\n      \"stack-scope flex w-full rounded-xl border border-black/[0.08] dark:border-white/[0.06] bg-white/80 dark:bg-foreground/[0.03] shadow-sm ring-1 ring-black/[0.08] dark:ring-white/[0.06]\",\n      \"file:border-0 file:bg-transparent file:text-sm file:font-medium\",\n      \"placeholder:text-muted-foreground/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground/[0.1]\",\n      \"disabled:cursor-not-allowed disabled:opacity-50\",\n      \"transition-all duration-150 hover:transition-none hover:bg-white dark:hover:bg-foreground/[0.06]\",\n      sizeClasses\n    );\n\n    if (prefixItem) {\n      return (\n        <div className=\"flex flex-row items-center flex-1 rounded-xl border border-black/[0.08] dark:border-white/[0.06] bg-white/80 dark:bg-foreground/[0.03] shadow-sm ring-1 ring-black/[0.08] dark:ring-white/[0.06] overflow-hidden transition-all duration-150 hover:transition-none hover:bg-white dark:hover:bg-foreground/[0.06] focus-within:ring-1 focus-within:ring-foreground/[0.1]\">\n          <div className={cn(\n            \"flex self-stretch items-center justify-center select-none text-muted-foreground/70 border-r border-black/[0.06] dark:border-white/[0.06] bg-black/[0.03] dark:bg-white/[0.02]\",\n            size === \"sm\" ? \"px-2.5 text-xs\" : size === \"lg\" ? \"px-3.5 text-sm\" : \"px-3 text-sm\"\n          )}>\n            {prefixItem}\n          </div>\n          <input\n            type={type}\n            className={cn(\n              \"stack-scope flex w-full bg-transparent\",\n              \"file:border-0 file:bg-transparent file:text-sm file:font-medium\",\n              \"placeholder:text-muted-foreground/50 focus-visible:outline-none\",\n              \"disabled:cursor-not-allowed disabled:opacity-50\",\n              sizeClasses,\n              \"rounded-none border-0 shadow-none ring-0 focus-visible:ring-0\",\n              className\n            )}\n            ref={ref}\n            {...props}\n          />\n        </div>\n      );\n    }\n\n    if (leadingIcon) {\n      return (\n        <div className=\"relative flex flex-row items-center flex-1\">\n          <div className=\"pointer-events-none absolute left-2.5 flex items-center text-muted-foreground\">\n            {leadingIcon}\n          </div>\n          <input\n            type={type}\n            className={cn(baseClasses, \"pl-8\", className)}\n            ref={ref}\n            {...props}\n          />\n        </div>\n      );\n    }\n\n    return (\n      <div className=\"flex flex-row items-center flex-1\">\n        <input\n          type={type}\n          className={cn(baseClasses, className)}\n          ref={ref}\n          {...props}\n        />\n      </div>\n    );\n  }\n);\nDesignInput.displayName = \"DesignInput\";\n"],"mappings":";;;;;;;;AAaA,MAAa,cAAc,oBACxB,EAAE,WAAW,MAAM,YAAY,aAAa,OAAO,MAAM,GAAG,SAAS,QAAQ;CAC5E,MAAM,cAAc,SAAS,OACzB,qBACA,SAAS,OACP,sBACA;CACN,MAAM,cAAc,GAClB,0LACA,mEACA,4HACA,mDACA,oGACA,YACD;AAED,KAAI,WACF,QACE,qBAAC;EAAI,WAAU;aACb,oBAAC;GAAI,WAAW,GACd,iLACA,SAAS,OAAO,mBAAmB,SAAS,OAAO,mBAAmB,eACvE;aACE;IACG,EACN,oBAAC;GACO;GACN,WAAW,GACT,0CACA,mEACA,mEACA,mDACA,aACA,iEACA,UACD;GACI;GACL,GAAI;IACJ;GACE;AAIV,KAAI,YACF,QACE,qBAAC;EAAI,WAAU;aACb,oBAAC;GAAI,WAAU;aACZ;IACG,EACN,oBAAC;GACO;GACN,WAAW,GAAG,aAAa,QAAQ,UAAU;GACxC;GACL,GAAI;IACJ;GACE;AAIV,QACE,oBAAC;EAAI,WAAU;YACb,oBAAC;GACO;GACN,WAAW,GAAG,aAAa,UAAU;GAChC;GACL,GAAI;IACJ;GACE;EAGX;AACD,YAAY,cAAc"}

package/dist/esm/components/metric-card.d.ts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import React from "react";
+
+//#region src/components/metric-card.d.ts
+type DesignMetricCardGradient = "blue" | "cyan" | "purple" | "green" | "orange" | "default";
+type DesignMetricCardTrend = {
+  value: number;
+  direction: "up" | "down";
+  label?: string;
+};
+type DesignMetricCardProps = {
+  label: string;
+  value: string | number;
+  description?: string;
+  trend?: DesignMetricCardTrend;
+  icon?: React.ElementType;
+  gradient?: DesignMetricCardGradient;
+} & Omit<React.ComponentProps<"div">, "children">;
+declare function DesignMetricCard({
+  label,
+  value,
+  description,
+  trend,
+  icon: Icon,
+  gradient,
+  className,
+  ...props
+}: DesignMetricCardProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DesignMetricCard, DesignMetricCardProps, DesignMetricCardTrend };
+//# sourceMappingURL=metric-card.d.ts.map

package/dist/esm/components/metric-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"metric-card.d.ts","names":[],"sources":["../../../src/components/metric-card.tsx"],"mappings":";;;;KAKK,wBAAA;AAAA,KAWO,qBAAA;EACV,KAAA;EACA,SAAA;EACA,KAAA;AAAA;AAAA,KAGU,qBAAA;EACV,KAAA;EACA,KAAA;EACA,WAAA;EACA,KAAA,GAAQ,qBAAA;EACR,IAAA,GAAO,KAAA,CAAM,WAAA;EACb,QAAA,GAAW,wBAAA;AAAA,IACT,IAAA,CAAK,KAAA,CAAM,cAAA;AAAA,iBAEC,gBAAA,CAAA;EACd,KAAA;EACA,KAAA;EACA,WAAA;EACA,KAAA;EACA,IAAA,EAAM,IAAA;EACN,QAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,qBAAA,GAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/esm/components/metric-card.js

@@ -0,0 +1,85 @@
+"use client";
+
+import { cn } from "@stackframe/stack-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+
+//#region src/components/metric-card.tsx
+const hoverTintClasses = new Map([
+	["blue", "group-hover:bg-blue-500/[0.03]"],
+	["cyan", "group-hover:bg-cyan-500/[0.03]"],
+	["purple", "group-hover:bg-purple-500/[0.03]"],
+	["green", "group-hover:bg-emerald-500/[0.03]"],
+	["orange", "group-hover:bg-orange-500/[0.03]"],
+	["default", "group-hover:bg-slate-500/[0.02]"]
+]);
+function DesignMetricCard({ label, value, description, trend, icon: Icon, gradient = "default", className, ...props }) {
+	const hoverTintClass = hoverTintClasses.get(gradient) ?? "group-hover:bg-slate-500/[0.02]";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("group relative rounded-2xl bg-white/90 dark:bg-background/60 backdrop-blur-xl transition-all duration-150 hover:transition-none overflow-hidden", "ring-1 ring-black/[0.06] hover:ring-black/[0.1] dark:ring-white/[0.06] dark:hover:ring-white/[0.1]", "shadow-sm hover:shadow-md", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-foreground/[0.04] dark:from-foreground/[0.02] to-transparent pointer-events-none rounded-2xl" }),
+			/* @__PURE__ */ jsx("div", { className: cn("absolute inset-0 transition-colors duration-150 group-hover:transition-none pointer-events-none rounded-2xl", hoverTintClass) }),
+			/* @__PURE__ */ jsx("div", {
+				className: "relative p-5",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "flex items-start justify-between gap-3",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex-1 min-w-0",
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-2",
+								children: [Icon && /* @__PURE__ */ jsx("div", {
+									className: "p-1.5 rounded-lg bg-foreground/[0.06] dark:bg-foreground/[0.04]",
+									children: /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5 text-foreground/70 dark:text-muted-foreground" })
+								}), /* @__PURE__ */ jsx("span", {
+									className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider",
+									children: label
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "mt-3 flex items-baseline gap-2",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "text-3xl font-bold tabular-nums text-foreground",
+									children: typeof value === "number" ? value.toLocaleString() : value
+								}), trend && /* @__PURE__ */ jsxs("span", {
+									className: cn("inline-flex items-center gap-0.5 text-xs font-medium", trend.direction === "up" ? "text-emerald-600 dark:text-emerald-400" : "text-red-600 dark:text-red-400"),
+									children: [
+										/* @__PURE__ */ jsx("svg", {
+											className: cn("h-3 w-3", trend.direction === "down" && "rotate-180"),
+											viewBox: "0 0 12 12",
+											fill: "none",
+											xmlns: "http://www.w3.org/2000/svg",
+											children: /* @__PURE__ */ jsx("path", {
+												d: "M6 2.5V9.5M6 2.5L3 5.5M6 2.5L9 5.5",
+												stroke: "currentColor",
+												strokeWidth: "1.5",
+												strokeLinecap: "round",
+												strokeLinejoin: "round"
+											})
+										}),
+										trend.value,
+										"%",
+										trend.label && /* @__PURE__ */ jsx("span", {
+											className: "text-muted-foreground ml-0.5",
+											children: trend.label
+										})
+									]
+								})]
+							}),
+							description && /* @__PURE__ */ jsx("p", {
+								className: "mt-1 text-xs text-muted-foreground",
+								children: description
+							})
+						]
+					})
+				})
+			})
+		]
+	});
+}
+
+//#endregion
+export { DesignMetricCard };
+//# sourceMappingURL=metric-card.js.map

package/dist/esm/components/metric-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metric-card.js","names":[],"sources":["../../../src/components/metric-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@stackframe/stack-ui\";\nimport React from \"react\";\n\ntype DesignMetricCardGradient = \"blue\" | \"cyan\" | \"purple\" | \"green\" | \"orange\" | \"default\";\n\nconst hoverTintClasses = new Map<DesignMetricCardGradient, string>([\n  [\"blue\", \"group-hover:bg-blue-500/[0.03]\"],\n  [\"cyan\", \"group-hover:bg-cyan-500/[0.03]\"],\n  [\"purple\", \"group-hover:bg-purple-500/[0.03]\"],\n  [\"green\", \"group-hover:bg-emerald-500/[0.03]\"],\n  [\"orange\", \"group-hover:bg-orange-500/[0.03]\"],\n  [\"default\", \"group-hover:bg-slate-500/[0.02]\"],\n]);\n\nexport type DesignMetricCardTrend = {\n  value: number,\n  direction: \"up\" | \"down\",\n  label?: string,\n};\n\nexport type DesignMetricCardProps = {\n  label: string,\n  value: string | number,\n  description?: string,\n  trend?: DesignMetricCardTrend,\n  icon?: React.ElementType,\n  gradient?: DesignMetricCardGradient,\n} & Omit<React.ComponentProps<\"div\">, \"children\">;\n\nexport function DesignMetricCard({\n  label,\n  value,\n  description,\n  trend,\n  icon: Icon,\n  gradient = \"default\",\n  className,\n  ...props\n}: DesignMetricCardProps) {\n  const hoverTintClass = hoverTintClasses.get(gradient) ?? \"group-hover:bg-slate-500/[0.02]\";\n\n  return (\n    <div\n      className={cn(\n        \"group relative rounded-2xl bg-white/90 dark:bg-background/60 backdrop-blur-xl transition-all duration-150 hover:transition-none overflow-hidden\",\n        \"ring-1 ring-black/[0.06] hover:ring-black/[0.1] dark:ring-white/[0.06] dark:hover:ring-white/[0.1]\",\n        \"shadow-sm hover:shadow-md\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"absolute inset-0 bg-gradient-to-br from-foreground/[0.04] dark:from-foreground/[0.02] to-transparent pointer-events-none rounded-2xl\" />\n      <div\n        className={cn(\n          \"absolute inset-0 transition-colors duration-150 group-hover:transition-none pointer-events-none rounded-2xl\",\n          hoverTintClass\n        )}\n      />\n      <div className=\"relative p-5\">\n        <div className=\"flex items-start justify-between gap-3\">\n          <div className=\"flex-1 min-w-0\">\n            <div className=\"flex items-center gap-2\">\n              {Icon && (\n                <div className=\"p-1.5 rounded-lg bg-foreground/[0.06] dark:bg-foreground/[0.04]\">\n                  <Icon className=\"h-3.5 w-3.5 text-foreground/70 dark:text-muted-foreground\" />\n                </div>\n              )}\n              <span className=\"text-xs font-semibold text-muted-foreground uppercase tracking-wider\">\n                {label}\n              </span>\n            </div>\n            <div className=\"mt-3 flex items-baseline gap-2\">\n              <span className=\"text-3xl font-bold tabular-nums text-foreground\">\n                {typeof value === \"number\" ? value.toLocaleString() : value}\n              </span>\n              {trend && (\n                <span\n                  className={cn(\n                    \"inline-flex items-center gap-0.5 text-xs font-medium\",\n                    trend.direction === \"up\"\n                      ? \"text-emerald-600 dark:text-emerald-400\"\n                      : \"text-red-600 dark:text-red-400\"\n                  )}\n                >\n                  <svg\n                    className={cn(\"h-3 w-3\", trend.direction === \"down\" && \"rotate-180\")}\n                    viewBox=\"0 0 12 12\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                  >\n                    <path\n                      d=\"M6 2.5V9.5M6 2.5L3 5.5M6 2.5L9 5.5\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"1.5\"\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                    />\n                  </svg>\n                  {trend.value}%\n                  {trend.label && (\n                    <span className=\"text-muted-foreground ml-0.5\">{trend.label}</span>\n                  )}\n                </span>\n              )}\n            </div>\n            {description && (\n              <p className=\"mt-1 text-xs text-muted-foreground\">\n                {description}\n              </p>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAOA,MAAM,mBAAmB,IAAI,IAAsC;CACjE,CAAC,QAAQ,iCAAiC;CAC1C,CAAC,QAAQ,iCAAiC;CAC1C,CAAC,UAAU,mCAAmC;CAC9C,CAAC,SAAS,oCAAoC;CAC9C,CAAC,UAAU,mCAAmC;CAC9C,CAAC,WAAW,kCAAkC;CAC/C,CAAC;AAiBF,SAAgB,iBAAiB,EAC/B,OACA,OACA,aACA,OACA,MAAM,MACN,WAAW,WACX,WACA,GAAG,SACqB;CACxB,MAAM,iBAAiB,iBAAiB,IAAI,SAAS,IAAI;AAEzD,QACE,qBAAC;EACC,WAAW,GACT,mJACA,sGACA,6BACA,UACD;EACD,GAAI;;GAEJ,oBAAC,SAAI,WAAU,yIAAyI;GACxJ,oBAAC,SACC,WAAW,GACT,+GACA,eACD,GACD;GACF,oBAAC;IAAI,WAAU;cACb,oBAAC;KAAI,WAAU;eACb,qBAAC;MAAI,WAAU;;OACb,qBAAC;QAAI,WAAU;mBACZ,QACC,oBAAC;SAAI,WAAU;mBACb,oBAAC,QAAK,WAAU,8DAA8D;UAC1E,EAER,oBAAC;SAAK,WAAU;mBACb;UACI;SACH;OACN,qBAAC;QAAI,WAAU;mBACb,oBAAC;SAAK,WAAU;mBACb,OAAO,UAAU,WAAW,MAAM,gBAAgB,GAAG;UACjD,EACN,SACC,qBAAC;SACC,WAAW,GACT,wDACA,MAAM,cAAc,OAChB,2CACA,iCACL;;UAED,oBAAC;WACC,WAAW,GAAG,WAAW,MAAM,cAAc,UAAU,aAAa;WACpE,SAAQ;WACR,MAAK;WACL,OAAM;qBAEN,oBAAC;YACC,GAAE;YACF,QAAO;YACP,aAAY;YACZ,eAAc;YACd,gBAAe;aACf;YACE;UACL,MAAM;UAAM;UACZ,MAAM,SACL,oBAAC;WAAK,WAAU;qBAAgC,MAAM;YAAa;;UAEhE;SAEL;OACL,eACC,oBAAC;QAAE,WAAU;kBACV;SACC;;OAEF;MACF;KACF;;GACF"}

package/dist/esm/components/pill-toggle.d.ts

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/pill-toggle.d.ts
+type DesignPillToggleSize = "sm" | "md" | "lg";
+type DesignPillToggleGradient = "blue" | "cyan" | "purple" | "green" | "orange" | "default";
+type DesignPillToggleOption = {
+  id: string;
+  label: string;
+  icon?: React.ElementType;
+};
+type DesignPillToggleProps = {
+  options: DesignPillToggleOption[];
+  selected: string;
+  onSelect: (id: string) => void | Promise<void>;
+  size?: DesignPillToggleSize;
+  glassmorphic?: boolean;
+  gradient?: DesignPillToggleGradient; /** When false, hides labels and shows a tooltip on hover instead. Defaults to true. */
+  showLabels?: boolean;
+  className?: string;
+};
+declare function DesignPillToggle({
+  options,
+  selected,
+  onSelect,
+  size,
+  glassmorphic: glassmorphicProp,
+  gradient,
+  showLabels,
+  className
+}: DesignPillToggleProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DesignPillToggle, DesignPillToggleOption, DesignPillToggleProps };
+//# sourceMappingURL=pill-toggle.d.ts.map

package/dist/esm/components/pill-toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pill-toggle.d.ts","names":[],"sources":["../../../src/components/pill-toggle.tsx"],"mappings":";;;KAQK,oBAAA;AAAA,KACA,wBAAA;AAAA,KAEO,sBAAA;EACV,EAAA;EACA,KAAA;EACA,IAAA,GAAO,KAAA,CAAM,WAAA;AAAA;AAAA,KAGH,qBAAA;EACV,OAAA,EAAS,sBAAA;EACT,QAAA;EACA,QAAA,GAAW,EAAA,oBAAsB,OAAA;EACjC,IAAA,GAAO,oBAAA;EACP,YAAA;EACA,QAAA,GAAW,wBAAA,EAZqB;EAchC,UAAA;EACA,SAAA;AAAA;AAAA,iBA+Bc,gBAAA,CAAA;EACd,OAAA;EACA,QAAA;EACA,QAAA;EACA,IAAA;EACA,YAAA,EAAc,gBAAA;EACd,QAAA;EACA,UAAA;EACA;AAAA,GACC,qBAAA,GAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA"}