@erquhart/heroui-native 1.0.0-beta.10.1

package/src/components/divider/divider.md

@@ -0,0 +1,98 @@
+# Divider
+
+A simple line to separate content visually.
+
+## Imports
+
+Note: Before importing this component, ensure you have completed the setup as per the [Quick Start guide](../../../README.md).
+
+```tsx
+import { Divider } from 'heroui-native';
+```
+
+## Usage
+
+### Basic Usage
+
+The Divider component creates a visual separation between content sections.
+
+```tsx
+<Divider />
+```
+
+### Orientation
+
+Control the direction of the divider with the `orientation` prop.
+
+```tsx
+<View>
+  <Text>Horizontal divider</Text>
+  <Divider orientation="horizontal" />
+  <Text>Content below</Text>
+</View>
+
+<View className="h-24 flex-row">
+  <Text>Left</Text>
+  <Divider orientation="vertical" />
+  <Text>Right</Text>
+</View>
+```
+
+### Variants
+
+Choose between thin and thick variants for different visual emphasis.
+
+```tsx
+<Divider variant="thin" />
+<Divider variant="thick" />
+```
+
+### Custom Thickness
+
+Set a specific thickness value for precise control.
+
+```tsx
+<Divider thickness={1} />
+<Divider thickness={5} />
+<Divider thickness={10} />
+```
+
+## Example
+
+```tsx
+import { Divider, Surface } from 'heroui-native';
+import { Text, View } from 'react-native';
+
+export default function DividerExample() {
+  return (
+    <Surface variant="secondary" className="px-6 py-7">
+      <Text className="text-base font-medium text-foreground">
+        HeroUI Native
+      </Text>
+      <Text className="text-sm text-muted">
+        A modern React Native component library.
+      </Text>
+      <Divider className="my-4" />
+      <View className="flex-row items-center h-5">
+        <Text className="text-sm text-foreground">Components</Text>
+        <Divider orientation="vertical" className="mx-3" />
+        <Text className="text-sm text-foreground">Themes</Text>
+        <Divider orientation="vertical" className="mx-3" />
+        <Text className="text-sm text-foreground">Examples</Text>
+      </View>
+    </Surface>
+  );
+}
+```
+
+## API Reference
+
+### Divider
+
+| prop           | type                         | default        | description                                                                                  |
+| -------------- | ---------------------------- | -------------- | -------------------------------------------------------------------------------------------- |
+| `variant`      | `'thin' \| 'thick'`          | `'thin'`       | Variant style of the divider                                                                 |
+| `orientation`  | `'horizontal' \| 'vertical'` | `'horizontal'` | Orientation of the divider                                                                   |
+| `thickness`    | `number`                     | `undefined`    | Custom thickness in pixels. Controls height for horizontal or width for vertical orientation |
+| `className`    | `string`                     | `undefined`    | Additional CSS classes to apply                                                              |
+| `...ViewProps` | `ViewProps`                  | -              | All standard React Native View props are supported                                           |

package/src/components/divider/divider.styles.ts

@@ -0,0 +1,47 @@
+import { tv } from 'tailwind-variants';
+
+const root = tv({
+  base: 'bg-divider',
+  variants: {
+    variant: {
+      thin: '',
+      thick: '',
+    },
+    orientation: {
+      horizontal: '',
+      vertical: 'h-full',
+    },
+  },
+  compoundVariants: [
+    // Thin variant - horizontal orientation
+    {
+      variant: 'thin',
+      orientation: 'horizontal',
+      className: 'h-hairline',
+    },
+    // Thin variant - vertical orientation
+    {
+      variant: 'thin',
+      orientation: 'vertical',
+      className: 'w-hairline',
+    },
+    // Thick variant - horizontal orientation
+    {
+      variant: 'thick',
+      orientation: 'horizontal',
+      className: `h-[6px]`,
+    },
+    // Thick variant - vertical orientation
+    {
+      variant: 'thick',
+      orientation: 'vertical',
+      className: `w-[6px]`,
+    },
+  ],
+  defaultVariants: {
+    variant: 'thin',
+    orientation: 'horizontal',
+  },
+});
+
+export default root;

package/src/components/divider/divider.tsx

@@ -0,0 +1,62 @@
+import { forwardRef } from 'react';
+import { View } from 'react-native';
+import { DISPLAY_NAME } from './divider.constants';
+import dividerStyles from './divider.styles';
+import type { DividerProps } from './divider.types';
+
+// --------------------------------------------------
+
+const DividerRoot = forwardRef<View, DividerProps>((props, ref) => {
+  const {
+    variant = 'thin',
+    orientation = 'horizontal',
+    thickness,
+    className,
+    style,
+    ...restProps
+  } = props;
+
+  const tvStyles = dividerStyles({
+    variant,
+    orientation,
+    className,
+  });
+
+  /**
+   * Custom thickness handling: when thickness prop is provided,
+   * override the variant-based thickness with inline styles
+   */
+  const customThicknessStyle =
+    thickness !== undefined
+      ? orientation === 'horizontal'
+        ? { height: thickness }
+        : { width: thickness }
+      : undefined;
+
+  return (
+    <View
+      ref={ref}
+      className={tvStyles}
+      style={customThicknessStyle ? [customThicknessStyle, style] : style}
+      {...restProps}
+    />
+  );
+});
+
+// --------------------------------------------------
+
+DividerRoot.displayName = DISPLAY_NAME.ROOT;
+
+/**
+ * Divider component for visual separation
+ *
+ * @component Divider - A simple line to separate content visually.
+ * Supports horizontal and vertical orientations with thin and thick variants.
+ * Uses hairline width utility classes for the thin variant by default.
+ * Custom thickness can be provided via the thickness prop to override variant-based sizing.
+ *
+ * @see Full documentation: https://heroui.com/components/divider
+ */
+const Divider = DividerRoot;
+
+export default Divider;

package/src/components/divider/divider.types.ts

@@ -0,0 +1,40 @@
+import type { ViewProps } from 'react-native';
+
+/**
+ * Orientation of the divider
+ * @default 'horizontal'
+ */
+export type DividerOrientation = 'horizontal' | 'vertical';
+
+/**
+ * Variant style of the divider
+ * @default 'thin'
+ */
+export type DividerVariant = 'thin' | 'thick';
+
+/**
+ * Props for the Divider component
+ */
+export interface DividerProps extends ViewProps {
+  /**
+   * Variant style of the divider
+   * @default 'thin'
+   */
+  variant?: DividerVariant;
+
+  /**
+   * Orientation of the divider
+   * @default 'horizontal'
+   */
+  orientation?: DividerOrientation;
+
+  /**
+   * Custom thickness of the divider. This controls the height (for horizontal) or width (for vertical) of the divider.
+   */
+  thickness?: number;
+
+  /**
+   * Additional CSS classes to apply to the divider
+   */
+  className?: string;
+}

package/src/components/divider/index.ts

@@ -0,0 +1,6 @@
+export { default as Divider } from './divider';
+export type {
+  DividerOrientation,
+  DividerProps,
+  DividerVariant,
+} from './divider.types';

package/src/components/error-view/error-view.animation.ts

@@ -0,0 +1,52 @@
+import { useCombinedAnimationDisabledState } from '../../helpers/hooks';
+import {
+  getAnimationValueProperty,
+  getIsAnimationDisabledValue,
+  getRootAnimationState,
+} from '../../helpers/utils/animation';
+import {
+  ENTERING_ANIMATION_CONFIG,
+  EXITING_ANIMATION_CONFIG,
+} from './error-view.constants';
+import type { ErrorViewRootAnimation } from './error-view.types';
+
+// --------------------------------------------------
+
+/**
+ * Animation hook for ErrorView root component
+ * Handles entering and exiting animations for error messages
+ */
+export function useErrorViewRootAnimation(options: {
+  animation: ErrorViewRootAnimation | undefined;
+}) {
+  const { animation } = options;
+
+  const { animationConfig, isAnimationDisabled } =
+    getRootAnimationState(animation);
+
+  const isAllAnimationsDisabled = useCombinedAnimationDisabledState(animation);
+
+  const isAnimationDisabledValue = getIsAnimationDisabledValue({
+    isAnimationDisabled,
+    isAllAnimationsDisabled,
+  });
+
+  // Entering animation
+  const enteringValue = getAnimationValueProperty({
+    animationValue: animationConfig?.entering,
+    property: 'value',
+    defaultValue: ENTERING_ANIMATION_CONFIG,
+  });
+
+  // Exiting animation
+  const exitingValue = getAnimationValueProperty({
+    animationValue: animationConfig?.exiting,
+    property: 'value',
+    defaultValue: EXITING_ANIMATION_CONFIG,
+  });
+
+  return {
+    entering: isAnimationDisabledValue ? undefined : enteringValue,
+    exiting: isAnimationDisabledValue ? undefined : exitingValue,
+  };
+}

package/src/components/error-view/error-view.constants.ts

@@ -0,0 +1,31 @@
+import { Easing, FadeIn, FadeOut } from 'react-native-reanimated';
+
+/**
+ * Display names for the ErrorView component parts
+ */
+export const DISPLAY_NAME = {
+  ROOT: 'HeroUINative.ErrorView',
+};
+
+/**
+ * Animation duration for focus/blur transitions
+ */
+export const ANIMATION_DURATION = 150;
+
+/**
+ * Animation easing function for focus/blur transitions
+ */
+export const ANIMATION_EASING = Easing.out(Easing.ease);
+
+/**
+ * Default entering animation configuration
+ */
+export const ENTERING_ANIMATION_CONFIG =
+  FadeIn.duration(ANIMATION_DURATION).easing(ANIMATION_EASING);
+
+/**
+ * Default exiting animation configuration
+ */
+export const EXITING_ANIMATION_CONFIG = FadeOut.duration(
+  ANIMATION_DURATION / 1.5
+).easing(ANIMATION_EASING);

package/src/components/error-view/error-view.md

@@ -0,0 +1,177 @@
+# ErrorView
+
+Displays validation error message content with smooth animations.
+
+## Imports
+
+Note: Before importing this component, ensure you have completed the setup as per the [Quick Start guide](../../../README.md).
+
+```tsx
+import { ErrorView } from 'heroui-native';
+```
+
+## Usage
+
+### Basic Usage
+
+The ErrorView component displays error messages when validation fails.
+
+```tsx
+<ErrorView isInvalid={true}>This field is required</ErrorView>
+```
+
+### Controlled Visibility
+
+Control when the error appears using the `isInvalid` prop.
+
+```tsx
+const [isInvalid, setIsInvalid] = useState(false);
+
+<ErrorView isInvalid={isInvalid}>Please enter a valid email address</ErrorView>;
+```
+
+### Custom Content
+
+Pass custom React components as children instead of strings.
+
+```tsx
+<ErrorView isInvalid={true}>
+  <View className="flex-row items-center">
+    <Icon name="alert-circle" />
+    <Text className="ml-2 text-danger">Invalid input</Text>
+  </View>
+</ErrorView>
+```
+
+### Custom Animations
+
+Override default entering and exiting animations using the `animation` prop.
+
+```tsx
+import { SlideInDown, SlideOutUp } from 'react-native-reanimated';
+
+<ErrorView
+  isInvalid={true}
+  animation={{
+    entering: { value: SlideInDown.duration(200) },
+    exiting: { value: SlideOutUp.duration(150) },
+  }}
+>
+  Field validation failed
+</ErrorView>;
+```
+
+Disable animations entirely:
+
+```tsx
+<ErrorView isInvalid={true} animation={false}>
+  Field validation failed
+</ErrorView>
+```
+
+### Custom Styling
+
+Apply custom styles to the container and text elements.
+
+```tsx
+<ErrorView
+  isInvalid={true}
+  className="mt-2"
+  classNames={{
+    container: 'bg-danger/10 p-2 rounded',
+    text: 'text-xs font-medium',
+  }}
+>
+  Password must be at least 8 characters
+</ErrorView>
+```
+
+### Custom Text Props
+
+Pass additional props to the Text component when children is a string.
+
+```tsx
+<ErrorView
+  isInvalid={true}
+  textProps={{
+    numberOfLines: 1,
+    ellipsizeMode: 'tail',
+    style: { letterSpacing: 0.5 },
+  }}
+>
+  This is a very long error message that might need to be truncated
+</ErrorView>
+```
+
+## Example
+
+```tsx
+import { ErrorView, TextField } from 'heroui-native';
+import { useState } from 'react';
+import { View } from 'react-native';
+
+export default function ErrorViewExample() {
+  const [email, setEmail] = useState('');
+  const [showError, setShowError] = useState(false);
+
+  const isValidEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+
+  const handleBlur = () => {
+    setShowError(email !== '' && !isValidEmail);
+  };
+
+  return (
+    <View className="p-4">
+      <TextField>
+        <TextField.Label>Email Address</TextField.Label>
+        <TextField.Input
+          placeholder="Enter your email"
+          value={email}
+          onChangeText={setEmail}
+          onBlur={handleBlur}
+          keyboardType="email-address"
+          autoCapitalize="none"
+        />
+        <TextField.Description>
+          We'll use this to contact you
+        </TextField.Description>
+      </TextField>
+
+      <ErrorView isInvalid={showError} className="ml-1">
+        Please enter a valid email address
+      </ErrorView>
+    </View>
+  );
+}
+```
+
+## API Reference
+
+### ErrorView
+
+| prop                   | type                           | default     | description                                                              |
+| ---------------------- | ------------------------------ | ----------- | ------------------------------------------------------------------------ |
+| `children`             | `React.ReactNode`              | `undefined` | The content of the error field. String children are wrapped with Text    |
+| `isInvalid`            | `boolean`                      | `false`     | Controls the visibility of the error field                               |
+| `animation`            | `ErrorViewRootAnimation`       | -           | Animation configuration                                                  |
+| `className`            | `string`                       | `undefined` | Additional CSS classes for the container                                 |
+| `classNames`           | `ElementSlots<ErrorViewSlots>` | `undefined` | Additional CSS classes for different parts of the component              |
+| `textProps`            | `TextProps`                    | `undefined` | Additional props to pass to the Text component when children is a string |
+| `...AnimatedViewProps` | `AnimatedProps<ViewProps>`     | -           | All Reanimated Animated.View props are supported                         |
+
+**classNames prop:** `ElementSlots<ErrorViewSlots>` provides type-safe CSS classes for different parts of the error view component. Available slots: `container`, `text`.
+
+#### ErrorViewRootAnimation
+
+Animation configuration for error view root component. Can be:
+
+- `false` or `"disabled"`: Disable only root animations
+- `"disable-all"`: Disable all animations including children
+- `true` or `undefined`: Use default animations
+- `object`: Custom animation configuration
+
+| prop             | type                                    | default                                                               | description                              |
+| ---------------- | --------------------------------------- | --------------------------------------------------------------------- | ---------------------------------------- |
+| `state`          | `'disabled' \| 'disable-all' \| boolean` | -                                                                     | Disable animations while customizing properties |
+| `entering.value` | `EntryOrExitLayoutType`                 | `FadeIn`<br/>`.duration(150)`<br/>`.easing(Easing.out(Easing.ease))`  | Custom entering animation for error view |
+| `exiting.value`  | `EntryOrExitLayoutType`                 | `FadeOut`<br/>`.duration(100)`<br/>`.easing(Easing.out(Easing.ease))` | Custom exiting animation for error view  |

package/src/components/error-view/error-view.styles.ts

@@ -0,0 +1,17 @@
+import { tv } from 'tailwind-variants';
+import { combineStyles } from '../../helpers/theme/utils/combine-styles';
+
+const root = tv({
+  slots: {
+    container: '',
+    text: 'text-sm text-danger',
+  },
+});
+
+const errorViewStyles = combineStyles({
+  root,
+});
+
+export type ErrorViewSlots = keyof ReturnType<typeof root>;
+
+export default errorViewStyles;

package/src/components/error-view/error-view.tsx

@@ -0,0 +1,73 @@
+import { forwardRef } from 'react';
+import Animated from 'react-native-reanimated';
+import { HeroText } from '../../helpers/components';
+import type { ViewRef } from '../../helpers/types/primitives';
+import { childrenToString } from '../../helpers/utils';
+import { useErrorViewRootAnimation } from './error-view.animation';
+import { DISPLAY_NAME } from './error-view.constants';
+import errorViewStyles from './error-view.styles';
+import type { ErrorViewRootProps } from './error-view.types';
+
+// --------------------------------------------------
+
+const ErrorViewRoot = forwardRef<ViewRef, ErrorViewRootProps>((props, ref) => {
+  const {
+    children,
+    className,
+    classNames,
+    textProps,
+    isInvalid = false,
+    animation,
+    ...restProps
+  } = props;
+
+  const tvStyles = errorViewStyles.root();
+
+  const containerStyles = tvStyles.container({
+    className: [className, classNames?.container],
+  });
+
+  const textStyles = tvStyles.text({
+    className: [classNames?.text, textProps?.className],
+  });
+
+  const { entering, exiting } = useErrorViewRootAnimation({ animation });
+
+  if (!isInvalid) return null;
+
+  const stringifiedChildren = childrenToString(children);
+  const renderedChildren = stringifiedChildren ? (
+    <HeroText className={textStyles} {...textProps}>
+      {stringifiedChildren}
+    </HeroText>
+  ) : (
+    children
+  );
+
+  return (
+    <Animated.View
+      ref={ref}
+      entering={entering}
+      exiting={exiting}
+      className={containerStyles}
+      {...restProps}
+    >
+      {renderedChildren}
+    </Animated.View>
+  );
+});
+
+// --------------------------------------------------
+
+ErrorViewRoot.displayName = DISPLAY_NAME.ROOT;
+
+/**
+ * ErrorView component for displaying validation errors
+ *
+ * @component ErrorView - Error message container with entering/exiting animations.
+ * Automatically wraps string children with Text component.
+ * Hidden when isInvalid is false.
+ */
+const ErrorView = ErrorViewRoot;
+
+export default ErrorView;

package/src/components/error-view/error-view.types.ts

@@ -0,0 +1,70 @@
+import type { TextProps, ViewProps } from 'react-native';
+import type {
+  AnimatedProps,
+  EntryOrExitLayoutType,
+} from 'react-native-reanimated';
+import type { ElementSlots } from '../../helpers/theme/types';
+import type {
+  AnimationRoot,
+  AnimationValue,
+} from '../../helpers/types/animation';
+import type { ErrorViewSlots } from './error-view.styles';
+
+/**
+ * Animation configuration for ErrorView root component
+ */
+export type ErrorViewRootAnimation = AnimationRoot<{
+  entering?: AnimationValue<{
+    /**
+     * Custom entering animation for error view
+     */
+    value?: EntryOrExitLayoutType;
+  }>;
+  exiting?: AnimationValue<{
+    /**
+     * Custom exiting animation for error view
+     */
+    value?: EntryOrExitLayoutType;
+  }>;
+}>;
+
+/**
+ * Props for the ErrorView root component
+ */
+export interface ErrorViewRootProps
+  extends Omit<AnimatedProps<ViewProps>, 'entering' | 'exiting'> {
+  /**
+   * The content of the error field
+   * When passed as string, it will be wrapped with Text component
+   */
+  children?: React.ReactNode;
+
+  /**
+   * Controls the visibility of the error field
+   * @default false
+   */
+  isInvalid?: boolean;
+
+  /**
+   * Additional CSS class for styling
+   */
+  className?: string;
+
+  /**
+   * Additional CSS classes for different parts of the component
+   */
+  classNames?: ElementSlots<ErrorViewSlots>;
+
+  /**
+   * Additional props to pass to the Text component when children is a string
+   */
+  textProps?: TextProps;
+
+  /**
+   * Animation configuration for error view
+   * - `false` or `"disabled"`: Disable all animations
+   * - `true` or `undefined`: Use default animations
+   * - `object`: Custom animation configuration
+   */
+  animation?: ErrorViewRootAnimation;
+}

package/src/components/error-view/index.ts

@@ -0,0 +1,2 @@
+export { default as ErrorView } from './error-view';
+export type { ErrorViewRootProps } from './error-view.types';