@intlayer/design-system 6.1.5 → 6.1.6-canary.0

package/dist/components/KeyboardScreenAdapter/index.d.ts

@@ -1,3 +1,103 @@
 import { FC, HTMLAttributes, PropsWithChildren } from 'react';
+/**
+ * KeyboardScreenAdapter Component
+ *
+ * A smart wrapper component that automatically adapts the viewport height
+ * when virtual keyboards appear on mobile devices. This prevents content
+ * from being hidden behind the keyboard and ensures optimal user experience
+ * across all devices and orientations.
+ *
+ * @component
+ * @example
+ * Basic usage:
+ * ```tsx
+ * <KeyboardScreenAdapter>
+ *   <div>Your app content here</div>
+ * </KeyboardScreenAdapter>
+ * ```
+ *
+ * @example
+ * With custom styling:
+ * ```tsx
+ * <KeyboardScreenAdapter className="bg-gray-100 p-4">
+ *   <form>
+ *     <input type="text" placeholder="Enter your name" />
+ *     <input type="email" placeholder="Enter your email" />
+ *     <button type="submit">Submit</button>
+ *   </form>
+ * </KeyboardScreenAdapter>
+ * ```
+ *
+ * @example
+ * Mobile-first responsive design:
+ * ```tsx
+ * <KeyboardScreenAdapter className="md:min-h-screen">
+ *   <div className="flex flex-col h-full">
+ *     <header>Navigation</header>
+ *     <main className="flex-1 overflow-auto">
+ *       <input type="search" placeholder="Search..." />
+ *       Content that needs keyboard adaptation
+ *     </main>
+ *   </div>
+ * </KeyboardScreenAdapter>
+ * ```
+ *
+ * Features:
+ * - Automatic viewport height detection and adjustment
+ * - Smooth transitions when keyboard shows/hides
+ * - Works with both iOS and Android virtual keyboards
+ * - Responsive design that adapts to device orientation changes
+ * - Maintains scroll behavior and overflow handling
+ * - Lightweight with minimal performance impact
+ * - Client-side only (Next.js compatible with 'use client')
+ *
+ * How it works:
+ * 1. Uses the useKeyboardDetector hook to monitor window height changes
+ * 2. Detects when virtual keyboard appears (window height decreases)
+ * 3. Automatically adjusts the container's max-height to fit visible area
+ * 4. Provides smooth transitions for better user experience
+ * 5. Restores original height when keyboard disappears
+ *
+ * Use cases:
+ * - Mobile web applications with forms
+ * - Chat interfaces and messaging apps
+ * - Search interfaces and input-heavy UIs
+ * - Progressive Web Apps (PWAs)
+ * - Any mobile-first application requiring keyboard interaction
+ *
+ * Browser compatibility:
+ * - iOS Safari (all versions)
+ * - Chrome Mobile (Android)
+ * - Samsung Internet
+ * - Firefox Mobile
+ * - Other mobile browsers with virtual keyboards
+ *
+ * Performance considerations:
+ * - Uses ResizeObserver for efficient window monitoring
+ * - Minimal re-renders through optimized state management
+ * - CSS transitions handled by GPU acceleration
+ * - No layout thrashing during keyboard transitions
+ *
+ * Accessibility:
+ * - Maintains focus management during transitions
+ * - Preserves scroll position and user context
+ * - Compatible with screen readers and assistive technologies
+ * - Supports keyboard navigation patterns
+ *
+ * @param props - Component props extending standard div attributes
+ * @param props.children - Content to render within the adaptive container
+ * @param props.className - Additional CSS classes for the container
+ * @param props.style - Inline styles (note: maxHeight may be overridden)
+ * @param props.id - Unique identifier for the container
+ * @param props.role - ARIA role for accessibility
+ * @param props.tabIndex - Tab index for focus management
+ * @param props.onScroll - Scroll event handler
+ * @param props.onTouchStart - Touch start event handler
+ * @param props.onTouchMove - Touch move event handler
+ * @param props.onTouchEnd - Touch end event handler
+ * @param props...rest - All other standard HTML div attributes
+ *
+ * @returns A responsive container that adapts to keyboard visibility
+ */
 export declare const KeyboardScreenAdapter: FC<PropsWithChildren<HTMLAttributes<HTMLDivElement>>>;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/KeyboardScreenAdapter/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/KeyboardScreenAdapter/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAInE,eAAO,MAAM,qBAAqB,EAAE,EAAE,CACpC,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAkBlD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/KeyboardScreenAdapter/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAInE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmGG;AACH,eAAO,MAAM,qBAAqB,EAAE,EAAE,CACpC,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAkBlD,CAAC"}

package/dist/components/KeyboardScreenAdapter/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/KeyboardScreenAdapter/index.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, HTMLAttributes, PropsWithChildren } from 'react';\nimport { useKeyboardDetector } from '../../hooks/useKeyboardDetector';\nimport { cn } from '../../utils/cn';\n\nexport const KeyboardScreenAdapter: FC<\n  PropsWithChildren<HTMLAttributes<HTMLDivElement>>\n> = ({ children, className, ...props }) => {\n  const { windowHeight } = useKeyboardDetector();\n\n  return (\n    <div\n      className={cn(\n        'h-screen w-screen overflow-auto scroll-smooth transition',\n        className\n      )}\n      style={{\n        maxHeight: windowHeight ? `${windowHeight}px` : undefined,\n      }}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AAMO,MAAM,wBAET,CAAC,EAAE,UAAU,WAAW,GAAG,YAAY;AACzC,QAAM,EAAE,aAAA,IAAiB,oBAAA;AAEzB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,QACL,WAAW,eAAe,GAAG,YAAY,OAAO;AAAA,MAAA;AAAA,MAEjD,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/KeyboardScreenAdapter/index.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, HTMLAttributes, PropsWithChildren } from 'react';\nimport { useKeyboardDetector } from '../../hooks/useKeyboardDetector';\nimport { cn } from '../../utils/cn';\n\n/**\n * KeyboardScreenAdapter Component\n *\n * A smart wrapper component that automatically adapts the viewport height\n * when virtual keyboards appear on mobile devices. This prevents content\n * from being hidden behind the keyboard and ensures optimal user experience\n * across all devices and orientations.\n *\n * @component\n * @example\n * Basic usage:\n * ```tsx\n * <KeyboardScreenAdapter>\n *   <div>Your app content here</div>\n * </KeyboardScreenAdapter>\n * ```\n *\n * @example\n * With custom styling:\n * ```tsx\n * <KeyboardScreenAdapter className=\"bg-gray-100 p-4\">\n *   <form>\n *     <input type=\"text\" placeholder=\"Enter your name\" />\n *     <input type=\"email\" placeholder=\"Enter your email\" />\n *     <button type=\"submit\">Submit</button>\n *   </form>\n * </KeyboardScreenAdapter>\n * ```\n *\n * @example\n * Mobile-first responsive design:\n * ```tsx\n * <KeyboardScreenAdapter className=\"md:min-h-screen\">\n *   <div className=\"flex flex-col h-full\">\n *     <header>Navigation</header>\n *     <main className=\"flex-1 overflow-auto\">\n *       <input type=\"search\" placeholder=\"Search...\" />\n *       Content that needs keyboard adaptation\n *     </main>\n *   </div>\n * </KeyboardScreenAdapter>\n * ```\n *\n * Features:\n * - Automatic viewport height detection and adjustment\n * - Smooth transitions when keyboard shows/hides\n * - Works with both iOS and Android virtual keyboards\n * - Responsive design that adapts to device orientation changes\n * - Maintains scroll behavior and overflow handling\n * - Lightweight with minimal performance impact\n * - Client-side only (Next.js compatible with 'use client')\n *\n * How it works:\n * 1. Uses the useKeyboardDetector hook to monitor window height changes\n * 2. Detects when virtual keyboard appears (window height decreases)\n * 3. Automatically adjusts the container's max-height to fit visible area\n * 4. Provides smooth transitions for better user experience\n * 5. Restores original height when keyboard disappears\n *\n * Use cases:\n * - Mobile web applications with forms\n * - Chat interfaces and messaging apps\n * - Search interfaces and input-heavy UIs\n * - Progressive Web Apps (PWAs)\n * - Any mobile-first application requiring keyboard interaction\n *\n * Browser compatibility:\n * - iOS Safari (all versions)\n * - Chrome Mobile (Android)\n * - Samsung Internet\n * - Firefox Mobile\n * - Other mobile browsers with virtual keyboards\n *\n * Performance considerations:\n * - Uses ResizeObserver for efficient window monitoring\n * - Minimal re-renders through optimized state management\n * - CSS transitions handled by GPU acceleration\n * - No layout thrashing during keyboard transitions\n *\n * Accessibility:\n * - Maintains focus management during transitions\n * - Preserves scroll position and user context\n * - Compatible with screen readers and assistive technologies\n * - Supports keyboard navigation patterns\n *\n * @param props - Component props extending standard div attributes\n * @param props.children - Content to render within the adaptive container\n * @param props.className - Additional CSS classes for the container\n * @param props.style - Inline styles (note: maxHeight may be overridden)\n * @param props.id - Unique identifier for the container\n * @param props.role - ARIA role for accessibility\n * @param props.tabIndex - Tab index for focus management\n * @param props.onScroll - Scroll event handler\n * @param props.onTouchStart - Touch start event handler\n * @param props.onTouchMove - Touch move event handler\n * @param props.onTouchEnd - Touch end event handler\n * @param props...rest - All other standard HTML div attributes\n *\n * @returns A responsive container that adapts to keyboard visibility\n */\nexport const KeyboardScreenAdapter: FC<\n  PropsWithChildren<HTMLAttributes<HTMLDivElement>>\n> = ({ children, className, ...props }) => {\n  const { windowHeight } = useKeyboardDetector();\n\n  return (\n    <div\n      className={cn(\n        'h-screen w-screen overflow-auto scroll-smooth transition',\n        className\n      )}\n      style={{\n        maxHeight: windowHeight ? `${windowHeight}px` : undefined,\n      }}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AA0GO,MAAM,wBAET,CAAC,EAAE,UAAU,WAAW,GAAG,YAAY;AACzC,QAAM,EAAE,aAAA,IAAiB,oBAAA;AAEzB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,QACL,WAAW,eAAe,GAAG,YAAY,OAAO;AAAA,MAAA;AAAA,MAEjD,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/Label/index.cjs

@@ -1,15 +1,37 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const utils_cn = require("../../utils/cn.cjs");
 const Label = ({
   htmlFor,
+  required = false,
+  disabled = false,
+  className,
+  children,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(
+}) => /* @__PURE__ */ jsxRuntime.jsxs(
   "label",
   {
-    className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+    className: utils_cn.cn(
+      "text-sm font-medium leading-none select-none",
+      "peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      disabled && "cursor-not-allowed opacity-70 text-muted-foreground",
+      className
+    ),
     htmlFor,
-    ...props
+    ...props,
+    children: [
+      children,
+      required && /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: "text-destructive ml-1",
+          "aria-label": "required",
+          title: "This field is required",
+          children: "*"
+        }
+      )
+    ]
   }
 );
 exports.Label = Label;

package/dist/components/Label/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Label/index.tsx"],"sourcesContent":["import { type FC, type LabelHTMLAttributes } from 'react';\n\nexport const Label: FC<LabelHTMLAttributes<HTMLLabelElement>> = ({\n  htmlFor,\n  ...props\n}) => (\n  <label\n    className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n    htmlFor={htmlFor}\n    {...props}\n  />\n);\n"],"names":["jsx"],"mappings":";;;AAEO,MAAM,QAAmD,CAAC;AAAA,EAC/D;AAAA,EACA,GAAG;AACL,MACEA,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV;AAAA,IACC,GAAG;AAAA,EAAA;AACN;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Label/index.tsx"],"sourcesContent":["import { type FC, type LabelHTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Props for the Label component\n */\nexport interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {\n  /**\n   * The ID of the form control this label is associated with.\n   * This creates the accessible relationship between the label and its control.\n   * @example \"email-input\"\n   * @example \"password-field\"\n   */\n  htmlFor?: string;\n\n  /**\n   * Whether the associated form control is required.\n   * Adds visual indicator and updates ARIA attributes.\n   * @default false\n   */\n  required?: boolean;\n\n  /**\n   * Whether the associated form control is disabled.\n   * Updates styling to indicate disabled state.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Additional CSS classes for custom styling\n   * @example \"text-red-600 font-bold\"\n   */\n  className?: string;\n}\n\n/**\n * Label Component\n *\n * A form label component that provides accessible labeling for form controls.\n * Establishes proper relationships between labels and their associated form elements\n * with visual indicators for required and disabled states.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Label htmlFor=\"email\">Email Address</Label>\n * <input id=\"email\" type=\"email\" />\n *\n * // Required field\n * <Label htmlFor=\"password\" required>Password</Label>\n * <input id=\"password\" type=\"password\" required />\n *\n * // Disabled field\n * <Label htmlFor=\"disabled-field\" disabled>Disabled Field</Label>\n * <input id=\"disabled-field\" type=\"text\" disabled />\n *\n * // With custom styling\n * <Label htmlFor=\"custom\" className=\"text-blue-600 font-semibold\">\n *   Custom Styled Label\n * </Label>\n * ```\n *\n * @component\n * @accessibility\n * - Uses semantic HTML <label> element\n * - Properly associates with form controls via htmlFor/id relationship\n * - Supports click-to-focus behavior automatically\n * - Visual indicators for required and disabled states\n * - Screen reader compatible with proper ARIA relationships\n */\nexport const Label: FC<LabelProps> = ({\n  htmlFor,\n  required = false,\n  disabled = false,\n  className,\n  children,\n  ...props\n}) => (\n  <label\n    className={cn(\n      'text-sm font-medium leading-none select-none',\n      'peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n      disabled && 'cursor-not-allowed opacity-70 text-muted-foreground',\n      className\n    )}\n    htmlFor={htmlFor}\n    {...props}\n  >\n    {children}\n    {required && (\n      <span\n        className=\"text-destructive ml-1\"\n        aria-label=\"required\"\n        title=\"This field is required\"\n      >\n        *\n      </span>\n    )}\n  </label>\n);\n"],"names":["jsxs","cn","jsx"],"mappings":";;;;AAuEO,MAAM,QAAwB,CAAC;AAAA,EACpC;AAAA,EACA,WAAW;AAAA,EACX,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAAA;AAAAA,MACT;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,IAAA;AAAA,IAEF;AAAA,IACC,GAAG;AAAA,IAEH,UAAA;AAAA,MAAA;AAAA,MACA,YACCC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,cAAW;AAAA,UACX,OAAM;AAAA,UACP,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAED;AAAA,EAAA;AAEJ;;"}

package/dist/components/Label/index.d.ts

@@ -1,3 +1,67 @@
 import { FC, LabelHTMLAttributes } from 'react';
-export declare const Label: FC<LabelHTMLAttributes<HTMLLabelElement>>;
+/**
+ * Props for the Label component
+ */
+export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    /**
+     * The ID of the form control this label is associated with.
+     * This creates the accessible relationship between the label and its control.
+     * @example "email-input"
+     * @example "password-field"
+     */
+    htmlFor?: string;
+    /**
+     * Whether the associated form control is required.
+     * Adds visual indicator and updates ARIA attributes.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Whether the associated form control is disabled.
+     * Updates styling to indicate disabled state.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional CSS classes for custom styling
+     * @example "text-red-600 font-bold"
+     */
+    className?: string;
+}
+/**
+ * Label Component
+ *
+ * A form label component that provides accessible labeling for form controls.
+ * Establishes proper relationships between labels and their associated form elements
+ * with visual indicators for required and disabled states.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Label htmlFor="email">Email Address</Label>
+ * <input id="email" type="email" />
+ *
+ * // Required field
+ * <Label htmlFor="password" required>Password</Label>
+ * <input id="password" type="password" required />
+ *
+ * // Disabled field
+ * <Label htmlFor="disabled-field" disabled>Disabled Field</Label>
+ * <input id="disabled-field" type="text" disabled />
+ *
+ * // With custom styling
+ * <Label htmlFor="custom" className="text-blue-600 font-semibold">
+ *   Custom Styled Label
+ * </Label>
+ * ```
+ *
+ * @component
+ * @accessibility
+ * - Uses semantic HTML <label> element
+ * - Properly associates with form controls via htmlFor/id relationship
+ * - Supports click-to-focus behavior automatically
+ * - Visual indicators for required and disabled states
+ * - Screen reader compatible with proper ARIA relationships
+ */
+export declare const Label: FC<LabelProps>;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Label/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Label/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAE1D,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAS3D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Label/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAG1D;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IACvE;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CA6BhC,CAAC"}

package/dist/components/Label/index.mjs

@@ -1,13 +1,35 @@
-import { jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.mjs";
 const Label = ({
   htmlFor,
+  required = false,
+  disabled = false,
+  className,
+  children,
   ...props
-}) => /* @__PURE__ */ jsx(
+}) => /* @__PURE__ */ jsxs(
   "label",
   {
-    className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+    className: cn(
+      "text-sm font-medium leading-none select-none",
+      "peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      disabled && "cursor-not-allowed opacity-70 text-muted-foreground",
+      className
+    ),
     htmlFor,
-    ...props
+    ...props,
+    children: [
+      children,
+      required && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "text-destructive ml-1",
+          "aria-label": "required",
+          title: "This field is required",
+          children: "*"
+        }
+      )
+    ]
   }
 );
 export {

package/dist/components/Label/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/Label/index.tsx"],"sourcesContent":["import { type FC, type LabelHTMLAttributes } from 'react';\n\nexport const Label: FC<LabelHTMLAttributes<HTMLLabelElement>> = ({\n  htmlFor,\n  ...props\n}) => (\n  <label\n    className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n    htmlFor={htmlFor}\n    {...props}\n  />\n);\n"],"names":[],"mappings":";AAEO,MAAM,QAAmD,CAAC;AAAA,EAC/D;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV;AAAA,IACC,GAAG;AAAA,EAAA;AACN;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/Label/index.tsx"],"sourcesContent":["import { type FC, type LabelHTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Props for the Label component\n */\nexport interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {\n  /**\n   * The ID of the form control this label is associated with.\n   * This creates the accessible relationship between the label and its control.\n   * @example \"email-input\"\n   * @example \"password-field\"\n   */\n  htmlFor?: string;\n\n  /**\n   * Whether the associated form control is required.\n   * Adds visual indicator and updates ARIA attributes.\n   * @default false\n   */\n  required?: boolean;\n\n  /**\n   * Whether the associated form control is disabled.\n   * Updates styling to indicate disabled state.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Additional CSS classes for custom styling\n   * @example \"text-red-600 font-bold\"\n   */\n  className?: string;\n}\n\n/**\n * Label Component\n *\n * A form label component that provides accessible labeling for form controls.\n * Establishes proper relationships between labels and their associated form elements\n * with visual indicators for required and disabled states.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Label htmlFor=\"email\">Email Address</Label>\n * <input id=\"email\" type=\"email\" />\n *\n * // Required field\n * <Label htmlFor=\"password\" required>Password</Label>\n * <input id=\"password\" type=\"password\" required />\n *\n * // Disabled field\n * <Label htmlFor=\"disabled-field\" disabled>Disabled Field</Label>\n * <input id=\"disabled-field\" type=\"text\" disabled />\n *\n * // With custom styling\n * <Label htmlFor=\"custom\" className=\"text-blue-600 font-semibold\">\n *   Custom Styled Label\n * </Label>\n * ```\n *\n * @component\n * @accessibility\n * - Uses semantic HTML <label> element\n * - Properly associates with form controls via htmlFor/id relationship\n * - Supports click-to-focus behavior automatically\n * - Visual indicators for required and disabled states\n * - Screen reader compatible with proper ARIA relationships\n */\nexport const Label: FC<LabelProps> = ({\n  htmlFor,\n  required = false,\n  disabled = false,\n  className,\n  children,\n  ...props\n}) => (\n  <label\n    className={cn(\n      'text-sm font-medium leading-none select-none',\n      'peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n      disabled && 'cursor-not-allowed opacity-70 text-muted-foreground',\n      className\n    )}\n    htmlFor={htmlFor}\n    {...props}\n  >\n    {children}\n    {required && (\n      <span\n        className=\"text-destructive ml-1\"\n        aria-label=\"required\"\n        title=\"This field is required\"\n      >\n        *\n      </span>\n    )}\n  </label>\n);\n"],"names":[],"mappings":";;AAuEO,MAAM,QAAwB,CAAC;AAAA,EACpC;AAAA,EACA,WAAW;AAAA,EACX,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,IAAA;AAAA,IAEF;AAAA,IACC,GAAG;AAAA,IAEH,UAAA;AAAA,MAAA;AAAA,MACA,YACC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,cAAW;AAAA,UACX,OAAM;AAAA,UACP,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAED;AAAA,EAAA;AAEJ;"}

package/dist/components/Link/Link.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Link.cjs","sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import configuration from '@intlayer/config/built';\nimport type { LocalesValues } from '@intlayer/config/client';\nimport { getLocalizedUrl } from '@intlayer/core';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ExternalLink } from 'lucide-react';\nimport {\n  type AnchorHTMLAttributes,\n  type DetailedHTMLProps,\n  type FC,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nexport enum LinkVariant {\n  DEFAULT = 'default',\n  INVISIBLE_LINK = 'invisible-link',\n  BUTTON = 'button',\n  BUTTON_OUTLINED = 'button-outlined',\n  HOVERABLE = 'hoverable',\n}\n\nexport enum LinkColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  DARK = 'dark',\n  TEXT = 'text',\n  TEXT_INVERSE = 'text-inverse',\n  ERROR = 'error',\n  SUCCESS = 'success',\n  CUSTOM = 'custom',\n}\n\nexport enum LinkUnderlined {\n  DEFAULT = 'default',\n  TRUE = 'true',\n  FALSE = 'false',\n}\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          'rounded-lg bg-current *:text-text-opposite min-h-8 px-6 max-md:py-2 text-sm flex items-center justify-center gap-2 whitespace-nowrap font-medium transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',\n        [`${LinkVariant.BUTTON_OUTLINED}`]:\n          'rounded-lg border-[1.5px] hover:bg-current/30 min-h-8 px-6 max-md:py-2 text-sm flex items-center justify-center gap-2 whitespace-nowrap font-medium transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',\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\nexport type LinkProps = DetailedHTMLProps<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  HTMLAnchorElement\n> &\n  VariantProps<typeof linkVariants> & {\n    label: string;\n    isExternalLink?: boolean;\n    isActive?: boolean;\n    locale?: LocalesValues;\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\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    href: hrefProp,\n    ...otherProps\n  } = props;\n  const { internationalization } = configuration;\n\n  const isExternalLink = checkIsExternalLink(props);\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 hrefLang = locale\n    ? locale === internationalization.defaultLocale\n      ? 'x-default'\n      : locale\n    : undefined;\n\n  const href =\n    locale && hrefProp && !isExternalLink\n      ? getLocalizedUrl(hrefProp, locale)\n      : hrefProp;\n\n  return (\n    <a\n      href={href}\n      hrefLang={hrefLang}\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    </a>\n  );\n};\n"],"names":["LinkVariant","LinkColor","LinkUnderlined","cva","getLocalizedUrl","jsxs","cn","jsx","ExternalLink"],"mappings":"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"}
+{"version":3,"file":"Link.cjs","sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import configuration from '@intlayer/config/built';\nimport type { LocalesValues } from '@intlayer/config/client';\nimport { getLocalizedUrl } from '@intlayer/core';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ExternalLink } from 'lucide-react';\nimport {\n  type AnchorHTMLAttributes,\n  type DetailedHTMLProps,\n  type FC,\n} 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          'rounded-lg bg-current *:text-text-opposite min-h-8 px-6 max-md:py-2 text-sm flex items-center justify-center gap-2 whitespace-nowrap font-medium transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',\n        [`${LinkVariant.BUTTON_OUTLINED}`]:\n          'rounded-lg border-[1.5px] hover:bg-current/30 min-h-8 px-6 max-md:py-2 text-sm flex items-center justify-center gap-2 whitespace-nowrap font-medium transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',\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     * 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    href: hrefProp,\n    ...otherProps\n  } = props;\n  const { internationalization } = configuration;\n\n  const isExternalLink = checkIsExternalLink(props);\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 hrefLang = locale\n    ? locale === internationalization.defaultLocale\n      ? 'x-default'\n      : locale\n    : undefined;\n\n  const href =\n    locale && hrefProp && !isExternalLink\n      ? getLocalizedUrl(hrefProp, locale)\n      : hrefProp;\n\n  return (\n    <a\n      href={href}\n      hrefLang={hrefLang}\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    </a>\n  );\n};\n"],"names":["LinkVariant","LinkColor","LinkUnderlined","cva","getLocalizedUrl","jsxs","cn","jsx","ExternalLink"],"mappings":"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"}

package/dist/components/Link/Link.d.ts

@@ -1,42 +1,211 @@
 import { LocalesValues } from '@intlayer/config/client';
 import { VariantProps } from 'class-variance-authority';
 import { AnchorHTMLAttributes, DetailedHTMLProps, FC } from 'react';
+/**
+ * Visual style variants for Link component
+ *
+ * @enum {string}
+ */
 export declare enum LinkVariant {
+    /** Default underlined link with hover effects */
     DEFAULT = "default",
+    /** Link without visible underline or hover effects */
     INVISIBLE_LINK = "invisible-link",
+    /** Button-styled link with solid background */
     BUTTON = "button",
+    /** Button-styled link with outlined border */
     BUTTON_OUTLINED = "button-outlined",
+    /** Link with subtle hover background effect */
     HOVERABLE = "hoverable"
 }
+/**
+ * Color theme variants for Link component
+ *
+ * @enum {string}
+ */
 export declare enum LinkColor {
+    /** Primary brand color */
     PRIMARY = "primary",
+    /** Secondary brand color */
     SECONDARY = "secondary",
+    /** Destructive/danger color for critical actions */
     DESTRUCTIVE = "destructive",
+    /** Neutral/muted color for less prominent links */
     NEUTRAL = "neutral",
+    /** Light color for dark backgrounds */
     LIGHT = "light",
+    /** Dark color for light backgrounds */
     DARK = "dark",
+    /** Default text color */
     TEXT = "text",
+    /** Inverse text color for opposite backgrounds */
     TEXT_INVERSE = "text-inverse",
+    /** Error/red color for error states */
     ERROR = "error",
+    /** Success/green color for positive actions */
     SUCCESS = "success",
+    /** Custom color - no default styling applied */
     CUSTOM = "custom"
 }
+/**
+ * Underline style options for Link component
+ *
+ * @enum {string}
+ */
 export declare enum LinkUnderlined {
+    /** Default underline behavior based on variant */
     DEFAULT = "default",
+    /** Always show underline */
     TRUE = "true",
+    /** Never show underline */
     FALSE = "false"
 }
+/**
+ * Class variance authority configuration for Link component styling
+ * Defines the visual appearance based on variant, color, and underline options
+ */
 export declare const linkVariants: (props?: ({
     variant?: "button" | "default" | "invisible-link" | "hoverable" | "button-outlined" | null | undefined;
     color?: "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "text-inverse" | "error" | "success" | "custom" | null | undefined;
     underlined?: boolean | LinkUnderlined.DEFAULT | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Props interface for the Link component
+ *
+ * @interface LinkProps
+ * @extends {DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>}
+ * @extends {VariantProps<typeof linkVariants>}
+ */
 export type LinkProps = DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> & VariantProps<typeof linkVariants> & {
+    /**
+     * Accessible label for screen readers (required)
+     * Provides context about what the link does or where it leads
+     * @example "Navigate to home page"
+     */
     label: string;
+    /**
+     * Whether this link opens in a new tab/window
+     * When true, adds target="_blank" and security attributes
+     * Auto-detected for URLs starting with http/https when undefined
+     * @default undefined (auto-detect based on href)
+     */
     isExternalLink?: boolean;
+    /**
+     * Whether this link represents the current page/active state
+     * Adds aria-current="page" for accessibility
+     * @default false
+     */
     isActive?: boolean;
+    /**
+     * Locale for internationalized URLs
+     * When provided, URLs are automatically localized using Intlayer
+     * @example 'fr', 'es', 'en'
+     */
     locale?: LocalesValues;
 };
+/**
+ * Utility function to determine if a link should be treated as external
+ *
+ * @param props - Link component props containing href and isExternalLink
+ * @returns {boolean} True if the link should open externally
+ *
+ * @example
+ * ```tsx
+ * checkIsExternalLink({ href: 'https://example.com' }) // true
+ * checkIsExternalLink({ href: '/internal-page' }) // false
+ * checkIsExternalLink({ href: '/page', isExternalLink: true }) // true
+ * ```
+ */
 export declare const checkIsExternalLink: ({ href, isExternalLink: isExternalLinkProp, }: LinkProps) => boolean;
+/**
+ * Link Component
+ *
+ * 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
+ */
 export declare const Link: FC<LinkProps>;
 //# sourceMappingURL=Link.d.ts.map

package/dist/components/Link/Link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,EACtB,KAAK,EAAE,EACR,MAAM,OAAO,CAAC;AAGf,oBAAY,WAAW;IACrB,OAAO,YAAY;IACnB,cAAc,mBAAmB;IACjC,MAAM,WAAW;IACjB,eAAe,oBAAoB;IACnC,SAAS,cAAc;CACxB;AAED,oBAAY,SAAS;IACnB,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,WAAW,gBAAgB;IAC3B,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,IAAI,SAAS;IACb,IAAI,SAAS;IACb,YAAY,iBAAiB;IAC7B,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,MAAM,WAAW;CAClB;AAED,oBAAY,cAAc;IACxB,OAAO,YAAY;IACnB,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AAED,eAAO,MAAM,YAAY;;;;8EA0CxB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,iBAAiB,CACvC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,iBAAiB,CAClB,GACC,YAAY,CAAC,OAAO,YAAY,CAAC,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB,CAAC;AAEJ,eAAO,MAAM,mBAAmB,GAAI,+CAGjC,SAAS,KAAG,OASd,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CA0D9B,CAAC"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,EACtB,KAAK,EAAE,EACR,MAAM,OAAO,CAAC;AAGf;;;;GAIG;AACH,oBAAY,WAAW;IACrB,iDAAiD;IACjD,OAAO,YAAY;IACnB,sDAAsD;IACtD,cAAc,mBAAmB;IACjC,+CAA+C;IAC/C,MAAM,WAAW;IACjB,8CAA8C;IAC9C,eAAe,oBAAoB;IACnC,+CAA+C;IAC/C,SAAS,cAAc;CACxB;AAED;;;;GAIG;AACH,oBAAY,SAAS;IACnB,0BAA0B;IAC1B,OAAO,YAAY;IACnB,4BAA4B;IAC5B,SAAS,cAAc;IACvB,oDAAoD;IACpD,WAAW,gBAAgB;IAC3B,mDAAmD;IACnD,OAAO,YAAY;IACnB,uCAAuC;IACvC,KAAK,UAAU;IACf,uCAAuC;IACvC,IAAI,SAAS;IACb,yBAAyB;IACzB,IAAI,SAAS;IACb,kDAAkD;IAClD,YAAY,iBAAiB;IAC7B,uCAAuC;IACvC,KAAK,UAAU;IACf,+CAA+C;IAC/C,OAAO,YAAY;IACnB,gDAAgD;IAChD,MAAM,WAAW;CAClB;AAED;;;;GAIG;AACH,oBAAY,cAAc;IACxB,kDAAkD;IAClD,OAAO,YAAY;IACnB,4BAA4B;IAC5B,IAAI,SAAS;IACb,2BAA2B;IAC3B,KAAK,UAAU;CAChB;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY;;;;8EA0CxB,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,MAAM,SAAS,GAAG,iBAAiB,CACvC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,iBAAiB,CAClB,GACC,YAAY,CAAC,OAAO,YAAY,CAAC,GAAG;IAClC;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB,CAAC;AAEJ;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,mBAAmB,GAAI,+CAGjC,SAAS,KAAG,OASd,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyFG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CA0D9B,CAAC"}