@askrjs/themes/toggle

PressEventtype

PressEvent: {
  preventDefault?: () => void;
  stopPropagation?: () => void;
  defaultPrevented?: boolean;
}

Press event passed to onPress handler Compatible with the pressable foundation's PressEvent type.

Toggletype

Toggle: { (props: ToggleButtonProps): JSX.Element; (props: ToggleAsChildProps): JSX.Element; }

Headless Toggle component ## Responsibilities - Compose pressable foundation for interaction behavior - Apply aria-pressed for toggle state signaling - Enforce type="button" default to prevent accidental form submission - Forward props and refs to native button or child element ## Non-Responsibilities (delegated to pressable foundation) - Keyboard event handling (Enter/Space) - Pointer event handling - Disabled state enforcement - Role attribute application (for non-native elements) ## Invariants - MUST NOT contain any event handler logic - MUST NOT check disabled or pressed props directly - MUST use pressable() for ALL interaction behavior - MUST use mergeProps() for ALL prop composition - pressed state is CONTROLLED (consumer manages state) Renders the toggle part of toggle. Supports polymorphic rendering via asChild.

Native toggle button
```tsx
const pressed = state(false);
<Toggle pressed={pressed()} onPress={() => pressed.set(!pressed())}>
Mute
</Toggle>
```

Polymorphic rendering (asChild)
```tsx
<Toggle asChild pressed={muted} onPress={toggleMute}>
<span>🔇</span>
</Toggle>
```

ToggleAsChildPropstype

ToggleAsChildProps: ToggleOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<Element>;
  type?: never;
}

Props when rendering via asChild

asChild

asChild: true;

children

children: JSXElement;

disabled

disabled?: boolean | undefined;

onPress

onPress?: ((e: PressEvent) => void) | undefined;

pressed

pressed?: boolean | undefined;

ref

ref?: Ref<Element>;

type

type?: undefined;

ToggleButtonPropstype

ToggleButtonProps: Omit<JSX.IntrinsicElements['button'], 'children' | 'onClick' | 'disabled' | 'type' | 'ref'> & ToggleOwnProps & {
  asChild?: false;
  ref?: Ref<HTMLButtonElement>;
  type?: 'button' | 'submit' | 'reset';
}

Props when rendering as a native <button> element

asChild

asChild?: false | undefined;

children

children?: unknown;

disabled

disabled?: boolean | undefined;

onPress

onPress?: ((e: PressEvent) => void) | undefined;

pressed

pressed?: boolean | undefined;

ref

ref?: Ref<HTMLButtonElement>;

type

type?: "button" | "submit" | "reset" | undefined;

ToggleOwnPropstype

ToggleOwnProps: {
  children?: unknown;
  onPress?: (e: PressEvent) => void;
  pressed?: boolean;
  disabled?: boolean;
}

Props shared by all Toggle variants

children

children?: unknown;

disabled

disabled?: boolean | undefined;

onPress

onPress?: ((e: PressEvent) => void) | undefined;

pressed

pressed?: boolean | undefined;

TogglePropstype

ToggleProps: ToggleButtonProps | ToggleAsChildProps

Discriminated union of Toggle prop types

asChild

asChild?: boolean | undefined;

children

children?: unknown;

disabled

disabled?: boolean | undefined;

onPress

onPress?: ((e: PressEvent) => void) | undefined;

pressed

pressed?: boolean | undefined;

ref

ref?: ((value: Element | null) => void) | { current: Element | null; } | ((value: HTMLButtonElement | null) => void) | { current: HTMLButtonElement | null; } | null | undefined;

type

type?: "button" | "submit" | "reset" | undefined;