@cdx-ui/components 0.0.1-alpha.29 → 0.0.1-alpha.30

package/lib/typescript/components/Select/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAa,IAAI,EAAE,KAAK,SAAS,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAErF,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,qBAAqB,EAC1B,KAAK,gBAAgB,EACrB,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EACvB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAQ,SAAS,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EACL,KAAK,kBAAkB,EAOxB,MAAM,UAAU,CAAC;AAsBlB,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,YAAY,EAAE,kBAAkB;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,UAAU,8FAcf,CAAC;AAQF,MAAM,WAAW,kBAAmB,SAAQ,mBAAmB;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,aAAa,qGAalB,CAAC;AAQF,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,iBAAiB;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,WAAW,mGAMf,CAAC;AAQH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;CAAG;AAEvE,QAAA,MAAM,UAAU;qCAAoC,eAAe;;CAMlE,CAAC;AAQF,MAAM,WAAW,kBAAmB,SAAQ,SAAS,EAAE,mBAAmB;IACxE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,aAAa,qGAQlB,CAAC;AAQF,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,UAAU,kGAYf,CAAC;AAQF,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,qBAAqB;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,eAAe,uGAUpB,CAAC;AAQF,KAAK,uBAAuB,GAAG,OAAO,UAAU,GAAG;IACjD,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,KAAK,EAAE,OAAO,WAAW,CAAC;IAC1B,IAAI,EAAE,OAAO,UAAU,CAAC;IACxB,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,IAAI,EAAE,OAAO,UAAU,CAAC;IACxB,SAAS,EAAE,OAAO,eAAe,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,MAAM,EAOb,uBAAuB,CAAC;AAE9B,YAAY,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAa,IAAI,EAAE,KAAK,SAAS,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAErF,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,qBAAqB,EAC1B,KAAK,gBAAgB,EACrB,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EACvB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAQ,SAAS,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,EACL,KAAK,kBAAkB,EAOxB,MAAM,UAAU,CAAC;AAsBlB,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,YAAY,EAAE,kBAAkB;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,UAAU,8FAcf,CAAC;AAQF,MAAM,WAAW,kBAAmB,SAAQ,mBAAmB;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,aAAa,qGAalB,CAAC;AAQF,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,iBAAiB;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,WAAW,mGAMf,CAAC;AAQH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;CAAG;AAEvE,QAAA,MAAM,UAAU;qCAAoC,eAAe;;CAMlE,CAAC;AAQF,MAAM,WAAW,kBAAmB,SAAQ,SAAS,EAAE,mBAAmB;IACxE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,aAAa,qGAQlB,CAAC;AAQF,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,UAAU,kGAYf,CAAC;AAQF,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,qBAAqB;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,eAAe,uGAUpB,CAAC;AAQF,KAAK,uBAAuB,GAAG,OAAO,UAAU,GAAG;IACjD,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,KAAK,EAAE,OAAO,WAAW,CAAC;IAC1B,IAAI,EAAE,OAAO,UAAU,CAAC;IACxB,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,IAAI,EAAE,OAAO,UAAU,CAAC;IACxB,SAAS,EAAE,OAAO,eAAe,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,MAAM,EAOb,uBAAuB,CAAC"}

package/lib/typescript/components/Select/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAkBlE,eAAO,MAAM,qBAAqB;;;8EAsCjC,CAAC;AAIF,eAAO,MAAM,mBAAmB;;8EAkB/B,CAAC;AAIF,eAAO,MAAM,kBAAkB;;8EAa9B,CAAC;AAIF,eAAO,MAAM,qBAAqB,oFAWhC,CAAC;AAIH,eAAO,MAAM,kBAAkB;;8EAsB9B,CAAC;AAIF,eAAO,MAAM,uBAAuB;;8EAanC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAkBlE,eAAO,MAAM,qBAAqB;;;8EAsCjC,CAAC;AAIF,eAAO,MAAM,mBAAmB;;8EAkB/B,CAAC;AAIF,eAAO,MAAM,kBAAkB;;8EAiB9B,CAAC;AAIF,eAAO,MAAM,qBAAqB,oFAWhC,CAAC;AAIH,eAAO,MAAM,kBAAkB;;8EAsB9B,CAAC;AAIF,eAAO,MAAM,uBAAuB;;8EAanC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC"}

package/lib/typescript/components/Switch/index.d.ts

@@ -4,5 +4,4 @@ export interface SwitchProps extends ISwitchProps, SwitchVariantProps {
     className?: string;
 }
 export declare const Switch: import("@cdx-ui/primitives").ISwitchComponentType<import("./BaseSwitch").BaseSwitchProps & import("react").RefAttributes<import("react-native").Switch>, unknown>;
-export type { SwitchVariantProps };
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/Switch/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Switch/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAgB,MAAM,oBAAoB,CAAC;AAErE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAInD,MAAM,WAAW,WAAY,SAAQ,YAAY,EAAE,kBAAkB;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,mKAAkB,CAAC;AAEtC,YAAY,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Switch/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAgB,MAAM,oBAAoB,CAAC;AAErE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAInD,MAAM,WAAW,WAAY,SAAQ,YAAY,EAAE,kBAAkB;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,mKAAkB,CAAC"}

package/lib/typescript/components/index.d.ts

@@ -7,6 +7,7 @@ export * from './Card';
 export * from './Checkbox';
 export * from './Chip';
 export * from './Dialog';
+export * from './Form';
 export * from './Image';
 export * from './Input';
 export * from './Link';

package/lib/typescript/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC"}

package/lib/typescript/index.d.ts

@@ -1,2 +1,5 @@
+/// <reference types="uniwind/types" preserve="true" />
 export * from './components';
+export { View, ScrollView, KeyboardAvoidingView } from 'react-native';
+export { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AACA,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/components",
-  "version": "0.0.1-alpha.29",
+  "version": "0.0.1-alpha.30",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -45,6 +45,7 @@
     "react": "^18.2.0 || ^19.0.0",
     "react-native": ">=0.76.0",
     "react-native-reanimated": ">=3.0.0",
+    "react-native-safe-area-context": ">=4.0.0",
     "react-native-web": ">=0.19.0"
   },
   "peerDependenciesMeta": {
@@ -65,9 +66,9 @@
     "@gorhom/bottom-sheet": "^5.2.6",
     "class-variance-authority": "^0.7.1",
     "uniwind": "1.4.1",
-    "@cdx-ui/primitives": "0.0.1-alpha.29",
-    "@cdx-ui/utils": "0.0.1-alpha.29",
-    "@cdx-ui/icons": "0.0.1-alpha.29"
+    "@cdx-ui/icons": "0.0.1-alpha.30",
+    "@cdx-ui/primitives": "0.0.1-alpha.30",
+    "@cdx-ui/utils": "0.0.1-alpha.30"
   },
   "devDependencies": {
     "@types/react": "*",

package/src/components/Avatar/index.tsx

@@ -170,5 +170,3 @@ export const Avatar = Object.assign(AvatarRoot, {
   Icon: AvatarIcon,
   Badge: AvatarBadge,
 }) as AvatarCompoundComponent;
-
-export type { AvatarVariantProps };

package/src/components/Button/index.tsx

@@ -106,6 +106,7 @@ const ButtonLabel = forwardRef<Text, ButtonTextProps>(
 
 ButtonLabel.displayName = 'Button.Label';
 
+// TODO: Use ButtonGroupVariantProps
 export interface ButtonGroupProps extends Omit<ViewProps, 'children'> {
   className?: string;
   children: ReactElement | ReactElement[];

package/src/components/Checkbox/index.tsx

@@ -205,5 +205,3 @@ export const Checkbox = Object.assign(CheckboxRoot, {
   Label: CheckboxLabel,
   Group: CheckboxGroup,
 }) as CheckboxCompoundComponent;
-
-export type { CheckboxVariantProps };

package/src/components/Dialog/index.tsx

@@ -302,5 +302,3 @@ export const Dialog = Object.assign(DialogRoot, {
   Footer: DialogFooter,
   Close: DialogClose,
 }) as DialogCompoundComponent;
-
-export type { DialogVariantProps } from './styles';

package/src/components/Form/FormLabelRoot.tsx

@@ -0,0 +1,33 @@
+import { forwardRef } from 'react';
+import { Text, TextProps, type GestureResponderEvent } from 'react-native';
+import { composeEventHandlers, useFormControlContext } from '@cdx-ui/utils';
+
+export type FormLabelRootProps = TextProps & {
+  /** @platform web — forwarded on web; ignored here (see `FormLabelRoot.web`). */
+  htmlFor?: string;
+  /** Optional; composed with label tap-to-focus on native. */
+  onPress?: ((event: GestureResponderEvent) => void) | null;
+};
+
+/**
+ * Native: `Text` label row — tap focuses the field input via form context
+ * (parity with `<label htmlFor>` on web).
+ */
+export const FormLabelRoot = forwardRef<Text, FormLabelRootProps>(
+  ({ htmlFor: _omitHtmlFor, onPress, ...props }, ref) => {
+    void _omitHtmlFor;
+
+    const { focusInput, isDisabled } = useFormControlContext();
+
+    return (
+      <Text
+        ref={ref}
+        {...props}
+        disabled={Boolean(isDisabled)}
+        onPress={composeEventHandlers(onPress, () => focusInput?.())}
+      />
+    );
+  },
+);
+
+FormLabelRoot.displayName = 'FormLabelRoot';

package/src/components/Form/FormLabelRoot.web.tsx

@@ -0,0 +1,18 @@
+import React, { forwardRef, type ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
+
+export type FormLabelRootProps = ViewProps & {
+  htmlFor?: string;
+  children?: ReactNode;
+  /** Mirrors field invalid state from form context (`data-[invalid=true]` styling). */
+  'data-invalid'?: string;
+  /** @platform native — ignored on DOM `<label>`; set by form primitive for Uniwind. */
+  dataSet?: Record<string, string>;
+};
+
+/** Real `<label>` so clicking the label focuses the associated control (`htmlFor` → input `id`). */
+export const FormLabelRoot = forwardRef<HTMLLabelElement, FormLabelRootProps>((props, ref) => {
+  return <label ref={ref} {...(props as React.LabelHTMLAttributes<HTMLLabelElement>)} />;
+});
+
+FormLabelRoot.displayName = 'FormLabelRoot';

package/src/components/Form/FormRoot.tsx

@@ -0,0 +1,19 @@
+import { forwardRef } from 'react';
+import { View, type ViewProps } from 'react-native';
+
+export type BaseFormRootProps = ViewProps & {
+  onSubmit?: (e: React.SyntheticEvent) => void;
+  action?: string | ((formData: FormData) => void | Promise<void>);
+  method?: string;
+};
+
+export const BaseFormRoot = forwardRef<View, BaseFormRootProps>(
+  ({ onSubmit: _onSubmit, action: _action, method: _method, ...props }, ref) => {
+    void _onSubmit;
+    void _action;
+    void _method;
+    return <View ref={ref} {...props} />;
+  },
+);
+
+BaseFormRoot.displayName = 'BaseFormRoot';

package/src/components/Form/FormRoot.web.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+
+export type BaseFormRootProps = React.FormHTMLAttributes<HTMLFormElement> & {
+  className?: string;
+  children?: React.ReactNode;
+};
+
+export const BaseFormRoot = forwardRef<HTMLFormElement, BaseFormRootProps>((props, ref) => {
+  return <form ref={ref} {...props} />;
+});
+
+BaseFormRoot.displayName = 'BaseFormRoot';

package/src/components/Form/index.tsx

@@ -0,0 +1,272 @@
+import { forwardRef, type ReactNode } from 'react';
+import { Text, View, type ViewProps, type TextProps } from 'react-native';
+import { createForm, type IFormProps, type IFormFieldProps } from '@cdx-ui/primitives';
+import { cn, withStyleContext, useStyleContext } from '@cdx-ui/utils';
+import { Icon, type IconProps } from '../Icon';
+import { BaseFormRoot, type BaseFormRootProps } from './FormRoot';
+import { FormLabelRoot } from './FormLabelRoot';
+import {
+  formRootVariants,
+  formFieldVariants,
+  formLabelVariants,
+  formHelperVariants,
+  formHelperTextVariants,
+  formErrorVariants,
+  formErrorTextVariants,
+  formErrorIconVariants,
+} from './styles';
+
+// =============================================================================
+// SCOPE + CONTEXT
+// =============================================================================
+
+const SCOPE = 'FORM';
+
+const FieldRoot = withStyleContext(View, SCOPE);
+
+interface FormFieldStyleContext {
+  size?: 'default' | 'small';
+}
+
+const useFormStyleContext = () => useStyleContext(SCOPE) as FormFieldStyleContext;
+
+// =============================================================================
+// PRIMITIVE
+// =============================================================================
+
+const FormPrimitive = createForm({
+  Root: BaseFormRoot,
+  Field: FieldRoot,
+  Error: View,
+  ErrorText: Text,
+  ErrorIcon: View,
+  Label: FormLabelRoot,
+  Helper: View,
+  HelperText: Text,
+});
+
+// =============================================================================
+// FORM ROOT (container — <form> on web, <View> on RN)
+// =============================================================================
+
+export interface FormProps extends BaseFormRootProps, IFormProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const FormRoot = forwardRef<View, FormProps>(({ className, children, style, ...props }, ref) => {
+  const computedClassName = cn(formRootVariants(), className);
+
+  return (
+    <FormPrimitive ref={ref} className={computedClassName} style={style} {...props}>
+      {children}
+    </FormPrimitive>
+  );
+});
+
+FormRoot.displayName = 'Form';
+
+// =============================================================================
+// FORM FIELD (per-field wrapper — provides context for label/error/helper/input)
+// =============================================================================
+
+/**
+ * Field wrapper + context. For **initial focus**, pass `autoFocus` on `Input.Field` (not here).
+ */
+export interface FormFieldProps extends Omit<ViewProps, 'id' | 'name'>, IFormFieldProps {
+  className?: string;
+  children?: ReactNode;
+  size?: 'default' | 'small';
+}
+
+const FormField = forwardRef<View, FormFieldProps>(
+  ({ size = 'default', className, children, style, ...props }, ref) => {
+    const computedClassName = cn(formFieldVariants(), className);
+
+    return (
+      <FormPrimitive.Field
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        context={{ size }}
+        {...props}
+      >
+        {children}
+      </FormPrimitive.Field>
+    );
+  },
+);
+
+FormField.displayName = 'Form.Field';
+
+// =============================================================================
+// FORM LABEL
+// =============================================================================
+
+export interface FormLabelProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+  /** @platform web — passed to `<label htmlFor>`; defaults to the field input id. */
+  htmlFor?: string;
+}
+
+// TODO: Accept accessibility labels for required indicator as props to support i18n
+
+const FormLabel = forwardRef<View, FormLabelProps>(
+  ({ className, children, style, htmlFor, ...props }, ref) => {
+    const { size } = useFormStyleContext();
+    const labelClassName = cn(formLabelVariants({ size }), className);
+
+    return (
+      <FormPrimitive.Label
+        ref={ref}
+        className={labelClassName}
+        style={style}
+        htmlFor={htmlFor}
+        requiredIndicator={
+          <Text className="text-red-500" aria-hidden>
+            {' *'}
+          </Text>
+        }
+        {...props}
+      >
+        {children}
+      </FormPrimitive.Label>
+    );
+  },
+);
+
+FormLabel.displayName = 'Form.Label';
+
+// =============================================================================
+// FORM HELPER
+// =============================================================================
+
+export interface FormHelperProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const FormHelper = forwardRef<View, FormHelperProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const computedClassName = cn(formHelperVariants(), className);
+
+    return (
+      <FormPrimitive.Helper ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </FormPrimitive.Helper>
+    );
+  },
+);
+
+FormHelper.displayName = 'Form.Helper';
+
+// =============================================================================
+// FORM HELPER TEXT
+// =============================================================================
+
+export interface FormHelperTextProps extends TextProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const FormHelperText = forwardRef<Text, FormHelperTextProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const { size } = useFormStyleContext();
+    const computedClassName = cn(formHelperTextVariants({ size }), className);
+
+    return (
+      <FormPrimitive.HelperText ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </FormPrimitive.HelperText>
+    );
+  },
+);
+
+FormHelperText.displayName = 'Form.HelperText';
+
+// =============================================================================
+// FORM ERROR
+// =============================================================================
+
+export interface FormErrorProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const FormError = forwardRef<View, FormErrorProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const computedClassName = cn(formErrorVariants(), className);
+
+    return (
+      <FormPrimitive.Error ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </FormPrimitive.Error>
+    );
+  },
+);
+
+FormError.displayName = 'Form.Error';
+
+// =============================================================================
+// FORM ERROR TEXT
+// =============================================================================
+
+export interface FormErrorTextProps extends TextProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const FormErrorText = forwardRef<Text, FormErrorTextProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const { size } = useFormStyleContext();
+    const computedClassName = cn(formErrorTextVariants({ size }), className);
+
+    return (
+      <FormPrimitive.ErrorText ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </FormPrimitive.ErrorText>
+    );
+  },
+);
+
+FormErrorText.displayName = 'Form.ErrorText';
+
+// =============================================================================
+// FORM ERROR ICON
+// =============================================================================
+
+export interface FormErrorIconProps extends Omit<IconProps, 'children'> {}
+
+const FormErrorIcon = ({ className, style, as, ...props }: FormErrorIconProps) => {
+  const { size } = useFormStyleContext();
+  const computedClassName = cn(formErrorIconVariants({ size }), className);
+
+  return <Icon as={as} className={computedClassName} style={style} {...props} />;
+};
+
+FormErrorIcon.displayName = 'Form.ErrorIcon';
+
+// =============================================================================
+// COMPOUND EXPORT
+// =============================================================================
+
+type FormCompoundComponent = typeof FormRoot & {
+  Field: typeof FormField;
+  Label: typeof FormLabel;
+  Helper: typeof FormHelper;
+  HelperText: typeof FormHelperText;
+  Error: typeof FormError;
+  ErrorText: typeof FormErrorText;
+  ErrorIcon: typeof FormErrorIcon;
+};
+
+export const Form = Object.assign(FormRoot, {
+  Field: FormField,
+  Label: FormLabel,
+  Helper: FormHelper,
+  HelperText: FormHelperText,
+  Error: FormError,
+  ErrorText: FormErrorText,
+  ErrorIcon: FormErrorIcon,
+}) as FormCompoundComponent;

package/src/components/Form/styles.ts

@@ -0,0 +1,75 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import {
+  COLOR_TEXT_INVALID,
+  COLOR_TEXT_SECONDARY,
+  DISABLED_OPACITY,
+} from '../../styles/primitives';
+
+export const formRootVariants = cva(['flex-col gap-4']);
+
+export const formFieldVariants = cva(['flex-col gap-1.5 mb-4', 'web:last:mb-0', DISABLED_OPACITY]);
+
+export const formLabelVariants = cva(
+  [
+    'flex-row items-center',
+    DISABLED_OPACITY,
+    'web:cursor-pointer',
+    'font-medium data-[invalid=true]:text-red-600',
+  ],
+  {
+    variants: {
+      size: {
+        default: 'text-sm',
+        small: 'text-xs',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  },
+);
+
+export const formHelperVariants = cva(['flex-row items-center']);
+
+export const formHelperTextVariants = cva([COLOR_TEXT_SECONDARY], {
+  variants: {
+    size: {
+      default: 'text-xs',
+      small: 'text-[11px]',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+});
+
+export const formErrorVariants = cva(['flex-row items-center gap-1']);
+
+export const formErrorTextVariants = cva([COLOR_TEXT_INVALID, 'font-medium'], {
+  variants: {
+    size: {
+      default: 'text-xs',
+      small: 'text-[11px]',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+});
+
+export const formErrorIconVariants = cva([COLOR_TEXT_INVALID], {
+  variants: {
+    size: {
+      default: 'size-3.5',
+      small: 'size-3',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+});
+
+export type FormLabelVariantProps = VariantProps<typeof formLabelVariants>;
+export type FormHelperTextVariantProps = VariantProps<typeof formHelperTextVariants>;
+export type FormErrorTextVariantProps = VariantProps<typeof formErrorTextVariants>;
+export type FormErrorIconVariantProps = VariantProps<typeof formErrorIconVariants>;

package/src/components/Input/index.tsx

@@ -146,5 +146,3 @@ export const Input = Object.assign(InputRoot, {
   Slot: InputSlot,
   Icon: InputIcon,
 }) as InputCompoundComponent;
-
-export type { InputVariantProps };

package/src/components/Select/SelectTriggerHost.tsx

@@ -0,0 +1,4 @@
+import { Pressable } from 'react-native';
+
+/** Native: `Pressable`. Web: `SelectTriggerHost.web` uses `<button>` so `<label htmlFor>` works. */
+export const SelectTriggerHost = Pressable;