@gv-tech/ui-native 2.19.0 → 2.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gv-tech/ui-native",
-  "version": "2.19.0",
+  "version": "2.21.0",
   "description": "React Native implementations of the GV Tech design system components",
   "repository": {
     "type": "git",
@@ -11,15 +11,13 @@
   "author": "Eric N. Garcia <eng618@garciaericn.com>",
   "exports": {
     ".": {
-      "types": "./src/index.ts",
-      "default": "./src/index.ts"
-    },
-    "./*": {
-      "types": "./src/*/index.ts",
-      "default": "./src/*/index.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/ui-native.mjs",
+      "require": "./dist/ui-native.cjs",
+      "default": "./dist/ui-native.mjs"
     }
   },
-  "main": "./dist/ui-native.mjs",
+  "main": "./dist/ui-native.cjs",
   "module": "./dist/ui-native.mjs",
   "types": "./dist/index.d.ts",
   "files": [
@@ -37,6 +35,8 @@
   "dependencies": {
     "@gv-tech/design-tokens": "^2.12.0",
     "@gv-tech/ui-core": "^2.12.0",
+    "react-native-reanimated": "4.3.0",
+    "react-native-worklets": "0.8.1",
     "@rn-primitives/accordion": "^1.2.0",
     "@rn-primitives/alert-dialog": "^1.2.0",
     "@rn-primitives/aspect-ratio": "^1.2.0",
@@ -65,21 +65,24 @@
     "@rn-primitives/toggle-group": "^1.2.0",
     "@rn-primitives/tooltip": "^1.2.0",
     "clsx": "^2.1.1",
-    "lucide-react-native": "^0.574.0",
+    "lucide-react-native": "^1.8.0",
     "nativewind": "^4.2.1",
     "react-native-svg": "^15.15.3",
-    "react-native-worklets": "0.7.2",
     "tailwind-merge": "^3.4.1",
     "tailwindcss": "^4.1.18"
   },
   "peerDependencies": {
     "react": ">=18",
     "react-native": ">=0.72",
-    "react-native-reanimated": "^3.0.0 || ^4.0.0"
+    "react-native-reanimated": "^4.2.3",
+    "react-native-worklets": "^0.7.2"
   },
   "peerDependenciesMeta": {
     "react-native-reanimated": {
       "optional": false
+    },
+    "react-native-worklets": {
+      "optional": false
     }
   },
   "publishConfig": {

package/src/aspect-ratio.tsx

@@ -1,9 +1,13 @@
-import { Text, View } from 'react-native';
+import type { AspectRatioBaseProps } from '@gv-tech/ui-core';
+import * as AspectRatioPrimitive from '@rn-primitives/aspect-ratio';
+import * as React from 'react';
+import { cn } from './lib/utils';
 
-export const AspectRatio = () => {
+export const AspectRatio: React.FC<AspectRatioBaseProps> = ({ children, className, ratio = 1 }) => {
   return (
-    <View>
-      <Text>aspect-ratio is not yet implemented for React Native</Text>
-    </View>
+    <AspectRatioPrimitive.Root ratio={ratio} className={cn('w-full', className)}>
+      {children}
+    </AspectRatioPrimitive.Root>
   );
 };
+AspectRatio.displayName = 'AspectRatio';

package/src/breadcrumb.tsx

@@ -1,9 +1,131 @@
-import { Text, View } from 'react-native';
+import type {
+  BreadcrumbBaseProps,
+  BreadcrumbEllipsisBaseProps,
+  BreadcrumbItemBaseProps,
+  BreadcrumbLinkBaseProps,
+  BreadcrumbListBaseProps,
+  BreadcrumbPageBaseProps,
+  BreadcrumbSeparatorBaseProps,
+} from '@gv-tech/ui-core';
+import { Slot } from '@rn-primitives/slot';
+import { ChevronRight, MoreHorizontal } from 'lucide-react-native';
+import * as React from 'react';
+import { Pressable, View } from 'react-native';
+import { wrapTextChildren } from './lib/render-native';
+import { cn } from './lib/utils';
+import { Text } from './text';
 
-export const Breadcrumb = () => {
+export const Breadcrumb = React.forwardRef<View, BreadcrumbBaseProps & { separator?: React.ReactNode }>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <View ref={ref} aria-label="breadcrumb" className={cn('flex flex-row', className)} {...props}>
+        {children}
+      </View>
+    );
+  },
+);
+Breadcrumb.displayName = 'Breadcrumb';
+
+export const BreadcrumbList = React.forwardRef<View, BreadcrumbListBaseProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <View
+        ref={ref}
+        className={cn(
+          'text-muted-foreground flex flex-row flex-wrap items-center gap-1.5 break-words sm:gap-2.5',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </View>
+    );
+  },
+);
+BreadcrumbList.displayName = 'BreadcrumbList';
+
+export const BreadcrumbItem = React.forwardRef<View, BreadcrumbItemBaseProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <View ref={ref} className={cn('flex flex-row items-center gap-1.5', className)} {...props}>
+        {children}
+      </View>
+    );
+  },
+);
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+
+export type BreadcrumbLinkProps = BreadcrumbLinkBaseProps & {
+  onPress?: () => void;
+};
+
+export const BreadcrumbLink = React.forwardRef<View, BreadcrumbLinkProps>(
+  ({ asChild, className, children, onPress, ...props }, ref) => {
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <Comp
+        ref={ref}
+        onPress={onPress}
+        className={cn(
+          'hover:text-foreground active:text-foreground flex flex-row items-center transition-colors',
+          className,
+        )}
+        {...props}
+      >
+        {wrapTextChildren(children, Text, {
+          className: 'text-muted-foreground hover:text-foreground text-sm font-medium',
+        })}
+      </Comp>
+    );
+  },
+);
+BreadcrumbLink.displayName = 'BreadcrumbLink';
+
+export const BreadcrumbPage = React.forwardRef<View, BreadcrumbPageBaseProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <View
+        ref={ref}
+        role="link"
+        aria-disabled={true}
+        aria-current="page"
+        className={cn('flex flex-row items-center', className)}
+        {...props}
+      >
+        {wrapTextChildren(children, Text, {
+          className: 'text-foreground text-sm font-normal',
+        })}
+      </View>
+    );
+  },
+);
+BreadcrumbPage.displayName = 'BreadcrumbPage';
+
+export const BreadcrumbSeparator = ({ children, className, ...props }: BreadcrumbSeparatorBaseProps) => {
+  return (
+    <View
+      role="presentation"
+      aria-hidden={true}
+      className={cn('flex flex-row items-center justify-center', className)}
+      {...props}
+    >
+      {children ?? <ChevronRight size={14} className="text-muted-foreground" />}
+    </View>
+  );
+};
+BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';
+
+export const BreadcrumbEllipsis = ({ className, children, ...props }: BreadcrumbEllipsisBaseProps) => {
   return (
-    <View>
-      <Text>breadcrumb is not yet implemented for React Native</Text>
+    <View
+      role="presentation"
+      aria-hidden={true}
+      className={cn('flex h-9 w-9 flex-row items-center justify-center', className)}
+      {...props}
+    >
+      {children ?? <MoreHorizontal size={14} className="text-muted-foreground" />}
     </View>
   );
 };
+BreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis';

package/src/calendar.tsx

@@ -1,9 +1,7 @@
-import { Text, View } from 'react-native';
+import type { CalendarBaseProps } from '@gv-tech/ui-core';
+import * as React from 'react';
+import { View } from 'react-native';
 
-export const Calendar = () => {
-  return (
-    <View>
-      <Text>calendar is not yet implemented for React Native</Text>
-    </View>
-  );
+export const Calendar: React.FC<CalendarBaseProps> = ({ className }) => {
+  return <View className={className} />;
 };

package/src/carousel.tsx

@@ -1,9 +1,29 @@
-import { Text, View } from 'react-native';
-
-export const Carousel = () => {
-  return (
-    <View>
-      <Text>carousel is not yet implemented for React Native</Text>
-    </View>
-  );
+import type {
+  CarouselBaseProps,
+  CarouselContentBaseProps,
+  CarouselItemBaseProps,
+  CarouselNextBaseProps,
+  CarouselPreviousBaseProps,
+} from '@gv-tech/ui-core';
+import * as React from 'react';
+import { View } from 'react-native';
+
+export const Carousel: React.FC<CarouselBaseProps> = ({ children, className }) => {
+  return <View className={className}>{children}</View>;
+};
+
+export const CarouselContent: React.FC<CarouselContentBaseProps> = ({ children, className }) => {
+  return <View className={className}>{children}</View>;
+};
+
+export const CarouselItem: React.FC<CarouselItemBaseProps> = ({ children, className }) => {
+  return <View className={className}>{children}</View>;
+};
+
+export const CarouselPrevious: React.FC<CarouselPreviousBaseProps> = ({ className }) => {
+  return <View className={className} />;
+};
+
+export const CarouselNext: React.FC<CarouselNextBaseProps> = ({ className }) => {
+  return <View className={className} />;
 };

package/src/chart.tsx

@@ -1,9 +1,31 @@
-import { Text, View } from 'react-native';
-
-export const Chart = () => {
-  return (
-    <View>
-      <Text>chart is not yet implemented for React Native</Text>
-    </View>
-  );
+import type {
+  ChartContainerBaseProps,
+  ChartLegendContentBaseProps,
+  ChartTooltipContentBaseProps,
+} from '@gv-tech/ui-core';
+import * as React from 'react';
+import { View } from 'react-native';
+
+export const ChartContainer: React.FC<ChartContainerBaseProps> = ({ children, className }) => {
+  return <View className={className}>{children}</View>;
+};
+
+export const ChartTooltipContent: React.FC<ChartTooltipContentBaseProps> = ({ className }) => {
+  return <View className={className} />;
+};
+
+export const ChartLegendContent: React.FC<ChartLegendContentBaseProps> = ({ className }) => {
+  return <View className={className} />;
+};
+
+export const ChartTooltip: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
+  return <>{children}</>;
+};
+
+export const ChartLegend: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
+  return <>{children}</>;
+};
+
+export const ChartStyle: React.FC = () => {
+  return null;
 };

package/src/command.tsx

@@ -1,9 +1,49 @@
-import { Text, View } from 'react-native';
-
-export const Command = () => {
-  return (
-    <View>
-      <Text>command is not yet implemented for React Native</Text>
-    </View>
-  );
+import type {
+  CommandBaseProps,
+  CommandEmptyBaseProps,
+  CommandGroupBaseProps,
+  CommandInputBaseProps,
+  CommandItemBaseProps,
+  CommandListBaseProps,
+  CommandSeparatorBaseProps,
+  CommandShortcutBaseProps,
+} from '@gv-tech/ui-core';
+import * as React from 'react';
+import { View } from 'react-native';
+import { wrapTextChildren } from './lib/render-native';
+
+export const Command: React.FC<CommandBaseProps> = ({ children, className }) => {
+  return <View className={className}>{wrapTextChildren(children)}</View>;
+};
+
+export const CommandDialog: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
+  return <>{children}</>;
+};
+
+export const CommandInput: React.FC<CommandInputBaseProps> = ({ className }) => {
+  return <View className={className} />;
+};
+
+export const CommandList: React.FC<CommandListBaseProps> = ({ children, className }) => {
+  return <View className={className}>{wrapTextChildren(children)}</View>;
+};
+
+export const CommandEmpty: React.FC<CommandEmptyBaseProps> = ({ children, className }) => {
+  return <View className={className}>{wrapTextChildren(children)}</View>;
+};
+
+export const CommandGroup: React.FC<CommandGroupBaseProps> = ({ children, className }) => {
+  return <View className={className}>{wrapTextChildren(children)}</View>;
+};
+
+export const CommandItem: React.FC<CommandItemBaseProps> = ({ children, className }) => {
+  return <View className={className}>{wrapTextChildren(children)}</View>;
+};
+
+export const CommandSeparator: React.FC<CommandSeparatorBaseProps> = ({ className }) => {
+  return <View className={className} />;
+};
+
+export const CommandShortcut: React.FC<CommandShortcutBaseProps> = ({ children, className }) => {
+  return <View className={className}>{wrapTextChildren(children)}</View>;
 };

package/src/context-menu.tsx

@@ -1,9 +1,217 @@
-import { Text, View } from 'react-native';
+import type {
+  ContextMenuCheckboxItemBaseProps,
+  ContextMenuContentBaseProps,
+  ContextMenuItemBaseProps,
+  ContextMenuLabelBaseProps,
+  ContextMenuRadioItemBaseProps,
+  ContextMenuSeparatorBaseProps,
+  ContextMenuShortcutBaseProps,
+  ContextMenuSubContentBaseProps,
+  ContextMenuSubTriggerBaseProps,
+} from '@gv-tech/ui-core';
+import * as ContextMenuPrimitive from '@rn-primitives/context-menu';
+import { Check, ChevronRight, Circle } from 'lucide-react-native';
+import * as React from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
+import { wrapTextChildren } from './lib/render-native';
+import { cn } from './lib/utils';
+import { Text } from './text';
 
-export const ContextMenu = () => {
+export const ContextMenu = ContextMenuPrimitive.Root;
+
+export const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+
+export const ContextMenuPortal = ContextMenuPrimitive.Portal;
+
+export const ContextMenuGroup = ContextMenuPrimitive.Group;
+
+export const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+
+export const ContextMenuSub = ContextMenuPrimitive.Sub;
+
+const ContextMenuOverlay = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Overlay>
+>(({ className, ...props }, ref) => {
+  return (
+    <ContextMenuPrimitive.Overlay
+      style={Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined}
+      ref={ref}
+      {...props}
+    >
+      <Animated.View
+        entering={FadeIn.duration(100)}
+        exiting={FadeOut.duration(100)}
+        className={cn('absolute inset-0 z-50 bg-black/30', className)}
+      />
+    </ContextMenuPrimitive.Overlay>
+  );
+});
+ContextMenuOverlay.displayName = 'ContextMenuOverlay';
+
+export const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  ContextMenuContentBaseProps
+>(({ className, children, ...props }, ref) => {
+  return (
+    <ContextMenuPortal>
+      <ContextMenuOverlay />
+      <ContextMenuPrimitive.Content
+        ref={ref}
+        className={cn(
+          'bg-popover border-border z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </ContextMenuPrimitive.Content>
+    </ContextMenuPortal>
+  );
+});
+ContextMenuContent.displayName = 'ContextMenuContent';
+
+export const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  ContextMenuItemBaseProps
+>(({ className, children, inset, ...props }, ref) => {
   return (
-    <View>
-      <Text>context-menu is not yet implemented for React Native</Text>
-    </View>
+    <ContextMenuPrimitive.Item
+      ref={ref}
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground active:bg-accent active:text-accent-foreground relative flex flex-row items-center rounded-sm px-2 py-1.5 text-sm outline-none',
+        inset && 'pl-8',
+        className,
+      )}
+      {...props}
+    >
+      {wrapTextChildren(children, Text)}
+    </ContextMenuPrimitive.Item>
+  );
+});
+ContextMenuItem.displayName = 'ContextMenuItem';
+
+export const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  ContextMenuCheckboxItemBaseProps
+>(({ className, children, checked, onCheckedChange, ...props }, ref) => {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      ref={ref}
+      checked={!!checked}
+      onCheckedChange={onCheckedChange || (() => {})}
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground active:bg-accent active:text-accent-foreground relative flex flex-row items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none',
+        className,
+      )}
+      {...props}
+    >
+      <View className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <Check size={14} className="text-foreground" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </View>
+      {wrapTextChildren(children, Text)}
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+});
+ContextMenuCheckboxItem.displayName = 'ContextMenuCheckboxItem';
+
+export const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  ContextMenuRadioItemBaseProps
+>(({ className, children, value, ...props }, ref) => {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      ref={ref}
+      value={value}
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground active:bg-accent active:text-accent-foreground relative flex flex-row items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none',
+        className,
+      )}
+      {...props}
+    >
+      <View className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <Circle size={8} className="text-foreground fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </View>
+      {wrapTextChildren(children, Text)}
+    </ContextMenuPrimitive.RadioItem>
+  );
+});
+ContextMenuRadioItem.displayName = 'ContextMenuRadioItem';
+
+export const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  ContextMenuLabelBaseProps
+>(({ className, children, inset, ...props }, ref) => {
+  return (
+    <ContextMenuPrimitive.Label
+      ref={ref}
+      className={cn('text-foreground px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
+      {...props}
+    >
+      {wrapTextChildren(children, Text)}
+    </ContextMenuPrimitive.Label>
+  );
+});
+ContextMenuLabel.displayName = 'ContextMenuLabel';
+
+export const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  ContextMenuSeparatorBaseProps
+>(({ className, ...props }, ref) => {
+  return <ContextMenuPrimitive.Separator ref={ref} className={cn('bg-border -mx-1 my-1 h-px', className)} {...props} />;
+});
+ContextMenuSeparator.displayName = 'ContextMenuSeparator';
+
+export const ContextMenuShortcut = ({ className, children, ...props }: ContextMenuShortcutBaseProps) => {
+  return (
+    <Text className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)} {...props}>
+      {children}
+    </Text>
   );
 };
+ContextMenuShortcut.displayName = 'ContextMenuShortcut';
+
+export const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  ContextMenuSubTriggerBaseProps
+>(({ className, children, inset, ...props }, ref) => {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      ref={ref}
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground active:bg-accent active:text-accent-foreground flex flex-row items-center rounded-sm px-2 py-1.5 text-sm outline-none',
+        inset && 'pl-8',
+        className,
+      )}
+      {...props}
+    >
+      <View className="flex flex-row items-center gap-1.5">{wrapTextChildren(children, Text)}</View>
+      <ChevronRight size={14} className="text-foreground ml-auto" />
+    </ContextMenuPrimitive.SubTrigger>
+  );
+});
+ContextMenuSubTrigger.displayName = 'ContextMenuSubTrigger';
+
+export const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  ContextMenuSubContentBaseProps
+>(({ className, children, ...props }, ref) => {
+  return (
+    <ContextMenuPrimitive.SubContent
+      ref={ref}
+      className={cn(
+        'bg-popover border-border z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </ContextMenuPrimitive.SubContent>
+  );
+});
+ContextMenuSubContent.displayName = 'ContextMenuSubContent';