@luxfi/ui 5.5.3 → 5.6.0

package/src/popover.tsx

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

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

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

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