@gv-tech/ui-native 2.16.0 → 2.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gv-tech/ui-native",
-  "version": "2.16.0",
+  "version": "2.17.0",
   "description": "React Native implementations of the GV Tech design system components",
   "repository": {
     "type": "git",

package/src/index.ts

@@ -112,7 +112,7 @@ export { NavigationMenu } from './navigation-menu';
 export { Pagination } from './pagination';
 
 // Popover
-export { Popover } from './popover';
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from './popover';
 
 // Progress
 export { Progress } from './progress';
@@ -144,6 +144,14 @@ export {
   SelectValue,
 } from './select';
 
+// Scroll To Top
+export { ScrollToTop } from './scroll-to-top';
+export type { ScrollToTopHandle, ScrollToTopProps } from './scroll-to-top';
+
+// Support FAB
+export { SupportFab } from './support-fab';
+export type { SupportFabProps } from './support-fab';
+
 // Separator
 export { Separator } from './separator';
 

package/src/popover.tsx

@@ -1,9 +1,85 @@
-import { Text, View } from 'react-native';
+import {
+  PopoverAnchorBaseProps,
+  PopoverBaseProps,
+  PopoverContentBaseProps,
+  PopoverTriggerBaseProps,
+} from '@gv-tech/ui-core';
+import * as React from 'react';
+import { Modal, Pressable, View } from 'react-native';
+
+import { cn } from './lib/utils';
+
+const PopoverContext = React.createContext<{
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}>({
+  open: false,
+  setOpen: () => {},
+});
+
+const Popover = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & PopoverBaseProps
+>(({ children, open, onOpenChange, ...props }, ref) => {
+  const [internalOpen, setInternalOpen] = React.useState(false);
+  const isControlled = open !== undefined;
+  const isOpen = isControlled ? open : internalOpen;
+  const setOpen = isControlled ? onOpenChange || (() => {}) : setInternalOpen;
+
+  return (
+    <PopoverContext.Provider value={{ open: isOpen, setOpen }}>
+      <View ref={ref} {...props}>
+        {children}
+      </View>
+    </PopoverContext.Provider>
+  );
+});
+Popover.displayName = 'Popover';
+
+const PopoverTrigger = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  React.ComponentPropsWithoutRef<typeof Pressable> & PopoverTriggerBaseProps
+>(({ children, ...props }, ref) => {
+  const { setOpen } = React.useContext(PopoverContext);
 
-export const Popover = () => {
   return (
-    <View>
-      <Text>popover is not yet implemented for React Native</Text>
-    </View>
+    <Pressable ref={ref} onPress={() => setOpen(true)} {...props}>
+      {children}
+    </Pressable>
   );
-};
+});
+PopoverTrigger.displayName = 'PopoverTrigger';
+
+const PopoverAnchor = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & PopoverAnchorBaseProps
+>(({ ...props }, ref) => <View ref={ref} {...props} />);
+PopoverAnchor.displayName = 'PopoverAnchor';
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & PopoverContentBaseProps
+>(({ className, children, ...props }, ref) => {
+  const { open, setOpen } = React.useContext(PopoverContext);
+
+  return (
+    <Modal visible={open} transparent animationType="fade" onRequestClose={() => setOpen(false)}>
+      <Pressable className="flex-1" onPress={() => setOpen(false)}>
+        <View className="flex-1 items-center justify-center bg-black/50">
+          <Pressable onPress={() => {}}>
+            <View
+              ref={ref}
+              className={cn('bg-popover border-border mx-4 w-full max-w-sm rounded-md border p-4 shadow-lg', className)}
+              {...props}
+            >
+              {children}
+            </View>
+          </Pressable>
+        </View>
+      </Pressable>
+    </Modal>
+  );
+});
+PopoverContent.displayName = 'PopoverContent';
+
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };

package/src/progress.tsx

@@ -1,9 +1,23 @@
-import { Text, View } from 'react-native';
+import { ProgressBaseProps } from '@gv-tech/ui-core';
+import * as React from 'react';
+import { View } from 'react-native';
 
-export const Progress = () => {
-  return (
-    <View>
-      <Text>progress is not yet implemented for React Native</Text>
-    </View>
-  );
-};
+import { cn } from './lib/utils';
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & ProgressBaseProps
+>(({ className, value, ...props }, ref) => (
+  <View
+    ref={ref}
+    className={cn('bg-muted relative h-2 w-full overflow-hidden rounded-full', className)}
+    accessibilityRole="progressbar"
+    role="progressbar"
+    {...props}
+  >
+    <View className="bg-primary h-full rounded-full" style={{ width: `${value || 0}%` }} />
+  </View>
+));
+Progress.displayName = 'Progress';
+
+export { Progress };

package/src/scroll-to-top.tsx

@@ -0,0 +1,186 @@
+'use client';
+
+import { ArrowUp } from 'lucide-react-native';
+import * as React from 'react';
+import {
+  AccessibilityInfo,
+  Animated,
+  type FlatList,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+  Platform,
+  ScrollView,
+  View,
+} from 'react-native';
+
+import type { ScrollToTopBaseProps } from '@gv-tech/ui-core';
+import { Button } from './button';
+import { cn } from './lib/utils';
+
+export interface ScrollToTopProps extends ScrollToTopBaseProps {
+  /**
+   * For Native: The scroll target is typically a ref to a ScrollView or FlatList.
+   * This is required unless you manually call the scroll handler.
+   */
+  scrollRef?: React.RefObject<ScrollView | FlatList>;
+
+  /**
+   * Custom duration specifically for Native animations (opacity/transform).
+   * @default 300
+   */
+  animationDuration?: number;
+}
+
+/**
+ * GV Tech Animated Scroll To Top (Native)
+ *
+ * A floating action button that appears when scrolling down and allows the user
+ * to quickly return to the top of a ScrollView, FlatList, or SectionList.
+ *
+ * Reuses the internal GV Tech Button primitive for consistent styling.
+ */
+export interface ScrollToTopHandle {
+  handleScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  scrollToTop: () => void;
+}
+
+export const ScrollToTop = React.forwardRef<ScrollToTopHandle, ScrollToTopProps>(
+  (
+    {
+      threshold = 240,
+      exitDuration = 450,
+      behavior, // Native uses 'smooth' or just scrolls
+      label = 'Scroll to top',
+      className,
+      scrollRef,
+      animationDuration = 300,
+      ...props
+    },
+    ref,
+  ) => {
+    const [isVisible, setIsVisible] = React.useState(false);
+    const [isExiting, setIsExiting] = React.useState(false);
+
+    // Animation states
+    const opacity = React.useRef(new Animated.Value(0)).current;
+    const translateY = React.useRef(new Animated.Value(20)).current;
+
+    const animateIn = () => {
+      Animated.parallel([
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: animationDuration,
+          useNativeDriver: true,
+        }),
+        Animated.timing(translateY, {
+          toValue: 0,
+          duration: animationDuration,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    };
+
+    const animateOut = () => {
+      Animated.parallel([
+        Animated.timing(opacity, {
+          toValue: 0,
+          duration: animationDuration,
+          useNativeDriver: true,
+        }),
+        Animated.timing(translateY, {
+          toValue: 20,
+          duration: animationDuration,
+          useNativeDriver: true,
+        }),
+      ]).start(() => {
+        if (!isExiting) {
+          setIsVisible(false);
+        }
+      });
+    };
+
+    const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const offset = event.nativeEvent.contentOffset.y;
+
+      if (isExiting) {
+        if (offset <= threshold) {
+          setIsVisible(false);
+          setIsExiting(false);
+        }
+        return;
+      }
+
+      if (offset > threshold && !isVisible) {
+        setIsVisible(true);
+        animateIn();
+      } else if (offset <= threshold && isVisible) {
+        animateOut();
+      }
+    };
+
+    const scrollToTop = () => {
+      setIsExiting(true);
+      animateOut();
+
+      // Delay the actual scroll to let exit animation start
+      setTimeout(() => {
+        if (scrollRef?.current) {
+          // Detect if it's a FlatList or ScrollView and handle types safely
+          const current = scrollRef.current;
+          if ('scrollToOffset' in current && typeof current.scrollToOffset === 'function') {
+            current.scrollToOffset({ offset: 0, animated: behavior !== 'auto' });
+          } else if ('scrollTo' in current && typeof current.scrollTo === 'function') {
+            current.scrollTo({ y: 0, animated: behavior !== 'auto' });
+          }
+        }
+
+        // Announcements for accessibility
+        if (Platform.OS === 'ios' || Platform.OS === 'android') {
+          AccessibilityInfo.announceForAccessibility('Scrolled to top');
+        }
+      }, exitDuration);
+    };
+
+    // Expose handleScroll so parents can pipe their scroll events to this component
+    React.useImperativeHandle(ref, () => ({
+      handleScroll,
+      scrollToTop,
+    }));
+
+    if (!isVisible && !isExiting) {
+      return null;
+    }
+
+    return (
+      <View
+        pointerEvents="box-none"
+        style={{
+          position: 'absolute',
+          bottom: 24,
+          right: 24,
+          zIndex: 50,
+        }}
+      >
+        <Animated.View
+          style={{
+            opacity,
+            transform: [{ translateY }],
+          }}
+        >
+          <Button
+            variant="outline"
+            size="icon"
+            className={cn('bg-background/80 h-12 w-12 rounded-full border-2 shadow-lg', className)}
+            onPress={scrollToTop}
+            aria-label={label}
+            {...props}
+          >
+            <ArrowUp size={24} className="text-foreground" />
+          </Button>
+        </Animated.View>
+      </View>
+    );
+  },
+);
+
+ScrollToTop.displayName = 'ScrollToTop';

package/src/support-fab.tsx

@@ -0,0 +1,144 @@
+'use client';
+
+import { Coffee, ExternalLink } from 'lucide-react-native';
+import * as React from 'react';
+import { Linking, View } from 'react-native';
+
+import { Button } from './button';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from './dialog';
+import { cn } from './lib/utils';
+import { Text } from './text';
+
+const normalizeBaseUrl = (url: string) => {
+  const trimmed = url.trim();
+  return trimmed.endsWith('/') ? trimmed.slice(0, -1) : trimmed;
+};
+
+const sanitizeCreator = (creatorId: string) => creatorId.trim().replace(/^@+/, '');
+
+const buildPageUrl = (supportUrl: string, creatorId: string) => {
+  const base = normalizeBaseUrl(supportUrl);
+  const creator = encodeURIComponent(sanitizeCreator(creatorId));
+  return `${base}/${creator}`;
+};
+
+export interface SupportFabProps extends Omit<React.ComponentPropsWithoutRef<typeof Button>, 'onPress'> {
+  supportUrl?: string;
+  creatorId: string;
+  title?: string;
+  description?: string;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  positionClassName?: string;
+  buttonClassName?: string;
+  panelClassName?: string;
+}
+
+export function SupportFab({
+  supportUrl = 'https://www.buymeacoffee.com',
+  creatorId,
+  title = 'Buy me a coffee',
+  description = 'Support the project directly from this panel.',
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  positionClassName,
+  buttonClassName,
+  panelClassName,
+  className,
+  ...buttonProps
+}: SupportFabProps) {
+  const isControlled = open !== undefined;
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+  const isOpen = isControlled ? open : internalOpen;
+
+  const setOpen = React.useCallback(
+    (nextOpen: boolean) => {
+      if (!isControlled) {
+        setInternalOpen(nextOpen);
+      }
+      onOpenChange?.(nextOpen);
+    },
+    [isControlled, onOpenChange],
+  );
+
+  const pageUrl = React.useMemo(() => buildPageUrl(supportUrl, creatorId), [creatorId, supportUrl]);
+
+  const handleExternalLink = React.useCallback(async () => {
+    try {
+      await Linking.openURL(pageUrl);
+    } catch (error) {
+      console.warn('Failed to open external link:', error);
+    }
+  }, [pageUrl]);
+
+  const trigger = (
+    <View
+      style={{
+        position: 'absolute',
+        bottom: 24,
+        right: 24,
+        zIndex: 50,
+      }}
+      className={positionClassName}
+    >
+      <Button
+        variant="outline"
+        size="icon"
+        className={cn(
+          'h-14 w-14 rounded-full border border-black/15 bg-[#ffdd00] shadow-lg',
+          buttonClassName,
+          className,
+        )}
+        onPress={() => setOpen(true)}
+        aria-label="Support this project"
+        {...buttonProps}
+      >
+        <Coffee size={24} className="text-black" />
+      </Button>
+    </View>
+  );
+
+  return (
+    <>
+      {trigger}
+      <Dialog open={isOpen} onOpenChange={setOpen}>
+        <DialogContent className={cn('max-w-sm', panelClassName)}>
+          <DialogHeader>
+            <DialogTitle>{title}</DialogTitle>
+            <DialogDescription>{description}</DialogDescription>
+          </DialogHeader>
+
+          <View className="flex flex-col gap-4">
+            <View className="overflow-hidden rounded-md border">
+              <View className="bg-muted flex h-48 items-center justify-center">
+                <Text className="text-muted-foreground text-center text-sm">
+                  Embedded support form would appear here on web.{'\n'}
+                  On mobile, this opens the external support page.
+                </Text>
+              </View>
+            </View>
+
+            <View className="text-muted-foreground flex items-center justify-between gap-2 text-xs">
+              <Text className="text-muted-foreground flex-1 text-xs">
+                If the embedded checkout is unavailable, open the support page directly.
+              </Text>
+              <Button
+                variant="outline"
+                size="sm"
+                onPress={handleExternalLink}
+                className="flex flex-row items-center gap-1"
+              >
+                <Text className="text-xs">Open Buy Me a Coffee</Text>
+                <ExternalLink size={12} className="text-muted-foreground" />
+              </Button>
+            </View>
+          </View>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
+
+export { buildPageUrl };

package/src/table-of-contents.tsx

@@ -3,6 +3,7 @@ import {
   LayoutChangeEvent,
   NativeScrollEvent,
   NativeSyntheticEvent,
+  Platform,
   Text as RNText,
   ScrollView,
   TouchableOpacity,
@@ -221,9 +222,11 @@ export function TableOfContentsContent({ children, className }: TableOfContentsC
     <ScrollView
       ref={scrollViewRef}
       onScroll={onScroll}
-      scrollEventThrottle={16}
       className={cn('flex-1', className)}
-      contentContainerStyle={{ padding: 16 }}
+      {...(Platform.OS !== 'web' && {
+        scrollEventThrottle: 16,
+        contentContainerStyle: { padding: 16 },
+      })}
     >
       {children}
     </ScrollView>

package/src/tabs.tsx

@@ -5,10 +5,13 @@ import * as React from 'react';
 import { cn } from './lib/utils';
 import { TextClassContext } from './text';
 
-const Tabs = TabsPrimitive.Root;
+const Tabs = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Root>, TabsProps>((props, ref) => (
+  <TabsPrimitive.Root ref={ref} {...props} />
+));
+Tabs.displayName = 'Tabs';
 
-export interface TabsProps
-  extends Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>, 'onValueChange' | 'value'>, TabsBaseProps {}
+export type TabsProps = Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>, 'onValueChange' | 'value'> &
+  Omit<TabsBaseProps, 'value'> & { value: string; onValueChange: (value: string) => void };
 export interface TabsListProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>, TabsListBaseProps {}
 export interface TabsTriggerProps
   extends

package/src/tooltip.tsx

@@ -19,28 +19,22 @@ const TooltipContent: React.ForwardRefExoticComponent<
   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(
-            'border-border bg-popover 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 z-50 overflow-hidden rounded-md border px-3 py-1.5 shadow-md',
-            className,
-          )}
-        >
-          <Text className="text-popover-foreground native:text-base text-sm">{props.children}</Text>
-        </Animated.View>
-      </TooltipPrimitive.Overlay>
-    </TooltipPrimitive.Portal>
-  ),
-);
+>(({ className, portalHost, ...props }, _ref) => (
+  <TooltipPrimitive.Portal hostName={portalHost}>
+    <TooltipPrimitive.Overlay style={Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined}>
+      <Animated.View
+        entering={FadeIn}
+        exiting={FadeOut}
+        className={cn(
+          'border-border bg-popover 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 z-50 overflow-hidden rounded-md border px-3 py-1.5 shadow-md',
+          className,
+        )}
+      >
+        <Text className="text-popover-foreground native:text-base text-sm">{props.children}</Text>
+      </Animated.View>
+    </TooltipPrimitive.Overlay>
+  </TooltipPrimitive.Portal>
+));
 TooltipContent.displayName = TooltipPrimitive.Content?.displayName || 'TooltipContent';
 
 const TooltipProvider = ({ children }: { children: React.ReactNode }) => <>{children}</>;