@react-native-reusables/cli 0.4.0 → 0.4.1

package/__generated/components/ui/text.tsx

@@ -1,24 +1,26 @@
 import * as Slot from '@rn-primitives/slot';
-import type { SlottableTextProps, TextRef } from '@rn-primitives/types';
 import * as React from 'react';
 import { Text as RNText } from 'react-native';
 import { cn } from '../../lib/utils';
 
 const TextClassContext = React.createContext<string | undefined>(undefined);
 
-const Text = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
-    const textClass = React.useContext(TextClassContext);
-    const Component = asChild ? Slot.Text : RNText;
-    return (
-      <Component
-        className={cn('text-base text-foreground web:select-text', textClass, className)}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-Text.displayName = 'Text';
+function Text({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<typeof RNText> & {
+  ref?: React.RefObject<RNText>;
+  asChild?: boolean;
+}) {
+  const textClass = React.useContext(TextClassContext);
+  const Component = asChild ? Slot.Text : RNText;
+  return (
+    <Component
+      className={cn('text-base text-foreground web:select-text', textClass, className)}
+      {...props}
+    />
+  );
+}
 
 export { Text, TextClassContext };

package/__generated/components/ui/textarea.tsx

@@ -2,26 +2,29 @@ import * as React from 'react';
 import { TextInput, type TextInputProps } from 'react-native';
 import { cn } from '../../lib/utils';
 
-const Textarea = React.forwardRef<React.ElementRef<typeof TextInput>, TextInputProps>(
-  ({ className, multiline = true, numberOfLines = 4, placeholderClassName, ...props }, ref) => {
-    return (
-      <TextInput
-        ref={ref}
-        className={cn(
-          'web:flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base lg:text-sm native:text-lg native:leading-[1.25] text-foreground web:ring-offset-background placeholder:text-muted-foreground web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
-          props.editable === false && 'opacity-50 web:cursor-not-allowed',
-          className
-        )}
-        placeholderClassName={cn('text-muted-foreground', placeholderClassName)}
-        multiline={multiline}
-        numberOfLines={numberOfLines}
-        textAlignVertical='top'
-        {...props}
-      />
-    );
-  }
-);
-
-Textarea.displayName = 'Textarea';
+function Textarea({
+  className,
+  multiline = true,
+  numberOfLines = 4,
+  placeholderClassName,
+  ...props
+}: TextInputProps & {
+  ref?: React.RefObject<TextInput>;
+}) {
+  return (
+    <TextInput
+      className={cn(
+        'web:flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base lg:text-sm native:text-lg native:leading-[1.25] text-foreground web:ring-offset-background placeholder:text-muted-foreground web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
+        props.editable === false && 'opacity-50 web:cursor-not-allowed',
+        className
+      )}
+      placeholderClassName={cn('text-muted-foreground', placeholderClassName)}
+      multiline={multiline}
+      numberOfLines={numberOfLines}
+      textAlignVertical='top'
+      {...props}
+    />
+  );
+}
 
 export { Textarea };

package/__generated/components/ui/toggle-group.tsx

@@ -8,20 +8,27 @@ import { cn } from '../../lib/utils';
 
 const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants> | null>(null);
 
-const ToggleGroup = React.forwardRef<
-  ToggleGroupPrimitive.RootRef,
-  ToggleGroupPrimitive.RootProps & VariantProps<typeof toggleVariants>
->(({ className, variant, size, children, ...props }, ref) => (
-  <ToggleGroupPrimitive.Root
-    ref={ref}
-    className={cn('flex flex-row items-center justify-center gap-1', className)}
-    {...props}
-  >
-    <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>
-  </ToggleGroupPrimitive.Root>
-));
-
-ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}: ToggleGroupPrimitive.RootProps &
+  VariantProps<typeof toggleVariants> & {
+    ref?: React.RefObject<ToggleGroupPrimitive.RootRef>;
+  }) {
+  return (
+    <ToggleGroupPrimitive.Root
+      className={cn('flex flex-row items-center justify-center gap-1', className)}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  );
+}
 
 function useToggleGroupContext() {
   const context = React.useContext(ToggleGroupContext);
@@ -33,10 +40,16 @@ function useToggleGroupContext() {
   return context;
 }
 
-const ToggleGroupItem = React.forwardRef<
-  ToggleGroupPrimitive.ItemRef,
-  ToggleGroupPrimitive.ItemProps & VariantProps<typeof toggleVariants>
->(({ className, children, variant, size, ...props }, ref) => {
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: ToggleGroupPrimitive.ItemProps &
+  VariantProps<typeof toggleVariants> & {
+    ref?: React.RefObject<ToggleGroupPrimitive.ItemRef>;
+  }) {
   const context = useToggleGroupContext();
   const { value } = ToggleGroupPrimitive.useRootContext();
 
@@ -50,7 +63,6 @@ const ToggleGroupItem = React.forwardRef<
       )}
     >
       <ToggleGroupPrimitive.Item
-        ref={ref}
         className={cn(
           toggleVariants({
             variant: context.variant || variant,
@@ -66,9 +78,7 @@ const ToggleGroupItem = React.forwardRef<
       </ToggleGroupPrimitive.Item>
     </TextClassContext.Provider>
   );
-});
-
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+}
 
 function ToggleGroupIcon({
   className,

package/__generated/components/ui/toggle.tsx

@@ -45,31 +45,36 @@ const toggleTextVariants = cva('text-sm native:text-base text-foreground font-me
   },
 });
 
-const Toggle = React.forwardRef<
-  TogglePrimitive.RootRef,
-  TogglePrimitive.RootProps & VariantProps<typeof toggleVariants>
->(({ className, variant, size, ...props }, ref) => (
-  <TextClassContext.Provider
-    value={cn(
-      toggleTextVariants({ variant, size }),
-      props.pressed ? 'text-accent-foreground' : 'web:group-hover:text-muted-foreground',
-      className
-    )}
-  >
-    <TogglePrimitive.Root
-      ref={ref}
-      className={cn(
-        toggleVariants({ variant, size }),
-        props.disabled && 'web:pointer-events-none opacity-50',
-        props.pressed && 'bg-accent',
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: TogglePrimitive.RootProps &
+  VariantProps<typeof toggleVariants> &
+  VariantProps<typeof toggleVariants> & {
+    ref?: React.RefObject<TogglePrimitive.RootRef>;
+  }) {
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        toggleTextVariants({ variant, size }),
+        props.pressed ? 'text-accent-foreground' : 'web:group-hover:text-muted-foreground',
         className
       )}
-      {...props}
-    />
-  </TextClassContext.Provider>
-));
-
-Toggle.displayName = TogglePrimitive.Root.displayName;
+    >
+      <TogglePrimitive.Root
+        className={cn(
+          toggleVariants({ variant, size }),
+          props.disabled && 'web:pointer-events-none opacity-50',
+          props.pressed && 'bg-accent',
+          className
+        )}
+        {...props}
+      />
+    </TextClassContext.Provider>
+  );
+}
 
 function ToggleIcon({
   className,

package/__generated/components/ui/tooltip.tsx

@@ -8,31 +8,36 @@ import { TextClassContext } from './text';
 const Tooltip = TooltipPrimitive.Root;
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
-const TooltipContent = React.forwardRef<
-  TooltipPrimitive.ContentRef,
-  TooltipPrimitive.ContentProps & { portalHost?: string }
->(({ className, sideOffset = 4, portalHost, ...props }, ref) => (
-  <TooltipPrimitive.Portal hostName={portalHost}>
-    <TooltipPrimitive.Overlay style={Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined}>
-      <Animated.View
-        entering={Platform.select({ web: undefined, default: FadeIn })}
-        exiting={Platform.select({ web: undefined, default: FadeOut })}
-      >
-        <TextClassContext.Provider value='text-sm native:text-base text-popover-foreground'>
-          <TooltipPrimitive.Content
-            ref={ref}
-            sideOffset={sideOffset}
-            className={cn(
-              'z-50 overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 shadow-md shadow-foreground/5 web:animate-in web:fade-in-0 web:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-              className
-            )}
-            {...props}
-          />
-        </TextClassContext.Provider>
-      </Animated.View>
-    </TooltipPrimitive.Overlay>
-  </TooltipPrimitive.Portal>
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+function TooltipContent({
+  className,
+  sideOffset = 4,
+  portalHost,
+  ...props
+}: TooltipPrimitive.ContentProps & {
+  ref?: React.RefObject<TooltipPrimitive.ContentRef>;
+  portalHost?: string;
+}) {
+  return (
+    <TooltipPrimitive.Portal hostName={portalHost}>
+      <TooltipPrimitive.Overlay style={Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined}>
+        <Animated.View
+          entering={Platform.select({ web: undefined, default: FadeIn })}
+          exiting={Platform.select({ web: undefined, default: FadeOut })}
+        >
+          <TextClassContext.Provider value='text-sm native:text-base text-popover-foreground'>
+            <TooltipPrimitive.Content
+              sideOffset={sideOffset}
+              className={cn(
+                'z-50 overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 shadow-md shadow-foreground/5 web:animate-in web:fade-in-0 web:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+                className
+              )}
+              {...props}
+            />
+          </TextClassContext.Provider>
+        </Animated.View>
+      </TooltipPrimitive.Overlay>
+    </TooltipPrimitive.Portal>
+  );
+}
 
 export { Tooltip, TooltipContent, TooltipTrigger };

package/__generated/components/ui/typography.tsx

@@ -1,205 +1,148 @@
 import * as Slot from '@rn-primitives/slot';
-import type { SlottableTextProps, TextRef } from '@rn-primitives/types';
 import * as React from 'react';
 import { Platform, Text as RNText } from 'react-native';
 import { cn } from '../../lib/utils';
 
-const H1 = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
-    const Component = asChild ? Slot.Text : RNText;
-    return (
-      <Component
-        role='heading'
-        aria-level='1'
-        className={cn(
-          'web:scroll-m-20 text-4xl text-foreground font-extrabold tracking-tight lg:text-5xl web:select-text',
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-
-H1.displayName = 'H1';
-
-const H2 = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
-    const Component = asChild ? Slot.Text : RNText;
-    return (
-      <Component
-        role='heading'
-        aria-level='2'
-        className={cn(
-          'web:scroll-m-20 border-b border-border pb-2 text-3xl text-foreground font-semibold tracking-tight first:mt-0 web:select-text',
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-
-H2.displayName = 'H2';
-
-const H3 = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
-    const Component = asChild ? Slot.Text : RNText;
-    return (
-      <Component
-        role='heading'
-        aria-level='3'
-        className={cn(
-          'web:scroll-m-20 text-2xl text-foreground font-semibold tracking-tight web:select-text',
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-
-H3.displayName = 'H3';
-
-const H4 = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
-    const Component = asChild ? Slot.Text : RNText;
-    return (
-      <Component
-        role='heading'
-        aria-level='4'
-        className={cn(
-          'web:scroll-m-20 text-xl text-foreground font-semibold tracking-tight web:select-text',
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-
-H4.displayName = 'H4';
-
-const P = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
-    const Component = asChild ? Slot.Text : RNText;
-    return (
-      <Component
-        className={cn('text-base text-foreground web:select-text', className)}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-
-P.displayName = 'P';
-
-const BlockQuote = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
-    const Component = asChild ? Slot.Text : RNText;
-    return (
-      <Component
-        // @ts-ignore - role of blockquote renders blockquote element on the web
-        role={Platform.OS === 'web' ? 'blockquote' : undefined}
-        className={cn(
-          'mt-6 native:mt-4 border-l-2 border-border pl-6 native:pl-3 text-base text-foreground italic web:select-text',
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-
-BlockQuote.displayName = 'BlockQuote';
-
-const Code = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
-    const Component = asChild ? Slot.Text : RNText;
-    return (
-      <Component
-        // @ts-ignore - role of code renders code element on the web
-        role={Platform.OS === 'web' ? 'code' : undefined}
-        className={cn(
-          'relative rounded-md bg-muted px-[0.3rem] py-[0.2rem] text-sm text-foreground font-semibold web:select-text',
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-
-Code.displayName = 'Code';
-
-const Lead = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
-    const Component = asChild ? Slot.Text : RNText;
-    return (
-      <Component
-        className={cn('text-xl text-muted-foreground web:select-text', className)}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-
-Lead.displayName = 'Lead';
-
-const Large = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
-    const Component = asChild ? Slot.Text : RNText;
-    return (
-      <Component
-        className={cn('text-xl text-foreground font-semibold web:select-text', className)}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-
-Large.displayName = 'Large';
-
-const Small = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
-    const Component = asChild ? Slot.Text : RNText;
-    return (
-      <Component
-        className={cn(
-          'text-sm text-foreground font-medium leading-none web:select-text',
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-
-Small.displayName = 'Small';
-
-const Muted = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
-    const Component = asChild ? Slot.Text : RNText;
-    return (
-      <Component
-        className={cn('text-sm text-muted-foreground web:select-text', className)}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-
-Muted.displayName = 'Muted';
+type TypographyProps = React.ComponentProps<typeof RNText> & {
+  ref?: React.RefObject<RNText>;
+  asChild?: boolean;
+};
+
+function H1({ className, asChild = false, ...props }: TypographyProps) {
+  const Component = asChild ? Slot.Text : RNText;
+  return (
+    <Component
+      role='heading'
+      aria-level='1'
+      className={cn(
+        'web:scroll-m-20 text-4xl text-foreground font-extrabold tracking-tight lg:text-5xl web:select-text',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function H2({ className, asChild = false, ...props }: TypographyProps) {
+  const Component = asChild ? Slot.Text : RNText;
+  return (
+    <Component
+      role='heading'
+      aria-level='2'
+      className={cn(
+        'web:scroll-m-20 border-b border-border pb-2 text-3xl text-foreground font-semibold tracking-tight first:mt-0 web:select-text',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function H3({ className, asChild = false, ...props }: TypographyProps) {
+  const Component = asChild ? Slot.Text : RNText;
+  return (
+    <Component
+      role='heading'
+      aria-level='3'
+      className={cn(
+        'web:scroll-m-20 text-2xl text-foreground font-semibold tracking-tight web:select-text',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function H4({ className, asChild = false, ...props }: TypographyProps) {
+  const Component = asChild ? Slot.Text : RNText;
+  return (
+    <Component
+      role='heading'
+      aria-level='4'
+      className={cn(
+        'web:scroll-m-20 text-xl text-foreground font-semibold tracking-tight web:select-text',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function P({ className, asChild = false, ...props }: TypographyProps) {
+  const Component = asChild ? Slot.Text : RNText;
+  return (
+    <Component className={cn('text-base text-foreground web:select-text', className)} {...props} />
+  );
+}
+
+function BlockQuote({ className, asChild = false, ...props }: TypographyProps) {
+  const Component = asChild ? Slot.Text : RNText;
+  return (
+    <Component
+      // @ts-ignore - role of blockquote renders blockquote element on the web
+      role={Platform.OS === 'web' ? 'blockquote' : undefined}
+      className={cn(
+        'mt-6 native:mt-4 border-l-2 border-border pl-6 native:pl-3 text-base text-foreground italic web:select-text',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function Code({ className, asChild = false, ...props }: TypographyProps) {
+  const Component = asChild ? Slot.Text : RNText;
+  return (
+    <Component
+      // @ts-ignore - role of code renders code element on the web
+      role={Platform.OS === 'web' ? 'code' : undefined}
+      className={cn(
+        'relative rounded-md bg-muted px-[0.3rem] py-[0.2rem] text-sm text-foreground font-semibold web:select-text',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function Lead({ className, asChild = false, ...props }: TypographyProps) {
+  const Component = asChild ? Slot.Text : RNText;
+  return (
+    <Component
+      className={cn('text-xl text-muted-foreground web:select-text', className)}
+      {...props}
+    />
+  );
+}
+
+function Large({ className, asChild = false, ...props }: TypographyProps) {
+  const Component = asChild ? Slot.Text : RNText;
+  return (
+    <Component
+      className={cn('text-xl text-foreground font-semibold web:select-text', className)}
+      {...props}
+    />
+  );
+}
+
+function Small({ className, asChild = false, ...props }: TypographyProps) {
+  const Component = asChild ? Slot.Text : RNText;
+  return (
+    <Component
+      className={cn('text-sm text-foreground font-medium leading-none web:select-text', className)}
+      {...props}
+    />
+  );
+}
+
+function Muted({ className, asChild = false, ...props }: TypographyProps) {
+  const Component = asChild ? Slot.Text : RNText;
+  return (
+    <Component
+      className={cn('text-sm text-muted-foreground web:select-text', className)}
+      {...props}
+    />
+  );
+}
 
 export { BlockQuote, Code, H1, H2, H3, H4, Large, Lead, Muted, P, Small };