goobs-frontend
Version:
A comprehensive React-based libary for building modern web applications
106 lines • 4.32 kB
TypeScript
import { default as React, InputHTMLAttributes } from 'react';
/**
* Comprehensive styling options. Theme selects the palette (data-theme);
* every other field is an optional caller override forwarded to CSS as a
* custom property (consumed via `var(--cb-foo, <theme default>)`).
*/
export interface CheckboxStyles {
/** Theme variant: 'light' (default), 'dark', or 'sacred'. */
theme?: 'light' | 'dark' | 'sacred';
/** Box width. */
width?: string;
/** Box height. */
height?: string;
/** Box border color. */
borderColor?: string;
/** Box border radius. */
borderRadius?: string;
/** Box border width. */
borderWidth?: string;
/** Box background color. */
backgroundColor?: string;
/** Box backdrop-filter. */
backdropFilter?: string;
/** Box box-shadow. */
boxShadow?: string;
/** Box background-image. */
backgroundImage?: string;
/** Box background on hover. */
hoverBackgroundColor?: string;
/** Box border color on hover. */
hoverBorderColor?: string;
/** Box shadow on hover. */
hoverBoxShadow?: string;
/** Box transform on hover. */
hoverTransform?: string;
/** Box background-image on hover. */
hoverBackgroundImage?: string;
/** Box background when checked/indeterminate. */
checkedBackgroundColor?: string;
/** Box border color when checked/indeterminate. */
checkedBorderColor?: string;
/** Box shadow when checked/indeterminate. */
checkedBoxShadow?: string;
/** Box background-image when checked/indeterminate. */
checkedBackgroundImage?: string;
/** Checkmark/indeterminate icon color. */
iconColor?: string;
/** Box background when disabled. */
disabledBackgroundColor?: string;
/** Box border color when disabled. */
disabledBorderColor?: string;
/** Box shadow when disabled. */
disabledBoxShadow?: string;
/** Box transform when disabled. */
disabledTransform?: string;
/** Wrapper margin shorthand. */
margin?: string;
/** Wrapper top margin. */
marginTop?: string;
/** Wrapper bottom margin. */
marginBottom?: string;
/** Wrapper left margin. */
marginLeft?: string;
/** Wrapper right margin. */
marginRight?: string;
/** Replaces the wrapper transition with `all <duration> <easing>`. */
transitionDuration?: string;
/** Easing used with transitionDuration (default cubic-bezier(0.4, 0, 0.2, 1)); ignored without it. */
transitionEasing?: string;
/** Disables the input (also settable via the native `disabled` prop). */
disabled?: boolean;
/** Set false to drop the outline/premium-accent treatment (default true). */
outline?: boolean;
}
export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'value' | 'defaultValue' | 'onChange' | 'onFocus' | 'onBlur'> {
/** Whether the checkbox is checked */
checked?: boolean;
/** Default checked state for uncontrolled mode */
defaultChecked?: boolean;
/** Callback when checkbox state changes */
onChange?: (checked: boolean) => void;
/** Callback when checkbox is focused */
onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
/** Callback when checkbox loses focus */
onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
/** Whether the checkbox is in indeterminate state */
indeterminate?: boolean;
/**
* Stable test selector. Emitted as `data-field-name` on the root wrapper —
* falls back to the input `name` when not provided. Lets Playwright
* `[data-field-name="…"]` locators target the whole control, not just the
* hidden input.
*/
dataFieldName?: string;
/** Comprehensive styling options including theme, custom colors, and layout properties. */
styles?: CheckboxStyles;
}
/**
* Themeable checkbox supporting controlled or uncontrolled state, an
* indeterminate state, and an optional inline label, with light/dark/sacred
* themes. Auto-binds its boolean value by `name` inside a goobs `<Form>` and
* forwards its ref to the underlying input.
*/
declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
export default Checkbox;
//# sourceMappingURL=index.d.ts.map