npm - @intlayer/design-system - Versions diffs - 7.3.13 → 7.3.15 - Mend

@intlayer/design-system 7.3.13 → 7.3.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (93) hide show

package/dist/esm/components/Pagination/Pagination.mjs CHANGED Viewed

@@ -110,7 +110,7 @@ const Pagination = ({ currentPage, totalPages, onPageChange, showFirstLast = fal
 						onClick: () => handlePageChange(page),
 						disabled,
 						label: `Go to page ${page}`,
-						className: cn("flex aspect-square h-8 w-8 min-w-0 items-center justify-center p-0", size === "sm" && "h-6 w-6", size === "lg" && "h-10 w-10", isActive && "font-semibold"),
+						className: cn("flex aspect-square h-8 w-8 min-w-0 items-center justify-center p-0 text-sm", size === "sm" && "h-6 w-6 text-xs", size === "lg" && "h-10 w-10 text-base", isActive && "font-semibold"),
 						children: page
 					}, page);
 				})

package/dist/esm/components/Pagination/Pagination.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Pagination.mjs","names":["pages: (number \| 'ellipsis')[]","Pagination: FC<PaginationProps>"],"sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';\nimport type { FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\n\nexport const paginationVariants = cva(\n 'flex items-center justify-center gap-1',\n {\n variants: {\n size: {\n sm: 'gap-1',\n md: 'gap-2',\n lg: 'gap-3',\n },\n color: {\n text: 'background-text',\n primary: 'background-primary',\n secondary: 'background-secondary',\n neutral: 'background-neutral',\n destructive: 'background-destructive',\n },\n variant: {\n default: '',\n bordered: 'rounded-lg border border-border p-2',\n ghost: 'bg-transparent',\n },\n },\n defaultVariants: {\n size: 'md',\n variant: 'default',\n },\n }\n);\n\nexport enum PaginationSize {\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n}\n\nexport enum PaginationVariant {\n DEFAULT = 'default',\n BORDERED = 'bordered',\n GHOST = 'ghost',\n}\n\nexport type PaginationProps = HTMLAttributes<HTMLDivElement> &\n VariantProps<typeof paginationVariants> & {\n currentPage: number;\n totalPages: number;\n onPageChange: (page: number) => void;\n showFirstLast?: boolean;\n showPrevNext?: boolean;\n maxVisiblePages?: number;\n disabled?: boolean;\n };\n\nconst generatePageNumbers = (\n currentPage: number,\n totalPages: number,\n maxVisiblePages: number\n): (number \| 'ellipsis')[] => {\n if (totalPages <= maxVisiblePages) {\n return Array.from({ length: totalPages }, (_, i) => i + 1);\n }\n\n const pages: (number \| 'ellipsis')[] = [];\n const halfVisible = Math.floor(maxVisiblePages / 2);\n\n pages.push(1);\n\n if (currentPage <= halfVisible + 2) {\n for (let i = 2; i <= Math.min(maxVisiblePages - 1, totalPages - 1); i++) {\n pages.push(i);\n }\n if (totalPages > maxVisiblePages) {\n pages.push('ellipsis');\n }\n if (totalPages > 1) {\n pages.push(totalPages);\n }\n } else if (currentPage >= totalPages - halfVisible - 1) {\n if (totalPages > maxVisiblePages) {\n pages.push('ellipsis');\n }\n for (\n let i = Math.max(2, totalPages - maxVisiblePages + 2);\n i <= totalPages;\n i++\n ) {\n pages.push(i);\n }\n } else {\n pages.push('ellipsis');\n const start = currentPage - halfVisible;\n const end = currentPage + halfVisible;\n for (let i = start; i <= end; i++) {\n pages.push(i);\n }\n pages.push('ellipsis');\n pages.push(totalPages);\n }\n\n return pages;\n};\n\nconst getButtonSize = (size?: PaginationSize \| `${PaginationSize}` \| null) => {\n return size === PaginationSize.SM\n ? ButtonSize.ICON_SM\n : size === PaginationSize.LG\n ? ButtonSize.ICON_LG\n : ButtonSize.ICON_MD;\n};\n\nexport const Pagination: FC<PaginationProps> = ({\n currentPage,\n totalPages,\n onPageChange,\n showFirstLast = false,\n showPrevNext = true,\n maxVisiblePages = 5,\n disabled = false,\n size = PaginationSize.MD,\n variant = PaginationVariant.DEFAULT,\n color = ButtonColor.TEXT,\n className,\n ...props\n}) => {\n const pageNumbers = generatePageNumbers(\n currentPage,\n totalPages,\n maxVisiblePages\n );\n\n const buttonSize = getButtonSize(size);\n const isFirstPage = currentPage === 1;\n const isLastPage = currentPage === totalPages;\n\n if (totalPages <= 1) return null;\n\n const handlePageChange = (page: number) => {\n if (!disabled && page >= 1 && page <= totalPages && page !== currentPage) {\n onPageChange(page);\n }\n };\n\n return (\n <div\n className={cn(paginationVariants({ size, variant }), className)}\n {...props}\n >\n {showPrevNext && (\n <Button\n variant={ButtonVariant.OUTLINE}\n size={buttonSize}\n color={ButtonColor.TEXT}\n onClick={() => handlePageChange(currentPage - 1)}\n disabled={disabled \|\| isFirstPage}\n label=\"Go to previous page\"\n Icon={ChevronLeft}\n className=\"min-w-0 px-2\"\n />\n )}\n\n <div className=\"flex items-center gap-1 max-md:gap-0.5\">\n {pageNumbers.map((page) => {\n if (page === 'ellipsis') {\n return (\n <div\n key={`ellipsis-${page}`}\n className=\"flex h-8 min-w-8 items-center justify-center px-1\"\n >\n <MoreHorizontal className=\"h-4 w-4 text-muted-foreground\" />\n </div>\n );\n }\n\n const isActive = page === currentPage;\n return (\n <Button\n key={page}\n variant={isActive ? ButtonVariant.DEFAULT : ButtonVariant.OUTLINE}\n size={buttonSize}\n color={ButtonColor.TEXT}\n onClick={() => handlePageChange(page)}\n disabled={disabled}\n label={`Go to page ${page}`}\n className={cn(\n 'flex aspect-square h-8 w-8 min-w-0 items-center justify-center p-0',\n size === 'sm' && 'h-6 w-6',\n size === 'lg' && 'h-10 w-10',\n isActive && 'font-semibold'\n )}\n >\n {page}\n </Button>\n );\n })}\n </div>\n\n {showPrevNext && (\n <Button\n variant={ButtonVariant.OUTLINE}\n size={buttonSize}\n color={ButtonColor.TEXT}\n onClick={() => handlePageChange(currentPage + 1)}\n disabled={disabled \|\| isLastPage}\n label=\"Go to next page\"\n Icon={ChevronRight}\n className=\"min-w-0 px-2\"\n />\n )}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;AAQA,MAAa,qBAAqB,IAChC,0CACA;CACE,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL;EACD,OAAO;GACL,MAAM;GACN,SAAS;GACT,WAAW;GACX,SAAS;GACT,aAAa;GACd;EACD,SAAS;GACP,SAAS;GACT,UAAU;GACV,OAAO;GACR;EACF;CACD,iBAAiB;EACf,MAAM;EACN,SAAS;EACV;CACF,CACF;AAED,IAAY,4DAAL;AACL;AACA;AACA;;;AAGF,IAAY,kEAAL;AACL;AACA;AACA;;;AAcF,MAAM,uBACJ,aACA,YACA,oBAC4B;AAC5B,KAAI,cAAc,gBAChB,QAAO,MAAM,KAAK,EAAE,QAAQ,YAAY,GAAG,GAAG,MAAM,IAAI,EAAE;CAG5D,MAAMA,QAAiC,EAAE;CACzC,MAAM,cAAc,KAAK,MAAM,kBAAkB,EAAE;AAEnD,OAAM,KAAK,EAAE;AAEb,KAAI,eAAe,cAAc,GAAG;AAClC,OAAK,IAAI,IAAI,GAAG,KAAK,KAAK,IAAI,kBAAkB,GAAG,aAAa,EAAE,EAAE,IAClE,OAAM,KAAK,EAAE;AAEf,MAAI,aAAa,gBACf,OAAM,KAAK,WAAW;AAExB,MAAI,aAAa,EACf,OAAM,KAAK,WAAW;YAEf,eAAe,aAAa,cAAc,GAAG;AACtD,MAAI,aAAa,gBACf,OAAM,KAAK,WAAW;AAExB,OACE,IAAI,IAAI,KAAK,IAAI,GAAG,aAAa,kBAAkB,EAAE,EACrD,KAAK,YACL,IAEA,OAAM,KAAK,EAAE;QAEV;AACL,QAAM,KAAK,WAAW;EACtB,MAAM,QAAQ,cAAc;EAC5B,MAAM,MAAM,cAAc;AAC1B,OAAK,IAAI,IAAI,OAAO,KAAK,KAAK,IAC5B,OAAM,KAAK,EAAE;AAEf,QAAM,KAAK,WAAW;AACtB,QAAM,KAAK,WAAW;;AAGxB,QAAO;;AAGT,MAAM,iBAAiB,SAAuD;AAC5E,QAAO,SAAS,eAAe,KAC3B,WAAW,UACX,SAAS,eAAe,KACtB,WAAW,UACX,WAAW;;AAGnB,MAAaC,cAAmC,EAC9C,aACA,YACA,cACA,gBAAgB,OAChB,eAAe,MACf,kBAAkB,GAClB,WAAW,OACX,OAAO,eAAe,IACtB,UAAU,kBAAkB,SAC5B,QAAQ,YAAY,MACpB,WACA,GAAG,YACC;CACJ,MAAM,cAAc,oBAClB,aACA,YACA,gBACD;CAED,MAAM,aAAa,cAAc,KAAK;CACtC,MAAM,cAAc,gBAAgB;CACpC,MAAM,aAAa,gBAAgB;AAEnC,KAAI,cAAc,EAAG,QAAO;CAE5B,MAAM,oBAAoB,SAAiB;AACzC,MAAI,CAAC,YAAY,QAAQ,KAAK,QAAQ,cAAc,SAAS,YAC3D,cAAa,KAAK;;AAItB,QACE,qBAAC;EACC,WAAW,GAAG,mBAAmB;GAAE;GAAM;GAAS,CAAC,EAAE,UAAU;EAC/D,GAAI;;GAEH,gBACC,oBAAC;IACC,SAAS,cAAc;IACvB,MAAM;IACN,OAAO,YAAY;IACnB,eAAe,iBAAiB,cAAc,EAAE;IAChD,UAAU,YAAY;IACtB,OAAM;IACN,MAAM;IACN,WAAU;KACV;GAGJ,oBAAC;IAAI,WAAU;cACZ,YAAY,KAAK,SAAS;AACzB,SAAI,SAAS,WACX,QACE,oBAAC;MAEC,WAAU;gBAEV,oBAAC,kBAAe,WAAU,kCAAkC;QAHvD,YAAY,OAIb;KAIV,MAAM,WAAW,SAAS;AAC1B,YACE,oBAAC;MAEC,SAAS,WAAW,cAAc,UAAU,cAAc;MAC1D,MAAM;MACN,OAAO,YAAY;MACnB,eAAe,iBAAiB,KAAK;MAC3B;MACV,OAAO,cAAc;MACrB,WAAW,GACT,~~sEACA~~,SAAS,QAAQ,~~WACjB~~,SAAS,QAAQ,~~aACjB~~,YAAY,gBACb;gBAEA;QAdI,KAeE;MAEX;KACE;GAEL,gBACC,oBAAC;IACC,SAAS,cAAc;IACvB,MAAM;IACN,OAAO,YAAY;IACnB,eAAe,iBAAiB,cAAc,EAAE;IAChD,UAAU,YAAY;IACtB,OAAM;IACN,MAAM;IACN,WAAU;KACV;;GAEA"}
1	+ {"version":3,"file":"Pagination.mjs","names":["pages: (number \| 'ellipsis')[]","Pagination: FC<PaginationProps>"],"sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';\nimport type { FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\n\nexport const paginationVariants = cva(\n 'flex items-center justify-center gap-1',\n {\n variants: {\n size: {\n sm: 'gap-1',\n md: 'gap-2',\n lg: 'gap-3',\n },\n color: {\n text: 'background-text',\n primary: 'background-primary',\n secondary: 'background-secondary',\n neutral: 'background-neutral',\n destructive: 'background-destructive',\n },\n variant: {\n default: '',\n bordered: 'rounded-lg border border-border p-2',\n ghost: 'bg-transparent',\n },\n },\n defaultVariants: {\n size: 'md',\n variant: 'default',\n },\n }\n);\n\nexport enum PaginationSize {\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n}\n\nexport enum PaginationVariant {\n DEFAULT = 'default',\n BORDERED = 'bordered',\n GHOST = 'ghost',\n}\n\nexport type PaginationProps = HTMLAttributes<HTMLDivElement> &\n VariantProps<typeof paginationVariants> & {\n currentPage: number;\n totalPages: number;\n onPageChange: (page: number) => void;\n showFirstLast?: boolean;\n showPrevNext?: boolean;\n maxVisiblePages?: number;\n disabled?: boolean;\n };\n\nconst generatePageNumbers = (\n currentPage: number,\n totalPages: number,\n maxVisiblePages: number\n): (number \| 'ellipsis')[] => {\n if (totalPages <= maxVisiblePages) {\n return Array.from({ length: totalPages }, (_, i) => i + 1);\n }\n\n const pages: (number \| 'ellipsis')[] = [];\n const halfVisible = Math.floor(maxVisiblePages / 2);\n\n pages.push(1);\n\n if (currentPage <= halfVisible + 2) {\n for (let i = 2; i <= Math.min(maxVisiblePages - 1, totalPages - 1); i++) {\n pages.push(i);\n }\n if (totalPages > maxVisiblePages) {\n pages.push('ellipsis');\n }\n if (totalPages > 1) {\n pages.push(totalPages);\n }\n } else if (currentPage >= totalPages - halfVisible - 1) {\n if (totalPages > maxVisiblePages) {\n pages.push('ellipsis');\n }\n for (\n let i = Math.max(2, totalPages - maxVisiblePages + 2);\n i <= totalPages;\n i++\n ) {\n pages.push(i);\n }\n } else {\n pages.push('ellipsis');\n const start = currentPage - halfVisible;\n const end = currentPage + halfVisible;\n for (let i = start; i <= end; i++) {\n pages.push(i);\n }\n pages.push('ellipsis');\n pages.push(totalPages);\n }\n\n return pages;\n};\n\nconst getButtonSize = (size?: PaginationSize \| `${PaginationSize}` \| null) => {\n return size === PaginationSize.SM\n ? ButtonSize.ICON_SM\n : size === PaginationSize.LG\n ? ButtonSize.ICON_LG\n : ButtonSize.ICON_MD;\n};\n\nexport const Pagination: FC<PaginationProps> = ({\n currentPage,\n totalPages,\n onPageChange,\n showFirstLast = false,\n showPrevNext = true,\n maxVisiblePages = 5,\n disabled = false,\n size = PaginationSize.MD,\n variant = PaginationVariant.DEFAULT,\n color = ButtonColor.TEXT,\n className,\n ...props\n}) => {\n const pageNumbers = generatePageNumbers(\n currentPage,\n totalPages,\n maxVisiblePages\n );\n\n const buttonSize = getButtonSize(size);\n const isFirstPage = currentPage === 1;\n const isLastPage = currentPage === totalPages;\n\n if (totalPages <= 1) return null;\n\n const handlePageChange = (page: number) => {\n if (!disabled && page >= 1 && page <= totalPages && page !== currentPage) {\n onPageChange(page);\n }\n };\n\n return (\n <div\n className={cn(paginationVariants({ size, variant }), className)}\n {...props}\n >\n {showPrevNext && (\n <Button\n variant={ButtonVariant.OUTLINE}\n size={buttonSize}\n color={ButtonColor.TEXT}\n onClick={() => handlePageChange(currentPage - 1)}\n disabled={disabled \|\| isFirstPage}\n label=\"Go to previous page\"\n Icon={ChevronLeft}\n className=\"min-w-0 px-2\"\n />\n )}\n\n <div className=\"flex items-center gap-1 max-md:gap-0.5\">\n {pageNumbers.map((page) => {\n if (page === 'ellipsis') {\n return (\n <div\n key={`ellipsis-${page}`}\n className=\"flex h-8 min-w-8 items-center justify-center px-1\"\n >\n <MoreHorizontal className=\"h-4 w-4 text-muted-foreground\" />\n </div>\n );\n }\n\n const isActive = page === currentPage;\n return (\n <Button\n key={page}\n variant={isActive ? ButtonVariant.DEFAULT : ButtonVariant.OUTLINE}\n size={buttonSize}\n color={ButtonColor.TEXT}\n onClick={() => handlePageChange(page)}\n disabled={disabled}\n label={`Go to page ${page}`}\n className={cn(\n 'flex aspect-square h-8 w-8 min-w-0 items-center justify-center p-0 text-sm',\n size === 'sm' && 'h-6 w-6 text-xs',\n size === 'lg' && 'h-10 w-10 text-base',\n isActive && 'font-semibold'\n )}\n >\n {page}\n </Button>\n );\n })}\n </div>\n\n {showPrevNext && (\n <Button\n variant={ButtonVariant.OUTLINE}\n size={buttonSize}\n color={ButtonColor.TEXT}\n onClick={() => handlePageChange(currentPage + 1)}\n disabled={disabled \|\| isLastPage}\n label=\"Go to next page\"\n Icon={ChevronRight}\n className=\"min-w-0 px-2\"\n />\n )}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;AAQA,MAAa,qBAAqB,IAChC,0CACA;CACE,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL;EACD,OAAO;GACL,MAAM;GACN,SAAS;GACT,WAAW;GACX,SAAS;GACT,aAAa;GACd;EACD,SAAS;GACP,SAAS;GACT,UAAU;GACV,OAAO;GACR;EACF;CACD,iBAAiB;EACf,MAAM;EACN,SAAS;EACV;CACF,CACF;AAED,IAAY,4DAAL;AACL;AACA;AACA;;;AAGF,IAAY,kEAAL;AACL;AACA;AACA;;;AAcF,MAAM,uBACJ,aACA,YACA,oBAC4B;AAC5B,KAAI,cAAc,gBAChB,QAAO,MAAM,KAAK,EAAE,QAAQ,YAAY,GAAG,GAAG,MAAM,IAAI,EAAE;CAG5D,MAAMA,QAAiC,EAAE;CACzC,MAAM,cAAc,KAAK,MAAM,kBAAkB,EAAE;AAEnD,OAAM,KAAK,EAAE;AAEb,KAAI,eAAe,cAAc,GAAG;AAClC,OAAK,IAAI,IAAI,GAAG,KAAK,KAAK,IAAI,kBAAkB,GAAG,aAAa,EAAE,EAAE,IAClE,OAAM,KAAK,EAAE;AAEf,MAAI,aAAa,gBACf,OAAM,KAAK,WAAW;AAExB,MAAI,aAAa,EACf,OAAM,KAAK,WAAW;YAEf,eAAe,aAAa,cAAc,GAAG;AACtD,MAAI,aAAa,gBACf,OAAM,KAAK,WAAW;AAExB,OACE,IAAI,IAAI,KAAK,IAAI,GAAG,aAAa,kBAAkB,EAAE,EACrD,KAAK,YACL,IAEA,OAAM,KAAK,EAAE;QAEV;AACL,QAAM,KAAK,WAAW;EACtB,MAAM,QAAQ,cAAc;EAC5B,MAAM,MAAM,cAAc;AAC1B,OAAK,IAAI,IAAI,OAAO,KAAK,KAAK,IAC5B,OAAM,KAAK,EAAE;AAEf,QAAM,KAAK,WAAW;AACtB,QAAM,KAAK,WAAW;;AAGxB,QAAO;;AAGT,MAAM,iBAAiB,SAAuD;AAC5E,QAAO,SAAS,eAAe,KAC3B,WAAW,UACX,SAAS,eAAe,KACtB,WAAW,UACX,WAAW;;AAGnB,MAAaC,cAAmC,EAC9C,aACA,YACA,cACA,gBAAgB,OAChB,eAAe,MACf,kBAAkB,GAClB,WAAW,OACX,OAAO,eAAe,IACtB,UAAU,kBAAkB,SAC5B,QAAQ,YAAY,MACpB,WACA,GAAG,YACC;CACJ,MAAM,cAAc,oBAClB,aACA,YACA,gBACD;CAED,MAAM,aAAa,cAAc,KAAK;CACtC,MAAM,cAAc,gBAAgB;CACpC,MAAM,aAAa,gBAAgB;AAEnC,KAAI,cAAc,EAAG,QAAO;CAE5B,MAAM,oBAAoB,SAAiB;AACzC,MAAI,CAAC,YAAY,QAAQ,KAAK,QAAQ,cAAc,SAAS,YAC3D,cAAa,KAAK;;AAItB,QACE,qBAAC;EACC,WAAW,GAAG,mBAAmB;GAAE;GAAM;GAAS,CAAC,EAAE,UAAU;EAC/D,GAAI;;GAEH,gBACC,oBAAC;IACC,SAAS,cAAc;IACvB,MAAM;IACN,OAAO,YAAY;IACnB,eAAe,iBAAiB,cAAc,EAAE;IAChD,UAAU,YAAY;IACtB,OAAM;IACN,MAAM;IACN,WAAU;KACV;GAGJ,oBAAC;IAAI,WAAU;cACZ,YAAY,KAAK,SAAS;AACzB,SAAI,SAAS,WACX,QACE,oBAAC;MAEC,WAAU;gBAEV,oBAAC,kBAAe,WAAU,kCAAkC;QAHvD,YAAY,OAIb;KAIV,MAAM,WAAW,SAAS;AAC1B,YACE,oBAAC;MAEC,SAAS,WAAW,cAAc,UAAU,cAAc;MAC1D,MAAM;MACN,OAAO,YAAY;MACnB,eAAe,iBAAiB,KAAK;MAC3B;MACV,OAAO,cAAc;MACrB,WAAW,GACT,8EACA,SAAS,QAAQ,mBACjB,SAAS,QAAQ,uBACjB,YAAY,gBACb;gBAEA;QAdI,KAeE;MAEX;KACE;GAEL,gBACC,oBAAC;IACC,SAAS,cAAc;IACvB,MAAM;IACN,OAAO,YAAY;IACnB,eAAe,iBAAiB,cAAc,EAAE;IAChD,UAAU,YAAY;IACtB,OAAM;IACN,MAAM;IACN,WAAU;KACV;;GAEA"}

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

@@ -29,15 +29,24 @@ const tabSelectorVariant = cva("relative flex size-full flex-row items-center ga
 	} },
 	defaultVariants: { color: "primary" }
 });
-const indicatorVariant = cva("absolute top-0 z-[-1] h-full w-auto rounded-lg transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none", { variants: { color: {
-	primary: "bg-primary/10 aria-selected:text-text",
-	secondary: "bg-secondary/10 aria-selected:text-text",
-	destructive: "bg-destructive/10 aria-selected:text-text",
-	neutral: "bg-neutral/10 aria-selected:text-white/10",
-	light: "bg-white/10 aria-selected:text-black",
-	dark: "bg-neutral-800/10 aria-selected:text-white",
-	text: "bg-text/10 aria-selected:text-text-opposite"
-} } });
+const indicatorVariant = cva("absolute z-[-1] rounded-lg duration-300 ease-in-out motion-reduce:transition-none", {
+	variants: {
+		color: {
+			primary: "bg-primary/10 aria-selected:text-text",
+			secondary: "bg-secondary/10 aria-selected:text-text",
+			destructive: "bg-destructive/10 aria-selected:text-text",
+			neutral: "bg-neutral/10 aria-selected:text-white/10",
+			light: "bg-white/10 aria-selected:text-black",
+			dark: "bg-neutral-800/10 aria-selected:text-white",
+			text: "bg-text/10 aria-selected:text-text-opposite"
+		},
+		orientation: {
+			horizontal: "top-0 h-full w-auto transition-[left,width]",
+			vertical: "left-0 h-auto w-full transition-[top,height]"
+		}
+	},
+	defaultVariants: { orientation: "horizontal" }
+});
 /**
 *
 * Component that allows the user to select one of the provided choices.
@@ -55,16 +64,19 @@ const indicatorVariant = cva("absolute top-0 z-[-1] h-full w-auto rounded-lg tra
 * </TabSelector>
 * ```
 */
-const TabSelector = ({ tabs, selectedChoice, onTabClick, color = TabSelectorColor.PRIMARY, hoverable = false, className }) => {
+const TabSelector = ({ tabs, selectedChoice, onTabClick, color = TabSelectorColor.PRIMARY, hoverable = false, orientation = "horizontal", className }) => {
 	const optionsRefs = useRef([]);
 	const indicatorRef = useRef(null);
-	const { choiceIndicatorPosition, calculatePosition } = useItemSelector(optionsRefs, { isHoverable: hoverable });
+	const { choiceIndicatorPosition, calculatePosition } = useItemSelector(optionsRefs, {
+		isHoverable: hoverable,
+		orientation
+	});
 	useEffect(() => {
 		calculatePosition();
 	}, [selectedChoice, tabs]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn(tabSelectorVariant({ color }), className),
-		"aria-orientation": "horizontal",
+		"aria-orientation": orientation,
 		"aria-multiselectable": "false",
 		role: "tablist",
 		children: [tabs.map((Tab, index) => {
@@ -85,7 +97,10 @@ const TabSelector = ({ tabs, selectedChoice, onTabClick, color = TabSelectorColo
 				}
 			});
 		}), choiceIndicatorPosition && /* @__PURE__ */ jsx("div", {
-			className: cn(indicatorVariant({ color })),
+			className: cn(indicatorVariant({
+				color,
+				orientation
+			})),
 			style: choiceIndicatorPosition,
 			ref: indicatorRef
 		}, `${selectedChoice}${JSON.stringify(tabs.map((tab) => tab.key))}`)]

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

	@@ -1 +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 { useItemSelector } from '../../hooks';\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 ~~top-0~~ z-[-1] ~~h-full w-auto~~ rounded-lg ~~transition-[left,width]~~ 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 },\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} & 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 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 }\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~~=\"horizontal~~\"\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 })\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":";;;;;;;;;~~AAcA~~,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,~~iIACA~~,~~EACE,~~UAAU,EACR,OAAO;~~CACL~~,SAAS;~~CACT~~,WAAW;~~CACX~~,aAAa;~~CACb~~,SAAS;~~CACT~~,OAAO;~~CACP~~,MAAM;~~CACN~~,MAAM;~~CACP~~,~~EACF~~,EACF,CACF;;;;;;;;;;;;;;;;;;~~AAiCD~~,MAAa,eAA+C,EAC1D,MACA,gBACA,YACA,QAAQ,iBAAiB,SACzB,YAAY,OACZ,gBACyB;CACzB,MAAM,cAAc,OAAsB,EAAE,CAAC;CAC7C,MAAM,eAAe,OAA8B,KAAK;CACxD,MAAM,EAAE,yBAAyB,sBAAsB,gBACrD,aACA,EAAE,aAAa,~~WAAW,CAC3B~~;AAED,iBAAgB;AACd,qBAAmB;IAClB,CAAC,gBAAgB,KAAK,CAAC;AAE1B,QACE,qBAAC;EACC,WAAW,GACT,mBAAmB,EACjB,OACD,CAAC,EACF,UACD;EACD,~~oBAAiB~~;~~EACjB~~,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,~~EACf,OACD,~~CAAC,CACH;GACD,OAAO;GACP,KAAK;KACA,GAAG,iBAAiB,KAAK,UAAU,KAAK,KAAK,QAAQ,IAAI,IAAI,CAAC,GACnE;GAEA"}
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"}

package/dist/esm/hooks/useItemSelector.mjs CHANGED Viewed

@@ -4,9 +4,10 @@ import { useEffect, useState } from "react";
 //#region src/hooks/useItemSelector.ts
 const selectorDefault = (option) => option?.getAttribute("aria-selected") === "true";
-const useItemSelector = (optionsRefs, { selector = selectorDefault, isHoverable = false } = {
+const useItemSelector = (optionsRefs, { selector = selectorDefault, isHoverable = false, orientation = "horizontal" } = {
 	selector: selectorDefault,
-	isHoverable: false
+	isHoverable: false,
+	orientation: "horizontal"
 }) => {
 	const [choiceIndicatorPosition, setChoiceIndicatorPosition] = useState(null);
 	const [hoveredItem, setHoveredItem] = useState(null);
@@ -16,7 +17,13 @@ const useItemSelector = (optionsRefs, { selector = selectorDefault, isHoverable
 		if (hoveredItem) targetElement = hoveredItem;
 		else targetElement = optionsRefs.current.find(selector) ?? null;
 		if (!targetElement) {
-			setChoiceIndicatorPosition((prev) => ({
+			if (orientation === "vertical") setChoiceIndicatorPosition((prev) => ({
+				top: 0,
+				height: 0,
+				...prev,
+				opacity: 0
+			}));
+			else setChoiceIndicatorPosition((prev) => ({
 				left: 0,
 				width: 0,
 				...prev,
@@ -24,13 +31,23 @@ const useItemSelector = (optionsRefs, { selector = selectorDefault, isHoverable
 			}));
 			return;
 		}
-		const left = targetElement.offsetLeft;
-		const width = targetElement.offsetWidth;
-		setChoiceIndicatorPosition({
-			left,
-			width,
-			opacity: 1
-		});
+		if (orientation === "vertical") {
+			const top = targetElement.offsetTop;
+			const height = targetElement.offsetHeight;
+			setChoiceIndicatorPosition({
+				top,
+				height,
+				opacity: 1
+			});
+		} else {
+			const left = targetElement.offsetLeft;
+			const width = targetElement.offsetWidth;
+			setChoiceIndicatorPosition({
+				left,
+				width,
+				opacity: 1
+			});
+		}
 	};
 	useEffect(() => {
 		calculatePosition();
@@ -92,11 +109,13 @@ const useItemSelector = (optionsRefs, { selector = selectorDefault, isHoverable
 		optionsRefs,
 		selector,
 		hoveredItem,
-		itemsLength
+		itemsLength,
+		orientation
 	]);
 	return {
 		choiceIndicatorPosition,
-		calculatePosition
+		calculatePosition,
+		orientation
 	};
 };

package/dist/esm/hooks/useItemSelector.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useItemSelector.mjs","names":["targetElement: HTMLElement \| null","mutationObservers: MutationObserver[]","resizeObservers: ResizeObserver[]"],"sources":["../../../src/hooks/useItemSelector.ts"],"sourcesContent":["'use client';\n\nimport { type RefObject, useEffect, useState } from 'react';\n\ntype ~~StyleState~~ = {\n left: number;\n width: number;\n opacity: number;\n};\n\nconst selectorDefault = (option: HTMLElement) =>\n option?.getAttribute('aria-selected') === 'true';\n\ntype Options = {\n selector?: (option: HTMLElement, index: number) => boolean;\n isHoverable?: boolean;\n};\n\nexport const useItemSelector = (\n optionsRefs: RefObject<HTMLElement[]>,\n { selector = selectorDefault, isHoverable = false }: Options = {\n selector: selectorDefault,\n isHoverable: false,\n }\n) => {\n const [choiceIndicatorPosition, setChoiceIndicatorPosition] =\n useState<StyleState \| null>(null);\n\n const [hoveredItem, setHoveredItem] = useState<HTMLElement \| null>(null);\n\n const itemsLength = optionsRefs.current.length;\n\n const calculatePosition = () => {\n let targetElement: HTMLElement \| null = null;\n\n if (hoveredItem) {\n targetElement = hoveredItem;\n } else {\n targetElement = optionsRefs.current.find(selector) ?? null;\n }\n\n if (!targetElement) {\n setChoiceIndicatorPosition((prev) => ({\n left: 0,\n width: 0,\n ...prev,\n opacity: 0,\n }));\n return;\n }\n\n const left = targetElement.offsetLeft;\n const width = targetElement.offsetWidth;\n\n setChoiceIndicatorPosition({\n left,\n width,\n opacity: 1,\n });\n };\n\n useEffect(() => {\n calculatePosition();\n\n // Event listeners for window events\n window.addEventListener('resize', calculatePosition);\n window.addEventListener('DOMContentLoaded', calculatePosition);\n\n // MutationObserver to watch for 'aria-selected' changes\n const mutationObservers: MutationObserver[] = [];\n\n optionsRefs.current.forEach((option) => {\n if (option) {\n const observer = new MutationObserver((mutations) => {\n for (const mutation of mutations) {\n if (\n mutation.type === 'attributes' &&\n mutation.attributeName === 'aria-selected'\n ) {\n calculatePosition();\n break;\n }\n }\n });\n\n observer.observe(option, {\n attributes: true,\n attributeFilter: ['aria-selected'],\n });\n\n mutationObservers.push(observer);\n }\n });\n\n // ResizeObserver to watch for size changes\n const resizeObservers: ResizeObserver[] = [];\n\n const observeSize = (element: HTMLElement) => {\n if (!element) return;\n const resizeObserver = new ResizeObserver(() => {\n calculatePosition();\n });\n resizeObserver.observe(element);\n resizeObservers.push(resizeObserver);\n };\n\n // Observe the selected item\n const selectedItem = optionsRefs.current.find(selector) ?? null;\n\n if (selectedItem) {\n observeSize(selectedItem);\n }\n\n // Observe the hovered item\n if (hoveredItem) {\n observeSize(hoveredItem);\n }\n\n // Add hover event listeners\n const handleMouseEnter = (event: Event) => {\n setHoveredItem(event.currentTarget as HTMLElement);\n };\n\n const handleMouseLeave = () => {\n setHoveredItem(null);\n };\n\n if (isHoverable) {\n optionsRefs.current.forEach((option) => {\n option?.addEventListener('mouseenter', handleMouseEnter, {\n passive: true,\n });\n option?.addEventListener('mouseleave', handleMouseLeave, {\n passive: true,\n });\n });\n }\n\n return () => {\n // Cleanup window event listeners\n window.removeEventListener('resize', calculatePosition);\n window.removeEventListener('DOMContentLoaded', calculatePosition);\n\n // Disconnect MutationObservers\n mutationObservers.forEach((observer) => {\n observer.disconnect();\n });\n\n // Disconnect ResizeObservers\n resizeObservers.forEach((observer) => {\n observer.disconnect();\n });\n\n // Remove hover event listeners\n optionsRefs.current.forEach((option) => {\n option?.removeEventListener('mouseenter', handleMouseEnter);\n option?.removeEventListener('mouseleave', handleMouseLeave);\n });\n };\n }, [optionsRefs, selector, hoveredItem, itemsLength]);\n\n return { choiceIndicatorPosition, calculatePosition };\n};\n"],"mappings":";;;;;~~AAUA~~,MAAM,mBAAmB,WACvB,QAAQ,aAAa,gBAAgB,KAAK;~~AAO5C~~,MAAa,mBACX,aACA,~~EAAE~~,WAAW,~~iBAAiB~~,cAAc,~~UAAmB~~;~~CAC7D~~,UAAU;CACV,aAAa;CACd,KACE;CACH,MAAM,CAAC,yBAAyB,8BAC9B,SAA4B,KAAK;CAEnC,MAAM,CAAC,aAAa,kBAAkB,SAA6B,KAAK;CAExE,MAAM,cAAc,YAAY,QAAQ;CAExC,MAAM,0BAA0B;EAC9B,IAAIA,gBAAoC;AAExC,MAAI,YACF,iBAAgB;MAEhB,iBAAgB,YAAY,QAAQ,KAAK,SAAS,IAAI;AAGxD,MAAI,CAAC,eAAe;AAClB~~,+BAA4B~~,UAAU;IACpC,MAAM;IACN,OAAO;IACP,GAAG;IACH,SAAS;IACV,EAAE;~~AACH~~;;~~EAGF~~,MAAM,OAAO,cAAc;~~EAC3B~~,MAAM,QAAQ,cAAc;AAE5B,~~6BAA2B~~;~~GACzB~~;~~GACA~~;~~GACA~~,SAAS;~~GACV~~,CAAC~~;;AAGJ~~,iBAAgB;AACd,qBAAmB;AAGnB,SAAO,iBAAiB,UAAU,kBAAkB;AACpD,SAAO,iBAAiB,oBAAoB,kBAAkB;EAG9D,MAAMC,oBAAwC,EAAE;AAEhD,cAAY,QAAQ,SAAS,WAAW;AACtC,OAAI,QAAQ;IACV,MAAM,WAAW,IAAI,kBAAkB,cAAc;AACnD,UAAK,MAAM,YAAY,UACrB,KACE,SAAS,SAAS,gBAClB,SAAS,kBAAkB,iBAC3B;AACA,yBAAmB;AACnB;;MAGJ;AAEF,aAAS,QAAQ,QAAQ;KACvB,YAAY;KACZ,iBAAiB,CAAC,gBAAgB;KACnC,CAAC;AAEF,sBAAkB,KAAK,SAAS;;IAElC;EAGF,MAAMC,kBAAoC,EAAE;EAE5C,MAAM,eAAe,YAAyB;AAC5C,OAAI,CAAC,QAAS;GACd,MAAM,iBAAiB,IAAI,qBAAqB;AAC9C,uBAAmB;KACnB;AACF,kBAAe,QAAQ,QAAQ;AAC/B,mBAAgB,KAAK,eAAe;;EAItC,MAAM,eAAe,YAAY,QAAQ,KAAK,SAAS,IAAI;AAE3D,MAAI,aACF,aAAY,aAAa;AAI3B,MAAI,YACF,aAAY,YAAY;EAI1B,MAAM,oBAAoB,UAAiB;AACzC,kBAAe,MAAM,cAA6B;;EAGpD,MAAM,yBAAyB;AAC7B,kBAAe,KAAK;;AAGtB,MAAI,YACF,aAAY,QAAQ,SAAS,WAAW;AACtC,WAAQ,iBAAiB,cAAc,kBAAkB,EACvD,SAAS,MACV,CAAC;AACF,WAAQ,iBAAiB,cAAc,kBAAkB,EACvD,SAAS,MACV,CAAC;IACF;AAGJ,eAAa;AAEX,UAAO,oBAAoB,UAAU,kBAAkB;AACvD,UAAO,oBAAoB,oBAAoB,kBAAkB;AAGjE,qBAAkB,SAAS,aAAa;AACtC,aAAS,YAAY;KACrB;AAGF,mBAAgB,SAAS,aAAa;AACpC,aAAS,YAAY;KACrB;AAGF,eAAY,QAAQ,SAAS,WAAW;AACtC,YAAQ,oBAAoB,cAAc,iBAAiB;AAC3D,YAAQ,oBAAoB,cAAc,iBAAiB;KAC3D;;IAEH;EAAC;EAAa;EAAU;EAAa;EAAY,CAAC;~~AAErD~~,QAAO;EAAE;EAAyB;EAAmB"}
1	+ {"version":3,"file":"useItemSelector.mjs","names":["targetElement: HTMLElement \| null","mutationObservers: MutationObserver[]","resizeObservers: ResizeObserver[]"],"sources":["../../../src/hooks/useItemSelector.ts"],"sourcesContent":["'use client';\n\nimport { type RefObject, useEffect, useState } from 'react';\n\nexport type ItemSelectorOrientation = 'horizontal' \| 'vertical';\n\ntype HorizontalStyleState = {\n left: number;\n width: number;\n opacity: number;\n};\n\ntype VerticalStyleState = {\n top: number;\n height: number;\n opacity: number;\n};\n\ntype StyleState = HorizontalStyleState \| VerticalStyleState;\n\nconst selectorDefault = (option: HTMLElement) =>\n option?.getAttribute('aria-selected') === 'true';\n\ntype Options = {\n selector?: (option: HTMLElement, index: number) => boolean;\n isHoverable?: boolean;\n orientation?: ItemSelectorOrientation;\n};\n\nexport const useItemSelector = (\n optionsRefs: RefObject<HTMLElement[]>,\n {\n selector = selectorDefault,\n isHoverable = false,\n orientation = 'horizontal',\n }: Options = {\n selector: selectorDefault,\n isHoverable: false,\n orientation: 'horizontal',\n }\n) => {\n const [choiceIndicatorPosition, setChoiceIndicatorPosition] =\n useState<StyleState \| null>(null);\n\n const [hoveredItem, setHoveredItem] = useState<HTMLElement \| null>(null);\n\n const itemsLength = optionsRefs.current.length;\n\n const calculatePosition = () => {\n let targetElement: HTMLElement \| null = null;\n\n if (hoveredItem) {\n targetElement = hoveredItem;\n } else {\n targetElement = optionsRefs.current.find(selector) ?? null;\n }\n\n if (!targetElement) {\n if (orientation === 'vertical') {\n setChoiceIndicatorPosition((prev) => ({\n top: 0,\n height: 0,\n ...prev,\n opacity: 0,\n }));\n } else {\n setChoiceIndicatorPosition((prev) => ({\n left: 0,\n width: 0,\n ...prev,\n opacity: 0,\n }));\n }\n return;\n }\n\n if (orientation === 'vertical') {\n const top = targetElement.offsetTop;\n const height = targetElement.offsetHeight;\n\n setChoiceIndicatorPosition({\n top,\n height,\n opacity: 1,\n });\n } else {\n const left = targetElement.offsetLeft;\n const width = targetElement.offsetWidth;\n\n setChoiceIndicatorPosition({\n left,\n width,\n opacity: 1,\n });\n }\n };\n\n useEffect(() => {\n calculatePosition();\n\n // Event listeners for window events\n window.addEventListener('resize', calculatePosition);\n window.addEventListener('DOMContentLoaded', calculatePosition);\n\n // MutationObserver to watch for 'aria-selected' changes\n const mutationObservers: MutationObserver[] = [];\n\n optionsRefs.current.forEach((option) => {\n if (option) {\n const observer = new MutationObserver((mutations) => {\n for (const mutation of mutations) {\n if (\n mutation.type === 'attributes' &&\n mutation.attributeName === 'aria-selected'\n ) {\n calculatePosition();\n break;\n }\n }\n });\n\n observer.observe(option, {\n attributes: true,\n attributeFilter: ['aria-selected'],\n });\n\n mutationObservers.push(observer);\n }\n });\n\n // ResizeObserver to watch for size changes\n const resizeObservers: ResizeObserver[] = [];\n\n const observeSize = (element: HTMLElement) => {\n if (!element) return;\n const resizeObserver = new ResizeObserver(() => {\n calculatePosition();\n });\n resizeObserver.observe(element);\n resizeObservers.push(resizeObserver);\n };\n\n // Observe the selected item\n const selectedItem = optionsRefs.current.find(selector) ?? null;\n\n if (selectedItem) {\n observeSize(selectedItem);\n }\n\n // Observe the hovered item\n if (hoveredItem) {\n observeSize(hoveredItem);\n }\n\n // Add hover event listeners\n const handleMouseEnter = (event: Event) => {\n setHoveredItem(event.currentTarget as HTMLElement);\n };\n\n const handleMouseLeave = () => {\n setHoveredItem(null);\n };\n\n if (isHoverable) {\n optionsRefs.current.forEach((option) => {\n option?.addEventListener('mouseenter', handleMouseEnter, {\n passive: true,\n });\n option?.addEventListener('mouseleave', handleMouseLeave, {\n passive: true,\n });\n });\n }\n\n return () => {\n // Cleanup window event listeners\n window.removeEventListener('resize', calculatePosition);\n window.removeEventListener('DOMContentLoaded', calculatePosition);\n\n // Disconnect MutationObservers\n mutationObservers.forEach((observer) => {\n observer.disconnect();\n });\n\n // Disconnect ResizeObservers\n resizeObservers.forEach((observer) => {\n observer.disconnect();\n });\n\n // Remove hover event listeners\n optionsRefs.current.forEach((option) => {\n option?.removeEventListener('mouseenter', handleMouseEnter);\n option?.removeEventListener('mouseleave', handleMouseLeave);\n });\n };\n }, [optionsRefs, selector, hoveredItem, itemsLength, orientation]);\n\n return { choiceIndicatorPosition, calculatePosition, orientation };\n};\n"],"mappings":";;;;;AAoBA,MAAM,mBAAmB,WACvB,QAAQ,aAAa,gBAAgB,KAAK;AAQ5C,MAAa,mBACX,aACA,EACE,WAAW,iBACX,cAAc,OACd,cAAc,iBACH;CACX,UAAU;CACV,aAAa;CACb,aAAa;CACd,KACE;CACH,MAAM,CAAC,yBAAyB,8BAC9B,SAA4B,KAAK;CAEnC,MAAM,CAAC,aAAa,kBAAkB,SAA6B,KAAK;CAExE,MAAM,cAAc,YAAY,QAAQ;CAExC,MAAM,0BAA0B;EAC9B,IAAIA,gBAAoC;AAExC,MAAI,YACF,iBAAgB;MAEhB,iBAAgB,YAAY,QAAQ,KAAK,SAAS,IAAI;AAGxD,MAAI,CAAC,eAAe;AAClB,OAAI,gBAAgB,WAClB,6BAA4B,UAAU;IACpC,KAAK;IACL,QAAQ;IACR,GAAG;IACH,SAAS;IACV,EAAE;OAEH,6BAA4B,UAAU;IACpC,MAAM;IACN,OAAO;IACP,GAAG;IACH,SAAS;IACV,EAAE;AAEL;;AAGF,MAAI,gBAAgB,YAAY;GAC9B,MAAM,MAAM,cAAc;GAC1B,MAAM,SAAS,cAAc;AAE7B,8BAA2B;IACzB;IACA;IACA,SAAS;IACV,CAAC;SACG;GACL,MAAM,OAAO,cAAc;GAC3B,MAAM,QAAQ,cAAc;AAE5B,8BAA2B;IACzB;IACA;IACA,SAAS;IACV,CAAC;;;AAIN,iBAAgB;AACd,qBAAmB;AAGnB,SAAO,iBAAiB,UAAU,kBAAkB;AACpD,SAAO,iBAAiB,oBAAoB,kBAAkB;EAG9D,MAAMC,oBAAwC,EAAE;AAEhD,cAAY,QAAQ,SAAS,WAAW;AACtC,OAAI,QAAQ;IACV,MAAM,WAAW,IAAI,kBAAkB,cAAc;AACnD,UAAK,MAAM,YAAY,UACrB,KACE,SAAS,SAAS,gBAClB,SAAS,kBAAkB,iBAC3B;AACA,yBAAmB;AACnB;;MAGJ;AAEF,aAAS,QAAQ,QAAQ;KACvB,YAAY;KACZ,iBAAiB,CAAC,gBAAgB;KACnC,CAAC;AAEF,sBAAkB,KAAK,SAAS;;IAElC;EAGF,MAAMC,kBAAoC,EAAE;EAE5C,MAAM,eAAe,YAAyB;AAC5C,OAAI,CAAC,QAAS;GACd,MAAM,iBAAiB,IAAI,qBAAqB;AAC9C,uBAAmB;KACnB;AACF,kBAAe,QAAQ,QAAQ;AAC/B,mBAAgB,KAAK,eAAe;;EAItC,MAAM,eAAe,YAAY,QAAQ,KAAK,SAAS,IAAI;AAE3D,MAAI,aACF,aAAY,aAAa;AAI3B,MAAI,YACF,aAAY,YAAY;EAI1B,MAAM,oBAAoB,UAAiB;AACzC,kBAAe,MAAM,cAA6B;;EAGpD,MAAM,yBAAyB;AAC7B,kBAAe,KAAK;;AAGtB,MAAI,YACF,aAAY,QAAQ,SAAS,WAAW;AACtC,WAAQ,iBAAiB,cAAc,kBAAkB,EACvD,SAAS,MACV,CAAC;AACF,WAAQ,iBAAiB,cAAc,kBAAkB,EACvD,SAAS,MACV,CAAC;IACF;AAGJ,eAAa;AAEX,UAAO,oBAAoB,UAAU,kBAAkB;AACvD,UAAO,oBAAoB,oBAAoB,kBAAkB;AAGjE,qBAAkB,SAAS,aAAa;AACtC,aAAS,YAAY;KACrB;AAGF,mBAAgB,SAAS,aAAa;AACpC,aAAS,YAAY;KACrB;AAGF,eAAY,QAAQ,SAAS,WAAW;AACtC,YAAQ,oBAAoB,cAAc,iBAAiB;AAC3D,YAAQ,oBAAoB,cAAc,iBAAiB;KAC3D;;IAEH;EAAC;EAAa;EAAU;EAAa;EAAa;EAAY,CAAC;AAElE,QAAO;EAAE;EAAyB;EAAmB;EAAa"}

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import * as class_variance_authority_types0 from "class-variance-authority/types";
+import * as class_variance_authority_types10 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_types0.ClassProp) => string;
+} & class_variance_authority_types10.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 CHANGED Viewed

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

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

@@ -1,7 +1,7 @@
 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 * as class_variance_authority_types12 from "class-variance-authority/types";
 import { VariantProps } from "class-variance-authority";
 import { LocalesValues } from "@intlayer/types";
@@ -12,7 +12,7 @@ import { LocalesValues } from "@intlayer/types";
 declare const breadcrumbVariants: (props?: {
   size?: "small" | "medium" | "large";
   spacing?: "compact" | "normal" | "loose";
-} & class_variance_authority_types0.ClassProp) => string;
+} & class_variance_authority_types12.ClassProp) => string;
 /**
  * Detailed breadcrumb link configuration with optional href or onClick
  */

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/Breadcrumb/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;cAqDM,0BA+JgC;EA/JhC,IAAA,CAAA,EAAA,OAAA,GAAA,QAiBJ,GAAA,OAAA;EA0HG,OAAA,CAAA,EAAA,SAAA,GAAA,QAAsB,GAAA,OAAA;AAoB3B,CAAA,GA9IE~~,+BAAA~~,CAAA,SA8IoC,~~EAAsB~~,~~GAAA~~,MAAA;AAE5D;;;KAtBK,sBAAA,GA+BoB;EAId;;;EAyBP,IAAA,CAAA,EAAA,MAAA;EACa;;;EA4BJ,IAAA,EAAA,MAAA;;;;;;;;;;;KArED,cAAA,YAA0B;KAE1B,eAAA;;;;SAIH;;;;;UAKC,eAAe;;;;WAId;;;;;;;;;;cAUG;;;;;;;;;;;;;;;IAeV,oBAAoB,sBACtB,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;cA4BJ,YAAY,GAAG"}
1	+ {"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/Breadcrumb/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;cAqDM,0BA+JgC;EA/JhC,IAAA,CAAA,EAAA,OAAA,GAAA,QAiBJ,GAAA,OAAA;EA0HG,OAAA,CAAA,EAAA,SAAA,GAAA,QAAsB,GAAA,OAAA;AAoB3B,CAAA,GA9IE,gCAAA,CAAA,SA8IoC,EAAA,GAAsB,MAAA;AAE5D;;;KAtBK,sBAAA,GA+BoB;EAId;;;EAyBP,IAAA,CAAA,EAAA,MAAA;EACa;;;EA4BJ,IAAA,EAAA,MAAA;;;;;;;;;;;KArED,cAAA,YAA0B;KAE1B,eAAA;;;;SAIH;;;;;UAKC,eAAe;;;;WAId;;;;;;;;;;cAUG;;;;;;;;;;;;;;;IAeV,oBAAoB,sBACtB,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;cA4BJ,YAAY,GAAG"}

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

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

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

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

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

	@@ -1 +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;EA4ID,OAAA,GAAA,SAAW;EACA,OAAA,GAAA,SAAA;EAArB,OAAA,GAAA,SAAA;EACA,OAAA,GAAA,SAAA;;;;;AAYc,aApMJ,aAAA;EAyMI,OAAA,GAAA,SAAA;EAAK,IAAA,GAAA,MAAA;EAAU,OAAA,GAAA,SAAA;EA8FlB,IAAA,GAAA,MAkHZ;;;;;;;;;aA3YW,WAAA;;;;;;;;;;;;;;;;;;aAmBA,eAAA;;;;;;;;cASC;;;;;;;IAuIZ~~,+BAAA~~,CAAA;;;;KAKW,WAAA,GAAc,kBACxB,qBAAqB,oBACrB,qBAEA,oBAAoB;;;;;;;;;SAUX,KAAK;;;;cAKA,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA8FR,QAAQ,GAAG"}
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;EA4ID,OAAA,GAAA,SAAW;EACA,OAAA,GAAA,SAAA;EAArB,OAAA,GAAA,SAAA;EACA,OAAA,GAAA,SAAA;;;;;AAYc,aApMJ,aAAA;EAyMI,OAAA,GAAA,SAAA;EAAK,IAAA,GAAA,MAAA;EAAU,OAAA,GAAA,SAAA;EA8FlB,IAAA,GAAA,MAkHZ;;;;;;;;;aA3YW,WAAA;;;;;;;;;;;;;;;;;;aAmBA,eAAA;;;;;;;;cASC;;;;;;;IAuIZ,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 CHANGED Viewed

@@ -1,13 +1,13 @@
 import { FC, HTMLAttributes, ReactNode } from "react";
-import * as class_variance_authority_types11 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/CollapsibleTable/CollapsibleTable.d.ts
 declare const collapsibleTableVariants: (props?: {
   size?: "sm" | "md" | "lg" | "xl" | "full";
-  variant?: "dark" | "default" | "ghost" | "outlined";
+  variant?: "default" | "dark" | "ghost" | "outlined";
   spacing?: "sm" | "md" | "lg" | "none" | "auto";
-} & class_variance_authority_types11.ClassProp) => string;
+} & class_variance_authority_types14.ClassProp) => string;
 interface CollapsibleTableProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>, VariantProps<typeof collapsibleTableVariants> {
   /** Table title displayed in the header */
   title: string;

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

@@ -1,6 +1,6 @@
-import * as react6 from "react";
+import * as react9 from "react";
 import { ComponentProps, FC, HTMLAttributes } from "react";
-import * as react_jsx_runtime17 from "react/jsx-runtime";
+import * as react_jsx_runtime22 from "react/jsx-runtime";
 import { DialogProps } from "@radix-ui/react-dialog";
 import { Command as Command$1 } from "cmdk";
@@ -25,33 +25,33 @@ 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<react9.DetailedHTMLProps<react9.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof react9.InputHTMLAttributes<HTMLInputElement>> & {
     ref?: React.Ref<HTMLInputElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof react6.InputHTMLAttributes<HTMLInputElement> | "asChild">, "onChange" | "type" | "value"> & {
+  }, "key" | keyof react9.InputHTMLAttributes<HTMLInputElement> | "asChild">, "onChange" | "type" | "value"> & {
     value?: string;
     onValueChange?: (search: string) => void;
-  } & react6.RefAttributes<HTMLInputElement>>;
+  } & react9.RefAttributes<HTMLInputElement>>;
   List: FC<{
     children?: React.ReactNode;
-  } & Pick<Pick<react6.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HTMLAttributes<HTMLDivElement> | "key"> & {
+  } & Pick<Pick<react9.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HTMLAttributes<HTMLDivElement> | "key"> & {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
   }, keyof HTMLAttributes<HTMLDivElement> | "key" | "asChild"> & {
     label?: string;
-  } & react6.RefAttributes<HTMLDivElement>>;
+  } & react9.RefAttributes<HTMLDivElement>>;
   Empty: FC<{
     children?: React.ReactNode;
-  } & Pick<Pick<react6.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HTMLAttributes<HTMLDivElement> | "key"> & {
+  } & Pick<Pick<react9.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HTMLAttributes<HTMLDivElement> | "key"> & {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, keyof HTMLAttributes<HTMLDivElement> | "key" | "asChild"> & react6.RefAttributes<HTMLDivElement>>;
+  }, keyof HTMLAttributes<HTMLDivElement> | "key" | "asChild"> & react9.RefAttributes<HTMLDivElement>>;
   Group: FC<{
     children?: React.ReactNode;
-  } & Omit<Pick<Pick<react6.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HTMLAttributes<HTMLDivElement> | "key"> & {
+  } & Omit<Pick<Pick<react9.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HTMLAttributes<HTMLDivElement> | "key"> & {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
@@ -59,17 +59,17 @@ declare const Command: {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
-  } & react6.RefAttributes<HTMLDivElement>>;
-  Separator: FC<Pick<Pick<react6.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HTMLAttributes<HTMLDivElement> | "key"> & {
+  } & react9.RefAttributes<HTMLDivElement>>;
+  Separator: FC<Pick<Pick<react9.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HTMLAttributes<HTMLDivElement> | "key"> & {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
   }, keyof HTMLAttributes<HTMLDivElement> | "key" | "asChild"> & {
     alwaysRender?: boolean;
-  } & react6.RefAttributes<HTMLDivElement>>;
+  } & react9.RefAttributes<HTMLDivElement>>;
   Item: FC<{
     children?: React.ReactNode;
-  } & Omit<Pick<Pick<react6.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HTMLAttributes<HTMLDivElement> | "key"> & {
+  } & Omit<Pick<Pick<react9.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HTMLAttributes<HTMLDivElement> | "key"> & {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
@@ -79,11 +79,11 @@ declare const Command: {
     value?: string;
     keywords?: string[];
     forceMount?: boolean;
-  } & react6.RefAttributes<HTMLDivElement>>;
+  } & react9.RefAttributes<HTMLDivElement>>;
   Shortcut: ({
     className,
     ...props
-  }: HTMLAttributes<HTMLSpanElement>) => react_jsx_runtime17.JSX.Element;
+  }: HTMLAttributes<HTMLSpanElement>) => react_jsx_runtime22.JSX.Element;
   propTypes?: any;
   displayName?: string | undefined;
 };

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

@@ -1,5 +1,5 @@
 import { DetailedHTMLProps, FC, HTMLAttributes, PropsWithChildren } from "react";
-import * as class_variance_authority_types10 from "class-variance-authority/types";
+import * as class_variance_authority_types11 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?: "sm" | "md" | "lg" | "xl" | "none" | "2xl" | "3xl" | "full";
+  roundedSize?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full";
   transparency?: "sm" | "md" | "lg" | "xl" | "none" | "full";
-  padding?: "sm" | "md" | "lg" | "xl" | "none" | "2xl";
+  padding?: "sm" | "md" | "lg" | "xl" | "2xl" | "none";
   separator?: "without" | "x" | "y" | "both";
-  border?: "none" | "with";
-  borderColor?: "primary" | "secondary" | "neutral" | "text" | "error" | "success" | "warning";
-  background?: "none" | "hoverable" | "with";
-  gap?: "sm" | "md" | "lg" | "xl" | "none" | "2xl";
-} & class_variance_authority_types10.ClassProp) => string;
+  border?: "with" | "none";
+  borderColor?: "error" | "text" | "primary" | "secondary" | "neutral" | "success" | "warning";
+  background?: "with" | "none" | "hoverable";
+  gap?: "sm" | "md" | "lg" | "xl" | "2xl" | "none";
+} & class_variance_authority_types11.ClassProp) => string;
 /** Available rounded corner sizes for the container */
 declare enum ContainerRoundedSize {
   NONE = "none",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/Container/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AAaA;AA4EY,cA5EC,iBA4EmB,EAAA,CAAA,KAoEzB,CApEyB,EAAA;EAYpB,WAAA,CAAA,EAAA,IAAA,GAAA,IAAqB,GAAA,IAAA,GAAA,IAAA,GAAA,~~MAAA~~,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,~~SAAY~~,GAAA,~~WAAA~~,GAAA,SAAA,GAAA,~~MAAA~~,GAAA,~~OAAA~~,GAAA,SAAA,GAAA,SAAA;EAUZ,UAAA,CAAA,EAAA,MAAc,GAAA,~~WAAA~~,GAAA,~~MAAA~~;EACC,GAAA,CAAA,EAAA,IAAA,GAAA,IAAA,GAAA,IAAA,GAAA,IAAA,GAAA,~~MAAA~~,GAAA,~~KAAA~~;CAApB,GAvEL,gCAAA,CAAA,SAuEK,EAAA,GAAA,MAAA;;AADsB,aAnEjB,oBAAA;EAsEuB,IAAA,GAAA,MAAA;EAAf,EAAA,GAAA,IAAA;EAAgC,EAAA,GAAA,IAAA;EAAlD,EAAA,GAAA,IAAA;EAAiB,EAAA,GAAA,IAAA;EAkCN,MAAA,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"}
1	+ {"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/Container/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AAaA;AA4EY,cA5EC,iBA4EmB,EAAA,CAAA,KAoEzB,CApEyB,EAAA;EAYpB,WAAA,CAAA,EAAA,IAAA,GAAA,IAAqB,GAAA,IAAA,GAAA,IAAA,GAAA,KAAA,GAAA,MAAA,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,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,OAAY,GAAA,MAAA,GAAA,SAAA,GAAA,WAAA,GAAA,SAAA,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,GAvEL,gCAAA,CAAA,SAuEK,EAAA,GAAA,MAAA;;AADsB,aAnEjB,oBAAA;EAsEuB,IAAA,GAAA,MAAA;EAAf,EAAA,GAAA,IAAA;EAAgC,EAAA,GAAA,IAAA;EAAlD,EAAA,GAAA,IAAA;EAAiB,EAAA,GAAA,IAAA;EAkCN,MAAA,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 CHANGED Viewed

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