@luxfi/ui 5.5.3 → 5.6.0

package/src/alert.tsx

@@ -0,0 +1,221 @@
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from './utils';
+
+// Inline info icon (filled circle with i)
+const IndicatorIcon = ({ className }: { readonly className?: string }) => (
+  <svg className={ className } viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <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"/>
+  </svg>
+);
+
+import { CloseButton } from './close-button';
+import { Skeleton } from './skeleton';
+
+/* ------------------------------------------------------------------ */
+/*  Status type                                                        */
+/* ------------------------------------------------------------------ */
+
+type AlertStatus = 'info' | 'warning' | 'warning_table' | 'success' | 'error';
+
+/* ------------------------------------------------------------------ */
+/*  CVA variants                                                       */
+/* ------------------------------------------------------------------ */
+
+const 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',
+    },
+  },
+);
+
+const alertContent = cva('flex flex-1', {
+  variants: {
+    inline: {
+      'true': 'inline-flex flex-row items-center',
+      'false': 'flex flex-col',
+    },
+  },
+  defaultVariants: {
+    inline: true,
+  },
+});
+
+const 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';
+
+const indicatorVariants = cva(INDICATOR_BASE, {
+  variants: {
+    size: {
+      sm: 'w-5 h-5 my-0',
+      md: 'w-5 h-5 my-[2px]',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+/* ------------------------------------------------------------------ */
+/*  Props                                                              */
+/* ------------------------------------------------------------------ */
+
+export interface AlertProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {
+  readonly status?: AlertStatus;
+  readonly size?: 'sm' | 'md';
+  readonly inline?: boolean;
+  readonly startElement?: React.ReactNode;
+  readonly endElement?: React.ReactNode;
+  readonly descriptionProps?: Omit<React.ComponentPropsWithoutRef<'div'>, 'ref'> & {
+    whiteSpace?: string;
+    alignItems?: string;
+    flexDir?: string;
+    flexWrap?: string;
+    rowGap?: number | string;
+    columnGap?: number | string;
+  };
+  readonly title?: React.ReactNode;
+  readonly icon?: React.ReactElement;
+  readonly closable?: boolean;
+  readonly onClose?: () => void;
+  readonly loading?: boolean;
+  readonly showIcon?: boolean;
+  // Legacy Chakra style-prop shims
+  readonly whiteSpace?: string;
+  readonly mb?: number | string;
+  readonly mt?: number | string;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Component                                                          */
+/* ------------------------------------------------------------------ */
+
+export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  function Alert(props, ref) {
+    const {
+      title,
+      children,
+      icon,
+      closable,
+      onClose,
+      startElement,
+      endElement,
+      loading,
+      size,
+      inline = true,
+      showIcon = false,
+      descriptionProps,
+      status = 'info',
+      className,
+      ...rest
+    } = props;
+
+    // Strip style prop shims
+    const { whiteSpace: _whiteSpace, mb: _mb, mt: _mt, style: styleProp, ...alertRest } = rest;
+    const shimStyle: React.CSSProperties = { ...styleProp };
+    if (_whiteSpace) shimStyle.whiteSpace = _whiteSpace as React.CSSProperties['whiteSpace'];
+    if (_mb !== undefined) shimStyle.marginBottom = typeof _mb === 'number' ? `${ _mb * 4 }px` : _mb;
+    if (_mt !== undefined) shimStyle.marginTop = typeof _mt === 'number' ? `${ _mt * 4 }px` : _mt;
+    const alertStyle = Object.keys(shimStyle).length > 0 ? shimStyle : undefined;
+
+    const [ isOpen, setIsOpen ] = React.useState(true);
+
+    const resolvedSize = size ?? 'md';
+
+    const defaultIcon = (
+      <IndicatorIcon className="w-5 h-5"/>
+    );
+
+    const iconElement = (() => {
+      if (startElement !== undefined) {
+        return startElement;
+      }
+
+      if (!showIcon && icon === undefined) {
+        return null;
+      }
+
+      return (
+        <span className={ indicatorVariants({ size: resolvedSize }) }>
+          { icon || defaultIcon }
+        </span>
+      );
+    })();
+
+    const handleClose = React.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: React.CSSProperties = {
+      ...descStyleProp,
+      ...(descWhiteSpace ? { whiteSpace: descWhiteSpace as React.CSSProperties['whiteSpace'] } : {}),
+      ...(descAlignItems ? { alignItems: descAlignItems } : {}),
+      ...(descFlexDir ? { flexDirection: descFlexDir as React.CSSProperties['flexDirection'] } : {}),
+      ...(descFlexWrap ? { flexWrap: descFlexWrap as React.CSSProperties['flexWrap'] } : {}),
+      ...(descRowGap !== undefined ? { rowGap: typeof descRowGap === 'number' ? `${ descRowGap * 4 }px` : descRowGap } : {}),
+      ...(descColumnGap !== undefined ? { columnGap: typeof descColumnGap === 'number' ? `${ descColumnGap * 4 }px` : descColumnGap } : {}),
+    };
+
+    return (
+      <Skeleton loading={ loading }>
+        <div
+          ref={ ref }
+          className={ cn(alertRoot({ status, size: resolvedSize }), className) }
+          style={ alertStyle }
+          { ...alertRest }
+        >
+          { iconElement }
+          { children ? (
+            <div className={ alertContent({ inline }) }>
+              { title && <div className="font-semibold">{ title }</div> }
+              <div
+                className={ cn('inline-flex flex-wrap', descClassName) }
+                style={ Object.keys(descStyle).length > 0 ? descStyle : undefined }
+                { ...descRest }
+              >
+                { children }
+              </div>
+            </div>
+          ) : (
+            <div className="font-semibold flex-1">{ title }</div>
+          ) }
+          { endElement }
+          { closable && (
+            <CloseButton
+              className="relative self-start"
+              onClick={ handleClose }
+            />
+          ) }
+        </div>
+      </Skeleton>
+    );
+  },
+);

package/src/avatar.tsx

@@ -0,0 +1,174 @@
+'use client';
+
+import * as RadixAvatar from '@radix-ui/react-avatar';
+import * as React from 'react';
+
+import { cn } from './utils';
+
+type ImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
+
+// -- Size & variant mappings ------------------------------------------------
+
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type AvatarVariant = 'solid' | 'subtle' | 'outline';
+
+const SIZE_CLASSES: Record<AvatarSize, string> = {
+  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',
+};
+
+const VARIANT_CLASSES: Record<AvatarVariant, string> = {
+  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',
+};
+
+const DEFAULT_SIZE: AvatarSize = 'md';
+const DEFAULT_VARIANT: AvatarVariant = 'subtle';
+
+// -- Context for AvatarGroup ------------------------------------------------
+
+interface AvatarGroupContextValue {
+  readonly size?: AvatarSize;
+  readonly variant?: AvatarVariant;
+  readonly borderless?: boolean;
+}
+
+const AvatarGroupContext = React.createContext<AvatarGroupContextValue>({});
+
+function useAvatarGroupContext(): AvatarGroupContextValue {
+  return React.useContext(AvatarGroupContext);
+}
+
+// -- Avatar -----------------------------------------------------------------
+
+export 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;
+}
+
+export const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
+  function Avatar(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 (
+      <RadixAvatar.Root
+        ref={ 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 }
+      >
+        <AvatarFallback name={ name } icon={ icon }>
+          { fallback }
+        </AvatarFallback>
+        <RadixAvatar.Image
+          className="h-full w-full rounded-[inherit] object-cover"
+          src={ src }
+          srcSet={ srcSet }
+          loading={ loading }
+          alt={ name ?? '' }
+        />
+        { children }
+      </RadixAvatar.Root>
+    );
+  },
+);
+
+// -- AvatarFallback (internal) ----------------------------------------------
+
+interface AvatarFallbackInternalProps extends React.ComponentPropsWithoutRef<'span'> {
+  name?: string;
+  icon?: React.ReactElement;
+}
+
+const AvatarFallback = React.forwardRef<HTMLSpanElement, AvatarFallbackInternalProps>(
+  function AvatarFallback(props, ref) {
+    const { name, icon, children, className, ...rest } = props;
+    return (
+      <RadixAvatar.Fallback
+        ref={ ref }
+        className={ cn(
+          'flex h-full w-full items-center justify-center font-medium',
+          className,
+        ) }
+        { ...rest }
+      >
+        { children }
+        { name != null && children == null && <>{ getInitials(name) }</> }
+        { name == null && children == null && icon }
+      </RadixAvatar.Fallback>
+    );
+  },
+);
+
+// -- getInitials ------------------------------------------------------------
+
+function getInitials(name: string): string {
+  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);
+}
+
+// -- AvatarGroup ------------------------------------------------------------
+
+interface AvatarGroupProps extends React.ComponentPropsWithoutRef<'div'> {
+  size?: AvatarSize;
+  variant?: AvatarVariant;
+  borderless?: boolean;
+}
+
+export const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
+  function AvatarGroup(props, ref) {
+    const { size, variant, borderless, className, ...rest } = props;
+    const contextValue = React.useMemo(
+      () => ({ size, variant, borderless }),
+      [ size, variant, borderless ],
+    );
+    return (
+      <AvatarGroupContext.Provider value={ contextValue }>
+        <div
+          ref={ ref }
+          className={ cn('flex -space-x-3', className) }
+          { ...rest }
+        />
+      </AvatarGroupContext.Provider>
+    );
+  },
+);

package/src/badge.tsx

@@ -0,0 +1,158 @@
+import { cva } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
+import React from 'react';
+
+import { cn } from './utils';
+
+import { Skeleton } from './skeleton';
+import { Tooltip } from './tooltip';
+
+// Inline truncation tooltip (replaces explorer's TruncatedTextTooltip)
+function TruncatedTextTooltip({ label, children }: { readonly label: React.ReactNode; readonly children: React.ReactNode }) {
+  return (
+    <Tooltip content={ label } positioning={{ placement: 'top' }}>
+      { children }
+    </Tooltip>
+  );
+}
+
+type ColorPalette =
+  'gray' | 'green' | 'red' | 'purple' | 'orange' | 'blue' | 'yellow' |
+  'teal' | 'cyan' | 'pink' | 'purple_alt' | 'blue_alt' |
+  'bright_gray' | 'bright_green' | 'bright_red' | 'bright_blue' |
+  'bright_yellow' | 'bright_teal' | 'bright_cyan' | 'bright_orange' |
+  'bright_purple' | 'bright_pink';
+
+const 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',
+    },
+  },
+);
+
+const COLOR_PALETTE_CLASSES: Record<ColorPalette, string> = {
+  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',
+};
+
+export interface BadgeProps
+  extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>,
+  VariantProps<typeof badgeVariants> {
+  readonly loading?: boolean;
+  readonly startElement?: React.ReactNode;
+  readonly endElement?: React.ReactNode;
+  readonly truncated?: boolean;
+  readonly colorPalette?: ColorPalette;
+  // Legacy Chakra style-prop shims
+  readonly flexShrink?: number;
+  readonly gap?: number | string;
+  readonly ml?: number | string | Record<string, number>;
+  readonly mr?: number | string;
+}
+
+export const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
+  function Badge(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: React.CSSProperties = { ...styleProp };
+    if (_flexShrink !== undefined) shimStyle.flexShrink = _flexShrink;
+    if (_gap !== undefined) shimStyle.gap = typeof _gap === 'number' ? `${ _gap * 4 }px` : _gap;
+    if (_ml !== undefined) {
+      if (typeof _ml === 'object') {
+        const obj = _ml as Record<string, number>;
+        shimStyle.marginLeft = `${ (obj.base ?? obj.lg ?? 0) * 4 }px`;
+      } else {
+        shimStyle.marginLeft = typeof _ml === 'number' ? `${ _ml * 4 }px` : _ml;
+      }
+    }
+    if (_mr !== undefined) shimStyle.marginRight = typeof _mr === 'number' ? `${ _mr * 4 }px` : _mr;
+    const badgeStyle = Object.keys(shimStyle).length > 0 ? shimStyle : undefined;
+
+    const child = children ? (
+      <span className="overflow-hidden text-ellipsis">{ children }</span>
+    ) : null;
+
+    const childrenElement = truncated ? (
+      <TruncatedTextTooltip label={ children }>
+        { child }
+      </TruncatedTextTooltip>
+    ) : child;
+
+    const badgeElement = (
+      <span
+        ref={ ref as React.Ref<HTMLSpanElement> }
+        className={ cn(
+          badgeVariants({ variant, size }),
+          COLOR_PALETTE_CLASSES[colorPalette],
+          className,
+        ) }
+        style={ badgeStyle }
+        { ...rest }
+      >
+        { startElement }
+        { childrenElement }
+        { endElement }
+      </span>
+    );
+
+    if (loading) {
+      return (
+        <Skeleton loading={ loading } asChild>
+          { badgeElement }
+        </Skeleton>
+      );
+    }
+
+    return badgeElement;
+  },
+);