@luxfi/ui 1.0.1

package/dist/badge.js

@@ -0,0 +1,589 @@
+"use client";
+import { cva } from 'class-variance-authority';
+import * as React2 from 'react';
+import React2__default from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+import { useClickAway } from '@uidotdev/usehooks';
+
+// src/badge.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var SPACING_SCALE = 4;
+function toStylePx(value) {
+  if (value === void 0) return void 0;
+  if (typeof value === "string") return value;
+  return `${value * SPACING_SCALE}px`;
+}
+function extractSkeletonStyleProps(props) {
+  const style = {};
+  const rest = {};
+  function resolveDimension(value) {
+    if (value === void 0 || value === null) return void 0;
+    if (typeof value === "number") return `${value * SPACING_SCALE}px`;
+    if (typeof value === "string") return value;
+    if (typeof value === "object") {
+      const obj = value;
+      return obj.base ?? obj.lg ?? obj.xl ?? Object.values(obj)[0];
+    }
+    return void 0;
+  }
+  for (const [key, value] of Object.entries(props)) {
+    if (value === void 0) continue;
+    switch (key) {
+      case "w": {
+        const v = resolveDimension(value);
+        if (v) style.width = v;
+        break;
+      }
+      case "h": {
+        const v = resolveDimension(value);
+        if (v) style.height = v;
+        break;
+      }
+      case "minW": {
+        const v = resolveDimension(value);
+        if (v) style.minWidth = v;
+        break;
+      }
+      case "maxW": {
+        const v = resolveDimension(value);
+        if (v) style.maxWidth = v;
+        break;
+      }
+      case "height":
+        style.height = value;
+        break;
+      case "display":
+        style.display = value;
+        break;
+      case "flexGrow":
+        style.flexGrow = value;
+        break;
+      case "flexShrink":
+        style.flexShrink = value;
+        break;
+      case "flexBasis":
+        style.flexBasis = value;
+        break;
+      case "fontWeight":
+        style.fontWeight = value;
+        break;
+      case "borderRadius":
+        style.borderRadius = value;
+        break;
+      case "alignSelf":
+        style.alignSelf = value;
+        break;
+      case "alignItems":
+        style.alignItems = value;
+        break;
+      case "justifyContent":
+        style.justifyContent = value;
+        break;
+      case "color":
+        style.color = value;
+        break;
+      case "mt":
+        style.marginTop = toStylePx(value);
+        break;
+      case "mb":
+        style.marginBottom = toStylePx(value);
+        break;
+      case "ml":
+        style.marginLeft = toStylePx(value);
+        break;
+      case "mr":
+        style.marginRight = toStylePx(value);
+        break;
+      case "overflow":
+        style.overflow = value;
+        break;
+      case "whiteSpace":
+        style.whiteSpace = value;
+        break;
+      case "textOverflow":
+        style.textOverflow = value;
+        break;
+      case "textTransform":
+        style.textTransform = value;
+        break;
+      case "gap":
+        style.gap = typeof value === "number" ? `${value * SPACING_SCALE}px` : value;
+        break;
+      case "gridTemplateColumns":
+        style.gridTemplateColumns = value;
+        break;
+      case "minWidth":
+        style.minWidth = value;
+        break;
+      case "boxSize": {
+        const s = typeof value === "number" ? `${value * SPACING_SCALE}px` : value;
+        style.width = s;
+        style.height = s;
+        break;
+      }
+      case "py": {
+        const v = toStylePx(value);
+        style.paddingTop = v;
+        style.paddingBottom = v;
+        break;
+      }
+      case "px": {
+        const v = toStylePx(value);
+        style.paddingLeft = v;
+        style.paddingRight = v;
+        break;
+      }
+      case "p": {
+        const v = toStylePx(value);
+        style.padding = v;
+        break;
+      }
+      case "hideBelow":
+        break;
+      // handled via className
+      case "textStyle":
+        break;
+      // drop textStyle, not directly applicable
+      case "fontSize":
+        style.fontSize = value;
+        break;
+      case "flexWrap":
+        style.flexWrap = value;
+        break;
+      case "wordBreak":
+        style.wordBreak = value;
+        break;
+      case "lineHeight":
+        style.lineHeight = value;
+        break;
+      case "marginRight":
+        style.marginRight = value;
+        break;
+      case "position":
+        style.position = value;
+        break;
+      case "background":
+        style.background = value;
+        break;
+      default:
+        rest[key] = value;
+        break;
+    }
+  }
+  return { style, rest };
+}
+var Skeleton = React2.forwardRef(
+  function Skeleton2(props, ref) {
+    const {
+      loading = false,
+      asChild,
+      className,
+      children,
+      style: styleProp,
+      // Destructure style-prop shims so they don't leak into DOM
+      w: _w,
+      h: _h,
+      minW: _minW,
+      maxW: _maxW,
+      display: _display,
+      flexGrow: _flexGrow,
+      flexShrink: _flexShrink,
+      flexBasis: _flexBasis,
+      fontWeight: _fontWeight,
+      textStyle: _textStyle,
+      borderRadius: _borderRadius,
+      alignSelf: _alignSelf,
+      alignItems: _alignItems,
+      justifyContent: _justifyContent,
+      color: _color,
+      mt: _mt,
+      mb: _mb,
+      ml: _ml,
+      mr: _mr,
+      height: _height,
+      overflow: _overflow,
+      whiteSpace: _whiteSpace,
+      textOverflow: _textOverflow,
+      textTransform: _textTransform,
+      gap: _gap,
+      gridTemplateColumns: _gridTemplateColumns,
+      minWidth: _minWidth,
+      boxSize: _boxSize,
+      py: _py,
+      px: _px,
+      p: _p,
+      hideBelow: _hideBelow,
+      fontSize: _fontSize,
+      flexWrap: _flexWrap,
+      wordBreak: _wordBreak,
+      lineHeight: _lineHeight,
+      marginRight: _marginRight,
+      position: _position,
+      background: _background,
+      as: Component = "div",
+      ...htmlRest
+    } = props;
+    const { style: shimStyle } = extractSkeletonStyleProps({
+      w: _w,
+      h: _h,
+      minW: _minW,
+      maxW: _maxW,
+      display: _display,
+      flexGrow: _flexGrow,
+      flexShrink: _flexShrink,
+      flexBasis: _flexBasis,
+      fontWeight: _fontWeight,
+      textStyle: _textStyle,
+      borderRadius: _borderRadius,
+      alignSelf: _alignSelf,
+      alignItems: _alignItems,
+      justifyContent: _justifyContent,
+      color: _color,
+      mt: _mt,
+      mb: _mb,
+      ml: _ml,
+      mr: _mr,
+      height: _height,
+      overflow: _overflow,
+      whiteSpace: _whiteSpace,
+      textOverflow: _textOverflow,
+      textTransform: _textTransform,
+      gap: _gap,
+      gridTemplateColumns: _gridTemplateColumns,
+      minWidth: _minWidth,
+      boxSize: _boxSize,
+      py: _py,
+      px: _px,
+      p: _p,
+      hideBelow: _hideBelow,
+      fontSize: _fontSize,
+      flexWrap: _flexWrap,
+      wordBreak: _wordBreak,
+      lineHeight: _lineHeight,
+      marginRight: _marginRight,
+      position: _position,
+      background: _background
+    });
+    const mergedStyle = Object.keys(shimStyle).length > 0 || styleProp ? { ...shimStyle, ...styleProp } : void 0;
+    const HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
+    const hideBelowClass = _hideBelow ? HIDE_BELOW_MAP[_hideBelow] : void 0;
+    const finalClassName = hideBelowClass ? cn(className, hideBelowClass) : className;
+    if (!loading) {
+      if (asChild && React2.isValidElement(children)) {
+        return children;
+      }
+      return /* @__PURE__ */ jsx(Component, { ref, className: finalClassName, style: mergedStyle, ...htmlRest, children });
+    }
+    if (asChild && React2.isValidElement(children)) {
+      return /* @__PURE__ */ jsx(
+        Component,
+        {
+          ref,
+          "data-loading": true,
+          className: cn(
+            "animate-skeleton-shimmer rounded-sm",
+            "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
+            "bg-[length:200%_100%]",
+            "text-transparent [&_*]:invisible",
+            finalClassName
+          ),
+          style: mergedStyle,
+          ...htmlRest,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        "data-loading": true,
+        className: cn(
+          "animate-skeleton-shimmer rounded-sm",
+          "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
+          "bg-[length:200%_100%]",
+          children ? "text-transparent [&_*]:invisible" : "min-h-5",
+          finalClassName
+        ),
+        style: mergedStyle,
+        ...htmlRest,
+        children
+      }
+    );
+  }
+);
+React2.forwardRef(
+  function SkeletonCircle2(props, ref) {
+    const { size = 40, loading = true, className, ...rest } = props;
+    const dimension = typeof size === "number" ? `${size}px` : size;
+    return /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        ref,
+        loading,
+        className: cn("rounded-full shrink-0", className),
+        style: { width: dimension, height: dimension, ...rest.style },
+        ...rest
+      }
+    );
+  }
+);
+React2.forwardRef(
+  function SkeletonText2(props, ref) {
+    const { noOfLines = 3, loading = true, className, ...rest } = props;
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        loading,
+        className: cn("h-4", index === noOfLines - 1 && "max-w-[80%]")
+      },
+      index
+    )) });
+  }
+);
+var LG_BREAKPOINT = 1024;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React2.useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.innerWidth < LG_BREAKPOINT;
+  });
+  React2.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 = React2.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] = React2.useState(defaultOpen);
+    const timeoutRef = React2.useRef(null);
+    const isMobile = useIsMobile();
+    const handleOpenChange = React2.useCallback((nextOpen) => {
+      setOpen(nextOpen);
+      onOpenChange?.({ open: nextOpen });
+    }, [onOpenChange]);
+    const handleOpenChangeManual = React2.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 = React2.useCallback(() => {
+      handleOpenChangeManual(false);
+    }, [handleOpenChangeManual]);
+    const triggerRef = useClickAway(handleClickAway);
+    const handleTriggerClick = React2.useCallback(() => {
+      handleOpenChangeManual(!open);
+    }, [handleOpenChangeManual, open]);
+    const handleContentClick = React2.useCallback((event) => {
+      event.stopPropagation();
+      if (interactive) {
+        const closestLink = event.target?.closest("a");
+        if (closestLink) {
+          handleOpenChangeManual(false);
+        }
+      }
+    }, [interactive, handleOpenChangeManual]);
+    React2.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
+              ]
+            }
+          ) })
+        ]
+      }
+    ) });
+  }
+);
+function TruncatedTextTooltip({ label, children }) {
+  return /* @__PURE__ */ jsx(Tooltip, { content: label, positioning: { placement: "top" }, children });
+}
+var badgeVariants = cva(
+  "inline-flex items-center rounded-sm gap-1 font-medium w-fit max-w-full whitespace-nowrap select-text",
+  {
+    variants: {
+      variant: {
+        subtle: "",
+        solid: ""
+      },
+      size: {
+        sm: "text-xs p-1 h-[18px] min-h-[18px]",
+        md: "text-sm px-1 py-0.5 min-h-6",
+        lg: "text-sm px-2 py-1 min-h-7 font-semibold"
+      }
+    },
+    defaultVariants: {
+      variant: "subtle",
+      size: "md"
+    }
+  }
+);
+var COLOR_PALETTE_CLASSES = {
+  gray: "bg-badge-gray-bg text-badge-gray-fg",
+  green: "bg-badge-green-bg text-badge-green-fg",
+  red: "bg-badge-red-bg text-badge-red-fg",
+  purple: "bg-badge-purple-bg text-badge-purple-fg",
+  orange: "bg-badge-orange-bg text-badge-orange-fg",
+  blue: "bg-badge-blue-bg text-badge-blue-fg",
+  yellow: "bg-badge-yellow-bg text-badge-yellow-fg",
+  teal: "bg-badge-teal-bg text-badge-teal-fg",
+  cyan: "bg-badge-cyan-bg text-badge-cyan-fg",
+  pink: "bg-badge-pink-bg text-badge-pink-fg",
+  purple_alt: "bg-badge-purple-alt-bg text-badge-purple-alt-fg",
+  blue_alt: "bg-badge-blue-alt-bg text-badge-blue-alt-fg",
+  bright_gray: "bg-badge-bright-gray-bg text-badge-bright-gray-fg",
+  bright_green: "bg-badge-bright-green-bg text-badge-bright-green-fg",
+  bright_red: "bg-badge-bright-red-bg text-badge-bright-red-fg",
+  bright_blue: "bg-badge-bright-blue-bg text-badge-bright-blue-fg",
+  bright_yellow: "bg-badge-bright-yellow-bg text-badge-bright-yellow-fg",
+  bright_teal: "bg-badge-bright-teal-bg text-badge-bright-teal-fg",
+  bright_cyan: "bg-badge-bright-cyan-bg text-badge-bright-cyan-fg",
+  bright_orange: "bg-badge-bright-orange-bg text-badge-bright-orange-fg",
+  bright_purple: "bg-badge-bright-purple-bg text-badge-bright-purple-fg",
+  bright_pink: "bg-badge-bright-pink-bg text-badge-bright-pink-fg"
+};
+var Badge = React2__default.forwardRef(
+  function Badge2(props, ref) {
+    const {
+      loading,
+      startElement,
+      children,
+      truncated = false,
+      endElement,
+      variant,
+      size,
+      colorPalette = "gray",
+      className,
+      flexShrink: _flexShrink,
+      gap: _gap,
+      ml: _ml,
+      mr: _mr,
+      style: styleProp,
+      ...rest
+    } = props;
+    const shimStyle = { ...styleProp };
+    if (_flexShrink !== void 0) shimStyle.flexShrink = _flexShrink;
+    if (_gap !== void 0) shimStyle.gap = typeof _gap === "number" ? `${_gap * 4}px` : _gap;
+    if (_ml !== void 0) {
+      if (typeof _ml === "object") {
+        const obj = _ml;
+        shimStyle.marginLeft = `${(obj.base ?? obj.lg ?? 0) * 4}px`;
+      } else {
+        shimStyle.marginLeft = typeof _ml === "number" ? `${_ml * 4}px` : _ml;
+      }
+    }
+    if (_mr !== void 0) shimStyle.marginRight = typeof _mr === "number" ? `${_mr * 4}px` : _mr;
+    const badgeStyle = Object.keys(shimStyle).length > 0 ? shimStyle : void 0;
+    const child = children ? /* @__PURE__ */ jsx("span", { className: "overflow-hidden text-ellipsis", children }) : null;
+    const childrenElement = truncated ? /* @__PURE__ */ jsx(TruncatedTextTooltip, { label: children, children: child }) : child;
+    const badgeElement = /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        className: cn(
+          badgeVariants({ variant, size }),
+          COLOR_PALETTE_CLASSES[colorPalette],
+          className
+        ),
+        style: badgeStyle,
+        ...rest,
+        children: [
+          startElement,
+          childrenElement,
+          endElement
+        ]
+      }
+    );
+    if (loading) {
+      return /* @__PURE__ */ jsx(Skeleton, { loading, asChild: true, children: badgeElement });
+    }
+    return badgeElement;
+  }
+);
+
+export { Badge };