@khanacademy/wonder-blocks-switch 3.2.2 → 3.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/es/index.js +4 -227
  3. package/dist/index.js +4 -230
  4. package/package.json +5 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # @khanacademy/wonder-blocks-switch
2
2
 
3
+ ## 3.2.3
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [b9e4946]
8
+ - @khanacademy/wonder-blocks-tokens@10.0.0
9
+ - @khanacademy/wonder-blocks-styles@0.2.7
10
+ - @khanacademy/wonder-blocks-core@12.2.1
11
+ - @khanacademy/wonder-blocks-icon@5.1.3
12
+ - @khanacademy/wonder-blocks-theming@3.3.0
13
+
3
14
  ## 3.2.2
4
15
 
5
16
  ### Patch Changes
package/dist/es/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import _extends from '@babel/runtime/helpers/extends';
1
+ import { jsx, jsxs } from 'react/jsx-runtime';
2
2
  import * as React from 'react';
3
3
  import { useId } from 'react';
4
4
  import { StyleSheet } from 'aphrodite';
@@ -7,233 +7,10 @@ import { createThemeContext, ThemeSwitcherContext, useScopedTheme, useStyles } f
7
7
  import { focusStyles } from '@khanacademy/wonder-blocks-styles';
8
8
  import { semanticColor, color, border, spacing } from '@khanacademy/wonder-blocks-tokens';
9
9
 
10
- const action = semanticColor.action.secondary.progressive;
11
- const theme = {
12
- color: {
13
- bg: {
14
- switch: {
15
- off: action.default.border,
16
- disabledOff: semanticColor.action.primary.disabled.background,
17
- activeOff: color.fadedOffBlack64,
18
- on: action.default.foreground,
19
- disabledOn: action.press.background,
20
- activeOn: action.press.foreground
21
- },
22
- slider: {
23
- on: semanticColor.icon.inverse,
24
- off: semanticColor.icon.inverse
25
- },
26
- icon: {
27
- on: action.default.foreground,
28
- disabledOn: action.press.background,
29
- off: action.default.border,
30
- disabledOff: semanticColor.icon.disabled
31
- }
32
- }
33
- },
34
- border: {
35
- radius: {
36
- small: border.radius.radius_120,
37
- full: border.radius.radius_full
38
- }
39
- },
40
- size: {
41
- height: {
42
- none: 0,
43
- medium: 20,
44
- large: spacing.large_24
45
- },
46
- width: {
47
- none: 0,
48
- small: spacing.xxxxSmall_2,
49
- medium: 20,
50
- large: 40
51
- }
52
- },
53
- spacing: {
54
- slider: {
55
- position: spacing.xxxxSmall_2
56
- },
57
- icon: {
58
- position: spacing.xxxSmall_4
59
- },
60
- transform: {
61
- default: `translateX(${spacing.medium_16}px)`,
62
- transition: "transform 0.15s ease-in-out"
63
- }
64
- }
65
- };
10
+ const action=semanticColor.action.secondary.progressive;const theme={color:{bg:{switch:{off:action.default.border,disabledOff:semanticColor.action.primary.disabled.background,activeOff:color.fadedOffBlack64,on:action.default.foreground,disabledOn:action.press.background,activeOn:action.press.foreground},slider:{on:semanticColor.icon.inverse,off:semanticColor.icon.inverse},icon:{on:action.default.foreground,disabledOn:action.press.background,off:action.default.border,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"}}};
66
11
 
67
- const themes = {
68
- default: theme
69
- };
70
- const SwitchThemeContext = createThemeContext(theme);
71
- function ThemedSwitch(props) {
72
- const currentTheme = React.useContext(ThemeSwitcherContext);
73
- const theme$1 = themes[currentTheme] || theme;
74
- return React.createElement(SwitchThemeContext.Provider, {
75
- value: theme$1
76
- }, props.children);
77
- }
12
+ 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})}
78
13
 
79
- const StyledSpan = addStyle("span");
80
- const StyledInput = addStyle("input");
81
- const SwitchCore = React.forwardRef(function SwitchCore(props, ref) {
82
- const {
83
- "aria-label": ariaLabel,
84
- "aria-labelledby": ariaLabelledBy,
85
- "aria-describedby": ariaDescribedBy,
86
- checked,
87
- className,
88
- disabled = false,
89
- icon,
90
- id,
91
- onChange,
92
- testId
93
- } = props;
94
- const generatedUniqueId = useId();
95
- const uniqueId = id != null ? id : generatedUniqueId;
96
- const {
97
- theme,
98
- themeName
99
- } = useScopedTheme(SwitchThemeContext);
100
- const sharedStyles = useStyles(themedSharedStyles, theme);
101
- const handleClick = () => {
102
- if (!disabled && onChange) {
103
- onChange(!checked);
104
- }
105
- };
106
- const handleChange = () => {};
107
- const stateStyles = _generateStyles(checked, onChange !== undefined, disabled, theme, themeName);
108
- let styledIcon;
109
- if (icon) {
110
- styledIcon = React.cloneElement(icon, {
111
- size: "small",
112
- style: [sharedStyles.icon, stateStyles.icon],
113
- "aria-hidden": true
114
- });
115
- }
116
- return React.createElement(View, {
117
- onClick: handleClick,
118
- style: [sharedStyles.switch, stateStyles.switch, disabled && sharedStyles.disabled],
119
- className: className,
120
- testId: testId
121
- }, React.createElement(StyledInput, {
122
- "aria-describedby": ariaDescribedBy,
123
- "aria-label": ariaLabel,
124
- "aria-labelledby": ariaLabelledBy,
125
- checked: checked,
126
- "aria-disabled": disabled,
127
- id: uniqueId,
128
- onChange: handleChange,
129
- ref: ref,
130
- role: "switch",
131
- style: sharedStyles.hidden,
132
- type: "checkbox"
133
- }), icon && styledIcon, React.createElement(StyledSpan, {
134
- style: [sharedStyles.slider, stateStyles.slider]
135
- }));
136
- });
137
- const themedSharedStyles = theme => ({
138
- hidden: {
139
- opacity: 0,
140
- height: theme.size.height.none,
141
- width: theme.size.width.none
142
- },
143
- switch: {
144
- display: "inline-flex",
145
- height: theme.size.height.large,
146
- width: theme.size.width.large,
147
- borderRadius: theme.border.radius.small,
148
- flexShrink: 0,
149
- ":focus-within": focusStyles.focus[":focus-visible"]
150
- },
151
- disabled: {
152
- cursor: "not-allowed",
153
- ":hover": {
154
- outline: "none"
155
- },
156
- ":active": {
157
- outline: "none"
158
- },
159
- ":focus-within": focusStyles.focus[":focus-visible"]
160
- },
161
- slider: {
162
- position: "absolute",
163
- top: theme.spacing.slider.position,
164
- left: theme.spacing.slider.position,
165
- height: theme.size.height.medium,
166
- width: theme.size.width.medium,
167
- borderRadius: theme.border.radius.full,
168
- backgroundColor: theme.color.bg.slider.on,
169
- transition: theme.spacing.transform.transition
170
- },
171
- icon: {
172
- position: "absolute",
173
- top: theme.spacing.icon.position,
174
- left: theme.spacing.icon.position,
175
- zIndex: 1,
176
- transition: theme.spacing.transform.transition
177
- }
178
- });
179
- const focusStylesObject = focusStyles.focus[":focus-visible"];
180
- const styles = {};
181
- const _generateStyles = (checked, clickable, disabled, theme, themeName) => {
182
- const checkedStyle = `${checked}-${clickable}-${disabled}-${themeName}`;
183
- if (styles[checkedStyle]) {
184
- return styles[checkedStyle];
185
- }
186
- let newStyles = {};
187
- const sharedSwitchStyles = {
188
- cursor: clickable ? "pointer" : "auto",
189
- ":hover": _extends({}, focusStylesObject, {
190
- outline: clickable ? focusStylesObject.outline : "none"
191
- })
192
- };
193
- if (checked) {
194
- newStyles = {
195
- switch: _extends({
196
- backgroundColor: disabled ? theme.color.bg.switch.disabledOn : theme.color.bg.switch.on,
197
- ":active": _extends({
198
- backgroundColor: !disabled && clickable ? theme.color.bg.switch.activeOn : undefined
199
- }, focusStylesObject, {
200
- outline: clickable ? focusStylesObject.outline : "none"
201
- })
202
- }, sharedSwitchStyles),
203
- slider: {
204
- transform: theme.spacing.transform.default
205
- },
206
- icon: {
207
- color: disabled ? theme.color.bg.icon.disabledOn : theme.color.bg.icon.on,
208
- transform: theme.spacing.transform.default
209
- }
210
- };
211
- } else {
212
- newStyles = {
213
- switch: _extends({
214
- backgroundColor: disabled ? theme.color.bg.switch.disabledOff : theme.color.bg.switch.off,
215
- ":active": _extends({
216
- backgroundColor: !disabled && clickable ? theme.color.bg.switch.activeOff : undefined
217
- }, focusStylesObject, {
218
- outline: clickable ? focusStylesObject.outline : "none"
219
- })
220
- }, sharedSwitchStyles),
221
- slider: {
222
- backgroundColor: theme.color.bg.slider.off
223
- },
224
- icon: {
225
- color: disabled ? theme.color.bg.icon.disabledOff : theme.color.bg.icon.off
226
- }
227
- };
228
- }
229
- styles[checkedStyle] = StyleSheet.create(newStyles);
230
- return styles[checkedStyle];
231
- };
232
- const Switch = React.forwardRef(function Switch(props, ref) {
233
- return React.createElement(ThemedSwitch, null, React.createElement(SwitchCore, _extends({}, props, {
234
- ref: ref
235
- })));
236
- });
237
- Switch.displayName = "Switch";
14
+ 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";
238
15
 
239
16
  export { Switch as default };
package/dist/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var _extends = require('@babel/runtime/helpers/extends');
3
+ var jsxRuntime = require('react/jsx-runtime');
4
4
  var React = require('react');
5
5
  var aphrodite = require('aphrodite');
6
6
  var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
@@ -8,8 +8,6 @@ var wonderBlocksTheming = require('@khanacademy/wonder-blocks-theming');
8
8
  var wonderBlocksStyles = require('@khanacademy/wonder-blocks-styles');
9
9
  var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
10
10
 
11
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
12
-
13
11
  function _interopNamespace(e) {
14
12
  if (e && e.__esModule) return e;
15
13
  var n = Object.create(null);
@@ -28,236 +26,12 @@ function _interopNamespace(e) {
28
26
  return Object.freeze(n);
29
27
  }
30
28
 
31
- var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
32
29
  var React__namespace = /*#__PURE__*/_interopNamespace(React);
33
30
 
34
- const action = wonderBlocksTokens.semanticColor.action.secondary.progressive;
35
- const theme = {
36
- color: {
37
- bg: {
38
- switch: {
39
- off: action.default.border,
40
- disabledOff: wonderBlocksTokens.semanticColor.action.primary.disabled.background,
41
- activeOff: wonderBlocksTokens.color.fadedOffBlack64,
42
- on: action.default.foreground,
43
- disabledOn: action.press.background,
44
- activeOn: action.press.foreground
45
- },
46
- slider: {
47
- on: wonderBlocksTokens.semanticColor.icon.inverse,
48
- off: wonderBlocksTokens.semanticColor.icon.inverse
49
- },
50
- icon: {
51
- on: action.default.foreground,
52
- disabledOn: action.press.background,
53
- off: action.default.border,
54
- disabledOff: wonderBlocksTokens.semanticColor.icon.disabled
55
- }
56
- }
57
- },
58
- border: {
59
- radius: {
60
- small: wonderBlocksTokens.border.radius.radius_120,
61
- full: wonderBlocksTokens.border.radius.radius_full
62
- }
63
- },
64
- size: {
65
- height: {
66
- none: 0,
67
- medium: 20,
68
- large: wonderBlocksTokens.spacing.large_24
69
- },
70
- width: {
71
- none: 0,
72
- small: wonderBlocksTokens.spacing.xxxxSmall_2,
73
- medium: 20,
74
- large: 40
75
- }
76
- },
77
- spacing: {
78
- slider: {
79
- position: wonderBlocksTokens.spacing.xxxxSmall_2
80
- },
81
- icon: {
82
- position: wonderBlocksTokens.spacing.xxxSmall_4
83
- },
84
- transform: {
85
- default: `translateX(${wonderBlocksTokens.spacing.medium_16}px)`,
86
- transition: "transform 0.15s ease-in-out"
87
- }
88
- }
89
- };
31
+ const action=wonderBlocksTokens.semanticColor.action.secondary.progressive;const theme={color:{bg:{switch:{off:action.default.border,disabledOff:wonderBlocksTokens.semanticColor.action.primary.disabled.background,activeOff:wonderBlocksTokens.color.fadedOffBlack64,on:action.default.foreground,disabledOn:action.press.background,activeOn:action.press.foreground},slider:{on:wonderBlocksTokens.semanticColor.icon.inverse,off:wonderBlocksTokens.semanticColor.icon.inverse},icon:{on:action.default.foreground,disabledOn:action.press.background,off:action.default.border,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"}}};
90
32
 
91
- const themes = {
92
- default: theme
93
- };
94
- const SwitchThemeContext = wonderBlocksTheming.createThemeContext(theme);
95
- function ThemedSwitch(props) {
96
- const currentTheme = React__namespace.useContext(wonderBlocksTheming.ThemeSwitcherContext);
97
- const theme$1 = themes[currentTheme] || theme;
98
- return React__namespace.createElement(SwitchThemeContext.Provider, {
99
- value: theme$1
100
- }, props.children);
101
- }
33
+ 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})}
102
34
 
103
- const StyledSpan = wonderBlocksCore.addStyle("span");
104
- const StyledInput = wonderBlocksCore.addStyle("input");
105
- const SwitchCore = React__namespace.forwardRef(function SwitchCore(props, ref) {
106
- const {
107
- "aria-label": ariaLabel,
108
- "aria-labelledby": ariaLabelledBy,
109
- "aria-describedby": ariaDescribedBy,
110
- checked,
111
- className,
112
- disabled = false,
113
- icon,
114
- id,
115
- onChange,
116
- testId
117
- } = props;
118
- const generatedUniqueId = React.useId();
119
- const uniqueId = id != null ? id : generatedUniqueId;
120
- const {
121
- theme,
122
- themeName
123
- } = wonderBlocksTheming.useScopedTheme(SwitchThemeContext);
124
- const sharedStyles = wonderBlocksTheming.useStyles(themedSharedStyles, theme);
125
- const handleClick = () => {
126
- if (!disabled && onChange) {
127
- onChange(!checked);
128
- }
129
- };
130
- const handleChange = () => {};
131
- const stateStyles = _generateStyles(checked, onChange !== undefined, disabled, theme, themeName);
132
- let styledIcon;
133
- if (icon) {
134
- styledIcon = React__namespace.cloneElement(icon, {
135
- size: "small",
136
- style: [sharedStyles.icon, stateStyles.icon],
137
- "aria-hidden": true
138
- });
139
- }
140
- return React__namespace.createElement(wonderBlocksCore.View, {
141
- onClick: handleClick,
142
- style: [sharedStyles.switch, stateStyles.switch, disabled && sharedStyles.disabled],
143
- className: className,
144
- testId: testId
145
- }, React__namespace.createElement(StyledInput, {
146
- "aria-describedby": ariaDescribedBy,
147
- "aria-label": ariaLabel,
148
- "aria-labelledby": ariaLabelledBy,
149
- checked: checked,
150
- "aria-disabled": disabled,
151
- id: uniqueId,
152
- onChange: handleChange,
153
- ref: ref,
154
- role: "switch",
155
- style: sharedStyles.hidden,
156
- type: "checkbox"
157
- }), icon && styledIcon, React__namespace.createElement(StyledSpan, {
158
- style: [sharedStyles.slider, stateStyles.slider]
159
- }));
160
- });
161
- const themedSharedStyles = theme => ({
162
- hidden: {
163
- opacity: 0,
164
- height: theme.size.height.none,
165
- width: theme.size.width.none
166
- },
167
- switch: {
168
- display: "inline-flex",
169
- height: theme.size.height.large,
170
- width: theme.size.width.large,
171
- borderRadius: theme.border.radius.small,
172
- flexShrink: 0,
173
- ":focus-within": wonderBlocksStyles.focusStyles.focus[":focus-visible"]
174
- },
175
- disabled: {
176
- cursor: "not-allowed",
177
- ":hover": {
178
- outline: "none"
179
- },
180
- ":active": {
181
- outline: "none"
182
- },
183
- ":focus-within": wonderBlocksStyles.focusStyles.focus[":focus-visible"]
184
- },
185
- slider: {
186
- position: "absolute",
187
- top: theme.spacing.slider.position,
188
- left: theme.spacing.slider.position,
189
- height: theme.size.height.medium,
190
- width: theme.size.width.medium,
191
- borderRadius: theme.border.radius.full,
192
- backgroundColor: theme.color.bg.slider.on,
193
- transition: theme.spacing.transform.transition
194
- },
195
- icon: {
196
- position: "absolute",
197
- top: theme.spacing.icon.position,
198
- left: theme.spacing.icon.position,
199
- zIndex: 1,
200
- transition: theme.spacing.transform.transition
201
- }
202
- });
203
- const focusStylesObject = wonderBlocksStyles.focusStyles.focus[":focus-visible"];
204
- const styles = {};
205
- const _generateStyles = (checked, clickable, disabled, theme, themeName) => {
206
- const checkedStyle = `${checked}-${clickable}-${disabled}-${themeName}`;
207
- if (styles[checkedStyle]) {
208
- return styles[checkedStyle];
209
- }
210
- let newStyles = {};
211
- const sharedSwitchStyles = {
212
- cursor: clickable ? "pointer" : "auto",
213
- ":hover": _extends__default["default"]({}, focusStylesObject, {
214
- outline: clickable ? focusStylesObject.outline : "none"
215
- })
216
- };
217
- if (checked) {
218
- newStyles = {
219
- switch: _extends__default["default"]({
220
- backgroundColor: disabled ? theme.color.bg.switch.disabledOn : theme.color.bg.switch.on,
221
- ":active": _extends__default["default"]({
222
- backgroundColor: !disabled && clickable ? theme.color.bg.switch.activeOn : undefined
223
- }, focusStylesObject, {
224
- outline: clickable ? focusStylesObject.outline : "none"
225
- })
226
- }, sharedSwitchStyles),
227
- slider: {
228
- transform: theme.spacing.transform.default
229
- },
230
- icon: {
231
- color: disabled ? theme.color.bg.icon.disabledOn : theme.color.bg.icon.on,
232
- transform: theme.spacing.transform.default
233
- }
234
- };
235
- } else {
236
- newStyles = {
237
- switch: _extends__default["default"]({
238
- backgroundColor: disabled ? theme.color.bg.switch.disabledOff : theme.color.bg.switch.off,
239
- ":active": _extends__default["default"]({
240
- backgroundColor: !disabled && clickable ? theme.color.bg.switch.activeOff : undefined
241
- }, focusStylesObject, {
242
- outline: clickable ? focusStylesObject.outline : "none"
243
- })
244
- }, sharedSwitchStyles),
245
- slider: {
246
- backgroundColor: theme.color.bg.slider.off
247
- },
248
- icon: {
249
- color: disabled ? theme.color.bg.icon.disabledOff : theme.color.bg.icon.off
250
- }
251
- };
252
- }
253
- styles[checkedStyle] = aphrodite.StyleSheet.create(newStyles);
254
- return styles[checkedStyle];
255
- };
256
- const Switch = React__namespace.forwardRef(function Switch(props, ref) {
257
- return React__namespace.createElement(ThemedSwitch, null, React__namespace.createElement(SwitchCore, _extends__default["default"]({}, props, {
258
- ref: ref
259
- })));
260
- });
261
- Switch.displayName = "Switch";
35
+ 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";
262
36
 
263
37
  module.exports = Switch;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-switch",
3
- "version": "3.2.2",
3
+ "version": "3.2.3",
4
4
  "design": "v1",
5
5
  "description": "Switch components for Wonder Blocks.",
6
6
  "main": "dist/index.js",
@@ -12,19 +12,18 @@
12
12
  "access": "public"
13
13
  },
14
14
  "dependencies": {
15
- "@babel/runtime": "^7.24.5",
16
- "@khanacademy/wonder-blocks-core": "12.2.1",
17
15
  "@khanacademy/wonder-blocks-icon": "5.1.3",
18
- "@khanacademy/wonder-blocks-styles": "0.2.6",
16
+ "@khanacademy/wonder-blocks-core": "12.2.1",
17
+ "@khanacademy/wonder-blocks-styles": "0.2.7",
19
18
  "@khanacademy/wonder-blocks-theming": "3.3.0",
20
- "@khanacademy/wonder-blocks-tokens": "9.0.0"
19
+ "@khanacademy/wonder-blocks-tokens": "10.0.0"
21
20
  },
22
21
  "peerDependencies": {
23
22
  "aphrodite": "^1.2.5",
24
23
  "react": "18.2.0"
25
24
  },
26
25
  "devDependencies": {
27
- "@khanacademy/wb-dev-build-settings": "2.1.1"
26
+ "@khanacademy/wb-dev-build-settings": "3.0.0"
28
27
  },
29
28
  "scripts": {
30
29
  "test": "echo \"Error: no test specified\" && exit 1"