@luxfi/ui 5.6.0 → 6.0.0

package/src/separator.tsx

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

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

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

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