@react-native-reusables/cli 0.0.18 → 0.1.1

package/__generated/components/primitives/alert-dialog/alert-dialog.tsx

@@ -1,237 +0,0 @@
-import { useControllableState } from '@rnr/hooks';
-import { Portal as RNPPortal } from '@rnr/portal';
-import * as Slot from '@rnr/slot';
-import type {
-  PressableRef,
-  SlottablePressableProps,
-  SlottableTextProps,
-  SlottableViewProps,
-  TextRef,
-  ViewRef,
-} from '@rnr/types';
-import * as React from 'react';
-import { BackHandler, Pressable, Text, View, type GestureResponderEvent } from 'react-native';
-import type {
-  AlertDialogContentProps,
-  AlertDialogOverlayProps,
-  AlertDialogPortalProps,
-  AlertDialogRootProps,
-  RootContext,
-} from './types';
-
-const AlertDialogContext = React.createContext<(RootContext & { nativeID: string }) | null>(null);
-
-const Root = React.forwardRef<ViewRef, SlottableViewProps & AlertDialogRootProps>(
-  ({ asChild, open: openProp, defaultOpen, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
-    const nativeID = React.useId();
-    const [open = false, onOpenChange] = useControllableState({
-      prop: openProp,
-      defaultProp: defaultOpen,
-      onChange: onOpenChangeProp,
-    });
-    const Component = asChild ? Slot.View : View;
-    return (
-      <AlertDialogContext.Provider
-        value={{
-          open,
-          onOpenChange,
-          nativeID,
-        }}
-      >
-        <Component ref={ref} {...viewProps} />
-      </AlertDialogContext.Provider>
-    );
-  }
-);
-
-Root.displayName = 'RootNativeAlertDialog';
-
-function useRootContext() {
-  const context = React.useContext(AlertDialogContext);
-  if (!context) {
-    throw new Error(
-      'AlertDialog compound components cannot be rendered outside the AlertDialog component'
-    );
-  }
-  return context;
-}
-
-const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
-  ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
-    const { open: value, onOpenChange } = useRootContext();
-
-    function onPress(ev: GestureResponderEvent) {
-      onOpenChange(!value);
-      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 = 'TriggerNativeAlertDialog';
-
-/**
- * @warning when using a custom `<PortalHost />`, you might have to adjust the Content's sideOffset to account for nav elements like headers.
- */
-function Portal({ forceMount, hostName, children }: AlertDialogPortalProps) {
-  const value = useRootContext();
-
-  if (!forceMount) {
-    if (!value.open) {
-      return null;
-    }
-  }
-
-  return (
-    <RNPPortal hostName={hostName} name={`${value.nativeID}_portal`}>
-      <AlertDialogContext.Provider value={value}>{children}</AlertDialogContext.Provider>
-    </RNPPortal>
-  );
-}
-
-const Overlay = React.forwardRef<ViewRef, SlottableViewProps & AlertDialogOverlayProps>(
-  ({ asChild, forceMount, ...props }, ref) => {
-    const { open: value } = useRootContext();
-
-    if (!forceMount) {
-      if (!value) {
-        return null;
-      }
-    }
-
-    const Component = asChild ? Slot.View : View;
-    return <Component ref={ref} {...props} />;
-  }
-);
-
-Overlay.displayName = 'OverlayNativeAlertDialog';
-
-const Content = React.forwardRef<ViewRef, SlottableViewProps & AlertDialogContentProps>(
-  ({ asChild, forceMount, ...props }, ref) => {
-    const { open: value, nativeID, onOpenChange } = useRootContext();
-
-    React.useEffect(() => {
-      const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
-        onOpenChange(false);
-        return true;
-      });
-
-      return () => {
-        backHandler.remove();
-      };
-    }, []);
-
-    if (!forceMount) {
-      if (!value) {
-        return null;
-      }
-    }
-
-    const Component = asChild ? Slot.View : View;
-    return (
-      <Component
-        ref={ref}
-        role='alertdialog'
-        nativeID={nativeID}
-        aria-labelledby={`${nativeID}_label`}
-        aria-describedby={`${nativeID}_desc`}
-        aria-modal={true}
-        {...props}
-      />
-    );
-  }
-);
-
-Content.displayName = 'ContentNativeAlertDialog';
-
-const Cancel = React.forwardRef<PressableRef, SlottablePressableProps>(
-  ({ 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}
-      />
-    );
-  }
-);
-
-Cancel.displayName = 'CloseNativeAlertDialog';
-
-const Action = React.forwardRef<PressableRef, SlottablePressableProps>(
-  ({ 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}
-      />
-    );
-  }
-);
-
-Action.displayName = 'ActionNativeAlertDialog';
-
-const Title = React.forwardRef<TextRef, SlottableTextProps>(({ asChild, ...props }, ref) => {
-  const { nativeID } = useRootContext();
-  const Component = asChild ? Slot.Text : Text;
-  return <Component ref={ref} role='heading' nativeID={`${nativeID}_label`} {...props} />;
-});
-
-Title.displayName = 'TitleNativeAlertDialog';
-
-const Description = React.forwardRef<TextRef, SlottableTextProps>(({ asChild, ...props }, ref) => {
-  const { nativeID } = useRootContext();
-  const Component = asChild ? Slot.Text : Text;
-  return <Component ref={ref} nativeID={`${nativeID}_desc`} {...props} />;
-});
-
-Description.displayName = 'DescriptionNativeAlertDialog';
-
-export {
-  Action,
-  Cancel,
-  Content,
-  Description,
-  Overlay,
-  Portal,
-  Root,
-  Title,
-  Trigger,
-  useRootContext,
-};

package/__generated/components/primitives/alert-dialog/alert-dialog.web.tsx

@@ -1,256 +0,0 @@
-import * as AlertDialog from '@radix-ui/react-alert-dialog';
-import * as React from 'react';
-import { Pressable, Text, View, type GestureResponderEvent } from 'react-native';
-import { useAugmentedRef, useControllableState } from '@rnr/hooks';
-import * as Slot from '@rnr/slot';
-import type {
-  PressableRef,
-  SlottablePressableProps,
-  SlottableTextProps,
-  SlottableViewProps,
-  TextRef,
-  ViewRef,
-} from '@rnr/types';
-import type {
-  AlertDialogContentProps,
-  AlertDialogOverlayProps,
-  AlertDialogPortalProps,
-  AlertDialogRootProps,
-  RootContext,
-} from './types';
-
-const AlertDialogContext = React.createContext<RootContext | null>(null);
-
-const Root = React.forwardRef<ViewRef, SlottableViewProps & AlertDialogRootProps>(
-  ({ asChild, open: openProp, defaultOpen, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
-    const [open = false, onOpenChange] = useControllableState({
-      prop: openProp,
-      defaultProp: defaultOpen,
-      onChange: onOpenChangeProp,
-    });
-    const Component = asChild ? Slot.View : View;
-    return (
-      <AlertDialogContext.Provider value={{ open, onOpenChange }}>
-        <AlertDialog.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
-          <Component ref={ref} {...viewProps} />
-        </AlertDialog.Root>
-      </AlertDialogContext.Provider>
-    );
-  }
-);
-
-Root.displayName = 'RootAlertWebDialog';
-
-function useRootContext() {
-  const context = React.useContext(AlertDialogContext);
-  if (!context) {
-    throw new Error(
-      'AlertDialog compound components cannot be rendered outside the AlertDialog component'
-    );
-  }
-  return context;
-}
-
-const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
-  ({ asChild, onPress: onPressProp, role: _role, disabled, ...props }, ref) => {
-    const augmentedRef = useAugmentedRef({ ref });
-    const { onOpenChange, open } = useRootContext();
-    function onPress(ev: GestureResponderEvent) {
-      if (onPressProp) {
-        onPressProp(ev);
-      }
-      onOpenChange(!open);
-    }
-
-    React.useLayoutEffect(() => {
-      if (augmentedRef.current) {
-        const augRef = augmentedRef.current as unknown as HTMLButtonElement;
-        augRef.dataset.state = open ? 'open' : 'closed';
-        augRef.type = 'button';
-      }
-    }, [open]);
-
-    const Component = asChild ? Slot.Pressable : Pressable;
-    return (
-      <AlertDialog.Trigger disabled={disabled ?? undefined} asChild>
-        <Component
-          ref={augmentedRef}
-          onPress={onPress}
-          role='button'
-          disabled={disabled}
-          {...props}
-        />
-      </AlertDialog.Trigger>
-    );
-  }
-);
-
-Trigger.displayName = 'TriggerAlertWebDialog';
-
-function Portal({ forceMount, container, children }: AlertDialogPortalProps) {
-  return <AlertDialog.Portal forceMount={forceMount} children={children} container={container} />;
-}
-
-const Overlay = React.forwardRef<ViewRef, SlottableViewProps & AlertDialogOverlayProps>(
-  ({ asChild, forceMount, ...props }, ref) => {
-    const Component = asChild ? Slot.View : View;
-    return (
-      <AlertDialog.Overlay forceMount={forceMount}>
-        <Component ref={ref} {...props} />
-      </AlertDialog.Overlay>
-    );
-  }
-);
-
-Overlay.displayName = 'OverlayAlertWebDialog';
-
-const Content = React.forwardRef<ViewRef, SlottableViewProps & AlertDialogContentProps>(
-  (
-    {
-      asChild,
-      forceMount,
-
-      onOpenAutoFocus,
-      onCloseAutoFocus,
-      onEscapeKeyDown,
-      ...props
-    },
-    ref
-  ) => {
-    const augmentedRef = useAugmentedRef({ ref });
-    const { open } = useRootContext();
-
-    React.useLayoutEffect(() => {
-      if (augmentedRef.current) {
-        const augRef = augmentedRef.current as unknown as HTMLDivElement;
-        augRef.dataset.state = open ? 'open' : 'closed';
-      }
-    }, [open]);
-
-    const Component = asChild ? Slot.View : View;
-    return (
-      <AlertDialog.Content
-        onOpenAutoFocus={onOpenAutoFocus}
-        onCloseAutoFocus={onCloseAutoFocus}
-        onEscapeKeyDown={onEscapeKeyDown}
-        forceMount={forceMount}
-        asChild
-      >
-        <Component ref={augmentedRef} {...props} />
-      </AlertDialog.Content>
-    );
-  }
-);
-
-Content.displayName = 'ContentAlertWebDialog';
-
-const Cancel = React.forwardRef<PressableRef, SlottablePressableProps>(
-  ({ asChild, onPress: onPressProp, disabled, ...props }, ref) => {
-    const augmentedRef = useAugmentedRef({ ref });
-    const { onOpenChange, open } = useRootContext();
-
-    function onPress(ev: GestureResponderEvent) {
-      if (onPressProp) {
-        onPressProp(ev);
-      }
-      onOpenChange(!open);
-    }
-
-    React.useLayoutEffect(() => {
-      if (augmentedRef.current) {
-        const augRef = augmentedRef.current as unknown as HTMLButtonElement;
-        augRef.type = 'button';
-      }
-    }, []);
-
-    const Component = asChild ? Slot.Pressable : Pressable;
-    return (
-      <>
-        <AlertDialog.Cancel disabled={disabled ?? undefined} asChild>
-          <Component
-            ref={augmentedRef}
-            onPress={onPress}
-            role='button'
-            disabled={disabled}
-            {...props}
-          />
-        </AlertDialog.Cancel>
-      </>
-    );
-  }
-);
-
-Cancel.displayName = 'CancelAlertWebDialog';
-
-const Action = React.forwardRef<PressableRef, SlottablePressableProps>(
-  ({ asChild, onPress: onPressProp, disabled, ...props }, ref) => {
-    const augmentedRef = useAugmentedRef({ ref });
-    const { onOpenChange, open } = useRootContext();
-
-    function onPress(ev: GestureResponderEvent) {
-      if (onPressProp) {
-        onPressProp(ev);
-      }
-      onOpenChange(!open);
-    }
-
-    React.useLayoutEffect(() => {
-      if (augmentedRef.current) {
-        const augRef = augmentedRef.current as unknown as HTMLButtonElement;
-        augRef.type = 'button';
-      }
-    }, []);
-
-    const Component = asChild ? Slot.Pressable : Pressable;
-    return (
-      <>
-        <AlertDialog.Action disabled={disabled ?? undefined} asChild>
-          <Component
-            ref={augmentedRef}
-            onPress={onPress}
-            role='button'
-            disabled={disabled}
-            {...props}
-          />
-        </AlertDialog.Action>
-      </>
-    );
-  }
-);
-
-Action.displayName = 'ActionAlertWebDialog';
-
-const Title = React.forwardRef<TextRef, SlottableTextProps>(({ asChild, ...props }, ref) => {
-  const Component = asChild ? Slot.Text : Text;
-  return (
-    <AlertDialog.Title asChild>
-      <Component ref={ref} {...props} />
-    </AlertDialog.Title>
-  );
-});
-
-Title.displayName = 'TitleAlertWebDialog';
-
-const Description = React.forwardRef<TextRef, SlottableTextProps>(({ asChild, ...props }, ref) => {
-  const Component = asChild ? Slot.Text : Text;
-  return (
-    <AlertDialog.Description asChild>
-      <Component ref={ref} {...props} />
-    </AlertDialog.Description>
-  );
-});
-
-Description.displayName = 'DescriptionAlertWebDialog';
-
-export {
-  Action,
-  Cancel,
-  Content,
-  Description,
-  Overlay,
-  Portal,
-  Root,
-  Title,
-  Trigger,
-  useRootContext,
-};

package/__generated/components/primitives/alert-dialog/index.ts

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

package/__generated/components/primitives/alert-dialog/types.ts

@@ -1,48 +0,0 @@
-import type { ForceMountable } from '@rnr/types';
-
-type AlertDialogRootProps = {
-  open?: boolean;
-  onOpenChange?: (value: boolean) => void;
-  defaultOpen?: boolean;
-};
-
-interface RootContext {
-  open: boolean;
-  onOpenChange: (value: boolean) => void;
-}
-
-interface AlertDialogPortalProps extends ForceMountable {
-  children: React.ReactNode;
-  /**
-   * Platform: NATIVE ONLY
-   */
-  hostName?: string;
-  /**
-   * Platform: WEB ONLY
-   */
-  container?: HTMLElement | null | undefined;
-}
-type AlertDialogOverlayProps = ForceMountable;
-
-type AlertDialogContentProps = ForceMountable & {
-  /**
-   * Platform: WEB ONLY
-   */
-  onOpenAutoFocus?: (ev: Event) => void;
-  /**
-   * Platform: WEB ONLY
-   */
-  onCloseAutoFocus?: (ev: Event) => void;
-  /**
-   * Platform: WEB ONLY
-   */
-  onEscapeKeyDown?: (ev: Event) => void;
-};
-
-export type {
-  AlertDialogRootProps,
-  AlertDialogPortalProps,
-  AlertDialogOverlayProps,
-  AlertDialogContentProps,
-  RootContext,
-};

package/__generated/components/primitives/aspect-ratio.tsx

@@ -1,23 +0,0 @@
-import * as React from 'react';
-import { View, type ViewStyle } from 'react-native';
-import * as Slot from '@rnr/slot';
-import type { SlottableViewProps } from '@rnr/types';
-
-interface AspectRatioRootProps {
-  ratio?: number;
-  style?: ViewStyle;
-}
-
-export type { AspectRatioRootProps };
-
-const Root = React.forwardRef<
-  React.ElementRef<typeof View>,
-  Omit<SlottableViewProps, 'style'> & AspectRatioRootProps
->(({ asChild, ratio = 1, style, ...props }, ref) => {
-  const Component = asChild ? Slot.View : View;
-  return <Component ref={ref} style={[style, { aspectRatio: ratio }]} {...props} />;
-});
-
-Root.displayName = 'RootAspectRatio';
-
-export { Root };

package/__generated/components/primitives/avatar/index.tsx

@@ -1,95 +0,0 @@
-import * as React from 'react';
-import {
-  ImageErrorEventData,
-  ImageLoadEventData,
-  NativeSyntheticEvent,
-  Image as RNImage,
-  View,
-} from 'react-native';
-import * as Slot from '@rnr/slot';
-import { ComponentPropsWithAsChild, SlottableViewProps, ViewRef } from '@rnr/types';
-import { AvatarImageProps, AvatarRootProps } from './types';
-
-type AvatarState = 'loading' | 'error' | 'loaded';
-
-interface IRootContext extends AvatarRootProps {
-  status: AvatarState;
-  setStatus: (status: AvatarState) => void;
-}
-
-const RootContext = React.createContext<IRootContext | null>(null);
-
-const Root = React.forwardRef<ViewRef, SlottableViewProps & AvatarRootProps>(
-  ({ asChild, alt, ...viewProps }, ref) => {
-    const [status, setStatus] = React.useState<AvatarState>('loading');
-    const Component = asChild ? Slot.View : View;
-    return (
-      <RootContext.Provider value={{ alt, status, setStatus }}>
-        <Component ref={ref} {...viewProps} />
-      </RootContext.Provider>
-    );
-  }
-);
-
-Root.displayName = 'RootAvatar';
-
-function useRootContext() {
-  const context = React.useContext(RootContext);
-  if (!context) {
-    throw new Error('Avatar compound components cannot be rendered outside the Avatar component');
-  }
-  return context;
-}
-
-const Image = React.forwardRef<
-  React.ElementRef<typeof RNImage>,
-  Omit<ComponentPropsWithAsChild<typeof RNImage>, 'alt'> & AvatarImageProps
->(
-  (
-    { asChild, onLoad: onLoadProps, onError: onErrorProps, onLoadingStatusChange, ...props },
-    ref
-  ) => {
-    const { alt, setStatus, status } = useRootContext();
-
-    const onLoad = React.useCallback(
-      (e: NativeSyntheticEvent<ImageLoadEventData>) => {
-        setStatus('loaded');
-        onLoadingStatusChange?.('loaded');
-        onLoadProps?.(e);
-      },
-      [onLoadProps]
-    );
-
-    const onError = React.useCallback(
-      (e: NativeSyntheticEvent<ImageErrorEventData>) => {
-        setStatus('error');
-        onLoadingStatusChange?.('error');
-        onErrorProps?.(e);
-      },
-      [onErrorProps]
-    );
-
-    if (status === 'error') {
-      return null;
-    }
-
-    const Component = asChild ? Slot.Image : RNImage;
-    return <Component ref={ref} alt={alt} onLoad={onLoad} onError={onError} {...props} />;
-  }
-);
-
-Image.displayName = 'ImageAvatar';
-
-const Fallback = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
-  const { alt, status } = useRootContext();
-
-  if (status !== 'error') {
-    return null;
-  }
-  const Component = asChild ? Slot.View : View;
-  return <Component ref={ref} role={'img'} aria-label={alt} {...props} />;
-});
-
-Fallback.displayName = 'FallbackAvatar';
-
-export { Fallback, Image, Root };

package/__generated/components/primitives/avatar/types.ts

@@ -1,10 +0,0 @@
-interface AvatarRootProps {
-  alt: string;
-}
-
-interface AvatarImageProps {
-  children?: React.ReactNode;
-  onLoadingStatusChange?: (status: 'error' | 'loaded') => void;
-}
-
-export type { AvatarRootProps, AvatarImageProps };