@luxfi/ui 7.4.10 → 7.4.12

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/dist/tooltip.cjs

@@ -4,8 +4,6 @@
 var gui = require('@hanzo/gui');
 var usehooks = require('@uidotdev/usehooks');
 var React2 = require('react');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
@@ -29,6 +27,14 @@ function _interopNamespace(e) {
 var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
 
 // src/tooltip.tsx
+var ink = (children, Wrap = gui.Text, props = {}) => {
+  let hasText = false;
+  React2.Children.forEach(children, (child) => {
+    if (typeof child === "string" || typeof child === "number") hasText = true;
+  });
+  if (!hasText) return children;
+  return React2.Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? React2.createElement(Wrap, props, child) : child);
+};
 var TOUCH_PX = 1024;
 function useBelow(px) {
   const [below, setBelow] = React2__namespace.useState(false);
@@ -42,9 +48,6 @@ function useBelow(px) {
   return below;
 }
 var useIsTouch = () => useBelow(TOUCH_PX);
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
 function mapPlacement(p) {
   if (!p) return void 0;
   return p;
@@ -136,14 +139,21 @@ var Tooltip = React2__namespace.forwardRef(
             {
               ref,
               unstyled: true,
-              className: cn(
-                "z-[9999] overflow-hidden rounded-lg px-3 py-2 text-sm",
-                "animate-in fade-in-0 zoom-in-95",
-                isPopover && "bg-[var(--color-popover-bg)] text-[var(--color-text-primary)]",
-                isPopover && "shadow-[var(--shadow-popover)] border border-[var(--color-border-divider)] max-w-sm",
-                !isPopover && "bg-[var(--color-tooltip-bg)] text-[var(--color-tooltip-fg)] max-w-xs",
-                contentProps?.className
-              ),
+              zIndex: 9999,
+              overflow: "hidden",
+              borderRadius: 8,
+              paddingHorizontal: 12,
+              paddingVertical: 8,
+              maxWidth: isPopover ? 384 : 320,
+              backgroundColor: isPopover ? "var(--color-popover-bg)" : "var(--color-tooltip-bg)",
+              transition: "quick",
+              enterStyle: { opacity: 0, scale: 0.95 },
+              exitStyle: { opacity: 0, scale: 0.95 },
+              ...isPopover ? {
+                borderWidth: 1,
+                borderColor: "var(--color-border-divider)",
+                shadowColor: "var(--shadow-popover)"
+              } : {},
               onClick: interactive ? handleContentClick : void 0,
               ...selected ? { "data-selected": true } : {},
               ...contentProps,
@@ -152,12 +162,13 @@ var Tooltip = React2__namespace.forwardRef(
                   gui.Tooltip.Arrow,
                   {
                     unstyled: true,
-                    className: cn(
-                      isPopover ? "fill-[var(--color-popover-bg)]" : "fill-[var(--color-tooltip-bg)]"
-                    )
+                    backgroundColor: isPopover ? "var(--color-popover-bg)" : "var(--color-tooltip-bg)"
                   }
                 ),
-                content
+                ink(content, void 0, {
+                  fontSize: 14,
+                  color: isPopover ? "var(--color-text-primary)" : "var(--color-tooltip-fg)"
+                })
               ]
             }
           )

package/dist/tooltip.js

@@ -1,12 +1,19 @@
 "use client";
-import { TooltipGroup, Tooltip as Tooltip$1 } from '@hanzo/gui';
+import { TooltipGroup, Tooltip as Tooltip$1, Text } from '@hanzo/gui';
 import { useClickAway } from '@uidotdev/usehooks';
 import * as React2 from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { Children, createElement } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/tooltip.tsx
+var ink = (children, Wrap = Text, props = {}) => {
+  let hasText = false;
+  Children.forEach(children, (child) => {
+    if (typeof child === "string" || typeof child === "number") hasText = true;
+  });
+  if (!hasText) return children;
+  return Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? createElement(Wrap, props, child) : child);
+};
 var TOUCH_PX = 1024;
 function useBelow(px) {
   const [below, setBelow] = React2.useState(false);
@@ -20,9 +27,6 @@ function useBelow(px) {
   return below;
 }
 var useIsTouch = () => useBelow(TOUCH_PX);
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
 function mapPlacement(p) {
   if (!p) return void 0;
   return p;
@@ -114,14 +118,21 @@ var Tooltip = React2.forwardRef(
             {
               ref,
               unstyled: true,
-              className: cn(
-                "z-[9999] overflow-hidden rounded-lg px-3 py-2 text-sm",
-                "animate-in fade-in-0 zoom-in-95",
-                isPopover && "bg-[var(--color-popover-bg)] text-[var(--color-text-primary)]",
-                isPopover && "shadow-[var(--shadow-popover)] border border-[var(--color-border-divider)] max-w-sm",
-                !isPopover && "bg-[var(--color-tooltip-bg)] text-[var(--color-tooltip-fg)] max-w-xs",
-                contentProps?.className
-              ),
+              zIndex: 9999,
+              overflow: "hidden",
+              borderRadius: 8,
+              paddingHorizontal: 12,
+              paddingVertical: 8,
+              maxWidth: isPopover ? 384 : 320,
+              backgroundColor: isPopover ? "var(--color-popover-bg)" : "var(--color-tooltip-bg)",
+              transition: "quick",
+              enterStyle: { opacity: 0, scale: 0.95 },
+              exitStyle: { opacity: 0, scale: 0.95 },
+              ...isPopover ? {
+                borderWidth: 1,
+                borderColor: "var(--color-border-divider)",
+                shadowColor: "var(--shadow-popover)"
+              } : {},
               onClick: interactive ? handleContentClick : void 0,
               ...selected ? { "data-selected": true } : {},
               ...contentProps,
@@ -130,12 +141,13 @@ var Tooltip = React2.forwardRef(
                   Tooltip$1.Arrow,
                   {
                     unstyled: true,
-                    className: cn(
-                      isPopover ? "fill-[var(--color-popover-bg)]" : "fill-[var(--color-tooltip-bg)]"
-                    )
+                    backgroundColor: isPopover ? "var(--color-popover-bg)" : "var(--color-tooltip-bg)"
                   }
                 ),
-                content
+                ink(content, void 0, {
+                  fontSize: 14,
+                  color: isPopover ? "var(--color-text-primary)" : "var(--color-tooltip-fg)"
+                })
               ]
             }
           )

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.12",
+  "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": {