@intlayer/design-system 8.11.0-canary.0 → 8.11.0

package/dist/esm/components/LanguageBackground/LanguageSection.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LanguageSection.mjs","names":[],"sources":["../../../../src/components/LanguageBackground/LanguageSection.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport {\n  ALL_LOCALES,\n  getHTMLTextDir,\n  getLocaleName,\n  type Locale,\n} from 'intlayer';\nimport {\n  type FC,\n  type HTMLAttributes,\n  Suspense,\n  useEffect,\n  useState,\n} from 'react';\nimport { Container } from '../Container';\nimport { Flag } from '../Flags';\n\nconst shuffleArray = (array: string[], limit?: number) => {\n  const shuffled = [...array];\n\n  for (let i = shuffled.length - 1; i > 0; i--) {\n    const randomIndex = Math.floor(Math.random() * (i + 1));\n\n    [shuffled[i], shuffled[randomIndex]] = [shuffled[randomIndex], shuffled[i]];\n  }\n\n  return limit ? shuffled.slice(0, limit) : shuffled;\n};\n\nconst LocalCard: FC<{ locale: string }> = ({ locale, ...props }) => (\n  <div\n    className=\"group z-10 mx-8 inline-flex shrink-0 transition-transform duration-300 hover:scale-105\"\n    {...props}\n  >\n    <Container\n      roundedSize=\"xl\"\n      className=\"flex flex-row items-center gap-5 p-3\"\n    >\n      <Flag\n        locale={locale as Locale}\n        className=\"max-h-5 max-w-5 rounded-sm grayscale-80 transition duration-300 group-hover:grayscale-0\"\n        width={640}\n        height={480}\n        loading=\"lazy\"\n      />\n      <span\n        dir={getHTMLTextDir(locale as Locale)}\n        lang={locale as Locale}\n        className=\"flex text-nowrap\"\n      >\n        {getLocaleName(locale as Locale)}\n      </span>\n    </Container>\n  </div>\n);\n\nconst LocalCardList: FC<{ localeList: string[]; className?: string }> = ({\n  localeList,\n  className,\n  ...props\n}) => (\n  <div className=\"relative flex w-full overflow-hidden\" {...props}>\n    <div\n      className={cn('inline-flex shrink-0 will-change-transform', className)}\n    >\n      {/* First set of cards */}\n      {localeList.map((locale, index) => (\n        <LocalCard key={`${locale}-first-${index}`} locale={locale} />\n      ))}\n      {/* Duplicate set for seamless loop */}\n      {localeList.map((locale, index) => (\n        <LocalCard key={`${locale}-second-${index}`} locale={locale} />\n      ))}\n    </div>\n  </div>\n);\n\nconst NUM_OF_LOCALES = 15;\n\nconst emptyArrayOfLocale: string[][] = new Array(4).fill(0).map(() => []);\nconst arrayOfLocale: string[][] = new Array(4)\n  .fill(0)\n  .map(() => shuffleArray(Object.values(ALL_LOCALES), NUM_OF_LOCALES));\n\nexport const LanguageSection: FC<HTMLAttributes<HTMLElement>> = ({\n  className,\n  ...props\n}) => {\n  const [localeList, setLocaleList] = useState(emptyArrayOfLocale);\n  const [firstPart, secondPart, thirdPart, fourthPart] = localeList;\n\n  useEffect(() => {\n    setLocaleList(arrayOfLocale);\n  }, []);\n\n  return (\n    <section\n      className={cn(\n        'mask-[linear-gradient(to_right,transparent_0,black_128px,black_calc(100%-128px),transparent_100%)] my-10 w-full overflow-hidden',\n        className\n      )}\n      {...props}\n    >\n      <div className=\"relative flex w-full flex-col gap-5 py-3\">\n        <Suspense>\n          <LocalCardList localeList={firstPart} className=\"horizontal-loop-1\" />\n          <LocalCardList\n            localeList={secondPart}\n            className=\"horizontal-loop-2\"\n          />\n          <LocalCardList localeList={thirdPart} className=\"horizontal-loop-1\" />\n          <LocalCardList\n            localeList={fourthPart}\n            className=\"horizontal-loop-2\"\n          />\n        </Suspense>\n      </div>\n    </section>\n  );\n};\n"],"mappings":";;;;;;;;;;AAmBA,MAAM,gBAAgB,OAAiB,UAAmB;CACxD,MAAM,WAAW,CAAC,GAAG,KAAK;CAE1B,KAAK,IAAI,IAAI,SAAS,SAAS,GAAG,IAAI,GAAG,KAAK;EAC5C,MAAM,cAAc,KAAK,MAAM,KAAK,OAAO,KAAK,IAAI,EAAE;EAEtD,CAAC,SAAS,IAAI,SAAS,gBAAgB,CAAC,SAAS,cAAc,SAAS,EAAE;CAC5E;CAEA,OAAO,QAAQ,SAAS,MAAM,GAAG,KAAK,IAAI;AAC5C;AAEA,MAAM,aAAqC,EAAE,QAAQ,GAAG,YACtD,oBAAC,OAAD;CACE,WAAU;CACV,GAAI;WAEJ,qBAAC,WAAD;EACE,aAAY;EACZ,WAAU;YAFZ,CAIE,oBAAC,MAAD;GACU;GACR,WAAU;GACV,OAAO;GACP,QAAQ;GACR,SAAQ;EACT,IACD,oBAAC,QAAD;GACE,KAAK,eAAe,MAAgB;GACpC,MAAM;GACN,WAAU;aAET,cAAc,MAAgB;EAC3B,EACG;;AACR;AAGP,MAAM,iBAAmE,EACvE,YACA,WACA,GAAG,YAEH,oBAAC,OAAD;CAAK,WAAU;CAAuC,GAAI;WACxD,qBAAC,OAAD;EACE,WAAW,GAAG,8CAA8C,SAAS;YADvE,CAIG,WAAW,KAAK,QAAQ,UACvB,oBAAC,WAAD,EAAoD,OAAS,GAA7C,GAAG,OAAO,SAAS,OAA0B,CAC9D,GAEA,WAAW,KAAK,QAAQ,UACvB,oBAAC,WAAD,EAAqD,OAAS,GAA9C,GAAG,OAAO,UAAU,OAA0B,CAC/D,CACE;;AACF;AAGP,MAAM,iBAAiB;AAEvB,MAAM,qBAAiC,IAAI,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC;AACxE,MAAM,gBAA4B,IAAI,MAAM,CAAC,EAC1C,KAAK,CAAC,EACN,UAAU,aAAa,OAAO,OAAO,WAAW,GAAG,cAAc,CAAC;AAErE,MAAa,mBAAoD,EAC/D,WACA,GAAG,YACC;CACJ,MAAM,CAAC,YAAY,iBAAiB,SAAS,kBAAkB;CAC/D,MAAM,CAAC,WAAW,YAAY,WAAW,cAAc;CAEvD,gBAAgB;EACd,cAAc,aAAa;CAC7B,GAAG,CAAC,CAAC;CAEL,OACE,oBAAC,WAAD;EACE,WAAW,GACT,mIACA,SACF;EACA,GAAI;YAEJ,oBAAC,OAAD;GAAK,WAAU;aACb,qBAAC,UAAD;IACE,oBAAC,eAAD;KAAe,YAAY;KAAW,WAAU;IAAqB;IACrE,oBAAC,eAAD;KACE,YAAY;KACZ,WAAU;IACX;IACD,oBAAC,eAAD;KAAe,YAAY;KAAW,WAAU;IAAqB;IACrE,oBAAC,eAAD;KACE,YAAY;KACZ,WAAU;IACX;GACO;EACP;CACE;AAEb"}
+{"version":3,"file":"LanguageSection.mjs","names":[],"sources":["../../../../src/components/LanguageBackground/LanguageSection.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport {\n  ALL_LOCALES,\n  getHTMLTextDir,\n  getLocaleName,\n  type Locale,\n} from 'intlayer';\nimport {\n  type FC,\n  type HTMLAttributes,\n  startTransition,\n  useEffect,\n  useState,\n} from 'react';\nimport { Container } from '../Container';\nimport { Flag } from '../Flags';\n\nconst shuffleArray = (array: string[], limit?: number) => {\n  const shuffled = [...array];\n\n  for (let i = shuffled.length - 1; i > 0; i--) {\n    const randomIndex = Math.floor(Math.random() * (i + 1));\n\n    [shuffled[i], shuffled[randomIndex]] = [shuffled[randomIndex], shuffled[i]];\n  }\n\n  return limit ? shuffled.slice(0, limit) : shuffled;\n};\n\nconst LocalCard: FC<{ locale: string }> = ({ locale, ...props }) => (\n  <div\n    className=\"group z-10 mx-8 inline-flex shrink-0 transition-transform duration-300 hover:scale-105\"\n    {...props}\n  >\n    <Container\n      roundedSize=\"xl\"\n      className=\"flex flex-row items-center gap-5 p-3\"\n    >\n      <Flag\n        locale={locale as Locale}\n        className=\"max-h-5 max-w-5 rounded-sm grayscale-80 transition duration-300 group-hover:grayscale-0\"\n        width={640}\n        height={480}\n        loading=\"lazy\"\n      />\n      <span\n        dir={getHTMLTextDir(locale as Locale)}\n        lang={locale as Locale}\n        className=\"flex text-nowrap\"\n      >\n        {getLocaleName(locale as Locale)}\n      </span>\n    </Container>\n  </div>\n);\n\nconst LocalCardList: FC<{ localeList: string[]; className?: string }> = ({\n  localeList,\n  className,\n  ...props\n}) => (\n  <div className=\"relative flex w-full overflow-hidden\" {...props}>\n    <div\n      className={cn('inline-flex shrink-0 will-change-transform', className)}\n    >\n      {/* First set of cards */}\n      {localeList.map((locale) => (\n        <LocalCard key={`${locale}-first`} locale={locale} />\n      ))}\n      {/* Duplicate set for seamless loop */}\n      {localeList.map((locale) => (\n        <LocalCard key={`${locale}-second`} locale={locale} />\n      ))}\n    </div>\n  </div>\n);\n\nconst NUM_OF_LOCALES = 15;\n\nconst emptyArrayOfLocale: string[][] = new Array(4).fill(0).map(() => []);\nconst arrayOfLocale: string[][] = new Array(4)\n  .fill(0)\n  .map(() => shuffleArray(Object.values(ALL_LOCALES), NUM_OF_LOCALES));\n\nexport const LanguageSection: FC<HTMLAttributes<HTMLElement>> = ({\n  className,\n  ...props\n}) => {\n  const [localeList, setLocaleList] = useState(emptyArrayOfLocale);\n  const [firstPart, secondPart, thirdPart, fourthPart] = localeList;\n\n  useEffect(() => {\n    startTransition(() => {\n      setLocaleList(arrayOfLocale);\n    });\n  }, []);\n\n  return (\n    <section\n      className={cn(\n        'mask-[linear-gradient(to_right,transparent_0,black_128px,black_calc(100%-128px),transparent_100%)] my-10 w-full overflow-hidden',\n        className\n      )}\n      {...props}\n    >\n      <div className=\"relative flex w-full flex-col gap-5 py-3\">\n        <LocalCardList localeList={firstPart} className=\"horizontal-loop-1\" />\n        <LocalCardList localeList={secondPart} className=\"horizontal-loop-2\" />\n        <LocalCardList localeList={thirdPart} className=\"horizontal-loop-1\" />\n        <LocalCardList localeList={fourthPart} className=\"horizontal-loop-2\" />\n      </div>\n    </section>\n  );\n};\n"],"mappings":";;;;;;;;;;AAmBA,MAAM,gBAAgB,OAAiB,UAAmB;CACxD,MAAM,WAAW,CAAC,GAAG,KAAK;CAE1B,KAAK,IAAI,IAAI,SAAS,SAAS,GAAG,IAAI,GAAG,KAAK;EAC5C,MAAM,cAAc,KAAK,MAAM,KAAK,OAAO,KAAK,IAAI,EAAE;EAEtD,CAAC,SAAS,IAAI,SAAS,gBAAgB,CAAC,SAAS,cAAc,SAAS,EAAE;CAC5E;CAEA,OAAO,QAAQ,SAAS,MAAM,GAAG,KAAK,IAAI;AAC5C;AAEA,MAAM,aAAqC,EAAE,QAAQ,GAAG,YACtD,oBAAC,OAAD;CACE,WAAU;CACV,GAAI;WAEJ,qBAAC,WAAD;EACE,aAAY;EACZ,WAAU;YAFZ,CAIE,oBAAC,MAAD;GACU;GACR,WAAU;GACV,OAAO;GACP,QAAQ;GACR,SAAQ;EACT,IACD,oBAAC,QAAD;GACE,KAAK,eAAe,MAAgB;GACpC,MAAM;GACN,WAAU;aAET,cAAc,MAAgB;EAC3B,EACG;;AACR;AAGP,MAAM,iBAAmE,EACvE,YACA,WACA,GAAG,YAEH,oBAAC,OAAD;CAAK,WAAU;CAAuC,GAAI;WACxD,qBAAC,OAAD;EACE,WAAW,GAAG,8CAA8C,SAAS;YADvE,CAIG,WAAW,KAAK,WACf,oBAAC,WAAD,EAA2C,OAAS,GAApC,GAAG,OAAO,OAA0B,CACrD,GAEA,WAAW,KAAK,WACf,oBAAC,WAAD,EAA4C,OAAS,GAArC,GAAG,OAAO,QAA2B,CACtD,CACE;;AACF;AAGP,MAAM,iBAAiB;AAEvB,MAAM,qBAAiC,IAAI,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC;AACxE,MAAM,gBAA4B,IAAI,MAAM,CAAC,EAC1C,KAAK,CAAC,EACN,UAAU,aAAa,OAAO,OAAO,WAAW,GAAG,cAAc,CAAC;AAErE,MAAa,mBAAoD,EAC/D,WACA,GAAG,YACC;CACJ,MAAM,CAAC,YAAY,iBAAiB,SAAS,kBAAkB;CAC/D,MAAM,CAAC,WAAW,YAAY,WAAW,cAAc;CAEvD,gBAAgB;EACd,sBAAsB;GACpB,cAAc,aAAa;EAC7B,CAAC;CACH,GAAG,CAAC,CAAC;CAEL,OACE,oBAAC,WAAD;EACE,WAAW,GACT,mIACA,SACF;EACA,GAAI;YAEJ,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,oBAAC,eAAD;KAAe,YAAY;KAAW,WAAU;IAAqB;IACrE,oBAAC,eAAD;KAAe,YAAY;KAAY,WAAU;IAAqB;IACtE,oBAAC,eAAD;KAAe,YAAY;KAAW,WAAU;IAAqB;IACrE,oBAAC,eAAD;KAAe,YAAY;KAAY,WAAU;IAAqB;GACnE;;CACE;AAEb"}

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { LanguageSection } from "./LanguageSection.mjs";
-import { Suspense, lazy, useEffect, useState } from "react";
+import { Suspense, lazy, startTransition, useEffect, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/LanguageBackground/index.tsx
@@ -9,12 +9,14 @@ const LazyLanguageSection = lazy(() => import("./LanguageSection.mjs").then((m)
 const LanguageBackground = ({ children }) => {
 	const [mounted, setMounted] = useState(false);
 	useEffect(() => {
-		setMounted(true);
+		startTransition(() => {
+			setMounted(true);
+		});
 	}, []);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
-		className: "absolute top-0 left-0 z-0 flex size-full items-center justify-center",
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [children, /* @__PURE__ */ jsx("div", {
+		className: "absolute top-0 left-0 -z-1 flex size-full items-center justify-center",
 		children: mounted && /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(LazyLanguageSection, { className: "mt-[30%]" }) })
-	}), children] });
+	})] });
 };
 
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/LanguageBackground/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type FC,\n  lazy,\n  type PropsWithChildren,\n  Suspense,\n  useEffect,\n  useState,\n} from 'react';\n\nconst LazyLanguageSection = lazy(() =>\n  import('./LanguageSection').then((m) => ({ default: m.LanguageSection }))\n);\n\nexport { LanguageSection } from './LanguageSection';\n\nexport const LanguageBackground: FC<PropsWithChildren> = ({ children }) => {\n  const [mounted, setMounted] = useState(false);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  return (\n    <>\n      <div className=\"absolute top-0 left-0 z-0 flex size-full items-center justify-center\">\n        {mounted && (\n          <Suspense>\n            <LazyLanguageSection className=\"mt-[30%]\" />\n          </Suspense>\n        )}\n      </div>\n      {children}\n    </>\n  );\n};\n"],"mappings":";;;;;;;AAWA,MAAM,sBAAsB,WAC1B,OAAO,yBAAqB,MAAM,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAC1E;AAIA,MAAa,sBAA6C,EAAE,eAAe;CACzE,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,gBAAgB;EACd,WAAW,IAAI;CACjB,GAAG,CAAC,CAAC;CAEL,OACE,8CACE,oBAAC,OAAD;EAAK,WAAU;YACZ,WACC,oBAAC,UAAD,YACE,oBAAC,qBAAD,EAAqB,WAAU,WAAY,GACnC;CAET,IACJ,QACD;AAEN"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/LanguageBackground/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type FC,\n  lazy,\n  type PropsWithChildren,\n  Suspense,\n  startTransition,\n  useEffect,\n  useState,\n} from 'react';\n\nconst LazyLanguageSection = lazy(() =>\n  import('./LanguageSection').then((m) => ({ default: m.LanguageSection }))\n);\n\nexport { LanguageSection } from './LanguageSection';\n\nexport const LanguageBackground: FC<PropsWithChildren> = ({ children }) => {\n  const [mounted, setMounted] = useState(false);\n\n  useEffect(() => {\n    // startTransition defers the background as a low-priority update so the\n    // sign-in form paints before React starts loading the flag section chunk.\n    startTransition(() => {\n      setMounted(true);\n    });\n  }, []);\n\n  return (\n    <>\n      {children}\n      <div className=\"absolute top-0 left-0 -z-1 flex size-full items-center justify-center\">\n        {mounted && (\n          <Suspense>\n            <LazyLanguageSection className=\"mt-[30%]\" />\n          </Suspense>\n        )}\n      </div>\n    </>\n  );\n};\n"],"mappings":";;;;;;;AAYA,MAAM,sBAAsB,WAC1B,OAAO,yBAAqB,MAAM,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAC1E;AAIA,MAAa,sBAA6C,EAAE,eAAe;CACzE,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,gBAAgB;EAGd,sBAAsB;GACpB,WAAW,IAAI;EACjB,CAAC;CACH,GAAG,CAAC,CAAC;CAEL,OACE,8CACG,UACD,oBAAC,OAAD;EAAK,WAAU;YACZ,WACC,oBAAC,UAAD,YACE,oBAAC,qBAAD,EAAqB,WAAU,WAAY,GACnC;CAET,EACL;AAEN"}

package/dist/esm/components/Link/Link.mjs

@@ -23,7 +23,6 @@ let LinkVariant = /* @__PURE__ */ function(LinkVariant) {
 let LinkColor = /* @__PURE__ */ function(LinkColor) {
 	LinkColor["PRIMARY"] = "primary";
 	LinkColor["SECONDARY"] = "secondary";
-	LinkColor["DESTRUCTIVE"] = "destructive";
 	LinkColor["NEUTRAL"] = "neutral";
 	LinkColor["LIGHT"] = "light";
 	LinkColor["DARK"] = "dark";
@@ -81,7 +80,6 @@ const linkVariants = cva("gap-3 transition-all duration-300 focus-visible:outlin
 		color: {
 			[`primary`]: "text-primary",
 			[`secondary`]: "text-secondary",
-			[`destructive`]: "text-destructive",
 			[`neutral`]: "text-neutral",
 			[`light`]: "text-white",
 			[`dark`]: "text-neutral-800",
@@ -145,11 +143,6 @@ const linkVariants = cva("gap-3 transition-all duration-300 focus-visible:outlin
 			color: "secondary",
 			class: "ring-secondary/20"
 		},
-		{
-			variant: ["button", "button-outlined"],
-			color: "destructive",
-			class: "ring-destructive/20"
-		},
 		{
 			variant: ["button", "button-outlined"],
 			color: "neutral",

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

@@ -1 +1 @@
-{"version":3,"file":"Link.mjs","names":[],"sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import { getLocalizedUrl } from '@intlayer/core/localization';\nimport type { LocalesValues } from '@intlayer/types/module_augmentation';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ExternalLink, MoveRight } from 'lucide-react';\nimport {\n  type AnchorHTMLAttributes,\n  type DetailedHTMLProps,\n  type FC,\n  isValidElement,\n  type ReactNode,\n} from 'react';\n\n/**\n * Visual style variants for Link component\n */\nexport enum LinkVariant {\n  DEFAULT = 'default',\n  INVISIBLE_LINK = 'invisible-link',\n  BUTTON = 'button',\n  BUTTON_OUTLINED = 'button-outlined',\n  HOVERABLE = 'hoverable',\n}\n\n/**\n * Color theme variants for Link component\n */\nexport enum LinkColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  DARK = 'dark',\n  TEXT = 'text',\n  TEXT_INVERSE = 'text-inverse',\n  ERROR = 'error',\n  SUCCESS = 'success',\n  CUSTOM = 'custom',\n}\n\nexport enum LinkRoundedSize {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  TWO_XL = '2xl',\n  THREE_XL = '3xl',\n  FULL = 'full',\n}\n\nexport enum LinkSize {\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  CUSTOM = 'custom',\n}\n\nexport enum LinkUnderlined {\n  DEFAULT = 'default',\n  TRUE = 'true',\n  FALSE = 'false',\n}\n\nexport const linkVariants = cva(\n  'gap-3 transition-all duration-300 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        [`${LinkVariant.DEFAULT}`]:\n          'h-auto justify-start border-inherit bg-current/0 px-1 font-medium decoration-[1.5] underline-offset-5 hover:bg-current/0 hover:text-current/80 hover:underline hover:underline-offset-6',\n        [`${LinkVariant.INVISIBLE_LINK}`]:\n          'h-auto justify-start border-inherit bg-current/0 px-1 underline-offset-5 hover:bg-current/0 aria-[current]:bg-current/5',\n\n        [`${LinkVariant.BUTTON}`]:\n          'relative flex cursor-pointer flex-row items-center justify-center gap-2 rounded-full bg-current text-center font-medium text-text ring-0 *:text-text-opposite hover:bg-current/90 hover:ring-5 aria-selected:ring-5 aria-[current]:ring-5',\n\n        [`${LinkVariant.BUTTON_OUTLINED}`]:\n          'relative flex cursor-pointer flex-row items-center justify-center gap-2 rounded-full border-[1.3px] border-current text-center font-medium text-text ring-0 *:text-text hover:bg-current/20 hover:ring-5 aria-selected:ring-5 aria-[current]:ring-5',\n\n        [`${LinkVariant.HOVERABLE}`]:\n          'rounded-lg border-none bg-current/0 transition *:text-current! hover:bg-current/20 aria-[current]:bg-current/5',\n      },\n      roundedSize: {\n        [`${LinkRoundedSize.NONE}`]: 'rounded-none',\n        [`${LinkRoundedSize.SM}`]:\n          'rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl',\n        [`${LinkRoundedSize.MD}`]:\n          'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n        [`${LinkRoundedSize.LG}`]:\n          'rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl',\n        [`${LinkRoundedSize.XL}`]:\n          'rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl',\n        [`${LinkRoundedSize.TWO_XL}`]:\n          'rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]',\n        [`${LinkRoundedSize.THREE_XL}`]:\n          'rounded-[2.5rem] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[3rem]',\n        [`${LinkRoundedSize.FULL}`]: 'rounded-full',\n      },\n      color: {\n        [`${LinkColor.PRIMARY}`]: 'text-primary',\n        [`${LinkColor.SECONDARY}`]: 'text-secondary',\n        [`${LinkColor.DESTRUCTIVE}`]: 'text-destructive',\n        [`${LinkColor.NEUTRAL}`]: 'text-neutral',\n        [`${LinkColor.LIGHT}`]: 'text-white',\n        [`${LinkColor.DARK}`]: 'text-neutral-800',\n        [`${LinkColor.TEXT}`]: 'text-text',\n        [`${LinkColor.TEXT_INVERSE}`]: 'text-text-opposite',\n        [`${LinkColor.ERROR}`]: 'text-error',\n        [`${LinkColor.SUCCESS}`]: 'text-success',\n        [`${LinkColor.CUSTOM}`]: '',\n      },\n      size: {\n        [`${LinkSize.SM}`]: 'text-sm',\n        [`${LinkSize.MD}`]: 'text-base',\n        [`${LinkSize.LG}`]: 'text-lg',\n        [`${LinkSize.XL}`]: 'text-xl',\n        [`${LinkSize.CUSTOM}`]: '',\n      },\n      underlined: {\n        [LinkUnderlined.DEFAULT]: '',\n        [LinkUnderlined.TRUE]: 'underline',\n        [LinkUnderlined.FALSE]: 'no-underline',\n      },\n    },\n    // Compound variants handle height and padding\n    compoundVariants: [\n      // ---------------------------------------------------------\n      // FIX START: Correctly Handle Contrast for TEXT_INVERSE\n      // ---------------------------------------------------------\n      {\n        // Filled Button + Inverse Color (e.g., White Button):\n        // We DO NOT override parent text color (it must remain 'text-opposite' so bg-current is white).\n        // We ONLY override children to be 'text-text' (Dark) so they show up on white.\n        variant: LinkVariant.BUTTON,\n        color: LinkColor.TEXT_INVERSE,\n        class: '*:text-text',\n      },\n      {\n        // Outlined Button + Inverse Color (e.g., White Border):\n        // Parent is 'text-opposite' (Border is white).\n        // Children must also be 'text-opposite' (White text) to show on dark background.\n        variant: LinkVariant.BUTTON_OUTLINED,\n        color: LinkColor.TEXT_INVERSE,\n        class: 'text-text-opposite *:text-text-opposite',\n      },\n\n      // Min height and padding for button variants\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        size: LinkSize.SM,\n        class: 'min-h-7 px-3 max-md:py-1',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        size: LinkSize.MD,\n        class: 'min-h-8 px-6 max-md:py-2',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        size: LinkSize.LG,\n        class: 'min-h-10 px-8 max-md:py-3',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        size: LinkSize.XL,\n        class: 'min-h-11 px-10 max-md:py-4',\n      },\n      // Ring color variants\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.PRIMARY,\n        class: 'ring-primary/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.SECONDARY,\n        class: 'ring-secondary/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.DESTRUCTIVE,\n        class: 'ring-destructive/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.NEUTRAL,\n        class: 'ring-neutral/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.LIGHT,\n        class: 'ring-white/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.DARK,\n        class: 'ring-neutral-800/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.TEXT,\n        class: 'ring-text/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.TEXT_INVERSE,\n        class: 'ring-text-opposite/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.ERROR,\n        class: 'ring-error/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.SUCCESS,\n        class: 'ring-success/20',\n      },\n    ],\n\n    defaultVariants: {\n      variant: LinkVariant.DEFAULT,\n      roundedSize: LinkRoundedSize.MD,\n      underlined: LinkUnderlined.DEFAULT,\n      size: LinkSize.MD,\n    },\n  }\n);\n\nexport type LinkProps = DetailedHTMLProps<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  HTMLAnchorElement\n> &\n  VariantProps<typeof linkVariants> & {\n    label: string;\n    isExternalLink?: boolean;\n    isPageSection?: boolean;\n    isActive?: boolean;\n    locale?: LocalesValues;\n  };\n\nexport const checkIsExternalLink = ({\n  href,\n  isExternalLink: isExternalLinkProp,\n}: Pick<LinkProps, 'href' | 'isExternalLink'>): boolean => {\n  const isValidHref = typeof href === 'string' && href.trim() !== '';\n  const isExternalLink =\n    isExternalLinkProp === true ||\n    (typeof isExternalLinkProp === 'undefined' &&\n      isValidHref &&\n      /^https?:\\/\\//.test(href));\n\n  return isExternalLink;\n};\n\nexport const isTextChildren = (children: ReactNode): boolean => {\n  if (typeof children === 'string' || typeof children === 'number') {\n    return true;\n  }\n  if (Array.isArray(children)) {\n    return children.every(isTextChildren);\n  }\n  if (isValidElement(children)) {\n    return isTextChildren(\n      (children.props as { children?: ReactNode }).children\n    );\n  }\n  return false;\n};\n\nexport const Link: FC<LinkProps> = (props) => {\n  const {\n    variant = LinkVariant.DEFAULT,\n    color = LinkColor.CUSTOM,\n    roundedSize,\n    children,\n    label,\n    className,\n    isActive,\n    underlined,\n    locale,\n    size,\n    isExternalLink: isExternalLinkProp,\n    isPageSection: isPageSectionProp,\n    href: hrefProp,\n    ...otherProps\n  } = props;\n\n  const isExternalLink = isExternalLinkProp ?? checkIsExternalLink(props);\n  const isPageSection = isPageSectionProp ?? hrefProp?.startsWith('#') ?? false;\n\n  const isChildrenString = isTextChildren(children);\n  const isButton =\n    variant === LinkVariant.BUTTON || variant === LinkVariant.BUTTON_OUTLINED;\n\n  const rel = isExternalLink ? 'noopener noreferrer nofollow' : undefined;\n\n  const target = isExternalLink ? '_blank' : '_self';\n\n  const resolvedHref =\n    locale && hrefProp && !isExternalLink && !isPageSection\n      ? getLocalizedUrl(hrefProp, locale)\n      : hrefProp;\n\n  const href = resolvedHref === '' ? undefined : resolvedHref;\n\n  return (\n    <a\n      href={href}\n      aria-label={label}\n      rel={rel}\n      target={target}\n      aria-current={isActive ? 'page' : undefined}\n      suppressHydrationWarning\n      className={cn(\n        linkVariants({\n          variant,\n          color,\n          roundedSize,\n          underlined,\n          size,\n          className,\n        })\n      )}\n      {...otherProps}\n    >\n      {isButton && isChildrenString ? <span>{children}</span> : children}\n\n      {isExternalLink && isChildrenString && (\n        <ExternalLink className=\"ml-2 inline-block size-4\" />\n      )}\n      {isPageSection && <MoveRight className=\"ml-2 inline-block size-4\" />}\n    </a>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAgBA,IAAY,cAAL;CACL;CACA;CACA;CACA;CACA;;AACF;;;;AAKA,IAAY,YAAL;CACL;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;;AACF;AAEA,IAAY,kBAAL;CACL;CACA;CACA;CACA;CACA;CACA;CACA;CACA;;AACF;AAEA,IAAY,WAAL;CACL;CACA;CACA;CACA;CACA;;AACF;AAEA,IAAY,iBAAL;CACL;CACA;CACA;;AACF;AAEA,MAAa,eAAe,IAC1B,iHACA;CACE,UAAU;EACR,SAAS;IACN,YACC;IACD,mBACC;IAED,WACC;IAED,oBACC;IAED,cACC;EACJ;EACA,aAAa;IACV,SAA4B;IAC5B,OACC;IACD,OACC;IACD,OACC;IACD,OACC;IACD,QACC;IACD,QACC;IACD,SAA4B;EAC/B;EACA,OAAO;IACJ,YAAyB;IACzB,cAA2B;IAC3B,gBAA6B;IAC7B,YAAyB;IACzB,UAAuB;IACvB,SAAsB;IACtB,SAAsB;IACtB,iBAA8B;IAC9B,UAAuB;IACvB,YAAyB;IACzB,WAAwB;EAC3B;EACA,MAAM;IACH,OAAmB;IACnB,OAAmB;IACnB,OAAmB;IACnB,OAAmB;IACnB,WAAuB;EAC1B;EACA,YAAY;gBACgB;aACH;cACC;EAC1B;CACF;CAEA,kBAAkB;EAIhB;GAIE;GACA;GACA,OAAO;EACT;EACA;GAIE;GACA;GACA,OAAO;EACT;EAGA;GACE,SAAS,4BAAgD;GACzD;GACA,OAAO;EACT;EACA;GACE,SAAS,4BAAgD;GACzD;GACA,OAAO;EACT;EACA;GACE,SAAS,4BAAgD;GACzD;GACA,OAAO;EACT;EACA;GACE,SAAS,4BAAgD;GACzD;GACA,OAAO;EACT;EAEA;GACE,SAAS,4BAAgD;GACzD;GACA,OAAO;EACT;EACA;GACE,SAAS,4BAAgD;GACzD;GACA,OAAO;EACT;EACA;GACE,SAAS,4BAAgD;GACzD;GACA,OAAO;EACT;EACA;GACE,SAAS,4BAAgD;GACzD;GACA,OAAO;EACT;EACA;GACE,SAAS,4BAAgD;GACzD;GACA,OAAO;EACT;EACA;GACE,SAAS,4BAAgD;GACzD;GACA,OAAO;EACT;EACA;GACE,SAAS,4BAAgD;GACzD;GACA,OAAO;EACT;EACA;GACE,SAAS,4BAAgD;GACzD;GACA,OAAO;EACT;EACA;GACE,SAAS,4BAAgD;GACzD;GACA,OAAO;EACT;EACA;GACE,SAAS,4BAAgD;GACzD;GACA,OAAO;EACT;CACF;CAEA,iBAAiB;EACf;EACA;EACA;EACA;CACF;AACF,CACF;AAcA,MAAa,uBAAuB,EAClC,MACA,gBAAgB,yBACyC;CACzD,MAAM,cAAc,OAAO,SAAS,YAAY,KAAK,KAAK,MAAM;CAOhE,OALE,uBAAuB,QACtB,OAAO,uBAAuB,eAC7B,eACA,eAAe,KAAK,IAAI;AAG9B;AAEA,MAAa,kBAAkB,aAAiC;CAC9D,IAAI,OAAO,aAAa,YAAY,OAAO,aAAa,UACtD,OAAO;CAET,IAAI,MAAM,QAAQ,QAAQ,GACxB,OAAO,SAAS,MAAM,cAAc;CAEtC,IAAI,eAAe,QAAQ,GACzB,OAAO,eACJ,SAAS,MAAmC,QAC/C;CAEF,OAAO;AACT;AAEA,MAAa,QAAuB,UAAU;CAC5C,MAAM,EACJ,qBACA,kBACA,aACA,UACA,OACA,WACA,UACA,YACA,QACA,MACA,gBAAgB,oBAChB,eAAe,mBACf,MAAM,UACN,GAAG,eACD;CAEJ,MAAM,iBAAiB,sBAAsB,oBAAoB,KAAK;CACtE,MAAM,gBAAgB,qBAAqB,UAAU,WAAW,GAAG,KAAK;CAExE,MAAM,mBAAmB,eAAe,QAAQ;CAChD,MAAM,WACJ,wBAAkC;CAEpC,MAAM,MAAM,iBAAiB,iCAAiC;CAE9D,MAAM,SAAS,iBAAiB,WAAW;CAE3C,MAAM,eACJ,UAAU,YAAY,CAAC,kBAAkB,CAAC,gBACtC,gBAAgB,UAAU,MAAM,IAChC;CAIN,OACE,qBAAC,KAAD;EACE,MAJS,iBAAiB,KAAK,SAAY;EAK3C,cAAY;EACP;EACG;EACR,gBAAc,WAAW,SAAS;EAClC;EACA,WAAW,GACT,aAAa;GACX;GACA;GACA;GACA;GACA;GACA;EACF,CAAC,CACH;EACA,GAAI;YAjBN;GAmBG,YAAY,mBAAmB,oBAAC,QAAD,EAAO,SAAe,KAAI;GAEzD,kBAAkB,oBACjB,oBAAC,cAAD,EAAc,WAAU,2BAA4B;GAErD,iBAAiB,oBAAC,WAAD,EAAW,WAAU,2BAA4B;EAClE;;AAEP"}
+{"version":3,"file":"Link.mjs","names":[],"sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import { getLocalizedUrl } from '@intlayer/core/localization';\nimport type { LocalesValues } from '@intlayer/types/module_augmentation';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ExternalLink, MoveRight } from 'lucide-react';\nimport {\n  type AnchorHTMLAttributes,\n  type DetailedHTMLProps,\n  type FC,\n  isValidElement,\n  type ReactNode,\n} from 'react';\n\n/**\n * Visual style variants for Link component\n */\nexport enum LinkVariant {\n  DEFAULT = 'default',\n  INVISIBLE_LINK = 'invisible-link',\n  BUTTON = 'button',\n  BUTTON_OUTLINED = 'button-outlined',\n  HOVERABLE = 'hoverable',\n}\n\n/**\n * Color theme variants for Link component\n */\nexport enum LinkColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  DARK = 'dark',\n  TEXT = 'text',\n  TEXT_INVERSE = 'text-inverse',\n  ERROR = 'error',\n  SUCCESS = 'success',\n  CUSTOM = 'custom',\n}\n\nexport enum LinkRoundedSize {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  TWO_XL = '2xl',\n  THREE_XL = '3xl',\n  FULL = 'full',\n}\n\nexport enum LinkSize {\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  CUSTOM = 'custom',\n}\n\nexport enum LinkUnderlined {\n  DEFAULT = 'default',\n  TRUE = 'true',\n  FALSE = 'false',\n}\n\nexport const linkVariants = cva(\n  'gap-3 transition-all duration-300 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        [`${LinkVariant.DEFAULT}`]:\n          'h-auto justify-start border-inherit bg-current/0 px-1 font-medium decoration-[1.5] underline-offset-5 hover:bg-current/0 hover:text-current/80 hover:underline hover:underline-offset-6',\n        [`${LinkVariant.INVISIBLE_LINK}`]:\n          'h-auto justify-start border-inherit bg-current/0 px-1 underline-offset-5 hover:bg-current/0 aria-[current]:bg-current/5',\n\n        [`${LinkVariant.BUTTON}`]:\n          'relative flex cursor-pointer flex-row items-center justify-center gap-2 rounded-full bg-current text-center font-medium text-text ring-0 *:text-text-opposite hover:bg-current/90 hover:ring-5 aria-selected:ring-5 aria-[current]:ring-5',\n\n        [`${LinkVariant.BUTTON_OUTLINED}`]:\n          'relative flex cursor-pointer flex-row items-center justify-center gap-2 rounded-full border-[1.3px] border-current text-center font-medium text-text ring-0 *:text-text hover:bg-current/20 hover:ring-5 aria-selected:ring-5 aria-[current]:ring-5',\n\n        [`${LinkVariant.HOVERABLE}`]:\n          'rounded-lg border-none bg-current/0 transition *:text-current! hover:bg-current/20 aria-[current]:bg-current/5',\n      },\n      roundedSize: {\n        [`${LinkRoundedSize.NONE}`]: 'rounded-none',\n        [`${LinkRoundedSize.SM}`]:\n          'rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl',\n        [`${LinkRoundedSize.MD}`]:\n          'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n        [`${LinkRoundedSize.LG}`]:\n          'rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl',\n        [`${LinkRoundedSize.XL}`]:\n          'rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl',\n        [`${LinkRoundedSize.TWO_XL}`]:\n          'rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]',\n        [`${LinkRoundedSize.THREE_XL}`]:\n          'rounded-[2.5rem] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[3rem]',\n        [`${LinkRoundedSize.FULL}`]: 'rounded-full',\n      },\n      color: {\n        [`${LinkColor.PRIMARY}`]: 'text-primary',\n        [`${LinkColor.SECONDARY}`]: 'text-secondary',\n        [`${LinkColor.NEUTRAL}`]: 'text-neutral',\n        [`${LinkColor.LIGHT}`]: 'text-white',\n        [`${LinkColor.DARK}`]: 'text-neutral-800',\n        [`${LinkColor.TEXT}`]: 'text-text',\n        [`${LinkColor.TEXT_INVERSE}`]: 'text-text-opposite',\n        [`${LinkColor.ERROR}`]: 'text-error',\n        [`${LinkColor.SUCCESS}`]: 'text-success',\n        [`${LinkColor.CUSTOM}`]: '',\n      },\n      size: {\n        [`${LinkSize.SM}`]: 'text-sm',\n        [`${LinkSize.MD}`]: 'text-base',\n        [`${LinkSize.LG}`]: 'text-lg',\n        [`${LinkSize.XL}`]: 'text-xl',\n        [`${LinkSize.CUSTOM}`]: '',\n      },\n      underlined: {\n        [LinkUnderlined.DEFAULT]: '',\n        [LinkUnderlined.TRUE]: 'underline',\n        [LinkUnderlined.FALSE]: 'no-underline',\n      },\n    },\n    // Compound variants handle height and padding\n    compoundVariants: [\n      // ---------------------------------------------------------\n      // FIX START: Correctly Handle Contrast for TEXT_INVERSE\n      // ---------------------------------------------------------\n      {\n        // Filled Button + Inverse Color (e.g., White Button):\n        // We DO NOT override parent text color (it must remain 'text-opposite' so bg-current is white).\n        // We ONLY override children to be 'text-text' (Dark) so they show up on white.\n        variant: LinkVariant.BUTTON,\n        color: LinkColor.TEXT_INVERSE,\n        class: '*:text-text',\n      },\n      {\n        // Outlined Button + Inverse Color (e.g., White Border):\n        // Parent is 'text-opposite' (Border is white).\n        // Children must also be 'text-opposite' (White text) to show on dark background.\n        variant: LinkVariant.BUTTON_OUTLINED,\n        color: LinkColor.TEXT_INVERSE,\n        class: 'text-text-opposite *:text-text-opposite',\n      },\n\n      // Min height and padding for button variants\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        size: LinkSize.SM,\n        class: 'min-h-7 px-3 max-md:py-1',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        size: LinkSize.MD,\n        class: 'min-h-8 px-6 max-md:py-2',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        size: LinkSize.LG,\n        class: 'min-h-10 px-8 max-md:py-3',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        size: LinkSize.XL,\n        class: 'min-h-11 px-10 max-md:py-4',\n      },\n      // Ring color variants\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.PRIMARY,\n        class: 'ring-primary/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.SECONDARY,\n        class: 'ring-secondary/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.NEUTRAL,\n        class: 'ring-neutral/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.LIGHT,\n        class: 'ring-white/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.DARK,\n        class: 'ring-neutral-800/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.TEXT,\n        class: 'ring-text/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.TEXT_INVERSE,\n        class: 'ring-text-opposite/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.ERROR,\n        class: 'ring-error/20',\n      },\n      {\n        variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n        color: LinkColor.SUCCESS,\n        class: 'ring-success/20',\n      },\n    ],\n\n    defaultVariants: {\n      variant: LinkVariant.DEFAULT,\n      roundedSize: LinkRoundedSize.MD,\n      underlined: LinkUnderlined.DEFAULT,\n      size: LinkSize.MD,\n    },\n  }\n);\n\nexport type LinkProps = DetailedHTMLProps<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  HTMLAnchorElement\n> &\n  VariantProps<typeof linkVariants> & {\n    label: string;\n    isExternalLink?: boolean;\n    isPageSection?: boolean;\n    isActive?: boolean;\n    locale?: LocalesValues;\n  };\n\nexport const checkIsExternalLink = ({\n  href,\n  isExternalLink: isExternalLinkProp,\n}: Pick<LinkProps, 'href' | 'isExternalLink'>): boolean => {\n  const isValidHref = typeof href === 'string' && href.trim() !== '';\n  const isExternalLink =\n    isExternalLinkProp === true ||\n    (typeof isExternalLinkProp === 'undefined' &&\n      isValidHref &&\n      /^https?:\\/\\//.test(href));\n\n  return isExternalLink;\n};\n\nexport const isTextChildren = (children: ReactNode): boolean => {\n  if (typeof children === 'string' || typeof children === 'number') {\n    return true;\n  }\n  if (Array.isArray(children)) {\n    return children.every(isTextChildren);\n  }\n  if (isValidElement(children)) {\n    return isTextChildren(\n      (children.props as { children?: ReactNode }).children\n    );\n  }\n  return false;\n};\n\nexport const Link: FC<LinkProps> = (props) => {\n  const {\n    variant = LinkVariant.DEFAULT,\n    color = LinkColor.CUSTOM,\n    roundedSize,\n    children,\n    label,\n    className,\n    isActive,\n    underlined,\n    locale,\n    size,\n    isExternalLink: isExternalLinkProp,\n    isPageSection: isPageSectionProp,\n    href: hrefProp,\n    ...otherProps\n  } = props;\n\n  const isExternalLink = isExternalLinkProp ?? checkIsExternalLink(props);\n  const isPageSection = isPageSectionProp ?? hrefProp?.startsWith('#') ?? false;\n\n  const isChildrenString = isTextChildren(children);\n  const isButton =\n    variant === LinkVariant.BUTTON || variant === LinkVariant.BUTTON_OUTLINED;\n\n  const rel = isExternalLink ? 'noopener noreferrer nofollow' : undefined;\n\n  const target = isExternalLink ? '_blank' : '_self';\n\n  const resolvedHref =\n    locale && hrefProp && !isExternalLink && !isPageSection\n      ? getLocalizedUrl(hrefProp, locale)\n      : hrefProp;\n\n  const href = resolvedHref === '' ? undefined : resolvedHref;\n\n  return (\n    <a\n      href={href}\n      aria-label={label}\n      rel={rel}\n      target={target}\n      aria-current={isActive ? 'page' : undefined}\n      suppressHydrationWarning\n      className={cn(\n        linkVariants({\n          variant,\n          color,\n          roundedSize,\n          underlined,\n          size,\n          className,\n        })\n      )}\n      {...otherProps}\n    >\n      {isButton && isChildrenString ? <span>{children}</span> : children}\n\n      {isExternalLink && isChildrenString && (\n        <ExternalLink className=\"ml-2 inline-block size-4\" />\n      )}\n      {isPageSection && <MoveRight className=\"ml-2 inline-block size-4\" />}\n    </a>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAgBA,IAAY,cAAL;CACL;CACA;CACA;CACA;CACA;;AACF;;;;AAKA,IAAY,YAAL;CACL;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;;AACF;AAEA,IAAY,kBAAL;CACL;CACA;CACA;CACA;CACA;CACA;CACA;CACA;;AACF;AAEA,IAAY,WAAL;CACL;CACA;CACA;CACA;CACA;;AACF;AAEA,IAAY,iBAAL;CACL;CACA;CACA;;AACF;AAEA,MAAa,eAAe,IAC1B,iHACA;CACE,UAAU;EACR,SAAS;IACN,YACC;IACD,mBACC;IAED,WACC;IAED,oBACC;IAED,cACC;EACJ;EACA,aAAa;IACV,SAA4B;IAC5B,OACC;IACD,OACC;IACD,OACC;IACD,OACC;IACD,QACC;IACD,QACC;IACD,SAA4B;EAC/B;EACA,OAAO;IACJ,YAAyB;IACzB,cAA2B;IAC3B,YAAyB;IACzB,UAAuB;IACvB,SAAsB;IACtB,SAAsB;IACtB,iBAA8B;IAC9B,UAAuB;IACvB,YAAyB;IACzB,WAAwB;EAC3B;EACA,MAAM;IACH,OAAmB;IACnB,OAAmB;IACnB,OAAmB;IACnB,OAAmB;IACnB,WAAuB;EAC1B;EACA,YAAY;gBACgB;aACH;cACC;EAC1B;CACF;CAEA,kBAAkB;EAIhB;GAIE;GACA;GACA,OAAO;EACT;EACA;GAIE;GACA;GACA,OAAO;EACT;EAGA;GACE,SAAS,4BAAgD;GACzD;GACA,OAAO;EACT;EACA;GACE,SAAS,4BAAgD;GACzD;GACA,OAAO;EACT;EACA;GACE,SAAS,4BAAgD;GACzD;GACA,OAAO;EACT;EACA;GACE,SAAS,4BAAgD;GACzD;GACA,OAAO;EACT;EAEA;GACE,SAAS,4BAAgD;GACzD;GACA,OAAO;EACT;EACA;GACE,SAAS,4BAAgD;GACzD;GACA,OAAO;EACT;EACA;GACE,SAAS,4BAAgD;GACzD;GACA,OAAO;EACT;EACA;GACE,SAAS,4BAAgD;GACzD;GACA,OAAO;EACT;EACA;GACE,SAAS,4BAAgD;GACzD;GACA,OAAO;EACT;EACA;GACE,SAAS,4BAAgD;GACzD;GACA,OAAO;EACT;EACA;GACE,SAAS,4BAAgD;GACzD;GACA,OAAO;EACT;EACA;GACE,SAAS,4BAAgD;GACzD;GACA,OAAO;EACT;EACA;GACE,SAAS,4BAAgD;GACzD;GACA,OAAO;EACT;CACF;CAEA,iBAAiB;EACf;EACA;EACA;EACA;CACF;AACF,CACF;AAcA,MAAa,uBAAuB,EAClC,MACA,gBAAgB,yBACyC;CACzD,MAAM,cAAc,OAAO,SAAS,YAAY,KAAK,KAAK,MAAM;CAOhE,OALE,uBAAuB,QACtB,OAAO,uBAAuB,eAC7B,eACA,eAAe,KAAK,IAAI;AAG9B;AAEA,MAAa,kBAAkB,aAAiC;CAC9D,IAAI,OAAO,aAAa,YAAY,OAAO,aAAa,UACtD,OAAO;CAET,IAAI,MAAM,QAAQ,QAAQ,GACxB,OAAO,SAAS,MAAM,cAAc;CAEtC,IAAI,eAAe,QAAQ,GACzB,OAAO,eACJ,SAAS,MAAmC,QAC/C;CAEF,OAAO;AACT;AAEA,MAAa,QAAuB,UAAU;CAC5C,MAAM,EACJ,qBACA,kBACA,aACA,UACA,OACA,WACA,UACA,YACA,QACA,MACA,gBAAgB,oBAChB,eAAe,mBACf,MAAM,UACN,GAAG,eACD;CAEJ,MAAM,iBAAiB,sBAAsB,oBAAoB,KAAK;CACtE,MAAM,gBAAgB,qBAAqB,UAAU,WAAW,GAAG,KAAK;CAExE,MAAM,mBAAmB,eAAe,QAAQ;CAChD,MAAM,WACJ,wBAAkC;CAEpC,MAAM,MAAM,iBAAiB,iCAAiC;CAE9D,MAAM,SAAS,iBAAiB,WAAW;CAE3C,MAAM,eACJ,UAAU,YAAY,CAAC,kBAAkB,CAAC,gBACtC,gBAAgB,UAAU,MAAM,IAChC;CAIN,OACE,qBAAC,KAAD;EACE,MAJS,iBAAiB,KAAK,SAAY;EAK3C,cAAY;EACP;EACG;EACR,gBAAc,WAAW,SAAS;EAClC;EACA,WAAW,GACT,aAAa;GACX;GACA;GACA;GACA;GACA;GACA;EACF,CAAC,CACH;EACA,GAAI;YAjBN;GAmBG,YAAY,mBAAmB,oBAAC,QAAD,EAAO,SAAe,KAAI;GAEzD,kBAAkB,oBACjB,oBAAC,cAAD,EAAc,WAAU,2BAA4B;GAErD,iBAAiB,oBAAC,WAAD,EAAW,WAAU,2BAA4B;EAClE;;AAEP"}

package/dist/esm/components/Pagination/Pagination.mjs

@@ -21,8 +21,7 @@ const paginationVariants = cva("flex items-center justify-center gap-1", {
 			text: "background-text",
 			primary: "background-primary",
 			secondary: "background-secondary",
-			neutral: "background-neutral",
-			destructive: "background-destructive"
+			neutral: "background-neutral"
 		},
 		variant: {
 			default: "",

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.mjs","names":[],"sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["'use client';\n\nimport { useItemSelector } from '@hooks/useItemSelector';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';\nimport {\n  type ComponentProps,\n  type FC,\n  type HTMLAttributes,\n  useEffect,\n  useRef,\n} from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\n\nexport const paginationVariants = cva(\n  'flex items-center justify-center gap-1',\n  {\n    variants: {\n      size: {\n        sm: 'gap-1',\n        md: 'gap-2',\n        lg: 'gap-3',\n      },\n      color: {\n        text: 'background-text',\n        primary: 'background-primary',\n        secondary: 'background-secondary',\n        neutral: 'background-neutral',\n        destructive: 'background-destructive',\n      },\n      variant: {\n        default: '',\n        bordered: 'rounded-lg border border-border p-2',\n        ghost: 'bg-transparent',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      variant: 'default',\n    },\n  }\n);\n\nexport enum PaginationSize {\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n}\n\nexport enum PaginationVariant {\n  DEFAULT = 'default',\n  BORDERED = 'bordered',\n  GHOST = 'ghost',\n}\n\nexport type PaginationProps = HTMLAttributes<HTMLDivElement> &\n  VariantProps<typeof paginationVariants> & {\n    currentPage: number;\n    totalPages: number;\n    onPageChange: (page: number) => void;\n    showFirstLast?: boolean;\n    showPrevNext?: boolean;\n    maxVisiblePages?: number;\n    disabled?: boolean;\n  };\n\nconst generatePageNumbers = (\n  currentPage: number,\n  totalPages: number,\n  maxVisiblePages: number\n): (number | 'ellipsis')[] => {\n  if (totalPages <= maxVisiblePages) {\n    return Array.from({ length: totalPages }, (_, i) => i + 1);\n  }\n\n  const pages: (number | 'ellipsis')[] = [];\n  const halfVisible = Math.floor(maxVisiblePages / 2);\n\n  pages.push(1);\n\n  if (currentPage <= halfVisible + 2) {\n    for (let i = 2; i <= Math.min(maxVisiblePages - 1, totalPages - 1); i++) {\n      pages.push(i);\n    }\n    if (totalPages > maxVisiblePages) {\n      pages.push('ellipsis');\n    }\n    if (totalPages > 1) {\n      pages.push(totalPages);\n    }\n  } else if (currentPage >= totalPages - halfVisible - 1) {\n    if (totalPages > maxVisiblePages) {\n      pages.push('ellipsis');\n    }\n    for (\n      let i = Math.max(2, totalPages - maxVisiblePages + 2);\n      i <= totalPages;\n      i++\n    ) {\n      pages.push(i);\n    }\n  } else {\n    pages.push('ellipsis');\n    const start = currentPage - halfVisible;\n    const end = currentPage + halfVisible;\n    for (let i = start; i <= end; i++) {\n      pages.push(i);\n    }\n    pages.push('ellipsis');\n    pages.push(totalPages);\n  }\n\n  return pages;\n};\n\nconst selector = (option: HTMLElement) =>\n  option?.getAttribute('aria-current') === 'true';\n\nconst getButtonSize = (size?: PaginationSize | `${PaginationSize}` | null) => {\n  if (size === PaginationSize.SM) {\n    return ButtonSize.ICON_SM;\n  } else if (size === PaginationSize.LG) {\n    return ButtonSize.ICON_LG;\n  } else {\n    return ButtonSize.ICON_MD;\n  }\n};\n\nconst InputIndicator: FC<ComponentProps<'div'>> = (props) => (\n  <div\n    className=\"absolute top-0 z-0 h-full w-auto rounded-xl bg-text/20 ring-4 ring-text/10 transition-[left,width] duration-300 ease-in-out [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl motion-reduce:transition-none\"\n    {...props}\n  />\n);\n\nexport const Pagination: FC<PaginationProps> = ({\n  currentPage,\n  totalPages,\n  onPageChange,\n  showFirstLast = false,\n  showPrevNext = true,\n  maxVisiblePages = 5,\n  disabled = false,\n  size = PaginationSize.MD,\n  variant = PaginationVariant.DEFAULT,\n  color = ButtonColor.TEXT,\n  className,\n  ...props\n}) => {\n  const { goToNextPage, goToPreviousPage } = useIntlayer('pagination');\n\n  const pageNumbers = generatePageNumbers(\n    currentPage,\n    totalPages,\n    maxVisiblePages\n  );\n\n  const buttonSize = getButtonSize(size);\n  const isFirstPage = currentPage === 1;\n  const isLastPage = currentPage === totalPages;\n\n  const optionsRefs = useRef<HTMLElement[]>([]);\n  const indicatorRef = useRef<HTMLDivElement | null>(null);\n  const { choiceIndicatorPosition, calculatePosition } = useItemSelector(\n    optionsRefs,\n    {\n      selector,\n      isHoverable: true,\n    }\n  );\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      calculatePosition();\n    }, 300);\n\n    return () => clearTimeout(timer);\n  }, [currentPage, calculatePosition]);\n\n  if (totalPages <= 1) return null;\n\n  const handlePageChange = (page: number) => {\n    if (!disabled && page >= 1 && page <= totalPages && page !== currentPage) {\n      onPageChange(page);\n    }\n  };\n\n  return (\n    <div\n      className={cn(paginationVariants({ size, variant }), className)}\n      {...props}\n    >\n      <div className=\"relative flex items-center gap-1\">\n        {choiceIndicatorPosition && (\n          <InputIndicator style={choiceIndicatorPosition} ref={indicatorRef} />\n        )}\n\n        {showPrevNext && (\n          <Button\n            variant={ButtonVariant.OUTLINE}\n            size={buttonSize}\n            color={ButtonColor.TEXT}\n            onClick={() => handlePageChange(currentPage - 1)}\n            disabled={disabled || isFirstPage}\n            label={goToPreviousPage.value}\n            Icon={ChevronLeft}\n            ref={(el) => {\n              if (el) optionsRefs.current[0] = el;\n            }}\n            className=\"min-w-0 px-2\"\n          />\n        )}\n\n        <div className=\"flex items-center gap-1 max-md:gap-0.5\">\n          {pageNumbers.map((page, index) => {\n            if (page === 'ellipsis') {\n              const isFirstEllipsis = index === pageNumbers.indexOf('ellipsis');\n              const ellipsisKey = isFirstEllipsis\n                ? 'ellipsis-start'\n                : 'ellipsis-end';\n              return (\n                <div\n                  key={ellipsisKey}\n                  className=\"flex h-8 min-w-8 items-center justify-center px-1\"\n                >\n                  <MoreHorizontal className=\"h-4 w-4 text-muted-foreground\" />\n                </div>\n              );\n            }\n\n            const isActive = page === currentPage;\n            // Calculate ref index: offset by 1 if showPrevNext, then count only non-ellipsis items\n            const refIndex =\n              (showPrevNext ? 1 : 0) +\n              pageNumbers.slice(0, index).filter((p) => p !== 'ellipsis')\n                .length;\n\n            return (\n              <Button\n                key={page}\n                variant={\n                  isActive ? ButtonVariant.DEFAULT : ButtonVariant.OUTLINE\n                }\n                size={buttonSize}\n                color={ButtonColor.TEXT}\n                onClick={() => handlePageChange(page)}\n                disabled={disabled}\n                label={`Go to page ${page}`}\n                aria-current={isActive ? 'true' : 'false'}\n                ref={(el) => {\n                  if (el) optionsRefs.current[refIndex] = el;\n                }}\n                className={cn(\n                  'flex aspect-square h-8 w-8 min-w-0 items-center justify-center p-0 text-sm',\n                  size === 'sm' && 'h-6 w-6 text-xs',\n                  size === 'lg' && 'size-10 text-base',\n                  isActive && 'font-semibold'\n                )}\n              >\n                {page}\n              </Button>\n            );\n          })}\n        </div>\n\n        {showPrevNext && (\n          <Button\n            variant={ButtonVariant.OUTLINE}\n            size={buttonSize}\n            color={ButtonColor.TEXT}\n            onClick={() => handlePageChange(currentPage + 1)}\n            disabled={disabled || isLastPage}\n            label={goToNextPage.value}\n            Icon={ChevronRight}\n            ref={(el) => {\n              const lastRefIndex =\n                (showPrevNext ? 1 : 0) +\n                pageNumbers.filter((p) => p !== 'ellipsis').length;\n              if (el) optionsRefs.current[lastRefIndex] = el;\n            }}\n            className=\"min-w-0 px-2\"\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Pagination.mjs","names":[],"sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["'use client';\n\nimport { useItemSelector } from '@hooks/useItemSelector';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';\nimport {\n  type ComponentProps,\n  type FC,\n  type HTMLAttributes,\n  useEffect,\n  useRef,\n} from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\n\nexport const paginationVariants = cva(\n  'flex items-center justify-center gap-1',\n  {\n    variants: {\n      size: {\n        sm: 'gap-1',\n        md: 'gap-2',\n        lg: 'gap-3',\n      },\n      color: {\n        text: 'background-text',\n        primary: 'background-primary',\n        secondary: 'background-secondary',\n        neutral: 'background-neutral',\n      },\n      variant: {\n        default: '',\n        bordered: 'rounded-lg border border-border p-2',\n        ghost: 'bg-transparent',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      variant: 'default',\n    },\n  }\n);\n\nexport enum PaginationSize {\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n}\n\nexport enum PaginationVariant {\n  DEFAULT = 'default',\n  BORDERED = 'bordered',\n  GHOST = 'ghost',\n}\n\nexport type PaginationProps = HTMLAttributes<HTMLDivElement> &\n  VariantProps<typeof paginationVariants> & {\n    currentPage: number;\n    totalPages: number;\n    onPageChange: (page: number) => void;\n    showFirstLast?: boolean;\n    showPrevNext?: boolean;\n    maxVisiblePages?: number;\n    disabled?: boolean;\n  };\n\nconst generatePageNumbers = (\n  currentPage: number,\n  totalPages: number,\n  maxVisiblePages: number\n): (number | 'ellipsis')[] => {\n  if (totalPages <= maxVisiblePages) {\n    return Array.from({ length: totalPages }, (_, i) => i + 1);\n  }\n\n  const pages: (number | 'ellipsis')[] = [];\n  const halfVisible = Math.floor(maxVisiblePages / 2);\n\n  pages.push(1);\n\n  if (currentPage <= halfVisible + 2) {\n    for (let i = 2; i <= Math.min(maxVisiblePages - 1, totalPages - 1); i++) {\n      pages.push(i);\n    }\n    if (totalPages > maxVisiblePages) {\n      pages.push('ellipsis');\n    }\n    if (totalPages > 1) {\n      pages.push(totalPages);\n    }\n  } else if (currentPage >= totalPages - halfVisible - 1) {\n    if (totalPages > maxVisiblePages) {\n      pages.push('ellipsis');\n    }\n    for (\n      let i = Math.max(2, totalPages - maxVisiblePages + 2);\n      i <= totalPages;\n      i++\n    ) {\n      pages.push(i);\n    }\n  } else {\n    pages.push('ellipsis');\n    const start = currentPage - halfVisible;\n    const end = currentPage + halfVisible;\n    for (let i = start; i <= end; i++) {\n      pages.push(i);\n    }\n    pages.push('ellipsis');\n    pages.push(totalPages);\n  }\n\n  return pages;\n};\n\nconst selector = (option: HTMLElement) =>\n  option?.getAttribute('aria-current') === 'true';\n\nconst getButtonSize = (size?: PaginationSize | `${PaginationSize}` | null) => {\n  if (size === PaginationSize.SM) {\n    return ButtonSize.ICON_SM;\n  } else if (size === PaginationSize.LG) {\n    return ButtonSize.ICON_LG;\n  } else {\n    return ButtonSize.ICON_MD;\n  }\n};\n\nconst InputIndicator: FC<ComponentProps<'div'>> = (props) => (\n  <div\n    className=\"absolute top-0 z-0 h-full w-auto rounded-xl bg-text/20 ring-4 ring-text/10 transition-[left,width] duration-300 ease-in-out [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl motion-reduce:transition-none\"\n    {...props}\n  />\n);\n\nexport const Pagination: FC<PaginationProps> = ({\n  currentPage,\n  totalPages,\n  onPageChange,\n  showFirstLast = false,\n  showPrevNext = true,\n  maxVisiblePages = 5,\n  disabled = false,\n  size = PaginationSize.MD,\n  variant = PaginationVariant.DEFAULT,\n  color = ButtonColor.TEXT,\n  className,\n  ...props\n}) => {\n  const { goToNextPage, goToPreviousPage } = useIntlayer('pagination');\n\n  const pageNumbers = generatePageNumbers(\n    currentPage,\n    totalPages,\n    maxVisiblePages\n  );\n\n  const buttonSize = getButtonSize(size);\n  const isFirstPage = currentPage === 1;\n  const isLastPage = currentPage === totalPages;\n\n  const optionsRefs = useRef<HTMLElement[]>([]);\n  const indicatorRef = useRef<HTMLDivElement | null>(null);\n  const { choiceIndicatorPosition, calculatePosition } = useItemSelector(\n    optionsRefs,\n    {\n      selector,\n      isHoverable: true,\n    }\n  );\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      calculatePosition();\n    }, 300);\n\n    return () => clearTimeout(timer);\n  }, [currentPage, calculatePosition]);\n\n  if (totalPages <= 1) return null;\n\n  const handlePageChange = (page: number) => {\n    if (!disabled && page >= 1 && page <= totalPages && page !== currentPage) {\n      onPageChange(page);\n    }\n  };\n\n  return (\n    <div\n      className={cn(paginationVariants({ size, variant }), className)}\n      {...props}\n    >\n      <div className=\"relative flex items-center gap-1\">\n        {choiceIndicatorPosition && (\n          <InputIndicator style={choiceIndicatorPosition} ref={indicatorRef} />\n        )}\n\n        {showPrevNext && (\n          <Button\n            variant={ButtonVariant.OUTLINE}\n            size={buttonSize}\n            color={ButtonColor.TEXT}\n            onClick={() => handlePageChange(currentPage - 1)}\n            disabled={disabled || isFirstPage}\n            label={goToPreviousPage.value}\n            Icon={ChevronLeft}\n            ref={(el) => {\n              if (el) optionsRefs.current[0] = el;\n            }}\n            className=\"min-w-0 px-2\"\n          />\n        )}\n\n        <div className=\"flex items-center gap-1 max-md:gap-0.5\">\n          {pageNumbers.map((page, index) => {\n            if (page === 'ellipsis') {\n              const isFirstEllipsis = index === pageNumbers.indexOf('ellipsis');\n              const ellipsisKey = isFirstEllipsis\n                ? 'ellipsis-start'\n                : 'ellipsis-end';\n              return (\n                <div\n                  key={ellipsisKey}\n                  className=\"flex h-8 min-w-8 items-center justify-center px-1\"\n                >\n                  <MoreHorizontal className=\"h-4 w-4 text-muted-foreground\" />\n                </div>\n              );\n            }\n\n            const isActive = page === currentPage;\n            // Calculate ref index: offset by 1 if showPrevNext, then count only non-ellipsis items\n            const refIndex =\n              (showPrevNext ? 1 : 0) +\n              pageNumbers.slice(0, index).filter((p) => p !== 'ellipsis')\n                .length;\n\n            return (\n              <Button\n                key={page}\n                variant={\n                  isActive ? ButtonVariant.DEFAULT : ButtonVariant.OUTLINE\n                }\n                size={buttonSize}\n                color={ButtonColor.TEXT}\n                onClick={() => handlePageChange(page)}\n                disabled={disabled}\n                label={`Go to page ${page}`}\n                aria-current={isActive ? 'true' : 'false'}\n                ref={(el) => {\n                  if (el) optionsRefs.current[refIndex] = el;\n                }}\n                className={cn(\n                  'flex aspect-square h-8 w-8 min-w-0 items-center justify-center p-0 text-sm',\n                  size === 'sm' && 'h-6 w-6 text-xs',\n                  size === 'lg' && 'size-10 text-base',\n                  isActive && 'font-semibold'\n                )}\n              >\n                {page}\n              </Button>\n            );\n          })}\n        </div>\n\n        {showPrevNext && (\n          <Button\n            variant={ButtonVariant.OUTLINE}\n            size={buttonSize}\n            color={ButtonColor.TEXT}\n            onClick={() => handlePageChange(currentPage + 1)}\n            disabled={disabled || isLastPage}\n            label={goToNextPage.value}\n            Icon={ChevronRight}\n            ref={(el) => {\n              const lastRefIndex =\n                (showPrevNext ? 1 : 0) +\n                pageNumbers.filter((p) => p !== 'ellipsis').length;\n              if (el) optionsRefs.current[lastRefIndex] = el;\n            }}\n            className=\"min-w-0 px-2\"\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -17,7 +17,6 @@ const defaultChoices = [{
 let SwitchSelectorColor = /* @__PURE__ */ function(SwitchSelectorColor) {
 	SwitchSelectorColor["PRIMARY"] = "primary";
 	SwitchSelectorColor["SECONDARY"] = "secondary";
-	SwitchSelectorColor["DESTRUCTIVE"] = "destructive";
 	SwitchSelectorColor["NEUTRAL"] = "neutral";
 	SwitchSelectorColor["LIGHT"] = "light";
 	SwitchSelectorColor["DARK"] = "dark";
@@ -36,7 +35,6 @@ const switchSelectorVariant = cva("flex h-fit w-fit cursor-pointer flex-row gap-
 		color: {
 			[`primary`]: "border-primary text-primary",
 			[`secondary`]: "border-secondary text-secondary",
-			[`destructive`]: "border-destructive bg-destructive text-destructive",
 			[`neutral`]: "border-neutral text-neutral",
 			[`light`]: "border-white text-white",
 			[`dark`]: "border-neutral-800 text-neutral-800",
@@ -48,7 +46,7 @@ const switchSelectorVariant = cva("flex h-fit w-fit cursor-pointer flex-row gap-
 		}
 	},
 	defaultVariants: {
-		color: `primary`,
+		color: `text`,
 		disabled: false
 	}
 });
@@ -64,7 +62,7 @@ const choiceVariant = cva("z-1 flex-1 cursor-pointer font-medium text-sm transit
 const indicatorVariant = cva("absolute top-0 z-0 h-full w-auto rounded-full transition-all duration-300 ease-in-out motion-reduce:transition-none", { variants: { color: {
 	[`primary`]: "bg-primary data-[indicator=true]:text-text",
 	[`secondary`]: "bg-secondary data-[indicator=true]:text-text",
-	[`destructive`]: "bg-destructive data-[indicator=true]:text-text",
+	[`${SwitchSelectorColor.ERROR}`]: "bg-error data-[indicator=true]:text-text",
 	[`neutral`]: "bg-neutral data-[indicator=true]:text-white",
 	[`light`]: "bg-white data-[indicator=true]:text-black",
 	[`dark`]: "bg-neutral-800 data-[indicator=true]:text-white",
@@ -75,7 +73,7 @@ const indicatorVariant = cva("absolute top-0 z-0 h-full w-auto rounded-full tran
 * This component is horizontal.
 */
 const SwitchSelector = (props) => {
-	const { choices = defaultChoices, color = "primary", size = "md", className, itemClassName, ...baseProps } = props;
+	const { choices = defaultChoices, color = "primary", size = "md", className, itemClassName } = props;
 	const { selectedIndex, indicatorIndex, handleChange, optionsRefs, indicatorRef, choiceIndicatorPosition, setHoveredIndex, disabled } = useSwitchSelector({
 		choices,
 		value: props.value,

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

@@ -1 +1 @@
-{"version":3,"file":"SwitchSelector.mjs","names":[],"sources":["../../../../src/components/SwitchSelector/SwitchSelector.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { useSwitchSelector } from './useSwitchSelector';\n\nexport type SwitchSelectorChoice<T = boolean> = {\n  content: ReactNode;\n  value: T;\n} & HTMLAttributes<HTMLButtonElement>;\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nexport const defaultChoices: SwitchSelectorChoices<boolean> = [\n  { content: 'Off', value: false },\n  { content: 'On', value: true },\n];\n\nexport 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\nexport enum SwitchSelectorSize {\n  XS = 'xs',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n}\n\nexport type SwitchSelectorBaseProps<T = boolean> = {\n  choices?: SwitchSelectorChoices<T>;\n  value?: T;\n  defaultValue?: T;\n  onChange?: (choice: T) => void;\n  className?: string;\n  itemClassName?: string;\n  hoverable?: boolean;\n  disabled?: boolean;\n  [key: string]: any;\n};\n\nexport type SwitchSelectorProps<T = boolean> = SwitchSelectorBaseProps<T> &\n  VariantProps<typeof switchSelectorVariant> &\n  VariantProps<typeof choiceVariant>;\n\nexport const switchSelectorVariant = cva(\n  'flex h-fit w-fit cursor-pointer flex-row gap-2 rounded-full border-[1.3px] p-[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 const choiceVariant = cva(\n  'z-1 flex-1 cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default data-[indicator=true]:text-text-opposite motion-reduce:transition-none',\n  {\n    variants: {\n      size: {\n        [`${SwitchSelectorSize.XS}`]: 'px-2 py-0.5 text-xs',\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\nexport const indicatorVariant = cva(\n  'absolute top-0 z-0 h-full w-auto rounded-full transition-all duration-300 ease-in-out motion-reduce:transition-none',\n  {\n    variants: {\n      color: {\n        [`${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 * Component that allows the user to select one of the provided choices.\n * This component is horizontal.\n */\nexport const SwitchSelector = <T,>(props: SwitchSelectorProps<T>) => {\n  const {\n    choices = defaultChoices as SwitchSelectorChoices<T>,\n    color = SwitchSelectorColor.PRIMARY,\n    size = SwitchSelectorSize.MD,\n    className,\n    itemClassName,\n    ...baseProps\n  } = props;\n\n  const {\n    selectedIndex,\n    indicatorIndex,\n    handleChange,\n    optionsRefs,\n    indicatorRef,\n    choiceIndicatorPosition,\n    setHoveredIndex,\n    disabled,\n  } = useSwitchSelector(\n    {\n      choices,\n      value: props.value,\n      defaultValue: props.defaultValue,\n      onChange: props.onChange,\n      hoverable: props.hoverable,\n      disabled: props.disabled,\n    },\n    'horizontal'\n  );\n\n  return (\n    <div\n      className={switchSelectorVariant({\n        color,\n        disabled,\n        className,\n      })}\n      role=\"tablist\"\n      aria-disabled={disabled ? 'true' : undefined}\n    >\n      <div className=\"relative flex h-full w-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}\n              tabIndex={isSelected ? 0 : -1}\n              ref={(el) => {\n                optionsRefs.current[index] = el!;\n              }}\n              onMouseEnter={() => !disabled && setHoveredIndex(index)}\n              onMouseLeave={() => !disabled && setHoveredIndex(null)}\n            >\n              {content}\n            </button>\n          );\n        })}\n\n        {choiceIndicatorPosition && (\n          <div\n            className={cn(\n              indicatorVariant({\n                color,\n              })\n            )}\n            style={choiceIndicatorPosition}\n            ref={indicatorRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAaA,MAAa,iBAAiD,CAC5D;CAAE,SAAS;CAAO,OAAO;AAAM,GAC/B;CAAE,SAAS;CAAM,OAAO;AAAK,CAC/B;AAEA,IAAY,sBAAL;CACL;CACA;CACA;CACA;CACA;CACA;CACA;;AACF;AAEA,IAAY,qBAAL;CACL;CACA;CACA;CACA;;AACF;AAkBA,MAAa,wBAAwB,IACnC,wFACA;CACE,UAAU;EACR,OAAO;IACJ,YAAmC;IACnC,cAAqC;IACrC,gBACC;IACD,YAAmC;IACnC,UAAiC;IACjC,SAAgC;IAChC,SAAgC;EACnC;EACA,UAAU;GACR,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,OAAO;EACP,UAAU;CACZ;AACF,CACF;AAEA,MAAa,gBAAgB,IAC3B,6LACA;CACE,UAAU,EACR,MAAM;GACH,OAA6B;GAC7B,OAA6B;GAC7B,OAA6B;GAC7B,OAA6B;CAChC,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF;AAEA,MAAa,mBAAmB,IAC9B,uHACA,EACE,UAAU,EACR,OAAO;EACJ,YACC;EACD,cACC;EACD,gBACC;EACD,YACC;EACD,UACC;EACD,SACC;EACD,SACC;AACJ,EACF,EACF,CACF;;;;;AAMA,MAAa,kBAAsB,UAAkC;CACnE,MAAM,EACJ,UAAU,gBACV,mBACA,aACA,WACA,eACA,GAAG,cACD;CAEJ,MAAM,EACJ,eACA,gBACA,cACA,aACA,cACA,yBACA,iBACA,aACE,kBACF;EACE;EACA,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,UAAU,MAAM;EAChB,WAAW,MAAM;EACjB,UAAU,MAAM;CAClB,GACA,YACF;CAEA,OACE,oBAAC,OAAD;EACE,WAAW,sBAAsB;GAC/B;GACA;GACA;EACF,CAAC;EACD,MAAK;EACL,iBAAe,WAAW,SAAS;YAEnC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,QAAQ,KAAK,QAAQ,UAAU;IAC9B,MAAM,EAAE,SAAS,OAAO,GAAG,gBAAgB;IAE3C,MAAM,aACJ,OAAO,UAAU,YAAY,OAAO,UAAU;IAEhD,MAAM,aAAa,UAAU;IAC7B,MAAM,mBAAmB,UAAU;IAEnC,OACE,8BAAC,UAAD;KACE,GAAI;KACJ,WAAW,GACT,cAAc,EACZ,KACF,CAAC,GACD,YAAY,sBACZ,aACF;KACA,KAAK,aAAa,QAAQ;KAC1B,MAAK;KACL,eAAe,aAAa,KAAK;KACjC,iBAAe,aAAa,SAAS;KACrC,kBAAgB,mBAAmB,SAAS;KAClC;KACV,UAAU,aAAa,IAAI;KAC3B,MAAM,OAAO;MACX,YAAY,QAAQ,SAAS;KAC/B;KACA,oBAAoB,CAAC,YAAY,gBAAgB,KAAK;KACtD,oBAAoB,CAAC,YAAY,gBAAgB,IAAI;IAG/C,GADL,OACK;GAEZ,CAAC,GAEA,2BACC,oBAAC,OAAD;IACE,WAAW,GACT,iBAAiB,EACf,MACF,CAAC,CACH;IACA,OAAO;IACP,KAAK;GACN,EAEA;;CACF;AAET"}
+{"version":3,"file":"SwitchSelector.mjs","names":[],"sources":["../../../../src/components/SwitchSelector/SwitchSelector.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { useSwitchSelector } from './useSwitchSelector';\n\nexport type SwitchSelectorChoice<T = boolean> = {\n  content: ReactNode;\n  value: T;\n} & HTMLAttributes<HTMLButtonElement>;\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nexport const defaultChoices: SwitchSelectorChoices<boolean> = [\n  { content: 'Off', value: false },\n  { content: 'On', value: true },\n];\n\nexport enum SwitchSelectorColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  DARK = 'dark',\n  TEXT = 'text',\n}\n\nexport enum SwitchSelectorSize {\n  XS = 'xs',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n}\n\nexport type SwitchSelectorBaseProps<T = boolean> = {\n  choices?: SwitchSelectorChoices<T>;\n  value?: T;\n  defaultValue?: T;\n  onChange?: (choice: T) => void;\n  className?: string;\n  itemClassName?: string;\n  hoverable?: boolean;\n  disabled?: boolean;\n  [key: string]: any;\n};\n\nexport type SwitchSelectorProps<T = boolean> = SwitchSelectorBaseProps<T> &\n  VariantProps<typeof switchSelectorVariant> &\n  VariantProps<typeof choiceVariant>;\n\nexport const switchSelectorVariant = cva(\n  'flex h-fit w-fit cursor-pointer flex-row gap-2 rounded-full border-[1.3px] p-[1.5px]',\n  {\n    variants: {\n      color: {\n        [`${SwitchSelectorColor.PRIMARY}`]: 'border-primary text-primary',\n        [`${SwitchSelectorColor.SECONDARY}`]: 'border-secondary text-secondary',\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.TEXT}`,\n      disabled: false,\n    },\n  }\n);\n\nexport const choiceVariant = cva(\n  'z-1 flex-1 cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default data-[indicator=true]:text-text-opposite motion-reduce:transition-none',\n  {\n    variants: {\n      size: {\n        [`${SwitchSelectorSize.XS}`]: 'px-2 py-0.5 text-xs',\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\nexport const indicatorVariant = cva(\n  'absolute top-0 z-0 h-full w-auto rounded-full transition-all duration-300 ease-in-out motion-reduce:transition-none',\n  {\n    variants: {\n      color: {\n        [`${SwitchSelectorColor.PRIMARY}`]:\n          'bg-primary data-[indicator=true]:text-text',\n        [`${SwitchSelectorColor.SECONDARY}`]:\n          'bg-secondary data-[indicator=true]:text-text',\n        [`${SwitchSelectorColor.ERROR}`]:\n          'bg-error 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 * Component that allows the user to select one of the provided choices.\n * This component is horizontal.\n */\nexport const SwitchSelector = <T,>(props: SwitchSelectorProps<T>) => {\n  const {\n    choices = defaultChoices as SwitchSelectorChoices<T>,\n    color = SwitchSelectorColor.PRIMARY,\n    size = SwitchSelectorSize.MD,\n    className,\n    itemClassName,\n  } = props;\n\n  const {\n    selectedIndex,\n    indicatorIndex,\n    handleChange,\n    optionsRefs,\n    indicatorRef,\n    choiceIndicatorPosition,\n    setHoveredIndex,\n    disabled,\n  } = useSwitchSelector(\n    {\n      choices,\n      value: props.value,\n      defaultValue: props.defaultValue,\n      onChange: props.onChange,\n      hoverable: props.hoverable,\n      disabled: props.disabled,\n    },\n    'horizontal'\n  );\n\n  return (\n    <div\n      className={switchSelectorVariant({\n        color,\n        disabled,\n        className,\n      })}\n      role=\"tablist\"\n      aria-disabled={disabled ? 'true' : undefined}\n    >\n      <div className=\"relative flex h-full w-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}\n              tabIndex={isSelected ? 0 : -1}\n              ref={(el) => {\n                optionsRefs.current[index] = el!;\n              }}\n              onMouseEnter={() => !disabled && setHoveredIndex(index)}\n              onMouseLeave={() => !disabled && setHoveredIndex(null)}\n            >\n              {content}\n            </button>\n          );\n        })}\n\n        {choiceIndicatorPosition && (\n          <div\n            className={cn(\n              indicatorVariant({\n                color,\n              })\n            )}\n            style={choiceIndicatorPosition}\n            ref={indicatorRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAaA,MAAa,iBAAiD,CAC5D;CAAE,SAAS;CAAO,OAAO;AAAM,GAC/B;CAAE,SAAS;CAAM,OAAO;AAAK,CAC/B;AAEA,IAAY,sBAAL;CACL;CACA;CACA;CACA;CACA;CACA;;AACF;AAEA,IAAY,qBAAL;CACL;CACA;CACA;CACA;;AACF;AAkBA,MAAa,wBAAwB,IACnC,wFACA;CACE,UAAU;EACR,OAAO;IACJ,YAAmC;IACnC,cAAqC;IACrC,YAAmC;IACnC,UAAiC;IACjC,SAAgC;IAChC,SAAgC;EACnC;EACA,UAAU;GACR,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,OAAO;EACP,UAAU;CACZ;AACF,CACF;AAEA,MAAa,gBAAgB,IAC3B,6LACA;CACE,UAAU,EACR,MAAM;GACH,OAA6B;GAC7B,OAA6B;GAC7B,OAA6B;GAC7B,OAA6B;CAChC,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF;AAEA,MAAa,mBAAmB,IAC9B,uHACA,EACE,UAAU,EACR,OAAO;EACJ,YACC;EACD,cACC;EACD,GAAG,oBAAoB,UACtB;EACD,YACC;EACD,UACC;EACD,SACC;EACD,SACC;AACJ,EACF,EACF,CACF;;;;;AAMA,MAAa,kBAAsB,UAAkC;CACnE,MAAM,EACJ,UAAU,gBACV,mBACA,aACA,WACA,kBACE;CAEJ,MAAM,EACJ,eACA,gBACA,cACA,aACA,cACA,yBACA,iBACA,aACE,kBACF;EACE;EACA,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,UAAU,MAAM;EAChB,WAAW,MAAM;EACjB,UAAU,MAAM;CAClB,GACA,YACF;CAEA,OACE,oBAAC,OAAD;EACE,WAAW,sBAAsB;GAC/B;GACA;GACA;EACF,CAAC;EACD,MAAK;EACL,iBAAe,WAAW,SAAS;YAEnC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,QAAQ,KAAK,QAAQ,UAAU;IAC9B,MAAM,EAAE,SAAS,OAAO,GAAG,gBAAgB;IAE3C,MAAM,aACJ,OAAO,UAAU,YAAY,OAAO,UAAU;IAEhD,MAAM,aAAa,UAAU;IAC7B,MAAM,mBAAmB,UAAU;IAEnC,OACE,8BAAC,UAAD;KACE,GAAI;KACJ,WAAW,GACT,cAAc,EACZ,KACF,CAAC,GACD,YAAY,sBACZ,aACF;KACA,KAAK,aAAa,QAAQ;KAC1B,MAAK;KACL,eAAe,aAAa,KAAK;KACjC,iBAAe,aAAa,SAAS;KACrC,kBAAgB,mBAAmB,SAAS;KAClC;KACV,UAAU,aAAa,IAAI;KAC3B,MAAM,OAAO;MACX,YAAY,QAAQ,SAAS;KAC/B;KACA,oBAAoB,CAAC,YAAY,gBAAgB,KAAK;KACtD,oBAAoB,CAAC,YAAY,gBAAgB,IAAI;IAG/C,GADL,OACK;GAEZ,CAAC,GAEA,2BACC,oBAAC,OAAD;IACE,WAAW,GACT,iBAAiB,EACf,MACF,CAAC,CACH;IACA,OAAO;IACP,KAAK;GACN,EAEA;;CACF;AAET"}

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

@@ -13,7 +13,7 @@ const verticalSwitchSelectorVariant = cva("flex h-fit w-fit cursor-pointer flex-
 		color: {
 			[`${"primary"}`]: "border-primary text-primary",
 			[`${"secondary"}`]: "border-secondary text-secondary",
-			[`${"destructive"}`]: "border-destructive bg-destructive text-destructive",
+			[`${SwitchSelectorColor.ERROR}`]: "border-error bg-error text-error",
 			[`${"neutral"}`]: "border-neutral text-neutral",
 			[`${"light"}`]: "border-white text-white",
 			[`${"dark"}`]: "border-neutral-800 text-neutral-800",
@@ -40,7 +40,7 @@ const verticalChoiceVariant = cva("z-1 w-full cursor-pointer font-medium text-sm
 const verticalIndicatorVariant = cva("absolute left-0 z-0 h-auto w-full rounded-xl transition-all duration-300 ease-in-out motion-reduce:transition-none", { variants: { color: {
 	[`${"primary"}`]: "bg-primary data-[indicator=true]:text-text",
 	[`${"secondary"}`]: "bg-secondary data-[indicator=true]:text-text",
-	[`${"destructive"}`]: "bg-destructive data-[indicator=true]:text-text",
+	[`${SwitchSelectorColor.ERROR}`]: "bg-error data-[indicator=true]:text-text",
 	[`${"neutral"}`]: "bg-neutral data-[indicator=true]:text-white",
 	[`${"light"}`]: "bg-white data-[indicator=true]:text-black",
 	[`${"dark"}`]: "bg-neutral-800 data-[indicator=true]:text-white",
@@ -51,7 +51,7 @@ const verticalIndicatorVariant = cva("absolute left-0 z-0 h-auto w-full rounded-
 * This component is vertical.
 */
 const VerticalSwitchSelector = (props) => {
-	const { choices = defaultChoices, color = "primary", size = "md", className, itemClassName, ...baseProps } = props;
+	const { choices = defaultChoices, color = "primary", size = "md", className, itemClassName } = props;
 	const { selectedIndex, indicatorIndex, handleChange, optionsRefs, indicatorRef, choiceIndicatorPosition, setHoveredIndex, disabled } = useSwitchSelector({
 		choices,
 		value: props.value,

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

@@ -1 +1 @@
-{"version":3,"file":"VerticalSwitchSelector.mjs","names":[],"sources":["../../../../src/components/SwitchSelector/VerticalSwitchSelector.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  defaultChoices,\n  type SwitchSelectorBaseProps,\n  type SwitchSelectorChoices,\n  SwitchSelectorColor,\n  SwitchSelectorSize,\n} from './SwitchSelector';\nimport { useSwitchSelector } from './useSwitchSelector';\n\nconst verticalSwitchSelectorVariant = cva(\n  'flex h-fit w-fit cursor-pointer flex-col gap-2 rounded-2xl border-[1.3px] p-1',\n  {\n    variants: {\n      color: {\n        [`${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\nconst verticalChoiceVariant = cva(\n  'z-1 w-full cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default data-[indicator=true]:text-text-opposite motion-reduce:transition-none',\n  {\n    variants: {\n      size: {\n        [`${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 verticalIndicatorVariant = cva(\n  'absolute left-0 z-0 h-auto w-full rounded-xl transition-all duration-300 ease-in-out motion-reduce:transition-none',\n  {\n    variants: {\n      color: {\n        [`${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\nexport type VerticalSwitchSelectorProps<T = boolean> =\n  SwitchSelectorBaseProps<T> &\n    VariantProps<typeof verticalSwitchSelectorVariant> &\n    VariantProps<typeof verticalChoiceVariant>;\n\n/**\n * Component that allows the user to select one of the provided choices.\n * This component is vertical.\n */\nexport const VerticalSwitchSelector = <T,>(\n  props: VerticalSwitchSelectorProps<T>\n) => {\n  const {\n    choices = defaultChoices as SwitchSelectorChoices<T>,\n    color = SwitchSelectorColor.PRIMARY,\n    size = SwitchSelectorSize.MD,\n    className,\n    itemClassName,\n    ...baseProps\n  } = props;\n\n  const {\n    selectedIndex,\n    indicatorIndex,\n    handleChange,\n    optionsRefs,\n    indicatorRef,\n    choiceIndicatorPosition,\n    setHoveredIndex,\n    disabled,\n  } = useSwitchSelector(\n    {\n      choices,\n      value: props.value,\n      defaultValue: props.defaultValue,\n      onChange: props.onChange,\n      hoverable: props.hoverable,\n      disabled: props.disabled,\n    },\n    'vertical'\n  );\n\n  return (\n    <div\n      className={verticalSwitchSelectorVariant({\n        color,\n        disabled,\n        className,\n      })}\n      role=\"tablist\"\n      aria-disabled={disabled ? 'true' : undefined}\n    >\n      <div className=\"relative flex h-fit w-full flex-col items-center justify-center\">\n        {choices.map((choice, index) => {\n          const { content, value, ...buttonProps } = choice;\n\n          const isKeyOfKey =\n            typeof value === 'string' || typeof value === 'number';\n\n          const isSelected = index === selectedIndex;\n          const isIndicatorOwner = index === indicatorIndex;\n\n          return (\n            <button\n              {...buttonProps}\n              className={cn(\n                verticalChoiceVariant({\n                  size,\n                }),\n                disabled && 'cursor-not-allowed',\n                itemClassName\n              )}\n              key={isKeyOfKey ? value : index}\n              role=\"tab\"\n              onClick={() => handleChange(value)}\n              aria-selected={isSelected ? 'true' : undefined}\n              data-indicator={isIndicatorOwner ? 'true' : undefined}\n              disabled={disabled || isSelected}\n              tabIndex={isSelected ? 0 : -1}\n              ref={(el) => {\n                optionsRefs.current[index] = el!;\n              }}\n              onMouseEnter={() => !disabled && setHoveredIndex(index)}\n              onMouseLeave={() => !disabled && setHoveredIndex(null)}\n            >\n              {content}\n            </button>\n          );\n        })}\n\n        {choiceIndicatorPosition && (\n          <div\n            className={cn(\n              verticalIndicatorVariant({\n                color,\n              })\n            )}\n            style={choiceIndicatorPosition}\n            ref={indicatorRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAaA,MAAM,gCAAgC,IACpC,iFACA;CACE,UAAU;EACR,OAAO;IACJ,iBAAmC;IACnC,mBAAqC;IACrC,qBACC;IACD,iBAAmC;IACnC,eAAiC;IACjC,cAAgC;IAChC,cAAgC;EACnC;EACA,UAAU;GACR,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,OAAO;EACP,UAAU;CACZ;AACF,CACF;AAEA,MAAM,wBAAwB,IAC5B,6LACA;CACE,UAAU,EACR,MAAM;GACH,YAA6B;GAC7B,YAA6B;GAC7B,YAA6B;CAChC,EACF;CACA,iBAAiB,EACf,MAAM,UACR;AACF,CACF;AAEA,MAAM,2BAA2B,IAC/B,sHACA,EACE,UAAU,EACR,OAAO;EACJ,iBACC;EACD,mBACC;EACD,qBACC;EACD,iBACC;EACD,eACC;EACD,cACC;EACD,cACC;AACJ,EACF,EACF,CACF;;;;;AAWA,MAAa,0BACX,UACG;CACH,MAAM,EACJ,UAAU,gBACV,mBACA,aACA,WACA,eACA,GAAG,cACD;CAEJ,MAAM,EACJ,eACA,gBACA,cACA,aACA,cACA,yBACA,iBACA,aACE,kBACF;EACE;EACA,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,UAAU,MAAM;EAChB,WAAW,MAAM;EACjB,UAAU,MAAM;CAClB,GACA,UACF;CAEA,OACE,oBAAC,OAAD;EACE,WAAW,8BAA8B;GACvC;GACA;GACA;EACF,CAAC;EACD,MAAK;EACL,iBAAe,WAAW,SAAS;YAEnC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,QAAQ,KAAK,QAAQ,UAAU;IAC9B,MAAM,EAAE,SAAS,OAAO,GAAG,gBAAgB;IAE3C,MAAM,aACJ,OAAO,UAAU,YAAY,OAAO,UAAU;IAEhD,MAAM,aAAa,UAAU;IAC7B,MAAM,mBAAmB,UAAU;IAEnC,OACE,8BAAC,UAAD;KACE,GAAI;KACJ,WAAW,GACT,sBAAsB,EACpB,KACF,CAAC,GACD,YAAY,sBACZ,aACF;KACA,KAAK,aAAa,QAAQ;KAC1B,MAAK;KACL,eAAe,aAAa,KAAK;KACjC,iBAAe,aAAa,SAAS;KACrC,kBAAgB,mBAAmB,SAAS;KAC5C,UAAU,YAAY;KACtB,UAAU,aAAa,IAAI;KAC3B,MAAM,OAAO;MACX,YAAY,QAAQ,SAAS;KAC/B;KACA,oBAAoB,CAAC,YAAY,gBAAgB,KAAK;KACtD,oBAAoB,CAAC,YAAY,gBAAgB,IAAI;IAG/C,GADL,OACK;GAEZ,CAAC,GAEA,2BACC,oBAAC,OAAD;IACE,WAAW,GACT,yBAAyB,EACvB,MACF,CAAC,CACH;IACA,OAAO;IACP,KAAK;GACN,EAEA;;CACF;AAET"}
+{"version":3,"file":"VerticalSwitchSelector.mjs","names":[],"sources":["../../../../src/components/SwitchSelector/VerticalSwitchSelector.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  defaultChoices,\n  type SwitchSelectorBaseProps,\n  type SwitchSelectorChoices,\n  SwitchSelectorColor,\n  SwitchSelectorSize,\n} from './SwitchSelector';\nimport { useSwitchSelector } from './useSwitchSelector';\n\nconst verticalSwitchSelectorVariant = cva(\n  'flex h-fit w-fit cursor-pointer flex-col gap-2 rounded-2xl border-[1.3px] p-1',\n  {\n    variants: {\n      color: {\n        [`${SwitchSelectorColor.PRIMARY}`]: 'border-primary text-primary',\n        [`${SwitchSelectorColor.SECONDARY}`]: 'border-secondary text-secondary',\n        [`${SwitchSelectorColor.ERROR}`]: 'border-error bg-error text-error',\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\nconst verticalChoiceVariant = cva(\n  'z-1 w-full cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default data-[indicator=true]:text-text-opposite motion-reduce:transition-none',\n  {\n    variants: {\n      size: {\n        [`${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 verticalIndicatorVariant = cva(\n  'absolute left-0 z-0 h-auto w-full rounded-xl transition-all duration-300 ease-in-out motion-reduce:transition-none',\n  {\n    variants: {\n      color: {\n        [`${SwitchSelectorColor.PRIMARY}`]:\n          'bg-primary data-[indicator=true]:text-text',\n        [`${SwitchSelectorColor.SECONDARY}`]:\n          'bg-secondary data-[indicator=true]:text-text',\n        [`${SwitchSelectorColor.ERROR}`]:\n          'bg-error 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\nexport type VerticalSwitchSelectorProps<T = boolean> =\n  SwitchSelectorBaseProps<T> &\n    VariantProps<typeof verticalSwitchSelectorVariant> &\n    VariantProps<typeof verticalChoiceVariant>;\n\n/**\n * Component that allows the user to select one of the provided choices.\n * This component is vertical.\n */\nexport const VerticalSwitchSelector = <T,>(\n  props: VerticalSwitchSelectorProps<T>\n) => {\n  const {\n    choices = defaultChoices as SwitchSelectorChoices<T>,\n    color = SwitchSelectorColor.PRIMARY,\n    size = SwitchSelectorSize.MD,\n    className,\n    itemClassName,\n  } = props;\n\n  const {\n    selectedIndex,\n    indicatorIndex,\n    handleChange,\n    optionsRefs,\n    indicatorRef,\n    choiceIndicatorPosition,\n    setHoveredIndex,\n    disabled,\n  } = useSwitchSelector(\n    {\n      choices,\n      value: props.value,\n      defaultValue: props.defaultValue,\n      onChange: props.onChange,\n      hoverable: props.hoverable,\n      disabled: props.disabled,\n    },\n    'vertical'\n  );\n\n  return (\n    <div\n      className={verticalSwitchSelectorVariant({\n        color,\n        disabled,\n        className,\n      })}\n      role=\"tablist\"\n      aria-disabled={disabled ? 'true' : undefined}\n    >\n      <div className=\"relative flex h-fit w-full flex-col items-center justify-center\">\n        {choices.map((choice, index) => {\n          const { content, value, ...buttonProps } = choice;\n\n          const isKeyOfKey =\n            typeof value === 'string' || typeof value === 'number';\n\n          const isSelected = index === selectedIndex;\n          const isIndicatorOwner = index === indicatorIndex;\n\n          return (\n            <button\n              {...buttonProps}\n              className={cn(\n                verticalChoiceVariant({\n                  size,\n                }),\n                disabled && 'cursor-not-allowed',\n                itemClassName\n              )}\n              key={isKeyOfKey ? value : index}\n              role=\"tab\"\n              onClick={() => handleChange(value)}\n              aria-selected={isSelected ? 'true' : undefined}\n              data-indicator={isIndicatorOwner ? 'true' : undefined}\n              disabled={disabled || isSelected}\n              tabIndex={isSelected ? 0 : -1}\n              ref={(el) => {\n                optionsRefs.current[index] = el!;\n              }}\n              onMouseEnter={() => !disabled && setHoveredIndex(index)}\n              onMouseLeave={() => !disabled && setHoveredIndex(null)}\n            >\n              {content}\n            </button>\n          );\n        })}\n\n        {choiceIndicatorPosition && (\n          <div\n            className={cn(\n              verticalIndicatorVariant({\n                color,\n              })\n            )}\n            style={choiceIndicatorPosition}\n            ref={indicatorRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAaA,MAAM,gCAAgC,IACpC,iFACA;CACE,UAAU;EACR,OAAO;IACJ,iBAAmC;IACnC,mBAAqC;IACrC,GAAG,oBAAoB,UAAU;IACjC,iBAAmC;IACnC,eAAiC;IACjC,cAAgC;IAChC,cAAgC;EACnC;EACA,UAAU;GACR,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,OAAO;EACP,UAAU;CACZ;AACF,CACF;AAEA,MAAM,wBAAwB,IAC5B,6LACA;CACE,UAAU,EACR,MAAM;GACH,YAA6B;GAC7B,YAA6B;GAC7B,YAA6B;CAChC,EACF;CACA,iBAAiB,EACf,MAAM,UACR;AACF,CACF;AAEA,MAAM,2BAA2B,IAC/B,sHACA,EACE,UAAU,EACR,OAAO;EACJ,iBACC;EACD,mBACC;EACD,GAAG,oBAAoB,UACtB;EACD,iBACC;EACD,eACC;EACD,cACC;EACD,cACC;AACJ,EACF,EACF,CACF;;;;;AAWA,MAAa,0BACX,UACG;CACH,MAAM,EACJ,UAAU,gBACV,mBACA,aACA,WACA,kBACE;CAEJ,MAAM,EACJ,eACA,gBACA,cACA,aACA,cACA,yBACA,iBACA,aACE,kBACF;EACE;EACA,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,UAAU,MAAM;EAChB,WAAW,MAAM;EACjB,UAAU,MAAM;CAClB,GACA,UACF;CAEA,OACE,oBAAC,OAAD;EACE,WAAW,8BAA8B;GACvC;GACA;GACA;EACF,CAAC;EACD,MAAK;EACL,iBAAe,WAAW,SAAS;YAEnC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,QAAQ,KAAK,QAAQ,UAAU;IAC9B,MAAM,EAAE,SAAS,OAAO,GAAG,gBAAgB;IAE3C,MAAM,aACJ,OAAO,UAAU,YAAY,OAAO,UAAU;IAEhD,MAAM,aAAa,UAAU;IAC7B,MAAM,mBAAmB,UAAU;IAEnC,OACE,8BAAC,UAAD;KACE,GAAI;KACJ,WAAW,GACT,sBAAsB,EACpB,KACF,CAAC,GACD,YAAY,sBACZ,aACF;KACA,KAAK,aAAa,QAAQ;KAC1B,MAAK;KACL,eAAe,aAAa,KAAK;KACjC,iBAAe,aAAa,SAAS;KACrC,kBAAgB,mBAAmB,SAAS;KAC5C,UAAU,YAAY;KACtB,UAAU,aAAa,IAAI;KAC3B,MAAM,OAAO;MACX,YAAY,QAAQ,SAAS;KAC/B;KACA,oBAAoB,CAAC,YAAY,gBAAgB,KAAK;KACtD,oBAAoB,CAAC,YAAY,gBAAgB,IAAI;IAG/C,GADL,OACK;GAEZ,CAAC,GAEA,2BACC,oBAAC,OAAD;IACE,WAAW,GACT,yBAAyB,EACvB,MACF,CAAC,CACH;IACA,OAAO;IACP,KAAK;GACN,EAEA;;CACF;AAET"}

package/dist/esm/components/TabSelector/TabSelector.mjs

@@ -10,7 +10,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 let TabSelectorColor = /* @__PURE__ */ function(TabSelectorColor) {
 	TabSelectorColor["PRIMARY"] = "primary";
 	TabSelectorColor["SECONDARY"] = "secondary";
-	TabSelectorColor["DESTRUCTIVE"] = "destructive";
+	TabSelectorColor["ERROR"] = "error";
 	TabSelectorColor["NEUTRAL"] = "neutral";
 	TabSelectorColor["LIGHT"] = "light";
 	TabSelectorColor["DARK"] = "dark";
@@ -21,7 +21,7 @@ const tabSelectorVariant = cva("relative z-0 flex size-full flex-row items-cente
 	variants: { color: {
 		primary: "border-primary text-primary",
 		secondary: "border-secondary text-secondary",
-		destructive: "border-destructive bg-destructive text-destructive",
+		error: "border-error bg-error text-error",
 		neutral: "border-neutral text-neutral",
 		light: "border-white text-white",
 		dark: "border-neutral-800 text-neutral-800",
@@ -34,7 +34,7 @@ const indicatorVariant = cva("absolute -z-1 rounded-lg duration-300 ease-in-out
 		color: {
 			primary: "bg-primary/10 aria-selected:text-text",
 			secondary: "bg-secondary/10 aria-selected:text-text",
-			destructive: "bg-destructive/10 aria-selected:text-text",
+			error: "bg-error/10 aria-selected:text-text",
 			neutral: "bg-neutral/10 aria-selected:text-white/10",
 			light: "bg-white/10 aria-selected:text-black",
 			dark: "bg-neutral-800/10 aria-selected:text-white",

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

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

package/dist/esm/components/Toaster/Toast.mjs

@@ -97,7 +97,7 @@ const Toast = ({ className, variant, ...props }) => {
 * ## Features
 * - **Accessibility**: Requires `altText` prop for screen readers
 * - **Visual States**: Hover, focus, and disabled state styling
-* - **Theme Integration**: Supports destructive and default themes
+* - **Theme Integration**: Supports error and default themes
 * - **Keyboard Navigation**: Full keyboard accessibility support
 *
 * ## Usage Guidelines
@@ -125,11 +125,11 @@ const Toast = ({ className, variant, ...props }) => {
 * ```
 */
 const ToastAction = ({ className, ...props }) => /* @__PURE__ */ jsx(ToastPrimitives.Action, {
-	className: cn("inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 font-medium text-sm transition-colors hover:bg-text focus:outline-hidden focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:focus:ring-destructive group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground", className),
+	className: cn("inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 font-medium text-sm transition-colors hover:bg-text focus:outline-hidden focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.error]:border-muted/40 group-[.error]:focus:ring-error group-[.error]:hover:border-error/30 group-[.error]:hover:bg-error group-[.error]:hover:text-error-foreground", className),
 	...props
 });
 const ToastClose = ({ className, ...props }) => /* @__PURE__ */ jsx(ToastPrimitives.Close, {
-	className: cn("absolute top-1 right-1 rounded-md p-1 text-text/50 opacity-0 transition-opacity hover:text-text/80 focus:opacity-100 focus:outline-hidden focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 group-[.destructive]:hover:text-red-50", className),
+	className: cn("absolute top-1 right-1 rounded-md p-1 text-text/50 opacity-0 transition-opacity hover:text-text/80 focus:opacity-100 focus:outline-hidden focus:ring-1 group-hover:opacity-100 group-[.error]:text-red-300 group-[.error]:focus:ring-red-400 group-[.error]:focus:ring-offset-red-600 group-[.error]:hover:text-red-50", className),
 	"toast-close": "",
 	...props,
 	children: /* @__PURE__ */ jsx(X, { className: "size-5" })

package/dist/esm/components/Toaster/Toast.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.mjs","names":[],"sources":["../../../../src/components/Toaster/Toast.tsx"],"sourcesContent":["'use client';\n\nimport * as ToastPrimitives from '@radix-ui/react-toast';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { X } from 'lucide-react';\nimport type { ComponentProps, FC, ReactElement } from 'react';\n\nexport const ToastProvider = ToastPrimitives;\n\nexport const ToastViewport: FC<\n  ComponentProps<typeof ToastPrimitives.Viewport>\n> = ({ className, ...props }) => (\n  <ToastPrimitives.Viewport\n    className={cn(\n      'fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-[420px]',\n      className\n    )}\n    {...props}\n  />\n);\n\n/**\n * Toast variant styles using class-variance-authority.\n *\n * Defines visual styles for different toast types with semantic colors,\n * animations, and responsive behavior.\n *\n * @example\n * ```tsx\n * // Error toast with red background\n * <Toast variant=\"error\">Error message</Toast>\n *\n * // Success toast with green background\n * <Toast variant=\"success\">Success message</Toast>\n *\n * // Default toast with neutral styling\n * <Toast variant=\"default\">Info message</Toast>\n * ```\n */\nexport const toastVariants = cva(\n  'group data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-xl p-4 pr-6 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur transition-all [corner-shape:squircle] data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none supports-[corner-shape:squircle]:rounded-3xl',\n  {\n    variants: {\n      /** Toast visual variants for different message types */\n      variant: {\n        /** Error state with red styling for failures and warnings */\n        error: 'bg-error/40 text-text',\n        /** Success state with green styling for confirmations */\n        success: 'bg-success/30 text-text',\n        /** Default neutral styling for general information */\n        default: 'bg-card/80 text-text',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  }\n);\n\n/**\n * Toast Component\n *\n * A notification component that displays temporary messages to users using Radix UI primitives.\n * Supports different visual variants, animations, and user interactions including swipe-to-dismiss.\n *\n * ## Features\n * - **Visual Variants**: Error, success, and default styling themes\n * - **Animations**: Smooth slide-in/slide-out transitions with fade effects\n * - **Swipe Gestures**: Touch-friendly swipe-to-dismiss functionality\n * - **Accessibility**: Full screen reader support and keyboard navigation\n * - **Positioning**: Smart positioning with responsive viewport handling\n * - **Auto-dismiss**: Configurable automatic dismissal timing\n *\n * ## Technical Implementation\n * - Built on Radix UI Toast primitives for accessibility compliance\n * - Uses Framer Motion for smooth animations and gestures\n * - CVA (class-variance-authority) for consistent styling variants\n * - Backdrop blur effects for modern visual appeal\n * - CSS transforms for hardware-accelerated animations\n *\n * @example\n * ```tsx\n * // Basic toast with title and description\n * <Toast variant=\"default\">\n *   <ToastTitle>Notification</ToastTitle>\n *   <ToastDescription>Your action was completed successfully.</ToastDescription>\n *   <ToastClose />\n * </Toast>\n *\n * // Error toast with action button\n * <Toast variant=\"error\">\n *   <ToastTitle>Upload Failed</ToastTitle>\n *   <ToastDescription>Could not upload file. Please try again.</ToastDescription>\n *   <ToastAction altText=\"Retry upload\">Retry</ToastAction>\n *   <ToastClose />\n * </Toast>\n * ```\n */\nexport const Toast: FC<\n  ComponentProps<typeof ToastPrimitives.Root> &\n    VariantProps<typeof toastVariants>\n> = ({ className, variant, ...props }) => {\n  return (\n    <ToastPrimitives.Root\n      className={cn(toastVariants({ variant }), className)}\n      {...props}\n    />\n  );\n};\n\n/**\n * ToastAction Component\n *\n * An interactive button component for toast notifications that allows users to take\n * actions related to the notification message.\n *\n * ## Features\n * - **Accessibility**: Requires `altText` prop for screen readers\n * - **Visual States**: Hover, focus, and disabled state styling\n * - **Theme Integration**: Supports destructive and default themes\n * - **Keyboard Navigation**: Full keyboard accessibility support\n *\n * ## Usage Guidelines\n * - Use for actionable notifications (retry, undo, view details)\n * - Keep action text short and descriptive\n * - Provide meaningful `altText` for accessibility\n * - Limit to one primary action per toast\n *\n * @example\n * ```tsx\n * // Retry action for failed operations\n * <ToastAction altText=\"Retry the failed operation\">\n *   Retry\n * </ToastAction>\n *\n * // Undo action for reversible operations\n * <ToastAction altText=\"Undo the last action\">\n *   Undo\n * </ToastAction>\n *\n * // Navigation action\n * <ToastAction altText=\"View the uploaded file\">\n *   View File\n * </ToastAction>\n * ```\n */\nexport const ToastAction: FC<ComponentProps<typeof ToastPrimitives.Action>> = ({\n  className,\n  ...props\n}) => (\n  <ToastPrimitives.Action\n    className={cn(\n      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 font-medium text-sm transition-colors hover:bg-text focus:outline-hidden focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:focus:ring-destructive group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground',\n      className\n    )}\n    {...props}\n  />\n);\n\nexport const ToastClose: FC<ComponentProps<typeof ToastPrimitives.Close>> = ({\n  className,\n  ...props\n}) => (\n  <ToastPrimitives.Close\n    className={cn(\n      'absolute top-1 right-1 rounded-md p-1 text-text/50 opacity-0 transition-opacity hover:text-text/80 focus:opacity-100 focus:outline-hidden focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 group-[.destructive]:hover:text-red-50',\n      className\n    )}\n    toast-close=\"\"\n    {...props}\n  >\n    <X className=\"size-5\" />\n  </ToastPrimitives.Close>\n);\n/**\n * ToastTitle Component\n *\n * The primary heading text for toast notifications. Provides semantic structure\n * and proper typography hierarchy within the toast.\n *\n * ## Styling Features\n * - Semi-bold font weight for emphasis\n * - Automatic text sizing adjustments for descriptions\n * - Proper spacing relationships with other toast elements\n *\n * @example\n * ```tsx\n * <ToastTitle>File Upload Complete</ToastTitle>\n * <ToastTitle>Error: Connection Failed</ToastTitle>\n * <ToastTitle>Settings Saved</ToastTitle>\n * ```\n */\nexport const ToastTitle: FC<ComponentProps<typeof ToastPrimitives.Title>> = ({\n  className,\n  ...props\n}) => (\n  <ToastPrimitives.Title\n    className={cn('font-semibold text-sm [&+div]:text-xs', className)}\n    {...props}\n  />\n);\n\n/**\n * ToastDescription Component\n *\n * Supporting text that provides additional context or details for the toast notification.\n * Complements the ToastTitle with more detailed information.\n *\n * ## Styling Features\n * - Slightly reduced opacity for visual hierarchy\n * - Smaller text size than title\n * - Optimal line height for readability\n *\n * ## Content Guidelines\n * - Keep descriptions concise but informative\n * - Provide actionable information when possible\n * - Use plain language for better accessibility\n *\n * @example\n * ```tsx\n * <ToastDescription>\n *   Your document has been uploaded successfully and is now available for sharing.\n * </ToastDescription>\n *\n * <ToastDescription>\n *   Please check your internet connection and try again.\n * </ToastDescription>\n * ```\n */\nexport const ToastDescription: FC<\n  ComponentProps<typeof ToastPrimitives.Description>\n> = ({ className, ...props }) => (\n  <ToastPrimitives.Description\n    className={cn('overflow-scroll text-sm opacity-90', className)}\n    {...props}\n  />\n);\n/**\n * Props type for Toast component including all Radix UI Toast.Root props\n * and variant styling options.\n */\nexport type ToastProps = ComponentProps<typeof Toast>;\n\n/**\n * Type for ToastAction elements used in toast configurations.\n * Ensures type safety when passing action elements to toast functions.\n */\nexport type ToastActionElement = ReactElement<typeof ToastAction>;\n"],"mappings":";;;;;;;;;AAQA,MAAa,gBAAgB;AAE7B,MAAa,iBAER,EAAE,WAAW,GAAG,YACnB,oBAAC,gBAAgB,UAAjB;CACE,WAAW,GACT,mIACA,SACF;CACA,GAAI;AACL;;;;;;;;;;;;;;;;;;;AAqBH,MAAa,gBAAgB,IAC3B,usBACA;CACE,UAAU;;AAER,SAAS;;EAEP,OAAO;;EAEP,SAAS;;EAET,SAAS;CACX,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAa,SAGR,EAAE,WAAW,SAAS,GAAG,YAAY;CACxC,OACE,oBAAC,gBAAgB,MAAjB;EACE,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;EACnD,GAAI;CACL;AAEL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,MAAa,eAAkE,EAC7E,WACA,GAAG,YAEH,oBAAC,gBAAgB,QAAjB;CACE,WAAW,GACT,wdACA,SACF;CACA,GAAI;AACL;AAGH,MAAa,cAAgE,EAC3E,WACA,GAAG,YAEH,oBAAC,gBAAgB,OAAjB;CACE,WAAW,GACT,kVACA,SACF;CACA,eAAY;CACZ,GAAI;WAEJ,oBAAC,GAAD,EAAG,WAAU,SAAU;AACF;;;;;;;;;;;;;;;;;;;AAoBzB,MAAa,cAAgE,EAC3E,WACA,GAAG,YAEH,oBAAC,gBAAgB,OAAjB;CACE,WAAW,GAAG,yCAAyC,SAAS;CAChE,GAAI;AACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BH,MAAa,oBAER,EAAE,WAAW,GAAG,YACnB,oBAAC,gBAAgB,aAAjB;CACE,WAAW,GAAG,sCAAsC,SAAS;CAC7D,GAAI;AACL"}
+{"version":3,"file":"Toast.mjs","names":[],"sources":["../../../../src/components/Toaster/Toast.tsx"],"sourcesContent":["'use client';\n\nimport * as ToastPrimitives from '@radix-ui/react-toast';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { X } from 'lucide-react';\nimport type { ComponentProps, FC, ReactElement } from 'react';\n\nexport const ToastProvider = ToastPrimitives;\n\nexport const ToastViewport: FC<\n  ComponentProps<typeof ToastPrimitives.Viewport>\n> = ({ className, ...props }) => (\n  <ToastPrimitives.Viewport\n    className={cn(\n      'fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-[420px]',\n      className\n    )}\n    {...props}\n  />\n);\n\n/**\n * Toast variant styles using class-variance-authority.\n *\n * Defines visual styles for different toast types with semantic colors,\n * animations, and responsive behavior.\n *\n * @example\n * ```tsx\n * // Error toast with red background\n * <Toast variant=\"error\">Error message</Toast>\n *\n * // Success toast with green background\n * <Toast variant=\"success\">Success message</Toast>\n *\n * // Default toast with neutral styling\n * <Toast variant=\"default\">Info message</Toast>\n * ```\n */\nexport const toastVariants = cva(\n  'group data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-xl p-4 pr-6 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur transition-all [corner-shape:squircle] data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none supports-[corner-shape:squircle]:rounded-3xl',\n  {\n    variants: {\n      /** Toast visual variants for different message types */\n      variant: {\n        /** Error state with red styling for failures and warnings */\n        error: 'bg-error/40 text-text',\n        /** Success state with green styling for confirmations */\n        success: 'bg-success/30 text-text',\n        /** Default neutral styling for general information */\n        default: 'bg-card/80 text-text',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  }\n);\n\n/**\n * Toast Component\n *\n * A notification component that displays temporary messages to users using Radix UI primitives.\n * Supports different visual variants, animations, and user interactions including swipe-to-dismiss.\n *\n * ## Features\n * - **Visual Variants**: Error, success, and default styling themes\n * - **Animations**: Smooth slide-in/slide-out transitions with fade effects\n * - **Swipe Gestures**: Touch-friendly swipe-to-dismiss functionality\n * - **Accessibility**: Full screen reader support and keyboard navigation\n * - **Positioning**: Smart positioning with responsive viewport handling\n * - **Auto-dismiss**: Configurable automatic dismissal timing\n *\n * ## Technical Implementation\n * - Built on Radix UI Toast primitives for accessibility compliance\n * - Uses Framer Motion for smooth animations and gestures\n * - CVA (class-variance-authority) for consistent styling variants\n * - Backdrop blur effects for modern visual appeal\n * - CSS transforms for hardware-accelerated animations\n *\n * @example\n * ```tsx\n * // Basic toast with title and description\n * <Toast variant=\"default\">\n *   <ToastTitle>Notification</ToastTitle>\n *   <ToastDescription>Your action was completed successfully.</ToastDescription>\n *   <ToastClose />\n * </Toast>\n *\n * // Error toast with action button\n * <Toast variant=\"error\">\n *   <ToastTitle>Upload Failed</ToastTitle>\n *   <ToastDescription>Could not upload file. Please try again.</ToastDescription>\n *   <ToastAction altText=\"Retry upload\">Retry</ToastAction>\n *   <ToastClose />\n * </Toast>\n * ```\n */\nexport const Toast: FC<\n  ComponentProps<typeof ToastPrimitives.Root> &\n    VariantProps<typeof toastVariants>\n> = ({ className, variant, ...props }) => {\n  return (\n    <ToastPrimitives.Root\n      className={cn(toastVariants({ variant }), className)}\n      {...props}\n    />\n  );\n};\n\n/**\n * ToastAction Component\n *\n * An interactive button component for toast notifications that allows users to take\n * actions related to the notification message.\n *\n * ## Features\n * - **Accessibility**: Requires `altText` prop for screen readers\n * - **Visual States**: Hover, focus, and disabled state styling\n * - **Theme Integration**: Supports error and default themes\n * - **Keyboard Navigation**: Full keyboard accessibility support\n *\n * ## Usage Guidelines\n * - Use for actionable notifications (retry, undo, view details)\n * - Keep action text short and descriptive\n * - Provide meaningful `altText` for accessibility\n * - Limit to one primary action per toast\n *\n * @example\n * ```tsx\n * // Retry action for failed operations\n * <ToastAction altText=\"Retry the failed operation\">\n *   Retry\n * </ToastAction>\n *\n * // Undo action for reversible operations\n * <ToastAction altText=\"Undo the last action\">\n *   Undo\n * </ToastAction>\n *\n * // Navigation action\n * <ToastAction altText=\"View the uploaded file\">\n *   View File\n * </ToastAction>\n * ```\n */\nexport const ToastAction: FC<ComponentProps<typeof ToastPrimitives.Action>> = ({\n  className,\n  ...props\n}) => (\n  <ToastPrimitives.Action\n    className={cn(\n      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 font-medium text-sm transition-colors hover:bg-text focus:outline-hidden focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.error]:border-muted/40 group-[.error]:focus:ring-error group-[.error]:hover:border-error/30 group-[.error]:hover:bg-error group-[.error]:hover:text-error-foreground',\n      className\n    )}\n    {...props}\n  />\n);\n\nexport const ToastClose: FC<ComponentProps<typeof ToastPrimitives.Close>> = ({\n  className,\n  ...props\n}) => (\n  <ToastPrimitives.Close\n    className={cn(\n      'absolute top-1 right-1 rounded-md p-1 text-text/50 opacity-0 transition-opacity hover:text-text/80 focus:opacity-100 focus:outline-hidden focus:ring-1 group-hover:opacity-100 group-[.error]:text-red-300 group-[.error]:focus:ring-red-400 group-[.error]:focus:ring-offset-red-600 group-[.error]:hover:text-red-50',\n      className\n    )}\n    toast-close=\"\"\n    {...props}\n  >\n    <X className=\"size-5\" />\n  </ToastPrimitives.Close>\n);\n/**\n * ToastTitle Component\n *\n * The primary heading text for toast notifications. Provides semantic structure\n * and proper typography hierarchy within the toast.\n *\n * ## Styling Features\n * - Semi-bold font weight for emphasis\n * - Automatic text sizing adjustments for descriptions\n * - Proper spacing relationships with other toast elements\n *\n * @example\n * ```tsx\n * <ToastTitle>File Upload Complete</ToastTitle>\n * <ToastTitle>Error: Connection Failed</ToastTitle>\n * <ToastTitle>Settings Saved</ToastTitle>\n * ```\n */\nexport const ToastTitle: FC<ComponentProps<typeof ToastPrimitives.Title>> = ({\n  className,\n  ...props\n}) => (\n  <ToastPrimitives.Title\n    className={cn('font-semibold text-sm [&+div]:text-xs', className)}\n    {...props}\n  />\n);\n\n/**\n * ToastDescription Component\n *\n * Supporting text that provides additional context or details for the toast notification.\n * Complements the ToastTitle with more detailed information.\n *\n * ## Styling Features\n * - Slightly reduced opacity for visual hierarchy\n * - Smaller text size than title\n * - Optimal line height for readability\n *\n * ## Content Guidelines\n * - Keep descriptions concise but informative\n * - Provide actionable information when possible\n * - Use plain language for better accessibility\n *\n * @example\n * ```tsx\n * <ToastDescription>\n *   Your document has been uploaded successfully and is now available for sharing.\n * </ToastDescription>\n *\n * <ToastDescription>\n *   Please check your internet connection and try again.\n * </ToastDescription>\n * ```\n */\nexport const ToastDescription: FC<\n  ComponentProps<typeof ToastPrimitives.Description>\n> = ({ className, ...props }) => (\n  <ToastPrimitives.Description\n    className={cn('overflow-scroll text-sm opacity-90', className)}\n    {...props}\n  />\n);\n/**\n * Props type for Toast component including all Radix UI Toast.Root props\n * and variant styling options.\n */\nexport type ToastProps = ComponentProps<typeof Toast>;\n\n/**\n * Type for ToastAction elements used in toast configurations.\n * Ensures type safety when passing action elements to toast functions.\n */\nexport type ToastActionElement = ReactElement<typeof ToastAction>;\n"],"mappings":";;;;;;;;;AAQA,MAAa,gBAAgB;AAE7B,MAAa,iBAER,EAAE,WAAW,GAAG,YACnB,oBAAC,gBAAgB,UAAjB;CACE,WAAW,GACT,mIACA,SACF;CACA,GAAI;AACL;;;;;;;;;;;;;;;;;;;AAqBH,MAAa,gBAAgB,IAC3B,usBACA;CACE,UAAU;;AAER,SAAS;;EAEP,OAAO;;EAEP,SAAS;;EAET,SAAS;CACX,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAa,SAGR,EAAE,WAAW,SAAS,GAAG,YAAY;CACxC,OACE,oBAAC,gBAAgB,MAAjB;EACE,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;EACnD,GAAI;CACL;AAEL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,MAAa,eAAkE,EAC7E,WACA,GAAG,YAEH,oBAAC,gBAAgB,QAAjB;CACE,WAAW,GACT,kaACA,SACF;CACA,GAAI;AACL;AAGH,MAAa,cAAgE,EAC3E,WACA,GAAG,YAEH,oBAAC,gBAAgB,OAAjB;CACE,WAAW,GACT,0TACA,SACF;CACA,eAAY;CACZ,GAAI;WAEJ,oBAAC,GAAD,EAAG,WAAU,SAAU;AACF;;;;;;;;;;;;;;;;;;;AAoBzB,MAAa,cAAgE,EAC3E,WACA,GAAG,YAEH,oBAAC,gBAAgB,OAAjB;CACE,WAAW,GAAG,yCAAyC,SAAS;CAChE,GAAI;AACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BH,MAAa,oBAER,EAAE,WAAW,GAAG,YACnB,oBAAC,gBAAgB,aAAjB;CACE,WAAW,GAAG,sCAAsC,SAAS;CAC7D,GAAI;AACL"}

package/dist/esm/hooks/index.mjs

@@ -5,11 +5,6 @@ import { usePersistedStore } from "./usePersistedStore.mjs";
 import { useHorizontalSwipe } from "./useHorizontalSwipe.mjs";
 import { useItemSelector } from "./useItemSelector.mjs";
 import { calculateIsMobile, checkIsIOS, checkIsIphoneOrSafariDevice, checkIsMac, checkIsMobileScreen, checkIsMobileUserAgent, getBreakpointFromSize, useDevice } from "./useDevice.mjs";
-import { useOAuth2 } from "./useAuth/useOAuth2.mjs";
-import { useSession } from "./useAuth/useSession.mjs";
-import { useAuth } from "./useAuth/useAuth.mjs";
-import { useIntlayerAuth, useIntlayerOAuth } from "./useIntlayerAPI.mjs";
-import { useAcceptAffiliateInvitation, useAddDictionary, useAddNewAccessKey, useAddOrganization, useAddOrganizationMember, useAddPasskey, useAddProject, useAddTag, useAppQuery, useAskDocQuestion, useAskResetPassword, useAuditContentDeclaration, useAuditContentDeclarationField, useAuditContentDeclarationMetadata, useAuditScan, useAuditTag, useAutocomplete, useBitbucketAuth, useBitbucketCheckConfig, useBitbucketGetConfigFile, useBitbucketRepos, useCancelSubscription, useChangePassword, useChat, useContactReviewer, useCreateMission, useCreatePortalSession, useCreateUser, useDeleteAccessKey, useDeleteDictionary, useDeleteOrganization, useDeleteOrganizationById, useDeletePasskey, useDeleteProject, useDeleteProjectById, useDeleteReviewerProfile, useDeleteSSOProvider, useDeleteShowcaseProject, useDeleteTag, useDeleteUser, useDisableTwoFactor, useEnableTwoFactor, useEstimateMission, useFillAllTranslations, useGetAdminReviewers, useGetAffiliate, useGetAffiliateAccountSession, useGetAffiliateById, useGetAffiliateInvitation, useGetAffiliateStats, useGetAffiliates, useGetCIConfig, useGetChatHistory, useGetDictionaries, useGetDictionariesKeys, useGetDictionary, useGetDiscussions, useGetDiscussionsData, useGetEditorDictionaries, useGetInvoices, useGetMissionById, useGetMyMissions, useGetMyReviewerProfile, useGetNewsletterStatus, useGetOrganizations, useGetOtherShowcaseProjects, useGetPaymentMethod, useGetPricing, useGetProjects, useGetRecursiveAuditStatus, useGetReviewerById, useGetReviewerMarketplace, useGetReviewerPriceDistribution, useGetReviewerReviews, useGetShowcaseProjectById, useGetShowcaseProjects, useGetSubscription, useGetTags, useGetUserByAccount, useGetUserById, useGetUsers, useGetVerifyEmailStatus, useGithubAuth, useGithubCheckConfig, useGithubGetAuthUrl, useGithubGetConfigFile, useGithubRepos, useGithubToken, useGitlabAuth, useGitlabCheckConfig, useGitlabGetConfigFile, useGitlabProjects, useGrantAffiliateAccess, useInfiniteGetDictionaries, useLinkSocial, useListAccounts, useListPasskeys, useListSSOProviders, useLogin, useLogout, usePauseTranslationJob, usePushCIConfig, usePushDictionaries, usePushProjectConfiguration, useQueryClient, useRefreshAccessKey, useRegister, useRegisterAsReviewer, useRegisterSSO, useResetPassword, useResumeTranslationJob, useSearchDoc, useSelectOrganization, useSelectProject, useSendAffiliateInvitation, useSendReviewerMessage, useSignInMagicLink, useSignInPasskey, useSignInSSO, useStartRecursiveAudit, useStopTranslationJob, useSubmitReview, useSubmitShowcaseProject, useSubscribeToNewsletter, useToggleShowcaseDownvote, useToggleShowcaseUpvote, useTranslateJSONDeclaration, useTriggerBuild, useTriggerWebhook, useUnlinkAccount, useUnselectOrganization, useUnselectProject, useUnsubscribeFromNewsletter, useUpdateAffiliateStatus, useUpdateDictionary, useUpdateMissionStatus, useUpdateOrganization, useUpdateOrganizationMembers, useUpdateOrganizationMembersById, useUpdateProject, useUpdateProjectMembers, useUpdateReviewerProfile, useUpdateShowcaseProject, useUpdateTag, useUpdateUser, useUploadReviewerCoverPicture, useUploadReviewerMainPicture, useUploadUserAvatar, useValidateReviewerProfile, useVerifyBackupCode, useVerifyEmail, useVerifyTotp, useWriteDictionary } from "./reactQuery.mjs";
 import { useSearch } from "./useSearch.mjs";
 import { useIsMounted } from "./useIsMounted.mjs";
 import { useGetElementById } from "./useGetElementById.mjs";
@@ -17,6 +12,5 @@ import { useIsDarkMode } from "./useIsDarkMode.mjs";
 import { useScreenWidth } from "./useScreenWidth.mjs";
 import { useScrollBlockage } from "./useScrollBlockage/index.mjs";
 import { useScrollDetection } from "./useScrollDetection.mjs";
-import { useUser } from "./useUser/index.mjs";
 
-export { calculateIsMobile, checkIsIOS, checkIsIphoneOrSafariDevice, checkIsMac, checkIsMobileScreen, checkIsMobileUserAgent, getBreakpointFromSize, useAcceptAffiliateInvitation, useAddDictionary, useAddNewAccessKey, useAddOrganization, useAddOrganizationMember, useAddPasskey, useAddProject, useAddTag, useAppQuery, useAskDocQuestion, useAskResetPassword, useAuditContentDeclaration, useAuditContentDeclarationField, useAuditContentDeclarationMetadata, useAuditScan, useAuditTag, useAuth, useAutocomplete, useBitbucketAuth, useBitbucketCheckConfig, useBitbucketGetConfigFile, useBitbucketRepos, useCancelSubscription, useChangePassword, useChat, useContactReviewer, useCreateMission, useCreatePortalSession, useCreateUser, useDeleteAccessKey, useDeleteDictionary, useDeleteOrganization, useDeleteOrganizationById, useDeletePasskey, useDeleteProject, useDeleteProjectById, useDeleteReviewerProfile, useDeleteSSOProvider, useDeleteShowcaseProject, useDeleteTag, useDeleteUser, useDevice, useDisableTwoFactor, useEnableTwoFactor, useEstimateMission, useFillAllTranslations, useGetAdminReviewers, useGetAffiliate, useGetAffiliateAccountSession, useGetAffiliateById, useGetAffiliateInvitation, useGetAffiliateStats, useGetAffiliates, useGetCIConfig, useGetChatHistory, useGetDictionaries, useGetDictionariesKeys, useGetDictionary, useGetDiscussions, useGetDiscussionsData, useGetEditorDictionaries, useGetElementById, useGetElementOrWindow, useGetInvoices, useGetMissionById, useGetMyMissions, useGetMyReviewerProfile, useGetNewsletterStatus, useGetOrganizations, useGetOtherShowcaseProjects, useGetPaymentMethod, useGetPricing, useGetProjects, useGetRecursiveAuditStatus, useGetReviewerById, useGetReviewerMarketplace, useGetReviewerPriceDistribution, useGetReviewerReviews, useGetShowcaseProjectById, useGetShowcaseProjects, useGetSubscription, useGetTags, useGetUserByAccount, useGetUserById, useGetUsers, useGetVerifyEmailStatus, useGithubAuth, useGithubCheckConfig, useGithubGetAuthUrl, useGithubGetConfigFile, useGithubRepos, useGithubToken, useGitlabAuth, useGitlabCheckConfig, useGitlabGetConfigFile, useGitlabProjects, useGrantAffiliateAccess, useHorizontalSwipe, useInfiniteGetDictionaries, useIntlayerAuth, useIntlayerOAuth, useIsDarkMode, useIsMounted, useItemSelector, useKeyboardDetector, useLinkSocial, useListAccounts, useListPasskeys, useListSSOProviders, useLogin, useLogout, useOAuth2, usePauseTranslationJob, usePersistedStore, usePushCIConfig, usePushDictionaries, usePushProjectConfiguration, useQueryClient, useRefreshAccessKey, useRegister, useRegisterAsReviewer, useRegisterSSO, useResetPassword, useResumeTranslationJob, useScreenWidth, useScrollBlockage, useScrollDetection, useScrollY, useSearch, useSearchDoc, useSelectOrganization, useSelectProject, useSendAffiliateInvitation, useSendReviewerMessage, useSession, useSignInMagicLink, useSignInPasskey, useSignInSSO, useStartRecursiveAudit, useStopTranslationJob, useSubmitReview, useSubmitShowcaseProject, useSubscribeToNewsletter, useToggleShowcaseDownvote, useToggleShowcaseUpvote, useTranslateJSONDeclaration, useTriggerBuild, useTriggerWebhook, useUnlinkAccount, useUnselectOrganization, useUnselectProject, useUnsubscribeFromNewsletter, useUpdateAffiliateStatus, useUpdateDictionary, useUpdateMissionStatus, useUpdateOrganization, useUpdateOrganizationMembers, useUpdateOrganizationMembersById, useUpdateProject, useUpdateProjectMembers, useUpdateReviewerProfile, useUpdateShowcaseProject, useUpdateTag, useUpdateUser, useUploadReviewerCoverPicture, useUploadReviewerMainPicture, useUploadUserAvatar, useUser, useValidateReviewerProfile, useVerifyBackupCode, useVerifyEmail, useVerifyTotp, useWriteDictionary };
+export { calculateIsMobile, checkIsIOS, checkIsIphoneOrSafariDevice, checkIsMac, checkIsMobileScreen, checkIsMobileUserAgent, getBreakpointFromSize, useDevice, useGetElementById, useGetElementOrWindow, useHorizontalSwipe, useIsDarkMode, useIsMounted, useItemSelector, useKeyboardDetector, usePersistedStore, useScreenWidth, useScrollBlockage, useScrollDetection, useScrollY, useSearch };