@gv-tech/ui-native 2.19.0 → 2.21.0

package/src/index.ts

@@ -38,7 +38,15 @@ export { Avatar, AvatarFallback, AvatarImage } from './avatar';
 export { Badge, badgeVariants } from './badge';
 
 // Breadcrumb
-export { Breadcrumb } from './breadcrumb';
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from './breadcrumb';
 
 // Button
 export { Button, buttonVariants } from './button';
@@ -52,10 +60,17 @@ export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
 export type { CardProps } from './card';
 
 // Carousel
-export { Carousel } from './carousel';
+export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from './carousel';
 
 // Chart
-export { Chart } from './chart';
+export {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+  ChartTooltip,
+  ChartTooltipContent,
+} from './chart';
 
 // Checkbox
 export { Checkbox } from './checkbox';
@@ -65,10 +80,36 @@ export type { CheckboxProps } from './checkbox';
 export { Collapsible, CollapsibleContent, CollapsibleTrigger } from './collapsible';
 
 // Command
-export { Command } from './command';
+export {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from './command';
 
 // Context Menu
-export { ContextMenu } from './context-menu';
+export {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuPortal,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from './context-menu';
 
 // Dialog
 export {
@@ -84,16 +125,43 @@ export {
 export type { DialogProps } from './dialog';
 
 // Drawer
-export { Drawer } from './drawer';
+export {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerTrigger,
+} from './drawer';
 
 // Dropdown Menu
-export { DropdownMenu } from './dropdown-menu';
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from './dropdown-menu';
 
 // Form
 export { Form } from './form';
 
 // Hover Card
-export { HoverCard } from './hover-card';
+export { HoverCard, HoverCardContent, HoverCardTrigger } from './hover-card';
 
 // Input
 export { Input } from './input';
@@ -103,13 +171,47 @@ export type { InputProps } from './input';
 export { Label } from './label';
 
 // Menubar
-export { Menubar } from './menubar';
+export {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarLabel,
+  MenubarMenu,
+  MenubarPortal,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from './menubar';
 
 // Navigation Menu
-export { NavigationMenu } from './navigation-menu';
+export {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+} from './navigation-menu';
 
 // Pagination
-export { Pagination } from './pagination';
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from './pagination';
 
 // Popover
 export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from './popover';
@@ -204,6 +306,7 @@ export { ToggleGroup, ToggleGroupItem } from './toggle-group';
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip';
 
 // Toast
+export { toast, useToast } from './hooks/use-toast';
 export { Toast } from './toast';
 export type { ToastProps } from './toast';
 

package/src/menubar.tsx

@@ -1,9 +1,257 @@
-import { Text, View } from 'react-native';
+import type {
+  MenubarBaseProps,
+  MenubarCheckboxItemBaseProps,
+  MenubarContentBaseProps,
+  MenubarItemBaseProps,
+  MenubarLabelBaseProps,
+  MenubarRadioItemBaseProps,
+  MenubarSeparatorBaseProps,
+  MenubarShortcutBaseProps,
+  MenubarSubContentBaseProps,
+  MenubarSubTriggerBaseProps,
+  MenubarTriggerBaseProps,
+} from '@gv-tech/ui-core';
+import * as MenubarPrimitive from '@rn-primitives/menubar';
+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 Menubar = () => {
+export const Menubar = React.forwardRef<React.ElementRef<typeof MenubarPrimitive.Root>, MenubarBaseProps>(
+  ({ className, children, value: valueProp, onValueChange: onValueChangeProp, ...props }, ref) => {
+    const [localValue, setLocalValue] = React.useState<string | undefined>(valueProp || '');
+    const value = valueProp !== undefined ? valueProp : localValue;
+    const onValueChange = (val: string | undefined) => {
+      setLocalValue(val);
+      onValueChangeProp?.(val || '');
+    };
+
+    return (
+      <MenubarPrimitive.Root
+        ref={ref}
+        value={value}
+        onValueChange={onValueChange}
+        className={cn(
+          'bg-background border-border flex flex-row items-center space-x-1 rounded-md border p-1 shadow-sm',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </MenubarPrimitive.Root>
+    );
+  },
+);
+Menubar.displayName = 'Menubar';
+
+export const MenubarMenu = MenubarPrimitive.Menu;
+
+export const MenubarPortal = MenubarPrimitive.Portal;
+
+export const MenubarGroup = MenubarPrimitive.Group;
+
+export const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
+
+export const MenubarSub = MenubarPrimitive.Sub;
+
+const MenubarOverlay = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Overlay>
+>(({ className, ...props }, ref) => {
+  return (
+    <MenubarPrimitive.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)}
+      />
+    </MenubarPrimitive.Overlay>
+  );
+});
+MenubarOverlay.displayName = 'MenubarOverlay';
+
+export const MenubarTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Trigger>,
+  MenubarTriggerBaseProps
+>(({ className, children, ...props }, ref) => {
+  return (
+    <MenubarPrimitive.Trigger
+      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-3 py-1.5 text-sm font-medium outline-none',
+        className,
+      )}
+      {...props}
+    >
+      {wrapTextChildren(children, Text)}
+    </MenubarPrimitive.Trigger>
+  );
+});
+MenubarTrigger.displayName = 'MenubarTrigger';
+
+export const MenubarContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Content>,
+  MenubarContentBaseProps
+>(({ className, children, ...props }, ref) => {
   return (
-    <View>
-      <Text>menubar is not yet implemented for React Native</Text>
-    </View>
+    <MenubarPortal>
+      <MenubarOverlay />
+      <MenubarPrimitive.Content
+        ref={ref}
+        className={cn(
+          'bg-popover border-border z-50 min-w-[12rem] overflow-hidden rounded-md border p-1 shadow-md',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </MenubarPrimitive.Content>
+    </MenubarPortal>
+  );
+});
+MenubarContent.displayName = 'MenubarContent';
+
+export const MenubarItem = React.forwardRef<React.ElementRef<typeof MenubarPrimitive.Item>, MenubarItemBaseProps>(
+  ({ className, children, inset, ...props }, ref) => {
+    return (
+      <MenubarPrimitive.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)}
+      </MenubarPrimitive.Item>
+    );
+  },
+);
+MenubarItem.displayName = 'MenubarItem';
+
+export const MenubarCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+  MenubarCheckboxItemBaseProps
+>(({ className, children, checked, onCheckedChange, ...props }, ref) => {
+  return (
+    <MenubarPrimitive.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">
+        <MenubarPrimitive.ItemIndicator>
+          <Check size={14} className="text-foreground" />
+        </MenubarPrimitive.ItemIndicator>
+      </View>
+      {wrapTextChildren(children, Text)}
+    </MenubarPrimitive.CheckboxItem>
+  );
+});
+MenubarCheckboxItem.displayName = 'MenubarCheckboxItem';
+
+export const MenubarRadioItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+  MenubarRadioItemBaseProps
+>(({ className, children, value, ...props }, ref) => {
+  return (
+    <MenubarPrimitive.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">
+        <MenubarPrimitive.ItemIndicator>
+          <Circle size={8} className="text-foreground fill-current" />
+        </MenubarPrimitive.ItemIndicator>
+      </View>
+      {wrapTextChildren(children, Text)}
+    </MenubarPrimitive.RadioItem>
+  );
+});
+MenubarRadioItem.displayName = 'MenubarRadioItem';
+
+export const MenubarLabel = React.forwardRef<React.ElementRef<typeof MenubarPrimitive.Label>, MenubarLabelBaseProps>(
+  ({ className, children, inset, ...props }, ref) => {
+    return (
+      <MenubarPrimitive.Label
+        ref={ref}
+        className={cn('text-foreground px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
+        {...props}
+      >
+        {wrapTextChildren(children, Text)}
+      </MenubarPrimitive.Label>
+    );
+  },
+);
+MenubarLabel.displayName = 'MenubarLabel';
+
+export const MenubarSeparator = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Separator>,
+  MenubarSeparatorBaseProps
+>(({ className, ...props }, ref) => {
+  return <MenubarPrimitive.Separator ref={ref} className={cn('bg-border -mx-1 my-1 h-px', className)} {...props} />;
+});
+MenubarSeparator.displayName = 'MenubarSeparator';
+
+export const MenubarShortcut = ({ className, children, ...props }: MenubarShortcutBaseProps) => {
+  return (
+    <Text className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)} {...props}>
+      {children}
+    </Text>
   );
 };
+MenubarShortcut.displayName = 'MenubarShortcut';
+
+export const MenubarSubTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+  MenubarSubTriggerBaseProps
+>(({ className, children, inset, ...props }, ref) => {
+  return (
+    <MenubarPrimitive.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" />
+    </MenubarPrimitive.SubTrigger>
+  );
+});
+MenubarSubTrigger.displayName = 'MenubarSubTrigger';
+
+export const MenubarSubContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubContent>,
+  MenubarSubContentBaseProps
+>(({ className, children, ...props }, ref) => {
+  return (
+    <MenubarPrimitive.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}
+    </MenubarPrimitive.SubContent>
+  );
+});
+MenubarSubContent.displayName = 'MenubarSubContent';

package/src/navigation-menu.tsx

@@ -1,9 +1,179 @@
-import { Text, View } from 'react-native';
+import type {
+  NavigationMenuBaseProps,
+  NavigationMenuContentBaseProps,
+  NavigationMenuIndicatorBaseProps,
+  NavigationMenuItemBaseProps,
+  NavigationMenuLinkBaseProps,
+  NavigationMenuListBaseProps,
+  NavigationMenuTriggerBaseProps,
+  NavigationMenuViewportBaseProps,
+} from '@gv-tech/ui-core';
+import * as NavigationMenuPrimitive from '@rn-primitives/navigation-menu';
+import { ChevronDown } from 'lucide-react-native';
+import * as React from 'react';
+import { GestureResponderEvent, View } from 'react-native';
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
+import { cn } from './lib/utils';
 
-export const NavigationMenu = () => {
+export const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  NavigationMenuBaseProps
+>(
+  (
+    { className, children, value, onValueChange, dir, orientation, delayDuration, skipDelayDuration, ...props },
+    ref,
+  ) => {
+    return (
+      <NavigationMenuPrimitive.Root
+        ref={ref}
+        value={value}
+        onValueChange={onValueChange ? (val) => onValueChange(val || '') : () => {}}
+        delayDuration={delayDuration}
+        skipDelayDuration={skipDelayDuration}
+        className={cn('relative z-10 flex flex-row items-center justify-center', className)}
+        {...props}
+      >
+        {children}
+      </NavigationMenuPrimitive.Root>
+    );
+  },
+);
+NavigationMenu.displayName = 'NavigationMenu';
+
+export const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  NavigationMenuListBaseProps
+>(({ className, children, ...props }, ref) => {
+  return (
+    <NavigationMenuPrimitive.List
+      ref={ref}
+      className={cn('group flex flex-1 list-none flex-row items-center justify-center gap-1', className)}
+      {...props}
+    >
+      {children}
+    </NavigationMenuPrimitive.List>
+  );
+});
+NavigationMenuList.displayName = 'NavigationMenuList';
+
+export const NavigationMenuItem = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Item>,
+  NavigationMenuItemBaseProps
+>(({ className, children, value, ...props }, ref) => {
+  return (
+    <NavigationMenuPrimitive.Item ref={ref} value={value || ''} className={cn('relative', className)} {...props}>
+      {children}
+    </NavigationMenuPrimitive.Item>
+  );
+});
+NavigationMenuItem.displayName = 'NavigationMenuItem';
+
+export const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  NavigationMenuTriggerBaseProps
+>(({ className, children, disabled, ...props }, ref) => {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      ref={ref}
+      disabled={disabled}
+      className={cn(
+        'group bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground active:bg-accent active:text-accent-foreground flex flex-row items-center justify-center gap-1 rounded-md px-4 py-2 text-sm font-medium transition-colors disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <>{children}</>
+      <ChevronDown
+        size={12}
+        className="text-muted-foreground transition-transform duration-200 group-data-[state=open]:rotate-180"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  );
+});
+NavigationMenuTrigger.displayName = 'NavigationMenuTrigger';
+
+export const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  NavigationMenuContentBaseProps
+>(({ className, children, forceMount, ...props }, ref) => {
   return (
-    <View>
-      <Text>navigation-menu is not yet implemented for React Native</Text>
+    <NavigationMenuPrimitive.Portal>
+      <NavigationMenuPrimitive.Content ref={ref} {...props}>
+        <Animated.View
+          entering={FadeIn.duration(150)}
+          exiting={FadeOut.duration(150)}
+          className={cn('bg-popover border-border z-50 overflow-hidden rounded-md border p-4 shadow-md', className)}
+        >
+          {children}
+        </Animated.View>
+      </NavigationMenuPrimitive.Content>
+    </NavigationMenuPrimitive.Portal>
+  );
+});
+NavigationMenuContent.displayName = 'NavigationMenuContent';
+
+export const NavigationMenuLink = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Link>,
+  NavigationMenuLinkBaseProps & { onPress?: () => void }
+>(({ className, children, active, onSelect, onPress, href, ...props }, ref) => {
+  const handlePress = (e: GestureResponderEvent) => {
+    if (onPress) {
+      onPress();
+    }
+    if (onSelect) {
+      onSelect(e as unknown as Event);
+    }
+  };
+
+  return (
+    <NavigationMenuPrimitive.Link
+      ref={ref}
+      active={active}
+      onPress={handlePress}
+      className={cn(
+        'hover:bg-accent hover:text-accent-foreground active:bg-accent active:text-accent-foreground rounded-md px-3 py-2 text-sm font-medium transition-colors',
+        active && 'bg-accent text-accent-foreground',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </NavigationMenuPrimitive.Link>
+  );
+});
+NavigationMenuLink.displayName = 'NavigationMenuLink';
+
+export const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  NavigationMenuViewportBaseProps
+>(({ className, forceMount, ...props }, ref) => {
+  return (
+    <View className="absolute top-full left-0 flex justify-center">
+      <NavigationMenuPrimitive.Viewport
+        ref={ref}
+        className={cn(
+          'origin-top-center bg-popover text-popover-foreground border-border relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow-lg md:w-[var(--radix-navigation-menu-viewport-width)]',
+          className,
+        )}
+        {...props}
+      />
     </View>
   );
-};
+});
+NavigationMenuViewport.displayName = 'NavigationMenuViewport';
+
+export const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  NavigationMenuIndicatorBaseProps
+>(({ className, forceMount, ...props }, ref) => {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      ref={ref}
+      className={cn('z-10 flex h-1.5 items-end justify-center overflow-hidden transition-all duration-200', className)}
+      {...props}
+    >
+      <View className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+    </NavigationMenuPrimitive.Indicator>
+  );
+});
+NavigationMenuIndicator.displayName = 'NavigationMenuIndicator';