@luxfi/ui 6.1.3 → 7.1.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,254 @@
+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 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;
+}
+
+// Style-prop shim names that must NOT leak into the DOM.
+const SHIM_PROPS = [
+  'w', 'h', 'minW', 'maxW', 'display', 'flexGrow', 'flexShrink', 'flexBasis',
+  'fontWeight', 'textStyle', 'borderRadius', 'alignSelf', 'alignItems',
+  'justifyContent', 'color', 'mt', 'mb', 'ml', 'mr', 'height', 'overflow',
+  'whiteSpace', 'textOverflow', 'textTransform', 'gap', 'gridTemplateColumns',
+  'minWidth', 'boxSize', 'py', 'px', 'p', 'hideBelow', 'fontSize', 'flexWrap',
+  'wordBreak', 'lineHeight', 'marginRight', 'position', 'background',
+] as const;
+
+const S = 4; // Chakra spacing scale
+
+/** Resolve a dimension value (number → px via spacing scale, responsive object → first value). */
+function dim(v: unknown): string | undefined {
+  if (v == null) return undefined;
+  if (typeof v === 'number') return `${ v * S }px`;
+  if (typeof v === 'string') return v;
+  if (typeof v === 'object') {
+    const o = v as Record<string, string>;
+    return o.base ?? o.lg ?? o.xl ?? Object.values(o)[0];
+  }
+  return undefined;
+}
+
+/** Convert a spacing number|string via the 4px scale. */
+function sp(v: number | string | undefined): string | undefined {
+  if (v === undefined) return undefined;
+  return typeof v === 'number' ? `${ v * S }px` : v;
+}
+
+/** Build a CSSProperties object from legacy Chakra style-prop shims. */
+function shimToStyle(props: SkeletonProps): React.CSSProperties {
+  const s: React.CSSProperties = {};
+  if (props.w !== undefined) s.width = dim(props.w);
+  if (props.h !== undefined) s.height = dim(props.h);
+  if (props.minW !== undefined) s.minWidth = dim(props.minW);
+  if (props.maxW !== undefined) s.maxWidth = dim(props.maxW);
+  if (props.display !== undefined) s.display = props.display;
+  if (props.flexGrow !== undefined) s.flexGrow = props.flexGrow;
+  if (props.flexShrink !== undefined) s.flexShrink = props.flexShrink;
+  if (props.flexBasis !== undefined) s.flexBasis = props.flexBasis;
+  if (props.fontWeight !== undefined) s.fontWeight = props.fontWeight;
+  if (props.borderRadius !== undefined) s.borderRadius = props.borderRadius;
+  if (props.alignSelf !== undefined) s.alignSelf = props.alignSelf;
+  if (props.alignItems !== undefined) s.alignItems = props.alignItems;
+  if (props.justifyContent !== undefined) s.justifyContent = props.justifyContent;
+  if (props.color !== undefined) s.color = props.color;
+  if (props.mt !== undefined) s.marginTop = sp(props.mt);
+  if (props.mb !== undefined) s.marginBottom = sp(props.mb);
+  if (props.ml !== undefined) s.marginLeft = sp(props.ml);
+  if (props.mr !== undefined) s.marginRight = sp(props.mr);
+  if (props.height !== undefined) s.height = props.height;
+  if (props.overflow !== undefined) s.overflow = props.overflow;
+  if (props.whiteSpace !== undefined) s.whiteSpace = props.whiteSpace;
+  if (props.textOverflow !== undefined) s.textOverflow = props.textOverflow;
+  if (props.textTransform !== undefined) s.textTransform = props.textTransform;
+  if (props.gap !== undefined) s.gap = sp(props.gap);
+  if (props.gridTemplateColumns !== undefined) s.gridTemplateColumns = props.gridTemplateColumns;
+  if (props.minWidth !== undefined) s.minWidth = props.minWidth;
+  if (props.boxSize !== undefined) {
+    const v = typeof props.boxSize === 'number' ? `${ props.boxSize * S }px` : props.boxSize;
+    s.width = v; s.height = v;
+  }
+  if (props.py !== undefined) { const v = sp(props.py); s.paddingTop = v; s.paddingBottom = v; }
+  if (props.px !== undefined) { const v = sp(props.px); s.paddingLeft = v; s.paddingRight = v; }
+  if (props.p !== undefined) s.padding = sp(props.p);
+  if (props.fontSize !== undefined) s.fontSize = props.fontSize;
+  if (props.flexWrap !== undefined) s.flexWrap = props.flexWrap;
+  if (props.wordBreak !== undefined) s.wordBreak = props.wordBreak;
+  if (props.lineHeight !== undefined) s.lineHeight = props.lineHeight;
+  if (props.marginRight !== undefined) s.marginRight = props.marginRight;
+  if (props.position !== undefined) s.position = props.position;
+  if (props.background !== undefined) s.background = props.background;
+  return s;
+}
+
+/** Strip shim keys from props so they don't leak into the DOM. */
+function stripShims<T extends Record<string, unknown>>(props: T): Omit<T, (typeof SHIM_PROPS)[number]> {
+  const out = { ...props };
+  for (const k of SHIM_PROPS) delete out[k];
+  return out as Omit<T, (typeof SHIM_PROPS)[number]>;
+}
+
+const SKELETON_CLASSES = [
+  '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%]',
+].join(' ');
+
+const HIDE_BELOW_MAP: Record<string, string> = { lg: 'lg:hidden', md: 'md:hidden', sm: 'sm:hidden' };
+
+export const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
+  function Skeleton(props, ref) {
+    const { loading = false, asChild, className, children, style: styleProp, as: Component = 'div', ...allRest } = props;
+
+    const shimStyle = shimToStyle(props);
+    const mergedStyle = Object.keys(shimStyle).length > 0 || styleProp ? { ...shimStyle, ...styleProp } : undefined;
+    const hideBelowClass = props.hideBelow ? HIDE_BELOW_MAP[props.hideBelow] : undefined;
+    const cls = hideBelowClass ? cn(className, hideBelowClass) : className;
+
+    // Strip shim props from what reaches the DOM.
+    const htmlRest = stripShims(allRest);
+
+    if (!loading) {
+      if (asChild && React.isValidElement(children)) return children;
+      return (
+        <Component ref={ ref } className={ cls } style={ mergedStyle } { ...htmlRest }>
+          { children }
+        </Component>
+      );
+    }
+
+    if (asChild && React.isValidElement(children)) {
+      return (
+        <Component
+          ref={ ref }
+          data-loading
+          className={ cn(SKELETON_CLASSES, 'text-transparent [&_*]:invisible', cls) }
+          style={ mergedStyle }
+          { ...htmlRest }
+        >
+          { children }
+        </Component>
+      );
+    }
+
+    return (
+      <Component
+        ref={ ref }
+        data-loading
+        className={ cn(SKELETON_CLASSES, children ? 'text-transparent [&_*]:invisible' : 'min-h-5', cls) }
+        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>
+  );
+}