@erquhart/heroui-native 1.0.0-beta.10.1

package/src/primitives/select/select.types.ts

@@ -0,0 +1,333 @@
+import type { LayoutRectangle } from 'react-native';
+import type { LayoutPosition } from '../../helpers/hooks';
+import type {
+  ForceMountable,
+  PositionedContentProps,
+  PressableRef,
+  SlottablePressableProps,
+  SlottableTextProps,
+  SlottableViewProps,
+  TextRef,
+  ViewRef,
+} from '../../helpers/types';
+
+/**
+ * Select internal state
+ */
+type SelectState = 'idle' | 'open' | 'close';
+
+/**
+ * Select option type
+ */
+type SelectOption =
+  | {
+      value: string;
+      label: string;
+    }
+  | undefined;
+
+/**
+ * Content sizing strategy
+ * - 'content-fit': Auto-size to content width (default)
+ * - 'trigger': Match trigger width exactly
+ * - 'full': 100% width
+ * - number: Fixed width in pixels
+ */
+type ContentSizing = 'trigger' | 'content-fit' | 'full' | number;
+
+/**
+ * Internal context interface for managing select state and positioning
+ */
+interface IRootContext {
+  /**
+   * Whether the select is currently open
+   */
+  isOpen: boolean;
+  /**
+   * Callback to change the open state of the select
+   */
+  onOpenChange: (open: boolean) => void;
+  /**
+   * Whether the select is default open
+   */
+  isDefaultOpen?: boolean;
+  /**
+   * Whether the select is disabled
+   */
+  isDisabled?: boolean;
+  /**
+   * The position of the trigger element relative to the viewport
+   */
+  triggerPosition: LayoutPosition | null;
+  /**
+   * Updates the trigger element's position
+   */
+  setTriggerPosition: (triggerPosition: LayoutPosition | null) => void;
+  /**
+   * The layout measurements of the select content
+   */
+  contentLayout: LayoutRectangle | null;
+  /**
+   * Updates the content layout measurements
+   */
+  setContentLayout: (contentLayout: LayoutRectangle | null) => void;
+  /**
+   * Unique identifier for the select instance
+   */
+  nativeID: string;
+  /**
+   * Delay in milliseconds before the select closes
+   */
+  closeDelay?: number;
+  /**
+   * The currently selected option
+   */
+  value: SelectOption;
+  /**
+   * Callback fired when the selected value changes
+   */
+  onValueChange: (option: SelectOption) => void;
+}
+
+/**
+ * Props for the Select Root component
+ */
+type RootProps = SlottableViewProps & {
+  /**
+   * The controlled selected value of the select
+   */
+  value?: SelectOption;
+  /**
+   * The default selected value (uncontrolled)
+   */
+  defaultValue?: SelectOption;
+  /**
+   * Callback fired when the selected value changes
+   * @param option - The newly selected option
+   */
+  onValueChange?: (option: SelectOption) => void;
+  /**
+   * The controlled open state of the select
+   */
+  isOpen?: boolean;
+  /**
+   * The open state of the select when initially rendered (uncontrolled)
+   */
+  isDefaultOpen?: boolean;
+  /**
+   * Callback fired when the select open state changes
+   * @param open - Whether the select is open or closed
+   */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * Delay in milliseconds before the select closes (for exit animations)
+   * @default 300
+   */
+  closeDelay?: number;
+  /**
+   * Whether the select is disabled
+   */
+  isDisabled?: boolean;
+};
+/**
+ * Props for the Select Portal component
+ */
+interface PortalProps extends ForceMountable {
+  /**
+   * The content to render within the portal
+   */
+  children: React.ReactNode;
+  /**
+   * Optional name of the host element for the portal
+   */
+  hostName?: string;
+}
+
+/**
+ * Props for the Select Overlay component
+ */
+type OverlayProps = ForceMountable &
+  SlottablePressableProps & {
+    /**
+     * Whether to close the select when the overlay is pressed
+     * @default true
+     */
+    closeOnPress?: boolean;
+  };
+
+/**
+ * Props for the Select Trigger component
+ */
+type TriggerProps = Omit<SlottablePressableProps, 'disabled'> & {
+  isDisabled?: boolean;
+};
+
+/**
+ * Props for the Select Content component
+ */
+type PopoverContentProps = SlottableViewProps &
+  PositionedContentProps & {
+    /**
+     * Content width sizing strategy
+     * - 'content-fit': Auto-size to content width (default)
+     * - 'trigger': Match trigger width exactly
+     * - 'full': 100% width
+     * - number: Fixed width in pixels
+     * @default 'content-fit'
+     */
+    width?: ContentSizing;
+  };
+
+/**
+ * Props for the dialog content component
+ */
+type DialogContentProps = ForceMountable & SlottableViewProps;
+
+/**
+ * Props for the Select Close component
+ */
+type CloseProps = SlottablePressableProps;
+
+/**
+ * Props for the Select Value component
+ */
+type ValueProps = SlottableTextProps & {
+  /**
+   * Placeholder text to show when no value is selected
+   */
+  placeholder: string;
+};
+
+/**
+ * Props for the Select Item component
+ */
+type ItemProps = SlottablePressableProps & {
+  /**
+   * The value of this item
+   */
+  value: string;
+  /**
+   * The label to display for this item
+   */
+  label: string;
+  /**
+   * Whether to close the select when this item is pressed
+   * @default true
+   */
+  closeOnPress?: boolean;
+};
+
+/**
+ * Props for the Select Item Label component
+ */
+type ItemLabelProps = Omit<SlottableTextProps, 'children'>;
+
+/**
+ * Props for the Select Item Indicator component
+ */
+type ItemIndicatorProps = SlottableViewProps & ForceMountable;
+
+/**
+ * Props for the Select Group component
+ */
+type GroupProps = SlottableViewProps;
+
+/**
+ * Props for the Select Group Label component
+ */
+type GroupLabelProps = SlottableTextProps;
+
+/**
+ * Ref type for the Select Close component
+ */
+type CloseRef = PressableRef;
+
+/**
+ * Ref type for the Select Content component
+ */
+type ContentRef = ViewRef;
+
+/**
+ * Ref type for the Select Overlay component
+ */
+type OverlayRef = PressableRef;
+
+/**
+ * Ref type for the Select Root component
+ */
+type RootRef = ViewRef;
+
+/**
+ * Ref type for the Select Trigger component
+ */
+type TriggerRef = PressableRef & {
+  /**
+   * Programmatically open the select
+   */
+  open: () => void;
+  /**
+   * Programmatically close the select
+   */
+  close: () => void;
+};
+
+/**
+ * Ref type for the Select Value component
+ */
+type ValueRef = TextRef;
+
+/**
+ * Ref type for the Select Item component
+ */
+type ItemRef = PressableRef;
+
+/**
+ * Ref type for the Select Item Label component
+ */
+type ItemLabelRef = TextRef;
+
+/**
+ * Ref type for the Select Item Indicator component
+ */
+type ItemIndicatorRef = ViewRef;
+
+/**
+ * Ref type for the Select Group component
+ */
+type GroupRef = ViewRef;
+
+/**
+ * Ref type for the Select Group Label component
+ */
+type GroupLabelRef = TextRef;
+
+export type {
+  CloseProps,
+  CloseRef,
+  ContentRef,
+  ContentSizing,
+  DialogContentProps,
+  GroupLabelProps,
+  GroupLabelRef,
+  GroupProps,
+  GroupRef,
+  IRootContext,
+  ItemIndicatorProps,
+  ItemIndicatorRef,
+  ItemLabelProps,
+  ItemLabelRef,
+  ItemProps,
+  ItemRef,
+  OverlayProps,
+  OverlayRef,
+  PopoverContentProps,
+  PortalProps,
+  RootProps,
+  RootRef,
+  SelectOption,
+  SelectState,
+  TriggerProps,
+  TriggerRef,
+  ValueProps,
+  ValueRef,
+};

package/src/primitives/slot/index.ts

@@ -0,0 +1 @@
+export * from './slot';

package/src/primitives/slot/slot.tsx

@@ -0,0 +1,121 @@
+import {
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  type ComponentPropsWithoutRef,
+  type ComponentRef,
+} from 'react';
+import {
+  Image as RNImage,
+  Pressable as RNPressable,
+  Text as RNText,
+  View as RNView,
+  type PressableProps as RNPressableProps,
+  type TextProps as RNTextProps,
+  type ViewProps as RNViewProps,
+} from 'react-native';
+import type { AnyProps, ImageSlotProps } from './types';
+import { composeRefs, isTextChildren, mergeProps } from './utils';
+
+// --------------------------------------------------
+
+const Pressable = forwardRef<
+  React.ComponentRef<typeof RNPressable>,
+  RNPressableProps
+>((props, forwardedRef) => {
+  const { children, ...pressableSlotProps } = props;
+
+  if (!isValidElement(children)) {
+    console.log('Slot.Pressable - Invalid asChild element', children);
+    return null;
+  }
+
+  return cloneElement<
+    React.ComponentPropsWithoutRef<typeof RNPressable>,
+    React.ComponentRef<typeof RNPressable>
+  >(isTextChildren(children) ? <></> : children, {
+    ...mergeProps(pressableSlotProps, children.props as AnyProps),
+    ref: forwardedRef
+      ? composeRefs(forwardedRef, (children as any).ref)
+      : (children as any).ref,
+  });
+});
+
+Pressable.displayName = 'HeroUINative.Primitive.Slot.Pressable';
+
+// --------------------------------------------------
+
+const View = forwardRef<React.ComponentRef<typeof RNView>, RNViewProps>(
+  (props, forwardedRef) => {
+    const { children, ...viewSlotProps } = props;
+
+    if (!isValidElement(children)) {
+      console.log('Slot.View - Invalid asChild element', children);
+      return null;
+    }
+
+    return cloneElement<
+      ComponentPropsWithoutRef<typeof RNView>,
+      ComponentRef<typeof RNView>
+    >(isTextChildren(children) ? <></> : children, {
+      ...mergeProps(viewSlotProps, children.props as AnyProps),
+      ref: forwardedRef
+        ? composeRefs(forwardedRef, (children as any).ref)
+        : (children as any).ref,
+    });
+  }
+);
+
+View.displayName = 'HeroUINative.Primitive.Slot.View';
+
+// --------------------------------------------------
+
+const Text = forwardRef<ComponentRef<typeof RNText>, RNTextProps>(
+  (props, forwardedRef) => {
+    const { children, ...textSlotProps } = props;
+
+    if (!isValidElement(children)) {
+      console.log('Slot.Text - Invalid asChild element', children);
+      return null;
+    }
+
+    return cloneElement<
+      React.ComponentPropsWithoutRef<typeof RNText>,
+      React.ComponentRef<typeof RNText>
+    >(isTextChildren(children) ? <></> : children, {
+      ...mergeProps(textSlotProps, children.props as AnyProps),
+      ref: forwardedRef
+        ? composeRefs(forwardedRef, (children as any).ref)
+        : (children as any).ref,
+    });
+  }
+);
+
+Text.displayName = 'HeroUINative.Primitive.Slot.Text';
+
+// --------------------------------------------------
+
+const Image = forwardRef<ComponentRef<typeof RNImage>, ImageSlotProps>(
+  (props, forwardedRef) => {
+    const { children, ...imageSlotProps } = props;
+
+    if (!isValidElement(children)) {
+      console.log('Slot.Image - Invalid asChild element', children);
+      return null;
+    }
+
+    return cloneElement<
+      ComponentPropsWithoutRef<typeof RNImage>,
+      ComponentRef<typeof RNImage>
+    >(isTextChildren(children) ? <></> : children, {
+      ...mergeProps(imageSlotProps, children.props as AnyProps),
+      ref: forwardedRef
+        ? composeRefs(forwardedRef, (children as any).ref)
+        : (children as any).ref,
+    });
+  }
+);
+
+Image.displayName = 'HeroUINative.Primitive.Slot.Image';
+
+export { Image, Pressable, Text, View };

package/src/primitives/slot/types.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import {
+  type ImageProps as RNImageProps,
+  type ImageStyle as RNImageStyle,
+  type PressableProps as RNPressableProps,
+  type StyleProp,
+} from 'react-native';
+
+type AnyProps = Record<string, any>;
+
+type ImageSlotProps = RNImageProps & {
+  children?: React.ReactNode;
+};
+
+type PressableStyle = RNPressableProps['style'];
+type ImageStyle = StyleProp<RNImageStyle>;
+type Style = PressableStyle | ImageStyle;
+
+export type { AnyProps, ImageSlotProps, ImageStyle, PressableStyle, Style };

package/src/primitives/slot/utils.ts

@@ -0,0 +1,90 @@
+import { StyleSheet, type PressableStateCallbackType } from 'react-native';
+import type { AnyProps, Style } from './types';
+
+// --------------------------------------------------
+
+export function isTextChildren(
+  children:
+    | React.ReactNode
+    | ((state: PressableStateCallbackType) => React.ReactNode)
+) {
+  return Array.isArray(children)
+    ? children.every((child) => typeof child === 'string')
+    : typeof children === 'string';
+}
+
+// --------------------------------------------------
+
+export function composeRefs<T>(...refs: (React.Ref<T> | undefined)[]) {
+  return (node: T) =>
+    refs.forEach((ref) => {
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref != null) {
+        (ref as React.MutableRefObject<T>).current = node;
+      }
+    });
+}
+
+// --------------------------------------------------
+
+export function mergeProps(slotProps: AnyProps, childProps: AnyProps) {
+  // all child props should override
+  const overrideProps = { ...childProps };
+
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      // if the handler exists on both, we compose them
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args: unknown[]) => {
+          childPropValue(...args);
+          slotPropValue(...args);
+        };
+      }
+      // but if it exists only on the slot, we use only this one
+      else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
+      }
+    }
+    // if it's `style`, we merge them
+    else if (propName === 'style') {
+      overrideProps[propName] = combineStyles(slotPropValue, childPropValue);
+    } else if (propName === 'className') {
+      overrideProps[propName] = [slotPropValue, childPropValue]
+        .filter(Boolean)
+        .join(' ');
+    }
+  }
+
+  return { ...slotProps, ...overrideProps };
+}
+
+// --------------------------------------------------
+
+function combineStyles(slotStyle?: Style, childValue?: Style) {
+  if (typeof slotStyle === 'function' && typeof childValue === 'function') {
+    return (state: PressableStateCallbackType) => {
+      return StyleSheet.flatten([slotStyle(state), childValue(state)]);
+    };
+  }
+  if (typeof slotStyle === 'function') {
+    return (state: PressableStateCallbackType) => {
+      return childValue
+        ? StyleSheet.flatten([slotStyle(state), childValue])
+        : slotStyle(state);
+    };
+  }
+  if (typeof childValue === 'function') {
+    return (state: PressableStateCallbackType) => {
+      return slotStyle
+        ? StyleSheet.flatten([slotStyle, childValue(state)])
+        : childValue(state);
+    };
+  }
+
+  return StyleSheet.flatten([slotStyle, childValue].filter(Boolean));
+}

package/src/primitives/switch/index.ts

@@ -0,0 +1,2 @@
+export * from './switch';
+export * from './switch.types';

package/src/primitives/switch/switch.tsx

@@ -0,0 +1,61 @@
+import { forwardRef } from 'react';
+import { Pressable, View, type GestureResponderEvent } from 'react-native';
+import * as Slot from '../slot';
+import type { RootProps, RootRef, ThumbProps, ThumbRef } from './switch.types';
+
+// --------------------------------------------------
+
+const Root = forwardRef<RootRef, RootProps>(
+  (
+    {
+      asChild,
+      isSelected,
+      onSelectedChange,
+      isDisabled,
+      'onPress': onPressProp,
+      'aria-valuetext': ariaValueText,
+      ...props
+    },
+    ref
+  ) => {
+    function onPress(ev: GestureResponderEvent) {
+      if (isDisabled) return;
+      const newValue = !isSelected;
+      onSelectedChange?.(newValue);
+      onPressProp?.(ev);
+    }
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+
+    return (
+      <Component
+        ref={ref}
+        aria-disabled={isDisabled}
+        role="switch"
+        aria-checked={isSelected}
+        aria-valuetext={(ariaValueText ?? isSelected) ? 'on' : 'off'}
+        onPress={onPress}
+        accessibilityState={{
+          checked: isSelected,
+          disabled: isDisabled,
+        }}
+        disabled={isDisabled}
+        {...props}
+      />
+    );
+  }
+);
+
+Root.displayName = 'HeroUINative.Primitive.Switch.Root';
+
+// --------------------------------------------------
+
+const Thumb = forwardRef<ThumbRef, ThumbProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot.View : View;
+
+  return <Component ref={ref} role="presentation" {...props} />;
+});
+
+Thumb.displayName = 'HeroUINative.Primitive.Switch.Thumb';
+
+export { Root, Thumb };

package/src/primitives/switch/switch.types.ts

@@ -0,0 +1,55 @@
+import type {
+  PressableRef,
+  SlottablePressableProps,
+  SlottableViewProps,
+  ViewRef,
+} from '../../helpers/types';
+
+/**
+ * Props for the primitive Root Switch component
+ * Extends SlottablePressableProps to support slot-based styling and pressable behavior
+ */
+interface RootProps extends Omit<SlottablePressableProps, 'disabled'> {
+  /**
+   * Whether the switch is currently selected/checked
+   * @type {boolean}
+   */
+  isSelected?: boolean;
+
+  /**
+   * Callback function fired when the switch selection state changes
+   * @param {boolean} isSelected - The new selection state
+   * @type {(isSelected: boolean) => void}
+   */
+  onSelectedChange?: (isSelected: boolean) => void;
+
+  /**
+   * Whether the switch is disabled and cannot be interacted with
+   * @type {boolean | undefined}
+   * @default false
+   */
+  isDisabled?: boolean;
+}
+
+/**
+ * Props for the primitive Switch Thumb component
+ * Extends SlottableViewProps to support slot-based styling for the thumb element
+ * @type {SlottableViewProps}
+ */
+type ThumbProps = SlottableViewProps;
+
+/**
+ * Ref type for the primitive Root Switch component
+ * Uses PressableRef since the root element is a Pressable component
+ * @type {PressableRef}
+ */
+type RootRef = PressableRef;
+
+/**
+ * Ref type for the primitive Switch Thumb component
+ * Uses ViewRef since the thumb element is a View component
+ * @type {ViewRef}
+ */
+type ThumbRef = ViewRef;
+
+export type { RootProps, RootRef, ThumbProps, ThumbRef };

package/src/primitives/tabs/index.ts

@@ -0,0 +1,2 @@
+export * from './tabs';
+export * from './tabs.types';