import type { Attribute, Html, HtmlBuilder } from 'foldkit/html';
/** Attribute groups the switch provides to the consumer's `toView` callback.
* Each group is a `ReadonlyArray>` the consumer
* spreads into its own element attribute arrays. The `button` and `label`
* bundles carry the click and Space handlers that dispatch the configured
* `onToggle` Message.
*
* The `button` bundle sets `type="button"` so that rendering the switch as a
* `button` element inside a `form` element toggles without also submitting the
* form. Setting it is harmless on the other elements a switch might use, such
* as a `div` or a `span`, because the builder assigns a DOM property rather
* than an HTML attribute. Spread a later `h.Type` to override it. */
export type SwitchAttributes = Readonly<{
button: ReadonlyArray>;
label: ReadonlyArray>;
description: ReadonlyArray>;
hiddenInput: ReadonlyArray>;
}>;
/** Per-render view configuration for the stateless controlled {@link view}.
* Generic over `Message` (the message `onToggle` dispatches).
*
* - `isChecked`: the current checked state, read straight from the parent
* Model. `aria-checked` and the `data-checked` marker derive from it.
* - `onToggle`: dispatched with the new checked state when the user clicks
* the switch or its label, or presses Space. Handle it in the parent's
* `update` by storing the value.
* - `toView`: receives the {@link SwitchAttributes} and lays out the
* switch.
* - `isDisabled`: marks the switch unavailable with `aria-disabled="true"`
* and `data-disabled`, keeping it focusable. Use it when the control does
* not apply; use `isReadOnly` when its state is still information the user
* needs.
* - `isReadOnly`: prevents toggling while exposing read-only semantics with
* `aria-readonly="true"` and `data-readonly`. The switch remains
* focusable. Independent of `isDisabled`: setting both emits both
* attribute sets, and either one removes the interaction handlers. */
export type ViewConfig = Readonly<{
id: string;
isChecked: boolean;
onToggle: (isChecked: boolean) => Message;
toView: (attributes: SwitchAttributes) => Html;
isDisabled?: boolean;
isReadOnly?: boolean;
name?: string;
value?: string;
}>;
/** Returns the label element id, derived from the switch's base id. */
export declare const labelId: (id: string) => string;
/** Returns the description element id, derived from the switch's base id. */
export declare const descriptionId: (id: string) => string;
/** Renders an accessible switch as a stateless controlled component. The
* parent owns the checked state (`isChecked`) and receives the new state via
* `onToggle` when the user toggles it.
*
* ```ts
* // In view:
* Switch.view(
* {
* id: 'notifications',
* isChecked: model.notificationsEnabled,
* onToggle: isChecked => ToggledNotifications({ isChecked }),
* toView: attributes => ...,
* },
* h,
* )
*
* // In update:
* ToggledNotifications: ({ isChecked }) => ({
* model: evo(model, { notificationsEnabled: () => isChecked }),
* }),
* ``` */
export declare const view: (config: ViewConfig, h: HtmlBuilder) => Html;
//# sourceMappingURL=index.d.ts.map