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

package/dist/components/Accordion/Accordion.mjs

@@ -1,92 +0,0 @@
-"use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { ChevronDown } from "lucide-react";
-import { useState, useCallback } from "react";
-import { cn } from "../../utils/cn.mjs";
-import { Button, ButtonColor, ButtonVariant } from "../Button/Button.mjs";
-import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
-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 isExpandedState = isControlled ? isOpen : internalIsOpen;
-  const isHidden = !isExpandedState;
-  const generatedContentId = contentId || `accordion-content-${Math.random().toString(36).substr(2, 9)}`;
-  const handleToggle = useCallback(
-    (e) => {
-      if (disabled) return;
-      const newIsOpen = !isExpandedState;
-      if (!isControlled) {
-        setInternalIsOpen(newIsOpen);
-      }
-      onToggle?.(newIsOpen);
-      onClick?.(e);
-    },
-    [disabled, isExpandedState, isControlled, onToggle, onClick]
-  );
-  const handleKeyDown = useCallback(
-    (e) => {
-      if (e.key === "Enter" || e.key === " ") {
-        e.preventDefault();
-        handleToggle(e);
-      }
-    },
-    [handleToggle]
-  );
-  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
-      }
-    )
-  ] });
-};
-export {
-  Accordion
-};
-//# sourceMappingURL=Accordion.mjs.map

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

@@ -1 +0,0 @@
-{"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/Accordion/index.cjs

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const components_Accordion_Accordion = require("./Accordion.cjs");
-exports.Accordion = components_Accordion_Accordion.Accordion;
-//# sourceMappingURL=index.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

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

@@ -1,2 +0,0 @@
-export * from './Accordion';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/dist/components/Accordion/index.mjs

@@ -1,5 +0,0 @@
-import { Accordion } from "./Accordion.mjs";
-export {
-  Accordion
-};
-//# sourceMappingURL=index.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Avatar/index.cjs

@@ -1,146 +0,0 @@
-"use strict";
-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 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 = 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 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 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", "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 +0,0 @@
-{"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,53 +0,0 @@
-import { ComponentProps, FC } from 'react';
-/**
- * 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 +0,0 @@
-{"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,146 +0,0 @@
-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 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 = 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 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 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", "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,
-  getCapitals
-};
-//# sourceMappingURL=index.mjs.map

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

@@ -1 +0,0 @@
-{"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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"}