@luxfi/ui 7.4.9 → 7.4.11

package/src/tabs.tsx

@@ -1,20 +1,103 @@
-import * as RadixTabs from '@radix-ui/react-tabs';
+import { Tabs, Text, useTabsContext } from '@hanzo/gui';
 import * as React from 'react';
 
-import { cn } from './utils';
-
-// ---------------------------------------------------------------------------
-// Variant / size / fitted types (match the old Chakra recipe)
-// ---------------------------------------------------------------------------
+import { ink } from './ink';
+
+// The Lux tab skin, on the gui engine.
+//
+// gui's Tabs already owns everything Radix was imported for: roving focus,
+// `activationMode`, the `data-state="active" | "inactive"` contract, and an
+// `activeStyle` prop that applies while a tab is selected. So this file is a
+// SKIN — a variant table and three wrappers — and nothing else.
+//
+// The styles are inline props rather than `styled()` wrappers, because
+// `Tabs.Tab` is `TabFrame.styleable(...)`: an HOC, not a frame. `styled()` over
+// one does not compile style props to classes — they leak onto the element as
+// lowercase HTML attributes (`backgroundcolor="…"`) and nothing is styled.
+// Extending `Tabs.Tab` would look right, typecheck, and render unstyled.
+//
+// What went with Radix: a `useTabsContext` that read `variant` and `size` off a
+// `data-*` attribute of the nearest ancestor DOM node, inside a `useEffect`. It
+// could only answer AFTER paint, so every trigger rendered one frame in the
+// wrong variant and then corrected itself, and during SSR it could not answer at
+// all. Variant and size are props of the root, so they travel as React context.
 
 type TabsVariant = 'solid' | 'secondary' | 'segmented' | 'unstyled';
 type TabsSize = 'sm' | 'md' | 'free';
 
+type Style = Record<string, unknown>;
+
+/** Variant and size, declared on the root and read by every trigger. */
+const Shape = React.createContext<{ variant: TabsVariant; size: TabsSize; fitted: boolean }>({
+  variant: 'solid',
+  size: 'md',
+  fitted: false,
+});
+
+const SIZE: Record<TabsSize, Style> = {
+  sm: { height: 32, minWidth: 32, paddingVertical: 4, paddingHorizontal: 12, fontSize: 14 },
+  md: { height: 40, minWidth: 40, paddingVertical: 8, paddingHorizontal: 16, fontSize: 16 },
+  free: {},
+};
+
+const SELECTED_BG = 'var(--color-selected-control-bg)';
+const SELECTED_FG = 'var(--color-selected-control-text)';
+
+// Resting look and selected look, per variant, as two plain objects that get
+// MERGED here rather than handed to gui's `activeStyle`.
+//
+// `activeStyle` is gui's own prop for "while this tab is selected", and it does
+// not survive contact with a variant that also styles the resting state: the
+// trigger spreads `activeStyle` and only THEN spreads the caller's remaining
+// props, so any key set in both — `backgroundColor` for solid, `borderColor`
+// for secondary — resolves to the resting value even while selected. Measured:
+// the selected tab's computed background stayed `rgba(0, 0, 0, 0)`, identical
+// to an unselected one, with every behavioural test still passing.
+//
+// Selection is readable instead (`useTabsContext`), so the style is a function
+// of state and one object reaches gui with nothing left to override it.
+const VARIANT: Record<TabsVariant, { rest: Style; active: Style }> = {
+  solid: {
+    rest: {
+      fontWeight: '600',
+      borderRadius: 6,
+      color: 'var(--color-tabs-solid-fg)',
+      hoverStyle: { color: 'var(--color-hover)' },
+    },
+    active: { backgroundColor: SELECTED_BG, color: SELECTED_FG },
+  },
+  secondary: {
+    rest: {
+      fontWeight: '500',
+      borderRadius: 6,
+      borderWidth: 2,
+      borderColor: 'var(--color-tabs-secondary-border)',
+      color: 'var(--color-tabs-secondary-fg)',
+      hoverStyle: { color: 'var(--color-hover)', borderColor: 'var(--color-hover)' },
+    },
+    active: { backgroundColor: SELECTED_BG, color: SELECTED_FG, borderColor: 'transparent' },
+  },
+  segmented: {
+    rest: {
+      borderWidth: 2,
+      borderColor: SELECTED_BG,
+      color: 'var(--color-text-primary)',
+      hoverStyle: { color: 'var(--color-hover)' },
+    },
+    active: { backgroundColor: SELECTED_BG, borderColor: SELECTED_BG, color: SELECTED_FG },
+  },
+  unstyled: { rest: {}, active: {} },
+};
+
+const LIST_HEIGHT: Record<TabsSize, number | undefined> = { sm: 32, md: 40, free: undefined };
+
 // ---------------------------------------------------------------------------
-// TabsRoot
+// Root
 // ---------------------------------------------------------------------------
 
-export interface TabsProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixTabs.Root>, 'onValueChange'> {
+// `size` is narrowed away from gui's own token-valued `size` on purpose: a Lux
+// tab bar has three sizes, not the whole size ramp.
+export interface TabsProps extends Omit<React.ComponentProps<typeof Tabs>, 'onValueChange' | 'size'> {
 
   /** Visual variant. Default: "solid". */
   variant?: TabsVariant;
@@ -25,256 +108,99 @@ export interface TabsProps extends Omit<React.ComponentPropsWithoutRef<typeof Ra
   /** 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);
+  /** Fires with the newly selected value. */
+  onValueChange?: (details: { 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 = ({
+  variant = 'solid',
+  size = 'md',
+  fitted = false,
+  onValueChange,
+  ...rest
+}: TabsProps): React.ReactElement => {
+  const shape = React.useMemo(() => ({ variant, size, fitted }), [ variant, size, fitted ]);
 
-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 }
+  return (
+    <Shape.Provider value={ shape }>
+      <Tabs
+        unstyled
+        position="relative"
+        orientation="horizontal"
+        onValueChange={ onValueChange ? (value: string) => onValueChange({ value }) : undefined }
         { ...rest }
       />
-    );
-  },
-);
+    </Shape.Provider>
+  );
+};
 
 // ---------------------------------------------------------------------------
-// TabsList
+// List
 // ---------------------------------------------------------------------------
 
-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 type TabsListProps = React.ComponentProps<typeof Tabs.List>;
 
-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 }
-      />
-    );
-  },
-);
+export const TabsList = (props: TabsListProps): React.ReactElement => {
+  const { size } = React.useContext(Shape);
+  return (
+    <Tabs.List
+      unstyled
+      width="100%"
+      position="relative"
+      flexDirection="row"
+      backgroundColor="transparent"
+      minHeight={ LIST_HEIGHT[size] }
+      { ...props }
+    />
+  );
+};
 
 // ---------------------------------------------------------------------------
-// TabsTrigger
+// Trigger
 // ---------------------------------------------------------------------------
 
-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;
-}
+export type TabsTriggerProps = React.ComponentProps<typeof Tabs.Tab>;
 
-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';
+export const TabsTrigger = ({ children, ...props }: TabsTriggerProps): React.ReactElement => {
+  const { variant, size, fitted } = React.useContext(Shape);
+  const { rest, active } = VARIANT[variant];
+  const selected = useTabsContext().value === props.value;
 
-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: '',
+  return (
+    <Tabs.Tab
+      unstyled
+      flexDirection="row"
+      alignItems="center"
+      justifyContent="center"
+      position="relative"
+      cursor="pointer"
+      gap={ 8 }
+      borderWidth={ 0 }
+      { ...SIZE[size] }
+      { ...rest }
+      { ...(selected ? active : null) }
+      { ...(fitted ? { flex: 1 } : null) }
+      { ...props }
+    >
+      { ink(children, undefined, { fontSize: 'inherit', color: 'inherit', fontWeight: 'inherit' }) }
+    </Tabs.Tab>
+  );
 };
 
-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
+// Content
 // ---------------------------------------------------------------------------
 
-export interface TabsContentProps extends React.ComponentPropsWithoutRef<typeof RadixTabs.Content> {
-  // Legacy Chakra style-prop shims
-  padding?: number | string;
-}
+export type TabsContentProps = React.ComponentProps<typeof Tabs.Content>;
 
-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 }
-      />
-    );
-  },
+export const TabsContent = ({ children, ...props }: TabsContentProps): React.ReactElement => (
+  <Tabs.Content unstyled width="100%" paddingTop={ 24 } backgroundColor="transparent" { ...props }>
+    { ink(children) }
+  </Tabs.Content>
 );
 
 // ---------------------------------------------------------------------------
-// TabsCounter
+// Counter
 // ---------------------------------------------------------------------------
 
 export interface TabsCounterProps {
@@ -283,72 +209,16 @@ export interface TabsCounterProps {
 
 const COUNTER_OVERLOAD = 50;
 
+/**
+ * The count beside a tab label. Zero is deliberately dimmer than a real count —
+ * "nothing here" should read quieter than "three things here".
+ */
 export const TabsCounter = ({ count }: TabsCounterProps): React.ReactElement | null => {
-  if (count === undefined || count === null) {
-    return 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)]',
-      ) }
-    >
+    <Text color={ (count > 0 ? 'var(--color-text-secondary)' : 'var(--color-text-disabled)') as never }>
       { count > COUNTER_OVERLOAD ? `${ COUNTER_OVERLOAD }+` : count }
-    </span>
+    </Text>
   );
 };
-
-// ---------------------------------------------------------------------------
-// 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/textarea.tsx

@@ -1,33 +1,11 @@
 import { TextArea as GuiTextArea } from '@hanzo/gui';
 import React from 'react';
 
-import { cn } from './utils';
+import { CONTROL, VARIANT } from './input';
 
-const TEXTAREA_BASE = [
-  '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(' ');
-
-const TEXTAREA_SIZE_CLASSES: Record<string, string> = {
-  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',
-};
-
-const TEXTAREA_VARIANT_CLASSES: Record<string, string> = {
-  outline: 'border border-solid',
-  filled: 'border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]',
-  unstyled: 'border-0 bg-transparent p-0',
-};
+// gui's TextArea — multiline TextInput on native, `<textarea>` on web. The
+// frame, the variants and the placeholder rule are the Input's: a textarea is a
+// text control that wraps, not a second design.
 
 type TextareaSize = 'xs' | 'sm' | 'md' | 'lg' | '2xl';
 type TextareaVariant = 'outline' | 'filled' | 'unstyled';
@@ -35,12 +13,20 @@ type TextareaVariant = 'outline' | 'filled' | 'unstyled';
 export interface TextareaProps extends Omit<React.ComponentPropsWithRef<'textarea'>, 'size'> {
   readonly size?: TextareaSize;
   readonly variant?: TextareaVariant;
+
   /** Tamagui / React-Native convention — bridged to native `onChange` (see Input). */
   readonly onChangeText?: (text: string) => void;
 }
 
-// gui's TextArea — multiline TextInput on native, `<textarea>` on web — wearing
-// the Lux size/variant classes.
+/** Same ramp as Input, but a textarea is sized by padding, not by height. */
+const SIZE: Record<TextareaSize, Record<string, number>> = {
+  xs: { paddingHorizontal: 8, paddingVertical: 4, fontSize: 12, borderRadius: 4 },
+  sm: { paddingHorizontal: 12, paddingVertical: 8, fontSize: 14, borderRadius: 6 },
+  md: { paddingHorizontal: 16, paddingVertical: 8, fontSize: 16, borderRadius: 6 },
+  lg: { paddingHorizontal: 16, paddingVertical: 12, fontSize: 18, borderRadius: 8 },
+  '2xl': { paddingHorizontal: 16, paddingVertical: 12, fontSize: 20, borderRadius: 8 },
+};
+
 export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ size = 'md', variant = 'outline', className, onChange, onChangeText, ...rest }, ref) => {
     const handleChange = React.useCallback(
@@ -50,11 +36,15 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       },
       [ onChange, onChangeText ],
     );
+
     return (
       <GuiTextArea
         ref={ ref as never }
         unstyled
-        className={ cn(TEXTAREA_BASE, TEXTAREA_SIZE_CLASSES[size], TEXTAREA_VARIANT_CLASSES[variant], className) }
+        className={ className ? `lux-control ${ className }` : 'lux-control' }
+        { ...CONTROL }
+        { ...SIZE[size] }
+        { ...VARIANT[variant] }
         { ...(rest as object) }
         onChange={ handleChange as never }
       />