@stisocial/ui 0.1.0 → 0.2.0

package/dist/agency/InstagramReelPreview/InstagramReelPreview.module.js

@@ -0,0 +1,13 @@
+import './InstagramReelPreview.css';
+// src/agency/InstagramReelPreview/InstagramReelPreview.module.css
+var InstagramReelPreview_module_default = {
+	"root": "sti-InstagramReelPreview-root-9b0a4",
+	"play": "sti-InstagramReelPreview-play-b191e",
+	"bottom": "sti-InstagramReelPreview-bottom-18ff4",
+	"info": "sti-InstagramReelPreview-info-cc71f",
+	"rail": "sti-InstagramReelPreview-rail-1399a",
+	"railItem": "sti-InstagramReelPreview-railItem-80ae9",
+	"railIcon": "sti-InstagramReelPreview-railIcon-c8539",
+	"count": "sti-InstagramReelPreview-count-dcc7d"
+};
+export { InstagramReelPreview_module_default as default };

package/dist/agency/InstagramReelPreview/index.d.ts

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

package/dist/agency/InstagramStoryPreview/InstagramStoryPreview.css

@@ -0,0 +1,105 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-InstagramStoryPreview-root-53aed {
+    --sti-preview-max: 20rem;
+    --sti-preview-pad: 0;
+    --sti-preview-gap: 0;
+    --sti-preview-radius: var(--sti-radius-lg);
+  }
+
+  .sti-InstagramStoryPreview-top-56f17 {
+    gap: var(--sti-space-2);
+    padding: var(--sti-space-3);
+    justify-items: start;
+    display: grid;
+  }
+
+  .sti-InstagramStoryPreview-bars-71db5 {
+    gap: var(--sti-space-1);
+    inline-size: 100%;
+    display: flex;
+  }
+
+  .sti-InstagramStoryPreview-bar-94791 {
+    block-size: var(--sti-space-0-5);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-border-strong);
+    flex: 1;
+  }
+
+  .sti-InstagramStoryPreview-bar-94791[data-state="done"], .sti-InstagramStoryPreview-bar-94791[data-state="active"] {
+    background: var(--sti-bg-inverse);
+  }
+
+  .sti-InstagramStoryPreview-bar-94791[data-state="active"] {
+    box-shadow: 0 0 0 var(--sti-border-width) var(--sti-fg-inverse);
+  }
+
+  .sti-InstagramStoryPreview-time-b1bb1 {
+    opacity: .8;
+    font-weight: var(--sti-font-weight-regular);
+    white-space: nowrap;
+  }
+
+  .sti-InstagramStoryPreview-text-d88f7 {
+    max-inline-size: 85%;
+    padding: var(--sti-space-2) var(--sti-space-4);
+    border-radius: var(--sti-radius-sm);
+    background: var(--sti-bg-inverse);
+    color: var(--sti-fg-inverse);
+    font-size: var(--sti-font-size-lg);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-lg);
+    text-align: center;
+    overflow-wrap: anywhere;
+    align-self: center;
+    margin-block: auto;
+    margin-inline: 0;
+    position: relative;
+  }
+
+  .sti-InstagramStoryPreview-reply-ffd2c {
+    align-items: center;
+    gap: var(--sti-space-3);
+    padding: var(--sti-space-3);
+    display: flex;
+    position: relative;
+  }
+
+  .sti-InstagramStoryPreview-replyField-69dda {
+    min-width: 0;
+    padding-block: var(--sti-space-2);
+    padding-inline: var(--sti-space-4);
+    border: var(--sti-border-width) solid var(--sti-fg-inverse);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-inverse);
+    color: var(--sti-fg-inverse);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .sti-InstagramStoryPreview-send-55e8a {
+    inline-size: var(--sti-icon-lg);
+    block-size: var(--sti-icon-lg);
+    padding: var(--sti-space-2);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-inverse);
+    color: var(--sti-fg-inverse);
+    box-sizing: content-box;
+    flex: none;
+  }
+
+  @media (forced-colors: active) {
+    .sti-InstagramStoryPreview-bar-94791[data-state="done"], .sti-InstagramStoryPreview-bar-94791[data-state="active"] {
+      background: highlight;
+    }
+
+    .sti-InstagramStoryPreview-text-d88f7, .sti-InstagramStoryPreview-replyField-69dda, .sti-InstagramStoryPreview-send-55e8a {
+      border: var(--sti-border-width) solid CanvasText;
+      color: canvastext;
+      background: canvas;
+    }
+  }
+}

package/dist/agency/InstagramStoryPreview/InstagramStoryPreview.d.ts

@@ -0,0 +1,23 @@
+import { PreviewAccount, PreviewBaseProps, PreviewMediaItem } from "../_shared/Preview.js";
+import { ReactNode } from "react";
+export interface InstagramStoryPreviewProps extends PreviewBaseProps {
+  account: PreviewAccount;
+  /** Hikâye görseli (9:16). */
+  media?: PreviewMediaItem;
+  /** Görselin üstündeki yazı (sticker metni). */
+  text?: string;
+  /** Zaman ("2 sa"). */
+  timeLabel?: string;
+  /** Yanıt alanının yer tutucu metni ("Mesaj gönder"). */
+  replyLabel?: string;
+  /** Hikâyedeki parça sayısı ve görüntülenen sıra (ilerleme çubukları). */
+  segments?: number;
+  current?: number;
+  /** Görselin üstüne konan katman (ör. `SafeZoneOverlay`). */
+  children?: ReactNode;
+}
+/**
+ * Instagram hikâye önizlemesi: 9:16 çerçeve, üstte ilerleme çubukları ve hesap bilgisi, altta
+ * yanıt alanı. Sunucu bileşenidir. Güvenli alan kılavuzu için `SafeZoneOverlay` çocuk olarak verilir.
+ */
+export declare function InstagramStoryPreview({ label, account, media, text, timeLabel, replyLabel, segments, current, children, className, id }: InstagramStoryPreviewProps): import("react").JSX.Element;

package/dist/agency/InstagramStoryPreview/InstagramStoryPreview.js

@@ -0,0 +1,59 @@
+import { SendIcon } from "../../icons/generated/SendIcon.js";
+import { PreviewAvatar, PreviewChip, PreviewMedia, PreviewName, PreviewShell } from "../_shared/Preview.js";
+import InstagramStoryPreview_module_default from "./InstagramStoryPreview.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/agency/InstagramStoryPreview/InstagramStoryPreview.tsx
+/**
+* Instagram hikâye önizlemesi: 9:16 çerçeve, üstte ilerleme çubukları ve hesap bilgisi, altta
+* yanıt alanı. Sunucu bileşenidir. Güvenli alan kılavuzu için `SafeZoneOverlay` çocuk olarak verilir.
+*/
+function InstagramStoryPreview({ label, account, media, text, timeLabel, replyLabel, segments = 1, current = 0, children, className, id }) {
+	const bars = Array.from({ length: Math.max(1, segments) }, (_, i) => i);
+	return /* @__PURE__ */ jsx(PreviewShell, {
+		label,
+		id,
+		platform: "instagram-story",
+		className: [InstagramStoryPreview_module_default.root, className].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ jsxs(PreviewMedia, {
+			media,
+			ratio: "9:16",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: InstagramStoryPreview_module_default.top,
+					children: [/* @__PURE__ */ jsx("div", {
+						className: InstagramStoryPreview_module_default.bars,
+						"aria-hidden": "true",
+						children: bars.map((i) => /* @__PURE__ */ jsx("span", {
+							className: InstagramStoryPreview_module_default.bar,
+							"data-state": i < current ? "done" : i === current ? "active" : "next"
+						}, i))
+					}), /* @__PURE__ */ jsxs(PreviewChip, { children: [
+						/* @__PURE__ */ jsx(PreviewAvatar, {
+							account,
+							size: "sm"
+						}),
+						/* @__PURE__ */ jsx(PreviewName, { account }),
+						timeLabel ? /* @__PURE__ */ jsx("span", {
+							className: InstagramStoryPreview_module_default.time,
+							children: timeLabel
+						}) : null
+					] })]
+				}),
+				text ? /* @__PURE__ */ jsx("p", {
+					className: InstagramStoryPreview_module_default.text,
+					children: text
+				}) : null,
+				children,
+				replyLabel ? /* @__PURE__ */ jsxs("div", {
+					className: InstagramStoryPreview_module_default.reply,
+					"aria-hidden": "true",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: InstagramStoryPreview_module_default.replyField,
+						children: replyLabel
+					}), /* @__PURE__ */ jsx(SendIcon, { className: InstagramStoryPreview_module_default.send })]
+				}) : null
+			]
+		})
+	});
+}
+export { InstagramStoryPreview };

package/dist/agency/InstagramStoryPreview/InstagramStoryPreview.module.js

@@ -0,0 +1,14 @@
+import './InstagramStoryPreview.css';
+// src/agency/InstagramStoryPreview/InstagramStoryPreview.module.css
+var InstagramStoryPreview_module_default = {
+	"root": "sti-InstagramStoryPreview-root-53aed",
+	"top": "sti-InstagramStoryPreview-top-56f17",
+	"bars": "sti-InstagramStoryPreview-bars-71db5",
+	"bar": "sti-InstagramStoryPreview-bar-94791",
+	"time": "sti-InstagramStoryPreview-time-b1bb1",
+	"text": "sti-InstagramStoryPreview-text-d88f7",
+	"reply": "sti-InstagramStoryPreview-reply-ffd2c",
+	"replyField": "sti-InstagramStoryPreview-replyField-69dda",
+	"send": "sti-InstagramStoryPreview-send-55e8a"
+};
+export { InstagramStoryPreview_module_default as default };

package/dist/agency/InstagramStoryPreview/index.d.ts

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

package/dist/agency/LinkedInPostPreview/LinkedInPostPreview.css

@@ -0,0 +1,83 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-LinkedInPostPreview-root-d99a5 {
+    --sti-preview-max: 33rem;
+    --sti-preview-pad: 0;
+    --sti-preview-gap: 0;
+  }
+
+  .sti-LinkedInPostPreview-header-101cc {
+    align-items: flex-start;
+    gap: var(--sti-space-3);
+    padding: var(--sti-space-3) var(--sti-space-4);
+    display: flex;
+  }
+
+  .sti-LinkedInPostPreview-who-33957 {
+    flex: 1;
+    min-width: 0;
+    display: grid;
+  }
+
+  .sti-LinkedInPostPreview-sub-a8f46 {
+    align-items: center;
+    gap: var(--sti-space-1);
+    min-width: 0;
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    line-height: var(--sti-line-height-xs);
+    display: flex;
+    overflow: hidden;
+  }
+
+  .sti-LinkedInPostPreview-globe-9dd86 {
+    inline-size: var(--sti-icon-sm);
+    block-size: var(--sti-icon-sm);
+    flex: none;
+  }
+
+  .sti-LinkedInPostPreview-more-01643 {
+    color: var(--sti-fg-muted);
+    flex: none;
+  }
+
+  .sti-LinkedInPostPreview-text-ad8d3 {
+    padding: 0 var(--sti-space-4) var(--sti-space-3);
+    font-size: var(--sti-font-size-sm);
+  }
+
+  .sti-LinkedInPostPreview-counts-f92fd {
+    justify-content: space-between;
+    gap: var(--sti-space-3);
+    padding: var(--sti-space-2) var(--sti-space-4);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    display: flex;
+  }
+
+  .sti-LinkedInPostPreview-actions-f37d3 {
+    margin-inline: var(--sti-space-2);
+    padding-block: var(--sti-space-1);
+    border-block-start: var(--sti-border-width) solid var(--sti-border-subtle);
+    display: flex;
+  }
+
+  .sti-LinkedInPostPreview-action-fc177 {
+    justify-content: center;
+    align-items: center;
+    gap: var(--sti-space-1);
+    min-width: 0;
+    padding-block: var(--sti-space-2);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-icon-md);
+    flex-direction: column;
+    flex: 1;
+    display: inline-flex;
+  }
+
+  .sti-LinkedInPostPreview-actionText-c97f4 {
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-xs);
+  }
+}

package/dist/agency/LinkedInPostPreview/LinkedInPostPreview.d.ts

@@ -0,0 +1,30 @@
+import { PreviewAccount, PreviewBaseProps, PreviewMediaItem, PreviewRatio } from "../_shared/Preview.js";
+export interface LinkedInPostPreviewProps extends PreviewBaseProps {
+  /** Kişi ya da şirket sayfası. `name` görünen ad, `subtitle` ünvan ya da takipçi sayısıdır. */
+  account: PreviewAccount;
+  text: string;
+  media?: PreviewMediaItem;
+  /** Görsel oranı: akışta 1,91:1 (bağlantı), 1:1 ve 4:5 (görsel). */
+  ratio?: Extract<PreviewRatio, "1:1" | "1.91:1" | "4:5">;
+  /** Zaman ve görünürlük satırı ("2 sa · Herkese açık"). */
+  timeLabel?: string;
+  /** Tepki ve yorum sayıları ("142", "18 yorum"). */
+  reactionsLabel?: string;
+  commentsLabel?: string;
+  /** Eylem düğmelerinin yazıları; verilmezse yalnız ikon çizilir. */
+  actionLabels?: {
+    like: string;
+    comment: string;
+    repost: string;
+    send: string;
+  };
+  /** Kesilen metnin sonuna eklenen metin ("…daha fazla"). */
+  moreLabel?: string;
+  /** Metnin tamamını gösterir. */
+  expanded?: boolean;
+}
+/**
+ * LinkedIn gönderisi önizlemesi: üst bilgi, metin (ilk 210 karakter), görsel, tepki satırı ve dört
+ * eylem. Sunucu bileşenidir.
+ */
+export declare function LinkedInPostPreview({ label, account, text, media, ratio, timeLabel, reactionsLabel, commentsLabel, actionLabels, moreLabel, expanded, className, id }: LinkedInPostPreviewProps): import("react").JSX.Element;

package/dist/agency/LinkedInPostPreview/LinkedInPostPreview.js

@@ -0,0 +1,99 @@
+import { MoreHorizontalIcon } from "../../icons/generated/MoreHorizontalIcon.js";
+import { RefreshIcon } from "../../icons/generated/RefreshIcon.js";
+import { HeartIcon } from "../../icons/generated/HeartIcon.js";
+import { MessageIcon } from "../../icons/generated/MessageIcon.js";
+import { GlobeIcon } from "../../icons/generated/GlobeIcon.js";
+import { SendIcon } from "../../icons/generated/SendIcon.js";
+import { PLATFORM_LIMITS } from "../_shared/platforms.js";
+import { PreviewAvatar, PreviewMedia, PreviewName, PreviewShell, PreviewText } from "../_shared/Preview.js";
+import LinkedInPostPreview_module_default from "./LinkedInPostPreview.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/agency/LinkedInPostPreview/LinkedInPostPreview.tsx
+/**
+* LinkedIn gönderisi önizlemesi: üst bilgi, metin (ilk 210 karakter), görsel, tepki satırı ve dört
+* eylem. Sunucu bileşenidir.
+*/
+function LinkedInPostPreview({ label, account, text, media, ratio = "1.91:1", timeLabel, reactionsLabel, commentsLabel, actionLabels, moreLabel, expanded = false, className, id }) {
+	const actions = [
+		{
+			key: "like",
+			icon: /* @__PURE__ */ jsx(HeartIcon, {}),
+			text: actionLabels?.like
+		},
+		{
+			key: "comment",
+			icon: /* @__PURE__ */ jsx(MessageIcon, {}),
+			text: actionLabels?.comment
+		},
+		{
+			key: "repost",
+			icon: /* @__PURE__ */ jsx(RefreshIcon, {}),
+			text: actionLabels?.repost
+		},
+		{
+			key: "send",
+			icon: /* @__PURE__ */ jsx(SendIcon, {}),
+			text: actionLabels?.send
+		}
+	];
+	return /* @__PURE__ */ jsxs(PreviewShell, {
+		label,
+		id,
+		platform: "linkedin",
+		className: [LinkedInPostPreview_module_default.root, className].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: LinkedInPostPreview_module_default.header,
+				children: [
+					/* @__PURE__ */ jsx(PreviewAvatar, {
+						account,
+						size: "lg"
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: LinkedInPostPreview_module_default.who,
+						children: [
+							/* @__PURE__ */ jsx(PreviewName, { account }),
+							account.subtitle ? /* @__PURE__ */ jsx("span", {
+								className: LinkedInPostPreview_module_default.sub,
+								children: account.subtitle
+							}) : null,
+							timeLabel ? /* @__PURE__ */ jsxs("span", {
+								className: LinkedInPostPreview_module_default.sub,
+								children: [timeLabel, /* @__PURE__ */ jsx(GlobeIcon, { className: LinkedInPostPreview_module_default.globe })]
+							}) : null
+						]
+					}),
+					/* @__PURE__ */ jsx(MoreHorizontalIcon, { className: LinkedInPostPreview_module_default.more })
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: LinkedInPostPreview_module_default.text,
+				children: /* @__PURE__ */ jsx(PreviewText, {
+					text,
+					limit: expanded ? void 0 : PLATFORM_LIMITS.linkedin.visible,
+					moreLabel
+				})
+			}),
+			media ? /* @__PURE__ */ jsx(PreviewMedia, {
+				media,
+				ratio
+			}) : null,
+			reactionsLabel || commentsLabel ? /* @__PURE__ */ jsxs("div", {
+				className: LinkedInPostPreview_module_default.counts,
+				children: [/* @__PURE__ */ jsx("span", { children: reactionsLabel }), /* @__PURE__ */ jsx("span", { children: commentsLabel })]
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				className: LinkedInPostPreview_module_default.actions,
+				"aria-hidden": "true",
+				children: actions.map((a) => /* @__PURE__ */ jsxs("span", {
+					className: LinkedInPostPreview_module_default.action,
+					children: [a.icon, a.text ? /* @__PURE__ */ jsx("span", {
+						className: LinkedInPostPreview_module_default.actionText,
+						children: a.text
+					}) : null]
+				}, a.key))
+			})
+		]
+	});
+}
+export { LinkedInPostPreview };

package/dist/agency/LinkedInPostPreview/LinkedInPostPreview.module.js

@@ -0,0 +1,16 @@
+import './LinkedInPostPreview.css';
+// src/agency/LinkedInPostPreview/LinkedInPostPreview.module.css
+var LinkedInPostPreview_module_default = {
+	"root": "sti-LinkedInPostPreview-root-d99a5",
+	"header": "sti-LinkedInPostPreview-header-101cc",
+	"who": "sti-LinkedInPostPreview-who-33957",
+	"sub": "sti-LinkedInPostPreview-sub-a8f46",
+	"globe": "sti-LinkedInPostPreview-globe-9dd86",
+	"more": "sti-LinkedInPostPreview-more-01643",
+	"text": "sti-LinkedInPostPreview-text-ad8d3",
+	"counts": "sti-LinkedInPostPreview-counts-f92fd",
+	"actions": "sti-LinkedInPostPreview-actions-f37d3",
+	"action": "sti-LinkedInPostPreview-action-fc177",
+	"actionText": "sti-LinkedInPostPreview-actionText-c97f4"
+};
+export { LinkedInPostPreview_module_default as default };

package/dist/agency/LinkedInPostPreview/index.d.ts

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

package/dist/agency/PinterestPinPreview/PinterestPinPreview.css

@@ -0,0 +1,96 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-PinterestPinPreview-root-cac0d {
+    --sti-preview-max: 16rem;
+    --sti-preview-pad: var(--sti-space-2);
+    --sti-preview-gap: var(--sti-space-2);
+    --sti-preview-radius: var(--sti-radius-lg);
+  }
+
+  .sti-PinterestPinPreview-media-c0ddb {
+    --sti-media-inline-size: calc(100% - var(--sti-space-4));
+    --sti-media-margin-inline: auto;
+    --sti-media-radius: var(--sti-radius-md);
+  }
+
+  .sti-PinterestPinPreview-save-7b094 {
+    padding-block: var(--sti-space-1);
+    padding-inline: var(--sti-space-4);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-fill-accent);
+    color: var(--sti-fg-on-accent);
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-semibold);
+    position: absolute;
+    inset-block-start: var(--sti-space-3);
+    inset-inline-end: var(--sti-space-3);
+  }
+
+  .sti-PinterestPinPreview-body-03d8a {
+    gap: var(--sti-space-1);
+    padding-inline: var(--sti-space-3);
+    padding-block-end: var(--sti-space-1);
+    display: grid;
+  }
+
+  .sti-PinterestPinPreview-title-24442 {
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-sm);
+    overflow-wrap: anywhere;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    margin: 0;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+
+  .sti-PinterestPinPreview-description-20a02 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    line-height: var(--sti-line-height-xs);
+  }
+
+  .sti-PinterestPinPreview-domain-55fb1 {
+    align-items: center;
+    gap: var(--sti-space-1);
+    min-width: 0;
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    line-height: var(--sti-line-height-xs);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: inline-flex;
+    overflow: hidden;
+  }
+
+  .sti-PinterestPinPreview-linkIcon-75837 {
+    flex: none;
+  }
+
+  .sti-PinterestPinPreview-pinner-aecc2 {
+    align-items: center;
+    gap: var(--sti-space-2);
+    min-width: 0;
+    margin-block-start: var(--sti-space-1);
+    display: inline-flex;
+  }
+
+  .sti-PinterestPinPreview-pinnerName-7e243 {
+    min-width: 0;
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-medium);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  @media (forced-colors: active) {
+    .sti-PinterestPinPreview-save-7b094 {
+      border: var(--sti-border-width) solid CanvasText;
+      color: canvastext;
+      background: canvas;
+    }
+  }
+}

package/dist/agency/PinterestPinPreview/PinterestPinPreview.d.ts

@@ -0,0 +1,23 @@
+import { PreviewAccount, PreviewBaseProps, PreviewMediaItem, PreviewRatio } from "../_shared/Preview.js";
+export interface PinterestPinPreviewProps extends PreviewBaseProps {
+  /** Pini yayımlayan hesap. */
+  account: PreviewAccount;
+  /** Pin başlığı; en çok 100 karakter, akışta iki satıra kısaltılır. */
+  title: string;
+  /** Açıklama; akışta ilk 100 karakteri görünür (sınır 500). */
+  description?: string;
+  /** Pin görseli. Önerilen oran 2:3. */
+  media?: PreviewMediaItem;
+  ratio?: Extract<PreviewRatio, "2:3" | "1:1" | "9:16">;
+  /** Hedef sitenin alan adı ("anadolukahve.example"). */
+  domain?: string;
+  /** Görsel üstündeki kaydet düğmesinin yazısı (süs). */
+  saveLabel?: string;
+  /** Kesilen açıklamanın sonuna eklenen metin ("devamı"). */
+  moreLabel?: string;
+}
+/**
+ * Pinterest pini önizlemesi: dikey görsel, kaydet düğmesi, başlık, açıklama, hedef alan adı ve
+ * yayımlayan hesap. Sunucu bileşenidir.
+ */
+export declare function PinterestPinPreview({ label, account, title, description, media, ratio, domain, saveLabel, moreLabel, className, id }: PinterestPinPreviewProps): import("react").JSX.Element;

package/dist/agency/PinterestPinPreview/PinterestPinPreview.js

@@ -0,0 +1,57 @@
+import { LinkIcon } from "../../icons/generated/LinkIcon.js";
+import { PLATFORM_LIMITS } from "../_shared/platforms.js";
+import { PreviewAvatar, PreviewMedia, PreviewShell, PreviewText } from "../_shared/Preview.js";
+import PinterestPinPreview_module_default from "./PinterestPinPreview.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/agency/PinterestPinPreview/PinterestPinPreview.tsx
+/**
+* Pinterest pini önizlemesi: dikey görsel, kaydet düğmesi, başlık, açıklama, hedef alan adı ve
+* yayımlayan hesap. Sunucu bileşenidir.
+*/
+function PinterestPinPreview({ label, account, title, description, media, ratio = "2:3", domain, saveLabel, moreLabel, className, id }) {
+	return /* @__PURE__ */ jsxs(PreviewShell, {
+		label,
+		id,
+		platform: "pinterest",
+		className: [PinterestPinPreview_module_default.root, className].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ jsx(PreviewMedia, {
+			media,
+			ratio,
+			className: PinterestPinPreview_module_default.media,
+			children: saveLabel ? /* @__PURE__ */ jsx("span", {
+				className: PinterestPinPreview_module_default.save,
+				"aria-hidden": "true",
+				children: saveLabel
+			}) : null
+		}), /* @__PURE__ */ jsxs("div", {
+			className: PinterestPinPreview_module_default.body,
+			children: [
+				/* @__PURE__ */ jsx("h3", {
+					className: PinterestPinPreview_module_default.title,
+					children: title
+				}),
+				description ? /* @__PURE__ */ jsx(PreviewText, {
+					className: PinterestPinPreview_module_default.description,
+					text: description,
+					limit: PLATFORM_LIMITS.pinterest.visible,
+					moreLabel
+				}) : null,
+				domain ? /* @__PURE__ */ jsxs("span", {
+					className: PinterestPinPreview_module_default.domain,
+					children: [/* @__PURE__ */ jsx(LinkIcon, { className: PinterestPinPreview_module_default.linkIcon }), domain]
+				}) : null,
+				/* @__PURE__ */ jsxs("span", {
+					className: PinterestPinPreview_module_default.pinner,
+					children: [/* @__PURE__ */ jsx(PreviewAvatar, {
+						account,
+						size: "sm"
+					}), /* @__PURE__ */ jsx("span", {
+						className: PinterestPinPreview_module_default.pinnerName,
+						children: account.name
+					})]
+				})
+			]
+		})]
+	});
+}
+export { PinterestPinPreview };

package/dist/agency/PinterestPinPreview/PinterestPinPreview.module.js

@@ -0,0 +1,15 @@
+import './PinterestPinPreview.css';
+// src/agency/PinterestPinPreview/PinterestPinPreview.module.css
+var PinterestPinPreview_module_default = {
+	"root": "sti-PinterestPinPreview-root-cac0d",
+	"media": "sti-PinterestPinPreview-media-c0ddb",
+	"save": "sti-PinterestPinPreview-save-7b094",
+	"body": "sti-PinterestPinPreview-body-03d8a",
+	"title": "sti-PinterestPinPreview-title-24442",
+	"description": "sti-PinterestPinPreview-description-20a02",
+	"domain": "sti-PinterestPinPreview-domain-55fb1",
+	"linkIcon": "sti-PinterestPinPreview-linkIcon-75837",
+	"pinner": "sti-PinterestPinPreview-pinner-aecc2",
+	"pinnerName": "sti-PinterestPinPreview-pinnerName-7e243"
+};
+export { PinterestPinPreview_module_default as default };

package/dist/agency/PinterestPinPreview/index.d.ts

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