@gv-tech/ui-native 2.6.0

package/src/textarea.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { TextInput } from 'react-native';
+
+import { cn } from './lib/utils';
+
+export type TextareaProps = React.ComponentPropsWithoutRef<typeof TextInput>;
+
+const Textarea = React.forwardRef<React.ElementRef<typeof TextInput>, TextareaProps>(
+  ({ className, placeholderClassName, ...props }, ref) => {
+    return (
+      <TextInput
+        ref={ref}
+        multiline
+        numberOfLines={props.numberOfLines || 3}
+        className={cn(
+          'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base text-foreground shadow-sm transition-colors placeholder:text-muted-foreground focus:border-ring disabled:opacity-50',
+          className,
+        )}
+        placeholderClassName={cn('text-muted-foreground', placeholderClassName)}
+        textAlignVertical="top"
+        {...props}
+      />
+    );
+  },
+);
+
+Textarea.displayName = 'Textarea';
+
+export { Textarea };

package/src/theme-provider.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  return <View style={{ flex: 1 }}>{children}</View>;
+}

package/src/theme-toggle.tsx

@@ -0,0 +1,11 @@
+import { Text, TouchableOpacity, View } from 'react-native';
+
+export function ThemeToggle() {
+  return (
+    <TouchableOpacity onPress={() => {}}>
+      <View style={{ padding: 10, backgroundColor: '#eee', borderRadius: 5 }}>
+        <Text>Toggle Theme</Text>
+      </View>
+    </TouchableOpacity>
+  );
+}

package/src/toast.tsx

@@ -0,0 +1,88 @@
+import * as ToastPrimitive from '@rn-primitives/toast';
+import { X } from 'lucide-react-native';
+import * as React from 'react';
+import Animated, { FadeInUp, FadeOutDown, Layout } from 'react-native-reanimated';
+
+import { cn } from './lib/utils';
+
+// Toast for native doesn't use a Provider or Viewport in the same way as web.
+// We export fragments if they are needed for structural parity in shared components.
+const ToastProvider = ({ children }: { children: React.ReactNode }) => <>{children}</>;
+const ToastViewport = () => null;
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitive.Root> & { variant?: 'default' | 'destructive' }
+>(({ className, variant = 'default', ...props }, ref) => {
+  return (
+    <ToastPrimitive.Root
+      ref={ref}
+      className={cn(
+        'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg',
+        variant === 'default' ? 'border-border bg-background' : 'border-destructive bg-destructive',
+        className,
+      )}
+      {...props}
+    >
+      <Animated.View entering={FadeInUp} exiting={FadeOutDown} layout={Layout} className="flex-row items-center w-full">
+        {props.children}
+      </Animated.View>
+    </ToastPrimitive.Root>
+  );
+});
+Toast.displayName = ToastPrimitive.Root.displayName;
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitive.Title ref={ref} className={cn('text-sm font-semibold text-foreground', className)} {...props} />
+));
+ToastTitle.displayName = ToastPrimitive.Title.displayName;
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitive.Description
+    ref={ref}
+    className={cn('text-sm opacity-90 text-muted-foreground', className)}
+    {...props}
+  />
+));
+ToastDescription.displayName = ToastPrimitive.Description.displayName;
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitive.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitive.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitive.Close
+    ref={ref}
+    className={cn(
+      'absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100',
+      className,
+    )}
+    {...props}
+  >
+    <X size={16} className="text-muted-foreground" />
+  </ToastPrimitive.Close>
+));
+ToastClose.displayName = ToastPrimitive.Close.displayName;
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitive.Action
+    ref={ref}
+    className={cn(
+      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50',
+      className,
+    )}
+    {...props}
+  />
+));
+ToastAction.displayName = ToastPrimitive.Action.displayName;
+
+export type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+export { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport };

package/src/toaster.tsx

@@ -0,0 +1,9 @@
+import { Text, View } from 'react-native';
+
+export function Toaster() {
+  return (
+    <View>
+      <Text>Toaster is not yet implemented for React Native</Text>
+    </View>
+  );
+}

package/src/toggle-group.tsx

@@ -0,0 +1,78 @@
+import { ToggleGroupBaseProps, ToggleGroupItemBaseProps } from '@gv-tech/ui-core';
+import * as ToggleGroupPrimitive from '@rn-primitives/toggle-group';
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from './lib/utils';
+import { TextClassContext } from './text';
+import { toggleVariants } from './toggle';
+
+const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
+  size: 'default',
+  variant: 'default',
+});
+
+export interface ToggleGroupProps
+  extends
+    Omit<React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>, 'value' | 'onValueChange' | 'type'>,
+    ToggleGroupBaseProps {}
+
+const ToggleGroup = React.forwardRef<React.ElementRef<typeof ToggleGroupPrimitive.Root>, ToggleGroupProps>(
+  ({ className, variant, size, children, type, value, onValueChange, ...props }, ref) => (
+    <ToggleGroupPrimitive.Root
+      ref={ref}
+      {...({
+        type,
+        value,
+        onValueChange,
+      } as unknown as React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>)}
+      className={cn('flex flex-row items-center justify-center gap-1', className)}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  ),
+);
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root?.displayName || 'ToggleGroup';
+
+export interface ToggleGroupItemProps
+  extends
+    Omit<React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>, 'children' | 'disabled'>,
+    ToggleGroupItemBaseProps {}
+
+const ToggleGroupItem = React.forwardRef<React.ElementRef<typeof ToggleGroupPrimitive.Item>, ToggleGroupItemProps>(
+  ({ className, children, variant, size, value, ...props }, ref) => {
+    const context = React.useContext(ToggleGroupContext);
+
+    return (
+      <TextClassContext.Provider
+        value={cn(
+          'text-sm native:text-base text-foreground font-medium',
+          props.disabled && 'web:cursor-not-allowed opacity-50',
+          value === '' && 'text-accent-foreground',
+          className,
+        )}
+      >
+        <ToggleGroupPrimitive.Item
+          ref={ref}
+          value={value}
+          className={cn(
+            toggleVariants({
+              variant: context.variant || variant,
+              size: context.size || size,
+            }),
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </ToggleGroupPrimitive.Item>
+      </TextClassContext.Provider>
+    );
+  },
+);
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item?.displayName || 'ToggleGroupItem';
+
+export { ToggleGroup, ToggleGroupItem };

package/src/toggle.tsx

@@ -0,0 +1,35 @@
+import { ToggleBaseProps, toggleVariants } from '@gv-tech/ui-core';
+import * as TogglePrimitive from '@rn-primitives/toggle';
+import * as React from 'react';
+
+import { cn } from './lib/utils';
+import { TextClassContext } from './text';
+
+export interface ToggleProps
+  extends
+    Omit<React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root>, 'pressed' | 'onPressedChange' | 'children'>,
+    ToggleBaseProps {}
+
+const Toggle = React.forwardRef<React.ElementRef<typeof TogglePrimitive.Root>, ToggleProps>(
+  ({ className, variant, size, ...props }, ref) => (
+    <TextClassContext.Provider
+      value={cn(
+        'text-sm native:text-base text-foreground font-medium',
+        props.pressed && 'text-accent-foreground',
+        className,
+      )}
+    >
+      <TogglePrimitive.Root
+        ref={ref}
+        className={cn(toggleVariants({ variant, size, className }))}
+        {...props}
+        pressed={props.pressed || false}
+        onPressedChange={props.onPressedChange || (() => {})}
+      />
+    </TextClassContext.Provider>
+  ),
+);
+
+Toggle.displayName = TogglePrimitive.Root?.displayName || 'Toggle';
+
+export { Toggle, toggleVariants };

package/src/tooltip.tsx

@@ -0,0 +1,44 @@
+import * as TooltipPrimitive from '@rn-primitives/tooltip';
+import * as React from 'react';
+import { Platform, StyleSheet } from 'react-native';
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
+
+import { cn } from './lib/utils';
+import { Text } from './text';
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
+    portalHost?: string;
+  }
+>(
+  (
+    { className, portalHost, ...props },
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _ref,
+  ) => (
+    <TooltipPrimitive.Portal hostName={portalHost}>
+      <TooltipPrimitive.Overlay style={Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined}>
+        <Animated.View
+          entering={FadeIn}
+          exiting={FadeOut}
+          className={cn(
+            'z-50 overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 shadow-md web:animate-in web:fade-in-0 web:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+            className,
+          )}
+        >
+          <Text className="text-sm text-popover-foreground native:text-base">{props.children}</Text>
+        </Animated.View>
+      </TooltipPrimitive.Overlay>
+    </TooltipPrimitive.Portal>
+  ),
+);
+TooltipContent.displayName = TooltipPrimitive.Content?.displayName || 'TooltipContent';
+
+const TooltipProvider = ({ children }: { children: React.ReactNode }) => <>{children}</>;
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };