@tenerife.music/ui 1.1.1 → 1.2.0

package/dist/index.mjs

@@ -831,15 +831,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
   },
   /**
@@ -5081,42 +5082,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
@@ -5147,17 +5134,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
@@ -5225,15 +5207,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
@@ -6688,10 +6670,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: {
@@ -6700,16 +6682,8 @@ var buttonVariants = tokenCVA({
   }
 });
 var Button = React49.forwardRef(
-  ({ className, variant, size, asChild = false, leftIcon, rightIcon, children, ...props }, ref) => {
-    const Comp = asChild ? 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))]"
@@ -6740,28 +6714,33 @@ var Button = React49.forwardRef(
       }).catch(() => {
       });
     }
+    if (asChild && (leftIcon || rightIcon)) {
+      if (!React49.isValidElement(children)) {
+        const Comp2 = "button";
+        return /* @__PURE__ */ jsxs(Comp2, { className: finalClassName, ref, ...props, children: [
+          leftIcon && /* @__PURE__ */ jsx("span", { className: "pointer-events-none relative z-10 inline-flex items-center [&_svg]:text-current", children: leftIcon }),
+          children,
+          rightIcon && /* @__PURE__ */ 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.cloneElement(children, {
+        className: cn(finalClassName, childProps.className),
+        ...props,
+        children: /* @__PURE__ */ jsxs(Fragment, { children: [
+          leftIcon && /* @__PURE__ */ jsx("span", { className: iconWrapperClass, children: leftIcon }),
+          childProps.children,
+          rightIcon && /* @__PURE__ */ jsx("span", { className: iconWrapperClass, children: rightIcon })
+        ] })
+      });
+      return /* @__PURE__ */ jsx(Slot, { ref, children: clonedChild });
+    }
+    const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsxs(Comp, { className: finalClassName, ref, ...props, children: [
-      leftIcon && /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: cn(
-            "pointer-events-none relative z-10 inline-flex items-center [&_svg]:text-current",
-            iconSizeClass
-          ),
-          children: leftIcon
-        }
-      ),
+      leftIcon && /* @__PURE__ */ jsx("span", { className: "pointer-events-none relative z-10 inline-flex items-center [&_svg]:text-current", children: leftIcon }),
       children,
-      rightIcon && /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: cn(
-            "pointer-events-none relative z-10 inline-flex items-center [&_svg]:text-current",
-            iconSizeClass
-          ),
-          children: rightIcon
-        }
-      )
+      rightIcon && /* @__PURE__ */ jsx("span", { className: "pointer-events-none relative z-10 inline-flex items-center [&_svg]:text-current", children: rightIcon })
     ] });
   }
 );
@@ -6806,13 +6785,13 @@ var textVariants = cva("text-foreground", {
   }
 });
 var Text = React49.forwardRef(
-  ({ className, size, weight, muted, variant, ...props }, ref) => {
+  ({ size, weight, muted, variant, ...props }, ref) => {
     const isMuted = muted !== void 0 ? muted : variant === "muted";
     return /* @__PURE__ */ jsx(
       "span",
       {
         ref,
-        className: cn(textVariants({ size, weight, muted: isMuted, variant }), className),
+        className: textVariants({ size, weight, muted: isMuted, variant }),
         ...props
       }
     );
@@ -6853,16 +6832,6 @@ var Alert = React49.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: {
@@ -6876,11 +6845,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: {
@@ -6889,13 +6856,38 @@ var linkVariants = tokenCVA({
   }
 });
 var Link = React49.forwardRef(
-  ({ className, variant, size, asChild = false, leftIcon, rightIcon, children, ...props }, ref) => {
-    const Comp = asChild ? Slot : "a";
-    return /* @__PURE__ */ jsxs(Comp, { className: cn(linkVariants({ variant, size, className })), ref, ...props, children: [
-      leftIcon && /* @__PURE__ */ jsx("span", { className: LINK_TOKENS.iconWrapper, children: leftIcon }),
-      children,
-      rightIcon && /* @__PURE__ */ jsx("span", { className: LINK_TOKENS.iconWrapper, children: rightIcon })
-    ] });
+  ({ variant, size, leftIcon, rightIcon, children, disabled, onClick, href, tabIndex, ...props }, ref) => {
+    const handleClick = React49.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__ */ jsxs(
+      "a",
+      {
+        className: finalClassName,
+        ref,
+        href,
+        tabIndex: finalTabIndex,
+        "aria-disabled": finalAriaDisabled,
+        onClick: handleClick,
+        ...props,
+        children: [
+          leftIcon && /* @__PURE__ */ jsx("span", { className: LINK_TOKENS.iconWrapper, children: leftIcon }),
+          children,
+          rightIcon && /* @__PURE__ */ jsx("span", { className: LINK_TOKENS.iconWrapper, children: rightIcon })
+        ]
+      }
+    );
   }
 );
 Link.displayName = "Link";
@@ -7015,17 +7007,9 @@ var headingVariants = cva("font-display text-foreground", {
   }
 });
 var Heading = React49.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__ */ jsx(
-      Component,
-      {
-        ref,
-        className: cn(headingVariants({ level, weight, muted }), className),
-        ...props,
-        children
-      }
-    );
+    return /* @__PURE__ */ jsx(Component, { ref, className: headingVariants({ level, weight, muted }), ...props, children });
   }
 );
 Heading.displayName = "Heading";
@@ -8005,7 +7989,6 @@ var checkboxVariants = cva(
 );
 var Checkbox = React49.forwardRef(
   ({
-    className,
     variant,
     size,
     state,
@@ -8067,10 +8050,7 @@ var Checkbox = React49.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) {
@@ -8728,10 +8708,13 @@ var labelVariants = 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.forwardRef(
-  ({ className, required, children, ...props }, ref) => /* @__PURE__ */ jsxs(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props, children: [
-    children,
-    required && /* @__PURE__ */ 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__ */ jsxs(LabelPrimitive.Root, { ref, className: labelVariants(), ...props, children: [
+      children,
+      required && /* @__PURE__ */ jsx("span", { className: cn(FORM_TOKENS.label.requiredMark, "ml-xs"), children: "*" })
+    ] })
+  )
 );
 Label2.displayName = LabelPrimitive.Root.displayName;
 var Field = React49.forwardRef(
@@ -8740,11 +8723,9 @@ var Field = React49.forwardRef(
   }
 );
 Field.displayName = "Field";
-var FieldLabel = React49.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Label2, { ref, className, ...props });
-  }
-);
+var FieldLabel = React49.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(Label2, { ref, ...props });
+});
 FieldLabel.displayName = "FieldLabel";
 var FieldControl = React49.forwardRef(
   ({ className, children, ...props }, ref) => {
@@ -8752,17 +8733,13 @@ var FieldControl = React49.forwardRef(
   }
 );
 FieldControl.displayName = "FieldControl";
-var FieldDescription = React49.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Text, { ref, size: "sm", muted: true, className: cn(className), ...props });
-  }
-);
+var FieldDescription = React49.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(Text, { ref, size: "sm", muted: true, ...props });
+});
 FieldDescription.displayName = "FieldDescription";
-var FieldError = React49.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Text, { ref, size: "sm", className: cn("text-destructive", className), ...props });
-  }
-);
+var FieldError = React49.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(Text, { ref, size: "sm", variant: "destructive", ...props });
+});
 FieldError.displayName = "FieldError";
 var FieldRoot = Field;
 FieldRoot.Label = FieldLabel;
@@ -8808,7 +8785,6 @@ var inputVariants = cva(
 );
 var Input = React49.forwardRef(
   ({
-    className,
     type = "text",
     variant,
     size,
@@ -8838,8 +8814,7 @@ var Input = React49.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__ */ jsxs("div", { className: cn("relative", fullWidth !== false && INPUT_TOKENS.width.full), children: [
@@ -8989,7 +8964,6 @@ var RadioGroup = React49.forwardRef(
 RadioGroup.displayName = "RadioGroup";
 var Radio = React49.forwardRef(
   ({
-    className,
     variant,
     size,
     state,
@@ -9123,10 +9097,7 @@ var Radio = React49.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;
@@ -9211,7 +9182,6 @@ var textareaVariants = cva(
 );
 var Textarea = React49.forwardRef(
   ({
-    className,
     variant,
     size,
     state,
@@ -9236,7 +9206,7 @@ var Textarea = React49.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;
@@ -9413,20 +9383,8 @@ var DialogHeader = React49.forwardRef(
 );
 DialogHeader.displayName = "DialogHeader";
 var DialogTitle = React49.forwardRef(
-  ({ titleId, className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      Heading,
-      {
-        ref,
-        as: "h2",
-        level: 4,
-        weight: "semibold",
-        id: titleId,
-        className: cn(className),
-        ...props,
-        children
-      }
-    );
+  ({ titleId, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Heading, { ref, as: "h2", level: 4, weight: "semibold", id: titleId, ...props, children });
   }
 );
 DialogTitle.displayName = "DialogTitle";
@@ -10491,7 +10449,7 @@ function useNotificationCenterContext() {
   }
   return context;
 }
-var NotificationCenterDismissAll = React49.forwardRef(({ confirm = false, confirmMessage = "Clear all notifications?", className, ...props }, ref) => {
+var NotificationCenterDismissAll = React49.forwardRef(({ confirm = false, confirmMessage = "Clear all notifications?", ...props }, ref) => {
   const { clearAll, getAll } = useNotificationCenterContext();
   const notifications = getAll();
   const handleClick = () => {
@@ -10515,7 +10473,6 @@ var NotificationCenterDismissAll = React49.forwardRef(({ confirm = false, confir
       size: "sm",
       onClick: handleClick,
       "aria-label": "Clear all notifications",
-      className,
       ...props,
       children: "Clear all"
     }
@@ -10544,7 +10501,6 @@ var NotificationCenterGroupHeader = React49.forwardRef(
               onClick: onToggleCollapse,
               "aria-label": collapsed ? "Expand group" : "Collapse group",
               "aria-expanded": !collapsed,
-              className: "h-6 w-6",
               children: collapsed ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" })
             }
           )
@@ -10638,7 +10594,6 @@ var NotificationCenterItem = React49.forwardRef(
                   e.stopPropagation();
                   notification.action?.onClick();
                 },
-                className: "h-7 px-xs text-xs",
                 children: notification.action.label
               }
             ) })
@@ -10650,7 +10605,6 @@ var NotificationCenterItem = React49.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__ */ jsx(X, { className: "h-4 w-4" })
             }
           )
@@ -10948,7 +10902,6 @@ var NotificationCenterPanel = React49.forwardRef(
                             size: "icon",
                             onClick: onClose,
                             "aria-label": "Close notifications",
-                            className: "h-8 w-8",
                             children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
                           }
                         )
@@ -10992,10 +10945,10 @@ var NotificationCenterPanel = React49.forwardRef(
   }
 );
 NotificationCenterPanel.displayName = "NotificationCenter.Panel";
-var NotificationCenterTrigger = React49.forwardRef(({ onClick, showBadge = true, className, ...props }, ref) => {
+var NotificationCenterTrigger = React49.forwardRef(({ onClick, showBadge = true, ...props }, ref) => {
   const { getUnreadCount } = useNotificationCenterContext();
   const unreadCount = getUnreadCount();
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     Button,
     {
       ref,
@@ -11003,9 +10956,8 @@ var NotificationCenterTrigger = React49.forwardRef(({ onClick, showBadge = true,
       size: "icon",
       onClick,
       "aria-label": `Open notifications${unreadCount > 0 ? ` (${unreadCount} unread)` : ""}`,
-      className: cn("relative", className),
       ...props,
-      children: [
+      children: /* @__PURE__ */ jsxs("span", { className: "relative", children: [
         /* @__PURE__ */ jsx(Bell, { className: "h-5 w-5" }),
         showBadge && unreadCount > 0 && /* @__PURE__ */ jsx(
           "span",
@@ -11017,7 +10969,7 @@ var NotificationCenterTrigger = React49.forwardRef(({ onClick, showBadge = true,
             children: unreadCount > 99 ? "99+" : unreadCount
           }
         )
-      ]
+      ] })
     }
   );
 });
@@ -11845,18 +11797,7 @@ var BreadcrumbsRoot = React49.forwardRef(
                 disabled: item.disabled,
                 children: [
                   index > 0 && /* @__PURE__ */ jsx(BreadcrumbsSeparator, { children: separator || defaultSeparator }),
-                  item.href && !isLast && !item.disabled ? /* @__PURE__ */ 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__ */ jsx(
+                  item.href && !isLast && !item.disabled ? /* @__PURE__ */ jsx(Link, { href: item.href, variant: "link", children: item.label }) : /* @__PURE__ */ jsx(
                     "span",
                     {
                       className: cn(
@@ -12775,4 +12716,4 @@ var Icon2 = React49.forwardRef(
 );
 Icon2.displayName = "Icon";
 
-export { ALERT_TOKENS, Alert, BADGE_VARIANTS, BUTTON_TOKENS, Backdrop, Badge, Box, Breadcrumbs, Button, CARD_TOKENS, CHECKBOX_TOKENS, Card, CardBody, CardFooter, CardHeader, Checkbox, Column, Container, Surface as ContainerSurface, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRoot, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DATA_TOKENS, DataListRoot as DataList, DataListItem, DataListLabel, DataListRoot, DataListValue, Dialog, DialogBody, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, EmptyState, EmptyStateAction, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle, FieldRoot as Field, Flex, Grid, Heading, HoverCardContent, HoverCardRoot, HoverCardTrigger, ICONS_MAP, ICON_TOKENS, INPUT_TOKENS, Icon2 as Icon, IconArrowRight, IconCalendar, IconCheck, IconChevronDown, IconChevronRight, IconClose, IconError, IconInfo, IconLocation, IconMenu, IconSearch, IconSuccess, IconWarning, Input, LINK_SIZES, LINK_VARIANTS, Label2 as Label, Link, MENU_TOKENS, MOTION_TOKENS, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalRoot, ModalTitle, ModalTrigger, NAVIGATION_TOKENS, NOTIFICATION_TOKENS, NotificationCenter, NotificationCenterDismissAll, NotificationCenterGroupHeader, NotificationCenterItem, NotificationCenterList, NotificationCenterPanel, NotificationCenterProvider, NotificationCenterTrigger, OVERLAY_TOKENS, POPOVER_TOKENS, Pagination, Portal3 as Portal, RADIO_TOKENS, Radio, RadioGroup, Row, SECTION_TOKENS, SURFACE_TOKENS, SWITCH_TOKENS, Section, SegmentedControl, Select, SelectContent, SelectGroup, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectRoot, SelectSeparator, SelectTrigger, SelectValue, SelectViewport, Skeleton, Stack, Stepper, Surface, TEXT_TOKENS, TOAST_TOKENS, TOOLTIP_TOKENS, TableRoot as Table, TableBody, TableCell, TableEmpty, TableExpandableContent, TableHead, TableHeader, TableLoadingState, TableRoot, TableRow, TableSortIcon, Tabs, Text, Textarea, Toast, ToastProvider, ToastViewport, Toaster, UI_COLORS, accentColoredShadows, accentColors, alertVariants, allCSSVariables, allCSSVariablesCSS, animations, badgeVariants, baseColors, borderRadius, buttonVariants, chartColors, checkboxVariants, colorCSSVariables, componentRadius, componentShadowMapping, surfaceVariants as containerSurfaceVariants, cssVariableColorTokens, durations, easings, elevationShadows, focusRings, fontFamily, fontSize, fontSizeWithMd, fontWeight, generateCSSVariablesCSS, glowEffects, headingVariants, iconVariants, inputVariants, keyframes, labelVariants, layoutSpacing, letterSpacing, lineHeight, linkVariants, motionCSSVariables, motionV2CSSVariables, motionV2Combined, motionV2Durations, motionV2Easings, motionV2Fade, motionV2Scale, motionV2Slide, motionV2TailwindConfig, motionV2Transitions, primaryColoredShadows, primaryColors, radioVariants, radiusCSSVariables, reducedMotion, secondaryColors, segmentedControlItemVariants, segmentedControlRootVariants, semanticColors, semanticSpacing, shadowBase, shadowCSSVariables, shadowOpacity, skeletonVariants, spacing, spacingCSSVariables, springs, surfaceColors, surfaceVariants, tailwindMotionConfig, tailwindRadiusConfig, tailwindShadowConfig, tailwindSpacingConfig, tailwindThemeColors, tailwindTypographyConfig, textColors, textStyles, textVariants, textareaVariants, tokenSystemSummary, transitions, typographyCSSVariables, useNotificationCenter, useNotificationCenterContext, useTableContext, useToast };
+export { ALERT_TOKENS, Alert, BADGE_VARIANTS, BUTTON_TOKENS, Backdrop, Badge, Box, Breadcrumbs, Button, CARD_TOKENS, CHECKBOX_TOKENS, Card, CardBody, CardFooter, CardHeader, Checkbox, Column, Container, Surface as ContainerSurface, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRoot, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DATA_TOKENS, DataListRoot as DataList, DataListItem, DataListLabel, DataListRoot, DataListValue, Dialog, DialogBody, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, EmptyState, EmptyStateAction, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle, FieldRoot as Field, Flex, Grid, Heading, HoverCardContent, HoverCardRoot, HoverCardTrigger, ICONS_MAP, ICON_TOKENS, INPUT_TOKENS, Icon2 as Icon, IconArrowRight, IconCalendar, IconCheck, IconChevronDown, IconChevronRight, IconClose, IconError, IconInfo, IconLocation, IconMenu, IconSearch, IconSuccess, IconWarning, Input, Label2 as Label, Link, MENU_TOKENS, MOTION_TOKENS, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalRoot, ModalTitle, ModalTrigger, NAVIGATION_TOKENS, NOTIFICATION_TOKENS, NotificationCenter, NotificationCenterDismissAll, NotificationCenterGroupHeader, NotificationCenterItem, NotificationCenterList, NotificationCenterPanel, NotificationCenterProvider, NotificationCenterTrigger, OVERLAY_TOKENS, POPOVER_TOKENS, Pagination, Portal3 as Portal, RADIO_TOKENS, Radio, RadioGroup, Row, SECTION_TOKENS, SURFACE_TOKENS, SWITCH_TOKENS, Section, SegmentedControl, Select, SelectContent, SelectGroup, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectRoot, SelectSeparator, SelectTrigger, SelectValue, SelectViewport, Skeleton, Stack, Stepper, Surface, TEXT_TOKENS, TOAST_TOKENS, TOOLTIP_TOKENS, TableRoot as Table, TableBody, TableCell, TableEmpty, TableExpandableContent, TableHead, TableHeader, TableLoadingState, TableRoot, TableRow, TableSortIcon, Tabs, Text, Textarea, Toast, ToastProvider, ToastViewport, Toaster, UI_COLORS, accentColoredShadows, accentColors, alertVariants, allCSSVariables, allCSSVariablesCSS, animations, badgeVariants, baseColors, borderRadius, chartColors, checkboxVariants, colorCSSVariables, componentRadius, componentShadowMapping, surfaceVariants as containerSurfaceVariants, cssVariableColorTokens, durations, easings, elevationShadows, focusRings, fontFamily, fontSize, fontSizeWithMd, fontWeight, generateCSSVariablesCSS, glowEffects, headingVariants, iconVariants, inputVariants, keyframes, labelVariants, layoutSpacing, letterSpacing, lineHeight, linkVariants, motionCSSVariables, motionV2CSSVariables, motionV2Combined, motionV2Durations, motionV2Easings, motionV2Fade, motionV2Scale, motionV2Slide, motionV2TailwindConfig, motionV2Transitions, primaryColoredShadows, primaryColors, radioVariants, radiusCSSVariables, reducedMotion, secondaryColors, segmentedControlItemVariants, segmentedControlRootVariants, semanticColors, semanticSpacing, shadowBase, shadowCSSVariables, shadowOpacity, skeletonVariants, spacing, spacingCSSVariables, springs, surfaceColors, surfaceVariants, tailwindMotionConfig, tailwindRadiusConfig, tailwindShadowConfig, tailwindSpacingConfig, tailwindThemeColors, tailwindTypographyConfig, textColors, textStyles, textVariants, textareaVariants, tokenSystemSummary, transitions, typographyCSSVariables, useNotificationCenter, useNotificationCenterContext, useTableContext, useToast };