@luxfi/ui 5.5.3 → 5.6.0

package/dist/textarea.js

@@ -0,0 +1,59 @@
+"use client";
+import { cva } from 'class-variance-authority';
+import React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/textarea.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var textareaVariants = cva(
+  [
+    "w-full appearance-none outline-none transition-colors resize-y",
+    "bg-[var(--color-input-bg)] text-[var(--color-input-fg)] border-[var(--color-input-border)]",
+    "placeholder:text-[var(--color-input-placeholder,theme(colors.gray.400))]",
+    "hover:border-[var(--color-input-border-hover,theme(colors.gray.400))]",
+    "focus:border-[var(--color-input-border-focus,theme(colors.blue.500))]",
+    "focus:placeholder:text-[var(--color-input-placeholder-focus,theme(colors.gray.300))]",
+    "disabled:opacity-40 disabled:cursor-not-allowed",
+    "read-only:opacity-70",
+    "data-[invalid]:border-[var(--color-input-border-invalid,theme(colors.red.500))]"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        xs: "px-2 py-1 text-xs rounded",
+        sm: "px-3 py-2 text-sm rounded-md",
+        md: "px-4 py-2 text-base rounded-md",
+        lg: "px-4 py-3 text-lg rounded-lg",
+        "2xl": "px-4 py-3 text-xl rounded-lg"
+      },
+      variant: {
+        outline: "border border-solid",
+        filled: "border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]",
+        unstyled: "border-0 bg-transparent p-0"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "outline"
+    }
+  }
+);
+var Textarea = React.forwardRef(
+  ({ size, variant, className, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref,
+        className: cn(textareaVariants({ size, variant }), className),
+        ...rest
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };

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.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,171 @@
+"use client";
+'use strict';
+
+var RadixTooltip = require('@radix-ui/react-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 RadixTooltip__namespace = /*#__PURE__*/_interopNamespace(RadixTooltip);
+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;
+}
+var Tooltip = React__namespace.forwardRef(
+  function Tooltip2(props, ref) {
+    const {
+      showArrow: showArrowProp,
+      onOpenChange,
+      variant,
+      selected,
+      children,
+      disabled,
+      disableOnMobile,
+      portalled = true,
+      content,
+      contentProps,
+      portalRef,
+      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 placement = positioning?.placement ?? "top";
+    const side = placement.split("-")[0];
+    const align = placement.includes("-") ? placement.split("-")[1] : void 0;
+    const sideOffset = positioning?.offset?.mainAxis ?? 4;
+    const isPopover = variant === "popover";
+    return /* @__PURE__ */ jsxRuntime.jsx(RadixTooltip__namespace.Provider, { delayDuration: openDelay, skipDelayDuration: 0, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      RadixTooltip__namespace.Root,
+      {
+        open,
+        onOpenChange: handleOpenChange,
+        delayDuration: openDelay,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            RadixTooltip__namespace.Trigger,
+            {
+              ref: open ? triggerRef : void 0,
+              asChild: true,
+              onClick: isMobile ? handleTriggerClick : void 0,
+              ...triggerProps,
+              children
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(RadixTooltip__namespace.Portal, { container: portalled ? portalRef?.current ?? void 0 : void 0, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            RadixTooltip__namespace.Content,
+            {
+              ref,
+              side,
+              align,
+              sideOffset,
+              onClick: interactive ? handleContentClick : void 0,
+              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
+              ),
+              ...selected ? { "data-selected": true } : {},
+              ...contentProps,
+              children: [
+                showArrow && /* @__PURE__ */ jsxRuntime.jsx(
+                  RadixTooltip__namespace.Arrow,
+                  {
+                    className: cn(
+                      isPopover ? "fill-[var(--color-popover-bg)]" : "fill-[var(--color-tooltip-bg)]"
+                    )
+                  }
+                ),
+                content
+              ]
+            }
+          ) })
+        ]
+      }
+    ) });
+  }
+);
+
+exports.Tooltip = Tooltip;

package/dist/tooltip.js

@@ -0,0 +1,148 @@
+"use client";
+import * as RadixTooltip from '@radix-ui/react-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;
+}
+var Tooltip = React.forwardRef(
+  function Tooltip2(props, ref) {
+    const {
+      showArrow: showArrowProp,
+      onOpenChange,
+      variant,
+      selected,
+      children,
+      disabled,
+      disableOnMobile,
+      portalled = true,
+      content,
+      contentProps,
+      portalRef,
+      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 placement = positioning?.placement ?? "top";
+    const side = placement.split("-")[0];
+    const align = placement.includes("-") ? placement.split("-")[1] : void 0;
+    const sideOffset = positioning?.offset?.mainAxis ?? 4;
+    const isPopover = variant === "popover";
+    return /* @__PURE__ */ jsx(RadixTooltip.Provider, { delayDuration: openDelay, skipDelayDuration: 0, children: /* @__PURE__ */ jsxs(
+      RadixTooltip.Root,
+      {
+        open,
+        onOpenChange: handleOpenChange,
+        delayDuration: openDelay,
+        children: [
+          /* @__PURE__ */ jsx(
+            RadixTooltip.Trigger,
+            {
+              ref: open ? triggerRef : void 0,
+              asChild: true,
+              onClick: isMobile ? handleTriggerClick : void 0,
+              ...triggerProps,
+              children
+            }
+          ),
+          /* @__PURE__ */ jsx(RadixTooltip.Portal, { container: portalled ? portalRef?.current ?? void 0 : void 0, children: /* @__PURE__ */ jsxs(
+            RadixTooltip.Content,
+            {
+              ref,
+              side,
+              align,
+              sideOffset,
+              onClick: interactive ? handleContentClick : void 0,
+              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
+              ),
+              ...selected ? { "data-selected": true } : {},
+              ...contentProps,
+              children: [
+                showArrow && /* @__PURE__ */ jsx(
+                  RadixTooltip.Arrow,
+                  {
+                    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.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 };