@stisocial/ui 0.2.1 → 0.3.0

package/dist/site/RelatedPosts/index.d.ts

@@ -0,0 +1,2 @@
+import { RelatedPosts, RelatedPostsProps } from "./RelatedPosts.js";
+export { RelatedPosts, RelatedPostsProps };

package/dist/site/Reveal/Reveal.css

@@ -0,0 +1,39 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Reveal-root-8bbf0 {
+    --sti-reveal-shift: var(--sti-space-6);
+  }
+
+  .sti-Reveal-root-8bbf0[data-state="waiting"] {
+    opacity: 0;
+  }
+
+  .sti-Reveal-root-8bbf0[data-state="waiting"][data-from="up"] {
+    translate: 0 var(--sti-reveal-shift);
+  }
+
+  .sti-Reveal-root-8bbf0[data-state="waiting"][data-from="down"] {
+    translate: 0 calc(var(--sti-reveal-shift) * -1);
+  }
+
+  .sti-Reveal-root-8bbf0[data-state="waiting"][data-from="start"] {
+    translate: calc(var(--sti-reveal-shift) * -1) 0;
+  }
+
+  .sti-Reveal-root-8bbf0[data-state="waiting"][data-from="end"] {
+    translate: var(--sti-reveal-shift) 0;
+  }
+
+  .sti-Reveal-root-8bbf0[data-state="shown"] {
+    transition: opacity var(--sti-duration-slow) var(--sti-ease-standard) var(--sti-reveal-delay, 0s),
+      translate var(--sti-duration-slow) var(--sti-ease-standard) var(--sti-reveal-delay, 0s);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-Reveal-root-8bbf0[data-state] {
+      opacity: 1;
+      transition: none;
+      translate: none;
+    }
+  }
+}

package/dist/site/Reveal/Reveal.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+export interface RevealProps {
+  children: ReactNode;
+  /** Giriş yönü. Varsayılan `up`. */
+  from?: "up" | "down" | "start" | "end" | "fade";
+  /** Gecikme (ms; sıralı girişler için). */
+  delay?: number;
+  /** Kapsayıcı öğe. */
+  as?: "div" | "section" | "li";
+  className?: string;
+  id?: string;
+}
+/**
+ * Görünür olunca yumuşak giriş (kaydırma animasyonu). İçerik sunucu çıktısında ve JavaScript
+ * olmadan görünür; yalnız ilk açılışta ekranın dışında kalan öğe gizlenip görününce belirir.
+ * Hareketi azaltmada hiç gizlenmez. Gizliyken de içerik erişilebilir ağaçtadır (yalnız görünüş).
+ */
+export declare function Reveal({ children, from, delay, as: Tag, className, id }: RevealProps): import("react").JSX.Element;

package/dist/site/Reveal/Reveal.js

@@ -0,0 +1,42 @@
+"use client";
+import Reveal_module_default from "./Reveal.module.js";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+// src/site/Reveal/Reveal.tsx
+/**
+* Görünür olunca yumuşak giriş (kaydırma animasyonu). İçerik sunucu çıktısında ve JavaScript
+* olmadan görünür; yalnız ilk açılışta ekranın dışında kalan öğe gizlenip görününce belirir.
+* Hareketi azaltmada hiç gizlenmez. Gizliyken de içerik erişilebilir ağaçtadır (yalnız görünüş).
+*/
+function Reveal({ children, from = "up", delay = 0, as: Tag = "div", className, id }) {
+	const ref = useRef(null);
+	const [state, setState] = useState("static");
+	useEffect(() => {
+		const el = ref.current;
+		if (!el || typeof IntersectionObserver === "undefined") return;
+		if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
+		const r = el.getBoundingClientRect();
+		if (r.top < window.innerHeight && r.bottom > 0) return;
+		setState("waiting");
+		const io = new IntersectionObserver(([entry]) => {
+			if (!entry?.isIntersecting) return;
+			io.disconnect();
+			setState("shown");
+		}, { threshold: .15 });
+		io.observe(el);
+		return () => io.disconnect();
+	}, []);
+	const delayRef = (el) => {
+		ref.current = el;
+		el?.style.setProperty("--sti-reveal-delay", `${Math.max(0, delay)}ms`);
+	};
+	return /* @__PURE__ */ jsx(Tag, {
+		id,
+		ref: delayRef,
+		className: [Reveal_module_default.root, className].filter(Boolean).join(" "),
+		"data-from": from,
+		"data-state": state,
+		children
+	});
+}
+export { Reveal };

package/dist/site/Reveal/Reveal.module.js

@@ -0,0 +1,4 @@
+import './Reveal.css';
+// src/site/Reveal/Reveal.module.css
+var Reveal_module_default = { "root": "sti-Reveal-root-8bbf0" };
+export { Reveal_module_default as default };

package/dist/site/Reveal/index.d.ts

@@ -0,0 +1,2 @@
+import { Reveal, RevealProps } from "./Reveal.js";
+export { Reveal, RevealProps };

package/dist/site/ScrollProgress/ScrollProgress.css

@@ -0,0 +1,32 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ScrollProgress-root-c47b2 {
+    inline-size: 100%;
+    block-size: var(--sti-space-1);
+    pointer-events: none;
+  }
+
+  .sti-ScrollProgress-root-c47b2[data-position="top"] {
+    z-index: calc(var(--sti-z-header) + 1);
+    position: fixed;
+    inset-block-start: 0;
+    inset-inline: 0;
+  }
+
+  .sti-ScrollProgress-bar-77f77 {
+    background: var(--sti-fill-accent);
+    block-size: 100%;
+    scale: var(--sti-scroll-progress, 0) 1;
+    transform-origin: 0;
+  }
+
+  [dir="rtl"] .sti-ScrollProgress-bar-77f77 {
+    transform-origin: 100%;
+  }
+
+  @media (forced-colors: active) {
+    .sti-ScrollProgress-bar-77f77 {
+      background: highlight;
+    }
+  }
+}

package/dist/site/ScrollProgress/ScrollProgress.d.ts

@@ -0,0 +1,16 @@
+export interface ScrollProgressProps {
+  /** İlerlemesi ölçülecek öğenin kimliği (makale). Verilmezse bütün sayfa. */
+  targetId?: string;
+  /** Sabit konum. Varsayılan `top` (sayfanın üstü); `none` yerinde akar. */
+  position?: "top" | "none";
+  className?: string;
+  id?: string;
+}
+/** Öğenin (ya da sayfanın) okunma oranı, 0–1. */
+export declare function readingProgress(target: HTMLElement | null, viewport: number, scrollY: number, docHeight: number): number;
+/**
+ * Okuma ilerleme çubuğu: sayfanın ya da makalenin ne kadarının okunduğunu ince turkuaz çizgiyle
+ * gösterir. Süstür (ekran okuyucudan gizli); değer CSSOM ile `scaleX` olarak yazılır, kaydırma
+ * olayları `requestAnimationFrame` ile seyreltilir.
+ */
+export declare function ScrollProgress({ targetId, position, className, id }: ScrollProgressProps): import("react").JSX.Element;

package/dist/site/ScrollProgress/ScrollProgress.js

@@ -0,0 +1,54 @@
+"use client";
+import ScrollProgress_module_default from "./ScrollProgress.module.js";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+// src/site/ScrollProgress/ScrollProgress.tsx
+/** Öğenin (ya da sayfanın) okunma oranı, 0–1. */
+function readingProgress(target, viewport, scrollY, docHeight) {
+	if (!target) {
+		const max = docHeight - viewport;
+		return max <= 0 ? 1 : Math.min(1, Math.max(0, scrollY / max));
+	}
+	const r = target.getBoundingClientRect();
+	const total = r.height - viewport;
+	if (total <= 0) return r.top <= 0 ? 1 : 0;
+	return Math.min(1, Math.max(0, -r.top / total));
+}
+/**
+* Okuma ilerleme çubuğu: sayfanın ya da makalenin ne kadarının okunduğunu ince turkuaz çizgiyle
+* gösterir. Süstür (ekran okuyucudan gizli); değer CSSOM ile `scaleX` olarak yazılır, kaydırma
+* olayları `requestAnimationFrame` ile seyreltilir.
+*/
+function ScrollProgress({ targetId, position = "top", className, id }) {
+	const bar = useRef(null);
+	useEffect(() => {
+		let frame = 0;
+		const update = () => {
+			frame = 0;
+			const p = readingProgress(targetId ? document.getElementById(targetId) : null, window.innerHeight, window.scrollY, document.documentElement.scrollHeight);
+			bar.current?.style.setProperty("--sti-scroll-progress", String(p));
+		};
+		const onScroll = () => {
+			if (!frame) frame = requestAnimationFrame(update);
+		};
+		update();
+		window.addEventListener("scroll", onScroll, { passive: true });
+		window.addEventListener("resize", onScroll);
+		return () => {
+			window.removeEventListener("scroll", onScroll);
+			window.removeEventListener("resize", onScroll);
+			cancelAnimationFrame(frame);
+		};
+	}, [targetId]);
+	return /* @__PURE__ */ jsx("div", {
+		id,
+		className: [ScrollProgress_module_default.root, className].filter(Boolean).join(" "),
+		"data-position": position,
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("div", {
+			ref: bar,
+			className: ScrollProgress_module_default.bar
+		})
+	});
+}
+export { ScrollProgress, readingProgress };

package/dist/site/ScrollProgress/ScrollProgress.module.js

@@ -0,0 +1,7 @@
+import './ScrollProgress.css';
+// src/site/ScrollProgress/ScrollProgress.module.css
+var ScrollProgress_module_default = {
+	"root": "sti-ScrollProgress-root-c47b2",
+	"bar": "sti-ScrollProgress-bar-77f77"
+};
+export { ScrollProgress_module_default as default };

package/dist/site/ServiceCard/ServiceCard.css

@@ -0,0 +1,125 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ServiceCard-root-d7168 {
+    gap: var(--sti-space-3);
+    box-sizing: border-box;
+    block-size: 100%;
+    min-inline-size: 0;
+    padding: var(--sti-space-6);
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-xl);
+    background: var(--sti-bg-surface);
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    flex-direction: column;
+    display: flex;
+    position: relative;
+  }
+
+  .sti-ServiceCard-root-d7168[data-highlight] {
+    border: var(--sti-border-width-strong) solid var(--sti-border-accent);
+  }
+
+  .sti-ServiceCard-badge-5f137 {
+    padding: calc(var(--sti-space-1) / 2) var(--sti-space-3);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-fill-accent);
+    color: var(--sti-fg-on-accent);
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-semibold);
+    margin: 0;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: var(--sti-space-6);
+    translate: 0 -50%;
+  }
+
+  .sti-ServiceCard-icon-60025 {
+    inline-size: var(--sti-space-12);
+    block-size: var(--sti-space-12);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-accent-subtle);
+    color: var(--sti-fg-accent-strong);
+    place-items: center;
+    margin-block-end: var(--sti-space-1);
+    display: inline-grid;
+  }
+
+  .sti-ServiceCard-icon-60025 > svg {
+    inline-size: var(--sti-space-6);
+    block-size: var(--sti-space-6);
+  }
+
+  .sti-ServiceCard-title-92bbd {
+    font-family: var(--sti-font-display);
+    font-size: var(--sti-font-size-heading-md);
+    font-weight: var(--sti-font-weight-bold);
+    line-height: var(--sti-line-height-heading-md);
+    margin: 0;
+  }
+
+  .sti-ServiceCard-description-f0131 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-md);
+    line-height: var(--sti-line-height-md);
+    margin: 0;
+  }
+
+  .sti-ServiceCard-includes-ac217 {
+    gap: var(--sti-space-2);
+    margin: var(--sti-space-2) 0 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+  }
+
+  .sti-ServiceCard-include-3fed6 {
+    align-items: flex-start;
+    gap: var(--sti-space-2);
+    font-size: var(--sti-font-size-md);
+    line-height: var(--sti-line-height-md);
+    display: flex;
+  }
+
+  .sti-ServiceCard-check-08102 {
+    inline-size: var(--sti-space-5);
+    block-size: var(--sti-space-5);
+    color: var(--sti-fg-accent-strong);
+    flex: none;
+    margin-block-start: calc(var(--sti-space-1) / 2);
+  }
+
+  .sti-ServiceCard-footer-e3589 {
+    gap: var(--sti-space-4);
+    margin-block-start: auto;
+    padding-block-start: var(--sti-space-5);
+    display: grid;
+  }
+
+  .sti-ServiceCard-price-a497d {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    margin: 0;
+  }
+
+  .sti-ServiceCard-amount-86d02 {
+    color: var(--sti-fg);
+    font-family: var(--sti-font-display);
+    font-size: var(--sti-font-size-2xl);
+    font-weight: var(--sti-font-weight-bold);
+  }
+
+  @media (forced-colors: active) {
+    .sti-ServiceCard-root-d7168 {
+      border-color: canvastext;
+    }
+
+    .sti-ServiceCard-root-d7168[data-highlight] {
+      border-color: highlight;
+    }
+
+    .sti-ServiceCard-badge-5f137 {
+      border: var(--sti-border-width) solid CanvasText;
+    }
+  }
+}

package/dist/site/ServiceCard/ServiceCard.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+export interface ServiceCardProps {
+  icon?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  /** Hizmete dahil olanlar. */
+  includes?: readonly ReactNode[];
+  /** Başlangıç fiyatı ("₺18.000"); `priceNote` ile birlikte ("/ay'dan başlayan"). */
+  price?: ReactNode;
+  priceNote?: ReactNode;
+  action?: {
+    label: string;
+    href: string;
+  };
+  /** Öne çıkan hizmet (turkuaz çerçeve ve etiket). */
+  highlight?: string;
+  titleLevel?: 2 | 3 | 4;
+  className?: string;
+  id?: string;
+}
+/**
+ * Hizmet kartı: simge, başlık, açıklama, dahil olanlar, başlangıç fiyatı ve eylem. Öne çıkan
+ * hizmet turkuaz çerçeve ve üstte etiketle ayrılır. Eylem kartın altına hizalanır (ızgarada eşit).
+ */
+export declare function ServiceCard({ icon, title, description, includes, price, priceNote, action, highlight, titleLevel, className, id }: ServiceCardProps): import("react").JSX.Element;

package/dist/site/ServiceCard/ServiceCard.js

@@ -0,0 +1,65 @@
+import { Button } from "../../components/Button/Button.js";
+import { CheckIcon } from "../../icons/generated/CheckIcon.js";
+import ServiceCard_module_default from "./ServiceCard.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/site/ServiceCard/ServiceCard.tsx
+/**
+* Hizmet kartı: simge, başlık, açıklama, dahil olanlar, başlangıç fiyatı ve eylem. Öne çıkan
+* hizmet turkuaz çerçeve ve üstte etiketle ayrılır. Eylem kartın altına hizalanır (ızgarada eşit).
+*/
+function ServiceCard({ icon, title, description, includes, price, priceNote, action, highlight, titleLevel = 3, className, id }) {
+	const Heading = `h${titleLevel}`;
+	return /* @__PURE__ */ jsxs("article", {
+		id,
+		className: [ServiceCard_module_default.root, className].filter(Boolean).join(" "),
+		"data-highlight": highlight ? "" : void 0,
+		children: [
+			highlight ? /* @__PURE__ */ jsx("p", {
+				className: ServiceCard_module_default.badge,
+				children: highlight
+			}) : null,
+			icon ? /* @__PURE__ */ jsx("span", {
+				className: ServiceCard_module_default.icon,
+				"aria-hidden": "true",
+				children: icon
+			}) : null,
+			/* @__PURE__ */ jsx(Heading, {
+				className: ServiceCard_module_default.title,
+				children: title
+			}),
+			description ? /* @__PURE__ */ jsx("p", {
+				className: ServiceCard_module_default.description,
+				children: description
+			}) : null,
+			includes?.length ? /* @__PURE__ */ jsx("ul", {
+				className: ServiceCard_module_default.includes,
+				children: includes.map((item, i) => /* @__PURE__ */ jsxs("li", {
+					className: ServiceCard_module_default.include,
+					children: [/* @__PURE__ */ jsx(CheckIcon, {
+						"aria-hidden": "true",
+						className: ServiceCard_module_default.check
+					}), /* @__PURE__ */ jsx("span", { children: item })]
+				}, i))
+			}) : null,
+			price || action ? /* @__PURE__ */ jsxs("div", {
+				className: ServiceCard_module_default.footer,
+				children: [price ? /* @__PURE__ */ jsxs("p", {
+					className: ServiceCard_module_default.price,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: ServiceCard_module_default.amount,
+						children: price
+					}), priceNote ? /* @__PURE__ */ jsxs("span", {
+						className: ServiceCard_module_default.note,
+						children: [" ", priceNote]
+					}) : null]
+				}) : null, action ? /* @__PURE__ */ jsx(Button, {
+					variant: highlight ? "primary" : "secondary",
+					href: action.href,
+					fullWidth: true,
+					children: action.label
+				}) : null]
+			}) : null
+		]
+	});
+}
+export { ServiceCard };

package/dist/site/ServiceCard/ServiceCard.module.js

@@ -0,0 +1,16 @@
+import './ServiceCard.css';
+// src/site/ServiceCard/ServiceCard.module.css
+var ServiceCard_module_default = {
+	"root": "sti-ServiceCard-root-d7168",
+	"badge": "sti-ServiceCard-badge-5f137",
+	"icon": "sti-ServiceCard-icon-60025",
+	"title": "sti-ServiceCard-title-92bbd",
+	"description": "sti-ServiceCard-description-f0131",
+	"includes": "sti-ServiceCard-includes-ac217",
+	"include": "sti-ServiceCard-include-3fed6",
+	"check": "sti-ServiceCard-check-08102",
+	"footer": "sti-ServiceCard-footer-e3589",
+	"price": "sti-ServiceCard-price-a497d",
+	"amount": "sti-ServiceCard-amount-86d02"
+};
+export { ServiceCard_module_default as default };

package/dist/site/ServiceCard/index.d.ts

@@ -0,0 +1,2 @@
+import { ServiceCard, ServiceCardProps } from "./ServiceCard.js";
+export { ServiceCard, ServiceCardProps };

package/dist/site/ShareBar/ShareBar.css

@@ -0,0 +1,97 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ShareBar-root-ddf14 {
+    align-items: center;
+    gap: var(--sti-space-3) var(--sti-space-4);
+    font-family: var(--sti-font-text);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-ShareBar-root-ddf14[data-orientation="vertical"] {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .sti-ShareBar-label-cac4b {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-semibold);
+    margin: 0;
+  }
+
+  .sti-ShareBar-list-2af9d {
+    align-items: center;
+    gap: var(--sti-space-2);
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+  }
+
+  .sti-ShareBar-root-ddf14[data-orientation="vertical"] .sti-ShareBar-list-2af9d {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .sti-ShareBar-link-bc9f2 {
+    align-items: center;
+    gap: var(--sti-space-2);
+    box-sizing: border-box;
+    min-block-size: var(--sti-control-h-sm);
+    padding: 0 var(--sti-space-3);
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-semibold);
+    border: var(--sti-border-width) solid var(--sti-border);
+    border-radius: var(--sti-radius-pill);
+    color: var(--sti-fg);
+    transition: background-color var(--sti-duration-fast) var(--sti-ease-standard),
+      border-color var(--sti-duration-fast) var(--sti-ease-standard);
+    text-decoration: none;
+    display: inline-flex;
+  }
+
+  .sti-ShareBar-link-bc9f2:hover {
+    border-color: var(--sti-border-strong);
+    background: var(--sti-bg-surface-hover);
+  }
+
+  .sti-ShareBar-link-bc9f2:focus-visible {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-ShareBar-icon-f5fd0 {
+    inline-size: var(--sti-space-4);
+    block-size: var(--sti-space-4);
+    display: inline-grid;
+  }
+
+  .sti-ShareBar-icon-f5fd0 > svg {
+    block-size: 100%;
+    inline-size: 100%;
+  }
+
+  .sti-ShareBar-srOnly-eba6e {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    block-size: 1px;
+    inline-size: 1px;
+    margin: -1px;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-ShareBar-link-bc9f2 {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-ShareBar-link-bc9f2 {
+      border-color: linktext;
+    }
+  }
+}

package/dist/site/ShareBar/ShareBar.d.ts

@@ -0,0 +1,26 @@
+export type ShareNetwork = "x" | "linkedin" | "facebook" | "whatsapp" | "email";
+export interface ShareBarProps {
+  /** Paylaşılacak tam adres (yalnız http ve https). */
+  url: string;
+  /** Paylaşım başlığı (yazı başlığı). */
+  title: string;
+  /** Gösterilecek ağlar. Varsayılan: hepsi. */
+  networks?: readonly ShareNetwork[];
+  /** Cihaz paylaşımı / bağlantı kopyalama düğmesi. Varsayılan `true`. */
+  showShareButton?: boolean;
+  /** Şeridin adı. Varsayılan "Bu yazıyı paylaşın". */
+  label?: string;
+  /** `horizontal` (yazı sonu) ya da `vertical` (yan sütunda yapışkan). */
+  orientation?: "horizontal" | "vertical";
+  className?: string;
+  id?: string;
+}
+/** Ağın paylaşım adresi (adres ve başlık kodlanır). */
+export declare function shareHref(network: ShareNetwork, url: string, title: string): string;
+/**
+ * Paylaşma şeridi: cihazın paylaşım penceresi ya da bağlantı kopyalama (`ShareButton`) ve ağ
+ * paylaşım bağlantıları (X, LinkedIn, Facebook, WhatsApp, e-posta). Ağ bağlantıları yeni sekmede,
+ * `noopener noreferrer` ile açılır; adres ve başlık kodlanır; yalnız http(s) adres paylaşılır.
+ * Paylaşım için betik yüklenmez, izleme yapılmaz.
+ */
+export declare function ShareBar({ url, title, networks, showShareButton, label, orientation, className, id }: ShareBarProps): import("react").JSX.Element | null;