@codecademy/gamut
73.6.173.6.2-alpha.3e37cd.0
dist/Toggle/types.d.ts~
dist/Toggle/types.d.tsModified+10
Index: package/dist/Toggle/types.d.ts
===================================================================
--- package/dist/Toggle/types.d.ts
+++ package/dist/Toggle/types.d.ts
@@ -1,7 +1,10 @@
+import { ComponentPropsWithoutRef } from 'react';
import * as React from 'react';
+import { DataAttributes } from '../utils';
import { sizes, ToggleInput, ToggleStyleProps } from './elements';
export type ToggleSizes = keyof typeof sizes;
+export type ToggleInputSlotProps = ComponentPropsWithoutRef<'input'> & DataAttributes;
export interface ToggleBaseProps extends ToggleStyleProps {
/** If the Toggle element should be a button or an input. Buttons should be used if the toggle immediately kicks off an action, input should be used if the button exists within a form or if a seperate user interaction submits the data of the toggle */
as?: 'button' | 'input';
/** The state of the checkbox input (this can be out of sync with the input's value if not passed) */
@@ -13,8 +16,15 @@
/** Called on click. Only to be used when the Toggle is a button */
onClick?: (event?: React.MouseEvent<MouseEvent>) => void;
/** Called when the input value has changed. Only to be used when the Toggle is an input */
onChange?: (event?: React.FormEvent<HTMLInputElement>) => void;
+ /**
+ * Props to forward to the interactive element - the hidden `<input>` when
+ * `as="input"` (the default), or the `<button>` when `as="button"`. Unlike
+ * `...rest`, which lands on the visible `<label>`, this is the slot for
+ * `data-*`/`aria-*` attributes meant for the interactive element itself.
+ */
+ inputProps?: ToggleInputSlotProps;
/** A visible label for your Toggle - we reccommend this */
label?: React.ReactNode;
/** Which side of the toggle the label should render */
labelSide?: 'left' | 'right';