@erquhart/heroui-native 1.0.0-beta.10.1

package/src/components/bottom-sheet/bottom-sheet.tsx

@@ -0,0 +1,395 @@
+import GorhomBottomSheet from '@gorhom/bottom-sheet';
+import { forwardRef, useMemo } from 'react';
+import type { Text as RNText } from 'react-native';
+import Animated, {
+  ReduceMotion,
+  useSharedValue,
+} from 'react-native-reanimated';
+import { withUniwind } from 'uniwind';
+import {
+  BottomSheetContentContainer,
+  CloseIcon,
+  FullWindowOverlay,
+} from '../../helpers/components';
+import { HeroText } from '../../helpers/components/hero-text';
+import {
+  AnimationSettingsProvider,
+  useAnimationSettings,
+} from '../../helpers/contexts/animation-settings-context';
+import { usePopupBottomSheetContentAnimation } from '../../helpers/hooks/use-popup-bottom-sheet-content-animation';
+import { usePopupOverlayAnimation } from '../../helpers/hooks/use-popup-overlay-animation';
+import { usePopupRootAnimation } from '../../helpers/hooks/use-popup-root-animation';
+import { useThemeColor } from '../../helpers/theme';
+import * as BottomSheetPrimitives from '../../primitives/bottom-sheet';
+import * as BottomSheetPrimitivesTypes from '../../primitives/bottom-sheet/bottom-sheet.types';
+import {
+  BottomSheetAnimationProvider,
+  useBottomSheetAnimation,
+  useBottomSheetContentAnimation,
+} from './bottom-sheet.animation';
+import { DISPLAY_NAME } from './bottom-sheet.constants';
+import bottomSheetStyles, { styleSheet } from './bottom-sheet.styles';
+import type {
+  BottomSheetCloseProps,
+  BottomSheetContentProps,
+  BottomSheetDescriptionProps,
+  BottomSheetOverlayProps,
+  BottomSheetPortalProps,
+  BottomSheetRootProps,
+  BottomSheetTitleProps,
+  BottomSheetTriggerProps,
+} from './bottom-sheet.types';
+
+const AnimatedOverlay = Animated.createAnimatedComponent(
+  BottomSheetPrimitives.Overlay
+);
+
+const StyledGorhomBottomSheet = withUniwind(GorhomBottomSheet);
+
+const useBottomSheet = BottomSheetPrimitives.useRootContext;
+
+// --------------------------------------------------
+
+const BottomSheetRoot = forwardRef<
+  BottomSheetPrimitivesTypes.RootRef,
+  BottomSheetRootProps
+>(
+  (
+    {
+      children,
+      closeDelay = 300,
+      isDismissKeyboardOnClose = true,
+      isOpen: isOpenProp,
+      isDefaultOpen,
+      onOpenChange: onOpenChangeProp,
+      animation,
+      ...props
+    },
+    ref
+  ) => {
+    const {
+      internalIsOpen,
+      componentState,
+      progress,
+      onOpenChange,
+      isAllAnimationsDisabled,
+    } = usePopupRootAnimation({
+      isOpen: isOpenProp,
+      isDefaultOpen,
+      onOpenChange: onOpenChangeProp,
+      closeDelay,
+      isDismissKeyboardOnClose,
+      animation,
+    });
+
+    const animationContextValue = useMemo(
+      () => ({
+        bottomSheetState: componentState,
+        progress,
+      }),
+      [componentState, progress]
+    );
+
+    const animationSettingsContextValue = useMemo(
+      () => ({
+        isAllAnimationsDisabled,
+      }),
+      [isAllAnimationsDisabled]
+    );
+
+    return (
+      <AnimationSettingsProvider value={animationSettingsContextValue}>
+        <BottomSheetAnimationProvider value={animationContextValue}>
+          <BottomSheetPrimitives.Root
+            ref={ref}
+            isOpen={internalIsOpen}
+            isDefaultOpen={isDefaultOpen}
+            onOpenChange={onOpenChange}
+            {...props}
+          >
+            {children}
+          </BottomSheetPrimitives.Root>
+        </BottomSheetAnimationProvider>
+      </AnimationSettingsProvider>
+    );
+  }
+);
+
+// --------------------------------------------------
+
+const BottomSheetTrigger = forwardRef<
+  BottomSheetPrimitivesTypes.TriggerRef,
+  BottomSheetTriggerProps
+>((props, ref) => {
+  return <BottomSheetPrimitives.Trigger ref={ref} {...props} />;
+});
+
+// --------------------------------------------------
+
+const BottomSheetPortal = ({ children, ...props }: BottomSheetPortalProps) => {
+  const animationSettingsContext = useAnimationSettings();
+  const animationContext = useBottomSheetAnimation();
+
+  return (
+    <BottomSheetPrimitives.Portal {...props}>
+      <AnimationSettingsProvider value={animationSettingsContext}>
+        <BottomSheetAnimationProvider value={animationContext}>
+          <FullWindowOverlay>{children}</FullWindowOverlay>
+        </BottomSheetAnimationProvider>
+      </AnimationSettingsProvider>
+    </BottomSheetPrimitives.Portal>
+  );
+};
+
+// --------------------------------------------------
+
+const BottomSheetOverlay = forwardRef<
+  BottomSheetPrimitivesTypes.OverlayRef,
+  BottomSheetOverlayProps
+>(
+  (
+    { className, style, animation, isAnimatedStyleActive = true, ...props },
+    ref
+  ) => {
+    const { progress } = useBottomSheetAnimation();
+    const isDragging = useSharedValue(false);
+
+    const overlayClassName = bottomSheetStyles.overlay({ className });
+
+    const { rContainerStyle } = usePopupOverlayAnimation({
+      progress,
+      isDragging,
+      animation,
+    });
+
+    const overlayStyle = isAnimatedStyleActive
+      ? [rContainerStyle, style]
+      : style;
+
+    return (
+      <AnimatedOverlay
+        ref={ref}
+        className={overlayClassName}
+        style={overlayStyle}
+        {...props}
+      />
+    );
+  }
+);
+
+// --------------------------------------------------
+
+const BottomSheetContent = forwardRef<
+  GorhomBottomSheet,
+  BottomSheetContentProps
+>(
+  (
+    {
+      children,
+      backgroundClassName,
+      handleIndicatorClassName,
+      contentContainerClassName,
+      contentContainerProps,
+      animationConfigs,
+      animation,
+      ...restProps
+    },
+    ref
+  ) => {
+    const { onOpenChange } = useBottomSheet();
+    const { bottomSheetState, progress } = useBottomSheetAnimation();
+
+    const { isAnimationDisabledValue } = useBottomSheetContentAnimation({
+      animation,
+    });
+
+    const { animatedIndex } = usePopupBottomSheetContentAnimation({
+      progress,
+      componentState: bottomSheetState,
+    });
+
+    const contentBackgroundClassName = bottomSheetStyles.contentBackground({
+      className: backgroundClassName,
+    });
+
+    const contentHandleIndicatorClassName =
+      bottomSheetStyles.contentHandleIndicator({
+        className: handleIndicatorClassName,
+      });
+
+    const contentContainerClassNameValue = bottomSheetStyles.contentContainer({
+      className: contentContainerClassName,
+    });
+
+    const onClose = () => {
+      onOpenChange(false);
+      restProps.onClose?.();
+    };
+
+    const mergedAnimationConfigs = useMemo(
+      () => ({
+        ...animationConfigs,
+        reduceMotion: isAnimationDisabledValue
+          ? ReduceMotion.Always
+          : animationConfigs?.reduceMotion,
+      }),
+      [animationConfigs, isAnimationDisabledValue]
+    );
+
+    return (
+      <StyledGorhomBottomSheet
+        ref={ref}
+        backgroundClassName={contentBackgroundClassName}
+        backgroundStyle={[
+          styleSheet.contentContainer,
+          restProps.backgroundStyle,
+        ]}
+        handleIndicatorClassName={contentHandleIndicatorClassName}
+        enablePanDownToClose={restProps.enablePanDownToClose ?? true}
+        animatedIndex={animatedIndex ?? restProps.animatedIndex}
+        onClose={onClose}
+        animationConfigs={mergedAnimationConfigs}
+        {...restProps}
+      >
+        <BottomSheetContentContainer
+          state={bottomSheetState}
+          contentContainerClassName={contentContainerClassNameValue}
+          contentContainerProps={contentContainerProps}
+        >
+          {children}
+        </BottomSheetContentContainer>
+      </StyledGorhomBottomSheet>
+    );
+  }
+);
+
+// --------------------------------------------------
+
+const BottomSheetClose = forwardRef<
+  BottomSheetPrimitivesTypes.CloseRef,
+  BottomSheetCloseProps
+>(({ className, iconProps, hitSlop = 12, children, ...props }, ref) => {
+  const themeColorMuted = useThemeColor('muted');
+
+  const tvStyles = bottomSheetStyles.close({ className });
+
+  return (
+    <BottomSheetPrimitives.Close
+      ref={ref}
+      className={tvStyles}
+      hitSlop={hitSlop}
+      {...props}
+    >
+      {children || (
+        <CloseIcon
+          size={iconProps?.size ?? 18}
+          color={iconProps?.color ?? themeColorMuted}
+        />
+      )}
+    </BottomSheetPrimitives.Close>
+  );
+});
+
+// --------------------------------------------------
+
+const BottomSheetTitle = forwardRef<RNText, BottomSheetTitleProps>(
+  ({ className, children, ...props }, ref) => {
+    const { nativeID } = useBottomSheet();
+    const tvStyles = bottomSheetStyles.label({ className });
+
+    return (
+      <HeroText
+        ref={ref}
+        role="heading"
+        accessibilityRole="header"
+        nativeID={`${nativeID}_label`}
+        className={tvStyles}
+        {...props}
+      >
+        {children}
+      </HeroText>
+    );
+  }
+);
+
+// --------------------------------------------------
+
+const BottomSheetDescription = forwardRef<RNText, BottomSheetDescriptionProps>(
+  ({ className, children, ...props }, ref) => {
+    const { nativeID } = useBottomSheet();
+
+    const tvStyles = bottomSheetStyles.description({
+      className,
+    });
+
+    return (
+      <HeroText
+        ref={ref}
+        accessibilityRole="text"
+        nativeID={`${nativeID}_desc`}
+        className={tvStyles}
+        {...props}
+      >
+        {children}
+      </HeroText>
+    );
+  }
+);
+
+// --------------------------------------------------
+
+BottomSheetRoot.displayName = DISPLAY_NAME.ROOT;
+BottomSheetTrigger.displayName = DISPLAY_NAME.TRIGGER;
+BottomSheetPortal.displayName = DISPLAY_NAME.PORTAL;
+BottomSheetOverlay.displayName = DISPLAY_NAME.OVERLAY;
+BottomSheetContent.displayName = DISPLAY_NAME.CONTENT;
+BottomSheetClose.displayName = DISPLAY_NAME.CLOSE;
+BottomSheetTitle.displayName = DISPLAY_NAME.TITLE;
+BottomSheetDescription.displayName = DISPLAY_NAME.DESCRIPTION;
+
+/**
+ * Compound BottomSheet component with sub-components
+ *
+ * @component BottomSheet.Root - Main container that manages open/close state.
+ * Provides the bottom sheet context to child components.
+ *
+ * @component BottomSheet.Trigger - Button or element that opens the bottom sheet.
+ * Accepts any pressable element as children.
+ *
+ * @component BottomSheet.Portal - Portal container for bottom sheet overlay and content.
+ * Renders children in a portal with full window overlay.
+ *
+ * @component BottomSheet.Overlay - Background overlay that covers the screen.
+ * Typically closes the bottom sheet when clicked.
+ *
+ * @component BottomSheet.Content - The bottom sheet content container.
+ * Uses @gorhom/bottom-sheet for rendering. Contains the main bottom sheet UI elements.
+ *
+ * @component BottomSheet.Close - Close button for the bottom sheet.
+ * Can accept custom children or uses default close icon.
+ *
+ * @component BottomSheet.Title - The bottom sheet title text.
+ * Automatically linked for accessibility.
+ *
+ * @component BottomSheet.Description - The bottom sheet description text.
+ * Automatically linked for accessibility.
+ */
+const BottomSheet = Object.assign(BottomSheetRoot, {
+  /** @optional Trigger element to open the bottom sheet */
+  Trigger: BottomSheetTrigger,
+  /** @optional Portal container for overlay and content */
+  Portal: BottomSheetPortal,
+  /** @optional Background overlay */
+  Overlay: BottomSheetOverlay,
+  /** @optional Main bottom sheet content container */
+  Content: BottomSheetContent,
+  /** @optional Close button for the bottom sheet */
+  Close: BottomSheetClose,
+  /** @optional Bottom sheet title text */
+  Title: BottomSheetTitle,
+  /** @optional Bottom sheet description text */
+  Description: BottomSheetDescription,
+});
+
+export { useBottomSheet, useBottomSheetAnimation };
+export default BottomSheet;

package/src/components/bottom-sheet/bottom-sheet.types.ts

@@ -0,0 +1,199 @@
+import type GorhomBottomSheet from '@gorhom/bottom-sheet';
+import type { ReactNode } from 'react';
+import type { TextProps } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
+import type {
+  AnimationRootDisableAll,
+  PopupOverlayAnimation,
+} from '../../helpers/types/animation';
+import type { BaseBottomSheetContentProps } from '../../helpers/types/bottom-sheet';
+import type * as BottomSheetPrimitivesTypes from '../../primitives/bottom-sheet/bottom-sheet.types';
+
+/**
+ * Bottom sheet internal state for animation coordination
+ */
+export type BottomSheetState = 'idle' | 'open' | 'close';
+
+/**
+ * Context value for bottom sheet animation state
+ */
+export interface BottomSheetAnimationContextValue {
+  /** Extended internal state for animation control */
+  bottomSheetState: BottomSheetState;
+  /** Animation progress shared value (0=idle, 1=open, 2=close) */
+  progress: SharedValue<number>;
+}
+
+/**
+ * Animation configuration for BottomSheet root component
+ */
+export type BottomSheetRootAnimation = AnimationRootDisableAll;
+
+/**
+ * BottomSheet Root component props
+ */
+export interface BottomSheetRootProps
+  extends BottomSheetPrimitivesTypes.RootProps {
+  /**
+   * The content of the bottom sheet
+   */
+  children?: ReactNode;
+  /**
+   * Delay in milliseconds before the bottom sheet closes (for exit animations)
+   * @default 300
+   */
+  closeDelay?: number;
+  /**
+   * Whether to dismiss the keyboard when the bottom sheet closes
+   * @default true
+   */
+  isDismissKeyboardOnClose?: boolean;
+  /**
+   * Animation configuration for bottom sheet root
+   * - `"disable-all"`: Disable all animations including children
+   * - `undefined`: Use default animations
+   */
+  animation?: BottomSheetRootAnimation;
+}
+
+/**
+ * BottomSheet Trigger component props
+ */
+export interface BottomSheetTriggerProps
+  extends BottomSheetPrimitivesTypes.TriggerProps {
+  /**
+   * The trigger element content
+   */
+  children?: ReactNode;
+}
+
+/**
+ * BottomSheet Portal component props
+ */
+export interface BottomSheetPortalProps
+  extends BottomSheetPrimitivesTypes.PortalProps {
+  /**
+   * The portal content
+   */
+  children: ReactNode;
+}
+
+/**
+ * Animation configuration for BottomSheet Overlay component
+ */
+export type BottomSheetOverlayAnimation = PopupOverlayAnimation;
+
+/**
+ * BottomSheet Overlay component props
+ */
+export interface BottomSheetOverlayProps
+  extends BottomSheetPrimitivesTypes.OverlayProps {
+  /**
+   * Additional CSS class for the overlay
+   *
+   * @note The following style properties are occupied by animations and cannot be set via className:
+   * - `opacity` - Animated for overlay show/hide transitions (idle: 0, open: 1, close: 0)
+   *
+   * To customize this property, use the `animation` prop:
+   * ```tsx
+   * <BottomSheet.Overlay
+   *   animation={{
+   *     opacity: { value: [0, 1, 0] }
+   *   }}
+   * />
+   * ```
+   *
+   * To completely disable animated styles and use your own via className or style prop, set `isAnimatedStyleActive={false}`.
+   */
+  className?: string;
+  /**
+   * Animation configuration for overlay
+   * - `false` or `"disabled"`: Disable all animations
+   * - `true` or `undefined`: Use default animations
+   * - `object`: Custom animation configuration
+   */
+  animation?: BottomSheetOverlayAnimation;
+  /**
+   * Whether animated styles (react-native-reanimated) are active
+   * When `false`, the animated style is removed and you can implement custom logic
+   * This prop should only be used when you want to write custom styling logic instead of the default animated styles
+   * @default true
+   */
+  isAnimatedStyleActive?: boolean;
+}
+
+/**
+ * BottomSheet Content component props
+ */
+export interface BottomSheetContentProps
+  extends Partial<React.ComponentProps<typeof GorhomBottomSheet>>,
+    BaseBottomSheetContentProps {}
+
+/**
+ * BottomSheet Close component props
+ */
+export interface BottomSheetCloseProps
+  extends BottomSheetPrimitivesTypes.CloseProps {
+  /**
+   * Close icon props
+   */
+  iconProps?: BottomSheetCloseIconProps;
+  /**
+   * Additional CSS class for the close button
+   */
+  className?: string;
+  /**
+   * The close button content
+   */
+  children?: ReactNode;
+}
+
+/**
+ * Close icon props
+ */
+export interface BottomSheetCloseIconProps {
+  /**
+   * Size of the close icon
+   * @default 18
+   */
+  size?: number;
+  /**
+   * Color of the close icon
+   * @default theme color muted
+   */
+  color?: string;
+}
+
+/**
+ * BottomSheet Title component props
+ */
+export interface BottomSheetTitleProps extends TextProps {
+  /**
+   * Additional CSS class for the title
+   */
+  className?: string;
+}
+
+/**
+ * BottomSheet Description component props
+ */
+export interface BottomSheetDescriptionProps extends TextProps {
+  /**
+   * Additional CSS class for the description
+   */
+  className?: string;
+}
+
+/**
+ * Return type for the useBottomSheetAnimation hook
+ */
+export interface UseBottomSheetAnimationReturn {
+  /**
+   * Extended internal state for coordinating animations
+   */
+  bottomSheetState: BottomSheetState;
+  /**
+   * Animation progress shared value (0=idle, 1=open, 2=close)
+   */
+  progress: SharedValue<number>;
+}

package/src/components/bottom-sheet/index.ts

@@ -0,0 +1,16 @@
+export {
+  default as BottomSheet,
+  useBottomSheet,
+  useBottomSheetAnimation,
+} from './bottom-sheet';
+export type {
+  BottomSheetCloseIconProps,
+  BottomSheetCloseProps,
+  BottomSheetContentProps,
+  BottomSheetDescriptionProps,
+  BottomSheetOverlayProps,
+  BottomSheetPortalProps,
+  BottomSheetRootProps,
+  BottomSheetTitleProps,
+  BottomSheetTriggerProps,
+} from './bottom-sheet.types';

package/src/components/button/button.constants.ts

@@ -0,0 +1,7 @@
+/**
+ * Display names for Button components
+ */
+export const DISPLAY_NAME = {
+  BUTTON_ROOT: 'HeroUINative.Button.Root',
+  BUTTON_LABEL: 'HeroUINative.Button.Label',
+};