import * as React from 'react'; import * as CheckControlBase from '@tesseract-design/web-base-checkcontrol'; export type ToggleSwitchProps = Omit, 'size' | 'type' | 'style'> & { /** * Label of the component when in the unchecked state. */ uncheckedLabel?: React.ReactNode, /** * Label of the component when in the checked state. */ checkedLabel?: React.ReactNode, /** * Should the component occupy the whole width of its parent? */ block?: boolean, /** * Does the component need to conserve space? */ compact?: boolean, /** * Complementary content of the component. */ subtext?: React.ReactNode, } /** * Component for performing an action upon activation (e.g. when clicked). * * This component functions as a regular button. */ export const ToggleSwitch = React.forwardRef( ( { checkedLabel, uncheckedLabel, block = false, compact = false, subtext, className: _className, as: _as, children: _children, ...etcProps }: ToggleSwitchProps, ref, ) => { const styleProps = React.useMemo(() => ({ block, compact, menuItem: false, appearance: CheckControlBase.CheckControlAppearance.SWITCH, type: CheckControlBase.CheckControlType.CHECKBOX, uncheckedLabel: Boolean(uncheckedLabel), }), [block, compact, uncheckedLabel]); return (
); }, ); ToggleSwitch.displayName = 'ActionButton';