@planningcenter/tapestry-react 2.9.0-rc.4 → 2.9.0-rc.7

package/dist/esm/ToggleSwitch/ToggleSwitch.test.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import ToggleSwitch from './ToggleSwitch';
+describe('ToggleSwitch component', function () {
+  it('should render with default properties', function () {
+    var _render = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
+      isActive: false,
+      label: "Toggle me",
+      onClick: function onClick() {}
+    })),
+        getByRole = _render.getByRole;
+
+    var toggleButton = getByRole('button');
+    expect(toggleButton).toBeInTheDocument();
+  });
+  it('should call onClick when clicked', function () {
+    var mockOnClick = jest.fn();
+
+    var _render2 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
+      isActive: false,
+      label: "Toggle me",
+      onClick: mockOnClick
+    })),
+        getByRole = _render2.getByRole;
+
+    var toggleButton = getByRole('button');
+    fireEvent.click(toggleButton);
+    expect(mockOnClick).toHaveBeenCalled();
+  });
+  it('should display the label', function () {
+    var label = 'Toggle me';
+
+    var _render3 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
+      isActive: false,
+      label: label,
+      onClick: function onClick() {}
+    })),
+        getByText = _render3.getByText;
+
+    expect(getByText(label)).toBeInTheDocument();
+  });
+  it('should apply active color when isActive is true', function () {
+    var activeColor = 'green';
+
+    var _render4 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
+      backgroundColor: activeColor,
+      isActive: true,
+      label: "Toggle me",
+      onClick: function onClick() {}
+    })),
+        getByRole = _render4.getByRole;
+
+    var toggleButton = getByRole('button');
+    expect(toggleButton).toHaveStyle("background-color: " + activeColor);
+  });
+});

package/dist/esm/ToggleSwitch/index.js

@@ -0,0 +1,2 @@
+export * from './ToggleSwitch';
+export { ToggleSwitch as default } from './ToggleSwitch';

package/dist/esm/index.d.js

@@ -57,6 +57,7 @@ export var Table;
 export var Tabs;
 export var TextArea;
 export var TimeField;
+export var ToggleSwitch;
 export var Toolbar;
 export var TokenInput;
 export var Tooltip;
@@ -107,5 +108,6 @@ export * from './StackView';
 export * from './Tab';
 export * from './Text';
 export * from './TileView';
+export * from './ToggleSwitch';
 export * from './ThemeProvider';
 export * from './WrapView';

package/dist/esm/index.js

@@ -78,6 +78,7 @@ export { default as TextArea } from './TextArea';
 export { default as ThemeProvider } from './ThemeProvider';
 export { default as TileView } from './TileView';
 export { default as TimeField } from './TimeField';
+export { default as ToggleSwitch } from './ToggleSwitch';
 export { default as Toolbar } from './Toolbar';
 export { default as TokenInput } from './TokenInput';
 export { default as Tooltip } from './Tooltip';

package/dist/esm/system/colors/colors.js

@@ -1,5 +1,22 @@
-import { flattenPalette } from './utils';
+import { flattenPalette } from './utils'; // NOTE: this is a solution for using the UX palette in Tapestry-React
+// that will likely be replaced with a tokenized palette in the future
+
+var tapestry = {
+  create: {
+    create35: 'hsl(86deg 91% 35% / 100%)'
+  },
+  grays: {
+    light: {
+      neutral62: 'hsl(0deg 0% 62% / 100%)',
+      neutral81: 'hsl(0deg 0% 81% / 100%)'
+    }
+  },
+  interaction: {
+    interaction66: 'hsl(221deg 91% 66% / 100%)'
+  }
+};
 export var palette = {
+  tapestry: tapestry,
   primary: {
     lightest: 'hsl(88, 24%, 92%)',
     lighter: 'hsl(88, 32%, 86%)',

package/dist/esm/system/default-theme.js

@@ -60,6 +60,9 @@ var defaultTheme = {
       xxl: 9
     },
     trackColor: 'primary-lighter'
+  },
+  toggleSwitch: {
+    backgroundColor: 'interaction66'
   }
 };
 export default defaultTheme;

package/dist/esm/system/plugins/color.js

@@ -11,8 +11,9 @@ function color(_ref, theme) {
       borderTopColor = _ref.borderTopColor,
       color = _ref.color,
       fill = _ref.fill,
+      outlineColor = _ref.outlineColor,
       stroke = _ref.stroke,
-      styles = _objectWithoutPropertiesLoose(_ref, ["backgroundColor", "borderColor", "borderBottomColor", "borderLeftColor", "borderRightColor", "borderTopColor", "color", "fill", "stroke"]);
+      styles = _objectWithoutPropertiesLoose(_ref, ["backgroundColor", "borderColor", "borderBottomColor", "borderLeftColor", "borderRightColor", "borderTopColor", "color", "fill", "outlineColor", "stroke"]);
 
   var colorProps = {
     backgroundColor: backgroundColor,
@@ -23,6 +24,7 @@ function color(_ref, theme) {
     borderTopColor: borderTopColor,
     color: color,
     fill: fill,
+    outlineColor: outlineColor,
     stroke: stroke
   };
   Object.keys(colorProps).forEach(function (key) {

package/dist/esm/system/style-names.js

@@ -1,5 +1,5 @@
 export var nativeStyleNames = ['alignContent', 'alignItems', 'alignSelf', 'alignmentBaseline', 'animation', 'animationDelay', 'animationDirection', 'animationDuration', 'animationFillMode', 'animationIterationCount', 'animationName', 'animationPlayState', 'animationTimingFunction', 'backfaceVisibility', 'background', 'backgroundAttachment', 'backgroundBlendMode', 'backgroundClip', 'backgroundImage', 'backgroundOrigin', 'backgroundPosition', 'backgroundPositionX', 'backgroundPositionY', 'backgroundRepeat', 'backgroundSize', 'baselineShift', 'border', 'borderBottom', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderBottomStyle', 'borderBottomWidth', 'borderCollapse', 'borderImage', 'borderImageOutset', 'borderImageRepeat', 'borderImageSlice', 'borderImageSource', 'borderImageWidth', 'borderLeft', 'borderLeftStyle', 'borderLeftWidth', 'borderRadius', 'borderRight', 'borderRightStyle', 'borderRightWidth', 'borderSpacing', 'borderStyle', 'borderTop', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderTopStyle', 'borderTopWidth', 'borderWidth', 'bottom', 'boxShadow', 'boxSizing', 'breakAfter', 'breakBefore', 'breakInside', 'clear', 'clip', 'clipPath', 'clipRule', 'columnCount', 'columnFill', 'columnGap', 'columnRule', 'columnRuleColor', 'columnRuleStyle', 'columnRuleWidth', 'columnSpan', 'columnWidth', 'columns', 'contain', 'content', 'counterIncrement', 'counterReset', 'cursor', 'direction', 'display', 'fillOpacity', 'fillRule', 'filter', 'flex', 'flexBasis', 'flexDirection', 'flexFlow', 'flexGrow', 'flexShrink', 'flexWrap', 'font', 'fontFamily', 'fontFeatureSettings', 'fontKerning', 'fontSize', 'fontStretch', 'fontStyle', 'fontVariant', 'fontVariantCaps', 'fontVariantLigatures', 'fontVariantNumeric', 'fontWeight', 'gap', 'gridArea', 'gridAutoColumns', 'gridAutoFlow', 'gridAutoRows', 'gridColumn', 'gridColumnEnd', 'gridColumnGap', 'gridColumnStart', 'gridGap', 'gridRow', 'gridRowEnd', 'gridRowGap', 'gridRowStart', 'gridTemplate', 'gridTemplateAreas', 'gridTemplateColumns', 'gridTemplateRows', 'height', 'imageRendering', 'isolation', 'justifyContent', 'justifyItems', 'justifySelf', 'left', 'letterSpacing', 'lightingColor', 'lineHeight', 'listStyle', 'listStyleImage', 'listStylePosition', 'listStyleType', 'margin', 'marginBottom', 'marginLeft', 'marginRight', 'marginTop', 'mask', 'maskType', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'mixBlendMode', 'motion', 'objectFit', 'objectPosition', 'opacity', 'order', 'outline', 'outlineColor', 'outlineOffset', 'outlineStyle', 'outlineWidth', 'overflow', 'overflowWrap', 'overflowX', 'overflowY', 'padding', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'pageBreakAfter', 'pageBreakBefore', 'pageBreakInside', 'perspective', 'perspectiveOrigin', 'placeItems', 'placeSelf', 'pointerEvents', 'position', 'resize', 'right', 'strokeDasharray', 'strokeDashoffset', 'strokeLinecap', 'strokeLinejoin', 'strokeMiterlimit', 'strokeOpacity', 'strokeWidth', 'tabSize', 'tableLayout', 'textAlign', 'textDecoration', 'textIndent', 'textOrientation', 'textOverflow', 'textRendering', 'textShadow', 'textTransform', 'top', 'touchAction', 'transform', 'transformOrigin', 'transformStyle', 'transition', 'transitionDelay', 'transitionDuration', 'transitionProperty', 'transitionTimingFunction', 'verticalAlign', 'visibility', 'clipPath', 'filter', 'userSelect', 'WebkitOverflowScrolling', 'writingMode', 'whiteSpace', 'width', 'willChange', 'wordBreak', 'wordSpacing', 'wordWrap', 'zIndex'];
-export var colorStyleNames = ['backgroundColor', 'borderColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'fill', 'stroke'];
+export var colorStyleNames = ['backgroundColor', 'borderColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'fill', 'outlineColor', 'stroke'];
 export var customStyleNames = ['css', 'column', 'columnStart', 'columnEnd', 'row', 'rowStart', 'rowEnd', 'basis', 'elevation', 'grow', 'marginHorizontal', 'marginVertical', 'paddingHorizontal', 'paddingVertical', 'radius', 'radiusTop', 'radiusRight', 'radiusBottom', 'radiusLeft', 'x', 'y', 'rotate', 'scale', 'uppercase', 'shrink', 'wrap', 'strokeAlign', 'strokeWeight'];
 export var stylePropNames = [].concat(nativeStyleNames, colorStyleNames, customStyleNames);
 export var pseudoPropNames = ['active', 'focus', 'hover'];

package/dist/esm/utils.js

@@ -352,14 +352,6 @@ function isArray(value) {
 function isFunction(value) {
   return value && value.constructor === Function;
 }
-/**
- * Determines if value is a number
- */
-
-
-function isNumber(value) {
-  return /^[0-9]$/i.test(value);
-}
 /**
  * Determines if a value is present in an array by
  * performing a shallow equal check on each item.
@@ -829,4 +821,4 @@ function mergeProps() {
   }, {});
 }
 
-export { cloneChildren, composeEvents, composeMultipleEvents, createCSSProperty, deselectCurrentTextRange, generateId, getCSSProperty, getClosestFocusableElement, getClosestViewport, getInteractiveChildElements, getRect, getScrollbarWidth, getTabbableSiblings, getTextWidth, insertAtIndex, isArray, isElementInteractive, isFunction, isIOS, isNumber, isValueInArray, joinChildren, lockScroll, mergeProps, noop, objectToCSSProperties, padNumber, pageViewChange, range, removeAtIndex, renderIndexedGroup, reorderArray, shallowEqual, selectFullTextRange, stopImmediatePropagation, stopPropagationClick, supportsPassiveEvents, trapFocus };
+export { cloneChildren, composeEvents, composeMultipleEvents, createCSSProperty, deselectCurrentTextRange, generateId, getCSSProperty, getClosestFocusableElement, getClosestViewport, getInteractiveChildElements, getRect, getScrollbarWidth, getTabbableSiblings, getTextWidth, insertAtIndex, isArray, isElementInteractive, isFunction, isIOS, isValueInArray, joinChildren, lockScroll, mergeProps, noop, objectToCSSProperties, padNumber, pageViewChange, range, removeAtIndex, renderIndexedGroup, reorderArray, shallowEqual, selectFullTextRange, stopImmediatePropagation, stopPropagationClick, supportsPassiveEvents, trapFocus };

package/dist/types/Button/Button.d.ts

@@ -19,6 +19,10 @@ declare type ButtonProps = {
      * Pass styles for when the button is focused.
      */
     focus?: object;
+    /**
+     * Pass styles for when the button is keyboard-focused.
+     */
+    focusVisible?: object;
     /**
      * Pass styles for when the button is hovered.
      */
@@ -102,7 +106,7 @@ export declare namespace Button {
         visible?: boolean;
         variants?: object;
         mediaQueries?: object;
-    } & Pick<React.CSSProperties, "alignContent" | "alignItems" | "alignSelf" | "alignmentBaseline" | "animation" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "backfaceVisibility" | "background" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "baselineShift" | "border" | "borderBottom" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderImage" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderLeft" | "borderLeftStyle" | "borderLeftWidth" | "borderRadius" | "borderRight" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStyle" | "borderTop" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "borderWidth" | "bottom" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "clear" | "clip" | "clipPath" | "clipRule" | "columnCount" | "columnFill" | "columnGap" | "columnRule" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "columns" | "contain" | "content" | "counterIncrement" | "counterReset" | "cursor" | "direction" | "display" | "fillOpacity" | "fillRule" | "filter" | "flex" | "flexBasis" | "flexDirection" | "flexFlow" | "flexGrow" | "flexShrink" | "flexWrap" | "font" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontSize" | "fontStretch" | "fontStyle" | "fontVariant" | "fontVariantCaps" | "fontVariantLigatures" | "fontVariantNumeric" | "fontWeight" | "gap" | "gridArea" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumn" | "gridColumnEnd" | "gridColumnGap" | "gridColumnStart" | "gridGap" | "gridRow" | "gridRowEnd" | "gridRowGap" | "gridRowStart" | "gridTemplate" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "imageRendering" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lightingColor" | "lineHeight" | "listStyle" | "listStyleImage" | "listStylePosition" | "listStyleType" | "margin" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "mask" | "maskType" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "mixBlendMode" | "motion" | "objectFit" | "objectPosition" | "opacity" | "order" | "outline" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflow" | "overflowWrap" | "overflowX" | "overflowY" | "padding" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "perspective" | "perspectiveOrigin" | "placeItems" | "placeSelf" | "pointerEvents" | "position" | "resize" | "right" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "tabSize" | "tableLayout" | "textAlign" | "textDecoration" | "textIndent" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textTransform" | "top" | "touchAction" | "transform" | "transformOrigin" | "transformStyle" | "transition" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "verticalAlign" | "visibility" | "userSelect" | "WebkitOverflowScrolling" | "writingMode" | "whiteSpace" | "width" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "zIndex"> & Partial<Record<"backgroundColor" | "borderColor" | "borderBottomColor" | "borderLeftColor" | "borderRightColor" | "borderTopColor" | "color" | "fill" | "stroke", import("type-fest").LiteralUnion<"background" | "foreground" | "foregroundSecondary" | "foregroundTertiary" | "backgroundSecondary" | "backgroundTertiary" | "surface" | "surfaceSecondary" | "surfaceTertiary" | "separator" | "separatorSecondary" | "separatorTertiary" | "separatorHover" | "separatorFocus" | "separatorFocusSecondary" | "highlight" | "highlightSecondary" | "linkForeground" | "linkBackground" | "primary" | "primary-light" | "primary-lighter" | "primary-lightest" | "primary-dark" | "primary-darker" | "primary-darkest" | "warning" | "warning-light" | "warning-lighter" | "warning-lightest" | "warning-dark" | "warning-darker" | "warning-darkest" | "error" | "error-light" | "error-lighter" | "error-lightest" | "error-dark" | "error-darker" | "error-darkest" | "success" | "success-light" | "success-lighter" | "success-lightest" | "success-dark" | "success-darker" | "success-darkest" | "sunday" | "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday" | "check-ins" | "giving" | "groups" | "music-stand" | "pco" | "people" | "planning-center" | "projector" | "registrations" | "calendar" | "services" | "red-0" | "red-1" | "red-2" | "red-3" | "red-4" | "red-5" | "red-6" | "red-7" | "red-8" | "red-9" | "blue-0" | "blue-1" | "blue-2" | "blue-3" | "blue-4" | "blue-5" | "blue-6" | "blue-7" | "blue-8" | "blue-9" | "green-0" | "green-1" | "green-2" | "green-3" | "green-4" | "green-5" | "green-6" | "green-7" | "green-8" | "green-9" | "yellow-0" | "yellow-1" | "yellow-2" | "yellow-3" | "yellow-4" | "yellow-5" | "yellow-6" | "yellow-7" | "yellow-8" | "yellow-9" | "light-0" | "light-1" | "light-2" | "light-3" | "light-4" | "light-5" | "light-6" | "light-7" | "light-8" | "light-9" | "dark-0" | "dark-1" | "dark-2" | "dark-3" | "dark-4" | "dark-5" | "dark-6" | "dark-7" | "dark-8" | "dark-9" | "grey-0" | "grey-1" | "grey-2" | "grey-3" | "grey-4" | "grey-5" | "grey-6" | "grey-7" | "grey-8" | "grey-9" | "transparent", string>>> & {
+    } & Pick<React.CSSProperties, "alignContent" | "alignItems" | "alignSelf" | "alignmentBaseline" | "animation" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "backfaceVisibility" | "background" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "baselineShift" | "border" | "borderBottom" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderImage" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderLeft" | "borderLeftStyle" | "borderLeftWidth" | "borderRadius" | "borderRight" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStyle" | "borderTop" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "borderWidth" | "bottom" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "clear" | "clip" | "clipPath" | "clipRule" | "columnCount" | "columnFill" | "columnGap" | "columnRule" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "columns" | "contain" | "content" | "counterIncrement" | "counterReset" | "cursor" | "direction" | "display" | "fillOpacity" | "fillRule" | "filter" | "flex" | "flexBasis" | "flexDirection" | "flexFlow" | "flexGrow" | "flexShrink" | "flexWrap" | "font" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontSize" | "fontStretch" | "fontStyle" | "fontVariant" | "fontVariantCaps" | "fontVariantLigatures" | "fontVariantNumeric" | "fontWeight" | "gap" | "gridArea" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumn" | "gridColumnEnd" | "gridColumnGap" | "gridColumnStart" | "gridGap" | "gridRow" | "gridRowEnd" | "gridRowGap" | "gridRowStart" | "gridTemplate" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "imageRendering" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lightingColor" | "lineHeight" | "listStyle" | "listStyleImage" | "listStylePosition" | "listStyleType" | "margin" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "mask" | "maskType" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "mixBlendMode" | "motion" | "objectFit" | "objectPosition" | "opacity" | "order" | "outline" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflow" | "overflowWrap" | "overflowX" | "overflowY" | "padding" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "perspective" | "perspectiveOrigin" | "placeItems" | "placeSelf" | "pointerEvents" | "position" | "resize" | "right" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "tabSize" | "tableLayout" | "textAlign" | "textDecoration" | "textIndent" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textTransform" | "top" | "touchAction" | "transform" | "transformOrigin" | "transformStyle" | "transition" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "verticalAlign" | "visibility" | "userSelect" | "WebkitOverflowScrolling" | "writingMode" | "whiteSpace" | "width" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "zIndex"> & Partial<Record<"outlineColor" | "backgroundColor" | "borderColor" | "borderBottomColor" | "borderLeftColor" | "borderRightColor" | "borderTopColor" | "color" | "fill" | "stroke", import("type-fest").LiteralUnion<"background" | "foreground" | "foregroundSecondary" | "foregroundTertiary" | "backgroundSecondary" | "backgroundTertiary" | "surface" | "surfaceSecondary" | "surfaceTertiary" | "separator" | "separatorSecondary" | "separatorTertiary" | "separatorHover" | "separatorFocus" | "separatorFocusSecondary" | "highlight" | "highlightSecondary" | "linkForeground" | "linkBackground" | "primary" | "primary-light" | "primary-lighter" | "primary-lightest" | "primary-dark" | "primary-darker" | "primary-darkest" | "warning" | "warning-light" | "warning-lighter" | "warning-lightest" | "warning-dark" | "warning-darker" | "warning-darkest" | "error" | "error-light" | "error-lighter" | "error-lightest" | "error-dark" | "error-darker" | "error-darkest" | "success" | "success-light" | "success-lighter" | "success-lightest" | "success-dark" | "success-darker" | "success-darkest" | "sunday" | "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday" | "check-ins" | "giving" | "groups" | "music-stand" | "pco" | "people" | "planning-center" | "projector" | "registrations" | "calendar" | "services" | "red-0" | "red-1" | "red-2" | "red-3" | "red-4" | "red-5" | "red-6" | "red-7" | "red-8" | "red-9" | "blue-0" | "blue-1" | "blue-2" | "blue-3" | "blue-4" | "blue-5" | "blue-6" | "blue-7" | "blue-8" | "blue-9" | "green-0" | "green-1" | "green-2" | "green-3" | "green-4" | "green-5" | "green-6" | "green-7" | "green-8" | "green-9" | "yellow-0" | "yellow-1" | "yellow-2" | "yellow-3" | "yellow-4" | "yellow-5" | "yellow-6" | "yellow-7" | "yellow-8" | "yellow-9" | "light-0" | "light-1" | "light-2" | "light-3" | "light-4" | "light-5" | "light-6" | "light-7" | "light-8" | "light-9" | "dark-0" | "dark-1" | "dark-2" | "dark-3" | "dark-4" | "dark-5" | "dark-6" | "dark-7" | "dark-8" | "dark-9" | "grey-0" | "grey-1" | "grey-2" | "grey-3" | "grey-4" | "grey-5" | "grey-6" | "grey-7" | "grey-8" | "grey-9" | "transparent", string>>> & {
         css?: any;
         paddingHorizontal?: string | number;
         paddingVertical?: string | number;

package/dist/types/ToggleSwitch/ToggleSwitch.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { StackViewProps } from '../StackView';
+import { MediaQueries } from '..';
+export declare type ToggleSwitchProps = {
+    /** The color of the toggle background when it is active. */
+    backgroundColor?: string;
+    /** Whether the toggle is disabled. */
+    disabled?: boolean;
+    /** Whether the toggle is active. */
+    isActive: boolean;
+    /** The label for the toggle. */
+    label: string;
+    /** The function to call when the toggle is clicked. */
+    onClick: () => void;
+    /** The size of the toggle. */
+    size?: 'xs' | 'sm' | 'md';
+    /** The tooltip to display when the toggle is hovered. */
+    tooltip?: string;
+} & StackViewProps;
+declare type Props = React.RefAttributes<any> & React.HTMLAttributes<any> & ToggleSwitchProps & MediaQueries<ToggleSwitchProps>;
+export declare function ToggleSwitch(props: Props): JSX.Element;
+export default ToggleSwitch;

package/dist/types/ToggleSwitch/ToggleSwitch.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/dist/types/ToggleSwitch/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ToggleSwitch';
+export { ToggleSwitch as default } from './ToggleSwitch';

package/dist/types/index.d.ts

@@ -208,6 +208,9 @@ export interface Theme {
     thickness?: Partial<SpinnerThickness>
     trackColor?: ColorProp
   }
+  toggleSwitch?: {
+    backgroundColor?: ColorProp
+  }
 }
 
 export interface MediaQueries<T> {
@@ -323,6 +326,7 @@ export const Table: React.FC<CommonProps>
 export const Tabs: React.FC<CommonProps>
 export const TextArea: React.FC<CommonProps>
 export const TimeField: React.FC<CommonProps>
+export const ToggleSwitch: React.FC<CommonProps>
 export const Toolbar: React.FC<CommonProps>
 export const TokenInput: React.FC<CommonProps>
 export const Tooltip: React.FC<CommonProps>
@@ -406,5 +410,6 @@ export * from './StackView'
 export * from './Tab'
 export * from './Text'
 export * from './TileView'
+export * from './ToggleSwitch'
 export * from './ThemeProvider'
 export * from './WrapView'

package/dist/types/system/style-names.d.ts

@@ -1,8 +1,8 @@
 export declare const nativeStyleNames: readonly ["alignContent", "alignItems", "alignSelf", "alignmentBaseline", "animation", "animationDelay", "animationDirection", "animationDuration", "animationFillMode", "animationIterationCount", "animationName", "animationPlayState", "animationTimingFunction", "backfaceVisibility", "background", "backgroundAttachment", "backgroundBlendMode", "backgroundClip", "backgroundImage", "backgroundOrigin", "backgroundPosition", "backgroundPositionX", "backgroundPositionY", "backgroundRepeat", "backgroundSize", "baselineShift", "border", "borderBottom", "borderBottomLeftRadius", "borderBottomRightRadius", "borderBottomStyle", "borderBottomWidth", "borderCollapse", "borderImage", "borderImageOutset", "borderImageRepeat", "borderImageSlice", "borderImageSource", "borderImageWidth", "borderLeft", "borderLeftStyle", "borderLeftWidth", "borderRadius", "borderRight", "borderRightStyle", "borderRightWidth", "borderSpacing", "borderStyle", "borderTop", "borderTopLeftRadius", "borderTopRightRadius", "borderTopStyle", "borderTopWidth", "borderWidth", "bottom", "boxShadow", "boxSizing", "breakAfter", "breakBefore", "breakInside", "clear", "clip", "clipPath", "clipRule", "columnCount", "columnFill", "columnGap", "columnRule", "columnRuleColor", "columnRuleStyle", "columnRuleWidth", "columnSpan", "columnWidth", "columns", "contain", "content", "counterIncrement", "counterReset", "cursor", "direction", "display", "fillOpacity", "fillRule", "filter", "flex", "flexBasis", "flexDirection", "flexFlow", "flexGrow", "flexShrink", "flexWrap", "font", "fontFamily", "fontFeatureSettings", "fontKerning", "fontSize", "fontStretch", "fontStyle", "fontVariant", "fontVariantCaps", "fontVariantLigatures", "fontVariantNumeric", "fontWeight", "gap", "gridArea", "gridAutoColumns", "gridAutoFlow", "gridAutoRows", "gridColumn", "gridColumnEnd", "gridColumnGap", "gridColumnStart", "gridGap", "gridRow", "gridRowEnd", "gridRowGap", "gridRowStart", "gridTemplate", "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows", "height", "imageRendering", "isolation", "justifyContent", "justifyItems", "justifySelf", "left", "letterSpacing", "lightingColor", "lineHeight", "listStyle", "listStyleImage", "listStylePosition", "listStyleType", "margin", "marginBottom", "marginLeft", "marginRight", "marginTop", "mask", "maskType", "maxHeight", "maxWidth", "minHeight", "minWidth", "mixBlendMode", "motion", "objectFit", "objectPosition", "opacity", "order", "outline", "outlineColor", "outlineOffset", "outlineStyle", "outlineWidth", "overflow", "overflowWrap", "overflowX", "overflowY", "padding", "paddingBottom", "paddingLeft", "paddingRight", "paddingTop", "pageBreakAfter", "pageBreakBefore", "pageBreakInside", "perspective", "perspectiveOrigin", "placeItems", "placeSelf", "pointerEvents", "position", "resize", "right", "strokeDasharray", "strokeDashoffset", "strokeLinecap", "strokeLinejoin", "strokeMiterlimit", "strokeOpacity", "strokeWidth", "tabSize", "tableLayout", "textAlign", "textDecoration", "textIndent", "textOrientation", "textOverflow", "textRendering", "textShadow", "textTransform", "top", "touchAction", "transform", "transformOrigin", "transformStyle", "transition", "transitionDelay", "transitionDuration", "transitionProperty", "transitionTimingFunction", "verticalAlign", "visibility", "clipPath", "filter", "userSelect", "WebkitOverflowScrolling", "writingMode", "whiteSpace", "width", "willChange", "wordBreak", "wordSpacing", "wordWrap", "zIndex"];
 export declare type NativeStyleNames = typeof nativeStyleNames[number];
-export declare const colorStyleNames: readonly ["backgroundColor", "borderColor", "borderBottomColor", "borderLeftColor", "borderRightColor", "borderTopColor", "color", "fill", "stroke"];
+export declare const colorStyleNames: readonly ["backgroundColor", "borderColor", "borderBottomColor", "borderLeftColor", "borderRightColor", "borderTopColor", "color", "fill", "outlineColor", "stroke"];
 export declare type ColorStyleNames = typeof colorStyleNames[number];
 export declare const customStyleNames: readonly ["css", "column", "columnStart", "columnEnd", "row", "rowStart", "rowEnd", "basis", "elevation", "grow", "marginHorizontal", "marginVertical", "paddingHorizontal", "paddingVertical", "radius", "radiusTop", "radiusRight", "radiusBottom", "radiusLeft", "x", "y", "rotate", "scale", "uppercase", "shrink", "wrap", "strokeAlign", "strokeWeight"];
 export declare type CustomStyleNames = typeof customStyleNames[number];
-export declare const stylePropNames: readonly ["alignContent", "alignItems", "alignSelf", "alignmentBaseline", "animation", "animationDelay", "animationDirection", "animationDuration", "animationFillMode", "animationIterationCount", "animationName", "animationPlayState", "animationTimingFunction", "backfaceVisibility", "background", "backgroundAttachment", "backgroundBlendMode", "backgroundClip", "backgroundImage", "backgroundOrigin", "backgroundPosition", "backgroundPositionX", "backgroundPositionY", "backgroundRepeat", "backgroundSize", "baselineShift", "border", "borderBottom", "borderBottomLeftRadius", "borderBottomRightRadius", "borderBottomStyle", "borderBottomWidth", "borderCollapse", "borderImage", "borderImageOutset", "borderImageRepeat", "borderImageSlice", "borderImageSource", "borderImageWidth", "borderLeft", "borderLeftStyle", "borderLeftWidth", "borderRadius", "borderRight", "borderRightStyle", "borderRightWidth", "borderSpacing", "borderStyle", "borderTop", "borderTopLeftRadius", "borderTopRightRadius", "borderTopStyle", "borderTopWidth", "borderWidth", "bottom", "boxShadow", "boxSizing", "breakAfter", "breakBefore", "breakInside", "clear", "clip", "clipPath", "clipRule", "columnCount", "columnFill", "columnGap", "columnRule", "columnRuleColor", "columnRuleStyle", "columnRuleWidth", "columnSpan", "columnWidth", "columns", "contain", "content", "counterIncrement", "counterReset", "cursor", "direction", "display", "fillOpacity", "fillRule", "filter", "flex", "flexBasis", "flexDirection", "flexFlow", "flexGrow", "flexShrink", "flexWrap", "font", "fontFamily", "fontFeatureSettings", "fontKerning", "fontSize", "fontStretch", "fontStyle", "fontVariant", "fontVariantCaps", "fontVariantLigatures", "fontVariantNumeric", "fontWeight", "gap", "gridArea", "gridAutoColumns", "gridAutoFlow", "gridAutoRows", "gridColumn", "gridColumnEnd", "gridColumnGap", "gridColumnStart", "gridGap", "gridRow", "gridRowEnd", "gridRowGap", "gridRowStart", "gridTemplate", "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows", "height", "imageRendering", "isolation", "justifyContent", "justifyItems", "justifySelf", "left", "letterSpacing", "lightingColor", "lineHeight", "listStyle", "listStyleImage", "listStylePosition", "listStyleType", "margin", "marginBottom", "marginLeft", "marginRight", "marginTop", "mask", "maskType", "maxHeight", "maxWidth", "minHeight", "minWidth", "mixBlendMode", "motion", "objectFit", "objectPosition", "opacity", "order", "outline", "outlineColor", "outlineOffset", "outlineStyle", "outlineWidth", "overflow", "overflowWrap", "overflowX", "overflowY", "padding", "paddingBottom", "paddingLeft", "paddingRight", "paddingTop", "pageBreakAfter", "pageBreakBefore", "pageBreakInside", "perspective", "perspectiveOrigin", "placeItems", "placeSelf", "pointerEvents", "position", "resize", "right", "strokeDasharray", "strokeDashoffset", "strokeLinecap", "strokeLinejoin", "strokeMiterlimit", "strokeOpacity", "strokeWidth", "tabSize", "tableLayout", "textAlign", "textDecoration", "textIndent", "textOrientation", "textOverflow", "textRendering", "textShadow", "textTransform", "top", "touchAction", "transform", "transformOrigin", "transformStyle", "transition", "transitionDelay", "transitionDuration", "transitionProperty", "transitionTimingFunction", "verticalAlign", "visibility", "clipPath", "filter", "userSelect", "WebkitOverflowScrolling", "writingMode", "whiteSpace", "width", "willChange", "wordBreak", "wordSpacing", "wordWrap", "zIndex", "backgroundColor", "borderColor", "borderBottomColor", "borderLeftColor", "borderRightColor", "borderTopColor", "color", "fill", "stroke", "css", "column", "columnStart", "columnEnd", "row", "rowStart", "rowEnd", "basis", "elevation", "grow", "marginHorizontal", "marginVertical", "paddingHorizontal", "paddingVertical", "radius", "radiusTop", "radiusRight", "radiusBottom", "radiusLeft", "x", "y", "rotate", "scale", "uppercase", "shrink", "wrap", "strokeAlign", "strokeWeight"];
+export declare const stylePropNames: readonly ["alignContent", "alignItems", "alignSelf", "alignmentBaseline", "animation", "animationDelay", "animationDirection", "animationDuration", "animationFillMode", "animationIterationCount", "animationName", "animationPlayState", "animationTimingFunction", "backfaceVisibility", "background", "backgroundAttachment", "backgroundBlendMode", "backgroundClip", "backgroundImage", "backgroundOrigin", "backgroundPosition", "backgroundPositionX", "backgroundPositionY", "backgroundRepeat", "backgroundSize", "baselineShift", "border", "borderBottom", "borderBottomLeftRadius", "borderBottomRightRadius", "borderBottomStyle", "borderBottomWidth", "borderCollapse", "borderImage", "borderImageOutset", "borderImageRepeat", "borderImageSlice", "borderImageSource", "borderImageWidth", "borderLeft", "borderLeftStyle", "borderLeftWidth", "borderRadius", "borderRight", "borderRightStyle", "borderRightWidth", "borderSpacing", "borderStyle", "borderTop", "borderTopLeftRadius", "borderTopRightRadius", "borderTopStyle", "borderTopWidth", "borderWidth", "bottom", "boxShadow", "boxSizing", "breakAfter", "breakBefore", "breakInside", "clear", "clip", "clipPath", "clipRule", "columnCount", "columnFill", "columnGap", "columnRule", "columnRuleColor", "columnRuleStyle", "columnRuleWidth", "columnSpan", "columnWidth", "columns", "contain", "content", "counterIncrement", "counterReset", "cursor", "direction", "display", "fillOpacity", "fillRule", "filter", "flex", "flexBasis", "flexDirection", "flexFlow", "flexGrow", "flexShrink", "flexWrap", "font", "fontFamily", "fontFeatureSettings", "fontKerning", "fontSize", "fontStretch", "fontStyle", "fontVariant", "fontVariantCaps", "fontVariantLigatures", "fontVariantNumeric", "fontWeight", "gap", "gridArea", "gridAutoColumns", "gridAutoFlow", "gridAutoRows", "gridColumn", "gridColumnEnd", "gridColumnGap", "gridColumnStart", "gridGap", "gridRow", "gridRowEnd", "gridRowGap", "gridRowStart", "gridTemplate", "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows", "height", "imageRendering", "isolation", "justifyContent", "justifyItems", "justifySelf", "left", "letterSpacing", "lightingColor", "lineHeight", "listStyle", "listStyleImage", "listStylePosition", "listStyleType", "margin", "marginBottom", "marginLeft", "marginRight", "marginTop", "mask", "maskType", "maxHeight", "maxWidth", "minHeight", "minWidth", "mixBlendMode", "motion", "objectFit", "objectPosition", "opacity", "order", "outline", "outlineColor", "outlineOffset", "outlineStyle", "outlineWidth", "overflow", "overflowWrap", "overflowX", "overflowY", "padding", "paddingBottom", "paddingLeft", "paddingRight", "paddingTop", "pageBreakAfter", "pageBreakBefore", "pageBreakInside", "perspective", "perspectiveOrigin", "placeItems", "placeSelf", "pointerEvents", "position", "resize", "right", "strokeDasharray", "strokeDashoffset", "strokeLinecap", "strokeLinejoin", "strokeMiterlimit", "strokeOpacity", "strokeWidth", "tabSize", "tableLayout", "textAlign", "textDecoration", "textIndent", "textOrientation", "textOverflow", "textRendering", "textShadow", "textTransform", "top", "touchAction", "transform", "transformOrigin", "transformStyle", "transition", "transitionDelay", "transitionDuration", "transitionProperty", "transitionTimingFunction", "verticalAlign", "visibility", "clipPath", "filter", "userSelect", "WebkitOverflowScrolling", "writingMode", "whiteSpace", "width", "willChange", "wordBreak", "wordSpacing", "wordWrap", "zIndex", "backgroundColor", "borderColor", "borderBottomColor", "borderLeftColor", "borderRightColor", "borderTopColor", "color", "fill", "outlineColor", "stroke", "css", "column", "columnStart", "columnEnd", "row", "rowStart", "rowEnd", "basis", "elevation", "grow", "marginHorizontal", "marginVertical", "paddingHorizontal", "paddingVertical", "radius", "radiusTop", "radiusRight", "radiusBottom", "radiusLeft", "x", "y", "rotate", "scale", "uppercase", "shrink", "wrap", "strokeAlign", "strokeWeight"];
 export declare const pseudoPropNames: readonly ["active", "focus", "hover"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-react",
-  "version": "2.9.0-rc.4",
+  "version": "2.9.0-rc.7",
   "description": "A collection of flexible React components to help you build resilient, accessible user interfaces quickly and effectively.",
   "author": "Front End Systems Engineering <frontend@pco.bz>",
   "main": "dist/cjs/index.js",

package/src/Button/Button.tsx

@@ -35,6 +35,11 @@ type ButtonProps = {
    */
   focus?: object
 
+  /**
+   * Pass styles for when the button is keyboard-focused.
+   */
+  focusVisible?: object
+
   /**
    * Pass styles for when the button is hovered.
    */
@@ -255,7 +260,17 @@ export function Button({
   }
 
   if (disabled) {
-    buttonProps.opacity = 0.65
+    const disabledStyles = buttonThemes[theme][variant || 'fill'].disabled
+
+    if (disabledStyles !== undefined) {
+      buttonProps = {
+        ...buttonProps,
+        ...disabledStyles,
+      }
+    } else {
+      buttonProps.opacity = 0.65
+    }
+
     buttonProps['aria-disabled'] = true
     buttonProps.cursor = 'not-allowed'
     buttonProps.onClick = (event) => event.preventDefault()
@@ -271,7 +286,7 @@ export function Button({
     buttonProps.hover = undefined
     buttonProps.active = undefined
   } else {
-    buttonProps.focus = { ...buttonProps.focus, zIndex: 5 }
+    buttonProps.focus = { zIndex: 5, ...buttonProps.focus }
     buttonProps.cursor = 'pointer'
     buttonProps.touchAction = 'manipulation'
     buttonProps.onClick = onClick
@@ -374,7 +389,15 @@ export function Button({
 
   return (
     <Tooltip {...tooltip}>
-      <StackView {...buttonProps} {...restProps}>
+      <StackView
+        {...buttonProps}
+        {...restProps}
+        css={{
+          '&:focus-visible': {
+            ...buttonProps.focusVisible,
+          },
+        }}
+      >
         {iconLeft && (
           <Icon
             size={size}

package/src/FilterLayout/FilterLayout.tsx

@@ -59,9 +59,11 @@ export function FilterLayout(props: Props) {
           radius={0}
           title="Filter"
           aria-label={sidebarOpen ? 'close filter' : 'open filter'}
-          iconRight={{ 
-            name: sidebarOpen ? 'general.leftChevron' : 'general.threeReducingHorizontalBars',
-            size: sidebarOpen ? 'xs' : 'md'
+          iconRight={{
+            name: sidebarOpen
+              ? 'general.leftChevron'
+              : 'general.threeReducingHorizontalBars',
+            size: sidebarOpen ? 'xs' : 'md',
           }}
           onClick={toggleSidebar}
         />
@@ -70,7 +72,7 @@ export function FilterLayout(props: Props) {
         </Box>
       </StackView>
       <Divider />
-      <StackView axis="horizontal" grow={1}>
+      <StackView axis="horizontal" grow={1} overflow="hidden">
         <StackView
           visible={sidebarOpen}
           basis={fill ? '100%' : sidebarWidth + 'px'}
@@ -81,9 +83,10 @@ export function FilterLayout(props: Props) {
           {sidebar}
         </StackView>
         <StackView
-          visible={!(sidebarOpen && fill)}
+          visibility={sidebarOpen && fill ? 'hidden' : 'visible'}
+          maxHeight={sidebarOpen && fill ? 0 : 'initial'}
           grow={1}
-          shrink={1}
+          shrink={sidebarOpen && fill ? 0 : 1}
           basis="100%"
         >
           {toolbar}

package/src/TimeField/TimeField.mdx

@@ -6,7 +6,7 @@ propsSummary: Accepts [Input](/input) props.
 
 ```jsx live
 render(() => {
-  const [time, setTime] = React.useState([13, 30])
+  const [time, setTime] = React.useState([9, 30])
   return <TimeField value={time} onChange={(time) => setTime(time)} />
 })
 ```

package/src/TimeField/utils.js

@@ -12,19 +12,17 @@ export function addHoursToTime(time, hoursToAdd) {
 }
 
 export function addMinutesToTime(time, minutesToAdd) {
-  const [hours, minutes] = time
-  const totalTimeInMinutes = hours * 60 + minutes
-  const totalMinutesInDay = 24 * 60
-  const newTime = parseInt(totalTimeInMinutes) + parseInt(minutesToAdd)
-
-  const newHours =
-    newTime > totalMinutesInDay
-      ? Math.floor(newTime / 60) - 24
-      : Math.floor(newTime / 60)
-
-  const newMinutes = newTime % 60
-
-  return [newHours, newMinutes]
+  let [hours, minutes] = time
+  const nextMinutes = minutes + minutesToAdd
+  const remainderMinutes = modulo(nextMinutes, MINUTES_IN_HOUR)
+  if (remainderMinutes >= 0) {
+    const nextHours = hours + Math.floor(nextMinutes / MINUTES_IN_HOUR)
+    hours = modulo(nextHours, HOURS_IN_DAY)
+    minutes = remainderMinutes
+  } else {
+    minutes = nextMinutes
+  }
+  return [hours, minutes]
 }
 
 export function addTimeToDate(date, time) {

package/src/ToggleSwitch/ToggleSwitch.mdx

@@ -0,0 +1,56 @@
+---
+title: ToggleSwitch
+category: General
+summary: ToggleSwitches are used to switch between two states, most commonly on and off, and visually show the current state.
+propsSummary: Accepts [StackView](/stackview) props.
+themeKey: toggleSwitch
+---
+
+```jsx live
+render(
+  <StackView spacing={6}>
+    <StackView axis="horizontal" spacing={2}>
+      {['xs', 'sm', 'md'].map((size) => (
+        <ToggleSwitch
+          key={size}
+          label={`${size} toggle`}
+          size={size}
+          tooltip={`${size} toggle`}
+        />
+      ))}
+    </StackView>
+    <StackView axis="horizontal" spacing={2}>
+      <ToggleSwitch isActive label="On" tooltip="On" />
+      <ToggleSwitch disabled label="Disabled, off" tooltip="Disabled, off" />
+      <ToggleSwitch
+        disabled
+        isActive
+        label="Disabled, On"
+        tooltip="Disabled, On"
+      />
+    </StackView>
+    <StackView axis="horizontal" spacing={2}>
+      <ToggleSwitch color="red-5" isActive label="Custom color" />
+      <ThemeProvider theme={{ toggleSwitch: { backgroundColor: 'create35' } }}>
+        <ToggleSwitch isActive label="Theme-provided color" />
+      </ThemeProvider>
+    </StackView>
+  </StackView>
+)
+```
+
+```jsx live
+function App() {
+  const [isActive, setIsActive] = React.useState(false)
+  return (
+    <StackView>
+      <ToggleSwitch
+        isActive={isActive}
+        label="Controlled toggle"
+        onClick={() => setIsActive(!isActive)}
+      />
+    </StackView>
+  )
+}
+render(App)
+```

package/src/ToggleSwitch/ToggleSwitch.test.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import ToggleSwitch from './ToggleSwitch'
+
+describe('ToggleSwitch component', () => {
+  it('should render with default properties', () => {
+    const { getByRole } = render(
+      <ToggleSwitch isActive={false} label="Toggle me" onClick={() => {}} />
+    )
+
+    const toggleButton = getByRole('button')
+    expect(toggleButton).toBeInTheDocument()
+  })
+
+  it('should call onClick when clicked', () => {
+    const mockOnClick = jest.fn()
+    const { getByRole } = render(
+      <ToggleSwitch isActive={false} label="Toggle me" onClick={mockOnClick} />
+    )
+
+    const toggleButton = getByRole('button')
+    fireEvent.click(toggleButton)
+
+    expect(mockOnClick).toHaveBeenCalled()
+  })
+
+  it('should display the label', () => {
+    const label = 'Toggle me'
+    const { getByText } = render(
+      <ToggleSwitch isActive={false} label={label} onClick={() => {}} />
+    )
+
+    expect(getByText(label)).toBeInTheDocument()
+  })
+
+  it('should apply active color when isActive is true', () => {
+    const activeColor = 'green'
+    const { getByRole } = render(
+      <ToggleSwitch
+        backgroundColor={activeColor}
+        isActive={true}
+        label="Toggle me"
+        onClick={() => {}}
+      />
+    )
+
+    const toggleButton = getByRole('button')
+    expect(toggleButton).toHaveStyle(`background-color: ${activeColor}`)
+  })
+})