@erquhart/heroui-native 1.0.0-beta.10.1

package/lib/module/components/bottom-sheet/bottom-sheet.md

@@ -0,0 +1,341 @@
+# BottomSheet
+
+Displays a bottom sheet modal with gesture-based dismissal and snap points support.
+
+## Imports
+
+Note: Before importing this component, ensure you have completed the setup as per the [Quick Start guide](../../../README.md).
+
+```tsx
+import {
+  BottomSheet,
+  useBottomSheet,
+  useBottomSheetAnimation,
+} from 'heroui-native';
+```
+
+## Usage
+
+### Basic Bottom Sheet
+
+Simple bottom sheet with title, description, and close button.
+
+```tsx
+<BottomSheet isOpen={isOpen} onOpenChange={setIsOpen}>
+  <BottomSheet.Trigger asChild>
+    <Button>Open Bottom Sheet</Button>
+  </BottomSheet.Trigger>
+  <BottomSheet.Portal>
+    <BottomSheet.Overlay />
+    <BottomSheet.Content>
+      <BottomSheet.Close />
+      <BottomSheet.Title>...</BottomSheet.Title>
+      <BottomSheet.Description>...</BottomSheet.Description>
+    </BottomSheet.Content>
+  </BottomSheet.Portal>
+</BottomSheet>
+```
+
+### Detached Bottom Sheet
+
+Bottom sheet that appears detached from the bottom edge with custom spacing.
+
+```tsx
+<BottomSheet isOpen={isOpen} onOpenChange={setIsOpen}>
+  <BottomSheet.Trigger>...</BottomSheet.Trigger>
+  <BottomSheet.Portal>
+    <BottomSheet.Overlay />
+    <BottomSheet.Content
+      detached={true}
+      bottomInset={insets.bottom + 12}
+      className="mx-4"
+      backgroundClassName="rounded-[32px]"
+    >
+      ...
+    </BottomSheet.Content>
+  </BottomSheet.Portal>
+</BottomSheet>
+```
+
+### Scrollable with Snap Points
+
+Bottom sheet with multiple snap points and scrollable content.
+
+```tsx
+<BottomSheet isOpen={isOpen} onOpenChange={setIsOpen}>
+  <BottomSheet.Trigger>...</BottomSheet.Trigger>
+  <BottomSheet.Portal>
+    <BottomSheet.Overlay />
+    <BottomSheet.Content snapPoints={['25%', '50%', '90%']}>
+      <ScrollView>...</ScrollView>
+    </BottomSheet.Content>
+  </BottomSheet.Portal>
+</BottomSheet>
+```
+
+### Custom Overlay
+
+Replace the default overlay with custom content like blur effects.
+
+```tsx
+import { BottomSheet, useBottomSheetAnimation } from 'heroui-native';
+import { StyleSheet } from 'react-native';
+import { interpolate, useDerivedValue } from 'react-native-reanimated';
+import { AnimatedBlurView } from './animated-blur-view';
+import { useUniwind } from 'uniwind';
+
+export const BottomSheetBlurOverlay = () => {
+  const { theme } = useUniwind();
+  const { progress } = useBottomSheetAnimation();
+
+  const blurIntensity = useDerivedValue(() => {
+    return interpolate(progress.get(), [0, 1, 2], [0, 40, 0]);
+  });
+
+  return (
+    <BottomSheet.Close style={StyleSheet.absoluteFill}>
+      <AnimatedBlurView
+        blurIntensity={blurIntensity}
+        tint={theme === 'dark' ? 'dark' : 'systemUltraThinMaterialDark'}
+        style={StyleSheet.absoluteFill}
+      />
+    </BottomSheet.Close>
+  );
+};
+```
+
+```tsx
+<BottomSheet isOpen={isOpen} onOpenChange={setIsOpen}>
+  <BottomSheet.Trigger>...</BottomSheet.Trigger>
+  <BottomSheet.Portal>
+    <BottomSheetBlurOverlay />
+    <BottomSheet.Content>...</BottomSheet.Content>
+  </BottomSheet.Portal>
+</BottomSheet>
+```
+
+## Example
+
+```tsx
+import { BottomSheet, Button } from 'heroui-native';
+import { useState } from 'react';
+import { View } from 'react-native';
+import { withUniwind } from 'uniwind';
+import Ionicons from '@expo/vector-icons/Ionicons';
+
+const StyledIonicons = withUniwind(Ionicons);
+
+export default function BottomSheetExample() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <BottomSheet isOpen={isOpen} onOpenChange={setIsOpen}>
+      <BottomSheet.Trigger asChild>
+        <Button variant="secondary">Open Bottom Sheet</Button>
+      </BottomSheet.Trigger>
+      <BottomSheet.Portal>
+        <BottomSheet.Overlay />
+        <BottomSheet.Content>
+          <View className="items-center mb-5">
+            <View className="size-20 items-center justify-center rounded-full bg-green-500/10">
+              <StyledIonicons
+                name="shield-checkmark"
+                size={40}
+                className="text-green-500"
+              />
+            </View>
+          </View>
+          <View className="mb-8 gap-2 items-center">
+            <BottomSheet.Title className="text-center">
+              Keep yourself safe
+            </BottomSheet.Title>
+            <BottomSheet.Description className="text-center">
+              Update your software to the latest version for better security and
+              performance.
+            </BottomSheet.Description>
+          </View>
+          <View className="gap-3">
+            <Button onPress={() => setIsOpen(false)}>Update Now</Button>
+            <Button variant="tertiary" onPress={() => setIsOpen(false)}>
+              Later
+            </Button>
+          </View>
+        </BottomSheet.Content>
+      </BottomSheet.Portal>
+    </BottomSheet>
+  );
+}
+```
+
+## Anatomy
+
+```tsx
+<BottomSheet>
+  <BottomSheet.Trigger>...</BottomSheet.Trigger>
+  <BottomSheet.Portal>
+    <BottomSheet.Overlay>...</BottomSheet.Overlay>
+    <BottomSheet.Content>
+      <BottomSheet.Close>...</BottomSheet.Close>
+      <BottomSheet.Title>...</BottomSheet.Title>
+      <BottomSheet.Description>...</BottomSheet.Description>
+    </BottomSheet.Content>
+  </BottomSheet.Portal>
+</BottomSheet>
+```
+
+- **BottomSheet**: Root component that manages open state and provides context to child components.
+- **BottomSheet.Trigger**: Pressable element that opens the bottom sheet when pressed.
+- **BottomSheet.Portal**: Renders bottom sheet content in a portal with full window overlay.
+- **BottomSheet.Overlay**: Background overlay that covers the screen, typically closes bottom sheet when pressed.
+- **BottomSheet.Content**: Main bottom sheet container using @gorhom/bottom-sheet for rendering with gesture support.
+- **BottomSheet.Close**: Close button that dismisses the bottom sheet when pressed.
+- **BottomSheet.Title**: Bottom sheet title text with semantic heading role and accessibility linking.
+- **BottomSheet.Description**: Bottom sheet description text that provides additional context with accessibility linking.
+
+## API Reference
+
+### BottomSheet
+
+| prop                       | type                       | default | description                                                                                |
+| -------------------------- | -------------------------- | ------- | ------------------------------------------------------------------------------------------ |
+| `children`                 | `React.ReactNode`          | -       | Bottom sheet content and trigger elements                                                  |
+| `isOpen`                   | `boolean`                  | -       | Controlled open state of the bottom sheet                                                  |
+| `isDefaultOpen`            | `boolean`                  | `false` | Initial open state when uncontrolled                                                       |
+| `closeDelay`               | `number`                   | `300`   | Delay in milliseconds before bottom sheet closes (should match closing animation duration) |
+| `isDismissKeyboardOnClose` | `boolean`                  | `true`  | Whether to dismiss keyboard when bottom sheet closes                                       |
+| `animation`                | `BottomSheetRootAnimation` | -       | Animation configuration                                                                    |
+| `onOpenChange`             | `(value: boolean) => void` | -       | Callback when open state changes                                                           |
+| `...ViewProps`             | `ViewProps`                | -       | All standard React Native View props are supported                                         |
+
+#### BottomSheetRootAnimation
+
+Animation configuration for bottom sheet root component. Can be:
+
+- `"disable-all"`: Disable all animations including children
+- `undefined`: Use default animations
+- `object`: Custom animation configuration
+
+| prop   | type                                    | default | description                                |
+| ------ | --------------------------------------- | ------- | ------------------------------------------ |
+| `state` | `'disabled' \| 'disable-all' \| boolean` | -       | Disable animations while customizing properties |
+
+### BottomSheet.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 |
+
+### BottomSheet.Portal
+
+| prop         | type                   | default | description                                      |
+| ------------ | ---------------------- | ------- | ------------------------------------------------ |
+| `children`   | `React.ReactNode`      | -       | Portal content (overlay and bottom sheet)        |
+| `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   |
+
+### BottomSheet.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`             | `BottomSheetOverlayAnimation` | -       | Animation configuration                                      |
+| `isAnimatedStyleActive` | `boolean`                     | `true`  | Whether animated styles (react-native-reanimated) are active |
+| `isCloseOnPress`        | `boolean`                     | `true`  | Whether pressing overlay closes bottom sheet                 |
+| `forceMount`            | `boolean`                     | -       | Force mount when closed for animation purposes               |
+| `...PressableProps`     | `PressableProps`              | -       | All standard React Native Pressable props are supported      |
+
+#### BottomSheetOverlayAnimation
+
+Animation configuration for bottom sheet 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] |
+
+### BottomSheet.Content
+
+| prop                        | type                                     | default | description                                                                                        |
+| --------------------------- | ---------------------------------------- | ------- | -------------------------------------------------------------------------------------------------- |
+| `children`                  | `React.ReactNode`                        | -       | Bottom sheet content                                                                               |
+| `className`                 | `string`                                 | -       | Additional CSS classes for bottom sheet container                                                  |
+| `containerClassName`        | `string`                                 | -       | Additional CSS classes for container                                                               |
+| `contentContainerClassName` | `string`                                 | -       | Additional CSS classes for content container                                                       |
+| `backgroundClassName`       | `string`                                 | -       | Additional CSS classes for background                                                              |
+| `handleClassName`           | `string`                                 | -       | Additional CSS classes for handle                                                                  |
+| `handleIndicatorClassName`  | `string`                                 | -       | Additional CSS classes for handle indicator                                                        |
+| `contentContainerProps`     | `Omit<BottomSheetViewProps, 'children'>` | -       | Props for the content container                                                                    |
+| `animation`                 | `AnimationDisabled`                      | -       | Animation configuration                                                                            |
+| `...GorhomBottomSheetProps` | `Partial<GorhomBottomSheetProps>`        | -       | All [@gorhom/bottom-sheet props](https://gorhom.dev/react-native-bottom-sheet/props) are supported |
+
+**Note**: You can use all components from [@gorhom/bottom-sheet](https://gorhom.dev/react-native-bottom-sheet/components/bottomsheetview) inside the content, such as `BottomSheetView`, `BottomSheetScrollView`, `BottomSheetFlatList`, etc.
+
+### BottomSheet.Close
+
+| prop                | type                        | default | description                                             |
+| ------------------- | --------------------------- | ------- | ------------------------------------------------------- |
+| `children`          | `React.ReactNode`           | -       | Custom close button content                             |
+| `className`         | `string`                    | -       | Additional CSS classes for close button                 |
+| `iconProps`         | `BottomSheetCloseIconProps` | -       | 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 |
+
+#### BottomSheetCloseIconProps
+
+| prop    | type     | description                             |
+| ------- | -------- | --------------------------------------- |
+| `size`  | `number` | Icon size (default: 18)                 |
+| `color` | `string` | Icon color (default: theme color muted) |
+
+### BottomSheet.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 |
+
+### BottomSheet.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 |
+
+### useBottomSheet
+
+Hook to access bottom sheet primitive context.
+
+```tsx
+const { isOpen, onOpenChange } = useBottomSheet();
+```
+
+| property       | type                       | description                   |
+| -------------- | -------------------------- | ----------------------------- |
+| `isOpen`       | `boolean`                  | Current open state            |
+| `onOpenChange` | `(value: boolean) => void` | Function to change open state |
+
+### useBottomSheetAnimation
+
+Hook to access bottom sheet animation context for advanced customization.
+
+```tsx
+const { bottomSheetState, progress } = useBottomSheetAnimation();
+```
+
+| property           | type                          | description                                  |
+| ------------------ | ----------------------------- | -------------------------------------------- |
+| `bottomSheetState` | `'idle' \| 'open' \| 'close'` | Internal bottom sheet state                  |
+| `progress`         | `SharedValue<number>`         | Animation progress (0=idle, 1=open, 2=close) |

package/lib/module/components/bottom-sheet/bottom-sheet.styles.js

@@ -0,0 +1,61 @@
+"use strict";
+
+import { StyleSheet } from 'react-native';
+import { tv } from 'tailwind-variants';
+
+/**
+ * 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 `BottomSheet.Overlay`:
+ * ```tsx
+ * <BottomSheet.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 `BottomSheet.Overlay`.
+ */
+const overlay = tv({
+  base: 'absolute inset-0 bg-black/20'
+});
+const contentContainer = tv({
+  base: 'flex-1 p-5 pb-safe-offset-3 bg-transparent'
+});
+const contentBackground = tv({
+  base: 'bg-overlay rounded-t-[32px]'
+});
+const contentHandleIndicator = tv({
+  base: 'bg-divider'
+});
+const close = tv({
+  base: ''
+});
+const label = tv({
+  base: 'text-lg font-medium text-foreground'
+});
+const description = tv({
+  base: 'text-base text-muted'
+});
+const bottomSheetStyles = {
+  overlay,
+  contentContainer,
+  contentBackground,
+  contentHandleIndicator,
+  close,
+  label,
+  description
+};
+export const styleSheet = StyleSheet.create({
+  contentContainer: {
+    borderCurve: 'continuous'
+  }
+});
+export default bottomSheetStyles;
+//# sourceMappingURL=bottom-sheet.styles.js.map

package/lib/module/components/bottom-sheet/bottom-sheet.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","tv","overlay","base","contentContainer","contentBackground","contentHandleIndicator","close","label","description","bottomSheetStyles","styleSheet","create","borderCurve"],"sourceRoot":"../../../../src","sources":["components/bottom-sheet/bottom-sheet.styles.ts"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,EAAE,QAAQ,mBAAmB;;AAEtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,OAAO,GAAGD,EAAE,CAAC;EACjBE,IAAI,EAAE;AACR,CAAC,CAAC;AAEF,MAAMC,gBAAgB,GAAGH,EAAE,CAAC;EAC1BE,IAAI,EAAE;AACR,CAAC,CAAC;AAEF,MAAME,iBAAiB,GAAGJ,EAAE,CAAC;EAC3BE,IAAI,EAAE;AACR,CAAC,CAAC;AAEF,MAAMG,sBAAsB,GAAGL,EAAE,CAAC;EAChCE,IAAI,EAAE;AACR,CAAC,CAAC;AAEF,MAAMI,KAAK,GAAGN,EAAE,CAAC;EACfE,IAAI,EAAE;AACR,CAAC,CAAC;AAEF,MAAMK,KAAK,GAAGP,EAAE,CAAC;EACfE,IAAI,EAAE;AACR,CAAC,CAAC;AAEF,MAAMM,WAAW,GAAGR,EAAE,CAAC;EACrBE,IAAI,EAAE;AACR,CAAC,CAAC;AAEF,MAAMO,iBAAiB,GAAG;EACxBR,OAAO;EACPE,gBAAgB;EAChBC,iBAAiB;EACjBC,sBAAsB;EACtBC,KAAK;EACLC,KAAK;EACLC;AACF,CAAC;AAED,OAAO,MAAME,UAAU,GAAGX,UAAU,CAACY,MAAM,CAAC;EAC1CR,gBAAgB,EAAE;IAChBS,WAAW,EAAE;EACf;AACF,CAAC,CAAC;AAEF,eAAeH,iBAAiB","ignoreList":[]}

package/lib/module/components/bottom-sheet/bottom-sheet.types.js

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

package/lib/module/components/bottom-sheet/bottom-sheet.types.js.map

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

package/lib/module/components/bottom-sheet/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { default as BottomSheet, useBottomSheet, useBottomSheetAnimation } from "./bottom-sheet.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/bottom-sheet/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["default","BottomSheet","useBottomSheet","useBottomSheetAnimation"],"sourceRoot":"../../../../src","sources":["components/bottom-sheet/index.ts"],"mappings":";;AAAA,SACEA,OAAO,IAAIC,WAAW,EACtBC,cAAc,EACdC,uBAAuB,QAClB,mBAAgB","ignoreList":[]}

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

@@ -0,0 +1,10 @@
+"use strict";
+
+/**
+ * Display names for Button components
+ */
+export const DISPLAY_NAME = {
+  BUTTON_ROOT: 'HeroUINative.Button.Root',
+  BUTTON_LABEL: 'HeroUINative.Button.Label'
+};
+//# sourceMappingURL=button.constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["DISPLAY_NAME","BUTTON_ROOT","BUTTON_LABEL"],"sourceRoot":"../../../../src","sources":["components/button/button.constants.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAO,MAAMA,YAAY,GAAG;EAC1BC,WAAW,EAAE,0BAA0B;EACvCC,YAAY,EAAE;AAChB,CAAC","ignoreList":[]}

package/lib/module/components/button/button.js

@@ -0,0 +1,201 @@
+"use strict";
+
+import { forwardRef, useMemo } from 'react';
+import { HeroText } from "../../helpers/components/index.js";
+import { colorKit, useThemeColor } from "../../helpers/theme/index.js";
+import { childrenToString, createContext } from "../../helpers/utils/index.js";
+import { PressableFeedback } from "../pressable-feedback/index.js";
+import { DISPLAY_NAME } from "./button.constants.js";
+import buttonStyles, { styleSheet } from "./button.styles.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [ButtonProvider, useButton] = createContext({
+  name: 'ButtonContext'
+});
+
+// --------------------------------------------------
+
+const ButtonRoot = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    variant = 'primary',
+    pressableFeedbackVariant = 'highlight',
+    pressableFeedbackHighlightProps,
+    pressableFeedbackRippleProps,
+    size = 'md',
+    isIconOnly = false,
+    isDisabled = false,
+    className,
+    style,
+    accessibilityRole = 'button',
+    ...restProps
+  } = props;
+  const [themeColorAccentHover, themeColorDefaultHover, themeColorDangerHover, themeColorDangerSoftHover] = useThemeColor(['accent-hover', 'default-hover', 'danger-hover', 'danger-soft-hover']);
+  const stringifiedChildren = childrenToString(children);
+  const tvStyles = buttonStyles.root({
+    variant,
+    size,
+    isIconOnly,
+    isDisabled,
+    className
+  });
+  const highlightColorMap = useMemo(() => {
+    switch (variant) {
+      case 'primary':
+        return themeColorAccentHover;
+      case 'secondary':
+        return themeColorDefaultHover;
+      case 'tertiary':
+        return themeColorDefaultHover;
+      case 'ghost':
+        return colorKit.setAlpha(themeColorDefaultHover, 0.3).hex();
+      case 'danger':
+        return themeColorDangerHover;
+      case 'danger-soft':
+        return themeColorDangerSoftHover;
+    }
+  }, [variant, themeColorAccentHover, themeColorDefaultHover, themeColorDangerHover, themeColorDangerSoftHover]);
+  const highlightAnimationConfig = useMemo(() => {
+    if (pressableFeedbackVariant !== 'highlight') {
+      return undefined;
+    }
+    const defaultConfig = {
+      backgroundColor: {
+        value: highlightColorMap
+      },
+      opacity: {
+        value: [0, 1]
+      }
+    };
+
+    // Merge with provided animation if available
+    if (pressableFeedbackHighlightProps?.animation && typeof pressableFeedbackHighlightProps.animation === 'object') {
+      const providedAnimation = pressableFeedbackHighlightProps.animation;
+      return {
+        backgroundColor: {
+          ...defaultConfig.backgroundColor,
+          ...providedAnimation.backgroundColor
+        },
+        opacity: {
+          ...defaultConfig.opacity,
+          ...providedAnimation.opacity
+        }
+      };
+    }
+    return defaultConfig;
+  }, [pressableFeedbackVariant, highlightColorMap, pressableFeedbackHighlightProps?.animation]);
+  const rippleAnimationConfig = useMemo(() => {
+    if (pressableFeedbackVariant !== 'ripple') {
+      return undefined;
+    }
+    const defaultConfig = {
+      backgroundColor: {
+        value: highlightColorMap
+      },
+      opacity: {
+        value: [0, 1, 0]
+      }
+    };
+
+    // Merge with provided animation if available
+    if (pressableFeedbackRippleProps?.animation && typeof pressableFeedbackRippleProps.animation === 'object') {
+      const providedAnimation = pressableFeedbackRippleProps.animation;
+      return {
+        backgroundColor: {
+          ...defaultConfig.backgroundColor,
+          ...providedAnimation.backgroundColor
+        },
+        opacity: {
+          ...defaultConfig.opacity,
+          ...providedAnimation.opacity
+        },
+        ...(providedAnimation.scale && {
+          scale: providedAnimation.scale
+        }),
+        ...(providedAnimation.progress && {
+          progress: providedAnimation.progress
+        })
+      };
+    }
+    return defaultConfig;
+  }, [pressableFeedbackVariant, highlightColorMap, pressableFeedbackRippleProps?.animation]);
+  const contextValue = useMemo(() => ({
+    size,
+    variant,
+    isDisabled
+  }), [size, variant, isDisabled]);
+  return /*#__PURE__*/_jsx(ButtonProvider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsxs(PressableFeedback, {
+      ref: ref,
+      className: tvStyles,
+      style: [styleSheet.buttonRoot, style],
+      isDisabled: isDisabled,
+      accessibilityRole: accessibilityRole,
+      accessibilityState: {
+        disabled: isDisabled
+      },
+      ...restProps,
+      children: [pressableFeedbackVariant === 'highlight' && /*#__PURE__*/_jsx(PressableFeedback.Highlight, {
+        ...pressableFeedbackHighlightProps,
+        animation: highlightAnimationConfig
+      }), pressableFeedbackVariant === 'ripple' && /*#__PURE__*/_jsx(PressableFeedback.Ripple, {
+        ...pressableFeedbackRippleProps,
+        animation: rippleAnimationConfig
+      }), stringifiedChildren ? /*#__PURE__*/_jsx(ButtonLabel, {
+        children: stringifiedChildren
+      }) : children]
+    })
+  });
+});
+
+// --------------------------------------------------
+
+const ButtonLabel = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    ...restProps
+  } = props;
+  const {
+    size,
+    variant
+  } = useButton();
+  const tvStyles = buttonStyles.label({
+    size,
+    variant,
+    className
+  });
+  return /*#__PURE__*/_jsx(HeroText, {
+    ref: ref,
+    className: tvStyles,
+    ...restProps,
+    children: children
+  });
+});
+
+// --------------------------------------------------
+
+ButtonRoot.displayName = DISPLAY_NAME.BUTTON_ROOT;
+ButtonLabel.displayName = DISPLAY_NAME.BUTTON_LABEL;
+
+/**
+ * Compound Button component with sub-components
+ *
+ * @component Button - Main button container that handles press interactions, animations, and variants.
+ * Renders with string children as label or accepts compound components for custom layouts.
+ *
+ * @component Button.Label - Text content of the button. When string is provided,
+ * it renders as Text. Otherwise renders children as-is.
+ *
+ * Props flow from Button to sub-components via context (size, variant, isDisabled).
+ * All components use animated views with layout transitions for smooth animations.
+ *
+ * @see Full documentation: https://heroui.com/components/button
+ */
+const CompoundButton = Object.assign(ButtonRoot, {
+  /** Button label - renders text or custom content */
+  Label: ButtonLabel
+});
+export { useButton };
+export default CompoundButton;
+//# sourceMappingURL=button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","useMemo","HeroText","colorKit","useThemeColor","childrenToString","createContext","PressableFeedback","DISPLAY_NAME","buttonStyles","styleSheet","jsx","_jsx","jsxs","_jsxs","ButtonProvider","useButton","name","ButtonRoot","props","ref","children","variant","pressableFeedbackVariant","pressableFeedbackHighlightProps","pressableFeedbackRippleProps","size","isIconOnly","isDisabled","className","style","accessibilityRole","restProps","themeColorAccentHover","themeColorDefaultHover","themeColorDangerHover","themeColorDangerSoftHover","stringifiedChildren","tvStyles","root","highlightColorMap","setAlpha","hex","highlightAnimationConfig","undefined","defaultConfig","backgroundColor","value","opacity","animation","providedAnimation","rippleAnimationConfig","scale","progress","contextValue","buttonRoot","accessibilityState","disabled","Highlight","Ripple","ButtonLabel","label","displayName","BUTTON_ROOT","BUTTON_LABEL","CompoundButton","Object","assign","Label"],"sourceRoot":"../../../../src","sources":["components/button/button.tsx"],"mappings":"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","ignoreList":[]}