@plumile/ui 0.1.56 → 0.1.57

package/lib/esm/atomic/molecules/tabs/Tabs.js

@@ -1,34 +1,35 @@
-import { jsx as r } from "react/jsx-runtime";
-import { useLocation as k, Link as L } from "@plumile/router";
-import { container as h, tabRecipe as v } from "./tabs.css.js";
-const x = L, R = (s) => {
-  const { items: n, ariaLabel: o } = s, { pathname: c } = k();
-  return /* @__PURE__ */ r("div", { role: "tablist", "aria-label": o, className: h, children: n.map((d) => {
-    const { disabled: e, id: b, label: m, to: a } = d, f = c === a;
-    let i;
-    e && (i = !0);
-    let t = "default", l;
-    e ? (t = "disabled", l = -1) : f && (t = "active");
-    const p = (u) => {
-      e && u.preventDefault();
-    };
-    return /* @__PURE__ */ r(
-      x,
-      {
-        exact: !0,
-        "aria-disabled": i,
-        className: v({ state: t }),
-        role: "tab",
-        to: a,
-        tabIndex: l,
-        onClick: p,
-        children: m
-      },
-      b
-    );
-  }) });
+import { container as e, tabRecipe as t } from "./tabs.css.js";
+import { jsx as n } from "react/jsx-runtime";
+import { Link as r, useLocation as i } from "@plumile/router";
+//#region src/atomic/molecules/tabs/Tabs.tsx
+var a = r, o = (r) => {
+	let { items: o, ariaLabel: s } = r, { pathname: c } = i();
+	return /* @__PURE__ */ n("div", {
+		role: "tablist",
+		"aria-label": s,
+		className: e,
+		children: o.map((e) => {
+			let { disabled: r, id: i, label: o, to: s } = e, l = c === s, u;
+			r && (u = !0);
+			let d = "default", f;
+			r ? (d = "disabled", f = -1) : l && (d = "active");
+			let p = (e) => {
+				r && e.preventDefault();
+			};
+			return /* @__PURE__ */ n(a, {
+				exact: !0,
+				"aria-disabled": u,
+				className: t({ state: d }),
+				role: "tab",
+				to: s,
+				tabIndex: f,
+				onClick: p,
+				children: o
+			}, i);
+		})
+	});
 };
-export {
-  R as Tabs
-};
-//# sourceMappingURL=Tabs.js.map
+//#endregion
+export { o as Tabs };
+
+//# sourceMappingURL=Tabs.js.map

package/lib/esm/atomic/molecules/tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../../../src/atomic/molecules/tabs/Tabs.tsx"],"sourcesContent":["import {\n  type AnchorHTMLAttributes,\n  type ComponentPropsWithoutRef,\n  type JSX,\n  type MouseEvent,\n  type ReactNode,\n} from 'react';\nimport { Link, useLocation } from '@plumile/router';\n\nimport * as styles from './tabs.css.js';\n\nexport type TabsSelectEvent = MouseEvent<HTMLButtonElement | HTMLAnchorElement>;\n\ntype LinkComponentProps = ComponentPropsWithoutRef<typeof Link>;\ntype RouterLinkProps = LinkComponentProps &\n  AnchorHTMLAttributes<HTMLAnchorElement>;\nconst RouterLink = Link as unknown as (props: RouterLinkProps) => JSX.Element;\n\ntype BaseTabItem = {\n  id: string;\n  label: ReactNode;\n  disabled?: boolean;\n};\n\ntype NavigationTabItem = BaseTabItem & {\n  to: NonNullable<LinkComponentProps['to']>;\n};\n\nexport type TabItem = NavigationTabItem;\n\nexport type TabsProps = {\n  items: TabItem[];\n  ariaLabel?: string;\n};\n\nexport const Tabs = (props: TabsProps): JSX.Element => {\n  const { items, ariaLabel } = props;\n  const { pathname } = useLocation();\n\n  return (\n    <div role=\"tablist\" aria-label={ariaLabel} className={styles.container}>\n      {items.map((item) => {\n        const { disabled, id, label, to } = item;\n        const isActive = pathname === to;\n\n        let ariaDisabled: true | undefined;\n        if (disabled) {\n          ariaDisabled = true;\n        }\n\n        type TabState = NonNullable<\n          Parameters<typeof styles.tabRecipe>[0]\n        >['state'];\n        let tabState: TabState = 'default';\n        let tabIndex: number | undefined;\n        if (disabled) {\n          tabState = 'disabled';\n          tabIndex = -1;\n        } else if (isActive) {\n          tabState = 'active';\n        }\n\n        const handleLinkClick = (event: MouseEvent<HTMLAnchorElement>) => {\n          if (disabled) {\n            event.preventDefault();\n          }\n        };\n\n        return (\n          <RouterLink\n            key={id}\n            exact\n            aria-disabled={ariaDisabled}\n            className={styles.tabRecipe({ state: tabState })}\n            role=\"tab\"\n            to={to}\n            tabIndex={tabIndex}\n            onClick={handleLinkClick}\n          >\n            {label}\n          </RouterLink>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["RouterLink","Link","Tabs","props","items","ariaLabel","pathname","useLocation","jsx","styles.container","item","disabled","id","label","to","isActive","ariaDisabled","tabState","tabIndex","handleLinkClick","event","styles.tabRecipe"],"mappings":";;;AAgBA,MAAMA,IAAaC,GAmBNC,IAAO,CAACC,MAAkC;AACrD,QAAM,EAAE,OAAAC,GAAO,WAAAC,EAAA,IAAcF,GACvB,EAAE,UAAAG,EAAA,IAAaC,EAAA;AAErB,SACE,gBAAAC,EAAC,OAAA,EAAI,MAAK,WAAU,cAAYH,GAAW,WAAWI,GACnD,UAAAL,EAAM,IAAI,CAACM,MAAS;AACnB,UAAM,EAAE,UAAAC,GAAU,IAAAC,GAAI,OAAAC,GAAO,IAAAC,MAAOJ,GAC9BK,IAAWT,MAAaQ;AAE9B,QAAIE;AACJ,IAAIL,MACFK,IAAe;AAMjB,QAAIC,IAAqB,WACrBC;AACJ,IAAIP,KACFM,IAAW,YACXC,IAAW,MACFH,MACTE,IAAW;AAGb,UAAME,IAAkB,CAACC,MAAyC;AAChE,MAAIT,KACFS,EAAM,eAAA;AAAA,IAEV;AAEA,WACE,gBAAAZ;AAAA,MAACR;AAAA,MAAA;AAAA,QAEC,OAAK;AAAA,QACL,iBAAegB;AAAA,QACf,WAAWK,EAAiB,EAAE,OAAOJ,GAAU;AAAA,QAC/C,MAAK;AAAA,QACL,IAAAH;AAAA,QACA,UAAAI;AAAA,QACA,SAASC;AAAA,QAER,UAAAN;AAAA,MAAA;AAAA,MATID;AAAA,IAAA;AAAA,EAYX,CAAC,EAAA,CACH;AAEJ;"}
+{"version":3,"file":"Tabs.js","names":[],"sources":["../../../../../src/atomic/molecules/tabs/Tabs.tsx"],"sourcesContent":["import {\n  type AnchorHTMLAttributes,\n  type ComponentPropsWithoutRef,\n  type JSX,\n  type MouseEvent,\n  type ReactNode,\n} from 'react';\nimport { Link, useLocation } from '@plumile/router';\n\nimport * as styles from './tabs.css.js';\n\nexport type TabsSelectEvent = MouseEvent<HTMLButtonElement | HTMLAnchorElement>;\n\ntype LinkComponentProps = ComponentPropsWithoutRef<typeof Link>;\ntype RouterLinkProps = LinkComponentProps &\n  AnchorHTMLAttributes<HTMLAnchorElement>;\nconst RouterLink = Link as unknown as (props: RouterLinkProps) => JSX.Element;\n\ntype BaseTabItem = {\n  id: string;\n  label: ReactNode;\n  disabled?: boolean;\n};\n\ntype NavigationTabItem = BaseTabItem & {\n  to: NonNullable<LinkComponentProps['to']>;\n};\n\nexport type TabItem = NavigationTabItem;\n\nexport type TabsProps = {\n  items: TabItem[];\n  ariaLabel?: string;\n};\n\nexport const Tabs = (props: TabsProps): JSX.Element => {\n  const { items, ariaLabel } = props;\n  const { pathname } = useLocation();\n\n  return (\n    <div role=\"tablist\" aria-label={ariaLabel} className={styles.container}>\n      {items.map((item) => {\n        const { disabled, id, label, to } = item;\n        const isActive = pathname === to;\n\n        let ariaDisabled: true | undefined;\n        if (disabled) {\n          ariaDisabled = true;\n        }\n\n        type TabState = NonNullable<\n          Parameters<typeof styles.tabRecipe>[0]\n        >['state'];\n        let tabState: TabState = 'default';\n        let tabIndex: number | undefined;\n        if (disabled) {\n          tabState = 'disabled';\n          tabIndex = -1;\n        } else if (isActive) {\n          tabState = 'active';\n        }\n\n        const handleLinkClick = (event: MouseEvent<HTMLAnchorElement>) => {\n          if (disabled) {\n            event.preventDefault();\n          }\n        };\n\n        return (\n          <RouterLink\n            key={id}\n            exact\n            aria-disabled={ariaDisabled}\n            className={styles.tabRecipe({ state: tabState })}\n            role=\"tab\"\n            to={to}\n            tabIndex={tabIndex}\n            onClick={handleLinkClick}\n          >\n            {label}\n          </RouterLink>\n        );\n      })}\n    </div>\n  );\n};\n"],"mappings":";;;;AAgBA,IAAM,IAAa,GAmBN,KAAQ,MAAkC;CACrD,IAAM,EAAE,UAAO,iBAAc,GACvB,EAAE,gBAAa,GAAa;AAElC,QACE,kBAAC,OAAD;EAAK,MAAK;EAAU,cAAY;EAAW,WAAW;YACnD,EAAM,KAAK,MAAS;GACnB,IAAM,EAAE,aAAU,OAAI,UAAO,UAAO,GAC9B,IAAW,MAAa,GAE1B;AACJ,GAAI,MACF,IAAe;GAMjB,IAAI,IAAqB,WACrB;AACJ,GAAI,KACF,IAAW,YACX,IAAW,MACF,MACT,IAAW;GAGb,IAAM,KAAmB,MAAyC;AAChE,IAAI,KACF,EAAM,gBAAgB;;AAI1B,UACE,kBAAC,GAAD;IAEE,OAAA;IACA,iBAAe;IACf,WAAW,EAAiB,EAAE,OAAO,GAAU,CAAC;IAChD,MAAK;IACD;IACM;IACV,SAAS;cAER;IACU,EAVN,EAUM;IAEf;EACE,CAAA"}

package/lib/esm/atomic/molecules/tabs/tabs.css.js

@@ -1,9 +1,18 @@
-/* empty css                                          */
-/* empty css                        */
-import { createRuntimeFn as b } from "@vanilla-extract/recipes/createRuntimeFn";
-var q = "_11tf63d0 txvbqb9io txvbqbajx txvbqbco txvbqbao6 txvbqbdnx", a = b({ defaultClassName: "_11tf63d6 _11tf63d2 _11tf63d1 txvbqbnvf txvbqboio txvbqbp5f txvbqblx6 txvbqb9jf txvbqbco txvbqbanx txvbqb76x txvbqb746 txvbqb8x txvbqbv8r txvbqb78 txvbqb6x txvbqb7k txvbqb5sx txvbqb36f txvbqbamf txvbqb3b txvbqbl3f txvbqbpsf", variantClassNames: { state: { default: "_11tf63d7 _11tf63d3", active: "_11tf63d8 _11tf63d4 txvbqbv7z txvbqb3jo txvbqbamo", disabled: "_11tf63d9 _11tf63d5 txvbqbv8t txvbqb2k txvbqbr" } }, defaultVariants: { state: "default" }, compoundVariants: [] });
-export {
-  q as container,
-  a as tabRecipe
-};
-//# sourceMappingURL=tabs.css.js.map
+/* empty css                                      */
+/* empty css                    */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
+//#region src/atomic/molecules/tabs/tabs.css.ts
+var t = "_11tf63d0 txvbqb9io txvbqbajx txvbqbco txvbqbao6 txvbqbdnx", n = e({
+	defaultClassName: "_11tf63d6 _11tf63d2 _11tf63d1 txvbqbnvf txvbqboio txvbqbp5f txvbqblx6 txvbqb9jf txvbqbco txvbqbanx txvbqb76x txvbqb746 txvbqb8x txvbqbv8r txvbqb78 txvbqb6x txvbqb7k txvbqb5sx txvbqb36f txvbqbamf txvbqb3b txvbqbl3f txvbqbpsf",
+	variantClassNames: { state: {
+		default: "_11tf63d7 _11tf63d3",
+		active: "_11tf63d8 _11tf63d4 txvbqbv7z txvbqb3jo txvbqbamo",
+		disabled: "_11tf63d9 _11tf63d5 txvbqbv8t txvbqb2k txvbqbr"
+	} },
+	defaultVariants: { state: "default" },
+	compoundVariants: []
+});
+//#endregion
+export { t as container, n as tabRecipe };
+
+//# sourceMappingURL=tabs.css.js.map

package/lib/esm/atomic/molecules/tabs/tabs.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"tabs.css.js","names":[],"sources":["../../../../../src/atomic/molecules/tabs/tabs.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nexport const container = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignItems: 'center',\n  gap: 2,\n  justifyContent: 'center',\n});\n\nconst tabBase = style([\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: 1,\n    borderTopLeftRadius: 'md',\n    borderTopRightRadius: 'md',\n    paddingX: 4,\n    paddingY: 2,\n    fontSize: 'sm',\n    color: 'textSecondary',\n    transitionProperty: 'colors',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n    borderBottomWidth: 2,\n    borderBottomColor: 'transparent',\n    fontWeight: 'medium',\n    textDecoration: 'none',\n    outline: 'none',\n    position: 'relative',\n  }),\n  {\n    marginBottom: '-1px',\n    selectors: {\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n        color: vars.colors.primary,\n        borderBottomColor: vars.colors.primary,\n      },\n    },\n  },\n]);\n\nexport const tabRecipe = recipe({\n  base: tabBase,\n  variants: {\n    state: {\n      default: style({\n        selectors: {\n          '&:hover': {\n            color: vars.colors.primary,\n            borderBottomColor: vars.colors.primaryLight,\n          },\n        },\n      }),\n      active: sprinkles({\n        color: 'primary',\n        borderBottomColor: 'primary',\n        fontWeight: 'semibold',\n      }),\n      disabled: sprinkles({\n        color: 'textMuted',\n        pointerEvents: 'none',\n        cursor: 'not-allowed',\n      }),\n    },\n  },\n  defaultVariants: {\n    state: 'default',\n  },\n});\n\nexport type TabRecipeVariants = RecipeVariants<typeof tabRecipe>;\n"],"mappings":""}

package/lib/esm/atomic/molecules/toast/ToastProvider.js

@@ -1,78 +1,83 @@
-import { jsxs as E, jsx as x } from "react/jsx-runtime";
-import { createContext as k, useState as C, useRef as T, useCallback as l, useEffect as h, useMemo as S, useContext as b } from "react";
-import { ToastViewport as M } from "./ToastViewport.js";
-import { INFO_TOAST_DURATION_MS as O } from "./constants.js";
-const p = k(null), a = (o, s) => (c, u) => o.push({ kind: s, title: c, message: u }), D = ({
-  children: o,
-  maxToasts: s = 4
-}) => {
-  const [c, u] = C([]), w = T(0), t = T(
-    /* @__PURE__ */ new Map()
-  ), f = l((r) => {
-    const e = t.current.get(r);
-    e != null && (clearTimeout(e), t.current.delete(r)), u((n) => n.filter((i) => i.id !== r));
-  }, []), d = l(() => {
-    t.current.forEach((r) => {
-      clearTimeout(r);
-    }), t.current.clear(), u([]);
-  }, []), m = l(
-    (r) => {
-      const e = r.id ?? `toast-${w.current++}`;
-      return u((n) => {
-        const i = [...n, { ...r, kind: r.kind ?? "info", id: e }];
-        return i.length > s ? i.slice(i.length - s) : i;
-      }), e;
-    },
-    [s]
-  );
-  h(() => {
-    const r = /* @__PURE__ */ new Set();
-    c.forEach((e) => {
-      if (e.kind !== "info" || (r.add(e.id), t.current.has(e.id)))
-        return;
-      const n = setTimeout(() => {
-        t.current.delete(e.id), u((i) => i.filter((v) => v.id !== e.id));
-      }, O);
-      t.current.set(e.id, n);
-    }), t.current.forEach((e, n) => {
-      r.has(n) || (clearTimeout(e), t.current.delete(n));
-    });
-  }, [c]), h(() => {
-    const r = t.current;
-    return () => {
-      r.forEach((e) => {
-        clearTimeout(e);
-      }), r.clear();
-    };
-  }, []);
-  const g = S(() => {
-    const r = {
-      push: m,
-      dismiss: f,
-      clear: d,
-      info: () => "",
-      warning: () => "",
-      error: () => ""
-    };
-    return {
-      ...r,
-      info: a(r, "info"),
-      warning: a(r, "warning"),
-      error: a(r, "error")
-    };
-  }, [d, f, m]);
-  return /* @__PURE__ */ E(p.Provider, { value: g, children: [
-    o,
-    /* @__PURE__ */ x(M, { toasts: c, onDismiss: f })
-  ] });
-}, N = () => {
-  const o = b(p);
-  if (o == null)
-    throw new Error("useToast must be used within a ToastProvider");
-  return o;
+import { INFO_TOAST_DURATION_MS as e } from "./constants.js";
+import { ToastViewport as t } from "./ToastViewport.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { createContext as i, useCallback as a, useContext as o, useEffect as s, useMemo as c, useRef as l, useState as u } from "react";
+//#region src/atomic/molecules/toast/ToastProvider.tsx
+var d = i(null), f = (e, t) => (n, r) => e.push({
+	kind: t,
+	title: n,
+	message: r
+}), p = ({ children: i, maxToasts: o = 4 }) => {
+	let [p, m] = u([]), h = l(0), g = l(/* @__PURE__ */ new Map()), _ = a((e) => {
+		let t = g.current.get(e);
+		t != null && (clearTimeout(t), g.current.delete(e)), m((t) => t.filter((t) => t.id !== e));
+	}, []), v = a(() => {
+		g.current.forEach((e) => {
+			clearTimeout(e);
+		}), g.current.clear(), m([]);
+	}, []), y = a((e) => {
+		let t = e.id ?? `toast-${h.current++}`;
+		return m((n) => {
+			let r = [...n, {
+				...e,
+				kind: e.kind ?? "info",
+				id: t
+			}];
+			return r.length > o ? r.slice(r.length - o) : r;
+		}), t;
+	}, [o]);
+	s(() => {
+		let t = /* @__PURE__ */ new Set();
+		p.forEach((n) => {
+			if (n.kind !== "info" || (t.add(n.id), g.current.has(n.id))) return;
+			let r = setTimeout(() => {
+				g.current.delete(n.id), m((e) => e.filter((e) => e.id !== n.id));
+			}, e);
+			g.current.set(n.id, r);
+		}), g.current.forEach((e, n) => {
+			t.has(n) || (clearTimeout(e), g.current.delete(n));
+		});
+	}, [p]), s(() => {
+		let e = g.current;
+		return () => {
+			e.forEach((e) => {
+				clearTimeout(e);
+			}), e.clear();
+		};
+	}, []);
+	let b = c(() => {
+		let e = {
+			push: y,
+			dismiss: _,
+			clear: v,
+			info: () => "",
+			warning: () => "",
+			error: () => ""
+		};
+		return {
+			...e,
+			info: f(e, "info"),
+			warning: f(e, "warning"),
+			error: f(e, "error")
+		};
+	}, [
+		v,
+		_,
+		y
+	]);
+	return /* @__PURE__ */ r(d.Provider, {
+		value: b,
+		children: [i, /* @__PURE__ */ n(t, {
+			toasts: p,
+			onDismiss: _
+		})]
+	});
+}, m = () => {
+	let e = o(d);
+	if (e == null) throw Error("useToast must be used within a ToastProvider");
+	return e;
 };
-export {
-  D as ToastProvider,
-  N as useToast
-};
-//# sourceMappingURL=ToastProvider.js.map
+//#endregion
+export { p as ToastProvider, m as useToast };
+
+//# sourceMappingURL=ToastProvider.js.map

package/lib/esm/atomic/molecules/toast/ToastProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastProvider.js","sources":["../../../../../src/atomic/molecules/toast/ToastProvider.tsx"],"sourcesContent":["import {\n  createContext,\n  useEffect,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type JSX,\n  type ReactNode,\n} from 'react';\n\nimport {\n  ToastViewport,\n  type ToastItem,\n  type ToastKind,\n} from './ToastViewport.js';\nimport { INFO_TOAST_DURATION_MS } from './constants.js';\n\nexport type ToastApi = {\n  push: (toast: Omit<ToastItem, 'id'> & { id?: string }) => string;\n  dismiss: (toastId: string) => void;\n  clear: () => void;\n  info: (title: ReactNode, message?: ReactNode) => string;\n  warning: (title: ReactNode, message?: ReactNode) => string;\n  error: (title: ReactNode, message?: ReactNode) => string;\n};\n\nexport type ToastProviderProps = {\n  children: ReactNode;\n  maxToasts?: number;\n};\n\nconst ToastContext = createContext<ToastApi | null>(null);\n\nconst pushWithKind = (api: ToastApi, kind: ToastKind) => {\n  return (title: ReactNode, message?: ReactNode): string => {\n    return api.push({ kind, title, message });\n  };\n};\n\nexport const ToastProvider = ({\n  children,\n  maxToasts = 4,\n}: ToastProviderProps): JSX.Element => {\n  const [toasts, setToasts] = useState<ToastItem[]>([]);\n  const counter = useRef(0);\n  const infoToastTimers = useRef<Map<string, ReturnType<typeof setTimeout>>>(\n    new Map(),\n  );\n\n  const dismiss = useCallback((toastId: string) => {\n    const timer = infoToastTimers.current.get(toastId);\n    if (timer != null) {\n      clearTimeout(timer);\n      infoToastTimers.current.delete(toastId);\n    }\n    setToasts((prev) => {\n      return prev.filter((t) => {\n        return t.id !== toastId;\n      });\n    });\n  }, []);\n\n  const clear = useCallback(() => {\n    infoToastTimers.current.forEach((timer) => {\n      clearTimeout(timer);\n    });\n    infoToastTimers.current.clear();\n    setToasts([]);\n  }, []);\n\n  const push = useCallback(\n    (toast: Omit<ToastItem, 'id'> & { id?: string }): string => {\n      const id = toast.id ?? `toast-${counter.current++}`;\n      setToasts((prev) => {\n        const next = [...prev, { ...toast, kind: toast.kind ?? 'info', id }];\n        if (next.length > maxToasts) {\n          return next.slice(next.length - maxToasts);\n        }\n        return next;\n      });\n      return id;\n    },\n    [maxToasts],\n  );\n\n  useEffect(() => {\n    const activeInfoToastIds = new Set<string>();\n    toasts.forEach((toast) => {\n      if (toast.kind !== 'info') {\n        return;\n      }\n      activeInfoToastIds.add(toast.id);\n      if (infoToastTimers.current.has(toast.id)) {\n        return;\n      }\n      const timer = setTimeout(() => {\n        infoToastTimers.current.delete(toast.id);\n        setToasts((prev) => {\n          return prev.filter((item) => {\n            return item.id !== toast.id;\n          });\n        });\n      }, INFO_TOAST_DURATION_MS);\n      infoToastTimers.current.set(toast.id, timer);\n    });\n\n    infoToastTimers.current.forEach((timer, toastId) => {\n      if (activeInfoToastIds.has(toastId)) {\n        return;\n      }\n      clearTimeout(timer);\n      infoToastTimers.current.delete(toastId);\n    });\n  }, [toasts]);\n\n  useEffect(() => {\n    const timers = infoToastTimers.current;\n    return () => {\n      timers.forEach((timer) => {\n        clearTimeout(timer);\n      });\n      timers.clear();\n    };\n  }, []);\n\n  const api = useMemo<ToastApi>(() => {\n    const base: ToastApi = {\n      push,\n      dismiss,\n      clear,\n      info: () => {\n        return '';\n      },\n      warning: () => {\n        return '';\n      },\n      error: () => {\n        return '';\n      },\n    };\n    return {\n      ...base,\n      info: pushWithKind(base, 'info'),\n      warning: pushWithKind(base, 'warning'),\n      error: pushWithKind(base, 'error'),\n    };\n  }, [clear, dismiss, push]);\n\n  return (\n    <ToastContext.Provider value={api}>\n      {children}\n      <ToastViewport toasts={toasts} onDismiss={dismiss} />\n    </ToastContext.Provider>\n  );\n};\n\nexport const useToast = (): ToastApi => {\n  const value = useContext(ToastContext);\n  if (value == null) {\n    throw new Error('useToast must be used within a ToastProvider');\n  }\n  return value;\n};\n"],"names":["ToastContext","createContext","pushWithKind","api","kind","title","message","ToastProvider","children","maxToasts","toasts","setToasts","useState","counter","useRef","infoToastTimers","dismiss","useCallback","toastId","timer","prev","t","clear","push","toast","id","next","useEffect","activeInfoToastIds","item","INFO_TOAST_DURATION_MS","timers","useMemo","base","jsxs","jsx","ToastViewport","useToast","value","useContext"],"mappings":"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"}
+{"version":3,"file":"ToastProvider.js","names":[],"sources":["../../../../../src/atomic/molecules/toast/ToastProvider.tsx"],"sourcesContent":["import {\n  createContext,\n  useEffect,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type JSX,\n  type ReactNode,\n} from 'react';\n\nimport {\n  ToastViewport,\n  type ToastItem,\n  type ToastKind,\n} from './ToastViewport.js';\nimport { INFO_TOAST_DURATION_MS } from './constants.js';\n\nexport type ToastApi = {\n  push: (toast: Omit<ToastItem, 'id'> & { id?: string }) => string;\n  dismiss: (toastId: string) => void;\n  clear: () => void;\n  info: (title: ReactNode, message?: ReactNode) => string;\n  warning: (title: ReactNode, message?: ReactNode) => string;\n  error: (title: ReactNode, message?: ReactNode) => string;\n};\n\nexport type ToastProviderProps = {\n  children: ReactNode;\n  maxToasts?: number;\n};\n\nconst ToastContext = createContext<ToastApi | null>(null);\n\nconst pushWithKind = (api: ToastApi, kind: ToastKind) => {\n  return (title: ReactNode, message?: ReactNode): string => {\n    return api.push({ kind, title, message });\n  };\n};\n\nexport const ToastProvider = ({\n  children,\n  maxToasts = 4,\n}: ToastProviderProps): JSX.Element => {\n  const [toasts, setToasts] = useState<ToastItem[]>([]);\n  const counter = useRef(0);\n  const infoToastTimers = useRef<Map<string, ReturnType<typeof setTimeout>>>(\n    new Map(),\n  );\n\n  const dismiss = useCallback((toastId: string) => {\n    const timer = infoToastTimers.current.get(toastId);\n    if (timer != null) {\n      clearTimeout(timer);\n      infoToastTimers.current.delete(toastId);\n    }\n    setToasts((prev) => {\n      return prev.filter((t) => {\n        return t.id !== toastId;\n      });\n    });\n  }, []);\n\n  const clear = useCallback(() => {\n    infoToastTimers.current.forEach((timer) => {\n      clearTimeout(timer);\n    });\n    infoToastTimers.current.clear();\n    setToasts([]);\n  }, []);\n\n  const push = useCallback(\n    (toast: Omit<ToastItem, 'id'> & { id?: string }): string => {\n      const id = toast.id ?? `toast-${counter.current++}`;\n      setToasts((prev) => {\n        const next = [...prev, { ...toast, kind: toast.kind ?? 'info', id }];\n        if (next.length > maxToasts) {\n          return next.slice(next.length - maxToasts);\n        }\n        return next;\n      });\n      return id;\n    },\n    [maxToasts],\n  );\n\n  useEffect(() => {\n    const activeInfoToastIds = new Set<string>();\n    toasts.forEach((toast) => {\n      if (toast.kind !== 'info') {\n        return;\n      }\n      activeInfoToastIds.add(toast.id);\n      if (infoToastTimers.current.has(toast.id)) {\n        return;\n      }\n      const timer = setTimeout(() => {\n        infoToastTimers.current.delete(toast.id);\n        setToasts((prev) => {\n          return prev.filter((item) => {\n            return item.id !== toast.id;\n          });\n        });\n      }, INFO_TOAST_DURATION_MS);\n      infoToastTimers.current.set(toast.id, timer);\n    });\n\n    infoToastTimers.current.forEach((timer, toastId) => {\n      if (activeInfoToastIds.has(toastId)) {\n        return;\n      }\n      clearTimeout(timer);\n      infoToastTimers.current.delete(toastId);\n    });\n  }, [toasts]);\n\n  useEffect(() => {\n    const timers = infoToastTimers.current;\n    return () => {\n      timers.forEach((timer) => {\n        clearTimeout(timer);\n      });\n      timers.clear();\n    };\n  }, []);\n\n  const api = useMemo<ToastApi>(() => {\n    const base: ToastApi = {\n      push,\n      dismiss,\n      clear,\n      info: () => {\n        return '';\n      },\n      warning: () => {\n        return '';\n      },\n      error: () => {\n        return '';\n      },\n    };\n    return {\n      ...base,\n      info: pushWithKind(base, 'info'),\n      warning: pushWithKind(base, 'warning'),\n      error: pushWithKind(base, 'error'),\n    };\n  }, [clear, dismiss, push]);\n\n  return (\n    <ToastContext.Provider value={api}>\n      {children}\n      <ToastViewport toasts={toasts} onDismiss={dismiss} />\n    </ToastContext.Provider>\n  );\n};\n\nexport const useToast = (): ToastApi => {\n  const value = useContext(ToastContext);\n  if (value == null) {\n    throw new Error('useToast must be used within a ToastProvider');\n  }\n  return value;\n};\n"],"mappings":";;;;;AAiCA,IAAM,IAAe,EAA+B,KAAK,EAEnD,KAAgB,GAAe,OAC3B,GAAkB,MACjB,EAAI,KAAK;CAAE;CAAM;CAAO;CAAS,CAAC,EAIhC,KAAiB,EAC5B,aACA,eAAY,QACyB;CACrC,IAAM,CAAC,GAAQ,KAAa,EAAsB,EAAE,CAAC,EAC/C,IAAU,EAAO,EAAE,EACnB,IAAkB,kBACtB,IAAI,KAAK,CACV,EAEK,IAAU,GAAa,MAAoB;EAC/C,IAAM,IAAQ,EAAgB,QAAQ,IAAI,EAAQ;AAKlD,EAJI,KAAS,SACX,aAAa,EAAM,EACnB,EAAgB,QAAQ,OAAO,EAAQ,GAEzC,GAAW,MACF,EAAK,QAAQ,MACX,EAAE,OAAO,EAChB,CACF;IACD,EAAE,CAAC,EAEA,IAAQ,QAAkB;AAK9B,EAJA,EAAgB,QAAQ,SAAS,MAAU;AACzC,gBAAa,EAAM;IACnB,EACF,EAAgB,QAAQ,OAAO,EAC/B,EAAU,EAAE,CAAC;IACZ,EAAE,CAAC,EAEA,IAAO,GACV,MAA2D;EAC1D,IAAM,IAAK,EAAM,MAAM,SAAS,EAAQ;AAQxC,SAPA,GAAW,MAAS;GAClB,IAAM,IAAO,CAAC,GAAG,GAAM;IAAE,GAAG;IAAO,MAAM,EAAM,QAAQ;IAAQ;IAAI,CAAC;AAIpE,UAHI,EAAK,SAAS,IACT,EAAK,MAAM,EAAK,SAAS,EAAU,GAErC;IACP,EACK;IAET,CAAC,EAAU,CACZ;AAgCD,CA9BA,QAAgB;EACd,IAAM,oBAAqB,IAAI,KAAa;AAoB5C,EAnBA,EAAO,SAAS,MAAU;AAKxB,OAJI,EAAM,SAAS,WAGnB,EAAmB,IAAI,EAAM,GAAG,EAC5B,EAAgB,QAAQ,IAAI,EAAM,GAAG,EACvC;GAEF,IAAM,IAAQ,iBAAiB;AAE7B,IADA,EAAgB,QAAQ,OAAO,EAAM,GAAG,EACxC,GAAW,MACF,EAAK,QAAQ,MACX,EAAK,OAAO,EAAM,GACzB,CACF;MACD,EAAuB;AAC1B,KAAgB,QAAQ,IAAI,EAAM,IAAI,EAAM;IAC5C,EAEF,EAAgB,QAAQ,SAAS,GAAO,MAAY;AAC9C,KAAmB,IAAI,EAAQ,KAGnC,aAAa,EAAM,EACnB,EAAgB,QAAQ,OAAO,EAAQ;IACvC;IACD,CAAC,EAAO,CAAC,EAEZ,QAAgB;EACd,IAAM,IAAS,EAAgB;AAC/B,eAAa;AAIX,GAHA,EAAO,SAAS,MAAU;AACxB,iBAAa,EAAM;KACnB,EACF,EAAO,OAAO;;IAEf,EAAE,CAAC;CAEN,IAAM,IAAM,QAAwB;EAClC,IAAM,IAAiB;GACrB;GACA;GACA;GACA,YACS;GAET,eACS;GAET,aACS;GAEV;AACD,SAAO;GACL,GAAG;GACH,MAAM,EAAa,GAAM,OAAO;GAChC,SAAS,EAAa,GAAM,UAAU;GACtC,OAAO,EAAa,GAAM,QAAQ;GACnC;IACA;EAAC;EAAO;EAAS;EAAK,CAAC;AAE1B,QACE,kBAAC,EAAa,UAAd;EAAuB,OAAO;YAA9B,CACG,GACD,kBAAC,GAAD;GAAuB;GAAQ,WAAW;GAAW,CAAA,CAC/B;;GAIf,UAA2B;CACtC,IAAM,IAAQ,EAAW,EAAa;AACtC,KAAI,KAAS,KACX,OAAU,MAAM,+CAA+C;AAEjE,QAAO"}

package/lib/esm/atomic/molecules/toast/ToastViewport.js

@@ -1,71 +1,76 @@
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import { useMemo as v } from "react";
-import { ModalCloseSvg as g } from "../../../icons/ModalCloseSvg.js";
-import { Button as b } from "../../atoms/button/Button.js";
-import { useUiTranslation as k } from "../../../i18n/useUiTranslation.js";
-import { message as T, actions as x, header as y, title as C, closeButton as w, kindRecipe as A, toast as B, progressTrack as M, progressBar as O, viewport as S } from "./toast.css.js";
-import { cx as u } from "../../../theme/tools.js";
-import { INFO_TOAST_DURATION_MS as _ } from "./constants.js";
-const V = ({
-  toasts: r,
-  onDismiss: l,
-  dismissLabel: p,
-  className: h
-}) => {
-  const { t: f } = k(), n = p ?? f("toast.dismissAriaLabel"), N = v(() => r.map((i) => {
-    const o = i.kind ?? "info", a = i.actions ?? [];
-    let t = null;
-    i.message != null && (t = /* @__PURE__ */ e("div", { className: T, children: i.message }));
-    let m = null;
-    a.length > 0 && (m = /* @__PURE__ */ e("div", { className: x, children: a.map((s) => /* @__PURE__ */ e(
-      b,
-      {
-        type: "button",
-        size: "small",
-        variant: "secondary",
-        onClick: s.onClick,
-        children: s.label
-      },
-      s.id
-    )) }));
-    let d = null;
-    return o === "info" && (d = /* @__PURE__ */ e("div", { className: M, "aria-hidden": "true", children: /* @__PURE__ */ e(
-      "div",
-      {
-        className: O,
-        style: { animationDuration: `${_}ms` }
-      }
-    ) })), /* @__PURE__ */ c(
-      "div",
-      {
-        className: u(B, A({ kind: o })),
-        children: [
-          /* @__PURE__ */ c("div", { className: y, children: [
-            /* @__PURE__ */ e("div", { className: C, children: i.title }),
-            /* @__PURE__ */ e(
-              "button",
-              {
-                type: "button",
-                className: w,
-                "aria-label": n,
-                onClick: () => {
-                  l(i.id);
-                },
-                children: /* @__PURE__ */ e(g, { width: 18, height: 18, "aria-hidden": "true" })
-              }
-            )
-          ] }),
-          t,
-          m,
-          d
-        ]
-      },
-      i.id
-    );
-  }), [l, n, r]);
-  return r.length === 0 ? null : /* @__PURE__ */ e("div", { className: u(S, h), children: N });
+import { cx as e } from "../../../theme/tools.js";
+import { useUiTranslation as t } from "../../../i18n/useUiTranslation.js";
+import { Button as n } from "../../atoms/button/Button.js";
+import { ModalCloseSvg as r } from "../../../icons/ModalCloseSvg.js";
+import { actions as i, closeButton as a, header as o, kindRecipe as s, message as c, progressBar as l, progressTrack as u, title as d, toast as f, viewport as p } from "./toast.css.js";
+import { INFO_TOAST_DURATION_MS as m } from "./constants.js";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { useMemo as _ } from "react";
+//#region src/atomic/molecules/toast/ToastViewport.tsx
+var v = ({ toasts: v, onDismiss: y, dismissLabel: b, className: x }) => {
+	let { t: S } = t(), C = b ?? S("toast.dismissAriaLabel"), w = _(() => v.map((t) => {
+		let p = t.kind ?? "info", _ = t.actions ?? [], v = null;
+		t.message != null && (v = /* @__PURE__ */ h("div", {
+			className: c,
+			children: t.message
+		}));
+		let b = null;
+		_.length > 0 && (b = /* @__PURE__ */ h("div", {
+			className: i,
+			children: _.map((e) => /* @__PURE__ */ h(n, {
+				type: "button",
+				size: "small",
+				variant: "secondary",
+				onClick: e.onClick,
+				children: e.label
+			}, e.id))
+		}));
+		let x = null;
+		return p === "info" && (x = /* @__PURE__ */ h("div", {
+			className: u,
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ h("div", {
+				className: l,
+				style: { animationDuration: `${m}ms` }
+			})
+		})), /* @__PURE__ */ g("div", {
+			className: e(f, s({ kind: p })),
+			children: [
+				/* @__PURE__ */ g("div", {
+					className: o,
+					children: [/* @__PURE__ */ h("div", {
+						className: d,
+						children: t.title
+					}), /* @__PURE__ */ h("button", {
+						type: "button",
+						className: a,
+						"aria-label": C,
+						onClick: () => {
+							y(t.id);
+						},
+						children: /* @__PURE__ */ h(r, {
+							width: 18,
+							height: 18,
+							"aria-hidden": "true"
+						})
+					})]
+				}),
+				v,
+				b,
+				x
+			]
+		}, t.id);
+	}), [
+		y,
+		C,
+		v
+	]);
+	return v.length === 0 ? null : /* @__PURE__ */ h("div", {
+		className: e(p, x),
+		children: w
+	});
 };
-export {
-  V as ToastViewport
-};
-//# sourceMappingURL=ToastViewport.js.map
+//#endregion
+export { v as ToastViewport };
+
+//# sourceMappingURL=ToastViewport.js.map

package/lib/esm/atomic/molecules/toast/ToastViewport.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastViewport.js","sources":["../../../../../src/atomic/molecules/toast/ToastViewport.tsx"],"sourcesContent":["import { type JSX, type ReactNode, useMemo } from 'react';\nimport type { RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { ModalCloseSvg } from '../../../icons/ModalCloseSvg.js';\nimport { Button } from '../../atoms/button/Button.js';\nimport { useUiTranslation } from '../../../i18n/useUiTranslation.js';\n\nimport * as styles from './toast.css.js';\nimport { cx } from '../../../theme/tools.js';\nimport { INFO_TOAST_DURATION_MS } from './constants.js';\n\nexport type ToastKind = NonNullable<\n  NonNullable<RecipeVariants<typeof styles.kindRecipe>>['kind']\n>;\n\nexport type ToastAction = {\n  id: string;\n  label: string;\n  onClick: () => void;\n};\n\nexport type ToastItem = {\n  id: string;\n  kind?: ToastKind;\n  title: ReactNode;\n  message?: ReactNode;\n  actions?: readonly ToastAction[];\n};\n\nexport type ToastViewportProps = {\n  toasts: readonly ToastItem[];\n  onDismiss: (toastId: string) => void;\n  dismissLabel?: string;\n  className?: string;\n};\n\nexport const ToastViewport = ({\n  toasts,\n  onDismiss,\n  dismissLabel,\n  className,\n}: ToastViewportProps): JSX.Element | null => {\n  const { t } = useUiTranslation();\n  const resolvedDismissLabel = dismissLabel ?? t('toast.dismissAriaLabel');\n\n  const items = useMemo(() => {\n    return toasts.map((toast) => {\n      const kind = toast.kind ?? 'info';\n      const actions = toast.actions ?? [];\n\n      let messageNode: JSX.Element | null = null;\n      if (toast.message != null) {\n        messageNode = <div className={styles.message}>{toast.message}</div>;\n      }\n\n      let actionsNode: JSX.Element | null = null;\n      if (actions.length > 0) {\n        actionsNode = (\n          <div className={styles.actions}>\n            {actions.map((action) => {\n              return (\n                <Button\n                  key={action.id}\n                  type=\"button\"\n                  size=\"small\"\n                  variant=\"secondary\"\n                  onClick={action.onClick}\n                >\n                  {action.label}\n                </Button>\n              );\n            })}\n          </div>\n        );\n      }\n\n      let progressNode: JSX.Element | null = null;\n      if (kind === 'info') {\n        progressNode = (\n          <div className={styles.progressTrack} aria-hidden=\"true\">\n            <div\n              className={styles.progressBar}\n              style={{ animationDuration: `${INFO_TOAST_DURATION_MS}ms` }}\n            />\n          </div>\n        );\n      }\n\n      return (\n        <div\n          key={toast.id}\n          className={cx(styles.toast, styles.kindRecipe({ kind }))}\n        >\n          <div className={styles.header}>\n            <div className={styles.title}>{toast.title}</div>\n            <button\n              type=\"button\"\n              className={styles.closeButton}\n              aria-label={resolvedDismissLabel}\n              onClick={() => {\n                onDismiss(toast.id);\n              }}\n            >\n              <ModalCloseSvg width={18} height={18} aria-hidden=\"true\" />\n            </button>\n          </div>\n          {messageNode}\n          {actionsNode}\n          {progressNode}\n        </div>\n      );\n    });\n  }, [onDismiss, resolvedDismissLabel, toasts]);\n\n  if (toasts.length === 0) {\n    return null;\n  }\n\n  return <div className={cx(styles.viewport, className)}>{items}</div>;\n};\n"],"names":["ToastViewport","toasts","onDismiss","dismissLabel","className","t","useUiTranslation","resolvedDismissLabel","items","useMemo","toast","kind","actions","messageNode","styles.message","actionsNode","jsx","styles.actions","action","Button","progressNode","styles.progressTrack","styles.progressBar","INFO_TOAST_DURATION_MS","jsxs","cx","styles.toast","styles.kindRecipe","styles.header","styles.title","styles.closeButton","ModalCloseSvg","styles.viewport"],"mappings":";;;;;;;;AAoCO,MAAMA,IAAgB,CAAC;AAAA,EAC5B,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AACF,MAA8C;AAC5C,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACRC,IAAuBJ,KAAgBE,EAAE,wBAAwB,GAEjEG,IAAQC,EAAQ,MACbR,EAAO,IAAI,CAACS,MAAU;AAC3B,UAAMC,IAAOD,EAAM,QAAQ,QACrBE,IAAUF,EAAM,WAAW,CAAA;AAEjC,QAAIG,IAAkC;AACtC,IAAIH,EAAM,WAAW,SACnBG,sBAAe,OAAA,EAAI,WAAWC,GAAiB,YAAM,SAAQ;AAG/D,QAAIC,IAAkC;AACtC,IAAIH,EAAQ,SAAS,MACnBG,IACE,gBAAAC,EAAC,SAAI,WAAWC,GACb,UAAAL,EAAQ,IAAI,CAACM,MAEV,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QAEC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,SAASD,EAAO;AAAA,QAEf,UAAAA,EAAO;AAAA,MAAA;AAAA,MANHA,EAAO;AAAA,IAAA,CASjB,EAAA,CACH;AAIJ,QAAIE,IAAmC;AACvC,WAAIT,MAAS,WACXS,sBACG,OAAA,EAAI,WAAWC,GAAsB,eAAY,QAChD,UAAA,gBAAAL;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWM;AAAAA,QACX,OAAO,EAAE,mBAAmB,GAAGC,CAAsB,KAAA;AAAA,MAAK;AAAA,IAAA,GAE9D,IAKF,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAWC,EAAGC,GAAcC,EAAkB,EAAE,MAAAhB,EAAA,CAAM,CAAC;AAAA,QAEvD,UAAA;AAAA,UAAA,gBAAAa,EAAC,OAAA,EAAI,WAAWI,GACd,UAAA;AAAA,YAAA,gBAAAZ,EAAC,OAAA,EAAI,WAAWa,GAAe,YAAM,OAAM;AAAA,YAC3C,gBAAAb;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,WAAWc;AAAAA,gBACX,cAAYvB;AAAA,gBACZ,SAAS,MAAM;AACb,kBAAAL,EAAUQ,EAAM,EAAE;AAAA,gBACpB;AAAA,gBAEA,4BAACqB,GAAA,EAAc,OAAO,IAAI,QAAQ,IAAI,eAAY,OAAA,CAAO;AAAA,cAAA;AAAA,YAAA;AAAA,UAC3D,GACF;AAAA,UACClB;AAAA,UACAE;AAAA,UACAK;AAAA,QAAA;AAAA,MAAA;AAAA,MAlBIV,EAAM;AAAA,IAAA;AAAA,EAqBjB,CAAC,GACA,CAACR,GAAWK,GAAsBN,CAAM,CAAC;AAE5C,SAAIA,EAAO,WAAW,IACb,OAGF,gBAAAe,EAAC,SAAI,WAAWS,EAAGO,GAAiB5B,CAAS,GAAI,UAAAI,GAAM;AAChE;"}
+{"version":3,"file":"ToastViewport.js","names":[],"sources":["../../../../../src/atomic/molecules/toast/ToastViewport.tsx"],"sourcesContent":["import { type JSX, type ReactNode, useMemo } from 'react';\nimport type { RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { ModalCloseSvg } from '../../../icons/ModalCloseSvg.js';\nimport { Button } from '../../atoms/button/Button.js';\nimport { useUiTranslation } from '../../../i18n/useUiTranslation.js';\n\nimport * as styles from './toast.css.js';\nimport { cx } from '../../../theme/tools.js';\nimport { INFO_TOAST_DURATION_MS } from './constants.js';\n\nexport type ToastKind = NonNullable<\n  NonNullable<RecipeVariants<typeof styles.kindRecipe>>['kind']\n>;\n\nexport type ToastAction = {\n  id: string;\n  label: string;\n  onClick: () => void;\n};\n\nexport type ToastItem = {\n  id: string;\n  kind?: ToastKind;\n  title: ReactNode;\n  message?: ReactNode;\n  actions?: readonly ToastAction[];\n};\n\nexport type ToastViewportProps = {\n  toasts: readonly ToastItem[];\n  onDismiss: (toastId: string) => void;\n  dismissLabel?: string;\n  className?: string;\n};\n\nexport const ToastViewport = ({\n  toasts,\n  onDismiss,\n  dismissLabel,\n  className,\n}: ToastViewportProps): JSX.Element | null => {\n  const { t } = useUiTranslation();\n  const resolvedDismissLabel = dismissLabel ?? t('toast.dismissAriaLabel');\n\n  const items = useMemo(() => {\n    return toasts.map((toast) => {\n      const kind = toast.kind ?? 'info';\n      const actions = toast.actions ?? [];\n\n      let messageNode: JSX.Element | null = null;\n      if (toast.message != null) {\n        messageNode = <div className={styles.message}>{toast.message}</div>;\n      }\n\n      let actionsNode: JSX.Element | null = null;\n      if (actions.length > 0) {\n        actionsNode = (\n          <div className={styles.actions}>\n            {actions.map((action) => {\n              return (\n                <Button\n                  key={action.id}\n                  type=\"button\"\n                  size=\"small\"\n                  variant=\"secondary\"\n                  onClick={action.onClick}\n                >\n                  {action.label}\n                </Button>\n              );\n            })}\n          </div>\n        );\n      }\n\n      let progressNode: JSX.Element | null = null;\n      if (kind === 'info') {\n        progressNode = (\n          <div className={styles.progressTrack} aria-hidden=\"true\">\n            <div\n              className={styles.progressBar}\n              style={{ animationDuration: `${INFO_TOAST_DURATION_MS}ms` }}\n            />\n          </div>\n        );\n      }\n\n      return (\n        <div\n          key={toast.id}\n          className={cx(styles.toast, styles.kindRecipe({ kind }))}\n        >\n          <div className={styles.header}>\n            <div className={styles.title}>{toast.title}</div>\n            <button\n              type=\"button\"\n              className={styles.closeButton}\n              aria-label={resolvedDismissLabel}\n              onClick={() => {\n                onDismiss(toast.id);\n              }}\n            >\n              <ModalCloseSvg width={18} height={18} aria-hidden=\"true\" />\n            </button>\n          </div>\n          {messageNode}\n          {actionsNode}\n          {progressNode}\n        </div>\n      );\n    });\n  }, [onDismiss, resolvedDismissLabel, toasts]);\n\n  if (toasts.length === 0) {\n    return null;\n  }\n\n  return <div className={cx(styles.viewport, className)}>{items}</div>;\n};\n"],"mappings":";;;;;;;;;AAoCA,IAAa,KAAiB,EAC5B,WACA,cACA,iBACA,mBAC4C;CAC5C,IAAM,EAAE,SAAM,GAAkB,EAC1B,IAAuB,KAAgB,EAAE,yBAAyB,EAElE,IAAQ,QACL,EAAO,KAAK,MAAU;EAC3B,IAAM,IAAO,EAAM,QAAQ,QACrB,IAAU,EAAM,WAAW,EAAE,EAE/B,IAAkC;AACtC,EAAI,EAAM,WAAW,SACnB,IAAc,kBAAC,OAAD;GAAK,WAAW;aAAiB,EAAM;GAAc,CAAA;EAGrE,IAAI,IAAkC;AACtC,EAAI,EAAQ,SAAS,MACnB,IACE,kBAAC,OAAD;GAAK,WAAW;aACb,EAAQ,KAAK,MAEV,kBAAC,GAAD;IAEE,MAAK;IACL,MAAK;IACL,SAAQ;IACR,SAAS,EAAO;cAEf,EAAO;IACD,EAPF,EAAO,GAOL,CAEX;GACE,CAAA;EAIV,IAAI,IAAmC;AAYvC,SAXI,MAAS,WACX,IACE,kBAAC,OAAD;GAAK,WAAW;GAAsB,eAAY;aAChD,kBAAC,OAAD;IACE,WAAW;IACX,OAAO,EAAE,mBAAmB,GAAG,EAAuB,KAAK;IAC3D,CAAA;GACE,CAAA,GAKR,kBAAC,OAAD;GAEE,WAAW,EAAG,GAAc,EAAkB,EAAE,SAAM,CAAC,CAAC;aAF1D;IAIE,kBAAC,OAAD;KAAK,WAAW;eAAhB,CACE,kBAAC,OAAD;MAAK,WAAW;gBAAe,EAAM;MAAY,CAAA,EACjD,kBAAC,UAAD;MACE,MAAK;MACL,WAAW;MACX,cAAY;MACZ,eAAe;AACb,SAAU,EAAM,GAAG;;gBAGrB,kBAAC,GAAD;OAAe,OAAO;OAAI,QAAQ;OAAI,eAAY;OAAS,CAAA;MACpD,CAAA,CACL;;IACL;IACA;IACA;IACG;KAnBC,EAAM,GAmBP;GAER,EACD;EAAC;EAAW;EAAsB;EAAO,CAAC;AAM7C,QAJI,EAAO,WAAW,IACb,OAGF,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAiB,EAAU;YAAG;EAAY,CAAA"}

package/lib/esm/atomic/molecules/toast/constants.js

@@ -1,5 +1,6 @@
-const O = 15e3;
-export {
-  O as INFO_TOAST_DURATION_MS
-};
-//# sourceMappingURL=constants.js.map
+//#region src/atomic/molecules/toast/constants.ts
+var e = 15e3;
+//#endregion
+export { e as INFO_TOAST_DURATION_MS };
+
+//# sourceMappingURL=constants.js.map

package/lib/esm/atomic/molecules/toast/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../../../src/atomic/molecules/toast/constants.ts"],"sourcesContent":["export const INFO_TOAST_DURATION_MS = 15_000;\n"],"names":["INFO_TOAST_DURATION_MS"],"mappings":"AAAO,MAAMA,IAAyB;"}
+{"version":3,"file":"constants.js","names":[],"sources":["../../../../../src/atomic/molecules/toast/constants.ts"],"sourcesContent":["export const INFO_TOAST_DURATION_MS = 15_000;\n"],"mappings":";AAAA,IAAa,IAAyB"}

package/lib/esm/atomic/molecules/toast/toast.css.js

@@ -1,17 +1,18 @@
-/* empty css                                          */
-/* empty css                         */
-import { createRuntimeFn as b } from "@vanilla-extract/recipes/createRuntimeFn";
-var q = "_19cwz1i0 txvbqbpso txvbqbpuf txvbqb836 txvbqbuvx txvbqb9io txvbqbai6 txvbqbao6", i = "_19cwz1i3 _19cwz1i2 txvbqbnvf txvbqboio txvbqbp5o txvbqblxf txvbqbuzn txvbqbwf txvbqb1qf txvbqb1co txvbqb9io txvbqbai6 txvbqbanx txvbqb1ro txvbqb8q6", a = b({ defaultClassName: "_19cwz1i4", variantClassNames: { kind: { info: "_19cwz1i5", warning: "_19cwz1i6", error: "_19cwz1i7" } }, defaultVariants: { kind: "info" }, compoundVariants: [] }), o = "_19cwz1i8 txvbqb9io txvbqbcf txvbqbdoo txvbqbao6", r = "_19cwz1i9 txvbqbamo", c = "_19cwz1ia txvbqb8x", e = "_19cwz1ib txvbqb9jf txvbqbco txvbqbao6 txvbqbhwx", w = "_19cwz1id _19cwz1ic txvbqb9jf txvbqbco txvbqbdnx txvbqbtx6 txvbqbc6o txvbqb1rf txvbqb1px txvbqb12f txvbqbuzj txvbqbv", n = "_19cwz1if _19cwz1ie txvbqbhwx txvbqb1t6", z = "_19cwz1ih";
-export {
-  e as actions,
-  w as closeButton,
-  o as header,
-  a as kindRecipe,
-  c as message,
-  z as progressBar,
-  n as progressTrack,
-  r as title,
-  i as toast,
-  q as viewport
-};
-//# sourceMappingURL=toast.css.js.map
+/* empty css                                      */
+/* empty css                     */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
+//#region src/atomic/molecules/toast/toast.css.ts
+var t = "_19cwz1i0 txvbqbpso txvbqbpuf txvbqb836 txvbqbuvx txvbqb9io txvbqbai6 txvbqbao6", n = "_19cwz1i3 _19cwz1i2 txvbqbnvf txvbqboio txvbqbp5o txvbqblxf txvbqbuzn txvbqbwf txvbqb1qf txvbqb1co txvbqb9io txvbqbai6 txvbqbanx txvbqb1ro txvbqb8q6", r = e({
+	defaultClassName: "_19cwz1i4",
+	variantClassNames: { kind: {
+		info: "_19cwz1i5",
+		warning: "_19cwz1i6",
+		error: "_19cwz1i7"
+	} },
+	defaultVariants: { kind: "info" },
+	compoundVariants: []
+}), i = "_19cwz1i8 txvbqb9io txvbqbcf txvbqbdoo txvbqbao6", a = "_19cwz1i9 txvbqbamo", o = "_19cwz1ia txvbqb8x", s = "_19cwz1ib txvbqb9jf txvbqbco txvbqbao6 txvbqbhwx", c = "_19cwz1id _19cwz1ic txvbqb9jf txvbqbco txvbqbdnx txvbqbtx6 txvbqbc6o txvbqb1rf txvbqb1px txvbqb12f txvbqbuzj txvbqbv", l = "_19cwz1if _19cwz1ie txvbqbhwx txvbqb1t6", u = "_19cwz1ih";
+//#endregion
+export { s as actions, c as closeButton, i as header, r as kindRecipe, o as message, u as progressBar, l as progressTrack, a as title, n as toast, t as viewport };
+
+//# sourceMappingURL=toast.css.js.map

package/lib/esm/atomic/molecules/toast/toast.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"toast.css.js","names":[],"sources":["../../../../../src/atomic/molecules/toast/toast.css.ts"],"sourcesContent":["import { keyframes, style } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nexport const viewport = sprinkles({\n  position: 'fixed',\n  right: 4,\n  bottom: 4,\n  zIndex: 'modal',\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n});\n\nconst slideIn = keyframes({\n  from: { transform: 'translateY(10px)', opacity: 0 },\n  to: { transform: 'translateY(0)', opacity: 1 },\n});\n\nexport const toast = style([\n  sprinkles({\n    backgroundColor: 'white',\n    borderColor: 'border',\n    borderStyle: 'solid',\n    borderWidth: 'default',\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 1,\n    paddingX: 4,\n    paddingY: 3,\n    borderRadius: 'lg',\n    boxShadow: 'lg',\n  }),\n  {\n    width: 'min(28rem, calc(100vw - 2rem))',\n    animation: `${slideIn} 140ms ease-out`,\n  },\n]);\n\nexport const kindRecipe = recipe({\n  variants: {\n    kind: {\n      info: { borderColor: vars.colors['blue-200'] },\n      warning: { borderColor: vars.colors['amber-200'] },\n      error: { borderColor: vars.colors['red-200'] },\n    },\n  },\n  defaultVariants: {\n    kind: 'info',\n  },\n});\n\nexport type KindVariants = RecipeVariants<typeof kindRecipe>;\n\nexport const header = sprinkles({\n  display: 'flex',\n  alignItems: 'flex-start',\n  justifyContent: 'space-between',\n  gap: 2,\n});\n\nexport const title = sprinkles({\n  fontWeight: 'semibold',\n});\n\nexport const message = sprinkles({\n  fontSize: 'sm',\n});\n\nexport const actions = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: 2,\n  marginTop: 1,\n});\n\nexport const closeButton = style([\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 8,\n    height: 8,\n    borderRadius: 'md',\n    borderStyle: 'none',\n    borderWidth: 0,\n    backgroundColor: 'transparent',\n    cursor: 'pointer',\n  }),\n]);\n\nexport const progressTrack = style([\n  sprinkles({\n    marginTop: 1,\n    borderRadius: 'full',\n  }),\n  {\n    height: 4,\n    backgroundColor: vars.colors['blue-50'],\n    overflow: 'hidden',\n  },\n]);\n\nconst progressFill = keyframes({\n  from: { width: '0%' },\n  to: { width: '100%' },\n});\n\nexport const progressBar = style([\n  {\n    height: '100%',\n    width: '0%',\n    backgroundColor: vars.colors['blue-400'],\n    animationName: progressFill,\n    animationTimingFunction: 'linear',\n    animationFillMode: 'forwards',\n  },\n]);\n"],"mappings":""}