@intlayer/design-system 8.4.4 → 8.4.6

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 +1,3 @@
-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};
+import { Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant, buttonVariants } from "./Button.mjs";
+
+export { Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant, buttonVariants };

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

@@ -1,2 +1,80 @@
-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};
+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 };
 //# 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":"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"}
+{"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"}

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

@@ -1,5 +1,293 @@
-"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{Children as s,createContext as c,isValidElement as l,useContext as u,useEffect as d,useRef as f,useState as p}from"react";import{ChevronLeft as m,ChevronRight as h}from"lucide-react";import{jsx as g,jsxs as _}from"react/jsx-runtime";import{useIntlayer as v}from"react-intlayer";const y=c(null),b=()=>{let e=u(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,n)=>{let r=e-t,i=n<600?.15:.3;return`${r*Math.min(n*i,300)}px`},w=({children:t,className:n,...r})=>g(`div`,{className:e(`h-full w-full`,n),...r,children:t}),T=({className:s,disableKeyboardShortcuts:c=!1,...l})=>{let{selectedIndex:u,setSelectedIndex:d,totalItems:f,handlePrev:p,handleNext:y}=b(),{goToSlide:x,previousSlide:S,nextSlide:C}=v(`carousel`);return f<=1?null:_(`div`,{className:e(`absolute bottom-4 left-1/2 z-50 flex -translate-x-1/2 flex-row items-center gap-2`,s),...l,children:[_(o,{identifier:`carousel-prev`,children:[g(t,{variant:i.HOVERABLE,color:n.NEUTRAL,label:S.value,roundedSize:`full`,onClick:e=>{e.stopPropagation(),p()},Icon:m,size:r.ICON_MD,disabled:u===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:c,size:`sm`,onTriggered:p})]})})]}),Array.from({length:f}).map((t,n)=>{let r=n===u;return g(`button`,{type:`button`,onClick:e=>{e.stopPropagation(),d(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:h,size:r.ICON_MD,disabled:u===f-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:c})]})})]})]})},E=e=>{let t=[],n=[];return e.forEach(e=>{l(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,c]=E(s.toArray(t)),l=o.length,[u,m]=p(r),[h,v]=p(r),[b,w]=p(0),[T,D]=p(0);d(()=>{let e=()=>{if(!M.current)return;let e=M.current.clientWidth;D(e);let t=N.current.map(e=>e?.offsetHeight||0),n=Math.max(0,...t);n>0&&w(n+40)};e();let t=new ResizeObserver(()=>{e()});return M.current&&t.observe(M.current),N.current.forEach(e=>{e&&t.observe(e)}),()=>t.disconnect()},[l]);let[O,k]=p(0),[A,j]=p(!1),M=f(null),N=f([]),P=e=>{if(T===0)return;let t=T/5,n=Math.round(e/t);if(Math.abs(n)>=1){let t=h-n,r=Math.max(0,Math.min(t,l-1));r!==u&&(m(r),k(t=>t+e))}},F=()=>{m(e=>Math.min(e+1,l-1))},I=()=>{m(e=>Math.max(e-1,0))},L=e=>{j(!0),k(e.clientX)},R=e=>{A&&P(e.clientX-O)},z=()=>j(!1);return d(()=>{u&&i?.(u)},[u,i]),d(()=>{let e;return u!==h&&(e=setInterval(()=>{v(t=>t===u?(clearInterval(e),t):t<u?t+1:t-1)},50)),()=>clearInterval(e)},[u,h]),d(()=>{let e=()=>{let e=N.current.map(e=>e?.offsetHeight||0),t=Math.max(0,...e);t>0&&w(t+40)};e();let t=new ResizeObserver(()=>{e()});return N.current.forEach(e=>{e&&t.observe(e)}),()=>t.disconnect()},[l]),g(y.Provider,{value:{selectedIndex:u,setSelectedIndex:m,totalItems:l,handlePrev:I,handleNext:F},children:_(`div`,{ref:M,className:e(`relative flex w-full cursor-grab select-none items-center overflow-hidden outline-none transition-[height] duration-300 ease-in-out focus:outline-none focus:outline-none focus:ring-0 active:cursor-grabbing`,`max-w-[1400px]`,n),style:{height:b>0?b:`auto`,minHeight:`400px`},onMouseDown:L,onMouseMove:R,onMouseUp:z,onMouseLeave:z,onTouchStart:e=>{j(!0),k(e.touches[0].clientX)},onTouchMove:e=>{A&&P(e.touches[0].clientX-O)},onTouchEnd:z,role:`region`,"aria-label":`Carousel`,...a,children:[o.map((t,n)=>g(`div`,{role:`button`,tabIndex:0,ref:e=>{N.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,h)),onClick:e=>{e.stopPropagation(),m(n)},onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&m(n)},style:{transform:`
-                  translateX(${C(n,h,T)})
-                  scale(${S(n,h)})
-                `},children:t},n)),c]})})},{Item:w,Indicators:T});export{D as Carousel};
+'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 { Children, createContext, isValidElement, useContext, useEffect, useRef, useState } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-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, containerWidth) => {
+	const diff = index - displayedIndex;
+	const gapPercentage = containerWidth < 600 ? .15 : .3;
+	return `${diff * Math.min(containerWidth * gapPercentage, 300)}px`;
+};
+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 [containerWidth, setContainerWidth] = useState(0);
+	useEffect(() => {
+		const calculateDimensions = () => {
+			if (!containerRef.current) return;
+			const width = containerRef.current.clientWidth;
+			setContainerWidth(width);
+			const heights = itemsRef.current.map((item) => item?.offsetHeight || 0);
+			const maxHeight = Math.max(0, ...heights);
+			if (maxHeight > 0) setContainerHeight(maxHeight + 40);
+		};
+		calculateDimensions();
+		const observer = new ResizeObserver(() => {
+			calculateDimensions();
+		});
+		if (containerRef.current) observer.observe(containerRef.current);
+		itemsRef.current.forEach((item) => {
+			if (item) observer.observe(item);
+		});
+		return () => observer.disconnect();
+	}, [totalItems]);
+	const [startX, setStartX] = useState(0);
+	const [isDragging, setIsDragging] = useState(false);
+	const containerRef = useRef(null);
+	const itemsRef = useRef([]);
+	const handleSwitchItem = (diff) => {
+		if (containerWidth === 0) return;
+		const swipeStep = containerWidth / 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 flex w-full cursor-grab select-none items-center overflow-hidden outline-none transition-[height] duration-300 ease-in-out focus:outline-none focus:outline-none focus:ring-0 active:cursor-grabbing", "max-w-[1400px]", 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, containerWidth)})
+                  scale(${getCardScale(index, displayedIndex)})
+                ` },
+					children: child
+				}, index);
+			}), others]
+		})
+	});
+};
+const Carousel = Object.assign(CarouselRoot, {
+	Item: CarouselItem,
+	Indicators: CarouselIndicators
+});
+
+//#endregion
+export { 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';\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// This allows the calculation to work on SSR without hydration mismatch.\n// Your original logic: (3 * screenWidth) / 10  === 30% of viewport width\nconst getCardPositionX = (\n  index: number,\n  displayedIndex: number,\n  containerWidth: number\n) => {\n  const diff = index - displayedIndex;\n  const gapPercentage = containerWidth < 600 ? 0.15 : 0.3; // Dropped to 15% for a tighter cluster\n  const step = Math.min(containerWidth * gapPercentage, 300);\n\n  // The 'px' here is mandatory\n  return `${diff * step}px`;\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  const [containerWidth, setContainerWidth] = useState<number>(0);\n\n  useEffect(() => {\n    const calculateDimensions = () => {\n      if (!containerRef.current) return;\n\n      // Track Width\n      const width = containerRef.current.clientWidth;\n      setContainerWidth(width);\n\n      // Track Height (existing logic)\n      const heights = itemsRef.current.map((item) => item?.offsetHeight || 0);\n      const maxHeight = Math.max(0, ...heights);\n      if (maxHeight > 0) {\n        setContainerHeight(maxHeight + 40);\n      }\n    };\n\n    calculateDimensions();\n\n    const observer = new ResizeObserver(() => {\n      calculateDimensions();\n    });\n\n    if (containerRef.current) observer.observe(containerRef.current);\n    itemsRef.current.forEach((item) => {\n      if (item) observer.observe(item);\n    });\n\n    return () => observer.disconnect();\n  }, [totalItems]);\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 (containerWidth === 0) return;\n\n    // Use container width for the threshold\n    const swipeStep = containerWidth / 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 flex w-full cursor-grab select-none items-center overflow-hidden outline-none transition-[height] duration-300 ease-in-out focus:outline-none focus:outline-none focus:ring-0 active:cursor-grabbing',\n          'max-w-[1400px]',\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                transform: `\n                  translateX(${getCardPositionX(\n                    index,\n                    displayedIndex,\n                    containerWidth\n                  )})\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';\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// This allows the calculation to work on SSR without hydration mismatch.\n// Your original logic: (3 * screenWidth) / 10  === 30% of viewport width\nconst getCardPositionX = (\n  index: number,\n  displayedIndex: number,\n  containerWidth: number\n) => {\n  const diff = index - displayedIndex;\n  const gapPercentage = containerWidth < 600 ? 0.15 : 0.3; // Dropped to 15% for a tighter cluster\n  const step = Math.min(containerWidth * gapPercentage, 300);\n\n  // The 'px' here is mandatory\n  return `${diff * step}px`;\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  const [containerWidth, setContainerWidth] = useState<number>(0);\n\n  useEffect(() => {\n    const calculateDimensions = () => {\n      if (!containerRef.current) return;\n\n      // Track Width\n      const width = containerRef.current.clientWidth;\n      setContainerWidth(width);\n\n      // Track Height (existing logic)\n      const heights = itemsRef.current.map((item) => item?.offsetHeight || 0);\n      const maxHeight = Math.max(0, ...heights);\n      if (maxHeight > 0) {\n        setContainerHeight(maxHeight + 40);\n      }\n    };\n\n    calculateDimensions();\n\n    const observer = new ResizeObserver(() => {\n      calculateDimensions();\n    });\n\n    if (containerRef.current) observer.observe(containerRef.current);\n    itemsRef.current.forEach((item) => {\n      if (item) observer.observe(item);\n    });\n\n    return () => observer.disconnect();\n  }, [totalItems]);\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 (containerWidth === 0) return;\n\n    // Use container width for the threshold\n    const swipeStep = containerWidth / 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 flex w-full cursor-grab select-none items-center overflow-hidden outline-none transition-[height] duration-300 ease-in-out focus:outline-none focus:outline-none focus:ring-0 active:cursor-grabbing',\n          'max-w-[1400px]',\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                transform: `\n                  translateX(${getCardPositionX(\n                    index,\n                    displayedIndex,\n                    containerWidth\n                  )})\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":";;;;;;;;;;;;AAgCA,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;;;AAMb,MAAM,oBACJ,OACA,gBACA,mBACG;CACH,MAAM,OAAO,QAAQ;CACrB,MAAM,gBAAgB,iBAAiB,MAAM,MAAO;AAIpD,QAAO,GAAG,OAHG,KAAK,IAAI,iBAAiB,eAAe,IAAI,CAGpC;;AAUxB,MAAM,gBAAuC,EAC3C,UACA,WACA,GAAG,YACC;AACJ,QACE,oBAAC,OAAD;EAAK,WAAW,GAAG,iBAAiB,UAAU;EAAE,GAAI;EACjD;EACG;;AAWV,MAAM,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,OAAD;EACE,WAAW,GACT,qFACA,UACD;EACD,GAAI;YALN;GAOE,qBAAC,SAAD;IAAS,YAAW;cAApB,CACE,oBAAC,QAAD;KACE,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;KAC5B,GAEF,oBAAC,QAAQ,QAAT;KAAgB,YAAW;eACzB,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,QAAD;OAAM,WAAU;iBACb,cAAc;OACV,GACP,oBAAC,kBAAD;OACE,UAAS;OACT,UAAU;OACV,MAAK;OACL,aAAa;OACb,EACE;;KACS,EACT;;GAET,MAAM,KAAK,EAAE,QAAQ,YAAY,CAAC,CAAC,KAAK,GAAG,UAAU;IACpD,MAAM,WAAW,UAAU;AAC3B,WACE,oBAAC,UAAD;KAEE,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;KACD,EAXK,MAWL;KAEJ;GAEF,qBAAC,SAAD;IAAS,YAAW;cAApB,CACE,oBAAC,QAAD;KACE,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;KACzC,GAEF,oBAAC,QAAQ,QAAT;KAAgB,YAAW;eACzB,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,QAAD;OAAM,WAAU;iBACb,UAAU;OACN,GACP,oBAAC,kBAAD;OACE,UAAS;OACT,MAAK;OACL,aAAa;OACb,UAAU;OACV,EACE;;KACS,EACT;;GACN;;;AAaV,MAAM,6BACJ,aACkC;CAClC,MAAM,SAAyB,EAAE;CACjC,MAAM,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,MAAM,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;CACjE,MAAM,CAAC,gBAAgB,qBAAqB,SAAiB,EAAE;AAE/D,iBAAgB;EACd,MAAM,4BAA4B;AAChC,OAAI,CAAC,aAAa,QAAS;GAG3B,MAAM,QAAQ,aAAa,QAAQ;AACnC,qBAAkB,MAAM;GAGxB,MAAM,UAAU,SAAS,QAAQ,KAAK,SAAS,MAAM,gBAAgB,EAAE;GACvE,MAAM,YAAY,KAAK,IAAI,GAAG,GAAG,QAAQ;AACzC,OAAI,YAAY,EACd,oBAAmB,YAAY,GAAG;;AAItC,uBAAqB;EAErB,MAAM,WAAW,IAAI,qBAAqB;AACxC,wBAAqB;IACrB;AAEF,MAAI,aAAa,QAAS,UAAS,QAAQ,aAAa,QAAQ;AAChE,WAAS,QAAQ,SAAS,SAAS;AACjC,OAAI,KAAM,UAAS,QAAQ,KAAK;IAChC;AAEF,eAAa,SAAS,YAAY;IACjC,CAAC,WAAW,CAAC;CAGhB,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,mBAAmB,EAAG;EAG1B,MAAM,YAAY,iBAAiB;EACnC,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,MAAM,mBAAsD,MAAM;AAChE,gBAAc,KAAK;AACnB,YAAU,EAAE,QAAQ;;CAEtB,MAAM,mBAAsD,MAAM;AAChE,MAAI,WAAY,kBAAiB,EAAE,UAAU,OAAO;;CAEtD,MAAM,sBAAsB,cAAc,MAAM;CAChD,MAAM,oBAAuD,MAAM;AACjE,gBAAc,KAAK;AACnB,YAAU,EAAE,QAAQ,GAAG,QAAQ;;CAEjC,MAAM,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,IAAI;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,UAAjB;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACD;YAED,qBAAC,OAAD;GACE,KAAK;GACL,WAAW,GACT,iNACA,kBACA,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;aApBN,CAsBG,OAAO,KAAK,OAAO,UAAU;AAC5B,WACE,oBAAC,OAAD;KAEE,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,EACL,WAAW;+BACI,iBACX,OACA,gBACA,eACD,CAAC;0BACM,aAAa,OAAO,eAAe,CAAC;mBAE/C;eAEA;KACG,EAhCC,MAgCD;KAER,EAED,OACG;;EACmB;;AAI/B,MAAa,WAAW,OAAO,OAAO,cAAc;CAClD,MAAM;CACN,YAAY;CACb,CAAC"}