@luxfi/ui 6.1.3 → 7.1.0

package/dist/alert.js

@@ -0,0 +1,408 @@
+"use client";
+import { cva } from 'class-variance-authority';
+import * as React2 from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { styled, View } from '@hanzogui/core';
+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 CloseButtonFrame = styled(View, {
+  name: "LuxCloseButton",
+  render: /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Close" }),
+  role: "button",
+  cursor: "pointer",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 20,
+  height: 20,
+  minWidth: 0,
+  flexShrink: 1,
+  padding: 0,
+  borderRadius: 4,
+  borderWidth: 0,
+  overflow: "hidden",
+  backgroundColor: "transparent",
+  hoverStyle: {
+    backgroundColor: "transparent"
+  },
+  variants: {
+    disabled: {
+      true: {
+        opacity: 0.4,
+        pointerEvents: "none"
+      }
+    }
+  }
+});
+var CLOSE_BUTTON_CLASSES = [
+  "text-[var(--closeButton-fg,currentColor)]",
+  "hover:text-[var(--hover-color,currentColor)]",
+  "disabled:opacity-40"
+].join(" ");
+var CloseButton = React2.forwardRef(function CloseButton2(props, ref) {
+  const { variant: _variant, size: _size, className, children, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    CloseButtonFrame,
+    {
+      ref,
+      className: [CLOSE_BUTTON_CLASSES, className].filter(Boolean).join(" "),
+      ...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 SHIM_PROPS = [
+  "w",
+  "h",
+  "minW",
+  "maxW",
+  "display",
+  "flexGrow",
+  "flexShrink",
+  "flexBasis",
+  "fontWeight",
+  "textStyle",
+  "borderRadius",
+  "alignSelf",
+  "alignItems",
+  "justifyContent",
+  "color",
+  "mt",
+  "mb",
+  "ml",
+  "mr",
+  "height",
+  "overflow",
+  "whiteSpace",
+  "textOverflow",
+  "textTransform",
+  "gap",
+  "gridTemplateColumns",
+  "minWidth",
+  "boxSize",
+  "py",
+  "px",
+  "p",
+  "hideBelow",
+  "fontSize",
+  "flexWrap",
+  "wordBreak",
+  "lineHeight",
+  "marginRight",
+  "position",
+  "background"
+];
+var S = 4;
+function dim(v) {
+  if (v == null) return void 0;
+  if (typeof v === "number") return `${v * S}px`;
+  if (typeof v === "string") return v;
+  if (typeof v === "object") {
+    const o = v;
+    return o.base ?? o.lg ?? o.xl ?? Object.values(o)[0];
+  }
+  return void 0;
+}
+function sp(v) {
+  if (v === void 0) return void 0;
+  return typeof v === "number" ? `${v * S}px` : v;
+}
+function shimToStyle(props) {
+  const s = {};
+  if (props.w !== void 0) s.width = dim(props.w);
+  if (props.h !== void 0) s.height = dim(props.h);
+  if (props.minW !== void 0) s.minWidth = dim(props.minW);
+  if (props.maxW !== void 0) s.maxWidth = dim(props.maxW);
+  if (props.display !== void 0) s.display = props.display;
+  if (props.flexGrow !== void 0) s.flexGrow = props.flexGrow;
+  if (props.flexShrink !== void 0) s.flexShrink = props.flexShrink;
+  if (props.flexBasis !== void 0) s.flexBasis = props.flexBasis;
+  if (props.fontWeight !== void 0) s.fontWeight = props.fontWeight;
+  if (props.borderRadius !== void 0) s.borderRadius = props.borderRadius;
+  if (props.alignSelf !== void 0) s.alignSelf = props.alignSelf;
+  if (props.alignItems !== void 0) s.alignItems = props.alignItems;
+  if (props.justifyContent !== void 0) s.justifyContent = props.justifyContent;
+  if (props.color !== void 0) s.color = props.color;
+  if (props.mt !== void 0) s.marginTop = sp(props.mt);
+  if (props.mb !== void 0) s.marginBottom = sp(props.mb);
+  if (props.ml !== void 0) s.marginLeft = sp(props.ml);
+  if (props.mr !== void 0) s.marginRight = sp(props.mr);
+  if (props.height !== void 0) s.height = props.height;
+  if (props.overflow !== void 0) s.overflow = props.overflow;
+  if (props.whiteSpace !== void 0) s.whiteSpace = props.whiteSpace;
+  if (props.textOverflow !== void 0) s.textOverflow = props.textOverflow;
+  if (props.textTransform !== void 0) s.textTransform = props.textTransform;
+  if (props.gap !== void 0) s.gap = sp(props.gap);
+  if (props.gridTemplateColumns !== void 0) s.gridTemplateColumns = props.gridTemplateColumns;
+  if (props.minWidth !== void 0) s.minWidth = props.minWidth;
+  if (props.boxSize !== void 0) {
+    const v = typeof props.boxSize === "number" ? `${props.boxSize * S}px` : props.boxSize;
+    s.width = v;
+    s.height = v;
+  }
+  if (props.py !== void 0) {
+    const v = sp(props.py);
+    s.paddingTop = v;
+    s.paddingBottom = v;
+  }
+  if (props.px !== void 0) {
+    const v = sp(props.px);
+    s.paddingLeft = v;
+    s.paddingRight = v;
+  }
+  if (props.p !== void 0) s.padding = sp(props.p);
+  if (props.fontSize !== void 0) s.fontSize = props.fontSize;
+  if (props.flexWrap !== void 0) s.flexWrap = props.flexWrap;
+  if (props.wordBreak !== void 0) s.wordBreak = props.wordBreak;
+  if (props.lineHeight !== void 0) s.lineHeight = props.lineHeight;
+  if (props.marginRight !== void 0) s.marginRight = props.marginRight;
+  if (props.position !== void 0) s.position = props.position;
+  if (props.background !== void 0) s.background = props.background;
+  return s;
+}
+function stripShims(props) {
+  const out = { ...props };
+  for (const k of SHIM_PROPS) delete out[k];
+  return out;
+}
+var SKELETON_CLASSES = [
+  "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%]"
+].join(" ");
+var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
+var Skeleton = React2.forwardRef(
+  function Skeleton2(props, ref) {
+    const { loading = false, asChild, className, children, style: styleProp, as: Component = "div", ...allRest } = props;
+    const shimStyle = shimToStyle(props);
+    const mergedStyle = Object.keys(shimStyle).length > 0 || styleProp ? { ...shimStyle, ...styleProp } : void 0;
+    const hideBelowClass = props.hideBelow ? HIDE_BELOW_MAP[props.hideBelow] : void 0;
+    const cls = hideBelowClass ? cn(className, hideBelowClass) : className;
+    const htmlRest = stripShims(allRest);
+    if (!loading) {
+      if (asChild && React2.isValidElement(children)) return children;
+      return /* @__PURE__ */ jsx(Component, { ref, className: cls, style: mergedStyle, ...htmlRest, children });
+    }
+    if (asChild && React2.isValidElement(children)) {
+      return /* @__PURE__ */ jsx(
+        Component,
+        {
+          ref,
+          "data-loading": true,
+          className: cn(SKELETON_CLASSES, "text-transparent [&_*]:invisible", cls),
+          style: mergedStyle,
+          ...htmlRest,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        "data-loading": true,
+        className: cn(SKELETON_CLASSES, children ? "text-transparent [&_*]:invisible" : "min-h-5", cls),
+        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

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

package/dist/avatar.d.cts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+type ImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type AvatarVariant = 'solid' | 'subtle' | 'outline';
+interface AvatarProps extends React.ComponentPropsWithoutRef<'span'> {
+    name?: string;
+    src?: string;
+    srcSet?: string;
+    loading?: ImageProps['loading'];
+    icon?: React.ReactElement;
+    fallback?: React.ReactNode;
+    size?: AvatarSize;
+    variant?: AvatarVariant;
+    borderless?: boolean;
+}
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+interface AvatarGroupProps extends React.ComponentPropsWithoutRef<'div'> {
+    size?: AvatarSize;
+    variant?: AvatarVariant;
+    borderless?: boolean;
+}
+declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Avatar, AvatarGroup, type AvatarProps };

package/dist/avatar.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+type ImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type AvatarVariant = 'solid' | 'subtle' | 'outline';
+interface AvatarProps extends React.ComponentPropsWithoutRef<'span'> {
+    name?: string;
+    src?: string;
+    srcSet?: string;
+    loading?: ImageProps['loading'];
+    icon?: React.ReactElement;
+    fallback?: React.ReactNode;
+    size?: AvatarSize;
+    variant?: AvatarVariant;
+    borderless?: boolean;
+}
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+interface AvatarGroupProps extends React.ComponentPropsWithoutRef<'div'> {
+    size?: AvatarSize;
+    variant?: AvatarVariant;
+    borderless?: boolean;
+}
+declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Avatar, AvatarGroup, type AvatarProps };