@luxfi/ui 5.6.0 → 6.0.0

package/dist/alert.js

@@ -1,531 +0,0 @@
-"use client";
-import { cva } from 'class-variance-authority';
-import * as React2 from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-// src/alert.tsx
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var CLOSE_ICON_PATH = "M9.44 8.035a.791.791 0 0 0 1.12 0l3.802-3.803a.791.791 0 0 1 1.119 0l.287.287a.79.79 0 0 1 0 1.119L11.965 9.44a.79.79 0 0 0 0 1.118l3.803 3.803a.791.791 0 0 1 0 1.119l-.287.287a.791.791 0 0 1-1.119 0l-3.803-3.803a.79.79 0 0 0-1.118 0l-3.803 3.803a.79.79 0 0 1-1.119 0l-.287-.287a.791.791 0 0 1 0-1.119l3.803-3.803a.791.791 0 0 0 0-1.118L4.232 5.638a.791.791 0 0 1 0-1.119l.287-.287a.791.791 0 0 1 1.119 0L9.44 8.035Z";
-var CloseButton = React2.forwardRef(function CloseButton2(props, ref) {
-  const { variant: _variant, size: _size, className, children, ...rest } = props;
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      "aria-label": "Close",
-      ref,
-      className: cn(
-        "inline-flex items-center justify-center",
-        "size-5 min-w-0 shrink-0 p-0",
-        "rounded-sm border-0 overflow-hidden",
-        "bg-transparent text-[var(--closeButton-fg,currentColor)]",
-        "hover:bg-transparent hover:text-[var(--hover-color,currentColor)]",
-        "disabled:opacity-40",
-        "cursor-pointer",
-        className
-      ),
-      ...rest,
-      children: children ?? /* @__PURE__ */ jsx(
-        "svg",
-        {
-          className: "size-5",
-          viewBox: "0 0 20 20",
-          fill: "none",
-          "aria-hidden": "true",
-          children: /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: CLOSE_ICON_PATH,
-              fill: "currentColor"
-            }
-          )
-        }
-      )
-    }
-  );
-});
-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 IndicatorIcon = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm.75-11.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM9.25 10a.75.75 0 011.5 0v3a.75.75 0 01-1.5 0v-3z" }) });
-var alertRoot = cva(
-  // base
-  "w-full flex items-start relative rounded text-[var(--color-alert-fg)]",
-  {
-    variants: {
-      status: {
-        info: "bg-[var(--color-alert-bg-info)]",
-        warning: "bg-[var(--color-alert-bg-warning)]",
-        warning_table: "bg-[var(--color-alert-bg-warning-table)]",
-        success: "bg-[var(--color-alert-bg-success)]",
-        error: "bg-[var(--color-alert-bg-error)]"
-      },
-      size: {
-        sm: "gap-2 px-2 py-2 text-xs",
-        md: "gap-2 px-3 py-2 text-base"
-      }
-    },
-    defaultVariants: {
-      status: "info",
-      size: "md"
-    }
-  }
-);
-var alertContent = cva("flex flex-1", {
-  variants: {
-    inline: {
-      "true": "inline-flex flex-row items-center",
-      "false": "flex flex-col"
-    }
-  },
-  defaultVariants: {
-    inline: true
-  }
-});
-var INDICATOR_BASE = "inline-flex items-center justify-center shrink-0 w-5 h-5 text-[var(--color-alert-fg)] [&>svg]:w-full [&>svg]:h-full";
-var indicatorVariants = cva(INDICATOR_BASE, {
-  variants: {
-    size: {
-      sm: "w-5 h-5 my-0",
-      md: "w-5 h-5 my-[2px]"
-    }
-  },
-  defaultVariants: {
-    size: "md"
-  }
-});
-var Alert = React2.forwardRef(
-  function Alert2(props, ref) {
-    const {
-      title,
-      children,
-      icon,
-      closable,
-      onClose,
-      startElement,
-      endElement,
-      loading,
-      size,
-      inline = true,
-      showIcon = false,
-      descriptionProps,
-      status = "info",
-      className,
-      ...rest
-    } = props;
-    const { whiteSpace: _whiteSpace, mb: _mb, mt: _mt, style: styleProp, ...alertRest } = rest;
-    const shimStyle = { ...styleProp };
-    if (_whiteSpace) shimStyle.whiteSpace = _whiteSpace;
-    if (_mb !== void 0) shimStyle.marginBottom = typeof _mb === "number" ? `${_mb * 4}px` : _mb;
-    if (_mt !== void 0) shimStyle.marginTop = typeof _mt === "number" ? `${_mt * 4}px` : _mt;
-    const alertStyle = Object.keys(shimStyle).length > 0 ? shimStyle : void 0;
-    const [isOpen, setIsOpen] = React2.useState(true);
-    const resolvedSize = size ?? "md";
-    const defaultIcon = /* @__PURE__ */ jsx(IndicatorIcon, { className: "w-5 h-5" });
-    const iconElement = (() => {
-      if (startElement !== void 0) {
-        return startElement;
-      }
-      if (!showIcon && icon === void 0) {
-        return null;
-      }
-      return /* @__PURE__ */ jsx("span", { className: indicatorVariants({ size: resolvedSize }), children: icon || defaultIcon });
-    })();
-    const handleClose = React2.useCallback(() => {
-      setIsOpen(false);
-      onClose?.();
-    }, [onClose]);
-    if (closable && !isOpen) {
-      return null;
-    }
-    const {
-      className: descClassName,
-      whiteSpace: descWhiteSpace,
-      alignItems: descAlignItems,
-      flexDir: descFlexDir,
-      flexWrap: descFlexWrap,
-      rowGap: descRowGap,
-      columnGap: descColumnGap,
-      style: descStyleProp,
-      ...descRest
-    } = descriptionProps ?? {};
-    const descStyle = {
-      ...descStyleProp,
-      ...descWhiteSpace ? { whiteSpace: descWhiteSpace } : {},
-      ...descAlignItems ? { alignItems: descAlignItems } : {},
-      ...descFlexDir ? { flexDirection: descFlexDir } : {},
-      ...descFlexWrap ? { flexWrap: descFlexWrap } : {},
-      ...descRowGap !== void 0 ? { rowGap: typeof descRowGap === "number" ? `${descRowGap * 4}px` : descRowGap } : {},
-      ...descColumnGap !== void 0 ? { columnGap: typeof descColumnGap === "number" ? `${descColumnGap * 4}px` : descColumnGap } : {}
-    };
-    return /* @__PURE__ */ jsx(Skeleton, { loading, children: /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        className: cn(alertRoot({ status, size: resolvedSize }), className),
-        style: alertStyle,
-        ...alertRest,
-        children: [
-          iconElement,
-          children ? /* @__PURE__ */ jsxs("div", { className: alertContent({ inline }), children: [
-            title && /* @__PURE__ */ jsx("div", { className: "font-semibold", children: title }),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn("inline-flex flex-wrap", descClassName),
-                style: Object.keys(descStyle).length > 0 ? descStyle : void 0,
-                ...descRest,
-                children
-              }
-            )
-          ] }) : /* @__PURE__ */ jsx("div", { className: "font-semibold flex-1", children: title }),
-          endElement,
-          closable && /* @__PURE__ */ jsx(
-            CloseButton,
-            {
-              className: "relative self-start",
-              onClick: handleClose
-            }
-          )
-        ]
-      }
-    ) });
-  }
-);
-
-export { Alert };

package/dist/avatar.cjs

@@ -1,149 +0,0 @@
-"use client";
-'use strict';
-
-var RadixAvatar = require('@radix-ui/react-avatar');
-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 RadixAvatar__namespace = /*#__PURE__*/_interopNamespace(RadixAvatar);
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
-var SIZE_CLASSES = {
-  xs: "h-6 w-6 text-[10px]",
-  sm: "h-8 w-8 text-xs",
-  md: "h-10 w-10 text-sm",
-  lg: "h-12 w-12 text-base",
-  xl: "h-16 w-16 text-lg",
-  "2xl": "h-20 w-20 text-xl"
-};
-var VARIANT_CLASSES = {
-  solid: "bg-gray-500 text-white",
-  subtle: "bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-200",
-  outline: "border-2 border-gray-300 bg-transparent text-gray-700 dark:border-gray-600 dark:text-gray-200"
-};
-var DEFAULT_SIZE = "md";
-var DEFAULT_VARIANT = "subtle";
-var AvatarGroupContext = React__namespace.createContext({});
-function useAvatarGroupContext() {
-  return React__namespace.useContext(AvatarGroupContext);
-}
-var Avatar = React__namespace.forwardRef(
-  function Avatar2(props, ref) {
-    const group = useAvatarGroupContext();
-    const {
-      name,
-      src,
-      srcSet,
-      loading,
-      icon,
-      fallback,
-      children,
-      className,
-      size: sizeProp,
-      variant: variantProp,
-      borderless,
-      ...rest
-    } = props;
-    const size = sizeProp ?? group.size ?? DEFAULT_SIZE;
-    const variant = variantProp ?? group.variant ?? DEFAULT_VARIANT;
-    const isBorderless = borderless ?? group.borderless ?? false;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      RadixAvatar__namespace.Root,
-      {
-        ref,
-        className: cn(
-          "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full align-middle",
-          SIZE_CLASSES[size],
-          VARIANT_CLASSES[variant],
-          !isBorderless && "ring-2 ring-white dark:ring-gray-900",
-          className
-        ),
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { name, icon, children: fallback }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            RadixAvatar__namespace.Image,
-            {
-              className: "h-full w-full rounded-[inherit] object-cover",
-              src,
-              srcSet,
-              loading,
-              alt: name ?? ""
-            }
-          ),
-          children
-        ]
-      }
-    );
-  }
-);
-var AvatarFallback = React__namespace.forwardRef(
-  function AvatarFallback2(props, ref) {
-    const { name, icon, children, className, ...rest } = props;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      RadixAvatar__namespace.Fallback,
-      {
-        ref,
-        className: cn(
-          "flex h-full w-full items-center justify-center font-medium",
-          className
-        ),
-        ...rest,
-        children: [
-          children,
-          name != null && children == null && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: getInitials(name) }),
-          name == null && children == null && icon
-        ]
-      }
-    );
-  }
-);
-function getInitials(name) {
-  const names = name.trim().split(" ");
-  const firstName = names[0] != null ? names[0] : "";
-  const lastName = names.length > 1 ? names[names.length - 1] : "";
-  return firstName && lastName ? `${firstName.charAt(0)}${lastName.charAt(0)}` : firstName.charAt(0);
-}
-var AvatarGroup = React__namespace.forwardRef(
-  function AvatarGroup2(props, ref) {
-    const { size, variant, borderless, className, ...rest } = props;
-    const contextValue = React__namespace.useMemo(
-      () => ({ size, variant, borderless }),
-      [size, variant, borderless]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(AvatarGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        className: cn("flex -space-x-3", className),
-        ...rest
-      }
-    ) });
-  }
-);
-
-exports.Avatar = Avatar;
-exports.AvatarGroup = AvatarGroup;