@stackframe/dashboard-ui-components 2.8.76

package/LICENSE

@@ -0,0 +1,5 @@
+Stack is licensed per-package, and 100% open-source.
+
+Generally speaking, client code and examples are licensed under an open-source MIT license, while server components are licensed under an open-source AGPLv3 license. Please refer to each package's `LICENSE` files for more information.
+
+We also have enterprise licenses available, if you prefer; please contact [enterprise@stack-auth.com](mailto:enterprise@stack-auth.com).

package/dist/chunk-BE-pF4vm.js

@@ -0,0 +1,34 @@
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+
+Object.defineProperty(exports, '__toESM', {
+  enumerable: true,
+  get: function () {
+    return __toESM;
+  }
+});

package/dist/components/alert.d.ts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/alert.d.ts
+type DesignAlertVariant = "default" | "success" | "error" | "warning" | "info";
+type DesignAlertProps = React.HTMLAttributes<HTMLDivElement> & {
+  variant?: DesignAlertVariant;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  glassmorphic?: boolean;
+};
+declare function DesignAlert({
+  variant,
+  title,
+  description,
+  glassmorphic,
+  className,
+  children,
+  ...props
+}: DesignAlertProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DesignAlert, DesignAlertProps };
+//# sourceMappingURL=alert.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","names":[],"sources":["../../src/components/alert.tsx"],"mappings":";;;KAKK,kBAAA;AAAA,KAmEO,gBAAA,GAAmB,KAAA,CAAM,cAAA,CAAe,cAAA;EAClD,OAAA,GAAU,kBAAA;EACV,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,WAAA,GAAc,KAAA,CAAM,SAAA;EACpB,YAAA;AAAA;AAAA,iBAGc,WAAA,CAAA;EACd,OAAA;EACA,KAAA;EACA,WAAA;EACA,YAAA;EACA,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/alert.js

@@ -0,0 +1,75 @@
+"use client";
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../chunk-BE-pF4vm.js');
+let _phosphor_icons_react = require("@phosphor-icons/react");
+let _stackframe_stack_ui = require("@stackframe/stack-ui");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/alert.tsx
+const variantIconMap = new Map([
+	["default", _phosphor_icons_react.Info],
+	["success", _phosphor_icons_react.CheckCircle],
+	["error", _phosphor_icons_react.XCircle],
+	["warning", _phosphor_icons_react.WarningCircle],
+	["info", _phosphor_icons_react.Info]
+]);
+const variantStyles = new Map([
+	["default", {
+		container: "bg-background border-border",
+		icon: "text-foreground",
+		title: "text-foreground"
+	}],
+	["success", {
+		container: "bg-green-500/[0.06] border-green-500/30",
+		icon: "text-green-500",
+		title: "text-green-600 dark:text-green-400"
+	}],
+	["error", {
+		container: "bg-red-500/[0.06] border-red-500/30",
+		icon: "text-red-500",
+		title: "text-red-600 dark:text-red-400"
+	}],
+	["warning", {
+		container: "bg-amber-500/[0.08] border-amber-500/40",
+		icon: "text-amber-600 dark:text-amber-400",
+		title: "text-amber-700 dark:text-amber-300"
+	}],
+	["info", {
+		container: "bg-blue-500/[0.06] border-blue-500/30",
+		icon: "text-blue-500",
+		title: "text-blue-600 dark:text-blue-400"
+	}]
+]);
+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 DesignAlert({ variant = "default", title, description, glassmorphic = false, className, children, ...props }) {
+	const styles = getMapValueOrThrow(variantStyles, variant, "variantStyles");
+	const Icon = getMapValueOrThrow(variantIconMap, variant, "variantIconMap");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		role: "alert",
+		className: (0, _stackframe_stack_ui.cn)("relative w-full rounded-2xl border p-4 text-sm", "flex gap-3 items-start", styles.container, glassmorphic && "backdrop-blur-xl", className),
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: (0, _stackframe_stack_ui.cn)("h-4 w-4 mt-0.5 flex-shrink-0", styles.icon) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "min-w-0",
+			children: [
+				title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h5", {
+					className: (0, _stackframe_stack_ui.cn)("mb-1 font-medium leading-none tracking-tight", styles.title),
+					children: title
+				}),
+				description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "text-sm text-foreground/80 dark:text-muted-foreground [&_p]:leading-relaxed",
+					children: description
+				}),
+				children
+			]
+		})]
+	});
+}
+
+//#endregion
+exports.DesignAlert = DesignAlert;
+//# sourceMappingURL=alert.js.map

package/dist/components/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.js","names":["Info","CheckCircle","XCircle","WarningCircle"],"sources":["../../src/components/alert.tsx"],"sourcesContent":["\"use client\";\n\nimport { CheckCircle, Info, WarningCircle, XCircle } from \"@phosphor-icons/react\";\nimport { cn } from \"@stackframe/stack-ui\";\n\ntype DesignAlertVariant = \"default\" | \"success\" | \"error\" | \"warning\" | \"info\";\n\nconst variantIconMap = new Map<DesignAlertVariant, React.ElementType>([\n  [\"default\", Info],\n  [\"success\", CheckCircle],\n  [\"error\", XCircle],\n  [\"warning\", WarningCircle],\n  [\"info\", Info],\n]);\n\ntype VariantStyles = {\n  container: string,\n  icon: string,\n  title: string,\n};\n\nconst variantStyles = new Map<DesignAlertVariant, VariantStyles>([\n  [\n    \"default\",\n    {\n      container: \"bg-background border-border\",\n      icon: \"text-foreground\",\n      title: \"text-foreground\",\n    },\n  ],\n  [\n    \"success\",\n    {\n      container: \"bg-green-500/[0.06] border-green-500/30\",\n      icon: \"text-green-500\",\n      title: \"text-green-600 dark:text-green-400\",\n    },\n  ],\n  [\n    \"error\",\n    {\n      container: \"bg-red-500/[0.06] border-red-500/30\",\n      icon: \"text-red-500\",\n      title: \"text-red-600 dark:text-red-400\",\n    },\n  ],\n  [\n    \"warning\",\n    {\n      container: \"bg-amber-500/[0.08] border-amber-500/40\",\n      icon: \"text-amber-600 dark:text-amber-400\",\n      title: \"text-amber-700 dark:text-amber-300\",\n    },\n  ],\n  [\n    \"info\",\n    {\n      container: \"bg-blue-500/[0.06] border-blue-500/30\",\n      icon: \"text-blue-500\",\n      title: \"text-blue-600 dark:text-blue-400\",\n    },\n  ],\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 type DesignAlertProps = React.HTMLAttributes<HTMLDivElement> & {\n  variant?: DesignAlertVariant,\n  title?: React.ReactNode,\n  description?: React.ReactNode,\n  glassmorphic?: boolean,\n};\n\nexport function DesignAlert({\n  variant = \"default\",\n  title,\n  description,\n  glassmorphic = false,\n  className,\n  children,\n  ...props\n}: DesignAlertProps) {\n  const styles = getMapValueOrThrow(variantStyles, variant, \"variantStyles\");\n  const Icon = getMapValueOrThrow(variantIconMap, variant, \"variantIconMap\");\n\n  return (\n    <div\n      role=\"alert\"\n      className={cn(\n        \"relative w-full rounded-2xl border p-4 text-sm\",\n        \"flex gap-3 items-start\",\n        styles.container,\n        glassmorphic && \"backdrop-blur-xl\",\n        className\n      )}\n      {...props}\n    >\n      <Icon className={cn(\"h-4 w-4 mt-0.5 flex-shrink-0\", styles.icon)} />\n      <div className=\"min-w-0\">\n        {title && (\n          <h5 className={cn(\"mb-1 font-medium leading-none tracking-tight\", styles.title)}>\n            {title}\n          </h5>\n        )}\n        {description && (\n          <div className=\"text-sm text-foreground/80 dark:text-muted-foreground [&_p]:leading-relaxed\">\n            {description}\n          </div>\n        )}\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAOA,MAAM,iBAAiB,IAAI,IAA2C;CACpE,CAAC,WAAWA,2BAAK;CACjB,CAAC,WAAWC,kCAAY;CACxB,CAAC,SAASC,8BAAQ;CAClB,CAAC,WAAWC,oCAAc;CAC1B,CAAC,QAAQH,2BAAK;CACf,CAAC;AAQF,MAAM,gBAAgB,IAAI,IAAuC;CAC/D,CACE,WACA;EACE,WAAW;EACX,MAAM;EACN,OAAO;EACR,CACF;CACD,CACE,WACA;EACE,WAAW;EACX,MAAM;EACN,OAAO;EACR,CACF;CACD,CACE,SACA;EACE,WAAW;EACX,MAAM;EACN,OAAO;EACR,CACF;CACD,CACE,WACA;EACE,WAAW;EACX,MAAM;EACN,OAAO;EACR,CACF;CACD,CACE,QACA;EACE,WAAW;EACX,MAAM;EACN,OAAO;EACR,CACF;CACF,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;;AAUT,SAAgB,YAAY,EAC1B,UAAU,WACV,OACA,aACA,eAAe,OACf,WACA,UACA,GAAG,SACgB;CACnB,MAAM,SAAS,mBAAmB,eAAe,SAAS,gBAAgB;CAC1E,MAAM,OAAO,mBAAmB,gBAAgB,SAAS,iBAAiB;AAE1E,QACE,4CAAC;EACC,MAAK;EACL,wCACE,kDACA,0BACA,OAAO,WACP,gBAAgB,oBAChB,UACD;EACD,GAAI;aAEJ,2CAAC,QAAK,wCAAc,gCAAgC,OAAO,KAAK,GAAI,EACpE,4CAAC;GAAI,WAAU;;IACZ,SACC,2CAAC;KAAG,wCAAc,gDAAgD,OAAO,MAAM;eAC5E;MACE;IAEN,eACC,2CAAC;KAAI,WAAU;eACZ;MACG;IAEP;;IACG;GACF"}

package/dist/components/badge.d.ts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/badge.d.ts
+type DesignBadgeColor = "blue" | "cyan" | "purple" | "green" | "orange" | "red";
+type DesignBadgeSize = "sm" | "md";
+/** At least one of showLabel or showIcon must be true. */
+type DesignBadgeContentMode = "both" | "text" | "icon";
+type DesignBadgeProps = {
+  label: string;
+  color: DesignBadgeColor;
+  icon?: React.ElementType;
+  size?: DesignBadgeSize; /** What to display: "both" (default), "text" (label only), or "icon" (icon only; requires icon prop). */
+  contentMode?: DesignBadgeContentMode;
+};
+declare function DesignBadge({
+  label,
+  color,
+  icon,
+  size,
+  contentMode
+}: DesignBadgeProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DesignBadge, DesignBadgeColor, DesignBadgeContentMode, DesignBadgeProps, DesignBadgeSize };
+//# sourceMappingURL=badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","names":[],"sources":["../../src/components/badge.tsx"],"mappings":";;;KAIY,gBAAA;AAAA,KACA,eAAA;;KAoBA,sBAAA;AAAA,KAEA,gBAAA;EACV,KAAA;EACA,KAAA,EAAO,gBAAA;EACP,IAAA,GAAO,KAAA,CAAM,WAAA;EACb,IAAA,GAAO,eAAA,EA1BkB;EA4BzB,WAAA,GAAc,sBAAA;AAAA;AAAA,iBA2BA,WAAA,CAAA;EACd,KAAA;EACA,KAAA;EACA,IAAA;EACA,IAAA;EACA;AAAA,GACC,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/badge.js

@@ -0,0 +1,59 @@
+"use client";
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../chunk-BE-pF4vm.js');
+let _stackframe_stack_ui = require("@stackframe/stack-ui");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/badge.tsx
+const badgeStyles = new Map([
+	["blue", "text-blue-700 dark:text-blue-400 bg-blue-500/20 dark:bg-blue-500/10 ring-1 ring-blue-500/30 dark:ring-blue-500/20"],
+	["cyan", "text-cyan-700 dark:text-cyan-400 bg-cyan-500/20 dark:bg-cyan-500/10 ring-1 ring-cyan-500/30 dark:ring-cyan-500/20"],
+	["purple", "text-purple-700 dark:text-purple-400 bg-purple-500/20 dark:bg-purple-500/10 ring-1 ring-purple-500/30 dark:ring-purple-500/20"],
+	["green", "text-emerald-700 dark:text-emerald-400 bg-emerald-500/20 dark:bg-emerald-500/10 ring-1 ring-emerald-500/30 dark:ring-emerald-500/20"],
+	["orange", "text-amber-700 dark:text-amber-300 bg-amber-500/20 dark:bg-amber-500/10 ring-1 ring-amber-500/30 dark:ring-amber-500/20"],
+	["red", "text-red-700 dark:text-red-400 bg-red-500/20 dark:bg-red-500/10 ring-1 ring-red-500/30 dark:ring-red-500/20"]
+]);
+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 getShowLabelShowIcon(contentMode, hasIcon) {
+	switch (contentMode) {
+		case "both": return {
+			showLabel: true,
+			showIcon: hasIcon
+		};
+		case "text": return {
+			showLabel: true,
+			showIcon: false
+		};
+		case "icon":
+			if (!hasIcon) throw new Error("DesignBadge contentMode 'icon' requires the icon prop to be provided.");
+			return {
+				showLabel: false,
+				showIcon: true
+			};
+		default: {
+			const _exhaustive = contentMode;
+			throw new Error(`Unknown contentMode: ${String(_exhaustive)}`);
+		}
+	}
+}
+function DesignBadge({ label, color, icon, size = "md", contentMode = "both" }) {
+	const Icon = icon;
+	const { showLabel, showIcon } = getShowLabelShowIcon(contentMode, !!Icon);
+	if (!showLabel && !showIcon) throw new Error("DesignBadge must show at least label or icon.");
+	const sizeClasses = size === "sm" ? "px-2 py-0.5 text-[10px]" : "px-2.5 py-1 text-[11px]";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _stackframe_stack_ui.cn)("inline-flex items-center gap-1.5 rounded-full font-medium", getMapValueOrThrow(badgeStyles, color, "badgeStyles"), sizeClasses),
+		title: !showLabel ? label : void 0,
+		"aria-label": label,
+		children: [showIcon && Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "h-3 w-3" }), showLabel ? label : null]
+	});
+}
+
+//#endregion
+exports.DesignBadge = DesignBadge;
+//# sourceMappingURL=badge.js.map

package/dist/components/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","names":[],"sources":["../../src/components/badge.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@stackframe/stack-ui\";\n\nexport type DesignBadgeColor = \"blue\" | \"cyan\" | \"purple\" | \"green\" | \"orange\" | \"red\";\nexport type DesignBadgeSize = \"sm\" | \"md\";\n\nconst badgeStyles = new Map<DesignBadgeColor, string>([\n  [\"blue\", \"text-blue-700 dark:text-blue-400 bg-blue-500/20 dark:bg-blue-500/10 ring-1 ring-blue-500/30 dark:ring-blue-500/20\"],\n  [\"cyan\", \"text-cyan-700 dark:text-cyan-400 bg-cyan-500/20 dark:bg-cyan-500/10 ring-1 ring-cyan-500/30 dark:ring-cyan-500/20\"],\n  [\"purple\", \"text-purple-700 dark:text-purple-400 bg-purple-500/20 dark:bg-purple-500/10 ring-1 ring-purple-500/30 dark:ring-purple-500/20\"],\n  [\"green\", \"text-emerald-700 dark:text-emerald-400 bg-emerald-500/20 dark:bg-emerald-500/10 ring-1 ring-emerald-500/30 dark:ring-emerald-500/20\"],\n  [\"orange\", \"text-amber-700 dark:text-amber-300 bg-amber-500/20 dark:bg-amber-500/10 ring-1 ring-amber-500/30 dark:ring-amber-500/20\"],\n  [\"red\", \"text-red-700 dark:text-red-400 bg-red-500/20 dark:bg-red-500/10 ring-1 ring-red-500/30 dark:ring-red-500/20\"],\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\n/** At least one of showLabel or showIcon must be true. */\nexport type DesignBadgeContentMode = \"both\" | \"text\" | \"icon\";\n\nexport type DesignBadgeProps = {\n  label: string,\n  color: DesignBadgeColor,\n  icon?: React.ElementType,\n  size?: DesignBadgeSize,\n  /** What to display: \"both\" (default), \"text\" (label only), or \"icon\" (icon only; requires icon prop). */\n  contentMode?: DesignBadgeContentMode,\n};\n\nfunction getShowLabelShowIcon(\n  contentMode: DesignBadgeContentMode,\n  hasIcon: boolean,\n): { showLabel: boolean, showIcon: boolean } {\n  switch (contentMode) {\n    case \"both\": {\n      return { showLabel: true, showIcon: hasIcon };\n    }\n    case \"text\": {\n      return { showLabel: true, showIcon: false };\n    }\n    case \"icon\": {\n      if (!hasIcon) {\n        throw new Error(\"DesignBadge contentMode 'icon' requires the icon prop to be provided.\");\n      }\n      return { showLabel: false, showIcon: true };\n    }\n    default: {\n      const _exhaustive: never = contentMode;\n      throw new Error(`Unknown contentMode: ${String(_exhaustive)}`);\n    }\n  }\n}\n\nexport function DesignBadge({\n  label,\n  color,\n  icon,\n  size = \"md\",\n  contentMode = \"both\",\n}: DesignBadgeProps) {\n  const Icon = icon;\n  const { showLabel, showIcon } = getShowLabelShowIcon(contentMode, !!Icon);\n  if (!showLabel && !showIcon) {\n    throw new Error(\"DesignBadge must show at least label or icon.\");\n  }\n  const sizeClasses = size === \"sm\"\n    ? \"px-2 py-0.5 text-[10px]\"\n    : \"px-2.5 py-1 text-[11px]\";\n  const colorClasses = getMapValueOrThrow(badgeStyles, color, \"badgeStyles\");\n\n  return (\n    <div\n      className={cn(\n        \"inline-flex items-center gap-1.5 rounded-full font-medium\",\n        colorClasses,\n        sizeClasses\n      )}\n      title={!showLabel ? label : undefined}\n      aria-label={label}\n    >\n      {showIcon && Icon && <Icon className=\"h-3 w-3\" />}\n      {showLabel ? label : null}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAOA,MAAM,cAAc,IAAI,IAA8B;CACpD,CAAC,QAAQ,oHAAoH;CAC7H,CAAC,QAAQ,oHAAoH;CAC7H,CAAC,UAAU,gIAAgI;CAC3I,CAAC,SAAS,sIAAsI;CAChJ,CAAC,UAAU,0HAA0H;CACrI,CAAC,OAAO,8GAA8G;CACvH,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;;AAeT,SAAS,qBACP,aACA,SAC2C;AAC3C,SAAQ,aAAR;EACE,KAAK,OACH,QAAO;GAAE,WAAW;GAAM,UAAU;GAAS;EAE/C,KAAK,OACH,QAAO;GAAE,WAAW;GAAM,UAAU;GAAO;EAE7C,KAAK;AACH,OAAI,CAAC,QACH,OAAM,IAAI,MAAM,wEAAwE;AAE1F,UAAO;IAAE,WAAW;IAAO,UAAU;IAAM;EAE7C,SAAS;GACP,MAAM,cAAqB;AAC3B,SAAM,IAAI,MAAM,wBAAwB,OAAO,YAAY,GAAG;;;;AAKpE,SAAgB,YAAY,EAC1B,OACA,OACA,MACA,OAAO,MACP,cAAc,UACK;CACnB,MAAM,OAAO;CACb,MAAM,EAAE,WAAW,aAAa,qBAAqB,aAAa,CAAC,CAAC,KAAK;AACzE,KAAI,CAAC,aAAa,CAAC,SACjB,OAAM,IAAI,MAAM,gDAAgD;CAElE,MAAM,cAAc,SAAS,OACzB,4BACA;AAGJ,QACE,4CAAC;EACC,wCACE,6DALe,mBAAmB,aAAa,OAAO,cAAc,EAOpE,YACD;EACD,OAAO,CAAC,YAAY,QAAQ;EAC5B,cAAY;aAEX,YAAY,QAAQ,2CAAC,QAAK,WAAU,YAAY,EAChD,YAAY,QAAQ;GACjB"}

package/dist/components/button.d.ts

@@ -0,0 +1,32 @@
+import * as class_variance_authority_types0 from "class-variance-authority/types";
+import { VariantProps } from "class-variance-authority";
+import React from "react";
+
+//#region src/components/button.d.ts
+declare const designButtonVariants: (props?: ({
+  variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "plain" | null | undefined;
+  size?: "icon" | "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types0.ClassProp) | undefined) => string;
+type DesignOriginalButtonProps = {
+  asChild?: boolean;
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof designButtonVariants>;
+type DesignButtonProps = {
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>;
+  loading?: boolean;
+  loadingStyle?: "spinner" | "disabled";
+} & DesignOriginalButtonProps;
+declare const DesignButton: React.FC<{
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>;
+  loading?: boolean;
+  loadingStyle?: "spinner" | "disabled";
+} & {
+  asChild?: boolean;
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<(props?: ({
+  variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "plain" | null | undefined;
+  size?: "icon" | "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types0.ClassProp) | undefined) => string> & {
+  ref?: React.Ref<HTMLButtonElement> | undefined;
+}>;
+//#endregion
+export { DesignButton, DesignButtonProps, DesignOriginalButtonProps };
+//# sourceMappingURL=button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","names":[],"sources":["../../src/components/button.tsx"],"mappings":";;;;;cASM,oBAAA,GAAoB,KAAA;;;IA6BzB,+BAAA,CAAA,SAAA;AAAA,KAEW,yBAAA;EACV,OAAA;AAAA,IACE,KAAA,CAAM,oBAAA,CAAqB,iBAAA,IAAqB,YAAA,QAAoB,oBAAA;AAAA,KAgB5D,iBAAA;EACV,OAAA,IAAW,CAAA,EAAG,KAAA,CAAM,UAAA,CAAW,iBAAA,aAA8B,OAAA;EAC7D,OAAA;EACA,YAAA;AAAA,IACE,yBAAA;AAAA,cAES,YAAA,EAAY,KAAA,CAAA,EAAA;aALZ,CAAA,EAAG,KAAA,CAAM,UAAA,CAAW,iBAAA,aAA8B,OAAA"}

package/dist/components/button.js

@@ -0,0 +1,68 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../chunk-BE-pF4vm.js');
+let _stackframe_stack_ui = require("@stackframe/stack-ui");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _radix_ui_react_slot = require("@radix-ui/react-slot");
+let _stackframe_stack_shared_dist_utils_react = require("@stackframe/stack-shared/dist/utils/react");
+let class_variance_authority = require("class-variance-authority");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let _stackframe_stack_shared_dist_hooks_use_async_callback = require("@stackframe/stack-shared/dist/hooks/use-async-callback");
+let _stackframe_stack_shared_dist_utils_promises = require("@stackframe/stack-shared/dist/utils/promises");
+
+//#region src/components/button.tsx
+const designButtonVariants = (0, class_variance_authority.cva)("stack-scope inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", {
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary/90",
+			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+			outline: "border border-input bg-white/85 dark:bg-background hover:bg-white dark:hover:bg-accent hover:text-accent-foreground",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+			ghost: "hover:bg-accent hover:text-accent-foreground",
+			link: "text-primary underline-offset-4 hover:underline",
+			plain: ""
+		},
+		size: {
+			default: "h-9 px-4 py-2",
+			sm: "h-8 rounded-md px-3 text-xs",
+			lg: "h-10 rounded-md px-8",
+			icon: "h-9 w-9"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+const DesignOriginalButton = (0, _stackframe_stack_shared_dist_utils_react.forwardRefIfNeeded)(({ className, variant, size, asChild = false, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(asChild ? _radix_ui_react_slot.Slot : "button", {
+		className: (0, _stackframe_stack_ui.cn)(designButtonVariants({
+			variant,
+			size,
+			className
+		})),
+		ref,
+		...props
+	});
+});
+DesignOriginalButton.displayName = "DesignButton";
+const DesignButton = (0, _stackframe_stack_shared_dist_utils_react.forwardRefIfNeeded)(({ onClick, loading: loadingProp, loadingStyle = "spinner", children, size, ...props }, ref) => {
+	const [handleClick, isLoading] = (0, _stackframe_stack_shared_dist_hooks_use_async_callback.useAsyncCallback)(async (e) => {
+		await onClick?.(e);
+	}, [onClick]);
+	const loading = loadingProp || isLoading;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DesignOriginalButton, {
+		...props,
+		ref,
+		disabled: props.disabled || loading,
+		onClick: (e) => (0, _stackframe_stack_shared_dist_utils_promises.runAsynchronouslyWithAlert)(handleClick(e)),
+		size,
+		className: (0, _stackframe_stack_ui.cn)("relative", loading && "[&>:not(.stack-button-do-not-hide-when-siblings-are)]:invisible", props.className),
+		children: [loadingStyle === "spinner" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Spinner, { className: (0, _stackframe_stack_ui.cn)("absolute inset-0 flex items-center justify-center stack-button-do-not-hide-when-siblings-are", !loading && "invisible") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_slot.Slottable, { children: typeof children === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children }) : children })]
+	});
+});
+DesignButton.displayName = "DesignButton";
+
+//#endregion
+exports.DesignButton = DesignButton;
+//# sourceMappingURL=button.js.map

package/dist/components/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","names":["Slot","Spinner","Slottable"],"sources":["../../src/components/button.tsx"],"sourcesContent":["import { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport { forwardRefIfNeeded } from \"@stackframe/stack-shared/dist/utils/react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport React from \"react\";\n\nimport { cn, Spinner } from \"@stackframe/stack-ui\";\nimport { useAsyncCallback } from \"@stackframe/stack-shared/dist/hooks/use-async-callback\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\n\nconst designButtonVariants = cva(\n  \"stack-scope inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n        outline:\n          \"border border-input bg-white/85 dark:bg-background hover:bg-white dark:hover:bg-accent hover:text-accent-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n        plain: \"\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2\",\n        sm: \"h-8 rounded-md px-3 text-xs\",\n        lg: \"h-10 rounded-md px-8\",\n        icon: \"h-9 w-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n);\n\nexport type DesignOriginalButtonProps = {\n  asChild?: boolean,\n} & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof designButtonVariants>;\n\nconst DesignOriginalButton = forwardRefIfNeeded<HTMLButtonElement, DesignOriginalButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\";\n    return (\n      <Comp\n        className={cn(designButtonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    );\n  }\n);\nDesignOriginalButton.displayName = \"DesignButton\";\n\nexport type DesignButtonProps = {\n  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>,\n  loading?: boolean,\n  loadingStyle?: \"spinner\" | \"disabled\",\n} & DesignOriginalButtonProps;\n\nexport const DesignButton = forwardRefIfNeeded<HTMLButtonElement, DesignButtonProps>(\n  ({ onClick, loading: loadingProp, loadingStyle = \"spinner\", children, size, ...props }, ref) => {\n    const [handleClick, isLoading] = useAsyncCallback(async (e: React.MouseEvent<HTMLButtonElement>) => {\n      await onClick?.(e);\n    }, [onClick]);\n\n    const loading = loadingProp || isLoading;\n\n    return (\n      <DesignOriginalButton\n        {...props}\n        ref={ref}\n        disabled={props.disabled || loading}\n        onClick={(e) => runAsynchronouslyWithAlert(handleClick(e))}\n        size={size}\n        className={cn(\"relative\", loading && \"[&>:not(.stack-button-do-not-hide-when-siblings-are)]:invisible\", props.className)}\n      >\n        {loadingStyle === \"spinner\" && <Spinner className={cn(\"absolute inset-0 flex items-center justify-center stack-button-do-not-hide-when-siblings-are\", !loading && \"invisible\")} />}\n        <Slottable>\n          {typeof children === \"string\" ? <span>{children}</span> : children}\n        </Slottable>\n      </DesignOriginalButton>\n    );\n  }\n);\nDesignButton.displayName = \"DesignButton\";\n"],"mappings":";;;;;;;;;;;;;AASA,MAAM,yDACJ,iOACA;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,aACE;GACF,SACE;GACF,WACE;GACF,OAAO;GACP,MAAM;GACN,OAAO;GACR;EACD,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,MAAM;GACP;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CACF;AAMD,MAAM,0FACH,EAAE,WAAW,SAAS,MAAM,UAAU,OAAO,GAAG,SAAS,QAAQ;AAEhE,QACE,2CAFW,UAAUA,4BAAO;EAG1B,wCAAc,qBAAqB;GAAE;GAAS;GAAM;GAAW,CAAC,CAAC;EAC5D;EACL,GAAI;GACJ;EAGP;AACD,qBAAqB,cAAc;AAQnC,MAAa,kFACV,EAAE,SAAS,SAAS,aAAa,eAAe,WAAW,UAAU,MAAM,GAAG,SAAS,QAAQ;CAC9F,MAAM,CAAC,aAAa,0FAA8B,OAAO,MAA2C;AAClG,QAAM,UAAU,EAAE;IACjB,CAAC,QAAQ,CAAC;CAEb,MAAM,UAAU,eAAe;AAE/B,QACE,4CAAC;EACC,GAAI;EACC;EACL,UAAU,MAAM,YAAY;EAC5B,UAAU,mFAAiC,YAAY,EAAE,CAAC;EACpD;EACN,wCAAc,YAAY,WAAW,mEAAmE,MAAM,UAAU;aAEvH,iBAAiB,aAAa,2CAACC,gCAAQ,wCAAc,gGAAgG,CAAC,WAAW,YAAY,GAAI,EAClL,2CAACC,4CACE,OAAO,aAAa,WAAW,2CAAC,UAAM,WAAgB,GAAG,WAChD;GACS;EAG5B;AACD,aAAa,cAAc"}

package/dist/components/card.d.ts

@@ -0,0 +1,59 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import React from "react";
+import { Card } from "@stackframe/stack-ui";
+
+//#region src/components/card.d.ts
+/**
+ * Returns `true` when the calling component is rendered inside a DesignCard.
+ * Useful for deriving a glassmorphic default.
+ */
+declare function useInsideDesignCard(): boolean;
+/**
+ * Resolve the effective glassmorphic value.
+ * - If the caller passed an explicit boolean → honour it.
+ * - Otherwise → fall back to whether we're inside a DesignCard.
+ */
+declare function useGlassmorphicDefault(explicit: boolean | undefined): boolean;
+type DesignCardGradient = "blue" | "cyan" | "purple" | "green" | "orange" | "default";
+type DesignCardBaseProps = {
+  glassmorphic?: boolean;
+  gradient?: DesignCardGradient;
+  contentClassName?: string;
+} & Omit<React.ComponentProps<typeof Card>, "title">;
+type WithTitleProps = {
+  title: React.ReactNode;
+  subtitle?: React.ReactNode;
+  icon: React.ElementType;
+  actions?: React.ReactNode;
+};
+type WithoutTitleProps = {
+  title?: never;
+  subtitle?: never;
+  icon?: never;
+  actions?: never;
+};
+type DesignCardProps = DesignCardBaseProps & (WithTitleProps | WithoutTitleProps);
+declare function DesignCard({
+  title,
+  subtitle,
+  icon: Icon,
+  actions,
+  glassmorphic: glassmorphicProp,
+  gradient,
+  children,
+  className,
+  contentClassName,
+  ...props
+}: DesignCardProps): react_jsx_runtime0.JSX.Element;
+type DesignCardTintProps = {
+  gradient: DesignCardGradient;
+} & React.ComponentProps<"div">;
+declare function DesignCardTint({
+  gradient,
+  className,
+  children,
+  ...props
+}: DesignCardTintProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DesignCard, DesignCardProps, DesignCardTint, DesignCardTintProps, useGlassmorphicDefault, useInsideDesignCard };
+//# sourceMappingURL=card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","names":[],"sources":["../../src/components/card.tsx"],"mappings":";;;;;;;;AAiBA;iBAAgB,mBAAA,CAAA;;;;AAShB;;iBAAgB,sBAAA,CAAuB,QAAA;AAAA,KAKlC,kBAAA;AAAA,KA6BA,mBAAA;EACH,YAAA;EACA,QAAA,GAAW,kBAAA;EACX,gBAAA;AAAA,IACE,IAAA,CAAK,KAAA,CAAM,cAAA,QAAsB,IAAA;AAAA,KAEhC,cAAA;EACH,KAAA,EAAO,KAAA,CAAM,SAAA;EACb,QAAA,GAAW,KAAA,CAAM,SAAA;EACjB,IAAA,EAAM,KAAA,CAAM,WAAA;EACZ,OAAA,GAAU,KAAA,CAAM,SAAA;AAAA;AAAA,KAGb,iBAAA;EACH,KAAA;EACA,QAAA;EACA,IAAA;EACA,OAAA;AAAA;AAAA,KAGU,eAAA,GAAkB,mBAAA,IAAuB,cAAA,GAAiB,iBAAA;AAAA,iBAEtD,UAAA,CAAA;EACd,KAAA;EACA,QAAA;EACA,IAAA,EAAM,IAAA;EACN,OAAA;EACA,YAAA,EAAc,gBAAA;EACd,QAAA;EACA,QAAA;EACA,SAAA;EACA,gBAAA;EAAA,GACG;AAAA,GACF,eAAA,GAAe,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KA2GN,mBAAA;EACV,QAAA,EAAU,kBAAA;AAAA,IACR,KAAA,CAAM,cAAA;AAAA,iBAEM,cAAA,CAAA;EACd,QAAA;EACA,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,mBAAA,GAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/card.js

@@ -0,0 +1,133 @@
+"use client";
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../chunk-BE-pF4vm.js');
+let _stackframe_stack_ui = require("@stackframe/stack-ui");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+react = require_chunk.__toESM(react);
+
+//#region src/components/card.tsx
+const DesignCardNestingContext = react.default.createContext(false);
+/**
+* Returns `true` when the calling component is rendered inside a DesignCard.
+* Useful for deriving a glassmorphic default.
+*/
+function useInsideDesignCard() {
+	return react.default.useContext(DesignCardNestingContext);
+}
+/**
+* Resolve the effective glassmorphic value.
+* - If the caller passed an explicit boolean → honour it.
+* - Otherwise → fall back to whether we're inside a DesignCard.
+*/
+function useGlassmorphicDefault(explicit) {
+	const insideCard = useInsideDesignCard();
+	return explicit ?? insideCard;
+}
+const hoverTintClasses = new Map([
+	["blue", "group-hover:bg-blue-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]"],
+	["cyan", "group-hover:bg-cyan-500/[0.03]"]
+]);
+const demoTintClasses = new Map([
+	["blue", "group-hover/tint:bg-blue-500/[0.02]"],
+	["purple", "group-hover/tint:bg-purple-500/[0.02]"],
+	["green", "group-hover/tint:bg-emerald-500/[0.02]"],
+	["orange", "group-hover/tint:bg-orange-500/[0.02]"],
+	["default", "group-hover/tint:bg-slate-500/[0.015]"],
+	["cyan", "group-hover/tint:bg-cyan-500/[0.02]"]
+]);
+const bodyPaddingClass = "p-5";
+function DesignCard({ title, subtitle, icon: Icon, actions, glassmorphic: glassmorphicProp, gradient = "default", children, className, contentClassName, ...props }) {
+	const glassmorphic = glassmorphicProp ?? true;
+	const hoverTintClass = hoverTintClasses.get(gradient) ?? "group-hover:bg-slate-500/[0.02]";
+	const hasContent = react.default.Children.count(children) > 0;
+	const variant = title != null ? subtitle != null ? "header" : "compact" : "bodyOnly";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DesignCardNestingContext.Provider, {
+		value: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_stackframe_stack_ui.Card, {
+			className: (0, _stackframe_stack_ui.cn)("group relative rounded-2xl overflow-hidden", glassmorphic && [
+				"bg-white/90 dark:bg-background/60 dark:backdrop-blur-xl border-0 transition-all duration-150 hover:transition-none",
+				"ring-1 ring-black/[0.06] hover:ring-black/[0.1] dark:ring-white/[0.06] dark:hover:ring-white/[0.1]",
+				"shadow-none"
+			], glassmorphic && variant === "bodyOnly" && "dark:bg-transparent dark:ring-0 dark:shadow-none", className),
+			...props,
+			children: [glassmorphic && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, _stackframe_stack_ui.cn)("absolute inset-0 bg-gradient-to-br from-foreground/[0.04] dark:from-foreground/[0.02] to-transparent pointer-events-none rounded-2xl", variant === "bodyOnly" && "dark:hidden") }), variant !== "bodyOnly" && /* @__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.jsxs)("div", {
+				className: "relative",
+				children: [
+					variant === "header" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: bodyPaddingClass,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex items-start justify-between gap-4",
+							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-foreground uppercase tracking-wider",
+										children: title
+									})]
+								}), subtitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "text-sm text-muted-foreground mt-1",
+									children: subtitle
+								})]
+							}), actions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "flex-shrink-0",
+								children: actions
+							})]
+						})
+					}),
+					variant === "compact" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "p-5 flex items-center justify-between gap-4 border-b border-black/[0.12] dark:border-white/[0.06]",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex items-center gap-2 min-w-0",
+							children: [Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "p-1.5 rounded-lg bg-foreground/[0.04]",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "h-3.5 w-3.5 text-muted-foreground" })
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "text-xs font-semibold text-foreground uppercase tracking-wider",
+								children: title
+							})]
+						}), actions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "flex-shrink-0",
+							children: actions
+						})]
+					}),
+					hasContent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: (0, _stackframe_stack_ui.cn)(variant === "header" ? "border-t border-black/[0.12] dark:border-white/[0.06]" : "", variant === "compact" ? "px-5 py-4" : "", variant === "bodyOnly" || variant === "header" ? bodyPaddingClass : "", contentClassName),
+						children
+					})
+				]
+			})]
+		})
+	});
+}
+function DesignCardTint({ gradient, className, children, ...props }) {
+	const tintClass = demoTintClasses.get(gradient) ?? "group-hover/tint:bg-slate-500/[0.015]";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _stackframe_stack_ui.cn)("group/tint relative rounded-2xl bg-white/90 dark:bg-background/60 dark:backdrop-blur-xl transition-all duration-150 hover:transition-none", "ring-1 ring-black/[0.06] hover:ring-black/[0.1] dark:ring-white/[0.06] dark:hover:ring-white/[0.1]", "shadow-none overflow-hidden", 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/tint:transition-none pointer-events-none rounded-2xl", tintClass) }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "relative",
+				children
+			})
+		]
+	});
+}
+
+//#endregion
+exports.DesignCard = DesignCard;
+exports.DesignCardTint = DesignCardTint;
+exports.useGlassmorphicDefault = useGlassmorphicDefault;
+exports.useInsideDesignCard = useInsideDesignCard;
+//# sourceMappingURL=card.js.map

package/dist/components/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","names":["React","Card"],"sources":["../../src/components/card.tsx"],"sourcesContent":["\"use client\";\n\nimport { Card } from \"@stackframe/stack-ui\";\nimport { cn } from \"@stackframe/stack-ui\";\nimport React from \"react\";\n\n// ─── Card nesting context ────────────────────────────────────────────────────\n// Components with a `glassmorphic` prop use this to auto-detect whether they\n// sit inside a DesignCard.  When they do, glassmorphic defaults to `true`;\n// when they don't, it defaults to `false`.\n\nconst DesignCardNestingContext = React.createContext(false);\n\n/**\n * Returns `true` when the calling component is rendered inside a DesignCard.\n * Useful for deriving a glassmorphic default.\n */\nexport function useInsideDesignCard(): boolean {\n  return React.useContext(DesignCardNestingContext);\n}\n\n/**\n * Resolve the effective glassmorphic value.\n * - If the caller passed an explicit boolean → honour it.\n * - Otherwise → fall back to whether we're inside a DesignCard.\n */\nexport function useGlassmorphicDefault(explicit: boolean | undefined): boolean {\n  const insideCard = useInsideDesignCard();\n  return explicit ?? insideCard;\n}\n\ntype DesignCardGradient = \"blue\" | \"cyan\" | \"purple\" | \"green\" | \"orange\" | \"default\";\n\nconst hoverTintClasses = new Map<DesignCardGradient, string>([\n  [\"blue\", \"group-hover:bg-blue-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  [\"cyan\", \"group-hover:bg-cyan-500/[0.03]\"],\n]);\n\nconst demoTintClasses = new Map<DesignCardGradient, string>([\n  [\"blue\", \"group-hover/tint:bg-blue-500/[0.02]\"],\n  [\"purple\", \"group-hover/tint:bg-purple-500/[0.02]\"],\n  [\"green\", \"group-hover/tint:bg-emerald-500/[0.02]\"],\n  [\"orange\", \"group-hover/tint:bg-orange-500/[0.02]\"],\n  [\"default\", \"group-hover/tint:bg-slate-500/[0.015]\"],\n  [\"cyan\", \"group-hover/tint:bg-cyan-500/[0.02]\"],\n]);\n\nconst bodyPaddingClass = \"p-5\";\n\n// ─── Discriminated props ──────────────────────────────────────────────────\n// - If title is given, icon is required.\n// - The layout is derived automatically:\n//     title + subtitle → \"header\"   (full header block with subtitle)\n//     title only       → \"compact\"  (slim bar with border-b)\n//     no title         → \"bodyOnly\" (just the body)\n\ntype DesignCardBaseProps = {\n  glassmorphic?: boolean,\n  gradient?: DesignCardGradient,\n  contentClassName?: string,\n} & Omit<React.ComponentProps<typeof Card>, \"title\">;\n\ntype WithTitleProps = {\n  title: React.ReactNode,\n  subtitle?: React.ReactNode,\n  icon: React.ElementType,\n  actions?: React.ReactNode,\n};\n\ntype WithoutTitleProps = {\n  title?: never,\n  subtitle?: never,\n  icon?: never,\n  actions?: never,\n};\n\nexport type DesignCardProps = DesignCardBaseProps & (WithTitleProps | WithoutTitleProps);\n\nexport function DesignCard({\n  title,\n  subtitle,\n  icon: Icon,\n  actions,\n  glassmorphic: glassmorphicProp,\n  gradient = \"default\",\n  children,\n  className,\n  contentClassName,\n  ...props\n}: DesignCardProps) {\n  const glassmorphic = glassmorphicProp ?? true;\n  const hoverTintClass = hoverTintClasses.get(gradient) ?? \"group-hover:bg-slate-500/[0.02]\";\n  const hasContent = React.Children.count(children) > 0;\n\n  // Derive layout from which props were provided\n  const variant = title != null\n    ? (subtitle != null ? \"header\" : \"compact\")\n    : \"bodyOnly\";\n\n  return (\n    <DesignCardNestingContext.Provider value={true}>\n      <Card\n        className={cn(\n          \"group relative rounded-2xl overflow-hidden\",\n          glassmorphic && [\n            \"bg-white/90 dark:bg-background/60 dark:backdrop-blur-xl border-0 transition-all duration-150 hover:transition-none\",\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-none\",\n          ],\n          glassmorphic && variant === \"bodyOnly\" && \"dark:bg-transparent dark:ring-0 dark:shadow-none\",\n          className\n        )}\n        {...props}\n      >\n        {glassmorphic && (\n          <>\n            <div className={cn(\n              \"absolute inset-0 bg-gradient-to-br from-foreground/[0.04] dark:from-foreground/[0.02] to-transparent pointer-events-none rounded-2xl\",\n              variant === \"bodyOnly\" && \"dark:hidden\"\n            )} />\n            {variant !== \"bodyOnly\" && (\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            )}\n          </>\n        )}\n        <div className=\"relative\">\n          {variant === \"header\" && (\n            <div className={bodyPaddingClass}>\n              <div className=\"flex items-start justify-between gap-4\">\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-foreground uppercase tracking-wider\">\n                      {title}\n                    </span>\n                  </div>\n                  {subtitle && (\n                    <p className=\"text-sm text-muted-foreground mt-1\">\n                      {subtitle}\n                    </p>\n                  )}\n                </div>\n                {actions && (\n                  <div className=\"flex-shrink-0\">\n                    {actions}\n                  </div>\n                )}\n              </div>\n            </div>\n          )}\n          {variant === \"compact\" && (\n            <div className=\"p-5 flex items-center justify-between gap-4 border-b border-black/[0.12] dark:border-white/[0.06]\">\n              <div className=\"flex items-center gap-2 min-w-0\">\n                {Icon && (\n                  <div className=\"p-1.5 rounded-lg bg-foreground/[0.04]\">\n                    <Icon className=\"h-3.5 w-3.5 text-muted-foreground\" />\n                  </div>\n                )}\n                <span className=\"text-xs font-semibold text-foreground uppercase tracking-wider\">\n                  {title}\n                </span>\n              </div>\n              {actions && (\n                <div className=\"flex-shrink-0\">\n                  {actions}\n                </div>\n              )}\n            </div>\n          )}\n          {hasContent && (\n            <div\n              className={cn(\n                variant === \"header\" ? \"border-t border-black/[0.12] dark:border-white/[0.06]\" : \"\",\n                variant === \"compact\" ? \"px-5 py-4\" : \"\",\n                variant === \"bodyOnly\" || variant === \"header\" ? bodyPaddingClass : \"\",\n                contentClassName\n              )}\n            >\n              {children}\n            </div>\n          )}\n        </div>\n      </Card>\n    </DesignCardNestingContext.Provider>\n  );\n}\n\nexport type DesignCardTintProps = {\n  gradient: DesignCardGradient,\n} & React.ComponentProps<\"div\">\n\nexport function DesignCardTint({\n  gradient,\n  className,\n  children,\n  ...props\n}: DesignCardTintProps) {\n  const tintClass = demoTintClasses.get(gradient) ?? \"group-hover/tint:bg-slate-500/[0.015]\";\n\n  return (\n    <div\n      className={cn(\n        \"group/tint relative rounded-2xl bg-white/90 dark:bg-background/60 dark:backdrop-blur-xl transition-all duration-150 hover:transition-none\",\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-none overflow-hidden\",\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/tint:transition-none pointer-events-none rounded-2xl\",\n          tintClass\n        )}\n      />\n      <div className=\"relative\">\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;AAWA,MAAM,2BAA2BA,cAAM,cAAc,MAAM;;;;;AAM3D,SAAgB,sBAA+B;AAC7C,QAAOA,cAAM,WAAW,yBAAyB;;;;;;;AAQnD,SAAgB,uBAAuB,UAAwC;CAC7E,MAAM,aAAa,qBAAqB;AACxC,QAAO,YAAY;;AAKrB,MAAM,mBAAmB,IAAI,IAAgC;CAC3D,CAAC,QAAQ,iCAAiC;CAC1C,CAAC,UAAU,mCAAmC;CAC9C,CAAC,SAAS,oCAAoC;CAC9C,CAAC,UAAU,mCAAmC;CAC9C,CAAC,WAAW,kCAAkC;CAC9C,CAAC,QAAQ,iCAAiC;CAC3C,CAAC;AAEF,MAAM,kBAAkB,IAAI,IAAgC;CAC1D,CAAC,QAAQ,sCAAsC;CAC/C,CAAC,UAAU,wCAAwC;CACnD,CAAC,SAAS,yCAAyC;CACnD,CAAC,UAAU,wCAAwC;CACnD,CAAC,WAAW,wCAAwC;CACpD,CAAC,QAAQ,sCAAsC;CAChD,CAAC;AAEF,MAAM,mBAAmB;AA+BzB,SAAgB,WAAW,EACzB,OACA,UACA,MAAM,MACN,SACA,cAAc,kBACd,WAAW,WACX,UACA,WACA,kBACA,GAAG,SACe;CAClB,MAAM,eAAe,oBAAoB;CACzC,MAAM,iBAAiB,iBAAiB,IAAI,SAAS,IAAI;CACzD,MAAM,aAAaA,cAAM,SAAS,MAAM,SAAS,GAAG;CAGpD,MAAM,UAAU,SAAS,OACpB,YAAY,OAAO,WAAW,YAC/B;AAEJ,QACE,2CAAC,yBAAyB;EAAS,OAAO;YACxC,4CAACC;GACC,wCACE,8CACA,gBAAgB;IACd;IACA;IACA;IACD,EACD,gBAAgB,YAAY,cAAc,oDAC1C,UACD;GACD,GAAI;cAEH,gBACC,qFACE,2CAAC,SAAI,wCACH,wIACA,YAAY,cAAc,cAC3B,GAAI,EACJ,YAAY,cACX,2CAAC,SACC,wCACE,+GACA,eACD,GACD,IAEH,EAEL,4CAAC;IAAI,WAAU;;KACZ,YAAY,YACX,2CAAC;MAAI,WAAW;gBACd,4CAAC;OAAI,WAAU;kBACb,4CAAC;QAAI,WAAU;mBACb,4CAAC;SAAI,WAAU;oBACZ,QACC,2CAAC;UAAI,WAAU;oBACb,2CAAC,QAAK,WAAU,8DAA8D;WAC1E,EAER,2CAAC;UAAK,WAAU;oBACb;WACI;UACH,EACL,YACC,2CAAC;SAAE,WAAU;mBACV;UACC;SAEF,EACL,WACC,2CAAC;QAAI,WAAU;kBACZ;SACG;QAEJ;OACF;KAEP,YAAY,aACX,4CAAC;MAAI,WAAU;iBACb,4CAAC;OAAI,WAAU;kBACZ,QACC,2CAAC;QAAI,WAAU;kBACb,2CAAC,QAAK,WAAU,sCAAsC;SAClD,EAER,2CAAC;QAAK,WAAU;kBACb;SACI;QACH,EACL,WACC,2CAAC;OAAI,WAAU;iBACZ;QACG;OAEJ;KAEP,cACC,2CAAC;MACC,wCACE,YAAY,WAAW,0DAA0D,IACjF,YAAY,YAAY,cAAc,IACtC,YAAY,cAAc,YAAY,WAAW,mBAAmB,IACpE,iBACD;MAEA;OACG;;KAEJ;IACD;GAC2B;;AAQxC,SAAgB,eAAe,EAC7B,UACA,WACA,UACA,GAAG,SACmB;CACtB,MAAM,YAAY,gBAAgB,IAAI,SAAS,IAAI;AAEnD,QACE,4CAAC;EACC,wCACE,6IACA,sGACA,+BACA,UACD;EACD,GAAI;;GAEJ,2CAAC,SAAI,WAAU,yIAAyI;GACxJ,2CAAC,SACC,wCACE,oHACA,UACD,GACD;GACF,2CAAC;IAAI,WAAU;IACZ;KACG;;GACF"}

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

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import React from "react";
+
+//#region src/components/chart-card.d.ts
+type DesignChartCardGradient = "blue" | "cyan" | "purple" | "green" | "orange" | "default";
+type DesignChartCardProps = {
+  gradient?: DesignChartCardGradient;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+} & Omit<React.ComponentProps<"div">, "title">;
+declare function DesignChartCard({
+  gradient,
+  title,
+  description,
+  className,
+  children,
+  ...props
+}: DesignChartCardProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DesignChartCard, DesignChartCardProps };
+//# sourceMappingURL=chart-card.d.ts.map

package/dist/components/chart-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-card.d.ts","names":[],"sources":["../../src/components/chart-card.tsx"],"mappings":";;;;KAKK,uBAAA;AAAA,KAWO,oBAAA;EACV,QAAA,GAAW,uBAAA;EACX,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,WAAA,GAAc,KAAA,CAAM,SAAA;AAAA,IAClB,IAAA,CAAK,KAAA,CAAM,cAAA;AAAA,iBAEC,eAAA,CAAA;EACd,QAAA;EACA,KAAA;EACA,WAAA;EACA,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,oBAAA,GAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA"}