@sesionario/blocks 1.17.1 → 1.19.0

package/README.md

@@ -29,6 +29,19 @@ Peer dependencies (install in the consuming app as needed):
 - `react-phone-number-input` (PhoneInput — also import its CSS in your app layout)
 - `hls.js` (optional — VideoPlayer)
 
+### Payment icons (`PaymentIcon`)
+
+`PaymentIcon` wraps [`react-svg-credit-card-payment-icons`](https://www.npmjs.com/package/react-svg-credit-card-payment-icons) (pulled in as a dependency of this package). Pass a Stripe `card.brand` code:
+
+```tsx
+import { PaymentIcon, formatPaymentCardBrand } from "@sesionario/blocks";
+
+<PaymentIcon brand="amex" />
+<span>{formatPaymentCardBrand("amex")}</span> {/* American Express */}
+```
+
+Unknown or null brands render the Generic mark. Icon artwork is Apache-2.0 (Aaron Fagan / upstream package).
+
 ### Chat UI (`MessageScroller`, `ChatMessageList`, …)
 
 Apps that render chat scrollers should define this utility in global CSS (used by `MessageScrollerViewport`):

package/dist/index.cjs

@@ -22,6 +22,7 @@ var cmdk = require('cmdk');
 var RPNInput = require('react-phone-number-input');
 var flags = require('react-phone-number-input/flags');
 var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
+var reactSvgCreditCardPaymentIcons = require('react-svg-credit-card-payment-icons');
 var messageScroller = require('@shadcn/react/message-scroller');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -3788,7 +3789,7 @@ function insertAtCaret(element, value, text) {
 }
 
 // src/components/emoji/emoji-field-shared.ts
-var emojiFieldWrapperClassName = "relative w-full rounded-md border border-input bg-transparent shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-destructive/20 has-[:disabled]:opacity-50 dark:bg-input/30 dark:has-[[aria-invalid=true]]:ring-destructive/40";
+var emojiFieldWrapperClassName = "relative w-full rounded-md border border-input bg-transparent shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-destructive/20 has-[[data-slot=textarea]:disabled]:opacity-50 has-[[data-slot=input]:disabled]:opacity-50 dark:bg-input/30 dark:has-[[aria-invalid=true]]:ring-destructive/40";
 var emojiFieldResetClassName = "border-0 bg-transparent shadow-none focus-visible:border-transparent focus-visible:ring-0 dark:bg-transparent";
 function mergeRefs(...refs) {
   return (node) => {
@@ -4514,6 +4515,7 @@ function VideoPlayer({
   stats,
   labels,
   showQualitySelector = true,
+  paused = false,
   onPlayingChange,
   onFirstPlay,
   onError,
@@ -4605,6 +4607,11 @@ function VideoPlayer({
       video.removeEventListener("ratechange", onRate);
     };
   }, [videoRef, active, mode]);
+  React7__namespace.useEffect(() => {
+    const video = videoRef.current;
+    if (!paused || !video || !isPlaying) return;
+    video.pause();
+  }, [paused, videoRef, isPlaying]);
   React7__namespace.useEffect(() => {
     setWebkitFullscreenSupported(hasWebkitVideoFullscreen(videoRef.current));
   }, [videoRef, active]);
@@ -5112,6 +5119,106 @@ function MenuItem({
     }
   );
 }
+
+// src/components/video/feedPlaybackCoordinator.ts
+var players = /* @__PURE__ */ new Map();
+function registerFeedPlayer(id, pause) {
+  players.set(id, pause);
+  return () => {
+    if (players.get(id) === pause) {
+      players.delete(id);
+    }
+  };
+}
+function claimFeedPlaying(id) {
+  for (const [otherId, pause] of players) {
+    if (otherId !== id) pause();
+  }
+}
+
+// src/components/video/useFeedExclusivePlayback.ts
+var VISIBILITY_THRESHOLDS = [0, 0.5, 1];
+var MIN_VISIBLE_RATIO = 0.5;
+function videoInPictureInPicture(container) {
+  if (typeof document === "undefined" || !container) return false;
+  const pip = document.pictureInPictureElement;
+  if (!pip) return false;
+  return container.contains(pip);
+}
+function useFeedExclusivePlayback(playbackId) {
+  const containerRef = React7__namespace.useRef(null);
+  const [forcePaused, setForcePaused] = React7__namespace.useState(false);
+  const requestPause = React7__namespace.useCallback(() => {
+    if (videoInPictureInPicture(containerRef.current)) return;
+    setForcePaused(true);
+  }, []);
+  React7__namespace.useEffect(() => {
+    return registerFeedPlayer(playbackId, requestPause);
+  }, [playbackId, requestPause]);
+  React7__namespace.useEffect(() => {
+    const node = containerRef.current;
+    if (!node || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (!entry) return;
+        if (!entry.isIntersecting || entry.intersectionRatio < MIN_VISIBLE_RATIO) {
+          requestPause();
+        }
+      },
+      { threshold: [...VISIBILITY_THRESHOLDS] }
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [requestPause]);
+  React7__namespace.useEffect(() => {
+    const onVisibility = () => {
+      if (document.hidden) requestPause();
+    };
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => document.removeEventListener("visibilitychange", onVisibility);
+  }, [requestPause]);
+  const onPlayingChange = React7__namespace.useCallback(
+    (playing) => {
+      if (!playing) return;
+      setForcePaused(false);
+      claimFeedPlaying(playbackId);
+    },
+    [playbackId]
+  );
+  return {
+    containerRef,
+    paused: forcePaused,
+    onPlayingChange
+  };
+}
+function FeedVideoPlayer({
+  playbackId,
+  onPlayingChange,
+  paused: pausedProp,
+  ...playerProps
+}) {
+  const {
+    containerRef,
+    paused: exclusivePaused,
+    onPlayingChange: onExclusivePlayingChange
+  } = useFeedExclusivePlayback(playbackId);
+  const handlePlayingChange = React7__namespace.useCallback(
+    (playing) => {
+      onExclusivePlayingChange(playing);
+      onPlayingChange?.(playing);
+    },
+    [onExclusivePlayingChange, onPlayingChange]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, "data-slot": "feed-video-player", children: /* @__PURE__ */ jsxRuntime.jsx(
+    VideoPlayer,
+    {
+      ...playerProps,
+      paused: pausedProp || exclusivePaused,
+      onPlayingChange: handlePlayingChange
+    }
+  ) });
+}
 function usePlaybackStats(statsUrl, { intervalMs = 15e3, enabled = true } = {}) {
   const [stats, setStats] = React7__namespace.useState({});
   React7__namespace.useEffect(() => {
@@ -6404,6 +6511,63 @@ function MexicoMap({ selected, onToggle, className }) {
     }
   );
 }
+
+// src/lib/paymentCardBrand.ts
+var CARD_BRAND_LABELS = {
+  visa: "Visa",
+  mastercard: "Mastercard",
+  amex: "American Express",
+  discover: "Discover",
+  diners: "Diners Club",
+  jcb: "JCB",
+  unionpay: "UnionPay"
+};
+var STRIPE_TO_PAYMENT_TYPE = {
+  visa: "Visa",
+  mastercard: "Mastercard",
+  amex: "AmericanExpress",
+  discover: "Discover",
+  diners: "DinersClub",
+  jcb: "JCB",
+  unionpay: "UnionPay"
+};
+function normalizePaymentCardBrand(brand) {
+  if (!brand?.trim()) return null;
+  return brand.trim().toLowerCase();
+}
+function formatPaymentCardBrand(brand) {
+  if (!brand?.trim()) return "Card";
+  const key = brand.trim().toLowerCase();
+  const known = CARD_BRAND_LABELS[key];
+  if (known) return known;
+  return key.charAt(0).toUpperCase() + key.slice(1);
+}
+function paymentTypeFromStripeBrand(brand) {
+  const key = normalizePaymentCardBrand(brand);
+  if (!key) return "Generic";
+  return STRIPE_TO_PAYMENT_TYPE[key] ?? "Generic";
+}
+var DEFAULT_FORMAT = "flatRounded";
+var DEFAULT_WIDTH = 36;
+function PaymentIcon({
+  brand,
+  format = DEFAULT_FORMAT,
+  width = DEFAULT_WIDTH,
+  height,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactSvgCreditCardPaymentIcons.PaymentIcon,
+    {
+      type: paymentTypeFromStripeBrand(brand),
+      format,
+      width,
+      height,
+      className: cn("inline-block shrink-0", className),
+      "aria-hidden": true
+    }
+  );
+}
 function MessageGroup({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -7769,6 +7933,7 @@ exports.EmptyState = EmptyState;
 exports.EmptyTitle = EmptyTitle;
 exports.ErrorState = ErrorState;
 exports.ExpandableText = ExpandableText;
+exports.FeedVideoPlayer = FeedVideoPlayer;
 exports.ImageLightbox = ImageLightbox;
 exports.LanguageContext = LanguageContext;
 exports.LanguageSwitcher = LanguageSwitcher;
@@ -7794,6 +7959,7 @@ exports.MessageScrollerViewport = MessageScrollerViewport;
 exports.MexicoMap = MexicoMap;
 exports.OrgSwitcher = OrgSwitcher;
 exports.PLATFORM_ACCOUNT_ORG_COLLAPSE_AT = PLATFORM_ACCOUNT_ORG_COLLAPSE_AT;
+exports.PaymentIcon = PaymentIcon;
 exports.PhoneInput = PhoneInput;
 exports.PlatformAccountMenu = PlatformAccountMenu;
 exports.PlatformNavbar = PlatformNavbar;
@@ -7812,6 +7978,7 @@ exports.createVodHlsConfig = createVodHlsConfig;
 exports.defaultLanguages = defaultLanguages;
 exports.describeAvResync = describeAvResync;
 exports.describePlaybackError = describePlaybackError;
+exports.formatPaymentCardBrand = formatPaymentCardBrand;
 exports.fuzzyMatch = fuzzyMatch;
 exports.getAvatarColors = getAvatarColors;
 exports.getInitials = getInitials;
@@ -7819,9 +7986,12 @@ exports.insertAtCaret = insertAtCaret;
 exports.markerVariants = markerVariants;
 exports.mergePlatformAccountOrgs = mergePlatformAccountOrgs;
 exports.normalizeEmojiQuery = normalizeEmojiQuery;
+exports.normalizePaymentCardBrand = normalizePaymentCardBrand;
+exports.paymentTypeFromStripeBrand = paymentTypeFromStripeBrand;
 exports.shouldRetryLiveEdge404 = shouldRetryLiveEdge404;
 exports.useDebouncedValue = useDebouncedValue;
 exports.useDebouncedValueStrict = useDebouncedValueStrict;
+exports.useFeedExclusivePlayback = useFeedExclusivePlayback;
 exports.useHlsPlayback = useHlsPlayback;
 exports.useLanguageContext = useLanguageContext;
 exports.useMediaQuery = useMediaQuery2;