react-sharesheet 1.0.0

package/src/ShareSheetContent.tsx

@@ -0,0 +1,538 @@
+"use client";
+
+import { useMemo, useState, useCallback } from "react";
+import { Image, FileText, Music, Film, Link2, Play } from "lucide-react";
+import { cn } from "./utils";
+import { useShareSheet } from "./hooks";
+import {
+  PLATFORM_IDS,
+  PLATFORM_COLORS,
+  PLATFORM_LABELS,
+  PLATFORM_ICONS,
+  PLATFORM_CSS_VARS,
+} from "./platforms";
+import {
+  CSS_VARS_UI,
+  CSS_VAR_UI_DEFAULTS,
+  type ShareSheetContentProps,
+  type ShareOption,
+  type ShareButtonConfig,
+  type PreviewConfig,
+  type PreviewType,
+} from "./types";
+
+const DEFAULT_BUTTON_SIZE = 45;
+const DEFAULT_ICON_SIZE = 22;
+
+// File extension mappings
+const IMAGE_EXTENSIONS = ["jpg", "jpeg", "png", "gif", "webp", "svg", "bmp", "ico", "avif"];
+const VIDEO_EXTENSIONS = ["mp4", "webm", "mov", "avi", "mkv", "m4v", "ogv"];
+const AUDIO_EXTENSIONS = ["mp3", "wav", "ogg", "m4a", "aac", "flac", "wma"];
+
+// Detect content type from URL
+function detectPreviewType(url: string): PreviewType {
+  try {
+    const pathname = new URL(url, "http://localhost").pathname;
+    const ext = pathname.split(".").pop()?.toLowerCase() || "";
+    
+    if (IMAGE_EXTENSIONS.includes(ext)) return "image";
+    if (VIDEO_EXTENSIONS.includes(ext)) return "video";
+    if (AUDIO_EXTENSIONS.includes(ext)) return "audio";
+    
+    // Check for common patterns
+    if (url.includes("/api/og") || url.includes("og-image")) return "image";
+    if (url.includes("youtube.com") || url.includes("vimeo.com")) return "video";
+    
+    return "link";
+  } catch {
+    return "link";
+  }
+}
+
+// Get filename from URL
+function getFilenameFromUrl(url: string): string {
+  try {
+    const pathname = new URL(url, "http://localhost").pathname;
+    const filename = pathname.split("/").pop() || "";
+    return decodeURIComponent(filename);
+  } catch {
+    return url;
+  }
+}
+
+// Default class names
+const defaultClasses = {
+  root: "max-w-md mx-auto",
+  header: "text-center mb-2",
+  title: "text-2xl font-black",
+  subtitle: "mt-1 text-sm",
+  preview: "flex justify-center mb-4 px-4",
+  previewSkeleton: "rounded-xl overflow-hidden",
+  previewImage: "",
+  previewVideo: "",
+  previewFile: "",
+  previewFileIcon: "",
+  previewFilename: "truncate",
+  previewLink: "",
+  grid: "px-2 py-6 flex flex-row items-center gap-4 gap-y-6 flex-wrap justify-center",
+  button: "flex flex-col items-center gap-0 text-xs w-[60px] outline-none cursor-pointer group",
+  buttonIcon: "p-2 rounded-full transition-all flex items-center justify-center group-hover:scale-110 group-active:scale-95 mb-2",
+  buttonLabel: "",
+};
+
+// Shimmer keyframes as inline style
+const shimmerKeyframes = `
+@keyframes sharesheet-shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+`;
+
+// Helper to create var() with fallback
+function cssVar(name: string, fallback: string): string {
+  return `var(${name}, ${fallback})`;
+}
+
+// Normalize preview prop to PreviewConfig
+function normalizePreview(preview: string | PreviewConfig | null | undefined): PreviewConfig | null {
+  if (!preview) return null;
+  
+  if (typeof preview === "string") {
+    const type = detectPreviewType(preview);
+    return {
+      url: preview,
+      type,
+      filename: getFilenameFromUrl(preview),
+    };
+  }
+  
+  // It's already a config object
+  const type = preview.type === "auto" || !preview.type ? detectPreviewType(preview.url) : preview.type;
+  
+  return {
+    ...preview,
+    type,
+    filename: preview.filename || getFilenameFromUrl(preview.url),
+  };
+}
+
+export function ShareSheetContent({
+  title = "Share",
+  shareUrl,
+  shareText,
+  preview,
+  downloadUrl,
+  downloadFilename,
+  className,
+  classNames = {},
+  buttonSize = DEFAULT_BUTTON_SIZE,
+  iconSize = DEFAULT_ICON_SIZE,
+  onNativeShare,
+  onCopy,
+  onDownload,
+  hide = [],
+  show,
+  labels = {},
+  icons = {},
+}: ShareSheetContentProps) {
+  const [mediaLoaded, setMediaLoaded] = useState(false);
+  const [mediaError, setMediaError] = useState(false);
+
+  const handleMediaLoad = useCallback(() => {
+    setMediaLoaded(true);
+  }, []);
+
+  const handleMediaError = useCallback(() => {
+    setMediaError(true);
+  }, []);
+
+  // Normalize preview config
+  const previewConfig = useMemo(() => normalizePreview(preview), [preview]);
+
+  const shareSheet = useShareSheet({
+    shareUrl,
+    shareText,
+    downloadUrl,
+    downloadFilename,
+    emailSubject: title,
+    onNativeShare,
+    onCopy,
+    onDownload,
+  });
+
+  // Map platform IDs to their share actions
+  const shareActions: Record<ShareOption, () => void> = useMemo(() => ({
+    native: () => void shareSheet.nativeShare(),
+    copy: () => void shareSheet.copyLink(),
+    download: () => void shareSheet.downloadFile(),
+    whatsapp: shareSheet.shareWhatsApp,
+    telegram: shareSheet.shareTelegram,
+    instagram: shareSheet.shareInstagram,
+    facebook: shareSheet.shareFacebook,
+    snapchat: shareSheet.shareSnapchat,
+    sms: shareSheet.shareSMS,
+    email: shareSheet.shareEmail,
+    linkedin: shareSheet.shareLinkedIn,
+    reddit: shareSheet.shareReddit,
+    x: shareSheet.shareX,
+    tiktok: shareSheet.shareTikTok,
+    threads: shareSheet.shareThreads,
+  }), [shareSheet]);
+
+  // Dynamic labels that depend on state
+  const dynamicLabels: Partial<Record<ShareOption, string>> = useMemo(() => ({
+    copy: shareSheet.copied ? "Copied!" : PLATFORM_LABELS.copy,
+    download: shareSheet.downloading ? "..." : PLATFORM_LABELS.download,
+  }), [shareSheet.copied, shareSheet.downloading]);
+
+  // Build button configs from platform data
+  const buttons: ShareButtonConfig[] = useMemo(() => {
+    return PLATFORM_IDS.map((id) => {
+      const Icon = PLATFORM_ICONS[id];
+      const defaultLabel = dynamicLabels[id] ?? PLATFORM_LABELS[id];
+      
+      return {
+        id,
+        label: labels[id] ?? defaultLabel,
+        icon: icons[id] ?? <Icon size={iconSize} />,
+        // Use CSS var with fallback to platform color
+        bgColor: cssVar(PLATFORM_CSS_VARS[id], PLATFORM_COLORS[id].bg),
+        textColor: PLATFORM_COLORS[id].text,
+        onClick: shareActions[id],
+        // Conditions for showing certain buttons
+        condition: id === "native" ? shareSheet.canNativeShare
+          : id === "download" ? !!downloadUrl
+          : true,
+      };
+    });
+  }, [iconSize, labels, icons, dynamicLabels, shareActions, shareSheet.canNativeShare, downloadUrl]);
+
+  const visibleButtons = useMemo(() => {
+    return buttons.filter((btn) => {
+      // Check condition (e.g., canNativeShare, downloadUrl exists)
+      if (btn.condition === false) return false;
+      // Filter by show list if provided
+      if (show && show.length > 0) return show.includes(btn.id);
+      // Filter by hide list
+      if (hide.includes(btn.id)) return false;
+      return true;
+    });
+  }, [buttons, show, hide]);
+
+  const showPreview = !!previewConfig;
+
+  // Render preview based on type
+  const renderPreview = () => {
+    if (!previewConfig) return null;
+
+    const { type, url, filename, alt, poster } = previewConfig;
+    const bgColor = cssVar(CSS_VARS_UI.previewBg, CSS_VAR_UI_DEFAULTS[CSS_VARS_UI.previewBg]);
+    const shimmerColor = cssVar(CSS_VARS_UI.previewShimmer, CSS_VAR_UI_DEFAULTS[CSS_VARS_UI.previewShimmer]);
+    const textColor = cssVar(CSS_VARS_UI.subtitleColor, CSS_VAR_UI_DEFAULTS[CSS_VARS_UI.subtitleColor]);
+
+    // Floating URL label (centered below)
+    const UrlLabel = ({ displayUrl = url }: { displayUrl?: string }) => (
+      <div
+        className={cn(defaultClasses.previewFilename, classNames.previewFilename)}
+        style={{ 
+          color: textColor, 
+          fontSize: "10px",
+          opacity: 0.5,
+          textAlign: "center",
+          marginTop: "6px",
+        }}
+      >
+        {displayUrl}
+      </div>
+    );
+
+    // Placeholder card for non-media types or loading/error states
+    const PlaceholderCard = ({ 
+      icon: IconComponent, 
+      isLoading = false,
+      label,
+      displayUrl,
+    }: { 
+      icon: typeof Link2; 
+      isLoading?: boolean;
+      label?: string;
+      displayUrl?: string;
+    }) => (
+      <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
+        <div
+          className={cn(defaultClasses.previewSkeleton, classNames.previewSkeleton)}
+          style={{
+            position: "relative",
+            backgroundColor: bgColor,
+            width: "200px",
+            height: "120px",
+            overflow: "hidden",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          {isLoading && (
+            <div style={{ position: "absolute", inset: 0, overflow: "hidden" }}>
+              <div
+                style={{
+                  position: "absolute",
+                  inset: 0,
+                  background: `linear-gradient(90deg, transparent, ${shimmerColor}, transparent)`,
+                  animation: "sharesheet-shimmer 1.5s infinite",
+                }}
+              />
+            </div>
+          )}
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: "8px",
+            }}
+          >
+            <IconComponent size={32} style={{ color: textColor, opacity: 0.4 }} />
+            {label && (
+              <span style={{ color: textColor, fontSize: "11px", opacity: 0.4 }}>
+                {label}
+              </span>
+            )}
+          </div>
+        </div>
+        <UrlLabel displayUrl={displayUrl} />
+      </div>
+    );
+
+    // If there was an error loading media, show fallback
+    if (mediaError && (type === "image" || type === "video")) {
+      return <PlaceholderCard icon={Link2} displayUrl={url} />;
+    }
+
+    switch (type) {
+      case "image":
+        // Show placeholder while loading, then show image with correct aspect ratio
+        if (!mediaLoaded) {
+          return (
+            <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
+              <div
+                className={cn(defaultClasses.previewSkeleton, classNames.previewSkeleton)}
+                style={{
+                  position: "relative",
+                  backgroundColor: bgColor,
+                  width: "200px",
+                  height: "120px",
+                  overflow: "hidden",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                <div style={{ position: "absolute", inset: 0, overflow: "hidden" }}>
+                  <div
+                    style={{
+                      position: "absolute",
+                      inset: 0,
+                      background: `linear-gradient(90deg, transparent, ${shimmerColor}, transparent)`,
+                      animation: "sharesheet-shimmer 1.5s infinite",
+                    }}
+                  />
+                </div>
+                <Image size={32} style={{ color: textColor, opacity: 0.4 }} />
+              </div>
+              <UrlLabel />
+              {/* Hidden image for preloading */}
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                src={url}
+                alt={alt || "Preview"}
+                onLoad={handleMediaLoad}
+                onError={handleMediaError}
+                style={{ display: "none" }}
+              />
+            </div>
+          );
+        }
+        // Image loaded - show with correct aspect ratio
+        return (
+          <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={url}
+              alt={alt || "Preview"}
+              className={cn(defaultClasses.previewImage, classNames.previewImage)}
+              style={{
+                maxWidth: "100%",
+                maxHeight: "180px",
+                borderRadius: "12px",
+                opacity: 1,
+                transition: "opacity 0.3s ease-in-out",
+              }}
+            />
+            <UrlLabel />
+          </div>
+        );
+
+      case "video":
+        if (!mediaLoaded) {
+          return (
+            <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
+              <div
+                className={cn(defaultClasses.previewSkeleton, classNames.previewSkeleton)}
+                style={{
+                  position: "relative",
+                  backgroundColor: bgColor,
+                  width: "200px",
+                  height: "120px",
+                  overflow: "hidden",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                <div style={{ position: "absolute", inset: 0, overflow: "hidden" }}>
+                  <div
+                    style={{
+                      position: "absolute",
+                      inset: 0,
+                      background: `linear-gradient(90deg, transparent, ${shimmerColor}, transparent)`,
+                      animation: "sharesheet-shimmer 1.5s infinite",
+                    }}
+                  />
+                </div>
+                <Film size={32} style={{ color: textColor, opacity: 0.4 }} />
+              </div>
+              <UrlLabel />
+              {/* Hidden video for preloading */}
+              <video
+                src={url}
+                poster={poster}
+                onLoadedData={handleMediaLoad}
+                onError={handleMediaError}
+                style={{ display: "none" }}
+                muted
+                playsInline
+                preload="metadata"
+              />
+            </div>
+          );
+        }
+        // Video loaded
+        return (
+          <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
+            <div style={{ position: "relative", borderRadius: "12px", overflow: "hidden" }}>
+              <video
+                src={url}
+                poster={poster}
+                className={cn(defaultClasses.previewVideo, classNames.previewVideo)}
+                style={{
+                  maxWidth: "100%",
+                  maxHeight: "180px",
+                  display: "block",
+                }}
+                muted
+                playsInline
+                preload="metadata"
+              />
+              {/* Play icon overlay */}
+              <div
+                style={{
+                  position: "absolute",
+                  inset: 0,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  pointerEvents: "none",
+                }}
+              >
+                <div
+                  style={{
+                    backgroundColor: "rgba(0, 0, 0, 0.5)",
+                    borderRadius: "50%",
+                    padding: "10px",
+                  }}
+                >
+                  <Play size={20} fill="white" color="white" />
+                </div>
+              </div>
+            </div>
+            <UrlLabel />
+          </div>
+        );
+
+      case "audio":
+        return <PlaceholderCard icon={Music} label={filename || "Audio"} displayUrl={url} />;
+
+      case "file":
+        return <PlaceholderCard icon={FileText} label={filename || "File"} displayUrl={url} />;
+
+      case "link":
+      default:
+        return <PlaceholderCard icon={Link2} displayUrl={url} />;
+    }
+  };
+
+  return (
+    <div className={cn(defaultClasses.root, classNames.root, className)}>
+      {/* Inject shimmer keyframes */}
+      <style dangerouslySetInnerHTML={{ __html: shimmerKeyframes }} />
+
+      <div className={cn(defaultClasses.header, classNames.header)}>
+        <div
+          className={cn(defaultClasses.title, classNames.title)}
+          style={{ color: cssVar(CSS_VARS_UI.titleColor, CSS_VAR_UI_DEFAULTS[CSS_VARS_UI.titleColor]) }}
+        >
+          {title}
+        </div>
+        <div
+          className={cn(defaultClasses.subtitle, classNames.subtitle)}
+          style={{ color: cssVar(CSS_VARS_UI.subtitleColor, CSS_VAR_UI_DEFAULTS[CSS_VARS_UI.subtitleColor]) }}
+        >
+          {shareText}
+        </div>
+      </div>
+
+      {/* Content Preview */}
+      {showPreview && (
+        <div className={cn(defaultClasses.preview, classNames.preview)}>
+          {renderPreview()}
+        </div>
+      )}
+
+      <div className={cn(defaultClasses.grid, classNames.grid)}>
+        {visibleButtons.map((btn) => (
+          <button
+            key={btn.id}
+            type="button"
+            className={cn(defaultClasses.button, classNames.button)}
+            onClick={btn.onClick}
+          >
+            <div
+              className={cn(defaultClasses.buttonIcon, classNames.buttonIcon)}
+              style={{
+                width: buttonSize,
+                height: buttonSize,
+                backgroundColor: btn.bgColor,
+                color: btn.textColor,
+              }}
+            >
+              {btn.icon}
+            </div>
+            <div
+              className={cn(defaultClasses.buttonLabel, classNames.buttonLabel)}
+              style={{ color: cssVar(CSS_VARS_UI.buttonLabelColor, CSS_VAR_UI_DEFAULTS[CSS_VARS_UI.buttonLabelColor]) }}
+            >
+              {btn.label}
+            </div>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// Legacy export for backwards compatibility
+/** @deprecated Use ShareSheetContent instead */
+export const ShareMenuContent = ShareSheetContent;
+

package/src/ShareSheetDrawer.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import { useState } from "react";
+import { Drawer } from "vaul";
+
+import { cn } from "./utils";
+import { ShareSheetContent } from "./ShareSheetContent";
+import { CSS_VARS_UI, CSS_VAR_UI_DEFAULTS, type ShareSheetDrawerProps } from "./types";
+
+// Default class names for drawer
+const defaultDrawerClasses = {
+  overlay: "fixed inset-0 z-[70]",
+  drawer: "flex flex-col rounded-t-[14px] h-[70%] mt-24 fixed bottom-0 left-0 right-0 z-[80] border-t outline-none",
+  drawerInner: "p-4 rounded-t-[14px] flex-1 overflow-auto",
+  handle: "mx-auto w-12 h-1.5 shrink-0 rounded-full mb-6",
+  trigger: "",
+};
+
+// Helper to create var() with fallback
+function cssVar(name: string, fallback: string): string {
+  return `var(${name}, ${fallback})`;
+}
+
+export function ShareSheetDrawer({
+  title = "Share",
+  shareUrl,
+  shareText,
+  preview,
+  downloadUrl,
+  downloadFilename,
+  disabled,
+  children,
+  open: controlledOpen,
+  onOpenChange: controlledOnOpenChange,
+  className,
+  classNames = {},
+  buttonSize,
+  iconSize,
+  onNativeShare,
+  onCopy,
+  onDownload,
+  hide,
+  show,
+  labels,
+  icons,
+}: ShareSheetDrawerProps) {
+  const [internalOpen, setInternalOpen] = useState(false);
+
+  const isControlled = controlledOpen !== undefined;
+  const open = isControlled ? controlledOpen : internalOpen;
+  const setOpen = isControlled
+    ? (value: boolean) => controlledOnOpenChange?.(value)
+    : setInternalOpen;
+
+  return (
+    <Drawer.Root open={open} onOpenChange={setOpen} shouldScaleBackground>
+      <Drawer.Trigger asChild>
+        <div
+          className={cn(
+            defaultDrawerClasses.trigger,
+            classNames.trigger,
+            disabled ? "pointer-events-none opacity-50" : ""
+          )}
+        >
+          {children}
+        </div>
+      </Drawer.Trigger>
+      <Drawer.Portal>
+        <Drawer.Overlay
+          className={cn(defaultDrawerClasses.overlay, classNames.overlay)}
+          style={{
+            backgroundColor: cssVar(CSS_VARS_UI.overlayBg, CSS_VAR_UI_DEFAULTS[CSS_VARS_UI.overlayBg]),
+          }}
+        />
+        <Drawer.Content
+          className={cn(defaultDrawerClasses.drawer, classNames.drawer)}
+          style={{
+            backgroundColor: cssVar(CSS_VARS_UI.drawerBg, CSS_VAR_UI_DEFAULTS[CSS_VARS_UI.drawerBg]),
+            borderColor: cssVar(CSS_VARS_UI.drawerBorder, CSS_VAR_UI_DEFAULTS[CSS_VARS_UI.drawerBorder]),
+          }}
+        >
+          <Drawer.Title className="sr-only">{title}</Drawer.Title>
+          <div
+            className={cn(defaultDrawerClasses.drawerInner, classNames.drawerInner)}
+            style={{
+              backgroundColor: cssVar(CSS_VARS_UI.drawerBg, CSS_VAR_UI_DEFAULTS[CSS_VARS_UI.drawerBg]),
+            }}
+          >
+            <div
+              className={cn(defaultDrawerClasses.handle, classNames.handle)}
+              style={{
+                backgroundColor: cssVar(CSS_VARS_UI.handleBg, CSS_VAR_UI_DEFAULTS[CSS_VARS_UI.handleBg]),
+              }}
+            />
+
+            <ShareSheetContent
+              title={title}
+              shareUrl={shareUrl}
+              shareText={shareText}
+              preview={preview}
+              downloadUrl={downloadUrl}
+              downloadFilename={downloadFilename}
+              className={className}
+              classNames={classNames}
+              buttonSize={buttonSize}
+              iconSize={iconSize}
+              onNativeShare={() => {
+                onNativeShare?.();
+                setOpen(false);
+              }}
+              onCopy={onCopy}
+              onDownload={onDownload}
+              hide={hide}
+              show={show}
+              labels={labels}
+              icons={icons}
+            />
+          </div>
+        </Drawer.Content>
+      </Drawer.Portal>
+    </Drawer.Root>
+  );
+}
+
+// Legacy export for backwards compatibility
+/** @deprecated Use ShareSheetDrawer instead */
+export const ShareMenuDrawer = ShareSheetDrawer;
+

package/src/content.ts

@@ -0,0 +1,4 @@
+export { ShareSheetContent, ShareMenuContent } from "./ShareSheetContent";
+export type { ShareSheetContentProps, ShareSheetContentClassNames, ShareMenuContentProps, ShareMenuContentClassNames, ShareOption } from "./types";
+export { CSS_VARS_UI, CSS_VAR_UI_DEFAULTS, CSS_VARS, CSS_VAR_DEFAULTS } from "./types";
+export { PLATFORM_COLORS, PLATFORM_CSS_VARS } from "./platforms";

package/src/drawer.ts

@@ -0,0 +1,4 @@
+export { ShareSheetDrawer, ShareMenuDrawer } from "./ShareSheetDrawer";
+export type { ShareSheetDrawerProps, ShareSheetDrawerClassNames, ShareMenuDrawerProps, ShareMenuDrawerClassNames, ShareOption } from "./types";
+export { CSS_VARS_UI, CSS_VAR_UI_DEFAULTS, CSS_VARS, CSS_VAR_DEFAULTS } from "./types";
+export { PLATFORM_COLORS, PLATFORM_CSS_VARS } from "./platforms";