@intlayer/design-system 8.4.4 → 8.4.5

package/dist/esm/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.mjs

@@ -1,2 +1,80 @@
-"use client";import{Container as e}from"../Container/index.mjs";import{Button as t,ButtonVariant as n}from"../Button/Button.mjs";import{DropDown as r}from"../DropDown/index.mjs";import{Modes as i}from"./types.mjs";import{useState as a}from"react";import{CircleDashed as o,Moon as s,Sun as c}from"lucide-react";import{jsx as l,jsxs as u}from"react/jsx-runtime";const d=({Icon:e,children:r,...i})=>l(`div`,{className:`relative w-full p-0.5`,children:l(t,{className:`w-full cursor-pointer rounded-lg p-1 text-left hover:bg-text/10 focus:bg-text-opposite/20 focus:outline-hidden disabled:text-white/25`,Icon:e,"data-mode":`system`,role:`option`,variant:n.NONE,...i,children:r})}),f=({theme:t,setTheme:n,systemTheme:f})=>{let[p,m]=a(f===t?i.system:t),h=e=>{e===i.system?n(f??i.light):n(e),m(e)},g=`theme-switcher`;return u(r,{identifier:g,children:[u(r.Trigger,{className:`p-2`,identifier:g,"aria-label":`Theme selector`,children:[p===i.system&&l(o,{"data-mode":`system`}),p===i.light&&l(c,{"data-mode":`light`}),p===i.dark&&l(s,{"data-mode":`dark`})]}),l(r.Panel,{identifier:g,isFocusable:!0,isOverable:!0,children:u(e,{className:`min-w-[100px] items-start p-1`,separator:`y`,children:[l(d,{Icon:o,onClick:()=>h(i.system),isActive:p===i.system,label:`Restore to system mode`,children:`System`}),l(d,{Icon:c,onClick:()=>h(i.light),isActive:p===i.light,label:`Switch to light mode`,children:`Light`}),l(d,{Icon:s,onClick:()=>h(i.dark),isActive:p===i.dark,label:`Switch to dark mode`,children:`Dark`})]})})]})};export{f as DesktopThemeSwitcher};
+'use client';
+
+import { Container } from "../Container/index.mjs";
+import { Button, ButtonVariant } from "../Button/Button.mjs";
+import { DropDown } from "../DropDown/index.mjs";
+import { Modes } from "./types.mjs";
+import { useState } from "react";
+import { CircleDashed, Moon, Sun } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.tsx
+const ButtonItem = ({ Icon, children, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: "relative w-full p-0.5",
+	children: /* @__PURE__ */ jsx(Button, {
+		className: "w-full cursor-pointer rounded-lg p-1 text-left hover:bg-text/10 focus:bg-text-opposite/20 focus:outline-hidden disabled:text-white/25",
+		Icon,
+		"data-mode": "system",
+		role: "option",
+		variant: ButtonVariant.NONE,
+		...props,
+		children
+	})
+});
+const DesktopThemeSwitcher = ({ theme, setTheme, systemTheme }) => {
+	const [mode, setMode] = useState(systemTheme === theme ? Modes.system : theme);
+	const switchMode = (mode) => {
+		if (mode === Modes.system) setTheme(systemTheme ?? Modes.light);
+		else setTheme(mode);
+		setMode(mode);
+	};
+	const panelIdentifier = "theme-switcher";
+	return /* @__PURE__ */ jsxs(DropDown, {
+		identifier: panelIdentifier,
+		children: [/* @__PURE__ */ jsxs(DropDown.Trigger, {
+			className: "p-2",
+			identifier: panelIdentifier,
+			"aria-label": "Theme selector",
+			children: [
+				mode === Modes.system && /* @__PURE__ */ jsx(CircleDashed, { "data-mode": "system" }),
+				mode === Modes.light && /* @__PURE__ */ jsx(Sun, { "data-mode": "light" }),
+				mode === Modes.dark && /* @__PURE__ */ jsx(Moon, { "data-mode": "dark" })
+			]
+		}), /* @__PURE__ */ jsx(DropDown.Panel, {
+			identifier: panelIdentifier,
+			isFocusable: true,
+			isOverable: true,
+			children: /* @__PURE__ */ jsxs(Container, {
+				className: "min-w-[100px] items-start p-1",
+				separator: "y",
+				children: [
+					/* @__PURE__ */ jsx(ButtonItem, {
+						Icon: CircleDashed,
+						onClick: () => switchMode(Modes.system),
+						isActive: mode === Modes.system,
+						label: "Restore to system mode",
+						children: "System"
+					}),
+					/* @__PURE__ */ jsx(ButtonItem, {
+						Icon: Sun,
+						onClick: () => switchMode(Modes.light),
+						isActive: mode === Modes.light,
+						label: "Switch to light mode",
+						children: "Light"
+					}),
+					/* @__PURE__ */ jsx(ButtonItem, {
+						Icon: Moon,
+						onClick: () => switchMode(Modes.dark),
+						isActive: mode === Modes.dark,
+						label: "Switch to dark mode",
+						children: "Dark"
+					})
+				]
+			})
+		})]
+	});
+};
+
+//#endregion
+export { DesktopThemeSwitcher };
 //# sourceMappingURL=DesktopThemeSwitcher.mjs.map

package/dist/esm/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DesktopThemeSwitcher.mjs","names":[],"sources":["../../../../src/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { CircleDashed, Moon, Sun } from 'lucide-react';\nimport { type FC, useState } from 'react';\nimport { Button, type ButtonProps, ButtonVariant } from '../Button';\nimport { Container } from '../Container';\nimport { DropDown } from '../DropDown';\nimport { Modes } from './types';\n\nconst ButtonItem: FC<ButtonProps> = ({ Icon, children, ...props }) => (\n  <div className=\"relative w-full p-0.5\">\n    <Button\n      className=\"w-full cursor-pointer rounded-lg p-1 text-left hover:bg-text/10 focus:bg-text-opposite/20 focus:outline-hidden disabled:text-white/25\"\n      Icon={Icon}\n      data-mode=\"system\"\n      role=\"option\"\n      variant={ButtonVariant.NONE}\n      {...props}\n    >\n      {children}\n    </Button>\n  </div>\n);\n\ntype DesktopThemeSwitcherProps = {\n  theme: Modes;\n  setTheme: (theme: Modes) => void;\n  systemTheme: Modes;\n};\n\nexport const DesktopThemeSwitcher: FC<DesktopThemeSwitcherProps> = ({\n  theme,\n  setTheme,\n  systemTheme,\n}) => {\n  const isThemeSystemTheme = systemTheme === theme;\n  const defaultMode = isThemeSystemTheme ? Modes.system : theme;\n\n  const [mode, setMode] = useState<Modes>(defaultMode);\n\n  const switchMode = (mode: Modes) => {\n    if (mode === Modes.system) {\n      setTheme(systemTheme ?? Modes.light);\n    } else {\n      setTheme(mode);\n    }\n    setMode(mode);\n  };\n\n  const panelIdentifier = 'theme-switcher';\n\n  return (\n    <DropDown identifier={panelIdentifier}>\n      <DropDown.Trigger\n        className=\"p-2\"\n        identifier={panelIdentifier}\n        aria-label=\"Theme selector\"\n      >\n        {mode === Modes.system && <CircleDashed data-mode=\"system\" />}\n        {mode === Modes.light && <Sun data-mode=\"light\" />}\n        {mode === Modes.dark && <Moon data-mode=\"dark\" />}\n      </DropDown.Trigger>\n\n      <DropDown.Panel identifier={panelIdentifier} isFocusable isOverable>\n        <Container className=\"min-w-[100px] items-start p-1\" separator=\"y\">\n          <ButtonItem\n            Icon={CircleDashed}\n            onClick={() => switchMode(Modes.system)}\n            isActive={mode === Modes.system}\n            label=\"Restore to system mode\"\n          >\n            System\n          </ButtonItem>\n          <ButtonItem\n            Icon={Sun}\n            onClick={() => switchMode(Modes.light)}\n            isActive={mode === Modes.light}\n            label=\"Switch to light mode\"\n          >\n            Light\n          </ButtonItem>\n          <ButtonItem\n            Icon={Moon}\n            onClick={() => switchMode(Modes.dark)}\n            isActive={mode === Modes.dark}\n            label=\"Switch to dark mode\"\n          >\n            Dark\n          </ButtonItem>\n        </Container>\n      </DropDown.Panel>\n    </DropDown>\n  );\n};\n"],"mappings":"wWASA,MAAM,GAA+B,CAAE,OAAM,WAAU,GAAG,KACxD,EAAC,MAAD,CAAK,UAAU,iCACb,EAAC,EAAD,CACE,UAAU,wIACJ,OACN,YAAU,SACV,KAAK,SACL,QAAS,EAAc,KACvB,GAAI,EAEH,WACM,CAAA,CACL,CAAA,CASK,GAAuD,CAClE,QACA,WACA,iBACI,CAIJ,GAAM,CAAC,EAAM,GAAW,EAHG,IAAgB,EACF,EAAM,OAAS,EAEJ,CAE9C,EAAc,GAAgB,CAC9B,IAAS,EAAM,OACjB,EAAS,GAAe,EAAM,MAAM,CAEpC,EAAS,EAAK,CAEhB,EAAQ,EAAK,EAGT,EAAkB,iBAExB,OACE,EAAC,EAAD,CAAU,WAAY,WAAtB,CACE,EAAC,EAAS,QAAV,CACE,UAAU,MACV,WAAY,EACZ,aAAW,0BAHb,CAKG,IAAS,EAAM,QAAU,EAAC,EAAD,CAAc,YAAU,SAAW,CAAA,CAC5D,IAAS,EAAM,OAAS,EAAC,EAAD,CAAK,YAAU,QAAU,CAAA,CACjD,IAAS,EAAM,MAAQ,EAAC,EAAD,CAAM,YAAU,OAAS,CAAA,CAChC,GAEnB,EAAC,EAAS,MAAV,CAAgB,WAAY,EAAiB,YAAA,GAAY,WAAA,YACvD,EAAC,EAAD,CAAW,UAAU,gCAAgC,UAAU,aAA/D,CACE,EAAC,EAAD,CACE,KAAM,EACN,YAAe,EAAW,EAAM,OAAO,CACvC,SAAU,IAAS,EAAM,OACzB,MAAM,kCACP,SAEY,CAAA,CACb,EAAC,EAAD,CACE,KAAM,EACN,YAAe,EAAW,EAAM,MAAM,CACtC,SAAU,IAAS,EAAM,MACzB,MAAM,gCACP,QAEY,CAAA,CACb,EAAC,EAAD,CACE,KAAM,EACN,YAAe,EAAW,EAAM,KAAK,CACrC,SAAU,IAAS,EAAM,KACzB,MAAM,+BACP,OAEY,CAAA,CACH,GACG,CAAA,CACR"}
+{"version":3,"file":"DesktopThemeSwitcher.mjs","names":[],"sources":["../../../../src/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { CircleDashed, Moon, Sun } from 'lucide-react';\nimport { type FC, useState } from 'react';\nimport { Button, type ButtonProps, ButtonVariant } from '../Button';\nimport { Container } from '../Container';\nimport { DropDown } from '../DropDown';\nimport { Modes } from './types';\n\nconst ButtonItem: FC<ButtonProps> = ({ Icon, children, ...props }) => (\n  <div className=\"relative w-full p-0.5\">\n    <Button\n      className=\"w-full cursor-pointer rounded-lg p-1 text-left hover:bg-text/10 focus:bg-text-opposite/20 focus:outline-hidden disabled:text-white/25\"\n      Icon={Icon}\n      data-mode=\"system\"\n      role=\"option\"\n      variant={ButtonVariant.NONE}\n      {...props}\n    >\n      {children}\n    </Button>\n  </div>\n);\n\ntype DesktopThemeSwitcherProps = {\n  theme: Modes;\n  setTheme: (theme: Modes) => void;\n  systemTheme: Modes;\n};\n\nexport const DesktopThemeSwitcher: FC<DesktopThemeSwitcherProps> = ({\n  theme,\n  setTheme,\n  systemTheme,\n}) => {\n  const isThemeSystemTheme = systemTheme === theme;\n  const defaultMode = isThemeSystemTheme ? Modes.system : theme;\n\n  const [mode, setMode] = useState<Modes>(defaultMode);\n\n  const switchMode = (mode: Modes) => {\n    if (mode === Modes.system) {\n      setTheme(systemTheme ?? Modes.light);\n    } else {\n      setTheme(mode);\n    }\n    setMode(mode);\n  };\n\n  const panelIdentifier = 'theme-switcher';\n\n  return (\n    <DropDown identifier={panelIdentifier}>\n      <DropDown.Trigger\n        className=\"p-2\"\n        identifier={panelIdentifier}\n        aria-label=\"Theme selector\"\n      >\n        {mode === Modes.system && <CircleDashed data-mode=\"system\" />}\n        {mode === Modes.light && <Sun data-mode=\"light\" />}\n        {mode === Modes.dark && <Moon data-mode=\"dark\" />}\n      </DropDown.Trigger>\n\n      <DropDown.Panel identifier={panelIdentifier} isFocusable isOverable>\n        <Container className=\"min-w-[100px] items-start p-1\" separator=\"y\">\n          <ButtonItem\n            Icon={CircleDashed}\n            onClick={() => switchMode(Modes.system)}\n            isActive={mode === Modes.system}\n            label=\"Restore to system mode\"\n          >\n            System\n          </ButtonItem>\n          <ButtonItem\n            Icon={Sun}\n            onClick={() => switchMode(Modes.light)}\n            isActive={mode === Modes.light}\n            label=\"Switch to light mode\"\n          >\n            Light\n          </ButtonItem>\n          <ButtonItem\n            Icon={Moon}\n            onClick={() => switchMode(Modes.dark)}\n            isActive={mode === Modes.dark}\n            label=\"Switch to dark mode\"\n          >\n            Dark\n          </ButtonItem>\n        </Container>\n      </DropDown.Panel>\n    </DropDown>\n  );\n};\n"],"mappings":";;;;;;;;;;;AASA,MAAM,cAA+B,EAAE,MAAM,UAAU,GAAG,YACxD,oBAAC,OAAD;CAAK,WAAU;WACb,oBAAC,QAAD;EACE,WAAU;EACJ;EACN,aAAU;EACV,MAAK;EACL,SAAS,cAAc;EACvB,GAAI;EAEH;EACM;CACL;AASR,MAAa,wBAAuD,EAClE,OACA,UACA,kBACI;CAIJ,MAAM,CAAC,MAAM,WAAW,SAHG,gBAAgB,QACF,MAAM,SAAS,MAEJ;CAEpD,MAAM,cAAc,SAAgB;AAClC,MAAI,SAAS,MAAM,OACjB,UAAS,eAAe,MAAM,MAAM;MAEpC,UAAS,KAAK;AAEhB,UAAQ,KAAK;;CAGf,MAAM,kBAAkB;AAExB,QACE,qBAAC,UAAD;EAAU,YAAY;YAAtB,CACE,qBAAC,SAAS,SAAV;GACE,WAAU;GACV,YAAY;GACZ,cAAW;aAHb;IAKG,SAAS,MAAM,UAAU,oBAAC,cAAD,EAAc,aAAU,UAAW;IAC5D,SAAS,MAAM,SAAS,oBAAC,KAAD,EAAK,aAAU,SAAU;IACjD,SAAS,MAAM,QAAQ,oBAAC,MAAD,EAAM,aAAU,QAAS;IAChC;MAEnB,oBAAC,SAAS,OAAV;GAAgB,YAAY;GAAiB;GAAY;aACvD,qBAAC,WAAD;IAAW,WAAU;IAAgC,WAAU;cAA/D;KACE,oBAAC,YAAD;MACE,MAAM;MACN,eAAe,WAAW,MAAM,OAAO;MACvC,UAAU,SAAS,MAAM;MACzB,OAAM;gBACP;MAEY;KACb,oBAAC,YAAD;MACE,MAAM;MACN,eAAe,WAAW,MAAM,MAAM;MACtC,UAAU,SAAS,MAAM;MACzB,OAAM;gBACP;MAEY;KACb,oBAAC,YAAD;MACE,MAAM;MACN,eAAe,WAAW,MAAM,KAAK;MACrC,UAAU,SAAS,MAAM;MACzB,OAAM;gBACP;MAEY;KACH;;GACG,EACR"}

package/dist/esm/components/ThemeSwitcherDropDown/MobileThemeSwitcher.mjs

@@ -1,2 +1,54 @@
-"use client";import{cn as e}from"../../utils/cn.mjs";import{Modes as t}from"./types.mjs";import{useState as n}from"react";import{CircleDashed as r,Moon as i,Sun as a}from"lucide-react";import{jsx as o,jsxs as s}from"react/jsx-runtime";const c=({isCurrentMode:t,isNextMode:n})=>e(`absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2`,`opacity-0 transition-opacity duration-300 ease-in-out`,t&&`opacity-100 group-hover:opacity-0`,n&&`group-hover:opacity-100`),l=({theme:e,systemTheme:l,setTheme:u})=>{let d=l===e,[f,p]=n(d?t.system:e),m=f===t.system?e===t.dark?t.light:t.dark:d?t.system:f===t.light?t.dark:t.light,h=()=>{m===t.system?u(l??t.light):u(m),p(m)};return s(`button`,{className:`group relative size-10`,"aria-label":`Theme selector`,children:[o(r,{className:c({isCurrentMode:f===t.system,isNextMode:m===t.system}),onClick:h,"data-mode":`system`}),o(i,{className:c({isCurrentMode:f===t.light,isNextMode:m===t.light}),onClick:h,"data-mode":`light`}),o(a,{className:c({isCurrentMode:f===t.dark,isNextMode:m===t.dark}),onClick:h,"data-mode":`dark`})]})};export{l as MobileThemeSwitcher};
+'use client';
+
+import { cn } from "../../utils/cn.mjs";
+import { Modes } from "./types.mjs";
+import { useState } from "react";
+import { CircleDashed, Moon, Sun } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/ThemeSwitcherDropDown/MobileThemeSwitcher.tsx
+const getIconStyle = ({ isCurrentMode, isNextMode }) => cn(`absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2`, `opacity-0 transition-opacity duration-300 ease-in-out`, isCurrentMode && `opacity-100 group-hover:opacity-0`, isNextMode && `group-hover:opacity-100`);
+const MobileThemeSwitcher = ({ theme, systemTheme, setTheme }) => {
+	const isThemeSystemTheme = systemTheme === theme;
+	const [mode, setMode] = useState(isThemeSystemTheme ? Modes.system : theme);
+	const nextMode = mode === Modes.system ? theme === Modes.dark ? Modes.light : Modes.dark : isThemeSystemTheme ? Modes.system : mode === Modes.light ? Modes.dark : Modes.light;
+	const toggleMode = () => {
+		if (nextMode === Modes.system) setTheme(systemTheme ?? Modes.light);
+		else setTheme(nextMode);
+		setMode(nextMode);
+	};
+	return /* @__PURE__ */ jsxs("button", {
+		className: "group relative size-10",
+		"aria-label": "Theme selector",
+		children: [
+			/* @__PURE__ */ jsx(CircleDashed, {
+				className: getIconStyle({
+					isCurrentMode: mode === Modes.system,
+					isNextMode: nextMode === Modes.system
+				}),
+				onClick: toggleMode,
+				"data-mode": "system"
+			}),
+			/* @__PURE__ */ jsx(Moon, {
+				className: getIconStyle({
+					isCurrentMode: mode === Modes.light,
+					isNextMode: nextMode === Modes.light
+				}),
+				onClick: toggleMode,
+				"data-mode": "light"
+			}),
+			/* @__PURE__ */ jsx(Sun, {
+				className: getIconStyle({
+					isCurrentMode: mode === Modes.dark,
+					isNextMode: nextMode === Modes.dark
+				}),
+				onClick: toggleMode,
+				"data-mode": "dark"
+			})
+		]
+	});
+};
+
+//#endregion
+export { MobileThemeSwitcher };
 //# sourceMappingURL=MobileThemeSwitcher.mjs.map

package/dist/esm/components/ThemeSwitcherDropDown/MobileThemeSwitcher.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MobileThemeSwitcher.mjs","names":[],"sources":["../../../../src/components/ThemeSwitcherDropDown/MobileThemeSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { CircleDashed, Moon, Sun } from 'lucide-react';\nimport { type FC, useState } from 'react';\nimport { Modes } from './types';\n\ntype MobileThemeSwitcherProps = {\n  theme: Modes;\n  systemTheme: Modes;\n  setTheme: (theme: Modes) => void;\n};\n\nconst getIconStyle = ({\n  isCurrentMode,\n  isNextMode,\n}: {\n  isCurrentMode: boolean;\n  isNextMode: boolean;\n}) =>\n  cn(\n    `absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2`,\n    `opacity-0 transition-opacity duration-300 ease-in-out`,\n    isCurrentMode && `opacity-100 group-hover:opacity-0`,\n    isNextMode && `group-hover:opacity-100`\n  );\n\nexport const MobileThemeSwitcher: FC<MobileThemeSwitcherProps> = ({\n  theme,\n  systemTheme,\n  setTheme,\n}) => {\n  const isThemeSystemTheme = systemTheme === theme;\n  const defaultMode = isThemeSystemTheme ? Modes.system : theme;\n\n  const [mode, setMode] = useState<Modes>(defaultMode);\n\n  const nextMode =\n    // Start loop\n    // If mode is system, toggle the theme inverse of the system theme\n    mode === Modes.system\n      ? theme === Modes.dark\n        ? Modes.light\n        : Modes.dark\n      : // Close loop\n        // If current theme same as system theme, reset by toggle the system theme\n        isThemeSystemTheme\n        ? Modes.system\n        : // Go to next step\n          // Otherwise, toggle the remaining theme\n          mode === Modes.light\n          ? Modes.dark\n          : Modes.light;\n\n  const toggleMode = () => {\n    if (nextMode === Modes.system) {\n      setTheme(systemTheme ?? Modes.light);\n    } else {\n      setTheme(nextMode);\n    }\n    setMode(nextMode);\n  };\n\n  return (\n    <button className=\"group relative size-10\" aria-label=\"Theme selector\">\n      <CircleDashed\n        className={getIconStyle({\n          isCurrentMode: mode === Modes.system,\n          isNextMode: nextMode === Modes.system,\n        })}\n        onClick={toggleMode}\n        data-mode=\"system\"\n      />\n\n      <Moon\n        className={getIconStyle({\n          isCurrentMode: mode === Modes.light,\n          isNextMode: nextMode === Modes.light,\n        })}\n        onClick={toggleMode}\n        data-mode=\"light\"\n      />\n\n      <Sun\n        className={getIconStyle({\n          isCurrentMode: mode === Modes.dark,\n          isNextMode: nextMode === Modes.dark,\n        })}\n        onClick={toggleMode}\n        data-mode=\"dark\"\n      />\n    </button>\n  );\n};\n"],"mappings":"2OAaA,MAAM,GAAgB,CACpB,gBACA,gBAKA,EACE,8DACA,wDACA,GAAiB,oCACjB,GAAc,0BACf,CAEU,GAAqD,CAChE,QACA,cACA,cACI,CACJ,IAAM,EAAqB,IAAgB,EAGrC,CAAC,EAAM,GAAW,EAFJ,EAAqB,EAAM,OAAS,EAEJ,CAE9C,EAGJ,IAAS,EAAM,OACX,IAAU,EAAM,KACd,EAAM,MACN,EAAM,KAGR,EACE,EAAM,OAGN,IAAS,EAAM,MACb,EAAM,KACN,EAAM,MAEV,MAAmB,CACnB,IAAa,EAAM,OACrB,EAAS,GAAe,EAAM,MAAM,CAEpC,EAAS,EAAS,CAEpB,EAAQ,EAAS,EAGnB,OACE,EAAC,SAAD,CAAQ,UAAU,yBAAyB,aAAW,0BAAtD,CACE,EAAC,EAAD,CACE,UAAW,EAAa,CACtB,cAAe,IAAS,EAAM,OAC9B,WAAY,IAAa,EAAM,OAChC,CAAC,CACF,QAAS,EACT,YAAU,SACV,CAAA,CAEF,EAAC,EAAD,CACE,UAAW,EAAa,CACtB,cAAe,IAAS,EAAM,MAC9B,WAAY,IAAa,EAAM,MAChC,CAAC,CACF,QAAS,EACT,YAAU,QACV,CAAA,CAEF,EAAC,EAAD,CACE,UAAW,EAAa,CACtB,cAAe,IAAS,EAAM,KAC9B,WAAY,IAAa,EAAM,KAChC,CAAC,CACF,QAAS,EACT,YAAU,OACV,CAAA,CACK"}
+{"version":3,"file":"MobileThemeSwitcher.mjs","names":[],"sources":["../../../../src/components/ThemeSwitcherDropDown/MobileThemeSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { CircleDashed, Moon, Sun } from 'lucide-react';\nimport { type FC, useState } from 'react';\nimport { Modes } from './types';\n\ntype MobileThemeSwitcherProps = {\n  theme: Modes;\n  systemTheme: Modes;\n  setTheme: (theme: Modes) => void;\n};\n\nconst getIconStyle = ({\n  isCurrentMode,\n  isNextMode,\n}: {\n  isCurrentMode: boolean;\n  isNextMode: boolean;\n}) =>\n  cn(\n    `absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2`,\n    `opacity-0 transition-opacity duration-300 ease-in-out`,\n    isCurrentMode && `opacity-100 group-hover:opacity-0`,\n    isNextMode && `group-hover:opacity-100`\n  );\n\nexport const MobileThemeSwitcher: FC<MobileThemeSwitcherProps> = ({\n  theme,\n  systemTheme,\n  setTheme,\n}) => {\n  const isThemeSystemTheme = systemTheme === theme;\n  const defaultMode = isThemeSystemTheme ? Modes.system : theme;\n\n  const [mode, setMode] = useState<Modes>(defaultMode);\n\n  const nextMode =\n    // Start loop\n    // If mode is system, toggle the theme inverse of the system theme\n    mode === Modes.system\n      ? theme === Modes.dark\n        ? Modes.light\n        : Modes.dark\n      : // Close loop\n        // If current theme same as system theme, reset by toggle the system theme\n        isThemeSystemTheme\n        ? Modes.system\n        : // Go to next step\n          // Otherwise, toggle the remaining theme\n          mode === Modes.light\n          ? Modes.dark\n          : Modes.light;\n\n  const toggleMode = () => {\n    if (nextMode === Modes.system) {\n      setTheme(systemTheme ?? Modes.light);\n    } else {\n      setTheme(nextMode);\n    }\n    setMode(nextMode);\n  };\n\n  return (\n    <button className=\"group relative size-10\" aria-label=\"Theme selector\">\n      <CircleDashed\n        className={getIconStyle({\n          isCurrentMode: mode === Modes.system,\n          isNextMode: nextMode === Modes.system,\n        })}\n        onClick={toggleMode}\n        data-mode=\"system\"\n      />\n\n      <Moon\n        className={getIconStyle({\n          isCurrentMode: mode === Modes.light,\n          isNextMode: nextMode === Modes.light,\n        })}\n        onClick={toggleMode}\n        data-mode=\"light\"\n      />\n\n      <Sun\n        className={getIconStyle({\n          isCurrentMode: mode === Modes.dark,\n          isNextMode: nextMode === Modes.dark,\n        })}\n        onClick={toggleMode}\n        data-mode=\"dark\"\n      />\n    </button>\n  );\n};\n"],"mappings":";;;;;;;;;AAaA,MAAM,gBAAgB,EACpB,eACA,iBAKA,GACE,+DACA,yDACA,iBAAiB,qCACjB,cAAc,0BACf;AAEH,MAAa,uBAAqD,EAChE,OACA,aACA,eACI;CACJ,MAAM,qBAAqB,gBAAgB;CAG3C,MAAM,CAAC,MAAM,WAAW,SAFJ,qBAAqB,MAAM,SAAS,MAEJ;CAEpD,MAAM,WAGJ,SAAS,MAAM,SACX,UAAU,MAAM,OACd,MAAM,QACN,MAAM,OAGR,qBACE,MAAM,SAGN,SAAS,MAAM,QACb,MAAM,OACN,MAAM;CAEhB,MAAM,mBAAmB;AACvB,MAAI,aAAa,MAAM,OACrB,UAAS,eAAe,MAAM,MAAM;MAEpC,UAAS,SAAS;AAEpB,UAAQ,SAAS;;AAGnB,QACE,qBAAC,UAAD;EAAQ,WAAU;EAAyB,cAAW;YAAtD;GACE,oBAAC,cAAD;IACE,WAAW,aAAa;KACtB,eAAe,SAAS,MAAM;KAC9B,YAAY,aAAa,MAAM;KAChC,CAAC;IACF,SAAS;IACT,aAAU;IACV;GAEF,oBAAC,MAAD;IACE,WAAW,aAAa;KACtB,eAAe,SAAS,MAAM;KAC9B,YAAY,aAAa,MAAM;KAChC,CAAC;IACF,SAAS;IACT,aAAU;IACV;GAEF,oBAAC,KAAD;IACE,WAAW,aAAa;KACtB,eAAe,SAAS,MAAM;KAC9B,YAAY,aAAa,MAAM;KAChC,CAAC;IACF,SAAS;IACT,aAAU;IACV;GACK"}

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

@@ -1 +1,5 @@
-import{Modes as e}from"./types.mjs";import{DesktopThemeSwitcher as t}from"./DesktopThemeSwitcher.mjs";import{MobileThemeSwitcher as n}from"./MobileThemeSwitcher.mjs";export{t as DesktopThemeSwitcher,n as MobileThemeSwitcher,e as Modes};
+import { Modes } from "./types.mjs";
+import { DesktopThemeSwitcher } from "./DesktopThemeSwitcher.mjs";
+import { MobileThemeSwitcher } from "./MobileThemeSwitcher.mjs";
+
+export { DesktopThemeSwitcher, MobileThemeSwitcher, Modes };

package/dist/esm/components/ThemeSwitcherDropDown/types.mjs

@@ -1,2 +1,11 @@
-let e=function(e){return e.dark=`dark`,e.light=`light`,e.system=`system`,e}({});export{e as Modes};
+//#region src/components/ThemeSwitcherDropDown/types.ts
+let Modes = /* @__PURE__ */ function(Modes) {
+	Modes["dark"] = "dark";
+	Modes["light"] = "light";
+	Modes["system"] = "system";
+	return Modes;
+}({});
+
+//#endregion
+export { Modes };
 //# sourceMappingURL=types.mjs.map

package/dist/esm/components/ThemeSwitcherDropDown/types.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"types.mjs","names":[],"sources":["../../../../src/components/ThemeSwitcherDropDown/types.ts"],"sourcesContent":["export enum Modes {\n  dark = 'dark',\n  light = 'light',\n  system = 'system',\n}\n"],"mappings":"AAAA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,KAAA,OACA,EAAA,MAAA,QACA,EAAA,OAAA,eACD"}
+{"version":3,"file":"types.mjs","names":[],"sources":["../../../../src/components/ThemeSwitcherDropDown/types.ts"],"sourcesContent":["export enum Modes {\n  dark = 'dark',\n  light = 'light',\n  system = 'system',\n}\n"],"mappings":";AAAA,IAAY,QAAL;AACL;AACA;AACA;;KACD"}

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

@@ -1,2 +1,188 @@
-"use client";import{cn as e}from"../../utils/cn.mjs";import*as t from"@radix-ui/react-toast";import{cva as n}from"class-variance-authority";import{X as r}from"lucide-react";import{jsx as i}from"react/jsx-runtime";const a=t,o=({className:n,...r})=>i(t.Viewport,{className:e(`fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-[420px]`,n),...r}),s=n(`group data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md p-4 pr-6 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none`,{variants:{variant:{error:`bg-error/40 text-text`,success:`bg-success/30 text-text`,default:`bg-card/80 text-text`}},defaultVariants:{variant:`default`}}),c=({className:n,variant:r,...a})=>i(t.Root,{className:e(s({variant:r}),n),...a}),l=({className:n,...r})=>i(t.Action,{className:e(`inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 font-medium text-sm transition-colors hover:bg-text focus:outline-hidden focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:focus:ring-destructive group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground`,n),...r}),u=({className:n,...a})=>i(t.Close,{className:e(`absolute top-1 right-1 rounded-md p-1 text-text/50 opacity-0 transition-opacity hover:text-text/80 focus:opacity-100 focus:outline-hidden focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 group-[.destructive]:hover:text-red-50`,n),"toast-close":``,...a,children:i(r,{className:`size-5`})}),d=({className:n,...r})=>i(t.Title,{className:e(`font-semibold text-sm [&+div]:text-xs`,n),...r}),f=({className:n,...r})=>i(t.Description,{className:e(`text-sm opacity-90`,n),...r});export{c as Toast,l as ToastAction,u as ToastClose,f as ToastDescription,a as ToastProvider,d as ToastTitle,o as ToastViewport};
+'use client';
+
+import { cn } from "../../utils/cn.mjs";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { cva } from "class-variance-authority";
+import { X } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Toaster/Toast.tsx
+const ToastProvider = ToastPrimitives;
+const ToastViewport = ({ className, ...props }) => /* @__PURE__ */ jsx(ToastPrimitives.Viewport, {
+	className: cn("fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-[420px]", className),
+	...props
+});
+/**
+* Toast variant styles using class-variance-authority.
+*
+* Defines visual styles for different toast types with semantic colors,
+* animations, and responsive behavior.
+*
+* @example
+* ```tsx
+* // Error toast with red background
+* <Toast variant="error">Error message</Toast>
+*
+* // Success toast with green background
+* <Toast variant="success">Success message</Toast>
+*
+* // Default toast with neutral styling
+* <Toast variant="default">Info message</Toast>
+* ```
+*/
+const toastVariants = cva("group data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md p-4 pr-6 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none", {
+	variants: { variant: {
+		error: "bg-error/40 text-text",
+		success: "bg-success/30 text-text",
+		default: "bg-card/80 text-text"
+	} },
+	defaultVariants: { variant: "default" }
+});
+/**
+* Toast Component
+*
+* A notification component that displays temporary messages to users using Radix UI primitives.
+* Supports different visual variants, animations, and user interactions including swipe-to-dismiss.
+*
+* ## Features
+* - **Visual Variants**: Error, success, and default styling themes
+* - **Animations**: Smooth slide-in/slide-out transitions with fade effects
+* - **Swipe Gestures**: Touch-friendly swipe-to-dismiss functionality
+* - **Accessibility**: Full screen reader support and keyboard navigation
+* - **Positioning**: Smart positioning with responsive viewport handling
+* - **Auto-dismiss**: Configurable automatic dismissal timing
+*
+* ## Technical Implementation
+* - Built on Radix UI Toast primitives for accessibility compliance
+* - Uses Framer Motion for smooth animations and gestures
+* - CVA (class-variance-authority) for consistent styling variants
+* - Backdrop blur effects for modern visual appeal
+* - CSS transforms for hardware-accelerated animations
+*
+* @example
+* ```tsx
+* // Basic toast with title and description
+* <Toast variant="default">
+*   <ToastTitle>Notification</ToastTitle>
+*   <ToastDescription>Your action was completed successfully.</ToastDescription>
+*   <ToastClose />
+* </Toast>
+*
+* // Error toast with action button
+* <Toast variant="error">
+*   <ToastTitle>Upload Failed</ToastTitle>
+*   <ToastDescription>Could not upload file. Please try again.</ToastDescription>
+*   <ToastAction altText="Retry upload">Retry</ToastAction>
+*   <ToastClose />
+* </Toast>
+* ```
+*/
+const Toast = ({ className, variant, ...props }) => {
+	return /* @__PURE__ */ jsx(ToastPrimitives.Root, {
+		className: cn(toastVariants({ variant }), className),
+		...props
+	});
+};
+/**
+* ToastAction Component
+*
+* An interactive button component for toast notifications that allows users to take
+* actions related to the notification message.
+*
+* ## Features
+* - **Accessibility**: Requires `altText` prop for screen readers
+* - **Visual States**: Hover, focus, and disabled state styling
+* - **Theme Integration**: Supports destructive and default themes
+* - **Keyboard Navigation**: Full keyboard accessibility support
+*
+* ## Usage Guidelines
+* - Use for actionable notifications (retry, undo, view details)
+* - Keep action text short and descriptive
+* - Provide meaningful `altText` for accessibility
+* - Limit to one primary action per toast
+*
+* @example
+* ```tsx
+* // Retry action for failed operations
+* <ToastAction altText="Retry the failed operation">
+*   Retry
+* </ToastAction>
+*
+* // Undo action for reversible operations
+* <ToastAction altText="Undo the last action">
+*   Undo
+* </ToastAction>
+*
+* // Navigation action
+* <ToastAction altText="View the uploaded file">
+*   View File
+* </ToastAction>
+* ```
+*/
+const ToastAction = ({ className, ...props }) => /* @__PURE__ */ jsx(ToastPrimitives.Action, {
+	className: cn("inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 font-medium text-sm transition-colors hover:bg-text focus:outline-hidden focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:focus:ring-destructive group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground", className),
+	...props
+});
+const ToastClose = ({ className, ...props }) => /* @__PURE__ */ jsx(ToastPrimitives.Close, {
+	className: cn("absolute top-1 right-1 rounded-md p-1 text-text/50 opacity-0 transition-opacity hover:text-text/80 focus:opacity-100 focus:outline-hidden focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 group-[.destructive]:hover:text-red-50", className),
+	"toast-close": "",
+	...props,
+	children: /* @__PURE__ */ jsx(X, { className: "size-5" })
+});
+/**
+* ToastTitle Component
+*
+* The primary heading text for toast notifications. Provides semantic structure
+* and proper typography hierarchy within the toast.
+*
+* ## Styling Features
+* - Semi-bold font weight for emphasis
+* - Automatic text sizing adjustments for descriptions
+* - Proper spacing relationships with other toast elements
+*
+* @example
+* ```tsx
+* <ToastTitle>File Upload Complete</ToastTitle>
+* <ToastTitle>Error: Connection Failed</ToastTitle>
+* <ToastTitle>Settings Saved</ToastTitle>
+* ```
+*/
+const ToastTitle = ({ className, ...props }) => /* @__PURE__ */ jsx(ToastPrimitives.Title, {
+	className: cn("font-semibold text-sm [&+div]:text-xs", className),
+	...props
+});
+/**
+* ToastDescription Component
+*
+* Supporting text that provides additional context or details for the toast notification.
+* Complements the ToastTitle with more detailed information.
+*
+* ## Styling Features
+* - Slightly reduced opacity for visual hierarchy
+* - Smaller text size than title
+* - Optimal line height for readability
+*
+* ## Content Guidelines
+* - Keep descriptions concise but informative
+* - Provide actionable information when possible
+* - Use plain language for better accessibility
+*
+* @example
+* ```tsx
+* <ToastDescription>
+*   Your document has been uploaded successfully and is now available for sharing.
+* </ToastDescription>
+*
+* <ToastDescription>
+*   Please check your internet connection and try again.
+* </ToastDescription>
+* ```
+*/
+const ToastDescription = ({ className, ...props }) => /* @__PURE__ */ jsx(ToastPrimitives.Description, {
+	className: cn("text-sm opacity-90", className),
+	...props
+});
+
+//#endregion
+export { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport };
 //# sourceMappingURL=Toast.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.mjs","names":[],"sources":["../../../../src/components/Toaster/Toast.tsx"],"sourcesContent":["'use client';\n\nimport * as ToastPrimitives from '@radix-ui/react-toast';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { X } from 'lucide-react';\nimport type { ComponentProps, FC, ReactElement } from 'react';\n\nconst ToastProvider = ToastPrimitives;\n\nconst ToastViewport: FC<ComponentProps<typeof ToastPrimitives.Viewport>> = ({\n  className,\n  ...props\n}) => (\n  <ToastPrimitives.Viewport\n    className={cn(\n      'fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-[420px]',\n      className\n    )}\n    {...props}\n  />\n);\n\n/**\n * Toast variant styles using class-variance-authority.\n *\n * Defines visual styles for different toast types with semantic colors,\n * animations, and responsive behavior.\n *\n * @example\n * ```tsx\n * // Error toast with red background\n * <Toast variant=\"error\">Error message</Toast>\n *\n * // Success toast with green background\n * <Toast variant=\"success\">Success message</Toast>\n *\n * // Default toast with neutral styling\n * <Toast variant=\"default\">Info message</Toast>\n * ```\n */\nconst toastVariants = cva(\n  'group data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md p-4 pr-6 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none',\n  {\n    variants: {\n      /** Toast visual variants for different message types */\n      variant: {\n        /** Error state with red styling for failures and warnings */\n        error: 'bg-error/40 text-text',\n        /** Success state with green styling for confirmations */\n        success: 'bg-success/30 text-text',\n        /** Default neutral styling for general information */\n        default: 'bg-card/80 text-text',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  }\n);\n\n/**\n * Toast Component\n *\n * A notification component that displays temporary messages to users using Radix UI primitives.\n * Supports different visual variants, animations, and user interactions including swipe-to-dismiss.\n *\n * ## Features\n * - **Visual Variants**: Error, success, and default styling themes\n * - **Animations**: Smooth slide-in/slide-out transitions with fade effects\n * - **Swipe Gestures**: Touch-friendly swipe-to-dismiss functionality\n * - **Accessibility**: Full screen reader support and keyboard navigation\n * - **Positioning**: Smart positioning with responsive viewport handling\n * - **Auto-dismiss**: Configurable automatic dismissal timing\n *\n * ## Technical Implementation\n * - Built on Radix UI Toast primitives for accessibility compliance\n * - Uses Framer Motion for smooth animations and gestures\n * - CVA (class-variance-authority) for consistent styling variants\n * - Backdrop blur effects for modern visual appeal\n * - CSS transforms for hardware-accelerated animations\n *\n * @example\n * ```tsx\n * // Basic toast with title and description\n * <Toast variant=\"default\">\n *   <ToastTitle>Notification</ToastTitle>\n *   <ToastDescription>Your action was completed successfully.</ToastDescription>\n *   <ToastClose />\n * </Toast>\n *\n * // Error toast with action button\n * <Toast variant=\"error\">\n *   <ToastTitle>Upload Failed</ToastTitle>\n *   <ToastDescription>Could not upload file. Please try again.</ToastDescription>\n *   <ToastAction altText=\"Retry upload\">Retry</ToastAction>\n *   <ToastClose />\n * </Toast>\n * ```\n */\nconst Toast: FC<\n  ComponentProps<typeof ToastPrimitives.Root> &\n    VariantProps<typeof toastVariants>\n> = ({ className, variant, ...props }) => {\n  return (\n    <ToastPrimitives.Root\n      className={cn(toastVariants({ variant }), className)}\n      {...props}\n    />\n  );\n};\n\n/**\n * ToastAction Component\n *\n * An interactive button component for toast notifications that allows users to take\n * actions related to the notification message.\n *\n * ## Features\n * - **Accessibility**: Requires `altText` prop for screen readers\n * - **Visual States**: Hover, focus, and disabled state styling\n * - **Theme Integration**: Supports destructive and default themes\n * - **Keyboard Navigation**: Full keyboard accessibility support\n *\n * ## Usage Guidelines\n * - Use for actionable notifications (retry, undo, view details)\n * - Keep action text short and descriptive\n * - Provide meaningful `altText` for accessibility\n * - Limit to one primary action per toast\n *\n * @example\n * ```tsx\n * // Retry action for failed operations\n * <ToastAction altText=\"Retry the failed operation\">\n *   Retry\n * </ToastAction>\n *\n * // Undo action for reversible operations\n * <ToastAction altText=\"Undo the last action\">\n *   Undo\n * </ToastAction>\n *\n * // Navigation action\n * <ToastAction altText=\"View the uploaded file\">\n *   View File\n * </ToastAction>\n * ```\n */\nconst ToastAction: FC<ComponentProps<typeof ToastPrimitives.Action>> = ({\n  className,\n  ...props\n}) => (\n  <ToastPrimitives.Action\n    className={cn(\n      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 font-medium text-sm transition-colors hover:bg-text focus:outline-hidden focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:focus:ring-destructive group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst ToastClose: FC<ComponentProps<typeof ToastPrimitives.Close>> = ({\n  className,\n  ...props\n}) => (\n  <ToastPrimitives.Close\n    className={cn(\n      'absolute top-1 right-1 rounded-md p-1 text-text/50 opacity-0 transition-opacity hover:text-text/80 focus:opacity-100 focus:outline-hidden focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 group-[.destructive]:hover:text-red-50',\n      className\n    )}\n    toast-close=\"\"\n    {...props}\n  >\n    <X className=\"size-5\" />\n  </ToastPrimitives.Close>\n);\n/**\n * ToastTitle Component\n *\n * The primary heading text for toast notifications. Provides semantic structure\n * and proper typography hierarchy within the toast.\n *\n * ## Styling Features\n * - Semi-bold font weight for emphasis\n * - Automatic text sizing adjustments for descriptions\n * - Proper spacing relationships with other toast elements\n *\n * @example\n * ```tsx\n * <ToastTitle>File Upload Complete</ToastTitle>\n * <ToastTitle>Error: Connection Failed</ToastTitle>\n * <ToastTitle>Settings Saved</ToastTitle>\n * ```\n */\nconst ToastTitle: FC<ComponentProps<typeof ToastPrimitives.Title>> = ({\n  className,\n  ...props\n}) => (\n  <ToastPrimitives.Title\n    className={cn('font-semibold text-sm [&+div]:text-xs', className)}\n    {...props}\n  />\n);\n\n/**\n * ToastDescription Component\n *\n * Supporting text that provides additional context or details for the toast notification.\n * Complements the ToastTitle with more detailed information.\n *\n * ## Styling Features\n * - Slightly reduced opacity for visual hierarchy\n * - Smaller text size than title\n * - Optimal line height for readability\n *\n * ## Content Guidelines\n * - Keep descriptions concise but informative\n * - Provide actionable information when possible\n * - Use plain language for better accessibility\n *\n * @example\n * ```tsx\n * <ToastDescription>\n *   Your document has been uploaded successfully and is now available for sharing.\n * </ToastDescription>\n *\n * <ToastDescription>\n *   Please check your internet connection and try again.\n * </ToastDescription>\n * ```\n */\nconst ToastDescription: FC<\n  ComponentProps<typeof ToastPrimitives.Description>\n> = ({ className, ...props }) => (\n  <ToastPrimitives.Description\n    className={cn('text-sm opacity-90', className)}\n    {...props}\n  />\n);\n/**\n * Props type for Toast component including all Radix UI Toast.Root props\n * and variant styling options.\n */\ntype ToastProps = ComponentProps<typeof Toast>;\n\n/**\n * Type for ToastAction elements used in toast configurations.\n * Ensures type safety when passing action elements to toast functions.\n */\ntype ToastActionElement = ReactElement<typeof ToastAction>;\n\nexport {\n  Toast,\n  ToastAction,\n  ToastClose,\n  ToastDescription,\n  ToastProvider,\n  ToastTitle,\n  ToastViewport,\n  type ToastActionElement,\n  type ToastProps,\n};\n"],"mappings":"qNAQA,MAAM,EAAgB,EAEhB,GAAsE,CAC1E,YACA,GAAG,KAEH,EAAC,EAAgB,SAAjB,CACE,UAAW,EACT,kIACA,EACD,CACD,GAAI,EACJ,CAAA,CAqBE,EAAgB,EACpB,ioBACA,CACE,SAAU,CAER,QAAS,CAEP,MAAO,wBAEP,QAAS,0BAET,QAAS,uBACV,CACF,CACD,gBAAiB,CACf,QAAS,UACV,CACF,CACF,CAyCK,GAGD,CAAE,YAAW,UAAS,GAAG,KAE1B,EAAC,EAAgB,KAAjB,CACE,UAAW,EAAG,EAAc,CAAE,UAAS,CAAC,CAAE,EAAU,CACpD,GAAI,EACJ,CAAA,CAwCA,GAAkE,CACtE,YACA,GAAG,KAEH,EAAC,EAAgB,OAAjB,CACE,UAAW,EACT,udACA,EACD,CACD,GAAI,EACJ,CAAA,CAGE,GAAgE,CACpE,YACA,GAAG,KAEH,EAAC,EAAgB,MAAjB,CACE,UAAW,EACT,iVACA,EACD,CACD,cAAY,GACZ,GAAI,WAEJ,EAAC,EAAD,CAAG,UAAU,SAAW,CAAA,CACF,CAAA,CAoBpB,GAAgE,CACpE,YACA,GAAG,KAEH,EAAC,EAAgB,MAAjB,CACE,UAAW,EAAG,wCAAyC,EAAU,CACjE,GAAI,EACJ,CAAA,CA8BE,GAED,CAAE,YAAW,GAAG,KACnB,EAAC,EAAgB,YAAjB,CACE,UAAW,EAAG,qBAAsB,EAAU,CAC9C,GAAI,EACJ,CAAA"}
+{"version":3,"file":"Toast.mjs","names":[],"sources":["../../../../src/components/Toaster/Toast.tsx"],"sourcesContent":["'use client';\n\nimport * as ToastPrimitives from '@radix-ui/react-toast';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { X } from 'lucide-react';\nimport type { ComponentProps, FC, ReactElement } from 'react';\n\nconst ToastProvider = ToastPrimitives;\n\nconst ToastViewport: FC<ComponentProps<typeof ToastPrimitives.Viewport>> = ({\n  className,\n  ...props\n}) => (\n  <ToastPrimitives.Viewport\n    className={cn(\n      'fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-[420px]',\n      className\n    )}\n    {...props}\n  />\n);\n\n/**\n * Toast variant styles using class-variance-authority.\n *\n * Defines visual styles for different toast types with semantic colors,\n * animations, and responsive behavior.\n *\n * @example\n * ```tsx\n * // Error toast with red background\n * <Toast variant=\"error\">Error message</Toast>\n *\n * // Success toast with green background\n * <Toast variant=\"success\">Success message</Toast>\n *\n * // Default toast with neutral styling\n * <Toast variant=\"default\">Info message</Toast>\n * ```\n */\nconst toastVariants = cva(\n  'group data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md p-4 pr-6 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none',\n  {\n    variants: {\n      /** Toast visual variants for different message types */\n      variant: {\n        /** Error state with red styling for failures and warnings */\n        error: 'bg-error/40 text-text',\n        /** Success state with green styling for confirmations */\n        success: 'bg-success/30 text-text',\n        /** Default neutral styling for general information */\n        default: 'bg-card/80 text-text',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  }\n);\n\n/**\n * Toast Component\n *\n * A notification component that displays temporary messages to users using Radix UI primitives.\n * Supports different visual variants, animations, and user interactions including swipe-to-dismiss.\n *\n * ## Features\n * - **Visual Variants**: Error, success, and default styling themes\n * - **Animations**: Smooth slide-in/slide-out transitions with fade effects\n * - **Swipe Gestures**: Touch-friendly swipe-to-dismiss functionality\n * - **Accessibility**: Full screen reader support and keyboard navigation\n * - **Positioning**: Smart positioning with responsive viewport handling\n * - **Auto-dismiss**: Configurable automatic dismissal timing\n *\n * ## Technical Implementation\n * - Built on Radix UI Toast primitives for accessibility compliance\n * - Uses Framer Motion for smooth animations and gestures\n * - CVA (class-variance-authority) for consistent styling variants\n * - Backdrop blur effects for modern visual appeal\n * - CSS transforms for hardware-accelerated animations\n *\n * @example\n * ```tsx\n * // Basic toast with title and description\n * <Toast variant=\"default\">\n *   <ToastTitle>Notification</ToastTitle>\n *   <ToastDescription>Your action was completed successfully.</ToastDescription>\n *   <ToastClose />\n * </Toast>\n *\n * // Error toast with action button\n * <Toast variant=\"error\">\n *   <ToastTitle>Upload Failed</ToastTitle>\n *   <ToastDescription>Could not upload file. Please try again.</ToastDescription>\n *   <ToastAction altText=\"Retry upload\">Retry</ToastAction>\n *   <ToastClose />\n * </Toast>\n * ```\n */\nconst Toast: FC<\n  ComponentProps<typeof ToastPrimitives.Root> &\n    VariantProps<typeof toastVariants>\n> = ({ className, variant, ...props }) => {\n  return (\n    <ToastPrimitives.Root\n      className={cn(toastVariants({ variant }), className)}\n      {...props}\n    />\n  );\n};\n\n/**\n * ToastAction Component\n *\n * An interactive button component for toast notifications that allows users to take\n * actions related to the notification message.\n *\n * ## Features\n * - **Accessibility**: Requires `altText` prop for screen readers\n * - **Visual States**: Hover, focus, and disabled state styling\n * - **Theme Integration**: Supports destructive and default themes\n * - **Keyboard Navigation**: Full keyboard accessibility support\n *\n * ## Usage Guidelines\n * - Use for actionable notifications (retry, undo, view details)\n * - Keep action text short and descriptive\n * - Provide meaningful `altText` for accessibility\n * - Limit to one primary action per toast\n *\n * @example\n * ```tsx\n * // Retry action for failed operations\n * <ToastAction altText=\"Retry the failed operation\">\n *   Retry\n * </ToastAction>\n *\n * // Undo action for reversible operations\n * <ToastAction altText=\"Undo the last action\">\n *   Undo\n * </ToastAction>\n *\n * // Navigation action\n * <ToastAction altText=\"View the uploaded file\">\n *   View File\n * </ToastAction>\n * ```\n */\nconst ToastAction: FC<ComponentProps<typeof ToastPrimitives.Action>> = ({\n  className,\n  ...props\n}) => (\n  <ToastPrimitives.Action\n    className={cn(\n      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 font-medium text-sm transition-colors hover:bg-text focus:outline-hidden focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:focus:ring-destructive group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst ToastClose: FC<ComponentProps<typeof ToastPrimitives.Close>> = ({\n  className,\n  ...props\n}) => (\n  <ToastPrimitives.Close\n    className={cn(\n      'absolute top-1 right-1 rounded-md p-1 text-text/50 opacity-0 transition-opacity hover:text-text/80 focus:opacity-100 focus:outline-hidden focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 group-[.destructive]:hover:text-red-50',\n      className\n    )}\n    toast-close=\"\"\n    {...props}\n  >\n    <X className=\"size-5\" />\n  </ToastPrimitives.Close>\n);\n/**\n * ToastTitle Component\n *\n * The primary heading text for toast notifications. Provides semantic structure\n * and proper typography hierarchy within the toast.\n *\n * ## Styling Features\n * - Semi-bold font weight for emphasis\n * - Automatic text sizing adjustments for descriptions\n * - Proper spacing relationships with other toast elements\n *\n * @example\n * ```tsx\n * <ToastTitle>File Upload Complete</ToastTitle>\n * <ToastTitle>Error: Connection Failed</ToastTitle>\n * <ToastTitle>Settings Saved</ToastTitle>\n * ```\n */\nconst ToastTitle: FC<ComponentProps<typeof ToastPrimitives.Title>> = ({\n  className,\n  ...props\n}) => (\n  <ToastPrimitives.Title\n    className={cn('font-semibold text-sm [&+div]:text-xs', className)}\n    {...props}\n  />\n);\n\n/**\n * ToastDescription Component\n *\n * Supporting text that provides additional context or details for the toast notification.\n * Complements the ToastTitle with more detailed information.\n *\n * ## Styling Features\n * - Slightly reduced opacity for visual hierarchy\n * - Smaller text size than title\n * - Optimal line height for readability\n *\n * ## Content Guidelines\n * - Keep descriptions concise but informative\n * - Provide actionable information when possible\n * - Use plain language for better accessibility\n *\n * @example\n * ```tsx\n * <ToastDescription>\n *   Your document has been uploaded successfully and is now available for sharing.\n * </ToastDescription>\n *\n * <ToastDescription>\n *   Please check your internet connection and try again.\n * </ToastDescription>\n * ```\n */\nconst ToastDescription: FC<\n  ComponentProps<typeof ToastPrimitives.Description>\n> = ({ className, ...props }) => (\n  <ToastPrimitives.Description\n    className={cn('text-sm opacity-90', className)}\n    {...props}\n  />\n);\n/**\n * Props type for Toast component including all Radix UI Toast.Root props\n * and variant styling options.\n */\ntype ToastProps = ComponentProps<typeof Toast>;\n\n/**\n * Type for ToastAction elements used in toast configurations.\n * Ensures type safety when passing action elements to toast functions.\n */\ntype ToastActionElement = ReactElement<typeof ToastAction>;\n\nexport {\n  Toast,\n  ToastAction,\n  ToastClose,\n  ToastDescription,\n  ToastProvider,\n  ToastTitle,\n  ToastViewport,\n  type ToastActionElement,\n  type ToastProps,\n};\n"],"mappings":";;;;;;;;;AAQA,MAAM,gBAAgB;AAEtB,MAAM,iBAAsE,EAC1E,WACA,GAAG,YAEH,oBAAC,gBAAgB,UAAjB;CACE,WAAW,GACT,mIACA,UACD;CACD,GAAI;CACJ;;;;;;;;;;;;;;;;;;;AAqBJ,MAAM,gBAAgB,IACpB,koBACA;CACE,UAAU,EAER,SAAS;EAEP,OAAO;EAEP,SAAS;EAET,SAAS;EACV,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCD,MAAM,SAGD,EAAE,WAAW,SAAS,GAAG,YAAY;AACxC,QACE,oBAAC,gBAAgB,MAAjB;EACE,WAAW,GAAG,cAAc,EAAE,SAAS,CAAC,EAAE,UAAU;EACpD,GAAI;EACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCN,MAAM,eAAkE,EACtE,WACA,GAAG,YAEH,oBAAC,gBAAgB,QAAjB;CACE,WAAW,GACT,wdACA,UACD;CACD,GAAI;CACJ;AAGJ,MAAM,cAAgE,EACpE,WACA,GAAG,YAEH,oBAAC,gBAAgB,OAAjB;CACE,WAAW,GACT,kVACA,UACD;CACD,eAAY;CACZ,GAAI;WAEJ,oBAAC,GAAD,EAAG,WAAU,UAAW;CACF;;;;;;;;;;;;;;;;;;;AAoB1B,MAAM,cAAgE,EACpE,WACA,GAAG,YAEH,oBAAC,gBAAgB,OAAjB;CACE,WAAW,GAAG,yCAAyC,UAAU;CACjE,GAAI;CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BJ,MAAM,oBAED,EAAE,WAAW,GAAG,YACnB,oBAAC,gBAAgB,aAAjB;CACE,WAAW,GAAG,sBAAsB,UAAU;CAC9C,GAAI;CACJ"}

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

@@ -1,2 +1,67 @@
-"use client";import{Toast as e,ToastClose as t,ToastDescription as n,ToastProvider as r,ToastTitle as i,ToastViewport as a}from"./Toast.mjs";import{useToast as o}from"./useToast.mjs";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l=()=>{let{toasts:l}=o();return c(r.Provider,{children:[l.map(({id:r,title:a,description:o,action:l,...u})=>c(e,{...u,children:[c(`div`,{className:`grid gap-1`,children:[a&&s(i,{children:a}),o&&s(n,{children:o})]}),l,s(t,{})]},r)),s(a,{})]})};export{l as Toaster};
+'use client';
+
+import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "./Toast.mjs";
+import { useToast } from "./useToast.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Toaster/Toaster.tsx
+/**
+* Toast notification provider component that renders active toast notifications.
+*
+* This component serves as the visual layer for the toast system, rendering all
+* active toasts and handling their animations and positioning. It should be placed
+* at a high level in your component tree to ensure toasts appear above other content.
+*
+* ## Features
+* - **Global Toast Rendering**: Renders all toasts from the global state
+* - **Automatic Positioning**: Uses Radix UI positioning system
+* - **Animation Integration**: Handles enter/exit animations for toasts
+* - **Accessibility**: Provides proper ARIA landmarks and focus management
+* - **Portal Rendering**: Renders toasts in a portal for z-index safety
+*
+* ## Positioning
+* Toasts are positioned at the bottom-right of the viewport by default.
+* This can be customized through the ToastViewport component styling.
+*
+* ## Integration
+* Place this component near the root of your application, typically:
+* - Next.js: In _app.tsx or layout.tsx
+* - React: In your main App component
+* - Ensure it's outside any containers that might clip overflow
+*
+* ## Usage Example
+* Place Toaster component at the root level of your application to ensure
+* toast notifications appear above all other content. Components throughout
+* your app can then use the useToast hook to display notifications.
+*
+* ## Styling Notes
+* - Toasts use fixed positioning to appear above all other content
+* - The viewport is styled for bottom-right positioning by default
+* - Animations are handled automatically through Radix UI primitives
+* - Custom positioning can be achieved by styling the ToastViewport
+*
+* ## Performance
+* - Only active toasts are rendered (dismissed toasts are cleaned up)
+* - Animations are hardware-accelerated where possible
+* - Memory usage is minimal due to automatic cleanup
+*
+* @returns JSX element rendering the toast viewport and active toasts
+*/
+const Toaster = () => {
+	const { toasts } = useToast();
+	return /* @__PURE__ */ jsxs(ToastProvider.Provider, { children: [toasts.map(({ id, title, description, action, ...props }) => /* @__PURE__ */ jsxs(Toast, {
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid gap-1",
+				children: [title && /* @__PURE__ */ jsx(ToastTitle, { children: title }), description && /* @__PURE__ */ jsx(ToastDescription, { children: description })]
+			}),
+			action,
+			/* @__PURE__ */ jsx(ToastClose, {})
+		]
+	}, id)), /* @__PURE__ */ jsx(ToastViewport, {})] });
+};
+
+//#endregion
+export { Toaster };
 //# sourceMappingURL=Toaster.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toaster.mjs","names":[],"sources":["../../../../src/components/Toaster/Toaster.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Toast,\n  ToastClose,\n  ToastDescription,\n  ToastProvider,\n  ToastTitle,\n  ToastViewport,\n} from './Toast';\nimport { useToast } from './useToast';\n\n/**\n * Toast notification provider component that renders active toast notifications.\n *\n * This component serves as the visual layer for the toast system, rendering all\n * active toasts and handling their animations and positioning. It should be placed\n * at a high level in your component tree to ensure toasts appear above other content.\n *\n * ## Features\n * - **Global Toast Rendering**: Renders all toasts from the global state\n * - **Automatic Positioning**: Uses Radix UI positioning system\n * - **Animation Integration**: Handles enter/exit animations for toasts\n * - **Accessibility**: Provides proper ARIA landmarks and focus management\n * - **Portal Rendering**: Renders toasts in a portal for z-index safety\n *\n * ## Positioning\n * Toasts are positioned at the bottom-right of the viewport by default.\n * This can be customized through the ToastViewport component styling.\n *\n * ## Integration\n * Place this component near the root of your application, typically:\n * - Next.js: In _app.tsx or layout.tsx\n * - React: In your main App component\n * - Ensure it's outside any containers that might clip overflow\n *\n * ## Usage Example\n * Place Toaster component at the root level of your application to ensure\n * toast notifications appear above all other content. Components throughout\n * your app can then use the useToast hook to display notifications.\n *\n * ## Styling Notes\n * - Toasts use fixed positioning to appear above all other content\n * - The viewport is styled for bottom-right positioning by default\n * - Animations are handled automatically through Radix UI primitives\n * - Custom positioning can be achieved by styling the ToastViewport\n *\n * ## Performance\n * - Only active toasts are rendered (dismissed toasts are cleaned up)\n * - Animations are hardware-accelerated where possible\n * - Memory usage is minimal due to automatic cleanup\n *\n * @returns JSX element rendering the toast viewport and active toasts\n */\nexport const Toaster = () => {\n  const { toasts } = useToast();\n\n  return (\n    <ToastProvider.Provider>\n      {toasts.map(({ id, title, description, action, ...props }) => (\n        <Toast key={id} {...props}>\n          <div className=\"grid gap-1\">\n            {title && <ToastTitle>{title}</ToastTitle>}\n            {description && <ToastDescription>{description}</ToastDescription>}\n          </div>\n          {action}\n          <ToastClose />\n        </Toast>\n      ))}\n      <ToastViewport />\n    </ToastProvider.Provider>\n  );\n};\n"],"mappings":"yOAsDA,MAAa,MAAgB,CAC3B,GAAM,CAAE,UAAW,GAAU,CAE7B,OACE,EAAC,EAAc,SAAf,CAAA,SAAA,CACG,EAAO,KAAK,CAAE,KAAI,QAAO,cAAa,SAAQ,GAAG,KAChD,EAAC,EAAD,CAAgB,GAAI,WAApB,CACE,EAAC,MAAD,CAAK,UAAU,sBAAf,CACG,GAAS,EAAC,EAAD,CAAA,SAAa,EAAmB,CAAA,CACzC,GAAe,EAAC,EAAD,CAAA,SAAmB,EAA+B,CAAA,CAC9D,GACL,EACD,EAAC,EAAD,EAAc,CAAA,CACR,EAPI,EAOJ,CACR,CACF,EAAC,EAAD,EAAiB,CAAA,CACM,CAAA,CAAA"}
+{"version":3,"file":"Toaster.mjs","names":[],"sources":["../../../../src/components/Toaster/Toaster.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Toast,\n  ToastClose,\n  ToastDescription,\n  ToastProvider,\n  ToastTitle,\n  ToastViewport,\n} from './Toast';\nimport { useToast } from './useToast';\n\n/**\n * Toast notification provider component that renders active toast notifications.\n *\n * This component serves as the visual layer for the toast system, rendering all\n * active toasts and handling their animations and positioning. It should be placed\n * at a high level in your component tree to ensure toasts appear above other content.\n *\n * ## Features\n * - **Global Toast Rendering**: Renders all toasts from the global state\n * - **Automatic Positioning**: Uses Radix UI positioning system\n * - **Animation Integration**: Handles enter/exit animations for toasts\n * - **Accessibility**: Provides proper ARIA landmarks and focus management\n * - **Portal Rendering**: Renders toasts in a portal for z-index safety\n *\n * ## Positioning\n * Toasts are positioned at the bottom-right of the viewport by default.\n * This can be customized through the ToastViewport component styling.\n *\n * ## Integration\n * Place this component near the root of your application, typically:\n * - Next.js: In _app.tsx or layout.tsx\n * - React: In your main App component\n * - Ensure it's outside any containers that might clip overflow\n *\n * ## Usage Example\n * Place Toaster component at the root level of your application to ensure\n * toast notifications appear above all other content. Components throughout\n * your app can then use the useToast hook to display notifications.\n *\n * ## Styling Notes\n * - Toasts use fixed positioning to appear above all other content\n * - The viewport is styled for bottom-right positioning by default\n * - Animations are handled automatically through Radix UI primitives\n * - Custom positioning can be achieved by styling the ToastViewport\n *\n * ## Performance\n * - Only active toasts are rendered (dismissed toasts are cleaned up)\n * - Animations are hardware-accelerated where possible\n * - Memory usage is minimal due to automatic cleanup\n *\n * @returns JSX element rendering the toast viewport and active toasts\n */\nexport const Toaster = () => {\n  const { toasts } = useToast();\n\n  return (\n    <ToastProvider.Provider>\n      {toasts.map(({ id, title, description, action, ...props }) => (\n        <Toast key={id} {...props}>\n          <div className=\"grid gap-1\">\n            {title && <ToastTitle>{title}</ToastTitle>}\n            {description && <ToastDescription>{description}</ToastDescription>}\n          </div>\n          {action}\n          <ToastClose />\n        </Toast>\n      ))}\n      <ToastViewport />\n    </ToastProvider.Provider>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,MAAa,gBAAgB;CAC3B,MAAM,EAAE,WAAW,UAAU;AAE7B,QACE,qBAAC,cAAc,UAAf,aACG,OAAO,KAAK,EAAE,IAAI,OAAO,aAAa,QAAQ,GAAG,YAChD,qBAAC,OAAD;EAAgB,GAAI;YAApB;GACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,SAAS,oBAAC,YAAD,YAAa,OAAmB,GACzC,eAAe,oBAAC,kBAAD,YAAmB,aAA+B,EAC9D;;GACL;GACD,oBAAC,YAAD,EAAc;GACR;IAPI,GAOJ,CACR,EACF,oBAAC,eAAD,EAAiB,EACM"}

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

@@ -1 +1,5 @@
-import{Toast as e,ToastAction as t,ToastClose as n,ToastDescription as r,ToastProvider as i,ToastTitle as a,ToastViewport as o}from"./Toast.mjs";import{reducer as s,toast as c,useToast as l}from"./useToast.mjs";import{Toaster as u}from"./Toaster.mjs";export{e as Toast,t as ToastAction,n as ToastClose,r as ToastDescription,i as ToastProvider,a as ToastTitle,o as ToastViewport,u as Toaster,s as reducer,c as toast,l as useToast};
+import { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "./Toast.mjs";
+import { reducer, toast, useToast } from "./useToast.mjs";
+import { Toaster } from "./Toaster.mjs";
+
+export { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, reducer, toast, useToast };