@gv-tech/ui-native 2.6.0

package/src/select.tsx

@@ -0,0 +1,229 @@
+import {
+  SelectBaseProps,
+  SelectContentBaseProps,
+  SelectGroupBaseProps,
+  SelectItemBaseProps,
+  SelectLabelBaseProps,
+  SelectScrollDownButtonBaseProps,
+  SelectScrollUpButtonBaseProps,
+  SelectSeparatorBaseProps,
+  SelectTriggerBaseProps,
+  SelectValueBaseProps,
+} from '@gv-tech/ui-core';
+import * as SelectPrimitive from '@rn-primitives/select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react-native';
+import * as React from 'react';
+import { Platform, StyleSheet, View, type ViewStyle } from 'react-native';
+import Animated from 'react-native-reanimated';
+
+import { cn } from './lib/utils';
+
+export interface SelectProps
+  extends
+    Omit<
+      React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>,
+      'value' | 'defaultValue' | 'onValueChange' | 'disabled'
+    >,
+    SelectBaseProps {}
+
+const Select = SelectPrimitive.Root;
+
+export interface SelectGroupProps
+  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>, SelectGroupBaseProps {}
+
+const SelectGroup = SelectPrimitive.Group;
+
+export interface SelectValueProps
+  extends Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>, 'placeholder'>, SelectValueBaseProps {}
+
+const SelectValue = SelectPrimitive.Value;
+
+export interface SelectTriggerProps
+  extends
+    Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, 'children' | 'disabled'>,
+    SelectTriggerBaseProps {}
+
+const SelectTrigger = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Trigger>, SelectTriggerProps>(
+  ({ className, children, ...props }, ref) => (
+    <SelectPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex flex-row h-10 native:h-12 items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm text-muted-foreground web:ring-offset-background web:focus:outline-none web:focus:ring-2 web:focus:ring-ring web:focus:ring-offset-2 [&>span]:line-clamp-1',
+        props.disabled && 'web:cursor-not-allowed opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <>{children}</>
+      <ChevronDown size={16} aria-hidden={true} className="text-foreground opacity-50" />
+    </SelectPrimitive.Trigger>
+  ),
+);
+SelectTrigger.displayName = SelectPrimitive.Trigger?.displayName || 'SelectTrigger';
+
+export interface SelectScrollUpButtonProps
+  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>, SelectScrollUpButtonBaseProps {}
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  SelectScrollUpButtonProps
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    // @ts-expect-error TODO: fix type
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <ChevronUp size={14} className="text-foreground" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName =
+  ((SelectPrimitive.ScrollUpButton as unknown as Record<string, unknown>)?.displayName as string | undefined) ||
+  'SelectScrollUpButton';
+
+export interface SelectScrollDownButtonProps
+  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>, SelectScrollDownButtonBaseProps {}
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  SelectScrollDownButtonProps
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    // @ts-expect-error TODO: fix type
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <ChevronDown size={14} className="text-foreground" />
+  </SelectPrimitive.ScrollDownButton>
+));
+
+SelectScrollDownButton.displayName =
+  ((SelectPrimitive.ScrollDownButton as unknown as Record<string, unknown>)?.displayName as string | undefined) ||
+  'SelectScrollDownButton';
+
+export interface SelectContentProps
+  extends Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>, 'position'>, SelectContentBaseProps {
+  portalHost?: string;
+  overlayClassName?: string;
+  overlayStyle?: ViewStyle;
+}
+
+const SelectContent = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Content>, SelectContentProps>(
+  ({ className, children, position = 'popper', portalHost, overlayClassName, overlayStyle, ...props }, ref) => {
+    const { open } = SelectPrimitive.useRootContext();
+
+    return (
+      <SelectPrimitive.Portal hostName={portalHost}>
+        <SelectPrimitive.Overlay style={Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined} asChild>
+          <Animated.View className={overlayClassName} style={overlayStyle} />
+        </SelectPrimitive.Overlay>
+        <SelectPrimitive.Content
+          ref={ref}
+          className={cn(
+            'relative z-50 max-h-96 min-w-[8rem] rounded-md border border-border bg-popover shadow-md 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',
+            position === 'popper' &&
+              'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+            open ? 'web:zoom-in-95 web:animate-in web:fade-in-0' : 'web:zoom-out-95 web:animate-out web:fade-out-0',
+            className,
+          )}
+          position={position}
+          {...props}
+        >
+          <SelectScrollUpButton />
+          <SelectPrimitive.Viewport
+            className={cn(
+              'p-1',
+              position === 'popper' &&
+                'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+            )}
+          >
+            {children}
+          </SelectPrimitive.Viewport>
+          <SelectScrollDownButton />
+        </SelectPrimitive.Content>
+      </SelectPrimitive.Portal>
+    );
+  },
+);
+SelectContent.displayName = SelectPrimitive.Content?.displayName || 'SelectContent';
+
+export interface SelectLabelProps
+  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>, SelectLabelBaseProps {}
+
+const SelectLabel = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Label>, SelectLabelProps>(
+  ({ className, ...props }, ref) => (
+    <SelectPrimitive.Label
+      ref={ref}
+      className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold text-popover-foreground', className)}
+      {...props}
+    />
+  ),
+);
+SelectLabel.displayName = SelectPrimitive.Label?.displayName || 'SelectLabel';
+
+export interface SelectItemProps
+  extends
+    Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>, 'children' | 'disabled' | 'label'>,
+    SelectItemBaseProps {
+  label?: string;
+}
+
+const SelectItem = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Item>, SelectItemProps>(
+  ({ className, children, label, ...props }, ref) => {
+    const itemLabel = label || (typeof children === 'string' ? children : '');
+    return (
+      <SelectPrimitive.Item
+        ref={ref}
+        label={itemLabel}
+        className={cn(
+          'relative flex w-full cursor-default select-none flex-row items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none web:hover:bg-accent/50 web:focus:bg-accent web:focus:text-accent-foreground web:hover:text-accent-foreground data-[disabled]:opacity-50',
+          props.disabled && 'web:pointer-events-none',
+          className,
+        )}
+        {...props}
+      >
+        <View
+          className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
+          {...({} as Record<string, unknown>)}
+        >
+          <SelectPrimitive.ItemIndicator>
+            <Check size={14} strokeWidth={3} className="text-popover-foreground" {...({} as Record<string, unknown>)} />
+          </SelectPrimitive.ItemIndicator>
+        </View>
+        {/* @ts-expect-error TODO: fix type */}
+        <SelectPrimitive.ItemText className="text-sm text-popover-foreground native:text-base">
+          {children}
+        </SelectPrimitive.ItemText>
+      </SelectPrimitive.Item>
+    );
+  },
+);
+SelectItem.displayName = SelectPrimitive.Item?.displayName || 'SelectItem';
+
+export interface SelectSeparatorProps
+  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>, SelectSeparatorBaseProps {}
+
+const SelectSeparator = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Separator>, SelectSeparatorProps>(
+  ({ className, ...props }, ref) => (
+    <SelectPrimitive.Separator
+      ref={ref}
+      className={cn('-mx-1 my-1 h-px bg-muted', className)}
+      {...(props as Record<string, unknown>)}
+    />
+  ),
+);
+SelectSeparator.displayName = SelectPrimitive.Separator?.displayName || 'SelectSeparator';
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};

package/src/separator.tsx

@@ -0,0 +1,20 @@
+import * as SeparatorPrimitive from '@rn-primitives/separator';
+import * as React from 'react';
+
+import { cn } from './lib/utils';
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn('shrink-0 bg-border', orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]', className)}
+    {...props}
+  />
+));
+Separator.displayName = SeparatorPrimitive.Root?.displayName || 'Separator';
+
+export { Separator };

package/src/sheet.tsx

@@ -0,0 +1,127 @@
+import * as DialogPrimitive from '@rn-primitives/dialog';
+import { X } from 'lucide-react-native';
+import * as React from 'react';
+import { Platform, StyleSheet, View, type ViewStyle } from 'react-native';
+import Animated, { FadeIn, FadeOut, SlideInRight, SlideOutRight } from 'react-native-reanimated';
+
+import { type DialogContentProps } from './dialog';
+import { cn } from './lib/utils';
+import { Text } from './text';
+
+const Sheet = DialogPrimitive.Root;
+
+const SheetTrigger = DialogPrimitive.Trigger;
+
+const SheetClose = DialogPrimitive.Close;
+
+const SheetPortal = DialogPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => {
+  return (
+    <DialogPrimitive.Overlay
+      style={Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined}
+      asChild
+      ref={ref}
+      {...props}
+    >
+      <Animated.View
+        entering={FadeIn.duration(150)}
+        exiting={FadeOut.duration(150)}
+        className={cn('absolute inset-0 z-50 bg-black/80  web:cursor-default', className)}
+      />
+    </DialogPrimitive.Overlay>
+  );
+});
+SheetOverlay.displayName = DialogPrimitive.Overlay?.displayName || 'SheetOverlay';
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  DialogContentProps & {
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    overlayClassName?: string;
+    overlayStyle?: ViewStyle;
+  }
+>(({ className, children, side = 'right', overlayClassName, overlayStyle, ...props }, ref) => {
+  const isWeb = Platform.OS === 'web';
+  // TODO: Add support for other sides
+  const entering = isWeb ? undefined : SlideInRight;
+  const exiting = isWeb ? undefined : SlideOutRight;
+
+  return (
+    <SheetPortal>
+      <SheetOverlay className={overlayClassName} style={overlayStyle} />
+      <DialogPrimitive.Content ref={ref} asChild {...props}>
+        <Animated.View
+          entering={entering}
+          exiting={exiting}
+          className={cn(
+            'absolute z-50 h-full w-3/4 gap-4 bg-background p-6 shadow-lg web:cursor-default web:duration-200 web:ease-in-out',
+            side === 'right' &&
+              'right-0 top-0 border-l border-border data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right',
+            side === 'left' &&
+              'left-0 top-0 border-r border-border data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left',
+            side === 'top' &&
+              'top-0 w-full border-b border-border data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+            side === 'bottom' &&
+              'bottom-0 w-full border-t border-border data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+            className,
+          )}
+        >
+          {children}
+          <DialogPrimitive.Close
+            className={cn(
+              'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary',
+              'web:absolute web:right-4 web:top-4',
+            )}
+          >
+            <X size={24} className="text-muted-foreground" />
+            <Text className="sr-only">Close</Text>
+          </DialogPrimitive.Close>
+        </Animated.View>
+      </DialogPrimitive.Content>
+    </SheetPortal>
+  );
+});
+SheetContent.displayName = DialogPrimitive.Content?.displayName || 'SheetContent';
+
+const SheetHeader = ({ className, ...props }: React.ComponentPropsWithoutRef<typeof View>) => (
+  <View className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
+);
+SheetHeader.displayName = 'SheetHeader';
+
+const SheetFooter = ({ className, ...props }: React.ComponentPropsWithoutRef<typeof View>) => (
+  <View className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
+);
+SheetFooter.displayName = 'SheetFooter';
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title ref={ref} className={cn('text-lg font-semibold text-foreground', className)} {...props} />
+));
+SheetTitle.displayName = DialogPrimitive.Title?.displayName || 'SheetTitle';
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+));
+SheetDescription.displayName = DialogPrimitive.Description?.displayName || 'SheetDescription';
+
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+};

package/src/skeleton.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from 'react-native-reanimated';
+
+import { cn } from './lib/utils';
+
+function Skeleton({ className, ...props }: React.ComponentPropsWithoutRef<typeof View>) {
+  const opacity = useSharedValue(0.5);
+
+  React.useEffect(() => {
+    opacity.value = withRepeat(
+      withSequence(withTiming(0.2, { duration: 500 }), withTiming(0.5, { duration: 500 })),
+      -1,
+      true,
+    );
+  }, []);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
+
+  return <Animated.View className={cn('rounded-md bg-muted', className)} style={animatedStyle} {...props} />;
+}
+
+export { Skeleton };

package/src/slider.tsx

@@ -0,0 +1,9 @@
+import { Text, View } from 'react-native';
+
+export const Slider = () => {
+  return (
+    <View>
+      <Text>slider is not yet implemented for React Native</Text>
+    </View>
+  );
+};

package/src/sonner.tsx

@@ -0,0 +1,9 @@
+import { Text, View } from 'react-native';
+
+export const Toaster = () => {
+  return (
+    <View>
+      <Text>Toaster (Sonner) is not yet implemented for React Native</Text>
+    </View>
+  );
+};

package/src/switch.tsx

@@ -0,0 +1,34 @@
+import { SwitchBaseProps } from '@gv-tech/ui-core';
+import * as SwitchPrimitive from '@rn-primitives/switch';
+import * as React from 'react';
+
+import { cn } from './lib/utils';
+
+export interface SwitchProps
+  extends
+    Omit<React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, 'checked' | 'onCheckedChange'>,
+    SwitchBaseProps {}
+
+const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitive.Root>, SwitchProps>(
+  ({ className, checked, onCheckedChange, ...props }, ref) => (
+    <SwitchPrimitive.Root
+      className={cn(
+        'peer inline-flex h-6 w-11 shrink-0 cursor-pointer flex-row items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+        className,
+      )}
+      {...props}
+      checked={checked ?? false}
+      onCheckedChange={onCheckedChange || (() => {})}
+      ref={ref}
+    >
+      <SwitchPrimitive.Thumb
+        className={cn(
+          'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
+        )}
+      />
+    </SwitchPrimitive.Root>
+  ),
+);
+Switch.displayName = SwitchPrimitive.Root?.displayName || 'Switch';
+
+export { Switch };

package/src/table.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { cn } from './lib/utils';
+import { Text } from './text';
+
+const Table = React.forwardRef<React.ElementRef<typeof View>, React.ComponentPropsWithoutRef<typeof View>>(
+  ({ className, ...props }, ref) => (
+    <View ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
+  ),
+);
+Table.displayName = 'Table';
+
+const TableHeader = React.forwardRef<React.ElementRef<typeof View>, React.ComponentPropsWithoutRef<typeof View>>(
+  ({ className, ...props }, ref) => <View ref={ref} className={cn('border-b border-border', className)} {...props} />,
+);
+TableHeader.displayName = 'TableHeader';
+
+const TableBody = React.forwardRef<React.ElementRef<typeof View>, React.ComponentPropsWithoutRef<typeof View>>(
+  ({ className, ...props }, ref) => <View ref={ref} className={cn('flex-1', className)} {...props} />,
+);
+TableBody.displayName = 'TableBody';
+
+const TableFooter = React.forwardRef<React.ElementRef<typeof View>, React.ComponentPropsWithoutRef<typeof View>>(
+  ({ className, ...props }, ref) => (
+    <View 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 View>, React.ComponentPropsWithoutRef<typeof View>>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn(
+        'flex-row border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+TableRow.displayName = 'TableRow';
+
+const TableHead = React.forwardRef<React.ElementRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
+  ({ className, ...props }, ref) => (
+    <Text
+      ref={ref}
+      className={cn(
+        'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+TableHead.displayName = 'TableHead';
+
+const TableCell = React.forwardRef<React.ElementRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
+  ({ className, ...props }, ref) => (
+    <Text ref={ref} className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)} {...props} />
+  ),
+);
+TableCell.displayName = 'TableCell';
+
+const TableCaption = React.forwardRef<React.ElementRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
+  ({ className, ...props }, ref) => (
+    <Text ref={ref} className={cn('mt-4 text-sm text-muted-foreground', className)} {...props} />
+  ),
+);
+TableCaption.displayName = 'TableCaption';
+
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/src/tabs.tsx

@@ -0,0 +1,74 @@
+import { TabsBaseProps, TabsContentBaseProps, TabsListBaseProps, TabsTriggerBaseProps } from '@gv-tech/ui-core';
+import * as TabsPrimitive from '@rn-primitives/tabs';
+import * as React from 'react';
+
+import { cn } from './lib/utils';
+import { TextClassContext } from './text';
+
+const Tabs = TabsPrimitive.Root;
+
+export interface TabsProps
+  extends Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>, 'onValueChange' | 'value'>, TabsBaseProps {}
+export interface TabsListProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>, TabsListBaseProps {}
+export interface TabsTriggerProps
+  extends
+    Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>, 'children' | 'disabled'>,
+    TabsTriggerBaseProps {}
+export interface TabsContentProps
+  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>, TabsContentBaseProps {}
+
+const TabsList = React.forwardRef<React.ElementRef<typeof TabsPrimitive.List>, TabsListProps>(
+  ({ className, ...props }, ref) => (
+    <TabsPrimitive.List
+      ref={ref}
+      className={cn(
+        'h-10 inline-flex flex-row items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+TabsList.displayName = TabsPrimitive.List?.displayName || 'TabsList';
+
+const TabsTrigger = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Trigger>, TabsTriggerProps>(
+  ({ 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 whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+            props.disabled && 'opacity-50',
+            value === props.value && 'bg-background shadow-sm shadow-foreground/10',
+            className,
+          )}
+          {...props}
+        />
+      </TextClassContext.Provider>
+    );
+  },
+);
+TabsTrigger.displayName = TabsPrimitive.Trigger?.displayName || 'TabsTrigger';
+
+const TabsContent = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Content>, TabsContentProps>(
+  ({ className, ...props }, ref) => (
+    <TabsPrimitive.Content
+      ref={ref}
+      className={cn(
+        'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+TabsContent.displayName = TabsPrimitive.Content?.displayName || 'TabsContent';
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/src/text.tsx

@@ -0,0 +1,43 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { Text as RNText } from 'react-native';
+
+import type { TextBaseProps } from '@gv-tech/ui-core';
+import { cn } from './lib/utils';
+
+const TextClassContext = React.createContext<string | undefined>(undefined);
+
+const textVariants = cva('text-foreground', {
+  variants: {
+    variant: {
+      h1: 'text-4xl font-extrabold tracking-tight',
+      h2: 'text-3xl font-semibold tracking-tight',
+      h3: 'text-2xl font-semibold tracking-tight',
+      h4: 'text-xl font-semibold tracking-tight',
+      body: 'text-base leading-7',
+      bodySmall: 'text-sm leading-6',
+      caption: 'text-xs text-muted-foreground',
+      label: 'text-sm font-medium',
+      overline: 'text-xs font-semibold uppercase tracking-widest text-muted-foreground',
+    },
+  },
+  defaultVariants: {
+    variant: 'body',
+  },
+});
+
+export interface TextProps
+  extends React.ComponentPropsWithoutRef<typeof RNText>, VariantProps<typeof textVariants>, TextBaseProps {}
+
+const Text = React.forwardRef<React.ElementRef<typeof RNText>, TextProps>(
+  ({ className, variant = 'body', children, ...props }, ref) => {
+    return (
+      <RNText ref={ref} className={cn(textVariants({ variant, className }))} {...props}>
+        {children}
+      </RNText>
+    );
+  },
+);
+Text.displayName = 'Text';
+
+export { Text, TextClassContext, textVariants };