@tenerife.music/ui 1.2.0 → 2.0.0

package/dist/extensions/next/index.mjs

@@ -0,0 +1,381 @@
+import NextLink from 'next/link';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// 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 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__ */ 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.forwardRef(
+  ({ variant, size, leftIcon, rightIcon, children, disabled, onClick, href, tabIndex, ...props }, ref) => {
+    const handleClick = React.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: [
+          renderIcon(leftIcon),
+          children,
+          renderIcon(rightIcon)
+        ]
+      }
+    );
+  }
+);
+Link.displayName = "Link";
+var NextLinkAdapter = React.forwardRef(
+  ({ href, prefetch, replace, scroll, shallow, locale, ...props }, ref) => {
+    const hrefString = typeof href === "string" ? href : href.pathname || String(href);
+    return /* @__PURE__ */ jsx(
+      NextLink,
+      {
+        href,
+        prefetch,
+        replace,
+        scroll,
+        shallow,
+        locale,
+        passHref: true,
+        legacyBehavior: true,
+        children: /* @__PURE__ */ jsx(Link, { ref, href: hrefString, ...props })
+      }
+    );
+  }
+);
+NextLinkAdapter.displayName = "NextLinkAdapter";
+
+export { NextLinkAdapter };