@intlayer/design-system 7.5.3 → 7.5.4

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

@@ -96,6 +96,7 @@ const TabComponent = ({ defaultTab, group, variant, children, className, ...prop
 							"aria-selected": isActive,
 							"aria-controls": `tabpanel-${value}`,
 							id: `tab-${value}`,
+							type: "button",
 							children: label
 						}, value);
 					}),

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

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

package/dist/esm/components/TabSelector/TabSelector.mjs

@@ -17,7 +17,7 @@ let TabSelectorColor = /* @__PURE__ */ function(TabSelectorColor$1) {
 	TabSelectorColor$1["TEXT"] = "text";
 	return TabSelectorColor$1;
 }({});
-const tabSelectorVariant = cva("relative flex size-full flex-row items-center gap-2", {
+const tabSelectorVariant = cva("relative z-0 flex size-full flex-row items-center gap-2", {
 	variants: { color: {
 		primary: "border-primary text-primary",
 		secondary: "border-secondary text-secondary",
@@ -29,7 +29,7 @@ const tabSelectorVariant = cva("relative flex size-full flex-row items-center ga
 	} },
 	defaultVariants: { color: "primary" }
 });
-const indicatorVariant = cva("absolute z-[-1] rounded-lg duration-300 ease-in-out motion-reduce:transition-none", {
+const indicatorVariant = cva("-z-1 absolute rounded-lg duration-300 ease-in-out motion-reduce:transition-none", {
 	variants: {
 		color: {
 			primary: "bg-primary/10 aria-selected:text-text",

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

@@ -1 +1 @@
-{"version":3,"file":"TabSelector.mjs","names":[],"sources":["../../../../src/components/TabSelector/TabSelector.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  cloneElement,\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactElement,\n  useEffect,\n  useRef,\n} from 'react';\nimport {\n  type ItemSelectorOrientation,\n  useItemSelector,\n} from '../../hooks/useItemSelector';\nimport { cn } from '../../utils/cn';\n\nexport enum TabSelectorColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  DARK = 'dark',\n  TEXT = 'text',\n}\n\nconst tabSelectorVariant = cva(\n  'relative flex size-full flex-row items-center gap-2',\n  {\n    variants: {\n      color: {\n        primary: 'border-primary text-primary',\n        secondary: 'border-secondary text-secondary',\n        destructive: 'border-destructive bg-destructive text-destructive',\n        neutral: 'border-neutral text-neutral',\n        light: 'border-white text-white',\n        dark: 'border-neutral-800 text-neutral-800',\n        text: 'border-text text-text',\n      },\n    },\n    defaultVariants: {\n      color: 'primary',\n    },\n  }\n);\n\nconst indicatorVariant = cva(\n  'absolute z-[-1] rounded-lg duration-300 ease-in-out motion-reduce:transition-none',\n  {\n    variants: {\n      color: {\n        primary: 'bg-primary/10 aria-selected:text-text',\n        secondary: 'bg-secondary/10 aria-selected:text-text',\n        destructive: 'bg-destructive/10 aria-selected:text-text',\n        neutral: 'bg-neutral/10 aria-selected:text-white/10',\n        light: 'bg-white/10 aria-selected:text-black',\n        dark: 'bg-neutral-800/10 aria-selected:text-white',\n        text: 'bg-text/10 aria-selected:text-text-opposite',\n      },\n      orientation: {\n        horizontal: 'top-0 h-full w-auto transition-[left,width]',\n        vertical: 'left-0 h-auto w-full transition-[top,height]',\n      },\n    },\n    defaultVariants: {\n      orientation: 'horizontal',\n    },\n  }\n);\n\nexport type TabSelectorItemProps = HTMLAttributes<HTMLElement> & {\n  key: string | number;\n};\n\nexport type TabSelectorProps<T extends TabSelectorItemProps> = {\n  tabs: ReactElement<T>[];\n  selectedChoice: T['key'];\n  onTabClick?: (choice: T['key']) => void;\n  hoverable?: boolean;\n  orientation?: ItemSelectorOrientation;\n} & HTMLAttributes<HTMLElement> &\n  Omit<VariantProps<typeof tabSelectorVariant>, 'color'> & {\n    color?: TabSelectorColor | `${TabSelectorColor}`;\n  };\n\n/**\n *\n * Component that allows the user to select one of the provided choices.\n *\n * Example:\n * ```jsx\n * <TabSelector\n *   selectedChoice=\"option1\"\n *   onTabClick={(choice) => console.log(choice)}\n *   hoverable={true}\n * >\n *   <Button key=\"option1\"/>\n *   <Button key=\"option2\"/>\n *   <Button key=\"option3\"/>\n * </TabSelector>\n * ```\n */\nexport const TabSelector = <T extends TabSelectorItemProps>({\n  tabs,\n  selectedChoice,\n  onTabClick,\n  color = TabSelectorColor.PRIMARY,\n  hoverable = false,\n  orientation = 'horizontal',\n  className,\n}: TabSelectorProps<T>) => {\n  const optionsRefs = useRef<HTMLElement[]>([]);\n  const indicatorRef = useRef<HTMLDivElement | null>(null);\n  const { choiceIndicatorPosition, calculatePosition } = useItemSelector(\n    optionsRefs,\n    { isHoverable: hoverable, orientation }\n  );\n\n  useEffect(() => {\n    calculatePosition();\n  }, [selectedChoice, tabs]);\n\n  return (\n    <div\n      className={cn(\n        tabSelectorVariant({\n          color,\n        }),\n        className\n      )}\n      aria-orientation={orientation}\n      aria-multiselectable=\"false\"\n      role=\"tablist\"\n    >\n      {tabs.map((Tab, index) => {\n        const key = Tab.key!;\n\n        const isSelected = selectedChoice === key;\n\n        return cloneElement(Tab, {\n          key: key ?? index,\n          role: 'tab',\n          onClick: (e: MouseEvent<HTMLElement>) => {\n            Tab.props?.onClick?.(e);\n            onTabClick?.(key);\n          },\n          'aria-selected': isSelected,\n          'data-active': isSelected as unknown as string,\n          tabIndex: isSelected ? 0 : -1,\n          ref: (el: HTMLElement) => {\n            optionsRefs.current[index] = el!;\n          },\n        } as unknown as T);\n      })}\n      {choiceIndicatorPosition && (\n        <div\n          className={cn(\n            indicatorVariant({\n              color,\n              orientation,\n            })\n          )}\n          style={choiceIndicatorPosition}\n          ref={indicatorRef}\n          key={`${selectedChoice}${JSON.stringify(tabs.map((tab) => tab.key))}`}\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAiBA,IAAY,gEAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGF,MAAM,qBAAqB,IACzB,uDACA;CACE,UAAU,EACR,OAAO;EACL,SAAS;EACT,WAAW;EACX,aAAa;EACb,SAAS;EACT,OAAO;EACP,MAAM;EACN,MAAM;EACP,EACF;CACD,iBAAiB,EACf,OAAO,WACR;CACF,CACF;AAED,MAAM,mBAAmB,IACvB,qFACA;CACE,UAAU;EACR,OAAO;GACL,SAAS;GACT,WAAW;GACX,aAAa;GACb,SAAS;GACT,OAAO;GACP,MAAM;GACN,MAAM;GACP;EACD,aAAa;GACX,YAAY;GACZ,UAAU;GACX;EACF;CACD,iBAAiB,EACf,aAAa,cACd;CACF,CACF;;;;;;;;;;;;;;;;;;AAkCD,MAAa,eAA+C,EAC1D,MACA,gBACA,YACA,QAAQ,iBAAiB,SACzB,YAAY,OACZ,cAAc,cACd,gBACyB;CACzB,MAAM,cAAc,OAAsB,EAAE,CAAC;CAC7C,MAAM,eAAe,OAA8B,KAAK;CACxD,MAAM,EAAE,yBAAyB,sBAAsB,gBACrD,aACA;EAAE,aAAa;EAAW;EAAa,CACxC;AAED,iBAAgB;AACd,qBAAmB;IAClB,CAAC,gBAAgB,KAAK,CAAC;AAE1B,QACE,qBAAC;EACC,WAAW,GACT,mBAAmB,EACjB,OACD,CAAC,EACF,UACD;EACD,oBAAkB;EAClB,wBAAqB;EACrB,MAAK;aAEJ,KAAK,KAAK,KAAK,UAAU;GACxB,MAAM,MAAM,IAAI;GAEhB,MAAM,aAAa,mBAAmB;AAEtC,UAAO,aAAa,KAAK;IACvB,KAAK,OAAO;IACZ,MAAM;IACN,UAAU,MAA+B;AACvC,SAAI,OAAO,UAAU,EAAE;AACvB,kBAAa,IAAI;;IAEnB,iBAAiB;IACjB,eAAe;IACf,UAAU,aAAa,IAAI;IAC3B,MAAM,OAAoB;AACxB,iBAAY,QAAQ,SAAS;;IAEhC,CAAiB;IAClB,EACD,2BACC,oBAAC;GACC,WAAW,GACT,iBAAiB;IACf;IACA;IACD,CAAC,CACH;GACD,OAAO;GACP,KAAK;KACA,GAAG,iBAAiB,KAAK,UAAU,KAAK,KAAK,QAAQ,IAAI,IAAI,CAAC,GACnE;GAEA"}
+{"version":3,"file":"TabSelector.mjs","names":[],"sources":["../../../../src/components/TabSelector/TabSelector.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  cloneElement,\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactElement,\n  useEffect,\n  useRef,\n} from 'react';\nimport {\n  type ItemSelectorOrientation,\n  useItemSelector,\n} from '../../hooks/useItemSelector';\nimport { cn } from '../../utils/cn';\n\nexport enum TabSelectorColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  DARK = 'dark',\n  TEXT = 'text',\n}\n\nconst tabSelectorVariant = cva(\n  'relative z-0 flex size-full flex-row items-center gap-2',\n  {\n    variants: {\n      color: {\n        primary: 'border-primary text-primary',\n        secondary: 'border-secondary text-secondary',\n        destructive: 'border-destructive bg-destructive text-destructive',\n        neutral: 'border-neutral text-neutral',\n        light: 'border-white text-white',\n        dark: 'border-neutral-800 text-neutral-800',\n        text: 'border-text text-text',\n      },\n    },\n    defaultVariants: {\n      color: 'primary',\n    },\n  }\n);\n\nconst indicatorVariant = cva(\n  '-z-1 absolute rounded-lg duration-300 ease-in-out motion-reduce:transition-none',\n  {\n    variants: {\n      color: {\n        primary: 'bg-primary/10 aria-selected:text-text',\n        secondary: 'bg-secondary/10 aria-selected:text-text',\n        destructive: 'bg-destructive/10 aria-selected:text-text',\n        neutral: 'bg-neutral/10 aria-selected:text-white/10',\n        light: 'bg-white/10 aria-selected:text-black',\n        dark: 'bg-neutral-800/10 aria-selected:text-white',\n        text: 'bg-text/10 aria-selected:text-text-opposite',\n      },\n      orientation: {\n        horizontal: 'top-0 h-full w-auto transition-[left,width]',\n        vertical: 'left-0 h-auto w-full transition-[top,height]',\n      },\n    },\n    defaultVariants: {\n      orientation: 'horizontal',\n    },\n  }\n);\n\nexport type TabSelectorItemProps = HTMLAttributes<HTMLElement> & {\n  key: string | number;\n};\n\nexport type TabSelectorProps<T extends TabSelectorItemProps> = {\n  tabs: ReactElement<T>[];\n  selectedChoice: T['key'];\n  onTabClick?: (choice: T['key']) => void;\n  hoverable?: boolean;\n  orientation?: ItemSelectorOrientation;\n} & HTMLAttributes<HTMLElement> &\n  Omit<VariantProps<typeof tabSelectorVariant>, 'color'> & {\n    color?: TabSelectorColor | `${TabSelectorColor}`;\n  };\n\n/**\n *\n * Component that allows the user to select one of the provided choices.\n *\n * Example:\n * ```jsx\n * <TabSelector\n *   selectedChoice=\"option1\"\n *   onTabClick={(choice) => console.log(choice)}\n *   hoverable={true}\n * >\n *   <Button key=\"option1\"/>\n *   <Button key=\"option2\"/>\n *   <Button key=\"option3\"/>\n * </TabSelector>\n * ```\n */\nexport const TabSelector = <T extends TabSelectorItemProps>({\n  tabs,\n  selectedChoice,\n  onTabClick,\n  color = TabSelectorColor.PRIMARY,\n  hoverable = false,\n  orientation = 'horizontal',\n  className,\n}: TabSelectorProps<T>) => {\n  const optionsRefs = useRef<HTMLElement[]>([]);\n  const indicatorRef = useRef<HTMLDivElement | null>(null);\n  const { choiceIndicatorPosition, calculatePosition } = useItemSelector(\n    optionsRefs,\n    { isHoverable: hoverable, orientation }\n  );\n\n  useEffect(() => {\n    calculatePosition();\n  }, [selectedChoice, tabs]);\n\n  return (\n    <div\n      className={cn(\n        tabSelectorVariant({\n          color,\n        }),\n        className\n      )}\n      aria-orientation={orientation}\n      aria-multiselectable=\"false\"\n      role=\"tablist\"\n    >\n      {tabs.map((Tab, index) => {\n        const key = Tab.key!;\n\n        const isSelected = selectedChoice === key;\n\n        return cloneElement(Tab, {\n          key: key ?? index,\n          role: 'tab',\n          onClick: (e: MouseEvent<HTMLElement>) => {\n            Tab.props?.onClick?.(e);\n            onTabClick?.(key);\n          },\n          'aria-selected': isSelected,\n          'data-active': isSelected as unknown as string,\n          tabIndex: isSelected ? 0 : -1,\n          ref: (el: HTMLElement) => {\n            optionsRefs.current[index] = el!;\n          },\n        } as unknown as T);\n      })}\n      {choiceIndicatorPosition && (\n        <div\n          className={cn(\n            indicatorVariant({\n              color,\n              orientation,\n            })\n          )}\n          style={choiceIndicatorPosition}\n          ref={indicatorRef}\n          key={`${selectedChoice}${JSON.stringify(tabs.map((tab) => tab.key))}`}\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAiBA,IAAY,gEAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGF,MAAM,qBAAqB,IACzB,2DACA;CACE,UAAU,EACR,OAAO;EACL,SAAS;EACT,WAAW;EACX,aAAa;EACb,SAAS;EACT,OAAO;EACP,MAAM;EACN,MAAM;EACP,EACF;CACD,iBAAiB,EACf,OAAO,WACR;CACF,CACF;AAED,MAAM,mBAAmB,IACvB,mFACA;CACE,UAAU;EACR,OAAO;GACL,SAAS;GACT,WAAW;GACX,aAAa;GACb,SAAS;GACT,OAAO;GACP,MAAM;GACN,MAAM;GACP;EACD,aAAa;GACX,YAAY;GACZ,UAAU;GACX;EACF;CACD,iBAAiB,EACf,aAAa,cACd;CACF,CACF;;;;;;;;;;;;;;;;;;AAkCD,MAAa,eAA+C,EAC1D,MACA,gBACA,YACA,QAAQ,iBAAiB,SACzB,YAAY,OACZ,cAAc,cACd,gBACyB;CACzB,MAAM,cAAc,OAAsB,EAAE,CAAC;CAC7C,MAAM,eAAe,OAA8B,KAAK;CACxD,MAAM,EAAE,yBAAyB,sBAAsB,gBACrD,aACA;EAAE,aAAa;EAAW;EAAa,CACxC;AAED,iBAAgB;AACd,qBAAmB;IAClB,CAAC,gBAAgB,KAAK,CAAC;AAE1B,QACE,qBAAC;EACC,WAAW,GACT,mBAAmB,EACjB,OACD,CAAC,EACF,UACD;EACD,oBAAkB;EAClB,wBAAqB;EACrB,MAAK;aAEJ,KAAK,KAAK,KAAK,UAAU;GACxB,MAAM,MAAM,IAAI;GAEhB,MAAM,aAAa,mBAAmB;AAEtC,UAAO,aAAa,KAAK;IACvB,KAAK,OAAO;IACZ,MAAM;IACN,UAAU,MAA+B;AACvC,SAAI,OAAO,UAAU,EAAE;AACvB,kBAAa,IAAI;;IAEnB,iBAAiB;IACjB,eAAe;IACf,UAAU,aAAa,IAAI;IAC3B,MAAM,OAAoB;AACxB,iBAAY,QAAQ,SAAS;;IAEhC,CAAiB;IAClB,EACD,2BACC,oBAAC;GACC,WAAW,GACT,iBAAiB;IACf;IACA;IACD,CAAC,CACH;GACD,OAAO;GACP,KAAK;KACA,GAAG,iBAAiB,KAAK,UAAU,KAAK,KAAK,QAAQ,IAAI,IAAI,CAAC,GACnE;GAEA"}

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import * as class_variance_authority_types12 from "class-variance-authority/types";
+import * as class_variance_authority_types14 from "class-variance-authority/types";
 import { VariantProps } from "class-variance-authority";
 
 //#region src/components/Badge/index.d.ts
@@ -47,7 +47,7 @@ declare const badgeVariants: (props?: {
   color?: BadgeColor;
   variant?: BadgeVariant;
   size?: BadgeSize;
-} & class_variance_authority_types12.ClassProp) => string;
+} & class_variance_authority_types14.ClassProp) => string;
 /**
  * Badge component props interface
  * @description Comprehensive props for the Badge component with accessibility and interactive features

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

@@ -1,10 +1,10 @@
-import * as _intlayer_types382 from "@intlayer/types";
+import * as _intlayer_types400 from "@intlayer/types";
 
 //#region src/components/Breadcrumb/breadcrumb.content.d.ts
 declare const breadCrumbContent: {
   key: string;
   content: {
-    linkLabel: _intlayer_types382.TypedNodeModel<_intlayer_types382.NodeType.Translation, {
+    linkLabel: _intlayer_types400.TypedNodeModel<_intlayer_types400.NodeType.Translation, {
       en: string;
       fr: string;
       es: string;
@@ -23,7 +23,7 @@ declare const breadCrumbContent: {
       id: string;
       vi: string;
     }, {
-      nodeType: _intlayer_types382.NodeType.Translation | "translation";
+      nodeType: _intlayer_types400.NodeType.Translation | "translation";
     } & {
       translation: {
         en: string;

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

@@ -1,10 +1,10 @@
-import * as _intlayer_types385 from "@intlayer/types";
+import * as _intlayer_types319 from "@intlayer/types";
 
 //#region src/components/Browser/Browser.content.d.ts
 declare const browserContent: {
   key: string;
   content: {
-    ariaLabel: _intlayer_types385.TypedNodeModel<_intlayer_types385.NodeType.Translation, {
+    ariaLabel: _intlayer_types319.TypedNodeModel<_intlayer_types319.NodeType.Translation, {
       en: string;
       'en-GB': string;
       fr: string;
@@ -23,7 +23,7 @@ declare const browserContent: {
       id: string;
       vi: string;
     }, {
-      nodeType: _intlayer_types385.NodeType.Translation | "translation";
+      nodeType: _intlayer_types319.NodeType.Translation | "translation";
     } & {
       translation: {
         en: string;
@@ -45,7 +45,7 @@ declare const browserContent: {
         vi: string;
       };
     }>;
-    urlLabel: _intlayer_types385.TypedNodeModel<_intlayer_types385.NodeType.Translation, {
+    urlLabel: _intlayer_types319.TypedNodeModel<_intlayer_types319.NodeType.Translation, {
       en: string;
       'en-GB': string;
       fr: string;
@@ -64,7 +64,7 @@ declare const browserContent: {
       id: string;
       vi: string;
     }, {
-      nodeType: _intlayer_types385.NodeType.Translation | "translation";
+      nodeType: _intlayer_types319.NodeType.Translation | "translation";
     } & {
       translation: {
         en: string;
@@ -87,7 +87,7 @@ declare const browserContent: {
       };
     }>;
     urlPlaceholder: string;
-    errorMessage: _intlayer_types385.TypedNodeModel<_intlayer_types385.NodeType.Translation, {
+    errorMessage: _intlayer_types319.TypedNodeModel<_intlayer_types319.NodeType.Translation, {
       en: string;
       'en-GB': string;
       fr: string;
@@ -106,7 +106,7 @@ declare const browserContent: {
       id: string;
       vi: string;
     }, {
-      nodeType: _intlayer_types385.NodeType.Translation | "translation";
+      nodeType: _intlayer_types319.NodeType.Translation | "translation";
     } & {
       translation: {
         en: string;
@@ -128,7 +128,7 @@ declare const browserContent: {
         vi: string;
       };
     }>;
-    reloadButtonTitle: _intlayer_types385.TypedNodeModel<_intlayer_types385.NodeType.Translation, {
+    reloadButtonTitle: _intlayer_types319.TypedNodeModel<_intlayer_types319.NodeType.Translation, {
       en: string;
       'en-GB': string;
       fr: string;
@@ -147,7 +147,7 @@ declare const browserContent: {
       id: string;
       vi: string;
     }, {
-      nodeType: _intlayer_types385.NodeType.Translation | "translation";
+      nodeType: _intlayer_types319.NodeType.Translation | "translation";
     } & {
       translation: {
         en: string;
@@ -169,7 +169,7 @@ declare const browserContent: {
         vi: string;
       };
     }>;
-    iframeTitle: _intlayer_types385.TypedNodeModel<_intlayer_types385.NodeType.Translation, {
+    iframeTitle: _intlayer_types319.TypedNodeModel<_intlayer_types319.NodeType.Translation, {
       en: string;
       'en-GB': string;
       fr: string;
@@ -188,7 +188,7 @@ declare const browserContent: {
       id: string;
       vi: string;
     }, {
-      nodeType: _intlayer_types385.NodeType.Translation | "translation";
+      nodeType: _intlayer_types319.NodeType.Translation | "translation";
     } & {
       translation: {
         en: string;

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

@@ -1,5 +1,5 @@
 import { ButtonHTMLAttributes, DetailedHTMLProps, FC } from "react";
-import * as class_variance_authority_types0 from "class-variance-authority/types";
+import * as class_variance_authority_types12 from "class-variance-authority/types";
 import { VariantProps } from "class-variance-authority";
 import { LucideIcon } from "lucide-react";
 
@@ -60,13 +60,13 @@ declare enum ButtonTextAlign {
  * Enhanced button variants with improved accessibility and focus states
  */
 declare const buttonVariants: (props?: {
-  size?: "md" | "sm" | "lg" | "xl" | "icon-sm" | "icon-md" | "icon-lg" | "icon-xl";
-  color?: "primary" | "secondary" | "destructive" | "neutral" | "card" | "light" | "dark" | "text" | "current" | "text-inverse" | "error" | "success" | "custom";
-  roundedSize?: "md" | "sm" | "lg" | "xl" | "none" | "2xl" | "3xl" | "4xl" | "5xl" | "full";
-  variant?: "input" | "default" | "none" | "outline" | "link" | "invisible-link" | "hoverable" | "fade";
+  size?: "sm" | "md" | "lg" | "xl" | "icon-sm" | "icon-md" | "icon-lg" | "icon-xl";
+  color?: "text" | "error" | "custom" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "text-inverse" | "success" | "card" | "current";
+  roundedSize?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full" | "4xl" | "5xl";
+  variant?: "default" | "none" | "input" | "invisible-link" | "hoverable" | "link" | "outline" | "fade";
   textAlign?: "left" | "center" | "right";
   isFullWidth?: boolean;
-} & class_variance_authority_types0.ClassProp) => string;
+} & class_variance_authority_types12.ClassProp) => string;
 /**
  * Enhanced Button component props with comprehensive type safety and accessibility features
  */

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","names":[],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AAUY,aAAA,UAAA;EAgCA,EAAA,GAAA,IAAA;EAcA,EAAA,GAAA,IAAA;EAmBA,EAAA,GAAA,IAAA;EASC,EAAA,GAAA,IAAA;EAgJD,OAAA,GAAA,SAAW;EACA,OAAA,GAAA,SAAA;EAArB,OAAA,GAAA,SAAA;EACA,OAAA,GAAA,SAAA;;;;;AAYc,aAxMJ,aAAA;EA6MI,OAAA,GAAA,SAAA;EAAK,IAAA,GAAA,MAAA;EAAU,OAAA,GAAA,SAAA;EA8FlB,IAAA,GAAA,MAkHZ;;;;;;;;;aA/YW,WAAA;;;;;;;;;;;;;;;;;;aAmBA,eAAA;;;;;;;;cASC;;;;;;;IA2IZ,+BAAA,CAAA;;;;KAKW,WAAA,GAAc,kBACxB,qBAAqB,oBACrB,qBAEA,oBAAoB;;;;;;;;;SAUX,KAAK;;;;cAKA,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA8FR,QAAQ,GAAG"}
+{"version":3,"file":"Button.d.ts","names":[],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AAUY,aAAA,UAAA;EAgCA,EAAA,GAAA,IAAA;EAcA,EAAA,GAAA,IAAA;EAmBA,EAAA,GAAA,IAAA;EASC,EAAA,GAAA,IAAA;EAgJD,OAAA,GAAA,SAAW;EACA,OAAA,GAAA,SAAA;EAArB,OAAA,GAAA,SAAA;EACA,OAAA,GAAA,SAAA;;;;;AAYc,aAxMJ,aAAA;EA6MI,OAAA,GAAA,SAAA;EAAK,IAAA,GAAA,MAAA;EAAU,OAAA,GAAA,SAAA;EA8FlB,IAAA,GAAA,MAkHZ;;;;;;;;;aA/YW,WAAA;;;;;;;;;;;;;;;;;;aAmBA,eAAA;;;;;;;;cASC;;;;;;;IA2IZ,gCAAA,CAAA;;;;KAKW,WAAA,GAAc,kBACxB,qBAAqB,oBACrB,qBAEA,oBAAoB;;;;;;;;;SAUX,KAAK;;;;cAKA,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA8FR,QAAQ,GAAG"}

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

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

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

@@ -1,6 +1,6 @@
-import * as react6 from "react";
+import * as react0 from "react";
 import { ComponentProps, FC, HTMLAttributes } from "react";
-import * as react_jsx_runtime20 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { DialogProps } from "@radix-ui/react-dialog";
 import { Command as Command$1 } from "cmdk";
 
@@ -25,65 +25,65 @@ declare const CommandRoot: FC<ComponentProps<typeof Command$1>>;
  */
 declare const Command: {
   Dialog: FC<DialogProps>;
-  Input: FC<Omit<Pick<Pick<react6.DetailedHTMLProps<react6.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof react6.InputHTMLAttributes<HTMLInputElement>> & {
+  Input: FC<Omit<Pick<Pick<react0.DetailedHTMLProps<react0.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof react0.InputHTMLAttributes<HTMLInputElement>> & {
     ref?: React.Ref<HTMLInputElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof react6.InputHTMLAttributes<HTMLInputElement> | "asChild">, "onChange" | "type" | "value"> & {
+  }, "key" | keyof react0.InputHTMLAttributes<HTMLInputElement> | "asChild">, "type" | "value" | "onChange"> & {
     value?: string;
     onValueChange?: (search: string) => void;
-  } & react6.RefAttributes<HTMLInputElement>>;
+  } & react0.RefAttributes<HTMLInputElement>>;
   List: FC<{
     children?: React.ReactNode;
-  } & Pick<Pick<react6.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HTMLAttributes<HTMLDivElement> | "key"> & {
+  } & Pick<Pick<react0.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, keyof HTMLAttributes<HTMLDivElement> | "key" | "asChild"> & {
+  }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
-  } & react6.RefAttributes<HTMLDivElement>>;
+  } & react0.RefAttributes<HTMLDivElement>>;
   Empty: FC<{
     children?: React.ReactNode;
-  } & Pick<Pick<react6.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HTMLAttributes<HTMLDivElement> | "key"> & {
+  } & Pick<Pick<react0.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, keyof HTMLAttributes<HTMLDivElement> | "key" | "asChild"> & react6.RefAttributes<HTMLDivElement>>;
+  }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild"> & react0.RefAttributes<HTMLDivElement>>;
   Group: FC<{
     children?: React.ReactNode;
-  } & Omit<Pick<Pick<react6.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HTMLAttributes<HTMLDivElement> | "key"> & {
+  } & Omit<Pick<Pick<react0.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, keyof HTMLAttributes<HTMLDivElement> | "key" | "asChild">, "value" | "heading"> & {
+  }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
-  } & react6.RefAttributes<HTMLDivElement>>;
-  Separator: FC<Pick<Pick<react6.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HTMLAttributes<HTMLDivElement> | "key"> & {
+  } & react0.RefAttributes<HTMLDivElement>>;
+  Separator: FC<Pick<Pick<react0.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, keyof HTMLAttributes<HTMLDivElement> | "key" | "asChild"> & {
+  }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild"> & {
     alwaysRender?: boolean;
-  } & react6.RefAttributes<HTMLDivElement>>;
+  } & react0.RefAttributes<HTMLDivElement>>;
   Item: FC<{
     children?: React.ReactNode;
-  } & Omit<Pick<Pick<react6.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HTMLAttributes<HTMLDivElement> | "key"> & {
+  } & Omit<Pick<Pick<react0.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, keyof HTMLAttributes<HTMLDivElement> | "key" | "asChild">, "disabled" | "onSelect" | "value"> & {
+  }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild">, "disabled" | "value" | "onSelect"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;
     keywords?: string[];
     forceMount?: boolean;
-  } & react6.RefAttributes<HTMLDivElement>>;
+  } & react0.RefAttributes<HTMLDivElement>>;
   Shortcut: ({
     className,
     ...props
-  }: HTMLAttributes<HTMLSpanElement>) => react_jsx_runtime20.JSX.Element;
+  }: HTMLAttributes<HTMLSpanElement>) => react_jsx_runtime0.JSX.Element;
   propTypes?: any;
   displayName?: string | undefined;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/Command/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;cAaa,aAAa,GAAG,sBAAsB;;;;AAAnD;;;;;AAuHA;;;;;;;;;cAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA7BV,eAAe,qBAAgB,mBAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/Command/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;cAaa,aAAa,GAAG,sBAAsB;;;;AAAnD;;;;;AAuHA;;;;;;;;;cAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA7BV,eAAe,qBAAgB,kBAAA,CAAA,GAAA,CAAA"}

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

@@ -1,5 +1,5 @@
 import { DetailedHTMLProps, FC, HTMLAttributes, PropsWithChildren } from "react";
-import * as class_variance_authority_types14 from "class-variance-authority/types";
+import * as class_variance_authority_types0 from "class-variance-authority/types";
 import { VariantProps } from "class-variance-authority";
 
 //#region src/components/Container/index.d.ts
@@ -9,15 +9,15 @@ import { VariantProps } from "class-variance-authority";
  * Provides flexible styling options for background, padding, borders, and layout
  */
 declare const containerVariants: (props?: {
-  roundedSize?: "md" | "lg" | "sm" | "xl" | "none" | "2xl" | "3xl" | "4xl" | "full";
-  transparency?: "md" | "lg" | "sm" | "xl" | "none" | "full";
-  padding?: "md" | "lg" | "sm" | "xl" | "none" | "2xl";
+  roundedSize?: "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "none" | "3xl" | "4xl";
+  transparency?: "sm" | "md" | "lg" | "xl" | "full" | "none";
+  padding?: "sm" | "md" | "lg" | "xl" | "2xl" | "none";
   separator?: "without" | "x" | "y" | "both";
-  border?: "with" | "none";
-  borderColor?: "error" | "primary" | "secondary" | "neutral" | "text" | "success" | "warning";
-  background?: "with" | "none" | "hoverable";
-  gap?: "md" | "lg" | "sm" | "xl" | "none" | "2xl";
-} & class_variance_authority_types14.ClassProp) => string;
+  border?: "none" | "with";
+  borderColor?: "primary" | "secondary" | "neutral" | "text" | "error" | "warning" | "success";
+  background?: "none" | "with" | "hoverable";
+  gap?: "sm" | "md" | "lg" | "xl" | "2xl" | "none";
+} & class_variance_authority_types0.ClassProp) => string;
 /** Available rounded corner sizes for the container */
 declare enum ContainerRoundedSize {
   NONE = "none",

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/Container/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AAaA;AA8EY,cA9EC,iBA8EmB,EAAA,CAAA,KAsEzB,CAtEyB,EAAA;EAcpB,WAAA,CAAA,EAAA,IAAA,GAAA,IAAqB,GAAA,IAAA,GAAA,IAAA,GAAA,MAAA,GAAA,KAAA,GAAA,KAAA,GAAA,KAAA,GAAA,MAAA;EAUrB,YAAA,CAAA,EAAA,IAAgB,GAAA,IAAA,GAAA,IAAA,GAAA,IAAA,GAAA,MAAA,GAAA,MAAA;EAShB,OAAA,CAAA,EAAA,IAAA,GAAA,IAAkB,GAAA,IAAA,GAAA,IAAA,GAAA,MAAA,GAAA,KAAA;EAQlB,SAAA,CAAA,EAAA,SAAA,GAAoB,GAAA,GAAA,GAAA,GAAA,MAAA;EAWpB,MAAA,CAAA,EAAA,MAAA,GAAA,MAAmB;EAOnB,WAAA,CAAA,EAAA,OAAY,GAAA,SAAA,GAAA,WAAA,GAAA,SAAA,GAAA,MAAA,GAAA,SAAA,GAAA,SAAA;EAUZ,UAAA,CAAA,EAAA,MAAc,GAAA,MAAA,GAAA,WAAA;EACC,GAAA,CAAA,EAAA,IAAA,GAAA,IAAA,GAAA,IAAA,GAAA,IAAA,GAAA,MAAA,GAAA,KAAA;CAApB,GAzEL,gCAAA,CAAA,SAyEK,EAAA,GAAA,MAAA;;AADsB,aArEjB,oBAAA;EAwEuB,IAAA,GAAA,MAAA;EAAf,EAAA,GAAA,IAAA;EAAgC,EAAA,GAAA,IAAA;EAAlD,EAAA,GAAA,IAAA;EAAiB,EAAA,GAAA,IAAA;EAkCN,KAAA,GAAA,KAgCZ;;;;;;;aA5HW,qBAAA;;;;;;;;;aAUA,gBAAA;;;;;;;;aASA,kBAAA;;;;;;;aAQA,oBAAA;;;;;;;;;;aAWA,mBAAA;;;;;;aAOA,YAAA;;;;;;;;;KAUA,cAAA,GAAiB,kBAC3B,KAAK,oBAAoB,iCAEzB,kBAAkB,eAAe,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAkCvC,WAAW,GAAG"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/Container/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AAaA;AA8EY,cA9EC,iBA8EmB,EAAA,CAAA,KAsEzB,CAtEyB,EAAA;EAcpB,WAAA,CAAA,EAAA,IAAA,GAAA,IAAqB,GAAA,IAAA,GAAA,IAAA,GAAA,KAAA,GAAA,MAAA,GAAA,MAAA,GAAA,KAAA,GAAA,KAAA;EAUrB,YAAA,CAAA,EAAA,IAAgB,GAAA,IAAA,GAAA,IAAA,GAAA,IAAA,GAAA,MAAA,GAAA,MAAA;EAShB,OAAA,CAAA,EAAA,IAAA,GAAA,IAAkB,GAAA,IAAA,GAAA,IAAA,GAAA,KAAA,GAAA,MAAA;EAQlB,SAAA,CAAA,EAAA,SAAA,GAAoB,GAAA,GAAA,GAAA,GAAA,MAAA;EAWpB,MAAA,CAAA,EAAA,MAAA,GAAA,MAAmB;EAOnB,WAAA,CAAA,EAAA,SAAY,GAAA,WAAA,GAAA,SAAA,GAAA,MAAA,GAAA,OAAA,GAAA,SAAA,GAAA,SAAA;EAUZ,UAAA,CAAA,EAAA,MAAc,GAAA,MAAA,GAAA,WAAA;EACC,GAAA,CAAA,EAAA,IAAA,GAAA,IAAA,GAAA,IAAA,GAAA,IAAA,GAAA,KAAA,GAAA,MAAA;CAApB,GAzEL,+BAAA,CAAA,SAyEK,EAAA,GAAA,MAAA;;AADsB,aArEjB,oBAAA;EAwEuB,IAAA,GAAA,MAAA;EAAf,EAAA,GAAA,IAAA;EAAgC,EAAA,GAAA,IAAA;EAAlD,EAAA,GAAA,IAAA;EAAiB,EAAA,GAAA,IAAA;EAkCN,KAAA,GAAA,KAgCZ;;;;;;;aA5HW,qBAAA;;;;;;;;;aAUA,gBAAA;;;;;;;;aASA,kBAAA;;;;;;;aAQA,oBAAA;;;;;;;;;;aAWA,mBAAA;;;;;;aAOA,YAAA;;;;;;;;;KAUA,cAAA,GAAiB,kBAC3B,KAAK,oBAAoB,iCAEzB,kBAAkB,eAAe,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAkCvC,WAAW,GAAG"}

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

@@ -1,10 +1,10 @@
-import * as _intlayer_types400 from "@intlayer/types";
+import * as _intlayer_types334 from "@intlayer/types";
 
 //#region src/components/CopyButton/CopyButton.content.d.ts
 declare const copyContentContent: {
   key: string;
   content: {
-    label: _intlayer_types400.TypedNodeModel<_intlayer_types400.NodeType.Translation, {
+    label: _intlayer_types334.TypedNodeModel<_intlayer_types334.NodeType.Translation, {
       en: string;
       fr: string;
       es: string;
@@ -23,7 +23,7 @@ declare const copyContentContent: {
       id: string;
       vi: string;
     }, {
-      nodeType: _intlayer_types400.NodeType.Translation | "translation";
+      nodeType: _intlayer_types334.NodeType.Translation | "translation";
     } & {
       translation: {
         en: string;