@luxfi/ui 5.6.0 → 6.0.0

package/src/popover.tsx

@@ -1,400 +0,0 @@
-import * as RadixPopover from '@radix-ui/react-popover';
-import * as React from 'react';
-
-import { cn } from './utils';
-
-import { CloseButton } from './close-button';
-
-// --- 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 };
-}
-
-// --- PopoverRoot ---
-
-interface Positioning {
-  readonly placement?: string;
-  readonly offset?: {
-    readonly mainAxis?: number;
-    readonly crossAxis?: number;
-  };
-  readonly overflowPadding?: number;
-}
-
-export interface PopoverRootProps {
-  readonly children?: React.ReactNode;
-  readonly open?: boolean;
-  readonly defaultOpen?: boolean;
-
-  /** Chakra-style callback: receives `{ open: boolean }` */
-  readonly onOpenChange?: (details: { open: boolean }) => void;
-  readonly positioning?: Positioning;
-  readonly lazyMount?: boolean;
-  readonly unmountOnExit?: boolean;
-  readonly autoFocus?: boolean;
-  readonly closeOnInteractOutside?: boolean;
-  readonly modal?: boolean;
-}
-
-// Stash positioning info in context so PopoverContent can read it.
-interface PopoverPositioning {
-  readonly side: Side;
-  readonly align: Align;
-  readonly sideOffset: number;
-  readonly alignOffset: number;
-  readonly collisionPadding: number;
-  readonly autoFocus: boolean;
-  readonly closeOnInteractOutside: boolean;
-}
-
-const PositioningContext = React.createContext<PopoverPositioning>({
-  side: 'bottom',
-  align: 'start',
-  sideOffset: 4,
-  alignOffset: 0,
-  collisionPadding: 4,
-  autoFocus: false,
-  closeOnInteractOutside: true,
-});
-
-export const PopoverRoot = (props: PopoverRootProps): React.ReactElement => {
-  const {
-    children,
-    open,
-    defaultOpen,
-    onOpenChange,
-    positioning,
-    autoFocus = false,
-    closeOnInteractOutside = true,
-    modal = false,
-    // lazyMount and unmountOnExit are handled via forceMount on Portal/Content
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    lazyMount: _lazyMount,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    unmountOnExit: _unmountOnExit,
-  } = props;
-
-  // Merge default positioning with user positioning
-  const mergedPositioning: Positioning = {
-    placement: 'bottom-start',
-    overflowPadding: 4,
-    ...positioning,
-    offset: {
-      mainAxis: 4,
-      ...positioning?.offset,
-    },
-  };
-
-  const { side, align } = parsePlacement(mergedPositioning.placement);
-
-  const positioningValue = React.useMemo<PopoverPositioning>(() => ({
-    side,
-    align,
-    sideOffset: mergedPositioning.offset?.mainAxis ?? 4,
-    alignOffset: mergedPositioning.offset?.crossAxis ?? 0,
-    collisionPadding: mergedPositioning.overflowPadding ?? 4,
-    autoFocus,
-    closeOnInteractOutside,
-  }), [
-    side, align,
-    mergedPositioning.offset?.mainAxis, mergedPositioning.offset?.crossAxis,
-    mergedPositioning.overflowPadding, autoFocus, closeOnInteractOutside,
-  ]);
-
-  // Bridge Chakra-style onOpenChange ({ open }) to Radix (open)
-  const handleOpenChange = React.useCallback((isOpen: boolean) => {
-    onOpenChange?.({ open: isOpen });
-  }, [ onOpenChange ]);
-
-  return (
-    <PositioningContext.Provider value={ positioningValue }>
-      <RadixPopover.Root
-        open={ open }
-        defaultOpen={ defaultOpen }
-        onOpenChange={ handleOpenChange }
-        modal={ modal }
-      >
-        { children }
-      </RadixPopover.Root>
-    </PositioningContext.Provider>
-  );
-};
-
-// --- PopoverTrigger ---
-
-export interface PopoverTriggerProps extends React.ComponentPropsWithoutRef<'button'> {
-  readonly asChild?: boolean;
-}
-
-export const PopoverTrigger = React.forwardRef<
-  HTMLButtonElement,
-  PopoverTriggerProps
->(function PopoverTrigger(props, ref) {
-  const { asChild = true, ...rest } = props;
-  return <RadixPopover.Trigger asChild={ asChild } ref={ ref } { ...rest }/>;
-});
-
-// --- PopoverContent ---
-
-export interface PopoverContentProps extends React.ComponentPropsWithoutRef<'div'> {
-  readonly portalled?: boolean;
-  readonly portalRef?: React.RefObject<HTMLElement>;
-  // Legacy Chakra style-prop shims
-  readonly w?: string | Record<string, string>;
-  readonly minW?: string;
-  readonly maxW?: string;
-  readonly paddingTop?: number | string;
-}
-
-export const PopoverContent = React.forwardRef<
-  HTMLDivElement,
-  PopoverContentProps
->(function PopoverContent(props, ref) {
-  const { portalled = true, portalRef, className, w, minW, maxW, paddingTop, style: styleProp, ...rest } = props;
-  const resolvedW = typeof w === 'object' ? (w as Record<string, string>).base ?? (w as Record<string, string>).lg : w;
-  const contentStyle: React.CSSProperties = {
-    ...styleProp,
-    ...(resolvedW ? { width: resolvedW } : {}),
-    ...(minW ? { minWidth: minW } : {}),
-    ...(maxW ? { maxWidth: maxW } : {}),
-    ...(paddingTop !== undefined ? { paddingTop: typeof paddingTop === 'number' ? `${ paddingTop * 4 }px` : paddingTop } : {}),
-  };
-  const positioning = React.useContext(PositioningContext);
-
-  const preventFocus = React.useCallback((e: Event) => e.preventDefault(), []);
-  const preventInteract = React.useCallback((e: Event) => e.preventDefault(), []);
-
-  const content = (
-    <RadixPopover.Content
-      ref={ ref }
-      side={ positioning.side }
-      align={ positioning.align }
-      sideOffset={ positioning.sideOffset }
-      alignOffset={ positioning.alignOffset }
-      collisionPadding={ positioning.collisionPadding }
-      onOpenAutoFocus={ positioning.autoFocus ? undefined : preventFocus }
-      onInteractOutside={ positioning.closeOnInteractOutside ? undefined : preventInteract }
-      className={ cn(
-        'z-50 rounded-lg border border-[var(--color-popover-border,var(--color-border-divider))]',
-        'bg-[var(--color-popover-bg,var(--color-dialog-bg))]',
-        'shadow-[var(--shadow-popover,var(--shadow-lg))]',
-        '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(contentStyle).length > 0 ? contentStyle : undefined }
-      { ...rest }
-    />
-  );
-
-  if (!portalled) {
-    return content;
-  }
-
-  return (
-    <RadixPopover.Portal container={ portalRef?.current ?? undefined }>
-      { content }
-    </RadixPopover.Portal>
-  );
-});
-
-// --- PopoverArrow ---
-
-export interface PopoverArrowProps extends React.ComponentPropsWithoutRef<'svg'> {}
-
-export const PopoverArrow = React.forwardRef<
-  SVGSVGElement,
-  PopoverArrowProps
->(function PopoverArrow(props, ref) {
-  const { className, ...rest } = props;
-  return (
-    <RadixPopover.Arrow
-      ref={ ref }
-      className={ cn('fill-[var(--color-popover-bg,var(--color-dialog-bg))]', className) }
-      { ...rest }
-    />
-  );
-});
-
-// --- PopoverCloseTrigger ---
-
-export interface PopoverCloseTriggerProps extends React.ComponentPropsWithoutRef<'button'> {}
-
-export const PopoverCloseTrigger = React.forwardRef<
-  HTMLButtonElement,
-  PopoverCloseTriggerProps
->(function PopoverCloseTrigger(props, ref) {
-  const { className, ...rest } = props;
-  return (
-    <RadixPopover.Close
-      className={ cn('absolute top-1 right-1', className) }
-      { ...rest }
-      asChild
-      ref={ ref }
-    >
-      <CloseButton/>
-    </RadixPopover.Close>
-  );
-});
-
-// --- PopoverCloseTriggerWrapper ---
-
-export interface PopoverCloseTriggerWrapperProps extends React.ComponentPropsWithoutRef<'button'> {
-  readonly disabled?: boolean;
-}
-
-export const PopoverCloseTriggerWrapper = React.forwardRef<
-  HTMLButtonElement,
-  PopoverCloseTriggerWrapperProps
->(function PopoverCloseTriggerWrapper(props, ref) {
-  const { disabled, children, ...rest } = props;
-
-  if (disabled) {
-    return children as React.ReactElement;
-  }
-
-  return (
-    <RadixPopover.Close ref={ ref } { ...rest } asChild>
-      { children }
-    </RadixPopover.Close>
-  );
-});
-
-// --- Simple wrapper components ---
-
-export interface PopoverBodyProps extends React.ComponentPropsWithoutRef<'div'> {
-  // Legacy Chakra style-prop shims
-  readonly display?: string;
-  readonly flexDir?: string;
-  readonly rowGap?: number | string;
-  readonly px?: number | string;
-  readonly py?: number | string;
-  readonly textStyle?: string;
-  readonly alignItems?: string;
-}
-
-export const PopoverBody = React.forwardRef<
-  HTMLDivElement,
-  PopoverBodyProps
->(function PopoverBody(props, ref) {
-  const {
-    className, style: styleProp,
-    display: _display, flexDir: _flexDir, rowGap: _rowGap, px: _px, py: _py,
-    textStyle: _textStyle, alignItems: _alignItems,
-    ...rest
-  } = props;
-  const bodyStyle: React.CSSProperties = {
-    ...styleProp,
-    ...(_display ? { display: _display } : {}),
-    ...(_flexDir ? { flexDirection: _flexDir as React.CSSProperties['flexDirection'] } : {}),
-    ...(_rowGap !== undefined ? { rowGap: typeof _rowGap === 'number' ? `${ _rowGap * 4 }px` : _rowGap } : {}),
-    ...(_px !== undefined ? {
-      paddingLeft: typeof _px === 'number' ? `${ _px * 4 }px` : _px,
-      paddingRight: typeof _px === 'number' ? `${ _px * 4 }px` : _px,
-    } : {}),
-    ...(_py !== undefined ? {
-      paddingTop: typeof _py === 'number' ? `${ _py * 4 }px` : _py,
-      paddingBottom: typeof _py === 'number' ? `${ _py * 4 }px` : _py,
-    } : {}),
-    ...(_alignItems ? { alignItems: _alignItems } : {}),
-  };
-  return (
-    <div
-      ref={ ref }
-      className={ cn('p-4', className) }
-      style={ Object.keys(bodyStyle).length > 0 ? bodyStyle : undefined }
-      { ...rest }
-    />
-  );
-});
-
-export interface PopoverHeaderProps extends React.ComponentPropsWithoutRef<'div'> {}
-
-export const PopoverHeader = React.forwardRef<
-  HTMLDivElement,
-  PopoverHeaderProps
->(function PopoverHeader(props, ref) {
-  const { className, ...rest } = props;
-  return (
-    <div
-      ref={ ref }
-      className={ cn('px-4 pt-4 pb-0 font-semibold', className) }
-      { ...rest }
-    />
-  );
-});
-
-export interface PopoverFooterProps extends React.ComponentPropsWithoutRef<'div'> {}
-
-export const PopoverFooter = React.forwardRef<
-  HTMLDivElement,
-  PopoverFooterProps
->(function PopoverFooter(props, ref) {
-  const { className, ...rest } = props;
-  return (
-    <div
-      ref={ ref }
-      className={ cn('px-4 pb-4 pt-0', className) }
-      { ...rest }
-    />
-  );
-});
-
-export interface PopoverTitleProps extends React.ComponentPropsWithoutRef<'h3'> {}
-
-export const PopoverTitle = React.forwardRef<
-  HTMLHeadingElement,
-  PopoverTitleProps
->(function PopoverTitle(props, ref) {
-  const { className, ...rest } = props;
-  return (
-    <h3
-      ref={ ref }
-      className={ cn('text-base font-semibold', className) }
-      { ...rest }
-    />
-  );
-});
-
-export interface PopoverDescriptionProps extends React.ComponentPropsWithoutRef<'p'> {}
-
-export const PopoverDescription = React.forwardRef<
-  HTMLParagraphElement,
-  PopoverDescriptionProps
->(function PopoverDescription(props, ref) {
-  const { className, ...rest } = props;
-  return (
-    <p
-      ref={ ref }
-      className={ cn('text-sm', className) }
-      { ...rest }
-    />
-  );
-});

package/src/progress-circle.tsx

@@ -1,180 +0,0 @@
-import * as React from 'react';
-
-import { cn } from './utils';
-
-// ---------------------------------------------------------------------------
-// Size presets matching the original Chakra progressCircle recipe
-// ---------------------------------------------------------------------------
-
-const SIZE_MAP = {
-  xs: { size: 24, thickness: 4, textClass: 'text-[10px]' },
-  sm: { size: 32, thickness: 5, textClass: 'text-[10px]' },
-  md: { size: 40, thickness: 6, textClass: 'text-xs' },
-  lg: { size: 48, thickness: 7, textClass: 'text-sm' },
-  xl: { size: 64, thickness: 8, textClass: 'text-sm' },
-} as const;
-
-type Size = keyof typeof SIZE_MAP;
-
-// ---------------------------------------------------------------------------
-// Context
-// ---------------------------------------------------------------------------
-
-interface ProgressCircleCtx {
-  readonly value: number | null;
-  readonly size: Size;
-  readonly colorPalette: string;
-}
-
-const Ctx = React.createContext<ProgressCircleCtx>({
-  value: 0,
-  size: 'md',
-  colorPalette: 'blue',
-});
-
-// ---------------------------------------------------------------------------
-// Root
-// ---------------------------------------------------------------------------
-
-export interface ProgressCircleRootProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {
-  readonly value?: number | null;
-  readonly size?: Size;
-  readonly colorPalette?: string;
-}
-
-export const ProgressCircleRoot = React.forwardRef<
-  HTMLDivElement,
-  ProgressCircleRootProps
->(function ProgressCircleRoot(props, ref) {
-  const {
-    value = 0,
-    size = 'md',
-    colorPalette = 'blue',
-    className,
-    children,
-    ...rest
-  } = props;
-
-  const ctx = React.useMemo<ProgressCircleCtx>(
-    () => ({ value: value ?? null, size, colorPalette }),
-    [ value, size, colorPalette ],
-  );
-
-  return (
-    <Ctx.Provider value={ ctx }>
-      <div
-        ref={ ref }
-        role="progressbar"
-        aria-valuenow={ value ?? undefined }
-        aria-valuemin={ 0 }
-        aria-valuemax={ 100 }
-        className={ cn('relative inline-flex text-sm', className) }
-        { ...rest }
-      >
-        { children }
-      </div>
-    </Ctx.Provider>
-  );
-});
-
-// ---------------------------------------------------------------------------
-// Ring (SVG track + range arc)
-// ---------------------------------------------------------------------------
-
-export interface ProgressCircleRingProps
-  extends Omit<React.SVGAttributes<SVGSVGElement>, 'color'> {
-  readonly trackColor?: string;
-  readonly cap?: React.SVGAttributes<SVGCircleElement>['strokeLinecap'];
-  readonly color?: string;
-}
-
-export const ProgressCircleRing = React.forwardRef<
-  SVGSVGElement,
-  ProgressCircleRingProps
->(function ProgressCircleRing(props, ref) {
-  const { trackColor, cap, color, className, ...rest } = props;
-  const { value, size: sizeKey } = React.useContext(Ctx);
-
-  const { size, thickness } = SIZE_MAP[sizeKey];
-  const radius = size / 2 - thickness / 2;
-  const circumference = 2 * Math.PI * radius;
-  const percent = value ?? 0;
-  const offset = circumference * ((100 - percent) / 100);
-
-  return (
-    <svg
-      ref={ ref }
-      width={ size }
-      height={ size }
-      viewBox={ `0 0 ${ size } ${ size }` }
-      className={ cn(
-        value === null && 'animate-spin',
-        className,
-      ) }
-      { ...rest }
-    >
-      { /* Track */ }
-      <circle
-        cx={ size / 2 }
-        cy={ size / 2 }
-        r={ radius }
-        fill="transparent"
-        strokeWidth={ thickness }
-        stroke={ trackColor ?? 'currentColor' }
-        className={ !trackColor ? 'opacity-20' : undefined }
-      />
-      { /* Range */ }
-      <circle
-        cx={ size / 2 }
-        cy={ size / 2 }
-        r={ radius }
-        fill="transparent"
-        strokeWidth={ thickness }
-        stroke={ color ?? 'currentColor' }
-        strokeLinecap={ cap }
-        strokeDasharray={ circumference }
-        strokeDashoffset={ offset }
-        style={{
-          transformOrigin: 'center',
-          transform: 'rotate(-90deg)',
-          transition: 'stroke-dashoffset 0.6s, stroke-dasharray 0.6s',
-          opacity: percent === 0 ? 0 : undefined,
-        }}
-      />
-    </svg>
-  );
-});
-
-// ---------------------------------------------------------------------------
-// Value text (centered number)
-// ---------------------------------------------------------------------------
-
-export interface ProgressCircleValueTextProps
-  extends React.HTMLAttributes<HTMLDivElement> {}
-
-export const ProgressCircleValueText = React.forwardRef<
-  HTMLDivElement,
-  ProgressCircleValueTextProps
->(function ProgressCircleValueText(props, ref) {
-  const { className, children, ...rest } = props;
-  const { value, size: sizeKey } = React.useContext(Ctx);
-
-  const { textClass } = SIZE_MAP[sizeKey];
-
-  return (
-    <div
-      ref={ ref }
-      aria-live="polite"
-      className={ cn(
-        'absolute inset-0 flex items-center justify-center',
-        'font-medium tracking-tight tabular-nums leading-none',
-        textClass,
-        className,
-      ) }
-      { ...rest }
-    >
-      { children ?? `${ Math.round(value ?? 0) }%` }
-    </div>
-  );
-});

package/src/progress.tsx

@@ -1,109 +0,0 @@
-import * as RadixProgress from '@radix-ui/react-progress';
-import * as React from 'react';
-
-import { cn } from './utils';
-
-const SIZE_CLASSES = {
-  sm: 'h-1',
-  md: 'h-2',
-  lg: 'h-3',
-  xl: 'h-4',
-} as const;
-
-type Size = keyof typeof SIZE_CLASSES;
-
-interface TrackProps {
-  readonly borderStartRadius?: number | string;
-  readonly borderEndRadius?: number | string;
-  readonly className?: string;
-  readonly style?: React.CSSProperties;
-}
-
-interface ProgressProps extends React.ComponentPropsWithoutRef<'div'> {
-  readonly value?: number | null;
-  readonly min?: number;
-  readonly max?: number;
-  readonly size?: Size;
-  readonly color?: string;
-  readonly trackProps?: TrackProps;
-
-  // Common Chakra layout shorthands that consumers currently pass.
-  readonly w?: string;
-  readonly flex?: string | number;
-}
-
-function normalizeValue(value: number | null | undefined, min: number, max: number): number {
-  if (value == null) return 0;
-  if (max <= min) return 0;
-  return Math.round(((value - min) / (max - min)) * 100);
-}
-
-export const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
-  function Progress(props, ref) {
-    const {
-      value,
-      min = 0,
-      max = 100,
-      size = 'md',
-      color,
-      trackProps,
-      className,
-      style,
-      w,
-      flex,
-      ...rest
-    } = props;
-
-    const percent = normalizeValue(value, min, max);
-
-    const trackStyle: React.CSSProperties = {
-      ...trackProps?.style,
-      ...(trackProps?.borderStartRadius !== undefined && {
-        borderStartStartRadius: trackProps.borderStartRadius,
-        borderEndStartRadius: trackProps.borderStartRadius,
-      }),
-      ...(trackProps?.borderEndRadius !== undefined && {
-        borderStartEndRadius: trackProps.borderEndRadius,
-        borderEndEndRadius: trackProps.borderEndRadius,
-      }),
-    };
-
-    const rootStyle: React.CSSProperties = {
-      ...style,
-      ...(w !== undefined && { width: w === 'full' ? '100%' : w }),
-      ...(flex !== undefined && { flex }),
-    };
-
-    return (
-      <div
-        ref={ ref }
-        className={ cn('relative', className) }
-        style={ rootStyle }
-        { ...rest }
-      >
-        <RadixProgress.Root
-          value={ percent }
-          max={ 100 }
-          className={ cn(
-            'w-full overflow-hidden rounded-full',
-            'bg-[var(--color-progress-track)]',
-            SIZE_CLASSES[size],
-            trackProps?.className,
-          ) }
-          style={ trackStyle }
-        >
-          <RadixProgress.Indicator
-            className={ cn(
-              'h-full rounded-full transition-transform duration-500 ease-out',
-              !color && 'bg-[var(--color-progress-indicator)]',
-            ) }
-            style={{
-              width: `${ percent }%`,
-              ...(color && { backgroundColor: `var(--color-${ color.replace('.', '-') }, ${ color })` }),
-            }}
-          />
-        </RadixProgress.Root>
-      </div>
-    );
-  },
-);

package/src/provider.tsx

@@ -1,12 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import {
-  ColorModeProvider,
-  type ColorModeProviderProps,
-} from './color-mode';
-
-export function Provider(props: ColorModeProviderProps) {
-  return <ColorModeProvider { ...props }/>;
-}