@gv-tech/ui-native 2.22.1 → 2.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gv-tech/ui-native",
-  "version": "2.22.1",
+  "version": "2.23.0",
   "description": "React Native implementations of the GV Tech design system components",
   "repository": {
     "type": "git",
@@ -36,8 +36,7 @@
   "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",
+    "react-hook-form": "^7.71.1",
     "@rn-primitives/accordion": "^1.2.0",
     "@rn-primitives/alert-dialog": "^1.2.0",
     "@rn-primitives/aspect-ratio": "^1.2.0",
@@ -66,22 +65,28 @@
     "@rn-primitives/toggle-group": "^1.2.0",
     "@rn-primitives/tooltip": "^1.2.0",
     "clsx": "^2.1.1",
-    "lucide-react-native": "^1.8.0",
     "nativewind": "^4.2.1",
-    "react-native-svg": "^15.15.3",
     "tailwind-merge": "^3.4.1",
     "tailwindcss": "^4.1.18"
   },
   "peerDependencies": {
+    "lucide-react-native": "^1.8.0",
     "react": ">=18",
     "react-native": ">=0.72",
     "react-native-reanimated": "^4.2.3",
+    "react-native-svg": "^15.15.3",
     "react-native-worklets": "^0.7.2"
   },
   "peerDependenciesMeta": {
+    "lucide-react-native": {
+      "optional": false
+    },
     "react-native-reanimated": {
       "optional": false
     },
+    "react-native-svg": {
+      "optional": false
+    },
     "react-native-worklets": {
       "optional": false
     }

package/src/button-group.tsx

@@ -0,0 +1,30 @@
+import type { ButtonGroupBaseProps, ButtonGroupSeparatorBaseProps, ButtonGroupTextBaseProps } from '@gv-tech/ui-core';
+import * as React from 'react';
+import { Text, View } from 'react-native';
+import { cn } from './lib/utils';
+
+// TODO: Implement proper React Native ButtonGroup logic
+function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<typeof View> & ButtonGroupBaseProps) {
+  return <View className={cn('flex flex-row', className)} {...props} />;
+}
+
+function ButtonGroupText({
+  className,
+  asChild,
+  ...props
+}: React.ComponentProps<typeof Text> & ButtonGroupTextBaseProps) {
+  return <Text className={cn('text-sm font-medium', className)} {...props} />;
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<typeof View> & ButtonGroupSeparatorBaseProps) {
+  return <View className={cn('bg-border h-full w-px', className)} {...props} />;
+}
+
+// Stub for buttonGroupVariants to satisfy web/native shared imports if needed
+const buttonGroupVariants = () => '';
+
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };

package/src/carousel.tsx

@@ -5,25 +5,202 @@ import type {
   CarouselNextBaseProps,
   CarouselPreviousBaseProps,
 } from '@gv-tech/ui-core';
+import { ArrowLeft, ArrowRight } from 'lucide-react-native';
 import * as React from 'react';
-import { View } from 'react-native';
+import {
+  Dimensions,
+  ScrollView,
+  View,
+  type LayoutChangeEvent,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+} from 'react-native';
+import { Button } from './button';
+import { cn } from './lib/utils';
+type CarouselApi = unknown;
 
-export const Carousel: React.FC<CarouselBaseProps> = ({ children, className }) => {
-  return <View className={className}>{children}</View>;
+type CarouselContextType = {
+  orientation: 'horizontal' | 'vertical';
+  scrollRef: React.RefObject<ScrollView>;
+  scrollNext: () => void;
+  scrollPrev: () => void;
+  canScrollNext: boolean;
+  canScrollPrev: boolean;
+  itemWidth: number;
+  setItemWidth: (width: number) => void;
 };
 
-export const CarouselContent: React.FC<CarouselContentBaseProps> = ({ children, className }) => {
-  return <View className={className}>{children}</View>;
-};
+const CarouselContext = React.createContext<CarouselContextType | null>(null);
 
-export const CarouselItem: React.FC<CarouselItemBaseProps> = ({ children, className }) => {
-  return <View className={className}>{children}</View>;
-};
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+  if (!context) {
+    throw new Error('useCarousel must be used within a <Carousel />');
+  }
+  return context;
+}
 
-export const CarouselPrevious: React.FC<CarouselPreviousBaseProps> = ({ className }) => {
-  return <View className={className} />;
+export type CarouselProps = CarouselBaseProps & {
+  opts?: unknown;
+  plugins?: unknown;
+  setApi?: (api: CarouselApi) => void;
 };
 
-export const CarouselNext: React.FC<CarouselNextBaseProps> = ({ className }) => {
-  return <View className={className} />;
-};
+export const Carousel = React.forwardRef<View, CarouselProps>(
+  ({ children, className, opts, orientation = 'horizontal', setApi, plugins, ...props }, ref) => {
+    const scrollRef = React.useRef<ScrollView>(null) as React.RefObject<ScrollView>;
+    const [canScrollNext, setCanScrollNext] = React.useState(true);
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [itemWidth, setItemWidth] = React.useState(Dimensions.get('window').width);
+    const [currentIndex, setCurrentIndex] = React.useState(0);
+
+    const scrollNext = React.useCallback(() => {
+      scrollRef.current?.scrollTo({ x: (currentIndex + 1) * itemWidth, animated: true });
+    }, [currentIndex, itemWidth]);
+
+    const scrollPrev = React.useCallback(() => {
+      scrollRef.current?.scrollTo({ x: Math.max(0, currentIndex - 1) * itemWidth, animated: true });
+    }, [currentIndex, itemWidth]);
+
+    // Very basic API shim
+    React.useEffect(() => {
+      if (setApi) {
+        setApi({
+          scrollNext,
+          scrollPrev,
+          canScrollNext: () => canScrollNext,
+          canScrollPrev: () => canScrollPrev,
+          on: () => {},
+          off: () => {},
+        } as unknown as CarouselApi);
+      }
+    }, [setApi, scrollNext, scrollPrev, canScrollNext, canScrollPrev]);
+
+    const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const offsetX = event.nativeEvent.contentOffset.x;
+      const contentWidth = event.nativeEvent.contentSize.width;
+      const layoutWidth = event.nativeEvent.layoutMeasurement.width;
+
+      const newIndex = Math.round(offsetX / itemWidth);
+      setCurrentIndex(newIndex);
+      setCanScrollPrev(offsetX > 0);
+      setCanScrollNext(offsetX + layoutWidth < contentWidth);
+    };
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          orientation,
+          scrollRef,
+          scrollNext,
+          scrollPrev,
+          canScrollNext,
+          canScrollPrev,
+          itemWidth,
+          setItemWidth,
+        }}
+      >
+        <View ref={ref} className={cn('relative', className)} {...props}>
+          {children}
+        </View>
+      </CarouselContext.Provider>
+    );
+  },
+);
+Carousel.displayName = 'Carousel';
+
+export const CarouselContent = React.forwardRef<ScrollView, CarouselContentBaseProps>(
+  ({ children, className, ...props }, ref) => {
+    const { scrollRef, orientation } = useCarousel();
+
+    return (
+      <View className="overflow-hidden">
+        <ScrollView
+          ref={scrollRef}
+          horizontal={orientation === 'horizontal'}
+          showsHorizontalScrollIndicator={false}
+          showsVerticalScrollIndicator={false}
+          pagingEnabled
+          snapToInterval={orientation === 'horizontal' ? Dimensions.get('window').width : undefined}
+          decelerationRate="fast"
+          className={cn('flex', orientation === 'horizontal' ? 'flex-row' : 'flex-col', className)}
+          {...props}
+        >
+          {children}
+        </ScrollView>
+      </View>
+    );
+  },
+);
+CarouselContent.displayName = 'CarouselContent';
+
+export const CarouselItem = React.forwardRef<View, CarouselItemBaseProps>(({ children, className, ...props }, ref) => {
+  const { orientation, setItemWidth } = useCarousel();
+
+  const handleLayout = (e: LayoutChangeEvent) => {
+    if (orientation === 'horizontal') {
+      setItemWidth(e.nativeEvent.layout.width);
+    }
+  };
+
+  return (
+    <View ref={ref} onLayout={handleLayout} className={cn('min-w-0 shrink-0 grow-0 basis-full', className)} {...props}>
+      {children}
+    </View>
+  );
+});
+CarouselItem.displayName = 'CarouselItem';
+
+export const CarouselPrevious = React.forwardRef<React.ElementRef<typeof Button>, CarouselPreviousBaseProps>(
+  ({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
+    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+    return (
+      <Button
+        ref={ref}
+        variant={variant as React.ComponentProps<typeof Button>['variant']}
+        size={size as React.ComponentProps<typeof Button>['size']}
+        className={cn(
+          'absolute h-8 w-8 rounded-full',
+          orientation === 'horizontal'
+            ? 'top-1/2 -left-12 -translate-y-1/2'
+            : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+          className,
+        )}
+        disabled={!canScrollPrev}
+        onPress={scrollPrev}
+        {...props}
+      >
+        <ArrowLeft className="text-foreground h-4 w-4" size={16} />
+      </Button>
+    );
+  },
+);
+CarouselPrevious.displayName = 'CarouselPrevious';
+
+export const CarouselNext = React.forwardRef<React.ElementRef<typeof Button>, CarouselNextBaseProps>(
+  ({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
+    const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+    return (
+      <Button
+        ref={ref}
+        variant={variant as React.ComponentProps<typeof Button>['variant']}
+        size={size as React.ComponentProps<typeof Button>['size']}
+        className={cn(
+          'absolute h-8 w-8 rounded-full',
+          orientation === 'horizontal'
+            ? 'top-1/2 -right-12 -translate-y-1/2'
+            : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+          className,
+        )}
+        disabled={!canScrollNext}
+        onPress={scrollNext}
+        {...props}
+      >
+        <ArrowRight className="text-foreground h-4 w-4" size={16} />
+      </Button>
+    );
+  },
+);
+CarouselNext.displayName = 'CarouselNext';

package/src/combobox.tsx

@@ -0,0 +1,125 @@
+import type {
+  ComboboxChipBaseProps,
+  ComboboxChipsBaseProps,
+  ComboboxChipsInputBaseProps,
+  ComboboxClearBaseProps,
+  ComboboxCollectionBaseProps,
+  ComboboxContentBaseProps,
+  ComboboxEmptyBaseProps,
+  ComboboxGroupBaseProps,
+  ComboboxInputBaseProps,
+  ComboboxItemBaseProps,
+  ComboboxLabelBaseProps,
+  ComboboxListBaseProps,
+  ComboboxSeparatorBaseProps,
+  ComboboxTriggerBaseProps,
+  ComboboxValueBaseProps,
+} from '@gv-tech/ui-core';
+import * as React from 'react';
+import { Text, View } from 'react-native';
+import { cn } from './lib/utils';
+
+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>
+  );
+}
+
+function ComboboxValue({ className, ...props }: React.ComponentProps<typeof View> & ComboboxValueBaseProps) {
+  return <View className={className} {...props} />;
+}
+
+function ComboboxTrigger({ className, ...props }: React.ComponentProps<typeof View> & ComboboxTriggerBaseProps) {
+  return <View className={className} {...props} />;
+}
+
+function ComboboxClear({ className, ...props }: React.ComponentProps<typeof View> & ComboboxClearBaseProps) {
+  return <View className={className} {...props} />;
+}
+
+function ComboboxInput({
+  className,
+  showClear,
+  showTrigger,
+  ...props
+}: React.ComponentProps<typeof View> & ComboboxInputBaseProps) {
+  return <View className={className} {...props} />;
+}
+
+function ComboboxContent({
+  className,
+  side,
+  sideOffset,
+  align,
+  alignOffset,
+  anchor,
+  ...props
+}: React.ComponentProps<typeof View> & ComboboxContentBaseProps) {
+  return <View className={className} {...props} />;
+}
+
+function ComboboxList({ className, ...props }: React.ComponentProps<typeof View> & ComboboxListBaseProps) {
+  return <View className={className} {...props} />;
+}
+
+function ComboboxItem({ className, ...props }: React.ComponentProps<typeof View> & ComboboxItemBaseProps) {
+  return <View className={className} {...props} />;
+}
+
+function ComboboxGroup({ className, ...props }: React.ComponentProps<typeof View> & ComboboxGroupBaseProps) {
+  return <View className={className} {...props} />;
+}
+
+function ComboboxLabel({ className, ...props }: React.ComponentProps<typeof View> & ComboboxLabelBaseProps) {
+  return <View className={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 ComboboxSeparator({ className, ...props }: React.ComponentProps<typeof View> & ComboboxSeparatorBaseProps) {
+  return <View className={className} {...props} />;
+}
+
+function ComboboxChips({ className, ...props }: React.ComponentProps<typeof View> & ComboboxChipsBaseProps) {
+  return <View className={className} {...props} />;
+}
+
+function ComboboxChip({ className, showRemove, ...props }: React.ComponentProps<typeof View> & ComboboxChipBaseProps) {
+  return <View className={className} {...props} />;
+}
+
+function ComboboxChipsInput({ className, ...props }: React.ComponentProps<typeof View> & ComboboxChipsInputBaseProps) {
+  return <View className={className} {...props} />;
+}
+
+function useComboboxAnchor() {
+  return React.useRef(null);
+}
+
+export {
+  Combobox,
+  ComboboxChip,
+  ComboboxChips,
+  ComboboxChipsInput,
+  ComboboxClear,
+  ComboboxCollection,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxLabel,
+  ComboboxList,
+  ComboboxSeparator,
+  ComboboxTrigger,
+  ComboboxValue,
+  useComboboxAnchor,
+};

package/src/direction.tsx

@@ -0,0 +1,12 @@
+import type { DirectionProviderBaseProps } from '@gv-tech/ui-core';
+
+function DirectionProvider({ children, dir, direction }: DirectionProviderBaseProps) {
+  // RN direction is mostly handled via I18nManager
+  return <>{children}</>;
+}
+
+function useDirection() {
+  return 'ltr';
+}
+
+export { DirectionProvider, useDirection };

package/src/empty.tsx

@@ -0,0 +1,38 @@
+import type { EmptyBaseProps, EmptyMediaBaseProps } from '@gv-tech/ui-core';
+import * as React from 'react';
+import { Text, View } from 'react-native';
+import { cn } from './lib/utils';
+
+function Empty({ className, ...props }: React.ComponentProps<typeof View> & EmptyBaseProps) {
+  return (
+    <View
+      className={cn(
+        'border-border flex w-full items-center justify-center rounded-xl border-2 border-dashed p-6',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<typeof View>) {
+  return <View className={cn('flex flex-col items-center gap-2', className)} {...props} />;
+}
+
+function EmptyMedia({ className, variant, ...props }: React.ComponentProps<typeof View> & EmptyMediaBaseProps) {
+  return <View className={cn('flex items-center justify-center', className)} {...props} />;
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<typeof Text>) {
+  return <Text className={cn('text-foreground text-lg font-semibold', className)} {...props} />;
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<typeof Text>) {
+  return <Text className={cn('text-muted-foreground text-center text-sm', className)} {...props} />;
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<typeof View>) {
+  return <View className={cn('mt-4 flex flex-col items-center gap-2', className)} {...props} />;
+}
+
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };

package/src/field.tsx

@@ -0,0 +1,89 @@
+import type {
+  FieldBaseProps,
+  FieldContentBaseProps,
+  FieldDescriptionBaseProps,
+  FieldErrorBaseProps,
+  FieldGroupBaseProps,
+  FieldLabelBaseProps,
+  FieldLegendBaseProps,
+  FieldSeparatorBaseProps,
+  FieldSetBaseProps,
+  FieldTitleBaseProps,
+} from '@gv-tech/ui-core';
+import * as React from 'react';
+import { Text, View } from 'react-native';
+import { cn } from './lib/utils';
+
+function Field({ className, orientation, ...props }: React.ComponentProps<typeof View> & FieldBaseProps) {
+  return <View className={cn('flex flex-col gap-2', className)} {...props} />;
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<typeof View> & FieldContentBaseProps) {
+  return <View className={cn('flex flex-col', className)} {...props} />;
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<typeof Text> & FieldDescriptionBaseProps) {
+  return <Text className={cn('text-muted-foreground text-sm', className)} {...props} />;
+}
+
+function FieldError({
+  className,
+  errors,
+  children,
+  ...props
+}: React.ComponentProps<typeof Text> & FieldErrorBaseProps) {
+  const message = children || (errors && errors[0]?.message);
+  if (!message) {
+    return null;
+  }
+  return (
+    <Text className={cn('text-destructive text-sm', className)} {...props}>
+      {message}
+    </Text>
+  );
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<typeof View> & FieldGroupBaseProps) {
+  return <View className={cn('flex flex-col gap-4', className)} {...props} />;
+}
+
+function FieldLabel({ className, ...props }: React.ComponentProps<typeof Text> & FieldLabelBaseProps) {
+  return <Text className={cn('text-sm font-medium', className)} {...props} />;
+}
+
+function FieldLegend({ className, variant, ...props }: React.ComponentProps<typeof Text> & FieldLegendBaseProps) {
+  return <Text className={cn('font-medium', variant === 'label' ? 'text-sm' : 'text-base', className)} {...props} />;
+}
+
+function FieldSeparator({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof View> & FieldSeparatorBaseProps) {
+  return (
+    <View className={cn('bg-border my-2 h-px', className)} {...props}>
+      {children ? <Text className="bg-background absolute px-2 text-xs">{children}</Text> : null}
+    </View>
+  );
+}
+
+function FieldSet({ className, ...props }: React.ComponentProps<typeof View> & FieldSetBaseProps) {
+  return <View className={cn('flex flex-col gap-4', className)} {...props} />;
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<typeof Text> & FieldTitleBaseProps) {
+  return <Text className={cn('text-sm font-medium', className)} {...props} />;
+}
+
+export {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldTitle,
+};