erp-pro-ui 0.1.7 → 0.1.8

package/dist/chunks/sun-to-moon-button-DcRX0obV.mjs

@@ -0,0 +1,118 @@
+import { n as useThemeContext } from "./theme-koPrLKQv.mjs";
+import { n as mergeClassNames } from "./utils-ati1KkDb.mjs";
+import { t as Button } from "./button-DddUhuR-.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/effects/sun-to-moon-button/ThemeSwitcherButtons.tsx
+var BRAND_OPTIONS = [
+	{
+		value: "purple",
+		label: "Purple",
+		swatch: "var(--ds-brand-purple)"
+	},
+	{
+		value: "teal",
+		label: "Teal",
+		swatch: "var(--ds-brand-teal)"
+	},
+	{
+		value: "yellow",
+		label: "Yellow",
+		swatch: "var(--ds-brand-yellow)"
+	},
+	{
+		value: "green",
+		label: "Green",
+		swatch: "var(--ds-brand-green)"
+	}
+];
+var VARIANT_OPTIONS = [{
+	value: "default",
+	label: "Default"
+}, {
+	value: "alt",
+	label: "Alt"
+}];
+function ToggleButton({ label, active, onClick, swatch, showBrandState = false, mode }) {
+	const isLightMode = mode === "light";
+	const toneStyle = (() => {
+		if (!showBrandState || !swatch) return;
+		if (isLightMode) return {
+			borderColor: active ? swatch : "var(--ds-border-2)",
+			backgroundColor: active ? `color-mix(in srgb, ${swatch} 12%, #ffffff)` : "#ffffff",
+			color: active ? `color-mix(in srgb, ${swatch} 76%, var(--ds-text-1))` : "var(--ds-text-2)",
+			boxShadow: active ? `0 0 0 1px color-mix(in srgb, ${swatch} 24%, transparent)` : "none"
+		};
+		return {
+			borderColor: active ? swatch : `color-mix(in srgb, ${swatch} 42%, var(--ds-border-3))`,
+			backgroundColor: active ? `color-mix(in srgb, ${swatch} 16%, var(--ds-surface-1))` : `color-mix(in srgb, ${swatch} 6%, var(--ds-surface-1))`
+		};
+	})();
+	return /* @__PURE__ */ jsxs(Button, {
+		variant: "secondary",
+		size: "small",
+		onClick,
+		className: mergeClassNames("group rounded-full border px-3 py-1.5 text-xs font-semibold transition-all duration-200", active ? "border-ds-border-1 bg-ds-surface-2 text-ds-1 shadow-sm" : "border-ds-border-3 bg-ds-surface-1 text-ds-2 hover:border-ds-border-2 hover:text-ds-1", showBrandState && isLightMode ? "bg-ds-surface-1! hover:bg-ds-surface-1!" : null, showBrandState && active ? "text-ds-1" : null),
+		style: toneStyle,
+		"aria-pressed": active,
+		children: [swatch ? /* @__PURE__ */ jsx("span", {
+			className: mergeClassNames("h-2.5 w-2.5 rounded-full ring-1 ring-black/10 transition-transform duration-200 group-hover:scale-110", active ? isLightMode ? "scale-110 ring-2 ring-black/15" : "scale-110 ring-2 ring-white/35" : "scale-100 opacity-90"),
+			style: { backgroundColor: swatch },
+			"aria-hidden": "true"
+		}) : null, /* @__PURE__ */ jsx("span", { children: label })]
+	});
+}
+function ThemeSwitcherButtons({ className }) {
+	const { mode, theme, variant, setMode, setTheme, setVariant } = useThemeContext();
+	return /* @__PURE__ */ jsx("div", {
+		className: mergeClassNames("w-full rounded-2xl border border-ds-border-2 bg-ds-surface-1 p-4 shadow-sm", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "space-y-3",
+			children: [
+				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+					className: "mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3",
+					children: "Mode"
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap gap-2",
+					children: [/* @__PURE__ */ jsx(ToggleButton, {
+						label: "Light",
+						active: mode === "light",
+						onClick: () => setMode("light")
+					}), /* @__PURE__ */ jsx(ToggleButton, {
+						label: "Dark",
+						active: mode === "dark",
+						onClick: () => setMode("dark")
+					})]
+				})] }),
+				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+					className: "mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3",
+					children: "Brand"
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex flex-wrap gap-2",
+					children: BRAND_OPTIONS.map((option) => /* @__PURE__ */ jsx(ToggleButton, {
+						label: option.label,
+						active: theme === option.value,
+						onClick: () => setTheme(option.value),
+						swatch: option.swatch,
+						showBrandState: true,
+						mode
+					}, option.value))
+				})] }),
+				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+					className: "mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3",
+					children: "Variant"
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex flex-wrap gap-2",
+					children: VARIANT_OPTIONS.map((option) => /* @__PURE__ */ jsx(ToggleButton, {
+						label: option.label,
+						active: variant === option.value,
+						onClick: () => setVariant(option.value)
+					}, option.value))
+				})] })
+			]
+		})
+	});
+}
+//#endregion
+export { ThemeSwitcherButtons as t };
+
+//# sourceMappingURL=sun-to-moon-button-DcRX0obV.mjs.map

package/dist/chunks/sun-to-moon-button-DcRX0obV.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sun-to-moon-button-DcRX0obV.mjs","names":[],"sources":["../../src/components/effects/sun-to-moon-button/ThemeSwitcherButtons.tsx"],"sourcesContent":["import type {\n  ThemeColorType,\n  ThemeModeType,\n  ThemeVariantType,\n} from \"../../../foundations/theme\";\nimport { useThemeContext } from \"../../../foundations/theme\";\nimport { Button } from \"../../forms/button\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { CSSProperties } from \"react\";\n\nexport interface ThemeSwitcherButtonsProps {\n  className?: string;\n}\n\nconst BRAND_OPTIONS: Array<{\n  value: ThemeColorType;\n  label: string;\n  swatch: string;\n}> = [\n  { value: \"purple\", label: \"Purple\", swatch: \"var(--ds-brand-purple)\" },\n  { value: \"teal\", label: \"Teal\", swatch: \"var(--ds-brand-teal)\" },\n  { value: \"yellow\", label: \"Yellow\", swatch: \"var(--ds-brand-yellow)\" },\n  { value: \"green\", label: \"Green\", swatch: \"var(--ds-brand-green)\" },\n];\n\nconst VARIANT_OPTIONS: Array<{\n  value: ThemeVariantType;\n  label: string;\n}> = [\n  { value: \"default\", label: \"Default\" },\n  { value: \"alt\", label: \"Alt\" },\n];\n\nfunction ToggleButton({\n  label,\n  active,\n  onClick,\n  swatch,\n  showBrandState = false,\n  mode,\n}: {\n  label: string;\n  active: boolean;\n  onClick: () => void;\n  swatch?: string;\n  showBrandState?: boolean;\n  mode?: ThemeModeType;\n}) {\n  const isLightMode = mode === \"light\";\n  const toneStyle: CSSProperties | undefined = (() => {\n    if (!showBrandState || !swatch) {\n      return undefined;\n    }\n\n    if (isLightMode) {\n      return {\n        borderColor: active ? swatch : \"var(--ds-border-2)\",\n        backgroundColor: active\n          ? `color-mix(in srgb, ${swatch} 12%, #ffffff)`\n          : \"#ffffff\",\n        color: active\n          ? `color-mix(in srgb, ${swatch} 76%, var(--ds-text-1))`\n          : \"var(--ds-text-2)\",\n        boxShadow: active\n          ? `0 0 0 1px color-mix(in srgb, ${swatch} 24%, transparent)`\n          : \"none\",\n      };\n    }\n\n    return {\n      borderColor: active\n        ? swatch\n        : `color-mix(in srgb, ${swatch} 42%, var(--ds-border-3))`,\n      backgroundColor: active\n        ? `color-mix(in srgb, ${swatch} 16%, var(--ds-surface-1))`\n        : `color-mix(in srgb, ${swatch} 6%, var(--ds-surface-1))`,\n    };\n  })();\n\n  return (\n    <Button\n      variant=\"secondary\"\n      size=\"small\"\n      onClick={onClick}\n      className={mergeClassNames(\n        \"group rounded-full border px-3 py-1.5 text-xs font-semibold transition-all duration-200\",\n        active\n          ? \"border-ds-border-1 bg-ds-surface-2 text-ds-1 shadow-sm\"\n          : \"border-ds-border-3 bg-ds-surface-1 text-ds-2 hover:border-ds-border-2 hover:text-ds-1\",\n        showBrandState && isLightMode\n          ? \"bg-ds-surface-1! hover:bg-ds-surface-1!\"\n          : null,\n        showBrandState && active ? \"text-ds-1\" : null,\n      )}\n      style={toneStyle}\n      aria-pressed={active}\n    >\n      {swatch ? (\n        <span\n          className={mergeClassNames(\n            \"h-2.5 w-2.5 rounded-full ring-1 ring-black/10 transition-transform duration-200 group-hover:scale-110\",\n            active\n              ? isLightMode\n                ? \"scale-110 ring-2 ring-black/15\"\n                : \"scale-110 ring-2 ring-white/35\"\n              : \"scale-100 opacity-90\",\n          )}\n          style={{ backgroundColor: swatch }}\n          aria-hidden=\"true\"\n        />\n      ) : null}\n      <span>{label}</span>\n    </Button>\n  );\n}\n\nexport default function ThemeSwitcherButtons({\n  className,\n}: ThemeSwitcherButtonsProps) {\n  const { mode, theme, variant, setMode, setTheme, setVariant } =\n    useThemeContext();\n\n  return (\n    <div\n      className={mergeClassNames(\n        \"w-full rounded-2xl border border-ds-border-2 bg-ds-surface-1 p-4 shadow-sm\",\n        className,\n      )}\n    >\n      <div className=\"space-y-3\">\n        <div>\n          <p className=\"mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3\">\n            Mode\n          </p>\n          <div className=\"flex flex-wrap gap-2\">\n            <ToggleButton\n              label=\"Light\"\n              active={mode === \"light\"}\n              onClick={() => setMode(\"light\")}\n            />\n            <ToggleButton\n              label=\"Dark\"\n              active={mode === \"dark\"}\n              onClick={() => setMode(\"dark\")}\n            />\n          </div>\n        </div>\n\n        <div>\n          <p className=\"mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3\">\n            Brand\n          </p>\n          <div className=\"flex flex-wrap gap-2\">\n            {BRAND_OPTIONS.map((option) => (\n              <ToggleButton\n                key={option.value}\n                label={option.label}\n                active={theme === option.value}\n                onClick={() => setTheme(option.value)}\n                swatch={option.swatch}\n                showBrandState\n                mode={mode}\n              />\n            ))}\n          </div>\n        </div>\n\n        <div>\n          <p className=\"mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3\">\n            Variant\n          </p>\n          <div className=\"flex flex-wrap gap-2\">\n            {VARIANT_OPTIONS.map((option) => (\n              <ToggleButton\n                key={option.value}\n                label={option.label}\n                active={variant === option.value}\n                onClick={() => setVariant(option.value)}\n              />\n            ))}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAcA,IAAM,gBAID;CACH;EAAE,OAAO;EAAU,OAAO;EAAU,QAAQ;EAA0B;CACtE;EAAE,OAAO;EAAQ,OAAO;EAAQ,QAAQ;EAAwB;CAChE;EAAE,OAAO;EAAU,OAAO;EAAU,QAAQ;EAA0B;CACtE;EAAE,OAAO;EAAS,OAAO;EAAS,QAAQ;EAAyB;CACpE;AAED,IAAM,kBAGD,CACH;CAAE,OAAO;CAAW,OAAO;CAAW,EACtC;CAAE,OAAO;CAAO,OAAO;CAAO,CAC/B;AAED,SAAS,aAAa,EACpB,OACA,QACA,SACA,QACA,iBAAiB,OACjB,QAQC;CACD,MAAM,cAAc,SAAS;CAC7B,MAAM,mBAA8C;AAClD,MAAI,CAAC,kBAAkB,CAAC,OACtB;AAGF,MAAI,YACF,QAAO;GACL,aAAa,SAAS,SAAS;GAC/B,iBAAiB,SACb,sBAAsB,OAAO,kBAC7B;GACJ,OAAO,SACH,sBAAsB,OAAO,2BAC7B;GACJ,WAAW,SACP,gCAAgC,OAAO,sBACvC;GACL;AAGH,SAAO;GACL,aAAa,SACT,SACA,sBAAsB,OAAO;GACjC,iBAAiB,SACb,sBAAsB,OAAO,8BAC7B,sBAAsB,OAAO;GAClC;KACC;AAEJ,QACE,qBAAC,QAAD;EACE,SAAQ;EACR,MAAK;EACI;EACT,WAAW,gBACT,2FACA,SACI,2DACA,yFACJ,kBAAkB,cACd,4CACA,MACJ,kBAAkB,SAAS,cAAc,KAC1C;EACD,OAAO;EACP,gBAAc;YAfhB,CAiBG,SACC,oBAAC,QAAD;GACE,WAAW,gBACT,yGACA,SACI,cACE,mCACA,mCACF,uBACL;GACD,OAAO,EAAE,iBAAiB,QAAQ;GAClC,eAAY;GACZ,CAAA,GACA,MACJ,oBAAC,QAAD,EAAA,UAAO,OAAa,CAAA,CACb;;;AAIb,SAAwB,qBAAqB,EAC3C,aAC4B;CAC5B,MAAM,EAAE,MAAM,OAAO,SAAS,SAAS,UAAU,eAC/C,iBAAiB;AAEnB,QACE,oBAAC,OAAD;EACE,WAAW,gBACT,8EACA,UACD;YAED,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,qBAAC,OAAD,EAAA,UAAA,CACE,oBAAC,KAAD;KAAG,WAAU;eAAuE;KAEhF,CAAA,EACJ,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,cAAD;MACE,OAAM;MACN,QAAQ,SAAS;MACjB,eAAe,QAAQ,QAAQ;MAC/B,CAAA,EACF,oBAAC,cAAD;MACE,OAAM;MACN,QAAQ,SAAS;MACjB,eAAe,QAAQ,OAAO;MAC9B,CAAA,CACE;OACF,EAAA,CAAA;IAEN,qBAAC,OAAD,EAAA,UAAA,CACE,oBAAC,KAAD;KAAG,WAAU;eAAuE;KAEhF,CAAA,EACJ,oBAAC,OAAD;KAAK,WAAU;eACZ,cAAc,KAAK,WAClB,oBAAC,cAAD;MAEE,OAAO,OAAO;MACd,QAAQ,UAAU,OAAO;MACzB,eAAe,SAAS,OAAO,MAAM;MACrC,QAAQ,OAAO;MACf,gBAAA;MACM;MACN,EAPK,OAAO,MAOZ,CACF;KACE,CAAA,CACF,EAAA,CAAA;IAEN,qBAAC,OAAD,EAAA,UAAA,CACE,oBAAC,KAAD;KAAG,WAAU;eAAuE;KAEhF,CAAA,EACJ,oBAAC,OAAD;KAAK,WAAU;eACZ,gBAAgB,KAAK,WACpB,oBAAC,cAAD;MAEE,OAAO,OAAO;MACd,QAAQ,YAAY,OAAO;MAC3B,eAAe,WAAW,OAAO,MAAM;MACvC,EAJK,OAAO,MAIZ,CACF;KACE,CAAA,CACF,EAAA,CAAA;IACF;;EACF,CAAA"}

package/dist/chunks/sun-to-moon-button-De0_Sf01.cjs

@@ -0,0 +1,124 @@
+require("./chunk-B_GkZjkl.cjs");
+const require_theme = require("./theme-D6B-FaoE.cjs");
+const require_utils = require("./utils-B4SmmY4J.cjs");
+const require_button = require("./button-xqernofO.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/effects/sun-to-moon-button/ThemeSwitcherButtons.tsx
+var BRAND_OPTIONS = [
+	{
+		value: "purple",
+		label: "Purple",
+		swatch: "var(--ds-brand-purple)"
+	},
+	{
+		value: "teal",
+		label: "Teal",
+		swatch: "var(--ds-brand-teal)"
+	},
+	{
+		value: "yellow",
+		label: "Yellow",
+		swatch: "var(--ds-brand-yellow)"
+	},
+	{
+		value: "green",
+		label: "Green",
+		swatch: "var(--ds-brand-green)"
+	}
+];
+var VARIANT_OPTIONS = [{
+	value: "default",
+	label: "Default"
+}, {
+	value: "alt",
+	label: "Alt"
+}];
+function ToggleButton({ label, active, onClick, swatch, showBrandState = false, mode }) {
+	const isLightMode = mode === "light";
+	const toneStyle = (() => {
+		if (!showBrandState || !swatch) return;
+		if (isLightMode) return {
+			borderColor: active ? swatch : "var(--ds-border-2)",
+			backgroundColor: active ? `color-mix(in srgb, ${swatch} 12%, #ffffff)` : "#ffffff",
+			color: active ? `color-mix(in srgb, ${swatch} 76%, var(--ds-text-1))` : "var(--ds-text-2)",
+			boxShadow: active ? `0 0 0 1px color-mix(in srgb, ${swatch} 24%, transparent)` : "none"
+		};
+		return {
+			borderColor: active ? swatch : `color-mix(in srgb, ${swatch} 42%, var(--ds-border-3))`,
+			backgroundColor: active ? `color-mix(in srgb, ${swatch} 16%, var(--ds-surface-1))` : `color-mix(in srgb, ${swatch} 6%, var(--ds-surface-1))`
+		};
+	})();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_button.Button, {
+		variant: "secondary",
+		size: "small",
+		onClick,
+		className: require_utils.mergeClassNames("group rounded-full border px-3 py-1.5 text-xs font-semibold transition-all duration-200", active ? "border-ds-border-1 bg-ds-surface-2 text-ds-1 shadow-sm" : "border-ds-border-3 bg-ds-surface-1 text-ds-2 hover:border-ds-border-2 hover:text-ds-1", showBrandState && isLightMode ? "bg-ds-surface-1! hover:bg-ds-surface-1!" : null, showBrandState && active ? "text-ds-1" : null),
+		style: toneStyle,
+		"aria-pressed": active,
+		children: [swatch ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: require_utils.mergeClassNames("h-2.5 w-2.5 rounded-full ring-1 ring-black/10 transition-transform duration-200 group-hover:scale-110", active ? isLightMode ? "scale-110 ring-2 ring-black/15" : "scale-110 ring-2 ring-white/35" : "scale-100 opacity-90"),
+			style: { backgroundColor: swatch },
+			"aria-hidden": "true"
+		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label })]
+	});
+}
+function ThemeSwitcherButtons({ className }) {
+	const { mode, theme, variant, setMode, setTheme, setVariant } = require_theme.useThemeContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_utils.mergeClassNames("w-full rounded-2xl border border-ds-border-2 bg-ds-surface-1 p-4 shadow-sm", className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "space-y-3",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3",
+					children: "Mode"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex flex-wrap gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleButton, {
+						label: "Light",
+						active: mode === "light",
+						onClick: () => setMode("light")
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleButton, {
+						label: "Dark",
+						active: mode === "dark",
+						onClick: () => setMode("dark")
+					})]
+				})] }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3",
+					children: "Brand"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex flex-wrap gap-2",
+					children: BRAND_OPTIONS.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleButton, {
+						label: option.label,
+						active: theme === option.value,
+						onClick: () => setTheme(option.value),
+						swatch: option.swatch,
+						showBrandState: true,
+						mode
+					}, option.value))
+				})] }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3",
+					children: "Variant"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex flex-wrap gap-2",
+					children: VARIANT_OPTIONS.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleButton, {
+						label: option.label,
+						active: variant === option.value,
+						onClick: () => setVariant(option.value)
+					}, option.value))
+				})] })
+			]
+		})
+	});
+}
+//#endregion
+Object.defineProperty(exports, "ThemeSwitcherButtons", {
+	enumerable: true,
+	get: function() {
+		return ThemeSwitcherButtons;
+	}
+});
+
+//# sourceMappingURL=sun-to-moon-button-De0_Sf01.cjs.map

package/dist/chunks/sun-to-moon-button-De0_Sf01.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sun-to-moon-button-De0_Sf01.cjs","names":[],"sources":["../../src/components/effects/sun-to-moon-button/ThemeSwitcherButtons.tsx"],"sourcesContent":["import type {\n  ThemeColorType,\n  ThemeModeType,\n  ThemeVariantType,\n} from \"../../../foundations/theme\";\nimport { useThemeContext } from \"../../../foundations/theme\";\nimport { Button } from \"../../forms/button\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { CSSProperties } from \"react\";\n\nexport interface ThemeSwitcherButtonsProps {\n  className?: string;\n}\n\nconst BRAND_OPTIONS: Array<{\n  value: ThemeColorType;\n  label: string;\n  swatch: string;\n}> = [\n  { value: \"purple\", label: \"Purple\", swatch: \"var(--ds-brand-purple)\" },\n  { value: \"teal\", label: \"Teal\", swatch: \"var(--ds-brand-teal)\" },\n  { value: \"yellow\", label: \"Yellow\", swatch: \"var(--ds-brand-yellow)\" },\n  { value: \"green\", label: \"Green\", swatch: \"var(--ds-brand-green)\" },\n];\n\nconst VARIANT_OPTIONS: Array<{\n  value: ThemeVariantType;\n  label: string;\n}> = [\n  { value: \"default\", label: \"Default\" },\n  { value: \"alt\", label: \"Alt\" },\n];\n\nfunction ToggleButton({\n  label,\n  active,\n  onClick,\n  swatch,\n  showBrandState = false,\n  mode,\n}: {\n  label: string;\n  active: boolean;\n  onClick: () => void;\n  swatch?: string;\n  showBrandState?: boolean;\n  mode?: ThemeModeType;\n}) {\n  const isLightMode = mode === \"light\";\n  const toneStyle: CSSProperties | undefined = (() => {\n    if (!showBrandState || !swatch) {\n      return undefined;\n    }\n\n    if (isLightMode) {\n      return {\n        borderColor: active ? swatch : \"var(--ds-border-2)\",\n        backgroundColor: active\n          ? `color-mix(in srgb, ${swatch} 12%, #ffffff)`\n          : \"#ffffff\",\n        color: active\n          ? `color-mix(in srgb, ${swatch} 76%, var(--ds-text-1))`\n          : \"var(--ds-text-2)\",\n        boxShadow: active\n          ? `0 0 0 1px color-mix(in srgb, ${swatch} 24%, transparent)`\n          : \"none\",\n      };\n    }\n\n    return {\n      borderColor: active\n        ? swatch\n        : `color-mix(in srgb, ${swatch} 42%, var(--ds-border-3))`,\n      backgroundColor: active\n        ? `color-mix(in srgb, ${swatch} 16%, var(--ds-surface-1))`\n        : `color-mix(in srgb, ${swatch} 6%, var(--ds-surface-1))`,\n    };\n  })();\n\n  return (\n    <Button\n      variant=\"secondary\"\n      size=\"small\"\n      onClick={onClick}\n      className={mergeClassNames(\n        \"group rounded-full border px-3 py-1.5 text-xs font-semibold transition-all duration-200\",\n        active\n          ? \"border-ds-border-1 bg-ds-surface-2 text-ds-1 shadow-sm\"\n          : \"border-ds-border-3 bg-ds-surface-1 text-ds-2 hover:border-ds-border-2 hover:text-ds-1\",\n        showBrandState && isLightMode\n          ? \"bg-ds-surface-1! hover:bg-ds-surface-1!\"\n          : null,\n        showBrandState && active ? \"text-ds-1\" : null,\n      )}\n      style={toneStyle}\n      aria-pressed={active}\n    >\n      {swatch ? (\n        <span\n          className={mergeClassNames(\n            \"h-2.5 w-2.5 rounded-full ring-1 ring-black/10 transition-transform duration-200 group-hover:scale-110\",\n            active\n              ? isLightMode\n                ? \"scale-110 ring-2 ring-black/15\"\n                : \"scale-110 ring-2 ring-white/35\"\n              : \"scale-100 opacity-90\",\n          )}\n          style={{ backgroundColor: swatch }}\n          aria-hidden=\"true\"\n        />\n      ) : null}\n      <span>{label}</span>\n    </Button>\n  );\n}\n\nexport default function ThemeSwitcherButtons({\n  className,\n}: ThemeSwitcherButtonsProps) {\n  const { mode, theme, variant, setMode, setTheme, setVariant } =\n    useThemeContext();\n\n  return (\n    <div\n      className={mergeClassNames(\n        \"w-full rounded-2xl border border-ds-border-2 bg-ds-surface-1 p-4 shadow-sm\",\n        className,\n      )}\n    >\n      <div className=\"space-y-3\">\n        <div>\n          <p className=\"mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3\">\n            Mode\n          </p>\n          <div className=\"flex flex-wrap gap-2\">\n            <ToggleButton\n              label=\"Light\"\n              active={mode === \"light\"}\n              onClick={() => setMode(\"light\")}\n            />\n            <ToggleButton\n              label=\"Dark\"\n              active={mode === \"dark\"}\n              onClick={() => setMode(\"dark\")}\n            />\n          </div>\n        </div>\n\n        <div>\n          <p className=\"mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3\">\n            Brand\n          </p>\n          <div className=\"flex flex-wrap gap-2\">\n            {BRAND_OPTIONS.map((option) => (\n              <ToggleButton\n                key={option.value}\n                label={option.label}\n                active={theme === option.value}\n                onClick={() => setTheme(option.value)}\n                swatch={option.swatch}\n                showBrandState\n                mode={mode}\n              />\n            ))}\n          </div>\n        </div>\n\n        <div>\n          <p className=\"mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3\">\n            Variant\n          </p>\n          <div className=\"flex flex-wrap gap-2\">\n            {VARIANT_OPTIONS.map((option) => (\n              <ToggleButton\n                key={option.value}\n                label={option.label}\n                active={variant === option.value}\n                onClick={() => setVariant(option.value)}\n              />\n            ))}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/{switch-hd7zTBD_.mjs → switch-C1gKE0m0.mjs}

@@ -2,19 +2,35 @@ import { forwardRef, useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/forms/switch/Switch.tsx
 var sanitizeId = (value) => value.replace(/[^a-zA-Z0-9_-]/g, "-");
-var Switch = forwardRef(({ className = "", label, error, id, checked, ...props }, ref) => {
+var rtlLanguages = /^(ar|fa|ur|he)(-|$)/i;
+function resolveDirection(direction) {
+	if (direction === "rtl" || direction === "ltr") return direction;
+	if (typeof document !== "undefined") {
+		const explicitDirection = document.documentElement.getAttribute("dir") ?? void 0;
+		if (explicitDirection === "rtl" || explicitDirection === "ltr") return explicitDirection;
+	}
+	if (typeof navigator !== "undefined" && rtlLanguages.test(navigator.language)) return "rtl";
+	return "ltr";
+}
+var Switch = forwardRef(({ className = "", label, error, id, checked, dir, ...props }, ref) => {
 	const generatedId = useId();
 	const switchId = id || `switch-${sanitizeId(generatedId)}`;
+	const isRtl = resolveDirection(dir) === "rtl";
 	return /* @__PURE__ */ jsxs("div", {
-		className: `flex items-center space-x-2 ${className}`.trim().replace(/\s+/g, " "),
+		className: `flex items-center gap-2 ${className}`.trim().replace(/\s+/g, " "),
+		dir,
 		children: [
 			/* @__PURE__ */ jsxs("label", {
 				htmlFor: switchId,
+				style: {
+					borderRadius: "var(--border-radius-full, 9999px)",
+					...checked ? {} : { background: "#E0E5F2" }
+				},
 				className: `
             relative inline-flex h-6 w-11 cursor-pointer items-center rounded-full transition-colors duration-200
             focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus focus-visible:ring-offset-2 focus-visible:ring-offset-ds-surface-1
             disabled:cursor-not-allowed disabled:opacity-50
-            ${checked ? "bg-ds-accent" : "bg-ds-surface-3"}
+            ${checked ? "bg-ds-accent" : ""}
           `.trim().replace(/\s+/g, " "),
 				children: [/* @__PURE__ */ jsx("input", {
 					ref,
@@ -36,12 +52,12 @@ var Switch = forwardRef(({ className = "", label, error, id, checked, ...props }
               transition-transform
               duration-300
               ease-in-out
-              ${checked ? "translate-x-6" : "translate-x-1"}
+              ${checked ? isRtl ? "translate-x-1" : "translate-x-6" : isRtl ? "translate-x-6" : "translate-x-1"}
             `.trim().replace(/\s+/g, " ") })]
 			}),
 			label && /* @__PURE__ */ jsx("label", {
 				htmlFor: switchId,
-				className: "text-sm font-medium leading-none text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer",
+				className: `cursor-pointer text-sm font-medium leading-none text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 ${isRtl ? "text-right" : "text-left"}`,
 				children: label
 			}),
 			error && /* @__PURE__ */ jsx("p", {
@@ -55,4 +71,4 @@ Switch.displayName = "Switch";
 //#endregion
 export { Switch as t };
 
-//# sourceMappingURL=switch-hd7zTBD_.mjs.map
+//# sourceMappingURL=switch-C1gKE0m0.mjs.map

package/dist/chunks/switch-C1gKE0m0.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-C1gKE0m0.mjs","names":[],"sources":["../../src/components/forms/switch/Switch.tsx"],"sourcesContent":["import { forwardRef, useId } from \"react\";\n\nimport type { SwitchProps } from \"./types\";\n\nconst sanitizeId = (value: string) => value.replace(/[^a-zA-Z0-9_-]/g, \"-\");\nconst rtlLanguages = /^(ar|fa|ur|he)(-|$)/i;\n\nfunction resolveDirection(\n  direction: string | undefined,\n): \"ltr\" | \"rtl\" {\n  if (direction === \"rtl\" || direction === \"ltr\") {\n    return direction;\n  }\n\n  if (typeof document !== \"undefined\") {\n    const explicitDirection =\n      document.documentElement.getAttribute(\"dir\") ?? undefined;\n\n    if (explicitDirection === \"rtl\" || explicitDirection === \"ltr\") {\n      return explicitDirection;\n    }\n  }\n\n  if (\n    typeof navigator !== \"undefined\" &&\n    rtlLanguages.test(navigator.language)\n  ) {\n    return \"rtl\";\n  }\n\n  return \"ltr\";\n}\n\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(\n  ({ className = \"\", label, error, id, checked, dir, ...props }, ref) => {\n    const generatedId = useId();\n    const switchId = id || `switch-${sanitizeId(generatedId)}`;\n    const isRtl = resolveDirection(dir) === \"rtl\";\n    const containerClasses = `flex items-center gap-2 ${className}`\n      .trim()\n      .replace(/\\s+/g, \" \");\n\n    return (\n      <div className={containerClasses} dir={dir}>\n        <label\n          htmlFor={switchId}\n          style={{\n            borderRadius: \"var(--border-radius-full, 9999px)\",\n            ...(checked ? {} : { background: \"#E0E5F2\" }),\n          }}\n          className={`\n            relative inline-flex h-6 w-11 cursor-pointer items-center rounded-full transition-colors duration-200\n            focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus focus-visible:ring-offset-2 focus-visible:ring-offset-ds-surface-1\n            disabled:cursor-not-allowed disabled:opacity-50\n            ${checked ? \"bg-ds-accent\" : \"\"}\n          `\n            .trim()\n            .replace(/\\s+/g, \" \")}\n        >\n          <input\n            ref={ref}\n            type=\"checkbox\"\n            id={switchId}\n            className=\"sr-only\"\n            checked={checked}\n            {...props}\n          />\n          <span\n            className={`\n              pointer-events-none\n              inline-block\n              h-4\n              w-4\n              transform\n              rounded-full\n              bg-ds-surface-1\n              shadow-lg\n              ring-0\n              transition-transform\n              duration-300\n              ease-in-out\n              ${checked\n      ? isRtl\n        ? \"translate-x-1\"\n        : \"translate-x-6\"\n      : isRtl\n        ? \"translate-x-6\"\n        : \"translate-x-1\"}\n            `\n              .trim()\n              .replace(/\\s+/g, \" \")}\n          />\n        </label>\n        {label && (\n          <label\n            htmlFor={switchId}\n            className={`cursor-pointer text-sm font-medium leading-none text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 ${\n              isRtl ? \"text-right\" : \"text-left\"\n            }`}\n          >\n            {label}\n          </label>\n        )}\n        {error && (\n          <p className=\"text-sm font-medium text-destructive mt-1\">{error}</p>\n        )}\n      </div>\n    );\n  },\n);\n\nSwitch.displayName = \"Switch\";\n"],"mappings":";;;AAIA,IAAM,cAAc,UAAkB,MAAM,QAAQ,mBAAmB,IAAI;AAC3E,IAAM,eAAe;AAErB,SAAS,iBACP,WACe;AACf,KAAI,cAAc,SAAS,cAAc,MACvC,QAAO;AAGT,KAAI,OAAO,aAAa,aAAa;EACnC,MAAM,oBACJ,SAAS,gBAAgB,aAAa,MAAM,IAAI,KAAA;AAElD,MAAI,sBAAsB,SAAS,sBAAsB,MACvD,QAAO;;AAIX,KACE,OAAO,cAAc,eACrB,aAAa,KAAK,UAAU,SAAS,CAErC,QAAO;AAGT,QAAO;;AAGT,IAAa,SAAS,YACnB,EAAE,YAAY,IAAI,OAAO,OAAO,IAAI,SAAS,KAAK,GAAG,SAAS,QAAQ;CACrE,MAAM,cAAc,OAAO;CAC3B,MAAM,WAAW,MAAM,UAAU,WAAW,YAAY;CACxD,MAAM,QAAQ,iBAAiB,IAAI,KAAK;AAKxC,QACE,qBAAC,OAAD;EAAK,WALkB,2BAA2B,YACjD,MAAM,CACN,QAAQ,QAAQ,IAAI;EAGkB;YAAvC;GACE,qBAAC,SAAD;IACE,SAAS;IACT,OAAO;KACL,cAAc;KACd,GAAI,UAAU,EAAE,GAAG,EAAE,YAAY,WAAW;KAC7C;IACD,WAAW;;;;cAIP,UAAU,iBAAiB,GAAG;YAE/B,MAAM,CACN,QAAQ,QAAQ,IAAI;cAbzB,CAeE,oBAAC,SAAD;KACO;KACL,MAAK;KACL,IAAI;KACJ,WAAU;KACD;KACT,GAAI;KACJ,CAAA,EACF,oBAAC,QAAD,EACE,WAAW;;;;;;;;;;;;;gBAaP,UACR,QACE,kBACA,kBACF,QACE,kBACA,gBAAgB;cAEX,MAAM,CACN,QAAQ,QAAQ,IAAI,EACvB,CAAA,CACI;;GACP,SACC,oBAAC,SAAD;IACE,SAAS;IACT,WAAW,uHACT,QAAQ,eAAe;cAGxB;IACK,CAAA;GAET,SACC,oBAAC,KAAD;IAAG,WAAU;cAA6C;IAAU,CAAA;GAElE;;EAGX;AAED,OAAO,cAAc"}

package/dist/chunks/{switch-C9suGEWg.cjs → switch-DPyzVrNh.cjs}

@@ -3,19 +3,35 @@ let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/forms/switch/Switch.tsx
 var sanitizeId = (value) => value.replace(/[^a-zA-Z0-9_-]/g, "-");
-var Switch = (0, react.forwardRef)(({ className = "", label, error, id, checked, ...props }, ref) => {
+var rtlLanguages = /^(ar|fa|ur|he)(-|$)/i;
+function resolveDirection(direction) {
+	if (direction === "rtl" || direction === "ltr") return direction;
+	if (typeof document !== "undefined") {
+		const explicitDirection = document.documentElement.getAttribute("dir") ?? void 0;
+		if (explicitDirection === "rtl" || explicitDirection === "ltr") return explicitDirection;
+	}
+	if (typeof navigator !== "undefined" && rtlLanguages.test(navigator.language)) return "rtl";
+	return "ltr";
+}
+var Switch = (0, react.forwardRef)(({ className = "", label, error, id, checked, dir, ...props }, ref) => {
 	const generatedId = (0, react.useId)();
 	const switchId = id || `switch-${sanitizeId(generatedId)}`;
+	const isRtl = resolveDirection(dir) === "rtl";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: `flex items-center space-x-2 ${className}`.trim().replace(/\s+/g, " "),
+		className: `flex items-center gap-2 ${className}`.trim().replace(/\s+/g, " "),
+		dir,
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 				htmlFor: switchId,
+				style: {
+					borderRadius: "var(--border-radius-full, 9999px)",
+					...checked ? {} : { background: "#E0E5F2" }
+				},
 				className: `
             relative inline-flex h-6 w-11 cursor-pointer items-center rounded-full transition-colors duration-200
             focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus focus-visible:ring-offset-2 focus-visible:ring-offset-ds-surface-1
             disabled:cursor-not-allowed disabled:opacity-50
-            ${checked ? "bg-ds-accent" : "bg-ds-surface-3"}
+            ${checked ? "bg-ds-accent" : ""}
           `.trim().replace(/\s+/g, " "),
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 					ref,
@@ -37,12 +53,12 @@ var Switch = (0, react.forwardRef)(({ className = "", label, error, id, checked,
               transition-transform
               duration-300
               ease-in-out
-              ${checked ? "translate-x-6" : "translate-x-1"}
+              ${checked ? isRtl ? "translate-x-1" : "translate-x-6" : isRtl ? "translate-x-6" : "translate-x-1"}
             `.trim().replace(/\s+/g, " ") })]
 			}),
 			label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
 				htmlFor: switchId,
-				className: "text-sm font-medium leading-none text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer",
+				className: `cursor-pointer text-sm font-medium leading-none text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 ${isRtl ? "text-right" : "text-left"}`,
 				children: label
 			}),
 			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
@@ -61,4 +77,4 @@ Object.defineProperty(exports, "Switch", {
 	}
 });
 
-//# sourceMappingURL=switch-C9suGEWg.cjs.map
+//# sourceMappingURL=switch-DPyzVrNh.cjs.map

package/dist/chunks/switch-DPyzVrNh.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-DPyzVrNh.cjs","names":[],"sources":["../../src/components/forms/switch/Switch.tsx"],"sourcesContent":["import { forwardRef, useId } from \"react\";\n\nimport type { SwitchProps } from \"./types\";\n\nconst sanitizeId = (value: string) => value.replace(/[^a-zA-Z0-9_-]/g, \"-\");\nconst rtlLanguages = /^(ar|fa|ur|he)(-|$)/i;\n\nfunction resolveDirection(\n  direction: string | undefined,\n): \"ltr\" | \"rtl\" {\n  if (direction === \"rtl\" || direction === \"ltr\") {\n    return direction;\n  }\n\n  if (typeof document !== \"undefined\") {\n    const explicitDirection =\n      document.documentElement.getAttribute(\"dir\") ?? undefined;\n\n    if (explicitDirection === \"rtl\" || explicitDirection === \"ltr\") {\n      return explicitDirection;\n    }\n  }\n\n  if (\n    typeof navigator !== \"undefined\" &&\n    rtlLanguages.test(navigator.language)\n  ) {\n    return \"rtl\";\n  }\n\n  return \"ltr\";\n}\n\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(\n  ({ className = \"\", label, error, id, checked, dir, ...props }, ref) => {\n    const generatedId = useId();\n    const switchId = id || `switch-${sanitizeId(generatedId)}`;\n    const isRtl = resolveDirection(dir) === \"rtl\";\n    const containerClasses = `flex items-center gap-2 ${className}`\n      .trim()\n      .replace(/\\s+/g, \" \");\n\n    return (\n      <div className={containerClasses} dir={dir}>\n        <label\n          htmlFor={switchId}\n          style={{\n            borderRadius: \"var(--border-radius-full, 9999px)\",\n            ...(checked ? {} : { background: \"#E0E5F2\" }),\n          }}\n          className={`\n            relative inline-flex h-6 w-11 cursor-pointer items-center rounded-full transition-colors duration-200\n            focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus focus-visible:ring-offset-2 focus-visible:ring-offset-ds-surface-1\n            disabled:cursor-not-allowed disabled:opacity-50\n            ${checked ? \"bg-ds-accent\" : \"\"}\n          `\n            .trim()\n            .replace(/\\s+/g, \" \")}\n        >\n          <input\n            ref={ref}\n            type=\"checkbox\"\n            id={switchId}\n            className=\"sr-only\"\n            checked={checked}\n            {...props}\n          />\n          <span\n            className={`\n              pointer-events-none\n              inline-block\n              h-4\n              w-4\n              transform\n              rounded-full\n              bg-ds-surface-1\n              shadow-lg\n              ring-0\n              transition-transform\n              duration-300\n              ease-in-out\n              ${checked\n      ? isRtl\n        ? \"translate-x-1\"\n        : \"translate-x-6\"\n      : isRtl\n        ? \"translate-x-6\"\n        : \"translate-x-1\"}\n            `\n              .trim()\n              .replace(/\\s+/g, \" \")}\n          />\n        </label>\n        {label && (\n          <label\n            htmlFor={switchId}\n            className={`cursor-pointer text-sm font-medium leading-none text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 ${\n              isRtl ? \"text-right\" : \"text-left\"\n            }`}\n          >\n            {label}\n          </label>\n        )}\n        {error && (\n          <p className=\"text-sm font-medium text-destructive mt-1\">{error}</p>\n        )}\n      </div>\n    );\n  },\n);\n\nSwitch.displayName = \"Switch\";\n"],"mappings":";;;;AAIA,IAAM,cAAc,UAAkB,MAAM,QAAQ,mBAAmB,IAAI;AAC3E,IAAM,eAAe;AAErB,SAAS,iBACP,WACe;AACf,KAAI,cAAc,SAAS,cAAc,MACvC,QAAO;AAGT,KAAI,OAAO,aAAa,aAAa;EACnC,MAAM,oBACJ,SAAS,gBAAgB,aAAa,MAAM,IAAI,KAAA;AAElD,MAAI,sBAAsB,SAAS,sBAAsB,MACvD,QAAO;;AAIX,KACE,OAAO,cAAc,eACrB,aAAa,KAAK,UAAU,SAAS,CAErC,QAAO;AAGT,QAAO;;AAGT,IAAa,UAAA,GAAA,MAAA,aACV,EAAE,YAAY,IAAI,OAAO,OAAO,IAAI,SAAS,KAAK,GAAG,SAAS,QAAQ;CACrE,MAAM,eAAA,GAAA,MAAA,QAAqB;CAC3B,MAAM,WAAW,MAAM,UAAU,WAAW,YAAY;CACxD,MAAM,QAAQ,iBAAiB,IAAI,KAAK;AAKxC,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WALkB,2BAA2B,YACjD,MAAM,CACN,QAAQ,QAAQ,IAAI;EAGkB;YAAvC;GACE,iBAAA,GAAA,kBAAA,MAAC,SAAD;IACE,SAAS;IACT,OAAO;KACL,cAAc;KACd,GAAI,UAAU,EAAE,GAAG,EAAE,YAAY,WAAW;KAC7C;IACD,WAAW;;;;cAIP,UAAU,iBAAiB,GAAG;YAE/B,MAAM,CACN,QAAQ,QAAQ,IAAI;cAbzB,CAeE,iBAAA,GAAA,kBAAA,KAAC,SAAD;KACO;KACL,MAAK;KACL,IAAI;KACJ,WAAU;KACD;KACT,GAAI;KACJ,CAAA,EACF,iBAAA,GAAA,kBAAA,KAAC,QAAD,EACE,WAAW;;;;;;;;;;;;;gBAaP,UACR,QACE,kBACA,kBACF,QACE,kBACA,gBAAgB;cAEX,MAAM,CACN,QAAQ,QAAQ,IAAI,EACvB,CAAA,CACI;;GACP,SACC,iBAAA,GAAA,kBAAA,KAAC,SAAD;IACE,SAAS;IACT,WAAW,uHACT,QAAQ,eAAe;cAGxB;IACK,CAAA;GAET,SACC,iBAAA,GAAA,kBAAA,KAAC,KAAD;IAAG,WAAU;cAA6C;IAAU,CAAA;GAElE;;EAGX;AAED,OAAO,cAAc"}

package/dist/chunks/{textarea-Cu26uKqq.mjs → textarea-BY5-J9No.mjs}

@@ -54,4 +54,4 @@ Textarea.displayName = "Textarea";
 //#endregion
 export { Textarea as t };
 
-//# sourceMappingURL=textarea-Cu26uKqq.mjs.map
+//# sourceMappingURL=textarea-BY5-J9No.mjs.map

package/dist/chunks/{textarea-Cu26uKqq.mjs.map → textarea-BY5-J9No.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"textarea-Cu26uKqq.mjs","names":[],"sources":["../../src/components/forms/textarea/Textarea.tsx"],"sourcesContent":["import type { TextareaProps } from \"./types\";\nimport { forwardRef, useState } from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { mergeClassNames } from \"../../../utils\";\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className = \"\", label, error, helperText, disabled, ...props }, ref) => {\n    const radius = 100;\n    const [visible, setVisible] = useState(false);\n    const mouseX = useMotionValue(0);\n    const mouseY = useMotionValue(0);\n\n    const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n      const { left, top } = event.currentTarget.getBoundingClientRect();\n      mouseX.set(event.clientX - left);\n      mouseY.set(event.clientY - top);\n    };\n\n    return (\n      <div className=\"w-full\">\n        {label && (\n          <label className=\"mb-2 block text-sm leading-none font-medium text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70\">\n            {label}\n          </label>\n        )}\n\n        <motion.div\n          style={{\n            backgroundImage: disabled\n              ? \"none\"\n              : useMotionTemplate`\n                  radial-gradient(\n                    ${\n                      visible ? `${radius}px` : \"0px\"\n                    } circle at ${mouseX}px ${mouseY}px,\n                    var(--ds-color-accent),\n                    transparent 90%\n                  )\n                `,\n          }}\n          onMouseMove={!disabled ? handleMouseMove : undefined}\n          onMouseEnter={!disabled ? () => setVisible(true) : undefined}\n          onMouseLeave={!disabled ? () => setVisible(false) : undefined}\n          className={mergeClassNames(\n            \"group/textarea rounded-lg p-[2px] transition duration-300 hover:border-ds-border-accent\",\n            error ? \"border-destructive\" : \"border-ds-border-2\",\n          )}\n        >\n          <textarea\n            ref={ref}\n            disabled={disabled}\n            className={mergeClassNames(\n              \"flex min-h-[80px] w-full rounded-md border border-ds-border-field bg-ds-surface-1 px-3 py-2 text-sm text-ds-1 transition duration-400 ease-in-out placeholder:text-ds-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus disabled:cursor-not-allowed disabled:opacity-50 resize-none\",\n              error &&\n                \"border-destructive text-destructive placeholder:text-destructive focus-visible:ring-destructive\",\n              className,\n            )}\n            {...props}\n          />\n        </motion.div>\n\n        {error && (\n          <p className=\"text-sm font-medium text-destructive mt-1\">{error}</p>\n        )}\n        {helperText && !error && (\n          <p className=\"mt-1 text-sm text-ds-2\">{helperText}</p>\n        )}\n      </div>\n    );\n  },\n);\n\nTextarea.displayName = \"Textarea\";\n"],"mappings":";;;;;AAMA,IAAa,WAAW,YACrB,EAAE,YAAY,IAAI,OAAO,OAAO,YAAY,UAAU,GAAG,SAAS,QAAQ;CACzE,MAAM,SAAS;CACf,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,SAAS,eAAe,EAAE;CAChC,MAAM,SAAS,eAAe,EAAE;CAEhC,MAAM,mBAAmB,UAA4C;EACnE,MAAM,EAAE,MAAM,QAAQ,MAAM,cAAc,uBAAuB;AACjE,SAAO,IAAI,MAAM,UAAU,KAAK;AAChC,SAAO,IAAI,MAAM,UAAU,IAAI;;AAGjC,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,SACC,oBAAC,SAAD;IAAO,WAAU;cACd;IACK,CAAA;GAGV,oBAAC,OAAO,KAAR;IACE,OAAO,EACL,iBAAiB,WACb,SACA,iBAAiB;;sBAGX,UAAU,GAAG,OAAO,MAAM,MAC3B,aAAa,OAAO,KAAK,OAAO;;;;mBAK1C;IACD,aAAa,CAAC,WAAW,kBAAkB,KAAA;IAC3C,cAAc,CAAC,iBAAiB,WAAW,KAAK,GAAG,KAAA;IACnD,cAAc,CAAC,iBAAiB,WAAW,MAAM,GAAG,KAAA;IACpD,WAAW,gBACT,2FACA,QAAQ,uBAAuB,qBAChC;cAED,oBAAC,YAAD;KACO;KACK;KACV,WAAW,gBACT,mTACA,SACE,mGACF,UACD;KACD,GAAI;KACJ,CAAA;IACS,CAAA;GAEZ,SACC,oBAAC,KAAD;IAAG,WAAU;cAA6C;IAAU,CAAA;GAErE,cAAc,CAAC,SACd,oBAAC,KAAD;IAAG,WAAU;cAA0B;IAAe,CAAA;GAEpD;;EAGX;AAED,SAAS,cAAc"}
+{"version":3,"file":"textarea-BY5-J9No.mjs","names":[],"sources":["../../src/components/forms/textarea/Textarea.tsx"],"sourcesContent":["import type { TextareaProps } from \"./types\";\nimport { forwardRef, useState } from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { mergeClassNames } from \"../../../utils\";\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className = \"\", label, error, helperText, disabled, ...props }, ref) => {\n    const radius = 100;\n    const [visible, setVisible] = useState(false);\n    const mouseX = useMotionValue(0);\n    const mouseY = useMotionValue(0);\n\n    const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n      const { left, top } = event.currentTarget.getBoundingClientRect();\n      mouseX.set(event.clientX - left);\n      mouseY.set(event.clientY - top);\n    };\n\n    return (\n      <div className=\"w-full\">\n        {label && (\n          <label className=\"mb-2 block text-sm leading-none font-medium text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70\">\n            {label}\n          </label>\n        )}\n\n        <motion.div\n          style={{\n            backgroundImage: disabled\n              ? \"none\"\n              : useMotionTemplate`\n                  radial-gradient(\n                    ${\n                      visible ? `${radius}px` : \"0px\"\n                    } circle at ${mouseX}px ${mouseY}px,\n                    var(--ds-color-accent),\n                    transparent 90%\n                  )\n                `,\n          }}\n          onMouseMove={!disabled ? handleMouseMove : undefined}\n          onMouseEnter={!disabled ? () => setVisible(true) : undefined}\n          onMouseLeave={!disabled ? () => setVisible(false) : undefined}\n          className={mergeClassNames(\n            \"group/textarea rounded-lg p-[2px] transition duration-300 hover:border-ds-border-accent\",\n            error ? \"border-destructive\" : \"border-ds-border-2\",\n          )}\n        >\n          <textarea\n            ref={ref}\n            disabled={disabled}\n            className={mergeClassNames(\n              \"flex min-h-[80px] w-full rounded-md border border-ds-border-field bg-ds-surface-1 px-3 py-2 text-sm text-ds-1 transition duration-400 ease-in-out placeholder:text-ds-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus disabled:cursor-not-allowed disabled:opacity-50 resize-none\",\n              error &&\n                \"border-destructive text-destructive placeholder:text-destructive focus-visible:ring-destructive\",\n              className,\n            )}\n            {...props}\n          />\n        </motion.div>\n\n        {error && (\n          <p className=\"text-sm font-medium text-destructive mt-1\">{error}</p>\n        )}\n        {helperText && !error && (\n          <p className=\"mt-1 text-sm text-ds-2\">{helperText}</p>\n        )}\n      </div>\n    );\n  },\n);\n\nTextarea.displayName = \"Textarea\";\n"],"mappings":";;;;;AAMA,IAAa,WAAW,YACrB,EAAE,YAAY,IAAI,OAAO,OAAO,YAAY,UAAU,GAAG,SAAS,QAAQ;CACzE,MAAM,SAAS;CACf,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,SAAS,eAAe,EAAE;CAChC,MAAM,SAAS,eAAe,EAAE;CAEhC,MAAM,mBAAmB,UAA4C;EACnE,MAAM,EAAE,MAAM,QAAQ,MAAM,cAAc,uBAAuB;AACjE,SAAO,IAAI,MAAM,UAAU,KAAK;AAChC,SAAO,IAAI,MAAM,UAAU,IAAI;;AAGjC,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,SACC,oBAAC,SAAD;IAAO,WAAU;cACd;IACK,CAAA;GAGV,oBAAC,OAAO,KAAR;IACE,OAAO,EACL,iBAAiB,WACb,SACA,iBAAiB;;sBAGX,UAAU,GAAG,OAAO,MAAM,MAC3B,aAAa,OAAO,KAAK,OAAO;;;;mBAK1C;IACD,aAAa,CAAC,WAAW,kBAAkB,KAAA;IAC3C,cAAc,CAAC,iBAAiB,WAAW,KAAK,GAAG,KAAA;IACnD,cAAc,CAAC,iBAAiB,WAAW,MAAM,GAAG,KAAA;IACpD,WAAW,gBACT,2FACA,QAAQ,uBAAuB,qBAChC;cAED,oBAAC,YAAD;KACO;KACK;KACV,WAAW,gBACT,mTACA,SACE,mGACF,UACD;KACD,GAAI;KACJ,CAAA;IACS,CAAA;GAEZ,SACC,oBAAC,KAAD;IAAG,WAAU;cAA6C;IAAU,CAAA;GAErE,cAAc,CAAC,SACd,oBAAC,KAAD;IAAG,WAAU;cAA0B;IAAe,CAAA;GAEpD;;EAGX;AAED,SAAS,cAAc"}

package/dist/chunks/{textarea-cXgKzluG.cjs → textarea-D-oBQ3IZ.cjs}

@@ -60,4 +60,4 @@ Object.defineProperty(exports, "Textarea", {
 	}
 });
 
-//# sourceMappingURL=textarea-cXgKzluG.cjs.map
+//# sourceMappingURL=textarea-D-oBQ3IZ.cjs.map

package/dist/chunks/{textarea-cXgKzluG.cjs.map → textarea-D-oBQ3IZ.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"textarea-cXgKzluG.cjs","names":[],"sources":["../../src/components/forms/textarea/Textarea.tsx"],"sourcesContent":["import type { TextareaProps } from \"./types\";\nimport { forwardRef, useState } from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { mergeClassNames } from \"../../../utils\";\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className = \"\", label, error, helperText, disabled, ...props }, ref) => {\n    const radius = 100;\n    const [visible, setVisible] = useState(false);\n    const mouseX = useMotionValue(0);\n    const mouseY = useMotionValue(0);\n\n    const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n      const { left, top } = event.currentTarget.getBoundingClientRect();\n      mouseX.set(event.clientX - left);\n      mouseY.set(event.clientY - top);\n    };\n\n    return (\n      <div className=\"w-full\">\n        {label && (\n          <label className=\"mb-2 block text-sm leading-none font-medium text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70\">\n            {label}\n          </label>\n        )}\n\n        <motion.div\n          style={{\n            backgroundImage: disabled\n              ? \"none\"\n              : useMotionTemplate`\n                  radial-gradient(\n                    ${\n                      visible ? `${radius}px` : \"0px\"\n                    } circle at ${mouseX}px ${mouseY}px,\n                    var(--ds-color-accent),\n                    transparent 90%\n                  )\n                `,\n          }}\n          onMouseMove={!disabled ? handleMouseMove : undefined}\n          onMouseEnter={!disabled ? () => setVisible(true) : undefined}\n          onMouseLeave={!disabled ? () => setVisible(false) : undefined}\n          className={mergeClassNames(\n            \"group/textarea rounded-lg p-[2px] transition duration-300 hover:border-ds-border-accent\",\n            error ? \"border-destructive\" : \"border-ds-border-2\",\n          )}\n        >\n          <textarea\n            ref={ref}\n            disabled={disabled}\n            className={mergeClassNames(\n              \"flex min-h-[80px] w-full rounded-md border border-ds-border-field bg-ds-surface-1 px-3 py-2 text-sm text-ds-1 transition duration-400 ease-in-out placeholder:text-ds-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus disabled:cursor-not-allowed disabled:opacity-50 resize-none\",\n              error &&\n                \"border-destructive text-destructive placeholder:text-destructive focus-visible:ring-destructive\",\n              className,\n            )}\n            {...props}\n          />\n        </motion.div>\n\n        {error && (\n          <p className=\"text-sm font-medium text-destructive mt-1\">{error}</p>\n        )}\n        {helperText && !error && (\n          <p className=\"mt-1 text-sm text-ds-2\">{helperText}</p>\n        )}\n      </div>\n    );\n  },\n);\n\nTextarea.displayName = \"Textarea\";\n"],"mappings":";;;;;;AAMA,IAAa,YAAA,GAAA,MAAA,aACV,EAAE,YAAY,IAAI,OAAO,OAAO,YAAY,UAAU,GAAG,SAAS,QAAQ;CACzE,MAAM,SAAS;CACf,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UAAuB,MAAM;CAC7C,MAAM,UAAA,GAAA,cAAA,gBAAwB,EAAE;CAChC,MAAM,UAAA,GAAA,cAAA,gBAAwB,EAAE;CAEhC,MAAM,mBAAmB,UAA4C;EACnE,MAAM,EAAE,MAAM,QAAQ,MAAM,cAAc,uBAAuB;AACjE,SAAO,IAAI,MAAM,UAAU,KAAK;AAChC,SAAO,IAAI,MAAM,UAAU,IAAI;;AAGjC,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAU;YAAf;GACG,SACC,iBAAA,GAAA,kBAAA,KAAC,SAAD;IAAO,WAAU;cACd;IACK,CAAA;GAGV,iBAAA,GAAA,kBAAA,KAAC,cAAA,OAAO,KAAR;IACE,OAAO,EACL,iBAAiB,WACb,SACA,cAAA,iBAAiB;;sBAGX,UAAU,GAAG,OAAO,MAAM,MAC3B,aAAa,OAAO,KAAK,OAAO;;;;mBAK1C;IACD,aAAa,CAAC,WAAW,kBAAkB,KAAA;IAC3C,cAAc,CAAC,iBAAiB,WAAW,KAAK,GAAG,KAAA;IACnD,cAAc,CAAC,iBAAiB,WAAW,MAAM,GAAG,KAAA;IACpD,WAAW,cAAA,gBACT,2FACA,QAAQ,uBAAuB,qBAChC;cAED,iBAAA,GAAA,kBAAA,KAAC,YAAD;KACO;KACK;KACV,WAAW,cAAA,gBACT,mTACA,SACE,mGACF,UACD;KACD,GAAI;KACJ,CAAA;IACS,CAAA;GAEZ,SACC,iBAAA,GAAA,kBAAA,KAAC,KAAD;IAAG,WAAU;cAA6C;IAAU,CAAA;GAErE,cAAc,CAAC,SACd,iBAAA,GAAA,kBAAA,KAAC,KAAD;IAAG,WAAU;cAA0B;IAAe,CAAA;GAEpD;;EAGX;AAED,SAAS,cAAc"}
+{"version":3,"file":"textarea-D-oBQ3IZ.cjs","names":[],"sources":["../../src/components/forms/textarea/Textarea.tsx"],"sourcesContent":["import type { TextareaProps } from \"./types\";\nimport { forwardRef, useState } from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { mergeClassNames } from \"../../../utils\";\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className = \"\", label, error, helperText, disabled, ...props }, ref) => {\n    const radius = 100;\n    const [visible, setVisible] = useState(false);\n    const mouseX = useMotionValue(0);\n    const mouseY = useMotionValue(0);\n\n    const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n      const { left, top } = event.currentTarget.getBoundingClientRect();\n      mouseX.set(event.clientX - left);\n      mouseY.set(event.clientY - top);\n    };\n\n    return (\n      <div className=\"w-full\">\n        {label && (\n          <label className=\"mb-2 block text-sm leading-none font-medium text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70\">\n            {label}\n          </label>\n        )}\n\n        <motion.div\n          style={{\n            backgroundImage: disabled\n              ? \"none\"\n              : useMotionTemplate`\n                  radial-gradient(\n                    ${\n                      visible ? `${radius}px` : \"0px\"\n                    } circle at ${mouseX}px ${mouseY}px,\n                    var(--ds-color-accent),\n                    transparent 90%\n                  )\n                `,\n          }}\n          onMouseMove={!disabled ? handleMouseMove : undefined}\n          onMouseEnter={!disabled ? () => setVisible(true) : undefined}\n          onMouseLeave={!disabled ? () => setVisible(false) : undefined}\n          className={mergeClassNames(\n            \"group/textarea rounded-lg p-[2px] transition duration-300 hover:border-ds-border-accent\",\n            error ? \"border-destructive\" : \"border-ds-border-2\",\n          )}\n        >\n          <textarea\n            ref={ref}\n            disabled={disabled}\n            className={mergeClassNames(\n              \"flex min-h-[80px] w-full rounded-md border border-ds-border-field bg-ds-surface-1 px-3 py-2 text-sm text-ds-1 transition duration-400 ease-in-out placeholder:text-ds-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus disabled:cursor-not-allowed disabled:opacity-50 resize-none\",\n              error &&\n                \"border-destructive text-destructive placeholder:text-destructive focus-visible:ring-destructive\",\n              className,\n            )}\n            {...props}\n          />\n        </motion.div>\n\n        {error && (\n          <p className=\"text-sm font-medium text-destructive mt-1\">{error}</p>\n        )}\n        {helperText && !error && (\n          <p className=\"mt-1 text-sm text-ds-2\">{helperText}</p>\n        )}\n      </div>\n    );\n  },\n);\n\nTextarea.displayName = \"Textarea\";\n"],"mappings":";;;;;;AAMA,IAAa,YAAA,GAAA,MAAA,aACV,EAAE,YAAY,IAAI,OAAO,OAAO,YAAY,UAAU,GAAG,SAAS,QAAQ;CACzE,MAAM,SAAS;CACf,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UAAuB,MAAM;CAC7C,MAAM,UAAA,GAAA,cAAA,gBAAwB,EAAE;CAChC,MAAM,UAAA,GAAA,cAAA,gBAAwB,EAAE;CAEhC,MAAM,mBAAmB,UAA4C;EACnE,MAAM,EAAE,MAAM,QAAQ,MAAM,cAAc,uBAAuB;AACjE,SAAO,IAAI,MAAM,UAAU,KAAK;AAChC,SAAO,IAAI,MAAM,UAAU,IAAI;;AAGjC,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAU;YAAf;GACG,SACC,iBAAA,GAAA,kBAAA,KAAC,SAAD;IAAO,WAAU;cACd;IACK,CAAA;GAGV,iBAAA,GAAA,kBAAA,KAAC,cAAA,OAAO,KAAR;IACE,OAAO,EACL,iBAAiB,WACb,SACA,cAAA,iBAAiB;;sBAGX,UAAU,GAAG,OAAO,MAAM,MAC3B,aAAa,OAAO,KAAK,OAAO;;;;mBAK1C;IACD,aAAa,CAAC,WAAW,kBAAkB,KAAA;IAC3C,cAAc,CAAC,iBAAiB,WAAW,KAAK,GAAG,KAAA;IACnD,cAAc,CAAC,iBAAiB,WAAW,MAAM,GAAG,KAAA;IACpD,WAAW,cAAA,gBACT,2FACA,QAAQ,uBAAuB,qBAChC;cAED,iBAAA,GAAA,kBAAA,KAAC,YAAD;KACO;KACK;KACV,WAAW,cAAA,gBACT,mTACA,SACE,mGACF,UACD;KACD,GAAI;KACJ,CAAA;IACS,CAAA;GAEZ,SACC,iBAAA,GAAA,kBAAA,KAAC,KAAD;IAAG,WAAU;cAA6C;IAAU,CAAA;GAErE,cAAc,CAAC,SACd,iBAAA,GAAA,kBAAA,KAAC,KAAD;IAAG,WAAU;cAA0B;IAAe,CAAA;GAEpD;;EAGX;AAED,SAAS,cAAc"}

package/dist/chunks/{toast-CpX-22n2.mjs → toast-BcBidy5n.mjs}

@@ -336,4 +336,4 @@ var toastStandalone = {
 //#endregion
 export { useToast as a, toastStandalone as i, ToastProvider as n, setGlobalToast as r, ToastItem as t };
 
-//# sourceMappingURL=toast-CpX-22n2.mjs.map
+//# sourceMappingURL=toast-BcBidy5n.mjs.map

package/dist/chunks/{toast-CpX-22n2.mjs.map → toast-BcBidy5n.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"toast-CpX-22n2.mjs","names":[],"sources":["../../src/components/overlays/toast/Toast.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  useState,\n  useCallback,\n  useRef,\n  useEffect,\n  forwardRef,\n} from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n  AlertTriangleIcon,\n  CheckCircleIcon,\n  CloseIcon,\n  InfoCircleIcon,\n  LoaderIcon,\n  XCircleIcon,\n} from \"../../icons\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type ToastType =\n  | \"success\"\n  | \"error\"\n  | \"warning\"\n  | \"info\"\n  | \"default\"\n  | \"loading\";\nexport type ToastPosition =\n  | \"top-left\"\n  | \"top-center\"\n  | \"top-right\"\n  | \"bottom-left\"\n  | \"bottom-center\"\n  | \"bottom-right\";\n\nexport interface ToastAction {\n  label: string;\n  onClick: () => void;\n}\n\nexport interface Toast {\n  id: string;\n  type: ToastType;\n  title?: string;\n  description?: string;\n  duration?: number;\n  icon?: React.ReactNode;\n  action?: ToastAction;\n  dismissible?: boolean;\n  onDismiss?: () => void;\n  onAutoClose?: () => void;\n  promise?: {\n    loading: string;\n    success: string | ((data: unknown) => string);\n    error: string | ((error: unknown) => string);\n  };\n}\n\nexport interface ToastOptions {\n  type?: ToastType;\n  title?: string;\n  description?: string;\n  duration?: number;\n  icon?: React.ReactNode;\n  action?: ToastAction;\n  dismissible?: boolean;\n  onDismiss?: () => void;\n  onAutoClose?: () => void;\n}\n\nexport interface ToastContextValue {\n  toasts: Toast[];\n  toast: (options: ToastOptions | string) => string;\n  success: (options: ToastOptions | string) => string;\n  error: (options: ToastOptions | string) => string;\n  warning: (options: ToastOptions | string) => string;\n  info: (options: ToastOptions | string) => string;\n  loading: (options: ToastOptions | string) => string;\n  promise: <T>(\n    promise: Promise<T>,\n    options: {\n      loading: string;\n      success: string | ((data: T) => string);\n      error: string | ((error: unknown) => string);\n    },\n  ) => Promise<T>;\n  dismiss: (id: string) => void;\n  dismissAll: () => void;\n  update: (id: string, options: Partial<ToastOptions>) => void;\n}\n\nexport interface ToastProviderProps {\n  children: React.ReactNode;\n  /** Default position for toasts */\n  position?: ToastPosition;\n  /** Default duration in milliseconds */\n  duration?: number;\n  /** Maximum number of visible toasts */\n  maxToasts?: number;\n  /** Gap between toasts */\n  gap?: number;\n  /** Whether toasts are dismissible by default */\n  dismissible?: boolean;\n  /** Custom className for the toast container */\n  containerClassName?: string;\n}\n\nexport interface ToastItemProps {\n  toast: Toast;\n  onDismiss: (id: string) => void;\n  position: ToastPosition;\n}\n\n// ============================================================================\n// Context\n// ============================================================================\n\nconst ToastContext = createContext<ToastContextValue | null>(null);\n\nexport const useToast = (): ToastContextValue => {\n  const context = useContext(ToastContext);\n  if (!context) {\n    throw new Error(\"useToast must be used within a ToastProvider\");\n  }\n  return context;\n};\n\n// ============================================================================\n// Styles\n// ============================================================================\n\nconst typeStyles: Record<\n  ToastType,\n  { bg: string; icon: string; iconBg: string }\n> = {\n  success: {\n    bg: \"bg-ds-surface-1 border-ds-state-success-border\",\n    icon: \"text-ds-state-success-text\",\n    iconBg: \"bg-ds-state-success-surface\",\n  },\n  error: {\n    bg: \"bg-ds-surface-1 border-ds-state-error-border\",\n    icon: \"text-ds-state-error-text\",\n    iconBg: \"bg-ds-state-error-surface\",\n  },\n  warning: {\n    bg: \"bg-ds-surface-1 border-ds-state-warning-border\",\n    icon: \"text-ds-state-warning-text\",\n    iconBg: \"bg-ds-state-warning-surface\",\n  },\n  info: {\n    bg: \"bg-ds-surface-1 border-ds-state-info-border\",\n    icon: \"text-ds-state-info-text\",\n    iconBg: \"bg-ds-state-info-surface\",\n  },\n  default: {\n    bg: \"bg-ds-surface-1 border-ds-border-2\",\n    icon: \"text-ds-2\",\n    iconBg: \"bg-ds-surface-2\",\n  },\n  loading: {\n    bg: \"bg-ds-surface-1 border-ds-border-2\",\n    icon: \"text-ds-1\",\n    iconBg: \"bg-ds-accent-subtle\",\n  },\n};\n\nconst positionStyles: Record<ToastPosition, string> = {\n  \"top-left\": \"top-4 left-4\",\n  \"top-center\": \"top-4 left-1/2 -translate-x-1/2\",\n  \"top-right\": \"top-4 right-4\",\n  \"bottom-left\": \"bottom-4 left-4\",\n  \"bottom-center\": \"bottom-4 left-1/2 -translate-x-1/2\",\n  \"bottom-right\": \"bottom-4 right-4\",\n};\n\nconst getMotionVariants = (position: ToastPosition) => {\n  const isTop = position.startsWith(\"top\");\n  const isCenter = position.includes(\"center\");\n  const isLeft = position.includes(\"left\");\n\n  return {\n    initial: {\n      opacity: 0,\n      y: isTop ? -20 : 20,\n      x: isCenter ? 0 : isLeft ? -20 : 20,\n      scale: 0.95,\n    },\n    animate: {\n      opacity: 1,\n      y: 0,\n      x: 0,\n      scale: 1,\n    },\n    exit: {\n      opacity: 0,\n      y: isTop ? -20 : 20,\n      scale: 0.95,\n      transition: { duration: 0.15 },\n    },\n  };\n};\n\n// ============================================================================\n// Toast Item Component\n// ============================================================================\n\nconst ToastItem = forwardRef<HTMLDivElement, ToastItemProps>(\n  ({ toast, onDismiss, position }, ref) => {\n    const {\n      type,\n      title,\n      description,\n      icon,\n      action,\n      dismissible = true,\n      duration,\n    } = toast;\n    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const [progress, setProgress] = useState(100);\n    const [isPaused, setIsPaused] = useState(false);\n\n    const defaultIcons: Record<ToastType, React.ReactNode> = {\n      success: <CheckCircleIcon className=\"w-5 h-5\" aria-hidden=\"true\" />,\n      error: <XCircleIcon className=\"w-5 h-5\" aria-hidden=\"true\" />,\n      warning: <AlertTriangleIcon className=\"w-5 h-5\" aria-hidden=\"true\" />,\n      info: <InfoCircleIcon className=\"w-5 h-5\" aria-hidden=\"true\" />,\n      loading: (\n        <LoaderIcon className=\"w-5 h-5 animate-spin\" aria-hidden=\"true\" />\n      ),\n      default: null,\n    };\n\n    // Auto-dismiss timer with progress\n    useEffect(() => {\n      if (duration && duration > 0 && type !== \"loading\") {\n        const startTime = Date.now();\n        const interval = 50;\n\n        const updateProgress = () => {\n          if (isPaused) return;\n\n          const elapsed = Date.now() - startTime;\n          const remaining = Math.max(0, 100 - (elapsed / duration) * 100);\n          setProgress(remaining);\n\n          if (remaining <= 0) {\n            toast.onAutoClose?.();\n            onDismiss(toast.id);\n          }\n        };\n\n        timerRef.current = setInterval(updateProgress, interval);\n\n        return () => {\n          if (timerRef.current) {\n            clearInterval(timerRef.current);\n          }\n        };\n      }\n    }, [duration, toast.id, type, isPaused, onDismiss, toast]);\n\n    const handleMouseEnter = () => setIsPaused(true);\n    const handleMouseLeave = () => setIsPaused(false);\n\n    const styles = typeStyles[type];\n    const displayIcon = icon ?? defaultIcons[type];\n    const variants = getMotionVariants(position);\n\n    return (\n      <motion.div\n        ref={ref}\n        layout\n        initial={variants.initial}\n        animate={variants.animate}\n        exit={variants.exit}\n        transition={{ type: \"spring\", stiffness: 400, damping: 30 }}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        className={`\n          relative flex items-start gap-3 p-4 pr-10\n          rounded-lg shadow-lg border min-w-[320px] max-w-[420px]\n          overflow-hidden\n          ${styles.bg}\n        `}\n        role=\"alert\"\n        aria-live=\"polite\"\n      >\n        {/* Progress bar */}\n        {duration && duration > 0 && type !== \"loading\" && (\n          <div className=\"absolute bottom-0 left-0 right-0 h-1 bg-ds-surface-2\">\n            <motion.div\n              className={`h-full ${\n                type === \"success\"\n                  ? \"bg-ds-state-success\"\n                  : type === \"error\"\n                    ? \"bg-ds-state-danger\"\n                    : type === \"warning\"\n                      ? \"bg-ds-state-warning\"\n                      : type === \"info\"\n                        ? \"bg-ds-state-info\"\n                        : \"bg-ds-border-3\"\n              }`}\n              style={{ width: `${progress}%` }}\n              transition={{ duration: 0.05 }}\n            />\n          </div>\n        )}\n\n        {/* Icon */}\n        {displayIcon && (\n          <div\n            className={`shrink-0 p-1.5 rounded-full ${styles.iconBg} ${styles.icon}`}\n          >\n            {displayIcon}\n          </div>\n        )}\n\n        {/* Content */}\n        <div className=\"flex-1 min-w-0\">\n          {title && <p className=\"text-sm font-semibold text-ds-1\">{title}</p>}\n          {description && (\n            <p className={`text-sm text-ds-2 ${title ? \"mt-1\" : \"\"}`}>\n              {description}\n            </p>\n          )}\n          {action && (\n            <button\n              onClick={() => {\n                action.onClick();\n                onDismiss(toast.id);\n              }}\n              className=\"mt-2 text-sm font-medium text-ds-1 hover:underline\"\n            >\n              {action.label}\n            </button>\n          )}\n        </div>\n\n        {/* Dismiss button */}\n        {dismissible && (\n          <button\n            onClick={() => {\n              toast.onDismiss?.();\n              onDismiss(toast.id);\n            }}\n            className=\"absolute top-3 right-3 rounded-full p-1 text-ds-2 transition-colors hover:bg-ds-surface-2 hover:text-ds-1\"\n            aria-label=\"Dismiss\"\n          >\n            <CloseIcon className=\"w-4 h-4\" aria-hidden=\"true\" />\n          </button>\n        )}\n      </motion.div>\n    );\n  },\n);\n\nToastItem.displayName = \"ToastItem\";\n\n// ============================================================================\n// Toast Provider Component\n// ============================================================================\n\nexport const ToastProvider: React.FC<ToastProviderProps> = ({\n  children,\n  position = \"bottom-right\",\n  duration = 5000,\n  maxToasts = 5,\n  gap = 12,\n  dismissible = true,\n  containerClassName = \"\",\n}) => {\n  const [toasts, setToasts] = useState<Toast[]>([]);\n  const toastIdCounter = useRef(0);\n\n  const generateId = () => {\n    toastIdCounter.current += 1;\n    return `toast-${toastIdCounter.current}-${Date.now()}`;\n  };\n\n  const addToast = useCallback(\n    (options: ToastOptions | string, type: ToastType = \"default\"): string => {\n      const id = generateId();\n      const toastOptions: ToastOptions =\n        typeof options === \"string\" ? { description: options } : options;\n\n      const newToast: Toast = {\n        id,\n        type: toastOptions.type ?? type,\n        title: toastOptions.title,\n        description: toastOptions.description,\n        duration: toastOptions.duration ?? duration,\n        icon: toastOptions.icon,\n        action: toastOptions.action,\n        dismissible: toastOptions.dismissible ?? dismissible,\n        onDismiss: toastOptions.onDismiss,\n        onAutoClose: toastOptions.onAutoClose,\n      };\n\n      setToasts((prev) => {\n        const updated = [...prev, newToast];\n        // Keep only the last maxToasts\n        return updated.slice(-maxToasts);\n      });\n\n      return id;\n    },\n    [duration, dismissible, maxToasts],\n  );\n\n  const dismiss = useCallback((id: string) => {\n    setToasts((prev) => prev.filter((t) => t.id !== id));\n  }, []);\n\n  const dismissAll = useCallback(() => {\n    setToasts([]);\n  }, []);\n\n  const update = useCallback((id: string, options: Partial<ToastOptions>) => {\n    setToasts((prev) =>\n      prev.map((t) =>\n        t.id === id\n          ? {\n              ...t,\n              ...options,\n              type: options.type ?? t.type,\n            }\n          : t,\n      ),\n    );\n  }, []);\n\n  const toast = useCallback(\n    (options: ToastOptions | string) => addToast(options, \"default\"),\n    [addToast],\n  );\n\n  const success = useCallback(\n    (options: ToastOptions | string) => addToast(options, \"success\"),\n    [addToast],\n  );\n\n  const error = useCallback(\n    (options: ToastOptions | string) => addToast(options, \"error\"),\n    [addToast],\n  );\n\n  const warning = useCallback(\n    (options: ToastOptions | string) => addToast(options, \"warning\"),\n    [addToast],\n  );\n\n  const info = useCallback(\n    (options: ToastOptions | string) => addToast(options, \"info\"),\n    [addToast],\n  );\n\n  const loading = useCallback(\n    (options: ToastOptions | string) => {\n      const toastOptions: ToastOptions =\n        typeof options === \"string\" ? { description: options } : options;\n      return addToast(\n        { ...toastOptions, duration: 0, dismissible: false },\n        \"loading\",\n      );\n    },\n    [addToast],\n  );\n\n  const promise = useCallback(\n    async <T,>(\n      promiseToResolve: Promise<T>,\n      options: {\n        loading: string;\n        success: string | ((data: T) => string);\n        error: string | ((error: unknown) => string);\n      },\n    ): Promise<T> => {\n      const id = loading(options.loading);\n\n      try {\n        const result = await promiseToResolve;\n        const successMessage =\n          typeof options.success === \"function\"\n            ? options.success(result)\n            : options.success;\n        update(id, {\n          type: \"success\",\n          description: successMessage,\n          duration,\n          dismissible: true,\n        });\n        return result;\n      } catch (err) {\n        const errorMessage =\n          typeof options.error === \"function\"\n            ? options.error(err)\n            : options.error;\n        update(id, {\n          type: \"error\",\n          description: errorMessage,\n          duration,\n          dismissible: true,\n        });\n        throw err;\n      }\n    },\n    [loading, update, duration],\n  );\n\n  const contextValue: ToastContextValue = {\n    toasts,\n    toast,\n    success,\n    error,\n    warning,\n    info,\n    loading,\n    promise,\n    dismiss,\n    dismissAll,\n    update,\n  };\n\n  const isTop = position.startsWith(\"top\");\n\n  return (\n    <ToastContext.Provider value={contextValue}>\n      {children}\n      <div\n        className={`fixed z-100 flex flex-col pointer-events-none ${positionStyles[position]} ${containerClassName}`}\n        style={{ gap: `${gap}px` }}\n      >\n        <AnimatePresence mode=\"popLayout\">\n          {(isTop ? toasts : [...toasts].reverse()).map((t) => (\n            <div key={t.id} className=\"pointer-events-auto\">\n              <ToastItem toast={t} onDismiss={dismiss} position={position} />\n            </div>\n          ))}\n        </AnimatePresence>\n      </div>\n    </ToastContext.Provider>\n  );\n};\n\n// ============================================================================\n// Standalone toast function (for use without hooks)\n// ============================================================================\n\nlet globalToast: ToastContextValue | null = null;\n\nexport const setGlobalToast = (toastContext: ToastContextValue) => {\n  globalToast = toastContext;\n};\n\nexport const toastStandalone = {\n  show: (options: ToastOptions | string) => globalToast?.toast(options),\n  success: (options: ToastOptions | string) => globalToast?.success(options),\n  error: (options: ToastOptions | string) => globalToast?.error(options),\n  warning: (options: ToastOptions | string) => globalToast?.warning(options),\n  info: (options: ToastOptions | string) => globalToast?.info(options),\n  loading: (options: ToastOptions | string) => globalToast?.loading(options),\n  promise: <T,>(\n    promise: Promise<T>,\n    options: {\n      loading: string;\n      success: string | ((data: T) => string);\n      error: string | ((error: unknown) => string);\n    },\n  ) => globalToast?.promise(promise, options),\n  dismiss: (id: string) => globalToast?.dismiss(id),\n  dismissAll: () => globalToast?.dismissAll(),\n};\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport default ToastProvider;\nexport { ToastItem };\n"],"mappings":"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"}
+{"version":3,"file":"toast-BcBidy5n.mjs","names":[],"sources":["../../src/components/overlays/toast/Toast.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  useState,\n  useCallback,\n  useRef,\n  useEffect,\n  forwardRef,\n} from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n  AlertTriangleIcon,\n  CheckCircleIcon,\n  CloseIcon,\n  InfoCircleIcon,\n  LoaderIcon,\n  XCircleIcon,\n} from \"../../icons\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type ToastType =\n  | \"success\"\n  | \"error\"\n  | \"warning\"\n  | \"info\"\n  | \"default\"\n  | \"loading\";\nexport type ToastPosition =\n  | \"top-left\"\n  | \"top-center\"\n  | \"top-right\"\n  | \"bottom-left\"\n  | \"bottom-center\"\n  | \"bottom-right\";\n\nexport interface ToastAction {\n  label: string;\n  onClick: () => void;\n}\n\nexport interface Toast {\n  id: string;\n  type: ToastType;\n  title?: string;\n  description?: string;\n  duration?: number;\n  icon?: React.ReactNode;\n  action?: ToastAction;\n  dismissible?: boolean;\n  onDismiss?: () => void;\n  onAutoClose?: () => void;\n  promise?: {\n    loading: string;\n    success: string | ((data: unknown) => string);\n    error: string | ((error: unknown) => string);\n  };\n}\n\nexport interface ToastOptions {\n  type?: ToastType;\n  title?: string;\n  description?: string;\n  duration?: number;\n  icon?: React.ReactNode;\n  action?: ToastAction;\n  dismissible?: boolean;\n  onDismiss?: () => void;\n  onAutoClose?: () => void;\n}\n\nexport interface ToastContextValue {\n  toasts: Toast[];\n  toast: (options: ToastOptions | string) => string;\n  success: (options: ToastOptions | string) => string;\n  error: (options: ToastOptions | string) => string;\n  warning: (options: ToastOptions | string) => string;\n  info: (options: ToastOptions | string) => string;\n  loading: (options: ToastOptions | string) => string;\n  promise: <T>(\n    promise: Promise<T>,\n    options: {\n      loading: string;\n      success: string | ((data: T) => string);\n      error: string | ((error: unknown) => string);\n    },\n  ) => Promise<T>;\n  dismiss: (id: string) => void;\n  dismissAll: () => void;\n  update: (id: string, options: Partial<ToastOptions>) => void;\n}\n\nexport interface ToastProviderProps {\n  children: React.ReactNode;\n  /** Default position for toasts */\n  position?: ToastPosition;\n  /** Default duration in milliseconds */\n  duration?: number;\n  /** Maximum number of visible toasts */\n  maxToasts?: number;\n  /** Gap between toasts */\n  gap?: number;\n  /** Whether toasts are dismissible by default */\n  dismissible?: boolean;\n  /** Custom className for the toast container */\n  containerClassName?: string;\n}\n\nexport interface ToastItemProps {\n  toast: Toast;\n  onDismiss: (id: string) => void;\n  position: ToastPosition;\n}\n\n// ============================================================================\n// Context\n// ============================================================================\n\nconst ToastContext = createContext<ToastContextValue | null>(null);\n\nexport const useToast = (): ToastContextValue => {\n  const context = useContext(ToastContext);\n  if (!context) {\n    throw new Error(\"useToast must be used within a ToastProvider\");\n  }\n  return context;\n};\n\n// ============================================================================\n// Styles\n// ============================================================================\n\nconst typeStyles: Record<\n  ToastType,\n  { bg: string; icon: string; iconBg: string }\n> = {\n  success: {\n    bg: \"bg-ds-surface-1 border-ds-state-success-border\",\n    icon: \"text-ds-state-success-text\",\n    iconBg: \"bg-ds-state-success-surface\",\n  },\n  error: {\n    bg: \"bg-ds-surface-1 border-ds-state-error-border\",\n    icon: \"text-ds-state-error-text\",\n    iconBg: \"bg-ds-state-error-surface\",\n  },\n  warning: {\n    bg: \"bg-ds-surface-1 border-ds-state-warning-border\",\n    icon: \"text-ds-state-warning-text\",\n    iconBg: \"bg-ds-state-warning-surface\",\n  },\n  info: {\n    bg: \"bg-ds-surface-1 border-ds-state-info-border\",\n    icon: \"text-ds-state-info-text\",\n    iconBg: \"bg-ds-state-info-surface\",\n  },\n  default: {\n    bg: \"bg-ds-surface-1 border-ds-border-2\",\n    icon: \"text-ds-2\",\n    iconBg: \"bg-ds-surface-2\",\n  },\n  loading: {\n    bg: \"bg-ds-surface-1 border-ds-border-2\",\n    icon: \"text-ds-1\",\n    iconBg: \"bg-ds-accent-subtle\",\n  },\n};\n\nconst positionStyles: Record<ToastPosition, string> = {\n  \"top-left\": \"top-4 left-4\",\n  \"top-center\": \"top-4 left-1/2 -translate-x-1/2\",\n  \"top-right\": \"top-4 right-4\",\n  \"bottom-left\": \"bottom-4 left-4\",\n  \"bottom-center\": \"bottom-4 left-1/2 -translate-x-1/2\",\n  \"bottom-right\": \"bottom-4 right-4\",\n};\n\nconst getMotionVariants = (position: ToastPosition) => {\n  const isTop = position.startsWith(\"top\");\n  const isCenter = position.includes(\"center\");\n  const isLeft = position.includes(\"left\");\n\n  return {\n    initial: {\n      opacity: 0,\n      y: isTop ? -20 : 20,\n      x: isCenter ? 0 : isLeft ? -20 : 20,\n      scale: 0.95,\n    },\n    animate: {\n      opacity: 1,\n      y: 0,\n      x: 0,\n      scale: 1,\n    },\n    exit: {\n      opacity: 0,\n      y: isTop ? -20 : 20,\n      scale: 0.95,\n      transition: { duration: 0.15 },\n    },\n  };\n};\n\n// ============================================================================\n// Toast Item Component\n// ============================================================================\n\nconst ToastItem = forwardRef<HTMLDivElement, ToastItemProps>(\n  ({ toast, onDismiss, position }, ref) => {\n    const {\n      type,\n      title,\n      description,\n      icon,\n      action,\n      dismissible = true,\n      duration,\n    } = toast;\n    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const [progress, setProgress] = useState(100);\n    const [isPaused, setIsPaused] = useState(false);\n\n    const defaultIcons: Record<ToastType, React.ReactNode> = {\n      success: <CheckCircleIcon className=\"w-5 h-5\" aria-hidden=\"true\" />,\n      error: <XCircleIcon className=\"w-5 h-5\" aria-hidden=\"true\" />,\n      warning: <AlertTriangleIcon className=\"w-5 h-5\" aria-hidden=\"true\" />,\n      info: <InfoCircleIcon className=\"w-5 h-5\" aria-hidden=\"true\" />,\n      loading: (\n        <LoaderIcon className=\"w-5 h-5 animate-spin\" aria-hidden=\"true\" />\n      ),\n      default: null,\n    };\n\n    // Auto-dismiss timer with progress\n    useEffect(() => {\n      if (duration && duration > 0 && type !== \"loading\") {\n        const startTime = Date.now();\n        const interval = 50;\n\n        const updateProgress = () => {\n          if (isPaused) return;\n\n          const elapsed = Date.now() - startTime;\n          const remaining = Math.max(0, 100 - (elapsed / duration) * 100);\n          setProgress(remaining);\n\n          if (remaining <= 0) {\n            toast.onAutoClose?.();\n            onDismiss(toast.id);\n          }\n        };\n\n        timerRef.current = setInterval(updateProgress, interval);\n\n        return () => {\n          if (timerRef.current) {\n            clearInterval(timerRef.current);\n          }\n        };\n      }\n    }, [duration, toast.id, type, isPaused, onDismiss, toast]);\n\n    const handleMouseEnter = () => setIsPaused(true);\n    const handleMouseLeave = () => setIsPaused(false);\n\n    const styles = typeStyles[type];\n    const displayIcon = icon ?? defaultIcons[type];\n    const variants = getMotionVariants(position);\n\n    return (\n      <motion.div\n        ref={ref}\n        layout\n        initial={variants.initial}\n        animate={variants.animate}\n        exit={variants.exit}\n        transition={{ type: \"spring\", stiffness: 400, damping: 30 }}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        className={`\n          relative flex items-start gap-3 p-4 pr-10\n          rounded-lg shadow-lg border min-w-[320px] max-w-[420px]\n          overflow-hidden\n          ${styles.bg}\n        `}\n        role=\"alert\"\n        aria-live=\"polite\"\n      >\n        {/* Progress bar */}\n        {duration && duration > 0 && type !== \"loading\" && (\n          <div className=\"absolute bottom-0 left-0 right-0 h-1 bg-ds-surface-2\">\n            <motion.div\n              className={`h-full ${\n                type === \"success\"\n                  ? \"bg-ds-state-success\"\n                  : type === \"error\"\n                    ? \"bg-ds-state-danger\"\n                    : type === \"warning\"\n                      ? \"bg-ds-state-warning\"\n                      : type === \"info\"\n                        ? \"bg-ds-state-info\"\n                        : \"bg-ds-border-3\"\n              }`}\n              style={{ width: `${progress}%` }}\n              transition={{ duration: 0.05 }}\n            />\n          </div>\n        )}\n\n        {/* Icon */}\n        {displayIcon && (\n          <div\n            className={`shrink-0 p-1.5 rounded-full ${styles.iconBg} ${styles.icon}`}\n          >\n            {displayIcon}\n          </div>\n        )}\n\n        {/* Content */}\n        <div className=\"flex-1 min-w-0\">\n          {title && <p className=\"text-sm font-semibold text-ds-1\">{title}</p>}\n          {description && (\n            <p className={`text-sm text-ds-2 ${title ? \"mt-1\" : \"\"}`}>\n              {description}\n            </p>\n          )}\n          {action && (\n            <button\n              onClick={() => {\n                action.onClick();\n                onDismiss(toast.id);\n              }}\n              className=\"mt-2 text-sm font-medium text-ds-1 hover:underline\"\n            >\n              {action.label}\n            </button>\n          )}\n        </div>\n\n        {/* Dismiss button */}\n        {dismissible && (\n          <button\n            onClick={() => {\n              toast.onDismiss?.();\n              onDismiss(toast.id);\n            }}\n            className=\"absolute top-3 right-3 rounded-full p-1 text-ds-2 transition-colors hover:bg-ds-surface-2 hover:text-ds-1\"\n            aria-label=\"Dismiss\"\n          >\n            <CloseIcon className=\"w-4 h-4\" aria-hidden=\"true\" />\n          </button>\n        )}\n      </motion.div>\n    );\n  },\n);\n\nToastItem.displayName = \"ToastItem\";\n\n// ============================================================================\n// Toast Provider Component\n// ============================================================================\n\nexport const ToastProvider: React.FC<ToastProviderProps> = ({\n  children,\n  position = \"bottom-right\",\n  duration = 5000,\n  maxToasts = 5,\n  gap = 12,\n  dismissible = true,\n  containerClassName = \"\",\n}) => {\n  const [toasts, setToasts] = useState<Toast[]>([]);\n  const toastIdCounter = useRef(0);\n\n  const generateId = () => {\n    toastIdCounter.current += 1;\n    return `toast-${toastIdCounter.current}-${Date.now()}`;\n  };\n\n  const addToast = useCallback(\n    (options: ToastOptions | string, type: ToastType = \"default\"): string => {\n      const id = generateId();\n      const toastOptions: ToastOptions =\n        typeof options === \"string\" ? { description: options } : options;\n\n      const newToast: Toast = {\n        id,\n        type: toastOptions.type ?? type,\n        title: toastOptions.title,\n        description: toastOptions.description,\n        duration: toastOptions.duration ?? duration,\n        icon: toastOptions.icon,\n        action: toastOptions.action,\n        dismissible: toastOptions.dismissible ?? dismissible,\n        onDismiss: toastOptions.onDismiss,\n        onAutoClose: toastOptions.onAutoClose,\n      };\n\n      setToasts((prev) => {\n        const updated = [...prev, newToast];\n        // Keep only the last maxToasts\n        return updated.slice(-maxToasts);\n      });\n\n      return id;\n    },\n    [duration, dismissible, maxToasts],\n  );\n\n  const dismiss = useCallback((id: string) => {\n    setToasts((prev) => prev.filter((t) => t.id !== id));\n  }, []);\n\n  const dismissAll = useCallback(() => {\n    setToasts([]);\n  }, []);\n\n  const update = useCallback((id: string, options: Partial<ToastOptions>) => {\n    setToasts((prev) =>\n      prev.map((t) =>\n        t.id === id\n          ? {\n              ...t,\n              ...options,\n              type: options.type ?? t.type,\n            }\n          : t,\n      ),\n    );\n  }, []);\n\n  const toast = useCallback(\n    (options: ToastOptions | string) => addToast(options, \"default\"),\n    [addToast],\n  );\n\n  const success = useCallback(\n    (options: ToastOptions | string) => addToast(options, \"success\"),\n    [addToast],\n  );\n\n  const error = useCallback(\n    (options: ToastOptions | string) => addToast(options, \"error\"),\n    [addToast],\n  );\n\n  const warning = useCallback(\n    (options: ToastOptions | string) => addToast(options, \"warning\"),\n    [addToast],\n  );\n\n  const info = useCallback(\n    (options: ToastOptions | string) => addToast(options, \"info\"),\n    [addToast],\n  );\n\n  const loading = useCallback(\n    (options: ToastOptions | string) => {\n      const toastOptions: ToastOptions =\n        typeof options === \"string\" ? { description: options } : options;\n      return addToast(\n        { ...toastOptions, duration: 0, dismissible: false },\n        \"loading\",\n      );\n    },\n    [addToast],\n  );\n\n  const promise = useCallback(\n    async <T,>(\n      promiseToResolve: Promise<T>,\n      options: {\n        loading: string;\n        success: string | ((data: T) => string);\n        error: string | ((error: unknown) => string);\n      },\n    ): Promise<T> => {\n      const id = loading(options.loading);\n\n      try {\n        const result = await promiseToResolve;\n        const successMessage =\n          typeof options.success === \"function\"\n            ? options.success(result)\n            : options.success;\n        update(id, {\n          type: \"success\",\n          description: successMessage,\n          duration,\n          dismissible: true,\n        });\n        return result;\n      } catch (err) {\n        const errorMessage =\n          typeof options.error === \"function\"\n            ? options.error(err)\n            : options.error;\n        update(id, {\n          type: \"error\",\n          description: errorMessage,\n          duration,\n          dismissible: true,\n        });\n        throw err;\n      }\n    },\n    [loading, update, duration],\n  );\n\n  const contextValue: ToastContextValue = {\n    toasts,\n    toast,\n    success,\n    error,\n    warning,\n    info,\n    loading,\n    promise,\n    dismiss,\n    dismissAll,\n    update,\n  };\n\n  const isTop = position.startsWith(\"top\");\n\n  return (\n    <ToastContext.Provider value={contextValue}>\n      {children}\n      <div\n        className={`fixed z-100 flex flex-col pointer-events-none ${positionStyles[position]} ${containerClassName}`}\n        style={{ gap: `${gap}px` }}\n      >\n        <AnimatePresence mode=\"popLayout\">\n          {(isTop ? toasts : [...toasts].reverse()).map((t) => (\n            <div key={t.id} className=\"pointer-events-auto\">\n              <ToastItem toast={t} onDismiss={dismiss} position={position} />\n            </div>\n          ))}\n        </AnimatePresence>\n      </div>\n    </ToastContext.Provider>\n  );\n};\n\n// ============================================================================\n// Standalone toast function (for use without hooks)\n// ============================================================================\n\nlet globalToast: ToastContextValue | null = null;\n\nexport const setGlobalToast = (toastContext: ToastContextValue) => {\n  globalToast = toastContext;\n};\n\nexport const toastStandalone = {\n  show: (options: ToastOptions | string) => globalToast?.toast(options),\n  success: (options: ToastOptions | string) => globalToast?.success(options),\n  error: (options: ToastOptions | string) => globalToast?.error(options),\n  warning: (options: ToastOptions | string) => globalToast?.warning(options),\n  info: (options: ToastOptions | string) => globalToast?.info(options),\n  loading: (options: ToastOptions | string) => globalToast?.loading(options),\n  promise: <T,>(\n    promise: Promise<T>,\n    options: {\n      loading: string;\n      success: string | ((data: T) => string);\n      error: string | ((error: unknown) => string);\n    },\n  ) => globalToast?.promise(promise, options),\n  dismiss: (id: string) => globalToast?.dismiss(id),\n  dismissAll: () => globalToast?.dismissAll(),\n};\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport default ToastProvider;\nexport { ToastItem };\n"],"mappings":"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"}