@zyncat/ui 0.11.0 → 0.13.0

package/dist/facebook-feed.js

@@ -0,0 +1,697 @@
+'use client';import { useControllable } from './chunk-MMRIQNEN.js';
+import { cx } from './chunk-QGNC7LH5.js';
+import './facebook-feed.css';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var THOUSAND = 1e3;
+var TEN_THOUSAND = 1e4;
+var MILLION = 1e6;
+var COMPACT_DECIMALS = 1;
+var TRAILING_ZERO = /\.0$/;
+var THOUSAND_SUFFIX = "K";
+var MILLION_SUFFIX = "M";
+var CAPTION_LIMIT = 250;
+var WORD_BREAK_FLOOR = 0.65;
+var TRAILING_PUNCTUATION = /[\s,.;:—-]+$/;
+var TAG_SPLIT = /([#@][^\s#@]+)/g;
+var TAG_LEADERS = "#@";
+var QUOTE = /"/g;
+var ENCODED_QUOTE = "%22";
+function countValue(value) {
+  return Math.max(0, Math.round(Number(value) || 0));
+}
+function compactCount(value) {
+  const n = countValue(value);
+  if (n >= MILLION) return (n / MILLION).toFixed(COMPACT_DECIMALS).replace(TRAILING_ZERO, "") + MILLION_SUFFIX;
+  if (n >= TEN_THOUSAND) return Math.round(n / THOUSAND) + THOUSAND_SUFFIX;
+  if (n >= THOUSAND) return (n / THOUSAND).toFixed(COMPACT_DECIMALS).replace(TRAILING_ZERO, "") + THOUSAND_SUFFIX;
+  return String(n);
+}
+function cutCaption(text) {
+  if (text.length <= CAPTION_LIMIT) return { head: text, cut: false };
+  let index = text.lastIndexOf(" ", CAPTION_LIMIT);
+  if (index < CAPTION_LIMIT * WORD_BREAK_FLOOR) index = CAPTION_LIMIT;
+  return { head: text.slice(0, index).replace(TRAILING_PUNCTUATION, ""), cut: true };
+}
+function splitCaption(text) {
+  const runs = [];
+  for (const segment of text.split(TAG_SPLIT)) {
+    if (!segment) continue;
+    runs.push({ text: segment, link: TAG_LEADERS.includes(segment.charAt(0)) });
+  }
+  return runs.length ? runs : [{ text, link: false }];
+}
+function sourceUrl(media) {
+  return typeof media === "string" ? media.trim() : "";
+}
+function sourceNode(media) {
+  return typeof media === "string" ? null : media;
+}
+function backgroundOf(url) {
+  return url ? { backgroundImage: `url("${url.replace(QUOTE, ENCODED_QUOTE)}")` } : void 0;
+}
+function isFilled(media) {
+  if (typeof media === "string") return media.trim().length > 0;
+  return media !== null && media !== void 0 && media !== false && media !== true;
+}
+function MediaSurface({ media, type, frontClassName, backClassName, frontRatio }) {
+  const style = backgroundOf(sourceUrl(media));
+  const node = sourceNode(media);
+  const filled = isFilled(media);
+  const echo = type === "image" ? node : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    backClassName ? /* @__PURE__ */ jsxs("div", { className: backClassName, style, "aria-hidden": "true", children: [
+      echo,
+      filled ? null : /* @__PURE__ */ jsx("span", { className: "facebook-feed-media__fill" })
+    ] }) : null,
+    /* @__PURE__ */ jsxs("div", { className: frontClassName, style, "data-ratio": frontRatio, children: [
+      node,
+      filled ? null : /* @__PURE__ */ jsx("span", { className: "facebook-feed-media__fill" })
+    ] })
+  ] });
+}
+function Portrait({ avatar, className }) {
+  return /* @__PURE__ */ jsx("div", { className, style: backgroundOf(sourceUrl(avatar)), children: sourceNode(avatar) });
+}
+var VIEW_BOX = "0 0 24 24";
+function PrivacyGlobe({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: VIEW_BOX, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10.6" }),
+    /* @__PURE__ */ jsx("path", { d: "M4.1 6.7c1.5.4 2.4 1.3 2.6 2.7.2 1.4 1.2 2.2 3 2.4 1.6.2 2.3 1.1 2.1 2.7-.2 1.7.3 3.2 1.4 4.5-1 .5-2.1.8-3.2.8-3.9 0-7.1-3.1-7.1-7 0-2.3.4-4.2 1.2-6.1z" }),
+    /* @__PURE__ */ jsx("path", { d: "M14.6 3.9c2.9 1 5 3.7 5 6.9 0 1.1-.2 2.1-.7 3-1.4-1.7-2.9-2.6-4.4-2.6-1.6 0-2.4-.7-2.4-2.1 0-1.3.5-2.2 1.5-2.7 1-.5 1.3-1.3 1-2.5z" })
+  ] });
+}
+function Dismiss({ className }) {
+  return /* @__PURE__ */ jsx("svg", { className, viewBox: VIEW_BOX, "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4.6 4.6 19.4 19.4M19.4 4.6 4.6 19.4" }) });
+}
+function ThumbOutline({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: VIEW_BOX, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { d: "M2.6 19.7V11.5a1 1 0 0 1 1-1h3.9L9.3 3.7a1.7 1.7 0 0 1 3.4.4v5.6h6.5a1.1 1.1 0 0 1 1 1.1l-.8 5.6-1.1 3.3z" }),
+    /* @__PURE__ */ jsx("path", { d: "M7.5 10.5v9.2" })
+  ] });
+}
+function CommentOutline({ className }) {
+  return /* @__PURE__ */ jsx("svg", { className, viewBox: VIEW_BOX, "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M17.8 17.8a8.9 8.9 0 1 0-3.4 2.1l5.5.1z" }) });
+}
+function ShareOutline({ className }) {
+  return /* @__PURE__ */ jsx("svg", { className, viewBox: VIEW_BOX, "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M10.6 3.4 20.8 11.6 10.6 19.9v-4.7H6.4c-1.8.7-3.1 2.2-3.8 4.4-.4-5-.4-8.4 1.9-9.6L10.6 8.2z" }) });
+}
+function ThumbSolid() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: VIEW_BOX, "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2.6 11.2h4.1V21H2.6zM8.3 11 12 4.1a1.5 1.5 0 0 1 2.8 1l-.7 3.7h4.4a1.7 1.7 0 0 1 1.7 2.1l-1.3 6.4a1.8 1.8 0 0 1-1.8 1.5H8.3z" }) });
+}
+function HeartSolid() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: VIEW_BOX, "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M12 20.8C8.6 18.4 3 14.4 3 9.9A4.7 4.7 0 0 1 12 7.3a4.7 4.7 0 0 1 9 2.6c0 4.5-5.6 8.5-9 10.9z" }) });
+}
+function VerifiedBadge({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: VIEW_BOX, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "11" }),
+    /* @__PURE__ */ jsx("path", { d: "M6.8 12.4 10.3 15.8 17.2 8.7" })
+  ] });
+}
+function Magnifier({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: VIEW_BOX, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "10.4", cy: "10.4", r: "7.6" }),
+    /* @__PURE__ */ jsx("path", { d: "M16.1 16.1 21 21" })
+  ] });
+}
+function SpeakerOutlineOff({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: VIEW_BOX, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { d: "M3.2 9.2h3.4L11 5.2v13.6l-4.4-4H3.2z" }),
+    /* @__PURE__ */ jsx("path", { d: "M15.6 9.6l4.8 4.8M20.4 9.6l-4.8 4.8" })
+  ] });
+}
+function SpeakerOutlineOn({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: VIEW_BOX, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { d: "M3.2 9.2h3.4L11 5.2v13.6l-4.4-4H3.2z" }),
+    /* @__PURE__ */ jsx("path", { d: "M14.9 9.3a3.8 3.8 0 0 1 0 5.4M17.7 6.6a7.7 7.7 0 0 1 0 10.8" })
+  ] });
+}
+function SpeakerSolidOn({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: VIEW_BOX, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { d: "M3 9.4h3.4L11 5.2v13.6L6.4 14.6H3z" }),
+    /* @__PURE__ */ jsx("path", { d: "M14.4 8.6a5.6 5.6 0 0 1 0 6.8l1.7 1.3a7.7 7.7 0 0 0 0-9.4zm3.4-2.6a10 10 0 0 1 0 12l1.7 1.3a12.1 12.1 0 0 0 0-14.6z" })
+  ] });
+}
+function SpeakerSolidOff({ className, crossClassName }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: VIEW_BOX, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { d: "M3 9.4h3.4L11 5.2v13.6L6.4 14.6H3z" }),
+    /* @__PURE__ */ jsx("path", { className: crossClassName, d: "M15.6 9.6l4.8 4.8M20.4 9.6l-4.8 4.8" })
+  ] });
+}
+function PlaySolid({ className }) {
+  return /* @__PURE__ */ jsx("svg", { className, viewBox: VIEW_BOX, "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M5.5 2.8 20 12 5.5 21.2z" }) });
+}
+function AudienceFriends({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: VIEW_BOX, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "8.6", cy: "8", r: "3.7" }),
+    /* @__PURE__ */ jsx("path", { d: "M1.9 20.4c0-3.7 3-5.6 6.7-5.6s6.7 1.9 6.7 5.6z" }),
+    /* @__PURE__ */ jsx("circle", { cx: "17.2", cy: "9.2", r: "2.9" }),
+    /* @__PURE__ */ jsx("path", { d: "M13.4 14.9c1-.4 2.3-.6 3.8-.6 3.1 0 5.1 1.6 5.1 4.8h-5.4c0-1.7-1.2-3.2-3.5-4.2z" })
+  ] });
+}
+function ChevronRight({ className }) {
+  return /* @__PURE__ */ jsx("svg", { className, viewBox: VIEW_BOX, "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M8.5 3.5 17 12l-8.5 8.5" }) });
+}
+var KEBAB_PIPS = [0, 1, 2];
+var ELLIPSIS = "\u2026 ";
+var MIDDOT = "\xB7";
+var FOLLOW_LABEL = "Follow";
+var MORE_LABEL = "See more";
+var REACTIONS_LABEL = "Like and love reactions";
+var LIKE_LABEL = "Like";
+var COMMENT_LABEL = "Comment";
+var SHARE_LABEL = "Share";
+var MENU_LABEL = "More options";
+var DISMISS_LABEL = "Hide post";
+function FacebookPost({
+  name,
+  caption,
+  stamp,
+  follow,
+  ring,
+  ratio,
+  media,
+  avatar,
+  type,
+  likes,
+  comments,
+  shares,
+  width,
+  liked,
+  onLikedChange,
+  onAction,
+  className,
+  style,
+  htmlProps
+}) {
+  const trimmed = cutCaption(caption);
+  const runs = splitCaption(trimmed.head);
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      className: cx(
+        "facebook-feed-post",
+        width === "web" ? "facebook-feed-post--web" : "facebook-feed-post--mobile",
+        className
+      ),
+      style,
+      ...htmlProps,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "facebook-feed-post__header", children: [
+          /* @__PURE__ */ jsx("div", { className: cx("facebook-feed-post__avatar", ring ? void 0 : "facebook-feed-post__avatar--plain"), children: /* @__PURE__ */ jsx(Portrait, { avatar, className: "facebook-feed-post__portrait" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "facebook-feed-post__identity", children: [
+            /* @__PURE__ */ jsxs("div", { className: "facebook-feed-post__name-row", children: [
+              /* @__PURE__ */ jsx("span", { className: "facebook-feed-post__name", children: name }),
+              follow ? /* @__PURE__ */ jsxs("span", { className: "facebook-feed-post__follow", children: [
+                /* @__PURE__ */ jsx("span", { className: "facebook-feed-post__separator", children: MIDDOT }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "facebook-feed-button facebook-feed-post__follow-link",
+                    onClick: () => onAction?.("follow"),
+                    children: FOLLOW_LABEL
+                  }
+                )
+              ] }) : null
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "facebook-feed-post__meta", children: [
+              /* @__PURE__ */ jsx("span", { children: stamp }),
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: MIDDOT }),
+              /* @__PURE__ */ jsx(PrivacyGlobe, { className: "facebook-feed-post__globe" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "facebook-feed-post__controls", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "facebook-feed-button facebook-feed-post__kebab",
+                "aria-label": MENU_LABEL,
+                onClick: () => onAction?.("menu"),
+                children: KEBAB_PIPS.map((pip) => /* @__PURE__ */ jsx("span", { className: "facebook-feed-post__pip" }, pip))
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "facebook-feed-button",
+                "aria-label": DISMISS_LABEL,
+                onClick: () => onAction?.("dismiss"),
+                children: /* @__PURE__ */ jsx(Dismiss, { className: "facebook-feed-post__close" })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "facebook-feed-post__caption", children: [
+          runs.map((run, index) => /* @__PURE__ */ jsx("span", { className: run.link ? "facebook-feed-post__link" : "", children: run.text }, index)),
+          trimmed.cut ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "facebook-feed-post__ellipsis", children: ELLIPSIS }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "facebook-feed-button facebook-feed-post__more",
+                onClick: () => onAction?.("more"),
+                children: MORE_LABEL
+              }
+            )
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "facebook-feed-media facebook-feed-ratio", "data-ratio": ratio, children: /* @__PURE__ */ jsx(
+          MediaSurface,
+          {
+            media,
+            type,
+            backClassName: "facebook-feed-media__back",
+            frontClassName: "facebook-feed-media__front"
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "facebook-feed-post__actions", children: [
+          /* @__PURE__ */ jsxs("div", { className: "facebook-feed-post__stats", children: [
+            /* @__PURE__ */ jsxs("span", { className: "facebook-feed-post__stat", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "facebook-feed-button",
+                  "aria-label": LIKE_LABEL,
+                  "aria-pressed": liked,
+                  onClick: () => onLikedChange(!liked),
+                  children: /* @__PURE__ */ jsx(ThumbOutline, { className: "facebook-feed-post__glyph" })
+                }
+              ),
+              compactCount(likes + (liked ? 1 : 0))
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "facebook-feed-post__stat", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "facebook-feed-button",
+                  "aria-label": COMMENT_LABEL,
+                  onClick: () => onAction?.("comment"),
+                  children: /* @__PURE__ */ jsx(CommentOutline, { className: "facebook-feed-post__glyph" })
+                }
+              ),
+              compactCount(comments)
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "facebook-feed-post__stat", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "facebook-feed-button",
+                  "aria-label": SHARE_LABEL,
+                  onClick: () => onAction?.("share"),
+                  children: /* @__PURE__ */ jsx(ShareOutline, { className: "facebook-feed-post__glyph" })
+                }
+              ),
+              compactCount(shares)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "facebook-feed-post__reactions", role: "img", "aria-label": REACTIONS_LABEL, children: [
+            /* @__PURE__ */ jsx("span", { className: "facebook-feed-post__reaction facebook-feed-post__reaction--like", children: /* @__PURE__ */ jsx(ThumbSolid, {}) }),
+            /* @__PURE__ */ jsx("span", { className: "facebook-feed-post__reaction facebook-feed-post__reaction--love", children: /* @__PURE__ */ jsx(HeartSolid, {}) })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+var KEBAB_PIPS2 = [0, 1, 2];
+var MIDDOT2 = "\xB7";
+var NOTE = "\u266A";
+var FOLLOW_LABEL2 = "Follow";
+var MORE_LABEL2 = "See more";
+var MUTE_LABEL = "Mute";
+var LIKE_LABEL2 = "Like";
+var COMMENT_LABEL2 = "Comment";
+var SHARE_LABEL2 = "Share";
+var MENU_LABEL2 = "More options";
+var SEARCH_LABEL = "Search";
+function FacebookReel({
+  name,
+  caption,
+  stage,
+  follow,
+  verified,
+  audio,
+  media,
+  avatar,
+  type,
+  likes,
+  comments,
+  shares,
+  muted,
+  onMutedChange,
+  liked,
+  onLikedChange,
+  onAction,
+  className,
+  style,
+  htmlProps
+}) {
+  const wide = stage === "wide";
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      className: cx("facebook-feed-reel", wide ? "facebook-feed-reel--wide" : "facebook-feed-reel--narrow", className),
+      style,
+      ...htmlProps,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "facebook-feed-media facebook-feed-reel__video", children: /* @__PURE__ */ jsx(MediaSurface, { media, type, frontClassName: "facebook-feed-media__front" }) }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "facebook-feed-reel__mute",
+            "aria-label": MUTE_LABEL,
+            "aria-pressed": muted,
+            onClick: () => onMutedChange(!muted),
+            children: muted ? /* @__PURE__ */ jsx(SpeakerOutlineOff, { className: "facebook-feed-reel__mute-glyph" }) : /* @__PURE__ */ jsx(SpeakerOutlineOn, { className: "facebook-feed-reel__mute-glyph" })
+          }
+        ),
+        wide ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "facebook-feed-button facebook-feed-reel__search",
+            "aria-label": SEARCH_LABEL,
+            onClick: () => onAction?.("search"),
+            children: /* @__PURE__ */ jsx(Magnifier, { className: "facebook-feed-reel__search-glyph" })
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs("div", { className: "facebook-feed-reel__rail", children: [
+          /* @__PURE__ */ jsxs("span", { className: "facebook-feed-reel__stat", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "facebook-feed-button",
+                "aria-label": LIKE_LABEL2,
+                "aria-pressed": liked,
+                onClick: () => onLikedChange(!liked),
+                children: /* @__PURE__ */ jsx(ThumbOutline, { className: "facebook-feed-reel__stat-glyph" })
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "facebook-feed-reel__count", children: compactCount(likes + (liked ? 1 : 0)) })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "facebook-feed-reel__stat", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "facebook-feed-button",
+                "aria-label": COMMENT_LABEL2,
+                onClick: () => onAction?.("comment"),
+                children: /* @__PURE__ */ jsx(CommentOutline, { className: "facebook-feed-reel__stat-glyph" })
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "facebook-feed-reel__count", children: compactCount(comments) })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "facebook-feed-reel__stat", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "facebook-feed-button",
+                "aria-label": SHARE_LABEL2,
+                onClick: () => onAction?.("share"),
+                children: /* @__PURE__ */ jsx(ShareOutline, { className: "facebook-feed-reel__stat-glyph" })
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "facebook-feed-reel__count", children: compactCount(shares) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "facebook-feed-button facebook-feed-reel__kebab",
+              "aria-label": MENU_LABEL2,
+              onClick: () => onAction?.("menu"),
+              children: KEBAB_PIPS2.map((pip) => /* @__PURE__ */ jsx("span", { className: "facebook-feed-reel__pip" }, pip))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "facebook-feed-reel__overlay", children: [
+          /* @__PURE__ */ jsxs("div", { className: "facebook-feed-reel__byline", children: [
+            /* @__PURE__ */ jsx(Portrait, { avatar, className: "facebook-feed-reel__avatar" }),
+            /* @__PURE__ */ jsx("span", { className: "facebook-feed-reel__name", children: name }),
+            verified ? /* @__PURE__ */ jsx(VerifiedBadge, { className: "facebook-feed-reel__badge" }) : null,
+            follow ? /* @__PURE__ */ jsxs("span", { className: "facebook-feed-reel__follow", children: [
+              /* @__PURE__ */ jsx("span", { className: "facebook-feed-reel__follow-dot", children: MIDDOT2 }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "facebook-feed-button facebook-feed-reel__follow-label",
+                  onClick: () => onAction?.("follow"),
+                  children: FOLLOW_LABEL2
+                }
+              )
+            ] }) : null
+          ] }),
+          wide ? null : /* @__PURE__ */ jsxs("div", { className: "facebook-feed-reel__audio", children: [
+            /* @__PURE__ */ jsx("span", { className: "facebook-feed-reel__note", "aria-hidden": "true", children: NOTE }),
+            /* @__PURE__ */ jsx("span", { className: "facebook-feed-reel__audio-text", children: `${name} ${MIDDOT2} ${audio}` })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "facebook-feed-reel__caption", children: [
+            /* @__PURE__ */ jsx("span", { className: "facebook-feed-reel__caption-text", children: caption }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "facebook-feed-button facebook-feed-reel__more",
+                onClick: () => onAction?.("more"),
+                children: MORE_LABEL2
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+var KEBAB_PIPS3 = [0, 1, 2];
+var MIDDOT3 = "\xB7";
+var NOTE2 = "\u266A";
+var MUTE_LABEL2 = "Mute";
+var PLAY_LABEL = "Play";
+var MENU_LABEL3 = "More options";
+function FacebookStory({
+  name,
+  stamp,
+  audio,
+  ratio,
+  media,
+  avatar,
+  type,
+  segments,
+  segment,
+  muted,
+  onMutedChange,
+  onAction,
+  className,
+  style,
+  htmlProps
+}) {
+  const track = Array.from({ length: Math.max(1, Math.round(segments)) }, (_, index) => index);
+  return /* @__PURE__ */ jsxs("article", { className: cx("facebook-feed-story", className), style, ...htmlProps, children: [
+    /* @__PURE__ */ jsx("div", { className: "facebook-feed-story__stage", children: /* @__PURE__ */ jsx(
+      MediaSurface,
+      {
+        media,
+        type,
+        backClassName: "facebook-feed-media__back facebook-feed-story__back",
+        frontClassName: "facebook-feed-media__front facebook-feed-media__front--cover facebook-feed-story__card facebook-feed-ratio",
+        frontRatio: ratio
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "facebook-feed-story__segments", "aria-hidden": "true", children: track.map((index) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cx(
+          "facebook-feed-story__segment",
+          index <= segment ? "facebook-feed-story__segment--filled" : void 0
+        )
+      },
+      index
+    )) }),
+    /* @__PURE__ */ jsxs("div", { className: "facebook-feed-story__header", children: [
+      /* @__PURE__ */ jsx(Portrait, { avatar, className: "facebook-feed-story__avatar" }),
+      /* @__PURE__ */ jsxs("div", { className: "facebook-feed-story__identity", children: [
+        /* @__PURE__ */ jsxs("div", { className: "facebook-feed-story__name-row", children: [
+          /* @__PURE__ */ jsx("span", { className: "facebook-feed-story__name", children: name }),
+          /* @__PURE__ */ jsx("span", { className: "facebook-feed-story__stamp", children: stamp }),
+          /* @__PURE__ */ jsx(AudienceFriends, { className: "facebook-feed-story__audience" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "facebook-feed-story__audio", children: [
+          /* @__PURE__ */ jsx("span", { className: "facebook-feed-story__note", "aria-hidden": "true", children: NOTE2 }),
+          /* @__PURE__ */ jsx("span", { className: "facebook-feed-story__audio-text", children: `${name} ${MIDDOT3} ${audio}` }),
+          /* @__PURE__ */ jsx(ChevronRight, { className: "facebook-feed-story__chevron" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "facebook-feed-story__controls", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "facebook-feed-story__mute",
+            "aria-label": MUTE_LABEL2,
+            "aria-pressed": muted,
+            onClick: () => onMutedChange(!muted),
+            children: muted ? /* @__PURE__ */ jsx(
+              SpeakerSolidOff,
+              {
+                className: "facebook-feed-story__mute-glyph",
+                crossClassName: "facebook-feed-story__mute-cross"
+              }
+            ) : /* @__PURE__ */ jsx(SpeakerSolidOn, { className: "facebook-feed-story__mute-glyph" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "facebook-feed-button",
+            "aria-label": PLAY_LABEL,
+            onClick: () => onAction?.("play"),
+            children: /* @__PURE__ */ jsx(PlaySolid, { className: "facebook-feed-story__play" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "facebook-feed-button facebook-feed-story__kebab",
+            "aria-label": MENU_LABEL3,
+            onClick: () => onAction?.("menu"),
+            children: KEBAB_PIPS3.map((pip) => /* @__PURE__ */ jsx("span", { className: "facebook-feed-story__pip" }, pip))
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+var DEFAULT_NAME = "Swiss Nature";
+var DEFAULT_CAPTION = "This is Switzerland";
+var DEFAULT_STAMP = "31m";
+var DEFAULT_AUDIO = "Original audio";
+var DEFAULT_RATIO = "4:5";
+var DEFAULT_LIKES = 267;
+var DEFAULT_COMMENTS = 12;
+var DEFAULT_SHARES = 4;
+var DEFAULT_SEGMENTS = 2;
+var DEFAULT_SEGMENT = 0;
+var MUTED_BY_SURFACE = { post: true, reel: true, story: false };
+function FacebookFeed({
+  surface = "post",
+  width = "web",
+  stage = "narrow",
+  type = "image",
+  name = DEFAULT_NAME,
+  caption = DEFAULT_CAPTION,
+  ratio = DEFAULT_RATIO,
+  media,
+  avatar,
+  follow = true,
+  ring = true,
+  stamp = DEFAULT_STAMP,
+  verified = true,
+  audio = DEFAULT_AUDIO,
+  likes = DEFAULT_LIKES,
+  comments = DEFAULT_COMMENTS,
+  shares = DEFAULT_SHARES,
+  segments = DEFAULT_SEGMENTS,
+  segment = DEFAULT_SEGMENT,
+  muted,
+  defaultMuted,
+  onMutedChange,
+  liked,
+  defaultLiked = false,
+  onLikedChange,
+  onAction,
+  className = "",
+  style,
+  htmlProps
+}) {
+  const [sound, setSound] = useControllable(muted, defaultMuted ?? MUTED_BY_SURFACE[surface], onMutedChange);
+  const [reacted, setReacted] = useControllable(liked, defaultLiked, onLikedChange);
+  if (surface === "reel")
+    return /* @__PURE__ */ jsx(
+      FacebookReel,
+      {
+        name,
+        caption,
+        stage,
+        follow,
+        verified,
+        audio,
+        media,
+        avatar,
+        type,
+        likes,
+        comments,
+        shares,
+        muted: sound,
+        onMutedChange: setSound,
+        liked: reacted,
+        onLikedChange: setReacted,
+        onAction,
+        className,
+        style,
+        htmlProps
+      }
+    );
+  if (surface === "story")
+    return /* @__PURE__ */ jsx(
+      FacebookStory,
+      {
+        name,
+        stamp,
+        audio,
+        ratio,
+        media,
+        avatar,
+        type,
+        segments,
+        segment,
+        muted: sound,
+        onMutedChange: setSound,
+        onAction,
+        className,
+        style,
+        htmlProps
+      }
+    );
+  return /* @__PURE__ */ jsx(
+    FacebookPost,
+    {
+      name,
+      caption,
+      stamp,
+      follow,
+      ring,
+      ratio,
+      media,
+      avatar,
+      type,
+      likes,
+      comments,
+      shares,
+      width,
+      liked: reacted,
+      onLikedChange: setReacted,
+      onAction,
+      className,
+      style,
+      htmlProps
+    }
+  );
+}
+
+export { FacebookFeed };
+//# sourceMappingURL=facebook-feed.js.map
+//# sourceMappingURL=facebook-feed.js.map