@intlayer/design-system 8.1.1 → 8.1.3-canary.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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