@intlayer/design-system 8.1.6 → 8.1.8

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

@@ -1,2 +1,2 @@
-import{cn as e}from"../../utils/cn.mjs";import{cva as t}from"class-variance-authority";import{jsx as n,jsxs as r}from"react/jsx-runtime";let i=function(e){return e.PRIMARY=`primary`,e.SECONDARY=`secondary`,e.DESTRUCTIVE=`destructive`,e.SUCCESS=`success`,e.ERROR=`error`,e.NEUTRAL=`neutral`,e.LIGHT=`light`,e.DARK=`dark`,e.TEXT=`text`,e.CUSTOM=`custom`,e}({}),a=function(e){return e.DEFAULT=`default`,e.NONE=`none`,e.OUTLINE=`outline`,e.HOVERABLE=`hoverable`,e}({}),o=function(e){return e.SMALL=`sm`,e.MEDIUM=`md`,e.LARGE=`lg`,e}({});const s=t(`inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold text-xs transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2`,{variants:{color:{[i.PRIMARY]:`border-primary bg-primary text-primary hover:bg-primary-500`,[i.SECONDARY]:`border-secondary bg-secondary text-secondary hover:bg-secondary-300`,[i.DESTRUCTIVE]:`border-destructive bg-destructive text-destructive hover:bg-destructive-500`,[i.SUCCESS]:`border-success bg-success text-success hover:bg-success-500`,[i.ERROR]:`border-error bg-error text-error hover:bg-error-500`,[i.NEUTRAL]:`border-neutral bg-neutral text-neutral hover:bg-neutral-600`,[i.LIGHT]:`border-white bg-white text-white hover:bg-neutral-500`,[i.DARK]:`border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900`,[i.TEXT]:`border-text bg-text text-text hover:opacity-80`,[i.CUSTOM]:``},variant:{[a.DEFAULT]:`rounded-lg text-text-opposite`,[a.NONE]:`border-none bg-opacity-0 text-inherit hover:bg-opacity-0`,[a.OUTLINE]:`rounded-lg border-[1.3px] bg-opacity-0 hover:bg-opacity-30`,[a.HOVERABLE]:`rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10`},size:{[o.SMALL]:`px-2 py-0.5 text-xs`,[o.MEDIUM]:`px-2.5 py-0.5 text-xs`,[o.LARGE]:`px-3 py-1 text-sm`}},defaultVariants:{variant:a.DEFAULT,color:i.PRIMARY,size:o.MEDIUM}}),c=({className:t,variant:c=a.DEFAULT,color:l=i.PRIMARY,size:u=o.MEDIUM,children:d,clickable:f=!1,dismissible:p=!1,onClick:m,onDismiss:h,role:g,tabIndex:_,"aria-label":v,...y})=>{let b=f?`button`:`span`,x=e=>{f&&m&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),m(e))},S=e=>{e.stopPropagation(),h?.()};return r(b,{className:e(s({variant:c,color:l,size:u}),f&&`cursor-pointer hover:opacity-80 focus-visible:ring-2 focus-visible:ring-offset-2`,p&&`pr-1`,t),onClick:f?m:void 0,onKeyDown:f?x:void 0,role:g||(f?`button`:`status`),tabIndex:f?_??0:_,"aria-label":v||(f?`${d} button`:void 0),...y,children:[d,p&&n(`button`,{type:`button`,className:`ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-black/10 focus:outline-none focus:ring-1 focus:ring-offset-1`,onClick:S,"aria-label":`Remove ${d} badge`,children:r(`svg`,{className:`size-3`,viewBox:`0 0 20 20`,fill:`currentColor`,"aria-label":`Remove badge`,children:[n(`title`,{children:`Remove badge`}),n(`path`,{fillRule:`evenodd`,d:`M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z`,clipRule:`evenodd`})]})})]})};export{c as Badge,i as BadgeColor,o as BadgeSize,a as BadgeVariant,s as badgeVariants};
+import{cn as e}from"../../utils/cn.mjs";import{cva as t}from"class-variance-authority";import{jsx as n,jsxs as r}from"react/jsx-runtime";let i=function(e){return e.PRIMARY=`primary`,e.SECONDARY=`secondary`,e.DESTRUCTIVE=`destructive`,e.SUCCESS=`success`,e.ERROR=`error`,e.NEUTRAL=`neutral`,e.LIGHT=`light`,e.DARK=`dark`,e.TEXT=`text`,e.CUSTOM=`custom`,e}({}),a=function(e){return e.DEFAULT=`default`,e.NONE=`none`,e.OUTLINE=`outline`,e.HOVERABLE=`hoverable`,e}({}),o=function(e){return e.SMALL=`sm`,e.MEDIUM=`md`,e.LARGE=`lg`,e}({});const s=t(`inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold text-xs transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2`,{variants:{color:{[`${i.PRIMARY}`]:`border-primary bg-primary text-primary hover:bg-primary-500`,[`${i.SECONDARY}`]:`border-secondary bg-secondary text-secondary hover:bg-secondary-300`,[`${i.DESTRUCTIVE}`]:`border-destructive bg-destructive text-destructive hover:bg-destructive-500`,[`${i.SUCCESS}`]:`border-success bg-success text-success hover:bg-success-500`,[`${i.ERROR}`]:`border-error bg-error text-error hover:bg-error-500`,[`${i.NEUTRAL}`]:`border-neutral bg-neutral text-neutral hover:bg-neutral-600`,[`${i.LIGHT}`]:`border-white bg-white text-white hover:bg-neutral-500`,[`${i.DARK}`]:`border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900`,[`${i.TEXT}`]:`border-text bg-text text-text hover:opacity-80`,[`${i.CUSTOM}`]:``},variant:{[`${a.DEFAULT}`]:`rounded-lg text-text-opposite`,[`${a.NONE}`]:`border-none bg-opacity-0 text-inherit hover:bg-opacity-0`,[`${a.OUTLINE}`]:`rounded-lg border-[1.3px] bg-opacity-0 hover:bg-opacity-30`,[`${a.HOVERABLE}`]:`rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10`},size:{[`${o.SMALL}`]:`px-2 py-0.5 text-xs`,[`${o.MEDIUM}`]:`px-2.5 py-0.5 text-xs`,[`${o.LARGE}`]:`px-3 py-1 text-sm`}},defaultVariants:{variant:a.DEFAULT,color:i.PRIMARY,size:o.MEDIUM}}),c=({className:t,variant:c=a.DEFAULT,color:l=i.PRIMARY,size:u=o.MEDIUM,children:d,clickable:f=!1,dismissible:p=!1,onClick:m,onDismiss:h,role:g,tabIndex:_,"aria-label":v,...y})=>{let b=f?`button`:`span`,x=e=>{f&&m&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),m(e))},S=e=>{e.stopPropagation(),h?.()};return r(b,{className:e(s({variant:c,color:l,size:u}),f&&`cursor-pointer hover:opacity-80 focus-visible:ring-2 focus-visible:ring-offset-2`,p&&`pr-1`,t),onClick:f?m:void 0,onKeyDown:f?x:void 0,role:g||(f?`button`:`status`),tabIndex:f?_??0:_,"aria-label":v||(f?`${d} button`:void 0),...y,children:[d,p&&n(`button`,{type:`button`,className:`ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-black/10 focus:outline-none focus:ring-1 focus:ring-offset-1`,onClick:S,"aria-label":`Remove ${d} badge`,children:r(`svg`,{className:`size-3`,viewBox:`0 0 20 20`,fill:`currentColor`,"aria-label":`Remove badge`,children:[n(`title`,{children:`Remove badge`}),n(`path`,{fillRule:`evenodd`,d:`M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z`,clipRule:`evenodd`})]})})]})};export{c as Badge,i as BadgeColor,o as BadgeSize,a as BadgeVariant,s as badgeVariants};
 //# sourceMappingURL=index.mjs.map

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

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

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

@@ -1,2 +1,2 @@
-"use client";import{cn as e}from"../../utils/cn.mjs";import{Button as t,ButtonVariant as n}from"../Button/Button.mjs";import{Link as r,LinkColor as i}from"../Link/Link.mjs";import{ChevronRightIcon as a}from"lucide-react";import{Fragment as o,createElement as s}from"react";import{cva as c}from"class-variance-authority";import{Fragment as l,jsx as u,jsxs as d}from"react/jsx-runtime";import{getIntlayer as f}from"@intlayer/core/interpreter";import{useIntlayer as p}from"react-intlayer";const m=e=>e&&{[i.PRIMARY]:`text-primary`,[i.SECONDARY]:`text-secondary`,[i.DESTRUCTIVE]:`text-destructive`,[i.NEUTRAL]:`text-neutral`,[i.LIGHT]:`text-white`,[i.DARK]:`text-neutral-800`,[i.TEXT]:`text-text`,[i.TEXT_INVERSE]:`text-text-opposite`,[i.ERROR]:`text-error`,[i.SUCCESS]:`text-success`,[i.CUSTOM]:``}[e]||``,h=c(`flex flex-row flex-wrap items-center text-sm`,{variants:{size:{small:`gap-1 text-xs`,medium:`gap-2 text-sm`,large:`gap-3 text-base`},spacing:{compact:`gap-1`,normal:`gap-2`,loose:`gap-4`}},defaultVariants:{size:`medium`,spacing:`normal`}}),g=({href:e,lang:t,children:n,onClick:i,color:a,position:o,locale:s,className:c,...p})=>{let m=f(`breadcrumb`).linkLabel;return d(l,{children:[u(r,{href:e,locale:s,color:a,onClick:i,itemProp:`item`,isExternalLink:!1,itemScope:!0,itemType:`https://schema.org/WebPage`,...p,label:`${m} ${n}`,itemID:e,size:`sm`,children:u(`span`,{itemProp:`name`,children:n})}),u(`meta`,{itemProp:`position`,content:o.toString()})]})},_=({children:e,onClick:r,color:i,position:a,className:o,...s})=>{let{linkLabel:c}=p(`breadcrumb`);return d(l,{children:[u(t,{onClick:r,variant:n.LINK,label:`${c} ${e}`,color:i,itemProp:`item`,...s,children:u(`span`,{itemProp:`name`,children:e})}),u(`meta`,{itemProp:`position`,content:a.toString()})]})},v=({children:t,position:n,className:r,...i})=>d(`span`,{itemProp:`item`,className:e(`inline-flex items-center`,`font-medium text-neutral-700`,`transition-colors duration-200`,r),children:[u(`span`,{itemProp:`name`,...i,children:t}),u(`meta`,{itemProp:`position`,content:n.toString()})]}),y=({links:t,className:n,color:r=i.TEXT,locale:c,elementType:l=`page`,separator:f=u(a,{size:10}),ariaLabel:p=`breadcrumb`,includeStructuredData:y=!0,maxItems:b,size:x,spacing:S,...C})=>{let w=b&&t.length>b?[...t.slice(0,1),`...`,...t.slice(-(b-2))]:t;return u(`nav`,{"aria-label":p,children:u(`ol`,{className:e(h({size:x,spacing:S}),n),...y&&{itemScope:!0,itemType:`http://schema.org/BreadcrumbList`},...C,children:w.map((t,n)=>{let i=n===w.length-1,a=typeof t==`object`&&typeof t.href==`string`,p=typeof t==`object`&&typeof t.onClick==`function`,h=n===w.length-1,b=h?l:void 0,x=t===`...`,S=t.text??t,C=m(r);if(x)return d(o,{children:[u(`li`,{className:`flex items-center`,"aria-hidden":`true`,children:u(`span`,{className:`text-neutral-500`,children:`…`})}),!i&&u(`li`,{"aria-hidden":`true`,className:`flex items-center`,children:u(`span`,{className:e(C),children:f})})]},`truncated-${S}`);let T=u(v,{position:n+1,"aria-current":b,className:e(`transition-colors duration-200`,h&&`text-neutral-900`),children:S},S);a?T=u(g,{href:t.href,color:r,position:n+1,locale:c,"aria-current":b,className:e(h&&`cursor-default text-neutral-900`),children:S},S):p&&(T=u(_,{onClick:t.onClick,color:r,position:n+1,"aria-current":b,className:e(h&&`cursor-default text-neutral-900`),children:S},S));let E=s(`li`,{...y&&{itemProp:`itemListElement`,itemScope:!0,itemType:`https://schema.org/ListItem`},key:S,className:`flex items-center`},T);return i?E:d(o,{children:[E,u(`li`,{"aria-hidden":`true`,className:`flex items-center`,children:u(`span`,{className:e(C),children:f})})]},S)})})})};export{y as Breadcrumb};
+"use client";import{cn as e}from"../../utils/cn.mjs";import{Button as t,ButtonVariant as n}from"../Button/Button.mjs";import{Link as r,LinkColor as i}from"../Link/Link.mjs";import{ChevronRightIcon as a}from"lucide-react";import{Fragment as o,createElement as s}from"react";import{cva as c}from"class-variance-authority";import{Fragment as l,jsx as u,jsxs as d}from"react/jsx-runtime";import{getIntlayer as f}from"intlayer";import{useIntlayer as p}from"react-intlayer";const m=e=>e&&{[i.PRIMARY]:`text-primary`,[i.SECONDARY]:`text-secondary`,[i.DESTRUCTIVE]:`text-destructive`,[i.NEUTRAL]:`text-neutral`,[i.LIGHT]:`text-white`,[i.DARK]:`text-neutral-800`,[i.TEXT]:`text-text`,[i.TEXT_INVERSE]:`text-text-opposite`,[i.ERROR]:`text-error`,[i.SUCCESS]:`text-success`,[i.CUSTOM]:``}[e]||``,h=c(`flex flex-row flex-wrap items-center text-sm`,{variants:{size:{small:`gap-1 text-xs`,medium:`gap-2 text-sm`,large:`gap-3 text-base`},spacing:{compact:`gap-1`,normal:`gap-2`,loose:`gap-4`}},defaultVariants:{size:`medium`,spacing:`normal`}}),g=({href:e,lang:t,children:n,onClick:i,color:a,position:o,locale:s,className:c,...p})=>{let m=f(`breadcrumb`).linkLabel;return d(l,{children:[u(r,{href:e,locale:s,color:a,onClick:i,itemProp:`item`,isExternalLink:!1,itemScope:!0,itemType:`https://schema.org/WebPage`,...p,label:`${m} ${n}`,itemID:e,size:`sm`,children:u(`span`,{itemProp:`name`,children:n})}),u(`meta`,{itemProp:`position`,content:o.toString()})]})},_=({children:e,onClick:r,color:i,position:a,className:o,...s})=>{let{linkLabel:c}=p(`breadcrumb`);return d(l,{children:[u(t,{onClick:r,variant:n.LINK,label:`${c} ${e}`,color:i,itemProp:`item`,...s,children:u(`span`,{itemProp:`name`,children:e})}),u(`meta`,{itemProp:`position`,content:a.toString()})]})},v=({children:t,position:n,className:r,...i})=>d(`span`,{itemProp:`item`,className:e(`inline-flex items-center`,`font-medium text-neutral-700`,`transition-colors duration-200`,r),children:[u(`span`,{itemProp:`name`,...i,children:t}),u(`meta`,{itemProp:`position`,content:n.toString()})]}),y=({links:t,className:n,color:r=i.TEXT,locale:c,elementType:l=`page`,separator:f=u(a,{size:10}),ariaLabel:p=`breadcrumb`,includeStructuredData:y=!0,maxItems:b,size:x,spacing:S,...C})=>{let w=b&&t.length>b?[...t.slice(0,1),`...`,...t.slice(-(b-2))]:t;return u(`nav`,{"aria-label":p,children:u(`ol`,{className:e(h({size:x,spacing:S}),n),...y&&{itemScope:!0,itemType:`http://schema.org/BreadcrumbList`},...C,children:w.map((t,n)=>{let i=n===w.length-1,a=typeof t==`object`&&typeof t.href==`string`,p=typeof t==`object`&&typeof t.onClick==`function`,h=n===w.length-1,b=h?l:void 0,x=t===`...`,S=t.text??t,C=m(r);if(x)return d(o,{children:[u(`li`,{className:`flex items-center`,"aria-hidden":`true`,children:u(`span`,{className:`text-neutral-500`,children:`…`})}),!i&&u(`li`,{"aria-hidden":`true`,className:`flex items-center`,children:u(`span`,{className:e(C),children:f})})]},`truncated-${S}`);let T=u(v,{position:n+1,"aria-current":b,className:e(`transition-colors duration-200`,h&&`text-neutral-900`),children:S},S);a?T=u(g,{href:t.href,color:r,position:n+1,locale:c,"aria-current":b,className:e(h&&`cursor-default text-neutral-900`),children:S},S):p&&(T=u(_,{onClick:t.onClick,color:r,position:n+1,"aria-current":b,className:e(h&&`cursor-default text-neutral-900`),children:S},S));let E=s(`li`,{...y&&{itemProp:`itemListElement`,itemScope:!0,itemType:`https://schema.org/ListItem`},key:S,className:`flex items-center`},T);return i?E:d(o,{children:[E,u(`li`,{"aria-hidden":`true`,className:`flex items-center`,children:u(`span`,{className:e(C),children:f})})]},S)})})})};export{y as Breadcrumb};
 //# sourceMappingURL=index.mjs.map

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

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

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

@@ -1,4 +1,4 @@
-"use client";import{cn as e}from"../../utils/cn.mjs";import{Button as t,ButtonColor as n,ButtonSize as r,ButtonVariant as i}from"../Button/Button.mjs";import{KeyboardShortcut as a}from"../KeyboardShortcut/KeyboardShortcut.mjs";import{Popover as o}from"../Popover/dynamic.mjs";import{ChevronLeft as s,ChevronRight as c}from"lucide-react";import{Children as l,createContext as u,isValidElement as d,useContext as f,useEffect as p,useRef as m,useState as h}from"react";import{jsx as g,jsxs as _}from"react/jsx-runtime";import{useIntlayer as v}from"react-intlayer";const y=u(null),b=()=>{let e=f(y);if(!e)throw Error(`useCarousel must be used within a Carousel`);return e},x=(e,t)=>{switch(Math.abs(e-t)){case 0:return`opacity-100 z-40`;case 1:return`opacity-75 z-30 cursor-pointer`;case 2:return`opacity-50 z-20 pointer-events-none`;default:return`opacity-0 z-10 pointer-events-none`}},S=(e,t)=>{switch(Math.abs(e-t)){case 0:return 1;case 1:return .9;case 2:return .8;default:return .7}},C=(e,t)=>`${(e-t)*30}vw`,w=({children:t,className:n,...r})=>g(`div`,{className:e(`h-full w-full`,n),...r,children:t}),T=({className:l,disableKeyboardShortcuts:u=!1,...d})=>{let{selectedIndex:f,setSelectedIndex:p,totalItems:m,handlePrev:h,handleNext:y}=b(),{goToSlide:x,previousSlide:S,nextSlide:C}=v(`carousel`);return m<=1?null:_(`div`,{className:e(`absolute bottom-4 left-1/2 z-50 flex -translate-x-1/2 flex-row items-center gap-2`,l),...d,children:[_(o,{identifier:`carousel-prev`,children:[g(t,{variant:i.HOVERABLE,color:n.NEUTRAL,label:S.value,roundedSize:`full`,onClick:e=>{e.stopPropagation(),h()},Icon:s,size:r.ICON_MD,disabled:f===0}),g(o.Detail,{identifier:`carousel-prev`,children:_(`div`,{className:`flex items-center gap-2 p-2`,children:[g(`span`,{className:`whitespace-nowrap text-neutral text-xs`,children:S.value}),g(a,{shortcut:`ArrowLeft`,disabled:u,size:`sm`,onTriggered:h})]})})]}),Array.from({length:m}).map((t,n)=>{let r=n===f;return g(`button`,{type:`button`,onClick:e=>{e.stopPropagation(),p(n)},"aria-label":x({index:n+1}).value,className:e(`h-2.5 w-2.5 rounded-full transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2`,r?`scale-110 bg-text`:`bg-text/20 hover:bg-text/40`)},n)}),_(o,{identifier:`carousel-next`,children:[g(t,{variant:i.HOVERABLE,color:n.NEUTRAL,roundedSize:`full`,label:C.value,onClick:e=>{e.stopPropagation(),y()},Icon:c,size:r.ICON_MD,disabled:f===m-1}),g(o.Detail,{identifier:`carousel-next`,children:_(`div`,{className:`flex items-center gap-2 p-2`,children:[g(`span`,{className:`whitespace-nowrap text-neutral text-xs`,children:C.value}),g(a,{shortcut:`ArrowRight`,size:`sm`,onTriggered:y,disabled:u})]})})]})]})},E=e=>{let t=[],n=[];return e.forEach(e=>{d(e)&&e.type===w?t.push(e):n.push(e)}),[t,n]},D=Object.assign(({children:t,className:n,initialIndex:r=0,onIndexChange:i,...a})=>{let[o,s]=E(l.toArray(t)),c=o.length,[u,d]=h(r),[f,v]=h(r),[b,w]=h(0),[T,D]=h(0),[O,k]=h(!1),A=m(null),j=m([]),M=e=>{if(typeof window>`u`)return;let t=window.innerWidth/5,n=Math.round(e/t);if(Math.abs(n)>=1){let t=f-n,r=Math.max(0,Math.min(t,c-1));r!==u&&(d(r),D(t=>t+e))}},N=()=>{d(e=>Math.min(e+1,c-1))},P=()=>{d(e=>Math.max(e-1,0))},F=e=>{k(!0),D(e.clientX)},I=e=>{O&&M(e.clientX-T)},L=()=>k(!1);return p(()=>{u&&i?.(u)},[u,i]),p(()=>{let e;return u!==f&&(e=setInterval(()=>{v(t=>t===u?(clearInterval(e),t):t<u?t+1:t-1)},50)),()=>clearInterval(e)},[u,f]),p(()=>{let e=()=>{let e=j.current.map(e=>e?.offsetHeight||0),t=Math.max(0,...e);t>0&&w(t+40)};e();let t=new ResizeObserver(()=>{e()});return j.current.forEach(e=>{e&&t.observe(e)}),()=>t.disconnect()},[c]),g(y.Provider,{value:{selectedIndex:u,setSelectedIndex:d,totalItems:c,handlePrev:P,handleNext:N},children:_(`div`,{ref:A,className:e(`relative w-full cursor-grab select-none overflow-hidden outline-none transition-[height] duration-300 ease-in-out focus:outline-none focus:outline-none focus:ring-0 active:cursor-grabbing`,n),style:{height:b>0?b:`auto`,minHeight:`400px`},onMouseDown:F,onMouseMove:I,onMouseUp:L,onMouseLeave:L,onTouchStart:e=>{k(!0),D(e.touches[0].clientX)},onTouchMove:e=>{O&&M(e.touches[0].clientX-T)},onTouchEnd:L,role:`region`,"aria-label":`Carousel`,...a,children:[o.map((t,n)=>g(`div`,{role:`button`,tabIndex:0,ref:e=>{j.current[n]=e},className:e(`absolute left-1/2 -translate-x-1/2 transition-all duration-300 ease-in-out`,`outline-none ring-0 focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0`,x(n,f)),onClick:e=>{e.stopPropagation(),d(n)},onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&d(n)},style:{transform:`
+"use client";import{cn as e}from"../../utils/cn.mjs";import{Button as t,ButtonColor as n,ButtonSize as r,ButtonVariant as i}from"../Button/Button.mjs";import{KeyboardShortcut as a}from"../KeyboardShortcut/KeyboardShortcut.mjs";import{Popover as o}from"../Popover/dynamic.mjs";import{ChevronLeft as s,ChevronRight as c}from"lucide-react";import{Children as l,createContext as u,isValidElement as d,useContext as f,useEffect as p,useRef as m,useState as h}from"react";import{jsx as g,jsxs as _}from"react/jsx-runtime";import{useIntlayer as v}from"react-intlayer";const y=u(null),b=()=>{let e=f(y);if(!e)throw Error(`useCarousel must be used within a Carousel`);return e},x=(e,t)=>{switch(Math.abs(e-t)){case 0:return`opacity-100 z-40`;case 1:return`opacity-75 z-30 cursor-pointer`;case 2:return`opacity-50 z-20 pointer-events-none`;default:return`opacity-0 z-10 pointer-events-none`}},S=(e,t)=>{switch(Math.abs(e-t)){case 0:return 1;case 1:return .9;case 2:return .8;default:return .7}},C=(e,t)=>`calc(${e-t} * min(30vw, 300px))`,w=({children:t,className:n,...r})=>g(`div`,{className:e(`h-full w-full`,n),...r,children:t}),T=({className:l,disableKeyboardShortcuts:u=!1,...d})=>{let{selectedIndex:f,setSelectedIndex:p,totalItems:m,handlePrev:h,handleNext:y}=b(),{goToSlide:x,previousSlide:S,nextSlide:C}=v(`carousel`);return m<=1?null:_(`div`,{className:e(`absolute bottom-4 left-1/2 z-50 flex -translate-x-1/2 flex-row items-center gap-2`,l),...d,children:[_(o,{identifier:`carousel-prev`,children:[g(t,{variant:i.HOVERABLE,color:n.NEUTRAL,label:S.value,roundedSize:`full`,onClick:e=>{e.stopPropagation(),h()},Icon:s,size:r.ICON_MD,disabled:f===0}),g(o.Detail,{identifier:`carousel-prev`,children:_(`div`,{className:`flex items-center gap-2 p-2`,children:[g(`span`,{className:`whitespace-nowrap text-neutral text-xs`,children:S.value}),g(a,{shortcut:`ArrowLeft`,disabled:u,size:`sm`,onTriggered:h})]})})]}),Array.from({length:m}).map((t,n)=>{let r=n===f;return g(`button`,{type:`button`,onClick:e=>{e.stopPropagation(),p(n)},"aria-label":x({index:n+1}).value,className:e(`h-2.5 w-2.5 rounded-full transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2`,r?`scale-110 bg-text`:`bg-text/20 hover:bg-text/40`)},n)}),_(o,{identifier:`carousel-next`,children:[g(t,{variant:i.HOVERABLE,color:n.NEUTRAL,roundedSize:`full`,label:C.value,onClick:e=>{e.stopPropagation(),y()},Icon:c,size:r.ICON_MD,disabled:f===m-1}),g(o.Detail,{identifier:`carousel-next`,children:_(`div`,{className:`flex items-center gap-2 p-2`,children:[g(`span`,{className:`whitespace-nowrap text-neutral text-xs`,children:C.value}),g(a,{shortcut:`ArrowRight`,size:`sm`,onTriggered:y,disabled:u})]})})]})]})},E=e=>{let t=[],n=[];return e.forEach(e=>{d(e)&&e.type===w?t.push(e):n.push(e)}),[t,n]},D=Object.assign(({children:t,className:n,initialIndex:r=0,onIndexChange:i,...a})=>{let[o,s]=E(l.toArray(t)),c=o.length,[u,d]=h(r),[f,v]=h(r),[b,w]=h(0),[T,D]=h(0),[O,k]=h(!1),A=m(null),j=m([]),M=e=>{if(typeof window>`u`)return;let t=window.innerWidth/5,n=Math.round(e/t);if(Math.abs(n)>=1){let t=f-n,r=Math.max(0,Math.min(t,c-1));r!==u&&(d(r),D(t=>t+e))}},N=()=>{d(e=>Math.min(e+1,c-1))},P=()=>{d(e=>Math.max(e-1,0))},F=e=>{k(!0),D(e.clientX)},I=e=>{O&&M(e.clientX-T)},L=()=>k(!1);return p(()=>{u&&i?.(u)},[u,i]),p(()=>{let e;return u!==f&&(e=setInterval(()=>{v(t=>t===u?(clearInterval(e),t):t<u?t+1:t-1)},50)),()=>clearInterval(e)},[u,f]),p(()=>{let e=()=>{let e=j.current.map(e=>e?.offsetHeight||0),t=Math.max(0,...e);t>0&&w(t+40)};e();let t=new ResizeObserver(()=>{e()});return j.current.forEach(e=>{e&&t.observe(e)}),()=>t.disconnect()},[c]),g(y.Provider,{value:{selectedIndex:u,setSelectedIndex:d,totalItems:c,handlePrev:P,handleNext:N},children:_(`div`,{ref:A,className:e(`relative w-full cursor-grab select-none overflow-hidden outline-none transition-[height] duration-300 ease-in-out focus:outline-none focus:outline-none focus:ring-0 active:cursor-grabbing`,`max-w-[1400px]`,n),style:{height:b>0?b:`auto`,minHeight:`400px`},onMouseDown:F,onMouseMove:I,onMouseUp:L,onMouseLeave:L,onTouchStart:e=>{k(!0),D(e.touches[0].clientX)},onTouchMove:e=>{O&&M(e.touches[0].clientX-T)},onTouchEnd:L,role:`region`,"aria-label":`Carousel`,...a,children:[o.map((t,n)=>g(`div`,{role:`button`,tabIndex:0,ref:e=>{j.current[n]=e},className:e(`absolute left-1/2 -translate-x-1/2 transition-all duration-300 ease-in-out`,`outline-none ring-0 focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0`,x(n,f)),onClick:e=>{e.stopPropagation(),d(n)},onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&d(n)},style:{transform:`
                   translateX(${C(n,f)}) 
                   scale(${S(n,f)})
                 `},children:t},n)),s]})})},{Item:w,Indicators:T});export{D as Carousel};

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Carousel/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Button,\n  ButtonColor,\n  ButtonSize,\n  ButtonVariant,\n} from '@components/Button';\nimport { KeyboardShortcut } from '@components/KeyboardShortcut';\nimport { Popover } from '@components/Popover';\n// Removed useIsMounted as it is no longer needed for positioning\nimport { cn } from '@utils/cn';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport {\n  Children,\n  createContext,\n  type FC,\n  type HTMLAttributes,\n  isValidElement,\n  type MouseEventHandler,\n  type ReactElement,\n  type ReactNode,\n  type TouchEventHandler,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntlayer } from 'react-intlayer';\n\n// ------------------------------------------------------------------\n// Configuration\n// ------------------------------------------------------------------\nconst SWIPE_THRESHOLD_DIVISOR = 5;\nconst TRANSITION_DELAY_MS = 50;\n\n// ------------------------------------------------------------------\n// Context Definition\n// ------------------------------------------------------------------\ntype CarouselContextValue = {\n  selectedIndex: number;\n  setSelectedIndex: (index: number) => void;\n  totalItems: number;\n  handlePrev: () => void;\n  handleNext: () => void;\n};\n\nconst CarouselContext = createContext<CarouselContextValue | null>(null);\n\nconst useCarousel = () => {\n  const context = useContext(CarouselContext);\n  if (!context) {\n    throw new Error('useCarousel must be used within a Carousel');\n  }\n  return context;\n};\n\n// ------------------------------------------------------------------\n// Helper Functions\n// ------------------------------------------------------------------\nconst getCardStyle = (index: number, displayedIndex: number) => {\n  const diff = Math.abs(index - displayedIndex);\n  switch (diff) {\n    case 0:\n      return 'opacity-100 z-40';\n    case 1:\n      return 'opacity-75 z-30 cursor-pointer';\n    case 2:\n      return 'opacity-50 z-20 pointer-events-none';\n    default:\n      return 'opacity-0 z-10 pointer-events-none';\n  }\n};\n\nconst getCardScale = (index: number, displayedIndex: number) => {\n  const diff = Math.abs(index - displayedIndex);\n  switch (diff) {\n    case 0:\n      return 1;\n    case 1:\n      return 0.9;\n    case 2:\n      return 0.8;\n    default:\n      return 0.7;\n  }\n};\n\n// FIX 1: Use CSS units (vw) instead of window.innerWidth (pixels)\n// This allows the calculation to work on SSR without hydration mismatch.\n// Your original logic: (3 * screenWidth) / 10  === 30% of viewport width\nconst getCardPositionX = (index: number, displayedIndex: number) => {\n  const diff = index - displayedIndex;\n  return `${diff * 30}vw`;\n};\n\n// ------------------------------------------------------------------\n// Sub-Component: Item\n// ------------------------------------------------------------------\ntype CarouselItemProps = HTMLAttributes<HTMLDivElement> & {\n  children: ReactNode;\n};\n\nconst CarouselItem: FC<CarouselItemProps> = ({\n  children,\n  className,\n  ...props\n}) => {\n  return (\n    <div className={cn('h-full w-full', className)} {...props}>\n      {children}\n    </div>\n  );\n};\n\n// ------------------------------------------------------------------\n// Sub-Component: Indicators (Controller)\n// ------------------------------------------------------------------\ntype CarouselIndicatorsProps = HTMLAttributes<HTMLDivElement> & {\n  disableKeyboardShortcuts?: boolean;\n};\n\nconst CarouselIndicators: FC<CarouselIndicatorsProps> = ({\n  className,\n  disableKeyboardShortcuts = false,\n  ...props\n}) => {\n  const {\n    selectedIndex,\n    setSelectedIndex,\n    totalItems,\n    handlePrev,\n    handleNext,\n  } = useCarousel();\n  const { goToSlide, previousSlide, nextSlide } = useIntlayer('carousel');\n\n  if (totalItems <= 1) return null;\n\n  return (\n    <div\n      className={cn(\n        'absolute bottom-4 left-1/2 z-50 flex -translate-x-1/2 flex-row items-center gap-2',\n        className\n      )}\n      {...props}\n    >\n      <Popover identifier=\"carousel-prev\">\n        <Button\n          variant={ButtonVariant.HOVERABLE}\n          color={ButtonColor.NEUTRAL}\n          label={previousSlide.value}\n          roundedSize=\"full\"\n          onClick={(e) => {\n            e.stopPropagation();\n            handlePrev();\n          }}\n          Icon={ChevronLeft}\n          size={ButtonSize.ICON_MD}\n          disabled={selectedIndex === 0}\n        />\n\n        <Popover.Detail identifier=\"carousel-prev\">\n          <div className=\"flex items-center gap-2 p-2\">\n            <span className=\"whitespace-nowrap text-neutral text-xs\">\n              {previousSlide.value}\n            </span>\n            <KeyboardShortcut\n              shortcut=\"ArrowLeft\"\n              disabled={disableKeyboardShortcuts}\n              size=\"sm\"\n              onTriggered={handlePrev}\n            />\n          </div>\n        </Popover.Detail>\n      </Popover>\n\n      {Array.from({ length: totalItems }).map((_, index) => {\n        const isActive = index === selectedIndex;\n        return (\n          <button\n            key={index}\n            type=\"button\"\n            onClick={(e) => {\n              e.stopPropagation();\n              setSelectedIndex(index);\n            }}\n            aria-label={goToSlide({ index: index + 1 }).value}\n            className={cn(\n              'h-2.5 w-2.5 rounded-full transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2',\n              isActive ? 'scale-110 bg-text' : 'bg-text/20 hover:bg-text/40'\n            )}\n          />\n        );\n      })}\n\n      <Popover identifier=\"carousel-next\">\n        <Button\n          variant={ButtonVariant.HOVERABLE}\n          color={ButtonColor.NEUTRAL}\n          roundedSize=\"full\"\n          label={nextSlide.value}\n          onClick={(e) => {\n            e.stopPropagation();\n            handleNext();\n          }}\n          Icon={ChevronRight}\n          size={ButtonSize.ICON_MD}\n          disabled={selectedIndex === totalItems - 1}\n        />\n\n        <Popover.Detail identifier=\"carousel-next\">\n          <div className=\"flex items-center gap-2 p-2\">\n            <span className=\"whitespace-nowrap text-neutral text-xs\">\n              {nextSlide.value}\n            </span>\n            <KeyboardShortcut\n              shortcut=\"ArrowRight\"\n              size=\"sm\"\n              onTriggered={handleNext}\n              disabled={disableKeyboardShortcuts}\n            />\n          </div>\n        </Popover.Detail>\n      </Popover>\n    </div>\n  );\n};\n\n// ------------------------------------------------------------------\n// Main Component: Carousel Root\n// ------------------------------------------------------------------\ntype CarouselProps = HTMLAttributes<HTMLDivElement> & {\n  children: ReactNode;\n  initialIndex?: number;\n  onIndexChange?: (index: number) => void;\n};\n\nconst partitionCarouselChildren = (\n  children: ReactNode[]\n): [ReactElement[], ReactNode[]] => {\n  const slides: ReactElement[] = [];\n  const others: ReactNode[] = [];\n\n  children.forEach((child) => {\n    if (isValidElement(child) && child.type === CarouselItem) {\n      slides.push(child);\n    } else {\n      others.push(child);\n    }\n  });\n\n  return [slides, others];\n};\n\nconst CarouselRoot: FC<CarouselProps> = ({\n  children,\n  className,\n  initialIndex = 0,\n  onIndexChange,\n  ...props\n}) => {\n  const allChildren = Children.toArray(children);\n  const [slides, others] = partitionCarouselChildren(allChildren);\n  const totalItems = slides.length;\n\n  // State Management\n  const [selectedIndex, setSelectedIndex] = useState<number>(initialIndex);\n  const [displayedIndex, setDisplayedIndex] = useState<number>(initialIndex);\n  const [containerHeight, setContainerHeight] = useState<number>(0);\n\n  // Drag State\n  const [startX, setStartX] = useState(0);\n  const [isDragging, setIsDragging] = useState(false);\n\n  // Refs\n  const containerRef = useRef<HTMLDivElement>(null);\n  const itemsRef = useRef<(HTMLDivElement | null)[]>([]);\n\n  // Navigation Logic\n  const handleSwitchItem = (diff: number) => {\n    if (typeof window === 'undefined') return;\n\n    const screenWidth = window.innerWidth;\n    const swipeStep = screenWidth / SWIPE_THRESHOLD_DIVISOR;\n    const numSwipe = Math.round(diff / swipeStep);\n\n    if (Math.abs(numSwipe) >= 1) {\n      const newIndex = displayedIndex - numSwipe;\n      const clampedIndex = Math.max(0, Math.min(newIndex, totalItems - 1));\n\n      if (clampedIndex !== selectedIndex) {\n        setSelectedIndex(clampedIndex);\n        setStartX((prev) => prev + diff);\n      }\n    }\n  };\n\n  const handleNext = () => {\n    setSelectedIndex((prev) => Math.min(prev + 1, totalItems - 1));\n  };\n\n  const handlePrev = () => {\n    setSelectedIndex((prev) => Math.max(prev - 1, 0));\n  };\n\n  // Input Handlers\n  const handleMouseDown: MouseEventHandler<HTMLDivElement> = (e) => {\n    setIsDragging(true);\n    setStartX(e.clientX);\n  };\n  const handleMouseMove: MouseEventHandler<HTMLDivElement> = (e) => {\n    if (isDragging) handleSwitchItem(e.clientX - startX);\n  };\n  const handleDragEnd = () => setIsDragging(false);\n  const handleTouchStart: TouchEventHandler<HTMLDivElement> = (e) => {\n    setIsDragging(true);\n    setStartX(e.touches[0].clientX);\n  };\n  const handleTouchMove: TouchEventHandler<HTMLDivElement> = (e) => {\n    if (isDragging) handleSwitchItem(e.touches[0].clientX - startX);\n  };\n\n  // Effects\n  useEffect(() => {\n    if (selectedIndex) onIndexChange?.(selectedIndex);\n  }, [selectedIndex, onIndexChange]);\n\n  useEffect(() => {\n    let interval: NodeJS.Timeout;\n\n    if (selectedIndex !== displayedIndex) {\n      interval = setInterval(() => {\n        setDisplayedIndex((prev) => {\n          if (prev === selectedIndex) {\n            clearInterval(interval);\n            return prev;\n          }\n          return prev < selectedIndex ? prev + 1 : prev - 1;\n        });\n      }, TRANSITION_DELAY_MS);\n    }\n    return () => clearInterval(interval);\n  }, [selectedIndex, displayedIndex]);\n\n  // Calculate height based on the MAX height of ALL items\n  useEffect(() => {\n    const calculateMaxHeight = () => {\n      const heights = itemsRef.current.map((item) => item?.offsetHeight || 0);\n      const maxHeight = Math.max(0, ...heights);\n\n      if (maxHeight > 0) {\n        setContainerHeight(maxHeight + 40);\n      }\n    };\n\n    calculateMaxHeight();\n\n    const observer = new ResizeObserver(() => {\n      calculateMaxHeight();\n    });\n\n    itemsRef.current.forEach((item) => {\n      if (item) observer.observe(item);\n    });\n\n    return () => observer.disconnect();\n  }, [totalItems]); // Removed isMounted dependency\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        selectedIndex,\n        setSelectedIndex,\n        totalItems,\n        handlePrev,\n        handleNext,\n      }}\n    >\n      <div\n        ref={containerRef}\n        className={cn(\n          'relative w-full cursor-grab select-none overflow-hidden outline-none transition-[height] duration-300 ease-in-out focus:outline-none focus:outline-none focus:ring-0 active:cursor-grabbing',\n          className\n        )}\n        style={{\n          height: containerHeight > 0 ? containerHeight : 'auto',\n          minHeight: '400px',\n        }}\n        onMouseDown={handleMouseDown}\n        onMouseMove={handleMouseMove}\n        onMouseUp={handleDragEnd}\n        onMouseLeave={handleDragEnd}\n        onTouchStart={handleTouchStart}\n        onTouchMove={handleTouchMove}\n        onTouchEnd={handleDragEnd}\n        role=\"region\"\n        aria-label=\"Carousel\"\n        {...props}\n      >\n        {slides.map((child, index) => {\n          return (\n            <div\n              key={index}\n              role=\"button\"\n              tabIndex={0}\n              ref={(el) => {\n                itemsRef.current[index] = el;\n              }}\n              // FIX 2: Removed isMounted checks and invisible classes.\n              // CSS units allow correct SSR rendering.\n              className={cn(\n                'absolute left-1/2 -translate-x-1/2 transition-all duration-300 ease-in-out',\n                'outline-none ring-0 focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0',\n                getCardStyle(index, displayedIndex)\n              )}\n              onClick={(e) => {\n                e.stopPropagation();\n                setSelectedIndex(index);\n              }}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter' || e.key === ' ') setSelectedIndex(index);\n              }}\n              style={{\n                // FIX 3: getCardPositionX now returns '30vw', so no 'px' suffix needed here\n                transform: `\n                  translateX(${getCardPositionX(index, displayedIndex)}) \n                  scale(${getCardScale(index, displayedIndex)})\n                `,\n              }}\n            >\n              {child}\n            </div>\n          );\n        })}\n\n        {others}\n      </div>\n    </CarouselContext.Provider>\n  );\n};\n\nexport const Carousel = Object.assign(CarouselRoot, {\n  Item: CarouselItem,\n  Indicators: CarouselIndicators,\n});\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Carousel/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Button,\n  ButtonColor,\n  ButtonSize,\n  ButtonVariant,\n} from '@components/Button';\nimport { KeyboardShortcut } from '@components/KeyboardShortcut';\nimport { Popover } from '@components/Popover';\nimport { cn } from '@utils/cn';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport {\n  Children,\n  createContext,\n  type FC,\n  type HTMLAttributes,\n  isValidElement,\n  type MouseEventHandler,\n  type ReactElement,\n  type ReactNode,\n  type TouchEventHandler,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntlayer } from 'react-intlayer';\n\n// ------------------------------------------------------------------\n// Configuration\n// ------------------------------------------------------------------\nconst SWIPE_THRESHOLD_DIVISOR = 5;\nconst TRANSITION_DELAY_MS = 50;\n\n// ------------------------------------------------------------------\n// Context Definition\n// ------------------------------------------------------------------\ntype CarouselContextValue = {\n  selectedIndex: number;\n  setSelectedIndex: (index: number) => void;\n  totalItems: number;\n  handlePrev: () => void;\n  handleNext: () => void;\n};\n\nconst CarouselContext = createContext<CarouselContextValue | null>(null);\n\nconst useCarousel = () => {\n  const context = useContext(CarouselContext);\n  if (!context) {\n    throw new Error('useCarousel must be used within a Carousel');\n  }\n  return context;\n};\n\n// ------------------------------------------------------------------\n// Helper Functions\n// ------------------------------------------------------------------\nconst getCardStyle = (index: number, displayedIndex: number) => {\n  const diff = Math.abs(index - displayedIndex);\n  switch (diff) {\n    case 0:\n      return 'opacity-100 z-40';\n    case 1:\n      return 'opacity-75 z-30 cursor-pointer';\n    case 2:\n      return 'opacity-50 z-20 pointer-events-none';\n    default:\n      return 'opacity-0 z-10 pointer-events-none';\n  }\n};\n\nconst getCardScale = (index: number, displayedIndex: number) => {\n  const diff = Math.abs(index - displayedIndex);\n  switch (diff) {\n    case 0:\n      return 1;\n    case 1:\n      return 0.9;\n    case 2:\n      return 0.8;\n    default:\n      return 0.7;\n  }\n};\n\n// FIX 1: Use CSS units (vw) instead of window.innerWidth (pixels)\n// This allows the calculation to work on SSR without hydration mismatch.\n// Your original logic: (3 * screenWidth) / 10  === 30% of viewport width\nconst getCardPositionX = (index: number, displayedIndex: number) => {\n  const diff = index - displayedIndex;\n  return `calc(${diff} * min(30vw, 300px))`;\n};\n\n// ------------------------------------------------------------------\n// Sub-Component: Item\n// ------------------------------------------------------------------\ntype CarouselItemProps = HTMLAttributes<HTMLDivElement> & {\n  children: ReactNode;\n};\n\nconst CarouselItem: FC<CarouselItemProps> = ({\n  children,\n  className,\n  ...props\n}) => {\n  return (\n    <div className={cn('h-full w-full', className)} {...props}>\n      {children}\n    </div>\n  );\n};\n\n// ------------------------------------------------------------------\n// Sub-Component: Indicators (Controller)\n// ------------------------------------------------------------------\ntype CarouselIndicatorsProps = HTMLAttributes<HTMLDivElement> & {\n  disableKeyboardShortcuts?: boolean;\n};\n\nconst CarouselIndicators: FC<CarouselIndicatorsProps> = ({\n  className,\n  disableKeyboardShortcuts = false,\n  ...props\n}) => {\n  const {\n    selectedIndex,\n    setSelectedIndex,\n    totalItems,\n    handlePrev,\n    handleNext,\n  } = useCarousel();\n  const { goToSlide, previousSlide, nextSlide } = useIntlayer('carousel');\n\n  if (totalItems <= 1) return null;\n\n  return (\n    <div\n      className={cn(\n        'absolute bottom-4 left-1/2 z-50 flex -translate-x-1/2 flex-row items-center gap-2',\n        className\n      )}\n      {...props}\n    >\n      <Popover identifier=\"carousel-prev\">\n        <Button\n          variant={ButtonVariant.HOVERABLE}\n          color={ButtonColor.NEUTRAL}\n          label={previousSlide.value}\n          roundedSize=\"full\"\n          onClick={(e) => {\n            e.stopPropagation();\n            handlePrev();\n          }}\n          Icon={ChevronLeft}\n          size={ButtonSize.ICON_MD}\n          disabled={selectedIndex === 0}\n        />\n\n        <Popover.Detail identifier=\"carousel-prev\">\n          <div className=\"flex items-center gap-2 p-2\">\n            <span className=\"whitespace-nowrap text-neutral text-xs\">\n              {previousSlide.value}\n            </span>\n            <KeyboardShortcut\n              shortcut=\"ArrowLeft\"\n              disabled={disableKeyboardShortcuts}\n              size=\"sm\"\n              onTriggered={handlePrev}\n            />\n          </div>\n        </Popover.Detail>\n      </Popover>\n\n      {Array.from({ length: totalItems }).map((_, index) => {\n        const isActive = index === selectedIndex;\n        return (\n          <button\n            key={index}\n            type=\"button\"\n            onClick={(e) => {\n              e.stopPropagation();\n              setSelectedIndex(index);\n            }}\n            aria-label={goToSlide({ index: index + 1 }).value}\n            className={cn(\n              'h-2.5 w-2.5 rounded-full transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2',\n              isActive ? 'scale-110 bg-text' : 'bg-text/20 hover:bg-text/40'\n            )}\n          />\n        );\n      })}\n\n      <Popover identifier=\"carousel-next\">\n        <Button\n          variant={ButtonVariant.HOVERABLE}\n          color={ButtonColor.NEUTRAL}\n          roundedSize=\"full\"\n          label={nextSlide.value}\n          onClick={(e) => {\n            e.stopPropagation();\n            handleNext();\n          }}\n          Icon={ChevronRight}\n          size={ButtonSize.ICON_MD}\n          disabled={selectedIndex === totalItems - 1}\n        />\n\n        <Popover.Detail identifier=\"carousel-next\">\n          <div className=\"flex items-center gap-2 p-2\">\n            <span className=\"whitespace-nowrap text-neutral text-xs\">\n              {nextSlide.value}\n            </span>\n            <KeyboardShortcut\n              shortcut=\"ArrowRight\"\n              size=\"sm\"\n              onTriggered={handleNext}\n              disabled={disableKeyboardShortcuts}\n            />\n          </div>\n        </Popover.Detail>\n      </Popover>\n    </div>\n  );\n};\n\n// ------------------------------------------------------------------\n// Main Component: Carousel Root\n// ------------------------------------------------------------------\ntype CarouselProps = HTMLAttributes<HTMLDivElement> & {\n  children: ReactNode;\n  initialIndex?: number;\n  onIndexChange?: (index: number) => void;\n};\n\nconst partitionCarouselChildren = (\n  children: ReactNode[]\n): [ReactElement[], ReactNode[]] => {\n  const slides: ReactElement[] = [];\n  const others: ReactNode[] = [];\n\n  children.forEach((child) => {\n    if (isValidElement(child) && child.type === CarouselItem) {\n      slides.push(child);\n    } else {\n      others.push(child);\n    }\n  });\n\n  return [slides, others];\n};\n\nconst CarouselRoot: FC<CarouselProps> = ({\n  children,\n  className,\n  initialIndex = 0,\n  onIndexChange,\n  ...props\n}) => {\n  const allChildren = Children.toArray(children);\n  const [slides, others] = partitionCarouselChildren(allChildren);\n  const totalItems = slides.length;\n\n  // State Management\n  const [selectedIndex, setSelectedIndex] = useState<number>(initialIndex);\n  const [displayedIndex, setDisplayedIndex] = useState<number>(initialIndex);\n  const [containerHeight, setContainerHeight] = useState<number>(0);\n\n  // Drag State\n  const [startX, setStartX] = useState(0);\n  const [isDragging, setIsDragging] = useState(false);\n\n  // Refs\n  const containerRef = useRef<HTMLDivElement>(null);\n  const itemsRef = useRef<(HTMLDivElement | null)[]>([]);\n\n  // Navigation Logic\n  const handleSwitchItem = (diff: number) => {\n    if (typeof window === 'undefined') return;\n\n    const screenWidth = window.innerWidth;\n    const swipeStep = screenWidth / SWIPE_THRESHOLD_DIVISOR;\n    const numSwipe = Math.round(diff / swipeStep);\n\n    if (Math.abs(numSwipe) >= 1) {\n      const newIndex = displayedIndex - numSwipe;\n      const clampedIndex = Math.max(0, Math.min(newIndex, totalItems - 1));\n\n      if (clampedIndex !== selectedIndex) {\n        setSelectedIndex(clampedIndex);\n        setStartX((prev) => prev + diff);\n      }\n    }\n  };\n\n  const handleNext = () => {\n    setSelectedIndex((prev) => Math.min(prev + 1, totalItems - 1));\n  };\n\n  const handlePrev = () => {\n    setSelectedIndex((prev) => Math.max(prev - 1, 0));\n  };\n\n  // Input Handlers\n  const handleMouseDown: MouseEventHandler<HTMLDivElement> = (e) => {\n    setIsDragging(true);\n    setStartX(e.clientX);\n  };\n  const handleMouseMove: MouseEventHandler<HTMLDivElement> = (e) => {\n    if (isDragging) handleSwitchItem(e.clientX - startX);\n  };\n  const handleDragEnd = () => setIsDragging(false);\n  const handleTouchStart: TouchEventHandler<HTMLDivElement> = (e) => {\n    setIsDragging(true);\n    setStartX(e.touches[0].clientX);\n  };\n  const handleTouchMove: TouchEventHandler<HTMLDivElement> = (e) => {\n    if (isDragging) handleSwitchItem(e.touches[0].clientX - startX);\n  };\n\n  // Effects\n  useEffect(() => {\n    if (selectedIndex) onIndexChange?.(selectedIndex);\n  }, [selectedIndex, onIndexChange]);\n\n  useEffect(() => {\n    let interval: NodeJS.Timeout;\n\n    if (selectedIndex !== displayedIndex) {\n      interval = setInterval(() => {\n        setDisplayedIndex((prev) => {\n          if (prev === selectedIndex) {\n            clearInterval(interval);\n            return prev;\n          }\n          return prev < selectedIndex ? prev + 1 : prev - 1;\n        });\n      }, TRANSITION_DELAY_MS);\n    }\n    return () => clearInterval(interval);\n  }, [selectedIndex, displayedIndex]);\n\n  // Calculate height based on the MAX height of ALL items\n  useEffect(() => {\n    const calculateMaxHeight = () => {\n      const heights = itemsRef.current.map((item) => item?.offsetHeight || 0);\n      const maxHeight = Math.max(0, ...heights);\n\n      if (maxHeight > 0) {\n        setContainerHeight(maxHeight + 40);\n      }\n    };\n\n    calculateMaxHeight();\n\n    const observer = new ResizeObserver(() => {\n      calculateMaxHeight();\n    });\n\n    itemsRef.current.forEach((item) => {\n      if (item) observer.observe(item);\n    });\n\n    return () => observer.disconnect();\n  }, [totalItems]); // Removed isMounted dependency\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        selectedIndex,\n        setSelectedIndex,\n        totalItems,\n        handlePrev,\n        handleNext,\n      }}\n    >\n      <div\n        ref={containerRef}\n        className={cn(\n          'relative w-full cursor-grab select-none overflow-hidden outline-none transition-[height] duration-300 ease-in-out focus:outline-none focus:outline-none focus:ring-0 active:cursor-grabbing',\n          '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                // FIX 3: getCardPositionX now returns '30vw', so no 'px' suffix needed here\n                transform: `\n                  translateX(${getCardPositionX(index, displayedIndex)}) \n                  scale(${getCardScale(index, displayedIndex)})\n                `,\n              }}\n            >\n              {child}\n            </div>\n          );\n        })}\n\n        {others}\n      </div>\n    </CarouselContext.Provider>\n  );\n};\n\nexport const Carousel = Object.assign(CarouselRoot, {\n  Item: CarouselItem,\n  Indicators: CarouselIndicators,\n});\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use client";import{CodeDefault as e}from"./CodeBlockClient.mjs";import{useEffect as t,useState as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=new Map,a=new Map,o=async e=>{if(i.has(e))return i.get(e);let t;switch(e){case`typescript`:case`ts`:t=await import(`shiki/langs/typescript.mjs`);break;case`javascript`:case`js`:t=await import(`shiki/langs/javascript.mjs`);break;case`bash`:case`sh`:case`shell`:t=await import(`shiki/langs/bash.mjs`);break;case`json`:t=await import(`shiki/langs/json.mjs`);break;case`tsx`:t=await import(`shiki/langs/tsx.mjs`);break;case`vue`:t=await import(`shiki/langs/vue.mjs`);break;case`html`:t=await import(`shiki/langs/html.mjs`);break;default:t=await import(`shiki/langs/typescript.mjs`);break}let n=t.default;return i.set(e,n),n},s=async e=>{if(a.has(e))return a.get(e);let t;switch(e){case`github-dark`:t=await import(`shiki/themes/github-dark.mjs`);break;case`github-light`:t=await import(`shiki/themes/github-light.mjs`);break;default:t=await import(`shiki/themes/github-light.mjs`);break}let n=t.default;return a.set(e,n),n},c=async(e,t,n)=>{let r=n?`github-dark`:`github-light`,[{codeToHtml:i},a,c]=await Promise.all([import(`shiki/bundle/web`),o(t),s(r)]);return i(e,{lang:t,theme:c,langs:[a]})},l=({children:i,lang:a,isDarkMode:o})=>{let[s,l]=n(null);return t(()=>{let e=!1;return l(null),c(i,a,o).then(t=>{e||l(t)}).catch(()=>{e||l(``)}),()=>{e=!0}},[i,a,o]),r(`div`,{className:`min-w-0 max-w-full overflow-auto bg-transparent [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&_pre::-webkit-scrollbar]:hidden [&_pre]:[-ms-overflow-style:none] [&_pre]:[scrollbar-width:none]`,style:{backgroundColor:`transparent`,minWidth:0,maxWidth:`100%`,overflow:`auto`},children:s?r(`div`,{dangerouslySetInnerHTML:{__html:s}}):r(e,{children:i})})};export{l as CodeBlockShiki};
+"use client";import{CodeDefault as e}from"./CodeBlockClient.mjs";import{useEffect as t,useState as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=new Map,a=new Map,o=async e=>{if(i.has(e))return i.get(e);let t;switch(e){case`typescript`:case`ts`:t=await import(`shiki/langs/typescript.mjs`);break;case`javascript`:case`js`:t=await import(`shiki/langs/javascript.mjs`);break;case`bash`:case`sh`:case`shell`:t=await import(`shiki/langs/bash.mjs`);break;case`json`:t=await import(`shiki/langs/json.mjs`);break;case`tsx`:t=await import(`shiki/langs/tsx.mjs`);break;case`vue`:t=await import(`shiki/langs/vue.mjs`);break;case`html`:t=await import(`shiki/langs/html.mjs`);break;default:t=await import(`shiki/langs/typescript.mjs`);break}let n=t.default;return i.set(e,n),n},s=async e=>{if(a.has(e))return a.get(e);let t;switch(e){case`github-dark`:t=await import(`shiki/themes/github-dark.mjs`);break;default:t=await import(`shiki/themes/github-light.mjs`);break}let n=t.default;return a.set(e,n),n};let c=null;const l=async()=>(c||=import(`shiki/bundle/web`).then(({createHighlighter:e})=>e({langs:[],themes:[]})),c),u=async(e,t,n)=>{let r=n?`github-dark`:`github-light`,[i,a,c]=await Promise.all([l(),o(t),s(r)]);return i.getLoadedLanguages().includes(t)||await i.loadLanguage(a),i.getLoadedThemes().includes(r)||await i.loadTheme(c),i.codeToHtml(e,{lang:t,theme:r})},d=({children:i,lang:a,isDarkMode:o})=>{let[s,c]=n(null);return t(()=>{let e=!1;return u(i,a,o).then(t=>{e||c(t)}).catch(t=>{console.error(`Failed to highlight code:`,t),!e&&s===null&&c(``)}),()=>{e=!0}},[i,a,o]),r(`div`,{className:`min-w-0 max-w-full overflow-auto bg-transparent [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&_pre::-webkit-scrollbar]:hidden [&_pre]:[-ms-overflow-style:none] [&_pre]:[scrollbar-width:none]`,children:s?r(`div`,{dangerouslySetInnerHTML:{__html:s}}):r(e,{children:i})})};export{d as CodeBlockShiki};
 //# sourceMappingURL=CodeBlockShiki.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"CodeBlockShiki.mjs","names":[],"sources":["../../../../src/components/IDE/CodeBlockShiki.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, useEffect, useState } from 'react';\nimport type {\n  BundledLanguage,\n  BundledTheme,\n  CodeToHastOptions,\n} from 'shiki/bundle/web';\nimport { CodeDefault } from './CodeBlockClient';\n\n// Map of loaded modules to avoid re-importing\nconst languageCache = new Map<BundledLanguage, any>();\nconst themeCache = new Map<BundledTheme, any>();\n\n// Lazy load language modules\nconst loadLanguage = async (lang: BundledLanguage): Promise<any> => {\n  if (languageCache.has(lang)) {\n    return languageCache.get(lang);\n  }\n\n  let languageModule: any;\n\n  switch (lang) {\n    case 'typescript':\n    case 'ts':\n      languageModule = await import('shiki/langs/typescript.mjs');\n      break;\n    case 'javascript':\n    case 'js':\n      languageModule = await import('shiki/langs/javascript.mjs');\n      break;\n    case 'bash':\n    case 'sh':\n    case 'shell':\n      languageModule = await import('shiki/langs/bash.mjs');\n      break;\n    case 'json':\n      languageModule = await import('shiki/langs/json.mjs');\n      break;\n    case 'tsx':\n      languageModule = await import('shiki/langs/tsx.mjs');\n      break;\n    case 'vue':\n      languageModule = await import('shiki/langs/vue.mjs');\n      break;\n    case 'html':\n      languageModule = await import('shiki/langs/html.mjs');\n      break;\n    default:\n      // Fallback to typescript for unknown languages\n      languageModule = await import('shiki/langs/typescript.mjs');\n      break;\n  }\n\n  const language = languageModule.default;\n  languageCache.set(lang, language);\n  return language;\n};\n\n// Lazy load theme modules\nconst loadTheme = async (themeName: BundledTheme): Promise<any> => {\n  if (themeCache.has(themeName)) {\n    return themeCache.get(themeName);\n  }\n\n  let themeModule: any;\n\n  switch (themeName) {\n    case 'github-dark':\n      themeModule = await import('shiki/themes/github-dark.mjs');\n      break;\n    case 'github-light':\n      themeModule = await import('shiki/themes/github-light.mjs');\n      break;\n    default:\n      themeModule = await import('shiki/themes/github-light.mjs');\n      break;\n  }\n\n  const theme = themeModule.default;\n  themeCache.set(themeName, theme);\n  return theme;\n};\n\n// Create a promise for highlighting\nconst highlightCode = async (\n  code: string,\n  lang: BundledLanguage,\n  isDarkMode?: boolean\n): Promise<string> => {\n  const themeName: BundledTheme = isDarkMode ? 'github-dark' : 'github-light';\n\n  // Lazy load shiki, language, and theme in parallel\n  const [{ codeToHtml }, languageModule, themeModule] = await Promise.all([\n    import('shiki/bundle/web'),\n    loadLanguage(lang),\n    loadTheme(themeName),\n  ]);\n\n  const shikiOptions: CodeToHastOptions<BundledLanguage, BundledTheme> = {\n    lang,\n    theme: themeModule,\n  };\n\n  return codeToHtml(code, {\n    ...shikiOptions,\n    langs: [languageModule],\n  } as any);\n};\n\nexport type CodeBlockShikiProps = {\n  children: string;\n  lang: BundledLanguage;\n  isDarkMode?: boolean;\n};\n\nexport const CodeBlockShiki: FC<CodeBlockShikiProps> = ({\n  children,\n  lang,\n  isDarkMode,\n}) => {\n  const [html, setHtml] = useState<string | null>(null);\n\n  useEffect(() => {\n    let isCancelled = false;\n\n    setHtml(null);\n\n    highlightCode(children, lang, isDarkMode)\n      .then((result) => {\n        if (!isCancelled) setHtml(result);\n      })\n      .catch(() => {\n        if (!isCancelled) setHtml('');\n      });\n\n    return () => {\n      isCancelled = true;\n    };\n  }, [children, lang, isDarkMode]);\n\n  return (\n    <div\n      className=\"min-w-0 max-w-full overflow-auto bg-transparent [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&_pre::-webkit-scrollbar]:hidden [&_pre]:[-ms-overflow-style:none] [&_pre]:[scrollbar-width:none]\"\n      style={{\n        backgroundColor: 'transparent',\n        minWidth: 0,\n        maxWidth: '100%',\n        overflow: 'auto',\n      }}\n    >\n      {html ? (\n        // biome-ignore lint/security/noDangerouslySetInnerHtml: Shiki generates safe HTML for code highlighting\n        <div dangerouslySetInnerHTML={{ __html: html }} />\n      ) : (\n        <CodeDefault>{children}</CodeDefault>\n      )}\n    </div>\n  );\n};\n"],"mappings":"yJAWA,MAAM,EAAgB,IAAI,IACpB,EAAa,IAAI,IAGjB,EAAe,KAAO,IAAwC,CAClE,GAAI,EAAc,IAAI,EAAK,CACzB,OAAO,EAAc,IAAI,EAAK,CAGhC,IAAI,EAEJ,OAAQ,EAAR,CACE,IAAK,aACL,IAAK,KACH,EAAiB,MAAM,OAAO,8BAC9B,MACF,IAAK,aACL,IAAK,KACH,EAAiB,MAAM,OAAO,8BAC9B,MACF,IAAK,OACL,IAAK,KACL,IAAK,QACH,EAAiB,MAAM,OAAO,wBAC9B,MACF,IAAK,OACH,EAAiB,MAAM,OAAO,wBAC9B,MACF,IAAK,MACH,EAAiB,MAAM,OAAO,uBAC9B,MACF,IAAK,MACH,EAAiB,MAAM,OAAO,uBAC9B,MACF,IAAK,OACH,EAAiB,MAAM,OAAO,wBAC9B,MACF,QAEE,EAAiB,MAAM,OAAO,8BAC9B,MAGJ,IAAM,EAAW,EAAe,QAEhC,OADA,EAAc,IAAI,EAAM,EAAS,CAC1B,GAIH,EAAY,KAAO,IAA0C,CACjE,GAAI,EAAW,IAAI,EAAU,CAC3B,OAAO,EAAW,IAAI,EAAU,CAGlC,IAAI,EAEJ,OAAQ,EAAR,CACE,IAAK,cACH,EAAc,MAAM,OAAO,gCAC3B,MACF,IAAK,eACH,EAAc,MAAM,OAAO,iCAC3B,MACF,QACE,EAAc,MAAM,OAAO,iCAC3B,MAGJ,IAAM,EAAQ,EAAY,QAE1B,OADA,EAAW,IAAI,EAAW,EAAM,CACzB,GAIH,EAAgB,MACpB,EACA,EACA,IACoB,CACpB,IAAM,EAA0B,EAAa,cAAgB,eAGvD,CAAC,CAAE,cAAc,EAAgB,GAAe,MAAM,QAAQ,IAAI,CACtE,OAAO,oBACP,EAAa,EAAK,CAClB,EAAU,EAAU,CACrB,CAAC,CAOF,OAAO,EAAW,EAAM,CAJtB,OACA,MAAO,EAKP,MAAO,CAAC,EAAe,CACxB,CAAQ,EASE,GAA2C,CACtD,WACA,OACA,gBACI,CACJ,GAAM,CAAC,EAAM,GAAW,EAAwB,KAAK,CAoBrD,OAlBA,MAAgB,CACd,IAAI,EAAc,GAYlB,OAVA,EAAQ,KAAK,CAEb,EAAc,EAAU,EAAM,EAAW,CACtC,KAAM,GAAW,CACX,GAAa,EAAQ,EAAO,EACjC,CACD,UAAY,CACN,GAAa,EAAQ,GAAG,EAC7B,KAES,CACX,EAAc,KAEf,CAAC,EAAU,EAAM,EAAW,CAAC,CAG9B,EAAC,MAAA,CACC,UAAU,oOACV,MAAO,CACL,gBAAiB,cACjB,SAAU,EACV,SAAU,OACV,SAAU,OACX,UAEA,EAEC,EAAC,MAAA,CAAI,wBAAyB,CAAE,OAAQ,EAAM,CAAA,CAAI,CAElD,EAAC,EAAA,CAAa,WAAA,CAAuB,EAEnC"}
+{"version":3,"file":"CodeBlockShiki.mjs","names":[],"sources":["../../../../src/components/IDE/CodeBlockShiki.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, useEffect, useState } from 'react';\nimport type {\n  BundledLanguage,\n  BundledTheme,\n  HighlighterGeneric,\n} from 'shiki/bundle/web';\nimport { CodeDefault } from './CodeBlockClient';\n\n// Map of loaded modules to avoid re-importing\nconst languageCache = new Map<BundledLanguage, any>();\nconst themeCache = new Map<BundledTheme, any>();\n\n// Lazy load language modules\nconst loadLanguage = async (lang: BundledLanguage): Promise<any> => {\n  if (languageCache.has(lang)) return languageCache.get(lang);\n\n  let languageModule: any;\n  switch (lang) {\n    case 'typescript':\n    case 'ts':\n      languageModule = await import('shiki/langs/typescript.mjs');\n      break;\n    case 'javascript':\n    case 'js':\n      languageModule = await import('shiki/langs/javascript.mjs');\n      break;\n    case 'bash':\n    case 'sh':\n    case 'shell':\n      languageModule = await import('shiki/langs/bash.mjs');\n      break;\n    case 'json':\n      languageModule = await import('shiki/langs/json.mjs');\n      break;\n    case 'tsx':\n      languageModule = await import('shiki/langs/tsx.mjs');\n      break;\n    case 'vue':\n      languageModule = await import('shiki/langs/vue.mjs');\n      break;\n    case 'html':\n      languageModule = await import('shiki/langs/html.mjs');\n      break;\n    default:\n      languageModule = await import('shiki/langs/typescript.mjs');\n      break;\n  }\n\n  const language = languageModule.default;\n  languageCache.set(lang, language);\n  return language;\n};\n\n// Lazy load theme modules\nconst loadTheme = async (themeName: BundledTheme): Promise<any> => {\n  if (themeCache.has(themeName)) return themeCache.get(themeName);\n\n  let themeModule: any;\n  switch (themeName) {\n    case 'github-dark':\n      themeModule = await import('shiki/themes/github-dark.mjs');\n      break;\n    case 'github-light':\n    default:\n      themeModule = await import('shiki/themes/github-light.mjs');\n      break;\n  }\n\n  const theme = themeModule.default;\n  themeCache.set(themeName, theme);\n  return theme;\n};\n\n// Singleton Highlighter Instance\nlet highlighterPromise: Promise<HighlighterGeneric<any, any>> | null = null;\n\nconst getHighlighterInstance = async () => {\n  if (!highlighterPromise) {\n    highlighterPromise = import('shiki/bundle/web').then(\n      ({ createHighlighter }) =>\n        createHighlighter({\n          langs: [],\n          themes: [],\n        })\n    );\n  }\n  return highlighterPromise;\n};\n\n// Create a promise for highlighting\nconst highlightCode = async (\n  code: string,\n  lang: BundledLanguage,\n  isDarkMode?: boolean\n): Promise<string> => {\n  const themeName: BundledTheme = isDarkMode ? 'github-dark' : 'github-light';\n\n  // Load highlighter, language, and theme in parallel\n  const [highlighter, languageModule, themeModule] = await Promise.all([\n    getHighlighterInstance(),\n    loadLanguage(lang),\n    loadTheme(themeName),\n  ]);\n\n  // Load into the singleton instance if not already loaded\n  if (!highlighter.getLoadedLanguages().includes(lang)) {\n    await highlighter.loadLanguage(languageModule);\n  }\n  if (!highlighter.getLoadedThemes().includes(themeName)) {\n    await highlighter.loadTheme(themeModule);\n  }\n\n  return highlighter.codeToHtml(code, {\n    lang,\n    theme: themeName,\n  });\n};\n\nexport type CodeBlockShikiProps = {\n  children: string;\n  lang: BundledLanguage;\n  isDarkMode?: boolean;\n};\n\nexport const CodeBlockShiki: FC<CodeBlockShikiProps> = ({\n  children,\n  lang,\n  isDarkMode,\n}) => {\n  const [html, setHtml] = useState<string | null>(null);\n\n  useEffect(() => {\n    let isCancelled = false;\n\n    highlightCode(children, lang, isDarkMode)\n      .then((result) => {\n        if (!isCancelled) setHtml(result);\n      })\n      .catch((error) => {\n        console.error('Failed to highlight code:', error);\n        if (!isCancelled && html === null) setHtml('');\n      });\n\n    return () => {\n      isCancelled = true;\n    };\n  }, [children, lang, isDarkMode]);\n\n  return (\n    <div className=\"min-w-0 max-w-full overflow-auto bg-transparent [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&_pre::-webkit-scrollbar]:hidden [&_pre]:[-ms-overflow-style:none] [&_pre]:[scrollbar-width:none]\">\n      {html ? (\n        // biome-ignore lint/security/noDangerouslySetInnerHtml: Shiki generates safe HTML for code highlighting\n        <div dangerouslySetInnerHTML={{ __html: html }} />\n      ) : (\n        <CodeDefault>{children}</CodeDefault>\n      )}\n    </div>\n  );\n};\n"],"mappings":"yJAWA,MAAM,EAAgB,IAAI,IACpB,EAAa,IAAI,IAGjB,EAAe,KAAO,IAAwC,CAClE,GAAI,EAAc,IAAI,EAAK,CAAE,OAAO,EAAc,IAAI,EAAK,CAE3D,IAAI,EACJ,OAAQ,EAAR,CACE,IAAK,aACL,IAAK,KACH,EAAiB,MAAM,OAAO,8BAC9B,MACF,IAAK,aACL,IAAK,KACH,EAAiB,MAAM,OAAO,8BAC9B,MACF,IAAK,OACL,IAAK,KACL,IAAK,QACH,EAAiB,MAAM,OAAO,wBAC9B,MACF,IAAK,OACH,EAAiB,MAAM,OAAO,wBAC9B,MACF,IAAK,MACH,EAAiB,MAAM,OAAO,uBAC9B,MACF,IAAK,MACH,EAAiB,MAAM,OAAO,uBAC9B,MACF,IAAK,OACH,EAAiB,MAAM,OAAO,wBAC9B,MACF,QACE,EAAiB,MAAM,OAAO,8BAC9B,MAGJ,IAAM,EAAW,EAAe,QAEhC,OADA,EAAc,IAAI,EAAM,EAAS,CAC1B,GAIH,EAAY,KAAO,IAA0C,CACjE,GAAI,EAAW,IAAI,EAAU,CAAE,OAAO,EAAW,IAAI,EAAU,CAE/D,IAAI,EACJ,OAAQ,EAAR,CACE,IAAK,cACH,EAAc,MAAM,OAAO,gCAC3B,MAEF,QACE,EAAc,MAAM,OAAO,iCAC3B,MAGJ,IAAM,EAAQ,EAAY,QAE1B,OADA,EAAW,IAAI,EAAW,EAAM,CACzB,GAIT,IAAI,EAAmE,KAEvE,MAAM,EAAyB,UAC7B,AACE,IAAqB,OAAO,oBAAoB,MAC7C,CAAE,uBACD,EAAkB,CAChB,MAAO,EAAE,CACT,OAAQ,EAAE,CACX,CAAC,CACL,CAEI,GAIH,EAAgB,MACpB,EACA,EACA,IACoB,CACpB,IAAM,EAA0B,EAAa,cAAgB,eAGvD,CAAC,EAAa,EAAgB,GAAe,MAAM,QAAQ,IAAI,CACnE,GAAwB,CACxB,EAAa,EAAK,CAClB,EAAU,EAAU,CACrB,CAAC,CAUF,OAPK,EAAY,oBAAoB,CAAC,SAAS,EAAK,EAClD,MAAM,EAAY,aAAa,EAAe,CAE3C,EAAY,iBAAiB,CAAC,SAAS,EAAU,EACpD,MAAM,EAAY,UAAU,EAAY,CAGnC,EAAY,WAAW,EAAM,CAClC,OACA,MAAO,EACR,CAAC,EASS,GAA2C,CACtD,WACA,OACA,gBACI,CACJ,GAAM,CAAC,EAAM,GAAW,EAAwB,KAAK,CAmBrD,OAjBA,MAAgB,CACd,IAAI,EAAc,GAWlB,OATA,EAAc,EAAU,EAAM,EAAW,CACtC,KAAM,GAAW,CACX,GAAa,EAAQ,EAAO,EACjC,CACD,MAAO,GAAU,CAChB,QAAQ,MAAM,4BAA6B,EAAM,CAC7C,CAAC,GAAe,IAAS,MAAM,EAAQ,GAAG,EAC9C,KAES,CACX,EAAc,KAEf,CAAC,EAAU,EAAM,EAAW,CAAC,CAG9B,EAAC,MAAA,CAAI,UAAU,6OACZ,EAEC,EAAC,MAAA,CAAI,wBAAyB,CAAE,OAAQ,EAAM,CAAA,CAAI,CAElD,EAAC,EAAA,CAAa,WAAA,CAAuB,EAEnC"}

package/dist/esm/components/Link/Link.mjs

@@ -1,2 +1,2 @@
-import{cn as e}from"../../utils/cn.mjs";import{ExternalLink as t,MoveRight as n}from"lucide-react";import{isValidElement as r}from"react";import{cva as i}from"class-variance-authority";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{getLocalizedUrl as s}from"@intlayer/core/localization";let c=function(e){return e.DEFAULT=`default`,e.INVISIBLE_LINK=`invisible-link`,e.BUTTON=`button`,e.BUTTON_OUTLINED=`button-outlined`,e.HOVERABLE=`hoverable`,e}({}),l=function(e){return e.PRIMARY=`primary`,e.SECONDARY=`secondary`,e.DESTRUCTIVE=`destructive`,e.NEUTRAL=`neutral`,e.LIGHT=`light`,e.DARK=`dark`,e.TEXT=`text`,e.TEXT_INVERSE=`text-inverse`,e.ERROR=`error`,e.SUCCESS=`success`,e.CUSTOM=`custom`,e}({}),u=function(e){return e.NONE=`none`,e.SM=`sm`,e.MD=`md`,e.LG=`lg`,e.XL=`xl`,e.TWO_XL=`2xl`,e.THREE_XL=`3xl`,e.FULL=`full`,e}({}),d=function(e){return e.SM=`sm`,e.MD=`md`,e.LG=`lg`,e.XL=`xl`,e.CUSTOM=`custom`,e}({}),f=function(e){return e.DEFAULT=`default`,e.TRUE=`true`,e.FALSE=`false`,e}({});const p=i(`gap-3 transition-all duration-300 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50`,{variants:{variant:{[`${c.DEFAULT}`]:`h-auto justify-start border-inherit bg-current/0 px-1 decoration-1 underline-offset-4 hover:bg-current/0 hover:underline`,[`${c.INVISIBLE_LINK}`]:`h-auto justify-start border-inherit bg-current/0 px-1 underline-offset-4 hover:bg-current/0`,[`${c.BUTTON}`]:`relative flex cursor-pointer flex-row items-center justify-center gap-2 rounded-full bg-current text-center font-medium text-text ring-0 *:text-text-opposite hover:bg-current/90 hover:ring-5 aria-selected:ring-5`,[`${c.BUTTON_OUTLINED}`]:`relative flex cursor-pointer flex-row items-center justify-center gap-2 rounded-full border-[1.3px] border-current text-center font-medium text-text ring-0 *:text-text hover:bg-current/20 hover:ring-5 aria-selected:ring-5`,[`${c.HOVERABLE}`]:`block rounded-lg border-none bg-current/0 hover:bg-current/10 aria-[current]:bg-current/5`},roundedSize:{[`${u.NONE}`]:`rounded-none`,[`${u.SM}`]:`rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl`,[`${u.MD}`]:`rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl`,[`${u.LG}`]:`rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl`,[`${u.XL}`]:`rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl`,[`${u.TWO_XL}`]:`rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]`,[`${u.THREE_XL}`]:`rounded-[2.5rem] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[3rem]`,[`${u.FULL}`]:`rounded-full`},color:{[`${l.PRIMARY}`]:`text-primary`,[`${l.SECONDARY}`]:`text-secondary`,[`${l.DESTRUCTIVE}`]:`text-destructive`,[`${l.NEUTRAL}`]:`text-neutral`,[`${l.LIGHT}`]:`text-white`,[`${l.DARK}`]:`text-neutral-800`,[`${l.TEXT}`]:`text-text`,[`${l.TEXT_INVERSE}`]:`text-text-opposite`,[`${l.ERROR}`]:`text-error`,[`${l.SUCCESS}`]:`text-success`,[`${l.CUSTOM}`]:``},size:{[`${d.SM}`]:`text-sm`,[`${d.MD}`]:`text-base`,[`${d.LG}`]:`text-lg`,[`${d.XL}`]:`text-xl`,[`${d.CUSTOM}`]:``},underlined:{[f.DEFAULT]:``,[f.TRUE]:`underline`,[f.FALSE]:`no-underline`}},compoundVariants:[{variant:c.BUTTON,color:l.TEXT_INVERSE,class:`*:text-text`},{variant:c.BUTTON_OUTLINED,color:l.TEXT_INVERSE,class:`text-text-opposite *:text-text-opposite`},{variant:[c.BUTTON,c.BUTTON_OUTLINED],size:d.SM,class:`min-h-7 px-3 max-md:py-1`},{variant:[c.BUTTON,c.BUTTON_OUTLINED],size:d.MD,class:`min-h-8 px-6 max-md:py-2`},{variant:[c.BUTTON,c.BUTTON_OUTLINED],size:d.LG,class:`min-h-10 px-8 max-md:py-3`},{variant:[c.BUTTON,c.BUTTON_OUTLINED],size:d.XL,class:`min-h-11 px-10 max-md:py-4`},{variant:[c.BUTTON,c.BUTTON_OUTLINED],color:l.PRIMARY,class:`ring-primary/20`},{variant:[c.BUTTON,c.BUTTON_OUTLINED],color:l.SECONDARY,class:`ring-secondary/20`},{variant:[c.BUTTON,c.BUTTON_OUTLINED],color:l.DESTRUCTIVE,class:`ring-destructive/20`},{variant:[c.BUTTON,c.BUTTON_OUTLINED],color:l.NEUTRAL,class:`ring-neutral/20`},{variant:[c.BUTTON,c.BUTTON_OUTLINED],color:l.LIGHT,class:`ring-white/20`},{variant:[c.BUTTON,c.BUTTON_OUTLINED],color:l.DARK,class:`ring-neutral-800/20`},{variant:[c.BUTTON,c.BUTTON_OUTLINED],color:l.TEXT,class:`ring-text/20`},{variant:[c.BUTTON,c.BUTTON_OUTLINED],color:l.TEXT_INVERSE,class:`ring-text-opposite/20`},{variant:[c.BUTTON,c.BUTTON_OUTLINED],color:l.ERROR,class:`ring-error/20`},{variant:[c.BUTTON,c.BUTTON_OUTLINED],color:l.SUCCESS,class:`ring-success/20`}],defaultVariants:{variant:c.DEFAULT,color:l.PRIMARY,roundedSize:u.MD,underlined:f.DEFAULT,size:d.MD}}),m=({href:e,isExternalLink:t})=>{let n=typeof e==`string`&&e.trim()!==``;return t===!0||t===void 0&&n&&/^https?:\/\//.test(e)},h=e=>typeof e==`string`||typeof e==`number`?!0:Array.isArray(e)?e.every(h):r(e)?h(e.props.children):!1,g=r=>{let{variant:i=c.DEFAULT,color:u=l.PRIMARY,roundedSize:d,children:f,label:g,className:_,isActive:v,underlined:y,locale:b,size:x,isExternalLink:S,isPageSection:C,href:w,...T}=r,E=S??m(r),D=C??w?.startsWith(`#`)??!1,O=h(f),k=i===c.BUTTON||i===c.BUTTON_OUTLINED,A=E?`noopener noreferrer nofollow`:void 0,j=E?`_blank`:`_self`;return o(`a`,{href:b&&w&&!E&&!D?s(w,b):w,"aria-label":g,rel:A,target:j,"aria-current":v?`page`:void 0,className:e(p({variant:i,color:u,roundedSize:d,underlined:y,size:x,className:_})),...T,children:[k&&O?a(`span`,{children:f}):f,E&&O&&a(t,{className:`ml-2 inline-block size-4`}),D&&a(n,{className:`ml-2 inline-block size-4`})]})};export{g as Link,l as LinkColor,u as LinkRoundedSize,d as LinkSize,f as LinkUnderlined,c as LinkVariant,m as checkIsExternalLink,h as isTextChildren,p as linkVariants};
+import{cn as e}from"../../utils/cn.mjs";import{ExternalLink as t,MoveRight as n}from"lucide-react";import{isValidElement as r}from"react";import{cva as i}from"class-variance-authority";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{getLocalizedUrl as s}from"@intlayer/core/localization";let c=function(e){return e.DEFAULT=`default`,e.INVISIBLE_LINK=`invisible-link`,e.BUTTON=`button`,e.BUTTON_OUTLINED=`button-outlined`,e.HOVERABLE=`hoverable`,e}({}),l=function(e){return e.PRIMARY=`primary`,e.SECONDARY=`secondary`,e.DESTRUCTIVE=`destructive`,e.NEUTRAL=`neutral`,e.LIGHT=`light`,e.DARK=`dark`,e.TEXT=`text`,e.TEXT_INVERSE=`text-inverse`,e.ERROR=`error`,e.SUCCESS=`success`,e.CUSTOM=`custom`,e}({}),u=function(e){return e.NONE=`none`,e.SM=`sm`,e.MD=`md`,e.LG=`lg`,e.XL=`xl`,e.TWO_XL=`2xl`,e.THREE_XL=`3xl`,e.FULL=`full`,e}({}),d=function(e){return e.SM=`sm`,e.MD=`md`,e.LG=`lg`,e.XL=`xl`,e.CUSTOM=`custom`,e}({}),f=function(e){return e.DEFAULT=`default`,e.TRUE=`true`,e.FALSE=`false`,e}({});const p=i(`gap-3 transition-all duration-300 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50`,{variants:{variant:{[`${c.DEFAULT}`]:`h-auto justify-start border-inherit bg-current/0 px-1 font-medium decoration-[1.5] underline-offset-5 hover:bg-current/0 hover:text-current/80 hover:underline hover:underline-offset-6`,[`${c.INVISIBLE_LINK}`]:`h-auto justify-start border-inherit bg-current/0 px-1 underline-offset-5 hover:bg-current/0`,[`${c.BUTTON}`]:`relative flex cursor-pointer flex-row items-center justify-center gap-2 rounded-full bg-current text-center font-medium text-text ring-0 *:text-text-opposite hover:bg-current/90 hover:ring-5 aria-selected:ring-5`,[`${c.BUTTON_OUTLINED}`]:`relative flex cursor-pointer flex-row items-center justify-center gap-2 rounded-full border-[1.3px] border-current text-center font-medium text-text ring-0 *:text-text hover:bg-current/20 hover:ring-5 aria-selected:ring-5`,[`${c.HOVERABLE}`]:`block rounded-lg border-none bg-current/0 hover:bg-current/10 aria-[current]:bg-current/5`},roundedSize:{[`${u.NONE}`]:`rounded-none`,[`${u.SM}`]:`rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl`,[`${u.MD}`]:`rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl`,[`${u.LG}`]:`rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl`,[`${u.XL}`]:`rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl`,[`${u.TWO_XL}`]:`rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]`,[`${u.THREE_XL}`]:`rounded-[2.5rem] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[3rem]`,[`${u.FULL}`]:`rounded-full`},color:{[`${l.PRIMARY}`]:`text-primary`,[`${l.SECONDARY}`]:`text-secondary`,[`${l.DESTRUCTIVE}`]:`text-destructive`,[`${l.NEUTRAL}`]:`text-neutral`,[`${l.LIGHT}`]:`text-white`,[`${l.DARK}`]:`text-neutral-800`,[`${l.TEXT}`]:`text-text`,[`${l.TEXT_INVERSE}`]:`text-text-opposite`,[`${l.ERROR}`]:`text-error`,[`${l.SUCCESS}`]:`text-success`,[`${l.CUSTOM}`]:``},size:{[`${d.SM}`]:`text-sm`,[`${d.MD}`]:`text-base`,[`${d.LG}`]:`text-lg`,[`${d.XL}`]:`text-xl`,[`${d.CUSTOM}`]:``},underlined:{[f.DEFAULT]:``,[f.TRUE]:`underline`,[f.FALSE]:`no-underline`}},compoundVariants:[{variant:c.BUTTON,color:l.TEXT_INVERSE,class:`*:text-text`},{variant:c.BUTTON_OUTLINED,color:l.TEXT_INVERSE,class:`text-text-opposite *:text-text-opposite`},{variant:[c.BUTTON,c.BUTTON_OUTLINED],size:d.SM,class:`min-h-7 px-3 max-md:py-1`},{variant:[c.BUTTON,c.BUTTON_OUTLINED],size:d.MD,class:`min-h-8 px-6 max-md:py-2`},{variant:[c.BUTTON,c.BUTTON_OUTLINED],size:d.LG,class:`min-h-10 px-8 max-md:py-3`},{variant:[c.BUTTON,c.BUTTON_OUTLINED],size:d.XL,class:`min-h-11 px-10 max-md:py-4`},{variant:[c.BUTTON,c.BUTTON_OUTLINED],color:l.PRIMARY,class:`ring-primary/20`},{variant:[c.BUTTON,c.BUTTON_OUTLINED],color:l.SECONDARY,class:`ring-secondary/20`},{variant:[c.BUTTON,c.BUTTON_OUTLINED],color:l.DESTRUCTIVE,class:`ring-destructive/20`},{variant:[c.BUTTON,c.BUTTON_OUTLINED],color:l.NEUTRAL,class:`ring-neutral/20`},{variant:[c.BUTTON,c.BUTTON_OUTLINED],color:l.LIGHT,class:`ring-white/20`},{variant:[c.BUTTON,c.BUTTON_OUTLINED],color:l.DARK,class:`ring-neutral-800/20`},{variant:[c.BUTTON,c.BUTTON_OUTLINED],color:l.TEXT,class:`ring-text/20`},{variant:[c.BUTTON,c.BUTTON_OUTLINED],color:l.TEXT_INVERSE,class:`ring-text-opposite/20`},{variant:[c.BUTTON,c.BUTTON_OUTLINED],color:l.ERROR,class:`ring-error/20`},{variant:[c.BUTTON,c.BUTTON_OUTLINED],color:l.SUCCESS,class:`ring-success/20`}],defaultVariants:{variant:c.DEFAULT,roundedSize:u.MD,underlined:f.DEFAULT,size:d.MD}}),m=({href:e,isExternalLink:t})=>{let n=typeof e==`string`&&e.trim()!==``;return t===!0||t===void 0&&n&&/^https?:\/\//.test(e)},h=e=>typeof e==`string`||typeof e==`number`?!0:Array.isArray(e)?e.every(h):r(e)?h(e.props.children):!1,g=r=>{let{variant:i=c.DEFAULT,color:u=l.CUSTOM,roundedSize:d,children:f,label:g,className:_,isActive:v,underlined:y,locale:b,size:x,isExternalLink:S,isPageSection:C,href:w,...T}=r,E=S??m(r),D=C??w?.startsWith(`#`)??!1,O=h(f),k=i===c.BUTTON||i===c.BUTTON_OUTLINED,A=E?`noopener noreferrer nofollow`:void 0,j=E?`_blank`:`_self`;return o(`a`,{href:b&&w&&!E&&!D?s(w,b):w,"aria-label":g,rel:A,target:j,"aria-current":v?`page`:void 0,className:e(p({variant:i,color:u,roundedSize:d,underlined:y,size:x,className:_})),...T,children:[k&&O?a(`span`,{children:f}):f,E&&O&&a(t,{className:`ml-2 inline-block size-4`}),D&&a(n,{className:`ml-2 inline-block size-4`})]})};export{g as Link,l as LinkColor,u as LinkRoundedSize,d as LinkSize,f as LinkUnderlined,c as LinkVariant,m as checkIsExternalLink,h as isTextChildren,p as linkVariants};
 //# sourceMappingURL=Link.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Link.mjs","names":[],"sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import { getLocalizedUrl } from '@intlayer/core/localization';\nimport type { LocalesValues } from '@intlayer/types';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ExternalLink, MoveRight } from 'lucide-react';\nimport {\n  type AnchorHTMLAttributes,\n  type DetailedHTMLProps,\n  type FC,\n  isValidElement,\n  type ReactNode,\n} from 'react';\n\n/**\n * Visual style variants for Link component\n */\nexport enum LinkVariant {\n  DEFAULT = 'default',\n  INVISIBLE_LINK = 'invisible-link',\n  BUTTON = 'button',\n  BUTTON_OUTLINED = 'button-outlined',\n  HOVERABLE = 'hoverable',\n}\n\n/**\n * Color theme variants for Link component\n */\nexport enum LinkColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  DARK = 'dark',\n  TEXT = 'text',\n  TEXT_INVERSE = 'text-inverse',\n  ERROR = 'error',\n  SUCCESS = 'success',\n  CUSTOM = 'custom',\n}\n\nexport enum LinkRoundedSize {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  TWO_XL = '2xl',\n  THREE_XL = '3xl',\n  FULL = 'full',\n}\n\nexport enum LinkSize {\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  CUSTOM = 'custom',\n}\n\nexport enum LinkUnderlined {\n  DEFAULT = 'default',\n  TRUE = 'true',\n  FALSE = 'false',\n}\n\nexport const linkVariants = cva(\n  'gap-3 transition-all duration-300 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        [`${LinkVariant.DEFAULT}`]:\n          'h-auto justify-start border-inherit bg-current/0 px-1 decoration-1 underline-offset-4 hover:bg-current/0 hover:underline',\n        [`${LinkVariant.INVISIBLE_LINK}`]:\n          'h-auto justify-start border-inherit bg-current/0 px-1 underline-offset-4 hover:bg-current/0',\n\n        [`${LinkVariant.BUTTON}`]:\n          'relative flex cursor-pointer flex-row items-center justify-center gap-2 rounded-full bg-current text-center font-medium text-text ring-0 *:text-text-opposite hover:bg-current/90 hover:ring-5 aria-selected:ring-5',\n\n        [`${LinkVariant.BUTTON_OUTLINED}`]:\n          'relative flex cursor-pointer flex-row items-center justify-center gap-2 rounded-full border-[1.3px] border-current text-center font-medium text-text ring-0 *:text-text hover:bg-current/20 hover:ring-5 aria-selected:ring-5',\n\n        [`${LinkVariant.HOVERABLE}`]:\n          'block rounded-lg border-none bg-current/0 hover:bg-current/10 aria-[current]:bg-current/5',\n      },\n      roundedSize: {\n        [`${LinkRoundedSize.NONE}`]: 'rounded-none',\n        [`${LinkRoundedSize.SM}`]:\n          'rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl',\n        [`${LinkRoundedSize.MD}`]:\n          'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n        [`${LinkRoundedSize.LG}`]:\n          'rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl',\n        [`${LinkRoundedSize.XL}`]:\n          'rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl',\n        [`${LinkRoundedSize.TWO_XL}`]:\n          'rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]',\n        [`${LinkRoundedSize.THREE_XL}`]:\n          'rounded-[2.5rem] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[3rem]',\n        [`${LinkRoundedSize.FULL}`]: 'rounded-full',\n      },\n      color: {\n        [`${LinkColor.PRIMARY}`]: 'text-primary',\n        [`${LinkColor.SECONDARY}`]: 'text-secondary',\n        [`${LinkColor.DESTRUCTIVE}`]: 'text-destructive',\n        [`${LinkColor.NEUTRAL}`]: 'text-neutral',\n        [`${LinkColor.LIGHT}`]: 'text-white',\n        [`${LinkColor.DARK}`]: 'text-neutral-800',\n        [`${LinkColor.TEXT}`]: 'text-text',\n        [`${LinkColor.TEXT_INVERSE}`]: 'text-text-opposite',\n        [`${LinkColor.ERROR}`]: 'text-error',\n        [`${LinkColor.SUCCESS}`]: 'text-success',\n        [`${LinkColor.CUSTOM}`]: '',\n      },\n      size: {\n        [`${LinkSize.SM}`]: 'text-sm',\n        [`${LinkSize.MD}`]: 'text-base',\n        [`${LinkSize.LG}`]: 'text-lg',\n        [`${LinkSize.XL}`]: 'text-xl',\n        [`${LinkSize.CUSTOM}`]: '',\n      },\n      underlined: {\n        [LinkUnderlined.DEFAULT]: '',\n        [LinkUnderlined.TRUE]: 'underline',\n        [LinkUnderlined.FALSE]: 'no-underline',\n      },\n    },\n    // Compound variants handle height and padding\n    compoundVariants: [\n      // ---------------------------------------------------------\n      // FIX START: Correctly Handle Contrast for TEXT_INVERSE\n      // ---------------------------------------------------------\n      {\n        // Filled Button + Inverse Color (e.g., White Button):\n        // We DO NOT override parent text color (it must remain 'text-opposite' so bg-current is white).\n        // We ONLY override children to be 'text-text' (Dark) so they show up on white.\n        variant: LinkVariant.BUTTON,\n        color: LinkColor.TEXT_INVERSE,\n        class: '*:text-text',\n      },\n      {\n        // Outlined Button + Inverse Color (e.g., White Border):\n        // Parent is 'text-opposite' (Border is white).\n        // Children must also be 'text-opposite' (White text) to show on dark background.\n        variant: LinkVariant.BUTTON_OUTLINED,\n        color: LinkColor.TEXT_INVERSE,\n        class: 'text-text-opposite *:text-text-opposite',\n      },\n\n      // Min height and padding for button variants\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        size: LinkSize.SM,\n        class: 'min-h-7 px-3 max-md:py-1',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        size: LinkSize.MD,\n        class: 'min-h-8 px-6 max-md:py-2',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        size: LinkSize.LG,\n        class: 'min-h-10 px-8 max-md:py-3',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        size: LinkSize.XL,\n        class: 'min-h-11 px-10 max-md:py-4',\n      },\n      // Ring color variants\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.PRIMARY,\n        class: 'ring-primary/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.SECONDARY,\n        class: 'ring-secondary/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.DESTRUCTIVE,\n        class: 'ring-destructive/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.NEUTRAL,\n        class: 'ring-neutral/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.LIGHT,\n        class: 'ring-white/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.DARK,\n        class: 'ring-neutral-800/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.TEXT,\n        class: 'ring-text/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.TEXT_INVERSE,\n        class: 'ring-text-opposite/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.ERROR,\n        class: 'ring-error/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.SUCCESS,\n        class: 'ring-success/20',\n      },\n    ],\n\n    defaultVariants: {\n      variant: LinkVariant.DEFAULT,\n      color: LinkColor.PRIMARY,\n      roundedSize: LinkRoundedSize.MD,\n      underlined: LinkUnderlined.DEFAULT,\n      size: LinkSize.MD,\n    },\n  }\n);\n\nexport type LinkProps = DetailedHTMLProps<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  HTMLAnchorElement\n> &\n  VariantProps<typeof linkVariants> & {\n    label: string;\n    isExternalLink?: boolean;\n    isPageSection?: boolean;\n    isActive?: boolean;\n    locale?: LocalesValues;\n  };\n\nexport const checkIsExternalLink = ({\n  href,\n  isExternalLink: isExternalLinkProp,\n}: LinkProps): boolean => {\n  const isValidHref = typeof href === 'string' && href.trim() !== '';\n  const isExternalLink =\n    isExternalLinkProp === true ||\n    (typeof isExternalLinkProp === 'undefined' &&\n      isValidHref &&\n      /^https?:\\/\\//.test(href));\n\n  return isExternalLink;\n};\n\nexport const isTextChildren = (children: ReactNode): boolean => {\n  if (typeof children === 'string' || typeof children === 'number') {\n    return true;\n  }\n  if (Array.isArray(children)) {\n    return children.every(isTextChildren);\n  }\n  if (isValidElement(children)) {\n    return isTextChildren(\n      (children.props as { children?: ReactNode }).children\n    );\n  }\n  return false;\n};\n\nexport const Link: FC<LinkProps> = (props) => {\n  const {\n    variant = LinkVariant.DEFAULT,\n    color = LinkColor.PRIMARY,\n    roundedSize,\n    children,\n    label,\n    className,\n    isActive,\n    underlined,\n    locale,\n    size,\n    isExternalLink: isExternalLinkProp,\n    isPageSection: isPageSectionProp,\n    href: hrefProp,\n    ...otherProps\n  } = props;\n\n  const isExternalLink = isExternalLinkProp ?? checkIsExternalLink(props);\n  const isPageSection = isPageSectionProp ?? hrefProp?.startsWith('#') ?? false;\n\n  const isChildrenString = isTextChildren(children);\n  const isButton =\n    variant === LinkVariant.BUTTON || variant === LinkVariant.BUTTON_OUTLINED;\n\n  const rel = isExternalLink ? 'noopener noreferrer nofollow' : undefined;\n\n  const target = isExternalLink ? '_blank' : '_self';\n\n  const href =\n    locale && hrefProp && !isExternalLink && !isPageSection\n      ? getLocalizedUrl(hrefProp, locale)\n      : hrefProp;\n\n  return (\n    <a\n      href={href}\n      aria-label={label}\n      rel={rel}\n      target={target}\n      aria-current={isActive ? 'page' : undefined}\n      className={cn(\n        linkVariants({\n          variant,\n          color,\n          roundedSize,\n          underlined,\n          size,\n          className,\n        })\n      )}\n      {...otherProps}\n    >\n      {isButton && isChildrenString ? <span>{children}</span> : children}\n\n      {isExternalLink && isChildrenString && (\n        <ExternalLink className=\"ml-2 inline-block size-4\" />\n      )}\n      {isPageSection && <MoveRight className=\"ml-2 inline-block size-4\" />}\n    </a>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Link.mjs","names":[],"sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import { getLocalizedUrl } from '@intlayer/core/localization';\nimport type { LocalesValues } from '@intlayer/types';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ExternalLink, MoveRight } from 'lucide-react';\nimport {\n  type AnchorHTMLAttributes,\n  type DetailedHTMLProps,\n  type FC,\n  isValidElement,\n  type ReactNode,\n} from 'react';\n\n/**\n * Visual style variants for Link component\n */\nexport enum LinkVariant {\n  DEFAULT = 'default',\n  INVISIBLE_LINK = 'invisible-link',\n  BUTTON = 'button',\n  BUTTON_OUTLINED = 'button-outlined',\n  HOVERABLE = 'hoverable',\n}\n\n/**\n * Color theme variants for Link component\n */\nexport enum LinkColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  DARK = 'dark',\n  TEXT = 'text',\n  TEXT_INVERSE = 'text-inverse',\n  ERROR = 'error',\n  SUCCESS = 'success',\n  CUSTOM = 'custom',\n}\n\nexport enum LinkRoundedSize {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  TWO_XL = '2xl',\n  THREE_XL = '3xl',\n  FULL = 'full',\n}\n\nexport enum LinkSize {\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  CUSTOM = 'custom',\n}\n\nexport enum LinkUnderlined {\n  DEFAULT = 'default',\n  TRUE = 'true',\n  FALSE = 'false',\n}\n\nexport const linkVariants = cva(\n  'gap-3 transition-all duration-300 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        [`${LinkVariant.DEFAULT}`]:\n          'h-auto justify-start border-inherit bg-current/0 px-1 font-medium decoration-[1.5] underline-offset-5 hover:bg-current/0 hover:text-current/80 hover:underline hover:underline-offset-6',\n        [`${LinkVariant.INVISIBLE_LINK}`]:\n          'h-auto justify-start border-inherit bg-current/0 px-1 underline-offset-5 hover:bg-current/0',\n\n        [`${LinkVariant.BUTTON}`]:\n          'relative flex cursor-pointer flex-row items-center justify-center gap-2 rounded-full bg-current text-center font-medium text-text ring-0 *:text-text-opposite hover:bg-current/90 hover:ring-5 aria-selected:ring-5',\n\n        [`${LinkVariant.BUTTON_OUTLINED}`]:\n          'relative flex cursor-pointer flex-row items-center justify-center gap-2 rounded-full border-[1.3px] border-current text-center font-medium text-text ring-0 *:text-text hover:bg-current/20 hover:ring-5 aria-selected:ring-5',\n\n        [`${LinkVariant.HOVERABLE}`]:\n          'block rounded-lg border-none bg-current/0 hover:bg-current/10 aria-[current]:bg-current/5',\n      },\n      roundedSize: {\n        [`${LinkRoundedSize.NONE}`]: 'rounded-none',\n        [`${LinkRoundedSize.SM}`]:\n          'rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl',\n        [`${LinkRoundedSize.MD}`]:\n          'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n        [`${LinkRoundedSize.LG}`]:\n          'rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl',\n        [`${LinkRoundedSize.XL}`]:\n          'rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl',\n        [`${LinkRoundedSize.TWO_XL}`]:\n          'rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]',\n        [`${LinkRoundedSize.THREE_XL}`]:\n          'rounded-[2.5rem] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[3rem]',\n        [`${LinkRoundedSize.FULL}`]: 'rounded-full',\n      },\n      color: {\n        [`${LinkColor.PRIMARY}`]: 'text-primary',\n        [`${LinkColor.SECONDARY}`]: 'text-secondary',\n        [`${LinkColor.DESTRUCTIVE}`]: 'text-destructive',\n        [`${LinkColor.NEUTRAL}`]: 'text-neutral',\n        [`${LinkColor.LIGHT}`]: 'text-white',\n        [`${LinkColor.DARK}`]: 'text-neutral-800',\n        [`${LinkColor.TEXT}`]: 'text-text',\n        [`${LinkColor.TEXT_INVERSE}`]: 'text-text-opposite',\n        [`${LinkColor.ERROR}`]: 'text-error',\n        [`${LinkColor.SUCCESS}`]: 'text-success',\n        [`${LinkColor.CUSTOM}`]: '',\n      },\n      size: {\n        [`${LinkSize.SM}`]: 'text-sm',\n        [`${LinkSize.MD}`]: 'text-base',\n        [`${LinkSize.LG}`]: 'text-lg',\n        [`${LinkSize.XL}`]: 'text-xl',\n        [`${LinkSize.CUSTOM}`]: '',\n      },\n      underlined: {\n        [LinkUnderlined.DEFAULT]: '',\n        [LinkUnderlined.TRUE]: 'underline',\n        [LinkUnderlined.FALSE]: 'no-underline',\n      },\n    },\n    // Compound variants handle height and padding\n    compoundVariants: [\n      // ---------------------------------------------------------\n      // FIX START: Correctly Handle Contrast for TEXT_INVERSE\n      // ---------------------------------------------------------\n      {\n        // Filled Button + Inverse Color (e.g., White Button):\n        // We DO NOT override parent text color (it must remain 'text-opposite' so bg-current is white).\n        // We ONLY override children to be 'text-text' (Dark) so they show up on white.\n        variant: LinkVariant.BUTTON,\n        color: LinkColor.TEXT_INVERSE,\n        class: '*:text-text',\n      },\n      {\n        // Outlined Button + Inverse Color (e.g., White Border):\n        // Parent is 'text-opposite' (Border is white).\n        // Children must also be 'text-opposite' (White text) to show on dark background.\n        variant: LinkVariant.BUTTON_OUTLINED,\n        color: LinkColor.TEXT_INVERSE,\n        class: 'text-text-opposite *:text-text-opposite',\n      },\n\n      // Min height and padding for button variants\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        size: LinkSize.SM,\n        class: 'min-h-7 px-3 max-md:py-1',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        size: LinkSize.MD,\n        class: 'min-h-8 px-6 max-md:py-2',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        size: LinkSize.LG,\n        class: 'min-h-10 px-8 max-md:py-3',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        size: LinkSize.XL,\n        class: 'min-h-11 px-10 max-md:py-4',\n      },\n      // Ring color variants\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.PRIMARY,\n        class: 'ring-primary/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.SECONDARY,\n        class: 'ring-secondary/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.DESTRUCTIVE,\n        class: 'ring-destructive/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.NEUTRAL,\n        class: 'ring-neutral/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.LIGHT,\n        class: 'ring-white/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.DARK,\n        class: 'ring-neutral-800/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.TEXT,\n        class: 'ring-text/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.TEXT_INVERSE,\n        class: 'ring-text-opposite/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.ERROR,\n        class: 'ring-error/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.SUCCESS,\n        class: 'ring-success/20',\n      },\n    ],\n\n    defaultVariants: {\n      variant: LinkVariant.DEFAULT,\n      roundedSize: LinkRoundedSize.MD,\n      underlined: LinkUnderlined.DEFAULT,\n      size: LinkSize.MD,\n    },\n  }\n);\n\nexport type LinkProps = DetailedHTMLProps<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  HTMLAnchorElement\n> &\n  VariantProps<typeof linkVariants> & {\n    label: string;\n    isExternalLink?: boolean;\n    isPageSection?: boolean;\n    isActive?: boolean;\n    locale?: LocalesValues;\n  };\n\nexport const checkIsExternalLink = ({\n  href,\n  isExternalLink: isExternalLinkProp,\n}: LinkProps): boolean => {\n  const isValidHref = typeof href === 'string' && href.trim() !== '';\n  const isExternalLink =\n    isExternalLinkProp === true ||\n    (typeof isExternalLinkProp === 'undefined' &&\n      isValidHref &&\n      /^https?:\\/\\//.test(href));\n\n  return isExternalLink;\n};\n\nexport const isTextChildren = (children: ReactNode): boolean => {\n  if (typeof children === 'string' || typeof children === 'number') {\n    return true;\n  }\n  if (Array.isArray(children)) {\n    return children.every(isTextChildren);\n  }\n  if (isValidElement(children)) {\n    return isTextChildren(\n      (children.props as { children?: ReactNode }).children\n    );\n  }\n  return false;\n};\n\nexport const Link: FC<LinkProps> = (props) => {\n  const {\n    variant = LinkVariant.DEFAULT,\n    color = LinkColor.CUSTOM,\n    roundedSize,\n    children,\n    label,\n    className,\n    isActive,\n    underlined,\n    locale,\n    size,\n    isExternalLink: isExternalLinkProp,\n    isPageSection: isPageSectionProp,\n    href: hrefProp,\n    ...otherProps\n  } = props;\n\n  const isExternalLink = isExternalLinkProp ?? checkIsExternalLink(props);\n  const isPageSection = isPageSectionProp ?? hrefProp?.startsWith('#') ?? false;\n\n  const isChildrenString = isTextChildren(children);\n  const isButton =\n    variant === LinkVariant.BUTTON || variant === LinkVariant.BUTTON_OUTLINED;\n\n  const rel = isExternalLink ? 'noopener noreferrer nofollow' : undefined;\n\n  const target = isExternalLink ? '_blank' : '_self';\n\n  const href =\n    locale && hrefProp && !isExternalLink && !isPageSection\n      ? getLocalizedUrl(hrefProp, locale)\n      : hrefProp;\n\n  return (\n    <a\n      href={href}\n      aria-label={label}\n      rel={rel}\n      target={target}\n      aria-current={isActive ? 'page' : undefined}\n      className={cn(\n        linkVariants({\n          variant,\n          color,\n          roundedSize,\n          underlined,\n          size,\n          className,\n        })\n      )}\n      {...otherProps}\n    >\n      {isButton && isChildrenString ? <span>{children}</span> : children}\n\n      {isExternalLink && isChildrenString && (\n        <ExternalLink className=\"ml-2 inline-block size-4\" />\n      )}\n      {isPageSection && <MoveRight className=\"ml-2 inline-block size-4\" />}\n    </a>\n  );\n};\n"],"mappings":"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"}

package/dist/esm/components/MarkDownRender/MarkDownRender.mjs

@@ -1,2 +1,2 @@
-import{cn as e}from"../../utils/cn.mjs";import{Link as t}from"../Link/Link.mjs";import{H1 as n,H2 as r,H3 as i,H4 as a,H5 as o,H6 as s}from"../Headers/index.mjs";import{CodeProvider as c}from"../IDE/CodeContext.mjs";import{Code as l}from"../IDE/Code.mjs";import{TabProvider as u}from"../Tab/TabContext.mjs";import{Tab as d}from"../Tab/Tab.mjs";import{Table as f}from"../Table/Table.mjs";import{jsx as p}from"react/jsx-runtime";import{renderMarkdown as m}from"react-intlayer";const h=c=>({components:{h1:e=>p(n,{isClickable:!0,...e}),h2:e=>p(r,{isClickable:!0,className:`mt-16`,...e}),h3:e=>p(i,{isClickable:!0,className:`mt-5`,...e}),h4:e=>p(a,{isClickable:!0,className:`mt-3`,...e}),h5:e=>p(o,{isClickable:!0,className:`mt-3`,...e}),h6:e=>p(s,{isClickable:!0,className:`mt-3`,...e}),code:({className:e,children:t,...n})=>{let r=String(t??``).replace(/\n$/,``);if(!e)return p(`strong`,{className:`rounded bg-card/60 box-decoration-clone px-1 py-0.5 font-mono text-sm`,children:r});let i=e?.replace(/lang(?:uage)?-/,``)||`plaintext`;return p(l,{...n,language:i,showHeader:!0,isDarkMode:c,children:r})},blockquote:({className:t,...n})=>p(`blockquote`,{className:e(`mt-5 gap-3 border-card border-l-4 pl-5 text-neutral`,t),...n}),ul:({className:t,...n})=>p(`ul`,{className:e(`mt-5 flex list-disc flex-col gap-3 pl-5`,t),...n}),ol:({className:t,...n})=>p(`ol`,{className:e(`mt-5 flex list-decimal flex-col gap-3 pl-5`,t),...n}),img:({className:t,...n})=>p(`img`,{...n,alt:n.alt??``,loading:`lazy`,className:e(`max-h-[80vh] max-w-full rounded-md`,t),src:`${n.src}?raw=true`}),a:e=>p(t,{isExternalLink:e.href?.startsWith(`http`),underlined:!0,...e,color:`neutral`}),pre:e=>e.children,table:e=>p(f,{isRollable:!0,...e}),th:({className:t,...n})=>p(`th`,{className:e(`border-neutral border-b bg-neutral/10 p-4`,t),...n}),tr:({className:t,...n})=>p(`tr`,{className:e(`hover:/10 hover:bg-neutral/10`,t),...n}),td:({className:t,...n})=>p(`td`,{className:e(`border-neutral-500/50 border-b p-4`,t),...n}),hr:({className:t,...n})=>p(`hr`,{className:e(`mx-6 mt-16 text-neutral`,t),...n}),Tabs:e=>p(d,{...e,className:`rounded-xl border border-card`,headerClassName:`sticky rounded-xl top-24 z-5 bg-background/70 backdrop-blur overflow-x-auto`}),Tab:d.Item,Columns:({className:t,...n})=>p(`div`,{className:e(`flex gap-4 max-md:flex-col`,t),...n}),Column:({className:t,...n})=>p(`div`,{className:e(`flex-1`,t),...n})}}),g=({children:e,isDarkMode:n,locale:r,forceBlock:i,preserveFrontmatter:a,tagfilter:o,components:s,wrapper:d})=>{let f=h(n??!1);return p(c,{children:p(u,{children:m(e,{components:{...f.components,code:({className:e,children:t,...r})=>{let i=String(t??``).replace(/\n$/,``);if(!e)return p(`strong`,{className:`rounded bg-card/60 box-decoration-clone px-1 py-0.5 font-mono text-sm`,children:i});let a=e?.replace(/lang(?:uage)?-/,``)||`plaintext`;return p(l,{...r,language:a,showHeader:!0,isDarkMode:n,children:i})},a:e=>p(t,{isExternalLink:e.href?.startsWith(`http`),underlined:!0,locale:r,...e,color:`neutral`}),...s},wrapper:d??f.wrapper,forceBlock:i??f.forceBlock,preserveFrontmatter:a??f.preserveFrontmatter,tagfilter:o??f.tagfilter})})})};export{g as MarkdownRenderer,h as getIntlayerMarkdownOptions};
+import{cn as e}from"../../utils/cn.mjs";import{Link as t}from"../Link/Link.mjs";import{H1 as n,H2 as r,H3 as i,H4 as a,H5 as o,H6 as s}from"../Headers/index.mjs";import{CodeProvider as c}from"../IDE/CodeContext.mjs";import{Code as l}from"../IDE/Code.mjs";import{TabProvider as u}from"../Tab/TabContext.mjs";import{Tab as d}from"../Tab/Tab.mjs";import{Table as f}from"../Table/Table.mjs";import{jsx as p}from"react/jsx-runtime";import{renderMarkdown as m}from"react-intlayer";const h=c=>({components:{h1:e=>p(n,{isClickable:!0,className:`text-text`,...e}),h2:e=>p(r,{isClickable:!0,className:`mt-16 text-text`,...e}),h3:e=>p(i,{isClickable:!0,className:`mt-5 text-text`,...e}),h4:e=>p(a,{isClickable:!0,className:`mt-3 text-text`,...e}),h5:e=>p(o,{isClickable:!0,className:`mt-3 text-text`,...e}),h6:e=>p(s,{isClickable:!0,className:`mt-3 text-text`,...e}),strong:e=>p(`strong`,{className:`text-text`,...e}),code:({className:e,children:t,...n})=>{let r=String(t??``).replace(/\n$/,``);if(!e)return p(`code`,{className:`rounded-md border border-neutral/30 bg-card/60 box-decoration-clone px-1.5 py-0.5 font-mono text-sm`,children:r});let i=e?.replace(/lang(?:uage)?-/,``)||`plaintext`;return p(l,{...n,language:i,showHeader:!0,isDarkMode:c,children:r})},blockquote:({className:t,...n})=>p(`blockquote`,{className:e(`mt-5 gap-3 border-card border-l-4 pl-5 text-neutral`,`[&_strong]:text-neutral`,t),...n}),ul:({className:t,...n})=>p(`ul`,{className:e(`mt-5 flex list-disc flex-col gap-3 pl-5 marker:text-neutral/80`,t),...n}),ol:({className:t,...n})=>p(`ol`,{className:e(`mt-5 flex list-decimal flex-col gap-3 pl-5 marker:text-neutral/80`,t),...n}),img:({className:t,...n})=>p(`img`,{...n,alt:n.alt??``,loading:`lazy`,className:e(`max-h-[80vh] max-w-full rounded-md`,t),src:`${n.src}?raw=true`}),a:e=>p(t,{isExternalLink:e.href?.startsWith(`http`),underlined:!0,...e}),pre:e=>e.children,table:e=>p(f,{isRollable:!0,...e}),th:({className:t,...n})=>p(`th`,{className:e(`border-neutral border-b bg-neutral/10 p-4`,t),...n}),tr:({className:t,...n})=>p(`tr`,{className:e(`hover:/10 hover:bg-neutral/10`,t),...n}),td:({className:t,...n})=>p(`td`,{className:e(`border-neutral-500/50 border-b p-4`,t),...n}),hr:({className:t,...n})=>p(`hr`,{className:e(`mx-6 mt-16 text-neutral`,t),...n}),Tabs:e=>p(d,{...e,className:`rounded-xl border border-card`,headerClassName:`sticky rounded-xl top-24 z-5 bg-background/70 backdrop-blur overflow-x-auto`}),Tab:d.Item,Columns:({className:t,...n})=>p(`div`,{className:e(`flex gap-4 max-md:flex-col`,t),...n}),Column:({className:t,...n})=>p(`div`,{className:e(`flex-1`,t),...n})}}),g=({children:e,isDarkMode:n,locale:r,forceBlock:i,preserveFrontmatter:a,tagfilter:o,components:s,wrapper:d})=>{let f=h(n??!1);return p(c,{children:p(u,{children:m(e,{components:{...f.components,code:({className:e,children:t,...r})=>{let i=String(t??``).replace(/\n$/,``);if(!e)return p(`code`,{className:`rounded-md border border-neutral/30 bg-card/60 box-decoration-clone px-1.5 py-0.5 font-mono text-sm`,children:i});let a=e?.replace(/lang(?:uage)?-/,``)||`plaintext`;return p(l,{...r,language:a,showHeader:!0,isDarkMode:n,children:i})},a:e=>p(t,{isExternalLink:e.href?.startsWith(`http`),underlined:!0,locale:r,label:``,...e,color:`text`}),...s},wrapper:d??f.wrapper,forceBlock:i??f.forceBlock,preserveFrontmatter:a??f.preserveFrontmatter,tagfilter:o??f.tagfilter})})})};export{g as MarkdownRenderer,h as getIntlayerMarkdownOptions};
 //# sourceMappingURL=MarkDownRender.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"MarkDownRender.mjs","names":[],"sources":["../../../../src/components/MarkDownRender/MarkDownRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/types';\nimport { cn } from '@utils/cn';\nimport type { ComponentProps, ComponentPropsWithoutRef, FC } from 'react';\nimport {\n  type MarkdownRenderer as MarkdownRendererIntlayer,\n  type RenderMarkdownProps,\n  renderMarkdown,\n} from 'react-intlayer';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { H1, H2, H3, H4, H5, H6 } from '../Headers';\nimport { Code } from '../IDE/Code';\nimport { CodeProvider } from '../IDE/CodeContext';\nimport { Link } from '../Link';\nimport { Tab } from '../Tab';\nimport { TabProvider } from '../Tab/TabContext';\nimport { Table } from '../Table';\n\ntype MarkdownRendererProps = {\n  children: string;\n  isDarkMode?: boolean;\n  locale?: LocalesValues;\n  forceBlock?: boolean;\n  preserveFrontmatter?: boolean;\n  tagfilter?: boolean;\n  components?: ComponentProps<typeof MarkdownRendererIntlayer>['components'];\n  wrapper?: ComponentProps<typeof MarkdownRendererIntlayer>['wrapper'];\n};\n\nexport const getIntlayerMarkdownOptions: (\n  isDarkMode: boolean\n) => RenderMarkdownProps = (isDarkMode) => ({\n  components: {\n    h1: (props) => <H1 isClickable={true} {...props} />,\n    h2: (props) => <H2 isClickable={true} className=\"mt-16\" {...props} />,\n    h3: (props) => <H3 isClickable={true} className=\"mt-5\" {...props} />,\n    h4: (props) => <H4 isClickable={true} className=\"mt-3\" {...props} />,\n    h5: (props) => <H5 isClickable={true} className=\"mt-3\" {...props} />,\n    h6: (props) => <H6 isClickable={true} className=\"mt-3\" {...props} />,\n\n    code: ({ className, children, ...rest }: ComponentProps<'code'>) => {\n      // Ensure children is a string (Markdown renderer might pass ReactNodes)\n      const content = String(children ?? '').replace(/\\n$/, '');\n\n      // Determine if it is inline code or a code block\n      // Code blocks usually have a className like 'language-ts'\n      const isBlock = !!className;\n\n      if (!isBlock) {\n        return (\n          <strong className=\"rounded bg-card/60 box-decoration-clone px-1 py-0.5 font-mono text-sm\">\n            {content}\n          </strong>\n        );\n      }\n\n      // Extract language from className (e.g., \"language-typescript\" -> \"typescript\")\n      const language = (className?.replace(/lang(?:uage)?-/, '') ||\n        'plaintext') as BundledLanguage;\n\n      return (\n        <Code\n          {...rest}\n          language={language}\n          showHeader={true}\n          isDarkMode={isDarkMode} // Ensure this variable is available in scope\n        >\n          {content}\n        </Code>\n      );\n    },\n\n    blockquote: ({ className, ...props }) => (\n      <blockquote\n        className={cn(\n          'mt-5 gap-3 border-card border-l-4 pl-5 text-neutral',\n          className\n        )}\n        {...props}\n      />\n    ),\n    ul: ({ className, ...props }) => (\n      <ul\n        className={cn('mt-5 flex list-disc flex-col gap-3 pl-5', className)}\n        {...props}\n      />\n    ),\n    ol: ({ className, ...props }) => (\n      <ol\n        className={cn('mt-5 flex list-decimal flex-col gap-3 pl-5', className)}\n        {...props}\n      />\n    ),\n    img: ({ className, ...props }) => (\n      <img\n        {...props}\n        alt={props.alt ?? ''}\n        loading=\"lazy\"\n        className={cn('max-h-[80vh] max-w-full rounded-md', className)}\n        src={`${props.src}?raw=true`}\n      />\n    ),\n    a: (props) => (\n      // @ts-expect-error - label is not required in LinkProps\n      <Link\n        isExternalLink={props.href?.startsWith('http')}\n        underlined={true}\n        // locale={locale}\n        {...props}\n        color=\"neutral\"\n      />\n    ),\n    pre: (props) => props.children,\n\n    table: (props: ComponentProps<typeof Table>) => (\n      <Table isRollable={true} {...props} />\n    ),\n    th: ({ className, ...props }) => (\n      <th\n        className={cn('border-neutral border-b bg-neutral/10 p-4', className)}\n        {...props}\n      />\n    ),\n    tr: ({ className, ...props }) => (\n      <tr\n        className={cn('hover:/10 hover:bg-neutral/10', className)}\n        {...props}\n      />\n    ),\n    td: ({ className, ...props }) => (\n      <td\n        className={cn('border-neutral-500/50 border-b p-4', className)}\n        {...props}\n      />\n    ),\n    hr: ({ className, ...props }) => (\n      <hr className={cn('mx-6 mt-16 text-neutral', className)} {...props} />\n    ),\n    Tabs: (props: ComponentProps<typeof Tab>) => (\n      <Tab\n        {...props}\n        className=\"rounded-xl border border-card\"\n        headerClassName=\"sticky rounded-xl top-24 z-5 bg-background/70 backdrop-blur overflow-x-auto\"\n      />\n    ),\n    Tab: Tab.Item,\n    Columns: ({ className, ...props }: ComponentPropsWithoutRef<'div'>) => (\n      <div className={cn('flex gap-4 max-md:flex-col', className)} {...props} />\n    ),\n    Column: ({ className, ...props }: ComponentPropsWithoutRef<'div'>) => (\n      <div className={cn('flex-1', className)} {...props} />\n    ),\n  },\n});\n\n/**\n * MarkdownRenderer Component\n *\n * A comprehensive markdown renderer that transforms markdown text into rich,\n * interactive HTML with custom styling and Intlayer integration. Supports\n * code syntax highlighting, responsive tables, internationalized links,\n * and automatic frontmatter stripping.\n *\n * @component\n */\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n  children,\n  isDarkMode,\n  locale,\n  forceBlock,\n  preserveFrontmatter,\n  tagfilter,\n  components: componentsProp,\n  wrapper,\n}) => {\n  const markdownOptions = getIntlayerMarkdownOptions(isDarkMode ?? false);\n\n  const markdownContent = renderMarkdown(children, {\n    components: {\n      ...markdownOptions.components,\n      // Pass dynamic props to components\n      code: ({ className, children, ...rest }: ComponentProps<'code'>) => {\n        // Ensure children is a string (Markdown renderer might pass ReactNodes)\n        const content = String(children ?? '').replace(/\\n$/, '');\n\n        // Determine if it is inline code or a code block\n        // Code blocks usually have a className like 'language-ts'\n        const isBlock = !!className;\n\n        if (!isBlock) {\n          return (\n            <strong className=\"rounded bg-card/60 box-decoration-clone px-1 py-0.5 font-mono text-sm\">\n              {content}\n            </strong>\n          );\n        }\n\n        // Extract language from className (e.g., \"language-typescript\" -> \"typescript\")\n        const language = (className?.replace(/lang(?:uage)?-/, '') ||\n          'plaintext') as BundledLanguage;\n\n        return (\n          <Code\n            {...rest}\n            language={language}\n            showHeader={true}\n            isDarkMode={isDarkMode} // Ensure this variable is available in scope\n          >\n            {content}\n          </Code>\n        );\n      },\n\n      a: (props) => (\n        // @ts-expect-error - label is not required in LinkProps\n        <Link\n          isExternalLink={props.href?.startsWith('http')}\n          underlined={true}\n          locale={locale}\n          {...props}\n          color=\"neutral\"\n        />\n      ),\n      ...componentsProp,\n    },\n    wrapper: wrapper ?? markdownOptions.wrapper,\n    forceBlock: forceBlock ?? markdownOptions.forceBlock,\n    preserveFrontmatter:\n      preserveFrontmatter ?? markdownOptions.preserveFrontmatter,\n    tagfilter: tagfilter ?? markdownOptions.tagfilter,\n  });\n\n  return (\n    <CodeProvider>\n      <TabProvider>{markdownContent}</TabProvider>\n    </CodeProvider>\n  );\n};\n"],"mappings":"2dA4BA,MAAa,EAEe,IAAgB,CAC1C,WAAY,CACV,GAAK,GAAU,EAAC,EAAA,CAAG,YAAa,GAAM,GAAI,GAAS,CACnD,GAAK,GAAU,EAAC,EAAA,CAAG,YAAa,GAAM,UAAU,QAAQ,GAAI,GAAS,CACrE,GAAK,GAAU,EAAC,EAAA,CAAG,YAAa,GAAM,UAAU,OAAO,GAAI,GAAS,CACpE,GAAK,GAAU,EAAC,EAAA,CAAG,YAAa,GAAM,UAAU,OAAO,GAAI,GAAS,CACpE,GAAK,GAAU,EAAC,EAAA,CAAG,YAAa,GAAM,UAAU,OAAO,GAAI,GAAS,CACpE,GAAK,GAAU,EAAC,EAAA,CAAG,YAAa,GAAM,UAAU,OAAO,GAAI,GAAS,CAEpE,MAAO,CAAE,YAAW,WAAU,GAAG,KAAmC,CAElE,IAAM,EAAU,OAAO,GAAY,GAAG,CAAC,QAAQ,MAAO,GAAG,CAMzD,GAAI,CAFc,EAGhB,OACE,EAAC,SAAA,CAAO,UAAU,iFACf,GACM,CAKb,IAAM,EAAY,GAAW,QAAQ,iBAAkB,GAAG,EACxD,YAEF,OACE,EAAC,EAAA,CACC,GAAI,EACM,WACV,WAAY,GACA,sBAEX,GACI,EAIX,YAAa,CAAE,YAAW,GAAG,KAC3B,EAAC,aAAA,CACC,UAAW,EACT,sDACA,EACD,CACD,GAAI,GACJ,CAEJ,IAAK,CAAE,YAAW,GAAG,KACnB,EAAC,KAAA,CACC,UAAW,EAAG,0CAA2C,EAAU,CACnE,GAAI,GACJ,CAEJ,IAAK,CAAE,YAAW,GAAG,KACnB,EAAC,KAAA,CACC,UAAW,EAAG,6CAA8C,EAAU,CACtE,GAAI,GACJ,CAEJ,KAAM,CAAE,YAAW,GAAG,KACpB,EAAC,MAAA,CACC,GAAI,EACJ,IAAK,EAAM,KAAO,GAClB,QAAQ,OACR,UAAW,EAAG,qCAAsC,EAAU,CAC9D,IAAK,GAAG,EAAM,IAAI,YAClB,CAEJ,EAAI,GAEF,EAAC,EAAA,CACC,eAAgB,EAAM,MAAM,WAAW,OAAO,CAC9C,WAAY,GAEZ,GAAI,EACJ,MAAM,WACN,CAEJ,IAAM,GAAU,EAAM,SAEtB,MAAQ,GACN,EAAC,EAAA,CAAM,WAAY,GAAM,GAAI,GAAS,CAExC,IAAK,CAAE,YAAW,GAAG,KACnB,EAAC,KAAA,CACC,UAAW,EAAG,4CAA6C,EAAU,CACrE,GAAI,GACJ,CAEJ,IAAK,CAAE,YAAW,GAAG,KACnB,EAAC,KAAA,CACC,UAAW,EAAG,gCAAiC,EAAU,CACzD,GAAI,GACJ,CAEJ,IAAK,CAAE,YAAW,GAAG,KACnB,EAAC,KAAA,CACC,UAAW,EAAG,qCAAsC,EAAU,CAC9D,GAAI,GACJ,CAEJ,IAAK,CAAE,YAAW,GAAG,KACnB,EAAC,KAAA,CAAG,UAAW,EAAG,0BAA2B,EAAU,CAAE,GAAI,GAAS,CAExE,KAAO,GACL,EAAC,EAAA,CACC,GAAI,EACJ,UAAU,gCACV,gBAAgB,+EAChB,CAEJ,IAAK,EAAI,KACT,SAAU,CAAE,YAAW,GAAG,KACxB,EAAC,MAAA,CAAI,UAAW,EAAG,6BAA8B,EAAU,CAAE,GAAI,GAAS,CAE5E,QAAS,CAAE,YAAW,GAAG,KACvB,EAAC,MAAA,CAAI,UAAW,EAAG,SAAU,EAAU,CAAE,GAAI,GAAS,CAEzD,CACF,EAYY,GAA+C,CAC1D,WACA,aACA,SACA,aACA,sBACA,YACA,WAAY,EACZ,aACI,CACJ,IAAM,EAAkB,EAA2B,GAAc,GAAM,CAyDvE,OACE,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CAAA,SAzDmB,EAAe,EAAU,CAC/C,WAAY,CACV,GAAG,EAAgB,WAEnB,MAAO,CAAE,YAAW,WAAU,GAAG,KAAmC,CAElE,IAAM,EAAU,OAAO,GAAY,GAAG,CAAC,QAAQ,MAAO,GAAG,CAMzD,GAAI,CAFc,EAGhB,OACE,EAAC,SAAA,CAAO,UAAU,iFACf,GACM,CAKb,IAAM,EAAY,GAAW,QAAQ,iBAAkB,GAAG,EACxD,YAEF,OACE,EAAC,EAAA,CACC,GAAI,EACM,WACV,WAAY,GACA,sBAEX,GACI,EAIX,EAAI,GAEF,EAAC,EAAA,CACC,eAAgB,EAAM,MAAM,WAAW,OAAO,CAC9C,WAAY,GACJ,SACR,GAAI,EACJ,MAAM,WACN,CAEJ,GAAG,EACJ,CACD,QAAS,GAAW,EAAgB,QACpC,WAAY,GAAc,EAAgB,WAC1C,oBACE,GAAuB,EAAgB,oBACzC,UAAW,GAAa,EAAgB,UACzC,CAAC,CAAA,CAI8C,CAAA,CAC/B"}
+{"version":3,"file":"MarkDownRender.mjs","names":[],"sources":["../../../../src/components/MarkDownRender/MarkDownRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/types';\nimport { cn } from '@utils/cn';\nimport type { ComponentProps, ComponentPropsWithoutRef, FC } from 'react';\nimport {\n  type MarkdownRenderer as MarkdownRendererIntlayer,\n  type RenderMarkdownProps,\n  renderMarkdown,\n} from 'react-intlayer';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { H1, H2, H3, H4, H5, H6 } from '../Headers';\nimport { Code } from '../IDE/Code';\nimport { CodeProvider } from '../IDE/CodeContext';\nimport { Link } from '../Link';\nimport { Tab } from '../Tab';\nimport { TabProvider } from '../Tab/TabContext';\nimport { Table } from '../Table';\n\ntype MarkdownRendererProps = {\n  children: string;\n  isDarkMode?: boolean;\n  locale?: LocalesValues;\n  forceBlock?: boolean;\n  preserveFrontmatter?: boolean;\n  tagfilter?: boolean;\n  components?: ComponentProps<typeof MarkdownRendererIntlayer>['components'];\n  wrapper?: ComponentProps<typeof MarkdownRendererIntlayer>['wrapper'];\n};\n\nexport const getIntlayerMarkdownOptions: (\n  isDarkMode: boolean\n) => RenderMarkdownProps = (isDarkMode) => ({\n  components: {\n    h1: (props) => <H1 isClickable={true} className=\"text-text\" {...props} />,\n    h2: (props) => (\n      <H2 isClickable={true} className=\"mt-16 text-text\" {...props} />\n    ),\n    h3: (props) => (\n      <H3 isClickable={true} className=\"mt-5 text-text\" {...props} />\n    ),\n    h4: (props) => (\n      <H4 isClickable={true} className=\"mt-3 text-text\" {...props} />\n    ),\n    h5: (props) => (\n      <H5 isClickable={true} className=\"mt-3 text-text\" {...props} />\n    ),\n    h6: (props) => (\n      <H6 isClickable={true} className=\"mt-3 text-text\" {...props} />\n    ),\n    strong: (props) => <strong className=\"text-text\" {...props} />,\n\n    code: ({ className, children, ...rest }: ComponentProps<'code'>) => {\n      // Ensure children is a string (Markdown renderer might pass ReactNodes)\n      const content = String(children ?? '').replace(/\\n$/, '');\n\n      // Determine if it is inline code or a code block\n      // Code blocks usually have a className like 'language-ts'\n      const isBlock = !!className;\n\n      if (!isBlock) {\n        return (\n          <code className=\"rounded-md border border-neutral/30 bg-card/60 box-decoration-clone px-1.5 py-0.5 font-mono text-sm\">\n            {content}\n          </code>\n        );\n      }\n\n      // Extract language from className (e.g., \"language-typescript\" -> \"typescript\")\n      const language = (className?.replace(/lang(?:uage)?-/, '') ||\n        'plaintext') as BundledLanguage;\n\n      return (\n        <Code\n          {...rest}\n          language={language}\n          showHeader={true}\n          isDarkMode={isDarkMode} // Ensure this variable is available in scope\n        >\n          {content}\n        </Code>\n      );\n    },\n    blockquote: ({ className, ...props }) => (\n      <blockquote\n        className={cn(\n          'mt-5 gap-3 border-card border-l-4 pl-5 text-neutral',\n          '[&_strong]:text-neutral',\n          className\n        )}\n        {...props}\n      />\n    ),\n    ul: ({ className, ...props }) => (\n      <ul\n        className={cn(\n          'mt-5 flex list-disc flex-col gap-3 pl-5 marker:text-neutral/80',\n          className\n        )}\n        {...props}\n      />\n    ),\n    ol: ({ className, ...props }) => (\n      <ol\n        className={cn(\n          'mt-5 flex list-decimal flex-col gap-3 pl-5 marker:text-neutral/80',\n          className\n        )}\n        {...props}\n      />\n    ),\n    img: ({ className, ...props }) => (\n      <img\n        {...props}\n        alt={props.alt ?? ''}\n        loading=\"lazy\"\n        className={cn('max-h-[80vh] max-w-full rounded-md', className)}\n        src={`${props.src}?raw=true`}\n      />\n    ),\n    a: (props) => (\n      // @ts-expect-error - label is not required in LinkProps\n      <Link\n        isExternalLink={props.href?.startsWith('http')}\n        underlined={true}\n        // locale={locale}\n        {...props}\n      />\n    ),\n    pre: (props) => props.children,\n\n    table: (props: ComponentProps<typeof Table>) => (\n      <Table isRollable={true} {...props} />\n    ),\n    th: ({ className, ...props }) => (\n      <th\n        className={cn('border-neutral border-b bg-neutral/10 p-4', className)}\n        {...props}\n      />\n    ),\n    tr: ({ className, ...props }) => (\n      <tr\n        className={cn('hover:/10 hover:bg-neutral/10', className)}\n        {...props}\n      />\n    ),\n    td: ({ className, ...props }) => (\n      <td\n        className={cn('border-neutral-500/50 border-b p-4', className)}\n        {...props}\n      />\n    ),\n    hr: ({ className, ...props }) => (\n      <hr className={cn('mx-6 mt-16 text-neutral', className)} {...props} />\n    ),\n    Tabs: (props: ComponentProps<typeof Tab>) => (\n      <Tab\n        {...props}\n        className=\"rounded-xl border border-card\"\n        headerClassName=\"sticky rounded-xl top-24 z-5 bg-background/70 backdrop-blur overflow-x-auto\"\n      />\n    ),\n    Tab: Tab.Item,\n    Columns: ({ className, ...props }: ComponentPropsWithoutRef<'div'>) => (\n      <div className={cn('flex gap-4 max-md:flex-col', className)} {...props} />\n    ),\n    Column: ({ className, ...props }: ComponentPropsWithoutRef<'div'>) => (\n      <div className={cn('flex-1', className)} {...props} />\n    ),\n  },\n});\n\n/**\n * MarkdownRenderer Component\n *\n * A comprehensive markdown renderer that transforms markdown text into rich,\n * interactive HTML with custom styling and Intlayer integration. Supports\n * code syntax highlighting, responsive tables, internationalized links,\n * and automatic frontmatter stripping.\n *\n * @component\n */\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n  children,\n  isDarkMode,\n  locale,\n  forceBlock,\n  preserveFrontmatter,\n  tagfilter,\n  components: componentsProp,\n  wrapper,\n}) => {\n  const markdownOptions = getIntlayerMarkdownOptions(isDarkMode ?? false);\n\n  const markdownContent = renderMarkdown(children, {\n    components: {\n      ...markdownOptions.components,\n      // Pass dynamic props to components\n      code: ({ className, children, ...rest }: ComponentProps<'code'>) => {\n        // Ensure children is a string (Markdown renderer might pass ReactNodes)\n        const content = String(children ?? '').replace(/\\n$/, '');\n\n        // Determine if it is inline code or a code block\n        // Code blocks usually have a className like 'language-ts'\n        const isBlock = !!className;\n\n        if (!isBlock) {\n          return (\n            <code className=\"rounded-md border border-neutral/30 bg-card/60 box-decoration-clone px-1.5 py-0.5 font-mono text-sm\">\n              {content}\n            </code>\n          );\n        }\n\n        // Extract language from className (e.g., \"language-typescript\" -> \"typescript\")\n        const language = (className?.replace(/lang(?:uage)?-/, '') ||\n          'plaintext') as BundledLanguage;\n\n        return (\n          <Code\n            {...rest}\n            language={language}\n            showHeader={true}\n            isDarkMode={isDarkMode} // Ensure this variable is available in scope\n          >\n            {content}\n          </Code>\n        );\n      },\n\n      a: (props) => (\n        <Link\n          isExternalLink={props.href?.startsWith('http')}\n          underlined={true}\n          locale={locale}\n          label=\"\"\n          {...props}\n          color=\"text\"\n        />\n      ),\n      ...componentsProp,\n    },\n    wrapper: wrapper ?? markdownOptions.wrapper,\n    forceBlock: forceBlock ?? markdownOptions.forceBlock,\n    preserveFrontmatter:\n      preserveFrontmatter ?? markdownOptions.preserveFrontmatter,\n    tagfilter: tagfilter ?? markdownOptions.tagfilter,\n  });\n\n  return (\n    <CodeProvider>\n      <TabProvider>{markdownContent}</TabProvider>\n    </CodeProvider>\n  );\n};\n"],"mappings":"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"}

package/dist/esm/components/Pagination/NumberItemsSelector.mjs

@@ -1,2 +1,2 @@
-"use client";import{Select as e}from"../Select/Select.mjs";import{jsx as t,jsxs as n}from"react/jsx-runtime";import{useIntlayer as r}from"react-intlayer";const i=({value:i,onValueChange:a,min:o=5,max:s=500})=>{let{numberItemsSelector:c,selectPageSize:l}=r(`pagination`),u=[1,2,5,10,20,50,100,200,500,1e3,2e3,5e3,1e4,1e5].filter(e=>e>=o&&e<=s);return n(`div`,{className:`flex items-center gap-2`,children:[t(`span`,{className:`text-neutral-600 text-sm dark:text-neutral-400`,children:c}),n(e,{value:i,onValueChange:a,children:[t(e.Trigger,{className:`w-20`,children:t(e.Value,{placeholder:l})}),t(e.Content,{children:u.map(n=>t(e.Item,{value:n.toString(),children:n},n))})]})]})};export{i as NumberItemsSelector};
+"use client";import{Select as e}from"../Select/Select.mjs";import{jsx as t,jsxs as n}from"react/jsx-runtime";import{useIntlayer as r}from"react-intlayer";const i=({value:i,onValueChange:a,min:o=5,max:s=500})=>{let{numberItemsSelector:c,selectPageSize:l}=r(`pagination`),u=[1,2,5,10,20,50,100,200,500,1e3,2e3,5e3,1e4,1e5].filter(e=>e>=o&&e<=s);return n(`div`,{className:`flex items-center gap-2`,children:[t(`span`,{className:`text-neutral-600 text-sm dark:text-neutral-400`,children:c}),n(e,{value:i.toString(),onValueChange:a,children:[t(e.Trigger,{className:`w-20`,children:t(e.Value,{placeholder:l})}),t(e.Content,{children:u.map(n=>t(e.Item,{value:n.toString(),children:n},n))})]})]})};export{i as NumberItemsSelector};
 //# sourceMappingURL=NumberItemsSelector.mjs.map

package/dist/esm/components/Pagination/NumberItemsSelector.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NumberItemsSelector.mjs","names":[],"sources":["../../../../src/components/Pagination/NumberItemsSelector.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Select } from '../Select';\n\nexport type NumberItemsSelectorProps = {\n  value: string;\n  onValueChange: (value: string) => void;\n  min?: number;\n  max?: number;\n};\n\nexport const NumberItemsSelector: FC<NumberItemsSelectorProps> = ({\n  value,\n  onValueChange,\n  min = 5,\n  max = 500,\n}) => {\n  const { numberItemsSelector, selectPageSize } = useIntlayer('pagination');\n\n  const items = [\n    1, 2, 5, 10, 20, 50, 100, 200, 500, 1000, 2000, 5000, 10000, 100000,\n  ].filter((item) => item >= min && item <= max);\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      <span className=\"text-neutral-600 text-sm dark:text-neutral-400\">\n        {numberItemsSelector}\n      </span>\n      <Select value={value} onValueChange={onValueChange}>\n        <Select.Trigger className=\"w-20\">\n          <Select.Value placeholder={selectPageSize} />\n        </Select.Trigger>\n        <Select.Content>\n          {items.map((item) => (\n            <Select.Item key={item} value={item.toString()}>\n              {item}\n            </Select.Item>\n          ))}\n        </Select.Content>\n      </Select>\n    </div>\n  );\n};\n"],"mappings":"0JAaA,MAAa,GAAqD,CAChE,QACA,gBACA,MAAM,EACN,MAAM,OACF,CACJ,GAAM,CAAE,sBAAqB,kBAAmB,EAAY,aAAa,CAEnE,EAAQ,CACZ,EAAG,EAAG,EAAG,GAAI,GAAI,GAAI,IAAK,IAAK,IAAK,IAAM,IAAM,IAAM,IAAO,IAC9D,CAAC,OAAQ,GAAS,GAAQ,GAAO,GAAQ,EAAI,CAE9C,OACE,EAAC,MAAA,CAAI,UAAU,oCACb,EAAC,OAAA,CAAK,UAAU,0DACb,GACI,CACP,EAAC,EAAA,CAAc,QAAsB,0BACnC,EAAC,EAAO,QAAA,CAAQ,UAAU,gBACxB,EAAC,EAAO,MAAA,CAAM,YAAa,EAAA,CAAkB,EAC9B,CACjB,EAAC,EAAO,QAAA,CAAA,SACL,EAAM,IAAK,GACV,EAAC,EAAO,KAAA,CAAgB,MAAO,EAAK,UAAU,UAC3C,GADe,EAEJ,CACd,CAAA,CACa,CAAA,EACV,CAAA,EACL"}
+{"version":3,"file":"NumberItemsSelector.mjs","names":[],"sources":["../../../../src/components/Pagination/NumberItemsSelector.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Select } from '../Select';\n\nexport type NumberItemsSelectorProps = {\n  value: string | number;\n  onValueChange: (value: string) => void;\n  min?: number;\n  max?: number;\n};\n\nexport const NumberItemsSelector: FC<NumberItemsSelectorProps> = ({\n  value,\n  onValueChange,\n  min = 5,\n  max = 500,\n}) => {\n  const { numberItemsSelector, selectPageSize } = useIntlayer('pagination');\n\n  const items = [\n    1, 2, 5, 10, 20, 50, 100, 200, 500, 1000, 2000, 5000, 10000, 100000,\n  ].filter((item) => item >= min && item <= max);\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      <span className=\"text-neutral-600 text-sm dark:text-neutral-400\">\n        {numberItemsSelector}\n      </span>\n      <Select value={value.toString()} onValueChange={onValueChange}>\n        <Select.Trigger className=\"w-20\">\n          <Select.Value placeholder={selectPageSize} />\n        </Select.Trigger>\n        <Select.Content>\n          {items.map((item) => (\n            <Select.Item key={item} value={item.toString()}>\n              {item}\n            </Select.Item>\n          ))}\n        </Select.Content>\n      </Select>\n    </div>\n  );\n};\n"],"mappings":"0JAaA,MAAa,GAAqD,CAChE,QACA,gBACA,MAAM,EACN,MAAM,OACF,CACJ,GAAM,CAAE,sBAAqB,kBAAmB,EAAY,aAAa,CAEnE,EAAQ,CACZ,EAAG,EAAG,EAAG,GAAI,GAAI,GAAI,IAAK,IAAK,IAAK,IAAM,IAAM,IAAM,IAAO,IAC9D,CAAC,OAAQ,GAAS,GAAQ,GAAO,GAAQ,EAAI,CAE9C,OACE,EAAC,MAAA,CAAI,UAAU,oCACb,EAAC,OAAA,CAAK,UAAU,0DACb,GACI,CACP,EAAC,EAAA,CAAO,MAAO,EAAM,UAAU,CAAiB,0BAC9C,EAAC,EAAO,QAAA,CAAQ,UAAU,gBACxB,EAAC,EAAO,MAAA,CAAM,YAAa,EAAA,CAAkB,EAC9B,CACjB,EAAC,EAAO,QAAA,CAAA,SACL,EAAM,IAAK,GACV,EAAC,EAAO,KAAA,CAAgB,MAAO,EAAK,UAAU,UAC3C,GADe,EAEJ,CACd,CAAA,CACa,CAAA,EACV,CAAA,EACL"}

package/dist/esm/components/Tab/Tab.mjs

@@ -1,2 +1,2 @@
-"use client";import{cn as e}from"../../utils/cn.mjs";import{useHorizontalSwipe as t}from"../../hooks/useHorizontalSwipe.mjs";import{TabSelector as n,TabSelectorColor as r}from"../TabSelector/TabSelector.mjs";import{useTabContext as i}from"./TabContext.mjs";import{Children as a,createContext as o,isValidElement as s,useState as c}from"react";import{cva as l}from"class-variance-authority";import{jsx as u,jsxs as d}from"react/jsx-runtime";const f=o(void 0),p=l(`relative w-full rounded-lg`,{variants:{background:{with:`border border-neutral/20 bg-background/2 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur`,without:``},variant:{default:``,bordered:`border-2`,ghost:`border-0 bg-transparent shadow-none`}},defaultVariants:{variant:`default`}}),m=({children:e,...t})=>u(`div`,{...t,children:e});m.displayName=`TabItem`;const h=Object.assign(({defaultTab:o,group:l,variant:h,children:g,className:_,headerClassName:v,fullHeight:y,...b})=>{let x=a.toArray(g).filter(e=>s(e)&&e.type===m),S=x[0]?.props?.value,{tabsValues:C,setTabsValues:w}=i(),[T,E]=c(o??S??``),D=(l&&typeof C==`object`?C?.[l]:T)??o??S,O=x.findIndex(e=>e.props.value===D),k=x.length,{containerProps:A,dragDeltaPct:j,isDragging:M}=t({itemIndex:O,itemCount:k,onSwipeLeft:()=>{let e=x[Math.min(k-1,O+1)]?.props?.value;e&&N(e)},onSwipeRight:()=>{let e=x[Math.max(0,O-1)]?.props?.value;e&&N(e)}}),N=e=>{E(e),typeof w==`function`&&w(t=>({...t,[l]:e}))},P={activeTab:T??S??``,setActiveTab:N};return u(f.Provider,{value:P,children:d(`div`,{className:e(p({variant:h}),y&&`flex h-full flex-col overflow-hidden`,_),...b,children:[u(`div`,{className:e(`flex shrink-0 gap-3 p-3`,v),children:u(n,{selectedChoice:D,tabs:x.map(t=>{let{label:n,value:r,disabled:i}=t.props,a=D===r;return u(`button`,{className:e(`cursor-pointer whitespace-nowrap rounded-md px-4 py-1 font-medium text-sm transition-colors focus:outline-none`,!a&&`text-neutral/70`),"data-active":a,disabled:i,onClick:()=>!i&&N(r),role:`tab`,"aria-selected":a,"aria-controls":`tabpanel-${r}`,id:`tab-${r}`,type:`button`,children:n},r)}),hoverable:!0,color:r.TEXT})}),u(`div`,{className:e(`relative w-full min-w-0 overflow-x-clip [-webkit-clip-path:inset(0)] [clip-path:inset(0)]`,y&&`min-h-0 flex-1`),...A,children:u(`div`,{role:`tablist`,"aria-orientation":`horizontal`,className:e(`grid w-full min-w-0`,y&&`h-full`,M?`transition-none`:`transition-transform duration-300 ease-in-out`),style:{gridTemplateColumns:`repeat(${x.length}, 100%)`,transform:`translateX(-${O*100-(M?j:0)}%)`},children:x.map(({props:t},n)=>{let{value:r,children:i,className:a}=t,o=n===O;return u(`div`,{role:`tabpanel`,"aria-labelledby":`tab-${r}`,id:`tabpanel-${r}`,"aria-hidden":!o,tabIndex:o?0:-1,"data-active":o,className:e(`w-full min-w-0 p-6 opacity-100 transition-opacity duration-300 ease-in-out`,y&&`h-full overflow-y-auto`,!o&&`pointer-events-none opacity-0`,a),children:u(`div`,{className:e(`flex w-full min-w-0 flex-col items-stretch gap-6`,y&&`min-h-full`),children:i})},r)})})})]})})},{Item:m});export{h as Tab};
+"use client";import{cn as e}from"../../utils/cn.mjs";import{useHorizontalSwipe as t}from"../../hooks/useHorizontalSwipe.mjs";import{TabSelector as n,TabSelectorColor as r}from"../TabSelector/TabSelector.mjs";import{useTabContext as i}from"./TabContext.mjs";import{Children as a,createContext as o,isValidElement as s,useState as c}from"react";import{cva as l}from"class-variance-authority";import{jsx as u,jsxs as d}from"react/jsx-runtime";const f=o(void 0),p=l(`relative w-full rounded-lg`,{variants:{background:{with:`border border-neutral/20 bg-background/2 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur`,without:``},variant:{default:``,bordered:`border-2`,ghost:`border-0 bg-transparent shadow-none`}},defaultVariants:{variant:`default`}}),m=({children:e,...t})=>u(`div`,{...t,children:e});m.displayName=`TabItem`;const h=Object.assign(({defaultTab:o,group:l,variant:h,children:g,className:_,headerClassName:v,fullHeight:y,...b})=>{let x=a.toArray(g).filter(e=>s(e)&&e.type===m),S=x[0]?.props?.value,{tabsValues:C,setTabsValues:w}=i(),[T,E]=c(o??S??``),D=(l&&typeof C==`object`?C?.[l]:T)??o??S,O=x.findIndex(e=>e.props.value===D),k=x.length,{containerProps:A,dragDeltaPct:j,isDragging:M}=t({itemIndex:O,itemCount:k,onSwipeLeft:()=>{let e=x[Math.min(k-1,O+1)]?.props?.value;e&&N(e)},onSwipeRight:()=>{let e=x[Math.max(0,O-1)]?.props?.value;e&&N(e)}}),N=e=>{E(e),typeof w==`function`&&w(t=>({...t,[l]:e}))},P={activeTab:T??S??``,setActiveTab:N};return u(f.Provider,{value:P,children:d(`div`,{className:e(p({variant:h}),y&&`flex h-full flex-col overflow-hidden`,_),...b,children:[u(`div`,{className:e(`flex shrink-0 gap-3 p-3`,v),children:u(n,{selectedChoice:D,tabs:x.map(t=>{let{label:n,value:r,disabled:i}=t.props,a=D===r;return u(`button`,{className:e(`cursor-pointer whitespace-nowrap rounded-md px-4 py-1 font-medium text-sm transition-colors focus:outline-none`,!a&&`text-neutral/70`),"data-active":a,disabled:i,onClick:()=>!i&&N(r),role:`tab`,"aria-selected":a,"aria-controls":`tabpanel-${r}`,id:`tab-${r}`,type:`button`,children:n??r},r)}),hoverable:!0,color:r.TEXT})}),u(`div`,{className:e(`relative w-full min-w-0 overflow-x-clip [-webkit-clip-path:inset(0)] [clip-path:inset(0)]`,y&&`min-h-0 flex-1`),...A,children:u(`div`,{role:`tablist`,"aria-orientation":`horizontal`,className:e(`grid w-full min-w-0`,y&&`h-full`,M?`transition-none`:`transition-transform duration-300 ease-in-out`),style:{gridTemplateColumns:`repeat(${x.length}, 100%)`,transform:`translateX(-${O*100-(M?j:0)}%)`},children:x.map(({props:t},n)=>{let{value:r,children:i,className:a}=t,o=n===O;return u(`div`,{role:`tabpanel`,"aria-labelledby":`tab-${r}`,id:`tabpanel-${r}`,"aria-hidden":!o,tabIndex:o?0:-1,"data-active":o,className:e(`w-full min-w-0 p-6 opacity-100 transition-opacity duration-300 ease-in-out`,y&&`h-full overflow-y-auto`,!o&&`pointer-events-none opacity-0`,a),children:u(`div`,{className:e(`flex w-full min-w-0 flex-col items-stretch gap-6`,y&&`min-h-full`),children:i})},r)})})})]})})},{Item:m});export{h as Tab};
 //# sourceMappingURL=Tab.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tab.mjs","names":[],"sources":["../../../../src/components/Tab/Tab.tsx"],"sourcesContent":["'use client';\n\nimport { useHorizontalSwipe } from '@hooks/useHorizontalSwipe';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  Children,\n  createContext,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n  useState,\n} from 'react';\nimport { TabSelector, TabSelectorColor } from '../TabSelector';\nimport { useTabContext } from './TabContext';\n\n// Context for managing tab state\ntype TabContextType = {\n  activeTab: string;\n  setActiveTab: (tab: string) => void;\n};\n\nconst TabContext = createContext<TabContextType | undefined>(undefined);\n\n// Tab container variants\nconst tabContainerVariant = cva('relative w-full rounded-lg', {\n  variants: {\n    background: {\n      with: 'border border-neutral/20 bg-background/2 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur',\n      without: '',\n    },\n    variant: {\n      default: '',\n      bordered: 'border-2',\n      ghost: 'border-0 bg-transparent shadow-none',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\nexport type TabProps = HTMLAttributes<HTMLDivElement> &\n  VariantProps<typeof tabContainerVariant> & {\n    defaultTab?: string;\n    group?: string;\n    children: ReactNode;\n    headerClassName?: string;\n    fullHeight?: boolean;\n  };\n\nexport type TabItemProps = HTMLAttributes<HTMLDivElement> & {\n  label: string;\n  value: string;\n  disabled?: boolean;\n  children: ReactNode;\n};\n\n/**\n * TabItem component that represents a single tab\n * Must be used as a child of the Tab component\n */\nconst TabItem = ({ children, ...props }: TabItemProps) => (\n  // This component is primarily used for its props by the parent Tab component\n  // The actual rendering is handled by the Tab component\n  <div {...props}>{children}</div>\n);\n\n// Add display name for better debugging\nTabItem.displayName = 'TabItem';\n\n/**\n * Tab container component that manages tab state and renders tab headers and content\n *\n * Example:\n * ```jsx\n * <Tab defaultTab=\"tab1\">\n *   <Tab.Item label=\"First Tab\" value=\"tab1\">\n *     Content for first tab\n *   </Tab.Item>\n *   <Tab.Item label=\"Second Tab\" value=\"tab2\">\n *     Content for second tab\n *   </Tab.Item>\n * </Tab>\n * ```\n */\nconst TabComponent = ({\n  defaultTab,\n  group,\n  variant,\n  children,\n  className,\n  headerClassName,\n  fullHeight,\n  ...props\n}: TabProps) => {\n  // Extract TabItem children to get their props\n  const tabItems = Children.toArray(children).filter((child) => {\n    return isValidElement(child) && child.type === TabItem;\n  }) as ReactElement<TabItemProps>[];\n\n  const firstTabValue = tabItems[0]?.props?.value;\n  const { tabsValues, setTabsValues } = useTabContext();\n  const [activeTab, setActiveTab] = useState(defaultTab ?? firstTabValue ?? '');\n  const hasGroup = group && typeof tabsValues === 'object';\n  const currentTabValue =\n    (hasGroup ? tabsValues?.[group] : activeTab) ?? defaultTab ?? firstTabValue;\n  const activeTabIndex = tabItems.findIndex(\n    (tab) => tab.props.value === currentTabValue\n  );\n\n  const tabsCount = tabItems.length;\n\n  const { containerProps, dragDeltaPct, isDragging } = useHorizontalSwipe({\n    itemIndex: activeTabIndex,\n    itemCount: tabsCount,\n    onSwipeLeft: () => {\n      const targetIndex = Math.min(tabsCount - 1, activeTabIndex + 1);\n      const nextValue = tabItems[targetIndex]?.props?.value;\n      if (nextValue) handleSetActiveTab(nextValue);\n    },\n    onSwipeRight: () => {\n      const targetIndex = Math.max(0, activeTabIndex - 1);\n      const nextValue = tabItems[targetIndex]?.props?.value;\n      if (nextValue) handleSetActiveTab(nextValue);\n    },\n  });\n\n  const handleSetActiveTab = (tab: string) => {\n    setActiveTab(tab);\n\n    if (typeof setTabsValues === 'function') {\n      setTabsValues((prev) => ({ ...prev, [group!]: tab }));\n    }\n  };\n\n  const contextValue: TabContextType = {\n    activeTab: activeTab ?? firstTabValue ?? '',\n    setActiveTab: handleSetActiveTab,\n  };\n\n  return (\n    <TabContext.Provider value={contextValue}>\n      <div\n        className={cn(\n          tabContainerVariant({ variant }),\n          fullHeight && 'flex h-full flex-col overflow-hidden',\n          className\n        )}\n        {...props}\n      >\n        {/* Tab Headers */}\n        <div className={cn('flex shrink-0 gap-3 p-3', headerClassName)}>\n          <TabSelector\n            selectedChoice={currentTabValue}\n            tabs={tabItems.map((child) => {\n              const { label, value, disabled } = child.props;\n              const isActive = currentTabValue === value;\n\n              return (\n                <button\n                  key={value}\n                  className={cn(\n                    'cursor-pointer whitespace-nowrap rounded-md px-4 py-1 font-medium text-sm transition-colors focus:outline-none',\n                    !isActive && 'text-neutral/70'\n                  )}\n                  data-active={isActive}\n                  disabled={disabled}\n                  onClick={() => !disabled && handleSetActiveTab(value)}\n                  role=\"tab\"\n                  aria-selected={isActive}\n                  aria-controls={`tabpanel-${value}`}\n                  id={`tab-${value}`}\n                  type=\"button\"\n                >\n                  {label}\n                </button>\n              );\n            })}\n            hoverable\n            color={TabSelectorColor.TEXT}\n          />\n        </div>\n        {/* Tab Content */}\n        {/* Clipper: no overflow; uses clip-path */}\n        <div\n          className={cn(\n            'relative w-full min-w-0 overflow-x-clip [-webkit-clip-path:inset(0)] [clip-path:inset(0)]',\n            fullHeight && 'min-h-0 flex-1'\n          )}\n          {...containerProps}\n        >\n          {/* Track */}\n          <div\n            role=\"tablist\"\n            aria-orientation=\"horizontal\"\n            className={cn(\n              'grid w-full min-w-0',\n              fullHeight && 'h-full',\n              isDragging\n                ? 'transition-none'\n                : 'transition-transform duration-300 ease-in-out'\n            )}\n            style={{\n              gridTemplateColumns: `repeat(${tabItems.length}, 100%)`,\n              transform: `translateX(-${activeTabIndex * 100 - (isDragging ? dragDeltaPct : 0)}%)`,\n            }}\n          >\n            {tabItems.map(({ props }, index) => {\n              const { value, children, className: itemClassName } = props;\n              const isActive = index === activeTabIndex;\n\n              return (\n                <div\n                  key={value}\n                  role=\"tabpanel\"\n                  aria-labelledby={`tab-${value}`}\n                  id={`tabpanel-${value}`}\n                  aria-hidden={!isActive}\n                  tabIndex={isActive ? 0 : -1}\n                  data-active={isActive}\n                  className={cn(\n                    'w-full min-w-0 p-6 opacity-100 transition-opacity duration-300 ease-in-out',\n                    fullHeight && 'h-full overflow-y-auto',\n                    !isActive && 'pointer-events-none opacity-0', // prevent offscreen interaction\n                    itemClassName\n                  )}\n                >\n                  <div\n                    className={cn(\n                      'flex w-full min-w-0 flex-col items-stretch gap-6',\n                      fullHeight && 'min-h-full'\n                    )}\n                  >\n                    {children}\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n        </div>\n      </div>\n    </TabContext.Provider>\n  );\n};\n\n// Create the compound component\nexport const Tab = Object.assign(TabComponent, {\n  Item: TabItem,\n});\n"],"mappings":"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"}
+{"version":3,"file":"Tab.mjs","names":[],"sources":["../../../../src/components/Tab/Tab.tsx"],"sourcesContent":["'use client';\n\nimport { useHorizontalSwipe } from '@hooks/useHorizontalSwipe';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  Children,\n  createContext,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n  useState,\n} from 'react';\nimport { TabSelector, TabSelectorColor } from '../TabSelector';\nimport { useTabContext } from './TabContext';\n\n// Context for managing tab state\ntype TabContextType = {\n  activeTab: string;\n  setActiveTab: (tab: string) => void;\n};\n\nconst TabContext = createContext<TabContextType | undefined>(undefined);\n\n// Tab container variants\nconst tabContainerVariant = cva('relative w-full rounded-lg', {\n  variants: {\n    background: {\n      with: 'border border-neutral/20 bg-background/2 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur',\n      without: '',\n    },\n    variant: {\n      default: '',\n      bordered: 'border-2',\n      ghost: 'border-0 bg-transparent shadow-none',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\nexport type TabProps = HTMLAttributes<HTMLDivElement> &\n  VariantProps<typeof tabContainerVariant> & {\n    defaultTab?: string;\n    group?: string;\n    children: ReactNode;\n    headerClassName?: string;\n    fullHeight?: boolean;\n  };\n\nexport type TabItemProps = HTMLAttributes<HTMLDivElement> & {\n  label: string;\n  value: string;\n  disabled?: boolean;\n  children: ReactNode;\n};\n\n/**\n * TabItem component that represents a single tab\n * Must be used as a child of the Tab component\n */\nconst TabItem = ({ children, ...props }: TabItemProps) => (\n  // This component is primarily used for its props by the parent Tab component\n  // The actual rendering is handled by the Tab component\n  <div {...props}>{children}</div>\n);\n\n// Add display name for better debugging\nTabItem.displayName = 'TabItem';\n\n/**\n * Tab container component that manages tab state and renders tab headers and content\n *\n * Example:\n * ```jsx\n * <Tab defaultTab=\"tab1\">\n *   <Tab.Item label=\"First Tab\" value=\"tab1\">\n *     Content for first tab\n *   </Tab.Item>\n *   <Tab.Item label=\"Second Tab\" value=\"tab2\">\n *     Content for second tab\n *   </Tab.Item>\n * </Tab>\n * ```\n */\nconst TabComponent = ({\n  defaultTab,\n  group,\n  variant,\n  children,\n  className,\n  headerClassName,\n  fullHeight,\n  ...props\n}: TabProps) => {\n  // Extract TabItem children to get their props\n  const tabItems = Children.toArray(children).filter((child) => {\n    return isValidElement(child) && child.type === TabItem;\n  }) as ReactElement<TabItemProps>[];\n\n  const firstTabValue = tabItems[0]?.props?.value;\n  const { tabsValues, setTabsValues } = useTabContext();\n  const [activeTab, setActiveTab] = useState(defaultTab ?? firstTabValue ?? '');\n  const hasGroup = group && typeof tabsValues === 'object';\n  const currentTabValue =\n    (hasGroup ? tabsValues?.[group] : activeTab) ?? defaultTab ?? firstTabValue;\n  const activeTabIndex = tabItems.findIndex(\n    (tab) => tab.props.value === currentTabValue\n  );\n\n  const tabsCount = tabItems.length;\n\n  const { containerProps, dragDeltaPct, isDragging } = useHorizontalSwipe({\n    itemIndex: activeTabIndex,\n    itemCount: tabsCount,\n    onSwipeLeft: () => {\n      const targetIndex = Math.min(tabsCount - 1, activeTabIndex + 1);\n      const nextValue = tabItems[targetIndex]?.props?.value;\n      if (nextValue) handleSetActiveTab(nextValue);\n    },\n    onSwipeRight: () => {\n      const targetIndex = Math.max(0, activeTabIndex - 1);\n      const nextValue = tabItems[targetIndex]?.props?.value;\n      if (nextValue) handleSetActiveTab(nextValue);\n    },\n  });\n\n  const handleSetActiveTab = (tab: string) => {\n    setActiveTab(tab);\n\n    if (typeof setTabsValues === 'function') {\n      setTabsValues((prev) => ({ ...prev, [group!]: tab }));\n    }\n  };\n\n  const contextValue: TabContextType = {\n    activeTab: activeTab ?? firstTabValue ?? '',\n    setActiveTab: handleSetActiveTab,\n  };\n\n  return (\n    <TabContext.Provider value={contextValue}>\n      <div\n        className={cn(\n          tabContainerVariant({ variant }),\n          fullHeight && 'flex h-full flex-col overflow-hidden',\n          className\n        )}\n        {...props}\n      >\n        {/* Tab Headers */}\n        <div className={cn('flex shrink-0 gap-3 p-3', headerClassName)}>\n          <TabSelector\n            selectedChoice={currentTabValue}\n            tabs={tabItems.map((child) => {\n              const { label, value, disabled } = child.props;\n              const isActive = currentTabValue === value;\n\n              return (\n                <button\n                  key={value}\n                  className={cn(\n                    'cursor-pointer whitespace-nowrap rounded-md px-4 py-1 font-medium text-sm transition-colors focus:outline-none',\n                    !isActive && 'text-neutral/70'\n                  )}\n                  data-active={isActive}\n                  disabled={disabled}\n                  onClick={() => !disabled && handleSetActiveTab(value)}\n                  role=\"tab\"\n                  aria-selected={isActive}\n                  aria-controls={`tabpanel-${value}`}\n                  id={`tab-${value}`}\n                  type=\"button\"\n                >\n                  {label ?? value}\n                </button>\n              );\n            })}\n            hoverable\n            color={TabSelectorColor.TEXT}\n          />\n        </div>\n        {/* Tab Content */}\n        {/* Clipper: no overflow; uses clip-path */}\n        <div\n          className={cn(\n            'relative w-full min-w-0 overflow-x-clip [-webkit-clip-path:inset(0)] [clip-path:inset(0)]',\n            fullHeight && 'min-h-0 flex-1'\n          )}\n          {...containerProps}\n        >\n          {/* Track */}\n          <div\n            role=\"tablist\"\n            aria-orientation=\"horizontal\"\n            className={cn(\n              'grid w-full min-w-0',\n              fullHeight && 'h-full',\n              isDragging\n                ? 'transition-none'\n                : 'transition-transform duration-300 ease-in-out'\n            )}\n            style={{\n              gridTemplateColumns: `repeat(${tabItems.length}, 100%)`,\n              transform: `translateX(-${activeTabIndex * 100 - (isDragging ? dragDeltaPct : 0)}%)`,\n            }}\n          >\n            {tabItems.map(({ props }, index) => {\n              const { value, children, className: itemClassName } = props;\n              const isActive = index === activeTabIndex;\n\n              return (\n                <div\n                  key={value}\n                  role=\"tabpanel\"\n                  aria-labelledby={`tab-${value}`}\n                  id={`tabpanel-${value}`}\n                  aria-hidden={!isActive}\n                  tabIndex={isActive ? 0 : -1}\n                  data-active={isActive}\n                  className={cn(\n                    'w-full min-w-0 p-6 opacity-100 transition-opacity duration-300 ease-in-out',\n                    fullHeight && 'h-full overflow-y-auto',\n                    !isActive && 'pointer-events-none opacity-0', // prevent offscreen interaction\n                    itemClassName\n                  )}\n                >\n                  <div\n                    className={cn(\n                      'flex w-full min-w-0 flex-col items-stretch gap-6',\n                      fullHeight && 'min-h-full'\n                    )}\n                  >\n                    {children}\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n        </div>\n      </div>\n    </TabContext.Provider>\n  );\n};\n\n// Create the compound component\nexport const Tab = Object.assign(TabComponent, {\n  Item: TabItem,\n});\n"],"mappings":"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"}

package/dist/types/components/Badge/index.d.ts

@@ -43,38 +43,27 @@ declare enum BadgeSize {
  * @description Defines the styling variants for different badge combinations
  */
 declare const badgeVariants: (props?: {
-  color?: BadgeColor;
-  variant?: BadgeVariant;
-  size?: BadgeSize;
+  color?: "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "text" | "error" | "success" | "custom";
+  variant?: "default" | "none" | "outline" | "hoverable";
+  size?: "md" | "sm" | "lg";
 } & class_variance_authority_types0.ClassProp) => string;
 /**
  * Badge component props interface
  * @description Comprehensive props for the Badge component with accessibility and interactive features
  */
-interface BadgeProps extends HTMLAttributes<HTMLElement> {
-  /** The content to display inside the badge */
-  children?: React.ReactNode;
-  /** Color theme variant */
-  color?: BadgeColor;
-  /** Visual style variant */
-  variant?: BadgeVariant;
-  /** Size of the badge */
-  size?: BadgeSize;
-  /** Whether the badge is clickable */
-  clickable?: boolean;
-  /** Whether the badge is dismissible (shows close button) */
-  dismissible?: boolean;
-  /** Click handler for the badge */
-  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-  /** Click handler for the dismiss button */
-  onDismiss?: () => void;
-  /** ARIA label for accessibility */
-  'aria-label'?: string;
-  /** Badge role for accessibility (default: 'status') */
-  role?: 'status' | 'button' | 'generic';
-  /** Whether badge should be focusable */
+type BadgeProps = HTMLAttributes<HTMLElement> & {
+  /** The content to display inside the badge */children?: React.ReactNode; /** Color theme variant */
+  color?: BadgeColor | `${BadgeColor}`; /** Visual style variant */
+  variant?: BadgeVariant | `${BadgeVariant}`; /** Size of the badge */
+  size?: BadgeSize | `${BadgeSize}`; /** Whether the badge is clickable */
+  clickable?: boolean; /** Whether the badge is dismissible (shows close button) */
+  dismissible?: boolean; /** Click handler for the badge */
+  onClick?: (event: React.MouseEvent<HTMLElement>) => void; /** Click handler for the dismiss button */
+  onDismiss?: () => void; /** ARIA label for accessibility */
+  'aria-label'?: string; /** Badge role for accessibility (default: 'status') */
+  role?: 'status' | 'button' | 'generic'; /** Whether badge should be focusable */
   tabIndex?: number;
-}
+};
 /**
  * Utility type for badge variant props
  */

package/dist/types/components/Badge/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/Badge/index.tsx"],"mappings":";;;;;;;;AAQA;aAAY,UAAA;EACV,OAAA;EACA,SAAA;EACA,WAAA;EACA,OAAA;EACA,KAAA;EACA,OAAA;EACA,KAAA;EACA,IAAA;EACA,IAAA;EACA,MAAA;AAAA;;;;AAOF;aAAY,YAAA;EACV,OAAA;EACA,IAAA;EACA,OAAA;EACA,SAAA;AAAA;;;;AAOF;aAAY,SAAA;EACV,KAAA;EACA,MAAA;EACA,KAAA;AAAA;;;;AAOF;cAAa,aAAA,GAAa,KAAA;;;;;;;;;UAmDT,UAAA,SAAmB,cAAA,CAAe,WAAA;;EAEjD,QAAA,GAAW,KAAA,CAAM,SAAA;;EAEjB,KAAA,GAAQ,UAAA;;EAER,OAAA,GAAU,YAAA;;EAEV,IAAA,GAAO,SAAA;EARQ;EAUf,SAAA;;EAEA,WAAA;EAVW;EAYX,OAAA,IAAW,KAAA,EAAO,KAAA,CAAM,UAAA,CAAW,WAAA;EARzB;EAUV,SAAA;EAFmC;EAInC,YAAA;EAlBkC;EAoBlC,IAAA;EApBgD;EAsBhD,QAAA;AAAA;;;;KAMU,iBAAA,GAAoB,YAAA,QAAoB,aAAA;;;;;;;;;;;;;;;;;;;AAApD;;;;;AA2BA;;cAAa,KAAA,EAAO,KAAA,CAAM,EAAA,CAAG,UAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/Badge/index.tsx"],"mappings":";;;;;;;;AAQA;aAAY,UAAA;EACV,OAAA;EACA,SAAA;EACA,WAAA;EACA,OAAA;EACA,KAAA;EACA,OAAA;EACA,KAAA;EACA,IAAA;EACA,IAAA;EACA,MAAA;AAAA;;;;AAOF;aAAY,YAAA;EACV,OAAA;EACA,IAAA;EACA,OAAA;EACA,SAAA;AAAA;;;;AAOF;aAAY,SAAA;EACV,KAAA;EACA,MAAA;EACA,KAAA;AAAA;;;;AAOF;cAAa,aAAA,GAAa,KAAA;;;;IA8CzB,+BAAA,CAAA,SAAA;;;;;KAMW,UAAA,GAAa,cAAA,CAAe,WAAA;EAA5B,8CAEV,QAAA,GAAW,KAAA,CAAM,SAAA;EAEjB,KAAA,GAAQ,UAAA,MAAgB,UAAA,IAJD;EAMvB,OAAA,GAAU,YAAA,MAAkB,YAAA,IAFpB;EAIR,IAAA,GAAO,SAAA,MAAe,SAAA,IAFZ;EAIV,SAAA,YAFO;EAIP,WAAA,YAEmC;EAAnC,OAAA,IAAW,KAAA,EAAO,KAAA,CAAM,UAAA,CAAW,WAAA,YAAD;EAElC,SAAA,eAhBuB;EAkBvB,YAAA,WAhBA;EAkBA,IAAA,oCAlBiB;EAoBjB,QAAA;AAAA;;;;KAMU,iBAAA,GAAoB,YAAA,QAAoB,aAAA;;;;;;;;;;;;;;;;;AAApD;;;;;AA2BA;;;;cAAa,KAAA,EAAO,KAAA,CAAM,EAAA,CAAG,UAAA"}

package/dist/types/components/Button/Button.d.ts

@@ -60,9 +60,9 @@ declare enum ButtonTextAlign {
  * Enhanced button variants with improved accessibility and focus states
  */
 declare const buttonVariants: (props?: {
-  size?: "sm" | "md" | "lg" | "xl" | "icon-sm" | "icon-md" | "icon-lg" | "icon-xl";
-  color?: "primary" | "secondary" | "destructive" | "neutral" | "card" | "light" | "dark" | "text" | "current" | "text-inverse" | "error" | "success" | "custom";
-  roundedSize?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "4xl" | "5xl" | "full";
+  size?: "md" | "sm" | "lg" | "xl" | "icon-sm" | "icon-md" | "icon-lg" | "icon-xl";
+  color?: "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "text" | "card" | "current" | "text-inverse" | "error" | "success" | "custom";
+  roundedSize?: "md" | "sm" | "lg" | "none" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "full";
   variant?: "default" | "none" | "outline" | "link" | "invisible-link" | "hoverable" | "fade" | "input";
   textAlign?: "left" | "center" | "right";
   isFullWidth?: boolean;

package/dist/types/components/Carousel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/Carousel/index.tsx"],"mappings":";;;KAmGK,iBAAA,GAAoB,cAAA,CAAe,cAAA;EACtC,QAAA,EAAU,SAAA;AAAA;AAAA,KAkBP,uBAAA,GAA0B,cAAA,CAAe,cAAA;EAC5C,wBAAA;AAAA;AAAA,KAgHG,aAAA,GAAgB,cAAA,CAAe,cAAA;EAClC,QAAA,EAAU,SAAA;EACV,YAAA;EACA,aAAA,IAAiB,KAAA;AAAA;AAAA,cA+MN,QAAA,EAAQ,EAAA,CAAA,aAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/Carousel/index.tsx"],"mappings":";;;KAkGK,iBAAA,GAAoB,cAAA,CAAe,cAAA;EACtC,QAAA,EAAU,SAAA;AAAA;AAAA,KAkBP,uBAAA,GAA0B,cAAA,CAAe,cAAA;EAC5C,wBAAA;AAAA;AAAA,KAgHG,aAAA,GAAgB,cAAA,CAAe,cAAA;EAClC,QAAA,EAAU,SAAA;EACV,YAAA;EACA,aAAA,IAAiB,KAAA;AAAA;AAAA,cAgNN,QAAA,EAAQ,EAAA,CAAA,aAAA"}

package/dist/types/components/CollapsibleTable/CollapsibleTable.d.ts

@@ -5,7 +5,7 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/CollapsibleTable/CollapsibleTable.d.ts
 declare const collapsibleTableVariants: (props?: {
   size?: "sm" | "md" | "lg" | "xl" | "full";
-  variant?: "default" | "dark" | "ghost" | "outlined";
+  variant?: "default" | "ghost" | "dark" | "outlined";
   spacing?: "sm" | "md" | "lg" | "none" | "auto";
 } & class_variance_authority_types0.ClassProp) => string;
 interface CollapsibleTableProps extends Omit<HTMLAttributes<HTMLElement>, 'title'>, VariantProps<typeof collapsibleTableVariants> {

package/dist/types/components/Command/index.d.ts

@@ -29,7 +29,7 @@ declare const Command: {
     ref?: React.Ref<HTMLInputElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof react.InputHTMLAttributes<HTMLInputElement> | "asChild">, "type" | "value" | "onChange"> & {
+  }, "key" | keyof react.InputHTMLAttributes<HTMLInputElement> | "asChild">, "value" | "onChange" | "type"> & {
     value?: string;
     onValueChange?: (search: string) => void;
   } & react.RefAttributes<HTMLInputElement>>;

package/dist/types/components/Container/index.d.ts

@@ -8,14 +8,14 @@ import { VariantProps } from "class-variance-authority";
  * Provides flexible styling options for background, padding, borders, and layout
  */
 declare const containerVariants: (props?: {
-  roundedSize?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "4xl" | "full";
-  transparency?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | "full";
-  padding?: "sm" | "md" | "lg" | "xl" | "2xl" | "none";
-  separator?: "both" | "without" | "x" | "y";
+  roundedSize?: "sm" | "md" | "lg" | "none" | "xl" | "2xl" | "3xl" | "4xl" | "full";
+  transparency?: "sm" | "md" | "lg" | "xs" | "none" | "xl" | "full";
+  padding?: "sm" | "md" | "lg" | "none" | "xl" | "2xl";
+  separator?: "without" | "x" | "y" | "both";
   border?: "none" | "with";
   borderColor?: "text" | "primary" | "secondary" | "neutral" | "error" | "success" | "card" | "warning";
-  background?: "none" | "with" | "hoverable";
-  gap?: "sm" | "md" | "lg" | "xl" | "2xl" | "none";
+  background?: "hoverable" | "none" | "with";
+  gap?: "sm" | "md" | "lg" | "none" | "xl" | "2xl";
 } & class_variance_authority_types0.ClassProp) => string;
 /** Available rounded corner sizes for the container */
 declare enum ContainerRoundedSize {

package/dist/types/components/IDE/CodeBlockShiki.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlockShiki.d.ts","names":[],"sources":["../../../../src/components/IDE/CodeBlockShiki.tsx"],"mappings":";;;;KA8GY,mBAAA;EACV,QAAA;EACA,IAAA,EAAM,eAAA;EACN,UAAA;AAAA;AAAA,cAGW,cAAA,EAAgB,EAAA,CAAG,mBAAA"}
+{"version":3,"file":"CodeBlockShiki.d.ts","names":[],"sources":["../../../../src/components/IDE/CodeBlockShiki.tsx"],"mappings":";;;;KAwHY,mBAAA;EACV,QAAA;EACA,IAAA,EAAM,eAAA;EACN,UAAA;AAAA;AAAA,cAGW,cAAA,EAAgB,EAAA,CAAG,mBAAA"}

package/dist/types/components/Input/Checkbox.d.ts

@@ -5,8 +5,8 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/Input/Checkbox.d.ts
 declare const checkboxVariants: (props?: {
   variant?: "default";
-  size?: "xs" | "sm" | "md" | "lg";
-  color?: "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "error" | "success" | "custom";
+  size?: "sm" | "md" | "lg" | "xs";
+  color?: "text" | "primary" | "secondary" | "neutral" | "destructive" | "light" | "dark" | "error" | "success" | "custom";
   validationStyleEnabled?: "disabled" | "enabled";
 } & class_variance_authority_types0.ClassProp) => string;
 declare enum CheckboxSize {

package/dist/types/components/Link/Link.d.ts

@@ -54,9 +54,9 @@ declare enum LinkUnderlined {
 }
 declare const linkVariants: (props?: {
   variant?: "default" | "invisible-link" | "hoverable" | "button" | "button-outlined";
-  roundedSize?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full";
+  roundedSize?: "md" | "sm" | "lg" | "none" | "xl" | "2xl" | "3xl" | "full";
   color?: "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "text" | "text-inverse" | "error" | "success" | "custom";
-  size?: "sm" | "md" | "lg" | "xl" | "custom";
+  size?: "md" | "sm" | "lg" | "xl" | "custom";
   underlined?: boolean | LinkUnderlined.DEFAULT;
 } & class_variance_authority_types0.ClassProp) => string;
 type LinkProps = DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> & VariantProps<typeof linkVariants> & {

package/dist/types/components/Link/Link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","names":[],"sources":["../../../../src/components/Link/Link.tsx"],"mappings":";;;;;;;;;aAgBY,WAAA;EACV,OAAA;EACA,cAAA;EACA,MAAA;EACA,eAAA;EACA,SAAA;AAAA;;;;aAMU,SAAA;EACV,OAAA;EACA,SAAA;EACA,WAAA;EACA,OAAA;EACA,KAAA;EACA,IAAA;EACA,IAAA;EACA,YAAA;EACA,KAAA;EACA,OAAA;EACA,MAAA;AAAA;AAAA,aAGU,eAAA;EACV,IAAA;EACA,EAAA;EACA,EAAA;EACA,EAAA;EACA,EAAA;EACA,MAAA;EACA,QAAA;EACA,IAAA;AAAA;AAAA,aAGU,QAAA;EACV,EAAA;EACA,EAAA;EACA,EAAA;EACA,EAAA;EACA,MAAA;AAAA;AAAA,aAGU,cAAA;EACV,OAAA;EACA,IAAA;EACA,KAAA;AAAA;AAAA,cAGW,YAAA,GAAY,KAAA;;;;;yBAqKxB,cAAA,CAAA,OAAA;AAAA,IAAA,+BAAA,CAAA,SAAA;AAAA,KAEW,SAAA,GAAY,iBAAA,CACtB,oBAAA,CAAqB,iBAAA,GACrB,iBAAA,IAEA,YAAA,QAAoB,YAAA;EAClB,KAAA;EACA,cAAA;EACA,aAAA;EACA,QAAA;EACA,MAAA,GAAS,aAAA;AAAA;AAAA,cAGA,mBAAA;EAAuB,IAAA;EAAA,cAAA,EAAA;AAAA,GAGjC,SAAA;AAAA,cAWU,cAAA,GAAkB,QAAA,EAAU,SAAA;AAAA,cAe5B,IAAA,EAAM,EAAA,CAAG,SAAA"}
+{"version":3,"file":"Link.d.ts","names":[],"sources":["../../../../src/components/Link/Link.tsx"],"mappings":";;;;;;;;;aAgBY,WAAA;EACV,OAAA;EACA,cAAA;EACA,MAAA;EACA,eAAA;EACA,SAAA;AAAA;;;;aAMU,SAAA;EACV,OAAA;EACA,SAAA;EACA,WAAA;EACA,OAAA;EACA,KAAA;EACA,IAAA;EACA,IAAA;EACA,YAAA;EACA,KAAA;EACA,OAAA;EACA,MAAA;AAAA;AAAA,aAGU,eAAA;EACV,IAAA;EACA,EAAA;EACA,EAAA;EACA,EAAA;EACA,EAAA;EACA,MAAA;EACA,QAAA;EACA,IAAA;AAAA;AAAA,aAGU,QAAA;EACV,EAAA;EACA,EAAA;EACA,EAAA;EACA,EAAA;EACA,MAAA;AAAA;AAAA,aAGU,cAAA;EACV,OAAA;EACA,IAAA;EACA,KAAA;AAAA;AAAA,cAGW,YAAA,GAAY,KAAA;;;;;yBAoKxB,cAAA,CAAA,OAAA;AAAA,IAAA,+BAAA,CAAA,SAAA;AAAA,KAEW,SAAA,GAAY,iBAAA,CACtB,oBAAA,CAAqB,iBAAA,GACrB,iBAAA,IAEA,YAAA,QAAoB,YAAA;EAClB,KAAA;EACA,cAAA;EACA,aAAA;EACA,QAAA;EACA,MAAA,GAAS,aAAA;AAAA;AAAA,cAGA,mBAAA;EAAuB,IAAA;EAAA,cAAA,EAAA;AAAA,GAGjC,SAAA;AAAA,cAWU,cAAA,GAAkB,QAAA,EAAU,SAAA;AAAA,cAe5B,IAAA,EAAM,EAAA,CAAG,SAAA"}

package/dist/types/components/MarkDownRender/MarkDownRender.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarkDownRender.d.ts","names":[],"sources":["../../../../src/components/MarkDownRender/MarkDownRender.tsx"],"mappings":";;;;;KAiBK,qBAAA;EACH,QAAA;EACA,UAAA;EACA,MAAA,GAAS,aAAA;EACT,UAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA,GAAa,cAAA,QAAsB,kBAAA;EACnC,OAAA,GAAU,cAAA,QAAsB,kBAAA;AAAA;AAAA,cAGrB,0BAAA,GACX,UAAA,cACG,mBAAA;;;;;;;;;;;cAsIQ,gBAAA,EAAkB,EAAA,CAAG,qBAAA"}
+{"version":3,"file":"MarkDownRender.d.ts","names":[],"sources":["../../../../src/components/MarkDownRender/MarkDownRender.tsx"],"mappings":";;;;;KAiBK,qBAAA;EACH,QAAA;EACA,UAAA;EACA,MAAA,GAAS,aAAA;EACT,UAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA,GAAa,cAAA,QAAsB,kBAAA;EACnC,OAAA,GAAU,cAAA,QAAsB,kBAAA;AAAA;AAAA,cAGrB,0BAAA,GACX,UAAA,cACG,mBAAA;;;;;;;;;;;cAsJQ,gBAAA,EAAkB,EAAA,CAAG,qBAAA"}

package/dist/types/components/Pagination/NumberItemsSelector.d.ts

@@ -2,7 +2,7 @@ import { FC } from "react";
 
 //#region src/components/Pagination/NumberItemsSelector.d.ts
 type NumberItemsSelectorProps = {
-  value: string;
+  value: string | number;
   onValueChange: (value: string) => void;
   min?: number;
   max?: number;

package/dist/types/components/Pagination/Pagination.d.ts

@@ -5,7 +5,7 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/Pagination/Pagination.d.ts
 declare const paginationVariants: (props?: {
   size?: "sm" | "md" | "lg";
-  color?: "text" | "primary" | "secondary" | "destructive" | "neutral";
+  color?: "text" | "primary" | "secondary" | "neutral" | "destructive";
   variant?: "default" | "bordered" | "ghost";
 } & class_variance_authority_types0.ClassProp) => string;
 declare enum PaginationSize {

package/dist/types/components/SwitchSelector/index.d.ts

@@ -37,7 +37,7 @@ declare enum SwitchSelectorSize {
   LG = "lg"
 }
 declare const choiceVariant: (props?: {
-  size?: "sm" | "md" | "lg";
+  size?: "md" | "sm" | "lg";
 } & class_variance_authority_types0.ClassProp) => string;
 /**
  *

package/dist/types/components/TabSelector/TabSelector.d.ts

@@ -15,7 +15,7 @@ declare enum TabSelectorColor {
   TEXT = "text"
 }
 declare const tabSelectorVariant: (props?: {
-  color?: "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark";
+  color?: "text" | "primary" | "secondary" | "neutral" | "destructive" | "light" | "dark";
 } & class_variance_authority_types0.ClassProp) => string;
 type TabSelectorItemProps = HTMLAttributes<HTMLElement> & {
   key: string | number;

package/dist/types/components/Tag/index.d.ts

@@ -185,9 +185,9 @@ declare enum TagBackground {
   WITH = "with"
 }
 declare const containerVariants: (props?: {
-  roundedSize?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full";
+  roundedSize?: "md" | "sm" | "lg" | "none" | "xl" | "2xl" | "3xl" | "full";
   color?: "primary" | "neutral" | "text" | "error" | "success" | "warning" | "blue" | "yellow" | "green" | "red" | "orange" | "purple" | "pink" | "brown" | "gray" | "black" | "white";
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  size?: "md" | "sm" | "lg" | "xl" | "xs";
   border?: "none" | "with";
   background?: "none" | "with";
 } & class_variance_authority_types0.ClassProp) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intlayer/design-system",
-  "version": "8.1.6",
+  "version": "8.1.8",
   "private": false,
   "description": "Intlayer design system, including UI components used in the Intlayer editor, website, and visual editor/CMS.",
   "keywords": [
@@ -63,7 +63,6 @@
       "default": "./dist/esm/tailwind.config.mjs"
     },
     "./css": "./tailwind.css",
-    "./tw-source.css": "./tw-source.css",
     "./css-output": "./dist/tailwind.css",
     "./package.json": "./package.json"
   },
@@ -105,26 +104,27 @@
   "dependencies": {
     "@better-auth/passkey": "1.4.18",
     "@better-auth/sso": "1.4.18",
-    "@intlayer/api": "8.1.6",
-    "@intlayer/config": "8.1.6",
-    "@intlayer/core": "8.1.6",
-    "@intlayer/dictionaries-entry": "8.1.6",
-    "@intlayer/editor-react": "8.1.6",
-    "@intlayer/types": "8.1.6",
+    "@intlayer/api": "8.1.8",
+    "@intlayer/config": "8.1.8",
+    "@intlayer/core": "8.1.8",
+    "@intlayer/dictionaries-entry": "8.1.8",
+    "@intlayer/editor-react": "8.1.8",
+    "@intlayer/types": "8.1.8",
     "@radix-ui/react-dialog": "1.1.15",
     "@radix-ui/react-select": "2.2.6",
     "@radix-ui/react-slot": "1.2.4",
     "@radix-ui/react-toast": "1.2.15",
+    "@tailwindcss/aspect-ratio": "0.4.2",
     "better-auth": "1.4.18",
     "bun": "1.3.2",
     "class-variance-authority": "0.7.1",
     "cmdk": "1.1.1",
-    "react-intlayer": "8.1.6",
+    "react-intlayer": "8.1.8",
     "rollup-preserve-directives": "1.1.3",
     "zod": "4.3.6"
   },
   "devDependencies": {
-    "@intlayer/backend": "8.1.6",
+    "@intlayer/backend": "8.1.8",
     "@shikijs/transformers": "3.22.0",
     "@storybook/addon-a11y": "8.6.14",
     "@storybook/addon-essentials": "8.6.14",
@@ -141,7 +141,6 @@
     "@storybook/theming": "8.6.14",
     "@svgr/core": "8.1.0",
     "@svgr/rollup": "8.1.0",
-    "@tailwindcss/aspect-ratio": "0.4.2",
     "@tailwindcss/cli": "4.2.0",
     "@tailwindcss/vite": "4.2.0",
     "@testing-library/jest-dom": "6.9.1",
@@ -154,14 +153,14 @@
     "@utils/ts-config": "1.0.4",
     "@utils/ts-config-types": "1.0.4",
     "fast-glob": "3.3.3",
-    "intlayer": "8.1.6",
+    "intlayer": "8.1.8",
     "rimraf": "6.1.3",
     "shiki": "3.22.0",
     "storybook": "8.6.17",
     "tsdown": "0.20.3",
     "typescript": "5.9.3",
     "vite": "7.3.1",
-    "vite-intlayer": "8.1.6",
+    "vite-intlayer": "8.1.8",
     "vite-plugin-dts": "4.5.4",
     "vite-tsconfig-paths": "6.1.1",
     "vitest": "4.0.18"
@@ -169,7 +168,7 @@
   "peerDependencies": {
     "@better-fetch/fetch": "1.1.21",
     "@hookform/resolvers": "5.2.2",
-    "@intlayer/backend": "8.1.6",
+    "@intlayer/backend": "8.1.8",
     "@monaco-editor/react": "4.7.0",
     "@shikijs/transformers": "3.22.0",
     "@tanstack/react-query": "5.90.21",
@@ -177,12 +176,12 @@
     "clsx": "2.1.1",
     "framer-motion": "12.34.3",
     "fuse.js": "7.1.0",
-    "intlayer": "8.1.6",
+    "intlayer": "8.1.8",
     "lucide-react": "0.575.0",
     "react": ">=16.0.0",
     "react-dom": ">=16.0.0",
     "react-hook-form": "7.71.2",
-    "react-intlayer": "8.1.6",
+    "react-intlayer": "8.1.8",
     "shiki": "3.22.0",
     "tailwind-merge": "3.5.0",
     "tailwindcss": "4.2.0"

package/tw-source.css

@@ -1 +0,0 @@
-@source "./src/**/*.{ts,tsx,svg}";