npm - @hexclave/dashboard-ui-components - Versions diffs - 1.0.41 → 1.0.43 - Mend

@hexclave/dashboard-ui-components 1.0.41 → 1.0.43

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (355) hide show

package/dist/components/pill-toggle.js CHANGED Viewed

@@ -1,16 +1,13 @@
 "use client";
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_chunk = require('../chunk-BE-pF4vm.js');
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let _hexclave_ui = require("@hexclave/ui");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 let _hexclave_shared_dist_utils_promises = require("@hexclave/shared/dist/utils/promises");
 let __card_js = require("./card.js");
 //#region src/components/pill-toggle.tsx
 const sliderTransition = "transform 200ms ease-out, width 200ms ease-out";
-const sizeClasses = new Map([
+const sizeClasses = /* @__PURE__ */ new Map([
 	["sm", {
 		button: "px-3 py-1.5 text-xs",
 		iconOnlyButton: "h-7 w-7 text-xs",
@@ -27,7 +24,7 @@ const sizeClasses = new Map([
 		icon: "h-4 w-4"
 	}]
 ]);
-const gradientClasses = new Map([
+const gradientClasses = /* @__PURE__ */ 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"],
@@ -130,7 +127,7 @@ function DesignPillToggle({ options, selected, onSelect, size = "md", glassmorph
 	});
 	return showLabels ? body : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.TooltipProvider, { children: body });
 }
 //#endregion
 exports.DesignPillToggle = DesignPillToggle;
 //# sourceMappingURL=pill-toggle.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"pill-toggle.js","names":["Spinner","Tooltip","TooltipTrigger","TooltipPortal","TooltipContent","TooltipProvider"],"sources":["../../src/components/pill-toggle.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport { cn, Spinner, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger } from \"@hexclave/ui\";\nimport { runAsynchronouslyWithAlert } from \"@hexclave/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 iconOnlyButton: string,\n icon: string,\n};\n\ntype SliderMetrics = {\n left: number,\n width: number,\n};\n\nconst sliderTransition = \"transform 200ms ease-out, width 200ms ease-out\";\n\nconst sizeClasses = new Map<DesignPillToggleSize, SizeClass>([\n [\"sm\", { button: \"px-3 py-1.5 text-xs\", iconOnlyButton: \"h-7 w-7 text-xs\", icon: \"h-3.5 w-3.5\" }],\n [\"md\", { button: \"px-4 py-2 text-sm\", iconOnlyButton: \"h-9 w-9 text-sm\", icon: \"h-4 w-4\" }],\n [\"lg\", { button: \"px-5 py-2.5 text-sm\", iconOnlyButton: \"h-10 w-10 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 const [sliderMetrics, setSliderMetrics] = useState<SliderMetrics \| null>(null);\n const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);\n const toggleRef = useRef<HTMLDivElement \| null>(null);\n const optionRefs = useRef(new Map<string, HTMLButtonElement>());\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 useEffect(() => {\n if (typeof window === \"undefined\" \|\| typeof window.matchMedia !== \"function\") return;\n const mediaQuery = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n const updatePrefersReducedMotion = () => setPrefersReducedMotion(mediaQuery.matches);\n\n updatePrefersReducedMotion();\n mediaQuery.addEventListener(\"change\", updatePrefersReducedMotion);\n\n return () => mediaQuery.removeEventListener(\"change\", updatePrefersReducedMotion);\n }, []);\n\n useEffect(() => {\n const toggle = toggleRef.current;\n const selectedButton = optionRefs.current.get(selected);\n\n if (!toggle \|\| !selectedButton) {\n setSliderMetrics(null);\n return;\n }\n\n const updateSliderMetrics = () => {\n setSliderMetrics({\n left: selectedButton.offsetLeft,\n width: selectedButton.offsetWidth,\n });\n };\n\n updateSliderMetrics();\n\n if (typeof ResizeObserver === \"undefined\") return;\n const resizeObserver = new ResizeObserver(updateSliderMetrics);\n resizeObserver.observe(toggle);\n resizeObserver.observe(selectedButton);\n\n return () => resizeObserver.disconnect();\n }, [options, selected]);\n\n const body = (\n <div\n ref={toggleRef}\n className={cn(\n \"relative 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 {sliderMetrics != null && (\n <div\n className={cn(\n \"pointer-events-none absolute inset-y-1 left-0 z-0 rounded-lg bg-white dark:bg-background shadow-sm ring-1\",\n glassmorphic\n ? \"ring-foreground/[0.06] dark:bg-[hsl(240,71%,70%)]/10 dark:ring-[hsl(240,71%,70%)]/20\"\n : activeRingClass\n )}\n style={{\n transition: prefersReducedMotion ? undefined : sliderTransition,\n transform: `translateX(${sliderMetrics.left}px)`,\n width: sliderMetrics.width,\n }}\n />\n )}\n {options.map((option) => {\n const isActive = selected === option.id;\n const Icon = option.icon;\n\n const pill = (\n <button\n type=\"button\"\n key={option.id}\n ref={(element) => {\n if (element) {\n optionRefs.current.set(option.id, element);\n } else {\n optionRefs.current.delete(option.id);\n }\n }}\n onClick={() => handleClick(option.id)}\n disabled={loadingOptionId !== null}\n aria-label={showLabels ? undefined : option.label}\n className={cn(\n \"relative z-10 flex items-center gap-2 font-medium rounded-lg transition-all duration-150 hover:transition-none\",\n showLabels ? sizeClass.button : sizeClass.iconOnlyButton,\n !showLabels && \"justify-center p-0\",\n isActive\n ? cn(\"text-foreground\", glassmorphic && \"dark:text-[hsl(240,71%,90%)]\")\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 // Tooltips require a TooltipProvider in scope. Wrap defensively so callers\n // outside an existing provider (e.g. inside a PageLayout actions slot) work.\n return showLabels ? body : <TooltipProvider>{body}</TooltipProvider>;\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"pill-toggle.js","names":["Spinner","Tooltip","TooltipTrigger","TooltipPortal","TooltipContent","TooltipProvider"],"sources":["../../src/components/pill-toggle.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport { cn, Spinner, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger } from \"@hexclave/ui\";\nimport { runAsynchronouslyWithAlert } from \"@hexclave/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 iconOnlyButton: string,\n icon: string,\n};\n\ntype SliderMetrics = {\n left: number,\n width: number,\n};\n\nconst sliderTransition = \"transform 200ms ease-out, width 200ms ease-out\";\n\nconst sizeClasses = new Map<DesignPillToggleSize, SizeClass>([\n [\"sm\", { button: \"px-3 py-1.5 text-xs\", iconOnlyButton: \"h-7 w-7 text-xs\", icon: \"h-3.5 w-3.5\" }],\n [\"md\", { button: \"px-4 py-2 text-sm\", iconOnlyButton: \"h-9 w-9 text-sm\", icon: \"h-4 w-4\" }],\n [\"lg\", { button: \"px-5 py-2.5 text-sm\", iconOnlyButton: \"h-10 w-10 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 const [sliderMetrics, setSliderMetrics] = useState<SliderMetrics \| null>(null);\n const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);\n const toggleRef = useRef<HTMLDivElement \| null>(null);\n const optionRefs = useRef(new Map<string, HTMLButtonElement>());\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 useEffect(() => {\n if (typeof window === \"undefined\" \|\| typeof window.matchMedia !== \"function\") return;\n const mediaQuery = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n const updatePrefersReducedMotion = () => setPrefersReducedMotion(mediaQuery.matches);\n\n updatePrefersReducedMotion();\n mediaQuery.addEventListener(\"change\", updatePrefersReducedMotion);\n\n return () => mediaQuery.removeEventListener(\"change\", updatePrefersReducedMotion);\n }, []);\n\n useEffect(() => {\n const toggle = toggleRef.current;\n const selectedButton = optionRefs.current.get(selected);\n\n if (!toggle \|\| !selectedButton) {\n setSliderMetrics(null);\n return;\n }\n\n const updateSliderMetrics = () => {\n setSliderMetrics({\n left: selectedButton.offsetLeft,\n width: selectedButton.offsetWidth,\n });\n };\n\n updateSliderMetrics();\n\n if (typeof ResizeObserver === \"undefined\") return;\n const resizeObserver = new ResizeObserver(updateSliderMetrics);\n resizeObserver.observe(toggle);\n resizeObserver.observe(selectedButton);\n\n return () => resizeObserver.disconnect();\n }, [options, selected]);\n\n const body = (\n <div\n ref={toggleRef}\n className={cn(\n \"relative 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 {sliderMetrics != null && (\n <div\n className={cn(\n \"pointer-events-none absolute inset-y-1 left-0 z-0 rounded-lg bg-white dark:bg-background shadow-sm ring-1\",\n glassmorphic\n ? \"ring-foreground/[0.06] dark:bg-[hsl(240,71%,70%)]/10 dark:ring-[hsl(240,71%,70%)]/20\"\n : activeRingClass\n )}\n style={{\n transition: prefersReducedMotion ? undefined : sliderTransition,\n transform: `translateX(${sliderMetrics.left}px)`,\n width: sliderMetrics.width,\n }}\n />\n )}\n {options.map((option) => {\n const isActive = selected === option.id;\n const Icon = option.icon;\n\n const pill = (\n <button\n type=\"button\"\n key={option.id}\n ref={(element) => {\n if (element) {\n optionRefs.current.set(option.id, element);\n } else {\n optionRefs.current.delete(option.id);\n }\n }}\n onClick={() => handleClick(option.id)}\n disabled={loadingOptionId !== null}\n aria-label={showLabels ? undefined : option.label}\n className={cn(\n \"relative z-10 flex items-center gap-2 font-medium rounded-lg transition-all duration-150 hover:transition-none\",\n showLabels ? sizeClass.button : sizeClass.iconOnlyButton,\n !showLabels && \"justify-center p-0\",\n isActive\n ? cn(\"text-foreground\", glassmorphic && \"dark:text-[hsl(240,71%,90%)]\")\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 // Tooltips require a TooltipProvider in scope. Wrap defensively so callers\n // outside an existing provider (e.g. inside a PageLayout actions slot) work.\n return showLabels ? body : <TooltipProvider>{body}</TooltipProvider>;\n}\n"],"mappings":"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"}

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

@@ -1,5 +1,3 @@
-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 = {
@@ -29,7 +27,7 @@ declare function DesignProgressBar({
   showPercentage,
   size,
   className
-}: DesignProgressBarProps): react_jsx_runtime0.JSX.Element;
+}: DesignProgressBarProps): import("react/jsx-runtime").JSX.Element;
 //#endregion
 export { DesignProgressBar, DesignProgressBarProps };
 //# sourceMappingURL=progress-bar.d.ts.map

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

	@@ -1 +1 @@
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"}
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,yBAAyB;EACpC,KAAA;EACA,cAAA;EACA,IAAA;EACA,SAAA;AAAA;;;;;;;;;;AAAS;iBAaK,iBAAA;EACd,KAAA;EACA,GAAA;EACA,QAAA;EACA,KAAA;EACA,cAAA;EACA,IAAA;EACA;AAAA,GACC,sBAAA,+BAAsB,GAAA,CAAA,OAAA"}

package/dist/components/progress-bar.js CHANGED Viewed

@@ -1,12 +1,9 @@
 "use client";
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_chunk = require('../chunk-BE-pF4vm.js');
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let _hexclave_ui = require("@hexclave/ui");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/progress-bar.tsx
-const fillClasses = new Map([
+const fillClasses = /* @__PURE__ */ 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"],
@@ -48,7 +45,7 @@ function DesignProgressBar({ value, max = 100, gradient = "default", label, show
 		})]
 	});
 }
 //#endregion
 exports.DesignProgressBar = DesignProgressBar;
 //# sourceMappingURL=progress-bar.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"progress-bar.js","names":[],"sources":["../../src/components/progress-bar.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@hexclave/ui\";\n\ntype DesignProgressBarGradient = \"blue\" \| \"cyan\" \| \"purple\" \| \"green\" \| \"orange\" \| \"default\";\n\nconst fillClasses = new Map<DesignProgressBarGradient, string>([\n [\"blue\", \"bg-blue-500 dark:bg-blue-400\"],\n [\"cyan\", \"bg-cyan-500 dark:bg-cyan-400\"],\n [\"purple\", \"bg-purple-500 dark:bg-purple-400\"],\n [\"green\", \"bg-emerald-500 dark:bg-emerald-400\"],\n [\"orange\", \"bg-amber-500 dark:bg-amber-400\"],\n [\"default\", \"bg-foreground/60\"],\n]);\n\nexport type DesignProgressBarProps = {\n value: number,\n max?: number,\n gradient?: DesignProgressBarGradient,\n label?: string,\n showPercentage?: boolean,\n size?: \"sm\" \| \"md\" \| \"lg\",\n className?: string,\n};\n\n/*\n Horizontal progress bar for quota / fill-level indicators. Takes a\n * `value` and optional `max` (defaults to 100 — pass raw values, the\n * component computes the percentage). Optional label + percentage display.\n \n ```tsx\n * <DesignProgressBar value={usedSeats} max={totalSeats} label=\"Seats used\" showPercentage />\n * <DesignProgressBar value={75} gradient=\"green\" />\n * ```\n /\nexport function DesignProgressBar({\n value,\n max = 100,\n gradient = \"default\",\n label,\n showPercentage = false,\n size = \"md\",\n className,\n}: DesignProgressBarProps) {\n const percentage = max > 0 ? Math.min(Math.max((value / max) 100, 0), 100) : 0;\n const fillClass = fillClasses.get(gradient) ?? \"bg-foreground/60\";\n\n const trackHeight = size === \"sm\" ? \"h-1.5\" : size === \"lg\" ? \"h-3\" : \"h-2\";\n\n return (\n <div className={cn(\"w-full\", className)}>\n {(label \|\| showPercentage) && (\n <div className=\"flex items-center justify-between mb-2\">\n {label && (\n <span className=\"text-xs font-medium text-muted-foreground\">\n {label}\n </span>\n )}\n {showPercentage && (\n <span className=\"text-xs font-medium tabular-nums text-foreground\">\n {Math.round(percentage)}%\n </span>\n )}\n </div>\n )}\n <div\n className={cn(\n \"w-full rounded-full bg-black/[0.06] dark:bg-white/[0.06] overflow-hidden\",\n trackHeight\n )}\n >\n <div\n className={cn(\n \"h-full rounded-full transition-all duration-300 ease-out\",\n fillClass\n )}\n style={{ width: `${percentage}%` }}\n />\n </div>\n </div>\n );\n}\n"],"mappings":"~~;;;;;;;;~~AAMA,MAAM,~~cAAc~~,IAAI,IAAuC;CAC7D,CAAC,QAAQ~~,+BAA+B~~;~~CACxC~~,CAAC,QAAQ~~,+BAA+B~~;~~CACxC~~,CAAC,UAAU,~~mCAAmC~~;~~CAC9C~~,CAAC,SAAS,~~qCAAqC~~;~~CAC/C~~,CAAC,UAAU,~~iCAAiC~~;~~CAC5C~~,CAAC,WAAW,~~mBAAmB~~;~~CAChC~~,CAAC;;;;;;;;;;;~~AAsBF~~,SAAgB,kBAAkB,EAChC,OACA,MAAM,KACN,WAAW,WACX,OACA,iBAAiB,OACjB,OAAO,MACP,aACyB;CACzB,MAAM,aAAa,MAAM,IAAI,KAAK,IAAI,KAAK,IAAK,QAAQ,MAAO,KAAK,~~EAAE~~,~~EAAE~~,IAAI~~,GAAG~~;CAC/E,MAAM,YAAY,YAAY,IAAI,~~SAAS~~,~~IAAI~~;CAE/C,MAAM,cAAc,SAAS,OAAO,UAAU,SAAS,OAAO,QAAQ;~~AAEtE~~,~~QACE~~,~~4CAAC~~;~~EAAI~~,~~gCAAc~~,UAAU,~~UAAU~~;~~cACnC~~,SAAS,mBACT,~~4CAAC~~;~~GAAI~~,WAAU;~~cACZ~~,SACC,~~2CAAC~~;~~IAAK~~,WAAU;cACb;~~KACI~~,~~EAER~~,kBACC,~~4CAAC~~;~~IAAK~~,WAAU;~~eACb~~,KAAK,MAAM,~~WAAW~~,~~EAAC~~;~~KACnB~~;~~IAEL~~,~~EAER~~,~~2CAAC~~;~~GACC~~,~~gCACE~~,4EACA,~~YACD~~;~~aAED~~,~~2CAAC~~;~~IACC~~,~~gCACE~~,4DACA,~~UACD~~;~~IACD~~,OAAO,EAAE,OAAO,GAAG,WAAW,~~IAAI~~;~~KAClC~~;~~IACE;GACF~~"}
1	+ {"version":3,"file":"progress-bar.js","names":[],"sources":["../../src/components/progress-bar.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@hexclave/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,8BAAc,IAAI,IAAuC;CAC7D,CAAC,QAAQ,8BAA8B;CACvC,CAAC,QAAQ,8BAA8B;CACvC,CAAC,UAAU,kCAAkC;CAC7C,CAAC,SAAS,oCAAoC;CAC9C,CAAC,UAAU,gCAAgC;CAC3C,CAAC,WAAW,kBAAkB;AAChC,CAAC;;;;;;;;;;;AAsBD,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,CAAC,GAAG,GAAG,IAAI;CAC/E,MAAM,YAAY,YAAY,IAAI,QAAQ,KAAK;CAE/C,MAAM,cAAc,SAAS,OAAO,UAAU,SAAS,OAAO,QAAQ;CAEtE,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,YAAA,GAAA,aAAA,GAAA,CAAc,UAAU,SAAS;YAAtC,EACI,SAAS,mBACT,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,WAAU;aAAf,CACG,SACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,WAAU;cACb;GACG,CAAA,GAEP,kBACC,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;IAAM,WAAU;cAAhB,CACG,KAAK,MAAM,UAAU,GAAE,GACpB;KAEL;MAEP,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GACE,YAAA,GAAA,aAAA,GAAA,CACE,4EACA,WACF;aAEA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IACE,YAAA,GAAA,aAAA,GAAA,CACE,4DACA,SACF;IACA,OAAO,EAAE,OAAO,GAAG,WAAW,GAAG;GAClC,CAAA;EACE,CAAA,CACF;;AAET"}

package/dist/components/separator.d.ts CHANGED Viewed

@@ -1,5 +1,3 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 //#region src/components/separator.d.ts
 type DesignSeparatorProps = {
   orientation?: "horizontal" | "vertical";
@@ -17,7 +15,7 @@ declare function DesignSeparator({
   orientation,
   className,
   ...props
-}: DesignSeparatorProps): react_jsx_runtime0.JSX.Element;
+}: DesignSeparatorProps): import("react/jsx-runtime").JSX.Element;
 //#endregion
 export { DesignSeparator, DesignSeparatorProps };
 //# sourceMappingURL=separator.d.ts.map

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

	@@ -1 +1 @@
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"}
1	+ {"version":3,"file":"separator.d.ts","names":[],"sources":["../../src/components/separator.tsx"],"mappings":";KAIY,oBAAA;EACV,WAAA;AAAA,IACE,KAAA,CAAM,cAAc,CAAC,cAAA;;;;;;;;AAAc;AAWvC;iBAAgB,eAAA;EACd,WAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,oBAAA,+BAAoB,GAAA,CAAA,OAAA"}

package/dist/components/separator.js CHANGED Viewed

@@ -1,10 +1,7 @@
 "use client";
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_chunk = require('../chunk-BE-pF4vm.js');
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let _hexclave_ui = require("@hexclave/ui");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/separator.tsx
 /**
 * Thin divider line. Use `orientation="vertical"` inside a flex row to
@@ -23,7 +20,7 @@ function DesignSeparator({ orientation = "horizontal", className, ...props }) {
 		...props
 	});
 }
 //#endregion
 exports.DesignSeparator = DesignSeparator;
 //# sourceMappingURL=separator.js.map

package/dist/components/separator.js.map CHANGED Viewed

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

package/dist/components/skeleton.d.ts CHANGED Viewed

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

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

	@@ -1 +1 @@
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"}
1	+ {"version":3,"file":"skeleton.d.ts","names":[],"sources":["../../src/components/skeleton.tsx"],"mappings":";;;KAKY,mBAAA,GAAsB,KAAA,CAAM,cAAc,CAAC,cAAA;;AAAvD;;;;;;;;AAAqE;AAcrE;;iBAAgB,cAAA;EAAiB,SAAA;EAAA,GAAc;AAAA,GAAS,mBAAmB,+BAAA,GAAA,CAAA,OAAA"}

package/dist/components/skeleton.js CHANGED Viewed

@@ -1,10 +1,7 @@
 "use client";
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_chunk = require('../chunk-BE-pF4vm.js');
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let _hexclave_ui = require("@hexclave/ui");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/skeleton.tsx
 /**
 * Animated placeholder block. Use while data is loading — size it via
@@ -24,7 +21,7 @@ function DesignSkeleton({ className, ...props }) {
 		...props
 	});
 }
 //#endregion
 exports.DesignSkeleton = DesignSkeleton;
 //# sourceMappingURL=skeleton.js.map

package/dist/components/skeleton.js.map CHANGED Viewed

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

package/dist/components/table.js CHANGED Viewed

@@ -1,13 +1,11 @@
 "use client";
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_chunk = require('../chunk-BE-pF4vm.js');
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_rolldown_runtime = require("../rolldown-runtime-D6vf50IK.js");
 let _hexclave_ui = require("@hexclave/ui");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _hexclave_shared_dist_utils_react = require("@hexclave/shared/dist/utils/react");
 let react = require("react");
-react = require_chunk.__toESM(react);
+react = require_rolldown_runtime.__toESM(react);
 //#region src/components/table.tsx
 /**
 * Simple static table — header + rows + cells. Use this for small,
@@ -73,7 +71,6 @@ const DesignTableCell = (0, _hexclave_shared_dist_utils_react.forwardRefIfNeeded
 	...props
 }));
 DesignTableCell.displayName = "DesignTableCell";
 //#endregion
 exports.DesignTable = DesignTable;
 exports.DesignTableBody = DesignTableBody;
@@ -81,4 +78,5 @@ exports.DesignTableCell = DesignTableCell;
 exports.DesignTableHead = DesignTableHead;
 exports.DesignTableHeader = DesignTableHeader;
 exports.DesignTableRow = DesignTableRow;
 //# sourceMappingURL=table.js.map

package/dist/components/table.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"table.js","names":[],"sources":["../../src/components/table.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRefIfNeeded } from \"@hexclave/shared/dist/utils/react\";\nimport { cn } from \"@hexclave/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,~~yEAGV~~,EAAE,WAAW,GAAG,SAAS,QAC1B,~~2CAAC~~;~~CAAI~~,WAAU;WACb,~~2CAAC~~;~~EACM~~;EACL,~~gCAAc~~,iCAAiC,~~UAAU~~;~~EACzD~~,GAAI;~~GACJ~~;~~EACE~~,CACN;~~AACF~~,YAAY,cAAc;AAE1B,MAAa,+EAGV,EAAE,WAAW,GAAG,SAAS,QAC1B,~~2CAAC~~;~~CACM~~;CACL,~~gCAAc~~,mGAAmG,~~UAAU~~;~~CAC3H~~,GAAI;~~EACJ~~,CACF;~~AACF~~,kBAAkB,cAAc;AAEhC,MAAa,~~6EAGV~~,EAAE,WAAW,GAAG,SAAS,QAC1B,~~2CAAC~~;~~CACM~~;CACL,~~gCAAc~~,8BAA8B,~~UAAU~~;~~CACtD~~,GAAI;~~EACJ~~,CACF;~~AACF~~,gBAAgB,cAAc;AAE9B,MAAa,~~4EAGV~~,EAAE,WAAW,GAAG,SAAS,QAC1B,~~2CAAC~~;~~CACM~~;CACL,~~gCACE~~,oLACA,~~UACD~~;~~CACD~~,GAAI;~~EACJ~~,CACF;~~AACF~~,eAAe,cAAc;AAE7B,MAAa,~~6EAGV~~,EAAE,WAAW,GAAG,SAAS,QAC1B,~~2CAAC~~;~~CACM~~;CACL,~~gCACE~~,0IACA,~~UACD~~;~~CACD~~,GAAI;~~EACJ~~,CACF;~~AACF~~,gBAAgB,cAAc;AAE9B,MAAa,~~6EAGV~~,EAAE,WAAW,GAAG,SAAS,QAC1B,~~2CAAC~~;~~CACM~~;CACL,~~gCACE~~,wFACA,~~UACD~~;~~CACD~~,GAAI;~~EACJ~~,CACF;~~AACF~~,gBAAgB,cAAc"}
1	+ {"version":3,"file":"table.js","names":[],"sources":["../../src/components/table.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRefIfNeeded } from \"@hexclave/shared/dist/utils/react\";\nimport { cn } from \"@hexclave/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,eAAA,GAAA,kCAAA,mBAAA,EAGV,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;CAAK,WAAU;WACb,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;EACO;EACL,YAAA,GAAA,aAAA,GAAA,CAAc,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AACE,CAAA,CACN;AACD,YAAY,cAAc;AAE1B,MAAa,qBAAA,GAAA,kCAAA,mBAAA,EAGV,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;CACO;CACL,YAAA,GAAA,aAAA,GAAA,CAAc,mGAAmG,SAAS;CAC1H,GAAI;AACL,CAAA,CACF;AACD,kBAAkB,cAAc;AAEhC,MAAa,mBAAA,GAAA,kCAAA,mBAAA,EAGV,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;CACO;CACL,YAAA,GAAA,aAAA,GAAA,CAAc,8BAA8B,SAAS;CACrD,GAAI;AACL,CAAA,CACF;AACD,gBAAgB,cAAc;AAE9B,MAAa,kBAAA,GAAA,kCAAA,mBAAA,EAGV,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;CACO;CACL,YAAA,GAAA,aAAA,GAAA,CACE,oLACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AACD,eAAe,cAAc;AAE7B,MAAa,mBAAA,GAAA,kCAAA,mBAAA,EAGV,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;CACO;CACL,YAAA,GAAA,aAAA,GAAA,CACE,0IACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AACD,gBAAgB,cAAc;AAE9B,MAAa,mBAAA,GAAA,kCAAA,mBAAA,EAGV,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;CACO;CACL,YAAA,GAAA,aAAA,GAAA,CACE,wFACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AACD,gBAAgB,cAAc"}

package/dist/components/tabs.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { ReactNode } from "react";
 //#region src/components/tabs.d.ts
@@ -32,7 +31,7 @@ declare function DesignCategoryTabs({
   trailing,
   className,
   ...props
-}: DesignCategoryTabsProps): react_jsx_runtime0.JSX.Element;
+}: DesignCategoryTabsProps): import("react/jsx-runtime").JSX.Element;
 //#endregion
 export { DesignCategoryTabItem, DesignCategoryTabs, DesignCategoryTabsProps };
 //# sourceMappingURL=tabs.d.ts.map

package/dist/components/tabs.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
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,iBAqFG,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"}
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,EAVJ;EAYP,QAAA,GAAW,SAAA;AAAA;AAAA,iBAqFG,kBAAA;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,+BAAuB,GAAA,CAAA,OAAA"}

package/dist/components/tabs.js CHANGED Viewed

@@ -1,23 +1,20 @@
 "use client";
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_chunk = require('../chunk-BE-pF4vm.js');
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let _hexclave_ui = require("@hexclave/ui");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 let _hexclave_shared_dist_utils_promises = require("@hexclave/shared/dist/utils/promises");
 let __card_js = require("./card.js");
 //#region src/components/tabs.tsx
 const sliderTransition = "transform 200ms ease-out, width 200ms ease-out";
-const tabSizeClasses = new Map([["sm", {
+const tabSizeClasses = /* @__PURE__ */ 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([
+const gradientClasses = /* @__PURE__ */ 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",
@@ -159,7 +156,7 @@ function DesignCategoryTabs({ categories, selectedCategory, onSelect, showBadge
 		}) : null]
 	});
 }
 //#endregion
 exports.DesignCategoryTabs = DesignCategoryTabs;
 //# sourceMappingURL=tabs.js.map

package/dist/components/tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs.js","names":["Spinner"],"sources":["../../src/components/tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { cn, Spinner } from \"@hexclave/ui\";\nimport { runAsynchronouslyWithAlert } from \"@hexclave/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\ntype SliderMetrics = {\n left: number,\n width: number,\n};\n\nconst sliderTransition = \"transform 200ms ease-out, width 200ms ease-out\";\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 const [sliderMetrics, setSliderMetrics] = useState<SliderMetrics \| null>(null);\n const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);\n const tabListRef = useRef<HTMLDivElement \| null>(null);\n const tabButtonRefs = useRef(new Map<string, HTMLButtonElement>());\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 useEffect(() => {\n if (typeof window === \"undefined\" \|\| typeof window.matchMedia !== \"function\") return;\n const mediaQuery = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n const updatePrefersReducedMotion = () => setPrefersReducedMotion(mediaQuery.matches);\n\n updatePrefersReducedMotion();\n mediaQuery.addEventListener(\"change\", updatePrefersReducedMotion);\n\n return () => mediaQuery.removeEventListener(\"change\", updatePrefersReducedMotion);\n }, []);\n\n useEffect(() => {\n const tabList = tabListRef.current;\n const selectedButton = tabButtonRefs.current.get(selectedCategory);\n\n if (!tabList \|\| !selectedButton) {\n setSliderMetrics(null);\n return;\n }\n\n const updateSliderMetrics = () => {\n setSliderMetrics({\n left: selectedButton.offsetLeft,\n width: selectedButton.offsetWidth,\n });\n };\n\n updateSliderMetrics();\n\n if (typeof ResizeObserver === \"undefined\") return;\n const resizeObserver = new ResizeObserver(updateSliderMetrics);\n resizeObserver.observe(tabList);\n resizeObserver.observe(selectedButton);\n\n return () => resizeObserver.disconnect();\n }, [categories, selectedCategory]);\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-zinc-100/90 p-1 ring-1 ring-black/[0.06] backdrop-blur-sm dark:bg-white/[0.04] dark:ring-white/[0.06]\"\n : \"border-b border-gray-300 dark:border-gray-800\",\n className\n )}\n {...props}\n >\n <div\n ref={tabListRef}\n className={cn(\n \"relative flex min-h-0 min-w-0 flex-1 items-center gap-1 overflow-x-auto flex-nowrap [&::-webkit-scrollbar]:hidden\",\n )}\n >\n {glassmorphic && sliderMetrics != null && (\n <div\n className=\"pointer-events-none absolute inset-y-0 left-0 z-0 rounded-lg bg-white shadow-sm ring-1 ring-black/[0.12] motion-reduce:transition-none dark:bg-background dark:ring-white/[0.06]\"\n style={{\n transition: prefersReducedMotion ? undefined : sliderTransition,\n transform: `translateX(${sliderMetrics.left}px)`,\n width: sliderMetrics.width,\n }}\n />\n )}\n {!glassmorphic && sliderMetrics != null && (\n <div\n className={cn(\n \"pointer-events-none absolute bottom-0 left-0 h-0.5 motion-reduce:transition-none\",\n gradientClass.underline\n )}\n style={{\n transition: prefersReducedMotion ? undefined : sliderTransition,\n transform: `translateX(${sliderMetrics.left}px)`,\n width: sliderMetrics.width,\n }}\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 ref={(element) => {\n if (element) {\n tabButtonRefs.current.set(category.id, element);\n } else {\n tabButtonRefs.current.delete(category.id);\n }\n }}\n onClick={() => handleSelect(category.id)}\n disabled={loadingCategoryId !== null}\n className={cn(\n \"font-medium transition-all duration-150 hover:transition-none relative z-10 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 ? gradientClass.activeText\n : cn(\n \"text-gray-700 dark:text-gray-400\",\n glassmorphic && \"rounded-lg hover:bg-white/50 dark:hover:bg-white/[0.06]\",\n )\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 </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":"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"}
1	+ {"version":3,"file":"tabs.js","names":["Spinner"],"sources":["../../src/components/tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { cn, Spinner } from \"@hexclave/ui\";\nimport { runAsynchronouslyWithAlert } from \"@hexclave/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\ntype SliderMetrics = {\n left: number,\n width: number,\n};\n\nconst sliderTransition = \"transform 200ms ease-out, width 200ms ease-out\";\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 const [sliderMetrics, setSliderMetrics] = useState<SliderMetrics \| null>(null);\n const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);\n const tabListRef = useRef<HTMLDivElement \| null>(null);\n const tabButtonRefs = useRef(new Map<string, HTMLButtonElement>());\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 useEffect(() => {\n if (typeof window === \"undefined\" \|\| typeof window.matchMedia !== \"function\") return;\n const mediaQuery = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n const updatePrefersReducedMotion = () => setPrefersReducedMotion(mediaQuery.matches);\n\n updatePrefersReducedMotion();\n mediaQuery.addEventListener(\"change\", updatePrefersReducedMotion);\n\n return () => mediaQuery.removeEventListener(\"change\", updatePrefersReducedMotion);\n }, []);\n\n useEffect(() => {\n const tabList = tabListRef.current;\n const selectedButton = tabButtonRefs.current.get(selectedCategory);\n\n if (!tabList \|\| !selectedButton) {\n setSliderMetrics(null);\n return;\n }\n\n const updateSliderMetrics = () => {\n setSliderMetrics({\n left: selectedButton.offsetLeft,\n width: selectedButton.offsetWidth,\n });\n };\n\n updateSliderMetrics();\n\n if (typeof ResizeObserver === \"undefined\") return;\n const resizeObserver = new ResizeObserver(updateSliderMetrics);\n resizeObserver.observe(tabList);\n resizeObserver.observe(selectedButton);\n\n return () => resizeObserver.disconnect();\n }, [categories, selectedCategory]);\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-zinc-100/90 p-1 ring-1 ring-black/[0.06] backdrop-blur-sm dark:bg-white/[0.04] dark:ring-white/[0.06]\"\n : \"border-b border-gray-300 dark:border-gray-800\",\n className\n )}\n {...props}\n >\n <div\n ref={tabListRef}\n className={cn(\n \"relative flex min-h-0 min-w-0 flex-1 items-center gap-1 overflow-x-auto flex-nowrap [&::-webkit-scrollbar]:hidden\",\n )}\n >\n {glassmorphic && sliderMetrics != null && (\n <div\n className=\"pointer-events-none absolute inset-y-0 left-0 z-0 rounded-lg bg-white shadow-sm ring-1 ring-black/[0.12] motion-reduce:transition-none dark:bg-background dark:ring-white/[0.06]\"\n style={{\n transition: prefersReducedMotion ? undefined : sliderTransition,\n transform: `translateX(${sliderMetrics.left}px)`,\n width: sliderMetrics.width,\n }}\n />\n )}\n {!glassmorphic && sliderMetrics != null && (\n <div\n className={cn(\n \"pointer-events-none absolute bottom-0 left-0 h-0.5 motion-reduce:transition-none\",\n gradientClass.underline\n )}\n style={{\n transition: prefersReducedMotion ? undefined : sliderTransition,\n transform: `translateX(${sliderMetrics.left}px)`,\n width: sliderMetrics.width,\n }}\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 ref={(element) => {\n if (element) {\n tabButtonRefs.current.set(category.id, element);\n } else {\n tabButtonRefs.current.delete(category.id);\n }\n }}\n onClick={() => handleSelect(category.id)}\n disabled={loadingCategoryId !== null}\n className={cn(\n \"font-medium transition-all duration-150 hover:transition-none relative z-10 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 ? gradientClass.activeText\n : cn(\n \"text-gray-700 dark:text-gray-400\",\n glassmorphic && \"rounded-lg hover:bg-white/50 dark:hover:bg-white/[0.06]\",\n )\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 </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":"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"}