@luxfi/ui 5.6.0 → 6.0.0

package/src/field.tsx

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

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

@@ -1,192 +0,0 @@
-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;
-  },
-);