@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';