@react-native-reusables/cli 0.0.18 → 0.1.0

package/__generated/components/primitives/checkbox/checkbox.tsx

@@ -1,101 +0,0 @@
-import * as React from 'react';
-import { GestureResponderEvent, Pressable, View } from 'react-native';
-import * as Slot from '@rnr/slot';
-import type { ComponentPropsWithAsChild, PressableRef, SlottablePressableProps } from '@rnr/types';
-import type { CheckboxIndicator, CheckboxRootProps } from './types';
-
-interface RootContext extends CheckboxRootProps {
-  nativeID?: string;
-}
-
-const CheckboxContext = React.createContext<RootContext | null>(null);
-
-const Root = React.forwardRef<PressableRef, SlottablePressableProps & CheckboxRootProps>(
-  ({ asChild, disabled = false, checked, onCheckedChange, nativeID, ...props }, ref) => {
-    return (
-      <CheckboxContext.Provider
-        value={{
-          disabled,
-          checked,
-          onCheckedChange,
-          nativeID,
-        }}
-      >
-        <Trigger ref={ref} {...props} />
-      </CheckboxContext.Provider>
-    );
-  }
-);
-
-Root.displayName = 'RootNativeCheckbox';
-
-function useCheckboxContext() {
-  const context = React.useContext(CheckboxContext);
-  if (!context) {
-    throw new Error(
-      'Checkbox compound components cannot be rendered outside the Checkbox component'
-    );
-  }
-  return context;
-}
-
-const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
-  ({ asChild, onPress: onPressProp, ...props }, ref) => {
-    const { disabled, checked, onCheckedChange, nativeID } = useCheckboxContext();
-
-    function onPress(ev: GestureResponderEvent) {
-      if (disabled) return;
-      const newValue = !checked;
-      onCheckedChange(newValue);
-      onPressProp?.(ev);
-    }
-
-    const Component = asChild ? Slot.Pressable : Pressable;
-    return (
-      <Component
-        ref={ref}
-        nativeID={nativeID}
-        aria-disabled={disabled}
-        role='checkbox'
-        aria-checked={checked}
-        onPress={onPress}
-        accessibilityState={{
-          checked,
-          disabled,
-        }}
-        disabled={disabled}
-        {...props}
-      />
-    );
-  }
-);
-
-Trigger.displayName = 'TriggerNativeCheckbox';
-
-const Indicator = React.forwardRef<
-  React.ElementRef<typeof View>,
-  ComponentPropsWithAsChild<typeof View> & CheckboxIndicator
->(({ asChild, forceMount, ...props }, ref) => {
-  const { checked, disabled } = useCheckboxContext();
-
-  if (!forceMount) {
-    if (!checked) {
-      return null;
-    }
-  }
-
-  const Component = asChild ? Slot.View : View;
-  return (
-    <Component
-      ref={ref}
-      aria-disabled={disabled}
-      aria-hidden={!(forceMount || checked)}
-      role={'presentation'}
-      {...props}
-    />
-  );
-});
-
-Indicator.displayName = 'IndicatorNativeCheckbox';
-
-export { Indicator, Root };

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

@@ -1,114 +0,0 @@
-import * as Checkbox from '@radix-ui/react-checkbox';
-import * as React from 'react';
-import { GestureResponderEvent, Pressable, View } from 'react-native';
-import { useAugmentedRef } from '@rnr/hooks';
-import * as Slot from '@rnr/slot';
-import type { ComponentPropsWithAsChild, PressableRef, SlottablePressableProps } from '@rnr/types';
-import type { CheckboxIndicator, CheckboxRootProps } from './types';
-
-const CheckboxContext = React.createContext<CheckboxRootProps | null>(null);
-
-const Root = React.forwardRef<PressableRef, SlottablePressableProps & CheckboxRootProps>(
-  (
-    { asChild, disabled, checked, onCheckedChange, onPress: onPressProp, role: _role, ...props },
-    ref
-  ) => {
-    const augmentedRef = useAugmentedRef({ ref });
-
-    function onPress(ev: GestureResponderEvent) {
-      onPressProp?.(ev);
-      onCheckedChange(!checked);
-    }
-
-    React.useLayoutEffect(() => {
-      if (augmentedRef.current) {
-        const augRef = augmentedRef.current as unknown as HTMLButtonElement;
-        augRef.dataset.state = checked ? 'checked' : 'unchecked';
-        augRef.value = checked ? 'on' : 'off';
-      }
-    }, [checked]);
-
-    React.useLayoutEffect(() => {
-      if (augmentedRef.current) {
-        const augRef = augmentedRef.current as unknown as HTMLButtonElement;
-        augRef.type = 'button';
-        augRef.role = 'checkbox';
-
-        if (disabled) {
-          augRef.dataset.disabled = 'true';
-        } else {
-          augRef.dataset.disabled = undefined;
-        }
-      }
-    }, [disabled]);
-
-    const Component = asChild ? Slot.Pressable : Pressable;
-    return (
-      <CheckboxContext.Provider value={{ checked, disabled, onCheckedChange }}>
-        <Checkbox.Root
-          checked={checked}
-          onCheckedChange={onCheckedChange}
-          disabled={disabled}
-          asChild
-        >
-          <Component
-            ref={augmentedRef}
-            role='button'
-            onPress={onPress}
-            disabled={disabled}
-            {...props}
-          />
-        </Checkbox.Root>
-      </CheckboxContext.Provider>
-    );
-  }
-);
-
-Root.displayName = 'RootWebCheckbox';
-
-function useCheckboxContext() {
-  const context = React.useContext(CheckboxContext);
-  if (context === null) {
-    throw new Error(
-      'Checkbox compound components cannot be rendered outside the Checkbox component'
-    );
-  }
-  return context;
-}
-
-const Indicator = React.forwardRef<
-  React.ElementRef<typeof View>,
-  ComponentPropsWithAsChild<typeof View> & CheckboxIndicator
->(({ asChild, forceMount, ...props }, ref) => {
-  const { checked, disabled } = useCheckboxContext();
-  const augmentedRef = useAugmentedRef({ ref });
-
-  React.useLayoutEffect(() => {
-    if (augmentedRef.current) {
-      const augRef = augmentedRef.current as unknown as HTMLDivElement;
-      augRef.dataset.state = checked ? 'checked' : 'unchecked';
-    }
-  }, [checked]);
-
-  React.useLayoutEffect(() => {
-    if (augmentedRef.current) {
-      const augRef = augmentedRef.current as unknown as HTMLDivElement;
-      if (disabled) {
-        augRef.dataset.disabled = 'true';
-      } else {
-        augRef.dataset.disabled = undefined;
-      }
-    }
-  }, [disabled]);
-
-  const Component = asChild ? Slot.View : View;
-  return (
-    <Checkbox.Indicator forceMount={forceMount} asChild>
-      <Component ref={ref} {...props} />
-    </Checkbox.Indicator>
-  );
-});
-
-Indicator.displayName = 'IndicatorWebCheckbox';
-
-export { Indicator, Root };

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

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

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

@@ -1,11 +0,0 @@
-import type { ForceMountable } from '@rnr/types';
-
-interface CheckboxRootProps {
-  checked: boolean;
-  onCheckedChange: (checked: boolean) => void;
-  disabled?: boolean;
-}
-
-type CheckboxIndicator = ForceMountable;
-
-export type { CheckboxRootProps, CheckboxIndicator };

package/__generated/components/primitives/collapsible/collapsible.tsx

@@ -1,119 +0,0 @@
-import { useControllableState } from '@rnr/hooks';
-import * as Slot from '@rnr/slot';
-import type {
-  PressableRef,
-  SlottablePressableProps,
-  SlottableViewProps,
-  ViewRef,
-} from '@rnr/types';
-import * as React from 'react';
-import { Pressable, View, type GestureResponderEvent } from 'react-native';
-import type { CollapsibleContentProps, CollapsibleRootProps, RootContext } from './types';
-
-const CollapsibleContext = React.createContext<(RootContext & { nativeID: string }) | null>(null);
-
-const Root = React.forwardRef<ViewRef, SlottableViewProps & CollapsibleRootProps>(
-  (
-    {
-      asChild,
-      disabled = false,
-      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 (
-      <CollapsibleContext.Provider
-        value={{
-          disabled,
-          open,
-          onOpenChange,
-          nativeID,
-        }}
-      >
-        <Component ref={ref} {...viewProps} />
-      </CollapsibleContext.Provider>
-    );
-  }
-);
-
-Root.displayName = 'RootNativeCollapsible';
-
-function useCollapsibleContext() {
-  const context = React.useContext(CollapsibleContext);
-  if (!context) {
-    throw new Error(
-      'Collapsible compound components cannot be rendered outside the Collapsible component'
-    );
-  }
-  return context;
-}
-
-const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
-  ({ asChild, onPress: onPressProp, disabled: disabledProp = false, ...props }, ref) => {
-    const { disabled, open, onOpenChange, nativeID } = useCollapsibleContext();
-
-    function onPress(ev: GestureResponderEvent) {
-      if (disabled || disabledProp) return;
-      onOpenChange(!open);
-      onPressProp?.(ev);
-    }
-
-    const Component = asChild ? Slot.Pressable : Pressable;
-    return (
-      <Component
-        key={`trigger-${nativeID}-${open}`}
-        ref={ref}
-        nativeID={nativeID}
-        aria-disabled={(disabled || disabledProp) ?? undefined}
-        role='button'
-        onPress={onPress}
-        accessibilityState={{
-          expanded: open,
-          disabled: (disabled || disabledProp) ?? undefined,
-        }}
-        disabled={disabled || disabledProp}
-        {...props}
-      />
-    );
-  }
-);
-
-Trigger.displayName = 'TriggerNativeCollapsible';
-
-const Content = React.forwardRef<ViewRef, SlottableViewProps & CollapsibleContentProps>(
-  ({ asChild, forceMount, ...props }, ref) => {
-    const { nativeID, open } = useCollapsibleContext();
-
-    if (!forceMount) {
-      if (!open) {
-        return null;
-      }
-    }
-
-    const Component = asChild ? Slot.View : View;
-    return (
-      <Component
-        ref={ref}
-        aria-hidden={!(forceMount || open)}
-        aria-labelledby={nativeID}
-        role={'region'}
-        {...props}
-      />
-    );
-  }
-);
-
-Content.displayName = 'ContentNativeCollapsible';
-
-export { Content, Root, Trigger };

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

@@ -1,157 +0,0 @@
-import * as Collapsible from '@radix-ui/react-collapsible';
-import { useAugmentedRef, useControllableState } from '@rnr/hooks';
-import * as Slot from '@rnr/slot';
-import type {
-  PressableRef,
-  SlottablePressableProps,
-  SlottableViewProps,
-  ViewRef,
-} from '@rnr/types';
-import * as React from 'react';
-import { Pressable, View, type GestureResponderEvent } from 'react-native';
-import type { CollapsibleContentProps, CollapsibleRootProps, RootContext } from './types';
-
-const CollapsibleContext = React.createContext<RootContext | null>(null);
-
-const Root = React.forwardRef<ViewRef, SlottableViewProps & CollapsibleRootProps>(
-  (
-    {
-      asChild,
-      disabled = false,
-      open: openProp,
-      defaultOpen,
-      onOpenChange: onOpenChangeProp,
-      ...viewProps
-    },
-    ref
-  ) => {
-    const [open = false, onOpenChange] = useControllableState({
-      prop: openProp,
-      defaultProp: defaultOpen,
-      onChange: onOpenChangeProp,
-    });
-    const augmentedRef = useAugmentedRef({ ref });
-
-    React.useLayoutEffect(() => {
-      if (augmentedRef.current) {
-        const augRef = augmentedRef.current as unknown as HTMLDivElement;
-        augRef.dataset.state = open ? 'open' : 'closed';
-      }
-    }, [open]);
-
-    React.useLayoutEffect(() => {
-      if (augmentedRef.current) {
-        const augRef = augmentedRef.current as unknown as HTMLDivElement;
-        if (disabled) {
-          augRef.dataset.disabled = 'true';
-        } else {
-          augRef.dataset.disabled = undefined;
-        }
-      }
-    }, [disabled]);
-
-    const Component = asChild ? Slot.View : View;
-    return (
-      <CollapsibleContext.Provider
-        value={{
-          disabled,
-          open,
-          onOpenChange,
-        }}
-      >
-        <Collapsible.Root
-          open={open}
-          defaultOpen={defaultOpen}
-          onOpenChange={onOpenChange}
-          disabled={disabled}
-        >
-          <Component ref={ref} {...viewProps} />
-        </Collapsible.Root>
-      </CollapsibleContext.Provider>
-    );
-  }
-);
-
-Root.displayName = 'RootWebCollapsible';
-
-function useCollapsibleContext() {
-  const context = React.useContext(CollapsibleContext);
-  if (!context) {
-    throw new Error(
-      'Collapsible compound components cannot be rendered outside the Collapsible component'
-    );
-  }
-  return context;
-}
-
-const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
-  ({ asChild, onPress: onPressProp, disabled: disabledProp = false, ...props }, ref) => {
-    const { disabled, open, onOpenChange } = useCollapsibleContext();
-    const augmentedRef = useAugmentedRef({ ref });
-
-    React.useLayoutEffect(() => {
-      if (augmentedRef.current) {
-        const augRef = augmentedRef.current as unknown as HTMLButtonElement;
-        augRef.dataset.state = open ? 'open' : 'closed';
-      }
-    }, [open]);
-
-    React.useLayoutEffect(() => {
-      if (augmentedRef.current) {
-        const augRef = augmentedRef.current as unknown as HTMLButtonElement;
-        augRef.type = 'button';
-
-        if (disabled) {
-          augRef.dataset.disabled = 'true';
-        } else {
-          augRef.dataset.disabled = undefined;
-        }
-      }
-    }, [disabled]);
-
-    function onPress(ev: GestureResponderEvent) {
-      onPressProp?.(ev);
-      onOpenChange(!open);
-    }
-
-    const Component = asChild ? Slot.Pressable : Pressable;
-    return (
-      <Collapsible.Trigger disabled={disabled} asChild>
-        <Component
-          ref={augmentedRef}
-          role='button'
-          onPress={onPress}
-          disabled={disabled}
-          {...props}
-        />
-      </Collapsible.Trigger>
-    );
-  }
-);
-
-Trigger.displayName = 'TriggerWebCollapsible';
-
-const Content = React.forwardRef<ViewRef, SlottableViewProps & CollapsibleContentProps>(
-  ({ asChild, forceMount, ...props }, ref) => {
-    const augmentedRef = useAugmentedRef({ ref });
-    const { open } = useCollapsibleContext();
-
-    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 (
-      <Collapsible.Content forceMount={forceMount} asChild>
-        <Component ref={augmentedRef} {...props} />
-      </Collapsible.Content>
-    );
-  }
-);
-
-Content.displayName = 'ContentWebCollapsible';
-
-export { Content, Root, Trigger };

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

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

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

@@ -1,18 +0,0 @@
-import type { ForceMountable } from '@rnr/types';
-
-interface RootContext {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  disabled: boolean;
-}
-
-interface CollapsibleRootProps {
-  open?: boolean;
-  defaultOpen?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  disabled?: boolean;
-}
-
-type CollapsibleContentProps = ForceMountable;
-
-export type { CollapsibleContentProps, CollapsibleRootProps, RootContext };