@luxfi/ui 7.4.10 → 7.4.11

package/dist/toaster.cjs

@@ -1,98 +1,116 @@
 "use client";
 'use strict';
 
-var sonner = require('sonner');
+var gui = require('@hanzo/gui');
+var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
 var SECOND = 1e3;
 var DURATION = 10 * SECOND;
-function mapOptions(opts) {
-  const external = {
-    id: opts.id,
-    description: opts.description,
-    duration: opts.duration
+var entries = [];
+var listeners = /* @__PURE__ */ new Set();
+var counter = 0;
+var emit = () => listeners.forEach((l) => l());
+var subscribe = (l) => {
+  listeners.add(l);
+  return () => {
+    listeners.delete(l);
   };
-  if (opts.action) {
-    external.action = {
-      label: opts.action.label,
-      onClick: opts.action.onClick
-    };
-  }
-  if (opts.onStatusChange) {
-    const cb = opts.onStatusChange;
-    external.onDismiss = () => cb({ status: "unmounted" });
-    external.onAutoClose = () => cb({ status: "unmounted" });
-  }
-  return external;
-}
-function create(opts) {
-  const external = mapOptions(opts);
-  const title = opts.title ?? "";
-  switch (opts.type) {
-    case "success":
-      return sonner.toast.success(title, external);
-    case "error":
-      return sonner.toast.error(title, external);
-    case "warning":
-      return sonner.toast.warning(title, external);
-    case "loading":
-      return sonner.toast.loading(title, external);
-    case "info":
-    default:
-      return sonner.toast.info(title, external);
-  }
-}
-function update(id, opts) {
-  const title = opts.title ?? "";
-  const external = mapOptions({ ...opts, id });
-  switch (opts.type) {
-    case "success":
-      sonner.toast.success(title, external);
-      break;
-    case "error":
-      sonner.toast.error(title, external);
-      break;
-    case "warning":
-      sonner.toast.warning(title, external);
-      break;
-    case "loading":
-      sonner.toast.loading(title, external);
-      break;
-    case "info":
-    default:
-      sonner.toast.info(title, external);
-      break;
-  }
-}
+};
+var snapshot = () => entries;
+var remove = (id) => {
+  const found = entries.find((e) => e.id === id);
+  entries = entries.filter((e) => e.id !== id);
+  emit();
+  found?.onStatusChange?.({ status: "unmounted" });
+};
+var create = (opts) => {
+  const id = opts.id ?? `toast-${++counter}`;
+  const entry = { ...opts, id };
+  entries = [...entries.filter((e) => e.id !== id), entry];
+  emit();
+  return id;
+};
+var update = (id, opts) => {
+  entries = entries.map((e) => e.id === id ? { ...e, ...opts, id } : e);
+  emit();
+};
 var toaster = {
   create,
   success: (opts) => create({ ...opts, type: "success" }),
   error: (opts) => create({ ...opts, type: "error" }),
   loading: (opts) => create({ ...opts, type: "loading" }),
   update,
-  remove: (id) => sonner.toast.dismiss(id)
+  remove
 };
-var Toaster = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    sonner.Toaster,
-    {
-      position: "top-right",
-      richColors: true,
-      closeButton: true,
-      duration: DURATION,
-      offset: { top: 12, right: 12, bottom: 12, left: 12 },
-      mobileOffset: { top: 16, right: 16, bottom: 16, left: 16 },
-      toastOptions: {
-        className: "font-sans",
-        style: {
-          fontFamily: 'var(--font-sans, "Geist", sans-serif)',
-          color: "var(--color-text-primary)",
-          backgroundColor: "var(--color-bg-primary)",
-          borderColor: "var(--color-border-divider)"
+var EDGE = {
+  success: "var(--color-status-good)",
+  error: "var(--color-status-bad)",
+  warning: "var(--color-status-warn)",
+  loading: "var(--color-border-divider)",
+  info: "var(--color-border-divider)"
+};
+var One = ({ entry }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  gui.Toast,
+  {
+    duration: entry.duration ?? DURATION,
+    onOpenChange: (open) => {
+      if (!open) remove(entry.id);
+    },
+    unstyled: true,
+    flexDirection: "column",
+    gap: 4,
+    padding: 12,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: EDGE[entry.type ?? "info"],
+    backgroundColor: "var(--color-popover-bg)",
+    transition: "quick",
+    enterStyle: { opacity: 0, y: -8 },
+    exitStyle: { opacity: 0, y: -8 },
+    children: [
+      entry.title ? /* @__PURE__ */ jsxRuntime.jsx(gui.Toast.Title, { unstyled: true, fontSize: 14, fontWeight: "600", color: "var(--color-text-primary)", children: entry.title }) : null,
+      entry.description ? /* @__PURE__ */ jsxRuntime.jsx(gui.Toast.Description, { unstyled: true, fontSize: 13, color: "var(--color-text-secondary)", children: entry.description }) : null,
+      entry.action ? /* @__PURE__ */ jsxRuntime.jsx(gui.XStack, { marginTop: 4, children: /* @__PURE__ */ jsxRuntime.jsx(gui.Toast.Action, { altText: entry.action.label, onPress: entry.action.onClick, children: /* @__PURE__ */ jsxRuntime.jsx(
+        gui.Text,
+        {
+          cursor: "pointer",
+          fontSize: 13,
+          fontWeight: "500",
+          color: "var(--color-link-primary)",
+          children: entry.action.label
         }
-      }
-    }
-  );
+      ) }) }) : null
+    ]
+  },
+  entry.id
+);
+var Toaster = () => {
+  const list = React__namespace.useSyncExternalStore(subscribe, snapshot, snapshot);
+  return /* @__PURE__ */ jsxRuntime.jsxs(gui.ToastProvider, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(gui.YStack, { children: list.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(One, { entry }, entry.id)) }),
+    /* @__PURE__ */ jsxRuntime.jsx(gui.ToastViewport, { position: "absolute", top: 12, right: 12 })
+  ] });
 };
 
 exports.Toaster = Toaster;

package/dist/toaster.d.cts

@@ -1,10 +1,11 @@
-import React__default from 'react';
+import * as React from 'react';
 
+type ToastType = 'info' | 'warning' | 'success' | 'error' | 'loading';
 interface ToastOptions {
     readonly id?: string | number;
     readonly title?: string;
     readonly description?: string;
-    readonly type?: 'info' | 'warning' | 'success' | 'error' | 'loading';
+    readonly type?: ToastType;
     readonly duration?: number;
     readonly action?: {
         readonly label: string;
@@ -14,16 +15,14 @@ interface ToastOptions {
         readonly status: string;
     }) => void;
 }
-declare function create(opts: ToastOptions): string | number;
-declare function update(id: string | number, opts: ToastOptions): void;
 declare const toaster: {
-    readonly create: typeof create;
+    readonly create: (opts: ToastOptions) => string | number;
     readonly success: (opts: ToastOptions) => string | number;
     readonly error: (opts: ToastOptions) => string | number;
     readonly loading: (opts: ToastOptions) => string | number;
-    readonly update: typeof update;
-    readonly remove: (id: string | number) => string | number;
+    readonly update: (id: string | number, opts: ToastOptions) => void;
+    readonly remove: (id: string | number) => void;
 };
-declare const Toaster: React__default.FC;
+declare const Toaster: React.FC;
 
 export { Toaster, toaster };

package/dist/toaster.d.ts

@@ -1,10 +1,11 @@
-import React__default from 'react';
+import * as React from 'react';
 
+type ToastType = 'info' | 'warning' | 'success' | 'error' | 'loading';
 interface ToastOptions {
     readonly id?: string | number;
     readonly title?: string;
     readonly description?: string;
-    readonly type?: 'info' | 'warning' | 'success' | 'error' | 'loading';
+    readonly type?: ToastType;
     readonly duration?: number;
     readonly action?: {
         readonly label: string;
@@ -14,16 +15,14 @@ interface ToastOptions {
         readonly status: string;
     }) => void;
 }
-declare function create(opts: ToastOptions): string | number;
-declare function update(id: string | number, opts: ToastOptions): void;
 declare const toaster: {
-    readonly create: typeof create;
+    readonly create: (opts: ToastOptions) => string | number;
     readonly success: (opts: ToastOptions) => string | number;
     readonly error: (opts: ToastOptions) => string | number;
     readonly loading: (opts: ToastOptions) => string | number;
-    readonly update: typeof update;
-    readonly remove: (id: string | number) => string | number;
+    readonly update: (id: string | number, opts: ToastOptions) => void;
+    readonly remove: (id: string | number) => void;
 };
-declare const Toaster: React__default.FC;
+declare const Toaster: React.FC;
 
 export { Toaster, toaster };

package/dist/toaster.js

@@ -1,96 +1,94 @@
 "use client";
-import { toast, Toaster as Toaster$1 } from 'sonner';
-import { jsx } from 'react/jsx-runtime';
+import { ToastProvider, YStack, ToastViewport, Toast, XStack, Text } from '@hanzo/gui';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 var SECOND = 1e3;
 var DURATION = 10 * SECOND;
-function mapOptions(opts) {
-  const external = {
-    id: opts.id,
-    description: opts.description,
-    duration: opts.duration
+var entries = [];
+var listeners = /* @__PURE__ */ new Set();
+var counter = 0;
+var emit = () => listeners.forEach((l) => l());
+var subscribe = (l) => {
+  listeners.add(l);
+  return () => {
+    listeners.delete(l);
   };
-  if (opts.action) {
-    external.action = {
-      label: opts.action.label,
-      onClick: opts.action.onClick
-    };
-  }
-  if (opts.onStatusChange) {
-    const cb = opts.onStatusChange;
-    external.onDismiss = () => cb({ status: "unmounted" });
-    external.onAutoClose = () => cb({ status: "unmounted" });
-  }
-  return external;
-}
-function create(opts) {
-  const external = mapOptions(opts);
-  const title = opts.title ?? "";
-  switch (opts.type) {
-    case "success":
-      return toast.success(title, external);
-    case "error":
-      return toast.error(title, external);
-    case "warning":
-      return toast.warning(title, external);
-    case "loading":
-      return toast.loading(title, external);
-    case "info":
-    default:
-      return toast.info(title, external);
-  }
-}
-function update(id, opts) {
-  const title = opts.title ?? "";
-  const external = mapOptions({ ...opts, id });
-  switch (opts.type) {
-    case "success":
-      toast.success(title, external);
-      break;
-    case "error":
-      toast.error(title, external);
-      break;
-    case "warning":
-      toast.warning(title, external);
-      break;
-    case "loading":
-      toast.loading(title, external);
-      break;
-    case "info":
-    default:
-      toast.info(title, external);
-      break;
-  }
-}
+};
+var snapshot = () => entries;
+var remove = (id) => {
+  const found = entries.find((e) => e.id === id);
+  entries = entries.filter((e) => e.id !== id);
+  emit();
+  found?.onStatusChange?.({ status: "unmounted" });
+};
+var create = (opts) => {
+  const id = opts.id ?? `toast-${++counter}`;
+  const entry = { ...opts, id };
+  entries = [...entries.filter((e) => e.id !== id), entry];
+  emit();
+  return id;
+};
+var update = (id, opts) => {
+  entries = entries.map((e) => e.id === id ? { ...e, ...opts, id } : e);
+  emit();
+};
 var toaster = {
   create,
   success: (opts) => create({ ...opts, type: "success" }),
   error: (opts) => create({ ...opts, type: "error" }),
   loading: (opts) => create({ ...opts, type: "loading" }),
   update,
-  remove: (id) => toast.dismiss(id)
+  remove
 };
-var Toaster = () => {
-  return /* @__PURE__ */ jsx(
-    Toaster$1,
-    {
-      position: "top-right",
-      richColors: true,
-      closeButton: true,
-      duration: DURATION,
-      offset: { top: 12, right: 12, bottom: 12, left: 12 },
-      mobileOffset: { top: 16, right: 16, bottom: 16, left: 16 },
-      toastOptions: {
-        className: "font-sans",
-        style: {
-          fontFamily: 'var(--font-sans, "Geist", sans-serif)',
-          color: "var(--color-text-primary)",
-          backgroundColor: "var(--color-bg-primary)",
-          borderColor: "var(--color-border-divider)"
+var EDGE = {
+  success: "var(--color-status-good)",
+  error: "var(--color-status-bad)",
+  warning: "var(--color-status-warn)",
+  loading: "var(--color-border-divider)",
+  info: "var(--color-border-divider)"
+};
+var One = ({ entry }) => /* @__PURE__ */ jsxs(
+  Toast,
+  {
+    duration: entry.duration ?? DURATION,
+    onOpenChange: (open) => {
+      if (!open) remove(entry.id);
+    },
+    unstyled: true,
+    flexDirection: "column",
+    gap: 4,
+    padding: 12,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: EDGE[entry.type ?? "info"],
+    backgroundColor: "var(--color-popover-bg)",
+    transition: "quick",
+    enterStyle: { opacity: 0, y: -8 },
+    exitStyle: { opacity: 0, y: -8 },
+    children: [
+      entry.title ? /* @__PURE__ */ jsx(Toast.Title, { unstyled: true, fontSize: 14, fontWeight: "600", color: "var(--color-text-primary)", children: entry.title }) : null,
+      entry.description ? /* @__PURE__ */ jsx(Toast.Description, { unstyled: true, fontSize: 13, color: "var(--color-text-secondary)", children: entry.description }) : null,
+      entry.action ? /* @__PURE__ */ jsx(XStack, { marginTop: 4, children: /* @__PURE__ */ jsx(Toast.Action, { altText: entry.action.label, onPress: entry.action.onClick, children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          cursor: "pointer",
+          fontSize: 13,
+          fontWeight: "500",
+          color: "var(--color-link-primary)",
+          children: entry.action.label
         }
-      }
-    }
-  );
+      ) }) }) : null
+    ]
+  },
+  entry.id
+);
+var Toaster = () => {
+  const list = React.useSyncExternalStore(subscribe, snapshot, snapshot);
+  return /* @__PURE__ */ jsxs(ToastProvider, { children: [
+    /* @__PURE__ */ jsx(YStack, { children: list.map((entry) => /* @__PURE__ */ jsx(One, { entry }, entry.id)) }),
+    /* @__PURE__ */ jsx(ToastViewport, { position: "absolute", top: 12, right: 12 })
+  ] });
 };
 
 export { Toaster, toaster };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@luxfi/ui",
-  "version": "7.4.10",
-  "description": "Cross-platform DeFi UI components built on @hanzo/gui (Tamagui). Native mobile + web.",
+  "version": "7.4.11",
+  "description": "Cross-platform UI components on @hanzo/gui. Native mobile + web.",
   "type": "module",
   "license": "MIT",
   "author": {
@@ -305,24 +305,10 @@
     "test": "playwright test"
   },
   "dependencies": {
-    "@radix-ui/react-accordion": "^1.2.12",
-    "@radix-ui/react-avatar": "^1.1.10",
-    "@radix-ui/react-checkbox": "^1.3.3",
-    "@radix-ui/react-collapsible": "^1.1.12",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-label": "^2.1.7",
-    "@radix-ui/react-progress": "^1.1.7",
-    "@radix-ui/react-radio-group": "^1.3.8",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-slider": "^1.3.6",
-    "@radix-ui/react-switch": "^1.2.6",
-    "@radix-ui/react-tabs": "^1.1.13",
     "@uidotdev/usehooks": "^2.4.1",
     "clsx": "^2.1.1",
     "es-toolkit": "^1.31.0",
     "lucide-react": "^1.27.0",
-    "sonner": "^2.0.0",
     "tailwind-merge": "^3.0.0"
   },
   "peerDependencies": {