@erquhart/heroui-native 1.0.0-beta.10.1

package/src/primitives/checkbox/checkbox.tsx

@@ -0,0 +1,121 @@
+import { createContext, forwardRef, useContext } from 'react';
+import { type GestureResponderEvent, Pressable, View } from 'react-native';
+import type {
+  PressableRef,
+  SlottablePressableProps,
+} from '../../helpers/types';
+import * as Slot from '../slot';
+import type {
+  IndicatorProps,
+  IndicatorRef,
+  RootProps,
+  RootRef,
+} from './checkbox.types';
+
+interface RootContext extends RootProps {
+  nativeID?: string;
+}
+
+const CheckboxContext = createContext<RootContext | null>(null);
+
+const Root = forwardRef<RootRef, RootProps>(
+  (
+    {
+      isDisabled = false,
+      isSelected,
+      onSelectedChange,
+      isInvalid = false,
+      isOnSurface,
+      nativeID,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <CheckboxContext.Provider
+        value={{
+          isDisabled,
+          isSelected,
+          onSelectedChange,
+          isInvalid,
+          isOnSurface,
+          nativeID,
+        }}
+      >
+        <Trigger ref={ref} {...props} />
+      </CheckboxContext.Provider>
+    );
+  }
+);
+
+Root.displayName = 'HeroUINative.Primitive.Checkbox.Root';
+
+function useCheckboxContext() {
+  const context = useContext(CheckboxContext);
+  if (!context) {
+    throw new Error(
+      'Checkbox compound components cannot be rendered outside the Checkbox component'
+    );
+  }
+  return context;
+}
+
+// --------------------------------------------------
+
+const Trigger = forwardRef<PressableRef, SlottablePressableProps>(
+  ({ asChild, onPress: onPressProp, ...props }, ref) => {
+    const { isDisabled, isSelected, onSelectedChange, nativeID } =
+      useCheckboxContext();
+
+    function onPress(ev: GestureResponderEvent) {
+      if (isDisabled) return;
+      const newValue = !isSelected;
+      onSelectedChange?.(newValue);
+      onPressProp?.(ev);
+    }
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+
+    return (
+      <Component
+        ref={ref}
+        nativeID={nativeID}
+        aria-disabled={isDisabled}
+        role="checkbox"
+        aria-checked={isSelected}
+        onPress={onPress}
+        accessibilityState={{
+          checked: isSelected,
+          disabled: isDisabled,
+        }}
+        disabled={isDisabled}
+        {...props}
+      />
+    );
+  }
+);
+
+Trigger.displayName = 'HeroUINative.Primitive.Checkbox.Trigger';
+
+// --------------------------------------------------
+
+const Indicator = forwardRef<IndicatorRef, IndicatorProps>(
+  ({ asChild, ...props }, ref) => {
+    const { isSelected, isDisabled } = useCheckboxContext();
+
+    const Component = asChild ? Slot.View : View;
+    return (
+      <Component
+        ref={ref}
+        aria-disabled={isDisabled}
+        aria-hidden={!isSelected}
+        role={'presentation'}
+        {...props}
+      />
+    );
+  }
+);
+
+Indicator.displayName = 'HeroUINative.Primitive.Checkbox.Indicator';
+
+export { Indicator, Root, useCheckboxContext };

package/src/primitives/checkbox/checkbox.types.ts

@@ -0,0 +1,39 @@
+import type {
+  PressableRef,
+  SlottablePressableProps,
+  SlottableViewProps,
+  ViewRef,
+} from '../../helpers/types';
+
+/**
+ * Props for the checkbox root component.
+ *
+ * @extends SlottablePressableProps Inherits pressable props except 'disabled'
+ */
+type RootProps = Omit<SlottablePressableProps, 'disabled'> & {
+  /** Whether the checkbox is currently selected */
+  isSelected?: boolean;
+  /** Callback fired when the checkbox selection state changes */
+  onSelectedChange?: (isSelected: boolean) => void;
+  /** Whether the checkbox is disabled and cannot be interacted with */
+  isDisabled?: boolean;
+  /** Whether the checkbox is in an invalid state */
+  isInvalid?: boolean;
+  /** Whether the checkbox is on surface */
+  isOnSurface?: boolean;
+};
+
+/**
+ * Props for the checkbox indicator component.
+ *
+ * @extends SlottableViewProps Inherits view props except 'disabled'
+ */
+type IndicatorProps = Omit<SlottableViewProps, 'disabled'>;
+
+/** Reference type for the checkbox root component */
+type RootRef = PressableRef;
+
+/** Reference type for the checkbox indicator component */
+type IndicatorRef = ViewRef;
+
+export type { IndicatorProps, IndicatorRef, RootProps, RootRef };

package/src/primitives/checkbox/index.ts

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

package/src/primitives/dialog/dialog.tsx

@@ -0,0 +1,274 @@
+import { createContext, forwardRef, useContext, useEffect, useId } from 'react';
+import {
+  BackHandler,
+  type GestureResponderEvent,
+  Pressable,
+  Text,
+  View,
+} from 'react-native';
+import { useControllableState } from '../../helpers/hooks';
+import { Portal as PortalPrimitive } from '../portal';
+import * as Slot from '../slot';
+import type {
+  CloseProps,
+  CloseRef,
+  ContentProps,
+  ContentRef,
+  DescriptionProps,
+  DescriptionRef,
+  OverlayProps,
+  OverlayRef,
+  PortalProps,
+  RootContext,
+  RootProps,
+  RootRef,
+  TitleProps,
+  TitleRef,
+  TriggerProps,
+  TriggerRef,
+} from './dialog.types';
+
+const DialogContext = createContext<
+  (RootContext & { nativeID: string }) | null
+>(null);
+
+const Root = forwardRef<RootRef, RootProps>(
+  (
+    {
+      asChild,
+      isOpen: isOpenProp,
+      isDefaultOpen,
+      onOpenChange: onOpenChangeProp,
+      ...viewProps
+    },
+    ref
+  ) => {
+    const [isOpen = false, onOpenChange] = useControllableState({
+      prop: isOpenProp,
+      defaultProp: isDefaultOpen,
+      onChange: onOpenChangeProp,
+    });
+
+    const nativeID = useId();
+
+    const Component = asChild ? Slot.View : View;
+
+    return (
+      <DialogContext.Provider
+        value={{
+          isOpen,
+          onOpenChange,
+          nativeID,
+        }}
+      >
+        <Component ref={ref} {...viewProps} />
+      </DialogContext.Provider>
+    );
+  }
+);
+
+function useRootContext() {
+  const context = useContext(DialogContext);
+  if (!context) {
+    throw new Error(
+      'Dialog compound components cannot be rendered outside the Dialog component'
+    );
+  }
+  return context;
+}
+
+Root.displayName = 'HeroUINative.Primitive.Dialog.Root';
+
+// --------------------------------------------------
+
+const Trigger = forwardRef<TriggerRef, TriggerProps>(
+  ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
+    const { isOpen, onOpenChange } = useRootContext();
+
+    function onPress(ev: GestureResponderEvent) {
+      if (disabled) return;
+      const newValue = !isOpen;
+      onOpenChange(newValue);
+      onPressProp?.(ev);
+    }
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return (
+      <Component
+        ref={ref}
+        aria-disabled={disabled ?? undefined}
+        role="button"
+        onPress={onPress}
+        disabled={disabled ?? undefined}
+        {...props}
+      />
+    );
+  }
+);
+
+Trigger.displayName = 'HeroUINative.Primitive.Dialog.Trigger';
+
+// --------------------------------------------------
+
+/**
+ * @warning when using a custom `<PortalHost />`, you might have to adjust the Content's offset to account for nav elements like headers.
+ */
+function Portal({ forceMount, hostName, children }: PortalProps) {
+  const value = useRootContext();
+
+  if (!forceMount) {
+    if (!value.isOpen) {
+      return null;
+    }
+  }
+
+  return (
+    <PortalPrimitive hostName={hostName} name={`${value.nativeID}_portal`}>
+      <DialogContext.Provider value={value}>{children}</DialogContext.Provider>
+    </PortalPrimitive>
+  );
+}
+
+// --------------------------------------------------
+
+const Overlay = forwardRef<OverlayRef, OverlayProps>(
+  (
+    {
+      asChild,
+      forceMount,
+      isCloseOnPress = true,
+      onPress: OnPressProp,
+      ...props
+    },
+    ref
+  ) => {
+    const { isOpen, onOpenChange } = useRootContext();
+
+    function onPress(ev: GestureResponderEvent) {
+      if (isCloseOnPress) {
+        onOpenChange(!isOpen);
+      }
+      OnPressProp?.(ev);
+    }
+
+    if (!forceMount) {
+      if (!isOpen) {
+        return null;
+      }
+    }
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return <Component ref={ref} onPress={onPress} {...props} />;
+  }
+);
+
+Overlay.displayName = 'HeroUINative.Primitive.Dialog.Overlay';
+
+// --------------------------------------------------
+
+const Content = forwardRef<ContentRef, ContentProps>(
+  ({ asChild, forceMount, ...props }, ref) => {
+    const { isOpen, nativeID, onOpenChange } = useRootContext();
+
+    useEffect(() => {
+      const backHandler = BackHandler.addEventListener(
+        'hardwareBackPress',
+        () => {
+          onOpenChange(false);
+          return true;
+        }
+      );
+
+      return () => {
+        backHandler.remove();
+      };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    if (!forceMount) {
+      if (!isOpen) {
+        return null;
+      }
+    }
+
+    const Component = asChild ? Slot.View : View;
+
+    return (
+      <Component
+        ref={ref}
+        role="dialog"
+        nativeID={nativeID}
+        aria-labelledby={`${nativeID}_label`}
+        aria-describedby={`${nativeID}_desc`}
+        aria-modal={true}
+        {...props}
+      />
+    );
+  }
+);
+
+Content.displayName = 'HeroUINative.Primitive.Dialog.Content';
+
+// --------------------------------------------------
+
+const Close = forwardRef<CloseRef, CloseProps>(
+  ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
+    const { onOpenChange } = useRootContext();
+
+    function onPress(ev: GestureResponderEvent) {
+      if (disabled) return;
+      onOpenChange(false);
+      onPressProp?.(ev);
+    }
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return (
+      <Component
+        ref={ref}
+        aria-disabled={disabled ?? undefined}
+        role="button"
+        onPress={onPress}
+        disabled={disabled ?? undefined}
+        {...props}
+      />
+    );
+  }
+);
+
+Close.displayName = 'HeroUINative.Primitive.Dialog.Close';
+
+// --------------------------------------------------
+
+const Title = forwardRef<TitleRef, TitleProps>((props, ref) => {
+  const { nativeID } = useRootContext();
+  return (
+    <Text ref={ref} role="heading" nativeID={`${nativeID}_label`} {...props} />
+  );
+});
+
+Title.displayName = 'HeroUINative.Primitive.Dialog.Title';
+
+// --------------------------------------------------
+
+const Description = forwardRef<DescriptionRef, DescriptionProps>(
+  (props, ref) => {
+    const { nativeID } = useRootContext();
+    return <Text ref={ref} nativeID={`${nativeID}_desc`} {...props} />;
+  }
+);
+
+Description.displayName = 'HeroUINative.Primitive.Dialog.Description';
+
+// --------------------------------------------------
+
+export {
+  Close,
+  Content,
+  Description,
+  Overlay,
+  Portal,
+  Root,
+  Title,
+  Trigger,
+  useRootContext,
+};

package/src/primitives/dialog/dialog.types.ts

@@ -0,0 +1,129 @@
+import type {
+  ForceMountable,
+  PressableRef,
+  SlottablePressableProps,
+  SlottableTextProps,
+  SlottableViewProps,
+  TextRef,
+  ViewRef,
+} from '../../helpers/types';
+
+/**
+ * Context for the dialog root component
+ */
+type RootContext = {
+  /** Whether the dialog is currently open */
+  isOpen: boolean;
+  /** Callback fired when the open state changes */
+  onOpenChange: (value: boolean) => void;
+};
+
+/**
+ * Props for the dialog root component
+ */
+type RootProps = SlottableViewProps & {
+  /** The controlled open state of the dialog */
+  isOpen?: boolean;
+  /** The open state of the dialog when initially rendered (uncontrolled) */
+  isDefaultOpen?: boolean;
+  /** Event handler called when the open state changes */
+  onOpenChange?: (value: boolean) => void;
+};
+
+/**
+ * Props for the dialog portal component
+ */
+interface PortalProps extends ForceMountable {
+  /** The content to be rendered in the portal */
+  children: React.ReactNode;
+  /** Optional portal host name to render into a specific portal container */
+  hostName?: string;
+}
+
+/**
+ * Props for the dialog overlay component
+ */
+type OverlayProps = ForceMountable &
+  SlottablePressableProps & {
+    /** Whether clicking the overlay should close the dialog */
+    isCloseOnPress?: boolean;
+  };
+
+/**
+ * Props for the dialog content component
+ */
+type ContentProps = ForceMountable & SlottableViewProps;
+
+/**
+ * Props for the dialog trigger component
+ */
+type TriggerProps = SlottablePressableProps;
+
+/**
+ * Props for the dialog close button component
+ */
+type CloseProps = SlottablePressableProps;
+
+/**
+ * Props for the dialog title component
+ */
+type TitleProps = SlottableTextProps;
+
+/**
+ * Props for the dialog description component
+ */
+type DescriptionProps = SlottableTextProps;
+
+/**
+ * Ref type for the dialog close button
+ */
+type CloseRef = PressableRef;
+
+/**
+ * Ref type for the dialog content
+ */
+type ContentRef = ViewRef;
+
+/**
+ * Ref type for the dialog description
+ */
+type DescriptionRef = TextRef;
+
+/**
+ * Ref type for the dialog overlay
+ */
+type OverlayRef = PressableRef;
+
+/**
+ * Ref type for the dialog root
+ */
+type RootRef = ViewRef;
+
+/**
+ * Ref type for the dialog title
+ */
+type TitleRef = TextRef;
+
+/**
+ * Ref type for the dialog trigger
+ */
+type TriggerRef = PressableRef;
+
+export type {
+  CloseProps,
+  CloseRef,
+  ContentProps,
+  ContentRef,
+  DescriptionProps,
+  DescriptionRef,
+  OverlayProps,
+  OverlayRef,
+  PortalProps,
+  RootContext,
+  RootProps,
+  RootRef,
+  TitleProps,
+  TitleRef,
+  TriggerProps,
+  TriggerRef,
+};

package/src/primitives/dialog/index.ts

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

package/src/primitives/label/index.ts

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

package/src/primitives/label/label.tsx

@@ -0,0 +1,24 @@
+import { forwardRef } from 'react';
+import { Pressable, Text as RNText } from 'react-native';
+import * as Slot from '../slot';
+import type { RootProps, RootRef, TextProps, TextRef } from './label.types';
+
+const Root = forwardRef<RootRef, RootProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot.Pressable : Pressable;
+
+  return <Component ref={ref} {...props} />;
+});
+
+Root.displayName = 'HeroUINative.Primitive.Label.Root';
+
+// --------------------------------------------------
+
+const Text = forwardRef<TextRef, TextProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot.Text : RNText;
+
+  return <Component ref={ref} {...props} />;
+});
+
+Text.displayName = 'HeroUINative.Primitive.Label.Text';
+
+export { Root, Text };

package/src/primitives/label/label.types.ts

@@ -0,0 +1,37 @@
+import type { ViewStyle } from 'react-native';
+import type {
+  PressableRef,
+  SlottablePressableProps,
+  SlottableTextProps,
+  TextRef,
+} from '../../helpers/types';
+
+/**
+ * Props for the label root component.
+ *
+ * @extends SlottablePressableProps Inherits pressable props except 'children', 'hitSlop', and 'style'
+ */
+type RootProps = Omit<
+  SlottablePressableProps,
+  'children' | 'hitSlop' | 'style'
+> & {
+  /** The content to be rendered inside the label */
+  children: React.ReactNode;
+  /** Style properties for the label container */
+  style?: ViewStyle;
+};
+
+/**
+ * Props for the label text component.
+ *
+ * @extends SlottableTextProps Inherits text props for slot-based styling
+ */
+type TextProps = SlottableTextProps & {
+  /** Equivalent to `id` so that the same value can be passed as `aria-labelledby` to the input element */
+  nativeID?: string;
+};
+
+/** Reference type for the label root component */
+type RootRef = PressableRef;
+
+export type { RootProps, RootRef, TextProps, TextRef };

package/src/primitives/popover/index.ts

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