@hyddenlabs/hydn-ui 0.3.0-alpha.152 → 0.3.0-alpha.153

package/dist/index.cjs

@@ -135,14 +135,302 @@ function ColorModeToggle({ className = "" }) {
 }
 ColorModeToggle.displayName = "ColorModeToggle";
 var color_mode_toggle_default = ColorModeToggle;
-var sizeMap = {
-  xs: 16,
-  sm: 18,
-  md: 22,
-  lg: 26,
-  xl: 30,
-  "2xl": 36
+
+// src/theme/size-tokens.ts
+var visualSizes = {
+  xs: {
+    classes: "w-3.5 h-3.5 sm:w-3 sm:h-3",
+    // 14px mobile, 12px desktop
+    pixels: { mobile: 14, desktop: 12 }
+  },
+  sm: {
+    classes: "w-5 h-5 sm:w-4 sm:h-4",
+    // 20px mobile, 16px desktop
+    pixels: { mobile: 20, desktop: 16 }
+  },
+  md: {
+    classes: "w-6 h-6 sm:w-5 sm:h-5",
+    // 24px mobile, 20px desktop
+    pixels: { mobile: 24, desktop: 20 }
+  },
+  lg: {
+    classes: "w-7 h-7 sm:w-6 sm:h-6",
+    // 28px mobile, 24px desktop
+    pixels: { mobile: 28, desktop: 24 }
+  },
+  xl: {
+    classes: "w-8 h-8 sm:w-7 sm:h-7",
+    // 32px mobile, 28px desktop
+    pixels: { mobile: 32, desktop: 28 }
+  },
+  "2xl": {
+    classes: "w-9 h-9 sm:w-8 sm:h-8",
+    // 36px mobile, 32px desktop
+    pixels: { mobile: 36, desktop: 32 }
+  },
+  "3xl": {
+    classes: "w-12 h-12 sm:w-10 sm:h-10",
+    // 48px mobile, 40px desktop
+    pixels: { mobile: 48, desktop: 40 }
+  }
+};
+var spinnerSizes = {
+  xs: { ...visualSizes.xs, border: "border" },
+  sm: { ...visualSizes.sm, border: "border-2" },
+  md: { ...visualSizes.md, border: "border-2" },
+  lg: { ...visualSizes.lg, border: "border-2" },
+  xl: { ...visualSizes.xl, border: "border-[3px]" },
+  "2xl": { ...visualSizes["2xl"], border: "border-[3px]" },
+  "3xl": { ...visualSizes["3xl"], border: "border-4" }
+};
+var avatarSizes = {
+  xs: {
+    classes: "w-8 h-8 sm:w-6 sm:h-6",
+    text: "text-sm sm:text-xs"
+  },
+  sm: {
+    classes: "w-10 h-10 sm:w-8 sm:h-8",
+    text: "text-base sm:text-sm"
+  },
+  md: {
+    classes: "w-12 h-12 sm:w-10 sm:h-10",
+    text: "text-lg sm:text-base"
+  },
+  lg: {
+    classes: "w-14 h-14 sm:w-12 sm:h-12",
+    text: "text-xl sm:text-lg"
+  },
+  xl: {
+    classes: "w-20 h-20 sm:w-16 sm:h-16",
+    text: "text-2xl sm:text-xl"
+  },
+  "2xl": {
+    classes: "w-24 h-24 sm:w-20 sm:h-20",
+    text: "text-3xl sm:text-2xl"
+  },
+  "3xl": {
+    classes: "w-28 h-28 sm:w-24 sm:h-24",
+    text: "text-4xl sm:text-3xl"
+  }
+};
+var logoSizes = {
+  xs: { classes: "h-5 w-5 sm:h-4 sm:w-4" },
+  sm: { classes: "h-7 w-7 sm:h-6 sm:w-6" },
+  md: { classes: "h-9 w-9 sm:h-8 sm:w-8" },
+  lg: { classes: "h-12 w-12 sm:h-10 sm:w-10" },
+  xl: { classes: "h-14 w-14 sm:h-12 sm:w-12" },
+  "2xl": { classes: "h-20 w-20 sm:h-16 sm:w-16" },
+  "3xl": { classes: "h-24 w-24 sm:h-20 sm:w-20" }
+};
+var interactiveSizes = {
+  xs: {
+    height: "h-8 sm:h-6 min-h-8 sm:min-h-6",
+    padding: "px-3 sm:px-2",
+    text: "text-sm sm:text-xs",
+    icon: visualSizes.xs
+  },
+  sm: {
+    height: "h-10 sm:h-8 min-h-10 sm:min-h-8",
+    padding: "px-4 sm:px-3",
+    text: "text-base sm:text-sm",
+    icon: visualSizes.sm
+  },
+  md: {
+    height: "h-12 sm:h-10 min-h-12 sm:min-h-10",
+    padding: "px-5 sm:px-4",
+    text: "text-base sm:text-sm",
+    icon: visualSizes.md
+  },
+  lg: {
+    height: "h-14 sm:h-12 min-h-14 sm:min-h-12",
+    padding: "px-7 sm:px-6",
+    text: "text-lg sm:text-base",
+    icon: visualSizes.lg
+  },
+  xl: {
+    height: "h-16 sm:h-14 min-h-16 sm:min-h-14",
+    padding: "px-9 sm:px-8",
+    text: "text-xl sm:text-lg",
+    icon: visualSizes.xl
+  }
+};
+var badgeSizes = {
+  sm: {
+    classes: "px-2.5 sm:px-2 py-1 sm:py-0.5 text-sm sm:text-xs",
+    icon: visualSizes.xs
+  },
+  md: {
+    classes: "px-3 sm:px-2.5 py-1 sm:py-0.5 text-sm sm:text-xs font-semibold",
+    icon: visualSizes.sm
+  },
+  lg: {
+    classes: "px-4 sm:px-3 py-1.5 sm:py-1 text-base sm:text-sm font-semibold",
+    icon: visualSizes.md
+  }
+};
+var chipSizes = {
+  sm: {
+    classes: "px-2.5 sm:px-2 py-1.5 sm:py-1 text-sm sm:text-xs gap-1.5 sm:gap-1",
+    icon: visualSizes.xs
+  },
+  md: {
+    classes: "px-3.5 sm:px-3 py-2 sm:py-1.5 text-base sm:text-sm gap-2 sm:gap-1.5",
+    icon: visualSizes.sm
+  },
+  lg: {
+    classes: "px-5 sm:px-4 py-2.5 sm:py-2 text-lg sm:text-base gap-2.5 sm:gap-2",
+    icon: visualSizes.md
+  }
+};
+var codeSizes = {
+  sm: "text-xs px-1 py-0.5",
+  md: "text-sm px-1.5 py-0.5",
+  lg: "text-base px-2 py-1"
+};
+var statusLabelSizes = {
+  sm: {
+    container: "px-2 py-0.5 text-xs gap-1.5",
+    dot: "w-1.5 h-1.5"
+  },
+  md: {
+    container: "px-2.5 py-0.5 text-sm gap-2",
+    dot: "w-2 h-2"
+  },
+  lg: {
+    container: "px-3 py-1 text-base gap-2",
+    dot: "w-2.5 h-2.5"
+  }
+};
+var textSizes = {
+  xs: "text-sm sm:text-xs",
+  sm: "text-base sm:text-sm",
+  base: "text-base",
+  lg: "text-lg",
+  xl: "text-xl sm:text-lg",
+  "2xl": "text-2xl sm:text-xl",
+  "3xl": "text-3xl sm:text-2xl",
+  "4xl": "text-4xl sm:text-3xl",
+  "5xl": "text-5xl sm:text-4xl"
+};
+var headingSizes = {
+  sm: "text-base font-semibold",
+  md: "text-lg font-bold",
+  lg: "text-xl font-bold",
+  xl: "text-2xl font-bold",
+  "2xl": "text-3xl font-bold sm:text-2xl",
+  "3xl": "text-4xl font-bold sm:text-3xl",
+  "4xl": "text-5xl font-bold sm:text-4xl"
+};
+var cardSizes = {
+  xs: "w-full sm:max-w-36",
+  sm: "w-full sm:max-w-64",
+  md: "w-full sm:max-w-96",
+  lg: "w-full sm:max-w-[28rem]",
+  xl: "w-full sm:max-w-[32rem]",
+  "2xl": "w-full sm:max-w-[36rem]",
+  full: "w-full"
+};
+var gapSizes = {
+  none: "gap-0",
+  xs: "gap-2 sm:gap-1",
+  sm: "gap-3 sm:gap-2",
+  md: "gap-5 sm:gap-4",
+  lg: "gap-7 sm:gap-6",
+  xl: "gap-10 sm:gap-8",
+  "2xl": "gap-14 sm:gap-12",
+  "3xl": "gap-20 sm:gap-16"
+};
+var containerSizes = {
+  sm: "max-w-screen-sm",
+  md: "max-w-screen-md",
+  lg: "max-w-screen-lg",
+  xl: "max-w-screen-xl",
+  "2xl": "max-w-screen-2xl",
+  "3xl": "max-w-[1920px]",
+  full: "max-w-full",
+  screen: "max-w-[100vw]"
+};
+var containerMinWidths = {
+  xs: "min-w-[20rem]",
+  // 320px
+  sm: "min-w-[24rem]",
+  // 384px
+  md: "min-w-[28rem]",
+  // 448px
+  lg: "min-w-[32rem]",
+  // 512px
+  xl: "min-w-[36rem]",
+  // 576px
+  "2xl": "min-w-[42rem]",
+  // 672px
+  "3xl": "min-w-[48rem]",
+  // 768px
+  full: "min-w-full",
+  screen: "min-w-screen"
+};
+var containerMinHeights = {
+  xs: "min-h-[10rem]",
+  // 160px
+  sm: "min-h-[15rem]",
+  // 240px
+  md: "min-h-[20rem]",
+  // 320px
+  lg: "min-h-[25rem]",
+  // 400px
+  xl: "min-h-[30rem]",
+  // 480px
+  "2xl": "min-h-[35rem]",
+  // 560px
+  "3xl": "min-h-[40rem]",
+  // 640px
+  full: "min-h-full",
+  screen: "min-h-screen"
+};
+var sectionPadding = {
+  none: "py-0",
+  xs: "py-6 sm:py-4",
+  sm: "py-10 sm:py-8",
+  md: "py-16 sm:py-12",
+  lg: "py-20 sm:py-16",
+  xl: "py-28 sm:py-24",
+  "2xl": "py-36 sm:py-32"
 };
+var cardPadding = {
+  none: "p-0",
+  xs: "p-3 sm:p-2",
+  sm: "p-5 sm:p-4",
+  md: "p-7 sm:p-6",
+  lg: "p-9 sm:p-8",
+  xl: "p-12 sm:p-10",
+  "2xl": "p-14 sm:p-12"
+};
+var overlaySizes = {
+  xs: "w-full sm:w-64",
+  sm: "w-full sm:w-80",
+  md: "w-full sm:w-96",
+  lg: "w-full sm:w-[28rem]",
+  xl: "w-full sm:w-[32rem]",
+  "2xl": "w-full sm:w-[40rem]",
+  "3xl": "w-full sm:w-[48rem]",
+  full: "w-full max-w-2xl"
+};
+var borderRadius = {
+  none: "rounded-none",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  "2xl": "rounded-2xl",
+  "3xl": "rounded-3xl",
+  full: "rounded-full"
+};
+function getIconPixels(size, variant = "desktop") {
+  if (typeof size === "number") return size;
+  return visualSizes[size].pixels[variant];
+}
+function getVisualClasses(size) {
+  return visualSizes[size].classes;
+}
 var Icon = ({
   name,
   size = "md",
@@ -155,7 +443,7 @@ var Icon = ({
   const componentName = pascalName.startsWith("Icon") ? pascalName : "Icon" + pascalName;
   const IconComponent = TablerIcons__namespace[componentName];
   if (!IconComponent) return null;
-  const pixelSize = typeof size === "number" ? size : sizeMap[size] || sizeMap.md;
+  const pixelSize = getIconPixels(size, "desktop");
   return /* @__PURE__ */ jsxRuntime.jsx(
     IconComponent,
     {
@@ -356,16 +644,9 @@ function openLoginPopup(authUrl, onSuccess) {
   }
   return popup;
 }
-var sizeClasses = {
-  xs: "h-4 w-4",
-  sm: "h-6 w-6",
-  md: "h-8 w-8",
-  lg: "h-10 w-10",
-  xl: "h-12 w-12"
-};
 function Logo({ size = "md", className = "" }) {
-  const sizeClass = sizeClasses[size];
-  return /* @__PURE__ */ jsxRuntime.jsx("img", { src: "/icons/logo.svg", alt: "Hydden Logo", className: `${sizeClass} ${className}`, loading: "lazy" });
+  const sizeConfig = logoSizes[size];
+  return /* @__PURE__ */ jsxRuntime.jsx("img", { src: "/icons/logo.svg", alt: "Hydden Logo", className: `${sizeConfig.classes} ${className}`, loading: "lazy" });
 }
 function Container({
   children,
@@ -376,69 +657,26 @@ function Container({
   minWidth,
   minHeight
 }) {
-  const sizeClasses2 = {
-    sm: "max-w-screen-sm",
-    md: "max-w-screen-md",
-    lg: "max-w-screen-lg",
-    xl: "max-w-screen-xl",
-    full: "max-w-full"
-  };
-  const paddingClasses = {
-    none: "",
-    sm: "py-6",
-    md: "py-8",
-    lg: "py-12",
-    xl: "py-16"
-  };
   const alignClasses = {
     start: "mr-auto",
     center: "mx-auto",
     end: "ml-auto"
   };
-  const minWidthClasses = {
-    xs: "min-w-[20rem]",
-    // 320px
-    sm: "min-w-[24rem]",
-    // 384px
-    md: "min-w-[28rem]",
-    // 448px
-    lg: "min-w-[32rem]",
-    // 512px
-    xl: "min-w-[36rem]",
-    // 576px
-    "2xl": "min-w-[42rem]",
-    // 672px
-    "3xl": "min-w-[48rem]",
-    // 768px
-    full: "min-w-full"
-  };
-  const minHeightClasses = {
-    xs: "min-h-[10rem]",
-    // 160px
-    sm: "min-h-[15rem]",
-    // 240px
-    md: "min-h-[20rem]",
-    // 320px
-    lg: "min-h-[25rem]",
-    // 400px
-    xl: "min-h-[30rem]",
-    // 480px
-    "2xl": "min-h-[35rem]",
-    // 560px
-    "3xl": "min-h-[40rem]",
-    // 640px
-    screen: "min-h-screen"
-  };
-  const minWidthClass = minWidth && minWidthClasses[minWidth] ? minWidthClasses[minWidth] : "";
-  const minHeightClass = minHeight && minHeightClasses[minHeight] ? minHeightClasses[minHeight] : "";
-  const inlineStyles = {
-    ...minWidth && !minWidthClasses[minWidth] && { minWidth },
-    ...minHeight && !minHeightClasses[minHeight] && { minHeight }
-  };
+  const sizeClass = containerSizes[size] || containerSizes.lg;
+  const paddingClass = padding === "none" ? "" : Object.prototype.hasOwnProperty.call(sectionPadding, padding) ? sectionPadding[padding] : sectionPadding.lg;
+  const minWidthClass = minWidth && containerMinWidths[minWidth] ? containerMinWidths[minWidth] : "";
+  const minHeightClass = minHeight && containerMinHeights[minHeight] ? containerMinHeights[minHeight] : "";
+  const inlineStyles = {};
+  if (minWidth && !containerMinWidths[minWidth]) {
+    inlineStyles.minWidth = minWidth;
+  }
+  if (minHeight && !containerMinHeights[minHeight]) {
+    inlineStyles.minHeight = minHeight;
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: `px-4 ${sizeClasses2[size]} ${paddingClasses[padding]} ${alignClasses[align]} ${minWidthClass} ${minHeightClass} ${className}`,
+      className: `px-4 ${sizeClass} ${paddingClass} ${alignClasses[align]} ${minWidthClass} ${minHeightClass} ${className}`,
       style: Object.keys(inlineStyles).length > 0 ? inlineStyles : void 0,
       children
     }
@@ -464,15 +702,7 @@ function Grid({
     xl: "350px",
     "2xl": "400px"
   };
-  const gapClasses = {
-    none: "gap-0",
-    xs: "gap-1",
-    sm: "gap-2",
-    md: "gap-4",
-    lg: "gap-6",
-    xl: "gap-8",
-    "2xl": "gap-12"
-  };
+  const gapClass = gapSizes[gap];
   const alignItemsClasses = {
     start: "items-start",
     center: "items-center",
@@ -499,7 +729,7 @@ function Grid({
       className: `
         grid
         ${!responsive ? "" : responsiveClasses}
-        ${gapClasses[gap]}
+        ${gapClass}
         ${alignItemsClasses[alignItems]}
         ${justifyItemsClasses[justifyItems]}
         ${className}
@@ -578,14 +808,7 @@ function Text({
     error: "text-destructive",
     inherit: "text-inherit"
   };
-  const sizeClasses2 = {
-    xs: "text-sm sm:text-xs",
-    sm: "text-base sm:text-sm",
-    base: "text-base",
-    lg: "text-lg",
-    xl: "text-xl",
-    "2xl": "text-2xl"
-  };
+  const sizeClasses = textSizes;
   const weightClasses = {
     light: "font-light",
     normal: "font-normal",
@@ -669,7 +892,7 @@ function Text({
   const margin = hasMargin ? "mb-3 sm:mb-4" : "";
   const classes = [
     variantClasses[variant],
-    sizeClasses2[finalSize],
+    sizeClasses[finalSize],
     weightClasses[weight],
     margin,
     align && alignClasses[align],
@@ -709,20 +932,14 @@ function PageHeader({ title, description, badge, className = "" }) {
 PageHeader.displayName = "PageHeader";
 var page_header_default = PageHeader;
 function Section({ children, variant = "default", padding = "none", className, id }) {
-  const paddingClasses = {
-    none: "py-0",
-    sm: "py-8",
-    md: "py-12",
-    lg: "py-16",
-    xl: "py-24"
-  };
+  const paddingClasses = sectionPadding[padding];
   const variantClasses = {
     default: "bg-background",
     muted: "bg-muted/20",
     primary: "bg-primary text-primary-foreground",
     dark: "bg-background-dark text-foreground-dark"
   };
-  const classes = ["w-full", paddingClasses[padding], variantClasses[variant], className].filter(Boolean).join(" ");
+  const classes = ["w-full", paddingClasses, variantClasses[variant], className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsx("section", { id, className: classes, children });
 }
 Section.displayName = "Section";
@@ -747,13 +964,7 @@ function Stack({
   align = "stretch",
   justify
 }) {
-  const spacingClasses = {
-    none: "gap-0",
-    sm: "gap-3 sm:gap-2",
-    md: "gap-5 sm:gap-4",
-    lg: "gap-7 sm:gap-6",
-    xl: "gap-10 sm:gap-8"
-  };
+  const spacingClasses = gapSizes[spacing];
   const alignClasses = {
     start: "items-start",
     center: "items-center",
@@ -773,7 +984,7 @@ function Stack({
     "div",
     {
       "data-component": "Stack",
-      className: `flex flex-wrap ${directionClass} ${spacingClasses[spacing]} ${alignClasses[align]} ${justifyClass} ${className}`,
+      className: `flex flex-wrap ${directionClass} ${spacingClasses} ${alignClasses[align]} ${justifyClass} ${className}`,
       children
     }
   );
@@ -969,13 +1180,7 @@ function Drawer({
     animationFrames: noAnimation ? 0 : 0
   });
   if (!shouldRender) return null;
-  const sizeClasses2 = {
-    sm: "w-full sm:w-72",
-    md: "w-full sm:w-96",
-    lg: "w-full sm:w-[32rem]",
-    xl: "w-full sm:w-[40rem]",
-    full: "w-full max-w-2xl"
-  };
+  const sizeClasses = overlaySizes[size];
   const edgeClasses = {
     left: "left-0 top-0 bottom-0",
     right: "right-0 top-0 bottom-0",
@@ -1027,7 +1232,7 @@ function Drawer({
         tabIndex: -1,
         "data-phase": phase,
         "data-position": position,
-        className: `fixed ${edgeClasses[position]} ${position === "left" || position === "right" ? sizeClasses2[size] : ""} bg-card text-card-foreground shadow-2xl z-[1000] flex flex-col outline-none ${panelTransform} ${noAnimation ? "" : "transition-transform duration-[250ms] ease-out will-change-transform"} ${className}`,
+        className: `fixed ${edgeClasses[position]} ${position === "left" || position === "right" ? sizeClasses : ""} bg-card text-card-foreground shadow-2xl z-[1000] flex flex-col outline-none ${panelTransform} ${noAnimation ? "" : "transition-transform duration-[250ms] ease-out will-change-transform"} ${className}`,
         onKeyDown: handleKeyDown,
         children: [
           title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-5 py-4 border-b border-border/60 bg-card/95 backdrop-blur-sm", children: [
@@ -1087,15 +1292,8 @@ function Card({
     ghost: "bg-transparent",
     filled: "bg-muted text-foreground"
   };
-  const sizeClasses2 = {
-    xs: "w-full sm:max-w-36",
-    sm: "w-full sm:max-w-64",
-    md: "w-full sm:max-w-96",
-    lg: "w-full sm:max-w-[28rem]",
-    xl: "w-full sm:max-w-[32rem]"
-  };
   const widthClasses = {
-    auto: size ? sizeClasses2[size] : "max-w-full",
+    auto: size ? cardSizes[size] : "max-w-full",
     full: "w-full",
     fit: "w-fit"
   };
@@ -1153,20 +1351,14 @@ function CardHeader({ children, className = "", bordered = true, padding = "md"
 CardHeader.displayName = "CardHeader";
 var card_header_default = CardHeader;
 function CardBody({ children, padding = "md", className = "" }) {
-  const paddingClasses = {
-    none: "p-0",
-    sm: "p-4",
-    md: "p-6",
-    lg: "p-8",
-    xl: "p-10"
-  };
+  const paddingClasses = cardPadding[padding];
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: `
         card-body
         flex flex-col gap-2
-        ${paddingClasses[padding]}
+        ${paddingClasses}
         ${className}
       `.trim().replace(/\s+/g, " "),
       children
@@ -1260,18 +1452,13 @@ function CardFigure({ children, className = "", aspectRatio = "auto" }) {
 CardFigure.displayName = "CardFigure";
 var card_figure_default = CardFigure;
 function CardTitle({ children, className = "", as: Component = "h2", size = "md" }) {
-  const sizeClasses2 = {
-    sm: "text-base font-semibold",
-    md: "text-lg font-bold",
-    lg: "text-xl font-bold",
-    xl: "text-2xl font-bold"
-  };
+  const sizeClasses = headingSizes[size];
   return /* @__PURE__ */ jsxRuntime.jsx(
     Component,
     {
       className: `
         card-title
-        ${sizeClasses2[size]}
+        ${sizeClasses}
         ${className}
       `.trim().replace(/\s+/g, " "),
       children
@@ -1771,13 +1958,8 @@ var Button = React4__default.default.forwardRef(
           return `${solidVariantClasses[variantKey]} shadow-sm hover:shadow-md`;
       }
     };
-    const sizeClasses2 = {
-      xs: "h-8 sm:h-6 px-3 sm:px-2 text-sm sm:text-xs min-h-8 sm:min-h-6",
-      sm: "h-10 sm:h-8 px-4 sm:px-3 text-base sm:text-sm min-h-10 sm:min-h-8",
-      md: "h-12 sm:h-10 px-5 sm:px-4 text-base min-h-12 sm:min-h-10",
-      lg: "h-14 sm:h-12 px-7 sm:px-6 text-lg min-h-14 sm:min-h-12",
-      xl: "h-16 sm:h-14 px-9 sm:px-8 text-xl min-h-16 sm:min-h-14"
-    };
+    const sizeConfig = interactiveSizes[size];
+    const sizeClasses = `${sizeConfig.height} ${sizeConfig.padding} ${sizeConfig.text}`;
     const roundedClasses = {
       default: "rounded-md",
       pill: "rounded-full",
@@ -1806,7 +1988,7 @@ var Button = React4__default.default.forwardRef(
         onClick,
         "aria-label": ariaLabel,
         disabled: disabled || loading,
-        className: `inline-flex items-center justify-center ${roundedClasses[rounded]} font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 ${styleClasses} ${sizeClasses2[size]} ${isIconOnly ? "p-0" : ""} ${widthClasses} ${activeClasses} ${className}`,
+        className: `inline-flex items-center justify-center ${roundedClasses[rounded]} font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 ${styleClasses} ${sizeClasses} ${isIconOnly ? "p-0" : ""} ${widthClasses} ${activeClasses} ${className}`,
         children: [
           displayIcon && iconPosition === "left" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-flex ${children ? "mr-2" : ""}`, children: displayIcon }),
           children,
@@ -1830,10 +2012,11 @@ function Hero({
   centered = true,
   size = "lg"
 }) {
-  const sizeClasses2 = {
-    sm: "py-12 md:py-16",
-    md: "py-16 md:py-20",
+  const sizeClasses = {
+    sm: sectionPadding.md,
+    md: sectionPadding.lg,
     lg: "pt-32 pb-20 md:pt-36 md:pb-28"
+    // Custom hero-specific padding
   };
   const titleSizes = {
     sm: "text-3xl md:text-4xl",
@@ -1845,7 +2028,7 @@ function Hero({
     solid: "bg-muted/30",
     minimal: "bg-background"
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: `relative ${sizeClasses2[size]} ${variantClasses[variant]} ${className}`, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: `relative ${sizeClasses[size]} ${variantClasses[variant]} ${className}`, children: [
     variant === "gradient" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/20 to-transparent" }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-background to-transparent pointer-events-none" }),
     /* @__PURE__ */ jsxRuntime.jsx(container_default, { size: "lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: centered ? "text-center mx-auto max-w-4xl" : "max-w-4xl", children: [
@@ -1935,10 +2118,10 @@ function Link({
     always: "underline",
     none: "no-underline"
   };
-  const sizeClasses2 = {
-    sm: "text-base sm:text-sm",
-    md: "text-lg sm:text-base",
-    lg: "text-xl sm:text-lg"
+  const sizeClasses = {
+    sm: textSizes.sm,
+    md: textSizes.base,
+    lg: textSizes.lg
   };
   const displayClasses = {
     inline: "inline",
@@ -1947,7 +2130,7 @@ function Link({
   const linkClassName = [
     variantClasses[variant],
     underlineClasses[underline],
-    sizeClasses2[size],
+    sizeClasses[size],
     displayClasses[display],
     "cursor-pointer transition-colors",
     className
@@ -2724,12 +2907,7 @@ function NavDropdownItem({ to, children, className = "" }) {
 NavDropdownItem.displayName = "NavDropdownItem";
 var nav_dropdown_item_default = NavDropdownItem;
 function Avatar({ src, alt = "", fallback, size = "md", className = "" }) {
-  const sizeClasses2 = {
-    sm: "w-10 h-10 sm:w-8 sm:h-8 text-sm sm:text-xs",
-    md: "w-12 h-12 sm:w-10 sm:h-10 text-base sm:text-sm",
-    lg: "w-14 h-14 sm:w-12 sm:h-12 text-lg sm:text-base",
-    xl: "w-20 h-20 sm:w-16 sm:h-16 text-xl sm:text-lg"
-  };
+  const sizeConfig = avatarSizes[size];
   let content;
   if (src) {
     content = /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt, className: "w-full h-full object-cover" });
@@ -2741,7 +2919,7 @@ function Avatar({ src, alt = "", fallback, size = "md", className = "" }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: `inline-flex items-center justify-center rounded-full bg-muted text-muted-foreground font-medium overflow-hidden ${sizeClasses2[size]} ${className}`,
+      className: `inline-flex items-center justify-center rounded-full bg-muted text-muted-foreground font-medium overflow-hidden ${sizeConfig.classes} ${sizeConfig.text} ${className}`,
       children: content
     }
   );
@@ -2756,15 +2934,11 @@ function Badge({ children, variant = "default", size = "md", className = "", ...
     warning: "bg-warning/10 text-warning border border-warning/20",
     error: "bg-destructive/10 text-destructive border border-destructive/20"
   };
-  const sizeClasses2 = {
-    sm: "px-2.5 sm:px-2 py-1 sm:py-0.5 text-sm sm:text-xs",
-    md: "px-3 sm:px-2.5 py-1 sm:py-0.5 text-sm sm:text-xs font-semibold",
-    lg: "px-4 sm:px-3 py-1.5 sm:py-1 text-base sm:text-sm font-semibold"
-  };
+  const sizeClasses = badgeSizes[size].classes;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
-      className: `inline-flex items-center font-medium rounded-full transition-colors ${variantClasses[variant]} ${sizeClasses2[size]} ${className}`,
+      className: `inline-flex items-center font-medium rounded-full transition-colors ${variantClasses[variant]} ${sizeClasses} ${className}`,
       ...props,
       children
     }
@@ -2816,26 +2990,13 @@ function StatusLabel({
       dot: "bg-primary"
     }
   };
-  const sizeClasses2 = {
-    sm: {
-      container: "px-2 py-0.5 text-xs gap-1.5",
-      dot: "w-1.5 h-1.5"
-    },
-    md: {
-      container: "px-2.5 py-0.5 text-sm gap-2",
-      dot: "w-2 h-2"
-    },
-    lg: {
-      container: "px-3 py-1 text-base gap-2",
-      dot: "w-2.5 h-2.5"
-    }
-  };
+  const sizeClasses = statusLabelSizes[size];
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
-      className: `inline-flex items-center font-medium rounded-full border ${statusConfig[status][variant]} ${sizeClasses2[size].container} ${className}`,
+      className: `inline-flex items-center font-medium rounded-full border ${statusConfig[status][variant]} ${sizeClasses.container} ${className}`,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `rounded-full ${statusConfig[status].dot} ${sizeClasses2[size].dot}` }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `rounded-full ${statusConfig[status].dot} ${sizeClasses.dot}` }),
         children
       ]
     }
@@ -2854,11 +3015,7 @@ function Chip({
   clickable = false,
   onClick
 }) {
-  const sizeClasses2 = {
-    sm: "text-xs px-2 py-1 gap-1",
-    md: "text-sm px-3 py-1.5 gap-1.5",
-    lg: "text-base px-4 py-2 gap-2"
-  };
+  const sizeClasses = chipSizes[size].classes;
   const variantClasses = {
     default: "bg-muted text-muted-foreground",
     primary: "bg-primary/10 text-primary",
@@ -2885,7 +3042,7 @@ function Chip({
       className: `
         inline-flex items-center justify-center
         rounded-full font-medium
-        ${sizeClasses2[size]}
+        ${sizeClasses}
         ${variantClasses[variant]}
         ${interactiveClasses}
         ${disabledClasses}
@@ -3922,11 +4079,7 @@ function useStaggeredTransition(count, baseDelay = 50) {
   return Array.from({ length: count }, (_, i) => i * baseDelay);
 }
 function Spinner({ size = "md", variant = "primary", className = "", speed, ...props }) {
-  const sizeClasses2 = {
-    sm: "w-4 h-4 border-2",
-    md: "w-8 h-8 border-2",
-    lg: "w-12 h-12 border-4"
-  };
+  const sizeConfig = spinnerSizes[size];
   const variantTopBorder = {
     primary: "border-t-primary",
     accent: "border-t-accent",
@@ -3940,7 +4093,7 @@ function Spinner({ size = "md", variant = "primary", className = "", speed, ...p
       role: "status",
       "aria-label": "Loading",
       "data-variant": variant,
-      className: `inline-block border-muted ${variantTopBorder} rounded-full animate-spin ${duration} ${sizeClasses2[size]} ${className}`,
+      className: `inline-block border-muted ${variantTopBorder} rounded-full animate-spin ${duration} ${sizeConfig.classes} ${sizeConfig.border} ${className}`,
       ...props,
       children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading..." })
     }
@@ -4223,12 +4376,15 @@ function DatePicker({
       setIsOpen(!isOpen);
     }
   };
-  const sizeClasses2 = {
-    sm: { container: "h-8 px-3", text: "text-sm", icon: 16 },
-    md: { container: "h-10 px-4", text: "text-base", icon: 18 },
-    lg: { container: "h-12 px-5", text: "text-lg", icon: 20 }
-  };
-  const currentSize = sizeClasses2[size];
+  function getBaseHeightClass(heightClasses) {
+    const classes = heightClasses.split(" ");
+    const base = classes.find((cls) => /^h-\d+/.test(cls));
+    return base || classes[0] || "";
+  }
+  const sizeConfig = interactiveSizes[size] || interactiveSizes.md;
+  const containerClasses = `${getBaseHeightClass(sizeConfig.height)} ${sizeConfig.padding}`;
+  const textClasses = sizeConfig.text;
+  const iconSize = getIconPixels(size, "desktop");
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: `relative w-full ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -4239,8 +4395,8 @@ function DatePicker({
           bg-background text-foreground
           cursor-pointer
           transition-all duration-200
-          ${currentSize.container}
-          ${currentSize.text}
+          ${containerClasses}
+          ${textClasses}
           ${isOpen ? "ring-2 ring-ring ring-offset-2" : "hover:border-ring"}
           ${disabled ? "opacity-50 cursor-not-allowed" : ""}
         `.trim(),
@@ -4261,7 +4417,7 @@ function DatePicker({
               placeholder,
               readOnly: true,
               disabled,
-              className: `flex-1 min-w-0 bg-transparent outline-none cursor-pointer placeholder:text-muted-foreground ${currentSize.text}`,
+              className: `flex-1 min-w-0 bg-transparent outline-none cursor-pointer placeholder:text-muted-foreground ${textClasses}`,
               "aria-label": "Selected date"
             }
           ),
@@ -4277,8 +4433,8 @@ function DatePicker({
                   "svg",
                   {
                     xmlns: "http://www.w3.org/2000/svg",
-                    width: currentSize.icon - 2,
-                    height: currentSize.icon - 2,
+                    width: iconSize - 2,
+                    height: iconSize - 2,
                     viewBox: "0 0 24 24",
                     fill: "none",
                     stroke: "currentColor",
@@ -4293,7 +4449,7 @@ function DatePicker({
                 )
               }
             ) : clearable ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 flex-shrink-0" }) : null,
-            /* @__PURE__ */ jsxRuntime.jsx(TablerIcons.IconCalendar, { size: currentSize.icon, className: "text-muted-foreground flex-shrink-0" })
+            /* @__PURE__ */ jsxRuntime.jsx(TablerIcons.IconCalendar, { size: iconSize, className: "text-muted-foreground flex-shrink-0" })
           ] })
         ]
       }
@@ -4312,11 +4468,7 @@ function DatePicker({
 DatePicker.displayName = "DatePicker";
 var date_picker_default = DatePicker;
 function Code({ children, size = "md", variant = "default", className = "" }) {
-  const sizeClasses2 = {
-    sm: "text-xs px-1 py-0.5",
-    md: "text-sm px-1.5 py-0.5",
-    lg: "text-base px-2 py-1"
-  };
+  const sizeClasses = codeSizes[size];
   const variantClasses = {
     default: "bg-muted text-foreground",
     primary: "bg-primary/10 text-primary",
@@ -4329,7 +4481,7 @@ function Code({ children, size = "md", variant = "default", className = "" }) {
     {
       className: `
         inline-block font-mono rounded border border-border/50
-        ${sizeClasses2[size]}
+        ${sizeClasses}
         ${variantClasses[variant]}
         ${className}
       `.trim(),
@@ -4490,11 +4642,8 @@ function Input({
   size = "md",
   validationState = "default"
 }) {
-  const sizeClasses2 = {
-    sm: "h-10 sm:h-8 px-4 sm:px-3 py-2 sm:py-1.5 text-base sm:text-sm",
-    md: "h-12 sm:h-10 px-4 sm:px-3 py-2.5 sm:py-2 text-base sm:text-sm",
-    lg: "h-14 sm:h-12 px-5 sm:px-4 py-3 text-lg sm:text-base"
-  };
+  const sizeConfig = interactiveSizes[size];
+  const sizeClasses = `${sizeConfig.height} px-4 sm:px-3 ${sizeConfig.text}`;
   const validationClasses = {
     default: "border-input focus:border-ring",
     error: "border-destructive focus:border-destructive",
@@ -4516,7 +4665,7 @@ function Input({
       name,
       required,
       "aria-invalid": validationState === "error",
-      className: `flex w-full rounded-lg border bg-background shadow-sm transition-all duration-200 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring/20 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/50 ${sizeClasses2[size]} ${validationClasses[validationState]} ${className}`
+      className: `flex w-full rounded-lg border bg-background shadow-sm transition-all duration-200 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring/20 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/50 ${sizeClasses} ${validationClasses[validationState]} ${className}`
     }
   );
 }
@@ -4643,12 +4792,39 @@ function MultiSelect({
         break;
     }
   };
-  const sizeClasses2 = {
-    sm: { container: "min-h-8 py-1 px-2", text: "text-sm", chip: "text-xs px-1.5 py-0.5", icon: 14 },
-    md: { container: "min-h-10 py-2 px-3", text: "text-base", chip: "text-sm px-2 py-1", icon: 16 },
-    lg: { container: "min-h-12 py-2 px-4", text: "text-lg", chip: "text-base px-2.5 py-1", icon: 18 }
+  const sizeClasses = {
+    xs: {
+      container: interactiveSizes.xs.height.split(" ")[0].replace("h-", "min-h-") + " py-0.5 px-1.5",
+      text: interactiveSizes.xs.text,
+      chip: chipSizes.sm.classes.split(" ").filter((c) => !c.includes("gap")).join(" "),
+      icon: getIconPixels("xs", "desktop")
+    },
+    sm: {
+      container: interactiveSizes.sm.height.split(" ")[0].replace("h-", "min-h-") + " py-1 px-2",
+      text: interactiveSizes.sm.text,
+      chip: chipSizes.sm.classes.split(" ").filter((c) => !c.includes("gap")).join(" "),
+      icon: getIconPixels("sm", "desktop")
+    },
+    md: {
+      container: interactiveSizes.md.height.split(" ")[0].replace("h-", "min-h-") + " py-2 px-3",
+      text: interactiveSizes.md.text,
+      chip: chipSizes.md.classes.split(" ").filter((c) => !c.includes("gap")).join(" "),
+      icon: getIconPixels("md", "desktop")
+    },
+    lg: {
+      container: interactiveSizes.lg.height.split(" ")[0].replace("h-", "min-h-") + " py-2 px-4",
+      text: interactiveSizes.lg.text,
+      chip: chipSizes.lg.classes.split(" ").filter((c) => !c.includes("gap")).join(" "),
+      icon: getIconPixels("lg", "desktop")
+    },
+    xl: {
+      container: interactiveSizes.xl.height.split(" ")[0].replace("h-", "min-h-") + " py-2.5 px-5",
+      text: interactiveSizes.xl.text,
+      chip: chipSizes.lg.classes.split(" ").filter((c) => !c.includes("gap")).join(" "),
+      icon: getIconPixels("xl", "desktop")
+    }
   };
-  const currentSize = sizeClasses2[size];
+  const currentSize = sizeClasses[size];
   const getSelectedLabels = () => {
     return selectedValues.map((v) => options.find((opt) => opt.value === v)?.label).filter(Boolean);
   };
@@ -4882,11 +5058,8 @@ function Select({
   size = "md",
   validationState = "default"
 }) {
-  const sizeClasses2 = {
-    sm: "h-10 sm:h-8 px-4 sm:px-3 py-2 sm:py-1.5 text-base sm:text-sm",
-    md: "h-12 sm:h-10 px-4 sm:px-3 py-2.5 sm:py-2 text-base sm:text-sm pr-10",
-    lg: "h-14 sm:h-12 px-5 sm:px-4 py-3 text-lg sm:text-base pr-10"
-  };
+  const sizeConfig = interactiveSizes[size];
+  const sizeClasses = `${sizeConfig.height} px-4 sm:px-3 ${sizeConfig.text} pr-10`;
   const validationClasses = {
     default: "border-input focus:border-ring",
     error: "border-destructive focus:border-destructive",
@@ -4904,7 +5077,7 @@ function Select({
       name,
       required,
       "aria-invalid": validationState === "error",
-      className: `flex w-full rounded-lg border bg-background shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring/20 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/50 appearance-none bg-[url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20stroke%3D%22%236b7280%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M6%208l4%204%204-4%22%2F%3E%3C%2Fsvg%3E')] bg-[length:1.5em] bg-[right_0.5rem_center] bg-no-repeat ${sizeClasses2[size]} ${validationClasses[validationState]} ${className}`,
+      className: `flex w-full rounded-lg border bg-background shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring/20 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/50 appearance-none bg-[url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20stroke%3D%22%236b7280%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M6%208l4%204%204-4%22%2F%3E%3C%2Fsvg%3E')] bg-[length:1.5em] bg-[right_0.5rem_center] bg-no-repeat ${sizeClasses} ${validationClasses[validationState]} ${className}`,
       children
     }
   );
@@ -5211,16 +5384,38 @@ exports.TimelineItem = TimelineItem;
 exports.Toast = toast_default;
 exports.Tooltip = tooltip_default;
 exports.authFetch = authFetch;
+exports.avatarSizes = avatarSizes;
+exports.badgeSizes = badgeSizes;
+exports.borderRadius = borderRadius;
+exports.cardPadding = cardPadding;
+exports.cardSizes = cardSizes;
 exports.checkAuthStatus = checkAuthStatus;
+exports.chipSizes = chipSizes;
+exports.codeSizes = codeSizes;
+exports.containerMinHeights = containerMinHeights;
+exports.containerMinWidths = containerMinWidths;
+exports.containerSizes = containerSizes;
+exports.gapSizes = gapSizes;
 exports.getCurrentUser = getCurrentUser;
+exports.getIconPixels = getIconPixels;
+exports.getVisualClasses = getVisualClasses;
+exports.headingSizes = headingSizes;
+exports.interactiveSizes = interactiveSizes;
 exports.loginExternal = loginExternal;
+exports.logoSizes = logoSizes;
 exports.logoutExternal = logoutExternal;
 exports.openLoginPopup = openLoginPopup;
+exports.overlaySizes = overlaySizes;
 exports.redirectToLogin = redirectToLogin;
+exports.sectionPadding = sectionPadding;
+exports.spinnerSizes = spinnerSizes;
+exports.statusLabelSizes = statusLabelSizes;
+exports.textSizes = textSizes;
 exports.useAuth = useAuth;
 exports.useScrollReset = useScrollReset_default;
 exports.useStaggeredTransition = useStaggeredTransition;
 exports.useTable = use_table_default;
 exports.useTheme = useTheme;
+exports.visualSizes = visualSizes;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map