@zyncat/ui 0.10.0 → 0.12.0

package/src/components/expressive/typing-lines/typing-lines.css

@@ -0,0 +1,92 @@
+@layer zyncat.tokens, zyncat.components;
+
+@layer zyncat.components {
+  .typing-lines {
+    --typing-lines-ink: var(--text-strong);
+    --typing-lines-caret-ink: var(--accent);
+    --typing-lines-size: var(--size-title);
+    --typing-lines-weight: var(--weight-regular);
+    --typing-lines-leading: 1.4;
+    --typing-lines-blink: 1080ms;
+    --typing-lines-caret-gap: 0.12em;
+
+    position: relative;
+    display: block;
+    min-height: calc(var(--typing-lines-size) * var(--typing-lines-leading));
+    font-family: var(--font-sans);
+    font-size: var(--typing-lines-size);
+    font-weight: var(--typing-lines-weight);
+    line-height: var(--typing-lines-leading);
+    color: var(--typing-lines-ink);
+    text-wrap: pretty;
+  }
+
+  .typing-lines__label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .typing-lines__caret {
+    display: inline-block;
+    margin-left: var(--typing-lines-caret-gap);
+    background: var(--typing-lines-caret-ink);
+    vertical-align: -0.16em;
+  }
+
+  .typing-lines__caret--line {
+    width: 2px;
+    height: 1.1em;
+  }
+
+  .typing-lines__caret--block {
+    width: 0.52em;
+    height: 1.05em;
+    border-radius: 1px;
+    vertical-align: -0.14em;
+  }
+
+  .typing-lines__caret--underscore {
+    width: 0.55em;
+    height: 2px;
+    vertical-align: -0.08em;
+  }
+
+  .typing-lines__caret--blinking {
+    animation: typing-lines-blink var(--typing-lines-blink) step-end infinite;
+  }
+
+  .typing-lines__word {
+    display: inline-block;
+    animation: typing-lines-word var(--duration-base) var(--ease-entrance) both;
+  }
+
+  @keyframes typing-lines-blink {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes typing-lines-word {
+    from {
+      opacity: 0;
+      translate: 0 0.2em;
+    }
+    to {
+      opacity: 1;
+      translate: 0 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .typing-lines__caret--blinking {
+      animation: none;
+    }
+  }
+}

package/src/components/expressive/weight-field/WeightField.tsx

@@ -0,0 +1,41 @@
+import './weight-field.css';
+
+import type { CSSProperties, HTMLAttributes } from 'react';
+
+import type { DataAttributes } from '../../../dom-props';
+import type { WeightFieldStyle } from '../../../tokens/component-styles.generated';
+import { cx } from '../../internal/utils/cx';
+
+const SPACE = ' ';
+const NO_BREAK_SPACE = '\u00A0';
+
+export interface WeightFieldOwnProps {
+  /** The headline the field is built from. Every character becomes its own hover unit, spaces included. */
+  text: string;
+  /** Multiplies the ramp rate - 2 halves the settle, 0.5 doubles it. @default 1 */
+  speed?: number;
+  /** Extra class(es) merged onto the root. */
+  className?: string;
+  /** Inline styles merged onto the root. */
+  style?: WeightFieldStyle;
+}
+
+export interface WeightFieldProps extends WeightFieldOwnProps {
+  /** Standard <span> attributes (aria-*, data-*, title, ...) forwarded to the root. */
+  htmlProps?: Omit<HTMLAttributes<HTMLSpanElement>, keyof WeightFieldOwnProps> & DataAttributes;
+}
+
+export function WeightField({ text, speed = 1, className = '', style, htmlProps }: WeightFieldProps) {
+  const ramp = { ...style, '--weight-field-speed': speed } as CSSProperties;
+
+  return (
+    <span className={cx('weight-field', className)} style={ramp} {...htmlProps}>
+      {[...text].map((glyph, index) => (
+        <span key={index} className="weight-field__unit" aria-hidden="true">
+          {glyph === SPACE ? NO_BREAK_SPACE : glyph}
+        </span>
+      ))}
+      <span className="weight-field__label">{text}</span>
+    </span>
+  );
+}

package/src/components/expressive/weight-field/WeightField.usage.md

@@ -0,0 +1,20 @@
+# WeightField - @zyncat/ui/weight-field
+
+Group: expressive
+Docs: https://ui.zyncat.app/weight-field
+
+A display headline where hovering one letter ramps its variable-font wght to the peak and its two neighbours either side part-way, so weight spills outward from the cursor.
+
+Every character is its own hover unit, spaces included, and the ramp reads purely from CSS sibling
+state - no pointer listener, no per-frame work. The hovered letter takes the peak weight, a doubled text
+stroke and a sliver of padding either side; its immediate neighbours take the near weight and the same
+padding; the two beyond them take the far weight only. text is the headline; speed multiplies the ramp
+rate. Retune through --weight-field-* on the root: ink, size, leading, align, pad, tracking, rest-weight,
+far-weight, near-weight, peak-weight, hover-padding, stroke, stroke-peak, duration, ease. Flatten
+near-weight and far-weight onto rest-weight and only the hovered letter answers. Needs a variable face to
+glide rather than step. The headline is exposed to screen readers, every glyph is aria-hidden; reduced
+motion collapses the ramp to a cut.
+
+```tsx
+<WeightField text="Nostalgia" speed={1.2} />
+```

package/src/components/expressive/weight-field/weight-field.css

@@ -0,0 +1,84 @@
+@layer zyncat.tokens, zyncat.components;
+
+@layer zyncat.components {
+  .weight-field {
+    --weight-field-ink: var(--text-strong);
+    --weight-field-size: 6rem;
+    --weight-field-leading: 1;
+    --weight-field-align: center;
+    --weight-field-pad: var(--space-6) var(--space-4);
+    --weight-field-tracking: -0.05em;
+    --weight-field-rest-weight: 300;
+    --weight-field-far-weight: 400;
+    --weight-field-near-weight: 600;
+    --weight-field-peak-weight: 900;
+    --weight-field-hover-padding: calc(1em / 12);
+    --weight-field-stroke: calc(1em * 125 / 6000);
+    --weight-field-stroke-peak: calc(var(--weight-field-stroke) * 2);
+    --weight-field-duration: 400ms;
+    --weight-field-ease: ease;
+    --weight-field-speed: 1;
+    --weight-field-ramp: calc(var(--weight-field-duration) / var(--weight-field-speed));
+
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: var(--weight-field-align);
+    padding: var(--weight-field-pad);
+    font-family: var(--font-sans);
+    font-size: var(--weight-field-size);
+    font-weight: var(--weight-field-rest-weight);
+    font-optical-sizing: auto;
+    line-height: var(--weight-field-leading);
+    letter-spacing: var(--weight-field-tracking);
+    color: var(--weight-field-ink);
+  }
+
+  .weight-field__label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .weight-field__unit {
+    padding-inline: 0;
+    font-weight: var(--weight-field-rest-weight);
+    -webkit-text-stroke-color: transparent;
+    -webkit-text-stroke-width: var(--weight-field-stroke);
+    will-change:
+      font-weight,
+      -webkit-text-stroke-width,
+      padding;
+    transition:
+      font-weight var(--weight-field-ramp) var(--weight-field-ease),
+      padding var(--weight-field-ramp) var(--weight-field-ease),
+      -webkit-text-stroke-color var(--weight-field-ramp) var(--weight-field-ease);
+  }
+
+  .weight-field__unit:has(+ .weight-field__unit + .weight-field__unit:hover),
+  .weight-field__unit:hover + .weight-field__unit + .weight-field__unit {
+    font-weight: var(--weight-field-far-weight);
+  }
+
+  .weight-field__unit:has(+ .weight-field__unit:hover),
+  .weight-field__unit:hover + .weight-field__unit {
+    padding-inline: var(--weight-field-hover-padding);
+    font-weight: var(--weight-field-near-weight);
+  }
+
+  .weight-field__unit:hover {
+    padding-inline: var(--weight-field-hover-padding);
+    font-weight: var(--weight-field-peak-weight);
+    -webkit-text-stroke-color: currentcolor;
+    -webkit-text-stroke-width: var(--weight-field-stroke-peak);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .weight-field {
+      --weight-field-duration: 1ms;
+    }
+  }
+}

package/src/components/expressive/youtube/YouTube.tsx

@@ -0,0 +1,192 @@
+'use client';
+
+import './youtube.css';
+
+import type { CSSProperties, HTMLAttributes, ReactElement } from 'react';
+
+import type { DataAttributes } from '../../../dom-props';
+import { useControllable } from '../../internal/hooks/use-controllable';
+import { cx } from '../../internal/utils/cx';
+import type { YouTubeAction, YouTubeMedia } from './media';
+import { PostSurface } from './post';
+import { ShortSurface } from './short';
+import { VideoSurface } from './video';
+
+export type { YouTubeAction, YouTubeMedia } from './media';
+
+export type YouTubeSurface = 'video' | 'short' | 'post';
+
+const SURFACE_CLASS: Record<YouTubeSurface, string> = {
+  video: 'youtube--video',
+  short: 'youtube--short',
+  post: 'youtube--post',
+};
+
+const EMPTY_TEXT = '';
+const NO_COUNT = 0;
+const FIRST_PAGE = 0;
+const ONE_PAGE = 1;
+const NO_PROGRESS = 0;
+
+export interface YouTubeOwnProps {
+  /** Which YouTube surface to reproduce - a feed grid card, a Shorts player, or a community post. @default 'video' */
+  surface?: YouTubeSurface;
+  /** Video title on `video`, Shorts title on `short`. Clamps to two lines on `video`, one ellipsised line on `short`. */
+  title?: string;
+  /** The account's display name - channel name on `video`, `@handle` on `short`, author name on `post`. */
+  channel?: string;
+  /** View count line on `video`, already formatted by the consumer ("2m views"). */
+  views?: string;
+  /** Relative timestamp - "1 year ago" on `video`, "9 days ago" on `post`. */
+  age?: string;
+  /** Runtime shown in the thumbnail badge on `video` ("34:46"). Omit to drop the badge. */
+  duration?: string;
+  /** Renders the grey verified tick after the channel name on `video`. @default false */
+  verified?: boolean;
+  /** Like count. Abbreviated the way YouTube abbreviates it - 187000 renders as "187k". @default 0 */
+  likes?: number;
+  /** Comment count. Rendered exact with thousands separators - 3539 renders as "3,539". @default 0 */
+  comments?: number;
+  /** Remix count in the Shorts rail. @default 0 */
+  remixes?: number;
+  /** Whether the Shorts overlay shows the play glyph. Controlled; pair with `onPausedChange`. */
+  paused?: boolean;
+  /** Initial Shorts play state when `paused` is omitted. @default true */
+  defaultPaused?: boolean;
+  /** Fires when the Shorts play control is pressed. The component never touches the media element itself. */
+  onPausedChange?: (paused: boolean) => void;
+  /** Shorts playback position, 0-100. Consumer-driven: the bar renders where you put it. @default 0 */
+  progress?: number;
+  /** Community post body copy. */
+  text?: string;
+  /** Community post images. Two or more turn the frame into a paged, draggable, arrow-keyed carousel. */
+  carousel?: YouTubeMedia[];
+  /** Controlled carousel page index. Omit to stay uncontrolled. */
+  page?: number;
+  /** Initial carousel page when uncontrolled. @default 0 */
+  defaultPage?: number;
+  /** Fires whenever the carousel settles on a new page. */
+  onPageChange?: (page: number) => void;
+  /** Thumbnail on `video`, player content on `short`, single image on `post`. A URL string or your own node (`<img>`, `<video>`, `next/image`). Nothing renders a CSS-only placeholder. */
+  media?: YouTubeMedia;
+  /** Channel avatar. A URL string or your own node. Nothing renders a flat grey disc. */
+  avatar?: YouTubeMedia;
+  /** Controlled like state for the short's heart and the post's thumb-up. The displayed like count adds one while this is on. */
+  liked?: boolean;
+  /** Uncontrolled initial like state. @default false */
+  defaultLiked?: boolean;
+  /** Fires when the like toggles. */
+  onLikedChange?: (liked: boolean) => void;
+  /** Post only. Controlled dislike state for the thumb-down. */
+  disliked?: boolean;
+  /** Uncontrolled initial dislike state. @default false */
+  defaultDisliked?: boolean;
+  /** Fires when the dislike toggles. */
+  onDislikedChange?: (disliked: boolean) => void;
+  /** Fires for the actions that carry no state: comment, share, remix, menu, expand. */
+  onAction?: (action: YouTubeAction) => void;
+  /** Extra class(es) merged onto the root. */
+  className?: string;
+  /** Inline styles merged onto the root. */
+  style?: CSSProperties;
+}
+
+export interface YouTubeProps extends YouTubeOwnProps {
+  /** Standard element attributes (aria-*, data-*, id, ...) forwarded to the root. */
+  htmlProps?: Omit<HTMLAttributes<HTMLElement>, keyof YouTubeOwnProps> & DataAttributes;
+}
+
+export function YouTube({
+  surface = 'video',
+  title = EMPTY_TEXT,
+  channel = EMPTY_TEXT,
+  views = EMPTY_TEXT,
+  age = EMPTY_TEXT,
+  duration = EMPTY_TEXT,
+  verified = false,
+  likes = NO_COUNT,
+  comments = NO_COUNT,
+  remixes = NO_COUNT,
+  paused: controlledPaused,
+  defaultPaused = true,
+  onPausedChange,
+  progress = NO_PROGRESS,
+  text = EMPTY_TEXT,
+  carousel,
+  page: controlledPage,
+  defaultPage = FIRST_PAGE,
+  onPageChange,
+  media,
+  avatar,
+  liked: controlledLiked,
+  defaultLiked = false,
+  onLikedChange,
+  disliked: controlledDisliked,
+  defaultDisliked = false,
+  onDislikedChange,
+  onAction,
+  className = EMPTY_TEXT,
+  style,
+  htmlProps,
+}: YouTubeProps): ReactElement {
+  const [paused, setPaused] = useControllable(controlledPaused, defaultPaused, onPausedChange);
+  const [page, setPage] = useControllable(controlledPage, defaultPage, onPageChange);
+  const [liked, setLiked] = useControllable(controlledLiked, defaultLiked, onLikedChange);
+  const [disliked, setDisliked] = useControllable(controlledDisliked, defaultDisliked, onDislikedChange);
+  const slides = carousel && carousel.length ? carousel : [media];
+
+  return (
+    <article className={cx('youtube', SURFACE_CLASS[surface], className)} style={style} {...htmlProps}>
+      {surface === 'video' && (
+        <VideoSurface
+          title={title}
+          channel={channel}
+          views={views}
+          age={age}
+          duration={duration}
+          verified={verified}
+          media={media}
+          avatar={avatar}
+          onAction={onAction}
+        />
+      )}
+
+      {surface === 'short' && (
+        <ShortSurface
+          title={title}
+          channel={channel}
+          likes={likes}
+          comments={comments}
+          remixes={remixes}
+          paused={paused}
+          progress={progress}
+          media={media}
+          avatar={avatar}
+          onTogglePaused={() => setPaused(!paused)}
+          liked={liked}
+          onLikedChange={setLiked}
+          onAction={onAction}
+        />
+      )}
+
+      {surface === 'post' && (
+        <PostSurface
+          channel={channel}
+          age={age}
+          text={text}
+          likes={likes}
+          comments={comments}
+          slides={slides}
+          avatar={avatar}
+          page={Math.min(page, slides.length - ONE_PAGE)}
+          onPage={setPage}
+          liked={liked}
+          onLikedChange={setLiked}
+          disliked={disliked}
+          onDislikedChange={setDisliked}
+          onAction={onAction}
+        />
+      )}
+    </article>
+  );
+}

package/src/components/expressive/youtube/YouTube.usage.md

@@ -0,0 +1,18 @@
+# YouTube - @zyncat/ui/youtube
+
+Group: replicas
+Docs: https://ui.zyncat.app/youtube
+
+Replica of three YouTube surfaces, picked with surface: a feed grid card (video), a Shorts player with its action rail (short), or a community post (post).
+
+Platform metrics are pinned; theming tokens do not move them. One prop set spans all three - title,
+channel, views, age, duration, verified, likes, comments, remixes, text. paused and progress drive
+the Shorts overlay and bar as consumer state. carousel takes an array of images and turns the post
+frame into a draggable, arrow-keyed paged strip; page/defaultPage/onPageChange control it. media and
+avatar take a URL or your own node, with CSS placeholders when empty. liked and disliked are
+controllable toggles; onAction reports comment, share, remix, menu, expand. Never fetches, never
+plays.
+
+```tsx
+<YouTube surface="video" title="..." channel="..." views="2m views" age="1 year ago" duration="34:46" verified />
+```

package/src/components/expressive/youtube/format.ts

@@ -0,0 +1,22 @@
+const MILLION = 1e6;
+const TEN_THOUSAND = 1e4;
+const THOUSAND = 1e3;
+const ONE_DECIMAL = 1;
+const TRAILING_ZERO = /\.0$/;
+const THOUSANDS_BOUNDARY = /\B(?=(\d{3})+(?!\d))/g;
+
+function whole(value: number): number {
+  return Math.max(0, Math.round(Number(value) || 0));
+}
+
+export function compactCount(value: number): string {
+  const n = whole(value);
+  if (n >= MILLION) return (n / MILLION).toFixed(ONE_DECIMAL).replace(TRAILING_ZERO, '') + 'M';
+  if (n >= TEN_THOUSAND) return Math.round(n / THOUSAND) + 'k';
+  if (n >= THOUSAND) return (n / THOUSAND).toFixed(ONE_DECIMAL).replace(TRAILING_ZERO, '') + 'k';
+  return String(n);
+}
+
+export function groupedCount(value: number): string {
+  return String(whole(value)).replace(THOUSANDS_BOUNDARY, ',');
+}