@tenerife.music/ui 1.1.1 → 1.2.1

package/dist/{index-DInIMlaR.d.cts → index-DXmHg8ji.d.cts}

@@ -184,12 +184,13 @@ declare const BUTTON_TOKENS: {
     /**
      * Icon size within buttons by button size
      * Scales proportionally with button size for visual balance
+     * Contains full SVG selector classes for direct use in CVA
      */
     readonly iconSize: {
-        readonly sm: "size-3.5";
-        readonly md: "size-4";
-        readonly lg: "size-5";
-        readonly icon: "size-4";
+        readonly sm: "[&_svg]:w-3.5 [&_svg]:h-3.5";
+        readonly md: "[&_svg]:w-4 [&_svg]:h-4";
+        readonly lg: "[&_svg]:w-5 [&_svg]:h-5";
+        readonly icon: "[&_svg]:w-4 [&_svg]:h-4";
     };
     /**
      * Width tokens

package/dist/{index-DInIMlaR.d.ts → index-DXmHg8ji.d.ts}

@@ -184,12 +184,13 @@ declare const BUTTON_TOKENS: {
     /**
      * Icon size within buttons by button size
      * Scales proportionally with button size for visual balance
+     * Contains full SVG selector classes for direct use in CVA
      */
     readonly iconSize: {
-        readonly sm: "size-3.5";
-        readonly md: "size-4";
-        readonly lg: "size-5";
-        readonly icon: "size-4";
+        readonly sm: "[&_svg]:w-3.5 [&_svg]:h-3.5";
+        readonly md: "[&_svg]:w-4 [&_svg]:h-4";
+        readonly lg: "[&_svg]:w-5 [&_svg]:h-5";
+        readonly icon: "[&_svg]:w-4 [&_svg]:h-4";
     };
     /**
      * Width tokens

package/dist/index.cjs

@@ -859,15 +859,16 @@ var BUTTON_TOKENS = {
   /**
    * Icon size within buttons by button size
    * Scales proportionally with button size for visual balance
+   * Contains full SVG selector classes for direct use in CVA
    */
   iconSize: {
-    sm: "size-3.5",
+    sm: "[&_svg]:w-3.5 [&_svg]:h-3.5",
     // 14px (0.875rem) - smaller icon for small buttons
-    md: "size-4",
+    md: "[&_svg]:w-4 [&_svg]:h-4",
     // 16px (1rem) - medium icon for medium buttons
-    lg: "size-5",
+    lg: "[&_svg]:w-5 [&_svg]:h-5",
     // 20px (1.25rem) - larger icon for large buttons
-    icon: "size-4"
+    icon: "[&_svg]:w-4 [&_svg]:h-4"
     // 16px (1rem) - medium icon for icon-only buttons
   },
   /**
@@ -5109,42 +5110,28 @@ var LINK_TOKENS = {
    * Maps to Tailwind height utilities
    */
   height: {
-    xs: "h-7",
     // 28px (1.75rem)
     sm: "h-8",
     // 32px (2rem)
     md: "h-9",
     // 36px (2.25rem)
-    lg: "h-10",
-    // 40px (2.5rem)
-    xl: "h-11"
-    // 44px (2.75rem)
-  },
+    lg: "h-10"},
   /**
    * Link padding by size
    * Horizontal and vertical padding values
    */
   padding: {
     horizontal: {
-      xs: "px-xs",
       // 4px (0.25rem) - maps to semanticSpacing.xs
       sm: "px-sm",
       // 8px (0.5rem) - maps to semanticSpacing.sm
       md: "px-md",
       // 16px (1rem) - maps to semanticSpacing.md
-      lg: "px-lg",
-      // 24px (1.5rem) - maps to semanticSpacing.lg
-      xl: "px-xl"
-      // 32px (2rem) - maps to semanticSpacing.xl
-    },
+      lg: "px-lg"},
     vertical: {
       xs: "py-xs",
       // 4px (0.25rem) - maps to semanticSpacing.xs
-      sm: "py-sm",
-      // 8px (0.5rem) - maps to semanticSpacing.sm
-      md: "py-md"
-      // 16px (1rem) - maps to semanticSpacing.md
-    }
+      sm: "py-sm"}
   },
   /**
    * Layout tokens
@@ -5175,17 +5162,12 @@ var LINK_TOKENS = {
    * @see docs/architecture/TYPOGRAPHY_AUTHORITY_CONTRACT.md
    */
   fontSize: {
-    xs: "text-xs",
     // References fontSize.xs[0] from Typography Authority (~12px)
     sm: "text-xs",
     // References fontSize.xs[0] from Typography Authority (~12px)
     md: "text-sm",
     // References fontSize.sm[0] from Typography Authority (~14px)
-    lg: "text-sm",
-    // References fontSize.sm[0] from Typography Authority (~14px)
-    xl: "text-base"
-    // References fontSize.base[0] from Typography Authority (~16px)
-  },
+    lg: "text-sm"},
   /**
    * Border radius for outline and ghost variants
    * References componentRadius from Radius Authority
@@ -5253,15 +5235,15 @@ var LINK_TOKENS = {
       // Underline on hover
     },
     secondary: {
-      text: "text-secondary-foreground",
+      text: "text-secondary",
       // Secondary text using CSS var
       hover: "hover:underline"
       // Underline on hover
     },
     accent: {
-      text: "text-accent-foreground",
-      // Accent text using CSS var
-      hover: "hover:text-accent-foreground/80",
+      text: "text-accent",
+      // Accent text using CSS var (accent color, not accent-foreground)
+      hover: "hover:text-accent/80",
       // Accent hover text
       underline: "hover:underline"
       // Underline on hover
@@ -6716,10 +6698,10 @@ var buttonVariants = tokenCVA({
       destructive: `${BUTTON_TOKENS.variant.destructive.background} ${BUTTON_TOKENS.variant.destructive.text} ${BUTTON_TOKENS.shadow.default} ${BUTTON_TOKENS.variant.destructive.hover} ${BUTTON_TOKENS.variant.destructive.active} ${BUTTON_TOKENS.variant.destructive.disabled.background} ${BUTTON_TOKENS.variant.destructive.disabled.text}`
     },
     size: {
-      sm: `${BUTTON_TOKENS.height.sm} ${BUTTON_TOKENS.radius} ${BUTTON_TOKENS.padding.horizontal.sm} ${BUTTON_TOKENS.padding.vertical.sm} ${BUTTON_TOKENS.fontSize.sm} ${BUTTON_TOKENS.gap.sm} [&_svg]:${BUTTON_TOKENS.iconSize.sm}`,
-      md: `${BUTTON_TOKENS.height.md} ${BUTTON_TOKENS.radius} ${BUTTON_TOKENS.padding.horizontal.md} ${BUTTON_TOKENS.padding.vertical.md} ${BUTTON_TOKENS.fontSize.md} ${BUTTON_TOKENS.gap.md} [&_svg]:${BUTTON_TOKENS.iconSize.md}`,
-      lg: `${BUTTON_TOKENS.height.lg} ${BUTTON_TOKENS.radius} ${BUTTON_TOKENS.padding.horizontal.lg} ${BUTTON_TOKENS.padding.vertical.md} ${BUTTON_TOKENS.fontSize.lg} ${BUTTON_TOKENS.gap.lg} [&_svg]:${BUTTON_TOKENS.iconSize.lg}`,
-      icon: `${BUTTON_TOKENS.height.icon} ${BUTTON_TOKENS.width.icon} [&_svg]:${BUTTON_TOKENS.iconSize.icon}`
+      sm: `${BUTTON_TOKENS.height.sm} ${BUTTON_TOKENS.radius} ${BUTTON_TOKENS.padding.horizontal.sm} ${BUTTON_TOKENS.padding.vertical.sm} ${BUTTON_TOKENS.fontSize.sm} ${BUTTON_TOKENS.gap.sm} ${BUTTON_TOKENS.iconSize.sm}`,
+      md: `${BUTTON_TOKENS.height.md} ${BUTTON_TOKENS.radius} ${BUTTON_TOKENS.padding.horizontal.md} ${BUTTON_TOKENS.padding.vertical.md} ${BUTTON_TOKENS.fontSize.md} ${BUTTON_TOKENS.gap.md} ${BUTTON_TOKENS.iconSize.md}`,
+      lg: `${BUTTON_TOKENS.height.lg} ${BUTTON_TOKENS.radius} ${BUTTON_TOKENS.padding.horizontal.lg} ${BUTTON_TOKENS.padding.vertical.md} ${BUTTON_TOKENS.fontSize.lg} ${BUTTON_TOKENS.gap.lg} ${BUTTON_TOKENS.iconSize.lg}`,
+      icon: `${BUTTON_TOKENS.height.icon} ${BUTTON_TOKENS.width.icon} ${BUTTON_TOKENS.iconSize.icon}`
     }
   },
   defaultVariants: {
@@ -6728,16 +6710,8 @@ var buttonVariants = tokenCVA({
   }
 });
 var Button = React49__namespace.forwardRef(
-  ({ className, variant, size, asChild = false, leftIcon, rightIcon, children, ...props }, ref) => {
-    const Comp = asChild ? reactSlot.Slot : "button";
-    const finalClassName = cn(buttonVariants({ variant, size, className }));
-    const iconSizeMap = {
-      "size-3.5": "[&_svg]:w-3.5 [&_svg]:h-3.5",
-      "size-4": "[&_svg]:w-4 [&_svg]:h-4",
-      "size-5": "[&_svg]:w-5 [&_svg]:h-5"
-    };
-    const iconSizeToken = size ? BUTTON_TOKENS.iconSize[size] : BUTTON_TOKENS.iconSize.md;
-    const iconSizeClass = iconSizeMap[iconSizeToken] || "[&_svg]:w-4 [&_svg]:h-4";
+  ({ variant, size, asChild = false, leftIcon, rightIcon, children, ...props }, ref) => {
+    const finalClassName = buttonVariants({ variant, size });
     if (typeof window !== "undefined" && variant === "primary") {
       const hasHoverClass = finalClassName.includes(
         "hover:bg-[hsl(var(--button-primary-hover-bg))]"
@@ -6768,28 +6742,33 @@ var Button = React49__namespace.forwardRef(
       }).catch(() => {
       });
     }
+    if (asChild && (leftIcon || rightIcon)) {
+      if (!React49__namespace.isValidElement(children)) {
+        const Comp2 = "button";
+        return /* @__PURE__ */ jsxRuntime.jsxs(Comp2, { className: finalClassName, ref, ...props, children: [
+          leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none relative z-10 inline-flex items-center [&_svg]:text-current", children: leftIcon }),
+          children,
+          rightIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none relative z-10 inline-flex items-center [&_svg]:text-current", children: rightIcon })
+        ] });
+      }
+      const iconWrapperClass = "pointer-events-none relative z-10 inline-flex items-center [&_svg]:text-current";
+      const childProps = children.props;
+      const clonedChild = React49__namespace.cloneElement(children, {
+        className: cn(finalClassName, childProps.className),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: iconWrapperClass, children: leftIcon }),
+          childProps.children,
+          rightIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: iconWrapperClass, children: rightIcon })
+        ] })
+      });
+      return /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { ref, children: clonedChild });
+    }
+    const Comp = asChild ? reactSlot.Slot : "button";
     return /* @__PURE__ */ jsxRuntime.jsxs(Comp, { className: finalClassName, ref, ...props, children: [
-      leftIcon && /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          className: cn(
-            "pointer-events-none relative z-10 inline-flex items-center [&_svg]:text-current",
-            iconSizeClass
-          ),
-          children: leftIcon
-        }
-      ),
+      leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none relative z-10 inline-flex items-center [&_svg]:text-current", children: leftIcon }),
       children,
-      rightIcon && /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          className: cn(
-            "pointer-events-none relative z-10 inline-flex items-center [&_svg]:text-current",
-            iconSizeClass
-          ),
-          children: rightIcon
-        }
-      )
+      rightIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none relative z-10 inline-flex items-center [&_svg]:text-current", children: rightIcon })
     ] });
   }
 );
@@ -6834,13 +6813,13 @@ var textVariants = classVarianceAuthority.cva("text-foreground", {
   }
 });
 var Text = React49__namespace.forwardRef(
-  ({ className, size, weight, muted, variant, ...props }, ref) => {
+  ({ size, weight, muted, variant, ...props }, ref) => {
     const isMuted = muted !== void 0 ? muted : variant === "muted";
     return /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
         ref,
-        className: cn(textVariants({ size, weight, muted: isMuted, variant }), className),
+        className: textVariants({ size, weight, muted: isMuted, variant }),
         ...props
       }
     );
@@ -6881,16 +6860,6 @@ var Alert = React49__namespace.forwardRef(
   }
 );
 Alert.displayName = "Alert";
-var LINK_VARIANTS = [
-  "primary",
-  "secondary",
-  "accent",
-  "outline",
-  "ghost",
-  "link",
-  "destructive"
-];
-var LINK_SIZES = ["xs", "sm", "md", "lg", "xl"];
 var linkVariants = tokenCVA({
   base: `${LINK_TOKENS.layout} ${LINK_TOKENS.fontWeight} ${LINK_TOKENS.transition.colors} ${LINK_TOKENS.focus.outline} ${LINK_TOKENS.focus.ring} ${LINK_TOKENS.focus.offset} ${LINK_TOKENS.state.disabled.pointerEvents} ${LINK_TOKENS.state.disabled.opacity}`,
   variants: {
@@ -6904,11 +6873,9 @@ var linkVariants = tokenCVA({
       destructive: `${LINK_TOKENS.variant.destructive.text} ${LINK_TOKENS.variant.destructive.hover} ${LINK_TOKENS.underlineOffset} ${LINK_TOKENS.variant.destructive.underline}`
     },
     size: {
-      xs: `${LINK_TOKENS.height.xs} ${LINK_TOKENS.fontSize.xs} ${LINK_TOKENS.padding.horizontal.xs} ${LINK_TOKENS.padding.vertical.xs}`,
       sm: `${LINK_TOKENS.height.sm} ${LINK_TOKENS.fontSize.sm} ${LINK_TOKENS.padding.horizontal.sm} ${LINK_TOKENS.padding.vertical.xs}`,
       md: `${LINK_TOKENS.height.md} ${LINK_TOKENS.fontSize.md} ${LINK_TOKENS.padding.horizontal.md} ${LINK_TOKENS.padding.vertical.sm}`,
-      lg: `${LINK_TOKENS.height.lg} ${LINK_TOKENS.fontSize.lg} ${LINK_TOKENS.padding.horizontal.lg} ${LINK_TOKENS.padding.vertical.sm}`,
-      xl: `${LINK_TOKENS.height.xl} ${LINK_TOKENS.fontSize.xl} ${LINK_TOKENS.padding.horizontal.xl} ${LINK_TOKENS.padding.vertical.md}`
+      lg: `${LINK_TOKENS.height.lg} ${LINK_TOKENS.fontSize.lg} ${LINK_TOKENS.padding.horizontal.lg} ${LINK_TOKENS.padding.vertical.sm}`
     }
   },
   defaultVariants: {
@@ -6917,13 +6884,38 @@ var linkVariants = tokenCVA({
   }
 });
 var Link = React49__namespace.forwardRef(
-  ({ className, variant, size, asChild = false, leftIcon, rightIcon, children, ...props }, ref) => {
-    const Comp = asChild ? reactSlot.Slot : "a";
-    return /* @__PURE__ */ jsxRuntime.jsxs(Comp, { className: cn(linkVariants({ variant, size, className })), ref, ...props, children: [
-      leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: LINK_TOKENS.iconWrapper, children: leftIcon }),
-      children,
-      rightIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: LINK_TOKENS.iconWrapper, children: rightIcon })
-    ] });
+  ({ variant, size, leftIcon, rightIcon, children, disabled, onClick, href, tabIndex, ...props }, ref) => {
+    const handleClick = React49__namespace.useCallback(
+      (e) => {
+        if (disabled) {
+          e.preventDefault();
+          e.stopPropagation();
+          return;
+        }
+        onClick?.(e);
+      },
+      [disabled, onClick]
+    );
+    const finalClassName = linkVariants({ variant, size });
+    const finalTabIndex = disabled ? tabIndex ?? -1 : tabIndex;
+    const finalAriaDisabled = disabled ? true : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "a",
+      {
+        className: finalClassName,
+        ref,
+        href,
+        tabIndex: finalTabIndex,
+        "aria-disabled": finalAriaDisabled,
+        onClick: handleClick,
+        ...props,
+        children: [
+          leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: LINK_TOKENS.iconWrapper, children: leftIcon }),
+          children,
+          rightIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: LINK_TOKENS.iconWrapper, children: rightIcon })
+        ]
+      }
+    );
   }
 );
 Link.displayName = "Link";
@@ -7043,17 +7035,9 @@ var headingVariants = classVarianceAuthority.cva("font-display text-foreground",
   }
 });
 var Heading = React49__namespace.forwardRef(
-  ({ className, level = 1, weight, muted, as, children, ...props }, ref) => {
+  ({ level = 1, weight, muted, as, children, ...props }, ref) => {
     const Component = as || `h${level}`;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Component,
-      {
-        ref,
-        className: cn(headingVariants({ level, weight, muted }), className),
-        ...props,
-        children
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: headingVariants({ level, weight, muted }), ...props, children });
   }
 );
 Heading.displayName = "Heading";
@@ -8033,7 +8017,6 @@ var checkboxVariants = classVarianceAuthority.cva(
 );
 var Checkbox = React49__namespace.forwardRef(
   ({
-    className,
     variant,
     size,
     state,
@@ -8095,10 +8078,7 @@ var Checkbox = React49__namespace.forwardRef(
       },
       [isDisabled, isControlled, checked, onCheckedChange, onKeyDown]
     );
-    const checkboxClasses = cn(
-      checkboxVariants({ variant, size, state: effectiveState }),
-      className
-    );
+    const checkboxClasses = checkboxVariants({ variant, size, state: effectiveState });
     const iconSize = size ? CHECKBOX_TOKENS.icon.size[size] : CHECKBOX_TOKENS.icon.size.md;
     const renderIcon = () => {
       if (indeterminate) {
@@ -8756,10 +8736,13 @@ var labelVariants = classVarianceAuthority.cva(
   `${TEXT_TOKENS.fontSize.sm} ${TEXT_TOKENS.fontWeight.medium} ${TEXT_TOKENS.lineHeight.none} peer-disabled:cursor-not-allowed peer-disabled:opacity-70`
 );
 var Label2 = React49__namespace.forwardRef(
-  ({ className, required, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(LabelPrimitive__namespace.Root, { ref, className: cn(labelVariants(), className), ...props, children: [
-    children,
-    required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(FORM_TOKENS.label.requiredMark, "ml-xs"), children: "*" })
-  ] })
+  ({ required, children, ...props }, ref) => (
+    // className and style are forbidden from public API - only CVA output is used
+    /* @__PURE__ */ jsxRuntime.jsxs(LabelPrimitive__namespace.Root, { ref, className: labelVariants(), ...props, children: [
+      children,
+      required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(FORM_TOKENS.label.requiredMark, "ml-xs"), children: "*" })
+    ] })
+  )
 );
 Label2.displayName = LabelPrimitive__namespace.Root.displayName;
 var Field = React49__namespace.forwardRef(
@@ -8768,11 +8751,9 @@ var Field = React49__namespace.forwardRef(
   }
 );
 Field.displayName = "Field";
-var FieldLabel = React49__namespace.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Label2, { ref, className, ...props });
-  }
-);
+var FieldLabel = React49__namespace.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Label2, { ref, ...props });
+});
 FieldLabel.displayName = "FieldLabel";
 var FieldControl = React49__namespace.forwardRef(
   ({ className, children, ...props }, ref) => {
@@ -8780,17 +8761,13 @@ var FieldControl = React49__namespace.forwardRef(
   }
 );
 FieldControl.displayName = "FieldControl";
-var FieldDescription = React49__namespace.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Text, { ref, size: "sm", muted: true, className: cn(className), ...props });
-  }
-);
+var FieldDescription = React49__namespace.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Text, { ref, size: "sm", muted: true, ...props });
+});
 FieldDescription.displayName = "FieldDescription";
-var FieldError = React49__namespace.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Text, { ref, size: "sm", className: cn("text-destructive", className), ...props });
-  }
-);
+var FieldError = React49__namespace.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Text, { ref, size: "sm", variant: "destructive", ...props });
+});
 FieldError.displayName = "FieldError";
 var FieldRoot = Field;
 FieldRoot.Label = FieldLabel;
@@ -8836,7 +8813,6 @@ var inputVariants = classVarianceAuthority.cva(
 );
 var Input = React49__namespace.forwardRef(
   ({
-    className,
     type = "text",
     variant,
     size,
@@ -8866,8 +8842,7 @@ var Input = React49__namespace.forwardRef(
       inputVariants({ variant: baseVariant, size: baseSize, state, fullWidth }),
       // Add padding for icons if present
       iconLeft && INPUT_TOKENS.icon.paddingLeft,
-      iconRight && INPUT_TOKENS.icon.paddingRight,
-      className
+      iconRight && INPUT_TOKENS.icon.paddingRight
     );
     if (iconLeft || iconRight) {
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative", fullWidth !== false && INPUT_TOKENS.width.full), children: [
@@ -9017,7 +8992,6 @@ var RadioGroup = React49__namespace.forwardRef(
 RadioGroup.displayName = "RadioGroup";
 var Radio = React49__namespace.forwardRef(
   ({
-    className,
     variant,
     size,
     state,
@@ -9151,10 +9125,7 @@ var Radio = React49__namespace.forwardRef(
         onKeyDown
       ]
     );
-    const radioClasses = cn(
-      radioVariants({ variant, size: effectiveSize, state: effectiveState }),
-      className
-    );
+    const radioClasses = radioVariants({ variant, size: effectiveSize, state: effectiveState });
     const dotSize = RADIO_TOKENS.dot.size[effectiveSize];
     const renderDot = () => {
       if (!finalChecked) return null;
@@ -9239,7 +9210,6 @@ var textareaVariants = classVarianceAuthority.cva(
 );
 var Textarea = React49__namespace.forwardRef(
   ({
-    className,
     variant,
     size,
     state,
@@ -9264,7 +9234,7 @@ var Textarea = React49__namespace.forwardRef(
       }
       return void 0;
     });
-    const textareaClasses = cn(textareaVariants({ variant, size, state, fullWidth }), className);
+    const textareaClasses = textareaVariants({ variant, size, state, fullWidth });
     const currentValue = value ?? defaultValue ?? "";
     const currentLength = typeof currentValue === "string" ? currentValue.length : 0;
     const shouldShowCounter = showCharacterCount && maxLength !== void 0;
@@ -9441,20 +9411,8 @@ var DialogHeader = React49__namespace.forwardRef(
 );
 DialogHeader.displayName = "DialogHeader";
 var DialogTitle = React49__namespace.forwardRef(
-  ({ titleId, className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Heading,
-      {
-        ref,
-        as: "h2",
-        level: 4,
-        weight: "semibold",
-        id: titleId,
-        className: cn(className),
-        ...props,
-        children
-      }
-    );
+  ({ titleId, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(Heading, { ref, as: "h2", level: 4, weight: "semibold", id: titleId, ...props, children });
   }
 );
 DialogTitle.displayName = "DialogTitle";
@@ -10519,7 +10477,7 @@ function useNotificationCenterContext() {
   }
   return context;
 }
-var NotificationCenterDismissAll = React49__namespace.forwardRef(({ confirm = false, confirmMessage = "Clear all notifications?", className, ...props }, ref) => {
+var NotificationCenterDismissAll = React49__namespace.forwardRef(({ confirm = false, confirmMessage = "Clear all notifications?", ...props }, ref) => {
   const { clearAll, getAll } = useNotificationCenterContext();
   const notifications = getAll();
   const handleClick = () => {
@@ -10543,7 +10501,6 @@ var NotificationCenterDismissAll = React49__namespace.forwardRef(({ confirm = fa
       size: "sm",
       onClick: handleClick,
       "aria-label": "Clear all notifications",
-      className,
       ...props,
       children: "Clear all"
     }
@@ -10572,7 +10529,6 @@ var NotificationCenterGroupHeader = React49__namespace.forwardRef(
               onClick: onToggleCollapse,
               "aria-label": collapsed ? "Expand group" : "Collapse group",
               "aria-expanded": !collapsed,
-              className: "h-6 w-6",
               children: collapsed ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "h-4 w-4" })
             }
           )
@@ -10666,7 +10622,6 @@ var NotificationCenterItem = React49__namespace.forwardRef(
                   e.stopPropagation();
                   notification.action?.onClick();
                 },
-                className: "h-7 px-xs text-xs",
                 children: notification.action.label
               }
             ) })
@@ -10678,7 +10633,6 @@ var NotificationCenterItem = React49__namespace.forwardRef(
               size: "icon",
               onClick: handleDismiss,
               "aria-label": "Dismiss notification",
-              className: "absolute right-xs top-xs h-6 w-6 opacity-0 transition-opacity hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 group-hover:opacity-100",
               children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
             }
           )
@@ -10976,7 +10930,6 @@ var NotificationCenterPanel = React49__namespace.forwardRef(
                             size: "icon",
                             onClick: onClose,
                             "aria-label": "Close notifications",
-                            className: "h-8 w-8",
                             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
                           }
                         )
@@ -11020,10 +10973,10 @@ var NotificationCenterPanel = React49__namespace.forwardRef(
   }
 );
 NotificationCenterPanel.displayName = "NotificationCenter.Panel";
-var NotificationCenterTrigger = React49__namespace.forwardRef(({ onClick, showBadge = true, className, ...props }, ref) => {
+var NotificationCenterTrigger = React49__namespace.forwardRef(({ onClick, showBadge = true, ...props }, ref) => {
   const { getUnreadCount } = useNotificationCenterContext();
   const unreadCount = getUnreadCount();
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Button,
     {
       ref,
@@ -11031,9 +10984,8 @@ var NotificationCenterTrigger = React49__namespace.forwardRef(({ onClick, showBa
       size: "icon",
       onClick,
       "aria-label": `Open notifications${unreadCount > 0 ? ` (${unreadCount} unread)` : ""}`,
-      className: cn("relative", className),
       ...props,
-      children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bell, { className: "h-5 w-5" }),
         showBadge && unreadCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
@@ -11045,7 +10997,7 @@ var NotificationCenterTrigger = React49__namespace.forwardRef(({ onClick, showBa
             children: unreadCount > 99 ? "99+" : unreadCount
           }
         )
-      ]
+      ] })
     }
   );
 });
@@ -11873,18 +11825,7 @@ var BreadcrumbsRoot = React49__namespace.forwardRef(
                 disabled: item.disabled,
                 children: [
                   index > 0 && /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbsSeparator, { children: separator || defaultSeparator }),
-                  item.href && !isLast && !item.disabled ? /* @__PURE__ */ jsxRuntime.jsx(
-                    "a",
-                    {
-                      href: item.href,
-                      className: cn(
-                        NAVIGATION_TOKENS.states.default.text,
-                        NAVIGATION_TOKENS.states.hover.text,
-                        MOTION_TOKENS.transition.colors
-                      ),
-                      children: item.label
-                    }
-                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  item.href && !isLast && !item.disabled ? /* @__PURE__ */ jsxRuntime.jsx(Link, { href: item.href, variant: "link", children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx(
                     "span",
                     {
                       className: cn(
@@ -12878,8 +12819,6 @@ exports.IconSearch = IconSearch;
 exports.IconSuccess = IconSuccess;
 exports.IconWarning = IconWarning;
 exports.Input = Input;
-exports.LINK_SIZES = LINK_SIZES;
-exports.LINK_VARIANTS = LINK_VARIANTS;
 exports.Label = Label2;
 exports.Link = Link;
 exports.MENU_TOKENS = MENU_TOKENS;
@@ -12965,7 +12904,6 @@ exports.animations = animations;
 exports.badgeVariants = badgeVariants;
 exports.baseColors = baseColors;
 exports.borderRadius = borderRadius;
-exports.buttonVariants = buttonVariants;
 exports.chartColors = chartColors;
 exports.checkboxVariants = checkboxVariants;
 exports.colorCSSVariables = colorCSSVariables;