import type * as React from 'react';
import type { KnobCoreProps } from '../core/types';

export { MONO_FONT, UI_FONT } from '../core/theme';

/** Props common to every prebuilt knob skin. */
export interface SkinProps extends KnobCoreProps {
  /** Square canvas size in px. */
  size?: number;
  /** Caption drawn in the travel gap at the bottom of the knob. */
  label?: string;
  /** Show the numeric readout. Default varies per skin. */
  showValue?: boolean;
  /** Unit suffix for the readout, e.g. "dB", "Hz", "%". */
  unit?: string;
  /** Custom readout formatter (takes precedence over unit/decimals). */
  format?: (value: number) => string;
  /** Keyboard focus ring color, or false to disable. Defaults to the theme's. */
  focusRing?: string | false;
  /**
   * Type-in editing: double-click (knobs) or click the readout (faders) to
   * enter an exact value. Enter/blur commits, Escape cancels, "1.2k" works.
   */
  editable?: boolean;
  /** Custom parser for typed input when `editable` is set. */
  parseValue?: (text: string) => number | null;
  /** Render a hidden form input carrying the current value. */
  name?: string;
  /** Show a floating value bubble above the knob while dragging. */
  valueBubble?: boolean;
  /** Formatter for the bubble text (defaults to the trimmed value). */
  bubbleFormat?: (value: number) => string;
  className?: string;
  style?: React.CSSProperties;
}