@gv-tech/ui-native 2.6.0

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@gv-tech/ui-native",
+  "version": "2.6.0",
+  "description": "React Native implementations of the GV Tech design system components",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Garcia-Ventures/gvtech-design.git",
+    "directory": "packages/ui-native"
+  },
+  "license": "MIT",
+  "author": "Eric N. Garcia <eng618@garciaericn.com>",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./*": {
+      "types": "./src/*/index.ts",
+      "default": "./src/*/index.ts"
+    }
+  },
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src",
+    "!src/**/*.test.*",
+    "!src/**/*.spec.*"
+  ],
+  "scripts": {
+    "build": "echo 'No build step — consumed as TS source by sibling packages'",
+    "lint": "echo 'Linted from workspace root'",
+    "test": "vitest run",
+    "typecheck": "npx tsc --noEmit"
+  },
+  "dependencies": {
+    "@gv-tech/design-tokens": "2.6.0",
+    "@gv-tech/ui-core": "2.6.0",
+    "@rn-primitives/accordion": "^1.2.0",
+    "@rn-primitives/alert-dialog": "^1.2.0",
+    "@rn-primitives/aspect-ratio": "^1.2.0",
+    "@rn-primitives/avatar": "^1.2.0",
+    "@rn-primitives/checkbox": "^1.2.0",
+    "@rn-primitives/collapsible": "^1.2.0",
+    "@rn-primitives/context-menu": "^1.2.0",
+    "@rn-primitives/dialog": "^1.2.0",
+    "@rn-primitives/dropdown-menu": "^1.2.0",
+    "@rn-primitives/hover-card": "^1.2.0",
+    "@rn-primitives/label": "^1.2.0",
+    "@rn-primitives/menubar": "^1.2.0",
+    "@rn-primitives/navigation-menu": "^1.2.0",
+    "@rn-primitives/popover": "^1.2.0",
+    "@rn-primitives/portal": "^1.3.0",
+    "@rn-primitives/progress": "^1.2.0",
+    "@rn-primitives/radio-group": "^1.2.0",
+    "@rn-primitives/select": "^1.2.0",
+    "@rn-primitives/separator": "^1.2.0",
+    "@rn-primitives/slider": "^1.2.0",
+    "@rn-primitives/slot": "^1.2.0",
+    "@rn-primitives/switch": "^1.2.0",
+    "@rn-primitives/tabs": "^1.2.0",
+    "@rn-primitives/toast": "^1.2.0",
+    "@rn-primitives/toggle": "^1.2.0",
+    "@rn-primitives/toggle-group": "^1.2.0",
+    "@rn-primitives/tooltip": "^1.2.0",
+    "clsx": "^2.1.1",
+    "lucide-react-native": "^0.574.0",
+    "nativewind": "^4.2.1",
+    "react-native-reanimated": "~3.16.1",
+    "react-native-svg": "^15.15.3",
+    "tailwind-merge": "^3.4.1",
+    "tailwindcss": "^4.1.18"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.72"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/accordion.tsx

@@ -0,0 +1,93 @@
+import * as AccordionPrimitive from '@rn-primitives/accordion';
+import { ChevronDown } from 'lucide-react-native';
+import * as React from 'react';
+import { View } from 'react-native';
+import Animated, {
+  Extrapolation,
+  interpolate,
+  useAnimatedStyle,
+  useDerivedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+import { cn } from './lib/utils';
+
+const Accordion = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return <AccordionPrimitive.Root ref={ref} className={cn('web:gap-0', className)} {...props} />;
+});
+Accordion.displayName = AccordionPrimitive.Root?.displayName || 'Accordion';
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <AccordionPrimitive.Item ref={ref} className={cn('border-b border-border overflow-hidden', className)} {...props} />
+  );
+});
+AccordionItem.displayName = AccordionPrimitive.Item?.displayName || 'AccordionItem';
+
+const AccordionHeader = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Header>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Header>
+>(({ className, ...props }, ref) => {
+  return <AccordionPrimitive.Header ref={ref} className={cn('flex flex-row', className)} {...props} />;
+});
+AccordionHeader.displayName = AccordionPrimitive.Header?.displayName || 'AccordionHeader';
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => {
+  const { isExpanded } = AccordionPrimitive.useItemContext();
+  const progress = useDerivedValue(() =>
+    isExpanded ? withTiming(1, { duration: 250 }) : withTiming(0, { duration: 200 }),
+  );
+  const chevronStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${progress.value * 180}deg` }],
+    opacity: interpolate(progress.value, [0, 1], [1, 0.8], Extrapolation.CLAMP),
+  }));
+
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        ref={ref}
+        className={cn(
+          'flex flex-row items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+          className,
+        )}
+        {...props}
+      >
+        <>{children}</>
+        <Animated.View style={chevronStyle}>
+          <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+        </Animated.View>
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+});
+AccordionTrigger.displayName = AccordionPrimitive.Trigger?.displayName || 'AccordionTrigger';
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => {
+  return (
+    <AccordionPrimitive.Content
+      ref={ref}
+      className={cn(
+        'overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
+        className,
+      )}
+      {...props}
+    >
+      <View className={cn('pb-4 pt-0', className)}>{children}</View>
+    </AccordionPrimitive.Content>
+  );
+});
+AccordionContent.displayName = AccordionPrimitive.Content?.displayName || 'AccordionContent';
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/src/alert-dialog.tsx

@@ -0,0 +1,123 @@
+import * as AlertDialogPrimitive from '@rn-primitives/alert-dialog';
+import * as React from 'react';
+import { StyleSheet, View, type ViewStyle } from 'react-native';
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
+
+import { buttonVariants } from './button';
+import { cn } from './lib/utils';
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => {
+  return (
+    <AlertDialogPrimitive.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)}
+      />
+    </AlertDialogPrimitive.Overlay>
+  );
+});
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay?.displayName || 'AlertDialogOverlay';
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & {
+    portalHost?: string;
+    overlayClassName?: string;
+    overlayStyle?: ViewStyle;
+  }
+>(({ className, portalHost, overlayClassName, overlayStyle, ...props }, ref) => {
+  return (
+    <AlertDialogPortal hostName={portalHost}>
+      <AlertDialogOverlay className={overlayClassName} style={overlayStyle} />
+      <AlertDialogPrimitive.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,
+          )}
+        />
+      </AlertDialogPrimitive.Content>
+    </AlertDialogPortal>
+  );
+});
+AlertDialogContent.displayName = AlertDialogPrimitive.Content?.displayName || 'AlertDialogContent';
+
+const AlertDialogHeader = ({ className, ...props }: React.ComponentPropsWithoutRef<typeof View>) => (
+  <View className={cn('flex flex-col gap-2 text-center sm:text-left', className)} {...props} />
+);
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+
+const AlertDialogFooter = ({ className, ...props }: React.ComponentPropsWithoutRef<typeof View>) => (
+  <View className={cn('flex flex-col-reverse sm:flex-row sm:justify-end gap-2', className)} {...props} />
+);
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg native:text-xl font-semibold text-foreground', className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title?.displayName || 'AlertDialogTitle';
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm native:text-base text-muted-foreground', className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description?.displayName || 'AlertDialogDescription';
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action?.displayName || 'AlertDialogAction';
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel?.displayName || 'AlertDialogCancel';
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};

package/src/alert.tsx

@@ -0,0 +1,50 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { Text, View } from 'react-native';
+
+import { wrapTextChildren } from './lib/render-native';
+import { cn } from './lib/utils';
+
+const alertVariants = cva('relative w-full rounded-lg border p-4', {
+  variants: {
+    variant: {
+      default: 'bg-background border-border',
+      destructive: 'border-destructive/50 bg-destructive/10',
+      warning: 'border-amber-500/50 bg-amber-500/10',
+      info: 'border-blue-500/50 bg-blue-500/10',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+const Alert = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & VariantProps<typeof alertVariants>
+>(({ className, variant, children, ...props }, ref) => (
+  <View ref={ref} className={cn(alertVariants({ variant }), className)} {...props}>
+    {wrapTextChildren(children)}
+  </View>
+));
+Alert.displayName = 'Alert';
+
+const AlertTitle = React.forwardRef<React.ElementRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
+  ({ className, ...props }, ref) => (
+    <Text
+      ref={ref}
+      className={cn('mb-1 font-medium leading-none tracking-tight text-foreground', className)}
+      {...props}
+    />
+  ),
+);
+AlertTitle.displayName = 'AlertTitle';
+
+const AlertDescription = React.forwardRef<React.ElementRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
+  ({ className, ...props }, ref) => (
+    <Text ref={ref} className={cn('text-sm text-muted-foreground leading-relaxed', className)} {...props} />
+  ),
+);
+AlertDescription.displayName = 'AlertDescription';
+
+export { Alert, AlertDescription, AlertTitle };

package/src/aspect-ratio.tsx

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

package/src/avatar.tsx

@@ -0,0 +1,38 @@
+import * as AvatarPrimitive from '@rn-primitives/avatar';
+import * as React from 'react';
+
+import { cn } from './lib/utils';
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root?.displayName || 'Avatar';
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image ref={ref} className={cn('aspect-square h-full w-full', className)} {...props} />
+));
+AvatarImage.displayName = AvatarPrimitive.Image?.displayName || 'AvatarImage';
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className)}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback?.displayName || 'AvatarFallback';
+
+export { Avatar, AvatarFallback, AvatarImage };

package/src/badge.tsx

@@ -0,0 +1,51 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { Text, View } from 'react-native';
+
+import { cn } from './lib/utils';
+
+const badgeVariants = cva('flex-row items-center rounded-md border px-2 py-0.5', {
+  variants: {
+    variant: {
+      default: 'border-transparent bg-primary',
+      secondary: 'border-transparent bg-secondary',
+      destructive: 'border-transparent bg-destructive',
+      outline: 'border-border bg-transparent',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+const badgeTextVariants = cva('text-xs font-semibold', {
+  variants: {
+    variant: {
+      default: 'text-primary-foreground',
+      secondary: 'text-secondary-foreground',
+      destructive: 'text-destructive-foreground',
+      outline: 'text-foreground',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+export interface BadgeProps extends React.ComponentPropsWithoutRef<typeof View>, VariantProps<typeof badgeVariants> {
+  textClassName?: string;
+}
+
+import { wrapTextChildren } from './lib/render-native';
+
+function Badge({ className, textClassName, variant, children, ...props }: BadgeProps) {
+  return (
+    <View className={cn(badgeVariants({ variant }), className)} {...props}>
+      {wrapTextChildren(children, Text, {
+        className: cn(badgeTextVariants({ variant }), textClassName),
+      })}
+    </View>
+  );
+}
+
+export { Badge, badgeVariants };

package/src/breadcrumb.tsx

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

package/src/button.tsx

@@ -0,0 +1,75 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { Pressable, Text, View } from 'react-native';
+
+import type { ButtonBaseProps } from '@gv-tech/ui-core';
+import { wrapTextChildren } from './lib/render-native';
+import { cn } from './lib/utils';
+
+const buttonVariants = cva(
+  'flex-row items-center justify-center gap-2 rounded-md transition-colors active:opacity-80',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary shadow-sm',
+        destructive: 'bg-destructive shadow-sm',
+        outline: 'border border-input bg-transparent shadow-sm',
+        secondary: 'bg-secondary shadow-sm',
+        ghost: 'bg-transparent',
+        link: 'bg-transparent',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 px-3',
+        lg: 'h-12 px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+const buttonTextVariants = cva('text-sm font-medium', {
+  variants: {
+    variant: {
+      default: 'text-primary-foreground',
+      destructive: 'text-destructive-foreground',
+      outline: 'text-foreground',
+      secondary: 'text-secondary-foreground',
+      ghost: 'text-foreground',
+      link: 'text-primary underline',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+export interface ButtonProps extends VariantProps<typeof buttonVariants>, ButtonBaseProps {
+  onPress?: () => void;
+}
+
+const Button = React.forwardRef<View, ButtonProps>(
+  ({ className, variant, size, onPress, children, disabled, ...props }, ref) => {
+    return (
+      <Pressable
+        ref={ref}
+        onPress={onPress}
+        disabled={disabled}
+        className={cn(buttonVariants({ variant, size, className }), disabled && 'opacity-50')}
+        {...props}
+      >
+        {wrapTextChildren(children, Text, {
+          className: cn(buttonTextVariants({ variant })),
+        })}
+      </Pressable>
+    );
+  },
+);
+
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

package/src/calendar.tsx

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

package/src/card.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { Text, View } from 'react-native';
+
+import type { CardBaseProps } from '@gv-tech/ui-core';
+import { wrapTextChildren } from './lib/render-native';
+import { cn } from './lib/utils';
+
+export interface CardProps extends React.ComponentPropsWithoutRef<typeof View>, CardBaseProps {}
+
+const Card = React.forwardRef<React.ElementRef<typeof View>, CardProps>(({ className, ...props }, ref) => (
+  <View ref={ref} className={cn('rounded-xl border border-border bg-card shadow-sm', className)} {...props} />
+));
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<React.ElementRef<typeof View>, React.ComponentPropsWithoutRef<typeof View>>(
+  ({ className, ...props }, ref) => (
+    <View ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+  ),
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<React.ElementRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
+  ({ className, ...props }, ref) => (
+    <Text
+      ref={ref}
+      className={cn('font-semibold leading-none tracking-tight text-card-foreground text-lg', className)}
+      {...props}
+    />
+  ),
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<React.ElementRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
+  ({ className, ...props }, ref) => (
+    <Text ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+  ),
+);
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<React.ElementRef<typeof View>, React.ComponentPropsWithoutRef<typeof View>>(
+  ({ className, ...props }, ref) => (
+    <View ref={ref} className={cn('p-6 pt-0', className)} {...props}>
+      {wrapTextChildren(props.children, Text, { className: 'text-sm text-card-foreground' })}
+    </View>
+  ),
+);
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<React.ElementRef<typeof View>, React.ComponentPropsWithoutRef<typeof View>>(
+  ({ className, ...props }, ref) => (
+    <View ref={ref} className={cn('flex flex-row items-center p-6 pt-0', className)} {...props} />
+  ),
+);
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/src/carousel.tsx

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

package/src/chart.tsx

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

package/src/checkbox.tsx

@@ -0,0 +1,31 @@
+import * as CheckboxPrimitive from '@rn-primitives/checkbox';
+import { Check } from 'lucide-react-native';
+import * as React from 'react';
+import { Platform } from 'react-native';
+
+import { cn } from './lib/utils';
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <CheckboxPrimitive.Root
+      ref={ref}
+      className={cn(
+        'web:peer h-4 w-4 native:h-[20] native:w-[20] shrink-0 rounded-sm native:rounded border border-primary 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 disabled:cursor-not-allowed disabled:opacity-50',
+        props.checked && 'bg-primary',
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator className={cn('items-center justify-center h-full w-full')}>
+        <Check size={12} strokeWidth={Platform.OS === 'web' ? 2.5 : 3.5} className="text-primary-foreground" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+});
+Checkbox.displayName = CheckboxPrimitive.Root?.displayName || 'Checkbox';
+
+export { Checkbox };
+export type CheckboxProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>;

package/src/collapsible.tsx

@@ -0,0 +1,15 @@
+import { CollapsibleBaseProps, CollapsibleContentBaseProps, CollapsibleTriggerBaseProps } from '@gv-tech/ui-core';
+import * as CollapsiblePrimitive from '@rn-primitives/collapsible';
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.Trigger;
+
+const CollapsibleContent = CollapsiblePrimitive.Content;
+
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };
+export type {
+  CollapsibleContentBaseProps as CollapsibleContentProps,
+  CollapsibleBaseProps as CollapsibleProps,
+  CollapsibleTriggerBaseProps as CollapsibleTriggerProps,
+};