@react-native-reusables/cli 0.0.8 → 0.0.10

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

@@ -0,0 +1,319 @@
+import * as Select from '@radix-ui/react-select';
+import { useAugmentedRef, useControllableState } from '@rnr/hooks';
+import * as Slot from '@rnr/slot';
+import type {
+  ForceMountable,
+  PositionedContentProps,
+  PressableRef,
+  SlottablePressableProps,
+  SlottableTextProps,
+  SlottableViewProps,
+  TextRef,
+  ViewRef,
+} from '@rnr/types';
+import * as React from 'react';
+import { Pressable, Text, View } from 'react-native';
+import type {
+  RootContext,
+  SelectContentProps,
+  SelectItemProps,
+  SelectOverlayProps,
+  SelectPortalProps,
+  SelectRootProps,
+  SelectSeparatorProps,
+  SelectValueProps,
+} from './types';
+
+const SelectContext = React.createContext<RootContext | null>(null);
+
+/**
+ * @web Parameter of `onValueChange` has the value of `value` for the `value` and the `label` of the selected Option
+ * @ex When an Option with a label of Green Apple, the parameter passed to `onValueChange` is { value: 'green-apple', label: 'green-apple' }
+ */
+const Root = React.forwardRef<ViewRef, SlottableViewProps & SelectRootProps>(
+  (
+    {
+      asChild,
+      value: valueProp,
+      defaultValue,
+      onValueChange: onValueChangeProp,
+      open: openProp,
+      defaultOpen,
+      onOpenChange: onOpenChangeProp,
+      ...viewProps
+    },
+    ref
+  ) => {
+    const [open = false, onOpenChange] = useControllableState({
+      prop: openProp,
+      defaultProp: defaultOpen,
+      onChange: onOpenChangeProp,
+    });
+
+    const [value, onValueChange] = useControllableState({
+      prop: valueProp,
+      defaultProp: defaultValue,
+      onChange: onValueChangeProp,
+    });
+
+    function onStrValueChange(val: string) {
+      onValueChange({ value: val, label: val });
+    }
+
+    const Component = asChild ? Slot.View : View;
+    return (
+      <SelectContext.Provider
+        value={{
+          value,
+          onValueChange,
+          open,
+          onOpenChange,
+        }}
+      >
+        <Select.Root
+          value={value?.value}
+          defaultValue={defaultValue?.value}
+          onValueChange={onStrValueChange}
+          open={open}
+          defaultOpen={defaultOpen}
+          onOpenChange={onOpenChange}
+        >
+          <Component ref={ref} {...viewProps} />
+        </Select.Root>
+      </SelectContext.Provider>
+    );
+  }
+);
+
+Root.displayName = 'RootWebSelect';
+
+function useRootContext() {
+  const context = React.useContext(SelectContext);
+  if (!context) {
+    throw new Error('Select compound components cannot be rendered outside the Select component');
+  }
+  return context;
+}
+
+const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
+  ({ asChild, role: _role, disabled, ...props }, ref) => {
+    const augmentedRef = useAugmentedRef({ ref });
+    const { open } = useRootContext();
+
+    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 (
+      <Select.Trigger disabled={disabled ?? undefined} asChild>
+        <Component ref={augmentedRef} role='button' disabled={disabled} {...props} />
+      </Select.Trigger>
+    );
+  }
+);
+
+Trigger.displayName = 'TriggerWebSelect';
+
+const Value = React.forwardRef<TextRef, SlottableTextProps & SelectValueProps>(
+  ({ asChild, placeholder, children, ...props }, ref) => {
+    return (
+      <Slot.Text ref={ref} {...props}>
+        <Select.Value placeholder={placeholder}>{children}</Select.Value>
+      </Slot.Text>
+    );
+  }
+);
+
+Value.displayName = 'ValueWebSelect';
+
+function Portal({ container, children }: SelectPortalProps) {
+  return <Select.Portal children={children} container={container} />;
+}
+
+const Overlay = React.forwardRef<PressableRef, SlottablePressableProps & SelectOverlayProps>(
+  ({ asChild, forceMount, ...props }, ref) => {
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return <Component ref={ref} {...props} />;
+  }
+);
+
+Overlay.displayName = 'OverlayWebSelect';
+
+const Content = React.forwardRef<
+  ViewRef,
+  SlottableViewProps & PositionedContentProps & SelectContentProps
+>(
+  (
+    {
+      asChild = false,
+      forceMount: _forceMount,
+      align = 'start',
+      side = 'bottom',
+      position = 'popper',
+      sideOffset = 0,
+      alignOffset = 0,
+      avoidCollisions = true,
+      disablePositioningStyle: _disablePositioningStyle,
+      onCloseAutoFocus,
+      onEscapeKeyDown,
+      onInteractOutside: _onInteractOutside,
+      onPointerDownOutside,
+      ...props
+    },
+    ref
+  ) => {
+    const Component = asChild ? Slot.View : View;
+    return (
+      <Select.Content
+        onCloseAutoFocus={onCloseAutoFocus}
+        onEscapeKeyDown={onEscapeKeyDown}
+        onPointerDownOutside={onPointerDownOutside}
+        align={align}
+        side={side}
+        sideOffset={sideOffset}
+        alignOffset={alignOffset}
+        avoidCollisions={avoidCollisions}
+        position={position}
+      >
+        <Component ref={ref} {...props} />
+      </Select.Content>
+    );
+  }
+);
+
+Content.displayName = 'ContentWebSelect';
+
+const ItemContext = React.createContext<{
+  itemValue: string;
+  label: string;
+} | null>(null);
+
+const Item = React.forwardRef<PressableRef, SlottablePressableProps & SelectItemProps>(
+  ({ asChild, closeOnPress = true, label, value, children, ...props }, ref) => {
+    return (
+      <ItemContext.Provider value={{ itemValue: value, label: label }}>
+        <Slot.Pressable ref={ref} {...props}>
+          <Select.Item textValue={label} value={value} disabled={props.disabled ?? undefined}>
+            <>{children}</>
+          </Select.Item>
+        </Slot.Pressable>
+      </ItemContext.Provider>
+    );
+  }
+);
+
+Item.displayName = 'ItemWebSelect';
+
+function useItemContext() {
+  const context = React.useContext(ItemContext);
+  if (!context) {
+    throw new Error('Item compound components cannot be rendered outside of an Item component');
+  }
+  return context;
+}
+
+const ItemText = React.forwardRef<TextRef, Omit<SlottableTextProps, 'children'>>(
+  ({ asChild, ...props }, ref) => {
+    const { label } = useItemContext();
+
+    const Component = asChild ? Slot.Text : Text;
+    return (
+      <Select.ItemText asChild>
+        <Component ref={ref} {...props}>
+          {label}
+        </Component>
+      </Select.ItemText>
+    );
+  }
+);
+
+ItemText.displayName = 'ItemTextWebSelect';
+
+const ItemIndicator = React.forwardRef<ViewRef, SlottableViewProps & ForceMountable>(
+  ({ asChild, forceMount: _forceMount, ...props }, ref) => {
+    const Component = asChild ? Slot.View : View;
+    return (
+      <Select.ItemIndicator asChild>
+        <Component ref={ref} {...props} />
+      </Select.ItemIndicator>
+    );
+  }
+);
+
+ItemIndicator.displayName = 'ItemIndicatorWebSelect';
+
+const Group = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return (
+    <Select.Group asChild>
+      <Component ref={ref} {...props} />
+    </Select.Group>
+  );
+});
+
+Group.displayName = 'GroupWebSelect';
+
+const Label = React.forwardRef<TextRef, SlottableTextProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot.Text : Text;
+  return (
+    <Select.Label asChild>
+      <Component ref={ref} {...props} />
+    </Select.Label>
+  );
+});
+
+Label.displayName = 'LabelWebSelect';
+
+const Separator = React.forwardRef<ViewRef, SlottableViewProps & SelectSeparatorProps>(
+  ({ asChild, decorative, ...props }, ref) => {
+    const Component = asChild ? Slot.View : View;
+    return (
+      <Select.Separator asChild>
+        <Component ref={ref} {...props} />
+      </Select.Separator>
+    );
+  }
+);
+
+Separator.displayName = 'SeparatorWebSelect';
+
+const ScrollUpButton = (props: React.ComponentPropsWithoutRef<typeof Select.ScrollUpButton>) => {
+  return <Select.ScrollUpButton {...props} />;
+};
+
+const ScrollDownButton = (
+  props: React.ComponentPropsWithoutRef<typeof Select.ScrollDownButton>
+) => {
+  return <Select.ScrollDownButton {...props} />;
+};
+
+const Viewport = (props: React.ComponentPropsWithoutRef<typeof Select.Viewport>) => {
+  return <Select.Viewport {...props} />;
+};
+
+export {
+  Content,
+  Group,
+  Item,
+  ItemIndicator,
+  ItemText,
+  Label,
+  Overlay,
+  Portal,
+  Root,
+  ScrollDownButton,
+  ScrollUpButton,
+  Separator,
+  Trigger,
+  Value,
+  Viewport,
+  useItemContext,
+  useRootContext,
+};
+
+export type { Option } from './types';

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

@@ -0,0 +1,87 @@
+import type { ForceMountable } from '@rnr/types';
+
+type Option =
+  | {
+      value: string;
+      label: string;
+    }
+  | undefined;
+
+interface RootContext {
+  value: Option;
+  onValueChange: (option: Option) => void;
+  open: boolean;
+  onOpenChange: (value: boolean) => void;
+  disabled?: boolean;
+}
+
+interface SelectRootProps {
+  value?: Option;
+  defaultValue?: Option;
+  onValueChange?: (option: Option) => void;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (value: boolean) => void;
+  disabled?: boolean;
+  /**
+   * Platform: WEB ONLY
+   */
+  dir?: 'ltr' | 'rtl';
+  /**
+   * Platform: WEB ONLY
+   */
+  name?: string;
+  /**
+   * Platform: WEB ONLY
+   */
+  required?: boolean;
+}
+
+interface SelectValueProps {
+  placeholder: string;
+}
+
+interface SelectPortalProps extends ForceMountable {
+  children: React.ReactNode;
+  /**
+   * Platform: NATIVE ONLY
+   */
+  hostName?: string;
+  /**
+   * Platform: WEB ONLY
+   */
+  container?: HTMLElement | null | undefined;
+}
+
+interface SelectOverlayProps extends ForceMountable {
+  closeOnPress?: boolean;
+}
+
+interface SelectContentProps {
+  /**
+   * Platform: WEB ONLY
+   */
+  position?: 'popper' | 'item-aligned' | undefined;
+}
+
+interface SelectItemProps {
+  value: string;
+  label: string;
+  closeOnPress?: boolean;
+}
+
+interface SelectSeparatorProps {
+  decorative?: boolean;
+}
+
+export type {
+  Option,
+  RootContext,
+  SelectContentProps,
+  SelectItemProps,
+  SelectOverlayProps,
+  SelectPortalProps,
+  SelectRootProps,
+  SelectSeparatorProps,
+  SelectValueProps,
+};

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

@@ -0,0 +1,6 @@
+interface SeparatorRootProps {
+  orientation?: 'horizontal' | 'vertical';
+  decorative?: boolean;
+}
+
+export type { SeparatorRootProps };

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import * as Slot from '@rnr/slot';
+import type { SlottableViewProps, ViewRef } from '@rnr/types';
+import type { SeparatorRootProps } from './types';
+
+const Root = React.forwardRef<ViewRef, SlottableViewProps & SeparatorRootProps>(
+  ({ asChild, decorative, orientation = 'horizontal', ...props }, ref) => {
+    const Component = asChild ? Slot.View : View;
+    return (
+      <Component
+        role={decorative ? 'presentation' : 'separator'}
+        aria-orientation={orientation}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+Root.displayName = 'RootSeparator';
+
+export { Root };

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

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

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

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import * as Slot from '@rnr/slot';
+import type {
+  SlottableViewProps,
+  ViewRef,
+} from '@rnr/types';
+import type { SliderRootProps } from './types';
+
+const RootContext = React.createContext<SliderRootProps | null>(null);
+
+const Root = React.forwardRef<ViewRef, SlottableViewProps & SliderRootProps>(
+  (
+    {
+      asChild,
+      value,
+      disabled,
+      min,
+      max,
+      dir: _dir,
+      inverted: _inverted,
+      step: _step,
+      onValueChange: _onValueChange,
+      ...props
+    },
+    ref
+  ) => {
+    const Component = asChild ? Slot.View : View;
+    return (
+      <RootContext.Provider value={{ value, disabled, min, max }}>
+        <Component ref={ref} role='group' {...props} />
+      </RootContext.Provider>
+    );
+  }
+);
+
+Root.displayName = 'RootNativeSlider';
+
+function useSliderContext() {
+  const context = React.useContext(RootContext);
+  if (context === null) {
+    throw new Error(
+      'Slider compound components cannot be rendered outside the Slider component'
+    );
+  }
+  return context;
+}
+
+const Track = React.forwardRef<ViewRef, SlottableViewProps>(
+  ({ asChild, ...props }, ref) => {
+    const { value, min, max, disabled } = useSliderContext();
+
+    const Component = asChild ? Slot.View : View;
+    return (
+      <Component
+        ref={ref}
+        aria-disabled={disabled}
+        role='slider'
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={value}
+        accessibilityValue={{ max, min, now: value }}
+        {...props}
+      />
+    );
+  }
+);
+
+Track.displayName = 'TrackNativeSlider';
+
+const Range = React.forwardRef<ViewRef, SlottableViewProps>(
+  ({ asChild, ...props }, ref) => {
+    const Component = asChild ? Slot.View : View;
+    return <Component ref={ref} role='presentation' {...props} />;
+  }
+);
+
+Range.displayName = 'RangeNativeSlider';
+
+const Thumb = React.forwardRef<ViewRef, SlottableViewProps>(
+  ({ asChild, ...props }, ref) => {
+    const Component = asChild ? Slot.View : View;
+    return <Component accessibilityRole='adjustable' ref={ref} {...props} />;
+  }
+);
+
+Thumb.displayName = 'ThumbNativeSlider';
+
+export { Range, Root, Thumb, Track };

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

@@ -0,0 +1,67 @@
+import * as Slider from '@radix-ui/react-slider';
+import * as React from 'react';
+import { View } from 'react-native';
+import * as Slot from '@rnr/slot';
+import type { SlottableViewProps, ViewRef } from '@rnr/types';
+import type { SliderRootProps } from './types';
+
+const Root = React.forwardRef<ViewRef, SlottableViewProps & SliderRootProps>(
+  (
+    { asChild, value, disabled, min, max, dir, inverted, step = 1, onValueChange, ...props },
+    ref
+  ) => {
+    const Component = asChild ? Slot.View : View;
+    return (
+      <Slider.Root
+        dir={dir}
+        inverted={inverted}
+        value={[value]}
+        disabled={disabled}
+        min={min}
+        max={max}
+        step={step}
+        onValueChange={onValueChange}
+        asChild
+      >
+        <Component ref={ref} {...props} />
+      </Slider.Root>
+    );
+  }
+);
+
+Root.displayName = 'RootWebSlider';
+
+const Track = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return (
+    <Slider.Track asChild>
+      <Component ref={ref} {...props} />
+    </Slider.Track>
+  );
+});
+
+Track.displayName = 'TrackWebSlider';
+
+const Range = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return (
+    <Slider.Range asChild>
+      <Component ref={ref} {...props} />
+    </Slider.Range>
+  );
+});
+
+Range.displayName = 'RangeWebSlider';
+
+const Thumb = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return (
+    <Slider.Thumb asChild>
+      <Component ref={ref} {...props} />
+    </Slider.Thumb>
+  );
+});
+
+Thumb.displayName = 'ThumbWebSlider';
+
+export { Range, Root, Thumb, Track };

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

@@ -0,0 +1,24 @@
+interface SliderRootProps {
+  value: number;
+  disabled?: boolean;
+  min?: number;
+  max?: number;
+  /**
+   * Platform: WEB ONLY
+   */
+  dir?: 'ltr' | 'rtl';
+  /**
+   * Platform: WEB ONLY
+   */
+  inverted?: boolean;
+  /**
+   * Platform: WEB ONLY
+   */
+  step?: number;
+  /**
+   * Platform: WEB ONLY
+   */
+  onValueChange?: (value: number[]) => void;
+}
+
+export type { SliderRootProps };