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

A comprehensive React-based libary for building modern web applications

import { default as React, ReactNode } from 'react';
export type ToggleButtonTheme = 'light' | 'dark' | 'sacred';
export interface ToggleButtonStyles {
    /** Theme selection. Default `'light'` (matches the pre-migration default). */
    theme?: ToggleButtonTheme;
    /** Button margin shorthand. */
    margin?: string;
    /** Button top margin. */
    marginTop?: string;
    /** Button bottom margin. */
    marginBottom?: string;
    /** Button left margin. */
    marginLeft?: string;
    /** Button right margin. */
    marginRight?: string;
    /** Button width. */
    width?: string;
    /** Button max-width. */
    maxWidth?: string;
    /** Button min-width. */
    minWidth?: string;
    /** Button height. */
    height?: string;
    /** Button max-height. */
    maxHeight?: string;
}
export interface ToggleButtonProps {
    value: string;
    children: ReactNode;
    selected?: boolean;
    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
    disabled?: boolean;
    size?: 'small' | 'medium' | 'large';
    styles?: ToggleButtonStyles;
    isFirst?: boolean;
    isLast?: boolean;
    'aria-label'?: string;
}
export interface ToggleButtonGroupProps {
    /**
     * Currently-selected button value. Optional so the group can be driven by a
     * surrounding `<Form>` (Tier-1 binding) when a `name` is supplied and no
     * explicit `value` is passed. When provided (including `null` for "no
     * selection") the group is caller-controlled — the byte-for-byte back-compat
     * path for the existing callsites.
     */
    value?: string | null;
    exclusive?: boolean;
    onChange: (event: React.MouseEvent<HTMLElement>, newValue: string | null) => void;
    children: React.ReactNode;
    size?: 'small' | 'medium' | 'large';
    styles?: ToggleButtonStyles;
    /**
     * Form-engine binding key. Inside a `<Form>` with `name` set and no explicit
     * `value`, the selected value is owned by the form engine.
     */
    name?: string;
    /**
     * Stable test selector. Emitted as `data-field-name` on the group root —
     * falls back to `name` when not provided.
     */
    dataFieldName?: string;
}
/**
 * A single toggleable button with selected/disabled states, small/medium/large
 * sizing, and light/dark/sacred theming. Designed to be grouped by the exported
 * `ToggleButtonGroup`, which manages exclusive selection and auto-binds the
 * chosen value by `name` inside a goobs `<Form>`.
 */
export declare const ToggleButton: React.FC<ToggleButtonProps>;
export declare const ToggleButtonGroup: React.FC<ToggleButtonGroupProps>;
export default ToggleButton;
//# sourceMappingURL=index.d.ts.map