@luxfi/ui 5.6.0 → 6.1.0

package/src/image.tsx

@@ -1,280 +0,0 @@
-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

@@ -1,192 +0,0 @@
-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

@@ -1,159 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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';