@gv-tech/ui-web 2.15.2 → 2.17.0

package/src/support-fab.tsx

@@ -0,0 +1,190 @@
+'use client';
+
+import { Coffee, ExternalLink } from 'lucide-react';
+import * as React from 'react';
+import { Button } from './button';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from './dialog';
+import { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle } from './drawer';
+import { cn } from './lib/utils';
+
+const MOBILE_QUERY = '(max-width: 767px)';
+
+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}`;
+};
+
+const buildEmbedUrl = (supportUrl: string, creatorId: string) => {
+  const base = normalizeBaseUrl(supportUrl);
+  const creator = encodeURIComponent(sanitizeCreator(creatorId));
+  return `${base}/widget/page/${creator}`;
+};
+
+const useIsMobile = () => {
+  const getInitial = () => {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+      return false;
+    }
+    return window.matchMedia(MOBILE_QUERY).matches;
+  };
+
+  const [isMobile, setIsMobile] = React.useState(getInitial);
+
+  React.useEffect(() => {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+      return;
+    }
+
+    const mediaQuery = window.matchMedia(MOBILE_QUERY);
+    const onChange = (event: MediaQueryListEvent) => setIsMobile(event.matches);
+
+    setIsMobile(mediaQuery.matches);
+    mediaQuery.addEventListener('change', onChange);
+
+    return () => {
+      mediaQuery.removeEventListener('change', onChange);
+    };
+  }, []);
+
+  return isMobile;
+};
+
+export interface SupportFabProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
+  supportUrl?: string;
+  creatorId: string;
+  title?: string;
+  description?: string;
+  iframeTitle?: 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.',
+  iframeTitle = 'Buy Me a Coffee support form',
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  positionClassName,
+  buttonClassName,
+  panelClassName,
+  className,
+  type,
+  onClick,
+  ...buttonProps
+}: SupportFabProps) {
+  const isMobile = useIsMobile();
+  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 embedUrl = React.useMemo(() => buildEmbedUrl(supportUrl, creatorId), [creatorId, supportUrl]);
+
+  const panelBody = (
+    <div className="flex max-h-[75vh] flex-col gap-3">
+      <div className="overflow-hidden rounded-md border">
+        <iframe
+          title={iframeTitle}
+          src={embedUrl}
+          className="h-[560px] w-full border-0"
+          loading="lazy"
+          referrerPolicy="strict-origin-when-cross-origin"
+        />
+      </div>
+      <div className="text-muted-foreground flex items-center justify-between gap-2 text-xs">
+        <span>If the embedded checkout is unavailable, open the support page directly.</span>
+        <a
+          href={pageUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-foreground inline-flex items-center gap-1 font-medium underline underline-offset-2"
+        >
+          Open Buy Me a Coffee
+          <ExternalLink className="h-3.5 w-3.5" />
+        </a>
+      </div>
+    </div>
+  );
+
+  const trigger = (
+    <div className={cn('fixed right-6 bottom-6 z-50', positionClassName)}>
+      <Button
+        aria-label="Support this project"
+        type={type ?? 'button'}
+        className={cn(
+          'inline-flex h-14 w-14 rounded-full border border-black/15 bg-[#ffdd00] text-black shadow-[0_16px_36px_-18px_rgba(0,0,0,0.8)] transition hover:-translate-y-0.5 hover:scale-105 hover:bg-[#ffe347] focus-visible:ring-2 focus-visible:ring-offset-2 active:translate-y-0 active:scale-95',
+          buttonClassName,
+          className,
+        )}
+        onClick={(event) => {
+          onClick?.(event);
+          if (!event.defaultPrevented) {
+            setOpen(true);
+          }
+        }}
+        {...buttonProps}
+      >
+        <Coffee className="h-6 w-6" />
+        <span className="sr-only">Support this project</span>
+      </Button>
+    </div>
+  );
+
+  if (isMobile) {
+    return (
+      <>
+        {trigger}
+        <Drawer open={isOpen} onOpenChange={setOpen}>
+          <DrawerContent className={cn('mx-auto w-full max-w-xl', panelClassName)}>
+            <DrawerHeader>
+              <DrawerTitle>{title}</DrawerTitle>
+              <DrawerDescription>{description}</DrawerDescription>
+            </DrawerHeader>
+            <div className="px-4 pb-4">{panelBody}</div>
+          </DrawerContent>
+        </Drawer>
+      </>
+    );
+  }
+
+  return (
+    <>
+      {trigger}
+      <Dialog open={isOpen} onOpenChange={setOpen}>
+        <DialogContent className={cn('max-w-xl p-5', panelClassName)}>
+          <DialogHeader>
+            <DialogTitle>{title}</DialogTitle>
+            <DialogDescription>{description}</DialogDescription>
+          </DialogHeader>
+          {panelBody}
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

package/src/switch.tsx

@@ -25,7 +25,7 @@ const Switch = React.forwardRef<
     />
   </SwitchPrimitives.Root>
 ));
-Switch.displayName = SwitchPrimitives.Root.displayName;
+Switch.displayName = SwitchPrimitives.Root?.displayName || 'Switch';
 
 export { Switch };
 export type { SwitchBaseProps as SwitchProps };

package/src/table-of-contents.tsx

@@ -0,0 +1,285 @@
+'use client';
+
+import {
+  HeadingItem,
+  TableOfContentsBaseProps,
+  TableOfContentsContentBaseProps,
+  TableOfContentsListBaseProps,
+  TableOfContentsRootBaseProps,
+} from '@gv-tech/ui-core';
+import * as React from 'react';
+import { cn, slugify } from './lib/utils';
+
+// Context for sharing heading data
+interface TOCContextValue {
+  headings: HeadingItem[];
+  activeId: string | null;
+  activeHeadingText: string | null;
+  registerHeadings: (headings: HeadingItem[]) => void;
+  setActiveId: (id: string | null) => void;
+  config: TableOfContentsBaseProps;
+}
+
+const TOCContext = React.createContext<TOCContextValue | null>(null);
+
+function useTOC() {
+  const context = React.useContext(TOCContext);
+  if (!context) {
+    throw new Error('TOC components must be used within a TableOfContents provider');
+  }
+  return context;
+}
+
+export type TableOfContentsProps = TableOfContentsRootBaseProps;
+
+/**
+ * Root component that provides the Table of Contents context.
+ * Can be used as a wrapper OR standalone.
+ * If used as a wrapper: <TableOfContents><List /><Content>{children}</Content></TableOfContents>
+ * If used standalone: <TableOfContents /> (requires container ref or defaults to document)
+ */
+function TableOfContents({
+  children,
+  className,
+  activeId: activeIdOverride,
+  minLevel = 1,
+  maxLevel = 4,
+  selector = 'h1, h2, h3, h4, h5, h6',
+}: TableOfContentsProps) {
+  const [headings, setHeadings] = React.useState<HeadingItem[]>([]);
+  const [activeId, setActiveId] = React.useState<string | null>(null);
+
+  const activeHeadingText = React.useMemo(() => {
+    return headings.find((h) => h.id === activeId)?.text || null;
+  }, [headings, activeId]);
+
+  const registerHeadings = React.useCallback((newHeadings: HeadingItem[]) => {
+    setHeadings((prev) => {
+      if (JSON.stringify(prev) === JSON.stringify(newHeadings)) {
+        return prev;
+      }
+      return newHeadings;
+    });
+  }, []);
+
+  const value = React.useMemo(
+    () => ({
+      headings,
+      activeId: activeIdOverride || activeId,
+      activeHeadingText,
+      registerHeadings,
+      setActiveId,
+      config: { minLevel, maxLevel, selector, className },
+    }),
+    [
+      headings,
+      activeId,
+      activeIdOverride,
+      activeHeadingText,
+      registerHeadings,
+      minLevel,
+      maxLevel,
+      selector,
+      className,
+    ],
+  );
+
+  return (
+    <TOCContext.Provider value={value}>
+      <div className={cn('relative', className)}>
+        {children || (
+          <div className="flex flex-col gap-4">
+            <TableOfContentsList />
+            <TableOfContentsContent>{null}</TableOfContentsContent>
+          </div>
+        )}
+      </div>
+    </TOCContext.Provider>
+  );
+}
+
+/**
+ * Renders the actual list of links.
+ */
+function TableOfContentsList({ className }: TableOfContentsListBaseProps) {
+  const { headings, activeId, activeHeadingText } = useTOC();
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  // Auto-collapse on scroll
+  React.useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    const handleScroll = () => {
+      setIsOpen(false);
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [isOpen]);
+
+  if (headings.length === 0) {
+    return null;
+  }
+
+  const currentMinLevel = Math.min(...headings.map((h) => h.level));
+
+  const listContent = (
+    <ul className="m-0 list-none text-sm">
+      {headings.map((heading) => {
+        const isActive = activeId === heading.id;
+        const paddingLeft = `${(heading.level - currentMinLevel) * 1}rem`;
+
+        return (
+          <li key={heading.id} className="mt-0 pt-2">
+            <a
+              href={`#${heading.id}`}
+              onClick={() => setIsOpen(false)}
+              className={cn(
+                'hover:text-foreground inline-block no-underline transition-colors',
+                isActive ? 'text-primary font-medium' : 'text-muted-foreground',
+              )}
+              style={{ paddingLeft }}
+            >
+              {heading.text}
+            </a>
+          </li>
+        );
+      })}
+    </ul>
+  );
+
+  return (
+    <>
+      {/* Mobile Sticky Header */}
+      <div className={cn('bg-background/95 sticky top-0 z-40 border-b backdrop-blur xl:hidden', className)}>
+        <button
+          onClick={() => setIsOpen(!isOpen)}
+          className="flex w-full items-center justify-between px-4 py-3 text-left"
+        >
+          <div className="flex items-center gap-2 overflow-hidden">
+            <span className="text-muted-foreground text-xs font-semibold tracking-wider uppercase">On this page:</span>
+            <span className="truncate text-sm font-medium">{activeHeadingText || 'Overview'}</span>
+          </div>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className={cn('shrink-0 transition-transform duration-200', isOpen && 'rotate-180')}
+          >
+            <path d="m6 9 6 6 6-6" />
+          </svg>
+        </button>
+
+        {isOpen && (
+          <div className="bg-background border-t px-4 pt-2 pb-6">
+            <nav aria-label="Table of contents mobile">{listContent}</nav>
+          </div>
+        )}
+      </div>
+
+      {/* Desktop Hidden List */}
+      <nav className={cn('hidden xl:block', className)} aria-label="Table of contents">
+        {listContent}
+      </nav>
+    </>
+  );
+}
+
+/**
+ * Wraps the content area and automatically detects headings within it.
+ */
+function TableOfContentsContent({ children, className }: TableOfContentsContentBaseProps) {
+  const { registerHeadings, setActiveId, config } = useTOC();
+  const contentRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    const root = contentRef.current;
+    if (!root) {
+      return;
+    }
+
+    const queryHeadings = () => {
+      const elements = Array.from(root.querySelectorAll(config.selector || 'h1, h2, h3, h4, h5, h6')).filter(
+        (element) => {
+          const level = parseInt(element.tagName.charAt(1), 10);
+          return level >= (config.minLevel ?? 1) && level <= (config.maxLevel ?? 4);
+        },
+      );
+
+      const headingItems: HeadingItem[] = elements.map((element) => {
+        if (!element.id) {
+          element.id = slugify(element.textContent || 'heading');
+        }
+        return {
+          id: element.id,
+          text: element.textContent || '',
+          level: parseInt(element.tagName.charAt(1), 10),
+        };
+      });
+
+      registerHeadings(headingItems);
+      return elements;
+    };
+
+    // Initial query
+    const elements = queryHeadings();
+
+    // Intersection Observer for active ID
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setActiveId(entry.target.id);
+          }
+        });
+      },
+      {
+        rootMargin: '0px 0px -80% 0px',
+        threshold: 0.1,
+      },
+    );
+
+    elements.forEach((el) => observer.observe(el));
+
+    // Mutation Observer for dynamic content
+    const mutationObserver = new MutationObserver(() => {
+      const newElements = queryHeadings();
+      observer.disconnect();
+      newElements.forEach((el) => observer.observe(el));
+    });
+
+    mutationObserver.observe(root, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+    });
+
+    return () => {
+      observer.disconnect();
+      mutationObserver.disconnect();
+    };
+  }, [config.selector, config.minLevel, config.maxLevel, registerHeadings, setActiveId]);
+
+  return (
+    <div ref={contentRef} className={className}>
+      {children}
+    </div>
+  );
+}
+
+TableOfContents.List = TableOfContentsList;
+TableOfContents.Content = TableOfContentsContent;
+
+export type {
+  TableOfContentsContentBaseProps as TableOfContentsContentProps,
+  TableOfContentsListBaseProps as TableOfContentsListProps,
+} from '@gv-tech/ui-core';
+export { TableOfContents, TableOfContentsContent, TableOfContentsList };

package/src/tabs.tsx

@@ -21,7 +21,7 @@ const TabsList = React.forwardRef<
     {...props}
   />
 ));
-TabsList.displayName = TabsPrimitive.List.displayName;
+TabsList.displayName = TabsPrimitive.List?.displayName || 'TabsList';
 
 const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Trigger>,
@@ -36,7 +36,7 @@ const TabsTrigger = React.forwardRef<
     {...props}
   />
 ));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+TabsTrigger.displayName = TabsPrimitive.Trigger?.displayName || 'TabsTrigger';
 
 const TabsContent = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Content>,
@@ -51,7 +51,7 @@ const TabsContent = React.forwardRef<
     {...props}
   />
 ));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
+TabsContent.displayName = TabsPrimitive.Content?.displayName || 'TabsContent';
 
 export { Tabs, TabsContent, TabsList, TabsTrigger };
 export type {

package/src/toast.tsx

@@ -21,7 +21,7 @@ const ToastViewport = React.forwardRef<
     {...props}
   />
 ));
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+ToastViewport.displayName = ToastPrimitives.Viewport?.displayName || 'ToastViewport';
 
 const toastVariants = cva(
   '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 transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
@@ -44,7 +44,7 @@ const Toast = React.forwardRef<
 >(({ className, variant, ...props }, ref) => {
   return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />;
 });
-Toast.displayName = ToastPrimitives.Root.displayName;
+Toast.displayName = ToastPrimitives.Root?.displayName || 'Toast';
 
 const ToastAction = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Action>,
@@ -59,7 +59,7 @@ const ToastAction = React.forwardRef<
     {...props}
   />
 ));
-ToastAction.displayName = ToastPrimitives.Action.displayName;
+ToastAction.displayName = ToastPrimitives.Action?.displayName || 'ToastAction';
 
 const ToastClose = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Close>,
@@ -77,7 +77,7 @@ const ToastClose = React.forwardRef<
     <X className="h-4 w-4" />
   </ToastPrimitives.Close>
 ));
-ToastClose.displayName = ToastPrimitives.Close.displayName;
+ToastClose.displayName = ToastPrimitives.Close?.displayName || 'ToastClose';
 
 const ToastTitle = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Title>,
@@ -85,7 +85,7 @@ const ToastTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Title ref={ref} className={cn('text-sm font-semibold [&+div]:text-xs', className)} {...props} />
 ));
-ToastTitle.displayName = ToastPrimitives.Title.displayName;
+ToastTitle.displayName = ToastPrimitives.Title?.displayName || 'ToastTitle';
 
 const ToastDescription = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Description>,
@@ -93,7 +93,7 @@ const ToastDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Description ref={ref} className={cn('text-sm opacity-90', className)} {...props} />
 ));
-ToastDescription.displayName = ToastPrimitives.Description.displayName;
+ToastDescription.displayName = ToastPrimitives.Description?.displayName || 'ToastDescription';
 
 type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
 

package/src/toggle-group.tsx

@@ -23,7 +23,7 @@ const ToggleGroup = React.forwardRef<React.ElementRef<typeof ToggleGroupPrimitiv
   ),
 );
 
-ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+ToggleGroup.displayName = ToggleGroupPrimitive.Root?.displayName || 'ToggleGroup';
 
 export type ToggleGroupItemProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
   VariantProps<typeof toggleVariants>;
@@ -50,6 +50,6 @@ const ToggleGroupItem = React.forwardRef<React.ElementRef<typeof ToggleGroupPrim
   },
 );
 
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item?.displayName || 'ToggleGroupItem';
 
 export { ToggleGroup, ToggleGroupItem };

package/src/toggle.tsx

@@ -19,6 +19,6 @@ const Toggle = React.forwardRef<React.ElementRef<typeof TogglePrimitive.Root>, T
   ),
 );
 
-Toggle.displayName = TogglePrimitive.Root.displayName;
+Toggle.displayName = TogglePrimitive.Root?.displayName || 'Toggle';
 
 export { Toggle, toggleVariants };

package/src/tooltip.tsx

@@ -28,7 +28,7 @@ export type TooltipTriggerProps = React.ComponentPropsWithoutRef<typeof TooltipP
 const TooltipTrigger = React.forwardRef<React.ElementRef<typeof TooltipPrimitive.Trigger>, TooltipTriggerProps>(
   ({ className, ...props }, ref) => <TooltipPrimitive.Trigger ref={ref} className={className} {...props} />,
 );
-TooltipTrigger.displayName = TooltipPrimitive.Trigger.displayName;
+TooltipTrigger.displayName = TooltipPrimitive.Trigger?.displayName || 'TooltipTrigger';
 
 export type TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> &
   TooltipContentBaseProps;
@@ -46,6 +46,6 @@ const TooltipContent = React.forwardRef<React.ElementRef<typeof TooltipPrimitive
     />
   ),
 );
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+TooltipContent.displayName = TooltipPrimitive.Content?.displayName || 'TooltipContent';
 
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/utils-B6yFEsav.mjs

@@ -1,8 +0,0 @@
-import { clsx as o } from "clsx";
-import { twMerge as t } from "tailwind-merge";
-function m(...r) {
-  return t(o(r));
-}
-export {
-  m as c
-};

package/dist/utils-IjLH3w2e.js

@@ -1 +0,0 @@
-"use strict";const r=require("clsx"),c=require("tailwind-merge");function n(...e){return c.twMerge(r.clsx(e))}exports.cn=n;