@luxfi/ui 5.6.0 → 6.1.0

package/dist/badge.js

@@ -1,589 +0,0 @@
-"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 };