@intlayer/design-system 7.5.13 → 7.6.0-canary.0

package/dist/esm/_virtual/rolldown_runtime.mjs

@@ -1,6 +1,6 @@
 //#region rolldown:runtime
 var __defProp = Object.defineProperty;
-var __export = (all, symbols) => {
+var __exportAll = (all, symbols) => {
 	let target = {};
 	for (var name in all) {
 		__defProp(target, name, {
@@ -15,4 +15,4 @@ var __export = (all, symbols) => {
 };
 
 //#endregion
-export { __export };
+export { __exportAll };

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.mjs","names":["Accordion: FC<AccordionProps>"],"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,MAAaA,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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Container: FC<\n  HTMLAttributes<HTMLElement> & {\n    isClickable: boolean;\n    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  }\n>","Avatar: FC<AvatarProps>","baseProps: Record<string, any>"],"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,MAAMA,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,MAAaC,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,MAAMC,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\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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Badge: React.FC<BadgeProps>"],"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,oDAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;AAOF,IAAY,wDAAL;AACL;AACA;AACA;AACA;;;;;;;AAOF,IAAY,kDAAL;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,MAAaA,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":";;;;;;;;;AAQA,IAAY,oDAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;AAOF,IAAY,wDAAL;AACL;AACA;AACA;AACA;;;;;;;AAOF,IAAY,kDAAL;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"}

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["CarouselItem: FC<CarouselItemProps>","CarouselIndicators: FC<CarouselIndicatorsProps>","slides: ReactElement[]","others: ReactNode[]","CarouselRoot: FC<CarouselProps>","handleMouseDown: MouseEventHandler<HTMLDivElement>","handleMouseMove: MouseEventHandler<HTMLDivElement>","handleTouchStart: TouchEventHandler<HTMLDivElement>","handleTouchMove: TouchEventHandler<HTMLDivElement>","interval: NodeJS.Timeout"],"sources":["../../../../src/components/Carousel/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Button,\n  ButtonColor,\n  ButtonSize,\n  ButtonVariant,\n} from '@components/Button';\nimport { KeyboardShortcut } from '@components/KeyboardShortcut';\nimport { Popover } from '@components/Popover';\n// Removed useIsMounted as it is no longer needed for positioning\nimport { cn } from '@utils/cn';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport {\n  Children,\n  createContext,\n  type FC,\n  type HTMLAttributes,\n  isValidElement,\n  type MouseEventHandler,\n  type ReactElement,\n  type ReactNode,\n  type TouchEventHandler,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntlayer } from 'react-intlayer';\n\n// ------------------------------------------------------------------\n// Configuration\n// ------------------------------------------------------------------\nconst SWIPE_THRESHOLD_DIVISOR = 5;\nconst TRANSITION_DELAY_MS = 50;\n\n// ------------------------------------------------------------------\n// Context Definition\n// ------------------------------------------------------------------\ntype CarouselContextValue = {\n  selectedIndex: number;\n  setSelectedIndex: (index: number) => void;\n  totalItems: number;\n  handlePrev: () => void;\n  handleNext: () => void;\n};\n\nconst CarouselContext = createContext<CarouselContextValue | null>(null);\n\nconst useCarousel = () => {\n  const context = useContext(CarouselContext);\n  if (!context) {\n    throw new Error('useCarousel must be used within a Carousel');\n  }\n  return context;\n};\n\n// ------------------------------------------------------------------\n// Helper Functions\n// ------------------------------------------------------------------\nconst getCardStyle = (index: number, displayedIndex: number) => {\n  const diff = Math.abs(index - displayedIndex);\n  switch (diff) {\n    case 0:\n      return 'opacity-100 z-40';\n    case 1:\n      return 'opacity-75 z-30 cursor-pointer';\n    case 2:\n      return 'opacity-50 z-20 pointer-events-none';\n    default:\n      return 'opacity-0 z-10 pointer-events-none';\n  }\n};\n\nconst getCardScale = (index: number, displayedIndex: number) => {\n  const diff = Math.abs(index - displayedIndex);\n  switch (diff) {\n    case 0:\n      return 1;\n    case 1:\n      return 0.9;\n    case 2:\n      return 0.8;\n    default:\n      return 0.7;\n  }\n};\n\n// FIX 1: Use CSS units (vw) instead of window.innerWidth (pixels)\n// This allows the calculation to work on SSR without hydration mismatch.\n// Your original logic: (3 * screenWidth) / 10  === 30% of viewport width\nconst getCardPositionX = (index: number, displayedIndex: number) => {\n  const diff = index - displayedIndex;\n  return `${diff * 30}vw`;\n};\n\n// ------------------------------------------------------------------\n// Sub-Component: Item\n// ------------------------------------------------------------------\ntype CarouselItemProps = HTMLAttributes<HTMLDivElement> & {\n  children: ReactNode;\n};\n\nconst CarouselItem: FC<CarouselItemProps> = ({\n  children,\n  className,\n  ...props\n}) => {\n  return (\n    <div className={cn('h-full w-full', className)} {...props}>\n      {children}\n    </div>\n  );\n};\n\n// ------------------------------------------------------------------\n// Sub-Component: Indicators (Controller)\n// ------------------------------------------------------------------\ntype CarouselIndicatorsProps = HTMLAttributes<HTMLDivElement> & {\n  disableKeyboardShortcuts?: boolean;\n};\n\nconst CarouselIndicators: FC<CarouselIndicatorsProps> = ({\n  className,\n  disableKeyboardShortcuts = false,\n  ...props\n}) => {\n  const {\n    selectedIndex,\n    setSelectedIndex,\n    totalItems,\n    handlePrev,\n    handleNext,\n  } = useCarousel();\n  const { goToSlide, previousSlide, nextSlide } = useIntlayer('carousel');\n\n  if (totalItems <= 1) return null;\n\n  return (\n    <div\n      className={cn(\n        'absolute bottom-4 left-1/2 z-50 flex -translate-x-1/2 flex-row items-center gap-2',\n        className\n      )}\n      {...props}\n    >\n      <Popover identifier=\"carousel-prev\">\n        <Button\n          variant={ButtonVariant.HOVERABLE}\n          color={ButtonColor.NEUTRAL}\n          label={previousSlide.value}\n          roundedSize=\"full\"\n          onClick={(e) => {\n            e.stopPropagation();\n            handlePrev();\n          }}\n          Icon={ChevronLeft}\n          size={ButtonSize.ICON_MD}\n          disabled={selectedIndex === 0}\n        />\n\n        <Popover.Detail identifier=\"carousel-prev\">\n          <div className=\"flex items-center gap-2 p-2\">\n            <span className=\"whitespace-nowrap text-neutral text-xs\">\n              {previousSlide.value}\n            </span>\n            <KeyboardShortcut\n              shortcut=\"ArrowLeft\"\n              disabled={disableKeyboardShortcuts}\n              size=\"sm\"\n              onTriggered={handlePrev}\n            />\n          </div>\n        </Popover.Detail>\n      </Popover>\n\n      {Array.from({ length: totalItems }).map((_, index) => {\n        const isActive = index === selectedIndex;\n        return (\n          <button\n            key={index}\n            type=\"button\"\n            onClick={(e) => {\n              e.stopPropagation();\n              setSelectedIndex(index);\n            }}\n            aria-label={goToSlide({ index: index + 1 }).value}\n            className={cn(\n              'h-2.5 w-2.5 rounded-full transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2',\n              isActive ? 'scale-110 bg-text' : 'bg-text/20 hover:bg-text/40'\n            )}\n          />\n        );\n      })}\n\n      <Popover identifier=\"carousel-next\">\n        <Button\n          variant={ButtonVariant.HOVERABLE}\n          color={ButtonColor.NEUTRAL}\n          roundedSize=\"full\"\n          label={nextSlide.value}\n          onClick={(e) => {\n            e.stopPropagation();\n            handleNext();\n          }}\n          Icon={ChevronRight}\n          size={ButtonSize.ICON_MD}\n          disabled={selectedIndex === totalItems - 1}\n        />\n\n        <Popover.Detail identifier=\"carousel-next\">\n          <div className=\"flex items-center gap-2 p-2\">\n            <span className=\"whitespace-nowrap text-neutral text-xs\">\n              {nextSlide.value}\n            </span>\n            <KeyboardShortcut\n              shortcut=\"ArrowRight\"\n              size=\"sm\"\n              onTriggered={handleNext}\n              disabled={disableKeyboardShortcuts}\n            />\n          </div>\n        </Popover.Detail>\n      </Popover>\n    </div>\n  );\n};\n\n// ------------------------------------------------------------------\n// Main Component: Carousel Root\n// ------------------------------------------------------------------\ntype CarouselProps = HTMLAttributes<HTMLDivElement> & {\n  children: ReactNode;\n  initialIndex?: number;\n  onIndexChange?: (index: number) => void;\n};\n\nconst partitionCarouselChildren = (\n  children: ReactNode[]\n): [ReactElement[], ReactNode[]] => {\n  const slides: ReactElement[] = [];\n  const others: ReactNode[] = [];\n\n  children.forEach((child) => {\n    if (isValidElement(child) && child.type === CarouselItem) {\n      slides.push(child);\n    } else {\n      others.push(child);\n    }\n  });\n\n  return [slides, others];\n};\n\nconst CarouselRoot: FC<CarouselProps> = ({\n  children,\n  className,\n  initialIndex = 0,\n  onIndexChange,\n  ...props\n}) => {\n  const allChildren = Children.toArray(children);\n  const [slides, others] = partitionCarouselChildren(allChildren);\n  const totalItems = slides.length;\n\n  // State Management\n  const [selectedIndex, setSelectedIndex] = useState<number>(initialIndex);\n  const [displayedIndex, setDisplayedIndex] = useState<number>(initialIndex);\n  const [containerHeight, setContainerHeight] = useState<number>(0);\n\n  // Drag State\n  const [startX, setStartX] = useState(0);\n  const [isDragging, setIsDragging] = useState(false);\n\n  // Refs\n  const containerRef = useRef<HTMLDivElement>(null);\n  const itemsRef = useRef<(HTMLDivElement | null)[]>([]);\n\n  // Navigation Logic\n  const handleSwitchItem = (diff: number) => {\n    if (typeof window === 'undefined') return;\n\n    const screenWidth = window.innerWidth;\n    const swipeStep = screenWidth / SWIPE_THRESHOLD_DIVISOR;\n    const numSwipe = Math.round(diff / swipeStep);\n\n    if (Math.abs(numSwipe) >= 1) {\n      const newIndex = displayedIndex - numSwipe;\n      const clampedIndex = Math.max(0, Math.min(newIndex, totalItems - 1));\n\n      if (clampedIndex !== selectedIndex) {\n        setSelectedIndex(clampedIndex);\n        setStartX((prev) => prev + diff);\n      }\n    }\n  };\n\n  const handleNext = () => {\n    setSelectedIndex((prev) => Math.min(prev + 1, totalItems - 1));\n  };\n\n  const handlePrev = () => {\n    setSelectedIndex((prev) => Math.max(prev - 1, 0));\n  };\n\n  // Input Handlers\n  const handleMouseDown: MouseEventHandler<HTMLDivElement> = (e) => {\n    setIsDragging(true);\n    setStartX(e.clientX);\n  };\n  const handleMouseMove: MouseEventHandler<HTMLDivElement> = (e) => {\n    if (isDragging) handleSwitchItem(e.clientX - startX);\n  };\n  const handleDragEnd = () => setIsDragging(false);\n  const handleTouchStart: TouchEventHandler<HTMLDivElement> = (e) => {\n    setIsDragging(true);\n    setStartX(e.touches[0].clientX);\n  };\n  const handleTouchMove: TouchEventHandler<HTMLDivElement> = (e) => {\n    if (isDragging) handleSwitchItem(e.touches[0].clientX - startX);\n  };\n\n  // Effects\n  useEffect(() => {\n    if (selectedIndex) onIndexChange?.(selectedIndex);\n  }, [selectedIndex, onIndexChange]);\n\n  useEffect(() => {\n    let interval: NodeJS.Timeout;\n\n    if (selectedIndex !== displayedIndex) {\n      interval = setInterval(() => {\n        setDisplayedIndex((prev) => {\n          if (prev === selectedIndex) {\n            clearInterval(interval);\n            return prev;\n          }\n          return prev < selectedIndex ? prev + 1 : prev - 1;\n        });\n      }, TRANSITION_DELAY_MS);\n    }\n    return () => clearInterval(interval);\n  }, [selectedIndex, displayedIndex]);\n\n  // Calculate height based on the MAX height of ALL items\n  useEffect(() => {\n    const calculateMaxHeight = () => {\n      const heights = itemsRef.current.map((item) => item?.offsetHeight || 0);\n      const maxHeight = Math.max(0, ...heights);\n\n      if (maxHeight > 0) {\n        setContainerHeight(maxHeight + 40);\n      }\n    };\n\n    calculateMaxHeight();\n\n    const observer = new ResizeObserver(() => {\n      calculateMaxHeight();\n    });\n\n    itemsRef.current.forEach((item) => {\n      if (item) observer.observe(item);\n    });\n\n    return () => observer.disconnect();\n  }, [totalItems]); // Removed isMounted dependency\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        selectedIndex,\n        setSelectedIndex,\n        totalItems,\n        handlePrev,\n        handleNext,\n      }}\n    >\n      <div\n        ref={containerRef}\n        className={cn(\n          'relative w-full cursor-grab select-none outline-none transition-[height] duration-300 ease-in-out focus:outline-none focus:outline-none focus:ring-0 active:cursor-grabbing',\n          className\n        )}\n        style={{\n          height: containerHeight > 0 ? containerHeight : 'auto',\n          minHeight: '400px',\n        }}\n        onMouseDown={handleMouseDown}\n        onMouseMove={handleMouseMove}\n        onMouseUp={handleDragEnd}\n        onMouseLeave={handleDragEnd}\n        onTouchStart={handleTouchStart}\n        onTouchMove={handleTouchMove}\n        onTouchEnd={handleDragEnd}\n        role=\"region\"\n        aria-label=\"Carousel\"\n        {...props}\n      >\n        {slides.map((child, index) => {\n          return (\n            <div\n              key={index}\n              role=\"button\"\n              tabIndex={0}\n              ref={(el) => {\n                itemsRef.current[index] = el;\n              }}\n              // FIX 2: Removed isMounted checks and invisible classes.\n              // CSS units allow correct SSR rendering.\n              className={cn(\n                'absolute left-1/2 -translate-x-1/2 transition-all duration-300 ease-in-out',\n                'outline-none ring-0 focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0',\n                getCardStyle(index, displayedIndex)\n              )}\n              onClick={(e) => {\n                e.stopPropagation();\n                setSelectedIndex(index);\n              }}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter' || e.key === ' ') setSelectedIndex(index);\n              }}\n              style={{\n                // FIX 3: getCardPositionX now returns '30vw', so no 'px' suffix needed here\n                transform: `\n                  translateX(${getCardPositionX(index, displayedIndex)}) \n                  scale(${getCardScale(index, displayedIndex)})\n                `,\n              }}\n            >\n              {child}\n            </div>\n          );\n        })}\n\n        {others}\n      </div>\n    </CarouselContext.Provider>\n  );\n};\n\nexport const Carousel = Object.assign(CarouselRoot, {\n  Item: CarouselItem,\n  Indicators: CarouselIndicators,\n});\n"],"mappings":";;;;;;;;;;;;AAiCA,MAAM,0BAA0B;AAChC,MAAM,sBAAsB;AAa5B,MAAM,kBAAkB,cAA2C,KAAK;AAExE,MAAM,oBAAoB;CACxB,MAAM,UAAU,WAAW,gBAAgB;AAC3C,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,6CAA6C;AAE/D,QAAO;;AAMT,MAAM,gBAAgB,OAAe,mBAA2B;AAE9D,SADa,KAAK,IAAI,QAAQ,eAAe,EAC7C;EACE,KAAK,EACH,QAAO;EACT,KAAK,EACH,QAAO;EACT,KAAK,EACH,QAAO;EACT,QACE,QAAO;;;AAIb,MAAM,gBAAgB,OAAe,mBAA2B;AAE9D,SADa,KAAK,IAAI,QAAQ,eAAe,EAC7C;EACE,KAAK,EACH,QAAO;EACT,KAAK,EACH,QAAO;EACT,KAAK,EACH,QAAO;EACT,QACE,QAAO;;;AAOb,MAAM,oBAAoB,OAAe,mBAA2B;AAElE,QAAO,IADM,QAAQ,kBACJ,GAAG;;AAUtB,MAAMA,gBAAuC,EAC3C,UACA,WACA,GAAG,YACC;AACJ,QACE,oBAAC;EAAI,WAAW,GAAG,iBAAiB,UAAU;EAAE,GAAI;EACjD;GACG;;AAWV,MAAMC,sBAAmD,EACvD,WACA,2BAA2B,OAC3B,GAAG,YACC;CACJ,MAAM,EACJ,eACA,kBACA,YACA,YACA,eACE,aAAa;CACjB,MAAM,EAAE,WAAW,eAAe,cAAc,YAAY,WAAW;AAEvE,KAAI,cAAc,EAAG,QAAO;AAE5B,QACE,qBAAC;EACC,WAAW,GACT,qFACA,UACD;EACD,GAAI;;GAEJ,qBAAC;IAAQ,YAAW;eAClB,oBAAC;KACC,SAAS,cAAc;KACvB,OAAO,YAAY;KACnB,OAAO,cAAc;KACrB,aAAY;KACZ,UAAU,MAAM;AACd,QAAE,iBAAiB;AACnB,kBAAY;;KAEd,MAAM;KACN,MAAM,WAAW;KACjB,UAAU,kBAAkB;MAC5B,EAEF,oBAAC,QAAQ;KAAO,YAAW;eACzB,qBAAC;MAAI,WAAU;iBACb,oBAAC;OAAK,WAAU;iBACb,cAAc;QACV,EACP,oBAAC;OACC,UAAS;OACT,UAAU;OACV,MAAK;OACL,aAAa;QACb;OACE;MACS;KACT;GAET,MAAM,KAAK,EAAE,QAAQ,YAAY,CAAC,CAAC,KAAK,GAAG,UAAU;IACpD,MAAM,WAAW,UAAU;AAC3B,WACE,oBAAC;KAEC,MAAK;KACL,UAAU,MAAM;AACd,QAAE,iBAAiB;AACnB,uBAAiB,MAAM;;KAEzB,cAAY,UAAU,EAAE,OAAO,QAAQ,GAAG,CAAC,CAAC;KAC5C,WAAW,GACT,mIACA,WAAW,sBAAsB,8BAClC;OAVI,MAWL;KAEJ;GAEF,qBAAC;IAAQ,YAAW;eAClB,oBAAC;KACC,SAAS,cAAc;KACvB,OAAO,YAAY;KACnB,aAAY;KACZ,OAAO,UAAU;KACjB,UAAU,MAAM;AACd,QAAE,iBAAiB;AACnB,kBAAY;;KAEd,MAAM;KACN,MAAM,WAAW;KACjB,UAAU,kBAAkB,aAAa;MACzC,EAEF,oBAAC,QAAQ;KAAO,YAAW;eACzB,qBAAC;MAAI,WAAU;iBACb,oBAAC;OAAK,WAAU;iBACb,UAAU;QACN,EACP,oBAAC;OACC,UAAS;OACT,MAAK;OACL,aAAa;OACb,UAAU;QACV;OACE;MACS;KACT;;GACN;;AAaV,MAAM,6BACJ,aACkC;CAClC,MAAMC,SAAyB,EAAE;CACjC,MAAMC,SAAsB,EAAE;AAE9B,UAAS,SAAS,UAAU;AAC1B,MAAI,eAAe,MAAM,IAAI,MAAM,SAAS,aAC1C,QAAO,KAAK,MAAM;MAElB,QAAO,KAAK,MAAM;GAEpB;AAEF,QAAO,CAAC,QAAQ,OAAO;;AAGzB,MAAMC,gBAAmC,EACvC,UACA,WACA,eAAe,GACf,eACA,GAAG,YACC;CAEJ,MAAM,CAAC,QAAQ,UAAU,0BADL,SAAS,QAAQ,SAAS,CACiB;CAC/D,MAAM,aAAa,OAAO;CAG1B,MAAM,CAAC,eAAe,oBAAoB,SAAiB,aAAa;CACxE,MAAM,CAAC,gBAAgB,qBAAqB,SAAiB,aAAa;CAC1E,MAAM,CAAC,iBAAiB,sBAAsB,SAAiB,EAAE;CAGjE,MAAM,CAAC,QAAQ,aAAa,SAAS,EAAE;CACvC,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CAGnD,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,WAAW,OAAkC,EAAE,CAAC;CAGtD,MAAM,oBAAoB,SAAiB;AACzC,MAAI,OAAO,WAAW,YAAa;EAGnC,MAAM,YADc,OAAO,aACK;EAChC,MAAM,WAAW,KAAK,MAAM,OAAO,UAAU;AAE7C,MAAI,KAAK,IAAI,SAAS,IAAI,GAAG;GAC3B,MAAM,WAAW,iBAAiB;GAClC,MAAM,eAAe,KAAK,IAAI,GAAG,KAAK,IAAI,UAAU,aAAa,EAAE,CAAC;AAEpE,OAAI,iBAAiB,eAAe;AAClC,qBAAiB,aAAa;AAC9B,eAAW,SAAS,OAAO,KAAK;;;;CAKtC,MAAM,mBAAmB;AACvB,oBAAkB,SAAS,KAAK,IAAI,OAAO,GAAG,aAAa,EAAE,CAAC;;CAGhE,MAAM,mBAAmB;AACvB,oBAAkB,SAAS,KAAK,IAAI,OAAO,GAAG,EAAE,CAAC;;CAInD,MAAMC,mBAAsD,MAAM;AAChE,gBAAc,KAAK;AACnB,YAAU,EAAE,QAAQ;;CAEtB,MAAMC,mBAAsD,MAAM;AAChE,MAAI,WAAY,kBAAiB,EAAE,UAAU,OAAO;;CAEtD,MAAM,sBAAsB,cAAc,MAAM;CAChD,MAAMC,oBAAuD,MAAM;AACjE,gBAAc,KAAK;AACnB,YAAU,EAAE,QAAQ,GAAG,QAAQ;;CAEjC,MAAMC,mBAAsD,MAAM;AAChE,MAAI,WAAY,kBAAiB,EAAE,QAAQ,GAAG,UAAU,OAAO;;AAIjE,iBAAgB;AACd,MAAI,cAAe,iBAAgB,cAAc;IAChD,CAAC,eAAe,cAAc,CAAC;AAElC,iBAAgB;EACd,IAAIC;AAEJ,MAAI,kBAAkB,eACpB,YAAW,kBAAkB;AAC3B,sBAAmB,SAAS;AAC1B,QAAI,SAAS,eAAe;AAC1B,mBAAc,SAAS;AACvB,YAAO;;AAET,WAAO,OAAO,gBAAgB,OAAO,IAAI,OAAO;KAChD;KACD,oBAAoB;AAEzB,eAAa,cAAc,SAAS;IACnC,CAAC,eAAe,eAAe,CAAC;AAGnC,iBAAgB;EACd,MAAM,2BAA2B;GAC/B,MAAM,UAAU,SAAS,QAAQ,KAAK,SAAS,MAAM,gBAAgB,EAAE;GACvE,MAAM,YAAY,KAAK,IAAI,GAAG,GAAG,QAAQ;AAEzC,OAAI,YAAY,EACd,oBAAmB,YAAY,GAAG;;AAItC,sBAAoB;EAEpB,MAAM,WAAW,IAAI,qBAAqB;AACxC,uBAAoB;IACpB;AAEF,WAAS,QAAQ,SAAS,SAAS;AACjC,OAAI,KAAM,UAAS,QAAQ,KAAK;IAChC;AAEF,eAAa,SAAS,YAAY;IACjC,CAAC,WAAW,CAAC;AAEhB,QACE,oBAAC,gBAAgB;EACf,OAAO;GACL;GACA;GACA;GACA;GACA;GACD;YAED,qBAAC;GACC,KAAK;GACL,WAAW,GACT,+KACA,UACD;GACD,OAAO;IACL,QAAQ,kBAAkB,IAAI,kBAAkB;IAChD,WAAW;IACZ;GACD,aAAa;GACb,aAAa;GACb,WAAW;GACX,cAAc;GACd,cAAc;GACd,aAAa;GACb,YAAY;GACZ,MAAK;GACL,cAAW;GACX,GAAI;cAEH,OAAO,KAAK,OAAO,UAAU;AAC5B,WACE,oBAAC;KAEC,MAAK;KACL,UAAU;KACV,MAAM,OAAO;AACX,eAAS,QAAQ,SAAS;;KAI5B,WAAW,GACT,8EACA,uJACA,aAAa,OAAO,eAAe,CACpC;KACD,UAAU,MAAM;AACd,QAAE,iBAAiB;AACnB,uBAAiB,MAAM;;KAEzB,YAAY,MAAM;AAChB,UAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,IAAK,kBAAiB,MAAM;;KAEjE,OAAO,EAEL,WAAW;+BACI,iBAAiB,OAAO,eAAe,CAAC;0BAC7C,aAAa,OAAO,eAAe,CAAC;mBAE/C;eAEA;OA5BI,MA6BD;KAER,EAED;IACG;GACmB;;AAI/B,MAAa,WAAW,OAAO,OAAO,cAAc;CAClD,MAAM;CACN,YAAY;CACb,CAAC"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Carousel/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Button,\n  ButtonColor,\n  ButtonSize,\n  ButtonVariant,\n} from '@components/Button';\nimport { KeyboardShortcut } from '@components/KeyboardShortcut';\nimport { Popover } from '@components/Popover';\n// Removed useIsMounted as it is no longer needed for positioning\nimport { cn } from '@utils/cn';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport {\n  Children,\n  createContext,\n  type FC,\n  type HTMLAttributes,\n  isValidElement,\n  type MouseEventHandler,\n  type ReactElement,\n  type ReactNode,\n  type TouchEventHandler,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntlayer } from 'react-intlayer';\n\n// ------------------------------------------------------------------\n// Configuration\n// ------------------------------------------------------------------\nconst SWIPE_THRESHOLD_DIVISOR = 5;\nconst TRANSITION_DELAY_MS = 50;\n\n// ------------------------------------------------------------------\n// Context Definition\n// ------------------------------------------------------------------\ntype CarouselContextValue = {\n  selectedIndex: number;\n  setSelectedIndex: (index: number) => void;\n  totalItems: number;\n  handlePrev: () => void;\n  handleNext: () => void;\n};\n\nconst CarouselContext = createContext<CarouselContextValue | null>(null);\n\nconst useCarousel = () => {\n  const context = useContext(CarouselContext);\n  if (!context) {\n    throw new Error('useCarousel must be used within a Carousel');\n  }\n  return context;\n};\n\n// ------------------------------------------------------------------\n// Helper Functions\n// ------------------------------------------------------------------\nconst getCardStyle = (index: number, displayedIndex: number) => {\n  const diff = Math.abs(index - displayedIndex);\n  switch (diff) {\n    case 0:\n      return 'opacity-100 z-40';\n    case 1:\n      return 'opacity-75 z-30 cursor-pointer';\n    case 2:\n      return 'opacity-50 z-20 pointer-events-none';\n    default:\n      return 'opacity-0 z-10 pointer-events-none';\n  }\n};\n\nconst getCardScale = (index: number, displayedIndex: number) => {\n  const diff = Math.abs(index - displayedIndex);\n  switch (diff) {\n    case 0:\n      return 1;\n    case 1:\n      return 0.9;\n    case 2:\n      return 0.8;\n    default:\n      return 0.7;\n  }\n};\n\n// FIX 1: Use CSS units (vw) instead of window.innerWidth (pixels)\n// This allows the calculation to work on SSR without hydration mismatch.\n// Your original logic: (3 * screenWidth) / 10  === 30% of viewport width\nconst getCardPositionX = (index: number, displayedIndex: number) => {\n  const diff = index - displayedIndex;\n  return `${diff * 30}vw`;\n};\n\n// ------------------------------------------------------------------\n// Sub-Component: Item\n// ------------------------------------------------------------------\ntype CarouselItemProps = HTMLAttributes<HTMLDivElement> & {\n  children: ReactNode;\n};\n\nconst CarouselItem: FC<CarouselItemProps> = ({\n  children,\n  className,\n  ...props\n}) => {\n  return (\n    <div className={cn('h-full w-full', className)} {...props}>\n      {children}\n    </div>\n  );\n};\n\n// ------------------------------------------------------------------\n// Sub-Component: Indicators (Controller)\n// ------------------------------------------------------------------\ntype CarouselIndicatorsProps = HTMLAttributes<HTMLDivElement> & {\n  disableKeyboardShortcuts?: boolean;\n};\n\nconst CarouselIndicators: FC<CarouselIndicatorsProps> = ({\n  className,\n  disableKeyboardShortcuts = false,\n  ...props\n}) => {\n  const {\n    selectedIndex,\n    setSelectedIndex,\n    totalItems,\n    handlePrev,\n    handleNext,\n  } = useCarousel();\n  const { goToSlide, previousSlide, nextSlide } = useIntlayer('carousel');\n\n  if (totalItems <= 1) return null;\n\n  return (\n    <div\n      className={cn(\n        'absolute bottom-4 left-1/2 z-50 flex -translate-x-1/2 flex-row items-center gap-2',\n        className\n      )}\n      {...props}\n    >\n      <Popover identifier=\"carousel-prev\">\n        <Button\n          variant={ButtonVariant.HOVERABLE}\n          color={ButtonColor.NEUTRAL}\n          label={previousSlide.value}\n          roundedSize=\"full\"\n          onClick={(e) => {\n            e.stopPropagation();\n            handlePrev();\n          }}\n          Icon={ChevronLeft}\n          size={ButtonSize.ICON_MD}\n          disabled={selectedIndex === 0}\n        />\n\n        <Popover.Detail identifier=\"carousel-prev\">\n          <div className=\"flex items-center gap-2 p-2\">\n            <span className=\"whitespace-nowrap text-neutral text-xs\">\n              {previousSlide.value}\n            </span>\n            <KeyboardShortcut\n              shortcut=\"ArrowLeft\"\n              disabled={disableKeyboardShortcuts}\n              size=\"sm\"\n              onTriggered={handlePrev}\n            />\n          </div>\n        </Popover.Detail>\n      </Popover>\n\n      {Array.from({ length: totalItems }).map((_, index) => {\n        const isActive = index === selectedIndex;\n        return (\n          <button\n            key={index}\n            type=\"button\"\n            onClick={(e) => {\n              e.stopPropagation();\n              setSelectedIndex(index);\n            }}\n            aria-label={goToSlide({ index: index + 1 }).value}\n            className={cn(\n              'h-2.5 w-2.5 rounded-full transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2',\n              isActive ? 'scale-110 bg-text' : 'bg-text/20 hover:bg-text/40'\n            )}\n          />\n        );\n      })}\n\n      <Popover identifier=\"carousel-next\">\n        <Button\n          variant={ButtonVariant.HOVERABLE}\n          color={ButtonColor.NEUTRAL}\n          roundedSize=\"full\"\n          label={nextSlide.value}\n          onClick={(e) => {\n            e.stopPropagation();\n            handleNext();\n          }}\n          Icon={ChevronRight}\n          size={ButtonSize.ICON_MD}\n          disabled={selectedIndex === totalItems - 1}\n        />\n\n        <Popover.Detail identifier=\"carousel-next\">\n          <div className=\"flex items-center gap-2 p-2\">\n            <span className=\"whitespace-nowrap text-neutral text-xs\">\n              {nextSlide.value}\n            </span>\n            <KeyboardShortcut\n              shortcut=\"ArrowRight\"\n              size=\"sm\"\n              onTriggered={handleNext}\n              disabled={disableKeyboardShortcuts}\n            />\n          </div>\n        </Popover.Detail>\n      </Popover>\n    </div>\n  );\n};\n\n// ------------------------------------------------------------------\n// Main Component: Carousel Root\n// ------------------------------------------------------------------\ntype CarouselProps = HTMLAttributes<HTMLDivElement> & {\n  children: ReactNode;\n  initialIndex?: number;\n  onIndexChange?: (index: number) => void;\n};\n\nconst partitionCarouselChildren = (\n  children: ReactNode[]\n): [ReactElement[], ReactNode[]] => {\n  const slides: ReactElement[] = [];\n  const others: ReactNode[] = [];\n\n  children.forEach((child) => {\n    if (isValidElement(child) && child.type === CarouselItem) {\n      slides.push(child);\n    } else {\n      others.push(child);\n    }\n  });\n\n  return [slides, others];\n};\n\nconst CarouselRoot: FC<CarouselProps> = ({\n  children,\n  className,\n  initialIndex = 0,\n  onIndexChange,\n  ...props\n}) => {\n  const allChildren = Children.toArray(children);\n  const [slides, others] = partitionCarouselChildren(allChildren);\n  const totalItems = slides.length;\n\n  // State Management\n  const [selectedIndex, setSelectedIndex] = useState<number>(initialIndex);\n  const [displayedIndex, setDisplayedIndex] = useState<number>(initialIndex);\n  const [containerHeight, setContainerHeight] = useState<number>(0);\n\n  // Drag State\n  const [startX, setStartX] = useState(0);\n  const [isDragging, setIsDragging] = useState(false);\n\n  // Refs\n  const containerRef = useRef<HTMLDivElement>(null);\n  const itemsRef = useRef<(HTMLDivElement | null)[]>([]);\n\n  // Navigation Logic\n  const handleSwitchItem = (diff: number) => {\n    if (typeof window === 'undefined') return;\n\n    const screenWidth = window.innerWidth;\n    const swipeStep = screenWidth / SWIPE_THRESHOLD_DIVISOR;\n    const numSwipe = Math.round(diff / swipeStep);\n\n    if (Math.abs(numSwipe) >= 1) {\n      const newIndex = displayedIndex - numSwipe;\n      const clampedIndex = Math.max(0, Math.min(newIndex, totalItems - 1));\n\n      if (clampedIndex !== selectedIndex) {\n        setSelectedIndex(clampedIndex);\n        setStartX((prev) => prev + diff);\n      }\n    }\n  };\n\n  const handleNext = () => {\n    setSelectedIndex((prev) => Math.min(prev + 1, totalItems - 1));\n  };\n\n  const handlePrev = () => {\n    setSelectedIndex((prev) => Math.max(prev - 1, 0));\n  };\n\n  // Input Handlers\n  const handleMouseDown: MouseEventHandler<HTMLDivElement> = (e) => {\n    setIsDragging(true);\n    setStartX(e.clientX);\n  };\n  const handleMouseMove: MouseEventHandler<HTMLDivElement> = (e) => {\n    if (isDragging) handleSwitchItem(e.clientX - startX);\n  };\n  const handleDragEnd = () => setIsDragging(false);\n  const handleTouchStart: TouchEventHandler<HTMLDivElement> = (e) => {\n    setIsDragging(true);\n    setStartX(e.touches[0].clientX);\n  };\n  const handleTouchMove: TouchEventHandler<HTMLDivElement> = (e) => {\n    if (isDragging) handleSwitchItem(e.touches[0].clientX - startX);\n  };\n\n  // Effects\n  useEffect(() => {\n    if (selectedIndex) onIndexChange?.(selectedIndex);\n  }, [selectedIndex, onIndexChange]);\n\n  useEffect(() => {\n    let interval: NodeJS.Timeout;\n\n    if (selectedIndex !== displayedIndex) {\n      interval = setInterval(() => {\n        setDisplayedIndex((prev) => {\n          if (prev === selectedIndex) {\n            clearInterval(interval);\n            return prev;\n          }\n          return prev < selectedIndex ? prev + 1 : prev - 1;\n        });\n      }, TRANSITION_DELAY_MS);\n    }\n    return () => clearInterval(interval);\n  }, [selectedIndex, displayedIndex]);\n\n  // Calculate height based on the MAX height of ALL items\n  useEffect(() => {\n    const calculateMaxHeight = () => {\n      const heights = itemsRef.current.map((item) => item?.offsetHeight || 0);\n      const maxHeight = Math.max(0, ...heights);\n\n      if (maxHeight > 0) {\n        setContainerHeight(maxHeight + 40);\n      }\n    };\n\n    calculateMaxHeight();\n\n    const observer = new ResizeObserver(() => {\n      calculateMaxHeight();\n    });\n\n    itemsRef.current.forEach((item) => {\n      if (item) observer.observe(item);\n    });\n\n    return () => observer.disconnect();\n  }, [totalItems]); // Removed isMounted dependency\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        selectedIndex,\n        setSelectedIndex,\n        totalItems,\n        handlePrev,\n        handleNext,\n      }}\n    >\n      <div\n        ref={containerRef}\n        className={cn(\n          'relative w-full cursor-grab select-none outline-none transition-[height] duration-300 ease-in-out focus:outline-none focus:outline-none focus:ring-0 active:cursor-grabbing',\n          className\n        )}\n        style={{\n          height: containerHeight > 0 ? containerHeight : 'auto',\n          minHeight: '400px',\n        }}\n        onMouseDown={handleMouseDown}\n        onMouseMove={handleMouseMove}\n        onMouseUp={handleDragEnd}\n        onMouseLeave={handleDragEnd}\n        onTouchStart={handleTouchStart}\n        onTouchMove={handleTouchMove}\n        onTouchEnd={handleDragEnd}\n        role=\"region\"\n        aria-label=\"Carousel\"\n        {...props}\n      >\n        {slides.map((child, index) => {\n          return (\n            <div\n              key={index}\n              role=\"button\"\n              tabIndex={0}\n              ref={(el) => {\n                itemsRef.current[index] = el;\n              }}\n              // FIX 2: Removed isMounted checks and invisible classes.\n              // CSS units allow correct SSR rendering.\n              className={cn(\n                'absolute left-1/2 -translate-x-1/2 transition-all duration-300 ease-in-out',\n                'outline-none ring-0 focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0',\n                getCardStyle(index, displayedIndex)\n              )}\n              onClick={(e) => {\n                e.stopPropagation();\n                setSelectedIndex(index);\n              }}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter' || e.key === ' ') setSelectedIndex(index);\n              }}\n              style={{\n                // FIX 3: getCardPositionX now returns '30vw', so no 'px' suffix needed here\n                transform: `\n                  translateX(${getCardPositionX(index, displayedIndex)}) \n                  scale(${getCardScale(index, displayedIndex)})\n                `,\n              }}\n            >\n              {child}\n            </div>\n          );\n        })}\n\n        {others}\n      </div>\n    </CarouselContext.Provider>\n  );\n};\n\nexport const Carousel = Object.assign(CarouselRoot, {\n  Item: CarouselItem,\n  Indicators: CarouselIndicators,\n});\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["ClickOutsideDiv: FC<ClickOutsideDivProps>"],"sources":["../../../../src/components/ClickOutsideDiv/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type FC,\n  type HTMLAttributes,\n  type PropsWithChildren,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\n\nexport type ClickOutsideDivProps = PropsWithChildren<{\n  /**\n   * Callback function called when a click occurs outside the component\n   */\n  onClickOutSide: () => void;\n  /**\n   * Whether to listen for Escape key presses\n   * @default false\n   */\n  listenForEscape?: boolean;\n  /**\n   * Whether the component is disabled (won't trigger onClickOutSide)\n   * @default false\n   */\n  disabled?: boolean;\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nexport const ClickOutsideDiv: FC<ClickOutsideDivProps> = ({\n  children,\n  onClickOutSide,\n  listenForEscape = false,\n  disabled = false,\n  ...props\n}) => {\n  const divRef = useRef<HTMLDivElement>(null);\n\n  const handleClickOutside = useCallback(\n    (event: MouseEvent) => {\n      if (disabled) return;\n\n      // If clicking outside of the referenced element, call onClickOutSide\n      if (divRef.current && !divRef.current.contains(event.target as Node)) {\n        onClickOutSide();\n      }\n    },\n    [onClickOutSide, disabled]\n  );\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (disabled || !listenForEscape) return;\n\n      if (event.key === 'Escape') {\n        onClickOutSide();\n      }\n    },\n    [onClickOutSide, disabled, listenForEscape]\n  );\n\n  useEffect(() => {\n    // Attach the event listeners\n    document.addEventListener('mousedown', handleClickOutside, {\n      passive: true,\n    });\n\n    if (listenForEscape) {\n      document.addEventListener('keydown', handleKeyDown);\n    }\n\n    // Clean up on unmount\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n      if (listenForEscape) {\n        document.removeEventListener('keydown', handleKeyDown);\n      }\n    };\n  }, [handleClickOutside, handleKeyDown, listenForEscape]);\n\n  return (\n    <div\n      ref={divRef}\n      {...props}\n      // Add role for better accessibility when used as a container\n      role={props.role || 'region'}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AA6BA,MAAaA,mBAA6C,EACxD,UACA,gBACA,kBAAkB,OAClB,WAAW,OACX,GAAG,YACC;CACJ,MAAM,SAAS,OAAuB,KAAK;CAE3C,MAAM,qBAAqB,aACxB,UAAsB;AACrB,MAAI,SAAU;AAGd,MAAI,OAAO,WAAW,CAAC,OAAO,QAAQ,SAAS,MAAM,OAAe,CAClE,iBAAgB;IAGpB,CAAC,gBAAgB,SAAS,CAC3B;CAED,MAAM,gBAAgB,aACnB,UAAyB;AACxB,MAAI,YAAY,CAAC,gBAAiB;AAElC,MAAI,MAAM,QAAQ,SAChB,iBAAgB;IAGpB;EAAC;EAAgB;EAAU;EAAgB,CAC5C;AAED,iBAAgB;AAEd,WAAS,iBAAiB,aAAa,oBAAoB,EACzD,SAAS,MACV,CAAC;AAEF,MAAI,gBACF,UAAS,iBAAiB,WAAW,cAAc;AAIrD,eAAa;AACX,YAAS,oBAAoB,aAAa,mBAAmB;AAC7D,OAAI,gBACF,UAAS,oBAAoB,WAAW,cAAc;;IAGzD;EAAC;EAAoB;EAAe;EAAgB,CAAC;AAExD,QACE,oBAAC;EACC,KAAK;EACL,GAAI;EAEJ,MAAM,MAAM,QAAQ;EAEnB;GACG"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/ClickOutsideDiv/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type FC,\n  type HTMLAttributes,\n  type PropsWithChildren,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\n\nexport type ClickOutsideDivProps = PropsWithChildren<{\n  /**\n   * Callback function called when a click occurs outside the component\n   */\n  onClickOutSide: () => void;\n  /**\n   * Whether to listen for Escape key presses\n   * @default false\n   */\n  listenForEscape?: boolean;\n  /**\n   * Whether the component is disabled (won't trigger onClickOutSide)\n   * @default false\n   */\n  disabled?: boolean;\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nexport const ClickOutsideDiv: FC<ClickOutsideDivProps> = ({\n  children,\n  onClickOutSide,\n  listenForEscape = false,\n  disabled = false,\n  ...props\n}) => {\n  const divRef = useRef<HTMLDivElement>(null);\n\n  const handleClickOutside = useCallback(\n    (event: MouseEvent) => {\n      if (disabled) return;\n\n      // If clicking outside of the referenced element, call onClickOutSide\n      if (divRef.current && !divRef.current.contains(event.target as Node)) {\n        onClickOutSide();\n      }\n    },\n    [onClickOutSide, disabled]\n  );\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (disabled || !listenForEscape) return;\n\n      if (event.key === 'Escape') {\n        onClickOutSide();\n      }\n    },\n    [onClickOutSide, disabled, listenForEscape]\n  );\n\n  useEffect(() => {\n    // Attach the event listeners\n    document.addEventListener('mousedown', handleClickOutside, {\n      passive: true,\n    });\n\n    if (listenForEscape) {\n      document.addEventListener('keydown', handleKeyDown);\n    }\n\n    // Clean up on unmount\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n      if (listenForEscape) {\n        document.removeEventListener('keydown', handleKeyDown);\n      }\n    };\n  }, [handleClickOutside, handleKeyDown, listenForEscape]);\n\n  return (\n    <div\n      ref={divRef}\n      {...props}\n      // Add role for better accessibility when used as a container\n      role={props.role || 'region'}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AA6BA,MAAa,mBAA6C,EACxD,UACA,gBACA,kBAAkB,OAClB,WAAW,OACX,GAAG,YACC;CACJ,MAAM,SAAS,OAAuB,KAAK;CAE3C,MAAM,qBAAqB,aACxB,UAAsB;AACrB,MAAI,SAAU;AAGd,MAAI,OAAO,WAAW,CAAC,OAAO,QAAQ,SAAS,MAAM,OAAe,CAClE,iBAAgB;IAGpB,CAAC,gBAAgB,SAAS,CAC3B;CAED,MAAM,gBAAgB,aACnB,UAAyB;AACxB,MAAI,YAAY,CAAC,gBAAiB;AAElC,MAAI,MAAM,QAAQ,SAChB,iBAAgB;IAGpB;EAAC;EAAgB;EAAU;EAAgB,CAC5C;AAED,iBAAgB;AAEd,WAAS,iBAAiB,aAAa,oBAAoB,EACzD,SAAS,MACV,CAAC;AAEF,MAAI,gBACF,UAAS,iBAAiB,WAAW,cAAc;AAIrD,eAAa;AACX,YAAS,oBAAoB,aAAa,mBAAmB;AAC7D,OAAI,gBACF,UAAS,oBAAoB,WAAW,cAAc;;IAGzD;EAAC;EAAoB;EAAe;EAAgB,CAAC;AAExD,QACE,oBAAC;EACC,KAAK;EACL,GAAI;EAEJ,MAAM,MAAM,QAAQ;EAEnB;GACG"}

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

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleTable.mjs","names":["CollapsibleTable: FC<CollapsibleTableProps>","data"],"sources":["../../../../src/components/CollapsibleTable/CollapsibleTable.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ChevronRight } from 'lucide-react';\nimport { type FC, type HTMLAttributes, type ReactNode, useState } from 'react';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\n// Container variants using CVA\nconst collapsibleTableVariants = cva(\n  'w-full max-w-full overflow-hidden rounded-lg border bg-card',\n  {\n    variants: {\n      size: {\n        sm: 'max-w-lg',\n        md: 'max-w-2xl',\n        lg: 'max-w-4xl',\n        xl: 'max-w-6xl',\n        full: 'w-full max-w-none',\n      },\n      variant: {\n        default: 'border-neutral/20 bg-card',\n        dark: 'border-[#B5B5B5] bg-[#242424]',\n        ghost: 'border-transparent bg-transparent',\n        outlined: 'border-2 border-primary/20 bg-background',\n      },\n      spacing: {\n        none: '',\n        sm: 'm-2',\n        md: 'm-4',\n        lg: 'm-6',\n        auto: 'm-auto',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      variant: 'default',\n      spacing: 'auto',\n    },\n  }\n);\n\n// Header variants\nconst headerVariants = cva(\n  'flex cursor-pointer items-center justify-between p-3 transition-colors duration-200',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-neutral/5',\n        dark: 'hover:bg-neutral/10',\n        ghost: 'hover:bg-primary/5',\n        outlined: 'hover:bg-primary/5',\n      },\n      borderStyle: {\n        none: '',\n        dashed: 'border-neutral/20 border-b border-dashed',\n        solid: 'border-neutral/20 border-b border-solid',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      borderStyle: 'dashed',\n    },\n  }\n);\n\n// Table variants\nconst tableVariants = cva('w-full border-collapse', {\n  variants: {\n    spacing: {\n      none: 'border-spacing-0',\n      sm: 'border-spacing-1',\n      md: 'border-spacing-2',\n      lg: 'border-spacing-4',\n    },\n    layout: {\n      auto: 'table-auto',\n      fixed: 'table-fixed',\n    },\n  },\n  defaultVariants: {\n    spacing: 'md',\n    layout: 'auto',\n  },\n});\n\nexport interface CollapsibleTableProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>,\n    VariantProps<typeof collapsibleTableVariants> {\n  /** Table title displayed in the header */\n  title: string;\n  /** Array of data objects to display in the table */\n  data: Record<string, unknown>[];\n  /** Custom class for the main container */\n  className?: string;\n  /** Custom class for the header section */\n  headerClassName?: string;\n  /** Custom class for the content wrapper */\n  contentClassName?: string;\n  /** Custom class for the table element */\n  tableClassName?: string;\n  /** Custom class for table header cells */\n  thClassName?: string;\n  /** Custom class for table body cells */\n  tdClassName?: string;\n  /** Custom class for table rows */\n  trClassName?: string;\n  /** Controls if the table is expanded by default */\n  defaultExpanded?: boolean;\n  /** Controlled expansion state */\n  isExpanded?: boolean;\n  /** Callback when expansion state changes */\n  onExpandToggle?: (expanded: boolean) => void;\n  /** Custom icon for the toggle (defaults to ChevronRight) */\n  toggleIcon?: ReactNode;\n  /** Header border style variant */\n  borderStyle?: 'none' | 'dashed' | 'solid';\n  /** Table spacing variant */\n  tableSpacing?: 'none' | 'sm' | 'md' | 'lg';\n  /** Table layout variant */\n  tableLayout?: 'auto' | 'fixed';\n  /** Custom column renderers */\n  columnRenderers?: Record<\n    string,\n    (value: unknown, row: Record<string, unknown>) => ReactNode\n  >;\n  /** Disable the collapse functionality */\n  disabled?: boolean;\n  /** Accessible label for screen readers */\n  'aria-label'?: string;\n  /** ID for the table content (for aria-controls) */\n  contentId?: string;\n}\n\n/**\n * CollapsibleTable component that displays tabular data in an expandable/collapsible format.\n * It provides a clickable header that controls the visibility of the table content with smooth animations.\n *\n * Features:\n * - Supports both controlled and uncontrolled modes\n * - Customizable styling with CVA variants (size, variant, spacing)\n * - Multiple className props for granular styling control\n * - Custom column rendering and ordering\n * - Accessible with proper ARIA attributes and keyboard navigation\n * - Responsive design with overflow handling\n * - Empty state customization\n * - Flexible data structure support\n *\n * @example\n * // Basic usage\n * const userData = [\n *   { name: 'John Doe', role: 'Developer', experience: '5 years' },\n *   { name: 'Jane Smith', role: 'Designer', experience: '3 years' },\n * ];\n *\n * <CollapsibleTable\n *   title=\"Team Members\"\n *   data={userData}\n *   defaultExpanded={true}\n * />\n *\n * @example\n * // Advanced usage with custom styling and renderers\n * const projectData = [\n *   { name: 'Project A', status: 'active', priority: 'high' },\n *   { name: 'Project B', status: 'completed', priority: 'medium' },\n * ];\n *\n * const columnRenderers = {\n *   status: (value) => (\n *     <Badge variant={value === 'active' ? 'success' : 'default'}>\n *       {value}\n *     </Badge>\n *   ),\n *   priority: (value) => (\n *     <span className={`font-semibold ${\n *       value === 'high' ? 'text-red-600' :\n *       value === 'medium' ? 'text-yellow-600' : 'text-green-600'\n *     }`}>\n *       {value}\n *     </span>\n *   ),\n * };\n *\n * <CollapsibleTable\n *   title=\"Project Dashboard\"\n *   data={projectData}\n *   variant=\"dark\"\n *   size=\"lg\"\n *   borderStyle=\"solid\"\n *   columnRenderers={columnRenderers}\n *   headerClassName=\"bg-slate-800 text-white\"\n *   tableClassName=\"bg-slate-900\"\n *   onExpandToggle={(expanded) => console.log('Table expanded:', expanded)}\n * />\n *\n * @param title - The text or React node displayed in the table header\n * @param data - Array of objects representing table rows. Keys become column headers, values become cell content\n * @param className - Additional CSS classes for the main container element\n * @param headerClassName - Additional CSS classes for the clickable header section\n * @param contentClassName - Additional CSS classes for the table content wrapper\n * @param tableClassName - Additional CSS classes for the HTML table element\n * @param thClassName - Additional CSS classes for table header cells (th elements)\n * @param tdClassName - Additional CSS classes for table body cells (td elements)\n * @param trClassName - Additional CSS classes for table rows (tr elements)\n * @param defaultExpanded - Initial expansion state when component is uncontrolled (default: false)\n * @param isExpanded - Controls expansion state when component is controlled. When provided, component becomes controlled\n * @param onExpandToggle - Callback function called when expansion state changes. Receives new expanded state as parameter\n * @param toggleIcon - Custom React node to display as toggle icon. Defaults to ChevronRight from lucide-react\n * @param size - Size variant affecting container max-width: 'sm' | 'md' | 'lg' | 'xl' | 'full'\n * @param variant - Visual style variant: 'default' | 'dark' | 'ghost' | 'outlined'\n * @param spacing - Container margin spacing: 'none' | 'sm' | 'md' | 'lg' | 'auto'\n * @param borderStyle - Header border style when expanded: 'none' | 'dashed' | 'solid'\n * @param tableSpacing - Table cell spacing: 'none' | 'sm' | 'md' | 'lg'\n * @param tableLayout - CSS table-layout property: 'auto' | 'fixed'\n * @param columnRenderers - Object mapping column names to custom render functions. Function receives (value, rowData) and returns ReactNode\n * @param disabled - When true, disables click interaction and shows disabled visual state\n * @param aria-label - Accessible label for screen readers describing the table purpose\n * @param contentId - Custom ID for the table content area. Used for aria-controls. Auto-generated if not provided\n */\nexport const CollapsibleTable: FC<CollapsibleTableProps> = ({\n  title,\n  data,\n  className,\n  headerClassName,\n  contentClassName,\n  tableClassName,\n  thClassName,\n  tdClassName,\n  trClassName,\n  defaultExpanded = false,\n  isExpanded: controlledExpanded,\n  onExpandToggle,\n  toggleIcon,\n  size,\n  variant,\n  spacing,\n  borderStyle,\n  tableSpacing,\n  tableLayout,\n  columnRenderers,\n  disabled = false,\n  'aria-label': ariaLabel,\n  contentId,\n  ...props\n}) => {\n  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);\n\n  const isExpanded = controlledExpanded ?? internalExpanded;\n\n  const toggleExpanded = () => {\n    if (disabled) return;\n    const newState = !isExpanded;\n    if (onExpandToggle) onExpandToggle(newState);\n    else setInternalExpanded(newState);\n  };\n\n  const getColumns = (data: Record<string, unknown>[]) => {\n    if (Array.isArray(data) && data.length > 0) {\n      const allKeys = new Set<string>();\n      data.forEach((item) => {\n        if (item && typeof item === 'object') {\n          Object.keys(item).forEach((key) => allKeys.add(key));\n        }\n      });\n      return Array.from(allKeys);\n    }\n    return [];\n  };\n\n  const tableColumns = getColumns(data);\n  const generatedContentId =\n    contentId || `collapsible-table-${Math.random().toString(36).substr(2, 9)}`;\n\n  const renderCellContent = (\n    column: string,\n    value: unknown,\n    row: Record<string, unknown>\n  ) => {\n    if (columnRenderers?.[column]) {\n      return columnRenderers[column](value, row);\n    }\n    return String(value ?? '—');\n  };\n\n  return (\n    <div\n      className={cn(\n        collapsibleTableVariants({ size, variant, spacing }),\n        className\n      )}\n      aria-label={ariaLabel}\n      {...props}\n    >\n      <div\n        onClick={toggleExpanded}\n        className={cn(\n          headerVariants({\n            variant,\n            borderStyle: isExpanded ? borderStyle : 'none',\n          }),\n          headerClassName,\n          disabled && 'cursor-not-allowed opacity-50'\n        )}\n        role=\"button\"\n        tabIndex={disabled ? -1 : 0}\n        aria-expanded={isExpanded}\n        aria-controls={generatedContentId}\n        aria-disabled={disabled}\n      >\n        <p className=\"font-semibold\">{title}</p>\n        <div\n          className={cn(\n            'transition-transform duration-200',\n            isExpanded && 'rotate-90',\n            disabled && 'opacity-50'\n          )}\n        >\n          {toggleIcon ?? <ChevronRight size={16} />}\n        </div>\n      </div>\n\n      <MaxHeightSmoother isHidden={!isExpanded}>\n        <div\n          id={generatedContentId}\n          className={cn('overflow-x-auto p-3', contentClassName)}\n          role=\"region\"\n          aria-labelledby={`${generatedContentId}-header`}\n        >\n          <table\n            className={cn(\n              tableVariants({ spacing: tableSpacing, layout: tableLayout }),\n              'border-separate',\n              tableClassName\n            )}\n          >\n            <thead>\n              <tr className={trClassName}>\n                {tableColumns.map((column) => (\n                  <th\n                    key={column}\n                    className={cn(\n                      'pb-2 text-left font-medium text-sm text-text/70',\n                      thClassName\n                    )}\n                  >\n                    {column}\n                  </th>\n                ))}\n              </tr>\n            </thead>\n            <tbody>\n              {data.map((row, index) => (\n                <tr\n                  key={index}\n                  className={cn(\n                    'bg-neutral/5 transition-colors hover:bg-neutral/10',\n                    trClassName\n                  )}\n                >\n                  {tableColumns.map((column) => (\n                    <td\n                      key={column}\n                      className={cn(\n                        'rounded px-3 py-2 text-sm text-text',\n                        tdClassName\n                      )}\n                    >\n                      {renderCellContent(column, row[column], row)}\n                    </td>\n                  ))}\n                </tr>\n              ))}\n            </tbody>\n          </table>\n        </div>\n      </MaxHeightSmoother>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AASA,MAAM,2BAA2B,IAC/B,+DACA;CACE,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;GACP;EACD,SAAS;GACP,SAAS;GACT,MAAM;GACN,OAAO;GACP,UAAU;GACX;EACD,SAAS;GACP,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;GACP;EACF;CACD,iBAAiB;EACf,MAAM;EACN,SAAS;EACT,SAAS;EACV;CACF,CACF;AAGD,MAAM,iBAAiB,IACrB,uFACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,MAAM;GACN,OAAO;GACP,UAAU;GACX;EACD,aAAa;GACX,MAAM;GACN,QAAQ;GACR,OAAO;GACR;EACF;CACD,iBAAiB;EACf,SAAS;EACT,aAAa;EACd;CACF,CACF;AAGD,MAAM,gBAAgB,IAAI,0BAA0B;CAClD,UAAU;EACR,SAAS;GACP,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACL;EACD,QAAQ;GACN,MAAM;GACN,OAAO;GACR;EACF;CACD,iBAAiB;EACf,SAAS;EACT,QAAQ;EACT;CACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwIF,MAAaA,oBAA+C,EAC1D,OACA,MACA,WACA,iBACA,kBACA,gBACA,aACA,aACA,aACA,kBAAkB,OAClB,YAAY,oBACZ,gBACA,YACA,MACA,SACA,SACA,aACA,cACA,aACA,iBACA,WAAW,OACX,cAAc,WACd,WACA,GAAG,YACC;CACJ,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,gBAAgB;CAEzE,MAAM,aAAa,sBAAsB;CAEzC,MAAM,uBAAuB;AAC3B,MAAI,SAAU;EACd,MAAM,WAAW,CAAC;AAClB,MAAI,eAAgB,gBAAe,SAAS;MACvC,qBAAoB,SAAS;;CAGpC,MAAM,cAAc,WAAoC;AACtD,MAAI,MAAM,QAAQC,OAAK,IAAIA,OAAK,SAAS,GAAG;GAC1C,MAAM,0BAAU,IAAI,KAAa;AACjC,UAAK,SAAS,SAAS;AACrB,QAAI,QAAQ,OAAO,SAAS,SAC1B,QAAO,KAAK,KAAK,CAAC,SAAS,QAAQ,QAAQ,IAAI,IAAI,CAAC;KAEtD;AACF,UAAO,MAAM,KAAK,QAAQ;;AAE5B,SAAO,EAAE;;CAGX,MAAM,eAAe,WAAW,KAAK;CACrC,MAAM,qBACJ,aAAa,qBAAqB,KAAK,QAAQ,CAAC,SAAS,GAAG,CAAC,OAAO,GAAG,EAAE;CAE3E,MAAM,qBACJ,QACA,OACA,QACG;AACH,MAAI,kBAAkB,QACpB,QAAO,gBAAgB,QAAQ,OAAO,IAAI;AAE5C,SAAO,OAAO,SAAS,IAAI;;AAG7B,QACE,qBAAC;EACC,WAAW,GACT,yBAAyB;GAAE;GAAM;GAAS;GAAS,CAAC,EACpD,UACD;EACD,cAAY;EACZ,GAAI;aAEJ,qBAAC;GACC,SAAS;GACT,WAAW,GACT,eAAe;IACb;IACA,aAAa,aAAa,cAAc;IACzC,CAAC,EACF,iBACA,YAAY,gCACb;GACD,MAAK;GACL,UAAU,WAAW,KAAK;GAC1B,iBAAe;GACf,iBAAe;GACf,iBAAe;cAEf,oBAAC;IAAE,WAAU;cAAiB;KAAU,EACxC,oBAAC;IACC,WAAW,GACT,qCACA,cAAc,aACd,YAAY,aACb;cAEA,cAAc,oBAAC,gBAAa,MAAM,KAAM;KACrC;IACF,EAEN,oBAAC;GAAkB,UAAU,CAAC;aAC5B,oBAAC;IACC,IAAI;IACJ,WAAW,GAAG,uBAAuB,iBAAiB;IACtD,MAAK;IACL,mBAAiB,GAAG,mBAAmB;cAEvC,qBAAC;KACC,WAAW,GACT,cAAc;MAAE,SAAS;MAAc,QAAQ;MAAa,CAAC,EAC7D,mBACA,eACD;gBAED,oBAAC,qBACC,oBAAC;MAAG,WAAW;gBACZ,aAAa,KAAK,WACjB,oBAAC;OAEC,WAAW,GACT,mDACA,YACD;iBAEA;SANI,OAOF,CACL;OACC,GACC,EACR,oBAAC,qBACE,KAAK,KAAK,KAAK,UACd,oBAAC;MAEC,WAAW,GACT,sDACA,YACD;gBAEA,aAAa,KAAK,WACjB,oBAAC;OAEC,WAAW,GACT,uCACA,YACD;iBAEA,kBAAkB,QAAQ,IAAI,SAAS,IAAI;SANvC,OAOF,CACL;QAhBG,MAiBF,CACL,GACI;MACF;KACJ;IACY;GAChB"}
+{"version":3,"file":"CollapsibleTable.mjs","names":["data"],"sources":["../../../../src/components/CollapsibleTable/CollapsibleTable.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ChevronRight } from 'lucide-react';\nimport { type FC, type HTMLAttributes, type ReactNode, useState } from 'react';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\n// Container variants using CVA\nconst collapsibleTableVariants = cva(\n  'w-full max-w-full overflow-hidden rounded-lg border bg-card',\n  {\n    variants: {\n      size: {\n        sm: 'max-w-lg',\n        md: 'max-w-2xl',\n        lg: 'max-w-4xl',\n        xl: 'max-w-6xl',\n        full: 'w-full max-w-none',\n      },\n      variant: {\n        default: 'border-neutral/20 bg-card',\n        dark: 'border-[#B5B5B5] bg-[#242424]',\n        ghost: 'border-transparent bg-transparent',\n        outlined: 'border-2 border-primary/20 bg-background',\n      },\n      spacing: {\n        none: '',\n        sm: 'm-2',\n        md: 'm-4',\n        lg: 'm-6',\n        auto: 'm-auto',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      variant: 'default',\n      spacing: 'auto',\n    },\n  }\n);\n\n// Header variants\nconst headerVariants = cva(\n  'flex cursor-pointer items-center justify-between p-3 transition-colors duration-200',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-neutral/5',\n        dark: 'hover:bg-neutral/10',\n        ghost: 'hover:bg-primary/5',\n        outlined: 'hover:bg-primary/5',\n      },\n      borderStyle: {\n        none: '',\n        dashed: 'border-neutral/20 border-b border-dashed',\n        solid: 'border-neutral/20 border-b border-solid',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      borderStyle: 'dashed',\n    },\n  }\n);\n\n// Table variants\nconst tableVariants = cva('w-full border-collapse', {\n  variants: {\n    spacing: {\n      none: 'border-spacing-0',\n      sm: 'border-spacing-1',\n      md: 'border-spacing-2',\n      lg: 'border-spacing-4',\n    },\n    layout: {\n      auto: 'table-auto',\n      fixed: 'table-fixed',\n    },\n  },\n  defaultVariants: {\n    spacing: 'md',\n    layout: 'auto',\n  },\n});\n\nexport interface CollapsibleTableProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>,\n    VariantProps<typeof collapsibleTableVariants> {\n  /** Table title displayed in the header */\n  title: string;\n  /** Array of data objects to display in the table */\n  data: Record<string, unknown>[];\n  /** Custom class for the main container */\n  className?: string;\n  /** Custom class for the header section */\n  headerClassName?: string;\n  /** Custom class for the content wrapper */\n  contentClassName?: string;\n  /** Custom class for the table element */\n  tableClassName?: string;\n  /** Custom class for table header cells */\n  thClassName?: string;\n  /** Custom class for table body cells */\n  tdClassName?: string;\n  /** Custom class for table rows */\n  trClassName?: string;\n  /** Controls if the table is expanded by default */\n  defaultExpanded?: boolean;\n  /** Controlled expansion state */\n  isExpanded?: boolean;\n  /** Callback when expansion state changes */\n  onExpandToggle?: (expanded: boolean) => void;\n  /** Custom icon for the toggle (defaults to ChevronRight) */\n  toggleIcon?: ReactNode;\n  /** Header border style variant */\n  borderStyle?: 'none' | 'dashed' | 'solid';\n  /** Table spacing variant */\n  tableSpacing?: 'none' | 'sm' | 'md' | 'lg';\n  /** Table layout variant */\n  tableLayout?: 'auto' | 'fixed';\n  /** Custom column renderers */\n  columnRenderers?: Record<\n    string,\n    (value: unknown, row: Record<string, unknown>) => ReactNode\n  >;\n  /** Disable the collapse functionality */\n  disabled?: boolean;\n  /** Accessible label for screen readers */\n  'aria-label'?: string;\n  /** ID for the table content (for aria-controls) */\n  contentId?: string;\n}\n\n/**\n * CollapsibleTable component that displays tabular data in an expandable/collapsible format.\n * It provides a clickable header that controls the visibility of the table content with smooth animations.\n *\n * Features:\n * - Supports both controlled and uncontrolled modes\n * - Customizable styling with CVA variants (size, variant, spacing)\n * - Multiple className props for granular styling control\n * - Custom column rendering and ordering\n * - Accessible with proper ARIA attributes and keyboard navigation\n * - Responsive design with overflow handling\n * - Empty state customization\n * - Flexible data structure support\n *\n * @example\n * // Basic usage\n * const userData = [\n *   { name: 'John Doe', role: 'Developer', experience: '5 years' },\n *   { name: 'Jane Smith', role: 'Designer', experience: '3 years' },\n * ];\n *\n * <CollapsibleTable\n *   title=\"Team Members\"\n *   data={userData}\n *   defaultExpanded={true}\n * />\n *\n * @example\n * // Advanced usage with custom styling and renderers\n * const projectData = [\n *   { name: 'Project A', status: 'active', priority: 'high' },\n *   { name: 'Project B', status: 'completed', priority: 'medium' },\n * ];\n *\n * const columnRenderers = {\n *   status: (value) => (\n *     <Badge variant={value === 'active' ? 'success' : 'default'}>\n *       {value}\n *     </Badge>\n *   ),\n *   priority: (value) => (\n *     <span className={`font-semibold ${\n *       value === 'high' ? 'text-red-600' :\n *       value === 'medium' ? 'text-yellow-600' : 'text-green-600'\n *     }`}>\n *       {value}\n *     </span>\n *   ),\n * };\n *\n * <CollapsibleTable\n *   title=\"Project Dashboard\"\n *   data={projectData}\n *   variant=\"dark\"\n *   size=\"lg\"\n *   borderStyle=\"solid\"\n *   columnRenderers={columnRenderers}\n *   headerClassName=\"bg-slate-800 text-white\"\n *   tableClassName=\"bg-slate-900\"\n *   onExpandToggle={(expanded) => console.log('Table expanded:', expanded)}\n * />\n *\n * @param title - The text or React node displayed in the table header\n * @param data - Array of objects representing table rows. Keys become column headers, values become cell content\n * @param className - Additional CSS classes for the main container element\n * @param headerClassName - Additional CSS classes for the clickable header section\n * @param contentClassName - Additional CSS classes for the table content wrapper\n * @param tableClassName - Additional CSS classes for the HTML table element\n * @param thClassName - Additional CSS classes for table header cells (th elements)\n * @param tdClassName - Additional CSS classes for table body cells (td elements)\n * @param trClassName - Additional CSS classes for table rows (tr elements)\n * @param defaultExpanded - Initial expansion state when component is uncontrolled (default: false)\n * @param isExpanded - Controls expansion state when component is controlled. When provided, component becomes controlled\n * @param onExpandToggle - Callback function called when expansion state changes. Receives new expanded state as parameter\n * @param toggleIcon - Custom React node to display as toggle icon. Defaults to ChevronRight from lucide-react\n * @param size - Size variant affecting container max-width: 'sm' | 'md' | 'lg' | 'xl' | 'full'\n * @param variant - Visual style variant: 'default' | 'dark' | 'ghost' | 'outlined'\n * @param spacing - Container margin spacing: 'none' | 'sm' | 'md' | 'lg' | 'auto'\n * @param borderStyle - Header border style when expanded: 'none' | 'dashed' | 'solid'\n * @param tableSpacing - Table cell spacing: 'none' | 'sm' | 'md' | 'lg'\n * @param tableLayout - CSS table-layout property: 'auto' | 'fixed'\n * @param columnRenderers - Object mapping column names to custom render functions. Function receives (value, rowData) and returns ReactNode\n * @param disabled - When true, disables click interaction and shows disabled visual state\n * @param aria-label - Accessible label for screen readers describing the table purpose\n * @param contentId - Custom ID for the table content area. Used for aria-controls. Auto-generated if not provided\n */\nexport const CollapsibleTable: FC<CollapsibleTableProps> = ({\n  title,\n  data,\n  className,\n  headerClassName,\n  contentClassName,\n  tableClassName,\n  thClassName,\n  tdClassName,\n  trClassName,\n  defaultExpanded = false,\n  isExpanded: controlledExpanded,\n  onExpandToggle,\n  toggleIcon,\n  size,\n  variant,\n  spacing,\n  borderStyle,\n  tableSpacing,\n  tableLayout,\n  columnRenderers,\n  disabled = false,\n  'aria-label': ariaLabel,\n  contentId,\n  ...props\n}) => {\n  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);\n\n  const isExpanded = controlledExpanded ?? internalExpanded;\n\n  const toggleExpanded = () => {\n    if (disabled) return;\n    const newState = !isExpanded;\n    if (onExpandToggle) onExpandToggle(newState);\n    else setInternalExpanded(newState);\n  };\n\n  const getColumns = (data: Record<string, unknown>[]) => {\n    if (Array.isArray(data) && data.length > 0) {\n      const allKeys = new Set<string>();\n      data.forEach((item) => {\n        if (item && typeof item === 'object') {\n          Object.keys(item).forEach((key) => allKeys.add(key));\n        }\n      });\n      return Array.from(allKeys);\n    }\n    return [];\n  };\n\n  const tableColumns = getColumns(data);\n  const generatedContentId =\n    contentId || `collapsible-table-${Math.random().toString(36).substr(2, 9)}`;\n\n  const renderCellContent = (\n    column: string,\n    value: unknown,\n    row: Record<string, unknown>\n  ) => {\n    if (columnRenderers?.[column]) {\n      return columnRenderers[column](value, row);\n    }\n    return String(value ?? '—');\n  };\n\n  return (\n    <div\n      className={cn(\n        collapsibleTableVariants({ size, variant, spacing }),\n        className\n      )}\n      aria-label={ariaLabel}\n      {...props}\n    >\n      <div\n        onClick={toggleExpanded}\n        className={cn(\n          headerVariants({\n            variant,\n            borderStyle: isExpanded ? borderStyle : 'none',\n          }),\n          headerClassName,\n          disabled && 'cursor-not-allowed opacity-50'\n        )}\n        role=\"button\"\n        tabIndex={disabled ? -1 : 0}\n        aria-expanded={isExpanded}\n        aria-controls={generatedContentId}\n        aria-disabled={disabled}\n      >\n        <p className=\"font-semibold\">{title}</p>\n        <div\n          className={cn(\n            'transition-transform duration-200',\n            isExpanded && 'rotate-90',\n            disabled && 'opacity-50'\n          )}\n        >\n          {toggleIcon ?? <ChevronRight size={16} />}\n        </div>\n      </div>\n\n      <MaxHeightSmoother isHidden={!isExpanded}>\n        <div\n          id={generatedContentId}\n          className={cn('overflow-x-auto p-3', contentClassName)}\n          role=\"region\"\n          aria-labelledby={`${generatedContentId}-header`}\n        >\n          <table\n            className={cn(\n              tableVariants({ spacing: tableSpacing, layout: tableLayout }),\n              'border-separate',\n              tableClassName\n            )}\n          >\n            <thead>\n              <tr className={trClassName}>\n                {tableColumns.map((column) => (\n                  <th\n                    key={column}\n                    className={cn(\n                      'pb-2 text-left font-medium text-sm text-text/70',\n                      thClassName\n                    )}\n                  >\n                    {column}\n                  </th>\n                ))}\n              </tr>\n            </thead>\n            <tbody>\n              {data.map((row, index) => (\n                <tr\n                  key={index}\n                  className={cn(\n                    'bg-neutral/5 transition-colors hover:bg-neutral/10',\n                    trClassName\n                  )}\n                >\n                  {tableColumns.map((column) => (\n                    <td\n                      key={column}\n                      className={cn(\n                        'rounded px-3 py-2 text-sm text-text',\n                        tdClassName\n                      )}\n                    >\n                      {renderCellContent(column, row[column], row)}\n                    </td>\n                  ))}\n                </tr>\n              ))}\n            </tbody>\n          </table>\n        </div>\n      </MaxHeightSmoother>\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["CommandRoot: FC<ComponentProps<typeof CommandPrimitive>>","CommandPrimitive","CommandDialog: FC<CommandDialogProps>","CommandInput: FC<ComponentProps<typeof CommandPrimitive.Input>>","CommandList: FC<ComponentProps<typeof CommandPrimitive.List>>","CommandEmpty: FC<ComponentProps<typeof CommandPrimitive.Empty>>","CommandGroup: FC<ComponentProps<typeof CommandPrimitive.Group>>","CommandSeparator: FC<\n  ComponentProps<typeof CommandPrimitive.Separator>\n>","CommandItem: FC<ComponentProps<typeof CommandPrimitive.Item>>"],"sources":["../../../../src/components/Command/index.tsx"],"sourcesContent":["/* eslint-disable react/no-unknown-property */\n'use client';\n\nimport {\n  Dialog,\n  DialogContent,\n  type DialogProps,\n} from '@radix-ui/react-dialog';\nimport { cn } from '@utils/cn';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport { Search } from 'lucide-react';\nimport type { ComponentProps, FC, HTMLAttributes } from 'react';\n\nexport const CommandRoot: FC<ComponentProps<typeof CommandPrimitive>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive\n    className={cn('flex flex-col overflow-hidden rounded-md', className)}\n    {...props}\n  />\n);\n\ntype CommandDialogProps = DialogProps;\n\nconst CommandDialog: FC<CommandDialogProps> = ({ children, ...props }) => (\n  <Dialog {...props}>\n    <DialogContent className=\"overflow-hidden p-0\">\n      <CommandRoot className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]_svg]:size-5\">\n        {children}\n      </CommandRoot>\n    </DialogContent>\n  </Dialog>\n);\n\nconst CommandInput: FC<ComponentProps<typeof CommandPrimitive.Input>> = ({\n  className,\n  ...props\n}) => (\n  <div className=\"flex w-full items-center\" cmdk-input-wrapper=\"\">\n    <Search className=\"mr-2 size-4 shrink-0 opacity-50\" />\n    <CommandPrimitive.Input\n      className={cn(\n        'flex w-full rounded-md bg-transparent text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',\n        className\n      )}\n      {...props}\n    />\n  </div>\n);\n\nconst CommandList: FC<ComponentProps<typeof CommandPrimitive.List>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive.List\n    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}\n    {...props}\n  />\n);\n\nconst CommandEmpty: FC<ComponentProps<typeof CommandPrimitive.Empty>> = (\n  props\n) => <CommandPrimitive.Empty className=\"py-6 text-center text-sm\" {...props} />;\n\nconst CommandGroup: FC<ComponentProps<typeof CommandPrimitive.Group>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive.Group\n    className={cn(\n      'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:text-xs',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst CommandSeparator: FC<\n  ComponentProps<typeof CommandPrimitive.Separator>\n> = ({ className, ...props }) => (\n  <CommandPrimitive.Separator\n    className={cn('-mx-1 h-px bg-border', className)}\n    {...props}\n  />\n);\n\nconst CommandItem: FC<ComponentProps<typeof CommandPrimitive.Item>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive.Item\n    className={cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst CommandShortcut = ({\n  className,\n  ...props\n}: HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        'ml-auto text-muted-foreground text-xs tracking-widest',\n        className\n      )}\n      {...props}\n    />\n  );\n};\n\n/**\n * Usage example:\n * ```jsx\n * <Command>\n *   <Command.Trigger>\n *     <Command.Input placeholder=\"Search...\" />\n *   </Command.Trigger>\n *   <Command.Dialog>\n *     <Command.List>\n *       <Command.Item>Item 1</Command.Item>\n *       <Command.Item>Item 2</Command.Item>\n *       <Command.Item>Item 3</Command.Item>\n *     </Command.List>\n *   </Command.Dialog>\n * </Command>\n * ```\n */\nexport const Command = {\n  ...CommandRoot,\n  Dialog: CommandDialog,\n  Input: CommandInput,\n  List: CommandList,\n  Empty: CommandEmpty,\n  Group: CommandGroup,\n  Separator: CommandSeparator,\n  Item: CommandItem,\n  Shortcut: CommandShortcut,\n};\n"],"mappings":";;;;;;;;;AAaA,MAAaA,eAA4D,EACvE,WACA,GAAG,YAEH,oBAACC;CACC,WAAW,GAAG,4CAA4C,UAAU;CACpE,GAAI;EACJ;AAKJ,MAAMC,iBAAyC,EAAE,UAAU,GAAG,YAC5D,oBAAC;CAAO,GAAI;WACV,oBAAC;EAAc,WAAU;YACvB,oBAAC;GAAY,WAAU;GACpB;IACW;GACA;EACT;AAGX,MAAMC,gBAAmE,EACvE,WACA,GAAG,YAEH,qBAAC;CAAI,WAAU;CAA2B,sBAAmB;YAC3D,oBAAC,UAAO,WAAU,oCAAoC,EACtD,oBAACF,UAAiB;EAChB,WAAW,GACT,kJACA,UACD;EACD,GAAI;GACJ;EACE;AAGR,MAAMG,eAAiE,EACrE,WACA,GAAG,YAEH,oBAACH,UAAiB;CAChB,WAAW,GAAG,mDAAmD,UAAU;CAC3E,GAAI;EACJ;AAGJ,MAAMI,gBACJ,UACG,oBAACJ,UAAiB;CAAM,WAAU;CAA2B,GAAI;EAAS;AAE/E,MAAMK,gBAAmE,EACvE,WACA,GAAG,YAEH,oBAACL,UAAiB;CAChB,WAAW,GACT,0NACA,UACD;CACD,GAAI;EACJ;AAGJ,MAAMM,oBAED,EAAE,WAAW,GAAG,YACnB,oBAACN,UAAiB;CAChB,WAAW,GAAG,wBAAwB,UAAU;CAChD,GAAI;EACJ;AAGJ,MAAMO,eAAiE,EACrE,WACA,GAAG,YAEH,oBAACP,UAAiB;CAChB,WAAW,GACT,2PACA,UACD;CACD,GAAI;EACJ;AAGJ,MAAM,mBAAmB,EACvB,WACA,GAAG,YACkC;AACrC,QACE,oBAAC;EACC,WAAW,GACT,yDACA,UACD;EACD,GAAI;GACJ;;;;;;;;;;;;;;;;;;;AAqBN,MAAa,UAAU;CACrB,GAAG;CACH,QAAQ;CACR,OAAO;CACP,MAAM;CACN,OAAO;CACP,OAAO;CACP,WAAW;CACX,MAAM;CACN,UAAU;CACX"}
+{"version":3,"file":"index.mjs","names":["CommandPrimitive"],"sources":["../../../../src/components/Command/index.tsx"],"sourcesContent":["/* eslint-disable react/no-unknown-property */\n'use client';\n\nimport {\n  Dialog,\n  DialogContent,\n  type DialogProps,\n} from '@radix-ui/react-dialog';\nimport { cn } from '@utils/cn';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport { Search } from 'lucide-react';\nimport type { ComponentProps, FC, HTMLAttributes } from 'react';\n\nexport const CommandRoot: FC<ComponentProps<typeof CommandPrimitive>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive\n    className={cn('flex flex-col overflow-hidden rounded-md', className)}\n    {...props}\n  />\n);\n\ntype CommandDialogProps = DialogProps;\n\nconst CommandDialog: FC<CommandDialogProps> = ({ children, ...props }) => (\n  <Dialog {...props}>\n    <DialogContent className=\"overflow-hidden p-0\">\n      <CommandRoot className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]_svg]:size-5\">\n        {children}\n      </CommandRoot>\n    </DialogContent>\n  </Dialog>\n);\n\nconst CommandInput: FC<ComponentProps<typeof CommandPrimitive.Input>> = ({\n  className,\n  ...props\n}) => (\n  <div className=\"flex w-full items-center\" cmdk-input-wrapper=\"\">\n    <Search className=\"mr-2 size-4 shrink-0 opacity-50\" />\n    <CommandPrimitive.Input\n      className={cn(\n        'flex w-full rounded-md bg-transparent text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',\n        className\n      )}\n      {...props}\n    />\n  </div>\n);\n\nconst CommandList: FC<ComponentProps<typeof CommandPrimitive.List>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive.List\n    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}\n    {...props}\n  />\n);\n\nconst CommandEmpty: FC<ComponentProps<typeof CommandPrimitive.Empty>> = (\n  props\n) => <CommandPrimitive.Empty className=\"py-6 text-center text-sm\" {...props} />;\n\nconst CommandGroup: FC<ComponentProps<typeof CommandPrimitive.Group>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive.Group\n    className={cn(\n      'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:text-xs',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst CommandSeparator: FC<\n  ComponentProps<typeof CommandPrimitive.Separator>\n> = ({ className, ...props }) => (\n  <CommandPrimitive.Separator\n    className={cn('-mx-1 h-px bg-border', className)}\n    {...props}\n  />\n);\n\nconst CommandItem: FC<ComponentProps<typeof CommandPrimitive.Item>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive.Item\n    className={cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst CommandShortcut = ({\n  className,\n  ...props\n}: HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        'ml-auto text-muted-foreground text-xs tracking-widest',\n        className\n      )}\n      {...props}\n    />\n  );\n};\n\n/**\n * Usage example:\n * ```jsx\n * <Command>\n *   <Command.Trigger>\n *     <Command.Input placeholder=\"Search...\" />\n *   </Command.Trigger>\n *   <Command.Dialog>\n *     <Command.List>\n *       <Command.Item>Item 1</Command.Item>\n *       <Command.Item>Item 2</Command.Item>\n *       <Command.Item>Item 3</Command.Item>\n *     </Command.List>\n *   </Command.Dialog>\n * </Command>\n * ```\n */\nexport const Command = {\n  ...CommandRoot,\n  Dialog: CommandDialog,\n  Input: CommandInput,\n  List: CommandList,\n  Empty: CommandEmpty,\n  Group: CommandGroup,\n  Separator: CommandSeparator,\n  Item: CommandItem,\n  Shortcut: CommandShortcut,\n};\n"],"mappings":";;;;;;;;;AAaA,MAAa,eAA4D,EACvE,WACA,GAAG,YAEH,oBAACA;CACC,WAAW,GAAG,4CAA4C,UAAU;CACpE,GAAI;EACJ;AAKJ,MAAM,iBAAyC,EAAE,UAAU,GAAG,YAC5D,oBAAC;CAAO,GAAI;WACV,oBAAC;EAAc,WAAU;YACvB,oBAAC;GAAY,WAAU;GACpB;IACW;GACA;EACT;AAGX,MAAM,gBAAmE,EACvE,WACA,GAAG,YAEH,qBAAC;CAAI,WAAU;CAA2B,sBAAmB;YAC3D,oBAAC,UAAO,WAAU,oCAAoC,EACtD,oBAACA,UAAiB;EAChB,WAAW,GACT,kJACA,UACD;EACD,GAAI;GACJ;EACE;AAGR,MAAM,eAAiE,EACrE,WACA,GAAG,YAEH,oBAACA,UAAiB;CAChB,WAAW,GAAG,mDAAmD,UAAU;CAC3E,GAAI;EACJ;AAGJ,MAAM,gBACJ,UACG,oBAACA,UAAiB;CAAM,WAAU;CAA2B,GAAI;EAAS;AAE/E,MAAM,gBAAmE,EACvE,WACA,GAAG,YAEH,oBAACA,UAAiB;CAChB,WAAW,GACT,0NACA,UACD;CACD,GAAI;EACJ;AAGJ,MAAM,oBAED,EAAE,WAAW,GAAG,YACnB,oBAACA,UAAiB;CAChB,WAAW,GAAG,wBAAwB,UAAU;CAChD,GAAI;EACJ;AAGJ,MAAM,eAAiE,EACrE,WACA,GAAG,YAEH,oBAACA,UAAiB;CAChB,WAAW,GACT,2PACA,UACD;CACD,GAAI;EACJ;AAGJ,MAAM,mBAAmB,EACvB,WACA,GAAG,YACkC;AACrC,QACE,oBAAC;EACC,WAAW,GACT,yDACA,UACD;EACD,GAAI;GACJ;;;;;;;;;;;;;;;;;;;AAqBN,MAAa,UAAU;CACrB,GAAG;CACH,QAAQ;CACR,OAAO;CACP,MAAM;CACN,OAAO;CACP,OAAO;CACP,WAAW;CACX,MAAM;CACN,UAAU;CACX"}

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

@@ -130,6 +130,7 @@ let ContainerBorderColor = /* @__PURE__ */ function(ContainerBorderColor$1) {
 	ContainerBorderColor$1["PRIMARY"] = "primary";
 	ContainerBorderColor$1["SECONDARY"] = "secondary";
 	ContainerBorderColor$1["NEUTRAL"] = "neutral";
+	ContainerBorderColor$1["CARD"] = "card";
 	ContainerBorderColor$1["TEXT"] = "text";
 	ContainerBorderColor$1["ERROR"] = "error";
 	ContainerBorderColor$1["WARNING"] = "warning";