@hexclave/dashboard-ui-components 1.0.0

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

@@ -0,0 +1,55 @@
+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">;
+/**
+ * KPI card for big-number metrics (users, revenue, signups, etc.).
+ * Use this instead of a plain `DesignCard` when the value is the focal point.
+ *
+ * ```tsx
+ * <DesignMetricCard
+ *   label="Total Users"
+ *   value="1,234"
+ *   description="+12% from last month"
+ *   trend={{ direction: "up", value: 12, label: "vs. last period" }}
+ *   icon={UsersIcon}
+ *   gradient="blue"
+ * />
+ * ```
+ *
+ * Notes:
+ * - `label` is the short caption (NOT `title`).
+ * - `value` can be a pre-formatted string ("1,234") or a number — prefer
+ *   strings so you control the format.
+ * - `description` is the subline (NOT `subtitle`).
+ * - `trend.value` is a NUMBER, not a pre-formatted "12%" string. The card
+ *   renders the arrow and formatting.
+ * - `icon` is a component type (e.g. `UsersIcon`), not a rendered node.
+ */
+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/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;;;;AAPf;;;;;;;;;;;;;;;;;;;;;iBAiCgB,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/components/metric-card.js

@@ -0,0 +1,112 @@
+"use client";
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../chunk-BE-pF4vm.js');
+let _stackframe_stack_ui = require("@hexclave/ui");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+react = require_chunk.__toESM(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]"]
+]);
+/**
+* KPI card for big-number metrics (users, revenue, signups, etc.).
+* Use this instead of a plain `DesignCard` when the value is the focal point.
+*
+* ```tsx
+* <DesignMetricCard
+*   label="Total Users"
+*   value="1,234"
+*   description="+12% from last month"
+*   trend={{ direction: "up", value: 12, label: "vs. last period" }}
+*   icon={UsersIcon}
+*   gradient="blue"
+* />
+* ```
+*
+* Notes:
+* - `label` is the short caption (NOT `title`).
+* - `value` can be a pre-formatted string ("1,234") or a number — prefer
+*   strings so you control the format.
+* - `description` is the subline (NOT `subtitle`).
+* - `trend.value` is a NUMBER, not a pre-formatted "12%" string. The card
+*   renders the arrow and formatting.
+* - `icon` is a component type (e.g. `UsersIcon`), not a rendered node.
+*/
+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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _stackframe_stack_ui.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, _stackframe_stack_ui.cn)("absolute inset-0 transition-colors duration-150 group-hover:transition-none pointer-events-none rounded-2xl", hoverTintClass) }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "relative p-5",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex items-start justify-between gap-3",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex-1 min-w-0",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex items-center gap-2",
+								children: [Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "p-1.5 rounded-lg bg-foreground/[0.06] dark:bg-foreground/[0.04]",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "h-3.5 w-3.5 text-foreground/70 dark:text-muted-foreground" })
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider",
+									children: label
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "mt-3 flex items-baseline gap-2",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "text-3xl font-bold tabular-nums text-foreground",
+									children: typeof value === "number" ? value.toLocaleString() : value
+								}), trend && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: (0, _stackframe_stack_ui.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__ */ (0, react_jsx_runtime.jsx)("svg", {
+											className: (0, _stackframe_stack_ui.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "text-muted-foreground ml-0.5",
+											children: trend.label
+										})
+									]
+								})]
+							}),
+							description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "mt-1 text-xs text-muted-foreground",
+								children: description
+							})
+						]
+					})
+				})
+			})
+		]
+	});
+}
+
+//#endregion
+exports.DesignMetricCard = DesignMetricCard;
+//# sourceMappingURL=metric-card.js.map

package/dist/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\n/**\n * KPI card for big-number metrics (users, revenue, signups, etc.).\n * Use this instead of a plain `DesignCard` when the value is the focal point.\n *\n * ```tsx\n * <DesignMetricCard\n *   label=\"Total Users\"\n *   value=\"1,234\"\n *   description=\"+12% from last month\"\n *   trend={{ direction: \"up\", value: 12, label: \"vs. last period\" }}\n *   icon={UsersIcon}\n *   gradient=\"blue\"\n * />\n * ```\n *\n * Notes:\n * - `label` is the short caption (NOT `title`).\n * - `value` can be a pre-formatted string (\"1,234\") or a number — prefer\n *   strings so you control the format.\n * - `description` is the subline (NOT `subtitle`).\n * - `trend.value` is a NUMBER, not a pre-formatted \"12%\" string. The card\n *   renders the arrow and formatting.\n * - `icon` is a component type (e.g. `UsersIcon`), not a rendered node.\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;;;;;;;;;;;;;;;;;;;;;;;;;AAyCF,SAAgB,iBAAiB,EAC/B,OACA,OACA,aACA,OACA,MAAM,MACN,WAAW,WACX,WACA,GAAG,SACqB;CACxB,MAAM,iBAAiB,iBAAiB,IAAI,SAAS,IAAI;AAEzD,QACE,4CAAC;EACC,wCACE,mJACA,sGACA,6BACA,UACD;EACD,GAAI;;GAEJ,2CAAC,SAAI,WAAU,yIAAyI;GACxJ,2CAAC,SACC,wCACE,+GACA,eACD,GACD;GACF,2CAAC;IAAI,WAAU;cACb,2CAAC;KAAI,WAAU;eACb,4CAAC;MAAI,WAAU;;OACb,4CAAC;QAAI,WAAU;mBACZ,QACC,2CAAC;SAAI,WAAU;mBACb,2CAAC,QAAK,WAAU,8DAA8D;UAC1E,EAER,2CAAC;SAAK,WAAU;mBACb;UACI;SACH;OACN,4CAAC;QAAI,WAAU;mBACb,2CAAC;SAAK,WAAU;mBACb,OAAO,UAAU,WAAW,MAAM,gBAAgB,GAAG;UACjD,EACN,SACC,4CAAC;SACC,wCACE,wDACA,MAAM,cAAc,OAChB,2CACA,iCACL;;UAED,2CAAC;WACC,wCAAc,WAAW,MAAM,cAAc,UAAU,aAAa;WACpE,SAAQ;WACR,MAAK;WACL,OAAM;qBAEN,2CAAC;YACC,GAAE;YACF,QAAO;YACP,aAAY;YACZ,eAAc;YACd,gBAAe;aACf;YACE;UACL,MAAM;UAAM;UACZ,MAAM,SACL,2CAAC;WAAK,WAAU;qBAAgC,MAAM;YAAa;;UAEhE;SAEL;OACL,eACC,2CAAC;QAAE,WAAU;kBACV;SACC;;OAEF;MACF;KACF;;GACF"}

package/dist/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/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"}

package/dist/components/pill-toggle.js

@@ -0,0 +1,86 @@
+"use client";
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../chunk-BE-pF4vm.js');
+let _stackframe_stack_ui = require("@hexclave/ui");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let _stackframe_stack_shared_dist_utils_promises = require("@hexclave/shared/dist/utils/promises");
+let _radix_ui_react_tooltip = require("@radix-ui/react-tooltip");
+let __card_js = require("./card.js");
+
+//#region src/components/pill-toggle.tsx
+const sizeClasses = new Map([
+	["sm", {
+		button: "px-3 py-1.5 text-xs",
+		icon: "h-3.5 w-3.5"
+	}],
+	["md", {
+		button: "px-4 py-2 text-sm",
+		icon: "h-4 w-4"
+	}],
+	["lg", {
+		button: "px-5 py-2.5 text-sm",
+		icon: "h-4 w-4"
+	}]
+]);
+const gradientClasses = new Map([
+	["blue", "ring-blue-500/20 dark:ring-blue-400/20"],
+	["cyan", "ring-cyan-500/20 dark:ring-cyan-400/20"],
+	["purple", "ring-purple-500/20 dark:ring-purple-400/20"],
+	["green", "ring-emerald-500/20 dark:ring-emerald-400/20"],
+	["orange", "ring-amber-500/20 dark:ring-amber-400/20"],
+	["default", "ring-black/[0.12] dark:ring-white/[0.06]"]
+]);
+function getMapValueOrThrow(map, key, mapName) {
+	const value = map.get(key);
+	if (!value) throw new Error(`Missing ${mapName} entry for key "${String(key)}"`);
+	return value;
+}
+function DesignPillToggle({ options, selected, onSelect, size = "md", glassmorphic: glassmorphicProp, gradient = "default", showLabels = true, className }) {
+	const glassmorphic = (0, __card_js.useGlassmorphicDefault)(glassmorphicProp);
+	const sizeClass = getMapValueOrThrow(sizeClasses, size, "sizeClasses");
+	const activeRingClass = getMapValueOrThrow(gradientClasses, gradient, "gradientClasses");
+	const [loadingOptionId, setLoadingOptionId] = (0, react.useState)(null);
+	const handleClick = (optionId) => {
+		const result = onSelect(optionId);
+		if (result && typeof result.then === "function") {
+			setLoadingOptionId(optionId);
+			(0, _stackframe_stack_shared_dist_utils_promises.runAsynchronouslyWithAlert)(Promise.resolve(result).finally(() => setLoadingOptionId(null)));
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, _stackframe_stack_ui.cn)("inline-flex items-center gap-1 p-1 rounded-xl", glassmorphic ? "bg-foreground/[0.04] backdrop-blur-sm" : "bg-black/[0.08] dark:bg-white/[0.04]", className),
+		children: options.map((option) => {
+			const isActive = selected === option.id;
+			const Icon = option.icon;
+			const pill = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				onClick: () => handleClick(option.id),
+				disabled: loadingOptionId !== null,
+				className: (0, _stackframe_stack_ui.cn)("relative flex items-center gap-2 font-medium rounded-lg transition-all duration-150 hover:transition-none", sizeClass.button, isActive ? (0, _stackframe_stack_ui.cn)("bg-background text-foreground shadow-sm ring-1", glassmorphic ? "ring-foreground/[0.06] dark:bg-[hsl(240,71%,70%)]/10 dark:text-[hsl(240,71%,90%)] dark:ring-[hsl(240,71%,70%)]/20" : activeRingClass) : (0, _stackframe_stack_ui.cn)("text-muted-foreground hover:text-foreground", glassmorphic ? "hover:bg-background/50" : "hover:bg-black/[0.06] dark:hover:bg-white/[0.04]")),
+				children: [loadingOptionId === option.id && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Spinner, {
+					size: 12,
+					className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: (0, _stackframe_stack_ui.cn)("flex items-center gap-2", loadingOptionId === option.id && "invisible"),
+					children: [Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: sizeClass.icon }), showLabels && option.label]
+				})]
+			}, option.id);
+			if (!showLabels) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_stackframe_stack_ui.Tooltip, {
+				delayDuration: 0,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.TooltipTrigger, {
+					asChild: true,
+					children: pill
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.TooltipPortal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.TooltipContent, {
+					side: "top",
+					children: option.label
+				}) })]
+			}, option.id);
+			return pill;
+		})
+	});
+}
+
+//#endregion
+exports.DesignPillToggle = DesignPillToggle;
+//# sourceMappingURL=pill-toggle.js.map

package/dist/components/pill-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pill-toggle.js","names":["Spinner","Tooltip","TooltipTrigger","TooltipPortal","TooltipContent"],"sources":["../../src/components/pill-toggle.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { cn, Spinner, Tooltip, TooltipContent, TooltipTrigger } from \"@stackframe/stack-ui\";\nimport { TooltipPortal } from \"@radix-ui/react-tooltip\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { useGlassmorphicDefault } from \"./card\";\n\ntype DesignPillToggleSize = \"sm\" | \"md\" | \"lg\";\ntype DesignPillToggleGradient = \"blue\" | \"cyan\" | \"purple\" | \"green\" | \"orange\" | \"default\";\n\nexport type DesignPillToggleOption = {\n  id: string,\n  label: string,\n  icon?: React.ElementType,\n};\n\nexport type DesignPillToggleProps = {\n  options: DesignPillToggleOption[],\n  selected: string,\n  onSelect: (id: string) => void | Promise<void>,\n  size?: DesignPillToggleSize,\n  glassmorphic?: boolean,\n  gradient?: DesignPillToggleGradient,\n  /** When false, hides labels and shows a tooltip on hover instead. Defaults to true. */\n  showLabels?: boolean,\n  className?: string,\n};\n\ntype SizeClass = {\n  button: string,\n  icon: string,\n};\n\nconst sizeClasses = new Map<DesignPillToggleSize, SizeClass>([\n  [\"sm\", { button: \"px-3 py-1.5 text-xs\", icon: \"h-3.5 w-3.5\" }],\n  [\"md\", { button: \"px-4 py-2 text-sm\", icon: \"h-4 w-4\" }],\n  [\"lg\", { button: \"px-5 py-2.5 text-sm\", icon: \"h-4 w-4\" }],\n]);\n\nconst gradientClasses = new Map<DesignPillToggleGradient, string>([\n  [\"blue\", \"ring-blue-500/20 dark:ring-blue-400/20\"],\n  [\"cyan\", \"ring-cyan-500/20 dark:ring-cyan-400/20\"],\n  [\"purple\", \"ring-purple-500/20 dark:ring-purple-400/20\"],\n  [\"green\", \"ring-emerald-500/20 dark:ring-emerald-400/20\"],\n  [\"orange\", \"ring-amber-500/20 dark:ring-amber-400/20\"],\n  [\"default\", \"ring-black/[0.12] dark:ring-white/[0.06]\"],\n]);\n\nfunction getMapValueOrThrow<TKey, TValue>(map: Map<TKey, TValue>, key: TKey, mapName: string) {\n  const value = map.get(key);\n  if (!value) {\n    throw new Error(`Missing ${mapName} entry for key \"${String(key)}\"`);\n  }\n  return value;\n}\n\nexport function DesignPillToggle({\n  options,\n  selected,\n  onSelect,\n  size = \"md\",\n  glassmorphic: glassmorphicProp,\n  gradient = \"default\",\n  showLabels = true,\n  className,\n}: DesignPillToggleProps) {\n  const glassmorphic = useGlassmorphicDefault(glassmorphicProp);\n  const sizeClass = getMapValueOrThrow(sizeClasses, size, \"sizeClasses\");\n  const activeRingClass = getMapValueOrThrow(gradientClasses, gradient, \"gradientClasses\");\n\n  const [loadingOptionId, setLoadingOptionId] = useState<string | null>(null);\n\n  const handleClick = (optionId: string) => {\n    const result = onSelect(optionId);\n    if (result && typeof (result as Promise<void>).then === \"function\") {\n      setLoadingOptionId(optionId);\n      runAsynchronouslyWithAlert(\n        Promise.resolve(result).finally(() => setLoadingOptionId(null))\n      );\n    }\n  };\n\n  return (\n    <div\n      className={cn(\n        \"inline-flex items-center gap-1 p-1 rounded-xl\",\n        glassmorphic\n          ? \"bg-foreground/[0.04] backdrop-blur-sm\"\n          : \"bg-black/[0.08] dark:bg-white/[0.04]\",\n        className\n      )}\n    >\n      {options.map((option) => {\n        const isActive = selected === option.id;\n        const Icon = option.icon;\n\n        const pill = (\n          <button\n            key={option.id}\n            onClick={() => handleClick(option.id)}\n            disabled={loadingOptionId !== null}\n            className={cn(\n              \"relative flex items-center gap-2 font-medium rounded-lg transition-all duration-150 hover:transition-none\",\n              sizeClass.button,\n              isActive\n                ? cn(\n                  \"bg-background text-foreground shadow-sm ring-1\",\n                  glassmorphic\n                    ? \"ring-foreground/[0.06] dark:bg-[hsl(240,71%,70%)]/10 dark:text-[hsl(240,71%,90%)] dark:ring-[hsl(240,71%,70%)]/20\"\n                    : activeRingClass\n                )\n                : cn(\n                  \"text-muted-foreground hover:text-foreground\",\n                  glassmorphic\n                    ? \"hover:bg-background/50\"\n                    : \"hover:bg-black/[0.06] dark:hover:bg-white/[0.04]\"\n                )\n            )}\n          >\n            {loadingOptionId === option.id && (\n              <Spinner\n                size={12}\n                className=\"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none\"\n              />\n            )}\n            <span className={cn(\n              \"flex items-center gap-2\",\n              loadingOptionId === option.id && \"invisible\"\n            )}>\n              {Icon && <Icon className={sizeClass.icon} />}\n              {showLabels && option.label}\n            </span>\n          </button>\n        );\n\n        if (!showLabels) {\n          return (\n            <Tooltip key={option.id} delayDuration={0}>\n              <TooltipTrigger asChild>\n                {pill}\n              </TooltipTrigger>\n              <TooltipPortal>\n                <TooltipContent side=\"top\">\n                  {option.label}\n                </TooltipContent>\n              </TooltipPortal>\n            </Tooltip>\n          );\n        }\n\n        return pill;\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAkCA,MAAM,cAAc,IAAI,IAAqC;CAC3D,CAAC,MAAM;EAAE,QAAQ;EAAuB,MAAM;EAAe,CAAC;CAC9D,CAAC,MAAM;EAAE,QAAQ;EAAqB,MAAM;EAAW,CAAC;CACxD,CAAC,MAAM;EAAE,QAAQ;EAAuB,MAAM;EAAW,CAAC;CAC3D,CAAC;AAEF,MAAM,kBAAkB,IAAI,IAAsC;CAChE,CAAC,QAAQ,yCAAyC;CAClD,CAAC,QAAQ,yCAAyC;CAClD,CAAC,UAAU,6CAA6C;CACxD,CAAC,SAAS,+CAA+C;CACzD,CAAC,UAAU,2CAA2C;CACtD,CAAC,WAAW,2CAA2C;CACxD,CAAC;AAEF,SAAS,mBAAiC,KAAwB,KAAW,SAAiB;CAC5F,MAAM,QAAQ,IAAI,IAAI,IAAI;AAC1B,KAAI,CAAC,MACH,OAAM,IAAI,MAAM,WAAW,QAAQ,kBAAkB,OAAO,IAAI,CAAC,GAAG;AAEtE,QAAO;;AAGT,SAAgB,iBAAiB,EAC/B,SACA,UACA,UACA,OAAO,MACP,cAAc,kBACd,WAAW,WACX,aAAa,MACb,aACwB;CACxB,MAAM,qDAAsC,iBAAiB;CAC7D,MAAM,YAAY,mBAAmB,aAAa,MAAM,cAAc;CACtE,MAAM,kBAAkB,mBAAmB,iBAAiB,UAAU,kBAAkB;CAExF,MAAM,CAAC,iBAAiB,0CAA8C,KAAK;CAE3E,MAAM,eAAe,aAAqB;EACxC,MAAM,SAAS,SAAS,SAAS;AACjC,MAAI,UAAU,OAAQ,OAAyB,SAAS,YAAY;AAClE,sBAAmB,SAAS;AAC5B,gFACE,QAAQ,QAAQ,OAAO,CAAC,cAAc,mBAAmB,KAAK,CAAC,CAChE;;;AAIL,QACE,2CAAC;EACC,wCACE,iDACA,eACI,0CACA,wCACJ,UACD;YAEA,QAAQ,KAAK,WAAW;GACvB,MAAM,WAAW,aAAa,OAAO;GACrC,MAAM,OAAO,OAAO;GAEpB,MAAM,OACJ,4CAAC;IAEC,eAAe,YAAY,OAAO,GAAG;IACrC,UAAU,oBAAoB;IAC9B,wCACE,6GACA,UAAU,QACV,wCAEI,kDACA,eACI,sHACA,gBACL,gCAEC,+CACA,eACI,2BACA,mDACL,CACJ;eAEA,oBAAoB,OAAO,MAC1B,2CAACA;KACC,MAAM;KACN,WAAU;MACV,EAEJ,4CAAC;KAAK,wCACJ,2BACA,oBAAoB,OAAO,MAAM,YAClC;gBACE,QAAQ,2CAAC,QAAK,WAAW,UAAU,OAAQ,EAC3C,cAAc,OAAO;MACjB;MAjCF,OAAO,GAkCL;AAGX,OAAI,CAAC,WACH,QACE,4CAACC;IAAwB,eAAe;eACtC,2CAACC;KAAe;eACb;MACc,EACjB,2CAACC,mDACC,2CAACC;KAAe,MAAK;eAClB,OAAO;MACO,GACH;MARJ,OAAO,GASX;AAId,UAAO;IACP;GACE"}

package/dist/components/progress-bar.d.ts

@@ -0,0 +1,35 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/progress-bar.d.ts
+type DesignProgressBarGradient = "blue" | "cyan" | "purple" | "green" | "orange" | "default";
+type DesignProgressBarProps = {
+  value: number;
+  max?: number;
+  gradient?: DesignProgressBarGradient;
+  label?: string;
+  showPercentage?: boolean;
+  size?: "sm" | "md" | "lg";
+  className?: string;
+};
+/**
+ * Horizontal progress bar for quota / fill-level indicators. Takes a
+ * `value` and optional `max` (defaults to 100 — pass raw values, the
+ * component computes the percentage). Optional label + percentage display.
+ *
+ * ```tsx
+ * <DesignProgressBar value={usedSeats} max={totalSeats} label="Seats used" showPercentage />
+ * <DesignProgressBar value={75} gradient="green" />
+ * ```
+ */
+declare function DesignProgressBar({
+  value,
+  max,
+  gradient,
+  label,
+  showPercentage,
+  size,
+  className
+}: DesignProgressBarProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DesignProgressBar, DesignProgressBarProps };
+//# sourceMappingURL=progress-bar.d.ts.map

package/dist/components/progress-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.d.ts","names":[],"sources":["../../src/components/progress-bar.tsx"],"mappings":";;;KAIK,yBAAA;AAAA,KAWO,sBAAA;EACV,KAAA;EACA,GAAA;EACA,QAAA,GAAW,yBAAA;EACX,KAAA;EACA,cAAA;EACA,IAAA;EACA,SAAA;AAAA;;;;;;;;;;;iBAac,iBAAA,CAAA;EACd,KAAA;EACA,GAAA;EACA,QAAA;EACA,KAAA;EACA,cAAA;EACA,IAAA;EACA;AAAA,GACC,sBAAA,GAAsB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/progress-bar.js

@@ -0,0 +1,54 @@
+"use client";
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../chunk-BE-pF4vm.js');
+let _stackframe_stack_ui = require("@hexclave/ui");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/progress-bar.tsx
+const fillClasses = new Map([
+	["blue", "bg-blue-500 dark:bg-blue-400"],
+	["cyan", "bg-cyan-500 dark:bg-cyan-400"],
+	["purple", "bg-purple-500 dark:bg-purple-400"],
+	["green", "bg-emerald-500 dark:bg-emerald-400"],
+	["orange", "bg-amber-500 dark:bg-amber-400"],
+	["default", "bg-foreground/60"]
+]);
+/**
+* Horizontal progress bar for quota / fill-level indicators. Takes a
+* `value` and optional `max` (defaults to 100 — pass raw values, the
+* component computes the percentage). Optional label + percentage display.
+*
+* ```tsx
+* <DesignProgressBar value={usedSeats} max={totalSeats} label="Seats used" showPercentage />
+* <DesignProgressBar value={75} gradient="green" />
+* ```
+*/
+function DesignProgressBar({ value, max = 100, gradient = "default", label, showPercentage = false, size = "md", className }) {
+	const percentage = max > 0 ? Math.min(Math.max(value / max * 100, 0), 100) : 0;
+	const fillClass = fillClasses.get(gradient) ?? "bg-foreground/60";
+	const trackHeight = size === "sm" ? "h-1.5" : size === "lg" ? "h-3" : "h-2";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _stackframe_stack_ui.cn)("w-full", className),
+		children: [(label || showPercentage) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center justify-between mb-2",
+			children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-xs font-medium text-muted-foreground",
+				children: label
+			}), showPercentage && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "text-xs font-medium tabular-nums text-foreground",
+				children: [Math.round(percentage), "%"]
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, _stackframe_stack_ui.cn)("w-full rounded-full bg-black/[0.06] dark:bg-white/[0.06] overflow-hidden", trackHeight),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, _stackframe_stack_ui.cn)("h-full rounded-full transition-all duration-300 ease-out", fillClass),
+				style: { width: `${percentage}%` }
+			})
+		})]
+	});
+}
+
+//#endregion
+exports.DesignProgressBar = DesignProgressBar;
+//# sourceMappingURL=progress-bar.js.map

package/dist/components/progress-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.js","names":[],"sources":["../../src/components/progress-bar.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@stackframe/stack-ui\";\n\ntype DesignProgressBarGradient = \"blue\" | \"cyan\" | \"purple\" | \"green\" | \"orange\" | \"default\";\n\nconst fillClasses = new Map<DesignProgressBarGradient, string>([\n  [\"blue\", \"bg-blue-500 dark:bg-blue-400\"],\n  [\"cyan\", \"bg-cyan-500 dark:bg-cyan-400\"],\n  [\"purple\", \"bg-purple-500 dark:bg-purple-400\"],\n  [\"green\", \"bg-emerald-500 dark:bg-emerald-400\"],\n  [\"orange\", \"bg-amber-500 dark:bg-amber-400\"],\n  [\"default\", \"bg-foreground/60\"],\n]);\n\nexport type DesignProgressBarProps = {\n  value: number,\n  max?: number,\n  gradient?: DesignProgressBarGradient,\n  label?: string,\n  showPercentage?: boolean,\n  size?: \"sm\" | \"md\" | \"lg\",\n  className?: string,\n};\n\n/**\n * Horizontal progress bar for quota / fill-level indicators. Takes a\n * `value` and optional `max` (defaults to 100 — pass raw values, the\n * component computes the percentage). Optional label + percentage display.\n *\n * ```tsx\n * <DesignProgressBar value={usedSeats} max={totalSeats} label=\"Seats used\" showPercentage />\n * <DesignProgressBar value={75} gradient=\"green\" />\n * ```\n */\nexport function DesignProgressBar({\n  value,\n  max = 100,\n  gradient = \"default\",\n  label,\n  showPercentage = false,\n  size = \"md\",\n  className,\n}: DesignProgressBarProps) {\n  const percentage = max > 0 ? Math.min(Math.max((value / max) * 100, 0), 100) : 0;\n  const fillClass = fillClasses.get(gradient) ?? \"bg-foreground/60\";\n\n  const trackHeight = size === \"sm\" ? \"h-1.5\" : size === \"lg\" ? \"h-3\" : \"h-2\";\n\n  return (\n    <div className={cn(\"w-full\", className)}>\n      {(label || showPercentage) && (\n        <div className=\"flex items-center justify-between mb-2\">\n          {label && (\n            <span className=\"text-xs font-medium text-muted-foreground\">\n              {label}\n            </span>\n          )}\n          {showPercentage && (\n            <span className=\"text-xs font-medium tabular-nums text-foreground\">\n              {Math.round(percentage)}%\n            </span>\n          )}\n        </div>\n      )}\n      <div\n        className={cn(\n          \"w-full rounded-full bg-black/[0.06] dark:bg-white/[0.06] overflow-hidden\",\n          trackHeight\n        )}\n      >\n        <div\n          className={cn(\n            \"h-full rounded-full transition-all duration-300 ease-out\",\n            fillClass\n          )}\n          style={{ width: `${percentage}%` }}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAMA,MAAM,cAAc,IAAI,IAAuC;CAC7D,CAAC,QAAQ,+BAA+B;CACxC,CAAC,QAAQ,+BAA+B;CACxC,CAAC,UAAU,mCAAmC;CAC9C,CAAC,SAAS,qCAAqC;CAC/C,CAAC,UAAU,iCAAiC;CAC5C,CAAC,WAAW,mBAAmB;CAChC,CAAC;;;;;;;;;;;AAsBF,SAAgB,kBAAkB,EAChC,OACA,MAAM,KACN,WAAW,WACX,OACA,iBAAiB,OACjB,OAAO,MACP,aACyB;CACzB,MAAM,aAAa,MAAM,IAAI,KAAK,IAAI,KAAK,IAAK,QAAQ,MAAO,KAAK,EAAE,EAAE,IAAI,GAAG;CAC/E,MAAM,YAAY,YAAY,IAAI,SAAS,IAAI;CAE/C,MAAM,cAAc,SAAS,OAAO,UAAU,SAAS,OAAO,QAAQ;AAEtE,QACE,4CAAC;EAAI,wCAAc,UAAU,UAAU;cACnC,SAAS,mBACT,4CAAC;GAAI,WAAU;cACZ,SACC,2CAAC;IAAK,WAAU;cACb;KACI,EAER,kBACC,4CAAC;IAAK,WAAU;eACb,KAAK,MAAM,WAAW,EAAC;KACnB;IAEL,EAER,2CAAC;GACC,wCACE,4EACA,YACD;aAED,2CAAC;IACC,wCACE,4DACA,UACD;IACD,OAAO,EAAE,OAAO,GAAG,WAAW,IAAI;KAClC;IACE;GACF"}

package/dist/components/separator.d.ts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/separator.d.ts
+type DesignSeparatorProps = {
+  orientation?: "horizontal" | "vertical";
+} & React.HTMLAttributes<HTMLDivElement>;
+/**
+ * Thin divider line. Use `orientation="vertical"` inside a flex row to
+ * separate inline groups, or omit for a horizontal rule between sections.
+ *
+ * ```tsx
+ * <DesignSeparator />
+ * <DesignSeparator orientation="vertical" className="h-6" />
+ * ```
+ */
+declare function DesignSeparator({
+  orientation,
+  className,
+  ...props
+}: DesignSeparatorProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DesignSeparator, DesignSeparatorProps };
+//# sourceMappingURL=separator.d.ts.map

package/dist/components/separator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.d.ts","names":[],"sources":["../../src/components/separator.tsx"],"mappings":";;;KAIY,oBAAA;EACV,WAAA;AAAA,IACE,KAAA,CAAM,cAAA,CAAe,cAAA;AAFzB;;;;;;;;;AAAA,iBAagB,eAAA,CAAA;EACd,WAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,oBAAA,GAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/separator.js

@@ -0,0 +1,29 @@
+"use client";
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../chunk-BE-pF4vm.js');
+let _stackframe_stack_ui = require("@hexclave/ui");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/separator.tsx
+/**
+* Thin divider line. Use `orientation="vertical"` inside a flex row to
+* separate inline groups, or omit for a horizontal rule between sections.
+*
+* ```tsx
+* <DesignSeparator />
+* <DesignSeparator orientation="vertical" className="h-6" />
+* ```
+*/
+function DesignSeparator({ orientation = "horizontal", className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "separator",
+		"aria-orientation": orientation,
+		className: (0, _stackframe_stack_ui.cn)(orientation === "horizontal" ? "h-[1px] w-full bg-black/[0.08] dark:bg-white/[0.06]" : "w-[1px] h-full bg-black/[0.08] dark:bg-white/[0.06]", className),
+		...props
+	});
+}
+
+//#endregion
+exports.DesignSeparator = DesignSeparator;
+//# sourceMappingURL=separator.js.map

package/dist/components/separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.js","names":[],"sources":["../../src/components/separator.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@stackframe/stack-ui\";\n\nexport type DesignSeparatorProps = {\n  orientation?: \"horizontal\" | \"vertical\",\n} & React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Thin divider line. Use `orientation=\"vertical\"` inside a flex row to\n * separate inline groups, or omit for a horizontal rule between sections.\n *\n * ```tsx\n * <DesignSeparator />\n * <DesignSeparator orientation=\"vertical\" className=\"h-6\" />\n * ```\n */\nexport function DesignSeparator({\n  orientation = \"horizontal\",\n  className,\n  ...props\n}: DesignSeparatorProps) {\n  return (\n    <div\n      role=\"separator\"\n      aria-orientation={orientation}\n      className={cn(\n        orientation === \"horizontal\"\n          ? \"h-[1px] w-full bg-black/[0.08] dark:bg-white/[0.06]\"\n          : \"w-[1px] h-full bg-black/[0.08] dark:bg-white/[0.06]\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,SAAgB,gBAAgB,EAC9B,cAAc,cACd,WACA,GAAG,SACoB;AACvB,QACE,2CAAC;EACC,MAAK;EACL,oBAAkB;EAClB,wCACE,gBAAgB,eACZ,wDACA,uDACJ,UACD;EACD,GAAI;GACJ"}

package/dist/components/skeleton.d.ts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import React from "react";
+
+//#region src/components/skeleton.d.ts
+type DesignSkeletonProps = React.HTMLAttributes<HTMLDivElement>;
+/**
+ * Animated placeholder block. Use while data is loading — size it via
+ * `className` to match the content it's standing in for.
+ *
+ * ```tsx
+ * <DesignSkeleton className="h-4 w-[200px]" />
+ * <DesignSkeleton className="h-24 w-full rounded-lg" />
+ * ```
+ *
+ * Rule: always show a skeleton during initial load, not a spinner or
+ * "Loading..." text. Skeletons preserve layout and feel faster.
+ */
+declare function DesignSkeleton({
+  className,
+  ...props
+}: DesignSkeletonProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DesignSkeleton, DesignSkeletonProps };
+//# sourceMappingURL=skeleton.d.ts.map

package/dist/components/skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","names":[],"sources":["../../src/components/skeleton.tsx"],"mappings":";;;;KAKY,mBAAA,GAAsB,KAAA,CAAM,cAAA,CAAe,cAAA;;;AAAvD;;;;;;;;;AAcA;iBAAgB,cAAA,CAAA;EAAiB,SAAA;EAAA,GAAc;AAAA,GAAS,mBAAA,GAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/skeleton.js

@@ -0,0 +1,30 @@
+"use client";
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../chunk-BE-pF4vm.js');
+let _stackframe_stack_ui = require("@hexclave/ui");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/skeleton.tsx
+/**
+* Animated placeholder block. Use while data is loading — size it via
+* `className` to match the content it's standing in for.
+*
+* ```tsx
+* <DesignSkeleton className="h-4 w-[200px]" />
+* <DesignSkeleton className="h-24 w-full rounded-lg" />
+* ```
+*
+* Rule: always show a skeleton during initial load, not a spinner or
+* "Loading..." text. Skeletons preserve layout and feel faster.
+*/
+function DesignSkeleton({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, _stackframe_stack_ui.cn)("animate-pulse rounded-md bg-black/[0.06] dark:bg-white/[0.06]", className),
+		...props
+	});
+}
+
+//#endregion
+exports.DesignSkeleton = DesignSkeleton;
+//# sourceMappingURL=skeleton.js.map

package/dist/components/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","names":[],"sources":["../../src/components/skeleton.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@stackframe/stack-ui\";\nimport type React from \"react\";\n\nexport type DesignSkeletonProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Animated placeholder block. Use while data is loading — size it via\n * `className` to match the content it's standing in for.\n *\n * ```tsx\n * <DesignSkeleton className=\"h-4 w-[200px]\" />\n * <DesignSkeleton className=\"h-24 w-full rounded-lg\" />\n * ```\n *\n * Rule: always show a skeleton during initial load, not a spinner or\n * \"Loading...\" text. Skeletons preserve layout and feel faster.\n */\nexport function DesignSkeleton({ className, ...props }: DesignSkeletonProps) {\n  return (\n    <div\n      className={cn(\n        \"animate-pulse rounded-md bg-black/[0.06] dark:bg-white/[0.06]\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBA,SAAgB,eAAe,EAAE,WAAW,GAAG,SAA8B;AAC3E,QACE,2CAAC;EACC,wCACE,iEACA,UACD;EACD,GAAI;GACJ"}

package/dist/components/table.d.ts

@@ -0,0 +1,49 @@
+import React from "react";
+
+//#region src/components/table.d.ts
+/**
+ * Simple static table — header + rows + cells. Use this for small,
+ * read-only lists (< 20 rows, no interaction). For anything that needs
+ * sorting, filtering, pagination, or virtualization, use `DataGrid` +
+ * `useDataSource` instead.
+ *
+ * ```tsx
+ * <DesignTable>
+ *   <DesignTableHeader>
+ *     <DesignTableRow>
+ *       <DesignTableHead>Name</DesignTableHead>
+ *       <DesignTableHead>Email</DesignTableHead>
+ *     </DesignTableRow>
+ *   </DesignTableHeader>
+ *   <DesignTableBody>
+ *     {rows.map(row => (
+ *       <DesignTableRow key={row.id}>
+ *         <DesignTableCell>{row.name}</DesignTableCell>
+ *         <DesignTableCell>{row.email}</DesignTableCell>
+ *       </DesignTableRow>
+ *     ))}
+ *   </DesignTableBody>
+ * </DesignTable>
+ * ```
+ */
+declare const DesignTable: React.FC<React.HTMLAttributes<HTMLTableElement> & {
+  ref?: React.Ref<HTMLTableElement> | undefined;
+}>;
+declare const DesignTableHeader: React.FC<React.HTMLAttributes<HTMLTableSectionElement> & {
+  ref?: React.Ref<HTMLTableSectionElement> | undefined;
+}>;
+declare const DesignTableBody: React.FC<React.HTMLAttributes<HTMLTableSectionElement> & {
+  ref?: React.Ref<HTMLTableSectionElement> | undefined;
+}>;
+declare const DesignTableRow: React.FC<React.HTMLAttributes<HTMLTableRowElement> & {
+  ref?: React.Ref<HTMLTableRowElement> | undefined;
+}>;
+declare const DesignTableHead: React.FC<React.ThHTMLAttributes<HTMLTableCellElement> & {
+  ref?: React.Ref<HTMLTableCellElement> | undefined;
+}>;
+declare const DesignTableCell: React.FC<React.TdHTMLAttributes<HTMLTableCellElement> & {
+  ref?: React.Ref<HTMLTableCellElement> | undefined;
+}>;
+//#endregion
+export { DesignTable, DesignTableBody, DesignTableCell, DesignTableHead, DesignTableHeader, DesignTableRow };
+//# sourceMappingURL=table.d.ts.map

package/dist/components/table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","names":[],"sources":["../../src/components/table.tsx"],"mappings":";;;;;AA+BA;;;;;;;;;;;;;;;;;;;;;AAcA;;cAda,WAAA,EAAW,KAAA,CAAA,EAAA,CAAA,KAAA,CAAA,cAAA,CAAA,gBAAA;;;cAcX,iBAAA,EAAiB,KAAA,CAAA,EAAA,CAAA,KAAA,CAAA,cAAA,CAAA,uBAAA;;;cAYjB,eAAA,EAAe,KAAA,CAAA,EAAA,CAAA,KAAA,CAAA,cAAA,CAAA,uBAAA;;;cAYf,cAAA,EAAc,KAAA,CAAA,EAAA,CAAA,KAAA,CAAA,cAAA,CAAA,mBAAA;;;cAed,eAAA,EAAe,KAAA,CAAA,EAAA,CAAA,KAAA,CAAA,gBAAA,CAAA,oBAAA;;;cAef,eAAA,EAAe,KAAA,CAAA,EAAA,CAAA,KAAA,CAAA,gBAAA,CAAA,oBAAA"}