npm - @intlayer/design-system - Versions diffs - 9.0.0-canary.8 → 9.0.0 - Mend

@intlayer/design-system 9.0.0-canary.8 → 9.0.0

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/SocialNetworks/index.tsx"],"sourcesContent":["import type {\n AnchorHTMLAttributes,\n DetailedHTMLProps,\n FC,\n ReactNode,\n} from 'react';\nimport { DiscordLogo } from './DiscordLogo';\nimport { InstagramLogo } from './InstagramLogo';\nimport { LinkedInLogo } from './LinkedInLogo';\nimport { ProductHuntLogo } from './ProductHuntLogo';\nimport { TiktokLogo } from './TiktokLogo';\nimport { XLogo } from './XLogo';\nimport { YoutubeLogo } from './YoutubeLogo';\n\nconst socialNetworks = [\n {\n href: 'https://discord.gg/7uxamYVeCk',\n component: <DiscordLogo className=\"h-auto max-h-full max-w-full\" />,\n label: 'Discord',\n },\n {\n href: 'https://www.producthunt.com/posts/intlayer?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-intlayer',\n component: <ProductHuntLogo className=\"h-auto max-h-full max-w-full\" />,\n label: 'Product Hunt',\n },\n {\n href: 'https://x.com/Intlayer183096',\n component: <XLogo className=\"h-auto max-h-full max-w-full\" />,\n label: 'X',\n },\n {\n href: 'https://www.youtube.com/@intlayer',\n component: <YoutubeLogo className=\"h-auto max-h-full max-w-full\" />,\n label: 'YouTube',\n },\n {\n href: 'https://www.linkedin.com/company/intlayerorg',\n component: <LinkedInLogo className=\"h-auto max-h-full max-w-full\" />,\n label: 'LinkedIn',\n },\n {\n href: 'https://www.tiktok.com/@intlayer',\n component: <TiktokLogo className=\"h-auto max-h-full max-w-full\" />,\n label: 'TikTok',\n },\n {\n href: 'https://www.instagram.com/intlayer/',\n component: <InstagramLogo className=\"h-auto max-h-full max-w-full\" />,\n label: 'Instagram',\n },\n // {\n // href: 'https://www.facebook.com/intlayer',\n // component: <FacebookLogo className=\"h-auto max-h-full max-w-full\" />,\n // label: 'Facebook',\n // },\n];\n\ntype SocialNetworksProps = {\n renderItem?: (item: (typeof socialNetworks)[number]) => ReactNode;\n} & DetailedHTMLProps<\n AnchorHTMLAttributes<HTMLAnchorElement>,\n HTMLAnchorElement\n>;\n\ntype DefaultRenderItemProps = DetailedHTMLProps<\n AnchorHTMLAttributes<HTMLAnchorElement>,\n HTMLAnchorElement\n> & {\n component: ReactNode;\n label: string;\n};\n\nconst DefaultRenderItem: FC<DefaultRenderItemProps> = ({\n href,\n component,\n label,\n ...iconProps\n}) => (\n <a\n key={href}\n href={href}\n aria-label={label}\n className=\"max-h-4 max-w-4 shrink-0\"\n {...iconProps}\n >\n {component}\n </a>\n);\n\nexport const SocialNetworks = ({\n renderItem,\n ...iconProps\n}: SocialNetworksProps) =>\n socialNetworks.map(\n renderItem ??\n ((props) => (\n <DefaultRenderItem {...props} {...iconProps} key={props.label} />\n ))\n );\n\nexport * from './BitbucketLogo';\nexport * from './DiscordLogo';\nexport * from './FacebookLogo';\nexport * from './GitHubLogo';\nexport * from './GitLabLogo';\nexport * from './GoogleLogo';\nexport * from './InstagramLogo';\nexport * from './LinkedInLogo';\nexport * from './ProductHuntLogo';\nexport * from './TiktokLogo';\nexport * from './XLogo';\nexport * from './YoutubeLogo';\n"],"mappings":";;;;;;;;;;;;;;;;AAcA,MAAM,iBAAiB;CACrB;EACE,MAAM;EACN,WAAW,oBAAC,aAAD,EAAa,WAAU~~,gCAAiC~~;~~EACnE~~,OAAO;~~EACR~~;~~CACD~~;EACE,MAAM;EACN,WAAW,oBAAC,iBAAD,EAAiB,WAAU~~,gCAAiC~~;~~EACvE~~,OAAO;~~EACR~~;~~CACD~~;EACE,MAAM;EACN,WAAW,oBAAC,OAAD,EAAO,WAAU~~,gCAAiC~~;~~EAC7D~~,OAAO;~~EACR~~;~~CACD~~;EACE,MAAM;EACN,WAAW,oBAAC,aAAD,EAAa,WAAU~~,gCAAiC~~;~~EACnE~~,OAAO;~~EACR~~;~~CACD~~;EACE,MAAM;EACN,WAAW,oBAAC,cAAD,EAAc,WAAU~~,gCAAiC~~;~~EACpE~~,OAAO;~~EACR~~;~~CACD~~;EACE,MAAM;EACN,WAAW,oBAAC,YAAD,EAAY,WAAU~~,gCAAiC~~;~~EAClE~~,OAAO;~~EACR~~;~~CACD~~;EACE,MAAM;EACN,WAAW,oBAAC,eAAD,EAAe,WAAU~~,gCAAiC~~;~~EACrE~~,OAAO;~~EACR~~;~~CAMF~~;~~AAiBD~~,MAAM,qBAAiD,EACrD,MACA,WACA,OACA,GAAG,gBAEH,oBAAC,KAAD;CAEQ;CACN,cAAY;CACZ,WAAU;CACV,GAAI;WAEH;~~CACC~~,~~EAPG~~,~~KAOH~~;~~AAGN~~,MAAa,kBAAkB,EAC7B,YACA,GAAG,gBAEH,eAAe,IACb,gBACI,UACA,8BAAC,mBAAD;CAAmB,GAAI;CAAO,GAAI;CAAW,KAAK,MAAM;~~CAAS~~,GAEtE"}
1	+ {"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/SocialNetworks/index.tsx"],"sourcesContent":["import type {\n AnchorHTMLAttributes,\n DetailedHTMLProps,\n FC,\n ReactNode,\n} from 'react';\nimport { DiscordLogo } from './DiscordLogo';\nimport { InstagramLogo } from './InstagramLogo';\nimport { LinkedInLogo } from './LinkedInLogo';\nimport { ProductHuntLogo } from './ProductHuntLogo';\nimport { TiktokLogo } from './TiktokLogo';\nimport { XLogo } from './XLogo';\nimport { YoutubeLogo } from './YoutubeLogo';\n\nconst socialNetworks = [\n {\n href: 'https://discord.gg/7uxamYVeCk',\n component: <DiscordLogo className=\"h-auto max-h-full max-w-full\" />,\n label: 'Discord',\n },\n {\n href: 'https://www.producthunt.com/posts/intlayer?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-intlayer',\n component: <ProductHuntLogo className=\"h-auto max-h-full max-w-full\" />,\n label: 'Product Hunt',\n },\n {\n href: 'https://x.com/Intlayer183096',\n component: <XLogo className=\"h-auto max-h-full max-w-full\" />,\n label: 'X',\n },\n {\n href: 'https://www.youtube.com/@intlayer',\n component: <YoutubeLogo className=\"h-auto max-h-full max-w-full\" />,\n label: 'YouTube',\n },\n {\n href: 'https://www.linkedin.com/company/intlayerorg',\n component: <LinkedInLogo className=\"h-auto max-h-full max-w-full\" />,\n label: 'LinkedIn',\n },\n {\n href: 'https://www.tiktok.com/@intlayer',\n component: <TiktokLogo className=\"h-auto max-h-full max-w-full\" />,\n label: 'TikTok',\n },\n {\n href: 'https://www.instagram.com/intlayer/',\n component: <InstagramLogo className=\"h-auto max-h-full max-w-full\" />,\n label: 'Instagram',\n },\n // {\n // href: 'https://www.facebook.com/intlayer',\n // component: <FacebookLogo className=\"h-auto max-h-full max-w-full\" />,\n // label: 'Facebook',\n // },\n];\n\ntype SocialNetworksProps = {\n renderItem?: (item: (typeof socialNetworks)[number]) => ReactNode;\n} & DetailedHTMLProps<\n AnchorHTMLAttributes<HTMLAnchorElement>,\n HTMLAnchorElement\n>;\n\ntype DefaultRenderItemProps = DetailedHTMLProps<\n AnchorHTMLAttributes<HTMLAnchorElement>,\n HTMLAnchorElement\n> & {\n component: ReactNode;\n label: string;\n};\n\nconst DefaultRenderItem: FC<DefaultRenderItemProps> = ({\n href,\n component,\n label,\n ...iconProps\n}) => (\n <a\n key={href}\n href={href}\n aria-label={label}\n className=\"max-h-4 max-w-4 shrink-0\"\n {...iconProps}\n >\n {component}\n </a>\n);\n\nexport const SocialNetworks = ({\n renderItem,\n ...iconProps\n}: SocialNetworksProps) =>\n socialNetworks.map(\n renderItem ??\n ((props) => (\n <DefaultRenderItem {...props} {...iconProps} key={props.label} />\n ))\n );\n\nexport * from './BitbucketLogo';\nexport * from './DiscordLogo';\nexport * from './FacebookLogo';\nexport * from './GitHubLogo';\nexport * from './GitLabLogo';\nexport * from './GoogleLogo';\nexport * from './InstagramLogo';\nexport * from './LinkedInLogo';\nexport * from './ProductHuntLogo';\nexport * from './TiktokLogo';\nexport * from './XLogo';\nexport * from './YoutubeLogo';\n"],"mappings":";;;;;;;;;;;;;;;;AAcA,MAAM,iBAAiB;CACrB;EACE,MAAM;EACN,WAAW,oBAAC,aAAD,EAAa,WAAU,+BAAgC;EAClE,OAAO;CACT;CACA;EACE,MAAM;EACN,WAAW,oBAAC,iBAAD,EAAiB,WAAU,+BAAgC;EACtE,OAAO;CACT;CACA;EACE,MAAM;EACN,WAAW,oBAAC,OAAD,EAAO,WAAU,+BAAgC;EAC5D,OAAO;CACT;CACA;EACE,MAAM;EACN,WAAW,oBAAC,aAAD,EAAa,WAAU,+BAAgC;EAClE,OAAO;CACT;CACA;EACE,MAAM;EACN,WAAW,oBAAC,cAAD,EAAc,WAAU,+BAAgC;EACnE,OAAO;CACT;CACA;EACE,MAAM;EACN,WAAW,oBAAC,YAAD,EAAY,WAAU,+BAAgC;EACjE,OAAO;CACT;CACA;EACE,MAAM;EACN,WAAW,oBAAC,eAAD,EAAe,WAAU,+BAAgC;EACpE,OAAO;CACT;AAMF;AAiBA,MAAM,qBAAiD,EACrD,MACA,WACA,OACA,GAAG,gBAEH,oBAAC,KAAD;CAEQ;CACN,cAAY;CACZ,WAAU;CACV,GAAI;WAEH;AACA,GAPI,IAOJ;AAGL,MAAa,kBAAkB,EAC7B,YACA,GAAG,gBAEH,eAAe,IACb,gBACI,UACA,8BAAC,mBAAD;CAAmB,GAAI;CAAO,GAAI;CAAW,KAAK,MAAM;AAAQ,GAEtE"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Steps/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, HTMLAttributes, OlHTMLAttributes, ReactNode } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { H3 } from '../Headers';\n\nconst slugify = (text: string) =>\n String(text)\n .normalize('NFD')\n .replace(/[̀-ͯ]/g, '')\n .replace(/\\s+/g, '-')\n .toLowerCase();\n\ntype StepProps = HTMLAttributes<HTMLLIElement> & {\n number: number \| string;\n title?: string;\n isOptional?: boolean;\n children: ReactNode;\n};\n\nexport const Step: FC<StepProps> = ({\n number,\n title,\n isOptional = false,\n children,\n className,\n ...props\n}) => {\n const { stepLabel, optionalLabel } = useIntlayer('steps');\n\n return (\n <li\n className={cn('group relative flex w-full flex-1 gap-4', className)}\n {...props}\n >\n <div className=\"flex flex-col max-md:hidden\" aria-hidden=\"true\">\n <div className=\"ml-4 h-10 border-text/20 border-l border-dashed group-first-of-type:hidden\" />\n <span\n className={cn(\n 'flex size-8 shrink-0 items-center justify-center rounded-full border-2 border-text/30 border-dotted bg-background font-black text-base text-text/70 max-md:hidden',\n 'group-first-of-type:mt-10'\n )}\n >\n {number}\n </span>\n <div\n className={cn(\n 'ml-4 flex-1 border-text/20 border-l border-dashed',\n 'group-last-of-type:h-40 group-last-of-type:flex-none group-last-of-type:[-webkit-mask-image:linear-gradient(to_bottom,black,transparent)] group-last-of-type:[mask-image:linear-gradient(to_bottom,black,transparent)]'\n )}\n />\n </div>\n\n <div className=\"mt-10 mb-8 flex w-full min-w-0 flex-col gap-8\">\n {title && (\n <div className=\"flex items-center items-center gap-2\">\n <H3\n isClickable\n id={`step-${number}-${slugify(title)}`}\n aria-label={`${stepLabel} ${number}: ${title}`}\n className=\"font-semibold text-lg text-text\"\n >\n {title}\n </H3>\n {isOptional && (\n <span className=\"mb-2 ml-4 rounded-full bg-neutral/15 px-3 py-1 text-text/90 text-xs\">\n {optionalLabel}\n </span>\n )}\n </div>\n )}\n {children}\n </div>\n </li>\n );\n};\n\ntype StepsProps = OlHTMLAttributes<HTMLOListElement> & {\n children: ReactNode;\n};\n\nexport const Steps: FC<StepsProps> = ({ children, className, ...props }) => (\n <ol className={cn('list-none', className)} {...props}>\n {children}\n </ol>\n);\n"],"mappings":";;;;;;AAKA,MAAM,WAAW,SACf,OAAO,~~KAAK~~,CACT,UAAU,~~MAAM~~,CAChB,QAAQ,UAAU,~~GAAG~~,CACrB,QAAQ,QAAQ,~~IAAI~~,CACpB,~~aAAa~~;~~AASlB~~,MAAa,QAAuB,EAClC,QACA,OACA,aAAa,OACb,UACA,WACA,GAAG,YACC;CACJ,MAAM,EAAE,WAAW,kBAAkB,YAAY,~~QAAQ~~;~~AAEzD~~,~~QACE~~,qBAAC,MAAD;EACE,WAAW,GAAG,2CAA2C,~~UAAU~~;~~EACnE~~,GAAI;YAFN,CAIE,qBAAC,OAAD;GAAK,WAAU;GAA8B,eAAY;aAAzD;IACE,oBAAC,OAAD,EAAK,WAAU,~~8EAA+E~~;~~IAC9F~~,oBAAC,QAAD;KACE,WAAW,GACT,qKACA,~~4BACD~~;~~eAEA~~;~~KACI~~;~~IACP~~,oBAAC,OAAD,EACE,WAAW,GACT,qDACA,~~yNACD~~,EACD;~~IACE~~;~~MAEN~~,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,SACC,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,IAAD;KACE;KACA,IAAI,QAAQ,OAAO,GAAG,QAAQ,~~MAAM~~;~~KACpC~~,cAAY,GAAG,UAAU,GAAG,OAAO,IAAI;KACvC,WAAU;eAET;~~KACE~~,~~GACJ~~,cACC,oBAAC,QAAD;KAAM,WAAU;eACb;~~KACI~~,EAEL;~~OAEP~~,~~SACG~~;~~KACH;;;AAQT~~,MAAa,SAAyB,EAAE,UAAU,WAAW,GAAG,YAC9D,oBAAC,MAAD;CAAI,WAAW,GAAG,aAAa,~~UAAU~~;~~CAAE~~,GAAI;CAC5C;~~CACE~~"}
1	+ {"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Steps/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, HTMLAttributes, OlHTMLAttributes, ReactNode } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { H3 } from '../Headers';\n\nconst slugify = (text: string) =>\n String(text)\n .normalize('NFD')\n .replace(/[̀-ͯ]/g, '')\n .replace(/\\s+/g, '-')\n .toLowerCase();\n\ntype StepProps = HTMLAttributes<HTMLLIElement> & {\n number: number \| string;\n title?: string;\n isOptional?: boolean;\n children: ReactNode;\n};\n\nexport const Step: FC<StepProps> = ({\n number,\n title,\n isOptional = false,\n children,\n className,\n ...props\n}) => {\n const { stepLabel, optionalLabel } = useIntlayer('steps');\n\n return (\n <li\n className={cn('group relative flex w-full flex-1 gap-4', className)}\n {...props}\n >\n <div className=\"flex flex-col max-md:hidden\" aria-hidden=\"true\">\n <div className=\"ml-4 h-10 border-text/20 border-l border-dashed group-first-of-type:hidden\" />\n <span\n className={cn(\n 'flex size-8 shrink-0 items-center justify-center rounded-full border-2 border-text/30 border-dotted bg-background font-black text-base text-text/70 max-md:hidden',\n 'group-first-of-type:mt-10'\n )}\n >\n {number}\n </span>\n <div\n className={cn(\n 'ml-4 flex-1 border-text/20 border-l border-dashed',\n 'group-last-of-type:h-40 group-last-of-type:flex-none group-last-of-type:[-webkit-mask-image:linear-gradient(to_bottom,black,transparent)] group-last-of-type:[mask-image:linear-gradient(to_bottom,black,transparent)]'\n )}\n />\n </div>\n\n <div className=\"mt-10 mb-8 flex w-full min-w-0 flex-col gap-8\">\n {title && (\n <div className=\"flex items-center items-center gap-2\">\n <H3\n isClickable\n id={`step-${number}-${slugify(title)}`}\n aria-label={`${stepLabel} ${number}: ${title}`}\n className=\"font-semibold text-lg text-text\"\n >\n {title}\n </H3>\n {isOptional && (\n <span className=\"mb-2 ml-4 rounded-full bg-neutral/15 px-3 py-1 text-text/90 text-xs\">\n {optionalLabel}\n </span>\n )}\n </div>\n )}\n {children}\n </div>\n </li>\n );\n};\n\ntype StepsProps = OlHTMLAttributes<HTMLOListElement> & {\n children: ReactNode;\n};\n\nexport const Steps: FC<StepsProps> = ({ children, className, ...props }) => (\n <ol className={cn('list-none', className)} {...props}>\n {children}\n </ol>\n);\n"],"mappings":";;;;;;AAKA,MAAM,WAAW,SACf,OAAO,IAAI,CAAC,CACT,UAAU,KAAK,CAAC,CAChB,QAAQ,UAAU,EAAE,CAAC,CACrB,QAAQ,QAAQ,GAAG,CAAC,CACpB,YAAY;AASjB,MAAa,QAAuB,EAClC,QACA,OACA,aAAa,OACb,UACA,WACA,GAAG,YACC;CACJ,MAAM,EAAE,WAAW,kBAAkB,YAAY,OAAO;CAExD,OACE,qBAAC,MAAD;EACE,WAAW,GAAG,2CAA2C,SAAS;EAClE,GAAI;YAFN,CAIE,qBAAC,OAAD;GAAK,WAAU;GAA8B,eAAY;aAAzD;IACE,oBAAC,OAAD,EAAK,WAAU,6EAA8E;IAC7F,oBAAC,QAAD;KACE,WAAW,GACT,qKACA,2BACF;eAEC;IACG;IACN,oBAAC,OAAD,EACE,WAAW,GACT,qDACA,wNACF,EACD;GACE;MAEL,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,SACC,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,IAAD;KACE;KACA,IAAI,QAAQ,OAAO,GAAG,QAAQ,KAAK;KACnC,cAAY,GAAG,UAAU,GAAG,OAAO,IAAI;KACvC,WAAU;eAET;IACC,IACH,cACC,oBAAC,QAAD;KAAM,WAAU;eACb;IACG,EAEL;OAEN,QACE;IACH;;AAER;AAMA,MAAa,SAAyB,EAAE,UAAU,WAAW,GAAG,YAC9D,oBAAC,MAAD;CAAI,WAAW,GAAG,aAAa,SAAS;CAAG,GAAI;CAC5C;AACC"}

package/dist/esm/components/Steps/steps.content.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"steps.content.mjs","names":[],"sources":["../../../../src/components/Steps/steps.content.ts"],"sourcesContent":["import { type Dictionary, t } from 'intlayer';\n\nexport const stepsContent = {\n key: 'steps',\n content: {\n stepLabel: t({\n en: 'Step',\n 'en-GB': 'Step',\n fr: 'Étape',\n es: 'Paso',\n de: 'Schritt',\n ja: 'ステップ',\n ko: '단계',\n zh: '步骤',\n it: 'Passo',\n pt: 'Passo',\n hi: 'चरण',\n ar: 'خطوة',\n ru: 'Шаг',\n tr: 'Adım',\n pl: 'Krok',\n id: 'Langkah',\n vi: 'Bước',\n uk: 'Крок',\n }),\n optionalLabel: t({\n en: 'Optional',\n 'en-GB': 'Optional',\n fr: 'Facultatif',\n es: 'Opcional',\n de: 'Optional',\n ja: 'オプション',\n ko: '선택사항',\n zh: '可选',\n it: 'Opzionale',\n pt: 'Opcional',\n hi: 'वैकल्पिक',\n ar: 'اختياري',\n ru: 'Необязательно',\n tr: 'İsteğe bağlı',\n pl: 'Opcjonalne',\n id: 'Opsional',\n vi: 'Tùy chọn',\n uk: \"Необов'язково\",\n }),\n },\n title: 'Steps component',\n description:\n 'Content declaration for the steps component, providing accessible labels for step headings and optional step badges.',\n tags: ['component', 'steps'],\n} satisfies Dictionary;\n\nexport default stepsContent;\n"],"mappings":";;;AAEA,MAAa,eAAe;CAC1B,KAAK;CACL,SAAS;EACP,WAAW,EAAE;GACX,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;~~GACL~~,CAAC;~~EACF~~,eAAe,EAAE;GACf,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;~~GACL~~,CAAC;~~EACH~~;~~CACD~~,OAAO;CACP,aACE;CACF,MAAM,CAAC,aAAa,~~QAAQ~~;~~CAC7B~~"}
1	+ {"version":3,"file":"steps.content.mjs","names":[],"sources":["../../../../src/components/Steps/steps.content.ts"],"sourcesContent":["import { type Dictionary, t } from 'intlayer';\n\nexport const stepsContent = {\n key: 'steps',\n content: {\n stepLabel: t({\n en: 'Step',\n 'en-GB': 'Step',\n fr: 'Étape',\n es: 'Paso',\n de: 'Schritt',\n ja: 'ステップ',\n ko: '단계',\n zh: '步骤',\n it: 'Passo',\n pt: 'Passo',\n hi: 'चरण',\n ar: 'خطوة',\n ru: 'Шаг',\n tr: 'Adım',\n pl: 'Krok',\n id: 'Langkah',\n vi: 'Bước',\n uk: 'Крок',\n }),\n optionalLabel: t({\n en: 'Optional',\n 'en-GB': 'Optional',\n fr: 'Facultatif',\n es: 'Opcional',\n de: 'Optional',\n ja: 'オプション',\n ko: '선택사항',\n zh: '可选',\n it: 'Opzionale',\n pt: 'Opcional',\n hi: 'वैकल्पिक',\n ar: 'اختياري',\n ru: 'Необязательно',\n tr: 'İsteğe bağlı',\n pl: 'Opcjonalne',\n id: 'Opsional',\n vi: 'Tùy chọn',\n uk: \"Необов'язково\",\n }),\n },\n title: 'Steps component',\n description:\n 'Content declaration for the steps component, providing accessible labels for step headings and optional step badges.',\n tags: ['component', 'steps'],\n} satisfies Dictionary;\n\nexport default stepsContent;\n"],"mappings":";;;AAEA,MAAa,eAAe;CAC1B,KAAK;CACL,SAAS;EACP,WAAW,EAAE;GACX,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN,CAAC;EACD,eAAe,EAAE;GACf,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN,CAAC;CACH;CACA,OAAO;CACP,aACE;CACF,MAAM,CAAC,aAAa,OAAO;AAC7B"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SwitchSelector.mjs","names":[],"sources":["../../../../src/components/SwitchSelector/SwitchSelector.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { useSwitchSelector } from './useSwitchSelector';\n\nexport type SwitchSelectorChoice<T = boolean> = {\n content: ReactNode;\n value: T;\n} & HTMLAttributes<HTMLButtonElement>;\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nexport const defaultChoices: SwitchSelectorChoices<boolean> = [\n { content: 'Off', value: false },\n { content: 'On', value: true },\n];\n\nexport type SwitchSelectorColor =\n \| 'primary'\n \| 'secondary'\n \| 'neutral'\n \| 'light'\n \| 'dark'\n \| 'text';\n\nexport type SwitchSelectorSize = 'xs' \| 'sm' \| 'md' \| 'lg';\n\nexport type SwitchSelectorBaseProps<T = boolean> = {\n choices?: SwitchSelectorChoices<T>;\n value?: T;\n defaultValue?: T;\n onChange?: (choice: T) => void;\n className?: string;\n itemClassName?: string;\n hoverable?: boolean;\n disabled?: boolean;\n [key: string]: any;\n};\n\nexport type SwitchSelectorProps<T = boolean> = SwitchSelectorBaseProps<T> &\n VariantProps<typeof switchSelectorVariant> &\n VariantProps<typeof choiceVariant>;\n\nexport const switchSelectorVariant = cva(\n 'flex h-fit w-fit cursor-pointer flex-row gap-2 rounded-full border-[1.3px] p-0.38',\n {\n variants: {\n color: {\n primary: 'border-primary text-primary',\n secondary: 'border-secondary text-secondary',\n neutral: 'border-neutral text-neutral',\n light: 'border-white text-white',\n dark: 'border-neutral-800 text-neutral-800',\n text: 'border-text text-text',\n },\n disabled: {\n true: 'cursor-not-allowed opacity-50',\n false: '',\n },\n },\n defaultVariants: {\n color: `${'text'}`,\n disabled: false,\n },\n }\n);\n\nexport const choiceVariant = cva(\n 'z-1 flex-1 cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default data-[indicator=true]:text-text-opposite motion-reduce:transition-none',\n {\n variants: {\n size: {\n xs: 'px-2 py-0.5 text-xs',\n sm: 'px-2 py-1 text-xs',\n md: 'p-2 text-sm',\n lg: 'p-4 text-base',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n }\n);\n\nexport const indicatorVariant = cva(\n 'absolute top-0 z-0 h-full w-auto rounded-full transition-all duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n primary: 'bg-primary data-[indicator=true]:text-text',\n secondary: 'bg-secondary data-[indicator=true]:text-text',\n error: 'bg-error data-[indicator=true]:text-text',\n neutral: 'bg-neutral data-[indicator=true]:text-white',\n light: 'bg-white data-[indicator=true]:text-black',\n dark: 'bg-neutral-800 data-[indicator=true]:text-white',\n text: 'bg-text data-[indicator=true]:text-text-opposite',\n },\n },\n }\n);\n\n/*\n Component that allows the user to select one of the provided choices.\n * This component is horizontal.\n */\nexport const SwitchSelector = <T,>(props: SwitchSelectorProps<T>) => {\n const {\n choices = defaultChoices as SwitchSelectorChoices<T>,\n color = 'primary',\n size = 'md',\n className,\n itemClassName,\n } = props;\n\n const {\n selectedIndex,\n indicatorIndex,\n handleChange,\n optionsRefs,\n indicatorRef,\n choiceIndicatorPosition,\n setHoveredIndex,\n disabled,\n } = useSwitchSelector(\n {\n choices,\n value: props.value,\n defaultValue: props.defaultValue,\n onChange: props.onChange,\n hoverable: props.hoverable,\n disabled: props.disabled,\n },\n 'horizontal'\n );\n\n return (\n <div\n className={switchSelectorVariant({\n color,\n disabled,\n className,\n })}\n role=\"tablist\"\n aria-disabled={disabled ? 'true' : undefined}\n >\n <div className=\"relative flex size-full flex-row items-center justify-center\">\n {choices.map((choice, index) => {\n const { content, value, ...buttonProps } = choice;\n\n const isKeyOfKey =\n typeof value === 'string' \|\| typeof value === 'number';\n\n const isSelected = index === selectedIndex;\n const isIndicatorOwner = index === indicatorIndex;\n\n return (\n <button\n {...buttonProps}\n type=\"button\"\n className={cn(\n choiceVariant({\n size,\n }),\n disabled && 'cursor-not-allowed',\n itemClassName\n )}\n key={isKeyOfKey ? value : index}\n role=\"tab\"\n onClick={() => handleChange(value)}\n aria-selected={isSelected ? 'true' : undefined}\n data-indicator={isIndicatorOwner ? 'true' : undefined}\n disabled={disabled}\n tabIndex={isSelected ? 0 : -1}\n ref={(el) => {\n optionsRefs.current[index] = el!;\n }}\n onMouseEnter={() => !disabled && setHoveredIndex(index)}\n onMouseLeave={() => !disabled && setHoveredIndex(null)}\n >\n {content}\n </button>\n );\n })}\n\n {choiceIndicatorPosition && (\n <div\n className={cn(\n indicatorVariant({\n color,\n })\n )}\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n />\n )}\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;AAaA,MAAa,iBAAiD,CAC5D;CAAE,SAAS;CAAO,OAAO;~~CAAO~~,~~EAChC~~;CAAE,SAAS;CAAM,OAAO;~~CAAM~~,CAC/B;~~AA4BD~~,MAAa,wBAAwB,IACnC,qFACA;CACE,UAAU;EACR,OAAO;GACL,SAAS;GACT,WAAW;GACX,SAAS;GACT,OAAO;GACP,MAAM;GACN,MAAM;~~GACP~~;~~EACD~~,UAAU;GACR,MAAM;GACN,OAAO;~~GACR~~;~~EACF~~;~~CACD~~,iBAAiB;EACf,OAAO;EACP,UAAU;~~EACX~~;~~CACF~~,CACF;~~AAED~~,MAAa,gBAAgB,IAC3B,6LACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;~~EACL~~,EACF;~~CACD~~,iBAAiB,EACf,MAAM,~~MACP~~;~~CACF~~,CACF;~~AAED~~,MAAa,mBAAmB,IAC9B,uHACA,EACE,UAAU,EACR,OAAO;CACL,SAAS;CACT,WAAW;CACX,OAAO;CACP,SAAS;CACT,OAAO;CACP,MAAM;CACN,MAAM;~~CACP~~,EACF,EACF,CACF;;;;;~~AAMD~~,MAAa,kBAAsB,UAAkC;CACnE,MAAM,EACJ,UAAU,gBACV,QAAQ,WACR,OAAO,MACP,WACA,kBACE;CAEJ,MAAM,EACJ,eACA,gBACA,cACA,aACA,cACA,yBACA,iBACA,aACE,kBACF;EACE;EACA,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,UAAU,MAAM;EAChB,WAAW,MAAM;EACjB,UAAU,MAAM;~~EACjB~~,~~EACD~~,~~aACD~~;~~AAED~~,~~QACE~~,oBAAC,OAAD;EACE,WAAW,sBAAsB;GAC/B;GACA;GACA;~~GACD~~,CAAC;~~EACF~~,MAAK;EACL,iBAAe,WAAW,SAAS;YAEnC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,QAAQ,KAAK,QAAQ,UAAU;IAC9B,MAAM,EAAE,SAAS,OAAO,GAAG,gBAAgB;IAE3C,MAAM,aACJ,OAAO,UAAU,YAAY,OAAO,UAAU;IAEhD,MAAM,aAAa,UAAU;IAC7B,MAAM,mBAAmB,UAAU;~~AAEnC~~,~~WACE~~,8BAAC,UAAD;KACE,GAAI;KACJ,MAAK;KACL,WAAW,GACT,cAAc,EACZ,~~MACD~~,CAAC,~~EACF~~,YAAY,sBACZ,~~cACD~~;~~KACD~~,KAAK,aAAa,QAAQ;KAC1B,MAAK;KACL,eAAe,aAAa,~~MAAM~~;~~KAClC~~,iBAAe,aAAa,SAAS;KACrC,kBAAgB,mBAAmB,SAAS;KAClC;KACV,UAAU,aAAa,IAAI;KAC3B,MAAM,OAAO;~~AACX~~,~~kBAAY~~,QAAQ,SAAS~~;;KAE~~/B,oBAAoB,CAAC,YAAY,gBAAgB,~~MAAM~~;~~KACvD~~,oBAAoB,CAAC,YAAY,gBAAgB,~~KAAK~~;~~KAG~~/C,~~EADN~~,~~QACM~~;~~KAEX~~,~~EAED~~,2BACC,oBAAC,OAAD;IACE,WAAW,GACT,iBAAiB,EACf,~~OACD~~,CAAC,CACH;~~IACD~~,OAAO;IACP,KAAK;~~IACL~~,EAEA;;~~EACF~~"}
1	+ {"version":3,"file":"SwitchSelector.mjs","names":[],"sources":["../../../../src/components/SwitchSelector/SwitchSelector.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { useSwitchSelector } from './useSwitchSelector';\n\nexport type SwitchSelectorChoice<T = boolean> = {\n content: ReactNode;\n value: T;\n} & HTMLAttributes<HTMLButtonElement>;\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nexport const defaultChoices: SwitchSelectorChoices<boolean> = [\n { content: 'Off', value: false },\n { content: 'On', value: true },\n];\n\nexport type SwitchSelectorColor =\n \| 'primary'\n \| 'secondary'\n \| 'neutral'\n \| 'light'\n \| 'dark'\n \| 'text';\n\nexport type SwitchSelectorSize = 'xs' \| 'sm' \| 'md' \| 'lg';\n\nexport type SwitchSelectorBaseProps<T = boolean> = {\n choices?: SwitchSelectorChoices<T>;\n value?: T;\n defaultValue?: T;\n onChange?: (choice: T) => void;\n className?: string;\n itemClassName?: string;\n hoverable?: boolean;\n disabled?: boolean;\n [key: string]: any;\n};\n\nexport type SwitchSelectorProps<T = boolean> = SwitchSelectorBaseProps<T> &\n VariantProps<typeof switchSelectorVariant> &\n VariantProps<typeof choiceVariant>;\n\nexport const switchSelectorVariant = cva(\n 'flex h-fit w-fit cursor-pointer flex-row gap-2 rounded-full border-[1.3px] p-0.38',\n {\n variants: {\n color: {\n primary: 'border-primary text-primary',\n secondary: 'border-secondary text-secondary',\n neutral: 'border-neutral text-neutral',\n light: 'border-white text-white',\n dark: 'border-neutral-800 text-neutral-800',\n text: 'border-text text-text',\n },\n disabled: {\n true: 'cursor-not-allowed opacity-50',\n false: '',\n },\n },\n defaultVariants: {\n color: `${'text'}`,\n disabled: false,\n },\n }\n);\n\nexport const choiceVariant = cva(\n 'z-1 flex-1 cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default data-[indicator=true]:text-text-opposite motion-reduce:transition-none',\n {\n variants: {\n size: {\n xs: 'px-2 py-0.5 text-xs',\n sm: 'px-2 py-1 text-xs',\n md: 'p-2 text-sm',\n lg: 'p-4 text-base',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n }\n);\n\nexport const indicatorVariant = cva(\n 'absolute top-0 z-0 h-full w-auto rounded-full transition-all duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n primary: 'bg-primary data-[indicator=true]:text-text',\n secondary: 'bg-secondary data-[indicator=true]:text-text',\n error: 'bg-error data-[indicator=true]:text-text',\n neutral: 'bg-neutral data-[indicator=true]:text-white',\n light: 'bg-white data-[indicator=true]:text-black',\n dark: 'bg-neutral-800 data-[indicator=true]:text-white',\n text: 'bg-text data-[indicator=true]:text-text-opposite',\n },\n },\n }\n);\n\n/*\n Component that allows the user to select one of the provided choices.\n * This component is horizontal.\n */\nexport const SwitchSelector = <T,>(props: SwitchSelectorProps<T>) => {\n const {\n choices = defaultChoices as SwitchSelectorChoices<T>,\n color = 'primary',\n size = 'md',\n className,\n itemClassName,\n } = props;\n\n const {\n selectedIndex,\n indicatorIndex,\n handleChange,\n optionsRefs,\n indicatorRef,\n choiceIndicatorPosition,\n setHoveredIndex,\n disabled,\n } = useSwitchSelector(\n {\n choices,\n value: props.value,\n defaultValue: props.defaultValue,\n onChange: props.onChange,\n hoverable: props.hoverable,\n disabled: props.disabled,\n },\n 'horizontal'\n );\n\n return (\n <div\n className={switchSelectorVariant({\n color,\n disabled,\n className,\n })}\n role=\"tablist\"\n aria-disabled={disabled ? 'true' : undefined}\n >\n <div className=\"relative flex size-full flex-row items-center justify-center\">\n {choices.map((choice, index) => {\n const { content, value, ...buttonProps } = choice;\n\n const isKeyOfKey =\n typeof value === 'string' \|\| typeof value === 'number';\n\n const isSelected = index === selectedIndex;\n const isIndicatorOwner = index === indicatorIndex;\n\n return (\n <button\n {...buttonProps}\n type=\"button\"\n className={cn(\n choiceVariant({\n size,\n }),\n disabled && 'cursor-not-allowed',\n itemClassName\n )}\n key={isKeyOfKey ? value : index}\n role=\"tab\"\n onClick={() => handleChange(value)}\n aria-selected={isSelected ? 'true' : undefined}\n data-indicator={isIndicatorOwner ? 'true' : undefined}\n disabled={disabled}\n tabIndex={isSelected ? 0 : -1}\n ref={(el) => {\n optionsRefs.current[index] = el!;\n }}\n onMouseEnter={() => !disabled && setHoveredIndex(index)}\n onMouseLeave={() => !disabled && setHoveredIndex(null)}\n >\n {content}\n </button>\n );\n })}\n\n {choiceIndicatorPosition && (\n <div\n className={cn(\n indicatorVariant({\n color,\n })\n )}\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n />\n )}\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;AAaA,MAAa,iBAAiD,CAC5D;CAAE,SAAS;CAAO,OAAO;AAAM,GAC/B;CAAE,SAAS;CAAM,OAAO;AAAK,CAC/B;AA4BA,MAAa,wBAAwB,IACnC,qFACA;CACE,UAAU;EACR,OAAO;GACL,SAAS;GACT,WAAW;GACX,SAAS;GACT,OAAO;GACP,MAAM;GACN,MAAM;EACR;EACA,UAAU;GACR,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,OAAO;EACP,UAAU;CACZ;AACF,CACF;AAEA,MAAa,gBAAgB,IAC3B,6LACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF;AAEA,MAAa,mBAAmB,IAC9B,uHACA,EACE,UAAU,EACR,OAAO;CACL,SAAS;CACT,WAAW;CACX,OAAO;CACP,SAAS;CACT,OAAO;CACP,MAAM;CACN,MAAM;AACR,EACF,EACF,CACF;;;;;AAMA,MAAa,kBAAsB,UAAkC;CACnE,MAAM,EACJ,UAAU,gBACV,QAAQ,WACR,OAAO,MACP,WACA,kBACE;CAEJ,MAAM,EACJ,eACA,gBACA,cACA,aACA,cACA,yBACA,iBACA,aACE,kBACF;EACE;EACA,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,UAAU,MAAM;EAChB,WAAW,MAAM;EACjB,UAAU,MAAM;CAClB,GACA,YACF;CAEA,OACE,oBAAC,OAAD;EACE,WAAW,sBAAsB;GAC/B;GACA;GACA;EACF,CAAC;EACD,MAAK;EACL,iBAAe,WAAW,SAAS;YAEnC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,QAAQ,KAAK,QAAQ,UAAU;IAC9B,MAAM,EAAE,SAAS,OAAO,GAAG,gBAAgB;IAE3C,MAAM,aACJ,OAAO,UAAU,YAAY,OAAO,UAAU;IAEhD,MAAM,aAAa,UAAU;IAC7B,MAAM,mBAAmB,UAAU;IAEnC,OACE,8BAAC,UAAD;KACE,GAAI;KACJ,MAAK;KACL,WAAW,GACT,cAAc,EACZ,KACF,CAAC,GACD,YAAY,sBACZ,aACF;KACA,KAAK,aAAa,QAAQ;KAC1B,MAAK;KACL,eAAe,aAAa,KAAK;KACjC,iBAAe,aAAa,SAAS;KACrC,kBAAgB,mBAAmB,SAAS;KAClC;KACV,UAAU,aAAa,IAAI;KAC3B,MAAM,OAAO;MACX,YAAY,QAAQ,SAAS;KAC/B;KACA,oBAAoB,CAAC,YAAY,gBAAgB,KAAK;KACtD,oBAAoB,CAAC,YAAY,gBAAgB,IAAI;IAG/C,GADL,OACK;GAEZ,CAAC,GAEA,2BACC,oBAAC,OAAD;IACE,WAAW,GACT,iBAAiB,EACf,MACF,CAAC,CACH;IACA,OAAO;IACP,KAAK;GACN,EAEA;;CACF;AAET"}

package/dist/esm/components/SwitchSelector/VerticalSwitchSelector.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VerticalSwitchSelector.mjs","names":[],"sources":["../../../../src/components/SwitchSelector/VerticalSwitchSelector.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n defaultChoices,\n type SwitchSelectorBaseProps,\n type SwitchSelectorChoices,\n} from './SwitchSelector';\nimport { useSwitchSelector } from './useSwitchSelector';\n\nconst verticalSwitchSelectorVariant = cva(\n 'flex h-fit w-fit cursor-pointer flex-col gap-2 rounded-2xl border-[1.3px] p-1',\n {\n variants: {\n color: {\n primary: 'border-primary text-primary',\n secondary: 'border-secondary text-secondary',\n [`${'error'}`]: 'border-error bg-error text-error',\n neutral: 'border-neutral text-neutral',\n light: 'border-white text-white',\n dark: 'border-neutral-800 text-neutral-800',\n text: 'border-text text-text',\n },\n disabled: {\n true: 'cursor-not-allowed opacity-50',\n false: '',\n },\n },\n defaultVariants: {\n color: `${'primary'}`,\n disabled: false,\n },\n }\n);\n\nconst verticalChoiceVariant = cva(\n 'z-1 w-full cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default data-[indicator=true]:text-text-opposite motion-reduce:transition-none',\n {\n variants: {\n size: {\n sm: 'px-2 py-1 text-xs',\n md: 'p-2 text-sm',\n lg: 'p-4 text-base',\n },\n },\n defaultVariants: {\n size: `${'md'}`,\n },\n }\n);\n\nconst verticalIndicatorVariant = cva(\n 'absolute left-0 z-0 h-auto w-full rounded-xl transition-all duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n primary: 'bg-primary data-[indicator=true]:text-text',\n secondary: 'bg-secondary data-[indicator=true]:text-text',\n [`${'error'}`]: 'bg-error data-[indicator=true]:text-text',\n neutral: 'bg-neutral data-[indicator=true]:text-white',\n light: 'bg-white data-[indicator=true]:text-black',\n dark: 'bg-neutral-800 data-[indicator=true]:text-white',\n text: 'bg-text data-[indicator=true]:text-text-opposite',\n },\n },\n }\n);\n\nexport type VerticalSwitchSelectorProps<T = boolean> =\n SwitchSelectorBaseProps<T> &\n VariantProps<typeof verticalSwitchSelectorVariant> &\n VariantProps<typeof verticalChoiceVariant>;\n\n/*\n Component that allows the user to select one of the provided choices.\n * This component is vertical.\n */\nexport const VerticalSwitchSelector = <T,>(\n props: VerticalSwitchSelectorProps<T>\n) => {\n const {\n choices = defaultChoices as SwitchSelectorChoices<T>,\n color = 'primary',\n size = 'md',\n className,\n itemClassName,\n } = props;\n\n const {\n selectedIndex,\n indicatorIndex,\n handleChange,\n optionsRefs,\n indicatorRef,\n choiceIndicatorPosition,\n setHoveredIndex,\n disabled,\n } = useSwitchSelector(\n {\n choices,\n value: props.value,\n defaultValue: props.defaultValue,\n onChange: props.onChange,\n hoverable: props.hoverable,\n disabled: props.disabled,\n },\n 'vertical'\n );\n\n return (\n <div\n className={verticalSwitchSelectorVariant({\n color,\n disabled,\n className,\n })}\n role=\"tablist\"\n aria-disabled={disabled ? 'true' : undefined}\n >\n <div className=\"relative flex h-fit w-full flex-col items-center justify-center\">\n {choices.map((choice, index) => {\n const { content, value, ...buttonProps } = choice;\n\n const isKeyOfKey =\n typeof value === 'string' \|\| typeof value === 'number';\n\n const isSelected = index === selectedIndex;\n const isIndicatorOwner = index === indicatorIndex;\n\n return (\n <button\n {...buttonProps}\n className={cn(\n verticalChoiceVariant({\n size,\n }),\n disabled && 'cursor-not-allowed',\n itemClassName\n )}\n key={isKeyOfKey ? value : index}\n role=\"tab\"\n onClick={() => handleChange(value)}\n aria-selected={isSelected ? 'true' : undefined}\n data-indicator={isIndicatorOwner ? 'true' : undefined}\n disabled={disabled \|\| isSelected}\n tabIndex={isSelected ? 0 : -1}\n ref={(el) => {\n optionsRefs.current[index] = el!;\n }}\n onMouseEnter={() => !disabled && setHoveredIndex(index)}\n onMouseLeave={() => !disabled && setHoveredIndex(null)}\n >\n {content}\n </button>\n );\n })}\n\n {choiceIndicatorPosition && (\n <div\n className={cn(\n verticalIndicatorVariant({\n color,\n })\n )}\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n />\n )}\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;AAWA,MAAM,gCAAgC,IACpC,iFACA;CACE,UAAU;EACR,OAAO;GACL,SAAS;GACT,WAAW;IACV,UAAe;GAChB,SAAS;GACT,OAAO;GACP,MAAM;GACN,MAAM;~~GACP~~;~~EACD~~,UAAU;GACR,MAAM;GACN,OAAO;~~GACR~~;~~EACF~~;~~CACD~~,iBAAiB;EACf,OAAO;EACP,UAAU;~~EACX~~;~~CACF~~,CACF;~~AAED~~,MAAM,wBAAwB,IAC5B,6LACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;~~EACL~~,EACF;~~CACD~~,iBAAiB,EACf,MAAM,~~MACP~~;~~CACF~~,CACF;~~AAED~~,MAAM,2BAA2B,IAC/B,sHACA,EACE,UAAU,EACR,OAAO;CACL,SAAS;CACT,WAAW;EACV,UAAe;CAChB,SAAS;CACT,OAAO;CACP,MAAM;CACN,MAAM;~~CACP~~,EACF,EACF,CACF;;;;;~~AAWD~~,MAAa,0BACX,UACG;CACH,MAAM,EACJ,UAAU,gBACV,QAAQ,WACR,OAAO,MACP,WACA,kBACE;CAEJ,MAAM,EACJ,eACA,gBACA,cACA,aACA,cACA,yBACA,iBACA,aACE,kBACF;EACE;EACA,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,UAAU,MAAM;EAChB,WAAW,MAAM;EACjB,UAAU,MAAM;~~EACjB~~,~~EACD~~,~~WACD~~;~~AAED~~,~~QACE~~,oBAAC,OAAD;EACE,WAAW,8BAA8B;GACvC;GACA;GACA;~~GACD~~,CAAC;~~EACF~~,MAAK;EACL,iBAAe,WAAW,SAAS;YAEnC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,QAAQ,KAAK,QAAQ,UAAU;IAC9B,MAAM,EAAE,SAAS,OAAO,GAAG,gBAAgB;IAE3C,MAAM,aACJ,OAAO,UAAU,YAAY,OAAO,UAAU;IAEhD,MAAM,aAAa,UAAU;IAC7B,MAAM,mBAAmB,UAAU;~~AAEnC~~,~~WACE~~,8BAAC,UAAD;KACE,GAAI;KACJ,WAAW,GACT,sBAAsB,EACpB,~~MACD~~,CAAC,~~EACF~~,YAAY,sBACZ,~~cACD~~;~~KACD~~,KAAK,aAAa,QAAQ;KAC1B,MAAK;KACL,eAAe,aAAa,~~MAAM~~;~~KAClC~~,iBAAe,aAAa,SAAS;KACrC,kBAAgB,mBAAmB,SAAS;KAC5C,UAAU,YAAY;KACtB,UAAU,aAAa,IAAI;KAC3B,MAAM,OAAO;~~AACX~~,~~kBAAY~~,QAAQ,SAAS~~;;KAE~~/B,oBAAoB,CAAC,YAAY,gBAAgB,~~MAAM~~;~~KACvD~~,oBAAoB,CAAC,YAAY,gBAAgB,~~KAAK~~;~~KAG~~/C,~~EADN~~,~~QACM~~;~~KAEX~~,~~EAED~~,2BACC,oBAAC,OAAD;IACE,WAAW,GACT,yBAAyB,EACvB,~~OACD~~,CAAC,CACH;~~IACD~~,OAAO;IACP,KAAK;~~IACL~~,EAEA;;~~EACF~~"}
1	+ {"version":3,"file":"VerticalSwitchSelector.mjs","names":[],"sources":["../../../../src/components/SwitchSelector/VerticalSwitchSelector.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n defaultChoices,\n type SwitchSelectorBaseProps,\n type SwitchSelectorChoices,\n} from './SwitchSelector';\nimport { useSwitchSelector } from './useSwitchSelector';\n\nconst verticalSwitchSelectorVariant = cva(\n 'flex h-fit w-fit cursor-pointer flex-col gap-2 rounded-2xl border-[1.3px] p-1',\n {\n variants: {\n color: {\n primary: 'border-primary text-primary',\n secondary: 'border-secondary text-secondary',\n [`${'error'}`]: 'border-error bg-error text-error',\n neutral: 'border-neutral text-neutral',\n light: 'border-white text-white',\n dark: 'border-neutral-800 text-neutral-800',\n text: 'border-text text-text',\n },\n disabled: {\n true: 'cursor-not-allowed opacity-50',\n false: '',\n },\n },\n defaultVariants: {\n color: `${'primary'}`,\n disabled: false,\n },\n }\n);\n\nconst verticalChoiceVariant = cva(\n 'z-1 w-full cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default data-[indicator=true]:text-text-opposite motion-reduce:transition-none',\n {\n variants: {\n size: {\n sm: 'px-2 py-1 text-xs',\n md: 'p-2 text-sm',\n lg: 'p-4 text-base',\n },\n },\n defaultVariants: {\n size: `${'md'}`,\n },\n }\n);\n\nconst verticalIndicatorVariant = cva(\n 'absolute left-0 z-0 h-auto w-full rounded-xl transition-all duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n primary: 'bg-primary data-[indicator=true]:text-text',\n secondary: 'bg-secondary data-[indicator=true]:text-text',\n [`${'error'}`]: 'bg-error data-[indicator=true]:text-text',\n neutral: 'bg-neutral data-[indicator=true]:text-white',\n light: 'bg-white data-[indicator=true]:text-black',\n dark: 'bg-neutral-800 data-[indicator=true]:text-white',\n text: 'bg-text data-[indicator=true]:text-text-opposite',\n },\n },\n }\n);\n\nexport type VerticalSwitchSelectorProps<T = boolean> =\n SwitchSelectorBaseProps<T> &\n VariantProps<typeof verticalSwitchSelectorVariant> &\n VariantProps<typeof verticalChoiceVariant>;\n\n/*\n Component that allows the user to select one of the provided choices.\n * This component is vertical.\n */\nexport const VerticalSwitchSelector = <T,>(\n props: VerticalSwitchSelectorProps<T>\n) => {\n const {\n choices = defaultChoices as SwitchSelectorChoices<T>,\n color = 'primary',\n size = 'md',\n className,\n itemClassName,\n } = props;\n\n const {\n selectedIndex,\n indicatorIndex,\n handleChange,\n optionsRefs,\n indicatorRef,\n choiceIndicatorPosition,\n setHoveredIndex,\n disabled,\n } = useSwitchSelector(\n {\n choices,\n value: props.value,\n defaultValue: props.defaultValue,\n onChange: props.onChange,\n hoverable: props.hoverable,\n disabled: props.disabled,\n },\n 'vertical'\n );\n\n return (\n <div\n className={verticalSwitchSelectorVariant({\n color,\n disabled,\n className,\n })}\n role=\"tablist\"\n aria-disabled={disabled ? 'true' : undefined}\n >\n <div className=\"relative flex h-fit w-full flex-col items-center justify-center\">\n {choices.map((choice, index) => {\n const { content, value, ...buttonProps } = choice;\n\n const isKeyOfKey =\n typeof value === 'string' \|\| typeof value === 'number';\n\n const isSelected = index === selectedIndex;\n const isIndicatorOwner = index === indicatorIndex;\n\n return (\n <button\n {...buttonProps}\n className={cn(\n verticalChoiceVariant({\n size,\n }),\n disabled && 'cursor-not-allowed',\n itemClassName\n )}\n key={isKeyOfKey ? value : index}\n role=\"tab\"\n onClick={() => handleChange(value)}\n aria-selected={isSelected ? 'true' : undefined}\n data-indicator={isIndicatorOwner ? 'true' : undefined}\n disabled={disabled \|\| isSelected}\n tabIndex={isSelected ? 0 : -1}\n ref={(el) => {\n optionsRefs.current[index] = el!;\n }}\n onMouseEnter={() => !disabled && setHoveredIndex(index)}\n onMouseLeave={() => !disabled && setHoveredIndex(null)}\n >\n {content}\n </button>\n );\n })}\n\n {choiceIndicatorPosition && (\n <div\n className={cn(\n verticalIndicatorVariant({\n color,\n })\n )}\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n />\n )}\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;AAWA,MAAM,gCAAgC,IACpC,iFACA;CACE,UAAU;EACR,OAAO;GACL,SAAS;GACT,WAAW;IACV,UAAe;GAChB,SAAS;GACT,OAAO;GACP,MAAM;GACN,MAAM;EACR;EACA,UAAU;GACR,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,OAAO;EACP,UAAU;CACZ;AACF,CACF;AAEA,MAAM,wBAAwB,IAC5B,6LACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF;AAEA,MAAM,2BAA2B,IAC/B,sHACA,EACE,UAAU,EACR,OAAO;CACL,SAAS;CACT,WAAW;EACV,UAAe;CAChB,SAAS;CACT,OAAO;CACP,MAAM;CACN,MAAM;AACR,EACF,EACF,CACF;;;;;AAWA,MAAa,0BACX,UACG;CACH,MAAM,EACJ,UAAU,gBACV,QAAQ,WACR,OAAO,MACP,WACA,kBACE;CAEJ,MAAM,EACJ,eACA,gBACA,cACA,aACA,cACA,yBACA,iBACA,aACE,kBACF;EACE;EACA,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,UAAU,MAAM;EAChB,WAAW,MAAM;EACjB,UAAU,MAAM;CAClB,GACA,UACF;CAEA,OACE,oBAAC,OAAD;EACE,WAAW,8BAA8B;GACvC;GACA;GACA;EACF,CAAC;EACD,MAAK;EACL,iBAAe,WAAW,SAAS;YAEnC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,QAAQ,KAAK,QAAQ,UAAU;IAC9B,MAAM,EAAE,SAAS,OAAO,GAAG,gBAAgB;IAE3C,MAAM,aACJ,OAAO,UAAU,YAAY,OAAO,UAAU;IAEhD,MAAM,aAAa,UAAU;IAC7B,MAAM,mBAAmB,UAAU;IAEnC,OACE,8BAAC,UAAD;KACE,GAAI;KACJ,WAAW,GACT,sBAAsB,EACpB,KACF,CAAC,GACD,YAAY,sBACZ,aACF;KACA,KAAK,aAAa,QAAQ;KAC1B,MAAK;KACL,eAAe,aAAa,KAAK;KACjC,iBAAe,aAAa,SAAS;KACrC,kBAAgB,mBAAmB,SAAS;KAC5C,UAAU,YAAY;KACtB,UAAU,aAAa,IAAI;KAC3B,MAAM,OAAO;MACX,YAAY,QAAQ,SAAS;KAC/B;KACA,oBAAoB,CAAC,YAAY,gBAAgB,KAAK;KACtD,oBAAoB,CAAC,YAAY,gBAAgB,IAAI;IAG/C,GADL,OACK;GAEZ,CAAC,GAEA,2BACC,oBAAC,OAAD;IACE,WAAW,GACT,yBAAyB,EACvB,MACF,CAAC,CACH;IACA,OAAO;IACP,KAAK;GACN,EAEA;;CACF;AAET"}

package/dist/esm/components/SwitchSelector/useSwitchSelector.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useSwitchSelector.mjs","names":[],"sources":["../../../../src/components/SwitchSelector/useSwitchSelector.ts"],"sourcesContent":["'use client';\n\nimport {\n type ItemSelectorOrientation,\n useItemSelector,\n} from '@hooks/useItemSelector';\nimport { useEffect, useRef, useState } from 'react';\nimport type { SwitchSelectorBaseProps } from './SwitchSelector';\n\nexport const useSwitchSelector = <T>(\n {\n choices = [],\n value,\n defaultValue,\n onChange,\n hoverable = true,\n disabled = false,\n }: SwitchSelectorBaseProps<T>,\n orientation: ItemSelectorOrientation\n) => {\n const [valueState, setValue] = useState<T>(\n value ?? defaultValue ?? choices[0]?.value\n );\n const [hoveredIndex, setHoveredIndex] = useState<number \| null>(null);\n\n const optionsRefs = useRef<HTMLButtonElement[]>([]);\n const indicatorRef = useRef<HTMLDivElement \| null>(null);\n const { choiceIndicatorPosition } = useItemSelector(optionsRefs, {\n selector: (el) => el.getAttribute('data-indicator') === 'true',\n isHoverable: false,\n orientation,\n });\n\n const selectedIndex = choices.findIndex(\n (choice) => choice.value === valueState\n );\n\n // The indicator follows hover if hoverable, otherwise the selected option\n const indicatorIndex =\n hoverable && hoveredIndex !== null ? hoveredIndex : selectedIndex;\n\n const handleChange = (newValue: T) => {\n setValue(newValue);\n onChange?.(newValue);\n };\n\n useEffect(() => {\n if (value === undefined) return;\n setValue(value);\n }, [value]);\n\n return {\n valueState,\n hoveredIndex,\n setHoveredIndex,\n optionsRefs,\n indicatorRef,\n choiceIndicatorPosition,\n selectedIndex,\n indicatorIndex,\n handleChange,\n disabled,\n };\n};\n"],"mappings":";;;;;;AASA,MAAa,qBACX,EACE,UAAU,~~EAAE~~,~~EACZ~~,OACA,cACA,UACA,YAAY,MACZ,WAAW,SAEb,gBACG;CACH,MAAM,CAAC,YAAY,YAAY,SAC7B,SAAS,gBAAgB,QAAQ,~~IAAI~~,~~MACtC~~;~~CACD~~,MAAM,CAAC,cAAc,mBAAmB,SAAwB,~~KAAK~~;~~CAErE~~,MAAM,cAAc,OAA4B,~~EAAE~~,CAAC;~~CACnD~~,MAAM,eAAe,OAA8B,~~KAAK~~;~~CACxD~~,MAAM,EAAE,4BAA4B,gBAAgB,aAAa;EAC/D,WAAW,OAAO,GAAG,aAAa,~~iBAAiB~~,~~KAAK~~;EACxD,aAAa;EACb;~~EACD~~,CAAC;~~CAEF~~,MAAM,gBAAgB,QAAQ,WAC3B,WAAW,OAAO,UAAU,~~WAC9B~~;~~CAGD~~,MAAM,iBACJ,aAAa,iBAAiB,OAAO,eAAe;CAEtD,MAAM,gBAAgB,aAAgB;~~AACpC~~,~~WAAS~~,~~SAAS~~;~~AAClB~~,~~aAAW~~,~~SAAS;;AAGtB~~,~~iBAAgB~~;~~AACd~~,~~MAAI~~,UAAU,~~OAAW~~;~~AACzB~~,~~WAAS~~,~~MAAM~~;~~IACd~~,CAAC,~~MAAM~~,CAAC;~~AAEX~~,~~QAAO~~;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;~~EACD~~"}
1	+ {"version":3,"file":"useSwitchSelector.mjs","names":[],"sources":["../../../../src/components/SwitchSelector/useSwitchSelector.ts"],"sourcesContent":["'use client';\n\nimport {\n type ItemSelectorOrientation,\n useItemSelector,\n} from '@hooks/useItemSelector';\nimport { useEffect, useRef, useState } from 'react';\nimport type { SwitchSelectorBaseProps } from './SwitchSelector';\n\nexport const useSwitchSelector = <T>(\n {\n choices = [],\n value,\n defaultValue,\n onChange,\n hoverable = true,\n disabled = false,\n }: SwitchSelectorBaseProps<T>,\n orientation: ItemSelectorOrientation\n) => {\n const [valueState, setValue] = useState<T>(\n value ?? defaultValue ?? choices[0]?.value\n );\n const [hoveredIndex, setHoveredIndex] = useState<number \| null>(null);\n\n const optionsRefs = useRef<HTMLButtonElement[]>([]);\n const indicatorRef = useRef<HTMLDivElement \| null>(null);\n const { choiceIndicatorPosition } = useItemSelector(optionsRefs, {\n selector: (el) => el.getAttribute('data-indicator') === 'true',\n isHoverable: false,\n orientation,\n });\n\n const selectedIndex = choices.findIndex(\n (choice) => choice.value === valueState\n );\n\n // The indicator follows hover if hoverable, otherwise the selected option\n const indicatorIndex =\n hoverable && hoveredIndex !== null ? hoveredIndex : selectedIndex;\n\n const handleChange = (newValue: T) => {\n setValue(newValue);\n onChange?.(newValue);\n };\n\n useEffect(() => {\n if (value === undefined) return;\n setValue(value);\n }, [value]);\n\n return {\n valueState,\n hoveredIndex,\n setHoveredIndex,\n optionsRefs,\n indicatorRef,\n choiceIndicatorPosition,\n selectedIndex,\n indicatorIndex,\n handleChange,\n disabled,\n };\n};\n"],"mappings":";;;;;;AASA,MAAa,qBACX,EACE,UAAU,CAAC,GACX,OACA,cACA,UACA,YAAY,MACZ,WAAW,SAEb,gBACG;CACH,MAAM,CAAC,YAAY,YAAY,SAC7B,SAAS,gBAAgB,QAAQ,EAAE,EAAE,KACvC;CACA,MAAM,CAAC,cAAc,mBAAmB,SAAwB,IAAI;CAEpE,MAAM,cAAc,OAA4B,CAAC,CAAC;CAClD,MAAM,eAAe,OAA8B,IAAI;CACvD,MAAM,EAAE,4BAA4B,gBAAgB,aAAa;EAC/D,WAAW,OAAO,GAAG,aAAa,gBAAgB,MAAM;EACxD,aAAa;EACb;CACF,CAAC;CAED,MAAM,gBAAgB,QAAQ,WAC3B,WAAW,OAAO,UAAU,UAC/B;CAGA,MAAM,iBACJ,aAAa,iBAAiB,OAAO,eAAe;CAEtD,MAAM,gBAAgB,aAAgB;EACpC,SAAS,QAAQ;EACjB,WAAW,QAAQ;CACrB;CAEA,gBAAgB;EACd,IAAI,UAAU,QAAW;EACzB,SAAS,KAAK;CAChB,GAAG,CAAC,KAAK,CAAC;CAEV,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}

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

@@ -62,11 +62,13 @@ const TabComponent = ({ defaultTab, group, variant, children, className, headerC
 		itemIndex: activeTabIndex,
 		itemCount: tabsCount,
 		onSwipeLeft: () => {
-			const nextValue = tabItems[Math.min(tabsCount - 1, activeTabIndex + 1)]?.props?.value;
+			const targetIndex = Math.min(tabsCount - 1, activeTabIndex + 1);
+			const nextValue = tabItems[targetIndex]?.props?.value;
 			if (nextValue) handleSetActiveTab(nextValue);
 		},
 		onSwipeRight: () => {
-			const nextValue = tabItems[Math.max(0, activeTabIndex - 1)]?.props?.value;
+			const targetIndex = Math.max(0, activeTabIndex - 1);
+			const nextValue = tabItems[targetIndex]?.props?.value;
 			if (nextValue) handleSetActiveTab(nextValue);
 		}
 	});

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 } 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=\"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-3 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":";;;;;;;;;;;AAuBA,MAAM,aAAa,cAA0C,OAAU;AAGvE,MAAM,sBAAsB,IAAI,8BAA8B;CAC5D,UAAU;EACR,YAAY;GACV,MAAM;GACN,SAAS;GACV;EACD,SAAS;GACP,SAAS;GACT,UAAU;GACV,OAAO;GACR;EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CAAC;;;;;AAsBF,MAAM,WAAW,EAAE,UAAU,GAAG,YAG9B,oBAAC,OAAD;CAAK,GAAI;CAAQ;CAAe;AAIlC,QAAQ,cAAc;;;;;;;;;;;;;;;;AAiBtB,MAAM,gBAAgB,EACpB,YACA,OACA,SACA,UACA,WACA,iBACA,YACA,GAAG,YACW;CAEd,MAAM,WAAW,SAAS,QAAQ,SAAS,CAAC,QAAQ,UAAU;AAC5D,SAAO,eAAe,MAAM,IAAI,MAAM,SAAS;GAC/C;CAEF,MAAM,gBAAgB,SAAS,IAAI,OAAO;CAC1C,MAAM,EAAE,YAAY,kBAAkB,eAAe;CACrD,MAAM,CAAC,WAAW,gBAAgB,SAAS,cAAc,iBAAiB,GAAG;CAE7E,MAAM,mBADW,SAAS,OAAO,eAAe,WAElC,aAAa,SAAS,cAAc,cAAc;CAChE,MAAM,iBAAiB,SAAS,WAC7B,QAAQ,IAAI,MAAM,UAAU,gBAC9B;CAED,MAAM,YAAY,SAAS;CAE3B,MAAM,EAAE,gBAAgB,cAAc,eAAe,mBAAmB;EACtE,WAAW;EACX,WAAW;EACX,mBAAmB;GAEjB,MAAM,YAAY,SADE,KAAK,IAAI,YAAY,GAAG,iBAAiB,EACvB,GAAG,OAAO;AAChD,OAAI,UAAW,oBAAmB,UAAU;;EAE9C,oBAAoB;GAElB,MAAM,YAAY,SADE,KAAK,IAAI,GAAG,iBAAiB,EACX,GAAG,OAAO;AAChD,OAAI,UAAW,oBAAmB,UAAU;;EAE/C,CAAC;CAEF,MAAM,sBAAsB,QAAgB;AAC1C,eAAa,IAAI;AAEjB,MAAI,OAAO,kBAAkB,WAC3B,gBAAe,UAAU;GAAE,GAAG;IAAO,QAAS;GAAK,EAAE;;CAIzD,MAAM,eAA+B;EACnC,WAAW,aAAa,iBAAiB;EACzC,cAAc;EACf;AAED,QACE,oBAAC,WAAW,UAAZ;EAAqB,OAAO;YAC1B,qBAAC,OAAD;GACE,WAAW,GACT,oBAAoB,EAAE,SAAS,CAAC,EAChC,cAAc,wCACd,UACD;GACD,GAAI;aANN,CASE,oBAAC,OAAD;IAAK,WAAW,GAAG,2BAA2B,gBAAgB;cAC5D,oBAAC,aAAD;KACE,gBAAgB;KAChB,MAAM,SAAS,KAAK,UAAU;MAC5B,MAAM,EAAE,OAAO,OAAO,aAAa,MAAM;MACzC,MAAM,WAAW,oBAAoB;AAErC,aACE,oBAAC,UAAD;OAEE,WAAW,GACT,kHACA,CAAC,YAAY,kBACd;OACD,eAAa;OACH;OACV,eAAe,CAAC,YAAY,mBAAmB,MAAM;OACrD,MAAK;OACL,iBAAe;OACf,iBAAe,YAAY;OAC3B,IAAI,OAAO;OACX,MAAK;iBAEJ,SAAS;OACH,EAfF,MAeE;OAEX;KACF;KACA,OAAM;KACN;IACE,GAGN,oBAAC,OAAD;IACE,WAAW,GACT,6FACA,cAAc,iBACf;IACD,GAAI;cAGJ,oBAAC,OAAD;KACE,MAAK;KACL,oBAAiB;KACjB,WAAW,GACT,uBACA,cAAc,UACd,aACI,oBACA,gDACL;KACD,OAAO;MACL,qBAAqB,UAAU,SAAS,OAAO;MAC/C,WAAW,eAAe,iBAAiB,OAAO,aAAa,eAAe,GAAG;MAClF;eAEA,SAAS,KAAK,EAAE,SAAS,UAAU;MAClC,MAAM,EAAE,OAAO,UAAU,WAAW,kBAAkB;MACtD,MAAM,WAAW,UAAU;AAE3B,aACE,oBAAC,OAAD;OAEE,MAAK;OACL,mBAAiB,OAAO;OACxB,IAAI,YAAY;OAChB,eAAa,CAAC;OACd,UAAU,WAAW,IAAI;OACzB,eAAa;OACb,WAAW,GACT,8EACA,cAAc,0BACd,CAAC,YAAY,iCACb,cACD;iBAED,oBAAC,OAAD;QACE,WAAW,GACT,oDACA,cAAc,aACf;QAEA;QACG;OACF,EAtBC,MAsBD;OAER;KACE;IACF,EACF;;EACc;;AAK1B,MAAa,MAAM,OAAO,OAAO,cAAc,EAC7C,MAAM,SACP,CAAC"}
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 } 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=\"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-3 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":";;;;;;;;;;;AAuBA,MAAM,aAAa,cAA0C,MAAS;AAGtE,MAAM,sBAAsB,IAAI,8BAA8B;CAC5D,UAAU;EACR,YAAY;GACV,MAAM;GACN,SAAS;EACX;EACA,SAAS;GACP,SAAS;GACT,UAAU;GACV,OAAO;EACT;CACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CAAC;;;;;AAsBD,MAAM,WAAW,EAAE,UAAU,GAAG,YAG9B,oBAAC,OAAD;CAAK,GAAI;CAAQ;AAAc;AAIjC,QAAQ,cAAc;;;;;;;;;;;;;;;;AAiBtB,MAAM,gBAAgB,EACpB,YACA,OACA,SACA,UACA,WACA,iBACA,YACA,GAAG,YACW;CAEd,MAAM,WAAW,SAAS,QAAQ,QAAQ,CAAC,CAAC,QAAQ,UAAU;EAC5D,OAAO,eAAe,KAAK,KAAK,MAAM,SAAS;CACjD,CAAC;CAED,MAAM,gBAAgB,SAAS,EAAE,EAAE,OAAO;CAC1C,MAAM,EAAE,YAAY,kBAAkB,cAAc;CACpD,MAAM,CAAC,WAAW,gBAAgB,SAAS,cAAc,iBAAiB,EAAE;CAE5E,MAAM,mBADW,SAAS,OAAO,eAAe,WAElC,aAAa,SAAS,cAAc,cAAc;CAChE,MAAM,iBAAiB,SAAS,WAC7B,QAAQ,IAAI,MAAM,UAAU,eAC/B;CAEA,MAAM,YAAY,SAAS;CAE3B,MAAM,EAAE,gBAAgB,cAAc,eAAe,mBAAmB;EACtE,WAAW;EACX,WAAW;EACX,mBAAmB;GACjB,MAAM,cAAc,KAAK,IAAI,YAAY,GAAG,iBAAiB,CAAC;GAC9D,MAAM,YAAY,SAAS,YAAY,EAAE,OAAO;GAChD,IAAI,WAAW,mBAAmB,SAAS;EAC7C;EACA,oBAAoB;GAClB,MAAM,cAAc,KAAK,IAAI,GAAG,iBAAiB,CAAC;GAClD,MAAM,YAAY,SAAS,YAAY,EAAE,OAAO;GAChD,IAAI,WAAW,mBAAmB,SAAS;EAC7C;CACF,CAAC;CAED,MAAM,sBAAsB,QAAgB;EAC1C,aAAa,GAAG;EAEhB,IAAI,OAAO,kBAAkB,YAC3B,eAAe,UAAU;GAAE,GAAG;IAAO,QAAS;EAAI,EAAE;CAExD;CAEA,MAAM,eAA+B;EACnC,WAAW,aAAa,iBAAiB;EACzC,cAAc;CAChB;CAEA,OACE,oBAAC,WAAW,UAAZ;EAAqB,OAAO;YAC1B,qBAAC,OAAD;GACE,WAAW,GACT,oBAAoB,EAAE,QAAQ,CAAC,GAC/B,cAAc,wCACd,SACF;GACA,GAAI;aANN,CASE,oBAAC,OAAD;IAAK,WAAW,GAAG,2BAA2B,eAAe;cAC3D,oBAAC,aAAD;KACE,gBAAgB;KAChB,MAAM,SAAS,KAAK,UAAU;MAC5B,MAAM,EAAE,OAAO,OAAO,aAAa,MAAM;MACzC,MAAM,WAAW,oBAAoB;MAErC,OACE,oBAAC,UAAD;OAEE,WAAW,GACT,kHACA,CAAC,YAAY,iBACf;OACA,eAAa;OACH;OACV,eAAe,CAAC,YAAY,mBAAmB,KAAK;OACpD,MAAK;OACL,iBAAe;OACf,iBAAe,YAAY;OAC3B,IAAI,OAAO;OACX,MAAK;iBAEJ,SAAS;MACJ,GAfD,KAeC;KAEZ,CAAC;KACD;KACA,OAAM;IACP;GACE,IAGL,oBAAC,OAAD;IACE,WAAW,GACT,6FACA,cAAc,gBAChB;IACA,GAAI;cAGJ,oBAAC,OAAD;KACE,MAAK;KACL,oBAAiB;KACjB,WAAW,GACT,uBACA,cAAc,UACd,aACI,oBACA,+CACN;KACA,OAAO;MACL,qBAAqB,UAAU,SAAS,OAAO;MAC/C,WAAW,eAAe,iBAAiB,OAAO,aAAa,eAAe,GAAG;KACnF;eAEC,SAAS,KAAK,EAAE,SAAS,UAAU;MAClC,MAAM,EAAE,OAAO,UAAU,WAAW,kBAAkB;MACtD,MAAM,WAAW,UAAU;MAE3B,OACE,oBAAC,OAAD;OAEE,MAAK;OACL,mBAAiB,OAAO;OACxB,IAAI,YAAY;OAChB,eAAa,CAAC;OACd,UAAU,WAAW,IAAI;OACzB,eAAa;OACb,WAAW,GACT,8EACA,cAAc,0BACd,CAAC,YAAY,iCACb,aACF;iBAEA,oBAAC,OAAD;QACE,WAAW,GACT,oDACA,cAAc,YAChB;QAEC;OACE;MACF,GAtBE,KAsBF;KAET,CAAC;IACE;GACF,EACF;;CACc;AAEzB;AAGA,MAAa,MAAM,OAAO,OAAO,cAAc,EAC7C,MAAM,QACR,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TabContext.mjs","names":[],"sources":["../../../../src/components/Tab/TabContext.tsx"],"sourcesContent":["'use client';\n\nimport {\n createContext,\n type Dispatch,\n type FC,\n type PropsWithChildren,\n type SetStateAction,\n useContext,\n useState,\n} from 'react';\n\ntype TabContextValue = {\n tabsValues: Record<string, any>;\n setTabsValues: Dispatch<SetStateAction<Record<string, any>>>;\n};\n\n/*\n Context that store the current locale on the client side\n /\nexport const TabContext = createContext<TabContextValue>({\n tabsValues: {},\n setTabsValues: (() => {}) as Dispatch<SetStateAction<Record<string, any>>>,\n});\n\n/\n Hook that provides the current locale\n /\nexport const useTabContext = () => useContext(TabContext);\n\n/\n Provider that store the current locale on the client side\n */\nexport const TabProvider: FC<PropsWithChildren> = ({ children }) => {\n const [tabsValues, setTabsValues] = useState<Record<string, any>>({});\n\n return (\n <TabContext\n value={{\n tabsValues,\n setTabsValues,\n }}\n >\n {children}\n </TabContext>\n );\n};\n"],"mappings":";;;;;;;;;AAoBA,MAAa,aAAa,cAA+B;CACvD,YAAY,~~EAAE~~;~~CACd~~,sBAAsB;~~CACvB~~,CAAC;;;;~~AAKF~~,MAAa,sBAAsB,WAAW,~~WAAW~~;;;;~~AAKzD~~,MAAa,eAAsC,EAAE,eAAe;CAClE,MAAM,CAAC,YAAY,iBAAiB,SAA8B,~~EAAE~~,CAAC;~~AAErE~~,~~QACE~~,oBAAC,YAAD;EACE,OAAO;GACL;GACA;~~GACD~~;~~EAEA~~;~~EACU~~"}
1	+ {"version":3,"file":"TabContext.mjs","names":[],"sources":["../../../../src/components/Tab/TabContext.tsx"],"sourcesContent":["'use client';\n\nimport {\n createContext,\n type Dispatch,\n type FC,\n type PropsWithChildren,\n type SetStateAction,\n useContext,\n useState,\n} from 'react';\n\ntype TabContextValue = {\n tabsValues: Record<string, any>;\n setTabsValues: Dispatch<SetStateAction<Record<string, any>>>;\n};\n\n/*\n Context that store the current locale on the client side\n /\nexport const TabContext = createContext<TabContextValue>({\n tabsValues: {},\n setTabsValues: (() => {}) as Dispatch<SetStateAction<Record<string, any>>>,\n});\n\n/\n Hook that provides the current locale\n /\nexport const useTabContext = () => useContext(TabContext);\n\n/\n Provider that store the current locale on the client side\n */\nexport const TabProvider: FC<PropsWithChildren> = ({ children }) => {\n const [tabsValues, setTabsValues] = useState<Record<string, any>>({});\n\n return (\n <TabContext\n value={{\n tabsValues,\n setTabsValues,\n }}\n >\n {children}\n </TabContext>\n );\n};\n"],"mappings":";;;;;;;;;AAoBA,MAAa,aAAa,cAA+B;CACvD,YAAY,CAAC;CACb,sBAAsB,CAAC;AACzB,CAAC;;;;AAKD,MAAa,sBAAsB,WAAW,UAAU;;;;AAKxD,MAAa,eAAsC,EAAE,eAAe;CAClE,MAAM,CAAC,YAAY,iBAAiB,SAA8B,CAAC,CAAC;CAEpE,OACE,oBAAC,YAAD;EACE,OAAO;GACL;GACA;EACF;EAEC;CACS;AAEhB"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TabSelector.mjs","names":[],"sources":["../../../../src/components/TabSelector/TabSelector.tsx"],"sourcesContent":["'use client';\n\nimport {\n type ItemSelectorOrientation,\n useItemSelector,\n} from '@hooks/useItemSelector';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n cloneElement,\n type HTMLAttributes,\n type MouseEvent,\n type ReactElement,\n useEffect,\n useRef,\n} from 'react';\n\nexport type TabSelectorColor =\n \| 'primary'\n \| 'secondary'\n \| 'error'\n \| 'neutral'\n \| 'light'\n \| 'dark'\n \| 'text';\n\nconst tabSelectorVariant = cva(\n 'relative z-0 flex size-full flex-row items-center gap-2',\n {\n variants: {\n color: {\n primary: 'border-primary text-primary',\n secondary: 'border-secondary text-secondary',\n error: 'border-error bg-error text-error',\n neutral: 'border-neutral text-neutral',\n light: 'border-white text-white',\n dark: 'border-neutral-800 text-neutral-800',\n text: 'border-text text-text',\n },\n },\n defaultVariants: {\n color: 'primary',\n },\n }\n);\n\nconst indicatorVariant = cva(\n 'absolute -z-1 rounded-lg duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n primary: 'bg-primary/10 aria-selected:text-text',\n secondary: 'bg-secondary/10 aria-selected:text-text',\n error: 'bg-error/10 aria-selected:text-text',\n neutral: 'bg-neutral/10 aria-selected:text-white/10',\n light: 'bg-white/10 aria-selected:text-black',\n dark: 'bg-neutral-800/10 aria-selected:text-white',\n text: 'bg-text/10 aria-selected:text-text-opposite',\n },\n orientation: {\n horizontal: 'top-0 h-full w-auto transition-[left,width]',\n vertical: 'left-0 h-auto w-full transition-[top,height]',\n },\n },\n defaultVariants: {\n orientation: 'horizontal',\n },\n }\n);\n\nexport type TabSelectorItemProps = HTMLAttributes<HTMLElement> & {\n key: string \| number;\n};\n\nexport type TabSelectorProps<T extends TabSelectorItemProps> = {\n tabs: ReactElement<T>[];\n selectedChoice: T['key'];\n onTabClick?: (choice: T['key']) => void;\n hoverable?: boolean;\n orientation?: ItemSelectorOrientation;\n} & HTMLAttributes<HTMLElement> &\n Omit<VariantProps<typeof tabSelectorVariant>, 'color'> & {\n color?: TabSelectorColor \| `${TabSelectorColor}`;\n };\n\n/*\n \n * Component that allows the user to select one of the provided choices.\n \n Example:\n * ```jsx\n * <TabSelector\n * selectedChoice=\"option1\"\n * onTabClick={(choice) => console.log(choice)}\n * hoverable={true}\n * >\n * <Button key=\"option1\"/>\n * <Button key=\"option2\"/>\n * <Button key=\"option3\"/>\n * </TabSelector>\n * ```\n */\nexport const TabSelector = <T extends TabSelectorItemProps>({\n tabs,\n selectedChoice,\n onTabClick,\n color = 'primary',\n hoverable = false,\n orientation = 'horizontal',\n className,\n}: TabSelectorProps<T>) => {\n const optionsRefs = useRef<HTMLElement[]>([]);\n const indicatorRef = useRef<HTMLDivElement \| null>(null);\n const { choiceIndicatorPosition, calculatePosition } = useItemSelector(\n optionsRefs,\n { isHoverable: hoverable, orientation }\n );\n\n useEffect(() => {\n calculatePosition();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [selectedChoice]);\n\n return (\n <div\n className={cn(\n tabSelectorVariant({\n color,\n }),\n className\n )}\n aria-orientation={orientation}\n aria-multiselectable=\"false\"\n role=\"tablist\"\n >\n {tabs.map((Tab, index) => {\n const key = Tab.key!;\n\n const isSelected = selectedChoice === key;\n\n return cloneElement(Tab, {\n key: key ?? index,\n role: 'tab',\n onClick: (e: MouseEvent<HTMLElement>) => {\n Tab.props?.onClick?.(e);\n onTabClick?.(key);\n },\n 'aria-selected': isSelected,\n 'data-active': isSelected as unknown as string,\n tabIndex: isSelected ? 0 : -1,\n ref: (el: HTMLElement) => {\n optionsRefs.current[index] = el!;\n },\n } as unknown as T);\n })}\n {choiceIndicatorPosition && (\n <div\n className={cn(\n indicatorVariant({\n color,\n orientation,\n })\n )}\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n key={`${selectedChoice}${JSON.stringify(tabs.map((tab) => tab.key))}`}\n />\n )}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;AA0BA,MAAM,qBAAqB,IACzB,2DACA;CACE,UAAU,EACR,OAAO;EACL,SAAS;EACT,WAAW;EACX,OAAO;EACP,SAAS;EACT,OAAO;EACP,MAAM;EACN,MAAM;~~EACP~~,EACF;~~CACD~~,iBAAiB,EACf,OAAO,~~WACR~~;~~CACF~~,CACF;~~AAED~~,MAAM,mBAAmB,IACvB,mFACA;CACE,UAAU;EACR,OAAO;GACL,SAAS;GACT,WAAW;GACX,OAAO;GACP,SAAS;GACT,OAAO;GACP,MAAM;GACN,MAAM;~~GACP~~;~~EACD~~,aAAa;GACX,YAAY;GACZ,UAAU;~~GACX~~;~~EACF~~;~~CACD~~,iBAAiB,EACf,aAAa,~~cACd~~;~~CACF~~,CACF;;;;;;;;;;;;;;;;;;~~AAkCD~~,MAAa,eAA+C,EAC1D,MACA,gBACA,YACA,QAAQ,WACR,YAAY,OACZ,cAAc,cACd,gBACyB;CACzB,MAAM,cAAc,OAAsB,~~EAAE~~,CAAC;~~CAC7C~~,MAAM,eAAe,OAA8B,~~KAAK~~;~~CACxD~~,MAAM,EAAE,yBAAyB,sBAAsB,gBACrD,aACA;EAAE,aAAa;EAAW;~~EAAa~~,CACxC;~~AAED~~,~~iBAAgB~~;~~AACd~~,~~qBAAmB~~;~~IAElB~~,CAAC,~~eAAe~~,CAAC;~~AAEpB~~,~~QACE~~,qBAAC,OAAD;EACE,WAAW,GACT,mBAAmB,EACjB,~~OACD~~,CAAC,~~EACF~~,~~UACD~~;~~EACD~~,oBAAkB;EAClB,wBAAqB;EACrB,MAAK;YATP,CAWG,KAAK,KAAK,KAAK,UAAU;GACxB,MAAM,MAAM,IAAI;GAEhB,MAAM,aAAa,mBAAmB;~~AAEtC~~,~~UAAO~~,aAAa,KAAK;IACvB,KAAK,OAAO;IACZ,MAAM;IACN,UAAU,MAA+B;~~AACvC~~,~~SAAI~~,OAAO,UAAU,~~EAAE~~;~~AACvB~~,~~kBAAa~~,~~IAAI;;IAEnB~~,iBAAiB;IACjB,eAAe;IACf,UAAU,aAAa,IAAI;IAC3B,MAAM,OAAoB;~~AACxB~~,~~iBAAY~~,QAAQ,SAAS~~;;IAEhC~~,CAAiB;~~IAClB~~,~~EACD~~,2BACC,oBAAC,OAAD;GACE,WAAW,GACT,iBAAiB;IACf;IACA;~~IACD~~,CAAC,CACH;~~GACD~~,OAAO;GACP,KAAK;~~GAEL~~,~~EADK~~,GAAG,iBAAiB,KAAK,UAAU,KAAK,KAAK,QAAQ,IAAI,~~IAAI~~,CAAC,GACnE,CAEA"}
1	+ {"version":3,"file":"TabSelector.mjs","names":[],"sources":["../../../../src/components/TabSelector/TabSelector.tsx"],"sourcesContent":["'use client';\n\nimport {\n type ItemSelectorOrientation,\n useItemSelector,\n} from '@hooks/useItemSelector';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n cloneElement,\n type HTMLAttributes,\n type MouseEvent,\n type ReactElement,\n useEffect,\n useRef,\n} from 'react';\n\nexport type TabSelectorColor =\n \| 'primary'\n \| 'secondary'\n \| 'error'\n \| 'neutral'\n \| 'light'\n \| 'dark'\n \| 'text';\n\nconst tabSelectorVariant = cva(\n 'relative z-0 flex size-full flex-row items-center gap-2',\n {\n variants: {\n color: {\n primary: 'border-primary text-primary',\n secondary: 'border-secondary text-secondary',\n error: 'border-error bg-error text-error',\n neutral: 'border-neutral text-neutral',\n light: 'border-white text-white',\n dark: 'border-neutral-800 text-neutral-800',\n text: 'border-text text-text',\n },\n },\n defaultVariants: {\n color: 'primary',\n },\n }\n);\n\nconst indicatorVariant = cva(\n 'absolute -z-1 rounded-lg duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n primary: 'bg-primary/10 aria-selected:text-text',\n secondary: 'bg-secondary/10 aria-selected:text-text',\n error: 'bg-error/10 aria-selected:text-text',\n neutral: 'bg-neutral/10 aria-selected:text-white/10',\n light: 'bg-white/10 aria-selected:text-black',\n dark: 'bg-neutral-800/10 aria-selected:text-white',\n text: 'bg-text/10 aria-selected:text-text-opposite',\n },\n orientation: {\n horizontal: 'top-0 h-full w-auto transition-[left,width]',\n vertical: 'left-0 h-auto w-full transition-[top,height]',\n },\n },\n defaultVariants: {\n orientation: 'horizontal',\n },\n }\n);\n\nexport type TabSelectorItemProps = HTMLAttributes<HTMLElement> & {\n key: string \| number;\n};\n\nexport type TabSelectorProps<T extends TabSelectorItemProps> = {\n tabs: ReactElement<T>[];\n selectedChoice: T['key'];\n onTabClick?: (choice: T['key']) => void;\n hoverable?: boolean;\n orientation?: ItemSelectorOrientation;\n} & HTMLAttributes<HTMLElement> &\n Omit<VariantProps<typeof tabSelectorVariant>, 'color'> & {\n color?: TabSelectorColor \| `${TabSelectorColor}`;\n };\n\n/*\n \n * Component that allows the user to select one of the provided choices.\n \n Example:\n * ```jsx\n * <TabSelector\n * selectedChoice=\"option1\"\n * onTabClick={(choice) => console.log(choice)}\n * hoverable={true}\n * >\n * <Button key=\"option1\"/>\n * <Button key=\"option2\"/>\n * <Button key=\"option3\"/>\n * </TabSelector>\n * ```\n */\nexport const TabSelector = <T extends TabSelectorItemProps>({\n tabs,\n selectedChoice,\n onTabClick,\n color = 'primary',\n hoverable = false,\n orientation = 'horizontal',\n className,\n}: TabSelectorProps<T>) => {\n const optionsRefs = useRef<HTMLElement[]>([]);\n const indicatorRef = useRef<HTMLDivElement \| null>(null);\n const { choiceIndicatorPosition, calculatePosition } = useItemSelector(\n optionsRefs,\n { isHoverable: hoverable, orientation }\n );\n\n useEffect(() => {\n calculatePosition();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [selectedChoice]);\n\n return (\n <div\n className={cn(\n tabSelectorVariant({\n color,\n }),\n className\n )}\n aria-orientation={orientation}\n aria-multiselectable=\"false\"\n role=\"tablist\"\n >\n {tabs.map((Tab, index) => {\n const key = Tab.key!;\n\n const isSelected = selectedChoice === key;\n\n return cloneElement(Tab, {\n key: key ?? index,\n role: 'tab',\n onClick: (e: MouseEvent<HTMLElement>) => {\n Tab.props?.onClick?.(e);\n onTabClick?.(key);\n },\n 'aria-selected': isSelected,\n 'data-active': isSelected as unknown as string,\n tabIndex: isSelected ? 0 : -1,\n ref: (el: HTMLElement) => {\n optionsRefs.current[index] = el!;\n },\n } as unknown as T);\n })}\n {choiceIndicatorPosition && (\n <div\n className={cn(\n indicatorVariant({\n color,\n orientation,\n })\n )}\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n key={`${selectedChoice}${JSON.stringify(tabs.map((tab) => tab.key))}`}\n />\n )}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;AA0BA,MAAM,qBAAqB,IACzB,2DACA;CACE,UAAU,EACR,OAAO;EACL,SAAS;EACT,WAAW;EACX,OAAO;EACP,SAAS;EACT,OAAO;EACP,MAAM;EACN,MAAM;CACR,EACF;CACA,iBAAiB,EACf,OAAO,UACT;AACF,CACF;AAEA,MAAM,mBAAmB,IACvB,mFACA;CACE,UAAU;EACR,OAAO;GACL,SAAS;GACT,WAAW;GACX,OAAO;GACP,SAAS;GACT,OAAO;GACP,MAAM;GACN,MAAM;EACR;EACA,aAAa;GACX,YAAY;GACZ,UAAU;EACZ;CACF;CACA,iBAAiB,EACf,aAAa,aACf;AACF,CACF;;;;;;;;;;;;;;;;;;AAkCA,MAAa,eAA+C,EAC1D,MACA,gBACA,YACA,QAAQ,WACR,YAAY,OACZ,cAAc,cACd,gBACyB;CACzB,MAAM,cAAc,OAAsB,CAAC,CAAC;CAC5C,MAAM,eAAe,OAA8B,IAAI;CACvD,MAAM,EAAE,yBAAyB,sBAAsB,gBACrD,aACA;EAAE,aAAa;EAAW;CAAY,CACxC;CAEA,gBAAgB;EACd,kBAAkB;CAEpB,GAAG,CAAC,cAAc,CAAC;CAEnB,OACE,qBAAC,OAAD;EACE,WAAW,GACT,mBAAmB,EACjB,MACF,CAAC,GACD,SACF;EACA,oBAAkB;EAClB,wBAAqB;EACrB,MAAK;YATP,CAWG,KAAK,KAAK,KAAK,UAAU;GACxB,MAAM,MAAM,IAAI;GAEhB,MAAM,aAAa,mBAAmB;GAEtC,OAAO,aAAa,KAAK;IACvB,KAAK,OAAO;IACZ,MAAM;IACN,UAAU,MAA+B;KACvC,IAAI,OAAO,UAAU,CAAC;KACtB,aAAa,GAAG;IAClB;IACA,iBAAiB;IACjB,eAAe;IACf,UAAU,aAAa,IAAI;IAC3B,MAAM,OAAoB;KACxB,YAAY,QAAQ,SAAS;IAC/B;GACF,CAAiB;EACnB,CAAC,GACA,2BACC,oBAAC,OAAD;GACE,WAAW,GACT,iBAAiB;IACf;IACA;GACF,CAAC,CACH;GACA,OAAO;GACP,KAAK;EAEN,GADM,GAAG,iBAAiB,KAAK,UAAU,KAAK,KAAK,QAAQ,IAAI,GAAG,CAAC,GACnE,CAEA;;AAET"}

package/dist/esm/components/Table/ExpandButton.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpandButton.mjs","names":[],"sources":["../../../../src/components/Table/ExpandButton.tsx"],"sourcesContent":["import { Popover } from '@components/Popover';\nimport { MoveDiagonal } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button } from '../Button';\n\ntype ExpandButtonProps = {\n setIsModalOpen: (isOpen: boolean) => void;\n};\n\nexport const ExpandButton: FC<ExpandButtonProps> = ({ setIsModalOpen }) => {\n const { modal: modalContent } = useIntlayer('table');\n\n return (\n <div className=\"pointer-events-none absolute inset-y-0 right-4 z-10\">\n <div className=\"pointer-events-auto sticky top-48 pt-4\">\n <Popover identifier=\"expand\">\n <Button\n variant=\"hoverable\"\n size=\"icon-md\"\n onClick={() => {\n setIsModalOpen(true);\n }}\n label={modalContent.title}\n Icon={MoveDiagonal}\n />\n\n <Popover.Detail\n identifier=\"expand\"\n className=\"flex min-w-64 flex-col gap-3 p-3 text-sm\"\n xAlign=\"end\"\n >\n <strong>{modalContent.title}</strong>\n <p className=\"text-neutral\">{modalContent.description}</p>\n </Popover.Detail>\n </Popover>\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;AAUA,MAAa,gBAAuC,EAAE,qBAAqB;CACzE,MAAM,EAAE,OAAO,iBAAiB,YAAY,~~QAAQ~~;~~AAEpD~~,~~QACE~~,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,OAAD;GAAK,WAAU;aACb,qBAAC,SAAD;IAAS,YAAW;cAApB,CACE,oBAAC,QAAD;KACE,SAAQ;KACR,MAAK;KACL,eAAe;~~AACb~~,~~qBAAe~~,~~KAAK;;KAEtB~~,OAAO,aAAa;KACpB,MAAM;~~KACN~~,~~GAEF~~,qBAAC,QAAQ,QAAT;KACE,YAAW;KACX,WAAU;KACV,QAAO;eAHT,CAKE,oBAAC,UAAD,YAAS,aAAa,~~OAAe~~,~~GACrC~~,oBAAC,KAAD;MAAG,WAAU;gBAAgB,aAAa;~~MAAgB~~,EAC3C;~~OACT~~;;~~GACN~~;~~EACF~~"}
1	+ {"version":3,"file":"ExpandButton.mjs","names":[],"sources":["../../../../src/components/Table/ExpandButton.tsx"],"sourcesContent":["import { Popover } from '@components/Popover';\nimport { MoveDiagonal } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button } from '../Button';\n\ntype ExpandButtonProps = {\n setIsModalOpen: (isOpen: boolean) => void;\n};\n\nexport const ExpandButton: FC<ExpandButtonProps> = ({ setIsModalOpen }) => {\n const { modal: modalContent } = useIntlayer('table');\n\n return (\n <div className=\"pointer-events-none absolute inset-y-0 right-4 z-10\">\n <div className=\"pointer-events-auto sticky top-48 pt-4\">\n <Popover identifier=\"expand\">\n <Button\n variant=\"hoverable\"\n size=\"icon-md\"\n onClick={() => {\n setIsModalOpen(true);\n }}\n label={modalContent.title}\n Icon={MoveDiagonal}\n />\n\n <Popover.Detail\n identifier=\"expand\"\n className=\"flex min-w-64 flex-col gap-3 p-3 text-sm\"\n xAlign=\"end\"\n >\n <strong>{modalContent.title}</strong>\n <p className=\"text-neutral\">{modalContent.description}</p>\n </Popover.Detail>\n </Popover>\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;AAUA,MAAa,gBAAuC,EAAE,qBAAqB;CACzE,MAAM,EAAE,OAAO,iBAAiB,YAAY,OAAO;CAEnD,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,OAAD;GAAK,WAAU;aACb,qBAAC,SAAD;IAAS,YAAW;cAApB,CACE,oBAAC,QAAD;KACE,SAAQ;KACR,MAAK;KACL,eAAe;MACb,eAAe,IAAI;KACrB;KACA,OAAO,aAAa;KACpB,MAAM;IACP,IAED,qBAAC,QAAQ,QAAT;KACE,YAAW;KACX,WAAU;KACV,QAAO;eAHT,CAKE,oBAAC,UAAD,YAAS,aAAa,MAAc,IACpC,oBAAC,KAAD;MAAG,WAAU;gBAAgB,aAAa;KAAe,EAC3C;MACT;;EACN;CACF;AAET"}

package/dist/esm/components/Table/SmartTable.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SmartTable.mjs","names":[],"sources":["../../../../src/components/Table/SmartTable.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { type FC, useEffect, useRef, useState } from 'react';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { Modal } from '../Modal';\nimport { ExpandButton } from './ExpandButton';\nimport type { TableProps } from './Table';\nimport { Table } from './Table';\nimport { useTableWidths } from './useTableWidths';\n\n/*\n Properties for the SmartTable component\n \n @interface SmartTableProps\n * @extends {TableProps}\n \n @property {boolean} [isRollable] - Whether the table content can be collapsed/expanded using the ExpandCollapse wrapper\n * @property {boolean} [displayModal] - Whether the table should be able to expand into a modal\n /\ntype SmartTableProps = TableProps & {\n isRollable?: boolean;\n displayModal?: boolean;\n};\n\n/\n Table component that provides an enhanced table experience with modal expansion and collapsible content\n \n The Table component wraps a standard HTML table element with additional functionality:\n * - Modal Expansion: Click the diagonal arrow button to view the table in a full-screen modal\n * - Collapsible Content: Optionally wrap content in an ExpandCollapse component for space-saving\n * - Responsive Design: Handles large tables gracefully with modal overflow\n * - Sticky Controls: Table controls remain accessible even when scrolling\n \n ## Features\n * - Modal View: Full-screen modal for better viewing of large tables\n * - Expand/Collapse: Optional collapsible wrapper to save space\n * - Responsive: Handles overflow and responsive behavior automatically\n * - Accessibility: Maintains proper table semantics and keyboard navigation\n * - Customizable: Supports all standard HTML table attributes and styling\n \n ## Best Practices\n * - Use semantic HTML table structure (thead, tbody, tfoot)\n * - Provide proper column headers with scope attributes\n * - Use the isRollable prop for large tables that might need space management\n * - Apply consistent styling through the className prop\n * - Consider pagination for very large datasets\n \n @param {SmartTableProps} props - The properties for the Table component\n * @returns {JSX.Element} The rendered table with enhanced functionality\n \n @example\n * ```tsx\n * // Simple data table\n * <SmartTable>\n * <thead>\n * <tr>\n * <th scope=\"col\">Name</th>\n * <th scope=\"col\">Email</th>\n * <th scope=\"col\">Status</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <td>John Doe</td>\n * <td>john@example.com</td>\n * <td>\n * <span className=\"px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs\">\n * Active\n * </span>\n * </td>\n * </tr>\n * <tr>\n * <td>Jane Smith</td>\n * <td>jane@example.com</td>\n * <td>\n * <span className=\"px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs\">\n * Pending\n * </span>\n * </td>\n * </tr>\n * </tbody>\n * </SmartTable>\n \n // Large collapsible table with custom styling\n * <SmartTable\n * isRollable\n * className=\"border border-gray-200 rounded-lg overflow-hidden\"\n * >\n * <thead className=\"bg-gray-50\">\n * <tr>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Product ID\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Name\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Category\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Price\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Stock\n * </th>\n * </tr>\n * </thead>\n * <tbody className=\"bg-white divide-y divide-gray-200\">\n * {products.map((product) => (\n * <tr key={product.id} className=\"hover:bg-gray-50\">\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n * #{product.id}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">\n * {product.name}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n * {product.category}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n * ${product.price.toFixed(2)}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n * {product.stock} units\n * </td>\n * </tr>\n * ))}\n * </tbody>\n * </SmartTable>\n \n // Financial data table with formatted numbers\n * <SmartTable className=\"w-full border-collapse\">\n * <thead>\n * <tr className=\"border-b-2 border-gray-300\">\n * <th scope=\"col\" className=\"text-left py-3 px-4\">Quarter</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Revenue</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Profit</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Growth</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr className=\"border-b border-gray-200\">\n * <td className=\"py-3 px-4 font-medium\">Q1 2024</td>\n * <td className=\"py-3 px-4 text-right\">$2,450,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">$345,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">+12.5%</td>\n * </tr>\n * <tr className=\"border-b border-gray-200\">\n * <td className=\"py-3 px-4 font-medium\">Q2 2024</td>\n * <td className=\"py-3 px-4 text-right\">$2,780,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">$398,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">+13.5%</td>\n * </tr>\n * </tbody>\n * </SmartTable>\n * ```\n \n @see {@link ExpandCollapse} - Component used for collapsible table content\n * @see {@link Modal} - Component used for full-screen table view\n * @see {@link Button} - Component used for the modal trigger button\n */\nexport const SmartTable: FC<SmartTableProps> = ({\n className,\n isRollable = false,\n displayModal,\n isInteractive,\n onClick,\n ...props\n}) => {\n const [isModalOpen, setIsModalOpen] = useState(false);\n const [highlightedRowIndex, setHighlightedRowIndex] = useState<number \| null>(\n null\n );\n\n const tableRef = useRef<HTMLTableElement>(null);\n const modalTableRef = useRef<HTMLTableElement>(null);\n\n useTableWidths(tableRef, modalTableRef, [props.children, isModalOpen]);\n\n useEffect(() => {\n if (isModalOpen && highlightedRowIndex !== null && modalTableRef.current) {\n const row = modalTableRef.current.rows[highlightedRowIndex];\n\n if (row) {\n row.scrollIntoView({ behavior: 'smooth', block: 'center' });\n\n row.classList.add('bg-neutral/40', 'dark:bg-neutral-dark/40');\n row.style.transition = 'background-color 0.3s ease-in-out';\n }\n }\n }, [isModalOpen, highlightedRowIndex]);\n\n useEffect(() => {\n if (!isModalOpen) {\n setHighlightedRowIndex(null);\n }\n }, [isModalOpen]);\n\n const handleTableClick = (e: React.MouseEvent<HTMLTableElement>) => {\n if (displayModal) {\n const target = e.target as HTMLElement;\n const tr = target.closest('tr');\n\n if (tr?.closest('tbody')) {\n setHighlightedRowIndex(tr.rowIndex);\n setIsModalOpen(true);\n }\n }\n onClick?.(e);\n };\n\n return (\n <div className=\"group relative\">\n {displayModal && <ExpandButton setIsModalOpen={setIsModalOpen} />}\n\n <ExpandCollapse\n isRollable={isRollable}\n className=\"max-w-full overflow-x-auto rounded-2xl bg-background text-left [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl\"\n >\n <Table\n ref={tableRef}\n className={className}\n isInteractive={isInteractive ?? displayModal}\n onClick={handleTableClick}\n onKeyDown={(e) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n handleTableClick(\n e as unknown as React.MouseEvent<HTMLTableElement>\n );\n }\n }}\n {...props}\n />\n </ExpandCollapse>\n\n <Modal\n isOpen={isModalOpen}\n onClose={() => setIsModalOpen(false)}\n size=\"xl\"\n hasCloseButton\n isScrollable\n >\n {isModalOpen ? (\n <div className=\"grid\">\n <Table\n ref={modalTableRef}\n className={cn('min-w-full max-w-full text-left', className)}\n isInteractive={isInteractive}\n {...props}\n />\n </div>\n ) : (\n <></>\n )}\n </Modal>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkKA,MAAa,cAAmC,EAC9C,WACA,aAAa,OACb,cACA,eACA,SACA,GAAG,YACC;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAS,MAAM;CACrD,MAAM,CAAC,qBAAqB,0BAA0B,SACpD,KACD;CAED,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,gBAAgB,OAAyB,KAAK;AAEpD,gBAAe,UAAU,eAAe,CAAC,MAAM,UAAU,YAAY,CAAC;AAEtE,iBAAgB;AACd,MAAI,eAAe,wBAAwB,QAAQ,cAAc,SAAS;GACxE,MAAM,MAAM,cAAc,QAAQ,KAAK;AAEvC,OAAI,KAAK;AACP,QAAI,eAAe;KAAE,UAAU;KAAU,OAAO;KAAU,CAAC;AAE3D,QAAI,UAAU,IAAI,iBAAiB,0BAA0B;AAC7D,QAAI,MAAM,aAAa;;;IAG1B,CAAC,aAAa,oBAAoB,CAAC;AAEtC,iBAAgB;AACd,MAAI,CAAC,YACH,wBAAuB,KAAK;IAE7B,CAAC,YAAY,CAAC;CAEjB,MAAM,oBAAoB,MAA0C;AAClE,MAAI,cAAc;GAEhB,MAAM,KADS,EAAE,OACC,QAAQ,KAAK;AAE/B,OAAI,IAAI,QAAQ,QAAQ,EAAE;AACxB,2BAAuB,GAAG,SAAS;AACnC,mBAAe,KAAK;;;AAGxB,YAAU,EAAE;;AAGd,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,gBAAgB,oBAAC,cAAD,EAA8B,gBAAkB;GAEjE,oBAAC,gBAAD;IACc;IACZ,WAAU;cAEV,oBAAC,OAAD;KACE,KAAK;KACM;KACX,eAAe,iBAAiB;KAChC,SAAS;KACT,YAAY,MAAM;AAChB,UAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,IACjC,kBACE,EACD;;KAGL,GAAI;KACJ;IACa;GAEjB,oBAAC,OAAD;IACE,QAAQ;IACR,eAAe,eAAe,MAAM;IACpC,MAAK;IACL;IACA;cAEC,cACC,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,OAAD;MACE,KAAK;MACL,WAAW,GAAG,mCAAmC,UAAU;MAC5C;MACf,GAAI;MACJ;KACE,IAEN,kCAAK;IAED;GACJ"}
1	+ {"version":3,"file":"SmartTable.mjs","names":[],"sources":["../../../../src/components/Table/SmartTable.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { type FC, useEffect, useRef, useState } from 'react';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { Modal } from '../Modal';\nimport { ExpandButton } from './ExpandButton';\nimport type { TableProps } from './Table';\nimport { Table } from './Table';\nimport { useTableWidths } from './useTableWidths';\n\n/*\n Properties for the SmartTable component\n \n @interface SmartTableProps\n * @extends {TableProps}\n \n @property {boolean} [isRollable] - Whether the table content can be collapsed/expanded using the ExpandCollapse wrapper\n * @property {boolean} [displayModal] - Whether the table should be able to expand into a modal\n /\ntype SmartTableProps = TableProps & {\n isRollable?: boolean;\n displayModal?: boolean;\n};\n\n/\n Table component that provides an enhanced table experience with modal expansion and collapsible content\n \n The Table component wraps a standard HTML table element with additional functionality:\n * - Modal Expansion: Click the diagonal arrow button to view the table in a full-screen modal\n * - Collapsible Content: Optionally wrap content in an ExpandCollapse component for space-saving\n * - Responsive Design: Handles large tables gracefully with modal overflow\n * - Sticky Controls: Table controls remain accessible even when scrolling\n \n ## Features\n * - Modal View: Full-screen modal for better viewing of large tables\n * - Expand/Collapse: Optional collapsible wrapper to save space\n * - Responsive: Handles overflow and responsive behavior automatically\n * - Accessibility: Maintains proper table semantics and keyboard navigation\n * - Customizable: Supports all standard HTML table attributes and styling\n \n ## Best Practices\n * - Use semantic HTML table structure (thead, tbody, tfoot)\n * - Provide proper column headers with scope attributes\n * - Use the isRollable prop for large tables that might need space management\n * - Apply consistent styling through the className prop\n * - Consider pagination for very large datasets\n \n @param {SmartTableProps} props - The properties for the Table component\n * @returns {JSX.Element} The rendered table with enhanced functionality\n \n @example\n * ```tsx\n * // Simple data table\n * <SmartTable>\n * <thead>\n * <tr>\n * <th scope=\"col\">Name</th>\n * <th scope=\"col\">Email</th>\n * <th scope=\"col\">Status</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <td>John Doe</td>\n * <td>john@example.com</td>\n * <td>\n * <span className=\"px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs\">\n * Active\n * </span>\n * </td>\n * </tr>\n * <tr>\n * <td>Jane Smith</td>\n * <td>jane@example.com</td>\n * <td>\n * <span className=\"px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs\">\n * Pending\n * </span>\n * </td>\n * </tr>\n * </tbody>\n * </SmartTable>\n \n // Large collapsible table with custom styling\n * <SmartTable\n * isRollable\n * className=\"border border-gray-200 rounded-lg overflow-hidden\"\n * >\n * <thead className=\"bg-gray-50\">\n * <tr>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Product ID\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Name\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Category\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Price\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Stock\n * </th>\n * </tr>\n * </thead>\n * <tbody className=\"bg-white divide-y divide-gray-200\">\n * {products.map((product) => (\n * <tr key={product.id} className=\"hover:bg-gray-50\">\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n * #{product.id}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">\n * {product.name}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n * {product.category}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n * ${product.price.toFixed(2)}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n * {product.stock} units\n * </td>\n * </tr>\n * ))}\n * </tbody>\n * </SmartTable>\n \n // Financial data table with formatted numbers\n * <SmartTable className=\"w-full border-collapse\">\n * <thead>\n * <tr className=\"border-b-2 border-gray-300\">\n * <th scope=\"col\" className=\"text-left py-3 px-4\">Quarter</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Revenue</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Profit</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Growth</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr className=\"border-b border-gray-200\">\n * <td className=\"py-3 px-4 font-medium\">Q1 2024</td>\n * <td className=\"py-3 px-4 text-right\">$2,450,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">$345,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">+12.5%</td>\n * </tr>\n * <tr className=\"border-b border-gray-200\">\n * <td className=\"py-3 px-4 font-medium\">Q2 2024</td>\n * <td className=\"py-3 px-4 text-right\">$2,780,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">$398,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">+13.5%</td>\n * </tr>\n * </tbody>\n * </SmartTable>\n * ```\n \n @see {@link ExpandCollapse} - Component used for collapsible table content\n * @see {@link Modal} - Component used for full-screen table view\n * @see {@link Button} - Component used for the modal trigger button\n */\nexport const SmartTable: FC<SmartTableProps> = ({\n className,\n isRollable = false,\n displayModal,\n isInteractive,\n onClick,\n ...props\n}) => {\n const [isModalOpen, setIsModalOpen] = useState(false);\n const [highlightedRowIndex, setHighlightedRowIndex] = useState<number \| null>(\n null\n );\n\n const tableRef = useRef<HTMLTableElement>(null);\n const modalTableRef = useRef<HTMLTableElement>(null);\n\n useTableWidths(tableRef, modalTableRef, [props.children, isModalOpen]);\n\n useEffect(() => {\n if (isModalOpen && highlightedRowIndex !== null && modalTableRef.current) {\n const row = modalTableRef.current.rows[highlightedRowIndex];\n\n if (row) {\n row.scrollIntoView({ behavior: 'smooth', block: 'center' });\n\n row.classList.add('bg-neutral/40', 'dark:bg-neutral-dark/40');\n row.style.transition = 'background-color 0.3s ease-in-out';\n }\n }\n }, [isModalOpen, highlightedRowIndex]);\n\n useEffect(() => {\n if (!isModalOpen) {\n setHighlightedRowIndex(null);\n }\n }, [isModalOpen]);\n\n const handleTableClick = (e: React.MouseEvent<HTMLTableElement>) => {\n if (displayModal) {\n const target = e.target as HTMLElement;\n const tr = target.closest('tr');\n\n if (tr?.closest('tbody')) {\n setHighlightedRowIndex(tr.rowIndex);\n setIsModalOpen(true);\n }\n }\n onClick?.(e);\n };\n\n return (\n <div className=\"group relative\">\n {displayModal && <ExpandButton setIsModalOpen={setIsModalOpen} />}\n\n <ExpandCollapse\n isRollable={isRollable}\n className=\"max-w-full overflow-x-auto rounded-2xl bg-background text-left [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl\"\n >\n <Table\n ref={tableRef}\n className={className}\n isInteractive={isInteractive ?? displayModal}\n onClick={handleTableClick}\n onKeyDown={(e) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n handleTableClick(\n e as unknown as React.MouseEvent<HTMLTableElement>\n );\n }\n }}\n {...props}\n />\n </ExpandCollapse>\n\n <Modal\n isOpen={isModalOpen}\n onClose={() => setIsModalOpen(false)}\n size=\"xl\"\n hasCloseButton\n isScrollable\n >\n {isModalOpen ? (\n <div className=\"grid\">\n <Table\n ref={modalTableRef}\n className={cn('min-w-full max-w-full text-left', className)}\n isInteractive={isInteractive}\n {...props}\n />\n </div>\n ) : (\n <></>\n )}\n </Modal>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkKA,MAAa,cAAmC,EAC9C,WACA,aAAa,OACb,cACA,eACA,SACA,GAAG,YACC;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CACpD,MAAM,CAAC,qBAAqB,0BAA0B,SACpD,IACF;CAEA,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,gBAAgB,OAAyB,IAAI;CAEnD,eAAe,UAAU,eAAe,CAAC,MAAM,UAAU,WAAW,CAAC;CAErE,gBAAgB;EACd,IAAI,eAAe,wBAAwB,QAAQ,cAAc,SAAS;GACxE,MAAM,MAAM,cAAc,QAAQ,KAAK;GAEvC,IAAI,KAAK;IACP,IAAI,eAAe;KAAE,UAAU;KAAU,OAAO;IAAS,CAAC;IAE1D,IAAI,UAAU,IAAI,iBAAiB,yBAAyB;IAC5D,IAAI,MAAM,aAAa;GACzB;EACF;CACF,GAAG,CAAC,aAAa,mBAAmB,CAAC;CAErC,gBAAgB;EACd,IAAI,CAAC,aACH,uBAAuB,IAAI;CAE/B,GAAG,CAAC,WAAW,CAAC;CAEhB,MAAM,oBAAoB,MAA0C;EAClE,IAAI,cAAc;GAEhB,MAAM,KADS,EAAE,OACC,QAAQ,IAAI;GAE9B,IAAI,IAAI,QAAQ,OAAO,GAAG;IACxB,uBAAuB,GAAG,QAAQ;IAClC,eAAe,IAAI;GACrB;EACF;EACA,UAAU,CAAC;CACb;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,gBAAgB,oBAAC,cAAD,EAA8B,eAAiB;GAEhE,oBAAC,gBAAD;IACc;IACZ,WAAU;cAEV,oBAAC,OAAD;KACE,KAAK;KACM;KACX,eAAe,iBAAiB;KAChC,SAAS;KACT,YAAY,MAAM;MAChB,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KACjC,iBACE,CACF;KAEJ;KACA,GAAI;IACL;GACa;GAEhB,oBAAC,OAAD;IACE,QAAQ;IACR,eAAe,eAAe,KAAK;IACnC,MAAK;IACL;IACA;cAEC,cACC,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,OAAD;MACE,KAAK;MACL,WAAW,GAAG,mCAAmC,SAAS;MAC3C;MACf,GAAI;KACL;IACE,KAEL,iCAAI;GAED;EACJ;;AAET"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.mjs","names":[],"sources":["../../../../src/components/Table/Table.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { forwardRef, type HTMLAttributes } from 'react';\n\nexport interface TableProps extends HTMLAttributes<HTMLTableElement> {\n /** Enables hover states and cursor changes for interactive rows */\n isInteractive?: boolean;\n}\n\nexport const Table = forwardRef<HTMLTableElement, TableProps>(\n ({ className, isInteractive, ...props }, ref) => (\n <table\n ref={ref}\n className={cn(\n 'w-full table-auto overflow-hidden text-left text-sm',\n isInteractive &&\n '[&_tbody_tr:hover]:bg-neutral/40 [&_tbody_tr:hover]:dark:bg-neutral-dark/40 [&_tbody_tr]:cursor-pointer [&_tbody_tr]:transition-colors',\n className\n )}\n {...props}\n />\n )\n);\n"],"mappings":";;;;;AAQA,MAAa,QAAQ,YAClB,EAAE,WAAW,eAAe,GAAG,SAAS,QACvC,oBAAC,SAAD;CACO;CACL,WAAW,GACT,uDACA,iBACE,0IACF,~~UACD~~;~~CACD~~,GAAI;~~CACJ~~,EAEL"}
1	+ {"version":3,"file":"Table.mjs","names":[],"sources":["../../../../src/components/Table/Table.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { forwardRef, type HTMLAttributes } from 'react';\n\nexport interface TableProps extends HTMLAttributes<HTMLTableElement> {\n /** Enables hover states and cursor changes for interactive rows */\n isInteractive?: boolean;\n}\n\nexport const Table = forwardRef<HTMLTableElement, TableProps>(\n ({ className, isInteractive, ...props }, ref) => (\n <table\n ref={ref}\n className={cn(\n 'w-full table-auto overflow-hidden text-left text-sm',\n isInteractive &&\n '[&_tbody_tr:hover]:bg-neutral/40 [&_tbody_tr:hover]:dark:bg-neutral-dark/40 [&_tbody_tr]:cursor-pointer [&_tbody_tr]:transition-colors',\n className\n )}\n {...props}\n />\n )\n);\n"],"mappings":";;;;;AAQA,MAAa,QAAQ,YAClB,EAAE,WAAW,eAAe,GAAG,SAAS,QACvC,oBAAC,SAAD;CACO;CACL,WAAW,GACT,uDACA,iBACE,0IACF,SACF;CACA,GAAI;AACL,EAEL"}

package/dist/esm/components/Table/TableElements.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableElements.mjs","names":[],"sources":["../../../../src/components/Table/TableElements.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { ComponentProps } from 'react';\n\nexport const Th = ({ className, ...props }: ComponentProps<'th'>) => (\n <th\n className={cn(\n 'border border-neutral/20 border-b border-solid bg-neutral/10 p-4',\n className\n )}\n {...props}\n />\n);\n\nexport const Tr = ({ className, ...props }: ComponentProps<'tr'>) => (\n <tr className={cn('hover:bg-neutral/10', className)} {...props} />\n);\n\nexport const Td = ({ className, ...props }: ComponentProps<'td'>) => (\n <td\n className={cn(\n 'border border-neutral/20 border-b border-solid p-4',\n className\n )}\n {...props}\n />\n);\n\nexport const Hr = ({ className, ...props }: ComponentProps<'hr'>) => (\n <hr\n className={cn('mx-6 mt-16 border-dashed text-neutral', className)}\n {...props}\n />\n);\n"],"mappings":";;;;AAGA,MAAa,MAAM,EAAE,WAAW,GAAG,YACjC,oBAAC,MAAD;CACE,WAAW,GACT,oEACA,~~UACD~~;~~CACD~~,GAAI;~~CACJ~~;~~AAGJ~~,MAAa,MAAM,EAAE,WAAW,GAAG,YACjC,oBAAC,MAAD;CAAI,WAAW,GAAG,uBAAuB,~~UAAU~~;~~CAAE~~,GAAI;~~CAAS~~;~~AAGpE~~,MAAa,MAAM,EAAE,WAAW,GAAG,YACjC,oBAAC,MAAD;CACE,WAAW,GACT,sDACA,~~UACD~~;~~CACD~~,GAAI;~~CACJ~~;~~AAGJ~~,MAAa,MAAM,EAAE,WAAW,GAAG,YACjC,oBAAC,MAAD;CACE,WAAW,GAAG,yCAAyC,~~UAAU~~;~~CACjE~~,GAAI;~~CACJ~~"}
1	+ {"version":3,"file":"TableElements.mjs","names":[],"sources":["../../../../src/components/Table/TableElements.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { ComponentProps } from 'react';\n\nexport const Th = ({ className, ...props }: ComponentProps<'th'>) => (\n <th\n className={cn(\n 'border border-neutral/20 border-b border-solid bg-neutral/10 p-4',\n className\n )}\n {...props}\n />\n);\n\nexport const Tr = ({ className, ...props }: ComponentProps<'tr'>) => (\n <tr className={cn('hover:bg-neutral/10', className)} {...props} />\n);\n\nexport const Td = ({ className, ...props }: ComponentProps<'td'>) => (\n <td\n className={cn(\n 'border border-neutral/20 border-b border-solid p-4',\n className\n )}\n {...props}\n />\n);\n\nexport const Hr = ({ className, ...props }: ComponentProps<'hr'>) => (\n <hr\n className={cn('mx-6 mt-16 border-dashed text-neutral', className)}\n {...props}\n />\n);\n"],"mappings":";;;;AAGA,MAAa,MAAM,EAAE,WAAW,GAAG,YACjC,oBAAC,MAAD;CACE,WAAW,GACT,oEACA,SACF;CACA,GAAI;AACL;AAGH,MAAa,MAAM,EAAE,WAAW,GAAG,YACjC,oBAAC,MAAD;CAAI,WAAW,GAAG,uBAAuB,SAAS;CAAG,GAAI;AAAQ;AAGnE,MAAa,MAAM,EAAE,WAAW,GAAG,YACjC,oBAAC,MAAD;CACE,WAAW,GACT,sDACA,SACF;CACA,GAAI;AACL;AAGH,MAAa,MAAM,EAAE,WAAW,GAAG,YACjC,oBAAC,MAAD;CACE,WAAW,GAAG,yCAAyC,SAAS;CAChE,GAAI;AACL"}

package/dist/esm/components/Table/table.content.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"table.content.mjs","names":[],"sources":["../../../../src/components/Table/table.content.ts"],"sourcesContent":["import { type Dictionary, t } from 'intlayer';\n\nconst tableContent = {\n key: 'table',\n content: {\n modal: {\n title: t({\n en: 'Show all table content',\n fr: 'Afficher tout le contenu du tableau',\n es: 'Mostrar todo el contenido de la tabla',\n 'en-GB': 'Show all table content',\n de: 'Alle Tabellendaten anzeigen',\n ja: 'テーブルのすべての内容を表示',\n ko: '테이블의 모든 내용 표시',\n zh: '显示表格的所有内容',\n it: 'Mostra tutto il contenuto della tabella',\n pt: 'Mostrar todo o conteúdo da tabela',\n hi: 'सभी तालिका सामग्री दिखाएं',\n ar: 'اظهار جميع محتويات الجدول',\n ru: 'Показать все данные таблицы',\n tr: 'Tüm tablo içeriğini göster',\n pl: 'Pokaż całą zawartość tabeli',\n id: 'Tampilkan semua isi tabel',\n vi: 'Hiển thị tất cả nội dung bảng',\n uk: 'Показати весь вміст таблиці',\n }),\n description: t({\n en: 'Open the table in a modal to view all data content clearly',\n fr: 'Ouvrir le tableau dans une fenêtre modale pour voir tout le contenu clairement',\n es: 'Abrir la tabla en una ventana flotante para ver todo el contenido claramente',\n 'en-GB': 'Open the table in a modal to view all data content clearly',\n de: 'Tabelle in einem Modal öffnen, um alle Daten übersichtlich anzuzeigen',\n ja: 'テーブルをモーダルで開き、すべてのデータを明確に表示',\n ko: '테이블을 모달로 열어 모든 데이터를 명확하게 확인',\n zh: '在弹窗中打开表格以清晰地查看所有数据',\n it: 'Apri la tabella in una finestra modale per visualizzare tutti i dati in modo chiaro',\n pt: 'Abrir a tabela em um modal para ver todo o conteúdo claramente',\n hi: 'सभी डेटा सामग्री को स्पष्ट रूप से देखने के लिए तालिका को मोडल में खोलें',\n ar: 'افتح الجدول في نافذة منبثقة لعرض جميع محتويات البيانات بوضوح',\n ru: 'Открыть таблицу в модальном окне для четкого просмотра всех данных',\n tr: 'Tüm veri içeriğini net bir şekilde görmek için tabloyu modalde açın',\n pl: 'Otwórz tabelę w oknie modalnym, aby wyraźnie zobaczyć całą zawartość',\n id: 'Buka tabel dalam modal untuk melihat semua isi data dengan jelas',\n vi: 'Mở bảng trong một cửa sổ bật lên để xem toàn bộ nội dung dữ liệu một cách rõ ràng',\n uk: 'Відкрийте таблицю в модальному вікні, щоб чітко переглянути всі дані',\n }),\n },\n },\n title: 'Table component content',\n description:\n 'Content declaration related to the Table component, specifically for UI message to display all table content.',\n tags: ['table', 'component content', 'design system'],\n} satisfies Dictionary;\n\nexport default tableContent;\n"],"mappings":";;;AAEA,MAAM,eAAe;CACnB,KAAK;CACL,SAAS,EACP,OAAO;EACL,OAAO,EAAE;GACP,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;~~GACL~~,CAAC;~~EACF~~,aAAa,EAAE;GACb,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;~~GACL~~,CAAC;~~EACH~~,EACF;~~CACD~~,OAAO;CACP,aACE;CACF,MAAM;EAAC;EAAS;EAAqB;~~EAAgB~~;~~CACtD~~"}
1	+ {"version":3,"file":"table.content.mjs","names":[],"sources":["../../../../src/components/Table/table.content.ts"],"sourcesContent":["import { type Dictionary, t } from 'intlayer';\n\nconst tableContent = {\n key: 'table',\n content: {\n modal: {\n title: t({\n en: 'Show all table content',\n fr: 'Afficher tout le contenu du tableau',\n es: 'Mostrar todo el contenido de la tabla',\n 'en-GB': 'Show all table content',\n de: 'Alle Tabellendaten anzeigen',\n ja: 'テーブルのすべての内容を表示',\n ko: '테이블의 모든 내용 표시',\n zh: '显示表格的所有内容',\n it: 'Mostra tutto il contenuto della tabella',\n pt: 'Mostrar todo o conteúdo da tabela',\n hi: 'सभी तालिका सामग्री दिखाएं',\n ar: 'اظهار جميع محتويات الجدول',\n ru: 'Показать все данные таблицы',\n tr: 'Tüm tablo içeriğini göster',\n pl: 'Pokaż całą zawartość tabeli',\n id: 'Tampilkan semua isi tabel',\n vi: 'Hiển thị tất cả nội dung bảng',\n uk: 'Показати весь вміст таблиці',\n }),\n description: t({\n en: 'Open the table in a modal to view all data content clearly',\n fr: 'Ouvrir le tableau dans une fenêtre modale pour voir tout le contenu clairement',\n es: 'Abrir la tabla en una ventana flotante para ver todo el contenido claramente',\n 'en-GB': 'Open the table in a modal to view all data content clearly',\n de: 'Tabelle in einem Modal öffnen, um alle Daten übersichtlich anzuzeigen',\n ja: 'テーブルをモーダルで開き、すべてのデータを明確に表示',\n ko: '테이블을 모달로 열어 모든 데이터를 명확하게 확인',\n zh: '在弹窗中打开表格以清晰地查看所有数据',\n it: 'Apri la tabella in una finestra modale per visualizzare tutti i dati in modo chiaro',\n pt: 'Abrir a tabela em um modal para ver todo o conteúdo claramente',\n hi: 'सभी डेटा सामग्री को स्पष्ट रूप से देखने के लिए तालिका को मोडल में खोलें',\n ar: 'افتح الجدول في نافذة منبثقة لعرض جميع محتويات البيانات بوضوح',\n ru: 'Открыть таблицу в модальном окне для четкого просмотра всех данных',\n tr: 'Tüm veri içeriğini net bir şekilde görmek için tabloyu modalde açın',\n pl: 'Otwórz tabelę w oknie modalnym, aby wyraźnie zobaczyć całą zawartość',\n id: 'Buka tabel dalam modal untuk melihat semua isi data dengan jelas',\n vi: 'Mở bảng trong một cửa sổ bật lên để xem toàn bộ nội dung dữ liệu một cách rõ ràng',\n uk: 'Відкрийте таблицю в модальному вікні, щоб чітко переглянути всі дані',\n }),\n },\n },\n title: 'Table component content',\n description:\n 'Content declaration related to the Table component, specifically for UI message to display all table content.',\n tags: ['table', 'component content', 'design system'],\n} satisfies Dictionary;\n\nexport default tableContent;\n"],"mappings":";;;AAEA,MAAM,eAAe;CACnB,KAAK;CACL,SAAS,EACP,OAAO;EACL,OAAO,EAAE;GACP,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN,CAAC;EACD,aAAa,EAAE;GACb,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN,CAAC;CACH,EACF;CACA,OAAO;CACP,aACE;CACF,MAAM;EAAC;EAAS;EAAqB;CAAe;AACtD"}

package/dist/esm/components/Table/useTableWidths.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useTableWidths.mjs","names":[],"sources":["../../../../src/components/Table/useTableWidths.ts"],"sourcesContent":["import { type RefObject, useEffect } from 'react';\n\n// ~0.55rem per character (mid-point for proportional fonts)\nconst CHAR_WIDTH_REM = 0.55;\nconst MIN_WIDTH_REM = 5; // ~80px at 16px base\nconst MAX_WIDTH_REM = 30; // ~480px at 16px base\n\nexport const useTableWidths = (\n tableRef: RefObject<HTMLTableElement \| null>,\n modalTableRef: RefObject<HTMLTableElement \| null>,\n dependencies: any[]\n) => {\n useEffect(() => {\n if (!tableRef.current) return;\n\n // Calculate the maximum character length per column from the main table\n const colLengths: number[] = [];\n Array.from(tableRef.current.querySelectorAll('tr')).forEach((row) => {\n Array.from(row.children).forEach((cell, index) => {\n const len = cell.textContent?.trim().length ?? 0;\n if (colLengths[index] === undefined \|\| len > colLengths[index]) {\n colLengths[index] = len;\n }\n });\n });\n\n const applyToTable = (table: HTMLTableElement) => {\n const rows = Array.from(table.querySelectorAll('tr'));\n if (rows.length === 0) return;\n\n const applyColStyle = (el: HTMLElement, index: number) => {\n const minRem = Math.min(\n MAX_WIDTH_REM,\n Math.max(MIN_WIDTH_REM, (colLengths[index] ?? 0) * CHAR_WIDTH_REM)\n );\n el.style.minWidth = `${minRem}rem`;\n el.style.maxWidth = `${MAX_WIDTH_REM}rem`;\n };\n\n table.querySelectorAll('th').forEach((th, index) => {\n applyColStyle(th, index);\n });\n rows.forEach((row) => {\n row.querySelectorAll('td').forEach((td, index) => {\n applyColStyle(td, index);\n });\n });\n };\n\n applyToTable(tableRef.current);\n\n if (modalTableRef.current) applyToTable(modalTableRef.current);\n }, dependencies);\n};\n"],"mappings":";;;AAGA,MAAM,iBAAiB;AACvB,MAAM,gBAAgB;AACtB,MAAM,gBAAgB;AAEtB,MAAa,kBACX,UACA,eACA,iBACG;~~AACH~~,~~iBAAgB~~;~~AACd~~,~~MAAI~~,CAAC,SAAS,~~QAAS~~;EAGvB,MAAM,aAAuB,~~EAAE~~;~~AAC/B~~,~~QAAM~~,KAAK,SAAS,QAAQ,iBAAiB,~~KAAK~~,CAAC,CAAC,SAAS,QAAQ;~~AACnE~~,~~SAAM~~,KAAK,IAAI,~~SAAS~~,CAAC,SAAS,MAAM,UAAU;IAChD,MAAM,MAAM,KAAK,aAAa,~~MAAM~~,CAAC,UAAU;~~AAC~~/C,~~QAAI~~,WAAW,WAAW,UAAa,MAAM,WAAW,~~OACtD~~,~~YAAW~~,SAAS;~~KAEtB~~;~~IACF~~;~~EAEF~~,MAAM,gBAAgB,UAA4B;GAChD,MAAM,OAAO,MAAM,KAAK,MAAM,iBAAiB,~~KAAK~~,CAAC;~~AACrD~~,~~OAAI~~,KAAK,WAAW,~~EAAG~~;GAEvB,MAAM,iBAAiB,IAAiB,UAAkB;IACxD,MAAM,SAAS,KAAK,IAClB,eACA,KAAK,IAAI,gBAAgB,WAAW,UAAU,KAAK,~~eAAe~~,CACnE;~~AACD~~,~~OAAG~~,MAAM,WAAW,GAAG,OAAO;~~AAC9B~~,~~OAAG~~,MAAM,WAAW,GAAG,cAAc~~;;AAGvC~~,~~SAAM~~,iBAAiB,~~KAAK~~,CAAC,SAAS,IAAI,UAAU;~~AAClD~~,~~kBAAc~~,IAAI,~~MAAM~~;~~KACxB~~;~~AACF~~,~~QAAK~~,SAAS,QAAQ;~~AACpB~~,~~QAAI~~,iBAAiB,~~KAAK~~,CAAC,SAAS,IAAI,UAAU;~~AAChD~~,~~mBAAc~~,IAAI,~~MAAM~~;~~MACxB~~;~~KACF;;AAGJ~~,~~eAAa~~,SAAS,~~QAAQ~~;~~AAE9B~~,~~MAAI~~,cAAc,~~QAAS~~,~~cAAa~~,cAAc,~~QAAQ~~;~~IAC7D~~,~~aAAa~~"}
1	+ {"version":3,"file":"useTableWidths.mjs","names":[],"sources":["../../../../src/components/Table/useTableWidths.ts"],"sourcesContent":["import { type RefObject, useEffect } from 'react';\n\n// ~0.55rem per character (mid-point for proportional fonts)\nconst CHAR_WIDTH_REM = 0.55;\nconst MIN_WIDTH_REM = 5; // ~80px at 16px base\nconst MAX_WIDTH_REM = 30; // ~480px at 16px base\n\nexport const useTableWidths = (\n tableRef: RefObject<HTMLTableElement \| null>,\n modalTableRef: RefObject<HTMLTableElement \| null>,\n dependencies: any[]\n) => {\n useEffect(() => {\n if (!tableRef.current) return;\n\n // Calculate the maximum character length per column from the main table\n const colLengths: number[] = [];\n Array.from(tableRef.current.querySelectorAll('tr')).forEach((row) => {\n Array.from(row.children).forEach((cell, index) => {\n const len = cell.textContent?.trim().length ?? 0;\n if (colLengths[index] === undefined \|\| len > colLengths[index]) {\n colLengths[index] = len;\n }\n });\n });\n\n const applyToTable = (table: HTMLTableElement) => {\n const rows = Array.from(table.querySelectorAll('tr'));\n if (rows.length === 0) return;\n\n const applyColStyle = (el: HTMLElement, index: number) => {\n const minRem = Math.min(\n MAX_WIDTH_REM,\n Math.max(MIN_WIDTH_REM, (colLengths[index] ?? 0) * CHAR_WIDTH_REM)\n );\n el.style.minWidth = `${minRem}rem`;\n el.style.maxWidth = `${MAX_WIDTH_REM}rem`;\n };\n\n table.querySelectorAll('th').forEach((th, index) => {\n applyColStyle(th, index);\n });\n rows.forEach((row) => {\n row.querySelectorAll('td').forEach((td, index) => {\n applyColStyle(td, index);\n });\n });\n };\n\n applyToTable(tableRef.current);\n\n if (modalTableRef.current) applyToTable(modalTableRef.current);\n }, dependencies);\n};\n"],"mappings":";;;AAGA,MAAM,iBAAiB;AACvB,MAAM,gBAAgB;AACtB,MAAM,gBAAgB;AAEtB,MAAa,kBACX,UACA,eACA,iBACG;CACH,gBAAgB;EACd,IAAI,CAAC,SAAS,SAAS;EAGvB,MAAM,aAAuB,CAAC;EAC9B,MAAM,KAAK,SAAS,QAAQ,iBAAiB,IAAI,CAAC,CAAC,CAAC,SAAS,QAAQ;GACnE,MAAM,KAAK,IAAI,QAAQ,CAAC,CAAC,SAAS,MAAM,UAAU;IAChD,MAAM,MAAM,KAAK,aAAa,KAAK,CAAC,CAAC,UAAU;IAC/C,IAAI,WAAW,WAAW,UAAa,MAAM,WAAW,QACtD,WAAW,SAAS;GAExB,CAAC;EACH,CAAC;EAED,MAAM,gBAAgB,UAA4B;GAChD,MAAM,OAAO,MAAM,KAAK,MAAM,iBAAiB,IAAI,CAAC;GACpD,IAAI,KAAK,WAAW,GAAG;GAEvB,MAAM,iBAAiB,IAAiB,UAAkB;IACxD,MAAM,SAAS,KAAK,IAClB,eACA,KAAK,IAAI,gBAAgB,WAAW,UAAU,KAAK,cAAc,CACnE;IACA,GAAG,MAAM,WAAW,GAAG,OAAO;IAC9B,GAAG,MAAM,WAAW,GAAG,cAAc;GACvC;GAEA,MAAM,iBAAiB,IAAI,CAAC,CAAC,SAAS,IAAI,UAAU;IAClD,cAAc,IAAI,KAAK;GACzB,CAAC;GACD,KAAK,SAAS,QAAQ;IACpB,IAAI,iBAAiB,IAAI,CAAC,CAAC,SAAS,IAAI,UAAU;KAChD,cAAc,IAAI,KAAK;IACzB,CAAC;GACH,CAAC;EACH;EAEA,aAAa,SAAS,OAAO;EAE7B,IAAI,cAAc,SAAS,aAAa,cAAc,OAAO;CAC/D,GAAG,YAAY;AACjB"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Tag/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { FC, HTMLAttributes, PropsWithChildren } from 'react';\n\n/*\n Properties for the Tag component extending HTML div attributes and variant options\n \n @interface TagProps\n * @extends {PropsWithChildren<VariantProps<typeof containerVariants>>}\n * @extends {HTMLAttributes<HTMLDivElement>}\n \n @property {ReactNode} children - The content to display inside the tag\n * @property {TagColor} [color] - Color theme variant of the tag\n * @property {TagRoundedSize} [roundedSize] - Border radius size of the tag\n * @property {TagSize} [size] - Size variant affecting padding and font size\n * @property {TagBorder} [border] - Whether to show a border around the tag\n * @property {TagBackground} [background] - Background visibility option\n * @property [className] - Additional CSS classes for custom styling\n \n @example\n * ```tsx\n * // Basic tag\n * <Tag>Default Tag</Tag>\n \n // Success tag with border\n * <Tag color=\"success\" border=\"with\">\n * Success Status\n * </Tag>\n \n // Large warning tag\n * <Tag color=\"warning\" size=\"lg\">\n * Important Warning\n * </Tag>\n * ```\n /\ntype TagProps = PropsWithChildren<VariantProps<typeof containerVariants>> &\n HTMLAttributes<HTMLDivElement>;\n\n/\n Enumeration for tag border radius sizes\n \n Controls the roundedness of tag corners, from sharp edges to fully rounded pills.\n \n @enum TagRoundedSize\n * @property NONE - 'none' - No border radius (sharp corners)\n * @property SM - 'sm' - Small border radius (2px)\n * @property MD - 'md' - Medium border radius (6px)\n * @property LG - 'lg' - Large border radius (8px)\n * @property XL - 'xl' - Extra large border radius (12px)\n * @property XXL - '2xl' - 2x large border radius (16px)\n * @property XXXL - '3xl' - 3x large border radius (24px)\n * @property FULL - 'full' - Fully rounded (50% border radius, pill shape)\n \n @example\n * ```tsx\n * // Sharp corners\n * <Tag roundedSize=\"none\">Sharp Tag</Tag>\n \n // Pill-shaped tag\n * <Tag roundedSize=\"full\">Pill Tag</Tag>\n \n // Medium rounded corners\n * <Tag roundedSize=\"md\">Rounded Tag</Tag>\n * ```\n /\nexport type TagRoundedSize =\n \| 'none'\n \| 'sm'\n \| 'md'\n \| 'lg'\n \| 'xl'\n \| '2xl'\n \| '3xl'\n \| 'full';\n\n/\n Enumeration for tag color themes\n \n Provides semantic color options for different tag purposes and meanings.\n * Each color includes background, border, and text color variations.\n \n @enum TagColor\n * @property SUCCESS - 'success' - Green theme for positive states, success messages, or completed items\n * @property ERROR - 'error' - Red theme for error states, warnings, or failed operations\n * @property WARNING - 'warning' - Yellow/orange theme for caution, pending states, or important notices\n * @property NEUTRAL - 'neutral' - Gray theme for neutral information or secondary content\n * @property TEXT - 'text' - Default text color theme for general purpose tags\n \n @example\n * ```tsx\n * // Status indicators\n * <Tag color=\"success\">Completed</Tag>\n * <Tag color=\"error\">Failed</Tag>\n * <Tag color=\"warning\">Pending</Tag>\n \n // Category tags\n * <Tag color=\"neutral\">Category</Tag>\n * <Tag color=\"text\">General</Tag>\n * ```\n /\nexport type TagColor =\n \| 'primary'\n \| 'success'\n \| 'error'\n \| 'warning'\n \| 'neutral'\n \| 'text'\n \| 'blue'\n \| 'yellow'\n \| 'green'\n \| 'red'\n \| 'orange'\n \| 'purple'\n \| 'pink'\n \| 'brown'\n \| 'gray'\n \| 'black'\n \| 'white';\n\n/\n Enumeration for tag size variants\n \n Controls the overall size of tags including padding, font size, and border thickness.\n * Sizes are designed to maintain visual hierarchy and readability.\n \n @enum TagSize\n * @property XS - 'xs' - Extra small (0.5rem padding, text-xs, 1.2px border)\n * @property SM - 'sm' - Small (0.5rem padding, text-sm, 1.5px border)\n * @property MD - 'md' - Medium (1rem padding, text-base, 2px border) - Default size\n * @property LG - 'lg' - Large (2rem padding, text-lg, 2px border)\n * @property XL - 'xl' - Extra large (4rem padding, text-xl, 2px border)\n \n @example\n * ```tsx\n * // Different sizes for hierarchy\n * <Tag size=\"xs\">Small detail</Tag>\n * <Tag size=\"sm\">Minor category</Tag>\n * <Tag size=\"md\">Standard tag</Tag>\n * <Tag size=\"lg\">Important label</Tag>\n * <Tag size=\"xl\">Hero tag</Tag>\n * ```\n /\nexport type TagSize = 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl';\n\n/\n Enumeration for tag border visibility\n \n Controls whether a border is displayed around the tag.\n \n @enum TagBorder\n * @property NONE - 'none' - No border (default)\n * @property WITH - 'with' - Show border with 1.5px thickness\n \n @example\n * ```tsx\n * <Tag border=\"none\">Borderless</Tag>\n * <Tag border=\"with\">With Border</Tag>\n * ```\n /\nexport type TagBorder = 'none' \| 'with';\n\n/\n Enumeration for tag background visibility\n \n Controls the background styling of the tag.\n \n @enum TagBackground\n * @property NONE - 'none' - No background styling\n * @property WITH - 'with' - Apply background styling\n \n @example\n * ```tsx\n * <Tag background=\"none\">No Background</Tag>\n * <Tag background=\"with\">With Background</Tag>\n * ```\n /\nexport type TagBackground = 'none' \| 'with';\n\nconst containerVariants = cva('w-fit backdrop-blur', {\n variants: {\n roundedSize: {\n none: 'rounded-none',\n sm: 'rounded-sm',\n md: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n [`${'xxl'}`]: 'rounded-2xl',\n [`${'xxxl'}`]: 'rounded-3xl',\n full: 'rounded-full',\n },\n color: {\n primary: 'border-primary bg-primary/10 text-primary',\n success: 'border-success bg-success/10 text-success',\n error: 'border-error bg-error/10 text-error',\n warning: 'border-warning bg-warning/10 text-warning',\n neutral: '/10 border-neutral bg-neutral/10 text-neutral',\n text: 'border-text bg-text/10 text-text',\n black: 'border-black bg-black/10 text-black',\n white: 'border-white bg-white/10 text-white',\n },\n size: {\n xs: 'border-[1.2px] px-2 py-0.5 text-xs',\n sm: 'border-[1.3px] px-2 py-0.5 text-sm',\n md: 'border-2 px-2 py-1 text-base',\n lg: 'border-2 px-3 py-2 text-lg',\n xl: 'border-2 px-3 py-2 text-xl',\n },\n border: {\n none: 'border-none',\n with: 'border-[1.3px] border-text',\n },\n background: {\n none: 'bg-none',\n with: '',\n },\n },\n\n defaultVariants: {\n roundedSize: 'full',\n border: 'none',\n color: 'text',\n size: 'md',\n },\n});\n\n/\n Tag component for displaying labels, categories, status indicators, and badges\n \n The Tag component is a versatile labeling element that supports multiple visual variants\n * for different use cases. It provides semantic color options, flexible sizing, and\n * customizable styling options for borders and backgrounds.\n \n ## Features\n * - Semantic Colors: Success, error, warning, neutral, and text color themes\n * - Flexible Sizing: Five size variants from extra small to extra large\n * - Border Radius Options: Eight rounding options from none to fully rounded\n * - Border Control: Optional borders for enhanced visual separation\n * - Background Control: Configurable background styling\n * - Accessibility: Proper HTML semantics and keyboard navigation support\n \n ## Use Cases\n * - Status Indicators: Show completion, error, or pending states\n * - Category Labels: Organize and categorize content\n * - Badges: Display counts, notifications, or achievements\n * - Keywords: Tag content with relevant keywords or topics\n * - Metadata: Show additional information like dates, authors, or types\n \n ## Design Principles\n * - Maintains readability across all size and color combinations\n * - Uses backdrop blur effect for subtle transparency\n * - Follows consistent spacing and typography scales\n * - Provides sufficient color contrast for accessibility\n \n @param {TagProps} props - The properties for the Tag component\n * @returns {JSX.Element} The rendered tag element\n \n @example\n * ```tsx\n * // Basic status tags\n * <Tag color=\"success\">Completed</Tag>\n * <Tag color=\"error\">Failed</Tag>\n * <Tag color=\"warning\">In Progress</Tag>\n \n // Category tags with borders\n * <Tag color=\"neutral\" border=\"with\">\n * Technology\n * </Tag>\n * <Tag color=\"text\" border=\"with\">\n * Design\n * </Tag>\n \n // Size variations for hierarchy\n * <div className=\"flex items-center gap-2\">\n * <Tag size=\"xs\" color=\"neutral\">Minor</Tag>\n * <Tag size=\"sm\" color=\"text\">Standard</Tag>\n * <Tag size=\"lg\" color=\"success\">Important</Tag>\n * </div>\n \n // Rounded variations\n * <div className=\"flex gap-2\">\n * <Tag roundedSize=\"none\">Sharp</Tag>\n * <Tag roundedSize=\"md\">Rounded</Tag>\n * <Tag roundedSize=\"full\">Pill</Tag>\n * </div>\n \n // Custom styled tag\n * <Tag\n * color=\"warning\"\n * size=\"lg\"\n * border=\"with\"\n * roundedSize=\"lg\"\n * className=\"font-bold uppercase tracking-wide\"\n * >\n * Custom Style\n * </Tag>\n \n // Interactive tags with click handlers\n * <Tag\n * color=\"success\"\n * onClick={() => console.log('Tag clicked')}\n * className=\"cursor-pointer hover:opacity-80 transition-opacity\"\n * >\n * Clickable Tag\n * </Tag>\n * ```\n \n @see {@link TagColor} - Available color theme options\n * @see {@link TagSize} - Available size variants\n * @see {@link TagRoundedSize} - Available border radius options\n * @see {@link TagBorder} - Border visibility options\n * @see {@link TagBackground} - Background styling options\n */\nexport const Tag: FC<TagProps> = ({\n children,\n color,\n roundedSize,\n size,\n border,\n background,\n className,\n ...props\n}) => {\n return (\n <div\n className={containerVariants({\n color,\n roundedSize,\n size,\n border,\n background,\n className,\n })}\n {...props}\n >\n {children}\n </div>\n );\n};\n"],"mappings":";;;;AAiLA,MAAM,oBAAoB,IAAI,uBAAuB;CACnD,UAAU;EACR,aAAa;GACX,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;IACH,QAAa;IACb,SAAc;GACf,MAAM;GACP;EACD,OAAO;GACL,SAAS;GACT,SAAS;GACT,OAAO;GACP,SAAS;GACT,SAAS;GACT,MAAM;GACN,OAAO;GACP,OAAO;GACR;EACD,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL;EACD,QAAQ;GACN,MAAM;GACN,MAAM;GACP;EACD,YAAY;GACV,MAAM;GACN,MAAM;GACP;EACF;CAED,iBAAiB;EACf,aAAa;EACb,QAAQ;EACR,OAAO;EACP,MAAM;EACP;CACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFF,MAAa,OAAqB,EAChC,UACA,OACA,aACA,MACA,QACA,YACA,WACA,GAAG,YACC;AACJ,QACE,oBAAC,OAAD;EACE,WAAW,kBAAkB;GAC3B;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACF,GAAI;EAEH;EACG"}
1	+ {"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Tag/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { FC, HTMLAttributes, PropsWithChildren } from 'react';\n\n/*\n Properties for the Tag component extending HTML div attributes and variant options\n \n @interface TagProps\n * @extends {PropsWithChildren<VariantProps<typeof containerVariants>>}\n * @extends {HTMLAttributes<HTMLDivElement>}\n \n @property {ReactNode} children - The content to display inside the tag\n * @property {TagColor} [color] - Color theme variant of the tag\n * @property {TagRoundedSize} [roundedSize] - Border radius size of the tag\n * @property {TagSize} [size] - Size variant affecting padding and font size\n * @property {TagBorder} [border] - Whether to show a border around the tag\n * @property {TagBackground} [background] - Background visibility option\n * @property [className] - Additional CSS classes for custom styling\n \n @example\n * ```tsx\n * // Basic tag\n * <Tag>Default Tag</Tag>\n \n // Success tag with border\n * <Tag color=\"success\" border=\"with\">\n * Success Status\n * </Tag>\n \n // Large warning tag\n * <Tag color=\"warning\" size=\"lg\">\n * Important Warning\n * </Tag>\n * ```\n /\ntype TagProps = PropsWithChildren<VariantProps<typeof containerVariants>> &\n HTMLAttributes<HTMLDivElement>;\n\n/\n Enumeration for tag border radius sizes\n \n Controls the roundedness of tag corners, from sharp edges to fully rounded pills.\n \n @enum TagRoundedSize\n * @property NONE - 'none' - No border radius (sharp corners)\n * @property SM - 'sm' - Small border radius (2px)\n * @property MD - 'md' - Medium border radius (6px)\n * @property LG - 'lg' - Large border radius (8px)\n * @property XL - 'xl' - Extra large border radius (12px)\n * @property XXL - '2xl' - 2x large border radius (16px)\n * @property XXXL - '3xl' - 3x large border radius (24px)\n * @property FULL - 'full' - Fully rounded (50% border radius, pill shape)\n \n @example\n * ```tsx\n * // Sharp corners\n * <Tag roundedSize=\"none\">Sharp Tag</Tag>\n \n // Pill-shaped tag\n * <Tag roundedSize=\"full\">Pill Tag</Tag>\n \n // Medium rounded corners\n * <Tag roundedSize=\"md\">Rounded Tag</Tag>\n * ```\n /\nexport type TagRoundedSize =\n \| 'none'\n \| 'sm'\n \| 'md'\n \| 'lg'\n \| 'xl'\n \| '2xl'\n \| '3xl'\n \| 'full';\n\n/\n Enumeration for tag color themes\n \n Provides semantic color options for different tag purposes and meanings.\n * Each color includes background, border, and text color variations.\n \n @enum TagColor\n * @property SUCCESS - 'success' - Green theme for positive states, success messages, or completed items\n * @property ERROR - 'error' - Red theme for error states, warnings, or failed operations\n * @property WARNING - 'warning' - Yellow/orange theme for caution, pending states, or important notices\n * @property NEUTRAL - 'neutral' - Gray theme for neutral information or secondary content\n * @property TEXT - 'text' - Default text color theme for general purpose tags\n \n @example\n * ```tsx\n * // Status indicators\n * <Tag color=\"success\">Completed</Tag>\n * <Tag color=\"error\">Failed</Tag>\n * <Tag color=\"warning\">Pending</Tag>\n \n // Category tags\n * <Tag color=\"neutral\">Category</Tag>\n * <Tag color=\"text\">General</Tag>\n * ```\n /\nexport type TagColor =\n \| 'primary'\n \| 'success'\n \| 'error'\n \| 'warning'\n \| 'neutral'\n \| 'text'\n \| 'blue'\n \| 'yellow'\n \| 'green'\n \| 'red'\n \| 'orange'\n \| 'purple'\n \| 'pink'\n \| 'brown'\n \| 'gray'\n \| 'black'\n \| 'white';\n\n/\n Enumeration for tag size variants\n \n Controls the overall size of tags including padding, font size, and border thickness.\n * Sizes are designed to maintain visual hierarchy and readability.\n \n @enum TagSize\n * @property XS - 'xs' - Extra small (0.5rem padding, text-xs, 1.2px border)\n * @property SM - 'sm' - Small (0.5rem padding, text-sm, 1.5px border)\n * @property MD - 'md' - Medium (1rem padding, text-base, 2px border) - Default size\n * @property LG - 'lg' - Large (2rem padding, text-lg, 2px border)\n * @property XL - 'xl' - Extra large (4rem padding, text-xl, 2px border)\n \n @example\n * ```tsx\n * // Different sizes for hierarchy\n * <Tag size=\"xs\">Small detail</Tag>\n * <Tag size=\"sm\">Minor category</Tag>\n * <Tag size=\"md\">Standard tag</Tag>\n * <Tag size=\"lg\">Important label</Tag>\n * <Tag size=\"xl\">Hero tag</Tag>\n * ```\n /\nexport type TagSize = 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl';\n\n/\n Enumeration for tag border visibility\n \n Controls whether a border is displayed around the tag.\n \n @enum TagBorder\n * @property NONE - 'none' - No border (default)\n * @property WITH - 'with' - Show border with 1.5px thickness\n \n @example\n * ```tsx\n * <Tag border=\"none\">Borderless</Tag>\n * <Tag border=\"with\">With Border</Tag>\n * ```\n /\nexport type TagBorder = 'none' \| 'with';\n\n/\n Enumeration for tag background visibility\n \n Controls the background styling of the tag.\n \n @enum TagBackground\n * @property NONE - 'none' - No background styling\n * @property WITH - 'with' - Apply background styling\n \n @example\n * ```tsx\n * <Tag background=\"none\">No Background</Tag>\n * <Tag background=\"with\">With Background</Tag>\n * ```\n /\nexport type TagBackground = 'none' \| 'with';\n\nconst containerVariants = cva('w-fit backdrop-blur', {\n variants: {\n roundedSize: {\n none: 'rounded-none',\n sm: 'rounded-sm',\n md: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n [`${'xxl'}`]: 'rounded-2xl',\n [`${'xxxl'}`]: 'rounded-3xl',\n full: 'rounded-full',\n },\n color: {\n primary: 'border-primary bg-primary/10 text-primary',\n success: 'border-success bg-success/10 text-success',\n error: 'border-error bg-error/10 text-error',\n warning: 'border-warning bg-warning/10 text-warning',\n neutral: '/10 border-neutral bg-neutral/10 text-neutral',\n text: 'border-text bg-text/10 text-text',\n black: 'border-black bg-black/10 text-black',\n white: 'border-white bg-white/10 text-white',\n },\n size: {\n xs: 'border-[1.2px] px-2 py-0.5 text-xs',\n sm: 'border-[1.3px] px-2 py-0.5 text-sm',\n md: 'border-2 px-2 py-1 text-base',\n lg: 'border-2 px-3 py-2 text-lg',\n xl: 'border-2 px-3 py-2 text-xl',\n },\n border: {\n none: 'border-none',\n with: 'border-[1.3px] border-text',\n },\n background: {\n none: 'bg-none',\n with: '',\n },\n },\n\n defaultVariants: {\n roundedSize: 'full',\n border: 'none',\n color: 'text',\n size: 'md',\n },\n});\n\n/\n Tag component for displaying labels, categories, status indicators, and badges\n \n The Tag component is a versatile labeling element that supports multiple visual variants\n * for different use cases. It provides semantic color options, flexible sizing, and\n * customizable styling options for borders and backgrounds.\n \n ## Features\n * - Semantic Colors: Success, error, warning, neutral, and text color themes\n * - Flexible Sizing: Five size variants from extra small to extra large\n * - Border Radius Options: Eight rounding options from none to fully rounded\n * - Border Control: Optional borders for enhanced visual separation\n * - Background Control: Configurable background styling\n * - Accessibility: Proper HTML semantics and keyboard navigation support\n \n ## Use Cases\n * - Status Indicators: Show completion, error, or pending states\n * - Category Labels: Organize and categorize content\n * - Badges: Display counts, notifications, or achievements\n * - Keywords: Tag content with relevant keywords or topics\n * - Metadata: Show additional information like dates, authors, or types\n \n ## Design Principles\n * - Maintains readability across all size and color combinations\n * - Uses backdrop blur effect for subtle transparency\n * - Follows consistent spacing and typography scales\n * - Provides sufficient color contrast for accessibility\n \n @param {TagProps} props - The properties for the Tag component\n * @returns {JSX.Element} The rendered tag element\n \n @example\n * ```tsx\n * // Basic status tags\n * <Tag color=\"success\">Completed</Tag>\n * <Tag color=\"error\">Failed</Tag>\n * <Tag color=\"warning\">In Progress</Tag>\n \n // Category tags with borders\n * <Tag color=\"neutral\" border=\"with\">\n * Technology\n * </Tag>\n * <Tag color=\"text\" border=\"with\">\n * Design\n * </Tag>\n \n // Size variations for hierarchy\n * <div className=\"flex items-center gap-2\">\n * <Tag size=\"xs\" color=\"neutral\">Minor</Tag>\n * <Tag size=\"sm\" color=\"text\">Standard</Tag>\n * <Tag size=\"lg\" color=\"success\">Important</Tag>\n * </div>\n \n // Rounded variations\n * <div className=\"flex gap-2\">\n * <Tag roundedSize=\"none\">Sharp</Tag>\n * <Tag roundedSize=\"md\">Rounded</Tag>\n * <Tag roundedSize=\"full\">Pill</Tag>\n * </div>\n \n // Custom styled tag\n * <Tag\n * color=\"warning\"\n * size=\"lg\"\n * border=\"with\"\n * roundedSize=\"lg\"\n * className=\"font-bold uppercase tracking-wide\"\n * >\n * Custom Style\n * </Tag>\n \n // Interactive tags with click handlers\n * <Tag\n * color=\"success\"\n * onClick={() => console.log('Tag clicked')}\n * className=\"cursor-pointer hover:opacity-80 transition-opacity\"\n * >\n * Clickable Tag\n * </Tag>\n * ```\n \n @see {@link TagColor} - Available color theme options\n * @see {@link TagSize} - Available size variants\n * @see {@link TagRoundedSize} - Available border radius options\n * @see {@link TagBorder} - Border visibility options\n * @see {@link TagBackground} - Background styling options\n */\nexport const Tag: FC<TagProps> = ({\n children,\n color,\n roundedSize,\n size,\n border,\n background,\n className,\n ...props\n}) => {\n return (\n <div\n className={containerVariants({\n color,\n roundedSize,\n size,\n border,\n background,\n className,\n })}\n {...props}\n >\n {children}\n </div>\n );\n};\n"],"mappings":";;;;AAiLA,MAAM,oBAAoB,IAAI,uBAAuB;CACnD,UAAU;EACR,aAAa;GACX,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;IACH,QAAa;IACb,SAAc;GACf,MAAM;EACR;EACA,OAAO;GACL,SAAS;GACT,SAAS;GACT,OAAO;GACP,SAAS;GACT,SAAS;GACT,MAAM;GACN,OAAO;GACP,OAAO;EACT;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,QAAQ;GACN,MAAM;GACN,MAAM;EACR;EACA,YAAY;GACV,MAAM;GACN,MAAM;EACR;CACF;CAEA,iBAAiB;EACf,aAAa;EACb,QAAQ;EACR,OAAO;EACP,MAAM;CACR;AACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFD,MAAa,OAAqB,EAChC,UACA,OACA,aACA,MACA,QACA,YACA,WACA,GAAG,YACC;CACJ,OACE,oBAAC,OAAD;EACE,WAAW,kBAAkB;GAC3B;GACA;GACA;GACA;GACA;GACA;EACF,CAAC;EACD,GAAI;EAEH;CACE;AAET"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TechLogo.mjs","names":[],"sources":["../../../../src/components/TechLogo/TechLogo.tsx"],"sourcesContent":["import { type FC, type JSX, lazy, Suspense, type SVGProps } from 'react';\nimport { cn } from '../../utils/cn';\nimport type { TechLogoName } from './types';\n\nexport type TechLogoProps = SVGProps<SVGSVGElement> & {\n name: TechLogoName;\n};\n\n/*\n This ensures React.lazy always receives a valid component.\n */\nconst dynamicLogo = (importFn: () => Promise<any>, exportName: string) =>\n lazy(async () => {\n const module = await importFn();\n const asset = module[exportName];\n\n return { default: asset };\n });\n\nconst logoRecord: Record<TechLogoName, ReturnType<typeof dynamicLogo>> = {\n adonis: dynamicLogo(() => import('./logos/Adonis'), 'AdonisLogo'),\n angular: dynamicLogo(() => import('./logos/Angular'), 'AngularLogo'),\n astro: dynamicLogo(() => import('./logos/Astro'), 'AstroLogo'),\n express: dynamicLogo(() => import('./logos/Express'), 'ExpressLogo'),\n fastify: dynamicLogo(() => import('./logos/Fastify'), 'FastifyLogo'),\n hono: dynamicLogo(() => import('./logos/Hono'), 'HonoLogo'),\n lynx: dynamicLogo(() => import('./logos/Lynx'), 'LynxLogo'),\n nestjs: dynamicLogo(() => import('./logos/NestJS'), 'NestJSLogo'),\n nextjs: dynamicLogo(() => import('./logos/Nextjs'), 'NextJSLogo'),\n node: dynamicLogo(() => import('./logos/Node'), 'NodejsLogo'),\n nuxt: dynamicLogo(() => import('./logos/Nuxt'), 'NuxtLogo'),\n preact: dynamicLogo(() => import('./logos/Preact'), 'PreactLogo'),\n react: dynamicLogo(() => import('./logos/Reactjs'), 'ReactLogo'),\n solid: dynamicLogo(() => import('./logos/Solid'), 'SolidLogo'),\n svelte: dynamicLogo(() => import('./logos/Svelte'), 'SvelteLogo'),\n tanstack: dynamicLogo(() => import('./logos/Tanstack'), 'TanstackLogo'),\n vite: dynamicLogo(() => import('./logos/Vitejs'), 'ViteLogo'),\n vue: dynamicLogo(() => import('./logos/Vuejs'), 'VuejsLogo'),\n lit: dynamicLogo(() => import('./logos/Lit'), 'LitLogo'),\n vanilla: dynamicLogo(() => import('./logos/Vanilla'), 'JavaScriptLogo'),\n anthropic: dynamicLogo(() => import('./logos/Anthropic'), 'AnthropicLogo'),\n claude: dynamicLogo(() => import('./logos/Claude'), 'ClaudeLogo'),\n chatgpt: dynamicLogo(() => import('./logos/ChatGPT'), 'ChatGPTLogo'),\n deepseek: dynamicLogo(() => import('./logos/DeepSeek'), 'DeepSeekLogo'),\n gemini: dynamicLogo(() => import('./logos/Gemini'), 'GeminiLogo'),\n googleai: dynamicLogo(() => import('./logos/GoogleAI'), 'GoogleAILogo'),\n grok: dynamicLogo(() => import('./logos/Grok'), 'GrokLogo'),\n mistral: dynamicLogo(() => import('./logos/Mistral'), 'MistralLogo'),\n ollama: dynamicLogo(() => import('./logos/Ollama'), 'OllamaLogo'),\n openai: dynamicLogo(() => import('./logos/OpenAI'), 'OpenAILogo'),\n perplexity: dynamicLogo(() => import('./logos/Perplexity'), 'PerplexityLogo'),\n github: dynamicLogo(() => import('./logos/GitHub'), 'GitHubLogo'),\n gitlab: dynamicLogo(() => import('./logos/GitLab'), 'GitLabLogo'),\n bitbucket: dynamicLogo(() => import('./logos/Bitbucket'), 'BitbucketLogo'),\n google: dynamicLogo(() => import('./logos/Google'), 'GoogleLogo'),\n linkedin: dynamicLogo(() => import('./logos/LinkedIn'), 'LinkedInLogo'),\n};\n\nexport const TechLogo: FC<TechLogoProps> = ({\n name,\n ...props\n}): JSX.Element => {\n const LazyLogo = logoRecord[name as TechLogoName];\n\n if (!LazyLogo) {\n return <></>;\n }\n\n return (\n <Suspense\n fallback={\n <div className={cn('animate-pulse bg-neutral-200', props.className)} />\n }\n >\n <LazyLogo {...(props as any)} />\n </Suspense>\n );\n};\n"],"mappings":";;;;;;;;AAWA,MAAM,eAAe,UAA8B,eACjD,KAAK,YAAY;~~AAIf~~,~~QAAO~~,EAAE,UAFK,MADO,~~UAAU~~,EACV,~~aAEI~~;~~EACzB~~;~~AAEJ~~,MAAM,aAAmE;CACvE,QAAQ,kBAAkB,OAAO,uBAAmB,~~aAAa~~;~~CACjE~~,SAAS,kBAAkB,OAAO,wBAAoB,~~cAAc~~;~~CACpE~~,OAAO,kBAAkB,OAAO,sBAAkB,~~YAAY~~;~~CAC9D~~,SAAS,kBAAkB,OAAO,wBAAoB,~~cAAc~~;~~CACpE~~,SAAS,kBAAkB,OAAO,wBAAoB,~~cAAc~~;~~CACpE~~,MAAM,kBAAkB,OAAO,qBAAiB,~~WAAW~~;~~CAC3D~~,MAAM,kBAAkB,OAAO,qBAAiB,~~WAAW~~;~~CAC3D~~,QAAQ,kBAAkB,OAAO,uBAAmB,~~aAAa~~;~~CACjE~~,QAAQ,kBAAkB,OAAO,uBAAmB,~~aAAa~~;~~CACjE~~,MAAM,kBAAkB,OAAO,qBAAiB,~~aAAa~~;~~CAC7D~~,MAAM,kBAAkB,OAAO,qBAAiB,~~WAAW~~;~~CAC3D~~,QAAQ,kBAAkB,OAAO,uBAAmB,~~aAAa~~;~~CACjE~~,OAAO,kBAAkB,OAAO,wBAAoB,~~YAAY~~;~~CAChE~~,OAAO,kBAAkB,OAAO,sBAAkB,~~YAAY~~;~~CAC9D~~,QAAQ,kBAAkB,OAAO,uBAAmB,~~aAAa~~;~~CACjE~~,UAAU,kBAAkB,OAAO,yBAAqB,~~eAAe~~;~~CACvE~~,MAAM,kBAAkB,OAAO,uBAAmB,~~WAAW~~;~~CAC7D~~,KAAK,kBAAkB,OAAO,sBAAkB,~~YAAY~~;~~CAC5D~~,KAAK,kBAAkB,OAAO,oBAAgB,~~UAAU~~;~~CACxD~~,SAAS,kBAAkB,OAAO,wBAAoB,~~iBAAiB~~;~~CACvE~~,WAAW,kBAAkB,OAAO,0BAAsB,~~gBAAgB~~;~~CAC1E~~,QAAQ,kBAAkB,OAAO,uBAAmB,~~aAAa~~;~~CACjE~~,SAAS,kBAAkB,OAAO,wBAAoB,~~cAAc~~;~~CACpE~~,UAAU,kBAAkB,OAAO,yBAAqB,~~eAAe~~;~~CACvE~~,QAAQ,kBAAkB,OAAO,uBAAmB,~~aAAa~~;~~CACjE~~,UAAU,kBAAkB,OAAO,yBAAqB,~~eAAe~~;~~CACvE~~,MAAM,kBAAkB,OAAO,qBAAiB,~~WAAW~~;~~CAC3D~~,SAAS,kBAAkB,OAAO,wBAAoB,~~cAAc~~;~~CACpE~~,QAAQ,kBAAkB,OAAO,uBAAmB,~~aAAa~~;~~CACjE~~,QAAQ,kBAAkB,OAAO,uBAAmB,~~aAAa~~;~~CACjE~~,YAAY,kBAAkB,OAAO,2BAAuB,~~iBAAiB~~;~~CAC7E~~,QAAQ,kBAAkB,OAAO,uBAAmB,~~aAAa~~;~~CACjE~~,QAAQ,kBAAkB,OAAO,uBAAmB,~~aAAa~~;~~CACjE~~,WAAW,kBAAkB,OAAO,0BAAsB,~~gBAAgB~~;~~CAC1E~~,QAAQ,kBAAkB,OAAO,uBAAmB,~~aAAa~~;~~CACjE~~,UAAU,kBAAkB,OAAO,yBAAqB,~~eAAe~~;~~CACxE~~;~~AAED~~,MAAa,YAA+B,EAC1C,MACA,GAAG,YACc;CACjB,MAAM,WAAW,WAAW;~~AAE5B~~,~~KAAI~~,CAAC,~~SACH~~,~~QAAO~~,~~kCAAK~~;~~AAGd~~,~~QACE~~,oBAAC,UAAD;EACE,UACE,oBAAC,OAAD,EAAK,WAAW,GAAG,gCAAgC,MAAM,~~UAAU~~,EAAI;~~YAGzE~~,oBAAC,UAAD,EAAU,GAAK,~~OAAiB~~;~~EACvB~~"}
1	+ {"version":3,"file":"TechLogo.mjs","names":[],"sources":["../../../../src/components/TechLogo/TechLogo.tsx"],"sourcesContent":["import { type FC, type JSX, lazy, Suspense, type SVGProps } from 'react';\nimport { cn } from '../../utils/cn';\nimport type { TechLogoName } from './types';\n\nexport type TechLogoProps = SVGProps<SVGSVGElement> & {\n name: TechLogoName;\n};\n\n/*\n This ensures React.lazy always receives a valid component.\n */\nconst dynamicLogo = (importFn: () => Promise<any>, exportName: string) =>\n lazy(async () => {\n const module = await importFn();\n const asset = module[exportName];\n\n return { default: asset };\n });\n\nconst logoRecord: Record<TechLogoName, ReturnType<typeof dynamicLogo>> = {\n adonis: dynamicLogo(() => import('./logos/Adonis'), 'AdonisLogo'),\n angular: dynamicLogo(() => import('./logos/Angular'), 'AngularLogo'),\n astro: dynamicLogo(() => import('./logos/Astro'), 'AstroLogo'),\n express: dynamicLogo(() => import('./logos/Express'), 'ExpressLogo'),\n fastify: dynamicLogo(() => import('./logos/Fastify'), 'FastifyLogo'),\n hono: dynamicLogo(() => import('./logos/Hono'), 'HonoLogo'),\n lynx: dynamicLogo(() => import('./logos/Lynx'), 'LynxLogo'),\n nestjs: dynamicLogo(() => import('./logos/NestJS'), 'NestJSLogo'),\n nextjs: dynamicLogo(() => import('./logos/Nextjs'), 'NextJSLogo'),\n node: dynamicLogo(() => import('./logos/Node'), 'NodejsLogo'),\n nuxt: dynamicLogo(() => import('./logos/Nuxt'), 'NuxtLogo'),\n preact: dynamicLogo(() => import('./logos/Preact'), 'PreactLogo'),\n react: dynamicLogo(() => import('./logos/Reactjs'), 'ReactLogo'),\n solid: dynamicLogo(() => import('./logos/Solid'), 'SolidLogo'),\n svelte: dynamicLogo(() => import('./logos/Svelte'), 'SvelteLogo'),\n tanstack: dynamicLogo(() => import('./logos/Tanstack'), 'TanstackLogo'),\n vite: dynamicLogo(() => import('./logos/Vitejs'), 'ViteLogo'),\n vue: dynamicLogo(() => import('./logos/Vuejs'), 'VuejsLogo'),\n lit: dynamicLogo(() => import('./logos/Lit'), 'LitLogo'),\n vanilla: dynamicLogo(() => import('./logos/Vanilla'), 'JavaScriptLogo'),\n anthropic: dynamicLogo(() => import('./logos/Anthropic'), 'AnthropicLogo'),\n claude: dynamicLogo(() => import('./logos/Claude'), 'ClaudeLogo'),\n chatgpt: dynamicLogo(() => import('./logos/ChatGPT'), 'ChatGPTLogo'),\n deepseek: dynamicLogo(() => import('./logos/DeepSeek'), 'DeepSeekLogo'),\n gemini: dynamicLogo(() => import('./logos/Gemini'), 'GeminiLogo'),\n googleai: dynamicLogo(() => import('./logos/GoogleAI'), 'GoogleAILogo'),\n grok: dynamicLogo(() => import('./logos/Grok'), 'GrokLogo'),\n mistral: dynamicLogo(() => import('./logos/Mistral'), 'MistralLogo'),\n ollama: dynamicLogo(() => import('./logos/Ollama'), 'OllamaLogo'),\n openai: dynamicLogo(() => import('./logos/OpenAI'), 'OpenAILogo'),\n perplexity: dynamicLogo(() => import('./logos/Perplexity'), 'PerplexityLogo'),\n github: dynamicLogo(() => import('./logos/GitHub'), 'GitHubLogo'),\n gitlab: dynamicLogo(() => import('./logos/GitLab'), 'GitLabLogo'),\n bitbucket: dynamicLogo(() => import('./logos/Bitbucket'), 'BitbucketLogo'),\n google: dynamicLogo(() => import('./logos/Google'), 'GoogleLogo'),\n linkedin: dynamicLogo(() => import('./logos/LinkedIn'), 'LinkedInLogo'),\n};\n\nexport const TechLogo: FC<TechLogoProps> = ({\n name,\n ...props\n}): JSX.Element => {\n const LazyLogo = logoRecord[name as TechLogoName];\n\n if (!LazyLogo) {\n return <></>;\n }\n\n return (\n <Suspense\n fallback={\n <div className={cn('animate-pulse bg-neutral-200', props.className)} />\n }\n >\n <LazyLogo {...(props as any)} />\n </Suspense>\n );\n};\n"],"mappings":";;;;;;;;AAWA,MAAM,eAAe,UAA8B,eACjD,KAAK,YAAY;CAIf,OAAO,EAAE,UAFK,MADO,SAAS,EACV,CAAC,YAEG;AAC1B,CAAC;AAEH,MAAM,aAAmE;CACvE,QAAQ,kBAAkB,OAAO,uBAAmB,YAAY;CAChE,SAAS,kBAAkB,OAAO,wBAAoB,aAAa;CACnE,OAAO,kBAAkB,OAAO,sBAAkB,WAAW;CAC7D,SAAS,kBAAkB,OAAO,wBAAoB,aAAa;CACnE,SAAS,kBAAkB,OAAO,wBAAoB,aAAa;CACnE,MAAM,kBAAkB,OAAO,qBAAiB,UAAU;CAC1D,MAAM,kBAAkB,OAAO,qBAAiB,UAAU;CAC1D,QAAQ,kBAAkB,OAAO,uBAAmB,YAAY;CAChE,QAAQ,kBAAkB,OAAO,uBAAmB,YAAY;CAChE,MAAM,kBAAkB,OAAO,qBAAiB,YAAY;CAC5D,MAAM,kBAAkB,OAAO,qBAAiB,UAAU;CAC1D,QAAQ,kBAAkB,OAAO,uBAAmB,YAAY;CAChE,OAAO,kBAAkB,OAAO,wBAAoB,WAAW;CAC/D,OAAO,kBAAkB,OAAO,sBAAkB,WAAW;CAC7D,QAAQ,kBAAkB,OAAO,uBAAmB,YAAY;CAChE,UAAU,kBAAkB,OAAO,yBAAqB,cAAc;CACtE,MAAM,kBAAkB,OAAO,uBAAmB,UAAU;CAC5D,KAAK,kBAAkB,OAAO,sBAAkB,WAAW;CAC3D,KAAK,kBAAkB,OAAO,oBAAgB,SAAS;CACvD,SAAS,kBAAkB,OAAO,wBAAoB,gBAAgB;CACtE,WAAW,kBAAkB,OAAO,0BAAsB,eAAe;CACzE,QAAQ,kBAAkB,OAAO,uBAAmB,YAAY;CAChE,SAAS,kBAAkB,OAAO,wBAAoB,aAAa;CACnE,UAAU,kBAAkB,OAAO,yBAAqB,cAAc;CACtE,QAAQ,kBAAkB,OAAO,uBAAmB,YAAY;CAChE,UAAU,kBAAkB,OAAO,yBAAqB,cAAc;CACtE,MAAM,kBAAkB,OAAO,qBAAiB,UAAU;CAC1D,SAAS,kBAAkB,OAAO,wBAAoB,aAAa;CACnE,QAAQ,kBAAkB,OAAO,uBAAmB,YAAY;CAChE,QAAQ,kBAAkB,OAAO,uBAAmB,YAAY;CAChE,YAAY,kBAAkB,OAAO,2BAAuB,gBAAgB;CAC5E,QAAQ,kBAAkB,OAAO,uBAAmB,YAAY;CAChE,QAAQ,kBAAkB,OAAO,uBAAmB,YAAY;CAChE,WAAW,kBAAkB,OAAO,0BAAsB,eAAe;CACzE,QAAQ,kBAAkB,OAAO,uBAAmB,YAAY;CAChE,UAAU,kBAAkB,OAAO,yBAAqB,cAAc;AACxE;AAEA,MAAa,YAA+B,EAC1C,MACA,GAAG,YACc;CACjB,MAAM,WAAW,WAAW;CAE5B,IAAI,CAAC,UACH,OAAO,iCAAI;CAGb,OACE,oBAAC,UAAD;EACE,UACE,oBAAC,OAAD,EAAK,WAAW,GAAG,gCAAgC,MAAM,SAAS,EAAI;YAGxE,oBAAC,UAAD,EAAU,GAAK,MAAgB;CACvB;AAEd"}

package/dist/esm/components/TechLogo/logos/Adonis.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Adonis.mjs","names":[],"sources":["../../../../../src/components/TechLogo/logos/Adonis.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\n\nexport const AdonisLogo: FC<SVGProps<SVGSVGElement>> = (props) => (\n <svg\n {...props}\n viewBox=\"0 0 512 512\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n strokeLinejoin=\"round\"\n strokeMiterlimit=\"2\"\n role=\"img\"\n aria-label=\"Adonis logo\"\n >\n <path\n d=\"M106.812 307.933l78.418-178.207c13.23-30.039 38.692-46.332 70.77-46.332 32.078 0 57.535 16.29 70.773 46.328l78.414 178.211c3.562 8.656 6.617 19.86 6.617 29.531 0 44.297-31.059 75.356-75.36 75.356-15.085 0-27.07-3.848-39.198-7.746-12.43-3.993-25.012-8.036-41.246-8.036-16.047 0-28.938 4.079-41.614 8.09-12.257 3.88-24.316 7.692-38.832 7.692-44.296 0-75.359-31.055-75.359-75.352 0-9.676 3.059-20.879 6.617-29.535z\"\n fill=\"#fff\"\n />\n <path\n d=\"M6 256c0 201.628 48.371 250 250 250 201.628 0 250-48.372 250-250C506 54.37 457.627 6 256 6 54.37 6 6 54.371 6 256zm100.812 51.933l78.418-178.207c13.23-30.039 38.692-46.332 70.77-46.332 32.078 0 57.535 16.29 70.773 46.328l78.414 178.211c3.562 8.656 6.617 19.86 6.617 29.531 0 44.297-31.059 75.356-75.36 75.356-15.085 0-27.07-3.848-39.198-7.746-12.43-3.993-25.012-8.036-41.246-8.036-16.047 0-28.938 4.079-41.614 8.09-12.257 3.88-24.316 7.692-38.832 7.692-44.296 0-75.359-31.055-75.359-75.352 0-9.676 3.059-20.879 6.621-29.535h-.004zM256 160.785L178.605 335.94c22.914-10.695 49.39-15.785 77.395-15.785 26.988 0 54.48 5.09 76.374 15.781L256 160.789v-.004z\"\n fill=\"#5a45ff\"\n />\n </svg>\n);\n"],"mappings":";;;AAEA,MAAa,cAA2C,UACtD,qBAAC,OAAD;CACE,GAAI;CACJ,SAAQ;CACR,OAAM;CACN,UAAS;CACT,UAAS;CACT,gBAAe;CACf,kBAAiB;CACjB,MAAK;CACL,cAAW;WATb,CAWE,oBAAC,QAAD;EACE,GAAE;EACF,MAAK;~~EACL~~,~~GACF~~,oBAAC,QAAD;EACE,GAAE;EACF,MAAK;~~EACL~~,EACE"}
1	+ {"version":3,"file":"Adonis.mjs","names":[],"sources":["../../../../../src/components/TechLogo/logos/Adonis.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\n\nexport const AdonisLogo: FC<SVGProps<SVGSVGElement>> = (props) => (\n <svg\n {...props}\n viewBox=\"0 0 512 512\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n strokeLinejoin=\"round\"\n strokeMiterlimit=\"2\"\n role=\"img\"\n aria-label=\"Adonis logo\"\n >\n <path\n d=\"M106.812 307.933l78.418-178.207c13.23-30.039 38.692-46.332 70.77-46.332 32.078 0 57.535 16.29 70.773 46.328l78.414 178.211c3.562 8.656 6.617 19.86 6.617 29.531 0 44.297-31.059 75.356-75.36 75.356-15.085 0-27.07-3.848-39.198-7.746-12.43-3.993-25.012-8.036-41.246-8.036-16.047 0-28.938 4.079-41.614 8.09-12.257 3.88-24.316 7.692-38.832 7.692-44.296 0-75.359-31.055-75.359-75.352 0-9.676 3.059-20.879 6.617-29.535z\"\n fill=\"#fff\"\n />\n <path\n d=\"M6 256c0 201.628 48.371 250 250 250 201.628 0 250-48.372 250-250C506 54.37 457.627 6 256 6 54.37 6 6 54.371 6 256zm100.812 51.933l78.418-178.207c13.23-30.039 38.692-46.332 70.77-46.332 32.078 0 57.535 16.29 70.773 46.328l78.414 178.211c3.562 8.656 6.617 19.86 6.617 29.531 0 44.297-31.059 75.356-75.36 75.356-15.085 0-27.07-3.848-39.198-7.746-12.43-3.993-25.012-8.036-41.246-8.036-16.047 0-28.938 4.079-41.614 8.09-12.257 3.88-24.316 7.692-38.832 7.692-44.296 0-75.359-31.055-75.359-75.352 0-9.676 3.059-20.879 6.621-29.535h-.004zM256 160.785L178.605 335.94c22.914-10.695 49.39-15.785 77.395-15.785 26.988 0 54.48 5.09 76.374 15.781L256 160.789v-.004z\"\n fill=\"#5a45ff\"\n />\n </svg>\n);\n"],"mappings":";;;AAEA,MAAa,cAA2C,UACtD,qBAAC,OAAD;CACE,GAAI;CACJ,SAAQ;CACR,OAAM;CACN,UAAS;CACT,UAAS;CACT,gBAAe;CACf,kBAAiB;CACjB,MAAK;CACL,cAAW;WATb,CAWE,oBAAC,QAAD;EACE,GAAE;EACF,MAAK;CACN,IACD,oBAAC,QAAD;EACE,GAAE;EACF,MAAK;CACN,EACE"}

package/dist/esm/components/TechLogo/logos/Angular.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Angular.mjs","names":[],"sources":["../../../../../src/components/TechLogo/logos/Angular.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\n\nexport const AngularLogo: FC<SVGProps<SVGSVGElement>> = (props) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"img\"\n aria-label=\"Angular logo\"\n version=\"1.1\"\n preserveAspectRatio=\"xMidYMid\"\n viewBox=\"20 20 210 210\"\n {...props}\n >\n <g>\n <polygon\n style={{\n fill: '#DD0031',\n }}\n points=\"125,30 125,30 125,30 31.9,63.2 46.1,186.3 125,230 125,230 125,230 203.9,186.3 218.1,63.2 \"\n />\n <polygon\n style={{\n fill: '#C3002F',\n }}\n points=\"125,30 125,52.2 125,52.1 125,153.4 125,153.4 125,230 125,230 203.9,186.3 218.1,63.2 125,30 \"\n />\n <path\n style={{\n fill: '#FFFFFF',\n }}\n d=\"M125,52.1L66.8,182.6h0h21.7h0l11.7-29.2h49.4l11.7,29.2h0h21.7h0L125,52.1L125,52.1L125,52.1L125,52.1 L125,52.1z M142,135.4H108l17-40.9L142,135.4z\"\n />\n </g>\n </svg>\n);\n"],"mappings":";;;AAEA,MAAa,eAA4C,UACvD,oBAAC,OAAD;CACE,OAAM;CACN,MAAK;CACL,cAAW;CACX,SAAQ;CACR,qBAAoB;CACpB,SAAQ;CACR,GAAI;WAEJ,qBAAC,KAAD;EACE,oBAAC,WAAD;GACE,OAAO,EACL,MAAM,~~WACP~~;~~GACD~~,QAAO;~~GACP~~;~~EACF~~,oBAAC,WAAD;GACE,OAAO,EACL,MAAM,~~WACP~~;~~GACD~~,QAAO;~~GACP~~;~~EACF~~,oBAAC,QAAD;GACE,OAAO,EACL,MAAM,~~WACP~~;~~GACD~~,GAAE;~~GACF~~;~~EACA~~;~~CACA~~"}
1	+ {"version":3,"file":"Angular.mjs","names":[],"sources":["../../../../../src/components/TechLogo/logos/Angular.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\n\nexport const AngularLogo: FC<SVGProps<SVGSVGElement>> = (props) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"img\"\n aria-label=\"Angular logo\"\n version=\"1.1\"\n preserveAspectRatio=\"xMidYMid\"\n viewBox=\"20 20 210 210\"\n {...props}\n >\n <g>\n <polygon\n style={{\n fill: '#DD0031',\n }}\n points=\"125,30 125,30 125,30 31.9,63.2 46.1,186.3 125,230 125,230 125,230 203.9,186.3 218.1,63.2 \"\n />\n <polygon\n style={{\n fill: '#C3002F',\n }}\n points=\"125,30 125,52.2 125,52.1 125,153.4 125,153.4 125,230 125,230 203.9,186.3 218.1,63.2 125,30 \"\n />\n <path\n style={{\n fill: '#FFFFFF',\n }}\n d=\"M125,52.1L66.8,182.6h0h21.7h0l11.7-29.2h49.4l11.7,29.2h0h21.7h0L125,52.1L125,52.1L125,52.1L125,52.1 L125,52.1z M142,135.4H108l17-40.9L142,135.4z\"\n />\n </g>\n </svg>\n);\n"],"mappings":";;;AAEA,MAAa,eAA4C,UACvD,oBAAC,OAAD;CACE,OAAM;CACN,MAAK;CACL,cAAW;CACX,SAAQ;CACR,qBAAoB;CACpB,SAAQ;CACR,GAAI;WAEJ,qBAAC,KAAD;EACE,oBAAC,WAAD;GACE,OAAO,EACL,MAAM,UACR;GACA,QAAO;EACR;EACD,oBAAC,WAAD;GACE,OAAO,EACL,MAAM,UACR;GACA,QAAO;EACR;EACD,oBAAC,QAAD;GACE,OAAO,EACL,MAAM,UACR;GACA,GAAE;EACH;CACA;AACA"}

package/dist/esm/components/TechLogo/logos/Anthropic.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Anthropic.mjs","names":[],"sources":["../../../../../src/components/TechLogo/logos/Anthropic.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\n\nexport const AnthropicLogo: FC<SVGProps<SVGSVGElement>> = (props) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"img\"\n aria-label=\"Anthropic logo\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n height=\"24\"\n width=\"24\"\n {...props}\n >\n <path\n fill=\"currentColor\"\n d=\"m13.788825 3.932 6.43325 16.136075h3.5279L17.316725 3.932H13.788825Z\"\n strokeWidth=\"0.25\"\n />\n <path\n fill=\"currentColor\"\n d=\"m6.325375 13.682775 2.20125 -5.67065 2.201275 5.67065H6.325375ZM6.68225 3.932 0.25 20.068075h3.596525l1.3155 -3.3886h6.729425l1.315275 3.3886h3.59655L10.371 3.932H6.68225Z\"\n strokeWidth=\"0.25\"\n />\n </svg>\n);\n"],"mappings":";;;AAEA,MAAa,iBAA8C,UACzD,qBAAC,OAAD;CACE,OAAM;CACN,MAAK;CACL,cAAW;CACX,MAAK;CACL,SAAQ;CACR,QAAO;CACP,OAAM;CACN,GAAI;WARN,CAUE,oBAAC,QAAD;EACE,MAAK;EACL,GAAE;EACF,aAAY;~~EACZ~~,~~GACF~~,oBAAC,QAAD;EACE,MAAK;EACL,GAAE;EACF,aAAY;~~EACZ~~,EACE"}
1	+ {"version":3,"file":"Anthropic.mjs","names":[],"sources":["../../../../../src/components/TechLogo/logos/Anthropic.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\n\nexport const AnthropicLogo: FC<SVGProps<SVGSVGElement>> = (props) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"img\"\n aria-label=\"Anthropic logo\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n height=\"24\"\n width=\"24\"\n {...props}\n >\n <path\n fill=\"currentColor\"\n d=\"m13.788825 3.932 6.43325 16.136075h3.5279L17.316725 3.932H13.788825Z\"\n strokeWidth=\"0.25\"\n />\n <path\n fill=\"currentColor\"\n d=\"m6.325375 13.682775 2.20125 -5.67065 2.201275 5.67065H6.325375ZM6.68225 3.932 0.25 20.068075h3.596525l1.3155 -3.3886h6.729425l1.315275 3.3886h3.59655L10.371 3.932H6.68225Z\"\n strokeWidth=\"0.25\"\n />\n </svg>\n);\n"],"mappings":";;;AAEA,MAAa,iBAA8C,UACzD,qBAAC,OAAD;CACE,OAAM;CACN,MAAK;CACL,cAAW;CACX,MAAK;CACL,SAAQ;CACR,QAAO;CACP,OAAM;CACN,GAAI;WARN,CAUE,oBAAC,QAAD;EACE,MAAK;EACL,GAAE;EACF,aAAY;CACb,IACD,oBAAC,QAAD;EACE,MAAK;EACL,GAAE;EACF,aAAY;CACb,EACE"}