@cdx-ui/components 0.0.1-beta.1 → 0.0.1-beta.100

package/src/components/Switch/BaseSwitch.tsx

@@ -1,6 +1,7 @@
 import { forwardRef } from 'react';
-import { Switch as RNSwitch, type SwitchProps } from 'react-native';
-import { cn } from '@cdx-ui/utils';
+import { Switch as RNSwitch, type SwitchProps as RNSwitchProps } from 'react-native';
+import { mergeDataAttributes, type IUseSwitchReturn } from '@cdx-ui/primitives';
+import { cn, composeEventHandlers } from '@cdx-ui/utils';
 import {
   switchIosBgVariants,
   switchThumbColorVariants,
@@ -8,29 +9,50 @@ import {
   switchTrackOnVariants,
 } from './styles';
 
-export interface BaseSwitchProps extends Omit<SwitchProps, 'className'> {
-  states?: Record<string, boolean | undefined>;
-  dataSet?: Record<string, string>;
+export interface BaseSwitchProps extends Omit<
+  RNSwitchProps,
+  | 'value'
+  | 'disabled'
+  | 'onValueChange'
+  | 'thumbColor'
+  | 'trackColor'
+  | 'ios_backgroundColor'
+  | 'className'
+> {
+  switchState: IUseSwitchReturn;
   className?: string;
-  size?: string;
+  size?: string | null;
 }
 
+/**
+ * Native host for `Switch`. Renders `RNSwitch` with Uniwind className passthrough
+ * derived from the resolved interaction state in `switchState`.
+ *
+ * All state/a11y/interaction machinery lives in the `useSwitch` hook; this file
+ * is pure rendering (Standard 3: primitives must not carry styling machinery).
+ */
 export const BaseSwitch = forwardRef<RNSwitch, BaseSwitchProps>(
-  ({ states, className, disabled, value, ...props }, ref) => {
-    const isChecked = value ?? states?.checked ?? false;
-    const isDisabled = disabled ?? states?.disabled ?? false;
-    const isInvalid = states?.invalid ?? false;
-
+  ({ switchState, className, size: _size, onFocus, onBlur, ...props }, ref) => {
     const uniwindProps: Record<string, string | undefined> = {
       className,
-      thumbColorClassName: cn(switchThumbColorVariants({ isDisabled })),
-      trackColorOnClassName: cn(switchTrackOnVariants({ isInvalid })),
-      trackColorOffClassName: cn(switchTrackOffVariants({ isInvalid })),
-      ios_backgroundColorClassName: cn(switchIosBgVariants({ isInvalid })),
+      thumbColorClassName: cn(switchThumbColorVariants({ isDisabled: switchState.isDisabled })),
+      trackColorOnClassName: cn(switchTrackOnVariants({ isInvalid: switchState.isInvalid })),
+      trackColorOffClassName: cn(switchTrackOffVariants({ isInvalid: switchState.isInvalid })),
+      ios_backgroundColorClassName: cn(switchIosBgVariants({ isInvalid: switchState.isInvalid })),
     };
 
     return (
-      <RNSwitch ref={ref} value={isChecked} disabled={isDisabled} {...uniwindProps} {...props} />
+      <RNSwitch
+        ref={ref}
+        value={switchState.checked}
+        disabled={switchState.isDisabled}
+        onValueChange={switchState.setChecked}
+        onFocus={composeEventHandlers(onFocus, switchState.focusProps.onFocus)}
+        onBlur={composeEventHandlers(onBlur, switchState.focusProps.onBlur)}
+        {...uniwindProps}
+        {...props}
+        {...mergeDataAttributes(props, switchState.dataAttrs)}
+      />
     );
   },
 );

package/src/components/Switch/BaseSwitch.web.tsx

@@ -1,6 +1,7 @@
 import { forwardRef } from 'react';
 import { Pressable, View } from 'react-native';
-import { cn } from '@cdx-ui/utils';
+import { mergeDataAttributes, type IUseSwitchReturn } from '@cdx-ui/primitives';
+import { cn, composeEventHandlers } from '@cdx-ui/utils';
 import {
   switchThumbVariants,
   switchTrackVariants,
@@ -9,58 +10,50 @@ import {
 } from './styles';
 
 export interface BaseSwitchProps {
-  value?: boolean;
-  onValueChange?: (value: boolean) => void;
-  disabled?: boolean;
-  states?: Record<string, boolean | undefined>;
-  dataSet?: Record<string, string>;
+  switchState: IUseSwitchReturn;
   className?: string;
   size?: SwitchVariantProps['size'];
+  accessibilityLabel?: string;
   onFocus?: () => void;
   onBlur?: () => void;
 }
 
+/**
+ * Web host for `Switch`. Renders a custom `Pressable` + `View` toggle (preserving
+ * the existing visual contract) wired to the resolved state in `switchState`.
+ *
+ * `role="switch"` + `aria-checked` + keyboard semantics satisfy the same a11y
+ * contract that an `<input type="checkbox" role="switch">` would provide, without
+ * the visual rework an input swap would require (see spike notes in PR).
+ */
 export const BaseSwitch = forwardRef<View, BaseSwitchProps>(
-  (
-    {
-      value,
-      onValueChange,
-      disabled,
-      states,
-      dataSet,
-      className,
-      size = 'md',
-      onFocus,
-      onBlur,
-      ...props
-    },
-    ref,
-  ) => {
-    const isChecked = value ?? states?.checked ?? false;
-    const isDisabled = disabled ?? states?.disabled ?? false;
-    const isInvalid = states?.invalid ?? false;
-
+  ({ switchState, className, size = 'md', accessibilityLabel, onFocus, onBlur, ...props }, ref) => {
     return (
       <Pressable
         ref={ref}
         role="switch"
-        aria-checked={isChecked}
-        aria-disabled={isDisabled}
-        disabled={isDisabled}
-        onPress={() => onValueChange?.(!isChecked)}
-        onFocus={onFocus}
-        onBlur={onBlur}
+        aria-checked={switchState.checked}
+        aria-disabled={switchState.isDisabled}
+        accessibilityLabel={accessibilityLabel}
+        disabled={switchState.isDisabled}
+        onPress={() => switchState.setChecked(!switchState.checked)}
+        onFocus={composeEventHandlers(onFocus, switchState.focusProps.onFocus as () => void)}
+        onBlur={composeEventHandlers(onBlur, switchState.focusProps.onBlur as () => void)}
+        onHoverIn={switchState.hoverProps.onHoverIn as () => void}
+        onHoverOut={switchState.hoverProps.onHoverOut as () => void}
         tabIndex={0}
         className={cn(
           switchTrackVariants({ size }),
-          switchWebTrackColorVariants({ isChecked, isInvalid }),
+          switchWebTrackColorVariants({
+            isChecked: switchState.checked,
+            isInvalid: switchState.isInvalid,
+          }),
           className,
         )}
-        // @ts-expect-error dataSet is a RNW/Uniwind prop not in Pressable types
-        dataSet={dataSet}
         {...props}
+        {...mergeDataAttributes(props, switchState.dataAttrs)}
       >
-        <View className={cn(switchThumbVariants({ size, isChecked }))} />
+        <View className={cn(switchThumbVariants({ size, isChecked: switchState.checked }))} />
       </Pressable>
     );
   },

package/src/components/Switch/index.tsx

@@ -1,11 +1,58 @@
-import { type ISwitchProps, createSwitch } from '@cdx-ui/primitives';
+import { forwardRef } from 'react';
+import type { Switch as RNSwitch, View } from 'react-native';
+import {
+  dataAttributes,
+  mergeDataAttributes,
+  useSwitch,
+  type ISwitchProps,
+} from '@cdx-ui/primitives';
 import { BaseSwitch } from './BaseSwitch';
 import type { SwitchVariantProps } from './styles';
 
-const SwitchPrimitive = createSwitch({ Root: BaseSwitch });
-
 export interface SwitchProps extends ISwitchProps, SwitchVariantProps {
   className?: string;
+  accessibilityLabel?: string;
+  onFocus?: () => void;
+  onBlur?: () => void;
 }
 
-export const Switch = SwitchPrimitive;
+export const Switch = forwardRef<RNSwitch | View, SwitchProps>(
+  (
+    {
+      className,
+      size,
+      value,
+      isChecked,
+      defaultValue,
+      disabled,
+      isDisabled,
+      isInvalid,
+      onValueChange,
+      ...props
+    },
+    ref,
+  ) => {
+    const switchState = useSwitch({
+      value,
+      isChecked,
+      defaultValue,
+      disabled,
+      isDisabled,
+      isInvalid,
+      onValueChange,
+    });
+
+    return (
+      <BaseSwitch
+        ref={ref as never}
+        switchState={switchState}
+        className={className}
+        size={size}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'switch' }))}
+      />
+    );
+  },
+);
+
+Switch.displayName = 'Switch';

package/src/components/Text/{styles.tsx → styles.ts}

@@ -3,9 +3,9 @@ import { cva, type VariantProps } from 'class-variance-authority';
 
 export const textStyle = cva(
   [
-    `text-content-primary font-normal`,
+    'text-content-primary',
     Platform.select({
-      web: 'font-sans my-0 bg-transparent display-inline no-underline',
+      web: 'font-body my-0 bg-transparent no-underline',
       default: '',
     }),
   ],

package/src/components/Textarea/index.tsx

@@ -0,0 +1,180 @@
+import { forwardRef, useEffect, useState } from 'react';
+import {
+  Platform,
+  type TextInput,
+  type TextInputProps,
+  type TextStyle,
+  type ViewProps,
+} from 'react-native';
+import {
+  InputField as InputFieldPrimitive,
+  InputRoot as InputRootPrimitive,
+  dataAttributes,
+  type IInputFieldProps,
+} from '@cdx-ui/primitives';
+import { cn, composeEventHandlers } from '@cdx-ui/utils';
+import {
+  type TextareaVariantProps,
+  textareaFieldPlaceholderVariants,
+  textareaFieldVariants,
+  textareaRootVariants,
+} from './styles';
+
+// Initial/minimum visible rows. Web textareas render compactly, so a smaller default
+// reads better there; native has no intrinsic multiline height, so it needs more.
+const DEFAULT_MIN_ROWS = Platform.select({ web: 2, default: 8 });
+
+// Explicit per-size line height (px) set on the field so `rows * lineHeight` maps to an
+// exact pixel height on native. Values track the field font sizes in `styles.ts`.
+const LINE_HEIGHT_BY_SIZE = { default: 20, small: 16 } as const;
+
+// Module-scoped latch so the dev conflict warning fires at most once per session.
+let hasWarnedResizeAutoGrowConflict = false;
+
+type ContentSizeChangeEvent = Parameters<NonNullable<TextInputProps['onContentSizeChange']>>[0];
+
+export type TextareaResize = 'none' | 'vertical';
+
+export interface TextareaProps
+  extends
+    Omit<TextInputProps, 'multiline' | 'children' | 'style'>,
+    IInputFieldProps,
+    TextareaVariantProps {
+  className?: string;
+  placeholderTextColorClassName?: string;
+  /** Initial / minimum visible rows. Defaults to 2 on web and 8 on native. */
+  numberOfLines?: number;
+  /**
+   * Grow the field height to fit its content. Defaults to `false`.
+   * Web uses `field-sizing: content`; native grows intrinsically (`scrollEnabled`
+   * off), using `onContentSizeChange` only to enable scrolling past `maxRows`.
+   */
+  autoGrow?: boolean;
+  /** Caps `autoGrow` at this many rows, after which the field scrolls. */
+  maxRows?: number;
+  /**
+   * Web-only user resize affordance. Defaults to `'none'`. `'vertical'` exposes the
+   * browser resize handle and takes precedence over `autoGrow` (they are mutually
+   * exclusive). No-op on native.
+   */
+  resize?: TextareaResize;
+  style?: ViewProps['style'];
+}
+
+export const Textarea = forwardRef<TextInput, TextareaProps>(
+  (
+    {
+      variant = 'outline',
+      size = 'default',
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      isFocused,
+      isHovered,
+      isFullWidth,
+      className,
+      placeholderTextColorClassName,
+      style,
+      numberOfLines,
+      autoGrow = false,
+      maxRows,
+      resize = 'none',
+      onContentSizeChange,
+      ...rest
+    },
+    ref,
+  ) => {
+    const minRows = numberOfLines ?? DEFAULT_MIN_ROWS;
+    const lineHeight = LINE_HEIGHT_BY_SIZE[size ?? 'default'];
+    const minHeight = minRows * lineHeight;
+    const maxHeight = maxRows != null ? maxRows * lineHeight : undefined;
+
+    const isWeb = Platform.OS === 'web';
+    // Web user-resize wins over auto-grow; the two are mutually exclusive.
+    const userResizable = isWeb && resize === 'vertical';
+    const effectiveAutoGrow = autoGrow && !userResizable;
+
+    useEffect(() => {
+      if (__DEV__ && autoGrow && resize === 'vertical' && !hasWarnedResizeAutoGrowConflict) {
+        hasWarnedResizeAutoGrowConflict = true;
+        console.warn(
+          '[Textarea] `autoGrow` and `resize="vertical"` are mutually exclusive. ' +
+            '`resize` takes precedence and `autoGrow` is ignored.',
+        );
+      }
+    }, [autoGrow, resize]);
+
+    // Native auto-grow: track the measured content height so we can enable internal
+    // scrolling once it passes the `maxRows` cap. Growth itself is handled natively
+    // (see `nativeScrollEnabled`), not by pinning a height here.
+    const [measuredHeight, setMeasuredHeight] = useState<number | undefined>(undefined);
+
+    const handleContentSizeChange = (event: ContentSizeChangeEvent) => {
+      if (!isWeb && effectiveAutoGrow) {
+        setMeasuredHeight(event.nativeEvent.contentSize.height);
+      }
+    };
+
+    // On native, a multiline TextInput only grows to fit its content when scrolling is
+    // disabled — an explicit height or an enabled scroll view pins it. So for auto-grow we
+    // keep `scrollEnabled` off (letting the view size itself between min/max) and only turn
+    // scrolling back on once the content exceeds the `maxRows` cap. Undefined elsewhere
+    // (web + fixed height) leaves React Native's default (`true`) so overflow scrolls.
+    const nativeScrollEnabled =
+      !isWeb && effectiveAutoGrow
+        ? maxHeight != null && measuredHeight != null && measuredHeight > maxHeight
+        : undefined;
+
+    // Auto-grow (web + native) and fixed sizing all bound the field with min/max height and
+    // never pin an explicit `height`: web grows via `field-sizing: content`, native grows via
+    // the disabled scroll view above, and the fixed case simply floors at `minHeight`.
+    const heightStyle: TextStyle =
+      !isWeb && !effectiveAutoGrow ? { minHeight } : { minHeight, maxHeight };
+
+    // `textAlignVertical` is set in style (not just the prop) so it overrides the Android
+    // primitive's `center` default — style wins over the deprecated prop.
+    const fieldStyle: TextStyle = { lineHeight, textAlignVertical: 'top', ...heightStyle };
+
+    // `className` applies to the root (the visible bordered box), matching the flat
+    // CurrencyInput pattern. Field-level utilities below are internal sizing concerns.
+    const fieldClassName = cn(
+      textareaFieldVariants({ size }),
+      effectiveAutoGrow && 'web:[field-sizing:content]',
+      userResizable ? 'web:[resize:vertical]' : 'web:[resize:none]',
+    );
+
+    return (
+      <InputRootPrimitive
+        isDisabled={isDisabled}
+        isInvalid={isInvalid}
+        isReadOnly={isReadOnly}
+        isRequired={isRequired}
+        isFocused={isFocused}
+        isHovered={isHovered}
+        isFullWidth={isFullWidth}
+        className={cn(textareaRootVariants({ variant, size }), className)}
+        style={style}
+        {...dataAttributes({ slot: 'textarea' })}
+      >
+        <InputFieldPrimitive
+          ref={ref}
+          placeholderTextColorClassName={cn(
+            textareaFieldPlaceholderVariants(),
+            placeholderTextColorClassName,
+          )}
+          {...rest}
+          multiline
+          numberOfLines={isWeb ? minRows : undefined}
+          textAlignVertical="top"
+          scrollEnabled={nativeScrollEnabled}
+          className={fieldClassName}
+          style={fieldStyle}
+          onContentSizeChange={composeEventHandlers(onContentSizeChange, handleContentSizeChange)}
+        />
+      </InputRootPrimitive>
+    );
+  },
+);
+
+Textarea.displayName = 'Textarea';

package/src/components/Textarea/styles.ts

@@ -0,0 +1,86 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/primitives';
+
+export const textareaRootVariants = cva(
+  [
+    // Multiline shell: stretch the field to full width and let the shell grow with it
+    // (no fixed height, no overflow-hidden so a web resize handle is never clipped).
+    'w-full flex-row items-stretch',
+    'bg-surface-primary',
+    'border-solid border-stroke-primary',
+    'web:border-default native:border-[length:var(--border-width-default)]',
+    'rounded-[var(--border-radius-default)]',
+    TRANSITION_COLORS,
+    'data-[disabled=true]:bg-surface-secondary',
+    'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
+    DISABLED_CURSOR,
+    'data-[readonly=true]:cursor-default',
+    'data-[readonly=true]:bg-surface-secondary',
+    'web:data-[hover=true]:data-[focus=false]:data-[invalid=false]:border-stroke-hover',
+    // Web: inset ring avoids a border-width change so the shell never shifts on focus.
+    // Recolor the border to match the ring so the two read as a single focus outline
+    // instead of a gray border + colored ring.
+    'web:data-[focus=true]:ring-inset',
+    'web:data-[focus=true]:ring-[length:var(--border-width-focused)]',
+    'web:data-[focus=true]:data-[invalid=false]:ring-stroke-action',
+    'web:data-[focus=true]:data-[invalid=false]:border-stroke-action',
+    'web:data-[focus=true]:data-[invalid=true]:ring-stroke-danger',
+    'web:data-[focus=true]:data-[invalid=true]:border-stroke-danger',
+    // Native: thicker border on focus; size variants subtract a hairline of padding
+    // so layout doesn't shift by 1px.
+    'native:data-[focus=true]:border-[length:var(--border-width-focused)]',
+    'native:data-[field-state=focused]:border-stroke-action',
+    'native:data-[field-state=focused-invalid]:border-stroke-danger',
+    'data-[invalid=true]:border-stroke-danger',
+  ],
+  {
+    variants: {
+      variant: {
+        outline: [],
+      },
+      size: {
+        default: [
+          'px-4 py-3 gap-4',
+          'native:data-[focus=true]:px-[calc(var(--spacing-4)-var(--spacing-px))]',
+          'native:data-[focus=true]:py-[calc(var(--spacing-3)-var(--spacing-px))]',
+        ],
+        small: [
+          'px-3 py-2 gap-1.5',
+          'native:data-[focus=true]:px-[calc(var(--spacing-3)-var(--spacing-px))]',
+          'native:data-[focus=true]:py-[calc(var(--spacing-2)-var(--spacing-px))]',
+        ],
+      },
+    },
+    defaultVariants: {
+      variant: 'outline',
+      size: 'default',
+    },
+  },
+);
+
+export const textareaFieldVariants = cva(
+  [
+    // `min-w-0` lets the field shrink below its intrinsic content width so the shell
+    // never overflows (mirrors the Input field rationale).
+    'flex-1 min-w-0 bg-transparent p-0',
+    'text-content-primary',
+    'placeholder:text-content-tertiary',
+    'web:outline-none',
+    'tracking-normal',
+  ],
+  {
+    variants: {
+      size: {
+        default: 'text-[0.875rem]',
+        small: 'text-[0.75rem]',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  },
+);
+
+export const textareaFieldPlaceholderVariants = cva(['accent-content-tertiary']);
+
+export type TextareaVariantProps = VariantProps<typeof textareaRootVariants>;