@intlayer/design-system 8.1.2 → 8.1.3

package/dist/esm/components/SocialNetworks/TiktokLogo.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TiktokLogo.mjs","names":[],"sources":["../../../../src/components/SocialNetworks/TiktokLogo.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\n\nexport const TiktokLogo: FC<SVGProps<SVGSVGElement>> = (props) => (\n  <svg\n    fill=\"currentColor\"\n    width=\"800px\"\n    height=\"800px\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    role=\"img\"\n    aria-label=\"Tiktok logo\"\n    {...props}\n  >\n    <path d=\"M19.589 6.686a4.793 4.793 0 0 1-3.77-4.245V2h-3.445v13.672a2.896 2.896 0 0 1-5.201 1.743l-.002-.001.002.001a2.895 2.895 0 0 1 3.183-4.51v-3.5a6.329 6.329 0 0 0-5.394 10.692 6.33 6.33 0 0 0 10.857-4.424V8.687a8.182 8.182 0 0 0 4.773 1.526V6.79a4.831 4.831 0 0 1-1.003-.104z\" />\n  </svg>\n);\n"],"mappings":";;;AAEA,MAAa,cAA2C,UACtD,oBAAC;CACC,MAAK;CACL,OAAM;CACN,QAAO;CACP,SAAQ;CACR,OAAM;CACN,MAAK;CACL,cAAW;CACX,GAAI;WAEJ,oBAAC,UAAK,GAAE,qRAAqR;EACzR"}
+{"version":3,"file":"TiktokLogo.mjs","names":[],"sources":["../../../../src/components/SocialNetworks/TiktokLogo.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\n\nexport const TiktokLogo: FC<SVGProps<SVGSVGElement>> = (props) => (\n  <svg\n    fill=\"currentColor\"\n    width=\"800px\"\n    height=\"800px\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    role=\"img\"\n    aria-label=\"Tiktok logo\"\n    {...props}\n  >\n    <path d=\"M19.589 6.686a4.793 4.793 0 0 1-3.77-4.245V2h-3.445v13.672a2.896 2.896 0 0 1-5.201 1.743l-.002-.001.002.001a2.895 2.895 0 0 1 3.183-4.51v-3.5a6.329 6.329 0 0 0-5.394 10.692 6.33 6.33 0 0 0 10.857-4.424V8.687a8.182 8.182 0 0 0 4.773 1.526V6.79a4.831 4.831 0 0 1-1.003-.104z\" />\n  </svg>\n);\n"],"mappings":"wCAEA,MAAa,EAA2C,GACtD,EAAC,MAAA,CACC,KAAK,eACL,MAAM,QACN,OAAO,QACP,QAAQ,YACR,MAAM,6BACN,KAAK,MACL,aAAW,cACX,GAAI,WAEJ,EAAC,OAAA,CAAK,EAAE,mRAAA,CAAqR,EACzR"}

package/dist/esm/components/SocialNetworks/XLogo.mjs

@@ -1,18 +1,2 @@
-import { jsx } from "react/jsx-runtime";
-
-//#region src/components/SocialNetworks/XLogo.tsx
-const XLogo = (props) => /* @__PURE__ */ jsx("svg", {
-	xmlns: "http://www.w3.org/2000/svg",
-	viewBox: "0 0 300 271",
-	width: "300",
-	height: "271",
-	fill: "currentColor",
-	role: "img",
-	"aria-label": "X logo",
-	...props,
-	children: /* @__PURE__ */ jsx("path", { d: "m236 0h46l-101 115 118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123-113-148h94.9l65.5 86.6zm-16.1 244h25.5l-165-218h-27.4z" })
-});
-
-//#endregion
-export { XLogo };
+import{jsx as e}from"react/jsx-runtime";const t=t=>e(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 300 271`,width:`300`,height:`271`,fill:`currentColor`,role:`img`,"aria-label":`X logo`,...t,children:e(`path`,{d:`m236 0h46l-101 115 118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123-113-148h94.9l65.5 86.6zm-16.1 244h25.5l-165-218h-27.4z`})});export{t as XLogo};
 //# sourceMappingURL=XLogo.mjs.map

package/dist/esm/components/SocialNetworks/XLogo.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"XLogo.mjs","names":[],"sources":["../../../../src/components/SocialNetworks/XLogo.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\n\nexport const XLogo: FC<SVGProps<SVGSVGElement>> = (props) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 300 271\"\n    width=\"300\"\n    height=\"271\"\n    fill=\"currentColor\"\n    role=\"img\"\n    aria-label=\"X logo\"\n    {...props}\n  >\n    <path d=\"m236 0h46l-101 115 118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123-113-148h94.9l65.5 86.6zm-16.1 244h25.5l-165-218h-27.4z\" />\n  </svg>\n);\n"],"mappings":";;;AAEA,MAAa,SAAsC,UACjD,oBAAC;CACC,OAAM;CACN,SAAQ;CACR,OAAM;CACN,QAAO;CACP,MAAK;CACL,MAAK;CACL,cAAW;CACX,GAAI;WAEJ,oBAAC,UAAK,GAAE,2HAA2H;EAC/H"}
+{"version":3,"file":"XLogo.mjs","names":[],"sources":["../../../../src/components/SocialNetworks/XLogo.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\n\nexport const XLogo: FC<SVGProps<SVGSVGElement>> = (props) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 300 271\"\n    width=\"300\"\n    height=\"271\"\n    fill=\"currentColor\"\n    role=\"img\"\n    aria-label=\"X logo\"\n    {...props}\n  >\n    <path d=\"m236 0h46l-101 115 118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123-113-148h94.9l65.5 86.6zm-16.1 244h25.5l-165-218h-27.4z\" />\n  </svg>\n);\n"],"mappings":"wCAEA,MAAa,EAAsC,GACjD,EAAC,MAAA,CACC,MAAM,6BACN,QAAQ,cACR,MAAM,MACN,OAAO,MACP,KAAK,eACL,KAAK,MACL,aAAW,SACX,GAAI,WAEJ,EAAC,OAAA,CAAK,EAAE,yHAAA,CAA2H,EAC/H"}

package/dist/esm/components/SocialNetworks/YoutubeLogo.mjs

@@ -1,18 +1,2 @@
-import { jsx } from "react/jsx-runtime";
-
-//#region src/components/SocialNetworks/YoutubeLogo.tsx
-const YoutubeLogo = (props) => /* @__PURE__ */ jsx("svg", {
-	fill: "currentColor",
-	width: "800px",
-	height: "800px",
-	viewBox: "0 0 32 32",
-	xmlns: "http://www.w3.org/2000/svg",
-	role: "img",
-	"aria-label": "Youtube logo",
-	...props,
-	children: /* @__PURE__ */ jsx("path", { d: "M12.932 20.459v-8.917l7.839 4.459zM30.368 8.735c-0.354-1.301-1.354-2.307-2.625-2.663l-0.027-0.006c-3.193-0.406-6.886-0.638-10.634-0.638-0.381 0-0.761 0.002-1.14 0.007l0.058-0.001c-0.322-0.004-0.701-0.007-1.082-0.007-3.748 0-7.443 0.232-11.070 0.681l0.434-0.044c-1.297 0.363-2.297 1.368-2.644 2.643l-0.006 0.026c-0.4 2.109-0.628 4.536-0.628 7.016 0 0.088 0 0.176 0.001 0.263l-0-0.014c-0 0.074-0.001 0.162-0.001 0.25 0 2.48 0.229 4.906 0.666 7.259l-0.038-0.244c0.354 1.301 1.354 2.307 2.625 2.663l0.027 0.006c3.193 0.406 6.886 0.638 10.634 0.638 0.38 0 0.76-0.002 1.14-0.007l-0.058 0.001c0.322 0.004 0.702 0.007 1.082 0.007 3.749 0 7.443-0.232 11.070-0.681l-0.434 0.044c1.298-0.362 2.298-1.368 2.646-2.643l0.006-0.026c0.399-2.109 0.627-4.536 0.627-7.015 0-0.088-0-0.176-0.001-0.263l0 0.013c0-0.074 0.001-0.162 0.001-0.25 0-2.48-0.229-4.906-0.666-7.259l0.038 0.244z" })
-});
-
-//#endregion
-export { YoutubeLogo };
+import{jsx as e}from"react/jsx-runtime";const t=t=>e(`svg`,{fill:`currentColor`,width:`800px`,height:`800px`,viewBox:`0 0 32 32`,xmlns:`http://www.w3.org/2000/svg`,role:`img`,"aria-label":`Youtube logo`,...t,children:e(`path`,{d:`M12.932 20.459v-8.917l7.839 4.459zM30.368 8.735c-0.354-1.301-1.354-2.307-2.625-2.663l-0.027-0.006c-3.193-0.406-6.886-0.638-10.634-0.638-0.381 0-0.761 0.002-1.14 0.007l0.058-0.001c-0.322-0.004-0.701-0.007-1.082-0.007-3.748 0-7.443 0.232-11.070 0.681l0.434-0.044c-1.297 0.363-2.297 1.368-2.644 2.643l-0.006 0.026c-0.4 2.109-0.628 4.536-0.628 7.016 0 0.088 0 0.176 0.001 0.263l-0-0.014c-0 0.074-0.001 0.162-0.001 0.25 0 2.48 0.229 4.906 0.666 7.259l-0.038-0.244c0.354 1.301 1.354 2.307 2.625 2.663l0.027 0.006c3.193 0.406 6.886 0.638 10.634 0.638 0.38 0 0.76-0.002 1.14-0.007l-0.058 0.001c0.322 0.004 0.702 0.007 1.082 0.007 3.749 0 7.443-0.232 11.070-0.681l-0.434 0.044c1.298-0.362 2.298-1.368 2.646-2.643l0.006-0.026c0.399-2.109 0.627-4.536 0.627-7.015 0-0.088-0-0.176-0.001-0.263l0 0.013c0-0.074 0.001-0.162 0.001-0.25 0-2.48-0.229-4.906-0.666-7.259l0.038 0.244z`})});export{t as YoutubeLogo};
 //# sourceMappingURL=YoutubeLogo.mjs.map

package/dist/esm/components/SocialNetworks/YoutubeLogo.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YoutubeLogo.mjs","names":[],"sources":["../../../../src/components/SocialNetworks/YoutubeLogo.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\n\nexport const YoutubeLogo: FC<SVGProps<SVGSVGElement>> = (props) => (\n  <svg\n    fill=\"currentColor\"\n    width=\"800px\"\n    height=\"800px\"\n    viewBox=\"0 0 32 32\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    role=\"img\"\n    aria-label=\"Youtube logo\"\n    {...props}\n  >\n    <path d=\"M12.932 20.459v-8.917l7.839 4.459zM30.368 8.735c-0.354-1.301-1.354-2.307-2.625-2.663l-0.027-0.006c-3.193-0.406-6.886-0.638-10.634-0.638-0.381 0-0.761 0.002-1.14 0.007l0.058-0.001c-0.322-0.004-0.701-0.007-1.082-0.007-3.748 0-7.443 0.232-11.070 0.681l0.434-0.044c-1.297 0.363-2.297 1.368-2.644 2.643l-0.006 0.026c-0.4 2.109-0.628 4.536-0.628 7.016 0 0.088 0 0.176 0.001 0.263l-0-0.014c-0 0.074-0.001 0.162-0.001 0.25 0 2.48 0.229 4.906 0.666 7.259l-0.038-0.244c0.354 1.301 1.354 2.307 2.625 2.663l0.027 0.006c3.193 0.406 6.886 0.638 10.634 0.638 0.38 0 0.76-0.002 1.14-0.007l-0.058 0.001c0.322 0.004 0.702 0.007 1.082 0.007 3.749 0 7.443-0.232 11.070-0.681l-0.434 0.044c1.298-0.362 2.298-1.368 2.646-2.643l0.006-0.026c0.399-2.109 0.627-4.536 0.627-7.015 0-0.088-0-0.176-0.001-0.263l0 0.013c0-0.074 0.001-0.162 0.001-0.25 0-2.48-0.229-4.906-0.666-7.259l0.038 0.244z\"></path>\n  </svg>\n);\n"],"mappings":";;;AAEA,MAAa,eAA4C,UACvD,oBAAC;CACC,MAAK;CACL,OAAM;CACN,QAAO;CACP,SAAQ;CACR,OAAM;CACN,MAAK;CACL,cAAW;CACX,GAAI;WAEJ,oBAAC,UAAK,GAAE,m2BAAw2B;EAC52B"}
+{"version":3,"file":"YoutubeLogo.mjs","names":[],"sources":["../../../../src/components/SocialNetworks/YoutubeLogo.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\n\nexport const YoutubeLogo: FC<SVGProps<SVGSVGElement>> = (props) => (\n  <svg\n    fill=\"currentColor\"\n    width=\"800px\"\n    height=\"800px\"\n    viewBox=\"0 0 32 32\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    role=\"img\"\n    aria-label=\"Youtube logo\"\n    {...props}\n  >\n    <path d=\"M12.932 20.459v-8.917l7.839 4.459zM30.368 8.735c-0.354-1.301-1.354-2.307-2.625-2.663l-0.027-0.006c-3.193-0.406-6.886-0.638-10.634-0.638-0.381 0-0.761 0.002-1.14 0.007l0.058-0.001c-0.322-0.004-0.701-0.007-1.082-0.007-3.748 0-7.443 0.232-11.070 0.681l0.434-0.044c-1.297 0.363-2.297 1.368-2.644 2.643l-0.006 0.026c-0.4 2.109-0.628 4.536-0.628 7.016 0 0.088 0 0.176 0.001 0.263l-0-0.014c-0 0.074-0.001 0.162-0.001 0.25 0 2.48 0.229 4.906 0.666 7.259l-0.038-0.244c0.354 1.301 1.354 2.307 2.625 2.663l0.027 0.006c3.193 0.406 6.886 0.638 10.634 0.638 0.38 0 0.76-0.002 1.14-0.007l-0.058 0.001c0.322 0.004 0.702 0.007 1.082 0.007 3.749 0 7.443-0.232 11.070-0.681l-0.434 0.044c1.298-0.362 2.298-1.368 2.646-2.643l0.006-0.026c0.399-2.109 0.627-4.536 0.627-7.015 0-0.088-0-0.176-0.001-0.263l0 0.013c0-0.074 0.001-0.162 0.001-0.25 0-2.48-0.229-4.906-0.666-7.259l0.038 0.244z\"></path>\n  </svg>\n);\n"],"mappings":"wCAEA,MAAa,EAA4C,GACvD,EAAC,MAAA,CACC,KAAK,eACL,MAAM,QACN,OAAO,QACP,QAAQ,YACR,MAAM,6BACN,KAAK,MACL,aAAW,eACX,GAAI,WAEJ,EAAC,OAAA,CAAK,EAAE,i2BAAA,CAAw2B,EAC52B"}

package/dist/esm/components/SocialNetworks/index.mjs

@@ -1,65 +1,2 @@
-import { DiscordLogo } from "./DiscordLogo.mjs";
-import { InstagramLogo } from "./InstagramLogo.mjs";
-import { LinkedInLogo } from "./LinkedInLogo.mjs";
-import { ProductHuntLogo } from "./ProductHuntLogo.mjs";
-import { TiktokLogo } from "./TiktokLogo.mjs";
-import { XLogo } from "./XLogo.mjs";
-import { YoutubeLogo } from "./YoutubeLogo.mjs";
-import { FacebookLogo } from "./FacebookLogo.mjs";
-import { createElement } from "react";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/components/SocialNetworks/index.tsx
-const socialNetworks = [
-	{
-		href: "https://discord.gg/7uxamYVeCk",
-		component: /* @__PURE__ */ jsx(DiscordLogo, { className: "h-auto max-h-full max-w-full" }),
-		label: "Discord"
-	},
-	{
-		href: "https://www.producthunt.com/posts/intlayer?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-intlayer",
-		component: /* @__PURE__ */ jsx(ProductHuntLogo, { className: "h-auto max-h-full max-w-full" }),
-		label: "Product Hunt"
-	},
-	{
-		href: "https://x.com/Intlayer183096",
-		component: /* @__PURE__ */ jsx(XLogo, { className: "h-auto max-h-full max-w-full" }),
-		label: "X"
-	},
-	{
-		href: "https://www.youtube.com/@intlayer",
-		component: /* @__PURE__ */ jsx(YoutubeLogo, { className: "h-auto max-h-full max-w-full" }),
-		label: "YouTube"
-	},
-	{
-		href: "https://www.linkedin.com/company/intlayerorg",
-		component: /* @__PURE__ */ jsx(LinkedInLogo, { className: "h-auto max-h-full max-w-full" }),
-		label: "LinkedIn"
-	},
-	{
-		href: "https://www.tiktok.com/@intlayer",
-		component: /* @__PURE__ */ jsx(TiktokLogo, { className: "h-auto max-h-full max-w-full" }),
-		label: "TikTok"
-	},
-	{
-		href: "https://www.instagram.com/intlayer/",
-		component: /* @__PURE__ */ jsx(InstagramLogo, { className: "h-auto max-h-full max-w-full" }),
-		label: "Instagram"
-	}
-];
-const DefaultRenderItem = ({ href, component, label, ...iconProps }) => /* @__PURE__ */ jsx("a", {
-	href,
-	"aria-label": label,
-	className: "max-h-4 max-w-4 shrink-0",
-	...iconProps,
-	children: component
-}, href);
-const SocialNetworks = ({ renderItem, ...iconProps }) => socialNetworks.map(renderItem ?? ((props) => /* @__PURE__ */ createElement(DefaultRenderItem, {
-	...props,
-	...iconProps,
-	key: props.label
-})));
-
-//#endregion
-export { DiscordLogo, FacebookLogo, InstagramLogo, LinkedInLogo, ProductHuntLogo, SocialNetworks, TiktokLogo, XLogo, YoutubeLogo };
+import{DiscordLogo as e}from"./DiscordLogo.mjs";import{InstagramLogo as t}from"./InstagramLogo.mjs";import{LinkedInLogo as n}from"./LinkedInLogo.mjs";import{ProductHuntLogo as r}from"./ProductHuntLogo.mjs";import{TiktokLogo as i}from"./TiktokLogo.mjs";import{XLogo as a}from"./XLogo.mjs";import{YoutubeLogo as o}from"./YoutubeLogo.mjs";import{FacebookLogo as s}from"./FacebookLogo.mjs";import{createElement as c}from"react";import{jsx as l}from"react/jsx-runtime";const u=[{href:`https://discord.gg/7uxamYVeCk`,component:l(e,{className:`h-auto max-h-full max-w-full`}),label:`Discord`},{href:`https://www.producthunt.com/posts/intlayer?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-intlayer`,component:l(r,{className:`h-auto max-h-full max-w-full`}),label:`Product Hunt`},{href:`https://x.com/Intlayer183096`,component:l(a,{className:`h-auto max-h-full max-w-full`}),label:`X`},{href:`https://www.youtube.com/@intlayer`,component:l(o,{className:`h-auto max-h-full max-w-full`}),label:`YouTube`},{href:`https://www.linkedin.com/company/intlayerorg`,component:l(n,{className:`h-auto max-h-full max-w-full`}),label:`LinkedIn`},{href:`https://www.tiktok.com/@intlayer`,component:l(i,{className:`h-auto max-h-full max-w-full`}),label:`TikTok`},{href:`https://www.instagram.com/intlayer/`,component:l(t,{className:`h-auto max-h-full max-w-full`}),label:`Instagram`}],d=({href:e,component:t,label:n,...r})=>l(`a`,{href:e,"aria-label":n,className:`max-h-4 max-w-4 shrink-0`,...r,children:t},e),f=({renderItem:e,...t})=>u.map(e??(e=>c(d,{...e,...t,key:e.label})));export{e as DiscordLogo,s as FacebookLogo,t as InstagramLogo,n as LinkedInLogo,r as ProductHuntLogo,f as SocialNetworks,i as TiktokLogo,a as XLogo,o as YoutubeLogo};
 //# sourceMappingURL=index.mjs.map

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

@@ -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 { FacebookLogo } from './FacebookLogo';\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 './DiscordLogo';\nexport * from './FacebookLogo';\nexport * from './InstagramLogo';\nexport * from './LinkedInLogo';\nexport * from './ProductHuntLogo';\nexport * from './TiktokLogo';\nexport * from './XLogo';\nexport * from './YoutubeLogo';\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,iBAAiB;CACrB;EACE,MAAM;EACN,WAAW,oBAAC,eAAY,WAAU,iCAAiC;EACnE,OAAO;EACR;CACD;EACE,MAAM;EACN,WAAW,oBAAC,mBAAgB,WAAU,iCAAiC;EACvE,OAAO;EACR;CACD;EACE,MAAM;EACN,WAAW,oBAAC,SAAM,WAAU,iCAAiC;EAC7D,OAAO;EACR;CACD;EACE,MAAM;EACN,WAAW,oBAAC,eAAY,WAAU,iCAAiC;EACnE,OAAO;EACR;CACD;EACE,MAAM;EACN,WAAW,oBAAC,gBAAa,WAAU,iCAAiC;EACpE,OAAO;EACR;CACD;EACE,MAAM;EACN,WAAW,oBAAC,cAAW,WAAU,iCAAiC;EAClE,OAAO;EACR;CACD;EACE,MAAM;EACN,WAAW,oBAAC,iBAAc,WAAU,iCAAiC;EACrE,OAAO;EACR;CAMF;AAiBD,MAAM,qBAAiD,EACrD,MACA,WACA,OACA,GAAG,gBAEH,oBAAC;CAEO;CACN,cAAY;CACZ,WAAU;CACV,GAAI;WAEH;GANI,KAOH;AAGN,MAAa,kBAAkB,EAC7B,YACA,GAAG,gBAEH,eAAe,IACb,gBACI,UACA,8BAAC;CAAkB,GAAI;CAAO,GAAI;CAAW,KAAK,MAAM;EAAS,EAEtE"}
+{"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 { FacebookLogo } from './FacebookLogo';\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 './DiscordLogo';\nexport * from './FacebookLogo';\nexport * from './InstagramLogo';\nexport * from './LinkedInLogo';\nexport * from './ProductHuntLogo';\nexport * from './TiktokLogo';\nexport * from './XLogo';\nexport * from './YoutubeLogo';\n"],"mappings":"gdAeA,MAAM,EAAiB,CACrB,CACE,KAAM,gCACN,UAAW,EAAC,EAAA,CAAY,UAAU,+BAAA,CAAiC,CACnE,MAAO,UACR,CACD,CACE,KAAM,4HACN,UAAW,EAAC,EAAA,CAAgB,UAAU,+BAAA,CAAiC,CACvE,MAAO,eACR,CACD,CACE,KAAM,+BACN,UAAW,EAAC,EAAA,CAAM,UAAU,+BAAA,CAAiC,CAC7D,MAAO,IACR,CACD,CACE,KAAM,oCACN,UAAW,EAAC,EAAA,CAAY,UAAU,+BAAA,CAAiC,CACnE,MAAO,UACR,CACD,CACE,KAAM,+CACN,UAAW,EAAC,EAAA,CAAa,UAAU,+BAAA,CAAiC,CACpE,MAAO,WACR,CACD,CACE,KAAM,mCACN,UAAW,EAAC,EAAA,CAAW,UAAU,+BAAA,CAAiC,CAClE,MAAO,SACR,CACD,CACE,KAAM,sCACN,UAAW,EAAC,EAAA,CAAc,UAAU,+BAAA,CAAiC,CACrE,MAAO,YACR,CAMF,CAiBK,GAAiD,CACrD,OACA,YACA,QACA,GAAG,KAEH,EAAC,IAAA,CAEO,OACN,aAAY,EACZ,UAAU,2BACV,GAAI,WAEH,GANI,EAOH,CAGO,GAAkB,CAC7B,aACA,GAAG,KAEH,EAAe,IACb,IACI,GACA,EAAC,EAAA,CAAkB,GAAI,EAAO,GAAI,EAAW,IAAK,EAAM,OAAS,EAEtE"}

package/dist/esm/components/SwitchSelector/index.mjs

@@ -1,146 +1,2 @@
-'use client';
-
-import { cn } from "../../utils/cn.mjs";
-import { useItemSelector } from "../../hooks/useItemSelector.mjs";
-import { createElement, useEffect, useRef, useState } from "react";
-import { cva } from "class-variance-authority";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/components/SwitchSelector/index.tsx
-const defaultChoices = [{
-	content: "Off",
-	value: false
-}, {
-	content: "On",
-	value: true
-}];
-let SwitchSelectorColor = /* @__PURE__ */ function(SwitchSelectorColor) {
-	SwitchSelectorColor["PRIMARY"] = "primary";
-	SwitchSelectorColor["SECONDARY"] = "secondary";
-	SwitchSelectorColor["DESTRUCTIVE"] = "destructive";
-	SwitchSelectorColor["NEUTRAL"] = "neutral";
-	SwitchSelectorColor["LIGHT"] = "light";
-	SwitchSelectorColor["DARK"] = "dark";
-	SwitchSelectorColor["TEXT"] = "text";
-	return SwitchSelectorColor;
-}({});
-const switchSelectorVariant = cva("flex w-fit cursor-pointer flex-row gap-2 rounded-full border-[1.3px] p-[1.5px]", {
-	variants: {
-		color: {
-			[`${SwitchSelectorColor.PRIMARY}`]: "border-primary text-primary",
-			[`${SwitchSelectorColor.SECONDARY}`]: "border-secondary text-secondary",
-			[`${SwitchSelectorColor.DESTRUCTIVE}`]: "border-destructive bg-destructive text-destructive",
-			[`${SwitchSelectorColor.NEUTRAL}`]: "border-neutral text-neutral",
-			[`${SwitchSelectorColor.LIGHT}`]: "border-white text-white",
-			[`${SwitchSelectorColor.DARK}`]: "border-neutral-800 text-neutral-800",
-			[`${SwitchSelectorColor.TEXT}`]: "border-text text-text"
-		},
-		disabled: {
-			true: "cursor-not-allowed opacity-50",
-			false: ""
-		}
-	},
-	defaultVariants: {
-		color: `${SwitchSelectorColor.PRIMARY}`,
-		disabled: false
-	}
-});
-let SwitchSelectorSize = /* @__PURE__ */ function(SwitchSelectorSize) {
-	SwitchSelectorSize["SM"] = "sm";
-	SwitchSelectorSize["MD"] = "md";
-	SwitchSelectorSize["LG"] = "lg";
-	return SwitchSelectorSize;
-}({});
-const choiceVariant = cva("z-1 w-full 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", {
-	variants: { size: {
-		[`${SwitchSelectorSize.SM}`]: "px-2 py-1 text-xs",
-		[`${SwitchSelectorSize.MD}`]: "p-2 text-sm",
-		[`${SwitchSelectorSize.LG}`]: "p-4 text-base"
-	} },
-	defaultVariants: { size: `${SwitchSelectorSize.MD}` }
-});
-const indicatorVariant = cva("absolute top-0 z-0 h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none", { variants: { color: {
-	[`${SwitchSelectorColor.PRIMARY}`]: "bg-primary data-[indicator=true]:text-text",
-	[`${SwitchSelectorColor.SECONDARY}`]: "bg-secondary data-[indicator=true]:text-text",
-	[`${SwitchSelectorColor.DESTRUCTIVE}`]: "bg-destructive data-[indicator=true]:text-text",
-	[`${SwitchSelectorColor.NEUTRAL}`]: "bg-neutral data-[indicator=true]:text-white",
-	[`${SwitchSelectorColor.LIGHT}`]: "bg-white data-[indicator=true]:text-black",
-	[`${SwitchSelectorColor.DARK}`]: "bg-neutral-800 data-[indicator=true]:text-white",
-	[`${SwitchSelectorColor.TEXT}`]: "bg-text data-[indicator=true]:text-text-opposite"
-} } });
-/**
-*
-* Component that allows the user to select one of the provided choices.
-*
-* Example:
-* ```jsx
-* <SwitchSelector
-*   choices={[
-*     { content: 'Option 1', value: 'option1' },
-*     { content: 'Option 2', value: 'option2' },
-*     { content: 'Option 3', value: 'option3' },
-*   ]}
-*   value="option1"
-*   onChange={(choice) => console.log(choice)}
-* />
-* ```
-*/
-const SwitchSelector = ({ choices = defaultChoices, value, defaultValue, onChange, color = SwitchSelectorColor.PRIMARY, size = SwitchSelectorSize.MD, className, hoverable = true, disabled = false }) => {
-	const [valueState, setValue] = useState(value ?? defaultValue ?? choices[0].value);
-	const [hoveredIndex, setHoveredIndex] = useState(null);
-	const optionsRefs = useRef([]);
-	const indicatorRef = useRef(null);
-	const { choiceIndicatorPosition } = useItemSelector(optionsRefs, { isHoverable: hoverable });
-	const selectedIndex = choices.findIndex((choice) => choice.value === valueState);
-	const indicatorIndex = hoverable && hoveredIndex !== null ? hoveredIndex : selectedIndex;
-	const handleChange = (newValue) => {
-		setValue(newValue);
-		onChange?.(newValue);
-	};
-	useEffect(() => {
-		if (value === void 0) return;
-		setValue(value);
-	}, [value]);
-	return /* @__PURE__ */ jsx("div", {
-		className: switchSelectorVariant({
-			color,
-			disabled,
-			className
-		}),
-		role: "tablist",
-		"aria-disabled": disabled ? "true" : void 0,
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "relative flex size-full flex-row items-center justify-center",
-			children: [choices.map((choice, index) => {
-				const { content, value, ...buttonProps } = choice;
-				const isKeyOfKey = typeof value === "string" || typeof value === "number";
-				const isSelected = index === selectedIndex;
-				const isIndicatorOwner = index === indicatorIndex;
-				return /* @__PURE__ */ createElement("button", {
-					...buttonProps,
-					className: cn(choiceVariant({ size }), disabled && "cursor-not-allowed"),
-					key: isKeyOfKey ? value : index,
-					role: "tab",
-					onClick: () => handleChange(value),
-					"aria-selected": isSelected ? "true" : void 0,
-					"data-indicator": isIndicatorOwner ? "true" : void 0,
-					disabled: disabled || isSelected,
-					tabIndex: isSelected ? 0 : -1,
-					ref: (el) => {
-						optionsRefs.current[index] = el;
-					},
-					onMouseEnter: () => !disabled && setHoveredIndex(index),
-					onMouseLeave: () => !disabled && setHoveredIndex(null)
-				}, content);
-			}), choiceIndicatorPosition && /* @__PURE__ */ jsx("div", {
-				className: cn(indicatorVariant({ color })),
-				style: choiceIndicatorPosition,
-				ref: indicatorRef
-			})]
-		})
-	});
-};
-
-//#endregion
-export { SwitchSelector, SwitchSelectorColor, SwitchSelectorSize };
+"use client";import{cn as e}from"../../utils/cn.mjs";import{useItemSelector as t}from"../../hooks/useItemSelector.mjs";import{createElement as n,useEffect as r,useRef as i,useState as a}from"react";import{cva as o}from"class-variance-authority";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l=[{content:`Off`,value:!1},{content:`On`,value:!0}];let u=function(e){return e.PRIMARY=`primary`,e.SECONDARY=`secondary`,e.DESTRUCTIVE=`destructive`,e.NEUTRAL=`neutral`,e.LIGHT=`light`,e.DARK=`dark`,e.TEXT=`text`,e}({});const d=o(`flex w-fit cursor-pointer flex-row gap-2 rounded-full border-[1.3px] p-[1.5px]`,{variants:{color:{[`${u.PRIMARY}`]:`border-primary text-primary`,[`${u.SECONDARY}`]:`border-secondary text-secondary`,[`${u.DESTRUCTIVE}`]:`border-destructive bg-destructive text-destructive`,[`${u.NEUTRAL}`]:`border-neutral text-neutral`,[`${u.LIGHT}`]:`border-white text-white`,[`${u.DARK}`]:`border-neutral-800 text-neutral-800`,[`${u.TEXT}`]:`border-text text-text`},disabled:{true:`cursor-not-allowed opacity-50`,false:``}},defaultVariants:{color:`${u.PRIMARY}`,disabled:!1}});let f=function(e){return e.SM=`sm`,e.MD=`md`,e.LG=`lg`,e}({});const p=o(`z-1 w-full 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`,{variants:{size:{[`${f.SM}`]:`px-2 py-1 text-xs`,[`${f.MD}`]:`p-2 text-sm`,[`${f.LG}`]:`p-4 text-base`}},defaultVariants:{size:`${f.MD}`}}),m=o(`absolute top-0 z-0 h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none`,{variants:{color:{[`${u.PRIMARY}`]:`bg-primary data-[indicator=true]:text-text`,[`${u.SECONDARY}`]:`bg-secondary data-[indicator=true]:text-text`,[`${u.DESTRUCTIVE}`]:`bg-destructive data-[indicator=true]:text-text`,[`${u.NEUTRAL}`]:`bg-neutral data-[indicator=true]:text-white`,[`${u.LIGHT}`]:`bg-white data-[indicator=true]:text-black`,[`${u.DARK}`]:`bg-neutral-800 data-[indicator=true]:text-white`,[`${u.TEXT}`]:`bg-text data-[indicator=true]:text-text-opposite`}}}),h=({choices:o=l,value:h,defaultValue:g,onChange:_,color:v=u.PRIMARY,size:y=f.MD,className:b,hoverable:x=!0,disabled:S=!1})=>{let[C,w]=a(h??g??o[0].value),[T,E]=a(null),D=i([]),O=i(null),{choiceIndicatorPosition:k}=t(D,{isHoverable:x}),A=o.findIndex(e=>e.value===C),j=x&&T!==null?T:A,M=e=>{w(e),_?.(e)};return r(()=>{h!==void 0&&w(h)},[h]),s(`div`,{className:d({color:v,disabled:S,className:b}),role:`tablist`,"aria-disabled":S?`true`:void 0,children:c(`div`,{className:`relative flex size-full flex-row items-center justify-center`,children:[o.map((t,r)=>{let{content:i,value:a,...o}=t,s=typeof a==`string`||typeof a==`number`,c=r===A,l=r===j;return n(`button`,{...o,className:e(p({size:y}),S&&`cursor-not-allowed`),key:s?a:r,role:`tab`,onClick:()=>M(a),"aria-selected":c?`true`:void 0,"data-indicator":l?`true`:void 0,disabled:S||c,tabIndex:c?0:-1,ref:e=>{D.current[r]=e},onMouseEnter:()=>!S&&E(r),onMouseLeave:()=>!S&&E(null)},i)}),k&&s(`div`,{className:e(m({color:v})),style:k,ref:O})]})})};export{h as SwitchSelector,u as SwitchSelectorColor,f as SwitchSelectorSize};
 //# sourceMappingURL=index.mjs.map

package/dist/esm/components/SwitchSelector/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/SwitchSelector/index.tsx"],"sourcesContent":["'use client';\n\nimport { useItemSelector } from '@hooks/useItemSelector';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  type HTMLAttributes,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nexport type SwitchSelectorChoice<T = boolean> = {\n  content: ReactNode;\n  value: T;\n} & HTMLAttributes<HTMLButtonElement>;\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nconst defaultChoices: SwitchSelectorChoices<boolean> = [\n  { content: 'Off', value: false },\n  { content: 'On', value: true },\n];\n\nexport type SwitchSelectorProps<T = boolean> = {\n  choices?: SwitchSelectorChoices<T>;\n  value?: T;\n  defaultValue?: T;\n  onChange?: (choice: T) => void;\n  className?: string;\n  hoverable?: boolean;\n  disabled?: boolean;\n} & VariantProps<typeof switchSelectorVariant> &\n  VariantProps<typeof choiceVariant>;\n\nexport enum SwitchSelectorColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  DARK = 'dark',\n  TEXT = 'text',\n}\n\nconst switchSelectorVariant = cva(\n  'flex w-fit cursor-pointer flex-row gap-2 rounded-full border-[1.3px] p-[1.5px]',\n  {\n    variants: {\n      color: {\n        [`${SwitchSelectorColor.PRIMARY}`]: 'border-primary text-primary',\n        [`${SwitchSelectorColor.SECONDARY}`]: 'border-secondary text-secondary',\n        [`${SwitchSelectorColor.DESTRUCTIVE}`]:\n          'border-destructive bg-destructive text-destructive',\n        [`${SwitchSelectorColor.NEUTRAL}`]: 'border-neutral text-neutral',\n        [`${SwitchSelectorColor.LIGHT}`]: 'border-white text-white',\n        [`${SwitchSelectorColor.DARK}`]: 'border-neutral-800 text-neutral-800',\n        [`${SwitchSelectorColor.TEXT}`]: 'border-text text-text',\n      },\n      disabled: {\n        true: 'cursor-not-allowed opacity-50',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      color: `${SwitchSelectorColor.PRIMARY}`,\n      disabled: false,\n    },\n  }\n);\n\nexport enum SwitchSelectorSize {\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n}\n\nconst choiceVariant = cva(\n  'z-1 w-full 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        [`${SwitchSelectorSize.SM}`]: 'px-2 py-1 text-xs',\n        [`${SwitchSelectorSize.MD}`]: 'p-2 text-sm',\n        [`${SwitchSelectorSize.LG}`]: 'p-4 text-base',\n      },\n    },\n    defaultVariants: {\n      size: `${SwitchSelectorSize.MD}`,\n    },\n  }\n);\n\nconst indicatorVariant = cva(\n  'absolute top-0 z-0 h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n  {\n    variants: {\n      color: {\n        [`${SwitchSelectorColor.PRIMARY}`]:\n          'bg-primary data-[indicator=true]:text-text',\n        [`${SwitchSelectorColor.SECONDARY}`]:\n          'bg-secondary data-[indicator=true]:text-text',\n        [`${SwitchSelectorColor.DESTRUCTIVE}`]:\n          'bg-destructive data-[indicator=true]:text-text',\n        [`${SwitchSelectorColor.NEUTRAL}`]:\n          'bg-neutral data-[indicator=true]:text-white',\n        [`${SwitchSelectorColor.LIGHT}`]:\n          'bg-white data-[indicator=true]:text-black',\n        [`${SwitchSelectorColor.DARK}`]:\n          'bg-neutral-800 data-[indicator=true]:text-white',\n        [`${SwitchSelectorColor.TEXT}`]:\n          'bg-text data-[indicator=true]:text-text-opposite',\n      },\n    },\n  }\n);\n\n/**\n *\n * Component that allows the user to select one of the provided choices.\n *\n * Example:\n * ```jsx\n * <SwitchSelector\n *   choices={[\n *     { content: 'Option 1', value: 'option1' },\n *     { content: 'Option 2', value: 'option2' },\n *     { content: 'Option 3', value: 'option3' },\n *   ]}\n *   value=\"option1\"\n *   onChange={(choice) => console.log(choice)}\n * />\n * ```\n */\nexport const SwitchSelector = <T,>({\n  choices = defaultChoices as SwitchSelectorChoices<T>,\n  value,\n  defaultValue,\n  onChange,\n  color = SwitchSelectorColor.PRIMARY,\n  size = SwitchSelectorSize.MD,\n  className,\n  hoverable = true,\n  disabled = false,\n}: SwitchSelectorProps<T>) => {\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    isHoverable: hoverable,\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    <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              className={cn(\n                choiceVariant({\n                  size,\n                }),\n                disabled && 'cursor-not-allowed'\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              indicatorVariant({\n                color,\n              })\n            )}\n            style={choiceIndicatorPosition}\n            ref={indicatorRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/SwitchSelector/index.tsx"],"sourcesContent":["'use client';\n\nimport { useItemSelector } from '@hooks/useItemSelector';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  type HTMLAttributes,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nexport type SwitchSelectorChoice<T = boolean> = {\n  content: ReactNode;\n  value: T;\n} & HTMLAttributes<HTMLButtonElement>;\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nconst defaultChoices: SwitchSelectorChoices<boolean> = [\n  { content: 'Off', value: false },\n  { content: 'On', value: true },\n];\n\nexport type SwitchSelectorProps<T = boolean> = {\n  choices?: SwitchSelectorChoices<T>;\n  value?: T;\n  defaultValue?: T;\n  onChange?: (choice: T) => void;\n  className?: string;\n  hoverable?: boolean;\n  disabled?: boolean;\n} & VariantProps<typeof switchSelectorVariant> &\n  VariantProps<typeof choiceVariant>;\n\nexport enum SwitchSelectorColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  DARK = 'dark',\n  TEXT = 'text',\n}\n\nconst switchSelectorVariant = cva(\n  'flex w-fit cursor-pointer flex-row gap-2 rounded-full border-[1.3px] p-[1.5px]',\n  {\n    variants: {\n      color: {\n        [`${SwitchSelectorColor.PRIMARY}`]: 'border-primary text-primary',\n        [`${SwitchSelectorColor.SECONDARY}`]: 'border-secondary text-secondary',\n        [`${SwitchSelectorColor.DESTRUCTIVE}`]:\n          'border-destructive bg-destructive text-destructive',\n        [`${SwitchSelectorColor.NEUTRAL}`]: 'border-neutral text-neutral',\n        [`${SwitchSelectorColor.LIGHT}`]: 'border-white text-white',\n        [`${SwitchSelectorColor.DARK}`]: 'border-neutral-800 text-neutral-800',\n        [`${SwitchSelectorColor.TEXT}`]: 'border-text text-text',\n      },\n      disabled: {\n        true: 'cursor-not-allowed opacity-50',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      color: `${SwitchSelectorColor.PRIMARY}`,\n      disabled: false,\n    },\n  }\n);\n\nexport enum SwitchSelectorSize {\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n}\n\nconst choiceVariant = cva(\n  'z-1 w-full 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        [`${SwitchSelectorSize.SM}`]: 'px-2 py-1 text-xs',\n        [`${SwitchSelectorSize.MD}`]: 'p-2 text-sm',\n        [`${SwitchSelectorSize.LG}`]: 'p-4 text-base',\n      },\n    },\n    defaultVariants: {\n      size: `${SwitchSelectorSize.MD}`,\n    },\n  }\n);\n\nconst indicatorVariant = cva(\n  'absolute top-0 z-0 h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n  {\n    variants: {\n      color: {\n        [`${SwitchSelectorColor.PRIMARY}`]:\n          'bg-primary data-[indicator=true]:text-text',\n        [`${SwitchSelectorColor.SECONDARY}`]:\n          'bg-secondary data-[indicator=true]:text-text',\n        [`${SwitchSelectorColor.DESTRUCTIVE}`]:\n          'bg-destructive data-[indicator=true]:text-text',\n        [`${SwitchSelectorColor.NEUTRAL}`]:\n          'bg-neutral data-[indicator=true]:text-white',\n        [`${SwitchSelectorColor.LIGHT}`]:\n          'bg-white data-[indicator=true]:text-black',\n        [`${SwitchSelectorColor.DARK}`]:\n          'bg-neutral-800 data-[indicator=true]:text-white',\n        [`${SwitchSelectorColor.TEXT}`]:\n          'bg-text data-[indicator=true]:text-text-opposite',\n      },\n    },\n  }\n);\n\n/**\n *\n * Component that allows the user to select one of the provided choices.\n *\n * Example:\n * ```jsx\n * <SwitchSelector\n *   choices={[\n *     { content: 'Option 1', value: 'option1' },\n *     { content: 'Option 2', value: 'option2' },\n *     { content: 'Option 3', value: 'option3' },\n *   ]}\n *   value=\"option1\"\n *   onChange={(choice) => console.log(choice)}\n * />\n * ```\n */\nexport const SwitchSelector = <T,>({\n  choices = defaultChoices as SwitchSelectorChoices<T>,\n  value,\n  defaultValue,\n  onChange,\n  color = SwitchSelectorColor.PRIMARY,\n  size = SwitchSelectorSize.MD,\n  className,\n  hoverable = true,\n  disabled = false,\n}: SwitchSelectorProps<T>) => {\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    isHoverable: hoverable,\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    <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              className={cn(\n                choiceVariant({\n                  size,\n                }),\n                disabled && 'cursor-not-allowed'\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              indicatorVariant({\n                color,\n              })\n            )}\n            style={choiceIndicatorPosition}\n            ref={indicatorRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Tab.mjs","names":[],"sources":["../../../../src/components/Tab/Tab.tsx"],"sourcesContent":["'use client';\n\nimport { useHorizontalSwipe } from '@hooks/useHorizontalSwipe';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  Children,\n  createContext,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n  useState,\n} from 'react';\nimport { TabSelector, TabSelectorColor } from '../TabSelector';\nimport { useTabContext } from './TabContext';\n\n// Context for managing tab state\ntype TabContextType = {\n  activeTab: string;\n  setActiveTab: (tab: string) => void;\n};\n\nconst TabContext = createContext<TabContextType | undefined>(undefined);\n\n// Tab container variants\nconst tabContainerVariant = cva('relative w-full rounded-lg', {\n  variants: {\n    background: {\n      with: 'border border-neutral/20 bg-background/2 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur',\n      without: '',\n    },\n    variant: {\n      default: '',\n      bordered: 'border-2',\n      ghost: 'border-0 bg-transparent shadow-none',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\nexport type TabProps = HTMLAttributes<HTMLDivElement> &\n  VariantProps<typeof tabContainerVariant> & {\n    defaultTab?: string;\n    group?: string;\n    children: ReactNode;\n    headerClassName?: string;\n    fullHeight?: boolean;\n  };\n\nexport type TabItemProps = HTMLAttributes<HTMLDivElement> & {\n  label: string;\n  value: string;\n  disabled?: boolean;\n  children: ReactNode;\n};\n\n/**\n * TabItem component that represents a single tab\n * Must be used as a child of the Tab component\n */\nconst TabItem = ({ children, ...props }: TabItemProps) => (\n  // This component is primarily used for its props by the parent Tab component\n  // The actual rendering is handled by the Tab component\n  <div {...props}>{children}</div>\n);\n\n// Add display name for better debugging\nTabItem.displayName = 'TabItem';\n\n/**\n * Tab container component that manages tab state and renders tab headers and content\n *\n * Example:\n * ```jsx\n * <Tab defaultTab=\"tab1\">\n *   <Tab.Item label=\"First Tab\" value=\"tab1\">\n *     Content for first tab\n *   </Tab.Item>\n *   <Tab.Item label=\"Second Tab\" value=\"tab2\">\n *     Content for second tab\n *   </Tab.Item>\n * </Tab>\n * ```\n */\nconst TabComponent = ({\n  defaultTab,\n  group,\n  variant,\n  children,\n  className,\n  headerClassName,\n  fullHeight,\n  ...props\n}: TabProps) => {\n  // Extract TabItem children to get their props\n  const tabItems = Children.toArray(children).filter((child) => {\n    return isValidElement(child) && child.type === TabItem;\n  }) as ReactElement<TabItemProps>[];\n\n  const firstTabValue = tabItems[0]?.props?.value;\n  const { tabsValues, setTabsValues } = useTabContext();\n  const [activeTab, setActiveTab] = useState(defaultTab ?? firstTabValue ?? '');\n  const hasGroup = group && typeof tabsValues === 'object';\n  const currentTabValue =\n    (hasGroup ? tabsValues?.[group] : activeTab) ?? defaultTab ?? firstTabValue;\n  const activeTabIndex = tabItems.findIndex(\n    (tab) => tab.props.value === currentTabValue\n  );\n\n  const tabsCount = tabItems.length;\n\n  const { containerProps, dragDeltaPct, isDragging } = useHorizontalSwipe({\n    itemIndex: activeTabIndex,\n    itemCount: tabsCount,\n    onSwipeLeft: () => {\n      const targetIndex = Math.min(tabsCount - 1, activeTabIndex + 1);\n      const nextValue = tabItems[targetIndex]?.props?.value;\n      if (nextValue) handleSetActiveTab(nextValue);\n    },\n    onSwipeRight: () => {\n      const targetIndex = Math.max(0, activeTabIndex - 1);\n      const nextValue = tabItems[targetIndex]?.props?.value;\n      if (nextValue) handleSetActiveTab(nextValue);\n    },\n  });\n\n  const handleSetActiveTab = (tab: string) => {\n    setActiveTab(tab);\n\n    if (typeof setTabsValues === 'function') {\n      setTabsValues((prev) => ({ ...prev, [group!]: tab }));\n    }\n  };\n\n  const contextValue: TabContextType = {\n    activeTab: activeTab ?? firstTabValue ?? '',\n    setActiveTab: handleSetActiveTab,\n  };\n\n  return (\n    <TabContext.Provider value={contextValue}>\n      <div\n        className={cn(\n          tabContainerVariant({ variant }),\n          fullHeight && 'flex h-full flex-col overflow-hidden',\n          className\n        )}\n        {...props}\n      >\n        {/* Tab Headers */}\n        <div className={cn('flex shrink-0 gap-3 p-3', headerClassName)}>\n          <TabSelector\n            selectedChoice={currentTabValue}\n            tabs={tabItems.map((child) => {\n              const { label, value, disabled } = child.props;\n              const isActive = currentTabValue === value;\n\n              return (\n                <button\n                  key={value}\n                  className={cn(\n                    'cursor-pointer whitespace-nowrap rounded-md px-4 py-1 font-medium text-sm transition-colors focus:outline-none',\n                    !isActive && 'text-neutral/70'\n                  )}\n                  data-active={isActive}\n                  disabled={disabled}\n                  onClick={() => !disabled && handleSetActiveTab(value)}\n                  role=\"tab\"\n                  aria-selected={isActive}\n                  aria-controls={`tabpanel-${value}`}\n                  id={`tab-${value}`}\n                  type=\"button\"\n                >\n                  {label}\n                </button>\n              );\n            })}\n            hoverable\n            color={TabSelectorColor.TEXT}\n          />\n        </div>\n        {/* Tab Content */}\n        {/* Clipper: no overflow; uses clip-path */}\n        <div\n          className={cn(\n            'relative w-full min-w-0 overflow-x-clip [-webkit-clip-path:inset(0)] [clip-path:inset(0)]',\n            fullHeight && 'min-h-0 flex-1'\n          )}\n          {...containerProps}\n        >\n          {/* Track */}\n          <div\n            role=\"tablist\"\n            aria-orientation=\"horizontal\"\n            className={cn(\n              'grid w-full min-w-0',\n              fullHeight && 'h-full',\n              isDragging\n                ? 'transition-none'\n                : 'transition-transform duration-300 ease-in-out'\n            )}\n            style={{\n              gridTemplateColumns: `repeat(${tabItems.length}, 100%)`,\n              transform: `translateX(-${activeTabIndex * 100 - (isDragging ? dragDeltaPct : 0)}%)`,\n            }}\n          >\n            {tabItems.map(({ props }, index) => {\n              const { value, children, className: itemClassName } = props;\n              const isActive = index === activeTabIndex;\n\n              return (\n                <div\n                  key={value}\n                  role=\"tabpanel\"\n                  aria-labelledby={`tab-${value}`}\n                  id={`tabpanel-${value}`}\n                  aria-hidden={!isActive}\n                  tabIndex={isActive ? 0 : -1}\n                  data-active={isActive}\n                  className={cn(\n                    'w-full min-w-0 p-6 opacity-100 transition-opacity duration-300 ease-in-out',\n                    fullHeight && 'h-full overflow-y-auto',\n                    !isActive && 'pointer-events-none opacity-0', // prevent offscreen interaction\n                    itemClassName\n                  )}\n                >\n                  <div\n                    className={cn(\n                      'flex w-full min-w-0 flex-col items-stretch gap-6',\n                      fullHeight && 'min-h-full'\n                    )}\n                  >\n                    {children}\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n        </div>\n      </div>\n    </TabContext.Provider>\n  );\n};\n\n// Create the compound component\nexport const Tab = Object.assign(TabComponent, {\n  Item: TabItem,\n});\n"],"mappings":";;;;;;;;;;;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;CAAI,GAAI;CAAQ;EAAe;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,EAAE,GACtB,OAAO;AAChD,OAAI,UAAW,oBAAmB,UAAU;;EAE9C,oBAAoB;GAElB,MAAM,YAAY,SADE,KAAK,IAAI,GAAG,iBAAiB,EAAE,GACV,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;EAAS,OAAO;YAC1B,qBAAC;GACC,WAAW,GACT,oBAAoB,EAAE,SAAS,CAAC,EAChC,cAAc,wCACd,UACD;GACD,GAAI;cAGJ,oBAAC;IAAI,WAAW,GAAG,2BAA2B,gBAAgB;cAC5D,oBAAC;KACC,gBAAgB;KAChB,MAAM,SAAS,KAAK,UAAU;MAC5B,MAAM,EAAE,OAAO,OAAO,aAAa,MAAM;MACzC,MAAM,WAAW,oBAAoB;AAErC,aACE,oBAAC;OAEC,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;SAdI,MAeE;OAEX;KACF;KACA,OAAO,iBAAiB;MACxB;KACE,EAGN,oBAAC;IACC,WAAW,GACT,6FACA,cAAc,iBACf;IACD,GAAI;cAGJ,oBAAC;KACC,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;OAEC,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;QACC,WAAW,GACT,oDACA,cAAc,aACf;QAEA;SACG;SArBD,MAsBD;OAER;MACE;KACF;IACF;GACc;;AAK1B,MAAa,MAAM,OAAO,OAAO,cAAc,EAC7C,MAAM,SACP,CAAC"}
+{"version":3,"file":"Tab.mjs","names":[],"sources":["../../../../src/components/Tab/Tab.tsx"],"sourcesContent":["'use client';\n\nimport { useHorizontalSwipe } from '@hooks/useHorizontalSwipe';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  Children,\n  createContext,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n  useState,\n} from 'react';\nimport { TabSelector, TabSelectorColor } from '../TabSelector';\nimport { useTabContext } from './TabContext';\n\n// Context for managing tab state\ntype TabContextType = {\n  activeTab: string;\n  setActiveTab: (tab: string) => void;\n};\n\nconst TabContext = createContext<TabContextType | undefined>(undefined);\n\n// Tab container variants\nconst tabContainerVariant = cva('relative w-full rounded-lg', {\n  variants: {\n    background: {\n      with: 'border border-neutral/20 bg-background/2 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur',\n      without: '',\n    },\n    variant: {\n      default: '',\n      bordered: 'border-2',\n      ghost: 'border-0 bg-transparent shadow-none',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\nexport type TabProps = HTMLAttributes<HTMLDivElement> &\n  VariantProps<typeof tabContainerVariant> & {\n    defaultTab?: string;\n    group?: string;\n    children: ReactNode;\n    headerClassName?: string;\n    fullHeight?: boolean;\n  };\n\nexport type TabItemProps = HTMLAttributes<HTMLDivElement> & {\n  label: string;\n  value: string;\n  disabled?: boolean;\n  children: ReactNode;\n};\n\n/**\n * TabItem component that represents a single tab\n * Must be used as a child of the Tab component\n */\nconst TabItem = ({ children, ...props }: TabItemProps) => (\n  // This component is primarily used for its props by the parent Tab component\n  // The actual rendering is handled by the Tab component\n  <div {...props}>{children}</div>\n);\n\n// Add display name for better debugging\nTabItem.displayName = 'TabItem';\n\n/**\n * Tab container component that manages tab state and renders tab headers and content\n *\n * Example:\n * ```jsx\n * <Tab defaultTab=\"tab1\">\n *   <Tab.Item label=\"First Tab\" value=\"tab1\">\n *     Content for first tab\n *   </Tab.Item>\n *   <Tab.Item label=\"Second Tab\" value=\"tab2\">\n *     Content for second tab\n *   </Tab.Item>\n * </Tab>\n * ```\n */\nconst TabComponent = ({\n  defaultTab,\n  group,\n  variant,\n  children,\n  className,\n  headerClassName,\n  fullHeight,\n  ...props\n}: TabProps) => {\n  // Extract TabItem children to get their props\n  const tabItems = Children.toArray(children).filter((child) => {\n    return isValidElement(child) && child.type === TabItem;\n  }) as ReactElement<TabItemProps>[];\n\n  const firstTabValue = tabItems[0]?.props?.value;\n  const { tabsValues, setTabsValues } = useTabContext();\n  const [activeTab, setActiveTab] = useState(defaultTab ?? firstTabValue ?? '');\n  const hasGroup = group && typeof tabsValues === 'object';\n  const currentTabValue =\n    (hasGroup ? tabsValues?.[group] : activeTab) ?? defaultTab ?? firstTabValue;\n  const activeTabIndex = tabItems.findIndex(\n    (tab) => tab.props.value === currentTabValue\n  );\n\n  const tabsCount = tabItems.length;\n\n  const { containerProps, dragDeltaPct, isDragging } = useHorizontalSwipe({\n    itemIndex: activeTabIndex,\n    itemCount: tabsCount,\n    onSwipeLeft: () => {\n      const targetIndex = Math.min(tabsCount - 1, activeTabIndex + 1);\n      const nextValue = tabItems[targetIndex]?.props?.value;\n      if (nextValue) handleSetActiveTab(nextValue);\n    },\n    onSwipeRight: () => {\n      const targetIndex = Math.max(0, activeTabIndex - 1);\n      const nextValue = tabItems[targetIndex]?.props?.value;\n      if (nextValue) handleSetActiveTab(nextValue);\n    },\n  });\n\n  const handleSetActiveTab = (tab: string) => {\n    setActiveTab(tab);\n\n    if (typeof setTabsValues === 'function') {\n      setTabsValues((prev) => ({ ...prev, [group!]: tab }));\n    }\n  };\n\n  const contextValue: TabContextType = {\n    activeTab: activeTab ?? firstTabValue ?? '',\n    setActiveTab: handleSetActiveTab,\n  };\n\n  return (\n    <TabContext.Provider value={contextValue}>\n      <div\n        className={cn(\n          tabContainerVariant({ variant }),\n          fullHeight && 'flex h-full flex-col overflow-hidden',\n          className\n        )}\n        {...props}\n      >\n        {/* Tab Headers */}\n        <div className={cn('flex shrink-0 gap-3 p-3', headerClassName)}>\n          <TabSelector\n            selectedChoice={currentTabValue}\n            tabs={tabItems.map((child) => {\n              const { label, value, disabled } = child.props;\n              const isActive = currentTabValue === value;\n\n              return (\n                <button\n                  key={value}\n                  className={cn(\n                    'cursor-pointer whitespace-nowrap rounded-md px-4 py-1 font-medium text-sm transition-colors focus:outline-none',\n                    !isActive && 'text-neutral/70'\n                  )}\n                  data-active={isActive}\n                  disabled={disabled}\n                  onClick={() => !disabled && handleSetActiveTab(value)}\n                  role=\"tab\"\n                  aria-selected={isActive}\n                  aria-controls={`tabpanel-${value}`}\n                  id={`tab-${value}`}\n                  type=\"button\"\n                >\n                  {label}\n                </button>\n              );\n            })}\n            hoverable\n            color={TabSelectorColor.TEXT}\n          />\n        </div>\n        {/* Tab Content */}\n        {/* Clipper: no overflow; uses clip-path */}\n        <div\n          className={cn(\n            'relative w-full min-w-0 overflow-x-clip [-webkit-clip-path:inset(0)] [clip-path:inset(0)]',\n            fullHeight && 'min-h-0 flex-1'\n          )}\n          {...containerProps}\n        >\n          {/* Track */}\n          <div\n            role=\"tablist\"\n            aria-orientation=\"horizontal\"\n            className={cn(\n              'grid w-full min-w-0',\n              fullHeight && 'h-full',\n              isDragging\n                ? 'transition-none'\n                : 'transition-transform duration-300 ease-in-out'\n            )}\n            style={{\n              gridTemplateColumns: `repeat(${tabItems.length}, 100%)`,\n              transform: `translateX(-${activeTabIndex * 100 - (isDragging ? dragDeltaPct : 0)}%)`,\n            }}\n          >\n            {tabItems.map(({ props }, index) => {\n              const { value, children, className: itemClassName } = props;\n              const isActive = index === activeTabIndex;\n\n              return (\n                <div\n                  key={value}\n                  role=\"tabpanel\"\n                  aria-labelledby={`tab-${value}`}\n                  id={`tabpanel-${value}`}\n                  aria-hidden={!isActive}\n                  tabIndex={isActive ? 0 : -1}\n                  data-active={isActive}\n                  className={cn(\n                    'w-full min-w-0 p-6 opacity-100 transition-opacity duration-300 ease-in-out',\n                    fullHeight && 'h-full overflow-y-auto',\n                    !isActive && 'pointer-events-none opacity-0', // prevent offscreen interaction\n                    itemClassName\n                  )}\n                >\n                  <div\n                    className={cn(\n                      'flex w-full min-w-0 flex-col items-stretch gap-6',\n                      fullHeight && 'min-h-full'\n                    )}\n                  >\n                    {children}\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n        </div>\n      </div>\n    </TabContext.Provider>\n  );\n};\n\n// Create the compound component\nexport const Tab = Object.assign(TabComponent, {\n  Item: TabItem,\n});\n"],"mappings":"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"}

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

@@ -1,34 +1,2 @@
-'use client';
-
-import { createContext, useContext, useState } from "react";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/components/Tab/TabContext.tsx
-/**
-* Context that store the current locale on the client side
-*/
-const TabContext = createContext({
-	tabsValues: {},
-	setTabsValues: (() => {})
-});
-/**
-* Hook that provides the current locale
-*/
-const useTabContext = () => useContext(TabContext);
-/**
-* Provider that store the current locale on the client side
-*/
-const TabProvider = ({ children }) => {
-	const [tabsValues, setTabsValues] = useState({});
-	return /* @__PURE__ */ jsx(TabContext, {
-		value: {
-			tabsValues,
-			setTabsValues
-		},
-		children
-	});
-};
-
-//#endregion
-export { TabContext, TabProvider, useTabContext };
+"use client";import{createContext as e,useContext as t,useState as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=e({tabsValues:{},setTabsValues:(()=>{})}),a=()=>t(i),o=({children:e})=>{let[t,a]=n({});return r(i,{value:{tabsValues:t,setTabsValues:a},children:e})};export{i as TabContext,o as TabProvider,a as useTabContext};
 //# sourceMappingURL=TabContext.mjs.map