react-sharesheet 1.0.0

package/dist/platforms-DU1DVDFq.d.ts

@@ -0,0 +1,280 @@
+import { ReactNode } from 'react';
+
+/** CSS variable names for UI elements (non-platform specific) */
+declare const CSS_VARS_UI: {
+    readonly overlayBg: "--sharesheet-overlay-bg";
+    readonly drawerBg: "--sharesheet-drawer-bg";
+    readonly drawerBorder: "--sharesheet-drawer-border";
+    readonly handleBg: "--sharesheet-handle-bg";
+    readonly titleColor: "--sharesheet-title-color";
+    readonly subtitleColor: "--sharesheet-subtitle-color";
+    readonly buttonLabelColor: "--sharesheet-button-label-color";
+    readonly previewBg: "--sharesheet-preview-bg";
+    readonly previewShimmer: "--sharesheet-preview-shimmer";
+};
+/** Default values for UI CSS variables */
+declare const CSS_VAR_UI_DEFAULTS: {
+    readonly "--sharesheet-overlay-bg": "rgba(0, 0, 0, 0.7)";
+    readonly "--sharesheet-drawer-bg": "#09090b";
+    readonly "--sharesheet-drawer-border": "#27272a";
+    readonly "--sharesheet-handle-bg": "#27272a";
+    readonly "--sharesheet-title-color": "#ffffff";
+    readonly "--sharesheet-subtitle-color": "#a1a1aa";
+    readonly "--sharesheet-button-label-color": "#ffffff";
+    readonly "--sharesheet-preview-bg": "rgba(255, 255, 255, 0.05)";
+    readonly "--sharesheet-preview-shimmer": "rgba(255, 255, 255, 0.1)";
+};
+/** Available share options */
+type ShareOption = "native" | "copy" | "download" | "whatsapp" | "telegram" | "instagram" | "facebook" | "snapchat" | "sms" | "email" | "linkedin" | "reddit" | "x" | "tiktok" | "threads";
+/** Class name overrides for ShareSheetContent */
+interface ShareSheetContentClassNames {
+    /** Root container */
+    root?: string;
+    /** Title container */
+    header?: string;
+    /** Main title text */
+    title?: string;
+    /** Subtitle/share text */
+    subtitle?: string;
+    /** Preview container */
+    preview?: string;
+    /** Preview skeleton/loading wrapper */
+    previewSkeleton?: string;
+    /** Preview image element */
+    previewImage?: string;
+    /** Preview video element */
+    previewVideo?: string;
+    /** Preview file/audio container */
+    previewFile?: string;
+    /** Preview file icon */
+    previewFileIcon?: string;
+    /** Preview filename text */
+    previewFilename?: string;
+    /** Preview link container */
+    previewLink?: string;
+    /** Buttons grid container */
+    grid?: string;
+    /** Individual button wrapper */
+    button?: string;
+    /** Button icon container */
+    buttonIcon?: string;
+    /** Button label text */
+    buttonLabel?: string;
+}
+/** Class name overrides for ShareSheetDrawer */
+interface ShareSheetDrawerClassNames extends ShareSheetContentClassNames {
+    /** Drawer overlay */
+    overlay?: string;
+    /** Drawer content panel */
+    drawer?: string;
+    /** Drawer inner content wrapper */
+    drawerInner?: string;
+    /** Drawer handle */
+    handle?: string;
+    /** Trigger wrapper */
+    trigger?: string;
+}
+/** Preview content type */
+type PreviewType = "image" | "video" | "audio" | "file" | "link" | "auto";
+/** Preview configuration */
+interface PreviewConfig {
+    /** URL of the content to preview */
+    url: string;
+    /** Type of content (auto-detected if not provided) */
+    type?: PreviewType;
+    /** Filename to display (for file/audio types) */
+    filename?: string;
+    /** Alt text for images */
+    alt?: string;
+    /** Poster image for videos */
+    poster?: string;
+}
+interface ShareSheetContentProps {
+    /** Title displayed at the top of the sheet */
+    title?: string;
+    /** URL to share */
+    shareUrl: string;
+    /** Text to share alongside the URL */
+    shareText: string;
+    /** Preview of content being shared (string URL or config object) */
+    preview?: string | PreviewConfig | null;
+    /** Optional URL for download functionality */
+    downloadUrl?: string | null;
+    /** Filename for downloaded file */
+    downloadFilename?: string;
+    /** Custom class name for the container (shorthand for classNames.root) */
+    className?: string;
+    /** Override class names for sub-components */
+    classNames?: ShareSheetContentClassNames;
+    /** Button size in pixels */
+    buttonSize?: number;
+    /** Icon size in pixels */
+    iconSize?: number;
+    /** Called when native share is triggered */
+    onNativeShare?: () => void;
+    /** Called when link is copied */
+    onCopy?: () => void;
+    /** Called when download starts */
+    onDownload?: () => void;
+    /** Hide specific share options */
+    hide?: ShareOption[];
+    /** Show only specific share options */
+    show?: ShareOption[];
+    /** Custom labels for buttons */
+    labels?: Partial<Record<ShareOption, string>>;
+    /** Custom icons for buttons */
+    icons?: Partial<Record<ShareOption, ReactNode>>;
+}
+interface ShareSheetDrawerProps extends ShareSheetContentProps {
+    /** Whether the drawer is disabled */
+    disabled?: boolean;
+    /** Trigger element for the drawer */
+    children: React.ReactNode;
+    /** Controlled open state */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Override class names for sub-components */
+    classNames?: ShareSheetDrawerClassNames;
+}
+/** Share button configuration (internal) */
+interface ShareButtonConfig {
+    id: ShareOption;
+    label: string;
+    icon: ReactNode;
+    bgColor: string;
+    textColor?: string;
+    onClick: () => void;
+    condition?: boolean;
+}
+/** Return type of useShareSheet hook */
+interface UseShareSheetReturn {
+    /** Whether the browser supports native share */
+    canNativeShare: boolean;
+    /** Whether the link was recently copied */
+    copied: boolean;
+    /** Whether a download is in progress */
+    downloading: boolean;
+    /** The safe URL (falls back to current page URL) */
+    safeUrl: string;
+    /** Copy the share URL to clipboard */
+    copyLink: () => Promise<void>;
+    /** Trigger native share dialog */
+    nativeShare: () => Promise<void>;
+    /** Download the file from downloadUrl */
+    downloadFile: () => Promise<void>;
+    /** Share to WhatsApp */
+    shareWhatsApp: () => void;
+    /** Share to Telegram */
+    shareTelegram: () => void;
+    /** Share to X (Twitter) */
+    shareX: () => void;
+    /** Share to Facebook */
+    shareFacebook: () => void;
+    /** Open Instagram app */
+    shareInstagram: () => void;
+    /** Open TikTok app */
+    shareTikTok: () => void;
+    /** Open Threads app */
+    shareThreads: () => void;
+    /** Share to Snapchat */
+    shareSnapchat: () => void;
+    /** Share via SMS */
+    shareSMS: () => void;
+    /** Share via Email */
+    shareEmail: () => void;
+    /** Share to LinkedIn */
+    shareLinkedIn: () => void;
+    /** Share to Reddit */
+    shareReddit: () => void;
+}
+/** @deprecated Use CSS_VARS_UI instead */
+declare const CSS_VARS: {
+    readonly overlayBg: "--sharesheet-overlay-bg";
+    readonly drawerBg: "--sharesheet-drawer-bg";
+    readonly drawerBorder: "--sharesheet-drawer-border";
+    readonly handleBg: "--sharesheet-handle-bg";
+    readonly titleColor: "--sharesheet-title-color";
+    readonly subtitleColor: "--sharesheet-subtitle-color";
+    readonly buttonLabelColor: "--sharesheet-button-label-color";
+    readonly previewBg: "--sharesheet-preview-bg";
+    readonly previewShimmer: "--sharesheet-preview-shimmer";
+};
+/** @deprecated Use CSS_VAR_UI_DEFAULTS instead */
+declare const CSS_VAR_DEFAULTS: {
+    readonly "--sharesheet-overlay-bg": "rgba(0, 0, 0, 0.7)";
+    readonly "--sharesheet-drawer-bg": "#09090b";
+    readonly "--sharesheet-drawer-border": "#27272a";
+    readonly "--sharesheet-handle-bg": "#27272a";
+    readonly "--sharesheet-title-color": "#ffffff";
+    readonly "--sharesheet-subtitle-color": "#a1a1aa";
+    readonly "--sharesheet-button-label-color": "#ffffff";
+    readonly "--sharesheet-preview-bg": "rgba(255, 255, 255, 0.05)";
+    readonly "--sharesheet-preview-shimmer": "rgba(255, 255, 255, 0.1)";
+};
+/** @deprecated Use ShareSheetContentClassNames instead */
+type ShareMenuContentClassNames = ShareSheetContentClassNames;
+/** @deprecated Use ShareSheetDrawerClassNames instead */
+type ShareMenuDrawerClassNames = ShareSheetDrawerClassNames;
+/** @deprecated Use ShareSheetContentProps instead */
+type ShareMenuContentProps = ShareSheetContentProps;
+/** @deprecated Use ShareSheetDrawerProps instead */
+type ShareMenuDrawerProps = ShareSheetDrawerProps;
+/** @deprecated Use UseShareSheetReturn instead */
+type UseShareMenuReturn = UseShareSheetReturn;
+
+/** Platform color configuration */
+interface PlatformColor {
+    /** Background color (hex) */
+    bg: string;
+    /** Text/icon color (hex) */
+    text: string;
+}
+/** Platform configuration */
+interface PlatformConfig {
+    /** Platform identifier */
+    id: ShareOption;
+    /** Display label */
+    label: string;
+    /** Colors */
+    colors: PlatformColor;
+    /** Icon component (accepts size prop) */
+    Icon: (props: {
+        size?: number;
+        className?: string;
+    }) => ReactNode;
+    /** CSS variable name for background */
+    cssVar: string;
+}
+/** All platform IDs in default order */
+declare const PLATFORM_IDS: readonly ShareOption[];
+/** Platform colors - hex values for each platform (SOURCE OF TRUTH) */
+declare const PLATFORM_COLORS: Record<ShareOption, PlatformColor>;
+/** Platform labels (SOURCE OF TRUTH) */
+declare const PLATFORM_LABELS: Record<ShareOption, string>;
+/** Platform icons - React components (SOURCE OF TRUTH) */
+declare const PLATFORM_ICONS: Record<ShareOption, (props: {
+    size?: number;
+    className?: string;
+}) => ReactNode>;
+/** CSS variable names for platform backgrounds */
+declare const PLATFORM_CSS_VARS: Record<ShareOption, string>;
+/** Full platform configurations */
+declare const PLATFORMS: Record<ShareOption, PlatformConfig>;
+/** Get platform config by id */
+declare function getPlatform(id: ShareOption): PlatformConfig;
+/** Get all platform configs as array */
+declare function getAllPlatforms(): PlatformConfig[];
+/** Get platform color */
+declare function getPlatformColor(id: ShareOption): PlatformColor;
+/** Get platform icon component */
+declare function getPlatformIcon(id: ShareOption): (props: {
+    size?: number;
+    className?: string;
+}) => ReactNode;
+/** Get platform label */
+declare function getPlatformLabel(id: ShareOption): string;
+/** Generate CSS variable defaults from platform colors */
+declare function generateCssVarDefaults(): Record<string, string>;
+
+export { type PlatformConfig as A, type PlatformColor as B, CSS_VARS_UI as C, type PreviewType as P, type ShareSheetContentProps as S, type UseShareSheetReturn as U, type ShareSheetDrawerProps as a, type ShareSheetContentClassNames as b, type ShareSheetDrawerClassNames as c, type ShareMenuContentProps as d, type ShareMenuDrawerProps as e, type ShareMenuContentClassNames as f, type ShareMenuDrawerClassNames as g, type ShareOption as h, type ShareButtonConfig as i, type UseShareMenuReturn as j, type PreviewConfig as k, CSS_VAR_UI_DEFAULTS as l, CSS_VARS as m, CSS_VAR_DEFAULTS as n, PLATFORMS as o, PLATFORM_IDS as p, PLATFORM_COLORS as q, PLATFORM_ICONS as r, PLATFORM_LABELS as s, PLATFORM_CSS_VARS as t, getPlatform as u, getAllPlatforms as v, getPlatformColor as w, getPlatformIcon as x, getPlatformLabel as y, generateCssVarDefaults as z };

package/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "react-sharesheet",
+  "version": "1.0.0",
+  "description": "A beautiful share sheet component for React with social media integrations",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "homepage": "https://github.com/gwendall/react-sharesheet#readme",
+  "bugs": {
+    "url": "https://github.com/gwendall/react-sharesheet/issues"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./content": {
+      "types": "./dist/content.d.ts",
+      "import": "./dist/content.mjs",
+      "require": "./dist/content.js"
+    },
+    "./drawer": {
+      "types": "./dist/drawer.d.ts",
+      "import": "./dist/drawer.mjs",
+      "require": "./dist/drawer.js"
+    },
+    "./headless": {
+      "types": "./dist/headless.d.ts",
+      "import": "./dist/headless.mjs",
+      "require": "./dist/headless.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "prepack": "npm run clean && npm run build",
+    "prepublishOnly": "npm run clean && npm run build",
+    "publish-patch": "npm version patch && npm publish",
+    "publish-minor": "npm version minor && npm publish",
+    "publish-major": "npm version major && npm publish",
+    "release": "npm publish",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gwendall/react-sharesheet.git"
+  },
+  "keywords": [
+    "share",
+    "sharesheet",
+    "menu",
+    "social",
+    "react",
+    "drawer",
+    "vaul",
+    "tailwind"
+  ],
+  "author": "Gwendall",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.0",
+    "lucide-react": "^0.400.0",
+    "react-icons": "^5.0.0",
+    "tailwind-merge": "^2.2.0",
+    "vaul": "^1.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ]
+}