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/esm/components/input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input.js","names":[],"sources":["../../../src/components/input.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRefIfNeeded } from \"@hexclave/shared/dist/utils/react\";\nimport React from \"react\";\n\nimport { cn } from \"@hexclave/ui\";\n\nexport type DesignInputProps = {\n prefixItem?: React.ReactNode,\n leadingIcon?: React.ReactNode,\n size?: \"sm\" \| \"md\" \| \"lg\",\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\">;\n\nexport const DesignInput = forwardRefIfNeeded<HTMLInputElement, DesignInputProps>(\n ({ className, type, prefixItem, leadingIcon, size = \"md\", ...props }, ref) => {\n const heightTextClasses = size === \"sm\"\n ? \"h-7 text-xs\"\n : size === \"lg\"\n ? \"h-10 text-sm\"\n : \"h-9 text-sm\";\n const horizontalPaddingClasses = size === \"sm\" ? \"px-2\" : size === \"lg\" ? \"px-4\" : \"px-3\";\n const baseClasses = cn(\n \"stack-scope flex w-full rounded-xl border border-black/[0.08] dark:border-white/[0.06] bg-white/80 dark:bg-foreground/[0.03] shadow-sm ring-1 ring-black/[0.08] dark:ring-white/[0.06]\",\n \"file:border-0 file:bg-transparent file:text-sm file:font-medium\",\n \"placeholder:text-muted-foreground/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground/[0.1]\",\n \"disabled:cursor-not-allowed disabled:opacity-50\",\n \"transition-all duration-150 hover:transition-none hover:bg-white dark:hover:bg-foreground/[0.06]\",\n heightTextClasses\n );\n\n const leadingIconClasses = size === \"sm\"\n ? \"left-2.5 [&_svg]:size-3\"\n : size === \"lg\"\n ? \"left-3.5 [&_svg]:size-4\"\n : \"left-3 [&_svg]:size-3.5\";\n const leadingIconPadding = size === \"sm\" ? \"pl-8\" : size === \"lg\" ? \"pl-10\" : \"pl-9\";\n\n if (prefixItem) {\n return (\n <div className=\"flex w-full flex-row items-center overflow-hidden rounded-xl border border-black/[0.08] bg-white/80 shadow-sm ring-1 ring-black/[0.08] transition-all duration-150 hover:bg-white hover:transition-none dark:border-white/[0.06] dark:bg-foreground/[0.03] dark:ring-white/[0.06] focus-within:ring-1 focus-within:ring-foreground/[0.1] dark:hover:bg-foreground/[0.06]\">\n <div className={cn(\n \"flex self-stretch items-center justify-center select-none text-muted-foreground/70 border-r border-black/[0.06] dark:border-white/[0.06] bg-black/[0.03] dark:bg-white/[0.02]\",\n size === \"sm\" ? \"px-2.5 text-xs\" : size === \"lg\" ? \"px-3.5 text-sm\" : \"px-3 text-sm\"\n )}>\n {prefixItem}\n </div>\n <input\n type={type}\n className={cn(\n \"stack-scope flex w-full bg-transparent\",\n \"file:border-0 file:bg-transparent file:text-sm file:font-medium\",\n \"placeholder:text-muted-foreground/50 focus-visible:outline-none\",\n \"disabled:cursor-not-allowed disabled:opacity-50\",\n heightTextClasses,\n horizontalPaddingClasses,\n \"rounded-none border-0 shadow-none ring-0 focus-visible:ring-0\",\n className\n )}\n ref={ref}\n {...props}\n />\n </div>\n );\n }\n\n if (leadingIcon) {\n return (\n <div className={cn(\"relative w-full\", className)}>\n <div className={cn(\n \"pointer-events-none absolute top-1/2 -translate-y-1/2 text-muted-foreground [&_svg]:block\",\n leadingIconClasses,\n )}>\n {leadingIcon}\n </div>\n <input\n type={type}\n className={cn(baseClasses, leadingIconPadding)}\n ref={ref}\n {...props}\n />\n </div>\n );\n }\n\n return (\n <div className=\"w-full\">\n <input\n type={type}\n className={cn(baseClasses, horizontalPaddingClasses, className)}\n ref={ref}\n {...props}\n />\n </div>\n );\n }\n);\nDesignInput.displayName = \"DesignInput\";\n"],"mappings":"~~;;;;;;;;~~AAaA,MAAa,cAAc,oBACxB,EAAE,WAAW,MAAM,YAAY,aAAa,OAAO,MAAM,GAAG,SAAS,QAAQ;CAC5E,MAAM,oBAAoB,SAAS,OAC/B,gBACA,SAAS,OACP,iBACA;CACN,MAAM,2BAA2B,SAAS,OAAO,SAAS,SAAS,OAAO,SAAS;CACnF,MAAM,cAAc,GAClB,0LACA,mEACA,4HACA,mDACA,oGACA,~~kBACD~~;~~CAED~~,MAAM,qBAAqB,SAAS,OAChC,4BACA,SAAS,OACP,4BACA;CACN,MAAM,qBAAqB,SAAS,OAAO,SAAS,SAAS,OAAO,UAAU;~~AAE9E~~,~~KAAI~~,~~WACF~~,~~QACE~~,qBAAC;~~EAAI~~,WAAU;~~aACb~~,oBAAC;~~GAAI~~,WAAW,GACd,iLACA,SAAS,OAAO,mBAAmB,SAAS,OAAO,mBAAmB,~~eACvE~~;~~aACE~~;~~IACG~~,~~EACN~~,oBAAC;~~GACO~~;GACN,WAAW,GACT,0CACA,mEACA,mEACA,mDACA,mBACA,0BACA,iEACA,~~UACD~~;~~GACI~~;GACL,GAAI;~~IACJ;GACE;AAIV~~,~~KAAI~~,~~YACF~~,~~QACE~~,qBAAC;~~EAAI~~,WAAW,GAAG,mBAAmB,~~UAAU~~;~~aAC9C~~,oBAAC;~~GAAI~~,WAAW,GACd,6FACA,~~mBACD~~;~~aACE~~;~~IACG~~,~~EACN~~,oBAAC;~~GACO~~;GACN,WAAW,GAAG,aAAa,~~mBAAmB~~;~~GACzC~~;GACL,GAAI;~~IACJ;GACE;AAIV~~,~~QACE~~,oBAAC;~~EAAI~~,WAAU;YACb,oBAAC;~~GACO~~;GACN,WAAW,GAAG,aAAa,0BAA0B,~~UAAU~~;~~GAC1D~~;GACL,GAAI;~~IACJ~~;~~GACE~~;~~EAGX~~;~~AACD~~,YAAY,cAAc"}
1	+ {"version":3,"file":"input.js","names":[],"sources":["../../../src/components/input.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRefIfNeeded } from \"@hexclave/shared/dist/utils/react\";\nimport React from \"react\";\n\nimport { cn } from \"@hexclave/ui\";\n\nexport type DesignInputProps = {\n prefixItem?: React.ReactNode,\n leadingIcon?: React.ReactNode,\n size?: \"sm\" \| \"md\" \| \"lg\",\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\">;\n\nexport const DesignInput = forwardRefIfNeeded<HTMLInputElement, DesignInputProps>(\n ({ className, type, prefixItem, leadingIcon, size = \"md\", ...props }, ref) => {\n const heightTextClasses = size === \"sm\"\n ? \"h-7 text-xs\"\n : size === \"lg\"\n ? \"h-10 text-sm\"\n : \"h-9 text-sm\";\n const horizontalPaddingClasses = size === \"sm\" ? \"px-2\" : size === \"lg\" ? \"px-4\" : \"px-3\";\n const baseClasses = cn(\n \"stack-scope flex w-full rounded-xl border border-black/[0.08] dark:border-white/[0.06] bg-white/80 dark:bg-foreground/[0.03] shadow-sm ring-1 ring-black/[0.08] dark:ring-white/[0.06]\",\n \"file:border-0 file:bg-transparent file:text-sm file:font-medium\",\n \"placeholder:text-muted-foreground/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground/[0.1]\",\n \"disabled:cursor-not-allowed disabled:opacity-50\",\n \"transition-all duration-150 hover:transition-none hover:bg-white dark:hover:bg-foreground/[0.06]\",\n heightTextClasses\n );\n\n const leadingIconClasses = size === \"sm\"\n ? \"left-2.5 [&_svg]:size-3\"\n : size === \"lg\"\n ? \"left-3.5 [&_svg]:size-4\"\n : \"left-3 [&_svg]:size-3.5\";\n const leadingIconPadding = size === \"sm\" ? \"pl-8\" : size === \"lg\" ? \"pl-10\" : \"pl-9\";\n\n if (prefixItem) {\n return (\n <div className=\"flex w-full flex-row items-center overflow-hidden rounded-xl border border-black/[0.08] bg-white/80 shadow-sm ring-1 ring-black/[0.08] transition-all duration-150 hover:bg-white hover:transition-none dark:border-white/[0.06] dark:bg-foreground/[0.03] dark:ring-white/[0.06] focus-within:ring-1 focus-within:ring-foreground/[0.1] dark:hover:bg-foreground/[0.06]\">\n <div className={cn(\n \"flex self-stretch items-center justify-center select-none text-muted-foreground/70 border-r border-black/[0.06] dark:border-white/[0.06] bg-black/[0.03] dark:bg-white/[0.02]\",\n size === \"sm\" ? \"px-2.5 text-xs\" : size === \"lg\" ? \"px-3.5 text-sm\" : \"px-3 text-sm\"\n )}>\n {prefixItem}\n </div>\n <input\n type={type}\n className={cn(\n \"stack-scope flex w-full bg-transparent\",\n \"file:border-0 file:bg-transparent file:text-sm file:font-medium\",\n \"placeholder:text-muted-foreground/50 focus-visible:outline-none\",\n \"disabled:cursor-not-allowed disabled:opacity-50\",\n heightTextClasses,\n horizontalPaddingClasses,\n \"rounded-none border-0 shadow-none ring-0 focus-visible:ring-0\",\n className\n )}\n ref={ref}\n {...props}\n />\n </div>\n );\n }\n\n if (leadingIcon) {\n return (\n <div className={cn(\"relative w-full\", className)}>\n <div className={cn(\n \"pointer-events-none absolute top-1/2 -translate-y-1/2 text-muted-foreground [&_svg]:block\",\n leadingIconClasses,\n )}>\n {leadingIcon}\n </div>\n <input\n type={type}\n className={cn(baseClasses, leadingIconPadding)}\n ref={ref}\n {...props}\n />\n </div>\n );\n }\n\n return (\n <div className=\"w-full\">\n <input\n type={type}\n className={cn(baseClasses, horizontalPaddingClasses, className)}\n ref={ref}\n {...props}\n />\n </div>\n );\n }\n);\nDesignInput.displayName = \"DesignInput\";\n"],"mappings":";;;;;;AAaA,MAAa,cAAc,oBACxB,EAAE,WAAW,MAAM,YAAY,aAAa,OAAO,MAAM,GAAG,SAAS,QAAQ;CAC5E,MAAM,oBAAoB,SAAS,OAC/B,gBACA,SAAS,OACP,iBACA;CACN,MAAM,2BAA2B,SAAS,OAAO,SAAS,SAAS,OAAO,SAAS;CACnF,MAAM,cAAc,GAClB,0LACA,mEACA,4HACA,mDACA,oGACA,iBACF;CAEA,MAAM,qBAAqB,SAAS,OAChC,4BACA,SAAS,OACP,4BACA;CACN,MAAM,qBAAqB,SAAS,OAAO,SAAS,SAAS,OAAO,UAAU;CAE9E,IAAI,YACF,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GAAK,WAAW,GACd,iLACA,SAAS,OAAO,mBAAmB,SAAS,OAAO,mBAAmB,cACxE;aACG;EACE,CAAA,GACL,oBAAC,SAAD;GACQ;GACN,WAAW,GACT,0CACA,mEACA,mEACA,mDACA,mBACA,0BACA,iEACA,SACF;GACK;GACL,GAAI;EACL,CAAA,CACE;;CAIT,IAAI,aACF,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,mBAAmB,SAAS;YAA/C,CACE,oBAAC,OAAD;GAAK,WAAW,GACd,6FACA,kBACF;aACG;EACE,CAAA,GACL,oBAAC,SAAD;GACQ;GACN,WAAW,GAAG,aAAa,kBAAkB;GACxC;GACL,GAAI;EACL,CAAA,CACE;;CAIT,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,SAAD;GACQ;GACN,WAAW,GAAG,aAAa,0BAA0B,SAAS;GACzD;GACL,GAAI;EACL,CAAA;CACE,CAAA;AAET,CACF;AACA,YAAY,cAAc"}

package/dist/esm/components/metric-card.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 import React from "react";
 //#region src/components/metric-card.d.ts
@@ -49,7 +48,7 @@ declare function DesignMetricCard({
   gradient,
   className,
   ...props
-}: DesignMetricCardProps): react_jsx_runtime0.JSX.Element;
+}: DesignMetricCardProps): import("react/jsx-runtime").JSX.Element;
 //#endregion
 export { DesignMetricCard, DesignMetricCardProps, DesignMetricCardTrend };
 //# sourceMappingURL=metric-card.d.ts.map

package/dist/esm/components/metric-card.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"metric-card.d.ts","names":[],"sources":["../../../src/components/metric-card.tsx"],"mappings":"~~;;;;~~KAKK,wBAAA;AAAA,KAWO,qBAAA;EACV,KAAA;EACA,SAAA;EACA,KAAA;AAAA;AAAA,KAGU,qBAAA;EACV,KAAA;EACA,KAAA;EACA,WAAA;EACA,KAAA,GAAQ,qBAAA;EACR,IAAA,GAAO,KAAA,CAAM,WAAA;EACb,QAAA,GAAW,wBAAA;AAAA,IACT,IAAA,CAAK,KAAA,CAAM,cAAA~~;;;;AAPf;;;;;;;;;;;;;;;;;;;;;~~iBAiCgB,gBAAA~~,CAAA~~;EACd,KAAA;EACA,KAAA;EACA,WAAA;EACA,KAAA;EACA,IAAA,EAAM,IAAA;EACN,QAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,qBAAA,~~GAAqB,kBAAA,CAAA,~~GAAA,CAAA,OAAA"}
1	+ {"version":3,"file":"metric-card.d.ts","names":[],"sources":["../../../src/components/metric-card.tsx"],"mappings":";;;KAKK,wBAAA;AAAA,KAWO,qBAAA;EACV,KAAA;EACA,SAAA;EACA,KAAA;AAAA;AAAA,KAGU,qBAAA;EACV,KAAA;EACA,KAAA;EACA,WAAA;EACA,KAAA,GAAQ,qBAAA;EACR,IAAA,GAAO,KAAA,CAAM,WAAA;EACb,QAAA,GAAW,wBAAA;AAAA,IACT,IAAA,CAAK,KAAA,CAAM,cAAA;;AAVR;AAGP;;;;;;;;;;;;;;;;;;;;;;iBAiCgB,gBAAA;EACd,KAAA;EACA,KAAA;EACA,WAAA;EACA,KAAA;EACA,IAAA,EAAM,IAAA;EACN,QAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,qBAAA,+BAAqB,GAAA,CAAA,OAAA"}

package/dist/esm/components/metric-card.js CHANGED Viewed

@@ -1,11 +1,9 @@
 "use client";
 import { cn } from "@hexclave/ui";
 import { jsx, jsxs } from "react/jsx-runtime";
-import React from "react";
+import "react";
 //#region src/components/metric-card.tsx
-const hoverTintClasses = new Map([
+const hoverTintClasses = /* @__PURE__ */ new Map([
 	["blue", "group-hover:bg-blue-500/[0.03]"],
 	["cyan", "group-hover:bg-cyan-500/[0.03]"],
 	["purple", "group-hover:bg-purple-500/[0.03]"],
@@ -103,7 +101,7 @@ function DesignMetricCard({ label, value, description, trend, icon: Icon, gradie
 		]
 	});
 }
 //#endregion
 export { DesignMetricCard };
 //# sourceMappingURL=metric-card.js.map

package/dist/esm/components/metric-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"metric-card.js","names":[],"sources":["../../../src/components/metric-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@hexclave/ui\";\nimport React from \"react\";\n\ntype DesignMetricCardGradient = \"blue\" \| \"cyan\" \| \"purple\" \| \"green\" \| \"orange\" \| \"default\";\n\nconst hoverTintClasses = new Map<DesignMetricCardGradient, string>([\n [\"blue\", \"group-hover:bg-blue-500/[0.03]\"],\n [\"cyan\", \"group-hover:bg-cyan-500/[0.03]\"],\n [\"purple\", \"group-hover:bg-purple-500/[0.03]\"],\n [\"green\", \"group-hover:bg-emerald-500/[0.03]\"],\n [\"orange\", \"group-hover:bg-orange-500/[0.03]\"],\n [\"default\", \"group-hover:bg-slate-500/[0.02]\"],\n]);\n\nexport type DesignMetricCardTrend = {\n value: number,\n direction: \"up\" \| \"down\",\n label?: string,\n};\n\nexport type DesignMetricCardProps = {\n label: string,\n value: string \| number,\n description?: string,\n trend?: DesignMetricCardTrend,\n icon?: React.ElementType,\n gradient?: DesignMetricCardGradient,\n} & Omit<React.ComponentProps<\"div\">, \"children\">;\n\n/*\n KPI card for big-number metrics (users, revenue, signups, etc.).\n * Use this instead of a plain `DesignCard` when the value is the focal point.\n \n ```tsx\n * <DesignMetricCard\n * label=\"Total Users\"\n * value=\"1,234\"\n * description=\"+12% from last month\"\n * trend={{ direction: \"up\", value: 12, label: \"vs. last period\" }}\n * icon={UsersIcon}\n * gradient=\"blue\"\n * />\n * ```\n \n Notes:\n * - `label` is the short caption (NOT `title`).\n * - `value` can be a pre-formatted string (\"1,234\") or a number — prefer\n * strings so you control the format.\n * - `description` is the subline (NOT `subtitle`).\n * - `trend.value` is a NUMBER, not a pre-formatted \"12%\" string. The card\n * renders the arrow and formatting.\n * - `icon` is a component type (e.g. `UsersIcon`), not a rendered node.\n */\nexport function DesignMetricCard({\n label,\n value,\n description,\n trend,\n icon: Icon,\n gradient = \"default\",\n className,\n ...props\n}: DesignMetricCardProps) {\n const hoverTintClass = hoverTintClasses.get(gradient) ?? \"group-hover:bg-slate-500/[0.02]\";\n\n return (\n <div\n className={cn(\n \"group relative rounded-2xl bg-white/90 dark:bg-background/60 backdrop-blur-xl transition-all duration-150 hover:transition-none overflow-hidden\",\n \"ring-1 ring-black/[0.06] hover:ring-black/[0.1] dark:ring-white/[0.06] dark:hover:ring-white/[0.1]\",\n \"shadow-sm hover:shadow-md\",\n className\n )}\n {...props}\n >\n <div className=\"absolute inset-0 bg-gradient-to-br from-foreground/[0.04] dark:from-foreground/[0.02] to-transparent pointer-events-none rounded-2xl\" />\n <div\n className={cn(\n \"absolute inset-0 transition-colors duration-150 group-hover:transition-none pointer-events-none rounded-2xl\",\n hoverTintClass\n )}\n />\n <div className=\"relative p-5\">\n <div className=\"flex items-start justify-between gap-3\">\n <div className=\"flex-1 min-w-0\">\n <div className=\"flex items-center gap-2\">\n {Icon && (\n <div className=\"p-1.5 rounded-lg bg-foreground/[0.06] dark:bg-foreground/[0.04]\">\n <Icon className=\"h-3.5 w-3.5 text-foreground/70 dark:text-muted-foreground\" />\n </div>\n )}\n <span className=\"text-xs font-semibold text-muted-foreground uppercase tracking-wider\">\n {label}\n </span>\n </div>\n <div className=\"mt-3 flex items-baseline gap-2\">\n <span className=\"text-3xl font-bold tabular-nums text-foreground\">\n {typeof value === \"number\" ? value.toLocaleString() : value}\n </span>\n {trend && (\n <span\n className={cn(\n \"inline-flex items-center gap-0.5 text-xs font-medium\",\n trend.direction === \"up\"\n ? \"text-emerald-600 dark:text-emerald-400\"\n : \"text-red-600 dark:text-red-400\"\n )}\n >\n <svg\n className={cn(\"h-3 w-3\", trend.direction === \"down\" && \"rotate-180\")}\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 2.5V9.5M6 2.5L3 5.5M6 2.5L9 5.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n {trend.value}%\n {trend.label && (\n <span className=\"text-muted-foreground ml-0.5\">{trend.label}</span>\n )}\n </span>\n )}\n </div>\n {description && (\n <p className=\"mt-1 text-xs text-muted-foreground\">\n {description}\n </p>\n )}\n </div>\n </div>\n </div>\n </div>\n );\n}\n"],"mappings":"~~;;;;;;;~~AAOA,MAAM,~~mBAAmB~~,IAAI,IAAsC;CACjE,CAAC,QAAQ,~~iCAAiC~~;~~CAC1C~~,CAAC,QAAQ,~~iCAAiC~~;~~CAC1C~~,CAAC,UAAU,~~mCAAmC~~;~~CAC9C~~,CAAC,SAAS,~~oCAAoC~~;~~CAC9C~~,CAAC,UAAU,~~mCAAmC~~;~~CAC9C~~,CAAC,WAAW,~~kCAAkC~~;~~CAC~~/C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;~~AAyCF~~,SAAgB,iBAAiB,EAC/B,OACA,OACA,aACA,OACA,MAAM,MACN,WAAW,WACX,WACA,GAAG,SACqB;CACxB,MAAM,iBAAiB,iBAAiB,IAAI,~~SAAS~~,~~IAAI~~;~~AAEzD~~,~~QACE~~,qBAAC;~~EACC~~,WAAW,GACT,mJACA,sGACA,6BACA,~~UACD~~;~~EACD~~,GAAI~~;;GAEJ~~,oBAAC,~~SAAI~~,WAAU,~~yIAAyI~~;~~GACxJ~~,oBAAC,~~SACC~~,WAAW,GACT,+GACA,~~eACD~~,GACD~~;GACF~~,oBAAC;~~IAAI~~,WAAU;cACb,oBAAC;~~KAAI~~,WAAU;eACb,qBAAC;~~MAAI~~,WAAU~~;;OACb~~,qBAAC;~~QAAI~~,WAAU;~~mBACZ~~,QACC,oBAAC;~~SAAI~~,WAAU;mBACb,oBAAC,~~QAAK~~,WAAU,~~8DAA8D~~;~~UAC1E~~,~~EAER~~,oBAAC;~~SAAK~~,WAAU;mBACb;~~UACI;SACH;OACN~~,qBAAC;~~QAAI~~,WAAU;~~mBACb~~,oBAAC;~~SAAK~~,WAAU;mBACb,OAAO,UAAU,WAAW,MAAM,~~gBAAgB~~,~~GAAG~~;~~UACjD~~,~~EACN~~,SACC,qBAAC;~~SACC~~,WAAW,GACT,wDACA,MAAM,cAAc,OAChB,2CACA,~~iCACL;;UAED~~,oBAAC;~~WACC~~,WAAW,GAAG,WAAW,MAAM,cAAc,UAAU,~~aAAa~~;~~WACpE~~,SAAQ;WACR,MAAK;WACL,OAAM;qBAEN,oBAAC;~~YACC~~,GAAE;YACF,QAAO;YACP,aAAY;YACZ,eAAc;YACd,gBAAe;~~aACf~~;~~YACE~~;~~UACL~~,MAAM;UAAM;UACZ,MAAM,SACL,oBAAC;~~WAAK~~,WAAU;qBAAgC,MAAM;~~YAAa;;UAEhE~~;~~SAEL~~;~~OACL~~,eACC,oBAAC;~~QAAE~~,WAAU;kBACV;~~SACC~~;;~~OAEF~~;~~MACF~~;~~KACF~~;;~~GACF~~"}
1	+ {"version":3,"file":"metric-card.js","names":[],"sources":["../../../src/components/metric-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@hexclave/ui\";\nimport React from \"react\";\n\ntype DesignMetricCardGradient = \"blue\" \| \"cyan\" \| \"purple\" \| \"green\" \| \"orange\" \| \"default\";\n\nconst hoverTintClasses = new Map<DesignMetricCardGradient, string>([\n [\"blue\", \"group-hover:bg-blue-500/[0.03]\"],\n [\"cyan\", \"group-hover:bg-cyan-500/[0.03]\"],\n [\"purple\", \"group-hover:bg-purple-500/[0.03]\"],\n [\"green\", \"group-hover:bg-emerald-500/[0.03]\"],\n [\"orange\", \"group-hover:bg-orange-500/[0.03]\"],\n [\"default\", \"group-hover:bg-slate-500/[0.02]\"],\n]);\n\nexport type DesignMetricCardTrend = {\n value: number,\n direction: \"up\" \| \"down\",\n label?: string,\n};\n\nexport type DesignMetricCardProps = {\n label: string,\n value: string \| number,\n description?: string,\n trend?: DesignMetricCardTrend,\n icon?: React.ElementType,\n gradient?: DesignMetricCardGradient,\n} & Omit<React.ComponentProps<\"div\">, \"children\">;\n\n/*\n KPI card for big-number metrics (users, revenue, signups, etc.).\n * Use this instead of a plain `DesignCard` when the value is the focal point.\n \n ```tsx\n * <DesignMetricCard\n * label=\"Total Users\"\n * value=\"1,234\"\n * description=\"+12% from last month\"\n * trend={{ direction: \"up\", value: 12, label: \"vs. last period\" }}\n * icon={UsersIcon}\n * gradient=\"blue\"\n * />\n * ```\n \n Notes:\n * - `label` is the short caption (NOT `title`).\n * - `value` can be a pre-formatted string (\"1,234\") or a number — prefer\n * strings so you control the format.\n * - `description` is the subline (NOT `subtitle`).\n * - `trend.value` is a NUMBER, not a pre-formatted \"12%\" string. The card\n * renders the arrow and formatting.\n * - `icon` is a component type (e.g. `UsersIcon`), not a rendered node.\n */\nexport function DesignMetricCard({\n label,\n value,\n description,\n trend,\n icon: Icon,\n gradient = \"default\",\n className,\n ...props\n}: DesignMetricCardProps) {\n const hoverTintClass = hoverTintClasses.get(gradient) ?? \"group-hover:bg-slate-500/[0.02]\";\n\n return (\n <div\n className={cn(\n \"group relative rounded-2xl bg-white/90 dark:bg-background/60 backdrop-blur-xl transition-all duration-150 hover:transition-none overflow-hidden\",\n \"ring-1 ring-black/[0.06] hover:ring-black/[0.1] dark:ring-white/[0.06] dark:hover:ring-white/[0.1]\",\n \"shadow-sm hover:shadow-md\",\n className\n )}\n {...props}\n >\n <div className=\"absolute inset-0 bg-gradient-to-br from-foreground/[0.04] dark:from-foreground/[0.02] to-transparent pointer-events-none rounded-2xl\" />\n <div\n className={cn(\n \"absolute inset-0 transition-colors duration-150 group-hover:transition-none pointer-events-none rounded-2xl\",\n hoverTintClass\n )}\n />\n <div className=\"relative p-5\">\n <div className=\"flex items-start justify-between gap-3\">\n <div className=\"flex-1 min-w-0\">\n <div className=\"flex items-center gap-2\">\n {Icon && (\n <div className=\"p-1.5 rounded-lg bg-foreground/[0.06] dark:bg-foreground/[0.04]\">\n <Icon className=\"h-3.5 w-3.5 text-foreground/70 dark:text-muted-foreground\" />\n </div>\n )}\n <span className=\"text-xs font-semibold text-muted-foreground uppercase tracking-wider\">\n {label}\n </span>\n </div>\n <div className=\"mt-3 flex items-baseline gap-2\">\n <span className=\"text-3xl font-bold tabular-nums text-foreground\">\n {typeof value === \"number\" ? value.toLocaleString() : value}\n </span>\n {trend && (\n <span\n className={cn(\n \"inline-flex items-center gap-0.5 text-xs font-medium\",\n trend.direction === \"up\"\n ? \"text-emerald-600 dark:text-emerald-400\"\n : \"text-red-600 dark:text-red-400\"\n )}\n >\n <svg\n className={cn(\"h-3 w-3\", trend.direction === \"down\" && \"rotate-180\")}\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 2.5V9.5M6 2.5L3 5.5M6 2.5L9 5.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n {trend.value}%\n {trend.label && (\n <span className=\"text-muted-foreground ml-0.5\">{trend.label}</span>\n )}\n </span>\n )}\n </div>\n {description && (\n <p className=\"mt-1 text-xs text-muted-foreground\">\n {description}\n </p>\n )}\n </div>\n </div>\n </div>\n </div>\n );\n}\n"],"mappings":";;;;;AAOA,MAAM,mCAAmB,IAAI,IAAsC;CACjE,CAAC,QAAQ,gCAAgC;CACzC,CAAC,QAAQ,gCAAgC;CACzC,CAAC,UAAU,kCAAkC;CAC7C,CAAC,SAAS,mCAAmC;CAC7C,CAAC,UAAU,kCAAkC;CAC7C,CAAC,WAAW,iCAAiC;AAC/C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;AAyCD,SAAgB,iBAAiB,EAC/B,OACA,OACA,aACA,OACA,MAAM,MACN,WAAW,WACX,WACA,GAAG,SACqB;CACxB,MAAM,iBAAiB,iBAAiB,IAAI,QAAQ,KAAK;CAEzD,OACE,qBAAC,OAAD;EACE,WAAW,GACT,mJACA,sGACA,6BACA,SACF;EACA,GAAI;YAPN;GASE,oBAAC,OAAD,EAAK,WAAU,uIAAwI,CAAA;GACvJ,oBAAC,OAAD,EACE,WAAW,GACT,+GACA,cACF,EACD,CAAA;GACD,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,OAAD;KAAK,WAAU;eACb,qBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,qBAAC,OAAD;QAAK,WAAU;kBAAf,CACG,QACC,oBAAC,OAAD;SAAK,WAAU;mBACb,oBAAC,MAAD,EAAM,WAAU,4DAA6D,CAAA;QAC1E,CAAA,GAEP,oBAAC,QAAD;SAAM,WAAU;mBACb;QACG,CAAA,CACH;;OACL,qBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,oBAAC,QAAD;SAAM,WAAU;mBACb,OAAO,UAAU,WAAW,MAAM,eAAe,IAAI;QAClD,CAAA,GACL,SACC,qBAAC,QAAD;SACE,WAAW,GACT,wDACA,MAAM,cAAc,OAChB,2CACA,gCACN;mBANF;UAQE,oBAAC,OAAD;WACE,WAAW,GAAG,WAAW,MAAM,cAAc,UAAU,YAAY;WACnE,SAAQ;WACR,MAAK;WACL,OAAM;qBAEN,oBAAC,QAAD;YACE,GAAE;YACF,QAAO;YACP,aAAY;YACZ,eAAc;YACd,gBAAe;WAChB,CAAA;UACE,CAAA;UACJ,MAAM;UAAM;UACZ,MAAM,SACL,oBAAC,QAAD;WAAM,WAAU;qBAAgC,MAAM;UAAY,CAAA;SAEhE;UAEL;;OACJ,eACC,oBAAC,KAAD;QAAG,WAAU;kBACV;OACA,CAAA;MAEF;;IACF,CAAA;GACF,CAAA;EACF;;AAET"}

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

@@ -1,5 +1,3 @@
-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";
@@ -27,7 +25,7 @@ declare function DesignPillToggle({
   gradient,
   showLabels,
   className
-}: DesignPillToggleProps): react_jsx_runtime0.JSX.Element;
+}: DesignPillToggleProps): import("react/jsx-runtime").JSX.Element;
 //#endregion
 export { DesignPillToggle, DesignPillToggleOption, DesignPillToggleProps };
 //# sourceMappingURL=pill-toggle.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"pill-toggle.d.ts","names":[],"sources":["../../../src/components/pill-toggle.tsx"],"mappings":"~~;;;~~KAOK,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,iBAuCc,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"}
1	+ {"version":3,"file":"pill-toggle.d.ts","names":[],"sources":["../../../src/components/pill-toggle.tsx"],"mappings":";KAOK,oBAAA;AAAA,KACA,wBAAA;AAAA,KAEO,sBAAA;EACV,EAAA;EACA,KAAA;EACA,IAAA,GAAO,KAAA,CAAM,WAAW;AAAA;AAAA,KAGd,qBAAA;EACV,OAAA,EAAS,sBAAA;EACT,QAAA;EACA,QAAA,GAAW,EAAA,oBAAsB,OAAA;EACjC,IAAA,GAAO,oBAAA;EACP,YAAA;EACA,QAAA,GAAW,wBAAA,EATa;EAWxB,UAAA;EACA,SAAA;AAAA;AAAA,iBAuCc,gBAAA;EACd,OAAA;EACA,QAAA;EACA,QAAA;EACA,IAAA;EACA,YAAA,EAAc,gBAAA;EACd,QAAA;EACA,UAAA;EACA;AAAA,GACC,qBAAA,+BAAqB,GAAA,CAAA,OAAA"}

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

@@ -1,14 +1,12 @@
 "use client";
 import { Spinner, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, cn } from "@hexclave/ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { runAsynchronouslyWithAlert } from "@hexclave/shared/dist/utils/promises";
 import { useGlassmorphicDefault } from "./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",
@@ -25,7 +23,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"],
@@ -128,7 +126,7 @@ function DesignPillToggle({ options, selected, onSelect, size = "md", glassmorph
 	});
 	return showLabels ? body : /* @__PURE__ */ jsx(TooltipProvider, { children: body });
 }
 //#endregion
 export { DesignPillToggle };
 //# sourceMappingURL=pill-toggle.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"pill-toggle.js","names":[],"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":";;;;;;;;;AAuCA,MAAM,mBAAmB;AAEzB,MAAM,cAAc,IAAI,IAAqC;CAC3D,CAAC,MAAM;EAAE,QAAQ;EAAuB,gBAAgB;EAAmB,MAAM;EAAe,CAAC;CACjG,CAAC,MAAM;EAAE,QAAQ;EAAqB,gBAAgB;EAAmB,MAAM;EAAW,CAAC;CAC3F,CAAC,MAAM;EAAE,QAAQ;EAAuB,gBAAgB;EAAqB,MAAM;EAAW,CAAC;CAChG,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;CAC3E,MAAM,CAAC,eAAe,oBAAoB,SAA+B,KAAK;CAC9E,MAAM,CAAC,sBAAsB,2BAA2B,SAAS,MAAM;CACvE,MAAM,YAAY,OAA8B,KAAK;CACrD,MAAM,aAAa,uBAAO,IAAI,KAAgC,CAAC;CAE/D,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,iBAAgB;AACd,MAAI,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,WAAY;EAC9E,MAAM,aAAa,OAAO,WAAW,mCAAmC;EACxE,MAAM,mCAAmC,wBAAwB,WAAW,QAAQ;AAEpF,8BAA4B;AAC5B,aAAW,iBAAiB,UAAU,2BAA2B;AAEjE,eAAa,WAAW,oBAAoB,UAAU,2BAA2B;IAChF,EAAE,CAAC;AAEN,iBAAgB;EACd,MAAM,SAAS,UAAU;EACzB,MAAM,iBAAiB,WAAW,QAAQ,IAAI,SAAS;AAEvD,MAAI,CAAC,UAAU,CAAC,gBAAgB;AAC9B,oBAAiB,KAAK;AACtB;;EAGF,MAAM,4BAA4B;AAChC,oBAAiB;IACf,MAAM,eAAe;IACrB,OAAO,eAAe;IACvB,CAAC;;AAGJ,uBAAqB;AAErB,MAAI,OAAO,mBAAmB,YAAa;EAC3C,MAAM,iBAAiB,IAAI,eAAe,oBAAoB;AAC9D,iBAAe,QAAQ,OAAO;AAC9B,iBAAe,QAAQ,eAAe;AAEtC,eAAa,eAAe,YAAY;IACvC,CAAC,SAAS,SAAS,CAAC;CAEvB,MAAM,OACJ,qBAAC;EACC,KAAK;EACL,WAAW,GACT,0DACA,eACI,0CACA,wCACJ,UACD;aAEA,iBAAiB,QAChB,oBAAC;GACC,WAAW,GACT,6GACA,eACI,yFACA,gBACL;GACD,OAAO;IACL,YAAY,uBAAuB,SAAY;IAC/C,WAAW,cAAc,cAAc,KAAK;IAC5C,OAAO,cAAc;IACtB;IACD,EAEH,QAAQ,KAAK,WAAW;GACvB,MAAM,WAAW,aAAa,OAAO;GACrC,MAAM,OAAO,OAAO;GAEpB,MAAM,OACJ,qBAAC;IACC,MAAK;IAEL,MAAM,YAAY;AAChB,SAAI,QACF,YAAW,QAAQ,IAAI,OAAO,IAAI,QAAQ;SAE1C,YAAW,QAAQ,OAAO,OAAO,GAAG;;IAGxC,eAAe,YAAY,OAAO,GAAG;IACrC,UAAU,oBAAoB;IAC9B,cAAY,aAAa,SAAY,OAAO;IAC5C,WAAW,GACT,kHACA,aAAa,UAAU,SAAS,UAAU,gBAC1C,CAAC,cAAc,sBACf,WACI,GAAG,mBAAmB,gBAAgB,+BAA+B,GACrE,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;MArCF,OAAO,GAsCL;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;AAKR,QAAO,aAAa,OAAO,oBAAC,6BAAiB,OAAuB"}
1	+ {"version":3,"file":"pill-toggle.js","names":[],"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/esm/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/esm/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/esm/components/progress-bar.js CHANGED Viewed

@@ -1,10 +1,8 @@
 "use client";
 import { cn } from "@hexclave/ui";
 import { jsx, jsxs } from "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"],
@@ -46,7 +44,7 @@ function DesignProgressBar({ value, max = 100, gradient = "default", label, show
 		})]
 	});
 }
 //#endregion
 export { DesignProgressBar };
 //# sourceMappingURL=progress-bar.js.map

package/dist/esm/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~~,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~~"}
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,qBAAC,OAAD;EAAK,WAAW,GAAG,UAAU,SAAS;YAAtC,EACI,SAAS,mBACT,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,SACC,oBAAC,QAAD;IAAM,WAAU;cACb;GACG,CAAA,GAEP,kBACC,qBAAC,QAAD;IAAM,WAAU;cAAhB,CACG,KAAK,MAAM,UAAU,GAAE,GACpB;KAEL;MAEP,oBAAC,OAAD;GACE,WAAW,GACT,4EACA,WACF;aAEA,oBAAC,OAAD;IACE,WAAW,GACT,4DACA,SACF;IACA,OAAO,EAAE,OAAO,GAAG,WAAW,GAAG;GAClC,CAAA;EACE,CAAA,CACF;;AAET"}

package/dist/esm/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/esm/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/esm/components/separator.js CHANGED Viewed

@@ -1,8 +1,6 @@
 "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
@@ -21,7 +19,7 @@ function DesignSeparator({ orientation = "horizontal", className, ...props }) {
 		...props
 	});
 }
 //#endregion
 export { DesignSeparator };
 //# sourceMappingURL=separator.js.map

package/dist/esm/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~~,oBAAC;~~EACC~~,MAAK;EACL,oBAAkB;EAClB,WAAW,GACT,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,oBAAC,OAAD;EACE,MAAK;EACL,oBAAkB;EAClB,WAAW,GACT,gBAAgB,eACZ,wDACA,uDACJ,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/esm/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/esm/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/esm/components/skeleton.js CHANGED Viewed

@@ -1,8 +1,6 @@
 "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
@@ -22,7 +20,7 @@ function DesignSkeleton({ className, ...props }) {
 		...props
 	});
 }
 //#endregion
 export { DesignSkeleton };
 //# sourceMappingURL=skeleton.js.map

package/dist/esm/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~~,oBAAC;~~EACC~~,WAAW,GACT,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,oBAAC,OAAD;EACE,WAAW,GACT,iEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

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

@@ -1,10 +1,8 @@
 "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";
+import "react";
 //#region src/components/table.tsx
 /**
 * Simple static table — header + rows + cells. Use this for small,
@@ -70,7 +68,7 @@ const DesignTableCell = forwardRefIfNeeded(({ className, ...props }, ref) => /*
 	...props
 }));
 DesignTableCell.displayName = "DesignTableCell";
 //#endregion
 export { DesignTable, DesignTableBody, DesignTableCell, DesignTableHead, DesignTableHeader, DesignTableRow };
 //# sourceMappingURL=table.js.map

package/dist/esm/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,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"}
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,cAAc,oBAGxB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CAAK,WAAU;WACb,oBAAC,SAAD;EACO;EACL,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AACE,CAAA,CACN;AACD,YAAY,cAAc;AAE1B,MAAa,oBAAoB,oBAG9B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,SAAD;CACO;CACL,WAAW,GAAG,mGAAmG,SAAS;CAC1H,GAAI;AACL,CAAA,CACF;AACD,kBAAkB,cAAc;AAEhC,MAAa,kBAAkB,oBAG5B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,SAAD;CACO;CACL,WAAW,GAAG,8BAA8B,SAAS;CACrD,GAAI;AACL,CAAA,CACF;AACD,gBAAgB,cAAc;AAE9B,MAAa,iBAAiB,oBAG3B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,MAAD;CACO;CACL,WAAW,GACT,oLACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AACD,eAAe,cAAc;AAE7B,MAAa,kBAAkB,oBAG5B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,MAAD;CACO;CACL,WAAW,GACT,0IACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AACD,gBAAgB,cAAc;AAE9B,MAAa,kBAAkB,oBAG5B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,MAAD;CACO;CACL,WAAW,GACT,wFACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AACD,gBAAgB,cAAc"}

package/dist/esm/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/esm/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/esm/components/tabs.js CHANGED Viewed

@@ -1,21 +1,19 @@
 "use client";
 import { Spinner, cn } from "@hexclave/ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { runAsynchronouslyWithAlert } from "@hexclave/shared/dist/utils/promises";
 import { useGlassmorphicDefault } from "./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",
@@ -157,7 +155,7 @@ function DesignCategoryTabs({ categories, selectedCategory, onSelect, showBadge
 		}) : null]
 	});
 }
 //#endregion
 export { DesignCategoryTabs };
 //# sourceMappingURL=tabs.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs.js","names":[],"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":[],"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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"}