panelui-web 0.9.0 → 0.10.0

package/dist/components/slider/index.js

@@ -0,0 +1,342 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Slider — a number chosen by dragging along a track, with its name and its
+ * value written inside the track.
+ *
+ * ```tsx
+ * <Slider label="Opacity" defaultValue={64} format={{ style: 'unit', unit: 'percent' }} />
+ *
+ * <Slider variant="line" label="Zoom" min={10} max={400} defaultValue={100}>
+ *   <Slider.Step by={-10} aria-label="Zoom out"><MinusIcon /></Slider.Step>
+ *   <Slider.Step by={10} aria-label="Zoom in"><PlusIcon /></Slider.Step>
+ * </Slider>
+ * ```
+ *
+ * ## The track is the label
+ *
+ * In a panel of settings, a column of sliders each with a label above and a
+ * number beside is three things to line up per row. The `fill` slider puts
+ * the name at the start of the track and the value at its end, so a row is
+ * one bar the height of a button, and a stack of them reads as a table.
+ *
+ * ## It moves the way the hand does
+ *
+ * A press away from the handle glides the fill there on a curve with a
+ * little overshoot; a drag follows the pointer exactly, with nothing
+ * easing behind it. Pulled past either end, the track stretches a few
+ * pixels towards the pointer and springs back on release, so the end of
+ * the range is felt rather than hit.
+ *
+ * ## Two weights
+ *
+ * `fill` is the slider for a settings panel. `line` is a thin track with a
+ * round knob, for a toolbar, where a zoom or a scrubber sits between two
+ * buttons: `Slider.Step` is that button, and it moves the value by `by`.
+ *
+ * `origin="center"` fills from the middle out, for a value that can go
+ * either way from nothing: exposure, a balance, a pitch shift.
+ */
+import { Slider as BaseSlider } from '@base-ui/react/slider';
+import { Children, createContext, isValidElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, } from 'react';
+import { tv } from 'tailwind-variants';
+/** A glide with a little overshoot, for a press. A drag turns it off. */
+const GLIDE = 'duration-[420ms] ease-[cubic-bezier(0.3,1.3,0.45,1)]';
+/** How far the track gives past an end, at most, in pixels. */
+const STRETCH = 8;
+/** How far the pointer has to travel before a press counts as a drag. */
+const DRAG_SLOP = 3;
+/** Steps are marked when there are this many or fewer. */
+const MAX_TICKS = 12;
+const sliderVariants = tv({
+    slots: {
+        root: 'group/slider relative flex w-full min-w-0 items-center gap-1.5 data-disabled:opacity-50',
+        control: [
+            'relative min-w-0 flex-1 cursor-pointer touch-none select-none outline-none',
+            'transition-[margin] duration-500 ease-[cubic-bezier(0.3,1.4,0.4,1)] data-stretching:duration-0',
+            'data-disabled:cursor-not-allowed motion-reduce:transition-none',
+        ],
+        track: 'absolute overflow-hidden',
+        fill: [
+            'absolute inset-y-0 start-(--slider-start) w-(--slider-span)',
+            `transition-[inset-inline-start,width] ${GLIDE} group-data-moving/slider:duration-0 motion-reduce:transition-none`,
+        ],
+        tick: 'pointer-events-none absolute -translate-x-1/2 rtl:translate-x-1/2',
+        center: 'pointer-events-none absolute inset-y-1.5 start-1/2 w-px -translate-x-1/2 bg-foreground/20 rtl:translate-x-1/2',
+        handle: [
+            'pointer-events-none absolute top-1/2 start-(--slider-at) -translate-y-1/2',
+            `transition-[inset-inline-start,height,width,background-color,scale] ${GLIDE} group-data-moving/slider:duration-0 motion-reduce:transition-none`,
+        ],
+        // Base UI's thumb carries the keyboard and the screen reader. It is
+        // invisible: the handle above is what is seen.
+        thumb: 'pointer-events-none size-px opacity-0',
+        text: 'pointer-events-none absolute inset-0 flex items-center justify-between gap-3 px-3',
+        // Lighter than muted, so the name reads on a coloured fill as well as on the track.
+        label: 'truncate text-foreground/70',
+        value: 'shrink-0 tabular-nums text-foreground',
+        step: [
+            'inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-lg text-muted-foreground outline-none',
+            'transition-[color,background-color,scale] duration-150 hover:bg-foreground/[0.06] hover:text-foreground active:scale-90',
+            'focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40',
+            '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',
+        ],
+    },
+    variants: {
+        variant: {
+            fill: {
+                control: 'h-(--slider-h) rounded-[10px] has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring',
+                track: 'inset-0 rounded-[inherit] bg-muted',
+                fill: 'bg-(--slider-fill)',
+                // A notch on the top and bottom edges at every step, like the marks
+                // on a rule: the text runs between them and never crosses one.
+                tick: [
+                    'inset-y-0 w-px',
+                    'bg-[linear-gradient(to_bottom,var(--slider-notch)_0_5px,transparent_5px_calc(100%-5px),var(--slider-notch)_calc(100%-5px))]',
+                    '[--slider-notch:color-mix(in_oklab,var(--foreground)_22%,transparent)]',
+                ],
+                handle: [
+                    // Centred on the value, so it stands on the same line as the fill's
+                    // edge and the notch of the step it is on.
+                    'h-[calc(var(--slider-h)*0.44)] w-[3px] -translate-x-1/2 rounded-full bg-(--slider-mark) opacity-60 rtl:translate-x-1/2',
+                    'group-hover/slider:h-[calc(var(--slider-h)*0.56)] group-hover/slider:opacity-100 group-data-moving/slider:h-[calc(var(--slider-h)*0.56)] group-data-moving/slider:opacity-100',
+                    'group-data-disabled/slider:opacity-40',
+                    // Where it would cross the name or the value, it steps out of the way:
+                    // the edge of the fill still says where the value is.
+                    'data-crowded:opacity-0 group-hover/slider:data-crowded:opacity-0 group-data-moving/slider:data-crowded:opacity-0',
+                ],
+                text: 'text-(length:--slider-text) font-medium',
+            },
+            line: {
+                control: 'h-6 rounded-full',
+                track: 'inset-x-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-foreground/15',
+                fill: 'rounded-full bg-(--slider-mark)',
+                tick: 'top-1/2 size-[3px] -translate-y-1/2 rounded-full bg-background/70',
+                handle: [
+                    'size-4 -translate-x-1/2 rounded-full border-2 border-(--slider-mark) bg-background shadow-[0_1px_3px_rgb(0_0_0/0.2)] rtl:translate-x-1/2',
+                    'group-hover/slider:scale-110 group-data-moving/slider:scale-125',
+                    'group-has-[:focus-visible]/slider:ring-2 group-has-[:focus-visible]/slider:ring-ring group-has-[:focus-visible]/slider:ring-offset-2 group-has-[:focus-visible]/slider:ring-offset-background',
+                ],
+            },
+        },
+        color: {
+            neutral: { root: '[--slider-fill:color-mix(in_oklab,var(--foreground)_11%,transparent)] [--slider-mark:var(--foreground)]' },
+            primary: { root: '[--slider-fill:color-mix(in_oklab,var(--primary)_24%,transparent)] [--slider-mark:var(--primary)]' },
+            info: { root: '[--slider-fill:color-mix(in_oklab,var(--info)_26%,transparent)] [--slider-mark:var(--info)]' },
+            success: { root: '[--slider-fill:color-mix(in_oklab,var(--success)_26%,transparent)] [--slider-mark:var(--success)]' },
+            warning: { root: '[--slider-fill:color-mix(in_oklab,var(--warning)_28%,transparent)] [--slider-mark:var(--warning)]' },
+            destructive: {
+                root: '[--slider-fill:color-mix(in_oklab,var(--destructive)_24%,transparent)] [--slider-mark:var(--destructive)]',
+            },
+        },
+        size: {
+            sm: { root: '[--slider-h:1.75rem] [--slider-text:12px]' },
+            md: { root: '[--slider-h:2rem] [--slider-text:13px]' },
+            lg: { root: '[--slider-h:2.5rem] [--slider-text:14px]' },
+        },
+    },
+    compoundVariants: [
+        // The line's fill is drawn solid, so a neutral one is the foreground itself.
+        { variant: 'line', color: 'neutral', className: { fill: 'bg-foreground' } },
+    ],
+    defaultVariants: { variant: 'fill', color: 'neutral', size: 'md' },
+});
+const SliderContext = createContext(null);
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+const noop = () => () => { };
+const yes = () => true;
+const no = () => false;
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const toPercent = (value, min, max) => ((clamp(value, min, max) - min) / (max - min)) * 100;
+/** Rounds away the float noise that repeated steps leave, such as 0.30000000000000004. */
+const tidy = (value, step) => {
+    const decimals = (String(step).split('.')[1] ?? '').length;
+    return Number(value.toFixed(Math.min(decimals + 2, 10)));
+};
+/**
+ * A slider. `defaultValue`, or `value` with `onValueChange`; `min`, `max`
+ * and `step` as for any range.
+ */
+function SliderRoot({ value: valueProp, defaultValue, onValueChange, variant = 'fill', label, format, origin = 'start', color, size, showValue = true, ticks, min = 0, max = 100, step = 1, disabled = false, locale, children, className, style, ...props }) {
+    const slots = sliderVariants({ variant, color, size });
+    const [inner, setInner] = useState(() => defaultValue ?? (origin === 'center' ? (min + max) / 2 : min));
+    const value = (valueProp ?? inner);
+    const values = Array.isArray(value) ? value : [value];
+    const range = values.length > 1;
+    const live = useRef({ value, onValueChange, controlled: valueProp !== undefined });
+    live.current = { value, onValueChange, controlled: valueProp !== undefined };
+    const change = useCallback((next) => {
+        if (!live.current.controlled)
+            setInner(next);
+        live.current.onValueChange?.(next);
+    }, []);
+    // The server cannot know the reader's locale, so the page is first written
+    // in a fixed one and switches to theirs once it is running in the browser.
+    const hydrated = useSyncExternalStore(noop, yes, no);
+    const write = useMemo(() => {
+        if (typeof format === 'function')
+            return format;
+        const formatter = new Intl.NumberFormat(locale ?? (hydrated ? undefined : 'en-US'), format);
+        return (number) => formatter.format(number);
+    }, [format, locale, hydrated]);
+    // The fill: from the start, from the middle, or between two handles.
+    const percents = values.map((each) => toPercent(each, min, max));
+    const [low, high] = range
+        ? [Math.min(...percents), Math.max(...percents)]
+        : origin === 'center'
+            ? [Math.min(50, percents[0]), Math.max(50, percents[0])]
+            : [0, percents[0]];
+    const count = (max - min) / step;
+    const showTicks = ticks ?? (Number.isInteger(Math.round(count * 1e6) / 1e6) && count >= 2 && count <= MAX_TICKS);
+    /*
+     * Press, drag and stretch. Base UI moves the value; this watches the same
+     * pointer to tell a press from a drag, which decides whether the fill
+     * glides, and to measure how far past an end the pointer has gone.
+     */
+    const control = useRef(null);
+    // Held in state as well, because the element can be replaced after
+    // hydration, and the measuring below has to follow it to the new one.
+    const [controlElement, setControlElement] = useState(null);
+    const controlRef = useCallback((element) => {
+        control.current = element;
+        setControlElement(element);
+    }, []);
+    const root = useRef(null);
+    const [stretch, setStretch] = useState(0);
+    const press = (event) => {
+        if (disabled || event.button !== 0)
+            return;
+        const box = control.current?.getBoundingClientRect();
+        if (!box)
+            return;
+        const startX = event.clientX;
+        const startY = event.clientY;
+        const rtl = getComputedStyle(control.current).direction === 'rtl';
+        const move = (next) => {
+            if (Math.hypot(next.clientX - startX, next.clientY - startY) > DRAG_SLOP) {
+                root.current?.setAttribute('data-moving', '');
+            }
+            const past = next.clientX < box.left ? next.clientX - box.left : next.clientX > box.right ? next.clientX - box.right : 0;
+            // Eases off, so the further the pointer goes the less the track follows.
+            const give = Math.sign(past) * STRETCH * Math.sqrt(Math.min(Math.max(Math.abs(past) - 12, 0) / 200, 1));
+            setStretch(rtl ? -give : give);
+        };
+        const release = () => {
+            root.current?.removeAttribute('data-moving');
+            setStretch(0);
+            window.removeEventListener('pointermove', move);
+            window.removeEventListener('pointerup', release);
+            window.removeEventListener('pointercancel', release);
+        };
+        window.addEventListener('pointermove', move);
+        window.addEventListener('pointerup', release);
+        window.addEventListener('pointercancel', release);
+    };
+    useEffect(() => () => root.current?.removeAttribute('data-moving'), []);
+    // Which handles would land on the text, measured where they are going
+    // rather than where the glide has them now.
+    const labelRef = useRef(null);
+    const valueRef = useRef(null);
+    const [crowded, setCrowded] = useState([]);
+    const percentKey = percents.join(',');
+    useIsomorphicLayoutEffect(() => {
+        const box = controlElement;
+        if (variant !== 'fill' || !box)
+            return;
+        const measure = () => {
+            const width = box.clientWidth;
+            const rtl = getComputedStyle(box).direction === 'rtl';
+            // Distances from the start edge, in the direction the text runs.
+            const span = (element) => {
+                if (!element || !element.textContent)
+                    return null;
+                const start = rtl ? width - element.offsetLeft - element.offsetWidth : element.offsetLeft;
+                return [start - 6, start + element.offsetWidth + 6];
+            };
+            const zones = [span(labelRef.current), span(valueRef.current)].filter((zone) => zone !== null);
+            const next = percentKey.split(',').map((percent) => {
+                const x = (Number(percent) / 100) * width;
+                const at = Math.min(Math.max(x, 8), width - 8) - 1.5;
+                return zones.some(([left, right]) => at + 3 > left && at < right);
+            });
+            setCrowded((last) => (last.length === next.length && last.every((each, i) => each === next[i]) ? last : next));
+        };
+        measure();
+        // The text can change size after the first paint, when a web font or a
+        // stylesheet arrives, without the track changing at all.
+        const observer = new ResizeObserver(measure);
+        for (const element of [box, labelRef.current, valueRef.current])
+            if (element)
+                observer.observe(element);
+        let live = true;
+        document.fonts?.ready.then(() => live && measure());
+        return () => {
+            live = false;
+            observer.disconnect();
+        };
+    }, [variant, percentKey, controlElement]);
+    const single = values[0];
+    const context = useMemo(() => ({
+        nudge: (by) => {
+            if (range)
+                return;
+            change(tidy(clamp(single + by, min, max), step));
+        },
+        atMin: !range && single <= min,
+        atMax: !range && single >= max,
+        disabled,
+    }), [range, single, min, max, step, change, disabled]);
+    const text = range ? values.map(write).join(' – ') : write(single);
+    const name = label ?? props['aria-label'];
+    return (_jsx(SliderContext.Provider, { value: context, children: _jsxs(BaseSlider.Root, { ref: root, "data-slot": "slider", "data-variant": variant, value: value, onValueChange: (next) => change(next), min: min, max: max, step: step, disabled: disabled, locale: locale, className: slots.root({ className }), style: {
+                ...style,
+                '--slider-start': `${low}%`,
+                '--slider-span': `${high - low}%`,
+            }, ...props, children: [_jsxs(BaseSlider.Control, { ref: controlRef, "data-slot": "slider-control", "data-stretching": stretch !== 0 ? '' : undefined, onPointerDown: press, className: slots.control(), style: {
+                        marginInlineStart: stretch < 0 ? stretch : 0,
+                        marginInlineEnd: stretch > 0 ? -stretch : 0,
+                    }, children: [_jsxs("div", { "data-slot": "slider-track", className: slots.track(), children: [_jsx("div", { "data-slot": "slider-fill", className: slots.fill() }), showTicks
+                                    ? Array.from({ length: Math.round(count) - 1 }, (_, at) => (_jsx("span", { "aria-hidden": true, className: slots.tick(), style: { insetInlineStart: `${((at + 1) / Math.round(count)) * 100}%` } }, at)))
+                                    : null, origin === 'center' && !range ? _jsx("span", { "aria-hidden": true, className: slots.center() }) : null] }), values.map((each, at) => {
+                            const percent = toPercent(each, min, max);
+                            // At either end the fill's handle stays clear of the rounded corner.
+                            const place = variant !== 'fill' ? `${percent}%` : `clamp(8px, ${percent}%, calc(100% - 8px))`;
+                            return (_jsx("span", { "aria-hidden": true, "data-slot": "slider-handle", "data-crowded": crowded[at] ? '' : undefined, className: slots.handle(), style: { ['--slider-at']: place } }, at));
+                        }), variant === 'fill' && (label || showValue) ? (_jsxs("span", { "aria-hidden": true, "data-slot": "slider-text", className: slots.text(), children: [_jsx("span", { ref: labelRef, className: slots.label(), children: label }), showValue ? (_jsx("span", { ref: valueRef, className: slots.value(), children: text })) : null] })) : null, values.map((_, at) => (_jsx(BaseSlider.Thumb, { index: range ? at : undefined, "aria-label": range ? `${name ?? 'Value'}, ${at === 0 ? 'start' : 'end'}` : name, getAriaValueText: (_formatted, number) => write(number), className: slots.thumb() }, at)))] }), _jsx(SliderSteps, { children: children })] }) }));
+}
+SliderRoot.displayName = 'Slider';
+/** Puts each `Slider.Step` on its side of the track: a step down before, a step up after. */
+function SliderSteps({ children }) {
+    const before = [];
+    const after = [];
+    Children.forEach(children, (child) => {
+        if (isValidElement(child) && typeof child.props.by === 'number' && child.props.by < 0) {
+            before.push(child);
+        }
+        else {
+            after.push(child);
+        }
+    });
+    return (_jsxs(_Fragment, { children: [before.length ? _jsx("div", { className: "order-first flex shrink-0 items-center", children: before }) : null, after.length ? _jsx("div", { className: "order-last flex shrink-0 items-center", children: after }) : null] }));
+}
+/**
+ * A button beside the track that moves the value by `by`: zoom out and zoom
+ * in on either side of a zoom slider. It is disabled at the end it moves
+ * towards.
+ */
+function SliderStep({ by, className, disabled, onClick, ...props }) {
+    const slider = useContext(SliderContext);
+    if (!slider)
+        throw new Error('Slider.Step must be used inside a <Slider>.');
+    const slots = sliderVariants();
+    const stuck = by < 0 ? slider.atMin : slider.atMax;
+    return (_jsx("button", { type: "button", "data-slot": "slider-step", disabled: disabled || slider.disabled || stuck, className: slots.step({ className }), onClick: (event) => {
+            onClick?.(event);
+            if (!event.defaultPrevented)
+                slider.nudge(by);
+        }, ...props }));
+}
+SliderStep.displayName = 'Slider.Step';
+export const Slider = Object.assign(SliderRoot, {
+    Step: SliderStep,
+});
+export { SliderStep, sliderVariants };

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, };