/** * Motion (animation) design tokens for BeatUI. * * Defines animation duration and easing curve values that are exposed as CSS * custom properties. Includes both primitive duration/easing tokens and semantic * motion roles for transitions and animations throughout the UI. * * @module */ /** * The base motion duration used as the foundation for the duration scale. * * @default '200ms' */ export declare const baseMotionDuration = "200ms"; /** * Motion duration scale mapping names to CSS time values. * All values (except `instant`) are derived from `--motion-duration-base` * via `calc()`, allowing the entire timing scale to be adjusted by changing * a single variable. * * | Name | Multiplier | Default | * |---------|------------|---------| * | instant | — | 0s | * | fast | 0.6 | 120ms | * | base | 1 | 200ms | * | slow | 1.6 | 320ms | * | relaxed | 2.4 | 480ms | */ export declare const motionDurations: { readonly instant: "0s"; readonly fast: "calc(var(--motion-duration-base) * 0.6)"; readonly base: "200ms"; readonly slow: "calc(var(--motion-duration-base) * 1.6)"; readonly relaxed: "calc(var(--motion-duration-base) * 2.4)"; }; /** * Motion easing curve definitions mapping names to CSS `cubic-bezier()` values. * * | Name | Curve | Use case | * |------------|--------------------------------|-------------------------| * | standard | cubic-bezier(0.2, 0, 0, 1) | General transitions | * | emphasized | cubic-bezier(0.33, 1, 0.68, 1) | Attention-drawing motion | * | entrance | cubic-bezier(0, 0, 0.2, 1) | Elements appearing | * | exit | cubic-bezier(0.8, 0, 0.6, 1) | Elements disappearing | */ export declare const motionEasings: { readonly standard: "cubic-bezier(0.2, 0, 0, 1)"; readonly emphasized: "cubic-bezier(0.33, 1, 0.68, 1)"; readonly entrance: "cubic-bezier(0, 0, 0.2, 1)"; readonly exit: "cubic-bezier(0.8, 0, 0.6, 1)"; }; /** * Union type of all available motion duration names. */ export type MotionDurationName = keyof typeof motionDurations; /** * Union type of all available motion easing names. */ export type MotionEasingName = keyof typeof motionEasings; /** * Returns the CSS custom property name for a motion duration. * * @param name - The motion duration name * @returns The CSS variable name (e.g., `'--motion-duration-fast'`) * * @example * ```ts * getMotionDurationVarName('fast') // '--motion-duration-fast' * ``` */ export declare function getMotionDurationVarName(name: MotionDurationName): string; /** * Returns a CSS `var()` expression referencing the motion duration custom property. * * @param name - The motion duration name * @returns A CSS `var()` string (e.g., `'var(--motion-duration-fast)'`) */ export declare function getMotionDurationVar(name: MotionDurationName): string; /** * Returns the CSS custom property name for the base motion duration. * * @returns The CSS variable name `'--motion-duration-base'` */ export declare function getBaseMotionDurationVarName(): string; /** * Returns a CSS `var()` expression referencing the base motion duration custom property. * * @returns A CSS `var()` string `'var(--motion-duration-base)'` */ export declare function getBaseMotionDurationVar(): string; /** * Returns the CSS custom property name for a motion easing curve. * * @param name - The motion easing name * @returns The CSS variable name (e.g., `'--motion-easing-standard'`) * * @example * ```ts * getMotionEasingVarName('standard') // '--motion-easing-standard' * ``` */ export declare function getMotionEasingVarName(name: MotionEasingName): string; /** * Returns a CSS `var()` expression referencing the motion easing custom property. * * @param name - The motion easing name * @returns A CSS `var()` string (e.g., `'var(--motion-easing-standard)'`) */ export declare function getMotionEasingVar(name: MotionEasingName): string; /** * Generates CSS custom property declarations for all motion tokens, * including both durations and easing curves. * * @returns A record mapping CSS variable names to their values * * @example * ```ts * const vars = generateMotionVariables() * // vars['--motion-duration-base'] === '200ms' * // vars['--motion-duration-fast'] === 'calc(var(--motion-duration-base) * 0.6)' * // vars['--motion-easing-standard'] === 'cubic-bezier(0.2, 0, 0, 1)' * ``` */ export declare function generateMotionVariables(): Record; /** * Tuple of all semantic motion role names, covering both transition * durations and easing curves. */ export declare const semanticMotionNames: readonly ["transition-fast", "transition-medium", "transition-slow", "transition-overlay", "transition-emphasis", "easing-standard", "easing-emphasis", "easing-entrance", "easing-exit"]; /** * Union type of all semantic motion role names. */ export type SemanticMotionName = (typeof semanticMotionNames)[number]; /** * Partial record for overriding default semantic motion assignments. */ export type SemanticMotionOverrides = Partial>; /** * Returns the CSS custom property name for a semantic motion role. * * @param name - The semantic motion name * @returns The CSS variable name (e.g., `'--motion-transition-fast'`) * * @example * ```ts * getSemanticMotionVarName('transition-fast') // '--motion-transition-fast' * ``` */ export declare function getSemanticMotionVarName(name: SemanticMotionName): string; /** * Generates CSS custom property declarations for semantic motion tokens, * merging defaults with any provided overrides. * * @param overrides - Optional overrides for semantic motion values * @returns A record mapping CSS variable names to their values * * @example * ```ts * const vars = generateSemanticMotionVariables({ 'transition-fast': '80ms' }) * // vars['--motion-transition-fast'] === '80ms' * ``` */ export declare function generateSemanticMotionVariables(overrides?: SemanticMotionOverrides): Record;