@intlayer/design-system 8.1.2 → 8.1.3

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

@@ -1 +1 @@
-{"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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"}
+{"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/Button/index.mjs

@@ -1,3 +1 @@
-import { Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant, buttonVariants } from "./Button.mjs";
-
-export { Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant, buttonVariants };
+import{Button as e,ButtonColor as t,ButtonSize as n,ButtonTextAlign as r,ButtonVariant as i,buttonVariants as a}from"./Button.mjs";export{e as Button,t as ButtonColor,n as ButtonSize,r as ButtonTextAlign,i as ButtonVariant,a as buttonVariants};

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

@@ -1,80 +1,2 @@
-import { insert, t } from "intlayer";
-
-//#region src/components/Carousel/index.content.ts
-const carouselContent = {
-	key: "carousel",
-	content: {
-		goToSlide: insert(t({
-			ar: "انتقل إلى الشريحة رقم {{index}}",
-			de: "Zu Folie {{index}} wechseln",
-			en: "Go to slide {{index}}",
-			"en-GB": "Go to slide {{index}}",
-			es: "Ir a la diapositiva {{index}}",
-			fr: "Aller à la diapositive {{index}}",
-			hi: "{{index}} स्लाइड पर जाएँ",
-			id: "Ke slide {{index}}",
-			it: "Vai alla diapositiva {{index}}",
-			ja: "{{index}}枚目のスライドへ",
-			ko: "{{index}}번 슬라이드로 이동",
-			pl: "Idź do slajdu {{index}}",
-			pt: "Ir para o slide {{index}}",
-			ru: "Перейти к слайду {{index}}",
-			tr: "{{index}}. slayta git",
-			uk: "Перейти до слайду {{index}}",
-			vi: "Đi tới slide {{index}}",
-			zh: "跳转到第{{index}}张幻灯片"
-		})),
-		previousSlide: t({
-			en: "Previous slide",
-			"en-GB": "Previous slide",
-			ru: "Предыдущий слайд",
-			ja: "前のスライド",
-			fr: "Diapositive précédente",
-			ko: "이전 슬라이드",
-			zh: "上一张幻灯片",
-			es: "Diapositiva anterior",
-			de: "Vorherige Folie",
-			ar: "الشريحة السابقة",
-			it: "Diapositiva precedente",
-			pt: "Diapositiva anterior",
-			hi: "पिछली स्लाइड",
-			tr: "Önceki slayt",
-			pl: "Poprzedni slajd",
-			id: "Slide sebelumnya",
-			vi: "Slide trước",
-			uk: "Попередній слайд"
-		}),
-		nextSlide: t({
-			en: "Next slide",
-			"en-GB": "Next slide",
-			ru: "Следующий слайд",
-			ja: "次のスライド",
-			fr: "Diapositive suivante",
-			ko: "다음 슬라이드",
-			zh: "下一张幻灯片",
-			es: "Diapositiva siguiente",
-			de: "Nächste Folie",
-			ar: "الشريحة التالية",
-			it: "Diapositiva successiva",
-			pt: "Diapositiva seguinte",
-			hi: "अगली स्लाइड",
-			tr: "Sonraki slayt",
-			pl: "Następny slajd",
-			id: "Slide berikutnya",
-			vi: "Slide tiếp theo",
-			uk: "Наступний слайд"
-		})
-	},
-	title: "Carousel component",
-	description: "Localization strings for the Carousel component controls, including labels for 'Go to slide', 'Previous slide', and 'Next slide'.",
-	tags: [
-		"component",
-		"carousel",
-		"ui",
-		"i18n"
-	]
-};
-
-//#endregion
-export { carouselContent as default };
+import{insert as e,t}from"intlayer";const n={key:`carousel`,content:{goToSlide:e(t({ar:`انتقل إلى الشريحة رقم {{index}}`,de:`Zu Folie {{index}} wechseln`,en:`Go to slide {{index}}`,"en-GB":`Go to slide {{index}}`,es:`Ir a la diapositiva {{index}}`,fr:`Aller à la diapositive {{index}}`,hi:`{{index}} स्लाइड पर जाएँ`,id:`Ke slide {{index}}`,it:`Vai alla diapositiva {{index}}`,ja:`{{index}}枚目のスライドへ`,ko:`{{index}}번 슬라이드로 이동`,pl:`Idź do slajdu {{index}}`,pt:`Ir para o slide {{index}}`,ru:`Перейти к слайду {{index}}`,tr:`{{index}}. slayta git`,uk:`Перейти до слайду {{index}}`,vi:`Đi tới slide {{index}}`,zh:`跳转到第{{index}}张幻灯片`})),previousSlide:t({en:`Previous slide`,"en-GB":`Previous slide`,ru:`Предыдущий слайд`,ja:`前のスライド`,fr:`Diapositive précédente`,ko:`이전 슬라이드`,zh:`上一张幻灯片`,es:`Diapositiva anterior`,de:`Vorherige Folie`,ar:`الشريحة السابقة`,it:`Diapositiva precedente`,pt:`Diapositiva anterior`,hi:`पिछली स्लाइड`,tr:`Önceki slayt`,pl:`Poprzedni slajd`,id:`Slide sebelumnya`,vi:`Slide trước`,uk:`Попередній слайд`}),nextSlide:t({en:`Next slide`,"en-GB":`Next slide`,ru:`Следующий слайд`,ja:`次のスライド`,fr:`Diapositive suivante`,ko:`다음 슬라이드`,zh:`下一张幻灯片`,es:`Diapositiva siguiente`,de:`Nächste Folie`,ar:`الشريحة التالية`,it:`Diapositiva successiva`,pt:`Diapositiva seguinte`,hi:`अगली स्लाइड`,tr:`Sonraki slayt`,pl:`Następny slajd`,id:`Slide berikutnya`,vi:`Slide tiếp theo`,uk:`Наступний слайд`})},title:`Carousel component`,description:`Localization strings for the Carousel component controls, including labels for 'Go to slide', 'Previous slide', and 'Next slide'.`,tags:[`component`,`carousel`,`ui`,`i18n`]};export{n as default};
 //# sourceMappingURL=index.content.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.content.mjs","names":[],"sources":["../../../../src/components/Carousel/index.content.ts"],"sourcesContent":["import { type Dictionary, insert, t } from 'intlayer';\n\nconst carouselContent = {\n  key: 'carousel',\n  content: {\n    goToSlide: insert(\n      t({\n        ar: 'انتقل إلى الشريحة رقم {{index}}',\n        de: 'Zu Folie {{index}} wechseln',\n        en: 'Go to slide {{index}}',\n        'en-GB': 'Go to slide {{index}}',\n        es: 'Ir a la diapositiva {{index}}',\n        fr: 'Aller à la diapositive {{index}}',\n        hi: '{{index}} स्लाइड पर जाएँ',\n        id: 'Ke slide {{index}}',\n        it: 'Vai alla diapositiva {{index}}',\n        ja: '{{index}}枚目のスライドへ',\n        ko: '{{index}}번 슬라이드로 이동',\n        pl: 'Idź do slajdu {{index}}',\n        pt: 'Ir para o slide {{index}}',\n        ru: 'Перейти к слайду {{index}}',\n        tr: '{{index}}. slayta git',\n        uk: 'Перейти до слайду {{index}}',\n        vi: 'Đi tới slide {{index}}',\n        zh: '跳转到第{{index}}张幻灯片',\n      })\n    ),\n    previousSlide: t({\n      en: 'Previous slide',\n      'en-GB': 'Previous slide',\n      ru: 'Предыдущий слайд',\n      ja: '前のスライド',\n      fr: 'Diapositive précédente',\n      ko: '이전 슬라이드',\n      zh: '上一张幻灯片',\n      es: 'Diapositiva anterior',\n      de: 'Vorherige Folie',\n      ar: 'الشريحة السابقة',\n      it: 'Diapositiva precedente',\n      pt: 'Diapositiva anterior',\n      hi: 'पिछली स्लाइड',\n      tr: 'Önceki slayt',\n      pl: 'Poprzedni slajd',\n      id: 'Slide sebelumnya',\n      vi: 'Slide trước',\n      uk: 'Попередній слайд',\n    }),\n    nextSlide: t({\n      en: 'Next slide',\n      'en-GB': 'Next slide',\n      ru: 'Следующий слайд',\n      ja: '次のスライド',\n      fr: 'Diapositive suivante',\n      ko: '다음 슬라이드',\n      zh: '下一张幻灯片',\n      es: 'Diapositiva siguiente',\n      de: 'Nächste Folie',\n      ar: 'الشريحة التالية',\n      it: 'Diapositiva successiva',\n      pt: 'Diapositiva seguinte',\n      hi: 'अगली स्लाइड',\n      tr: 'Sonraki slayt',\n      pl: 'Następny slajd',\n      id: 'Slide berikutnya',\n      vi: 'Slide tiếp theo',\n      uk: 'Наступний слайд',\n    }),\n  },\n  title: 'Carousel component',\n  description:\n    \"Localization strings for the Carousel component controls, including labels for 'Go to slide', 'Previous slide', and 'Next slide'.\",\n  tags: ['component', 'carousel', 'ui', 'i18n'],\n} satisfies Dictionary;\n\nexport default carouselContent;\n"],"mappings":";;;AAEA,MAAM,kBAAkB;CACtB,KAAK;CACL,SAAS;EACP,WAAW,OACT,EAAE;GACA,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC,CACH;EACD,eAAe,EAAE;GACf,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACF,WAAW,EAAE;GACX,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACH;CACD,OAAO;CACP,aACE;CACF,MAAM;EAAC;EAAa;EAAY;EAAM;EAAO;CAC9C"}
+{"version":3,"file":"index.content.mjs","names":[],"sources":["../../../../src/components/Carousel/index.content.ts"],"sourcesContent":["import { type Dictionary, insert, t } from 'intlayer';\n\nconst carouselContent = {\n  key: 'carousel',\n  content: {\n    goToSlide: insert(\n      t({\n        ar: 'انتقل إلى الشريحة رقم {{index}}',\n        de: 'Zu Folie {{index}} wechseln',\n        en: 'Go to slide {{index}}',\n        'en-GB': 'Go to slide {{index}}',\n        es: 'Ir a la diapositiva {{index}}',\n        fr: 'Aller à la diapositive {{index}}',\n        hi: '{{index}} स्लाइड पर जाएँ',\n        id: 'Ke slide {{index}}',\n        it: 'Vai alla diapositiva {{index}}',\n        ja: '{{index}}枚目のスライドへ',\n        ko: '{{index}}번 슬라이드로 이동',\n        pl: 'Idź do slajdu {{index}}',\n        pt: 'Ir para o slide {{index}}',\n        ru: 'Перейти к слайду {{index}}',\n        tr: '{{index}}. slayta git',\n        uk: 'Перейти до слайду {{index}}',\n        vi: 'Đi tới slide {{index}}',\n        zh: '跳转到第{{index}}张幻灯片',\n      })\n    ),\n    previousSlide: t({\n      en: 'Previous slide',\n      'en-GB': 'Previous slide',\n      ru: 'Предыдущий слайд',\n      ja: '前のスライド',\n      fr: 'Diapositive précédente',\n      ko: '이전 슬라이드',\n      zh: '上一张幻灯片',\n      es: 'Diapositiva anterior',\n      de: 'Vorherige Folie',\n      ar: 'الشريحة السابقة',\n      it: 'Diapositiva precedente',\n      pt: 'Diapositiva anterior',\n      hi: 'पिछली स्लाइड',\n      tr: 'Önceki slayt',\n      pl: 'Poprzedni slajd',\n      id: 'Slide sebelumnya',\n      vi: 'Slide trước',\n      uk: 'Попередній слайд',\n    }),\n    nextSlide: t({\n      en: 'Next slide',\n      'en-GB': 'Next slide',\n      ru: 'Следующий слайд',\n      ja: '次のスライド',\n      fr: 'Diapositive suivante',\n      ko: '다음 슬라이드',\n      zh: '下一张幻灯片',\n      es: 'Diapositiva siguiente',\n      de: 'Nächste Folie',\n      ar: 'الشريحة التالية',\n      it: 'Diapositiva successiva',\n      pt: 'Diapositiva seguinte',\n      hi: 'अगली स्लाइड',\n      tr: 'Sonraki slayt',\n      pl: 'Następny slajd',\n      id: 'Slide berikutnya',\n      vi: 'Slide tiếp theo',\n      uk: 'Наступний слайд',\n    }),\n  },\n  title: 'Carousel component',\n  description:\n    \"Localization strings for the Carousel component controls, including labels for 'Go to slide', 'Previous slide', and 'Next slide'.\",\n  tags: ['component', 'carousel', 'ui', 'i18n'],\n} satisfies Dictionary;\n\nexport default carouselContent;\n"],"mappings":"oCAEA,MAAM,EAAkB,CACtB,IAAK,WACL,QAAS,CACP,UAAW,EACT,EAAE,CACA,GAAI,kCACJ,GAAI,8BACJ,GAAI,wBACJ,QAAS,wBACT,GAAI,gCACJ,GAAI,mCACJ,GAAI,2BACJ,GAAI,qBACJ,GAAI,iCACJ,GAAI,oBACJ,GAAI,sBACJ,GAAI,0BACJ,GAAI,4BACJ,GAAI,6BACJ,GAAI,wBACJ,GAAI,8BACJ,GAAI,yBACJ,GAAI,oBACL,CAAC,CACH,CACD,cAAe,EAAE,CACf,GAAI,iBACJ,QAAS,iBACT,GAAI,mBACJ,GAAI,SACJ,GAAI,yBACJ,GAAI,UACJ,GAAI,SACJ,GAAI,uBACJ,GAAI,kBACJ,GAAI,kBACJ,GAAI,yBACJ,GAAI,uBACJ,GAAI,eACJ,GAAI,eACJ,GAAI,kBACJ,GAAI,mBACJ,GAAI,cACJ,GAAI,mBACL,CAAC,CACF,UAAW,EAAE,CACX,GAAI,aACJ,QAAS,aACT,GAAI,kBACJ,GAAI,SACJ,GAAI,uBACJ,GAAI,UACJ,GAAI,SACJ,GAAI,wBACJ,GAAI,gBACJ,GAAI,kBACJ,GAAI,yBACJ,GAAI,uBACJ,GAAI,cACJ,GAAI,gBACJ,GAAI,iBACJ,GAAI,mBACJ,GAAI,kBACJ,GAAI,kBACL,CAAC,CACH,CACD,MAAO,qBACP,YACE,oIACF,KAAM,CAAC,YAAa,WAAY,KAAM,OAAO,CAC9C"}

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

@@ -1,271 +1,5 @@
-'use client';
-
-import { cn } from "../../utils/cn.mjs";
-import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
-import { KeyboardShortcut } from "../KeyboardShortcut/KeyboardShortcut.mjs";
-import { Popover } from "../Popover/dynamic.mjs";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { Children, createContext, isValidElement, useContext, useEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useIntlayer } from "react-intlayer";
-
-//#region src/components/Carousel/index.tsx
-const SWIPE_THRESHOLD_DIVISOR = 5;
-const TRANSITION_DELAY_MS = 50;
-const CarouselContext = createContext(null);
-const useCarousel = () => {
-	const context = useContext(CarouselContext);
-	if (!context) throw new Error("useCarousel must be used within a Carousel");
-	return context;
-};
-const getCardStyle = (index, displayedIndex) => {
-	switch (Math.abs(index - displayedIndex)) {
-		case 0: return "opacity-100 z-40";
-		case 1: return "opacity-75 z-30 cursor-pointer";
-		case 2: return "opacity-50 z-20 pointer-events-none";
-		default: return "opacity-0 z-10 pointer-events-none";
-	}
-};
-const getCardScale = (index, displayedIndex) => {
-	switch (Math.abs(index - displayedIndex)) {
-		case 0: return 1;
-		case 1: return .9;
-		case 2: return .8;
-		default: return .7;
-	}
-};
-const getCardPositionX = (index, displayedIndex) => {
-	return `${(index - displayedIndex) * 30}vw`;
-};
-const CarouselItem = ({ children, className, ...props }) => {
-	return /* @__PURE__ */ jsx("div", {
-		className: cn("h-full w-full", className),
-		...props,
-		children
-	});
-};
-const CarouselIndicators = ({ className, disableKeyboardShortcuts = false, ...props }) => {
-	const { selectedIndex, setSelectedIndex, totalItems, handlePrev, handleNext } = useCarousel();
-	const { goToSlide, previousSlide, nextSlide } = useIntlayer("carousel");
-	if (totalItems <= 1) return null;
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("absolute bottom-4 left-1/2 z-50 flex -translate-x-1/2 flex-row items-center gap-2", className),
-		...props,
-		children: [
-			/* @__PURE__ */ jsxs(Popover, {
-				identifier: "carousel-prev",
-				children: [/* @__PURE__ */ jsx(Button, {
-					variant: ButtonVariant.HOVERABLE,
-					color: ButtonColor.NEUTRAL,
-					label: previousSlide.value,
-					roundedSize: "full",
-					onClick: (e) => {
-						e.stopPropagation();
-						handlePrev();
-					},
-					Icon: ChevronLeft,
-					size: ButtonSize.ICON_MD,
-					disabled: selectedIndex === 0
-				}), /* @__PURE__ */ jsx(Popover.Detail, {
-					identifier: "carousel-prev",
-					children: /* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-2 p-2",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "whitespace-nowrap text-neutral text-xs",
-							children: previousSlide.value
-						}), /* @__PURE__ */ jsx(KeyboardShortcut, {
-							shortcut: "ArrowLeft",
-							disabled: disableKeyboardShortcuts,
-							size: "sm",
-							onTriggered: handlePrev
-						})]
-					})
-				})]
-			}),
-			Array.from({ length: totalItems }).map((_, index) => {
-				const isActive = index === selectedIndex;
-				return /* @__PURE__ */ jsx("button", {
-					type: "button",
-					onClick: (e) => {
-						e.stopPropagation();
-						setSelectedIndex(index);
-					},
-					"aria-label": goToSlide({ index: index + 1 }).value,
-					className: cn("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", isActive ? "scale-110 bg-text" : "bg-text/20 hover:bg-text/40")
-				}, index);
-			}),
-			/* @__PURE__ */ jsxs(Popover, {
-				identifier: "carousel-next",
-				children: [/* @__PURE__ */ jsx(Button, {
-					variant: ButtonVariant.HOVERABLE,
-					color: ButtonColor.NEUTRAL,
-					roundedSize: "full",
-					label: nextSlide.value,
-					onClick: (e) => {
-						e.stopPropagation();
-						handleNext();
-					},
-					Icon: ChevronRight,
-					size: ButtonSize.ICON_MD,
-					disabled: selectedIndex === totalItems - 1
-				}), /* @__PURE__ */ jsx(Popover.Detail, {
-					identifier: "carousel-next",
-					children: /* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-2 p-2",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "whitespace-nowrap text-neutral text-xs",
-							children: nextSlide.value
-						}), /* @__PURE__ */ jsx(KeyboardShortcut, {
-							shortcut: "ArrowRight",
-							size: "sm",
-							onTriggered: handleNext,
-							disabled: disableKeyboardShortcuts
-						})]
-					})
-				})]
-			})
-		]
-	});
-};
-const partitionCarouselChildren = (children) => {
-	const slides = [];
-	const others = [];
-	children.forEach((child) => {
-		if (isValidElement(child) && child.type === CarouselItem) slides.push(child);
-		else others.push(child);
-	});
-	return [slides, others];
-};
-const CarouselRoot = ({ children, className, initialIndex = 0, onIndexChange, ...props }) => {
-	const [slides, others] = partitionCarouselChildren(Children.toArray(children));
-	const totalItems = slides.length;
-	const [selectedIndex, setSelectedIndex] = useState(initialIndex);
-	const [displayedIndex, setDisplayedIndex] = useState(initialIndex);
-	const [containerHeight, setContainerHeight] = useState(0);
-	const [startX, setStartX] = useState(0);
-	const [isDragging, setIsDragging] = useState(false);
-	const containerRef = useRef(null);
-	const itemsRef = useRef([]);
-	const handleSwitchItem = (diff) => {
-		if (typeof window === "undefined") return;
-		const swipeStep = window.innerWidth / SWIPE_THRESHOLD_DIVISOR;
-		const numSwipe = Math.round(diff / swipeStep);
-		if (Math.abs(numSwipe) >= 1) {
-			const newIndex = displayedIndex - numSwipe;
-			const clampedIndex = Math.max(0, Math.min(newIndex, totalItems - 1));
-			if (clampedIndex !== selectedIndex) {
-				setSelectedIndex(clampedIndex);
-				setStartX((prev) => prev + diff);
-			}
-		}
-	};
-	const handleNext = () => {
-		setSelectedIndex((prev) => Math.min(prev + 1, totalItems - 1));
-	};
-	const handlePrev = () => {
-		setSelectedIndex((prev) => Math.max(prev - 1, 0));
-	};
-	const handleMouseDown = (e) => {
-		setIsDragging(true);
-		setStartX(e.clientX);
-	};
-	const handleMouseMove = (e) => {
-		if (isDragging) handleSwitchItem(e.clientX - startX);
-	};
-	const handleDragEnd = () => setIsDragging(false);
-	const handleTouchStart = (e) => {
-		setIsDragging(true);
-		setStartX(e.touches[0].clientX);
-	};
-	const handleTouchMove = (e) => {
-		if (isDragging) handleSwitchItem(e.touches[0].clientX - startX);
-	};
-	useEffect(() => {
-		if (selectedIndex) onIndexChange?.(selectedIndex);
-	}, [selectedIndex, onIndexChange]);
-	useEffect(() => {
-		let interval;
-		if (selectedIndex !== displayedIndex) interval = setInterval(() => {
-			setDisplayedIndex((prev) => {
-				if (prev === selectedIndex) {
-					clearInterval(interval);
-					return prev;
-				}
-				return prev < selectedIndex ? prev + 1 : prev - 1;
-			});
-		}, TRANSITION_DELAY_MS);
-		return () => clearInterval(interval);
-	}, [selectedIndex, displayedIndex]);
-	useEffect(() => {
-		const calculateMaxHeight = () => {
-			const heights = itemsRef.current.map((item) => item?.offsetHeight || 0);
-			const maxHeight = Math.max(0, ...heights);
-			if (maxHeight > 0) setContainerHeight(maxHeight + 40);
-		};
-		calculateMaxHeight();
-		const observer = new ResizeObserver(() => {
-			calculateMaxHeight();
-		});
-		itemsRef.current.forEach((item) => {
-			if (item) observer.observe(item);
-		});
-		return () => observer.disconnect();
-	}, [totalItems]);
-	return /* @__PURE__ */ jsx(CarouselContext.Provider, {
-		value: {
-			selectedIndex,
-			setSelectedIndex,
-			totalItems,
-			handlePrev,
-			handleNext
-		},
-		children: /* @__PURE__ */ jsxs("div", {
-			ref: containerRef,
-			className: cn("relative w-full cursor-grab select-none overflow-hidden outline-none transition-[height] duration-300 ease-in-out focus:outline-none focus:outline-none focus:ring-0 active:cursor-grabbing", className),
-			style: {
-				height: containerHeight > 0 ? containerHeight : "auto",
-				minHeight: "400px"
-			},
-			onMouseDown: handleMouseDown,
-			onMouseMove: handleMouseMove,
-			onMouseUp: handleDragEnd,
-			onMouseLeave: handleDragEnd,
-			onTouchStart: handleTouchStart,
-			onTouchMove: handleTouchMove,
-			onTouchEnd: handleDragEnd,
-			role: "region",
-			"aria-label": "Carousel",
-			...props,
-			children: [slides.map((child, index) => {
-				return /* @__PURE__ */ jsx("div", {
-					role: "button",
-					tabIndex: 0,
-					ref: (el) => {
-						itemsRef.current[index] = el;
-					},
-					className: cn("absolute left-1/2 -translate-x-1/2 transition-all duration-300 ease-in-out", "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", getCardStyle(index, displayedIndex)),
-					onClick: (e) => {
-						e.stopPropagation();
-						setSelectedIndex(index);
-					},
-					onKeyDown: (e) => {
-						if (e.key === "Enter" || e.key === " ") setSelectedIndex(index);
-					},
-					style: { transform: `
-                  translateX(${getCardPositionX(index, displayedIndex)}) 
-                  scale(${getCardScale(index, displayedIndex)})
-                ` },
-					children: child
-				}, index);
-			}), others]
-		})
-	});
-};
-const Carousel = Object.assign(CarouselRoot, {
-	Item: CarouselItem,
-	Indicators: CarouselIndicators
-});
-
-//#endregion
-export { Carousel };
+"use client";import{cn as e}from"../../utils/cn.mjs";import{Button as t,ButtonColor as n,ButtonSize as r,ButtonVariant as i}from"../Button/Button.mjs";import{KeyboardShortcut as a}from"../KeyboardShortcut/KeyboardShortcut.mjs";import{Popover as o}from"../Popover/dynamic.mjs";import{ChevronLeft as s,ChevronRight as c}from"lucide-react";import{Children as l,createContext as u,isValidElement as d,useContext as f,useEffect as p,useRef as m,useState as h}from"react";import{jsx as g,jsxs as _}from"react/jsx-runtime";import{useIntlayer as v}from"react-intlayer";const y=u(null),b=()=>{let e=f(y);if(!e)throw Error(`useCarousel must be used within a Carousel`);return e},x=(e,t)=>{switch(Math.abs(e-t)){case 0:return`opacity-100 z-40`;case 1:return`opacity-75 z-30 cursor-pointer`;case 2:return`opacity-50 z-20 pointer-events-none`;default:return`opacity-0 z-10 pointer-events-none`}},S=(e,t)=>{switch(Math.abs(e-t)){case 0:return 1;case 1:return .9;case 2:return .8;default:return .7}},C=(e,t)=>`${(e-t)*30}vw`,w=({children:t,className:n,...r})=>g(`div`,{className:e(`h-full w-full`,n),...r,children:t}),T=({className:l,disableKeyboardShortcuts:u=!1,...d})=>{let{selectedIndex:f,setSelectedIndex:p,totalItems:m,handlePrev:h,handleNext:y}=b(),{goToSlide:x,previousSlide:S,nextSlide:C}=v(`carousel`);return m<=1?null:_(`div`,{className:e(`absolute bottom-4 left-1/2 z-50 flex -translate-x-1/2 flex-row items-center gap-2`,l),...d,children:[_(o,{identifier:`carousel-prev`,children:[g(t,{variant:i.HOVERABLE,color:n.NEUTRAL,label:S.value,roundedSize:`full`,onClick:e=>{e.stopPropagation(),h()},Icon:s,size:r.ICON_MD,disabled:f===0}),g(o.Detail,{identifier:`carousel-prev`,children:_(`div`,{className:`flex items-center gap-2 p-2`,children:[g(`span`,{className:`whitespace-nowrap text-neutral text-xs`,children:S.value}),g(a,{shortcut:`ArrowLeft`,disabled:u,size:`sm`,onTriggered:h})]})})]}),Array.from({length:m}).map((t,n)=>{let r=n===f;return g(`button`,{type:`button`,onClick:e=>{e.stopPropagation(),p(n)},"aria-label":x({index:n+1}).value,className:e(`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`,r?`scale-110 bg-text`:`bg-text/20 hover:bg-text/40`)},n)}),_(o,{identifier:`carousel-next`,children:[g(t,{variant:i.HOVERABLE,color:n.NEUTRAL,roundedSize:`full`,label:C.value,onClick:e=>{e.stopPropagation(),y()},Icon:c,size:r.ICON_MD,disabled:f===m-1}),g(o.Detail,{identifier:`carousel-next`,children:_(`div`,{className:`flex items-center gap-2 p-2`,children:[g(`span`,{className:`whitespace-nowrap text-neutral text-xs`,children:C.value}),g(a,{shortcut:`ArrowRight`,size:`sm`,onTriggered:y,disabled:u})]})})]})]})},E=e=>{let t=[],n=[];return e.forEach(e=>{d(e)&&e.type===w?t.push(e):n.push(e)}),[t,n]},D=Object.assign(({children:t,className:n,initialIndex:r=0,onIndexChange:i,...a})=>{let[o,s]=E(l.toArray(t)),c=o.length,[u,d]=h(r),[f,v]=h(r),[b,w]=h(0),[T,D]=h(0),[O,k]=h(!1),A=m(null),j=m([]),M=e=>{if(typeof window>`u`)return;let t=window.innerWidth/5,n=Math.round(e/t);if(Math.abs(n)>=1){let t=f-n,r=Math.max(0,Math.min(t,c-1));r!==u&&(d(r),D(t=>t+e))}},N=()=>{d(e=>Math.min(e+1,c-1))},P=()=>{d(e=>Math.max(e-1,0))},F=e=>{k(!0),D(e.clientX)},I=e=>{O&&M(e.clientX-T)},L=()=>k(!1);return p(()=>{u&&i?.(u)},[u,i]),p(()=>{let e;return u!==f&&(e=setInterval(()=>{v(t=>t===u?(clearInterval(e),t):t<u?t+1:t-1)},50)),()=>clearInterval(e)},[u,f]),p(()=>{let e=()=>{let e=j.current.map(e=>e?.offsetHeight||0),t=Math.max(0,...e);t>0&&w(t+40)};e();let t=new ResizeObserver(()=>{e()});return j.current.forEach(e=>{e&&t.observe(e)}),()=>t.disconnect()},[c]),g(y.Provider,{value:{selectedIndex:u,setSelectedIndex:d,totalItems:c,handlePrev:P,handleNext:N},children:_(`div`,{ref:A,className:e(`relative w-full cursor-grab select-none overflow-hidden outline-none transition-[height] duration-300 ease-in-out focus:outline-none focus:outline-none focus:ring-0 active:cursor-grabbing`,n),style:{height:b>0?b:`auto`,minHeight:`400px`},onMouseDown:F,onMouseMove:I,onMouseUp:L,onMouseLeave:L,onTouchStart:e=>{k(!0),D(e.touches[0].clientX)},onTouchMove:e=>{O&&M(e.touches[0].clientX-T)},onTouchEnd:L,role:`region`,"aria-label":`Carousel`,...a,children:[o.map((t,n)=>g(`div`,{role:`button`,tabIndex:0,ref:e=>{j.current[n]=e},className:e(`absolute left-1/2 -translate-x-1/2 transition-all duration-300 ease-in-out`,`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`,x(n,f)),onClick:e=>{e.stopPropagation(),d(n)},onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&d(n)},style:{transform:`
+                  translateX(${C(n,f)}) 
+                  scale(${S(n,f)})
+                `},children:t},n)),s]})})},{Item:w,Indicators:T});export{D as Carousel};
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"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 overflow-hidden 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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"}
+{"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 overflow-hidden 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

@@ -1,43 +1,2 @@
-'use client';
-
-import { useCallback, useEffect, useRef } from "react";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/components/ClickOutsideDiv/index.tsx
-const ClickOutsideDiv = ({ children, onClickOutSide, listenForEscape = false, disabled = false, ...props }) => {
-	const divRef = useRef(null);
-	const handleClickOutside = useCallback((event) => {
-		if (disabled) return;
-		if (divRef.current && !divRef.current.contains(event.target)) onClickOutSide();
-	}, [onClickOutSide, disabled]);
-	const handleKeyDown = useCallback((event) => {
-		if (disabled || !listenForEscape) return;
-		if (event.key === "Escape") onClickOutSide();
-	}, [
-		onClickOutSide,
-		disabled,
-		listenForEscape
-	]);
-	useEffect(() => {
-		document.addEventListener("mousedown", handleClickOutside, { passive: true });
-		if (listenForEscape) document.addEventListener("keydown", handleKeyDown);
-		return () => {
-			document.removeEventListener("mousedown", handleClickOutside);
-			if (listenForEscape) document.removeEventListener("keydown", handleKeyDown);
-		};
-	}, [
-		handleClickOutside,
-		handleKeyDown,
-		listenForEscape
-	]);
-	return /* @__PURE__ */ jsx("div", {
-		ref: divRef,
-		...props,
-		role: props.role || "region",
-		children
-	});
-};
-
-//#endregion
-export { ClickOutsideDiv };
+"use client";import{useCallback as e,useEffect as t,useRef as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=({children:i,onClickOutSide:a,listenForEscape:o=!1,disabled:s=!1,...c})=>{let l=n(null),u=e(e=>{s||l.current&&!l.current.contains(e.target)&&a()},[a,s]),d=e(e=>{s||!o||e.key===`Escape`&&a()},[a,s,o]);return t(()=>(document.addEventListener(`mousedown`,u,{passive:!0}),o&&document.addEventListener(`keydown`,d),()=>{document.removeEventListener(`mousedown`,u),o&&document.removeEventListener(`keydown`,d)}),[u,d,o]),r(`div`,{ref:l,...c,role:c.role||`region`,children:i})};export{i as ClickOutsideDiv};
 //# sourceMappingURL=index.mjs.map