@luxfi/ui 5.5.3 → 5.6.0

package/src/tabs.tsx

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

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

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

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