@gv-tech/ui-native 2.6.0

package/src/command.tsx

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

package/src/context-menu.tsx

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

package/src/dialog.tsx

@@ -0,0 +1,121 @@
+import { DialogBaseProps, DialogContentBaseProps } from '@gv-tech/ui-core';
+import * as DialogPrimitive from '@rn-primitives/dialog';
+import { X } from 'lucide-react-native';
+import * as React from 'react';
+import { StyleSheet, View, type ViewStyle } from 'react-native';
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
+
+import { cn } from './lib/utils';
+
+const Dialog = DialogPrimitive.Root;
+
+export interface DialogProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>, DialogBaseProps {}
+
+export interface DialogContentProps
+  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, DialogContentBaseProps {
+  portalHost?: string;
+  overlayClassName?: string;
+  overlayStyle?: ViewStyle;
+}
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => {
+  return (
+    <DialogPrimitive.Overlay style={StyleSheet.absoluteFill} asChild ref={ref} {...props}>
+      <Animated.View
+        entering={FadeIn.duration(150)}
+        exiting={FadeOut.duration(150)}
+        className={cn('z-50 bg-black/80 flex justify-center items-center p-2', className)}
+      />
+    </DialogPrimitive.Overlay>
+  );
+});
+DialogOverlay.displayName = DialogPrimitive.Overlay?.displayName || 'DialogOverlay';
+
+const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Content>, DialogContentProps>(
+  ({ className, children, portalHost, overlayClassName, overlayStyle, ...props }, ref) => {
+    return (
+      <DialogPortal hostName={portalHost}>
+        <DialogOverlay className={overlayClassName} style={overlayStyle} />
+        <DialogPrimitive.Content ref={ref} asChild {...props}>
+          <Animated.View
+            entering={FadeIn.duration(150)}
+            exiting={FadeOut.duration(150)}
+            className={cn(
+              'z-50 max-w-lg gap-4 border border-border bg-background p-6 shadow-lg sm:rounded-lg w-full rounded-xl',
+              className,
+            )}
+          >
+            {children}
+            <DialogPrimitive.Close
+              className={
+                '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-accent data-[state=open]:text-muted-foreground'
+              }
+            >
+              <X size={18} className="text-muted-foreground" />
+              <View className="sr-only">
+                <DialogPrimitive.Title>Close</DialogPrimitive.Title>
+              </View>
+            </DialogPrimitive.Close>
+          </Animated.View>
+        </DialogPrimitive.Content>
+      </DialogPortal>
+    );
+  },
+);
+DialogContent.displayName = DialogPrimitive.Content?.displayName || 'DialogContent';
+
+const DialogHeader = ({ className, ...props }: React.ComponentPropsWithoutRef<typeof View>) => (
+  <View className={cn('flex flex-col gap-1.5 text-center sm:text-left', className)} {...props} />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({ className, ...props }: React.ComponentPropsWithoutRef<typeof View>) => (
+  <View className={cn('flex flex-col-reverse sm:flex-row sm:justify-end gap-2', className)} {...props} />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg native:text-xl font-semibold leading-none tracking-tight text-foreground', className)}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title?.displayName || 'DialogTitle';
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm native:text-base text-muted-foreground', className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description?.displayName || 'DialogDescription';
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};

package/src/drawer.tsx

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

package/src/dropdown-menu.tsx

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

package/src/form.tsx

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

package/src/hover-card.tsx

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

package/src/index.ts

@@ -0,0 +1,209 @@
+// @gv-tech/ui-native
+//
+// React Native implementations of the GV Tech design system components.
+// Each component satisfies the contracts defined in @gv-tech/ui-core.
+
+// Utilities
+export { wrapTextChildren } from './lib/render-native';
+export { cn } from './lib/utils';
+
+// Accordion
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './accordion';
+
+// Alert
+export { Alert, AlertDescription, AlertTitle } from './alert';
+
+// Alert Dialog
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from './alert-dialog';
+
+// Aspect Ratio
+export { AspectRatio } from './aspect-ratio';
+
+// Avatar
+export { Avatar, AvatarFallback, AvatarImage } from './avatar';
+
+// Badge
+export { Badge, badgeVariants } from './badge';
+
+// Breadcrumb
+export { Breadcrumb } from './breadcrumb';
+
+// Button
+export { Button, buttonVariants } from './button';
+export type { ButtonProps } from './button';
+
+// Calendar
+export { Calendar } from './calendar';
+
+// Card
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './card';
+export type { CardProps } from './card';
+
+// Carousel
+export { Carousel } from './carousel';
+
+// Chart
+export { Chart } from './chart';
+
+// Checkbox
+export { Checkbox } from './checkbox';
+export type { CheckboxProps } from './checkbox';
+
+// Collapsible
+export { Collapsible, CollapsibleContent, CollapsibleTrigger } from './collapsible';
+
+// Command
+export { Command } from './command';
+
+// Context Menu
+export { ContextMenu } from './context-menu';
+
+// Dialog
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from './dialog';
+export type { DialogProps } from './dialog';
+
+// Drawer
+export { Drawer } from './drawer';
+
+// Dropdown Menu
+export { DropdownMenu } from './dropdown-menu';
+
+// Form
+export { Form } from './form';
+
+// Hover Card
+export { HoverCard } from './hover-card';
+
+// Input
+export { Input } from './input';
+export type { InputProps } from './input';
+
+// Label
+export { Label } from './label';
+
+// Menubar
+export { Menubar } from './menubar';
+
+// Navigation Menu
+export { NavigationMenu } from './navigation-menu';
+
+// Pagination
+export { Pagination } from './pagination';
+
+// Popover
+export { Popover } from './popover';
+
+// Progress
+export { Progress } from './progress';
+
+// Radio
+export { RadioGroup, RadioGroupItem } from './radio-group';
+export type { RadioGroupItemProps, RadioGroupProps } from './radio-group';
+
+// Resizable
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup } from './resizable';
+
+// Scroll Area
+export { ScrollArea } from './scroll-area';
+
+// Search
+export { Search } from './search';
+
+// Select
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from './select';
+
+// Separator
+export { Separator } from './separator';
+
+// Sheet
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+} from './sheet';
+
+// Skeleton
+export { Skeleton } from './skeleton';
+
+// Slider
+export { Slider } from './slider';
+
+// Sonner
+export { Toaster as Sonner } from './sonner';
+
+// Switch
+export { Switch } from './switch';
+
+// Table
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from './table';
+
+// Tabs
+export { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs';
+
+// Text
+export { Text, textVariants } from './text';
+export type { TextProps } from './text';
+
+// Textarea
+export { Textarea } from './textarea';
+
+// Toggle
+export { Toggle, toggleVariants } from './toggle';
+
+// Toggle Group
+export { ToggleGroup, ToggleGroupItem } from './toggle-group';
+
+// Tooltip
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip';
+
+// Toast
+export { Toast } from './toast';
+export type { ToastProps } from './toast';
+
+// Theme Provider
+export { ThemeProvider } from './theme-provider';
+
+// Theme Toggle
+export { ThemeToggle } from './theme-toggle';
+
+// Toaster
+export { Toaster } from './toaster';

package/src/input.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { TextInput } from 'react-native';
+
+import type { InputBaseProps } from '@gv-tech/ui-core';
+import { cn } from './lib/utils';
+
+export interface InputProps extends React.ComponentPropsWithoutRef<typeof TextInput>, InputBaseProps {}
+
+const Input = React.forwardRef<React.ElementRef<typeof TextInput>, InputProps>(
+  ({ className, placeholderClassName, ...props }, ref) => {
+    return (
+      <TextInput
+        ref={ref}
+        className={cn(
+          'flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base text-foreground shadow-sm transition-colors placeholder:text-muted-foreground focus:border-ring disabled:opacity-50',
+          className,
+        )}
+        placeholderClassName={cn('text-muted-foreground', placeholderClassName)}
+        {...props}
+      />
+    );
+  },
+);
+
+Input.displayName = 'Input';
+
+export { Input };

package/src/label.tsx

@@ -0,0 +1,29 @@
+import * as LabelPrimitive from '@rn-primitives/label';
+import * as React from 'react';
+
+import { cn } from './lib/utils';
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Text>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Text>
+>(({ className, onPress, onLongPress, onPressIn, onPressOut, ...props }, ref) => (
+  <LabelPrimitive.Root
+    className="web:cursor-default"
+    onPress={onPress}
+    onLongPress={onLongPress}
+    onPressIn={onPressIn}
+    onPressOut={onPressOut}
+  >
+    <LabelPrimitive.Text
+      ref={ref}
+      className={cn(
+        'text-sm text-foreground native:text-base font-medium leading-none web:peer-disabled:cursor-not-allowed web:peer-disabled:opacity-70',
+        className,
+      )}
+      {...props}
+    />
+  </LabelPrimitive.Root>
+));
+Label.displayName = LabelPrimitive.Root?.displayName || 'Label';
+
+export { Label };

package/src/lib/render-native.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Text, type TextProps } from 'react-native';
+
+// Wraps raw strings or numbers in a React Native <Text> component.
+// Prevents "Unexpected text node" errors in React Native environments.
+export function wrapTextChildren(
+  children: React.ReactNode,
+  TextComponent: React.ComponentType<TextProps> = Text,
+  textProps: TextProps = {},
+): React.ReactNode {
+  return React.Children.map(children, (child) => {
+    if (typeof child === 'string' || typeof child === 'number') {
+      return <TextComponent {...textProps}>{child}</TextComponent>;
+    }
+    return child;
+  });
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/menubar.tsx

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

package/src/nativewind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />

package/src/navigation-menu.tsx

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

package/src/pagination.tsx

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

package/src/popover.tsx

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

package/src/progress.tsx

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

package/src/radio-group.tsx

@@ -0,0 +1,42 @@
+import { RadioGroupBaseProps, RadioGroupItemBaseProps } from '@gv-tech/ui-core';
+import * as RadioGroupPrimitive from '@rn-primitives/radio-group';
+import { Circle } from 'lucide-react-native';
+import * as React from 'react';
+
+import { cn } from './lib/utils';
+
+export interface RadioGroupProps
+  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>, RadioGroupBaseProps {}
+
+const RadioGroup = React.forwardRef<React.ElementRef<typeof RadioGroupPrimitive.Root>, RadioGroupProps>(
+  ({ className, ...props }, ref) => {
+    return <RadioGroupPrimitive.Root className={cn('web:grid gap-2', className)} {...props} ref={ref} />;
+  },
+);
+RadioGroup.displayName = RadioGroupPrimitive.Root?.displayName || 'RadioGroup';
+
+export interface RadioGroupItemProps
+  extends Omit<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, 'disabled'>, RadioGroupItemBaseProps {}
+
+const RadioGroupItem = React.forwardRef<React.ElementRef<typeof RadioGroupPrimitive.Item>, RadioGroupItemProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <RadioGroupPrimitive.Item
+        ref={ref}
+        className={cn(
+          'aspect-square h-4 w-4 native:h-5 native:w-5 rounded-full border border-primary text-primary web:ring-offset-background web:focus:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
+          props.disabled && 'web:cursor-not-allowed opacity-50',
+          className,
+        )}
+        {...props}
+      >
+        <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+          <Circle className="h-2.5 w-2.5 fill-current text-current" />
+        </RadioGroupPrimitive.Indicator>
+      </RadioGroupPrimitive.Item>
+    );
+  },
+);
+RadioGroupItem.displayName = RadioGroupPrimitive.Item?.displayName || 'RadioGroupItem';
+
+export { RadioGroup, RadioGroupItem };

package/src/resizable.tsx

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

package/src/scroll-area.tsx

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

package/src/search.tsx

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