@intlayer/design-system 8.1.10 → 8.2.0

package/dist/esm/components/Container/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}from"react/jsx-runtime";const r=t(`flex flex-col text-text backdrop-blur`,{variants:{roundedSize:{none:`rounded-none`,sm:`rounded-sm [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-md`,md:`rounded-md [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-lg`,lg:`rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl`,xl:`rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl`,"2xl":`rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl`,"3xl":`rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl`,"4xl":`rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]`,full:`rounded-full [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-full`},transparency:{none:`bg-card`,xs:`bg-card/95`,sm:`bg-card/90`,md:`bg-card/70`,lg:`bg-card/40`,xl:`bg-card/20`,full:``},padding:{none:`p-0`,sm:`px-3 py-2`,md:`px-4 py-3`,lg:`px-6 py-4`,xl:`px-8 py-6`,"2xl":`px-10 py-8`},separator:{without:``,x:`divide-x divide-dashed divide-text/20`,y:`divide-y divide-dashed divide-text/20`,both:`divide-x divide-y divide-dashed divide-text/20`},border:{none:``,with:`border-[1.3px]`},borderColor:{primary:`border-primary`,secondary:`border-secondary`,neutral:`border-neutral`,card:`border-card`,text:`border-text`,error:`border-error`,warning:`border-warning`,success:`border-success`},background:{none:``,hoverable:`bg-opacity-5! backdrop-blur-0 hover:bg-opacity-10! hover:backdrop-blur focus:bg-opacity-10! focus:backdrop-blur aria-selected:bg-opacity-15! aria-selected:backdrop-blur`,with:``},gap:{none:`gap-0`,sm:`gap-1`,md:`gap-3`,lg:`gap-5`,xl:`gap-8`,"2xl":`gap-10`}},defaultVariants:{roundedSize:`lg`,border:`none`,borderColor:`text`,transparency:`md`,padding:`none`,separator:`without`,gap:`none`},compoundVariants:[{background:`none`,class:`bg-transparent`}]});let i=function(e){return e.NONE=`none`,e.SM=`sm`,e.MD=`md`,e.LG=`lg`,e.XL=`xl`,e[`2xl`]=`2xl`,e[`3xl`]=`3xl`,e[`4xl`]=`4xl`,e[`5xl`]=`5xl`,e.FULL=`full`,e}({}),a=function(e){return e.NONE=`none`,e.SM=`sm`,e.MD=`md`,e.LG=`lg`,e.XL=`xl`,e.FULL=`full`,e}({}),o=function(e){return e.NONE=`none`,e.SM=`sm`,e.MD=`md`,e.LG=`lg`,e.XL=`xl`,e}({}),s=function(e){return e.WITHOUT=`without`,e.X=`x`,e.Y=`y`,e.BOTH=`both`,e}({}),c=function(e){return e.PRIMARY=`primary`,e.SECONDARY=`secondary`,e.NEUTRAL=`neutral`,e.CARD=`card`,e.TEXT=`text`,e.ERROR=`error`,e.WARNING=`warning`,e.SUCCESS=`success`,e}({}),l=function(e){return e.NONE=`none`,e.HOVERABLE=`hoverable`,e.WITH=`with`,e}({}),u=function(e){return e.NONE=`none`,e.SM=`sm`,e.MD=`md`,e.LG=`lg`,e.XL=`xl`,e[`2xl`]=`2xl`,e}({});const d=({children:t,roundedSize:i,padding:a,transparency:o,separator:s,className:c,border:l,borderColor:u,background:d,gap:f,...p})=>n(`div`,{className:e(r({roundedSize:i,transparency:o,padding:a,separator:s,border:typeof l==`boolean`?l?`with`:`none`:void 0,background:d,borderColor:u,gap:f}),c),...p,children:t});export{d as Container,l as ContainerBackground,c as ContainerBorderColor,u as ContainerGap,o as ContainerPadding,i as ContainerRoundedSize,s as ContainerSeparator,a as ContainerTransparency,r as containerVariants};
+import{cn as e}from"../../utils/cn.mjs";import{cva as t}from"class-variance-authority";import{jsx as n}from"react/jsx-runtime";const r=t(`flex flex-col text-text backdrop-blur`,{variants:{roundedSize:{none:`rounded-none`,sm:`rounded-sm [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-md`,md:`rounded-md [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-lg`,lg:`rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl`,xl:`rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl`,"2xl":`rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl`,"3xl":`rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl`,"4xl":`rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]`,full:`rounded-full`},transparency:{none:`bg-card`,xs:`bg-card/95`,sm:`bg-card/90`,md:`bg-card/70`,lg:`bg-card/40`,xl:`bg-card/20`,full:``},padding:{none:`p-0`,sm:`px-3 py-2`,md:`px-4 py-3`,lg:`px-6 py-4`,xl:`px-8 py-6`,"2xl":`px-10 py-8`},separator:{without:``,x:`divide-x divide-dashed divide-text/20`,y:`divide-y divide-dashed divide-text/20`,both:`divide-x divide-y divide-dashed divide-text/20`},border:{none:``,with:`border-[1.3px]`},borderColor:{primary:`border-primary`,secondary:`border-secondary`,neutral:`border-neutral`,card:`border-card`,text:`border-text`,error:`border-error`,warning:`border-warning`,success:`border-success`},background:{none:``,hoverable:`bg-opacity-5! backdrop-blur-0 hover:bg-opacity-10! hover:backdrop-blur focus:bg-opacity-10! focus:backdrop-blur aria-selected:bg-opacity-15! aria-selected:backdrop-blur`,with:``},gap:{none:`gap-0`,sm:`gap-1`,md:`gap-3`,lg:`gap-5`,xl:`gap-8`,"2xl":`gap-10`}},defaultVariants:{roundedSize:`lg`,border:`none`,borderColor:`text`,transparency:`md`,padding:`none`,separator:`without`,gap:`none`},compoundVariants:[{background:`none`,class:`bg-transparent`}]});let i=function(e){return e.NONE=`none`,e.SM=`sm`,e.MD=`md`,e.LG=`lg`,e.XL=`xl`,e[`2xl`]=`2xl`,e[`3xl`]=`3xl`,e[`4xl`]=`4xl`,e[`5xl`]=`5xl`,e.FULL=`full`,e}({}),a=function(e){return e.NONE=`none`,e.SM=`sm`,e.MD=`md`,e.LG=`lg`,e.XL=`xl`,e.FULL=`full`,e}({}),o=function(e){return e.NONE=`none`,e.SM=`sm`,e.MD=`md`,e.LG=`lg`,e.XL=`xl`,e}({}),s=function(e){return e.WITHOUT=`without`,e.X=`x`,e.Y=`y`,e.BOTH=`both`,e}({}),c=function(e){return e.PRIMARY=`primary`,e.SECONDARY=`secondary`,e.NEUTRAL=`neutral`,e.CARD=`card`,e.TEXT=`text`,e.ERROR=`error`,e.WARNING=`warning`,e.SUCCESS=`success`,e}({}),l=function(e){return e.NONE=`none`,e.HOVERABLE=`hoverable`,e.WITH=`with`,e}({}),u=function(e){return e.NONE=`none`,e.SM=`sm`,e.MD=`md`,e.LG=`lg`,e.XL=`xl`,e[`2xl`]=`2xl`,e}({});const d=({children:t,roundedSize:i,padding:a,transparency:o,separator:s,className:c,border:l,borderColor:u,background:d,gap:f,...p})=>n(`div`,{className:e(r({roundedSize:i,transparency:o,padding:a,separator:s,border:typeof l==`boolean`?l?`with`:`none`:void 0,background:d,borderColor:u,gap:f}),c),...p,children:t});export{d as Container,l as ContainerBackground,c as ContainerBorderColor,u as ContainerGap,o as ContainerPadding,i as ContainerRoundedSize,s as ContainerSeparator,a as ContainerTransparency,r as containerVariants};
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Container/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type {\n  DetailedHTMLProps,\n  FC,\n  HTMLAttributes,\n  PropsWithChildren,\n} from 'react';\n\n/**\n * Container component variants using class-variance-authority\n * Provides flexible styling options for background, padding, borders, and layout\n */\nexport const containerVariants = cva('flex flex-col text-text backdrop-blur', {\n  variants: {\n    roundedSize: {\n      none: 'rounded-none',\n      sm: 'rounded-sm [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-md',\n      md: 'rounded-md [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-lg',\n      lg: 'rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl',\n      xl: 'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n      '2xl':\n        'rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl',\n      '3xl':\n        'rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl',\n      '4xl':\n        'rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]',\n      full: 'rounded-full [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-full',\n    },\n    transparency: {\n      none: 'bg-card',\n      xs: 'bg-card/95',\n      sm: 'bg-card/90',\n      md: 'bg-card/70',\n      lg: 'bg-card/40',\n      xl: 'bg-card/20',\n      full: '',\n    },\n    padding: {\n      none: 'p-0',\n      sm: 'px-3 py-2',\n      md: 'px-4 py-3',\n      lg: 'px-6 py-4',\n      xl: 'px-8 py-6',\n      '2xl': 'px-10 py-8',\n    },\n    separator: {\n      without: '',\n      x: 'divide-x divide-dashed divide-text/20',\n      y: 'divide-y divide-dashed divide-text/20',\n      both: 'divide-x divide-y divide-dashed divide-text/20',\n    },\n    border: {\n      none: '',\n      with: 'border-[1.3px]',\n    },\n    borderColor: {\n      primary: 'border-primary',\n      secondary: 'border-secondary',\n      neutral: 'border-neutral',\n      card: 'border-card',\n      text: 'border-text',\n      error: 'border-error',\n      warning: 'border-warning',\n      success: 'border-success',\n    },\n    background: {\n      none: '',\n      hoverable:\n        'bg-opacity-5! backdrop-blur-0 hover:bg-opacity-10! hover:backdrop-blur focus:bg-opacity-10! focus:backdrop-blur aria-selected:bg-opacity-15! aria-selected:backdrop-blur',\n      with: '',\n    },\n    gap: {\n      none: 'gap-0',\n      sm: 'gap-1',\n      md: 'gap-3',\n      lg: 'gap-5',\n      xl: 'gap-8',\n      '2xl': 'gap-10',\n    },\n  },\n  defaultVariants: {\n    roundedSize: 'lg',\n    border: 'none',\n    borderColor: 'text',\n    transparency: 'md',\n    padding: 'none',\n    separator: 'without',\n    gap: 'none',\n  },\n  compoundVariants: [\n    {\n      background: 'none',\n      class: 'bg-transparent',\n    },\n  ],\n});\n\n/** Available rounded corner sizes for the container */\nexport enum ContainerRoundedSize {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  '2xl' = '2xl',\n  '3xl' = '3xl',\n  '4xl' = '4xl',\n  '5xl' = '5xl',\n  FULL = 'full',\n}\n\n/** Background transparency levels for the container */\nexport enum ContainerTransparency {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  FULL = 'full',\n}\n\n/** Padding sizes for container content */\nexport enum ContainerPadding {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n}\n\n/** Separator options for dividing container children */\nexport enum ContainerSeparator {\n  WITHOUT = 'without',\n  X = 'x',\n  Y = 'y',\n  BOTH = 'both',\n}\n\n/** Border color options for the container */\nexport enum ContainerBorderColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  NEUTRAL = 'neutral',\n  CARD = 'card',\n  TEXT = 'text',\n  ERROR = 'error',\n  WARNING = 'warning',\n  SUCCESS = 'success',\n}\n\n/** Background interaction states for the container */\nexport enum ContainerBackground {\n  NONE = 'none',\n  HOVERABLE = 'hoverable',\n  WITH = 'with',\n}\n\n/** Gap sizes between container children */\nexport enum ContainerGap {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  '2xl' = '2xl',\n}\n\n/** Container component props extending HTML div attributes */\nexport type ContainerProps = PropsWithChildren<\n  Omit<VariantProps<typeof containerVariants>, 'border'>\n> &\n  DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {\n    /** Whether to show a border around the container */\n    border?: boolean;\n  };\n\n/**\n * Container Component\n *\n * A flexible container component for organizing content with customizable styling options.\n * Supports various visual states, layouts, and accessibility features.\n *\n * ## Features\n * - **Flexible Layout**: Supports different padding, gap, and separator options\n * - **Visual Variants**: Multiple background transparency levels and border styles\n * - **Responsive Design**: Configurable rounded corners and spacing\n * - **Semantic HTML**: Proper div element with extensible attributes\n *\n * ## Accessibility\n * - Inherits all standard div accessibility features\n * - Supports ARIA attributes through spread props\n * - Maintains proper semantic structure for screen readers\n *\n * @param children - The content to display inside the container\n * @param roundedSize - Border radius size (default: 'md')\n * @param transparency - Background transparency level (default: 'md')\n * @param padding - Internal padding size (default: 'none')\n * @param separator - Divider lines between children (default: 'without')\n * @param border - Whether to show border (default: false)\n * @param borderColor - Color of the border (default: 'text')\n * @param background - Background interaction behavior (default: 'none')\n * @param gap - Space between child elements (default: 'none')\n * @param className - Additional CSS classes\n * @param props - Additional HTML div attributes including ARIA attributes\n */\nexport const Container: FC<ContainerProps> = ({\n  children,\n  roundedSize,\n  padding,\n  transparency,\n  separator,\n  className,\n  border,\n  borderColor,\n  background,\n  gap,\n  ...props\n}) => (\n  <div\n    className={cn(\n      containerVariants({\n        roundedSize,\n        transparency,\n        padding,\n        separator,\n        border:\n          typeof border === 'boolean' ? (border ? 'with' : 'none') : undefined,\n        background,\n        borderColor,\n        gap,\n      }),\n      className\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n"],"mappings":"+HAaA,MAAa,EAAoB,EAAI,wCAAyC,CAC5E,SAAU,CACR,YAAa,CACX,KAAM,eACN,GAAI,iFACJ,GAAI,iFACJ,GAAI,iFACJ,GAAI,kFACJ,MACE,mFACF,MACE,mFACF,MACE,wFACF,KAAM,qFACP,CACD,aAAc,CACZ,KAAM,UACN,GAAI,aACJ,GAAI,aACJ,GAAI,aACJ,GAAI,aACJ,GAAI,aACJ,KAAM,GACP,CACD,QAAS,CACP,KAAM,MACN,GAAI,YACJ,GAAI,YACJ,GAAI,YACJ,GAAI,YACJ,MAAO,aACR,CACD,UAAW,CACT,QAAS,GACT,EAAG,wCACH,EAAG,wCACH,KAAM,iDACP,CACD,OAAQ,CACN,KAAM,GACN,KAAM,iBACP,CACD,YAAa,CACX,QAAS,iBACT,UAAW,mBACX,QAAS,iBACT,KAAM,cACN,KAAM,cACN,MAAO,eACP,QAAS,iBACT,QAAS,iBACV,CACD,WAAY,CACV,KAAM,GACN,UACE,2KACF,KAAM,GACP,CACD,IAAK,CACH,KAAM,QACN,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,MAAO,SACR,CACF,CACD,gBAAiB,CACf,YAAa,KACb,OAAQ,OACR,YAAa,OACb,aAAc,KACd,QAAS,OACT,UAAW,UACX,IAAK,OACN,CACD,iBAAkB,CAChB,CACE,WAAY,OACZ,MAAO,iBACR,CACF,CACF,CAAC,CAGF,IAAY,EAAA,SAAA,EAAL,OACL,GAAA,KAAA,OACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,OAAA,MACA,EAAA,OAAA,MACA,EAAA,OAAA,MACA,EAAA,OAAA,MACA,EAAA,KAAA,cAIU,EAAA,SAAA,EAAL,OACL,GAAA,KAAA,OACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,KAAA,cAIU,EAAA,SAAA,EAAL,OACL,GAAA,KAAA,OACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,YAIU,EAAA,SAAA,EAAL,OACL,GAAA,QAAA,UACA,EAAA,EAAA,IACA,EAAA,EAAA,IACA,EAAA,KAAA,cAIU,EAAA,SAAA,EAAL,OACL,GAAA,QAAA,UACA,EAAA,UAAA,YACA,EAAA,QAAA,UACA,EAAA,KAAA,OACA,EAAA,KAAA,OACA,EAAA,MAAA,QACA,EAAA,QAAA,UACA,EAAA,QAAA,iBAIU,EAAA,SAAA,EAAL,OACL,GAAA,KAAA,OACA,EAAA,UAAA,YACA,EAAA,KAAA,cAIU,EAAA,SAAA,EAAL,OACL,GAAA,KAAA,OACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,OAAA,aAyCF,MAAa,GAAiC,CAC5C,WACA,cACA,UACA,eACA,YACA,YACA,SACA,cACA,aACA,MACA,GAAG,KAEH,EAAC,MAAA,CACC,UAAW,EACT,EAAkB,CAChB,cACA,eACA,UACA,YACA,OACE,OAAO,GAAW,UAAa,EAAS,OAAS,OAAU,IAAA,GAC7D,aACA,cACA,MACD,CAAC,CACF,EACD,CACD,GAAI,EAEH,YACG"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Container/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type {\n  DetailedHTMLProps,\n  FC,\n  HTMLAttributes,\n  PropsWithChildren,\n} from 'react';\n\n/**\n * Container component variants using class-variance-authority\n * Provides flexible styling options for background, padding, borders, and layout\n */\nexport const containerVariants = cva('flex flex-col text-text backdrop-blur', {\n  variants: {\n    roundedSize: {\n      none: 'rounded-none',\n      sm: 'rounded-sm [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-md',\n      md: 'rounded-md [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-lg',\n      lg: 'rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl',\n      xl: 'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n      '2xl':\n        'rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl',\n      '3xl':\n        'rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl',\n      '4xl':\n        'rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]',\n      full: 'rounded-full',\n    },\n    transparency: {\n      none: 'bg-card',\n      xs: 'bg-card/95',\n      sm: 'bg-card/90',\n      md: 'bg-card/70',\n      lg: 'bg-card/40',\n      xl: 'bg-card/20',\n      full: '',\n    },\n    padding: {\n      none: 'p-0',\n      sm: 'px-3 py-2',\n      md: 'px-4 py-3',\n      lg: 'px-6 py-4',\n      xl: 'px-8 py-6',\n      '2xl': 'px-10 py-8',\n    },\n    separator: {\n      without: '',\n      x: 'divide-x divide-dashed divide-text/20',\n      y: 'divide-y divide-dashed divide-text/20',\n      both: 'divide-x divide-y divide-dashed divide-text/20',\n    },\n    border: {\n      none: '',\n      with: 'border-[1.3px]',\n    },\n    borderColor: {\n      primary: 'border-primary',\n      secondary: 'border-secondary',\n      neutral: 'border-neutral',\n      card: 'border-card',\n      text: 'border-text',\n      error: 'border-error',\n      warning: 'border-warning',\n      success: 'border-success',\n    },\n    background: {\n      none: '',\n      hoverable:\n        'bg-opacity-5! backdrop-blur-0 hover:bg-opacity-10! hover:backdrop-blur focus:bg-opacity-10! focus:backdrop-blur aria-selected:bg-opacity-15! aria-selected:backdrop-blur',\n      with: '',\n    },\n    gap: {\n      none: 'gap-0',\n      sm: 'gap-1',\n      md: 'gap-3',\n      lg: 'gap-5',\n      xl: 'gap-8',\n      '2xl': 'gap-10',\n    },\n  },\n  defaultVariants: {\n    roundedSize: 'lg',\n    border: 'none',\n    borderColor: 'text',\n    transparency: 'md',\n    padding: 'none',\n    separator: 'without',\n    gap: 'none',\n  },\n  compoundVariants: [\n    {\n      background: 'none',\n      class: 'bg-transparent',\n    },\n  ],\n});\n\n/** Available rounded corner sizes for the container */\nexport enum ContainerRoundedSize {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  '2xl' = '2xl',\n  '3xl' = '3xl',\n  '4xl' = '4xl',\n  '5xl' = '5xl',\n  FULL = 'full',\n}\n\n/** Background transparency levels for the container */\nexport enum ContainerTransparency {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  FULL = 'full',\n}\n\n/** Padding sizes for container content */\nexport enum ContainerPadding {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n}\n\n/** Separator options for dividing container children */\nexport enum ContainerSeparator {\n  WITHOUT = 'without',\n  X = 'x',\n  Y = 'y',\n  BOTH = 'both',\n}\n\n/** Border color options for the container */\nexport enum ContainerBorderColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  NEUTRAL = 'neutral',\n  CARD = 'card',\n  TEXT = 'text',\n  ERROR = 'error',\n  WARNING = 'warning',\n  SUCCESS = 'success',\n}\n\n/** Background interaction states for the container */\nexport enum ContainerBackground {\n  NONE = 'none',\n  HOVERABLE = 'hoverable',\n  WITH = 'with',\n}\n\n/** Gap sizes between container children */\nexport enum ContainerGap {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  '2xl' = '2xl',\n}\n\n/** Container component props extending HTML div attributes */\nexport type ContainerProps = PropsWithChildren<\n  Omit<VariantProps<typeof containerVariants>, 'border'>\n> &\n  DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {\n    /** Whether to show a border around the container */\n    border?: boolean;\n  };\n\n/**\n * Container Component\n *\n * A flexible container component for organizing content with customizable styling options.\n * Supports various visual states, layouts, and accessibility features.\n *\n * ## Features\n * - **Flexible Layout**: Supports different padding, gap, and separator options\n * - **Visual Variants**: Multiple background transparency levels and border styles\n * - **Responsive Design**: Configurable rounded corners and spacing\n * - **Semantic HTML**: Proper div element with extensible attributes\n *\n * ## Accessibility\n * - Inherits all standard div accessibility features\n * - Supports ARIA attributes through spread props\n * - Maintains proper semantic structure for screen readers\n *\n * @param children - The content to display inside the container\n * @param roundedSize - Border radius size (default: 'md')\n * @param transparency - Background transparency level (default: 'md')\n * @param padding - Internal padding size (default: 'none')\n * @param separator - Divider lines between children (default: 'without')\n * @param border - Whether to show border (default: false)\n * @param borderColor - Color of the border (default: 'text')\n * @param background - Background interaction behavior (default: 'none')\n * @param gap - Space between child elements (default: 'none')\n * @param className - Additional CSS classes\n * @param props - Additional HTML div attributes including ARIA attributes\n */\nexport const Container: FC<ContainerProps> = ({\n  children,\n  roundedSize,\n  padding,\n  transparency,\n  separator,\n  className,\n  border,\n  borderColor,\n  background,\n  gap,\n  ...props\n}) => (\n  <div\n    className={cn(\n      containerVariants({\n        roundedSize,\n        transparency,\n        padding,\n        separator,\n        border:\n          typeof border === 'boolean' ? (border ? 'with' : 'none') : undefined,\n        background,\n        borderColor,\n        gap,\n      }),\n      className\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n"],"mappings":"+HAaA,MAAa,EAAoB,EAAI,wCAAyC,CAC5E,SAAU,CACR,YAAa,CACX,KAAM,eACN,GAAI,iFACJ,GAAI,iFACJ,GAAI,iFACJ,GAAI,kFACJ,MACE,mFACF,MACE,mFACF,MACE,wFACF,KAAM,eACP,CACD,aAAc,CACZ,KAAM,UACN,GAAI,aACJ,GAAI,aACJ,GAAI,aACJ,GAAI,aACJ,GAAI,aACJ,KAAM,GACP,CACD,QAAS,CACP,KAAM,MACN,GAAI,YACJ,GAAI,YACJ,GAAI,YACJ,GAAI,YACJ,MAAO,aACR,CACD,UAAW,CACT,QAAS,GACT,EAAG,wCACH,EAAG,wCACH,KAAM,iDACP,CACD,OAAQ,CACN,KAAM,GACN,KAAM,iBACP,CACD,YAAa,CACX,QAAS,iBACT,UAAW,mBACX,QAAS,iBACT,KAAM,cACN,KAAM,cACN,MAAO,eACP,QAAS,iBACT,QAAS,iBACV,CACD,WAAY,CACV,KAAM,GACN,UACE,2KACF,KAAM,GACP,CACD,IAAK,CACH,KAAM,QACN,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,MAAO,SACR,CACF,CACD,gBAAiB,CACf,YAAa,KACb,OAAQ,OACR,YAAa,OACb,aAAc,KACd,QAAS,OACT,UAAW,UACX,IAAK,OACN,CACD,iBAAkB,CAChB,CACE,WAAY,OACZ,MAAO,iBACR,CACF,CACF,CAAC,CAGF,IAAY,EAAA,SAAA,EAAL,OACL,GAAA,KAAA,OACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,OAAA,MACA,EAAA,OAAA,MACA,EAAA,OAAA,MACA,EAAA,OAAA,MACA,EAAA,KAAA,cAIU,EAAA,SAAA,EAAL,OACL,GAAA,KAAA,OACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,KAAA,cAIU,EAAA,SAAA,EAAL,OACL,GAAA,KAAA,OACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,YAIU,EAAA,SAAA,EAAL,OACL,GAAA,QAAA,UACA,EAAA,EAAA,IACA,EAAA,EAAA,IACA,EAAA,KAAA,cAIU,EAAA,SAAA,EAAL,OACL,GAAA,QAAA,UACA,EAAA,UAAA,YACA,EAAA,QAAA,UACA,EAAA,KAAA,OACA,EAAA,KAAA,OACA,EAAA,MAAA,QACA,EAAA,QAAA,UACA,EAAA,QAAA,iBAIU,EAAA,SAAA,EAAL,OACL,GAAA,KAAA,OACA,EAAA,UAAA,YACA,EAAA,KAAA,cAIU,EAAA,SAAA,EAAL,OACL,GAAA,KAAA,OACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,OAAA,aAyCF,MAAa,GAAiC,CAC5C,WACA,cACA,UACA,eACA,YACA,YACA,SACA,cACA,aACA,MACA,GAAG,KAEH,EAAC,MAAA,CACC,UAAW,EACT,EAAkB,CAChB,cACA,eACA,UACA,YACA,OACE,OAAO,GAAW,UAAa,EAAS,OAAS,OAAU,IAAA,GAC7D,aACA,cACA,MACD,CAAC,CACF,EACD,CACD,GAAI,EAEH,YACG"}

package/dist/esm/components/Input/Checkbox.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";const i=t([`appearance-none`,`relative cursor-pointer border-2`,`focus:outline-0`,`checked:border-current checked:bg-current checked:hover:bg-current/80`,`ring-current/20 ring-offset-current`,`hover:bg-current/20`,`disabled:opacity-50`,`ring-0 transition-all duration-300 ease-in-out hover:ring-4 focus-visible:ring-6`,`checked:before:absolute checked:before:inset-0 checked:before:content-['✓']`,`checked:before:flex checked:before:items-center checked:before:justify-center`,`checked:before:text-text-opposite/80`,`rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl`,`after:absolute after:-inset-2 after:content-['']`].join(` `),{variants:{variant:{default:``},size:{xs:`size-3 rounded-sm`,sm:`size-4 rounded-md`,md:`size-5 rounded-lg`,lg:`size-6 rounded-xl`},color:{primary:`accent-primary`,secondary:`accent-secondary`,destructive:`accent-destructive`,neutral:`accent-neutral`,light:`accent-light`,text:`accent-text`,dark:`accent-dark`,error:`accent-error`,success:`accent-success`,custom:`accent-custom`},validationStyleEnabled:{disabled:``,enabled:`valid:border-success invalid:border-error`}},defaultVariants:{variant:`default`,color:`primary`,validationStyleEnabled:`disabled`,size:`md`}});let a=function(e){return e.XS=`xs`,e.SM=`sm`,e.MD=`md`,e.LG=`lg`,e}({}),o=function(e){return e.PRIMARY=`primary`,e.SECONDARY=`secondary`,e.DESTRUCTIVE=`destructive`,e.NEUTRAL=`neutral`,e.LIGHT=`light`,e.TEXT=`text`,e.DARK=`dark`,e.ERROR=`error`,e.SUCCESS=`success`,e.CUSTOM=`custom`,e}({});const s=({validationStyleEnabled:t=!1,label:r,size:a,color:o,name:s,variant:c,className:l,labelClassName:u,...d})=>n(`input`,{type:`checkbox`,className:e(i({variant:c,size:a,color:o,validationStyleEnabled:t?`enabled`:`disabled`}),l),...d}),c=t=>{let{label:i,name:a,id:o}=t;return i?r(`label`,{htmlFor:o??a,className:e(`flex w-full cursor-pointer items-center gap-x-4 font-medium text-sm`,t.labelClassName),children:[n(s,{id:o??a,...t}),i]}):n(s,{id:o??a,...t})};export{c as Checkbox,o as CheckboxColor,a as CheckboxSize,i as checkboxVariants};
+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";const i=t([`appearance-none`,`relative cursor-pointer border-2`,`focus:outline-0`,`checked:border-current checked:bg-current checked:hover:bg-current/80`,`ring-current/20 ring-offset-current`,`hover:bg-current/20`,`disabled:opacity-50`,`ring-0 transition-all duration-300 ease-in-out hover:ring-4 focus-visible:ring-6`,`checked:before:absolute checked:before:inset-0 checked:before:content-['✓']`,`checked:before:flex checked:before:items-center checked:before:justify-center`,`checked:before:text-text-opposite/80`,`rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl`,`after:absolute after:-inset-2 after:content-['']`].join(` `),{variants:{variant:{default:``},size:{xs:`size-3 rounded-sm`,sm:`size-4 rounded-md`,md:`size-5 rounded-lg`,lg:`size-6 rounded-xl`},color:{primary:`accent-primary`,secondary:`accent-secondary`,destructive:`accent-destructive`,neutral:`accent-neutral`,light:`accent-light`,text:`accent-text`,dark:`accent-dark`,error:`accent-error`,success:`accent-success`,custom:`accent-custom`},validationStyleEnabled:{disabled:``,enabled:`valid:border-success invalid:border-error`}},defaultVariants:{variant:`default`,color:`primary`,validationStyleEnabled:`disabled`,size:`md`}});let a=function(e){return e.XS=`xs`,e.SM=`sm`,e.MD=`md`,e.LG=`lg`,e}({}),o=function(e){return e.PRIMARY=`primary`,e.SECONDARY=`secondary`,e.DESTRUCTIVE=`destructive`,e.NEUTRAL=`neutral`,e.LIGHT=`light`,e.TEXT=`text`,e.DARK=`dark`,e.ERROR=`error`,e.SUCCESS=`success`,e.CUSTOM=`custom`,e}({});const s=({validationStyleEnabled:t=!1,label:r,size:a,color:o,name:s,variant:c,className:l,labelClassName:u,...d})=>n(`input`,{type:`checkbox`,className:e(i({variant:c,size:a,color:o,validationStyleEnabled:t?`enabled`:`disabled`}),l),...d}),c=t=>{let{label:i,name:a,id:o}=t;return i?r(`label`,{htmlFor:o??a,className:e(`flex w-full cursor-pointer items-center gap-x-4 font-medium text-sm`,t.size===`xs`&&`text-xs`,t.labelClassName),children:[n(s,{id:o??a,...t}),i]}):n(s,{id:o??a,...t})};export{c as Checkbox,o as CheckboxColor,a as CheckboxSize,i as checkboxVariants};
 //# sourceMappingURL=Checkbox.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mjs","names":[],"sources":["../../../../src/components/Input/Checkbox.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type {\n  DetailedHTMLProps,\n  FC,\n  InputHTMLAttributes,\n  ReactNode,\n} from 'react';\n\nexport const checkboxVariants = cva(\n  [\n    'appearance-none',\n    'relative cursor-pointer border-2',\n    'focus:outline-0',\n    'checked:border-current checked:bg-current checked:hover:bg-current/80',\n    'ring-current/20 ring-offset-current',\n    'hover:bg-current/20',\n    'disabled:opacity-50',\n\n    // Ring + animation\n    'ring-0 transition-all duration-300 ease-in-out hover:ring-4 focus-visible:ring-6',\n\n    // centered custom checkmark with text-opposite color\n    \"checked:before:absolute checked:before:inset-0 checked:before:content-['✓']\",\n    'checked:before:flex checked:before:items-center checked:before:justify-center',\n    'checked:before:text-text-opposite/80',\n\n    // Corner shape\n    'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n\n    \"after:absolute after:-inset-2 after:content-['']\",\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        default: '',\n      },\n      size: {\n        xs: 'size-3 rounded-sm',\n        sm: 'size-4 rounded-md',\n        md: 'size-5 rounded-lg',\n        lg: 'size-6 rounded-xl',\n      },\n      color: {\n        primary: 'accent-primary',\n        secondary: 'accent-secondary',\n        destructive: 'accent-destructive',\n        neutral: 'accent-neutral',\n        light: 'accent-light',\n        text: 'accent-text',\n        dark: 'accent-dark',\n        error: 'accent-error',\n        success: 'accent-success',\n        custom: 'accent-custom',\n      },\n      validationStyleEnabled: {\n        disabled: '',\n        enabled: 'valid:border-success invalid:border-error',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      color: 'primary',\n      validationStyleEnabled: 'disabled',\n      size: 'md',\n    },\n  }\n);\n\nexport enum CheckboxSize {\n  XS = 'xs',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n}\n\nexport enum CheckboxColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  TEXT = 'text',\n  DARK = 'dark',\n  ERROR = 'error',\n  SUCCESS = 'success',\n  CUSTOM = 'custom',\n}\n\nexport type CheckboxProps = Omit<\n  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,\n  'size'\n> & {\n  name: string;\n  validationStyleEnabled?: boolean;\n  label?: ReactNode;\n} & Omit<\n    VariantProps<typeof checkboxVariants>,\n    'validationStyleEnabled' | 'size' | 'color'\n  > & {\n    size?: CheckboxSize | `${CheckboxSize}`;\n    color?: CheckboxColor | `${CheckboxColor}`;\n    labelClassName?: string;\n  };\n\nconst Input: FC<CheckboxProps> = ({\n  validationStyleEnabled = false,\n  label,\n  size,\n  color,\n  name,\n  variant,\n  className,\n  labelClassName,\n  ...props\n}) => (\n  <input\n    type=\"checkbox\"\n    className={cn(\n      checkboxVariants({\n        variant,\n        size,\n        color,\n        validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n      }),\n      className\n    )}\n    {...props}\n  />\n);\n\nexport const Checkbox: FC<CheckboxProps> = (props) => {\n  const { label, name, id } = props;\n\n  return label ? (\n    <label\n      htmlFor={id ?? name}\n      className={cn(\n        'flex w-full cursor-pointer items-center gap-x-4 font-medium text-sm',\n        props.labelClassName\n      )}\n    >\n      <Input id={id ?? name} {...props} />\n      {label}\n    </label>\n  ) : (\n    <Input id={id ?? name} {...props} />\n  );\n};\n"],"mappings":"yIASA,MAAa,EAAmB,EAC9B,CACE,kBACA,mCACA,kBACA,wEACA,sCACA,sBACA,sBAGA,mFAGA,8EACA,gFACA,uCAGA,kFAEA,mDACD,CAAC,KAAK,IAAI,CACX,CACE,SAAU,CACR,QAAS,CACP,QAAS,GACV,CACD,KAAM,CACJ,GAAI,oBACJ,GAAI,oBACJ,GAAI,oBACJ,GAAI,oBACL,CACD,MAAO,CACL,QAAS,iBACT,UAAW,mBACX,YAAa,qBACb,QAAS,iBACT,MAAO,eACP,KAAM,cACN,KAAM,cACN,MAAO,eACP,QAAS,iBACT,OAAQ,gBACT,CACD,uBAAwB,CACtB,SAAU,GACV,QAAS,4CACV,CACF,CACD,gBAAiB,CACf,QAAS,UACT,MAAO,UACP,uBAAwB,WACxB,KAAM,KACP,CACF,CACF,CAED,IAAY,EAAA,SAAA,EAAL,OACL,GAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,YAGU,EAAA,SAAA,EAAL,OACL,GAAA,QAAA,UACA,EAAA,UAAA,YACA,EAAA,YAAA,cACA,EAAA,QAAA,UACA,EAAA,MAAA,QACA,EAAA,KAAA,OACA,EAAA,KAAA,OACA,EAAA,MAAA,QACA,EAAA,QAAA,UACA,EAAA,OAAA,gBAmBF,MAAM,GAA4B,CAChC,yBAAyB,GACzB,QACA,OACA,QACA,OACA,UACA,YACA,iBACA,GAAG,KAEH,EAAC,QAAA,CACC,KAAK,WACL,UAAW,EACT,EAAiB,CACf,UACA,OACA,QACA,uBAAwB,EAAyB,UAAY,WAC9D,CAAC,CACF,EACD,CACD,GAAI,GACJ,CAGS,EAA+B,GAAU,CACpD,GAAM,CAAE,QAAO,OAAM,MAAO,EAE5B,OAAO,EACL,EAAC,QAAA,CACC,QAAS,GAAM,EACf,UAAW,EACT,sEACA,EAAM,eACP,WAED,EAAC,EAAA,CAAM,GAAI,GAAM,EAAM,GAAI,GAAS,CACnC,EAAA,EACK,CAER,EAAC,EAAA,CAAM,GAAI,GAAM,EAAM,GAAI,GAAS"}
+{"version":3,"file":"Checkbox.mjs","names":[],"sources":["../../../../src/components/Input/Checkbox.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type {\n  DetailedHTMLProps,\n  FC,\n  InputHTMLAttributes,\n  ReactNode,\n} from 'react';\n\nexport const checkboxVariants = cva(\n  [\n    'appearance-none',\n    'relative cursor-pointer border-2',\n    'focus:outline-0',\n    'checked:border-current checked:bg-current checked:hover:bg-current/80',\n    'ring-current/20 ring-offset-current',\n    'hover:bg-current/20',\n    'disabled:opacity-50',\n\n    // Ring + animation\n    'ring-0 transition-all duration-300 ease-in-out hover:ring-4 focus-visible:ring-6',\n\n    // centered custom checkmark with text-opposite color\n    \"checked:before:absolute checked:before:inset-0 checked:before:content-['✓']\",\n    'checked:before:flex checked:before:items-center checked:before:justify-center',\n    'checked:before:text-text-opposite/80',\n\n    // Corner shape\n    'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n\n    \"after:absolute after:-inset-2 after:content-['']\",\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        default: '',\n      },\n      size: {\n        xs: 'size-3 rounded-sm',\n        sm: 'size-4 rounded-md',\n        md: 'size-5 rounded-lg',\n        lg: 'size-6 rounded-xl',\n      },\n      color: {\n        primary: 'accent-primary',\n        secondary: 'accent-secondary',\n        destructive: 'accent-destructive',\n        neutral: 'accent-neutral',\n        light: 'accent-light',\n        text: 'accent-text',\n        dark: 'accent-dark',\n        error: 'accent-error',\n        success: 'accent-success',\n        custom: 'accent-custom',\n      },\n      validationStyleEnabled: {\n        disabled: '',\n        enabled: 'valid:border-success invalid:border-error',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      color: 'primary',\n      validationStyleEnabled: 'disabled',\n      size: 'md',\n    },\n  }\n);\n\nexport enum CheckboxSize {\n  XS = 'xs',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n}\n\nexport enum CheckboxColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  TEXT = 'text',\n  DARK = 'dark',\n  ERROR = 'error',\n  SUCCESS = 'success',\n  CUSTOM = 'custom',\n}\n\nexport type CheckboxProps = Omit<\n  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,\n  'size'\n> & {\n  name: string;\n  validationStyleEnabled?: boolean;\n  label?: ReactNode;\n} & Omit<\n    VariantProps<typeof checkboxVariants>,\n    'validationStyleEnabled' | 'size' | 'color'\n  > & {\n    size?: CheckboxSize | `${CheckboxSize}`;\n    color?: CheckboxColor | `${CheckboxColor}`;\n    labelClassName?: string;\n  };\n\nconst Input: FC<CheckboxProps> = ({\n  validationStyleEnabled = false,\n  label,\n  size,\n  color,\n  name,\n  variant,\n  className,\n  labelClassName,\n  ...props\n}) => (\n  <input\n    type=\"checkbox\"\n    className={cn(\n      checkboxVariants({\n        variant,\n        size,\n        color,\n        validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n      }),\n      className\n    )}\n    {...props}\n  />\n);\n\nexport const Checkbox: FC<CheckboxProps> = (props) => {\n  const { label, name, id } = props;\n\n  return label ? (\n    <label\n      htmlFor={id ?? name}\n      className={cn(\n        'flex w-full cursor-pointer items-center gap-x-4 font-medium text-sm',\n        props.size === 'xs' && 'text-xs',\n        props.labelClassName\n      )}\n    >\n      <Input id={id ?? name} {...props} />\n      {label}\n    </label>\n  ) : (\n    <Input id={id ?? name} {...props} />\n  );\n};\n"],"mappings":"yIASA,MAAa,EAAmB,EAC9B,CACE,kBACA,mCACA,kBACA,wEACA,sCACA,sBACA,sBAGA,mFAGA,8EACA,gFACA,uCAGA,kFAEA,mDACD,CAAC,KAAK,IAAI,CACX,CACE,SAAU,CACR,QAAS,CACP,QAAS,GACV,CACD,KAAM,CACJ,GAAI,oBACJ,GAAI,oBACJ,GAAI,oBACJ,GAAI,oBACL,CACD,MAAO,CACL,QAAS,iBACT,UAAW,mBACX,YAAa,qBACb,QAAS,iBACT,MAAO,eACP,KAAM,cACN,KAAM,cACN,MAAO,eACP,QAAS,iBACT,OAAQ,gBACT,CACD,uBAAwB,CACtB,SAAU,GACV,QAAS,4CACV,CACF,CACD,gBAAiB,CACf,QAAS,UACT,MAAO,UACP,uBAAwB,WACxB,KAAM,KACP,CACF,CACF,CAED,IAAY,EAAA,SAAA,EAAL,OACL,GAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,YAGU,EAAA,SAAA,EAAL,OACL,GAAA,QAAA,UACA,EAAA,UAAA,YACA,EAAA,YAAA,cACA,EAAA,QAAA,UACA,EAAA,MAAA,QACA,EAAA,KAAA,OACA,EAAA,KAAA,OACA,EAAA,MAAA,QACA,EAAA,QAAA,UACA,EAAA,OAAA,gBAmBF,MAAM,GAA4B,CAChC,yBAAyB,GACzB,QACA,OACA,QACA,OACA,UACA,YACA,iBACA,GAAG,KAEH,EAAC,QAAA,CACC,KAAK,WACL,UAAW,EACT,EAAiB,CACf,UACA,OACA,QACA,uBAAwB,EAAyB,UAAY,WAC9D,CAAC,CACF,EACD,CACD,GAAI,GACJ,CAGS,EAA+B,GAAU,CACpD,GAAM,CAAE,QAAO,OAAM,MAAO,EAE5B,OAAO,EACL,EAAC,QAAA,CACC,QAAS,GAAM,EACf,UAAW,EACT,sEACA,EAAM,OAAS,MAAQ,UACvB,EAAM,eACP,WAED,EAAC,EAAA,CAAM,GAAI,GAAM,EAAM,GAAI,GAAS,CACnC,EAAA,EACK,CAER,EAAC,EAAA,CAAM,GAAI,GAAM,EAAM,GAAI,GAAS"}

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.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};
+"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 text-sm`,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 | 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"}
+{"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 text-sm\">{numberItemsSelector}</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,gCAAwB,GAA2B,CACnE,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/Pagination/ShowingResultsNumberItems.mjs

@@ -1,2 +1,2 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import{useIntlayer as t}from"react-intlayer";import{useNumber as n}from"react-intlayer/format";const r=({currentPage:r,pageSize:i,totalItems:a})=>{let{showingResults:o}=t(`pagination`),s=n(),c=Math.max(1,i),l=Math.max(1,Math.ceil(a/c)),u=Math.min(Math.max(1,r),l),d=a===0?0:Math.min((u-1)*c+1,a),f=a===0?0:Math.min(u*c,a);return e(`div`,{className:`text-neutral-600 text-sm dark:text-neutral-400`,children:o({start:s(d),end:s(f),total:s(a)})})};export{r as ShowingResultsNumberItems};
+"use client";import{jsx as e}from"react/jsx-runtime";import{useIntlayer as t}from"react-intlayer";import{useNumber as n}from"react-intlayer/format";const r=({currentPage:r,pageSize:i,totalItems:a})=>{let{showingResults:o}=t(`pagination`),s=n(),c=Math.max(1,i),l=Math.max(1,Math.ceil(a/c)),u=Math.min(Math.max(1,r),l),d=a===0?0:Math.min((u-1)*c+1,a),f=a===0?0:Math.min(u*c,a);return e(`div`,{className:`text-neutral text-sm`,children:o({start:s(d),end:s(f),total:s(a)})})};export{r as ShowingResultsNumberItems};
 //# sourceMappingURL=ShowingResultsNumberItems.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ShowingResultsNumberItems.mjs","names":[],"sources":["../../../../src/components/Pagination/ShowingResultsNumberItems.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { useNumber } from 'react-intlayer/format';\n\nexport type ShowingResultsNumberItemsProps = {\n  currentPage: number;\n  pageSize: number;\n  totalItems: number;\n};\n\nexport const ShowingResultsNumberItems: FC<ShowingResultsNumberItemsProps> = ({\n  currentPage,\n  pageSize,\n  totalItems,\n}) => {\n  const { showingResults } = useIntlayer('pagination');\n  const number = useNumber();\n\n  // Guard against weird inputs\n  const safePageSize = Math.max(1, pageSize);\n  const totalPages = Math.max(1, Math.ceil(totalItems / safePageSize));\n  const page = Math.min(Math.max(1, currentPage), totalPages);\n\n  const start =\n    totalItems === 0 ? 0 : Math.min((page - 1) * safePageSize + 1, totalItems);\n  const end = totalItems === 0 ? 0 : Math.min(page * safePageSize, totalItems);\n\n  return (\n    <div className=\"text-neutral-600 text-sm dark:text-neutral-400\">\n      {showingResults({\n        start: number(start),\n        end: number(end),\n        total: number(totalItems),\n      })}\n    </div>\n  );\n};\n"],"mappings":"oJAYA,MAAa,GAAiE,CAC5E,cACA,WACA,gBACI,CACJ,GAAM,CAAE,kBAAmB,EAAY,aAAa,CAC9C,EAAS,GAAW,CAGpB,EAAe,KAAK,IAAI,EAAG,EAAS,CACpC,EAAa,KAAK,IAAI,EAAG,KAAK,KAAK,EAAa,EAAa,CAAC,CAC9D,EAAO,KAAK,IAAI,KAAK,IAAI,EAAG,EAAY,CAAE,EAAW,CAErD,EACJ,IAAe,EAAI,EAAI,KAAK,KAAK,EAAO,GAAK,EAAe,EAAG,EAAW,CACtE,EAAM,IAAe,EAAI,EAAI,KAAK,IAAI,EAAO,EAAc,EAAW,CAE5E,OACE,EAAC,MAAA,CAAI,UAAU,0DACZ,EAAe,CACd,MAAO,EAAO,EAAM,CACpB,IAAK,EAAO,EAAI,CAChB,MAAO,EAAO,EAAW,CAC1B,CAAC,EACE"}
+{"version":3,"file":"ShowingResultsNumberItems.mjs","names":[],"sources":["../../../../src/components/Pagination/ShowingResultsNumberItems.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { useNumber } from 'react-intlayer/format';\n\nexport type ShowingResultsNumberItemsProps = {\n  currentPage: number;\n  pageSize: number;\n  totalItems: number;\n};\n\nexport const ShowingResultsNumberItems: FC<ShowingResultsNumberItemsProps> = ({\n  currentPage,\n  pageSize,\n  totalItems,\n}) => {\n  const { showingResults } = useIntlayer('pagination');\n  const number = useNumber();\n\n  // Guard against weird inputs\n  const safePageSize = Math.max(1, pageSize);\n  const totalPages = Math.max(1, Math.ceil(totalItems / safePageSize));\n  const page = Math.min(Math.max(1, currentPage), totalPages);\n\n  const start =\n    totalItems === 0 ? 0 : Math.min((page - 1) * safePageSize + 1, totalItems);\n  const end = totalItems === 0 ? 0 : Math.min(page * safePageSize, totalItems);\n\n  return (\n    <div className=\"text-neutral text-sm\">\n      {showingResults({\n        start: number(start),\n        end: number(end),\n        total: number(totalItems),\n      })}\n    </div>\n  );\n};\n"],"mappings":"oJAYA,MAAa,GAAiE,CAC5E,cACA,WACA,gBACI,CACJ,GAAM,CAAE,kBAAmB,EAAY,aAAa,CAC9C,EAAS,GAAW,CAGpB,EAAe,KAAK,IAAI,EAAG,EAAS,CACpC,EAAa,KAAK,IAAI,EAAG,KAAK,KAAK,EAAa,EAAa,CAAC,CAC9D,EAAO,KAAK,IAAI,KAAK,IAAI,EAAG,EAAY,CAAE,EAAW,CAErD,EACJ,IAAe,EAAI,EAAI,KAAK,KAAK,EAAO,GAAK,EAAe,EAAG,EAAW,CACtE,EAAM,IAAe,EAAI,EAAI,KAAK,IAAI,EAAO,EAAc,EAAW,CAE5E,OACE,EAAC,MAAA,CAAI,UAAU,gCACZ,EAAe,CACd,MAAO,EAAO,EAAM,CACpB,IAAK,EAAO,EAAI,CAChB,MAAO,EAAO,EAAW,CAC1B,CAAC,EACE"}

package/dist/esm/components/Popover/static.mjs

@@ -1,2 +1,2 @@
-import{cn as e}from"../../utils/cn.mjs";import{Container as t}from"../Container/index.mjs";import{jsx as n}from"react/jsx-runtime";let r=function(e){return e.START=`start`,e.CENTER=`center`,e.END=`end`,e}({}),i=function(e){return e.BELOW=`bellow`,e.ABOVE=`above`,e}({});const a=({children:t,className:r,identifier:i,...a})=>n(`div`,{className:e(`group/popover relative flex cursor-pointer`,r),id:`unrollable-panel-button-${i}`,"aria-haspopup":!0,...a,children:t}),o=({children:a,isHidden:o=void 0,isOverable:s=!0,isFocusable:c=!1,xAlign:l=r.START,yAlign:u=i.BELOW,identifier:d,className:f,displayArrow:p=!0,...m})=>n(t,{transparency:`xs`,role:`group`,"aria-hidden":o,"aria-labelledby":`unrollable-panel-button-${d}`,id:`unrollable-panel-${d}`,className:e(`absolute z-50 min-w-full rounded-md ring-1 ring-neutral`,l===`start`&&`left-0`,l===`center`&&`left-1/2 -translate-x-1/2`,l===`end`&&`right-0`,u===`bellow`&&`top-[calc(100%+1rem)]`,u===`above`&&`bottom-[calc(100%+1rem)]`,p&&`before:absolute before:z-[999] before:h-0 before:w-0 before:content-[""]`,p&&l===`start`&&`before:left-2`,p&&l===`center`&&`before:left-1/2 before:-translate-x-1/2`,p&&l===`end`&&`before:right-2`,p&&u===`bellow`&&`before:-top-[10px] before:border-r-[10px] before:border-r-transparent before:border-b-[10px] before:border-b-neutral before:border-l-[10px] before:border-l-transparent`,p&&u===`above`&&`before:-bottom-[10px] before:border-t-[10px] before:border-t-neutral before:border-r-[10px] before:border-r-transparent before:border-l-[10px] before:border-l-transparent`,`overflow-x-visible opacity-0 transition-all duration-400 ease-in-out`,o===!1?`visible opacity-100 delay-800`:`invisible`,s&&`group-hover/popover:visible group-hover/popover:opacity-100 group-hover/popover:delay-800`,c&&`group-focus-within/popover:visible group-focus-within/popover:opacity-100 group-focus-within/popover:delay-800`,f),...m,children:a});a.Detail=o;export{o as Detail,a as PopoverStatic,r as PopoverXAlign,i as PopoverYAlign};
+import{cn as e}from"../../utils/cn.mjs";import{Container as t}from"../Container/index.mjs";import{jsx as n}from"react/jsx-runtime";let r=function(e){return e.START=`start`,e.CENTER=`center`,e.END=`end`,e}({}),i=function(e){return e.BELOW=`bellow`,e.ABOVE=`above`,e}({});const a=({children:t,className:r,identifier:i,...a})=>n(`div`,{className:e(`group/${i} relative flex cursor-pointer`,r),id:`unrollable-panel-button-${i}`,"aria-haspopup":!0,...a,children:t}),o=({children:a,isHidden:o=void 0,isOverable:s=!0,isFocusable:c=!1,xAlign:l=r.START,yAlign:u=i.BELOW,identifier:d,className:f,displayArrow:p=!0,...m})=>n(t,{transparency:`xs`,role:`group`,"aria-hidden":o,"aria-labelledby":`unrollable-panel-button-${d}`,id:`unrollable-panel-${d}`,className:e(`absolute z-50 min-w-full rounded-md ring-1 ring-neutral`,l===`start`&&`left-0`,l===`center`&&`left-1/2 -translate-x-1/2`,l===`end`&&`right-0`,u===`bellow`&&`top-[calc(100%+1rem)]`,u===`above`&&`bottom-[calc(100%+1rem)]`,p&&`before:absolute before:z-[999] before:h-0 before:w-0 before:content-[""]`,p&&l===`start`&&`before:left-2`,p&&l===`center`&&`before:left-1/2 before:-translate-x-1/2`,p&&l===`end`&&`before:right-2`,p&&u===`bellow`&&`before:-top-[10px] before:border-r-[10px] before:border-r-transparent before:border-b-[10px] before:border-b-neutral before:border-l-[10px] before:border-l-transparent`,p&&u===`above`&&`before:-bottom-[10px] before:border-t-[10px] before:border-t-neutral before:border-r-[10px] before:border-r-transparent before:border-l-[10px] before:border-l-transparent`,`overflow-x-visible opacity-0 transition-all duration-400 ease-in-out`,o===!1?`visible opacity-100 delay-800`:`invisible`,s&&`group-hover/${d}:visible group-hover/${d}:opacity-100 group-hover/${d}:delay-800`,c&&`group-focus-within/${d}:visible group-focus-within/${d}:opacity-100 group-focus-within/${d}:delay-800`,f),...m,children:a});a.Detail=o;export{o as Detail,a as PopoverStatic,r as PopoverXAlign,i as PopoverYAlign};
 //# sourceMappingURL=static.mjs.map

package/dist/esm/components/Popover/static.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"static.mjs","names":[],"sources":["../../../../src/components/Popover/static.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { DetailedHTMLProps, FC, HTMLAttributes } from 'react';\nimport { Container } from '../Container';\n\n/**\n * Props for the main Popover component\n * Extends HTMLDivElement attributes for full DOM compatibility\n */\nexport type PopoverProps = DetailedHTMLProps<\n  HTMLAttributes<HTMLDivElement>,\n  HTMLDivElement\n> & {\n  /** Unique identifier linking the trigger to its popover content for accessibility */\n  identifier: string;\n};\n\n/**\n * Composite type for the Popover component with Detail subcomponent\n * Allows for Popover.Detail usage pattern\n */\nexport type PopoverType = FC<PopoverProps> & {\n  Detail: FC<DetailProps>;\n};\n\n/**\n * Horizontal alignment options for popover positioning\n */\nexport enum PopoverXAlign {\n  /** Align popover to start (left) of trigger */\n  START = 'start',\n  /** Align popover to center of trigger */\n  CENTER = 'center',\n  /** Align popover to end (right) of trigger */\n  END = 'end',\n}\n\n/**\n * Vertical alignment options for popover positioning\n */\nexport enum PopoverYAlign {\n  /** Position popover below the trigger */\n  BELOW = 'bellow',\n  /** Position popover above the trigger */\n  ABOVE = 'above',\n}\n\n/**\n * Popover Component\n *\n * A versatile popover container that displays contextual content when triggered by hover\n * or focus interactions. Built with accessibility in mind and supports multiple positioning\n * options with smooth animations.\n *\n * Features:\n * - Hover and focus-based triggering\n * - Multiple positioning options (above/below, start/center/end)\n * - Accessibility compliant with ARIA attributes\n * - Smooth animations with configurable delays\n * - Optional directional arrows\n * - Automatic z-index management\n * - Responsive design support\n *\n * Architecture:\n * - Main Popover acts as trigger container\n * - Popover.Detail renders the actual popover content\n * - Uses CSS groups for coordinated hover/focus states\n * - Unique identifier system prevents conflicts\n *\n * @example\n * Basic hover popover:\n * ```jsx\n * <Popover identifier=\"help-tooltip\">\n *   <button>Need Help?</button>\n *\n *   <Popover.Detail identifier=\"help-tooltip\">\n *     <div>This is helpful information!</div>\n *   </Popover.Detail>\n * </Popover>\n * ```\n *\n * @example\n * Focus-triggered popover:\n * ```jsx\n * <Popover identifier=\"focus-menu\">\n *   <input placeholder=\"Focus me\" />\n *\n *   <Popover.Detail\n *     identifier=\"focus-menu\"\n *     isFocusable\n *     isOverable={false}\n *   >\n *     <div>Focus-only menu content</div>\n *   </Popover.Detail>\n * </Popover>\n * ```\n *\n * @example\n * Positioned popover with custom alignment:\n * ```jsx\n * <Popover identifier=\"positioned\">\n *   <span>Hover me</span>\n *\n *   <Popover.Detail\n *     identifier=\"positioned\"\n *     xAlign={PopoverXAlign.END}\n *     yAlign={PopoverYAlign.ABOVE}\n *     displayArrow={false}\n *   >\n *     <div>Above and right-aligned</div>\n *   </Popover.Detail>\n * </Popover>\n * ```\n *\n * Accessibility Features:\n * - Proper ARIA labeling and relationships\n * - Keyboard navigation support\n * - Screen reader compatibility\n * - Focus management\n *\n * Performance Considerations:\n * - CSS-only animations for smooth transitions\n * - Efficient group-based state management\n * - Minimal DOM updates during interactions\n *\n * @param props - Popover component props\n * @returns Trigger container with popover functionality\n */\nexport const PopoverStatic: PopoverType = ({\n  children,\n  className,\n  identifier,\n  ...props\n}) => (\n  <div\n    className={cn('group/popover relative flex cursor-pointer', className)}\n    id={`unrollable-panel-button-${identifier}`}\n    aria-haspopup\n    {...props}\n  >\n    {children}\n  </div>\n);\n\n/**\n * Props for the Popover.Detail component\n * Extends HTMLDivElement attributes for styling flexibility\n */\nexport type DetailProps = HTMLAttributes<HTMLDivElement> & {\n  /** Whether the popover responds to focus events on the trigger */\n  isFocusable?: boolean;\n  /** Controls visibility state - undefined allows automatic hover/focus control */\n  isHidden?: boolean;\n  /** Whether the popover responds to hover events on the trigger */\n  isOverable?: boolean;\n  /** Unique identifier matching the trigger's identifier for accessibility */\n  identifier: string;\n  /** Horizontal positioning relative to trigger */\n  xAlign?: PopoverXAlign | `${PopoverXAlign}`;\n  /** Vertical positioning relative to trigger */\n  yAlign?: PopoverYAlign | `${PopoverYAlign}`;\n  /** Whether to display the directional arrow indicator */\n  displayArrow?: boolean;\n};\n\n/**\n * Popover Detail Component\n *\n * The actual popover content container with advanced positioning, animation, and\n * accessibility features. Automatically manages visibility based on trigger interactions.\n *\n * Features:\n * - Precise positioning with alignment options\n * - Smooth fade and slide animations\n * - Configurable directional arrows\n * - Hover and focus interaction support\n * - Accessibility-compliant ARIA attributes\n * - High z-index for overlay behavior\n * - Automatic visibility management\n *\n * Positioning System:\n * - X-axis: START (left-aligned), CENTER (centered), or END (right-aligned)\n * - Y-axis: BELOW (underneath) or ABOVE (on top)\n * - Automatic spacing with 1rem gap from trigger\n * - Responsive minimum width matching trigger\n *\n * Arrow Indicators:\n * - CSS-generated triangular arrows\n * - Positioned based on alignment settings\n * - Points toward trigger for visual connection\n * - Can be disabled for clean, minimal appearance\n *\n * Animation Behavior:\n * - Starts invisible with opacity: 0\n * - Smooth 400ms transitions with easing\n * - 800ms delay for hover states (prevents flicker)\n * - Immediate hiding when trigger loses focus/hover\n *\n * @example\n * Rich content popover:\n * ```jsx\n * <Popover.Detail identifier=\"rich-content\">\n *   <div className=\"p-4\">\n *     <h3>Popover Title</h3>\n *     <p>Detailed information with multiple paragraphs.</p>\n *     <button>Action Button</button>\n *   </div>\n * </Popover.Detail>\n * ```\n *\n * @example\n * Menu-style popover:\n * ```jsx\n * <Popover.Detail\n * identifier=\"context-menu\"\n * displayArrow={false}\n * xAlign={PopoverXAlign.END}\n * >\n * <ul className=\"py-2\">\n * <li><button className=\"w-full px-4 py-2\">Edit</button></li>\n * <li><button className=\"w-full px-4 py-2\">Delete</button></li>\n * </ul>\n * </Popover.Detail>\n * ```\n *\n * @param props - Popover Detail component props\n * @returns Positioned popover content with animations and accessibility\n */\nconst Detail: FC<DetailProps> = ({\n  children,\n  isHidden = undefined,\n  isOverable = true,\n  isFocusable = false,\n  xAlign = PopoverXAlign.START,\n  yAlign = PopoverYAlign.BELOW,\n  identifier,\n  className,\n  displayArrow = true,\n  ...props\n}) => (\n  <Container\n    transparency=\"xs\"\n    role=\"group\"\n    aria-hidden={isHidden}\n    aria-labelledby={`unrollable-panel-button-${identifier}`}\n    id={`unrollable-panel-${identifier}`}\n    className={cn(\n      'absolute z-50 min-w-full rounded-md ring-1 ring-neutral',\n\n      /* Positioning */\n      xAlign === 'start' && 'left-0',\n      xAlign === 'center' && 'left-1/2 -translate-x-1/2',\n      xAlign === 'end' && 'right-0',\n      yAlign === 'bellow' && 'top-[calc(100%+1rem)]',\n      yAlign === 'above' && 'bottom-[calc(100%+1rem)]',\n\n      /* Arrow indicator */\n      displayArrow &&\n        'before:absolute before:z-[999] before:h-0 before:w-0 before:content-[\"\"]',\n\n      /* Horizontal positioning */\n      displayArrow && xAlign === 'start' && 'before:left-2',\n      displayArrow &&\n        xAlign === 'center' &&\n        'before:left-1/2 before:-translate-x-1/2',\n      displayArrow && xAlign === 'end' && 'before:right-2',\n\n      /* Arrow pointing up (when popover is below trigger) */\n      displayArrow &&\n        yAlign === 'bellow' &&\n        'before:-top-[10px] before:border-r-[10px] before:border-r-transparent before:border-b-[10px] before:border-b-neutral before:border-l-[10px] before:border-l-transparent',\n\n      /* Arrow pointing down (when popover is above trigger) */\n      displayArrow &&\n        yAlign === 'above' &&\n        'before:-bottom-[10px] before:border-t-[10px] before:border-t-neutral before:border-r-[10px] before:border-r-transparent before:border-l-[10px] before:border-l-transparent',\n\n      /* Visibility management */\n      'overflow-x-visible opacity-0 transition-all duration-400 ease-in-out',\n      isHidden !== false ? 'invisible' : 'visible opacity-100 delay-800',\n      isOverable &&\n        'group-hover/popover:visible group-hover/popover:opacity-100 group-hover/popover:delay-800',\n      isFocusable &&\n        'group-focus-within/popover:visible group-focus-within/popover:opacity-100 group-focus-within/popover:delay-800',\n      className\n    )}\n    {...props}\n  >\n    {children}\n  </Container>\n);\n\nPopoverStatic.Detail = Detail;\n\n// Export Detail for use in dynamic version\nexport { Detail };\n"],"mappings":"mIA2BA,IAAY,EAAA,SAAA,EAAL,OAEL,GAAA,MAAA,QAEA,EAAA,OAAA,SAEA,EAAA,IAAA,aAMU,EAAA,SAAA,EAAL,OAEL,GAAA,MAAA,SAEA,EAAA,MAAA,eAoFF,MAAa,GAA8B,CACzC,WACA,YACA,aACA,GAAG,KAEH,EAAC,MAAA,CACC,UAAW,EAAG,6CAA8C,EAAU,CACtE,GAAI,2BAA2B,IAC/B,gBAAA,GACA,GAAI,EAEH,YACG,CAuFF,GAA2B,CAC/B,WACA,WAAW,IAAA,GACX,aAAa,GACb,cAAc,GACd,SAAS,EAAc,MACvB,SAAS,EAAc,MACvB,aACA,YACA,eAAe,GACf,GAAG,KAEH,EAAC,EAAA,CACC,aAAa,KACb,KAAK,QACL,cAAa,EACb,kBAAiB,2BAA2B,IAC5C,GAAI,oBAAoB,IACxB,UAAW,EACT,0DAGA,IAAW,SAAW,SACtB,IAAW,UAAY,4BACvB,IAAW,OAAS,UACpB,IAAW,UAAY,wBACvB,IAAW,SAAW,2BAGtB,GACE,2EAGF,GAAgB,IAAW,SAAW,gBACtC,GACE,IAAW,UACX,0CACF,GAAgB,IAAW,OAAS,iBAGpC,GACE,IAAW,UACX,0KAGF,GACE,IAAW,SACX,6KAGF,uEACA,IAAa,GAAsB,gCAAd,YACrB,GACE,4FACF,GACE,iHACF,EACD,CACD,GAAI,EAEH,YACS,CAGd,EAAc,OAAS"}
+{"version":3,"file":"static.mjs","names":[],"sources":["../../../../src/components/Popover/static.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { DetailedHTMLProps, FC, HTMLAttributes } from 'react';\nimport { Container } from '../Container';\n\n/**\n * Props for the main Popover component\n * Extends HTMLDivElement attributes for full DOM compatibility\n */\nexport type PopoverProps = DetailedHTMLProps<\n  HTMLAttributes<HTMLDivElement>,\n  HTMLDivElement\n> & {\n  /** Unique identifier linking the trigger to its popover content for accessibility */\n  identifier: string;\n};\n\n/**\n * Composite type for the Popover component with Detail subcomponent\n * Allows for Popover.Detail usage pattern\n */\nexport type PopoverType = FC<PopoverProps> & {\n  Detail: FC<DetailProps>;\n};\n\n/**\n * Horizontal alignment options for popover positioning\n */\nexport enum PopoverXAlign {\n  /** Align popover to start (left) of trigger */\n  START = 'start',\n  /** Align popover to center of trigger */\n  CENTER = 'center',\n  /** Align popover to end (right) of trigger */\n  END = 'end',\n}\n\n/**\n * Vertical alignment options for popover positioning\n */\nexport enum PopoverYAlign {\n  /** Position popover below the trigger */\n  BELOW = 'bellow',\n  /** Position popover above the trigger */\n  ABOVE = 'above',\n}\n\n/**\n * Popover Component\n *\n * A versatile popover container that displays contextual content when triggered by hover\n * or focus interactions. Built with accessibility in mind and supports multiple positioning\n * options with smooth animations.\n *\n * Features:\n * - Hover and focus-based triggering\n * - Multiple positioning options (above/below, start/center/end)\n * - Accessibility compliant with ARIA attributes\n * - Smooth animations with configurable delays\n * - Optional directional arrows\n * - Automatic z-index management\n * - Responsive design support\n *\n * Architecture:\n * - Main Popover acts as trigger container\n * - Popover.Detail renders the actual popover content\n * - Uses CSS groups for coordinated hover/focus states\n * - Unique identifier system prevents conflicts\n *\n * @example\n * Basic hover popover:\n * ```jsx\n * <Popover identifier=\"help-tooltip\">\n *   <button>Need Help?</button>\n *\n *   <Popover.Detail identifier=\"help-tooltip\">\n *     <div>This is helpful information!</div>\n *   </Popover.Detail>\n * </Popover>\n * ```\n *\n * @example\n * Focus-triggered popover:\n * ```jsx\n * <Popover identifier=\"focus-menu\">\n *   <input placeholder=\"Focus me\" />\n *\n *   <Popover.Detail\n *     identifier=\"focus-menu\"\n *     isFocusable\n *     isOverable={false}\n *   >\n *     <div>Focus-only menu content</div>\n *   </Popover.Detail>\n * </Popover>\n * ```\n *\n * @example\n * Positioned popover with custom alignment:\n * ```jsx\n * <Popover identifier=\"positioned\">\n *   <span>Hover me</span>\n *\n *   <Popover.Detail\n *     identifier=\"positioned\"\n *     xAlign={PopoverXAlign.END}\n *     yAlign={PopoverYAlign.ABOVE}\n *     displayArrow={false}\n *   >\n *     <div>Above and right-aligned</div>\n *   </Popover.Detail>\n * </Popover>\n * ```\n *\n * Accessibility Features:\n * - Proper ARIA labeling and relationships\n * - Keyboard navigation support\n * - Screen reader compatibility\n * - Focus management\n *\n * Performance Considerations:\n * - CSS-only animations for smooth transitions\n * - Efficient group-based state management\n * - Minimal DOM updates during interactions\n *\n * @param props - Popover component props\n * @returns Trigger container with popover functionality\n */\nexport const PopoverStatic: PopoverType = ({\n  children,\n  className,\n  identifier,\n  ...props\n}) => (\n  <div\n    className={cn(\n      `group/${identifier} relative flex cursor-pointer`,\n      className\n    )}\n    id={`unrollable-panel-button-${identifier}`}\n    aria-haspopup\n    {...props}\n  >\n    {children}\n  </div>\n);\n\n/**\n * Props for the Popover.Detail component\n * Extends HTMLDivElement attributes for styling flexibility\n */\nexport type DetailProps = HTMLAttributes<HTMLDivElement> & {\n  /** Whether the popover responds to focus events on the trigger */\n  isFocusable?: boolean;\n  /** Controls visibility state - undefined allows automatic hover/focus control */\n  isHidden?: boolean;\n  /** Whether the popover responds to hover events on the trigger */\n  isOverable?: boolean;\n  /** Unique identifier matching the trigger's identifier for accessibility */\n  identifier: string;\n  /** Horizontal positioning relative to trigger */\n  xAlign?: PopoverXAlign | `${PopoverXAlign}`;\n  /** Vertical positioning relative to trigger */\n  yAlign?: PopoverYAlign | `${PopoverYAlign}`;\n  /** Whether to display the directional arrow indicator */\n  displayArrow?: boolean;\n};\n\n/**\n * Popover Detail Component\n *\n * The actual popover content container with advanced positioning, animation, and\n * accessibility features. Automatically manages visibility based on trigger interactions.\n *\n * Features:\n * - Precise positioning with alignment options\n * - Smooth fade and slide animations\n * - Configurable directional arrows\n * - Hover and focus interaction support\n * - Accessibility-compliant ARIA attributes\n * - High z-index for overlay behavior\n * - Automatic visibility management\n *\n * Positioning System:\n * - X-axis: START (left-aligned), CENTER (centered), or END (right-aligned)\n * - Y-axis: BELOW (underneath) or ABOVE (on top)\n * - Automatic spacing with 1rem gap from trigger\n * - Responsive minimum width matching trigger\n *\n * Arrow Indicators:\n * - CSS-generated triangular arrows\n * - Positioned based on alignment settings\n * - Points toward trigger for visual connection\n * - Can be disabled for clean, minimal appearance\n *\n * Animation Behavior:\n * - Starts invisible with opacity: 0\n * - Smooth 400ms transitions with easing\n * - 800ms delay for hover states (prevents flicker)\n * - Immediate hiding when trigger loses focus/hover\n *\n * @example\n * Rich content popover:\n * ```jsx\n * <Popover.Detail identifier=\"rich-content\">\n *   <div className=\"p-4\">\n *     <h3>Popover Title</h3>\n *     <p>Detailed information with multiple paragraphs.</p>\n *     <button>Action Button</button>\n *   </div>\n * </Popover.Detail>\n * ```\n *\n * @example\n * Menu-style popover:\n * ```jsx\n * <Popover.Detail\n * identifier=\"context-menu\"\n * displayArrow={false}\n * xAlign={PopoverXAlign.END}\n * >\n * <ul className=\"py-2\">\n * <li><button className=\"w-full px-4 py-2\">Edit</button></li>\n * <li><button className=\"w-full px-4 py-2\">Delete</button></li>\n * </ul>\n * </Popover.Detail>\n * ```\n *\n * @param props - Popover Detail component props\n * @returns Positioned popover content with animations and accessibility\n */\nconst Detail: FC<DetailProps> = ({\n  children,\n  isHidden = undefined,\n  isOverable = true,\n  isFocusable = false,\n  xAlign = PopoverXAlign.START,\n  yAlign = PopoverYAlign.BELOW,\n  identifier,\n  className,\n  displayArrow = true,\n  ...props\n}) => (\n  <Container\n    transparency=\"xs\"\n    role=\"group\"\n    aria-hidden={isHidden}\n    aria-labelledby={`unrollable-panel-button-${identifier}`}\n    id={`unrollable-panel-${identifier}`}\n    className={cn(\n      'absolute z-50 min-w-full rounded-md ring-1 ring-neutral',\n\n      /* Positioning */\n      xAlign === 'start' && 'left-0',\n      xAlign === 'center' && 'left-1/2 -translate-x-1/2',\n      xAlign === 'end' && 'right-0',\n      yAlign === 'bellow' && 'top-[calc(100%+1rem)]',\n      yAlign === 'above' && 'bottom-[calc(100%+1rem)]',\n\n      /* Arrow indicator */\n      displayArrow &&\n        'before:absolute before:z-[999] before:h-0 before:w-0 before:content-[\"\"]',\n\n      /* Horizontal positioning */\n      displayArrow && xAlign === 'start' && 'before:left-2',\n      displayArrow &&\n        xAlign === 'center' &&\n        'before:left-1/2 before:-translate-x-1/2',\n      displayArrow && xAlign === 'end' && 'before:right-2',\n\n      /* Arrow pointing up (when popover is below trigger) */\n      displayArrow &&\n        yAlign === 'bellow' &&\n        'before:-top-[10px] before:border-r-[10px] before:border-r-transparent before:border-b-[10px] before:border-b-neutral before:border-l-[10px] before:border-l-transparent',\n\n      /* Arrow pointing down (when popover is above trigger) */\n      displayArrow &&\n        yAlign === 'above' &&\n        'before:-bottom-[10px] before:border-t-[10px] before:border-t-neutral before:border-r-[10px] before:border-r-transparent before:border-l-[10px] before:border-l-transparent',\n\n      /* Visibility management */\n      'overflow-x-visible opacity-0 transition-all duration-400 ease-in-out',\n      isHidden !== false ? 'invisible' : 'visible opacity-100 delay-800',\n      isOverable &&\n        `group-hover/${identifier}:visible group-hover/${identifier}:opacity-100 group-hover/${identifier}:delay-800`,\n      isFocusable &&\n        `group-focus-within/${identifier}:visible group-focus-within/${identifier}:opacity-100 group-focus-within/${identifier}:delay-800`,\n      className\n    )}\n    {...props}\n  >\n    {children}\n  </Container>\n);\n\nPopoverStatic.Detail = Detail;\n\n// Export Detail for use in dynamic version\nexport { Detail };\n"],"mappings":"mIA2BA,IAAY,EAAA,SAAA,EAAL,OAEL,GAAA,MAAA,QAEA,EAAA,OAAA,SAEA,EAAA,IAAA,aAMU,EAAA,SAAA,EAAL,OAEL,GAAA,MAAA,SAEA,EAAA,MAAA,eAoFF,MAAa,GAA8B,CACzC,WACA,YACA,aACA,GAAG,KAEH,EAAC,MAAA,CACC,UAAW,EACT,SAAS,EAAW,+BACpB,EACD,CACD,GAAI,2BAA2B,IAC/B,gBAAA,GACA,GAAI,EAEH,YACG,CAuFF,GAA2B,CAC/B,WACA,WAAW,IAAA,GACX,aAAa,GACb,cAAc,GACd,SAAS,EAAc,MACvB,SAAS,EAAc,MACvB,aACA,YACA,eAAe,GACf,GAAG,KAEH,EAAC,EAAA,CACC,aAAa,KACb,KAAK,QACL,cAAa,EACb,kBAAiB,2BAA2B,IAC5C,GAAI,oBAAoB,IACxB,UAAW,EACT,0DAGA,IAAW,SAAW,SACtB,IAAW,UAAY,4BACvB,IAAW,OAAS,UACpB,IAAW,UAAY,wBACvB,IAAW,SAAW,2BAGtB,GACE,2EAGF,GAAgB,IAAW,SAAW,gBACtC,GACE,IAAW,UACX,0CACF,GAAgB,IAAW,OAAS,iBAGpC,GACE,IAAW,UACX,0KAGF,GACE,IAAW,SACX,6KAGF,uEACA,IAAa,GAAsB,gCAAd,YACrB,GACE,eAAe,EAAW,uBAAuB,EAAW,2BAA2B,EAAW,YACpG,GACE,sBAAsB,EAAW,8BAA8B,EAAW,kCAAkC,EAAW,YACzH,EACD,CACD,GAAI,EAEH,YACS,CAGd,EAAc,OAAS"}

package/dist/esm/hooks/useScrollBlockage/index.mjs

@@ -1,2 +1,2 @@
-"use client";import{useGetElementOrWindow as e}from"../useGetElementOrWindow.mjs";import{useScrollBlockageStore as t}from"./useScrollBlockageStore.mjs";import{useEffect as n}from"react";const r=r=>{let{disableScroll:i=!1,element:a,key:o=`unnamed_blocker`}=r??{},{isElementScrollBlocked:s,addBlockage:c,removeBlockage:l}=t(),u=e(a);return n(()=>{let e=a??window.document.body;i?c(o,e):l(o,e)},[c,i,a,o,l]),{isScrollBlocked:u?s(u):!1}};export{r as useScrollBlockage};
+"use client";import{useGetElementOrWindow as e}from"../useGetElementOrWindow.mjs";import{useScrollBlockageStore as t}from"./useScrollBlockageStore.mjs";import{useEffect as n}from"react";const r=r=>{let{disableScroll:i=!1,element:a,key:o=`unnamed_blocker`}=r??{},{isElementScrollBlocked:s,addBlockage:c,removeBlockage:l}=t(),u=e(a);return n(()=>{let e=a??window.document.body;return i?c(o,e):l(o,e),()=>{l(o,e)}},[c,i,a,o,l]),{isScrollBlocked:u?s(u):!1}};export{r as useScrollBlockage};
 //# sourceMappingURL=index.mjs.map

package/dist/esm/hooks/useScrollBlockage/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/hooks/useScrollBlockage/index.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\nimport { useGetElementOrWindow } from '../useGetElementOrWindow';\n\nimport { useScrollBlockageStore } from './useScrollBlockageStore';\n\ntype useScrollBlockagePropsReadOnly = {\n  disableScroll: undefined;\n  key: undefined;\n  element?: HTMLElement; // The element to block the scroll. If not defined, the window will be used\n};\n\ntype useScrollBlockageProps = {\n  disableScroll: boolean;\n  key: string; // The key to identify the blockage to avoid conflicts. Required if disableScroll is defined\n  element?: HTMLElement; // The element to block the scroll. If not defined, the window will be used\n};\n\nexport const useScrollBlockage = (\n  props?: useScrollBlockageProps | useScrollBlockagePropsReadOnly\n) => {\n  const {\n    disableScroll = false,\n    element,\n    key = 'unnamed_blocker',\n  } = props ?? {};\n\n  const { isElementScrollBlocked, addBlockage, removeBlockage } =\n    useScrollBlockageStore();\n\n  const containerElement = useGetElementOrWindow(element);\n\n  useEffect(() => {\n    const el = element ?? window.document.body;\n\n    if (disableScroll) {\n      addBlockage(key, el);\n    } else {\n      removeBlockage(key, el);\n    }\n  }, [addBlockage, disableScroll, element, key, removeBlockage]);\n\n  const isScrollBlocked = containerElement\n    ? isElementScrollBlocked(containerElement)\n    : false;\n\n  return { isScrollBlocked };\n};\n"],"mappings":"0LAmBA,MAAa,EACX,GACG,CACH,GAAM,CACJ,gBAAgB,GAChB,UACA,MAAM,mBACJ,GAAS,EAAE,CAET,CAAE,yBAAwB,cAAa,kBAC3C,GAAwB,CAEpB,EAAmB,EAAsB,EAAQ,CAgBvD,OAdA,MAAgB,CACd,IAAM,EAAK,GAAW,OAAO,SAAS,KAElC,EACF,EAAY,EAAK,EAAG,CAEpB,EAAe,EAAK,EAAG,EAExB,CAAC,EAAa,EAAe,EAAS,EAAK,EAAe,CAAC,CAMvD,CAAE,gBAJe,EACpB,EAAuB,EAAiB,CACxC,GAEsB"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/hooks/useScrollBlockage/index.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\nimport { useGetElementOrWindow } from '../useGetElementOrWindow';\n\nimport { useScrollBlockageStore } from './useScrollBlockageStore';\n\ntype useScrollBlockagePropsReadOnly = {\n  disableScroll: undefined;\n  key: undefined;\n  element?: HTMLElement; // The element to block the scroll. If not defined, the window will be used\n};\n\ntype useScrollBlockageProps = {\n  disableScroll: boolean;\n  key: string; // The key to identify the blockage to avoid conflicts. Required if disableScroll is defined\n  element?: HTMLElement; // The element to block the scroll. If not defined, the window will be used\n};\n\nexport const useScrollBlockage = (\n  props?: useScrollBlockageProps | useScrollBlockagePropsReadOnly\n) => {\n  const {\n    disableScroll = false,\n    element,\n    key = 'unnamed_blocker',\n  } = props ?? {};\n\n  const { isElementScrollBlocked, addBlockage, removeBlockage } =\n    useScrollBlockageStore();\n\n  const containerElement = useGetElementOrWindow(element);\n\n  useEffect(() => {\n    const el = element ?? window.document.body;\n\n    if (disableScroll) {\n      addBlockage(key, el);\n    } else {\n      removeBlockage(key, el);\n    }\n\n    return () => {\n      removeBlockage(key, el);\n    };\n  }, [addBlockage, disableScroll, element, key, removeBlockage]);\n\n  const isScrollBlocked = containerElement\n    ? isElementScrollBlocked(containerElement)\n    : false;\n\n  return { isScrollBlocked };\n};\n"],"mappings":"0LAmBA,MAAa,EACX,GACG,CACH,GAAM,CACJ,gBAAgB,GAChB,UACA,MAAM,mBACJ,GAAS,EAAE,CAET,CAAE,yBAAwB,cAAa,kBAC3C,GAAwB,CAEpB,EAAmB,EAAsB,EAAQ,CAoBvD,OAlBA,MAAgB,CACd,IAAM,EAAK,GAAW,OAAO,SAAS,KAQtC,OANI,EACF,EAAY,EAAK,EAAG,CAEpB,EAAe,EAAK,EAAG,KAGZ,CACX,EAAe,EAAK,EAAG,GAExB,CAAC,EAAa,EAAe,EAAS,EAAK,EAAe,CAAC,CAMvD,CAAE,gBAJe,EACpB,EAAuB,EAAiB,CACxC,GAEsB"}

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

@@ -1,5 +1,4 @@
 import { ButtonProps } from "../Button/Button.js";
-import "../Button/index.js";
 import { FC, ReactNode } from "react";
 
 //#region src/components/Accordion/Accordion.d.ts

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","names":[],"sources":["../../../../src/components/Accordion/Accordion.tsx"],"mappings":";;;;;UAoBiB,cAAA,SACP,IAAA,CAAK,WAAA;;EAEb,MAAA,EAAQ,SAAA;EAHO;EAKf,QAAA,EAAU,SAAA;;EAEV,MAAA;EAJQ;EAMR,aAAA;EARQ;EAUR,QAAA,IAAY,MAAA;EAVA;EAYZ,QAAA;EAZa;EAcb,gBAAA;EAZQ;EAcR,eAAA;EAZU;EAcV,YAAA;EAVA;EAYA,SAAA;AAAA;;;;;;;;AAwCF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAAa,SAAA,EAAW,EAAA,CAAG,cAAA"}
+{"version":3,"file":"Accordion.d.ts","names":[],"sources":["../../../../src/components/Accordion/Accordion.tsx"],"mappings":";;;;UAoBiB,cAAA,SACP,IAAA,CAAK,WAAA;;EAEb,MAAA,EAAQ,SAAA;EAHO;EAKf,QAAA,EAAU,SAAA;;EAEV,MAAA;EAJQ;EAMR,aAAA;EARQ;EAUR,QAAA,IAAY,MAAA;EAVA;EAYZ,QAAA;EAZa;EAcb,gBAAA;EAZQ;EAcR,eAAA;EAZU;EAcV,YAAA;EAVA;EAYA,SAAA;AAAA;;;;;;;;AAwCF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAAa,SAAA,EAAW,EAAA,CAAG,cAAA"}

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

@@ -43,8 +43,8 @@ declare enum BadgeSize {
  * @description Defines the styling variants for different badge combinations
  */
 declare const badgeVariants: (props?: {
-  color?: "primary" | "secondary" | "destructive" | "success" | "error" | "neutral" | "light" | "dark" | "text" | "custom";
-  variant?: "default" | "none" | "outline" | "hoverable";
+  color?: "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "error" | "success" | "custom";
+  variant?: "none" | "default" | "outline" | "hoverable";
   size?: "sm" | "md" | "lg";
 } & class_variance_authority_types0.ClassProp) => string;
 /**

package/dist/types/components/Breadcrumb/breadcrumb.content.d.ts

@@ -24,7 +24,7 @@ declare const breadCrumbContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types0.NodeType.Translation;
     } & {
       translation: {
         en: string;

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

@@ -1,5 +1,4 @@
 import { LinkColor } from "../Link/Link.js";
-import "../Link/index.js";
 import { FC, HTMLAttributes, ReactNode } from "react";
 import * as class_variance_authority_types0 from "class-variance-authority/types";
 import { VariantProps } from "class-variance-authority";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/Breadcrumb/index.tsx"],"mappings":";;;;;;;;;;;cA2EM,kBAAA,GAAkB,KAAA;;;IAiBtB,+BAAA,CAAA,SAAA;;;;KA2HG,sBAAA;EA5ImB;;;EAgJtB,IAAA;EAJyB;;;EAQzB,IAAA;EAAA;;;EAIA,OAAA;AAAA;;;;;AAUF;KAFY,cAAA,YAA0B,sBAAA;AAAA,KAE1B,eAAA;EAIH;;;EAAP,KAAA,EAAO,cAAA;EAmBK;;;;EAdZ,KAAA,GAAQ,SAAA,MAAe,SAAA;EA8BT;;;EA1Bd,MAAA,GAAS,aAAA;EAJT;;;;EASA,WAAA;EAAA;;;;EAKA,SAAA,GAAY,SAAA;EAcZ;;;;EATA,SAAA;EAW+B;;AA4BjC;;EAlCE,qBAAA;EAkCuB;;;EA9BvB,QAAA;AAAA,IACE,YAAA,QAAoB,kBAAA,IACtB,cAAA,CAAe,gBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;cA4BJ,UAAA,EAAY,EAAA,CAAG,eAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/Breadcrumb/index.tsx"],"mappings":";;;;;;;;;;cA2EM,kBAAA,GAAkB,KAAA;;;IAiBtB,+BAAA,CAAA,SAAA;;;;KA2HG,sBAAA;EA5ImB;;;EAgJtB,IAAA;EAJyB;;;EAQzB,IAAA;EAAA;;;EAIA,OAAA;AAAA;;;;;AAUF;KAFY,cAAA,YAA0B,sBAAA;AAAA,KAE1B,eAAA;EAIH;;;EAAP,KAAA,EAAO,cAAA;EAmBK;;;;EAdZ,KAAA,GAAQ,SAAA,MAAe,SAAA;EA8BT;;;EA1Bd,MAAA,GAAS,aAAA;EAJT;;;;EASA,WAAA;EAAA;;;;EAKA,SAAA,GAAY,SAAA;EAcZ;;;;EATA,SAAA;EAW+B;;AA4BjC;;EAlCE,qBAAA;EAkCuB;;;EA9BvB,QAAA;AAAA,IACE,YAAA,QAAoB,kBAAA,IACtB,cAAA,CAAe,gBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;cA4BJ,UAAA,EAAY,EAAA,CAAG,eAAA"}

package/dist/types/components/Browser/Browser.content.d.ts

@@ -24,7 +24,7 @@ declare const browserContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types0.NodeType.Translation;
     } & {
       translation: {
         en: string;
@@ -67,7 +67,7 @@ declare const browserContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types0.NodeType.Translation;
     } & {
       translation: {
         en: string;
@@ -111,7 +111,7 @@ declare const browserContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types0.NodeType.Translation;
     } & {
       translation: {
         en: string;
@@ -154,7 +154,7 @@ declare const browserContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types0.NodeType.Translation;
     } & {
       translation: {
         en: string;
@@ -197,7 +197,7 @@ declare const browserContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types0.NodeType.Translation;
     } & {
       translation: {
         en: string;
@@ -240,7 +240,7 @@ declare const browserContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types0.NodeType.Translation;
     } & {
       translation: {
         en: string;
@@ -283,7 +283,7 @@ declare const browserContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types0.NodeType.Translation;
     } & {
       translation: {
         en: string;
@@ -326,7 +326,7 @@ declare const browserContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types0.NodeType.Translation;
     } & {
       translation: {
         en: string;

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

@@ -61,9 +61,9 @@ declare enum ButtonTextAlign {
  */
 declare const buttonVariants: (props?: {
   size?: "sm" | "md" | "lg" | "xl" | "icon-sm" | "icon-md" | "icon-lg" | "icon-xl";
-  color?: "primary" | "secondary" | "destructive" | "success" | "error" | "neutral" | "light" | "dark" | "text" | "custom" | "card" | "current" | "text-inverse";
-  roundedSize?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "full";
-  variant?: "input" | "default" | "none" | "outline" | "hoverable" | "link" | "invisible-link" | "fade";
+  color?: "text" | "primary" | "secondary" | "destructive" | "neutral" | "card" | "light" | "dark" | "current" | "text-inverse" | "error" | "success" | "custom";
+  roundedSize?: "sm" | "md" | "lg" | "xl" | "none" | "2xl" | "3xl" | "4xl" | "5xl" | "full";
+  variant?: "none" | "default" | "outline" | "link" | "invisible-link" | "hoverable" | "fade" | "input";
   textAlign?: "left" | "center" | "right";
   isFullWidth?: boolean;
 } & class_variance_authority_types0.ClassProp) => string;

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

@@ -25,7 +25,7 @@ declare const carouselContent: {
       vi: string;
       zh: string;
     }, {
-      nodeType: _intlayer_types0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types0.NodeType.Translation;
     } & {
       translation: {
         ar: string;
@@ -68,7 +68,7 @@ declare const carouselContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types0.NodeType.Translation;
     } & {
       translation: {
         en: string;
@@ -111,7 +111,7 @@ declare const carouselContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types0.NodeType.Translation;
     } & {
       translation: {
         en: string;

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

@@ -6,7 +6,7 @@ import { VariantProps } from "class-variance-authority";
 declare const collapsibleTableVariants: (props?: {
   size?: "sm" | "md" | "lg" | "xl" | "full";
   variant?: "default" | "dark" | "ghost" | "outlined";
-  spacing?: "none" | "sm" | "md" | "lg" | "auto";
+  spacing?: "sm" | "md" | "lg" | "none" | "auto";
 } & class_variance_authority_types0.ClassProp) => string;
 interface CollapsibleTableProps extends Omit<HTMLAttributes<HTMLElement>, 'title'>, VariantProps<typeof collapsibleTableVariants> {
   /** Table title displayed in the header */

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?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full";
-  transparency?: "none" | "sm" | "md" | "lg" | "xs" | "xl" | "full";
-  padding?: "none" | "sm" | "md" | "lg" | "xl" | "2xl";
+  roundedSize?: "sm" | "md" | "lg" | "xl" | "none" | "2xl" | "3xl" | "4xl" | "full";
+  transparency?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | "full";
+  padding?: "sm" | "md" | "lg" | "xl" | "none" | "2xl";
   separator?: "without" | "x" | "y" | "both";
   border?: "with" | "none";
-  borderColor?: "error" | "primary" | "secondary" | "success" | "neutral" | "text" | "card" | "warning";
+  borderColor?: "primary" | "secondary" | "neutral" | "card" | "text" | "error" | "warning" | "success";
   background?: "with" | "none" | "hoverable";
-  gap?: "none" | "sm" | "md" | "lg" | "xl" | "2xl";
+  gap?: "sm" | "md" | "lg" | "xl" | "none" | "2xl";
 } & class_variance_authority_types0.ClassProp) => string;
 /** Available rounded corner sizes for the container */
 declare enum ContainerRoundedSize {

package/dist/types/components/ContentEditor/ContentEditorInput.d.ts

@@ -1,5 +1,4 @@
 import { InputProps } from "../Input/Input.js";
-import "../Input/index.js";
 import { FC, ReactNode } from "react";
 
 //#region src/components/ContentEditor/ContentEditorInput.d.ts

package/dist/types/components/ContentEditor/ContentEditorInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentEditorInput.d.ts","names":[],"sources":["../../../../src/components/ContentEditor/ContentEditorInput.tsx"],"mappings":";;;;;;KAcY,uBAAA;gDAEV,QAAA,EAAU,UAAA,WAFuB;EAIjC,eAAA,GAAkB,OAAA,EAAS,UAAA,oBAFjB;EAIV,QAAA,YAEqB;EAArB,QAAA,IAAY,OAAA,EAAS,UAAA,uBAGd;EADP,iBAAA,GAAoB,SAAA;AAAA,IAClB,IAAA,CAAK,UAAA;;;;;;;;;;;;;;;;;AA6BT;;;;;;;;;;;cAAa,kBAAA,EAAoB,EAAA,CAAG,uBAAA"}
+{"version":3,"file":"ContentEditorInput.d.ts","names":[],"sources":["../../../../src/components/ContentEditor/ContentEditorInput.tsx"],"mappings":";;;;;KAcY,uBAAA;gDAEV,QAAA,EAAU,UAAA,WAFuB;EAIjC,eAAA,GAAkB,OAAA,EAAS,UAAA,oBAFjB;EAIV,QAAA,YAEqB;EAArB,QAAA,IAAY,OAAA,EAAS,UAAA,uBAGd;EADP,iBAAA,GAAoB,SAAA;AAAA,IAClB,IAAA,CAAK,UAAA;;;;;;;;;;;;;;;;;AA6BT;;;;;;;;;;;cAAa,kBAAA,EAAoB,EAAA,CAAG,uBAAA"}

package/dist/types/components/ContentEditor/ContentEditorTextArea.d.ts

@@ -1,5 +1,4 @@
 import { AutoSizedTextAreaProps } from "../TextArea/AutoSizeTextArea.js";
-import "../TextArea/index.js";
 import { FC, ReactNode } from "react";
 
 //#region src/components/ContentEditor/ContentEditorTextArea.d.ts

package/dist/types/components/ContentEditor/ContentEditorTextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentEditorTextArea.d.ts","names":[],"sources":["../../../../src/components/ContentEditor/ContentEditorTextArea.tsx"],"mappings":";;;;;;KAeY,0BAAA;gDAEV,QAAA,UAFoC;EAIpC,eAAA,GAAkB,OAAA,mBAME;EAJpB,QAAA,YAKE;EAHF,QAAA,IAAY,OAAA,sBAGN;EADN,iBAAA,GAAoB,SAAA;AAAA,IAClB,IAAA,CAAK,sBAAA;;;;;;;;;;;AA+BT;;;;;;;;;;;;;;;;;;;cAAa,qBAAA,EAAuB,EAAA,CAAG,0BAAA"}
+{"version":3,"file":"ContentEditorTextArea.d.ts","names":[],"sources":["../../../../src/components/ContentEditor/ContentEditorTextArea.tsx"],"mappings":";;;;;KAeY,0BAAA;gDAEV,QAAA,UAFoC;EAIpC,eAAA,GAAkB,OAAA,mBAME;EAJpB,QAAA,YAKE;EAHF,QAAA,IAAY,OAAA,sBAGN;EADN,iBAAA,GAAoB,SAAA;AAAA,IAClB,IAAA,CAAK,sBAAA;;;;;;;;;;;AA+BT;;;;;;;;;;;;;;;;;;;cAAa,qBAAA,EAAuB,EAAA,CAAG,0BAAA"}

package/dist/types/components/CopyButton/CopyButton.content.d.ts

@@ -24,7 +24,7 @@ declare const copyContentContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types0.NodeType.Translation;
     } & {
       translation: {
         en: string;

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

@@ -1,5 +1,4 @@
 import { ButtonProps } from "../Button/Button.js";
-import "../Button/index.js";
 import { FC } from "react";
 
 //#region src/components/CopyButton/index.d.ts

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/CopyButton/index.tsx"],"mappings":";;;;;;;;KAgBK,eAAA;EAAe;;;;;;;EAQlB,OAAA;AAAA,IACE,OAAA,CAAQ,WAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAuEC,UAAA,EAAY,EAAA,CAAG,eAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/CopyButton/index.tsx"],"mappings":";;;;;;;KAgBK,eAAA;EAAe;;;;;;;EAQlB,OAAA;AAAA,IACE,OAAA,CAAQ,WAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAuEC,UAAA,EAAY,EAAA,CAAG,eAAA"}

package/dist/types/components/DictionaryFieldEditor/DictionaryCreationForm/dictionaryCreationForm.content.d.ts

@@ -25,7 +25,7 @@ declare const dictionaryFormContent: {
         vi: string;
         uk: string;
       }, {
-        nodeType: _intlayer_types0.NodeType.Translation | "translation";
+        nodeType: "translation" | _intlayer_types0.NodeType.Translation;
       } & {
         translation: {
           en: string;
@@ -68,7 +68,7 @@ declare const dictionaryFormContent: {
         vi: string;
         uk: string;
       }, {
-        nodeType: _intlayer_types0.NodeType.Translation | "translation";
+        nodeType: "translation" | _intlayer_types0.NodeType.Translation;
       } & {
         translation: {
           en: string;
@@ -113,7 +113,7 @@ declare const dictionaryFormContent: {
         vi: string;
         uk: string;
       }, {
-        nodeType: _intlayer_types0.NodeType.Translation | "translation";
+        nodeType: "translation" | _intlayer_types0.NodeType.Translation;
       } & {
         translation: {
           en: string;
@@ -156,7 +156,7 @@ declare const dictionaryFormContent: {
         vi: string;
         uk: string;
       }, {
-        nodeType: _intlayer_types0.NodeType.Translation | "translation";
+        nodeType: "translation" | _intlayer_types0.NodeType.Translation;
       } & {
         translation: {
           en: string;
@@ -201,7 +201,7 @@ declare const dictionaryFormContent: {
         vi: string;
         uk: string;
       }, {
-        nodeType: _intlayer_types0.NodeType.Translation | "translation";
+        nodeType: "translation" | _intlayer_types0.NodeType.Translation;
       } & {
         translation: {
           en: string;
@@ -244,7 +244,7 @@ declare const dictionaryFormContent: {
         vi: string;
         uk: string;
       }, {
-        nodeType: _intlayer_types0.NodeType.Translation | "translation";
+        nodeType: "translation" | _intlayer_types0.NodeType.Translation;
       } & {
         translation: {
           en: string;
@@ -288,7 +288,7 @@ declare const dictionaryFormContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types0.NodeType.Translation;
     } & {
       translation: {
         en: string;
@@ -331,7 +331,7 @@ declare const dictionaryFormContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types0.NodeType.Translation;
     } & {
       translation: {
         en: string;
@@ -375,7 +375,7 @@ declare const dictionaryFormContent: {
         vi: string;
         uk: string;
       }, {
-        nodeType: _intlayer_types0.NodeType.Translation | "translation";
+        nodeType: "translation" | _intlayer_types0.NodeType.Translation;
       } & {
         translation: {
           en: string;
@@ -418,7 +418,7 @@ declare const dictionaryFormContent: {
         vi: string;
         uk: string;
       }, {
-        nodeType: _intlayer_types0.NodeType.Translation | "translation";
+        nodeType: "translation" | _intlayer_types0.NodeType.Translation;
       } & {
         translation: {
           en: string;
@@ -463,7 +463,7 @@ declare const dictionaryFormContent: {
         vi: string;
         uk: string;
       }, {
-        nodeType: _intlayer_types0.NodeType.Translation | "translation";
+        nodeType: "translation" | _intlayer_types0.NodeType.Translation;
       } & {
         translation: {
           en: string;
@@ -506,7 +506,7 @@ declare const dictionaryFormContent: {
         vi: string;
         uk: string;
       }, {
-        nodeType: _intlayer_types0.NodeType.Translation | "translation";
+        nodeType: "translation" | _intlayer_types0.NodeType.Translation;
       } & {
         translation: {
           en: string;