@erquhart/heroui-native 1.0.0-beta.10.1

package/src/components/toast/toast.types.ts

@@ -0,0 +1,316 @@
+import type {
+  EntryOrExitLayoutType,
+  WithTimingConfig,
+} from 'react-native-reanimated';
+import type { ViewRef } from '../../helpers/types';
+import type {
+  AnimationRoot,
+  AnimationValue,
+} from '../../helpers/types/animation';
+import type * as ToastPrimitive from '../../primitives/toast';
+import type {
+  ToastComponentProps,
+  ToastShowOptions,
+} from '../../providers/toast';
+import type { ButtonRootProps } from '../button';
+
+/**
+ * Toast variant types
+ */
+export type ToastVariant =
+  | 'default'
+  | 'accent'
+  | 'success'
+  | 'warning'
+  | 'danger';
+
+/**
+ * Toast placement types
+ */
+export type ToastPlacement = 'top' | 'bottom';
+
+/**
+ * Animation configuration for toast root component
+ */
+export type ToastRootAnimation = AnimationRoot<{
+  opacity?: AnimationValue<{
+    /**
+     * Opacity interpolation values [start, end]
+     * Controls how fast toast items fade out as they move beyond the visible stack limits.
+     * When toasts are pushed out of view (beyond the last few visible items), their opacity
+     * gradually decreases to create a smooth disappearing effect.
+     * - First value: fully visible opacity (1) for items within visible stack
+     * - Second value: hidden opacity (0) for items pushed out of view
+     * @default [1, 0]
+     */
+    value?: [number, number];
+    /**
+     * Animation timing configuration
+     * @default { duration: 300 }
+     */
+    timingConfig?: WithTimingConfig;
+  }>;
+  translateY?: AnimationValue<{
+    /**
+     * Translate Y interpolation values [start, end]
+     * Controls how much of a toast item is visible when it's positioned behind the last visible toast.
+     * This creates a "peek" effect where stacked toasts are slightly offset vertically,
+     * allowing users to see a portion of the toast behind the current one.
+     * - First value: no offset (0) for the last/active toast
+     * - Second value: vertical offset in pixels (10) for toasts behind the last one
+     * Note: The offset direction is automatically adjusted based on placement (top/bottom)
+     * @default [0, 10] (multiplied by placement sign)
+     */
+    value?: [number, number];
+    /**
+     * Animation timing configuration
+     * @default { duration: 300 }
+     */
+    timingConfig?: WithTimingConfig;
+  }>;
+  scale?: AnimationValue<{
+    /**
+     * Scale interpolation values [start, end]
+     * Controls the size scaling of toast items in the stack.
+     * Toasts behind the active one are slightly scaled down to create depth and visual hierarchy.
+     * - First value: normal scale (1) for the active/last toast
+     * - Second value: scaled down value (0.97) for toasts positioned behind
+     * @default [1, 0.97]
+     */
+    value?: [number, number];
+    /**
+     * Animation timing configuration
+     * @default { duration: 300 }
+     */
+    timingConfig?: WithTimingConfig;
+  }>;
+  entering?: AnimationValue<{
+    /**
+     * Custom entering animation for top placement
+     * @default FadeInUp.springify().withInitialValues({ opacity: 1, transform: [{ translateY: -100 }] }).mass(3)
+     */
+    top?: EntryOrExitLayoutType;
+    /**
+     * Custom entering animation for bottom placement
+     * @default FadeInDown.springify().withInitialValues({ opacity: 1, transform: [{ translateY: 100 }] }).mass(3)
+     */
+    bottom?: EntryOrExitLayoutType;
+  }>;
+  exiting?: AnimationValue<{
+    /**
+     * Custom exiting animation for top placement
+     * @default Keyframe animation with translateY: -100, scale: 0.97, opacity: 0.5
+     */
+    top?: EntryOrExitLayoutType;
+    /**
+     * Custom exiting animation for bottom placement
+     * @default Keyframe animation with translateY: 100, scale: 0.97, opacity: 0.5
+     */
+    bottom?: EntryOrExitLayoutType;
+  }>;
+}>;
+
+/**
+ * Props for the Toast.Root component
+ */
+export interface ToastRootProps
+  extends ToastPrimitive.RootProps,
+    Omit<ToastComponentProps, 'id'> {
+  /**
+   * Visual variant of the toast
+   * @default 'default'
+   */
+  variant?: ToastVariant;
+  /**
+   * Placement of the toast
+   * @default 'top'
+   */
+  placement?: ToastPlacement;
+  /**
+   * Additional CSS class for the toast container
+   *
+   * @note The following style properties are occupied by animations and cannot be set via className:
+   * - `opacity` - Animated for visibility transitions when toasts are pushed beyond visible stack limits
+   * - `transform` (translateY) - Animated for vertical position transitions when toasts are stacked, and for swipe-to-dismiss gestures
+   * - `transform` (scale) - Animated for size scaling transitions when toasts are stacked (toasts behind active one are scaled down)
+   * - `height` - Animated for height transitions when toast content changes
+   *
+   * To customize these properties, use the `animation` prop:
+   * ```tsx
+   * <Toast.Root
+   *   animation={{
+   *     opacity: {
+   *       value: [1, 0],
+   *       timingConfig: { duration: 300 }
+   *     },
+   *     translateY: {
+   *       value: [0, 10],
+   *       timingConfig: { duration: 300 }
+   *     },
+   *     scale: {
+   *       value: [1, 0.97],
+   *       timingConfig: { duration: 300 }
+   *     }
+   *   }}
+   * />
+   * ```
+   *
+   * To completely disable animated styles and use your own via className or style prop, set `isAnimatedStyleActive={false}`.
+   */
+  className?: string;
+  /**
+   * Animation configuration for toast
+   * - `false` or `"disabled"`: Disable only root animations
+   * - `"disable-all"`: Disable all animations including children
+   * - `true` or `undefined`: Use default animations
+   * - `object`: Custom animation configuration
+   */
+  animation?: ToastRootAnimation;
+  /**
+   * Whether the toast can be swiped to dismiss and dragged with rubber effect
+   * @default true
+   */
+  isSwipeable?: boolean;
+  /**
+   * 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;
+}
+
+/**
+ * Props for the Toast.Title component
+ */
+export interface ToastTitleProps extends ToastPrimitive.TitleProps {
+  /**
+   * Content to be rendered as title
+   */
+  children?: React.ReactNode;
+  /**
+   * Additional CSS class for the title
+   */
+  className?: string;
+}
+
+/**
+ * Props for the Toast.Description component
+ */
+export interface ToastDescriptionProps extends ToastPrimitive.DescriptionProps {
+  /**
+   * Content to be rendered as description
+   */
+  children?: React.ReactNode;
+  /**
+   * Additional CSS class for the description
+   */
+  className?: string;
+}
+
+/**
+ * Props for the Toast.Action component
+ */
+export type ToastActionProps = ButtonRootProps;
+
+/**
+ * Props for the Toast.Close component
+ */
+export type ToastCloseProps = ButtonRootProps & {
+  /**
+   * Custom icon props for the close button icon
+   */
+  iconProps?: {
+    size?: number;
+    color?: string;
+  };
+};
+
+/**
+ * Context values shared between Toast components
+ */
+export interface ToastContextValue {
+  /**
+   * Visual variant of the toast
+   */
+  variant: ToastVariant;
+  /**
+   * Function to hide the toast
+   */
+  hide?: (ids?: string | string[] | 'all') => void;
+  /**
+   * ID of the toast
+   */
+  id?: string;
+}
+
+/**
+ * Ref type for the Toast.Root component
+ */
+export type ToastRootRef = ViewRef;
+
+/**
+ * Props for useToastRootAnimation hook
+ * Picks required properties from ToastRootProps and adds id from ToastComponentProps
+ */
+export type UseToastRootAnimationOptions = Pick<
+  ToastRootProps,
+  | 'animation'
+  | 'index'
+  | 'total'
+  | 'heights'
+  | 'placement'
+  | 'hide'
+  | 'isSwipeable'
+  | 'maxVisibleToasts'
+> &
+  Pick<ToastComponentProps, 'id'>;
+
+/**
+ * Props for the DefaultToast component
+ * Used internally when showing toasts with string or config object (without component)
+ */
+export interface DefaultToastProps extends ToastComponentProps {
+  /**
+   * Visual variant of the toast
+   * @default 'default'
+   */
+  variant?: ToastRootProps['variant'];
+  /**
+   * Placement of the toast
+   * @default 'top'
+   */
+  placement?: ToastRootProps['placement'];
+  /**
+   * Animation configuration for toast
+   */
+  animation?: ToastRootProps['animation'];
+  /**
+   * Whether the toast can be swiped to dismiss and dragged with rubber effect
+   */
+  isSwipeable?: ToastRootProps['isSwipeable'];
+  /**
+   * Label text for the toast
+   */
+  label?: string;
+  /**
+   * Description text for the toast
+   */
+  description?: string;
+  /**
+   * Action button label text
+   */
+  actionLabel?: string;
+  /**
+   * Callback function called when the action button is pressed
+   * Receives show and hide functions for programmatic toast control
+   */
+  onActionPress?: (helpers: {
+    show: (options: string | ToastShowOptions) => string;
+    hide: (ids?: string | string[] | 'all') => void;
+  }) => void;
+  /**
+   * Icon element to display in the toast
+   */
+  icon?: React.ReactNode;
+}

package/src/helpers/components/animated-check-icon.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import Animated, {
+  Easing,
+  useAnimatedProps,
+  useDerivedValue,
+  withDelay,
+  withTiming,
+} from 'react-native-reanimated';
+import Svg, { Path } from 'react-native-svg';
+import { useThemeColor } from '../theme';
+
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+
+const DEFAULT_SIZE = 18;
+const ENTER_DURATION = 150;
+const EXIT_DURATION = 150;
+
+interface CheckIconProps {
+  isSelected?: boolean;
+  size?: number;
+  strokeWidth?: number;
+  color?: string;
+  enterDuration?: number;
+  exitDuration?: number;
+}
+
+export const AnimatedCheckIcon: React.FC<CheckIconProps> = ({
+  isSelected = false,
+  size = DEFAULT_SIZE,
+  strokeWidth = 2.5,
+  color,
+  enterDuration = ENTER_DURATION,
+  exitDuration = EXIT_DURATION,
+}) => {
+  const themeColorForeground = useThemeColor('foreground');
+
+  const checkProgress = useDerivedValue(() => {
+    if (isSelected) {
+      return withDelay(
+        100,
+        withTiming(1, {
+          duration: enterDuration,
+          easing: Easing.out(Easing.ease),
+        })
+      );
+    } else {
+      return withTiming(0, { duration: exitDuration });
+    }
+  });
+
+  const animatedCheckProps = useAnimatedProps(
+    () => ({
+      strokeDasharray: size,
+      strokeDashoffset: size * (1 - checkProgress.value),
+    }),
+    [checkProgress]
+  );
+
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox={`0 0 ${DEFAULT_SIZE} ${DEFAULT_SIZE}`}
+      fill="none"
+    >
+      <AnimatedPath
+        d="M4 9.5L8 13L14 6"
+        stroke={color ?? themeColorForeground}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        animatedProps={animatedCheckProps}
+      />
+    </Svg>
+  );
+};
+
+AnimatedCheckIcon.displayName = 'HeroUINative.AnimatedCheckIcon';

package/src/helpers/components/bottom-sheet-content-container.tsx

@@ -0,0 +1,49 @@
+import { BottomSheetView, useBottomSheet } from '@gorhom/bottom-sheet';
+import { useEffect } from 'react';
+import type { BottomSheetContentContainerProps } from '../types/bottom-sheet';
+
+/**
+ * Reusable BottomSheetContentContainer component
+ *
+ * This component handles the content container for bottom sheets used across
+ * BottomSheet, Popover, and Select components. It manages the expand/close
+ * behavior based on the provided state and applies consistent styling.
+ *
+ * @example
+ * ```tsx
+ * <BottomSheetContentContainer
+ *   state={bottomSheetState}
+ *   contentContainerClassName="custom-class"
+ * >
+ *   {children}
+ * </BottomSheetContentContainer>
+ * ```
+ */
+export function BottomSheetContentContainer({
+  children,
+  contentContainerClassName,
+  contentContainerProps,
+  state,
+}: BottomSheetContentContainerProps) {
+  const { expand, close } = useBottomSheet();
+
+  useEffect(() => {
+    if (state === 'open') {
+      expand();
+    } else if (state === 'close') {
+      setTimeout(() => {
+        close();
+      }, 100);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state]);
+
+  return (
+    <BottomSheetView
+      className={contentContainerClassName}
+      {...contentContainerProps}
+    >
+      {children}
+    </BottomSheetView>
+  );
+}

package/src/helpers/components/check-icon.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import { useThemeColor } from '../theme';
+interface CheckIconProps {
+  size?: number;
+  color?: string;
+}
+
+export const CheckIcon: React.FC<CheckIconProps> = ({ size = 16, color }) => {
+  const themeColorForeground = useThemeColor('foreground');
+
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill={color ?? themeColorForeground}
+    >
+      <Path
+        fillRule="evenodd"
+        d="M20.732 4.645a1.5 1.5 0 0 1 .163 2.116l-9 10.5a1.5 1.5 0 0 1-2.2.084l-5.25-5.25a1.5 1.5 0 0 1 2.121-2.121l3.892 3.891 7.96-9.287a1.5 1.5 0 0 1 2.114-.163"
+        clipRule="evenodd"
+      />
+    </Svg>
+  );
+};
+
+CheckIcon.displayName = 'HeroUINative.CheckIcon';

package/src/helpers/components/close-icon.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import { useThemeColor } from '../theme';
+
+interface CloseIconProps {
+  size?: number;
+  color?: string;
+}
+
+export const CloseIcon: React.FC<CloseIconProps> = ({ size = 16, color }) => {
+  const themeColorForeground = useThemeColor('foreground');
+
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill={color ?? themeColorForeground}
+    >
+      <Path
+        fillRule="evenodd"
+        d="M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z"
+        clipRule="evenodd"
+      />
+    </Svg>
+  );
+};
+
+CloseIcon.displayName = 'HeroUINative.CloseIcon';

package/src/helpers/components/full-window-overlay.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Platform } from 'react-native';
+import { FullWindowOverlay as NativeFullWindowOverlay } from 'react-native-screens';
+
+export const FullWindowOverlay =
+  Platform.OS === 'ios' ? NativeFullWindowOverlay : React.Fragment;

package/src/helpers/components/hero-text.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Text as RNText, type TextProps as RNTextProps } from 'react-native';
+import { useTextComponent } from '../../providers/text-component/provider';
+import { cn } from '../theme';
+
+/**
+ * Props for HeroText component
+ */
+export interface HeroTextProps extends RNTextProps {
+  /**
+   * Additional CSS classes that will be merged with the default 'font-normal' class
+   */
+  className?: string;
+}
+
+/**
+ * HeroText component that automatically applies global text configuration
+ * from HeroUINativeProvider.
+ *
+ * This component is distinct from React Native's Text component and includes
+ * a default 'font-normal' className that can be extended via the className prop.
+ *
+ * Global text props that can be configured:
+ * - adjustsFontSizeToFit: Auto-scale text to fit constraints
+ * - allowFontScaling: Respect Text Size accessibility settings
+ * - maxFontSizeMultiplier: Maximum font scale when allowFontScaling is enabled
+ * - minimumFontScale: Minimum scale when adjustsFontSizeToFit is enabled (iOS only)
+ *
+ * @example
+ * ```tsx
+ * <HeroText>Hello World</HeroText>
+ * ```
+ *
+ * @example
+ * With custom className:
+ * ```tsx
+ * <HeroText className="text-lg font-bold">Hello World</HeroText>
+ * ```
+ *
+ * @example
+ * Global configuration in HeroUINativeProvider:
+ * ```tsx
+ * <HeroUINativeProvider config={{
+ *   textProps: {
+ *     allowFontScaling: false,
+ *     adjustsFontSizeToFit: false,
+ *     maxFontSizeMultiplier: 1.5
+ *   }
+ * }}>
+ *   <App />
+ * </HeroUINativeProvider>
+ * ```
+ */
+export const HeroText = React.forwardRef<RNText, HeroTextProps>(
+  (props, ref) => {
+    const { className, ...restProps } = props;
+    const { textProps } = useTextComponent();
+
+    const mergedProps = Object.assign({}, textProps, restProps);
+
+    return (
+      <RNText
+        ref={ref}
+        className={cn('font-normal', className)}
+        {...mergedProps}
+      />
+    );
+  }
+);
+
+HeroText.displayName = 'HeroText';

package/src/helpers/components/index.ts

@@ -0,0 +1,5 @@
+export * from './bottom-sheet-content-container';
+export * from './check-icon';
+export * from './close-icon';
+export * from './full-window-overlay';
+export * from './hero-text';

package/src/helpers/contexts/animation-settings-context.tsx

@@ -0,0 +1,19 @@
+import { createContext } from '../utils';
+
+/**
+ * Context value for global animation settings
+ */
+export interface AnimationSettingsContextValue {
+  /**
+   * Whether all animations should be disabled (cascading from parent)
+   */
+  isAllAnimationsDisabled: boolean;
+}
+
+const [AnimationSettingsProvider, useAnimationSettings] =
+  createContext<AnimationSettingsContextValue>({
+    name: 'AnimationSettingsContext',
+    strict: false,
+  });
+
+export { AnimationSettingsProvider, useAnimationSettings };

package/src/helpers/contexts/index.ts

@@ -0,0 +1,5 @@
+export {
+  AnimationSettingsProvider,
+  useAnimationSettings,
+} from './animation-settings-context';
+export type { AnimationSettingsContextValue } from './animation-settings-context';

package/src/helpers/hooks/index.ts

@@ -0,0 +1,11 @@
+export * from './use-augmented-ref';
+export * from './use-combined-animation-disabled-state';
+export * from './use-controllable-state';
+export * from './use-keyboard-status';
+export * from './use-popup-bottom-sheet-content-animation';
+export * from './use-popup-dialog-content-animation';
+export * from './use-popup-overlay-animation';
+export * from './use-popup-popover-content-animation';
+export * from './use-popup-root-animation';
+export * from './use-relative-position';
+export * from './use-resolved-style-property';

package/src/helpers/hooks/use-augmented-ref.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { useImperativeHandle, useRef } from 'react';
+
+interface AugmentRefProps<T> {
+  ref: React.Ref<T>;
+  methods?: Record<string, (...args: any[]) => any>;
+  deps?: any[];
+}
+
+export function useAugmentedRef<T>({
+  ref,
+  methods,
+  deps = [],
+}: AugmentRefProps<T>) {
+  const augmentedRef = useRef<T>(null);
+
+  useImperativeHandle(
+    ref,
+    () => {
+      if (typeof augmentedRef === 'function' || !augmentedRef?.current) {
+        return {} as T;
+      }
+      return {
+        ...augmentedRef.current,
+        ...methods,
+      };
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    deps
+  );
+  return augmentedRef;
+}