@erquhart/heroui-native 1.0.0-beta.10.1

package/lib/module/components/form-field/form-field.js

@@ -0,0 +1,257 @@
+"use strict";
+
+import React, { cloneElement, forwardRef, useCallback, useMemo } from 'react';
+import { Pressable, View } from 'react-native';
+import { hasProp } from "../../helpers/utils/index.js";
+import { useSharedValue } from 'react-native-reanimated';
+import { HeroText } from "../../helpers/components/hero-text.js";
+import { AnimationSettingsProvider } from "../../helpers/contexts/animation-settings-context.js";
+import { Checkbox } from "../checkbox/index.js";
+import { ErrorView } from "../error-view/index.js";
+import { Switch } from "../switch/index.js";
+import { useFormFieldRootAnimation } from "./form-field.animation.js";
+import { DISPLAY_NAME } from "./form-field.constants.js";
+import { FormFieldProvider, useFormField } from "./form-field.context.js";
+import formFieldStyles from "./form-field.styles.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+// --------------------------------------------------
+
+const FormField = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    isSelected,
+    onSelectedChange,
+    isDisabled = false,
+    isInvalid = false,
+    onPressIn,
+    onPressOut,
+    animation,
+    ...restProps
+  } = props;
+  const renderProps = useMemo(() => ({
+    isSelected,
+    isDisabled: isDisabled ?? false,
+    isInvalid: isInvalid ?? false
+  }), [isSelected, isDisabled, isInvalid]);
+  const content = typeof children === 'function' ? children(renderProps) : children;
+  const tvStyles = formFieldStyles.root({
+    isDisabled,
+    className
+  });
+  const {
+    isAllAnimationsDisabled
+  } = useFormFieldRootAnimation({
+    animation
+  });
+  const animationSettingsContextValue = useMemo(() => ({
+    isAllAnimationsDisabled
+  }), [isAllAnimationsDisabled]);
+  const isPressed = useSharedValue(false);
+  const handlePress = e => {
+    if (!isDisabled && onSelectedChange && isSelected !== undefined) {
+      onSelectedChange(!isSelected);
+      if (props.onPress && typeof props.onPress === 'function') {
+        props.onPress(e);
+      }
+    }
+  };
+  const handlePressIn = useCallback(e => {
+    isPressed.set(true);
+    if (onPressIn && typeof onPressIn === 'function') {
+      onPressIn(e);
+    }
+  }, [isPressed, onPressIn]);
+  const handlePressOut = useCallback(e => {
+    isPressed.set(false);
+    if (onPressOut && typeof onPressOut === 'function') {
+      onPressOut(e);
+    }
+  }, [isPressed, onPressOut]);
+  const contextValue = useMemo(() => ({
+    isSelected,
+    onSelectedChange,
+    isDisabled,
+    isInvalid,
+    isPressed
+  }), [isSelected, onSelectedChange, isDisabled, isInvalid, isPressed]);
+  return /*#__PURE__*/_jsx(AnimationSettingsProvider, {
+    value: animationSettingsContextValue,
+    children: /*#__PURE__*/_jsx(FormFieldProvider, {
+      value: contextValue,
+      children: /*#__PURE__*/_jsx(Pressable, {
+        ref: ref,
+        className: tvStyles,
+        onPress: handlePress,
+        onPressIn: handlePressIn,
+        onPressOut: handlePressOut,
+        disabled: isDisabled,
+        ...restProps,
+        children: content
+      })
+    })
+  });
+});
+
+// --------------------------------------------------
+
+const FormFieldLabel = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    ...restProps
+  } = props;
+  const tvStyles = formFieldStyles.title({
+    className
+  });
+  return /*#__PURE__*/_jsx(HeroText, {
+    ref: ref,
+    className: tvStyles,
+    ...restProps,
+    children: children
+  });
+});
+
+// --------------------------------------------------
+
+const FormFieldDescription = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    ...restProps
+  } = props;
+  const tvStyles = formFieldStyles.description({
+    className
+  });
+  return /*#__PURE__*/_jsx(HeroText, {
+    ref: ref,
+    className: tvStyles,
+    ...restProps,
+    children: children
+  });
+});
+
+// --------------------------------------------------
+
+const FormFieldIndicator = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    variant = 'switch',
+    ...restProps
+  } = props;
+  const {
+    isSelected,
+    onSelectedChange,
+    isDisabled,
+    isInvalid
+  } = useFormField();
+  const tvStyles = formFieldStyles.indicator({
+    className
+  });
+  const enhancedChildren = useMemo(() => {
+    if (children) {
+      if (typeof children !== 'object') return children;
+      const child = children;
+      return /*#__PURE__*/cloneElement(child, {
+        // Only pass props from context if child doesn't already have them
+        ...(isSelected !== undefined && !hasProp(child, 'isSelected') && {
+          isSelected
+        }),
+        ...(onSelectedChange && !hasProp(child, 'onSelectedChange') && {
+          onSelectedChange
+        }),
+        ...(isDisabled !== undefined && !hasProp(child, 'isDisabled') && {
+          isDisabled
+        }),
+        ...(isInvalid !== undefined && !hasProp(child, 'isInvalid') && {
+          isInvalid
+        })
+      });
+    }
+
+    // Render default component based on variant when no children provided
+    if (variant === 'checkbox') {
+      return /*#__PURE__*/_jsx(Checkbox, {
+        isSelected: isSelected,
+        onSelectedChange: onSelectedChange,
+        isDisabled: isDisabled,
+        isInvalid: isInvalid
+      });
+    }
+    return /*#__PURE__*/_jsx(Switch, {
+      isSelected: isSelected,
+      onSelectedChange: onSelectedChange,
+      isDisabled: isDisabled
+    });
+  }, [children, variant, isSelected, onSelectedChange, isDisabled, isInvalid]);
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    className: tvStyles,
+    ...restProps,
+    children: enhancedChildren
+  });
+});
+
+// --------------------------------------------------
+
+const FormFieldErrorMessage = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    isInvalid
+  } = useFormField();
+  const {
+    className,
+    ...restProps
+  } = props;
+  const tvStyles = formFieldStyles.errorMessage({
+    className
+  });
+  return /*#__PURE__*/_jsx(ErrorView, {
+    ref: ref,
+    isInvalid: isInvalid,
+    className: tvStyles,
+    ...restProps
+  });
+});
+
+// --------------------------------------------------
+
+FormField.displayName = DISPLAY_NAME.FORM_FIELD;
+FormFieldLabel.displayName = DISPLAY_NAME.FORM_FIELD_LABEL;
+FormFieldDescription.displayName = DISPLAY_NAME.FORM_FIELD_DESCRIPTION;
+FormFieldIndicator.displayName = DISPLAY_NAME.FORM_FIELD_INDICATOR;
+FormFieldErrorMessage.displayName = DISPLAY_NAME.FORM_FIELD_ERROR_MESSAGE;
+
+/**
+ * Compound FormField component with sub-components
+ *
+ * @component FormField - Wrapper that provides consistent layout and interaction for form controls.
+ * Handles press events to toggle selection state and manages disabled states.
+ *
+ * @component FormField.Label - Primary text label for the form control. Renders as
+ * Text component when children is a string.
+ *
+ * @component FormField.Description - Secondary descriptive text. Renders as Text
+ * component when children is a string.
+ *
+ * @component FormField.Indicator - Container for the control component (Switch, Checkbox).
+ * Automatically passes down isSelected, onSelectedChange, isDisabled, and isInvalid props.
+ *
+ * @component FormField.ErrorMessage - Error message displayed when field is invalid.
+ * Shown with animation below the form field content.
+ *
+ * Props flow from FormField to sub-components via context.
+ */
+const CompoundFormField = Object.assign(FormField, {
+  /** @optional Primary text label */
+  Label: FormFieldLabel,
+  /** @optional Secondary descriptive text */
+  Description: FormFieldDescription,
+  /** @optional Container for control component */
+  Indicator: FormFieldIndicator,
+  /** @optional Error message displayed when field is invalid */
+  ErrorMessage: FormFieldErrorMessage
+});
+export { useFormField } from "./form-field.context.js";
+export default CompoundFormField;
+//# sourceMappingURL=form-field.js.map

package/lib/module/components/form-field/form-field.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","cloneElement","forwardRef","useCallback","useMemo","Pressable","View","hasProp","useSharedValue","HeroText","AnimationSettingsProvider","Checkbox","ErrorView","Switch","useFormFieldRootAnimation","DISPLAY_NAME","FormFieldProvider","useFormField","formFieldStyles","jsx","_jsx","FormField","props","ref","children","className","isSelected","onSelectedChange","isDisabled","isInvalid","onPressIn","onPressOut","animation","restProps","renderProps","content","tvStyles","root","isAllAnimationsDisabled","animationSettingsContextValue","isPressed","handlePress","e","undefined","onPress","handlePressIn","set","handlePressOut","contextValue","value","disabled","FormFieldLabel","title","FormFieldDescription","description","FormFieldIndicator","variant","indicator","enhancedChildren","child","FormFieldErrorMessage","errorMessage","displayName","FORM_FIELD","FORM_FIELD_LABEL","FORM_FIELD_DESCRIPTION","FORM_FIELD_INDICATOR","FORM_FIELD_ERROR_MESSAGE","CompoundFormField","Object","assign","Label","Description","Indicator","ErrorMessage"],"sourceRoot":"../../../../src","sources":["components/form-field/form-field.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/form-field/form-field.md

@@ -0,0 +1,243 @@
+# FormField
+
+Provides consistent layout and interaction for form controls with label, description, and error handling. Perfect for Switch and Checkbox components when you want the entire field to be pressable.
+
+## Imports
+
+Note: Before importing this component, ensure you have completed the setup as per the [Quick Start guide](../../../README.md).
+
+```tsx
+import { FormField } from 'heroui-native';
+```
+
+## Usage
+
+### Basic Usage
+
+FormField wraps form controls to provide consistent layout and state management.
+
+```tsx
+<FormField isSelected={value} onSelectedChange={setValue}>
+  <View className="flex-1">
+    <FormField.Label>Label text</FormField.Label>
+  </View>
+  <FormField.Indicator />
+</FormField>
+```
+
+### With Description
+
+Add helper text below the label using the Description component.
+
+```tsx
+<FormField isSelected={value} onSelectedChange={setValue}>
+  <View className="flex-1">
+    <FormField.Label>Enable notifications</FormField.Label>
+    <FormField.Description>
+      Receive push notifications about your account activity
+    </FormField.Description>
+  </View>
+  <FormField.Indicator />
+</FormField>
+```
+
+### With Error Message
+
+Display validation errors using the ErrorMessage component.
+
+```tsx
+<FormField
+  isSelected={value}
+  onSelectedChange={setValue}
+  isInvalid={!value}
+  className="flex-col items-start gap-1"
+>
+  <View className="flex-row items-center gap-2">
+    <View className="flex-1">
+      <FormField.Label>I agree to the terms</FormField.Label>
+      <FormField.Description>
+        By checking this box, you agree to our Terms of Service
+      </FormField.Description>
+    </View>
+    <FormField.Indicator variant="checkbox" />
+  </View>
+  <FormField.ErrorMessage>This field is required</FormField.ErrorMessage>
+</FormField>
+```
+
+### Disabled State
+
+Control interactivity with the disabled prop.
+
+```tsx
+<FormField isSelected={value} onSelectedChange={setValue} isDisabled>
+  <View className="flex-1">
+    <FormField.Label>Disabled field</FormField.Label>
+    <FormField.Description>This field is disabled</FormField.Description>
+  </View>
+  <FormField.Indicator />
+</FormField>
+```
+
+### Disabling All Animations
+
+Disable all animations including children by using `"disable-all"`. This cascades down to all child components.
+
+```tsx
+<FormField
+  isSelected={value}
+  onSelectedChange={setValue}
+  animation="disable-all"
+>
+  <View className="flex-1">
+    <FormField.Label>Label text</FormField.Label>
+    <FormField.Description>Description text</FormField.Description>
+  </View>
+  <FormField.Indicator />
+</FormField>
+```
+
+## Example
+
+```tsx
+import { Checkbox, FormField, Switch } from 'heroui-native';
+import React from 'react';
+import { ScrollView, View } from 'react-native';
+
+export default function FormFieldExample() {
+  const [notifications, setNotifications] = React.useState(false);
+  const [terms, setTerms] = React.useState(false);
+  const [newsletter, setNewsletter] = React.useState(true);
+
+  return (
+    <ScrollView className="bg-background p-4">
+      <View className="gap-4">
+        <FormField
+          isSelected={notifications}
+          onSelectedChange={setNotifications}
+        >
+          <View className="flex-1">
+            <FormField.Label>Enable notifications</FormField.Label>
+            <FormField.Description>
+              Receive push notifications about your account activity
+            </FormField.Description>
+          </View>
+          <FormField.Indicator />
+        </FormField>
+
+        <FormField
+          isSelected={terms}
+          onSelectedChange={setTerms}
+          isInvalid={!terms}
+          className="flex-col items-start gap-1"
+        >
+          <View className="flex-row items-center gap-2">
+            <View className="flex-1">
+              <FormField.Label>
+                I agree to the terms and conditions
+              </FormField.Label>
+              <FormField.Description>
+                By checking this box, you agree to our Terms of Service
+              </FormField.Description>
+            </View>
+            <FormField.Indicator className="mt-0.5">
+              <Checkbox />
+            </FormField.Indicator>
+          </View>
+          <FormField.ErrorMessage>
+            This field is required
+          </FormField.ErrorMessage>
+        </FormField>
+
+        <FormField isSelected={newsletter} onSelectedChange={setNewsletter}>
+          <View className="flex-1">
+            <FormField.Label>Subscribe to newsletter</FormField.Label>
+          </View>
+          <FormField.Indicator>
+            <Checkbox color="warning" />
+          </FormField.Indicator>
+        </FormField>
+      </View>
+    </ScrollView>
+  );
+}
+```
+
+## Anatomy
+
+```tsx
+<FormField>
+  <FormField.Label>...</FormField.Label>
+  <FormField.Description>...</FormField.Description>
+  <FormField.Indicator>...</FormField.Indicator>
+  <FormField.ErrorMessage>...</FormField.ErrorMessage>
+</FormField>
+```
+
+- **FormField**: Root container that manages layout and state propagation
+- **FormField.Label**: Primary text label for the control
+- **FormField.Description**: Secondary descriptive helper text
+- **FormField.Indicator**: Container for the form control component (Switch, Checkbox)
+- **FormField.ErrorMessage**: Validation error message display
+
+## API Reference
+
+### FormField
+
+| prop              | type                                                                    | default     | description                                                                               |
+| ----------------- | ----------------------------------------------------------------------- | ----------- | ----------------------------------------------------------------------------------------- |
+| children          | `React.ReactNode \| ((props: FormFieldRenderProps) => React.ReactNode)` | -           | Content to render inside the form control, or a render function                           |
+| isSelected        | `boolean`                                                               | `undefined` | Whether the control is selected/checked                                                   |
+| isDisabled        | `boolean`                                                               | `false`     | Whether the form control is disabled                                                      |
+| isInvalid         | `boolean`                                                               | `false`     | Whether the form control is invalid                                                       |
+| className         | `string`                                                                | -           | Custom class name for the root element                                                    |
+| onSelectedChange  | `(isSelected: boolean) => void`                                         | -           | Callback when selection state changes                                                     |
+| animation         | `"disable-all" \| undefined`                                            | `undefined` | Animation configuration. Use `"disable-all"` to disable all animations including children |
+| ...PressableProps | `PressableProps`                                                        | -           | All React Native Pressable props are supported                                            |
+
+### FormField.Label
+
+| prop         | type              | default | description                               |
+| ------------ | ----------------- | ------- | ----------------------------------------- |
+| children     | `React.ReactNode` | -       | Label text content                        |
+| className    | `string`          | -       | Custom class name for the label element   |
+| ...TextProps | `TextProps`       | -       | All React Native Text props are supported |
+
+### FormField.Description
+
+| prop         | type              | default | description                                   |
+| ------------ | ----------------- | ------- | --------------------------------------------- |
+| children     | `React.ReactNode` | -       | Description text content                      |
+| className    | `string`          | -       | Custom class name for the description element |
+| ...TextProps | `TextProps`       | -       | All React Native Text props are supported     |
+
+### FormField.Indicator
+
+| prop         | type                     | default    | description                                                |
+| ------------ | ------------------------ | ---------- | ---------------------------------------------------------- |
+| children     | `React.ReactNode`        | -          | Control component to render (Switch, Checkbox)             |
+| variant      | `'checkbox' \| 'switch'` | `'switch'` | Variant of the control to render when no children provided |
+| className    | `string`                 | -          | Custom class name for the indicator element                |
+| ...ViewProps | `ViewProps`              | -          | All React Native View props are supported                  |
+
+**Note**: When children are provided, the component automatically passes down `isSelected`, `onSelectedChange`, `isDisabled`, and `isInvalid` props from the FormField context if they are not already present on the child component.
+
+### FormField.ErrorMessage
+
+FormField.ErrorMessage extends all props from [ErrorView](../error-view/error-view.md) component.
+
+**Note**: The `isInvalid` prop is automatically passed from the FormField context. The error message visibility is controlled by the `isInvalid` state of the parent FormField.
+
+## Hooks
+
+### useFormField
+
+**Returns:**
+
+| property           | type                                           | description                                    |
+| ------------------ | ---------------------------------------------- | ---------------------------------------------- |
+| `isSelected`       | `boolean \| undefined`                         | Whether the control is selected/checked        |
+| `onSelectedChange` | `((isSelected: boolean) => void) \| undefined` | Callback when selection state changes          |
+| `isDisabled`       | `boolean`                                      | Whether the form control is disabled           |
+| `isInvalid`        | `boolean`                                      | Whether the form control is invalid            |
+| `isPressed`        | `SharedValue<boolean>`                         | Reanimated shared value indicating press state |

package/lib/module/components/form-field/form-field.styles.js

@@ -0,0 +1,36 @@
+"use strict";
+
+import { tv } from 'tailwind-variants';
+import { combineStyles } from "../../helpers/theme/utils/combine-styles.js";
+const root = tv({
+  base: 'flex-row items-center gap-3',
+  variants: {
+    isDisabled: {
+      true: 'opacity-disabled pointer-events-none'
+    }
+  },
+  defaultVariants: {
+    isDisabled: false
+  }
+});
+const title = tv({
+  base: 'text-base font-medium text-foreground'
+});
+const description = tv({
+  base: 'text-sm text-muted'
+});
+const indicator = tv({
+  base: ''
+});
+const errorMessage = tv({
+  base: ''
+});
+const formFieldStyles = combineStyles({
+  root,
+  title,
+  description,
+  indicator,
+  errorMessage
+});
+export default formFieldStyles;
+//# sourceMappingURL=form-field.styles.js.map

package/lib/module/components/form-field/form-field.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tv","combineStyles","root","base","variants","isDisabled","true","defaultVariants","title","description","indicator","errorMessage","formFieldStyles"],"sourceRoot":"../../../../src","sources":["components/form-field/form-field.styles.ts"],"mappings":";;AAAA,SAASA,EAAE,QAAQ,mBAAmB;AACtC,SAASC,aAAa,QAAQ,6CAA0C;AAExE,MAAMC,IAAI,GAAGF,EAAE,CAAC;EACdG,IAAI,EAAE,6BAA6B;EACnCC,QAAQ,EAAE;IACRC,UAAU,EAAE;MACVC,IAAI,EAAE;IACR;EACF,CAAC;EACDC,eAAe,EAAE;IACfF,UAAU,EAAE;EACd;AACF,CAAC,CAAC;AAEF,MAAMG,KAAK,GAAGR,EAAE,CAAC;EACfG,IAAI,EAAE;AACR,CAAC,CAAC;AAEF,MAAMM,WAAW,GAAGT,EAAE,CAAC;EACrBG,IAAI,EAAE;AACR,CAAC,CAAC;AAEF,MAAMO,SAAS,GAAGV,EAAE,CAAC;EACnBG,IAAI,EAAE;AACR,CAAC,CAAC;AAEF,MAAMQ,YAAY,GAAGX,EAAE,CAAC;EACtBG,IAAI,EAAE;AACR,CAAC,CAAC;AAEF,MAAMS,eAAe,GAAGX,aAAa,CAAC;EACpCC,IAAI;EACJM,KAAK;EACLC,WAAW;EACXC,SAAS;EACTC;AACF,CAAC,CAAC;AAEF,eAAeC,eAAe","ignoreList":[]}

package/lib/module/components/form-field/form-field.types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=form-field.types.js.map

package/lib/module/components/form-field/form-field.types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/form-field/form-field.types.ts"],"mappings":"","ignoreList":[]}

package/lib/module/components/form-field/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { default as FormField, useFormField } from "./form-field.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/form-field/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["default","FormField","useFormField"],"sourceRoot":"../../../../src","sources":["components/form-field/index.ts"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,SAAS,EAAEC,YAAY,QAAQ,iBAAc","ignoreList":[]}