@gv-tech/ui-native 2.23.1 → 2.23.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gv-tech/ui-native",
-  "version": "2.23.1",
+  "version": "2.23.3",
   "description": "React Native implementations of the GV Tech design system components",
   "repository": {
     "type": "git",
@@ -12,13 +12,13 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/ui-native.mjs",
+      "import": "./dist/ui-native.esm.js",
       "require": "./dist/ui-native.cjs",
-      "default": "./dist/ui-native.mjs"
+      "default": "./dist/ui-native.esm.js"
     }
   },
   "main": "./dist/ui-native.cjs",
-  "module": "./dist/ui-native.mjs",
+  "module": "./dist/ui-native.esm.js",
   "react-native": "./src/index.ts",
   "types": "./dist/index.d.ts",
   "files": [
@@ -36,7 +36,6 @@
   "dependencies": {
     "@gv-tech/design-tokens": "^2.12.0",
     "@gv-tech/ui-core": "^2.12.0",
-    "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",
@@ -65,7 +64,9 @@
     "@rn-primitives/toggle-group": "^1.2.0",
     "@rn-primitives/tooltip": "^1.2.0",
     "clsx": "^2.1.1",
-    "nativewind": "^4.2.1",
+    "nativewind": "^5.0.0-preview.4",
+    "react-hook-form": "^7.71.1",
+    "react-native-css-interop": "^0.2.4",
     "tailwind-merge": "^3.4.1",
     "tailwindcss": "^4.1.18"
   },

package/src/button.tsx

@@ -1,4 +1,4 @@
-import { cva, type VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
 import * as React from 'react';
 import { Pressable, Text, View } from 'react-native';
 
@@ -48,7 +48,9 @@ const buttonTextVariants = cva('text-sm font-medium', {
   },
 });
 
-export interface ButtonProps extends VariantProps<typeof buttonVariants>, ButtonBaseProps {
+export interface ButtonProps extends ButtonBaseProps {
+  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | null;
+  size?: 'default' | 'sm' | 'lg' | 'icon' | null;
   onPress?: () => void;
 }
 

package/src/carousel.tsx

@@ -76,7 +76,7 @@ export const Carousel = React.forwardRef<View, CarouselProps>(
       }
     }, [setApi, scrollNext, scrollPrev, canScrollNext, canScrollPrev]);
 
-    const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const _handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
       const offsetX = event.nativeEvent.contentOffset.x;
       const contentWidth = event.nativeEvent.contentSize.width;
       const layoutWidth = event.nativeEvent.layoutMeasurement.width;
@@ -110,7 +110,7 @@ export const Carousel = React.forwardRef<View, CarouselProps>(
 Carousel.displayName = 'Carousel';
 
 export const CarouselContent = React.forwardRef<ScrollView, CarouselContentBaseProps>(
-  ({ children, className, ...props }, ref) => {
+  ({ children, className, ...props }, _ref) => {
     const { scrollRef, orientation } = useCarousel();
 
     return (

package/src/direction.tsx

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

package/src/index.ts

@@ -158,7 +158,8 @@ export {
 } from './dropdown-menu';
 
 // Form
-export { Form } from './form';
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField } from './form';
+export type { FormControlProps, FormDescriptionProps, FormItemProps, FormLabelProps, FormMessageProps } from './form';
 
 // Hover Card
 export { HoverCard, HoverCardContent, HoverCardTrigger } from './hover-card';

package/src/lib/iconWithClassName.ts

@@ -0,0 +1,14 @@
+import type { LucideIcon } from 'lucide-react-native';
+import { cssInterop } from 'react-native-css-interop';
+
+export function iconWithClassName(icon: LucideIcon) {
+  cssInterop(icon, {
+    className: {
+      target: 'style',
+      nativeStyleToProp: {
+        color: true,
+        opacity: true,
+      },
+    },
+  });
+}

package/src/theme-toggle.tsx

@@ -4,9 +4,14 @@ import { View } from 'react-native';
 import { Button } from './button';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from './dropdown-menu';
 import { useTheme } from './hooks/use-theme';
+import { iconWithClassName } from './lib/iconWithClassName';
 import { cn } from './lib/utils';
 import { Text } from './text';
 
+iconWithClassName(Sun);
+iconWithClassName(Moon);
+iconWithClassName(SunMoon);
+
 export type ThemeToggleProps = ThemeToggleBaseProps;
 
 export function ThemeToggle({ variant = 'binary', onThemeChange, customTheme, className }: ThemeToggleProps) {
@@ -23,7 +28,7 @@ export function ThemeToggle({ variant = 'binary', onThemeChange, customTheme, cl
     if (onThemeChange) {
       onThemeChange(newTheme);
     } else {
-      setTheme(newTheme);
+      setTheme(newTheme as 'light' | 'dark');
     }
   };