@intlayer/design-system 8.4.4 → 8.4.6

package/dist/esm/_virtual/_rolldown/runtime.mjs

@@ -1 +1,18 @@
-var e=Object.defineProperty,t=(t,n)=>{let r={};for(var i in t)e(r,i,{get:t[i],enumerable:!0});return n||e(r,Symbol.toStringTag,{value:`Module`}),r};export{t as __exportAll};
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) {
+		__defProp(target, name, {
+			get: all[name],
+			enumerable: true
+		});
+	}
+	if (!no_symbols) {
+		__defProp(target, Symbol.toStringTag, { value: "Module" });
+	}
+	return target;
+};
+
+//#endregion
+export { __exportAll };

package/dist/esm/components/Accordion/Accordion.mjs

@@ -1,2 +1,100 @@
-"use client";import{cn as e}from"../../utils/cn.mjs";import{Button as t,ButtonColor as n,ButtonVariant as r}from"../Button/Button.mjs";import{MaxHeightSmoother as i}from"../MaxHeightSmoother/index.mjs";import{useId as a,useState as o}from"react";import{ChevronDown as s}from"lucide-react";import{jsx as c,jsxs as l}from"react/jsx-runtime";const u=({children:u,header:d,isOpen:f,defaultIsOpen:p=!1,onToggle:m,onClick:h,disabled:g=!1,contentClassName:_,headerClassName:v,contentId:y,"aria-label":b,...x})=>{let S=f!==void 0,[C,w]=o(p),T=a(),E=S?f:C,D=!E,O=y??`${T}-accordion-content`,k=e=>{if(g)return;let t=!E;S||w(t),m?.(t),h?.(e)};return l(`div`,{className:`w-full`,children:[c(t,{variant:r.HOVERABLE,color:n.TEXT,onClick:k,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),k(e))},disabled:g,isFullWidth:!0,className:e(`flex items-center justify-between gap-2`,v),IconRight:s,iconClassName:e(`transform transition-transform duration-500 ease-in-out`,E?`rotate-0`:`-rotate-180`),"aria-expanded":E,"aria-controls":O,"aria-label":b,role:`button`,...x,children:d}),c(i,{id:O,tabIndex:D?-1:void 0,isHidden:D,className:_,role:`region`,"aria-labelledby":O,children:u})]})};export{u as Accordion};
+'use client';
+
+import { cn } from "../../utils/cn.mjs";
+import { Button, ButtonColor, ButtonVariant } from "../Button/Button.mjs";
+import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
+import { useId, useState } from "react";
+import { ChevronDown } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Accordion/Accordion.tsx
+/**
+* Accordion component that allows the user to expand and collapse content.
+* It provides a header with a chevron icon that controls the visibility of the content.
+*
+* Features:
+* - Supports both controlled and uncontrolled modes
+* - Accessible with proper ARIA attributes
+* - Keyboard navigation support
+* - Smooth animations for expand/collapse
+* - Customizable styling
+*
+* @param header - The content of the header.
+* @param children - The content to be expanded and collapsed.
+* @param isOpen - Controlled state for whether the content is expanded.
+* @param defaultIsOpen - Default open state for uncontrolled mode.
+* @param onToggle - Callback when the accordion state changes.
+* @param disabled - Whether the accordion is disabled.
+* @param contentClassName - Custom class for the content container.
+* @param headerClassName - Custom class for the header.
+* @param contentId - ID for the content (used for aria-controls).
+*
+* @example
+* // Uncontrolled mode
+* <Accordion header="Accordion Header" defaultIsOpen={true}>
+*   <p>Accordion content</p>
+* </Accordion>
+*
+* @example
+* // Controlled mode
+* <Accordion
+*   header="Controlled Accordion"
+*   isOpen={isOpen}
+*   onToggle={setIsOpen}
+* >
+*   <p>Controlled content</p>
+* </Accordion>
+*/
+const Accordion = ({ children, header, isOpen, defaultIsOpen = false, onToggle, onClick, disabled = false, contentClassName, headerClassName, contentId, "aria-label": ariaLabel, ...props }) => {
+	const isControlled = isOpen !== void 0;
+	const [internalIsOpen, setInternalIsOpen] = useState(defaultIsOpen);
+	const id = useId();
+	const isExpandedState = isControlled ? isOpen : internalIsOpen;
+	const isHidden = !isExpandedState;
+	const generatedContentId = contentId ?? `${id}-accordion-content`;
+	const handleToggle = (e) => {
+		if (disabled) return;
+		const newIsOpen = !isExpandedState;
+		if (!isControlled) setInternalIsOpen(newIsOpen);
+		onToggle?.(newIsOpen);
+		onClick?.(e);
+	};
+	const handleKeyDown = (e) => {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			handleToggle(e);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w-full",
+		children: [/* @__PURE__ */ jsx(Button, {
+			variant: ButtonVariant.HOVERABLE,
+			color: ButtonColor.TEXT,
+			onClick: handleToggle,
+			onKeyDown: handleKeyDown,
+			disabled,
+			isFullWidth: true,
+			className: cn("flex items-center justify-between gap-2", headerClassName),
+			IconRight: ChevronDown,
+			iconClassName: cn("transform transition-transform duration-500 ease-in-out", isExpandedState ? "rotate-0" : "-rotate-180"),
+			"aria-expanded": isExpandedState,
+			"aria-controls": generatedContentId,
+			"aria-label": ariaLabel,
+			role: "button",
+			...props,
+			children: header
+		}), /* @__PURE__ */ jsx(MaxHeightSmoother, {
+			id: generatedContentId,
+			tabIndex: isHidden ? -1 : void 0,
+			isHidden,
+			className: contentClassName,
+			role: "region",
+			"aria-labelledby": generatedContentId,
+			children
+		})]
+	});
+};
+
+//#endregion
+export { Accordion };
 //# sourceMappingURL=Accordion.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.mjs","names":[],"sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { ChevronDown } from 'lucide-react';\nimport {\n  type FC,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  useId,\n  useState,\n} from 'react';\nimport {\n  Button,\n  ButtonColor,\n  type ButtonProps,\n  ButtonVariant,\n} from '../Button';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\nexport interface AccordionProps\n  extends Omit<ButtonProps, 'children' | 'onToggle'> {\n  /** The content displayed in the accordion header */\n  header: ReactNode;\n  /** The collapsible content inside the accordion */\n  children: ReactNode;\n  /** Controls whether the accordion is open (controlled mode) */\n  isOpen?: boolean;\n  /** Default open state (uncontrolled mode) */\n  defaultIsOpen?: boolean;\n  /** Called when the accordion state changes */\n  onToggle?: (isOpen: boolean) => void;\n  /** Disable the accordion interaction */\n  disabled?: boolean;\n  /** Custom class for the content container */\n  contentClassName?: string;\n  /** Custom class for the header container */\n  headerClassName?: string;\n  /** Accessible label for screen readers */\n  'aria-label'?: string;\n  /** ID for the accordion content (for aria-controls) */\n  contentId?: string;\n}\n\n/**\n * Accordion component that allows the user to expand and collapse content.\n * It provides a header with a chevron icon that controls the visibility of the content.\n *\n * Features:\n * - Supports both controlled and uncontrolled modes\n * - Accessible with proper ARIA attributes\n * - Keyboard navigation support\n * - Smooth animations for expand/collapse\n * - Customizable styling\n *\n * @param header - The content of the header.\n * @param children - The content to be expanded and collapsed.\n * @param isOpen - Controlled state for whether the content is expanded.\n * @param defaultIsOpen - Default open state for uncontrolled mode.\n * @param onToggle - Callback when the accordion state changes.\n * @param disabled - Whether the accordion is disabled.\n * @param contentClassName - Custom class for the content container.\n * @param headerClassName - Custom class for the header.\n * @param contentId - ID for the content (used for aria-controls).\n *\n * @example\n * // Uncontrolled mode\n * <Accordion header=\"Accordion Header\" defaultIsOpen={true}>\n *   <p>Accordion content</p>\n * </Accordion>\n *\n * @example\n * // Controlled mode\n * <Accordion\n *   header=\"Controlled Accordion\"\n *   isOpen={isOpen}\n *   onToggle={setIsOpen}\n * >\n *   <p>Controlled content</p>\n * </Accordion>\n */\nexport const Accordion: FC<AccordionProps> = ({\n  children,\n  header,\n  isOpen,\n  defaultIsOpen = false,\n  onToggle,\n  onClick,\n  disabled = false,\n  contentClassName,\n  headerClassName,\n  contentId,\n  'aria-label': ariaLabel,\n  ...props\n}) => {\n  // Determine if we're in controlled or uncontrolled mode\n  const isControlled = isOpen !== undefined;\n  const [internalIsOpen, setInternalIsOpen] = useState(defaultIsOpen);\n  const id = useId();\n\n  // Use controlled value if provided, otherwise use internal state\n  const isExpandedState = isControlled ? isOpen : internalIsOpen;\n  const isHidden = !isExpandedState;\n\n  // Generate unique ID for content if not provided\n  const generatedContentId = contentId ?? `${id}-accordion-content`;\n\n  const handleToggle = (e: MouseEvent<HTMLButtonElement>) => {\n    if (disabled) return;\n\n    const newIsOpen = !isExpandedState;\n\n    // Update internal state if uncontrolled\n    if (!isControlled) {\n      setInternalIsOpen(newIsOpen);\n    }\n\n    // Call external handlers\n    onToggle?.(newIsOpen);\n    onClick?.(e);\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n    // Enter and Space should toggle the accordion\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      handleToggle(e as any);\n    }\n  };\n\n  return (\n    <div className=\"w-full\">\n      <Button\n        variant={ButtonVariant.HOVERABLE}\n        color={ButtonColor.TEXT}\n        onClick={handleToggle}\n        onKeyDown={handleKeyDown}\n        disabled={disabled}\n        isFullWidth\n        className={cn(\n          'flex items-center justify-between gap-2',\n          headerClassName\n        )}\n        IconRight={ChevronDown}\n        iconClassName={cn(\n          'transform transition-transform duration-500 ease-in-out',\n          isExpandedState ? 'rotate-0' : '-rotate-180'\n        )}\n        aria-expanded={isExpandedState}\n        aria-controls={generatedContentId}\n        aria-label={ariaLabel}\n        role=\"button\"\n        {...props}\n      >\n        {header}\n      </Button>\n\n      <MaxHeightSmoother\n        id={generatedContentId}\n        tabIndex={isHidden ? -1 : undefined}\n        isHidden={isHidden}\n        className={contentClassName}\n        role=\"region\"\n        aria-labelledby={generatedContentId}\n      >\n        {children}\n      </MaxHeightSmoother>\n    </div>\n  );\n};\n"],"mappings":"mVAiFA,MAAa,GAAiC,CAC5C,WACA,SACA,SACA,gBAAgB,GAChB,WACA,UACA,WAAW,GACX,mBACA,kBACA,YACA,aAAc,EACd,GAAG,KACC,CAEJ,IAAM,EAAe,IAAW,IAAA,GAC1B,CAAC,EAAgB,GAAqB,EAAS,EAAc,CAC7D,EAAK,GAAO,CAGZ,EAAkB,EAAe,EAAS,EAC1C,EAAW,CAAC,EAGZ,EAAqB,GAAa,GAAG,EAAG,oBAExC,EAAgB,GAAqC,CACzD,GAAI,EAAU,OAEd,IAAM,EAAY,CAAC,EAGd,GACH,EAAkB,EAAU,CAI9B,IAAW,EAAU,CACrB,IAAU,EAAE,EAWd,OACE,EAAC,MAAD,CAAK,UAAU,kBAAf,CACE,EAAC,EAAD,CACE,QAAS,EAAc,UACvB,MAAO,EAAY,KACnB,QAAS,EACT,UAdiB,GAAwC,EAEzD,EAAE,MAAQ,SAAW,EAAE,MAAQ,OACjC,EAAE,gBAAgB,CAClB,EAAa,EAAS,GAWV,WACV,YAAA,GACA,UAAW,EACT,0CACA,EACD,CACD,UAAW,EACX,cAAe,EACb,0DACA,EAAkB,WAAa,cAChC,CACD,gBAAe,EACf,gBAAe,EACf,aAAY,EACZ,KAAK,SACL,GAAI,WAEH,EACM,CAAA,CAET,EAAC,EAAD,CACE,GAAI,EACJ,SAAU,EAAW,GAAK,IAAA,GAChB,WACV,UAAW,EACX,KAAK,SACL,kBAAiB,EAEhB,WACiB,CAAA,CAChB"}
+{"version":3,"file":"Accordion.mjs","names":[],"sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { ChevronDown } from 'lucide-react';\nimport {\n  type FC,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  useId,\n  useState,\n} from 'react';\nimport {\n  Button,\n  ButtonColor,\n  type ButtonProps,\n  ButtonVariant,\n} from '../Button';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\nexport interface AccordionProps\n  extends Omit<ButtonProps, 'children' | 'onToggle'> {\n  /** The content displayed in the accordion header */\n  header: ReactNode;\n  /** The collapsible content inside the accordion */\n  children: ReactNode;\n  /** Controls whether the accordion is open (controlled mode) */\n  isOpen?: boolean;\n  /** Default open state (uncontrolled mode) */\n  defaultIsOpen?: boolean;\n  /** Called when the accordion state changes */\n  onToggle?: (isOpen: boolean) => void;\n  /** Disable the accordion interaction */\n  disabled?: boolean;\n  /** Custom class for the content container */\n  contentClassName?: string;\n  /** Custom class for the header container */\n  headerClassName?: string;\n  /** Accessible label for screen readers */\n  'aria-label'?: string;\n  /** ID for the accordion content (for aria-controls) */\n  contentId?: string;\n}\n\n/**\n * Accordion component that allows the user to expand and collapse content.\n * It provides a header with a chevron icon that controls the visibility of the content.\n *\n * Features:\n * - Supports both controlled and uncontrolled modes\n * - Accessible with proper ARIA attributes\n * - Keyboard navigation support\n * - Smooth animations for expand/collapse\n * - Customizable styling\n *\n * @param header - The content of the header.\n * @param children - The content to be expanded and collapsed.\n * @param isOpen - Controlled state for whether the content is expanded.\n * @param defaultIsOpen - Default open state for uncontrolled mode.\n * @param onToggle - Callback when the accordion state changes.\n * @param disabled - Whether the accordion is disabled.\n * @param contentClassName - Custom class for the content container.\n * @param headerClassName - Custom class for the header.\n * @param contentId - ID for the content (used for aria-controls).\n *\n * @example\n * // Uncontrolled mode\n * <Accordion header=\"Accordion Header\" defaultIsOpen={true}>\n *   <p>Accordion content</p>\n * </Accordion>\n *\n * @example\n * // Controlled mode\n * <Accordion\n *   header=\"Controlled Accordion\"\n *   isOpen={isOpen}\n *   onToggle={setIsOpen}\n * >\n *   <p>Controlled content</p>\n * </Accordion>\n */\nexport const Accordion: FC<AccordionProps> = ({\n  children,\n  header,\n  isOpen,\n  defaultIsOpen = false,\n  onToggle,\n  onClick,\n  disabled = false,\n  contentClassName,\n  headerClassName,\n  contentId,\n  'aria-label': ariaLabel,\n  ...props\n}) => {\n  // Determine if we're in controlled or uncontrolled mode\n  const isControlled = isOpen !== undefined;\n  const [internalIsOpen, setInternalIsOpen] = useState(defaultIsOpen);\n  const id = useId();\n\n  // Use controlled value if provided, otherwise use internal state\n  const isExpandedState = isControlled ? isOpen : internalIsOpen;\n  const isHidden = !isExpandedState;\n\n  // Generate unique ID for content if not provided\n  const generatedContentId = contentId ?? `${id}-accordion-content`;\n\n  const handleToggle = (e: MouseEvent<HTMLButtonElement>) => {\n    if (disabled) return;\n\n    const newIsOpen = !isExpandedState;\n\n    // Update internal state if uncontrolled\n    if (!isControlled) {\n      setInternalIsOpen(newIsOpen);\n    }\n\n    // Call external handlers\n    onToggle?.(newIsOpen);\n    onClick?.(e);\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n    // Enter and Space should toggle the accordion\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      handleToggle(e as any);\n    }\n  };\n\n  return (\n    <div className=\"w-full\">\n      <Button\n        variant={ButtonVariant.HOVERABLE}\n        color={ButtonColor.TEXT}\n        onClick={handleToggle}\n        onKeyDown={handleKeyDown}\n        disabled={disabled}\n        isFullWidth\n        className={cn(\n          'flex items-center justify-between gap-2',\n          headerClassName\n        )}\n        IconRight={ChevronDown}\n        iconClassName={cn(\n          'transform transition-transform duration-500 ease-in-out',\n          isExpandedState ? 'rotate-0' : '-rotate-180'\n        )}\n        aria-expanded={isExpandedState}\n        aria-controls={generatedContentId}\n        aria-label={ariaLabel}\n        role=\"button\"\n        {...props}\n      >\n        {header}\n      </Button>\n\n      <MaxHeightSmoother\n        id={generatedContentId}\n        tabIndex={isHidden ? -1 : undefined}\n        isHidden={isHidden}\n        className={contentClassName}\n        role=\"region\"\n        aria-labelledby={generatedContentId}\n      >\n        {children}\n      </MaxHeightSmoother>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiFA,MAAa,aAAiC,EAC5C,UACA,QACA,QACA,gBAAgB,OAChB,UACA,SACA,WAAW,OACX,kBACA,iBACA,WACA,cAAc,WACd,GAAG,YACC;CAEJ,MAAM,eAAe,WAAW;CAChC,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,cAAc;CACnE,MAAM,KAAK,OAAO;CAGlB,MAAM,kBAAkB,eAAe,SAAS;CAChD,MAAM,WAAW,CAAC;CAGlB,MAAM,qBAAqB,aAAa,GAAG,GAAG;CAE9C,MAAM,gBAAgB,MAAqC;AACzD,MAAI,SAAU;EAEd,MAAM,YAAY,CAAC;AAGnB,MAAI,CAAC,aACH,mBAAkB,UAAU;AAI9B,aAAW,UAAU;AACrB,YAAU,EAAE;;CAGd,MAAM,iBAAiB,MAAwC;AAE7D,MAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,KAAE,gBAAgB;AAClB,gBAAa,EAAS;;;AAI1B,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,QAAD;GACE,SAAS,cAAc;GACvB,OAAO,YAAY;GACnB,SAAS;GACT,WAAW;GACD;GACV;GACA,WAAW,GACT,2CACA,gBACD;GACD,WAAW;GACX,eAAe,GACb,2DACA,kBAAkB,aAAa,cAChC;GACD,iBAAe;GACf,iBAAe;GACf,cAAY;GACZ,MAAK;GACL,GAAI;aAEH;GACM,GAET,oBAAC,mBAAD;GACE,IAAI;GACJ,UAAU,WAAW,KAAK;GAChB;GACV,WAAW;GACX,MAAK;GACL,mBAAiB;GAEhB;GACiB,EAChB"}

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

@@ -1 +1,3 @@
-import{Accordion as e}from"./Accordion.mjs";export{e as Accordion};
+import { Accordion } from "./Accordion.mjs";
+
+export { Accordion };

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

@@ -1,2 +1,127 @@
-import{cn as e}from"../../utils/cn.mjs";import{Loader as t}from"../Loader/index.mjs";import{useMemo as n}from"react";import{User as r}from"lucide-react";import{jsx as i,jsxs as a}from"react/jsx-runtime";const o=(e,t=` `)=>e?(t===` `?e.trim().split(/\s+/):e.split(t)).filter(Boolean).map(e=>e.charAt(0).toUpperCase()):[],s=({isClickable:e,onClick:t,...n})=>e&&t?i(`button`,{...n,onClick:t,type:`button`}):i(`div`,{...n,role:n.tabIndex!==void 0||n[`aria-label`]?`img`:void 0}),c=({fullname:c,className:l,isLoading:u=!1,isLoggedIn:d=!0,src:f,onClick:p,size:m=`md`,alt:h,focusable:g=!1,..._})=>{let v=!!f,y=(c??``).length>0,b=c?o(c):void 0,x=u,S=d&&!x&&v,C=d&&!x&&!S&&y,w=d&&!x&&!S&&!C,T=p!==void 0,E=n(()=>{let e={};return S&&h?e[`aria-label`]=h:S&&c?e[`aria-label`]=`Avatar of ${c}`:C&&c?e[`aria-label`]=`Avatar initials for ${c}`:w?e[`aria-label`]=`Default user avatar`:x&&(e[`aria-label`]=`Loading avatar`,e[`aria-busy`]=!0),!T&&g&&(e.tabIndex=0),T&&(e[`aria-describedby`]=`avatar-description`),e},[S,C,w,x,h,c,T,g]);return i(s,{isClickable:T,className:e(`rounded-full border-[1.3px] border-text p-[1.5px]`,m===`sm`&&`size-7 border-[1px] p-[1px]`,m===`md`&&`size-9`,m===`lg`&&`size-12`,m===`xl`&&`size-16`,T&&`cursor-pointer hover:opacity-80 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2`,!T&&g&&`focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2`,x&&`animate-pulse`,l),onClick:p,...E,..._,children:i(`div`,{className:`relative flex size-full flex-row items-center justify-center`,children:a(`div`,{className:`absolute top-0 left-0 flex size-full flex-col items-center justify-center rounded-full bg-text text-text-opposite`,children:[x&&i(t,{className:`w-3/4`,"aria-label":`Loading user avatar`}),S&&i(`img`,{className:`size-full rounded-full object-cover`,src:f,srcSet:f,alt:h??`Avatar of ${c}`,width:59,height:59,loading:`lazy`,draggable:!1}),C&&i(`div`,{className:`flex size-full items-center justify-center gap-[0.1rem] font-bold text-sm max-md:py-1`,children:b?.map((e,t)=>i(`span`,{children:e},`${e}-${t}`))}),w&&i(r,{size:e(m===`sm`&&14,m===`md`&&25,m===`lg`&&30,m===`xl`&&40),"aria-label":`Default user icon`})]})})})};export{c as Avatar,o as getCapitals};
+import { cn } from "../../utils/cn.mjs";
+import { Loader } from "../Loader/index.mjs";
+import { useMemo } from "react";
+import { User } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Avatar/index.tsx
+/**
+* @description Gets the capital letters from a name.
+* @param name - The name to extract capitals from.
+* @param separator - The separator to split the name (default is an empty string, which splits by each character).
+* @returns {string[]} An array of capital letters from the name.
+*/
+const getCapitals = (name, separator = " ") => {
+	if (!name) return [];
+	return (separator === " " ? name.trim().split(/\s+/) : name.split(separator)).filter(Boolean).map((word) => word.charAt(0).toUpperCase());
+};
+/**
+* Container component that renders either a button or div based on interactivity
+*/
+const Container = ({ isClickable, onClick, ...props }) => {
+	if (isClickable && onClick) return /* @__PURE__ */ jsx("button", {
+		...props,
+		onClick,
+		type: "button"
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		role: props.tabIndex !== void 0 || props["aria-label"] ? "img" : void 0
+	});
+};
+/**
+* Avatar component that displays user profile images, initials, or a default user icon.
+* Supports loading states, authentication states, and accessibility features.
+*
+* @example
+* ```tsx
+* // With image
+* <Avatar src="https://example.com/avatar.jpg" fullname="John Doe" />
+*
+* // With initials
+* <Avatar fullname="John Doe" />
+*
+* // Clickable avatar
+* <Avatar
+*   fullname="John Doe"
+*   onClick={(e) => console.log('Avatar clicked')}
+* />
+*
+* // Loading state
+* <Avatar isLoading fullname="John Doe" />
+* ```
+*/
+const Avatar = ({ fullname, className, isLoading = false, isLoggedIn = true, src, onClick, size = "md", alt, focusable = false, ...props }) => {
+	const isImageDefined = Boolean(src);
+	const isNameDefined = Boolean((fullname ?? "").length > 0);
+	const capitals = fullname ? getCapitals(fullname) : void 0;
+	const displayLoader = isLoading;
+	const displayAvatar = isLoggedIn && !displayLoader && isImageDefined;
+	const displayInitials = isLoggedIn && !displayLoader && !displayAvatar && isNameDefined;
+	const displayUserIcon = isLoggedIn && !displayLoader && !displayAvatar && !displayInitials;
+	const isClickable = onClick !== void 0;
+	const accessibilityProps = useMemo(() => {
+		const baseProps = {};
+		if (displayAvatar && alt) baseProps["aria-label"] = alt;
+		else if (displayAvatar && fullname) baseProps["aria-label"] = `Avatar of ${fullname}`;
+		else if (displayInitials && fullname) baseProps["aria-label"] = `Avatar initials for ${fullname}`;
+		else if (displayUserIcon) baseProps["aria-label"] = "Default user avatar";
+		else if (displayLoader) {
+			baseProps["aria-label"] = "Loading avatar";
+			baseProps["aria-busy"] = true;
+		}
+		if (!isClickable && focusable) baseProps.tabIndex = 0;
+		if (isClickable) baseProps["aria-describedby"] = "avatar-description";
+		return baseProps;
+	}, [
+		displayAvatar,
+		displayInitials,
+		displayUserIcon,
+		displayLoader,
+		alt,
+		fullname,
+		isClickable,
+		focusable
+	]);
+	return /* @__PURE__ */ jsx(Container, {
+		isClickable,
+		className: cn(`rounded-full border-[1.3px] border-text p-[1.5px]`, size === "sm" && "size-7 border-[1px] p-[1px]", size === "md" && "size-9", size === "lg" && "size-12", size === "xl" && "size-16", isClickable && `cursor-pointer hover:opacity-80 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2`, !isClickable && focusable && `focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2`, displayLoader && "animate-pulse", className),
+		onClick,
+		...accessibilityProps,
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "relative flex size-full flex-row items-center justify-center",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "absolute top-0 left-0 flex size-full flex-col items-center justify-center rounded-full bg-text text-text-opposite",
+				children: [
+					displayLoader && /* @__PURE__ */ jsx(Loader, {
+						className: "w-3/4",
+						"aria-label": "Loading user avatar"
+					}),
+					displayAvatar && /* @__PURE__ */ jsx("img", {
+						className: "size-full rounded-full object-cover",
+						src,
+						srcSet: src,
+						alt: alt ?? `Avatar of ${fullname}`,
+						width: 59,
+						height: 59,
+						loading: "lazy",
+						draggable: false
+					}),
+					displayInitials && /* @__PURE__ */ jsx("div", {
+						className: "flex size-full items-center justify-center gap-[0.1rem] font-bold text-sm max-md:py-1",
+						children: capitals?.map((capital, index) => /* @__PURE__ */ jsx("span", { children: capital }, `${capital}-${index}`))
+					}),
+					displayUserIcon && /* @__PURE__ */ jsx(User, {
+						size: cn(size === "sm" && 14, size === "md" && 25, size === "lg" && 30, size === "xl" && 40),
+						"aria-label": "Default user icon"
+					})
+				]
+			})
+		})
+	});
+};
+
+//#endregion
+export { Avatar, getCapitals };
 //# sourceMappingURL=index.mjs.map

package/dist/esm/components/Avatar/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Avatar/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { User } from 'lucide-react';\nimport type { ComponentProps, FC, HTMLAttributes } from 'react';\nimport { useMemo } from 'react';\nimport { Loader } from '../Loader';\n\n/**\n * Props for the Avatar component\n */\nexport interface AvatarProps extends Omit<ComponentProps<'button'>, 'onClick'> {\n  /** Image source URL for the avatar */\n  src?: string;\n  /** Full name used to generate initials and alt text */\n  fullname?: string;\n  /** Displays a loading spinner when true */\n  isLoading?: boolean;\n  /** Whether the user is authenticated */\n  isLoggedIn?: boolean;\n  /** Size variant of the avatar */\n  size?: 'sm' | 'md' | 'lg' | 'xl';\n  /** Click handler - when provided, makes the avatar clickable */\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Alternative text for accessibility */\n  alt?: string;\n  /** Whether the avatar should be focusable when not clickable */\n  focusable?: boolean;\n}\n\n/**\n * @description Gets the capital letters from a name.\n * @param name - The name to extract capitals from.\n * @param separator - The separator to split the name (default is an empty string, which splits by each character).\n * @returns {string[]} An array of capital letters from the name.\n */\nexport const getCapitals = (name: string, separator = ' '): string[] => {\n  if (!name) return [];\n\n  const parts =\n    separator === ' '\n      ? name.trim().split(/\\s+/) // handle multiple spaces\n      : name.split(separator);\n\n  return parts.filter(Boolean).map((word) => word.charAt(0).toUpperCase());\n};\n\n/**\n * Container component that renders either a button or div based on interactivity\n */\nconst Container: FC<\n  HTMLAttributes<HTMLElement> & {\n    isClickable: boolean;\n    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  }\n> = ({ isClickable, onClick, ...props }) => {\n  if (isClickable && onClick) {\n    return (\n      <button\n        {...(props as ComponentProps<'button'>)}\n        onClick={onClick}\n        type=\"button\"\n      />\n    );\n  }\n\n  return (\n    <div\n      {...(props as ComponentProps<'div'>)}\n      role={\n        props.tabIndex !== undefined || props['aria-label'] ? 'img' : undefined\n      }\n    />\n  );\n};\n\n/**\n * Avatar component that displays user profile images, initials, or a default user icon.\n * Supports loading states, authentication states, and accessibility features.\n *\n * @example\n * ```tsx\n * // With image\n * <Avatar src=\"https://example.com/avatar.jpg\" fullname=\"John Doe\" />\n *\n * // With initials\n * <Avatar fullname=\"John Doe\" />\n *\n * // Clickable avatar\n * <Avatar\n *   fullname=\"John Doe\"\n *   onClick={(e) => console.log('Avatar clicked')}\n * />\n *\n * // Loading state\n * <Avatar isLoading fullname=\"John Doe\" />\n * ```\n */\nexport const Avatar: FC<AvatarProps> = ({\n  fullname,\n  className,\n  isLoading = false,\n  isLoggedIn = true,\n  src,\n  onClick,\n  size = 'md',\n  alt,\n  focusable = false,\n  ...props\n}) => {\n  const isImageDefined = Boolean(src);\n  const isNameDefined = Boolean((fullname ?? '').length > 0);\n  const capitals = fullname ? getCapitals(fullname) : undefined;\n\n  // Display logic\n  const displayLoader = isLoading;\n  const displayAvatar = isLoggedIn && !displayLoader && isImageDefined;\n  const displayInitials =\n    isLoggedIn && !displayLoader && !displayAvatar && isNameDefined;\n  const displayUserIcon =\n    isLoggedIn && !displayLoader && !displayAvatar && !displayInitials;\n\n  const isClickable = onClick !== undefined;\n\n  // Accessibility attributes\n  const accessibilityProps = useMemo(() => {\n    const baseProps: Record<string, any> = {};\n\n    if (displayAvatar && alt) {\n      baseProps['aria-label'] = alt;\n    } else if (displayAvatar && fullname) {\n      baseProps['aria-label'] = `Avatar of ${fullname}`;\n    } else if (displayInitials && fullname) {\n      baseProps['aria-label'] = `Avatar initials for ${fullname}`;\n    } else if (displayUserIcon) {\n      baseProps['aria-label'] = 'Default user avatar';\n    } else if (displayLoader) {\n      baseProps['aria-label'] = 'Loading avatar';\n      baseProps['aria-busy'] = true;\n    }\n\n    if (!isClickable && focusable) {\n      baseProps.tabIndex = 0;\n    }\n\n    if (isClickable) {\n      baseProps['aria-describedby'] = 'avatar-description';\n    }\n\n    return baseProps;\n  }, [\n    displayAvatar,\n    displayInitials,\n    displayUserIcon,\n    displayLoader,\n    alt,\n    fullname,\n    isClickable,\n    focusable,\n  ]);\n\n  return (\n    <Container\n      isClickable={isClickable}\n      className={cn(\n        `rounded-full border-[1.3px] border-text p-[1.5px]`,\n        size === 'sm' && 'size-7 border-[1px] p-[1px]',\n        size === 'md' && 'size-9',\n        size === 'lg' && 'size-12',\n        size === 'xl' && 'size-16',\n        isClickable &&\n          `cursor-pointer hover:opacity-80 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2`,\n        !isClickable &&\n          focusable &&\n          `focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2`,\n        displayLoader && 'animate-pulse',\n        className\n      )}\n      onClick={onClick}\n      {...accessibilityProps}\n      {...props}\n    >\n      <div className=\"relative flex size-full flex-row items-center justify-center\">\n        <div className=\"absolute top-0 left-0 flex size-full flex-col items-center justify-center rounded-full bg-text text-text-opposite\">\n          {displayLoader && (\n            <Loader className=\"w-3/4\" aria-label=\"Loading user avatar\" />\n          )}\n\n          {displayAvatar && (\n            <img\n              className=\"size-full rounded-full object-cover\"\n              src={src}\n              srcSet={src}\n              alt={alt ?? `Avatar of ${fullname}`}\n              width={59}\n              height={59}\n              loading=\"lazy\"\n              draggable={false}\n            />\n          )}\n\n          {displayInitials && (\n            <div className=\"flex size-full items-center justify-center gap-[0.1rem] font-bold text-sm max-md:py-1\">\n              {capitals?.map((capital, index) => (\n                // biome-ignore lint/suspicious/noArrayIndexKey: Capitals are primitives and order is fixed\n                <span key={`${capital}-${index}`}>{capital}</span>\n              ))}\n            </div>\n          )}\n\n          {displayUserIcon && (\n            <User\n              size={cn(\n                size === 'sm' && 14,\n                size === 'md' && 25,\n                size === 'lg' && 30,\n                size === 'xl' && 40\n              )}\n              aria-label=\"Default user icon\"\n            />\n          )}\n        </div>\n      </div>\n    </Container>\n  );\n};\n"],"mappings":"2MAkCA,MAAa,GAAe,EAAc,EAAY,MAC/C,GAGH,IAAc,IACV,EAAK,MAAM,CAAC,MAAM,MAAM,CACxB,EAAK,MAAM,EAAU,EAEd,OAAO,QAAQ,CAAC,IAAK,GAAS,EAAK,OAAO,EAAE,CAAC,aAAa,CAAC,CAPtD,EAAE,CAahB,GAKD,CAAE,cAAa,UAAS,GAAG,KAC1B,GAAe,EAEf,EAAC,SAAD,CACE,GAAK,EACI,UACT,KAAK,SACL,CAAA,CAKJ,EAAC,MAAD,CACE,GAAK,EACL,KACE,EAAM,WAAa,IAAA,IAAa,EAAM,cAAgB,MAAQ,IAAA,GAEhE,CAAA,CA0BO,GAA2B,CACtC,WACA,YACA,YAAY,GACZ,aAAa,GACb,MACA,UACA,OAAO,KACP,MACA,YAAY,GACZ,GAAG,KACC,CACJ,IAAM,EAAiB,EAAQ,EACzB,GAAyB,GAAY,IAAI,OAAS,EAClD,EAAW,EAAW,EAAY,EAAS,CAAG,IAAA,GAG9C,EAAgB,EAChB,EAAgB,GAAc,CAAC,GAAiB,EAChD,EACJ,GAAc,CAAC,GAAiB,CAAC,GAAiB,EAC9C,EACJ,GAAc,CAAC,GAAiB,CAAC,GAAiB,CAAC,EAE/C,EAAc,IAAY,IAAA,GAG1B,EAAqB,MAAc,CACvC,IAAM,EAAiC,EAAE,CAuBzC,OArBI,GAAiB,EACnB,EAAU,cAAgB,EACjB,GAAiB,EAC1B,EAAU,cAAgB,aAAa,IAC9B,GAAmB,EAC5B,EAAU,cAAgB,uBAAuB,IACxC,EACT,EAAU,cAAgB,sBACjB,IACT,EAAU,cAAgB,iBAC1B,EAAU,aAAe,IAGvB,CAAC,GAAe,IAClB,EAAU,SAAW,GAGnB,IACF,EAAU,oBAAsB,sBAG3B,GACN,CACD,EACA,EACA,EACA,EACA,EACA,EACA,EACA,EACD,CAAC,CAEF,OACE,EAAC,EAAD,CACe,cACb,UAAW,EACT,oDACA,IAAS,MAAQ,8BACjB,IAAS,MAAQ,SACjB,IAAS,MAAQ,UACjB,IAAS,MAAQ,UACjB,GACE,0GACF,CAAC,GACC,GACA,0EACF,GAAiB,gBACjB,EACD,CACQ,UACT,GAAI,EACJ,GAAI,WAEJ,EAAC,MAAD,CAAK,UAAU,wEACb,EAAC,MAAD,CAAK,UAAU,6HAAf,CACG,GACC,EAAC,EAAD,CAAQ,UAAU,QAAQ,aAAW,sBAAwB,CAAA,CAG9D,GACC,EAAC,MAAD,CACE,UAAU,sCACL,MACL,OAAQ,EACR,IAAK,GAAO,aAAa,IACzB,MAAO,GACP,OAAQ,GACR,QAAQ,OACR,UAAW,GACX,CAAA,CAGH,GACC,EAAC,MAAD,CAAK,UAAU,iGACZ,GAAU,KAAK,EAAS,IAEvB,EAAC,OAAD,CAAA,SAAmC,EAAe,CAAvC,GAAG,EAAQ,GAAG,IAAyB,CAClD,CACE,CAAA,CAGP,GACC,EAAC,EAAD,CACE,KAAM,EACJ,IAAS,MAAQ,GACjB,IAAS,MAAQ,GACjB,IAAS,MAAQ,GACjB,IAAS,MAAQ,GAClB,CACD,aAAW,oBACX,CAAA,CAEA,GACF,CAAA,CACI,CAAA"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Avatar/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { User } from 'lucide-react';\nimport type { ComponentProps, FC, HTMLAttributes } from 'react';\nimport { useMemo } from 'react';\nimport { Loader } from '../Loader';\n\n/**\n * Props for the Avatar component\n */\nexport interface AvatarProps extends Omit<ComponentProps<'button'>, 'onClick'> {\n  /** Image source URL for the avatar */\n  src?: string;\n  /** Full name used to generate initials and alt text */\n  fullname?: string;\n  /** Displays a loading spinner when true */\n  isLoading?: boolean;\n  /** Whether the user is authenticated */\n  isLoggedIn?: boolean;\n  /** Size variant of the avatar */\n  size?: 'sm' | 'md' | 'lg' | 'xl';\n  /** Click handler - when provided, makes the avatar clickable */\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Alternative text for accessibility */\n  alt?: string;\n  /** Whether the avatar should be focusable when not clickable */\n  focusable?: boolean;\n}\n\n/**\n * @description Gets the capital letters from a name.\n * @param name - The name to extract capitals from.\n * @param separator - The separator to split the name (default is an empty string, which splits by each character).\n * @returns {string[]} An array of capital letters from the name.\n */\nexport const getCapitals = (name: string, separator = ' '): string[] => {\n  if (!name) return [];\n\n  const parts =\n    separator === ' '\n      ? name.trim().split(/\\s+/) // handle multiple spaces\n      : name.split(separator);\n\n  return parts.filter(Boolean).map((word) => word.charAt(0).toUpperCase());\n};\n\n/**\n * Container component that renders either a button or div based on interactivity\n */\nconst Container: FC<\n  HTMLAttributes<HTMLElement> & {\n    isClickable: boolean;\n    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  }\n> = ({ isClickable, onClick, ...props }) => {\n  if (isClickable && onClick) {\n    return (\n      <button\n        {...(props as ComponentProps<'button'>)}\n        onClick={onClick}\n        type=\"button\"\n      />\n    );\n  }\n\n  return (\n    <div\n      {...(props as ComponentProps<'div'>)}\n      role={\n        props.tabIndex !== undefined || props['aria-label'] ? 'img' : undefined\n      }\n    />\n  );\n};\n\n/**\n * Avatar component that displays user profile images, initials, or a default user icon.\n * Supports loading states, authentication states, and accessibility features.\n *\n * @example\n * ```tsx\n * // With image\n * <Avatar src=\"https://example.com/avatar.jpg\" fullname=\"John Doe\" />\n *\n * // With initials\n * <Avatar fullname=\"John Doe\" />\n *\n * // Clickable avatar\n * <Avatar\n *   fullname=\"John Doe\"\n *   onClick={(e) => console.log('Avatar clicked')}\n * />\n *\n * // Loading state\n * <Avatar isLoading fullname=\"John Doe\" />\n * ```\n */\nexport const Avatar: FC<AvatarProps> = ({\n  fullname,\n  className,\n  isLoading = false,\n  isLoggedIn = true,\n  src,\n  onClick,\n  size = 'md',\n  alt,\n  focusable = false,\n  ...props\n}) => {\n  const isImageDefined = Boolean(src);\n  const isNameDefined = Boolean((fullname ?? '').length > 0);\n  const capitals = fullname ? getCapitals(fullname) : undefined;\n\n  // Display logic\n  const displayLoader = isLoading;\n  const displayAvatar = isLoggedIn && !displayLoader && isImageDefined;\n  const displayInitials =\n    isLoggedIn && !displayLoader && !displayAvatar && isNameDefined;\n  const displayUserIcon =\n    isLoggedIn && !displayLoader && !displayAvatar && !displayInitials;\n\n  const isClickable = onClick !== undefined;\n\n  // Accessibility attributes\n  const accessibilityProps = useMemo(() => {\n    const baseProps: Record<string, any> = {};\n\n    if (displayAvatar && alt) {\n      baseProps['aria-label'] = alt;\n    } else if (displayAvatar && fullname) {\n      baseProps['aria-label'] = `Avatar of ${fullname}`;\n    } else if (displayInitials && fullname) {\n      baseProps['aria-label'] = `Avatar initials for ${fullname}`;\n    } else if (displayUserIcon) {\n      baseProps['aria-label'] = 'Default user avatar';\n    } else if (displayLoader) {\n      baseProps['aria-label'] = 'Loading avatar';\n      baseProps['aria-busy'] = true;\n    }\n\n    if (!isClickable && focusable) {\n      baseProps.tabIndex = 0;\n    }\n\n    if (isClickable) {\n      baseProps['aria-describedby'] = 'avatar-description';\n    }\n\n    return baseProps;\n  }, [\n    displayAvatar,\n    displayInitials,\n    displayUserIcon,\n    displayLoader,\n    alt,\n    fullname,\n    isClickable,\n    focusable,\n  ]);\n\n  return (\n    <Container\n      isClickable={isClickable}\n      className={cn(\n        `rounded-full border-[1.3px] border-text p-[1.5px]`,\n        size === 'sm' && 'size-7 border-[1px] p-[1px]',\n        size === 'md' && 'size-9',\n        size === 'lg' && 'size-12',\n        size === 'xl' && 'size-16',\n        isClickable &&\n          `cursor-pointer hover:opacity-80 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2`,\n        !isClickable &&\n          focusable &&\n          `focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2`,\n        displayLoader && 'animate-pulse',\n        className\n      )}\n      onClick={onClick}\n      {...accessibilityProps}\n      {...props}\n    >\n      <div className=\"relative flex size-full flex-row items-center justify-center\">\n        <div className=\"absolute top-0 left-0 flex size-full flex-col items-center justify-center rounded-full bg-text text-text-opposite\">\n          {displayLoader && (\n            <Loader className=\"w-3/4\" aria-label=\"Loading user avatar\" />\n          )}\n\n          {displayAvatar && (\n            <img\n              className=\"size-full rounded-full object-cover\"\n              src={src}\n              srcSet={src}\n              alt={alt ?? `Avatar of ${fullname}`}\n              width={59}\n              height={59}\n              loading=\"lazy\"\n              draggable={false}\n            />\n          )}\n\n          {displayInitials && (\n            <div className=\"flex size-full items-center justify-center gap-[0.1rem] font-bold text-sm max-md:py-1\">\n              {capitals?.map((capital, index) => (\n                // biome-ignore lint/suspicious/noArrayIndexKey: Capitals are primitives and order is fixed\n                <span key={`${capital}-${index}`}>{capital}</span>\n              ))}\n            </div>\n          )}\n\n          {displayUserIcon && (\n            <User\n              size={cn(\n                size === 'sm' && 14,\n                size === 'md' && 25,\n                size === 'lg' && 30,\n                size === 'xl' && 40\n              )}\n              aria-label=\"Default user icon\"\n            />\n          )}\n        </div>\n      </div>\n    </Container>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAkCA,MAAa,eAAe,MAAc,YAAY,QAAkB;AACtE,KAAI,CAAC,KAAM,QAAO,EAAE;AAOpB,SAJE,cAAc,MACV,KAAK,MAAM,CAAC,MAAM,MAAM,GACxB,KAAK,MAAM,UAAU,EAEd,OAAO,QAAQ,CAAC,KAAK,SAAS,KAAK,OAAO,EAAE,CAAC,aAAa,CAAC;;;;;AAM1E,MAAM,aAKD,EAAE,aAAa,SAAS,GAAG,YAAY;AAC1C,KAAI,eAAe,QACjB,QACE,oBAAC,UAAD;EACE,GAAK;EACI;EACT,MAAK;EACL;AAIN,QACE,oBAAC,OAAD;EACE,GAAK;EACL,MACE,MAAM,aAAa,UAAa,MAAM,gBAAgB,QAAQ;EAEhE;;;;;;;;;;;;;;;;;;;;;;;;AA0BN,MAAa,UAA2B,EACtC,UACA,WACA,YAAY,OACZ,aAAa,MACb,KACA,SACA,OAAO,MACP,KACA,YAAY,OACZ,GAAG,YACC;CACJ,MAAM,iBAAiB,QAAQ,IAAI;CACnC,MAAM,gBAAgB,SAAS,YAAY,IAAI,SAAS,EAAE;CAC1D,MAAM,WAAW,WAAW,YAAY,SAAS,GAAG;CAGpD,MAAM,gBAAgB;CACtB,MAAM,gBAAgB,cAAc,CAAC,iBAAiB;CACtD,MAAM,kBACJ,cAAc,CAAC,iBAAiB,CAAC,iBAAiB;CACpD,MAAM,kBACJ,cAAc,CAAC,iBAAiB,CAAC,iBAAiB,CAAC;CAErD,MAAM,cAAc,YAAY;CAGhC,MAAM,qBAAqB,cAAc;EACvC,MAAM,YAAiC,EAAE;AAEzC,MAAI,iBAAiB,IACnB,WAAU,gBAAgB;WACjB,iBAAiB,SAC1B,WAAU,gBAAgB,aAAa;WAC9B,mBAAmB,SAC5B,WAAU,gBAAgB,uBAAuB;WACxC,gBACT,WAAU,gBAAgB;WACjB,eAAe;AACxB,aAAU,gBAAgB;AAC1B,aAAU,eAAe;;AAG3B,MAAI,CAAC,eAAe,UAClB,WAAU,WAAW;AAGvB,MAAI,YACF,WAAU,sBAAsB;AAGlC,SAAO;IACN;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,WAAD;EACe;EACb,WAAW,GACT,qDACA,SAAS,QAAQ,+BACjB,SAAS,QAAQ,UACjB,SAAS,QAAQ,WACjB,SAAS,QAAQ,WACjB,eACE,2GACF,CAAC,eACC,aACA,2EACF,iBAAiB,iBACjB,UACD;EACQ;EACT,GAAI;EACJ,GAAI;YAEJ,oBAAC,OAAD;GAAK,WAAU;aACb,qBAAC,OAAD;IAAK,WAAU;cAAf;KACG,iBACC,oBAAC,QAAD;MAAQ,WAAU;MAAQ,cAAW;MAAwB;KAG9D,iBACC,oBAAC,OAAD;MACE,WAAU;MACL;MACL,QAAQ;MACR,KAAK,OAAO,aAAa;MACzB,OAAO;MACP,QAAQ;MACR,SAAQ;MACR,WAAW;MACX;KAGH,mBACC,oBAAC,OAAD;MAAK,WAAU;gBACZ,UAAU,KAAK,SAAS,UAEvB,oBAAC,QAAD,YAAmC,SAAe,EAAvC,GAAG,QAAQ,GAAG,QAAyB,CAClD;MACE;KAGP,mBACC,oBAAC,MAAD;MACE,MAAM,GACJ,SAAS,QAAQ,IACjB,SAAS,QAAQ,IACjB,SAAS,QAAQ,IACjB,SAAS,QAAQ,GAClB;MACD,cAAW;MACX;KAEA;;GACF;EACI"}

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

@@ -1,2 +1,151 @@
-import{cn as e}from"../../utils/cn.mjs";import{cva as t}from"class-variance-authority";import{jsx as n,jsxs as r}from"react/jsx-runtime";let i=function(e){return e.PRIMARY=`primary`,e.SECONDARY=`secondary`,e.DESTRUCTIVE=`destructive`,e.SUCCESS=`success`,e.ERROR=`error`,e.NEUTRAL=`neutral`,e.LIGHT=`light`,e.DARK=`dark`,e.TEXT=`text`,e.CUSTOM=`custom`,e}({}),a=function(e){return e.DEFAULT=`default`,e.NONE=`none`,e.OUTLINE=`outline`,e.HOVERABLE=`hoverable`,e}({}),o=function(e){return e.SMALL=`sm`,e.MEDIUM=`md`,e.LARGE=`lg`,e}({});const s=t(`inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold text-xs transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2`,{variants:{color:{[`${i.PRIMARY}`]:`border-primary bg-primary text-primary hover:bg-primary-500`,[`${i.SECONDARY}`]:`border-secondary bg-secondary text-secondary hover:bg-secondary-300`,[`${i.DESTRUCTIVE}`]:`border-destructive bg-destructive text-destructive hover:bg-destructive-500`,[`${i.SUCCESS}`]:`border-success bg-success text-success hover:bg-success-500`,[`${i.ERROR}`]:`border-error bg-error text-error hover:bg-error-500`,[`${i.NEUTRAL}`]:`border-neutral bg-neutral text-neutral hover:bg-neutral-600`,[`${i.LIGHT}`]:`border-white bg-white text-white hover:bg-neutral-500`,[`${i.DARK}`]:`border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900`,[`${i.TEXT}`]:`border-text bg-text text-text hover:opacity-80`,[`${i.CUSTOM}`]:``},variant:{[`${a.DEFAULT}`]:`rounded-lg text-text-opposite`,[`${a.NONE}`]:`border-none bg-opacity-0 text-inherit hover:bg-opacity-0`,[`${a.OUTLINE}`]:`rounded-lg border-[1.3px] bg-opacity-0 hover:bg-opacity-30`,[`${a.HOVERABLE}`]:`rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10`},size:{[`${o.SMALL}`]:`px-2 py-0.5 text-xs`,[`${o.MEDIUM}`]:`px-2.5 py-0.5 text-xs`,[`${o.LARGE}`]:`px-3 py-1 text-sm`}},defaultVariants:{variant:a.DEFAULT,color:i.PRIMARY,size:o.MEDIUM}}),c=({className:t,variant:c=a.DEFAULT,color:l=i.PRIMARY,size:u=o.MEDIUM,children:d,clickable:f=!1,dismissible:p=!1,onClick:m,onDismiss:h,role:g,tabIndex:_,"aria-label":v,...y})=>{let b=f?`button`:`span`,x=e=>{f&&m&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),m(e))},S=e=>{e.stopPropagation(),h?.()};return r(b,{className:e(s({variant:c,color:l,size:u}),f&&`cursor-pointer hover:opacity-80 focus-visible:ring-2 focus-visible:ring-offset-2`,p&&`pr-1`,t),onClick:f?m:void 0,onKeyDown:f?x:void 0,role:g||(f?`button`:`status`),tabIndex:f?_??0:_,"aria-label":v||(f?`${d} button`:void 0),...y,children:[d,p&&n(`button`,{type:`button`,className:`ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-black/10 focus:outline-none focus:ring-1 focus:ring-offset-1`,onClick:S,"aria-label":`Remove ${d} badge`,children:r(`svg`,{className:`size-3`,viewBox:`0 0 20 20`,fill:`currentColor`,"aria-label":`Remove badge`,children:[n(`title`,{children:`Remove badge`}),n(`path`,{fillRule:`evenodd`,d:`M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z`,clipRule:`evenodd`})]})})]})};export{c as Badge,i as BadgeColor,o as BadgeSize,a as BadgeVariant,s as badgeVariants};
+import { cn } from "../../utils/cn.mjs";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Badge/index.tsx
+/**
+* Badge color variants enum
+* @description Defines the available color themes for the badge component
+*/
+let BadgeColor = /* @__PURE__ */ function(BadgeColor) {
+	BadgeColor["PRIMARY"] = "primary";
+	BadgeColor["SECONDARY"] = "secondary";
+	BadgeColor["DESTRUCTIVE"] = "destructive";
+	BadgeColor["SUCCESS"] = "success";
+	BadgeColor["ERROR"] = "error";
+	BadgeColor["NEUTRAL"] = "neutral";
+	BadgeColor["LIGHT"] = "light";
+	BadgeColor["DARK"] = "dark";
+	BadgeColor["TEXT"] = "text";
+	BadgeColor["CUSTOM"] = "custom";
+	return BadgeColor;
+}({});
+/**
+* Badge visual variants enum
+* @description Defines the available visual styles for the badge component
+*/
+let BadgeVariant = /* @__PURE__ */ function(BadgeVariant) {
+	BadgeVariant["DEFAULT"] = "default";
+	BadgeVariant["NONE"] = "none";
+	BadgeVariant["OUTLINE"] = "outline";
+	BadgeVariant["HOVERABLE"] = "hoverable";
+	return BadgeVariant;
+}({});
+/**
+* Badge size variants enum
+* @description Defines the available sizes for the badge component
+*/
+let BadgeSize = /* @__PURE__ */ function(BadgeSize) {
+	BadgeSize["SMALL"] = "sm";
+	BadgeSize["MEDIUM"] = "md";
+	BadgeSize["LARGE"] = "lg";
+	return BadgeSize;
+}({});
+/**
+* Badge component variants using class-variance-authority
+* @description Defines the styling variants for different badge combinations
+*/
+const badgeVariants = cva("inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold text-xs transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2", {
+	variants: {
+		color: {
+			[`${BadgeColor.PRIMARY}`]: "border-primary bg-primary text-primary hover:bg-primary-500",
+			[`${BadgeColor.SECONDARY}`]: "border-secondary bg-secondary text-secondary hover:bg-secondary-300",
+			[`${BadgeColor.DESTRUCTIVE}`]: "border-destructive bg-destructive text-destructive hover:bg-destructive-500",
+			[`${BadgeColor.SUCCESS}`]: "border-success bg-success text-success hover:bg-success-500",
+			[`${BadgeColor.ERROR}`]: "border-error bg-error text-error hover:bg-error-500",
+			[`${BadgeColor.NEUTRAL}`]: "border-neutral bg-neutral text-neutral hover:bg-neutral-600",
+			[`${BadgeColor.LIGHT}`]: "border-white bg-white text-white hover:bg-neutral-500",
+			[`${BadgeColor.DARK}`]: "border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900",
+			[`${BadgeColor.TEXT}`]: "border-text bg-text text-text hover:opacity-80",
+			[`${BadgeColor.CUSTOM}`]: ""
+		},
+		variant: {
+			[`${BadgeVariant.DEFAULT}`]: "rounded-lg text-text-opposite",
+			[`${BadgeVariant.NONE}`]: "border-none bg-opacity-0 text-inherit hover:bg-opacity-0",
+			[`${BadgeVariant.OUTLINE}`]: "rounded-lg border-[1.3px] bg-opacity-0 hover:bg-opacity-30",
+			[`${BadgeVariant.HOVERABLE}`]: "rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10"
+		},
+		size: {
+			[`${BadgeSize.SMALL}`]: "px-2 py-0.5 text-xs",
+			[`${BadgeSize.MEDIUM}`]: "px-2.5 py-0.5 text-xs",
+			[`${BadgeSize.LARGE}`]: "px-3 py-1 text-sm"
+		}
+	},
+	defaultVariants: {
+		variant: BadgeVariant.DEFAULT,
+		color: BadgeColor.PRIMARY,
+		size: BadgeSize.MEDIUM
+	}
+});
+/**
+* Badge component for displaying status indicators, labels, and notifications
+*
+* @description A flexible badge component that supports multiple visual styles, colors, and interactive features.
+* It maintains accessibility standards and provides comprehensive customization options.
+*
+* @example
+* ```tsx
+* // Basic badge
+* <Badge>New</Badge>
+*
+* // Colored badge
+* <Badge color={BadgeColor.DESTRUCTIVE}>Error</Badge>
+*
+* // Clickable badge
+* <Badge clickable onClick={() => console.log('clicked')}>
+*   Clickable
+* </Badge>
+*
+* // Dismissible badge
+* <Badge dismissible onDismiss={() => console.log('dismissed')}>
+*   Dismissible
+* </Badge>
+* ```
+*/
+const Badge = ({ className, variant = BadgeVariant.DEFAULT, color = BadgeColor.PRIMARY, size = BadgeSize.MEDIUM, children, clickable = false, dismissible = false, onClick, onDismiss, role, tabIndex, "aria-label": ariaLabel, ...props }) => {
+	const Component = clickable ? "button" : "span";
+	const handleKeyDown = (event) => {
+		if (clickable && onClick && (event.key === "Enter" || event.key === " ")) {
+			event.preventDefault();
+			onClick(event);
+		}
+	};
+	const handleDismiss = (event) => {
+		event.stopPropagation();
+		onDismiss?.();
+	};
+	return /* @__PURE__ */ jsxs(Component, {
+		className: cn(badgeVariants({
+			variant,
+			color,
+			size
+		}), clickable && "cursor-pointer hover:opacity-80 focus-visible:ring-2 focus-visible:ring-offset-2", dismissible && "pr-1", className),
+		onClick: clickable ? onClick : void 0,
+		onKeyDown: clickable ? handleKeyDown : void 0,
+		role: role || (clickable ? "button" : "status"),
+		tabIndex: clickable ? tabIndex ?? 0 : tabIndex,
+		"aria-label": ariaLabel || (clickable ? `${children} button` : void 0),
+		...props,
+		children: [children, dismissible && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-black/10 focus:outline-none focus:ring-1 focus:ring-offset-1",
+			onClick: handleDismiss,
+			"aria-label": `Remove ${children} badge`,
+			children: /* @__PURE__ */ jsxs("svg", {
+				className: "size-3",
+				viewBox: "0 0 20 20",
+				fill: "currentColor",
+				"aria-label": "Remove badge",
+				children: [/* @__PURE__ */ jsx("title", { children: "Remove badge" }), /* @__PURE__ */ jsx("path", {
+					fillRule: "evenodd",
+					d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+					clipRule: "evenodd"
+				})]
+			})
+		})]
+	});
+};
+
+//#endregion
+export { Badge, BadgeColor, BadgeSize, BadgeVariant, badgeVariants };
 //# sourceMappingURL=index.mjs.map

package/dist/esm/components/Badge/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Badge/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type { HTMLAttributes } from 'react';\n\n/**\n * Badge color variants enum\n * @description Defines the available color themes for the badge component\n */\nexport enum BadgeColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive',\n  SUCCESS = 'success',\n  ERROR = 'error',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  DARK = 'dark',\n  TEXT = 'text',\n  CUSTOM = 'custom',\n}\n\n/**\n * Badge visual variants enum\n * @description Defines the available visual styles for the badge component\n */\nexport enum BadgeVariant {\n  DEFAULT = 'default',\n  NONE = 'none',\n  OUTLINE = 'outline',\n  HOVERABLE = 'hoverable',\n}\n\n/**\n * Badge size variants enum\n * @description Defines the available sizes for the badge component\n */\nexport enum BadgeSize {\n  SMALL = 'sm',\n  MEDIUM = 'md',\n  LARGE = 'lg',\n}\n\n/**\n * Badge component variants using class-variance-authority\n * @description Defines the styling variants for different badge combinations\n */\nexport const badgeVariants = cva(\n  'inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold text-xs transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2',\n  {\n    variants: {\n      color: {\n        [`${BadgeColor.PRIMARY}`]:\n          'border-primary bg-primary text-primary hover:bg-primary-500',\n        [`${BadgeColor.SECONDARY}`]:\n          'border-secondary bg-secondary text-secondary hover:bg-secondary-300',\n        [`${BadgeColor.DESTRUCTIVE}`]:\n          'border-destructive bg-destructive text-destructive hover:bg-destructive-500',\n        [`${BadgeColor.SUCCESS}`]:\n          'border-success bg-success text-success hover:bg-success-500',\n        [`${BadgeColor.ERROR}`]:\n          'border-error bg-error text-error hover:bg-error-500',\n        [`${BadgeColor.NEUTRAL}`]:\n          'border-neutral bg-neutral text-neutral hover:bg-neutral-600',\n        [`${BadgeColor.LIGHT}`]:\n          'border-white bg-white text-white hover:bg-neutral-500',\n        [`${BadgeColor.DARK}`]:\n          'border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900',\n        [`${BadgeColor.TEXT}`]:\n          'border-text bg-text text-text hover:opacity-80',\n        [`${BadgeColor.CUSTOM}`]: '',\n      },\n      variant: {\n        [`${BadgeVariant.DEFAULT}`]: 'rounded-lg text-text-opposite',\n        [`${BadgeVariant.NONE}`]:\n          'border-none bg-opacity-0 text-inherit hover:bg-opacity-0',\n        [`${BadgeVariant.OUTLINE}`]:\n          'rounded-lg border-[1.3px] bg-opacity-0 hover:bg-opacity-30',\n        [`${BadgeVariant.HOVERABLE}`]:\n          'rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10',\n      },\n      size: {\n        [`${BadgeSize.SMALL}`]: 'px-2 py-0.5 text-xs',\n        [`${BadgeSize.MEDIUM}`]: 'px-2.5 py-0.5 text-xs',\n        [`${BadgeSize.LARGE}`]: 'px-3 py-1 text-sm',\n      },\n    },\n    defaultVariants: {\n      variant: BadgeVariant.DEFAULT,\n      color: BadgeColor.PRIMARY,\n      size: BadgeSize.MEDIUM,\n    },\n  }\n);\n\n/**\n * Badge component props interface\n * @description Comprehensive props for the Badge component with accessibility and interactive features\n */\nexport type BadgeProps = HTMLAttributes<HTMLElement> & {\n  /** The content to display inside the badge */\n  children?: React.ReactNode;\n  /** Color theme variant */\n  color?: BadgeColor | `${BadgeColor}`;\n  /** Visual style variant */\n  variant?: BadgeVariant | `${BadgeVariant}`;\n  /** Size of the badge */\n  size?: BadgeSize | `${BadgeSize}`;\n  /** Whether the badge is clickable */\n  clickable?: boolean;\n  /** Whether the badge is dismissible (shows close button) */\n  dismissible?: boolean;\n  /** Click handler for the badge */\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Click handler for the dismiss button */\n  onDismiss?: () => void;\n  /** ARIA label for accessibility */\n  'aria-label'?: string;\n  /** Badge role for accessibility (default: 'status') */\n  role?: 'status' | 'button' | 'generic';\n  /** Whether badge should be focusable */\n  tabIndex?: number;\n};\n\n/**\n * Utility type for badge variant props\n */\nexport type BadgeVariantProps = VariantProps<typeof badgeVariants>;\n\n/**\n * Badge component for displaying status indicators, labels, and notifications\n *\n * @description A flexible badge component that supports multiple visual styles, colors, and interactive features.\n * It maintains accessibility standards and provides comprehensive customization options.\n *\n * @example\n * ```tsx\n * // Basic badge\n * <Badge>New</Badge>\n *\n * // Colored badge\n * <Badge color={BadgeColor.DESTRUCTIVE}>Error</Badge>\n *\n * // Clickable badge\n * <Badge clickable onClick={() => console.log('clicked')}>\n *   Clickable\n * </Badge>\n *\n * // Dismissible badge\n * <Badge dismissible onDismiss={() => console.log('dismissed')}>\n *   Dismissible\n * </Badge>\n * ```\n */\nexport const Badge: React.FC<BadgeProps> = ({\n  className,\n  variant = BadgeVariant.DEFAULT,\n  color = BadgeColor.PRIMARY,\n  size = BadgeSize.MEDIUM,\n  children,\n  clickable = false,\n  dismissible = false,\n  onClick,\n  onDismiss,\n  role,\n  tabIndex,\n  'aria-label': ariaLabel,\n  ...props\n}) => {\n  const Component = clickable ? 'button' : 'span';\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    if (clickable && onClick && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault();\n      onClick(event as any);\n    }\n  };\n\n  const handleDismiss = (event: React.MouseEvent) => {\n    event.stopPropagation();\n    onDismiss?.();\n  };\n\n  return (\n    <Component\n      className={cn(\n        badgeVariants({ variant, color, size }),\n        clickable &&\n          'cursor-pointer hover:opacity-80 focus-visible:ring-2 focus-visible:ring-offset-2',\n        dismissible && 'pr-1',\n        className\n      )}\n      onClick={clickable ? onClick : undefined}\n      onKeyDown={clickable ? handleKeyDown : undefined}\n      role={role || (clickable ? 'button' : 'status')}\n      tabIndex={clickable ? (tabIndex ?? 0) : tabIndex}\n      aria-label={ariaLabel || (clickable ? `${children} button` : undefined)}\n      {...props}\n    >\n      {children}\n      {dismissible && (\n        <button\n          type=\"button\"\n          className=\"ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-black/10 focus:outline-none focus:ring-1 focus:ring-offset-1\"\n          onClick={handleDismiss}\n          aria-label={`Remove ${children} badge`}\n        >\n          <svg\n            className=\"size-3\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n            aria-label=\"Remove badge\"\n          >\n            <title>Remove badge</title>\n            <path\n              fillRule=\"evenodd\"\n              d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n              clipRule=\"evenodd\"\n            />\n          </svg>\n        </button>\n      )}\n    </Component>\n  );\n};\n"],"mappings":"yIAQA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,QAAA,UACA,EAAA,UAAA,YACA,EAAA,YAAA,cACA,EAAA,QAAA,UACA,EAAA,MAAA,QACA,EAAA,QAAA,UACA,EAAA,MAAA,QACA,EAAA,KAAA,OACA,EAAA,KAAA,OACA,EAAA,OAAA,eACD,CAMW,EAAL,SAAA,EAAA,OACL,GAAA,QAAA,UACA,EAAA,KAAA,OACA,EAAA,QAAA,UACA,EAAA,UAAA,kBACD,CAMW,EAAL,SAAA,EAAA,OACL,GAAA,MAAA,KACA,EAAA,OAAA,KACA,EAAA,MAAA,WACD,CAMD,MAAa,EAAgB,EAC3B,yKACA,CACE,SAAU,CACR,MAAO,EACJ,GAAG,EAAW,WACb,+DACD,GAAG,EAAW,aACb,uEACD,GAAG,EAAW,eACb,+EACD,GAAG,EAAW,WACb,+DACD,GAAG,EAAW,SACb,uDACD,GAAG,EAAW,WACb,+DACD,GAAG,EAAW,SACb,yDACD,GAAG,EAAW,QACb,2EACD,GAAG,EAAW,QACb,kDACD,GAAG,EAAW,UAAW,GAC3B,CACD,QAAS,EACN,GAAG,EAAa,WAAY,iCAC5B,GAAG,EAAa,QACf,4DACD,GAAG,EAAa,WACf,8DACD,GAAG,EAAa,aACf,qEACH,CACD,KAAM,EACH,GAAG,EAAU,SAAU,uBACvB,GAAG,EAAU,UAAW,yBACxB,GAAG,EAAU,SAAU,oBACzB,CACF,CACD,gBAAiB,CACf,QAAS,EAAa,QACtB,MAAO,EAAW,QAClB,KAAM,EAAU,OACjB,CACF,CACF,CA6DY,GAA+B,CAC1C,YACA,UAAU,EAAa,QACvB,QAAQ,EAAW,QACnB,OAAO,EAAU,OACjB,WACA,YAAY,GACZ,cAAc,GACd,UACA,YACA,OACA,WACA,aAAc,EACd,GAAG,KACC,CACJ,IAAM,EAAY,EAAY,SAAW,OAEnC,EAAiB,GAA4C,CAC7D,GAAa,IAAY,EAAM,MAAQ,SAAW,EAAM,MAAQ,OAClE,EAAM,gBAAgB,CACtB,EAAQ,EAAa,GAInB,EAAiB,GAA4B,CACjD,EAAM,iBAAiB,CACvB,KAAa,EAGf,OACE,EAAC,EAAD,CACE,UAAW,EACT,EAAc,CAAE,UAAS,QAAO,OAAM,CAAC,CACvC,GACE,mFACF,GAAe,OACf,EACD,CACD,QAAS,EAAY,EAAU,IAAA,GAC/B,UAAW,EAAY,EAAgB,IAAA,GACvC,KAAM,IAAS,EAAY,SAAW,UACtC,SAAU,EAAa,GAAY,EAAK,EACxC,aAAY,IAAc,EAAY,GAAG,EAAS,SAAW,IAAA,IAC7D,GAAI,WAbN,CAeG,EACA,GACC,EAAC,SAAD,CACE,KAAK,SACL,UAAU,0IACV,QAAS,EACT,aAAY,UAAU,EAAS,iBAE/B,EAAC,MAAD,CACE,UAAU,SACV,QAAQ,YACR,KAAK,eACL,aAAW,wBAJb,CAME,EAAC,QAAD,CAAA,SAAO,eAAoB,CAAA,CAC3B,EAAC,OAAD,CACE,SAAS,UACT,EAAE,qMACF,SAAS,UACT,CAAA,CACE,GACC,CAAA,CAED"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Badge/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type { HTMLAttributes } from 'react';\n\n/**\n * Badge color variants enum\n * @description Defines the available color themes for the badge component\n */\nexport enum BadgeColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive',\n  SUCCESS = 'success',\n  ERROR = 'error',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  DARK = 'dark',\n  TEXT = 'text',\n  CUSTOM = 'custom',\n}\n\n/**\n * Badge visual variants enum\n * @description Defines the available visual styles for the badge component\n */\nexport enum BadgeVariant {\n  DEFAULT = 'default',\n  NONE = 'none',\n  OUTLINE = 'outline',\n  HOVERABLE = 'hoverable',\n}\n\n/**\n * Badge size variants enum\n * @description Defines the available sizes for the badge component\n */\nexport enum BadgeSize {\n  SMALL = 'sm',\n  MEDIUM = 'md',\n  LARGE = 'lg',\n}\n\n/**\n * Badge component variants using class-variance-authority\n * @description Defines the styling variants for different badge combinations\n */\nexport const badgeVariants = cva(\n  'inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold text-xs transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2',\n  {\n    variants: {\n      color: {\n        [`${BadgeColor.PRIMARY}`]:\n          'border-primary bg-primary text-primary hover:bg-primary-500',\n        [`${BadgeColor.SECONDARY}`]:\n          'border-secondary bg-secondary text-secondary hover:bg-secondary-300',\n        [`${BadgeColor.DESTRUCTIVE}`]:\n          'border-destructive bg-destructive text-destructive hover:bg-destructive-500',\n        [`${BadgeColor.SUCCESS}`]:\n          'border-success bg-success text-success hover:bg-success-500',\n        [`${BadgeColor.ERROR}`]:\n          'border-error bg-error text-error hover:bg-error-500',\n        [`${BadgeColor.NEUTRAL}`]:\n          'border-neutral bg-neutral text-neutral hover:bg-neutral-600',\n        [`${BadgeColor.LIGHT}`]:\n          'border-white bg-white text-white hover:bg-neutral-500',\n        [`${BadgeColor.DARK}`]:\n          'border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900',\n        [`${BadgeColor.TEXT}`]:\n          'border-text bg-text text-text hover:opacity-80',\n        [`${BadgeColor.CUSTOM}`]: '',\n      },\n      variant: {\n        [`${BadgeVariant.DEFAULT}`]: 'rounded-lg text-text-opposite',\n        [`${BadgeVariant.NONE}`]:\n          'border-none bg-opacity-0 text-inherit hover:bg-opacity-0',\n        [`${BadgeVariant.OUTLINE}`]:\n          'rounded-lg border-[1.3px] bg-opacity-0 hover:bg-opacity-30',\n        [`${BadgeVariant.HOVERABLE}`]:\n          'rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10',\n      },\n      size: {\n        [`${BadgeSize.SMALL}`]: 'px-2 py-0.5 text-xs',\n        [`${BadgeSize.MEDIUM}`]: 'px-2.5 py-0.5 text-xs',\n        [`${BadgeSize.LARGE}`]: 'px-3 py-1 text-sm',\n      },\n    },\n    defaultVariants: {\n      variant: BadgeVariant.DEFAULT,\n      color: BadgeColor.PRIMARY,\n      size: BadgeSize.MEDIUM,\n    },\n  }\n);\n\n/**\n * Badge component props interface\n * @description Comprehensive props for the Badge component with accessibility and interactive features\n */\nexport type BadgeProps = HTMLAttributes<HTMLElement> & {\n  /** The content to display inside the badge */\n  children?: React.ReactNode;\n  /** Color theme variant */\n  color?: BadgeColor | `${BadgeColor}`;\n  /** Visual style variant */\n  variant?: BadgeVariant | `${BadgeVariant}`;\n  /** Size of the badge */\n  size?: BadgeSize | `${BadgeSize}`;\n  /** Whether the badge is clickable */\n  clickable?: boolean;\n  /** Whether the badge is dismissible (shows close button) */\n  dismissible?: boolean;\n  /** Click handler for the badge */\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Click handler for the dismiss button */\n  onDismiss?: () => void;\n  /** ARIA label for accessibility */\n  'aria-label'?: string;\n  /** Badge role for accessibility (default: 'status') */\n  role?: 'status' | 'button' | 'generic';\n  /** Whether badge should be focusable */\n  tabIndex?: number;\n};\n\n/**\n * Utility type for badge variant props\n */\nexport type BadgeVariantProps = VariantProps<typeof badgeVariants>;\n\n/**\n * Badge component for displaying status indicators, labels, and notifications\n *\n * @description A flexible badge component that supports multiple visual styles, colors, and interactive features.\n * It maintains accessibility standards and provides comprehensive customization options.\n *\n * @example\n * ```tsx\n * // Basic badge\n * <Badge>New</Badge>\n *\n * // Colored badge\n * <Badge color={BadgeColor.DESTRUCTIVE}>Error</Badge>\n *\n * // Clickable badge\n * <Badge clickable onClick={() => console.log('clicked')}>\n *   Clickable\n * </Badge>\n *\n * // Dismissible badge\n * <Badge dismissible onDismiss={() => console.log('dismissed')}>\n *   Dismissible\n * </Badge>\n * ```\n */\nexport const Badge: React.FC<BadgeProps> = ({\n  className,\n  variant = BadgeVariant.DEFAULT,\n  color = BadgeColor.PRIMARY,\n  size = BadgeSize.MEDIUM,\n  children,\n  clickable = false,\n  dismissible = false,\n  onClick,\n  onDismiss,\n  role,\n  tabIndex,\n  'aria-label': ariaLabel,\n  ...props\n}) => {\n  const Component = clickable ? 'button' : 'span';\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    if (clickable && onClick && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault();\n      onClick(event as any);\n    }\n  };\n\n  const handleDismiss = (event: React.MouseEvent) => {\n    event.stopPropagation();\n    onDismiss?.();\n  };\n\n  return (\n    <Component\n      className={cn(\n        badgeVariants({ variant, color, size }),\n        clickable &&\n          'cursor-pointer hover:opacity-80 focus-visible:ring-2 focus-visible:ring-offset-2',\n        dismissible && 'pr-1',\n        className\n      )}\n      onClick={clickable ? onClick : undefined}\n      onKeyDown={clickable ? handleKeyDown : undefined}\n      role={role || (clickable ? 'button' : 'status')}\n      tabIndex={clickable ? (tabIndex ?? 0) : tabIndex}\n      aria-label={ariaLabel || (clickable ? `${children} button` : undefined)}\n      {...props}\n    >\n      {children}\n      {dismissible && (\n        <button\n          type=\"button\"\n          className=\"ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-black/10 focus:outline-none focus:ring-1 focus:ring-offset-1\"\n          onClick={handleDismiss}\n          aria-label={`Remove ${children} badge`}\n        >\n          <svg\n            className=\"size-3\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n            aria-label=\"Remove badge\"\n          >\n            <title>Remove badge</title>\n            <path\n              fillRule=\"evenodd\"\n              d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n              clipRule=\"evenodd\"\n            />\n          </svg>\n        </button>\n      )}\n    </Component>\n  );\n};\n"],"mappings":";;;;;;;;;AAQA,IAAY,aAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;KACD;;;;;AAMD,IAAY,eAAL;AACL;AACA;AACA;AACA;;KACD;;;;;AAMD,IAAY,YAAL;AACL;AACA;AACA;;KACD;;;;;AAMD,MAAa,gBAAgB,IAC3B,0KACA;CACE,UAAU;EACR,OAAO;IACJ,GAAG,WAAW,YACb;IACD,GAAG,WAAW,cACb;IACD,GAAG,WAAW,gBACb;IACD,GAAG,WAAW,YACb;IACD,GAAG,WAAW,UACb;IACD,GAAG,WAAW,YACb;IACD,GAAG,WAAW,UACb;IACD,GAAG,WAAW,SACb;IACD,GAAG,WAAW,SACb;IACD,GAAG,WAAW,WAAW;GAC3B;EACD,SAAS;IACN,GAAG,aAAa,YAAY;IAC5B,GAAG,aAAa,SACf;IACD,GAAG,aAAa,YACf;IACD,GAAG,aAAa,cACf;GACH;EACD,MAAM;IACH,GAAG,UAAU,UAAU;IACvB,GAAG,UAAU,WAAW;IACxB,GAAG,UAAU,UAAU;GACzB;EACF;CACD,iBAAiB;EACf,SAAS,aAAa;EACtB,OAAO,WAAW;EAClB,MAAM,UAAU;EACjB;CACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DD,MAAa,SAA+B,EAC1C,WACA,UAAU,aAAa,SACvB,QAAQ,WAAW,SACnB,OAAO,UAAU,QACjB,UACA,YAAY,OACZ,cAAc,OACd,SACA,WACA,MACA,UACA,cAAc,WACd,GAAG,YACC;CACJ,MAAM,YAAY,YAAY,WAAW;CAEzC,MAAM,iBAAiB,UAA4C;AACjE,MAAI,aAAa,YAAY,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;AACxE,SAAM,gBAAgB;AACtB,WAAQ,MAAa;;;CAIzB,MAAM,iBAAiB,UAA4B;AACjD,QAAM,iBAAiB;AACvB,eAAa;;AAGf,QACE,qBAAC,WAAD;EACE,WAAW,GACT,cAAc;GAAE;GAAS;GAAO;GAAM,CAAC,EACvC,aACE,oFACF,eAAe,QACf,UACD;EACD,SAAS,YAAY,UAAU;EAC/B,WAAW,YAAY,gBAAgB;EACvC,MAAM,SAAS,YAAY,WAAW;EACtC,UAAU,YAAa,YAAY,IAAK;EACxC,cAAY,cAAc,YAAY,GAAG,SAAS,WAAW;EAC7D,GAAI;YAbN,CAeG,UACA,eACC,oBAAC,UAAD;GACE,MAAK;GACL,WAAU;GACV,SAAS;GACT,cAAY,UAAU,SAAS;aAE/B,qBAAC,OAAD;IACE,WAAU;IACV,SAAQ;IACR,MAAK;IACL,cAAW;cAJb,CAME,oBAAC,SAAD,YAAO,gBAAoB,GAC3B,oBAAC,QAAD;KACE,UAAS;KACT,GAAE;KACF,UAAS;KACT,EACE;;GACC,EAED"}

package/dist/esm/components/Breadcrumb/breadcrumb.content.mjs

@@ -1,2 +1,33 @@
-import{t as e}from"intlayer";const t={key:`breadcrumb`,content:{linkLabel:e({en:`Go to`,fr:`Aller à`,es:`Ir a`,"en-GB":`Go to`,de:`Gehe zu`,ja:`に移動`,ko:`로 이동`,zh:`转到`,it:`Vai a`,pt:`Ir para`,hi:`कर जाएं`,ar:`اذهب إلى`,ru:`Перейти на`,tr:`Git`,pl:`Przejdź do`,id:`Pergi ke`,vi:`Đi tới`,uk:`Перейти до`})},title:`Breadcrumb navigation`,description:`Content declaration for the breadcrumb component's navigation label, used to guide users through hierarchical structures within the interface.`,tags:[`navigation`,`breadcrumb`]};export{t as breadCrumbContent,t as default};
+import { t } from "intlayer";
+
+//#region src/components/Breadcrumb/breadcrumb.content.ts
+const breadCrumbContent = {
+	key: "breadcrumb",
+	content: { linkLabel: t({
+		en: "Go to",
+		fr: "Aller à",
+		es: "Ir a",
+		"en-GB": "Go to",
+		de: "Gehe zu",
+		ja: "に移動",
+		ko: "로 이동",
+		zh: "转到",
+		it: "Vai a",
+		pt: "Ir para",
+		hi: "कर जाएं",
+		ar: "اذهب إلى",
+		ru: "Перейти на",
+		tr: "Git",
+		pl: "Przejdź do",
+		id: "Pergi ke",
+		vi: "Đi tới",
+		uk: "Перейти до"
+	}) },
+	title: "Breadcrumb navigation",
+	description: "Content declaration for the breadcrumb component's navigation label, used to guide users through hierarchical structures within the interface.",
+	tags: ["navigation", "breadcrumb"]
+};
+
+//#endregion
+export { breadCrumbContent, breadCrumbContent as default };
 //# sourceMappingURL=breadcrumb.content.mjs.map

package/dist/esm/components/Breadcrumb/breadcrumb.content.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.content.mjs","names":[],"sources":["../../../../src/components/Breadcrumb/breadcrumb.content.ts"],"sourcesContent":["import { type Dictionary, t } from 'intlayer';\n\nexport const breadCrumbContent = {\n  key: 'breadcrumb',\n  content: {\n    linkLabel: t({\n      en: 'Go to',\n      fr: 'Aller à',\n      es: 'Ir a',\n      'en-GB': 'Go to',\n      de: 'Gehe zu',\n      ja: 'に移動',\n      ko: '로 이동',\n      zh: '转到',\n      it: 'Vai a',\n      pt: 'Ir para',\n      hi: 'कर जाएं',\n      ar: 'اذهب إلى',\n      ru: 'Перейти на',\n      tr: 'Git',\n      pl: 'Przejdź do',\n      id: 'Pergi ke',\n      vi: 'Đi tới',\n      uk: 'Перейти до',\n    }),\n  },\n  title: 'Breadcrumb navigation',\n  description:\n    \"Content declaration for the breadcrumb component's navigation label, used to guide users through hierarchical structures within the interface.\",\n  tags: ['navigation', 'breadcrumb'],\n} satisfies Dictionary;\n\nexport default breadCrumbContent;\n"],"mappings":"6BAEA,MAAa,EAAoB,CAC/B,IAAK,aACL,QAAS,CACP,UAAW,EAAE,CACX,GAAI,QACJ,GAAI,UACJ,GAAI,OACJ,QAAS,QACT,GAAI,UACJ,GAAI,MACJ,GAAI,OACJ,GAAI,KACJ,GAAI,QACJ,GAAI,UACJ,GAAI,UACJ,GAAI,WACJ,GAAI,aACJ,GAAI,MACJ,GAAI,aACJ,GAAI,WACJ,GAAI,SACJ,GAAI,aACL,CAAC,CACH,CACD,MAAO,wBACP,YACE,iJACF,KAAM,CAAC,aAAc,aAAa,CACnC"}
+{"version":3,"file":"breadcrumb.content.mjs","names":[],"sources":["../../../../src/components/Breadcrumb/breadcrumb.content.ts"],"sourcesContent":["import { type Dictionary, t } from 'intlayer';\n\nexport const breadCrumbContent = {\n  key: 'breadcrumb',\n  content: {\n    linkLabel: t({\n      en: 'Go to',\n      fr: 'Aller à',\n      es: 'Ir a',\n      'en-GB': 'Go to',\n      de: 'Gehe zu',\n      ja: 'に移動',\n      ko: '로 이동',\n      zh: '转到',\n      it: 'Vai a',\n      pt: 'Ir para',\n      hi: 'कर जाएं',\n      ar: 'اذهب إلى',\n      ru: 'Перейти на',\n      tr: 'Git',\n      pl: 'Przejdź do',\n      id: 'Pergi ke',\n      vi: 'Đi tới',\n      uk: 'Перейти до',\n    }),\n  },\n  title: 'Breadcrumb navigation',\n  description:\n    \"Content declaration for the breadcrumb component's navigation label, used to guide users through hierarchical structures within the interface.\",\n  tags: ['navigation', 'breadcrumb'],\n} satisfies Dictionary;\n\nexport default breadCrumbContent;\n"],"mappings":";;;AAEA,MAAa,oBAAoB;CAC/B,KAAK;CACL,SAAS,EACP,WAAW,EAAE;EACX,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,SAAS;EACT,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,CAAC,EACH;CACD,OAAO;CACP,aACE;CACF,MAAM,CAAC,cAAc,aAAa;CACnC"}