@khanacademy/wonder-blocks-switch 3.2.10 → 3.3.1
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.
- package/.turbo/turbo-build$colon$css.log +5 -0
- package/CHANGELOG.md +25 -0
- package/dist/css/vars.css +31 -0
- package/dist/es/index.js +5 -6
- package/dist/index.js +4 -5
- package/dist/theme/default.d.ts +40 -0
- package/dist/theme/index.d.ts +40 -0
- package/dist/theme/thunderblocks.d.ts +40 -0
- package/package.json +13 -4
- package/dist/themes/default.d.ts +0 -56
- package/dist/themes/themed-switch.d.ts +0 -70
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
|
|
2
|
+
> @khanacademy/wonder-blocks-switch@3.3.1 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-switch
|
|
3
|
+
> pnpm exec wonder-blocks-tokens .
|
|
4
|
+
|
|
5
|
+
CSS variables generated successfully in: /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-switch/dist/css
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,30 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-switch
|
|
2
2
|
|
|
3
|
+
## 3.3.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [1ac2ba7]
|
|
8
|
+
- Updated dependencies [0cb7a69]
|
|
9
|
+
- Updated dependencies [cbf58b0]
|
|
10
|
+
- Updated dependencies [cbf58b0]
|
|
11
|
+
- @khanacademy/wonder-blocks-tokens@11.0.0
|
|
12
|
+
- @khanacademy/wonder-blocks-icon@5.2.2
|
|
13
|
+
- @khanacademy/wonder-blocks-styles@0.2.15
|
|
14
|
+
|
|
15
|
+
## 3.3.0
|
|
16
|
+
|
|
17
|
+
### Minor Changes
|
|
18
|
+
|
|
19
|
+
- e8fc6e4: Add support for Thunderblocks theming
|
|
20
|
+
|
|
21
|
+
### Patch Changes
|
|
22
|
+
|
|
23
|
+
- Updated dependencies [7811eb1]
|
|
24
|
+
- @khanacademy/wonder-blocks-tokens@10.6.0
|
|
25
|
+
- @khanacademy/wonder-blocks-icon@5.2.1
|
|
26
|
+
- @khanacademy/wonder-blocks-styles@0.2.14
|
|
27
|
+
|
|
3
28
|
## 3.2.10
|
|
4
29
|
|
|
5
30
|
### Patch Changes
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
:root {--wb-c-switch-root-border-radius-default: var(--wb-border-radius-radius_120);
|
|
2
|
+
--wb-c-switch-root-border-radius-hover: var(--wb-border-radius-radius_120);
|
|
3
|
+
--wb-c-switch-root-border-radius-press: var(--wb-border-radius-radius_120);
|
|
4
|
+
--wb-c-switch-root-sizing-height: var(--wb-sizing-size_240);
|
|
5
|
+
--wb-c-switch-root-sizing-width: var(--wb-sizing-size_400);
|
|
6
|
+
--wb-c-switch-slider-sizing-height: var(--wb-sizing-size_200);
|
|
7
|
+
--wb-c-switch-slider-sizing-width: var(--wb-sizing-size_200);
|
|
8
|
+
--wb-c-switch-slider-position-top: var(--wb-sizing-size_020);
|
|
9
|
+
--wb-c-switch-slider-position-left: var(--wb-sizing-size_020);
|
|
10
|
+
--wb-c-switch-slider-transform-default: translateX(var(--wb-sizing-size_160));
|
|
11
|
+
--wb-c-switch-slider-transform-transition: transform 0.15s ease-in-out;
|
|
12
|
+
--wb-c-switch-icon-position-top: var(--wb-sizing-size_040);
|
|
13
|
+
--wb-c-switch-icon-position-left: var(--wb-sizing-size_040);
|
|
14
|
+
--wb-c-switch-icon-transform-default: translateX(var(--wb-sizing-size_160));
|
|
15
|
+
--wb-c-switch-icon-transform-transition: transform 0.15s ease-in-out;}
|
|
16
|
+
|
|
17
|
+
[data-wb-theme='thunderblocks'] {--wb-c-switch-root-border-radius-default: var(--wb-border-radius-radius_240);
|
|
18
|
+
--wb-c-switch-root-border-radius-hover: var(--wb-border-radius-radius_120);
|
|
19
|
+
--wb-c-switch-root-border-radius-press: var(--wb-border-radius-radius_120);
|
|
20
|
+
--wb-c-switch-root-sizing-height: var(--wb-sizing-size_240);
|
|
21
|
+
--wb-c-switch-root-sizing-width: var(--wb-sizing-size_440);
|
|
22
|
+
--wb-c-switch-slider-sizing-height: var(--wb-sizing-size_200);
|
|
23
|
+
--wb-c-switch-slider-sizing-width: var(--wb-sizing-size_200);
|
|
24
|
+
--wb-c-switch-slider-position-top: var(--wb-sizing-size_020);
|
|
25
|
+
--wb-c-switch-slider-position-left: var(--wb-sizing-size_020);
|
|
26
|
+
--wb-c-switch-slider-transform-default: translateX(var(--wb-sizing-size_200));
|
|
27
|
+
--wb-c-switch-slider-transform-transition: transform 0.15s ease-in-out;
|
|
28
|
+
--wb-c-switch-icon-position-top: var(--wb-sizing-size_040);
|
|
29
|
+
--wb-c-switch-icon-position-left: var(--wb-sizing-size_040);
|
|
30
|
+
--wb-c-switch-icon-transform-default: translateX(var(--wb-sizing-size_200));
|
|
31
|
+
--wb-c-switch-icon-transform-transition: transform 0.15s ease-in-out;}
|
package/dist/es/index.js
CHANGED
|
@@ -1,16 +1,15 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { useId } from 'react';
|
|
4
4
|
import { StyleSheet } from 'aphrodite';
|
|
5
5
|
import { addStyle, View } from '@khanacademy/wonder-blocks-core';
|
|
6
|
-
import {
|
|
6
|
+
import { border, sizing, mapValuesToCssVars, semanticColor } from '@khanacademy/wonder-blocks-tokens';
|
|
7
7
|
import { focusStyles } from '@khanacademy/wonder-blocks-styles';
|
|
8
|
-
import { semanticColor, color, border, spacing } from '@khanacademy/wonder-blocks-tokens';
|
|
9
8
|
|
|
10
|
-
|
|
9
|
+
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"}}};
|
|
11
10
|
|
|
12
|
-
|
|
11
|
+
var theme = mapValuesToCssVars(themeDefault,"--wb-c-switch-");
|
|
13
12
|
|
|
14
|
-
const StyledSpan=addStyle("span");const StyledInput=addStyle("input");const
|
|
13
|
+
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]};
|
|
15
14
|
|
|
16
15
|
export { Switch as default };
|
package/dist/index.js
CHANGED
|
@@ -4,9 +4,8 @@ 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');
|
|
7
|
-
var wonderBlocksTheming = require('@khanacademy/wonder-blocks-theming');
|
|
8
|
-
var wonderBlocksStyles = require('@khanacademy/wonder-blocks-styles');
|
|
9
7
|
var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
|
|
8
|
+
var wonderBlocksStyles = require('@khanacademy/wonder-blocks-styles');
|
|
10
9
|
|
|
11
10
|
function _interopNamespace(e) {
|
|
12
11
|
if (e && e.__esModule) return e;
|
|
@@ -28,10 +27,10 @@ function _interopNamespace(e) {
|
|
|
28
27
|
|
|
29
28
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
30
29
|
|
|
31
|
-
|
|
30
|
+
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"}}};
|
|
32
31
|
|
|
33
|
-
|
|
32
|
+
var theme = wonderBlocksTokens.mapValuesToCssVars(themeDefault,"--wb-c-switch-");
|
|
34
33
|
|
|
35
|
-
const StyledSpan=wonderBlocksCore.addStyle("span");const StyledInput=wonderBlocksCore.addStyle("input");const
|
|
34
|
+
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]};
|
|
36
35
|
|
|
37
36
|
module.exports = Switch;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
declare const _default: {
|
|
2
|
+
root: {
|
|
3
|
+
border: {
|
|
4
|
+
radius: {
|
|
5
|
+
default: string;
|
|
6
|
+
hover: string;
|
|
7
|
+
press: string;
|
|
8
|
+
};
|
|
9
|
+
};
|
|
10
|
+
sizing: {
|
|
11
|
+
height: string;
|
|
12
|
+
width: string;
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
slider: {
|
|
16
|
+
sizing: {
|
|
17
|
+
height: string;
|
|
18
|
+
width: string;
|
|
19
|
+
};
|
|
20
|
+
position: {
|
|
21
|
+
top: string;
|
|
22
|
+
left: string;
|
|
23
|
+
};
|
|
24
|
+
transform: {
|
|
25
|
+
default: string;
|
|
26
|
+
transition: string;
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
icon: {
|
|
30
|
+
position: {
|
|
31
|
+
top: string;
|
|
32
|
+
left: string;
|
|
33
|
+
};
|
|
34
|
+
transform: {
|
|
35
|
+
default: string;
|
|
36
|
+
transition: string;
|
|
37
|
+
};
|
|
38
|
+
};
|
|
39
|
+
};
|
|
40
|
+
export default _default;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
declare const _default: {
|
|
2
|
+
root: {
|
|
3
|
+
border: {
|
|
4
|
+
radius: {
|
|
5
|
+
default: string;
|
|
6
|
+
hover: string;
|
|
7
|
+
press: string;
|
|
8
|
+
};
|
|
9
|
+
};
|
|
10
|
+
sizing: {
|
|
11
|
+
height: string;
|
|
12
|
+
width: string;
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
slider: {
|
|
16
|
+
sizing: {
|
|
17
|
+
height: string;
|
|
18
|
+
width: string;
|
|
19
|
+
};
|
|
20
|
+
position: {
|
|
21
|
+
top: string;
|
|
22
|
+
left: string;
|
|
23
|
+
};
|
|
24
|
+
transform: {
|
|
25
|
+
default: string;
|
|
26
|
+
transition: string;
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
icon: {
|
|
30
|
+
position: {
|
|
31
|
+
top: string;
|
|
32
|
+
left: string;
|
|
33
|
+
};
|
|
34
|
+
transform: {
|
|
35
|
+
default: string;
|
|
36
|
+
transition: string;
|
|
37
|
+
};
|
|
38
|
+
};
|
|
39
|
+
};
|
|
40
|
+
export default _default;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
declare const _default: {
|
|
2
|
+
root: {
|
|
3
|
+
border: {
|
|
4
|
+
radius: {
|
|
5
|
+
default: string;
|
|
6
|
+
hover: string;
|
|
7
|
+
press: string;
|
|
8
|
+
};
|
|
9
|
+
};
|
|
10
|
+
sizing: {
|
|
11
|
+
height: string;
|
|
12
|
+
width: string;
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
slider: {
|
|
16
|
+
sizing: {
|
|
17
|
+
height: string;
|
|
18
|
+
width: string;
|
|
19
|
+
};
|
|
20
|
+
position: {
|
|
21
|
+
top: string;
|
|
22
|
+
left: string;
|
|
23
|
+
};
|
|
24
|
+
transform: {
|
|
25
|
+
default: string;
|
|
26
|
+
transition: string;
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
icon: {
|
|
30
|
+
position: {
|
|
31
|
+
top: string;
|
|
32
|
+
left: string;
|
|
33
|
+
};
|
|
34
|
+
transform: {
|
|
35
|
+
default: string;
|
|
36
|
+
transition: string;
|
|
37
|
+
};
|
|
38
|
+
};
|
|
39
|
+
};
|
|
40
|
+
export default _default;
|
package/package.json
CHANGED
|
@@ -1,11 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khanacademy/wonder-blocks-switch",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.3.1",
|
|
4
4
|
"design": "v1",
|
|
5
5
|
"description": "Switch components for Wonder Blocks.",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/es/index.js",
|
|
8
8
|
"types": "dist/index.d.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"import": "./dist/es/index.js",
|
|
12
|
+
"require": "./dist/index.js",
|
|
13
|
+
"types": "./dist/index.d.ts"
|
|
14
|
+
},
|
|
15
|
+
"./styles.css": "./dist/css/vars.css"
|
|
16
|
+
},
|
|
9
17
|
"author": "",
|
|
10
18
|
"license": "MIT",
|
|
11
19
|
"publishConfig": {
|
|
@@ -13,10 +21,10 @@
|
|
|
13
21
|
},
|
|
14
22
|
"dependencies": {
|
|
15
23
|
"@khanacademy/wonder-blocks-core": "12.3.0",
|
|
16
|
-
"@khanacademy/wonder-blocks-icon": "5.2.
|
|
17
|
-
"@khanacademy/wonder-blocks-styles": "0.2.
|
|
24
|
+
"@khanacademy/wonder-blocks-icon": "5.2.2",
|
|
25
|
+
"@khanacademy/wonder-blocks-styles": "0.2.15",
|
|
18
26
|
"@khanacademy/wonder-blocks-theming": "3.4.0",
|
|
19
|
-
"@khanacademy/wonder-blocks-tokens": "
|
|
27
|
+
"@khanacademy/wonder-blocks-tokens": "11.0.0"
|
|
20
28
|
},
|
|
21
29
|
"peerDependencies": {
|
|
22
30
|
"aphrodite": "^1.2.5",
|
|
@@ -26,6 +34,7 @@
|
|
|
26
34
|
"@khanacademy/wb-dev-build-settings": "3.2.0"
|
|
27
35
|
},
|
|
28
36
|
"scripts": {
|
|
37
|
+
"build:css": "pnpm exec wonder-blocks-tokens .",
|
|
29
38
|
"test": "echo \"Error: no test specified\" && exit 1"
|
|
30
39
|
}
|
|
31
40
|
}
|
package/dist/themes/default.d.ts
DELETED
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
declare const theme: {
|
|
2
|
-
color: {
|
|
3
|
-
bg: {
|
|
4
|
-
switch: {
|
|
5
|
-
off: string;
|
|
6
|
-
disabledOff: string;
|
|
7
|
-
activeOff: string;
|
|
8
|
-
on: string;
|
|
9
|
-
disabledOn: string;
|
|
10
|
-
activeOn: string;
|
|
11
|
-
};
|
|
12
|
-
slider: {
|
|
13
|
-
on: string;
|
|
14
|
-
off: string;
|
|
15
|
-
};
|
|
16
|
-
icon: {
|
|
17
|
-
on: string;
|
|
18
|
-
disabledOn: string;
|
|
19
|
-
off: string;
|
|
20
|
-
disabledOff: string;
|
|
21
|
-
};
|
|
22
|
-
};
|
|
23
|
-
};
|
|
24
|
-
border: {
|
|
25
|
-
radius: {
|
|
26
|
-
small: string;
|
|
27
|
-
full: string;
|
|
28
|
-
};
|
|
29
|
-
};
|
|
30
|
-
size: {
|
|
31
|
-
height: {
|
|
32
|
-
none: number;
|
|
33
|
-
medium: number;
|
|
34
|
-
large: 24;
|
|
35
|
-
};
|
|
36
|
-
width: {
|
|
37
|
-
none: number;
|
|
38
|
-
small: 2;
|
|
39
|
-
medium: number;
|
|
40
|
-
large: number;
|
|
41
|
-
};
|
|
42
|
-
};
|
|
43
|
-
spacing: {
|
|
44
|
-
slider: {
|
|
45
|
-
position: 2;
|
|
46
|
-
};
|
|
47
|
-
icon: {
|
|
48
|
-
position: 4;
|
|
49
|
-
};
|
|
50
|
-
transform: {
|
|
51
|
-
default: string;
|
|
52
|
-
transition: string;
|
|
53
|
-
};
|
|
54
|
-
};
|
|
55
|
-
};
|
|
56
|
-
export default theme;
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import defaultTheme from "./default";
|
|
3
|
-
type Props = {
|
|
4
|
-
children: React.ReactNode;
|
|
5
|
-
};
|
|
6
|
-
export type SwitchThemeContract = typeof defaultTheme;
|
|
7
|
-
/**
|
|
8
|
-
* The context that provides the theme to the Switch component.
|
|
9
|
-
* This is generally consumed via the `useScopedTheme` hook.
|
|
10
|
-
*/
|
|
11
|
-
export declare const SwitchThemeContext: React.Context<{
|
|
12
|
-
color: {
|
|
13
|
-
bg: {
|
|
14
|
-
switch: {
|
|
15
|
-
off: string;
|
|
16
|
-
disabledOff: string;
|
|
17
|
-
activeOff: string;
|
|
18
|
-
on: string;
|
|
19
|
-
disabledOn: string;
|
|
20
|
-
activeOn: string;
|
|
21
|
-
};
|
|
22
|
-
slider: {
|
|
23
|
-
on: string;
|
|
24
|
-
off: string;
|
|
25
|
-
};
|
|
26
|
-
icon: {
|
|
27
|
-
on: string;
|
|
28
|
-
disabledOn: string;
|
|
29
|
-
off: string;
|
|
30
|
-
disabledOff: string;
|
|
31
|
-
};
|
|
32
|
-
};
|
|
33
|
-
};
|
|
34
|
-
border: {
|
|
35
|
-
radius: {
|
|
36
|
-
small: string;
|
|
37
|
-
full: string;
|
|
38
|
-
};
|
|
39
|
-
};
|
|
40
|
-
size: {
|
|
41
|
-
height: {
|
|
42
|
-
none: number;
|
|
43
|
-
medium: number;
|
|
44
|
-
large: 24;
|
|
45
|
-
};
|
|
46
|
-
width: {
|
|
47
|
-
none: number;
|
|
48
|
-
small: 2;
|
|
49
|
-
medium: number;
|
|
50
|
-
large: number;
|
|
51
|
-
};
|
|
52
|
-
};
|
|
53
|
-
spacing: {
|
|
54
|
-
slider: {
|
|
55
|
-
position: 2;
|
|
56
|
-
};
|
|
57
|
-
icon: {
|
|
58
|
-
position: 4;
|
|
59
|
-
};
|
|
60
|
-
transform: {
|
|
61
|
-
default: string;
|
|
62
|
-
transition: string;
|
|
63
|
-
};
|
|
64
|
-
};
|
|
65
|
-
}>;
|
|
66
|
-
/**
|
|
67
|
-
* ThemedSwitch is a component that provides a theme to the <Switch/> component.
|
|
68
|
-
*/
|
|
69
|
-
export default function ThemedSwitch(props: Props): React.JSX.Element;
|
|
70
|
-
export {};
|