goobs-frontend/dist/components/Toolbar/index.d.ts

A comprehensive React-based libary for building modern web applications

import { FC } from 'react';
import { ButtonProps } from '../Button';
import { SearchbarProps } from '../Field/Search';
import { DropdownOption } from '../Field/Dropdown/Regular';
/**
 * Public styling surface for the Toolbar. Migrated off
 * `theme/toolbar.ts:ToolbarStyles` — the theme variant (light / dark /
 * sacred) drives a `data-theme` attribute on the root and all
 * container / glyph / divider styling lives in `Toolbar.module.css`.
 *
 * The interface is intentionally minimal: it holds exactly the knobs the
 * component honors. `theme` selects the variant; `glyphColor` and
 * `backgroundImage` override the matching `--toolbar-*` custom properties
 * the CSS module already consumes.
 */
export interface ToolbarStyles {
    /** Theme variant; selects the `data-theme` styling block. Default 'light'. */
    theme?: 'light' | 'dark' | 'sacred';
    /**
     * Overrides `--toolbar-glyph-color` — the color of the decorative 𓊗 glyph.
     * Observable only on the sacred theme (the glyph renders only there).
     */
    glyphColor?: string;
    /**
     * Overrides `--toolbar-bg-image` — the root container's background-image
     * (per-theme default: sacred dual radial-gradient, light/dark none).
     */
    backgroundImage?: string;
}
export interface CustomToolbarProps {
    /**
     * Action buttons rendered left-to-right after the divider. Only each
     * entry's `text`, `onClick`, and `disabled` are forwarded to the underlying
     * Button; when `styles.theme` is set it is passed as the button theme too.
     */
    buttons?: ButtonProps[];
    /**
     * When provided, renders a Searchbar at the end of the toolbar. Its
     * `value`/`onChange`/`label`/`placeholder` are forwarded; the field is
     * restyled with a fixed per-theme palette matching the toolbar theme
     * (caller `styles` on this prop are not forwarded).
     */
    searchbarProps?: SearchbarProps;
    /** When provided, renders a controlled filter Dropdown themed to match the toolbar. */
    filterDropdown?: {
        /** Dropdown field label. Default 'Filter'. */
        label?: string;
        /** Selectable filter options. */
        options: DropdownOption[];
        /** Controlled selected value. */
        value: string;
        /** Called with the newly selected value. */
        onChange: (value: string) => void;
    };
    /** Theme plus glyph/background overrides. See ToolbarStyles. */
    styles?: ToolbarStyles;
}
/**
 * Horizontal action bar composing optional action Buttons, a controlled
 * filter Dropdown, and a Searchbar — each section rendering only when its
 * prop is provided. Themed light (default) / dark / sacred via `data-theme`
 * on the root; the sacred variant adds a decorative glyph. The toolbar theme
 * propagates to every child it renders, including a fixed per-theme field
 * palette for the searchbar.
 */
declare const CustomToolbar: FC<CustomToolbarProps>;
export default CustomToolbar;
//# sourceMappingURL=index.d.ts.map