@luxfi/ui 5.6.0 → 6.0.0

package/src/accordion.tsx

@@ -1,285 +0,0 @@
-import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import * as React from 'react';
-
-import { cn } from './utils';
-
-// Inline chevron icon (east-mini arrow)
-const IndicatorIcon = ({ className }: { readonly className?: string }) => (
-  <svg className={ className } viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M7.5 15L12.5 10L7.5 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-  </svg>
-);
-
-// ---------------------------------------------------------------------------
-// AccordionRoot
-// ---------------------------------------------------------------------------
-
-interface AccordionRootProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'defaultValue' | 'dir'> {
-
-  /** Open multiple items simultaneously. Defaults to true. */
-  readonly multiple?: boolean;
-
-  /** Controlled open items (array of `value` strings). */
-  readonly value?: Array<string>;
-
-  /** Uncontrolled initial open items. */
-  readonly defaultValue?: Array<string>;
-
-  /**
-   * Called when open items change.
-   * Wraps the value in `{ value }` to stay compatible with the Chakra callback shape
-   * that consumers already rely on.
-   */
-  readonly onValueChange?: (details: { value: Array<string> }) => void;
-  readonly variant?: 'outline' | 'faq';
-  readonly size?: 'sm' | 'md';
-
-  /** Accepted for compatibility; not applied visually. */
-  readonly noAnimation?: boolean;
-
-  /** Accepted for compatibility; Radix defers rendering internally. */
-  readonly lazyMount?: boolean;
-  readonly children?: React.ReactNode;
-  // Legacy Chakra style-prop shims
-  readonly position?: string;
-  readonly w?: string;
-  readonly bgColor?: string | Record<string, string>;
-  readonly borderRadius?: string;
-}
-
-export const AccordionRoot = React.forwardRef<HTMLDivElement, AccordionRootProps>(
-  function AccordionRoot(props, ref) {
-    const {
-      multiple: _multiple,
-      value,
-      defaultValue,
-      onValueChange,
-      variant,
-      size,
-      noAnimation: _noAnimation,
-      lazyMount: _lazyMount,
-      className,
-      children,
-      position: _position,
-      w: _w,
-      bgColor: _bgColor,
-      borderRadius: _borderRadius,
-      ...rest
-    } = props;
-
-    // Radix requires `type` discriminant.  We default to "multiple" to match
-    // the original Chakra wrapper behavior.
-    const handleValueChange = React.useCallback(
-      (next: Array<string>) => {
-        onValueChange?.({ value: next });
-      },
-      [ onValueChange ],
-    );
-
-    return (
-      <AccordionPrimitive.Root
-        ref={ ref }
-        type="multiple"
-        value={ value }
-        defaultValue={ defaultValue }
-        onValueChange={ handleValueChange }
-        className={ cn(
-          'w-full',
-          variant === 'faq' && 'accordion-faq',
-          size === 'sm' && 'accordion-sm',
-          className,
-        ) }
-        data-variant={ variant }
-        data-size={ size }
-        { ...rest }
-      >
-        { children }
-      </AccordionPrimitive.Root>
-    );
-  },
-);
-
-// ---------------------------------------------------------------------------
-// AccordionItem
-// ---------------------------------------------------------------------------
-
-interface AccordionItemProps extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> {
-  // Legacy Chakra style-prop shims
-  as?: string;
-  _first?: Record<string, unknown>;
-  _last?: Record<string, unknown>;
-  display?: string;
-}
-
-export const AccordionItem = React.forwardRef<HTMLDivElement, AccordionItemProps>(
-  function AccordionItem(props, ref) {
-    const { className, as: _as, _first, _last, display: _display, ...rest } = props;
-    return (
-      <AccordionPrimitive.Item
-        ref={ ref }
-        className={ cn(
-          'border-b border-[var(--color-border-divider)]',
-          className,
-        ) }
-        { ...rest }
-      />
-    );
-  },
-);
-
-// ---------------------------------------------------------------------------
-// AccordionItemTrigger
-// ---------------------------------------------------------------------------
-
-interface AccordionItemTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>, 'dir'> {
-  readonly indicatorPlacement?: 'start' | 'end';
-  readonly noIndicator?: boolean;
-  readonly variant?: 'outline' | 'faq';
-  // Legacy Chakra style-prop shims
-  px?: number | string;
-  py?: number | string;
-  _hover?: Record<string, string>;
-  wordBreak?: string;
-  textAlign?: string;
-  cursor?: string;
-  display?: string;
-  alignItems?: string;
-  columnGap?: number | string;
-}
-
-export const AccordionItemTrigger = React.forwardRef<
-  HTMLButtonElement,
-  AccordionItemTriggerProps
->(function AccordionItemTrigger(props, ref) {
-  const {
-    children, indicatorPlacement: indicatorPlacementProp, variant, noIndicator, className,
-    // Strip Chakra style props
-    px: _px, py: _py, _hover, wordBreak: _wordBreak, textAlign: _textAlign,
-    cursor: _cursor, display: _display, alignItems: _alignItems, columnGap: _columnGap,
-    ...rest
-  } = props;
-
-  const indicatorPlacement = variant === 'faq' ? 'start' : (indicatorPlacementProp ?? 'end');
-
-  const indicator = variant === 'faq' ? (
-    <span
-      className={ cn(
-        'relative inline-block h-3 w-3 shrink-0',
-        // horizontal bar (always visible)
-        'before:absolute before:left-0 before:top-1/2 before:block before:h-[2px] before:w-full before:-translate-y-1/2 before:rounded-[2px] before:bg-current',
-        // vertical bar (rotates to 0 when open)
-        'after:absolute after:left-1/2 after:top-0 after:block after:h-full after:w-[2px]',
-        'after:-translate-x-1/2 after:rounded-[2px] after:bg-current',
-        'after:transition-transform after:duration-200 after:ease-in-out',
-        // When parent trigger has data-state="open", rotate vertical bar
-        'group-data-[state=open]/trigger:after:rotate-90',
-      ) }
-    />
-  ) : (
-    <span
-      className={ cn(
-        'inline-flex shrink-0 transition-transform duration-200',
-        'rotate-180',
-        'group-data-[state=open]/trigger:rotate-[270deg]',
-      ) }
-    >
-      <IndicatorIcon className="h-5 w-5"/>
-    </span>
-  );
-
-  return (
-    <AccordionPrimitive.Header asChild>
-      <div>
-        <AccordionPrimitive.Trigger
-          ref={ ref }
-          className={ cn(
-            'group/trigger flex w-full cursor-pointer items-center gap-2 py-3 text-left text-[var(--color-text-primary)]',
-            'hover:text-[var(--color-hover)]',
-            'focus-visible:outline-none',
-            className,
-          ) }
-          { ...rest }
-        >
-          { indicatorPlacement === 'start' && !noIndicator && indicator }
-          { children }
-          { indicatorPlacement === 'end' && !noIndicator && indicator }
-        </AccordionPrimitive.Trigger>
-      </div>
-    </AccordionPrimitive.Header>
-  );
-});
-
-// ---------------------------------------------------------------------------
-// AccordionItemContent
-// ---------------------------------------------------------------------------
-
-export interface AccordionItemContentProps extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> {
-  // Legacy Chakra style-prop shims
-  pb?: number | string;
-  pr?: number | string;
-  pl?: string;
-  w?: string;
-  display?: string;
-  flexDir?: string;
-  rowGap?: number | string;
-}
-
-export const AccordionItemContent = React.forwardRef<
-  HTMLDivElement,
-  AccordionItemContentProps
->(function AccordionItemContent(props, ref) {
-  const { className, children, pb: _pb, pr: _pr, pl: _pl, w: _w, display: _display, flexDir: _flexDir, rowGap: _rowGap, ...rest } = props;
-  return (
-    <AccordionPrimitive.Content
-      ref={ ref }
-      className={ cn(
-        'overflow-hidden text-[var(--color-text-primary)]',
-        'data-[state=open]:animate-accordion-down',
-        'data-[state=closed]:animate-accordion-up',
-        className,
-      ) }
-      { ...rest }
-    >
-      <div className="pb-3">
-        { children }
-      </div>
-    </AccordionPrimitive.Content>
-  );
-});
-
-// ---------------------------------------------------------------------------
-// useAccordion
-// ---------------------------------------------------------------------------
-
-export function useAccordion(items: Array<{ id: string }>) {
-  const [ value, setValue ] = React.useState<Array<string>>([]);
-
-  const onValueChange = React.useCallback(({ value }: { value: Array<string> }) => {
-    setValue(value);
-  }, []);
-
-  const scrollToItemFromUrl = React.useCallback(() => {
-    const hash = window.location.hash.replace('#', '');
-
-    if (!hash) {
-      return;
-    }
-
-    const itemToScroll = items.find((item) => item.id === hash);
-    if (itemToScroll) {
-      const el = document.getElementById(itemToScroll.id);
-      if (el) {
-        el.scrollIntoView({ behavior: 'smooth', block: 'start' });
-      }
-      setValue([ itemToScroll.id ]);
-    }
-  }, [ items ]);
-
-  return React.useMemo(() => {
-    return {
-      value,
-      onValueChange,
-      scrollToItemFromUrl,
-    };
-  }, [ value, onValueChange, scrollToItemFromUrl ]);
-}

package/src/alert.tsx

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

@@ -1,174 +0,0 @@
-'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>
-    );
-  },
-);