@luxfi/ui 6.1.3 → 7.1.0

package/dist/toaster.cjs

@@ -0,0 +1,99 @@
+"use client";
+'use strict';
+
+var sonner = require('sonner');
+var jsxRuntime = require('react/jsx-runtime');
+
+var SECOND = 1e3;
+var DURATION = 10 * SECOND;
+function mapOptions(opts) {
+  const external = {
+    id: opts.id,
+    description: opts.description,
+    duration: opts.duration
+  };
+  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 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)
+};
+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)"
+        }
+      }
+    }
+  );
+};
+
+exports.Toaster = Toaster;
+exports.toaster = toaster;

package/dist/toaster.d.cts

@@ -0,0 +1,29 @@
+import React__default from 'react';
+
+interface ToastOptions {
+    readonly id?: string | number;
+    readonly title?: string;
+    readonly description?: string;
+    readonly type?: 'info' | 'warning' | 'success' | 'error' | 'loading';
+    readonly duration?: number;
+    readonly action?: {
+        readonly label: string;
+        readonly onClick: () => void;
+    };
+    readonly onStatusChange?: (details: {
+        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 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;
+};
+declare const Toaster: React__default.FC;
+
+export { Toaster, toaster };

package/dist/toaster.d.ts

@@ -0,0 +1,29 @@
+import React__default from 'react';
+
+interface ToastOptions {
+    readonly id?: string | number;
+    readonly title?: string;
+    readonly description?: string;
+    readonly type?: 'info' | 'warning' | 'success' | 'error' | 'loading';
+    readonly duration?: number;
+    readonly action?: {
+        readonly label: string;
+        readonly onClick: () => void;
+    };
+    readonly onStatusChange?: (details: {
+        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 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;
+};
+declare const Toaster: React__default.FC;
+
+export { Toaster, toaster };

package/dist/toaster.js

@@ -0,0 +1,96 @@
+"use client";
+import { toast, Toaster as Toaster$1 } from 'sonner';
+import { 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
+  };
+  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 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)
+};
+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)"
+        }
+      }
+    }
+  );
+};
+
+export { Toaster, toaster };

package/dist/tooltip.cjs

@@ -0,0 +1,172 @@
+"use client";
+'use strict';
+
+var tooltip = require('@hanzogui/tooltip');
+var usehooks = require('@uidotdev/usehooks');
+var React = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+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);
+
+// src/tooltip.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var LG_BREAKPOINT = 1024;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React__namespace.useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.innerWidth < LG_BREAKPOINT;
+  });
+  React__namespace.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${LG_BREAKPOINT - 1}px)`);
+    const handler = (e) => setIsMobile(e.matches);
+    setIsMobile(mql.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, []);
+  return isMobile;
+}
+function mapPlacement(p) {
+  if (!p) return void 0;
+  return p;
+}
+var Tooltip = React__namespace.forwardRef(
+  function Tooltip2(props, ref) {
+    const {
+      showArrow: showArrowProp,
+      onOpenChange,
+      variant,
+      selected,
+      children,
+      disabled,
+      disableOnMobile,
+      content,
+      contentProps,
+      defaultOpen = false,
+      triggerProps,
+      closeDelay = 100,
+      openDelay = 100,
+      interactive,
+      positioning
+    } = props;
+    const [open, setOpen] = React__namespace.useState(defaultOpen);
+    const timeoutRef = React__namespace.useRef(null);
+    const isMobile = useIsMobile();
+    const handleOpenChange = React__namespace.useCallback((nextOpen) => {
+      setOpen(nextOpen);
+      onOpenChange?.({ open: nextOpen });
+    }, [onOpenChange]);
+    const handleOpenChangeManual = React__namespace.useCallback((nextOpen) => {
+      timeoutRef.current && window.clearTimeout(timeoutRef.current);
+      timeoutRef.current = window.setTimeout(() => {
+        setOpen(nextOpen);
+        onOpenChange?.({ open: nextOpen });
+      }, nextOpen ? openDelay : closeDelay);
+    }, [closeDelay, openDelay, onOpenChange]);
+    const handleClickAway = React__namespace.useCallback(() => {
+      handleOpenChangeManual(false);
+    }, [handleOpenChangeManual]);
+    const triggerRef = usehooks.useClickAway(handleClickAway);
+    const handleTriggerClick = React__namespace.useCallback(() => {
+      handleOpenChangeManual(!open);
+    }, [handleOpenChangeManual, open]);
+    const handleContentClick = React__namespace.useCallback((event) => {
+      event.stopPropagation();
+      if (interactive) {
+        const closestLink = event.target?.closest("a");
+        if (closestLink) {
+          handleOpenChangeManual(false);
+        }
+      }
+    }, [interactive, handleOpenChangeManual]);
+    React__namespace.useEffect(() => {
+      return () => {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+      };
+    }, []);
+    if (disabled || disableOnMobile && isMobile) return children;
+    const defaultShowArrow = variant === "popover" ? false : true;
+    const showArrow = showArrowProp !== void 0 ? showArrowProp : defaultShowArrow;
+    const isPopover = variant === "popover";
+    const placement = mapPlacement(positioning?.placement) ?? "top";
+    const offset = positioning?.offset?.mainAxis ?? 4;
+    return /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipGroup, { delay: openDelay, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      tooltip.Tooltip,
+      {
+        open,
+        onOpenChange: handleOpenChange,
+        delay: { open: openDelay, close: closeDelay },
+        placement,
+        offset,
+        unstyled: true,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            tooltip.Tooltip.Trigger,
+            {
+              ref: open ? triggerRef : void 0,
+              asChild: true,
+              ...isMobile ? { onPress: handleTriggerClick } : {},
+              ...triggerProps,
+              children
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            tooltip.Tooltip.Content,
+            {
+              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
+              ),
+              onClick: interactive ? handleContentClick : void 0,
+              ...selected ? { "data-selected": true } : {},
+              ...contentProps,
+              children: [
+                showArrow && /* @__PURE__ */ jsxRuntime.jsx(
+                  tooltip.Tooltip.Arrow,
+                  {
+                    unstyled: true,
+                    className: cn(
+                      isPopover ? "fill-[var(--color-popover-bg)]" : "fill-[var(--color-tooltip-bg)]"
+                    )
+                  }
+                ),
+                content
+              ]
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+
+exports.Tooltip = Tooltip;

package/dist/tooltip.d.cts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+interface TooltipProps {
+    selected?: boolean;
+    showArrow?: boolean;
+    portalled?: boolean;
+    portalRef?: React.RefObject<HTMLElement>;
+    content: React.ReactNode;
+    contentProps?: React.HTMLAttributes<HTMLDivElement>;
+    triggerProps?: React.HTMLAttributes<HTMLButtonElement>;
+    disabled?: boolean;
+    disableOnMobile?: boolean;
+    children?: React.ReactNode;
+    variant?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (details: {
+        open: boolean;
+    }) => void;
+    closeDelay?: number;
+    openDelay?: number;
+    interactive?: boolean;
+    lazyMount?: boolean;
+    unmountOnExit?: boolean;
+    positioning?: {
+        placement?: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
+        overflowPadding?: number;
+        offset?: {
+            mainAxis?: number;
+            crossAxis?: number;
+        };
+    };
+    closeOnClick?: boolean;
+    closeOnPointerDown?: boolean;
+}
+declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Tooltip, type TooltipProps };

package/dist/tooltip.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+interface TooltipProps {
+    selected?: boolean;
+    showArrow?: boolean;
+    portalled?: boolean;
+    portalRef?: React.RefObject<HTMLElement>;
+    content: React.ReactNode;
+    contentProps?: React.HTMLAttributes<HTMLDivElement>;
+    triggerProps?: React.HTMLAttributes<HTMLButtonElement>;
+    disabled?: boolean;
+    disableOnMobile?: boolean;
+    children?: React.ReactNode;
+    variant?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (details: {
+        open: boolean;
+    }) => void;
+    closeDelay?: number;
+    openDelay?: number;
+    interactive?: boolean;
+    lazyMount?: boolean;
+    unmountOnExit?: boolean;
+    positioning?: {
+        placement?: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
+        overflowPadding?: number;
+        offset?: {
+            mainAxis?: number;
+            crossAxis?: number;
+        };
+    };
+    closeOnClick?: boolean;
+    closeOnPointerDown?: boolean;
+}
+declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Tooltip, type TooltipProps };

package/dist/tooltip.js

@@ -0,0 +1,150 @@
+"use client";
+import { TooltipGroup, Tooltip as Tooltip$1 } from '@hanzogui/tooltip';
+import { useClickAway } from '@uidotdev/usehooks';
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/tooltip.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var LG_BREAKPOINT = 1024;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.innerWidth < LG_BREAKPOINT;
+  });
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${LG_BREAKPOINT - 1}px)`);
+    const handler = (e) => setIsMobile(e.matches);
+    setIsMobile(mql.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, []);
+  return isMobile;
+}
+function mapPlacement(p) {
+  if (!p) return void 0;
+  return p;
+}
+var Tooltip = React.forwardRef(
+  function Tooltip2(props, ref) {
+    const {
+      showArrow: showArrowProp,
+      onOpenChange,
+      variant,
+      selected,
+      children,
+      disabled,
+      disableOnMobile,
+      content,
+      contentProps,
+      defaultOpen = false,
+      triggerProps,
+      closeDelay = 100,
+      openDelay = 100,
+      interactive,
+      positioning
+    } = props;
+    const [open, setOpen] = React.useState(defaultOpen);
+    const timeoutRef = React.useRef(null);
+    const isMobile = useIsMobile();
+    const handleOpenChange = React.useCallback((nextOpen) => {
+      setOpen(nextOpen);
+      onOpenChange?.({ open: nextOpen });
+    }, [onOpenChange]);
+    const handleOpenChangeManual = React.useCallback((nextOpen) => {
+      timeoutRef.current && window.clearTimeout(timeoutRef.current);
+      timeoutRef.current = window.setTimeout(() => {
+        setOpen(nextOpen);
+        onOpenChange?.({ open: nextOpen });
+      }, nextOpen ? openDelay : closeDelay);
+    }, [closeDelay, openDelay, onOpenChange]);
+    const handleClickAway = React.useCallback(() => {
+      handleOpenChangeManual(false);
+    }, [handleOpenChangeManual]);
+    const triggerRef = useClickAway(handleClickAway);
+    const handleTriggerClick = React.useCallback(() => {
+      handleOpenChangeManual(!open);
+    }, [handleOpenChangeManual, open]);
+    const handleContentClick = React.useCallback((event) => {
+      event.stopPropagation();
+      if (interactive) {
+        const closestLink = event.target?.closest("a");
+        if (closestLink) {
+          handleOpenChangeManual(false);
+        }
+      }
+    }, [interactive, handleOpenChangeManual]);
+    React.useEffect(() => {
+      return () => {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+      };
+    }, []);
+    if (disabled || disableOnMobile && isMobile) return children;
+    const defaultShowArrow = variant === "popover" ? false : true;
+    const showArrow = showArrowProp !== void 0 ? showArrowProp : defaultShowArrow;
+    const isPopover = variant === "popover";
+    const placement = mapPlacement(positioning?.placement) ?? "top";
+    const offset = positioning?.offset?.mainAxis ?? 4;
+    return /* @__PURE__ */ jsx(TooltipGroup, { delay: openDelay, children: /* @__PURE__ */ jsxs(
+      Tooltip$1,
+      {
+        open,
+        onOpenChange: handleOpenChange,
+        delay: { open: openDelay, close: closeDelay },
+        placement,
+        offset,
+        unstyled: true,
+        children: [
+          /* @__PURE__ */ jsx(
+            Tooltip$1.Trigger,
+            {
+              ref: open ? triggerRef : void 0,
+              asChild: true,
+              ...isMobile ? { onPress: handleTriggerClick } : {},
+              ...triggerProps,
+              children
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Tooltip$1.Content,
+            {
+              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
+              ),
+              onClick: interactive ? handleContentClick : void 0,
+              ...selected ? { "data-selected": true } : {},
+              ...contentProps,
+              children: [
+                showArrow && /* @__PURE__ */ jsx(
+                  Tooltip$1.Arrow,
+                  {
+                    unstyled: true,
+                    className: cn(
+                      isPopover ? "fill-[var(--color-popover-bg)]" : "fill-[var(--color-tooltip-bg)]"
+                    )
+                  }
+                ),
+                content
+              ]
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+
+export { Tooltip };

package/dist/utils.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+
+// src/utils.ts
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+
+exports.cn = cn;

package/dist/utils.d.cts

@@ -0,0 +1,5 @@
+import { ClassValue } from 'clsx';
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { cn };

package/dist/utils.d.ts

@@ -0,0 +1,5 @@
+import { ClassValue } from 'clsx';
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { cn };

package/dist/utils.js

@@ -0,0 +1,9 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+// src/utils.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export { cn };