@intlayer/design-system 8.4.3 → 8.4.5

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":"wCAEA,MAAa,EAA2C,GACtD,EAAC,MAAD,CACE,KAAK,eACL,MAAM,QACN,OAAO,QACP,QAAQ,YACR,MAAM,6BACN,KAAK,MACL,aAAW,cACX,GAAI,WAEJ,EAAC,OAAD,CAAM,EAAE,mRAAqR,CAAA,CACzR,CAAA"}
+{"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,OAAD;CACE,MAAK;CACL,OAAM;CACN,QAAO;CACP,SAAQ;CACR,OAAM;CACN,MAAK;CACL,cAAW;CACX,GAAI;WAEJ,oBAAC,QAAD,EAAM,GAAE,oRAAqR;CACzR"}

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

@@ -1,2 +1,18 @@
-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};
+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 };
 //# 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":"wCAEA,MAAa,EAAsC,GACjD,EAAC,MAAD,CACE,MAAM,6BACN,QAAQ,cACR,MAAM,MACN,OAAO,MACP,KAAK,eACL,KAAK,MACL,aAAW,SACX,GAAI,WAEJ,EAAC,OAAD,CAAM,EAAE,yHAA2H,CAAA,CAC/H,CAAA"}
+{"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,OAAD;CACE,OAAM;CACN,SAAQ;CACR,OAAM;CACN,QAAO;CACP,MAAK;CACL,MAAK;CACL,cAAW;CACX,GAAI;WAEJ,oBAAC,QAAD,EAAM,GAAE,0HAA2H;CAC/H"}

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

@@ -1,2 +1,18 @@
-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};
+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 };
 //# 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":"wCAEA,MAAa,EAA4C,GACvD,EAAC,MAAD,CACE,KAAK,eACL,MAAM,QACN,OAAO,QACP,QAAQ,YACR,MAAM,6BACN,KAAK,MACL,aAAW,eACX,GAAI,WAEJ,EAAC,OAAD,CAAM,EAAE,i2BAAw2B,CAAA,CAC52B,CAAA"}
+{"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,OAAD;CACE,MAAK;CACL,OAAM;CACN,QAAO;CACP,SAAQ;CACR,OAAM;CACN,MAAK;CACL,cAAW;CACX,GAAI;WAEJ,oBAAC,QAAD,EAAM,GAAE,k2BAAw2B;CAC52B"}

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

@@ -1,2 +1,65 @@
-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};
+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 };
 //# 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":"gdAeA,MAAM,EAAiB,CACrB,CACE,KAAM,gCACN,UAAW,EAAC,EAAD,CAAa,UAAU,+BAAiC,CAAA,CACnE,MAAO,UACR,CACD,CACE,KAAM,4HACN,UAAW,EAAC,EAAD,CAAiB,UAAU,+BAAiC,CAAA,CACvE,MAAO,eACR,CACD,CACE,KAAM,+BACN,UAAW,EAAC,EAAD,CAAO,UAAU,+BAAiC,CAAA,CAC7D,MAAO,IACR,CACD,CACE,KAAM,oCACN,UAAW,EAAC,EAAD,CAAa,UAAU,+BAAiC,CAAA,CACnE,MAAO,UACR,CACD,CACE,KAAM,+CACN,UAAW,EAAC,EAAD,CAAc,UAAU,+BAAiC,CAAA,CACpE,MAAO,WACR,CACD,CACE,KAAM,mCACN,UAAW,EAAC,EAAD,CAAY,UAAU,+BAAiC,CAAA,CAClE,MAAO,SACR,CACD,CACE,KAAM,sCACN,UAAW,EAAC,EAAD,CAAe,UAAU,+BAAiC,CAAA,CACrE,MAAO,YACR,CAMF,CAiBK,GAAiD,CACrD,OACA,YACA,QACA,GAAG,KAEH,EAAC,IAAD,CAEQ,OACN,aAAY,EACZ,UAAU,2BACV,GAAI,WAEH,EACC,CAPG,EAOH,CAGO,GAAkB,CAC7B,aACA,GAAG,KAEH,EAAe,IACb,IACI,GACA,EAAC,EAAD,CAAmB,GAAI,EAAO,GAAI,EAAW,IAAK,EAAM,MAAS,CAAA,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":";;;;;;;;;;;;AAeA,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"}

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

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