panelui-web 0.9.1 → 0.10.0

package/dist/components/timeline/index.d.ts

@@ -0,0 +1,328 @@
+import { type ComponentProps } from 'react';
+export type TimelineColor = 'primary' | 'info' | 'success' | 'warning' | 'destructive' | 'chart-1' | 'chart-2' | 'chart-3' | 'chart-4' | 'chart-5';
+export type TimelineClipVariant = 'bar' | 'block' | 'media';
+export type TimelineTrackSize = 'sm' | 'md' | 'lg';
+/**
+ * A time as a reader expects it. On a timeline under a minute long, seconds
+ * with a unit: `0.5s`, `12s`. Longer, `m:ss`, and `h:mm:ss` past an hour.
+ * `tenths` adds a tenth of a second either way.
+ */
+export declare function formatTime(seconds: number, tenths?: boolean, short?: boolean): string;
+/** The ruler's step at a zoom: the smallest that keeps labels `LABEL_GAP` apart. */
+export declare function rulerStep(zoom: number): number;
+declare const timelineVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        bar: {
+            clip: string;
+        };
+        block: {
+            clip: string;
+        };
+        media: {
+            clip: string;
+        };
+    };
+    size: {
+        sm: {
+            track: string;
+        };
+        md: {
+            track: string;
+        };
+        lg: {
+            track: string;
+        };
+    };
+}, {
+    root: string[];
+    header: string;
+    time: string;
+    zoom: string;
+    viewport: string;
+    content: string;
+    scrollbar: string;
+    thumb: string;
+    end: string[];
+    ruler: string;
+    tick: string;
+    label: string;
+    track: string;
+    clip: string[];
+    handle: string[];
+    grip: string;
+    clipLabel: string[];
+    waveform: string;
+    guide: string;
+    playhead: string;
+    playheadLine: string;
+    playheadHead: string[];
+}, undefined, {
+    variant: {
+        bar: {
+            clip: string;
+        };
+        block: {
+            clip: string;
+        };
+        media: {
+            clip: string;
+        };
+    };
+    size: {
+        sm: {
+            track: string;
+        };
+        md: {
+            track: string;
+        };
+        lg: {
+            track: string;
+        };
+    };
+}, {
+    root: string[];
+    header: string;
+    time: string;
+    zoom: string;
+    viewport: string;
+    content: string;
+    scrollbar: string;
+    thumb: string;
+    end: string[];
+    ruler: string;
+    tick: string;
+    label: string;
+    track: string;
+    clip: string[];
+    handle: string[];
+    grip: string;
+    clipLabel: string[];
+    waveform: string;
+    guide: string;
+    playhead: string;
+    playheadLine: string;
+    playheadHead: string[];
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        bar: {
+            clip: string;
+        };
+        block: {
+            clip: string;
+        };
+        media: {
+            clip: string;
+        };
+    };
+    size: {
+        sm: {
+            track: string;
+        };
+        md: {
+            track: string;
+        };
+        lg: {
+            track: string;
+        };
+    };
+}, {
+    root: string[];
+    header: string;
+    time: string;
+    zoom: string;
+    viewport: string;
+    content: string;
+    scrollbar: string;
+    thumb: string;
+    end: string[];
+    ruler: string;
+    tick: string;
+    label: string;
+    track: string;
+    clip: string[];
+    handle: string[];
+    grip: string;
+    clipLabel: string[];
+    waveform: string;
+    guide: string;
+    playhead: string;
+    playheadLine: string;
+    playheadHead: string[];
+}, undefined, unknown, unknown, undefined>>;
+/**
+ * The timeline's state, for controls of your own: a play button in a
+ * toolbar, a readout, a button that zooms to fit. Use it inside `<Timeline>`.
+ */
+export declare function useTimeline(): {
+    duration: number;
+    time: number;
+    setTime: (time: number) => void;
+    playing: boolean;
+    setPlaying: (playing: boolean) => void;
+    zoom: number;
+    setZoom: (zoom: number, anchor?: {
+        time: number;
+        x: number;
+    }) => void;
+    minZoom: number;
+    maxZoom: number;
+};
+export interface TimelineProps extends Omit<ComponentProps<'div'>, 'onChange'> {
+    /** How long the timeline is, in seconds. */
+    duration: number;
+    /** Where the playhead is, in seconds, when the caller holds it. */
+    time?: number;
+    /** Where the playhead starts, when the caller does not hold it. Default 0. */
+    defaultTime?: number;
+    /** Called with the new time when the playhead moves: scrubbed, stepped or playing. */
+    onTimeChange?: (time: number) => void;
+    /** Pixels per second, when the caller holds it. */
+    zoom?: number;
+    /** Pixels per second to start at. Default 12. */
+    defaultZoom?: number;
+    /** Called with the new zoom. */
+    onZoomChange?: (zoom: number) => void;
+    /** The furthest out it zooms, in pixels per second. Default 2. */
+    minZoom?: number;
+    /** The furthest in it zooms, in pixels per second. Default 120. */
+    maxZoom?: number;
+    /** Whether time is running, when the caller holds it. */
+    playing?: boolean;
+    /** Called when playback starts or stops, including when it reaches the end. */
+    onPlayingChange?: (playing: boolean) => void;
+    /** Start again from the beginning on reaching the end, instead of stopping. */
+    loop?: boolean;
+    /** Snap clip edges to other edges, the playhead and the ends. Default true. */
+    snap?: boolean;
+    /** Show it without letting clips be moved or trimmed. The playhead still moves. */
+    readOnly?: boolean;
+}
+/** Holds the time, the zoom and playback for the parts inside it. */
+declare function TimelineRoot({ duration, time: timeProp, defaultTime, onTimeChange, zoom: zoomProp, defaultZoom, onZoomChange, minZoom, maxZoom, playing: playingProp, onPlayingChange, loop, snap, readOnly, className, children, ...props }: TimelineProps): import("react").JSX.Element;
+declare namespace TimelineRoot {
+    var displayName: string;
+}
+export interface TimelineHeaderProps extends ComponentProps<'div'> {
+}
+/** A row above the tracks, for a toolbar, the time and the zoom. */
+declare function TimelineHeader({ className, ...props }: TimelineHeaderProps): import("react").JSX.Element;
+declare namespace TimelineHeader {
+    var displayName: string;
+}
+export interface TimelineTimeProps extends ComponentProps<'span'> {
+    /** Show the length after the time, as `1:32 / 2:30`. Default true. */
+    showDuration?: boolean;
+}
+/** Where the playhead is, written out, and how long the whole is. */
+declare function TimelineTime({ showDuration, className, ...props }: TimelineTimeProps): import("react").JSX.Element;
+declare namespace TimelineTime {
+    var displayName: string;
+}
+export interface TimelineZoomProps extends Omit<ComponentProps<'div'>, 'children'> {
+}
+/** A line slider that zooms the timeline, with zoom out and zoom in either side. */
+declare function TimelineZoom({ className, ...props }: TimelineZoomProps): import("react").JSX.Element;
+declare namespace TimelineZoom {
+    var displayName: string;
+}
+export interface TimelineViewportProps extends ComponentProps<'div'> {
+}
+/**
+ * The part that scrolls sideways: the ruler, the tracks and the playhead go
+ * in here. Pinch, or ⌘ or Ctrl with the wheel, zooms about the pointer.
+ */
+declare function TimelineViewport({ className, style, children, ...props }: TimelineViewportProps): import("react").JSX.Element;
+declare namespace TimelineViewport {
+    var displayName: string;
+}
+export interface TimelineRulerProps extends ComponentProps<'div'> {
+}
+/** Ticks and times along the top. Pressing or dragging on it moves the playhead there. */
+declare function TimelineRuler({ className, ...props }: TimelineRulerProps): import("react").JSX.Element;
+declare namespace TimelineRuler {
+    var displayName: string;
+}
+export interface TimelineTrackProps extends ComponentProps<'div'> {
+    /** The height of the row: `sm` for bars, `md` for blocks, `lg` for media. Default `md`. */
+    size?: TimelineTrackSize;
+    /** What the track holds, for a screen reader: "Zooms", "Voice". */
+    label?: string;
+}
+/** A row of clips. Clips on one track cannot overlap. */
+declare function TimelineTrack({ size, label, className, ...props }: TimelineTrackProps): import("react").JSX.Element;
+declare namespace TimelineTrack {
+    var displayName: string;
+}
+export interface TimelineClipProps extends Omit<ComponentProps<'div'>, 'onChange'> {
+    /** Where it starts, in seconds. */
+    start: number;
+    /** Where it ends, in seconds. */
+    end: number;
+    /** Called with the new span while it is moved or trimmed. Without it the clip stays put. */
+    onChange?: (span: {
+        start: number;
+        end: number;
+    }) => void;
+    /** Called once a move or a trim ends. */
+    onChangeEnd?: (span: {
+        start: number;
+        end: number;
+    }) => void;
+    /** Called on Delete or Backspace while the clip has focus. */
+    onRemove?: () => void;
+    /** `bar`, `block` or `media`. Default: `bar` on a small track, `media` on a large one, `block` otherwise. */
+    variant?: TimelineClipVariant;
+    /** Its colour, from the theme. Default `primary`. */
+    color?: TimelineColor;
+    /** What a screen reader calls it, before its times. */
+    label?: string;
+}
+/** One clip. With `onChange` it moves by its middle and trims by its ends. */
+declare function TimelineClip({ start, end, onChange, onChangeEnd, onRemove, variant: variantProp, color, label, className, style, children, onKeyDown, ...props }: TimelineClipProps): import("react").JSX.Element;
+declare namespace TimelineClip {
+    var displayName: string;
+}
+export interface TimelineClipLabelProps extends ComponentProps<'span'> {
+}
+/** Words on a clip, with an icon: its length, its speed, what it is. */
+declare function TimelineClipLabel({ className, ...props }: TimelineClipLabelProps): import("react").JSX.Element;
+declare namespace TimelineClipLabel {
+    var displayName: string;
+}
+export interface TimelineWaveformProps extends Omit<ComponentProps<'svg'>, 'children'> {
+    /** Loudness along the clip, each from 0 to 1. Drawn mirrored about the middle. */
+    peaks: number[];
+}
+/** The sound of a media clip, drawn as bars across it. */
+declare function TimelineWaveform({ peaks, className, ...props }: TimelineWaveformProps): import("react").JSX.Element;
+declare namespace TimelineWaveform {
+    var displayName: string;
+}
+export interface TimelinePlayheadProps extends Omit<ComponentProps<'div'>, 'color'> {
+    /** The colour of the line and its head. Default `primary`. */
+    color?: TimelineColor;
+    /** Write the time in the head. Default true. */
+    showTime?: boolean;
+}
+/**
+ * The line at the current time, from the ruler to the bottom. Its head can
+ * be dragged, and with focus the arrow keys step it: a tenth of a second,
+ * or a second with Shift.
+ */
+declare function TimelinePlayhead({ color, showTime, className, style, ...props }: TimelinePlayheadProps): import("react").JSX.Element;
+declare namespace TimelinePlayhead {
+    var displayName: string;
+}
+export declare const Timeline: typeof TimelineRoot & {
+    Header: typeof TimelineHeader;
+    Time: typeof TimelineTime;
+    Zoom: typeof TimelineZoom;
+    Viewport: typeof TimelineViewport;
+    Ruler: typeof TimelineRuler;
+    Track: typeof TimelineTrack;
+    Clip: typeof TimelineClip;
+    ClipLabel: typeof TimelineClipLabel;
+    Waveform: typeof TimelineWaveform;
+    Playhead: typeof TimelinePlayhead;
+};
+export { TimelineHeader, TimelineTime, TimelineZoom, TimelineViewport, TimelineRuler, TimelineTrack, TimelineClip, TimelineClipLabel, TimelineWaveform, TimelinePlayhead, timelineVariants, };