@hexclave/dashboard-ui-components 1.0.0

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

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

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

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

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

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

package/dist/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;;;;;;;;;;;iBAac,iBAAA,CAAA;EACd,KAAA;EACA,GAAA;EACA,QAAA;EACA,KAAA;EACA,cAAA;EACA,IAAA;EACA;AAAA,GACC,sBAAA,GAAsB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -0,0 +1,52 @@
+"use client";
+
+import { cn } from "@hexclave/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"]
+]);
+/**
+* Horizontal progress bar for quota / fill-level indicators. Takes a
+* `value` and optional `max` (defaults to 100 — pass raw values, the
+* component computes the percentage). Optional label + percentage display.
+*
+* ```tsx
+* <DesignProgressBar value={usedSeats} max={totalSeats} label="Seats used" showPercentage />
+* <DesignProgressBar value={75} gradient="green" />
+* ```
+*/
+function DesignProgressBar({ value, max = 100, gradient = "default", label, showPercentage = false, size = "md", className }) {
+	const percentage = max > 0 ? Math.min(Math.max(value / max * 100, 0), 100) : 0;
+	const fillClass = fillClasses.get(gradient) ?? "bg-foreground/60";
+	const trackHeight = size === "sm" ? "h-1.5" : size === "lg" ? "h-3" : "h-2";
+	return /* @__PURE__ */ 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\n/**\n * Horizontal progress bar for quota / fill-level indicators. Takes a\n * `value` and optional `max` (defaults to 100 — pass raw values, the\n * component computes the percentage). Optional label + percentage display.\n *\n * ```tsx\n * <DesignProgressBar value={usedSeats} max={totalSeats} label=\"Seats used\" showPercentage />\n * <DesignProgressBar value={75} gradient=\"green\" />\n * ```\n */\nexport function DesignProgressBar({\n  value,\n  max = 100,\n  gradient = \"default\",\n  label,\n  showPercentage = false,\n  size = \"md\",\n  className,\n}: DesignProgressBarProps) {\n  const percentage = max > 0 ? Math.min(Math.max((value / max) * 100, 0), 100) : 0;\n  const fillClass = fillClasses.get(gradient) ?? \"bg-foreground/60\";\n\n  const trackHeight = size === \"sm\" ? \"h-1.5\" : size === \"lg\" ? \"h-3\" : \"h-2\";\n\n  return (\n    <div className={cn(\"w-full\", className)}>\n      {(label || showPercentage) && (\n        <div className=\"flex items-center justify-between mb-2\">\n          {label && (\n            <span className=\"text-xs font-medium text-muted-foreground\">\n              {label}\n            </span>\n          )}\n          {showPercentage && (\n            <span className=\"text-xs font-medium tabular-nums text-foreground\">\n              {Math.round(percentage)}%\n            </span>\n          )}\n        </div>\n      )}\n      <div\n        className={cn(\n          \"w-full rounded-full bg-black/[0.06] dark:bg-white/[0.06] overflow-hidden\",\n          trackHeight\n        )}\n      >\n        <div\n          className={cn(\n            \"h-full rounded-full transition-all duration-300 ease-out\",\n            fillClass\n          )}\n          style={{ width: `${percentage}%` }}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAMA,MAAM,cAAc,IAAI,IAAuC;CAC7D,CAAC,QAAQ,+BAA+B;CACxC,CAAC,QAAQ,+BAA+B;CACxC,CAAC,UAAU,mCAAmC;CAC9C,CAAC,SAAS,qCAAqC;CAC/C,CAAC,UAAU,iCAAiC;CAC5C,CAAC,WAAW,mBAAmB;CAChC,CAAC;;;;;;;;;;;AAsBF,SAAgB,kBAAkB,EAChC,OACA,MAAM,KACN,WAAW,WACX,OACA,iBAAiB,OACjB,OAAO,MACP,aACyB;CACzB,MAAM,aAAa,MAAM,IAAI,KAAK,IAAI,KAAK,IAAK,QAAQ,MAAO,KAAK,EAAE,EAAE,IAAI,GAAG;CAC/E,MAAM,YAAY,YAAY,IAAI,SAAS,IAAI;CAE/C,MAAM,cAAc,SAAS,OAAO,UAAU,SAAS,OAAO,QAAQ;AAEtE,QACE,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,23 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/separator.d.ts
+type DesignSeparatorProps = {
+  orientation?: "horizontal" | "vertical";
+} & React.HTMLAttributes<HTMLDivElement>;
+/**
+ * Thin divider line. Use `orientation="vertical"` inside a flex row to
+ * separate inline groups, or omit for a horizontal rule between sections.
+ *
+ * ```tsx
+ * <DesignSeparator />
+ * <DesignSeparator orientation="vertical" className="h-6" />
+ * ```
+ */
+declare function DesignSeparator({
+  orientation,
+  className,
+  ...props
+}: DesignSeparatorProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DesignSeparator, DesignSeparatorProps };
+//# sourceMappingURL=separator.d.ts.map

package/dist/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;AAFzB;;;;;;;;;AAAA,iBAagB,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,27 @@
+"use client";
+
+import { cn } from "@hexclave/ui";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/separator.tsx
+/**
+* Thin divider line. Use `orientation="vertical"` inside a flex row to
+* separate inline groups, or omit for a horizontal rule between sections.
+*
+* ```tsx
+* <DesignSeparator />
+* <DesignSeparator orientation="vertical" className="h-6" />
+* ```
+*/
+function DesignSeparator({ orientation = "horizontal", className, ...props }) {
+	return /* @__PURE__ */ 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\n/**\n * Thin divider line. Use `orientation=\"vertical\"` inside a flex row to\n * separate inline groups, or omit for a horizontal rule between sections.\n *\n * ```tsx\n * <DesignSeparator />\n * <DesignSeparator orientation=\"vertical\" className=\"h-6\" />\n * ```\n */\nexport function DesignSeparator({\n  orientation = \"horizontal\",\n  className,\n  ...props\n}: DesignSeparatorProps) {\n  return (\n    <div\n      role=\"separator\"\n      aria-orientation={orientation}\n      className={cn(\n        orientation === \"horizontal\"\n          ? \"h-[1px] w-full bg-black/[0.08] dark:bg-white/[0.06]\"\n          : \"w-[1px] h-full bg-black/[0.08] dark:bg-white/[0.06]\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,SAAgB,gBAAgB,EAC9B,cAAc,cACd,WACA,GAAG,SACoB;AACvB,QACE,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,24 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import React from "react";
+
+//#region src/components/skeleton.d.ts
+type DesignSkeletonProps = React.HTMLAttributes<HTMLDivElement>;
+/**
+ * Animated placeholder block. Use while data is loading — size it via
+ * `className` to match the content it's standing in for.
+ *
+ * ```tsx
+ * <DesignSkeleton className="h-4 w-[200px]" />
+ * <DesignSkeleton className="h-24 w-full rounded-lg" />
+ * ```
+ *
+ * Rule: always show a skeleton during initial load, not a spinner or
+ * "Loading..." text. Skeletons preserve layout and feel faster.
+ */
+declare function DesignSkeleton({
+  className,
+  ...props
+}: DesignSkeletonProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DesignSkeleton, DesignSkeletonProps };
+//# sourceMappingURL=skeleton.d.ts.map

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

package/dist/esm/components/skeleton.js

@@ -0,0 +1,28 @@
+"use client";
+
+import { cn } from "@hexclave/ui";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/skeleton.tsx
+/**
+* Animated placeholder block. Use while data is loading — size it via
+* `className` to match the content it's standing in for.
+*
+* ```tsx
+* <DesignSkeleton className="h-4 w-[200px]" />
+* <DesignSkeleton className="h-24 w-full rounded-lg" />
+* ```
+*
+* Rule: always show a skeleton during initial load, not a spinner or
+* "Loading..." text. Skeletons preserve layout and feel faster.
+*/
+function DesignSkeleton({ className, ...props }) {
+	return /* @__PURE__ */ 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\n/**\n * Animated placeholder block. Use while data is loading — size it via\n * `className` to match the content it's standing in for.\n *\n * ```tsx\n * <DesignSkeleton className=\"h-4 w-[200px]\" />\n * <DesignSkeleton className=\"h-24 w-full rounded-lg\" />\n * ```\n *\n * Rule: always show a skeleton during initial load, not a spinner or\n * \"Loading...\" text. Skeletons preserve layout and feel faster.\n */\nexport function DesignSkeleton({ className, ...props }: DesignSkeletonProps) {\n  return (\n    <div\n      className={cn(\n        \"animate-pulse rounded-md bg-black/[0.06] dark:bg-white/[0.06]\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAmBA,SAAgB,eAAe,EAAE,WAAW,GAAG,SAA8B;AAC3E,QACE,oBAAC;EACC,WAAW,GACT,iEACA,UACD;EACD,GAAI;GACJ"}

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

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

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

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

package/dist/esm/components/table.js

@@ -0,0 +1,76 @@
+"use client";
+
+import { cn } from "@hexclave/ui";
+import { jsx } from "react/jsx-runtime";
+import { forwardRefIfNeeded } from "@hexclave/shared/dist/utils/react";
+import React from "react";
+
+//#region src/components/table.tsx
+/**
+* Simple static table — header + rows + cells. Use this for small,
+* read-only lists (< 20 rows, no interaction). For anything that needs
+* sorting, filtering, pagination, or virtualization, use `DataGrid` +
+* `useDataSource` instead.
+*
+* ```tsx
+* <DesignTable>
+*   <DesignTableHeader>
+*     <DesignTableRow>
+*       <DesignTableHead>Name</DesignTableHead>
+*       <DesignTableHead>Email</DesignTableHead>
+*     </DesignTableRow>
+*   </DesignTableHeader>
+*   <DesignTableBody>
+*     {rows.map(row => (
+*       <DesignTableRow key={row.id}>
+*         <DesignTableCell>{row.name}</DesignTableCell>
+*         <DesignTableCell>{row.email}</DesignTableCell>
+*       </DesignTableRow>
+*     ))}
+*   </DesignTableBody>
+* </DesignTable>
+* ```
+*/
+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\n/**\n * Simple static table — header + rows + cells. Use this for small,\n * read-only lists (< 20 rows, no interaction). For anything that needs\n * sorting, filtering, pagination, or virtualization, use `DataGrid` +\n * `useDataSource` instead.\n *\n * ```tsx\n * <DesignTable>\n *   <DesignTableHeader>\n *     <DesignTableRow>\n *       <DesignTableHead>Name</DesignTableHead>\n *       <DesignTableHead>Email</DesignTableHead>\n *     </DesignTableRow>\n *   </DesignTableHeader>\n *   <DesignTableBody>\n *     {rows.map(row => (\n *       <DesignTableRow key={row.id}>\n *         <DesignTableCell>{row.name}</DesignTableCell>\n *         <DesignTableCell>{row.email}</DesignTableCell>\n *       </DesignTableRow>\n *     ))}\n *   </DesignTableBody>\n * </DesignTable>\n * ```\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,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,38 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
+
+//#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;
+  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+};
+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; /** Renders inside the tab bar after the tab buttons (not a tab). */
+  trailing?: ReactNode;
+};
+declare function DesignCategoryTabs({
+  categories,
+  selectedCategory,
+  onSelect,
+  showBadge,
+  size,
+  glassmorphic: glassmorphicProp,
+  gradient,
+  trailing,
+  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;EACA,IAAA,GAAO,KAAA,CAAM,aAAA,CAAc,KAAA,CAAM,QAAA,CAAS,aAAA;AAAA;AAAA,KAGhC,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,EAVgB;EAY3B,QAAA,GAAW,SAAA;AAAA;AAAA,iBA8EG,kBAAA,CAAA;EACd,UAAA;EACA,gBAAA;EACA,QAAA;EACA,SAAA;EACA,IAAA;EACA,YAAA,EAAc,gBAAA;EACd,QAAA;EACA,QAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,uBAAA,GAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA"}