/** * Box shadow design tokens for BeatUI. * * Defines a scale of box-shadow values from subtle to dramatic, including both * bottom-facing and top-facing shadow variants. Also includes semantic shadow * roles for common UI surfaces. * * @module */ /** * Box shadow scale definitions mapping size names to CSS `box-shadow` values. * Includes standard (bottom-facing) and `top-*` (top-facing) variants. * * Standard shadows project downward; `top-*` shadows project upward * and are useful for bottom-anchored elements like bottom sheets. */ export declare const shadows: { readonly none: "none"; readonly '2xs': "0 1px rgb(0 0 0 / 0.05)"; readonly xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)"; readonly sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"; readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"; readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"; readonly xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"; readonly '2xl': "0 25px 50px -12px rgb(0 0 0 / 0.25)"; readonly 'top-2xs': "0 -1px rgb(0 0 0 / 0.05)"; readonly 'top-xs': "0 -1px 2px 0 rgb(0 0 0 / 0.05)"; readonly 'top-sm': "0 -1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"; readonly 'top-md': "0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"; readonly 'top-lg': "0 -10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"; readonly 'top-xl': "0 -20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"; readonly 'top-2xl': "0 -25px 50px -12px rgb(0 0 0 / 0.25)"; }; /** * Union type of all available shadow size names. */ export type ShadowSize = keyof typeof shadows; /** * Returns the CSS custom property name for a shadow size. * * @param size - The shadow size name * @returns The CSS variable name (e.g., `'--shadow-md'`) * * @example * ```ts * getShadowVarName('md') // '--shadow-md' * ``` */ export declare function getShadowVarName(size: ShadowSize): string; /** * Returns a CSS `var()` expression referencing the shadow custom property. * * @param size - The shadow size name * @returns A CSS `var()` string (e.g., `'var(--shadow-md)'`) * * @example * ```ts * getShadowVar('md') // 'var(--shadow-md)' * ``` */ export declare function getShadowVar(size: ShadowSize): string; /** * Generates CSS custom property declarations for all shadow tokens. * * @returns A record mapping CSS variable names to their shadow values * * @example * ```ts * const vars = generateShadowVariables() * // vars['--shadow-md'] === '0 4px 6px -1px rgb(0 0 0 / 0.1), ...' * ``` */ export declare function generateShadowVariables(): Record; /** * Tuple of all semantic shadow role names. */ export declare const semanticShadowNames: readonly ["surface", "surface-elevated", "popover", "overlay", "button"]; /** * Union type of all semantic shadow role names. */ export type SemanticShadowName = (typeof semanticShadowNames)[number]; /** * Partial record for overriding default semantic shadow assignments. */ export type SemanticShadowOverrides = Partial>; /** * Returns the CSS custom property name for a semantic shadow role. * * @param name - The semantic shadow name * @returns The CSS variable name (e.g., `'--shadow-popover'`) * * @example * ```ts * getSemanticShadowVarName('popover') // '--shadow-popover' * ``` */ export declare function getSemanticShadowVarName(name: SemanticShadowName): string; /** * Generates CSS custom property declarations for semantic shadow tokens, * merging defaults with any provided overrides. * * @param overrides - Optional overrides for semantic shadow values * @returns A record mapping CSS variable names to their values * * @example * ```ts * const vars = generateSemanticShadowVariables({ popover: 'var(--shadow-xl)' }) * // vars['--shadow-popover'] === 'var(--shadow-xl)' * ``` */ export declare function generateSemanticShadowVariables(overrides?: SemanticShadowOverrides): Record;