@react-native-reusables/cli 0.0.9 → 0.0.10

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

@@ -0,0 +1,101 @@
+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/dist/generated/components/primitives/checkbox/checkbox.web.tsx

@@ -0,0 +1,114 @@
+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/dist/generated/components/primitives/checkbox/index.ts

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

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

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

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

@@ -0,0 +1,119 @@
+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/dist/generated/components/primitives/collapsible/collapsible.web.tsx

@@ -0,0 +1,157 @@
+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/dist/generated/components/primitives/collapsible/index.ts

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

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

@@ -0,0 +1,18 @@
+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 };