@luxfi/ui 5.5.2 → 5.6.0

package/src/menu.tsx

@@ -0,0 +1,471 @@
+'use client';
+
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import * as React from 'react';
+import { LuCheck, LuChevronRight } from 'react-icons/lu';
+
+import { cn } from './utils';
+
+// --- Utility: map Chakra-style placement string to Radix side + align ---
+
+type Side = 'top' | 'right' | 'bottom' | 'left';
+type Align = 'start' | 'center' | 'end';
+
+interface PlacementMapping {
+  readonly side: Side;
+  readonly align: Align;
+}
+
+function parsePlacement(placement: string | undefined): PlacementMapping {
+  if (!placement) {
+    return { side: 'bottom', align: 'start' };
+  }
+
+  const parts = placement.split('-');
+  const side = (parts[0] as Side) ?? 'bottom';
+  const alignPart = parts[1];
+
+  let align: Align = 'center';
+  if (alignPart === 'start') {
+    align = 'start';
+  } else if (alignPart === 'end') {
+    align = 'end';
+  }
+
+  return { side, align };
+}
+
+// --- Positioning context (mirrors popover.tsx pattern) ---
+
+interface Positioning {
+  readonly placement?: string;
+  readonly offset?: {
+    readonly mainAxis?: number;
+    readonly crossAxis?: number;
+  };
+}
+
+interface MenuPositioning {
+  readonly side: Side;
+  readonly align: Align;
+  readonly sideOffset: number;
+  readonly alignOffset: number;
+}
+
+const PositioningContext = React.createContext<MenuPositioning>({
+  side: 'bottom',
+  align: 'start',
+  sideOffset: 4,
+  alignOffset: 0,
+});
+
+// --- MenuRoot ---
+
+export interface MenuRootProps {
+  readonly children?: React.ReactNode;
+  readonly open?: boolean;
+  readonly defaultOpen?: boolean;
+  readonly onOpenChange?: (details: { open: boolean }) => void;
+  readonly positioning?: Positioning;
+  readonly lazyMount?: boolean;
+  readonly unmountOnExit?: boolean;
+  readonly modal?: boolean;
+}
+
+export const MenuRoot = (props: MenuRootProps): React.ReactElement => {
+  const {
+    children,
+    open,
+    defaultOpen,
+    onOpenChange,
+    positioning,
+    modal = true,
+    // lazyMount / unmountOnExit have no direct Radix equivalent; Radix handles
+    // mount/unmount automatically.
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    lazyMount: _lazyMount,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    unmountOnExit: _unmountOnExit,
+  } = props;
+
+  const mergedPositioning: Positioning = {
+    placement: 'bottom-start',
+    ...positioning,
+    offset: {
+      mainAxis: 4,
+      ...positioning?.offset,
+    },
+  };
+
+  const { side, align } = parsePlacement(mergedPositioning.placement);
+
+  const positioningValue = React.useMemo<MenuPositioning>(() => ({
+    side,
+    align,
+    sideOffset: mergedPositioning.offset?.mainAxis ?? 4,
+    alignOffset: mergedPositioning.offset?.crossAxis ?? 0,
+  }), [ side, align, mergedPositioning.offset?.mainAxis, mergedPositioning.offset?.crossAxis ]);
+
+  const handleOpenChange = React.useCallback((isOpen: boolean) => {
+    onOpenChange?.({ open: isOpen });
+  }, [ onOpenChange ]);
+
+  return (
+    <PositioningContext.Provider value={ positioningValue }>
+      <DropdownMenu.Root
+        open={ open }
+        defaultOpen={ defaultOpen }
+        onOpenChange={ handleOpenChange }
+        modal={ modal }
+      >
+        { children }
+      </DropdownMenu.Root>
+    </PositioningContext.Provider>
+  );
+};
+
+// --- MenuTrigger ---
+
+export interface MenuTriggerProps extends React.ComponentPropsWithoutRef<'button'> {
+  readonly asChild?: boolean;
+}
+
+export const MenuTrigger = React.forwardRef<
+  HTMLButtonElement,
+  MenuTriggerProps
+>(function MenuTrigger(props, ref) {
+  const { asChild = false, ...rest } = props;
+  return <DropdownMenu.Trigger asChild={ asChild } ref={ ref } { ...rest }/>;
+});
+
+// --- MenuContent ---
+
+export interface MenuContentProps extends React.ComponentPropsWithoutRef<'div'> {
+  readonly portalled?: boolean;
+  readonly portalRef?: React.RefObject<HTMLElement>;
+
+  /** Legacy Chakra zIndex prop - mapped to inline style */
+  readonly zIndex?: string | number;
+
+  /** Legacy Chakra minW prop - mapped to inline style */
+  readonly minW?: string | number;
+}
+
+export const MenuContent = React.forwardRef<
+  HTMLDivElement,
+  MenuContentProps
+>(function MenuContent(props, ref) {
+  const { portalled = true, portalRef, className, zIndex, minW, style, ...rest } = props;
+  const positioning = React.useContext(PositioningContext);
+
+  const mergedStyle: React.CSSProperties = {
+    ...style,
+    ...(zIndex !== undefined ? { zIndex: typeof zIndex === 'string' ? `var(--z-index-${ zIndex }, ${ zIndex })` : zIndex } : {}),
+    ...(minW !== undefined ? { minWidth: minW } : {}),
+  };
+
+  const content = (
+    <DropdownMenu.Content
+      ref={ ref }
+      side={ positioning.side }
+      align={ positioning.align }
+      sideOffset={ positioning.sideOffset }
+      alignOffset={ positioning.alignOffset }
+      className={ cn(
+        'z-50 min-w-[8rem] overflow-hidden rounded-lg p-1',
+        'border border-[var(--color-popover-border,var(--color-border-divider))]',
+        'bg-[var(--color-popover-bg,var(--color-dialog-bg))]',
+        'shadow-[0_4px_12px_var(--color-popover-shadow)]',
+        'outline-none',
+        'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+        'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+        'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',
+        'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className,
+      ) }
+      style={ Object.keys(mergedStyle).length > 0 ? mergedStyle : undefined }
+      { ...rest }
+    />
+  );
+
+  if (!portalled) {
+    return content;
+  }
+
+  return (
+    <DropdownMenu.Portal container={ portalRef?.current ?? undefined }>
+      { content }
+    </DropdownMenu.Portal>
+  );
+});
+
+// --- MenuItem ---
+
+export interface MenuItemProps extends React.ComponentPropsWithoutRef<'div'> {
+
+  /** Informational value identifier (not used by Radix but kept for API compat) */
+  readonly value?: string;
+  readonly disabled?: boolean;
+  readonly asChild?: boolean;
+
+  /** Chakra compat - accepted but not used by Radix */
+  readonly closeOnSelect?: boolean;
+}
+
+export const MenuItem = React.forwardRef<
+  HTMLDivElement,
+  MenuItemProps
+>(function MenuItem(props, ref) {
+  const { className, value: _value, asChild, closeOnSelect: _closeOnSelect, disabled, children, onClick, ...rest } = props;
+  return (
+    <DropdownMenu.Item
+      ref={ ref }
+      asChild={ asChild }
+      disabled={ disabled }
+      onClick={ onClick }
+      className={ cn(
+        'relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm',
+        'outline-none transition-colors',
+        'text-[var(--color-text-primary,inherit)]',
+        'data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]',
+        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        className,
+      ) }
+      { ...(rest as React.ComponentPropsWithoutRef<typeof DropdownMenu.Item>) }
+    >
+      { children }
+    </DropdownMenu.Item>
+  );
+});
+
+// --- MenuItemText ---
+
+export interface MenuItemTextProps extends React.ComponentPropsWithoutRef<'span'> {}
+
+export const MenuItemText = React.forwardRef<
+  HTMLSpanElement,
+  MenuItemTextProps
+>(function MenuItemText(props, ref) {
+  const { className, ...rest } = props;
+  return <span ref={ ref } className={ cn('flex-1', className) } { ...rest }/>;
+});
+
+// --- MenuItemCommand ---
+
+export interface MenuItemCommandProps extends React.ComponentPropsWithoutRef<'span'> {}
+
+export const MenuItemCommand = React.forwardRef<
+  HTMLSpanElement,
+  MenuItemCommandProps
+>(function MenuItemCommand(props, ref) {
+  const { className, ...rest } = props;
+  return (
+    <span
+      ref={ ref }
+      className={ cn('ml-auto text-xs tracking-widest opacity-60', className) }
+      { ...rest }
+    />
+  );
+});
+
+// --- MenuSeparator ---
+
+export interface MenuSeparatorProps extends React.ComponentPropsWithoutRef<'div'> {}
+
+export const MenuSeparator = React.forwardRef<
+  HTMLDivElement,
+  MenuSeparatorProps
+>(function MenuSeparator(props, ref) {
+  const { className, ...rest } = props;
+  return (
+    <DropdownMenu.Separator
+      ref={ ref }
+      className={ cn('-mx-1 my-1 h-px bg-[var(--color-border-divider)]', className) }
+      { ...rest }
+    />
+  );
+});
+
+// --- MenuItemGroup ---
+
+export interface MenuItemGroupProps extends React.ComponentPropsWithoutRef<'div'> {
+  readonly title?: string;
+}
+
+export const MenuItemGroup = React.forwardRef<
+  HTMLDivElement,
+  MenuItemGroupProps
+>(function MenuItemGroup(props, ref) {
+  const { title, children, className, ...rest } = props;
+  return (
+    <DropdownMenu.Group ref={ ref } className={ className } { ...rest }>
+      { title && (
+        <DropdownMenu.Label className="px-2 py-1.5 text-xs font-semibold select-none opacity-60">
+          { title }
+        </DropdownMenu.Label>
+      ) }
+      { children }
+    </DropdownMenu.Group>
+  );
+});
+
+// --- MenuArrow ---
+
+export interface MenuArrowProps extends React.ComponentPropsWithoutRef<'svg'> {}
+
+export const MenuArrow = React.forwardRef<
+  SVGSVGElement,
+  MenuArrowProps
+>(function MenuArrow(props, ref) {
+  const { className, ...rest } = props;
+  return (
+    <DropdownMenu.Arrow
+      ref={ ref }
+      className={ cn('fill-[var(--color-popover-bg,var(--color-dialog-bg))]', className) }
+      { ...rest }
+    />
+  );
+});
+
+// --- MenuCheckboxItem ---
+
+export interface MenuCheckboxItemProps extends React.ComponentPropsWithoutRef<'div'> {
+  readonly checked?: boolean;
+  readonly onCheckedChange?: (checked: boolean) => void;
+}
+
+export const MenuCheckboxItem = React.forwardRef<
+  HTMLDivElement,
+  MenuCheckboxItemProps
+>(function MenuCheckboxItem(props, ref) {
+  const { className, children, checked, onCheckedChange, onClick, ...rest } = props;
+  return (
+    <DropdownMenu.CheckboxItem
+      ref={ ref }
+      checked={ checked }
+      onCheckedChange={ onCheckedChange }
+      onClick={ onClick }
+      className={ cn(
+        'relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm',
+        'outline-none transition-colors',
+        'data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]',
+        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        className,
+      ) }
+      { ...(rest as React.ComponentPropsWithoutRef<typeof DropdownMenu.CheckboxItem>) }
+    >
+      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <DropdownMenu.ItemIndicator>
+          <LuCheck className="h-4 w-4"/>
+        </DropdownMenu.ItemIndicator>
+      </span>
+      { children }
+    </DropdownMenu.CheckboxItem>
+  );
+});
+
+// --- MenuRadioItemGroup ---
+
+export interface MenuRadioItemGroupProps extends React.ComponentPropsWithoutRef<'div'> {
+  readonly value?: string;
+  readonly onValueChange?: (value: string) => void;
+}
+
+export const MenuRadioItemGroup = React.forwardRef<
+  HTMLDivElement,
+  MenuRadioItemGroupProps
+>(function MenuRadioItemGroup(props, ref) {
+  const { value, onValueChange, ...rest } = props;
+  return (
+    <DropdownMenu.RadioGroup
+      ref={ ref }
+      value={ value }
+      onValueChange={ onValueChange }
+      { ...rest }
+    />
+  );
+});
+
+// --- MenuRadioItem ---
+
+export interface MenuRadioItemProps extends React.ComponentPropsWithoutRef<'div'> {
+  readonly value: string;
+}
+
+export const MenuRadioItem = React.forwardRef<
+  HTMLDivElement,
+  MenuRadioItemProps
+>(function MenuRadioItem(props, ref) {
+  const { className, children, value, onClick, ...rest } = props;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { value: _v, ...radixRest } = rest as Record<string, unknown>;
+  return (
+    <DropdownMenu.RadioItem
+      ref={ ref }
+      value={ value }
+      onClick={ onClick }
+      className={ cn(
+        'relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm',
+        'outline-none transition-colors',
+        'data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]',
+        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        className,
+      ) }
+    >
+      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <DropdownMenu.ItemIndicator>
+          <LuCheck className="h-4 w-4"/>
+        </DropdownMenu.ItemIndicator>
+      </span>
+      <span>{ children }</span>
+    </DropdownMenu.RadioItem>
+  );
+});
+
+// --- MenuContextTrigger ---
+// Radix DropdownMenu does not have a native context-menu trigger.
+// For API compatibility, export a no-op wrapper. Real context-menu
+// support would require @radix-ui/react-context-menu.
+
+export interface MenuContextTriggerProps extends React.ComponentPropsWithoutRef<'span'> {
+  readonly asChild?: boolean;
+}
+
+export const MenuContextTrigger = React.forwardRef<
+  HTMLSpanElement,
+  MenuContextTriggerProps
+>(function MenuContextTrigger(props, ref) {
+  const { asChild: _asChild, ...rest } = props;
+  return <span ref={ ref } { ...rest }/>;
+});
+
+// --- MenuTriggerItem ---
+
+export interface MenuTriggerItemProps extends React.ComponentPropsWithoutRef<'div'> {
+  readonly startIcon?: React.ReactNode;
+}
+
+export const MenuTriggerItem = React.forwardRef<
+  HTMLDivElement,
+  MenuTriggerItemProps
+>(function MenuTriggerItem(props, ref) {
+  const { startIcon, children, className, ...rest } = props;
+  return (
+    <DropdownMenu.Sub>
+      <DropdownMenu.SubTrigger
+        ref={ ref }
+        className={ cn(
+          'relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm',
+          'outline-none transition-colors',
+          'data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]',
+          className,
+        ) }
+        { ...rest }
+      >
+        { startIcon }
+        <span className="flex-1">{ children }</span>
+        <LuChevronRight className="h-4 w-4"/>
+      </DropdownMenu.SubTrigger>
+    </DropdownMenu.Sub>
+  );
+});

package/src/pin-input.tsx

@@ -0,0 +1,187 @@
+import * as React from 'react';
+
+import { cn } from './utils';
+
+export interface PinInputProps {
+  readonly rootRef?: React.Ref<HTMLDivElement>;
+  readonly count?: number;
+  readonly inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+  readonly attached?: boolean;
+  readonly placeholder?: string;
+  readonly value?: Array<string>;
+  readonly onValueChange?: (details: { value: Array<string> }) => void;
+  readonly onValueComplete?: (details: { value: Array<string> }) => void;
+  readonly disabled?: boolean;
+  readonly invalid?: boolean;
+  readonly otp?: boolean;
+  readonly name?: string;
+  readonly bgColor?: string;
+  readonly className?: string;
+}
+
+const INPUT_BASE = [
+  'w-10 h-10',
+  'text-center text-sm font-medium',
+  'border-2 rounded-md',
+  'outline-none appearance-none',
+  'bg-[var(--color-input-bg)] text-[var(--color-input-fg)]',
+  'border-[var(--color-input-border)]',
+  'placeholder:text-[var(--color-input-placeholder)]',
+  'hover:border-[var(--color-input-border-hover)]',
+  'focus:border-[var(--color-input-border-focus)] focus:shadow-md',
+  'disabled:opacity-40',
+].join(' ');
+
+const INPUT_FILLED = 'border-[var(--color-input-border)]';
+const INPUT_INVALID = 'border-[var(--color-border-error)] hover:border-[var(--color-border-error)]';
+
+export const PinInput = React.forwardRef<HTMLInputElement, PinInputProps>(
+  function PinInput(props, ref) {
+    const {
+      count = 6,
+      inputProps,
+      rootRef,
+      attached,
+      placeholder = ' ',
+      value: controlledValue,
+      onValueChange,
+      onValueComplete,
+      disabled,
+      invalid,
+      otp,
+      name,
+      bgColor,
+      className,
+    } = props;
+
+    const inputRefs = React.useRef<Array<HTMLInputElement | null>>([]);
+
+    const values = React.useMemo(
+      () => controlledValue ?? Array.from<string>({ length: count }).fill(''),
+      [ controlledValue, count ],
+    );
+
+    const updateValue = React.useCallback((index: number, char: string): void => {
+      const next = [ ...values ];
+      next[index] = char;
+      onValueChange?.({ value: next });
+
+      if (next.every((v) => v.length > 0)) {
+        onValueComplete?.({ value: next });
+      }
+    }, [ values, onValueChange, onValueComplete ]);
+
+    const focusInput = React.useCallback((index: number): void => {
+      const clamped = Math.max(0, Math.min(index, count - 1));
+      inputRefs.current[clamped]?.focus();
+    }, [ count ]);
+
+    const handleInput = React.useCallback((index: number, e: React.FormEvent<HTMLInputElement>): void => {
+      const target = e.currentTarget;
+      const char = target.value.slice(-1);
+      updateValue(index, char);
+
+      if (char && index < count - 1) {
+        focusInput(index + 1);
+      }
+    }, [ count, updateValue, focusInput ]);
+
+    const handleKeyDown = React.useCallback((index: number, e: React.KeyboardEvent<HTMLInputElement>): void => {
+      if (e.key === 'Backspace') {
+        if (values[index]) {
+          updateValue(index, '');
+        } else if (index > 0) {
+          updateValue(index - 1, '');
+          focusInput(index - 1);
+        }
+        e.preventDefault();
+      } else if (e.key === 'ArrowLeft' && index > 0) {
+        focusInput(index - 1);
+        e.preventDefault();
+      } else if (e.key === 'ArrowRight' && index < count - 1) {
+        focusInput(index + 1);
+        e.preventDefault();
+      }
+    }, [ count, values, updateValue, focusInput ]);
+
+    const handlePaste = React.useCallback((e: React.ClipboardEvent<HTMLInputElement>): void => {
+      e.preventDefault();
+      const pasted = e.clipboardData.getData('text/plain').trim();
+      if (!pasted) {
+        return;
+      }
+      const chars = pasted.slice(0, count).split('');
+      const next = [ ...values ];
+      chars.forEach((char, i) => {
+        next[i] = char;
+      });
+      onValueChange?.({ value: next });
+
+      if (next.every((v) => v.length > 0)) {
+        onValueComplete?.({ value: next });
+      }
+
+      focusInput(Math.min(chars.length, count - 1));
+    }, [ count, values, onValueChange, onValueComplete, focusInput ]);
+
+    const handleFocus = React.useCallback((e: React.FocusEvent<HTMLInputElement>): void => {
+      e.currentTarget.select();
+    }, []);
+
+    const handleNoop = React.useCallback((): void => { /* noop */ }, []);
+
+    const setInputRef = React.useCallback((index: number) => (el: HTMLInputElement | null): void => {
+      inputRefs.current[index] = el;
+    }, []);
+
+    const onInputAtIndex = React.useCallback((index: number) => (e: React.FormEvent<HTMLInputElement>): void => {
+      handleInput(index, e);
+    }, [ handleInput ]);
+
+    const onKeyDownAtIndex = React.useCallback((index: number) => (e: React.KeyboardEvent<HTMLInputElement>): void => {
+      handleKeyDown(index, e);
+    }, [ handleKeyDown ]);
+
+    const bgStyle = bgColor ? { backgroundColor: `var(--color-${ bgColor.replace(/\./g, '-') })` } : undefined;
+
+    return (
+      <div ref={ rootRef } className={ cn('inline-flex items-center', attached ? 'gap-0' : 'gap-2', className) }>
+        { /* Hidden input for form submission */ }
+        <input
+          ref={ ref }
+          type="hidden"
+          name={ name }
+          value={ values.join('') }
+          { ...inputProps }
+        />
+        { Array.from({ length: count }).map((_, index) => (
+          <input
+            key={ index }
+            ref={ setInputRef(index) }
+            type="text"
+            inputMode="numeric"
+            autoComplete={ otp ? 'one-time-code' : 'off' }
+            pattern="[0-9]*"
+            maxLength={ 1 }
+            placeholder={ placeholder }
+            disabled={ disabled }
+            aria-invalid={ invalid || undefined }
+            value={ values[index] || '' }
+            className={ cn(
+              INPUT_BASE,
+              values[index] && INPUT_FILLED,
+              invalid && INPUT_INVALID,
+              attached && index > 0 && '-ml-0.5',
+            ) }
+            style={ bgStyle }
+            onInput={ onInputAtIndex(index) }
+            onKeyDown={ onKeyDownAtIndex(index) }
+            onPaste={ handlePaste }
+            onFocus={ handleFocus }
+            onChange={ handleNoop }
+          />
+        )) }
+      </div>
+    );
+  },
+);