@zyncat/ui 0.10.0 → 0.12.0

package/dist/types/components/expressive/confetti/Confetti.d.ts

@@ -0,0 +1,43 @@
+import './confetti.css';
+import { type HTMLAttributes, type Ref } from 'react';
+import type { DataAttributes } from '../../../dom-props';
+import type { ConfettiStyle } from '../../../tokens/component-styles.generated';
+export type ConfettiEmitter = 'sides' | 'top' | 'corners';
+export type ConfettiField = 'container' | 'viewport';
+export interface ConfettiFireOptions {
+    /** Pieces this burst sends, clamped to 1-520. Falls back to the `count` prop. */
+    count?: number;
+    /** Seconds this burst's emitter stays open, clamped to 0-10. Falls back to the `duration` prop. */
+    duration?: number;
+    /** Emitter geometry for this burst. Falls back to the `emitter` prop. */
+    emitter?: ConfettiEmitter;
+}
+export interface ConfettiHandle {
+    /** Sends one burst. Bursts coexist - firing again while pieces are still airborne adds to the field rather than replacing it. */
+    fire: (options?: ConfettiFireOptions) => void;
+    /** Empties the field and stops the simulation immediately. */
+    clear: () => void;
+}
+export interface ConfettiOwnProps {
+    /** Where pieces are launched from: two side cannons, a full-width fall, or two floor-corner cannons. @default 'sides' */
+    emitter?: ConfettiEmitter;
+    /** Pieces one fire sends, clamped to 1-520. The field itself holds 520; beyond that the oldest piece is retired. @default 170 */
+    count?: number;
+    /** Seconds the emitter stays open, clamped to 0-10. Pieces leave front-loaded inside that window, so 0.15 reads as one shove and 2.5 as a burst that tapers into a fall. @default 0.15 */
+    duration?: number;
+    /** Multiplies the simulation rate; sampled live on every frame. @default 1 */
+    speed?: number;
+    /** `container` fills the nearest positioned ancestor; `viewport` portals the canvas to the body and pins it to the window above the toast layer, so a transformed ancestor cannot trap it. Switching field remounts the canvas and drops pieces in flight. @default 'container' */
+    field?: ConfettiField;
+    /** Imperative handle - call `fire()` on it to send a burst, `clear()` to empty the field. */
+    ref?: Ref<ConfettiHandle>;
+    /** Extra class(es) merged onto the canvas. */
+    className?: string;
+    /** Inline styles merged onto the canvas. */
+    style?: ConfettiStyle;
+}
+export interface ConfettiProps extends ConfettiOwnProps {
+    /** Standard <canvas> attributes (aria-*, data-*, title, ...) forwarded to the canvas. */
+    htmlProps?: Omit<HTMLAttributes<HTMLCanvasElement>, keyof ConfettiOwnProps> & DataAttributes;
+}
+export declare function Confetti({ emitter, count, duration, speed, field, ref, className, style, htmlProps, }: ConfettiProps): import("react").JSX.Element;

package/dist/types/components/expressive/facebook-feed/FacebookFeed.d.ts

@@ -0,0 +1,73 @@
+import './facebook-feed.css';
+import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+import type { DataAttributes } from '../../../dom-props';
+import type { FacebookFeedAction, FacebookMediaType, FacebookRatio } from './chrome';
+import { type FacebookPostWidth } from './post';
+import { type FacebookReelStage } from './reel';
+export type { FacebookFeedAction, FacebookMediaType, FacebookRatio } from './chrome';
+export type { FacebookPostWidth } from './post';
+export type { FacebookReelStage } from './reel';
+export type FacebookSurface = 'post' | 'reel' | 'story';
+export interface FacebookFeedOwnProps {
+    /** Which Facebook surface to reproduce: the feed card, the reels stage, or the story stage. @default 'post' */
+    surface?: FacebookSurface;
+    /** Feed card width. `mobile` is the 390px square-cornered card, `web` the 680px rounded one. @default 'web' */
+    width?: FacebookPostWidth;
+    /** Reels stage. `narrow` is 557x878 around a 9:16 video, `wide` is 1601x886 around a 16:9 one. @default 'narrow' */
+    stage?: FacebookReelStage;
+    /** Whether `media` is a still or a clip. A still is echoed into the feed's blurred letterbox backdrop; a clip is not, so it is never fetched twice. @default 'image' */
+    type?: FacebookMediaType;
+    /** Poster or page name in the header. @default 'Swiss Nature' */
+    name?: string;
+    /** Post body. The feed cuts it at 250 characters with `See more`; reels take one ellipsised line. Hashtags and @mentions render in link blue. */
+    caption?: string;
+    /** Frame aspect for the feed card and the story card. Reels stages are fixed. @default '4:5' */
+    ratio?: FacebookRatio;
+    /** A URL string, or your own node (`<img>`, `<video>`, `next/image`). Omit for a CSS-only placeholder. Nothing is ever autoplayed and no request is ever made for you. */
+    media?: ReactNode;
+    /** A URL string, or your own node, for the header portrait. Omit for the platform's grey. */
+    avatar?: ReactNode;
+    /** Show the `· Follow` affordance. Blue in the feed, white on reels. @default true */
+    follow?: boolean;
+    /** Blue active-story ring around the feed avatar. @default true */
+    ring?: boolean;
+    /** Relative timestamp in the meta line. @default '31m' */
+    stamp?: string;
+    /** Blue verified badge after the reels name. @default true */
+    verified?: boolean;
+    /** Track name on the reels and story audio line. @default 'Original audio' */
+    audio?: string;
+    /** Reaction count. Exact below 1,000, then `1.2K` / `48K` / `1.4M`. @default 267 */
+    likes?: number;
+    /** Comment count, formatted like `likes`. @default 12 */
+    comments?: number;
+    /** Share count, formatted like `likes`. @default 4 */
+    shares?: number;
+    /** How many story progress segments to draw. @default 2 */
+    segments?: number;
+    /** Index of the newest filled story segment; every earlier one fills too. @default 0 */
+    segment?: number;
+    /** Controlled mute state for the reels and story sound button. */
+    muted?: boolean;
+    /** Uncontrolled initial mute state. @default true on reels, false on the story */
+    defaultMuted?: boolean;
+    /** Fires when the sound button is pressed. You own the actual `<video>`, so wire it to your own element. */
+    onMutedChange?: (muted: boolean) => void;
+    /** Controlled like state for the thumb on the feed card and the reels rail. The displayed reaction count adds one while this is on. */
+    liked?: boolean;
+    /** Uncontrolled initial like state. @default false */
+    defaultLiked?: boolean;
+    /** Fires when the thumb toggles the like. */
+    onLikedChange?: (liked: boolean) => void;
+    /** Fires for the actions that carry no state: comment, share, follow, menu, dismiss, more, search, play. */
+    onAction?: (action: FacebookFeedAction) => void;
+    /** Extra class(es) merged onto the surface root. */
+    className?: string;
+    /** Inline styles merged onto the surface root. */
+    style?: CSSProperties;
+}
+export interface FacebookFeedProps extends FacebookFeedOwnProps {
+    /** Standard element attributes (aria-*, data-*, title, ...) forwarded to the surface root. */
+    htmlProps?: Omit<HTMLAttributes<HTMLElement>, keyof FacebookFeedOwnProps> & DataAttributes;
+}
+export declare function FacebookFeed({ surface, width, stage, type, name, caption, ratio, media, avatar, follow, ring, stamp, verified, audio, likes, comments, shares, segments, segment, muted, defaultMuted, onMutedChange, liked, defaultLiked, onLikedChange, onAction, className, style, htmlProps, }: FacebookFeedProps): import("react").JSX.Element;

package/dist/types/components/expressive/facebook-feed/chrome.d.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+export type FacebookRatio = '4:5' | '1.1:1' | '1:1' | '3:4' | '16:9';
+export type FacebookMediaType = 'image' | 'video';
+/** The actions a surface reports that carry no state of their own. */
+export type FacebookFeedAction = 'comment' | 'share' | 'follow' | 'menu' | 'dismiss' | 'more' | 'search' | 'play';
+export declare function countValue(value: number): number;
+export declare function compactCount(value: number): string;
+export interface CaptionCut {
+    head: string;
+    cut: boolean;
+}
+export declare function cutCaption(text: string): CaptionCut;
+export interface CaptionRun {
+    text: string;
+    link: boolean;
+}
+export declare function splitCaption(text: string): CaptionRun[];
+export interface MediaSurfaceProps {
+    media?: ReactNode;
+    type: FacebookMediaType;
+    frontClassName: string;
+    backClassName?: string;
+    frontRatio?: FacebookRatio;
+}
+export declare function MediaSurface({ media, type, frontClassName, backClassName, frontRatio }: MediaSurfaceProps): import("react").JSX.Element;
+export interface PortraitProps {
+    avatar?: ReactNode;
+    className: string;
+}
+export declare function Portrait({ avatar, className }: PortraitProps): import("react").JSX.Element;

package/dist/types/components/expressive/facebook-feed/icons.d.ts

@@ -0,0 +1,21 @@
+export interface GlyphProps {
+    className: string;
+}
+export declare function PrivacyGlobe({ className }: GlyphProps): import("react").JSX.Element;
+export declare function Dismiss({ className }: GlyphProps): import("react").JSX.Element;
+export declare function ThumbOutline({ className }: GlyphProps): import("react").JSX.Element;
+export declare function CommentOutline({ className }: GlyphProps): import("react").JSX.Element;
+export declare function ShareOutline({ className }: GlyphProps): import("react").JSX.Element;
+export declare function ThumbSolid(): import("react").JSX.Element;
+export declare function HeartSolid(): import("react").JSX.Element;
+export declare function VerifiedBadge({ className }: GlyphProps): import("react").JSX.Element;
+export declare function Magnifier({ className }: GlyphProps): import("react").JSX.Element;
+export declare function SpeakerOutlineOff({ className }: GlyphProps): import("react").JSX.Element;
+export declare function SpeakerOutlineOn({ className }: GlyphProps): import("react").JSX.Element;
+export declare function SpeakerSolidOn({ className }: GlyphProps): import("react").JSX.Element;
+export declare function SpeakerSolidOff({ className, crossClassName }: GlyphProps & {
+    crossClassName: string;
+}): import("react").JSX.Element;
+export declare function PlaySolid({ className }: GlyphProps): import("react").JSX.Element;
+export declare function AudienceFriends({ className }: GlyphProps): import("react").JSX.Element;
+export declare function ChevronRight({ className }: GlyphProps): import("react").JSX.Element;

package/dist/types/components/expressive/facebook-feed/post.d.ts

@@ -0,0 +1,25 @@
+import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+import { type FacebookFeedAction, type FacebookMediaType, type FacebookRatio } from './chrome';
+export type FacebookPostWidth = 'mobile' | 'web';
+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 declare function FacebookPost({ name, caption, stamp, follow, ring, ratio, media, avatar, type, likes, comments, shares, width, liked, onLikedChange, onAction, className, style, htmlProps, }: FacebookPostProps): import("react").JSX.Element;

package/dist/types/components/expressive/facebook-feed/reel.d.ts

@@ -0,0 +1,26 @@
+import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+import { type FacebookFeedAction, type FacebookMediaType } from './chrome';
+export type FacebookReelStage = 'narrow' | 'wide';
+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 declare function FacebookReel({ name, caption, stage, follow, verified, audio, media, avatar, type, likes, comments, shares, muted, onMutedChange, liked, onLikedChange, onAction, className, style, htmlProps, }: FacebookReelProps): import("react").JSX.Element;

package/dist/types/components/expressive/facebook-feed/story.d.ts

@@ -0,0 +1,20 @@
+import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+import { type FacebookFeedAction, type FacebookMediaType, type FacebookRatio } from './chrome';
+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 declare function FacebookStory({ name, stamp, audio, ratio, media, avatar, type, segments, segment, muted, onMutedChange, onAction, className, style, htmlProps, }: FacebookStoryProps): import("react").JSX.Element;

package/dist/types/components/expressive/flow-field/FlowField.d.ts

@@ -0,0 +1,23 @@
+import './flow-field.css';
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { DataAttributes } from '../../../dom-props';
+import type { FlowFieldStyle } from '../../../tokens/component-styles.generated';
+export interface FlowFieldOwnProps {
+    /** Content layered over the field. It stays in the accessibility tree; only the canvas is aria-hidden. */
+    children?: ReactNode;
+    /** Multiplies the simulation rate; sampled live on every frame. @default 1 */
+    speed?: number;
+    /** Distance in pixels between neighbouring needles, clamped to 12-72. Widened automatically on large surfaces so the field never exceeds 1600 needles. @default 26 */
+    spacing?: number;
+    /** Radius in pixels of the pointer's steering influence, clamped to 40-640. @default 210 */
+    radius?: number;
+    /** Extra class(es) merged onto the root. */
+    className?: string;
+    /** Inline styles merged onto the root. */
+    style?: FlowFieldStyle;
+}
+export interface FlowFieldProps extends FlowFieldOwnProps {
+    /** Standard <div> attributes (aria-*, data-*, title, ...) forwarded to the root. */
+    htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, keyof FlowFieldOwnProps> & DataAttributes;
+}
+export declare function FlowField({ children, speed, spacing, radius, className, style, htmlProps, }: FlowFieldProps): import("react").JSX.Element;

package/dist/types/components/expressive/instagram-feed/InstagramFeed.d.ts

@@ -0,0 +1,59 @@
+import './instagram-feed.css';
+import { type CSSProperties, type HTMLAttributes, type ReactNode } from 'react';
+import type { DataAttributes } from '../../../dom-props';
+export type InstagramFeedAction = 'comment' | 'repost' | 'send' | 'menu' | 'follow';
+export interface InstagramFeedOwnProps {
+    /** Post kind. `video` runs the black media frame full-bleed and floats the header on it in white. @default 'image' */
+    type?: 'image' | 'video';
+    /** Which column to reproduce: the 390px mobile viewport, or the 470px web column that also carries Follow. @default 'web' */
+    width?: 'mobile' | 'web';
+    /** Account name shown in the header and again in front of the caption. */
+    handle: string;
+    /** Caption body. Clipped at 125 characters with a trailing "... more"; #tags and @mentions take the link colour. */
+    caption?: string;
+    /** Media frame proportion. @default '4:5' */
+    ratio?: '4:5' | '1:1';
+    /** Post media. A string is read as an image URL; a node (`<img>`, `<video>`, `next/image`) is rendered as given and gets `alt` from you. Empty leaves the platform's flat placeholder. */
+    media?: ReactNode;
+    /** Avatar inside the story ring. A string is read as an image URL; a node is rendered as given. */
+    avatar?: ReactNode;
+    /** Audio credit on the second header line, video posts only. @default 'Original audio' */
+    audio?: string;
+    /** Relative time in the header, e.g. `1d`. Omitted entirely when unset. */
+    stamp?: string;
+    /** Likes excluding you; the displayed count adds one while `liked` is on. @default 0 */
+    likes?: number;
+    /** Comment count beside the speech glyph. @default 0 */
+    comments?: number;
+    /** Repost count beside the repost glyph. @default 0 */
+    reposts?: number;
+    /** Controlled like state. */
+    liked?: boolean;
+    /** Uncontrolled initial like state. @default false */
+    defaultLiked?: boolean;
+    /** Fires when the heart or a double-tap on the media toggles the like. */
+    onLikedChange?: (liked: boolean) => void;
+    /** Controlled bookmark state. */
+    saved?: boolean;
+    /** Uncontrolled initial bookmark state. @default false */
+    defaultSaved?: boolean;
+    /** Fires when the bookmark toggles. */
+    onSavedChange?: (saved: boolean) => void;
+    /** Controlled mute state for the video mute chip. */
+    muted?: boolean;
+    /** Uncontrolled initial mute state. @default true */
+    defaultMuted?: boolean;
+    /** Fires when the mute chip toggles. The component never touches a media element you supplied. */
+    onMutedChange?: (muted: boolean) => void;
+    /** Fires for the actions that carry no state: comment, repost, send, menu, follow. */
+    onAction?: (action: InstagramFeedAction) => void;
+    /** Extra class(es) merged onto the card. */
+    className?: string;
+    /** Inline styles merged onto the card. */
+    style?: CSSProperties;
+}
+export interface InstagramFeedProps extends InstagramFeedOwnProps {
+    /** Standard <article> attributes (aria-*, data-*, title, ...) forwarded to the card. */
+    htmlProps?: Omit<HTMLAttributes<HTMLElement>, keyof InstagramFeedOwnProps> & DataAttributes;
+}
+export declare function InstagramFeed({ type, width, handle, caption, ratio, media, avatar, audio, stamp, likes, comments, reposts, liked, defaultLiked, onLikedChange, saved, defaultSaved, onSavedChange, muted, defaultMuted, onMutedChange, onAction, className, style, htmlProps, }: InstagramFeedProps): import("react").JSX.Element;

package/dist/types/components/expressive/lens/Lens.d.ts

@@ -0,0 +1,23 @@
+import './lens.css';
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { DataAttributes } from '../../../dom-props';
+import type { LensStyle } from '../../../tokens/component-styles.generated';
+export interface LensOwnProps {
+    /** The specimen the glass magnifies. It stays in the accessibility tree; the magnified copy is aria-hidden. */
+    children: ReactNode;
+    /** How much the glass magnifies, clamped to 1.2-6. @default 2.6 */
+    magnification?: number;
+    /** Glass radius in pixels, clamped to 60-260. @default 132 */
+    radius?: number;
+    /** Chromatic fringing at the rim, which strengthens with travel speed. @default true */
+    chromatic?: boolean;
+    /** Extra class(es) merged onto the stage. */
+    className?: string;
+    /** Inline styles merged onto the stage. */
+    style?: LensStyle;
+}
+export interface LensProps extends LensOwnProps {
+    /** Standard <div> attributes (aria-*, data-*, title, ...) forwarded to the stage. */
+    htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, keyof LensOwnProps> & DataAttributes;
+}
+export declare function Lens({ children, magnification, radius, chromatic, className, style, htmlProps, }: LensProps): import("react").JSX.Element;

package/dist/types/components/expressive/morphing-text/MorphingText.d.ts

@@ -0,0 +1,21 @@
+import './morphing-text.css';
+import { type HTMLAttributes } from 'react';
+import type { DataAttributes } from '../../../dom-props';
+import type { MorphingTextStyle } from '../../../tokens/component-styles.generated';
+export interface MorphingTextOwnProps {
+    /** The words to cycle through, in order; the last one morphs back into the first. Fewer than two words renders as still type. */
+    words: string[];
+    /** How long a word rests fully legible before the next morph starts, in milliseconds; sampled live. @default 1500 */
+    hold?: number;
+    /** Multiplies the simulation rate; sampled live on every frame. @default 1 */
+    speed?: number;
+    /** Extra class(es) merged onto the root. */
+    className?: string;
+    /** Inline styles merged onto the root. */
+    style?: MorphingTextStyle;
+}
+export interface MorphingTextProps extends MorphingTextOwnProps {
+    /** Standard <span> attributes (aria-*, data-*, title, ...) forwarded to the root. */
+    htmlProps?: Omit<HTMLAttributes<HTMLSpanElement>, keyof MorphingTextOwnProps> & DataAttributes;
+}
+export declare function MorphingText({ words, hold, speed, className, style, htmlProps, }: MorphingTextProps): import("react").JSX.Element;

package/dist/types/components/expressive/odometer/Odometer.d.ts

@@ -0,0 +1,21 @@
+import './odometer.css';
+import { type HTMLAttributes } from 'react';
+import type { DataAttributes } from '../../../dom-props';
+import type { OdometerStyle } from '../../../tokens/component-styles.generated';
+export interface OdometerOwnProps {
+    /** The number to roll to. Every digit column carries its own spring, so digits arrive out of sync. */
+    value: number;
+    /** Renders the value into the displayed string; digits become rolling columns, everything else becomes a static separator. @default String(Math.trunc(value)) */
+    format?: (value: number) => string;
+    /** Multiplies the simulation rate; sampled live on every frame. @default 1 */
+    speed?: number;
+    /** Extra class(es) merged onto the root. */
+    className?: string;
+    /** Inline styles merged onto the root. */
+    style?: OdometerStyle;
+}
+export interface OdometerProps extends OdometerOwnProps {
+    /** Standard <span> attributes (aria-*, data-*, title, ...) forwarded to the root. */
+    htmlProps?: Omit<HTMLAttributes<HTMLSpanElement>, keyof OdometerOwnProps> & DataAttributes;
+}
+export declare function Odometer({ value, format, speed, className, style, htmlProps }: OdometerProps): import("react").JSX.Element;

package/dist/types/components/expressive/tiktok/TikTok.d.ts

@@ -0,0 +1,85 @@
+import './tiktok.css';
+import { type CSSProperties, type HTMLAttributes, type ReactNode } from 'react';
+import type { DataAttributes } from '../../../dom-props';
+/** The surface of the platform being reproduced. */
+export type TikTokSurface = 'desktop' | 'mobile';
+/** Aspect ratio of the post media inside the stage. */
+export type TikTokRatio = '3:2' | '4:3' | '1:1' | '16:9' | '9:16' | '3:4';
+/** The rail and chrome actions that carry no state of their own. */
+export type TikTokAction = 'comment' | 'share' | 'menu' | 'search';
+export interface TikTokOwnProps {
+    /** Which platform surface to reproduce. Desktop is the 1584x912 web player with the photo carousel; mobile is the 452x822 mobile-web viewport. */
+    surface?: TikTokSurface;
+    /** Aspect ratio of the media inside the frame. Defaults to 3:2 on desktop and 4:3 on mobile. */
+    ratio?: TikTokRatio;
+    /** Creator name shown over the media. */
+    name?: string;
+    /** Post caption. Ellipsised to one line on desktop and two on mobile until "more" is pressed. */
+    caption?: string;
+    /** Desktop only. Place name in the pin chip above the creator name. */
+    location?: string;
+    /** Mobile only. Music attribution shown first on the sound line. */
+    music?: string;
+    /** Mobile only. Sound title shown after the music attribution. */
+    sound?: string;
+    /** Like count. Printed exactly below 10,000, then abbreviated as the platform does. */
+    likes?: number;
+    /** Comment count. */
+    comments?: number;
+    /** Desktop only. Save count - the mobile rail has no save action. */
+    saves?: number;
+    /** Share count. */
+    shares?: number;
+    /** Post media: a URL string rendered as a decorative image, or a node you render yourself. On desktop an array supplies one entry per carousel slide. */
+    media?: ReactNode;
+    /** Creator avatar: a URL string, or a node you render yourself. */
+    avatar?: ReactNode;
+    /** Sound artwork on the disc at the foot of the rail: a URL string, or a node you render yourself. */
+    sticker?: ReactNode;
+    /** Desktop only. Number of carousel slides. Raised to the length of `media` when that is an array. */
+    slides?: number;
+    /** Desktop only. Controlled 1-based carousel position. */
+    slide?: number;
+    /** Desktop only. Uncontrolled starting carousel position. */
+    defaultSlide?: number;
+    /** Desktop only. Fires with the new 1-based position when the carousel pages. */
+    onSlideChange?: (slide: number) => void;
+    /** Desktop only. Controlled state of the mute control. The component never plays or pauses media - wire this to your own player. */
+    muted?: boolean;
+    /** Desktop only. Uncontrolled starting state of the mute control. */
+    defaultMuted?: boolean;
+    /** Desktop only. Fires when the mute control is pressed. */
+    onMutedChange?: (muted: boolean) => void;
+    /** Desktop only. Renders the platform's "See translation" line under the frame. */
+    translation?: boolean;
+    /** Controlled like state. The displayed like count adds one while this is on. */
+    liked?: boolean;
+    /** Uncontrolled initial like state. @default false */
+    defaultLiked?: boolean;
+    /** Fires when the heart toggles the like. */
+    onLikedChange?: (liked: boolean) => void;
+    /** Desktop only. Controlled save state for the bookmark on the rail. */
+    saved?: boolean;
+    /** Uncontrolled initial save state. @default false */
+    defaultSaved?: boolean;
+    /** Fires when the bookmark toggles. */
+    onSavedChange?: (saved: boolean) => void;
+    /** Controlled follow state for the plus badge on the creator avatar. */
+    followed?: boolean;
+    /** Uncontrolled initial follow state. @default false */
+    defaultFollowed?: boolean;
+    /** Fires when the follow badge toggles. */
+    onFollowedChange?: (followed: boolean) => void;
+    /** Fires for the actions that carry no state: comment, share, menu, search. */
+    onAction?: (action: TikTokAction) => void;
+    /** Extra class(es) merged onto the root. */
+    className?: string;
+    /** Inline styles merged onto the root. */
+    style?: CSSProperties;
+}
+export interface TikTokProps extends TikTokOwnProps {
+    /** Standard element attributes (aria-*, data-*, id, ...) forwarded to the root. */
+    htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, keyof TikTokOwnProps> & DataAttributes;
+}
+export declare function TikTok({ surface, ratio, name, caption, location, music, sound, likes, comments, saves, shares, media, avatar, sticker, slides, slide, defaultSlide, onSlideChange, muted, defaultMuted, onMutedChange, translation, liked, defaultLiked, onLikedChange, saved, defaultSaved, onSavedChange, followed, defaultFollowed, onFollowedChange, onAction, className, style, htmlProps, }: TikTokProps): import("react").JSX.Element;
+export default TikTok;

package/dist/types/components/expressive/tiktok/glyphs.d.ts

@@ -0,0 +1,40 @@
+export declare function MutedGlyph({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+export declare function AudibleGlyph({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+export declare function PreviousGlyph({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+export declare function NextGlyph({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+export declare function PinGlyph({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+export declare function HeartGlyph({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+export declare function CommentGlyph({ className, holeClassName }: {
+    className?: string;
+    holeClassName: string;
+}): import("react").JSX.Element;
+export declare function BookmarkGlyph({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+export declare function ShareGlyph({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+export declare function PlusGlyph({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+export declare function MenuGlyph({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+export declare function SearchGlyph({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+export declare function NoteGlyph({ className }: {
+    className?: string;
+}): import("react").JSX.Element;

package/dist/types/components/expressive/typing-lines/TypingLines.d.ts

@@ -0,0 +1,25 @@
+import './typing-lines.css';
+import { type HTMLAttributes } from 'react';
+import type { DataAttributes } from '../../../dom-props';
+import type { TypingLinesStyle } from '../../../tokens/component-styles.generated';
+export type TypingUnit = 'character' | 'word';
+export type TypingCaret = 'line' | 'block' | 'underscore' | 'none';
+export interface TypingLinesOwnProps {
+    /** The lines to type, in order; the sequence restarts once the last one has been deleted. */
+    lines: string[];
+    /** Whether the line arrives one character or one whole word at a time. @default 'character' */
+    unit?: TypingUnit;
+    /** Caret shape. It holds solid while characters land and blinks only once the line is idle. @default 'line' */
+    caret?: TypingCaret;
+    /** Multiplies the typing rate; sampled live on every frame. @default 1 */
+    speed?: number;
+    /** Extra class(es) merged onto the root. */
+    className?: string;
+    /** Inline styles merged onto the root. */
+    style?: TypingLinesStyle;
+}
+export interface TypingLinesProps extends TypingLinesOwnProps {
+    /** Standard <span> attributes (aria-*, data-*, title, ...) forwarded to the root. */
+    htmlProps?: Omit<HTMLAttributes<HTMLSpanElement>, keyof TypingLinesOwnProps> & DataAttributes;
+}
+export declare function TypingLines({ lines, unit, caret, speed, className, style, htmlProps, }: TypingLinesProps): import("react").JSX.Element;

package/dist/types/components/expressive/weight-field/WeightField.d.ts

@@ -0,0 +1,19 @@
+import './weight-field.css';
+import type { HTMLAttributes } from 'react';
+import type { DataAttributes } from '../../../dom-props';
+import type { WeightFieldStyle } from '../../../tokens/component-styles.generated';
+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 declare function WeightField({ text, speed, className, style, htmlProps }: WeightFieldProps): import("react").JSX.Element;