@zyncat/ui 0.10.0 → 0.12.0

package/dist/types/components/expressive/youtube/YouTube.d.ts

@@ -0,0 +1,73 @@
+import './youtube.css';
+import type { CSSProperties, HTMLAttributes, ReactElement } from 'react';
+import type { DataAttributes } from '../../../dom-props';
+import type { YouTubeAction, YouTubeMedia } from './media';
+export type { YouTubeAction, YouTubeMedia } from './media';
+export type YouTubeSurface = 'video' | 'short' | 'post';
+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 declare function YouTube({ surface, title, channel, views, age, duration, verified, likes, comments, remixes, paused: controlledPaused, defaultPaused, onPausedChange, progress, text, carousel, page: controlledPage, defaultPage, onPageChange, media, avatar, liked: controlledLiked, defaultLiked, onLikedChange, disliked: controlledDisliked, defaultDisliked, onDislikedChange, onAction, className, style, htmlProps, }: YouTubeProps): ReactElement;

package/dist/types/components/expressive/youtube/format.d.ts

@@ -0,0 +1,2 @@
+export declare function compactCount(value: number): string;
+export declare function groupedCount(value: number): string;

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

@@ -0,0 +1,16 @@
+import type { ReactElement } from 'react';
+export declare function KebabGlyph(): ReactElement;
+export declare function VerifiedGlyph(): ReactElement;
+export declare function PlayGlyph(): ReactElement;
+export declare function PauseGlyph(): ReactElement;
+export declare function SpeakerGlyph(): ReactElement;
+export declare function ExpandGlyph(): ReactElement;
+export declare function HeartGlyph(): ReactElement;
+export declare function BubbleGlyph(): ReactElement;
+export declare function ShareGlyph(): ReactElement;
+export declare function RemixGlyph(): ReactElement;
+export declare function ThumbUpGlyph(): ReactElement;
+export declare function ThumbDownGlyph(): ReactElement;
+export declare function ChevronLeftGlyph(): ReactElement;
+export declare function ChevronRightGlyph(): ReactElement;
+export declare function StackGlyph(): ReactElement;

package/dist/types/components/expressive/youtube/media.d.ts

@@ -0,0 +1,8 @@
+import type { ReactElement, ReactNode } from 'react';
+export type YouTubeMedia = string | ReactNode;
+/** The surface actions that carry no state of their own. */
+export type YouTubeAction = 'comment' | 'share' | 'remix' | 'menu' | 'expand';
+export declare function Media({ source, className }: {
+    source?: YouTubeMedia;
+    className?: string;
+}): ReactElement;

package/dist/types/components/expressive/youtube/post.d.ts

@@ -0,0 +1,19 @@
+import { type ReactElement } from 'react';
+import { type YouTubeAction, type YouTubeMedia } from './media';
+export interface PostSurfaceProps {
+    channel: string;
+    age: string;
+    text: string;
+    likes: number;
+    comments: number;
+    slides: YouTubeMedia[];
+    avatar?: YouTubeMedia;
+    page: number;
+    onPage: (next: number) => void;
+    liked: boolean;
+    onLikedChange: (liked: boolean) => void;
+    disliked: boolean;
+    onDislikedChange: (disliked: boolean) => void;
+    onAction?: (action: YouTubeAction) => void;
+}
+export declare function PostSurface({ channel, age, text, likes, comments, slides, avatar, page, onPage, liked, onLikedChange, disliked, onDislikedChange, onAction, }: PostSurfaceProps): ReactElement;

package/dist/types/components/expressive/youtube/short.d.ts

@@ -0,0 +1,18 @@
+import type { ReactElement } from 'react';
+import { type YouTubeAction, type YouTubeMedia } from './media';
+export interface ShortSurfaceProps {
+    title: string;
+    channel: string;
+    likes: number;
+    comments: number;
+    remixes: number;
+    paused: boolean;
+    progress: number;
+    media?: YouTubeMedia;
+    avatar?: YouTubeMedia;
+    onTogglePaused: () => void;
+    liked: boolean;
+    onLikedChange: (liked: boolean) => void;
+    onAction?: (action: YouTubeAction) => void;
+}
+export declare function ShortSurface({ title, channel, likes, comments, remixes, paused, progress, media, avatar, onTogglePaused, liked, onLikedChange, onAction, }: ShortSurfaceProps): ReactElement;

package/dist/types/components/expressive/youtube/video.d.ts

@@ -0,0 +1,14 @@
+import type { ReactElement } from 'react';
+import { type YouTubeAction, type YouTubeMedia } from './media';
+export interface VideoSurfaceProps {
+    title: string;
+    channel: string;
+    views: string;
+    age: string;
+    duration: string;
+    verified: boolean;
+    media?: YouTubeMedia;
+    avatar?: YouTubeMedia;
+    onAction?: (action: YouTubeAction) => void;
+}
+export declare function VideoSurface({ title, channel, views, age, duration, verified, media, avatar, onAction, }: VideoSurfaceProps): ReactElement;

package/dist/types/components/internal/collection/collection.d.ts

@@ -0,0 +1,19 @@
+export interface NormalizedGroup<Item> {
+    label: string | null | undefined;
+    items: Item[];
+}
+export interface CollectionShape<Item, Group> {
+    isGroup: (entry: Item | Group) => entry is Group;
+    itemsOf: (group: Group) => Item[];
+    labelOf: (group: Group) => string | undefined;
+}
+export declare function normalizeCollection<Item, Group>(source: Item[] | Group[], shape: CollectionShape<Item, Group>): {
+    groups: NormalizedGroup<Item>[];
+    flat: Item[];
+};
+export interface Navigable {
+    disabled?: boolean;
+}
+export declare const edgeEnabled: (items: readonly Navigable[], toEnd: boolean) => number;
+export declare function stepEnabled(items: readonly Navigable[], from: number, dir: number): number;
+export declare const matchPrefix: <Item extends Navigable>(items: readonly Item[], textOf: (item: Item) => string, prefix: string) => number;

package/dist/types/components/internal/glass/glint.d.ts

@@ -0,0 +1 @@
+export declare function fireGlint(el: HTMLElement): () => void;

package/dist/types/components/internal/hooks/use-controllable.d.ts

@@ -0,0 +1 @@
+export declare function useControllable<T, Meta = unknown>(value: T | undefined, defaultValue: T, onChange?: (next: T, meta?: Meta) => void): [T, (next: T, meta?: Meta) => void];

package/dist/types/components/internal/hooks/use-media-query.d.ts

@@ -0,0 +1 @@
+export declare function useMediaQuery(query: string): boolean;

package/dist/types/components/internal/hooks/use-scroll-edges.d.ts

@@ -0,0 +1,10 @@
+import { type RefObject } from 'react';
+export interface ScrollEdges {
+    top: boolean;
+    bottom: boolean;
+    left: boolean;
+    right: boolean;
+}
+export declare function useScrollEdges(ref: RefObject<HTMLElement | null>, onChange: (edges: ScrollEdges, el: HTMLElement) => void, { content }?: {
+    content?: boolean;
+}): () => void;

package/dist/types/components/internal/hooks/use-typeahead.d.ts

@@ -0,0 +1,5 @@
+export interface Typeahead {
+    push: (char: string) => string;
+    buffered: () => boolean;
+}
+export declare function useTypeahead(): Typeahead;

package/dist/types/components/internal/icon/Icon.d.ts

@@ -0,0 +1,33 @@
+import './icon.css';
+import type { IconWeight } from '@phosphor-icons/react';
+declare const REGISTRY: {
+    x: import("@phosphor-icons/react").Icon;
+    close: import("@phosphor-icons/react").Icon;
+    check: import("@phosphor-icons/react").Icon;
+    'arrow-up': import("@phosphor-icons/react").Icon;
+    'caret-up': import("@phosphor-icons/react").Icon;
+    'caret-down': import("@phosphor-icons/react").Icon;
+    'caret-left': import("@phosphor-icons/react").Icon;
+    'caret-right': import("@phosphor-icons/react").Icon;
+    'magnifying-glass': import("@phosphor-icons/react").Icon;
+    calendar: import("@phosphor-icons/react").Icon;
+    'calendar-dot': import("@phosphor-icons/react").Icon;
+    clock: import("@phosphor-icons/react").Icon;
+    globe: import("@phosphor-icons/react").Icon;
+    info: import("@phosphor-icons/react").Icon;
+    warning: import("@phosphor-icons/react").Icon;
+    'warning-circle': import("@phosphor-icons/react").Icon;
+    'check-circle': import("@phosphor-icons/react").Icon;
+};
+export type IconName = keyof typeof REGISTRY;
+export type IconSize = 'sm' | 'md' | 'lg';
+export type { IconWeight };
+export interface IconProps {
+    name: IconName;
+    size?: IconSize;
+    weight?: IconWeight;
+    label?: string;
+    /** Extra class(es) merged onto the root element. */
+    className?: string;
+}
+export declare function Icon({ name, size, weight, label, className }: IconProps): import("react").JSX.Element;

package/dist/types/components/internal/icon/IconSlot.d.ts

@@ -0,0 +1,7 @@
+import './icon.css';
+import type { ReactNode } from 'react';
+import type { IconSize } from './Icon';
+export declare function IconSlot({ size, children }: {
+    size?: IconSize;
+    children?: ReactNode;
+}): import("react").JSX.Element;

package/dist/types/components/internal/menu/menu-row.d.ts

@@ -0,0 +1,11 @@
+import './menu-surface.css';
+import type { HTMLAttributes, ReactNode, Ref } from 'react';
+import type { DataAttributes } from '../../../dom-props';
+export interface MenuRowProps extends HTMLAttributes<HTMLDivElement>, DataAttributes {
+    ref?: Ref<HTMLDivElement>;
+    icon?: ReactNode;
+    label: ReactNode;
+    description?: ReactNode;
+    trailing?: ReactNode;
+}
+export declare function MenuRow({ ref, icon, label, description, trailing, className, ...rest }: MenuRowProps): import("react").JSX.Element;

package/dist/types/components/internal/overlay/focus.d.ts

@@ -0,0 +1,8 @@
+import { type RefObject } from 'react';
+import { type OverlayEntry } from './layer';
+export declare function useReturnFocus(nodeRef: RefObject<HTMLElement>): void;
+export declare function useFocusTrap({ panelRef, entry, scoped, }: {
+    panelRef: RefObject<HTMLElement>;
+    entry: OverlayEntry;
+    scoped: boolean;
+}): void;

package/dist/types/components/internal/overlay/layer.d.ts

@@ -0,0 +1,38 @@
+import './trigger.css';
+import { type ReactElement, type KeyboardEvent as ReactKeyboardEvent, type ReactNode, type RefObject } from 'react';
+import { type ActivateOn } from '../utils/activation';
+interface OverlayEntry {
+    contains: (t: EventTarget | null) => boolean;
+    isDismissible: () => boolean;
+    requestClose: () => void;
+    _dismissible?: boolean;
+    _close?: () => void;
+}
+declare function ovIsTop(entry: OverlayEntry): boolean;
+declare function ovInOverlayAbove(entry: OverlayEntry, target: EventTarget | null): boolean;
+declare function useOverlayEntry({ nodeRef, dismissible, requestClose, }: {
+    nodeRef: RefObject<HTMLElement>;
+    dismissible: boolean;
+    requestClose: () => void;
+}): OverlayEntry;
+declare function useOutsidePress({ entry, refs, enabled, onPress, }: {
+    entry: OverlayEntry;
+    refs: RefObject<HTMLElement>[];
+    enabled: boolean;
+    onPress: () => void;
+}): void;
+declare function ovCloneTrigger(trigger: ReactElement | null, { open, onPress, onKeyDown, panelId, haspopup, triggerRef, activateOn, }: {
+    open: boolean;
+    onPress: () => void;
+    onKeyDown?: (e: ReactKeyboardEvent<HTMLElement>) => void;
+    panelId: string;
+    haspopup: string;
+    triggerRef: RefObject<HTMLElement>;
+    activateOn?: ActivateOn;
+}): ReactElement | null;
+declare function OverlayPortal({ container, children }: {
+    container?: HTMLElement | null;
+    children: ReactNode;
+}): import("react").ReactPortal;
+export { ovIsTop, ovInOverlayAbove, useOverlayEntry, useOutsidePress, ovCloneTrigger, OverlayPortal };
+export type { OverlayEntry };

package/dist/types/components/internal/overlay/modal.d.ts

@@ -0,0 +1,18 @@
+import './overlay.css';
+import { type ReactNode, type RefObject } from 'react';
+import type { MotionTimingDefaults, MotionTimings } from '../../../motion/motion-timing';
+import { type MotionSpecs } from '../../../motion/use-motion';
+export declare const OV_TAKEOVER_TIMING: MotionTimingDefaults;
+export declare function ModalShell({ layerClass, panelClass, panelId, dismissible, requestClose, container, panelRef: externalPanelRef, panelProps, layerProps, timings, animate: animateSpec, exit, children, }: {
+    layerClass: string;
+    panelClass: string;
+    panelId: string;
+    dismissible: boolean;
+    requestClose: () => void;
+    container?: HTMLElement | null;
+    panelRef?: RefObject<HTMLElement> | null;
+    panelProps?: Record<string, any>;
+    layerProps?: Record<string, any>;
+    timings: MotionTimings;
+    children: ReactNode;
+} & MotionSpecs): import("react").JSX.Element;

package/dist/types/components/internal/overlay/position.d.ts

@@ -0,0 +1,14 @@
+import { type RefObject } from 'react';
+export interface VirtualAnchor {
+    getBoundingClientRect(): DOMRect;
+}
+interface UseAnchorPositionProps {
+    side: 'top' | 'bottom' | 'left' | 'right';
+    align: 'start' | 'center' | 'end';
+    arrow: boolean;
+    anchor?: VirtualAnchor | null;
+    triggerRef: RefObject<HTMLElement>;
+    panelRef: RefObject<HTMLElement>;
+}
+export declare function useAnchorPosition({ side, align, arrow, anchor, triggerRef, panelRef }: UseAnchorPositionProps): void;
+export {};

package/dist/types/components/internal/support/types.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+export interface SupportAction {
+    /** Stable identity. Handed back to `onSelect` and used as the React key. */
+    id: string;
+    /** The visible name - "Live chat", "Book a call". */
+    label: string;
+    /** Leading glyph. Any node; the widget sizes the box it sits in. */
+    icon?: ReactNode;
+    /** Trailing metadata - a wait time, a slot, a ticket number. Set in mono. */
+    meta?: string;
+    /** Second line under the label. The rail shows it; the fan puts it in the caption. */
+    description?: string;
+    /** Fires when this action commits, before the widget's own `onSelect`. */
+    onSelect?: () => void;
+}

package/dist/types/components/internal/utils/activation.d.ts

@@ -0,0 +1,23 @@
+import type { MouseEvent as ReactMouseEvent, PointerEvent as ReactPointerEvent } from 'react';
+/** When a library-owned trigger fires: on `pointerdown` (snappier) or on `click`. */
+export type ActivateOn = 'pointerdown' | 'click';
+type AnyPointerEvent = ReactPointerEvent<Element> | PointerEvent;
+type AnyMouseEvent = ReactMouseEvent<Element> | MouseEvent;
+export declare function pointerDownActivates(e: AnyPointerEvent, holdFocus?: boolean): boolean;
+export declare function declinePointerDown(): void;
+export declare function clickActivates(e: AnyMouseEvent): boolean;
+export interface ActivationOptions<E extends Element> {
+    /** The component supplies its own default; `activateOn` overrides it. @default 'click' */
+    on?: ActivateOn;
+    /** For rows inside a panel that places focus itself - the press leaves focus untouched. @default false */
+    holdFocus?: boolean;
+    /** Runs before the built-in activation, and can cancel it with `preventDefault()`. */
+    onPointerDown?: (e: ReactPointerEvent<E>) => void;
+    /** Runs before the built-in activation on click and on keyboard activation. */
+    onClick?: (e: ReactMouseEvent<E>) => void;
+}
+export declare function activationProps<E extends Element>(activate: (e: ReactPointerEvent<E> | ReactMouseEvent<E>) => void, { on, holdFocus, onPointerDown, onClick }?: ActivationOptions<E>): {
+    onPointerDown: (e: ReactPointerEvent<E>) => void;
+    onClick: (e: ReactMouseEvent<E>) => void;
+};
+export {};

package/dist/types/components/internal/utils/cx.d.ts

@@ -0,0 +1 @@
+export declare function cx(...parts: Array<string | false | null | undefined>): string;

package/dist/types/components/internal/utils/token-px.d.ts

@@ -0,0 +1 @@
+export declare function tokenPx(token: string, fallback?: number): number;

package/dist/{avatar.d.ts → types/components/primitives/avatar/Avatar.d.ts}

@@ -1,11 +1,10 @@
-import * as react from 'react';
-import { ReactNode, CSSProperties, HTMLAttributes } from 'react';
-import { D as DataAttributes } from './dom-props-C0jrllBw.js';
-
-type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-type AvatarShape = 'circle' | 'square';
-type AvatarStatus = 'online' | 'away' | 'busy' | 'offline';
-type AvatarPaletteIndex = 1 | 2 | 3 | 4 | 5 | 6;
+import './avatar.css';
+import { type CSSProperties, type HTMLAttributes, type ReactNode } from 'react';
+import type { DataAttributes } from '../../../dom-props';
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type AvatarShape = 'circle' | 'square';
+export type AvatarStatus = 'online' | 'away' | 'busy' | 'offline';
+export type AvatarPaletteIndex = 1 | 2 | 3 | 4 | 5 | 6;
 interface AvatarOwnProps {
     /** Image URL. Falls back to initials / icon / silhouette if absent or fails. */
     src?: string | null;
@@ -26,10 +25,9 @@ interface AvatarOwnProps {
     /** Inline styles merged onto the root. */
     style?: CSSProperties;
 }
-interface AvatarProps extends AvatarOwnProps {
+export interface AvatarProps extends AvatarOwnProps {
     /** Standard <span> attributes (onClick, title, data-*, ...) forwarded to the root. */
     htmlProps?: Omit<HTMLAttributes<HTMLSpanElement>, keyof AvatarOwnProps> & DataAttributes;
 }
-declare function Avatar({ src, name, icon, shape, size, status, paletteIndex, className, style, htmlProps, }: AvatarProps): react.JSX.Element;
-
-export { Avatar, type AvatarPaletteIndex, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus };
+export declare function Avatar({ src, name, icon, shape, size, status, paletteIndex, className, style, htmlProps, }: AvatarProps): import("react").JSX.Element;
+export {};

package/dist/{avatar-group.d.ts → types/components/primitives/avatar/AvatarGroup.d.ts}

@@ -1,8 +1,7 @@
-import * as react from 'react';
-import { ReactNode, CSSProperties, HTMLAttributes } from 'react';
-import { AvatarSize } from './avatar.js';
-import { D as DataAttributes } from './dom-props-C0jrllBw.js';
-
+import './avatar.css';
+import { type CSSProperties, type HTMLAttributes, type ReactNode } from 'react';
+import type { DataAttributes } from '../../../dom-props';
+import type { AvatarSize } from './Avatar';
 interface AvatarGroupOwnProps {
     /** The `Avatar` elements to stack; each is cloned to force `size`, then sliced to `max`. */
     children: ReactNode;
@@ -15,10 +14,9 @@ interface AvatarGroupOwnProps {
     /** Inline styles merged onto the group wrapper. */
     style?: CSSProperties;
 }
-interface AvatarGroupProps extends AvatarGroupOwnProps {
+export interface AvatarGroupProps extends AvatarGroupOwnProps {
     /** Standard <span> attributes forwarded to the group wrapper. */
     htmlProps?: Omit<HTMLAttributes<HTMLSpanElement>, keyof AvatarGroupOwnProps> & DataAttributes;
 }
-declare function AvatarGroup({ children, max, size, className, style, htmlProps }: AvatarGroupProps): react.JSX.Element;
-
-export { AvatarGroup, type AvatarGroupProps };
+export declare function AvatarGroup({ children, max, size, className, style, htmlProps }: AvatarGroupProps): import("react").JSX.Element;
+export {};

package/dist/{badge.d.ts → types/components/primitives/badge/Badge.d.ts}

@@ -1,14 +1,13 @@
-import * as react from 'react';
-import { ReactNode, CSSProperties, HTMLAttributes } from 'react';
-import { D as DataAttributes } from './dom-props-C0jrllBw.js';
-
-type BadgeTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+import './badge.css';
+import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+import type { DataAttributes } from '../../../dom-props';
+export type BadgeTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
 interface BadgeOwnProps {
     /** Status hue. @default 'neutral' */
     tone?: BadgeTone;
     /** Surface. @default 'glass' */
     variant?: 'glass' | 'outline';
-    /** @default 'md' */
+    /** Chip density - `sm` tightens the vertical padding for inline use. @default 'md' */
     size?: 'sm' | 'md';
     /** Leading status dot. */
     dot?: boolean;
@@ -25,10 +24,9 @@ interface BadgeOwnProps {
     /** Chip label. */
     children?: ReactNode;
 }
-interface BadgeProps extends BadgeOwnProps {
+export interface BadgeProps extends BadgeOwnProps {
     /** Standard <span> attributes (aria-*, data-*, title, ...) forwarded to the chip. */
     htmlProps?: Omit<HTMLAttributes<HTMLSpanElement>, keyof BadgeOwnProps> & DataAttributes;
 }
-declare function Badge({ tone, variant, size, dot, live, pill, icon, className, style, children, htmlProps, }: BadgeProps): react.JSX.Element;
-
-export { Badge, type BadgeProps, type BadgeTone };
+export declare function Badge({ tone, variant, size, dot, live, pill, icon, className, style, children, htmlProps, }: BadgeProps): import("react").JSX.Element;
+export {};

package/dist/types/components/primitives/badge/CountBadge.d.ts

@@ -0,0 +1,8 @@
+import { type BadgeProps } from './Badge';
+export interface CountBadgeProps extends Omit<BadgeProps, 'children'> {
+    /** The chip content - stringified; in `roll` mode each digit becomes an odometer column. */
+    value: string | number;
+    /** Odometer: digits roll vertically on change. */
+    roll?: boolean;
+}
+export declare function CountBadge({ value, tone, roll, ...rest }: CountBadgeProps): import("react").JSX.Element;

package/dist/types/components/primitives/badge/StatusBadge.d.ts

@@ -0,0 +1,15 @@
+import './badge.css';
+import { type BadgeProps } from './Badge';
+export type PostStatus = 'draft' | 'scheduled' | 'processing' | 'published' | 'failed';
+export declare const POST_STATUS: Record<PostStatus, {
+    tone: BadgeProps['tone'];
+    label: string;
+    live?: boolean;
+}>;
+export interface StatusBadgeProps extends Omit<BadgeProps, 'children' | 'tone'> {
+    /** Lifecycle state - maps to a canonical `tone` + label (`processing` also pulses live). Unknown falls back to `draft`. */
+    status: PostStatus;
+    /** Morph in place as `status` changes instead of swapping. */
+    morph?: boolean;
+}
+export declare function StatusBadge({ status, morph, ...rest }: StatusBadgeProps): import("react").JSX.Element;

package/dist/types/components/primitives/badge/digit-strip.d.ts

@@ -0,0 +1,5 @@
+import './digit-strip.css';
+export interface DigitStripProps {
+    value: string | number;
+}
+export declare function DigitStrip({ value }: DigitStripProps): import("react").JSX.Element;

package/dist/{button.d.ts → types/components/primitives/button/Button.d.ts}

@@ -1,7 +1,6 @@
-import * as react from 'react';
-import { Ref, CSSProperties, ReactNode, ButtonHTMLAttributes } from 'react';
-import { D as DataAttributes } from './dom-props-C0jrllBw.js';
-
+import './button.css';
+import type { ButtonHTMLAttributes, CSSProperties, ReactNode, Ref } from 'react';
+import type { DataAttributes } from '../../../dom-props';
 interface ButtonOwnProps {
     /** Visual weight / intent. `unstyled` emits base chrome only (sizing, focus ring,
      *  layout) with no skin - for local re-skins via `className`, e.g. Alert's tone action. @default 'primary' */
@@ -30,11 +29,10 @@ interface ButtonOwnProps {
     onPointerDown?: React.PointerEventHandler<HTMLButtonElement>;
 }
 type ButtonRestProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonOwnProps> & DataAttributes;
-interface ButtonProps extends ButtonOwnProps, ButtonRestProps {
+export interface ButtonProps extends ButtonOwnProps, ButtonRestProps {
     /** Standard <button> attributes (onClick, name, form, aria-*, data-*, ...) forwarded verbatim.
      *  Bare `<button>` attributes also pass through directly; `htmlProps` wins on conflict. */
     htmlProps?: ButtonRestProps;
 }
-declare function Button({ variant, size, type, disabled, loading, fullWidth, className, style, children, onClick, ref, onPointerDown, htmlProps, ...rest }: ButtonProps): react.JSX.Element;
-
-export { Button, type ButtonProps };
+export declare function Button({ variant, size, type, disabled, loading, fullWidth, className, style, children, onClick, ref, onPointerDown, htmlProps, ...rest }: ButtonProps): import("react").JSX.Element;
+export {};

package/dist/{checkbox.d.ts → types/components/primitives/checkbox/Checkbox.d.ts}

@@ -1,7 +1,6 @@
-import * as react from 'react';
-import { ReactNode, ChangeEventHandler, CSSProperties, InputHTMLAttributes } from 'react';
-import { D as DataAttributes } from './dom-props-C0jrllBw.js';
-
+import './checkbox.css';
+import type { ChangeEventHandler, CSSProperties, InputHTMLAttributes, ReactNode } from 'react';
+import type { DataAttributes } from '../../../dom-props';
 interface CheckboxOwnProps {
     /** Controlled checked state. Omit for uncontrolled (use `defaultChecked`). */
     checked?: boolean;
@@ -26,10 +25,9 @@ interface CheckboxOwnProps {
     /** Inline styles merged onto the root label. */
     style?: CSSProperties;
 }
-interface CheckboxProps extends CheckboxOwnProps {
+export interface CheckboxProps extends CheckboxOwnProps {
     /** Standard <input> attributes (name, value, required, aria-*, ...) forwarded to the checkbox input. */
     htmlProps?: Omit<InputHTMLAttributes<HTMLInputElement>, keyof CheckboxOwnProps | 'type'> & DataAttributes;
 }
-declare function Checkbox({ checked, defaultChecked, indeterminate, error, disabled, size, label, description, className, style, onChange, htmlProps, }: CheckboxProps): react.JSX.Element;
-
-export { Checkbox, type CheckboxProps };
+export declare function Checkbox({ checked, defaultChecked, indeterminate, error, disabled, size, label, description, className, style, onChange, htmlProps, }: CheckboxProps): import("react").JSX.Element;
+export {};

package/dist/types/components/primitives/checkbox/check-glyph.d.ts

@@ -0,0 +1,6 @@
+import './checkbox.css';
+import { type InputHTMLAttributes } from 'react';
+export interface CheckGlyphProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    indeterminate?: boolean;
+}
+export declare function CheckGlyph({ indeterminate, ...inputProps }: CheckGlyphProps): import("react").JSX.Element;

package/dist/{collapse.d.ts → types/components/primitives/collapse/Collapse.d.ts}

@@ -1,16 +1,16 @@
-import { JSX, CSSProperties, ReactNode, HTMLAttributes } from 'react';
-import { D as DataAttributes } from './dom-props-C0jrllBw.js';
-import { D as DurationToken, E as EaseToken } from './motion-scale-Canq4stZ.js';
-import { T as TimingProps, D as DisableableAnimation, A as AnimationTiming, a as DirectionalToken } from './timing-7JA_zQHP.js';
-
+import './collapse.css';
+import type { CSSProperties, HTMLAttributes, JSX, ReactNode } from 'react';
+import type { DataAttributes } from '../../../dom-props';
+import { type AnimationTiming, type DirectionalToken, type DisableableAnimation, type TimingProps } from '../../../motion/timing';
+import type { DurationToken, EaseToken } from '../../../tokens/motion-scale';
 /** Motion-scale duration tokens - the only values Collapse timing accepts. */
-type CollapseDuration = DurationToken;
+export type CollapseDuration = DurationToken;
 /** Motion-scale ease tokens - the only values Collapse timing accepts. */
-type CollapseEase = EaseToken;
+export type CollapseEase = EaseToken;
 /** One token for both directions, or split per direction; an omitted direction keeps its default. */
-type CollapseTiming<Token extends string> = DirectionalToken<Token>;
+export type CollapseTiming<Token extends string> = DirectionalToken<Token>;
 /** Grouped `{ duration, ease }` timing for the size/fade transition. */
-type CollapseAnimation = AnimationTiming;
+export type CollapseAnimation = AnimationTiming;
 interface CollapseOwnProps extends TimingProps {
     /** Open/closed state. Closed content is also removed from the tab order, the accessibility
      *  tree and hit-testing once the exit transition completes; reopening restores it before
@@ -37,10 +37,9 @@ interface CollapseOwnProps extends TimingProps {
     /** The collapsing content. */
     children?: ReactNode;
 }
-interface CollapseProps extends CollapseOwnProps {
+export interface CollapseProps extends CollapseOwnProps {
     /** Standard <div> attributes (aria-*, data-*, ...) forwarded to the root. */
     htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, keyof CollapseOwnProps> & DataAttributes;
 }
-declare function Collapse({ open, axis, fade, animation, className, innerClassName, style, children, as: As, htmlProps, }: CollapseProps): JSX.Element;
-
-export { Collapse, type CollapseAnimation, type CollapseDuration, type CollapseEase, type CollapseProps, type CollapseTiming };
+export declare function Collapse({ open, axis, fade, animation, className, innerClassName, style, children, as: As, htmlProps, }: CollapseProps): JSX.Element;
+export {};