@erquhart/heroui-native 1.0.0-beta.10.1

package/lib/module/components/dialog/dialog.md

@@ -0,0 +1,363 @@
+# Dialog
+
+Displays a modal overlay with animated transitions and gesture-based dismissal.
+
+## Imports
+
+Note: Before importing this component, ensure you have completed the setup as per the [Quick Start guide](../../../README.md).
+
+```tsx
+import { Dialog, useDialog, useDialogAnimation } from 'heroui-native';
+```
+
+## Usage
+
+### Basic Dialog
+
+Simple dialog with title, description, and close button.
+
+```tsx
+<Dialog isOpen={isOpen} onOpenChange={setIsOpen}>
+  <Dialog.Trigger asChild>
+    <Button>Open Dialog</Button>
+  </Dialog.Trigger>
+  <Dialog.Portal>
+    <Dialog.Overlay />
+    <Dialog.Content>
+      <Dialog.Close />
+      <Dialog.Title>...</Dialog.Title>
+      <Dialog.Description>...</Dialog.Description>
+    </Dialog.Content>
+  </Dialog.Portal>
+</Dialog>
+```
+
+### Custom Animations
+
+Configure open and close animations with spring or timing. The `closeDelay` should typically match your closing animation duration.
+
+```tsx
+<Dialog
+  isOpen={isOpen}
+  onOpenChange={setIsOpen}
+  closeDelay={200} // Match this with closing animation duration
+  animation={{
+    entering: {
+      type: 'spring',
+      config: { damping: 130, stiffness: 1100 },
+    },
+    exiting: {
+      type: 'timing',
+      config: { duration: 200 }, // Should match closeDelay
+    },
+  }}
+>
+  <Dialog.Trigger>...</Dialog.Trigger>
+  <Dialog.Portal>
+    <Dialog.Overlay />
+    <Dialog.Content>...</Dialog.Content>
+  </Dialog.Portal>
+</Dialog>
+```
+
+### Custom Backdrop
+
+Replace the default overlay with custom content.
+
+```tsx
+<Dialog isOpen={isOpen} onOpenChange={setIsOpen}>
+  <Dialog.Trigger>...</Dialog.Trigger>
+  <Dialog.Portal>
+    <Dialog.Overlay className="bg-transparent">
+      <BlurView style={StyleSheet.absoluteFill} />
+    </Dialog.Overlay>
+    <Dialog.Content>...</Dialog.Content>
+  </Dialog.Portal>
+</Dialog>
+```
+
+### Scrollable Content
+
+Handle long content with scroll views.
+
+```tsx
+<Dialog isOpen={isOpen} onOpenChange={setIsOpen}>
+  <Dialog.Trigger>...</Dialog.Trigger>
+  <Dialog.Portal>
+    <Dialog.Overlay />
+    <Dialog.Content>
+      <Dialog.Close />
+      <Dialog.Title>...</Dialog.Title>
+      <View className="h-[300px]">
+        <ScrollView>...</ScrollView>
+      </View>
+    </Dialog.Content>
+  </Dialog.Portal>
+</Dialog>
+```
+
+### Form Dialog
+
+Dialog with text inputs and keyboard handling.
+
+```tsx
+<Dialog isOpen={isOpen} onOpenChange={setIsOpen}>
+  <Dialog.Trigger>...</Dialog.Trigger>
+  <Dialog.Portal>
+    <Dialog.Overlay />
+    <KeyboardAvoidingView behavior="padding">
+      <Dialog.Content>
+        <Dialog.Close />
+        <Dialog.Title>...</Dialog.Title>
+        <TextField>...</TextField>
+        <Button onPress={handleSubmit}>Submit</Button>
+      </Dialog.Content>
+    </KeyboardAvoidingView>
+  </Dialog.Portal>
+</Dialog>
+```
+
+## Example
+
+```tsx
+import { Button, Dialog } from 'heroui-native';
+import { View } from 'react-native';
+import { useState } from 'react';
+
+export default function DialogExample() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <Dialog isOpen={isOpen} onOpenChange={setIsOpen}>
+      <Dialog.Trigger asChild>
+        <Button variant="primary">Open Dialog</Button>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <Dialog.Overlay />
+        <Dialog.Content>
+          <Dialog.Close />
+          <View className="mb-5 gap-1.5">
+            <Dialog.Title>Confirm Action</Dialog.Title>
+            <Dialog.Description>
+              Are you sure you want to proceed with this action? This cannot be
+              undone.
+            </Dialog.Description>
+          </View>
+          <View className="flex-row justify-end gap-3">
+            <Dialog.Close asChild>
+              <Button variant="ghost" size="sm">
+                Cancel
+              </Button>
+            </Dialog.Close>
+            <Button size="sm">Confirm</Button>
+          </View>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog>
+  );
+}
+```
+
+## Anatomy
+
+```tsx
+<Dialog>
+  <Dialog.Trigger>...</Dialog.Trigger>
+  <Dialog.Portal>
+    <Dialog.Overlay>...</Dialog.Overlay>
+    <Dialog.Content>
+      <Dialog.Close>...</Dialog.Close>
+      <Dialog.Title>...</Dialog.Title>
+      <Dialog.Description>...</Dialog.Description>
+    </Dialog.Content>
+  </Dialog.Portal>
+</Dialog>
+```
+
+- **Dialog**: Root component that manages open state and provides context to child components.
+- **Dialog.Trigger**: Pressable element that opens the dialog when pressed.
+- **Dialog.Portal**: Renders dialog content in a portal with centered layout and animation control.
+- **Dialog.Overlay**: Background overlay that appears behind the dialog content, typically closes dialog when pressed.
+- **Dialog.Content**: Main dialog container with gesture support for drag-to-dismiss.
+- **Dialog.Close**: Close button that dismisses the dialog when pressed.
+- **Dialog.Title**: Dialog title text with semantic heading role.
+- **Dialog.Description**: Dialog description text that provides additional context.
+
+## API Reference
+
+### Dialog
+
+| prop                       | type                       | default | description                                                                          |
+| -------------------------- | -------------------------- | ------- | ------------------------------------------------------------------------------------ |
+| `children`                 | `React.ReactNode`          | -       | Dialog content and trigger elements                                                  |
+| `isOpen`                   | `boolean`                  | -       | Controlled open state of the dialog                                                  |
+| `isDefaultOpen`            | `boolean`                  | `false` | Initial open state when uncontrolled                                                 |
+| `closeDelay`               | `number`                   | `300`   | Delay in milliseconds before dialog closes (should match closing animation duration) |
+| `isDismissKeyboardOnClose` | `boolean`                  | `true`  | Whether to dismiss keyboard when dialog closes                                       |
+| `animation`                | `DialogRootAnimation`      | -       | Animation configuration                                                              |
+| `onOpenChange`             | `(value: boolean) => void` | -       | Callback when open state changes                                                     |
+| `...ViewProps`             | `ViewProps`                | -       | All standard React Native View props are supported                                   |
+
+#### DialogRootAnimation
+
+Animation configuration for dialog 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` | `SpringAnimationConfig \| TimingAnimationConfig` | `{ type: 'timing',`<br/>`config: { duration: 200,`<br/>`easing: Easing.out(Easing.ease) } }`     | Animation configuration for opening |
+| `exiting.value`  | `SpringAnimationConfig \| TimingAnimationConfig` | `{ type: 'timing',`<br/>`config: { duration: 150,`<br/>`easing: Easing.bezier(0.4, 0, 1, 1) } }` | Animation configuration for closing |
+
+#### SpringAnimationConfig
+
+| prop     | type               | default | description                               |
+| -------- | ------------------ | ------- | ----------------------------------------- |
+| `type`   | `'spring'`         | -       | Animation type (must be `'spring'`)       |
+| `config` | `WithSpringConfig` | -       | Reanimated spring animation configuration |
+
+#### TimingAnimationConfig
+
+| prop     | type               | default | description                               |
+| -------- | ------------------ | ------- | ----------------------------------------- |
+| `type`   | `'timing'`         | -       | Animation type (must be `'timing'`)       |
+| `config` | `WithTimingConfig` | -       | Reanimated timing animation configuration |
+
+### Dialog.Trigger
+
+| prop                       | type                    | default | description                                                    |
+| -------------------------- | ----------------------- | ------- | -------------------------------------------------------------- |
+| `children`                 | `React.ReactNode`       | -       | Trigger element content                                        |
+| `asChild`                  | `boolean`               | -       | Render as child element without wrapper                        |
+| `...TouchableOpacityProps` | `TouchableOpacityProps` | -       | All standard React Native TouchableOpacity props are supported |
+
+### Dialog.Portal
+
+| prop         | type                   | default | description                                      |
+| ------------ | ---------------------- | ------- | ------------------------------------------------ |
+| `children`   | `React.ReactNode`      | -       | Portal content (overlay and dialog)              |
+| `className`  | `string`               | -       | Additional CSS classes for portal container      |
+| `style`      | `StyleProp<ViewStyle>` | -       | Additional styles for portal container           |
+| `hostName`   | `string`               | -       | Optional portal host name for specific container |
+| `forceMount` | `boolean`              | -       | Force mount when closed for animation purposes   |
+
+### Dialog.Overlay
+
+| prop                    | type                     | default | description                                                  |
+| ----------------------- | ------------------------ | ------- | ------------------------------------------------------------ |
+| `children`              | `React.ReactNode`        | -       | Custom overlay content                                       |
+| `className`             | `string`                 | -       | Additional CSS classes for overlay                           |
+| `style`                 | `ViewStyle`              | -       | Additional styles for overlay container                      |
+| `animation`             | `DialogOverlayAnimation` | -       | Animation configuration                                      |
+| `isAnimatedStyleActive` | `boolean`                | `true`  | Whether animated styles (react-native-reanimated) are active |
+| `isCloseOnPress`        | `boolean`                | `true`  | Whether pressing overlay closes dialog                       |
+| `forceMount`            | `boolean`                | -       | Force mount when closed for animation purposes               |
+| `...PressableProps`     | `PressableProps`         | -       | All standard React Native Pressable props are supported      |
+
+#### DialogOverlayAnimation
+
+Animation configuration for dialog overlay component. Can be:
+
+- `false` or `"disabled"`: Disable all animations
+- `true` or `undefined`: Use default animations
+- `object`: Custom animation configuration
+
+| prop            | type                          | default     | description                        |
+| --------------- | ----------------------------- | ----------- | ---------------------------------- |
+| `state`         | `'disabled' \| boolean`       | -           | Disable animations while customizing properties |
+| `opacity.value` | `[number, number, number]`    | `[0, 1, 0]` | Opacity values [idle, open, close] |
+
+### Dialog.Content
+
+| prop                    | type                                 | default | description                                                  |
+| ----------------------- | ------------------------------------ | ------- | ------------------------------------------------------------ |
+| `children`              | `React.ReactNode`                    | -       | Dialog content                                               |
+| `className`             | `string`                             | -       | Additional CSS classes for content container                 |
+| `style`                 | `StyleProp<ViewStyle>`               | -       | Additional styles for content container                      |
+| `onLayout`              | `(event: LayoutChangeEvent) => void` | -       | Layout event handler                                         |
+| `animation`             | `DialogContentAnimation`             | -       | Animation configuration                                      |
+| `isAnimatedStyleActive` | `boolean`                            | `true`  | Whether animated styles (react-native-reanimated) are active |
+| `isSwipeable`           | `boolean`                            | `true`  | Whether the dialog content can be swiped to dismiss          |
+| `forceMount`            | `boolean`                            | -       | Force mount when closed for animation purposes               |
+| `...Animated.ViewProps` | `Animated.ViewProps`                 | -       | All Reanimated Animated.View props are supported             |
+
+#### DialogContentAnimation
+
+Animation configuration for dialog content component. Can be:
+
+- `false` or `"disabled"`: Disable all animations
+- `true` or `undefined`: Use default animations
+- `object`: Custom animation configuration
+
+| prop            | type                          | default           | description                        |
+| --------------- | ----------------------------- | ----------------- | ---------------------------------- |
+| `state`         | `'disabled' \| boolean`       | -                 | Disable animations while customizing properties |
+| `opacity.value` | `[number, number, number]`    | `[0, 1, 0]`       | Opacity values [idle, open, close] |
+| `scale.value`   | `[number, number, number]`     | `[0.97, 1, 0.97]` | Scale values [idle, open, close]   |
+
+### Dialog.Close
+
+| prop                | type                   | default | description                                             |
+| ------------------- | ---------------------- | ------- | ------------------------------------------------------- |
+| `children`          | `React.ReactNode`      | -       | Custom close button content                             |
+| `className`         | `string`               | -       | Additional CSS classes for close button                 |
+| `iconProps`         | `DialogCloseIconProps` | -       | Configuration for default close icon                    |
+| `hitSlop`           | `number`               | `12`    | Hit slop area for the close button                      |
+| `asChild`           | `boolean`              | -       | Render as child element without wrapper                 |
+| `...PressableProps` | `PressableProps`       | -       | All standard React Native Pressable props are supported |
+
+#### DialogCloseIconProps
+
+| prop    | type     | description                             |
+| ------- | -------- | --------------------------------------- |
+| `size`  | `number` | Icon size (default: 18)                 |
+| `color` | `string` | Icon color (default: theme color muted) |
+
+### Dialog.Title
+
+| prop           | type              | default | description                                        |
+| -------------- | ----------------- | ------- | -------------------------------------------------- |
+| `children`     | `React.ReactNode` | -       | Title content                                      |
+| `className`    | `string`          | -       | Additional CSS classes for title                   |
+| `...TextProps` | `TextProps`       | -       | All standard React Native Text props are supported |
+
+### Dialog.Description
+
+| prop           | type              | default | description                                        |
+| -------------- | ----------------- | ------- | -------------------------------------------------- |
+| `children`     | `React.ReactNode` | -       | Description content                                |
+| `className`    | `string`          | -       | Additional CSS classes for description             |
+| `...TextProps` | `TextProps`       | -       | All standard React Native Text props are supported |
+
+### useDialog
+
+Hook to access dialog primitive context.
+
+```tsx
+const { isOpen, onOpenChange } = useDialog();
+```
+
+| property       | type                       | description                   |
+| -------------- | -------------------------- | ----------------------------- |
+| `isOpen`       | `boolean`                  | Current open state            |
+| `onOpenChange` | `(value: boolean) => void` | Function to change open state |
+
+### useDialogAnimation
+
+Hook to access dialog animation context for advanced customization.
+
+```tsx
+const { dialogState, progress, isDragging, isGestureReleaseAnimationRunning } =
+  useDialogAnimation();
+```
+
+| property                           | type                          | description                                  |
+| ---------------------------------- | ----------------------------- | -------------------------------------------- |
+| `dialogState`                      | `'idle' \| 'open' \| 'close'` | Internal dialog state                        |
+| `progress`                         | `SharedValue<number>`         | Animation progress (0=idle, 1=open, 2=close) |
+| `isDragging`                       | `SharedValue<boolean>`        | Whether dialog is being dragged              |
+| `isGestureReleaseAnimationRunning` | `SharedValue<boolean>`        | Whether gesture release animation is running |

package/lib/module/components/dialog/dialog.styles.js

@@ -0,0 +1,80 @@
+"use strict";
+
+import { StyleSheet } from 'react-native';
+import { tv } from 'tailwind-variants';
+import { combineStyles } from "../../helpers/theme/utils/combine-styles.js";
+const portal = tv({
+  base: 'absolute inset-0 justify-center p-5'
+});
+
+/**
+ * Overlay style definition
+ *
+ * @note ANIMATED PROPERTIES (cannot be set via className):
+ * The following property is animated and cannot be overridden using Tailwind classes:
+ * - `opacity` - Animated for overlay show/hide transitions (idle: 0, open: 1, close: 0)
+ *
+ * To customize this property, use the `animation` prop on `Dialog.Overlay`:
+ * ```tsx
+ * <Dialog.Overlay
+ *   animation={{
+ *     opacity: { value: [0, 1, 0] }
+ *   }}
+ * />
+ * ```
+ *
+ * To completely disable animated styles and apply your own via className or style prop,
+ * set `isAnimatedStyleActive={false}` on `Dialog.Overlay`.
+ */
+const overlay = tv({
+  base: 'absolute inset-0 bg-black/20'
+});
+
+/**
+ * Content style definition
+ *
+ * @note ANIMATED PROPERTIES (cannot be set via className):
+ * The following properties are animated and cannot be overridden using Tailwind classes:
+ * - `opacity` - Animated for content show/hide transitions (idle: 0, open: 1, close: 0)
+ * - `transform` (specifically `scale`) - Animated for content show/hide transitions (idle: 0.97, open: 1, close: 0.97)
+ *
+ * To customize these properties, use the `animation` prop on `Dialog.Content`:
+ * ```tsx
+ * <Dialog.Content
+ *   animation={{
+ *     opacity: { value: [0, 1, 0] },
+ *     scale: { value: [0.97, 1, 0.97] }
+ *   }}
+ * />
+ * ```
+ *
+ * To completely disable animated styles and apply your own via className or style prop,
+ * set `isAnimatedStyleActive={false}` on `Dialog.Content`.
+ */
+const content = tv({
+  base: 'bg-overlay rounded-3xl border border-border p-5'
+});
+const close = tv({
+  base: ''
+});
+const label = tv({
+  base: 'text-lg font-medium text-foreground'
+});
+const description = tv({
+  base: 'text-base text-muted'
+});
+const dialogStyles = combineStyles({
+  portal,
+  overlay,
+  content,
+  close,
+  label,
+  description
+});
+export const styleSheet = StyleSheet.create({
+  contentContainer: {
+    borderCurve: 'continuous'
+  }
+});
+export default dialogStyles;
+//# sourceMappingURL=dialog.styles.js.map

package/lib/module/components/dialog/dialog.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","tv","combineStyles","portal","base","overlay","content","close","label","description","dialogStyles","styleSheet","create","contentContainer","borderCurve"],"sourceRoot":"../../../../src","sources":["components/dialog/dialog.styles.ts"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,EAAE,QAAQ,mBAAmB;AACtC,SAASC,aAAa,QAAQ,6CAA0C;AAExE,MAAMC,MAAM,GAAGF,EAAE,CAAC;EAChBG,IAAI,EAAE;AACR,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,OAAO,GAAGJ,EAAE,CAAC;EACjBG,IAAI,EAAE;AACR,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAME,OAAO,GAAGL,EAAE,CAAC;EACjBG,IAAI,EAAE;AACR,CAAC,CAAC;AAEF,MAAMG,KAAK,GAAGN,EAAE,CAAC;EACfG,IAAI,EAAE;AACR,CAAC,CAAC;AAEF,MAAMI,KAAK,GAAGP,EAAE,CAAC;EACfG,IAAI,EAAE;AACR,CAAC,CAAC;AAEF,MAAMK,WAAW,GAAGR,EAAE,CAAC;EACrBG,IAAI,EAAE;AACR,CAAC,CAAC;AAEF,MAAMM,YAAY,GAAGR,aAAa,CAAC;EACjCC,MAAM;EACNE,OAAO;EACPC,OAAO;EACPC,KAAK;EACLC,KAAK;EACLC;AACF,CAAC,CAAC;AAEF,OAAO,MAAME,UAAU,GAAGX,UAAU,CAACY,MAAM,CAAC;EAC1CC,gBAAgB,EAAE;IAChBC,WAAW,EAAE;EACf;AACF,CAAC,CAAC;AAEF,eAAeJ,YAAY","ignoreList":[]}

package/lib/module/components/dialog/dialog.types.js

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

package/lib/module/components/dialog/dialog.types.js.map

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

package/lib/module/components/dialog/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { default as Dialog, useDialog, useDialogAnimation } from "./dialog.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/dialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["default","Dialog","useDialog","useDialogAnimation"],"sourceRoot":"../../../../src","sources":["components/dialog/index.ts"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,MAAM,EAAEC,SAAS,EAAEC,kBAAkB,QAAQ,aAAU","ignoreList":[]}

package/lib/module/components/divider/divider.constants.js

@@ -0,0 +1,9 @@
+"use strict";
+
+/**
+ * Display name for the Divider component
+ */
+export const DISPLAY_NAME = {
+  ROOT: 'HeroUINative.Divider.Root'
+};
+//# sourceMappingURL=divider.constants.js.map

package/lib/module/components/divider/divider.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DISPLAY_NAME","ROOT"],"sourceRoot":"../../../../src","sources":["components/divider/divider.constants.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAO,MAAMA,YAAY,GAAG;EAC1BC,IAAI,EAAE;AACR,CAAU","ignoreList":[]}

package/lib/module/components/divider/divider.js

@@ -0,0 +1,58 @@
+"use strict";
+
+import { forwardRef } from 'react';
+import { View } from 'react-native';
+import { DISPLAY_NAME } from "./divider.constants.js";
+import dividerStyles from "./divider.styles.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+// --------------------------------------------------
+
+const DividerRoot = /*#__PURE__*/forwardRef((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 /*#__PURE__*/_jsx(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;
+//# sourceMappingURL=divider.js.map

package/lib/module/components/divider/divider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","View","DISPLAY_NAME","dividerStyles","jsx","_jsx","DividerRoot","props","ref","variant","orientation","thickness","className","style","restProps","tvStyles","customThicknessStyle","undefined","height","width","displayName","ROOT","Divider"],"sourceRoot":"../../../../src","sources":["components/divider/divider.tsx"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,OAAO;AAClC,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,YAAY,QAAQ,wBAAqB;AAClD,OAAOC,aAAa,MAAM,qBAAkB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAG7C;;AAEA,MAAMC,WAAW,gBAAGN,UAAU,CAAqB,CAACO,KAAK,EAAEC,GAAG,KAAK;EACjE,MAAM;IACJC,OAAO,GAAG,MAAM;IAChBC,WAAW,GAAG,YAAY;IAC1BC,SAAS;IACTC,SAAS;IACTC,KAAK;IACL,GAAGC;EACL,CAAC,GAAGP,KAAK;EAET,MAAMQ,QAAQ,GAAGZ,aAAa,CAAC;IAC7BM,OAAO;IACPC,WAAW;IACXE;EACF,CAAC,CAAC;;EAEF;AACF;AACA;AACA;EACE,MAAMI,oBAAoB,GACxBL,SAAS,KAAKM,SAAS,GACnBP,WAAW,KAAK,YAAY,GAC1B;IAAEQ,MAAM,EAAEP;EAAU,CAAC,GACrB;IAAEQ,KAAK,EAAER;EAAU,CAAC,GACtBM,SAAS;EAEf,oBACEZ,IAAA,CAACJ,IAAI;IACHO,GAAG,EAAEA,GAAI;IACTI,SAAS,EAAEG,QAAS;IACpBF,KAAK,EAAEG,oBAAoB,GAAG,CAACA,oBAAoB,EAAEH,KAAK,CAAC,GAAGA,KAAM;IAAA,GAChEC;EAAS,CACd,CAAC;AAEN,CAAC,CAAC;;AAEF;;AAEAR,WAAW,CAACc,WAAW,GAAGlB,YAAY,CAACmB,IAAI;;AAE3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,OAAO,GAAGhB,WAAW;AAE3B,eAAegB,OAAO","ignoreList":[]}

package/lib/module/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                                           |