@intlayer/design-system 8.10.1 → 8.11.0-canary.0

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

@@ -172,7 +172,7 @@ const buttonVariants = cva("relative inline-flex cursor-pointer items-center jus
 	defaultVariants: {
 		variant: `default`,
 		size: `md`,
-		color: `custom`,
+		color: `text`,
 		roundedSize: `${"md"}`,
 		textAlign: `center`,
 		isFullWidth: false

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

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","names":[],"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  XS = 'xs',\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.XS}`]: 'size-2',\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-5',\n      [`${ButtonSize.ICON_XL}`]: 'size-6',\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.XS}`]: 'min-h-7 px-3 text-xs max-md:py-1',\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-1.5',\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-6',\n          isLoading && size === ButtonSize.XL && 'w-8'\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":";;;;;;;;;;AAUA,IAAY,aAAL;CACL;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;;AACF;AAEA,MAAM,qBAAqB,IAAI,sBAAsB;CACnD,UAAU,EACR,MAAM;GACH,OAAqB;GACrB,OAAqB;GACrB,OAAqB;GACrB,OAAqB;GACrB,OAAqB;GACrB,YAA0B;GAC1B,YAA0B;GAC1B,YAA0B;GAC1B,YAA0B;CAC7B,EACF;CACA,iBAAiB,EACf,WACF;AACF,CAAC;;;;AAKD,IAAY,gBAAL;CACL;CACA;CACA;CACA;CACA;CACA;CACA;CACA;;AACF;;;;AAKA,IAAY,cAAL;CACL;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;;AACF;;;;AAKA,IAAY,kBAAL;CACL;CACA;CACA;;AACF;;;;AAKA,MAAa,iBAAiB,IAC5B,8LACA;CACE,UAAU;EACR,MAAM;IACH,OAAqB;IACrB,OAAqB;IACrB,OAAqB;IACrB,OAAqB;IACrB,OAAqB;IACrB,YAA0B;IAC1B,YAA0B;IAC1B,YAA0B;IAC1B,YAA0B;EAC7B;EACA,OAAO;IACJ,YACC;IACD,cACC;IACD,gBACC;IACD,YACC;IACD,SACC;IACD,UACC;IACD,SACC;IACD,SAAwB;IACxB,YACC;IACD,iBACC;IACD,UACC;IACD,YACC;IACD,WAA0B;EAC7B;EACA,aAAa;IACV,cAA8B;IAC9B,YACC;IACD,YACC;IACD,YACC;IACD,YACC;IACD,aACC;IACD,aACC;IACD,aACC;IACD,aACC;IACD,cAA8B;EACjC;EACA,SAAS;IACN,YAA6B;IAC5B;IACA;IACA;IACA;GACF;IAEC,YAA6B;IAC5B;IACA;IACA;IACA;GACF;IAEC,SACC;IAED,SACC;IAED,mBACC;IAED,cACC;IAED,SAA0B;IACzB;IACA;IACA;GACF;IACC,UAA2B;IAE1B;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IAGA;IACA;IACA;IACA;IAGA;IAGA;IAGA;GACF;EACF;EAEA,WAAW;IACR,SAA4B;IAC5B,WAA8B;IAC9B,UAA6B;EAChC;EAEA,aAAa;GACX,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;EACN,OAAO;EACP,aAAa;EACb,WAAW;EACX,aAAa;CACf;AACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsHA,MAAa,UAA2B,EACtC,SACA,MACA,OACA,UACA,MACA,WACA,eACA,YAAY,OACZ,UACA,YACA,aACA,aACA,WACA,UACA,OACA,WACA,OAAO,UACP,oBAAoB,iBACpB,iBAAiB,cACjB,iBAAiB,cACjB,gBAAgB,aAChB,GAAG,YACC;CACJ,MAAM,SACJ,YAAY,UACZ,YAAY;CACd,MAAM,aAAa,CAAC,aAAa,QAAQ;CAEzC,MAAM,qBAAqB;EACzB,cAAc,aAAc,SAAS,SAAa;EAClD,mBAAmB,CAAC,aAAa,SAAY;EAC7C,oBAAoB;EACpB,iBAAiB;EACjB,iBAAiB;EACjB,gBAAgB,aAAa,SAAY,WAAW;EACpD,aAAa;EACb,gBAAiB,WAAW,SAAS;EACrC,iBAAiB,YAAY;EAC7B,iBAAiB;CACnB;CAEA,MAAM,iBACJ,sBACA,sBACA,sBACA;CAEF,OACE,qBAAC,UAAD;EACE,UAAU,aAAa;EACvB,MAAM,SAAS,SAAS;EAClB;EACN,WAAW,eAAe;GACxB;GACA;GACA;GACA;GACA;GACA,WACE,cACC;GACH;EACF,CAAC;EACD,GAAI;EACJ,GAAI;YAhBN;GAkBG,QAAQ,CAAC,aACR,oBAAC,MAAD;IACE,WAAW,mBAAmB;KAC5B;KACA,WAAW,GAAG,CAAC,kBAAkB,QAAQ,aAAa;IACxD,CAAC;IACD,eAAY;GACb;GAGH,oBAAC,OAAD;IACE,WAAW,GACT,oEACA,aAAa,iBAA0B,OACvC,aAAa,iBAA0B,OACvC,aAAa,iBAA0B,OACvC,aAAa,iBAA0B,KACzC;cAEA,oBAAC,QAAD;KACE,WAAW,mBAAmB;MAC5B;MACA,WAAW,GAAG,CAAC,kBAAkB,QAAQ,aAAa;KACxD,CAAC;KACU;KACX,eAAY;KACZ,eAAY;IACb;GACE;GAEJ,YACC,oBAAC,QAAD;IAAM,WAAU;IAAqC;GAAe;GAGrE,CAAC,YAAY,cAAc,oBAAC,QAAD;IAAM,WAAU;cAAW;GAAY;GAElE,aACC,oBAAC,WAAD;IACE,WAAW,mBAAmB;KAC5B;KACA,WAAW,GAAG,CAAC,kBAAkB,QAAQ,aAAa;IACxD,CAAC;IACD,eAAY;GACb;EAEG;;AAEZ"}
+{"version":3,"file":"Button.mjs","names":[],"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  XS = 'xs',\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.XS}`]: 'size-2',\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-5',\n      [`${ButtonSize.ICON_XL}`]: 'size-6',\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.XS}`]: 'min-h-7 px-3 text-xs max-md:py-1',\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-1.5',\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.TEXT}`,\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-6',\n          isLoading && size === ButtonSize.XL && 'w-8'\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":";;;;;;;;;;AAUA,IAAY,aAAL;CACL;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;;AACF;AAEA,MAAM,qBAAqB,IAAI,sBAAsB;CACnD,UAAU,EACR,MAAM;GACH,OAAqB;GACrB,OAAqB;GACrB,OAAqB;GACrB,OAAqB;GACrB,OAAqB;GACrB,YAA0B;GAC1B,YAA0B;GAC1B,YAA0B;GAC1B,YAA0B;CAC7B,EACF;CACA,iBAAiB,EACf,WACF;AACF,CAAC;;;;AAKD,IAAY,gBAAL;CACL;CACA;CACA;CACA;CACA;CACA;CACA;CACA;;AACF;;;;AAKA,IAAY,cAAL;CACL;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;;AACF;;;;AAKA,IAAY,kBAAL;CACL;CACA;CACA;;AACF;;;;AAKA,MAAa,iBAAiB,IAC5B,8LACA;CACE,UAAU;EACR,MAAM;IACH,OAAqB;IACrB,OAAqB;IACrB,OAAqB;IACrB,OAAqB;IACrB,OAAqB;IACrB,YAA0B;IAC1B,YAA0B;IAC1B,YAA0B;IAC1B,YAA0B;EAC7B;EACA,OAAO;IACJ,YACC;IACD,cACC;IACD,gBACC;IACD,YACC;IACD,SACC;IACD,UACC;IACD,SACC;IACD,SAAwB;IACxB,YACC;IACD,iBACC;IACD,UACC;IACD,YACC;IACD,WAA0B;EAC7B;EACA,aAAa;IACV,cAA8B;IAC9B,YACC;IACD,YACC;IACD,YACC;IACD,YACC;IACD,aACC;IACD,aACC;IACD,aACC;IACD,aACC;IACD,cAA8B;EACjC;EACA,SAAS;IACN,YAA6B;IAC5B;IACA;IACA;IACA;GACF;IAEC,YAA6B;IAC5B;IACA;IACA;IACA;GACF;IAEC,SACC;IAED,SACC;IAED,mBACC;IAED,cACC;IAED,SAA0B;IACzB;IACA;IACA;GACF;IACC,UAA2B;IAE1B;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IAGA;IACA;IACA;IACA;IAGA;IAGA;IAGA;GACF;EACF;EAEA,WAAW;IACR,SAA4B;IAC5B,WAA8B;IAC9B,UAA6B;EAChC;EAEA,aAAa;GACX,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;EACN,OAAO;EACP,aAAa;EACb,WAAW;EACX,aAAa;CACf;AACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsHA,MAAa,UAA2B,EACtC,SACA,MACA,OACA,UACA,MACA,WACA,eACA,YAAY,OACZ,UACA,YACA,aACA,aACA,WACA,UACA,OACA,WACA,OAAO,UACP,oBAAoB,iBACpB,iBAAiB,cACjB,iBAAiB,cACjB,gBAAgB,aAChB,GAAG,YACC;CACJ,MAAM,SACJ,YAAY,UACZ,YAAY;CACd,MAAM,aAAa,CAAC,aAAa,QAAQ;CAEzC,MAAM,qBAAqB;EACzB,cAAc,aAAc,SAAS,SAAa;EAClD,mBAAmB,CAAC,aAAa,SAAY;EAC7C,oBAAoB;EACpB,iBAAiB;EACjB,iBAAiB;EACjB,gBAAgB,aAAa,SAAY,WAAW;EACpD,aAAa;EACb,gBAAiB,WAAW,SAAS;EACrC,iBAAiB,YAAY;EAC7B,iBAAiB;CACnB;CAEA,MAAM,iBACJ,sBACA,sBACA,sBACA;CAEF,OACE,qBAAC,UAAD;EACE,UAAU,aAAa;EACvB,MAAM,SAAS,SAAS;EAClB;EACN,WAAW,eAAe;GACxB;GACA;GACA;GACA;GACA;GACA,WACE,cACC;GACH;EACF,CAAC;EACD,GAAI;EACJ,GAAI;YAhBN;GAkBG,QAAQ,CAAC,aACR,oBAAC,MAAD;IACE,WAAW,mBAAmB;KAC5B;KACA,WAAW,GAAG,CAAC,kBAAkB,QAAQ,aAAa;IACxD,CAAC;IACD,eAAY;GACb;GAGH,oBAAC,OAAD;IACE,WAAW,GACT,oEACA,aAAa,iBAA0B,OACvC,aAAa,iBAA0B,OACvC,aAAa,iBAA0B,OACvC,aAAa,iBAA0B,KACzC;cAEA,oBAAC,QAAD;KACE,WAAW,mBAAmB;MAC5B;MACA,WAAW,GAAG,CAAC,kBAAkB,QAAQ,aAAa;KACxD,CAAC;KACU;KACX,eAAY;KACZ,eAAY;IACb;GACE;GAEJ,YACC,oBAAC,QAAD;IAAM,WAAU;IAAqC;GAAe;GAGrE,CAAC,YAAY,cAAc,oBAAC,QAAD;IAAM,WAAU;cAAW;GAAY;GAElE,aACC,oBAAC,WAAD;IACE,WAAW,mBAAmB;KAC5B;KACA,WAAW,GAAG,CAAC,kBAAkB,QAAQ,aAAa;IACxD,CAAC;IACD,eAAY;GACb;EAEG;;AAEZ"}

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

@@ -4,7 +4,7 @@ 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 { Children, createContext, isValidElement, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useIntlayer } from "react-intlayer";
@@ -143,7 +143,7 @@ const CarouselRoot = ({ children, className, initialIndex = 0, onIndexChange, ..
 	const [displayedIndex, setDisplayedIndex] = useState(initialIndex);
 	const [containerHeight, setContainerHeight] = useState(0);
 	const [containerWidth, setContainerWidth] = useState(0);
-	useEffect(() => {
+	useLayoutEffect(() => {
 		const calculateDimensions = () => {
 			if (!containerRef.current) return;
 			const width = containerRef.current.clientWidth;
@@ -216,7 +216,7 @@ const CarouselRoot = ({ children, className, initialIndex = 0, onIndexChange, ..
 		}, TRANSITION_DELAY_MS);
 		return () => clearInterval(interval);
 	}, [selectedIndex, displayedIndex]);
-	useEffect(() => {
+	useLayoutEffect(() => {
 		const calculateMaxHeight = () => {
 			const heights = itemsRef.current.map((item) => item?.offsetHeight || 0);
 			const maxHeight = Math.max(0, ...heights);

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  useLayoutEffect,\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  useLayoutEffect(() => {\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  useLayoutEffect(() => {\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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"}

package/dist/esm/components/DictionaryFieldEditor/ContentEditorView/TextEditor.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextEditor.mjs","names":["ContentEditorTextAreaBase","ContentEditorInputBase"],"sources":["../../../../../src/components/DictionaryFieldEditor/ContentEditorView/TextEditor.tsx"],"sourcesContent":["'use client';\n\nimport { Accordion } from '@components/Accordion';\nimport {\n  Button,\n  ButtonColor,\n  ButtonSize,\n  ButtonTextAlign,\n  ButtonVariant,\n} from '@components/Button';\nimport { Container } from '@components/Container';\nimport {\n  ContentEditorInput as ContentEditorInputBase,\n  type ContentEditorInputProps as ContentEditorInputPropsBase,\n} from '@components/ContentEditor/ContentEditorInput';\nimport {\n  ContentEditorTextArea as ContentEditorTextAreaBase,\n  type ContentEditorTextAreaProps as ContentEditorTextAreaPropsBase,\n} from '@components/ContentEditor/ContentEditorTextArea';\nimport { renameKey } from '@components/DictionaryFieldEditor/ContentEditorView/object';\nimport { InputVariant } from '@components/Input';\nimport { Label } from '@components/Label';\nimport { Loader } from '@components/Loader';\nimport { useLocaleSwitcherContent } from '@components/LocaleSwitcherContentDropDown';\nimport {\n  SwitchSelector,\n  type SwitchSelectorChoices,\n  SwitchSelectorColor,\n  type SwitchSelectorProps,\n  SwitchSelectorSize,\n} from '@components/SwitchSelector';\nimport { useAuditContentDeclarationField } from '@hooks/reactQuery';\nimport { camelCaseToSentence } from '@intlayer/config/client';\nimport {\n  getEmptyNode,\n  getNodeType,\n} from '@intlayer/core/dictionaryManipulator';\nimport { getLocaleName } from '@intlayer/core/localization';\nimport type {\n  ConditionContent,\n  EnumerationContent,\n  FileContent,\n  GenderContent,\n  HTMLContent,\n  InsertionContent,\n  MarkdownContent,\n  PluralContent,\n  TranslationContent,\n} from '@intlayer/core/transpiler';\nimport { useConfiguration, useEditedContent } from '@intlayer/editor-react';\nimport type { Locale } from '@intlayer/types/allLocales';\nimport type { ContentNode, Dictionary } from '@intlayer/types/dictionary';\nimport type { KeyPath } from '@intlayer/types/keyPath';\nimport type { LocalesValues } from '@intlayer/types/module_augmentation';\nimport * as NodeTypes from '@intlayer/types/nodeType';\nimport { Plus, Trash, WandSparkles } from 'lucide-react';\nimport {\n  type FC,\n  Fragment,\n  lazy,\n  memo,\n  type ReactNode,\n  Suspense,\n  useState,\n} from 'react';\nimport { useIntlayer, useLocale } from 'react-intlayer';\nimport { EnumKeyInput } from '../EnumKeyInput';\nimport { SafeHtmlRenderer } from './SafeHtmlRenderer';\n\nconst LazyMarkdownRenderer = lazy(() =>\n  import('@components/MarkDownRender').then((m) => ({\n    default: m.MarkdownRenderer,\n  }))\n);\n\n// Renders children only after the accordion is first opened (mount-once pattern).\n// Prevents deeply nested sub-trees from mounting on initial render.\ntype CollapsibleEditorProps = TextEditorProps & { label: string };\nconst CollapsibleEditor = memo<CollapsibleEditorProps>(\n  function CollapsibleEditor({ label, ...editorProps }) {\n    const [hasOpened, setHasOpened] = useState(false);\n    return (\n      <Accordion\n        header={label}\n        label={label}\n        onToggle={(isOpen) => {\n          if (isOpen && !hasOpened) setHasOpened(true);\n        }}\n      >\n        {hasOpened ? <TextEditor {...editorProps} /> : null}\n      </Accordion>\n    );\n  }\n);\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\ntype ContentEditorTextAreaProps = Omit<\n  ContentEditorTextAreaPropsBase,\n  'onContentChange'\n> & {\n  keyPath: KeyPath[];\n  dictionary: Dictionary;\n};\n\nconst ContentEditorTextArea: FC<ContentEditorTextAreaProps> = ({\n  keyPath,\n  dictionary,\n  ...props\n}) => {\n  const { editedContent, addEditedContent } = useEditedContent();\n  const configuration = useConfiguration();\n  const { mutate: auditContentDeclarationField, isPending: isAuditing } =\n    useAuditContentDeclarationField();\n\n  return (\n    <ContentEditorTextAreaBase\n      variant={InputVariant.DEFAULT}\n      onContentChange={(newValue) =>\n        addEditedContent(dictionary.localId!, newValue, keyPath)\n      }\n      additionalButtons={\n        <Button\n          Icon={WandSparkles}\n          label=\"Audit\"\n          variant={ButtonVariant.HOVERABLE}\n          size={ButtonSize.ICON_SM}\n          color={ButtonColor.TEXT}\n          className=\"cursor-pointer hover:scale-110\"\n          isLoading={isAuditing}\n          onClick={() => {\n            auditContentDeclarationField(\n              {\n                fileContent: JSON.stringify({\n                  ...dictionary,\n                  ...(editedContent?.[dictionary.localId!] ?? {}),\n                }),\n                keyPath,\n                locales: configuration?.internationalization.locales ?? [],\n                aiOptions: {\n                  apiKey: configuration?.ai?.apiKey,\n                  model: configuration?.ai?.model,\n                  temperature: configuration?.ai?.temperature,\n                },\n              },\n              {\n                onSuccess: (response) => {\n                  if (!response?.data) return;\n\n                  try {\n                    const editedContent = response.data.fileContent as string;\n\n                    addEditedContent(\n                      dictionary.localId!,\n                      editedContent,\n                      keyPath\n                    );\n                  } catch (error) {\n                    console.error(error);\n                  }\n                },\n              }\n            );\n          }}\n        />\n      }\n      {...props}\n    />\n  );\n};\n\ntype ContentEditorInputProps = Omit<\n  ContentEditorInputPropsBase,\n  'onContentChange'\n> & {\n  keyPath: KeyPath[];\n  dictionary: Dictionary;\n};\n\nconst ContentEditorInput: FC<ContentEditorInputProps> = ({\n  keyPath,\n  dictionary,\n  ...props\n}) => {\n  const { addEditedContent } = useEditedContent();\n\n  return (\n    <ContentEditorInputBase\n      variant={InputVariant.DEFAULT}\n      onContentChange={(newValue) =>\n        addEditedContent(dictionary.localId!, newValue, keyPath)\n      }\n      {...props}\n    />\n  );\n};\n\nconst toggleContent = [\n  {\n    content: 'False',\n    value: false,\n  },\n  {\n    content: 'True',\n    value: true,\n  },\n] as SwitchSelectorChoices<boolean>;\n\ntype ContentEditorToggleProps = SwitchSelectorProps & {\n  dictionary: Dictionary;\n  keyPath: KeyPath[];\n};\n\nconst ContentEditorToggle: FC<ContentEditorToggleProps> = ({\n  dictionary,\n  keyPath,\n  ...props\n}) => {\n  const { addEditedContent } = useEditedContent();\n\n  return (\n    <SwitchSelector\n      choices={toggleContent}\n      value={true}\n      onChange={(value) =>\n        addEditedContent(dictionary.localId!, value, keyPath)\n      }\n      color={SwitchSelectorColor.TEXT}\n      size={SwitchSelectorSize.SM}\n      {...props}\n    />\n  );\n};\n\nexport type TextEditorProps = {\n  dictionary: Dictionary;\n  keyPath: KeyPath[];\n  section: ContentNode;\n  isDarkMode?: boolean;\n  renderSection?: (content: string) => ReactNode;\n  onContentChange?: (newValue: string) => void;\n};\n\nconst TranslationTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionary,\n  renderSection,\n}: TextEditorProps) => {\n  const { locale, defaultLocale } = useLocale();\n  const { selectedLocales } = useLocaleSwitcherContent();\n\n  const content: any = (section as TranslationContent<string>)[\n    NodeTypes.TRANSLATION\n  ];\n\n  return (\n    <table className=\"w-full\">\n      <tbody className=\"flex w-full flex-col gap-2\">\n        {selectedLocales.map((translationKey) => {\n          const uniqueKey = `${JSON.stringify(keyPath)}-translation-${translationKey}`;\n          return (\n            <Fragment key={uniqueKey}>\n              <tr className=\"mt-2 w-full p-2 text-xs\">\n                <td className=\"flex w-full\">\n                  {getLocaleName(translationKey, locale)}\n                </td>\n              </tr>\n              <tr className=\"flex\">\n                <td className=\"flex w-full\">\n                  <TextEditorContainer\n                    section={\n                      content[translationKey] ??\n                      getEmptyNode(content[defaultLocale])\n                    }\n                    keyPath={[\n                      ...keyPath,\n                      { type: NodeTypes.TRANSLATION, key: translationKey },\n                    ]}\n                    dictionary={dictionary}\n                    renderSection={renderSection}\n                  />\n                </td>\n              </tr>\n            </Fragment>\n          );\n        })}\n      </tbody>\n    </table>\n  );\n};\n\nconst EnumerationTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionary,\n  renderSection,\n}) => {\n  const { addEditedContent } = useEditedContent();\n  const { addNewEnumeration, removeEnumeration } =\n    useIntlayer('navigation-view');\n\n  const content = (section as EnumerationContent<string>)[\n    NodeTypes.ENUMERATION\n  ];\n  const firstKey = Object.keys(content)[0] as keyof typeof content;\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <table className=\"w-full\">\n        <tbody className=\"flex w-full flex-col gap-2\">\n          {Object.keys(\n            (section as EnumerationContent<ContentNode>)[NodeTypes.ENUMERATION]\n          ).map((enumKey) => {\n            const childrenKeyPath = [\n              ...keyPath,\n              { type: NodeTypes.ENUMERATION, key: enumKey },\n            ] as KeyPath[];\n            const uniqueKey = `${JSON.stringify(keyPath)}-enumeration-${enumKey}`;\n\n            return (\n              <Fragment key={uniqueKey}>\n                <tr className=\"mt-2 w-full\">\n                  <td className=\"flex w-full\">\n                    <div className=\"flex flex-1\">\n                      <Button\n                        label={removeEnumeration.label.value}\n                        variant=\"hoverable\"\n                        size=\"sm\"\n                        color=\"error\"\n                        className=\"ml-auto text-neutral hover:text-error\"\n                        Icon={Trash}\n                        onClick={() =>\n                          addEditedContent(\n                            dictionary.localId!,\n                            undefined,\n                            childrenKeyPath\n                          )\n                        }\n                      >\n                        {removeEnumeration.text}\n                      </Button>\n                    </div>\n                  </td>\n                </tr>\n                <tr className=\"w-full p-2\">\n                  <td className=\"flex w-full\">\n                    <EnumKeyInput\n                      value={enumKey}\n                      onChange={(value) => {\n                        const preValueContent = (\n                          section as EnumerationContent<string>\n                        )[NodeTypes.ENUMERATION];\n\n                        const newValueContent = renameKey(\n                          preValueContent,\n                          enumKey as keyof typeof preValueContent,\n                          value\n                        );\n                        const newValue = {\n                          ...(section as EnumerationContent<string>),\n                          [NodeTypes.ENUMERATION]: newValueContent,\n                        };\n\n                        console.log('newValue', newValue);\n\n                        addEditedContent(\n                          dictionary.localId!,\n                          newValue,\n                          keyPath\n                        );\n                      }}\n                    />\n                  </td>\n                </tr>\n                <tr className=\"block w-full\">\n                  <td className=\"flex w-full\">\n                    <TextEditor\n                      section={\n                        content[enumKey as keyof typeof content] ??\n                        getEmptyNode(content[firstKey])\n                      }\n                      keyPath={childrenKeyPath}\n                      dictionary={dictionary}\n                      renderSection={renderSection}\n                    />\n                  </td>\n                </tr>\n              </Fragment>\n            );\n          })}\n        </tbody>\n      </table>\n\n      <Button\n        label={addNewEnumeration.label.value}\n        variant={ButtonVariant.HOVERABLE}\n        color={ButtonColor.NEUTRAL}\n        textAlign={ButtonTextAlign.LEFT}\n        isFullWidth\n        onClick={() =>\n          addEditedContent(\n            dictionary.localId!,\n            getEmptyNode(content[firstKey]) ?? '',\n            [...keyPath, { type: NodeTypes.ENUMERATION, key: 'unknown' }]\n          )\n        }\n        Icon={Plus}\n        className=\"m-2\"\n      >\n        {addNewEnumeration.text}\n      </Button>\n    </div>\n  );\n};\n\nconst ConditionTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionary,\n  renderSection,\n}) => {\n  const content = (section as ConditionContent<string>)[NodeTypes.CONDITION];\n\n  return (\n    <table className=\"w-full\">\n      <tbody className=\"flex w-full flex-col gap-2\">\n        {['true', 'false', 'fallback'].map((condKey) => {\n          const uniqueKey = `${JSON.stringify(keyPath)}-condition-${condKey}`;\n          return (\n            <Fragment key={uniqueKey}>\n              <tr className=\"mt-2 block w-full p-2 text-xs\">\n                <td className=\"flex w-full\">{String(condKey)}</td>\n              </tr>\n              <tr className=\"block w-full\">\n                <td className=\"flex w-full\">\n                  <TextEditorContainer\n                    section={\n                      content[condKey as keyof typeof content] ??\n                      getEmptyNode(content.true)\n                    }\n                    keyPath={[\n                      ...keyPath,\n                      {\n                        type: NodeTypes.CONDITION,\n                        key: condKey,\n                      } as KeyPath,\n                    ]}\n                    dictionary={dictionary}\n                    renderSection={renderSection}\n                  />\n                </td>\n              </tr>\n            </Fragment>\n          );\n        })}\n      </tbody>\n    </table>\n  );\n};\n\nconst GenderTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionary,\n  renderSection,\n}) => {\n  const content = (section as GenderContent<string>)[NodeTypes.GENDER];\n\n  return (\n    <table className=\"w-full\">\n      <tbody className=\"flex w-full flex-col gap-2\">\n        {['male', 'female', 'fallback'].map((condKey) => {\n          const uniqueKey = `${JSON.stringify(keyPath)}-gender-${condKey}`;\n          return (\n            <Fragment key={uniqueKey}>\n              <tr className=\"mt-2 block w-full p-2 text-xs\">\n                <td className=\"flex w-full\">{String(condKey)}</td>\n              </tr>\n              <tr className=\"block w-full\">\n                <td className=\"flex w-full\">\n                  <TextEditorContainer\n                    section={\n                      content[condKey as keyof typeof content] ??\n                      getEmptyNode(content.male)\n                    }\n                    keyPath={[\n                      ...keyPath,\n                      {\n                        type: NodeTypes.GENDER,\n                        key: condKey,\n                      } as KeyPath,\n                    ]}\n                    dictionary={dictionary}\n                    renderSection={renderSection}\n                  />\n                </td>\n              </tr>\n            </Fragment>\n          );\n        })}\n      </tbody>\n    </table>\n  );\n};\n\nconst PLURAL_CATEGORIES = ['zero', 'one', 'two', 'few', 'many', 'other'];\n\nconst PluralTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionary,\n  renderSection,\n}) => {\n  const content = (section as PluralContent<string>)[NodeTypes.PLURAL];\n\n  return (\n    <table className=\"w-full\">\n      <tbody className=\"flex w-full flex-col gap-2\">\n        {PLURAL_CATEGORIES.map((pluralKey) => {\n          const uniqueKey = `${JSON.stringify(keyPath)}-plural-${pluralKey}`;\n          return (\n            <Fragment key={uniqueKey}>\n              <tr className=\"mt-2 block w-full p-2 text-xs\">\n                <td className=\"flex w-full\">{pluralKey}</td>\n              </tr>\n              <tr className=\"block w-full\">\n                <td className=\"flex w-full\">\n                  <TextEditorContainer\n                    section={\n                      content[pluralKey as keyof typeof content] ??\n                      getEmptyNode(content.other)\n                    }\n                    keyPath={[\n                      ...keyPath,\n                      {\n                        type: NodeTypes.PLURAL,\n                        key: pluralKey,\n                      } as KeyPath,\n                    ]}\n                    dictionary={dictionary}\n                    renderSection={renderSection}\n                  />\n                </td>\n              </tr>\n            </Fragment>\n          );\n        })}\n      </tbody>\n    </table>\n  );\n};\n\nconst ArrayTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionary,\n  renderSection,\n}) => {\n  const { addEditedContent } = useEditedContent();\n  const { addNewElement, removeElement } = useIntlayer('navigation-view');\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <table className=\"w-full\">\n        <tbody className=\"flex w-full flex-col gap-2\">\n          {(section as unknown as ContentNode[]).map((subSection, index) => {\n            const uniqueKey = `${JSON.stringify(keyPath)}-array-${index}`;\n            return (\n              <Fragment key={uniqueKey}>\n                <tr className=\"mt-2 w-full p-2\">\n                  <td className=\"flex w-full\">\n                    <div className=\"flex w-full items-center justify-between gap-2\">\n                      <span className=\"text-xs\">{String(index)}</span>\n                      <Button\n                        label={removeElement.label.value}\n                        variant=\"hoverable\"\n                        size=\"sm\"\n                        color=\"error\"\n                        className=\"ml-auto text-neutral hover:text-error\"\n                        onClick={() => {\n                          const newKeyPath: KeyPath[] = [\n                            ...keyPath,\n                            {\n                              type: NodeTypes.ARRAY,\n                              key: index, // Fixed: Use index instead of length\n                            },\n                          ];\n                          addEditedContent(\n                            dictionary.localId!,\n                            undefined,\n                            newKeyPath\n                          );\n                        }}\n                        Icon={Trash}\n                      >\n                        {removeElement.text}\n                      </Button>\n                    </div>\n                  </td>\n                </tr>\n\n                <tr className=\"block w-full\">\n                  <td className=\"flex w-full\">\n                    <TextEditorContainer\n                      section={\n                        subSection ??\n                        getEmptyNode((section as unknown as ContentNode[])[0])\n                      }\n                      keyPath={[\n                        ...keyPath,\n                        {\n                          type: NodeTypes.ARRAY,\n                          key: index,\n                        },\n                      ]}\n                      dictionary={dictionary}\n                      renderSection={renderSection}\n                    />\n                  </td>\n                </tr>\n              </Fragment>\n            );\n          })}\n        </tbody>\n      </table>\n      <Button\n        label={addNewElement.label.value}\n        variant={ButtonVariant.HOVERABLE}\n        color={ButtonColor.NEUTRAL}\n        textAlign={ButtonTextAlign.LEFT}\n        isFullWidth\n        onClick={() => {\n          const newKeyPath: KeyPath[] = [\n            ...keyPath,\n            {\n              type: NodeTypes.ARRAY,\n              key: (section as unknown as ContentNode[]).length, // Keeps length for adding new items\n            },\n          ];\n          addEditedContent(\n            dictionary.localId!,\n            getEmptyNode((section as unknown as ContentNode[])[0]) ?? '',\n            newKeyPath,\n            false\n          );\n        }}\n        Icon={Plus}\n      >\n        {addNewElement.text}\n      </Button>\n    </div>\n  );\n};\n\nconst ObjectTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionary,\n  renderSection,\n}) => {\n  const typedSection = section as unknown as Record<string, ContentNode>;\n  const firstKey = Object.keys(typedSection)[0] as keyof typeof section;\n\n  return (\n    <table className=\"w-full\">\n      <tbody className=\"flex flex-col gap-2\">\n        {Object.keys(typedSection).map((key) => {\n          const childKeyPath: KeyPath[] = [\n            ...keyPath,\n            { type: NodeTypes.OBJECT, key },\n          ];\n          const subSection =\n            typedSection[key as keyof typeof section] ??\n            getEmptyNode(typedSection[firstKey]);\n          const uniqueKey = `${JSON.stringify(keyPath)}-object-${key}`;\n          // Collapse any object/array (typed or plain) — only true primitives render inline.\n          // getIsEditableSection can't be used here: it inspects getNodeChildren(), which for\n          // translation nodes returns the first locale value (a string), causing translation\n          // subtrees to be mistakenly treated as leaves and mounted all at once.\n          const isLeaf = subSection === null || typeof subSection !== 'object';\n\n          if (isLeaf) {\n            return (\n              <Fragment key={uniqueKey}>\n                <tr className=\"mt-2 p-2 text-xs\">\n                  <td className=\"flex w-full\">{String(key)}</td>\n                </tr>\n                <tr className=\"block w-full\">\n                  <td className=\"flex w-full\">\n                    <TextEditor\n                      section={subSection}\n                      keyPath={childKeyPath}\n                      dictionary={dictionary}\n                      renderSection={renderSection}\n                    />\n                  </td>\n                </tr>\n              </Fragment>\n            );\n          }\n\n          return (\n            <tr\n              key={uniqueKey}\n              className=\"block w-full border-neutral/10 border-t py-1\"\n            >\n              <td className=\"flex w-full\">\n                <CollapsibleEditor\n                  label={camelCaseToSentence(key)}\n                  section={subSection}\n                  keyPath={childKeyPath}\n                  dictionary={dictionary}\n                  renderSection={renderSection}\n                />\n              </td>\n            </tr>\n          );\n        })}\n      </tbody>\n    </table>\n  );\n};\n\nenum MarkdownViewMode {\n  Edit,\n  Preview,\n}\n\nenum HtmlViewMode {\n  Edit,\n  Preview,\n}\n\nconst HtmlTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionary,\n}) => {\n  const [mode, setMode] = useState(HtmlViewMode.Edit);\n  const toggleContent = [\n    {\n      content: 'Edit',\n      value: HtmlViewMode.Edit,\n    },\n    {\n      content: 'Preview',\n      value: HtmlViewMode.Preview,\n    },\n  ] as SwitchSelectorChoices<HtmlViewMode>;\n  const childKeyPath: KeyPath[] = [...keyPath, { type: NodeTypes.HTML }];\n\n  const content = (section as HTMLContent<ContentNode>)[\n    NodeTypes.HTML\n  ] as ContentNode;\n\n  return (\n    <div className=\"flex w-full flex-col justify-center gap-6 p-2\">\n      <SwitchSelector\n        choices={toggleContent}\n        value={mode}\n        onChange={setMode}\n        color={SwitchSelectorColor.TEXT}\n        size={SwitchSelectorSize.SM}\n        className=\"ml-auto\"\n      />\n\n      <TextEditorContainer\n        section={content}\n        keyPath={childKeyPath}\n        dictionary={dictionary}\n        renderSection={\n          mode === HtmlViewMode.Preview\n            ? (rawContent) => <SafeHtmlRenderer rawContent={rawContent} />\n            : undefined\n        }\n      />\n    </div>\n  );\n};\n\nconst MarkdownTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionary,\n  isDarkMode,\n}) => {\n  const [mode, setMode] = useState(MarkdownViewMode.Edit);\n  const toggleContent = [\n    {\n      content: 'Edit',\n      value: MarkdownViewMode.Edit,\n    },\n    {\n      content: 'Preview',\n      value: MarkdownViewMode.Preview,\n    },\n  ] as SwitchSelectorChoices<MarkdownViewMode>;\n  const childKeyPath: KeyPath[] = [...keyPath, { type: NodeTypes.MARKDOWN }];\n\n  const content = ((section as MarkdownContent<ContentNode>)[\n    NodeTypes.MARKDOWN\n  ] ?? '') as ContentNode;\n\n  return (\n    <div className=\"flex w-full flex-col justify-center gap-6 p-2\">\n      <SwitchSelector\n        choices={toggleContent}\n        value={mode}\n        onChange={setMode}\n        color={SwitchSelectorColor.TEXT}\n        size={SwitchSelectorSize.SM}\n        className=\"ml-auto\"\n      />\n\n      <TextEditorContainer\n        section={content}\n        keyPath={childKeyPath}\n        dictionary={dictionary}\n        renderSection={\n          mode === MarkdownViewMode.Preview\n            ? (content) => (\n                <Suspense fallback={<Loader />}>\n                  <LazyMarkdownRenderer isDarkMode={isDarkMode}>\n                    {content}\n                  </LazyMarkdownRenderer>\n                </Suspense>\n              )\n            : undefined\n        }\n      />\n    </div>\n  );\n};\n\nconst InsertionTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  ...props\n}) => {\n  const childKeyPath: KeyPath[] = [...keyPath, { type: NodeTypes.INSERTION }];\n\n  const content = (section as InsertionContent<ContentNode>)[\n    NodeTypes.INSERTION\n  ];\n\n  return (\n    <div className=\"flex w-full flex-col justify-center gap-6 p-2\">\n      <TextEditorContainer\n        section={content}\n        keyPath={childKeyPath}\n        {...props}\n      />\n    </div>\n  );\n};\n\nconst FileTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  ...props\n}) => {\n  const childKeyPath: KeyPath[] = [...keyPath, { type: NodeTypes.FILE }];\n\n  const fileUrl = (section as FileContent)[NodeTypes.FILE];\n  const { content } = section as FileContent;\n\n  return (\n    <div className=\"flex w-full flex-col justify-center gap-6 p-2\">\n      <span className=\"text-neutral text-sm\">{fileUrl} </span>\n      <TextEditorContainer\n        section={content}\n        keyPath={childKeyPath}\n        {...props}\n      />\n    </div>\n  );\n};\n\nconst NestedTextEditor: FC<TextEditorProps> = ({\n  keyPath,\n  dictionary,\n  renderSection,\n  section,\n  ...props\n}) => {\n  const { addEditedContent } = useEditedContent();\n\n  const content = (section as any)[NodeTypes.NESTED];\n  const childrenKeyPath = [...keyPath, { type: NodeTypes.NESTED }] as KeyPath[];\n\n  return (\n    <div className=\"flex w-full flex-col gap-4 p-2\">\n      <Label>Dictionary key</Label>\n      <ContentEditorInputBase\n        aria-label=\"Edit field\"\n        type=\"text\"\n        variant={InputVariant.DEFAULT}\n        {...props}\n        onContentChange={(newValue) => {\n          addEditedContent(\n            dictionary.localId!,\n            {\n              ...content,\n              dictionaryKey: String(newValue),\n            },\n            childrenKeyPath\n          );\n        }}\n      >\n        {content.dictionaryKey ?? ''}\n      </ContentEditorInputBase>\n\n      <Label>Path (optional)</Label>\n      <ContentEditorInputBase\n        aria-label=\"Edit field\"\n        type=\"text\"\n        variant={InputVariant.DEFAULT}\n        {...props}\n        onContentChange={(newValue) => {\n          addEditedContent(\n            dictionary.localId!,\n            {\n              ...content,\n              path: newValue !== '' ? newValue : undefined,\n            },\n            childrenKeyPath\n          );\n        }}\n      >\n        {content.path ?? ''}\n      </ContentEditorInputBase>\n    </div>\n  );\n};\n\nexport const TextEditor = memo<TextEditorProps>(function TextEditor({\n  section,\n  keyPath,\n  dictionary,\n  renderSection,\n  isDarkMode,\n}) {\n  const { tsxNotEditable } = useIntlayer('navigation-view');\n  const nodeType = getNodeType(section);\n\n  if (nodeType === NodeTypes.REACT_NODE) {\n    return (\n      <div className=\"flex w-full flex-col gap-2\">\n        <span>(React Node)</span>\n        <span className=\"flex text-neutral text-xs\">{tsxNotEditable}</span>\n      </div>\n    );\n  }\n\n  if (nodeType === NodeTypes.NESTED) {\n    return (\n      <NestedTextEditor\n        dictionary={dictionary}\n        renderSection={renderSection}\n        keyPath={keyPath}\n        section={section}\n      />\n    );\n  }\n\n  if (nodeType === NodeTypes.TRANSLATION) {\n    return (\n      <TranslationTextEditor\n        dictionary={dictionary}\n        renderSection={renderSection}\n        keyPath={keyPath}\n        section={section}\n      />\n    );\n  }\n\n  if (nodeType === NodeTypes.ENUMERATION) {\n    return (\n      <EnumerationTextEditor\n        dictionary={dictionary}\n        renderSection={renderSection}\n        keyPath={keyPath}\n        section={section}\n      />\n    );\n  }\n\n  if (nodeType === NodeTypes.CONDITION) {\n    return (\n      <ConditionTextEditor\n        dictionary={dictionary}\n        renderSection={renderSection}\n        keyPath={keyPath}\n        section={section}\n      />\n    );\n  }\n\n  if (nodeType === NodeTypes.GENDER) {\n    return (\n      <GenderTextEditor\n        dictionary={dictionary}\n        renderSection={renderSection}\n        keyPath={keyPath}\n        section={section}\n      />\n    );\n  }\n\n  if (nodeType === NodeTypes.PLURAL) {\n    return (\n      <PluralTextEditor\n        dictionary={dictionary}\n        renderSection={renderSection}\n        keyPath={keyPath}\n        section={section}\n      />\n    );\n  }\n\n  if (nodeType === NodeTypes.INSERTION) {\n    return (\n      <InsertionTextEditor\n        dictionary={dictionary}\n        renderSection={renderSection}\n        keyPath={keyPath}\n        section={section}\n      />\n    );\n  }\n\n  if (nodeType === NodeTypes.MARKDOWN) {\n    return (\n      <MarkdownTextEditor\n        dictionary={dictionary}\n        keyPath={keyPath}\n        section={section}\n        isDarkMode={isDarkMode}\n      />\n    );\n  }\n\n  if (nodeType === NodeTypes.HTML) {\n    return (\n      <HtmlTextEditor\n        dictionary={dictionary}\n        keyPath={keyPath}\n        section={section}\n      />\n    );\n  }\n\n  if (nodeType === NodeTypes.FILE) {\n    return (\n      <FileTextEditor\n        dictionary={dictionary}\n        renderSection={renderSection}\n        keyPath={keyPath}\n        section={section}\n      />\n    );\n  }\n\n  if (nodeType === NodeTypes.ARRAY) {\n    return (\n      <ArrayTextEditor\n        dictionary={dictionary}\n        renderSection={renderSection}\n        keyPath={keyPath}\n        section={section}\n      />\n    );\n  }\n\n  if (nodeType === NodeTypes.OBJECT) {\n    return (\n      <ObjectTextEditor\n        dictionary={dictionary}\n        renderSection={renderSection}\n        keyPath={keyPath}\n        section={section}\n      />\n    );\n  }\n\n  if (nodeType === NodeTypes.NUMBER) {\n    return (\n      <div className=\"w-full p-2\">\n        <ContentEditorInput\n          dictionary={dictionary}\n          keyPath={keyPath}\n          type=\"number\"\n          aria-label=\"Edit field\"\n        >\n          {section as number}\n        </ContentEditorInput>\n      </div>\n    );\n  }\n\n  if (nodeType === NodeTypes.TEXT) {\n    return (\n      <div className=\"w-full p-2\">\n        {typeof renderSection === 'function' ? (\n          renderSection(section as string)\n        ) : (\n          <ContentEditorTextArea\n            variant={InputVariant.DEFAULT}\n            aria-label=\"Edit field\"\n            keyPath={keyPath}\n            dictionary={dictionary}\n          >\n            {section as string}\n          </ContentEditorTextArea>\n        )}\n      </div>\n    );\n  }\n\n  if (nodeType === NodeTypes.BOOLEAN) {\n    return (\n      <div className=\"w-full p-2\">\n        <ContentEditorToggle\n          dictionary={dictionary}\n          keyPath={keyPath}\n          value={section as boolean}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"w-full p-2\">\n      Error. Format not supported.\n      {JSON.stringify(section, null, 2)}\n      {JSON.stringify(keyPath, null, 2)}\n      NodeType : {nodeType}\n    </div>\n  );\n});\n\nexport const TextEditorContainer = memo<TextEditorProps>(\n  function TextEditorContainer(props) {\n    return (\n      <Container\n        border\n        background=\"none\"\n        className=\"top-6 flex h-full flex-1 flex-col gap-6 overflow-hidden p-2 md:sticky\"\n        roundedSize=\"2xl\"\n      >\n        <TextEditor {...props} />\n      </Container>\n    );\n  }\n);\n"],"mappings":"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"}
+{"version":3,"file":"TextEditor.mjs","names":["ContentEditorTextAreaBase","ContentEditorInputBase"],"sources":["../../../../../src/components/DictionaryFieldEditor/ContentEditorView/TextEditor.tsx"],"sourcesContent":["'use client';\n\nimport { Accordion } from '@components/Accordion';\nimport {\n  Button,\n  ButtonColor,\n  ButtonSize,\n  ButtonTextAlign,\n  ButtonVariant,\n} from '@components/Button';\nimport { Container } from '@components/Container';\nimport {\n  ContentEditorInput as ContentEditorInputBase,\n  type ContentEditorInputProps as ContentEditorInputPropsBase,\n} from '@components/ContentEditor/ContentEditorInput';\nimport {\n  ContentEditorTextArea as ContentEditorTextAreaBase,\n  type ContentEditorTextAreaProps as ContentEditorTextAreaPropsBase,\n} from '@components/ContentEditor/ContentEditorTextArea';\nimport { renameKey } from '@components/DictionaryFieldEditor/ContentEditorView/object';\nimport { InputVariant } from '@components/Input';\nimport { Label } from '@components/Label';\nimport { Loader } from '@components/Loader';\nimport { useLocaleSwitcherContent } from '@components/LocaleSwitcherContentDropDown';\nimport {\n  SwitchSelector,\n  type SwitchSelectorChoices,\n  SwitchSelectorColor,\n  type SwitchSelectorProps,\n  SwitchSelectorSize,\n} from '@components/SwitchSelector';\nimport { useAuditContentDeclarationField } from '@hooks/reactQuery';\nimport { camelCaseToSentence } from '@intlayer/config/client';\nimport {\n  getEmptyNode,\n  getNodeType,\n} from '@intlayer/core/dictionaryManipulator';\nimport { getLocaleName } from '@intlayer/core/localization';\nimport type {\n  ConditionContent,\n  EnumerationContent,\n  FileContent,\n  GenderContent,\n  HTMLContent,\n  InsertionContent,\n  MarkdownContent,\n  PluralContent,\n  TranslationContent,\n} from '@intlayer/core/transpiler';\nimport { useConfiguration, useEditedContent } from '@intlayer/editor-react';\nimport type { ContentNode, Dictionary } from '@intlayer/types/dictionary';\nimport type { KeyPath } from '@intlayer/types/keyPath';\nimport * as NodeTypes from '@intlayer/types/nodeType';\nimport { Plus, Trash, WandSparkles } from 'lucide-react';\nimport {\n  type FC,\n  Fragment,\n  lazy,\n  memo,\n  type ReactNode,\n  Suspense,\n  useState,\n} from 'react';\nimport { useIntlayer, useLocale } from 'react-intlayer';\nimport { EnumKeyInput } from '../EnumKeyInput';\nimport { SafeHtmlRenderer } from './SafeHtmlRenderer';\n\nconst LazyMarkdownRenderer = lazy(() =>\n  import('@components/MarkDownRender').then((m) => ({\n    default: m.MarkdownRenderer,\n  }))\n);\n\n// Renders children only after the accordion is first opened (mount-once pattern).\n// Prevents deeply nested sub-trees from mounting on initial render.\ntype CollapsibleEditorProps = TextEditorProps & { label: string };\nconst CollapsibleEditor = memo<CollapsibleEditorProps>(\n  function CollapsibleEditor({ label, ...editorProps }) {\n    const [hasOpened, setHasOpened] = useState(false);\n    return (\n      <Accordion\n        header={label}\n        label={label}\n        onToggle={(isOpen) => {\n          if (isOpen && !hasOpened) setHasOpened(true);\n        }}\n      >\n        {hasOpened ? <TextEditor {...editorProps} /> : null}\n      </Accordion>\n    );\n  }\n);\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\ntype ContentEditorTextAreaProps = Omit<\n  ContentEditorTextAreaPropsBase,\n  'onContentChange'\n> & {\n  keyPath: KeyPath[];\n  dictionary: Dictionary;\n};\n\nconst ContentEditorTextArea: FC<ContentEditorTextAreaProps> = ({\n  keyPath,\n  dictionary,\n  ...props\n}) => {\n  const { editedContent, addEditedContent } = useEditedContent();\n  const configuration = useConfiguration();\n  const { mutate: auditContentDeclarationField, isPending: isAuditing } =\n    useAuditContentDeclarationField();\n\n  return (\n    <ContentEditorTextAreaBase\n      variant={InputVariant.DEFAULT}\n      onContentChange={(newValue) =>\n        addEditedContent(dictionary.localId!, newValue, keyPath)\n      }\n      additionalButtons={\n        <Button\n          Icon={WandSparkles}\n          label=\"Audit\"\n          variant={ButtonVariant.HOVERABLE}\n          size={ButtonSize.ICON_SM}\n          color={ButtonColor.TEXT}\n          className=\"cursor-pointer hover:scale-110\"\n          isLoading={isAuditing}\n          onClick={() => {\n            auditContentDeclarationField(\n              {\n                fileContent: JSON.stringify({\n                  ...dictionary,\n                  ...(editedContent?.[dictionary.localId!] ?? {}),\n                }),\n                keyPath,\n                locales: configuration?.internationalization.locales ?? [],\n                aiOptions: {\n                  apiKey: configuration?.ai?.apiKey,\n                  model: configuration?.ai?.model,\n                  temperature: configuration?.ai?.temperature,\n                },\n              },\n              {\n                onSuccess: (response) => {\n                  if (!response?.data) return;\n\n                  try {\n                    const editedContent = response.data.fileContent as string;\n\n                    addEditedContent(\n                      dictionary.localId!,\n                      editedContent,\n                      keyPath\n                    );\n                  } catch (error) {\n                    console.error(error);\n                  }\n                },\n              }\n            );\n          }}\n        />\n      }\n      {...props}\n    />\n  );\n};\n\ntype ContentEditorInputProps = Omit<\n  ContentEditorInputPropsBase,\n  'onContentChange'\n> & {\n  keyPath: KeyPath[];\n  dictionary: Dictionary;\n};\n\nconst ContentEditorInput: FC<ContentEditorInputProps> = ({\n  keyPath,\n  dictionary,\n  ...props\n}) => {\n  const { addEditedContent } = useEditedContent();\n\n  return (\n    <ContentEditorInputBase\n      variant={InputVariant.DEFAULT}\n      onContentChange={(newValue) =>\n        addEditedContent(dictionary.localId!, newValue, keyPath)\n      }\n      {...props}\n    />\n  );\n};\n\nconst toggleContent = [\n  {\n    content: 'False',\n    value: false,\n  },\n  {\n    content: 'True',\n    value: true,\n  },\n] as SwitchSelectorChoices<boolean>;\n\ntype ContentEditorToggleProps = SwitchSelectorProps & {\n  dictionary: Dictionary;\n  keyPath: KeyPath[];\n};\n\nconst ContentEditorToggle: FC<ContentEditorToggleProps> = ({\n  dictionary,\n  keyPath,\n  ...props\n}) => {\n  const { addEditedContent } = useEditedContent();\n\n  return (\n    <SwitchSelector\n      choices={toggleContent}\n      value={true}\n      onChange={(value) =>\n        addEditedContent(dictionary.localId!, value, keyPath)\n      }\n      color={SwitchSelectorColor.TEXT}\n      size={SwitchSelectorSize.SM}\n      {...props}\n    />\n  );\n};\n\nexport type TextEditorProps = {\n  dictionary: Dictionary;\n  keyPath: KeyPath[];\n  section: ContentNode;\n  isDarkMode?: boolean;\n  renderSection?: (content: string) => ReactNode;\n  onContentChange?: (newValue: string) => void;\n};\n\nconst TranslationTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionary,\n  renderSection,\n}: TextEditorProps) => {\n  const { locale, defaultLocale } = useLocale();\n  const { selectedLocales } = useLocaleSwitcherContent();\n\n  const content: any = (section as TranslationContent<string>)[\n    NodeTypes.TRANSLATION\n  ];\n\n  return (\n    <table className=\"w-full\">\n      <tbody className=\"flex w-full flex-col gap-2\">\n        {selectedLocales.map((translationKey) => {\n          const uniqueKey = `${JSON.stringify(keyPath)}-translation-${translationKey}`;\n          return (\n            <Fragment key={uniqueKey}>\n              <tr className=\"mt-2 w-full p-2 text-xs\">\n                <td className=\"flex w-full\">\n                  {getLocaleName(translationKey, locale)}\n                </td>\n              </tr>\n              <tr className=\"flex\">\n                <td className=\"flex w-full\">\n                  <TextEditorContainer\n                    section={\n                      content[translationKey] ??\n                      getEmptyNode(content[defaultLocale])\n                    }\n                    keyPath={[\n                      ...keyPath,\n                      { type: NodeTypes.TRANSLATION, key: translationKey },\n                    ]}\n                    dictionary={dictionary}\n                    renderSection={renderSection}\n                  />\n                </td>\n              </tr>\n            </Fragment>\n          );\n        })}\n      </tbody>\n    </table>\n  );\n};\n\nconst EnumerationTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionary,\n  renderSection,\n}) => {\n  const { addEditedContent } = useEditedContent();\n  const { addNewEnumeration, removeEnumeration } =\n    useIntlayer('navigation-view');\n\n  const content = (section as EnumerationContent<string>)[\n    NodeTypes.ENUMERATION\n  ];\n  const firstKey = Object.keys(content)[0] as keyof typeof content;\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <table className=\"w-full\">\n        <tbody className=\"flex w-full flex-col gap-2\">\n          {Object.keys(\n            (section as EnumerationContent<ContentNode>)[NodeTypes.ENUMERATION]\n          ).map((enumKey) => {\n            const childrenKeyPath = [\n              ...keyPath,\n              { type: NodeTypes.ENUMERATION, key: enumKey },\n            ] as KeyPath[];\n            const uniqueKey = `${JSON.stringify(keyPath)}-enumeration-${enumKey}`;\n\n            return (\n              <Fragment key={uniqueKey}>\n                <tr className=\"mt-2 w-full\">\n                  <td className=\"flex w-full\">\n                    <div className=\"flex flex-1\">\n                      <Button\n                        label={removeEnumeration.label.value}\n                        variant=\"hoverable\"\n                        size=\"sm\"\n                        color=\"error\"\n                        className=\"ml-auto text-neutral hover:text-error\"\n                        Icon={Trash}\n                        onClick={() =>\n                          addEditedContent(\n                            dictionary.localId!,\n                            undefined,\n                            childrenKeyPath\n                          )\n                        }\n                      >\n                        {removeEnumeration.text}\n                      </Button>\n                    </div>\n                  </td>\n                </tr>\n                <tr className=\"w-full p-2\">\n                  <td className=\"flex w-full\">\n                    <EnumKeyInput\n                      value={enumKey}\n                      onChange={(value) => {\n                        const preValueContent = (\n                          section as EnumerationContent<string>\n                        )[NodeTypes.ENUMERATION];\n\n                        const newValueContent = renameKey(\n                          preValueContent,\n                          enumKey as keyof typeof preValueContent,\n                          value\n                        );\n                        const newValue = {\n                          ...(section as EnumerationContent<string>),\n                          [NodeTypes.ENUMERATION]: newValueContent,\n                        };\n\n                        console.log('newValue', newValue);\n\n                        addEditedContent(\n                          dictionary.localId!,\n                          newValue,\n                          keyPath\n                        );\n                      }}\n                    />\n                  </td>\n                </tr>\n                <tr className=\"block w-full\">\n                  <td className=\"flex w-full\">\n                    <TextEditor\n                      section={\n                        content[enumKey as keyof typeof content] ??\n                        getEmptyNode(content[firstKey])\n                      }\n                      keyPath={childrenKeyPath}\n                      dictionary={dictionary}\n                      renderSection={renderSection}\n                    />\n                  </td>\n                </tr>\n              </Fragment>\n            );\n          })}\n        </tbody>\n      </table>\n\n      <Button\n        label={addNewEnumeration.label.value}\n        variant={ButtonVariant.HOVERABLE}\n        color={ButtonColor.NEUTRAL}\n        textAlign={ButtonTextAlign.LEFT}\n        isFullWidth\n        onClick={() =>\n          addEditedContent(\n            dictionary.localId!,\n            getEmptyNode(content[firstKey]) ?? '',\n            [...keyPath, { type: NodeTypes.ENUMERATION, key: 'unknown' }]\n          )\n        }\n        Icon={Plus}\n        className=\"m-2\"\n      >\n        {addNewEnumeration.text}\n      </Button>\n    </div>\n  );\n};\n\nconst ConditionTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionary,\n  renderSection,\n}) => {\n  const content = (section as ConditionContent<string>)[NodeTypes.CONDITION];\n\n  return (\n    <table className=\"w-full\">\n      <tbody className=\"flex w-full flex-col gap-2\">\n        {['true', 'false', 'fallback'].map((condKey) => {\n          const uniqueKey = `${JSON.stringify(keyPath)}-condition-${condKey}`;\n          return (\n            <Fragment key={uniqueKey}>\n              <tr className=\"mt-2 block w-full p-2 text-xs\">\n                <td className=\"flex w-full\">{String(condKey)}</td>\n              </tr>\n              <tr className=\"block w-full\">\n                <td className=\"flex w-full\">\n                  <TextEditorContainer\n                    section={\n                      content[condKey as keyof typeof content] ??\n                      getEmptyNode(content.true)\n                    }\n                    keyPath={[\n                      ...keyPath,\n                      {\n                        type: NodeTypes.CONDITION,\n                        key: condKey,\n                      } as KeyPath,\n                    ]}\n                    dictionary={dictionary}\n                    renderSection={renderSection}\n                  />\n                </td>\n              </tr>\n            </Fragment>\n          );\n        })}\n      </tbody>\n    </table>\n  );\n};\n\nconst GenderTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionary,\n  renderSection,\n}) => {\n  const content = (section as GenderContent<string>)[NodeTypes.GENDER];\n\n  return (\n    <table className=\"w-full\">\n      <tbody className=\"flex w-full flex-col gap-2\">\n        {['male', 'female', 'fallback'].map((condKey) => {\n          const uniqueKey = `${JSON.stringify(keyPath)}-gender-${condKey}`;\n          return (\n            <Fragment key={uniqueKey}>\n              <tr className=\"mt-2 block w-full p-2 text-xs\">\n                <td className=\"flex w-full\">{String(condKey)}</td>\n              </tr>\n              <tr className=\"block w-full\">\n                <td className=\"flex w-full\">\n                  <TextEditorContainer\n                    section={\n                      content[condKey as keyof typeof content] ??\n                      getEmptyNode(content.male)\n                    }\n                    keyPath={[\n                      ...keyPath,\n                      {\n                        type: NodeTypes.GENDER,\n                        key: condKey,\n                      } as KeyPath,\n                    ]}\n                    dictionary={dictionary}\n                    renderSection={renderSection}\n                  />\n                </td>\n              </tr>\n            </Fragment>\n          );\n        })}\n      </tbody>\n    </table>\n  );\n};\n\nconst PLURAL_CATEGORIES = ['zero', 'one', 'two', 'few', 'many', 'other'];\n\nconst PluralTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionary,\n  renderSection,\n}) => {\n  const content = (section as PluralContent<string>)[NodeTypes.PLURAL];\n\n  return (\n    <table className=\"w-full\">\n      <tbody className=\"flex w-full flex-col gap-2\">\n        {PLURAL_CATEGORIES.map((pluralKey) => {\n          const uniqueKey = `${JSON.stringify(keyPath)}-plural-${pluralKey}`;\n          return (\n            <Fragment key={uniqueKey}>\n              <tr className=\"mt-2 block w-full p-2 text-xs\">\n                <td className=\"flex w-full\">{pluralKey}</td>\n              </tr>\n              <tr className=\"block w-full\">\n                <td className=\"flex w-full\">\n                  <TextEditorContainer\n                    section={\n                      content[pluralKey as keyof typeof content] ??\n                      getEmptyNode(content.other)\n                    }\n                    keyPath={[\n                      ...keyPath,\n                      {\n                        type: NodeTypes.PLURAL,\n                        key: pluralKey,\n                      } as KeyPath,\n                    ]}\n                    dictionary={dictionary}\n                    renderSection={renderSection}\n                  />\n                </td>\n              </tr>\n            </Fragment>\n          );\n        })}\n      </tbody>\n    </table>\n  );\n};\n\nconst ArrayTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionary,\n  renderSection,\n}) => {\n  const { addEditedContent } = useEditedContent();\n  const { addNewElement, removeElement } = useIntlayer('navigation-view');\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <table className=\"w-full\">\n        <tbody className=\"flex w-full flex-col gap-2\">\n          {(section as unknown as ContentNode[]).map((subSection, index) => {\n            const uniqueKey = `${JSON.stringify(keyPath)}-array-${index}`;\n            return (\n              <Fragment key={uniqueKey}>\n                <tr className=\"mt-2 w-full p-2\">\n                  <td className=\"flex w-full\">\n                    <div className=\"flex w-full items-center justify-between gap-2\">\n                      <span className=\"text-xs\">{String(index)}</span>\n                      <Button\n                        label={removeElement.label.value}\n                        variant=\"hoverable\"\n                        size=\"sm\"\n                        color=\"error\"\n                        className=\"ml-auto text-neutral hover:text-error\"\n                        onClick={() => {\n                          const newKeyPath: KeyPath[] = [\n                            ...keyPath,\n                            {\n                              type: NodeTypes.ARRAY,\n                              key: index, // Fixed: Use index instead of length\n                            },\n                          ];\n                          addEditedContent(\n                            dictionary.localId!,\n                            undefined,\n                            newKeyPath\n                          );\n                        }}\n                        Icon={Trash}\n                      >\n                        {removeElement.text}\n                      </Button>\n                    </div>\n                  </td>\n                </tr>\n\n                <tr className=\"block w-full\">\n                  <td className=\"flex w-full\">\n                    <TextEditorContainer\n                      section={\n                        subSection ??\n                        getEmptyNode((section as unknown as ContentNode[])[0])\n                      }\n                      keyPath={[\n                        ...keyPath,\n                        {\n                          type: NodeTypes.ARRAY,\n                          key: index,\n                        },\n                      ]}\n                      dictionary={dictionary}\n                      renderSection={renderSection}\n                    />\n                  </td>\n                </tr>\n              </Fragment>\n            );\n          })}\n        </tbody>\n      </table>\n      <Button\n        label={addNewElement.label.value}\n        variant={ButtonVariant.HOVERABLE}\n        color={ButtonColor.NEUTRAL}\n        textAlign={ButtonTextAlign.LEFT}\n        isFullWidth\n        onClick={() => {\n          const newKeyPath: KeyPath[] = [\n            ...keyPath,\n            {\n              type: NodeTypes.ARRAY,\n              key: (section as unknown as ContentNode[]).length, // Keeps length for adding new items\n            },\n          ];\n          addEditedContent(\n            dictionary.localId!,\n            getEmptyNode((section as unknown as ContentNode[])[0]) ?? '',\n            newKeyPath,\n            false\n          );\n        }}\n        Icon={Plus}\n      >\n        {addNewElement.text}\n      </Button>\n    </div>\n  );\n};\n\nconst ObjectTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionary,\n  renderSection,\n}) => {\n  const typedSection = section as unknown as Record<string, ContentNode>;\n  const firstKey = Object.keys(typedSection)[0] as keyof typeof section;\n\n  return (\n    <table className=\"w-full\">\n      <tbody className=\"flex flex-col gap-2\">\n        {Object.keys(typedSection).map((key) => {\n          const childKeyPath: KeyPath[] = [\n            ...keyPath,\n            { type: NodeTypes.OBJECT, key },\n          ];\n          const subSection =\n            typedSection[key as keyof typeof section] ??\n            getEmptyNode(typedSection[firstKey]);\n          const uniqueKey = `${JSON.stringify(keyPath)}-object-${key}`;\n          // Collapse any object/array (typed or plain) — only true primitives render inline.\n          // getIsEditableSection can't be used here: it inspects getNodeChildren(), which for\n          // translation nodes returns the first locale value (a string), causing translation\n          // subtrees to be mistakenly treated as leaves and mounted all at once.\n          const isLeaf = subSection === null || typeof subSection !== 'object';\n\n          if (isLeaf) {\n            return (\n              <Fragment key={uniqueKey}>\n                <tr className=\"mt-2 p-2 text-xs\">\n                  <td className=\"flex w-full\">{String(key)}</td>\n                </tr>\n                <tr className=\"block w-full\">\n                  <td className=\"flex w-full\">\n                    <TextEditor\n                      section={subSection}\n                      keyPath={childKeyPath}\n                      dictionary={dictionary}\n                      renderSection={renderSection}\n                    />\n                  </td>\n                </tr>\n              </Fragment>\n            );\n          }\n\n          return (\n            <tr\n              key={uniqueKey}\n              className=\"block w-full border-neutral/10 border-t py-1\"\n            >\n              <td className=\"flex w-full\">\n                <CollapsibleEditor\n                  label={camelCaseToSentence(key)}\n                  section={subSection}\n                  keyPath={childKeyPath}\n                  dictionary={dictionary}\n                  renderSection={renderSection}\n                />\n              </td>\n            </tr>\n          );\n        })}\n      </tbody>\n    </table>\n  );\n};\n\nenum MarkdownViewMode {\n  Edit,\n  Preview,\n}\n\nenum HtmlViewMode {\n  Edit,\n  Preview,\n}\n\nconst HtmlTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionary,\n}) => {\n  const [mode, setMode] = useState(HtmlViewMode.Edit);\n  const toggleContent = [\n    {\n      content: 'Edit',\n      value: HtmlViewMode.Edit,\n    },\n    {\n      content: 'Preview',\n      value: HtmlViewMode.Preview,\n    },\n  ] as SwitchSelectorChoices<HtmlViewMode>;\n  const childKeyPath: KeyPath[] = [...keyPath, { type: NodeTypes.HTML }];\n\n  const content = (section as HTMLContent<ContentNode>)[\n    NodeTypes.HTML\n  ] as ContentNode;\n\n  return (\n    <div className=\"flex w-full flex-col justify-center gap-6 p-2\">\n      <SwitchSelector\n        choices={toggleContent}\n        value={mode}\n        onChange={setMode}\n        color={SwitchSelectorColor.TEXT}\n        size={SwitchSelectorSize.SM}\n        className=\"ml-auto\"\n      />\n\n      <TextEditorContainer\n        section={content}\n        keyPath={childKeyPath}\n        dictionary={dictionary}\n        renderSection={\n          mode === HtmlViewMode.Preview\n            ? (rawContent) => <SafeHtmlRenderer rawContent={rawContent} />\n            : undefined\n        }\n      />\n    </div>\n  );\n};\n\nconst MarkdownTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionary,\n  isDarkMode,\n}) => {\n  const [mode, setMode] = useState(MarkdownViewMode.Edit);\n  const toggleContent = [\n    {\n      content: 'Edit',\n      value: MarkdownViewMode.Edit,\n    },\n    {\n      content: 'Preview',\n      value: MarkdownViewMode.Preview,\n    },\n  ] as SwitchSelectorChoices<MarkdownViewMode>;\n  const childKeyPath: KeyPath[] = [...keyPath, { type: NodeTypes.MARKDOWN }];\n\n  const content = ((section as MarkdownContent<ContentNode>)[\n    NodeTypes.MARKDOWN\n  ] ?? '') as ContentNode;\n\n  return (\n    <div className=\"flex w-full flex-col justify-center gap-6 p-2\">\n      <SwitchSelector\n        choices={toggleContent}\n        value={mode}\n        onChange={setMode}\n        color={SwitchSelectorColor.TEXT}\n        size={SwitchSelectorSize.SM}\n        className=\"ml-auto\"\n      />\n\n      <TextEditorContainer\n        section={content}\n        keyPath={childKeyPath}\n        dictionary={dictionary}\n        renderSection={\n          mode === MarkdownViewMode.Preview\n            ? (content) => (\n                <Suspense fallback={<Loader />}>\n                  <LazyMarkdownRenderer isDarkMode={isDarkMode}>\n                    {content}\n                  </LazyMarkdownRenderer>\n                </Suspense>\n              )\n            : undefined\n        }\n      />\n    </div>\n  );\n};\n\nconst InsertionTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  ...props\n}) => {\n  const childKeyPath: KeyPath[] = [...keyPath, { type: NodeTypes.INSERTION }];\n\n  const content = (section as InsertionContent<ContentNode>)[\n    NodeTypes.INSERTION\n  ];\n\n  return (\n    <div className=\"flex w-full flex-col justify-center gap-6 p-2\">\n      <TextEditorContainer\n        section={content}\n        keyPath={childKeyPath}\n        {...props}\n      />\n    </div>\n  );\n};\n\nconst FileTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  ...props\n}) => {\n  const childKeyPath: KeyPath[] = [...keyPath, { type: NodeTypes.FILE }];\n\n  const fileUrl = (section as FileContent)[NodeTypes.FILE];\n  const { content } = section as FileContent;\n\n  return (\n    <div className=\"flex w-full flex-col justify-center gap-6 p-2\">\n      <span className=\"text-neutral text-sm\">{fileUrl} </span>\n      <TextEditorContainer\n        section={content}\n        keyPath={childKeyPath}\n        {...props}\n      />\n    </div>\n  );\n};\n\nconst NestedTextEditor: FC<TextEditorProps> = ({\n  keyPath,\n  dictionary,\n  renderSection,\n  section,\n  ...props\n}) => {\n  const { addEditedContent } = useEditedContent();\n\n  const content = (section as any)[NodeTypes.NESTED];\n  const childrenKeyPath = [...keyPath, { type: NodeTypes.NESTED }] as KeyPath[];\n\n  return (\n    <div className=\"flex w-full flex-col gap-4 p-2\">\n      <Label>Dictionary key</Label>\n      <ContentEditorInputBase\n        aria-label=\"Edit field\"\n        type=\"text\"\n        variant={InputVariant.DEFAULT}\n        {...props}\n        onContentChange={(newValue) => {\n          addEditedContent(\n            dictionary.localId!,\n            {\n              ...content,\n              dictionaryKey: String(newValue),\n            },\n            childrenKeyPath\n          );\n        }}\n      >\n        {content.dictionaryKey ?? ''}\n      </ContentEditorInputBase>\n\n      <Label>Path (optional)</Label>\n      <ContentEditorInputBase\n        aria-label=\"Edit field\"\n        type=\"text\"\n        variant={InputVariant.DEFAULT}\n        {...props}\n        onContentChange={(newValue) => {\n          addEditedContent(\n            dictionary.localId!,\n            {\n              ...content,\n              path: newValue !== '' ? newValue : undefined,\n            },\n            childrenKeyPath\n          );\n        }}\n      >\n        {content.path ?? ''}\n      </ContentEditorInputBase>\n    </div>\n  );\n};\n\nexport const TextEditor = memo<TextEditorProps>(function TextEditor({\n  section,\n  keyPath,\n  dictionary,\n  renderSection,\n  isDarkMode,\n}) {\n  const { tsxNotEditable } = useIntlayer('navigation-view');\n  const nodeType = getNodeType(section);\n\n  if (nodeType === NodeTypes.REACT_NODE) {\n    return (\n      <div className=\"flex w-full flex-col gap-2\">\n        <span>(React Node)</span>\n        <span className=\"flex text-neutral text-xs\">{tsxNotEditable}</span>\n      </div>\n    );\n  }\n\n  if (nodeType === NodeTypes.NESTED) {\n    return (\n      <NestedTextEditor\n        dictionary={dictionary}\n        renderSection={renderSection}\n        keyPath={keyPath}\n        section={section}\n      />\n    );\n  }\n\n  if (nodeType === NodeTypes.TRANSLATION) {\n    return (\n      <TranslationTextEditor\n        dictionary={dictionary}\n        renderSection={renderSection}\n        keyPath={keyPath}\n        section={section}\n      />\n    );\n  }\n\n  if (nodeType === NodeTypes.ENUMERATION) {\n    return (\n      <EnumerationTextEditor\n        dictionary={dictionary}\n        renderSection={renderSection}\n        keyPath={keyPath}\n        section={section}\n      />\n    );\n  }\n\n  if (nodeType === NodeTypes.CONDITION) {\n    return (\n      <ConditionTextEditor\n        dictionary={dictionary}\n        renderSection={renderSection}\n        keyPath={keyPath}\n        section={section}\n      />\n    );\n  }\n\n  if (nodeType === NodeTypes.GENDER) {\n    return (\n      <GenderTextEditor\n        dictionary={dictionary}\n        renderSection={renderSection}\n        keyPath={keyPath}\n        section={section}\n      />\n    );\n  }\n\n  if (nodeType === NodeTypes.PLURAL) {\n    return (\n      <PluralTextEditor\n        dictionary={dictionary}\n        renderSection={renderSection}\n        keyPath={keyPath}\n        section={section}\n      />\n    );\n  }\n\n  if (nodeType === NodeTypes.INSERTION) {\n    return (\n      <InsertionTextEditor\n        dictionary={dictionary}\n        renderSection={renderSection}\n        keyPath={keyPath}\n        section={section}\n      />\n    );\n  }\n\n  if (nodeType === NodeTypes.MARKDOWN) {\n    return (\n      <MarkdownTextEditor\n        dictionary={dictionary}\n        keyPath={keyPath}\n        section={section}\n        isDarkMode={isDarkMode}\n      />\n    );\n  }\n\n  if (nodeType === NodeTypes.HTML) {\n    return (\n      <HtmlTextEditor\n        dictionary={dictionary}\n        keyPath={keyPath}\n        section={section}\n      />\n    );\n  }\n\n  if (nodeType === NodeTypes.FILE) {\n    return (\n      <FileTextEditor\n        dictionary={dictionary}\n        renderSection={renderSection}\n        keyPath={keyPath}\n        section={section}\n      />\n    );\n  }\n\n  if (nodeType === NodeTypes.ARRAY) {\n    return (\n      <ArrayTextEditor\n        dictionary={dictionary}\n        renderSection={renderSection}\n        keyPath={keyPath}\n        section={section}\n      />\n    );\n  }\n\n  if (nodeType === NodeTypes.OBJECT) {\n    return (\n      <ObjectTextEditor\n        dictionary={dictionary}\n        renderSection={renderSection}\n        keyPath={keyPath}\n        section={section}\n      />\n    );\n  }\n\n  if (nodeType === NodeTypes.NUMBER) {\n    return (\n      <div className=\"w-full p-2\">\n        <ContentEditorInput\n          dictionary={dictionary}\n          keyPath={keyPath}\n          type=\"number\"\n          aria-label=\"Edit field\"\n        >\n          {section as number}\n        </ContentEditorInput>\n      </div>\n    );\n  }\n\n  if (nodeType === NodeTypes.TEXT) {\n    return (\n      <div className=\"w-full p-2\">\n        {typeof renderSection === 'function' ? (\n          renderSection(section as string)\n        ) : (\n          <ContentEditorTextArea\n            variant={InputVariant.DEFAULT}\n            aria-label=\"Edit field\"\n            keyPath={keyPath}\n            dictionary={dictionary}\n          >\n            {section as string}\n          </ContentEditorTextArea>\n        )}\n      </div>\n    );\n  }\n\n  if (nodeType === NodeTypes.BOOLEAN) {\n    return (\n      <div className=\"w-full p-2\">\n        <ContentEditorToggle\n          dictionary={dictionary}\n          keyPath={keyPath}\n          value={section as boolean}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"w-full p-2\">\n      Error. Format not supported.\n      {JSON.stringify(section, null, 2)}\n      {JSON.stringify(keyPath, null, 2)}\n      NodeType : {nodeType}\n    </div>\n  );\n});\n\nexport const TextEditorContainer = memo<TextEditorProps>(\n  function TextEditorContainer(props) {\n    return (\n      <Container\n        border\n        background=\"none\"\n        className=\"top-6 flex h-full flex-1 flex-col gap-6 overflow-hidden p-2 md:sticky\"\n        roundedSize=\"2xl\"\n      >\n        <TextEditor {...props} />\n      </Container>\n    );\n  }\n);\n"],"mappings":"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"}

package/dist/esm/components/ExpandCollapse/ExpandCollapse.mjs

@@ -2,7 +2,7 @@
 
 import { cn } from "../../utils/cn.mjs";
 import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
-import { useEffect, useRef, useState } from "react";
+import { useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useIntlayer } from "react-intlayer";
 
@@ -66,7 +66,7 @@ const ExpandCollapse = ({ isRollable = true, minHeight = DEFAULT_MIN_HEIGHT, chi
 	const codeContainerRef = useRef(null);
 	const { expandCollapseContent } = useIntlayer("expand-collapse");
 	const isTooBig = codeContainerHeight > minHeight;
-	useEffect(() => {
+	useLayoutEffect(() => {
 		const measure = () => {
 			if (codeContainerRef.current) setCodeContainerHeight(codeContainerRef.current.clientHeight);
 		};

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

@@ -1 +1 @@
-{"version":3,"file":"ExpandCollapse.mjs","names":[],"sources":["../../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { type FC, type ReactNode, useEffect, useRef, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\n/**\n * Props for the ExpandCollapse component\n */\nexport type ExpandCollapseProps = {\n  /** Whether the component should provide expand/collapse functionality. If false, renders children directly */\n  isRollable?: boolean;\n  /** Minimum height in pixels before showing the expand/collapse toggle */\n  minHeight?: number;\n  /** Content that may overflow and trigger the expand/collapse behavior */\n  children: ReactNode;\n  /** Additional CSS classes for styling customization */\n  className?: string;\n};\n\n/** Default minimum height threshold for triggering expand/collapse behavior */\nconst DEFAULT_MIN_HEIGHT = 700;\n\n/**\n * ExpandCollapse Component\n *\n * A smart content container that automatically provides expand/collapse functionality\n * when content exceeds a specified height threshold. Features smooth animations,\n * internationalized toggle text, and intelligent height detection.\n *\n * @example\n * ```tsx\n * <ExpandCollapse minHeight={300}>\n *   <div>Very long content that will be collapsed...</div>\n * </ExpandCollapse>\n * ```\n *\n * ## Key Features\n * - **Smart Detection**: Automatically detects when content exceeds height threshold\n * - **Smooth Animations**: Uses CSS transitions for smooth expand/collapse effects\n * - **Internationalization**: Toggle text supports multiple languages via Intlayer\n * - **Customizable Height**: Configurable minimum height threshold\n * - **Performance Optimized**: Only applies collapse behavior when necessary\n * - **Accessibility**: Proper ARIA attributes and keyboard support\n *\n * ## Behavior Logic\n * 1. **Measurement Phase**: Measures actual content height on mount\n * 2. **Comparison**: Compares content height against minHeight threshold\n * 3. **Conditional Rendering**:\n *    - If content ≤ minHeight: Renders normally without collapse functionality\n *    - If content > minHeight: Enables expand/collapse with toggle button\n * 4. **State Management**: Manages collapsed/expanded state with smooth transitions\n *\n * ## When to Use\n * - Long-form content (articles, documentation, code blocks)\n * - Lists or tables that may grow beyond comfortable viewing height\n * - User-generated content with unpredictable length\n * - FAQ sections or expandable content cards\n * - Code examples or JSON data display\n *\n * ## Accessibility Features\n * - **Keyboard Navigation**: Toggle button is focusable and keyboard accessible\n * - **Screen Reader Support**: Proper ARIA labels and state announcements\n * - **Visual Indicators**: Clear visual cues for collapsed/expanded states\n * - **Smooth Animations**: Respects user preferences for reduced motion\n *\n * ## Internationalization\n * - Supports multiple languages through Intlayer integration\n * - Toggle text automatically adapts to current locale\n * - Includes translations for \"Show all\" and \"Show less\" states\n *\n * @param props - ExpandCollapseProps\n * @returns React functional component\n */\nexport const ExpandCollapse: FC<ExpandCollapseProps> = ({\n  isRollable = true,\n  minHeight = DEFAULT_MIN_HEIGHT,\n  children,\n  className,\n}) => {\n  const [codeContainerHeight, setCodeContainerHeight] = useState(0);\n  const [isCollapsed, setIsCollapsed] = useState(true);\n  const codeContainerRef = useRef<HTMLDivElement>(null);\n  const { expandCollapseContent } = useIntlayer('expand-collapse');\n\n  const isTooBig = codeContainerHeight > minHeight;\n\n  useEffect(() => {\n    const measure = () => {\n      if (codeContainerRef.current) {\n        setCodeContainerHeight(codeContainerRef.current.clientHeight);\n      }\n    };\n\n    measure();\n\n    window.addEventListener('resize', measure);\n    return () => window.removeEventListener('resize', measure);\n  }, [children]);\n\n  if (!isRollable) {\n    return children;\n  }\n\n  if (!isTooBig) {\n    return (\n      <div className={cn('grid w-full', className)} ref={codeContainerRef}>\n        {children}\n      </div>\n    );\n  }\n\n  return (\n    <MaxHeightSmoother\n      isHidden={isCollapsed}\n      minHeight={minHeight}\n      className=\"w-full overflow-x-auto overflow-y-hidden\"\n    >\n      <div className={cn('grid w-full', className)} ref={codeContainerRef}>\n        {children}\n      </div>\n      <button\n        className={cn(\n          'absolute right-0 bottom-0 flex w-full cursor-pointer items-center justify-center rounded-t-2xl bg-gradient-to-t from-card/80 to-transparent px-3 py-0.5 text-md text-neutral-700 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur transition-all duration-300 hover:py-1 dark:text-neutral-400',\n          isCollapsed ? 'w-full' : 'w-32'\n        )}\n        type=\"button\"\n        onClick={() => setIsCollapsed((prev) => !prev)}\n      >\n        {expandCollapseContent(isCollapsed)}\n      </button>\n    </MaxHeightSmoother>\n  );\n};\n"],"mappings":";;;;;;;;;;AAsBA,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqD3B,MAAa,kBAA2C,EACtD,aAAa,MACb,YAAY,oBACZ,UACA,gBACI;CACJ,MAAM,CAAC,qBAAqB,0BAA0B,SAAS,CAAC;CAChE,MAAM,CAAC,aAAa,kBAAkB,SAAS,IAAI;CACnD,MAAM,mBAAmB,OAAuB,IAAI;CACpD,MAAM,EAAE,0BAA0B,YAAY,iBAAiB;CAE/D,MAAM,WAAW,sBAAsB;CAEvC,gBAAgB;EACd,MAAM,gBAAgB;GACpB,IAAI,iBAAiB,SACnB,uBAAuB,iBAAiB,QAAQ,YAAY;EAEhE;EAEA,QAAQ;EAER,OAAO,iBAAiB,UAAU,OAAO;EACzC,aAAa,OAAO,oBAAoB,UAAU,OAAO;CAC3D,GAAG,CAAC,QAAQ,CAAC;CAEb,IAAI,CAAC,YACH,OAAO;CAGT,IAAI,CAAC,UACH,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,eAAe,SAAS;EAAG,KAAK;EAChD;CACE;CAIT,OACE,qBAAC,mBAAD;EACE,UAAU;EACC;EACX,WAAU;YAHZ,CAKE,oBAAC,OAAD;GAAK,WAAW,GAAG,eAAe,SAAS;GAAG,KAAK;GAChD;EACE,IACL,oBAAC,UAAD;GACE,WAAW,GACT,uSACA,cAAc,WAAW,MAC3B;GACA,MAAK;GACL,eAAe,gBAAgB,SAAS,CAAC,IAAI;aAE5C,sBAAsB,WAAW;EAC5B,EACS;;AAEvB"}
+{"version":3,"file":"ExpandCollapse.mjs","names":[],"sources":["../../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport {\n  type FC,\n  type ReactNode,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\n/**\n * Props for the ExpandCollapse component\n */\nexport type ExpandCollapseProps = {\n  /** Whether the component should provide expand/collapse functionality. If false, renders children directly */\n  isRollable?: boolean;\n  /** Minimum height in pixels before showing the expand/collapse toggle */\n  minHeight?: number;\n  /** Content that may overflow and trigger the expand/collapse behavior */\n  children: ReactNode;\n  /** Additional CSS classes for styling customization */\n  className?: string;\n};\n\n/** Default minimum height threshold for triggering expand/collapse behavior */\nconst DEFAULT_MIN_HEIGHT = 700;\n\n/**\n * ExpandCollapse Component\n *\n * A smart content container that automatically provides expand/collapse functionality\n * when content exceeds a specified height threshold. Features smooth animations,\n * internationalized toggle text, and intelligent height detection.\n *\n * @example\n * ```tsx\n * <ExpandCollapse minHeight={300}>\n *   <div>Very long content that will be collapsed...</div>\n * </ExpandCollapse>\n * ```\n *\n * ## Key Features\n * - **Smart Detection**: Automatically detects when content exceeds height threshold\n * - **Smooth Animations**: Uses CSS transitions for smooth expand/collapse effects\n * - **Internationalization**: Toggle text supports multiple languages via Intlayer\n * - **Customizable Height**: Configurable minimum height threshold\n * - **Performance Optimized**: Only applies collapse behavior when necessary\n * - **Accessibility**: Proper ARIA attributes and keyboard support\n *\n * ## Behavior Logic\n * 1. **Measurement Phase**: Measures actual content height on mount\n * 2. **Comparison**: Compares content height against minHeight threshold\n * 3. **Conditional Rendering**:\n *    - If content ≤ minHeight: Renders normally without collapse functionality\n *    - If content > minHeight: Enables expand/collapse with toggle button\n * 4. **State Management**: Manages collapsed/expanded state with smooth transitions\n *\n * ## When to Use\n * - Long-form content (articles, documentation, code blocks)\n * - Lists or tables that may grow beyond comfortable viewing height\n * - User-generated content with unpredictable length\n * - FAQ sections or expandable content cards\n * - Code examples or JSON data display\n *\n * ## Accessibility Features\n * - **Keyboard Navigation**: Toggle button is focusable and keyboard accessible\n * - **Screen Reader Support**: Proper ARIA labels and state announcements\n * - **Visual Indicators**: Clear visual cues for collapsed/expanded states\n * - **Smooth Animations**: Respects user preferences for reduced motion\n *\n * ## Internationalization\n * - Supports multiple languages through Intlayer integration\n * - Toggle text automatically adapts to current locale\n * - Includes translations for \"Show all\" and \"Show less\" states\n *\n * @param props - ExpandCollapseProps\n * @returns React functional component\n */\nexport const ExpandCollapse: FC<ExpandCollapseProps> = ({\n  isRollable = true,\n  minHeight = DEFAULT_MIN_HEIGHT,\n  children,\n  className,\n}) => {\n  const [codeContainerHeight, setCodeContainerHeight] = useState(0);\n  const [isCollapsed, setIsCollapsed] = useState(true);\n  const codeContainerRef = useRef<HTMLDivElement>(null);\n  const { expandCollapseContent } = useIntlayer('expand-collapse');\n\n  const isTooBig = codeContainerHeight > minHeight;\n\n  useLayoutEffect(() => {\n    const measure = () => {\n      if (codeContainerRef.current) {\n        setCodeContainerHeight(codeContainerRef.current.clientHeight);\n      }\n    };\n\n    measure();\n\n    window.addEventListener('resize', measure);\n    return () => window.removeEventListener('resize', measure);\n  }, [children]);\n\n  if (!isRollable) {\n    return children;\n  }\n\n  if (!isTooBig) {\n    return (\n      <div className={cn('grid w-full', className)} ref={codeContainerRef}>\n        {children}\n      </div>\n    );\n  }\n\n  return (\n    <MaxHeightSmoother\n      isHidden={isCollapsed}\n      minHeight={minHeight}\n      className=\"w-full overflow-x-auto overflow-y-hidden\"\n    >\n      <div className={cn('grid w-full', className)} ref={codeContainerRef}>\n        {children}\n      </div>\n      <button\n        className={cn(\n          'absolute right-0 bottom-0 flex w-full cursor-pointer items-center justify-center rounded-t-2xl bg-gradient-to-t from-card/80 to-transparent px-3 py-0.5 text-md text-neutral-700 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur transition-all duration-300 hover:py-1 dark:text-neutral-400',\n          isCollapsed ? 'w-full' : 'w-32'\n        )}\n        type=\"button\"\n        onClick={() => setIsCollapsed((prev) => !prev)}\n      >\n        {expandCollapseContent(isCollapsed)}\n      </button>\n    </MaxHeightSmoother>\n  );\n};\n"],"mappings":";;;;;;;;;;AA4BA,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqD3B,MAAa,kBAA2C,EACtD,aAAa,MACb,YAAY,oBACZ,UACA,gBACI;CACJ,MAAM,CAAC,qBAAqB,0BAA0B,SAAS,CAAC;CAChE,MAAM,CAAC,aAAa,kBAAkB,SAAS,IAAI;CACnD,MAAM,mBAAmB,OAAuB,IAAI;CACpD,MAAM,EAAE,0BAA0B,YAAY,iBAAiB;CAE/D,MAAM,WAAW,sBAAsB;CAEvC,sBAAsB;EACpB,MAAM,gBAAgB;GACpB,IAAI,iBAAiB,SACnB,uBAAuB,iBAAiB,QAAQ,YAAY;EAEhE;EAEA,QAAQ;EAER,OAAO,iBAAiB,UAAU,OAAO;EACzC,aAAa,OAAO,oBAAoB,UAAU,OAAO;CAC3D,GAAG,CAAC,QAAQ,CAAC;CAEb,IAAI,CAAC,YACH,OAAO;CAGT,IAAI,CAAC,UACH,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,eAAe,SAAS;EAAG,KAAK;EAChD;CACE;CAIT,OACE,qBAAC,mBAAD;EACE,UAAU;EACC;EACX,WAAU;YAHZ,CAKE,oBAAC,OAAD;GAAK,WAAW,GAAG,eAAe,SAAS;GAAG,KAAK;GAChD;EACE,IACL,oBAAC,UAAD;GACE,WAAW,GACT,uSACA,cAAc,WAAW,MAC3B;GACA,MAAK;GACL,eAAe,gBAAgB,SAAS,CAAC,IAAI;aAE5C,sBAAsB,WAAW;EAC5B,EACS;;AAEvB"}

package/dist/esm/components/IDE/FileList.mjs

@@ -13,7 +13,7 @@ const FileList = ({ filePaths, ...props }) => /* @__PURE__ */ jsxs(Container, {
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "mx-2 flex items-center justify-start gap-2 p-1",
 			children: [
-				/* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-red-500" }),
+				/* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-error" }),
 				/* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-yellow-500" }),
 				/* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-green-500" })
 			]

package/dist/esm/components/IDE/FileList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileList.mjs","names":[],"sources":["../../../../src/components/IDE/FileList.tsx"],"sourcesContent":["import type { FC, HTMLAttributes } from 'react';\nimport { Container } from '../Container';\nimport { FileTree } from './FileTree';\n\nexport type FileListProps = {\n  filePaths: string[];\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const FileList: FC<FileListProps> = ({ filePaths, ...props }) => (\n  <Container\n    className=\"flex size-full flex-col justify-start overflow-auto shadow-lg\"\n    roundedSize=\"3xl\"\n    transparency=\"none\"\n    {...props}\n  >\n    <div className=\"flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-neutral text-xs dark:bg-neutral-950\">\n      <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n        <div className=\"size-3 rounded-full bg-red-500\" />\n        <div className=\"size-3 rounded-full bg-yellow-500\" />\n        <div className=\"size-3 rounded-full bg-green-500\" />\n      </div>\n    </div>\n    <div className=\"relative flex size-full flex-1 flex-row justify-start shadow-lg\">\n      <div className=\"absolute top-0 left-0 size-full\">\n        <div className=\"flex size-full\">\n          <FileTree filesPaths={filePaths} />\n        </div>\n      </div>\n    </div>\n  </Container>\n);\n"],"mappings":";;;;;AAQA,MAAa,YAA+B,EAAE,WAAW,GAAG,YAC1D,qBAAC,WAAD;CACE,WAAU;CACV,aAAY;CACZ,cAAa;CACb,GAAI;WAJN,CAME,oBAAC,OAAD;EAAK,WAAU;YACb,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,oBAAC,OAAD,EAAK,WAAU,iCAAkC;IACjD,oBAAC,OAAD,EAAK,WAAU,oCAAqC;IACpD,oBAAC,OAAD,EAAK,WAAU,mCAAoC;GAChD;;CACF,IACL,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,UAAD,EAAU,YAAY,UAAY;GAC/B;EACF;CACF,EACI"}
+{"version":3,"file":"FileList.mjs","names":[],"sources":["../../../../src/components/IDE/FileList.tsx"],"sourcesContent":["import type { FC, HTMLAttributes } from 'react';\nimport { Container } from '../Container';\nimport { FileTree } from './FileTree';\n\nexport type FileListProps = {\n  filePaths: string[];\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const FileList: FC<FileListProps> = ({ filePaths, ...props }) => (\n  <Container\n    className=\"flex size-full flex-col justify-start overflow-auto shadow-lg\"\n    roundedSize=\"3xl\"\n    transparency=\"none\"\n    {...props}\n  >\n    <div className=\"flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-neutral text-xs dark:bg-neutral-950\">\n      <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n        <div className=\"size-3 rounded-full bg-error\" />\n        <div className=\"size-3 rounded-full bg-yellow-500\" />\n        <div className=\"size-3 rounded-full bg-green-500\" />\n      </div>\n    </div>\n    <div className=\"relative flex size-full flex-1 flex-row justify-start shadow-lg\">\n      <div className=\"absolute top-0 left-0 size-full\">\n        <div className=\"flex size-full\">\n          <FileTree filesPaths={filePaths} />\n        </div>\n      </div>\n    </div>\n  </Container>\n);\n"],"mappings":";;;;;AAQA,MAAa,YAA+B,EAAE,WAAW,GAAG,YAC1D,qBAAC,WAAD;CACE,WAAU;CACV,aAAY;CACZ,cAAa;CACb,GAAI;WAJN,CAME,oBAAC,OAAD;EAAK,WAAU;YACb,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,oBAAC,OAAD,EAAK,WAAU,+BAAgC;IAC/C,oBAAC,OAAD,EAAK,WAAU,oCAAqC;IACpD,oBAAC,OAAD,EAAK,WAAU,mCAAoC;GAChD;;CACF,IACL,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,UAAD,EAAU,YAAY,UAAY;GAC/B;EACF;CACF,EACI"}

package/dist/esm/components/IDE/IDE.mjs

@@ -41,7 +41,7 @@ const IDE = ({ pages: initialPages, isDarkMode, className, activeTab: defaultAct
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "mx-2 flex items-center justify-start gap-2 p-1",
 				children: [
-					/* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-red-500" }),
+					/* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-error" }),
 					/* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-yellow-500" }),
 					/* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-green-500" })
 				]

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

@@ -1 +1 @@
-{"version":3,"file":"IDE.mjs","names":[],"sources":["../../../../src/components/IDE/IDE.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { type FC, type HTMLAttributes, useEffect, useState } from 'react';\nimport { Container } from '../Container';\nimport { WithResizer } from '../WithResizer';\nimport { FileTree } from './FileTree';\nimport { MarkdownRenderer } from './MarkDownRender';\n\nexport type IDEProps = {\n  pages: {\n    path: string;\n    content: string;\n    isOpen?: boolean;\n  }[];\n  isDarkMode?: boolean;\n  activeTab?: number;\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const IDE: FC<IDEProps> = ({\n  pages: initialPages,\n  isDarkMode,\n  className,\n  activeTab: defaultActiveTab,\n  ...props\n}) => {\n  const [pages, setPages] = useState(initialPages);\n  const tabs = pages.filter(({ isOpen }) => isOpen);\n\n  const firstTabIndex = tabs.findIndex(({ isOpen }) => isOpen);\n  const [activeTab, setActiveTab] = useState(defaultActiveTab ?? firstTabIndex);\n\n  useEffect(() => {\n    setActiveTab(defaultActiveTab ?? firstTabIndex);\n  }, [initialPages, defaultActiveTab]);\n\n  const { content, path } = pages[activeTab] ?? {};\n  const filePaths = initialPages.map(({ path: title }) => title);\n\n  const handleClickFile = (title: string) => {\n    const page = pages.find(({ path: tabTitle }) => tabTitle === title);\n    if (!page) return;\n\n    const newPages = pages.map((page) => {\n      if (page.path === title) {\n        return { ...page, isOpen: true };\n      }\n      return page;\n    });\n\n    setPages(newPages);\n\n    const newPageIndex = newPages.findIndex(\n      ({ path: tabTitle }) => tabTitle === title\n    );\n\n    setActiveTab(newPageIndex);\n  };\n\n  return (\n    <Container\n      className={cn(\n        'flex size-full flex-col justify-start overflow-hidden shadow-lg',\n        className\n      )}\n      roundedSize=\"3xl\"\n      transparency=\"none\"\n      {...props}\n    >\n      <div className=\"flex w-auto flex-row items-center justify-start gap-1 bg-neutral-200 text-neutral text-xs dark:bg-neutral-950\">\n        <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n          <div className=\"size-3 rounded-full bg-red-500\" />\n          <div className=\"size-3 rounded-full bg-yellow-500\" />\n          <div className=\"size-3 rounded-full bg-green-500\" />\n        </div>\n        <div className=\"flex size-full overflow-y-auto\">\n          {tabs.map(({ path }, index) => {\n            const fullPath = path.split('/');\n            const title = fullPath[fullPath.length - 1];\n            const isActive = index === activeTab;\n\n            return (\n              <button\n                className={cn(\n                  'flex h-8 min-w-20 max-w-30 items-center justify-start truncate text-nowrap px-3 py-1 transition',\n                  isActive\n                    ? 'bg-card'\n                    : 'cursor-pointer bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-950'\n                )}\n                key={title}\n                onClick={() => setActiveTab(index)}\n              >\n                {title}\n              </button>\n            );\n          })}\n        </div>\n      </div>\n      <div className=\"relative flex size-full flex-1 flex-row justify-start\">\n        <div className=\"absolute top-0 left-0 size-full\">\n          <div className=\"flex size-full\">\n            <WithResizer initialWidth={150}>\n              <div className=\"max-h-full flex-1 overflow-y-auto\">\n                <FileTree\n                  filesPaths={filePaths}\n                  activeFile={path}\n                  onClickFile={handleClickFile}\n                />\n              </div>\n            </WithResizer>\n\n            <div className=\"size-full flex-1 overflow-auto pt-2 text-xs\">\n              <MarkdownRenderer isDarkMode={isDarkMode}>\n                {content}\n              </MarkdownRenderer>\n            </div>\n          </div>\n        </div>\n      </div>\n    </Container>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAmBA,MAAa,OAAqB,EAChC,OAAO,cACP,YACA,WACA,WAAW,kBACX,GAAG,YACC;CACJ,MAAM,CAAC,OAAO,YAAY,SAAS,YAAY;CAC/C,MAAM,OAAO,MAAM,QAAQ,EAAE,aAAa,MAAM;CAEhD,MAAM,gBAAgB,KAAK,WAAW,EAAE,aAAa,MAAM;CAC3D,MAAM,CAAC,WAAW,gBAAgB,SAAS,oBAAoB,aAAa;CAE5E,gBAAgB;EACd,aAAa,oBAAoB,aAAa;CAChD,GAAG,CAAC,cAAc,gBAAgB,CAAC;CAEnC,MAAM,EAAE,SAAS,SAAS,MAAM,cAAc,CAAC;CAC/C,MAAM,YAAY,aAAa,KAAK,EAAE,MAAM,YAAY,KAAK;CAE7D,MAAM,mBAAmB,UAAkB;EAEzC,IAAI,CADS,MAAM,MAAM,EAAE,MAAM,eAAe,aAAa,KACrD,GAAG;EAEX,MAAM,WAAW,MAAM,KAAK,SAAS;GACnC,IAAI,KAAK,SAAS,OAChB,OAAO;IAAE,GAAG;IAAM,QAAQ;GAAK;GAEjC,OAAO;EACT,CAAC;EAED,SAAS,QAAQ;EAMjB,aAJqB,SAAS,WAC3B,EAAE,MAAM,eAAe,aAAa,KAGf,CAAC;CAC3B;CAEA,OACE,qBAAC,WAAD;EACE,WAAW,GACT,mEACA,SACF;EACA,aAAY;EACZ,cAAa;EACb,GAAI;YAPN,CASE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,qBAAC,OAAD;IAAK,WAAU;cAAf;KACE,oBAAC,OAAD,EAAK,WAAU,iCAAkC;KACjD,oBAAC,OAAD,EAAK,WAAU,oCAAqC;KACpD,oBAAC,OAAD,EAAK,WAAU,mCAAoC;IAChD;OACL,oBAAC,OAAD;IAAK,WAAU;cACZ,KAAK,KAAK,EAAE,QAAQ,UAAU;KAC7B,MAAM,WAAW,KAAK,MAAM,GAAG;KAC/B,MAAM,QAAQ,SAAS,SAAS,SAAS;KAGzC,OACE,oBAAC,UAAD;MACE,WAAW,GACT,mGALW,UAAU,YAOjB,YACA,wEACN;MAEA,eAAe,aAAa,KAAK;gBAEhC;KACK,GAJD,KAIC;IAEZ,CAAC;GACE,EACF;MACL,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,OAAD;IAAK,WAAU;cACb,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,aAAD;MAAa,cAAc;gBACzB,oBAAC,OAAD;OAAK,WAAU;iBACb,oBAAC,UAAD;QACE,YAAY;QACZ,YAAY;QACZ,aAAa;OACd;MACE;KACM,IAEb,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,kBAAD;OAA8B;iBAC3B;MACe;KACf,EACF;;GACF;EACF,EACI;;AAEf"}
+{"version":3,"file":"IDE.mjs","names":[],"sources":["../../../../src/components/IDE/IDE.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { type FC, type HTMLAttributes, useEffect, useState } from 'react';\nimport { Container } from '../Container';\nimport { WithResizer } from '../WithResizer';\nimport { FileTree } from './FileTree';\nimport { MarkdownRenderer } from './MarkDownRender';\n\nexport type IDEProps = {\n  pages: {\n    path: string;\n    content: string;\n    isOpen?: boolean;\n  }[];\n  isDarkMode?: boolean;\n  activeTab?: number;\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const IDE: FC<IDEProps> = ({\n  pages: initialPages,\n  isDarkMode,\n  className,\n  activeTab: defaultActiveTab,\n  ...props\n}) => {\n  const [pages, setPages] = useState(initialPages);\n  const tabs = pages.filter(({ isOpen }) => isOpen);\n\n  const firstTabIndex = tabs.findIndex(({ isOpen }) => isOpen);\n  const [activeTab, setActiveTab] = useState(defaultActiveTab ?? firstTabIndex);\n\n  useEffect(() => {\n    setActiveTab(defaultActiveTab ?? firstTabIndex);\n  }, [initialPages, defaultActiveTab]);\n\n  const { content, path } = pages[activeTab] ?? {};\n  const filePaths = initialPages.map(({ path: title }) => title);\n\n  const handleClickFile = (title: string) => {\n    const page = pages.find(({ path: tabTitle }) => tabTitle === title);\n    if (!page) return;\n\n    const newPages = pages.map((page) => {\n      if (page.path === title) {\n        return { ...page, isOpen: true };\n      }\n      return page;\n    });\n\n    setPages(newPages);\n\n    const newPageIndex = newPages.findIndex(\n      ({ path: tabTitle }) => tabTitle === title\n    );\n\n    setActiveTab(newPageIndex);\n  };\n\n  return (\n    <Container\n      className={cn(\n        'flex size-full flex-col justify-start overflow-hidden shadow-lg',\n        className\n      )}\n      roundedSize=\"3xl\"\n      transparency=\"none\"\n      {...props}\n    >\n      <div className=\"flex w-auto flex-row items-center justify-start gap-1 bg-neutral-200 text-neutral text-xs dark:bg-neutral-950\">\n        <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n          <div className=\"size-3 rounded-full bg-error\" />\n          <div className=\"size-3 rounded-full bg-yellow-500\" />\n          <div className=\"size-3 rounded-full bg-green-500\" />\n        </div>\n        <div className=\"flex size-full overflow-y-auto\">\n          {tabs.map(({ path }, index) => {\n            const fullPath = path.split('/');\n            const title = fullPath[fullPath.length - 1];\n            const isActive = index === activeTab;\n\n            return (\n              <button\n                className={cn(\n                  'flex h-8 min-w-20 max-w-30 items-center justify-start truncate text-nowrap px-3 py-1 transition',\n                  isActive\n                    ? 'bg-card'\n                    : 'cursor-pointer bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-950'\n                )}\n                key={title}\n                onClick={() => setActiveTab(index)}\n              >\n                {title}\n              </button>\n            );\n          })}\n        </div>\n      </div>\n      <div className=\"relative flex size-full flex-1 flex-row justify-start\">\n        <div className=\"absolute top-0 left-0 size-full\">\n          <div className=\"flex size-full\">\n            <WithResizer initialWidth={150}>\n              <div className=\"max-h-full flex-1 overflow-y-auto\">\n                <FileTree\n                  filesPaths={filePaths}\n                  activeFile={path}\n                  onClickFile={handleClickFile}\n                />\n              </div>\n            </WithResizer>\n\n            <div className=\"size-full flex-1 overflow-auto pt-2 text-xs\">\n              <MarkdownRenderer isDarkMode={isDarkMode}>\n                {content}\n              </MarkdownRenderer>\n            </div>\n          </div>\n        </div>\n      </div>\n    </Container>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAmBA,MAAa,OAAqB,EAChC,OAAO,cACP,YACA,WACA,WAAW,kBACX,GAAG,YACC;CACJ,MAAM,CAAC,OAAO,YAAY,SAAS,YAAY;CAC/C,MAAM,OAAO,MAAM,QAAQ,EAAE,aAAa,MAAM;CAEhD,MAAM,gBAAgB,KAAK,WAAW,EAAE,aAAa,MAAM;CAC3D,MAAM,CAAC,WAAW,gBAAgB,SAAS,oBAAoB,aAAa;CAE5E,gBAAgB;EACd,aAAa,oBAAoB,aAAa;CAChD,GAAG,CAAC,cAAc,gBAAgB,CAAC;CAEnC,MAAM,EAAE,SAAS,SAAS,MAAM,cAAc,CAAC;CAC/C,MAAM,YAAY,aAAa,KAAK,EAAE,MAAM,YAAY,KAAK;CAE7D,MAAM,mBAAmB,UAAkB;EAEzC,IAAI,CADS,MAAM,MAAM,EAAE,MAAM,eAAe,aAAa,KACrD,GAAG;EAEX,MAAM,WAAW,MAAM,KAAK,SAAS;GACnC,IAAI,KAAK,SAAS,OAChB,OAAO;IAAE,GAAG;IAAM,QAAQ;GAAK;GAEjC,OAAO;EACT,CAAC;EAED,SAAS,QAAQ;EAMjB,aAJqB,SAAS,WAC3B,EAAE,MAAM,eAAe,aAAa,KAGf,CAAC;CAC3B;CAEA,OACE,qBAAC,WAAD;EACE,WAAW,GACT,mEACA,SACF;EACA,aAAY;EACZ,cAAa;EACb,GAAI;YAPN,CASE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,qBAAC,OAAD;IAAK,WAAU;cAAf;KACE,oBAAC,OAAD,EAAK,WAAU,+BAAgC;KAC/C,oBAAC,OAAD,EAAK,WAAU,oCAAqC;KACpD,oBAAC,OAAD,EAAK,WAAU,mCAAoC;IAChD;OACL,oBAAC,OAAD;IAAK,WAAU;cACZ,KAAK,KAAK,EAAE,QAAQ,UAAU;KAC7B,MAAM,WAAW,KAAK,MAAM,GAAG;KAC/B,MAAM,QAAQ,SAAS,SAAS,SAAS;KAGzC,OACE,oBAAC,UAAD;MACE,WAAW,GACT,mGALW,UAAU,YAOjB,YACA,wEACN;MAEA,eAAe,aAAa,KAAK;gBAEhC;KACK,GAJD,KAIC;IAEZ,CAAC;GACE,EACF;MACL,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,OAAD;IAAK,WAAU;cACb,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,aAAD;MAAa,cAAc;gBACzB,oBAAC,OAAD;OAAK,WAAU;iBACb,oBAAC,UAAD;QACE,YAAY;QACZ,YAAY;QACZ,aAAa;OACd;MACE;KACM,IAEb,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,kBAAD;OAA8B;iBAC3B;MACe;KACf,EACF;;GACF;EACF,EACI;;AAEf"}

package/dist/esm/components/Input/Checkbox.mjs

@@ -46,7 +46,7 @@ const checkboxVariants = cva([
 	},
 	defaultVariants: {
 		variant: "default",
-		color: "primary",
+		color: "text",
 		validationStyleEnabled: "disabled",
 		size: "md"
 	}