@zyncat/ui 0.11.0 → 0.13.0

package/dist/instagram-feed.css

@@ -0,0 +1,378 @@
+@layer zyncat.tokens, zyncat.components;
+
+@layer zyncat.components {
+  .instagram-feed,
+  .instagram-feed *,
+  .instagram-feed *::before,
+  .instagram-feed *::after {
+    box-sizing: border-box;
+  }
+
+  .instagram-feed {
+    display: block;
+    width: min(390px, 100%);
+    border: 1px solid #dbdbdb;
+    background: #ffffff;
+    color: #262626;
+    font-family: var(--font-sans);
+    font-size: 14px;
+    line-height: 18px;
+    text-align: start;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .instagram-feed[data-width='web'] {
+    width: min(470px, 100%);
+    overflow: hidden;
+    border-radius: 8px;
+  }
+
+  .instagram-feed__frame {
+    position: relative;
+  }
+
+  .instagram-feed__header {
+    position: relative;
+    z-index: 3;
+    display: flex;
+    gap: 11px;
+    align-items: center;
+    padding: 10px 12px;
+  }
+
+  .instagram-feed[data-width='web'] .instagram-feed__header {
+    padding: 12px 14px;
+  }
+
+  .instagram-feed[data-type='video'] .instagram-feed__header {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    color: #ffffff;
+  }
+
+  .instagram-feed__ring {
+    display: block;
+    flex: 0 0 auto;
+    width: 38px;
+    height: 38px;
+    padding: 2px;
+    border-radius: 50%;
+    background: linear-gradient(45deg, #f5a04b, #d64a6e, #8b5cf6);
+  }
+
+  .instagram-feed__avatar {
+    display: block;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    border: 2px solid #ffffff;
+    border-radius: 50%;
+    background: #efefef;
+  }
+
+  .instagram-feed__avatar > * {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .instagram-feed__identity {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 1px;
+    min-width: 0;
+  }
+
+  .instagram-feed__line {
+    display: flex;
+    gap: 5px;
+    align-items: center;
+    min-width: 0;
+    font-size: 14px;
+    line-height: 18px;
+  }
+
+  .instagram-feed__handle {
+    overflow: hidden;
+    font-weight: 600;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .instagram-feed__sep,
+  .instagram-feed__stamp {
+    flex: 0 0 auto;
+    opacity: 0.72;
+  }
+
+  .instagram-feed__audio {
+    overflow: hidden;
+    font-size: 12px;
+    line-height: 15px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    opacity: 0.72;
+  }
+
+  .instagram-feed__follow,
+  .instagram-feed__menu,
+  .instagram-feed__glyph-button,
+  .instagram-feed__mute {
+    appearance: none;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+    transition:
+      opacity var(--duration-fast) var(--ease-standard),
+      background-color var(--duration-fast) var(--ease-standard);
+  }
+
+  .instagram-feed__follow {
+    flex: 0 0 auto;
+    padding: 7px 15px;
+    border-radius: 8px;
+    background: #efefef;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 18px;
+  }
+
+  .instagram-feed[data-type='video'] .instagram-feed__follow {
+    padding: 0;
+    background: transparent;
+  }
+
+  .instagram-feed__follow:hover {
+    background: #dbdbdb;
+  }
+
+  .instagram-feed[data-type='video'] .instagram-feed__follow:hover {
+    background: transparent;
+    opacity: 0.7;
+  }
+
+  .instagram-feed__menu {
+    position: relative;
+    display: flex;
+    flex: 0 0 auto;
+    gap: 3px;
+    align-items: center;
+    padding: 2px 4px;
+    border-radius: 4px;
+  }
+
+  .instagram-feed__menu::before {
+    content: '';
+    position: absolute;
+    inset: -9px;
+  }
+
+  .instagram-feed__pip {
+    display: block;
+    width: 3.5px;
+    height: 3.5px;
+    border-radius: 50%;
+    background: currentColor;
+  }
+
+  .instagram-feed__media {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    aspect-ratio: 4 / 5;
+    background: #efefef;
+  }
+
+  .instagram-feed[data-ratio='1:1'] .instagram-feed__media {
+    aspect-ratio: 1 / 1;
+  }
+
+  .instagram-feed[data-type='video'] .instagram-feed__media {
+    background: #000000;
+  }
+
+  .instagram-feed__slot {
+    position: absolute;
+    inset: 0;
+    display: block;
+  }
+
+  .instagram-feed__slot > * {
+    position: absolute;
+    inset: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .instagram-feed[data-type='video'] .instagram-feed__slot > * {
+    object-fit: contain;
+  }
+
+  .instagram-feed__mute {
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+    z-index: 2;
+    display: grid;
+    place-items: center;
+    width: 26px;
+    height: 26px;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.5);
+  }
+
+  .instagram-feed[data-width='web'] .instagram-feed__mute {
+    right: 12px;
+    bottom: 12px;
+    width: 28px;
+    height: 28px;
+  }
+
+  .instagram-feed__mute-glyph {
+    display: block;
+    width: 15px;
+    height: 15px;
+    fill: none;
+    stroke: #ffffff;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 1.9;
+  }
+
+  .instagram-feed[data-width='web'] .instagram-feed__mute-glyph {
+    width: 16px;
+    height: 16px;
+  }
+
+  .instagram-feed__burst {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    display: block;
+    width: 88px;
+    height: 88px;
+    margin: auto;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .instagram-feed__burst-glyph {
+    display: block;
+    width: 100%;
+    height: 100%;
+    fill: #ffffff;
+    stroke: none;
+    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
+  }
+
+  .instagram-feed__actions {
+    display: flex;
+    align-items: center;
+    padding: 9px 12px 5px;
+  }
+
+  .instagram-feed[data-width='web'] .instagram-feed__actions {
+    padding: 10px 14px 6px;
+  }
+
+  .instagram-feed__group {
+    display: flex;
+    flex: 1;
+    gap: 15px;
+    align-items: center;
+    min-width: 0;
+  }
+
+  .instagram-feed[data-width='web'] .instagram-feed__group {
+    gap: 16px;
+  }
+
+  .instagram-feed__action {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+  }
+
+  .instagram-feed__count {
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 18px;
+  }
+
+  .instagram-feed__glyph-button {
+    display: grid;
+    flex: 0 0 auto;
+    place-items: center;
+    border-radius: 4px;
+  }
+
+  .instagram-feed__glyph-button:hover,
+  .instagram-feed__menu:hover {
+    opacity: 0.6;
+  }
+
+  .instagram-feed__glyph {
+    display: block;
+    width: 24px;
+    height: 24px;
+    fill: none;
+    stroke: currentColor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 1.7;
+    transition:
+      fill var(--duration-fast) var(--ease-standard),
+      stroke var(--duration-fast) var(--ease-standard);
+  }
+
+  .instagram-feed__glyph-button[aria-pressed='true'] .instagram-feed__glyph--like {
+    fill: #ff3040;
+    stroke: #ff3040;
+  }
+
+  .instagram-feed__glyph-button[aria-pressed='true'] .instagram-feed__glyph--save {
+    fill: currentColor;
+  }
+
+  .instagram-feed__caption {
+    margin: 0;
+    padding: 0 12px 14px;
+    font-size: 14px;
+    line-height: 18px;
+    text-wrap: pretty;
+  }
+
+  .instagram-feed[data-width='web'] .instagram-feed__caption {
+    padding: 0 14px 16px;
+  }
+
+  .instagram-feed__author {
+    font-weight: 600;
+  }
+
+  .instagram-feed__link {
+    color: #00376b;
+  }
+
+  .instagram-feed__more {
+    color: #8e8e8e;
+  }
+
+  .instagram-feed__follow:focus-visible,
+  .instagram-feed__menu:focus-visible,
+  .instagram-feed__glyph-button:focus-visible,
+  .instagram-feed__mute:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring);
+  }
+}

package/dist/instagram-feed.js

@@ -0,0 +1,272 @@
+'use client';import { animate } from './chunk-IJS7TPGV.js';
+import { useControllable } from './chunk-MMRIQNEN.js';
+import { UIMotion } from './chunk-7IZJERGA.js';
+import { cx } from './chunk-QGNC7LH5.js';
+import './instagram-feed.css';
+import { useId, useRef } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var CAPTION_LIMIT = 125;
+var CAPTION_BREAK_RATIO = 0.65;
+var THOUSAND = 1e3;
+var MILLION = 1e6;
+var COMPACT_DIGITS = 1;
+var LIKE_POP_FROM = 0.8;
+var SAVE_POP_FROM = 0.86;
+var BURST_ENTER_FROM = 0.4;
+var BURST_BOUNCE = 0.42;
+var BURST_EXIT_SCALE = 1.25;
+var DEFAULT_AUDIO = "Original audio";
+var SEPARATOR = "\u2022";
+var ELLIPSIS_MORE = "... more";
+var CAPTION_SEGMENTS = /([#@][^\s#@]+)/g;
+var TRAILING_PUNCTUATION = /[\s,.;:—-]+$/;
+var TRAILING_ZERO = /\.0$/;
+var HEART = [
+  "M20.8 4.9a5.4 5.4 0 0 0-7.7 0L12 6l-1.1-1.1a5.4 5.4 0 0 0-7.7 7.7l8.8 8.8 8.8-8.8a5.4 5.4 0 0 0 0-7.7z"
+];
+var SPEECH = [
+  "M21 11.6a8.4 8.4 0 0 1-8.5 8.4 8.6 8.6 0 0 1-4-1L3 20.9l1.9-4.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 8.5-8.4 8.4 8.4 0 0 1 8.5 8.4z"
+];
+var REPOST = [
+  "M7.5 4.5 4 8l3.5 3.5",
+  "M4 8h12a4 4 0 0 1 4 4v1",
+  "M16.5 19.5 20 16l-3.5-3.5",
+  "M20 16H8a4 4 0 0 1-4-4v-1"
+];
+var PAPER_PLANE = ["M22 3 2 10.5l8 3.2 3.2 8L22 3z", "M10 13.7 22 3"];
+var BOOKMARK = ["M6 3h12a.9.9 0 0 1 .9.9V21L12 16.2 5.1 21V3.9A.9.9 0 0 1 6 3z"];
+var SPEAKER_BODY = "M11 5 6.5 9H3v6h3.5L11 19z";
+var SPEAKER_MUTED = [SPEAKER_BODY, "M16 9.5 21 15", "M21 9.5 16 15"];
+var SPEAKER_LOUD = [SPEAKER_BODY, "M16 9.6a4 4 0 0 1 0 4.8", "M18.6 7.2a7.6 7.6 0 0 1 0 9.6"];
+function paths(list) {
+  return list.map((d) => /* @__PURE__ */ jsx("path", { d }, d));
+}
+function compact(value) {
+  const rounded = Math.max(0, Math.round(Number(value) || 0));
+  if (rounded >= MILLION) return `${(rounded / MILLION).toFixed(COMPACT_DIGITS).replace(TRAILING_ZERO, "")}M`;
+  if (rounded >= THOUSAND) return `${(rounded / THOUSAND).toFixed(COMPACT_DIGITS).replace(TRAILING_ZERO, "")}K`;
+  return String(rounded);
+}
+function clipCaption(text) {
+  if (text.length <= CAPTION_LIMIT) return { head: text, clipped: false };
+  let breakAt = text.lastIndexOf(" ", CAPTION_LIMIT);
+  if (breakAt < CAPTION_LIMIT * CAPTION_BREAK_RATIO) breakAt = CAPTION_LIMIT;
+  return { head: text.slice(0, breakAt).replace(TRAILING_PUNCTUATION, ""), clipped: true };
+}
+function captionSegments(text) {
+  return text.split(CAPTION_SEGMENTS).filter(Boolean).map((segment, index) => ({ key: `${index}-${segment}`, text: segment, link: /^[#@]/.test(segment) }));
+}
+function slotted(source) {
+  if (typeof source !== "string") return source;
+  return source ? /* @__PURE__ */ jsx("img", { src: source, alt: "" }) : null;
+}
+function pop(el, from) {
+  if (el) animate(el, { scale: [from, 1], timing: UIMotion.t.settle });
+}
+function InstagramFeed({
+  type = "image",
+  width = "web",
+  handle,
+  caption = "",
+  ratio = "4:5",
+  media,
+  avatar,
+  audio = DEFAULT_AUDIO,
+  stamp,
+  likes = 0,
+  comments = 0,
+  reposts = 0,
+  liked,
+  defaultLiked = false,
+  onLikedChange,
+  saved,
+  defaultSaved = false,
+  onSavedChange,
+  muted,
+  defaultMuted = true,
+  onMutedChange,
+  onAction,
+  className = "",
+  style,
+  htmlProps
+}) {
+  const handleId = useId();
+  const likeRef = useRef(null);
+  const saveRef = useRef(null);
+  const burstRef = useRef(null);
+  const burstToken = useRef(0);
+  const [isLiked, setLiked] = useControllable(liked, defaultLiked, onLikedChange);
+  const [isSaved, setSaved] = useControllable(saved, defaultSaved, onSavedChange);
+  const [isMuted, setMuted] = useControllable(muted, defaultMuted, onMutedChange);
+  const isVideo = type === "video";
+  const clipped = clipCaption(caption);
+  const segments = captionSegments(clipped.head);
+  const toggleLike = () => {
+    setLiked(!isLiked);
+    pop(likeRef.current, LIKE_POP_FROM);
+  };
+  const toggleSave = () => {
+    setSaved(!isSaved);
+    pop(saveRef.current, SAVE_POP_FROM);
+  };
+  const burstLike = () => {
+    if (!isLiked) {
+      setLiked(true);
+      pop(likeRef.current, LIKE_POP_FROM);
+    }
+    const el = burstRef.current;
+    if (!el || UIMotion.reduced) return;
+    const token = ++burstToken.current;
+    void animate(el, {
+      scale: [BURST_ENTER_FROM, 1],
+      opacity: [0, 1],
+      timing: { type: "spring", visualDuration: UIMotion.dur.base, bounce: BURST_BOUNCE }
+    }).finished.then(() => {
+      if (token !== burstToken.current) return;
+      animate(el, {
+        scale: [BURST_EXIT_SCALE],
+        opacity: [0],
+        timing: { duration: UIMotion.dur.slow, ease: UIMotion.ease.exit, delay: UIMotion.dur.fast }
+      });
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      ...htmlProps,
+      className: cx("instagram-feed", className),
+      style,
+      "aria-labelledby": handleId,
+      "data-type": type,
+      "data-width": width,
+      "data-ratio": ratio,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "instagram-feed__frame", children: [
+          /* @__PURE__ */ jsxs("div", { className: "instagram-feed__header", children: [
+            /* @__PURE__ */ jsx("span", { className: "instagram-feed__ring", children: /* @__PURE__ */ jsx("span", { className: "instagram-feed__avatar", children: slotted(avatar) }) }),
+            /* @__PURE__ */ jsxs("div", { className: "instagram-feed__identity", children: [
+              /* @__PURE__ */ jsxs("div", { className: "instagram-feed__line", children: [
+                /* @__PURE__ */ jsx("span", { className: "instagram-feed__handle", id: handleId, children: handle }),
+                stamp ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("span", { className: "instagram-feed__sep", "aria-hidden": "true", children: SEPARATOR }),
+                  /* @__PURE__ */ jsx("span", { className: "instagram-feed__stamp", children: stamp })
+                ] }) : null
+              ] }),
+              isVideo ? /* @__PURE__ */ jsx("div", { className: "instagram-feed__audio", children: audio }) : null
+            ] }),
+            width === "web" ? /* @__PURE__ */ jsx("button", { type: "button", className: "instagram-feed__follow", onClick: () => onAction?.("follow"), children: "Follow" }) : null,
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "instagram-feed__menu",
+                "aria-label": "More options",
+                onClick: () => onAction?.("menu"),
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "instagram-feed__pip" }),
+                  /* @__PURE__ */ jsx("span", { className: "instagram-feed__pip" }),
+                  /* @__PURE__ */ jsx("span", { className: "instagram-feed__pip" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "instagram-feed__media", onDoubleClick: burstLike, children: [
+            /* @__PURE__ */ jsx("span", { className: "instagram-feed__slot", children: slotted(media) }),
+            /* @__PURE__ */ jsx("span", { ref: burstRef, className: "instagram-feed__burst", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { className: "instagram-feed__burst-glyph", viewBox: "0 0 24 24", children: paths(HEART) }) }),
+            isVideo ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "instagram-feed__mute",
+                "aria-pressed": isMuted,
+                "aria-label": "Mute",
+                onClick: () => setMuted(!isMuted),
+                children: /* @__PURE__ */ jsx("svg", { className: "instagram-feed__mute-glyph", viewBox: "0 0 24 24", "aria-hidden": "true", children: paths(isMuted ? SPEAKER_MUTED : SPEAKER_LOUD) })
+              }
+            ) : null
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "instagram-feed__actions", children: [
+          /* @__PURE__ */ jsxs("div", { className: "instagram-feed__group", children: [
+            /* @__PURE__ */ jsxs("span", { className: "instagram-feed__action", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  ref: likeRef,
+                  type: "button",
+                  className: "instagram-feed__glyph-button",
+                  "aria-pressed": isLiked,
+                  "aria-label": "Like",
+                  onClick: toggleLike,
+                  children: /* @__PURE__ */ jsx("svg", { className: "instagram-feed__glyph instagram-feed__glyph--like", viewBox: "0 0 24 24", "aria-hidden": "true", children: paths(HEART) })
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "instagram-feed__count", children: compact(likes + (isLiked ? 1 : 0)) })
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "instagram-feed__action", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "instagram-feed__glyph-button",
+                  "aria-label": "Comment",
+                  onClick: () => onAction?.("comment"),
+                  children: /* @__PURE__ */ jsx("svg", { className: "instagram-feed__glyph", viewBox: "0 0 24 24", "aria-hidden": "true", children: paths(SPEECH) })
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "instagram-feed__count", children: compact(comments) })
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "instagram-feed__action", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "instagram-feed__glyph-button",
+                  "aria-label": "Repost",
+                  onClick: () => onAction?.("repost"),
+                  children: /* @__PURE__ */ jsx("svg", { className: "instagram-feed__glyph", viewBox: "0 0 24 24", "aria-hidden": "true", children: paths(REPOST) })
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "instagram-feed__count", children: compact(reposts) })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "instagram-feed__glyph-button",
+                "aria-label": "Share",
+                onClick: () => onAction?.("send"),
+                children: /* @__PURE__ */ jsx("svg", { className: "instagram-feed__glyph", viewBox: "0 0 24 24", "aria-hidden": "true", children: paths(PAPER_PLANE) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              ref: saveRef,
+              type: "button",
+              className: "instagram-feed__glyph-button",
+              "aria-pressed": isSaved,
+              "aria-label": "Save",
+              onClick: toggleSave,
+              children: /* @__PURE__ */ jsx("svg", { className: "instagram-feed__glyph instagram-feed__glyph--save", viewBox: "0 0 24 24", "aria-hidden": "true", children: paths(BOOKMARK) })
+            }
+          )
+        ] }),
+        caption ? /* @__PURE__ */ jsxs("p", { className: "instagram-feed__caption", children: [
+          /* @__PURE__ */ jsx("span", { className: "instagram-feed__author", children: handle }),
+          " ",
+          segments.map(
+            (segment) => segment.link ? /* @__PURE__ */ jsx("span", { className: "instagram-feed__link", children: segment.text }, segment.key) : /* @__PURE__ */ jsx("span", { children: segment.text }, segment.key)
+          ),
+          clipped.clipped ? /* @__PURE__ */ jsx("span", { className: "instagram-feed__more", children: ELLIPSIS_MORE }) : null
+        ] }) : null
+      ]
+    }
+  );
+}
+
+export { InstagramFeed };
+//# sourceMappingURL=instagram-feed.js.map
+//# sourceMappingURL=instagram-feed.js.map