@intlayer/design-system 7.4.0 → 7.5.0-canary.1

package/dist/esm/components/KeyboardShortcut/KeyboardShortcut.mjs

@@ -0,0 +1,225 @@
+'use client';
+
+import { cn } from "../../utils/cn.mjs";
+import { useDevice } from "../../hooks/useDevice.mjs";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/KeyboardShortcut/KeyboardShortcut.tsx
+/**
+* Enum for available keyboard keys
+*/
+let KeyList = /* @__PURE__ */ function(KeyList$1) {
+	KeyList$1["⌘"] = "⌘";
+	KeyList$1["Ctrl"] = "Ctrl";
+	KeyList$1["Alt"] = "Alt";
+	KeyList$1["⌥"] = "⌥";
+	KeyList$1["Shift"] = "Shift";
+	KeyList$1["Meta"] = "Meta";
+	KeyList$1["F"] = "F";
+	KeyList$1["K"] = "K";
+	KeyList$1["L"] = "L";
+	KeyList$1["P"] = "P";
+	KeyList$1["S"] = "S";
+	KeyList$1["A"] = "A";
+	KeyList$1["B"] = "B";
+	KeyList$1["C"] = "C";
+	KeyList$1["D"] = "D";
+	KeyList$1["E"] = "E";
+	KeyList$1["G"] = "G";
+	KeyList$1["H"] = "H";
+	KeyList$1["I"] = "I";
+	KeyList$1["J"] = "J";
+	KeyList$1["M"] = "M";
+	KeyList$1["N"] = "N";
+	KeyList$1["O"] = "O";
+	KeyList$1["Q"] = "Q";
+	KeyList$1["R"] = "R";
+	KeyList$1["T"] = "T";
+	KeyList$1["U"] = "U";
+	KeyList$1["V"] = "V";
+	KeyList$1["W"] = "W";
+	KeyList$1["X"] = "X";
+	KeyList$1["Y"] = "Y";
+	KeyList$1["Z"] = "Z";
+	KeyList$1["Enter"] = "Enter";
+	KeyList$1["Escape"] = "Escape";
+	KeyList$1["Backspace"] = "Backspace";
+	KeyList$1["Tab"] = "Tab";
+	KeyList$1["Space"] = "Space";
+	KeyList$1["ArrowUp"] = "ArrowUp";
+	KeyList$1["ArrowDown"] = "ArrowDown";
+	KeyList$1["ArrowLeft"] = "ArrowLeft";
+	KeyList$1["ArrowRight"] = "ArrowRight";
+	KeyList$1["↑"] = "↑";
+	KeyList$1["↓"] = "↓";
+	KeyList$1["←"] = "←";
+	KeyList$1["→"] = "→";
+	return KeyList$1;
+}({});
+/**
+* Parse keyboard shortcut string into individual keys
+*/
+const parseShortcut = (shortcut) => {
+	return shortcut.split(" + ").map((key) => key.trim());
+};
+/**
+* Normalize key name for event comparison
+*/
+const normalizeKey = (key) => {
+	return {
+		"⌘": "Meta",
+		Ctrl: "Control",
+		Control: "Control",
+		Alt: "Alt",
+		"⌥": "Alt",
+		Shift: "Shift",
+		Meta: "Meta",
+		"↑": "ArrowUp",
+		"↓": "ArrowDown",
+		"←": "ArrowLeft",
+		"→": "ArrowRight",
+		ArrowUp: "ArrowUp",
+		ArrowDown: "ArrowDown",
+		ArrowLeft: "ArrowLeft",
+		ArrowRight: "ArrowRight"
+	}[key] || key;
+};
+/**
+* Check if the keyboard event matches the shortcut
+*/
+const matchesShortcut = (event, keys) => {
+	const normalizedKeys = keys.map(normalizeKey);
+	const hasModifiers = {
+		Meta: normalizedKeys.includes("Meta"),
+		Control: normalizedKeys.includes("Control"),
+		Alt: normalizedKeys.includes("Alt"),
+		Shift: normalizedKeys.includes("Shift")
+	};
+	if (hasModifiers.Meta !== event.metaKey || hasModifiers.Control !== event.ctrlKey || hasModifiers.Alt !== event.altKey || hasModifiers.Shift !== event.shiftKey) return false;
+	const nonModifierKey = keys.find((key) => ![
+		"⌘",
+		"Ctrl",
+		"Control",
+		"Alt",
+		"⌥",
+		"Shift",
+		"Meta"
+	].includes(normalizeKey(key)));
+	if (!nonModifierKey) return false;
+	const normalizedNonModifierKey = normalizeKey(nonModifierKey);
+	if (normalizedNonModifierKey.startsWith("Arrow")) return event.key === normalizedNonModifierKey;
+	return event.key.toLowerCase() === normalizedNonModifierKey.toLowerCase();
+};
+/**
+* Get display key symbol for better visual representation
+*/
+const getDisplayKey = (key) => {
+	return {
+		ArrowUp: "↑",
+		ArrowDown: "↓",
+		ArrowLeft: "←",
+		ArrowRight: "→"
+	}[key] || key;
+};
+/**
+* Get display shortcut based on OS (Mac uses ⌘ and ⌥, others use Ctrl and Alt)
+*/
+const getDisplayShortcut = (shortcut, isMac) => {
+	let result = shortcut;
+	if (isMac) {
+		result = result.replace(/Ctrl/g, "⌘");
+		result = result.replace(/Alt/g, "⌥");
+	} else {
+		result = result.replace(/⌘/g, "Ctrl");
+		result = result.replace(/⌥/g, "Alt");
+	}
+	result = result.replace(/ArrowUp/g, "↑");
+	result = result.replace(/ArrowDown/g, "↓");
+	result = result.replace(/ArrowLeft/g, "←");
+	result = result.replace(/ArrowRight/g, "→");
+	return result;
+};
+/**
+* KeyboardShortcut Component
+*
+* A reusable component that displays keyboard shortcuts and listens for key combinations.
+* Automatically adapts to Mac (⌘, ⌥) and Windows/Linux (Ctrl, Alt) conventions.
+*
+* @example
+* ```tsx
+* <KeyboardShortcut
+*   shortcut="⌘ + F"
+*   onTriggered={() => setShowSearch(true)}
+* />
+* ```
+*/
+const KeyboardShortcut = ({ shortcut, onTriggered, display = true, className, size = "md" }) => {
+	const { isMac } = useDevice();
+	const keys = parseShortcut(getDisplayShortcut(shortcut, isMac ?? false));
+	const [pressedKeys, setPressedKeys] = useState(/* @__PURE__ */ new Set());
+	useEffect(() => {
+		const handleKeyDown = (event) => {
+			const target = event.target;
+			const isInputField = target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable;
+			const currentKey = event.key;
+			const normalizedEventKeys = /* @__PURE__ */ new Set();
+			if (event.metaKey) normalizedEventKeys.add("⌘");
+			if (event.ctrlKey) normalizedEventKeys.add("Ctrl");
+			if (event.altKey) normalizedEventKeys.add(isMac ? "⌥" : "Alt");
+			if (event.shiftKey) normalizedEventKeys.add("Shift");
+			if (currentKey.startsWith("Arrow")) {
+				normalizedEventKeys.add(currentKey);
+				const arrowSymbol = getDisplayKey(currentKey);
+				normalizedEventKeys.add(arrowSymbol);
+			} else normalizedEventKeys.add(currentKey.toUpperCase());
+			setPressedKeys(normalizedEventKeys);
+			if (onTriggered && matchesShortcut(event, keys)) {
+				if (isInputField) return;
+				event.preventDefault();
+				onTriggered();
+			}
+		};
+		const handleKeyUp = () => {
+			setPressedKeys(/* @__PURE__ */ new Set());
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		window.addEventListener("keyup", handleKeyUp);
+		window.addEventListener("blur", handleKeyUp);
+		return () => {
+			window.removeEventListener("keydown", handleKeyDown);
+			window.removeEventListener("keyup", handleKeyUp);
+			window.removeEventListener("blur", handleKeyUp);
+		};
+	}, [keys, onTriggered]);
+	if (!display) return null;
+	/**
+	* Check if a key is currently pressed
+	*/
+	const isKeyPressed = (key) => {
+		const upperKey = key.toUpperCase();
+		const normalizedKey = normalizeKey(key);
+		return pressedKeys.has(key) || pressedKeys.has(upperKey) || pressedKeys.has(normalizedKey) || key === "⌘" && pressedKeys.has("Meta") || key === "Ctrl" && pressedKeys.has("Control") || key === "⌥" && pressedKeys.has("Alt") || key === "Alt" && pressedKeys.has("Alt") || key === "←" && pressedKeys.has("ArrowLeft") || key === "→" && pressedKeys.has("ArrowRight") || key === "↑" && pressedKeys.has("ArrowUp") || key === "↓" && pressedKeys.has("ArrowDown");
+	};
+	return /* @__PURE__ */ jsx("kbd", {
+		className: cn("inline-flex items-center justify-center gap-0.5 p-0.5", "rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl", "font-medium font-sans", "border-1 border-neutral/20 text-neutral", size === "sm" && "text-xs", size === "md" && "text-sm", size === "lg" && "text-base", className),
+		children: keys.map((key, index) => {
+			const keyId = `${key}-${index}-${shortcut}`;
+			const displayKey = getDisplayKey(key);
+			return /* @__PURE__ */ jsxs("span", {
+				className: "inline-flex items-center",
+				children: [index > 0 && /* @__PURE__ */ jsx("span", {
+					className: "text-neutral/50",
+					children: "+"
+				}), /* @__PURE__ */ jsx("span", {
+					className: cn("min-w-4 px-0.5", isKeyPressed(key) && "scale-120 font-bold text-text"),
+					children: displayKey
+				})]
+			}, keyId);
+		})
+	});
+};
+
+//#endregion
+export { KeyList, KeyboardShortcut };
+//# sourceMappingURL=KeyboardShortcut.mjs.map

package/dist/esm/components/KeyboardShortcut/KeyboardShortcut.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyboardShortcut.mjs","names":["KeyboardShortcut: FC<KeyboardShortcutProps>"],"sources":["../../../../src/components/KeyboardShortcut/KeyboardShortcut.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, useEffect, useState } from 'react';\nimport { useDevice } from '../../hooks/useDevice';\nimport { cn } from '../../utils/cn';\n\n/**\n * Enum for available keyboard keys\n */\nexport enum KeyList {\n  '⌘' = '⌘',\n  Ctrl = 'Ctrl',\n  Alt = 'Alt',\n  '⌥' = '⌥',\n  Shift = 'Shift',\n  Meta = 'Meta',\n  F = 'F',\n  K = 'K',\n  L = 'L',\n  P = 'P',\n  S = 'S',\n  A = 'A',\n  B = 'B',\n  C = 'C',\n  D = 'D',\n  E = 'E',\n  G = 'G',\n  H = 'H',\n  I = 'I',\n  J = 'J',\n  M = 'M',\n  N = 'N',\n  O = 'O',\n  Q = 'Q',\n  R = 'R',\n  T = 'T',\n  U = 'U',\n  V = 'V',\n  W = 'W',\n  X = 'X',\n  Y = 'Y',\n  Z = 'Z',\n  Enter = 'Enter',\n  Escape = 'Escape',\n  Backspace = 'Backspace',\n  Tab = 'Tab',\n  Space = 'Space',\n  ArrowUp = 'ArrowUp',\n  ArrowDown = 'ArrowDown',\n  ArrowLeft = 'ArrowLeft',\n  ArrowRight = 'ArrowRight',\n  '↑' = '↑',\n  '↓' = '↓',\n  '←' = '←',\n  '→' = '→',\n}\n\n/**\n * Type-safe keyboard shortcut combinations\n * Note: Using string type to avoid union type complexity issues\n * Expected format: \"Key + Key\" (e.g., \"⌘ + F\", \"Ctrl + Shift + K\")\n */\nexport type KeyboardShortcutType = string;\n\nexport type KeyboardShortcutProps = {\n  /** The keyboard shortcut combination (e.g., \"⌘ + F\" or \"Ctrl + K\") */\n  shortcut: KeyboardShortcutType;\n  /** Callback function triggered when the shortcut is pressed */\n  onTriggered?: () => void;\n  /** Whether to display the shortcut visually (default: true) */\n  display?: boolean;\n  /** Additional CSS classes */\n  className?: string;\n  /** Size of the keyboard shortcut display */\n  size?: 'sm' | 'md' | 'lg';\n};\n\n/**\n * Parse keyboard shortcut string into individual keys\n */\nconst parseShortcut = (shortcut: string): string[] => {\n  return shortcut.split(' + ').map((key) => key.trim());\n};\n\n/**\n * Normalize key name for event comparison\n */\nconst normalizeKey = (key: string): string => {\n  const keyMap: Record<string, string> = {\n    '⌘': 'Meta',\n    Ctrl: 'Control',\n    Control: 'Control',\n    Alt: 'Alt',\n    '⌥': 'Alt',\n    Shift: 'Shift',\n    Meta: 'Meta',\n    '↑': 'ArrowUp',\n    '↓': 'ArrowDown',\n    '←': 'ArrowLeft',\n    '→': 'ArrowRight',\n    ArrowUp: 'ArrowUp',\n    ArrowDown: 'ArrowDown',\n    ArrowLeft: 'ArrowLeft',\n    ArrowRight: 'ArrowRight',\n  };\n\n  return keyMap[key] || key;\n};\n\n/**\n * Check if the keyboard event matches the shortcut\n */\nconst matchesShortcut = (event: KeyboardEvent, keys: string[]): boolean => {\n  const normalizedKeys = keys.map(normalizeKey);\n  const hasModifiers = {\n    Meta: normalizedKeys.includes('Meta'),\n    Control: normalizedKeys.includes('Control'),\n    Alt: normalizedKeys.includes('Alt'),\n    Shift: normalizedKeys.includes('Shift'),\n  };\n\n  // Check if all required modifiers are pressed\n  if (\n    hasModifiers.Meta !== event.metaKey ||\n    hasModifiers.Control !== event.ctrlKey ||\n    hasModifiers.Alt !== event.altKey ||\n    hasModifiers.Shift !== event.shiftKey\n  ) {\n    return false;\n  }\n\n  // Find the non-modifier key\n  const nonModifierKey = keys.find(\n    (key) =>\n      !['⌘', 'Ctrl', 'Control', 'Alt', '⌥', 'Shift', 'Meta'].includes(\n        normalizeKey(key)\n      )\n  );\n\n  if (!nonModifierKey) return false;\n\n  // Normalize the key for comparison\n  const normalizedNonModifierKey = normalizeKey(nonModifierKey);\n\n  // Compare the main key\n  // For arrow keys, compare directly with event.key\n  if (normalizedNonModifierKey.startsWith('Arrow')) {\n    return event.key === normalizedNonModifierKey;\n  }\n\n  // For other keys, compare case-insensitive\n  return event.key.toLowerCase() === normalizedNonModifierKey.toLowerCase();\n};\n\n/**\n * Get display key symbol for better visual representation\n */\nconst getDisplayKey = (key: string): string => {\n  const displayMap: Record<string, string> = {\n    ArrowUp: '↑',\n    ArrowDown: '↓',\n    ArrowLeft: '←',\n    ArrowRight: '→',\n  };\n\n  return displayMap[key] || key;\n};\n\n/**\n * Get display shortcut based on OS (Mac uses ⌘ and ⌥, others use Ctrl and Alt)\n */\nconst getDisplayShortcut = (shortcut: string, isMac: boolean): string => {\n  let result = shortcut;\n\n  if (isMac) {\n    result = result.replace(/Ctrl/g, '⌘');\n    result = result.replace(/Alt/g, '⌥');\n  } else {\n    result = result.replace(/⌘/g, 'Ctrl');\n    result = result.replace(/⌥/g, 'Alt');\n  }\n\n  // Replace arrow key names with symbols\n  result = result.replace(/ArrowUp/g, '↑');\n  result = result.replace(/ArrowDown/g, '↓');\n  result = result.replace(/ArrowLeft/g, '←');\n  result = result.replace(/ArrowRight/g, '→');\n\n  return result;\n};\n\n/**\n * KeyboardShortcut Component\n *\n * A reusable component that displays keyboard shortcuts and listens for key combinations.\n * Automatically adapts to Mac (⌘, ⌥) and Windows/Linux (Ctrl, Alt) conventions.\n *\n * @example\n * ```tsx\n * <KeyboardShortcut\n *   shortcut=\"⌘ + F\"\n *   onTriggered={() => setShowSearch(true)}\n * />\n * ```\n */\nexport const KeyboardShortcut: FC<KeyboardShortcutProps> = ({\n  shortcut,\n  onTriggered,\n  display = true,\n  className,\n  size = 'md',\n}) => {\n  const { isMac } = useDevice();\n  const displayShortcut = getDisplayShortcut(shortcut, isMac ?? false);\n  const keys = parseShortcut(displayShortcut);\n  const [pressedKeys, setPressedKeys] = useState<Set<string>>(new Set());\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      // Don't trigger shortcuts when typing in input fields\n      const target = event.target as HTMLElement;\n      const isInputField =\n        target.tagName === 'INPUT' ||\n        target.tagName === 'TEXTAREA' ||\n        target.isContentEditable;\n\n      // Update pressed keys state for visual feedback\n      const currentKey = event.key;\n      const normalizedEventKeys = new Set<string>();\n\n      // Add modifier keys\n      if (event.metaKey) normalizedEventKeys.add('⌘');\n      if (event.ctrlKey) normalizedEventKeys.add('Ctrl');\n      if (event.altKey) normalizedEventKeys.add(isMac ? '⌥' : 'Alt');\n      if (event.shiftKey) normalizedEventKeys.add('Shift');\n\n      // Add the main key\n      if (currentKey.startsWith('Arrow')) {\n        // For arrow keys, add both the key name and the symbol\n        normalizedEventKeys.add(currentKey);\n        const arrowSymbol = getDisplayKey(currentKey);\n        normalizedEventKeys.add(arrowSymbol);\n      } else {\n        normalizedEventKeys.add(currentKey.toUpperCase());\n      }\n\n      setPressedKeys(normalizedEventKeys);\n\n      // Trigger callback if shortcut matches\n      if (onTriggered && matchesShortcut(event, keys)) {\n        // Don't trigger shortcuts when typing in input fields\n        if (isInputField) {\n          return;\n        }\n        event.preventDefault();\n        onTriggered();\n      }\n    };\n\n    const handleKeyUp = () => {\n      // Clear pressed keys when any key is released\n      setPressedKeys(new Set());\n    };\n\n    window.addEventListener('keydown', handleKeyDown);\n    window.addEventListener('keyup', handleKeyUp);\n    window.addEventListener('blur', handleKeyUp); // Clear on window blur\n\n    return () => {\n      window.removeEventListener('keydown', handleKeyDown);\n      window.removeEventListener('keyup', handleKeyUp);\n      window.removeEventListener('blur', handleKeyUp);\n    };\n  }, [keys, onTriggered]);\n\n  if (!display) return null;\n\n  /**\n   * Check if a key is currently pressed\n   */\n  const isKeyPressed = (key: string): boolean => {\n    const upperKey = key.toUpperCase();\n    const normalizedKey = normalizeKey(key);\n\n    return (\n      pressedKeys.has(key) ||\n      pressedKeys.has(upperKey) ||\n      pressedKeys.has(normalizedKey) ||\n      // Check for modifier key matches\n      (key === '⌘' && pressedKeys.has('Meta')) ||\n      (key === 'Ctrl' && pressedKeys.has('Control')) ||\n      (key === '⌥' && pressedKeys.has('Alt')) ||\n      (key === 'Alt' && pressedKeys.has('Alt')) ||\n      // Check for arrow key symbols\n      (key === '←' && pressedKeys.has('ArrowLeft')) ||\n      (key === '→' && pressedKeys.has('ArrowRight')) ||\n      (key === '↑' && pressedKeys.has('ArrowUp')) ||\n      (key === '↓' && pressedKeys.has('ArrowDown'))\n    );\n  };\n\n  return (\n    <kbd\n      className={cn(\n        'inline-flex items-center justify-center gap-0.5 p-0.5',\n        'rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl',\n        'font-medium font-sans',\n        'border-1 border-neutral/20 text-neutral',\n        size === 'sm' && 'text-xs',\n        size === 'md' && 'text-sm',\n        size === 'lg' && 'text-base',\n        className\n      )}\n    >\n      {keys.map((key, index) => {\n        const keyId = `${key}-${index}-${shortcut}`;\n        const displayKey = getDisplayKey(key);\n        return (\n          <span key={keyId} className=\"inline-flex items-center\">\n            {index > 0 && <span className=\"text-neutral/50\">+</span>}\n            <span\n              className={cn(\n                'min-w-4 px-0.5',\n                isKeyPressed(key) && 'scale-120 font-bold text-text'\n              )}\n            >\n              {displayKey}\n            </span>\n          </span>\n        );\n      })}\n    </kbd>\n  );\n};\n"],"mappings":"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"}

package/dist/esm/components/KeyboardShortcut/index.mjs

@@ -0,0 +1,3 @@
+import { KeyList, KeyboardShortcut } from "./KeyboardShortcut.mjs";
+
+export { KeyList, KeyboardShortcut };

package/dist/esm/components/Link/Link.mjs

@@ -53,6 +53,26 @@ let LinkColor = /* @__PURE__ */ function(LinkColor$1) {
 	LinkColor$1["CUSTOM"] = "custom";
 	return LinkColor$1;
 }({});
+/** Available rounded corner sizes for the container */
+let LinkRoundedSize = /* @__PURE__ */ function(LinkRoundedSize$1) {
+	LinkRoundedSize$1["NONE"] = "none";
+	LinkRoundedSize$1["SM"] = "sm";
+	LinkRoundedSize$1["MD"] = "md";
+	LinkRoundedSize$1["LG"] = "lg";
+	LinkRoundedSize$1["XL"] = "xl";
+	LinkRoundedSize$1["TWO_XL"] = "2xl";
+	LinkRoundedSize$1["THREE_XL"] = "3xl";
+	LinkRoundedSize$1["FULL"] = "full";
+	return LinkRoundedSize$1;
+}({});
+let LinkSize = /* @__PURE__ */ function(LinkSize$1) {
+	LinkSize$1["SM"] = "sm";
+	LinkSize$1["MD"] = "md";
+	LinkSize$1["LG"] = "lg";
+	LinkSize$1["XL"] = "xl";
+	LinkSize$1["CUSTOM"] = "custom";
+	return LinkSize$1;
+}({});
 /**
 * Underline style options for Link component
 *
@@ -71,14 +91,24 @@ let LinkUnderlined = /* @__PURE__ */ function(LinkUnderlined$1) {
 * Class variance authority configuration for Link component styling
 * Defines the visual appearance based on variant, color, and underline options
 */
-const linkVariants = cva("gap-3 transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50", {
+const linkVariants = cva("gap-3 transition-all duration-300 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50", {
 	variants: {
 		variant: {
 			[`${LinkVariant.DEFAULT}`]: "h-auto justify-start border-inherit bg-current/0 px-1 underline-offset-4 hover:bg-current/0 hover:underline",
 			[`${LinkVariant.INVISIBLE_LINK}`]: "h-auto justify-start border-inherit bg-current/0 px-1 underline-offset-4 hover:bg-current/0",
-			[`${LinkVariant.BUTTON}`]: "flex min-h-8 items-center justify-center gap-2 whitespace-nowrap rounded-lg bg-current px-6 font-medium text-sm transition *:text-text-opposite focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 max-md:py-2",
-			[`${LinkVariant.BUTTON_OUTLINED}`]: "flex min-h-8 items-center justify-center gap-2 whitespace-nowrap rounded-lg border-[1.5px] px-6 font-medium text-sm transition hover:bg-current/30 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 max-md:py-2",
-			[`${LinkVariant.HOVERABLE}`]: "block rounded-lg border-none bg-current/0 transition hover:bg-current/20 aria-[current]:bg-current/5"
+			[`${LinkVariant.BUTTON}`]: "relative flex cursor-pointer flex-row items-center justify-center gap-2 rounded-full bg-current text-center font-medium text-text ring-0 *:text-text-opposite hover:bg-current/90 hover:ring-5 aria-selected:ring-5",
+			[`${LinkVariant.BUTTON_OUTLINED}`]: "relative flex cursor-pointer flex-row items-center justify-center gap-2 rounded-full border-[1.3px] border-current text-center font-medium text-text ring-0 *:text-text hover:bg-current/20 hover:ring-5 aria-selected:ring-5",
+			[`${LinkVariant.HOVERABLE}`]: "block rounded-lg border-none bg-current/0 hover:bg-current/10 aria-[current]:bg-current/5"
+		},
+		roundedSize: {
+			[`${LinkRoundedSize.NONE}`]: "rounded-none",
+			[`${LinkRoundedSize.SM}`]: "rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl",
+			[`${LinkRoundedSize.MD}`]: "rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl",
+			[`${LinkRoundedSize.LG}`]: "rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl",
+			[`${LinkRoundedSize.XL}`]: "rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl",
+			[`${LinkRoundedSize.TWO_XL}`]: "rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]",
+			[`${LinkRoundedSize.THREE_XL}`]: "rounded-[2.5rem] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[3rem]",
+			[`${LinkRoundedSize.FULL}`]: "rounded-full"
 		},
 		color: {
 			[`${LinkColor.PRIMARY}`]: "text-primary",
@@ -93,16 +123,97 @@ const linkVariants = cva("gap-3 transition focus-visible:outline-hidden disabled
 			[`${LinkColor.SUCCESS}`]: "text-success",
 			[`${LinkColor.CUSTOM}`]: ""
 		},
+		size: {
+			[`${LinkSize.SM}`]: "text-sm",
+			[`${LinkSize.MD}`]: "text-base",
+			[`${LinkSize.LG}`]: "text-lg",
+			[`${LinkSize.XL}`]: "text-xl",
+			[`${LinkSize.CUSTOM}`]: ""
+		},
 		underlined: {
 			[LinkUnderlined.DEFAULT]: "",
 			[LinkUnderlined.TRUE]: "underline",
 			[LinkUnderlined.FALSE]: "no-underline"
 		}
 	},
+	compoundVariants: [
+		{
+			variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],
+			size: LinkSize.SM,
+			class: "min-h-7 px-3 max-md:py-1"
+		},
+		{
+			variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],
+			size: LinkSize.MD,
+			class: "min-h-8 px-6 max-md:py-2"
+		},
+		{
+			variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],
+			size: LinkSize.LG,
+			class: "min-h-10 px-8 max-md:py-3"
+		},
+		{
+			variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],
+			size: LinkSize.XL,
+			class: "min-h-11 px-10 max-md:py-4"
+		},
+		{
+			variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],
+			color: LinkColor.PRIMARY,
+			class: "ring-primary/20"
+		},
+		{
+			variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],
+			color: LinkColor.SECONDARY,
+			class: "ring-secondary/20"
+		},
+		{
+			variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],
+			color: LinkColor.DESTRUCTIVE,
+			class: "ring-destructive/20"
+		},
+		{
+			variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],
+			color: LinkColor.NEUTRAL,
+			class: "ring-neutral/20"
+		},
+		{
+			variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],
+			color: LinkColor.LIGHT,
+			class: "ring-white/20"
+		},
+		{
+			variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],
+			color: LinkColor.DARK,
+			class: "ring-neutral-800/20"
+		},
+		{
+			variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],
+			color: LinkColor.TEXT,
+			class: "ring-text/20"
+		},
+		{
+			variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],
+			color: LinkColor.TEXT_INVERSE,
+			class: "ring-text-opposite/20"
+		},
+		{
+			variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],
+			color: LinkColor.ERROR,
+			class: "ring-error/20"
+		},
+		{
+			variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],
+			color: LinkColor.SUCCESS,
+			class: "ring-success/20"
+		}
+	],
 	defaultVariants: {
 		variant: LinkVariant.DEFAULT,
 		color: LinkColor.PRIMARY,
-		underlined: LinkUnderlined.DEFAULT
+		roundedSize: LinkRoundedSize.MD,
+		underlined: LinkUnderlined.DEFAULT,
+		size: LinkSize.MD
 	}
 });
 /**
@@ -113,7 +224,7 @@ const linkVariants = cva("gap-3 transition focus-visible:outline-hidden disabled
 *
 * @example
 * ```tsx
-* checkIsExternalLink({ href: 'https://example.com' }) // true
+* checkIsExternalLink({ href: '[https://example.com](https://example.com)' }) // true
 * checkIsExternalLink({ href: '/internal-page' }) // false
 * checkIsExternalLink({ href: '/page', isExternalLink: true }) // true
 * ```
@@ -127,93 +238,10 @@ const checkIsExternalLink = ({ href, isExternalLink: isExternalLinkProp }) => {
 *
 * A versatile link component that handles both internal and external navigation
 * with comprehensive internationalization support and multiple visual variants.
-*
-* ## Key Features
-* - **Multiple Variants**: Default, invisible, button, outlined button, and hoverable styles
-* - **Color Themes**: Comprehensive color palette for different contexts and meanings
-* - **External Link Detection**: Automatic detection and handling of external URLs
-* - **Internationalization**: Built-in support for localized URLs via Intlayer
-* - **Security**: Automatic security attributes for external links (noopener, noreferrer)
-* - **Accessibility**: Full ARIA support with proper labels and current page indication
-* - **Visual Feedback**: Hover effects, underline options, and active states
-*
-* ## Use Cases
-* - Navigation within applications (internal links)
-* - External links to other websites with security measures
-* - Button-styled links for call-to-action scenarios
-* - Subtle hoverable links for navigation menus
-* - Multi-language website navigation with automatic URL localization
-*
-* ## Security Features
-* External links automatically receive security attributes:
-* - `rel="noopener noreferrer nofollow"` - Prevents security vulnerabilities
-* - `target="_blank"` - Opens in new tab/window
-* - External link icon indication for user clarity
-*
-* ## Internationalization
-* When used with Intlayer, the component automatically:
-* - Localizes internal URLs based on the current or specified locale
-* - Sets appropriate `hrefLang` attributes for SEO
-* - Maintains proper URL structure for multi-language sites
-*
-* @component
-* @example
-* ```tsx
-* // Basic internal link
-* <Link href="/about" label="Go to about page">
-*   About Us
-* </Link>
-*
-* // External link with auto-detection
-* <Link href="https://example.com" label="Visit external site">
-*   External Site
-* </Link>
-*
-* // Button-styled link
-* <Link
-*   href="/signup"
-*   variant={LinkVariant.BUTTON}
-*   color={LinkColor.PRIMARY}
-*   label="Sign up for account"
-* >
-*   Get Started
-* </Link>
-*
-* // Localized link
-* <Link
-*   href="/products"
-*   locale="fr"
-*   label="Voir les produits"
-* >
-*   Produits
-* </Link>
-*
-* // Active navigation link
-* <Link
-*   href="/dashboard"
-*   isActive={true}
-*   variant={LinkVariant.HOVERABLE}
-*   label="Current page: Dashboard"
-* >
-*   Dashboard
-* </Link>
-* ```
-*
-* @param props - Link component props
-* @param props.children - Content to display inside the link
-* @param props.href - URL or path to navigate to
-* @param props.label - Accessible label describing the link's purpose
-* @param props.variant - Visual style variant
-* @param props.color - Color theme for the link
-* @param props.underlined - Underline visibility option
-* @param props.isExternalLink - Override external link detection
-* @param props.isActive - Whether this link represents the current page
-* @param props.locale - Locale for URL internationalization
-* @param props.className - Additional CSS classes
-* @returns Accessible and internationalized link component
+* ...
 */
 const Link = (props) => {
-	const { variant = LinkVariant.DEFAULT, color = LinkColor.PRIMARY, children, label, className, isActive, underlined, locale, isExternalLink: isExternalLinkProp, isPageSection: isPageSectionProp, href: hrefProp, ...otherProps } = props;
+	const { variant = LinkVariant.DEFAULT, color = LinkColor.PRIMARY, roundedSize, children, label, className, isActive, underlined, locale, size, isExternalLink: isExternalLinkProp, isPageSection: isPageSectionProp, href: hrefProp, ...otherProps } = props;
 	const isExternalLink = isExternalLinkProp ?? checkIsExternalLink(props);
 	const isPageSection = isPageSectionProp ?? hrefProp?.startsWith("#") ?? false;
 	const isChildrenString = typeof children === "string";
@@ -228,12 +256,14 @@ const Link = (props) => {
 		className: cn(linkVariants({
 			variant,
 			color,
+			roundedSize,
 			underlined,
+			size,
 			className
 		})),
 		...otherProps,
 		children: [
-			variant === "button" ? /* @__PURE__ */ jsx("span", { children }) : children,
+			children,
 			isExternalLink && isChildrenString && /* @__PURE__ */ jsx(ExternalLink, { className: "ml-2 inline-block size-4" }),
 			isPageSection && /* @__PURE__ */ jsx(MoveRight, { className: "ml-2 inline-block size-4" })
 		]
@@ -241,5 +271,5 @@ const Link = (props) => {
 };
 
 //#endregion
-export { Link, LinkColor, LinkUnderlined, LinkVariant, checkIsExternalLink, linkVariants };
+export { Link, LinkColor, LinkRoundedSize, LinkSize, LinkUnderlined, LinkVariant, checkIsExternalLink, linkVariants };
 //# sourceMappingURL=Link.mjs.map

package/dist/esm/components/Link/Link.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Link.mjs","names":["Link: FC<LinkProps>"],"sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import { getLocalizedUrl } from '@intlayer/core';\nimport type { LocalesValues } from '@intlayer/types';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ExternalLink, MoveRight } from 'lucide-react';\nimport type { AnchorHTMLAttributes, DetailedHTMLProps, FC } from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Visual style variants for Link component\n *\n * @enum {string}\n */\nexport enum LinkVariant {\n  /** Default underlined link with hover effects */\n  DEFAULT = 'default',\n  /** Link without visible underline or hover effects */\n  INVISIBLE_LINK = 'invisible-link',\n  /** Button-styled link with solid background */\n  BUTTON = 'button',\n  /** Button-styled link with outlined border */\n  BUTTON_OUTLINED = 'button-outlined',\n  /** Link with subtle hover background effect */\n  HOVERABLE = 'hoverable',\n}\n\n/**\n * Color theme variants for Link component\n *\n * @enum {string}\n */\nexport enum LinkColor {\n  /** Primary brand color */\n  PRIMARY = 'primary',\n  /** Secondary brand color */\n  SECONDARY = 'secondary',\n  /** Destructive/danger color for critical actions */\n  DESTRUCTIVE = 'destructive',\n  /** Neutral/muted color for less prominent links */\n  NEUTRAL = 'neutral',\n  /** Light color for dark backgrounds */\n  LIGHT = 'light',\n  /** Dark color for light backgrounds */\n  DARK = 'dark',\n  /** Default text color */\n  TEXT = 'text',\n  /** Inverse text color for opposite backgrounds */\n  TEXT_INVERSE = 'text-inverse',\n  /** Error/red color for error states */\n  ERROR = 'error',\n  /** Success/green color for positive actions */\n  SUCCESS = 'success',\n  /** Custom color - no default styling applied */\n  CUSTOM = 'custom',\n}\n\n/**\n * Underline style options for Link component\n *\n * @enum {string}\n */\nexport enum LinkUnderlined {\n  /** Default underline behavior based on variant */\n  DEFAULT = 'default',\n  /** Always show underline */\n  TRUE = 'true',\n  /** Never show underline */\n  FALSE = 'false',\n}\n\n/**\n * Class variance authority configuration for Link component styling\n * Defines the visual appearance based on variant, color, and underline options\n */\nexport const linkVariants = cva(\n  'gap-3 transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        [`${LinkVariant.DEFAULT}`]:\n          'h-auto justify-start border-inherit bg-current/0 px-1 underline-offset-4 hover:bg-current/0 hover:underline',\n        [`${LinkVariant.INVISIBLE_LINK}`]:\n          'h-auto justify-start border-inherit bg-current/0 px-1 underline-offset-4 hover:bg-current/0',\n        [`${LinkVariant.BUTTON}`]:\n          'flex min-h-8 items-center justify-center gap-2 whitespace-nowrap rounded-lg bg-current px-6 font-medium text-sm transition *:text-text-opposite focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 max-md:py-2',\n        [`${LinkVariant.BUTTON_OUTLINED}`]:\n          'flex min-h-8 items-center justify-center gap-2 whitespace-nowrap rounded-lg border-[1.5px] px-6 font-medium text-sm transition hover:bg-current/30 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 max-md:py-2',\n        [`${LinkVariant.HOVERABLE}`]:\n          'block rounded-lg border-none bg-current/0 transition hover:bg-current/20 aria-[current]:bg-current/5',\n      },\n      color: {\n        [`${LinkColor.PRIMARY}`]: 'text-primary',\n        [`${LinkColor.SECONDARY}`]: 'text-secondary',\n        [`${LinkColor.DESTRUCTIVE}`]: 'text-destructive',\n        [`${LinkColor.NEUTRAL}`]: 'text-neutral',\n        [`${LinkColor.LIGHT}`]: 'text-white',\n        [`${LinkColor.DARK}`]: 'text-neutral-800',\n        [`${LinkColor.TEXT}`]: 'text-text',\n        [`${LinkColor.TEXT_INVERSE}`]: 'text-text-opposite',\n        [`${LinkColor.ERROR}`]: 'text-error',\n        [`${LinkColor.SUCCESS}`]: 'text-success',\n        [`${LinkColor.CUSTOM}`]: '',\n      },\n      underlined: {\n        [LinkUnderlined.DEFAULT]: '',\n        [LinkUnderlined.TRUE]: 'underline',\n        [LinkUnderlined.FALSE]: 'no-underline',\n      },\n    },\n\n    defaultVariants: {\n      variant: LinkVariant.DEFAULT,\n      color: LinkColor.PRIMARY,\n      underlined: LinkUnderlined.DEFAULT,\n    },\n  }\n);\n\n/**\n * Props interface for the Link component\n *\n * @interface LinkProps\n * @extends {DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>}\n * @extends {VariantProps<typeof linkVariants>}\n */\nexport type LinkProps = DetailedHTMLProps<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  HTMLAnchorElement\n> &\n  VariantProps<typeof linkVariants> & {\n    /**\n     * Accessible label for screen readers (required)\n     * Provides context about what the link does or where it leads\n     * @example \"Navigate to home page\"\n     */\n    label: string;\n\n    /**\n     * Whether this link opens in a new tab/window\n     * When true, adds target=\"_blank\" and security attributes\n     * Auto-detected for URLs starting with http/https when undefined\n     * @default undefined (auto-detect based on href)\n     */\n    isExternalLink?: boolean;\n\n    /**\n     * If a link is a page section as '#id'\n     * @default false\n     */\n    isPageSection?: boolean;\n\n    /**\n     * Whether this link represents the current page/active state\n     * Adds aria-current=\"page\" for accessibility\n     * @default false\n     */\n    isActive?: boolean;\n\n    /**\n     * Locale for internationalized URLs\n     * When provided, URLs are automatically localized using Intlayer\n     * @example 'fr', 'es', 'en'\n     */\n    locale?: LocalesValues;\n  };\n\n/**\n * Utility function to determine if a link should be treated as external\n *\n * @param props - Link component props containing href and isExternalLink\n * @returns {boolean} True if the link should open externally\n *\n * @example\n * ```tsx\n * checkIsExternalLink({ href: 'https://example.com' }) // true\n * checkIsExternalLink({ href: '/internal-page' }) // false\n * checkIsExternalLink({ href: '/page', isExternalLink: true }) // true\n * ```\n */\nexport const checkIsExternalLink = ({\n  href,\n  isExternalLink: isExternalLinkProp,\n}: LinkProps): boolean => {\n  const isValidHref = typeof href === 'string' && href.trim() !== '';\n  const isExternalLink =\n    isExternalLinkProp === true ||\n    (typeof isExternalLinkProp === 'undefined' &&\n      isValidHref &&\n      /^https?:\\/\\//.test(href));\n\n  return isExternalLink;\n};\n\n/**\n * Link Component\n *\n * A versatile link component that handles both internal and external navigation\n * with comprehensive internationalization support and multiple visual variants.\n *\n * ## Key Features\n * - **Multiple Variants**: Default, invisible, button, outlined button, and hoverable styles\n * - **Color Themes**: Comprehensive color palette for different contexts and meanings\n * - **External Link Detection**: Automatic detection and handling of external URLs\n * - **Internationalization**: Built-in support for localized URLs via Intlayer\n * - **Security**: Automatic security attributes for external links (noopener, noreferrer)\n * - **Accessibility**: Full ARIA support with proper labels and current page indication\n * - **Visual Feedback**: Hover effects, underline options, and active states\n *\n * ## Use Cases\n * - Navigation within applications (internal links)\n * - External links to other websites with security measures\n * - Button-styled links for call-to-action scenarios\n * - Subtle hoverable links for navigation menus\n * - Multi-language website navigation with automatic URL localization\n *\n * ## Security Features\n * External links automatically receive security attributes:\n * - `rel=\"noopener noreferrer nofollow\"` - Prevents security vulnerabilities\n * - `target=\"_blank\"` - Opens in new tab/window\n * - External link icon indication for user clarity\n *\n * ## Internationalization\n * When used with Intlayer, the component automatically:\n * - Localizes internal URLs based on the current or specified locale\n * - Sets appropriate `hrefLang` attributes for SEO\n * - Maintains proper URL structure for multi-language sites\n *\n * @component\n * @example\n * ```tsx\n * // Basic internal link\n * <Link href=\"/about\" label=\"Go to about page\">\n *   About Us\n * </Link>\n *\n * // External link with auto-detection\n * <Link href=\"https://example.com\" label=\"Visit external site\">\n *   External Site\n * </Link>\n *\n * // Button-styled link\n * <Link\n *   href=\"/signup\"\n *   variant={LinkVariant.BUTTON}\n *   color={LinkColor.PRIMARY}\n *   label=\"Sign up for account\"\n * >\n *   Get Started\n * </Link>\n *\n * // Localized link\n * <Link\n *   href=\"/products\"\n *   locale=\"fr\"\n *   label=\"Voir les produits\"\n * >\n *   Produits\n * </Link>\n *\n * // Active navigation link\n * <Link\n *   href=\"/dashboard\"\n *   isActive={true}\n *   variant={LinkVariant.HOVERABLE}\n *   label=\"Current page: Dashboard\"\n * >\n *   Dashboard\n * </Link>\n * ```\n *\n * @param props - Link component props\n * @param props.children - Content to display inside the link\n * @param props.href - URL or path to navigate to\n * @param props.label - Accessible label describing the link's purpose\n * @param props.variant - Visual style variant\n * @param props.color - Color theme for the link\n * @param props.underlined - Underline visibility option\n * @param props.isExternalLink - Override external link detection\n * @param props.isActive - Whether this link represents the current page\n * @param props.locale - Locale for URL internationalization\n * @param props.className - Additional CSS classes\n * @returns Accessible and internationalized link component\n */\nexport const Link: FC<LinkProps> = (props) => {\n  const {\n    variant = LinkVariant.DEFAULT,\n    color = LinkColor.PRIMARY,\n    children,\n    label,\n    className,\n    isActive,\n    underlined,\n    locale,\n    isExternalLink: isExternalLinkProp,\n    isPageSection: isPageSectionProp,\n    href: hrefProp,\n    ...otherProps\n  } = props;\n\n  const isExternalLink = isExternalLinkProp ?? checkIsExternalLink(props);\n  const isPageSection = isPageSectionProp ?? hrefProp?.startsWith('#') ?? false;\n\n  const isChildrenString = typeof children === 'string';\n\n  const rel = isExternalLink ? 'noopener noreferrer nofollow' : undefined;\n\n  const target = isExternalLink ? '_blank' : '_self';\n\n  const href =\n    locale && hrefProp && !isExternalLink && !isPageSection\n      ? getLocalizedUrl(hrefProp, locale)\n      : hrefProp;\n\n  return (\n    <a\n      href={href}\n      aria-label={label}\n      rel={rel}\n      target={target}\n      aria-current={isActive ? 'page' : undefined}\n      className={cn(\n        linkVariants({\n          variant,\n          color,\n          underlined,\n          className,\n        })\n      )}\n      {...otherProps}\n    >\n      {variant === 'button' ? <span>{children}</span> : children}\n      {isExternalLink && isChildrenString && (\n        <ExternalLink className=\"ml-2 inline-block size-4\" />\n      )}\n      {isPageSection && <MoveRight className=\"ml-2 inline-block size-4\" />}\n    </a>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAYA,IAAY,sDAAL;;AAEL;;AAEA;;AAEA;;AAEA;;AAEA;;;;;;;;AAQF,IAAY,kDAAL;;AAEL;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;;;;;;;;AAQF,IAAY,4DAAL;;AAEL;;AAEA;;AAEA;;;;;;;AAOF,MAAa,eAAe,IAC1B,kGACA;CACE,UAAU;EACR,SAAS;IACN,GAAG,YAAY,YACd;IACD,GAAG,YAAY,mBACd;IACD,GAAG,YAAY,WACd;IACD,GAAG,YAAY,oBACd;IACD,GAAG,YAAY,cACd;GACH;EACD,OAAO;IACJ,GAAG,UAAU,YAAY;IACzB,GAAG,UAAU,cAAc;IAC3B,GAAG,UAAU,gBAAgB;IAC7B,GAAG,UAAU,YAAY;IACzB,GAAG,UAAU,UAAU;IACvB,GAAG,UAAU,SAAS;IACtB,GAAG,UAAU,SAAS;IACtB,GAAG,UAAU,iBAAiB;IAC9B,GAAG,UAAU,UAAU;IACvB,GAAG,UAAU,YAAY;IACzB,GAAG,UAAU,WAAW;GAC1B;EACD,YAAY;IACT,eAAe,UAAU;IACzB,eAAe,OAAO;IACtB,eAAe,QAAQ;GACzB;EACF;CAED,iBAAiB;EACf,SAAS,YAAY;EACrB,OAAO,UAAU;EACjB,YAAY,eAAe;EAC5B;CACF,CACF;;;;;;;;;;;;;;AA+DD,MAAa,uBAAuB,EAClC,MACA,gBAAgB,yBACQ;CACxB,MAAM,cAAc,OAAO,SAAS,YAAY,KAAK,MAAM,KAAK;AAOhE,QALE,uBAAuB,QACtB,OAAO,uBAAuB,eAC7B,eACA,eAAe,KAAK,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+F/B,MAAaA,QAAuB,UAAU;CAC5C,MAAM,EACJ,UAAU,YAAY,SACtB,QAAQ,UAAU,SAClB,UACA,OACA,WACA,UACA,YACA,QACA,gBAAgB,oBAChB,eAAe,mBACf,MAAM,UACN,GAAG,eACD;CAEJ,MAAM,iBAAiB,sBAAsB,oBAAoB,MAAM;CACvE,MAAM,gBAAgB,qBAAqB,UAAU,WAAW,IAAI,IAAI;CAExE,MAAM,mBAAmB,OAAO,aAAa;CAE7C,MAAM,MAAM,iBAAiB,iCAAiC;CAE9D,MAAM,SAAS,iBAAiB,WAAW;AAO3C,QACE,qBAAC;EACC,MANF,UAAU,YAAY,CAAC,kBAAkB,CAAC,gBACtC,gBAAgB,UAAU,OAAO,GACjC;EAKF,cAAY;EACP;EACG;EACR,gBAAc,WAAW,SAAS;EAClC,WAAW,GACT,aAAa;GACX;GACA;GACA;GACA;GACD,CAAC,CACH;EACD,GAAI;;GAEH,YAAY,WAAW,oBAAC,UAAM,WAAgB,GAAG;GACjD,kBAAkB,oBACjB,oBAAC,gBAAa,WAAU,6BAA6B;GAEtD,iBAAiB,oBAAC,aAAU,WAAU,6BAA6B;;GAClE"}
+{"version":3,"file":"Link.mjs","names":["Link: FC<LinkProps>"],"sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import { getLocalizedUrl } from '@intlayer/core';\nimport type { LocalesValues } from '@intlayer/types';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ExternalLink, MoveRight } from 'lucide-react';\nimport type { AnchorHTMLAttributes, DetailedHTMLProps, FC } from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Visual style variants for Link component\n *\n * @enum {string}\n */\nexport enum LinkVariant {\n  /** Default underlined link with hover effects */\n  DEFAULT = 'default',\n  /** Link without visible underline or hover effects */\n  INVISIBLE_LINK = 'invisible-link',\n  /** Button-styled link with solid background */\n  BUTTON = 'button',\n  /** Button-styled link with outlined border */\n  BUTTON_OUTLINED = 'button-outlined',\n  /** Link with subtle hover background effect */\n  HOVERABLE = 'hoverable',\n}\n\n/**\n * Color theme variants for Link component\n *\n * @enum {string}\n */\nexport enum LinkColor {\n  /** Primary brand color */\n  PRIMARY = 'primary',\n  /** Secondary brand color */\n  SECONDARY = 'secondary',\n  /** Destructive/danger color for critical actions */\n  DESTRUCTIVE = 'destructive',\n  /** Neutral/muted color for less prominent links */\n  NEUTRAL = 'neutral',\n  /** Light color for dark backgrounds */\n  LIGHT = 'light',\n  /** Dark color for light backgrounds */\n  DARK = 'dark',\n  /** Default text color */\n  TEXT = 'text',\n  /** Inverse text color for opposite backgrounds */\n  TEXT_INVERSE = 'text-inverse',\n  /** Error/red color for error states */\n  ERROR = 'error',\n  /** Success/green color for positive actions */\n  SUCCESS = 'success',\n  /** Custom color - no default styling applied */\n  CUSTOM = 'custom',\n}\n\n/** Available rounded corner sizes for the container */\nexport enum LinkRoundedSize {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  TWO_XL = '2xl',\n  THREE_XL = '3xl',\n  FULL = 'full',\n}\n\nexport enum LinkSize {\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  CUSTOM = 'custom',\n}\n\n/**\n * Underline style options for Link component\n *\n * @enum {string}\n */\nexport enum LinkUnderlined {\n  /** Default underline behavior based on variant */\n  DEFAULT = 'default',\n  /** Always show underline */\n  TRUE = 'true',\n  /** Never show underline */\n  FALSE = 'false',\n}\n\n/**\n * Class variance authority configuration for Link component styling\n * Defines the visual appearance based on variant, color, and underline options\n */\nexport const linkVariants = cva(\n  'gap-3 transition-all duration-300 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        [`${LinkVariant.DEFAULT}`]:\n          'h-auto justify-start border-inherit bg-current/0 px-1 underline-offset-4 hover:bg-current/0 hover:underline',\n        [`${LinkVariant.INVISIBLE_LINK}`]:\n          'h-auto justify-start border-inherit bg-current/0 px-1 underline-offset-4 hover:bg-current/0',\n\n        [`${LinkVariant.BUTTON}`]:\n          'relative flex cursor-pointer flex-row items-center justify-center gap-2 rounded-full bg-current text-center font-medium text-text ring-0 *:text-text-opposite hover:bg-current/90 hover:ring-5 aria-selected:ring-5',\n\n        [`${LinkVariant.BUTTON_OUTLINED}`]:\n          'relative flex cursor-pointer flex-row items-center justify-center gap-2 rounded-full border-[1.3px] border-current text-center font-medium text-text ring-0 *:text-text hover:bg-current/20 hover:ring-5 aria-selected:ring-5',\n\n        [`${LinkVariant.HOVERABLE}`]:\n          'block rounded-lg border-none bg-current/0 hover:bg-current/10 aria-[current]:bg-current/5',\n      },\n      roundedSize: {\n        [`${LinkRoundedSize.NONE}`]: 'rounded-none',\n        [`${LinkRoundedSize.SM}`]:\n          'rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl',\n        [`${LinkRoundedSize.MD}`]:\n          'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n        [`${LinkRoundedSize.LG}`]:\n          'rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl',\n        [`${LinkRoundedSize.XL}`]:\n          'rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl',\n        [`${LinkRoundedSize.TWO_XL}`]:\n          'rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]',\n        [`${LinkRoundedSize.THREE_XL}`]:\n          'rounded-[2.5rem] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[3rem]',\n        [`${LinkRoundedSize.FULL}`]: 'rounded-full',\n      },\n      color: {\n        [`${LinkColor.PRIMARY}`]: 'text-primary',\n        [`${LinkColor.SECONDARY}`]: 'text-secondary',\n        [`${LinkColor.DESTRUCTIVE}`]: 'text-destructive',\n        [`${LinkColor.NEUTRAL}`]: 'text-neutral',\n        [`${LinkColor.LIGHT}`]: 'text-white',\n        [`${LinkColor.DARK}`]: 'text-neutral-800',\n        [`${LinkColor.TEXT}`]: 'text-text',\n        [`${LinkColor.TEXT_INVERSE}`]: 'text-text-opposite',\n        [`${LinkColor.ERROR}`]: 'text-error',\n        [`${LinkColor.SUCCESS}`]: 'text-success',\n        [`${LinkColor.CUSTOM}`]: '',\n      },\n      size: {\n        [`${LinkSize.SM}`]: 'text-sm',\n        [`${LinkSize.MD}`]: 'text-base',\n        [`${LinkSize.LG}`]: 'text-lg',\n        [`${LinkSize.XL}`]: 'text-xl',\n        [`${LinkSize.CUSTOM}`]: '',\n      },\n      underlined: {\n        [LinkUnderlined.DEFAULT]: '',\n        [LinkUnderlined.TRUE]: 'underline',\n        [LinkUnderlined.FALSE]: 'no-underline',\n      },\n    },\n    // Compound variants handle height and padding\n    compoundVariants: [\n      // Min height and padding for button variants\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        size: LinkSize.SM,\n        class: 'min-h-7 px-3 max-md:py-1',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        size: LinkSize.MD,\n        class: 'min-h-8 px-6 max-md:py-2',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        size: LinkSize.LG,\n        class: 'min-h-10 px-8 max-md:py-3',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        size: LinkSize.XL,\n        class: 'min-h-11 px-10 max-md:py-4',\n      },\n      // Ring color variants for button (Chrome bug fix: ring-current/20 doesn't work properly)\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.PRIMARY,\n        class: 'ring-primary/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.SECONDARY,\n        class: 'ring-secondary/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.DESTRUCTIVE,\n        class: 'ring-destructive/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.NEUTRAL,\n        class: 'ring-neutral/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.LIGHT,\n        class: 'ring-white/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.DARK,\n        class: 'ring-neutral-800/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.TEXT,\n        class: 'ring-text/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.TEXT_INVERSE,\n        class: 'ring-text-opposite/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.ERROR,\n        class: 'ring-error/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.SUCCESS,\n        class: 'ring-success/20',\n      },\n    ],\n\n    defaultVariants: {\n      variant: LinkVariant.DEFAULT,\n      color: LinkColor.PRIMARY,\n      roundedSize: LinkRoundedSize.MD,\n      underlined: LinkUnderlined.DEFAULT,\n      size: LinkSize.MD,\n    },\n  }\n);\n\n/**\n * Props interface for the Link component\n *\n * @interface LinkProps\n * @extends {DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>}\n * @extends {VariantProps<typeof linkVariants>}\n */\nexport type LinkProps = DetailedHTMLProps<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  HTMLAnchorElement\n> &\n  VariantProps<typeof linkVariants> & {\n    /**\n     * Accessible label for screen readers (required)\n     * Provides context about what the link does or where it leads\n     * @example \"Navigate to home page\"\n     */\n    label: string;\n\n    /**\n     * Whether this link opens in a new tab/window\n     * When true, adds target=\"_blank\" and security attributes\n     * Auto-detected for URLs starting with http/https when undefined\n     * @default undefined (auto-detect based on href)\n     */\n    isExternalLink?: boolean;\n\n    /**\n     * If a link is a page section as '#id'\n     * @default false\n     */\n    isPageSection?: boolean;\n\n    /**\n     * Whether this link represents the current page/active state\n     * Adds aria-current=\"page\" for accessibility\n     * @default false\n     */\n    isActive?: boolean;\n\n    /**\n     * Locale for internationalized URLs\n     * When provided, URLs are automatically localized using Intlayer\n     * @example 'fr', 'es', 'en'\n     */\n    locale?: LocalesValues;\n  };\n\n/**\n * Utility function to determine if a link should be treated as external\n *\n * @param props - Link component props containing href and isExternalLink\n * @returns {boolean} True if the link should open externally\n *\n * @example\n * ```tsx\n * checkIsExternalLink({ href: '[https://example.com](https://example.com)' }) // true\n * checkIsExternalLink({ href: '/internal-page' }) // false\n * checkIsExternalLink({ href: '/page', isExternalLink: true }) // true\n * ```\n */\nexport const checkIsExternalLink = ({\n  href,\n  isExternalLink: isExternalLinkProp,\n}: LinkProps): boolean => {\n  const isValidHref = typeof href === 'string' && href.trim() !== '';\n  const isExternalLink =\n    isExternalLinkProp === true ||\n    (typeof isExternalLinkProp === 'undefined' &&\n      isValidHref &&\n      /^https?:\\/\\//.test(href));\n\n  return isExternalLink;\n};\n\n/**\n * Link Component\n *\n * A versatile link component that handles both internal and external navigation\n * with comprehensive internationalization support and multiple visual variants.\n * ...\n */\nexport const Link: FC<LinkProps> = (props) => {\n  const {\n    variant = LinkVariant.DEFAULT,\n    color = LinkColor.PRIMARY,\n    roundedSize,\n    children,\n    label,\n    className,\n    isActive,\n    underlined,\n    locale,\n    size,\n    isExternalLink: isExternalLinkProp,\n    isPageSection: isPageSectionProp,\n    href: hrefProp,\n    ...otherProps\n  } = props;\n\n  const isExternalLink = isExternalLinkProp ?? checkIsExternalLink(props);\n  const isPageSection = isPageSectionProp ?? hrefProp?.startsWith('#') ?? false;\n\n  const isChildrenString = typeof children === 'string';\n\n  const rel = isExternalLink ? 'noopener noreferrer nofollow' : undefined;\n\n  const target = isExternalLink ? '_blank' : '_self';\n\n  const href =\n    locale && hrefProp && !isExternalLink && !isPageSection\n      ? getLocalizedUrl(hrefProp, locale)\n      : hrefProp;\n\n  return (\n    <a\n      href={href}\n      aria-label={label}\n      rel={rel}\n      target={target}\n      aria-current={isActive ? 'page' : undefined}\n      className={cn(\n        linkVariants({\n          variant,\n          color,\n          roundedSize,\n          underlined,\n          size,\n          className,\n        })\n      )}\n      {...otherProps}\n    >\n      {children}\n\n      {isExternalLink && isChildrenString && (\n        <ExternalLink className=\"ml-2 inline-block size-4\" />\n      )}\n      {isPageSection && <MoveRight className=\"ml-2 inline-block size-4\" />}\n    </a>\n  );\n};\n"],"mappings":"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"}

package/dist/esm/components/Link/index.mjs

@@ -1,3 +1,3 @@
-import { Link, LinkColor, LinkUnderlined, LinkVariant, checkIsExternalLink, linkVariants } from "./Link.mjs";
+import { Link, LinkColor, LinkRoundedSize, LinkSize, LinkUnderlined, LinkVariant, checkIsExternalLink, linkVariants } from "./Link.mjs";
 
-export { Link, LinkColor, LinkUnderlined, LinkVariant, checkIsExternalLink, linkVariants };
+export { Link, LinkColor, LinkRoundedSize, LinkSize, LinkUnderlined, LinkVariant, checkIsExternalLink, linkVariants };

package/dist/esm/components/Navbar/DesktopNavbar.mjs

@@ -80,7 +80,7 @@ const DesktopNavbar = ({ logo, sections, rightItems, selectedChoice }) => /* @__
 		logo,
 		/* @__PURE__ */ jsx(TabSelector, {
 			selectedChoice,
-			className: "ml-[2vw] gap-3 overflow-x-auto text-neutral tracking-wide lg:ml-[5vw] lg:gap-3 xl:ml-[10vw] xl:gap-6",
+			className: "ml-[2vw] h-auto gap-3 overflow-x-auto text-neutral tracking-wide lg:ml-[5vw] lg:gap-3 xl:ml-[10vw] xl:gap-6",
 			tabs: sections,
 			hoverable: true,
 			color: TabSelectorColor.TEXT