@hexclave/dashboard-ui-components 1.0.2 → 1.0.5

package/dist/components/button.d.ts

@@ -4,8 +4,8 @@ import { VariantProps } from "class-variance-authority";
 
 //#region src/components/button.d.ts
 declare const designButtonVariants: (props?: ({
-  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "plain" | null | undefined;
-  size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+  variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "plain" | null | undefined;
+  size?: "icon" | "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 type DesignOriginalButtonProps = {
   asChild?: boolean;
@@ -36,8 +36,8 @@ declare const DesignButton: React.FC<{
 } & {
   asChild?: boolean;
 } & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<(props?: ({
-  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "plain" | null | undefined;
-  size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+  variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "plain" | null | undefined;
+  size?: "icon" | "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string> & {
   ref?: React.Ref<HTMLButtonElement> | undefined;
 }>;

package/dist/components/pill-toggle.js

@@ -49,7 +49,7 @@ function DesignPillToggle({ options, selected, onSelect, size = "md", glassmorph
 			(0, _hexclave_shared_dist_utils_promises.runAsynchronouslyWithAlert)(Promise.resolve(result).finally(() => setLoadingOptionId(null)));
 		}
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hexclave_ui.TooltipProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: (0, _hexclave_ui.cn)("inline-flex items-center gap-1 p-1 rounded-xl", glassmorphic ? "bg-foreground/[0.04] backdrop-blur-sm" : "bg-black/[0.08] dark:bg-white/[0.04]", className),
 		children: options.map((option) => {
 			const isActive = selected === option.id;
@@ -79,7 +79,7 @@ function DesignPillToggle({ options, selected, onSelect, size = "md", glassmorph
 			}, option.id);
 			return pill;
 		})
-	});
+	}) });
 }
 
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"pill-toggle.js","names":["Spinner","Tooltip","TooltipTrigger","TooltipPortal","TooltipContent"],"sources":["../../src/components/pill-toggle.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { cn, Spinner, Tooltip, TooltipContent, TooltipTrigger } from \"@hexclave/ui\";\nimport { TooltipPortal } from \"@radix-ui/react-tooltip\";\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  icon: string,\n};\n\nconst sizeClasses = new Map<DesignPillToggleSize, SizeClass>([\n  [\"sm\", { button: \"px-3 py-1.5 text-xs\", icon: \"h-3.5 w-3.5\" }],\n  [\"md\", { button: \"px-4 py-2 text-sm\", icon: \"h-4 w-4\" }],\n  [\"lg\", { button: \"px-5 py-2.5 text-sm\", icon: \"h-4 w-4\" }],\n]);\n\nconst gradientClasses = new Map<DesignPillToggleGradient, string>([\n  [\"blue\", \"ring-blue-500/20 dark:ring-blue-400/20\"],\n  [\"cyan\", \"ring-cyan-500/20 dark:ring-cyan-400/20\"],\n  [\"purple\", \"ring-purple-500/20 dark:ring-purple-400/20\"],\n  [\"green\", \"ring-emerald-500/20 dark:ring-emerald-400/20\"],\n  [\"orange\", \"ring-amber-500/20 dark:ring-amber-400/20\"],\n  [\"default\", \"ring-black/[0.12] dark:ring-white/[0.06]\"],\n]);\n\nfunction getMapValueOrThrow<TKey, TValue>(map: Map<TKey, TValue>, key: TKey, mapName: string) {\n  const value = map.get(key);\n  if (!value) {\n    throw new Error(`Missing ${mapName} entry for key \"${String(key)}\"`);\n  }\n  return value;\n}\n\nexport function DesignPillToggle({\n  options,\n  selected,\n  onSelect,\n  size = \"md\",\n  glassmorphic: glassmorphicProp,\n  gradient = \"default\",\n  showLabels = true,\n  className,\n}: DesignPillToggleProps) {\n  const glassmorphic = useGlassmorphicDefault(glassmorphicProp);\n  const sizeClass = getMapValueOrThrow(sizeClasses, size, \"sizeClasses\");\n  const activeRingClass = getMapValueOrThrow(gradientClasses, gradient, \"gradientClasses\");\n\n  const [loadingOptionId, setLoadingOptionId] = useState<string | null>(null);\n\n  const handleClick = (optionId: string) => {\n    const result = onSelect(optionId);\n    if (result && typeof (result as Promise<void>).then === \"function\") {\n      setLoadingOptionId(optionId);\n      runAsynchronouslyWithAlert(\n        Promise.resolve(result).finally(() => setLoadingOptionId(null))\n      );\n    }\n  };\n\n  return (\n    <div\n      className={cn(\n        \"inline-flex items-center gap-1 p-1 rounded-xl\",\n        glassmorphic\n          ? \"bg-foreground/[0.04] backdrop-blur-sm\"\n          : \"bg-black/[0.08] dark:bg-white/[0.04]\",\n        className\n      )}\n    >\n      {options.map((option) => {\n        const isActive = selected === option.id;\n        const Icon = option.icon;\n\n        const pill = (\n          <button\n            type=\"button\"\n            key={option.id}\n            onClick={() => handleClick(option.id)}\n            disabled={loadingOptionId !== null}\n            className={cn(\n              \"relative flex items-center gap-2 font-medium rounded-lg transition-all duration-150 hover:transition-none\",\n              sizeClass.button,\n              isActive\n                ? cn(\n                  \"bg-background text-foreground shadow-sm ring-1\",\n                  glassmorphic\n                    ? \"ring-foreground/[0.06] dark:bg-[hsl(240,71%,70%)]/10 dark:text-[hsl(240,71%,90%)] dark:ring-[hsl(240,71%,70%)]/20\"\n                    : activeRingClass\n                )\n                : cn(\n                  \"text-muted-foreground hover:text-foreground\",\n                  glassmorphic\n                    ? \"hover:bg-background/50\"\n                    : \"hover:bg-black/[0.06] dark:hover:bg-white/[0.04]\"\n                )\n            )}\n          >\n            {loadingOptionId === option.id && (\n              <Spinner\n                size={12}\n                className=\"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none\"\n              />\n            )}\n            <span className={cn(\n              \"flex items-center gap-2\",\n              loadingOptionId === option.id && \"invisible\"\n            )}>\n              {Icon && <Icon className={sizeClass.icon} />}\n              {showLabels && option.label}\n            </span>\n          </button>\n        );\n\n        if (!showLabels) {\n          return (\n            <Tooltip key={option.id} delayDuration={0}>\n              <TooltipTrigger asChild>\n                {pill}\n              </TooltipTrigger>\n              <TooltipPortal>\n                <TooltipContent side=\"top\">\n                  {option.label}\n                </TooltipContent>\n              </TooltipPortal>\n            </Tooltip>\n          );\n        }\n\n        return pill;\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAkCA,MAAM,cAAc,IAAI,IAAqC;CAC3D,CAAC,MAAM;EAAE,QAAQ;EAAuB,MAAM;EAAe,CAAC;CAC9D,CAAC,MAAM;EAAE,QAAQ;EAAqB,MAAM;EAAW,CAAC;CACxD,CAAC,MAAM;EAAE,QAAQ;EAAuB,MAAM;EAAW,CAAC;CAC3D,CAAC;AAEF,MAAM,kBAAkB,IAAI,IAAsC;CAChE,CAAC,QAAQ,yCAAyC;CAClD,CAAC,QAAQ,yCAAyC;CAClD,CAAC,UAAU,6CAA6C;CACxD,CAAC,SAAS,+CAA+C;CACzD,CAAC,UAAU,2CAA2C;CACtD,CAAC,WAAW,2CAA2C;CACxD,CAAC;AAEF,SAAS,mBAAiC,KAAwB,KAAW,SAAiB;CAC5F,MAAM,QAAQ,IAAI,IAAI,IAAI;AAC1B,KAAI,CAAC,MACH,OAAM,IAAI,MAAM,WAAW,QAAQ,kBAAkB,OAAO,IAAI,CAAC,GAAG;AAEtE,QAAO;;AAGT,SAAgB,iBAAiB,EAC/B,SACA,UACA,UACA,OAAO,MACP,cAAc,kBACd,WAAW,WACX,aAAa,MACb,aACwB;CACxB,MAAM,qDAAsC,iBAAiB;CAC7D,MAAM,YAAY,mBAAmB,aAAa,MAAM,cAAc;CACtE,MAAM,kBAAkB,mBAAmB,iBAAiB,UAAU,kBAAkB;CAExF,MAAM,CAAC,iBAAiB,0CAA8C,KAAK;CAE3E,MAAM,eAAe,aAAqB;EACxC,MAAM,SAAS,SAAS,SAAS;AACjC,MAAI,UAAU,OAAQ,OAAyB,SAAS,YAAY;AAClE,sBAAmB,SAAS;AAC5B,wEACE,QAAQ,QAAQ,OAAO,CAAC,cAAc,mBAAmB,KAAK,CAAC,CAChE;;;AAIL,QACE,2CAAC;EACC,gCACE,iDACA,eACI,0CACA,wCACJ,UACD;YAEA,QAAQ,KAAK,WAAW;GACvB,MAAM,WAAW,aAAa,OAAO;GACrC,MAAM,OAAO,OAAO;GAEpB,MAAM,OACJ,4CAAC;IACC,MAAK;IAEL,eAAe,YAAY,OAAO,GAAG;IACrC,UAAU,oBAAoB;IAC9B,gCACE,6GACA,UAAU,QACV,gCAEI,kDACA,eACI,sHACA,gBACL,wBAEC,+CACA,eACI,2BACA,mDACL,CACJ;eAEA,oBAAoB,OAAO,MAC1B,2CAACA;KACC,MAAM;KACN,WAAU;MACV,EAEJ,4CAAC;KAAK,gCACJ,2BACA,oBAAoB,OAAO,MAAM,YAClC;gBACE,QAAQ,2CAAC,QAAK,WAAW,UAAU,OAAQ,EAC3C,cAAc,OAAO;MACjB;MAjCF,OAAO,GAkCL;AAGX,OAAI,CAAC,WACH,QACE,4CAACC;IAAwB,eAAe;eACtC,2CAACC;KAAe;eACb;MACc,EACjB,2CAACC,mDACC,2CAACC;KAAe,MAAK;eAClB,OAAO;MACO,GACH;MARJ,OAAO,GASX;AAId,UAAO;IACP;GACE"}
+{"version":3,"file":"pill-toggle.js","names":["TooltipProvider","Spinner","Tooltip","TooltipTrigger","TooltipPortal","TooltipContent"],"sources":["../../src/components/pill-toggle.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { cn, Spinner, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"@hexclave/ui\";\nimport { TooltipPortal } from \"@radix-ui/react-tooltip\";\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  icon: string,\n};\n\nconst sizeClasses = new Map<DesignPillToggleSize, SizeClass>([\n  [\"sm\", { button: \"px-3 py-1.5 text-xs\", icon: \"h-3.5 w-3.5\" }],\n  [\"md\", { button: \"px-4 py-2 text-sm\", icon: \"h-4 w-4\" }],\n  [\"lg\", { button: \"px-5 py-2.5 text-sm\", icon: \"h-4 w-4\" }],\n]);\n\nconst gradientClasses = new Map<DesignPillToggleGradient, string>([\n  [\"blue\", \"ring-blue-500/20 dark:ring-blue-400/20\"],\n  [\"cyan\", \"ring-cyan-500/20 dark:ring-cyan-400/20\"],\n  [\"purple\", \"ring-purple-500/20 dark:ring-purple-400/20\"],\n  [\"green\", \"ring-emerald-500/20 dark:ring-emerald-400/20\"],\n  [\"orange\", \"ring-amber-500/20 dark:ring-amber-400/20\"],\n  [\"default\", \"ring-black/[0.12] dark:ring-white/[0.06]\"],\n]);\n\nfunction getMapValueOrThrow<TKey, TValue>(map: Map<TKey, TValue>, key: TKey, mapName: string) {\n  const value = map.get(key);\n  if (!value) {\n    throw new Error(`Missing ${mapName} entry for key \"${String(key)}\"`);\n  }\n  return value;\n}\n\nexport function DesignPillToggle({\n  options,\n  selected,\n  onSelect,\n  size = \"md\",\n  glassmorphic: glassmorphicProp,\n  gradient = \"default\",\n  showLabels = true,\n  className,\n}: DesignPillToggleProps) {\n  const glassmorphic = useGlassmorphicDefault(glassmorphicProp);\n  const sizeClass = getMapValueOrThrow(sizeClasses, size, \"sizeClasses\");\n  const activeRingClass = getMapValueOrThrow(gradientClasses, gradient, \"gradientClasses\");\n\n  const [loadingOptionId, setLoadingOptionId] = useState<string | null>(null);\n\n  const handleClick = (optionId: string) => {\n    const result = onSelect(optionId);\n    if (result && typeof (result as Promise<void>).then === \"function\") {\n      setLoadingOptionId(optionId);\n      runAsynchronouslyWithAlert(\n        Promise.resolve(result).finally(() => setLoadingOptionId(null))\n      );\n    }\n  };\n\n  return (\n    <TooltipProvider>\n      <div\n        className={cn(\n          \"inline-flex items-center gap-1 p-1 rounded-xl\",\n          glassmorphic\n            ? \"bg-foreground/[0.04] backdrop-blur-sm\"\n            : \"bg-black/[0.08] dark:bg-white/[0.04]\",\n          className\n        )}\n      >\n        {options.map((option) => {\n          const isActive = selected === option.id;\n          const Icon = option.icon;\n\n          const pill = (\n            <button\n              type=\"button\"\n              key={option.id}\n              onClick={() => handleClick(option.id)}\n              disabled={loadingOptionId !== null}\n              className={cn(\n                \"relative flex items-center gap-2 font-medium rounded-lg transition-all duration-150 hover:transition-none\",\n                sizeClass.button,\n                isActive\n                  ? cn(\n                    \"bg-background text-foreground shadow-sm ring-1\",\n                    glassmorphic\n                      ? \"ring-foreground/[0.06] dark:bg-[hsl(240,71%,70%)]/10 dark:text-[hsl(240,71%,90%)] dark:ring-[hsl(240,71%,70%)]/20\"\n                      : activeRingClass\n                  )\n                  : cn(\n                    \"text-muted-foreground hover:text-foreground\",\n                    glassmorphic\n                      ? \"hover:bg-background/50\"\n                      : \"hover:bg-black/[0.06] dark:hover:bg-white/[0.04]\"\n                  )\n              )}\n            >\n              {loadingOptionId === option.id && (\n                <Spinner\n                  size={12}\n                  className=\"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none\"\n                />\n              )}\n              <span className={cn(\n                \"flex items-center gap-2\",\n                loadingOptionId === option.id && \"invisible\"\n              )}>\n                {Icon && <Icon className={sizeClass.icon} />}\n                {showLabels && option.label}\n              </span>\n            </button>\n          );\n\n          if (!showLabels) {\n            return (\n              <Tooltip key={option.id} delayDuration={0}>\n                <TooltipTrigger asChild>\n                  {pill}\n                </TooltipTrigger>\n                <TooltipPortal>\n                  <TooltipContent side=\"top\">\n                    {option.label}\n                  </TooltipContent>\n                </TooltipPortal>\n              </Tooltip>\n            );\n          }\n\n          return pill;\n        })}\n      </div>\n    </TooltipProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAkCA,MAAM,cAAc,IAAI,IAAqC;CAC3D,CAAC,MAAM;EAAE,QAAQ;EAAuB,MAAM;EAAe,CAAC;CAC9D,CAAC,MAAM;EAAE,QAAQ;EAAqB,MAAM;EAAW,CAAC;CACxD,CAAC,MAAM;EAAE,QAAQ;EAAuB,MAAM;EAAW,CAAC;CAC3D,CAAC;AAEF,MAAM,kBAAkB,IAAI,IAAsC;CAChE,CAAC,QAAQ,yCAAyC;CAClD,CAAC,QAAQ,yCAAyC;CAClD,CAAC,UAAU,6CAA6C;CACxD,CAAC,SAAS,+CAA+C;CACzD,CAAC,UAAU,2CAA2C;CACtD,CAAC,WAAW,2CAA2C;CACxD,CAAC;AAEF,SAAS,mBAAiC,KAAwB,KAAW,SAAiB;CAC5F,MAAM,QAAQ,IAAI,IAAI,IAAI;AAC1B,KAAI,CAAC,MACH,OAAM,IAAI,MAAM,WAAW,QAAQ,kBAAkB,OAAO,IAAI,CAAC,GAAG;AAEtE,QAAO;;AAGT,SAAgB,iBAAiB,EAC/B,SACA,UACA,UACA,OAAO,MACP,cAAc,kBACd,WAAW,WACX,aAAa,MACb,aACwB;CACxB,MAAM,qDAAsC,iBAAiB;CAC7D,MAAM,YAAY,mBAAmB,aAAa,MAAM,cAAc;CACtE,MAAM,kBAAkB,mBAAmB,iBAAiB,UAAU,kBAAkB;CAExF,MAAM,CAAC,iBAAiB,0CAA8C,KAAK;CAE3E,MAAM,eAAe,aAAqB;EACxC,MAAM,SAAS,SAAS,SAAS;AACjC,MAAI,UAAU,OAAQ,OAAyB,SAAS,YAAY;AAClE,sBAAmB,SAAS;AAC5B,wEACE,QAAQ,QAAQ,OAAO,CAAC,cAAc,mBAAmB,KAAK,CAAC,CAChE;;;AAIL,QACE,2CAACA,0CACC,2CAAC;EACC,gCACE,iDACA,eACI,0CACA,wCACJ,UACD;YAEA,QAAQ,KAAK,WAAW;GACvB,MAAM,WAAW,aAAa,OAAO;GACrC,MAAM,OAAO,OAAO;GAEpB,MAAM,OACJ,4CAAC;IACC,MAAK;IAEL,eAAe,YAAY,OAAO,GAAG;IACrC,UAAU,oBAAoB;IAC9B,gCACE,6GACA,UAAU,QACV,gCAEI,kDACA,eACI,sHACA,gBACL,wBAEC,+CACA,eACI,2BACA,mDACL,CACJ;eAEA,oBAAoB,OAAO,MAC1B,2CAACC;KACC,MAAM;KACN,WAAU;MACV,EAEJ,4CAAC;KAAK,gCACJ,2BACA,oBAAoB,OAAO,MAAM,YAClC;gBACE,QAAQ,2CAAC,QAAK,WAAW,UAAU,OAAQ,EAC3C,cAAc,OAAO;MACjB;MAjCF,OAAO,GAkCL;AAGX,OAAI,CAAC,WACH,QACE,4CAACC;IAAwB,eAAe;eACtC,2CAACC;KAAe;eACb;MACc,EACjB,2CAACC,mDACC,2CAACC;KAAe,MAAK;eAClB,OAAO;MACO,GACH;MARJ,OAAO,GASX;AAId,UAAO;IACP;GACE,GACU"}