@intlayer/design-system 6.1.5 → 6.1.6

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

@@ -1,18 +1,102 @@
-import { Locales } from '@intlayer/config/client';
-import { FC, HTMLAttributes } from 'react';
+import { LocalesValues } from '@intlayer/config/client';
+import { VariantProps } from 'class-variance-authority';
+import { FC, HTMLAttributes, ReactNode } from 'react';
 import { LinkColor } from '../Link';
+/**
+ * Breadcrumb variant styles using class-variance-authority
+ */
+declare const breadcrumbVariants: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+    spacing?: "compact" | "normal" | "loose" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Detailed breadcrumb link configuration with optional href or onClick
+ */
 type DetailedBreadcrumbLink = {
+    /**
+     * URL to navigate to when the breadcrumb item is clicked
+     */
     href?: string;
+    /**
+     * Text content to display for this breadcrumb item
+     */
     text: string;
+    /**
+     * Custom click handler function for interactive breadcrumb items
+     */
     onClick?: () => void;
 };
+/**
+ * Union type representing different breadcrumb item configurations:
+ * - string: Simple text breadcrumb item
+ * - DetailedBreadcrumbLink: Object with href, text, and/or onClick properties
+ */
 export type BreadcrumbLink = string | DetailedBreadcrumbLink;
 export type BreadcrumbProps = {
+    /**
+     * Array of breadcrumb items
+     */
     links: BreadcrumbLink[];
-    color?: `${LinkColor}` | LinkColor;
-    locale?: Locales;
+    /**
+     * Color scheme for breadcrumb links
+     * @default LinkColor.TEXT
+     */
+    color?: LinkColor | `${LinkColor}`;
+    /**
+     * Locale for internationalization
+     */
+    locale?: LocalesValues;
+    /**
+     * Element type for ARIA current attribute
+     * @default 'page'
+     */
     elementType?: 'page' | 'location';
-} & HTMLAttributes<HTMLOListElement>;
+    /**
+     * Custom separator between breadcrumb items
+     * @default ChevronRightIcon
+     */
+    separator?: ReactNode;
+    /**
+     * ARIA label for breadcrumb navigation
+     * @default 'breadcrumb'
+     */
+    ariaLabel?: string;
+    /**
+     * Whether to include structured data markup
+     * @default true
+     */
+    includeStructuredData?: boolean;
+    /**
+     * Maximum number of breadcrumb items to show before truncation
+     */
+    maxItems?: number;
+} & VariantProps<typeof breadcrumbVariants> & HTMLAttributes<HTMLOListElement>;
+/**
+ * Breadcrumb component providing navigational context with accessibility features
+ *
+ * Features:
+ * - Supports links, buttons, and static text elements
+ * - Full keyboard navigation support
+ * - ARIA attributes for screen readers
+ * - Schema.org structured data for SEO
+ * - Customizable separators and styling
+ * - Internationalization support
+ * - Responsive design variants
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumb
+ *   links={[
+ *     'Home',
+ *     { href: '/products', text: 'Products' },
+ *     { onClick: handleCategory, text: 'Electronics' },
+ *     'Smartphones'
+ *   ]}
+ *   size="medium"
+ *   ariaLabel="Product navigation"
+ * />
+ * ```
+ */
 export declare const Breadcrumb: FC<BreadcrumbProps>;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAEvD,OAAO,EAAY,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAI/D,OAAO,EAAQ,SAAS,EAAkB,MAAM,SAAS,CAAC;AAsF1D,KAAK,sBAAsB,GAAG;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AACF,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,sBAAsB,CAAC;AAE7D,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,GAAG,SAAS,EAAE,GAAG,SAAS,CAAC;IACnC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;CACnC,GAAG,cAAc,CAAC,gBAAgB,CAAC,CAAC;AAErC,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAsF1C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAW,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACtE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAY,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI/E,OAAO,EAAQ,SAAS,EAAE,MAAM,SAAS,CAAC;AAuC1C;;GAEG;AACH,QAAA,MAAM,kBAAkB;;;8EAiBtB,CAAC;AAsHH;;GAEG;AACH,KAAK,sBAAsB,GAAG;IAC5B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,sBAAsB,CAAC;AAE7D,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,GAAG,SAAS,EAAE,CAAC;IACnC;;OAEG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,GACzC,cAAc,CAAC,gBAAgB,CAAC,CAAC;AAEnC;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAiI1C,CAAC"}

package/dist/components/Breadcrumb/index.mjs

@@ -1,11 +1,30 @@
 "use client";
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
+import { Fragment, createElement } from "react";
+import { cva } from "class-variance-authority";
 import { ChevronRightIcon } from "lucide-react";
-import { Fragment } from "react";
 import { useIntlayer } from "react-intlayer";
 import { cn } from "../../utils/cn.mjs";
 import { Button, ButtonVariant } from "../Button/Button.mjs";
 import { LinkColor, Link } from "../Link/Link.mjs";
+const breadcrumbVariants = cva("flex flex-row flex-wrap items-center text-sm", {
+  variants: {
+    size: {
+      small: "gap-1 text-xs",
+      medium: "gap-2 text-sm",
+      large: "gap-3 text-base"
+    },
+    spacing: {
+      compact: "gap-1",
+      normal: "gap-2",
+      loose: "gap-4"
+    }
+  },
+  defaultVariants: {
+    size: "medium",
+    spacing: "normal"
+  }
+});
 const LinkLink = ({
   href,
   lang,
@@ -14,6 +33,7 @@ const LinkLink = ({
   color,
   position,
   locale,
+  className,
   ...props
 }) => {
   const { linkLabel } = useIntlayer("breadcrumb");
@@ -43,6 +63,7 @@ const ButtonLink = ({
   onClick,
   color,
   position,
+  className,
   ...props
 }) => {
   const { linkLabel } = useIntlayer("breadcrumb");
@@ -62,81 +83,125 @@ const ButtonLink = ({
     /* @__PURE__ */ jsx("meta", { itemProp: "position", content: position.toString() })
   ] });
 };
-const Span = ({ children, position, ...props }) => /* @__PURE__ */ jsxs("span", { itemProp: "item", children: [
-  /* @__PURE__ */ jsx("span", { itemProp: "name", ...props, children }),
-  /* @__PURE__ */ jsx("meta", { itemProp: "position", content: position.toString() })
-] });
+const Span = ({ children, position, className, ...props }) => /* @__PURE__ */ jsxs(
+  "span",
+  {
+    itemProp: "item",
+    className: cn(
+      "inline-flex items-center",
+      "text-neutral-700 font-medium",
+      "transition-colors duration-200",
+      className
+    ),
+    children: [
+      /* @__PURE__ */ jsx("span", { itemProp: "name", ...props, children }),
+      /* @__PURE__ */ jsx("meta", { itemProp: "position", content: position.toString() })
+    ]
+  }
+);
 const Breadcrumb = ({
   links,
   className,
   color = LinkColor.TEXT,
   locale,
   elementType = "page",
+  separator = /* @__PURE__ */ jsx(ChevronRightIcon, { size: 10 }),
+  ariaLabel = "breadcrumb",
+  includeStructuredData = true,
+  maxItems,
+  size,
+  spacing,
   ...props
-}) => /* @__PURE__ */ jsx("nav", { "aria-label": "breadcrumb", children: /* @__PURE__ */ jsx(
-  "ol",
-  {
-    className: cn(
-      "flex flex-row flex-wrap items-center gap-2 text-sm",
-      className
-    ),
-    itemScope: true,
-    itemType: "http://schema.org/BreadcrumbList",
-    ...props,
-    children: links.map((link, index) => {
-      const isLastLink = index === links.length - 1;
-      const isLink = typeof link === "object" && typeof link.href === "string";
-      const isButton = typeof link === "object" && typeof link.onClick === "function";
-      const isActive = index === links.length - 1;
-      const ariaCurrent = isActive ? elementType : void 0;
-      const text = link.text ?? link;
-      let section = /* @__PURE__ */ jsx(Span, { position: index + 1, "aria-current": ariaCurrent, children: text }, text);
-      if (isLink) {
-        section = /* @__PURE__ */ jsx(
-          LinkLink,
+}) => {
+  const displayLinks = maxItems && links.length > maxItems ? [...links.slice(0, 1), "...", ...links.slice(-(maxItems - 2))] : links;
+  return /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, role: "navigation", children: /* @__PURE__ */ jsx(
+    "ol",
+    {
+      className: cn(breadcrumbVariants({ size, spacing }), className),
+      ...includeStructuredData && {
+        itemScope: true,
+        itemType: "http://schema.org/BreadcrumbList"
+      },
+      ...props,
+      children: displayLinks.map((link, index) => {
+        const isLastLink = index === displayLinks.length - 1;
+        const isLink = typeof link === "object" && typeof link.href === "string";
+        const isButton = typeof link === "object" && typeof link.onClick === "function";
+        const isActive = index === displayLinks.length - 1;
+        const ariaCurrent = isActive ? elementType : void 0;
+        const isTruncated = link === "...";
+        const text = link.text ?? link;
+        if (isTruncated) {
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("li", { className: "flex items-center", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "text-neutral-500", children: "…" }) }),
+            !isLastLink && /* @__PURE__ */ jsx("li", { "aria-hidden": "true", className: "flex items-center", children: separator })
+          ] }, `truncated-${index}`);
+        }
+        let section = /* @__PURE__ */ jsx(
+          Span,
           {
-            href: link.href,
-            color,
             position: index + 1,
-            locale,
             "aria-current": ariaCurrent,
+            className: cn(
+              "transition-colors duration-200",
+              isActive && "text-neutral-900"
+            ),
             children: text
           },
           text
         );
-      } else if (isButton) {
-        section = /* @__PURE__ */ jsx(
-          ButtonLink,
+        if (isLink) {
+          section = /* @__PURE__ */ jsx(
+            LinkLink,
+            {
+              href: link.href,
+              color,
+              position: index + 1,
+              locale,
+              "aria-current": ariaCurrent,
+              className: cn(isActive && "text-neutral-900 cursor-default"),
+              children: text
+            },
+            text
+          );
+        } else if (isButton) {
+          section = /* @__PURE__ */ jsx(
+            ButtonLink,
+            {
+              onClick: link.onClick,
+              color,
+              position: index + 1,
+              "aria-current": ariaCurrent,
+              className: cn(isActive && "text-neutral-900 cursor-default"),
+              children: text
+            },
+            text
+          );
+        }
+        const listElement = /* @__PURE__ */ createElement(
+          "li",
           {
-            onClick: link.onClick,
-            color,
-            position: index + 1,
-            "aria-current": ariaCurrent,
-            children: text
+            ...includeStructuredData && {
+              itemProp: "itemListElement",
+              itemScope: true,
+              itemType: "https://schema.org/ListItem"
+            },
+            key: text,
+            className: "flex items-center"
           },
-          text
+          section
         );
-      }
-      const listElement = /* @__PURE__ */ jsx(
-        "li",
-        {
-          itemProp: "itemListElement",
-          itemScope: true,
-          itemType: "https://schema.org/ListItem",
-          children: section
-        },
-        text
-      );
-      if (isLastLink) {
-        return listElement;
-      }
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        listElement,
-        /* @__PURE__ */ jsx(ChevronRightIcon, { size: 10 })
-      ] }, text);
-    })
-  }
-) });
+        if (isLastLink) {
+          return listElement;
+        }
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          listElement,
+          /* @__PURE__ */ jsx("li", { "aria-hidden": "true", className: "flex items-center", children: separator })
+        ] }, text);
+      })
+    }
+  ) });
+};
 export {
   Breadcrumb
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/Breadcrumb/index.tsx"],"sourcesContent":["'use client';\n\nimport type { Locales } from '@intlayer/config/client';\nimport { ChevronRightIcon } from 'lucide-react';\nimport { Fragment, type FC, type HTMLAttributes } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { cn } from '../../utils/cn';\nimport { Button, ButtonVariant, type ButtonProps } from '../Button';\nimport { Link, LinkColor, type LinkProps } from '../Link';\n\ntype LinkLinkProps = {\n  position: number;\n  locale?: Locales;\n} & Omit<LinkProps, 'label'>;\n\nconst LinkLink: FC<LinkLinkProps> = ({\n  href,\n  lang,\n  children,\n  onClick,\n  color,\n  position,\n  locale,\n  ...props\n}) => {\n  const { linkLabel } = useIntlayer('breadcrumb');\n\n  return (\n    <>\n      <Link\n        href={href}\n        locale={locale}\n        color={color}\n        onClick={onClick}\n        itemProp=\"item\"\n        isExternalLink={false}\n        itemScope\n        itemType=\"https://schema.org/WebPage\"\n        {...props}\n        label={`${linkLabel} ${children}`}\n        itemID={href}\n      >\n        <span itemProp=\"name\">{children}</span>\n      </Link>\n      <meta itemProp=\"position\" content={position.toString()} />\n    </>\n  );\n};\n\ntype ButtonButtonProps = {\n  children: string;\n  position: number;\n} & Omit<ButtonProps, 'children' | 'label'>;\n\nconst ButtonLink: FC<ButtonButtonProps> = ({\n  children: text,\n  onClick,\n  color,\n  position,\n  ...props\n}) => {\n  const { linkLabel } = useIntlayer('breadcrumb');\n\n  return (\n    <>\n      <Button\n        onClick={onClick}\n        variant={ButtonVariant.LINK}\n        label={`${linkLabel} ${text}`}\n        color={color}\n        itemProp=\"item\"\n        {...props}\n      >\n        <span itemProp=\"name\">{text}</span>\n      </Button>\n      <meta itemProp=\"position\" content={position.toString()} />\n    </>\n  );\n};\n\ntype SpanProps = {\n  children: string;\n  position: number;\n} & HTMLAttributes<HTMLSpanElement>;\n\nconst Span: FC<SpanProps> = ({ children, position, ...props }) => (\n  <span itemProp=\"item\">\n    <span itemProp=\"name\" {...props}>\n      {children}\n    </span>\n    <meta itemProp=\"position\" content={position.toString()} />\n  </span>\n);\n\ntype DetailedBreadcrumbLink = {\n  href?: string;\n  text: string;\n  onClick?: () => void;\n};\nexport type BreadcrumbLink = string | DetailedBreadcrumbLink;\n\nexport type BreadcrumbProps = {\n  links: BreadcrumbLink[];\n  color?: `${LinkColor}` | LinkColor;\n  locale?: Locales;\n  elementType?: 'page' | 'location';\n} & HTMLAttributes<HTMLOListElement>;\n\nexport const Breadcrumb: FC<BreadcrumbProps> = ({\n  links,\n  className,\n  color = LinkColor.TEXT,\n  locale,\n  elementType = 'page',\n  ...props\n}) => (\n  <nav aria-label=\"breadcrumb\">\n    <ol\n      className={cn(\n        'flex flex-row flex-wrap items-center gap-2 text-sm',\n        className\n      )}\n      itemScope\n      itemType=\"http://schema.org/BreadcrumbList\"\n      {...props}\n    >\n      {links.map((link, index) => {\n        const isLastLink = index === links.length - 1;\n        const isLink =\n          typeof link === 'object' && typeof link.href === 'string';\n        const isButton =\n          typeof link === 'object' && typeof link.onClick === 'function';\n        const isActive = index === links.length - 1;\n        const ariaCurrent = isActive ? elementType : undefined;\n\n        const text = (link as DetailedBreadcrumbLink).text ?? link;\n\n        let section = (\n          <Span key={text} position={index + 1} aria-current={ariaCurrent}>\n            {text}\n          </Span>\n        );\n\n        if (isLink) {\n          section = (\n            <LinkLink\n              key={text}\n              href={link.href!}\n              color={color}\n              position={index + 1}\n              locale={locale}\n              aria-current={ariaCurrent}\n            >\n              {text}\n            </LinkLink>\n          );\n        } else if (isButton) {\n          section = (\n            <ButtonLink\n              key={text}\n              onClick={link.onClick!}\n              color={color}\n              position={index + 1}\n              aria-current={ariaCurrent}\n            >\n              {text}\n            </ButtonLink>\n          );\n        }\n\n        const listElement = (\n          <li\n            itemProp=\"itemListElement\"\n            itemScope\n            itemType=\"https://schema.org/ListItem\"\n            key={text}\n          >\n            {section}\n          </li>\n        );\n\n        if (isLastLink) {\n          return listElement;\n        }\n\n        return (\n          <Fragment key={text}>\n            {listElement}\n            <ChevronRightIcon size={10} />\n          </Fragment>\n        );\n      })}\n    </ol>\n  </nav>\n);\n"],"names":["Fragment"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/Breadcrumb/index.tsx"],"sourcesContent":["'use client';\n\nimport type { Locales, LocalesValues } from '@intlayer/config/client';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ChevronRightIcon } from 'lucide-react';\nimport { Fragment, type FC, type HTMLAttributes, type ReactNode } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { cn } from '../../utils/cn';\nimport { Button, ButtonVariant, type ButtonProps } from '../Button';\nimport { Link, LinkColor } from '../Link';\n\n/**\n * Props for LinkLink sub-component that renders breadcrumb items as links\n */\ntype LinkLinkProps = {\n  /**\n   * Position of the breadcrumb item in the list (1-based index)\n   */\n  position: number;\n  /**\n   * Locale for internationalization\n   */\n  locale?: Locales;\n  /**\n   * URL to navigate to\n   */\n  href?: string;\n  /**\n   * Link color\n   */\n  color?: LinkColor | `${LinkColor}`;\n  /**\n   * Click handler\n   */\n  onClick?: () => void;\n  /**\n   * Children content\n   */\n  children?: string;\n  /**\n   * Additional CSS classes\n   */\n  className?: string;\n} & Omit<\n  HTMLAttributes<HTMLAnchorElement>,\n  'href' | 'onClick' | 'color' | 'children' | 'className'\n>;\n\n/**\n * Breadcrumb variant styles using class-variance-authority\n */\nconst breadcrumbVariants = cva('flex flex-row flex-wrap items-center text-sm', {\n  variants: {\n    size: {\n      small: 'gap-1 text-xs',\n      medium: 'gap-2 text-sm',\n      large: 'gap-3 text-base',\n    },\n    spacing: {\n      compact: 'gap-1',\n      normal: 'gap-2',\n      loose: 'gap-4',\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\n    spacing: 'normal',\n  },\n});\n\n/**\n * LinkLink sub-component for breadcrumb items that navigate to other pages\n */\nconst LinkLink: FC<LinkLinkProps> = ({\n  href,\n  lang,\n  children,\n  onClick,\n  color,\n  position,\n  locale,\n  className,\n  ...props\n}) => {\n  const { linkLabel } = useIntlayer('breadcrumb');\n\n  return (\n    <>\n      <Link\n        href={href}\n        locale={locale}\n        color={color}\n        onClick={onClick}\n        itemProp=\"item\"\n        isExternalLink={false}\n        itemScope\n        itemType=\"https://schema.org/WebPage\"\n        {...props}\n        label={`${linkLabel} ${children}`}\n        itemID={href}\n      >\n        <span itemProp=\"name\">{children}</span>\n      </Link>\n      <meta itemProp=\"position\" content={position.toString()} />\n    </>\n  );\n};\n\n/**\n * Props for ButtonLink sub-component that renders breadcrumb items as interactive buttons\n */\ntype ButtonButtonProps = {\n  /**\n   * Text content for the breadcrumb button\n   */\n  children: string;\n  /**\n   * Position of the breadcrumb item in the list (1-based index)\n   */\n  position: number;\n} & Omit<ButtonProps, 'children' | 'label'>;\n\n/**\n * ButtonLink sub-component for breadcrumb items with click handlers\n */\nconst ButtonLink: FC<ButtonButtonProps> = ({\n  children: text,\n  onClick,\n  color,\n  position,\n  className,\n  ...props\n}) => {\n  const { linkLabel } = useIntlayer('breadcrumb');\n\n  return (\n    <>\n      <Button\n        onClick={onClick}\n        variant={ButtonVariant.LINK}\n        label={`${linkLabel} ${text}`}\n        color={color}\n        itemProp=\"item\"\n        {...props}\n      >\n        <span itemProp=\"name\">{text}</span>\n      </Button>\n      <meta itemProp=\"position\" content={position.toString()} />\n    </>\n  );\n};\n\n/**\n * Props for Span sub-component that renders static breadcrumb text\n */\ntype SpanProps = {\n  /**\n   * Text content for the static breadcrumb item\n   */\n  children: string;\n  /**\n   * Position of the breadcrumb item in the list (1-based index)\n   */\n  position: number;\n} & HTMLAttributes<HTMLSpanElement>;\n\n/**\n * Span sub-component for static breadcrumb text items\n */\nconst Span: FC<SpanProps> = ({ children, position, className, ...props }) => (\n  <span\n    itemProp=\"item\"\n    className={cn(\n      'inline-flex items-center',\n      'text-neutral-700 font-medium',\n      'transition-colors duration-200',\n      className\n    )}\n  >\n    <span itemProp=\"name\" {...props}>\n      {children}\n    </span>\n    <meta itemProp=\"position\" content={position.toString()} />\n  </span>\n);\n\n/**\n * Detailed breadcrumb link configuration with optional href or onClick\n */\ntype DetailedBreadcrumbLink = {\n  /**\n   * URL to navigate to when the breadcrumb item is clicked\n   */\n  href?: string;\n  /**\n   * Text content to display for this breadcrumb item\n   */\n  text: string;\n  /**\n   * Custom click handler function for interactive breadcrumb items\n   */\n  onClick?: () => void;\n};\n\n/**\n * Union type representing different breadcrumb item configurations:\n * - string: Simple text breadcrumb item\n * - DetailedBreadcrumbLink: Object with href, text, and/or onClick properties\n */\nexport type BreadcrumbLink = string | DetailedBreadcrumbLink;\n\nexport type BreadcrumbProps = {\n  /**\n   * Array of breadcrumb items\n   */\n  links: BreadcrumbLink[];\n  /**\n   * Color scheme for breadcrumb links\n   * @default LinkColor.TEXT\n   */\n  color?: LinkColor | `${LinkColor}`;\n  /**\n   * Locale for internationalization\n   */\n  locale?: LocalesValues;\n  /**\n   * Element type for ARIA current attribute\n   * @default 'page'\n   */\n  elementType?: 'page' | 'location';\n  /**\n   * Custom separator between breadcrumb items\n   * @default ChevronRightIcon\n   */\n  separator?: ReactNode;\n  /**\n   * ARIA label for breadcrumb navigation\n   * @default 'breadcrumb'\n   */\n  ariaLabel?: string;\n  /**\n   * Whether to include structured data markup\n   * @default true\n   */\n  includeStructuredData?: boolean;\n  /**\n   * Maximum number of breadcrumb items to show before truncation\n   */\n  maxItems?: number;\n} & VariantProps<typeof breadcrumbVariants> &\n  HTMLAttributes<HTMLOListElement>;\n\n/**\n * Breadcrumb component providing navigational context with accessibility features\n *\n * Features:\n * - Supports links, buttons, and static text elements\n * - Full keyboard navigation support\n * - ARIA attributes for screen readers\n * - Schema.org structured data for SEO\n * - Customizable separators and styling\n * - Internationalization support\n * - Responsive design variants\n *\n * @example\n * ```tsx\n * <Breadcrumb\n *   links={[\n *     'Home',\n *     { href: '/products', text: 'Products' },\n *     { onClick: handleCategory, text: 'Electronics' },\n *     'Smartphones'\n *   ]}\n *   size=\"medium\"\n *   ariaLabel=\"Product navigation\"\n * />\n * ```\n */\nexport const Breadcrumb: FC<BreadcrumbProps> = ({\n  links,\n  className,\n  color = LinkColor.TEXT,\n  locale,\n  elementType = 'page',\n  separator = <ChevronRightIcon size={10} />,\n  ariaLabel = 'breadcrumb',\n  includeStructuredData = true,\n  maxItems,\n  size,\n  spacing,\n  ...props\n}) => {\n  const displayLinks =\n    maxItems && links.length > maxItems\n      ? [...links.slice(0, 1), '...', ...links.slice(-(maxItems - 2))]\n      : links;\n\n  return (\n    <nav aria-label={ariaLabel} role=\"navigation\">\n      <ol\n        className={cn(breadcrumbVariants({ size, spacing }), className)}\n        {...(includeStructuredData && {\n          itemScope: true,\n          itemType: 'http://schema.org/BreadcrumbList',\n        })}\n        {...props}\n      >\n        {displayLinks.map((link, index) => {\n          const isLastLink = index === displayLinks.length - 1;\n          const isLink =\n            typeof link === 'object' && typeof link.href === 'string';\n          const isButton =\n            typeof link === 'object' && typeof link.onClick === 'function';\n          const isActive = index === displayLinks.length - 1;\n          const ariaCurrent = isActive ? elementType : undefined;\n          const isTruncated = link === '...';\n\n          const text = (link as DetailedBreadcrumbLink).text ?? link;\n\n          if (isTruncated) {\n            return (\n              <Fragment key={`truncated-${index}`}>\n                <li className=\"flex items-center\" aria-hidden=\"true\">\n                  <span className=\"text-neutral-500\">…</span>\n                </li>\n                {!isLastLink && (\n                  <li aria-hidden=\"true\" className=\"flex items-center\">\n                    {separator}\n                  </li>\n                )}\n              </Fragment>\n            );\n          }\n\n          let section = (\n            <Span\n              key={text}\n              position={index + 1}\n              aria-current={ariaCurrent}\n              className={cn(\n                'transition-colors duration-200',\n                isActive && 'text-neutral-900'\n              )}\n            >\n              {text}\n            </Span>\n          );\n\n          if (isLink) {\n            section = (\n              <LinkLink\n                key={text}\n                href={link.href!}\n                color={color}\n                position={index + 1}\n                locale={locale}\n                aria-current={ariaCurrent}\n                className={cn(isActive && 'text-neutral-900 cursor-default')}\n              >\n                {text}\n              </LinkLink>\n            );\n          } else if (isButton) {\n            section = (\n              <ButtonLink\n                key={text}\n                onClick={link.onClick!}\n                color={color}\n                position={index + 1}\n                aria-current={ariaCurrent}\n                className={cn(isActive && 'text-neutral-900 cursor-default')}\n              >\n                {text}\n              </ButtonLink>\n            );\n          }\n\n          const listElement = (\n            <li\n              {...(includeStructuredData && {\n                itemProp: 'itemListElement',\n                itemScope: true,\n                itemType: 'https://schema.org/ListItem',\n              })}\n              key={text}\n              className=\"flex items-center\"\n            >\n              {section}\n            </li>\n          );\n\n          if (isLastLink) {\n            return listElement;\n          }\n\n          return (\n            <Fragment key={text}>\n              {listElement}\n              <li aria-hidden=\"true\" className=\"flex items-center\">\n                {separator}\n              </li>\n            </Fragment>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n"],"names":["Fragment"],"mappings":"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"}

package/dist/components/Button/Button.cjs

@@ -72,7 +72,7 @@ var ButtonTextAlign = /* @__PURE__ */ ((ButtonTextAlign2) => {
   return ButtonTextAlign2;
 })(ButtonTextAlign || {});
 const buttonVariants = classVarianceAuthority.cva(
-  "relative cursor-pointer truncate whitespace-nowrap font-medium transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50",
+  "relative cursor-pointer truncate whitespace-nowrap font-medium transition-all duration-200 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       size: {
@@ -86,22 +86,22 @@ const buttonVariants = classVarianceAuthority.cva(
         [`${"icon-xl"}`]: "p-3"
       },
       color: {
-        [`${"primary"}`]: "text-primary *:text-text-light",
-        [`${"secondary"}`]: "text-secondary *:text-text-light",
-        [`${"destructive"}`]: "text-destructive *:text-text-light",
-        [`${"neutral"}`]: "text-neutral *:text-text-light",
-        [`${"light"}`]: "text-white *:text-text-light",
-        [`${"dark"}`]: "text-neutral-800 *:text-text-light",
-        [`${"text"}`]: "text-text *:text-text-opposite",
-        [`${"text-inverse"}`]: "text-text-opposite *:text-text",
-        [`${"error"}`]: "text-error *:text-text-light",
-        [`${"success"}`]: "text-success *:text-text-light",
-        [`${"custom"}`]: ""
+        [`${"primary"}`]: "text-primary *:text-text-light focus:ring-primary-500",
+        [`${"secondary"}`]: "text-secondary *:text-text-light focus:ring-secondary-500",
+        [`${"destructive"}`]: "text-destructive *:text-text-light focus:ring-destructive-500",
+        [`${"neutral"}`]: "text-neutral *:text-text-light focus:ring-neutral-500",
+        [`${"light"}`]: "text-white *:text-text-light focus:ring-white/50",
+        [`${"dark"}`]: "text-neutral-800 *:text-text-light focus:ring-neutral-800/50",
+        [`${"text"}`]: "text-text *:text-text-opposite focus:ring-neutral-500",
+        [`${"text-inverse"}`]: "text-text-opposite *:text-text focus:ring-neutral-500",
+        [`${"error"}`]: "text-error *:text-text-light focus:ring-error/50",
+        [`${"success"}`]: "text-success *:text-text-light focus:ring-success/50",
+        [`${"custom"}`]: "focus:ring-primary-500"
       },
       variant: {
-        [`${"default"}`]: "rounded-lg bg-current",
+        [`${"default"}`]: "rounded-lg bg-current hover:bg-current/90",
         [`${"none"}`]: "border-none bg-current/0 text-inherit hover:bg-current/0",
-        [`${"outline"}`]: "*:!text-current rounded-lg border-[1.5px] bg-current/0 hover:bg-current/30",
+        [`${"outline"}`]: "*:!text-current rounded-lg border-[1.5px] bg-current/0 hover:bg-current/30 border-current",
         [`${"link"}`]: "*:!text-current h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent hover:underline",
         [`${"invisible-link"}`]: "*:!text-current h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent",
         [`${"hoverable"}`]: "*:!text-current rounded-lg border-none bg-current/0 transition hover:bg-current/10 aria-[current]:bg-current/5",
@@ -149,25 +149,38 @@ const Button = ({
   Icon,
   IconRight,
   iconClassName,
-  isLoading,
-  isActive,
+  isLoading = false,
+  isActive = false,
   isFullWidth = false,
   textAlign,
   disabled,
   label,
   className,
   type = "button",
+  "aria-describedby": ariaDescribedBy,
+  "aria-expanded": ariaExpanded,
+  "aria-haspopup": ariaHasPopup,
+  "aria-pressed": ariaPressed,
   ...props
 }) => {
   const isLink = variant === "link" || variant === "invisible-link";
+  const isIconOnly = !children && (Icon || IconRight);
+  const accessibilityProps = {
+    "aria-label": isIconOnly ? label : void 0,
+    "aria-labelledby": !isIconOnly ? void 0 : void 0,
+    "aria-describedby": ariaDescribedBy,
+    "aria-expanded": ariaExpanded,
+    "aria-haspopup": ariaHasPopup,
+    "aria-pressed": isActive !== void 0 ? isActive : ariaPressed,
+    "aria-busy": isLoading,
+    "aria-current": isActive ? "page" : void 0,
+    "aria-disabled": disabled || isLoading
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
       disabled: isLoading || disabled,
-      "aria-current": isActive ? "page" : void 0,
-      "aria-label": label,
-      "aria-busy": isLoading,
-      role: isLink ? "link" : void 0,
+      role: isLink ? "link" : "button",
       type,
       className: buttonVariants({
         variant,
@@ -176,13 +189,14 @@ const Button = ({
         isFullWidth,
         textAlign: textAlign ?? (IconRight ? "left" : "center"),
         hasIconLeft: Boolean(
-          typeof children !== "undefined" && (typeof Icon !== "undefined" || typeof isLoading !== "undefined")
+          typeof children !== "undefined" && (typeof Icon !== "undefined" || isLoading)
         ),
         hasIconRight: Boolean(
           typeof children !== "undefined" && typeof IconRight !== "undefined"
         ),
         className
       }),
+      ...accessibilityProps,
       ...props,
       children: [
         Icon && !isLoading && /* @__PURE__ */ jsxRuntime.jsx(
@@ -193,7 +207,8 @@ const Button = ({
               className: iconClassName,
               position: "left"
               /* LEFT */
-            })
+            }),
+            "aria-hidden": "true"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -205,10 +220,13 @@ const Button = ({
               position: "left"
               /* LEFT */
             }),
-            isLoading: isLoading ?? false
+            isLoading,
+            "aria-hidden": "true",
+            "data-testid": "loader"
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
+        children && /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
+        !children && isIconOnly && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: label }),
         IconRight && /* @__PURE__ */ jsxRuntime.jsx(
           IconRight,
           {
@@ -217,7 +235,8 @@ const Button = ({
               className: iconClassName,
               position: "right"
               /* RIGHT */
-            })
+            }),
+            "aria-hidden": "true"
           }
         )
       ]

package/dist/components/Button/Button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { LucideIcon } from 'lucide-react';\nimport {\n  type ButtonHTMLAttributes,\n  type DetailedHTMLProps,\n  type FC,\n} from 'react';\nimport { Loader } from '../Loader';\n\nexport enum ButtonSize {\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  ICON_SM = 'icon-sm',\n  ICON_MD = 'icon-md',\n  ICON_LG = 'icon-lg',\n  ICON_XL = 'icon-xl',\n}\n\nexport enum ButtonIconPosition {\n  LEFT = 'left',\n  RIGHT = 'right',\n}\n\nconst buttonIconVariants = cva('', {\n  variants: {\n    size: {\n      [`${ButtonSize.SM}`]: 'size-3 absolute top-1/2 -translate-y-1/2',\n      [`${ButtonSize.MD}`]: 'size-4 absolute top-1/2 -translate-y-1/2',\n      [`${ButtonSize.LG}`]: 'size-5 absolute top-1/2 -translate-y-1/2',\n      [`${ButtonSize.XL}`]: 'size-6 absolute top-1/2 -translate-y-1/2',\n      [`${ButtonSize.ICON_SM}`]: 'size-3',\n      [`${ButtonSize.ICON_MD}`]: 'size-4',\n      [`${ButtonSize.ICON_LG}`]: 'size-5',\n      [`${ButtonSize.ICON_XL}`]: 'size-6',\n    },\n    position: {\n      [`${ButtonIconPosition.LEFT}`]: 'left-3',\n      [`${ButtonIconPosition.RIGHT}`]: 'right-3',\n    },\n  },\n  defaultVariants: {\n    size: ButtonSize.MD,\n  },\n});\n\nexport enum ButtonVariant {\n  DEFAULT = 'default',\n  NONE = 'none',\n  OUTLINE = 'outline',\n  LINK = 'link',\n  INVISIBLE_LINK = 'invisible-link',\n  HOVERABLE = 'hoverable',\n  INPUT = 'input',\n}\n\nexport enum ButtonColor {\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 ButtonTextAlign {\n  LEFT = 'left',\n  CENTER = 'center',\n  RIGHT = 'right',\n}\n\nconst buttonVariants = cva(\n  'relative cursor-pointer truncate whitespace-nowrap font-medium transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      size: {\n        [`${ButtonSize.SM}`]: 'min-h-7 px-3 max-md:py-1 text-xs',\n        [`${ButtonSize.MD}`]: 'min-h-8 px-6 max-md:py-2 text-sm',\n        [`${ButtonSize.LG}`]: 'min-h-10 px-8 max-md:py-3 text-lg',\n        [`${ButtonSize.XL}`]: 'min-h-11 px-10 max-md:py-4 text-xl',\n        [`${ButtonSize.ICON_SM}`]: 'p-1.5',\n        [`${ButtonSize.ICON_MD}`]: 'p-1.5',\n        [`${ButtonSize.ICON_LG}`]: 'p-2',\n        [`${ButtonSize.ICON_XL}`]: 'p-3',\n      },\n      color: {\n        [`${ButtonColor.PRIMARY}`]: 'text-primary *:text-text-light',\n        [`${ButtonColor.SECONDARY}`]: 'text-secondary *:text-text-light',\n        [`${ButtonColor.DESTRUCTIVE}`]: 'text-destructive *:text-text-light',\n        [`${ButtonColor.NEUTRAL}`]: 'text-neutral *:text-text-light',\n        [`${ButtonColor.LIGHT}`]: 'text-white *:text-text-light',\n        [`${ButtonColor.DARK}`]: 'text-neutral-800 *:text-text-light',\n        [`${ButtonColor.TEXT}`]: 'text-text *:text-text-opposite',\n        [`${ButtonColor.TEXT_INVERSE}`]: 'text-text-opposite *:text-text',\n        [`${ButtonColor.ERROR}`]: 'text-error *:text-text-light',\n        [`${ButtonColor.SUCCESS}`]: 'text-success *:text-text-light',\n        [`${ButtonColor.CUSTOM}`]: '',\n      },\n      variant: {\n        [`${ButtonVariant.DEFAULT}`]: 'rounded-lg bg-current',\n        [`${ButtonVariant.NONE}`]:\n          'border-none bg-current/0 text-inherit hover:bg-current/0',\n        [`${ButtonVariant.OUTLINE}`]:\n          '*:!text-current rounded-lg border-[1.5px] bg-current/0 hover:bg-current/30',\n        [`${ButtonVariant.LINK}`]:\n          '*:!text-current h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent hover:underline',\n        [`${ButtonVariant.INVISIBLE_LINK}`]:\n          '*:!text-current h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent',\n        [`${ButtonVariant.HOVERABLE}`]:\n          '*:!text-current rounded-lg border-none bg-current/0 transition hover:bg-current/10 aria-[current]:bg-current/5',\n        [`${ButtonVariant.INPUT}`]: [\n          '*:!text-current w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all',\n          'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n          'aria-[invalid=true]:border-error',\n          'disabled:opacity-50',\n        ],\n      },\n\n      textAlign: {\n        [`${ButtonTextAlign.LEFT}`]: 'text-left',\n        [`${ButtonTextAlign.CENTER}`]: 'text-center',\n        [`${ButtonTextAlign.RIGHT}`]: 'text-right',\n      },\n\n      isFullWidth: {\n        true: 'w-full',\n        false: '',\n      },\n\n      hasIconLeft: {\n        true: 'px-12',\n        false: '',\n      },\n      hasIconRight: {\n        true: 'pr-8',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: ButtonVariant.DEFAULT,\n      size: ButtonSize.MD,\n      color: ButtonColor.CUSTOM,\n      textAlign: ButtonTextAlign.CENTER,\n      isFullWidth: false,\n      hasIconRight: false,\n      hasIconLeft: false,\n    },\n  }\n);\n\nexport type ButtonProps = DetailedHTMLProps<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  HTMLButtonElement\n> &\n  VariantProps<typeof buttonVariants> & {\n    /**\n     * Optional icon to be displayed on the button\n     */\n    label: string;\n    Icon?: FC | LucideIcon;\n    IconRight?: FC | LucideIcon;\n    iconClassName?: string;\n    isLoading?: boolean;\n    isActive?: boolean;\n    isFullWidth?: boolean;\n  };\n\nexport const Button: FC<ButtonProps> = ({\n  variant,\n  size,\n  color,\n  children,\n  Icon,\n  IconRight,\n  iconClassName,\n  isLoading,\n  isActive,\n  isFullWidth = false,\n  textAlign,\n  disabled,\n  label,\n  className,\n  type = 'button',\n  ...props\n}) => {\n  const isLink = variant === 'link' || variant === 'invisible-link';\n\n  return (\n    <button\n      disabled={isLoading || disabled}\n      aria-current={isActive ? 'page' : undefined}\n      aria-label={label}\n      aria-busy={isLoading}\n      role={isLink ? 'link' : undefined}\n      type={type}\n      className={buttonVariants({\n        variant,\n        size,\n        color,\n        isFullWidth,\n        textAlign:\n          textAlign ??\n          (IconRight ? ButtonTextAlign.LEFT : ButtonTextAlign.CENTER),\n        hasIconLeft: Boolean(\n          typeof children !== 'undefined' &&\n            (typeof Icon !== 'undefined' || typeof isLoading !== 'undefined')\n        ),\n        hasIconRight: Boolean(\n          typeof children !== 'undefined' && typeof IconRight !== 'undefined'\n        ),\n        className,\n      })}\n      {...props}\n    >\n      {Icon && !isLoading && (\n        <Icon\n          className={buttonIconVariants({\n            size,\n            className: iconClassName,\n            position: ButtonIconPosition.LEFT,\n          })}\n        />\n      )}\n\n      <Loader\n        className={buttonIconVariants({\n          size,\n          className: iconClassName,\n          position: ButtonIconPosition.LEFT,\n        })}\n        isLoading={isLoading ?? false}\n      />\n\n      <span>{children}</span>\n\n      {IconRight && (\n        <IconRight\n          className={buttonIconVariants({\n            size,\n            className: iconClassName,\n            position: ButtonIconPosition.RIGHT,\n          })}\n        />\n      )}\n    </button>\n  );\n};\n"],"names":["ButtonSize","ButtonIconPosition","cva","ButtonVariant","ButtonColor","ButtonTextAlign","jsxs","jsx","Loader"],"mappings":"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"}
+{"version":3,"file":"Button.cjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { LucideIcon } from 'lucide-react';\nimport {\n  type ButtonHTMLAttributes,\n  type DetailedHTMLProps,\n  type FC,\n} from 'react';\nimport { Loader } from '../Loader';\n\n/**\n * Button size variants for different use cases\n */\nexport enum ButtonSize {\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  ICON_SM = 'icon-sm',\n  ICON_MD = 'icon-md',\n  ICON_LG = 'icon-lg',\n  ICON_XL = 'icon-xl',\n}\n\n/**\n * Icon positioning within the button\n */\nexport enum ButtonIconPosition {\n  LEFT = 'left',\n  RIGHT = 'right',\n}\n\nconst buttonIconVariants = cva('', {\n  variants: {\n    size: {\n      [`${ButtonSize.SM}`]: 'size-3 absolute top-1/2 -translate-y-1/2',\n      [`${ButtonSize.MD}`]: 'size-4 absolute top-1/2 -translate-y-1/2',\n      [`${ButtonSize.LG}`]: 'size-5 absolute top-1/2 -translate-y-1/2',\n      [`${ButtonSize.XL}`]: 'size-6 absolute top-1/2 -translate-y-1/2',\n      [`${ButtonSize.ICON_SM}`]: 'size-3',\n      [`${ButtonSize.ICON_MD}`]: 'size-4',\n      [`${ButtonSize.ICON_LG}`]: 'size-5',\n      [`${ButtonSize.ICON_XL}`]: 'size-6',\n    },\n    position: {\n      [`${ButtonIconPosition.LEFT}`]: 'left-3',\n      [`${ButtonIconPosition.RIGHT}`]: 'right-3',\n    },\n  },\n  defaultVariants: {\n    size: ButtonSize.MD,\n  },\n});\n\n/**\n * Button visual style variants\n */\nexport enum ButtonVariant {\n  DEFAULT = 'default',\n  NONE = 'none',\n  OUTLINE = 'outline',\n  LINK = 'link',\n  INVISIBLE_LINK = 'invisible-link',\n  HOVERABLE = 'hoverable',\n  INPUT = 'input',\n}\n\n/**\n * Button color themes that work with the design system\n */\nexport enum ButtonColor {\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\n/**\n * Text alignment options for button content\n */\nexport enum ButtonTextAlign {\n  LEFT = 'left',\n  CENTER = 'center',\n  RIGHT = 'right',\n}\n\n/**\n * Enhanced button variants with improved accessibility and focus states\n */\nconst buttonVariants = cva(\n  'relative cursor-pointer truncate whitespace-nowrap font-medium transition-all duration-200 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      size: {\n        [`${ButtonSize.SM}`]: 'min-h-7 px-3 max-md:py-1 text-xs',\n        [`${ButtonSize.MD}`]: 'min-h-8 px-6 max-md:py-2 text-sm',\n        [`${ButtonSize.LG}`]: 'min-h-10 px-8 max-md:py-3 text-lg',\n        [`${ButtonSize.XL}`]: 'min-h-11 px-10 max-md:py-4 text-xl',\n        [`${ButtonSize.ICON_SM}`]: 'p-1.5',\n        [`${ButtonSize.ICON_MD}`]: 'p-1.5',\n        [`${ButtonSize.ICON_LG}`]: 'p-2',\n        [`${ButtonSize.ICON_XL}`]: 'p-3',\n      },\n      color: {\n        [`${ButtonColor.PRIMARY}`]:\n          'text-primary *:text-text-light focus:ring-primary-500',\n        [`${ButtonColor.SECONDARY}`]:\n          'text-secondary *:text-text-light focus:ring-secondary-500',\n        [`${ButtonColor.DESTRUCTIVE}`]:\n          'text-destructive *:text-text-light focus:ring-destructive-500',\n        [`${ButtonColor.NEUTRAL}`]:\n          'text-neutral *:text-text-light focus:ring-neutral-500',\n        [`${ButtonColor.LIGHT}`]:\n          'text-white *:text-text-light focus:ring-white/50',\n        [`${ButtonColor.DARK}`]:\n          'text-neutral-800 *:text-text-light focus:ring-neutral-800/50',\n        [`${ButtonColor.TEXT}`]:\n          'text-text *:text-text-opposite focus:ring-neutral-500',\n        [`${ButtonColor.TEXT_INVERSE}`]:\n          'text-text-opposite *:text-text focus:ring-neutral-500',\n        [`${ButtonColor.ERROR}`]:\n          'text-error *:text-text-light focus:ring-error/50',\n        [`${ButtonColor.SUCCESS}`]:\n          'text-success *:text-text-light focus:ring-success/50',\n        [`${ButtonColor.CUSTOM}`]: 'focus:ring-primary-500',\n      },\n      variant: {\n        [`${ButtonVariant.DEFAULT}`]:\n          'rounded-lg bg-current hover:bg-current/90',\n        [`${ButtonVariant.NONE}`]:\n          'border-none bg-current/0 text-inherit hover:bg-current/0',\n        [`${ButtonVariant.OUTLINE}`]:\n          '*:!text-current rounded-lg border-[1.5px] bg-current/0 hover:bg-current/30 border-current',\n        [`${ButtonVariant.LINK}`]:\n          '*:!text-current h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent hover:underline',\n        [`${ButtonVariant.INVISIBLE_LINK}`]:\n          '*:!text-current h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent',\n        [`${ButtonVariant.HOVERABLE}`]:\n          '*:!text-current rounded-lg border-none bg-current/0 transition hover:bg-current/10 aria-[current]:bg-current/5',\n        [`${ButtonVariant.INPUT}`]: [\n          '*:!text-current w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all',\n          'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n          'aria-[invalid=true]:border-error',\n          'disabled:opacity-50',\n        ],\n      },\n\n      textAlign: {\n        [`${ButtonTextAlign.LEFT}`]: 'text-left',\n        [`${ButtonTextAlign.CENTER}`]: 'text-center',\n        [`${ButtonTextAlign.RIGHT}`]: 'text-right',\n      },\n\n      isFullWidth: {\n        true: 'w-full',\n        false: '',\n      },\n\n      hasIconLeft: {\n        true: 'px-12',\n        false: '',\n      },\n      hasIconRight: {\n        true: 'pr-8',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: ButtonVariant.DEFAULT,\n      size: ButtonSize.MD,\n      color: ButtonColor.CUSTOM,\n      textAlign: ButtonTextAlign.CENTER,\n      isFullWidth: false,\n      hasIconRight: false,\n      hasIconLeft: false,\n    },\n  }\n);\n\n/**\n * Enhanced Button component props with comprehensive type safety and accessibility features\n */\nexport type ButtonProps = DetailedHTMLProps<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  HTMLButtonElement\n> &\n  VariantProps<typeof buttonVariants> & {\n    /**\n     * Accessible label for screen readers and assistive technologies.\n     * This is required for accessibility compliance.\n     */\n    label: string;\n\n    /**\n     * Optional icon to display on the left side of the button\n     */\n    Icon?: FC | LucideIcon;\n\n    /**\n     * Optional icon to display on the right side of the button\n     */\n    IconRight?: FC | LucideIcon;\n\n    /**\n     * Additional CSS classes for icon styling\n     */\n    iconClassName?: string;\n\n    /**\n     * Shows loading spinner and disables button interaction when true\n     */\n    isLoading?: boolean;\n\n    /**\n     * Marks the button as active (useful for navigation or toggle states)\n     */\n    isActive?: boolean;\n\n    /**\n     * Makes the button span the full width of its container\n     */\n    isFullWidth?: boolean;\n\n    /**\n     * Additional description for complex buttons (optional)\n     */\n    'aria-describedby'?: string;\n\n    /**\n     * Expanded state for collapsible sections (optional)\n     */\n    'aria-expanded'?: boolean;\n\n    /**\n     * Controls whether the button has popup/menu (optional)\n     */\n    'aria-haspopup'?:\n      | boolean\n      | 'true'\n      | 'false'\n      | 'menu'\n      | 'listbox'\n      | 'tree'\n      | 'grid'\n      | 'dialog';\n\n    /**\n     * Indicates if button controls are currently pressed (for toggle buttons)\n     */\n    'aria-pressed'?: boolean;\n  };\n\n/**\n * Button Component - A comprehensive, accessible button component\n *\n * Features:\n * - Full accessibility compliance with ARIA attributes\n * - Multiple variants and sizes for different use cases\n * - Icon support (left and right positioning)\n * - Loading states with spinner\n * - Keyboard navigation support\n * - Focus management with visible indicators\n * - Responsive design adaptations\n *\n * @example\n * ```tsx\n * // Basic button\n * <Button label=\"Click me\">Click me</Button>\n *\n * // Button with icon and loading state\n * <Button\n *   label=\"Save document\"\n *   Icon={SaveIcon}\n *   isLoading={saving}\n *   disabled={!hasChanges}\n * >\n *   Save\n * </Button>\n *\n * // Destructive action button\n * <Button\n *   variant={ButtonVariant.OUTLINE}\n *   color={ButtonColor.DESTRUCTIVE}\n *   label=\"Delete item permanently\"\n *   aria-describedby=\"delete-warning\"\n * >\n *   Delete\n * </Button>\n * ```\n */\nexport const Button: FC<ButtonProps> = ({\n  variant,\n  size,\n  color,\n  children,\n  Icon,\n  IconRight,\n  iconClassName,\n  isLoading = false,\n  isActive = false,\n  isFullWidth = false,\n  textAlign,\n  disabled,\n  label,\n  className,\n  type = 'button',\n  'aria-describedby': ariaDescribedBy,\n  'aria-expanded': ariaExpanded,\n  'aria-haspopup': ariaHasPopup,\n  'aria-pressed': ariaPressed,\n  ...props\n}) => {\n  const isLink =\n    variant === ButtonVariant.LINK || variant === ButtonVariant.INVISIBLE_LINK;\n  const isIconOnly = !children && (Icon || IconRight);\n\n  const accessibilityProps = {\n    'aria-label': isIconOnly ? label : undefined,\n    'aria-labelledby': !isIconOnly ? undefined : undefined,\n    'aria-describedby': ariaDescribedBy,\n    'aria-expanded': ariaExpanded,\n    'aria-haspopup': ariaHasPopup,\n    'aria-pressed': isActive !== undefined ? isActive : ariaPressed,\n    'aria-busy': isLoading,\n    'aria-current': (isActive ? 'page' : undefined) as 'page' | undefined,\n    'aria-disabled': disabled || isLoading,\n  };\n\n  return (\n    <button\n      disabled={isLoading || disabled}\n      role={isLink ? 'link' : 'button'}\n      type={type}\n      className={buttonVariants({\n        variant,\n        size,\n        color,\n        isFullWidth,\n        textAlign:\n          textAlign ??\n          (IconRight ? ButtonTextAlign.LEFT : ButtonTextAlign.CENTER),\n        hasIconLeft: Boolean(\n          typeof children !== 'undefined' &&\n            (typeof Icon !== 'undefined' || isLoading)\n        ),\n        hasIconRight: Boolean(\n          typeof children !== 'undefined' && typeof IconRight !== 'undefined'\n        ),\n        className,\n      })}\n      {...accessibilityProps}\n      {...props}\n    >\n      {Icon && !isLoading && (\n        <Icon\n          className={buttonIconVariants({\n            size,\n            className: iconClassName,\n            position: ButtonIconPosition.LEFT,\n          })}\n          aria-hidden=\"true\"\n        />\n      )}\n\n      <Loader\n        className={buttonIconVariants({\n          size,\n          className: iconClassName,\n          position: ButtonIconPosition.LEFT,\n        })}\n        isLoading={isLoading}\n        aria-hidden=\"true\"\n        data-testid=\"loader\"\n      />\n\n      {children && <span>{children}</span>}\n\n      {!children && isIconOnly && <span className=\"sr-only\">{label}</span>}\n\n      {IconRight && (\n        <IconRight\n          className={buttonIconVariants({\n            size,\n            className: iconClassName,\n            position: ButtonIconPosition.RIGHT,\n          })}\n          aria-hidden=\"true\"\n        />\n      )}\n    </button>\n  );\n};\n"],"names":["ButtonSize","ButtonIconPosition","cva","ButtonVariant","ButtonColor","ButtonTextAlign","jsxs","jsx","Loader"],"mappings":"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"}