tensile 0.1.0

package/dist/components/inputs/DatePicker.d.ts

@@ -0,0 +1,6 @@
+import { type CalendarViewProps } from "../../CalendarView";
+export type DatePickerProps = Omit<CalendarViewProps, "isSelected" | "onDayHover" | "selection" | "multiple"> & {
+    name?: string;
+    className?: string;
+};
+export declare function DatePicker({ value, onValueChange, name, disabled, className, ...props }: DatePickerProps): import("react").JSX.Element;

package/dist/components/inputs/DateRangePicker.d.ts

@@ -0,0 +1,9 @@
+import { type DateRange } from "../../calendar";
+import type { DatePickerProps } from "./DatePicker";
+export type DateRangePickerProps = Omit<DatePickerProps, "value" | "onValueChange" | "name"> & {
+    value: DateRange | null;
+    onValueChange: (value: DateRange) => void;
+    startName?: string;
+    endName?: string;
+};
+export declare function DateRangePicker({ value, onValueChange, firstDayOfWeek, startName, endName, disabled, className, ...props }: DateRangePickerProps): import("react").JSX.Element;

package/dist/components/inputs/EditableText.d.ts

@@ -0,0 +1,9 @@
+export type EditableTextProps = {
+    value: string;
+    onValueChange: (value: string) => void;
+    label: string;
+    placeholder?: string;
+    editLabel?: (label: string, value: string) => string;
+    className?: string;
+};
+export declare function EditableText({ value, onValueChange, label, placeholder, editLabel, className, }: EditableTextProps): import("react").JSX.Element;

package/dist/components/inputs/Field.d.ts

@@ -0,0 +1,52 @@
+export type FieldProps = {
+    label: string;
+    description?: React.ReactNode;
+    error?: string;
+    required?: boolean;
+    disabled?: boolean;
+    /** Where text controls (Input, Textarea, Select, Combobox, MultiSelect, TagInput) show the label and the error: inside their shape, the label floating up while focused or filled, or above and below it. Other controls always use above. */
+    labelPlacement?: "inside" | "above";
+    children: React.ReactNode;
+    className?: string;
+};
+export declare const FieldContext: import("react").Context<{
+    id?: string;
+    labelId?: string;
+    describedBy?: string;
+    invalid?: boolean;
+    required?: boolean;
+    disabled: boolean;
+    /** With `labelPlacement="inside"`: the label as drawn (with the required mark) and the error, for a text control to draw inside its shape. */
+    inside?: {
+        label: string;
+        error?: string;
+    };
+} | null>;
+/** The enclosing `Field`'s ids and state for its control, or null outside one; directly inside a `Fieldset`, only `disabled`. */
+export declare function useField(): {
+    id?: string;
+    labelId?: string;
+    describedBy?: string;
+    invalid?: boolean;
+    required?: boolean;
+    disabled: boolean;
+    /** With `labelPlacement="inside"`: the label as drawn (with the required mark) and the error, for a text control to draw inside its shape. */
+    inside?: {
+        label: string;
+        error?: string;
+    };
+} | null;
+/** A text control's label, resting where the value goes and floating above it while `floated`; `className` places it. */
+export declare function FloatingLabel({ floated, className, children, "aria-hidden": hidden, }: {
+    floated: boolean;
+    className: string;
+    children: React.ReactNode;
+    "aria-hidden"?: boolean;
+}): import("react").JSX.Element;
+/** The line and the blur-swapped error under a text control's value, inside its shape, which grows to show them. */
+export declare function ErrorRow({ id, error, "aria-hidden": hidden }: {
+    id?: string;
+    error?: string;
+    "aria-hidden"?: boolean;
+}): import("react").JSX.Element;
+export declare function Field({ label, description, error, required, disabled, labelPlacement, children, className, }: FieldProps): import("react").JSX.Element;

package/dist/components/inputs/Fieldset.d.ts

@@ -0,0 +1,9 @@
+export type FieldsetProps = {
+    legend: string;
+    description?: React.ReactNode;
+    error?: string;
+    disabled?: boolean;
+    children: React.ReactNode;
+    className?: string;
+};
+export declare function Fieldset({ legend, description, error, disabled, children, className }: FieldsetProps): import("react").JSX.Element;

package/dist/components/inputs/FileUpload.d.ts

@@ -0,0 +1,16 @@
+export type FileUploadProps = {
+    status: "idle" | "uploading" | "done";
+    /** 0..1 */
+    progress: number;
+    /** Called with the files the user picked or dropped. Start the upload here and set `status` and `progress`. */
+    onFiles: (files: File[]) => void;
+    label?: string;
+    uploadingLabel?: (name: string) => string;
+    formatProgress?: (progress: number) => string;
+    doneLabel?: string;
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    className?: string;
+};
+export declare function FileUpload({ status, progress, onFiles, label, uploadingLabel, formatProgress, doneLabel, accept, multiple, disabled, className, }: FileUploadProps): import("react").JSX.Element;

package/dist/components/inputs/Input.d.ts

@@ -0,0 +1,7 @@
+export type InputProps = Omit<React.ComponentProps<"input">, "value" | "onChange"> & {
+    value: string;
+    onValueChange: (value: string) => void;
+    leading?: React.ReactNode;
+    trailing?: React.ReactNode;
+};
+export declare function Input({ value, onValueChange, leading, trailing, id, required, disabled, onFocus, onBlur, "aria-labelledby": labelledBy, "aria-describedby": describedBy, "aria-invalid": invalid, className, style, ...props }: InputProps): import("react").JSX.Element;

package/dist/components/inputs/MultiSelect.d.ts

@@ -0,0 +1,20 @@
+export type MultiSelectProps = {
+    options: {
+        value: string;
+        label: string;
+        icon?: React.ReactNode;
+    }[];
+    value: string[];
+    onValueChange: (value: string[]) => void;
+    placeholder?: string;
+    label?: string;
+    emptyText?: string;
+    /** The pill's text for the selected labels, in option order. */
+    summary?: (labels: string[]) => string;
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    className?: string;
+};
+export declare function MultiSelect({ options, value, onValueChange, placeholder, label, emptyText, summary, id, name, disabled, required, className, }: MultiSelectProps): import("react").JSX.Element;

package/dist/components/inputs/NumberInput.d.ts

@@ -0,0 +1,11 @@
+import { type InputProps } from "./Input";
+export type NumberInputProps = Omit<InputProps, "value" | "onValueChange" | "type" | "min" | "max" | "step"> & {
+    value: number | null;
+    onValueChange: (value: number | null) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    formatValue?: (value: number) => string;
+    parseValue?: (text: string) => number | null;
+};
+export declare function NumberInput({ value, onValueChange, min, max, step, formatValue, parseValue, inputMode, name, form, disabled, readOnly, onFocus, onBlur, onKeyDown, ...props }: NumberInputProps): import("react").JSX.Element;

package/dist/components/inputs/NumberStepper.d.ts

@@ -0,0 +1,17 @@
+export type NumberStepperProps = {
+    value: number;
+    onValueChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    formatValue?: (value: number) => string;
+    label?: string;
+    decreaseLabel?: string;
+    increaseLabel?: string;
+    id?: string;
+    name?: string;
+    required?: boolean;
+    disabled?: boolean;
+    className?: string;
+};
+export declare function NumberStepper({ value, onValueChange, min, max, step, formatValue, label, decreaseLabel, increaseLabel, id, name, required, disabled, className, }: NumberStepperProps): import("react").JSX.Element;

package/dist/components/inputs/OTPInput.d.ts

@@ -0,0 +1,15 @@
+export type OTPInputProps = {
+    value: string;
+    onValueChange: (value: string) => void;
+    /** Number of digits in the code. */
+    length?: number;
+    label?: string;
+    /** Names each cell, given its position from 1 and the number of digits. */
+    cellLabel?: (position: number, length: number) => string;
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    className?: string;
+};
+export declare function OTPInput({ value, onValueChange, length, label, cellLabel, id, name, disabled, required, className, }: OTPInputProps): import("react").JSX.Element;

package/dist/components/inputs/PasswordInput.d.ts

@@ -0,0 +1,6 @@
+import { type InputProps } from "./Input";
+export type PasswordInputProps = InputProps & {
+    showLabel?: string;
+    hideLabel?: string;
+};
+export declare function PasswordInput({ autoComplete, showLabel, hideLabel, disabled, trailing, ...props }: PasswordInputProps): import("react").JSX.Element;

package/dist/components/inputs/RadioGroup.d.ts

@@ -0,0 +1,17 @@
+export type RadioGroupProps = {
+    options: {
+        value: string;
+        label: string;
+        icon?: React.ReactNode;
+        disabled?: boolean;
+    }[];
+    value: string | null;
+    onValueChange: (value: string) => void;
+    label?: string;
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    className?: string;
+};
+export declare function RadioGroup({ options, value, onValueChange, label, id, name, disabled, required, className, }: RadioGroupProps): import("react").JSX.Element;

package/dist/components/inputs/RangeSlider.d.ts

@@ -0,0 +1,16 @@
+export type RangeSliderProps = {
+    value: [number, number];
+    onValueChange: (value: [number, number]) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    formatValue?: (value: number) => string;
+    lowerLabel?: string;
+    upperLabel?: string;
+    id?: string;
+    name?: string;
+    required?: boolean;
+    disabled?: boolean;
+    className?: string;
+};
+export declare function RangeSlider({ value, onValueChange, min, max, step, formatValue, lowerLabel, upperLabel, id, name, required, disabled, className, }: RangeSliderProps): import("react").JSX.Element;

package/dist/components/inputs/Rating.d.ts

@@ -0,0 +1,17 @@
+export type RatingProps = {
+    /** Whole stars, from 0 to `count`. */
+    value: number;
+    onValueChange: (value: number) => void;
+    /** Number of stars. */
+    count?: number;
+    label?: string;
+    /** Screen reader text for the value. */
+    valueLabel?: (value: number, count: number) => string;
+    readOnly?: boolean;
+    id?: string;
+    name?: string;
+    required?: boolean;
+    disabled?: boolean;
+    className?: string;
+};
+export declare function Rating({ value, onValueChange, count, label, valueLabel, readOnly, id, name, required, disabled, className, }: RatingProps): import("react").JSX.Element;

package/dist/components/inputs/SearchField.d.ts

@@ -0,0 +1,11 @@
+export type SearchFieldProps = {
+    value: string;
+    onValueChange: (value: string) => void;
+    label?: string;
+    placeholder?: string;
+    openLabel?: string;
+    clearLabel?: string;
+    name?: string;
+    className?: string;
+};
+export declare function SearchField({ value, onValueChange, label, placeholder, openLabel, clearLabel, name, className, }: SearchFieldProps): import("react").JSX.Element;

package/dist/components/inputs/Select.d.ts

@@ -0,0 +1,18 @@
+export type SelectProps = {
+    options: {
+        value: string;
+        label: string;
+        icon?: React.ReactNode;
+    }[];
+    value: string | null;
+    onValueChange: (value: string) => void;
+    placeholder?: string;
+    label?: string;
+    emptyText?: string;
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    className?: string;
+};
+export declare function Select({ options, value, onValueChange, placeholder, label, emptyText, id, name, disabled, required, className, }: SelectProps): import("react").JSX.Element;

package/dist/components/inputs/Slider.d.ts

@@ -0,0 +1,15 @@
+export type SliderProps = {
+    value: number;
+    onValueChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    formatValue?: (value: number) => string;
+    label?: string;
+    id?: string;
+    name?: string;
+    required?: boolean;
+    disabled?: boolean;
+    className?: string;
+};
+export declare function Slider({ value, onValueChange, min, max, step, formatValue, label, id, name, required, disabled, className, }: SliderProps): import("react").JSX.Element;

package/dist/components/inputs/TagInput.d.ts

@@ -0,0 +1,13 @@
+export type TagInputProps = {
+    value: string[];
+    onValueChange: (value: string[]) => void;
+    label?: string;
+    placeholder?: string;
+    removeLabel?: (tag: string) => string;
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    className?: string;
+};
+export declare function TagInput({ value, onValueChange, label, placeholder, removeLabel, id, name, disabled, required, className, }: TagInputProps): import("react").JSX.Element;

package/dist/components/inputs/TextField.d.ts

@@ -0,0 +1,7 @@
+export type TextFieldProps = Omit<React.ComponentProps<"input">, "value" | "onChange" | "placeholder"> & {
+    value: string;
+    onValueChange: (value: string) => void;
+    label?: string;
+    error?: string;
+};
+export declare function TextField({ value, onValueChange, label, error, onFocus, onBlur, "aria-describedby": describedBy, "aria-invalid": invalid, className, style, ...props }: TextFieldProps): import("react").JSX.Element;

package/dist/components/inputs/Textarea.d.ts

@@ -0,0 +1,5 @@
+export type TextareaProps = Omit<React.ComponentProps<"textarea">, "value" | "onChange"> & {
+    value: string;
+    onValueChange: (value: string) => void;
+};
+export declare function Textarea({ value, onValueChange, rows, id, required, disabled, onFocus, onBlur, "aria-labelledby": labelledBy, "aria-describedby": describedBy, "aria-invalid": invalid, className, style, ...props }: TextareaProps): import("react").JSX.Element;

package/dist/components/inputs/ThemeToggle.d.ts

@@ -0,0 +1,9 @@
+export type ThemeToggleProps = {
+    value: "light" | "dark";
+    onValueChange: (value: "light" | "dark") => void;
+    label?: string;
+    name?: string;
+    disabled?: boolean;
+    className?: string;
+};
+export declare function ThemeToggle({ value, onValueChange, label, name, disabled, className, }: ThemeToggleProps): import("react").JSX.Element;

package/dist/components/inputs/TimePicker.d.ts

@@ -0,0 +1,27 @@
+type Time = {
+    hours: number;
+    minutes: number;
+};
+export type TimePickerProps = {
+    /** Hours 0–23, or null while no time is chosen. */
+    value: Time | null;
+    onValueChange: (value: Time) => void;
+    placeholder?: string;
+    label?: string;
+    formatTime?: (value: Time) => string;
+    /** Minutes between two rows of the minutes wheel. */
+    minuteStep?: number;
+    formatNumber?: (value: number) => string;
+    amLabel?: string;
+    pmLabel?: string;
+    hoursLabel?: string;
+    minutesLabel?: string;
+    periodLabel?: string;
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    className?: string;
+};
+export declare function TimePicker({ value, onValueChange, placeholder, label, formatTime, minuteStep, formatNumber, amLabel, pmLabel, hoursLabel, minutesLabel, periodLabel, id, name, disabled, required, className, }: TimePickerProps): import("react").JSX.Element;
+export {};

package/dist/components/inputs/TimeWheel.d.ts

@@ -0,0 +1,25 @@
+type Time = {
+    hours: number;
+    minutes: number;
+};
+export type TimeWheelProps = {
+    /** Hours 0–23; the wheels show them as 12, 1–11 and AM or PM. */
+    value: Time;
+    onValueChange: (value: Time) => void;
+    /** Minutes between two rows of the minutes wheel. */
+    minuteStep?: number;
+    formatNumber?: (value: number) => string;
+    amLabel?: string;
+    pmLabel?: string;
+    label?: string;
+    hoursLabel?: string;
+    minutesLabel?: string;
+    periodLabel?: string;
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    className?: string;
+};
+export declare function TimeWheel({ value, onValueChange, minuteStep, formatNumber, amLabel, pmLabel, label, hoursLabel, minutesLabel, periodLabel, id, name, disabled, required, className, }: TimeWheelProps): import("react").JSX.Element;
+export {};

package/dist/components/inputs/Toggle.d.ts

@@ -0,0 +1,7 @@
+export type ToggleProps = Omit<React.ComponentProps<"input">, "type" | "checked" | "onChange" | "children"> & {
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    label?: string;
+    children?: React.ReactNode;
+};
+export declare function Toggle({ checked, onCheckedChange, label, children, id, required, disabled, "aria-label": ariaLabel, "aria-labelledby": labelledBy, "aria-describedby": describedBy, "aria-invalid": invalid, className, ...props }: ToggleProps): import("react").JSX.Element;

package/dist/components/inputs/ToggleGroup.d.ts

@@ -0,0 +1,15 @@
+export type ToggleGroupProps = {
+    options: {
+        value: string;
+        label: string;
+        icon?: React.ReactNode;
+    }[];
+    value: string[];
+    onValueChange: (value: string[]) => void;
+    label?: string;
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    className?: string;
+};
+export declare function ToggleGroup({ options, value, onValueChange, label, id, name, disabled, className }: ToggleGroupProps): import("react").JSX.Element;

package/dist/components/layout/Accordion.d.ts

@@ -0,0 +1,12 @@
+export type AccordionProps = {
+    items: {
+        value: string;
+        label: string;
+        content: React.ReactNode;
+        icon?: React.ReactNode;
+    }[];
+    value: string | null;
+    onValueChange: (value: string | null) => void;
+    className?: string;
+};
+export declare function Accordion({ items, value, onValueChange, className }: AccordionProps): import("react").JSX.Element;

package/dist/components/layout/AppShell.d.ts

@@ -0,0 +1,12 @@
+export type AppShellProps = {
+    /** A full-height column beside the page from 1024 px up, staying in view while the page scrolls; hidden below. */
+    sidebar?: React.ReactNode;
+    /** At the top of the page column. */
+    header?: React.ReactNode;
+    /** Fixed to the bottom below 1024 px; hidden from there up. */
+    mobileNav?: React.ReactNode;
+    children: React.ReactNode;
+    skipLabel?: string;
+    className?: string;
+};
+export declare function AppShell({ sidebar, header, mobileNav, children, skipLabel, className }: AppShellProps): import("react").JSX.Element;

package/dist/components/layout/Card.d.ts

@@ -0,0 +1,5 @@
+export type CardProps = React.ComponentProps<"div"> & {
+    /** Ink also turns focus rings paper and separators ink-3 inside it. */
+    tone?: "paper" | "ink";
+};
+export declare function Card({ tone, className, ...props }: CardProps): import("react").JSX.Element;

package/dist/components/layout/ExpandableCard.d.ts

@@ -0,0 +1,14 @@
+export type ExpandableCardProps = {
+    title: string;
+    subtitle: string;
+    /** Picture shown in the card and the detail's header; it fills a square box that the card rounds. */
+    visual: React.ReactNode;
+    /** Body of the detail view, below its header. */
+    children: React.ReactNode;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    openLabel?: (title: string) => string;
+    closeLabel?: string;
+    className?: string;
+};
+export declare function ExpandableCard({ title, subtitle, visual, children, open, onOpenChange, openLabel, closeLabel, className, }: ExpandableCardProps): import("react").JSX.Element;

package/dist/components/layout/Footer.d.ts

@@ -0,0 +1,14 @@
+export type FooterProps = {
+    groups: {
+        title: string;
+        links: {
+            label: string;
+            href: string;
+        }[];
+    }[];
+    note?: React.ReactNode;
+    /** Names the footer's link navigation. */
+    label?: string;
+    className?: string;
+};
+export declare function Footer({ groups, note, label, className }: FooterProps): import("react").JSX.Element;

package/dist/components/layout/Header.d.ts

@@ -0,0 +1,16 @@
+export type HeaderProps = {
+    brand: React.ReactNode;
+    links: {
+        label: string;
+        href: string;
+    }[];
+    /** The current page's `href`. */
+    value: string;
+    actions?: React.ReactNode;
+    /** Names the menu button and titles the drawer it opens. */
+    menuLabel?: string;
+    navLabel?: string;
+    closeLabel?: string;
+    className?: string;
+};
+export declare function Header({ brand, links, value, actions, menuLabel, navLabel, closeLabel, className, }: HeaderProps): import("react").JSX.Element;

package/dist/components/layout/PageHeader.d.ts

@@ -0,0 +1,8 @@
+export type PageHeaderProps = {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    breadcrumbs?: React.ReactNode;
+    actions?: React.ReactNode;
+    className?: string;
+};
+export declare function PageHeader({ title, description, breadcrumbs, actions, className }: PageHeaderProps): import("react").JSX.Element;

package/dist/components/layout/Separator.d.ts

@@ -0,0 +1,5 @@
+export type SeparatorProps = React.ComponentProps<"hr"> & {
+    /** Vertical stretches to the height of its flex or grid row. */
+    orientation?: "horizontal" | "vertical";
+};
+export declare function Separator({ orientation, className, ...props }: SeparatorProps): import("react").JSX.Element;

package/dist/components/layout/SplitPane.d.ts

@@ -0,0 +1,12 @@
+export type SplitPaneProps = {
+    left: React.ReactNode;
+    right: React.ReactNode;
+    /** Where the divider sits, as a fraction of the width from the left: 0..1. */
+    value: number;
+    onValueChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    label?: string;
+    className?: string;
+};
+export declare function SplitPane({ left, right, value, onValueChange, min, max, label, className }: SplitPaneProps): import("react").JSX.Element;

package/dist/components/media/Carousel.d.ts

@@ -0,0 +1,24 @@
+export type CarouselProps = {
+    slides: {
+        label: string;
+        content: React.ReactNode;
+    }[];
+    /** The selected slide, from 0. */
+    value: number;
+    onValueChange: (value: number) => void;
+    /** CSS width of each slide; "80%" or "min(320px, 80%)" shows the neighbours. */
+    slideWidth?: string;
+    /** Where the current slide sits when it's narrower than the carousel. */
+    align?: "center" | "start";
+    /** "visible" keeps the slides past the carousel's edges visible; the page is expected to clip them. */
+    overflow?: "clip" | "visible";
+    /** "center": arrows around the dots below; "end": dots at the start of the row below, arrows at its end; "sides": arrows over the current slide's edges. */
+    controls?: "center" | "end" | "sides";
+    label?: string;
+    previousLabel?: string;
+    nextLabel?: string;
+    /** A slide's position in each slide's name and the dots' value text; `n` counts from 1. */
+    slideLabel?: (n: number, count: number) => string;
+    className?: string;
+};
+export declare function Carousel({ slides, value, onValueChange, slideWidth, align, overflow, controls, label, previousLabel, nextLabel, slideLabel, className, }: CarouselProps): import("react").JSX.Element;

package/dist/components/media/CompareSlider.d.ts

@@ -0,0 +1,14 @@
+export type CompareSliderProps = {
+    /** Left of the divider: any node that fills the frame, e.g. an img with size-full object-cover. */
+    before: React.ReactNode;
+    after: React.ReactNode;
+    /** Divider position from the left, 0..1 */
+    value: number;
+    onValueChange: (value: number) => void;
+    beforeLabel?: string;
+    afterLabel?: string;
+    /** The handle's accessible name. */
+    label?: string;
+    className?: string;
+};
+export declare function CompareSlider({ before, after, value, onValueChange, beforeLabel, afterLabel, label, className, }: CompareSliderProps): import("react").JSX.Element;

package/dist/components/media/Image.d.ts

@@ -0,0 +1,8 @@
+export type ImageProps = React.ComponentProps<"img"> & {
+    alt: string;
+    /** Shown, centered, in place of the image if it fails to load. */
+    fallback?: React.ReactNode;
+    /** Sizes and rounds the box, e.g. `aspect-video w-full rounded-card`; the image covers it. */
+    className?: string;
+};
+export declare function Image({ fallback, onLoad, onError, className, ...props }: ImageProps): import("react").JSX.Element;

package/dist/components/media/Lightbox.d.ts

@@ -0,0 +1,15 @@
+export type LightboxProps = {
+    /** Each image fills a square thumbnail and a 3:2 full view, e.g. an img with size-full object-cover; its label is its accessible name. */
+    images: {
+        label: string;
+        image: React.ReactNode;
+    }[];
+    /** Index of the open image, or null when closed. */
+    value: number | null;
+    onValueChange: (value: number | null) => void;
+    closeLabel?: string;
+    previousLabel?: string;
+    nextLabel?: string;
+    className?: string;
+};
+export declare function Lightbox({ images, value, onValueChange, closeLabel, previousLabel, nextLabel, className, }: LightboxProps): import("react").JSX.Element;

package/dist/components/media/MusicPlayer.d.ts

@@ -0,0 +1,16 @@
+export type MusicPlayerProps = {
+    title: string;
+    artist: string;
+    /** Track length in seconds. */
+    duration: number;
+    expanded: boolean;
+    onExpandedChange: (expanded: boolean) => void;
+    openLabel?: (title: string) => string;
+    minimizeLabel?: string;
+    playLabel?: string;
+    pauseLabel?: string;
+    seekLabel?: string;
+    formatTime?: (seconds: number) => string;
+    className?: string;
+};
+export declare function MusicPlayer({ title, artist, duration, expanded, onExpandedChange, openLabel, minimizeLabel, playLabel, pauseLabel, seekLabel, formatTime, className, }: MusicPlayerProps): import("react").JSX.Element;

package/dist/components/media/VideoControls.d.ts

@@ -0,0 +1,21 @@
+export type VideoControlsProps = {
+    /** Video length in seconds. */
+    duration: number;
+    playing: boolean;
+    onPlayingChange: (playing: boolean) => void;
+    /** Position in seconds. */
+    currentTime: number;
+    onCurrentTimeChange: (currentTime: number) => void;
+    /** 0..1 */
+    volume: number;
+    onVolumeChange: (volume: number) => void;
+    /** Called with true when a seek drag starts and false when it ends, so playback can wait while scrubbing. */
+    onScrubChange?: (scrubbing: boolean) => void;
+    playLabel?: string;
+    pauseLabel?: string;
+    seekLabel?: string;
+    volumeLabel?: string;
+    formatTime?: (seconds: number) => string;
+    className?: string;
+};
+export declare function VideoControls({ duration, playing, onPlayingChange, currentTime, onCurrentTimeChange, volume, onVolumeChange, onScrubChange, playLabel, pauseLabel, seekLabel, volumeLabel, formatTime, className, }: VideoControlsProps): import("react").JSX.Element;