@luxfi/ui 7.4.9 → 7.4.11

package/src/drawer.tsx

@@ -1,11 +1,9 @@
-import { Sheet as GuiSheet } from '@hanzo/gui';
-import * as RadixDialog from '@radix-ui/react-dialog';
+import { Dialog, Sheet as GuiSheet, View, XStack, YStack } from '@hanzo/gui';
 import * as React from 'react';
 
-import { useIsNarrow } from './use-narrow';
-import { cn } from './utils';
-
 import { CloseButton } from './close-button';
+import { ink } from './ink';
+import { useIsNarrow } from './use-narrow';
 
 // A drawer is a side panel on a wide screen and a bottom sheet on a phone. Below
 // `NARROW_PX` the content is presented by gui's Sheet — draggable, with
@@ -13,6 +11,16 @@ import { CloseButton } from './close-button';
 // `position: fixed` panel with a slide-in keyframe cannot fake. Same components,
 // same props, at every call site. The breakpoint itself lives in ./use-narrow,
 // so "is this phone-sized?" has one answer across the package.
+//
+// Both presentations now come from the same engine: the wide panel is gui's
+// Dialog where it used to be Radix's. That is the whole reason the root has to
+// own its open state — it did already, because the Sheet lives outside the
+// dialog tree and needs the same state, and now both sides read it.
+//
+// The slide is `enterStyle` / `exitStyle` on the content, driven by the CSS
+// animation driver that lux.config feeds the engine. It is not decoration: the
+// panel is `position: fixed` at the edge it flies in from, so without the
+// transform it appears instantly, fully formed, which reads as a repaint bug.
 
 // ─── DrawerRoot ─────────────────────────────────────────────────
 
@@ -21,46 +29,44 @@ export interface DrawerRootProps {
   open?: boolean;
   defaultOpen?: boolean;
   onOpenChange?: (details: { open: boolean }) => void;
-  placement?: 'left' | 'right' | 'top' | 'bottom';
+  placement?: Placement;
   initialFocusEl?: (() => HTMLElement | null) | React.RefObject<HTMLElement>;
   lazyMount?: boolean;
   unmountOnExit?: boolean;
   modal?: boolean;
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  size?: Size;
 }
 
-const DrawerPlacementContext = React.createContext<string>('right');
-const DrawerSizeContext = React.createContext<string>('md');
+type Placement = 'left' | 'right' | 'top' | 'bottom';
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+const DrawerPlacementContext = React.createContext<Placement>('right');
+const DrawerSizeContext = React.createContext<Size>('md');
 
 interface DrawerStateValue {
   readonly open: boolean;
   readonly setOpen: (next: boolean) => void;
   readonly modal: boolean;
+  readonly narrow: boolean;
 }
 
 const DrawerStateContext = React.createContext<DrawerStateValue>({
   open: false,
   setOpen: () => { /* noop */ },
   modal: true,
+  narrow: false,
 });
 
 export const DrawerRoot = (props: DrawerRootProps) => {
   const {
-    children,
-    open,
-    defaultOpen,
-    onOpenChange,
-    placement = 'right',
-    modal = true,
-    size = 'md',
+    children, open, defaultOpen, onOpenChange,
+    placement = 'right', modal = true, size = 'md',
   } = props;
 
-  // The root owns the open state (controllable) rather than leaving it inside
-  // Radix, because the phone presentation is a gui Sheet that lives outside the
-  // dialog tree and needs the same state.
   const [ uncontrolled, setUncontrolled ] = React.useState(defaultOpen ?? false);
   const isControlled = open !== undefined;
   const isOpen = isControlled ? open : uncontrolled;
+  const narrow = useIsNarrow();
 
   const setOpen = React.useCallback((nextOpen: boolean) => {
     if (!isControlled) setUncontrolled(nextOpen);
@@ -68,21 +74,26 @@ export const DrawerRoot = (props: DrawerRootProps) => {
   }, [ isControlled, onOpenChange ]);
 
   const state = React.useMemo(
-    () => ({ open: isOpen, setOpen, modal }),
-    [ isOpen, setOpen, modal ],
+    () => ({ open: isOpen, setOpen, modal, narrow }),
+    [ isOpen, setOpen, modal, narrow ],
   );
 
   return (
     <DrawerPlacementContext.Provider value={ placement }>
       <DrawerSizeContext.Provider value={ size }>
         <DrawerStateContext.Provider value={ state }>
-          <RadixDialog.Root
-            open={ isOpen }
-            onOpenChange={ setOpen }
-            modal={ modal }
-          >
-            { children }
-          </RadixDialog.Root>
+          { /* WHICH presentation is one decision, and it is made here.
+               A gui Sheet inside a gui Dialog is not a sheet in a dialog: the
+               Dialog publishes a sheet controller and adopts any Sheet beneath
+               it, so the phone panel stopped rendering entirely the moment the
+               wide path became a gui Dialog. On a phone there is no dialog —
+               the Sheet IS the presentation — so no Dialog is mounted at all,
+               and the trigger below reads the same flag. */ }
+          { narrow ? children : (
+            <Dialog open={ isOpen } onOpenChange={ setOpen } modal={ modal }>
+              { children }
+            </Dialog>
+          ) }
         </DrawerStateContext.Provider>
       </DrawerSizeContext.Provider>
     </DrawerPlacementContext.Provider>
@@ -98,45 +109,35 @@ export interface DrawerContentProps extends React.ComponentPropsWithoutRef<'div'
   backdrop?: boolean;
 }
 
-const PLACEMENT_CLASSES: Record<string, string> = {
-  right: [
-    'inset-y-0 right-0',
-    'data-[state=open]:animate-in data-[state=open]:slide-in-from-right',
-    'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right',
-  ].join(' '),
-  left: [
-    'inset-y-0 left-0',
-    'data-[state=open]:animate-in data-[state=open]:slide-in-from-left',
-    'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-left',
-  ].join(' '),
-  top: [
-    'inset-x-0 top-0',
-    'data-[state=open]:animate-in data-[state=open]:slide-in-from-top',
-    'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-top',
-  ].join(' '),
-  bottom: [
-    'inset-x-0 bottom-0',
-    'data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom',
-    'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom',
-  ].join(' '),
+/** Where the panel is pinned, and which way it flies in from. */
+const ANCHOR: Record<Placement, Record<string, unknown>> = {
+  right: { top: 0, bottom: 0, right: 0, enterStyle: { x: 24, opacity: 0 }, exitStyle: { x: 24, opacity: 0 } },
+  left: { top: 0, bottom: 0, left: 0, enterStyle: { x: -24, opacity: 0 }, exitStyle: { x: -24, opacity: 0 } },
+  top: { left: 0, right: 0, top: 0, enterStyle: { y: -24, opacity: 0 }, exitStyle: { y: -24, opacity: 0 } },
+  bottom: { left: 0, right: 0, bottom: 0, enterStyle: { y: 24, opacity: 0 }, exitStyle: { y: 24, opacity: 0 } },
 };
 
-const SIZE_CLASSES: Record<string, Record<string, string>> = {
-  right: { xs: 'w-60', sm: 'w-80', md: 'w-96', lg: 'w-[480px]', xl: 'w-[640px]', full: 'w-screen' },
-  left: { xs: 'w-60', sm: 'w-80', md: 'w-96', lg: 'w-[480px]', xl: 'w-[640px]', full: 'w-screen' },
-  top: { xs: 'h-40', sm: 'h-60', md: 'h-80', lg: 'h-96', xl: 'h-[480px]', full: 'h-screen' },
-  bottom: { xs: 'h-40', sm: 'h-60', md: 'h-80', lg: 'h-96', xl: 'h-[480px]', full: 'h-screen' },
+const ACROSS: Record<Size, number | string> = {
+  xs: 240, sm: 320, md: 384, lg: 480, xl: 640, full: '100%',
 };
 
+/** The panel's measured axis: width for a side panel, height for a top/bottom one. */
+const extent = (placement: Placement, size: Size): Record<string, unknown> => (
+  placement === 'left' || placement === 'right' ?
+    { width: ACROSS[size], maxWidth: '100%' } :
+    { height: ACROSS[size], maxHeight: '100%' }
+);
+
+const SCRIM = 'rgba(0,0,0,0.5)';
+
 export const DrawerContent = React.forwardRef<HTMLDivElement, DrawerContentProps>(
   function DrawerContent(props, ref) {
-    const { children, portalled = true, portalRef, offset: _offset, backdrop = true, className, ...rest } = props;
+    const { children, portalled = true, portalRef: _portalRef, offset: _offset, backdrop = true, ...rest } = props;
     const placement = React.useContext(DrawerPlacementContext);
     const size = React.useContext(DrawerSizeContext);
-    const { open, setOpen, modal } = React.useContext(DrawerStateContext);
-    const isNarrow = useIsNarrow();
+    const { open, setOpen, modal, narrow } = React.useContext(DrawerStateContext);
 
-    if (isNarrow) {
+    if (narrow) {
       return (
         <GuiSheet
           open={ open }
@@ -152,7 +153,7 @@ export const DrawerContent = React.forwardRef<HTMLDivElement, DrawerContentProps
               transition="lazy"
               enterStyle={{ opacity: 0 }}
               exitStyle={{ opacity: 0 }}
-              className="bg-black/50"
+              backgroundColor={ SCRIM as never }
             />
           ) }
           <GuiSheet.Handle/>
@@ -160,10 +161,11 @@ export const DrawerContent = React.forwardRef<HTMLDivElement, DrawerContentProps
                Chakra contract hands us has nothing to attach to here. */ }
           <GuiSheet.Frame
             unstyled
-            className={ cn(
-              'flex flex-col rounded-t-2xl bg-[var(--color-drawer-bg)] shadow-[var(--shadow-drawer)]',
-              className,
-            ) }
+            flexDirection="column"
+            borderTopLeftRadius={ 16 }
+            borderTopRightRadius={ 16 }
+            backgroundColor={ 'var(--color-drawer-bg)' as never }
+            shadowColor={ 'var(--shadow-drawer)' as never }
             { ...(rest as object) }
           >
             { children }
@@ -175,85 +177,91 @@ export const DrawerContent = React.forwardRef<HTMLDivElement, DrawerContentProps
     const content = (
       <>
         { backdrop && (
-          <RadixDialog.Overlay
-            className={ cn(
-              'fixed inset-0 z-50 bg-black/50',
-              'data-[state=open]:animate-in data-[state=open]:fade-in-0',
-              'data-[state=closed]:animate-out data-[state=closed]:fade-out-0',
-            ) }
+          <Dialog.Overlay
+            key="overlay"
+            position="fixed"
+            top={ 0 }
+            right={ 0 }
+            bottom={ 0 }
+            left={ 0 }
+            zIndex={ 50 }
+            backgroundColor={ SCRIM as never }
+            transition="lazy"
+            enterStyle={{ opacity: 0 }}
+            exitStyle={{ opacity: 0 }}
           />
         ) }
-        <RadixDialog.Content
-          ref={ ref }
-          className={ cn(
-            'fixed z-50 flex flex-col bg-[var(--color-drawer-bg)] shadow-[var(--shadow-drawer)] duration-300',
-            PLACEMENT_CLASSES[placement] ?? PLACEMENT_CLASSES.right,
-            SIZE_CLASSES[placement]?.[size] ?? SIZE_CLASSES.right?.md,
-            className,
-          ) }
-          { ...rest }
+        <Dialog.Content
+          key="content"
+          ref={ ref as never }
+          unstyled
+          position="fixed"
+          zIndex={ 50 }
+          flexDirection="column"
+          backgroundColor={ 'var(--color-drawer-bg)' as never }
+          transition="medium"
+          { ...ANCHOR[placement] }
+          { ...extent(placement, size) }
+          { ...(rest as object) }
         >
           { children }
-        </RadixDialog.Content>
+        </Dialog.Content>
       </>
     );
 
-    if (portalled) {
-      return (
-        <RadixDialog.Portal container={ portalRef?.current ?? undefined }>
-          { content }
-        </RadixDialog.Portal>
-      );
-    }
-
-    return content;
+    return portalled ? <Dialog.Portal>{ content }</Dialog.Portal> : content;
   },
 );
 
-// ─── DrawerCloseTrigger ─────────────────────────────────────────
+// ─── Triggers ───────────────────────────────────────────────────
 
 export const DrawerCloseTrigger = React.forwardRef<
   HTMLButtonElement,
   React.ComponentPropsWithoutRef<'button'>
 >(function DrawerCloseTrigger(props, ref) {
   return (
-    <RadixDialog.Close asChild>
-      <CloseButton
-        ref={ ref }
-        className={ cn('absolute top-7 right-5', props.className) }
-        { ...props }
-      />
-    </RadixDialog.Close>
+    // Placement belongs to the surrounding box, not to the button: CloseButton
+    // is a fixed 20px control and has no opinion about where it sits.
+    <View position="absolute" top={ 28 } right={ 20 } zIndex={ 1 }>
+      <Dialog.Close asChild>
+        <CloseButton ref={ ref } { ...props }/>
+      </Dialog.Close>
+    </View>
   );
 });
 
-// ─── DrawerTrigger ──────────────────────────────────────────────
+export const DrawerTrigger = ({ asChild = true, children, ...rest }: React.ComponentProps<typeof Dialog.Trigger>) => {
+  const { setOpen, narrow } = React.useContext(DrawerStateContext);
+
+  // On a phone there is no Dialog above this, so there is no Dialog.Trigger to
+  // be: the child opens the Sheet directly.
+  if (narrow) {
+    return React.isValidElement(children) ?
+      React.cloneElement(children as React.ReactElement<{ onClick?: () => void }>, { onClick: () => setOpen(true) }) :
+      <>{ children }</>;
+  }
 
-export const DrawerTrigger = (props: React.ComponentPropsWithoutRef<typeof RadixDialog.Trigger>) => {
-  const { asChild = true, ...rest } = props;
-  return <RadixDialog.Trigger asChild={ asChild } { ...rest }/>;
+  return <Dialog.Trigger asChild={ asChild } { ...rest }>{ children }</Dialog.Trigger>;
 };
 
 // ─── Sub-components ─────────────────────────────────────────────
 
-export const DrawerHeader = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(
-  function DrawerHeader({ className, ...props }, ref) {
-    return <div ref={ ref } className={ cn('flex flex-col gap-1.5 p-6 pb-0', className) } { ...props }/>;
-  },
+// These three take caller-authored content, so a bare string is the normal
+// case and has to be given a host — a View cannot lay one out.
+export const DrawerHeader = ({ children, ...props }: React.ComponentProps<typeof YStack>) => (
+  <YStack gap={ 6 } padding={ 24 } paddingBottom={ 0 } { ...props }>{ ink(children) }</YStack>
 );
 
-export const DrawerBody = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(
-  function DrawerBody({ className, ...props }, ref) {
-    return <div ref={ ref } className={ cn('flex-1 overflow-auto p-6', className) } { ...props }/>;
-  },
+export const DrawerBody = ({ children, ...props }: React.ComponentProps<typeof YStack>) => (
+  <YStack flex={ 1 } overflow="scroll" padding={ 24 } { ...props }>{ ink(children) }</YStack>
 );
 
-export const DrawerFooter = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(
-  function DrawerFooter({ className, ...props }, ref) {
-    return <div ref={ ref } className={ cn('flex items-center justify-end gap-2 p-6 pt-0', className) } { ...props }/>;
-  },
+export const DrawerFooter = ({ children, ...props }: React.ComponentProps<typeof XStack>) => (
+  <XStack alignItems="center" justifyContent="flex-end" gap={ 8 } padding={ 24 } paddingTop={ 0 } { ...props }>
+    { ink(children) }
+  </XStack>
 );
 
-export const DrawerTitle = RadixDialog.Title;
-export const DrawerDescription = RadixDialog.Description;
-export const DrawerActionTrigger = RadixDialog.Close;
+export const DrawerTitle = Dialog.Title;
+export const DrawerDescription = Dialog.Description;
+export const DrawerActionTrigger = Dialog.Close;

package/src/engine.ts

@@ -140,28 +140,3 @@ export const ALIASABLE: ReadonlyArray<string> = [
   '@tanstack/react-query',
   ...GUI_PACKAGES,
 ];
-
-/**
- * Exact-match aliases pinning every aliasable package to ONE entry file, for
- * bundlers that have no `dedupe` of their own (webpack, turbopack).
- *
- * Keys carry webpack's `$` exact-match suffix so only the bare specifier is
- * redirected — a deep import keeps resolving normally. Packages that are not
- * physically installed are skipped rather than throwing: the list is the
- * engine's full surface and no single app pulls all of it.
- */
-export function guiAliases(from: string): Record<string, string> {
-  // Deferred so this module stays importable from a browser bundle (the
-  // wrappers are build-time only, but `engine.ts` is plain values).
-  const { createRequire } = require('node:module') as typeof import('node:module');
-  const require_ = createRequire(`${ from.replace(/\/?$/, '/') }noop.js`);
-  const alias: Record<string, string> = {};
-  for (const pkg of ALIASABLE) {
-    try {
-      alias[`${ pkg }$`] = require_.resolve(pkg);
-    } catch {
-      // Not installed in this app — nothing to dedupe.
-    }
-  }
-  return alias;
-}

package/src/field.tsx

@@ -1,12 +1,20 @@
-import * as LabelPrimitive from '@radix-ui/react-label';
+import { Label, Text, YStack } from '@hanzo/gui';
 import * as React from 'react';
 
-import { cn } from './utils';
-
 import type { InputProps } from './input';
 import type { InputGroupProps } from './input-group';
 
-// Inline constants
+// A labelled form control: label, the control itself, and whichever of helper /
+// error / optional text applies.
+//
+// The label is gui's `Label` — a real `<label htmlFor>`, which is the entire
+// reason Radix's was imported. Everything else was Tailwind, and a good part of
+// it was dead: the colours were written `text-[var(--color-x,theme(colors.gray.400))]`,
+// and `theme()` is a Tailwind 3 function that v4 does not resolve inside an
+// arbitrary value. So the fallback half of every one of those declarations was
+// discarded and the class contributed nothing whenever the custom property was
+// unset. The tokens are referenced directly now, and they are all defined.
+
 const space = String.fromCharCode(32);
 
 function getComponentDisplayName(type: string | React.JSXElementConstructor<unknown>): string | undefined {
@@ -27,75 +35,62 @@ export interface FieldProps {
   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;
 }
 
+const ERROR = 'var(--color-text-error)' as never;
+const MUTED = 'var(--color-text-secondary)' as never;
+
+/** The `*`, the "(optional)", and the inline error that ride alongside a label. */
+const Marks = ({ required, optionalText, errorText }: Pick<FieldProps, 'required' | 'optionalText' | 'errorText'>) => (
+  <>
+    { required && <Text color={ ERROR } aria-hidden>*</Text> }
+    { !required && optionalText && <Text fontSize={ 14 } color={ MUTED }>{ optionalText }</Text> }
+    { errorText && <Text fontSize={ 14 } color={ ERROR }>-{ space }{ errorText }</Text> }
+  </>
+);
+
 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,
+      label, children, helperText, errorText, optionalText, size,
+      required, disabled, readOnly, invalid, floating, id, className, style,
     } = props;
 
+    const flags = {
+      'data-disabled': disabled || undefined,
+      'data-readonly': readOnly || undefined,
+      'data-invalid': invalid || undefined,
+    };
+
     // A floating field cannot be without a label.
     if (floating && label) {
-      const injectedProps = {
-        className: 'peer',
-        placeholder: ' ',
-        size,
-        floating,
-        disabled,
-        readOnly,
-      };
+      const injectedProps = { className: 'lux-field-control', 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',
-          ) }
+        <Label
           htmlFor={ id }
+          position="absolute"
+          left={ 12 }
+          top="50%"
+          pointerEvents="none"
+          userSelect="none"
+          flexDirection="row"
+          gap={ 4 }
+          color={ 'var(--color-input-placeholder)' as never }
+          // The float itself stays in CSS: it keys off `:placeholder-shown` and
+          // `:focus` of a SIBLING, which is a selector, not a prop.
+          className="lux-field-float"
         >
           { 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>
+          <Marks required={ required } optionalText={ optionalText } errorText={ errorText }/>
+        </Label>
       );
 
       const helperTextElement = helperText ? (
-        <p className="mt-1.5 text-xs text-[var(--color-text-secondary,theme(colors.gray.400))]">
-          { helperText }
-        </p>
+        <Text marginTop={ 6 } fontSize={ 12 } color={ MUTED }>{ helperText }</Text>
       ) : null;
 
       const child = React.Children.only<React.ReactElement<InputProps | InputGroupProps>>(children);
@@ -107,96 +102,45 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
           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 }
+          <YStack ref={ ref as never } id={ id } position="relative" width="100%" className={ className } style={ style } { ...flags }>
+            { React.cloneElement(child, {}, inputElement, labelElement) }
             { helperTextElement }
-          </div>
+          </YStack>
         );
       }
 
-      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 }
+        <YStack ref={ ref as never } id={ id } position="relative" width="100%" className={ className } style={ style } { ...flags }>
+          { React.cloneElement(child, injectedProps) }
           { labelElement }
           { helperTextElement }
-        </div>
+        </YStack>
       );
     }
 
-    // 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 }
-      >
+      <YStack ref={ ref as never } id={ id } gap={ 4 } className={ className } style={ style } { ...flags }>
         { 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',
-            ) }
+          <Label
             htmlFor={ id }
+            flexDirection="row"
+            gap={ 4 }
+            fontSize={ 14 }
+            fontWeight="500"
+            color={ 'var(--color-text-primary)' as never }
+            opacity={ disabled ? 0.4 : 1 }
           >
             { 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>
+            <Marks required={ required } optionalText={ optionalText }/>
+          </Label>
         ) }
-      </div>
+        { React.cloneElement(child, { size }) }
+        { helperText && <Text fontSize={ 12 } color={ MUTED }>{ helperText }</Text> }
+        { errorText && <Text fontSize={ 12 } color={ ERROR }>{ errorText }</Text> }
+      </YStack>
     );
   },
 );