@luxfi/ui 5.5.3 → 5.6.0

package/src/image.tsx

@@ -0,0 +1,280 @@
+import React from 'react';
+
+import { cn } from './utils';
+
+import type { SkeletonProps } from './skeleton';
+import { Skeleton } from './skeleton';
+
+type CSSValue = string | number | undefined;
+type ResponsiveValue<T> = T | { base?: T; sm?: T; md?: T; lg?: T; xl?: T; _light?: T; _dark?: T };
+
+// Style props accepted for backward compatibility with Chakra callers.
+// These are converted to inline styles on the <img> element.
+interface StyleProps {
+  boxSize?: CSSValue;
+  borderRadius?: CSSValue;
+  width?: CSSValue;
+  w?: ResponsiveValue<CSSValue>;
+  height?: CSSValue;
+  h?: ResponsiveValue<CSSValue>;
+  maxW?: CSSValue;
+  maxH?: CSSValue;
+  minW?: CSSValue;
+  mr?: CSSValue;
+  mb?: CSSValue;
+  ml?: CSSValue;
+  mt?: CSSValue;
+  mx?: CSSValue;
+  my?: CSSValue;
+  marginRight?: CSSValue;
+  display?: CSSValue;
+  position?: CSSValue;
+  top?: CSSValue;
+  left?: ResponsiveValue<CSSValue>;
+  right?: CSSValue;
+  bottom?: CSSValue;
+  zIndex?: CSSValue;
+  objectFit?: CSSValue;
+  objectPosition?: CSSValue;
+  flexShrink?: CSSValue;
+  overflow?: CSSValue;
+  cursor?: CSSValue;
+}
+
+export interface ImageProps extends StyleProps {
+  readonly className?: string;
+  readonly src?: string;
+  readonly alt?: string;
+  readonly style?: React.CSSProperties;
+  readonly fallback?: React.ReactNode;
+  readonly onClick?: React.MouseEventHandler<HTMLImageElement>;
+  readonly onLoad?: React.ReactEventHandler<HTMLImageElement>;
+  readonly onError?: React.ReactEventHandler<HTMLImageElement>;
+  // for the case where the image dimensions are not known before the image is loaded
+  readonly skeletonWidth?: CSSValue;
+  readonly skeletonHeight?: CSSValue;
+}
+
+const CHAKRA_SPACING_SCALE: Record<string, string> = {
+  '0': '0px',
+  '1': '0.25rem',
+  '2': '0.5rem',
+  '3': '0.75rem',
+  '4': '1rem',
+  '5': '1.25rem',
+  '6': '1.5rem',
+  '7': '1.75rem',
+  '8': '2rem',
+  '10': '2.5rem',
+  '12': '3rem',
+  '14': '3.5rem',
+  '16': '4rem',
+  '20': '5rem',
+};
+
+const CHAKRA_RADII: Record<string, string> = {
+  none: '0',
+  sm: '0.125rem',
+  base: '0.25rem',
+  md: '0.375rem',
+  lg: '0.5rem',
+  xl: '0.75rem',
+  '2xl': '1rem',
+  '3xl': '1.5rem',
+  full: '9999px',
+};
+
+function resolveSize(value: CSSValue): string | undefined {
+  if (value === undefined) return undefined;
+  if (typeof value === 'number') return `${ value }px`;
+  if (CHAKRA_SPACING_SCALE[value]) return CHAKRA_SPACING_SCALE[value];
+  return value;
+}
+
+function resolveRadius(value: CSSValue): string | undefined {
+  if (value === undefined) return undefined;
+  if (typeof value === 'number') return `${ value }px`;
+  if (CHAKRA_RADII[value as string]) return CHAKRA_RADII[value as string];
+  return String(value);
+}
+
+function resolveSimple(value: CSSValue): string | number | undefined {
+  if (value === undefined) return undefined;
+  return typeof value === 'number' ? value : value;
+}
+
+// Extract the "base" value from a responsive value or plain value
+function baseValue<T>(val: ResponsiveValue<T> | undefined): T | undefined {
+  if (val === undefined) return undefined;
+  if (typeof val === 'object' && val !== null && ('base' in val || 'md' in val || 'lg' in val)) {
+    return (val as { base?: T }).base;
+  }
+  return val as T;
+}
+
+function buildStyle(props: StyleProps): React.CSSProperties {
+  const s: React.CSSProperties = {};
+
+  const size = resolveSize(props.boxSize);
+  if (size) {
+    s.width = size;
+    s.height = size;
+  }
+
+  const w = resolveSize(props.width ?? baseValue(props.w) as CSSValue);
+  if (w) s.width = w;
+
+  const hVal = baseValue(props.height ?? props.h);
+  const h = resolveSize(hVal);
+  if (h) s.height = h;
+
+  const maxW = resolveSize(props.maxW);
+  if (maxW) s.maxWidth = maxW;
+
+  const maxH = resolveSize(props.maxH);
+  if (maxH) s.maxHeight = maxH;
+
+  const minW = resolveSize(props.minW);
+  if (minW) s.minWidth = minW;
+
+  const br = resolveRadius(props.borderRadius);
+  if (br) s.borderRadius = br;
+
+  const mr = resolveSize(props.marginRight ?? props.mr);
+  if (mr) s.marginRight = mr;
+
+  const ml = resolveSize(props.ml);
+  if (ml) s.marginLeft = ml;
+
+  const mt = resolveSize(props.mt);
+  if (mt) s.marginTop = mt;
+
+  const mb = resolveSize(props.mb);
+  if (mb) s.marginBottom = mb;
+
+  const mx = resolveSize(props.mx);
+  if (mx) {
+    s.marginLeft = mx; s.marginRight = mx;
+  }
+
+  const my = resolveSize(props.my);
+  if (my) {
+    s.marginTop = my; s.marginBottom = my;
+  }
+
+  if (props.display !== undefined) s.display = String(props.display) as React.CSSProperties['display'];
+  if (props.position !== undefined) s.position = String(props.position) as React.CSSProperties['position'];
+
+  const top = resolveSimple(props.top);
+  if (top !== undefined) s.top = typeof top === 'number' ? `${ top }px` : top;
+
+  const leftVal = baseValue(props.left);
+  const left = resolveSimple(leftVal);
+  if (left !== undefined) s.left = typeof left === 'number' ? `${ left }px` : left;
+
+  const right = resolveSimple(props.right);
+  if (right !== undefined) s.right = typeof right === 'number' ? `${ right }px` : right;
+
+  const bottom = resolveSimple(props.bottom);
+  if (bottom !== undefined) s.bottom = typeof bottom === 'number' ? `${ bottom }px` : bottom;
+
+  if (props.zIndex !== undefined) s.zIndex = typeof props.zIndex === 'number' ? props.zIndex : Number(props.zIndex) || undefined;
+  if (props.objectFit !== undefined) s.objectFit = String(props.objectFit) as React.CSSProperties['objectFit'];
+  if (props.objectPosition !== undefined) s.objectPosition = String(props.objectPosition);
+  if (props.flexShrink !== undefined) s.flexShrink = typeof props.flexShrink === 'number' ? props.flexShrink : Number(props.flexShrink);
+  if (props.overflow !== undefined) s.overflow = String(props.overflow) as React.CSSProperties['overflow'];
+
+  return s;
+}
+
+// Keys that are style props and should NOT be forwarded to the <img> element
+const STYLE_PROP_KEYS = new Set<string>([
+  'boxSize', 'borderRadius', 'width', 'w', 'height', 'h',
+  'maxW', 'maxH', 'minW',
+  'mr', 'mb', 'ml', 'mt', 'mx', 'my', 'marginRight',
+  'display', 'position', 'top', 'left', 'right', 'bottom',
+  'zIndex', 'objectFit', 'objectPosition', 'flexShrink', 'overflow',
+]);
+
+function extractStyleProps(props: Record<string, unknown>): { styleProps: StyleProps; rest: Record<string, unknown> } {
+  const styleProps: Record<string, unknown> = {};
+  const rest: Record<string, unknown> = {};
+
+  for (const key in props) {
+    if (STYLE_PROP_KEYS.has(key)) {
+      styleProps[key] = props[key];
+    } else {
+      rest[key] = props[key];
+    }
+  }
+
+  return { styleProps: styleProps as StyleProps, rest };
+}
+
+export const Image = React.forwardRef<HTMLImageElement, ImageProps>(
+  function Image(props, ref) {
+    const { fallback, src, onLoad, onError, skeletonWidth, skeletonHeight, alt, className, style: styleProp, ...allRest } = props;
+
+    const { styleProps, rest: extraProps } = extractStyleProps(allRest as Record<string, unknown>);
+
+    const [ loading, setLoading ] = React.useState(true);
+    const [ error, setError ] = React.useState(false);
+
+    const handleLoadError = React.useCallback((event: React.SyntheticEvent<HTMLImageElement>) => {
+      setError(true);
+      setLoading(false);
+      onError?.(event);
+    }, [ onError ]);
+
+    const handleLoadSuccess = React.useCallback((event: React.SyntheticEvent<HTMLImageElement>) => {
+      setLoading(false);
+      onLoad?.(event);
+    }, [ onLoad ]);
+
+    // For fallback rendering, pass through all original style props so Chakra-based fallbacks still work
+    const passthroughProps = allRest;
+
+    if (!src && fallback) {
+      if (React.isValidElement(fallback)) {
+        return React.cloneElement(fallback, passthroughProps);
+      }
+      return fallback;
+    }
+
+    if (error) {
+      if (React.isValidElement(fallback)) {
+        return React.cloneElement(fallback, passthroughProps);
+      }
+      return fallback;
+    }
+
+    const skeletonProps = {
+      ...passthroughProps,
+      ...(skeletonWidth !== undefined && { width: skeletonWidth }),
+      ...(skeletonHeight !== undefined && { height: skeletonHeight }),
+    };
+
+    const computedStyle = buildStyle(styleProps);
+    const mergedStyle: React.CSSProperties = {
+      ...computedStyle,
+      ...styleProp,
+      display: loading ? 'none' : (computedStyle.display || styleProp?.display || 'block'),
+    };
+
+    return (
+      <>
+        { loading && <Skeleton loading { ...skeletonProps as Partial<SkeletonProps> }/> }
+        <img
+          ref={ ref }
+          src={ src }
+          alt={ alt || '' }
+          onError={ handleLoadError }
+          onLoad={ handleLoadSuccess }
+          className={ cn(className) }
+          style={ mergedStyle }
+          { ...extraProps }
+        />
+      </>
+    );
+  },
+);

package/src/index.ts

@@ -0,0 +1,192 @@
+export { cn } from './utils';
+
+export {
+  AccordionRoot,
+  AccordionItem,
+  AccordionItemTrigger,
+  AccordionItemContent,
+  useAccordion,
+} from './accordion';
+
+export { Alert } from './alert';
+export type { AlertProps } from './alert';
+
+export { Avatar, AvatarGroup } from './avatar';
+export type { AvatarProps } from './avatar';
+
+export { Badge } from './badge';
+export type { BadgeProps } from './badge';
+
+export {
+  Button,
+  ButtonGroup,
+  ButtonGroupRadio,
+  buttonVariants,
+} from './button';
+export type { ButtonProps, ButtonGroupProps, ButtonGroupRadioProps } from './button';
+
+export { Checkbox, CheckboxGroup } from './checkbox';
+export type { CheckboxProps, CheckboxGroupProps } from './checkbox';
+
+export { CloseButton } from './close-button';
+export type { CloseButtonProps } from './close-button';
+
+export { CollapsibleDetails, CollapsibleList } from './collapsible';
+
+export { ColorModeProvider, useColorMode, useColorModeValue } from './color-mode';
+export type { ColorMode } from './color-mode';
+
+export {
+  DialogRoot,
+  DialogContent,
+  DialogCloseTrigger,
+  DialogHeader,
+  DialogBody,
+  DialogFooter,
+  DialogBackdrop,
+  DialogTitle,
+  DialogDescription,
+  DialogTrigger,
+  DialogActionTrigger,
+} from './dialog';
+
+export {
+  DrawerRoot,
+  DrawerContent,
+  DrawerCloseTrigger,
+  DrawerTrigger,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerActionTrigger,
+} from './drawer';
+
+export { EmptyState } from './empty-state';
+export type { EmptyStateProps } from './empty-state';
+
+export { Field } from './field';
+export type { FieldProps } from './field';
+
+export { Heading } from './heading';
+export type { HeadingProps } from './heading';
+
+export { IconButton } from './icon-button';
+export type { IconButtonProps } from './icon-button';
+
+export { Image } from './image';
+export type { ImageProps } from './image';
+
+export { Input } from './input';
+export type { InputProps } from './input';
+
+export { InputGroup } from './input-group';
+export type { InputGroupProps } from './input-group';
+
+export { Link, LinkBox, LinkOverlay, LinkExternalIcon } from './link';
+export type { LinkProps } from './link';
+
+export {
+  MenuRoot,
+  MenuTrigger,
+  MenuContent,
+  MenuItem,
+  MenuItemText,
+  MenuSeparator,
+  MenuItemGroup,
+  MenuCheckboxItem,
+  MenuRadioItemGroup,
+  MenuRadioItem,
+  MenuTriggerItem,
+  MenuArrow,
+} from './menu';
+
+export { PinInput } from './pin-input';
+
+export {
+  PopoverRoot,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverArrow,
+  PopoverCloseTrigger,
+  PopoverCloseTriggerWrapper,
+  PopoverBody,
+  PopoverHeader,
+  PopoverFooter,
+  PopoverTitle,
+  PopoverDescription,
+} from './popover';
+
+export { Progress } from './progress';
+
+export {
+  ProgressCircleRoot,
+  ProgressCircleRing,
+  ProgressCircleValueText,
+} from './progress-circle';
+
+export { Radio, RadioGroup } from './radio';
+
+export { Rating } from './rating';
+
+export {
+  SelectRoot,
+  SelectControl,
+  SelectContent,
+  SelectItem,
+  SelectValueText,
+  SelectItemGroup,
+  SelectLabel,
+  SelectItemText,
+  Select,
+  SelectAsync,
+  SelectClearTrigger,
+  createListCollection,
+} from './select';
+export type { SelectOption, ListCollection, SelectRootProps, SelectProps, SelectAsyncProps } from './select';
+
+export { Separator } from './separator';
+export type { SeparatorProps } from './separator';
+
+export { Skeleton, SkeletonCircle, SkeletonText } from './skeleton';
+export type { SkeletonProps, SkeletonCircleProps, SkeletonTextProps } from './skeleton';
+
+export { Slider } from './slider';
+
+export { Switch } from './switch';
+
+export {
+  TableRoot,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableCell,
+  TableColumnHeader,
+  TableColumnHeaderSortable,
+  TableCaption,
+  TableFooter,
+  TableScrollWrapper,
+  TableHeaderSticky,
+} from './table';
+
+export {
+  TabsRoot,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  TabsCounter,
+} from './tabs';
+
+export { Tag } from './tag';
+export type { TagProps } from './tag';
+
+export { Textarea } from './textarea';
+export type { TextareaProps } from './textarea';
+
+export { Toaster, toaster } from './toaster';
+
+export { Tooltip } from './tooltip';
+export type { TooltipProps } from './tooltip';
+
+export { Provider } from './provider';

package/src/input-group.tsx

@@ -0,0 +1,159 @@
+import { debounce } from 'es-toolkit';
+import * as React from 'react';
+
+import { cn } from './utils';
+
+import type { InputProps } from './input';
+
+function getComponentDisplayName(type: string | React.JSXElementConstructor<unknown>): string | undefined {
+  if (typeof type === 'string') return undefined;
+  if ('displayName' in type) return type.displayName as string;
+  return undefined;
+}
+
+export interface InputElementProps extends React.HTMLAttributes<HTMLDivElement> {
+  readonly placement?: 'start' | 'end';
+}
+
+export interface InputGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  readonly startElementProps?: InputElementProps;
+  readonly endElementProps?: InputElementProps;
+  readonly startElement?: React.ReactNode;
+  readonly endElement?: React.ReactNode;
+  readonly children: React.ReactElement<InputElementProps>;
+  readonly startOffset?: string | number;
+  readonly endOffset?: string | number;
+}
+
+export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
+  function InputGroup(props, ref) {
+    const {
+      startElement,
+      startElementProps,
+      endElement,
+      endElementProps,
+      children,
+      startOffset,
+      endOffset,
+      className,
+      ...rest
+    } = props;
+
+    const startElementRef = React.useRef<HTMLDivElement>(null);
+    const endElementRef = React.useRef<HTMLDivElement>(null);
+    const groupRef = React.useRef<HTMLDivElement>(null);
+
+    const [ inlinePaddings, setInlinePaddings ] = React.useState<{ start?: number; end?: number }>();
+
+    const calculateInlinePaddings = React.useCallback(() => {
+      const startWidth = startElementRef.current?.getBoundingClientRect().width ?? 0;
+      const endWidth = endElementRef.current?.getBoundingClientRect().width ?? 0;
+
+      setInlinePaddings({
+        start: startWidth,
+        end: endWidth,
+      });
+    }, []);
+
+    React.useEffect(() => {
+      if (!groupRef.current) return;
+
+      let timeoutId: ReturnType<typeof setTimeout>;
+
+      const intersectionObserver = new IntersectionObserver(
+        (entries) => {
+          const entry = entries[0];
+          if (entry && entry.isIntersecting) {
+            // Small delay to ensure rendering is complete
+            timeoutId = setTimeout(calculateInlinePaddings, 50);
+          }
+        },
+        { threshold: 0.01 },
+      );
+
+      intersectionObserver.observe(groupRef.current);
+
+      return () => {
+        intersectionObserver.disconnect();
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+        }
+      };
+    }, [ calculateInlinePaddings ]);
+
+    React.useEffect(() => {
+      calculateInlinePaddings();
+
+      const resizeHandler = debounce(calculateInlinePaddings, 300);
+      const resizeObserver = new ResizeObserver(resizeHandler);
+
+      if (groupRef.current) {
+        resizeObserver.observe(groupRef.current);
+      }
+
+      return function cleanup() {
+        resizeObserver.disconnect();
+      };
+    }, [ calculateInlinePaddings ]);
+
+    // Combine refs for the wrapper div
+    const combinedRef = React.useCallback((node: HTMLDivElement) => {
+      groupRef.current = node;
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    }, [ ref ]);
+
+    const { className: startClassName, ...startRest } = startElementProps ?? {};
+    const { className: endClassName, ...endRest } = endElementProps ?? {};
+
+    return (
+      <div
+        ref={ combinedRef }
+        className={ cn('relative flex w-full items-center', className) }
+        { ...rest }
+      >
+        { startElement && (
+          <div
+            ref={ startElementRef }
+            className={ cn(
+              'pointer-events-none absolute inset-y-0 left-0 z-[1] flex items-center text-[var(--chakra-colors-input-element)]',
+              startClassName,
+            ) }
+            { ...startRest }
+          >
+            { startElement }
+          </div>
+        ) }
+        { React.Children.map(children, (child: React.ReactElement<InputProps>) => {
+          if (getComponentDisplayName(child.type) !== 'FieldInput') {
+            return child;
+          }
+          return React.cloneElement(child, {
+            ...(startElement && { ps: startOffset ?? (inlinePaddings?.start ? `${ inlinePaddings.start }px` : undefined) }),
+            ...(endElement && { pe: endOffset ?? (inlinePaddings?.end ? `${ inlinePaddings.end }px` : undefined) }),
+            // hide input value and placeholder for the first render
+            value: inlinePaddings ? child.props.value : undefined,
+            placeholder: inlinePaddings ? child.props.placeholder : undefined,
+          });
+        }) }
+        { endElement && (
+          <div
+            ref={ endElementRef }
+            className={ cn(
+              'pointer-events-none absolute inset-y-0 right-0 z-[1] flex items-center text-[var(--chakra-colors-input-element)]',
+              endClassName,
+            ) }
+            { ...endRest }
+          >
+            { endElement }
+          </div>
+        ) }
+      </div>
+    );
+  },
+);
+
+InputGroup.displayName = 'InputGroup';

package/src/input.tsx

@@ -0,0 +1,60 @@
+import { cva } from 'class-variance-authority';
+import React from 'react';
+
+import { cn } from './utils';
+
+const inputVariants = cva(
+  [
+    'w-full appearance-none outline-none transition-colors',
+    'bg-[var(--color-input-bg)] text-[var(--color-input-fg)] border-[var(--color-input-border)]',
+    'placeholder:text-[var(--color-input-placeholder,theme(colors.gray.400))]',
+    'hover:border-[var(--color-input-border-hover,theme(colors.gray.400))]',
+    'focus:border-[var(--color-input-border-focus,theme(colors.blue.500))]',
+    'focus:placeholder:text-[var(--color-input-placeholder-focus,theme(colors.gray.300))]',
+    'disabled:opacity-40 disabled:cursor-not-allowed',
+    'read-only:opacity-70',
+    'data-[invalid]:border-[var(--color-input-border-invalid,theme(colors.red.500))]',
+  ].join(' '),
+  {
+    variants: {
+      size: {
+        xs: 'h-6 px-2 text-xs rounded',
+        sm: 'h-8 px-3 text-sm rounded-md',
+        md: 'h-10 px-4 text-base rounded-md',
+        lg: 'h-12 px-4 text-lg rounded-lg',
+        '2xl': 'h-14 px-4 text-xl rounded-lg',
+      },
+      variant: {
+        outline: 'border border-solid',
+        filled: 'border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]',
+        unstyled: 'border-0 bg-transparent p-0 h-auto',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+      variant: 'outline',
+    },
+  },
+);
+
+type InputSize = 'xs' | 'sm' | 'md' | 'lg' | '2xl';
+type InputVariant = 'outline' | 'filled' | 'unstyled';
+
+export interface InputProps extends Omit<React.ComponentPropsWithRef<'input'>, 'size'> {
+  readonly size?: InputSize;
+  readonly variant?: InputVariant;
+}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ size, variant, className, ...rest }, ref) => {
+    return (
+      <input
+        ref={ ref }
+        className={ cn(inputVariants({ size, variant }), className) }
+        { ...rest }
+      />
+    );
+  },
+);
+
+Input.displayName = 'Input';