@zyncat/ui 0.10.0 → 0.12.0

package/src/components/expressive/facebook-feed/icons.tsx

@@ -0,0 +1,145 @@
+const VIEW_BOX = '0 0 24 24';
+
+export interface GlyphProps {
+  className: string;
+}
+
+export function PrivacyGlobe({ className }: GlyphProps) {
+  return (
+    <svg className={className} viewBox={VIEW_BOX} aria-hidden="true">
+      <circle cx="12" cy="12" r="10.6" />
+      <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" />
+      <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" />
+    </svg>
+  );
+}
+
+export function Dismiss({ className }: GlyphProps) {
+  return (
+    <svg className={className} viewBox={VIEW_BOX} aria-hidden="true">
+      <path d="M4.6 4.6 19.4 19.4M19.4 4.6 4.6 19.4" />
+    </svg>
+  );
+}
+
+export function ThumbOutline({ className }: GlyphProps) {
+  return (
+    <svg className={className} viewBox={VIEW_BOX} aria-hidden="true">
+      <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" />
+      <path d="M7.5 10.5v9.2" />
+    </svg>
+  );
+}
+
+export function CommentOutline({ className }: GlyphProps) {
+  return (
+    <svg className={className} viewBox={VIEW_BOX} aria-hidden="true">
+      <path d="M17.8 17.8a8.9 8.9 0 1 0-3.4 2.1l5.5.1z" />
+    </svg>
+  );
+}
+
+export function ShareOutline({ className }: GlyphProps) {
+  return (
+    <svg className={className} viewBox={VIEW_BOX} aria-hidden="true">
+      <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" />
+    </svg>
+  );
+}
+
+export function ThumbSolid() {
+  return (
+    <svg viewBox={VIEW_BOX} aria-hidden="true">
+      <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" />
+    </svg>
+  );
+}
+
+export function HeartSolid() {
+  return (
+    <svg viewBox={VIEW_BOX} aria-hidden="true">
+      <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" />
+    </svg>
+  );
+}
+
+export function VerifiedBadge({ className }: GlyphProps) {
+  return (
+    <svg className={className} viewBox={VIEW_BOX} aria-hidden="true">
+      <circle cx="12" cy="12" r="11" />
+      <path d="M6.8 12.4 10.3 15.8 17.2 8.7" />
+    </svg>
+  );
+}
+
+export function Magnifier({ className }: GlyphProps) {
+  return (
+    <svg className={className} viewBox={VIEW_BOX} aria-hidden="true">
+      <circle cx="10.4" cy="10.4" r="7.6" />
+      <path d="M16.1 16.1 21 21" />
+    </svg>
+  );
+}
+
+export function SpeakerOutlineOff({ className }: GlyphProps) {
+  return (
+    <svg className={className} viewBox={VIEW_BOX} aria-hidden="true">
+      <path d="M3.2 9.2h3.4L11 5.2v13.6l-4.4-4H3.2z" />
+      <path d="M15.6 9.6l4.8 4.8M20.4 9.6l-4.8 4.8" />
+    </svg>
+  );
+}
+
+export function SpeakerOutlineOn({ className }: GlyphProps) {
+  return (
+    <svg className={className} viewBox={VIEW_BOX} aria-hidden="true">
+      <path d="M3.2 9.2h3.4L11 5.2v13.6l-4.4-4H3.2z" />
+      <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" />
+    </svg>
+  );
+}
+
+export function SpeakerSolidOn({ className }: GlyphProps) {
+  return (
+    <svg className={className} viewBox={VIEW_BOX} aria-hidden="true">
+      <path d="M3 9.4h3.4L11 5.2v13.6L6.4 14.6H3z" />
+      <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" />
+    </svg>
+  );
+}
+
+export function SpeakerSolidOff({ className, crossClassName }: GlyphProps & { crossClassName: string }) {
+  return (
+    <svg className={className} viewBox={VIEW_BOX} aria-hidden="true">
+      <path d="M3 9.4h3.4L11 5.2v13.6L6.4 14.6H3z" />
+      <path className={crossClassName} d="M15.6 9.6l4.8 4.8M20.4 9.6l-4.8 4.8" />
+    </svg>
+  );
+}
+
+export function PlaySolid({ className }: GlyphProps) {
+  return (
+    <svg className={className} viewBox={VIEW_BOX} aria-hidden="true">
+      <path d="M5.5 2.8 20 12 5.5 21.2z" />
+    </svg>
+  );
+}
+
+export function AudienceFriends({ className }: GlyphProps) {
+  return (
+    <svg className={className} viewBox={VIEW_BOX} aria-hidden="true">
+      <circle cx="8.6" cy="8" r="3.7" />
+      <path d="M1.9 20.4c0-3.7 3-5.6 6.7-5.6s6.7 1.9 6.7 5.6z" />
+      <circle cx="17.2" cy="9.2" r="2.9" />
+      <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" />
+    </svg>
+  );
+}
+
+export function ChevronRight({ className }: GlyphProps) {
+  return (
+    <svg className={className} viewBox={VIEW_BOX} aria-hidden="true">
+      <path d="M8.5 3.5 17 12l-8.5 8.5" />
+    </svg>
+  );
+}

package/src/components/expressive/facebook-feed/post.tsx

@@ -0,0 +1,213 @@
+'use client';
+
+import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+
+import { cx } from '../../internal/utils/cx';
+import {
+  compactCount,
+  cutCaption,
+  MediaSurface,
+  Portrait,
+  splitCaption,
+  type FacebookFeedAction,
+  type FacebookMediaType,
+  type FacebookRatio,
+} from './chrome';
+import { CommentOutline, Dismiss, HeartSolid, PrivacyGlobe, ShareOutline, ThumbOutline, ThumbSolid } from './icons';
+
+export type FacebookPostWidth = 'mobile' | 'web';
+
+const KEBAB_PIPS = [0, 1, 2];
+const ELLIPSIS = '… ';
+const MIDDOT = '·';
+const FOLLOW_LABEL = 'Follow';
+const MORE_LABEL = 'See more';
+const REACTIONS_LABEL = 'Like and love reactions';
+const LIKE_LABEL = 'Like';
+const COMMENT_LABEL = 'Comment';
+const SHARE_LABEL = 'Share';
+const MENU_LABEL = 'More options';
+const DISMISS_LABEL = 'Hide post';
+
+export interface FacebookPostProps {
+  name: string;
+  caption: string;
+  stamp: string;
+  follow: boolean;
+  ring: boolean;
+  ratio: FacebookRatio;
+  media?: ReactNode;
+  avatar?: ReactNode;
+  type: FacebookMediaType;
+  likes: number;
+  comments: number;
+  shares: number;
+  width: FacebookPostWidth;
+  liked: boolean;
+  onLikedChange: (liked: boolean) => void;
+  onAction?: (action: FacebookFeedAction) => void;
+  className: string;
+  style?: CSSProperties;
+  htmlProps?: HTMLAttributes<HTMLElement>;
+}
+
+export function FacebookPost({
+  name,
+  caption,
+  stamp,
+  follow,
+  ring,
+  ratio,
+  media,
+  avatar,
+  type,
+  likes,
+  comments,
+  shares,
+  width,
+  liked,
+  onLikedChange,
+  onAction,
+  className,
+  style,
+  htmlProps,
+}: FacebookPostProps) {
+  const trimmed = cutCaption(caption);
+  const runs = splitCaption(trimmed.head);
+
+  return (
+    <article
+      className={cx(
+        'facebook-feed-post',
+        width === 'web' ? 'facebook-feed-post--web' : 'facebook-feed-post--mobile',
+        className,
+      )}
+      style={style}
+      {...htmlProps}
+    >
+      <div className="facebook-feed-post__header">
+        <div className={cx('facebook-feed-post__avatar', ring ? undefined : 'facebook-feed-post__avatar--plain')}>
+          <Portrait avatar={avatar} className="facebook-feed-post__portrait" />
+        </div>
+        <div className="facebook-feed-post__identity">
+          <div className="facebook-feed-post__name-row">
+            <span className="facebook-feed-post__name">{name}</span>
+            {follow ? (
+              <span className="facebook-feed-post__follow">
+                <span className="facebook-feed-post__separator">{MIDDOT}</span>
+                <button
+                  type="button"
+                  className="facebook-feed-button facebook-feed-post__follow-link"
+                  onClick={() => onAction?.('follow')}
+                >
+                  {FOLLOW_LABEL}
+                </button>
+              </span>
+            ) : null}
+          </div>
+          <div className="facebook-feed-post__meta">
+            <span>{stamp}</span>
+            <span aria-hidden="true">{MIDDOT}</span>
+            <PrivacyGlobe className="facebook-feed-post__globe" />
+          </div>
+        </div>
+        <div className="facebook-feed-post__controls">
+          <button
+            type="button"
+            className="facebook-feed-button facebook-feed-post__kebab"
+            aria-label={MENU_LABEL}
+            onClick={() => onAction?.('menu')}
+          >
+            {KEBAB_PIPS.map((pip) => (
+              <span key={pip} className="facebook-feed-post__pip" />
+            ))}
+          </button>
+          <button
+            type="button"
+            className="facebook-feed-button"
+            aria-label={DISMISS_LABEL}
+            onClick={() => onAction?.('dismiss')}
+          >
+            <Dismiss className="facebook-feed-post__close" />
+          </button>
+        </div>
+      </div>
+
+      <div className="facebook-feed-post__caption">
+        {runs.map((run, index) => (
+          <span key={index} className={run.link ? 'facebook-feed-post__link' : ''}>
+            {run.text}
+          </span>
+        ))}
+        {trimmed.cut ? (
+          <>
+            <span className="facebook-feed-post__ellipsis">{ELLIPSIS}</span>
+            <button
+              type="button"
+              className="facebook-feed-button facebook-feed-post__more"
+              onClick={() => onAction?.('more')}
+            >
+              {MORE_LABEL}
+            </button>
+          </>
+        ) : null}
+      </div>
+
+      <div className="facebook-feed-media facebook-feed-ratio" data-ratio={ratio}>
+        <MediaSurface
+          media={media}
+          type={type}
+          backClassName="facebook-feed-media__back"
+          frontClassName="facebook-feed-media__front"
+        />
+      </div>
+
+      <div className="facebook-feed-post__actions">
+        <div className="facebook-feed-post__stats">
+          <span className="facebook-feed-post__stat">
+            <button
+              type="button"
+              className="facebook-feed-button"
+              aria-label={LIKE_LABEL}
+              aria-pressed={liked}
+              onClick={() => onLikedChange(!liked)}
+            >
+              <ThumbOutline className="facebook-feed-post__glyph" />
+            </button>
+            {compactCount(likes + (liked ? 1 : 0))}
+          </span>
+          <span className="facebook-feed-post__stat">
+            <button
+              type="button"
+              className="facebook-feed-button"
+              aria-label={COMMENT_LABEL}
+              onClick={() => onAction?.('comment')}
+            >
+              <CommentOutline className="facebook-feed-post__glyph" />
+            </button>
+            {compactCount(comments)}
+          </span>
+          <span className="facebook-feed-post__stat">
+            <button
+              type="button"
+              className="facebook-feed-button"
+              aria-label={SHARE_LABEL}
+              onClick={() => onAction?.('share')}
+            >
+              <ShareOutline className="facebook-feed-post__glyph" />
+            </button>
+            {compactCount(shares)}
+          </span>
+        </div>
+        <div className="facebook-feed-post__reactions" role="img" aria-label={REACTIONS_LABEL}>
+          <span className="facebook-feed-post__reaction facebook-feed-post__reaction--like">
+            <ThumbSolid />
+          </span>
+          <span className="facebook-feed-post__reaction facebook-feed-post__reaction--love">
+            <HeartSolid />
+          </span>
+        </div>
+      </div>
+    </article>
+  );
+}

package/src/components/expressive/facebook-feed/reel.tsx

@@ -0,0 +1,199 @@
+'use client';
+
+import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+
+import { cx } from '../../internal/utils/cx';
+import { compactCount, MediaSurface, Portrait, type FacebookFeedAction, type FacebookMediaType } from './chrome';
+import {
+  CommentOutline,
+  Magnifier,
+  ShareOutline,
+  SpeakerOutlineOff,
+  SpeakerOutlineOn,
+  ThumbOutline,
+  VerifiedBadge,
+} from './icons';
+
+export type FacebookReelStage = 'narrow' | 'wide';
+
+const KEBAB_PIPS = [0, 1, 2];
+const MIDDOT = '·';
+const NOTE = '♪';
+const FOLLOW_LABEL = 'Follow';
+const MORE_LABEL = 'See more';
+const MUTE_LABEL = 'Mute';
+const LIKE_LABEL = 'Like';
+const COMMENT_LABEL = 'Comment';
+const SHARE_LABEL = 'Share';
+const MENU_LABEL = 'More options';
+const SEARCH_LABEL = 'Search';
+
+export interface FacebookReelProps {
+  name: string;
+  caption: string;
+  stage: FacebookReelStage;
+  follow: boolean;
+  verified: boolean;
+  audio: string;
+  media?: ReactNode;
+  avatar?: ReactNode;
+  type: FacebookMediaType;
+  likes: number;
+  comments: number;
+  shares: number;
+  muted: boolean;
+  onMutedChange: (muted: boolean) => void;
+  liked: boolean;
+  onLikedChange: (liked: boolean) => void;
+  onAction?: (action: FacebookFeedAction) => void;
+  className: string;
+  style?: CSSProperties;
+  htmlProps?: HTMLAttributes<HTMLElement>;
+}
+
+export function FacebookReel({
+  name,
+  caption,
+  stage,
+  follow,
+  verified,
+  audio,
+  media,
+  avatar,
+  type,
+  likes,
+  comments,
+  shares,
+  muted,
+  onMutedChange,
+  liked,
+  onLikedChange,
+  onAction,
+  className,
+  style,
+  htmlProps,
+}: FacebookReelProps) {
+  const wide = stage === 'wide';
+
+  return (
+    <article
+      className={cx('facebook-feed-reel', wide ? 'facebook-feed-reel--wide' : 'facebook-feed-reel--narrow', className)}
+      style={style}
+      {...htmlProps}
+    >
+      <div className="facebook-feed-media facebook-feed-reel__video">
+        <MediaSurface media={media} type={type} frontClassName="facebook-feed-media__front" />
+      </div>
+
+      <button
+        type="button"
+        className="facebook-feed-reel__mute"
+        aria-label={MUTE_LABEL}
+        aria-pressed={muted}
+        onClick={() => onMutedChange(!muted)}
+      >
+        {muted ? (
+          <SpeakerOutlineOff className="facebook-feed-reel__mute-glyph" />
+        ) : (
+          <SpeakerOutlineOn className="facebook-feed-reel__mute-glyph" />
+        )}
+      </button>
+
+      {wide ? (
+        <button
+          type="button"
+          className="facebook-feed-button facebook-feed-reel__search"
+          aria-label={SEARCH_LABEL}
+          onClick={() => onAction?.('search')}
+        >
+          <Magnifier className="facebook-feed-reel__search-glyph" />
+        </button>
+      ) : null}
+
+      <div className="facebook-feed-reel__rail">
+        <span className="facebook-feed-reel__stat">
+          <button
+            type="button"
+            className="facebook-feed-button"
+            aria-label={LIKE_LABEL}
+            aria-pressed={liked}
+            onClick={() => onLikedChange(!liked)}
+          >
+            <ThumbOutline className="facebook-feed-reel__stat-glyph" />
+          </button>
+          <span className="facebook-feed-reel__count">{compactCount(likes + (liked ? 1 : 0))}</span>
+        </span>
+        <span className="facebook-feed-reel__stat">
+          <button
+            type="button"
+            className="facebook-feed-button"
+            aria-label={COMMENT_LABEL}
+            onClick={() => onAction?.('comment')}
+          >
+            <CommentOutline className="facebook-feed-reel__stat-glyph" />
+          </button>
+          <span className="facebook-feed-reel__count">{compactCount(comments)}</span>
+        </span>
+        <span className="facebook-feed-reel__stat">
+          <button
+            type="button"
+            className="facebook-feed-button"
+            aria-label={SHARE_LABEL}
+            onClick={() => onAction?.('share')}
+          >
+            <ShareOutline className="facebook-feed-reel__stat-glyph" />
+          </button>
+          <span className="facebook-feed-reel__count">{compactCount(shares)}</span>
+        </span>
+        <button
+          type="button"
+          className="facebook-feed-button facebook-feed-reel__kebab"
+          aria-label={MENU_LABEL}
+          onClick={() => onAction?.('menu')}
+        >
+          {KEBAB_PIPS.map((pip) => (
+            <span key={pip} className="facebook-feed-reel__pip" />
+          ))}
+        </button>
+      </div>
+
+      <div className="facebook-feed-reel__overlay">
+        <div className="facebook-feed-reel__byline">
+          <Portrait avatar={avatar} className="facebook-feed-reel__avatar" />
+          <span className="facebook-feed-reel__name">{name}</span>
+          {verified ? <VerifiedBadge className="facebook-feed-reel__badge" /> : null}
+          {follow ? (
+            <span className="facebook-feed-reel__follow">
+              <span className="facebook-feed-reel__follow-dot">{MIDDOT}</span>
+              <button
+                type="button"
+                className="facebook-feed-button facebook-feed-reel__follow-label"
+                onClick={() => onAction?.('follow')}
+              >
+                {FOLLOW_LABEL}
+              </button>
+            </span>
+          ) : null}
+        </div>
+        {wide ? null : (
+          <div className="facebook-feed-reel__audio">
+            <span className="facebook-feed-reel__note" aria-hidden="true">
+              {NOTE}
+            </span>
+            <span className="facebook-feed-reel__audio-text">{`${name} ${MIDDOT} ${audio}`}</span>
+          </div>
+        )}
+        <div className="facebook-feed-reel__caption">
+          <span className="facebook-feed-reel__caption-text">{caption}</span>
+          <button
+            type="button"
+            className="facebook-feed-button facebook-feed-reel__more"
+            onClick={() => onAction?.('more')}
+          >
+            {MORE_LABEL}
+          </button>
+        </div>
+      </div>
+    </article>
+  );
+}

package/src/components/expressive/facebook-feed/story.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+
+import { cx } from '../../internal/utils/cx';
+import { MediaSurface, Portrait, type FacebookFeedAction, type FacebookMediaType, type FacebookRatio } from './chrome';
+import { AudienceFriends, ChevronRight, PlaySolid, SpeakerSolidOff, SpeakerSolidOn } from './icons';
+
+const KEBAB_PIPS = [0, 1, 2];
+const MIDDOT = '·';
+const NOTE = '♪';
+const MUTE_LABEL = 'Mute';
+const PLAY_LABEL = 'Play';
+const MENU_LABEL = 'More options';
+
+export interface FacebookStoryProps {
+  name: string;
+  stamp: string;
+  audio: string;
+  ratio: FacebookRatio;
+  media?: ReactNode;
+  avatar?: ReactNode;
+  type: FacebookMediaType;
+  segments: number;
+  segment: number;
+  muted: boolean;
+  onMutedChange: (muted: boolean) => void;
+  onAction?: (action: FacebookFeedAction) => void;
+  className: string;
+  style?: CSSProperties;
+  htmlProps?: HTMLAttributes<HTMLElement>;
+}
+
+export function FacebookStory({
+  name,
+  stamp,
+  audio,
+  ratio,
+  media,
+  avatar,
+  type,
+  segments,
+  segment,
+  muted,
+  onMutedChange,
+  onAction,
+  className,
+  style,
+  htmlProps,
+}: FacebookStoryProps) {
+  const track = Array.from({ length: Math.max(1, Math.round(segments)) }, (_, index) => index);
+
+  return (
+    <article className={cx('facebook-feed-story', className)} style={style} {...htmlProps}>
+      <div className="facebook-feed-story__stage">
+        <MediaSurface
+          media={media}
+          type={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}
+        />
+      </div>
+
+      <div className="facebook-feed-story__segments" aria-hidden="true">
+        {track.map((index) => (
+          <span
+            key={index}
+            className={cx(
+              'facebook-feed-story__segment',
+              index <= segment ? 'facebook-feed-story__segment--filled' : undefined,
+            )}
+          />
+        ))}
+      </div>
+
+      <div className="facebook-feed-story__header">
+        <Portrait avatar={avatar} className="facebook-feed-story__avatar" />
+        <div className="facebook-feed-story__identity">
+          <div className="facebook-feed-story__name-row">
+            <span className="facebook-feed-story__name">{name}</span>
+            <span className="facebook-feed-story__stamp">{stamp}</span>
+            <AudienceFriends className="facebook-feed-story__audience" />
+          </div>
+          <div className="facebook-feed-story__audio">
+            <span className="facebook-feed-story__note" aria-hidden="true">
+              {NOTE}
+            </span>
+            <span className="facebook-feed-story__audio-text">{`${name} ${MIDDOT} ${audio}`}</span>
+            <ChevronRight className="facebook-feed-story__chevron" />
+          </div>
+        </div>
+        <div className="facebook-feed-story__controls">
+          <button
+            type="button"
+            className="facebook-feed-story__mute"
+            aria-label={MUTE_LABEL}
+            aria-pressed={muted}
+            onClick={() => onMutedChange(!muted)}
+          >
+            {muted ? (
+              <SpeakerSolidOff
+                className="facebook-feed-story__mute-glyph"
+                crossClassName="facebook-feed-story__mute-cross"
+              />
+            ) : (
+              <SpeakerSolidOn className="facebook-feed-story__mute-glyph" />
+            )}
+          </button>
+          <button
+            type="button"
+            className="facebook-feed-button"
+            aria-label={PLAY_LABEL}
+            onClick={() => onAction?.('play')}
+          >
+            <PlaySolid className="facebook-feed-story__play" />
+          </button>
+          <button
+            type="button"
+            className="facebook-feed-button facebook-feed-story__kebab"
+            aria-label={MENU_LABEL}
+            onClick={() => onAction?.('menu')}
+          >
+            {KEBAB_PIPS.map((pip) => (
+              <span key={pip} className="facebook-feed-story__pip" />
+            ))}
+          </button>
+        </div>
+      </div>
+    </article>
+  );
+}