baseui 16.0.0 → 16.1.0

package/checkbox-v2/styled-components.js

@@ -0,0 +1,263 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Root = exports.Label = exports.Input = exports.CheckmarkContainer = exports.Checkmark = void 0;
+var _styles = require("../styles");
+var _constants = require("./constants");
+var _getSharedStyles = require("../utils/get-shared-styles");
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+
+function getBorderColor(props) {
+  const {
+    $disabled,
+    $checked,
+    $error,
+    $isIndeterminate,
+    $theme,
+    $isFocusVisible
+  } = props;
+  const {
+    colors
+  } = $theme;
+  if ($disabled) {
+    return colors.contentStateDisabled;
+  }
+  if ($checked || $isIndeterminate) {
+    return 'transparent';
+  }
+  if ($error) {
+    return colors.tagRedContentSecondary;
+  }
+  if ($isFocusVisible) {
+    return colors.borderSelected;
+  }
+  return colors.contentTertiary;
+}
+function getLabelPadding(props) {
+  const {
+    $labelPlacement = '',
+    $theme
+  } = props;
+  const {
+    sizing
+  } = $theme;
+  const {
+    scale100
+  } = sizing;
+  let paddingDirection;
+  switch ($labelPlacement) {
+    case _constants.LABEL_PLACEMENT.left:
+      paddingDirection = 'Right';
+      break;
+    default:
+    case _constants.LABEL_PLACEMENT.right:
+      paddingDirection = 'Left';
+      break;
+  }
+  if ($theme.direction === 'rtl' && paddingDirection === 'Left') {
+    paddingDirection = 'Right';
+  } else if ($theme.direction === 'rtl' && paddingDirection === 'Right') {
+    paddingDirection = 'Left';
+  }
+  return {
+    [`padding${paddingDirection}`]: scale100
+  };
+}
+function getBackgroundColor(props) {
+  const {
+    $disabled,
+    $checked,
+    $isIndeterminate,
+    $error,
+    $isHovered,
+    $isActive,
+    $theme
+  } = props;
+  const {
+    colors
+  } = $theme;
+  if ($disabled) {
+    return $checked || $isIndeterminate ? colors.contentStateDisabled : 'transparent';
+  }
+  if ($checked || $isIndeterminate) {
+    return $error ? colors.tagRedContentSecondary : colors.contentPrimary;
+  }
+  if ($isHovered) {
+    return $error ? colors.hoverNegativeAlpha : colors.hoverOverlayAlpha;
+  }
+  if ($isActive) {
+    return $error ? colors.pressedNegativeAlpha : colors.pressedOverlayAlpha;
+  }
+  return 'transparent';
+}
+function getLabelColor(props) {
+  const {
+    $disabled,
+    $theme
+  } = props;
+  const {
+    colors
+  } = $theme;
+  return $disabled ? colors.contentStateDisabled : colors.contentPrimary;
+}
+const Root = exports.Root = (0, _styles.styled)('label', props => {
+  const {
+    $disabled,
+    $theme
+  } = props;
+  const {
+    sizing
+  } = $theme;
+  return {
+    flexDirection: 'row',
+    display: 'inline-flex',
+    verticalAlign: 'middle',
+    alignItems: 'flex-start',
+    cursor: $disabled ? 'not-allowed' : 'pointer',
+    userSelect: 'none',
+    '@media (pointer: coarse)': {
+      // Increase target size for touch devices to meet the minimum touch target size of 48x48dp
+      padding: sizing.scale300
+    }
+  };
+});
+Root.displayName = "Root";
+Root.displayName = 'Root';
+
+// Styled checkmark container as the state layer, backplate container
+const CheckmarkContainer = exports.CheckmarkContainer = (0, _styles.styled)('span', props => {
+  const {
+    $theme
+  } = props;
+  const {
+    sizing
+  } = $theme;
+  const {
+    hoveredColor,
+    pressedColor
+  } = (0, _getSharedStyles.getOverlayColor)(props);
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxSizing: 'border-box',
+    minHeight: sizing.scale900,
+    minWidth: sizing.scale900,
+    borderRadius: sizing.scale300,
+    paddingTop: sizing.scale300,
+    paddingBottom: sizing.scale300,
+    paddingLeft: sizing.scale300,
+    paddingRight: sizing.scale300,
+    '@media (hover: hover)': {
+      ':hover': {
+        backgroundColor: hoveredColor
+      }
+    },
+    ':active': {
+      backgroundColor: pressedColor
+    }
+  };
+});
+
+// @ts-ignore
+CheckmarkContainer.displayName = "CheckmarkContainer";
+const Checkmark = exports.Checkmark = (0, _styles.styled)('span', props => {
+  const {
+    $checked,
+    $isIndeterminate,
+    $theme,
+    $isFocusVisible,
+    $isFocused
+  } = props;
+  const {
+    sizing,
+    animation
+  } = $theme;
+  const tickColor = $theme.colors.contentInversePrimary;
+  const indeterminate = encodeURIComponent(`
+    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M18 10.5H6v3h12v-3Z" fill="${tickColor}"/>
+    </svg>
+  `);
+  const check = encodeURIComponent(`
+    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="m10 17.34-4.56-4.56 2.12-2.12L10 13.1l6.44-6.44 2.12 2.12L10 17.34Z" fill="${tickColor}"/>
+    </svg>
+  `);
+  const borderRadius = sizing.scale100;
+  const borderColor = getBorderColor(props);
+  return {
+    flex: '0 0 auto',
+    transitionDuration: animation.timing200,
+    transitionTimingFunction: animation.easeOutCurve,
+    transitionProperty: 'background-image, border-color, background-color',
+    width: '17px',
+    height: '17px',
+    boxSizing: 'border-box',
+    borderLeftStyle: 'solid',
+    borderRightStyle: 'solid',
+    borderTopStyle: 'solid',
+    borderBottomStyle: 'solid',
+    borderLeftWidth: sizing.scale0,
+    borderRightWidth: sizing.scale0,
+    borderTopWidth: sizing.scale0,
+    borderBottomWidth: sizing.scale0,
+    borderLeftColor: borderColor,
+    borderRightColor: borderColor,
+    borderTopColor: borderColor,
+    borderBottomColor: borderColor,
+    borderTopLeftRadius: borderRadius,
+    borderTopRightRadius: borderRadius,
+    borderBottomRightRadius: borderRadius,
+    borderBottomLeftRadius: borderRadius,
+    // Apply focus outline style if the checkbox is focused and focus is visible（focused by Tab)
+    ...($isFocusVisible && $isFocused ? (0, _getSharedStyles.getFocusOutlineStyle)($theme) : {}),
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    backgroundImage: $isIndeterminate ? `url('data:image/svg+xml,${indeterminate}');` : $checked ? `url('data:image/svg+xml,${check}');` : null,
+    backgroundColor: getBackgroundColor(props),
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center'
+  };
+});
+Checkmark.displayName = "Checkmark";
+Checkmark.displayName = 'Checkmark';
+const Label = exports.Label = (0, _styles.styled)('div', props => {
+  const {
+    $theme
+  } = props;
+  const {
+    typography,
+    sizing
+  } = $theme;
+  return {
+    verticalAlign: 'middle',
+    paddingTop: sizing.scale200,
+    // top padding to make checkbox aligned with first row of the label
+    ...getLabelPadding(props),
+    color: getLabelColor(props),
+    ...typography.ParagraphSmall
+  };
+});
+Label.displayName = "Label";
+Label.displayName = 'Label';
+
+// tricky style for focus event cause display: none doesn't work
+const Input = exports.Input = (0, _styles.styled)('input', {
+  opacity: 0,
+  width: 0,
+  height: 0,
+  overflow: 'hidden',
+  margin: 0,
+  padding: 0,
+  position: 'absolute'
+});
+Input.displayName = "Input";
+Input.displayName = 'Input';

package/checkbox-v2/types.d.ts

@@ -0,0 +1,163 @@
+import type * as React from 'react';
+import type { Override } from '../helpers/overrides';
+export type LabelPlacement = 'left' | 'right';
+export type CheckboxOverrides = {
+    Checkmark?: Override;
+    CheckmarkContainer?: Override;
+    Label?: Override;
+    Root?: Override;
+    Input?: Override;
+};
+export type DefaultProps = {
+    overrides?: any;
+    children?: React.ReactNode;
+    checked: boolean;
+    disabled: boolean;
+    error: boolean;
+    autoFocus: boolean;
+    isIndeterminate: boolean;
+    labelPlacement: LabelPlacement;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onMouseEnter: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onMouseLeave: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onMouseDown: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onMouseUp: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onFocus: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onBlur: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    containsInteractiveElement?: boolean;
+};
+export type CheckboxProps = {
+    /** Id of element which contains a related caption */
+    'aria-describedby'?: string;
+    /** Id of element which contains a related error message */
+    'aria-errormessage'?: string;
+    /** Passed to the input element aria-label attribute. */
+    ariaLabel?: string;
+    'aria-label'?: string;
+    /** Ids of element which this checkbox controls, may be useful when there is a master checkbox controlling multiple child checkboxes - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-controls */
+    'aria-controls'?: string;
+    /** Component or String value for label of checkbox. */
+    children?: React.ReactNode;
+    /** Indicates if this checkbox children contain an interactive element (prevents the label from moving focus from the child element to the radio button) */
+    containsInteractiveElement?: boolean;
+    overrides?: CheckboxOverrides;
+    /** Check or uncheck the control. */
+    checked?: boolean;
+    /** Disable the checkbox from being changed. */
+    disabled?: boolean;
+    /** Marks the checkbox as required. */
+    required?: boolean;
+    /** Renders checkbox in errored state. */
+    error?: boolean;
+    /** Used to get a ref to the input element. Useful for programmatically focusing the input */
+    inputRef?: React.RefObject<HTMLInputElement>;
+    /** Focus the checkbox on initial render. */
+    autoFocus?: boolean;
+    /** Passed to the input element id attribute */
+    id?: string;
+    /** Passed to the input element name attribute */
+    name?: string;
+    /** Passed to the input element value attribute */
+    value?: string;
+    /** Indicates a 'half' state for the checkmark. In this case, `checked` is ignored. */
+    isIndeterminate?: boolean;
+    /** How to position the label relative to the checkbox itself. */
+    labelPlacement?: LabelPlacement;
+    /** Text to display in native OS tooltip on long hover. */
+    title?: string | null;
+    /** Handler for change events on trigger element. */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    /** Handler for mouseenter events on trigger element. */
+    onMouseEnter?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    /** Handler for mouseleave events on trigger element. */
+    onMouseLeave?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    /** Handler for mousedown events on trigger element. */
+    onMouseDown?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    /** Handler for mouseup events on trigger element. */
+    onMouseUp?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    /** handler for focus events on trigger element. */
+    onFocus?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    /** handler for blur events on trigger element. */
+    onBlur?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    /** Handler for keydown events on trigger element. */
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => unknown;
+    /** Handler for keyup events on trigger element. */
+    onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>) => unknown;
+};
+export type CheckboxState = {
+    isFocused: boolean;
+    isFocusVisible: boolean;
+    isHovered: boolean;
+    isActive: boolean;
+};
+export type CheckboxReducerState = {
+    checked?: boolean;
+    isIndeterminate?: boolean;
+};
+export type StateReducer = (stateType: string, nextState: CheckboxReducerState, currentState: CheckboxReducerState, event: React.ChangeEvent<HTMLInputElement>) => CheckboxReducerState;
+export type StatefulContainerChildProps = {
+    overrides?: CheckboxOverrides;
+    /** Handler for change events on trigger element. */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    /** Handler for mouseenter events on trigger element. */
+    onMouseEnter?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    /** Handler for mouseleave events on trigger element. */
+    onMouseLeave?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    /** Handler for mousedown events on trigger element. */
+    onMouseDown?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    /** Handler for mouseup events on trigger element. */
+    onMouseUp?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    /** Handler for focus events on trigger element. */
+    onFocus?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    /** Handler for blur events on trigger element. */
+    onBlur?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    /** Handler for keydown events on trigger element. */
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => unknown;
+    /** Handler for keyup events on trigger element. */
+    onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>) => unknown;
+    /** Focus the checkbox on initial render. */
+    autoFocus?: boolean;
+} & CheckboxReducerState;
+export type StatefulContainerProps = {
+    overrides?: CheckboxOverrides;
+    /** Component or String value for label of checkbox. */
+    children?: (a: StatefulContainerChildProps) => React.ReactNode;
+    /** Defines the components initial state value */
+    initialState?: CheckboxReducerState;
+    /** A state change handler. Used to override default state transitions. */
+    stateReducer?: StateReducer;
+    /** Handler for change events on trigger element. */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    /** Handler for mouseenter events on trigger element. */
+    onMouseEnter?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    /** Handler for mouseleave events on trigger element. */
+    onMouseLeave?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    /** Handler for mousedown events on trigger element. */
+    onMouseDown?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    /** Handler for mouseup events on trigger element. */
+    onMouseUp?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    /** Handler for focus events on trigger element. */
+    onFocus?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    /** Handler for blur events on trigger element. */
+    onBlur?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    /** Handler for keydown events on trigger element. */
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => unknown;
+    /** Handler for keyup events on trigger element. */
+    onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>) => unknown;
+    /** Focus the checkbox on initial render. */
+    autoFocus?: boolean;
+};
+export type StatefulCheckboxProps = Omit<StatefulContainerProps, 'children'> & Omit<CheckboxProps, 'value' | keyof DefaultProps> & Partial<DefaultProps>;
+export type SharedStyleProps = {
+    $isFocused: boolean;
+    $isFocusVisible: boolean;
+    $isHovered: boolean;
+    $isActive: boolean;
+    $error: boolean;
+    $checked: boolean;
+    $isIndeterminate: boolean;
+    $required: boolean;
+    $disabled: boolean;
+    $value: string;
+    $labelPlacement?: LabelPlacement;
+};

package/checkbox-v2/types.js

@@ -0,0 +1 @@
+"use strict";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "16.0.0",
+  "version": "16.1.0",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",

package/switch/constants.d.ts

@@ -0,0 +1,11 @@
+export declare const STATE_TYPE: Readonly<{
+    readonly change: "CHANGE";
+}>;
+export declare const LABEL_PLACEMENT: Readonly<{
+    readonly left: "left";
+    readonly right: "right";
+}>;
+export declare const SIZE: Readonly<{
+    readonly default: "default";
+    readonly small: "small";
+}>;

package/switch/constants.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.STATE_TYPE = exports.SIZE = exports.LABEL_PLACEMENT = void 0;
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+
+const STATE_TYPE = exports.STATE_TYPE = Object.freeze({
+  change: 'CHANGE'
+});
+const LABEL_PLACEMENT = exports.LABEL_PLACEMENT = Object.freeze({
+  left: 'left',
+  right: 'right'
+});
+const SIZE = exports.SIZE = Object.freeze({
+  default: 'default',
+  small: 'small'
+});

package/switch/index.d.ts

@@ -0,0 +1,6 @@
+export { default as StatefulSwitch } from './stateful-switch';
+export { default as StatefulContainer } from './stateful-switch-container';
+export { default as Switch } from './switch';
+export { Root as StyledRoot, Toggle as StyledToggle, ToggleTrack as StyledToggleTrack, Label as StyledLabel, Input as StyledInput, } from './styled-components';
+export { STATE_TYPE, LABEL_PLACEMENT, SIZE } from './constants';
+export * from './types';

package/switch/index.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  StatefulSwitch: true,
+  StatefulContainer: true,
+  Switch: true,
+  StyledRoot: true,
+  StyledToggle: true,
+  StyledToggleTrack: true,
+  StyledLabel: true,
+  StyledInput: true,
+  STATE_TYPE: true,
+  LABEL_PLACEMENT: true,
+  SIZE: true
+};
+Object.defineProperty(exports, "LABEL_PLACEMENT", {
+  enumerable: true,
+  get: function () {
+    return _constants.LABEL_PLACEMENT;
+  }
+});
+Object.defineProperty(exports, "SIZE", {
+  enumerable: true,
+  get: function () {
+    return _constants.SIZE;
+  }
+});
+Object.defineProperty(exports, "STATE_TYPE", {
+  enumerable: true,
+  get: function () {
+    return _constants.STATE_TYPE;
+  }
+});
+Object.defineProperty(exports, "StatefulContainer", {
+  enumerable: true,
+  get: function () {
+    return _statefulSwitchContainer.default;
+  }
+});
+Object.defineProperty(exports, "StatefulSwitch", {
+  enumerable: true,
+  get: function () {
+    return _statefulSwitch.default;
+  }
+});
+Object.defineProperty(exports, "StyledInput", {
+  enumerable: true,
+  get: function () {
+    return _styledComponents.Input;
+  }
+});
+Object.defineProperty(exports, "StyledLabel", {
+  enumerable: true,
+  get: function () {
+    return _styledComponents.Label;
+  }
+});
+Object.defineProperty(exports, "StyledRoot", {
+  enumerable: true,
+  get: function () {
+    return _styledComponents.Root;
+  }
+});
+Object.defineProperty(exports, "StyledToggle", {
+  enumerable: true,
+  get: function () {
+    return _styledComponents.Toggle;
+  }
+});
+Object.defineProperty(exports, "StyledToggleTrack", {
+  enumerable: true,
+  get: function () {
+    return _styledComponents.ToggleTrack;
+  }
+});
+Object.defineProperty(exports, "Switch", {
+  enumerable: true,
+  get: function () {
+    return _switch.default;
+  }
+});
+var _statefulSwitch = _interopRequireDefault(require("./stateful-switch"));
+var _statefulSwitchContainer = _interopRequireDefault(require("./stateful-switch-container"));
+var _switch = _interopRequireDefault(require("./switch"));
+var _styledComponents = require("./styled-components");
+var _constants = require("./constants");
+var _types = require("./types");
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _types[key];
+    }
+  });
+});
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/switch/stateful-switch-container.d.ts

@@ -0,0 +1,3 @@
+import type { StatefulContainerProps } from './types';
+declare const StatefulSwitchContainer: (props: StatefulContainerProps) => any;
+export default StatefulSwitchContainer;

package/switch/stateful-switch-container.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _constants = require("./constants");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+
+const defaultStateReducer = (type, nextState, currentState) => ({
+  ...currentState,
+  ...nextState
+});
+const StatefulSwitchContainer = props => {
+  const {
+    initialState = {
+      checked: false
+    },
+    stateReducer = defaultStateReducer,
+    onChange = () => {},
+    onMouseEnter = () => {},
+    onMouseLeave = () => {},
+    onMouseDown = () => {},
+    onMouseUp = () => {},
+    onFocus = () => {},
+    onBlur = () => {},
+    onKeyDown = () => {},
+    onKeyUp = () => {},
+    children = childProps => null,
+    ...restProps
+  } = props;
+  const [checked, setChecked] = React.useState(initialState.checked);
+  const updateState = React.useCallback((type, e) => {
+    let nextState = {};
+    switch (type) {
+      case _constants.STATE_TYPE.change:
+        nextState = {
+          checked: e.target.checked
+        };
+        break;
+    }
+    const newState = stateReducer(type, nextState, {
+      checked
+    }, e);
+    setChecked(newState.checked);
+  }, [checked, stateReducer]);
+  const onChangeHandler = React.useCallback(e => {
+    updateState(_constants.STATE_TYPE.change, e);
+    onChange && onChange(e);
+  }, [updateState, onChange]);
+  const onMouseEnterHandler = React.useCallback(e => {
+    onMouseEnter && onMouseEnter(e);
+  }, [onMouseEnter]);
+  const onMouseLeaveHandler = React.useCallback(e => {
+    onMouseLeave && onMouseLeave(e);
+  }, [onMouseLeave]);
+  const onFocusHandler = React.useCallback(e => {
+    onFocus && onFocus(e);
+  }, [onFocus]);
+  const onBlurHandler = React.useCallback(e => {
+    onBlur && onBlur(e);
+  }, [onBlur]);
+  const onMouseDownHandler = React.useCallback(e => {
+    onMouseDown && onMouseDown(e);
+  }, [onMouseDown]);
+  const onMouseUpHandler = React.useCallback(e => {
+    onMouseUp && onMouseUp(e);
+  }, [onMouseUp]);
+  const onKeyDownHandler = React.useCallback(event => {
+    onKeyDown && onKeyDown(event);
+  }, [onKeyDown]);
+  const onKeyUpHandler = React.useCallback(event => {
+    onKeyUp && onKeyUp(event);
+  }, [onKeyUp]);
+  return children({
+    ...restProps,
+    checked,
+    onChange: onChangeHandler,
+    onMouseEnter: onMouseEnterHandler,
+    onMouseLeave: onMouseLeaveHandler,
+    onMouseDown: onMouseDownHandler,
+    onMouseUp: onMouseUpHandler,
+    onFocus: onFocusHandler,
+    onBlur: onBlurHandler,
+    onKeyDown: onKeyDownHandler,
+    onKeyUp: onKeyUpHandler
+  });
+};
+var _default = exports.default = StatefulSwitchContainer;

package/switch/stateful-switch.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { StatefulSwitchProps } from './types';
+declare const StatefulSwitch: {
+    (props: StatefulSwitchProps): React.JSX.Element;
+    displayName: string;
+};
+export default StatefulSwitch;