@tremolo-ui/react 0.6.0 → 0.7.0

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import React, { AriaAttributes, CSSProperties, ComponentPropsWithoutRef, DependencyList, ReactNode, Ref, RefObject, SVGProps } from "react";
-import { AnimationFrame, AxisOptions, DragState, MIDIAccessError, MIDIAccessOptions, MIDIAccessOptions as MIDIAccessOptions$1, MIDIInputHandlers, NOT_SUPPORTED, PERMISSION_DENIED, PITCH_BEND_CENTER, SelectionBoxRect, UNAVAILABLE, WheelOptions, XY, XY as XY$1, XYInput, XYInput as XYInput$1 } from "@tremolo-ui/dom";
-import { InputEventOption, ModifierState, ModifierValue, NoteRange, Scale, ValueRange } from "@tremolo-ui/functions";
+import { AnimationFrame, AxisOptions, DragState, DropZoneOptions, InputEventOption, MIDIAccessError, MIDIAccessOptions, MIDIAccessOptions as MIDIAccessOptions$1, MIDIInputHandlers, ModifierState, ModifierValue, NOT_SUPPORTED, NoteRange, PERMISSION_DENIED, PITCH_BEND_CENTER, SelectionBoxRect, UNAVAILABLE, WheelOptions, XY, XY as XY$1, XYInput, XYInput as XYInput$1 } from "@tremolo-ui/dom";
+import { Scale, ValueRange } from "@tremolo-ui/functions";
 //#region src/components/AnimationCanvas/index.d.ts
 type InitFunction = (context: CanvasRenderingContext2D, option: {
   /** current canvas width */
@@ -82,7 +82,118 @@ type Props = AnimationCanvasProps & Omit<ComponentPropsWithoutRef<'canvas'>, key
 /**
  * A simple animatable canvas with requestAnimationFrame()
  */
-declare const AnimationCanvas: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLCanvasElement>>;
+export declare const AnimationCanvas: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLCanvasElement>>;
+//#endregion
+//#region src/components/DropZone/index.d.ts
+interface DropZoneProps {
+  /**
+   * Which files to take, written the way the `accept` attribute of a file
+   * input is: a comma separated list of extensions (`.wav`), MIME types
+   * (`audio/wav`) and type groups (`audio/*`).
+   *
+   * What does not match goes to `onReject` rather than `onDrop`. While the
+   * drag is still in the air the element is marked `[data-invalid]`, as far as
+   * the browser lets it be told apart — a rule written as an extension cannot
+   * be decided until the drop.
+   */
+  accept?: string;
+  /**
+   * Take more than one file from a single drop. With it off, only the first
+   * accepted file is reported, as a file input without `multiple` does.
+   *
+   * @default false
+   */
+  multiple?: boolean;
+  /**
+   * Refuse the drop. The drag is still swallowed rather than let through: an
+   * unhandled drop makes the browser leave the page and open the file.
+   *
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Called with the dropped files that match `accept`.
+   *
+   * @param event the drop, for anything the files leave out — where on the
+   * element it landed, most of all.
+   */
+  onDrop?: (files: File[], event: DragEvent) => void;
+  /**
+   * Called with the dropped files that do not match `accept`, so that the
+   * reason can be shown.
+   */
+  onReject?: (files: File[], event: DragEvent) => void;
+  /** What the zone shows. */
+  children: ReactNode;
+}
+/**
+ * An area that takes files dropped onto it.
+ */
+export declare const DropZone: {
+  Root: import("react").ForwardRefExoticComponent<DropZoneProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof DropZoneProps> & import("react").RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+//#region src/components/FileInput/Trigger.d.ts
+interface FileInputTriggerProps {
+  /** What the trigger reads. It is the accessible name of the file input. */
+  children: ReactNode;
+}
+//#endregion
+//#region src/components/FileInput/context.d.ts
+type FileInputContextValue = {
+  /** The id of the hidden `<input type="file">`, for `Trigger`'s `htmlFor`. */
+  inputId: string;
+  disabled: boolean;
+};
+export declare function useFileInputContext(): FileInputContextValue;
+export declare function useFileInputContext<T>(selector: (state: FileInputContextValue) => T): T;
+//#endregion
+//#region src/components/FileInput/index.d.ts
+interface FileInputProps {
+  /**
+   * Which files to take, written the way the HTML attribute is: a comma
+   * separated list of extensions (`.wav`), MIME types (`audio/wav`) and type
+   * groups (`audio/*`).
+   *
+   * **The browser treats it as a hint to the picker, not a rule.** A person
+   * can switch the picker to "All Files", so what arrives is checked again
+   * here, and anything that does not match goes to `onReject` instead.
+   */
+  accept?: string;
+  /**
+   * Let more than one file be picked at a time.
+   * @default false
+   */
+  multiple?: boolean;
+  /**
+   * Refuse to open the picker, and mark every part with `[data-disabled]`.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Called with the files that were picked and match `accept`.
+   *
+   * It is not called at all when the picker is dismissed, or when every file
+   * picked was rejected — an empty array never arrives, so there is no need to
+   * tell "nothing was chosen" from "the choice was cleared".
+   */
+  onChange?: (files: File[]) => void;
+  /**
+   * Called with the files that were picked and do not match `accept`, so that
+   * the reason can be shown. Given alongside `onChange` when a selection held
+   * both.
+   */
+  onReject?: (files: File[]) => void;
+  /** Normally a `FileInput.Trigger`, and whatever shows what was picked. */
+  children: ReactNode;
+}
+/**
+ * Picks files, and hands them over as `File`s.
+ */
+export declare const FileInput: {
+  Root: import("react").ForwardRefExoticComponent<FileInputProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof FileInputProps> & import("react").RefAttributes<HTMLDivElement>>;
+  Trigger: import("react").ForwardRefExoticComponent<FileInputTriggerProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref">, "children" | "htmlFor"> & import("react").RefAttributes<HTMLLabelElement>>;
+};
 //#endregion
 //#region src/components/Knob/ActiveLine.d.ts
 declare function ActiveLine({ stroke, strokeWidth, className, ...props }: Omit<SVGProps<SVGPathElement>, 'd'>): import("react").JSX.Element;
@@ -138,6 +249,27 @@ interface KnobThumbProps {
 }
 declare function Thumb({ className, thumb, thumbLine, thumbSize, thumbLineWeight, thumbLineLength, classes, ...props }: KnobThumbProps & Omit<SVGProps<SVGSVGElement>, 'd' | keyof KnobThumbProps>): import("react").JSX.Element;
 //#endregion
+//#region src/css-variables.d.ts
+/**
+ * CSS custom properties, for a `style` object.
+ *
+ * React's `CSSProperties` has no key starting with `--`, so
+ * `style={{ '--color': 'red' }}` is refused as an unknown property even though
+ * the browser takes it. Every part accepts this alongside `CSSProperties`,
+ * which is how a variable the component or a theme reads is set inline.
+ *
+ * `T` names the custom properties the part itself writes or reads, without the
+ * leading `--`, so that an editor can suggest them. Any other `--` name is
+ * still accepted — a theme reads variables of its own, such as the colours of
+ * each kind of key.
+ *
+ * @example
+ * CSSVariables<'thickness' | 'length'>
+ * // { '--thickness'?: string | number, '--length'?: string | number,
+ * //   [name: `--${string}`]: string | number | undefined }
+ */
+type CSSVariables<T extends string = never> = { [K in T as `--${K}`]?: string | number; } & { [K in `--${string}`]?: string | number; };
+//#endregion
 //#region src/components/Knob/context.d.ts
 type KnobConfig = {
   value: number;
@@ -165,8 +297,8 @@ type KnobContextValue = KnobConfig & {
  * Everything here is derived during render, so there is no state to keep in
  * sync: `value` comes from the props of `Root` and the rest follows from it.
  */
-declare function useKnobContext(): KnobContextValue;
-declare function useKnobContext<T>(selector: (state: KnobContextValue) => T): T;
+export declare function useKnobContext(): KnobContextValue;
+export declare function useKnobContext<T>(selector: (state: KnobContextValue) => T): T;
 //#endregion
 //#region src/components/Knob/index.d.ts
 interface KnobProps {
@@ -318,6 +450,7 @@ interface KnobProps {
    * </Knob.Root>
    */
   children: ReactNode;
+  style?: CSSProperties & CSSVariables<'knob-size'>;
 }
 interface KnobMethods {
   focus: () => void;
@@ -326,7 +459,7 @@ interface KnobMethods {
 /**
  * Interactive rotary knob component implemented in SVG.
  */
-declare const Knob: {
+export declare const Knob: {
   Root: import("react").ForwardRefExoticComponent<KnobProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof KnobProps> & import("react").RefAttributes<KnobMethods>>;
   SVGRoot: typeof SVGRoot;
   InactiveLine: typeof InactiveLine;
@@ -334,37 +467,22 @@ declare const Knob: {
   Thumb: typeof Thumb;
 };
 //#endregion
-//#region src/components/NumberInput/InputField.d.ts
-interface NumberInputInputFieldProps {
-  className?: string;
-  style?: CSSProperties;
-}
-//#endregion
-//#region src/components/NumberInput/Stepper.d.ts
-interface NumberInputStepperProps {
-  className?: string;
-  style?: CSSProperties;
-  /** `<NumberInput.IncrementStepper />` and `<NumberInput.DecrementStepper />` go here. */
-  children?: ReactNode;
-}
-//#endregion
 //#region src/components/NumberInput/StepperButton.d.ts
-interface StepperButtonProps {
-  className?: string;
-  style?: CSSProperties;
-  /** Replaces the default arrow. Size it with the `--stepper-icon-size` variable. */
-  children?: ReactNode;
-}
+/**
+ * `--stepper-icon-size` is read by the default arrow inside, and set on the
+ * button so that it inherits there.
+ */
+type StepperButtonProps = Omit<ComponentPropsWithoutRef<'div'>, 'style'> & {
+  style?: CSSProperties & CSSVariables<'stepper-icon-size'>;
+};
 //#endregion
 //#region src/components/NumberInput/DecrementStepper.d.ts
-interface NumberInputDecrementStepperProps extends StepperButtonProps {}
 /** Lowers the value by one `step`, repeating while held. */
-declare function DecrementStepper(props: NumberInputDecrementStepperProps & Omit<ComponentPropsWithoutRef<'div'>, keyof NumberInputDecrementStepperProps>): import("react").JSX.Element;
+declare function DecrementStepper(props: StepperButtonProps): import("react").JSX.Element;
 //#endregion
 //#region src/components/NumberInput/IncrementStepper.d.ts
-interface NumberInputIncrementStepperProps extends StepperButtonProps {}
 /** Raises the value by one `step`, repeating while held. */
-declare function IncrementStepper(props: NumberInputIncrementStepperProps & Omit<ComponentPropsWithoutRef<'div'>, keyof NumberInputIncrementStepperProps>): import("react").JSX.Element;
+declare function IncrementStepper(props: StepperButtonProps): import("react").JSX.Element;
 //#endregion
 //#region src/components/NumberInput/context.d.ts
 type NumberInputContextValue = {
@@ -429,8 +547,8 @@ type NumberInputContextValue = {
  * The only state behind this is the editing draft; `value` comes from the props
  * of `Root` and everything else is derived during render.
  */
-declare function useNumberInputContext(): NumberInputContextValue;
-declare function useNumberInputContext<T>(selector: (state: NumberInputContextValue) => T): T;
+export declare function useNumberInputContext(): NumberInputContextValue;
+export declare function useNumberInputContext<T>(selector: (state: NumberInputContextValue) => T): T;
 //#endregion
 //#region src/components/NumberInput/index.d.ts
 interface NumberInputProps {
@@ -608,8 +726,6 @@ interface NumberInputProps {
    * The parts carry `data-readonly` while it is set.
    */
   readonly?: boolean;
-  className?: string;
-  style?: CSSProperties;
   /**
    * Called with the new value. While the user types, it is called for every
    * entry that reads as a number, unclamped; committing the entry calls it
@@ -638,10 +754,319 @@ interface NumberInputMethods {
 /**
  * Input with some useful functions for entering numerical values.
  */
-declare const NumberInput: {
+export declare const NumberInput: {
   Root: import("react").ForwardRefExoticComponent<NumberInputProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof NumberInputProps> & import("react").RefAttributes<NumberInputMethods>>;
-  InputField: import("react").ForwardRefExoticComponent<NumberInputInputFieldProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "defaultValue" | "value" | "type" | keyof NumberInputInputFieldProps> & import("react").RefAttributes<HTMLInputElement>>;
-  Stepper: import("react").ForwardRefExoticComponent<NumberInputStepperProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof NumberInputStepperProps> & import("react").RefAttributes<HTMLDivElement>>;
+  InputField: import("react").ForwardRefExoticComponent<{
+    form?: string | undefined | undefined;
+    slot?: string | undefined | undefined;
+    style?: import("react").CSSProperties | undefined;
+    title?: string | undefined | undefined;
+    pattern?: string | undefined | undefined;
+    key?: import("react").Key | null | undefined;
+    height?: number | string | undefined | undefined;
+    width?: number | string | undefined | undefined;
+    defaultChecked?: boolean | undefined | undefined;
+    suppressContentEditableWarning?: boolean | undefined | undefined;
+    suppressHydrationWarning?: boolean | undefined | undefined;
+    accessKey?: string | undefined | undefined;
+    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
+    autoFocus?: boolean | undefined | undefined;
+    className?: string | undefined | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+    contextMenu?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+    hidden?: boolean | undefined | undefined;
+    id?: string | undefined | undefined;
+    lang?: string | undefined | undefined;
+    nonce?: string | undefined | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    tabIndex?: number | undefined | undefined;
+    translate?: "yes" | "no" | undefined | undefined;
+    radioGroup?: string | undefined | undefined;
+    role?: import("react").AriaRole | undefined;
+    about?: string | undefined | undefined;
+    content?: string | undefined | undefined;
+    datatype?: string | undefined | undefined;
+    inlist?: any;
+    prefix?: string | undefined | undefined;
+    property?: string | undefined | undefined;
+    rel?: string | undefined | undefined;
+    resource?: string | undefined | undefined;
+    rev?: string | undefined | undefined;
+    typeof?: string | undefined | undefined;
+    vocab?: string | undefined | undefined;
+    autoCorrect?: string | undefined | undefined;
+    autoSave?: string | undefined | undefined;
+    color?: string | undefined | undefined;
+    itemProp?: string | undefined | undefined;
+    itemScope?: boolean | undefined | undefined;
+    itemType?: string | undefined | undefined;
+    itemID?: string | undefined | undefined;
+    itemRef?: string | undefined | undefined;
+    results?: number | undefined | undefined;
+    security?: string | undefined | undefined;
+    unselectable?: "on" | "off" | undefined | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+    popoverTarget?: string | undefined | undefined;
+    inert?: boolean | undefined | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+    is?: string | undefined | undefined;
+    exportparts?: string | undefined | undefined;
+    part?: string | undefined | undefined;
+    "aria-activedescendant"?: string | undefined | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
+    "aria-braillelabel"?: string | undefined | undefined;
+    "aria-brailleroledescription"?: string | undefined | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+    "aria-colcount"?: number | undefined | undefined;
+    "aria-colindex"?: number | undefined | undefined;
+    "aria-colindextext"?: string | undefined | undefined;
+    "aria-colspan"?: number | undefined | undefined;
+    "aria-controls"?: string | undefined | undefined;
+    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
+    "aria-describedby"?: string | undefined | undefined;
+    "aria-description"?: string | undefined | undefined;
+    "aria-details"?: string | undefined | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+    "aria-errormessage"?: string | undefined | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-flowto"?: string | undefined | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
+    "aria-keyshortcuts"?: string | undefined | undefined;
+    "aria-label"?: string | undefined | undefined;
+    "aria-labelledby"?: string | undefined | undefined;
+    "aria-level"?: number | undefined | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
+    "aria-owns"?: string | undefined | undefined;
+    "aria-placeholder"?: string | undefined | undefined;
+    "aria-posinset"?: number | undefined | undefined;
+    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined | undefined;
+    "aria-rowcount"?: number | undefined | undefined;
+    "aria-rowindex"?: number | undefined | undefined;
+    "aria-rowindextext"?: string | undefined | undefined;
+    "aria-rowspan"?: number | undefined | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+    "aria-valuemax"?: number | undefined | undefined;
+    "aria-valuemin"?: number | undefined | undefined;
+    "aria-valuenow"?: number | undefined | undefined;
+    "aria-valuetext"?: string | undefined | undefined;
+    children?: ReactNode;
+    dangerouslySetInnerHTML?: {
+      __html: string | TrustedHTML;
+    } | undefined | undefined;
+    onCopy?: import("react").ClipboardEventHandler<HTMLInputElement> | undefined;
+    onCopyCapture?: import("react").ClipboardEventHandler<HTMLInputElement> | undefined;
+    onCut?: import("react").ClipboardEventHandler<HTMLInputElement> | undefined;
+    onCutCapture?: import("react").ClipboardEventHandler<HTMLInputElement> | undefined;
+    onPaste?: import("react").ClipboardEventHandler<HTMLInputElement> | undefined;
+    onPasteCapture?: import("react").ClipboardEventHandler<HTMLInputElement> | undefined;
+    onCompositionEnd?: import("react").CompositionEventHandler<HTMLInputElement> | undefined;
+    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLInputElement> | undefined;
+    onCompositionStart?: import("react").CompositionEventHandler<HTMLInputElement> | undefined;
+    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLInputElement> | undefined;
+    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLInputElement> | undefined;
+    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLInputElement> | undefined;
+    onFocus?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
+    onFocusCapture?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
+    onBlurCapture?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
+    onChange?: import("react").ChangeEventHandler<HTMLInputElement, HTMLInputElement> | undefined;
+    onChangeCapture?: import("react").ChangeEventHandler<HTMLInputElement, Element> | undefined;
+    onBeforeInput?: import("react").InputEventHandler<HTMLInputElement> | undefined;
+    onBeforeInputCapture?: import("react").InputEventHandler<HTMLInputElement> | undefined;
+    onInput?: import("react").InputEventHandler<HTMLInputElement> | undefined;
+    onInputCapture?: import("react").InputEventHandler<HTMLInputElement> | undefined;
+    onReset?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onResetCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onSubmit?: import("react").SubmitEventHandler<HTMLInputElement> | undefined;
+    onSubmitCapture?: import("react").SubmitEventHandler<HTMLInputElement> | undefined;
+    onInvalid?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onInvalidCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onLoad?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onLoadCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onError?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onErrorCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLInputElement> | undefined;
+    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLInputElement> | undefined;
+    onKeyPress?: import("react").KeyboardEventHandler<HTMLInputElement> | undefined;
+    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLInputElement> | undefined;
+    onKeyUp?: import("react").KeyboardEventHandler<HTMLInputElement> | undefined;
+    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLInputElement> | undefined;
+    onAbort?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onAbortCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onCanPlay?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onCanPlayCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onCanPlayThrough?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onDurationChange?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onEmptied?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onEmptiedCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onEncrypted?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onEncryptedCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onEnded?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onEndedCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onLoadedData?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onLoadedMetadata?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onLoadStart?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onLoadStartCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onPause?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onPauseCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onPlay?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onPlayCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onPlaying?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onPlayingCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onProgress?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onProgressCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onRateChange?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onRateChangeCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onSeeked?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onSeekedCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onSeeking?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onSeekingCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onStalled?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onStalledCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onSuspend?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onSuspendCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onTimeUpdate?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onVolumeChange?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onWaiting?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onWaitingCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onAuxClick?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onAuxClickCapture?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onClick?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onClickCapture?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onContextMenu?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onContextMenuCapture?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onDoubleClick?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onDrag?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+    onDragCapture?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+    onDragEnd?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+    onDragEndCapture?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+    onDragEnter?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+    onDragEnterCapture?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+    onDragExit?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+    onDragExitCapture?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+    onDragLeave?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+    onDragLeaveCapture?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+    onDragOver?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+    onDragOverCapture?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+    onDragStart?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+    onDragStartCapture?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+    onDrop?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+    onDropCapture?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+    onMouseDown?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseDownCapture?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseEnter?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseLeave?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseMove?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseOut?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseOutCapture?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseOver?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseOverCapture?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseUp?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseUpCapture?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onSelect?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onSelectCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onTouchCancel?: import("react").TouchEventHandler<HTMLInputElement> | undefined;
+    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLInputElement> | undefined;
+    onTouchEnd?: import("react").TouchEventHandler<HTMLInputElement> | undefined;
+    onTouchEndCapture?: import("react").TouchEventHandler<HTMLInputElement> | undefined;
+    onTouchMove?: import("react").TouchEventHandler<HTMLInputElement> | undefined;
+    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLInputElement> | undefined;
+    onTouchStart?: import("react").TouchEventHandler<HTMLInputElement> | undefined;
+    onTouchStartCapture?: import("react").TouchEventHandler<HTMLInputElement> | undefined;
+    onPointerDown?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerDownCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerMove?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerUp?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerUpCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerCancel?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerEnter?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerLeave?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerOver?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerOverCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerOut?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerOutCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+    onGotPointerCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+    onLostPointerCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+    onScroll?: import("react").UIEventHandler<HTMLInputElement> | undefined;
+    onScrollCapture?: import("react").UIEventHandler<HTMLInputElement> | undefined;
+    onScrollEnd?: import("react").UIEventHandler<HTMLInputElement> | undefined;
+    onScrollEndCapture?: import("react").UIEventHandler<HTMLInputElement> | undefined;
+    onWheel?: import("react").WheelEventHandler<HTMLInputElement> | undefined;
+    onWheelCapture?: import("react").WheelEventHandler<HTMLInputElement> | undefined;
+    onAnimationStart?: import("react").AnimationEventHandler<HTMLInputElement> | undefined;
+    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLInputElement> | undefined;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLInputElement> | undefined;
+    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLInputElement> | undefined;
+    onAnimationIteration?: import("react").AnimationEventHandler<HTMLInputElement> | undefined;
+    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLInputElement> | undefined;
+    onToggle?: import("react").ToggleEventHandler<HTMLInputElement> | undefined;
+    onBeforeToggle?: import("react").ToggleEventHandler<HTMLInputElement> | undefined;
+    onTransitionCancel?: import("react").TransitionEventHandler<HTMLInputElement> | undefined;
+    onTransitionCancelCapture?: import("react").TransitionEventHandler<HTMLInputElement> | undefined;
+    onTransitionEnd?: import("react").TransitionEventHandler<HTMLInputElement> | undefined;
+    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLInputElement> | undefined;
+    onTransitionRun?: import("react").TransitionEventHandler<HTMLInputElement> | undefined;
+    onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLInputElement> | undefined;
+    onTransitionStart?: import("react").TransitionEventHandler<HTMLInputElement> | undefined;
+    onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLInputElement> | undefined;
+    min?: number | string | undefined | undefined;
+    max?: number | string | undefined | undefined;
+    step?: number | string | undefined | undefined;
+    disabled?: boolean | undefined | undefined;
+    alt?: string | undefined | undefined;
+    accept?: string | undefined | undefined;
+    multiple?: boolean | undefined | undefined;
+    size?: number | undefined | undefined;
+    autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
+    capture?: boolean | "user" | "environment" | undefined | undefined;
+    checked?: boolean | undefined | undefined;
+    formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
+    formEncType?: string | undefined | undefined;
+    formMethod?: string | undefined | undefined;
+    formNoValidate?: boolean | undefined | undefined;
+    formTarget?: string | undefined | undefined;
+    list?: string | undefined | undefined;
+    maxLength?: number | undefined | undefined;
+    minLength?: number | undefined | undefined;
+    name?: string | undefined | undefined;
+    placeholder?: string | undefined | undefined;
+    readOnly?: boolean | undefined | undefined;
+    required?: boolean | undefined | undefined;
+    src?: string | undefined | undefined;
+  } & import("react").RefAttributes<HTMLInputElement>>;
+  Stepper: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   IncrementStepper: typeof IncrementStepper;
   DecrementStepper: typeof DecrementStepper;
 };
@@ -661,7 +1086,7 @@ type KeyboardShortcuts = {
 /**
  * Ready-made keyboard layouts. Both assume `noteRange.first` is a C.
  */
-declare const SHORTCUTS: {
+export declare const SHORTCUTS: {
   /** Every semitone from C, over the two rows of a QWERTY keyboard. */
   HOME_ROW: {
     keys: string[];
@@ -674,11 +1099,6 @@ declare const SHORTCUTS: {
 //#endregion
 //#region src/components/Piano/index.d.ts
 type KeyboardShortcutsScope = 'root' | 'window';
-/**
- * `style` that also takes CSS custom properties, which is how a key's colours
- * are set: see `index.css` for the ones each key type reads.
- */
-type CSSVariables = Record<`--${string}`, string | number | undefined>;
 /**
  * What {@link PianoProps.keyProps} may return for one key.
  *
@@ -687,7 +1107,7 @@ type CSSVariables = Record<`--${string}`, string | number | undefined>;
  * mark a key out.
  */
 type KeyAttributes = Omit<ComponentPropsWithoutRef<'div'>, 'style'> & {
-  style?: CSSProperties & CSSVariables;
+  style?: CSSProperties & CSSVariables<'color' | 'bg' | 'active-color' | 'active-bg'>;
 } & Record<`data-${string}`, string | number | boolean | undefined>;
 /** What a key is, when {@link PianoProps.label} or `keyProps` is asked about it. */
 interface KeyState {
@@ -775,7 +1195,6 @@ interface PianoProps {
    * `data-resizable`.
    */
   height?: number | string;
-  style?: CSSProperties & CSSVariables;
   /**
    * What to draw inside a key. `''`, `null` and `undefined` leave it bare, so
    * a layout with gaps — {@link SHORTCUTS.HOME_ROW_NATURAL}, say — needs no
@@ -805,6 +1224,7 @@ interface PianoProps {
   onPlayNote?: (note: number, velocity?: number) => void;
   /** Called once everything holding a note has let go of it. */
   onStopNote?: (note: number) => void;
+  style?: CSSProperties & CSSVariables<'height'>;
 }
 interface PianoMethods {
   playNote: (note: number, velocity?: number) => void;
@@ -813,29 +1233,19 @@ interface PianoMethods {
 /**
  * Customizable piano component.
  */
-declare const Piano: {
+export declare const Piano: {
   Root: import("react").ForwardRefExoticComponent<PianoProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof PianoProps> & import("react").RefAttributes<PianoMethods>>;
 };
 //#endregion
-//#region src/components/PointsEditor/Container.d.ts
-interface PointsEditorContainerProps {
-  /** `<PointsEditor.Point />` goes here. */
-  children?: ReactNode;
-}
-//#endregion
 //#region src/components/PointsEditor/Background.d.ts
-interface PointsEditorBackgroundProps {
-  /** Whatever the points are placed over: a graph, a canvas, an image. */
-  children?: ReactNode;
-}
-declare function Background({ className, children, style, ...props }: PointsEditorBackgroundProps & Omit<ComponentPropsWithoutRef<'div'>, keyof PointsEditorBackgroundProps>): import("react").JSX.Element;
+declare function Background({ className, children, style, ...props }: ComponentPropsWithoutRef<'div'>): import("react").JSX.Element;
 //#endregion
 //#region src/components/PointsEditor/Point.d.ts
 type PointBaseType = {
   x: number;
   y: number;
 };
-declare function clampPoint(point: PointBaseType, min?: Partial<PointBaseType>, max?: Partial<PointBaseType>): {
+export declare function clampPoint(point: PointBaseType, min?: Partial<PointBaseType>, max?: Partial<PointBaseType>): {
   x: number;
   y: number;
 };
@@ -845,8 +1255,6 @@ interface PointsEditorPointProps<T extends PointBaseType> {
    * growing downwards.
    */
   value: T;
-  /** Drawn inside the point: the theme's own dot stands when it is left out. */
-  children?: ReactNode;
   /**
    * How the selection refers to this point. One is generated when it is left
    * out, which lasts as long as the point is mounted — give your own if the
@@ -889,21 +1297,18 @@ interface PointsEditorPointProps<T extends PointBaseType> {
   onDragStart?: (value: PointBaseType) => void;
   /** Called when that drag ends, with where the point is. */
   onDragEnd?: (value: PointBaseType) => void;
+  style?: CSSProperties & CSSVariables<'width' | 'height' | 'color' | 'translate'>;
 }
 declare function Point<T extends PointBaseType>({ value, children, id: idProp, min, max, size, width, height, color, disabled: _disabled, readonly: _readonly, wheel: _wheel, keyboard: _keyboard, 'aria-label': ariaLabel, 'aria-valuetext': ariaValuetext, onChange, onDragStart, onDragEnd, className, style, onPointerDown, onKeyDown, onFocus, ...props }: PointsEditorPointProps<T> & Omit<ComponentPropsWithoutRef<'div'>, keyof PointsEditorPointProps<T>>): import("react").JSX.Element;
 //#endregion
 //#region src/components/PointsEditor/SelectionBox.d.ts
-interface PointsEditorSelectionBoxProps {
-  /** Drawn inside the box, which is only there while a drag is running. */
-  children?: ReactNode;
-}
 /**
  * The box a drag on empty space draws, and what it covers is selected.
  *
  * Nothing is rendered while no drag is running, and leaving it out leaves the
  * editor without one — the selection still works, it just cannot be seen.
  */
-declare function SelectionBox({ children, className, style, ...props }: PointsEditorSelectionBoxProps & Omit<ComponentPropsWithoutRef<'div'>, keyof PointsEditorSelectionBoxProps>): import("react").JSX.Element | null;
+declare function SelectionBox({ children, className, style, ...props }: ComponentPropsWithoutRef<'div'>): import("react").JSX.Element | null;
 //#endregion
 //#region src/components/PointsEditor/context.d.ts
 /**
@@ -982,8 +1387,8 @@ type PointsEditorContextValue = {
  * value still belongs to the `Point` that draws it; what the root keeps is
  * which points are selected, and a registry of who they are.
  */
-declare function usePointsEditorContext(): PointsEditorContextValue;
-declare function usePointsEditorContext<T>(selector: (state: PointsEditorContextValue) => T): T;
+export declare function usePointsEditorContext(): PointsEditorContextValue;
+export declare function usePointsEditorContext<T>(selector: (state: PointsEditorContextValue) => T): T;
 //#endregion
 //#region src/components/PointsEditor/index.d.ts
 interface PointsEditorProps {
@@ -1102,14 +1507,15 @@ interface PointsEditorProps {
    * </PointsEditor.Root>
    */
   children: ReactNode;
+  style?: CSSProperties & CSSVariables<'width' | 'height'>;
 }
 /**
  * Multiple Point Controller
  */
-declare const PointsEditor: {
+export declare const PointsEditor: {
   Root: import("react").ForwardRefExoticComponent<PointsEditorProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof PointsEditorProps> & import("react").RefAttributes<HTMLDivElement>>;
   Background: typeof Background;
-  Container: import("react").ForwardRefExoticComponent<PointsEditorContainerProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children"> & import("react").RefAttributes<HTMLDivElement>>;
+  Container: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Point: typeof Point;
   SelectionBox: typeof SelectionBox;
 };
@@ -1122,18 +1528,7 @@ interface SliderThumbProps {
    * leave the matching room around the track.
    */
   color?: string;
-  className?: string;
-  style?: CSSProperties;
-  /**
-   * Rendered inside the thumb. The thumb is one element either way, so what
-   * is passed here is decoration on top of it rather than a replacement for
-   * it — `className` and `style` are how its own appearance is changed.
-   */
-  children?: ReactNode;
-  'aria-label'?: AriaAttributes['aria-label'];
-  'aria-labelledby'?: AriaAttributes['aria-labelledby'];
-  'aria-describedby'?: AriaAttributes['aria-describedby'];
-  'aria-valuetext'?: AriaAttributes['aria-valuetext'];
+  style?: CSSProperties & CSSVariables<'color' | 'translate'>;
 }
 interface SliderThumbMethods {
   focus: () => void;
@@ -1153,10 +1548,7 @@ interface SliderTrackProps {
   active?: string;
   /** Colour of the rest of the track. Sets `--inactive`. */
   inactive?: string;
-  className?: string;
-  style?: CSSProperties;
-  /** `<Slider.Thumb />` goes here. */
-  children?: ReactNode;
+  style?: CSSProperties & CSSVariables<'length' | 'thickness' | 'active' | 'inactive' | 'percent'>;
 }
 //#endregion
 //#region src/components/Slider/type.d.ts
@@ -1188,11 +1580,7 @@ interface SliderMarksProps {
    * `'step'` makes one per step, which is a great many for a fine `step`.
    */
   options?: MarksOptions;
-  /**
-   * `<Slider.MarksOption />` goes here, one per mark. Ignored while `options`
-   * is set.
-   */
-  children?: ReactNode;
+  style?: CSSProperties & CSSVariables<'gap'>;
 }
 declare function Marks({ gap, options, children, className, style, ...props }: SliderMarksProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SliderMarksProps>): import("react").JSX.Element;
 //#endregion
@@ -1228,6 +1616,7 @@ interface SliderMarksOptionProps {
     mark?: CSSProperties;
     label?: CSSProperties;
   };
+  style?: CSSProperties & CSSVariables<'thickness' | 'length' | 'gap' | 'label-width' | 'translate'>;
 }
 declare function MarksOption({ value, mark, label, thickness, length, gap, labelWidth, classes, styles, className, style, ...props }: SliderMarksOptionProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SliderMarksOptionProps>): import("react").JSX.Element;
 //#endregion
@@ -1258,8 +1647,8 @@ type SliderContextValue = {
  * Everything here is derived during render, so there is no state to keep in
  * sync: `value` comes from the props of `Root` and the rest follows from it.
  */
-declare function useSliderContext(): SliderContextValue;
-declare function useSliderContext<T>(selector: (state: SliderContextValue) => T): T;
+export declare function useSliderContext(): SliderContextValue;
+export declare function useSliderContext<T>(selector: (state: SliderContextValue) => T): T;
 //#endregion
 //#region src/components/Slider/index.d.ts
 interface SliderProps {
@@ -1364,8 +1753,6 @@ interface SliderProps {
    * The parts carry `data-readonly` while it is set.
    */
   readonly?: boolean;
-  className?: string;
-  style?: CSSProperties;
   /** Called with the new value when a drag, the wheel or an arrow key moves it. */
   onChange?: (value: number) => void;
   /** Called when a drag starts, with the value where the track was pressed. */
@@ -1392,7 +1779,7 @@ interface SliderMethods {
 /**
  * Customizable slider
  */
-declare const Slider: {
+export declare const Slider: {
   Root: React.ForwardRefExoticComponent<SliderProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SliderProps> & React.RefAttributes<SliderMethods>>;
   Thumb: React.ForwardRefExoticComponent<SliderThumbProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SliderThumbProps> & React.RefAttributes<SliderThumbMethods>>;
   Track: React.ForwardRefExoticComponent<SliderTrackProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SliderTrackProps> & React.RefAttributes<HTMLDivElement>>;
@@ -1425,8 +1812,8 @@ type XYPadContextValue = {
  * Everything here is derived during render, so there is no state to keep in
  * sync: `value` comes from the props of `Root` and the rest follows from it.
  */
-declare function useXYPadContext(): XYPadContextValue;
-declare function useXYPadContext<T>(selector: (state: XYPadContextValue) => T): T;
+export declare function useXYPadContext(): XYPadContextValue;
+export declare function useXYPadContext<T>(selector: (state: XYPadContextValue) => T): T;
 //#endregion
 //#region src/components/XYPad/Thumb.d.ts
 interface XYPadThumbProps {
@@ -1436,14 +1823,6 @@ interface XYPadThumbProps {
    * the matching room around the area.
    */
   color?: string;
-  className?: string;
-  style?: CSSProperties;
-  /**
-   * Rendered inside the thumb. The thumb is one element either way, so what
-   * is passed here is decoration on top of it rather than a replacement for
-   * it — `className` and `style` are how its own appearance is changed.
-   */
-  children?: ReactNode;
   /**
    * The accessible name of each axis, as `[x, y]`. There are two range inputs
    * inside the thumb, so each takes a name of its own; a single string names
@@ -1459,6 +1838,7 @@ interface XYPadThumbProps {
    * `[x, y]` or one for both.
    */
   'aria-valuetext'?: XYInput<AriaAttributes['aria-valuetext']>;
+  style?: CSSProperties & CSSVariables<'color' | 'translate'>;
 }
 interface XYPadThumbMethods {
   focus: () => void;
@@ -1473,10 +1853,7 @@ interface XYPadAreaProps {
   height?: number | string;
   /** Sets `--color`, for the theme to colour the area with. */
   color?: string;
-  className?: string;
-  style?: CSSProperties;
-  /** `<XYPad.Thumb />` goes here. */
-  children?: ReactNode;
+  style?: CSSProperties & CSSVariables<'width' | 'height' | 'color'>;
 }
 //#endregion
 //#region src/components/XYPad/index.d.ts
@@ -1610,20 +1987,24 @@ interface XYPadMethods {
 /**
  * Simple XYPad
  */
-declare const XYPad: {
+export declare const XYPad: {
   Root: import("react").ForwardRefExoticComponent<XYPadProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof XYPadProps> & import("react").RefAttributes<XYPadMethods>>;
   Thumb: import("react").ForwardRefExoticComponent<XYPadThumbProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof XYPadThumbProps> & import("react").RefAttributes<XYPadThumbMethods>>;
   Area: import("react").ForwardRefExoticComponent<XYPadAreaProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof XYPadAreaProps> & import("react").RefAttributes<HTMLDivElement>>;
 };
 //#endregion
 //#region src/hooks/useAnimationFrame.d.ts
-declare function useAnimationFrame(callback?: () => void, deps?: DependencyList): void;
+export declare function useAnimationFrame(callback?: () => void, deps?: DependencyList): void;
 //#endregion
 //#region src/hooks/useDrag.d.ts
-interface UseDragProps {
+interface UseDragOptions {
   /**
-   * Threshold at which the onDrag event fires.
-   * Prevents onDrag events from firing, for example, when double-clicking.
+   * Pixels the pointer has to travel before the drag counts as one.
+   *
+   * A click moves the pointer by a pixel or two, so without a threshold a
+   * double click reports a drag between the two presses.
+   *
+   * @default 1
    */
   threshold?: number;
   /** CSS cursor to show while dragging. Applied to the element itself. */
@@ -1637,11 +2018,16 @@ interface UseDragProps {
    */
   pointerLock?: boolean;
   /**
+   * Called on every move once the drag has started, with the pointer position
+   * relative to the element and how far it moved since the last call.
+   *
    * @param state the whole drag, for anything the four numbers leave out —
    * the pointer event and its modifier keys, most of all.
    */
   onDrag?: (x: number, y: number, deltaX: number, deltaY: number, state: DragState) => void;
+  /** Called once the pointer has moved past `threshold`, not on pointerdown. */
   onDragStart?: (state: DragState) => void;
+  /** Called when the pointer is released, only if the drag ever started. */
   onDragEnd?: (state: DragState) => void;
 }
 /**
@@ -1649,7 +2035,7 @@ interface UseDragProps {
  *
  * @returns a ref callback to attach to the element being dragged
  */
-declare function useDrag<T extends Element>({ threshold, cursor, pointerLock, onDrag, onDragStart, onDragEnd }: UseDragProps): (node: T | null) => void;
+export declare function useDrag<T extends Element>({ threshold, cursor, pointerLock, onDrag, onDragStart, onDragEnd }: UseDragOptions): (node: T | null) => void;
 //#endregion
 //#region src/hooks/useDragValue.d.ts
 interface UseDragValueOptions {
@@ -1687,9 +2073,19 @@ interface UseDragValueOptions {
    * @see elementMapping
    */
   sensitivity?: (state: DragState) => number;
-  /** @see DragValueOptions.updateOnPointerDown */
+  /**
+   * Move the value on pointerdown, before the pointer has moved at all. With
+   * `baseElementRef` that makes a press jump the value to where it landed.
+   *
+   * @see DragValueOptions.updateOnPointerDown
+   */
   updateOnPointerDown?: boolean;
-  /** @default 0 */
+  /**
+   * Pixels the pointer has to travel before the drag counts as one. The
+   * default is 0, so the value follows the very first move.
+   *
+   * @default 0
+   */
   threshold?: number;
   /** CSS cursor to show while dragging. Applied to the element itself. */
   cursor?: string;
@@ -1710,11 +2106,16 @@ interface UseDragValueOptions {
    */
   shouldStart?: (event: PointerEvent) => boolean;
   /**
+   * Called with the new value whenever the drag moves it. The hook holds no
+   * value of its own, so this is where it is stored.
+   *
    * @param state the whole drag, for anything the value leaves out — the
    * pointer event and its modifier keys, most of all.
    */
   onChange?: (value: XY$1<number>, state: DragState) => void;
+  /** Called once the drag starts, with the value it starts from. */
   onDragStart?: (value: XY$1<number>, state: DragState) => void;
+  /** Called when the pointer is released, with the value it ends on. */
   onDragEnd?: (value: XY$1<number>, state: DragState) => void;
 }
 /**
@@ -1722,23 +2123,39 @@ interface UseDragValueOptions {
  *
  * @returns a ref callback for the element that starts the drag, and whether a drag is in progress
  */
-declare function useDragValue<T extends Element>(options: UseDragValueOptions): {
+export declare function useDragValue<T extends Element>(options: UseDragValueOptions): {
   refCallback: (node: T | null) => void;
   dragging: boolean;
 };
 //#endregion
+//#region src/hooks/useDropZone.d.ts
+interface UseDropZoneOptions extends Omit<DropZoneOptions, 'onStateChange'> {}
+/**
+ * Take files dropped onto an element.
+ *
+ * Any element can become a drop target this way — a waveform display, a track
+ * lane, a canvas — without wrapping it in anything.
+ *
+ * @returns a ref callback for the element, and whether a drag is over it
+ */
+export declare function useDropZone<T extends Element>({ accept, multiple, disabled, onDrop, onReject }?: UseDropZoneOptions): {
+  refCallback: (node: T | null) => void;
+  over: boolean;
+  invalid: boolean;
+};
+//#endregion
 //#region src/hooks/useEventListener.d.ts
 type Target = EventTarget | null | (() => EventTarget | null);
 type Options = boolean | AddEventListenerOptions;
-declare function useEventListener<K extends keyof DocumentEventMap>(target: Target, event: K, handler: (event: DocumentEventMap[K]) => void, options?: Options): VoidFunction;
-declare function useEventListener<K extends keyof WindowEventMap>(target: Target, event: K, handler: (event: WindowEventMap[K]) => void, options?: Options): VoidFunction;
-declare function useEventListener<K extends keyof GlobalEventHandlersEventMap>(target: Target, event: K, handler: (event: GlobalEventHandlersEventMap[K]) => void, options?: Options): VoidFunction;
+export declare function useEventListener<K extends keyof DocumentEventMap>(target: Target, event: K, handler: (event: DocumentEventMap[K]) => void, options?: Options): VoidFunction;
+export declare function useEventListener<K extends keyof WindowEventMap>(target: Target, event: K, handler: (event: WindowEventMap[K]) => void, options?: Options): VoidFunction;
+export declare function useEventListener<K extends keyof GlobalEventHandlersEventMap>(target: Target, event: K, handler: (event: GlobalEventHandlersEventMap[K]) => void, options?: Options): VoidFunction;
 //#endregion
 //#region src/hooks/useInterval.d.ts
-declare function useInterval(callback: () => void, delay: number | null): void;
+export declare function useInterval(callback: () => void, delay: number | null): void;
 //#endregion
 //#region src/hooks/useLongPress.d.ts
-declare function useLongPress(callback: () => void, initialDelay?: number, interval?: number): (event?: Pick<PointerEvent, "button" | "pointerId">) => void;
+export declare function useLongPress(callback: () => void, initialDelay?: number, interval?: number): (event?: Pick<PointerEvent, "button" | "pointerId">) => void;
 //#endregion
 //#region src/hooks/useMIDIAccess.d.ts
 /**
@@ -1751,7 +2168,7 @@ declare function useLongPress(callback: () => void, initialDelay?: number, inter
  * messages. Browsers treat that as a separate, more sensitive permission, so
  * ask for it only when it is actually used.
  */
-declare function useMIDIAccess(requestOnMount?: boolean): {
+export declare function useMIDIAccess(requestOnMount?: boolean): {
   request: (options?: MIDIAccessOptions$1) => void;
   midiAccess: MIDIAccess | null;
   error: import("@tremolo-ui/dom").MIDIAccessError | null;
@@ -1776,7 +2193,7 @@ declare function useMIDIAccess(requestOnMount?: boolean): {
  *   },
  * })
  */
-declare function useMIDIInput(midiAccess: MIDIAccess | null, handlers: MIDIInputHandlers): void;
+export declare function useMIDIInput(midiAccess: MIDIAccess | null, handlers: MIDIInputHandlers): void;
 //#endregion
 //#region src/hooks/useMIDIMessage.d.ts
 /**
@@ -1786,10 +2203,10 @@ declare function useMIDIInput(midiAccess: MIDIAccess | null, handlers: MIDIInput
  * listeners are attached once per `midiAccess` and stay attached, and devices
  * plugged in later are picked up.
  */
-declare function useMIDIMessage(midiAccess: MIDIAccess | null, onMIDIMessage: (event: MIDIMessageEvent) => void): void;
+export declare function useMIDIMessage(midiAccess: MIDIAccess | null, onMIDIMessage: (event: MIDIMessageEvent) => void): void;
 //#endregion
 //#region src/hooks/useWheel.d.ts
-interface UseWheelOptions extends WheelOptions {
+interface UseWheelOptions extends Omit<WheelOptions, 'onWheel'> {
   /**
    * Listen on this element rather than on the one the returned ref callback is
    * attached to, and ignore that callback.
@@ -1811,7 +2228,7 @@ interface UseWheelOptions extends WheelOptions {
  *
  * @returns a ref callback to attach to the element, unused when `target` is given
  */
-declare function useWheel<T extends Element>(onWheel: (event: WheelEvent) => void, { requireFocus, target }?: UseWheelOptions): (node: T | null) => void;
+export declare function useWheel<T extends Element>(onWheel: (event: WheelEvent) => void, { requireFocus, target }?: UseWheelOptions): (node: T | null) => void;
 //#endregion
 //#region src/input-event.d.ts
 /**
@@ -1821,21 +2238,21 @@ declare function useWheel<T extends Element>(onWheel: (event: WheelEvent) => voi
  * `useCheckSteps` warns about.
  *
  * A modifier entry is not snapped to `step`, which is what lets the finer
- * amount move at all — see `applyDelta` in `@tremolo-ui/functions`.
+ * amount move at all — see `applyDelta` in `@tremolo-ui/dom`.
  */
-declare const DEFAULT_KEYBOARD_OPTIONS: ModifierValue<InputEventOption>;
+export declare const DEFAULT_KEYBOARD_OPTIONS: ModifierValue<InputEventOption>;
 /**
  * The wheel amount used by Knob, NumberInput, Slider, and XYPad by default.
  *
  * Browsers turn shift+wheel into horizontal scrolling, which empties `deltaY`
  * and fills `deltaX`, so no modifier is bound here.
  */
-declare const DEFAULT_WHEEL_OPTIONS: ModifierValue<InputEventOption>;
+export declare const DEFAULT_WHEEL_OPTIONS: ModifierValue<InputEventOption>;
 /**
  * The drag sensitivity used by value controls by default. Shift makes the
  * same movement cover a tenth of the range, matching the arrow keys.
  */
-declare const DEFAULT_DRAG_SENSITIVITY: ModifierValue<number>;
+export declare const DEFAULT_DRAG_SENSITIVITY: ModifierValue<number>;
 //#endregion
-export { AnimationCanvas, type AnimationCanvasCommonProps, type AnimationCanvasFixedProps, type AnimationCanvasProps, type AnimationCanvasResizableProps, type CSSVariables, DEFAULT_DRAG_SENSITIVITY, DEFAULT_KEYBOARD_OPTIONS, DEFAULT_WHEEL_OPTIONS, type DrawFunction, type InitFunction, type KeyAttributes, type KeyState, type KeyboardShortcuts, Knob, type KnobContextValue, type KnobMethods, type KnobProps, type KnobSVGRootProps, type KnobThumbProps, type MIDIAccessError, type MIDIAccessOptions, type MIDIInputHandlers, type MarksOptions, NOT_SUPPORTED, NumberInput, type NumberInputContextValue, type NumberInputDecrementStepperProps, type NumberInputIncrementStepperProps, type NumberInputInputFieldProps, type NumberInputMethods, type NumberInputProps, type NumberInputStepperProps, PERMISSION_DENIED, PITCH_BEND_CENTER, Piano, type PianoMethods, type PianoProps, type PointBaseType, PointsEditor, type PointsEditorBackgroundProps, type PointsEditorContainerProps, type PointsEditorContextValue, type PointsEditorPointProps, type PointsEditorProps, type PointsEditorSelectionBoxProps, SHORTCUTS, Slider, type SliderContextValue, type SliderMarksOptionProps, type SliderMarksProps, type SliderMethods, type SliderProps, type SliderThumbMethods, type SliderThumbProps, type SliderTrackProps, UNAVAILABLE, type UseDragValueOptions, type UseWheelOptions, type XY, type XYInput, XYPad, type XYPadAreaProps, type XYPadContextValue, type XYPadMethods, type XYPadProps, type XYPadThumbMethods, type XYPadThumbProps, clampPoint, useAnimationFrame, useDrag, useDragValue, useEventListener, useInterval, useKnobContext, useLongPress, useMIDIAccess, useMIDIInput, useMIDIMessage, useNumberInputContext, usePointsEditorContext, useSliderContext, useWheel, useXYPadContext };
+export { type AnimationCanvasCommonProps, type AnimationCanvasFixedProps, type AnimationCanvasProps, type AnimationCanvasResizableProps, type CSSVariables, type DrawFunction, type DropZoneProps, type FileInputContextValue, type FileInputProps, type FileInputTriggerProps, type InitFunction, type KeyAttributes, type KeyState, type KeyboardShortcuts, type KnobContextValue, type KnobMethods, type KnobProps, type KnobSVGRootProps, type KnobThumbProps, type MIDIAccessError, type MIDIAccessOptions, type MIDIInputHandlers, type MarksOptions, NOT_SUPPORTED, type NumberInputContextValue, type NumberInputMethods, type NumberInputProps, PERMISSION_DENIED, PITCH_BEND_CENTER, type PianoMethods, type PianoProps, type PointBaseType, type PointsEditorContextValue, type PointsEditorPointProps, type PointsEditorProps, type SliderContextValue, type SliderMarksOptionProps, type SliderMarksProps, type SliderMethods, type SliderProps, type SliderThumbMethods, type SliderThumbProps, type SliderTrackProps, UNAVAILABLE, type UseDragOptions, type UseDragValueOptions, type UseDropZoneOptions, type UseWheelOptions, type XY, type XYInput, type XYPadAreaProps, type XYPadContextValue, type XYPadMethods, type XYPadProps, type XYPadThumbMethods, type XYPadThumbProps };
 //# sourceMappingURL=index.d.cts.map