@telus-uds/components-base 1.1.0 → 1.3.1

package/lib/Tabs/TabsItem.js

@@ -35,6 +35,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const {
   itemPositionsPropType,
   getItemPositionLayoutHandler
@@ -99,7 +100,6 @@ const selectContainerStyles = ({
 
 
 const TabsItem = /*#__PURE__*/(0, _react.forwardRef)(({
-  onPress,
   href,
   variant,
   tokens,
@@ -114,8 +114,14 @@ const TabsItem = /*#__PURE__*/(0, _react.forwardRef)(({
   } : {
     selected
   },
-  ...rest
+  ...rawRest
 }, ref) => {
+  // Convert onClick etc to onPress etc if used in an integration
+  const {
+    onPress,
+    ...rest
+  } = _utils.clickProps.toPressProps(rawRest);
+
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('TabsItem', tokens, variant);
 
   const resolveTokens = pressableState => (0, _utils.resolvePressableTokens)(getTokens, pressableState, {
@@ -139,15 +145,15 @@ const TabsItem = /*#__PURE__*/(0, _react.forwardRef)(({
     href
   });
 
-  const handlePress = onPress || openHref ? () => {
-    if (onPress) onPress();
-    if (openHref) openHref();
+  const handlePress = onPress || openHref ? (...args) => {
+    if (onPress) onPress(...args);
+    if (openHref) openHref(...args);
   } : undefined;
-  const a11y = {
+  const selectedProps = selectProps({
     accessibilityRole,
     accessibilityState,
-    ..._utils.a11yProps.select(rest)
-  };
+    ...rest
+  });
   (0, _react.useEffect)(() => {
     // If this is selected while off-screen, scroll it into view
     if (selected) {
@@ -168,7 +174,7 @@ const TabsItem = /*#__PURE__*/(0, _react.forwardRef)(({
     href: href,
     style: getPressableStyle,
     onLayout: handleLayout,
-    ...a11y,
+    ...selectedProps,
     children: pressableState => {
       const {
         space,
@@ -206,7 +212,7 @@ const TabsItem = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 TabsItem.displayName = 'TabsItem';
-TabsItem.propTypes = { ..._utils.a11yProps.propTypes,
+TabsItem.propTypes = { ...selectedSystemPropTypes,
   tokens: (0, _utils.getTokensPropType)('TabsItem'),
   variant: _utils.variantProp.propType,
   onPress: _propTypes.default.func,
@@ -234,5 +240,6 @@ const staticStyles = _StyleSheet.default.create({
   }
 });
 
-var _default = TabsItem;
+var _default = (0, _utils.withLinkRouter)(TabsItem);
+
 exports.default = _default;

package/lib/Tags/Tags.js

@@ -27,7 +27,7 @@ var _ViewportProvider = require("../ViewportProvider");
 
 var _ThemeProvider = require("../ThemeProvider");
 
-var _propTypes2 = require("../utils/propTypes");
+var _props = require("../utils/props");
 
 var _input = require("../utils/input");
 
@@ -41,6 +41,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.pressProps, _props.viewProps]);
+
 const selectIconTextTokens = ({
   icon,
   iconPosition,
@@ -97,14 +99,14 @@ const Tags = /*#__PURE__*/(0, _react.forwardRef)(({
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Tags', tokens, variant, {
     viewport
   });
-  const stackTokens = (0, _propTypes2.selectTokens)('StackView', themeTokens);
+  const stackTokens = (0, _props.selectTokens)('StackView', themeTokens);
   const {
     direction,
     space
   } = themeTokens;
   const getItemTokens = (0, _ThemeProvider.useThemeTokensCallback)('TagsItem', tokens, variant);
 
-  const getButtonTokens = buttonState => (0, _propTypes2.selectTokens)('Button', getItemTokens(buttonState));
+  const getButtonTokens = buttonState => (0, _props.selectTokens)('Button', getItemTokens(buttonState));
 
   const {
     currentValues,
@@ -116,16 +118,14 @@ const Tags = /*#__PURE__*/(0, _react.forwardRef)(({
     onChange,
     readOnly
   });
-
-  const a11y = _propTypes2.a11yProps.select({
+  const selectedProps = selectProps({
     accessibilityRole,
     ...rest
   });
-
   const itemA11yRole = 'checkbox';
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
     ref: ref,
-    ...a11y,
+    ...selectedProps,
     space: space,
     direction: direction,
     tokens: stackTokens,
@@ -154,7 +154,7 @@ const Tags = /*#__PURE__*/(0, _react.forwardRef)(({
         },
         accessibilityRole: itemA11yRole,
         accessibilityLabel,
-        ..._propTypes2.a11yProps.getPositionInSet(items.length, index)
+        ..._props.a11yProps.getPositionInSet(items.length, index)
       };
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
         ref: itemRef,
@@ -202,10 +202,9 @@ const Tags = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 Tags.displayName = 'Tags';
-Tags.propTypes = { ..._propTypes2.a11yProps.propTypes,
-  ..._propTypes2.pressProps.propTypes,
-  tokens: (0, _propTypes2.getTokensPropType)('Tags'),
-  variant: _propTypes2.variantProp.propType,
+Tags.propTypes = { ...selectedSystemPropTypes,
+  tokens: (0, _props.getTokensPropType)('Tags'),
+  variant: _props.variantProp.propType,
 
   /**
    * If provided, sets a maximum number of items a user may select at once.

package/lib/TextInput/TextArea.js

@@ -17,9 +17,7 @@ var _TextInputBase = _interopRequireDefault(require("./TextInputBase"));
 
 var _ThemeProvider = require("../ThemeProvider");
 
-var _propTypes = _interopRequireDefault(require("../InputSupports/propTypes"));
-
-var _propTypes2 = _interopRequireDefault(require("./propTypes"));
+var _propTypes = _interopRequireDefault(require("./propTypes"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -29,6 +27,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.inputSupportsProps, _utils.viewProps]);
 /**
  * Use to collect long-form information such as product feedback or support queries.
  * Due to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.
@@ -53,10 +52,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * or an indicator that the field is optional.
  * It is a more usable and accessible option than the HTML `placeholder` attribute.
  */
+
 const TextArea = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens,
   variant = {},
-  ...remainingProps
+  ...rest
 }, ref) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('TextArea', tokens, variant);
   const [inputHeight, setInputHeight] = (0, _react.useState)(); // adjust the text area's height as new lines are added to the content
@@ -76,10 +76,9 @@ const TextArea = /*#__PURE__*/(0, _react.forwardRef)(({
 
   const {
     props: supportsProps,
-    rest
-  } = _propTypes.default.select(remainingProps);
-
-  const inputProps = { ...rest,
+    ...selectedProps
+  } = selectProps(rest);
+  const inputProps = { ...selectedProps,
     variant: { ...variant,
       validation: supportsProps.validation
     },
@@ -90,19 +89,19 @@ const TextArea = /*#__PURE__*/(0, _react.forwardRef)(({
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, { ...supportsProps,
     children: ({
-      a11yProps,
-      inputId
+      inputId,
+      ...props
     }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
       ref: ref,
       ...inputProps,
-      ...a11yProps,
-      nativeID: inputId
+      nativeID: inputId,
+      ...props
     })
   });
 });
 TextArea.displayName = 'TextArea';
-TextArea.propTypes = { ..._propTypes.default.types,
-  ..._propTypes2.default,
+TextArea.propTypes = { ...selectedSystemPropTypes,
+  ..._propTypes.default,
   tokens: (0, _utils.getTokensPropType)('TextArea', 'TextInput'),
   // TODO: support both TextArea and TextInput tokens
   variant: _utils.variantProp.propType

package/lib/TextInput/TextInput.js

@@ -13,9 +13,7 @@ var _InputSupports = _interopRequireDefault(require("../InputSupports"));
 
 var _TextInputBase = _interopRequireDefault(require("./TextInputBase"));
 
-var _propTypes = _interopRequireDefault(require("../InputSupports/propTypes"));
-
-var _propTypes2 = _interopRequireDefault(require("./propTypes"));
+var _propTypes = _interopRequireDefault(require("./propTypes"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -25,6 +23,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.inputSupportsProps, _utils.viewProps]);
 /**
  * A basic text input component. Use in forms or individually to receive user's input.
  * Due to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.
@@ -43,17 +42,17 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * supported props and <a href="https://reactnative.dev/docs/textinput" target="_blank">React Native Web documentation</a> for
  * their implementation on the web.
  */
+
 const TextInput = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens,
   variant = {},
-  ...remainingProps
+  ...rest
 }, ref) => {
   const {
     props: supportsProps,
-    rest
-  } = _propTypes.default.select(remainingProps);
-
-  const inputProps = { ...rest,
+    ...selectedProps
+  } = selectProps(rest);
+  const inputProps = { ...selectedProps,
     tokens,
     variant: { ...variant,
       validation: supportsProps.validation
@@ -61,19 +60,19 @@ const TextInput = /*#__PURE__*/(0, _react.forwardRef)(({
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, { ...supportsProps,
     children: ({
-      a11yProps,
-      inputId
+      inputId,
+      ...props
     }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
       ref: ref,
       ...inputProps,
-      ...a11yProps,
-      nativeID: inputId
+      nativeID: inputId,
+      ...props
     })
   });
 });
 TextInput.displayName = 'TextInput';
-TextInput.propTypes = { ..._propTypes.default.types,
-  ..._propTypes2.default,
+TextInput.propTypes = { ...selectedSystemPropTypes,
+  ..._propTypes.default,
   tokens: (0, _utils.getTokensPropType)('TextInput'),
   variant: _utils.variantProp.propType
 };

package/lib/TextInput/TextInputBase.js

@@ -29,6 +29,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
 const selectInputStyles = ({
   backgroundColor,
   color,
@@ -144,7 +146,7 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)(({
   onMouseOut,
   tokens,
   variant = {},
-  ...remainingProps
+  ...rest
 }, ref) => {
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
 
@@ -198,7 +200,7 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)(({
   const {
     icon: IconComponent
   } = themeTokens;
-  const inputProps = { ...remainingProps,
+  const inputProps = { ...selectProps(rest),
     editable: !inactive,
     onFocus: handleFocus,
     onBlur: handleBlur,
@@ -229,7 +231,7 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 TextInputBase.displayName = 'TextInputBase';
-TextInputBase.propTypes = {
+TextInputBase.propTypes = { ...selectedSystemPropTypes,
   value: _propTypes.default.string,
   height: _propTypes.default.number,
   initialValue: _propTypes.default.string,

package/lib/ThemeProvider/useThemeTokens.js

@@ -14,9 +14,9 @@ var _utils = require("./utils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
- * @typedef {import('../utils/propTypes.js').AppearanceSet} AppearanceSet
- * @typedef {import('../utils/propTypes.js').TokensProp} TokensProp
- * @typedef {import('../utils/propTypes.js').TokensSet} TokensSet
+ * @typedef {import('../utils/props/variantProp.js').AppearanceSet} AppearanceSet
+ * @typedef {import('../utils/props/tokens.js').TokensProp} TokensProp
+ * @typedef {import('../utils/props/tokens.js').TokensSet} TokensSet
  */
 
 /**

package/lib/ThemeProvider/utils/theme-tokens.js

@@ -14,9 +14,9 @@ var _package = _interopRequireDefault(require("../../../package.json"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
- * @typedef {import('../../utils/propTypes.js').AppearanceSet} AppearanceSet
- * @typedef {import('../../utils/propTypes.js').TokensProp} TokensProp
- * @typedef {import('../../utils/propTypes.js').TokensSet} TokensSet
+ * @typedef {import('../../utils/props/variantProp.js').AppearanceSet} AppearanceSet
+ * @typedef {import('../../utils/props/tokens.js').TokensProp} TokensProp
+ * @typedef {import('../../utils/props/tokens.js').TokensSet} TokensSet
  */
 
 /**

package/lib/ToggleSwitch/ToggleSwitch.js

@@ -11,15 +11,19 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _InputLabel = _interopRequireDefault(require("../InputLabel"));
 
 var _ButtonBase = _interopRequireDefault(require("../Button/ButtonBase"));
 
+var _StackView = _interopRequireDefault(require("../StackView"));
+
 var _ThemeProvider = require("../ThemeProvider");
 
-var _propTypes2 = require("../utils/propTypes");
+var _utils = require("../utils");
 
 var _input = require("../utils/input");
 
@@ -31,7 +35,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const selectButtonTokens = tokens => (0, _propTypes2.selectTokens)('Button', { ...tokens,
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.pressProps, _utils.viewProps]);
+
+const selectButtonTokens = tokens => (0, _utils.selectTokens)('Button', { ...tokens,
   // Width tokens are applied to our inner track. Disable Button width token so it wraps our track width.
   width: null
 }); // Map and rename icon-specific tokens to name used within Icon
@@ -80,16 +86,42 @@ const selectSwitchStyles = ({
   })
 });
 
+const selectLabelStyles = ({
+  labelMarginLeft
+}) => ({
+  marginLeft: labelMarginLeft
+});
+
+const selectLabelTokens = ({
+  labelColor,
+  labelFontName,
+  labelFontSize,
+  labelFontWeight,
+  labelLineHeight
+}) => ({
+  color: labelColor,
+  fontName: labelFontName,
+  fontWeight: labelFontWeight,
+  fontSize: labelFontSize,
+  lineHeight: labelLineHeight
+});
+
 const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)(({
   value,
   initialValue,
   onChange,
+  id,
+  label,
   inactive,
   tokens,
+  tooltip,
   variant,
-  accessibilityRole = 'switch'
+  accessibilityRole = 'switch',
+  accessibilityLabel = label,
+  ...rest
 }, ref) => {
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ToggleSwitch', tokens, variant);
+  const themeTokens = getTokens();
   const {
     currentValue,
     setValue
@@ -103,48 +135,64 @@ const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)(({
 
   const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState));
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
-    ref: ref,
-    selected: currentValue,
-    inactive: inactive,
-    tokens: getButtonTokens,
-    accessibilityRole: accessibilityRole,
-    accessibilityState: {
-      checked: currentValue
-    },
-    onPress: handlePress,
-    children: buttonState => {
-      const themeTokens = getTokens(buttonState);
-      const IconComponent = themeTokens.icon;
-      const switchStyles = selectSwitchStyles(themeTokens);
-      const trackStyles = selectTrackStyles(themeTokens);
-      const iconTokens = selectIconTokens(themeTokens); // If drag-slide support is needed, use a PanResponder and apply these to an Animated value.
-      // Use translate transforms for smoothest non-thread-blocking animations and to allow drag.
-
-      const slideStart = 0;
-      const slideEnd = themeTokens.width - themeTokens.switchSize - themeTokens.trackBorderWidth * 2;
-      const switchOffset = buttonState.selected ? slideEnd : slideStart;
-      const switchPositionStyle = {
-        transform: [{
-          translateX: switchOffset
-        }]
-      };
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        style: [staticStyles.track, trackStyles],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-          style: [staticStyles.switch, switchStyles, switchPositionStyle],
-          children: IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...iconTokens
+  const uniqueId = (0, _utils.useUniqueId)('toggleSwitch');
+  const inputId = id ?? uniqueId;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+    space: 2,
+    direction: "row",
+    children: [Boolean(label) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: selectLabelStyles(themeTokens),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
+        forId: inputId,
+        label: label,
+        tokens: selectLabelTokens(themeTokens),
+        tooltip: tooltip
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+      id: id,
+      ref: ref,
+      selected: currentValue,
+      inactive: inactive,
+      tokens: getButtonTokens,
+      accessibilityLabel: accessibilityLabel,
+      accessibilityRole: accessibilityRole,
+      accessibilityState: {
+        checked: currentValue
+      },
+      onPress: handlePress,
+      ...selectProps(rest),
+      children: buttonState => {
+        const stateTokens = getTokens(buttonState);
+        const IconComponent = stateTokens.icon;
+        const switchStyles = selectSwitchStyles(stateTokens);
+        const trackStyles = selectTrackStyles(stateTokens);
+        const iconTokens = selectIconTokens(stateTokens); // If drag-slide support is needed, use a PanResponder and apply these to an Animated value.
+        // Use translate transforms for smoothest non-thread-blocking animations and to allow drag.
+
+        const slideStart = 0;
+        const slideEnd = stateTokens.width - stateTokens.switchSize - stateTokens.trackBorderWidth * 2;
+        const switchOffset = buttonState.selected ? slideEnd : slideStart;
+        const switchPositionStyle = {
+          transform: [{
+            translateX: switchOffset
+          }]
+        };
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: [staticStyles.track, trackStyles],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+            style: [staticStyles.switch, switchStyles, switchPositionStyle],
+            children: IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...iconTokens
+            })
           })
-        })
-      });
-    }
+        });
+      }
+    })]
   });
 });
 ToggleSwitch.displayName = 'ToggleSwitch';
-ToggleSwitch.propTypes = { ..._propTypes2.a11yProps.propTypes,
-  ..._propTypes2.pressProps.propTypes,
-  tokens: (0, _propTypes2.getTokensPropType)('ToggleSwitch'),
-  variant: _propTypes2.variantProp.propType,
+ToggleSwitch.propTypes = { ...selectedSystemPropTypes,
+  tokens: (0, _utils.getTokensPropType)('ToggleSwitch'),
+  variant: _utils.variantProp.propType,
 
   /**
    * If this is a "controlled" component and a parent handles its selected state,
@@ -165,11 +213,26 @@ ToggleSwitch.propTypes = { ..._propTypes2.a11yProps.propTypes,
    */
   onChange: _propTypes.default.func,
 
+  /**
+   * Input ID.
+   */
+  id: _propTypes.default.string,
+
+  /**
+   * An optional label.
+   */
+  label: _propTypes.default.string,
+
   /**
    * If passed, the switch does not respond to user input and may recieve different
    * theme tokens if the theme supports inactive appearance.
    */
-  inactive: _propTypes.default.bool
+  inactive: _propTypes.default.bool,
+
+  /**
+   * Content of an optional Tooltip. If set, a tooltip button will be shown next to the label.
+   */
+  tooltip: _propTypes.default.string
 };
 
 const staticStyles = _StyleSheet.default.create({