@tenerife.music/ui 1.2.0 → 2.0.0

package/README.md

@@ -123,6 +123,19 @@ export default function App() {
 | **Final Foundation Lock** | Authoritative source of truth         |
 | Storybook                 | Component examples and contracts      |
 
+### Development Resources
+
+- **Component Creation**: [Extension Component Creation Checklist](docs/workflows/tasks/COMPONENT_CREATION_CHECKLIST.md)
+  - **CLI Generator**: Use `pnpm run component:generate -- <ComponentName> [--category <category>]` to generate component scaffold
+  - See checklist for complete process and requirements
+- **Component Refactoring**: [Component Review & Improvement Pipeline (18A)](docs/workflows/foundation/FOUNDATION_STEP_PIPELINE.md)
+  - **Canonical process** for reviewing, improving, and validating existing components
+  - Mandatory 12-step pipeline (STEP 0-11) for Foundation and Extension components
+  - See pipeline for complete refactoring process and requirements
+- **Component Examples**: [Extension Component Examples](docs/reference/EXTENSION_COMPONENT_EXAMPLES.md)
+- **Component Needs**: [Component Needs Inventory](docs/workflows/tasks/COMPONENT_NEEDS_INVENTORY.md)
+- **Feedback Process**: [Usage Feedback Process](docs/workflows/tasks/FEEDBACK_COLLECTION_PROCESS.md)
+
 ---
 
 ## 🏗 Architecture Overview
@@ -137,10 +150,11 @@ There is exactly **one Foundation component per category**.
 - Select
 - ContextMenu
 - Toast
+- Button (**FINAL LOCK**)
 
 All Foundation components:
 
-- delegate behavior to Radix UI
+- delegate behavior to Radix UI (or native HTML elements)
 - expose token-driven visual APIs
 - are backward-compatible and locked
 
@@ -151,7 +165,6 @@ that rely strictly on tokens and shared semantics.
 
 Examples:
 
-- Button
 - Input / Textarea
 - Card / Badge
 - Layout primitives (Stack, Grid, Container)
@@ -199,6 +212,30 @@ Contributions are welcome **within the boundaries of the system**.
 
 Architectural discussions take precedence over visual changes.
 
+### Creating New Components
+
+To create a new Extension component:
+
+1. **Check Component Needs**: Review [Component Needs Inventory](docs/tasks/COMPONENT_NEEDS_INVENTORY.md) to ensure the component is needed
+2. **Use Template Generator**: Run `tsx scripts/generate-extension-component.ts <ComponentName> --category <category>`
+3. **Follow Checklist**: Complete all items in [Extension Component Creation Checklist](docs/tasks/EXTENSION_COMPONENT_CREATION_CHECKLIST.md)
+4. **Reference Examples**: Use [Extension Component Examples](docs/reference/EXTENSION_COMPONENT_EXAMPLES.md) as patterns
+
+### Requesting Components
+
+To request a new component:
+
+1. **Create GitHub Issue**: Use the [Component Request template](.github/ISSUE_TEMPLATE/component-request.md)
+2. **Provide Use Case**: Describe the specific use case and frequency of need
+3. **Document Workaround**: Explain current solution and pain points
+4. **Wait for Review**: Requests are reviewed monthly (see [Feedback Review Process](docs/tasks/FEEDBACK_REVIEW_PROCESS.md))
+
+### Development Tools
+
+- **Component Analysis**: `tsx scripts/analyze-component-needs.ts` - Analyzes codebase for component patterns
+- **Feedback Collection**: `tsx scripts/collect-usage-feedback.ts` - Collects and analyzes usage feedback
+- **Component Generator**: `tsx scripts/generate-extension-component.ts <Name> --category <category>` - Generates component scaffold
+
 ---
 
 ## 📜 License

package/dist/Link-ZWr5iFB0.d.cts

@@ -0,0 +1,60 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+
+/**
+ * Link variant values (internal - used for type derivation only)
+ *
+ * @internal
+ */
+declare const _LINK_VARIANTS: readonly ["primary", "secondary", "accent", "outline", "ghost", "link", "destructive"];
+/**
+ * Link variant type
+ *
+ * @public
+ */
+type LinkVariant = (typeof _LINK_VARIANTS)[number];
+/**
+ * Link size values (internal - used for type derivation only)
+ *
+ * @internal
+ */
+declare const _LINK_SIZES: readonly ["sm", "md", "lg"];
+/**
+ * Link size type
+ *
+ * @public
+ */
+type LinkSize = (typeof _LINK_SIZES)[number];
+declare const linkVariants: (props?: ({
+    variant?: "primary" | "secondary" | "accent" | "destructive" | "outline" | "link" | "ghost" | 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"
+     */
+    variant?: LinkVariant;
+    /**
+     * Link size
+     * @default "md"
+     */
+    size?: LinkSize;
+    /**
+     * Icon to display on the left side
+     */
+    leftIcon?: React.ReactNode;
+    /**
+     * Icon to display on the right side
+     */
+    rightIcon?: React.ReactNode;
+    /**
+     * Whether the link is disabled
+     * When disabled, the link will not be navigable and will be removed from the tab order
+     * @default false
+     */
+    disabled?: boolean;
+}
+declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+
+export { type LinkProps as L, Link as a, type LinkSize as b, type LinkVariant as c, linkVariants as l };

package/dist/Link-ZWr5iFB0.d.ts

@@ -0,0 +1,60 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+
+/**
+ * Link variant values (internal - used for type derivation only)
+ *
+ * @internal
+ */
+declare const _LINK_VARIANTS: readonly ["primary", "secondary", "accent", "outline", "ghost", "link", "destructive"];
+/**
+ * Link variant type
+ *
+ * @public
+ */
+type LinkVariant = (typeof _LINK_VARIANTS)[number];
+/**
+ * Link size values (internal - used for type derivation only)
+ *
+ * @internal
+ */
+declare const _LINK_SIZES: readonly ["sm", "md", "lg"];
+/**
+ * Link size type
+ *
+ * @public
+ */
+type LinkSize = (typeof _LINK_SIZES)[number];
+declare const linkVariants: (props?: ({
+    variant?: "primary" | "secondary" | "accent" | "destructive" | "outline" | "link" | "ghost" | 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"
+     */
+    variant?: LinkVariant;
+    /**
+     * Link size
+     * @default "md"
+     */
+    size?: LinkSize;
+    /**
+     * Icon to display on the left side
+     */
+    leftIcon?: React.ReactNode;
+    /**
+     * Icon to display on the right side
+     */
+    rightIcon?: React.ReactNode;
+    /**
+     * Whether the link is disabled
+     * When disabled, the link will not be navigable and will be removed from the tab order
+     * @default false
+     */
+    disabled?: boolean;
+}
+declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+
+export { type LinkProps as L, Link as a, type LinkSize as b, type LinkVariant as c, linkVariants as l };

package/dist/extensions/next/index.cjs

@@ -0,0 +1,406 @@
+'use strict';
+
+var NextLink = require('next/link');
+var React = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var NextLink__default = /*#__PURE__*/_interopDefault(NextLink);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/EXTENSIONS/next/NextLinkAdapter.tsx
+var FORBIDDEN_SPACING_PATTERNS = [
+  // Raw color utilities (bg-red-500, text-blue-600, etc.)
+  // These are always forbidden as they bypass the color token system
+  /\b(bg|text|border|ring|outline)-(red|blue|green|yellow|purple|pink|indigo|gray|slate|zinc|neutral|stone|orange|amber|emerald|teal|cyan|sky|violet|fuchsia|rose)-\d+/,
+  // Raw spacing utilities with arbitrary numbers (p-4, m-2, gap-3, etc.)
+  // Allow semantic spacing tokens (px-sm, py-md, etc.) which use token names
+  // Allow p-0, m-0, etc. as these are standard Tailwind classes for zero spacing
+  // Allow fractional values (0.5, 1.5, 2.5, 3.5) as these are standard Tailwind spacing classes used in tokens
+  // Note: Standard numeric values (p-4, m-2, etc.) are still flagged to encourage semantic tokens
+  /\b(p|m|px|py|pt|pb|pl|pr|mx|my|mt|mb|ml|mr|gap|space-[xy])-((?!0$|0\.5$|1\.5$|2\.5$|3\.5$)\d+(\.\d+)?|\[)/
+];
+var ADVISORY_DIMENSION_PATTERNS = [
+  // Raw size utilities with arbitrary numbers (w-4, h-6, etc.)
+  // Allow semantic size tokens (h-8, w-9, etc.) which are standard design system values
+  // Only flag arbitrary values like w-[123px] or h-[calc(...)]
+  // Allow viewport-relative values (vh, vw, %) and relative units (rem, em) as these are legitimate design system values
+  /\b(w|h|min-w|min-h|max-w|max-h)-\[(?!\d+(vh|vw|%|rem|em)\])/
+];
+function validateTokenUsage(classes, context) {
+  if (process.env.NODE_ENV === "production") {
+    return;
+  }
+  for (const pattern of FORBIDDEN_SPACING_PATTERNS) {
+    if (pattern.test(classes)) {
+      console.error(
+        `[tokenCVA] ERROR: Forbidden spacing utility detected in ${context}:
+  "${classes}"
+  Pattern: ${pattern}
+  Spacing utilities MUST use semanticSpacing tokens (e.g., from component tokens).`
+      );
+    }
+  }
+  for (const pattern of ADVISORY_DIMENSION_PATTERNS) {
+    if (pattern.test(classes)) {
+      console.warn(
+        `[tokenCVA] WARN: Dimension utility detected in ${context}:
+  "${classes}"
+  Pattern: ${pattern}
+  Dimension utilities are allowed until a dimension token system is introduced.`
+      );
+    }
+  }
+}
+function validateVariantConfig(value, path, visited = /* @__PURE__ */ new Set()) {
+  if (value === void 0 || value === null) {
+    return;
+  }
+  const key = `${path}-${String(value)}`;
+  if (visited.has(key)) {
+    return;
+  }
+  visited.add(key);
+  if (typeof value === "string") {
+    validateTokenUsage(value, path);
+  } else if (Array.isArray(value)) {
+    value.forEach((item, index) => {
+      validateVariantConfig(item, `${path}[${index}]`, visited);
+    });
+  } else if (typeof value === "object") {
+    Object.entries(value).forEach(([key2, val]) => {
+      validateVariantConfig(val, `${path}.${key2}`, visited);
+    });
+  }
+}
+function tokenCVA(config) {
+  if (process.env.NODE_ENV !== "production") {
+    if (config.base) {
+      validateVariantConfig(config.base, "base");
+    }
+    if (config.variants) {
+      Object.entries(config.variants).forEach(([variantKey, variantValues]) => {
+        Object.entries(variantValues).forEach(([valueKey, value]) => {
+          validateVariantConfig(value, `variants.${variantKey}.${valueKey}`);
+        });
+      });
+    }
+    if (config.compoundVariants) {
+      config.compoundVariants.forEach((compound, index) => {
+        if (compound.class) {
+          validateVariantConfig(compound.class, `compoundVariants[${index}].class`);
+        }
+        if (compound.className) {
+          validateVariantConfig(compound.className, `compoundVariants[${index}].className`);
+        }
+      });
+    }
+  }
+  return classVarianceAuthority.cva(config.base, {
+    variants: config.variants,
+    compoundVariants: config.compoundVariants,
+    defaultVariants: config.defaultVariants
+  });
+}
+
+// src/FOUNDATION/tokens/components/motion.ts
+var MOTION_TOKENS = {
+  /**
+   * Pre-configured transition tokens
+   * Combines duration and easing for common use cases
+   */
+  transitionPreset: {
+    // Slow transition
+    colors: "transition-colors duration-normal ease-out"}};
+
+// src/FOUNDATION/tokens/components/link.ts
+var LINK_TOKENS = {
+  /**
+   * Link heights by size
+   * Maps to Tailwind height utilities
+   */
+  height: {
+    // 28px (1.75rem)
+    sm: "h-8",
+    // 32px (2rem)
+    md: "h-9",
+    // 36px (2.25rem)
+    lg: "h-10"},
+  /**
+   * Link padding by size
+   * Horizontal and vertical padding values
+   */
+  padding: {
+    horizontal: {
+      // 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"},
+    vertical: {
+      xs: "py-xs",
+      // 4px (0.25rem) - maps to semanticSpacing.xs
+      sm: "py-sm"}
+  },
+  /**
+   * Layout tokens
+   * Base layout utilities for link component
+   */
+  layout: "inline-flex items-center justify-center whitespace-nowrap",
+  // Base layout for link container
+  /**
+   * Font weight token
+   * References foundation typography fontWeight tokens from Typography Authority
+   *
+   * @rule References fontWeight.medium (500) from Typography Authority
+   * @see docs/architecture/TYPOGRAPHY_AUTHORITY_CONTRACT.md
+   */
+  fontWeight: "font-medium",
+  // References fontWeight.medium (500) - Typography Authority compliant
+  /**
+   * Icon wrapper layout
+   * Layout utilities for icon containers
+   */
+  iconWrapper: "inline-flex items-center",
+  // Layout for left/right icon wrappers
+  /**
+   * Font sizes by link size
+   * References foundation typography fontSize tokens from Typography Authority
+   *
+   * @rule All fontSize values reference Typography Authority tokens
+   * @see docs/architecture/TYPOGRAPHY_AUTHORITY_CONTRACT.md
+   */
+  fontSize: {
+    // 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"},
+  /**
+   * Border radius for outline and ghost variants
+   * References componentRadius from Radius Authority
+   *
+   * @rule References borderRadius.md (6px / 0.375rem) from Radius Authority
+   * @see docs/architecture/RADIUS_AUTHORITY_CONTRACT.md
+   */
+  radius: "rounded-md",
+  // References borderRadius.md (6px / 0.375rem) - Radius Authority compliant
+  /**
+   * Underline offset for text decoration
+   * Uses spacing token (xs = 4px) which matches underline-offset-4
+   */
+  underlineOffset: "underline-offset-4",
+  // 4px (0.25rem) - matches semanticSpacing.xs
+  /**
+   * Transition tokens
+   * References Motion Authority tokens for consistent motion behavior
+   *
+   * @rule Uses MOTION_TOKENS.transitionPreset.colors from Motion Authority
+   * @rule Motion transitions MUST use canonical motion tokens only
+   * @see docs/architecture/MOTION_AUTHORITY_CONTRACT.md
+   */
+  transition: {
+    colors: MOTION_TOKENS.transitionPreset.colors
+    // "transition-colors duration-normal ease-out" - Motion Authority compliant
+  },
+  /**
+   * Focus state tokens
+   * Focus ring for keyboard navigation
+   *
+   * @rule Focus MUST use focus-visible: prefix (keyboard navigation only)
+   * @rule Focus MUST be blocked when disabled={true}
+   */
+  focus: {
+    ring: "focus-visible:ring-2 focus-visible:ring-ring",
+    // Focus ring using semantic ring color
+    outline: "focus-visible:outline-none",
+    // Remove default outline (replaced by ring)
+    offset: "focus-visible:ring-offset-2"
+    // Ring offset
+  },
+  /**
+   * Disabled state tokens
+   */
+  state: {
+    disabled: {
+      pointerEvents: "disabled:pointer-events-none",
+      // Disable pointer events
+      opacity: "disabled:opacity-50"
+      // Disabled opacity
+    }
+  },
+  /**
+   * Color tokens for link variants
+   * Uses semantic color tokens that map to CSS variables
+   */
+  variant: {
+    primary: {
+      text: "text-primary",
+      // Primary text using CSS var
+      hover: "hover:text-primary/80",
+      // Primary hover text
+      underline: "hover:underline"
+      // Underline on hover
+    },
+    secondary: {
+      text: "text-secondary",
+      // Secondary text using CSS var
+      hover: "hover:underline"
+      // Underline on hover
+    },
+    accent: {
+      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
+    },
+    outline: {
+      border: "border border-input",
+      // Input border using CSS var
+      background: "bg-background",
+      // Background using CSS var
+      text: "text-foreground",
+      // Foreground text using CSS var
+      hover: {
+        background: "hover:bg-accent",
+        // Hover background
+        text: "hover:text-accent-foreground"
+        // Hover text
+      }
+    },
+    ghost: {
+      text: "text-foreground",
+      // Foreground text using CSS var
+      hover: {
+        background: "hover:bg-accent",
+        // Hover background
+        text: "hover:text-accent-foreground"
+        // Hover text
+      }
+    },
+    link: {
+      text: "text-primary",
+      // Primary text using CSS var
+      hover: "hover:underline"
+      // Underline on hover
+    },
+    destructive: {
+      text: "text-destructive",
+      // Destructive text using CSS var
+      hover: "hover:text-destructive/80",
+      // Destructive hover text
+      underline: "hover:underline"
+      // Underline on hover
+    }
+  }
+};
+var ICON_WRAPPER_CLASS = LINK_TOKENS.iconWrapper;
+function renderIcon(icon) {
+  if (!icon) return null;
+  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.opacity}`,
+  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.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}`
+    },
+    size: {
+      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}`
+    }
+  },
+  defaultVariants: {
+    variant: "link",
+    size: "md"
+  }
+});
+var Link = React__namespace.forwardRef(
+  ({ variant, size, leftIcon, rightIcon, children, disabled, onClick, href, tabIndex, ...props }, ref) => {
+    const handleClick = React__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: [
+          renderIcon(leftIcon),
+          children,
+          renderIcon(rightIcon)
+        ]
+      }
+    );
+  }
+);
+Link.displayName = "Link";
+var NextLinkAdapter = React__namespace.forwardRef(
+  ({ href, prefetch, replace, scroll, shallow, locale, ...props }, ref) => {
+    const hrefString = typeof href === "string" ? href : href.pathname || String(href);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      NextLink__default.default,
+      {
+        href,
+        prefetch,
+        replace,
+        scroll,
+        shallow,
+        locale,
+        passHref: true,
+        legacyBehavior: true,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Link, { ref, href: hrefString, ...props })
+      }
+    );
+  }
+);
+NextLinkAdapter.displayName = "NextLinkAdapter";
+
+exports.NextLinkAdapter = NextLinkAdapter;

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

@@ -0,0 +1,37 @@
+import { LinkProps as LinkProps$1 } from 'next/link';
+import * as React from 'react';
+import { L as LinkProps } from '../../Link-ZWr5iFB0.cjs';
+import 'class-variance-authority/types';
+
+interface NextLinkAdapterProps extends Omit<LinkProps, "href"> {
+    /**
+     * Next.js Link props
+     */
+    href: LinkProps$1["href"];
+    /**
+     * Next.js specific props
+     */
+    prefetch?: LinkProps$1["prefetch"];
+    replace?: LinkProps$1["replace"];
+    scroll?: LinkProps$1["scroll"];
+    shallow?: LinkProps$1["shallow"];
+    locale?: LinkProps$1["locale"];
+}
+/**
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <NextLinkAdapter href="/dashboard" variant="primary">
+ *   Dashboard
+ * </NextLinkAdapter>
+ * ```
+ */
+declare const NextLinkAdapter: React.ForwardRefExoticComponent<NextLinkAdapterProps & React.RefAttributes<HTMLAnchorElement>>;
+
+export { NextLinkAdapter, type NextLinkAdapterProps };

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

@@ -0,0 +1,37 @@
+import { LinkProps as LinkProps$1 } from 'next/link';
+import * as React from 'react';
+import { L as LinkProps } from '../../Link-ZWr5iFB0.js';
+import 'class-variance-authority/types';
+
+interface NextLinkAdapterProps extends Omit<LinkProps, "href"> {
+    /**
+     * Next.js Link props
+     */
+    href: LinkProps$1["href"];
+    /**
+     * Next.js specific props
+     */
+    prefetch?: LinkProps$1["prefetch"];
+    replace?: LinkProps$1["replace"];
+    scroll?: LinkProps$1["scroll"];
+    shallow?: LinkProps$1["shallow"];
+    locale?: LinkProps$1["locale"];
+}
+/**
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <NextLinkAdapter href="/dashboard" variant="primary">
+ *   Dashboard
+ * </NextLinkAdapter>
+ * ```
+ */
+declare const NextLinkAdapter: React.ForwardRefExoticComponent<NextLinkAdapterProps & React.RefAttributes<HTMLAnchorElement>>;
+
+export { NextLinkAdapter, type NextLinkAdapterProps };