@gv-tech/ui-native 2.23.3 → 2.25.0

package/src/accordion.tsx

@@ -13,9 +13,9 @@ import Animated, {
 import { cn } from './lib/utils';
 
 const Accordion: React.ForwardRefExoticComponent<
-  AccordionProps & React.RefAttributes<React.ElementRef<typeof AccordionPrimitive.Root>>
+  AccordionProps & React.RefAttributes<React.ComponentRef<typeof AccordionPrimitive.Root>>
 > = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Root>,
+  React.ComponentRef<typeof AccordionPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>
 >(({ className, ...props }, ref) => {
   return <AccordionPrimitive.Root ref={ref} className={cn('web:gap-0', className)} {...props} />;
@@ -23,9 +23,9 @@ const Accordion: React.ForwardRefExoticComponent<
 Accordion.displayName = AccordionPrimitive.Root?.displayName || 'Accordion';
 
 const AccordionItem: React.ForwardRefExoticComponent<
-  AccordionItemProps & React.RefAttributes<React.ElementRef<typeof AccordionPrimitive.Item>>
+  AccordionItemProps & React.RefAttributes<React.ComponentRef<typeof AccordionPrimitive.Item>>
 > = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentRef<typeof AccordionPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
 >(({ className, ...props }, ref) => {
   return (
@@ -35,9 +35,9 @@ const AccordionItem: React.ForwardRefExoticComponent<
 AccordionItem.displayName = AccordionPrimitive.Item?.displayName || 'AccordionItem';
 
 const AccordionHeader: React.ForwardRefExoticComponent<
-  AccordionHeaderProps & React.RefAttributes<React.ElementRef<typeof AccordionPrimitive.Header>>
+  AccordionHeaderProps & React.RefAttributes<React.ComponentRef<typeof AccordionPrimitive.Header>>
 > = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Header>,
+  React.ComponentRef<typeof AccordionPrimitive.Header>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Header>
 >(({ className, ...props }, ref) => {
   return <AccordionPrimitive.Header ref={ref} className={cn('flex flex-row', className)} {...props} />;
@@ -45,9 +45,9 @@ const AccordionHeader: React.ForwardRefExoticComponent<
 AccordionHeader.displayName = AccordionPrimitive.Header?.displayName || 'AccordionHeader';
 
 const AccordionTrigger: React.ForwardRefExoticComponent<
-  AccordionTriggerProps & React.RefAttributes<React.ElementRef<typeof AccordionPrimitive.Trigger>>
+  AccordionTriggerProps & React.RefAttributes<React.ComponentRef<typeof AccordionPrimitive.Trigger>>
 > = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentRef<typeof AccordionPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
 >(({ className, children, ...props }, ref) => {
   const { isExpanded } = AccordionPrimitive.useItemContext();
@@ -80,9 +80,9 @@ const AccordionTrigger: React.ForwardRefExoticComponent<
 AccordionTrigger.displayName = AccordionPrimitive.Trigger?.displayName || 'AccordionTrigger';
 
 const AccordionContent: React.ForwardRefExoticComponent<
-  AccordionContentProps & React.RefAttributes<React.ElementRef<typeof AccordionPrimitive.Content>>
+  AccordionContentProps & React.RefAttributes<React.ComponentRef<typeof AccordionPrimitive.Content>>
 > = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentRef<typeof AccordionPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
 >(({ className, children, ...props }, ref) => {
   return (

package/src/alert-dialog.tsx

@@ -13,9 +13,9 @@ const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 const AlertDialogPortal = AlertDialogPrimitive.Portal;
 
 const AlertDialogOverlay: React.ForwardRefExoticComponent<
-  AlertDialogOverlayProps & React.RefAttributes<React.ElementRef<typeof AlertDialogPrimitive.Overlay>>
+  AlertDialogOverlayProps & React.RefAttributes<React.ComponentRef<typeof AlertDialogPrimitive.Overlay>>
 > = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentRef<typeof AlertDialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
 >(({ className, ...props }, ref) => {
   return (
@@ -31,9 +31,9 @@ const AlertDialogOverlay: React.ForwardRefExoticComponent<
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay?.displayName || 'AlertDialogOverlay';
 
 const AlertDialogContent: React.ForwardRefExoticComponent<
-  AlertDialogContentProps & React.RefAttributes<React.ElementRef<typeof AlertDialogPrimitive.Content>>
+  AlertDialogContentProps & React.RefAttributes<React.ComponentRef<typeof AlertDialogPrimitive.Content>>
 > = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentRef<typeof AlertDialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & {
     portalHost?: string;
     overlayClassName?: string;
@@ -69,9 +69,9 @@ const AlertDialogFooter = ({ className, ...props }: React.ComponentPropsWithoutR
 AlertDialogFooter.displayName = 'AlertDialogFooter';
 
 const AlertDialogTitle: React.ForwardRefExoticComponent<
-  AlertDialogTitleProps & React.RefAttributes<React.ElementRef<typeof AlertDialogPrimitive.Title>>
+  AlertDialogTitleProps & React.RefAttributes<React.ComponentRef<typeof AlertDialogPrimitive.Title>>
 > = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentRef<typeof AlertDialogPrimitive.Title>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Title
@@ -83,9 +83,9 @@ const AlertDialogTitle: React.ForwardRefExoticComponent<
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title?.displayName || 'AlertDialogTitle';
 
 const AlertDialogDescription: React.ForwardRefExoticComponent<
-  AlertDialogDescriptionProps & React.RefAttributes<React.ElementRef<typeof AlertDialogPrimitive.Description>>
+  AlertDialogDescriptionProps & React.RefAttributes<React.ComponentRef<typeof AlertDialogPrimitive.Description>>
 > = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentRef<typeof AlertDialogPrimitive.Description>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Description
@@ -97,9 +97,9 @@ const AlertDialogDescription: React.ForwardRefExoticComponent<
 AlertDialogDescription.displayName = AlertDialogPrimitive.Description?.displayName || 'AlertDialogDescription';
 
 const AlertDialogAction: React.ForwardRefExoticComponent<
-  AlertDialogActionProps & React.RefAttributes<React.ElementRef<typeof AlertDialogPrimitive.Action>>
+  AlertDialogActionProps & React.RefAttributes<React.ComponentRef<typeof AlertDialogPrimitive.Action>>
 > = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentRef<typeof AlertDialogPrimitive.Action>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
@@ -107,9 +107,9 @@ const AlertDialogAction: React.ForwardRefExoticComponent<
 AlertDialogAction.displayName = AlertDialogPrimitive.Action?.displayName || 'AlertDialogAction';
 
 const AlertDialogCancel: React.ForwardRefExoticComponent<
-  AlertDialogCancelProps & React.RefAttributes<React.ElementRef<typeof AlertDialogPrimitive.Cancel>>
+  AlertDialogCancelProps & React.RefAttributes<React.ComponentRef<typeof AlertDialogPrimitive.Cancel>>
 > = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentRef<typeof AlertDialogPrimitive.Cancel>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Cancel

package/src/alert.tsx

@@ -20,7 +20,7 @@ const alertVariants = cva('relative w-full rounded-lg border p-4', {
 });
 
 const Alert = React.forwardRef<
-  React.ElementRef<typeof View>,
+  React.ComponentRef<typeof View>,
   React.ComponentPropsWithoutRef<typeof View> & VariantProps<typeof alertVariants>
 >(({ className, variant, children, ...props }, ref) => (
   <View ref={ref} className={cn(alertVariants({ variant }), className)} {...props}>
@@ -29,7 +29,7 @@ const Alert = React.forwardRef<
 ));
 Alert.displayName = 'Alert';
 
-const AlertTitle = React.forwardRef<React.ElementRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
+const AlertTitle = React.forwardRef<React.ComponentRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
   ({ className, ...props }, ref) => (
     <Text
       ref={ref}
@@ -40,7 +40,7 @@ const AlertTitle = React.forwardRef<React.ElementRef<typeof Text>, React.Compone
 );
 AlertTitle.displayName = 'AlertTitle';
 
-const AlertDescription = React.forwardRef<React.ElementRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
+const AlertDescription = React.forwardRef<React.ComponentRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
   ({ className, ...props }, ref) => (
     <Text ref={ref} className={cn('text-muted-foreground text-sm leading-relaxed', className)} {...props} />
   ),

package/src/avatar.tsx

@@ -4,9 +4,9 @@ import * as React from 'react';
 import { cn } from './lib/utils';
 
 const Avatar: React.ForwardRefExoticComponent<
-  AvatarProps & React.RefAttributes<React.ElementRef<typeof AvatarPrimitive.Root>>
+  AvatarProps & React.RefAttributes<React.ComponentRef<typeof AvatarPrimitive.Root>>
 > = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentRef<typeof AvatarPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Root
@@ -18,9 +18,9 @@ const Avatar: React.ForwardRefExoticComponent<
 Avatar.displayName = AvatarPrimitive.Root?.displayName || 'Avatar';
 
 const AvatarImage: React.ForwardRefExoticComponent<
-  AvatarImageProps & React.RefAttributes<React.ElementRef<typeof AvatarPrimitive.Image>>
+  AvatarImageProps & React.RefAttributes<React.ComponentRef<typeof AvatarPrimitive.Image>>
 > = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentRef<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} />
@@ -28,9 +28,9 @@ const AvatarImage: React.ForwardRefExoticComponent<
 AvatarImage.displayName = AvatarPrimitive.Image?.displayName || 'AvatarImage';
 
 const AvatarFallback: React.ForwardRefExoticComponent<
-  AvatarFallbackProps & React.RefAttributes<React.ElementRef<typeof AvatarPrimitive.Fallback>>
+  AvatarFallbackProps & React.RefAttributes<React.ComponentRef<typeof AvatarPrimitive.Fallback>>
 > = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentRef<typeof AvatarPrimitive.Fallback>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Fallback

package/src/button.tsx

@@ -20,9 +20,13 @@ const buttonVariants = cva(
       },
       size: {
         default: 'h-10 px-4 py-2',
+        xs: 'h-7 px-2',
         sm: 'h-9 px-3',
         lg: 'h-12 px-8',
         icon: 'h-10 w-10',
+        'icon-xs': 'h-7 w-7',
+        'icon-sm': 'h-9 w-9',
+        'icon-lg': 'h-12 w-12',
       },
     },
     defaultVariants: {
@@ -50,7 +54,7 @@ const buttonTextVariants = cva('text-sm font-medium', {
 
 export interface ButtonProps extends ButtonBaseProps {
   variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | null;
-  size?: 'default' | 'sm' | 'lg' | 'icon' | null;
+  size?: 'default' | 'xs' | 'sm' | 'lg' | 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg' | null;
   onPress?: () => void;
 }
 

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/card.tsx

@@ -7,19 +7,19 @@ 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) => (
+const Card = React.forwardRef<React.ComponentRef<typeof View>, CardProps>(({ className, ...props }, ref) => (
   <View ref={ref} className={cn('border-border bg-card rounded-xl border shadow-sm', className)} {...props} />
 ));
 Card.displayName = 'Card';
 
-const CardHeader = React.forwardRef<React.ElementRef<typeof View>, React.ComponentPropsWithoutRef<typeof View>>(
+const CardHeader = React.forwardRef<React.ComponentRef<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>>(
+const CardTitle = React.forwardRef<React.ComponentRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
   ({ className, ...props }, ref) => (
     <Text
       ref={ref}
@@ -30,14 +30,14 @@ const CardTitle = React.forwardRef<React.ElementRef<typeof Text>, React.Componen
 );
 CardTitle.displayName = 'CardTitle';
 
-const CardDescription = React.forwardRef<React.ElementRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
+const CardDescription = React.forwardRef<React.ComponentRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
   ({ className, ...props }, ref) => (
     <Text ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />
   ),
 );
 CardDescription.displayName = 'CardDescription';
 
-const CardContent = React.forwardRef<React.ElementRef<typeof View>, React.ComponentPropsWithoutRef<typeof View>>(
+const CardContent = React.forwardRef<React.ComponentRef<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' })}
@@ -46,7 +46,7 @@ const CardContent = React.forwardRef<React.ElementRef<typeof View>, React.Compon
 );
 CardContent.displayName = 'CardContent';
 
-const CardFooter = React.forwardRef<React.ElementRef<typeof View>, React.ComponentPropsWithoutRef<typeof View>>(
+const CardFooter = React.forwardRef<React.ComponentRef<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} />
   ),

package/src/carousel.tsx

@@ -151,7 +151,7 @@ export const CarouselItem = React.forwardRef<View, CarouselItemBaseProps>(({ chi
 });
 CarouselItem.displayName = 'CarouselItem';
 
-export const CarouselPrevious = React.forwardRef<React.ElementRef<typeof Button>, CarouselPreviousBaseProps>(
+export const CarouselPrevious = React.forwardRef<React.ComponentRef<typeof Button>, CarouselPreviousBaseProps>(
   ({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
     const { orientation, scrollPrev, canScrollPrev } = useCarousel();
 
@@ -178,7 +178,7 @@ export const CarouselPrevious = React.forwardRef<React.ElementRef<typeof Button>
 );
 CarouselPrevious.displayName = 'CarouselPrevious';
 
-export const CarouselNext = React.forwardRef<React.ElementRef<typeof Button>, CarouselNextBaseProps>(
+export const CarouselNext = React.forwardRef<React.ComponentRef<typeof Button>, CarouselNextBaseProps>(
   ({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
     const { orientation, scrollNext, canScrollNext } = useCarousel();
 

package/src/checkbox.tsx

@@ -6,7 +6,7 @@ import { Platform } from 'react-native';
 import { cn } from './lib/utils';
 
 const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentRef<typeof CheckboxPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
 >(({ className, ...props }, ref) => {
   return (

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() {