import { CSSProperties, ReactNode, Ref } from 'react'; import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js'; import { TiltAxisLock } from './tiltMath.js'; export type TiltTrackingMode = 'self' | 'group'; export type TiltSlots = 'root' | 'perspective' | 'surface'; export interface TiltHandle { /** Directly drives the tilt rotation, clamped to `maxTilt`/`maxTiltX`/`maxTiltY`. For custom choreography (e.g. shuffling). */ setTilt: (rotateX: number, rotateY: number) => void; /** Returns to flat. */ reset: () => void; } export interface TiltProps extends HtmlProps { children?: ReactNode; /** Shared clamp for both tilt axes, in degrees. @default 15 */ maxTilt?: number; /** Overrides `maxTilt` for the X axis (tilts top/bottom edges, driven by vertical cursor position). */ maxTiltX?: number; /** Overrides `maxTilt` for the Y axis (tilts left/right edges, driven by horizontal cursor position). */ maxTiltY?: number; /** CSS `perspective` in px, applied to the perspective wrapper. @default 800 */ perspective?: number; /** Easing curve applied to the normalized cursor offset (range roughly [-1, 1]) before scaling by `maxTilt`. @default defaultTiltEasing */ easing?: (t: number) => number; /** Disables tilt on one axis entirely. @default 'none' */ lockAxis?: TiltAxisLock; /** Cosmetic `scale()` applied together with the tilt while tracking. @default 1 */ scaleOnHover?: number; /** `'self'` tracks the pointer over this element's own bounding box; `'group'` reads a shared pointer position from an ancestor `TiltGroup`, falling back to `'self'` if none exists. @default 'self' */ trackingMode?: TiltTrackingMode; /** Disables tilt tracking entirely. @default false */ disabled?: boolean; /** Fires on every applied tilt update. */ onTiltChange?: (rotateX: number, rotateY: number) => void; /** Imperative handle for driving the tilt directly. */ ref?: Ref; className?: string; style?: CSSProperties; classNames?: SlotClassNames; styles?: SlotStyles; }