@cdx-ui/components 0.0.1-alpha.35 → 0.0.1-alpha.37

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

@@ -1,64 +1,7 @@
-import { type ReactNode } from 'react';
-import { Text, View, type ViewProps, type TextProps } from 'react-native';
-import { type IFormProps, type IFormFieldProps } from '@cdx-ui/primitives';
-import { type IconProps } from '../Icon';
+import React from 'react';
+import { View } from 'react-native';
 import { type BaseFormRootProps } from './FormRoot';
-export interface FormProps extends BaseFormRootProps, IFormProps {
-    className?: string;
-    children?: ReactNode;
+export interface FormProps extends BaseFormRootProps {
 }
-declare const FormRoot: import("react").ForwardRefExoticComponent<FormProps & import("react").RefAttributes<View>>;
-/**
- * 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';
-}
-declare const FormField: import("react").ForwardRefExoticComponent<FormFieldProps & import("react").RefAttributes<View>>;
-export interface FormLabelProps extends ViewProps {
-    className?: string;
-    children?: ReactNode;
-    /** @platform web — passed to `<label htmlFor>`; defaults to the field input id. */
-    htmlFor?: string;
-}
-declare const FormLabel: import("react").ForwardRefExoticComponent<FormLabelProps & import("react").RefAttributes<View>>;
-export interface FormHelperProps extends ViewProps {
-    className?: string;
-    children?: ReactNode;
-}
-declare const FormHelper: import("react").ForwardRefExoticComponent<FormHelperProps & import("react").RefAttributes<View>>;
-export interface FormHelperTextProps extends TextProps {
-    className?: string;
-    children?: ReactNode;
-}
-declare const FormHelperText: import("react").ForwardRefExoticComponent<FormHelperTextProps & import("react").RefAttributes<Text>>;
-export interface FormErrorProps extends ViewProps {
-    className?: string;
-    children?: ReactNode;
-}
-declare const FormError: import("react").ForwardRefExoticComponent<FormErrorProps & import("react").RefAttributes<View>>;
-export interface FormErrorTextProps extends TextProps {
-    className?: string;
-    children?: ReactNode;
-}
-declare const FormErrorText: import("react").ForwardRefExoticComponent<FormErrorTextProps & import("react").RefAttributes<Text>>;
-export interface FormErrorIconProps extends Omit<IconProps, 'children'> {
-}
-declare const FormErrorIcon: {
-    ({ className, style, as, ...props }: FormErrorIconProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-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 declare const Form: FormCompoundComponent;
-export {};
+export declare const Form: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<View>>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAC1E,OAAO,EAAc,KAAK,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAEvF,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,YAAY,CAAC;AA8ClE,MAAM,WAAW,SAAU,SAAQ,iBAAiB,EAAE,UAAU;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,QAAQ,4FAQZ,CAAC;AAQH;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,MAAM,CAAC,EAAE,eAAe;IACrF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAC5B;AAED,QAAA,MAAM,SAAS,iGAgBd,CAAC;AAQF,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mFAAmF;IACnF,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAID,QAAA,MAAM,SAAS,iGAsBd,CAAC;AAQF,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,UAAU,kGAUf,CAAC;AAQF,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,cAAc,sGAWnB,CAAC;AAQF,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,SAAS,iGAUd,CAAC;AAQF,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,aAAa,qGAWlB,CAAC;AAQF,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;CAAG;AAE1E,QAAA,MAAM,aAAa;yCAAwC,kBAAkB;;CAK5E,CAAC;AAQF,KAAK,qBAAqB,GAAG,OAAO,QAAQ,GAAG;IAC7C,KAAK,EAAE,OAAO,SAAS,CAAC;IACxB,KAAK,EAAE,OAAO,SAAS,CAAC;IACxB,MAAM,EAAE,OAAO,UAAU,CAAC;IAC1B,UAAU,EAAE,OAAO,cAAc,CAAC;IAClC,KAAK,EAAE,OAAO,SAAS,CAAC;IACxB,SAAS,EAAE,OAAO,aAAa,CAAC;IAChC,SAAS,EAAE,OAAO,aAAa,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,IAAI,EAQX,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAelE,MAAM,WAAW,SAAU,SAAQ,iBAAiB;CAAG;AAkBvD,eAAO,MAAM,IAAI,wEAAW,CAAC"}

package/lib/typescript/components/Form/styles.d.ts

@@ -1,22 +1,2 @@
-import { type VariantProps } from 'class-variance-authority';
 export declare const formRootVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const formFieldVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const formLabelVariants: (props?: ({
-    size?: "small" | "default" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare const formHelperVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const formHelperTextVariants: (props?: ({
-    size?: "small" | "default" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare const formErrorVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const formErrorTextVariants: (props?: ({
-    size?: "small" | "default" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare const formErrorIconVariants: (props?: ({
-    size?: "small" | "default" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export type FormLabelVariantProps = VariantProps<typeof formLabelVariants>;
-export type FormHelperTextVariantProps = VariantProps<typeof formHelperTextVariants>;
-export type FormErrorTextVariantProps = VariantProps<typeof formErrorTextVariants>;
-export type FormErrorIconVariantProps = VariantProps<typeof formErrorIconVariants>;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAOlE,eAAO,MAAM,gBAAgB,oFAA0B,CAAC;AAExD,eAAO,MAAM,iBAAiB,oFAAoE,CAAC;AAEnG,eAAO,MAAM,iBAAiB;;8EAkB7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,oFAAiC,CAAC;AAEjE,eAAO,MAAM,sBAAsB;;8EAUjC,CAAC;AAEH,eAAO,MAAM,iBAAiB,oFAAuC,CAAC;AAEtE,eAAO,MAAM,qBAAqB;;8EAUhC,CAAC;AAEH,eAAO,MAAM,qBAAqB;;8EAUhC,CAAC;AAEH,MAAM,MAAM,qBAAqB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC3E,MAAM,MAAM,0BAA0B,GAAG,YAAY,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACrF,MAAM,MAAM,yBAAyB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACnF,MAAM,MAAM,yBAAyB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,oFAA0B,CAAC"}

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

@@ -0,0 +1,11 @@
+import type { View } from 'react-native';
+import { type IOtpInputRootProps } from '@cdx-ui/primitives';
+import { type InputProps } from '../Input';
+import { type OtpInputVariantProps } from './styles';
+export interface OtpInputProps extends Omit<IOtpInputRootProps, 'size'>, OtpInputVariantProps {
+    variant?: NonNullable<InputProps['variant']>;
+    size?: NonNullable<InputProps['size']>;
+    className?: string;
+}
+export declare const OtpInput: import("react").ForwardRefExoticComponent<OtpInputProps & import("react").RefAttributes<View>>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/OtpInput/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAkB,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAG7E,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAElD,OAAO,EAIL,KAAK,oBAAoB,EAC1B,MAAM,UAAU,CAAC;AA2ClB,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,EAAE,oBAAoB;IAC3F,OAAO,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC;IAC7C,IAAI,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,QAAQ,gGAcpB,CAAC"}

package/lib/typescript/components/OtpInput/styles.d.ts

@@ -0,0 +1,14 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const otpRootVariants: (props?: ({
+    size?: "small" | "default" | null | undefined;
+    fullWidth?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Narrow cell chrome: overrides Input root `w-full` / wide horizontal padding for one digit. */
+export declare const otpCellVariants: (props?: ({
+    size?: "small" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const otpFieldVariants: (props?: ({
+    size?: "small" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type OtpInputVariantProps = VariantProps<typeof otpRootVariants>;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/OtpInput/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,eAAe;;;8EAe1B,CAAC;AAEH,iGAAiG;AACjG,eAAO,MAAM,eAAe;;8EAU1B,CAAC;AAEH,eAAO,MAAM,gBAAgB;;8EAU3B,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}

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

@@ -7,9 +7,11 @@ export * from './Card';
 export * from './Checkbox';
 export * from './Chip';
 export * from './Dialog';
+export * from './Field';
 export * from './Form';
 export * from './Image';
 export * from './Input';
+export * from './OtpInput';
 export * from './Link';
 export * from './ProgressBar';
 export * from './ProgressSegmented';

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,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,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,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/components",
-  "version": "0.0.1-alpha.35",
+  "version": "0.0.1-alpha.37",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -66,9 +66,9 @@
     "@gorhom/bottom-sheet": "^5.2.6",
     "class-variance-authority": "^0.7.1",
     "uniwind": "1.6.1",
-    "@cdx-ui/icons": "0.0.1-alpha.35",
-    "@cdx-ui/primitives": "0.0.1-alpha.35",
-    "@cdx-ui/utils": "0.0.1-alpha.35"
+    "@cdx-ui/primitives": "0.0.1-alpha.37",
+    "@cdx-ui/utils": "0.0.1-alpha.37",
+    "@cdx-ui/icons": "0.0.1-alpha.37"
   },
   "devDependencies": {
     "@types/react": "*",

package/src/components/{Form/FormLabelRoot.tsx → Field/FieldLabel.tsx}

@@ -2,8 +2,8 @@ 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`). */
+export type BaseFieldLabelProps = TextProps & {
+  /** @platform web — forwarded on web; ignored here (see `FieldLabelRoot.web`). */
   htmlFor?: string;
   /** Optional; composed with label tap-to-focus on native. */
   onPress?: ((event: GestureResponderEvent) => void) | null;
@@ -13,7 +13,7 @@ export type FormLabelRootProps = TextProps & {
  * Native: `Text` label row — tap focuses the field input via form context
  * (parity with `<label htmlFor>` on web).
  */
-export const FormLabelRoot = forwardRef<Text, FormLabelRootProps>(
+export const BaseFieldLabel = forwardRef<Text, BaseFieldLabelProps>(
   ({ htmlFor: _omitHtmlFor, onPress, ...props }, ref) => {
     void _omitHtmlFor;
 
@@ -30,4 +30,4 @@ export const FormLabelRoot = forwardRef<Text, FormLabelRootProps>(
   },
 );
 
-FormLabelRoot.displayName = 'FormLabelRoot';
+BaseFieldLabel.displayName = 'BaseFieldLabel';

package/src/components/Field/FieldLabel.web.tsx

@@ -0,0 +1,25 @@
+import React, { forwardRef, type ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
+
+// TODO: Why does dataSet need to be decomposed into individual data attributes?
+
+export type BaseFieldLabelProps = ViewProps & {
+  htmlFor?: string;
+  children?: ReactNode;
+  /** @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 BaseFieldLabel = forwardRef<HTMLLabelElement, BaseFieldLabelProps>((props, ref) => {
+  return (
+    <label
+      ref={ref}
+      {...(props as React.LabelHTMLAttributes<HTMLLabelElement>)}
+      data-invalid={props.dataSet?.invalid}
+      data-required={props.dataSet?.required}
+    />
+  );
+});
+
+BaseFieldLabel.displayName = 'BaseFieldLabel';

package/src/components/Field/index.tsx

@@ -0,0 +1,171 @@
+import { forwardRef } from 'react';
+import { Text, View } from 'react-native';
+import { ErrorIcon } from '@cdx-ui/icons';
+import {
+  createField,
+  IFieldErrorProps,
+  IFieldHelperProps,
+  IFieldLabelProps,
+  type IFieldRootProps,
+} from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import { Icon } from '../Icon';
+import { BaseFieldLabel } from './FieldLabel';
+import {
+  fieldErrorIconVariants,
+  fieldErrorTextVariants,
+  fieldErrorVariants,
+  fieldHelperVariants,
+  fieldHelperTextVariants,
+  fieldLabelVariants,
+  fieldRootVariants,
+  type FieldRootVariantProps,
+  type FieldLabelVariantProps,
+  type FieldHelperVariantProps,
+  type FieldErrorVariantProps,
+} from './styles';
+
+// =============================================================================
+// PRIMITIVE
+// =============================================================================
+
+const FieldPrimitive = createField({
+  Root: View,
+  Label: BaseFieldLabel,
+  Helper: View,
+  HelperText: Text,
+  Error: View,
+  ErrorText: Text,
+  ErrorIcon: View,
+});
+
+// =============================================================================
+// FIELD ROOT
+// =============================================================================
+
+/**
+ * Field wrapper + context. For **initial focus**, pass `autoFocus` on `Input.Field` (not here).
+ */
+export interface FieldRootProps extends IFieldRootProps, FieldRootVariantProps {}
+
+const FieldRoot = forwardRef<View, FieldRootProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const computedClassName = cn(fieldRootVariants(), className);
+
+    return (
+      <FieldPrimitive ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </FieldPrimitive>
+    );
+  },
+);
+
+FieldRoot.displayName = 'Field';
+
+// =============================================================================
+// FIELD LABEL
+// =============================================================================
+
+export interface FieldLabelProps extends IFieldLabelProps, FieldLabelVariantProps {}
+
+const FieldLabel = forwardRef<View, FieldLabelProps>(
+  ({ className, children, style, htmlFor, ...props }, ref) => {
+    const labelClassName = cn(fieldLabelVariants(), className);
+
+    return (
+      <FieldPrimitive.Label
+        ref={ref}
+        className={labelClassName}
+        style={style}
+        htmlFor={htmlFor}
+        requiredIndicator={
+          <Text className="text-red-500" aria-hidden>
+            {' *'}
+          </Text>
+        }
+        {...props}
+      >
+        {children}
+      </FieldPrimitive.Label>
+    );
+  },
+);
+
+FieldLabel.displayName = 'Field.Label';
+
+// =============================================================================
+// FIELD HELPER
+// =============================================================================
+
+export interface FieldHelperProps extends IFieldHelperProps, FieldHelperVariantProps {}
+
+const FieldHelper = forwardRef<View, FieldHelperProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const containerClassName = cn(fieldHelperVariants(), className);
+    const textClassName = cn(fieldHelperTextVariants());
+
+    return (
+      <FieldPrimitive.Helper ref={ref} className={containerClassName} style={style} {...props}>
+        <FieldPrimitive.HelperText className={textClassName}>{children}</FieldPrimitive.HelperText>
+      </FieldPrimitive.Helper>
+    );
+  },
+);
+
+FieldHelper.displayName = 'Field.Helper';
+
+// =============================================================================
+// FIELD ERROR (internal icon + text composition)
+// =============================================================================
+
+const FieldErrorIcon = ({ className, style, ...props }: { className?: string; style?: any }) => {
+  const computedClassName = cn(fieldErrorIconVariants(), className);
+
+  return (
+    <Icon
+      as={ErrorIcon}
+      className={computedClassName}
+      style={style}
+      aria-hidden={true}
+      {...props}
+    />
+  );
+};
+
+FieldErrorIcon.displayName = 'Field.ErrorIcon';
+
+export interface FieldErrorProps extends IFieldErrorProps, FieldErrorVariantProps {}
+
+const FieldError = forwardRef<View, FieldErrorProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const containerClassName = cn(fieldErrorVariants(), className);
+    const textClassName = cn(fieldErrorTextVariants());
+
+    return (
+      <FieldPrimitive.Error ref={ref} className={containerClassName} style={style} {...props}>
+        <FieldPrimitive.ErrorIcon>
+          <FieldErrorIcon />
+        </FieldPrimitive.ErrorIcon>
+        <FieldPrimitive.ErrorText className={textClassName}>{children}</FieldPrimitive.ErrorText>
+      </FieldPrimitive.Error>
+    );
+  },
+);
+
+FieldError.displayName = 'Field.Error';
+
+// =============================================================================
+// COMPOUND EXPORT
+// =============================================================================
+
+type FieldCompoundComponent = typeof FieldRoot & {
+  Label: typeof FieldLabel;
+  Helper: typeof FieldHelper;
+  Error: typeof FieldError;
+};
+
+export const Field = Object.assign(FieldRoot, {
+  Label: FieldLabel,
+  Helper: FieldHelper,
+  Error: FieldError,
+}) as FieldCompoundComponent;

package/src/components/Field/styles.ts

@@ -0,0 +1,32 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import { DISABLED_OPACITY } from '../../styles/primitives';
+
+export const fieldRootVariants = cva(['flex-col gap-2', 'web:last:mb-0', DISABLED_OPACITY]);
+
+export const fieldLabelVariants = cva([
+  'body-md',
+  'font-medium',
+  'text-content-primary',
+  'flex-row items-center',
+  DISABLED_OPACITY,
+  'web:cursor-pointer',
+  'data-[invalid=true]:text-content-danger',
+]);
+
+export const fieldHelperVariants = cva(['flex-row items-center']);
+
+export const fieldHelperTextVariants = cva(['body-sm', 'text-content-tertiary']);
+
+export const fieldErrorVariants = cva(['flex-row items-center gap-1']);
+
+export const fieldErrorTextVariants = cva(['body-sm', 'text-content-danger']);
+
+export const fieldErrorIconVariants = cva(['size-3.5', 'text-content-danger']);
+
+export type FieldRootVariantProps = VariantProps<typeof fieldRootVariants>;
+export type FieldLabelVariantProps = VariantProps<typeof fieldLabelVariants>;
+export type FieldHelperVariantProps = VariantProps<typeof fieldHelperVariants>;
+export type FieldHelperTextVariantProps = VariantProps<typeof fieldHelperTextVariants>;
+export type FieldErrorVariantProps = VariantProps<typeof fieldErrorVariants>;
+export type FieldErrorTextVariantProps = VariantProps<typeof fieldErrorTextVariants>;
+export type FieldErrorIconVariantProps = VariantProps<typeof fieldErrorIconVariants>;

package/src/components/Form/FormRoot.tsx

@@ -5,6 +5,7 @@ export type BaseFormRootProps = ViewProps & {
   onSubmit?: (e: React.SyntheticEvent) => void;
   action?: string | ((formData: FormData) => void | Promise<void>);
   method?: string;
+  className?: string;
 };
 
 export const BaseFormRoot = forwardRef<View, BaseFormRootProps>(