@luxfi/ui 6.1.3 → 7.0.0

package/src/accordion.tsx

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

@@ -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>
+    );
+  },
+);