@luxfi/ui 5.5.3 → 5.6.0

package/src/separator.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import { cn } from './utils';
+
+type Orientation = 'horizontal' | 'vertical';
+type Variant = 'solid' | 'dashed' | 'dotted';
+type Size = 'xs' | 'sm' | 'md' | 'lg';
+
+export interface SeparatorProps extends React.HTMLAttributes<HTMLHRElement> {
+  readonly orientation?: Orientation;
+  readonly variant?: Variant;
+  readonly size?: Size;
+}
+
+const VARIANT_CLASSES: Record<Variant, string> = {
+  solid: 'border-solid',
+  dashed: 'border-dashed',
+  dotted: 'border-dotted',
+};
+
+const HORIZONTAL_SIZE_CLASSES: Record<Size, string> = {
+  xs: 'border-t-[0.5px]',
+  sm: 'border-t',
+  md: 'border-t-2',
+  lg: 'border-t-[3px]',
+};
+
+const VERTICAL_SIZE_CLASSES: Record<Size, string> = {
+  xs: 'border-l-[0.5px]',
+  sm: 'border-l',
+  md: 'border-l-2',
+  lg: 'border-l-[3px]',
+};
+
+export const Separator = React.forwardRef<HTMLHRElement, SeparatorProps>(
+  function Separator(
+    { orientation = 'horizontal', variant = 'solid', size = 'sm', className, ...rest },
+    ref,
+  ) {
+    const isVertical = orientation === 'vertical';
+
+    return (
+      <hr
+        ref={ ref }
+        role="separator"
+        aria-orientation={ orientation }
+        className={ cn(
+          'border-[var(--color-border-divider)]',
+          'border-0',
+          VARIANT_CLASSES[variant],
+          isVertical ? VERTICAL_SIZE_CLASSES[size] : HORIZONTAL_SIZE_CLASSES[size],
+          isVertical ? 'self-stretch h-auto w-0' : 'w-full',
+          className,
+        ) }
+        { ...rest }
+      />
+    );
+  },
+);

package/src/skeleton.tsx

@@ -0,0 +1,302 @@
+import * as React from 'react';
+
+import { cn } from './utils';
+
+// ---------------------------------------------------------------------------
+// Skeleton
+// ---------------------------------------------------------------------------
+
+export interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {
+  readonly loading: boolean | undefined;
+
+  /** When true, the Skeleton wraps its single child element instead of adding a wrapper div. */
+  readonly asChild?: boolean;
+
+  // Legacy Chakra style-prop shims — converted to className / inline style.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  readonly w?: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  readonly h?: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  readonly minW?: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  readonly maxW?: any;
+  readonly display?: string;
+  readonly flexGrow?: number;
+  readonly flexShrink?: number;
+  readonly flexBasis?: string;
+  readonly fontWeight?: number | string;
+  readonly textStyle?: string;
+  readonly borderRadius?: string;
+  readonly alignSelf?: string;
+  readonly alignItems?: string;
+  readonly justifyContent?: string;
+  readonly color?: string;
+  readonly mt?: number | string;
+  readonly mb?: number | string;
+  readonly ml?: number | string;
+  readonly mr?: number | string;
+  readonly height?: string;
+  readonly overflow?: string;
+  readonly whiteSpace?: string;
+  readonly textOverflow?: string;
+  readonly textTransform?: string;
+  readonly gap?: number | string;
+  readonly gridTemplateColumns?: string;
+  readonly minWidth?: string;
+  readonly boxSize?: number | string;
+  readonly py?: number | string;
+  readonly px?: number | string;
+  readonly p?: number | string;
+  readonly hideBelow?: string;
+  readonly as?: React.ElementType;
+  readonly fontSize?: string;
+  readonly flexWrap?: React.CSSProperties['flexWrap'];
+  readonly wordBreak?: React.CSSProperties['wordBreak'];
+  readonly lineHeight?: string;
+  readonly marginRight?: string;
+  readonly position?: React.CSSProperties['position'];
+  readonly background?: string;
+}
+
+const SPACING_SCALE = 4;
+
+function toStylePx(value: number | string | undefined): string | undefined {
+  if (value === undefined) return undefined;
+  if (typeof value === 'string') return value;
+  return `${ value * SPACING_SCALE }px`;
+}
+
+function extractSkeletonStyleProps(props: Record<string, unknown>): {
+  style: React.CSSProperties;
+  rest: Record<string, unknown>;
+} {
+  const style: React.CSSProperties = {};
+  const rest: Record<string, unknown> = {};
+
+  function resolveDimension(value: unknown): string | undefined {
+    if (value === undefined || value === null) return undefined;
+    if (typeof value === 'number') return `${ value * SPACING_SCALE }px`;
+    if (typeof value === 'string') return value;
+    if (typeof value === 'object') {
+      const obj = value as Record<string, string>;
+      return obj.base ?? obj.lg ?? obj.xl ?? Object.values(obj)[0];
+    }
+    return undefined;
+  }
+
+  for (const [ key, value ] of Object.entries(props)) {
+    if (value === undefined) continue;
+    switch (key) {
+      case 'w': {
+        const v = resolveDimension(value); if (v) style.width = v; break;
+      }
+      case 'h': {
+        const v = resolveDimension(value); if (v) style.height = v; break;
+      }
+      case 'minW': {
+        const v = resolveDimension(value); if (v) style.minWidth = v; break;
+      }
+      case 'maxW': {
+        const v = resolveDimension(value); if (v) style.maxWidth = v; break;
+      }
+      case 'height': style.height = value as string; break;
+      case 'display': style.display = value as string; break;
+      case 'flexGrow': style.flexGrow = value as number; break;
+      case 'flexShrink': style.flexShrink = value as number; break;
+      case 'flexBasis': style.flexBasis = value as string; break;
+      case 'fontWeight': style.fontWeight = value as number | string; break;
+      case 'borderRadius': style.borderRadius = value as string; break;
+      case 'alignSelf': style.alignSelf = value as string; break;
+      case 'alignItems': style.alignItems = value as string; break;
+      case 'justifyContent': style.justifyContent = value as string; break;
+      case 'color': style.color = value as string; break;
+      case 'mt': style.marginTop = toStylePx(value as number | string); break;
+      case 'mb': style.marginBottom = toStylePx(value as number | string); break;
+      case 'ml': style.marginLeft = toStylePx(value as number | string); break;
+      case 'mr': style.marginRight = toStylePx(value as number | string); break;
+      case 'overflow': style.overflow = value as string; break;
+      case 'whiteSpace': style.whiteSpace = value as string; break;
+      case 'textOverflow': style.textOverflow = value as string; break;
+      case 'textTransform': style.textTransform = value as string; break;
+      case 'gap': style.gap = typeof value === 'number' ? `${ value * SPACING_SCALE }px` : value as string; break;
+      case 'gridTemplateColumns': style.gridTemplateColumns = value as string; break;
+      case 'minWidth': style.minWidth = value as string; break;
+      case 'boxSize': {
+        const s = typeof value === 'number' ? `${ value * SPACING_SCALE }px` : value as string; style.width = s; style.height = s; break;
+      }
+      case 'py': {
+        const v = toStylePx(value as number | string); style.paddingTop = v; style.paddingBottom = v; break;
+      }
+      case 'px': {
+        const v = toStylePx(value as number | string); style.paddingLeft = v; style.paddingRight = v; break;
+      }
+      case 'p': {
+        const v = toStylePx(value as number | string); style.padding = v; break;
+      }
+      case 'hideBelow': break; // handled via className
+      case 'textStyle': break; // drop textStyle, not directly applicable
+      case 'fontSize': style.fontSize = value as string; break;
+      case 'flexWrap': style.flexWrap = value as React.CSSProperties['flexWrap']; break;
+      case 'wordBreak': style.wordBreak = value as React.CSSProperties['wordBreak']; break;
+      case 'lineHeight': style.lineHeight = value as string; break;
+      case 'marginRight': style.marginRight = value as string; break;
+      case 'position': style.position = value as React.CSSProperties['position']; break;
+      case 'background': style.background = value as string; break;
+      default: rest[key] = value; break;
+    }
+  }
+
+  return { style, rest };
+}
+
+export const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
+  function Skeleton(props, ref) {
+    const {
+      loading = false,
+      asChild,
+      className,
+      children,
+      style: styleProp,
+      // Destructure style-prop shims so they don't leak into DOM
+      w: _w, h: _h, minW: _minW, maxW: _maxW, display: _display,
+      flexGrow: _flexGrow, flexShrink: _flexShrink, flexBasis: _flexBasis,
+      fontWeight: _fontWeight, textStyle: _textStyle, borderRadius: _borderRadius,
+      alignSelf: _alignSelf, alignItems: _alignItems, justifyContent: _justifyContent,
+      color: _color, mt: _mt, mb: _mb, ml: _ml, mr: _mr, height: _height,
+      overflow: _overflow, whiteSpace: _whiteSpace, textOverflow: _textOverflow,
+      textTransform: _textTransform, gap: _gap, gridTemplateColumns: _gridTemplateColumns,
+      minWidth: _minWidth, boxSize: _boxSize, py: _py, px: _px, p: _p,
+      hideBelow: _hideBelow, fontSize: _fontSize, flexWrap: _flexWrap, wordBreak: _wordBreak, lineHeight: _lineHeight,
+      marginRight: _marginRight, position: _position, background: _background,
+      as: Component = 'div',
+      ...htmlRest
+    } = props;
+
+    // Collect legacy style props into a CSSProperties object
+    const { style: shimStyle } = extractSkeletonStyleProps({
+      w: _w, h: _h, minW: _minW, maxW: _maxW, display: _display,
+      flexGrow: _flexGrow, flexShrink: _flexShrink, flexBasis: _flexBasis,
+      fontWeight: _fontWeight, textStyle: _textStyle, borderRadius: _borderRadius,
+      alignSelf: _alignSelf, alignItems: _alignItems, justifyContent: _justifyContent,
+      color: _color, mt: _mt, mb: _mb, ml: _ml, mr: _mr, height: _height,
+      overflow: _overflow, whiteSpace: _whiteSpace, textOverflow: _textOverflow,
+      textTransform: _textTransform, gap: _gap, gridTemplateColumns: _gridTemplateColumns,
+      minWidth: _minWidth, boxSize: _boxSize, py: _py, px: _px, p: _p,
+      hideBelow: _hideBelow, fontSize: _fontSize, flexWrap: _flexWrap, wordBreak: _wordBreak, lineHeight: _lineHeight,
+      marginRight: _marginRight, position: _position, background: _background,
+    });
+    const mergedStyle = Object.keys(shimStyle).length > 0 || styleProp ?
+      { ...shimStyle, ...styleProp } :
+      undefined;
+
+    const HIDE_BELOW_MAP: Record<string, string> = { lg: 'lg:hidden', md: 'md:hidden', sm: 'sm:hidden' };
+    const hideBelowClass = _hideBelow ? HIDE_BELOW_MAP[_hideBelow] : undefined;
+    const finalClassName = hideBelowClass ? cn(className, hideBelowClass) : className;
+
+    if (!loading) {
+      // When asChild is true, render children directly without a wrapper div
+      if (asChild && React.isValidElement(children)) {
+        return children;
+      }
+      return (
+        <Component ref={ ref } className={ finalClassName } style={ mergedStyle } { ...htmlRest }>
+          { children }
+        </Component>
+      );
+    }
+
+    // When asChild is true and loading, wrap the child in skeleton styles
+    if (asChild && React.isValidElement(children)) {
+      return (
+        <Component
+          ref={ ref }
+          data-loading
+          className={ cn(
+            'animate-skeleton-shimmer rounded-sm',
+            'bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]',
+            'bg-[length:200%_100%]',
+            'text-transparent [&_*]:invisible',
+            finalClassName,
+          ) }
+          style={ mergedStyle }
+          { ...htmlRest }
+        >
+          { children }
+        </Component>
+      );
+    }
+
+    return (
+      <Component
+        ref={ ref }
+        data-loading
+        className={ cn(
+          'animate-skeleton-shimmer rounded-sm',
+          'bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]',
+          'bg-[length:200%_100%]',
+          children ? 'text-transparent [&_*]:invisible' : 'min-h-5',
+          finalClassName,
+        ) }
+        style={ mergedStyle }
+        { ...htmlRest }
+      >
+        { children }
+      </Component>
+    );
+  },
+);
+
+// ---------------------------------------------------------------------------
+// SkeletonCircle
+// ---------------------------------------------------------------------------
+
+export interface SkeletonCircleProps extends React.HTMLAttributes<HTMLDivElement> {
+  readonly size?: string | number;
+  readonly loading?: boolean;
+}
+
+export const SkeletonCircle = React.forwardRef<HTMLDivElement, SkeletonCircleProps>(
+  function SkeletonCircle(props, ref) {
+    const { size = 40, loading = true, className, ...rest } = props;
+
+    const dimension = typeof size === 'number' ? `${ size }px` : size;
+
+    return (
+      <Skeleton
+        ref={ ref }
+        loading={ loading }
+        className={ cn('rounded-full shrink-0', className) }
+        style={{ width: dimension, height: dimension, ...rest.style }}
+        { ...rest }
+      />
+    );
+  },
+);
+
+// ---------------------------------------------------------------------------
+// SkeletonText
+// ---------------------------------------------------------------------------
+
+export interface SkeletonTextProps extends React.HTMLAttributes<HTMLDivElement> {
+  readonly noOfLines?: number;
+  readonly loading?: boolean;
+}
+
+export const SkeletonText = React.forwardRef<HTMLDivElement, SkeletonTextProps>(
+  function SkeletonText(props, ref) {
+    const { noOfLines = 3, loading = true, className, ...rest } = props;
+
+    return (
+      <div ref={ ref } className={ cn('flex w-full flex-col gap-2', className) } { ...rest }>
+        { Array.from({ length: noOfLines }).map((_, index) => (
+          <Skeleton
+            key={ index }
+            loading={ loading }
+            className={ cn('h-4', index === noOfLines - 1 && 'max-w-[80%]') }
+          />
+        )) }
+      </div>
+    );
+  },
+);

package/src/slider.tsx

@@ -0,0 +1,152 @@
+import * as RadixSlider from '@radix-ui/react-slider';
+import * as React from 'react';
+
+import { cn } from './utils';
+
+export interface SliderProps {
+  readonly marks?: Array<number | { readonly value: number; readonly label: React.ReactNode }>;
+  readonly label?: React.ReactNode;
+  readonly showValue?: boolean;
+  readonly value?: Array<number>;
+  readonly defaultValue?: Array<number>;
+  readonly min?: number;
+  readonly max?: number;
+  readonly step?: number;
+  readonly disabled?: boolean;
+  readonly orientation?: 'horizontal' | 'vertical';
+  readonly name?: string;
+  readonly onValueChange?: (value: Array<number>) => void;
+  readonly onValueCommit?: (value: Array<number>) => void;
+  readonly className?: string;
+}
+
+const THUMB_SIZE = 20;
+const TRACK_HEIGHT = 6;
+
+export const Slider = React.forwardRef<HTMLSpanElement, SliderProps>(
+  function Slider(props, ref) {
+    const {
+      marks: marksProp,
+      label,
+      showValue,
+      value,
+      defaultValue,
+      min = 0,
+      max = 100,
+      step,
+      disabled,
+      orientation,
+      name,
+      onValueChange,
+      onValueCommit,
+      className,
+    } = props;
+
+    const resolvedValue = defaultValue ?? value;
+
+    const marks = marksProp?.map((mark) => {
+      if (typeof mark === 'number') return { value: mark, label: undefined };
+      return mark;
+    });
+
+    const hasMarkLabel = Boolean(marks?.some((mark) => mark.label));
+
+    return (
+      <div className={ cn('flex flex-col gap-1', className) }>
+        { label && !showValue && (
+          <label className="text-sm font-medium text-text-secondary">
+            { label }
+          </label>
+        ) }
+        { label && showValue && (
+          <div className="flex items-center justify-between">
+            <label className="text-sm font-medium text-text-secondary">
+              { label }
+            </label>
+            <span className="text-sm text-text-secondary">
+              { (value ?? defaultValue ?? [])?.join(', ') }
+            </span>
+          </div>
+        ) }
+
+        <RadixSlider.Root
+          ref={ ref }
+          className={ cn(
+            'relative flex w-full touch-none select-none items-center',
+            hasMarkLabel && 'mb-6',
+          ) }
+          value={ value }
+          defaultValue={ defaultValue }
+          min={ min }
+          max={ max }
+          step={ step }
+          disabled={ disabled }
+          orientation={ orientation }
+          name={ name }
+          onValueChange={ onValueChange }
+          onValueCommit={ onValueCommit }
+        >
+          <RadixSlider.Track
+            className={ cn(
+              'relative grow rounded-full bg-border-divider',
+              `h-[${ TRACK_HEIGHT }px]`,
+            ) }
+          >
+            <RadixSlider.Range className="absolute h-full rounded-full bg-link-primary"/>
+          </RadixSlider.Track>
+
+          { resolvedValue?.map((_, index) => (
+            <RadixSlider.Thumb
+              key={ index }
+              className={ cn(
+                `block h-[${ THUMB_SIZE }px] w-[${ THUMB_SIZE }px]`,
+                'rounded-full border-2 border-link-primary bg-white',
+                'shadow-sm transition-colors',
+                'hover:border-link-primary-hover',
+                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-link-primary focus-visible:ring-offset-2',
+                'disabled:pointer-events-none disabled:opacity-50',
+              ) }
+            />
+          )) }
+        </RadixSlider.Root>
+
+        <SliderMarks marks={ marks } min={ min } max={ max }/>
+      </div>
+    );
+  },
+);
+
+interface SliderMarksProps {
+  readonly marks?: Array<{ readonly value: number; readonly label?: React.ReactNode }>;
+  readonly min: number;
+  readonly max: number;
+}
+
+function SliderMarks(props: SliderMarksProps): React.ReactNode {
+  const { marks, min, max } = props;
+  if (!marks?.length) return null;
+
+  const range = max - min;
+
+  return (
+    <div className="relative w-full h-4">
+      { marks.map((mark, index) => {
+        const percent = ((mark.value - min) / range) * 100;
+        return (
+          <div
+            key={ index }
+            className="absolute flex flex-col items-center -translate-x-1/2"
+            style={{ left: `${ percent }%` }}
+          >
+            <div className="h-1.5 w-0.5 bg-border-divider"/>
+            { mark.label != null && (
+              <span className="mt-0.5 text-xs text-text-secondary whitespace-nowrap">
+                { mark.label }
+              </span>
+            ) }
+          </div>
+        );
+      }) }
+    </div>
+  );
+}

package/src/switch.tsx

@@ -0,0 +1,158 @@
+import * as RadixSwitch from '@radix-ui/react-switch';
+// chakra() HOC removed — pure Radix + Tailwind
+import * as React from 'react';
+
+import { cn } from './utils';
+
+const NOOP = () => { /* noop */ };
+
+// ─── Size mappings ────────────────────────────────────────────────────
+const SIZE_CLASSES = {
+  sm: {
+    root: 'h-4 w-7',
+    thumb: 'h-3 w-3 data-[state=checked]:translate-x-3',
+    label: 'text-xs',
+  },
+  md: {
+    root: 'h-5 w-9',
+    thumb: 'h-4 w-4 data-[state=checked]:translate-x-4',
+    label: 'text-sm',
+  },
+  lg: {
+    root: 'h-6 w-11',
+    thumb: 'h-5 w-5 data-[state=checked]:translate-x-5',
+    label: 'text-base',
+  },
+} as const;
+
+// ─── Props ────────────────────────────────────────────────────────────
+export interface SwitchProps extends Omit<React.ComponentPropsWithoutRef<'label'>, 'onChange' | 'dir'> {
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+  labelProps?: React.ComponentPropsWithoutRef<'span'>;
+  rootRef?: React.Ref<HTMLLabelElement>;
+  trackLabel?: { on: React.ReactNode; off: React.ReactNode };
+  thumbLabel?: { on: React.ReactNode; off: React.ReactNode };
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: (details: { checked: boolean }) => void;
+  onChange?: React.FormEventHandler<HTMLLabelElement>;
+  disabled?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  direction?: 'ltr' | 'rtl';
+}
+
+const SwitchBase = React.forwardRef<HTMLInputElement, SwitchProps>(
+  function Switch(props, ref) {
+    const {
+      inputProps,
+      children,
+      rootRef,
+      labelProps,
+      trackLabel,
+      thumbLabel,
+      checked: checkedProp,
+      defaultChecked,
+      onCheckedChange,
+      onChange,
+      disabled = false,
+      size = 'md',
+      direction,
+      className,
+      ...rest
+    } = props;
+
+    const [ internalChecked, setInternalChecked ] = React.useState(defaultChecked ?? false);
+
+    const isControlled = checkedProp !== undefined;
+    const checkedState = isControlled ? checkedProp : internalChecked;
+
+    const handleCheckedChange = React.useCallback(
+      (nextChecked: boolean) => {
+        if (!isControlled) {
+          setInternalChecked(nextChecked);
+        }
+
+        if (onCheckedChange) {
+          // Support both Chakra-style ({ checked }) and Radix-style (checked) signatures.
+          // We call with a single object arg; if the consumer ignores it, that's fine.
+          (onCheckedChange as (details: { checked: boolean }) => void)({ checked: nextChecked });
+        }
+      },
+      [ isControlled, onCheckedChange ],
+    );
+
+    const sizeClasses = SIZE_CLASSES[size];
+    const isRtl = direction === 'rtl';
+
+    return (
+      <label
+        ref={ rootRef }
+        className={ cn(
+          'inline-flex items-center cursor-pointer select-none gap-2',
+          isRtl && 'flex-row-reverse',
+          disabled && 'opacity-50 cursor-not-allowed',
+          className,
+        ) }
+        onChange={ onChange }
+        data-disabled={ disabled || undefined }
+        { ...rest }
+      >
+        <RadixSwitch.Root
+          checked={ checkedState }
+          onCheckedChange={ handleCheckedChange }
+          disabled={ disabled }
+          className={ cn(
+            'relative inline-flex shrink-0 items-center rounded-full',
+            'bg-gray-300 dark:bg-gray-600',
+            'data-[state=checked]:bg-gray-800 dark:bg-white',
+            'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500',
+            'transition-colors duration-200',
+            sizeClasses.root,
+          ) }
+        >
+          { trackLabel && (
+            <span className="absolute inset-0 flex items-center justify-center text-[8px] font-bold text-white pointer-events-none">
+              { checkedState ? trackLabel.on : trackLabel.off }
+            </span>
+          ) }
+          <RadixSwitch.Thumb
+            className={ cn(
+              'block rounded-full bg-white shadow-sm',
+              'transition-transform duration-200',
+              'translate-x-0.5',
+              sizeClasses.thumb,
+            ) }
+          >
+            { thumbLabel && (
+              <span className="flex items-center justify-center h-full w-full text-[8px]">
+                { checkedState ? thumbLabel.on : thumbLabel.off }
+              </span>
+            ) }
+          </RadixSwitch.Thumb>
+        </RadixSwitch.Root>
+        { /* Hidden native input for form compat and ref forwarding */ }
+        <input
+          ref={ ref }
+          type="checkbox"
+          className="sr-only"
+          checked={ checkedState }
+          disabled={ disabled }
+          tabIndex={ -1 }
+          aria-hidden
+          onChange={ NOOP }
+          { ...inputProps }
+        />
+        { children != null && (
+          <span
+            { ...labelProps }
+            className={ cn(sizeClasses.label, labelProps?.className) }
+          >
+            { children }
+          </span>
+        ) }
+      </label>
+    );
+  },
+);
+
+export const Switch = SwitchBase;