@tenerife.music/ui 2.0.5 → 2.0.6

package/README.md

@@ -10,8 +10,8 @@ Strict. Predictable. Built for system-level consistency.
 ![TailwindCSS](https://img.shields.io/badge/TailwindCSS-3.4-38b2ac?style=for-the-badge)
 ![License](https://img.shields.io/badge/License-MIT-green?style=for-the-badge)
 
-**Current Release:** [v2.0.3](CHANGELOG.md#203---2025-12-31) (npm)  
-**Next Release:** v2.0.4 (Unreleased) — See [CHANGELOG](CHANGELOG.md#unreleased)
+**Current Release:** [v2.0.6](CHANGELOG.md#206) (npm)  
+**Next Release:** [Unreleased] — See [CHANGELOG](CHANGELOG.md#unreleased)
 
 <p align="center">
   <img src="https://raw.githubusercontent.com/Tureckiy-zart/tenerife-ui/main/.github/banner.png" width="100%" alt="TUI Banner" />

package/dist/{Link-ZWr5iFB0.d.cts → Link-DlH433PB.d.cts}

@@ -6,7 +6,7 @@ import * as React from 'react';
  *
  * @internal
  */
-declare const _LINK_VARIANTS: readonly ["primary", "secondary", "accent", "outline", "ghost", "link", "destructive"];
+declare const _LINK_VARIANTS: readonly ["primary", "secondary", "accent", "outline", "ghost", "text", "link", "wrapper", "destructive"];
 /**
  * Link variant type
  *
@@ -26,13 +26,13 @@ declare const _LINK_SIZES: readonly ["sm", "md", "lg"];
  */
 type LinkSize = (typeof _LINK_SIZES)[number];
 declare const linkVariants: (props?: ({
-    variant?: "primary" | "secondary" | "accent" | "destructive" | "outline" | "link" | "ghost" | null | undefined;
+    variant?: "primary" | "secondary" | "accent" | "destructive" | "outline" | "link" | "ghost" | "text" | "wrapper" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "className" | "style"> {
     /**
      * Link variant style
-     * @default "link"
+     * @default "text"
      */
     variant?: LinkVariant;
     /**

package/dist/{Link-ZWr5iFB0.d.ts → Link-DlH433PB.d.ts}

@@ -6,7 +6,7 @@ import * as React from 'react';
  *
  * @internal
  */
-declare const _LINK_VARIANTS: readonly ["primary", "secondary", "accent", "outline", "ghost", "link", "destructive"];
+declare const _LINK_VARIANTS: readonly ["primary", "secondary", "accent", "outline", "ghost", "text", "link", "wrapper", "destructive"];
 /**
  * Link variant type
  *
@@ -26,13 +26,13 @@ declare const _LINK_SIZES: readonly ["sm", "md", "lg"];
  */
 type LinkSize = (typeof _LINK_SIZES)[number];
 declare const linkVariants: (props?: ({
-    variant?: "primary" | "secondary" | "accent" | "destructive" | "outline" | "link" | "ghost" | null | undefined;
+    variant?: "primary" | "secondary" | "accent" | "destructive" | "outline" | "link" | "ghost" | "text" | "wrapper" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "className" | "style"> {
     /**
      * Link variant style
-     * @default "link"
+     * @default "text"
      */
     variant?: LinkVariant;
     /**

package/dist/extensions/next/index.cjs

@@ -138,6 +138,18 @@ var LINK_TOKENS = {
   /**
    * Link heights by size
    * Maps to Tailwind height utilities
+   *
+   * @example
+   * // Small size link
+   * <Link href="/link" size="sm">Small Link</Link>
+   *
+   * @example
+   * // Medium size link (default)
+   * <Link href="/link" size="md">Medium Link</Link>
+   *
+   * @example
+   * // Large size link
+   * <Link href="/link" size="lg">Large Link</Link>
    */
   height: {
     // 28px (1.75rem)
@@ -149,6 +161,12 @@ var LINK_TOKENS = {
   /**
    * Link padding by size
    * Horizontal and vertical padding values
+   *
+   * @example
+   * // Padding is automatically applied based on size prop
+   * <Link href="/link" size="sm">Small Link</Link> // Uses px-sm py-xs
+   * <Link href="/link" size="md">Medium Link</Link> // Uses px-md py-sm
+   * <Link href="/link" size="lg">Large Link</Link> // Uses px-lg py-sm
    */
   padding: {
     horizontal: {
@@ -169,6 +187,13 @@ var LINK_TOKENS = {
    */
   layout: "inline-flex items-center justify-center whitespace-nowrap",
   // Base layout for link container
+  /**
+   * Block-level layout token for variant='wrapper' (and deprecated variant='link')
+   * Used when Link needs to wrap block elements (e.g., Card) in grid/flex compositions
+   * Provides block display with full width for proper layout contract
+   */
+  layoutBlock: "block w-full",
+  // Block-level layout for wrapper variant (and deprecated link variant)
   /**
    * Font weight token
    * References foundation typography fontWeight tokens from Typography Authority
@@ -181,6 +206,12 @@ var LINK_TOKENS = {
   /**
    * Icon wrapper layout
    * Layout utilities for icon containers
+   *
+   * @example
+   * // Icons are automatically wrapped with proper layout
+   * <Link href="/profile" leftIcon={<UserIcon />} rightIcon={<ArrowIcon />}>
+   *   Profile
+   * </Link>
    */
   iconWrapper: "inline-flex items-center",
   // Layout for left/right icon wrappers
@@ -190,14 +221,29 @@ var LINK_TOKENS = {
    *
    * @rule All fontSize values reference Typography Authority tokens
    * @see docs/architecture/TYPOGRAPHY_AUTHORITY_CONTRACT.md
+   *
+   * @example
+   * // Small font size (14px)
+   * <Link href="/link" size="sm">Small Text</Link>
+   *
+   * @example
+   * // Medium font size (16px, default)
+   * <Link href="/link" size="md">Medium Text</Link>
+   *
+   * @example
+   * // Large font size (18px)
+   * <Link href="/link" size="lg">Large Text</Link>
    */
   fontSize: {
     // References fontSize.xs[0] from Typography Authority (~12px)
-    sm: "text-xs",
-    // References fontSize.xs[0] from Typography Authority (~12px)
-    md: "text-sm",
+    /** Small font size (~14px) */
+    sm: "text-sm",
     // References fontSize.sm[0] from Typography Authority (~14px)
-    lg: "text-sm"},
+    /** Medium font size (~16px, default) */
+    md: "text-base",
+    // References fontSize.base[0] from Typography Authority (~16px)
+    /** Large font size (~18px) */
+    lg: "text-lg"},
   /**
    * Border radius for outline and ghost variants
    * References componentRadius from Radius Authority
@@ -231,6 +277,14 @@ var LINK_TOKENS = {
    *
    * @rule Focus MUST use focus-visible: prefix (keyboard navigation only)
    * @rule Focus MUST be blocked when disabled={true}
+   *
+   * @example
+   * // Focus ring appears automatically on keyboard navigation (Tab key)
+   * <Link href="/link">Focusable Link</Link>
+   *
+   * @example
+   * // Focus is disabled when link is disabled
+   * <Link href="/link" disabled>Disabled Link</Link>
    */
   focus: {
     ring: "focus-visible:ring-2 focus-visible:ring-ring",
@@ -243,6 +297,16 @@ var LINK_TOKENS = {
   /**
    * Disabled state tokens
    * Uses explicit disabled semantic tokens for better accessibility
+   *
+   * @example
+   * // Disabled link with proper accessibility attributes
+   * <Link href="/disabled" disabled>Disabled Link</Link>
+   *
+   * @example
+   * // Disabled link prevents navigation and removes from tab order
+   * <Link href="/action" disabled onClick={handleClick}>
+   *   Cannot Click
+   * </Link>
    */
   state: {
     disabled: {
@@ -255,8 +319,47 @@ var LINK_TOKENS = {
   /**
    * Color tokens for link variants
    * Uses semantic color tokens that map to CSS variables
+   *
+   * @example
+   * // Primary variant - emphasized link with primary color
+   * <Link href="/cta" variant="primary">Get Started</Link>
+   *
+   * @example
+   * // Secondary variant - muted link style
+   * <Link href="/info" variant="secondary">Learn More</Link>
+   *
+   * @example
+   * // Accent variant - accent color link
+   * <Link href="/feature" variant="accent">Explore Feature</Link>
+   *
+   * @example
+   * // Outline variant - bordered link button
+   * <Link href="/action" variant="outline">Action</Link>
+   *
+   * @example
+   * // Ghost variant - subtle background link
+   * <Link href="/menu" variant="ghost">Menu Item</Link>
+   *
+   * @example
+   * // Text variant (default) - inline text link
+   * <Link href="/about" variant="text">About Us</Link>
+   *
+   * @example
+   * // Wrapper variant - block-level wrapper for cards
+   * <Link href="/article" variant="wrapper">
+   *   <Card>Article Content</Card>
+   * </Link>
+   *
+   * @example
+   * // Destructive variant - danger/delete actions
+   * <Link href="/delete" variant="destructive">Delete</Link>
    */
   variant: {
+    /**
+     * Primary variant - emphasized link with primary color
+     * @example
+     * <Link href="/cta" variant="primary">Get Started</Link>
+     */
     primary: {
       text: "text-primary",
       // Primary text using CSS var
@@ -265,12 +368,22 @@ var LINK_TOKENS = {
       underline: "hover:underline"
       // Underline on hover
     },
+    /**
+     * Secondary variant - muted link style
+     * @example
+     * <Link href="/info" variant="secondary">Learn More</Link>
+     */
     secondary: {
       text: "text-secondary",
       // Secondary text using CSS var
       hover: "hover:underline"
       // Underline on hover
     },
+    /**
+     * Accent variant - accent color link
+     * @example
+     * <Link href="/feature" variant="accent">Explore Feature</Link>
+     */
     accent: {
       text: "text-accent",
       // Accent text using CSS var (accent color, not accent-foreground)
@@ -279,6 +392,11 @@ var LINK_TOKENS = {
       underline: "hover:underline"
       // Underline on hover
     },
+    /**
+     * Outline variant - bordered link button
+     * @example
+     * <Link href="/action" variant="outline">Action</Link>
+     */
     outline: {
       border: "border border-input",
       // Input border using CSS var
@@ -293,6 +411,11 @@ var LINK_TOKENS = {
         // Hover text
       }
     },
+    /**
+     * Ghost variant - subtle background link
+     * @example
+     * <Link href="/menu" variant="ghost">Menu Item</Link>
+     */
     ghost: {
       background: "bg-muted/10",
       // Light background for better contrast on dark surfaces
@@ -305,12 +428,23 @@ var LINK_TOKENS = {
         // Hover text
       }
     },
+    /**
+     * Link variant (deprecated) - use 'wrapper' instead
+     * @deprecated Use variant='wrapper' instead
+     * @example
+     * <Link href="/article" variant="link">Article</Link>
+     */
     link: {
       text: "text-primary",
       // Primary text using CSS var
       hover: "hover:underline"
       // Underline on hover
     },
+    /**
+     * Destructive variant - danger/delete actions
+     * @example
+     * <Link href="/delete" variant="destructive">Delete</Link>
+     */
     destructive: {
       text: "text-destructive",
       // Destructive text using CSS var
@@ -327,16 +461,21 @@ function renderIcon(icon) {
   return /* @__PURE__ */ jsxRuntime.jsx("span", { className: ICON_WRAPPER_CLASS, children: icon });
 }
 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.text}`,
+  base: `${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.text}`,
   variants: {
     variant: {
-      primary: `${LINK_TOKENS.variant.primary.text} ${LINK_TOKENS.variant.primary.hover} ${LINK_TOKENS.underlineOffset} ${LINK_TOKENS.variant.primary.underline}`,
-      secondary: `${LINK_TOKENS.variant.secondary.text} ${LINK_TOKENS.underlineOffset} ${LINK_TOKENS.variant.secondary.hover}`,
-      accent: `${LINK_TOKENS.variant.accent.text} ${LINK_TOKENS.variant.accent.hover} ${LINK_TOKENS.underlineOffset} ${LINK_TOKENS.variant.accent.underline}`,
-      outline: `${LINK_TOKENS.variant.outline.border} ${LINK_TOKENS.variant.outline.background} ${LINK_TOKENS.variant.outline.text} ${LINK_TOKENS.radius} ${LINK_TOKENS.variant.outline.hover.background} ${LINK_TOKENS.variant.outline.hover.text}`,
-      ghost: `${LINK_TOKENS.variant.ghost.background} ${LINK_TOKENS.variant.ghost.text} ${LINK_TOKENS.variant.ghost.hover.background} ${LINK_TOKENS.variant.ghost.hover.text} ${LINK_TOKENS.radius}`,
-      link: `${LINK_TOKENS.variant.link.text} ${LINK_TOKENS.underlineOffset} ${LINK_TOKENS.variant.link.hover}`,
-      destructive: `${LINK_TOKENS.variant.destructive.text} ${LINK_TOKENS.variant.destructive.hover} ${LINK_TOKENS.underlineOffset} ${LINK_TOKENS.variant.destructive.underline}`
+      primary: `${LINK_TOKENS.layout} ${LINK_TOKENS.variant.primary.text} ${LINK_TOKENS.variant.primary.hover} ${LINK_TOKENS.underlineOffset} ${LINK_TOKENS.variant.primary.underline}`,
+      secondary: `${LINK_TOKENS.layout} ${LINK_TOKENS.variant.secondary.text} ${LINK_TOKENS.underlineOffset} ${LINK_TOKENS.variant.secondary.hover}`,
+      accent: `${LINK_TOKENS.layout} ${LINK_TOKENS.variant.accent.text} ${LINK_TOKENS.variant.accent.hover} ${LINK_TOKENS.underlineOffset} ${LINK_TOKENS.variant.accent.underline}`,
+      outline: `${LINK_TOKENS.layout} ${LINK_TOKENS.variant.outline.border} ${LINK_TOKENS.variant.outline.background} ${LINK_TOKENS.variant.outline.text} ${LINK_TOKENS.radius} ${LINK_TOKENS.variant.outline.hover.background} ${LINK_TOKENS.variant.outline.hover.text}`,
+      ghost: `${LINK_TOKENS.layout} ${LINK_TOKENS.variant.ghost.background} ${LINK_TOKENS.variant.ghost.text} ${LINK_TOKENS.variant.ghost.hover.background} ${LINK_TOKENS.variant.ghost.hover.text} ${LINK_TOKENS.radius}`,
+      text: `${LINK_TOKENS.layout} ${LINK_TOKENS.variant.link.text} ${LINK_TOKENS.underlineOffset} ${LINK_TOKENS.variant.link.hover}`,
+      /**
+       * @deprecated Use variant='wrapper' instead. This variant is kept for backward compatibility and will be removed in a future major version.
+       */
+      link: `${LINK_TOKENS.layoutBlock} ${LINK_TOKENS.variant.link.text} ${LINK_TOKENS.underlineOffset} ${LINK_TOKENS.variant.link.hover}`,
+      wrapper: `${LINK_TOKENS.layoutBlock} ${LINK_TOKENS.variant.link.text} ${LINK_TOKENS.underlineOffset} ${LINK_TOKENS.variant.link.hover}`,
+      destructive: `${LINK_TOKENS.layout} ${LINK_TOKENS.variant.destructive.text} ${LINK_TOKENS.variant.destructive.hover} ${LINK_TOKENS.underlineOffset} ${LINK_TOKENS.variant.destructive.underline}`
     },
     size: {
       sm: `${LINK_TOKENS.height.sm} ${LINK_TOKENS.fontSize.sm} ${LINK_TOKENS.padding.horizontal.sm} ${LINK_TOKENS.padding.vertical.xs}`,
@@ -345,7 +484,7 @@ var linkVariants = tokenCVA({
     }
   },
   defaultVariants: {
-    variant: "link",
+    variant: "text",
     size: "md"
   }
 });
@@ -397,8 +536,6 @@ var NextLinkAdapter = React__namespace.forwardRef(
         scroll,
         shallow,
         locale,
-        passHref: true,
-        legacyBehavior: true,
         children: /* @__PURE__ */ jsxRuntime.jsx(Link, { ref, href: hrefString, ...props })
       }
     );

package/dist/extensions/next/index.d.cts

@@ -1,6 +1,6 @@
 import { LinkProps as LinkProps$1 } from 'next/link';
 import * as React from 'react';
-import { L as LinkProps } from '../../Link-ZWr5iFB0.cjs';
+import { L as LinkProps } from '../../Link-DlH433PB.cjs';
 import 'class-variance-authority/types';
 
 interface NextLinkAdapterProps extends Omit<LinkProps, "href"> {
@@ -21,9 +21,8 @@ interface NextLinkAdapterProps extends Omit<LinkProps, "href"> {
  * NextLinkAdapter
  *
  * A compatibility adapter that bridges Next.js `next/link` with TenerifeUI `Link`.
- * This adapter resolves the "nested <a> tag" hydration error common in Next.js 13+
- * by utilizing the `legacyBehavior` pattern, allowing Foundation Link (which is an <a>)
- * to function as the child of NextLink.
+ * This adapter allows Foundation Link (which is an <a>) to function as the child of NextLink.
+ * Next.js 13+ automatically handles <a> children without creating nested anchors.
  *
  * @example
  * ```tsx

package/dist/extensions/next/index.d.ts

@@ -1,6 +1,6 @@
 import { LinkProps as LinkProps$1 } from 'next/link';
 import * as React from 'react';
-import { L as LinkProps } from '../../Link-ZWr5iFB0.js';
+import { L as LinkProps } from '../../Link-DlH433PB.js';
 import 'class-variance-authority/types';
 
 interface NextLinkAdapterProps extends Omit<LinkProps, "href"> {
@@ -21,9 +21,8 @@ interface NextLinkAdapterProps extends Omit<LinkProps, "href"> {
  * NextLinkAdapter
  *
  * A compatibility adapter that bridges Next.js `next/link` with TenerifeUI `Link`.
- * This adapter resolves the "nested <a> tag" hydration error common in Next.js 13+
- * by utilizing the `legacyBehavior` pattern, allowing Foundation Link (which is an <a>)
- * to function as the child of NextLink.
+ * This adapter allows Foundation Link (which is an <a>) to function as the child of NextLink.
+ * Next.js 13+ automatically handles <a> children without creating nested anchors.
  *
  * @example
  * ```tsx