@gv-tech/ui-native 2.22.1 → 2.23.0

package/src/form.tsx

@@ -1,9 +1,171 @@
+import * as React from 'react';
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from 'react-hook-form';
 import { Text, View } from 'react-native';
 
-export const Form = () => {
+import {
+  FormControlBaseProps,
+  FormDescriptionBaseProps,
+  FormItemBaseProps,
+  FormLabelBaseProps,
+  FormMessageBaseProps,
+} from '@gv-tech/ui-core';
+import { Label } from './label';
+import { cn } from './lib/utils';
+// Assuming we have Slot from @rn-primitives/slot
+import * as Slot from '@rn-primitives/slot';
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue | null>(null);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  if (!fieldContext) {
+    throw new Error('useFormField should be used within <FormField>');
+  }
+
+  if (!itemContext) {
+    throw new Error('useFormField should be used within <FormItem>');
+  }
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue | null>(null);
+
+const FormItem = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & FormItemBaseProps
+>(({ className, ...props }, ref) => {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <View ref={ref} className={cn('space-y-2', className)} {...props} />
+    </FormItemContext.Provider>
+  );
+});
+FormItem.displayName = 'FormItem';
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof Label>,
+  React.ComponentPropsWithoutRef<typeof Label> & FormLabelBaseProps
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+
+  return <Label ref={ref} className={cn(error && 'text-destructive', className)} nativeID={formItemId} {...props} />;
+});
+FormLabel.displayName = 'FormLabel';
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot.Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot.Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+
+  return (
+    <Slot.Slot
+      ref={ref}
+      nativeID={formItemId}
+      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+});
+FormControl.displayName = 'FormControl';
+
+const FormDescription = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  React.ComponentPropsWithoutRef<typeof Text> & FormDescriptionBaseProps
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+
   return (
-    <View>
-      <Text>form is not yet implemented for React Native</Text>
-    </View>
+    <Text
+      ref={ref}
+      nativeID={formDescriptionId}
+      className={cn('text-muted-foreground text-[13px]', className)}
+      {...props}
+    />
   );
+});
+FormDescription.displayName = 'FormDescription';
+
+const FormMessage = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  React.ComponentPropsWithoutRef<typeof Text> & FormMessageBaseProps
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? '') : children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <Text
+      ref={ref}
+      nativeID={formMessageId}
+      className={cn('text-destructive text-[13px] font-medium', className)}
+      {...props}
+    >
+      {body}
+    </Text>
+  );
+});
+FormMessage.displayName = 'FormMessage';
+
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };
+export type {
+  FormControlBaseProps as FormControlProps,
+  FormDescriptionBaseProps as FormDescriptionProps,
+  FormItemBaseProps as FormItemProps,
+  FormLabelBaseProps as FormLabelProps,
+  FormMessageBaseProps as FormMessageProps,
 };

package/src/index.ts

@@ -327,3 +327,111 @@ export {
   TableOfContentsHeading,
   TableOfContentsList,
 } from './table-of-contents';
+
+// Button Group
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants } from './button-group';
+
+// Direction
+export { DirectionProvider, useDirection } from './direction';
+
+// Empty
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from './empty';
+
+// Spinner
+export { Spinner } from './spinner';
+
+// Field
+export {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldTitle,
+} from './field';
+
+// Input Group
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+} from './input-group';
+
+// Native Select
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from './native-select';
+
+// Kbd
+export { Kbd, KbdGroup } from './kbd';
+
+// Item
+export {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemFooter,
+  ItemGroup,
+  ItemHeader,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle,
+} from './item';
+
+// Combobox
+export {
+  Combobox,
+  ComboboxChip,
+  ComboboxChips,
+  ComboboxChipsInput,
+  ComboboxClear,
+  ComboboxCollection,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxLabel,
+  ComboboxList,
+  ComboboxSeparator,
+  ComboboxTrigger,
+  ComboboxValue,
+  useComboboxAnchor,
+} from './combobox';
+
+// Input OTP
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from './input-otp';
+
+// Sidebar
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+} from './sidebar';

package/src/input-group.tsx

@@ -0,0 +1,54 @@
+import type {
+  InputGroupAddonBaseProps,
+  InputGroupBaseProps,
+  InputGroupButtonBaseProps,
+  InputGroupInputBaseProps,
+  InputGroupTextareaBaseProps,
+  InputGroupTextBaseProps,
+} from '@gv-tech/ui-core';
+import * as React from 'react';
+import { Text, TextInput, View } from 'react-native';
+import { Button } from './button';
+import { cn } from './lib/utils';
+
+function InputGroup({ className, ...props }: React.ComponentProps<typeof View> & InputGroupBaseProps) {
+  return <View className={cn('border-input flex flex-row items-center rounded-md border', className)} {...props} />;
+}
+
+function InputGroupAddon({ className, align, ...props }: React.ComponentProps<typeof View> & InputGroupAddonBaseProps) {
+  return <View className={cn('p-2', className)} {...props} />;
+}
+
+function InputGroupButton({
+  className,
+  type,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof Button> & InputGroupButtonBaseProps) {
+  return (
+    <Button
+      variant={variant as React.ComponentProps<typeof Button>['variant']}
+      size={size as React.ComponentProps<typeof Button>['size']}
+      className={className}
+      {...(props as Record<string, unknown>)}
+    />
+  );
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<typeof Text> & InputGroupTextBaseProps) {
+  return <Text className={cn('text-muted-foreground text-sm', className)} {...props} />;
+}
+
+function InputGroupInput({ className, ...props }: React.ComponentProps<typeof TextInput> & InputGroupInputBaseProps) {
+  return <TextInput className={cn('text-foreground flex-1 px-3 py-2', className)} {...props} />;
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<typeof TextInput> & InputGroupTextareaBaseProps) {
+  return <TextInput multiline className={cn('text-foreground flex-1 px-3 py-2', className)} {...props} />;
+}
+
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };

package/src/input-otp.tsx

@@ -0,0 +1,34 @@
+import type {
+  InputOTPBaseProps,
+  InputOTPGroupBaseProps,
+  InputOTPSeparatorBaseProps,
+  InputOTPSlotBaseProps,
+} from '@gv-tech/ui-core';
+import * as React from 'react';
+import { Text, View } from 'react-native';
+import { cn } from './lib/utils';
+
+function InputOTP({ className, containerClassName, ...props }: React.ComponentProps<typeof View> & InputOTPBaseProps) {
+  return (
+    <View
+      className={cn('border-destructive/50 rounded-md border border-dashed p-4', containerClassName, className)}
+      {...props}
+    >
+      <Text className="text-destructive font-mono text-xs">InputOTP (Not Implemented)</Text>
+    </View>
+  );
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<typeof View> & InputOTPGroupBaseProps) {
+  return <View className={className} {...props} />;
+}
+
+function InputOTPSlot({ className, index, ...props }: React.ComponentProps<typeof View> & InputOTPSlotBaseProps) {
+  return <View className={className} {...props} />;
+}
+
+function InputOTPSeparator({ className, ...props }: React.ComponentProps<typeof View> & InputOTPSeparatorBaseProps) {
+  return <View className={className} {...props} />;
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/src/item.tsx

@@ -0,0 +1,74 @@
+import type {
+  ItemActionsBaseProps,
+  ItemBaseProps,
+  ItemContentBaseProps,
+  ItemDescriptionBaseProps,
+  ItemFooterBaseProps,
+  ItemGroupBaseProps,
+  ItemHeaderBaseProps,
+  ItemMediaBaseProps,
+  ItemSeparatorBaseProps,
+  ItemTitleBaseProps,
+} from '@gv-tech/ui-core';
+import * as React from 'react';
+import { Text, View } from 'react-native';
+import { cn } from './lib/utils';
+
+function Item({ className, variant, size, ...props }: React.ComponentProps<typeof View> & ItemBaseProps) {
+  return (
+    <View className={cn('flex flex-row flex-wrap items-center gap-2 rounded-lg border p-3', className)} {...props} />
+  );
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<typeof View> & ItemActionsBaseProps) {
+  return <View className={cn('flex flex-row items-center gap-2', className)} {...props} />;
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<typeof View> & ItemContentBaseProps) {
+  return <View className={cn('flex flex-1 flex-col gap-1', className)} {...props} />;
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<typeof Text> & ItemDescriptionBaseProps) {
+  return <Text className={cn('text-muted-foreground text-sm', className)} {...props} />;
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<typeof View> & ItemFooterBaseProps) {
+  return <View className={cn('flex w-full flex-row items-center justify-between gap-2', className)} {...props} />;
+}
+
+function ItemGroup({ className, ...props }: React.ComponentProps<typeof View> & ItemGroupBaseProps) {
+  return <View className={cn('flex flex-col gap-4', className)} {...props} />;
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<typeof View> & ItemHeaderBaseProps) {
+  return <View className={cn('flex w-full flex-row items-center justify-between gap-2', className)} {...props} />;
+}
+
+function ItemMedia({ className, variant, ...props }: React.ComponentProps<typeof View> & ItemMediaBaseProps) {
+  return <View className={cn('flex shrink-0 items-center justify-center gap-2', className)} {...props} />;
+}
+
+function ItemSeparator({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<typeof View> & ItemSeparatorBaseProps) {
+  return <View className={cn('bg-border my-2 h-px w-full', className)} {...props} />;
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<typeof Text> & ItemTitleBaseProps) {
+  return <Text className={cn('text-sm font-medium', className)} {...props} />;
+}
+
+export {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemFooter,
+  ItemGroup,
+  ItemHeader,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle,
+};

package/src/kbd.tsx

@@ -0,0 +1,16 @@
+import type { KbdBaseProps, KbdGroupBaseProps } from '@gv-tech/ui-core';
+import * as React from 'react';
+import { Text, View } from 'react-native';
+import { cn } from './lib/utils';
+
+function Kbd({ className, ...props }: React.ComponentProps<typeof Text> & KbdBaseProps) {
+  return (
+    <Text className={cn('bg-muted text-muted-foreground rounded-sm px-1 font-mono text-xs', className)} {...props} />
+  );
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<typeof View> & KbdGroupBaseProps) {
+  return <View className={cn('flex flex-row items-center gap-1', className)} {...props} />;
+}
+
+export { Kbd, KbdGroup };

package/src/native-select.tsx

@@ -0,0 +1,30 @@
+import type {
+  NativeSelectBaseProps,
+  NativeSelectOptGroupBaseProps,
+  NativeSelectOptionBaseProps,
+} from '@gv-tech/ui-core';
+import * as React from 'react';
+import { Text, View } from 'react-native';
+import { cn } from './lib/utils';
+
+function NativeSelect({ className, size, ...props }: React.ComponentProps<typeof View> & NativeSelectBaseProps) {
+  // Native select relies on @react-native-picker/picker, providing shim
+  return (
+    <View className={cn('border-input rounded-md border p-2', className)} {...props}>
+      <Text className="text-muted-foreground">Select Not Implemented (Use Picker)</Text>
+    </View>
+  );
+}
+
+function NativeSelectOption({ className, ...props }: React.ComponentProps<typeof View> & NativeSelectOptionBaseProps) {
+  return <View className={className} {...props} />;
+}
+
+function NativeSelectOptGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof View> & NativeSelectOptGroupBaseProps) {
+  return <View className={className} {...props} />;
+}
+
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption };

package/src/scroll-area.tsx

@@ -9,8 +9,8 @@ export const ScrollArea = React.forwardRef<ScrollView, ScrollAreaBaseProps>(
       <ScrollView
         ref={ref}
         className={cn('flex-1', className)}
-        showsVerticalScrollIndicator={false}
-        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={true}
+        showsHorizontalScrollIndicator={true}
         {...props}
       >
         <View>{children}</View>
@@ -21,6 +21,8 @@ export const ScrollArea = React.forwardRef<ScrollView, ScrollAreaBaseProps>(
 ScrollArea.displayName = 'ScrollArea';
 
 export const ScrollBar: React.FC<ScrollBarBaseProps> = () => {
+  // Natively, we rely on the ScrollView's built-in indicators.
+  // This component is a no-op shim for contract compatibility.
   return null;
 };
 ScrollBar.displayName = 'ScrollBar';

package/src/search.tsx

@@ -1,17 +1,79 @@
-import { Text, View } from 'react-native';
+import { SearchBaseProps, SearchTriggerBaseProps } from '@gv-tech/ui-core';
+import { Search as SearchIcon } from 'lucide-react-native';
+import * as React from 'react';
+import { Platform, Text, View } from 'react-native';
+import { Button } from './button';
+import { Dialog } from './dialog';
+import { cn } from './lib/utils';
 
-export const Search = () => {
-  return (
-    <View>
-      <Text>Search is not yet implemented for React Native</Text>
-    </View>
+export type SearchProps = SearchBaseProps;
+
+export function Search({ children, open: customOpen, onOpenChange }: SearchProps) {
+  const [open, setOpen] = React.useState(false);
+  const isControlled = customOpen !== undefined;
+  const isOpen = isControlled ? (customOpen as boolean) : open;
+
+  const setIsOpen = React.useCallback(
+    (value: boolean) => {
+      if (isControlled) {
+        onOpenChange?.(value);
+      } else {
+        setOpen(value);
+      }
+    },
+    [isControlled, onOpenChange],
   );
-};
 
-export const SearchTrigger = () => {
   return (
-    <View>
-      <Text>SearchTrigger is not yet implemented for React Native</Text>
-    </View>
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      {children}
+    </Dialog>
   );
-};
+}
+
+export interface SearchTriggerProps
+  extends Omit<React.ComponentPropsWithoutRef<typeof Button>, 'variant'>, SearchTriggerBaseProps {}
+
+export const SearchTrigger = React.forwardRef<React.ElementRef<typeof Button>, SearchTriggerProps>(
+  ({ className, placeholder, variant = 'default', responsive = false, ...props }, ref) => {
+    const defaultPlaceholder = variant === 'compact' ? 'Search...' : 'Search docs...';
+    const activePlaceholder = placeholder || defaultPlaceholder;
+
+    return (
+      <Button
+        variant="outline"
+        className={cn(
+          'relative h-12 flex-row justify-start pl-3 text-sm transition-all sm:h-9',
+          variant === 'default'
+            ? 'w-full pr-12'
+            : cn('w-12 px-0 sm:w-9 sm:justify-center', responsive && 'md:w-48 md:justify-start md:px-3 md:pr-12'),
+          className,
+        )}
+        ref={ref}
+        {...props}
+      >
+        <View className="flex-row items-center gap-2">
+          <SearchIcon className="text-muted-foreground shrink-0" size={18} />
+          <Text
+            className={cn(
+              'text-muted-foreground truncate',
+              variant === 'compact' && (responsive ? 'hidden md:flex' : 'hidden'),
+            )}
+          >
+            {activePlaceholder}
+          </Text>
+        </View>
+        <View
+          className={cn(
+            'bg-muted absolute top-2 right-2 hidden h-6 flex-row items-center gap-1 rounded border px-1.5 opacity-100',
+            variant === 'default' && Platform.OS !== 'android' && Platform.OS !== 'ios' && 'sm:flex',
+            variant === 'compact' && responsive && Platform.OS !== 'android' && Platform.OS !== 'ios' && 'md:flex',
+          )}
+        >
+          <Text className="text-muted-foreground font-mono text-[10px] font-medium">⌘K</Text>
+        </View>
+      </Button>
+    );
+  },
+);
+SearchTrigger.displayName = 'SearchTrigger';