@gv-tech/ui-native 2.24.0 → 2.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gv-tech/ui-native",
-  "version": "2.24.0",
+  "version": "2.25.0",
   "description": "React Native implementations of the GV Tech design system components",
   "repository": {
     "type": "git",
@@ -36,6 +36,7 @@
   "dependencies": {
     "@gv-tech/design-tokens": "^2.12.0",
     "@gv-tech/ui-core": "^2.12.0",
+    "@react-native-community/datetimepicker": "^9.1.0",
     "@rn-primitives/accordion": "^1.2.0",
     "@rn-primitives/alert-dialog": "^1.2.0",
     "@rn-primitives/aspect-ratio": "^1.2.0",

package/src/calendar.tsx

@@ -1,7 +1,56 @@
 import type { CalendarBaseProps } from '@gv-tech/ui-core';
+import DateTimePicker from '@react-native-community/datetimepicker';
 import * as React from 'react';
 import { View } from 'react-native';
+import { cn } from './lib/utils';
 
-export const Calendar: React.FC<CalendarBaseProps> = ({ className }) => {
-  return <View className={className} />;
-};
+export type CalendarProps = Omit<
+  React.ComponentProps<typeof DateTimePicker>,
+  'value' | 'className' | 'display' | 'minuteInterval'
+> &
+  CalendarBaseProps & {
+    value?: Date;
+    onChange?: (event: unknown, date?: Date) => void;
+  };
+
+export const Calendar = React.forwardRef<View, CalendarProps>(
+  ({ className, value, onChange, showOutsideDays, ...props }, ref) => {
+    // If no value is provided, default to current date so the picker doesn't crash
+    const [date, setDate] = React.useState<Date>(value || new Date());
+
+    // Sync internal state if external value changes
+    React.useEffect(() => {
+      if (value) {
+        setDate(value);
+      }
+    }, [value]);
+
+    const handleValueChange = (event: unknown, selectedDate: Date) => {
+      setDate(selectedDate);
+      if (onChange) {
+        onChange(event, selectedDate);
+      }
+    };
+
+    const handleDismiss = () => {
+      if (onChange) {
+        onChange({ type: 'dismissed' }, date);
+      }
+    };
+
+    return (
+      <View ref={ref} className={cn('bg-background overflow-hidden rounded-md', className)}>
+        <DateTimePicker
+          value={date}
+          mode="date"
+          display="inline"
+          onValueChange={handleValueChange}
+          onDismiss={handleDismiss}
+          {...props}
+        />
+      </View>
+    );
+  },
+);
+
+Calendar.displayName = 'Calendar';

package/src/combobox.tsx

@@ -15,37 +15,126 @@ import type {
   ComboboxTriggerBaseProps,
   ComboboxValueBaseProps,
 } from '@gv-tech/ui-core';
+import { Check, ChevronDown, X } from 'lucide-react-native';
 import * as React from 'react';
-import { Text, View } from 'react-native';
+import { Pressable, TextInput, View } from 'react-native';
+import { Dialog, DialogContent, DialogTrigger } from './dialog';
+import { wrapTextChildren } from './lib/render-native';
 import { cn } from './lib/utils';
+import { Text } from './text';
+
+// Context to share state across compound components
+const ComboboxContext = React.createContext<{
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  value: string;
+  setValue: (value: string) => void;
+  searchQuery: string;
+  setSearchQuery: (query: string) => void;
+} | null>(null);
+
+function useCombobox() {
+  const context = React.useContext(ComboboxContext);
+  if (!context) {
+    throw new Error('Combobox components must be rendered within a Combobox provider');
+  }
+  return context;
+}
+
+export interface ComboboxProps extends React.ComponentProps<typeof View> {
+  value?: string;
+  onValueChange?: (value: string) => void;
+}
+
+function Combobox({ className, value: controlledValue, onValueChange, ...props }: ComboboxProps) {
+  const [open, setOpen] = React.useState(false);
+  const [internalValue, setInternalValue] = React.useState(controlledValue || '');
+  const [searchQuery, setSearchQuery] = React.useState('');
+
+  const value = controlledValue !== undefined ? controlledValue : internalValue;
+  const setValue = (newValue: string) => {
+    setInternalValue(newValue);
+    onValueChange?.(newValue);
+    setOpen(false);
+  };
 
-function Combobox({ className, ...props }: React.ComponentProps<typeof View>) {
   return (
-    <View className={cn('border-destructive/50 rounded-md border border-dashed p-4', className)} {...props}>
-      <Text className="text-destructive font-mono text-xs">Combobox (Not Implemented)</Text>
-    </View>
+    <ComboboxContext.Provider value={{ open, setOpen, value, setValue, searchQuery, setSearchQuery }}>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <View className={cn('relative', className)} {...props} />
+      </Dialog>
+    </ComboboxContext.Provider>
   );
 }
 
-function ComboboxValue({ className, ...props }: React.ComponentProps<typeof View> & ComboboxValueBaseProps) {
-  return <View className={className} {...props} />;
+function ComboboxValue({ className, children, ...props }: React.ComponentProps<typeof View> & ComboboxValueBaseProps) {
+  const { value } = useCombobox();
+  return (
+    <View className={className} {...props}>
+      <Text className="text-sm">{children || value || 'Select an item...'}</Text>
+    </View>
+  );
 }
 
-function ComboboxTrigger({ className, ...props }: React.ComponentProps<typeof View> & ComboboxTriggerBaseProps) {
-  return <View className={className} {...props} />;
+function ComboboxTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof Pressable> & ComboboxTriggerBaseProps) {
+  return (
+    <DialogTrigger asChild>
+      <Pressable
+        className={cn(
+          'border-input bg-background text-foreground flex h-10 w-full flex-row items-center justify-between rounded-md border px-3 py-2 text-sm',
+          className,
+        )}
+        {...props}
+      >
+        <View className="flex-1 flex-row items-center">{wrapTextChildren(children, Text)}</View>
+        <ChevronDown size={16} className="text-muted-foreground opacity-50" />
+      </Pressable>
+    </DialogTrigger>
+  );
 }
 
-function ComboboxClear({ className, ...props }: React.ComponentProps<typeof View> & ComboboxClearBaseProps) {
-  return <View className={className} {...props} />;
+function ComboboxClear({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof Pressable> & ComboboxClearBaseProps) {
+  const { setValue } = useCombobox();
+  return (
+    <Pressable
+      className={cn('flex items-center justify-center p-1', className)}
+      onPress={() => setValue('')}
+      {...props}
+    >
+      {children || <X size={14} className="text-muted-foreground" />}
+    </Pressable>
+  );
 }
 
 function ComboboxInput({
   className,
   showClear,
   showTrigger,
+  placeholder = 'Search...',
   ...props
-}: React.ComponentProps<typeof View> & ComboboxInputBaseProps) {
-  return <View className={className} {...props} />;
+}: React.ComponentProps<typeof TextInput> & ComboboxInputBaseProps) {
+  const { searchQuery, setSearchQuery } = useCombobox();
+  return (
+    <View className="border-border flex flex-row items-center border-b px-3">
+      <TextInput
+        className={cn('flex h-12 w-full rounded-md bg-transparent py-3 text-sm outline-none', className)}
+        placeholder={placeholder}
+        placeholderTextColor="#a1a1aa"
+        value={searchQuery}
+        onChangeText={setSearchQuery}
+        autoFocus
+        {...props}
+      />
+    </View>
+  );
 }
 
 function ComboboxContent({
@@ -57,47 +146,121 @@ function ComboboxContent({
   anchor,
   ...props
 }: React.ComponentProps<typeof View> & ComboboxContentBaseProps) {
-  return <View className={className} {...props} />;
+  return (
+    <DialogContent className="p-0">
+      <View
+        className={cn('bg-popover flex max-h-96 w-full flex-col overflow-hidden rounded-md', className)}
+        {...props}
+      />
+    </DialogContent>
+  );
 }
 
 function ComboboxList({ className, ...props }: React.ComponentProps<typeof View> & ComboboxListBaseProps) {
-  return <View className={className} {...props} />;
+  return <View className={cn('max-h-[300px] overflow-hidden', className)} {...props} />;
 }
 
-function ComboboxItem({ className, ...props }: React.ComponentProps<typeof View> & ComboboxItemBaseProps) {
-  return <View className={className} {...props} />;
+export type ComboboxItemProps = React.ComponentProps<typeof Pressable> &
+  ComboboxItemBaseProps & {
+    value: string;
+  };
+
+function ComboboxItem({ className, children, value: itemValue, ...props }: ComboboxItemProps) {
+  const { value, setValue, searchQuery } = useCombobox();
+
+  // Basic filtering mechanism
+  const textContent = React.Children.toArray(children).join('').toLowerCase();
+  if (
+    searchQuery &&
+    !textContent.includes(searchQuery.toLowerCase()) &&
+    !itemValue.toLowerCase().includes(searchQuery.toLowerCase())
+  ) {
+    return null;
+  }
+
+  const isSelected = value === itemValue;
+
+  return (
+    <Pressable
+      className={cn(
+        'active:bg-accent relative flex w-full flex-row items-center rounded-sm py-2.5 pr-8 pl-2 text-sm outline-none',
+        isSelected && 'bg-accent',
+        className,
+      )}
+      onPress={() => setValue(itemValue)}
+      {...props}
+    >
+      <View className="flex-1">
+        {wrapTextChildren(children, Text, { className: isSelected ? 'font-semibold' : '' })}
+      </View>
+      {isSelected && (
+        <View className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+          <Check size={16} className="text-foreground" />
+        </View>
+      )}
+    </Pressable>
+  );
 }
 
 function ComboboxGroup({ className, ...props }: React.ComponentProps<typeof View> & ComboboxGroupBaseProps) {
-  return <View className={className} {...props} />;
+  return <View className={cn('text-foreground overflow-hidden p-1', className)} {...props} />;
 }
 
 function ComboboxLabel({ className, ...props }: React.ComponentProps<typeof View> & ComboboxLabelBaseProps) {
-  return <View className={className} {...props} />;
+  return <View className={cn('text-muted-foreground px-2 py-1.5 text-xs font-semibold', className)} {...props} />;
 }
 
 function ComboboxCollection({ className, ...props }: React.ComponentProps<typeof View> & ComboboxCollectionBaseProps) {
   return <View className={className} {...props} />;
 }
 
-function ComboboxEmpty({ className, ...props }: React.ComponentProps<typeof View> & ComboboxEmptyBaseProps) {
-  return <View className={className} {...props} />;
+function ComboboxEmpty({ className, children, ...props }: React.ComponentProps<typeof View> & ComboboxEmptyBaseProps) {
+  const { searchQuery } = useCombobox();
+
+  if (!searchQuery) {
+    return null;
+  }
+
+  return (
+    <View className={cn('py-6 text-center text-sm', className)} {...props}>
+      <Text className="text-muted-foreground text-center">{children || 'No results found.'}</Text>
+    </View>
+  );
 }
 
 function ComboboxSeparator({ className, ...props }: React.ComponentProps<typeof View> & ComboboxSeparatorBaseProps) {
-  return <View className={className} {...props} />;
+  return <View className={cn('bg-muted -mx-1 h-px', className)} {...props} />;
 }
 
 function ComboboxChips({ className, ...props }: React.ComponentProps<typeof View> & ComboboxChipsBaseProps) {
-  return <View className={className} {...props} />;
+  return <View className={cn('flex flex-row flex-wrap gap-1', className)} {...props} />;
 }
 
-function ComboboxChip({ className, showRemove, ...props }: React.ComponentProps<typeof View> & ComboboxChipBaseProps) {
-  return <View className={className} {...props} />;
+function ComboboxChip({
+  className,
+  showRemove,
+  children,
+  ...props
+}: React.ComponentProps<typeof View> & ComboboxChipBaseProps) {
+  return (
+    <View
+      className={cn(
+        'bg-secondary text-secondary-foreground flex flex-row items-center rounded-md px-2 py-1',
+        className,
+      )}
+      {...props}
+    >
+      {wrapTextChildren(children, Text, { className: 'text-xs' })}
+      {showRemove && <X size={12} className="ml-1 opacity-50" />}
+    </View>
+  );
 }
 
-function ComboboxChipsInput({ className, ...props }: React.ComponentProps<typeof View> & ComboboxChipsInputBaseProps) {
-  return <View className={className} {...props} />;
+function ComboboxChipsInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof TextInput> & ComboboxChipsInputBaseProps) {
+  return <TextInput className={cn('flex-1 bg-transparent px-2 py-1 outline-none', className)} {...props} />;
 }
 
 function useComboboxAnchor() {

package/src/dialog.tsx

@@ -2,7 +2,7 @@ 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 { Platform, View, type StyleProp, type ViewStyle } from 'react-native';
 import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
 
 import { cn } from './lib/utils';
@@ -28,13 +28,28 @@ export type DialogOverlayProps = React.ComponentPropsWithoutRef<typeof DialogPri
 export type DialogOverlayRef = React.ComponentRef<typeof DialogPrimitive.Overlay>;
 
 const DialogOverlay: React.ForwardRefExoticComponent<DialogOverlayProps & React.RefAttributes<DialogOverlayRef>> =
-  React.forwardRef<DialogOverlayRef, DialogOverlayProps>(({ className, ...props }, ref) => {
+  React.forwardRef<DialogOverlayRef, DialogOverlayProps>(({ className, style, ...props }, ref) => {
     return (
-      <DialogPrimitive.Overlay style={StyleSheet.absoluteFill} asChild ref={ref} {...props}>
+      <DialogPrimitive.Overlay
+        style={[
+          {
+            position: Platform.OS === 'web' ? 'fixed' : 'absolute',
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            zIndex: 50,
+          } as unknown as ViewStyle,
+          style as StyleProp<ViewStyle>,
+        ]}
+        asChild
+        ref={ref}
+        {...props}
+      >
         <Animated.View
           entering={FadeIn.duration(150)}
           exiting={FadeOut.duration(150)}
-          className={cn('z-50 flex items-center justify-center bg-black/80 p-2', className)}
+          className={cn('flex items-center justify-center bg-black/80 p-2', className)}
         />
       </DialogPrimitive.Overlay>
     );
@@ -45,31 +60,63 @@ export type DialogContentRef = React.ComponentRef<typeof DialogPrimitive.Content
 const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<DialogContentRef>> =
   React.forwardRef<DialogContentRef, DialogContentProps>(
     ({ className, children, portalHost, overlayClassName, overlayStyle, ...props }, ref) => {
+      const PlatformWrapper = React.useCallback(({ children }: { children: React.ReactNode }) => {
+        if (Platform.OS === 'web') {
+          return <>{children}</>;
+        }
+        return (
+          <View
+            pointerEvents="box-none"
+            style={{
+              position: 'absolute',
+              top: 0,
+              right: 0,
+              bottom: 0,
+              left: 0,
+              zIndex: 50,
+              alignItems: 'center',
+              justifyContent: 'center',
+              padding: 16,
+            }}
+          >
+            {children}
+          </View>
+        );
+      }, []);
+
       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(
-                'border-border bg-background z-50 w-full max-w-lg gap-4 rounded-xl border p-6 shadow-lg sm:rounded-lg',
-                className,
-              )}
-            >
-              {children}
-              <DialogPrimitive.Close
-                className={
-                  'ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none'
-                }
+          <PlatformWrapper>
+            <DialogPrimitive.Content ref={ref} {...props}>
+              <View
+                pointerEvents="box-none"
+                className="absolute inset-0 z-50 flex items-center justify-center"
+                style={Platform.OS === 'web' ? ({ position: 'fixed' } as unknown as ViewStyle) : undefined}
               >
-                <X size={18} className="text-muted-foreground" />
-                <View className="sr-only">
-                  <DialogPrimitive.Title>Close</DialogPrimitive.Title>
-                </View>
-              </DialogPrimitive.Close>
-            </Animated.View>
-          </DialogPrimitive.Content>
+                <Animated.View
+                  entering={FadeIn.duration(150)}
+                  exiting={FadeOut.duration(150)}
+                  className={cn(
+                    'border-border bg-background w-full max-w-lg gap-4 rounded-xl border p-6 shadow-lg sm:rounded-lg',
+                    className,
+                  )}
+                >
+                  {children}
+                  <DialogPrimitive.Close
+                    className={
+                      'ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none'
+                    }
+                  >
+                    <X size={18} className="text-muted-foreground" />
+                    <View className="sr-only">
+                      <DialogPrimitive.Title>Close</DialogPrimitive.Title>
+                    </View>
+                  </DialogPrimitive.Close>
+                </Animated.View>
+              </View>
+            </DialogPrimitive.Content>
+          </PlatformWrapper>
         </DialogPortal>
       );
     },

package/src/theme-toggle.tsx

@@ -33,28 +33,31 @@ export function ThemeToggle({ variant = 'binary', onThemeChange, customTheme, cl
   };
 
   const IconToggle = () => (
-    <View className="flex items-center justify-center">
-      <Sun
-        size={18}
+    <View className="flex h-6 w-6 items-center justify-center">
+      <View
         className={cn(
-          'text-foreground transition-all',
+          'items-center justify-center transition-all',
           !isSystem && !isDark ? 'scale-100 rotate-0 opacity-100' : 'absolute scale-0 -rotate-90 opacity-0',
         )}
-      />
-      <Moon
-        size={18}
+      >
+        <Sun size={18} className="text-foreground" />
+      </View>
+      <View
         className={cn(
-          'text-foreground transition-all',
+          'items-center justify-center transition-all',
           !isSystem && isDark ? 'scale-100 rotate-0 opacity-100' : 'absolute scale-0 rotate-90 opacity-0',
         )}
-      />
-      <SunMoon
-        size={18}
+      >
+        <Moon size={18} className="text-foreground" />
+      </View>
+      <View
         className={cn(
-          'text-foreground transition-all',
+          'items-center justify-center transition-all',
           isSystem ? 'scale-100 rotate-0 opacity-100' : 'absolute scale-0 rotate-90 opacity-0',
         )}
-      />
+      >
+        <SunMoon size={18} className="text-foreground" />
+      </View>
     </View>
   );