@intlayer/design-system 8.1.5 → 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 (17) hide show
  1. package/dist/esm/components/Breadcrumb/index.mjs +1 -1
  2. package/dist/esm/components/Breadcrumb/index.mjs.map +1 -1
  3. package/dist/esm/components/Tab/Tab.mjs +1 -1
  4. package/dist/esm/components/Tab/Tab.mjs.map +1 -1
  5. package/dist/types/components/Button/Button.d.ts +3 -3
  6. package/dist/types/components/CollapsibleTable/CollapsibleTable.d.ts +2 -2
  7. package/dist/types/components/Command/index.d.ts +2 -2
  8. package/dist/types/components/Container/index.d.ts +7 -7
  9. package/dist/types/components/Input/Checkbox.d.ts +1 -1
  10. package/dist/types/components/Link/Link.d.ts +3 -3
  11. package/dist/types/components/Pagination/Pagination.d.ts +2 -2
  12. package/dist/types/components/SwitchSelector/index.d.ts +1 -1
  13. package/dist/types/components/Tab/Tab.d.ts +1 -1
  14. package/dist/types/components/TabSelector/TabSelector.d.ts +1 -1
  15. package/dist/types/components/Tag/index.d.ts +2 -2
  16. package/dist/types/components/Toaster/Toast.d.ts +1 -1
  17. package/package.json +14 -14
package/dist/esm/components/Breadcrumb/index.mjs CHANGED
@@ -1,2 +1,2 @@
1
- "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};
1
+ "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};
2
2
  //# sourceMappingURL=index.mjs.map
package/dist/esm/components/Breadcrumb/index.mjs.map CHANGED
@@ -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":"seAoDA,MAAM,EAAiB,GAChB,GAEuC,EACzC,EAAU,SAAU,gBACpB,EAAU,WAAY,kBACtB,EAAU,aAAc,oBACxB,EAAU,SAAU,gBACpB,EAAU,OAAQ,cAClB,EAAU,MAAO,oBACjB,EAAU,MAAO,aACjB,EAAU,cAAe,sBACzB,EAAU,OAAQ,cAClB,EAAU,SAAU,gBACpB,EAAU,QAAS,GACrB,CAEe,IAhBG,GAsBf,EAAqB,EAAI,+CAAgD,CAC7E,SAAU,CACR,KAAM,CACJ,MAAO,gBACP,OAAQ,gBACR,MAAO,kBACR,CACD,QAAS,CACP,QAAS,QACT,OAAQ,QACR,MAAO,QACR,CACF,CACD,gBAAiB,CACf,KAAM,SACN,QAAS,SACV,CACF,CAAC,CAKI,GAA+B,CACnC,OACA,OACA,WACA,UACA,QACA,WACA,SACA,YACA,GAAG,KACC,CAEJ,IAAM,EADU,EAAY,aAAa,CACf,UAE1B,OACE,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,EAAA,CACO,OACE,SACD,QACE,UACT,SAAS,OACT,eAAgB,GAChB,UAAA,GACA,SAAS,6BACT,GAAI,EACJ,MAAO,GAAG,EAAU,GAAG,IACvB,OAAQ,EACR,KAAK,cAEL,EAAC,OAAA,CAAK,SAAS,OAAQ,YAAgB,EAClC,CACP,EAAC,OAAA,CAAK,SAAS,WAAW,QAAS,EAAS,UAAU,EAAI,CAAA,CAAA,CACzD,EAqBD,GAAqC,CACzC,SAAU,EACV,UACA,QACA,WACA,YACA,GAAG,KACC,CACJ,GAAM,CAAE,aAAc,EAAY,aAAa,CAE/C,OACE,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,EAAA,CACU,UACT,QAAS,EAAc,KACvB,MAAO,GAAG,EAAU,GAAG,IAChB,QACP,SAAS,OACT,GAAI,WAEJ,EAAC,OAAA,CAAK,SAAS,gBAAQ,GAAY,EAC5B,CACT,EAAC,OAAA,CAAK,SAAS,WAAW,QAAS,EAAS,UAAU,EAAI,CAAA,CAAA,CACzD,EAqBD,GAAuB,CAAE,WAAU,WAAU,YAAW,GAAG,KAC/D,EAAC,OAAA,CACC,SAAS,OACT,UAAW,EACT,2BACA,+BACA,iCACA,EACD,WAED,EAAC,OAAA,CAAK,SAAS,OAAO,GAAI,EACvB,YACI,CACP,EAAC,OAAA,CAAK,SAAS,WAAW,QAAS,EAAS,UAAU,EAAI,CAAA,EACrD,CA+FI,GAAmC,CAC9C,QACA,YACA,QAAQ,EAAU,KAClB,SACA,cAAc,OACd,YAAY,EAAC,EAAA,CAAiB,KAAM,GAAA,CAAM,CAC1C,YAAY,aACZ,wBAAwB,GACxB,WACA,OACA,UACA,GAAG,KACC,CACJ,IAAM,EACJ,GAAY,EAAM,OAAS,EACvB,CAAC,GAAG,EAAM,MAAM,EAAG,EAAE,CAAE,MAAO,GAAG,EAAM,MAAM,EAAE,EAAW,GAAG,CAAC,CAC9D,EAEN,OACE,EAAC,MAAA,CAAI,aAAY,WACf,EAAC,KAAA,CACC,UAAW,EAAG,EAAmB,CAAE,OAAM,UAAS,CAAC,CAAE,EAAU,CAC/D,GAAK,GAAyB,CAC5B,UAAW,GACX,SAAU,mCACX,CACD,GAAI,WAEH,EAAa,KAAK,EAAM,IAAU,CACjC,IAAM,EAAa,IAAU,EAAa,OAAS,EAC7C,EACJ,OAAO,GAAS,UAAY,OAAO,EAAK,MAAS,SAC7C,EACJ,OAAO,GAAS,UAAY,OAAO,EAAK,SAAY,WAChD,EAAW,IAAU,EAAa,OAAS,EAC3C,EAAc,EAAW,EAAc,IAAA,GACvC,EAAc,IAAS,MAEvB,EAAQ,EAAgC,MAAQ,EAEhD,EAAsB,EAAc,EAAM,CAEhD,GAAI,EACF,OACE,EAAC,EAAA,CAAA,SAAA,CACC,EAAC,KAAA,CAAG,UAAU,oBAAoB,cAAY,gBAC5C,EAAC,OAAA,CAAK,UAAU,4BAAmB,KAAQ,EACxC,CACJ,CAAC,GACA,EAAC,KAAA,CAAG,cAAY,OAAO,UAAU,6BAC/B,EAAC,OAAA,CAAK,UAAW,EAAG,EAAoB,UAAG,GAAiB,EACzD,CAAA,CAAA,CAPM,aAAa,IASjB,CAIf,IAAI,EACF,EAAC,EAAA,CAEC,SAAU,EAAQ,EAClB,eAAc,EACd,UAAW,EACT,iCACA,GAAY,mBACb,UAEA,GARI,EASA,CAGL,EACF,EACE,EAAC,EAAA,CAEC,KAAM,EAAK,KACJ,QACP,SAAU,EAAQ,EACV,SACR,eAAc,EACd,UAAW,EAAG,GAAY,kCAAkC,UAE3D,GARI,EASI,CAEJ,IACT,EACE,EAAC,EAAA,CAEC,QAAS,EAAK,QACP,QACP,SAAU,EAAQ,EAClB,eAAc,EACd,UAAW,EAAG,GAAY,kCAAkC,UAE3D,GAPI,EAQM,EAIjB,IAAM,EACJ,EAAC,KAAA,CACC,GAAK,GAAyB,CAC5B,SAAU,kBACV,UAAW,GACX,SAAU,8BACX,CACD,IAAK,EACL,UAAU,qBAET,EACE,CAOP,OAJI,EACK,EAIP,EAAC,EAAA,CAAA,SAAA,CACE,EACD,EAAC,KAAA,CAAG,cAAY,OAAO,UAAU,6BAC/B,EAAC,OAAA,CAAK,UAAW,EAAG,EAAoB,UAAG,GAAiB,EACzD,CAAA,CAAA,CAJQ,EAKJ,EAEb,EACC,EACD"}
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
@@ -1,2 +1,2 @@
1
- "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};
1
+ "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};
2
2
  //# sourceMappingURL=Tab.mjs.map
package/dist/esm/components/Tab/Tab.mjs.map CHANGED
@@ -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/Button/Button.d.ts CHANGED
@@ -61,9 +61,9 @@ declare enum ButtonTextAlign {
61
61
  */
62
62
  declare const buttonVariants: (props?: {
63
63
  size?: "md" | "sm" | "lg" | "xl" | "icon-sm" | "icon-md" | "icon-lg" | "icon-xl";
64
- color?: "primary" | "success" | "error" | "neutral" | "text" | "secondary" | "destructive" | "light" | "dark" | "text-inverse" | "custom" | "card" | "current";
65
- roundedSize?: "md" | "none" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "full" | "4xl" | "5xl";
66
- variant?: "default" | "none" | "invisible-link" | "hoverable" | "input" | "outline" | "link" | "fade";
64
+ color?: "primary" | "secondary" | "destructive" | "neutral" | "card" | "light" | "dark" | "text" | "current" | "text-inverse" | "error" | "success" | "custom";
65
+ roundedSize?: "none" | "md" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "full";
66
+ variant?: "none" | "default" | "outline" | "link" | "invisible-link" | "hoverable" | "fade" | "input";
67
67
  textAlign?: "left" | "center" | "right";
68
68
  isFullWidth?: boolean;
69
69
  } & class_variance_authority_types0.ClassProp) => string;
package/dist/types/components/CollapsibleTable/CollapsibleTable.d.ts CHANGED
@@ -5,8 +5,8 @@ import { VariantProps } from "class-variance-authority";
5
5
  //#region src/components/CollapsibleTable/CollapsibleTable.d.ts
6
6
  declare const collapsibleTableVariants: (props?: {
7
7
  size?: "sm" | "md" | "lg" | "xl" | "full";
8
- variant?: "default" | "ghost" | "dark" | "outlined";
9
- spacing?: "sm" | "md" | "lg" | "none" | "auto";
8
+ variant?: "dark" | "default" | "ghost" | "outlined";
9
+ spacing?: "none" | "sm" | "md" | "lg" | "auto";
10
10
  } & class_variance_authority_types0.ClassProp) => string;
11
11
  interface CollapsibleTableProps extends Omit<HTMLAttributes<HTMLElement>, 'title'>, VariantProps<typeof collapsibleTableVariants> {
12
12
  /** Table title displayed in the header */
package/dist/types/components/Command/index.d.ts CHANGED
@@ -29,7 +29,7 @@ declare const Command: {
29
29
  ref?: React.Ref<HTMLInputElement>;
30
30
  } & {
31
31
  asChild?: boolean;
32
- }, "key" | keyof react.InputHTMLAttributes<HTMLInputElement> | "asChild">, "type" | "onChange" | "value"> & {
32
+ }, "key" | keyof react.InputHTMLAttributes<HTMLInputElement> | "asChild">, "type" | "value" | "onChange"> & {
33
33
  value?: string;
34
34
  onValueChange?: (search: string) => void;
35
35
  } & react.RefAttributes<HTMLInputElement>>;
@@ -73,7 +73,7 @@ declare const Command: {
73
73
  ref?: React.Ref<HTMLDivElement>;
74
74
  } & {
75
75
  asChild?: boolean;
76
- }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
76
+ }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild">, "disabled" | "value" | "onSelect"> & {
77
77
  disabled?: boolean;
78
78
  onSelect?: (value: string) => void;
79
79
  value?: string;
package/dist/types/components/Container/index.d.ts CHANGED
@@ -8,14 +8,14 @@ import { VariantProps } from "class-variance-authority";
8
8
  * Provides flexible styling options for background, padding, borders, and layout
9
9
  */
10
10
  declare const containerVariants: (props?: {
11
- roundedSize?: "sm" | "md" | "lg" | "none" | "xl" | "2xl" | "3xl" | "full" | "4xl";
12
- transparency?: "sm" | "md" | "lg" | "none" | "xl" | "full" | "xs";
13
- padding?: "sm" | "md" | "lg" | "none" | "xl" | "2xl";
14
- separator?: "both" | "without" | "x" | "y";
11
+ roundedSize?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full";
12
+ transparency?: "none" | "sm" | "md" | "lg" | "xl" | "full" | "xs";
13
+ padding?: "none" | "sm" | "md" | "lg" | "xl" | "2xl";
14
+ separator?: "without" | "x" | "y" | "both";
15
15
  border?: "none" | "with";
16
- borderColor?: "text" | "primary" | "secondary" | "neutral" | "success" | "error" | "warning" | "card";
17
- background?: "hoverable" | "none" | "with";
18
- gap?: "sm" | "md" | "lg" | "none" | "xl" | "2xl";
16
+ borderColor?: "text" | "primary" | "secondary" | "neutral" | "card" | "error" | "success" | "warning";
17
+ background?: "none" | "with" | "hoverable";
18
+ gap?: "none" | "sm" | "md" | "lg" | "xl" | "2xl";
19
19
  } & class_variance_authority_types0.ClassProp) => string;
20
20
  /** Available rounded corner sizes for the container */
21
21
  declare enum ContainerRoundedSize {
package/dist/types/components/Input/Checkbox.d.ts CHANGED
@@ -6,7 +6,7 @@ import { VariantProps } from "class-variance-authority";
6
6
  declare const checkboxVariants: (props?: {
7
7
  variant?: "default";
8
8
  size?: "sm" | "md" | "lg" | "xs";
9
- color?: "text" | "primary" | "secondary" | "neutral" | "destructive" | "light" | "dark" | "success" | "error" | "custom";
9
+ color?: "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "error" | "success" | "custom";
10
10
  validationStyleEnabled?: "disabled" | "enabled";
11
11
  } & class_variance_authority_types0.ClassProp) => string;
12
12
  declare enum CheckboxSize {
package/dist/types/components/Link/Link.d.ts CHANGED
@@ -53,9 +53,9 @@ declare enum LinkUnderlined {
53
53
  FALSE = "false"
54
54
  }
55
55
  declare const linkVariants: (props?: {
56
- variant?: "default" | "invisible-link" | "button" | "button-outlined" | "hoverable";
57
- roundedSize?: "md" | "none" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "full";
58
- color?: "primary" | "success" | "error" | "neutral" | "text" | "secondary" | "destructive" | "light" | "dark" | "text-inverse" | "custom";
56
+ variant?: "default" | "invisible-link" | "hoverable" | "button" | "button-outlined";
57
+ roundedSize?: "none" | "md" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "full";
58
+ color?: "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "text" | "text-inverse" | "error" | "success" | "custom";
59
59
  size?: "md" | "sm" | "lg" | "xl" | "custom";
60
60
  underlined?: boolean | LinkUnderlined.DEFAULT;
61
61
  } & class_variance_authority_types0.ClassProp) => string;
package/dist/types/components/Pagination/Pagination.d.ts CHANGED
@@ -5,8 +5,8 @@ import { VariantProps } from "class-variance-authority";
5
5
  //#region src/components/Pagination/Pagination.d.ts
6
6
  declare const paginationVariants: (props?: {
7
7
  size?: "sm" | "md" | "lg";
8
- color?: "text" | "primary" | "secondary" | "neutral" | "destructive";
9
- variant?: "default" | "bordered" | "ghost";
8
+ color?: "text" | "primary" | "secondary" | "destructive" | "neutral";
9
+ variant?: "default" | "ghost" | "bordered";
10
10
  } & class_variance_authority_types0.ClassProp) => string;
11
11
  declare enum PaginationSize {
12
12
  SM = "sm",
package/dist/types/components/SwitchSelector/index.d.ts CHANGED
@@ -28,7 +28,7 @@ declare enum SwitchSelectorColor {
28
28
  TEXT = "text"
29
29
  }
30
30
  declare const switchSelectorVariant: (props?: {
31
- color?: "primary" | "neutral" | "text" | "secondary" | "destructive" | "light" | "dark";
31
+ color?: "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "text";
32
32
  disabled?: boolean;
33
33
  } & class_variance_authority_types0.ClassProp) => string;
34
34
  declare enum SwitchSelectorSize {
package/dist/types/components/Tab/Tab.d.ts CHANGED
@@ -6,7 +6,7 @@ import * as react_jsx_runtime0 from "react/jsx-runtime";
6
6
  //#region src/components/Tab/Tab.d.ts
7
7
  declare const tabContainerVariant: (props?: {
8
8
  background?: "with" | "without";
9
- variant?: "default" | "bordered" | "ghost";
9
+ variant?: "default" | "ghost" | "bordered";
10
10
  } & class_variance_authority_types0.ClassProp) => string;
11
11
  type TabProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof tabContainerVariant> & {
12
12
  defaultTab?: string;
package/dist/types/components/TabSelector/TabSelector.d.ts CHANGED
@@ -15,7 +15,7 @@ declare enum TabSelectorColor {
15
15
  TEXT = "text"
16
16
  }
17
17
  declare const tabSelectorVariant: (props?: {
18
- color?: "text" | "primary" | "secondary" | "neutral" | "destructive" | "light" | "dark";
18
+ color?: "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark";
19
19
  } & class_variance_authority_types0.ClassProp) => string;
20
20
  type TabSelectorItemProps = HTMLAttributes<HTMLElement> & {
21
21
  key: string | number;
package/dist/types/components/Tag/index.d.ts CHANGED
@@ -185,8 +185,8 @@ declare enum TagBackground {
185
185
  WITH = "with"
186
186
  }
187
187
  declare const containerVariants: (props?: {
188
- roundedSize?: "md" | "none" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "full";
189
- color?: "primary" | "success" | "error" | "warning" | "neutral" | "text" | "blue" | "yellow" | "green" | "red" | "orange" | "purple" | "pink" | "brown" | "gray" | "black" | "white";
188
+ roundedSize?: "none" | "md" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "full";
189
+ color?: "primary" | "neutral" | "text" | "error" | "success" | "warning" | "blue" | "yellow" | "green" | "red" | "orange" | "purple" | "pink" | "brown" | "gray" | "black" | "white";
190
190
  size?: "md" | "sm" | "lg" | "xl" | "xs";
191
191
  border?: "none" | "with";
192
192
  background?: "none" | "with";
package/dist/types/components/Toaster/Toast.d.ts CHANGED
@@ -25,7 +25,7 @@ declare const ToastViewport: FC<ComponentProps<typeof ToastPrimitives.Viewport>>
25
25
  * ```
26
26
  */
27
27
  declare const toastVariants: (props?: {
28
- variant?: "default" | "success" | "error";
28
+ variant?: "error" | "success" | "default";
29
29
  } & class_variance_authority_types0.ClassProp) => string;
30
30
  /**
31
31
  * Toast Component
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@intlayer/design-system",
3
- "version": "8.1.5",
3
+ "version": "8.1.7",
4
4
  "private": false,
5
5
  "description": "Intlayer design system, including UI components used in the Intlayer editor, website, and visual editor/CMS.",
6
6
  "keywords": [
@@ -105,12 +105,12 @@
105
105
  "dependencies": {
106
106
  "@better-auth/passkey": "1.4.18",
107
107
  "@better-auth/sso": "1.4.18",
108
- "@intlayer/api": "8.1.5",
109
- "@intlayer/config": "8.1.4",
110
- "@intlayer/core": "8.1.4",
111
- "@intlayer/dictionaries-entry": "8.1.5",
112
- "@intlayer/editor-react": "8.1.5",
113
- "@intlayer/types": "8.1.4",
108
+ "@intlayer/api": "8.1.7",
109
+ "@intlayer/config": "8.1.7",
110
+ "@intlayer/core": "8.1.7",
111
+ "@intlayer/dictionaries-entry": "8.1.7",
112
+ "@intlayer/editor-react": "8.1.7",
113
+ "@intlayer/types": "8.1.7",
114
114
  "@radix-ui/react-dialog": "1.1.15",
115
115
  "@radix-ui/react-select": "2.2.6",
116
116
  "@radix-ui/react-slot": "1.2.4",
@@ -119,12 +119,12 @@
119
119
  "bun": "1.3.2",
120
120
  "class-variance-authority": "0.7.1",
121
121
  "cmdk": "1.1.1",
122
- "react-intlayer": "8.1.4",
122
+ "react-intlayer": "8.1.7",
123
123
  "rollup-preserve-directives": "1.1.3",
124
124
  "zod": "4.3.6"
125
125
  },
126
126
  "devDependencies": {
127
- "@intlayer/backend": "8.1.4",
127
+ "@intlayer/backend": "8.1.7",
128
128
  "@shikijs/transformers": "3.22.0",
129
129
  "@storybook/addon-a11y": "8.6.14",
130
130
  "@storybook/addon-essentials": "8.6.14",
@@ -154,14 +154,14 @@
154
154
  "@utils/ts-config": "1.0.4",
155
155
  "@utils/ts-config-types": "1.0.4",
156
156
  "fast-glob": "3.3.3",
157
- "intlayer": "8.1.4",
157
+ "intlayer": "8.1.7",
158
158
  "rimraf": "6.1.3",
159
159
  "shiki": "3.22.0",
160
160
  "storybook": "8.6.17",
161
161
  "tsdown": "0.20.3",
162
162
  "typescript": "5.9.3",
163
163
  "vite": "7.3.1",
164
- "vite-intlayer": "8.1.4",
164
+ "vite-intlayer": "8.1.7",
165
165
  "vite-plugin-dts": "4.5.4",
166
166
  "vite-tsconfig-paths": "6.1.1",
167
167
  "vitest": "4.0.18"
@@ -169,7 +169,7 @@
169
169
  "peerDependencies": {
170
170
  "@better-fetch/fetch": "1.1.21",
171
171
  "@hookform/resolvers": "5.2.2",
172
- "@intlayer/backend": "8.1.4",
172
+ "@intlayer/backend": "8.1.7",
173
173
  "@monaco-editor/react": "4.7.0",
174
174
  "@shikijs/transformers": "3.22.0",
175
175
  "@tanstack/react-query": "5.90.21",
@@ -177,12 +177,12 @@
177
177
  "clsx": "2.1.1",
178
178
  "framer-motion": "12.34.3",
179
179
  "fuse.js": "7.1.0",
180
- "intlayer": "8.1.4",
180
+ "intlayer": "8.1.7",
181
181
  "lucide-react": "0.575.0",
182
182
  "react": ">=16.0.0",
183
183
  "react-dom": ">=16.0.0",
184
184
  "react-hook-form": "7.71.2",
185
- "react-intlayer": "8.1.4",
185
+ "react-intlayer": "8.1.7",
186
186
  "shiki": "3.22.0",
187
187
  "tailwind-merge": "3.5.0",
188
188
  "tailwindcss": "4.2.0"