react-sharesheet 1.0.0

package/dist/drawer.mjs

@@ -0,0 +1,940 @@
+// src/ShareSheetDrawer.tsx
+import { useState as useState3 } from "react";
+import { Drawer } from "vaul";
+
+// src/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function openUrl(url) {
+  window.open(url, "_blank", "noopener,noreferrer");
+}
+function getSafeUrl(shareUrl) {
+  return shareUrl || (typeof window !== "undefined" ? window.location.href : "");
+}
+
+// src/ShareSheetContent.tsx
+import { useMemo as useMemo2, useState as useState2, useCallback as useCallback2 } from "react";
+import { Image, FileText, Music, Film, Link2, Play } from "lucide-react";
+
+// src/hooks.ts
+import { useMemo, useState, useCallback } from "react";
+
+// src/share-functions.ts
+function shareToWhatsApp(url, text) {
+  const encoded = encodeURIComponent(`${text}
+${url}`);
+  openUrl(`https://api.whatsapp.com/send?text=${encoded}`);
+}
+function shareToTelegram(url, text) {
+  const encodedText = encodeURIComponent(text);
+  const encodedUrl = encodeURIComponent(url);
+  openUrl(`https://t.me/share/url?url=${encodedUrl}&text=${encodedText}`);
+}
+function shareToX(url, text) {
+  const encodedText = encodeURIComponent(text);
+  const encodedUrl = encodeURIComponent(url);
+  openUrl(`https://x.com/intent/tweet?text=${encodedText}&url=${encodedUrl}`);
+}
+function shareToFacebook(url) {
+  const encodedUrl = encodeURIComponent(url);
+  openUrl(`https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`);
+}
+function openInstagram() {
+  window.location.href = "instagram://";
+}
+function openTikTok() {
+  window.location.href = "tiktok://";
+}
+function openThreads() {
+  window.location.href = "threads://";
+}
+function shareToSnapchat(url) {
+  const encodedUrl = encodeURIComponent(url);
+  openUrl(`https://www.snapchat.com/scan?attachmentUrl=${encodedUrl}`);
+}
+function shareViaSMS(url, text) {
+  const body = encodeURIComponent(`${text}
+${url}`);
+  window.location.href = `sms:?body=${body}`;
+}
+function shareViaEmail(url, text, subject = "Share") {
+  const encodedSubject = encodeURIComponent(subject);
+  const body = encodeURIComponent(`${text}
+
+${url}`);
+  window.location.href = `mailto:?subject=${encodedSubject}&body=${body}`;
+}
+function shareToLinkedIn(url) {
+  const encodedUrl = encodeURIComponent(url);
+  openUrl(`https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`);
+}
+function shareToReddit(url, text) {
+  const encodedText = encodeURIComponent(text);
+  const encodedUrl = encodeURIComponent(url);
+  openUrl(`https://www.reddit.com/submit?url=${encodedUrl}&title=${encodedText}`);
+}
+
+// src/hooks.ts
+function useShareSheet({
+  shareUrl,
+  shareText,
+  downloadUrl,
+  downloadFilename,
+  emailSubject = "Share",
+  onNativeShare,
+  onCopy,
+  onDownload
+}) {
+  const [copied, setCopied] = useState(false);
+  const [downloading, setDownloading] = useState(false);
+  const canNativeShare = useMemo(() => {
+    return typeof navigator !== "undefined" && "share" in navigator;
+  }, []);
+  const safeUrl = getSafeUrl(shareUrl);
+  const copyLink = useCallback(async () => {
+    if (!safeUrl) return;
+    try {
+      await navigator.clipboard.writeText(safeUrl);
+      setCopied(true);
+      onCopy?.();
+      setTimeout(() => setCopied(false), 1200);
+    } catch {
+    }
+  }, [safeUrl, onCopy]);
+  const nativeShare = useCallback(async () => {
+    if (!safeUrl) return;
+    const nav = navigator;
+    if (!("share" in nav) || typeof nav.share !== "function") return;
+    try {
+      await nav.share({
+        title: shareText,
+        text: shareText,
+        url: safeUrl
+      });
+      onNativeShare?.();
+    } catch {
+    }
+  }, [safeUrl, shareText, onNativeShare]);
+  const downloadFile = useCallback(async () => {
+    const url = (downloadUrl ?? "").trim();
+    if (!url) return;
+    try {
+      setDownloading(true);
+      onDownload?.();
+      const res = await fetch(url);
+      if (!res.ok) throw new Error(`Failed to fetch file (${res.status})`);
+      const blob = await res.blob();
+      const href = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = href;
+      a.download = downloadFilename || "download";
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      URL.revokeObjectURL(href);
+    } catch {
+    } finally {
+      setDownloading(false);
+    }
+  }, [downloadUrl, downloadFilename, onDownload]);
+  const shareWhatsApp = useCallback(() => {
+    shareToWhatsApp(safeUrl, shareText);
+  }, [safeUrl, shareText]);
+  const shareTelegram = useCallback(() => {
+    shareToTelegram(safeUrl, shareText);
+  }, [safeUrl, shareText]);
+  const shareX = useCallback(() => {
+    shareToX(safeUrl, shareText);
+  }, [safeUrl, shareText]);
+  const shareFacebook = useCallback(() => {
+    shareToFacebook(safeUrl);
+  }, [safeUrl]);
+  const shareInstagram = useCallback(() => {
+    openInstagram();
+  }, []);
+  const shareTikTok = useCallback(() => {
+    openTikTok();
+  }, []);
+  const shareThreads = useCallback(() => {
+    openThreads();
+  }, []);
+  const shareSnapchat = useCallback(() => {
+    shareToSnapchat(safeUrl);
+  }, [safeUrl]);
+  const shareSMS = useCallback(() => {
+    shareViaSMS(safeUrl, shareText);
+  }, [safeUrl, shareText]);
+  const shareEmail = useCallback(() => {
+    shareViaEmail(safeUrl, shareText, emailSubject);
+  }, [safeUrl, shareText, emailSubject]);
+  const shareLinkedIn = useCallback(() => {
+    shareToLinkedIn(safeUrl);
+  }, [safeUrl]);
+  const shareReddit = useCallback(() => {
+    shareToReddit(safeUrl, shareText);
+  }, [safeUrl, shareText]);
+  return {
+    canNativeShare,
+    copied,
+    downloading,
+    safeUrl,
+    copyLink,
+    nativeShare,
+    downloadFile,
+    shareWhatsApp,
+    shareTelegram,
+    shareX,
+    shareFacebook,
+    shareInstagram,
+    shareTikTok,
+    shareThreads,
+    shareSnapchat,
+    shareSMS,
+    shareEmail,
+    shareLinkedIn,
+    shareReddit
+  };
+}
+
+// src/platforms.tsx
+import {
+  Download,
+  Link as LinkIcon,
+  Mail,
+  MessageCircle,
+  Send
+} from "lucide-react";
+import {
+  FaFacebookF,
+  FaInstagram,
+  FaLinkedin,
+  FaReddit,
+  FaTelegramPlane,
+  FaTiktok,
+  FaWhatsapp
+} from "react-icons/fa";
+import { FaXTwitter, FaThreads, FaSnapchat } from "react-icons/fa6";
+import { jsx } from "react/jsx-runtime";
+var PLATFORM_IDS = [
+  "native",
+  "copy",
+  "download",
+  "whatsapp",
+  "telegram",
+  "instagram",
+  "facebook",
+  "snapchat",
+  "sms",
+  "email",
+  "linkedin",
+  "reddit",
+  "x",
+  "tiktok",
+  "threads"
+];
+var PLATFORM_COLORS = {
+  native: { bg: "#7c3aed", text: "#ffffff" },
+  copy: { bg: "#3b82f6", text: "#ffffff" },
+  download: { bg: "#ef4444", text: "#ffffff" },
+  whatsapp: { bg: "#25D366", text: "#ffffff" },
+  telegram: { bg: "#229ED9", text: "#ffffff" },
+  instagram: { bg: "#E1306C", text: "#ffffff" },
+  facebook: { bg: "#1877F2", text: "#ffffff" },
+  snapchat: { bg: "#FFFC00", text: "#000000" },
+  sms: { bg: "#22c55e", text: "#ffffff" },
+  email: { bg: "#f97316", text: "#ffffff" },
+  linkedin: { bg: "#0A66C2", text: "#ffffff" },
+  reddit: { bg: "#FF4500", text: "#ffffff" },
+  x: { bg: "#000000", text: "#ffffff" },
+  tiktok: { bg: "#000000", text: "#ffffff" },
+  threads: { bg: "#000000", text: "#ffffff" }
+};
+var PLATFORM_LABELS = {
+  native: "Share\u2026",
+  copy: "Copy",
+  download: "Download",
+  whatsapp: "WhatsApp",
+  telegram: "Telegram",
+  instagram: "Instagram",
+  facebook: "Facebook",
+  snapchat: "Snapchat",
+  sms: "SMS",
+  email: "Email",
+  linkedin: "LinkedIn",
+  reddit: "Reddit",
+  x: "X",
+  tiktok: "TikTok",
+  threads: "Threads"
+};
+var PLATFORM_ICONS = {
+  native: ({ size = 22, className }) => /* @__PURE__ */ jsx(Send, { size, className }),
+  copy: ({ size = 22, className }) => /* @__PURE__ */ jsx(LinkIcon, { size, className }),
+  download: ({ size = 22, className }) => /* @__PURE__ */ jsx(Download, { size, className }),
+  whatsapp: ({ size = 22, className }) => /* @__PURE__ */ jsx(FaWhatsapp, { size, className }),
+  telegram: ({ size = 22, className }) => /* @__PURE__ */ jsx(FaTelegramPlane, { size, className }),
+  instagram: ({ size = 22, className }) => /* @__PURE__ */ jsx(FaInstagram, { size, className }),
+  facebook: ({ size = 22, className }) => /* @__PURE__ */ jsx(FaFacebookF, { size, className }),
+  snapchat: ({ size = 22, className }) => /* @__PURE__ */ jsx(FaSnapchat, { size, className }),
+  sms: ({ size = 22, className }) => /* @__PURE__ */ jsx(MessageCircle, { size, className }),
+  email: ({ size = 22, className }) => /* @__PURE__ */ jsx(Mail, { size, className }),
+  linkedin: ({ size = 22, className }) => /* @__PURE__ */ jsx(FaLinkedin, { size, className }),
+  reddit: ({ size = 22, className }) => /* @__PURE__ */ jsx(FaReddit, { size, className }),
+  x: ({ size = 22, className }) => /* @__PURE__ */ jsx(FaXTwitter, { size, className }),
+  tiktok: ({ size = 22, className }) => /* @__PURE__ */ jsx(FaTiktok, { size, className }),
+  threads: ({ size = 22, className }) => /* @__PURE__ */ jsx(FaThreads, { size, className })
+};
+var PLATFORM_CSS_VARS = {
+  native: "--sharesheet-native-bg",
+  copy: "--sharesheet-copy-bg",
+  download: "--sharesheet-download-bg",
+  whatsapp: "--sharesheet-whatsapp-bg",
+  telegram: "--sharesheet-telegram-bg",
+  instagram: "--sharesheet-instagram-bg",
+  facebook: "--sharesheet-facebook-bg",
+  snapchat: "--sharesheet-snapchat-bg",
+  sms: "--sharesheet-sms-bg",
+  email: "--sharesheet-email-bg",
+  linkedin: "--sharesheet-linkedin-bg",
+  reddit: "--sharesheet-reddit-bg",
+  x: "--sharesheet-x-bg",
+  tiktok: "--sharesheet-tiktok-bg",
+  threads: "--sharesheet-threads-bg"
+};
+var PLATFORMS = Object.fromEntries(
+  PLATFORM_IDS.map((id) => [
+    id,
+    {
+      id,
+      label: PLATFORM_LABELS[id],
+      colors: PLATFORM_COLORS[id],
+      Icon: PLATFORM_ICONS[id],
+      cssVar: PLATFORM_CSS_VARS[id]
+    }
+  ])
+);
+
+// src/types.ts
+var CSS_VARS_UI = {
+  // Drawer
+  overlayBg: "--sharesheet-overlay-bg",
+  drawerBg: "--sharesheet-drawer-bg",
+  drawerBorder: "--sharesheet-drawer-border",
+  handleBg: "--sharesheet-handle-bg",
+  // Content
+  titleColor: "--sharesheet-title-color",
+  subtitleColor: "--sharesheet-subtitle-color",
+  buttonLabelColor: "--sharesheet-button-label-color",
+  // Preview
+  previewBg: "--sharesheet-preview-bg",
+  previewShimmer: "--sharesheet-preview-shimmer"
+};
+var CSS_VAR_UI_DEFAULTS = {
+  [CSS_VARS_UI.overlayBg]: "rgba(0, 0, 0, 0.7)",
+  [CSS_VARS_UI.drawerBg]: "#09090b",
+  [CSS_VARS_UI.drawerBorder]: "#27272a",
+  [CSS_VARS_UI.handleBg]: "#27272a",
+  [CSS_VARS_UI.titleColor]: "#ffffff",
+  [CSS_VARS_UI.subtitleColor]: "#a1a1aa",
+  [CSS_VARS_UI.buttonLabelColor]: "#ffffff",
+  [CSS_VARS_UI.previewBg]: "rgba(255, 255, 255, 0.05)",
+  [CSS_VARS_UI.previewShimmer]: "rgba(255, 255, 255, 0.1)"
+};
+var CSS_VARS = CSS_VARS_UI;
+var CSS_VAR_DEFAULTS = CSS_VAR_UI_DEFAULTS;
+
+// src/ShareSheetContent.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var DEFAULT_BUTTON_SIZE = 45;
+var DEFAULT_ICON_SIZE = 22;
+var IMAGE_EXTENSIONS = ["jpg", "jpeg", "png", "gif", "webp", "svg", "bmp", "ico", "avif"];
+var VIDEO_EXTENSIONS = ["mp4", "webm", "mov", "avi", "mkv", "m4v", "ogv"];
+var AUDIO_EXTENSIONS = ["mp3", "wav", "ogg", "m4a", "aac", "flac", "wma"];
+function detectPreviewType(url) {
+  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";
+    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";
+  }
+}
+function getFilenameFromUrl(url) {
+  try {
+    const pathname = new URL(url, "http://localhost").pathname;
+    const filename = pathname.split("/").pop() || "";
+    return decodeURIComponent(filename);
+  } catch {
+    return url;
+  }
+}
+var 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: ""
+};
+var shimmerKeyframes = `
+@keyframes sharesheet-shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+`;
+function cssVar(name, fallback) {
+  return `var(${name}, ${fallback})`;
+}
+function normalizePreview(preview) {
+  if (!preview) return null;
+  if (typeof preview === "string") {
+    const type2 = detectPreviewType(preview);
+    return {
+      url: preview,
+      type: type2,
+      filename: getFilenameFromUrl(preview)
+    };
+  }
+  const type = preview.type === "auto" || !preview.type ? detectPreviewType(preview.url) : preview.type;
+  return {
+    ...preview,
+    type,
+    filename: preview.filename || getFilenameFromUrl(preview.url)
+  };
+}
+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 = {}
+}) {
+  const [mediaLoaded, setMediaLoaded] = useState2(false);
+  const [mediaError, setMediaError] = useState2(false);
+  const handleMediaLoad = useCallback2(() => {
+    setMediaLoaded(true);
+  }, []);
+  const handleMediaError = useCallback2(() => {
+    setMediaError(true);
+  }, []);
+  const previewConfig = useMemo2(() => normalizePreview(preview), [preview]);
+  const shareSheet = useShareSheet({
+    shareUrl,
+    shareText,
+    downloadUrl,
+    downloadFilename,
+    emailSubject: title,
+    onNativeShare,
+    onCopy,
+    onDownload
+  });
+  const shareActions = useMemo2(() => ({
+    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]);
+  const dynamicLabels = useMemo2(() => ({
+    copy: shareSheet.copied ? "Copied!" : PLATFORM_LABELS.copy,
+    download: shareSheet.downloading ? "..." : PLATFORM_LABELS.download
+  }), [shareSheet.copied, shareSheet.downloading]);
+  const buttons = useMemo2(() => {
+    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] ?? /* @__PURE__ */ jsx2(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 = useMemo2(() => {
+    return buttons.filter((btn) => {
+      if (btn.condition === false) return false;
+      if (show && show.length > 0) return show.includes(btn.id);
+      if (hide.includes(btn.id)) return false;
+      return true;
+    });
+  }, [buttons, show, hide]);
+  const showPreview = !!previewConfig;
+  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]);
+    const UrlLabel = ({ displayUrl = url }) => /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: cn(defaultClasses.previewFilename, classNames.previewFilename),
+        style: {
+          color: textColor,
+          fontSize: "10px",
+          opacity: 0.5,
+          textAlign: "center",
+          marginTop: "6px"
+        },
+        children: displayUrl
+      }
+    );
+    const PlaceholderCard = ({
+      icon: IconComponent,
+      isLoading = false,
+      label,
+      displayUrl
+    }) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(defaultClasses.previewSkeleton, classNames.previewSkeleton),
+          style: {
+            position: "relative",
+            backgroundColor: bgColor,
+            width: "200px",
+            height: "120px",
+            overflow: "hidden",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          children: [
+            isLoading && /* @__PURE__ */ jsx2("div", { style: { position: "absolute", inset: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx2(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  inset: 0,
+                  background: `linear-gradient(90deg, transparent, ${shimmerColor}, transparent)`,
+                  animation: "sharesheet-shimmer 1.5s infinite"
+                }
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: "8px"
+                },
+                children: [
+                  /* @__PURE__ */ jsx2(IconComponent, { size: 32, style: { color: textColor, opacity: 0.4 } }),
+                  label && /* @__PURE__ */ jsx2("span", { style: { color: textColor, fontSize: "11px", opacity: 0.4 }, children: label })
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx2(UrlLabel, { displayUrl })
+    ] });
+    if (mediaError && (type === "image" || type === "video")) {
+      return /* @__PURE__ */ jsx2(PlaceholderCard, { icon: Link2, displayUrl: url });
+    }
+    switch (type) {
+      case "image":
+        if (!mediaLoaded) {
+          return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center" }, children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(defaultClasses.previewSkeleton, classNames.previewSkeleton),
+                style: {
+                  position: "relative",
+                  backgroundColor: bgColor,
+                  width: "200px",
+                  height: "120px",
+                  overflow: "hidden",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center"
+                },
+                children: [
+                  /* @__PURE__ */ jsx2("div", { style: { position: "absolute", inset: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx2(
+                    "div",
+                    {
+                      style: {
+                        position: "absolute",
+                        inset: 0,
+                        background: `linear-gradient(90deg, transparent, ${shimmerColor}, transparent)`,
+                        animation: "sharesheet-shimmer 1.5s infinite"
+                      }
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx2(Image, { size: 32, style: { color: textColor, opacity: 0.4 } })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx2(UrlLabel, {}),
+            /* @__PURE__ */ jsx2(
+              "img",
+              {
+                src: url,
+                alt: alt || "Preview",
+                onLoad: handleMediaLoad,
+                onError: handleMediaError,
+                style: { display: "none" }
+              }
+            )
+          ] });
+        }
+        return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center" }, children: [
+          /* @__PURE__ */ jsx2(
+            "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"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx2(UrlLabel, {})
+        ] });
+      case "video":
+        if (!mediaLoaded) {
+          return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center" }, children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(defaultClasses.previewSkeleton, classNames.previewSkeleton),
+                style: {
+                  position: "relative",
+                  backgroundColor: bgColor,
+                  width: "200px",
+                  height: "120px",
+                  overflow: "hidden",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center"
+                },
+                children: [
+                  /* @__PURE__ */ jsx2("div", { style: { position: "absolute", inset: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx2(
+                    "div",
+                    {
+                      style: {
+                        position: "absolute",
+                        inset: 0,
+                        background: `linear-gradient(90deg, transparent, ${shimmerColor}, transparent)`,
+                        animation: "sharesheet-shimmer 1.5s infinite"
+                      }
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx2(Film, { size: 32, style: { color: textColor, opacity: 0.4 } })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx2(UrlLabel, {}),
+            /* @__PURE__ */ jsx2(
+              "video",
+              {
+                src: url,
+                poster,
+                onLoadedData: handleMediaLoad,
+                onError: handleMediaError,
+                style: { display: "none" },
+                muted: true,
+                playsInline: true,
+                preload: "metadata"
+              }
+            )
+          ] });
+        }
+        return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center" }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { position: "relative", borderRadius: "12px", overflow: "hidden" }, children: [
+            /* @__PURE__ */ jsx2(
+              "video",
+              {
+                src: url,
+                poster,
+                className: cn(defaultClasses.previewVideo, classNames.previewVideo),
+                style: {
+                  maxWidth: "100%",
+                  maxHeight: "180px",
+                  display: "block"
+                },
+                muted: true,
+                playsInline: true,
+                preload: "metadata"
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  inset: 0,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  pointerEvents: "none"
+                },
+                children: /* @__PURE__ */ jsx2(
+                  "div",
+                  {
+                    style: {
+                      backgroundColor: "rgba(0, 0, 0, 0.5)",
+                      borderRadius: "50%",
+                      padding: "10px"
+                    },
+                    children: /* @__PURE__ */ jsx2(Play, { size: 20, fill: "white", color: "white" })
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx2(UrlLabel, {})
+        ] });
+      case "audio":
+        return /* @__PURE__ */ jsx2(PlaceholderCard, { icon: Music, label: filename || "Audio", displayUrl: url });
+      case "file":
+        return /* @__PURE__ */ jsx2(PlaceholderCard, { icon: FileText, label: filename || "File", displayUrl: url });
+      case "link":
+      default:
+        return /* @__PURE__ */ jsx2(PlaceholderCard, { icon: Link2, displayUrl: url });
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn(defaultClasses.root, classNames.root, className), children: [
+    /* @__PURE__ */ jsx2("style", { dangerouslySetInnerHTML: { __html: shimmerKeyframes } }),
+    /* @__PURE__ */ jsxs("div", { className: cn(defaultClasses.header, classNames.header), children: [
+      /* @__PURE__ */ jsx2(
+        "div",
+        {
+          className: cn(defaultClasses.title, classNames.title),
+          style: { color: cssVar(CSS_VARS_UI.titleColor, CSS_VAR_UI_DEFAULTS[CSS_VARS_UI.titleColor]) },
+          children: title
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "div",
+        {
+          className: cn(defaultClasses.subtitle, classNames.subtitle),
+          style: { color: cssVar(CSS_VARS_UI.subtitleColor, CSS_VAR_UI_DEFAULTS[CSS_VARS_UI.subtitleColor]) },
+          children: shareText
+        }
+      )
+    ] }),
+    showPreview && /* @__PURE__ */ jsx2("div", { className: cn(defaultClasses.preview, classNames.preview), children: renderPreview() }),
+    /* @__PURE__ */ jsx2("div", { className: cn(defaultClasses.grid, classNames.grid), children: visibleButtons.map((btn) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: cn(defaultClasses.button, classNames.button),
+        onClick: btn.onClick,
+        children: [
+          /* @__PURE__ */ jsx2(
+            "div",
+            {
+              className: cn(defaultClasses.buttonIcon, classNames.buttonIcon),
+              style: {
+                width: buttonSize,
+                height: buttonSize,
+                backgroundColor: btn.bgColor,
+                color: btn.textColor
+              },
+              children: btn.icon
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "div",
+            {
+              className: cn(defaultClasses.buttonLabel, classNames.buttonLabel),
+              style: { color: cssVar(CSS_VARS_UI.buttonLabelColor, CSS_VAR_UI_DEFAULTS[CSS_VARS_UI.buttonLabelColor]) },
+              children: btn.label
+            }
+          )
+        ]
+      },
+      btn.id
+    )) })
+  ] });
+}
+
+// src/ShareSheetDrawer.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var 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: ""
+};
+function cssVar2(name, fallback) {
+  return `var(${name}, ${fallback})`;
+}
+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
+}) {
+  const [internalOpen, setInternalOpen] = useState3(false);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : internalOpen;
+  const setOpen = isControlled ? (value) => controlledOnOpenChange?.(value) : setInternalOpen;
+  return /* @__PURE__ */ jsxs2(Drawer.Root, { open, onOpenChange: setOpen, shouldScaleBackground: true, children: [
+    /* @__PURE__ */ jsx3(Drawer.Trigger, { asChild: true, children: /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: cn(
+          defaultDrawerClasses.trigger,
+          classNames.trigger,
+          disabled ? "pointer-events-none opacity-50" : ""
+        ),
+        children
+      }
+    ) }),
+    /* @__PURE__ */ jsxs2(Drawer.Portal, { children: [
+      /* @__PURE__ */ jsx3(
+        Drawer.Overlay,
+        {
+          className: cn(defaultDrawerClasses.overlay, classNames.overlay),
+          style: {
+            backgroundColor: cssVar2(CSS_VARS_UI.overlayBg, CSS_VAR_UI_DEFAULTS[CSS_VARS_UI.overlayBg])
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs2(
+        Drawer.Content,
+        {
+          className: cn(defaultDrawerClasses.drawer, classNames.drawer),
+          style: {
+            backgroundColor: cssVar2(CSS_VARS_UI.drawerBg, CSS_VAR_UI_DEFAULTS[CSS_VARS_UI.drawerBg]),
+            borderColor: cssVar2(CSS_VARS_UI.drawerBorder, CSS_VAR_UI_DEFAULTS[CSS_VARS_UI.drawerBorder])
+          },
+          children: [
+            /* @__PURE__ */ jsx3(Drawer.Title, { className: "sr-only", children: title }),
+            /* @__PURE__ */ jsxs2(
+              "div",
+              {
+                className: cn(defaultDrawerClasses.drawerInner, classNames.drawerInner),
+                style: {
+                  backgroundColor: cssVar2(CSS_VARS_UI.drawerBg, CSS_VAR_UI_DEFAULTS[CSS_VARS_UI.drawerBg])
+                },
+                children: [
+                  /* @__PURE__ */ jsx3(
+                    "div",
+                    {
+                      className: cn(defaultDrawerClasses.handle, classNames.handle),
+                      style: {
+                        backgroundColor: cssVar2(CSS_VARS_UI.handleBg, CSS_VAR_UI_DEFAULTS[CSS_VARS_UI.handleBg])
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx3(
+                    ShareSheetContent,
+                    {
+                      title,
+                      shareUrl,
+                      shareText,
+                      preview,
+                      downloadUrl,
+                      downloadFilename,
+                      className,
+                      classNames,
+                      buttonSize,
+                      iconSize,
+                      onNativeShare: () => {
+                        onNativeShare?.();
+                        setOpen(false);
+                      },
+                      onCopy,
+                      onDownload,
+                      hide,
+                      show,
+                      labels,
+                      icons
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+var ShareMenuDrawer = ShareSheetDrawer;
+export {
+  CSS_VARS,
+  CSS_VARS_UI,
+  CSS_VAR_DEFAULTS,
+  CSS_VAR_UI_DEFAULTS,
+  PLATFORM_COLORS,
+  PLATFORM_CSS_VARS,
+  ShareMenuDrawer,
+  ShareSheetDrawer
+};
+//# sourceMappingURL=drawer.mjs.map