@react-native-reusables/cli 0.0.9 → 0.0.11

package/dist/generated/components/ui/table.tsx

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import * as TablePrimitive from '@rnr/table';
+import { cn } from '../../lib/utils';
+import { TextClassContext } from './text';
+
+const Table = React.forwardRef<
+  React.ElementRef<typeof TablePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TablePrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <TablePrimitive.Root
+    ref={ref}
+    className={cn('w-full caption-bottom text-sm', className)}
+    {...props}
+  />
+));
+Table.displayName = 'Table';
+
+const TableHeader = React.forwardRef<
+  React.ElementRef<typeof TablePrimitive.Header>,
+  React.ComponentPropsWithoutRef<typeof TablePrimitive.Header>
+>(({ className, ...props }, ref) => (
+  <TablePrimitive.Header
+    ref={ref}
+    className={cn('border-border [&_tr]:border-b', className)}
+    {...props}
+  />
+));
+TableHeader.displayName = 'TableHeader';
+
+const TableBody = React.forwardRef<
+  React.ElementRef<typeof TablePrimitive.Body>,
+  React.ComponentPropsWithoutRef<typeof TablePrimitive.Body>
+>(({ className, style, ...props }, ref) => (
+  <TablePrimitive.Body
+    ref={ref}
+    className={cn('flex-1 border-border [&_tr:last-child]:border-0', className)}
+    style={[{ minHeight: 2 }, style]}
+    {...props}
+  />
+));
+TableBody.displayName = 'TableBody';
+
+const TableFooter = React.forwardRef<
+  React.ElementRef<typeof TablePrimitive.Footer>,
+  React.ComponentPropsWithoutRef<typeof TablePrimitive.Footer>
+>(({ className, ...props }, ref) => (
+  <TablePrimitive.Footer
+    ref={ref}
+    className={cn('bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}
+    {...props}
+  />
+));
+TableFooter.displayName = 'TableFooter';
+
+const TableRow = React.forwardRef<
+  React.ElementRef<typeof TablePrimitive.Row>,
+  React.ComponentPropsWithoutRef<typeof TablePrimitive.Row>
+>(({ className, ...props }, ref) => (
+  <TablePrimitive.Row
+    ref={ref}
+    className={cn(
+      'flex-row border-border border-b web:transition-colors web:hover:bg-muted/50 web:data-[state=selected]:bg-muted',
+      className
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = 'TableRow';
+
+const TableHead = React.forwardRef<
+  React.ElementRef<typeof TablePrimitive.Head>,
+  React.ComponentPropsWithoutRef<typeof TablePrimitive.Head>
+>(({ className, ...props }, ref) => (
+  <TextClassContext.Provider value='text-muted-foreground'>
+    <TablePrimitive.Head
+      ref={ref}
+      className={cn(
+        'h-12 px-4 text-left justify-center font-medium [&:has([role=checkbox])]:pr-0',
+        className
+      )}
+      {...props}
+    />
+  </TextClassContext.Provider>
+));
+TableHead.displayName = 'TableHead';
+
+const TableCell = React.forwardRef<
+  React.ElementRef<typeof TablePrimitive.Cell>,
+  React.ComponentPropsWithoutRef<typeof TablePrimitive.Cell>
+>(({ className, ...props }, ref) => (
+  <TablePrimitive.Cell
+    ref={ref}
+    className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
+    {...props}
+  />
+));
+TableCell.displayName = 'TableCell';
+
+export { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/dist/generated/components/ui/tabs.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { TextClassContext } from './text';
+import * as TabsPrimitive from '@rnr/tabs';
+import { cn } from '../../lib/utils';
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      'web:inline-flex h-10 native:h-12 items-center justify-center rounded-md bg-muted p-1 native:px-1.5',
+      className
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => {
+  const { value } = TabsPrimitive.useRootContext();
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        'text-sm native:text-base font-medium text-muted-foreground web:transition-all',
+        value === props.value && 'text-foreground'
+      )}
+    >
+      <TabsPrimitive.Trigger
+        ref={ref}
+        className={cn(
+          'inline-flex items-center justify-center web:whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium web:ring-offset-background web:transition-all web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
+          props.disabled && 'web:pointer-events-none opacity-50',
+          props.value === value && 'bg-background shadow-lg shadow-foreground/10',
+          className
+        )}
+        {...props}
+      />
+    </TextClassContext.Provider>
+  );
+});
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      'web:ring-offset-background web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
+      className
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/dist/generated/components/ui/text.tsx

@@ -0,0 +1,24 @@
+import * as Slot from '@rnr/slot';
+import { SlottableTextProps, TextRef } from '@rnr/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';
+
+export { Text, TextClassContext };

package/dist/generated/components/ui/textarea.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { TextInput } from 'react-native';
+import { cn } from '../../lib/utils';
+
+const Textarea = React.forwardRef<
+  React.ElementRef<typeof TextInput>,
+  React.ComponentPropsWithoutRef<typeof TextInput>
+>(({ 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';
+
+export { Textarea };

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

@@ -0,0 +1,86 @@
+import { VariantProps } from 'class-variance-authority';
+import type { LucideIcon } from 'lucide-react-native';
+import * as React from 'react';
+import { toggleTextVariants, toggleVariants } from '../../components/ui/toggle';
+import { TextClassContext } from './text';
+import * as ToggleGroupPrimitive from '@rnr/toggle-group';
+import { cn } from '../../lib/utils';
+
+const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants> | null>(null);
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    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 useToggleGroupContext() {
+  const context = React.useContext(ToggleGroupContext);
+  if (context === null) {
+    throw new Error(
+      'ToggleGroup compound components cannot be rendered outside the ToggleGroup component'
+    );
+  }
+  return context;
+}
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = useToggleGroupContext();
+  const { value } = ToggleGroupPrimitive.useRootContext();
+
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        toggleTextVariants({ variant, size }),
+        ToggleGroupPrimitive.utils.getIsSelected(value, props.value)
+          ? 'text-accent-foreground'
+          : 'web:group-hover:text-muted-foreground'
+      )}
+    >
+      <ToggleGroupPrimitive.Item
+        ref={ref}
+        className={cn(
+          toggleVariants({
+            variant: context.variant || variant,
+            size: context.size || size,
+          }),
+          props.disabled && 'web:pointer-events-none opacity-50',
+          ToggleGroupPrimitive.utils.getIsSelected(value, props.value) && 'bg-accent',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </ToggleGroupPrimitive.Item>
+    </TextClassContext.Provider>
+  );
+});
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+
+function ToggleGroupIcon({
+  className,
+  icon: Icon,
+  ...props
+}: React.ComponentPropsWithoutRef<LucideIcon> & {
+  icon: LucideIcon;
+}) {
+  const textClass = React.useContext(TextClassContext);
+  return <Icon className={cn(textClass, className)} {...props} />;
+}
+
+export { ToggleGroup, ToggleGroupIcon, ToggleGroupItem };

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

@@ -0,0 +1,85 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import type { LucideIcon } from 'lucide-react-native';
+import * as React from 'react';
+import { TextClassContext } from './text';
+import * as TogglePrimitive from '@rnr/toggle';
+import { cn } from '../../lib/utils';
+
+const toggleVariants = cva(
+  'web:group web:inline-flex items-center justify-center rounded-md web:ring-offset-background web:transition-colors web:hover:bg-muted active:bg-muted web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline:
+          'border border-input bg-transparent web:hover:bg-accent active:bg-accent active:bg-accent',
+      },
+      size: {
+        default: 'h-10 px-3 native:h-12 native:px-[12]',
+        sm: 'h-9 px-2.5 native:h-10 native:px-[9]',
+        lg: 'h-11 px-5 native:h-14 native:px-6',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+const toggleTextVariants = cva('text-sm native:text-base text-foreground font-medium', {
+  variants: {
+    variant: {
+      default: '',
+      outline: 'web:group-hover:text-accent-foreground web:group-active:text-accent-foreground',
+    },
+    size: {
+      default: '',
+      sm: '',
+      lg: '',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+    size: 'default',
+  },
+});
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & 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',
+        className
+      )}
+      {...props}
+    />
+  </TextClassContext.Provider>
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+function ToggleIcon({
+  className,
+  icon: Icon,
+  ...props
+}: React.ComponentPropsWithoutRef<LucideIcon> & {
+  icon: LucideIcon;
+}) {
+  const textClass = React.useContext(TextClassContext);
+  return <Icon className={cn(textClass, className)} {...props} />;
+}
+
+export { Toggle, ToggleIcon, toggleTextVariants, toggleVariants };

package/dist/generated/components/ui/tooltip.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { Platform, StyleSheet } from 'react-native';
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
+import { TextClassContext } from './text';
+import * as TooltipPrimitive from '@rnr/tooltip';
+import { cn } from '../../lib/utils';
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Overlay style={Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined}>
+      <Animated.View entering={FadeIn} exiting={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;
+
+export { Tooltip, TooltipContent, TooltipTrigger };

package/dist/generated/components/ui/typography.tsx

@@ -0,0 +1,204 @@
+import * as Slot from '@rnr/slot';
+import { SlottableTextProps, TextRef } from '@rnr/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';
+
+export { BlockQuote, Code, H1, H2, H3, H4, Large, Lead, Muted, P, Small };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-reusables/cli",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "Add Universal components and primitives to your React-Native project.",
   "publishConfig": {
     "access": "public"
@@ -100,18 +100,18 @@
   },
   "scripts": {
     "gen": "tsx src/scripts/write-components.ts",
-    "dev": "pnpm gen && tsup --watch",
-    "build": "pnpm gen && tsup",
+    "dev": "tsup --watch",
+    "build": "tsup",
     "typecheck": "tsc --noEmit",
     "clean": "rimraf dist && rimraf components",
-    "start:dev": "pnpm gen && node dist/index.js",
-    "start": "pnpm gen && node dist/index.js",
+    "start:dev": "node dist/index.js",
+    "start": "node dist/index.js",
     "format:write": "prettier --write \"**/*.{ts,tsx,mdx}\" --cache",
     "format:check": "prettier --check \"**/*.{ts,tsx,mdx}\" --cache",
     "release": "changeset version",
-    "pub:beta": "pnpm build && pnpm publish --no-git-checks --access public --tag beta",
-    "pub:next": "pnpm build && pnpm publish --no-git-checks --access public --tag next",
-    "pub:release": "pnpm build && pnpm publish --no-git-checks --access public",
+    "pub:beta": "pnpm publish --no-git-checks --access public --tag beta",
+    "pub:next": "pnpm publish --no-git-checks --access public --tag next",
+    "pub:release": "pnpm publish --access public",
     "test": "vitest run"
   }
 }