@sudobility/building_blocks 0.0.46 → 0.0.48

package/dist/components/breadcrumbs/app-breadcrumbs.d.ts

@@ -19,34 +19,7 @@ export interface AppBreadcrumbsProps extends VariantProps<typeof breadcrumbConta
     contentClassName?: string;
 }
 /**
- * AppBreadcrumbs - Breadcrumb navigation with social share and "Talk to Founder" button.
- *
- * Features:
- * - Breadcrumb trail with links
- * - Social share buttons on the right
- * - Optional "Talk to Founder" meeting button
- * - Always renders at max-w-7xl width
- * - Dark mode support
- *
- * @example
- * ```tsx
- * <AppBreadcrumbs
- *   items={[
- *     { label: 'Home', href: '/' },
- *     { label: 'Products', href: '/products' },
- *     { label: 'Widget', current: true },
- *   ]}
- *   shareConfig={{
- *     title: 'Check out this widget',
- *     description: 'Amazing widget for your needs',
- *     hashtags: ['widget', 'product'],
- *   }}
- *   talkToFounder={{
- *     meetingUrl: 'https://calendly.com/founder/30min',
- *     buttonText: 'Book a call',
- *   }}
- * />
- * ```
+ * AppBreadcrumbs - Self-contained breadcrumb navigation with share and "Talk to Founder" button.
  */
 export declare const AppBreadcrumbs: React.FC<AppBreadcrumbsProps>;
 export default AppBreadcrumbs;

package/dist/index.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import React, { useState, useRef, useMemo, useCallback, useEffect } from "react";
-import { TopbarProvider, Topbar, TopbarLeft, TopbarNavigation, TopbarLogo, Logo, TopbarCenter, TopbarRight, TopbarActions, TopbarMobileContent, BreadcrumbSection, Footer, FooterCompact, FooterCompactLeft, FooterVersion, FooterCopyright, FooterCompactRight, FooterGrid, FooterLinkSection, FooterLink, FooterBottom, FooterBrand, FooterSocialLinks, LayoutProvider, Label, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, MasterListItem, Section, MasterDetailLayout } from "@sudobility/components";
+import { TopbarProvider, Topbar, TopbarLeft, TopbarNavigation, TopbarLogo, Logo, TopbarCenter, TopbarRight, TopbarActions, TopbarMobileContent, Footer, FooterCompact, FooterCompactLeft, FooterVersion, FooterCopyright, FooterCompactRight, FooterGrid, FooterLinkSection, FooterLink, FooterBottom, FooterBrand, FooterSocialLinks, LayoutProvider, Label, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, MasterListItem, Section, MasterDetailLayout } from "@sudobility/components";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { ChevronDownIcon, CalendarDaysIcon, PaintBrushIcon, LanguageIcon, ChevronRightIcon, EnvelopeIcon, DocumentTextIcon, CogIcon, HomeIcon } from "@heroicons/react/24/outline";
@@ -437,7 +437,171 @@ const breadcrumbContainerVariants = cva("border-b", {
     variant: "default"
   }
 });
-const TalkToFounderButton = ({ config }) => {
+const createShareUrl = {
+  twitter: (url, text, hashtags) => {
+    const hashtagStr = hashtags.length > 0 ? `&hashtags=${hashtags.join(",")}` : "";
+    return `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(text)}${hashtagStr}`;
+  },
+  facebook: (url) => {
+    return `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`;
+  },
+  linkedin: (url) => {
+    return `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`;
+  },
+  reddit: (url, title) => {
+    return `https://reddit.com/submit?url=${encodeURIComponent(url)}&title=${encodeURIComponent(title)}`;
+  },
+  telegram: (url, text) => {
+    return `https://t.me/share/url?url=${encodeURIComponent(url)}&text=${encodeURIComponent(text)}`;
+  },
+  email: (url, title, description) => {
+    return `mailto:?subject=${encodeURIComponent(title)}&body=${encodeURIComponent(description + "\n\n" + url)}`;
+  }
+};
+const ShareDropdown = ({
+  shareConfig
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [shareUrl, setShareUrl] = useState("");
+  const [isPreparingShare, setIsPreparingShare] = useState(false);
+  const [showCopiedFeedback, setShowCopiedFeedback] = useState(false);
+  React.useEffect(() => {
+    const onBeforeShare = shareConfig.onBeforeShare;
+    if (onBeforeShare && !shareUrl) {
+      const prepareUrl = async () => {
+        setIsPreparingShare(true);
+        try {
+          const baseUrl = typeof window !== "undefined" ? window.location.href : "";
+          const modifiedUrl = await onBeforeShare(baseUrl);
+          setShareUrl(modifiedUrl);
+        } catch {
+          const baseUrl = typeof window !== "undefined" ? window.location.href : "";
+          setShareUrl(baseUrl);
+        } finally {
+          setIsPreparingShare(false);
+        }
+      };
+      prepareUrl();
+    }
+  }, [shareConfig, shareUrl]);
+  const url = shareUrl || (typeof window !== "undefined" ? window.location.href : "");
+  const copyToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(url);
+      setShowCopiedFeedback(true);
+      setTimeout(() => {
+        setShowCopiedFeedback(false);
+        setIsOpen(false);
+      }, 1500);
+    } catch {
+    }
+  };
+  const handleSocialShare = (platformUrl) => {
+    window.open(
+      platformUrl,
+      "_blank",
+      "noopener,noreferrer,width=600,height=400"
+    );
+    setIsOpen(false);
+  };
+  const sharePlatforms = [
+    {
+      name: "Twitter",
+      url: createShareUrl.twitter(url, shareConfig.title, shareConfig.hashtags),
+      color: "text-blue-400"
+    },
+    {
+      name: "Facebook",
+      url: createShareUrl.facebook(url),
+      color: "text-blue-600"
+    },
+    {
+      name: "LinkedIn",
+      url: createShareUrl.linkedin(url),
+      color: "text-blue-700"
+    },
+    {
+      name: "Reddit",
+      url: createShareUrl.reddit(url, shareConfig.title),
+      color: "text-orange-600"
+    },
+    {
+      name: "Telegram",
+      url: createShareUrl.telegram(url, shareConfig.title),
+      color: "text-blue-500"
+    },
+    {
+      name: "Email",
+      url: createShareUrl.email(
+        url,
+        shareConfig.title,
+        shareConfig.description
+      ),
+      color: "text-gray-600"
+    }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setIsOpen(!isOpen),
+        disabled: isPreparingShare,
+        className: "flex items-center justify-center w-8 h-8 bg-blue-50 hover:bg-blue-100 dark:bg-blue-900/30 dark:hover:bg-blue-900/50 text-blue-600 dark:text-blue-400 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+        title: "Share this page",
+        children: isPreparingShare ? /* @__PURE__ */ jsx("div", { className: "w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" }) : /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "w-4 h-4",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"
+              }
+            )
+          }
+        )
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "fixed inset-0 z-[999998]",
+          onClick: () => setIsOpen(false)
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "absolute right-0 top-10 z-[999999] w-40 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 py-1", children: [
+        sharePlatforms.map((platform) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => handleSocialShare(platform.url),
+            className: "w-full flex items-center px-3 py-1.5 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition-colors",
+            children: /* @__PURE__ */ jsx("span", { className: `text-sm ${platform.color}`, children: platform.name })
+          },
+          platform.name
+        )),
+        /* @__PURE__ */ jsx("div", { className: "border-t border-gray-200 dark:border-gray-700 my-1" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: copyToClipboard,
+            className: "w-full flex items-center px-3 py-1.5 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition-colors",
+            children: /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: showCopiedFeedback ? "Copied!" : "Copy Link" })
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+const TalkToFounderButton = ({
+  config
+}) => {
   const IconComponent = config.icon || CalendarDaysIcon;
   const buttonText = config.buttonText || "Talk to Founder";
   return /* @__PURE__ */ jsxs(
@@ -447,14 +611,13 @@ const TalkToFounderButton = ({ config }) => {
       target: "_blank",
       rel: "noopener noreferrer",
       className: cn(
-        "inline-flex items-center gap-2 px-3 py-1.5",
+        "inline-flex items-center gap-1.5 px-2.5 h-8",
         "text-sm font-medium",
         "text-blue-600 dark:text-blue-400",
         "hover:text-blue-700 dark:hover:text-blue-300",
-        "bg-blue-50 dark:bg-blue-900/20",
-        "hover:bg-blue-100 dark:hover:bg-blue-900/30",
-        "rounded-full",
-        "border border-blue-200 dark:border-blue-800",
+        "bg-blue-50 dark:bg-blue-900/30",
+        "hover:bg-blue-100 dark:hover:bg-blue-900/50",
+        "rounded-lg",
         "transition-colors"
       ),
       children: [
@@ -475,9 +638,22 @@ const AppBreadcrumbs = ({
   if (!items || items.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx("div", { className: cn(breadcrumbContainerVariants({ variant }), className), children: /* @__PURE__ */ jsx("div", { className: cn("max-w-7xl mx-auto px-4 py-3", contentClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx(BreadcrumbSection, { items, shareConfig }) }),
-    talkToFounder && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 flex-shrink-0", children: /* @__PURE__ */ jsx(TalkToFounderButton, { config: talkToFounder }) })
+  return /* @__PURE__ */ jsx("div", { className: cn(breadcrumbContainerVariants({ variant }), className), children: /* @__PURE__ */ jsx("div", { className: cn("max-w-7xl mx-auto px-4 py-2", contentClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx("ol", { className: "flex items-center text-sm space-x-2", children: items.map((item, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      /* @__PURE__ */ jsx("li", { children: item.current || !item.href ? /* @__PURE__ */ jsx("span", { className: "text-gray-700 dark:text-gray-300", children: item.label }) : /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: item.href,
+          className: "text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 transition-colors",
+          children: item.label
+        }
+      ) }),
+      index < items.length - 1 && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("span", { className: "text-gray-400 dark:text-gray-500", children: "/" }) })
+    ] }, index)) }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      talkToFounder && /* @__PURE__ */ jsx(TalkToFounderButton, { config: talkToFounder }),
+      shareConfig && /* @__PURE__ */ jsx(ShareDropdown, { shareConfig })
+    ] })
   ] }) }) });
 };
 const DefaultLinkComponent$1 = ({