@luxfi/ui 5.6.0 → 6.0.0

package/src/tabs.tsx

@@ -1,354 +0,0 @@
-import * as RadixTabs from '@radix-ui/react-tabs';
-import * as React from 'react';
-
-import { cn } from './utils';
-
-// ---------------------------------------------------------------------------
-// Variant / size / fitted types (match the old Chakra recipe)
-// ---------------------------------------------------------------------------
-
-type TabsVariant = 'solid' | 'secondary' | 'segmented' | 'unstyled';
-type TabsSize = 'sm' | 'md' | 'free';
-
-// ---------------------------------------------------------------------------
-// TabsRoot
-// ---------------------------------------------------------------------------
-
-export interface TabsProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixTabs.Root>, 'onValueChange'> {
-
-  /** Visual variant. Default: "solid". */
-  variant?: TabsVariant;
-
-  /** Size preset. Default: "md". */
-  size?: TabsSize;
-
-  /** Stretch triggers to fill the list width. */
-  fitted?: boolean;
-
-  /**
-   * @deprecated Chakra-compat. Radix mounts lazily by default (content only
-   * renders when active). Kept so call-sites don't break at compile time.
-   */
-  lazyMount?: boolean;
-
-  /**
-   * @deprecated Chakra-compat. Radix unmounts inactive content by default.
-   * Kept so call-sites don't break at compile time.
-   */
-  unmountOnExit?: boolean;
-
-  /**
-   * Chakra-compatible value-change handler.
-   * Accepts both `(details: { value: string }) => void` (Chakra convention)
-   * and `(value: string) => void` (Radix convention).
-   */
-  onValueChange?: ((details: { value: string }) => void) | ((value: string) => void);
-}
-
-const ROOT_SIZE_CLASSES: Record<TabsSize, string> = {
-  sm: '[--tabs-height:2rem] [--tabs-content-padding:1.5rem]',
-  md: '[--tabs-height:2.5rem] [--tabs-content-padding:1.5rem]',
-  free: '',
-};
-
-export const TabsRoot = React.forwardRef<HTMLDivElement, TabsProps>(
-  function TabsRoot(props, ref) {
-    const {
-      variant = 'solid',
-      size = 'md',
-      fitted,
-      lazyMount: _lazyMount,
-      unmountOnExit: _unmountOnExit,
-      onValueChange,
-      className,
-      ...rest
-    } = props;
-
-    // Bridge Chakra-style `onValueChange({value})` to Radix `onValueChange(value)`
-    const handleValueChange = React.useCallback(
-      (value: string) => {
-        if (!onValueChange) return;
-        // Detect which signature the caller expects by trying the Chakra shape.
-        // Both signatures are valid TS, so we call with the object form since
-        // all existing consumers use `({ value })`.
-        (onValueChange as (details: { value: string }) => void)({ value });
-      },
-      [ onValueChange ],
-    );
-
-    return (
-      <RadixTabs.Root
-        ref={ ref }
-        data-variant={ variant }
-        data-size={ size }
-        data-fitted={ fitted ? '' : undefined }
-        className={ cn(
-          'relative',
-          ROOT_SIZE_CLASSES[size],
-          className,
-        ) }
-        onValueChange={ onValueChange ? handleValueChange : undefined }
-        { ...rest }
-      />
-    );
-  },
-);
-
-// ---------------------------------------------------------------------------
-// TabsList
-// ---------------------------------------------------------------------------
-
-export interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {
-  // Radix pass-through
-  asChild?: boolean;
-  loop?: boolean;
-  // Legacy Chakra style-prop shims
-  flexWrap?: string;
-  alignItems?: string;
-  whiteSpace?: string;
-  bgColor?: string;
-  marginBottom?: number | string;
-  mx?: string | Record<string, string>;
-  px?: string | Record<string, string>;
-  w?: string | Record<string, string>;
-  overflowX?: string | Record<string, string>;
-  overscrollBehaviorX?: string;
-  css?: Record<string, unknown>;
-  position?: string;
-  boxShadow?: string | Record<string, string>;
-  top?: number | string;
-  zIndex?: string | Record<string, string>;
-}
-
-export const TabsList = React.forwardRef<HTMLDivElement, TabsListProps>(
-  function TabsList(props, ref) {
-    const {
-      className,
-      // Strip Chakra style props
-      flexWrap: _flexWrap, alignItems: _alignItems, whiteSpace: _whiteSpace,
-      bgColor: _bgColor, marginBottom: _marginBottom, mx: _mx, px: _px,
-      w: _w, overflowX: _overflowX, overscrollBehaviorX: _overscrollBehaviorX,
-      css: _css, position: _position, boxShadow: _boxShadow, top: _top,
-      zIndex: _zIndex,
-      style: styleProp,
-      asChild, loop,
-      ...rest
-    } = props;
-
-    return (
-      <RadixTabs.List
-        ref={ ref }
-        asChild={ asChild }
-        loop={ loop }
-        className={ cn(
-          'inline-flex w-full relative isolate flex-row',
-          'min-h-[var(--tabs-height,2.5rem)]',
-          className,
-        ) }
-        style={ styleProp }
-        { ...rest }
-      />
-    );
-  },
-);
-
-// ---------------------------------------------------------------------------
-// TabsTrigger
-// ---------------------------------------------------------------------------
-
-export interface TabsTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixTabs.Trigger>, 'dir'> {
-  // Legacy Chakra style-prop shims
-  scrollSnapAlign?: string;
-  flexShrink?: number;
-  bgColor?: string | Record<string, string>;
-  w?: string;
-  py?: string;
-  borderRadius?: string;
-  fontWeight?: string;
-  color?: string;
-  _hover?: Record<string, string>;
-  position?: string;
-  top?: string;
-  left?: string;
-  visibility?: string;
-}
-
-const TRIGGER_BASE =
-  'outline-none min-w-[var(--tabs-height,2.5rem)] h-[var(--tabs-height,2.5rem)]' +
-  ' flex items-center relative cursor-pointer gap-2' +
-  ' focus-visible:z-[1] focus-visible:outline-2 focus-visible:outline-offset-0' +
-  ' disabled:cursor-not-allowed disabled:opacity-50';
-
-const TRIGGER_SIZE_CLASSES: Record<TabsSize, string> = {
-  sm: 'py-1 px-3 text-sm',
-  md: 'py-2 px-4 text-base',
-  free: '',
-};
-
-const TRIGGER_VARIANT_CLASSES: Record<TabsVariant, string> = {
-  solid:
-    'font-semibold gap-1 rounded-md bg-transparent' +
-    ' text-tabs-solid-fg' +
-    ' data-[state=active]:bg-selected-control-bg data-[state=active]:text-selected-control-text' +
-    ' data-[state=active]:hover:text-selected-control-text' +
-    ' hover:text-hover',
-  secondary:
-    'font-medium bg-transparent' +
-    ' text-tabs-secondary-fg' +
-    ' border-2 border-solid border-tabs-secondary-border rounded-md' +
-    ' data-[state=active]:bg-selected-control-bg data-[state=active]:text-selected-control-text' +
-    ' data-[state=active]:border-transparent data-[state=active]:hover:border-transparent' +
-    ' hover:text-hover hover:border-hover',
-  segmented:
-    'bg-transparent' +
-    ' text-text-primary' +
-    ' border-2 border-solid border-selected-control-bg' +
-    ' hover:text-hover' +
-    ' data-[state=active]:text-selected-control-text data-[state=active]:bg-selected-control-bg' +
-    ' data-[state=active]:border-selected-control-bg' +
-    ' data-[state=active]:hover:text-selected-control-text',
-  unstyled: '',
-};
-
-export const TabsTrigger = React.forwardRef<HTMLButtonElement, TabsTriggerProps>(
-  function TabsTrigger(props, ref) {
-    const {
-      className,
-      // Strip Chakra style props
-      scrollSnapAlign: _scrollSnapAlign, flexShrink: _flexShrink, bgColor: _bgColor,
-      w: _w, py: _py, borderRadius: _borderRadius, fontWeight: _fontWeight,
-      color: _color, _hover, position: _position, top: _top, left: _left,
-      visibility: _visibility,
-      ...rest
-    } = props;
-
-    // Read variant / size from the closest TabsRoot via DOM data attributes.
-    // We could use React context, but reading from data-* keeps the API surface
-    // identical to Chakra where recipe tokens cascade automatically.
-    const internalRef = React.useRef<HTMLButtonElement>(null);
-    const mergedRef = useMergedRef(ref, internalRef);
-    const { variant, size, fitted } = useTabsContext(internalRef);
-
-    return (
-      <RadixTabs.Trigger
-        ref={ mergedRef }
-        className={ cn(
-          'group',
-          TRIGGER_BASE,
-          TRIGGER_SIZE_CLASSES[size],
-          TRIGGER_VARIANT_CLASSES[variant],
-          fitted && 'flex-1 text-center justify-center',
-          className,
-        ) }
-        { ...rest }
-      />
-    );
-  },
-);
-
-// ---------------------------------------------------------------------------
-// TabsContent
-// ---------------------------------------------------------------------------
-
-export interface TabsContentProps extends React.ComponentPropsWithoutRef<typeof RadixTabs.Content> {
-  // Legacy Chakra style-prop shims
-  padding?: number | string;
-}
-
-export const TabsContent = React.forwardRef<HTMLDivElement, TabsContentProps>(
-  function TabsContent(props, ref) {
-    const { className, padding: _padding, ...rest } = props;
-
-    return (
-      <RadixTabs.Content
-        ref={ ref }
-        className={ cn(
-          'w-full pt-[var(--tabs-content-padding,1.5rem)]',
-          'focus-visible:outline-2 focus-visible:outline-offset-[-2px]',
-          className,
-        ) }
-        { ...rest }
-      />
-    );
-  },
-);
-
-// ---------------------------------------------------------------------------
-// TabsCounter
-// ---------------------------------------------------------------------------
-
-export interface TabsCounterProps {
-  count?: number | null;
-}
-
-const COUNTER_OVERLOAD = 50;
-
-export const TabsCounter = ({ count }: TabsCounterProps): React.ReactElement | null => {
-  if (count === undefined || count === null) {
-    return null;
-  }
-
-  return (
-    <span
-      className={ cn(
-        'group-hover:text-inherit',
-        count > 0 ?
-          'text-text-secondary' :
-          'text-[rgba(16,17,18,0.24)] dark:text-[rgba(255,255,255,0.24)]',
-      ) }
-    >
-      { count > COUNTER_OVERLOAD ? `${ COUNTER_OVERLOAD }+` : count }
-    </span>
-  );
-};
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-/** Read variant / size / fitted from the nearest ancestor [data-variant] element. */
-function useTabsContext(triggerRef: React.RefObject<HTMLButtonElement | null>): {
-  variant: TabsVariant;
-  size: TabsSize;
-  fitted: boolean;
-} {
-  const [ ctx, setCtx ] = React.useState<{
-    variant: TabsVariant;
-    size: TabsSize;
-    fitted: boolean;
-  }>({ variant: 'solid', size: 'md', fitted: false });
-
-  React.useEffect(() => {
-    const el = triggerRef.current;
-    if (!el) return;
-    const root = el.closest('[data-variant]');
-    if (!root) return;
-    setCtx({
-      variant: (root.getAttribute('data-variant') as TabsVariant) ?? 'solid',
-      size: (root.getAttribute('data-size') as TabsSize) ?? 'md',
-      fitted: root.hasAttribute('data-fitted'),
-    });
-  }, [ triggerRef ]);
-
-  return ctx;
-}
-
-/** Merge multiple refs into one callback ref. */
-function useMergedRef<T>(
-  ...refs: Array<React.Ref<T> | undefined>
-): React.RefCallback<T> {
-  return React.useCallback(
-    (instance: T | null) => {
-      for (const ref of refs) {
-        if (!ref) continue;
-        if (typeof ref === 'function') {
-          ref(instance);
-        } else {
-          (ref as React.MutableRefObject<T | null>).current = instance;
-        }
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    refs,
-  );
-}

package/src/tag.tsx

@@ -1,159 +0,0 @@
-import { cva } from 'class-variance-authority';
-import * as React from 'react';
-
-import { cn } from './utils';
-
-import { CloseButton } from './close-button';
-import { Skeleton } from './skeleton';
-import { Tooltip } from './tooltip';
-
-// Inline constants
-const nbsp = String.fromCharCode(160);
-
-// Inline truncation tooltip
-function TruncatedTextTooltip({ label, children }: { readonly label: React.ReactNode; readonly children: React.ReactNode }) {
-  return (
-    <Tooltip content={ label } positioning={{ placement: 'top' }}>
-      { children }
-    </Tooltip>
-  );
-}
-
-type TagVariant = 'subtle' | 'clickable' | 'filter' | 'select';
-type TagSize = 'sm' | 'md' | 'lg';
-
-const tagVariants = cva(
-  [
-    'inline-flex items-center align-top max-w-full select-text rounded-sm',
-    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500',
-  ].join(' '),
-  {
-    variants: {
-      variant: {
-        subtle: 'bg-[var(--color-tag-subtle-bg)] text-[var(--color-tag-subtle-fg)]',
-        clickable: [
-          'cursor-pointer',
-          'bg-[var(--color-tag-clickable-bg)] text-[var(--color-tag-clickable-fg)]',
-          'hover:opacity-76',
-        ].join(' '),
-        filter: 'bg-[var(--color-tag-filter-bg)]',
-        select: [
-          'cursor-pointer',
-          'bg-[var(--color-tag-select-bg)] text-[var(--color-tag-select-fg)]',
-          'hover:text-[var(--color-hover)] hover:opacity-76',
-        ].join(' '),
-      },
-      size: {
-        sm: 'px-1 py-0.5 min-h-5 gap-1 text-xs',
-        md: 'px-1 py-0.5 min-h-6 gap-1 text-sm',
-        lg: 'px-1.5 py-1.5 min-h-8 min-w-8 gap-1 text-sm',
-      },
-    },
-    defaultVariants: {
-      variant: 'subtle',
-      size: 'md',
-    },
-  },
-);
-
-const TAG_SELECTED_CLASSES = [
-  'bg-[var(--color-tag-select-selected-bg)]',
-  'text-[var(--color-tag-select-selected-fg)]',
-  'hover:text-[var(--color-tag-select-selected-fg)]',
-  'hover:opacity-76',
-].join(' ');
-
-const TAG_DISABLED_CLASSES = 'opacity-40 pointer-events-none cursor-not-allowed';
-
-export interface TagProps extends Omit<React.ComponentPropsWithRef<'span'>, 'size'> {
-  readonly variant?: TagVariant;
-  readonly size?: TagSize;
-  readonly startElement?: React.ReactNode;
-  readonly endElement?: React.ReactNode;
-  readonly endElementProps?: React.HTMLAttributes<HTMLSpanElement>;
-  readonly label?: string;
-  readonly onClose?: VoidFunction;
-  readonly closable?: boolean;
-  readonly truncated?: boolean;
-  readonly loading?: boolean;
-  readonly selected?: boolean;
-  readonly disabled?: boolean;
-}
-
-export const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
-  function Tag(props, ref) {
-    const {
-      variant,
-      size,
-      startElement,
-      endElement,
-      endElementProps,
-      label,
-      onClose,
-      closable = Boolean(onClose),
-      children,
-      truncated = false,
-      loading,
-      selected,
-      disabled,
-      className,
-      ...rest
-    } = props;
-
-    const labelElement = label ? (
-      <span className="text-[var(--color-text-secondary)]">{ label }:{ nbsp }</span>
-    ) : null;
-
-    const labelSpan = (
-      <span className="line-clamp-1 whitespace-nowrap text-ellipsis font-medium inline">
-        { labelElement }{ children }
-      </span>
-    );
-
-    const contentElement = truncated ? (
-      <TruncatedTextTooltip label={ children }>
-        { labelSpan }
-      </TruncatedTextTooltip>
-    ) : labelSpan;
-
-    return (
-      <Skeleton loading={ loading } asChild>
-        <span
-          ref={ ref }
-          className={ cn(
-            tagVariants({ variant, size }),
-            selected && !loading && TAG_SELECTED_CLASSES,
-            disabled && TAG_DISABLED_CLASSES,
-            className,
-          ) }
-          { ...(selected && !loading && { 'data-selected': true }) }
-          { ...(disabled && { 'data-disabled': true }) }
-          { ...rest }
-        >
-          { startElement && (
-            <span className="shrink-0 inline-flex items-center justify-center empty:hidden">
-              { startElement }
-            </span>
-          ) }
-          { contentElement }
-          { endElement && (
-            <span
-              { ...endElementProps }
-              className={ cn(
-                'shrink-0 inline-flex items-center justify-center',
-                endElementProps?.className,
-              ) }
-            >
-              { endElement }
-            </span>
-          ) }
-          { closable && (
-            <span className="shrink-0 inline-flex items-center justify-center">
-              <CloseButton onClick={ onClose }/>
-            </span>
-          ) }
-        </span>
-      </Skeleton>
-    );
-  },
-);

package/src/textarea.tsx

@@ -1,60 +0,0 @@
-import { cva } from 'class-variance-authority';
-import React from 'react';
-
-import { cn } from './utils';
-
-const textareaVariants = cva(
-  [
-    'w-full appearance-none outline-none transition-colors resize-y',
-    'bg-[var(--color-input-bg)] text-[var(--color-input-fg)] border-[var(--color-input-border)]',
-    'placeholder:text-[var(--color-input-placeholder,theme(colors.gray.400))]',
-    'hover:border-[var(--color-input-border-hover,theme(colors.gray.400))]',
-    'focus:border-[var(--color-input-border-focus,theme(colors.blue.500))]',
-    'focus:placeholder:text-[var(--color-input-placeholder-focus,theme(colors.gray.300))]',
-    'disabled:opacity-40 disabled:cursor-not-allowed',
-    'read-only:opacity-70',
-    'data-[invalid]:border-[var(--color-input-border-invalid,theme(colors.red.500))]',
-  ].join(' '),
-  {
-    variants: {
-      size: {
-        xs: 'px-2 py-1 text-xs rounded',
-        sm: 'px-3 py-2 text-sm rounded-md',
-        md: 'px-4 py-2 text-base rounded-md',
-        lg: 'px-4 py-3 text-lg rounded-lg',
-        '2xl': 'px-4 py-3 text-xl rounded-lg',
-      },
-      variant: {
-        outline: 'border border-solid',
-        filled: 'border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]',
-        unstyled: 'border-0 bg-transparent p-0',
-      },
-    },
-    defaultVariants: {
-      size: 'md',
-      variant: 'outline',
-    },
-  },
-);
-
-type TextareaSize = 'xs' | 'sm' | 'md' | 'lg' | '2xl';
-type TextareaVariant = 'outline' | 'filled' | 'unstyled';
-
-export interface TextareaProps extends Omit<React.ComponentPropsWithRef<'textarea'>, 'size'> {
-  readonly size?: TextareaSize;
-  readonly variant?: TextareaVariant;
-}
-
-export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ size, variant, className, ...rest }, ref) => {
-    return (
-      <textarea
-        ref={ ref }
-        className={ cn(textareaVariants({ size, variant }), className) }
-        { ...rest }
-      />
-    );
-  },
-);
-
-Textarea.displayName = 'Textarea';

package/src/toaster.tsx

@@ -1,117 +0,0 @@
-'use client';
-
-import type React from 'react';
-import { Toaster as SonnerToaster, toast } from 'sonner';
-
-const SECOND = 1_000;
-const DURATION = 10 * SECOND;
-
-interface ToastOptions {
-  readonly id?: string | number;
-  readonly title?: string;
-  readonly description?: string;
-  readonly type?: 'info' | 'warning' | 'success' | 'error' | 'loading';
-  readonly duration?: number;
-  readonly action?: { readonly label: string; readonly onClick: () => void };
-  readonly onStatusChange?: (details: { readonly status: string }) => void;
-}
-
-function mapOptions(opts: ToastOptions): Parameters<typeof toast>[1] {
-  const external: Parameters<typeof toast>[1] = {
-    id: opts.id,
-    description: opts.description,
-    duration: opts.duration,
-  };
-
-  if (opts.action) {
-    external.action = {
-      label: opts.action.label,
-      onClick: opts.action.onClick,
-    };
-  }
-
-  if (opts.onStatusChange) {
-    const cb = opts.onStatusChange;
-    external.onDismiss = () => cb({ status: 'unmounted' });
-    external.onAutoClose = () => cb({ status: 'unmounted' });
-  }
-
-  return external;
-}
-
-function create(opts: ToastOptions): string | number {
-  const external = mapOptions(opts);
-  const title = opts.title ?? '';
-
-  switch (opts.type) {
-    case 'success':
-      return toast.success(title, external);
-    case 'error':
-      return toast.error(title, external);
-    case 'warning':
-      return toast.warning(title, external);
-    case 'loading':
-      return toast.loading(title, external);
-    case 'info':
-    default:
-      return toast.info(title, external);
-  }
-}
-
-function update(id: string | number, opts: ToastOptions): void {
-  const title = opts.title ?? '';
-
-  // Sonner does not have a dedicated update method.
-  // Re-calling a typed toast with the same id replaces it in-place.
-  const external = mapOptions({ ...opts, id });
-
-  switch (opts.type) {
-    case 'success':
-      toast.success(title, external);
-      break;
-    case 'error':
-      toast.error(title, external);
-      break;
-    case 'warning':
-      toast.warning(title, external);
-      break;
-    case 'loading':
-      toast.loading(title, external);
-      break;
-    case 'info':
-    default:
-      toast.info(title, external);
-      break;
-  }
-}
-
-export const toaster = {
-  create,
-  success: (opts: ToastOptions) => create({ ...opts, type: 'success' }),
-  error: (opts: ToastOptions) => create({ ...opts, type: 'error' }),
-  loading: (opts: ToastOptions) => create({ ...opts, type: 'loading' }),
-  update,
-  remove: (id: string | number) => toast.dismiss(id),
-} as const;
-
-export const Toaster: React.FC = () => {
-  return (
-    <SonnerToaster
-      position="top-right"
-      richColors
-      closeButton
-      duration={ DURATION }
-      offset={{ top: 12, right: 12, bottom: 12, left: 12 }}
-      mobileOffset={{ top: 16, right: 16, bottom: 16, left: 16 }}
-      toastOptions={{
-        className: 'font-sans',
-        style: {
-          fontFamily: 'var(--font-sans, "Geist", sans-serif)',
-          color: 'var(--color-text-primary)',
-          backgroundColor: 'var(--color-bg-primary)',
-          borderColor: 'var(--color-border-divider)',
-        },
-      }}
-    />
-  );
-};