@fluid-app/portal-sdk 0.1.208 → 0.1.210

package/dist/QuickShareWidget-BdAgexWk.cjs

@@ -0,0 +1,583 @@
+const require_chunk = require("./chunk-9hOWP6kD.cjs");
+const require_registries = require("./registries-CpUM406S.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+let qrcode_react = require("qrcode.react");
+//#region ../widgets/src/widgets/QuickShareWidget.tsx
+var QuickShareWidget_exports = /* @__PURE__ */ require_chunk.__exportAll({
+	QuickShareWidget: () => QuickShareWidget,
+	quickShareWidgetPropertySchema: () => quickShareWidgetPropertySchema
+});
+const RESOURCE_TYPE_MAP = {
+	Product: {
+		label: "Product",
+		icon: lucide_react.Package
+	},
+	Page: {
+		label: "Page",
+		icon: lucide_react.FileText
+	},
+	EnrollmentPack: {
+		label: "Enrollment",
+		icon: lucide_react.Ticket
+	},
+	Medium: {
+		label: "Media",
+		icon: lucide_react.Image
+	},
+	Library: {
+		label: "Library",
+		icon: lucide_react.BookOpen
+	}
+};
+const getResourceDescriptor = (resource) => {
+	const rawType = resource?.type || resource?.shareableType || "";
+	if (!rawType) return null;
+	return RESOURCE_TYPE_MAP[rawType] ?? {
+		label: rawType,
+		icon: lucide_react.CircleDot
+	};
+};
+const splitUrl = (url) => {
+	try {
+		const parsed = new URL(url);
+		return {
+			prefix: `${parsed.protocol}//${parsed.host}`,
+			path: `${parsed.pathname}${parsed.search}${parsed.hash}`
+		};
+	} catch {
+		return {
+			prefix: "",
+			path: url
+		};
+	}
+};
+const CURRENCY_FIELD_KEYS = [
+	"currency",
+	"currency_code",
+	"currencyCode",
+	"currencyIso",
+	"currency_iso"
+];
+const getResourceCurrency = (resource) => {
+	if (!resource) return null;
+	for (const key of CURRENCY_FIELD_KEYS) {
+		const value = resource[key];
+		if (typeof value === "string" && /^[A-Z]{3}$/i.test(value)) return value.toUpperCase();
+	}
+	return null;
+};
+const formatNumericPrice = (price, resource) => {
+	const currency = getResourceCurrency(resource);
+	if (!currency) return String(price);
+	try {
+		return price.toLocaleString(void 0, {
+			style: "currency",
+			currency
+		});
+	} catch {
+		return String(price);
+	}
+};
+const getDisplayPrice = (resource) => {
+	if (!resource) return null;
+	if (typeof resource.display_price === "string" && resource.display_price) return resource.display_price;
+	if (resource.price != null) return typeof resource.price === "number" ? formatNumericPrice(resource.price, resource) : String(resource.price);
+	return null;
+};
+const getColorCssValue = (color) => color === "transparent" ? "transparent" : `var(--color-${color})`;
+const colorMix = (color, amount) => color === "transparent" ? "transparent" : `color-mix(in oklch, ${getColorCssValue(color)} ${amount}%, transparent)`;
+const insetBorder = (color, amount) => `inset 0 0 0 1px ${colorMix(color, amount)}`;
+function QuickShareWidget({ shareableResource, titleEnabled = true, titleText = "", titleFontSize = "2xl", titleColor = "background", textColor = "background", accentColor = "primary", padding = 6, borderRadius = "xl", borderWidth = "none", borderColor = "muted", overlayEnabled = true, overlayType = "gradient", overlayIntensity = 70, showBuyButton = false, showResourceType = true, showShareActions = true, showDomainPrefix = true, className, style, ...props }) {
+	const [copyState, setCopyState] = (0, react.useState)("idle");
+	const [imageFailed, setImageFailed] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		if (copyState !== "copied") return;
+		const id = window.setTimeout(() => setCopyState("idle"), 1600);
+		return () => window.clearTimeout(id);
+	}, [copyState]);
+	const backgroundImageUrl = shareableResource?.image_url || shareableResource?.imageUrl || "";
+	(0, react.useEffect)(() => {
+		setImageFailed(false);
+	}, [backgroundImageUrl]);
+	const showHeroImage = Boolean(backgroundImageUrl) && !imageFailed;
+	const shareLink = shareableResource?.share_link || "";
+	const hasShareLink = !!shareLink;
+	const displayTitle = titleText || shareableResource?.title || "Select content to share";
+	const resourceDescriptor = getResourceDescriptor(shareableResource);
+	const displayPrice = getDisplayPrice(shareableResource);
+	const isProduct = shareableResource?.type === "Product" || shareableResource?.shareableType === "Product";
+	const shouldShowBuyButton = showBuyButton && isProduct;
+	const parsedOverlayIntensity = Number(String(overlayIntensity).replace("%", ""));
+	const overlayOpacity = (Number.isFinite(parsedOverlayIntensity) ? Math.min(100, Math.max(0, parsedOverlayIntensity)) : 70) / 100;
+	const editorialGradient = overlayEnabled && showHeroImage ? { background: `linear-gradient(to top, color-mix(in oklch, var(--color-foreground) ${Math.round(overlayOpacity * 100)}%, transparent), color-mix(in oklch, var(--color-foreground) ${Math.round(overlayOpacity * 55)}%, transparent) 45%, transparent 85%)` } : void 0;
+	const handleCopy = async () => {
+		if (!hasShareLink) return;
+		try {
+			await navigator.clipboard.writeText(shareLink);
+			setCopyState("copied");
+		} catch (error) {
+			console.error("Failed to copy to clipboard:", error);
+		}
+	};
+	const handleNativeShare = async () => {
+		if (!hasShareLink) return;
+		if (typeof navigator.share === "function") try {
+			await navigator.share({
+				title: displayTitle,
+				url: shareLink
+			});
+		} catch {}
+		else await handleCopy();
+	};
+	const { prefix, path } = hasShareLink ? splitUrl(shareLink) : {
+		prefix: "",
+		path: ""
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `relative isolate overflow-hidden rounded-${borderRadius} ${require_registries.borderWidthClasses[borderWidth]} ${borderWidth !== "none" ? require_registries.borderColorClasses[borderColor] : ""} bg-muted text-${textColor} ${className ?? ""}`,
+		style: {
+			boxShadow: `0 1px 2px color-mix(in oklch, var(--color-foreground) 4%, transparent), 0 20px 40px -20px color-mix(in oklch, var(--color-foreground) 25%, transparent)`,
+			...style
+		},
+		...props,
+		children: [showHeroImage ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "absolute inset-0",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+				src: backgroundImageUrl,
+				alt: "",
+				loading: "lazy",
+				onError: () => setImageFailed(true),
+				className: "h-full w-full object-cover"
+			}), overlayEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "pointer-events-none absolute inset-0",
+					style: editorialGradient
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "pointer-events-none absolute inset-0",
+					style: { background: `linear-gradient(to top right, color-mix(in oklch, var(--color-foreground) ${Math.round(overlayOpacity * 65)}%, transparent), color-mix(in oklch, var(--color-foreground) ${Math.round(overlayOpacity * 25)}%, transparent) 35%, transparent 65%)` }
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "pointer-events-none absolute inset-0",
+					style: { background: `radial-gradient(ellipse 70% 55% at 15% 100%, color-mix(in oklch, var(--color-foreground) ${Math.round(overlayOpacity * 45)}%, transparent), transparent 70%)` }
+				}),
+				overlayType === "solid" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "bg-foreground pointer-events-none absolute inset-0",
+					style: { opacity: overlayOpacity * .35 }
+				})
+			] })]
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmptyHero, {
+			accentColor,
+			textColor
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: `relative flex min-h-[440px] flex-col p-${padding}`,
+			children: [
+				showResourceType && resourceDescriptor || displayPrice ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-start justify-between gap-3",
+					children: [showResourceType && resourceDescriptor ? (() => {
+						const { icon: ResourceIcon, label } = resourceDescriptor;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: `inline-flex items-center gap-1.5 rounded-${borderRadius} bg-${textColor}/15 px-2.5 py-1 text-[10px] font-bold tracking-[0.18em] uppercase text-${textColor} backdrop-blur-sm`,
+							style: { boxShadow: insetBorder(textColor, 15) },
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResourceIcon, { className: "size-3" }), label]
+						});
+					})() : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {}), displayPrice && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: `inline-flex items-center rounded-${borderRadius} bg-${accentColor} px-2.5 py-1 text-[11px] font-bold tabular-nums text-${accentColor}-foreground`,
+						style: { boxShadow: `0 4px 14px -4px color-mix(in oklch, var(--color-foreground) 30%, transparent)` },
+						children: displayPrice
+					})]
+				}) : null,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "mt-4 flex flex-1 flex-col justify-end",
+					children: titleEnabled && displayTitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+						className: `text-${titleFontSize} font-header leading-[1.12] font-bold tracking-[-0.015em] text-${titleColor}`,
+						style: { textShadow: showHeroImage ? `0 2px 12px color-mix(in oklch, var(--color-foreground) 40%, transparent)` : void 0 },
+						children: displayTitle
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "mt-6 flex flex-col gap-3",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-stretch gap-3",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: `group relative shrink-0 rounded-${borderRadius} bg-white p-2.5 transition-transform duration-300 hover:scale-[1.02]`,
+							style: { boxShadow: `0 4px 16px -4px color-mix(in oklch, var(--color-foreground) 25%, transparent), inset 0 0 0 1px rgba(255,255,255,0.4)` },
+							"aria-label": "QR code for share link",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(qrcode_react.QRCodeSVG, {
+								value: shareLink || "https://example.com",
+								size: 96,
+								level: "H",
+								bgColor: "#ffffff",
+								fgColor: "#0f172a"
+							})
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex min-w-0 flex-1 flex-col gap-2",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: `text-[10px] font-bold tracking-[0.16em] uppercase text-${textColor}/70`,
+									children: "Share link"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+									type: "button",
+									onClick: handleCopy,
+									disabled: !hasShareLink,
+									"aria-label": copyState === "copied" ? "Copied to clipboard" : "Copy link",
+									className: `group flex items-center justify-between gap-2 rounded-${borderRadius} bg-${textColor}/10 px-3 py-2 text-left text-[12px] backdrop-blur-sm transition-all duration-300 hover:bg-${textColor}/15 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--quick-share-focus-ring)] disabled:opacity-50 ${copyState === "copied" ? `bg-${accentColor}/20` : ""}`,
+									style: {
+										"--quick-share-focus-ring": colorMix(accentColor, 40),
+										boxShadow: insetBorder(textColor, 15)
+									},
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: `min-w-0 flex-1 truncate font-medium tabular-nums text-${textColor}`,
+										children: hasShareLink ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [showDomainPrefix && prefix && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: `opacity-60`,
+											children: prefix
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "font-semibold",
+											children: path
+										})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: `opacity-60`,
+											children: "No link yet"
+										})
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: `flex size-7 shrink-0 items-center justify-center rounded-full transition-all duration-300 ${copyState === "copied" ? `bg-${accentColor} text-${accentColor}-foreground scale-110` : `bg-${textColor}/15 text-${textColor}`}`,
+										children: copyState === "copied" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "size-3.5" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Copy, { className: "size-3.5" })
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "sr-only",
+									"aria-live": "polite",
+									role: "status",
+									children: copyState === "copied" ? "Copied to clipboard" : ""
+								}),
+								showShareActions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareActionRow, {
+									shareLink,
+									displayTitle,
+									accentColor,
+									textColor,
+									borderRadius,
+									onNative: handleNativeShare
+								})
+							]
+						})]
+					}), shouldShowBuyButton && (hasShareLink ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+						href: shareLink,
+						target: "_blank",
+						rel: "noopener noreferrer",
+						className: `flex w-full items-center justify-center gap-2 rounded-${borderRadius} bg-${accentColor} px-4 py-3 text-[13px] font-bold text-${accentColor}-foreground transition-transform hover:scale-[1.01]`,
+						style: { boxShadow: `0 8px 22px -8px color-mix(in oklch, var(--color-foreground) 35%, transparent)` },
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ShoppingCart, { className: "size-4" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Buy now" })]
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						disabled: true,
+						className: `flex w-full cursor-not-allowed items-center justify-center gap-2 rounded-${borderRadius} bg-${accentColor} px-4 py-3 text-[13px] font-bold text-${accentColor}-foreground opacity-50`,
+						style: { boxShadow: `0 8px 22px -8px color-mix(in oklch, var(--color-foreground) 35%, transparent)` },
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ShoppingCart, { className: "size-4" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Buy now" })]
+					}))]
+				})
+			]
+		})]
+	});
+}
+function ShareActionRow({ shareLink, displayTitle, accentColor, textColor, borderRadius, onNative }) {
+	const disabled = !shareLink;
+	const [canNativeShare, setCanNativeShare] = (0, react.useState)(false);
+	const [canSendSms, setCanSendSms] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		setCanNativeShare(typeof navigator !== "undefined" && typeof navigator.share === "function");
+		setCanSendSms(typeof navigator !== "undefined" && (/Android|iPhone|iPad|iPod/i.test(navigator.userAgent) || /Macintosh/i.test(navigator.userAgent) && navigator.maxTouchPoints > 1));
+	}, []);
+	const emailHref = shareLink ? `mailto:?subject=${encodeURIComponent(displayTitle)}&body=${encodeURIComponent(shareLink)}` : void 0;
+	const smsHref = shareLink ? `sms:?body=${encodeURIComponent(`${displayTitle} — ${shareLink}`)}` : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-center gap-1.5",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareActionButton, {
+				icon: lucide_react.Mail,
+				label: "Email",
+				href: emailHref,
+				disabled,
+				accentColor,
+				textColor,
+				borderRadius
+			}),
+			canSendSms && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareActionButton, {
+				icon: lucide_react.MessageCircle,
+				label: "Text",
+				href: smsHref,
+				disabled,
+				accentColor,
+				textColor,
+				borderRadius
+			}),
+			canNativeShare && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareActionButton, {
+				icon: lucide_react.Share2,
+				label: "Share",
+				onClick: onNative,
+				disabled,
+				accentColor,
+				textColor,
+				borderRadius
+			})
+		]
+	});
+}
+function ShareActionButton({ icon: Icon, label, href, onClick, disabled, accentColor, textColor, borderRadius }) {
+	const className = `group inline-flex items-center gap-1.5 rounded-${borderRadius} bg-${textColor}/10 px-2.5 py-1.5 text-[11px] font-semibold text-${textColor} backdrop-blur-sm transition-all duration-200 hover:-translate-y-0.5 hover:bg-${accentColor} hover:text-${accentColor}-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--quick-share-focus-ring)] disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:translate-y-0`;
+	const style = {
+		"--quick-share-focus-ring": colorMix(accentColor, 40),
+		boxShadow: insetBorder(textColor, 15)
+	};
+	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "size-3" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label })] });
+	if (href && !disabled) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		href,
+		className,
+		style,
+		"aria-label": label,
+		children: content
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		onClick,
+		disabled,
+		className,
+		style,
+		"aria-label": label,
+		children: content
+	});
+}
+function EmptyHero({ accentColor, textColor }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `bg-muted absolute inset-0`,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "absolute inset-0",
+			style: { background: `radial-gradient(circle at 30% 20%, ${colorMix(accentColor, 15)}, transparent 60%), radial-gradient(circle at 80% 90%, ${colorMix(accentColor, 10)}, transparent 55%)` }
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "absolute inset-0 flex flex-col items-center justify-center gap-3",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: `flex size-14 items-center justify-center rounded-2xl bg-${textColor}/5`,
+				style: { boxShadow: insetBorder(textColor, 10) },
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Image, { className: `size-6 text-${textColor}/40` })
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: `text-[10px] font-bold tracking-[0.2em] uppercase text-${textColor}/45`,
+				children: "Nothing selected"
+			})]
+		})]
+	});
+}
+const quickShareWidgetPropertySchema = {
+	widgetType: "QuickShareWidget",
+	displayName: "Quick Share Widget",
+	tabsConfig: [{
+		id: "styling",
+		label: "Styling"
+	}],
+	fields: [
+		{
+			key: "shareableResource",
+			label: "Shareable Content",
+			type: "resource",
+			description: "Select the content to generate a share link for",
+			allowedTypes: [
+				"Product",
+				"Page",
+				"EnrollmentPack",
+				"Medium",
+				"Library"
+			],
+			tab: "styling",
+			group: "Content"
+		},
+		{
+			key: "titleEnabled",
+			label: "Show Title",
+			type: "boolean",
+			description: "Display a title on the hero",
+			defaultValue: true,
+			tab: "styling",
+			group: "Title"
+		},
+		{
+			key: "titleText",
+			label: "Title",
+			type: "text",
+			description: "Custom title text (defaults to the resource title if empty)",
+			defaultValue: "",
+			tab: "styling",
+			group: "Title",
+			requiresKeyToBeTrue: "titleEnabled"
+		},
+		require_registries.getFontSizeField({
+			key: "titleFontSize",
+			label: "Title Font Size",
+			description: "Font size for the title",
+			defaultValue: "2xl",
+			tab: "styling",
+			group: "Title",
+			requiresKeyToBeTrue: "titleEnabled"
+		}),
+		require_registries.getColorField({
+			key: "titleColor",
+			label: "Title Color",
+			description: "Color for the title",
+			defaultValue: "background",
+			tab: "styling",
+			group: "Title",
+			requiresKeyToBeTrue: "titleEnabled"
+		}),
+		{
+			key: "showResourceType",
+			label: "Show Resource Type Pill",
+			type: "boolean",
+			description: "Display a small type eyebrow chip (Product · Page · Media…)",
+			defaultValue: true,
+			tab: "styling",
+			group: "Share Panel"
+		},
+		{
+			key: "showShareActions",
+			label: "Show Share Actions",
+			type: "boolean",
+			description: "Show Email, Text, and native Share buttons under the link chip",
+			defaultValue: true,
+			tab: "styling",
+			group: "Share Panel"
+		},
+		{
+			key: "showDomainPrefix",
+			label: "Show Domain Prefix",
+			type: "boolean",
+			description: "Include the domain in the link chip (dimmed) with the path emphasized",
+			defaultValue: true,
+			tab: "styling",
+			group: "Share Panel"
+		},
+		{
+			key: "showBuyButton",
+			label: "Show Buy Button",
+			type: "boolean",
+			description: "Display the Buy button (only shown for Product resources)",
+			defaultValue: false,
+			tab: "styling",
+			group: "Share Panel"
+		},
+		require_registries.getColorField({
+			key: "textColor",
+			label: "Text Color",
+			description: "Default text color for widget content (over the hero)",
+			defaultValue: "background",
+			tab: "styling",
+			group: "Design"
+		}),
+		require_registries.getColorField({
+			key: "accentColor",
+			label: "Accent Color",
+			description: "Drives the price chip, primary button, and copy-success flash",
+			defaultValue: "primary",
+			tab: "styling",
+			group: "Design"
+		}),
+		{
+			key: "overlayEnabled",
+			label: "Enable Overlay",
+			type: "boolean",
+			description: "Add editorial gradient stack for legibility over the hero",
+			defaultValue: true,
+			tab: "styling",
+			group: "Design"
+		},
+		{
+			key: "overlayType",
+			label: "Overlay Type",
+			type: "buttonGroup",
+			description: "Gradient only (recommended) or gradient + solid wash (heavier)",
+			defaultValue: "gradient",
+			options: [{
+				label: "Gradient",
+				value: "gradient"
+			}, {
+				label: "Solid",
+				value: "solid"
+			}],
+			tab: "styling",
+			group: "Design",
+			requiresKeyToBeTrue: "overlayEnabled"
+		},
+		{
+			key: "overlayIntensity",
+			label: "Overlay Intensity",
+			type: "slider",
+			description: "Opacity of the overlay (0-100)",
+			min: 0,
+			max: 100,
+			step: 5,
+			defaultValue: 70,
+			unit: "%",
+			tab: "styling",
+			group: "Design",
+			requiresKeyToBeTrue: "overlayEnabled"
+		},
+		{
+			key: "separator",
+			type: "separator",
+			label: "Separator",
+			tab: "styling",
+			group: "Design"
+		},
+		require_registries.getPaddingField({
+			key: "padding",
+			label: "Padding",
+			description: "Padding around the widget content",
+			defaultValue: 6,
+			tab: "styling",
+			group: "Design"
+		}),
+		require_registries.getBorderRadiusField({
+			key: "borderRadius",
+			label: "Border Radius",
+			description: "Border radius for the widget container",
+			defaultValue: "xl",
+			tab: "styling",
+			group: "Design"
+		}),
+		require_registries.getBorderWidthField({
+			key: "borderWidth",
+			label: "Border Width",
+			description: "Border width for the widget container",
+			defaultValue: "none",
+			tab: "styling",
+			group: "Design"
+		}),
+		require_registries.getBorderColorField({
+			key: "borderColor",
+			label: "Border Color",
+			description: "Border color for the widget container",
+			defaultValue: "muted",
+			tab: "styling",
+			group: "Design"
+		})
+	]
+};
+//#endregion
+Object.defineProperty(exports, "QuickShareWidget", {
+	enumerable: true,
+	get: function() {
+		return QuickShareWidget;
+	}
+});
+Object.defineProperty(exports, "QuickShareWidget_exports", {
+	enumerable: true,
+	get: function() {
+		return QuickShareWidget_exports;
+	}
+});
+Object.defineProperty(exports, "quickShareWidgetPropertySchema", {
+	enumerable: true,
+	get: function() {
+		return quickShareWidgetPropertySchema;
+	}
+});
+
+//# sourceMappingURL=QuickShareWidget-BdAgexWk.cjs.map