@luxfi/ui 5.5.3 → 5.6.0

package/src/checkbox.tsx

@@ -0,0 +1,307 @@
+import * as RadixCheckbox from '@radix-ui/react-checkbox';
+// chakra() HOC removed — pure Radix + Tailwind
+import * as React from 'react';
+
+import { cn } from './utils';
+
+const NOOP = () => { /* noop */ };
+
+// ─── CheckboxGroup context ───────────────────────────────────────────
+interface CheckboxGroupContextValue {
+  value: Array<string>;
+  toggle: (itemValue: string) => void;
+}
+
+const CheckboxGroupContext = React.createContext<CheckboxGroupContextValue | null>(null);
+
+function useCheckboxGroupContext(): CheckboxGroupContextValue | null {
+  return React.useContext(CheckboxGroupContext);
+}
+
+// ─── CheckboxGroup ───────────────────────────────────────────────────
+export interface CheckboxGroupProps extends React.ComponentPropsWithoutRef<'div'> {
+  value?: Array<string>;
+  defaultValue?: Array<string>;
+  onValueChange?: (value: Array<string>) => void;
+  orientation?: 'vertical' | 'horizontal';
+  name?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+}
+
+const CheckboxGroupBase = React.forwardRef<HTMLDivElement, CheckboxGroupProps>(
+  function CheckboxGroup(props, ref) {
+    const {
+      children,
+      value: controlledValue,
+      defaultValue,
+      onValueChange,
+      orientation = 'vertical',
+      name: _name,
+      className,
+      ...rest
+    } = props;
+
+    const [ uncontrolledValue, setUncontrolledValue ] = React.useState<Array<string>>(defaultValue ?? []);
+
+    const isControlled = controlledValue !== undefined;
+    const value = isControlled ? controlledValue : uncontrolledValue;
+
+    const toggle = React.useCallback(
+      (itemValue: string) => {
+        const next = value.includes(itemValue) ?
+          value.filter((v) => v !== itemValue) :
+          [ ...value, itemValue ];
+
+        if (!isControlled) {
+          setUncontrolledValue(next);
+        }
+        onValueChange?.(next);
+      },
+      [ value, isControlled, onValueChange ],
+    );
+
+    // Sync uncontrolled state when controlled value changes
+    React.useEffect(() => {
+      if (isControlled) {
+        setUncontrolledValue(controlledValue);
+      }
+    }, [ isControlled, controlledValue ]);
+
+    const ctx = React.useMemo(() => ({ value, toggle }), [ value, toggle ]);
+
+    return (
+      <CheckboxGroupContext.Provider value={ ctx }>
+        <div
+          ref={ ref }
+          role="group"
+          className={ cn(
+            'flex',
+            orientation === 'vertical' ? 'flex-col gap-3' : 'flex-row gap-8',
+            className,
+          ) }
+          { ...rest }
+        >
+          { children }
+        </div>
+      </CheckboxGroupContext.Provider>
+    );
+  },
+);
+
+export const CheckboxGroup = CheckboxGroupBase;
+
+// ─── Checkbox ────────────────────────────────────────────────────────
+export interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<'label'>, 'onChange'> {
+  icon?: React.ReactNode;
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+  rootRef?: React.Ref<HTMLLabelElement>;
+  checked?: boolean | 'indeterminate';
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: RadixCheckbox.CheckedState) => void;
+  onChange?: React.FormEventHandler<HTMLLabelElement>;
+  disabled?: boolean;
+  readOnly?: boolean;
+  value?: string;
+  size?: 'sm' | 'md';
+  name?: string;
+  required?: boolean;
+}
+
+const SIZE_CLASSES = {
+  sm: {
+    root: 'gap-1.5',
+    control: 'h-3.5 w-3.5 rounded-sm',
+    label: 'text-xs',
+    icon: 'h-3 w-3',
+  },
+  md: {
+    root: 'gap-2',
+    control: 'h-4 w-4 rounded',
+    label: 'text-sm',
+    icon: 'h-3.5 w-3.5',
+  },
+} as const;
+
+const CheckIcon = ({ className }: { readonly className?: string }) => (
+  <svg
+    className={ className }
+    viewBox="0 0 12 10"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M10.59 0.59L4 7.17L1.41 4.59L0 6L4 10L12 2L10.59 0.59Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+const IndeterminateIcon = ({ className }: { readonly className?: string }) => (
+  <svg
+    className={ className }
+    viewBox="0 0 12 2"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M0 0H12V2H0V0Z" fill="currentColor"/>
+  </svg>
+);
+
+const CheckboxBase = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  function Checkbox(props, ref) {
+    const {
+      icon,
+      children,
+      inputProps,
+      rootRef,
+      checked: checkedProp,
+      defaultChecked,
+      onCheckedChange,
+      onChange,
+      disabled = false,
+      readOnly = false,
+      value,
+      size = 'md',
+      name,
+      required,
+      className,
+      ...rest
+    } = props;
+
+    const group = useCheckboxGroupContext();
+    const hiddenInputRef = React.useRef<HTMLInputElement | null>(null);
+
+    // Merge external ref with internal ref
+    const setHiddenInputRef = React.useCallback(
+      (node: HTMLInputElement | null) => {
+        hiddenInputRef.current = node;
+        if (typeof ref === 'function') {
+          ref(node);
+        } else if (ref) {
+          (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;
+        }
+      },
+      [ ref ],
+    );
+
+    // Determine checked state
+    const isInGroup = group !== null && value !== undefined;
+    const groupChecked = isInGroup ? group.value.includes(value) : undefined;
+
+    const [ internalChecked, setInternalChecked ] = React.useState<RadixCheckbox.CheckedState>(
+      defaultChecked ?? false,
+    );
+
+    const isControlled = checkedProp !== undefined || isInGroup;
+    let checkedState: RadixCheckbox.CheckedState;
+    if (checkedProp !== undefined) {
+      checkedState = checkedProp;
+    } else if (isInGroup) {
+      checkedState = groupChecked ?? false;
+    } else {
+      checkedState = internalChecked;
+    }
+
+    const handleCheckedChange = React.useCallback(
+      (nextChecked: RadixCheckbox.CheckedState) => {
+        if (readOnly) return;
+
+        if (!isControlled) {
+          setInternalChecked(nextChecked);
+        }
+
+        if (isInGroup) {
+          group.toggle(value);
+        }
+
+        onCheckedChange?.(nextChecked);
+
+        // Dispatch a native change event from the hidden input so that
+        // onChange handlers on the label (which listen for bubbling change
+        // events) continue to work as they did with the Chakra version.
+        if (onChange && hiddenInputRef.current) {
+          const input = hiddenInputRef.current;
+          // Set the checked property to the new state before dispatching
+          const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+            HTMLInputElement.prototype,
+            'checked',
+          )?.set;
+          nativeInputValueSetter?.call(input, nextChecked === true);
+          const event = new Event('change', { bubbles: true });
+          input.dispatchEvent(event);
+        }
+      },
+      [ readOnly, isControlled, isInGroup, group, value, onCheckedChange, onChange ],
+    );
+
+    const sizeClasses = SIZE_CLASSES[size];
+
+    return (
+      <label
+        ref={ rootRef }
+        className={ cn(
+          'inline-flex items-center cursor-pointer select-none',
+          sizeClasses.root,
+          disabled && 'opacity-50 cursor-not-allowed',
+          readOnly && 'cursor-default',
+          className,
+        ) }
+        onChange={ onChange }
+        data-disabled={ disabled || undefined }
+        data-readonly={ readOnly || undefined }
+        { ...rest }
+      >
+        <RadixCheckbox.Root
+          checked={ checkedState }
+          onCheckedChange={ handleCheckedChange }
+          disabled={ disabled || readOnly }
+          name={ name }
+          value={ value }
+          required={ required }
+          className={ cn(
+            'inline-flex items-center justify-center shrink-0',
+            'border-2 border-current/30',
+            'data-[state=checked]:bg-gray-800 data-[state=checked]:text-white',
+            'dark:data-[state=checked]:bg-white dark:data-[state=checked]:text-black',
+            'data-[state=indeterminate]:bg-gray-800 data-[state=indeterminate]:text-white',
+            'dark:data-[state=indeterminate]:bg-white dark:data-[state=indeterminate]:text-black',
+            'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500',
+            'transition-colors duration-150',
+            sizeClasses.control,
+          ) }
+        >
+          { icon ?? (
+            <RadixCheckbox.Indicator className={ cn('flex items-center justify-center', sizeClasses.icon) }>
+              { checkedState === 'indeterminate' ? (
+                <IndeterminateIcon className={ sizeClasses.icon }/>
+              ) : (
+                <CheckIcon className={ sizeClasses.icon }/>
+              ) }
+            </RadixCheckbox.Indicator>
+          ) }
+        </RadixCheckbox.Root>
+        { /* Hidden native input for form compatibility and ref forwarding */ }
+        <input
+          ref={ setHiddenInputRef }
+          type="checkbox"
+          className="sr-only"
+          checked={ checkedState === true }
+          disabled={ disabled }
+          readOnly={ readOnly }
+          name={ name }
+          value={ value }
+          tabIndex={ -1 }
+          aria-hidden
+          onChange={ NOOP }
+          { ...inputProps }
+        />
+        { children != null && (
+          <span className={ cn(sizeClasses.label) }>{ children }</span>
+        ) }
+      </label>
+    );
+  },
+);
+
+export const Checkbox = CheckboxBase;

package/src/close-button.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+
+import { cn } from './utils';
+
+// eslint-disable-next-line max-len
+const CLOSE_ICON_PATH = 'M9.44 8.035a.791.791 0 0 0 1.12 0l3.802-3.803a.791.791 0 0 1 1.119 0l.287.287a.79.79 0 0 1 0 1.119L11.965 9.44a.79.79 0 0 0 0 1.118l3.803 3.803a.791.791 0 0 1 0 1.119l-.287.287a.791.791 0 0 1-1.119 0l-3.803-3.803a.79.79 0 0 0-1.118 0l-3.803 3.803a.79.79 0 0 1-1.119 0l-.287-.287a.791.791 0 0 1 0-1.119l3.803-3.803a.791.791 0 0 0 0-1.118L4.232 5.638a.791.791 0 0 1 0-1.119l.287-.287a.791.791 0 0 1 1.119 0L9.44 8.035Z';
+
+export interface CloseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  readonly variant?: 'plain';
+  readonly size?: 'md';
+}
+
+export const CloseButton = React.forwardRef<
+  HTMLButtonElement,
+  CloseButtonProps
+>(function CloseButton(props, ref) {
+  const { variant: _variant, size: _size, className, children, ...rest } = props;
+
+  return (
+    <button
+      type="button"
+      aria-label="Close"
+      ref={ ref }
+      className={ cn(
+        'inline-flex items-center justify-center',
+        'size-5 min-w-0 shrink-0 p-0',
+        'rounded-sm border-0 overflow-hidden',
+        'bg-transparent text-[var(--closeButton-fg,currentColor)]',
+        'hover:bg-transparent hover:text-[var(--hover-color,currentColor)]',
+        'disabled:opacity-40',
+        'cursor-pointer',
+        className,
+      ) }
+      { ...rest }
+    >
+      { children ?? (
+        <svg
+          className="size-5"
+          viewBox="0 0 20 20"
+          fill="none"
+          aria-hidden="true"
+        >
+          <path
+            d={ CLOSE_ICON_PATH }
+            fill="currentColor"
+          />
+        </svg>
+      ) }
+    </button>
+  );
+});

package/src/collapsible.tsx

@@ -0,0 +1,126 @@
+import * as Collapsible from '@radix-ui/react-collapsible';
+import React from 'react';
+
+import { cn } from './utils';
+
+import type { LinkProps } from './link';
+import { Link } from './link';
+
+// Inline useUpdateEffect (effect that skips first mount)
+function useUpdateEffect(effect: React.EffectCallback, deps: React.DependencyList): void {
+  const isFirstMount = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstMount.current) {
+      isFirstMount.current = false;
+      return;
+    }
+    return effect();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+}
+
+// Inline scroll-to helper (replaces react-scroll dependency)
+function scrollToElement(id: string): void {
+  const el = document.getElementById(id);
+  if (el) {
+    el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  }
+}
+
+export interface CollapsibleDetailsProps extends LinkProps {
+  children: React.ReactNode;
+  id?: string;
+  isExpanded?: boolean;
+  text?: [string, string];
+  noScroll?: boolean;
+}
+
+const CUT_ID = 'CollapsibleDetails';
+
+export const CollapsibleDetails = (props: CollapsibleDetailsProps) => {
+
+  const { children, id = CUT_ID, onClick, isExpanded: isExpandedProp = false, text: textProp, loading, noScroll, ...rest } = props;
+
+  const [ isExpanded, setIsExpanded ] = React.useState(isExpandedProp);
+
+  const handleClick = React.useCallback((event: React.MouseEvent<HTMLAnchorElement>) => {
+    setIsExpanded((flag) => !flag);
+    if (!noScroll) {
+      scrollToElement(id);
+    }
+    onClick?.(event);
+  }, [ id, noScroll, onClick ]);
+
+  useUpdateEffect(() => {
+    setIsExpanded(isExpandedProp);
+    if (isExpandedProp && !noScroll) {
+      scrollToElement(id);
+    }
+  }, [ isExpandedProp, id, noScroll ]);
+
+  const text = isExpanded ? (textProp?.[1] ?? 'Hide details') : (textProp?.[0] ?? 'View details');
+
+  return (
+    <Collapsible.Root open={ isExpanded }>
+      <Collapsible.Trigger asChild>
+        <Link
+          className="text-sm underline decoration-dashed w-fit"
+          onClick={ handleClick }
+          loading={ loading }
+          { ...rest }
+        >
+          <span id={ id }>{ text }</span>
+        </Link>
+      </Collapsible.Trigger>
+      <Collapsible.Content>
+        { children }
+      </Collapsible.Content>
+    </Collapsible.Root>
+  );
+};
+
+interface CollapsibleListProps<T> extends React.ComponentPropsWithoutRef<'div'> {
+  items: Array<T>;
+  renderItem: (item: T, index: number) => React.ReactNode;
+  triggerProps?: LinkProps;
+  cutLength?: number;
+  text?: [React.ReactNode, React.ReactNode];
+  defaultExpanded?: boolean;
+}
+
+export const CollapsibleList = <T,>(props: CollapsibleListProps<T>) => {
+  const CUT_LENGTH = 3;
+
+  const { items, renderItem, triggerProps, cutLength = CUT_LENGTH, text: textProp, defaultExpanded = false, className, ...rest } = props;
+
+  const [ isExpanded, setIsExpanded ] = React.useState(defaultExpanded);
+
+  React.useEffect(() => {
+    setIsExpanded(defaultExpanded);
+  }, [ defaultExpanded ]);
+
+  const handleToggle = React.useCallback(() => {
+    setIsExpanded((flag) => !flag);
+  }, []);
+
+  const text = isExpanded ? (textProp?.[1] ?? 'Hide') : (textProp?.[0] ?? 'Show all');
+
+  return (
+    <Collapsible.Root open={ isExpanded }>
+      <div className={ cn('flex flex-col w-full', className) } { ...rest }>
+        { items.slice(0, isExpanded ? undefined : cutLength).map(renderItem) }
+        { items.length > cutLength && (
+          <Collapsible.Trigger asChild>
+            <Link
+              className="text-sm underline decoration-dashed w-fit min-w-0"
+              onClick={ handleToggle }
+              { ...triggerProps }
+            >
+              { text }
+            </Link>
+          </Collapsible.Trigger>
+        ) }
+      </div>
+    </Collapsible.Root>
+  );
+};

package/src/color-mode.tsx

@@ -0,0 +1,125 @@
+'use client';
+
+import * as React from 'react';
+
+export type ColorMode = 'light' | 'dark';
+
+// ---------------------------------------------------------------------------
+// Context — framework-agnostic color mode via React context.
+// Consumers (Next.js apps, Vite apps, etc.) wrap with their own theme provider
+// and pass the resolved color mode + setter into this context.
+// ---------------------------------------------------------------------------
+
+interface ColorModeContextValue {
+  readonly colorMode: ColorMode;
+  readonly setColorMode: (mode: string) => void;
+  readonly toggleColorMode: () => void;
+}
+
+const ColorModeContext = React.createContext<ColorModeContextValue | undefined>(undefined);
+
+// ---------------------------------------------------------------------------
+// Provider
+// ---------------------------------------------------------------------------
+
+export interface ColorModeProviderProps {
+  readonly children?: React.ReactNode;
+  /** Initial/default color mode. Defaults to 'light'. */
+  readonly defaultTheme?: string;
+  /** Controlled color mode value from an external theme provider. */
+  readonly value?: string;
+  /** Called when the color mode changes. */
+  readonly onValueChange?: (mode: string) => void;
+  /** Any extra props are accepted and ignored for compat with next-themes ThemeProviderProps. */
+  readonly [key: string]: unknown;
+}
+
+export function ColorModeProvider(props: ColorModeProviderProps) {
+  const { children, defaultTheme = 'light', value: controlledValue, onValueChange } = props;
+
+  const [ internalMode, setInternalMode ] = React.useState<ColorMode>(() => {
+    // SSR-safe: check document.documentElement for existing class
+    if (controlledValue === 'dark' || controlledValue === 'light') {
+      return controlledValue;
+    }
+    if (typeof document !== 'undefined') {
+      if (document.documentElement.classList.contains('dark')) return 'dark';
+    }
+    return (defaultTheme === 'dark' ? 'dark' : 'light');
+  });
+
+  const colorMode = (controlledValue === 'dark' || controlledValue === 'light')
+    ? controlledValue
+    : internalMode;
+
+  const setColorMode = React.useCallback((mode: string) => {
+    const resolved = mode === 'dark' ? 'dark' : 'light';
+    setInternalMode(resolved);
+    onValueChange?.(resolved);
+    // Sync class on documentElement
+    if (typeof document !== 'undefined') {
+      document.documentElement.classList.toggle('dark', resolved === 'dark');
+      document.documentElement.classList.toggle('light', resolved === 'light');
+    }
+  }, [ onValueChange ]);
+
+  const toggleColorMode = React.useCallback(() => {
+    setColorMode(colorMode === 'dark' ? 'light' : 'dark');
+  }, [ colorMode, setColorMode ]);
+
+  const ctx = React.useMemo<ColorModeContextValue>(
+    () => ({ colorMode, setColorMode, toggleColorMode }),
+    [ colorMode, setColorMode, toggleColorMode ],
+  );
+
+  return (
+    <ColorModeContext.Provider value={ ctx }>
+      { children }
+    </ColorModeContext.Provider>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Hooks
+// ---------------------------------------------------------------------------
+
+export function useColorMode(): ColorModeContextValue {
+  const ctx = React.useContext(ColorModeContext);
+  if (!ctx) {
+    // Fallback: if no provider is mounted, return a noop implementation
+    // that reads from the document class. This allows components to work
+    // without an explicit provider (e.g., in Storybook, tests).
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [ mode, setMode ] = React.useState<ColorMode>(() => {
+      if (typeof document !== 'undefined' && document.documentElement.classList.contains('dark')) {
+        return 'dark';
+      }
+      return 'light';
+    });
+    return {
+      colorMode: mode,
+      setColorMode: (m: string) => {
+        const resolved = m === 'dark' ? 'dark' : 'light';
+        setMode(resolved);
+        if (typeof document !== 'undefined') {
+          document.documentElement.classList.toggle('dark', resolved === 'dark');
+          document.documentElement.classList.toggle('light', resolved === 'light');
+        }
+      },
+      toggleColorMode: () => {
+        const next = mode === 'dark' ? 'light' : 'dark';
+        setMode(next);
+        if (typeof document !== 'undefined') {
+          document.documentElement.classList.toggle('dark', next === 'dark');
+          document.documentElement.classList.toggle('light', next === 'light');
+        }
+      },
+    };
+  }
+  return ctx;
+}
+
+export function useColorModeValue<T>(light: T, dark: T): T {
+  const { colorMode } = useColorMode();
+  return colorMode === 'dark' ? dark : light;
+}