@gv-tech/ui-native 2.20.0 → 2.21.0

package/src/pagination.tsx

@@ -1,9 +1,112 @@
-import { Text, View } from 'react-native';
+import type {
+  PaginationBaseProps,
+  PaginationContentBaseProps,
+  PaginationEllipsisBaseProps,
+  PaginationItemBaseProps,
+  PaginationLinkBaseProps,
+  PaginationNextBaseProps,
+  PaginationPreviousBaseProps,
+} from '@gv-tech/ui-core';
+import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react-native';
+import * as React from 'react';
+import { View } from 'react-native';
+import { Button } from './button';
+import { cn } from './lib/utils';
+import { Text } from './text';
 
-export const Pagination = () => {
+export const Pagination = ({ className, children, ...props }: PaginationBaseProps) => {
   return (
-    <View>
-      <Text>pagination is not yet implemented for React Native</Text>
+    <View
+      role="navigation"
+      aria-label="pagination"
+      className={cn('mx-auto flex w-full flex-row justify-center', className)}
+      {...props}
+    >
+      {children}
     </View>
   );
 };
+Pagination.displayName = 'Pagination';
+
+export const PaginationContent = React.forwardRef<View, PaginationContentBaseProps>(
+  ({ className, children, ...props }, ref) => (
+    <View ref={ref} className={cn('flex flex-row items-center gap-1', className)} {...props}>
+      {children}
+    </View>
+  ),
+);
+PaginationContent.displayName = 'PaginationContent';
+
+export const PaginationItem = React.forwardRef<View, PaginationItemBaseProps>(
+  ({ className, children, ...props }, ref) => (
+    <View ref={ref} className={cn('', className)} {...props}>
+      {children}
+    </View>
+  ),
+);
+PaginationItem.displayName = 'PaginationItem';
+
+export type PaginationLinkProps = PaginationLinkBaseProps & {
+  onPress?: () => void;
+};
+
+export const PaginationLink = ({
+  className,
+  isActive,
+  size = 'icon',
+  children,
+  onPress,
+  ...props
+}: PaginationLinkProps) => {
+  return (
+    <Button variant={isActive ? 'outline' : 'ghost'} size={size} onPress={onPress} className={className} {...props}>
+      {children}
+    </Button>
+  );
+};
+PaginationLink.displayName = 'PaginationLink';
+
+export const PaginationPrevious = ({
+  className,
+  children,
+  onPress,
+  ...props
+}: PaginationPreviousBaseProps & { onPress?: () => void }) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn('flex flex-row items-center gap-1 pl-2.5', className)}
+    onPress={onPress}
+    {...props}
+  >
+    <ChevronLeft size={16} className="text-foreground" />
+    <Text className="text-sm font-medium">Previous</Text>
+  </PaginationLink>
+);
+PaginationPrevious.displayName = 'PaginationPrevious';
+
+export const PaginationNext = ({
+  className,
+  children,
+  onPress,
+  ...props
+}: PaginationNextBaseProps & { onPress?: () => void }) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn('flex flex-row items-center gap-1 pr-2.5', className)}
+    onPress={onPress}
+    {...props}
+  >
+    <Text className="text-sm font-medium">Next</Text>
+    <ChevronRight size={16} className="text-foreground" />
+  </PaginationLink>
+);
+PaginationNext.displayName = 'PaginationNext';
+
+export const PaginationEllipsis = ({ className, ...props }: PaginationEllipsisBaseProps) => (
+  <View aria-hidden className={cn('flex h-9 w-9 flex-row items-center justify-center', className)} {...props}>
+    <MoreHorizontal size={16} className="text-foreground" />
+  </View>
+);
+PaginationEllipsis.displayName = 'PaginationEllipsis';

package/src/resizable.tsx

@@ -1,25 +1,15 @@
-import { Text, View } from 'react-native';
+import type { ResizableHandleBaseProps, ResizablePanelBaseProps, ResizablePanelGroupBaseProps } from '@gv-tech/ui-core';
+import * as React from 'react';
+import { View } from 'react-native';
 
-export const ResizablePanelGroup = () => {
-  return (
-    <View>
-      <Text>ResizablePanelGroup is not yet implemented for React Native</Text>
-    </View>
-  );
+export const ResizablePanelGroup: React.FC<ResizablePanelGroupBaseProps> = ({ children, className }) => {
+  return <View className={className}>{children}</View>;
 };
 
-export const ResizablePanel = () => {
-  return (
-    <View>
-      <Text>ResizablePanel is not yet implemented for React Native</Text>
-    </View>
-  );
+export const ResizablePanel: React.FC<ResizablePanelBaseProps> = ({ children, className }) => {
+  return <View className={className}>{children}</View>;
 };
 
-export const ResizableHandle = () => {
-  return (
-    <View>
-      <Text>ResizableHandle is not yet implemented for React Native</Text>
-    </View>
-  );
+export const ResizableHandle: React.FC<ResizableHandleBaseProps> = ({ className }) => {
+  return <View className={className} />;
 };

package/src/scroll-area.tsx

@@ -1,9 +1,26 @@
-import { Text, View } from 'react-native';
+import type { ScrollAreaBaseProps, ScrollBarBaseProps } from '@gv-tech/ui-core';
+import * as React from 'react';
+import { ScrollView, View } from 'react-native';
+import { cn } from './lib/utils';
 
-export const ScrollArea = () => {
-  return (
-    <View>
-      <Text>scroll-area is not yet implemented for React Native</Text>
-    </View>
-  );
+export const ScrollArea = React.forwardRef<ScrollView, ScrollAreaBaseProps>(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <ScrollView
+        ref={ref}
+        className={cn('flex-1', className)}
+        showsVerticalScrollIndicator={false}
+        showsHorizontalScrollIndicator={false}
+        {...props}
+      >
+        <View>{children}</View>
+      </ScrollView>
+    );
+  },
+);
+ScrollArea.displayName = 'ScrollArea';
+
+export const ScrollBar: React.FC<ScrollBarBaseProps> = () => {
+  return null;
 };
+ScrollBar.displayName = 'ScrollBar';

package/src/slider.tsx

@@ -1,9 +1,42 @@
-import { Text, View } from 'react-native';
+import type { SliderBaseProps } from '@gv-tech/ui-core';
+import * as SliderPrimitive from '@rn-primitives/slider';
+import * as React from 'react';
+import { cn } from './lib/utils';
+
+export const Slider: React.FC<SliderBaseProps> = ({
+  className,
+  value,
+  onValueChange: onValueChangeProp,
+  defaultValue,
+  min = 0,
+  max = 100,
+  step = 1,
+  disabled = false,
+  ...props
+}) => {
+  const numericValue = value !== undefined ? value[0] : min;
 
-export const Slider = () => {
   return (
-    <View>
-      <Text>slider is not yet implemented for React Native</Text>
-    </View>
+    <SliderPrimitive.Root
+      value={numericValue}
+      onValueChange={(val: number[]) => {
+        if (onValueChangeProp) {
+          const arrayVal = Array.isArray(val) ? val : [val];
+          onValueChangeProp(arrayVal);
+        }
+      }}
+      min={min}
+      max={max}
+      step={step}
+      disabled={disabled}
+      className={cn('relative flex w-full touch-none items-center select-none', disabled && 'opacity-50', className)}
+      {...props}
+    >
+      <SliderPrimitive.Track className="bg-secondary relative h-2 w-full grow rounded-full">
+        <SliderPrimitive.Range className="bg-primary absolute h-full rounded-full" />
+      </SliderPrimitive.Track>
+      <SliderPrimitive.Thumb className="border-primary bg-background focus-visible:ring-ring block h-5 w-5 rounded-full border-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none" />
+    </SliderPrimitive.Root>
   );
 };
+Slider.displayName = 'Slider';

package/src/sonner.tsx

@@ -1,9 +1,7 @@
-import { Text, View } from 'react-native';
+import type { SonnerBaseProps } from '@gv-tech/ui-core';
+import * as React from 'react';
+import { View } from 'react-native';
 
-export const Toaster = () => {
-  return (
-    <View>
-      <Text>Toaster (Sonner) is not yet implemented for React Native</Text>
-    </View>
-  );
+export const Toaster: React.FC<SonnerBaseProps> = ({ className }) => {
+  return <View className={className} />;
 };

package/src/toaster.tsx

@@ -1,9 +1,28 @@
-import { Text, View } from 'react-native';
+import type { ToasterBaseProps } from '@gv-tech/ui-core';
+import * as React from 'react';
+import { View } from 'react-native';
+import { useToast } from './hooks/use-toast';
+import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle } from './toast';
+
+export const Toaster: React.FC<ToasterBaseProps> = () => {
+  const { toasts } = useToast();
 
-export function Toaster() {
   return (
-    <View>
-      <Text>Toaster is not yet implemented for React Native</Text>
-    </View>
+    <ToastProvider>
+      <View className="pointer-events-none absolute right-6 bottom-6 left-6 z-50 flex flex-col gap-2">
+        {toasts.map(({ id, title, description, action, ...props }) => (
+          <Toast key={id} {...props} className="pointer-events-auto">
+            <View className="flex flex-1 flex-col gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && <ToastDescription>{description}</ToastDescription>}
+            </View>
+            {action}
+            <ToastClose />
+          </Toast>
+        ))}
+      </View>
+    </ToastProvider>
   );
-}
+};
+
+export default Toaster;