@stackframe/dashboard-ui-components 2.8.76

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

@@ -0,0 +1,84 @@
+"use client";
+
+import { Spinner, Tooltip, TooltipContent, TooltipTrigger, cn } from "@stackframe/stack-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { TooltipPortal } from "@radix-ui/react-tooltip";
+import { useGlassmorphicDefault } from "./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 = useGlassmorphicDefault(glassmorphicProp);
+	const sizeClass = getMapValueOrThrow(sizeClasses, size, "sizeClasses");
+	const activeRingClass = getMapValueOrThrow(gradientClasses, gradient, "gradientClasses");
+	const [loadingOptionId, setLoadingOptionId] = useState(null);
+	const handleClick = (optionId) => {
+		const result = onSelect(optionId);
+		if (result && typeof result.then === "function") {
+			setLoadingOptionId(optionId);
+			runAsynchronouslyWithAlert(Promise.resolve(result).finally(() => setLoadingOptionId(null)));
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: 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__ */ jsxs("button", {
+				onClick: () => handleClick(option.id),
+				disabled: loadingOptionId !== null,
+				className: cn("relative flex items-center gap-2 font-medium rounded-lg transition-all duration-150 hover:transition-none", sizeClass.button, isActive ? 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) : 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__ */ jsx(Spinner, {
+					size: 12,
+					className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
+				}), /* @__PURE__ */ jsxs("span", {
+					className: cn("flex items-center gap-2", loadingOptionId === option.id && "invisible"),
+					children: [Icon && /* @__PURE__ */ jsx(Icon, { className: sizeClass.icon }), showLabels && option.label]
+				})]
+			}, option.id);
+			if (!showLabels) return /* @__PURE__ */ jsxs(Tooltip, {
+				delayDuration: 0,
+				children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+					asChild: true,
+					children: pill
+				}), /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipContent, {
+					side: "top",
+					children: option.label
+				}) })]
+			}, option.id);
+			return pill;
+		})
+	});
+}
+
+//#endregion
+export { DesignPillToggle };
+//# sourceMappingURL=pill-toggle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pill-toggle.js","names":[],"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,eAAe,uBAAuB,iBAAiB;CAC7D,MAAM,YAAY,mBAAmB,aAAa,MAAM,cAAc;CACtE,MAAM,kBAAkB,mBAAmB,iBAAiB,UAAU,kBAAkB;CAExF,MAAM,CAAC,iBAAiB,sBAAsB,SAAwB,KAAK;CAE3E,MAAM,eAAe,aAAqB;EACxC,MAAM,SAAS,SAAS,SAAS;AACjC,MAAI,UAAU,OAAQ,OAAyB,SAAS,YAAY;AAClE,sBAAmB,SAAS;AAC5B,8BACE,QAAQ,QAAQ,OAAO,CAAC,cAAc,mBAAmB,KAAK,CAAC,CAChE;;;AAIL,QACE,oBAAC;EACC,WAAW,GACT,iDACA,eACI,0CACA,wCACJ,UACD;YAEA,QAAQ,KAAK,WAAW;GACvB,MAAM,WAAW,aAAa,OAAO;GACrC,MAAM,OAAO,OAAO;GAEpB,MAAM,OACJ,qBAAC;IAEC,eAAe,YAAY,OAAO,GAAG;IACrC,UAAU,oBAAoB;IAC9B,WAAW,GACT,6GACA,UAAU,QACV,WACI,GACA,kDACA,eACI,sHACA,gBACL,GACC,GACA,+CACA,eACI,2BACA,mDACL,CACJ;eAEA,oBAAoB,OAAO,MAC1B,oBAAC;KACC,MAAM;KACN,WAAU;MACV,EAEJ,qBAAC;KAAK,WAAW,GACf,2BACA,oBAAoB,OAAO,MAAM,YAClC;gBACE,QAAQ,oBAAC,QAAK,WAAW,UAAU,OAAQ,EAC3C,cAAc,OAAO;MACjB;MAjCF,OAAO,GAkCL;AAGX,OAAI,CAAC,WACH,QACE,qBAAC;IAAwB,eAAe;eACtC,oBAAC;KAAe;eACb;MACc,EACjB,oBAAC,2BACC,oBAAC;KAAe,MAAK;eAClB,OAAO;MACO,GACH;MARJ,OAAO,GASX;AAId,UAAO;IACP;GACE"}

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

@@ -0,0 +1,25 @@
+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;
+};
+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/esm/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;AAAA,iBAGc,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/esm/components/progress-bar.js

@@ -0,0 +1,42 @@
+"use client";
+
+import { cn } from "@stackframe/stack-ui";
+import { jsx, jsxs } from "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"]
+]);
+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__ */ jsxs("div", {
+		className: cn("w-full", className),
+		children: [(label || showPercentage) && /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between mb-2",
+			children: [label && /* @__PURE__ */ jsx("span", {
+				className: "text-xs font-medium text-muted-foreground",
+				children: label
+			}), showPercentage && /* @__PURE__ */ jsxs("span", {
+				className: "text-xs font-medium tabular-nums text-foreground",
+				children: [Math.round(percentage), "%"]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: cn("w-full rounded-full bg-black/[0.06] dark:bg-white/[0.06] overflow-hidden", trackHeight),
+			children: /* @__PURE__ */ jsx("div", {
+				className: cn("h-full rounded-full transition-all duration-300 ease-out", fillClass),
+				style: { width: `${percentage}%` }
+			})
+		})]
+	});
+}
+
+//#endregion
+export { DesignProgressBar };
+//# sourceMappingURL=progress-bar.js.map

package/dist/esm/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\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;AAYF,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,qBAAC;EAAI,WAAW,GAAG,UAAU,UAAU;cACnC,SAAS,mBACT,qBAAC;GAAI,WAAU;cACZ,SACC,oBAAC;IAAK,WAAU;cACb;KACI,EAER,kBACC,qBAAC;IAAK,WAAU;eACb,KAAK,MAAM,WAAW,EAAC;KACnB;IAEL,EAER,oBAAC;GACC,WAAW,GACT,4EACA,YACD;aAED,oBAAC;IACC,WAAW,GACT,4DACA,UACD;IACD,OAAO,EAAE,OAAO,GAAG,WAAW,IAAI;KAClC;IACE;GACF"}

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

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/separator.d.ts
+type DesignSeparatorProps = {
+  orientation?: "horizontal" | "vertical";
+} & React.HTMLAttributes<HTMLDivElement>;
+declare function DesignSeparator({
+  orientation,
+  className,
+  ...props
+}: DesignSeparatorProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DesignSeparator, DesignSeparatorProps };
+//# sourceMappingURL=separator.d.ts.map

package/dist/esm/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;AAAA,iBAET,eAAA,CAAA;EACd,WAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,oBAAA,GAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/esm/components/separator.js

@@ -0,0 +1,18 @@
+"use client";
+
+import { cn } from "@stackframe/stack-ui";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/separator.tsx
+function DesignSeparator({ orientation = "horizontal", className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "separator",
+		"aria-orientation": orientation,
+		className: 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
+export { DesignSeparator };
+//# sourceMappingURL=separator.js.map

package/dist/esm/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\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":";;;;;;AAQA,SAAgB,gBAAgB,EAC9B,cAAc,cACd,WACA,GAAG,SACoB;AACvB,QACE,oBAAC;EACC,MAAK;EACL,oBAAkB;EAClB,WAAW,GACT,gBAAgB,eACZ,wDACA,uDACJ,UACD;EACD,GAAI;GACJ"}

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

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import React from "react";
+
+//#region src/components/skeleton.d.ts
+type DesignSkeletonProps = React.HTMLAttributes<HTMLDivElement>;
+declare function DesignSkeleton({
+  className,
+  ...props
+}: DesignSkeletonProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DesignSkeleton, DesignSkeletonProps };
+//# sourceMappingURL=skeleton.d.ts.map

package/dist/esm/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;AAAA,iBAEvC,cAAA,CAAA;EAAiB,SAAA;EAAA,GAAc;AAAA,GAAS,mBAAA,GAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/esm/components/skeleton.js

@@ -0,0 +1,16 @@
+"use client";
+
+import { cn } from "@stackframe/stack-ui";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/skeleton.tsx
+function DesignSkeleton({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("animate-pulse rounded-md bg-black/[0.06] dark:bg-white/[0.06]", className),
+		...props
+	});
+}
+
+//#endregion
+export { DesignSkeleton };
+//# sourceMappingURL=skeleton.js.map

package/dist/esm/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\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":";;;;;;AAOA,SAAgB,eAAe,EAAE,WAAW,GAAG,SAA8B;AAC3E,QACE,oBAAC;EACC,WAAW,GACT,iEACA,UACD;EACD,GAAI;GACJ"}

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

@@ -0,0 +1,24 @@
+import React from "react";
+
+//#region src/components/table.d.ts
+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/esm/components/table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","names":[],"sources":["../../../src/components/table.tsx"],"mappings":";;;cAMa,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"}

package/dist/esm/components/table.js

@@ -0,0 +1,51 @@
+"use client";
+
+import { cn } from "@stackframe/stack-ui";
+import { jsx } from "react/jsx-runtime";
+import { forwardRefIfNeeded } from "@stackframe/stack-shared/dist/utils/react";
+import React from "react";
+
+//#region src/components/table.tsx
+const DesignTable = forwardRefIfNeeded(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	className: "relative w-full overflow-auto",
+	children: /* @__PURE__ */ jsx("table", {
+		ref,
+		className: cn("w-full caption-bottom text-sm", className),
+		...props
+	})
+}));
+DesignTable.displayName = "DesignTable";
+const DesignTableHeader = forwardRefIfNeeded(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", {
+	ref,
+	className: cn("bg-foreground/[0.02] [&_tr]:border-b [&_tr]:border-black/[0.06] dark:[&_tr]:border-white/[0.06]", className),
+	...props
+}));
+DesignTableHeader.displayName = "DesignTableHeader";
+const DesignTableBody = forwardRefIfNeeded(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", {
+	ref,
+	className: cn("[&_tr:last-child]:border-0", className),
+	...props
+}));
+DesignTableBody.displayName = "DesignTableBody";
+const DesignTableRow = forwardRefIfNeeded(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tr", {
+	ref,
+	className: cn("border-b border-black/[0.06] dark:border-white/[0.06] transition-colors duration-150 hover:transition-none hover:bg-foreground/[0.04] data-[state=selected]:bg-foreground/[0.06]", className),
+	...props
+}));
+DesignTableRow.displayName = "DesignTableRow";
+const DesignTableHead = forwardRefIfNeeded(({ className, ...props }, ref) => /* @__PURE__ */ jsx("th", {
+	ref,
+	className: cn("h-10 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className),
+	...props
+}));
+DesignTableHead.displayName = "DesignTableHead";
+const DesignTableCell = forwardRefIfNeeded(({ className, ...props }, ref) => /* @__PURE__ */ jsx("td", {
+	ref,
+	className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className),
+	...props
+}));
+DesignTableCell.displayName = "DesignTableCell";
+
+//#endregion
+export { DesignTable, DesignTableBody, DesignTableCell, DesignTableHead, DesignTableHeader, DesignTableRow };
+//# sourceMappingURL=table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","names":[],"sources":["../../../src/components/table.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRefIfNeeded } from \"@stackframe/stack-shared/dist/utils/react\";\nimport { cn } from \"@stackframe/stack-ui\";\nimport React from \"react\";\n\nexport const DesignTable = forwardRefIfNeeded<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n  <div className=\"relative w-full overflow-auto\">\n    <table\n      ref={ref}\n      className={cn(\"w-full caption-bottom text-sm\", className)}\n      {...props}\n    />\n  </div>\n));\nDesignTable.displayName = \"DesignTable\";\n\nexport const DesignTableHeader = forwardRefIfNeeded<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead\n    ref={ref}\n    className={cn(\"bg-foreground/[0.02] [&_tr]:border-b [&_tr]:border-black/[0.06] dark:[&_tr]:border-white/[0.06]\", className)}\n    {...props}\n  />\n));\nDesignTableHeader.displayName = \"DesignTableHeader\";\n\nexport const DesignTableBody = forwardRefIfNeeded<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn(\"[&_tr:last-child]:border-0\", className)}\n    {...props}\n  />\n));\nDesignTableBody.displayName = \"DesignTableBody\";\n\nexport const DesignTableRow = forwardRefIfNeeded<\n  HTMLTableRowElement,\n  React.HTMLAttributes<HTMLTableRowElement>\n>(({ className, ...props }, ref) => (\n  <tr\n    ref={ref}\n    className={cn(\n      \"border-b border-black/[0.06] dark:border-white/[0.06] transition-colors duration-150 hover:transition-none hover:bg-foreground/[0.04] data-[state=selected]:bg-foreground/[0.06]\",\n      className\n    )}\n    {...props}\n  />\n));\nDesignTableRow.displayName = \"DesignTableRow\";\n\nexport const DesignTableHead = forwardRefIfNeeded<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <th\n    ref={ref}\n    className={cn(\n      \"h-10 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n      className\n    )}\n    {...props}\n  />\n));\nDesignTableHead.displayName = \"DesignTableHead\";\n\nexport const DesignTableCell = forwardRefIfNeeded<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\n      \"p-4 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n      className\n    )}\n    {...props}\n  />\n));\nDesignTableCell.displayName = \"DesignTableCell\";\n"],"mappings":";;;;;;;;AAMA,MAAa,cAAc,oBAGxB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC;CAAI,WAAU;WACb,oBAAC;EACM;EACL,WAAW,GAAG,iCAAiC,UAAU;EACzD,GAAI;GACJ;EACE,CACN;AACF,YAAY,cAAc;AAE1B,MAAa,oBAAoB,oBAG9B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC;CACM;CACL,WAAW,GAAG,mGAAmG,UAAU;CAC3H,GAAI;EACJ,CACF;AACF,kBAAkB,cAAc;AAEhC,MAAa,kBAAkB,oBAG5B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC;CACM;CACL,WAAW,GAAG,8BAA8B,UAAU;CACtD,GAAI;EACJ,CACF;AACF,gBAAgB,cAAc;AAE9B,MAAa,iBAAiB,oBAG3B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC;CACM;CACL,WAAW,GACT,oLACA,UACD;CACD,GAAI;EACJ,CACF;AACF,eAAe,cAAc;AAE7B,MAAa,kBAAkB,oBAG5B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC;CACM;CACL,WAAW,GACT,0IACA,UACD;CACD,GAAI;EACJ,CACF;AACF,gBAAgB,cAAc;AAE9B,MAAa,kBAAkB,oBAG5B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC;CACM;CACL,WAAW,GACT,wFACA,UACD;CACD,GAAI;EACJ,CACF;AACF,gBAAgB,cAAc"}

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

@@ -0,0 +1,34 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/tabs.d.ts
+type DesignTabsSize = "sm" | "md";
+type DesignTabsGradient = "blue" | "cyan" | "purple" | "green" | "orange" | "default";
+type DesignCategoryTabItem = {
+  id: string;
+  label: string;
+  count?: number;
+  badgeCount?: number;
+};
+type DesignCategoryTabsProps = Omit<React.ComponentProps<"div">, "onSelect"> & {
+  categories: DesignCategoryTabItem[];
+  selectedCategory: string;
+  onSelect: (id: string) => void | Promise<void>;
+  showBadge?: boolean;
+  size?: DesignTabsSize;
+  glassmorphic?: boolean;
+  gradient?: DesignTabsGradient;
+};
+declare function DesignCategoryTabs({
+  categories,
+  selectedCategory,
+  onSelect,
+  showBadge,
+  size,
+  glassmorphic: glassmorphicProp,
+  gradient,
+  className,
+  ...props
+}: DesignCategoryTabsProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DesignCategoryTabItem, DesignCategoryTabs, DesignCategoryTabsProps };
+//# sourceMappingURL=tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","names":[],"sources":["../../../src/components/tabs.tsx"],"mappings":";;;KAOK,cAAA;AAAA,KACA,kBAAA;AAAA,KAEO,qBAAA;EACV,EAAA;EACA,KAAA;EACA,KAAA;EACA,UAAA;AAAA;AAAA,KAGU,uBAAA,GAA0B,IAAA,CAAK,KAAA,CAAM,cAAA;EAC/C,UAAA,EAAY,qBAAA;EACZ,gBAAA;EACA,QAAA,GAAW,EAAA,oBAAsB,OAAA;EACjC,SAAA;EACA,IAAA,GAAO,cAAA;EACP,YAAA;EACA,QAAA,GAAW,kBAAA;AAAA;AAAA,iBA8EG,kBAAA,CAAA;EACd,UAAA;EACA,gBAAA;EACA,QAAA;EACA,SAAA;EACA,IAAA;EACA,YAAA,EAAc,gBAAA;EACd,QAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,uBAAA,GAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/esm/components/tabs.js

@@ -0,0 +1,98 @@
+"use client";
+
+import { Spinner, cn } from "@stackframe/stack-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { useGlassmorphicDefault } from "./card.js";
+
+//#region src/components/tabs.tsx
+const tabSizeClasses = new Map([["sm", {
+	button: "px-3 py-2 text-xs",
+	badge: "text-[10px] px-1.5 py-0.5"
+}], ["md", {
+	button: "px-4 py-3 text-sm",
+	badge: "text-xs px-1.5 py-0.5"
+}]]);
+const gradientClasses = new Map([
+	["blue", {
+		activeText: "text-blue-700 dark:text-blue-400",
+		activeBadge: "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400",
+		underline: "bg-blue-700 dark:bg-blue-400"
+	}],
+	["cyan", {
+		activeText: "text-cyan-700 dark:text-cyan-300",
+		activeBadge: "bg-cyan-100 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300",
+		underline: "bg-cyan-600 dark:bg-cyan-400"
+	}],
+	["purple", {
+		activeText: "text-purple-700 dark:text-purple-300",
+		activeBadge: "bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300",
+		underline: "bg-purple-600 dark:bg-purple-400"
+	}],
+	["green", {
+		activeText: "text-emerald-700 dark:text-emerald-300",
+		activeBadge: "bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300",
+		underline: "bg-emerald-600 dark:bg-emerald-400"
+	}],
+	["orange", {
+		activeText: "text-amber-700 dark:text-amber-300",
+		activeBadge: "bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300",
+		underline: "bg-amber-600 dark:bg-amber-400"
+	}],
+	["default", {
+		activeText: "text-foreground",
+		activeBadge: "bg-foreground/10 text-foreground",
+		underline: "bg-foreground/80"
+	}]
+]);
+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 DesignCategoryTabs({ categories, selectedCategory, onSelect, showBadge = true, size = "sm", glassmorphic: glassmorphicProp, gradient = "blue", className, ...props }) {
+	const glassmorphic = useGlassmorphicDefault(glassmorphicProp);
+	const sizeClass = getMapValueOrThrow(tabSizeClasses, size, "tabSizeClasses");
+	const gradientClass = getMapValueOrThrow(gradientClasses, gradient, "gradientClasses");
+	const [loadingCategoryId, setLoadingCategoryId] = useState(null);
+	const handleSelect = (categoryId) => {
+		const result = onSelect(categoryId);
+		if (result && typeof result.then === "function") {
+			setLoadingCategoryId(categoryId);
+			runAsynchronouslyWithAlert(Promise.resolve(result).finally(() => setLoadingCategoryId(null)));
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center gap-1 overflow-x-auto flex-nowrap [&::-webkit-scrollbar]:hidden", glassmorphic ? "rounded-xl bg-black/[0.08] dark:bg-white/[0.04] p-1 backdrop-blur-sm" : "border-b border-gray-300 dark:border-gray-800", className),
+		...props,
+		children: categories.map((category) => {
+			const isActive = selectedCategory === category.id;
+			const badgeValue = category.badgeCount ?? category.count;
+			const shouldShowBadge = showBadge && badgeValue !== void 0;
+			return /* @__PURE__ */ jsxs("button", {
+				onClick: () => handleSelect(category.id),
+				disabled: loadingCategoryId !== null,
+				className: cn("font-medium transition-all duration-150 hover:transition-none relative flex flex-shrink-0 items-center justify-center gap-2 whitespace-nowrap", "hover:text-gray-900 dark:hover:text-gray-100", sizeClass.button, glassmorphic ? "rounded-lg" : "", isActive ? cn(gradientClass.activeText, glassmorphic && "bg-background shadow-sm ring-1 ring-black/[0.12] dark:ring-white/[0.06]") : "text-gray-700 dark:text-gray-400"),
+				children: [
+					loadingCategoryId === category.id && /* @__PURE__ */ jsx(Spinner, {
+						size: 12,
+						className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: cn("flex items-center gap-2", loadingCategoryId === category.id && "invisible"),
+						children: [category.label, shouldShowBadge && /* @__PURE__ */ jsx("span", {
+							className: cn("rounded-full", sizeClass.badge, isActive ? gradientClass.activeBadge : "bg-gray-200 dark:bg-gray-800 text-gray-600 dark:text-gray-400"),
+							children: badgeValue
+						})]
+					}),
+					!glassmorphic && isActive && /* @__PURE__ */ jsx("div", { className: cn("absolute bottom-0 left-0 right-0 h-0.5", gradientClass.underline) })
+				]
+			}, category.id);
+		})
+	});
+}
+
+//#endregion
+export { DesignCategoryTabs };
+//# sourceMappingURL=tabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","names":[],"sources":["../../../src/components/tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { cn, Spinner } from \"@stackframe/stack-ui\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { useGlassmorphicDefault } from \"./card\";\n\ntype DesignTabsSize = \"sm\" | \"md\";\ntype DesignTabsGradient = \"blue\" | \"cyan\" | \"purple\" | \"green\" | \"orange\" | \"default\";\n\nexport type DesignCategoryTabItem = {\n  id: string,\n  label: string,\n  count?: number,\n  badgeCount?: number,\n};\n\nexport type DesignCategoryTabsProps = Omit<React.ComponentProps<\"div\">, \"onSelect\"> & {\n  categories: DesignCategoryTabItem[],\n  selectedCategory: string,\n  onSelect: (id: string) => void | Promise<void>,\n  showBadge?: boolean,\n  size?: DesignTabsSize,\n  glassmorphic?: boolean,\n  gradient?: DesignTabsGradient,\n};\n\ntype TabSizeClass = {\n  button: string,\n  badge: string,\n};\n\ntype GradientClass = {\n  activeText: string,\n  activeBadge: string,\n  underline: string,\n};\n\nconst tabSizeClasses = new Map<DesignTabsSize, TabSizeClass>([\n  [\"sm\", { button: \"px-3 py-2 text-xs\", badge: \"text-[10px] px-1.5 py-0.5\" }],\n  [\"md\", { button: \"px-4 py-3 text-sm\", badge: \"text-xs px-1.5 py-0.5\" }],\n]);\n\nconst gradientClasses = new Map<DesignTabsGradient, GradientClass>([\n  [\n    \"blue\",\n    {\n      activeText: \"text-blue-700 dark:text-blue-400\",\n      activeBadge: \"bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400\",\n      underline: \"bg-blue-700 dark:bg-blue-400\",\n    },\n  ],\n  [\n    \"cyan\",\n    {\n      activeText: \"text-cyan-700 dark:text-cyan-300\",\n      activeBadge: \"bg-cyan-100 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300\",\n      underline: \"bg-cyan-600 dark:bg-cyan-400\",\n    },\n  ],\n  [\n    \"purple\",\n    {\n      activeText: \"text-purple-700 dark:text-purple-300\",\n      activeBadge: \"bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300\",\n      underline: \"bg-purple-600 dark:bg-purple-400\",\n    },\n  ],\n  [\n    \"green\",\n    {\n      activeText: \"text-emerald-700 dark:text-emerald-300\",\n      activeBadge: \"bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300\",\n      underline: \"bg-emerald-600 dark:bg-emerald-400\",\n    },\n  ],\n  [\n    \"orange\",\n    {\n      activeText: \"text-amber-700 dark:text-amber-300\",\n      activeBadge: \"bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300\",\n      underline: \"bg-amber-600 dark:bg-amber-400\",\n    },\n  ],\n  [\n    \"default\",\n    {\n      activeText: \"text-foreground\",\n      activeBadge: \"bg-foreground/10 text-foreground\",\n      underline: \"bg-foreground/80\",\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 function DesignCategoryTabs({\n  categories,\n  selectedCategory,\n  onSelect,\n  showBadge = true,\n  size = \"sm\",\n  glassmorphic: glassmorphicProp,\n  gradient = \"blue\",\n  className,\n  ...props\n}: DesignCategoryTabsProps) {\n  const glassmorphic = useGlassmorphicDefault(glassmorphicProp);\n  const sizeClass = getMapValueOrThrow(tabSizeClasses, size, \"tabSizeClasses\");\n  const gradientClass = getMapValueOrThrow(gradientClasses, gradient, \"gradientClasses\");\n  const [loadingCategoryId, setLoadingCategoryId] = useState<string | null>(null);\n\n  const handleSelect = (categoryId: string) => {\n    const result = onSelect(categoryId);\n    if (result && typeof (result as Promise<void>).then === \"function\") {\n      setLoadingCategoryId(categoryId);\n      runAsynchronouslyWithAlert(\n        Promise.resolve(result).finally(() => setLoadingCategoryId(null))\n      );\n    }\n  };\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-1 overflow-x-auto flex-nowrap [&::-webkit-scrollbar]:hidden\",\n        glassmorphic\n          ? \"rounded-xl bg-black/[0.08] dark:bg-white/[0.04] p-1 backdrop-blur-sm\"\n          : \"border-b border-gray-300 dark:border-gray-800\",\n        className\n      )}\n      {...props}\n    >\n      {categories.map((category) => {\n        const isActive = selectedCategory === category.id;\n        const badgeValue = category.badgeCount ?? category.count;\n        const shouldShowBadge = showBadge && badgeValue !== undefined;\n\n        return (\n          <button\n            key={category.id}\n            onClick={() => handleSelect(category.id)}\n            disabled={loadingCategoryId !== null}\n            className={cn(\n              \"font-medium transition-all duration-150 hover:transition-none relative flex flex-shrink-0 items-center justify-center gap-2 whitespace-nowrap\",\n              \"hover:text-gray-900 dark:hover:text-gray-100\",\n              sizeClass.button,\n              glassmorphic ? \"rounded-lg\" : \"\",\n              isActive\n                ? cn(\n                  gradientClass.activeText,\n                  glassmorphic && \"bg-background shadow-sm ring-1 ring-black/[0.12] dark:ring-white/[0.06]\"\n                )\n                : \"text-gray-700 dark:text-gray-400\"\n            )}\n          >\n            {loadingCategoryId === category.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              loadingCategoryId === category.id && \"invisible\"\n            )}>\n              {category.label}\n              {shouldShowBadge && (\n                <span\n                  className={cn(\n                    \"rounded-full\",\n                    sizeClass.badge,\n                    isActive\n                      ? gradientClass.activeBadge\n                      : \"bg-gray-200 dark:bg-gray-800 text-gray-600 dark:text-gray-400\"\n                  )}\n                >\n                  {badgeValue}\n                </span>\n              )}\n            </span>\n            {!glassmorphic && isActive && (\n              <div className={cn(\"absolute bottom-0 left-0 right-0 h-0.5\", gradientClass.underline)} />\n            )}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAsCA,MAAM,iBAAiB,IAAI,IAAkC,CAC3D,CAAC,MAAM;CAAE,QAAQ;CAAqB,OAAO;CAA6B,CAAC,EAC3E,CAAC,MAAM;CAAE,QAAQ;CAAqB,OAAO;CAAyB,CAAC,CACxE,CAAC;AAEF,MAAM,kBAAkB,IAAI,IAAuC;CACjE,CACE,QACA;EACE,YAAY;EACZ,aAAa;EACb,WAAW;EACZ,CACF;CACD,CACE,QACA;EACE,YAAY;EACZ,aAAa;EACb,WAAW;EACZ,CACF;CACD,CACE,UACA;EACE,YAAY;EACZ,aAAa;EACb,WAAW;EACZ,CACF;CACD,CACE,SACA;EACE,YAAY;EACZ,aAAa;EACb,WAAW;EACZ,CACF;CACD,CACE,UACA;EACE,YAAY;EACZ,aAAa;EACb,WAAW;EACZ,CACF;CACD,CACE,WACA;EACE,YAAY;EACZ,aAAa;EACb,WAAW;EACZ,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;;AAGT,SAAgB,mBAAmB,EACjC,YACA,kBACA,UACA,YAAY,MACZ,OAAO,MACP,cAAc,kBACd,WAAW,QACX,WACA,GAAG,SACuB;CAC1B,MAAM,eAAe,uBAAuB,iBAAiB;CAC7D,MAAM,YAAY,mBAAmB,gBAAgB,MAAM,iBAAiB;CAC5E,MAAM,gBAAgB,mBAAmB,iBAAiB,UAAU,kBAAkB;CACtF,MAAM,CAAC,mBAAmB,wBAAwB,SAAwB,KAAK;CAE/E,MAAM,gBAAgB,eAAuB;EAC3C,MAAM,SAAS,SAAS,WAAW;AACnC,MAAI,UAAU,OAAQ,OAAyB,SAAS,YAAY;AAClE,wBAAqB,WAAW;AAChC,8BACE,QAAQ,QAAQ,OAAO,CAAC,cAAc,qBAAqB,KAAK,CAAC,CAClE;;;AAIL,QACE,oBAAC;EACC,WAAW,GACT,qFACA,eACI,yEACA,iDACJ,UACD;EACD,GAAI;YAEH,WAAW,KAAK,aAAa;GAC5B,MAAM,WAAW,qBAAqB,SAAS;GAC/C,MAAM,aAAa,SAAS,cAAc,SAAS;GACnD,MAAM,kBAAkB,aAAa,eAAe;AAEpD,UACE,qBAAC;IAEC,eAAe,aAAa,SAAS,GAAG;IACxC,UAAU,sBAAsB;IAChC,WAAW,GACT,iJACA,gDACA,UAAU,QACV,eAAe,eAAe,IAC9B,WACI,GACA,cAAc,YACd,gBAAgB,0EACjB,GACC,mCACL;;KAEA,sBAAsB,SAAS,MAC9B,oBAAC;MACC,MAAM;MACN,WAAU;OACV;KAEJ,qBAAC;MAAK,WAAW,GACf,2BACA,sBAAsB,SAAS,MAAM,YACtC;iBACE,SAAS,OACT,mBACC,oBAAC;OACC,WAAW,GACT,gBACA,UAAU,OACV,WACI,cAAc,cACd,gEACL;iBAEA;QACI;OAEJ;KACN,CAAC,gBAAgB,YAChB,oBAAC,SAAI,WAAW,GAAG,0CAA0C,cAAc,UAAU,GAAI;;MA1CtF,SAAS,GA4CP;IAEX;GACE"}

package/dist/esm/index.d.ts

@@ -0,0 +1,21 @@
+import { DesignAlert, DesignAlertProps } from "./components/alert";
+import { DesignBadge, DesignBadgeColor, DesignBadgeContentMode, DesignBadgeProps, DesignBadgeSize } from "./components/badge";
+import { DesignButton, DesignButtonProps, DesignOriginalButtonProps } from "./components/button";
+import { DesignCard, DesignCardProps, DesignCardTint, DesignCardTintProps, useGlassmorphicDefault, useInsideDesignCard } from "./components/card";
+import { CursorBlastEffect, CursorBlastEffectProps } from "./components/cursor-blast-effect";
+import { DesignEditMode, useDesignEditMode } from "./components/edit-mode";
+import { DesignInput, DesignInputProps } from "./components/input";
+import { DesignPillToggle, DesignPillToggleOption, DesignPillToggleProps } from "./components/pill-toggle";
+import { DesignSeparator, DesignSeparatorProps } from "./components/separator";
+import { DesignSkeleton, DesignSkeletonProps } from "./components/skeleton";
+import { DesignTable, DesignTableBody, DesignTableCell, DesignTableHead, DesignTableHeader, DesignTableRow } from "./components/table";
+import { DesignCategoryTabItem, DesignCategoryTabs, DesignCategoryTabsProps } from "./components/tabs";
+import { DESIGN_CHART_AXIS_TICK_STYLE, DESIGN_CHART_COLORS, DESIGN_CHART_GRID_COLOR, DesignChartColorEntry, DesignChartColorName, getDesignChartColor } from "./components/chart-theme";
+import { DesignChartConfig, DesignChartContainer, DesignChartStyle, getPayloadConfigFromPayload, useDesignChart } from "./components/chart-container";
+import { DesignChartTooltip, DesignChartTooltipContent } from "./components/chart-tooltip";
+import { DesignChartLegend, DesignChartLegendContent } from "./components/chart-legend";
+import { DesignChartCard, DesignChartCardProps } from "./components/chart-card";
+import { DesignMetricCard, DesignMetricCardProps, DesignMetricCardTrend } from "./components/metric-card";
+import { DesignProgressBar, DesignProgressBarProps } from "./components/progress-bar";
+import { DesignEmptyState, DesignEmptyStateProps } from "./components/empty-state";
+export { CursorBlastEffect, type CursorBlastEffectProps, DESIGN_CHART_AXIS_TICK_STYLE, DESIGN_CHART_COLORS, DESIGN_CHART_GRID_COLOR, DesignAlert, type DesignAlertProps, DesignBadge, type DesignBadgeColor, type DesignBadgeContentMode, type DesignBadgeProps, type DesignBadgeSize, DesignButton, type DesignButtonProps, DesignCard, type DesignCardProps, DesignCardTint, type DesignCardTintProps, type DesignCategoryTabItem, DesignCategoryTabs, type DesignCategoryTabsProps, DesignChartCard, type DesignChartCardProps, type DesignChartColorEntry, type DesignChartColorName, type DesignChartConfig, DesignChartContainer, DesignChartLegend, DesignChartLegendContent, DesignChartStyle, DesignChartTooltip, DesignChartTooltipContent, DesignEditMode, DesignEmptyState, type DesignEmptyStateProps, DesignInput, type DesignInputProps, DesignMetricCard, type DesignMetricCardProps, type DesignMetricCardTrend, type DesignOriginalButtonProps, DesignPillToggle, type DesignPillToggleOption, type DesignPillToggleProps, DesignProgressBar, type DesignProgressBarProps, DesignSeparator, type DesignSeparatorProps, DesignSkeleton, type DesignSkeletonProps, DesignTable, DesignTableBody, DesignTableCell, DesignTableHead, DesignTableHeader, DesignTableRow, getDesignChartColor, getPayloadConfigFromPayload, useDesignChart, useDesignEditMode, useGlassmorphicDefault, useInsideDesignCard };

package/dist/esm/index.js

@@ -0,0 +1,22 @@
+import { DesignAlert } from "./components/alert.js";
+import { DesignBadge } from "./components/badge.js";
+import { DesignButton } from "./components/button.js";
+import { DesignCard, DesignCardTint, useGlassmorphicDefault, useInsideDesignCard } from "./components/card.js";
+import { CursorBlastEffect } from "./components/cursor-blast-effect.js";
+import { DesignEditMode, useDesignEditMode } from "./components/edit-mode.js";
+import { DesignInput } from "./components/input.js";
+import { DesignPillToggle } from "./components/pill-toggle.js";
+import { DesignSeparator } from "./components/separator.js";
+import { DesignSkeleton } from "./components/skeleton.js";
+import { DesignTable, DesignTableBody, DesignTableCell, DesignTableHead, DesignTableHeader, DesignTableRow } from "./components/table.js";
+import { DesignCategoryTabs } from "./components/tabs.js";
+import { DESIGN_CHART_AXIS_TICK_STYLE, DESIGN_CHART_COLORS, DESIGN_CHART_GRID_COLOR, getDesignChartColor } from "./components/chart-theme.js";
+import { DesignChartContainer, DesignChartStyle, getPayloadConfigFromPayload, useDesignChart } from "./components/chart-container.js";
+import { DesignChartTooltip, DesignChartTooltipContent } from "./components/chart-tooltip.js";
+import { DesignChartLegend, DesignChartLegendContent } from "./components/chart-legend.js";
+import { DesignChartCard } from "./components/chart-card.js";
+import { DesignMetricCard } from "./components/metric-card.js";
+import { DesignProgressBar } from "./components/progress-bar.js";
+import { DesignEmptyState } from "./components/empty-state.js";
+
+export { CursorBlastEffect, DESIGN_CHART_AXIS_TICK_STYLE, DESIGN_CHART_COLORS, DESIGN_CHART_GRID_COLOR, DesignAlert, DesignBadge, DesignButton, DesignCard, DesignCardTint, DesignCategoryTabs, DesignChartCard, DesignChartContainer, DesignChartLegend, DesignChartLegendContent, DesignChartStyle, DesignChartTooltip, DesignChartTooltipContent, DesignEditMode, DesignEmptyState, DesignInput, DesignMetricCard, DesignPillToggle, DesignProgressBar, DesignSeparator, DesignSkeleton, DesignTable, DesignTableBody, DesignTableCell, DesignTableHead, DesignTableHeader, DesignTableRow, getDesignChartColor, getPayloadConfigFromPayload, useDesignChart, useDesignEditMode, useGlassmorphicDefault, useInsideDesignCard };

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+import { DesignAlert, DesignAlertProps } from "./components/alert.js";
+import { DesignBadge, DesignBadgeColor, DesignBadgeContentMode, DesignBadgeProps, DesignBadgeSize } from "./components/badge.js";
+import { DesignButton, DesignButtonProps, DesignOriginalButtonProps } from "./components/button.js";
+import { DesignCard, DesignCardProps, DesignCardTint, DesignCardTintProps, useGlassmorphicDefault, useInsideDesignCard } from "./components/card.js";
+import { DesignChartCard, DesignChartCardProps } from "./components/chart-card.js";
+import { DesignChartConfig, DesignChartContainer, DesignChartStyle, getPayloadConfigFromPayload, useDesignChart } from "./components/chart-container.js";
+import { DesignChartLegend, DesignChartLegendContent } from "./components/chart-legend.js";
+import { DESIGN_CHART_AXIS_TICK_STYLE, DESIGN_CHART_COLORS, DESIGN_CHART_GRID_COLOR, DesignChartColorEntry, DesignChartColorName, getDesignChartColor } from "./components/chart-theme.js";
+import { DesignChartTooltip, DesignChartTooltipContent } from "./components/chart-tooltip.js";
+import { CursorBlastEffect, CursorBlastEffectProps } from "./components/cursor-blast-effect.js";
+import { DesignEditMode, useDesignEditMode } from "./components/edit-mode.js";
+import { DesignEmptyState, DesignEmptyStateProps } from "./components/empty-state.js";
+import { DesignInput, DesignInputProps } from "./components/input.js";
+import { DesignMetricCard, DesignMetricCardProps, DesignMetricCardTrend } from "./components/metric-card.js";
+import { DesignPillToggle, DesignPillToggleOption, DesignPillToggleProps } from "./components/pill-toggle.js";
+import { DesignProgressBar, DesignProgressBarProps } from "./components/progress-bar.js";
+import { DesignSeparator, DesignSeparatorProps } from "./components/separator.js";
+import { DesignSkeleton, DesignSkeletonProps } from "./components/skeleton.js";
+import { DesignTable, DesignTableBody, DesignTableCell, DesignTableHead, DesignTableHeader, DesignTableRow } from "./components/table.js";
+import { DesignCategoryTabItem, DesignCategoryTabs, DesignCategoryTabsProps } from "./components/tabs.js";
+export { CursorBlastEffect, type CursorBlastEffectProps, DESIGN_CHART_AXIS_TICK_STYLE, DESIGN_CHART_COLORS, DESIGN_CHART_GRID_COLOR, DesignAlert, type DesignAlertProps, DesignBadge, type DesignBadgeColor, type DesignBadgeContentMode, type DesignBadgeProps, type DesignBadgeSize, DesignButton, type DesignButtonProps, DesignCard, type DesignCardProps, DesignCardTint, type DesignCardTintProps, type DesignCategoryTabItem, DesignCategoryTabs, type DesignCategoryTabsProps, DesignChartCard, type DesignChartCardProps, type DesignChartColorEntry, type DesignChartColorName, type DesignChartConfig, DesignChartContainer, DesignChartLegend, DesignChartLegendContent, DesignChartStyle, DesignChartTooltip, DesignChartTooltipContent, DesignEditMode, DesignEmptyState, type DesignEmptyStateProps, DesignInput, type DesignInputProps, DesignMetricCard, type DesignMetricCardProps, type DesignMetricCardTrend, type DesignOriginalButtonProps, DesignPillToggle, type DesignPillToggleOption, type DesignPillToggleProps, DesignProgressBar, type DesignProgressBarProps, DesignSeparator, type DesignSeparatorProps, DesignSkeleton, type DesignSkeletonProps, DesignTable, DesignTableBody, DesignTableCell, DesignTableHead, DesignTableHeader, DesignTableRow, getDesignChartColor, getPayloadConfigFromPayload, useDesignChart, useDesignEditMode, useGlassmorphicDefault, useInsideDesignCard };