@khanacademy/wonder-blocks-switch 3.2.10 → 3.3.0

package/.turbo/turbo-build$colon$css.log

@@ -0,0 +1,5 @@
+
+> @khanacademy/wonder-blocks-switch@3.3.0 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-switch
+> pnpm exec wonder-blocks-tokens .
+
+CSS variables generated successfully in: /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-switch/dist/css

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @khanacademy/wonder-blocks-switch
 
+## 3.3.0
+
+### Minor Changes
+
+- e8fc6e4: Add support for Thunderblocks theming
+
+### Patch Changes
+
+- Updated dependencies [7811eb1]
+    - @khanacademy/wonder-blocks-tokens@10.6.0
+    - @khanacademy/wonder-blocks-icon@5.2.1
+    - @khanacademy/wonder-blocks-styles@0.2.14
+
 ## 3.2.10
 
 ### Patch Changes

package/dist/css/vars.css

@@ -0,0 +1,31 @@
+:root {--wb-c-switch-root-border-radius-default: var(--wb-border-radius-radius_120);
+--wb-c-switch-root-border-radius-hover: var(--wb-border-radius-radius_120);
+--wb-c-switch-root-border-radius-press: var(--wb-border-radius-radius_120);
+--wb-c-switch-root-sizing-height: var(--wb-sizing-size_240);
+--wb-c-switch-root-sizing-width: var(--wb-sizing-size_400);
+--wb-c-switch-slider-sizing-height: var(--wb-sizing-size_200);
+--wb-c-switch-slider-sizing-width: var(--wb-sizing-size_200);
+--wb-c-switch-slider-position-top: var(--wb-sizing-size_020);
+--wb-c-switch-slider-position-left: var(--wb-sizing-size_020);
+--wb-c-switch-slider-transform-default: translateX(var(--wb-sizing-size_160));
+--wb-c-switch-slider-transform-transition: transform 0.15s ease-in-out;
+--wb-c-switch-icon-position-top: var(--wb-sizing-size_040);
+--wb-c-switch-icon-position-left: var(--wb-sizing-size_040);
+--wb-c-switch-icon-transform-default: translateX(var(--wb-sizing-size_160));
+--wb-c-switch-icon-transform-transition: transform 0.15s ease-in-out;}
+
+[data-wb-theme='thunderblocks'] {--wb-c-switch-root-border-radius-default: var(--wb-border-radius-radius_240);
+--wb-c-switch-root-border-radius-hover: var(--wb-border-radius-radius_120);
+--wb-c-switch-root-border-radius-press: var(--wb-border-radius-radius_120);
+--wb-c-switch-root-sizing-height: var(--wb-sizing-size_240);
+--wb-c-switch-root-sizing-width: var(--wb-sizing-size_440);
+--wb-c-switch-slider-sizing-height: var(--wb-sizing-size_200);
+--wb-c-switch-slider-sizing-width: var(--wb-sizing-size_200);
+--wb-c-switch-slider-position-top: var(--wb-sizing-size_020);
+--wb-c-switch-slider-position-left: var(--wb-sizing-size_020);
+--wb-c-switch-slider-transform-default: translateX(var(--wb-sizing-size_200));
+--wb-c-switch-slider-transform-transition: transform 0.15s ease-in-out;
+--wb-c-switch-icon-position-top: var(--wb-sizing-size_040);
+--wb-c-switch-icon-position-left: var(--wb-sizing-size_040);
+--wb-c-switch-icon-transform-default: translateX(var(--wb-sizing-size_200));
+--wb-c-switch-icon-transform-transition: transform 0.15s ease-in-out;}

package/dist/es/index.js

@@ -1,16 +1,15 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useId } from 'react';
 import { StyleSheet } from 'aphrodite';
 import { addStyle, View } from '@khanacademy/wonder-blocks-core';
-import { createThemeContext, ThemeSwitcherContext, useScopedTheme, useStyles } from '@khanacademy/wonder-blocks-theming';
+import { border, sizing, mapValuesToCssVars, semanticColor } from '@khanacademy/wonder-blocks-tokens';
 import { focusStyles } from '@khanacademy/wonder-blocks-styles';
-import { semanticColor, color, border, spacing } from '@khanacademy/wonder-blocks-tokens';
 
-const theme={color:{bg:{switch:{off:semanticColor.core.border.neutral.default,disabledOff:semanticColor.core.border.disabled.strong,activeOff:color.fadedOffBlack64,on:semanticColor.core.background.instructive.default,disabledOn:semanticColor.core.border.instructive.subtle,activeOn:semanticColor.core.background.instructive.strong},slider:{on:semanticColor.icon.inverse,off:semanticColor.icon.inverse},icon:{on:semanticColor.icon.action,disabledOn:semanticColor.core.border.instructive.subtle,off:semanticColor.core.border.neutral.default,disabledOff:semanticColor.icon.disabled}}},border:{radius:{small:border.radius.radius_120,full:border.radius.radius_full}},size:{height:{none:0,medium:20,large:spacing.large_24},width:{none:0,small:spacing.xxxxSmall_2,medium:20,large:40}},spacing:{slider:{position:spacing.xxxxSmall_2},icon:{position:spacing.xxxSmall_4},transform:{default:`translateX(${spacing.medium_16}px)`,transition:"transform 0.15s ease-in-out"}}};
+var themeDefault = {root:{border:{radius:{default:border.radius.radius_120,hover:border.radius.radius_120,press:border.radius.radius_120}},sizing:{height:sizing.size_240,width:sizing.size_400}},slider:{sizing:{height:sizing.size_200,width:sizing.size_200},position:{top:sizing.size_020,left:sizing.size_020},transform:{default:`translateX(${sizing.size_160})`,transition:"transform 0.15s ease-in-out"}},icon:{position:{top:sizing.size_040,left:sizing.size_040},transform:{default:`translateX(${sizing.size_160})`,transition:"transform 0.15s ease-in-out"}}};
 
-const themes={default:theme};const SwitchThemeContext=createThemeContext(theme);function ThemedSwitch(props){const currentTheme=React.useContext(ThemeSwitcherContext);const theme$1=themes[currentTheme]||theme;return jsx(SwitchThemeContext.Provider,{value:theme$1,children:props.children})}
+var theme = mapValuesToCssVars(themeDefault,"--wb-c-switch-");
 
-const StyledSpan=addStyle("span");const StyledInput=addStyle("input");const SwitchCore=React.forwardRef(function SwitchCore(props,ref){const{"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,"aria-describedby":ariaDescribedBy,checked,className,disabled=false,icon,id,onChange,testId}=props;const generatedUniqueId=useId();const uniqueId=id??generatedUniqueId;const{theme,themeName}=useScopedTheme(SwitchThemeContext);const sharedStyles=useStyles(themedSharedStyles,theme);const handleClick=()=>{if(!disabled&&onChange){onChange(!checked);}};const handleChange=()=>{};const stateStyles=_generateStyles(checked,onChange!==undefined,disabled,theme,themeName);let styledIcon;if(icon){styledIcon=React.cloneElement(icon,{size:"small",style:[sharedStyles.icon,stateStyles.icon],"aria-hidden":true});}return jsxs(View,{onClick:handleClick,style:[sharedStyles.switch,stateStyles.switch,disabled&&sharedStyles.disabled],className:className,testId:testId,children:[jsx(StyledInput,{"aria-describedby":ariaDescribedBy,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,checked:checked,"aria-disabled":disabled,id:uniqueId,onChange:handleChange,ref:ref,role:"switch",style:sharedStyles.hidden,type:"checkbox"}),icon&&styledIcon,jsx(StyledSpan,{style:[sharedStyles.slider,stateStyles.slider]})]})});const themedSharedStyles=theme=>({hidden:{opacity:0,height:theme.size.height.none,width:theme.size.width.none},switch:{display:"inline-flex",height:theme.size.height.large,width:theme.size.width.large,borderRadius:theme.border.radius.small,flexShrink:0,":focus-within":focusStyles.focus[":focus-visible"]},disabled:{cursor:"not-allowed",":hover":{outline:"none"},":active":{outline:"none"},":focus-within":focusStyles.focus[":focus-visible"]},slider:{position:"absolute",top:theme.spacing.slider.position,left:theme.spacing.slider.position,height:theme.size.height.medium,width:theme.size.width.medium,borderRadius:theme.border.radius.full,backgroundColor:theme.color.bg.slider.on,transition:theme.spacing.transform.transition},icon:{position:"absolute",top:theme.spacing.icon.position,left:theme.spacing.icon.position,zIndex:1,transition:theme.spacing.transform.transition}});const focusStylesObject=focusStyles.focus[":focus-visible"];const styles={};const _generateStyles=(checked,clickable,disabled,theme,themeName)=>{const checkedStyle=`${checked}-${clickable}-${disabled}-${themeName}`;if(styles[checkedStyle]){return styles[checkedStyle]}let newStyles={};const sharedSwitchStyles={cursor:clickable?"pointer":"auto",":hover":{...focusStylesObject,outline:clickable?focusStylesObject.outline:"none"}};if(checked){newStyles={switch:{backgroundColor:disabled?theme.color.bg.switch.disabledOn:theme.color.bg.switch.on,":active":{backgroundColor:!disabled&&clickable?theme.color.bg.switch.activeOn:undefined,...focusStylesObject,outline:clickable?focusStylesObject.outline:"none"},...sharedSwitchStyles},slider:{transform:theme.spacing.transform.default},icon:{color:disabled?theme.color.bg.icon.disabledOn:theme.color.bg.icon.on,transform:theme.spacing.transform.default}};}else {newStyles={switch:{backgroundColor:disabled?theme.color.bg.switch.disabledOff:theme.color.bg.switch.off,":active":{backgroundColor:!disabled&&clickable?theme.color.bg.switch.activeOff:undefined,...focusStylesObject,outline:clickable?focusStylesObject.outline:"none"},...sharedSwitchStyles},slider:{backgroundColor:theme.color.bg.slider.off},icon:{color:disabled?theme.color.bg.icon.disabledOff:theme.color.bg.icon.off}};}styles[checkedStyle]=StyleSheet.create(newStyles);return styles[checkedStyle]};const Switch=React.forwardRef(function Switch(props,ref){return jsx(ThemedSwitch,{children:jsx(SwitchCore,{...props,ref:ref})})});Switch.displayName="Switch";
+const StyledSpan=addStyle("span");const StyledInput=addStyle("input");const focusStylesObject=focusStyles.focus[":focus-visible"];const baseStyles={color:{bg:{switch:{off:semanticColor.core.border.neutral.default,disabledOff:semanticColor.core.border.disabled.strong,activeOff:semanticColor.core.border.neutral.strong,on:semanticColor.core.background.instructive.default,disabledOn:semanticColor.core.border.instructive.subtle,activeOn:semanticColor.core.background.instructive.strong},slider:{on:semanticColor.icon.inverse,off:semanticColor.icon.inverse},icon:{on:semanticColor.icon.action,disabledOn:semanticColor.core.border.instructive.subtle,off:semanticColor.core.border.neutral.default,disabledOff:semanticColor.icon.disabled}}}};const sharedStyles=StyleSheet.create({hidden:{opacity:0,height:0,width:0},switch:{display:"inline-flex",height:theme.root.sizing.height,width:theme.root.sizing.width,borderRadius:theme.root.border.radius.default,flexShrink:0},switchFocus:{":focus-within":focusStylesObject},disabled:{cursor:"not-allowed",":hover":{outline:"none"},":active":{outline:"none"}},disabledFocus:{":focus-within":focusStylesObject},slider:{position:"absolute",top:theme.slider.position.top,left:theme.slider.position.left,height:theme.slider.sizing.height,width:theme.slider.sizing.width,borderRadius:theme.root.border.radius.default,backgroundColor:baseStyles.color.bg.slider.on,transition:theme.slider.transform.transition},icon:{position:"absolute",top:theme.icon.position.top,left:theme.icon.position.left,zIndex:1,transition:theme.icon.transform.transition}});const Switch=React.forwardRef(function Switch(props,ref){const{"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,"aria-describedby":ariaDescribedBy,checked,className,disabled=false,icon,id,onChange,testId}=props;const generatedUniqueId=useId();const uniqueId=id??generatedUniqueId;const handleClick=()=>{if(!disabled&&onChange){onChange(!checked);}};const handleChange=()=>{};const stateStyles=_generateStyles(checked,onChange!==undefined,disabled);const combinedStyles=[sharedStyles.switch,sharedStyles.switchFocus,stateStyles.switch,disabled&&sharedStyles.disabled,disabled&&sharedStyles.disabledFocus];let styledIcon;if(icon){styledIcon=React.cloneElement(icon,{size:"small",style:[sharedStyles.icon,stateStyles.icon],"aria-hidden":true});}return jsxs(View,{onClick:handleClick,style:combinedStyles,className:className,testId:testId,children:[jsx(StyledInput,{"aria-describedby":ariaDescribedBy,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,checked:checked,"aria-disabled":disabled,id:uniqueId,onChange:handleChange,ref:ref,role:"switch",style:sharedStyles.hidden,type:"checkbox"}),icon&&styledIcon,jsx(StyledSpan,{style:[sharedStyles.slider,stateStyles.slider]})]})});const styles={};const _generateStyles=(checked,clickable,disabled)=>{const checkedStyle=`${checked}-${clickable}-${disabled}`;if(styles[checkedStyle]){return styles[checkedStyle]}let newStyles={};const sharedSwitchStyles={cursor:clickable?"pointer":"auto",":hover":{...focusStylesObject,outline:clickable?focusStylesObject.outline:"none"}};if(checked){newStyles={switch:{backgroundColor:disabled?baseStyles.color.bg.switch.disabledOn:baseStyles.color.bg.switch.on,":active":{backgroundColor:!disabled&&clickable?baseStyles.color.bg.switch.activeOn:undefined,...focusStylesObject,outline:clickable?focusStylesObject.outline:"none"},...sharedSwitchStyles},slider:{transform:theme.slider.transform.default},icon:{color:disabled?baseStyles.color.bg.icon.disabledOn:baseStyles.color.bg.icon.on,transform:theme.icon.transform.default}};}else {newStyles={switch:{backgroundColor:disabled?baseStyles.color.bg.switch.disabledOff:baseStyles.color.bg.switch.off,":active":{backgroundColor:!disabled&&clickable?baseStyles.color.bg.switch.activeOff:undefined,...focusStylesObject,outline:clickable?focusStylesObject.outline:"none"},...sharedSwitchStyles},slider:{backgroundColor:baseStyles.color.bg.slider.off},icon:{color:disabled?baseStyles.color.bg.icon.disabledOff:baseStyles.color.bg.icon.off}};}styles[checkedStyle]=StyleSheet.create(newStyles);return styles[checkedStyle]};
 
 export { Switch as default };

package/dist/index.js

@@ -4,9 +4,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var aphrodite = require('aphrodite');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
-var wonderBlocksTheming = require('@khanacademy/wonder-blocks-theming');
-var wonderBlocksStyles = require('@khanacademy/wonder-blocks-styles');
 var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
+var wonderBlocksStyles = require('@khanacademy/wonder-blocks-styles');
 
 function _interopNamespace(e) {
     if (e && e.__esModule) return e;
@@ -28,10 +27,10 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-const theme={color:{bg:{switch:{off:wonderBlocksTokens.semanticColor.core.border.neutral.default,disabledOff:wonderBlocksTokens.semanticColor.core.border.disabled.strong,activeOff:wonderBlocksTokens.color.fadedOffBlack64,on:wonderBlocksTokens.semanticColor.core.background.instructive.default,disabledOn:wonderBlocksTokens.semanticColor.core.border.instructive.subtle,activeOn:wonderBlocksTokens.semanticColor.core.background.instructive.strong},slider:{on:wonderBlocksTokens.semanticColor.icon.inverse,off:wonderBlocksTokens.semanticColor.icon.inverse},icon:{on:wonderBlocksTokens.semanticColor.icon.action,disabledOn:wonderBlocksTokens.semanticColor.core.border.instructive.subtle,off:wonderBlocksTokens.semanticColor.core.border.neutral.default,disabledOff:wonderBlocksTokens.semanticColor.icon.disabled}}},border:{radius:{small:wonderBlocksTokens.border.radius.radius_120,full:wonderBlocksTokens.border.radius.radius_full}},size:{height:{none:0,medium:20,large:wonderBlocksTokens.spacing.large_24},width:{none:0,small:wonderBlocksTokens.spacing.xxxxSmall_2,medium:20,large:40}},spacing:{slider:{position:wonderBlocksTokens.spacing.xxxxSmall_2},icon:{position:wonderBlocksTokens.spacing.xxxSmall_4},transform:{default:`translateX(${wonderBlocksTokens.spacing.medium_16}px)`,transition:"transform 0.15s ease-in-out"}}};
+var themeDefault = {root:{border:{radius:{default:wonderBlocksTokens.border.radius.radius_120,hover:wonderBlocksTokens.border.radius.radius_120,press:wonderBlocksTokens.border.radius.radius_120}},sizing:{height:wonderBlocksTokens.sizing.size_240,width:wonderBlocksTokens.sizing.size_400}},slider:{sizing:{height:wonderBlocksTokens.sizing.size_200,width:wonderBlocksTokens.sizing.size_200},position:{top:wonderBlocksTokens.sizing.size_020,left:wonderBlocksTokens.sizing.size_020},transform:{default:`translateX(${wonderBlocksTokens.sizing.size_160})`,transition:"transform 0.15s ease-in-out"}},icon:{position:{top:wonderBlocksTokens.sizing.size_040,left:wonderBlocksTokens.sizing.size_040},transform:{default:`translateX(${wonderBlocksTokens.sizing.size_160})`,transition:"transform 0.15s ease-in-out"}}};
 
-const themes={default:theme};const SwitchThemeContext=wonderBlocksTheming.createThemeContext(theme);function ThemedSwitch(props){const currentTheme=React__namespace.useContext(wonderBlocksTheming.ThemeSwitcherContext);const theme$1=themes[currentTheme]||theme;return jsxRuntime.jsx(SwitchThemeContext.Provider,{value:theme$1,children:props.children})}
+var theme = wonderBlocksTokens.mapValuesToCssVars(themeDefault,"--wb-c-switch-");
 
-const StyledSpan=wonderBlocksCore.addStyle("span");const StyledInput=wonderBlocksCore.addStyle("input");const SwitchCore=React__namespace.forwardRef(function SwitchCore(props,ref){const{"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,"aria-describedby":ariaDescribedBy,checked,className,disabled=false,icon,id,onChange,testId}=props;const generatedUniqueId=React.useId();const uniqueId=id??generatedUniqueId;const{theme,themeName}=wonderBlocksTheming.useScopedTheme(SwitchThemeContext);const sharedStyles=wonderBlocksTheming.useStyles(themedSharedStyles,theme);const handleClick=()=>{if(!disabled&&onChange){onChange(!checked);}};const handleChange=()=>{};const stateStyles=_generateStyles(checked,onChange!==undefined,disabled,theme,themeName);let styledIcon;if(icon){styledIcon=React__namespace.cloneElement(icon,{size:"small",style:[sharedStyles.icon,stateStyles.icon],"aria-hidden":true});}return jsxRuntime.jsxs(wonderBlocksCore.View,{onClick:handleClick,style:[sharedStyles.switch,stateStyles.switch,disabled&&sharedStyles.disabled],className:className,testId:testId,children:[jsxRuntime.jsx(StyledInput,{"aria-describedby":ariaDescribedBy,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,checked:checked,"aria-disabled":disabled,id:uniqueId,onChange:handleChange,ref:ref,role:"switch",style:sharedStyles.hidden,type:"checkbox"}),icon&&styledIcon,jsxRuntime.jsx(StyledSpan,{style:[sharedStyles.slider,stateStyles.slider]})]})});const themedSharedStyles=theme=>({hidden:{opacity:0,height:theme.size.height.none,width:theme.size.width.none},switch:{display:"inline-flex",height:theme.size.height.large,width:theme.size.width.large,borderRadius:theme.border.radius.small,flexShrink:0,":focus-within":wonderBlocksStyles.focusStyles.focus[":focus-visible"]},disabled:{cursor:"not-allowed",":hover":{outline:"none"},":active":{outline:"none"},":focus-within":wonderBlocksStyles.focusStyles.focus[":focus-visible"]},slider:{position:"absolute",top:theme.spacing.slider.position,left:theme.spacing.slider.position,height:theme.size.height.medium,width:theme.size.width.medium,borderRadius:theme.border.radius.full,backgroundColor:theme.color.bg.slider.on,transition:theme.spacing.transform.transition},icon:{position:"absolute",top:theme.spacing.icon.position,left:theme.spacing.icon.position,zIndex:1,transition:theme.spacing.transform.transition}});const focusStylesObject=wonderBlocksStyles.focusStyles.focus[":focus-visible"];const styles={};const _generateStyles=(checked,clickable,disabled,theme,themeName)=>{const checkedStyle=`${checked}-${clickable}-${disabled}-${themeName}`;if(styles[checkedStyle]){return styles[checkedStyle]}let newStyles={};const sharedSwitchStyles={cursor:clickable?"pointer":"auto",":hover":{...focusStylesObject,outline:clickable?focusStylesObject.outline:"none"}};if(checked){newStyles={switch:{backgroundColor:disabled?theme.color.bg.switch.disabledOn:theme.color.bg.switch.on,":active":{backgroundColor:!disabled&&clickable?theme.color.bg.switch.activeOn:undefined,...focusStylesObject,outline:clickable?focusStylesObject.outline:"none"},...sharedSwitchStyles},slider:{transform:theme.spacing.transform.default},icon:{color:disabled?theme.color.bg.icon.disabledOn:theme.color.bg.icon.on,transform:theme.spacing.transform.default}};}else {newStyles={switch:{backgroundColor:disabled?theme.color.bg.switch.disabledOff:theme.color.bg.switch.off,":active":{backgroundColor:!disabled&&clickable?theme.color.bg.switch.activeOff:undefined,...focusStylesObject,outline:clickable?focusStylesObject.outline:"none"},...sharedSwitchStyles},slider:{backgroundColor:theme.color.bg.slider.off},icon:{color:disabled?theme.color.bg.icon.disabledOff:theme.color.bg.icon.off}};}styles[checkedStyle]=aphrodite.StyleSheet.create(newStyles);return styles[checkedStyle]};const Switch=React__namespace.forwardRef(function Switch(props,ref){return jsxRuntime.jsx(ThemedSwitch,{children:jsxRuntime.jsx(SwitchCore,{...props,ref:ref})})});Switch.displayName="Switch";
+const StyledSpan=wonderBlocksCore.addStyle("span");const StyledInput=wonderBlocksCore.addStyle("input");const focusStylesObject=wonderBlocksStyles.focusStyles.focus[":focus-visible"];const baseStyles={color:{bg:{switch:{off:wonderBlocksTokens.semanticColor.core.border.neutral.default,disabledOff:wonderBlocksTokens.semanticColor.core.border.disabled.strong,activeOff:wonderBlocksTokens.semanticColor.core.border.neutral.strong,on:wonderBlocksTokens.semanticColor.core.background.instructive.default,disabledOn:wonderBlocksTokens.semanticColor.core.border.instructive.subtle,activeOn:wonderBlocksTokens.semanticColor.core.background.instructive.strong},slider:{on:wonderBlocksTokens.semanticColor.icon.inverse,off:wonderBlocksTokens.semanticColor.icon.inverse},icon:{on:wonderBlocksTokens.semanticColor.icon.action,disabledOn:wonderBlocksTokens.semanticColor.core.border.instructive.subtle,off:wonderBlocksTokens.semanticColor.core.border.neutral.default,disabledOff:wonderBlocksTokens.semanticColor.icon.disabled}}}};const sharedStyles=aphrodite.StyleSheet.create({hidden:{opacity:0,height:0,width:0},switch:{display:"inline-flex",height:theme.root.sizing.height,width:theme.root.sizing.width,borderRadius:theme.root.border.radius.default,flexShrink:0},switchFocus:{":focus-within":focusStylesObject},disabled:{cursor:"not-allowed",":hover":{outline:"none"},":active":{outline:"none"}},disabledFocus:{":focus-within":focusStylesObject},slider:{position:"absolute",top:theme.slider.position.top,left:theme.slider.position.left,height:theme.slider.sizing.height,width:theme.slider.sizing.width,borderRadius:theme.root.border.radius.default,backgroundColor:baseStyles.color.bg.slider.on,transition:theme.slider.transform.transition},icon:{position:"absolute",top:theme.icon.position.top,left:theme.icon.position.left,zIndex:1,transition:theme.icon.transform.transition}});const Switch=React__namespace.forwardRef(function Switch(props,ref){const{"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,"aria-describedby":ariaDescribedBy,checked,className,disabled=false,icon,id,onChange,testId}=props;const generatedUniqueId=React.useId();const uniqueId=id??generatedUniqueId;const handleClick=()=>{if(!disabled&&onChange){onChange(!checked);}};const handleChange=()=>{};const stateStyles=_generateStyles(checked,onChange!==undefined,disabled);const combinedStyles=[sharedStyles.switch,sharedStyles.switchFocus,stateStyles.switch,disabled&&sharedStyles.disabled,disabled&&sharedStyles.disabledFocus];let styledIcon;if(icon){styledIcon=React__namespace.cloneElement(icon,{size:"small",style:[sharedStyles.icon,stateStyles.icon],"aria-hidden":true});}return jsxRuntime.jsxs(wonderBlocksCore.View,{onClick:handleClick,style:combinedStyles,className:className,testId:testId,children:[jsxRuntime.jsx(StyledInput,{"aria-describedby":ariaDescribedBy,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,checked:checked,"aria-disabled":disabled,id:uniqueId,onChange:handleChange,ref:ref,role:"switch",style:sharedStyles.hidden,type:"checkbox"}),icon&&styledIcon,jsxRuntime.jsx(StyledSpan,{style:[sharedStyles.slider,stateStyles.slider]})]})});const styles={};const _generateStyles=(checked,clickable,disabled)=>{const checkedStyle=`${checked}-${clickable}-${disabled}`;if(styles[checkedStyle]){return styles[checkedStyle]}let newStyles={};const sharedSwitchStyles={cursor:clickable?"pointer":"auto",":hover":{...focusStylesObject,outline:clickable?focusStylesObject.outline:"none"}};if(checked){newStyles={switch:{backgroundColor:disabled?baseStyles.color.bg.switch.disabledOn:baseStyles.color.bg.switch.on,":active":{backgroundColor:!disabled&&clickable?baseStyles.color.bg.switch.activeOn:undefined,...focusStylesObject,outline:clickable?focusStylesObject.outline:"none"},...sharedSwitchStyles},slider:{transform:theme.slider.transform.default},icon:{color:disabled?baseStyles.color.bg.icon.disabledOn:baseStyles.color.bg.icon.on,transform:theme.icon.transform.default}};}else {newStyles={switch:{backgroundColor:disabled?baseStyles.color.bg.switch.disabledOff:baseStyles.color.bg.switch.off,":active":{backgroundColor:!disabled&&clickable?baseStyles.color.bg.switch.activeOff:undefined,...focusStylesObject,outline:clickable?focusStylesObject.outline:"none"},...sharedSwitchStyles},slider:{backgroundColor:baseStyles.color.bg.slider.off},icon:{color:disabled?baseStyles.color.bg.icon.disabledOff:baseStyles.color.bg.icon.off}};}styles[checkedStyle]=aphrodite.StyleSheet.create(newStyles);return styles[checkedStyle]};
 
 module.exports = Switch;

package/dist/theme/default.d.ts

@@ -0,0 +1,40 @@
+declare const _default: {
+    root: {
+        border: {
+            radius: {
+                default: string;
+                hover: string;
+                press: string;
+            };
+        };
+        sizing: {
+            height: string;
+            width: string;
+        };
+    };
+    slider: {
+        sizing: {
+            height: string;
+            width: string;
+        };
+        position: {
+            top: string;
+            left: string;
+        };
+        transform: {
+            default: string;
+            transition: string;
+        };
+    };
+    icon: {
+        position: {
+            top: string;
+            left: string;
+        };
+        transform: {
+            default: string;
+            transition: string;
+        };
+    };
+};
+export default _default;

package/dist/theme/index.d.ts

@@ -0,0 +1,40 @@
+declare const _default: {
+    root: {
+        border: {
+            radius: {
+                default: string;
+                hover: string;
+                press: string;
+            };
+        };
+        sizing: {
+            height: string;
+            width: string;
+        };
+    };
+    slider: {
+        sizing: {
+            height: string;
+            width: string;
+        };
+        position: {
+            top: string;
+            left: string;
+        };
+        transform: {
+            default: string;
+            transition: string;
+        };
+    };
+    icon: {
+        position: {
+            top: string;
+            left: string;
+        };
+        transform: {
+            default: string;
+            transition: string;
+        };
+    };
+};
+export default _default;

package/dist/theme/thunderblocks.d.ts

@@ -0,0 +1,40 @@
+declare const _default: {
+    root: {
+        border: {
+            radius: {
+                default: string;
+                hover: string;
+                press: string;
+            };
+        };
+        sizing: {
+            height: string;
+            width: string;
+        };
+    };
+    slider: {
+        sizing: {
+            height: string;
+            width: string;
+        };
+        position: {
+            top: string;
+            left: string;
+        };
+        transform: {
+            default: string;
+            transition: string;
+        };
+    };
+    icon: {
+        position: {
+            top: string;
+            left: string;
+        };
+        transform: {
+            default: string;
+            transition: string;
+        };
+    };
+};
+export default _default;

package/package.json

@@ -1,11 +1,19 @@
 {
   "name": "@khanacademy/wonder-blocks-switch",
-  "version": "3.2.10",
+  "version": "3.3.0",
   "design": "v1",
   "description": "Switch components for Wonder Blocks.",
   "main": "dist/index.js",
   "module": "dist/es/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/es/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles.css": "./dist/css/vars.css"
+  },
   "author": "",
   "license": "MIT",
   "publishConfig": {
@@ -13,10 +21,10 @@
   },
   "dependencies": {
     "@khanacademy/wonder-blocks-core": "12.3.0",
-    "@khanacademy/wonder-blocks-icon": "5.2.0",
-    "@khanacademy/wonder-blocks-styles": "0.2.13",
+    "@khanacademy/wonder-blocks-icon": "5.2.1",
+    "@khanacademy/wonder-blocks-styles": "0.2.14",
     "@khanacademy/wonder-blocks-theming": "3.4.0",
-    "@khanacademy/wonder-blocks-tokens": "10.5.0"
+    "@khanacademy/wonder-blocks-tokens": "10.6.0"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
@@ -26,6 +34,7 @@
     "@khanacademy/wb-dev-build-settings": "3.2.0"
   },
   "scripts": {
+    "build:css": "pnpm exec wonder-blocks-tokens .",
     "test": "echo \"Error: no test specified\" && exit 1"
   }
 }

package/dist/themes/default.d.ts

@@ -1,56 +0,0 @@
-declare const theme: {
-    color: {
-        bg: {
-            switch: {
-                off: string;
-                disabledOff: string;
-                activeOff: string;
-                on: string;
-                disabledOn: string;
-                activeOn: string;
-            };
-            slider: {
-                on: string;
-                off: string;
-            };
-            icon: {
-                on: string;
-                disabledOn: string;
-                off: string;
-                disabledOff: string;
-            };
-        };
-    };
-    border: {
-        radius: {
-            small: string;
-            full: string;
-        };
-    };
-    size: {
-        height: {
-            none: number;
-            medium: number;
-            large: 24;
-        };
-        width: {
-            none: number;
-            small: 2;
-            medium: number;
-            large: number;
-        };
-    };
-    spacing: {
-        slider: {
-            position: 2;
-        };
-        icon: {
-            position: 4;
-        };
-        transform: {
-            default: string;
-            transition: string;
-        };
-    };
-};
-export default theme;

package/dist/themes/themed-switch.d.ts

@@ -1,70 +0,0 @@
-import * as React from "react";
-import defaultTheme from "./default";
-type Props = {
-    children: React.ReactNode;
-};
-export type SwitchThemeContract = typeof defaultTheme;
-/**
- * The context that provides the theme to the Switch component.
- * This is generally consumed via the `useScopedTheme` hook.
- */
-export declare const SwitchThemeContext: React.Context<{
-    color: {
-        bg: {
-            switch: {
-                off: string;
-                disabledOff: string;
-                activeOff: string;
-                on: string;
-                disabledOn: string;
-                activeOn: string;
-            };
-            slider: {
-                on: string;
-                off: string;
-            };
-            icon: {
-                on: string;
-                disabledOn: string;
-                off: string;
-                disabledOff: string;
-            };
-        };
-    };
-    border: {
-        radius: {
-            small: string;
-            full: string;
-        };
-    };
-    size: {
-        height: {
-            none: number;
-            medium: number;
-            large: 24;
-        };
-        width: {
-            none: number;
-            small: 2;
-            medium: number;
-            large: number;
-        };
-    };
-    spacing: {
-        slider: {
-            position: 2;
-        };
-        icon: {
-            position: 4;
-        };
-        transform: {
-            default: string;
-            transition: string;
-        };
-    };
-}>;
-/**
- * ThemedSwitch is a component that provides a theme to the <Switch/> component.
- */
-export default function ThemedSwitch(props: Props): React.JSX.Element;
-export {};