@react-native-reusables/cli 0.0.8 → 0.0.10

package/dist/generated/components/primitives/toast/index.tsx

@@ -0,0 +1,128 @@
+import * as React from 'react';
+import { Pressable, Text, View, type GestureResponderEvent } from 'react-native';
+import * as Slot from '@rnr/slot';
+import type {
+  PressableRef,
+  SlottablePressableProps,
+  SlottableTextProps,
+  SlottableViewProps,
+  TextRef,
+  ViewRef,
+} from '@rnr/types';
+import type { ToastRootProps } from './types';
+
+interface RootContext extends ToastRootProps {
+  nativeID: string;
+}
+const ToastContext = React.createContext<RootContext | null>(null);
+
+const Root = React.forwardRef<ViewRef, SlottableViewProps & ToastRootProps>(
+  ({ asChild, type = 'foreground', open, onOpenChange, ...viewProps }, ref) => {
+    const nativeID = React.useId();
+
+    if (!open) {
+      return null;
+    }
+
+    const Component = asChild ? Slot.View : View;
+    return (
+      <ToastContext.Provider
+        value={{
+          open,
+          onOpenChange,
+          type,
+          nativeID,
+        }}
+      >
+        <Component
+          ref={ref}
+          role='status'
+          aria-live={type === 'foreground' ? 'assertive' : 'polite'}
+          {...viewProps}
+        />
+      </ToastContext.Provider>
+    );
+  }
+);
+
+Root.displayName = 'RootToast';
+
+function useToastContext() {
+  const context = React.useContext(ToastContext);
+  if (!context) {
+    throw new Error('Toast compound components cannot be rendered outside the Toast component');
+  }
+  return context;
+}
+
+const Close = React.forwardRef<PressableRef, SlottablePressableProps>(
+  ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
+    const { onOpenChange } = useToastContext();
+
+    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 = 'CloseToast';
+
+const Action = React.forwardRef<PressableRef, SlottablePressableProps>(
+  ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
+    const { onOpenChange } = useToastContext();
+
+    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 = 'ActionToast';
+
+const Title = React.forwardRef<TextRef, SlottableTextProps>(({ asChild, ...props }, ref) => {
+  const { nativeID } = useToastContext();
+
+  const Component = asChild ? Slot.Text : Text;
+  return <Component ref={ref} role='heading' nativeID={`${nativeID}_label`} {...props} />;
+});
+
+Title.displayName = 'TitleToast';
+
+const Description = React.forwardRef<TextRef, SlottableTextProps>(({ asChild, ...props }, ref) => {
+  const { nativeID } = useToastContext();
+
+  const Component = asChild ? Slot.Text : Text;
+  return <Component ref={ref} nativeID={`${nativeID}_desc`} {...props} />;
+});
+
+Description.displayName = 'DescriptionToast';
+
+export { Action, Close, Description, Root, Title };

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

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

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

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { Pressable, type GestureResponderEvent } from 'react-native';
+import * as Slot from '@rnr/slot';
+import type { PressableRef, SlottablePressableProps } from '@rnr/types';
+import type { ToggleRootProps } from './types';
+
+const Root = React.forwardRef<PressableRef, SlottablePressableProps & ToggleRootProps>(
+  ({ asChild, pressed, onPressedChange, disabled, onPress: onPressProp, ...props }, ref) => {
+    function onPress(ev: GestureResponderEvent) {
+      if (disabled) return;
+      const newValue = !pressed;
+      onPressedChange(newValue);
+      onPressProp?.(ev);
+    }
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return (
+      <Component
+        ref={ref}
+        aria-disabled={disabled}
+        role='switch'
+        aria-selected={pressed}
+        onPress={onPress}
+        accessibilityState={{
+          selected: pressed,
+          disabled,
+        }}
+        disabled={disabled}
+        {...props}
+      />
+    );
+  }
+);
+
+Root.displayName = 'RootNativeToggle';
+
+export { Root };

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

@@ -0,0 +1,26 @@
+import * as Toggle from '@radix-ui/react-toggle';
+import * as React from 'react';
+import { Pressable, type GestureResponderEvent } from 'react-native';
+import * as Slot from '@rnr/slot';
+import type { PressableRef, SlottablePressableProps } from '@rnr/types';
+import type { ToggleRootProps } from './types';
+
+const Root = React.forwardRef<PressableRef, SlottablePressableProps & ToggleRootProps>(
+  ({ asChild, pressed, onPressedChange, disabled, onPress: onPressProp, ...props }, ref) => {
+    function onPress(ev: GestureResponderEvent) {
+      onPressProp?.(ev);
+      onPressedChange(!pressed);
+    }
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return (
+      <Toggle.Root pressed={pressed} onPressedChange={onPressedChange} disabled={disabled} asChild>
+        <Component ref={ref} onPress={onPress} disabled={disabled} role='button' {...props} />
+      </Toggle.Root>
+    );
+  }
+);
+
+Root.displayName = 'RootWebToggle';
+
+export { Root };

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

@@ -0,0 +1,7 @@
+interface ToggleRootProps {
+  pressed: boolean;
+  onPressedChange: (pressed: boolean) => void;
+  disabled?: boolean;
+}
+
+export type { ToggleRootProps };

package/dist/generated/components/primitives/toggle-group/index.ts

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

package/dist/generated/components/primitives/toggle-group/toggle-group.tsx

@@ -0,0 +1,125 @@
+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 { ToggleGroupItemProps, ToggleGroupRootProps } from './types';
+
+const ToggleGroupContext = React.createContext<ToggleGroupRootProps | null>(null);
+
+const Root = React.forwardRef<ViewRef, SlottableViewProps & ToggleGroupRootProps>(
+  (
+    {
+      asChild,
+      type,
+      value,
+      onValueChange,
+      disabled = false,
+      rovingFocus: _rovingFocus,
+      orientation: _orientation,
+      dir: _dir,
+      loop: _loop,
+      ...viewProps
+    },
+    ref
+  ) => {
+    const Component = asChild ? Slot.View : View;
+    return (
+      <ToggleGroupContext.Provider
+        value={
+          {
+            type,
+            value,
+            disabled,
+            onValueChange,
+          } as ToggleGroupRootProps
+        }
+      >
+        <Component ref={ref} role='group' {...viewProps} />
+      </ToggleGroupContext.Provider>
+    );
+  }
+);
+
+Root.displayName = 'RootToggleGroup';
+
+function useRootContext() {
+  const context = React.useContext(ToggleGroupContext);
+  if (!context) {
+    throw new Error(
+      'ToggleGroup compound components cannot be rendered outside the ToggleGroup component'
+    );
+  }
+  return context;
+}
+
+const ItemContext = React.createContext<ToggleGroupItemProps | null>(null);
+
+const Item = React.forwardRef<PressableRef, SlottablePressableProps & ToggleGroupItemProps>(
+  (
+    { asChild, value: itemValue, disabled: disabledProp = false, onPress: onPressProp, ...props },
+    ref
+  ) => {
+    const id = React.useId();
+    const { type, disabled, value, onValueChange } = useRootContext();
+
+    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 isChecked =
+      type === 'single' ? ToggleGroupUtils.getIsSelected(value, itemValue) : undefined;
+    const isSelected =
+      type === 'multiple' ? ToggleGroupUtils.getIsSelected(value, itemValue) : undefined;
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return (
+      <ItemContext.Provider value={{ value: itemValue }}>
+        <Component
+          ref={ref}
+          key={`${id}-item-${value}`}
+          aria-disabled={disabled}
+          role={type === 'single' ? 'radio' : 'checkbox'}
+          onPress={onPress}
+          aria-checked={isChecked}
+          aria-selected={isSelected}
+          disabled={(disabled || disabledProp) ?? false}
+          accessibilityState={{
+            disabled: (disabled || disabledProp) ?? false,
+            checked: isChecked,
+            selected: isSelected,
+          }}
+          {...props}
+        />
+      </ItemContext.Provider>
+    );
+  }
+);
+
+Item.displayName = 'ItemToggleGroup';
+
+function useItemContext() {
+  const context = React.useContext(ItemContext);
+  if (!context) {
+    throw new Error(
+      'ToggleGroupItem compound components cannot be rendered outside the ToggleGroupItem component'
+    );
+  }
+  return context;
+}
+
+const utils = ToggleGroupUtils;
+
+export { Item, Root, useItemContext, useRootContext, utils };

package/dist/generated/components/primitives/toggle-group/toggle-group.web.tsx

@@ -0,0 +1,124 @@
+import * as ToggleGroup from '@radix-ui/react-toggle-group';
+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 { ToggleGroupItemProps, ToggleGroupRootProps } from './types';
+
+const ToggleGroupContext = React.createContext<ToggleGroupRootProps | null>(null);
+
+const Root = React.forwardRef<ViewRef, SlottableViewProps & ToggleGroupRootProps>(
+  (
+    {
+      asChild,
+      type,
+      value,
+      onValueChange,
+      disabled = false,
+      rovingFocus,
+      orientation,
+      dir,
+      loop,
+      ...viewProps
+    },
+    ref
+  ) => {
+    const Component = asChild ? Slot.View : View;
+    return (
+      <ToggleGroupContext.Provider
+        value={
+          {
+            type,
+            value,
+            disabled,
+            onValueChange,
+          } as ToggleGroupRootProps
+        }
+      >
+        <ToggleGroup.Root
+          type={type as any}
+          value={value as any}
+          onValueChange={onValueChange as any}
+          disabled={disabled}
+          rovingFocus={rovingFocus}
+          orientation={orientation}
+          dir={dir}
+          loop={loop}
+          asChild
+        >
+          <Component ref={ref} {...viewProps} />
+        </ToggleGroup.Root>
+      </ToggleGroupContext.Provider>
+    );
+  }
+);
+
+Root.displayName = 'RootToggleGroup';
+
+function useRootContext() {
+  const context = React.useContext(ToggleGroupContext);
+  if (!context) {
+    throw new Error(
+      'ToggleGroup compound components cannot be rendered outside the ToggleGroup component'
+    );
+  }
+  return context;
+}
+
+const ItemContext = React.createContext<ToggleGroupItemProps | null>(null);
+
+const Item = React.forwardRef<PressableRef, SlottablePressableProps & ToggleGroupItemProps>(
+  (
+    { asChild, value: itemValue, disabled: disabledProp = false, onPress: onPressProp, ...props },
+    ref
+  ) => {
+    const { type, disabled, value, onValueChange } = useRootContext();
+
+    function onPress(ev: GestureResponderEvent) {
+      onPressProp?.(ev);
+      if (type === 'single') {
+        onValueChange(ToggleGroupUtils.getNewSingleValue(value, itemValue));
+      }
+      if (type === 'multiple') {
+        onValueChange(ToggleGroupUtils.getNewMultipleValue(value, itemValue));
+      }
+    }
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return (
+      <ItemContext.Provider value={{ value: itemValue }}>
+        <ToggleGroup.Item value={itemValue} asChild>
+          <Component
+            ref={ref}
+            onPress={onPress}
+            disabled={disabled || disabledProp}
+            role='button'
+            {...props}
+          />
+        </ToggleGroup.Item>
+      </ItemContext.Provider>
+    );
+  }
+);
+
+Item.displayName = 'ItemToggleGroup';
+
+function useItemContext() {
+  const context = React.useContext(ItemContext);
+  if (!context) {
+    throw new Error(
+      'ToggleGroupItem compound components cannot be rendered outside the ToggleGroupItem component'
+    );
+  }
+  return context;
+}
+
+const utils = ToggleGroupUtils;
+
+export { Item, Root, useItemContext, useRootContext, utils };

package/dist/generated/components/primitives/toggle-group/types.ts

@@ -0,0 +1,37 @@
+type SingleRootProps = {
+  type: 'single';
+  value: string | undefined;
+  onValueChange: (val: string | undefined) => void;
+};
+
+type MultipleRootProps = {
+  type: 'multiple';
+  value: string[];
+  onValueChange: (val: string[]) => void;
+};
+
+type ToggleGroupRootProps = (SingleRootProps | MultipleRootProps) & {
+  disabled?: boolean;
+  /**
+   * Platform: WEB ONLY
+   */
+  rovingFocus?: boolean;
+  /**
+   * Platform: WEB ONLY
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /**
+   * Platform: WEB ONLY
+   */
+  dir?: 'ltr' | 'rtl';
+  /**
+   * Platform: WEB ONLY
+   */
+  loop?: boolean;
+};
+
+interface ToggleGroupItemProps {
+  value: string;
+}
+
+export type { ToggleGroupRootProps, ToggleGroupItemProps };

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

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

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

@@ -0,0 +1,125 @@
+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: _orientation, dir: _dir, loop: _loop, ...props }, ref) => {
+    const Component = asChild ? Slot.View : View;
+    return <Component ref={ref} role='toolbar' {...props} />;
+  }
+);
+
+Root.displayName = 'RootNativeToolbar';
+
+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
+        }
+      >
+        <Component ref={ref} role='group' {...viewProps} />
+      </ToggleGroupContext.Provider>
+    );
+  }
+);
+
+ToggleGroup.displayName = 'ToggleGroupNativeToolbar';
+
+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 isChecked =
+      type === 'single' ? ToggleGroupUtils.getIsSelected(value, itemValue) : undefined;
+    const isSelected =
+      type === 'multiple' ? ToggleGroupUtils.getIsSelected(value, itemValue) : undefined;
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return (
+      <Component
+        ref={ref}
+        aria-disabled={disabled}
+        role={type === 'single' ? 'radio' : 'checkbox'}
+        onPress={onPress}
+        aria-checked={isChecked}
+        aria-selected={isSelected}
+        disabled={(disabled || disabledProp) ?? false}
+        accessibilityState={{
+          disabled: (disabled || disabledProp) ?? false,
+          checked: isChecked,
+          selected: isSelected,
+        }}
+        {...props}
+      />
+    );
+  }
+);
+
+ToggleItem.displayName = 'ToggleItemNativeToolbar';
+
+const Separator = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return <Component role={'separator'} ref={ref} {...props} />;
+});
+
+Separator.displayName = 'SeparatorNativeToolbar';
+
+const Link = React.forwardRef<PressableRef, SlottablePressableProps>(
+  ({ asChild, ...props }, ref) => {
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return <Component ref={ref} role='link' {...props} />;
+  }
+);
+
+Link.displayName = 'LinkNativeToolbar';
+
+const Button = React.forwardRef<PressableRef, SlottablePressableProps>(
+  ({ asChild, ...props }, ref) => {
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return <Component ref={ref} role='button' {...props} />;
+  }
+);
+
+export { Button, Link, Root, Separator, ToggleGroup, ToggleItem };