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

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

@@ -0,0 +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"}

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

@@ -1,88 +1,21 @@
 'use client';
 
-import { cn } from "../../utils/cn.mjs";
-import { Container } from "../Container/index.mjs";
-import { Flag } from "../Flags/Flag.mjs";
-import { Suspense, useEffect, useState } from "react";
+import { LanguageSection } from "./LanguageSection.mjs";
+import { Suspense, lazy, useEffect, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { ALL_LOCALES, getHTMLTextDir, getLocaleName } from "intlayer";
 
 //#region src/components/LanguageBackground/index.tsx
-const shuffleArray = (array, limit) => {
-	const shuffled = [...array];
-	for (let i = shuffled.length - 1; i > 0; i--) {
-		const randomIndex = Math.floor(Math.random() * (i + 1));
-		[shuffled[i], shuffled[randomIndex]] = [shuffled[randomIndex], shuffled[i]];
-	}
-	return limit ? shuffled.slice(0, limit) : shuffled;
-};
-const LocalCard = ({ locale, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: "group z-10 mx-8 inline-flex shrink-0 transition-transform duration-300 hover:scale-105",
-	...props,
-	children: /* @__PURE__ */ jsxs(Container, {
-		roundedSize: "xl",
-		className: "flex flex-row items-center gap-5 p-3",
-		children: [/* @__PURE__ */ jsx(Flag, {
-			locale,
-			className: "max-h-5 max-w-5 rounded-sm grayscale-80 transition duration-300 group-hover:grayscale-0",
-			width: 640,
-			height: 480,
-			loading: "lazy"
-		}), /* @__PURE__ */ jsx("span", {
-			dir: getHTMLTextDir(locale),
-			lang: locale,
-			className: "flex text-nowrap",
-			children: getLocaleName(locale)
-		})]
-	})
-});
-const LocalCardList = ({ localeList, className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: "relative flex w-full overflow-hidden",
-	...props,
-	children: /* @__PURE__ */ jsxs("div", {
-		className: cn("inline-flex shrink-0 will-change-transform", className),
-		children: [localeList.map((locale, index) => /* @__PURE__ */ jsx(LocalCard, { locale }, `${locale}-first-${index}`)), localeList.map((locale, index) => /* @__PURE__ */ jsx(LocalCard, { locale }, `${locale}-second-${index}`))]
-	})
-});
-const NUM_OF_LOCALES = 15;
-const emptyArrayOfLocale = new Array(4).fill(0).map(() => []);
-const arrayOfLocale = new Array(4).fill(0).map(() => shuffleArray(Object.values(ALL_LOCALES), NUM_OF_LOCALES));
-const LanguageSection = ({ className, ...props }) => {
-	const [localeList, setLocaleList] = useState(emptyArrayOfLocale);
-	const [firstPart, secondPart, thirdPart, fourthPart] = localeList;
+const LazyLanguageSection = lazy(() => import("./LanguageSection.mjs").then((m) => ({ default: m.LanguageSection })));
+const LanguageBackground = ({ children }) => {
+	const [mounted, setMounted] = useState(false);
 	useEffect(() => {
-		setLocaleList(arrayOfLocale);
+		setMounted(true);
 	}, []);
-	return /* @__PURE__ */ jsx("section", {
-		className: cn("mask-[linear-gradient(to_right,transparent_0,black_128px,black_calc(100%-128px),transparent_100%)] my-10 w-full overflow-hidden", className),
-		...props,
-		children: /* @__PURE__ */ jsx("div", {
-			className: "relative flex w-full flex-col gap-5 py-3",
-			children: /* @__PURE__ */ jsxs(Suspense, { children: [
-				/* @__PURE__ */ jsx(LocalCardList, {
-					localeList: firstPart,
-					className: "horizontal-loop-1"
-				}),
-				/* @__PURE__ */ jsx(LocalCardList, {
-					localeList: secondPart,
-					className: "horizontal-loop-2"
-				}),
-				/* @__PURE__ */ jsx(LocalCardList, {
-					localeList: thirdPart,
-					className: "horizontal-loop-1"
-				}),
-				/* @__PURE__ */ jsx(LocalCardList, {
-					localeList: fourthPart,
-					className: "horizontal-loop-2"
-				})
-			] })
-		})
-	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		className: "absolute top-0 left-0 z-0 flex size-full items-center justify-center",
+		children: mounted && /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(LazyLanguageSection, { className: "mt-[30%]" }) })
+	}), children] });
 };
-const LanguageBackground = ({ children }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
-	className: "absolute top-0 left-0 z-0 flex size-full items-center justify-center",
-	children: /* @__PURE__ */ jsx(LanguageSection, { className: "mt-[30%]" })
-}), children] });
 
 //#endregion
 export { LanguageBackground, LanguageSection };

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 { 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  type PropsWithChildren,\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\nexport const LanguageBackground: FC<PropsWithChildren> = ({ children }) => (\n  <>\n    <div className=\"absolute top-0 left-0 z-0 flex size-full items-center justify-center\">\n      <LanguageSection className=\"mt-[30%]\" />\n    </div>\n    {children}\n  </>\n);\n"],"mappings":";;;;;;;;;;AAoBA,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;AAEA,MAAa,sBAA6C,EAAE,eAC1D,8CACE,oBAAC,OAAD;CAAK,WAAU;WACb,oBAAC,iBAAD,EAAiB,WAAU,WAAY;AACpC,IACJ,QACD"}
+{"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"}

package/dist/esm/components/Loader/spinner.mjs

@@ -25,7 +25,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * @example
 * Custom size:
 * ```tsx
-* <Spinner className="size-8 text-red-500" strokeWidth={2} />
+* <Spinner className="size-8 text-error" strokeWidth={2} />
 * ```
 *
 * Features:

package/dist/esm/components/Loader/spinner.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.mjs","names":[],"sources":["../../../../src/components/Loader/spinner.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { SVGProps } from 'react';\n\n/**\n * Props for the Spinner component\n */\ntype SpinnerProps = SVGProps<SVGSVGElement> & {\n  /** Stroke width for the spinner animation circles. Defaults to 4 */\n  strokeWidth?: number;\n};\n\n/**\n * Spinner Component\n *\n * An animated SVG spinner that displays two expanding and fading circles\n * to indicate loading or processing states. Uses smooth CSS animations\n * with spline curves for natural motion.\n *\n * @component\n * @example\n * Basic usage:\n * ```tsx\n * <Spinner />\n * ```\n *\n * @example\n * Custom stroke width:\n * ```tsx\n * <Spinner strokeWidth={6} className=\"text-blue-500\" />\n * ```\n *\n * @example\n * Custom size:\n * ```tsx\n * <Spinner className=\"size-8 text-red-500\" strokeWidth={2} />\n * ```\n *\n * Features:\n * - Smooth expanding circle animation\n * - Customizable stroke width\n * - Inherits text color from parent (currentColor)\n * - Responsive sizing through className\n * - Infinite loop animation\n * - Two-phase animation with offset timing\n * - Optimized SVG with minimal DOM impact\n *\n * Animation Details:\n * - Duration: 1.8 seconds per cycle\n * - Two circles with 0.9s offset\n * - Radius expands from 1 to 20\n * - Opacity fades from 1 to 0\n * - Spline easing for natural motion\n *\n * @param props - SVG props with custom spinner options\n * @param props.className - CSS classes for styling and sizing\n * @param props.strokeWidth - Line thickness for the animated circles\n * @param props.color - SVG color (use className with text-color for easier styling)\n * @param props.width - SVG width (defaults to 44, use className for responsive sizing)\n * @param props.height - SVG height (defaults to 44, use className for responsive sizing)\n * @param props...rest - All other standard SVG element attributes\n *\n * @returns An animated SVG spinner element\n */\nexport const Spinner = ({ className, strokeWidth = 4 }: SpinnerProps) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"44\"\n    height=\"44\"\n    viewBox=\"0 0 44 44\"\n    stroke=\"currentColor\"\n    role=\"img\"\n    aria-label=\"Spinner\"\n    className={cn('size-full', className)}\n  >\n    <g fill=\"none\" fillRule=\"evenodd\" strokeWidth={strokeWidth}>\n      <circle cx=\"22\" cy=\"22\" r=\"1\">\n        <animate\n          attributeName=\"r\"\n          begin=\"0s\"\n          dur=\"1.8s\"\n          values=\"1; 20\"\n          calcMode=\"spline\"\n          keyTimes=\"0; 1\"\n          keySplines=\"0.165, 0.84, 0.44, 1\"\n          repeatCount=\"indefinite\"\n        />\n        <animate\n          attributeName=\"stroke-opacity\"\n          begin=\"0s\"\n          dur=\"1.8s\"\n          values=\"1; 0\"\n          calcMode=\"spline\"\n          keyTimes=\"0; 1\"\n          keySplines=\"0.3, 0.61, 0.355, 1\"\n          repeatCount=\"indefinite\"\n        />\n      </circle>\n      <circle cx=\"22\" cy=\"22\" r=\"1\">\n        <animate\n          attributeName=\"r\"\n          begin=\"-0.9s\"\n          dur=\"1.8s\"\n          values=\"1; 20\"\n          calcMode=\"spline\"\n          keyTimes=\"0; 1\"\n          keySplines=\"0.165, 0.84, 0.44, 1\"\n          repeatCount=\"indefinite\"\n        />\n        <animate\n          attributeName=\"stroke-opacity\"\n          begin=\"-0.9s\"\n          dur=\"1.8s\"\n          values=\"1; 0\"\n          calcMode=\"spline\"\n          keyTimes=\"0; 1\"\n          keySplines=\"0.3, 0.61, 0.355, 1\"\n          repeatCount=\"indefinite\"\n        />\n      </circle>\n    </g>\n  </svg>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DA,MAAa,WAAW,EAAE,WAAW,cAAc,QACjD,oBAAC,OAAD;CACE,OAAM;CACN,OAAM;CACN,QAAO;CACP,SAAQ;CACR,QAAO;CACP,MAAK;CACL,cAAW;CACX,WAAW,GAAG,aAAa,SAAS;WAEpC,qBAAC,KAAD;EAAG,MAAK;EAAO,UAAS;EAAuB;YAA/C,CACE,qBAAC,UAAD;GAAQ,IAAG;GAAK,IAAG;GAAK,GAAE;aAA1B,CACE,oBAAC,WAAD;IACE,eAAc;IACd,OAAM;IACN,KAAI;IACJ,QAAO;IACP,UAAS;IACT,UAAS;IACT,YAAW;IACX,aAAY;GACb,IACD,oBAAC,WAAD;IACE,eAAc;IACd,OAAM;IACN,KAAI;IACJ,QAAO;IACP,UAAS;IACT,UAAS;IACT,YAAW;IACX,aAAY;GACb,EACK;MACR,qBAAC,UAAD;GAAQ,IAAG;GAAK,IAAG;GAAK,GAAE;aAA1B,CACE,oBAAC,WAAD;IACE,eAAc;IACd,OAAM;IACN,KAAI;IACJ,QAAO;IACP,UAAS;IACT,UAAS;IACT,YAAW;IACX,aAAY;GACb,IACD,oBAAC,WAAD;IACE,eAAc;IACd,OAAM;IACN,KAAI;IACJ,QAAO;IACP,UAAS;IACT,UAAS;IACT,YAAW;IACX,aAAY;GACb,EACK;IACP;;AACA"}
+{"version":3,"file":"spinner.mjs","names":[],"sources":["../../../../src/components/Loader/spinner.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { SVGProps } from 'react';\n\n/**\n * Props for the Spinner component\n */\ntype SpinnerProps = SVGProps<SVGSVGElement> & {\n  /** Stroke width for the spinner animation circles. Defaults to 4 */\n  strokeWidth?: number;\n};\n\n/**\n * Spinner Component\n *\n * An animated SVG spinner that displays two expanding and fading circles\n * to indicate loading or processing states. Uses smooth CSS animations\n * with spline curves for natural motion.\n *\n * @component\n * @example\n * Basic usage:\n * ```tsx\n * <Spinner />\n * ```\n *\n * @example\n * Custom stroke width:\n * ```tsx\n * <Spinner strokeWidth={6} className=\"text-blue-500\" />\n * ```\n *\n * @example\n * Custom size:\n * ```tsx\n * <Spinner className=\"size-8 text-error\" strokeWidth={2} />\n * ```\n *\n * Features:\n * - Smooth expanding circle animation\n * - Customizable stroke width\n * - Inherits text color from parent (currentColor)\n * - Responsive sizing through className\n * - Infinite loop animation\n * - Two-phase animation with offset timing\n * - Optimized SVG with minimal DOM impact\n *\n * Animation Details:\n * - Duration: 1.8 seconds per cycle\n * - Two circles with 0.9s offset\n * - Radius expands from 1 to 20\n * - Opacity fades from 1 to 0\n * - Spline easing for natural motion\n *\n * @param props - SVG props with custom spinner options\n * @param props.className - CSS classes for styling and sizing\n * @param props.strokeWidth - Line thickness for the animated circles\n * @param props.color - SVG color (use className with text-color for easier styling)\n * @param props.width - SVG width (defaults to 44, use className for responsive sizing)\n * @param props.height - SVG height (defaults to 44, use className for responsive sizing)\n * @param props...rest - All other standard SVG element attributes\n *\n * @returns An animated SVG spinner element\n */\nexport const Spinner = ({ className, strokeWidth = 4 }: SpinnerProps) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"44\"\n    height=\"44\"\n    viewBox=\"0 0 44 44\"\n    stroke=\"currentColor\"\n    role=\"img\"\n    aria-label=\"Spinner\"\n    className={cn('size-full', className)}\n  >\n    <g fill=\"none\" fillRule=\"evenodd\" strokeWidth={strokeWidth}>\n      <circle cx=\"22\" cy=\"22\" r=\"1\">\n        <animate\n          attributeName=\"r\"\n          begin=\"0s\"\n          dur=\"1.8s\"\n          values=\"1; 20\"\n          calcMode=\"spline\"\n          keyTimes=\"0; 1\"\n          keySplines=\"0.165, 0.84, 0.44, 1\"\n          repeatCount=\"indefinite\"\n        />\n        <animate\n          attributeName=\"stroke-opacity\"\n          begin=\"0s\"\n          dur=\"1.8s\"\n          values=\"1; 0\"\n          calcMode=\"spline\"\n          keyTimes=\"0; 1\"\n          keySplines=\"0.3, 0.61, 0.355, 1\"\n          repeatCount=\"indefinite\"\n        />\n      </circle>\n      <circle cx=\"22\" cy=\"22\" r=\"1\">\n        <animate\n          attributeName=\"r\"\n          begin=\"-0.9s\"\n          dur=\"1.8s\"\n          values=\"1; 20\"\n          calcMode=\"spline\"\n          keyTimes=\"0; 1\"\n          keySplines=\"0.165, 0.84, 0.44, 1\"\n          repeatCount=\"indefinite\"\n        />\n        <animate\n          attributeName=\"stroke-opacity\"\n          begin=\"-0.9s\"\n          dur=\"1.8s\"\n          values=\"1; 0\"\n          calcMode=\"spline\"\n          keyTimes=\"0; 1\"\n          keySplines=\"0.3, 0.61, 0.355, 1\"\n          repeatCount=\"indefinite\"\n        />\n      </circle>\n    </g>\n  </svg>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DA,MAAa,WAAW,EAAE,WAAW,cAAc,QACjD,oBAAC,OAAD;CACE,OAAM;CACN,OAAM;CACN,QAAO;CACP,SAAQ;CACR,QAAO;CACP,MAAK;CACL,cAAW;CACX,WAAW,GAAG,aAAa,SAAS;WAEpC,qBAAC,KAAD;EAAG,MAAK;EAAO,UAAS;EAAuB;YAA/C,CACE,qBAAC,UAAD;GAAQ,IAAG;GAAK,IAAG;GAAK,GAAE;aAA1B,CACE,oBAAC,WAAD;IACE,eAAc;IACd,OAAM;IACN,KAAI;IACJ,QAAO;IACP,UAAS;IACT,UAAS;IACT,YAAW;IACX,aAAY;GACb,IACD,oBAAC,WAAD;IACE,eAAc;IACd,OAAM;IACN,KAAI;IACJ,QAAO;IACP,UAAS;IACT,UAAS;IACT,YAAW;IACX,aAAY;GACb,EACK;MACR,qBAAC,UAAD;GAAQ,IAAG;GAAK,IAAG;GAAK,GAAE;aAA1B,CACE,oBAAC,WAAD;IACE,eAAc;IACd,OAAM;IACN,KAAI;IACJ,QAAO;IACP,UAAS;IACT,UAAS;IACT,YAAW;IACX,aAAY;GACb,IACD,oBAAC,WAAD;IACE,eAAc;IACd,OAAM;IACN,KAAI;IACJ,QAAO;IACP,UAAS;IACT,UAAS;IACT,YAAW;IACX,aAAY;GACb,EACK;IACP;;AACA"}

package/dist/esm/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.mjs

@@ -1,11 +1,11 @@
 'use client';
 
+import { usePersistedStore } from "../../hooks/usePersistedStore.mjs";
 import { Container } from "../Container/index.mjs";
 import { Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant } from "../Button/Button.mjs";
 import { DropDown } from "../DropDown/index.mjs";
 import { Input } from "../Input/Input.mjs";
 import { SwitchSelector, SwitchSelectorColor, SwitchSelectorSize } from "../SwitchSelector/SwitchSelector.mjs";
-import { usePersistedStore } from "../../hooks/usePersistedStore.mjs";
 import { useLocaleSwitcherContent } from "./LocaleSwitcherContentContext.mjs";
 import { useMemo, useRef, useState } from "react";
 import { Check, Globe, MoveVertical } from "lucide-react";

package/dist/esm/components/Modal/Modal.mjs

@@ -1,10 +1,10 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { Container } from "../Container/index.mjs";
-import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
 import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
 import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
+import { Container } from "../Container/index.mjs";
+import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
 import { H3 } from "../Headers/index.mjs";
 import { useEffect } from "react";
 import { cva } from "class-variance-authority";

package/dist/esm/components/Navbar/MobileNavbar.mjs

@@ -1,9 +1,9 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
 import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { useScrollDetection } from "../../hooks/useScrollDetection.mjs";
+import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
 import { Burger } from "./Burger.mjs";
 import { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,8 +1,8 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
 import { useItemSelector } from "../../hooks/useItemSelector.mjs";
+import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
 import { useEffect, useRef } from "react";
 import { cva } from "class-variance-authority";
 import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";

package/dist/esm/components/Popover/dynamic.mjs

@@ -1,7 +1,7 @@
 'use client';
 
 import { Detail as Detail$1, PopoverStatic, PopoverXAlign, PopoverYAlign } from "./static.mjs";
-import { useEffect, useRef, useState } from "react";
+import { useLayoutEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Popover/dynamic.tsx
@@ -38,7 +38,7 @@ const Detail = ({ xAlign = "start", yAlign = "bellow", ...props }) => {
 	const [computedXAlign, setComputedXAlign] = useState(xAlign);
 	const [computedYAlign, setComputedYAlign] = useState(yAlign);
 	const [maxWidth, setMaxWidth] = useState(void 0);
-	useEffect(() => {
+	useLayoutEffect(() => {
 		const adjustPosition = () => {
 			if (!popoverRef.current) return;
 			const popoverElement = popoverRef.current;

package/dist/esm/components/Popover/dynamic.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic.mjs","names":["StaticDetail"],"sources":["../../../../src/components/Popover/dynamic.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useEffect, useRef, useState } from 'react';\nimport {\n  type DetailProps,\n  type PopoverProps,\n  PopoverStatic,\n  type PopoverType,\n  PopoverXAlign,\n  PopoverYAlign,\n  Detail as StaticDetail,\n} from './static';\n\n/**\n * Popover Component (Client-side)\n *\n * Client-side wrapper around the static Popover component.\n * Reuses the server-side compatible implementation.\n *\n * @param props - Popover component props\n * @returns Trigger container with popover functionality\n */\nconst PopoverComponent: FC<PopoverProps> = (props) => {\n  return <PopoverStatic {...props} />;\n};\n\n/**\n * Popover Detail Component (Client-side)\n *\n * Client-side wrapper around the static Detail component that adds automatic\n * positioning logic based on viewport constraints.\n *\n * Features:\n * - Reuses server-side compatible static Detail component\n * - Adds automatic positioning adjustment based on viewport\n * - Calculates optimal X/Y alignment to prevent overflow\n * - Dynamically adjusts max-width based on available space\n * - Listens to window resize and scroll events\n *\n * @param props - Popover Detail component props\n * @returns Positioned popover content with animations and accessibility\n */\nconst Detail: FC<DetailProps> = ({\n  xAlign = PopoverXAlign.START,\n  yAlign = PopoverYAlign.BELOW,\n  ...props\n}) => {\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const [computedXAlign, setComputedXAlign] = useState(xAlign);\n  const [computedYAlign, setComputedYAlign] = useState(yAlign);\n  const [maxWidth, setMaxWidth] = useState<number | undefined>(undefined);\n\n  useEffect(() => {\n    const adjustPosition = () => {\n      if (!popoverRef.current) return;\n\n      const popoverElement = popoverRef.current;\n      const triggerElement = document.getElementById(\n        `unrollable-panel-button-${props.identifier}`\n      );\n\n      if (!triggerElement) return;\n\n      const triggerRect = triggerElement.getBoundingClientRect();\n      const viewportWidth = window.innerWidth;\n      const viewportHeight = window.innerHeight;\n      const gap = 16; // 1rem gap\n      const padding = 16; // Additional padding from viewport edges\n\n      // Calculate maximum width based on viewport and trigger position\n      const maxWidthFromLeft = viewportWidth - triggerRect.left - padding;\n      const maxWidthFromRight = triggerRect.right - padding;\n\n      // Use the larger space to ensure popover can fit\n      const absoluteMaxWidth = Math.max(maxWidthFromLeft, maxWidthFromRight);\n\n      setMaxWidth(absoluteMaxWidth);\n\n      // Force a layout calculation by temporarily making visible if needed\n      const wasInvisible = popoverElement.classList.contains('invisible');\n      if (wasInvisible) {\n        popoverElement.style.visibility = 'hidden';\n        popoverElement.classList.remove('invisible');\n      }\n\n      // Small delay to ensure max-width is applied and content reflows\n      requestAnimationFrame(() => {\n        const popoverRect = popoverElement.getBoundingClientRect();\n\n        // Restore invisible state if it was invisible\n        if (wasInvisible) {\n          popoverElement.style.visibility = '';\n          popoverElement.classList.add('invisible');\n        }\n\n        // Determine optimal Y alignment\n        let newYAlign = yAlign;\n        const spaceBelow = viewportHeight - triggerRect.bottom - gap;\n        const spaceAbove = triggerRect.top - gap;\n\n        if (yAlign === PopoverYAlign.BELOW && spaceBelow < popoverRect.height) {\n          // Not enough space below, try above\n          if (spaceAbove >= popoverRect.height) {\n            newYAlign = PopoverYAlign.ABOVE;\n          }\n        } else if (\n          yAlign === PopoverYAlign.ABOVE &&\n          spaceAbove < popoverRect.height\n        ) {\n          // Not enough space above, try below\n          if (spaceBelow >= popoverRect.height) {\n            newYAlign = PopoverYAlign.BELOW;\n          }\n        }\n\n        // Determine optimal X alignment\n        let newXAlign = xAlign;\n        const spaceRight = viewportWidth - triggerRect.left - padding;\n        const spaceLeft = triggerRect.right - padding;\n\n        if (xAlign === PopoverXAlign.START && spaceRight < popoverRect.width) {\n          // Not enough space on the right, try left\n          if (spaceLeft >= popoverRect.width) {\n            newXAlign = PopoverXAlign.END;\n          }\n        } else if (\n          xAlign === PopoverXAlign.END &&\n          spaceLeft < popoverRect.width\n        ) {\n          // Not enough space on the left, try right\n          if (spaceRight >= popoverRect.width) {\n            newXAlign = PopoverXAlign.START;\n          }\n        }\n\n        setComputedYAlign(newYAlign);\n        setComputedXAlign(newXAlign);\n      });\n    };\n\n    // Adjust position with a slight delay to ensure DOM is ready\n    const timeoutId = setTimeout(adjustPosition, 0);\n\n    // Listen to mouse enter on the trigger to recalculate\n    const triggerElement = document.getElementById(\n      `unrollable-panel-button-${props.identifier}`\n    );\n\n    if (triggerElement) {\n      triggerElement.addEventListener('mouseenter', adjustPosition);\n      triggerElement.addEventListener('focusin', adjustPosition);\n    }\n\n    // Use ResizeObserver to detect popover content size changes\n    const resizeObserver = new ResizeObserver(() => {\n      adjustPosition();\n    });\n\n    if (popoverRef.current) {\n      resizeObserver.observe(popoverRef.current);\n    }\n\n    window.addEventListener('resize', adjustPosition);\n    window.addEventListener('scroll', adjustPosition, true);\n\n    return () => {\n      clearTimeout(timeoutId);\n      if (triggerElement) {\n        triggerElement.removeEventListener('mouseenter', adjustPosition);\n        triggerElement.removeEventListener('focusin', adjustPosition);\n      }\n      resizeObserver.disconnect();\n      window.removeEventListener('resize', adjustPosition);\n      window.removeEventListener('scroll', adjustPosition, true);\n    };\n  }, [props.identifier, xAlign, yAlign]);\n\n  // Use the static Detail component with computed alignment values\n  return (\n    <StaticDetail\n      {...props}\n      xAlign={computedXAlign}\n      yAlign={computedYAlign}\n      ref={popoverRef}\n      style={{\n        ...props.style,\n        maxWidth: maxWidth ? `${maxWidth}px` : undefined,\n      }}\n    />\n  );\n};\n\n// Create Popover with Detail attached\nexport const Popover: PopoverType = PopoverComponent as PopoverType;\n\nPopover.Detail = Detail;\n"],"mappings":";;;;;;;;;;;;;;;;AAuBA,MAAM,oBAAsC,UAAU;CACpD,OAAO,oBAAC,eAAD,EAAe,GAAI,MAAQ;AACpC;;;;;;;;;;;;;;;;;AAkBA,MAAM,UAA2B,EAC/B,kBACA,mBACA,GAAG,YACC;CACJ,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,MAAM;CAC3D,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,MAAM;CAC3D,MAAM,CAAC,UAAU,eAAe,SAA6B,MAAS;CAEtE,gBAAgB;EACd,MAAM,uBAAuB;GAC3B,IAAI,CAAC,WAAW,SAAS;GAEzB,MAAM,iBAAiB,WAAW;GAClC,MAAM,iBAAiB,SAAS,eAC9B,2BAA2B,MAAM,YACnC;GAEA,IAAI,CAAC,gBAAgB;GAErB,MAAM,cAAc,eAAe,sBAAsB;GACzD,MAAM,gBAAgB,OAAO;GAC7B,MAAM,iBAAiB,OAAO;GAC9B,MAAM,MAAM;GACZ,MAAM,UAAU;GAGhB,MAAM,mBAAmB,gBAAgB,YAAY,OAAO;GAC5D,MAAM,oBAAoB,YAAY,QAAQ;GAK9C,YAFyB,KAAK,IAAI,kBAAkB,iBAEzB,CAAC;GAG5B,MAAM,eAAe,eAAe,UAAU,SAAS,WAAW;GAClE,IAAI,cAAc;IAChB,eAAe,MAAM,aAAa;IAClC,eAAe,UAAU,OAAO,WAAW;GAC7C;GAGA,4BAA4B;IAC1B,MAAM,cAAc,eAAe,sBAAsB;IAGzD,IAAI,cAAc;KAChB,eAAe,MAAM,aAAa;KAClC,eAAe,UAAU,IAAI,WAAW;IAC1C;IAGA,IAAI,YAAY;IAChB,MAAM,aAAa,iBAAiB,YAAY,SAAS;IACzD,MAAM,aAAa,YAAY,MAAM;IAErC,IAAI,uBAAkC,aAAa,YAAY,QAE7D;SAAI,cAAc,YAAY,QAC5B;IACF,OACK,IACL,sBACA,aAAa,YAAY,QAGzB;SAAI,cAAc,YAAY,QAC5B;IACF;IAIF,IAAI,YAAY;IAChB,MAAM,aAAa,gBAAgB,YAAY,OAAO;IACtD,MAAM,YAAY,YAAY,QAAQ;IAEtC,IAAI,sBAAkC,aAAa,YAAY,OAE7D;SAAI,aAAa,YAAY,OAC3B;IACF,OACK,IACL,oBACA,YAAY,YAAY,OAGxB;SAAI,cAAc,YAAY,OAC5B;IACF;IAGF,kBAAkB,SAAS;IAC3B,kBAAkB,SAAS;GAC7B,CAAC;EACH;EAGA,MAAM,YAAY,WAAW,gBAAgB,CAAC;EAG9C,MAAM,iBAAiB,SAAS,eAC9B,2BAA2B,MAAM,YACnC;EAEA,IAAI,gBAAgB;GAClB,eAAe,iBAAiB,cAAc,cAAc;GAC5D,eAAe,iBAAiB,WAAW,cAAc;EAC3D;EAGA,MAAM,iBAAiB,IAAI,qBAAqB;GAC9C,eAAe;EACjB,CAAC;EAED,IAAI,WAAW,SACb,eAAe,QAAQ,WAAW,OAAO;EAG3C,OAAO,iBAAiB,UAAU,cAAc;EAChD,OAAO,iBAAiB,UAAU,gBAAgB,IAAI;EAEtD,aAAa;GACX,aAAa,SAAS;GACtB,IAAI,gBAAgB;IAClB,eAAe,oBAAoB,cAAc,cAAc;IAC/D,eAAe,oBAAoB,WAAW,cAAc;GAC9D;GACA,eAAe,WAAW;GAC1B,OAAO,oBAAoB,UAAU,cAAc;GACnD,OAAO,oBAAoB,UAAU,gBAAgB,IAAI;EAC3D;CACF,GAAG;EAAC,MAAM;EAAY;EAAQ;CAAM,CAAC;CAGrC,OACE,oBAACA,UAAD;EACE,GAAI;EACJ,QAAQ;EACR,QAAQ;EACR,KAAK;EACL,OAAO;GACL,GAAG,MAAM;GACT,UAAU,WAAW,GAAG,SAAS,MAAM;EACzC;CACD;AAEL;AAGA,MAAa,UAAuB;AAEpC,QAAQ,SAAS"}
+{"version":3,"file":"dynamic.mjs","names":["StaticDetail"],"sources":["../../../../src/components/Popover/dynamic.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useLayoutEffect, useRef, useState } from 'react';\nimport {\n  type DetailProps,\n  type PopoverProps,\n  PopoverStatic,\n  type PopoverType,\n  PopoverXAlign,\n  PopoverYAlign,\n  Detail as StaticDetail,\n} from './static';\n\n/**\n * Popover Component (Client-side)\n *\n * Client-side wrapper around the static Popover component.\n * Reuses the server-side compatible implementation.\n *\n * @param props - Popover component props\n * @returns Trigger container with popover functionality\n */\nconst PopoverComponent: FC<PopoverProps> = (props) => {\n  return <PopoverStatic {...props} />;\n};\n\n/**\n * Popover Detail Component (Client-side)\n *\n * Client-side wrapper around the static Detail component that adds automatic\n * positioning logic based on viewport constraints.\n *\n * Features:\n * - Reuses server-side compatible static Detail component\n * - Adds automatic positioning adjustment based on viewport\n * - Calculates optimal X/Y alignment to prevent overflow\n * - Dynamically adjusts max-width based on available space\n * - Listens to window resize and scroll events\n *\n * @param props - Popover Detail component props\n * @returns Positioned popover content with animations and accessibility\n */\nconst Detail: FC<DetailProps> = ({\n  xAlign = PopoverXAlign.START,\n  yAlign = PopoverYAlign.BELOW,\n  ...props\n}) => {\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const [computedXAlign, setComputedXAlign] = useState(xAlign);\n  const [computedYAlign, setComputedYAlign] = useState(yAlign);\n  const [maxWidth, setMaxWidth] = useState<number | undefined>(undefined);\n\n  useLayoutEffect(() => {\n    const adjustPosition = () => {\n      if (!popoverRef.current) return;\n\n      const popoverElement = popoverRef.current;\n      const triggerElement = document.getElementById(\n        `unrollable-panel-button-${props.identifier}`\n      );\n\n      if (!triggerElement) return;\n\n      const triggerRect = triggerElement.getBoundingClientRect();\n      const viewportWidth = window.innerWidth;\n      const viewportHeight = window.innerHeight;\n      const gap = 16; // 1rem gap\n      const padding = 16; // Additional padding from viewport edges\n\n      // Calculate maximum width based on viewport and trigger position\n      const maxWidthFromLeft = viewportWidth - triggerRect.left - padding;\n      const maxWidthFromRight = triggerRect.right - padding;\n\n      // Use the larger space to ensure popover can fit\n      const absoluteMaxWidth = Math.max(maxWidthFromLeft, maxWidthFromRight);\n\n      setMaxWidth(absoluteMaxWidth);\n\n      // Force a layout calculation by temporarily making visible if needed\n      const wasInvisible = popoverElement.classList.contains('invisible');\n      if (wasInvisible) {\n        popoverElement.style.visibility = 'hidden';\n        popoverElement.classList.remove('invisible');\n      }\n\n      // Small delay to ensure max-width is applied and content reflows\n      requestAnimationFrame(() => {\n        const popoverRect = popoverElement.getBoundingClientRect();\n\n        // Restore invisible state if it was invisible\n        if (wasInvisible) {\n          popoverElement.style.visibility = '';\n          popoverElement.classList.add('invisible');\n        }\n\n        // Determine optimal Y alignment\n        let newYAlign = yAlign;\n        const spaceBelow = viewportHeight - triggerRect.bottom - gap;\n        const spaceAbove = triggerRect.top - gap;\n\n        if (yAlign === PopoverYAlign.BELOW && spaceBelow < popoverRect.height) {\n          // Not enough space below, try above\n          if (spaceAbove >= popoverRect.height) {\n            newYAlign = PopoverYAlign.ABOVE;\n          }\n        } else if (\n          yAlign === PopoverYAlign.ABOVE &&\n          spaceAbove < popoverRect.height\n        ) {\n          // Not enough space above, try below\n          if (spaceBelow >= popoverRect.height) {\n            newYAlign = PopoverYAlign.BELOW;\n          }\n        }\n\n        // Determine optimal X alignment\n        let newXAlign = xAlign;\n        const spaceRight = viewportWidth - triggerRect.left - padding;\n        const spaceLeft = triggerRect.right - padding;\n\n        if (xAlign === PopoverXAlign.START && spaceRight < popoverRect.width) {\n          // Not enough space on the right, try left\n          if (spaceLeft >= popoverRect.width) {\n            newXAlign = PopoverXAlign.END;\n          }\n        } else if (\n          xAlign === PopoverXAlign.END &&\n          spaceLeft < popoverRect.width\n        ) {\n          // Not enough space on the left, try right\n          if (spaceRight >= popoverRect.width) {\n            newXAlign = PopoverXAlign.START;\n          }\n        }\n\n        setComputedYAlign(newYAlign);\n        setComputedXAlign(newXAlign);\n      });\n    };\n\n    // Adjust position with a slight delay to ensure DOM is ready\n    const timeoutId = setTimeout(adjustPosition, 0);\n\n    // Listen to mouse enter on the trigger to recalculate\n    const triggerElement = document.getElementById(\n      `unrollable-panel-button-${props.identifier}`\n    );\n\n    if (triggerElement) {\n      triggerElement.addEventListener('mouseenter', adjustPosition);\n      triggerElement.addEventListener('focusin', adjustPosition);\n    }\n\n    // Use ResizeObserver to detect popover content size changes\n    const resizeObserver = new ResizeObserver(() => {\n      adjustPosition();\n    });\n\n    if (popoverRef.current) {\n      resizeObserver.observe(popoverRef.current);\n    }\n\n    window.addEventListener('resize', adjustPosition);\n    window.addEventListener('scroll', adjustPosition, true);\n\n    return () => {\n      clearTimeout(timeoutId);\n      if (triggerElement) {\n        triggerElement.removeEventListener('mouseenter', adjustPosition);\n        triggerElement.removeEventListener('focusin', adjustPosition);\n      }\n      resizeObserver.disconnect();\n      window.removeEventListener('resize', adjustPosition);\n      window.removeEventListener('scroll', adjustPosition, true);\n    };\n  }, [props.identifier, xAlign, yAlign]);\n\n  // Use the static Detail component with computed alignment values\n  return (\n    <StaticDetail\n      {...props}\n      xAlign={computedXAlign}\n      yAlign={computedYAlign}\n      ref={popoverRef}\n      style={{\n        ...props.style,\n        maxWidth: maxWidth ? `${maxWidth}px` : undefined,\n      }}\n    />\n  );\n};\n\n// Create Popover with Detail attached\nexport const Popover: PopoverType = PopoverComponent as PopoverType;\n\nPopover.Detail = Detail;\n"],"mappings":"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"}

package/dist/esm/components/RightDrawer/RightDrawer.mjs

@@ -1,12 +1,12 @@
 'use client';
 
+import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
+import { useDevice } from "../../hooks/useDevice.mjs";
+import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { Container } from "../Container/index.mjs";
 import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
-import { useDevice } from "../../hooks/useDevice.mjs";
 import { KeyboardShortcut } from "../KeyboardShortcut/KeyboardShortcut.mjs";
 import { Popover } from "../Popover/dynamic.mjs";
-import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
-import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { MaxWidthSmoother } from "../MaxWidthSmoother/index.mjs";
 import { isElementAtTopAndNotCovered } from "./isElementAtTopAndNotCovered.mjs";
 import { useRightDrawer } from "./useRightDrawer.mjs";

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

@@ -1,8 +1,8 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { TabSelector, TabSelectorColor } from "../TabSelector/TabSelector.mjs";
 import { useHorizontalSwipe } from "../../hooks/useHorizontalSwipe.mjs";
+import { TabSelector, TabSelectorColor } from "../TabSelector/TabSelector.mjs";
 import { useTabContext } from "./TabContext.mjs";
 import { Children, createContext, isValidElement, useState } from "react";
 import { cva } from "class-variance-authority";

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

@@ -178,7 +178,7 @@ const containerVariants = cva("w-fit backdrop-blur", {
 			[`blue`]: "border-blue-500 bg-blue-500/10 text-blue-500 dark:text-blue-300",
 			[`yellow`]: "border-yellow-500 bg-yellow-500/10 text-yellow-500 dark:text-yellow-300",
 			[`green`]: "border-green-500 bg-green-500/10 text-green-500 dark:text-green-300",
-			[`red`]: "border-red-500 bg-red-500/10 text-red-500 dark:text-red-300",
+			[`red`]: "border-error bg-error/10 text-error dark:text-red-300",
 			[`orange`]: "border-orange-500 bg-orange-500/10 text-orange-500 dark:text-orange-300",
 			[`purple`]: "border-purple-500 bg-purple-500/10 text-purple-500 dark:text-purple-300",
 			[`pink`]: "border-pink-500 bg-pink-500/10 text-pink-500 dark:text-pink-300",

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

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

package/dist/esm/components/Terminal/Terminal.mjs

@@ -107,7 +107,7 @@ const Terminal = ({ className, children, isDarkMode = false, title = "bash", onC
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "mx-2 flex items-center justify-start gap-2 p-1",
 					children: [
-						/* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-red-500" }),
+						/* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-error" }),
 						/* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-yellow-500" }),
 						/* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-green-500" })
 					]

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

@@ -1 +1 @@
-{"version":3,"file":"Terminal.mjs","names":[],"sources":["../../../../src/components/Terminal/Terminal.tsx"],"sourcesContent":["'use client';\n\nimport { Container } from '@components/Container';\nimport { Input } from '@components/Input';\nimport { cn } from '@utils/cn';\nimport {\n  type FC,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  useState,\n} from 'react';\nimport { useIntlayer } from 'react-intlayer';\n\n// ANSI color code mappings to CSS colors\nconst ANSI_COLORS: Record<string, { light: string; dark: string }> = {\n  '\\x1b[0m': { light: '', dark: '' }, // RESET\n  '\\x1b[90m': { light: 'text-gray-500', dark: 'text-gray-400' }, // GREY\n  '\\x1b[38;5;239m': { light: 'text-gray-600', dark: 'text-gray-500' }, // GREY_DARK\n  '\\x1b[38;5;252m': { light: 'text-gray-300', dark: 'text-gray-300' }, // GREY_LIGHT\n  '\\x1b[34m': { light: 'text-blue-600', dark: 'text-blue-400' }, // BLUE\n  '\\x1b[31m': { light: 'text-red-600', dark: 'text-red-400' }, // RED\n  '\\x1b[32m': { light: 'text-green-600', dark: 'text-green-400' }, // GREEN\n  '\\x1b[38;5;226m': { light: 'text-yellow-500', dark: 'text-yellow-300' }, // YELLOW\n  '\\x1b[35m': { light: 'text-purple-600', dark: 'text-purple-400' }, // MAGENTA\n  '\\x1b[38;5;3m': { light: 'text-amber-600', dark: 'text-amber-300' }, // BEIGE\n  '\\x1b[38;5;208m': { light: 'text-orange-600', dark: 'text-orange-400' }, // ORANGE\n  '\\x1b[36m': { light: 'text-cyan-600', dark: 'text-cyan-400' }, // CYAN\n  '\\x1b[37m': { light: 'text-gray-800', dark: 'text-gray-200' }, // WHITE\n  '\\x1b[1m': { light: 'font-bold', dark: 'font-bold' }, // BOLD\n};\n\ninterface AnsiSegment {\n  text: string;\n  color?: string;\n  isBold?: boolean;\n}\n\nconst parseAnsiCodes = (text: string, isDarkMode: boolean): AnsiSegment[] => {\n  const segments: AnsiSegment[] = [];\n  // biome-ignore lint/suspicious/noControlCharactersInRegex: we need to parse ANSI codes\n  const ansiRegex = /(\\x1b\\[[0-9;]*m)/g;\n  const parts = text.split(ansiRegex);\n\n  let currentColor: string | undefined;\n  let isBold = false;\n\n  for (const part of parts) {\n    if (ansiRegex.test(part)) {\n      // This is an ANSI code\n      const colorMapping = ANSI_COLORS[part];\n      if (colorMapping) {\n        if (part === '\\x1b[0m') {\n          // RESET\n          currentColor = undefined;\n          isBold = false;\n        } else if (part === '\\x1b[1m') {\n          // BOLD\n          isBold = true;\n        } else {\n          currentColor = isDarkMode ? colorMapping.dark : colorMapping.light;\n        }\n      }\n    } else if (part) {\n      // This is actual text\n      segments.push({\n        text: part,\n        color: currentColor,\n        isBold,\n      });\n    }\n  }\n\n  return segments;\n};\n\nexport type TerminalProps = {\n  children: string;\n  isDarkMode?: boolean;\n  title?: string;\n  onClose?: () => void;\n  onSubmit?: (value: string) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onSubmit'>;\n\nexport const Terminal: FC<TerminalProps> = ({\n  className,\n  children,\n  isDarkMode = false,\n  title = 'bash',\n  onClose,\n  onSubmit,\n  ...props\n}) => {\n  const content = useIntlayer('terminal');\n  const lines = typeof children === 'string' ? children.split('\\n') : [];\n  const [inputValue, setInputValue] = useState('');\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Enter' && inputValue.trim()) {\n      onSubmit?.(inputValue);\n      setInputValue('');\n    }\n  };\n\n  // Explicitly type the container props to avoid type conflicts\n  const containerProps = props as Omit<\n    HTMLAttributes<HTMLDivElement>,\n    'children' | 'onSubmit'\n  >;\n\n  return (\n    <Container\n      roundedSize=\"2xl\"\n      className={cn(\n        'flex min-w-0 max-w-full flex-col overflow-hidden font-mono',\n        className\n      )}\n      {...containerProps}\n    >\n      {/* Tab bar */}\n      <div className=\"flex w-full flex-row items-center justify-start gap-1 bg-neutral-200 text-neutral text-xs dark:bg-neutral-950\">\n        <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n          <div className=\"size-3 rounded-full bg-red-500\" />\n          <div className=\"size-3 rounded-full bg-yellow-500\" />\n          <div className=\"size-3 rounded-full bg-green-500\" />\n        </div>\n        <div className=\"flex size-full overflow-y-auto\">\n          <div className=\"flex h-8 min-w-20 items-center justify-between gap-2 bg-card px-3 py-1\">\n            <span>{title}</span>\n            {onClose && (\n              <button\n                type=\"button\"\n                onClick={onClose}\n                className=\"text-neutral transition-colors hover:text-text\"\n                aria-label={content.closeTab.value}\n              >\n                ×\n              </button>\n            )}\n          </div>\n        </div>\n      </div>\n\n      {/* Terminal content - hide scrollbar */}\n      <pre className=\"min-w-0 max-w-full overflow-x-auto overflow-y-auto border-neutral/30 border-b p-3 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\">\n        <code>\n          {lines.map((line, lineIndex) => {\n            const segments = parseAnsiCodes(line, isDarkMode);\n\n            return (\n              <span className=\"line block w-full\" key={`line-${lineIndex}`}>\n                {segments.length === 0\n                  ? '\\n'\n                  : segments.map((segment, segIndex) => (\n                      <span\n                        key={`seg-${lineIndex}-${segIndex}`}\n                        className={cn(segment.color, {\n                          'font-bold': segment.isBold,\n                        })}\n                      >\n                        {segment.text}\n                      </span>\n                    ))}\n              </span>\n            );\n          })}\n        </code>\n      </pre>\n\n      {/* Input area */}\n      <Container className=\"p-2\">\n        <span className=\"text-neutral\">~/Desktop/MyApp</span>\n        <Input\n          className=\"m-0.5 w-full\"\n          variant=\"invisible\"\n          value={inputValue}\n          aria-label={content.terminalInput.value}\n          onChange={(e) => setInputValue(e.target.value)}\n          onKeyDown={handleKeyDown}\n        />\n      </Container>\n    </Container>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Terminal.mjs","names":[],"sources":["../../../../src/components/Terminal/Terminal.tsx"],"sourcesContent":["'use client';\n\nimport { Container } from '@components/Container';\nimport { Input } from '@components/Input';\nimport { cn } from '@utils/cn';\nimport {\n  type FC,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  useState,\n} from 'react';\nimport { useIntlayer } from 'react-intlayer';\n\n// ANSI color code mappings to CSS colors\nconst ANSI_COLORS: Record<string, { light: string; dark: string }> = {\n  '\\x1b[0m': { light: '', dark: '' }, // RESET\n  '\\x1b[90m': { light: 'text-gray-500', dark: 'text-gray-400' }, // GREY\n  '\\x1b[38;5;239m': { light: 'text-gray-600', dark: 'text-gray-500' }, // GREY_DARK\n  '\\x1b[38;5;252m': { light: 'text-gray-300', dark: 'text-gray-300' }, // GREY_LIGHT\n  '\\x1b[34m': { light: 'text-blue-600', dark: 'text-blue-400' }, // BLUE\n  '\\x1b[31m': { light: 'text-red-600', dark: 'text-red-400' }, // RED\n  '\\x1b[32m': { light: 'text-green-600', dark: 'text-green-400' }, // GREEN\n  '\\x1b[38;5;226m': { light: 'text-yellow-500', dark: 'text-yellow-300' }, // YELLOW\n  '\\x1b[35m': { light: 'text-purple-600', dark: 'text-purple-400' }, // MAGENTA\n  '\\x1b[38;5;3m': { light: 'text-amber-600', dark: 'text-amber-300' }, // BEIGE\n  '\\x1b[38;5;208m': { light: 'text-orange-600', dark: 'text-orange-400' }, // ORANGE\n  '\\x1b[36m': { light: 'text-cyan-600', dark: 'text-cyan-400' }, // CYAN\n  '\\x1b[37m': { light: 'text-gray-800', dark: 'text-gray-200' }, // WHITE\n  '\\x1b[1m': { light: 'font-bold', dark: 'font-bold' }, // BOLD\n};\n\ninterface AnsiSegment {\n  text: string;\n  color?: string;\n  isBold?: boolean;\n}\n\nconst parseAnsiCodes = (text: string, isDarkMode: boolean): AnsiSegment[] => {\n  const segments: AnsiSegment[] = [];\n  // biome-ignore lint/suspicious/noControlCharactersInRegex: we need to parse ANSI codes\n  const ansiRegex = /(\\x1b\\[[0-9;]*m)/g;\n  const parts = text.split(ansiRegex);\n\n  let currentColor: string | undefined;\n  let isBold = false;\n\n  for (const part of parts) {\n    if (ansiRegex.test(part)) {\n      // This is an ANSI code\n      const colorMapping = ANSI_COLORS[part];\n      if (colorMapping) {\n        if (part === '\\x1b[0m') {\n          // RESET\n          currentColor = undefined;\n          isBold = false;\n        } else if (part === '\\x1b[1m') {\n          // BOLD\n          isBold = true;\n        } else {\n          currentColor = isDarkMode ? colorMapping.dark : colorMapping.light;\n        }\n      }\n    } else if (part) {\n      // This is actual text\n      segments.push({\n        text: part,\n        color: currentColor,\n        isBold,\n      });\n    }\n  }\n\n  return segments;\n};\n\nexport type TerminalProps = {\n  children: string;\n  isDarkMode?: boolean;\n  title?: string;\n  onClose?: () => void;\n  onSubmit?: (value: string) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onSubmit'>;\n\nexport const Terminal: FC<TerminalProps> = ({\n  className,\n  children,\n  isDarkMode = false,\n  title = 'bash',\n  onClose,\n  onSubmit,\n  ...props\n}) => {\n  const content = useIntlayer('terminal');\n  const lines = typeof children === 'string' ? children.split('\\n') : [];\n  const [inputValue, setInputValue] = useState('');\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Enter' && inputValue.trim()) {\n      onSubmit?.(inputValue);\n      setInputValue('');\n    }\n  };\n\n  // Explicitly type the container props to avoid type conflicts\n  const containerProps = props as Omit<\n    HTMLAttributes<HTMLDivElement>,\n    'children' | 'onSubmit'\n  >;\n\n  return (\n    <Container\n      roundedSize=\"2xl\"\n      className={cn(\n        'flex min-w-0 max-w-full flex-col overflow-hidden font-mono',\n        className\n      )}\n      {...containerProps}\n    >\n      {/* Tab bar */}\n      <div className=\"flex w-full flex-row items-center justify-start gap-1 bg-neutral-200 text-neutral text-xs dark:bg-neutral-950\">\n        <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n          <div className=\"size-3 rounded-full bg-error\" />\n          <div className=\"size-3 rounded-full bg-yellow-500\" />\n          <div className=\"size-3 rounded-full bg-green-500\" />\n        </div>\n        <div className=\"flex size-full overflow-y-auto\">\n          <div className=\"flex h-8 min-w-20 items-center justify-between gap-2 bg-card px-3 py-1\">\n            <span>{title}</span>\n            {onClose && (\n              <button\n                type=\"button\"\n                onClick={onClose}\n                className=\"text-neutral transition-colors hover:text-text\"\n                aria-label={content.closeTab.value}\n              >\n                ×\n              </button>\n            )}\n          </div>\n        </div>\n      </div>\n\n      {/* Terminal content - hide scrollbar */}\n      <pre className=\"min-w-0 max-w-full overflow-x-auto overflow-y-auto border-neutral/30 border-b p-3 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\">\n        <code>\n          {lines.map((line, lineIndex) => {\n            const segments = parseAnsiCodes(line, isDarkMode);\n\n            return (\n              <span className=\"line block w-full\" key={`line-${lineIndex}`}>\n                {segments.length === 0\n                  ? '\\n'\n                  : segments.map((segment, segIndex) => (\n                      <span\n                        key={`seg-${lineIndex}-${segIndex}`}\n                        className={cn(segment.color, {\n                          'font-bold': segment.isBold,\n                        })}\n                      >\n                        {segment.text}\n                      </span>\n                    ))}\n              </span>\n            );\n          })}\n        </code>\n      </pre>\n\n      {/* Input area */}\n      <Container className=\"p-2\">\n        <span className=\"text-neutral\">~/Desktop/MyApp</span>\n        <Input\n          className=\"m-0.5 w-full\"\n          variant=\"invisible\"\n          value={inputValue}\n          aria-label={content.terminalInput.value}\n          onChange={(e) => setInputValue(e.target.value)}\n          onKeyDown={handleKeyDown}\n        />\n      </Container>\n    </Container>\n  );\n};\n"],"mappings":"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"}

package/dist/esm/components/TextArea/AutoSizeTextArea.mjs

@@ -2,7 +2,7 @@
 
 import { cn } from "../../utils/cn.mjs";
 import { TextArea } from "./TextArea.mjs";
-import { useEffect, useImperativeHandle, useRef } from "react";
+import { useImperativeHandle, useLayoutEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/TextArea/AutoSizeTextArea.tsx
@@ -79,7 +79,7 @@ const AutoSizedTextArea = ({ className, autoSize = true, onChange, maxRows = 999
 		const minHeight = LINE_HEIGHT + LINE_PADDING;
 		textAreaStyle.height = `${Math.max(Math.min(scrollHeight, maxHeight), minHeight)}px`;
 	};
-	useEffect(() => {
+	useLayoutEffect(() => {
 		adjustHeight();
 	}, [
 		props.value,

package/dist/esm/components/TextArea/AutoSizeTextArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AutoSizeTextArea.mjs","names":[],"sources":["../../../../src/components/TextArea/AutoSizeTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport {\n  type ChangeEventHandler,\n  type FC,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { TextArea, type TextAreaProps } from './TextArea';\n\n/**\n * Props for the AutoSizedTextArea component.\n *\n * Extends TextAreaProps with auto-sizing functionality and row limitations.\n *\n * @example\n * ```tsx\n * // Auto-sizing textarea that grows with content\n * <AutoSizedTextArea\n *   placeholder=\"Start typing and watch it grow...\"\n *   autoSize={true}\n *   maxRows={10}\n * />\n *\n * // Limited height with scroll when exceeded\n * <AutoSizedTextArea\n *   value={longText}\n *   onChange={handleChange}\n *   autoSize={true}\n *   maxRows={5}\n *   className=\"max-h-[120px]\"\n * />\n *\n * // Disable auto-sizing for fixed height\n * <AutoSizedTextArea\n *   autoSize={false}\n *   rows={3}\n *   placeholder=\"Fixed height textarea\"\n * />\n * ```\n */\nexport type AutoSizedTextAreaProps = TextAreaProps & {\n  /** Whether to automatically adjust height based on content */\n  autoSize?: boolean;\n  /** Maximum number of rows before scrolling is enabled */\n  maxRows?: number;\n};\n\nconst LINE_HEIGHT = 24; // px\nconst LINE_PADDING = 12; // px\n\n/**\n * AutoSizedTextArea Component\n *\n * An enhanced textarea that automatically adjusts its height based on content,\n * providing a smooth user experience for variable-length text input.\n *\n * ## Features\n * - **Auto-Sizing**: Dynamically grows and shrinks based on content\n * - **Row Limits**: Configurable maximum rows before scrolling\n * - **Smooth Transitions**: Seamless height adjustments as user types\n * - **Scroll Management**: Automatic overflow handling when max height reached\n * - **Performance Optimized**: Efficient height calculations and updates\n *\n * ## Technical Details\n * - Line height: 24px with 12px padding\n * - Height calculation: `scrollHeight` vs `maxRows * lineHeight + padding`\n * - Resize: Disabled when auto-sizing is active for smooth experience\n * - Ref forwarding: Supports imperative access to textarea element\n *\n * ## Use Cases\n * - Chat message composition with dynamic sizing\n * - Comment forms that expand with content\n * - Note-taking interfaces with variable length\n * - Social media post creation\n * - Code snippet input with growth limits\n *\n * @example\n * ```tsx\n * // Chat-style auto-expanding textarea\n * const [message, setMessage] = useState('');\n *\n * <AutoSizedTextArea\n *   value={message}\n *   onChange={(e) => setMessage(e.target.value)}\n *   placeholder=\"Type your message...\"\n *   autoSize={true}\n *   maxRows={8}\n *   className=\"min-h-[40px]\"\n *   onKeyDown={(e) => {\n *     if (e.key === 'Enter' && !e.shiftKey) {\n *       e.preventDefault();\n *       sendMessage(message);\n *       setMessage('');\n *     }\n *   }}\n * />\n *\n * // Note-taking with generous height limits\n * <AutoSizedTextArea\n *   defaultValue={note.content}\n *   onChange={handleNoteChange}\n *   placeholder=\"Write your notes here...\"\n *   autoSize={true}\n *   maxRows={20}\n *   variant={InputVariant.DEFAULT}\n * />\n * ```\n */\nexport const AutoSizedTextArea: FC<AutoSizedTextAreaProps> = ({\n  className,\n  autoSize = true,\n  onChange,\n  maxRows = 999,\n  ref,\n  ...props\n}) => {\n  const textAreaRef = useRef<HTMLTextAreaElement | null>(null);\n\n  useImperativeHandle(ref, () => textAreaRef.current!);\n\n  const adjustHeight = () => {\n    const textAreaEl = textAreaRef.current;\n\n    if (!textAreaEl || !autoSize) return;\n\n    const textAreaStyle = textAreaEl.style;\n\n    // Reset height to get accurate scrollHeight\n    textAreaStyle.height = 'auto';\n    const scrollHeight = textAreaEl.scrollHeight;\n    const maxHeight = LINE_HEIGHT * maxRows + LINE_PADDING;\n    const minHeight = LINE_HEIGHT + LINE_PADDING;\n\n    // Set the new height\n    textAreaStyle.height = `${Math.max(Math.min(scrollHeight, maxHeight), minHeight)}px`;\n  };\n\n  useEffect(() => {\n    adjustHeight();\n  }, [props.value, props.defaultValue, adjustHeight]);\n\n  const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {\n    onChange?.(e);\n    adjustHeight();\n  };\n\n  const setRef = (el: HTMLTextAreaElement | null) => {\n    textAreaRef.current = el;\n    if (el) {\n      adjustHeight();\n    }\n  };\n\n  return (\n    <TextArea\n      ref={setRef}\n      onChange={handleChange}\n      className={cn('overflow-y-auto', autoSize && 'resize-none', className)}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;;AAkDA,MAAM,cAAc;AACpB,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DrB,MAAa,qBAAiD,EAC5D,WACA,WAAW,MACX,UACA,UAAU,KACV,KACA,GAAG,YACC;CACJ,MAAM,cAAc,OAAmC,IAAI;CAE3D,oBAAoB,WAAW,YAAY,OAAQ;CAEnD,MAAM,qBAAqB;EACzB,MAAM,aAAa,YAAY;EAE/B,IAAI,CAAC,cAAc,CAAC,UAAU;EAE9B,MAAM,gBAAgB,WAAW;EAGjC,cAAc,SAAS;EACvB,MAAM,eAAe,WAAW;EAChC,MAAM,YAAY,cAAc,UAAU;EAC1C,MAAM,YAAY,cAAc;EAGhC,cAAc,SAAS,GAAG,KAAK,IAAI,KAAK,IAAI,cAAc,SAAS,GAAG,SAAS,EAAE;CACnF;CAEA,gBAAgB;EACd,aAAa;CACf,GAAG;EAAC,MAAM;EAAO,MAAM;EAAc;CAAY,CAAC;CAElD,MAAM,gBAAyD,MAAM;EACnE,WAAW,CAAC;EACZ,aAAa;CACf;CAEA,MAAM,UAAU,OAAmC;EACjD,YAAY,UAAU;EACtB,IAAI,IACF,aAAa;CAEjB;CAEA,OACE,oBAAC,UAAD;EACE,KAAK;EACL,UAAU;EACV,WAAW,GAAG,mBAAmB,YAAY,eAAe,SAAS;EACrE,GAAI;CACL;AAEL"}
+{"version":3,"file":"AutoSizeTextArea.mjs","names":[],"sources":["../../../../src/components/TextArea/AutoSizeTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport {\n  type ChangeEventHandler,\n  type FC,\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n} from 'react';\nimport { TextArea, type TextAreaProps } from './TextArea';\n\n/**\n * Props for the AutoSizedTextArea component.\n *\n * Extends TextAreaProps with auto-sizing functionality and row limitations.\n *\n * @example\n * ```tsx\n * // Auto-sizing textarea that grows with content\n * <AutoSizedTextArea\n *   placeholder=\"Start typing and watch it grow...\"\n *   autoSize={true}\n *   maxRows={10}\n * />\n *\n * // Limited height with scroll when exceeded\n * <AutoSizedTextArea\n *   value={longText}\n *   onChange={handleChange}\n *   autoSize={true}\n *   maxRows={5}\n *   className=\"max-h-[120px]\"\n * />\n *\n * // Disable auto-sizing for fixed height\n * <AutoSizedTextArea\n *   autoSize={false}\n *   rows={3}\n *   placeholder=\"Fixed height textarea\"\n * />\n * ```\n */\nexport type AutoSizedTextAreaProps = TextAreaProps & {\n  /** Whether to automatically adjust height based on content */\n  autoSize?: boolean;\n  /** Maximum number of rows before scrolling is enabled */\n  maxRows?: number;\n};\n\nconst LINE_HEIGHT = 24; // px\nconst LINE_PADDING = 12; // px\n\n/**\n * AutoSizedTextArea Component\n *\n * An enhanced textarea that automatically adjusts its height based on content,\n * providing a smooth user experience for variable-length text input.\n *\n * ## Features\n * - **Auto-Sizing**: Dynamically grows and shrinks based on content\n * - **Row Limits**: Configurable maximum rows before scrolling\n * - **Smooth Transitions**: Seamless height adjustments as user types\n * - **Scroll Management**: Automatic overflow handling when max height reached\n * - **Performance Optimized**: Efficient height calculations and updates\n *\n * ## Technical Details\n * - Line height: 24px with 12px padding\n * - Height calculation: `scrollHeight` vs `maxRows * lineHeight + padding`\n * - Resize: Disabled when auto-sizing is active for smooth experience\n * - Ref forwarding: Supports imperative access to textarea element\n *\n * ## Use Cases\n * - Chat message composition with dynamic sizing\n * - Comment forms that expand with content\n * - Note-taking interfaces with variable length\n * - Social media post creation\n * - Code snippet input with growth limits\n *\n * @example\n * ```tsx\n * // Chat-style auto-expanding textarea\n * const [message, setMessage] = useState('');\n *\n * <AutoSizedTextArea\n *   value={message}\n *   onChange={(e) => setMessage(e.target.value)}\n *   placeholder=\"Type your message...\"\n *   autoSize={true}\n *   maxRows={8}\n *   className=\"min-h-[40px]\"\n *   onKeyDown={(e) => {\n *     if (e.key === 'Enter' && !e.shiftKey) {\n *       e.preventDefault();\n *       sendMessage(message);\n *       setMessage('');\n *     }\n *   }}\n * />\n *\n * // Note-taking with generous height limits\n * <AutoSizedTextArea\n *   defaultValue={note.content}\n *   onChange={handleNoteChange}\n *   placeholder=\"Write your notes here...\"\n *   autoSize={true}\n *   maxRows={20}\n *   variant={InputVariant.DEFAULT}\n * />\n * ```\n */\nexport const AutoSizedTextArea: FC<AutoSizedTextAreaProps> = ({\n  className,\n  autoSize = true,\n  onChange,\n  maxRows = 999,\n  ref,\n  ...props\n}) => {\n  const textAreaRef = useRef<HTMLTextAreaElement | null>(null);\n\n  useImperativeHandle(ref, () => textAreaRef.current!);\n\n  const adjustHeight = () => {\n    const textAreaEl = textAreaRef.current;\n\n    if (!textAreaEl || !autoSize) return;\n\n    const textAreaStyle = textAreaEl.style;\n\n    // Reset height to get accurate scrollHeight\n    textAreaStyle.height = 'auto';\n    const scrollHeight = textAreaEl.scrollHeight;\n    const maxHeight = LINE_HEIGHT * maxRows + LINE_PADDING;\n    const minHeight = LINE_HEIGHT + LINE_PADDING;\n\n    // Set the new height\n    textAreaStyle.height = `${Math.max(Math.min(scrollHeight, maxHeight), minHeight)}px`;\n  };\n\n  useLayoutEffect(() => {\n    adjustHeight();\n  }, [props.value, props.defaultValue, adjustHeight]);\n\n  const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {\n    onChange?.(e);\n    adjustHeight();\n  };\n\n  const setRef = (el: HTMLTextAreaElement | null) => {\n    textAreaRef.current = el;\n    if (el) {\n      adjustHeight();\n    }\n  };\n\n  return (\n    <TextArea\n      ref={setRef}\n      onChange={handleChange}\n      className={cn('overflow-y-auto', autoSize && 'resize-none', className)}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;;AAkDA,MAAM,cAAc;AACpB,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DrB,MAAa,qBAAiD,EAC5D,WACA,WAAW,MACX,UACA,UAAU,KACV,KACA,GAAG,YACC;CACJ,MAAM,cAAc,OAAmC,IAAI;CAE3D,oBAAoB,WAAW,YAAY,OAAQ;CAEnD,MAAM,qBAAqB;EACzB,MAAM,aAAa,YAAY;EAE/B,IAAI,CAAC,cAAc,CAAC,UAAU;EAE9B,MAAM,gBAAgB,WAAW;EAGjC,cAAc,SAAS;EACvB,MAAM,eAAe,WAAW;EAChC,MAAM,YAAY,cAAc,UAAU;EAC1C,MAAM,YAAY,cAAc;EAGhC,cAAc,SAAS,GAAG,KAAK,IAAI,KAAK,IAAI,cAAc,SAAS,GAAG,SAAS,EAAE;CACnF;CAEA,sBAAsB;EACpB,aAAa;CACf,GAAG;EAAC,MAAM;EAAO,MAAM;EAAc;CAAY,CAAC;CAElD,MAAM,gBAAyD,MAAM;EACnE,WAAW,CAAC;EACZ,aAAa;CACf;CAEA,MAAM,UAAU,OAAmC;EACjD,YAAY,UAAU;EACtB,IAAI,IACF,aAAa;CAEjB;CAEA,OACE,oBAAC,UAAD;EACE,KAAK;EACL,UAAU;EACV,WAAW,GAAG,mBAAmB,YAAY,eAAe,SAAS;EACrE,GAAI;CACL;AAEL"}

package/dist/esm/components/TextArea/ContentEditableTextArea.mjs

@@ -2,7 +2,7 @@
 
 import { cn } from "../../utils/cn.mjs";
 import { inputVariants } from "../Input/Input.mjs";
-import { useEffect, useImperativeHandle, useRef, useState } from "react";
+import { useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/TextArea/ContentEditableTextArea.tsx
@@ -157,7 +157,7 @@ const useContentEditable = ({ value, defaultValue, onChange, disabled = false })
 			sel.addRange(range);
 		}
 	};
-	useEffect(() => {
+	useLayoutEffect(() => {
 		if (pendingCaretRef.current && containerRef.current) {
 			setCaretPosition(pendingCaretRef.current);
 			pendingCaretRef.current = null;
@@ -382,7 +382,7 @@ const ContentEditableTextArea = ({ value, defaultValue, onChange, placeholder, d
 			setCaretPosition(caretFromFlatOffset(offset, lines));
 		}
 	}));
-	useEffect(() => {
+	useLayoutEffect(() => {
 		if (!autoSize || !elRef.current) return;
 		const el = elRef.current;
 		const max = LINE_HEIGHT * maxRows + LINE_PADDING;