npm - @intlayer/design-system - Versions diffs - 8.1.6 → 8.1.7 - Mend

@intlayer/design-system 8.1.6 → 8.1.7

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 (40) hide show

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -60,10 +60,10 @@ declare enum ButtonTextAlign {
  * Enhanced button variants with improved accessibility and focus states
  */
 declare const buttonVariants: (props?: {
-  size?: "sm" | "md" | "lg" | "xl" | "icon-sm" | "icon-md" | "icon-lg" | "icon-xl";
+  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?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "4xl" | "5xl" | "full";
-  variant?: "default" | "none" | "outline" | "link" | "invisible-link" | "hoverable" | "fade" | "input";
+  roundedSize?: "none" | "md" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "full";
+  variant?: "none" | "default" | "outline" | "link" | "invisible-link" | "hoverable" | "fade" | "input";
   textAlign?: "left" | "center" | "right";
   isFullWidth?: boolean;
 } & class_variance_authority_types0.ClassProp) => string;

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

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

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

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

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

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

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

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

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

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

package/dist/types/components/DictionaryFieldEditor/DictionaryCreationForm/useDictionaryFormSchema.content.d.ts CHANGED Viewed

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