@lattice-php/lattice 0.2.0 → 0.4.0

package/dist/toast/toast.js

@@ -0,0 +1,54 @@
+import { LATTICE_EVENT } from "../events/event-names.js";
+import { isTranslatable } from "../i18n/translatable.js";
+//#region resources/js/toast/toast.ts
+var variants = [
+	"success",
+	"info",
+	"warning",
+	"error"
+];
+function isVariant(value) {
+	return variants.some((variant) => variant === value);
+}
+/**
+* Coerce a raw toast value (server flash payload or event detail) into a
+* ToastMessage, defaulting optional fields, or null when it is malformed.
+*/
+function normalizeToastMessage(value) {
+	if (typeof value !== "object" || value === null) return null;
+	const toast = value;
+	const rawMessage = toast.message;
+	const message = typeof rawMessage === "string" ? rawMessage : isTranslatable(rawMessage) ? rawMessage : null;
+	if (message === null || message === "") return null;
+	return {
+		action: toast.action ?? null,
+		dismissible: toast.dismissible !== false,
+		duration: typeof toast.duration === "number" ? toast.duration : null,
+		message,
+		persistent: toast.persistent === true,
+		variant: isVariant(toast.variant) ? toast.variant : "success"
+	};
+}
+/** Coerce a `lattice:toast` event detail (`{ toast: {...} }`) into a ToastMessage. */
+function normalizeToast(detail) {
+	if (typeof detail !== "object" || detail === null) return null;
+	return normalizeToastMessage(detail.toast);
+}
+/** Emit a toast onto the shared `lattice:toast` bus. */
+function showToast(toast) {
+	if (typeof window === "undefined") return;
+	window.dispatchEvent(new CustomEvent(LATTICE_EVENT.toast, { detail: { toast } }));
+}
+/** Subscribe to the shared toast bus. Returns an unsubscribe function. */
+function onToast(callback) {
+	const listener = (event) => {
+		const toast = normalizeToast(event.detail);
+		if (toast) callback(toast);
+	};
+	window.addEventListener(LATTICE_EVENT.toast, listener);
+	return () => window.removeEventListener(LATTICE_EVENT.toast, listener);
+}
+//#endregion
+export { isVariant, normalizeToast, normalizeToastMessage, onToast, showToast };
+
+//# sourceMappingURL=toast.js.map

package/dist/toast/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","names":[],"sources":["../../resources/js/toast/toast.ts"],"sourcesContent":["import type { ToastMessage, Variant } from \"@lattice-php/lattice/types/generated\";\nimport { LATTICE_EVENT } from \"@lattice-php/lattice/events/event-names\";\nimport { isTranslatable } from \"@lattice-php/lattice/i18n/translatable\";\n\nexport type { ToastMessage, Variant };\n\nconst variants = [\"success\", \"info\", \"warning\", \"error\"] as const satisfies readonly Variant[];\n\nexport function isVariant(value: unknown): value is Variant {\n  return variants.some((variant) => variant === value);\n}\n\n/**\n * Coerce a raw toast value (server flash payload or event detail) into a\n * ToastMessage, defaulting optional fields, or null when it is malformed.\n */\nexport function normalizeToastMessage(value: unknown): ToastMessage | null {\n  if (typeof value !== \"object\" || value === null) {\n    return null;\n  }\n\n  const toast = value as Record<string, unknown>;\n\n  const rawMessage = toast.message;\n  const message =\n    typeof rawMessage === \"string\" ? rawMessage : isTranslatable(rawMessage) ? rawMessage : null;\n\n  if (message === null || message === \"\") {\n    return null;\n  }\n\n  return {\n    action: (toast.action as ToastMessage[\"action\"]) ?? null,\n    dismissible: toast.dismissible !== false,\n    duration: typeof toast.duration === \"number\" ? toast.duration : null,\n    message,\n    persistent: toast.persistent === true,\n    variant: isVariant(toast.variant) ? toast.variant : \"success\",\n  };\n}\n\n/** Coerce a `lattice:toast` event detail (`{ toast: {...} }`) into a ToastMessage. */\nexport function normalizeToast(detail: unknown): ToastMessage | null {\n  if (typeof detail !== \"object\" || detail === null) {\n    return null;\n  }\n\n  return normalizeToastMessage((detail as { toast?: unknown }).toast);\n}\n\n/** Emit a toast onto the shared `lattice:toast` bus. */\nexport function showToast(toast: ToastMessage): void {\n  if (typeof window === \"undefined\") {\n    return;\n  }\n\n  window.dispatchEvent(new CustomEvent(LATTICE_EVENT.toast, { detail: { toast } }));\n}\n\n/** Subscribe to the shared toast bus. Returns an unsubscribe function. */\nexport function onToast(callback: (toast: ToastMessage) => void): () => void {\n  const listener = (event: Event): void => {\n    const toast = normalizeToast((event as CustomEvent).detail);\n\n    if (toast) {\n      callback(toast);\n    }\n  };\n\n  window.addEventListener(LATTICE_EVENT.toast, listener);\n\n  return () => window.removeEventListener(LATTICE_EVENT.toast, listener);\n}\n"],"mappings":";;;AAMA,IAAM,WAAW;CAAC;CAAW;CAAQ;CAAW;AAAO;AAEvD,SAAgB,UAAU,OAAkC;CAC1D,OAAO,SAAS,MAAM,YAAY,YAAY,KAAK;AACrD;;;;;AAMA,SAAgB,sBAAsB,OAAqC;CACzE,IAAI,OAAO,UAAU,YAAY,UAAU,MACzC,OAAO;CAGT,MAAM,QAAQ;CAEd,MAAM,aAAa,MAAM;CACzB,MAAM,UACJ,OAAO,eAAe,WAAW,aAAa,eAAe,UAAU,IAAI,aAAa;CAE1F,IAAI,YAAY,QAAQ,YAAY,IAClC,OAAO;CAGT,OAAO;EACL,QAAS,MAAM,UAAqC;EACpD,aAAa,MAAM,gBAAgB;EACnC,UAAU,OAAO,MAAM,aAAa,WAAW,MAAM,WAAW;EAChE;EACA,YAAY,MAAM,eAAe;EACjC,SAAS,UAAU,MAAM,OAAO,IAAI,MAAM,UAAU;CACtD;AACF;;AAGA,SAAgB,eAAe,QAAsC;CACnE,IAAI,OAAO,WAAW,YAAY,WAAW,MAC3C,OAAO;CAGT,OAAO,sBAAuB,OAA+B,KAAK;AACpE;;AAGA,SAAgB,UAAU,OAA2B;CACnD,IAAI,OAAO,WAAW,aACpB;CAGF,OAAO,cAAc,IAAI,YAAY,cAAc,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC;AAClF;;AAGA,SAAgB,QAAQ,UAAqD;CAC3E,MAAM,YAAY,UAAuB;EACvC,MAAM,QAAQ,eAAgB,MAAsB,MAAM;EAE1D,IAAI,OACF,SAAS,KAAK;CAElB;CAEA,OAAO,iBAAiB,cAAc,OAAO,QAAQ;CAErD,aAAa,OAAO,oBAAoB,cAAc,OAAO,QAAQ;AACvE"}

package/dist/toast/toaster.js

@@ -1,92 +1,32 @@
 import { cn } from "../lib/utils.js";
 import { Icon } from "../icons/sprite.js";
 import { useT } from "../i18n/instance.js";
-import { LATTICE_EVENT } from "../events/event-names.js";
-import { Renderer } from "../core/renderer.js";
-import { useRegistry } from "../provider.js";
+import { resolveTranslatable } from "../i18n/translatable.js";
+import { onToast } from "./toast.js";
+import { RenderNode } from "../core/renderer.js";
+import { variantStyles } from "./variant-styles.js";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as Toast from "@radix-ui/react-toast";
 //#region resources/js/toast/toaster.tsx
-var variants = [
-	"success",
-	"info",
-	"warning",
-	"error"
-];
-var variantStyles = {
-	success: {
-		accent: "border-l-lt-success",
-		icon: /* @__PURE__ */ jsx(Icon, {
-			name: "circle-check",
-			className: "size-lt-icon-lg shrink-0 text-lt-success"
-		})
-	},
-	info: {
-		accent: "border-l-lt-info",
-		icon: /* @__PURE__ */ jsx(Icon, {
-			name: "info",
-			className: "size-lt-icon-lg shrink-0 text-lt-info"
-		})
-	},
-	warning: {
-		accent: "border-l-lt-warning",
-		icon: /* @__PURE__ */ jsx(Icon, {
-			name: "circle-alert",
-			className: "size-lt-icon-lg shrink-0 text-lt-warning"
-		})
-	},
-	error: {
-		accent: "border-l-lt-danger",
-		icon: /* @__PURE__ */ jsx(Icon, {
-			name: "circle-x",
-			className: "size-lt-icon-lg shrink-0 text-lt-danger"
-		})
-	}
-};
-function isVariant(value) {
-	return variants.some((variant) => variant === value);
-}
 var nextId = 0;
-function normalize(detail) {
-	if (typeof detail !== "object" || detail === null) return null;
-	const data = detail.toast;
-	if (typeof data !== "object" || data === null) return null;
-	const toast = data;
-	if (typeof toast.message !== "string" || toast.message === "") return null;
-	return {
-		action: toast.action ?? null,
-		dismissible: toast.dismissible !== false,
-		duration: typeof toast.duration === "number" ? toast.duration : null,
-		message: toast.message,
-		persistent: toast.persistent === true,
-		variant: isVariant(toast.variant) ? toast.variant : "success"
-	};
-}
 function Toaster({ duration = 4e3 }) {
 	const { t } = useT("lattice");
-	const registry = useRegistry();
 	const [toasts, setToasts] = useState([]);
-	function push(detail) {
-		const item = normalize(detail);
-		if (item) setToasts((current) => [...current, {
-			...item,
-			id: nextId++
-		}]);
-	}
 	function dismiss(id) {
 		setToasts((current) => current.filter((toast) => toast.id !== id));
 	}
-	useEffect(() => {
-		const listener = (event) => push(event.detail);
-		window.addEventListener(LATTICE_EVENT.toast, listener);
-		return () => window.removeEventListener(LATTICE_EVENT.toast, listener);
-	}, []);
+	useEffect(() => onToast((toast) => {
+		setToasts((current) => [...current, {
+			...toast,
+			id: nextId++
+		}]);
+	}), []);
 	return /* @__PURE__ */ jsxs(Toast.Provider, {
 		duration,
 		swipeDirection: "down",
 		children: [toasts.map((toast) => /* @__PURE__ */ jsxs(Toast.Root, {
-			className: cn("flex items-start gap-3 rounded-lt border border-l-4 border-lt-border bg-lt-popover p-4 text-lt-popover-fg shadow-lg", variantStyles[toast.variant].accent, "data-[state=open]:animate-lt-toast-in data-[state=closed]:animate-lt-toast-out", "data-[swipe=move]:translate-y-[var(--radix-toast-swipe-move-y)] data-[swipe=cancel]:translate-y-0 data-[swipe=cancel]:transition-transform"),
+			className: cn("flex items-start gap-3 rounded-lt border border-l-4 border-lt-border bg-lt-popover p-4 text-lt-popover-fg shadow-lt-lg", variantStyles[toast.variant].accent, "data-[state=open]:animate-lt-toast-in data-[state=closed]:animate-lt-toast-out", "data-[swipe=move]:translate-y-[var(--radix-toast-swipe-move-y)] data-[swipe=cancel]:translate-y-0 data-[swipe=cancel]:transition-transform"),
 			"data-test": `toast-${toast.variant}`,
 			duration: toast.persistent ? Infinity : toast.duration ?? duration,
 			onOpenChange: (open) => {
@@ -98,18 +38,15 @@ function Toaster({ duration = 4e3 }) {
 					className: "flex min-w-0 flex-1 flex-col gap-2",
 					children: [/* @__PURE__ */ jsx(Toast.Title, {
 						className: "text-sm text-lt-fg",
-						children: toast.message
+						children: typeof toast.message === "string" ? toast.message : resolveTranslatable(toast.message, {}, t)
 					}), toast.action ? /* @__PURE__ */ jsx("div", {
 						className: "flex flex-wrap gap-2",
-						children: /* @__PURE__ */ jsx(Renderer, {
-							nodes: [toast.action],
-							registry
-						})
+						children: /* @__PURE__ */ jsx(RenderNode, { node: toast.action })
 					}) : null]
 				}),
 				toast.dismissible ? /* @__PURE__ */ jsx(Toast.Close, {
 					"aria-label": t("a11y.dismiss", "Dismiss"),
-					className: "shrink-0 rounded-md p-1 text-lt-muted-fg transition-colors hover:bg-lt-muted hover:text-lt-fg",
+					className: "shrink-0 rounded-lt-sm p-1 text-lt-muted-fg transition-colors hover:bg-lt-muted hover:text-lt-fg",
 					"data-test": "toast-dismiss",
 					children: /* @__PURE__ */ jsx(Icon, {
 						name: "x",

package/dist/toast/toaster.js.map

@@ -1 +1 @@
-{"version":3,"file":"toaster.js","names":[],"sources":["../../resources/js/toast/toaster.tsx"],"sourcesContent":["import { Icon } from \"@lattice/lattice/icons\";\nimport * as Toast from \"@radix-ui/react-toast\";\nimport { useEffect, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Renderer } from \"@lattice/lattice/core/renderer\";\nimport type { ToastMessage, ToastVariant } from \"@lattice/lattice/types/generated\";\nimport { LATTICE_EVENT } from \"@lattice/lattice/events/event-names\";\nimport { cn } from \"@lattice/lattice/lib/utils\";\nimport { useT } from \"@lattice/lattice/i18n\";\nimport { useRegistry } from \"@lattice/lattice/provider\";\n\nconst variants = [\"success\", \"info\", \"warning\", \"error\"] as const satisfies readonly ToastVariant[];\n\ntype ToastItem = ToastMessage & { id: number };\n\nconst variantStyles: Record<ToastVariant, { accent: string; icon: ReactNode }> = {\n  success: {\n    accent: \"border-l-lt-success\",\n    icon: <Icon name=\"circle-check\" className=\"size-lt-icon-lg shrink-0 text-lt-success\" />,\n  },\n  info: {\n    accent: \"border-l-lt-info\",\n    icon: <Icon name=\"info\" className=\"size-lt-icon-lg shrink-0 text-lt-info\" />,\n  },\n  warning: {\n    accent: \"border-l-lt-warning\",\n    icon: <Icon name=\"circle-alert\" className=\"size-lt-icon-lg shrink-0 text-lt-warning\" />,\n  },\n  error: {\n    accent: \"border-l-lt-danger\",\n    icon: <Icon name=\"circle-x\" className=\"size-lt-icon-lg shrink-0 text-lt-danger\" />,\n  },\n};\n\nfunction isVariant(value: unknown): value is ToastVariant {\n  return variants.some((variant) => variant === value);\n}\n\nlet nextId = 0;\n\nfunction normalize(detail: unknown): ToastMessage | null {\n  if (typeof detail !== \"object\" || detail === null) {\n    return null;\n  }\n\n  const data = (detail as { toast?: unknown }).toast;\n\n  if (typeof data !== \"object\" || data === null) {\n    return null;\n  }\n\n  const toast = data as Record<string, unknown>;\n\n  if (typeof toast.message !== \"string\" || toast.message === \"\") {\n    return null;\n  }\n\n  return {\n    action: (toast.action as ToastMessage[\"action\"]) ?? null,\n    dismissible: toast.dismissible !== false,\n    duration: typeof toast.duration === \"number\" ? toast.duration : null,\n    message: toast.message,\n    persistent: toast.persistent === true,\n    variant: isVariant(toast.variant) ? toast.variant : \"success\",\n  };\n}\n\nexport function Toaster({ duration = 4000 }: { duration?: number }) {\n  const { t } = useT(\"lattice\");\n  const registry = useRegistry();\n  const [toasts, setToasts] = useState<ToastItem[]>([]);\n\n  function push(detail: unknown): void {\n    const item = normalize(detail);\n\n    if (item) {\n      setToasts((current) => [...current, { ...item, id: nextId++ }]);\n    }\n  }\n\n  function dismiss(id: number): void {\n    setToasts((current) => current.filter((toast) => toast.id !== id));\n  }\n\n  useEffect(() => {\n    const listener = (event: Event): void => push((event as CustomEvent).detail);\n\n    window.addEventListener(LATTICE_EVENT.toast, listener);\n\n    return () => window.removeEventListener(LATTICE_EVENT.toast, listener);\n  }, []);\n\n  return (\n    <Toast.Provider duration={duration} swipeDirection=\"down\">\n      {toasts.map((toast) => (\n        <Toast.Root\n          key={toast.id}\n          className={cn(\n            \"flex items-start gap-3 rounded-lt border border-l-4 border-lt-border bg-lt-popover p-4 text-lt-popover-fg shadow-lg\",\n            variantStyles[toast.variant].accent,\n            \"data-[state=open]:animate-lt-toast-in data-[state=closed]:animate-lt-toast-out\",\n            \"data-[swipe=move]:translate-y-[var(--radix-toast-swipe-move-y)] data-[swipe=cancel]:translate-y-0 data-[swipe=cancel]:transition-transform\",\n          )}\n          data-test={`toast-${toast.variant}`}\n          duration={toast.persistent ? Infinity : (toast.duration ?? duration)}\n          onOpenChange={(open) => {\n            if (!open) {\n              dismiss(toast.id);\n            }\n          }}\n        >\n          {variantStyles[toast.variant].icon}\n          <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n            <Toast.Title className=\"text-sm text-lt-fg\">{toast.message}</Toast.Title>\n            {toast.action ? (\n              <div className=\"flex flex-wrap gap-2\">\n                <Renderer nodes={[toast.action]} registry={registry} />\n              </div>\n            ) : null}\n          </div>\n          {toast.dismissible ? (\n            <Toast.Close\n              aria-label={t(\"a11y.dismiss\", \"Dismiss\")}\n              className=\"shrink-0 rounded-md p-1 text-lt-muted-fg transition-colors hover:bg-lt-muted hover:text-lt-fg\"\n              data-test=\"toast-dismiss\"\n            >\n              <Icon name=\"x\" className=\"size-lt-icon-md\" />\n            </Toast.Close>\n          ) : null}\n        </Toast.Root>\n      ))}\n      <Toast.Viewport className=\"fixed inset-x-0 bottom-0 z-[100] mx-auto flex w-full max-w-sm flex-col gap-2 p-4 outline-none\" />\n    </Toast.Provider>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"toaster.js","names":[],"sources":["../../resources/js/toast/toaster.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport * as Toast from \"@radix-ui/react-toast\";\nimport { useEffect, useState } from \"react\";\nimport { RenderNode } from \"@lattice-php/lattice/core/renderer\";\nimport type { ToastMessage } from \"@lattice-php/lattice/types/generated\";\nimport { onToast } from \"@lattice-php/lattice/toast/toast\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { variantStyles } from \"@lattice-php/lattice/toast/variant-styles\";\nimport { resolveTranslatable } from \"@lattice-php/lattice/i18n/translatable\";\n\ntype ToastItem = ToastMessage & { id: number };\n\nlet nextId = 0;\n\nexport function Toaster({ duration = 4000 }: { duration?: number }) {\n  const { t } = useT(\"lattice\");\n  const [toasts, setToasts] = useState<ToastItem[]>([]);\n\n  function dismiss(id: number): void {\n    setToasts((current) => current.filter((toast) => toast.id !== id));\n  }\n\n  useEffect(\n    () =>\n      onToast((toast) => {\n        setToasts((current) => [...current, { ...toast, id: nextId++ }]);\n      }),\n    [],\n  );\n\n  return (\n    <Toast.Provider duration={duration} swipeDirection=\"down\">\n      {toasts.map((toast) => (\n        <Toast.Root\n          key={toast.id}\n          className={cn(\n            \"flex items-start gap-3 rounded-lt border border-l-4 border-lt-border bg-lt-popover p-4 text-lt-popover-fg shadow-lt-lg\",\n            variantStyles[toast.variant].accent,\n            \"data-[state=open]:animate-lt-toast-in data-[state=closed]:animate-lt-toast-out\",\n            \"data-[swipe=move]:translate-y-[var(--radix-toast-swipe-move-y)] data-[swipe=cancel]:translate-y-0 data-[swipe=cancel]:transition-transform\",\n          )}\n          data-test={`toast-${toast.variant}`}\n          duration={toast.persistent ? Infinity : (toast.duration ?? duration)}\n          onOpenChange={(open) => {\n            if (!open) {\n              dismiss(toast.id);\n            }\n          }}\n        >\n          {variantStyles[toast.variant].icon}\n          <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n            <Toast.Title className=\"text-sm text-lt-fg\">\n              {typeof toast.message === \"string\"\n                ? toast.message\n                : resolveTranslatable(toast.message, {}, t)}\n            </Toast.Title>\n            {toast.action ? (\n              <div className=\"flex flex-wrap gap-2\">\n                <RenderNode node={toast.action} />\n              </div>\n            ) : null}\n          </div>\n          {toast.dismissible ? (\n            <Toast.Close\n              aria-label={t(\"a11y.dismiss\", \"Dismiss\")}\n              className=\"shrink-0 rounded-lt-sm p-1 text-lt-muted-fg transition-colors hover:bg-lt-muted hover:text-lt-fg\"\n              data-test=\"toast-dismiss\"\n            >\n              <Icon name=\"x\" className=\"size-lt-icon-md\" />\n            </Toast.Close>\n          ) : null}\n        </Toast.Root>\n      ))}\n      <Toast.Viewport className=\"fixed inset-x-0 bottom-0 z-[100] mx-auto flex w-full max-w-sm flex-col gap-2 p-4 outline-none\" />\n    </Toast.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAaA,IAAI,SAAS;AAEb,SAAgB,QAAQ,EAAE,WAAW,OAA+B;CAClE,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,CAAC,QAAQ,aAAa,SAAsB,CAAC,CAAC;CAEpD,SAAS,QAAQ,IAAkB;EACjC,WAAW,YAAY,QAAQ,QAAQ,UAAU,MAAM,OAAO,EAAE,CAAC;CACnE;CAEA,gBAEI,SAAS,UAAU;EACjB,WAAW,YAAY,CAAC,GAAG,SAAS;GAAE,GAAG;GAAO,IAAI;EAAS,CAAC,CAAC;CACjE,CAAC,GACH,CAAC,CACH;CAEA,OACE,qBAAC,MAAM,UAAP;EAA0B;EAAU,gBAAe;YAAnD,CACG,OAAO,KAAK,UACX,qBAAC,MAAM,MAAP;GAEE,WAAW,GACT,0HACA,cAAc,MAAM,SAAS,QAC7B,kFACA,4IACF;GACA,aAAW,SAAS,MAAM;GAC1B,UAAU,MAAM,aAAa,WAAY,MAAM,YAAY;GAC3D,eAAe,SAAS;IACtB,IAAI,CAAC,MACH,QAAQ,MAAM,EAAE;GAEpB;aAdF;IAgBG,cAAc,MAAM,SAAS;IAC9B,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,MAAM,OAAP;MAAa,WAAU;gBACpB,OAAO,MAAM,YAAY,WACtB,MAAM,UACN,oBAAoB,MAAM,SAAS,CAAC,GAAG,CAAC;KACjC,CAAA,GACZ,MAAM,SACL,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,YAAD,EAAY,MAAM,MAAM,OAAS,CAAA;KAC9B,CAAA,IACH,IACD;;IACJ,MAAM,cACL,oBAAC,MAAM,OAAP;KACE,cAAY,EAAE,gBAAgB,SAAS;KACvC,WAAU;KACV,aAAU;eAEV,oBAAC,MAAD;MAAM,MAAK;MAAI,WAAU;KAAmB,CAAA;IACjC,CAAA,IACX;GACM;KArCL,MAAM,EAqCD,CACb,GACD,oBAAC,MAAM,UAAP,EAAgB,WAAU,gGAAiG,CAAA,CAC7G;;AAEpB"}

package/dist/toast/variant-styles.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { Variant } from '../types/generated';
+export declare const variantStyles: Record<Variant, {
+    accent: string;
+    icon: ReactNode;
+}>;

package/dist/toast/variant-styles.js

@@ -0,0 +1,37 @@
+import { Icon } from "../icons/sprite.js";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/toast/variant-styles.tsx
+var variantStyles = {
+	success: {
+		accent: "border-l-lt-success",
+		icon: /* @__PURE__ */ jsx(Icon, {
+			name: "circle-check",
+			className: "size-lt-icon-lg shrink-0 text-lt-success"
+		})
+	},
+	info: {
+		accent: "border-l-lt-info",
+		icon: /* @__PURE__ */ jsx(Icon, {
+			name: "info",
+			className: "size-lt-icon-lg shrink-0 text-lt-info"
+		})
+	},
+	warning: {
+		accent: "border-l-lt-warning",
+		icon: /* @__PURE__ */ jsx(Icon, {
+			name: "circle-alert",
+			className: "size-lt-icon-lg shrink-0 text-lt-warning"
+		})
+	},
+	error: {
+		accent: "border-l-lt-danger",
+		icon: /* @__PURE__ */ jsx(Icon, {
+			name: "circle-x",
+			className: "size-lt-icon-lg shrink-0 text-lt-danger"
+		})
+	}
+};
+//#endregion
+export { variantStyles };
+
+//# sourceMappingURL=variant-styles.js.map

package/dist/toast/variant-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"variant-styles.js","names":[],"sources":["../../resources/js/toast/variant-styles.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport type { ReactNode } from \"react\";\nimport type { Variant } from \"@lattice-php/lattice/types/generated\";\n\nexport const variantStyles: Record<Variant, { accent: string; icon: ReactNode }> = {\n  success: {\n    accent: \"border-l-lt-success\",\n    icon: <Icon name=\"circle-check\" className=\"size-lt-icon-lg shrink-0 text-lt-success\" />,\n  },\n  info: {\n    accent: \"border-l-lt-info\",\n    icon: <Icon name=\"info\" className=\"size-lt-icon-lg shrink-0 text-lt-info\" />,\n  },\n  warning: {\n    accent: \"border-l-lt-warning\",\n    icon: <Icon name=\"circle-alert\" className=\"size-lt-icon-lg shrink-0 text-lt-warning\" />,\n  },\n  error: {\n    accent: \"border-l-lt-danger\",\n    icon: <Icon name=\"circle-x\" className=\"size-lt-icon-lg shrink-0 text-lt-danger\" />,\n  },\n};\n"],"mappings":";;;AAIA,IAAa,gBAAsE;CACjF,SAAS;EACP,QAAQ;EACR,MAAM,oBAAC,MAAD;GAAM,MAAK;GAAe,WAAU;EAA4C,CAAA;CACxF;CACA,MAAM;EACJ,QAAQ;EACR,MAAM,oBAAC,MAAD;GAAM,MAAK;GAAO,WAAU;EAAyC,CAAA;CAC7E;CACA,SAAS;EACP,QAAQ;EACR,MAAM,oBAAC,MAAD;GAAM,MAAK;GAAe,WAAU;EAA4C,CAAA;CACxF;CACA,OAAO;EACL,QAAQ;EACR,MAAM,oBAAC,MAAD;GAAM,MAAK;GAAW,WAAU;EAA2C,CAAA;CACnF;AACF"}