@react-native-reusables/cli 0.0.9 → 0.0.11

package/dist/generated/components/primitives/slot.tsx

@@ -0,0 +1,187 @@
+import * as React from 'react';
+import {
+  Image as RNImage,
+  Pressable as RNPressable,
+  Text as RNText,
+  View as RNView,
+  StyleSheet,
+  type PressableStateCallbackType,
+  type ImageProps as RNImageProps,
+  type ImageStyle as RNImageStyle,
+  type PressableProps as RNPressableProps,
+  type TextProps as RNTextProps,
+  type ViewProps as RNViewProps,
+  type StyleProp,
+} from 'react-native';
+
+const Pressable = React.forwardRef<React.ElementRef<typeof RNPressable>, RNPressableProps>(
+  (props, forwardedRef) => {
+    const { children, ...pressableSlotProps } = props;
+
+    if (!React.isValidElement(children)) {
+      console.log('Slot.Pressable - Invalid asChild element', children);
+      return null;
+    }
+
+    return React.cloneElement<
+      React.ComponentPropsWithoutRef<typeof RNPressable>,
+      React.ElementRef<typeof RNPressable>
+    >(isTextChildren(children) ? <></> : children, {
+      ...mergeProps(pressableSlotProps, children.props),
+      ref: forwardedRef ? composeRefs(forwardedRef, (children as any).ref) : (children as any).ref,
+    });
+  }
+);
+
+Pressable.displayName = 'SlotPressable';
+
+const View = React.forwardRef<React.ElementRef<typeof RNView>, RNViewProps>(
+  (props, forwardedRef) => {
+    const { children, ...viewSlotProps } = props;
+
+    if (!React.isValidElement(children)) {
+      console.log('Slot.View - Invalid asChild element', children);
+      return null;
+    }
+
+    return React.cloneElement<
+      React.ComponentPropsWithoutRef<typeof RNView>,
+      React.ElementRef<typeof RNView>
+    >(isTextChildren(children) ? <></> : children, {
+      ...mergeProps(viewSlotProps, children.props),
+      ref: forwardedRef ? composeRefs(forwardedRef, (children as any).ref) : (children as any).ref,
+    });
+  }
+);
+
+View.displayName = 'SlotView';
+
+const Text = React.forwardRef<React.ElementRef<typeof RNText>, RNTextProps>(
+  (props, forwardedRef) => {
+    const { children, ...textSlotProps } = props;
+
+    if (!React.isValidElement(children)) {
+      console.log('Slot.Text - Invalid asChild element', children);
+      return null;
+    }
+
+    return React.cloneElement<
+      React.ComponentPropsWithoutRef<typeof RNText>,
+      React.ElementRef<typeof RNText>
+    >(isTextChildren(children) ? <></> : children, {
+      ...mergeProps(textSlotProps, children.props),
+      ref: forwardedRef ? composeRefs(forwardedRef, (children as any).ref) : (children as any).ref,
+    });
+  }
+);
+
+Text.displayName = 'SlotText';
+
+type ImageSlotProps = RNImageProps & {
+  children?: React.ReactNode;
+};
+
+const Image = React.forwardRef<React.ElementRef<typeof RNImage>, ImageSlotProps>(
+  (props, forwardedRef) => {
+    const { children, ...imageSlotProps } = props;
+
+    if (!React.isValidElement(children)) {
+      console.log('Slot.Image - Invalid asChild element', children);
+      return null;
+    }
+
+    return React.cloneElement<
+      React.ComponentPropsWithoutRef<typeof RNImage>,
+      React.ElementRef<typeof RNImage>
+    >(isTextChildren(children) ? <></> : children, {
+      ...mergeProps(imageSlotProps, children.props),
+      ref: forwardedRef ? composeRefs(forwardedRef, (children as any).ref) : (children as any).ref,
+    });
+  }
+);
+
+Image.displayName = 'SlotImage';
+
+export { Image, Pressable, Text, View };
+
+// This project uses code from WorkOS/Radix Primitives.
+// The code is licensed under the MIT License.
+// https://github.com/radix-ui/primitives/tree/main
+
+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;
+      }
+    });
+}
+
+type AnyProps = Record<string, any>;
+
+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 };
+}
+
+type PressableStyle = RNPressableProps['style'];
+type ImageStyle = StyleProp<RNImageStyle>;
+type Style = PressableStyle | ImageStyle;
+
+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));
+}
+
+export function isTextChildren(
+  children: React.ReactNode | ((state: PressableStateCallbackType) => React.ReactNode)
+) {
+  return Array.isArray(children)
+    ? children.every((child) => typeof child === 'string')
+    : typeof children === 'string';
+}

package/dist/generated/components/primitives/switch/index.ts

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

package/dist/generated/components/primitives/switch/switch.tsx

@@ -0,0 +1,65 @@
+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 type { SwitchRootProps } from './types';
+
+const Root = React.forwardRef<
+  PressableRef,
+  SlottablePressableProps & SwitchRootProps
+>(
+  (
+    {
+      asChild,
+      checked,
+      onCheckedChange,
+      disabled,
+      onPress: onPressProp,
+      'aria-valuetext': ariaValueText,
+      ...props
+    },
+    ref
+  ) => {
+    function onPress(ev: GestureResponderEvent) {
+      if (disabled) return;
+      onCheckedChange(!checked);
+      onPressProp?.(ev);
+    }
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return (
+      <Component
+        ref={ref}
+        aria-disabled={disabled}
+        role='switch'
+        aria-checked={checked}
+        aria-valuetext={ariaValueText ?? checked ? 'on' : 'off'}
+        onPress={onPress}
+        accessibilityState={{
+          checked,
+          disabled,
+        }}
+        disabled={disabled}
+        {...props}
+      />
+    );
+  }
+);
+
+Root.displayName = 'RootNativeSwitch';
+
+const Thumb = React.forwardRef<ViewRef, SlottableViewProps>(
+  ({ asChild, ...props }, ref) => {
+    const Component = asChild ? Slot.View : View;
+    return <Component ref={ref} role='presentation' {...props} />;
+  }
+);
+
+Thumb.displayName = 'ThumbNativeSwitch';
+
+export { Root, Thumb };

package/dist/generated/components/primitives/switch/switch.web.tsx

@@ -0,0 +1,67 @@
+import * as Switch from '@radix-ui/react-switch';
+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 type { SwitchRootProps } from './types';
+
+const Root = React.forwardRef<PressableRef, SlottablePressableProps & SwitchRootProps>(
+  (
+    {
+      asChild,
+      checked,
+      onCheckedChange,
+      disabled,
+      onPress: onPressProp,
+      onKeyDown: onKeyDownProp,
+      ...props
+    },
+    ref
+  ) => {
+    function onPress(ev: GestureResponderEvent) {
+      onCheckedChange(!checked);
+      onPressProp?.(ev);
+    }
+
+    function onKeyDown(ev: React.KeyboardEvent) {
+      onKeyDownProp?.(ev);
+      if (ev.key === ' ') {
+        onCheckedChange(!checked);
+      }
+    }
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return (
+      <Switch.Root checked={checked} onCheckedChange={onCheckedChange} disabled={disabled} asChild>
+        <Component
+          ref={ref}
+          disabled={disabled}
+          onPress={onPress}
+          // @ts-expect-error Web only
+          onKeyDown={onKeyDown}
+          {...props}
+        />
+      </Switch.Root>
+    );
+  }
+);
+
+Root.displayName = 'RootWebSwitch';
+
+const Thumb = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return (
+    <Switch.Thumb asChild>
+      <Component ref={ref} {...props} />
+    </Switch.Thumb>
+  );
+});
+
+Thumb.displayName = 'ThumbWebSwitch';
+
+export { Root, Thumb };

package/dist/generated/components/primitives/switch/types.ts

@@ -0,0 +1,11 @@
+interface SwitchRootProps {
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+  disabled?: boolean;
+  /**
+   * Platform: WEB ONLY
+   */
+  onKeyDown?: (ev: React.KeyboardEvent) => void;
+}
+
+export type { SwitchRootProps };

package/dist/generated/components/primitives/table.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { Pressable, View } from 'react-native';
+import * as Slot from '@rnr/slot';
+import type {
+  PressableRef,
+  SlottablePressableProps,
+  SlottableViewProps,
+  ViewRef,
+} from '@rnr/types';
+
+const Root = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return <Component role='table' ref={ref} {...props} />;
+});
+Root.displayName = 'RootTable';
+
+const Header = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return <Component role='rowheader' ref={ref} {...props} />;
+});
+Header.displayName = 'HeaderTable';
+
+const Row = React.forwardRef<PressableRef, SlottablePressableProps>(
+  ({ asChild, ...props }, ref) => {
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return <Component ref={ref} role='row' {...props} />;
+  }
+);
+Row.displayName = 'RowTable';
+
+const Head = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return <Component ref={ref} role='columnheader' {...props} />;
+});
+Head.displayName = 'HeadTable';
+
+const Body = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return <Component ref={ref} role='rowgroup' {...props} />;
+});
+Body.displayName = 'BodyTable';
+
+const Cell = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return <Component ref={ref} role='cell' {...props} />;
+});
+Cell.displayName = 'CellTable';
+
+const Footer = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return <Component ref={ref} role='rowgroup' {...props} />;
+});
+Footer.displayName = 'FooterTable';
+
+export { Body, Cell, Footer, Head, Header, Root, Row };

package/dist/generated/components/primitives/tabs/index.ts

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

package/dist/generated/components/primitives/tabs/tabs.tsx

@@ -0,0 +1,133 @@
+import * as React from 'react';
+import { Pressable, View, type GestureResponderEvent } from 'react-native';
+import * as Slot from '@rnr/slot';
+import type { ComponentPropsWithAsChild, SlottableViewProps, ViewRef } from '@rnr/types';
+import type { TabsContentProps, TabsRootProps } from './types';
+
+interface RootContext extends TabsRootProps {
+  nativeID: string;
+}
+
+const TabsContext = React.createContext<RootContext | null>(null);
+
+const Root = React.forwardRef<ViewRef, SlottableViewProps & TabsRootProps>(
+  (
+    {
+      asChild,
+      value,
+      onValueChange,
+      orientation: _orientation,
+      dir: _dir,
+      activationMode: _activationMode,
+      ...viewProps
+    },
+    ref
+  ) => {
+    const nativeID = React.useId();
+    const Component = asChild ? Slot.View : View;
+    return (
+      <TabsContext.Provider
+        value={{
+          value,
+          onValueChange,
+          nativeID,
+        }}
+      >
+        <Component ref={ref} {...viewProps} />
+      </TabsContext.Provider>
+    );
+  }
+);
+
+Root.displayName = 'RootNativeTabs';
+
+function useRootContext() {
+  const context = React.useContext(TabsContext);
+  if (!context) {
+    throw new Error('Tabs compound components cannot be rendered outside the Tabs component');
+  }
+  return context;
+}
+
+const List = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return <Component ref={ref} role='tablist' {...props} />;
+});
+
+List.displayName = 'ListNativeTabs';
+
+const TriggerContext = React.createContext<{ value: string } | null>(null);
+
+const Trigger = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  ComponentPropsWithAsChild<typeof Pressable> & {
+    value: string;
+  }
+>(({ asChild, onPress: onPressProp, disabled, value: tabValue, ...props }, ref) => {
+  const { onValueChange, value: rootValue, nativeID } = useRootContext();
+
+  function onPress(ev: GestureResponderEvent) {
+    if (disabled) return;
+    onValueChange(tabValue);
+    onPressProp?.(ev);
+  }
+
+  const Component = asChild ? Slot.Pressable : Pressable;
+  return (
+    <TriggerContext.Provider value={{ value: tabValue }}>
+      <Component
+        ref={ref}
+        nativeID={`${nativeID}-tab-${tabValue}`}
+        aria-disabled={!!disabled}
+        aria-selected={rootValue === tabValue}
+        role='tab'
+        onPress={onPress}
+        accessibilityState={{
+          selected: rootValue === tabValue,
+          disabled: !!disabled,
+        }}
+        disabled={!!disabled}
+        {...props}
+      />
+    </TriggerContext.Provider>
+  );
+});
+
+Trigger.displayName = 'TriggerNativeTabs';
+
+function useTriggerContext() {
+  const context = React.useContext(TriggerContext);
+  if (!context) {
+    throw new Error(
+      'Tabs.Trigger compound components cannot be rendered outside the Tabs.Trigger component'
+    );
+  }
+  return context;
+}
+
+const Content = React.forwardRef<ViewRef, SlottableViewProps & TabsContentProps>(
+  ({ asChild, forceMount, value: tabValue, ...props }, ref) => {
+    const { value: rootValue, nativeID } = useRootContext();
+
+    if (!forceMount) {
+      if (rootValue !== tabValue) {
+        return null;
+      }
+    }
+
+    const Component = asChild ? Slot.View : View;
+    return (
+      <Component
+        ref={ref}
+        aria-hidden={!(forceMount || rootValue === tabValue)}
+        aria-labelledby={`${nativeID}-tab-${tabValue}`}
+        role='tabpanel'
+        {...props}
+      />
+    );
+  }
+);
+
+Content.displayName = 'ContentNativeTabs';
+
+export { Content, List, Root, Trigger, useRootContext, useTriggerContext };

package/dist/generated/components/primitives/tabs/tabs.web.tsx

@@ -0,0 +1,97 @@
+import * as Tabs from '@radix-ui/react-tabs';
+import * as React from 'react';
+import { Pressable, View } from 'react-native';
+import * as Slot from '@rnr/slot';
+import type { ComponentPropsWithAsChild, SlottableViewProps, ViewRef } from '@rnr/types';
+import type { TabsContentProps, TabsRootProps } from './types';
+
+const TabsContext = React.createContext<TabsRootProps | null>(null);
+const Root = React.forwardRef<ViewRef, SlottableViewProps & TabsRootProps>(
+  ({ asChild, value, onValueChange, orientation, dir, activationMode, ...viewProps }, ref) => {
+    const Component = asChild ? Slot.View : View;
+    return (
+      <TabsContext.Provider
+        value={{
+          value,
+          onValueChange,
+        }}
+      >
+        <Tabs.Root
+          value={value}
+          onValueChange={onValueChange}
+          orientation={orientation}
+          dir={dir}
+          activationMode={activationMode}
+          asChild
+        >
+          <Component ref={ref} {...viewProps} />
+        </Tabs.Root>
+      </TabsContext.Provider>
+    );
+  }
+);
+
+Root.displayName = 'RootWebTabs';
+
+function useRootContext() {
+  const context = React.useContext(TabsContext);
+  if (!context) {
+    throw new Error('Tabs compound components cannot be rendered outside the Tabs component');
+  }
+  return context;
+}
+
+const List = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return (
+    <Tabs.List asChild>
+      <Component ref={ref} {...props} />
+    </Tabs.List>
+  );
+});
+
+List.displayName = 'ListWebTabs';
+
+const TriggerContext = React.createContext<{ value: string } | null>(null);
+const Trigger = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  ComponentPropsWithAsChild<typeof Pressable> & {
+    value: string;
+  }
+>(({ asChild, value: tabValue, ...props }, ref) => {
+  const Component = asChild ? Slot.Pressable : Pressable;
+  return (
+    <TriggerContext.Provider value={{ value: tabValue }}>
+      <Tabs.Trigger value={tabValue} asChild>
+        <Component ref={ref} {...props} />
+      </Tabs.Trigger>
+    </TriggerContext.Provider>
+  );
+});
+
+Trigger.displayName = 'TriggerWebTabs';
+
+function useTriggerContext() {
+  const context = React.useContext(TriggerContext);
+  if (!context) {
+    throw new Error(
+      'Tabs.Trigger compound components cannot be rendered outside the Tabs.Trigger component'
+    );
+  }
+  return context;
+}
+
+const Content = React.forwardRef<ViewRef, SlottableViewProps & TabsContentProps>(
+  ({ asChild, forceMount, value, ...props }, ref) => {
+    const Component = asChild ? Slot.View : View;
+    return (
+      <Tabs.Content value={value} asChild>
+        <Component ref={ref} {...props} />
+      </Tabs.Content>
+    );
+  }
+);
+
+Content.displayName = 'ContentWebTabs';
+
+export { Content, List, Root, Trigger, useRootContext, useTriggerContext };

package/dist/generated/components/primitives/tabs/types.ts

@@ -0,0 +1,24 @@
+import type { ForceMountable } from '@rnr/types';
+
+interface TabsRootProps {
+  value: string;
+  onValueChange: (value: string) => void;
+  /**
+   * Platform: WEB ONLY
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /**
+   * Platform: WEB ONLY
+   */
+  dir?: 'ltr' | 'rtl';
+  /**
+   * Platform: WEB ONLY
+   */
+  activationMode?: 'automatic' | 'manual';
+}
+
+interface TabsContentProps extends ForceMountable {
+  value: string;
+}
+
+export type { TabsContentProps, TabsRootProps };

package/dist/generated/components/primitives/toast/ types.ts

@@ -0,0 +1,7 @@
+interface ToastRootProps {
+  open: boolean;
+  onOpenChange: (value: boolean) => void;
+  type?: 'foreground' | 'background';
+}
+
+export type { ToastRootProps };