@luxfi/ui 7.4.10 → 7.4.12

package/src/icon-button.tsx

@@ -3,9 +3,18 @@ import * as React from 'react';
 
 import { Skeleton } from './skeleton';
 
-// ---------------------------------------------------------------------------
-// IconButtonFrame — styled base
-// ---------------------------------------------------------------------------
+// A button whose whole content is an icon.
+//
+// `expanded`, `selected` and `highlighted` are React props, so the look they
+// select is chosen HERE, by merging style objects, rather than by writing
+// `data-[selected]:` classes and letting a stylesheet re-derive the state that
+// this component already knows. The `data-*` attributes are still emitted —
+// they are a DOM contract consumers target — but nothing in this file styles
+// through them.
+//
+// Two things stay CSS because no prop reaches them: the spinner's keyframe (a
+// gui transition interpolates between two states, it does not loop) and the
+// size of a descendant `svg`.
 
 const IconButtonFrame = styled(View, {
   name: 'LuxIconButton',
@@ -16,7 +25,7 @@ const IconButtonFrame = styled(View, {
   alignItems: 'center',
   justifyContent: 'center',
   padding: 0,
-  minWidth: 'auto' as any,
+  minWidth: 'auto' as never,
   flexShrink: 1,
   backgroundColor: 'transparent',
   borderWidth: 0,
@@ -25,189 +34,173 @@ const IconButtonFrame = styled(View, {
     size: {
       '2xs': { width: 20, height: 20, borderRadius: 4 },
       '2xs_alt': { width: 20, height: 20, borderRadius: 4 },
-      md: { width: 32, height: 32, borderRadius: 'var(--radius-base, 8px)' as any },
+      md: { width: 32, height: 32, borderRadius: 8 },
     },
 
     disabled: {
-      true: {
-        opacity: 0.4,
-        cursor: 'not-allowed',
-        pointerEvents: 'none',
-      },
+      true: { opacity: 0.4, cursor: 'not-allowed', pointerEvents: 'none' },
     },
   } as const,
 });
 
-// ---------------------------------------------------------------------------
-// Variant class maps (CSS custom properties via Tailwind)
-// ---------------------------------------------------------------------------
-
-const VARIANT_CLASSES: Record<string, string> = {
-  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',
-  ].join(' '),
-
-  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',
-  ].join(' '),
-
-  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',
-  ].join(' '),
-
-  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',
-  ].join(' '),
-
-  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',
-  ].join(' '),
-};
+type Style = Record<string, unknown>;
+
+const HOVER = 'var(--color-hover)';
+const SELECTED_BG = 'var(--color-selected-control-bg)';
+const SELECTED_FG = 'var(--color-selected-control-text)';
+
+/**
+ * Resting look, and the looks that replace it while selected or expanded.
+ * Merged in that order, so a key set in two of them resolves to the later —
+ * which is why `selected` and `expanded` are objects rather than `hoverStyle`
+ * entries that would fight the resting value.
+ */
+const VARIANT: Record<string, { rest: Style; selected?: Style; expanded?: Style }> = {
+  plain: {
+    rest: { backgroundColor: 'transparent', hoverStyle: { backgroundColor: 'transparent' } },
+  },
+
+  icon_secondary: {
+    rest: {
+      backgroundColor: 'transparent',
+      color: 'var(--color-icon-secondary)',
+      hoverStyle: { color: HOVER },
+    },
+    selected: { backgroundColor: SELECTED_BG, color: SELECTED_FG, hoverStyle: { color: HOVER } },
+    expanded: { color: HOVER },
+  },
+
+  icon_background: {
+    rest: {
+      backgroundColor: 'var(--color-button-icon-background-bg)',
+      color: 'var(--color-icon-secondary)',
+      hoverStyle: { color: HOVER },
+    },
+    selected: { backgroundColor: SELECTED_BG, color: SELECTED_FG, hoverStyle: { color: HOVER } },
+    expanded: { color: HOVER },
+  },
 
-// SVG icon size classes per size variant
-const ICON_SIZE_CLASSES: Record<string, string> = {
-  '2xs': '[&_svg]:size-5',
-  '2xs_alt': '[&_svg]:size-3',
-  md: '[&_svg]:size-5',
+  link: {
+    rest: {
+      backgroundColor: 'transparent',
+      color: 'var(--color-link-primary)',
+      fontWeight: '400',
+      paddingHorizontal: 0,
+      height: 'auto',
+      hoverStyle: { backgroundColor: 'transparent', color: 'var(--color-link-primary-hover)' },
+      disabledStyle: { color: 'var(--color-text-secondary)' },
+    },
+  },
+
+  dropdown: {
+    rest: {
+      borderWidth: 2,
+      borderStyle: 'solid',
+      backgroundColor: 'transparent',
+      color: 'var(--color-button-dropdown-fg)',
+      borderColor: 'var(--color-button-dropdown-border)',
+      hoverStyle: { backgroundColor: 'transparent', color: HOVER, borderColor: HOVER },
+    },
+    selected: { backgroundColor: SELECTED_BG, color: SELECTED_FG, borderColor: 'transparent', hoverStyle: { color: HOVER } },
+    expanded: { backgroundColor: 'transparent', color: HOVER, borderColor: HOVER },
+  },
+
+  pagination: {
+    rest: {
+      borderWidth: 2,
+      borderStyle: 'solid',
+      backgroundColor: 'transparent',
+      color: 'var(--color-button-pagination-fg)',
+      borderColor: 'var(--color-button-pagination-border)',
+      hoverStyle: { backgroundColor: 'transparent', color: HOVER, borderColor: HOVER },
+    },
+    selected: { backgroundColor: SELECTED_BG, color: SELECTED_FG, borderColor: 'transparent' },
+  },
 };
 
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
+/** Descendant `svg` size per control size, published as a custom property. */
+const ICON_SIZE: Record<string, number> = { '2xs': 20, '2xs_alt': 12, md: 20 };
 
-type Variant = 'plain' | 'icon_secondary' | 'icon_background' | 'link' | 'dropdown' | 'pagination';
+type Variant = keyof typeof VARIANT;
 type Size = '2xs' | '2xs_alt' | 'md';
 
 export interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'size'> {
+
   /** 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 */
+
+  /** Also emitted as data-expanded for consumer styling */
   expanded?: boolean;
-  /** Maps to data-selected for toggle styling */
+
+  /** Also emitted as data-selected for consumer styling */
   selected?: boolean;
-  /** Maps to data-highlighted */
+
+  /** Also emitted as 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
-// ---------------------------------------------------------------------------
-
-const SP = 4;
-
 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: _as,
-      style: styleProp,
-      // Strip Chakra style props
-      boxSize: _boxSize,
-      color: _color,
-      px: _px,
-      borderRadius: _borderRadius,
-      ml: _ml,
-      mr: _mr,
-      _hover,
-      _expanded,
-      ...rest
+      size, variant = 'plain', loading, loadingSkeleton = false,
+      expanded, selected, highlighted, disabled, className, children,
+      as: asProp, style: styleProp, ...rest
     } = props;
 
-    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 mergedStyle = Object.keys(shimStyle).length > 0 ? shimStyle : undefined;
-
-    const variantClass = VARIANT_CLASSES[variant] ?? VARIANT_CLASSES.plain;
-    const iconSizeClass = size ? (ICON_SIZE_CLASSES[size] ?? '') : '';
-    const combinedClassName = [variantClass, iconSizeClass, className].filter(Boolean).join(' ');
+    const look = VARIANT[variant] ?? VARIANT.plain;
+    const iconSize = size ? ICON_SIZE[size] : undefined;
 
     const button = (
       <IconButtonFrame
-        ref={ref as any}
-        size={size as any}
-        disabled={(!loadingSkeleton && (loading || disabled)) || undefined}
-        render={_as ? (React.createElement(_as) as React.ReactElement) : undefined}
-        className={combinedClassName}
-        style={mergedStyle}
-        {...(expanded ? { 'data-expanded': true } : {})}
-        {...(selected ? { 'data-selected': true } : {})}
-        {...(highlighted ? { 'data-highlighted': true } : {})}
-        {...(loadingSkeleton ? { 'data-loading-skeleton': true } : {})}
-        {...(rest as any)}
+        ref={ ref as never }
+        size={ size as never }
+        disabled={ (!loadingSkeleton && (loading || disabled)) || undefined }
+        render={ asProp ? (React.createElement(asProp) as React.ReactElement) : undefined }
+        className={ [ 'lux-icon', className ].filter(Boolean).join(' ') }
+        style={ { ...styleProp, ...(iconSize ? { '--icon-size': `${ iconSize }px` } : null) } as React.CSSProperties }
+        { ...look.rest }
+        { ...(selected ? look.selected : null) }
+        { ...(expanded ? look.expanded : null) }
+        { ...(expanded ? { 'data-expanded': true } : {}) }
+        { ...(selected ? { 'data-selected': true } : {}) }
+        { ...(highlighted ? { 'data-highlighted': true } : {}) }
+        { ...(loadingSkeleton ? { 'data-loading-skeleton': true } : {}) }
+        { ...(rest as object) }
       >
-        {loading ? (
-          <span
-            className="inline-block size-5 animate-spin rounded-full border-2 border-current border-b-transparent border-l-transparent"
+        { loading ? (
+          <View
+            className="lux-spin"
+            render={ <span /> }
             role="status"
             aria-label="Loading"
+            width={ 20 }
+            height={ 20 }
+            borderRadius={ 1000 }
+            borderWidth={ 2 }
+            borderColor={ 'currentColor' as never }
+            borderBottomColor={ 'transparent' as never }
+            borderLeftColor={ 'transparent' as never }
           />
-        ) : children}
+        ) : children }
       </IconButtonFrame>
     );
 
     if (loadingSkeleton) {
       return (
-        <Skeleton loading={loadingSkeleton} asChild ref={ref as React.ForwardedRef<HTMLDivElement>}>
-          {button}
+        <Skeleton loading={ loadingSkeleton } asChild ref={ ref as React.ForwardedRef<HTMLDivElement> }>
+          { button }
         </Skeleton>
       );
     }

package/src/ink.tsx

@@ -0,0 +1,37 @@
+import { Text } from '@hanzo/gui';
+import { Children, createElement, type ComponentType, type ReactNode } from 'react';
+
+/**
+ * Give bare text a Text host; pass elements through untouched.
+ *
+ * gui's primitives are react-native primitives, and a react-native View cannot
+ * lay out a raw string. On native it throws; on web it is worse than that,
+ * because it renders — as a zero-height box with no error and no type failure.
+ * That is the whole failure mode: a build stays green and a label is invisible.
+ *
+ * So every component here that takes free-form children runs them through this,
+ * and a string child then behaves the same on web and on native.
+ */
+export const ink = (
+  children: ReactNode,
+  Wrap: ComponentType<Record<string, unknown>> = Text as never,
+  props: Record<string, unknown> = {},
+): ReactNode => {
+  // Nothing to host: hand the children BACK, the same ones. Not a shortcut —
+  // `Children.map` rebuilds the list and re-keys it, so an only child comes out
+  // as a one-element array. `asChild` resolves its target with
+  // `Children.only`, which then finds a list instead of an element and renders
+  // nothing at all: every row of the account menu vanished this way while the
+  // menu itself opened correctly and no error was logged.
+  let hasText = false;
+  Children.forEach(children, (child) => {
+    if (typeof child === 'string' || typeof child === 'number') hasText = true;
+  });
+  if (!hasText) return children;
+
+  return Children.map(children, (child) => (
+    typeof child === 'string' || typeof child === 'number' ?
+      createElement(Wrap, props, child) :
+      child
+  ));
+};

package/src/input-group.tsx

@@ -1,15 +1,16 @@
+import { XStack } from '@hanzo/gui';
 import { debounce } from 'es-toolkit';
 import * as React from 'react';
 
-import { cn } from './utils';
+import { ink } from './ink';
 
 import type { InputProps } from './input';
 
-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;
-}
+// The adornment widths must be applied before the browser paints, or the field
+// renders one frame with default padding and the text visibly jumps out from
+// under the icon. useLayoutEffect does that but has no meaning while rendering
+// on the server, where it only warns.
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 
 export interface InputElementProps extends React.HTMLAttributes<HTMLDivElement> {
   readonly placement?: 'start' | 'end';
@@ -81,7 +82,7 @@ export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
       };
     }, [ calculateInlinePaddings ]);
 
-    React.useEffect(() => {
+    useIsomorphicLayoutEffect(() => {
       calculateInlinePaddings();
 
       const resizeHandler = debounce(calculateInlinePaddings, 300);
@@ -110,48 +111,70 @@ export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
     const { className: endClassName, ...endRest } = endElementProps ?? {};
 
     return (
-      <div
-        ref={ combinedRef }
-        className={ cn('relative flex w-full items-center', className) }
-        { ...rest }
+      <XStack
+        ref={ combinedRef as never }
+        position="relative"
+        width="100%"
+        alignItems="center"
+        className={ className }
+        { ...(rest as object) }
       >
         { startElement && (
-          <div
-            ref={ startElementRef }
-            className={ cn(
-              'pointer-events-none absolute inset-y-0 left-0 z-[1] flex items-center text-[var(--chakra-colors-input-element)]',
-              startClassName,
-            ) }
-            { ...startRest }
+          <XStack
+            ref={ startElementRef as never }
+            position="absolute"
+            top={ 0 }
+            bottom={ 0 }
+            left={ 0 }
+            zIndex={ 1 }
+            alignItems="center"
+            pointerEvents="none"
+            color={ 'var(--color-icon-secondary)' as never }
+            className={ startClassName }
+            { ...(startRest as object) }
           >
-            { startElement }
-          </div>
+            { ink(startElement) }
+          </XStack>
         ) }
         { React.Children.map(children, (child: React.ReactElement<InputProps>) => {
-          if (getComponentDisplayName(child.type) !== 'FieldInput') {
+          if (!React.isValidElement(child)) {
             return child;
           }
+          // The adornments are absolutely positioned over the field, so the
+          // control has to be inset by their measured width or the text starts
+          // underneath them. Written as inline padding rather than the `ps`/`pe`
+          // style props this once carried: those are Chakra's, and Input is now
+          // a Tailwind/gui component that spreads unknown props onto the DOM,
+          // so they applied nothing and the icon sat on the placeholder.
+          const start = startElement ? startOffset ?? inlinePaddings?.start : undefined;
+          const end = endElement ? endOffset ?? inlinePaddings?.end : undefined;
+          const px = (v: string | number) => typeof v === 'number' ? `${ v }px` : v;
           return React.cloneElement(child, {
-            ...(startElement && { ps: startOffset ?? (inlinePaddings?.start ? `${ inlinePaddings.start }px` : undefined) }),
-            ...(endElement && { pe: endOffset ?? (inlinePaddings?.end ? `${ inlinePaddings.end }px` : undefined) }),
-            // hide input value and placeholder for the first render
-            value: inlinePaddings ? child.props.value : undefined,
-            placeholder: inlinePaddings ? child.props.placeholder : undefined,
+            style: {
+              ...child.props.style,
+              ...(start !== undefined && { paddingInlineStart: px(start) }),
+              ...(end !== undefined && { paddingInlineEnd: px(end) }),
+            },
           });
         }) }
         { endElement && (
-          <div
-            ref={ endElementRef }
-            className={ cn(
-              'pointer-events-none absolute inset-y-0 right-0 z-[1] flex items-center text-[var(--chakra-colors-input-element)]',
-              endClassName,
-            ) }
-            { ...endRest }
+          <XStack
+            ref={ endElementRef as never }
+            position="absolute"
+            top={ 0 }
+            bottom={ 0 }
+            right={ 0 }
+            zIndex={ 1 }
+            alignItems="center"
+            pointerEvents="none"
+            color={ 'var(--color-icon-secondary)' as never }
+            className={ endClassName }
+            { ...(endRest as object) }
           >
-            { endElement }
-          </div>
+            { ink(endElement) }
+          </XStack>
         ) }
-      </div>
+      </XStack>
     );
   },
 );

package/src/input.tsx

@@ -1,33 +1,15 @@
 import { Input as GuiInput } from '@hanzo/gui';
 import React from 'react';
 
-import { cn } from './utils';
-
-const INPUT_BASE = [
-  'w-full appearance-none outline-none transition-colors',
-  '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 INPUT_SIZE_CLASSES: Record<string, string> = {
-  xs: 'h-6 px-2 text-xs rounded',
-  sm: 'h-8 px-3 text-sm rounded-md',
-  md: 'h-10 px-4 text-base rounded-md',
-  lg: 'h-12 px-4 text-lg rounded-lg',
-  '2xl': 'h-14 px-4 text-xl rounded-lg',
-};
-
-const INPUT_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 h-auto',
-};
+// gui's Input — a real `<input>` on web, a real TextInput on native (soft
+// keyboard, `returnKeyType`, autofill, IME) — wearing the Lux size/variant
+// scale. `size` stays the Lux scale and never reaches the primitive, whose
+// `size` is a gui SizeToken.
+//
+// Everything the element itself can express is a prop. The two states that only
+// a selector reaches — `::placeholder`, and `:read-only`, neither of which is a
+// style of the input so much as of something inside or about it — are one CSS
+// rule in tokens.css, keyed off `.lux-control`.
 
 type InputSize = 'xs' | 'sm' | 'md' | 'lg' | '2xl';
 type InputVariant = 'outline' | 'filled' | 'unstyled';
@@ -35,6 +17,7 @@ type InputVariant = 'outline' | 'filled' | 'unstyled';
 export interface InputProps extends Omit<React.ComponentPropsWithRef<'input'>, 'size'> {
   readonly size?: InputSize;
   readonly variant?: InputVariant;
+
   /**
    * React-Native convention: called with the text value on every change. The gui
    * Input raises it natively; on web we bridge it off `onChange`, so callers
@@ -43,10 +26,32 @@ export interface InputProps extends Omit<React.ComponentPropsWithRef<'input'>, '
   readonly onChangeText?: (text: string) => void;
 }
 
-// gui's Input — a real `<input>` on web, a real TextInput on native (soft
-// keyboard, `returnKeyType`, autofill, IME) — wearing the Lux size/variant
-// classes. `size` stays the Lux scale and never reaches the primitive, whose
-// `size` is a gui SizeToken.
+export const SIZE: Record<InputSize, Record<string, number>> = {
+  xs: { height: 24, paddingHorizontal: 8, fontSize: 12, borderRadius: 4 },
+  sm: { height: 32, paddingHorizontal: 12, fontSize: 14, borderRadius: 6 },
+  md: { height: 40, paddingHorizontal: 16, fontSize: 16, borderRadius: 6 },
+  lg: { height: 48, paddingHorizontal: 16, fontSize: 18, borderRadius: 8 },
+  '2xl': { height: 56, paddingHorizontal: 16, fontSize: 20, borderRadius: 8 },
+};
+
+export const VARIANT: Record<InputVariant, Record<string, unknown>> = {
+  outline: { borderWidth: 1, borderStyle: 'solid' },
+  filled: { borderWidth: 0, backgroundColor: 'var(--color-input-filled-bg)' },
+  unstyled: { borderWidth: 0, backgroundColor: 'transparent', padding: 0, height: 'auto' },
+};
+
+/** The frame every text control shares. */
+export const CONTROL = {
+  width: '100%',
+  outlineWidth: 0,
+  backgroundColor: 'var(--color-input-bg)',
+  color: 'var(--color-input-fg)',
+  borderColor: 'var(--color-input-border)',
+  hoverStyle: { borderColor: 'var(--color-input-border-hover)' },
+  focusStyle: { borderColor: 'var(--color-input-border-focus)' },
+  disabledStyle: { opacity: 0.4, cursor: 'not-allowed' },
+} as const;
+
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ size = 'md', variant = 'outline', className, onChange, onChangeText, ...rest }, ref) => {
     const handleChange = React.useCallback(
@@ -56,11 +61,15 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       },
       [ onChange, onChangeText ],
     );
+
     return (
       <GuiInput
         ref={ ref as never }
         unstyled
-        className={ cn(INPUT_BASE, INPUT_SIZE_CLASSES[size], INPUT_VARIANT_CLASSES[variant], className) }
+        className={ className ? `lux-control ${ className }` : 'lux-control' }
+        { ...CONTROL }
+        { ...SIZE[size] }
+        { ...VARIANT[variant] }
         { ...(rest as object) }
         onChange={ handleChange as never }
       />