@react-native-reusables/cli 0.0.18 → 0.1.0

package/__generated/components/primitives/toolbar/toolbar.web.tsx

@@ -1,129 +0,0 @@
-import * as Toolbar from '@radix-ui/react-toolbar';
-import * as React from 'react';
-import { Pressable, View, type GestureResponderEvent } from 'react-native';
-import * as Slot from '@rnr/slot';
-import type {
-  PressableRef,
-  SlottablePressableProps,
-  SlottableViewProps,
-  ViewRef,
-} from '@rnr/types';
-import { ToggleGroupUtils } from '@rnr/utils';
-import type { ToolbarRootProps, ToolbarToggleGroupProps, ToolbarToggleItem } from './types';
-
-const Root = React.forwardRef<ViewRef, SlottableViewProps & ToolbarRootProps>(
-  ({ asChild, orientation, dir, loop, ...props }, ref) => {
-    const Component = asChild ? Slot.View : View;
-    return (
-      <Toolbar.Root orientation={orientation} dir={dir} loop={loop} asChild>
-        <Component ref={ref} {...props} />
-      </Toolbar.Root>
-    );
-  }
-);
-
-Root.displayName = 'RootWebToolbar';
-
-const ToggleGroupContext = React.createContext<ToolbarToggleGroupProps | null>(null);
-
-const ToggleGroup = React.forwardRef<ViewRef, SlottableViewProps & ToolbarToggleGroupProps>(
-  ({ asChild, type, value, onValueChange, disabled = false, ...viewProps }, ref) => {
-    const Component = asChild ? Slot.View : View;
-    return (
-      <ToggleGroupContext.Provider
-        value={
-          {
-            type,
-            value,
-            disabled,
-            onValueChange,
-          } as ToolbarToggleGroupProps
-        }
-      >
-        <Toolbar.ToggleGroup
-          type={type as any}
-          value={value as any}
-          onValueChange={onValueChange as any}
-          disabled={disabled}
-          asChild
-        >
-          <Component ref={ref} {...viewProps} />
-        </Toolbar.ToggleGroup>
-      </ToggleGroupContext.Provider>
-    );
-  }
-);
-
-ToggleGroup.displayName = 'ToggleGroupWebToolbar';
-
-function useToggleGroupContext() {
-  const context = React.useContext(ToggleGroupContext);
-  if (!context) {
-    throw new Error(
-      'ToggleGroup compound components cannot be rendered outside the ToggleGroup component'
-    );
-  }
-  return context;
-}
-
-const ToggleItem = React.forwardRef<PressableRef, SlottablePressableProps & ToolbarToggleItem>(
-  (
-    { asChild, value: itemValue, disabled: disabledProp = false, onPress: onPressProp, ...props },
-    ref
-  ) => {
-    const { type, disabled, value, onValueChange } = useToggleGroupContext();
-
-    function onPress(ev: GestureResponderEvent) {
-      if (disabled || disabledProp) return;
-      if (type === 'single') {
-        onValueChange(ToggleGroupUtils.getNewSingleValue(value, itemValue));
-      }
-      if (type === 'multiple') {
-        onValueChange(ToggleGroupUtils.getNewMultipleValue(value, itemValue));
-      }
-      onPressProp?.(ev);
-    }
-
-    const Component = asChild ? Slot.Pressable : Pressable;
-    return (
-      <Toolbar.ToggleItem value={itemValue} asChild>
-        <Component ref={ref} onPress={onPress} role='button' {...props} />
-      </Toolbar.ToggleItem>
-    );
-  }
-);
-
-ToggleItem.displayName = 'ToggleItemWebToolbar';
-
-const Separator = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
-  const Component = asChild ? Slot.View : View;
-  return <Component ref={ref} {...props} />;
-});
-
-Separator.displayName = 'SeparatorWebToolbar';
-
-const Link = React.forwardRef<PressableRef, SlottablePressableProps>(
-  ({ asChild, ...props }, ref) => {
-    const Component = asChild ? Slot.Pressable : Pressable;
-    return (
-      <Toolbar.Link asChild>
-        <Component ref={ref} {...props} />
-      </Toolbar.Link>
-    );
-  }
-);
-
-Link.displayName = 'LinkWebToolbar';
-
-const Button = React.forwardRef<PressableRef, SlottablePressableProps>(
-  ({ asChild, ...props }, ref) => {
-    const Component = asChild ? Slot.Pressable : Pressable;
-    return (
-      <Toolbar.Button asChild>
-        <Component ref={ref} role='button' {...props} />
-      </Toolbar.Button>
-    );
-  }
-);
-
-export { Button, Link, Root, Separator, ToggleGroup, ToggleItem };

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

@@ -1,39 +0,0 @@
-interface ToolbarRootProps {
-  /**
-   * Platform: WEB ONLY
-   */
-  orientation?: 'horizontal' | 'vertical';
-  /**
-   * Platform: WEB ONLY
-   */
-  dir?: 'ltr' | 'rtl';
-  /**
-   * Platform: WEB ONLY
-   */
-  loop?: boolean;
-}
-
-type SingleToggleGroupProps = {
-  type: 'single';
-  value: string | undefined;
-  onValueChange: (val: string | undefined) => void;
-};
-
-type MultipleToggleGroupProps = {
-  type: 'multiple';
-  value: string[];
-  onValueChange: (val: string[]) => void;
-};
-
-type ToolbarToggleGroupProps = (
-  | SingleToggleGroupProps
-  | MultipleToggleGroupProps
-) & {
-  disabled?: boolean;
-};
-
-interface ToolbarToggleItem {
-  value: string;
-}
-
-export type { ToolbarToggleGroupProps, ToolbarToggleItem, ToolbarRootProps };

package/__generated/components/primitives/tooltip/index.ts

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

package/__generated/components/primitives/tooltip/tooltip.tsx

@@ -1,277 +0,0 @@
-import { useAugmentedRef, useRelativePosition, type LayoutPosition } from '@rnr/hooks';
-import { Portal as RNPPortal } from '@rnr/portal';
-import * as Slot from '@rnr/slot';
-import type {
-  PositionedContentProps,
-  PressableRef,
-  SlottablePressableProps,
-  SlottableViewProps,
-  ViewRef,
-} from '@rnr/types';
-import * as React from 'react';
-import {
-  BackHandler,
-  Pressable,
-  View,
-  type GestureResponderEvent,
-  type LayoutChangeEvent,
-  type LayoutRectangle,
-} from 'react-native';
-import type {
-  TooltipOverlayProps,
-  TooltipPortalProps,
-  TooltipRootProps,
-  TooltipTriggerRef,
-} from './types';
-
-interface IRootContext {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  triggerPosition: LayoutPosition | null;
-  setTriggerPosition: (triggerPosition: LayoutPosition | null) => void;
-  contentLayout: LayoutRectangle | null;
-  setContentLayout: (contentLayout: LayoutRectangle | null) => void;
-  nativeID: string;
-}
-
-const RootContext = React.createContext<IRootContext | null>(null);
-
-const Root = React.forwardRef<ViewRef, SlottableViewProps & TooltipRootProps>(
-  (
-    {
-      asChild,
-      delayDuration: _delayDuration,
-      skipDelayDuration: _skipDelayDuration,
-      disableHoverableContent: _disableHoverableContent,
-      onOpenChange: onOpenChangeProp,
-      ...viewProps
-    },
-    ref
-  ) => {
-    const nativeID = React.useId();
-    const [triggerPosition, setTriggerPosition] = React.useState<LayoutPosition | null>(null);
-    const [contentLayout, setContentLayout] = React.useState<LayoutRectangle | null>(null);
-    const [open, setOpen] = React.useState(false);
-
-    function onOpenChange(value: boolean) {
-      setOpen(value);
-      onOpenChangeProp?.(value);
-    }
-
-    const Component = asChild ? Slot.View : View;
-    return (
-      <RootContext.Provider
-        value={{
-          open,
-          onOpenChange,
-          contentLayout,
-          nativeID,
-          setContentLayout,
-          setTriggerPosition,
-          triggerPosition,
-        }}
-      >
-        <Component ref={ref} {...viewProps} />
-      </RootContext.Provider>
-    );
-  }
-);
-
-Root.displayName = 'RootNativeTooltip';
-
-function useTooltipContext() {
-  const context = React.useContext(RootContext);
-  if (!context) {
-    throw new Error('Tooltip compound components cannot be rendered outside the Tooltip component');
-  }
-  return context;
-}
-
-const Trigger = React.forwardRef<TooltipTriggerRef, SlottablePressableProps>(
-  ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
-    const { open, onOpenChange, setTriggerPosition } = useTooltipContext();
-
-    const augmentedRef = useAugmentedRef({
-      ref,
-      methods: {
-        open: () => {
-          onOpenChange(true);
-          augmentedRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
-            setTriggerPosition({ width, pageX, pageY: pageY, height });
-          });
-        },
-        close: () => {
-          setTriggerPosition(null);
-          onOpenChange(false);
-        },
-      },
-    });
-
-    function onPress(ev: GestureResponderEvent) {
-      if (disabled) return;
-      augmentedRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
-        setTriggerPosition({ width, pageX, pageY: pageY, height });
-      });
-      const newValue = !open;
-      onOpenChange(newValue);
-      onPressProp?.(ev);
-    }
-
-    const Component = asChild ? Slot.Pressable : Pressable;
-    return (
-      <Component
-        ref={augmentedRef}
-        aria-disabled={disabled ?? undefined}
-        role='button'
-        onPress={onPress}
-        disabled={disabled ?? undefined}
-        {...props}
-      />
-    );
-  }
-);
-
-Trigger.displayName = 'TriggerNativeTooltip';
-
-/**
- * @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 }: TooltipPortalProps) {
-  const value = useTooltipContext();
-
-  if (!value.triggerPosition) {
-    return null;
-  }
-
-  if (!forceMount) {
-    if (!value.open) {
-      return null;
-    }
-  }
-
-  return (
-    <RNPPortal hostName={hostName} name={`${value.nativeID}_portal`}>
-      <RootContext.Provider value={value}>{children}</RootContext.Provider>
-    </RNPPortal>
-  );
-}
-
-const Overlay = React.forwardRef<PressableRef, SlottablePressableProps & TooltipOverlayProps>(
-  ({ asChild, forceMount, onPress: OnPressProp, closeOnPress = true, ...props }, ref) => {
-    const { open, onOpenChange, setContentLayout, setTriggerPosition } = useTooltipContext();
-
-    function onPress(ev: GestureResponderEvent) {
-      if (closeOnPress) {
-        setTriggerPosition(null);
-        setContentLayout(null);
-        onOpenChange(false);
-      }
-      OnPressProp?.(ev);
-    }
-
-    if (!forceMount) {
-      if (!open) {
-        return null;
-      }
-    }
-
-    const Component = asChild ? Slot.Pressable : Pressable;
-    return <Component ref={ref} onPress={onPress} {...props} />;
-  }
-);
-
-Overlay.displayName = 'OverlayNativeTooltip';
-
-/**
- * @info `position`, `top`, `left`, and `maxWidth` style properties are controlled internally. Opt out of this behavior on native by setting `disablePositioningStyle` to `true`.
- */
-const Content = React.forwardRef<ViewRef, SlottableViewProps & PositionedContentProps>(
-  (
-    {
-      asChild = false,
-      forceMount,
-      align = 'center',
-      side = 'top',
-      sideOffset = 0,
-      alignOffset = 0,
-      avoidCollisions = true,
-      onLayout: onLayoutProp,
-      insets,
-      style,
-      disablePositioningStyle,
-      ...props
-    },
-    ref
-  ) => {
-    const {
-      open,
-      onOpenChange,
-      nativeID,
-      contentLayout,
-      setContentLayout,
-      setTriggerPosition,
-      triggerPosition,
-    } = useTooltipContext();
-
-    React.useEffect(() => {
-      const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
-        setTriggerPosition(null);
-        setContentLayout(null);
-        onOpenChange(false);
-        return true;
-      });
-
-      return () => {
-        setContentLayout(null);
-        backHandler.remove();
-      };
-    }, []);
-
-    const positionStyle = useRelativePosition({
-      align,
-      avoidCollisions,
-      triggerPosition,
-      contentLayout,
-      alignOffset,
-      insets,
-      sideOffset,
-      side,
-      disablePositioningStyle,
-    });
-
-    function onLayout(event: LayoutChangeEvent) {
-      setContentLayout(event.nativeEvent.layout);
-      onLayoutProp?.(event);
-    }
-
-    if (!forceMount) {
-      if (!open) {
-        return null;
-      }
-    }
-
-    const Component = asChild ? Slot.View : View;
-    return (
-      <Component
-        ref={ref}
-        role='tooltip'
-        nativeID={nativeID}
-        aria-modal={true}
-        style={[positionStyle, style]}
-        onLayout={onLayout}
-        onStartShouldSetResponder={onStartShouldSetResponder}
-        {...props}
-      />
-    );
-  }
-);
-
-Content.displayName = 'ContentNativeTooltip';
-
-export { Content, Overlay, Portal, Root, Trigger };
-
-export type { TooltipTriggerRef };
-
-function onStartShouldSetResponder() {
-  return true;
-}

package/__generated/components/primitives/tooltip/tooltip.web.tsx

@@ -1,181 +0,0 @@
-import * as Tooltip from '@radix-ui/react-tooltip';
-import { useAugmentedRef } from '@rnr/hooks';
-import * as Slot from '@rnr/slot';
-import type {
-  PositionedContentProps,
-  PressableRef,
-  SlottablePressableProps,
-  SlottableViewProps,
-  ViewRef,
-} from '@rnr/types';
-import * as React from 'react';
-import { Pressable, View, type GestureResponderEvent } from 'react-native';
-import type {
-  TooltipOverlayProps,
-  TooltipPortalProps,
-  TooltipRootProps,
-  TooltipTriggerRef,
-} from './types';
-
-const RootContext = React.createContext<{
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-} | null>(null);
-
-const Root = React.forwardRef<ViewRef, SlottableViewProps & TooltipRootProps>(
-  (
-    {
-      asChild,
-      delayDuration,
-      skipDelayDuration,
-      disableHoverableContent,
-      onOpenChange: onOpenChangeProp,
-      ...viewProps
-    },
-    ref
-  ) => {
-    const [open, setOpen] = React.useState(false);
-
-    function onOpenChange(value: boolean) {
-      setOpen(value);
-      onOpenChangeProp?.(value);
-    }
-
-    const Component = asChild ? Slot.View : View;
-    return (
-      <RootContext.Provider value={{ open, onOpenChange }}>
-        <Tooltip.Provider
-          delayDuration={delayDuration}
-          skipDelayDuration={skipDelayDuration}
-          disableHoverableContent={disableHoverableContent}
-        >
-          <Tooltip.Root
-            open={open}
-            onOpenChange={onOpenChange}
-            delayDuration={delayDuration}
-            disableHoverableContent={disableHoverableContent}
-          >
-            <Component ref={ref} {...viewProps} />
-          </Tooltip.Root>
-        </Tooltip.Provider>
-      </RootContext.Provider>
-    );
-  }
-);
-
-Root.displayName = 'RootWebTooltip';
-
-function useTooltipContext() {
-  const context = React.useContext(RootContext);
-  if (!context) {
-    throw new Error('Tooltip compound components cannot be rendered outside the Tooltip component');
-  }
-  return context;
-}
-
-const Trigger = React.forwardRef<TooltipTriggerRef, SlottablePressableProps>(
-  ({ asChild, onPress: onPressProp, role: _role, disabled, ...props }, ref) => {
-    const { onOpenChange, open } = useTooltipContext();
-    const augmentedRef = useAugmentedRef({
-      ref,
-      methods: {
-        open() {
-          onOpenChange(true);
-        },
-        close() {
-          onOpenChange(false);
-        },
-      },
-    });
-    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 (
-      <Tooltip.Trigger disabled={disabled ?? undefined} asChild>
-        <Component
-          ref={augmentedRef}
-          onPress={onPress}
-          role='button'
-          disabled={disabled}
-          {...props}
-        />
-      </Tooltip.Trigger>
-    );
-  }
-);
-
-Trigger.displayName = 'TriggerWebTooltip';
-
-function Portal({ forceMount, container, children }: TooltipPortalProps) {
-  return <Tooltip.Portal forceMount={forceMount} children={children} container={container} />;
-}
-
-const Overlay = React.forwardRef<PressableRef, SlottablePressableProps & TooltipOverlayProps>(
-  ({ asChild, forceMount, ...props }, ref) => {
-    const Component = asChild ? Slot.Pressable : Pressable;
-    return <Component ref={ref} {...props} />;
-  }
-);
-
-Overlay.displayName = 'OverlayWebTooltip';
-
-const Content = React.forwardRef<ViewRef, SlottableViewProps & PositionedContentProps>(
-  (
-    {
-      asChild = false,
-      forceMount,
-      align = 'center',
-      side = 'top',
-      sideOffset = 0,
-      alignOffset = 0,
-      avoidCollisions = true,
-      insets: _insets,
-      disablePositioningStyle: _disablePositioningStyle,
-      onCloseAutoFocus: _onCloseAutoFocus,
-      onEscapeKeyDown,
-      onInteractOutside: _onInteractOutside,
-      onPointerDownOutside,
-      sticky,
-      hideWhenDetached,
-      ...props
-    },
-    ref
-  ) => {
-    const Component = asChild ? Slot.View : View;
-    return (
-      <Tooltip.Content
-        onEscapeKeyDown={onEscapeKeyDown}
-        onPointerDownOutside={onPointerDownOutside}
-        forceMount={forceMount}
-        align={align}
-        side={side}
-        sideOffset={sideOffset}
-        alignOffset={alignOffset}
-        avoidCollisions={avoidCollisions}
-        sticky={sticky}
-        hideWhenDetached={hideWhenDetached}
-      >
-        <Component ref={ref} {...props} />
-      </Tooltip.Content>
-    );
-  }
-);
-
-Content.displayName = 'ContentWebTooltip';
-
-export { Content, Overlay, Portal, Root, Trigger };
-
-export type { TooltipTriggerRef };

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

@@ -1,42 +0,0 @@
-import type { ForceMountable, PressableRef } from '@rnr/types';
-
-interface TooltipRootProps {
-  onOpenChange?: (open: boolean) => void;
-  /**
-   * Platform: WEB ONLY
-   * @default 700
-   */
-  delayDuration?: number;
-  /**
-   * Platform: WEB ONLY
-   * @default 300
-   */
-  skipDelayDuration?: number;
-  /**
-   * Platform: WEB ONLY
-   */
-  disableHoverableContent?: boolean;
-}
-
-interface TooltipPortalProps extends ForceMountable {
-  children: React.ReactNode;
-  /**
-   * Platform: NATIVE ONLY
-   */
-  hostName?: string;
-  /**
-   * Platform: WEB ONLY
-   */
-  container?: HTMLElement | null | undefined;
-}
-
-interface TooltipOverlayProps extends ForceMountable {
-  closeOnPress?: boolean;
-}
-
-interface TooltipTriggerRef extends PressableRef {
-  open: () => void;
-  close: () => void;
-}
-
-export type { TooltipOverlayProps, TooltipPortalProps, TooltipRootProps, TooltipTriggerRef };