@luxfi/ui 5.6.0 → 6.0.0

package/src/checkbox.tsx

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

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

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

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