@hexclave/dashboard-ui-components 1.0.0

package/dist/components/table.js

@@ -0,0 +1,84 @@
+"use client";
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../chunk-BE-pF4vm.js');
+let _stackframe_stack_ui = require("@hexclave/ui");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _stackframe_stack_shared_dist_utils_react = require("@hexclave/shared/dist/utils/react");
+let react = require("react");
+react = require_chunk.__toESM(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 = (0, _stackframe_stack_shared_dist_utils_react.forwardRefIfNeeded)(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: "relative w-full overflow-auto",
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("table", {
+		ref,
+		className: (0, _stackframe_stack_ui.cn)("w-full caption-bottom text-sm", className),
+		...props
+	})
+}));
+DesignTable.displayName = "DesignTable";
+const DesignTableHeader = (0, _stackframe_stack_shared_dist_utils_react.forwardRefIfNeeded)(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
+	ref,
+	className: (0, _stackframe_stack_ui.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 = (0, _stackframe_stack_shared_dist_utils_react.forwardRefIfNeeded)(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", {
+	ref,
+	className: (0, _stackframe_stack_ui.cn)("[&_tr:last-child]:border-0", className),
+	...props
+}));
+DesignTableBody.displayName = "DesignTableBody";
+const DesignTableRow = (0, _stackframe_stack_shared_dist_utils_react.forwardRefIfNeeded)(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
+	ref,
+	className: (0, _stackframe_stack_ui.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 = (0, _stackframe_stack_shared_dist_utils_react.forwardRefIfNeeded)(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+	ref,
+	className: (0, _stackframe_stack_ui.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 = (0, _stackframe_stack_shared_dist_utils_react.forwardRefIfNeeded)(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+	ref,
+	className: (0, _stackframe_stack_ui.cn)("p-4 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className),
+	...props
+}));
+DesignTableCell.displayName = "DesignTableCell";
+
+//#endregion
+exports.DesignTable = DesignTable;
+exports.DesignTableBody = DesignTableBody;
+exports.DesignTableCell = DesignTableCell;
+exports.DesignTableHead = DesignTableHead;
+exports.DesignTableHeader = DesignTableHeader;
+exports.DesignTableRow = DesignTableRow;
+//# sourceMappingURL=table.js.map

package/dist/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,iFAGV,EAAE,WAAW,GAAG,SAAS,QAC1B,2CAAC;CAAI,WAAU;WACb,2CAAC;EACM;EACL,wCAAc,iCAAiC,UAAU;EACzD,GAAI;GACJ;EACE,CACN;AACF,YAAY,cAAc;AAE1B,MAAa,uFAGV,EAAE,WAAW,GAAG,SAAS,QAC1B,2CAAC;CACM;CACL,wCAAc,mGAAmG,UAAU;CAC3H,GAAI;EACJ,CACF;AACF,kBAAkB,cAAc;AAEhC,MAAa,qFAGV,EAAE,WAAW,GAAG,SAAS,QAC1B,2CAAC;CACM;CACL,wCAAc,8BAA8B,UAAU;CACtD,GAAI;EACJ,CACF;AACF,gBAAgB,cAAc;AAE9B,MAAa,oFAGV,EAAE,WAAW,GAAG,SAAS,QAC1B,2CAAC;CACM;CACL,wCACE,oLACA,UACD;CACD,GAAI;EACJ,CACF;AACF,eAAe,cAAc;AAE7B,MAAa,qFAGV,EAAE,WAAW,GAAG,SAAS,QAC1B,2CAAC;CACM;CACL,wCACE,0IACA,UACD;CACD,GAAI;EACJ,CACF;AACF,gBAAgB,cAAc;AAE9B,MAAa,qFAGV,EAAE,WAAW,GAAG,SAAS,QAC1B,2CAAC;CACM;CACL,wCACE,wFACA,UACD;CACD,GAAI;EACJ,CACF;AACF,gBAAgB,cAAc"}

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

package/dist/components/tabs.js

@@ -0,0 +1,113 @@
+"use client";
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../chunk-BE-pF4vm.js');
+let _stackframe_stack_ui = require("@hexclave/ui");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let _stackframe_stack_shared_dist_utils_promises = require("@hexclave/shared/dist/utils/promises");
+let __card_js = require("./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", trailing, className, ...props }) {
+	const glassmorphic = (0, __card_js.useGlassmorphicDefault)(glassmorphicProp);
+	const sizeClass = getMapValueOrThrow(tabSizeClasses, size, "tabSizeClasses");
+	const gradientClass = getMapValueOrThrow(gradientClasses, gradient, "gradientClasses");
+	const [loadingCategoryId, setLoadingCategoryId] = (0, react.useState)(null);
+	const handleSelect = (categoryId) => {
+		const result = onSelect(categoryId);
+		if (result && typeof result.then === "function") {
+			setLoadingCategoryId(categoryId);
+			(0, _stackframe_stack_shared_dist_utils_promises.runAsynchronouslyWithAlert)(Promise.resolve(result).finally(() => setLoadingCategoryId(null)));
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _stackframe_stack_ui.cn)("flex w-full min-w-0 items-center gap-2", 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: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, _stackframe_stack_ui.cn)("flex min-h-0 min-w-0 flex-1 items-center gap-1 overflow-x-auto flex-nowrap [&::-webkit-scrollbar]:hidden"),
+			children: categories.map((category) => {
+				const isActive = selectedCategory === category.id;
+				const badgeValue = category.badgeCount ?? category.count;
+				const shouldShowBadge = showBadge && badgeValue !== void 0;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					onClick: () => handleSelect(category.id),
+					disabled: loadingCategoryId !== null,
+					className: (0, _stackframe_stack_ui.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 ? (0, _stackframe_stack_ui.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__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Spinner, {
+							size: 12,
+							className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: (0, _stackframe_stack_ui.cn)("flex items-center gap-2", loadingCategoryId === category.id && "invisible"),
+							children: [
+								category.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(category.icon, {
+									className: "h-4 w-4 shrink-0",
+									"aria-hidden": true
+								}),
+								category.label,
+								shouldShowBadge && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: (0, _stackframe_stack_ui.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__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, _stackframe_stack_ui.cn)("absolute bottom-0 left-0 right-0 h-0.5", gradientClass.underline) })
+					]
+				}, category.id);
+			})
+		}), trailing != null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex shrink-0 items-center",
+			children: trailing
+		}) : null]
+	});
+}
+
+//#endregion
+exports.DesignCategoryTabs = DesignCategoryTabs;
+//# sourceMappingURL=tabs.js.map

package/dist/components/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","names":["Spinner"],"sources":["../../src/components/tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, type ReactNode } 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  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>,\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  /** Renders inside the tab bar after the tab buttons (not a tab). */\n  trailing?: ReactNode,\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  trailing,\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 w-full min-w-0 items-center gap-2\",\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      <div\n        className={cn(\n          \"flex min-h-0 min-w-0 flex-1 items-center gap-1 overflow-x-auto flex-nowrap [&::-webkit-scrollbar]:hidden\",\n        )}\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.icon && (\n                  <category.icon className=\"h-4 w-4 shrink-0\" aria-hidden />\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      {trailing != null ? (\n        <div className=\"flex shrink-0 items-center\">\n          {trailing}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAyCA,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,UACA,WACA,GAAG,SACuB;CAC1B,MAAM,qDAAsC,iBAAiB;CAC7D,MAAM,YAAY,mBAAmB,gBAAgB,MAAM,iBAAiB;CAC5E,MAAM,gBAAgB,mBAAmB,iBAAiB,UAAU,kBAAkB;CACtF,MAAM,CAAC,mBAAmB,4CAAgD,KAAK;CAE/E,MAAM,gBAAgB,eAAuB;EAC3C,MAAM,SAAS,SAAS,WAAW;AACnC,MAAI,UAAU,OAAQ,OAAyB,SAAS,YAAY;AAClE,wBAAqB,WAAW;AAChC,gFACE,QAAQ,QAAQ,OAAO,CAAC,cAAc,qBAAqB,KAAK,CAAC,CAClE;;;AAIL,QACE,4CAAC;EACC,wCACE,0CACA,eACI,yEACA,iDACJ,UACD;EACD,GAAI;aAEJ,2CAAC;GACC,wCACE,2GACD;aAEA,WAAW,KAAK,aAAa;IAC5B,MAAM,WAAW,qBAAqB,SAAS;IAC/C,MAAM,aAAa,SAAS,cAAc,SAAS;IACnD,MAAM,kBAAkB,aAAa,eAAe;AAEpD,WACE,4CAAC;KAEC,eAAe,aAAa,SAAS,GAAG;KACxC,UAAU,sBAAsB;KAChC,wCACE,iJACA,gDACA,UAAU,QACV,eAAe,eAAe,IAC9B,wCAEI,cAAc,YACd,gBAAgB,0EACjB,GACC,mCACL;;MAEA,sBAAsB,SAAS,MAC9B,2CAACA;OACC,MAAM;OACN,WAAU;QACV;MAEJ,4CAAC;OAAK,wCACJ,2BACA,sBAAsB,SAAS,MAAM,YACtC;;QACE,SAAS,QACR,2CAAC,SAAS;SAAK,WAAU;SAAmB;UAAc;QAE3D,SAAS;QACT,mBACC,2CAAC;SACC,wCACE,gBACA,UAAU,OACV,WACI,cAAc,cACd,gEACL;mBAEA;UACI;;QAEJ;MACN,CAAC,gBAAgB,YAChB,2CAAC,SAAI,wCAAc,0CAA0C,cAAc,UAAU,GAAI;;OA7CtF,SAAS,GA+CP;KAEX;IACE,EACL,YAAY,OACX,2CAAC;GAAI,WAAU;aACZ;IACG,GACJ;GACA"}