@tamagui/switch 1.61.1 → 1.61.2
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/dist/cjs/Switch.js +1 -1
- package/dist/cjs/createSwitch.js +7 -4
- package/dist/cjs/createSwitch.js.map +1 -1
- package/dist/esm/Switch.js +2 -2
- package/dist/esm/createSwitch.js +7 -4
- package/dist/esm/createSwitch.js.map +1 -1
- package/dist/jsx/Switch.js +2 -2
- package/dist/jsx/createSwitch.js +7 -4
- package/dist/jsx/createSwitch.js.map +1 -1
- package/package.json +11 -11
- package/src/Switch.tsx +2 -2
- package/src/createSwitch.tsx +7 -5
- package/types/createSwitch.d.ts.map +1 -1
package/dist/cjs/Switch.js
CHANGED
|
@@ -54,7 +54,7 @@ const SwitchThumb = (0, import_core.styled)(import_stacks.ThemeableStack, {
|
|
|
54
54
|
});
|
|
55
55
|
const getSwitchHeight = (val) => Math.round((0, import_core.getVariableValue)((0, import_get_token.getSize)(val)) * 0.65);
|
|
56
56
|
const getSwitchWidth = (val) => getSwitchHeight(val) * 2;
|
|
57
|
-
const SwitchFrame = (0, import_core.styled)(import_stacks.
|
|
57
|
+
const SwitchFrame = (0, import_core.styled)(import_stacks.YStack, {
|
|
58
58
|
name: "Switch",
|
|
59
59
|
tag: "button",
|
|
60
60
|
context: import_createSwitch.SwitchContext,
|
package/dist/cjs/createSwitch.js
CHANGED
|
@@ -49,7 +49,7 @@ const SwitchContext = (0, import_core.createStyledContext)({
|
|
|
49
49
|
checked: false,
|
|
50
50
|
disabled: false,
|
|
51
51
|
size: void 0,
|
|
52
|
-
frameWidth:
|
|
52
|
+
frameWidth: 0,
|
|
53
53
|
unstyled: false
|
|
54
54
|
});
|
|
55
55
|
function createSwitch({ Frame, Thumb, acceptsUnstyled }) {
|
|
@@ -57,13 +57,16 @@ function createSwitch({ Frame, Thumb, acceptsUnstyled }) {
|
|
|
57
57
|
const { size: sizeProp, ...thumbProps } = props;
|
|
58
58
|
const { disabled, checked, unstyled, frameWidth } = React.useContext(SwitchContext);
|
|
59
59
|
const [thumbWidth, setThumbWidth] = React.useState(0);
|
|
60
|
+
const initialChecked = React.useRef(checked).current;
|
|
61
|
+
const distance = frameWidth - thumbWidth;
|
|
60
62
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
61
63
|
Thumb,
|
|
62
64
|
{
|
|
63
65
|
theme: unstyled === false && checked ? "active" : null,
|
|
64
66
|
"data-state": getState(checked),
|
|
65
67
|
"data-disabled": disabled ? "" : void 0,
|
|
66
|
-
|
|
68
|
+
alignSelf: initialChecked ? "flex-end" : "flex-start",
|
|
69
|
+
x: initialChecked ? checked ? 0 : -distance : checked ? distance : 0,
|
|
67
70
|
...thumbProps,
|
|
68
71
|
onLayout: (0, import_core.composeEventHandlers)(
|
|
69
72
|
props.onLayout,
|
|
@@ -118,7 +121,7 @@ function createSwitch({ Frame, Thumb, acceptsUnstyled }) {
|
|
|
118
121
|
const labelledBy = ariaLabelledby || labelId;
|
|
119
122
|
const hasConsumerStoppedPropagationRef = React.useRef(false);
|
|
120
123
|
const isFormControl = import_core.isWeb ? button ? Boolean(button.closest("form")) : true : false;
|
|
121
|
-
const [frameWidth, setFrameWidth] = React.useState(
|
|
124
|
+
const [frameWidth, setFrameWidth] = React.useState(0);
|
|
122
125
|
const [checked = false, setChecked] = (0, import_use_controllable_state.useControllableState)({
|
|
123
126
|
prop: checkedProp,
|
|
124
127
|
defaultProp: defaultChecked || false,
|
|
@@ -154,7 +157,7 @@ function createSwitch({ Frame, Thumb, acceptsUnstyled }) {
|
|
|
154
157
|
size,
|
|
155
158
|
checked,
|
|
156
159
|
disabled,
|
|
157
|
-
frameWidth: frameWidth - leftBorderWidth * 2,
|
|
160
|
+
frameWidth: frameWidth ? frameWidth - leftBorderWidth * 2 : 0,
|
|
158
161
|
theme: checked ? "active" : null,
|
|
159
162
|
themeShallow: true,
|
|
160
163
|
role: "switch",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createSwitch.tsx"],
|
|
4
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"mappings": "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",
|
|
5
5
|
"names": ["SwitchThumb", "NativeSwitch"]
|
|
6
6
|
}
|
package/dist/esm/Switch.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { getVariableValue, styled } from "@tamagui/core";
|
|
2
2
|
import { getSize } from "@tamagui/get-token";
|
|
3
|
-
import { ThemeableStack,
|
|
3
|
+
import { ThemeableStack, YStack } from "@tamagui/stacks";
|
|
4
4
|
import { SwitchContext, createSwitch } from "./createSwitch";
|
|
5
5
|
const SwitchThumb = styled(ThemeableStack, {
|
|
6
6
|
name: "SwitchThumb",
|
|
@@ -29,7 +29,7 @@ const SwitchThumb = styled(ThemeableStack, {
|
|
|
29
29
|
});
|
|
30
30
|
const getSwitchHeight = (val) => Math.round(getVariableValue(getSize(val)) * 0.65);
|
|
31
31
|
const getSwitchWidth = (val) => getSwitchHeight(val) * 2;
|
|
32
|
-
const SwitchFrame = styled(
|
|
32
|
+
const SwitchFrame = styled(YStack, {
|
|
33
33
|
name: "Switch",
|
|
34
34
|
tag: "button",
|
|
35
35
|
context: SwitchContext,
|
package/dist/esm/createSwitch.js
CHANGED
|
@@ -22,7 +22,7 @@ const SwitchContext = createStyledContext({
|
|
|
22
22
|
checked: false,
|
|
23
23
|
disabled: false,
|
|
24
24
|
size: void 0,
|
|
25
|
-
frameWidth:
|
|
25
|
+
frameWidth: 0,
|
|
26
26
|
unstyled: false
|
|
27
27
|
});
|
|
28
28
|
function createSwitch({ Frame, Thumb, acceptsUnstyled }) {
|
|
@@ -30,6 +30,8 @@ function createSwitch({ Frame, Thumb, acceptsUnstyled }) {
|
|
|
30
30
|
const { size: sizeProp, ...thumbProps } = props;
|
|
31
31
|
const { disabled, checked, unstyled, frameWidth } = React.useContext(SwitchContext);
|
|
32
32
|
const [thumbWidth, setThumbWidth] = React.useState(0);
|
|
33
|
+
const initialChecked = React.useRef(checked).current;
|
|
34
|
+
const distance = frameWidth - thumbWidth;
|
|
33
35
|
return (
|
|
34
36
|
// @ts-ignore
|
|
35
37
|
/* @__PURE__ */ jsx(
|
|
@@ -38,7 +40,8 @@ function createSwitch({ Frame, Thumb, acceptsUnstyled }) {
|
|
|
38
40
|
theme: unstyled === false && checked ? "active" : null,
|
|
39
41
|
"data-state": getState(checked),
|
|
40
42
|
"data-disabled": disabled ? "" : void 0,
|
|
41
|
-
|
|
43
|
+
alignSelf: initialChecked ? "flex-end" : "flex-start",
|
|
44
|
+
x: initialChecked ? checked ? 0 : -distance : checked ? distance : 0,
|
|
42
45
|
...thumbProps,
|
|
43
46
|
onLayout: composeEventHandlers(
|
|
44
47
|
props.onLayout,
|
|
@@ -94,7 +97,7 @@ function createSwitch({ Frame, Thumb, acceptsUnstyled }) {
|
|
|
94
97
|
const labelledBy = ariaLabelledby || labelId;
|
|
95
98
|
const hasConsumerStoppedPropagationRef = React.useRef(false);
|
|
96
99
|
const isFormControl = isWeb ? button ? Boolean(button.closest("form")) : true : false;
|
|
97
|
-
const [frameWidth, setFrameWidth] = React.useState(
|
|
100
|
+
const [frameWidth, setFrameWidth] = React.useState(0);
|
|
98
101
|
const [checked = false, setChecked] = useControllableState({
|
|
99
102
|
prop: checkedProp,
|
|
100
103
|
defaultProp: defaultChecked || false,
|
|
@@ -130,7 +133,7 @@ function createSwitch({ Frame, Thumb, acceptsUnstyled }) {
|
|
|
130
133
|
size,
|
|
131
134
|
checked,
|
|
132
135
|
disabled,
|
|
133
|
-
frameWidth: frameWidth - leftBorderWidth * 2,
|
|
136
|
+
frameWidth: frameWidth ? frameWidth - leftBorderWidth * 2 : 0,
|
|
134
137
|
theme: checked ? "active" : null,
|
|
135
138
|
themeShallow: true,
|
|
136
139
|
role: "switch",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createSwitch.tsx"],
|
|
4
|
-
"mappings": "
|
|
4
|
+
"mappings": "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",
|
|
5
5
|
"names": ["SwitchThumb"]
|
|
6
6
|
}
|
package/dist/jsx/Switch.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { getVariableValue, styled } from "@tamagui/core";
|
|
2
2
|
import { getSize } from "@tamagui/get-token";
|
|
3
|
-
import { ThemeableStack,
|
|
3
|
+
import { ThemeableStack, YStack } from "@tamagui/stacks";
|
|
4
4
|
import { SwitchContext, createSwitch } from "./createSwitch";
|
|
5
5
|
const SwitchThumb = styled(ThemeableStack, {
|
|
6
6
|
name: "SwitchThumb",
|
|
@@ -29,7 +29,7 @@ const SwitchThumb = styled(ThemeableStack, {
|
|
|
29
29
|
});
|
|
30
30
|
const getSwitchHeight = (val) => Math.round(getVariableValue(getSize(val)) * 0.65);
|
|
31
31
|
const getSwitchWidth = (val) => getSwitchHeight(val) * 2;
|
|
32
|
-
const SwitchFrame = styled(
|
|
32
|
+
const SwitchFrame = styled(YStack, {
|
|
33
33
|
name: "Switch",
|
|
34
34
|
tag: "button",
|
|
35
35
|
context: SwitchContext,
|
package/dist/jsx/createSwitch.js
CHANGED
|
@@ -21,7 +21,7 @@ const SwitchContext = createStyledContext({
|
|
|
21
21
|
checked: false,
|
|
22
22
|
disabled: false,
|
|
23
23
|
size: void 0,
|
|
24
|
-
frameWidth:
|
|
24
|
+
frameWidth: 0,
|
|
25
25
|
unstyled: false
|
|
26
26
|
});
|
|
27
27
|
function createSwitch({ Frame, Thumb, acceptsUnstyled }) {
|
|
@@ -29,13 +29,16 @@ function createSwitch({ Frame, Thumb, acceptsUnstyled }) {
|
|
|
29
29
|
const { size: sizeProp, ...thumbProps } = props;
|
|
30
30
|
const { disabled, checked, unstyled, frameWidth } = React.useContext(SwitchContext);
|
|
31
31
|
const [thumbWidth, setThumbWidth] = React.useState(0);
|
|
32
|
+
const initialChecked = React.useRef(checked).current;
|
|
33
|
+
const distance = frameWidth - thumbWidth;
|
|
32
34
|
return (
|
|
33
35
|
// @ts-ignore
|
|
34
36
|
<Thumb
|
|
35
37
|
theme={unstyled === false && checked ? "active" : null}
|
|
36
38
|
data-state={getState(checked)}
|
|
37
39
|
data-disabled={disabled ? "" : void 0}
|
|
38
|
-
|
|
40
|
+
alignSelf={initialChecked ? "flex-end" : "flex-start"}
|
|
41
|
+
x={initialChecked ? checked ? 0 : -distance : checked ? distance : 0}
|
|
39
42
|
{...thumbProps}
|
|
40
43
|
onLayout={composeEventHandlers(
|
|
41
44
|
props.onLayout,
|
|
@@ -90,7 +93,7 @@ function createSwitch({ Frame, Thumb, acceptsUnstyled }) {
|
|
|
90
93
|
const labelledBy = ariaLabelledby || labelId;
|
|
91
94
|
const hasConsumerStoppedPropagationRef = React.useRef(false);
|
|
92
95
|
const isFormControl = isWeb ? button ? Boolean(button.closest("form")) : true : false;
|
|
93
|
-
const [frameWidth, setFrameWidth] = React.useState(
|
|
96
|
+
const [frameWidth, setFrameWidth] = React.useState(0);
|
|
94
97
|
const [checked = false, setChecked] = useControllableState({
|
|
95
98
|
prop: checkedProp,
|
|
96
99
|
defaultProp: defaultChecked || false,
|
|
@@ -124,7 +127,7 @@ function createSwitch({ Frame, Thumb, acceptsUnstyled }) {
|
|
|
124
127
|
size={size}
|
|
125
128
|
checked={checked}
|
|
126
129
|
disabled={disabled}
|
|
127
|
-
frameWidth={frameWidth - leftBorderWidth * 2}
|
|
130
|
+
frameWidth={frameWidth ? frameWidth - leftBorderWidth * 2 : 0}
|
|
128
131
|
theme={checked ? "active" : null}
|
|
129
132
|
themeShallow
|
|
130
133
|
role="switch"
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createSwitch.tsx"],
|
|
4
|
-
"mappings": "AAAA,SAAS,uBAAuB;AAChC;AAAA,EAME;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,yBAAyB;AAClC,SAAS,eAAe;AACxB,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,mBAAmB;AAC5B,YAAY,WAAW;AACvB;AAAA,EACE,UAAU;AAAA,EAEV;AAAA,OACK;AAEA,MAAM,gBAAgB,oBAM1B;AAAA,EACD,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,UAAU;AACZ,CAAC;AAuBM,SAAS,aAMd,EAAE,OAAO,OAAO,gBAAgB,GAAsD;AACtF,QAAM,cAAc,MAAM,UAAU,SAASA,aAAY,OAAO,cAAc;AAC5E,UAAM,EAAE,MAAM,UAAU,GAAG,WAAW,IAAI;AAC1C,UAAM,EAAE,UAAU,SAAS,UAAU,WAAW,IAAI,MAAM,WAAW,aAAa;AAClF,UAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,CAAC;AACpD;AAAA;AAAA,MAEE,CAAC;AAAA,QACC,OAAO,aAAa,SAAS,UAAU,WAAW;AAAA,QAClD,YAAY,SAAS,OAAO;AAAA,QAC5B,eAAe,WAAW,KAAK;AAAA,QAC/B,GAAG,UAAU,
|
|
4
|
+
"mappings": "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",
|
|
5
5
|
"names": ["SwitchThumb"]
|
|
6
6
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/switch",
|
|
3
|
-
"version": "1.61.
|
|
3
|
+
"version": "1.61.2",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -31,22 +31,22 @@
|
|
|
31
31
|
}
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@tamagui/compose-refs": "1.61.
|
|
35
|
-
"@tamagui/core": "1.61.
|
|
36
|
-
"@tamagui/create-context": "1.61.
|
|
37
|
-
"@tamagui/focusable": "1.61.
|
|
38
|
-
"@tamagui/get-token": "1.61.
|
|
39
|
-
"@tamagui/label": "1.61.
|
|
40
|
-
"@tamagui/stacks": "1.61.
|
|
41
|
-
"@tamagui/use-controllable-state": "1.61.
|
|
42
|
-
"@tamagui/use-previous": "1.61.
|
|
34
|
+
"@tamagui/compose-refs": "1.61.2",
|
|
35
|
+
"@tamagui/core": "1.61.2",
|
|
36
|
+
"@tamagui/create-context": "1.61.2",
|
|
37
|
+
"@tamagui/focusable": "1.61.2",
|
|
38
|
+
"@tamagui/get-token": "1.61.2",
|
|
39
|
+
"@tamagui/label": "1.61.2",
|
|
40
|
+
"@tamagui/stacks": "1.61.2",
|
|
41
|
+
"@tamagui/use-controllable-state": "1.61.2",
|
|
42
|
+
"@tamagui/use-previous": "1.61.2"
|
|
43
43
|
},
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"react": "*",
|
|
46
46
|
"react-native": "*"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
|
-
"@tamagui/build": "1.61.
|
|
49
|
+
"@tamagui/build": "1.61.2",
|
|
50
50
|
"react": "^18.2.0",
|
|
51
51
|
"react-native": "^0.72.1"
|
|
52
52
|
},
|
package/src/Switch.tsx
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { SizeTokens, getVariableValue, styled } from '@tamagui/core'
|
|
2
2
|
import { getSize } from '@tamagui/get-token'
|
|
3
|
-
import { ThemeableStack,
|
|
3
|
+
import { ThemeableStack, YStack } from '@tamagui/stacks'
|
|
4
4
|
|
|
5
5
|
import { SwitchContext, createSwitch } from './createSwitch'
|
|
6
6
|
|
|
@@ -38,7 +38,7 @@ const getSwitchHeight = (val: SizeTokens) =>
|
|
|
38
38
|
|
|
39
39
|
const getSwitchWidth = (val: SizeTokens) => getSwitchHeight(val) * 2
|
|
40
40
|
|
|
41
|
-
export const SwitchFrame = styled(
|
|
41
|
+
export const SwitchFrame = styled(YStack, {
|
|
42
42
|
name: 'Switch',
|
|
43
43
|
tag: 'button',
|
|
44
44
|
context: SwitchContext,
|
package/src/createSwitch.tsx
CHANGED
|
@@ -34,7 +34,7 @@ export const SwitchContext = createStyledContext<{
|
|
|
34
34
|
checked: false,
|
|
35
35
|
disabled: false,
|
|
36
36
|
size: undefined,
|
|
37
|
-
frameWidth:
|
|
37
|
+
frameWidth: 0,
|
|
38
38
|
unstyled: false,
|
|
39
39
|
})
|
|
40
40
|
|
|
@@ -70,13 +70,16 @@ export function createSwitch<
|
|
|
70
70
|
const { size: sizeProp, ...thumbProps } = props
|
|
71
71
|
const { disabled, checked, unstyled, frameWidth } = React.useContext(SwitchContext)
|
|
72
72
|
const [thumbWidth, setThumbWidth] = React.useState(0)
|
|
73
|
+
const initialChecked = React.useRef(checked).current
|
|
74
|
+
const distance = frameWidth - thumbWidth
|
|
73
75
|
return (
|
|
74
76
|
// @ts-ignore
|
|
75
77
|
<Thumb
|
|
76
78
|
theme={unstyled === false && checked ? 'active' : null}
|
|
77
79
|
data-state={getState(checked)}
|
|
78
80
|
data-disabled={disabled ? '' : undefined}
|
|
79
|
-
|
|
81
|
+
alignSelf={initialChecked ? 'flex-end' : 'flex-start'}
|
|
82
|
+
x={initialChecked ? (checked ? 0 : -distance) : checked ? distance : 0}
|
|
80
83
|
{...thumbProps}
|
|
81
84
|
// @ts-ignore
|
|
82
85
|
onLayout={composeEventHandlers(props.onLayout, (e) =>
|
|
@@ -147,8 +150,7 @@ export function createSwitch<
|
|
|
147
150
|
: true
|
|
148
151
|
: false
|
|
149
152
|
|
|
150
|
-
|
|
151
|
-
const [frameWidth, setFrameWidth] = React.useState(60)
|
|
153
|
+
const [frameWidth, setFrameWidth] = React.useState(0)
|
|
152
154
|
|
|
153
155
|
const [checked = false, setChecked] = useControllableState({
|
|
154
156
|
prop: checkedProp,
|
|
@@ -187,7 +189,7 @@ export function createSwitch<
|
|
|
187
189
|
size={size}
|
|
188
190
|
checked={checked}
|
|
189
191
|
disabled={disabled}
|
|
190
|
-
frameWidth={frameWidth - leftBorderWidth * 2}
|
|
192
|
+
frameWidth={frameWidth ? frameWidth - leftBorderWidth * 2 : 0}
|
|
191
193
|
theme={checked ? 'active' : null}
|
|
192
194
|
themeShallow
|
|
193
195
|
role="switch"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createSwitch.d.ts","sourceRoot":"","sources":["../src/createSwitch.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,WAAW,EACX,UAAU,EACV,UAAU,EACV,iCAAiC,EACjC,cAAc,EAOf,MAAM,eAAe,CAAA;AAMtB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAEL,WAAW,IAAI,iBAAiB,EAEjC,MAAM,cAAc,CAAA;AAErB,eAAO,MAAM,aAAa;aACf,OAAO;;gBAEJ,MAAM;;;EASlB,CAAA;AAEF,KAAK,iBAAiB,GAAG;IACvB,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,KAAK,eAAe,GAAG,UAAU,GAAG,iBAAiB,CAAA;AAErD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC,CAAA;IAClD,WAAW,CAAC,EAAE,iBAAiB,CAAA;IAC/B,eAAe,CAAC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAA;CACzC,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG,gBAAgB,CAAA;AAE5D,wBAAgB,YAAY,CAC1B,CAAC,SAAS,iCAAiC,CACzC,WAAW,EACX,iBAAiB,GAAG,gBAAgB,CACrC,EACD,CAAC,SAAS,iCAAiC,CAAC,eAAe,EAAE,iBAAiB,CAAC,EAC/E,EAAE,KAAK,EAAE,KAAK,EAAE,eAAe,EAAE,EAAE;IAAE,KAAK,EAAE,CAAC,CAAC;IAAC,KAAK,EAAE,CAAC,CAAC;IAAC,eAAe,CAAC,EAAE,OAAO,CAAA;CAAE;;;;;;;
|
|
1
|
+
{"version":3,"file":"createSwitch.d.ts","sourceRoot":"","sources":["../src/createSwitch.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,WAAW,EACX,UAAU,EACV,UAAU,EACV,iCAAiC,EACjC,cAAc,EAOf,MAAM,eAAe,CAAA;AAMtB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAEL,WAAW,IAAI,iBAAiB,EAEjC,MAAM,cAAc,CAAA;AAErB,eAAO,MAAM,aAAa;aACf,OAAO;;gBAEJ,MAAM;;;EASlB,CAAA;AAEF,KAAK,iBAAiB,GAAG;IACvB,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,KAAK,eAAe,GAAG,UAAU,GAAG,iBAAiB,CAAA;AAErD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC,CAAA;IAClD,WAAW,CAAC,EAAE,iBAAiB,CAAA;IAC/B,eAAe,CAAC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAA;CACzC,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG,gBAAgB,CAAA;AAE5D,wBAAgB,YAAY,CAC1B,CAAC,SAAS,iCAAiC,CACzC,WAAW,EACX,iBAAiB,GAAG,gBAAgB,CACrC,EACD,CAAC,SAAS,iCAAiC,CAAC,eAAe,EAAE,iBAAiB,CAAC,EAC/E,EAAE,KAAK,EAAE,KAAK,EAAE,eAAe,EAAE,EAAE;IAAE,KAAK,EAAE,CAAC,CAAC;IAAC,KAAK,EAAE,CAAC,CAAC;IAAC,eAAe,CAAC,EAAE,OAAO,CAAA;CAAE;;;;;;;EA8OrF"}
|