@intlayer/design-system 6.1.5 → 6.1.6

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.mjs","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronDown } from 'lucide-react';\nimport { useEffect, useState, type FC, type ReactNode } from 'react';\nimport { cn } from '../../utils/cn';\nimport {\n  Button,\n  ButtonColor,\n  ButtonVariant,\n  type ButtonProps,\n} from '../Button';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\ntype AccordionProps = {\n  header: ReactNode;\n  children: ReactNode;\n  isOpen?: boolean;\n} & ButtonProps;\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 * @param header - The content of the header.\n * @param children - The content to be expanded and collapsed.\n * @param isOpen - Whether the content is expanded or collapsed by default.\n *\n * @example\n * <Accordion header=\"Accordion Header\" isOpen={true}>\n *   <p>Accordion content</p>\n * </Accordion>\n *\n */\nexport const Accordion: FC<AccordionProps> = ({\n  children,\n  header,\n  isOpen: isOpenDefault = false,\n  onClick,\n  ...props\n}) => {\n  const [isOpen, setIsOpen] = useState(isOpenDefault);\n  const isHidden = isOpen == undefined ? undefined : !isOpen;\n\n  useEffect(() => {\n    if (isOpenDefault != undefined) {\n      setIsOpen(isOpenDefault);\n    }\n  }, [isOpenDefault]);\n\n  return (\n    <div className=\"w-full\">\n      <Button\n        variant={ButtonVariant.HOVERABLE}\n        color={ButtonColor.TEXT}\n        onClick={(e) => {\n          setIsOpen((prevIsOpen) => !prevIsOpen);\n          onClick?.(e);\n        }}\n        isFullWidth\n        className=\"flex items-center justify-between gap-2\"\n        IconRight={ChevronDown}\n        iconClassName={cn(\n          'transform transition-transform duration-500 ease-in-out',\n          isOpen ? 'rotate-0' : '-rotate-180'\n        )}\n        {...props}\n      >\n        {header}\n      </Button>\n\n      <MaxHeightSmoother\n        tabIndex={isHidden !== false ? undefined : -1}\n        isHidden={isHidden}\n      >\n        {children}\n      </MaxHeightSmoother>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAiCO,MAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA,QAAQ,gBAAgB;AAAA,EACxB;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,aAAa;AAClD,QAAM,WAAW,UAAU,SAAY,SAAY,CAAC;AAEpD,YAAU,MAAM;AACd,QAAI,iBAAiB,QAAW;AAC9B,gBAAU,aAAa;AAAA,IACzB;AAAA,EACF,GAAG,CAAC,aAAa,CAAC;AAElB,SACE,qBAAC,OAAA,EAAI,WAAU,UACb,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS,cAAc;AAAA,QACvB,OAAO,YAAY;AAAA,QACnB,SAAS,CAAC,MAAM;AACd,oBAAU,CAAC,eAAe,CAAC,UAAU;AACrC,oBAAU,CAAC;AAAA,QACb;AAAA,QACA,aAAW;AAAA,QACX,WAAU;AAAA,QACV,WAAW;AAAA,QACX,eAAe;AAAA,UACb;AAAA,UACA,SAAS,aAAa;AAAA,QAAA;AAAA,QAEvB,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGH;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UAAU,aAAa,QAAQ,SAAY;AAAA,QAC3C;AAAA,QAEC;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}
+{"version":3,"file":"Accordion.mjs","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronDown } from 'lucide-react';\nimport {\n  useCallback,\n  useState,\n  type FC,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport {\n  Button,\n  ButtonColor,\n  ButtonVariant,\n  type ButtonProps,\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\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 =\n    contentId || `accordion-content-${Math.random().toString(36).substr(2, 9)}`;\n\n  const handleToggle = useCallback(\n    (e: React.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    [disabled, isExpandedState, isControlled, onToggle, onClick]\n  );\n\n  const handleKeyDown = useCallback(\n    (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    [handleToggle]\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"],"names":[],"mappings":";;;;;;;AAgFO,MAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,MAAM;AAEJ,QAAM,eAAe,WAAW;AAChC,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,aAAa;AAGlE,QAAM,kBAAkB,eAAe,SAAS;AAChD,QAAM,WAAW,CAAC;AAGlB,QAAM,qBACJ,aAAa,qBAAqB,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,OAAO,GAAG,CAAC,CAAC;AAE3E,QAAM,eAAe;AAAA,IACnB,CAAC,MAA2C;AAC1C,UAAI,SAAU;AAEd,YAAM,YAAY,CAAC;AAGnB,UAAI,CAAC,cAAc;AACjB,0BAAkB,SAAS;AAAA,MAC7B;AAGA,iBAAW,SAAS;AACpB,gBAAU,CAAC;AAAA,IACb;AAAA,IACA,CAAC,UAAU,iBAAiB,cAAc,UAAU,OAAO;AAAA,EAAA;AAG7D,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAAwC;AAEvC,UAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,UAAE,eAAA;AACF,qBAAa,CAAQ;AAAA,MACvB;AAAA,IACF;AAAA,IACA,CAAC,YAAY;AAAA,EAAA;AAGf,SACE,qBAAC,OAAA,EAAI,WAAU,UACb,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS,cAAc;AAAA,QACvB,OAAO,YAAY;AAAA,QACnB,SAAS;AAAA,QACT,WAAW;AAAA,QACX;AAAA,QACA,aAAW;AAAA,QACX,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,WAAW;AAAA,QACX,eAAe;AAAA,UACb;AAAA,UACA,kBAAkB,aAAa;AAAA,QAAA;AAAA,QAEjC,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,cAAY;AAAA,QACZ,MAAK;AAAA,QACJ,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGH;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,QACJ,UAAU,WAAW,KAAK;AAAA,QAC1B;AAAA,QACA,WAAW;AAAA,QACX,MAAK;AAAA,QACL,mBAAiB;AAAA,QAEhB;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}

package/dist/components/Avatar/index.cjs

@@ -2,62 +2,145 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const lucideReact = require("lucide-react");
+const ReactExports = require("react");
 const utils_cn = require("../../utils/cn.cjs");
 const components_Loader_index = require("../Loader/index.cjs");
-const getCapitals = (name) => name.split(" ").map((word) => word[0]).filter(Boolean).map((char) => char.toUpperCase());
+const sizeVariants = {
+  sm: "size-6",
+  md: "size-9",
+  lg: "size-12",
+  xl: "size-16"
+};
+const getCapitals = (name, separator = " ") => {
+  if (!name) return [];
+  const parts = separator === " " ? name.trim().split(/\s+/) : name.split(separator);
+  return parts.filter(Boolean).map((word) => word.charAt(0).toUpperCase());
+};
+const Container = ReactExports.forwardRef(({ isClickable, onClick, ...props }, ref) => {
+  if (isClickable && onClick) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ...props,
+        ref,
+        onClick,
+        type: "button"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      ref,
+      role: props.tabIndex !== void 0 || props["aria-label"] ? "img" : void 0
+    }
+  );
+});
+Container.displayName = "AvatarContainer";
 const Avatar = ({
   fullname,
   className,
-  isLoading,
-  isLoggedIn,
+  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 && !displayLoader && isImageDefined;
+  const displayAvatar = isLoggedIn && !displayLoader && isImageDefined;
   const displayInitials = isLoggedIn && !displayLoader && !displayAvatar && isNameDefined;
   const displayUserIcon = isLoggedIn && !displayLoader && !displayAvatar && !displayInitials;
   const isClickable = onClick !== void 0;
-  const Container = (props2) => isClickable ? /* @__PURE__ */ jsxRuntime.jsx("button", { ...props2 }) : /* @__PURE__ */ jsxRuntime.jsx("div", { ...props2 });
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const sizeClass = sizeVariants[size];
+  const accessibilityProps = ReactExports.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__ */ jsxRuntime.jsxs(
     Container,
     {
+      isClickable,
       className: utils_cn.cn(
-        `border-text size-9 rounded-full border-[1.5px] p-[1.5px]`,
-        isClickable && `cursor-pointer`,
+        `border-text border-[1.5px] rounded-full p-[1.5px]`,
+        sizeClass,
+        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__ */ jsxRuntime.jsx("div", { className: "relative flex size-full flex-row items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-text text-text-opposite absolute left-0 top-0 flex size-full flex-col items-center justify-center rounded-full", children: [
-        displayLoader && /* @__PURE__ */ jsxRuntime.jsx(components_Loader_index.Loader, { className: "w-3/4" }),
-        displayAvatar && /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
-          {
-            className: "size-full rounded-full",
-            src,
-            srcSet: src,
-            alt: `avatar of ${fullname}`,
-            width: 59,
-            height: 59
-          }
-        ),
-        displayInitials && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "flex size-full items-center justify-center gap-[0.1rem] text-sm font-bold max-md:py-1",
-            "aria-label": "Initials of user's name",
-            children: capitals?.map((capital) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: capital }, capital))
-          }
-        ),
-        displayUserIcon && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { size: 25 })
-      ] }) })
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex size-full flex-row items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-text text-text-opposite absolute left-0 top-0 flex size-full flex-col items-center justify-center rounded-full", children: [
+          displayLoader && /* @__PURE__ */ jsxRuntime.jsx(components_Loader_index.Loader, { className: "w-3/4", "aria-label": "Loading user avatar" }),
+          displayAvatar && /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              className: "size-full rounded-full object-cover",
+              src,
+              srcSet: src,
+              alt: alt || `Avatar of ${fullname}`,
+              width: 59,
+              height: 59,
+              loading: "lazy"
+            }
+          ),
+          displayInitials && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "flex size-full items-center justify-center gap-[0.1rem] text-sm font-bold max-md:py-1",
+              "aria-label": `Initials for ${fullname}`,
+              children: capitals?.map((capital, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: capital }, `${capital}-${index}`))
+            }
+          ),
+          displayUserIcon && /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.User,
+            {
+              size: size === "sm" ? 14 : size === "md" ? 25 : size === "lg" ? 30 : 40,
+              "aria-label": "Default user icon"
+            }
+          )
+        ] }) }),
+        isClickable && /* @__PURE__ */ jsxRuntime.jsx("span", { id: "avatar-description", className: "sr-only", children: "Click to view profile" })
+      ]
     }
   );
 };
 exports.Avatar = Avatar;
+exports.getCapitals = getCapitals;
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Avatar/index.tsx"],"sourcesContent":["import { User } from 'lucide-react';\nimport type { ComponentProps, FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Loader } from '../Loader';\n\nconst getCapitals = (name: string): string[] =>\n  name\n    .split(' ') // split by space\n    .map((word) => word[0]) // get first letter of each word\n    .filter(Boolean) // remove empty strings\n    .map((char) => char.toUpperCase()); // convert to uppercase\n\nexport type AvatarProps = ComponentProps<'button'> & {\n  src?: string;\n  fullname?: string;\n  isLoading?: boolean;\n  isLoggedIn?: boolean;\n};\n\nexport const Avatar: FC<AvatarProps> = ({\n  fullname,\n  className,\n  isLoading,\n  isLoggedIn,\n  src,\n  onClick,\n  ...props\n}) => {\n  const isImageDefined = Boolean(src);\n  const isNameDefined = Boolean((fullname ?? '').length > 0);\n  const capitals = fullname ? getCapitals(fullname) : undefined;\n\n  const displayLoader = isLoading;\n  const displayAvatar =\n    isLoggedIn && !displayLoader && !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  const Container = (props: HTMLAttributes<HTMLElement>) =>\n    isClickable ? <button {...props} /> : <div {...props} />;\n\n  return (\n    <Container\n      className={cn(\n        `border-text size-9 rounded-full border-[1.5px] p-[1.5px]`,\n        isClickable && `cursor-pointer`,\n        className\n      )}\n      onClick={onClick}\n      {...props}\n    >\n      <div className=\"relative flex size-full flex-row items-center justify-center\">\n        <div className=\"bg-text text-text-opposite absolute left-0 top-0 flex size-full flex-col items-center justify-center rounded-full\">\n          {displayLoader && <Loader className=\"w-3/4\" />}\n          {displayAvatar && (\n            <img\n              className=\"size-full rounded-full\"\n              src={src}\n              srcSet={src}\n              alt={`avatar of ${fullname}`}\n              width={59}\n              height={59}\n            />\n          )}\n          {displayInitials && (\n            <div\n              className=\"flex size-full items-center justify-center gap-[0.1rem] text-sm font-bold max-md:py-1\"\n              aria-label=\"Initials of user's name\"\n            >\n              {capitals?.map((capital) => <span key={capital}>{capital}</span>)}\n            </div>\n          )}\n          {displayUserIcon && <User size={25} />}\n        </div>\n      </div>\n    </Container>\n  );\n};\n"],"names":["props","jsx","cn","jsxs","Loader","User"],"mappings":";;;;;;AAKA,MAAM,cAAc,CAAC,SACnB,KACG,MAAM,GAAG,EACT,IAAI,CAAC,SAAS,KAAK,CAAC,CAAC,EACrB,OAAO,OAAO,EACd,IAAI,CAAC,SAAS,KAAK,aAAa;AAS9B,MAAM,SAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,iBAAiB,QAAQ,GAAG;AAClC,QAAM,gBAAgB,SAAS,YAAY,IAAI,SAAS,CAAC;AACzD,QAAM,WAAW,WAAW,YAAY,QAAQ,IAAI;AAEpD,QAAM,gBAAgB;AACtB,QAAM,gBACJ,cAAc,CAAC,iBAAiB,CAAC,iBAAiB;AACpD,QAAM,kBACJ,cAAc,CAAC,iBAAiB,CAAC,iBAAiB;AACpD,QAAM,kBACJ,cAAc,CAAC,iBAAiB,CAAC,iBAAiB,CAAC;AAErD,QAAM,cAAc,YAAY;AAEhC,QAAM,YAAY,CAACA,WACjB,cAAcC,2BAAAA,IAAC,UAAA,EAAQ,GAAGD,OAAAA,CAAO,IAAKC,2BAAAA,IAAC,OAAA,EAAK,GAAGD,OAAAA,CAAO;AAExD,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAAA;AAAAA,QACT;AAAA,QACA,eAAe;AAAA,QACf;AAAA,MAAA;AAAA,MAEF;AAAA,MACC,GAAG;AAAA,MAEJ,yCAAC,OAAA,EAAI,WAAU,gEACb,UAAAC,2BAAAA,KAAC,OAAA,EAAI,WAAU,qHACZ,UAAA;AAAA,QAAA,iBAAiBF,2BAAAA,IAACG,wBAAAA,QAAA,EAAO,WAAU,QAAA,CAAQ;AAAA,QAC3C,iBACCH,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV;AAAA,YACA,QAAQ;AAAA,YACR,KAAK,aAAa,QAAQ;AAAA,YAC1B,OAAO;AAAA,YACP,QAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,QAGX,mBACCA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,cAAW;AAAA,YAEV,UAAA,UAAU,IAAI,CAAC,2CAAa,QAAA,EAAoB,UAAA,QAAA,GAAV,OAAkB,CAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAGnE,mBAAmBA,2BAAAA,IAACI,YAAAA,MAAA,EAAK,MAAM,GAAA,CAAI;AAAA,MAAA,EAAA,CACtC,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Avatar/index.tsx"],"sourcesContent":["import { User } from 'lucide-react';\nimport type { ComponentProps, FC, HTMLAttributes } from 'react';\nimport { forwardRef, useMemo } from 'react';\nimport { cn } from '../../utils/cn';\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 * Size variants for the avatar\n */\nconst sizeVariants = {\n  sm: 'size-6',\n  md: 'size-9',\n  lg: 'size-12',\n  xl: 'size-16',\n} as const;\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 = forwardRef<\n  HTMLElement,\n  HTMLAttributes<HTMLElement> & {\n    isClickable: boolean;\n    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  }\n>(({ isClickable, onClick, ...props }, ref) => {\n  if (isClickable && onClick) {\n    return (\n      <button\n        {...(props as ComponentProps<'button'>)}\n        ref={ref as React.Ref<HTMLButtonElement>}\n        onClick={onClick}\n        type=\"button\"\n      />\n    );\n  }\n\n  return (\n    <div\n      {...(props as ComponentProps<'div'>)}\n      ref={ref as React.Ref<HTMLDivElement>}\n      role={\n        props.tabIndex !== undefined || props['aria-label'] ? 'img' : undefined\n      }\n    />\n  );\n});\n\nContainer.displayName = 'AvatarContainer';\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  const sizeClass = sizeVariants[size];\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        `border-text border-[1.5px] rounded-full p-[1.5px]`,\n        sizeClass,\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=\"bg-text text-text-opposite absolute left-0 top-0 flex size-full flex-col items-center justify-center rounded-full\">\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            />\n          )}\n\n          {displayInitials && (\n            <div\n              className=\"flex size-full items-center justify-center gap-[0.1rem] text-sm font-bold max-md:py-1\"\n              aria-label={`Initials for ${fullname}`}\n            >\n              {capitals?.map((capital, index) => (\n                <span key={`${capital}-${index}`}>{capital}</span>\n              ))}\n            </div>\n          )}\n\n          {displayUserIcon && (\n            <User\n              size={\n                size === 'sm'\n                  ? 14\n                  : size === 'md'\n                    ? 25\n                    : size === 'lg'\n                      ? 30\n                      : 40\n              }\n              aria-label=\"Default user icon\"\n            />\n          )}\n        </div>\n      </div>\n\n      {isClickable && (\n        <span id=\"avatar-description\" className=\"sr-only\">\n          Click to view profile\n        </span>\n      )}\n    </Container>\n  );\n};\n"],"names":["forwardRef","jsx","useMemo","jsxs","cn","Loader","User"],"mappings":"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"}

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

@@ -1,9 +1,53 @@
 import { ComponentProps, FC } from 'react';
-export type AvatarProps = ComponentProps<'button'> & {
+/**
+ * Props for the Avatar component
+ */
+export interface AvatarProps extends Omit<ComponentProps<'button'>, 'onClick'> {
+    /** Image source URL for the avatar */
     src?: string;
+    /** Full name used to generate initials and alt text */
     fullname?: string;
+    /** Displays a loading spinner when true */
     isLoading?: boolean;
+    /** Whether the user is authenticated */
     isLoggedIn?: boolean;
-};
+    /** Size variant of the avatar */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /** Click handler - when provided, makes the avatar clickable */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Alternative text for accessibility */
+    alt?: string;
+    /** Whether the avatar should be focusable when not clickable */
+    focusable?: boolean;
+}
+/**
+ * @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.
+ */
+export declare const getCapitals: (name: string, separator?: string) => string[];
+/**
+ * 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" />
+ * ```
+ */
 export declare const Avatar: FC<AvatarProps>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,EAAE,EAAkB,MAAM,OAAO,CAAC;AAWhE,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG;IACnD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CA8DlC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,EAAE,EAAkB,MAAM,OAAO,CAAC;AAKhE;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC5E,sCAAsC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iCAAiC;IACjC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,gEAAgE;IAChE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC/D,yCAAyC;IACzC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gEAAgE;IAChE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAYD;;;;;GAKG;AACH,eAAO,MAAM,WAAW,GAAI,MAAM,MAAM,EAAE,kBAAe,KAAG,MAAM,EASjE,CAAC;AAoCF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAuIlC,CAAC"}

package/dist/components/Avatar/index.mjs

@@ -1,63 +1,146 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { User } from "lucide-react";
+import { forwardRef, useMemo } from "react";
 import { cn } from "../../utils/cn.mjs";
 import { Loader } from "../Loader/index.mjs";
-const getCapitals = (name) => name.split(" ").map((word) => word[0]).filter(Boolean).map((char) => char.toUpperCase());
+const sizeVariants = {
+  sm: "size-6",
+  md: "size-9",
+  lg: "size-12",
+  xl: "size-16"
+};
+const getCapitals = (name, separator = " ") => {
+  if (!name) return [];
+  const parts = separator === " " ? name.trim().split(/\s+/) : name.split(separator);
+  return parts.filter(Boolean).map((word) => word.charAt(0).toUpperCase());
+};
+const Container = forwardRef(({ isClickable, onClick, ...props }, ref) => {
+  if (isClickable && onClick) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ...props,
+        ref,
+        onClick,
+        type: "button"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      ref,
+      role: props.tabIndex !== void 0 || props["aria-label"] ? "img" : void 0
+    }
+  );
+});
+Container.displayName = "AvatarContainer";
 const Avatar = ({
   fullname,
   className,
-  isLoading,
-  isLoggedIn,
+  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 && !displayLoader && isImageDefined;
+  const displayAvatar = isLoggedIn && !displayLoader && isImageDefined;
   const displayInitials = isLoggedIn && !displayLoader && !displayAvatar && isNameDefined;
   const displayUserIcon = isLoggedIn && !displayLoader && !displayAvatar && !displayInitials;
   const isClickable = onClick !== void 0;
-  const Container = (props2) => isClickable ? /* @__PURE__ */ jsx("button", { ...props2 }) : /* @__PURE__ */ jsx("div", { ...props2 });
-  return /* @__PURE__ */ jsx(
+  const sizeClass = sizeVariants[size];
+  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__ */ jsxs(
     Container,
     {
+      isClickable,
       className: cn(
-        `border-text size-9 rounded-full border-[1.5px] p-[1.5px]`,
-        isClickable && `cursor-pointer`,
+        `border-text border-[1.5px] rounded-full p-[1.5px]`,
+        sizeClass,
+        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: "bg-text text-text-opposite absolute left-0 top-0 flex size-full flex-col items-center justify-center rounded-full", children: [
-        displayLoader && /* @__PURE__ */ jsx(Loader, { className: "w-3/4" }),
-        displayAvatar && /* @__PURE__ */ jsx(
-          "img",
-          {
-            className: "size-full rounded-full",
-            src,
-            srcSet: src,
-            alt: `avatar of ${fullname}`,
-            width: 59,
-            height: 59
-          }
-        ),
-        displayInitials && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "flex size-full items-center justify-center gap-[0.1rem] text-sm font-bold max-md:py-1",
-            "aria-label": "Initials of user's name",
-            children: capitals?.map((capital) => /* @__PURE__ */ jsx("span", { children: capital }, capital))
-          }
-        ),
-        displayUserIcon && /* @__PURE__ */ jsx(User, { size: 25 })
-      ] }) })
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "relative flex size-full flex-row items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "bg-text text-text-opposite absolute left-0 top-0 flex size-full flex-col items-center justify-center rounded-full", 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"
+            }
+          ),
+          displayInitials && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "flex size-full items-center justify-center gap-[0.1rem] text-sm font-bold max-md:py-1",
+              "aria-label": `Initials for ${fullname}`,
+              children: capitals?.map((capital, index) => /* @__PURE__ */ jsx("span", { children: capital }, `${capital}-${index}`))
+            }
+          ),
+          displayUserIcon && /* @__PURE__ */ jsx(
+            User,
+            {
+              size: size === "sm" ? 14 : size === "md" ? 25 : size === "lg" ? 30 : 40,
+              "aria-label": "Default user icon"
+            }
+          )
+        ] }) }),
+        isClickable && /* @__PURE__ */ jsx("span", { id: "avatar-description", className: "sr-only", children: "Click to view profile" })
+      ]
     }
   );
 };
 export {
-  Avatar
+  Avatar,
+  getCapitals
 };
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/Avatar/index.tsx"],"sourcesContent":["import { User } from 'lucide-react';\nimport type { ComponentProps, FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Loader } from '../Loader';\n\nconst getCapitals = (name: string): string[] =>\n  name\n    .split(' ') // split by space\n    .map((word) => word[0]) // get first letter of each word\n    .filter(Boolean) // remove empty strings\n    .map((char) => char.toUpperCase()); // convert to uppercase\n\nexport type AvatarProps = ComponentProps<'button'> & {\n  src?: string;\n  fullname?: string;\n  isLoading?: boolean;\n  isLoggedIn?: boolean;\n};\n\nexport const Avatar: FC<AvatarProps> = ({\n  fullname,\n  className,\n  isLoading,\n  isLoggedIn,\n  src,\n  onClick,\n  ...props\n}) => {\n  const isImageDefined = Boolean(src);\n  const isNameDefined = Boolean((fullname ?? '').length > 0);\n  const capitals = fullname ? getCapitals(fullname) : undefined;\n\n  const displayLoader = isLoading;\n  const displayAvatar =\n    isLoggedIn && !displayLoader && !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  const Container = (props: HTMLAttributes<HTMLElement>) =>\n    isClickable ? <button {...props} /> : <div {...props} />;\n\n  return (\n    <Container\n      className={cn(\n        `border-text size-9 rounded-full border-[1.5px] p-[1.5px]`,\n        isClickable && `cursor-pointer`,\n        className\n      )}\n      onClick={onClick}\n      {...props}\n    >\n      <div className=\"relative flex size-full flex-row items-center justify-center\">\n        <div className=\"bg-text text-text-opposite absolute left-0 top-0 flex size-full flex-col items-center justify-center rounded-full\">\n          {displayLoader && <Loader className=\"w-3/4\" />}\n          {displayAvatar && (\n            <img\n              className=\"size-full rounded-full\"\n              src={src}\n              srcSet={src}\n              alt={`avatar of ${fullname}`}\n              width={59}\n              height={59}\n            />\n          )}\n          {displayInitials && (\n            <div\n              className=\"flex size-full items-center justify-center gap-[0.1rem] text-sm font-bold max-md:py-1\"\n              aria-label=\"Initials of user's name\"\n            >\n              {capitals?.map((capital) => <span key={capital}>{capital}</span>)}\n            </div>\n          )}\n          {displayUserIcon && <User size={25} />}\n        </div>\n      </div>\n    </Container>\n  );\n};\n"],"names":["props"],"mappings":";;;;AAKA,MAAM,cAAc,CAAC,SACnB,KACG,MAAM,GAAG,EACT,IAAI,CAAC,SAAS,KAAK,CAAC,CAAC,EACrB,OAAO,OAAO,EACd,IAAI,CAAC,SAAS,KAAK,aAAa;AAS9B,MAAM,SAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,iBAAiB,QAAQ,GAAG;AAClC,QAAM,gBAAgB,SAAS,YAAY,IAAI,SAAS,CAAC;AACzD,QAAM,WAAW,WAAW,YAAY,QAAQ,IAAI;AAEpD,QAAM,gBAAgB;AACtB,QAAM,gBACJ,cAAc,CAAC,iBAAiB,CAAC,iBAAiB;AACpD,QAAM,kBACJ,cAAc,CAAC,iBAAiB,CAAC,iBAAiB;AACpD,QAAM,kBACJ,cAAc,CAAC,iBAAiB,CAAC,iBAAiB,CAAC;AAErD,QAAM,cAAc,YAAY;AAEhC,QAAM,YAAY,CAACA,WACjB,cAAc,oBAAC,UAAA,EAAQ,GAAGA,OAAAA,CAAO,IAAK,oBAAC,OAAA,EAAK,GAAGA,OAAAA,CAAO;AAExD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,eAAe;AAAA,QACf;AAAA,MAAA;AAAA,MAEF;AAAA,MACC,GAAG;AAAA,MAEJ,8BAAC,OAAA,EAAI,WAAU,gEACb,UAAA,qBAAC,OAAA,EAAI,WAAU,qHACZ,UAAA;AAAA,QAAA,iBAAiB,oBAAC,QAAA,EAAO,WAAU,QAAA,CAAQ;AAAA,QAC3C,iBACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV;AAAA,YACA,QAAQ;AAAA,YACR,KAAK,aAAa,QAAQ;AAAA,YAC1B,OAAO;AAAA,YACP,QAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,QAGX,mBACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,cAAW;AAAA,YAEV,UAAA,UAAU,IAAI,CAAC,gCAAa,QAAA,EAAoB,UAAA,QAAA,GAAV,OAAkB,CAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAGnE,mBAAmB,oBAAC,MAAA,EAAK,MAAM,GAAA,CAAI;AAAA,MAAA,EAAA,CACtC,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/Avatar/index.tsx"],"sourcesContent":["import { User } from 'lucide-react';\nimport type { ComponentProps, FC, HTMLAttributes } from 'react';\nimport { forwardRef, useMemo } from 'react';\nimport { cn } from '../../utils/cn';\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 * Size variants for the avatar\n */\nconst sizeVariants = {\n  sm: 'size-6',\n  md: 'size-9',\n  lg: 'size-12',\n  xl: 'size-16',\n} as const;\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 = forwardRef<\n  HTMLElement,\n  HTMLAttributes<HTMLElement> & {\n    isClickable: boolean;\n    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  }\n>(({ isClickable, onClick, ...props }, ref) => {\n  if (isClickable && onClick) {\n    return (\n      <button\n        {...(props as ComponentProps<'button'>)}\n        ref={ref as React.Ref<HTMLButtonElement>}\n        onClick={onClick}\n        type=\"button\"\n      />\n    );\n  }\n\n  return (\n    <div\n      {...(props as ComponentProps<'div'>)}\n      ref={ref as React.Ref<HTMLDivElement>}\n      role={\n        props.tabIndex !== undefined || props['aria-label'] ? 'img' : undefined\n      }\n    />\n  );\n});\n\nContainer.displayName = 'AvatarContainer';\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  const sizeClass = sizeVariants[size];\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        `border-text border-[1.5px] rounded-full p-[1.5px]`,\n        sizeClass,\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=\"bg-text text-text-opposite absolute left-0 top-0 flex size-full flex-col items-center justify-center rounded-full\">\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            />\n          )}\n\n          {displayInitials && (\n            <div\n              className=\"flex size-full items-center justify-center gap-[0.1rem] text-sm font-bold max-md:py-1\"\n              aria-label={`Initials for ${fullname}`}\n            >\n              {capitals?.map((capital, index) => (\n                <span key={`${capital}-${index}`}>{capital}</span>\n              ))}\n            </div>\n          )}\n\n          {displayUserIcon && (\n            <User\n              size={\n                size === 'sm'\n                  ? 14\n                  : size === 'md'\n                    ? 25\n                    : size === 'lg'\n                      ? 30\n                      : 40\n              }\n              aria-label=\"Default user icon\"\n            />\n          )}\n        </div>\n      </div>\n\n      {isClickable && (\n        <span id=\"avatar-description\" className=\"sr-only\">\n          Click to view profile\n        </span>\n      )}\n    </Container>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/Badge/index.cjs

@@ -21,6 +21,12 @@ var BadgeVariant = /* @__PURE__ */ ((BadgeVariant2) => {
   BadgeVariant2["HOVERABLE"] = "hoverable";
   return BadgeVariant2;
 })(BadgeVariant || {});
+var BadgeSize = /* @__PURE__ */ ((BadgeSize2) => {
+  BadgeSize2["SMALL"] = "sm";
+  BadgeSize2["MEDIUM"] = "md";
+  BadgeSize2["LARGE"] = "lg";
+  return BadgeSize2;
+})(BadgeSize || {});
 const badgeVariants = classVarianceAuthority.cva(
   "focus:ring-ring inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2",
   {
@@ -76,24 +82,97 @@ const badgeVariants = classVarianceAuthority.cva(
           "hoverable"
           /* HOVERABLE */
         ]: "rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10"
+      },
+      size: {
+        [
+          "sm"
+          /* SMALL */
+        ]: "px-2 py-0.5 text-xs",
+        [
+          "md"
+          /* MEDIUM */
+        ]: "px-2.5 py-0.5 text-xs",
+        [
+          "lg"
+          /* LARGE */
+        ]: "px-3 py-1 text-sm"
       }
     },
     defaultVariants: {
       variant: "default",
-      color: "primary"
-      /* PRIMARY */
+      color: "primary",
+      size: "md"
+      /* MEDIUM */
     }
   }
 );
-const Badge = ({ className, variant, color, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
-  {
-    className: utils_cn.cn(badgeVariants({ variant, color }), className),
-    ...props
-  }
-);
+const Badge = ({
+  className,
+  variant = "default",
+  color = "primary",
+  size = "md",
+  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__ */ jsxRuntime.jsxs(
+    Component,
+    {
+      className: utils_cn.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { className: "h-3 w-3", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.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"
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  );
+};
 exports.Badge = Badge;
 exports.BadgeColor = BadgeColor;
+exports.BadgeSize = BadgeSize;
 exports.BadgeVariant = BadgeVariant;
 exports.badgeVariants = badgeVariants;
 //# sourceMappingURL=index.cjs.map