import React, { ReactNode } from 'react'; import { S as SnapPhysicsConfig } from './index-xKJw1Yz2.js'; import { a as TimingPreset, T as TimingConfig } from './timing-hpJyGenE.js'; /** * Haptic feedback adapter for picker interactions * * Tree-shakeable: This module is only included in the bundle when * haptics are enabled via the enableHaptics prop. */ type VibratePattern = number | number[]; interface HapticAdapter { /** * Trigger a haptic pulse for value changes * @param isSettle - Whether this is a settle event (stronger feedback) */ trigger: (isSettle?: boolean) => void; /** * Cleanup resources (no-op for haptics, but included for consistency) */ cleanup: () => void; } /** * Creates a haptic feedback adapter using the Vibration API * * @returns Haptic adapter or null if vibration is not supported * * @example * ```ts * const haptics = createHapticAdapter(); * if (haptics) { * haptics.trigger(); // Vibrate on value change * } * ``` */ interface HapticAdapterOptions { /** Pattern for regular scroll haptics */ pattern?: VibratePattern; /** Pattern for settle haptics (stronger feedback when picker comes to rest) */ settlePattern?: VibratePattern; } declare function createHapticAdapter(options?: HapticAdapterOptions): HapticAdapter | null; /** * Audio feedback adapter for picker interactions * * Tree-shakeable: This module is only included in the bundle when * audio feedback is enabled via the enableAudioFeedback prop. * * Creates a subtle confirmation chirp using Web Audio API when values * are committed (not during scrolling). */ interface AudioAdapter { /** * Play a confirmation sound (subtle chirp at 920Hz) */ playConfirmation: () => void; /** * Cleanup audio context and resources */ cleanup: () => void; /** * Resume audio context if suspended (for user gesture requirements) */ resume: () => Promise; } interface AudioAdapterOptions { frequency?: number; waveform?: OscillatorType; attackMs?: number; decayMs?: number; durationMs?: number; peakGain?: number; } /** * Creates an audio feedback adapter using Web Audio API * * Uses a lazy-initialized AudioContext to avoid Chrome's autoplay * restrictions. The context is created on first use and resumed * automatically when needed. * * @returns Audio adapter or null if Web Audio API is not supported */ declare function createAudioAdapter(options?: AudioAdapterOptions): AudioAdapter | null; /** * Feedback adapters for picker interactions * * This module provides tree-shakeable haptic and audio feedback. * When both enableHaptics and enableAudioFeedback are false, * the entire feedback system can be removed from the bundle. * * @module feedback */ interface FeedbackAdapters { haptics: ReturnType; audio: ReturnType; } /** * Theme configuration for CollapsiblePicker visual styling. * * Controls colors, typography, and visual states. All color properties accept any valid CSS color. * Use `buildTheme()` helper to override specific properties while keeping defaults. * * @see {@link buildTheme} for creating custom themes */ interface CollapsiblePickerTheme { /** Text color for non-selected items */ textColor: string; /** Text color for the active/selected item */ activeTextColor: string; /** Color for the unit suffix (e.g., 'kg', 'mph') */ unitColor: string; /** Color for selected item background/highlight */ selectedColor: string; /** Color for items during selection transition */ pendingColor: string; /** Hover state color for interactive elements */ hoverColor: string; /** Flash color shown on value confirmation */ flashColor: string; /** Primary deselect gradient color */ deselectColorA: string; /** Secondary deselect gradient color */ deselectColorB: string; /** Deselect color when effect is disabled */ deselectColorOff: string; /** Border color for the selection highlight area */ highlightBorderColor: string; /** Fill color for the selection highlight area */ highlightFillColor: string; /** Backdrop overlay color when picker is open */ backdropColor: string; /** Background gradient fade color */ fadeColor: string; /** Font size (supports responsive values like clamp()) */ fontSize: string; /** Font family stack */ fontFamily: string; /** Border color when picker is closed with a value */ closedBorderColor: string; /** Border color when picker is closed without a value */ closedBorderColorEmpty: string; /** Background color when picker is closed with a value */ closedBackgroundColor: string; /** Background color when picker is closed without a value */ closedBackgroundColorEmpty: string; /** Color for the label text */ labelColor: string; /** Color for the "restore last value" button */ lastValueButtonColor: string; /** Focus ring color for keyboard navigation */ focusRingColor: string; } /** * Context passed to custom `renderValue` function. * * @see {@link RenderValueFn} */ interface CollapsiblePickerRenderValueContext { /** Unit suffix (e.g., 'kg') */ unit: string; /** Whether picker is currently open/expanded */ showPicker: boolean; /** Current numeric value */ value: string | number; } /** * State passed to custom `renderItem` function for each picker item. * * @see {@link RenderItemFn} */ interface CollapsiblePickerRenderItemState { /** True if this item is the current value */ selected: boolean; /** True if this item is centered in viewport (may differ from selected during scrolling) */ visuallySelected: boolean; /** Unit suffix (e.g., 'kg') */ unit: string; /** True if item is animating out (deselect effect) */ deselecting: boolean; } /** * Custom renderer for the collapsed/closed value display. * * @param displayValue - Formatted value to display * @param context - Additional context (unit, picker state, raw value) * @returns React node to render in closed state * * @example * ```tsx * ( * {value} {unit} * )} * /> * ``` */ type RenderValueFn = (displayValue: string | number, context: CollapsiblePickerRenderValueContext) => ReactNode; /** * Custom renderer for individual picker items in the scrollable list. * * @param value - Formatted value string * @param state - Item state (selected, deselecting, etc.) * @returns React node to render for this item * * @example * ```tsx * ( *
* {value} {unit} *
* )} * /> * ``` */ type RenderItemFn = (value: string, state: CollapsiblePickerRenderItemState) => ReactNode; /** * Props for CollapsiblePicker component * * Primary interface for the interactive collapsible picker. * Renamed from CollapsiblePickerProps for clarity (works with any values, not just numbers). */ interface CollapsiblePickerProps { label: string; value: number | undefined; onChange: (value: number) => void; unit: string; min?: number; max?: number; step?: number; lastValue?: number; initialValue?: number; placeholder?: string; isOpen?: boolean; onRequestOpen?: () => void; onRequestClose?: () => void; itemHeight?: number; theme?: Partial; renderValue?: RenderValueFn; renderItem?: RenderItemFn; helperText?: ReactNode; enableSnapPhysics?: boolean; snapPhysicsConfig?: Partial; enableHaptics?: boolean; enableAudioFeedback?: boolean; feedbackConfig?: QuickPickerFeedbackConfig; wheelSensitivity?: number; wheelDeltaCap?: number; timingPreset?: TimingPreset; timingConfig?: Readonly; visualTweaks?: CollapsiblePickerVisualTweaks; /** @deprecated wheelMode is no longer supported - wheel scrolling is always enabled */ wheelMode?: 'off' | 'natural' | 'inverted'; } /** * Configuration for haptic and audio feedback systems. * * Controls vibration patterns and audio click sounds for picker interactions. */ interface QuickPickerFeedbackConfig { /** Enable haptic vibration feedback (mobile only) */ enableHaptics?: boolean; /** Enable audio click sounds */ enableAudioFeedback?: boolean; /** Haptic vibration configuration */ haptics?: HapticAdapterOptions; /** Audio feedback configuration */ audio?: AudioAdapterOptions; /** Custom feedback adapters (advanced) */ adapters?: Partial; } /** * Advanced visual tweaks for picker animations and transitions. * * Fine-tune timing, scaling, and easing functions for item animations. * Most users should rely on defaults. */ interface CollapsiblePickerVisualTweaks { /** Scale multiplier for active/selected item (default: 1.0) */ activeScale?: number; /** Scale multiplier for deselecting item (default: 0.8) */ deselectScale?: number; /** General transition duration in milliseconds */ transitionMs?: number; /** Color transition duration in milliseconds */ colorTransitionMs?: number; /** Scale transition duration in milliseconds */ scaleTransitionMs?: number; /** Easing function for color transitions (CSS easing) */ colorEasing?: string; /** Easing function for scale transitions (CSS easing) */ scaleEasing?: string; /** Deselect fade animation duration in milliseconds */ deselectFadeMs?: number; /** Final opacity for deselected items (0-1) */ deselectOpacity?: number; /** Overshoot distance for trailing items (pixels) */ trailOvershoot?: number; /** Padding around highlight area (pixels) */ highlightPadding?: number; } declare const CollapsiblePickerMemoized: React.NamedExoticComponent; /** * Themed CollapsiblePicker with consistent styling * * Uses app-wide defaults for theme and timing while allowing per-component overrides. * This is the recommended component for most use cases. * * @example * ```tsx * * ``` */ declare const ThemedNumberInput: React.FC; export { CollapsiblePickerMemoized as C, type QuickPickerFeedbackConfig as Q, type RenderValueFn as R, ThemedNumberInput as T, type CollapsiblePickerTheme as a, type CollapsiblePickerRenderValueContext as b, type CollapsiblePickerRenderItemState as c, type RenderItemFn as d, type CollapsiblePickerProps as e, type CollapsiblePickerVisualTweaks as f };