baseui 16.0.0 → 16.1.0

package/switch/stateful-switch.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _statefulSwitchContainer = _interopRequireDefault(require("./stateful-switch-container"));
+var _switch = _interopRequireDefault(require("./switch"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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.
+*/
+
+// Styled elements
+
+const StatefulSwitch = function (props) {
+  return /*#__PURE__*/React.createElement(_statefulSwitchContainer.default, props, childrenProps => /*#__PURE__*/React.createElement(_switch.default, childrenProps, props.children));
+};
+StatefulSwitch.displayName = 'StatefulSwitch';
+var _default = exports.default = StatefulSwitch;

package/switch/styled-components.d.ts

@@ -0,0 +1,6 @@
+import type { SharedStyleProps } from './types';
+export declare const Root: import("styletron-react").StyletronComponent<"label", SharedStyleProps>;
+export declare const Toggle: import("styletron-react").StyletronComponent<"div", SharedStyleProps>;
+export declare const ToggleTrack: import("styletron-react").StyletronComponent<"div", SharedStyleProps>;
+export declare const Label: import("styletron-react").StyletronComponent<"div", SharedStyleProps>;
+export declare const Input: import("styletron-react").StyletronComponent<"input", {}>;

package/switch/styled-components.js

@@ -0,0 +1,264 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToggleTrack = exports.Toggle = exports.Root = exports.Label = exports.Input = 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 getLabelPadding(props) {
+  const {
+    $labelPlacement,
+    $theme,
+    $size
+  } = props;
+  const {
+    sizing
+  } = $theme;
+  const {
+    scale0,
+    scale100,
+    scale300
+  } = sizing;
+  let paddingDirection;
+  switch ($labelPlacement) {
+    case _constants.LABEL_PLACEMENT.left:
+      paddingDirection = 'Right';
+      break;
+    case _constants.LABEL_PLACEMENT.right:
+    default:
+      paddingDirection = 'Left';
+      break;
+  }
+  if ($theme.direction === 'rtl' && paddingDirection === 'Left') {
+    paddingDirection = 'Right';
+  } else if ($theme.direction === 'rtl' && paddingDirection === 'Right') {
+    paddingDirection = 'Left';
+  }
+  return {
+    [`padding${paddingDirection}`]: scale300,
+    paddingTop: $size === _constants.SIZE.small ? scale0 : scale100
+  };
+}
+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,
+    $size
+  } = 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: $size === _constants.SIZE.small ? sizing.scale500 : sizing.scale300
+    }
+  };
+});
+Root.displayName = "Root";
+Root.displayName = 'Root';
+const Toggle = exports.Toggle = (0, _styles.styled)('div', props => {
+  const {
+    $theme,
+    $checked,
+    $disabled,
+    $size,
+    $isHovered,
+    $showIcon
+  } = props;
+  const {
+    sizing,
+    colors,
+    direction
+  } = $theme;
+  let backgroundColor = colors.contentTertiary;
+  if ($disabled) {
+    backgroundColor = colors.contentStateDisabled;
+  } else if ($checked) {
+    backgroundColor = colors.contentInversePrimary;
+  }
+  let height, width;
+  switch ($size) {
+    case _constants.SIZE.small:
+      if ($checked) {
+        // 16px
+        width = sizing.scale600;
+        height = sizing.scale600;
+      } else {
+        // 12px
+        width = sizing.scale500;
+        height = sizing.scale500;
+      }
+      break;
+    case _constants.SIZE.default:
+    default:
+      if ($checked) {
+        // 24px
+        width = sizing.scale800;
+        height = sizing.scale800;
+      } else {
+        // 16px
+        width = sizing.scale600;
+        height = sizing.scale600;
+      }
+      break;
+  }
+  const translateX = $size === _constants.SIZE.small ? sizing.scale600 : sizing.scale700;
+  const iconSize = $size === _constants.SIZE.small ? 12 : 16;
+  const checkmarkIcon = encodeURIComponent(`
+    <svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="m8.5 19.84-6.56-6.56 2.12-2.12L8.5 15.6 19.94 4.16l2.12 2.12L8.5 19.84Z" fill="${colors.contentPrimary}"/>
+    </svg>
+  `);
+  return {
+    backgroundColor,
+    borderTopLeftRadius: '50%',
+    borderTopRightRadius: '50%',
+    borderBottomRightRadius: '50%',
+    borderBottomLeftRadius: '50%',
+    boxShadow: $isHovered && !$checked ? `inset 0 0 0 999px ${colors.hoverOverlayInverseAlpha}` : $isHovered && $checked ? `inset 0 0 0 999px ${colors.hoverOverlayAlpha}` : 'none',
+    outline: 'none',
+    height,
+    width,
+    transform: $checked ? `translateX(${direction === 'rtl' ? `-${translateX}` : translateX})` : undefined,
+    transition: 'transform 350ms cubic-bezier(0.27, 1.06, 0.18, 1.00)',
+    backgroundImage: $showIcon && $checked ? `url('data:image/svg+xml,${checkmarkIcon}');` : undefined,
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center'
+  };
+});
+Toggle.displayName = "Toggle";
+Toggle.displayName = 'Toggle';
+const ToggleTrack = exports.ToggleTrack = (0, _styles.styled)('div', props => {
+  const {
+    $size,
+    $theme,
+    $checked,
+    $disabled,
+    $isHovered,
+    $isFocusVisible,
+    $isFocused
+  } = props;
+  const {
+    sizing,
+    colors
+  } = $theme;
+  let height, width;
+  switch ($size) {
+    case _constants.SIZE.small:
+      width = sizing.scale1000; //'40px';
+      height = sizing.scale800; //'24px';
+      break;
+    case _constants.SIZE.default:
+    default:
+      width = '52px';
+      height = sizing.scale900; //'32px';
+      break;
+  }
+  let backgroundColor = colors.backgroundTertiary;
+  if ($disabled) {
+    backgroundColor = colors.backgroundStateDisabled;
+  } else if ($checked) {
+    backgroundColor = colors.backgroundInversePrimary;
+  }
+  let borderColor = 'transparent';
+  let borderStyle = 'solid';
+  let borderWidth = sizing.scale0;
+  let outline = 'none';
+  let outlineOffset = '0px';
+  if ($disabled) {
+    borderColor = colors.borderStateDisabled;
+  }
+  if (!$disabled && !$checked) {
+    borderColor = colors.contentTertiary;
+  }
+  if (!$disabled && $checked) {
+    borderStyle = 'none';
+    borderWidth = '0px';
+  }
+  if (!$disabled && $isFocusVisible && $isFocused) {
+    const outlineStyles = (0, _getSharedStyles.getFocusOutlineStyle)($theme);
+    outline = outlineStyles.outline;
+    outlineOffset = outlineStyles.outlineOffset;
+  }
+  return {
+    alignItems: 'center',
+    backgroundColor,
+    borderTopLeftRadius: '999px',
+    borderTopRightRadius: '999px',
+    borderBottomRightRadius: '999px',
+    borderBottomLeftRadius: '999px',
+    borderStyle,
+    borderWidth,
+    borderColor,
+    display: 'flex',
+    flex: '0 0 auto',
+    height,
+    width,
+    outline,
+    outlineOffset,
+    paddingTop: sizing.scale100,
+    paddingBottom: sizing.scale100,
+    paddingLeft: sizing.scale100,
+    paddingRight: sizing.scale100,
+    boxSizing: 'border-box',
+    boxShadow: $isHovered && !$checked ? `inset 0 0 0 999px ${colors.hoverOverlayAlpha}` : $isHovered && $checked ? `inset 0 0 0 999px ${colors.hoverOverlayInverseAlpha}` : 'none'
+  };
+});
+ToggleTrack.displayName = "ToggleTrack";
+ToggleTrack.displayName = 'ToggleTrack';
+const Label = exports.Label = (0, _styles.styled)('div', props => {
+  const {
+    $theme,
+    $size
+  } = props;
+  const {
+    typography
+  } = $theme;
+  return {
+    verticalAlign: 'middle',
+    ...getLabelPadding(props),
+    color: getLabelColor(props),
+    ...($size === _constants.SIZE.small ? typography.ParagraphSmall : typography.ParagraphMedium)
+  };
+});
+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/switch/switch.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { SwitchProps } from './types';
+declare const Switch: (props: SwitchProps) => React.JSX.Element;
+export default Switch;

package/switch/switch.js

@@ -0,0 +1,199 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _overrides = require("../helpers/overrides");
+var _styledComponents = require("./styled-components");
+var _focusVisible = require("../utils/focusVisible");
+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; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /*
+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 stopPropagation = e => e.stopPropagation();
+const Switch = props => {
+  const {
+    overrides = {},
+    checked = false,
+    containsInteractiveElement = false,
+    disabled = false,
+    autoFocus = false,
+    showIcon = false,
+    labelPlacement = _constants.LABEL_PLACEMENT.right,
+    size = _constants.SIZE.default,
+    onChange = () => {},
+    onMouseEnter = () => {},
+    onMouseLeave = () => {},
+    onMouseDown = () => {},
+    onMouseUp = () => {},
+    onFocus = () => {},
+    onBlur = () => {},
+    onKeyDown,
+    // don't add fallback no-op to allow native keydown behavior if not customized.
+    onKeyUp,
+    // don't add fallback no-op to allow native keyup behavior if not customized.
+    value,
+    id,
+    name,
+    children,
+    required,
+    title,
+    inputRef
+  } = props;
+  const [isFocused, setIsFocused] = React.useState(autoFocus);
+  const [isFocusVisible, setIsFocusVisible] = React.useState(false);
+  const [isHovered, setIsHovered] = React.useState(false);
+  const [isActive, setIsActive] = React.useState(false);
+  const fallbackInputRef = React.useRef(null);
+  const internalInputRef = inputRef || fallbackInputRef;
+  React.useEffect(() => {
+    if (autoFocus) {
+      internalInputRef.current?.focus();
+    }
+  }, [autoFocus, internalInputRef]);
+  const onMouseEnterHandler = React.useCallback(e => {
+    setIsHovered(true);
+    onMouseEnter(e);
+  }, [onMouseEnter]);
+  const onMouseLeaveHandler = React.useCallback(e => {
+    setIsHovered(false);
+    setIsActive(false);
+    onMouseLeave(e);
+  }, [onMouseLeave]);
+  const onMouseDownHandler = React.useCallback(e => {
+    setIsActive(true);
+    onMouseDown(e);
+  }, [onMouseDown]);
+  const onMouseUpHandler = React.useCallback(e => {
+    setIsActive(false);
+    onMouseUp(e);
+  }, [onMouseUp]);
+  const onFocusHandler = React.useCallback(e => {
+    setIsFocused(true);
+    onFocus(e);
+    if ((0, _focusVisible.isFocusVisible)(e)) {
+      setIsFocusVisible(true);
+    }
+  }, [onFocus]);
+  const onBlurHandler = React.useCallback(e => {
+    setIsFocused(false);
+    onBlur(e);
+    if (!(0, _focusVisible.isFocusVisible)(e)) {
+      setIsFocusVisible(false);
+    }
+  }, [onBlur]);
+  const onKeyUpHandler = React.useCallback(event => {
+    /**
+     * Handles 'Enter' key press to toggle the switch.
+     */
+
+    if (event.key === ' ') {
+      setIsActive(false);
+    }
+    if (event.key === 'Enter') {
+      setIsActive(false);
+      onChange?.({
+        ...event,
+        currentTarget: {
+          ...event.currentTarget,
+          checked: !checked
+        },
+        target: {
+          ...event.target,
+          checked: !checked
+        }
+      });
+    }
+    onKeyUp?.(event);
+  }, [onKeyUp, onChange, checked]);
+  const onKeyDownHandler = React.useCallback(event => {
+    /**
+     * Handles 'Enter' key press to toggle the switch.
+     */
+    if (event.key === 'Enter') {
+      setIsActive(true);
+    }
+    if (event.key === ' ') {
+      setIsActive(true);
+    }
+    onKeyDown?.(event);
+  }, [onKeyDown]);
+  const {
+    Root: RootOverride,
+    Toggle: ToggleOverride,
+    Label: LabelOverride,
+    Input: InputOverride,
+    ToggleTrack: ToggleTrackOverride
+  } = overrides;
+  const Root = (0, _overrides.getOverride)(RootOverride) || _styledComponents.Root;
+  const ToggleTrack = (0, _overrides.getOverride)(ToggleTrackOverride) || _styledComponents.ToggleTrack;
+  const Toggle = (0, _overrides.getOverride)(ToggleOverride) || _styledComponents.Toggle;
+  const Label = (0, _overrides.getOverride)(LabelOverride) || _styledComponents.Label;
+  const Input = (0, _overrides.getOverride)(InputOverride) || _styledComponents.Input;
+  const inputEvents = {
+    onChange,
+    onFocus: onFocusHandler,
+    onBlur: onBlurHandler,
+    onKeyDown: onKeyDownHandler,
+    onKeyUp: onKeyUpHandler
+  };
+  const mouseEvents = {
+    onMouseEnter: onMouseEnterHandler,
+    onMouseLeave: onMouseLeaveHandler,
+    onMouseDown: onMouseDownHandler,
+    onMouseUp: onMouseUpHandler
+  };
+  const sharedProps = {
+    $isFocused: isFocused,
+    $isFocusVisible: isFocusVisible,
+    $isHovered: isHovered,
+    $isActive: isActive,
+    $checked: checked,
+    $required: required,
+    $disabled: disabled,
+    $value: value,
+    $showIcon: showIcon,
+    $size: size
+  };
+  const labelComponent = children && /*#__PURE__*/React.createElement(Label, _extends({
+    $labelPlacement: labelPlacement
+  }, sharedProps, (0, _overrides.getOverrideProps)(LabelOverride)), containsInteractiveElement ?
+  /*#__PURE__*/
+  // Prevents the event from bubbling up to the label and moving focus to the switch control.
+  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+  React.createElement("div", {
+    onClick: e => e.preventDefault()
+  }, children) : children);
+  return /*#__PURE__*/React.createElement(Root, _extends({
+    "data-baseweb": "switch",
+    title: title || null,
+    $labelPlacement: labelPlacement
+  }, sharedProps, mouseEvents, (0, _overrides.getOverrideProps)(RootOverride)), labelPlacement === _constants.LABEL_PLACEMENT.left && labelComponent, /*#__PURE__*/React.createElement(ToggleTrack, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(ToggleTrackOverride)), /*#__PURE__*/React.createElement(Toggle, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(ToggleOverride)))), /*#__PURE__*/React.createElement(Input, _extends({
+    value: value,
+    id: id,
+    name: name,
+    checked: checked,
+    required: required,
+    "aria-label": props['aria-label'] || props.ariaLabel,
+    "aria-describedby": props['aria-describedby'],
+    "aria-errormessage": props['aria-errormessage'],
+    "aria-invalid": props['aria-invalid'],
+    "aria-required": required || null,
+    disabled: disabled,
+    type: "checkbox",
+    role: "switch",
+    ref: internalInputRef
+    // Prevent a second click event from firing when label is clicked.
+    // See https://github.com/uber/baseweb/issues/3847
+    ,
+    onClick: stopPropagation
+  }, sharedProps, inputEvents, (0, _overrides.getOverrideProps)(InputOverride))), labelPlacement === _constants.LABEL_PLACEMENT.right && labelComponent);
+};
+var _default = exports.default = Switch;

package/switch/types.d.ts

@@ -0,0 +1,145 @@
+import type * as React from 'react';
+import type { Override } from '../helpers/overrides';
+import type { SIZE, LABEL_PLACEMENT } from './constants';
+export type LabelPlacement = keyof typeof LABEL_PLACEMENT;
+export type SwitchOverrides = {
+    Toggle?: Override;
+    ToggleTrack?: Override;
+    Label?: Override;
+    Root?: Override;
+    Input?: Override;
+};
+export type SwitchProps = {
+    /** Id of element which contains a related caption */
+    'aria-describedby'?: string;
+    /** Passed to the input element aria-label attribute. */
+    ariaLabel?: string;
+    'aria-label'?: string;
+    /** Id of element which contains an error message */
+    'aria-errormessage'?: string;
+    /** Indicates whether the switch is in an error state */
+    'aria-invalid'?: boolean;
+    /** Component or String value for label of switch. */
+    children?: React.ReactNode;
+    /** Indicates if this switch children contain an interactive element (prevents the label from moving focus from the child element to the radio button) */
+    containsInteractiveElement?: boolean;
+    overrides?: SwitchOverrides;
+    /** Check or uncheck the control. */
+    checked?: boolean;
+    /** Disable the switch from being changed. */
+    disabled?: boolean;
+    /** Marks the switch as required. */
+    required?: boolean;
+    /** Used to get a ref to the input element. Useful for programmatically focusing the input */
+    inputRef?: React.RefObject<HTMLInputElement>;
+    /** Focus the switch 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;
+    /** How to position the label relative to the switch 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;
+    /** size of switch component - both control and label(if existing) */
+    size?: keyof typeof SIZE;
+    /** whether show checkmark icon when switch is on */
+    showIcon?: boolean;
+};
+export type SwitchState = {
+    isFocused: boolean;
+    isFocusVisible: boolean;
+    isHovered: boolean;
+    isActive: boolean;
+};
+export type SwitchReducerState = {
+    checked?: boolean;
+};
+export type StateReducer = (stateType: string, nextState: SwitchReducerState, currentState: SwitchReducerState, event: React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>) => SwitchReducerState;
+export type StatefulContainerChildProps = {
+    overrides?: SwitchOverrides;
+    /** 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 switch on initial render. */
+    autoFocus?: boolean;
+} & SwitchReducerState;
+export type StatefulContainerProps = {
+    overrides?: SwitchOverrides;
+    /** Component or String value for label of switch. */
+    children?: (a: StatefulContainerChildProps) => React.ReactNode;
+    /** Defines the components initial state value */
+    initialState?: SwitchReducerState;
+    /** 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 switch on initial render. */
+    autoFocus?: boolean;
+};
+export type StatefulSwitchProps = Omit<StatefulContainerProps, 'children'> & Partial<SwitchProps>;
+export type SharedStyleProps = {
+    $isFocused: boolean;
+    $isFocusVisible: boolean;
+    $isHovered: boolean;
+    $isActive: boolean;
+    $checked: boolean;
+    $required: boolean;
+    $disabled: boolean;
+    $value: string;
+    $labelPlacement?: LabelPlacement;
+    $showIcon?: boolean;
+    $size?: keyof typeof SIZE;
+};

package/switch/types.js

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

package/themes/dark-theme/color-semantic-tokens.js

@@ -35,7 +35,20 @@ var _default = (foundation = _colorFoundationTokens.default) => {
     borderSelected: foundation.primaryA,
     borderInverseOpaque: _colorPrimitiveTokens.primitiveDarkColors.gray300Dark,
     borderInverseTransparent: (0, _util.hexToRgb)(foundation.primaryB, '0.2') || '',
-    borderInverseSelected: foundation.primaryB
+    borderInverseSelected: foundation.primaryB,
+    // Brand Default
+    brandBackgroundPrimary: _colorPrimitiveTokens.primitiveDarkColors.brandDefault500Dark,
+    brandBackgroundSecondary: _colorPrimitiveTokens.primitiveDarkColors.brandDefault100Dark,
+    brandBackgroundTertiary: _colorPrimitiveTokens.primitiveDarkColors.white,
+    brandBackgroundDisabled: _colorPrimitiveTokens.primitiveDarkColors.brandDefault100Dark,
+    brandContentPrimary: _colorPrimitiveTokens.primitiveDarkColors.brandDefault600Dark,
+    brandContentOnPrimary: _colorPrimitiveTokens.primitiveDarkColors.white,
+    brandContentOnSecondary: _colorPrimitiveTokens.primitiveDarkColors.brandDefault700Dark,
+    brandContentOnTertiary: _colorPrimitiveTokens.primitiveDarkColors.black,
+    brandContentOnGradient: _colorPrimitiveTokens.primitiveDarkColors.white,
+    brandContentDisabled: _colorPrimitiveTokens.primitiveDarkColors.brandDefault400Dark,
+    brandBorderAccessible: _colorPrimitiveTokens.primitiveDarkColors.brandDefault600Dark,
+    brandBorderSubtle: _colorPrimitiveTokens.primitiveDarkColors.brandDefault400Dark
   };
   const coreExtensions = {
     // Backgrounds