@luxfi/ui 5.5.2 → 5.6.0

package/src/field.tsx

@@ -0,0 +1,202 @@
+import * as LabelPrimitive from '@radix-ui/react-label';
+import * as React from 'react';
+
+import { cn } from './utils';
+
+import type { InputProps } from './input';
+import type { InputGroupProps } from './input-group';
+
+// Inline constants
+const space = String.fromCharCode(32);
+
+function getComponentDisplayName(type: string | React.JSXElementConstructor<unknown>): string | undefined {
+  if (typeof type === 'string') return undefined;
+  if ('displayName' in type) return type.displayName as string;
+  return undefined;
+}
+
+export interface FieldProps {
+  readonly label?: React.ReactNode;
+  readonly helperText?: React.ReactNode;
+  readonly errorText?: React.ReactNode;
+  readonly optionalText?: React.ReactNode;
+  readonly children: React.ReactElement<InputProps> | React.ReactElement<InputGroupProps>;
+  readonly size?: 'sm' | 'md' | 'lg' | '2xl';
+  readonly required?: boolean;
+  readonly disabled?: boolean;
+  readonly readOnly?: boolean;
+  readonly invalid?: boolean;
+  readonly floating?: boolean;
+  readonly bgColor?: string | Record<string, string>;
+  readonly id?: string;
+  readonly className?: string;
+  readonly style?: React.CSSProperties;
+}
+
+export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
+  function Field(props, ref) {
+    const {
+      label,
+      children,
+      helperText,
+      errorText,
+      optionalText,
+      size,
+      required,
+      disabled,
+      readOnly,
+      invalid,
+      floating,
+      id,
+      className,
+      style,
+    } = props;
+
+    // A floating field cannot be without a label.
+    if (floating && label) {
+      const injectedProps = {
+        className: 'peer',
+        placeholder: ' ',
+        size,
+        floating,
+        disabled,
+        readOnly,
+      };
+
+      const labelElement = (
+        <LabelPrimitive.Root
+          className={ cn(
+            'absolute left-3 top-1/2 -translate-y-1/2',
+            'text-[var(--color-input-placeholder,theme(colors.gray.400))]',
+            'pointer-events-none select-none',
+            'origin-top-left transition-all duration-150',
+            'peer-focus:top-1 peer-focus:translate-y-0 peer-focus:scale-75',
+            'peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:translate-y-0 peer-[:not(:placeholder-shown)]:scale-75',
+          ) }
+          htmlFor={ id }
+        >
+          { label }
+          { required && (
+            <span className="ml-0.5 text-[var(--color-fg-error,theme(colors.red.500))]" aria-hidden="true">*</span>
+          ) }
+          { !required && optionalText && (
+            <span className="ml-1 text-[var(--color-text-secondary,theme(colors.gray.400))] text-sm">
+              { optionalText }
+            </span>
+          ) }
+          { errorText && (
+            <span className="ml-0.5 text-[var(--color-fg-error,theme(colors.red.500))] text-sm">
+              -{ space }{ errorText }
+            </span>
+          ) }
+        </LabelPrimitive.Root>
+      );
+
+      const helperTextElement = helperText ? (
+        <p className="mt-1.5 text-xs text-[var(--color-text-secondary,theme(colors.gray.400))]">
+          { helperText }
+        </p>
+      ) : null;
+
+      const child = React.Children.only<React.ReactElement<InputProps | InputGroupProps>>(children);
+      const isInputGroup = getComponentDisplayName(child.type) === 'InputGroup';
+
+      if (isInputGroup) {
+        const inputElement = React.cloneElement(
+          React.Children.only<React.ReactElement<InputProps>>(child.props.children as React.ReactElement<InputProps>),
+          injectedProps,
+        );
+
+        const groupInputElement = React.cloneElement(child,
+          {},
+          inputElement,
+          labelElement,
+        );
+
+        return (
+          <div
+            ref={ ref }
+            id={ id }
+            className={ cn('relative w-full', className) }
+            style={ style }
+            data-disabled={ disabled || undefined }
+            data-readonly={ readOnly || undefined }
+            data-invalid={ invalid || undefined }
+          >
+            { groupInputElement }
+            { helperTextElement }
+          </div>
+        );
+      }
+
+      const inputElement = React.cloneElement(child, injectedProps);
+
+      return (
+        <div
+          ref={ ref }
+          id={ id }
+          className={ cn('relative w-full', className) }
+          style={ style }
+          data-disabled={ disabled || undefined }
+          data-readonly={ readOnly || undefined }
+          data-invalid={ invalid || undefined }
+        >
+          { inputElement }
+          { labelElement }
+          { helperTextElement }
+        </div>
+      );
+    }
+
+    // Non-floating: standard field layout
+    const injectedProps = {
+      size,
+    };
+    const child = React.Children.only<React.ReactElement<InputProps | InputGroupProps>>(children);
+    const clonedChild = React.cloneElement(child, injectedProps);
+
+    return (
+      <div
+        ref={ ref }
+        id={ id }
+        className={ cn('flex flex-col gap-1', className) }
+        style={ style }
+        data-disabled={ disabled || undefined }
+        data-readonly={ readOnly || undefined }
+        data-invalid={ invalid || undefined }
+      >
+        { label && (
+          <LabelPrimitive.Root
+            className={ cn(
+              'text-sm font-medium text-[var(--color-field-label,theme(colors.gray.700))]',
+              'dark:text-[var(--color-field-label,theme(colors.gray.300))]',
+              disabled && 'opacity-40',
+            ) }
+            htmlFor={ id }
+          >
+            { label }
+            { required && (
+              <span className="ml-0.5 text-[var(--color-fg-error,theme(colors.red.500))]" aria-hidden="true">*</span>
+            ) }
+            { !required && optionalText && (
+              <span className="ml-1 text-[var(--color-text-secondary,theme(colors.gray.400))] text-sm font-normal">
+                { optionalText }
+              </span>
+            ) }
+          </LabelPrimitive.Root>
+        ) }
+        { clonedChild }
+        { helperText && (
+          <p className="text-xs text-[var(--color-text-secondary,theme(colors.gray.400))]">
+            { helperText }
+          </p>
+        ) }
+        { errorText && (
+          <p className="text-xs text-[var(--color-fg-error,theme(colors.red.500))]">
+            { errorText }
+          </p>
+        ) }
+      </div>
+    );
+  },
+);

package/src/heading.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { cn } from './utils';
+
+export interface HeadingProps extends React.ComponentPropsWithoutRef<'h1'> {
+  level?: '1' | '2' | '3';
+  // Legacy Chakra style-prop shims
+  mb?: number | string;
+  size?: string;
+}
+
+const LEVEL_TAG = {
+  '1': 'h1',
+  '2': 'h2',
+  '3': 'h3',
+} as const;
+
+// base (mobile) + lg (desktop) responsive text styles per level
+//
+// Level 1: heading.md -> heading.xl
+//   base: 18px/24px font-500
+//   lg:   32px/40px font-500 tracking=-0.5px
+//
+// Level 2: heading.sm -> heading.lg
+//   base: 16px/24px font-500
+//   lg:   24px/32px font-500
+//
+// Level 3: heading.xs -> heading.md
+//   base: 14px/20px font-600
+//   lg:   18px/24px font-500
+const LEVEL_CLASSES = {
+  '1': 'text-[18px] leading-[24px] font-medium lg:text-[32px] lg:leading-[40px] lg:tracking-[-0.5px]',
+  '2': 'text-[16px] leading-[24px] font-medium lg:text-[24px] lg:leading-[32px]',
+  '3': 'text-[14px] leading-[20px] font-semibold lg:text-[18px] lg:leading-[24px] lg:font-medium',
+} as const;
+
+const BASE_CLASSES = 'font-heading text-heading';
+
+export const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
+  function Heading({ level, className, mb, size: _size, style: styleProp, ...rest }, ref) {
+    const Tag = level ? LEVEL_TAG[level] : 'h2';
+    const levelClasses = level ? LEVEL_CLASSES[level] : undefined;
+    const shimStyle: React.CSSProperties = { ...styleProp };
+    if (mb !== undefined) shimStyle.marginBottom = typeof mb === 'number' ? `${ mb * 4 }px` : mb;
+
+    return (
+      <Tag
+        ref={ ref }
+        className={ cn(BASE_CLASSES, levelClasses, className) }
+        style={ Object.keys(shimStyle).length > 0 ? shimStyle : undefined }
+        { ...rest }
+      />
+    );
+  },
+);

package/src/icon-button.tsx

@@ -0,0 +1,192 @@
+import { cva } from 'class-variance-authority';
+import React from 'react';
+
+import { cn } from './utils';
+
+import { Skeleton } from './skeleton';
+
+/* -------------------------------------------------------------------------- */
+/*  CVA variant definitions                                                   */
+/* -------------------------------------------------------------------------- */
+
+const iconButtonVariants = cva(
+  // base
+  [
+    'inline-flex items-center justify-center',
+    'p-0 min-w-auto shrink-0',
+    'cursor-pointer border-0 bg-transparent',
+    'disabled:opacity-[var(--opacity-control-disabled,0.4)] disabled:cursor-not-allowed',
+  ],
+  {
+    variants: {
+      variant: {
+        plain: 'bg-transparent text-inherit border-none hover:bg-transparent',
+        icon_secondary: [
+          'bg-transparent text-icon-secondary border-none',
+          'hover:text-hover',
+          'data-[selected]:bg-selected-control-bg data-[selected]:text-selected-control-text',
+          'data-[selected]:hover:text-hover',
+          'data-[expanded]:text-hover',
+        ],
+        icon_background: [
+          'bg-[var(--color-button-icon-background-bg)] text-icon-secondary border-none',
+          'hover:text-hover',
+          'data-[selected]:bg-selected-control-bg data-[selected]:text-selected-control-text',
+          'data-[selected]:hover:text-hover',
+          'data-[expanded]:text-hover',
+        ],
+        link: [
+          'bg-transparent text-link-primary border-none font-normal px-0 h-auto',
+          'hover:bg-transparent hover:text-link-primary-hover',
+          'disabled:text-text-secondary',
+        ],
+        dropdown: [
+          'border-2 border-solid bg-transparent',
+          'text-[var(--color-button-dropdown-fg)] border-[var(--color-button-dropdown-border)]',
+          'hover:bg-transparent hover:text-hover hover:border-hover',
+          'data-[expanded]:bg-transparent data-[expanded]:text-hover data-[expanded]:border-hover',
+          'data-[selected]:bg-selected-control-bg data-[selected]:text-selected-control-text data-[selected]:border-transparent',
+          'data-[selected]:hover:text-hover',
+        ],
+        pagination: [
+          'border-2 border-solid bg-transparent',
+          'text-[var(--color-button-pagination-fg)] border-[var(--color-button-pagination-border)]',
+          'hover:bg-transparent hover:text-hover hover:border-hover',
+          'data-[selected]:bg-selected-control-bg data-[selected]:text-selected-control-text data-[selected]:border-transparent',
+        ],
+      },
+      size: {
+        '2xs': 'size-5 rounded-sm [&_svg]:size-5',
+        '2xs_alt': 'size-5 rounded-sm [&_svg]:size-3',
+        md: 'size-8 rounded-[var(--radius-base,8px)] [&_svg]:size-5',
+      },
+    },
+    defaultVariants: {
+      variant: 'plain',
+    },
+  },
+);
+
+/* -------------------------------------------------------------------------- */
+/*  Types                                                                     */
+/* -------------------------------------------------------------------------- */
+
+type Variant = 'plain' | 'icon_secondary' | 'icon_background' | 'link' | 'dropdown' | 'pagination';
+type Size = '2xs' | '2xs_alt' | 'md';
+
+export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+
+  /** Visual variant */
+  variant?: Variant;
+
+  /** Icon-button size */
+  size?: Size;
+
+  /** Show a loading spinner (disables button) */
+  loading?: boolean;
+
+  /** Render a skeleton placeholder instead of the button */
+  loadingSkeleton?: boolean;
+
+  /** Maps to data-expanded for popover trigger styling */
+  expanded?: boolean;
+
+  /** Maps to data-selected for toggle styling */
+  selected?: boolean;
+
+  /** Maps to data-highlighted */
+  highlighted?: boolean;
+
+  /** Polymorphic element type (e.g. "div") */
+  as?: React.ElementType;
+
+  // Legacy Chakra style-prop shims
+  boxSize?: number | string;
+  color?: string;
+  px?: string | number;
+  borderRadius?: string;
+  ml?: number | string;
+  mr?: number | string;
+  _hover?: Record<string, string>;
+  _expanded?: Record<string, string>;
+}
+
+/* -------------------------------------------------------------------------- */
+/*  Component                                                                 */
+/* -------------------------------------------------------------------------- */
+
+export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
+  function IconButton(props, ref) {
+    const {
+      size,
+      variant = 'plain',
+      loading,
+      loadingSkeleton = false,
+      expanded,
+      selected,
+      highlighted,
+      disabled,
+      className,
+      children,
+      as: Comp = 'button',
+      style: styleProp,
+      // Strip Chakra style props
+      boxSize: _boxSize,
+      color: _color,
+      px: _px,
+      borderRadius: _borderRadius,
+      ml: _ml,
+      mr: _mr,
+      _hover,
+      _expanded,
+      ...rest
+    } = props;
+
+    const SP = 4;
+    const shimStyle: React.CSSProperties = { ...styleProp };
+    if (_boxSize !== undefined) {
+      const bs = typeof _boxSize === 'number' ? `${ _boxSize * SP }px` : _boxSize;
+      shimStyle.width = bs;
+      shimStyle.height = bs;
+    }
+    if (_color) shimStyle.color = _color;
+    if (_px !== undefined) {
+      const v = typeof _px === 'number' ? `${ _px * SP }px` : _px;
+      shimStyle.paddingLeft = v;
+      shimStyle.paddingRight = v;
+    }
+    if (_borderRadius) shimStyle.borderRadius = _borderRadius;
+    if (_ml !== undefined) shimStyle.marginLeft = typeof _ml === 'number' ? `${ _ml * SP }px` : _ml;
+    if (_mr !== undefined) shimStyle.marginRight = typeof _mr === 'number' ? `${ _mr * SP }px` : _mr;
+    const mergedBtnStyle = Object.keys(shimStyle).length > 0 ? shimStyle : undefined;
+
+    const button = (
+      <Comp
+        ref={ ref }
+        type={ Comp === 'button' ? 'button' : undefined }
+        disabled={ !loadingSkeleton && (loading || disabled) }
+        className={ cn(iconButtonVariants({ variant, size }), className) }
+        style={ mergedBtnStyle }
+        { ...(expanded ? { 'data-expanded': true } : {}) }
+        { ...(selected ? { 'data-selected': true } : {}) }
+        { ...(highlighted ? { 'data-highlighted': true } : {}) }
+        { ...(loadingSkeleton ? { 'data-loading-skeleton': true } : {}) }
+        { ...rest }
+      >
+        { loading ? (
+          <span className="inline-block size-5 animate-spin rounded-full border-2 border-current border-b-transparent border-l-transparent"/>
+        ) : children }
+      </Comp>
+    );
+
+    if (loadingSkeleton) {
+      return (
+        <Skeleton loading={ loadingSkeleton } asChild ref={ ref as React.ForwardedRef<HTMLDivElement> }>
+          { button }
+        </Skeleton>
+      );
+    }
+
+    return button;
+  },
+);