@tamagui/demos 1.88.3 → 1.88.5
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/package.json +18 -18
- package/dist/cjs/CheckboxHeadlessDemo.js +0 -53
- package/dist/cjs/CheckboxHeadlessDemo.js.map +0 -6
- package/dist/cjs/CheckboxHeadlessDemo.native.js +0 -54
- package/dist/cjs/CheckboxHeadlessDemo.native.js.map +0 -6
- package/dist/cjs/CheckboxUnstyledDemo.js +0 -57
- package/dist/cjs/CheckboxUnstyledDemo.js.map +0 -6
- package/dist/cjs/CheckboxUnstyledDemo.native.js +0 -58
- package/dist/cjs/CheckboxUnstyledDemo.native.js.map +0 -6
- package/dist/cjs/SwitchHeadlessDemo.js +0 -83
- package/dist/cjs/SwitchHeadlessDemo.js.map +0 -6
- package/dist/cjs/SwitchHeadlessDemo.native.js +0 -84
- package/dist/cjs/SwitchHeadlessDemo.native.js.map +0 -6
- package/dist/cjs/SwitchUnstyledDemo.js +0 -73
- package/dist/cjs/SwitchUnstyledDemo.js.map +0 -6
- package/dist/cjs/SwitchUnstyledDemo.native.js +0 -74
- package/dist/cjs/SwitchUnstyledDemo.native.js.map +0 -6
- package/dist/esm/CheckboxHeadlessDemo.js +0 -40
- package/dist/esm/CheckboxHeadlessDemo.js.map +0 -6
- package/dist/esm/CheckboxHeadlessDemo.native.js +0 -40
- package/dist/esm/CheckboxHeadlessDemo.native.js.map +0 -6
- package/dist/esm/CheckboxUnstyledDemo.js +0 -40
- package/dist/esm/CheckboxUnstyledDemo.js.map +0 -6
- package/dist/esm/CheckboxUnstyledDemo.native.js +0 -40
- package/dist/esm/CheckboxUnstyledDemo.native.js.map +0 -6
- package/dist/esm/SwitchHeadlessDemo.js +0 -67
- package/dist/esm/SwitchHeadlessDemo.js.map +0 -6
- package/dist/esm/SwitchHeadlessDemo.native.js +0 -67
- package/dist/esm/SwitchHeadlessDemo.native.js.map +0 -6
- package/dist/esm/SwitchUnstyledDemo.js +0 -55
- package/dist/esm/SwitchUnstyledDemo.js.map +0 -6
- package/dist/esm/SwitchUnstyledDemo.native.js +0 -55
- package/dist/esm/SwitchUnstyledDemo.native.js.map +0 -6
- package/dist/jsx/CheckboxHeadlessDemo.js +0 -35
- package/dist/jsx/CheckboxHeadlessDemo.js.map +0 -6
- package/dist/jsx/CheckboxHeadlessDemo.native.js +0 -35
- package/dist/jsx/CheckboxHeadlessDemo.native.js.map +0 -6
- package/dist/jsx/CheckboxUnstyledDemo.js +0 -39
- package/dist/jsx/CheckboxUnstyledDemo.js.map +0 -6
- package/dist/jsx/CheckboxUnstyledDemo.native.js +0 -39
- package/dist/jsx/CheckboxUnstyledDemo.native.js.map +0 -6
- package/dist/jsx/SwitchHeadlessDemo.js +0 -59
- package/dist/jsx/SwitchHeadlessDemo.js.map +0 -6
- package/dist/jsx/SwitchHeadlessDemo.native.js +0 -59
- package/dist/jsx/SwitchHeadlessDemo.native.js.map +0 -6
- package/dist/jsx/SwitchUnstyledDemo.js +0 -54
- package/dist/jsx/SwitchUnstyledDemo.js.map +0 -6
- package/dist/jsx/SwitchUnstyledDemo.native.js +0 -54
- package/dist/jsx/SwitchUnstyledDemo.native.js.map +0 -6
- package/types/CheckboxHeadlessDemo.d.ts.map +0 -1
- package/types/CheckboxUnstyledDemo.d.ts.map +0 -1
- package/types/SwitchHeadlessDemo.d.ts.map +0 -1
- package/types/SwitchUnstyledDemo.d.ts.map +0 -1
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import { createCheckbox } from "@tamagui/checkbox";
|
|
2
|
-
import { Stack, styled } from "@tamagui/core";
|
|
3
|
-
import { Check } from "@tamagui/lucide-icons";
|
|
4
|
-
import { Label, XStack, YStack } from "tamagui";
|
|
5
|
-
const Frame = styled(Stack, {
|
|
6
|
-
borderWidth: 1,
|
|
7
|
-
borderColor: "$borderColor",
|
|
8
|
-
borderRadius: 5,
|
|
9
|
-
alignItems: "center",
|
|
10
|
-
justifyContent: "center",
|
|
11
|
-
variants: {
|
|
12
|
-
checked: {
|
|
13
|
-
indeterminate: {},
|
|
14
|
-
true: {
|
|
15
|
-
backgroundColor: "$color5"
|
|
16
|
-
},
|
|
17
|
-
false: {
|
|
18
|
-
backgroundColor: "$color3"
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
},
|
|
22
|
-
defaultVariants: {
|
|
23
|
-
checked: !1
|
|
24
|
-
}
|
|
25
|
-
}), Indicator = styled(Stack, {}), Checkbox = createCheckbox({
|
|
26
|
-
Frame,
|
|
27
|
-
Indicator
|
|
28
|
-
});
|
|
29
|
-
function CheckboxUnstyledDemo() {
|
|
30
|
-
return <YStack width={200} alignItems="center" gap="$3"><XStack gap="$3" alignItems="center">
|
|
31
|
-
<Checkbox defaultChecked id="unstyled"><Checkbox.Indicator><Check /></Checkbox.Indicator></Checkbox>
|
|
32
|
-
<Label htmlFor="unstyled">Unstyled</Label>
|
|
33
|
-
</XStack></YStack>;
|
|
34
|
-
}
|
|
35
|
-
export {
|
|
36
|
-
Checkbox,
|
|
37
|
-
CheckboxUnstyledDemo
|
|
38
|
-
};
|
|
39
|
-
//# sourceMappingURL=CheckboxUnstyledDemo.js.map
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/CheckboxUnstyledDemo.tsx"],
|
|
4
|
-
"mappings": "AAAA,SAAgC,sBAAsB;AACtD,SAAS,OAAO,cAAc;AAC9B,SAAS,aAAa;AACtB,SAAS,OAAO,QAAQ,cAAc;AAEtC,MAAM,QAAQ,OAAO,OAAO;AAAA,EAC1B,aAAa;AAAA,EACb,aAAa;AAAA,EACb,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,UAAU;AAAA,IACR,SAAS;AAAA,MACP,eAAe,CAAC;AAAA,MAChB,MAAM;AAAA,QACJ,iBAAiB;AAAA,MACnB;AAAA,MACA,OAAO;AAAA,QACL,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,SAAS;AAAA,EACX;AACF,CAAC,GAEK,YAAY,OAAO,OAAO,CAAC,CAAC,GAErB,WAAW,eAAe;AAAA,EACrC;AAAA,EACA;AACF,CAAC;AAEM,SAAS,uBAAuB;AACrC,SACE,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,IAAI,KAC1C,CAAC,OAAO,IAAI,KAAK,WAAW;AAAA,IAC1B,CAAC,SAAS,eAAe,GAAG,WAC1B,CAAC,SAAS,UACR,CAAC,MAAM,EACT,EAFC,SAAS,UAGZ,EAJC;AAAA,IAKD,CAAC,MAAM,QAAQ,WAAW,QAAQ,EAAjC;AAAA,EACH,EAPC,OAQH,EATC;AAWL;",
|
|
5
|
-
"names": []
|
|
6
|
-
}
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import { createCheckbox } from "@tamagui/checkbox";
|
|
2
|
-
import { Stack, styled } from "@tamagui/core";
|
|
3
|
-
import { Check } from "@tamagui/lucide-icons";
|
|
4
|
-
import { Label, XStack, YStack } from "tamagui";
|
|
5
|
-
const Frame = styled(Stack, {
|
|
6
|
-
borderWidth: 1,
|
|
7
|
-
borderColor: "$borderColor",
|
|
8
|
-
borderRadius: 5,
|
|
9
|
-
alignItems: "center",
|
|
10
|
-
justifyContent: "center",
|
|
11
|
-
variants: {
|
|
12
|
-
checked: {
|
|
13
|
-
indeterminate: {},
|
|
14
|
-
true: {
|
|
15
|
-
backgroundColor: "$color5"
|
|
16
|
-
},
|
|
17
|
-
false: {
|
|
18
|
-
backgroundColor: "$color3"
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
},
|
|
22
|
-
defaultVariants: {
|
|
23
|
-
checked: !1
|
|
24
|
-
}
|
|
25
|
-
}), Indicator = styled(Stack, {}), Checkbox = createCheckbox({
|
|
26
|
-
Frame,
|
|
27
|
-
Indicator
|
|
28
|
-
});
|
|
29
|
-
function CheckboxUnstyledDemo() {
|
|
30
|
-
return <YStack width={200} alignItems="center" gap="$3"><XStack gap="$3" alignItems="center">
|
|
31
|
-
<Checkbox defaultChecked id="unstyled"><Checkbox.Indicator><Check /></Checkbox.Indicator></Checkbox>
|
|
32
|
-
<Label htmlFor="unstyled">Unstyled</Label>
|
|
33
|
-
</XStack></YStack>;
|
|
34
|
-
}
|
|
35
|
-
export {
|
|
36
|
-
Checkbox,
|
|
37
|
-
CheckboxUnstyledDemo
|
|
38
|
-
};
|
|
39
|
-
//# sourceMappingURL=CheckboxUnstyledDemo.js.map
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/CheckboxUnstyledDemo.tsx"],
|
|
4
|
-
"mappings": "AAAA,SAAgC,sBAAsB;AACtD,SAAS,OAAO,cAAc;AAC9B,SAAS,aAAa;AACtB,SAAS,OAAO,QAAQ,cAAc;AAEtC,MAAM,QAAQ,OAAO,OAAO;AAAA,EAC1B,aAAa;AAAA,EACb,aAAa;AAAA,EACb,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,UAAU;AAAA,IACR,SAAS;AAAA,MACP,eAAe,CAAC;AAAA,MAChB,MAAM;AAAA,QACJ,iBAAiB;AAAA,MACnB;AAAA,MACA,OAAO;AAAA,QACL,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,SAAS;AAAA,EACX;AACF,CAAC,GAEK,YAAY,OAAO,OAAO,CAAC,CAAC,GAErB,WAAW,eAAe;AAAA,EACrC;AAAA,EACA;AACF,CAAC;AAEM,SAAS,uBAAuB;AACrC,SACE,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,IAAI,KAC1C,CAAC,OAAO,IAAI,KAAK,WAAW;AAAA,IAC1B,CAAC,SAAS,eAAe,GAAG,WAC1B,CAAC,SAAS,UACR,CAAC,MAAM,EACT,EAFC,SAAS,UAGZ,EAJC;AAAA,IAKD,CAAC,MAAM,QAAQ,WAAW,QAAQ,EAAjC;AAAA,EACH,EAPC,OAQH,EATC;AAWL;",
|
|
5
|
-
"names": []
|
|
6
|
-
}
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
import { useSwitch } from "@tamagui/switch-headless";
|
|
2
|
-
import { forwardRef, useEffect, useRef, useState } from "react";
|
|
3
|
-
import { Animated, Pressable } from "react-native-web";
|
|
4
|
-
import { Label, XStack, YStack } from "tamagui";
|
|
5
|
-
function SwitchHeadlessDemo() {
|
|
6
|
-
return <YStack width={200} alignItems="center" space="$3"><XStack space="$3" alignItems="center">
|
|
7
|
-
<Label htmlFor="headless">Headless</Label>
|
|
8
|
-
<HeadlessSwitch defaultChecked id="headless" />
|
|
9
|
-
</XStack></YStack>;
|
|
10
|
-
}
|
|
11
|
-
const HeadlessSwitch = forwardRef((props, ref) => {
|
|
12
|
-
const [checked, setChecked] = useState(props.defaultChecked || !1), { switchProps, switchRef, bubbleInput } = useSwitch(
|
|
13
|
-
props,
|
|
14
|
-
[checked, setChecked],
|
|
15
|
-
ref
|
|
16
|
-
), animation = useRef(new Animated.Value(checked ? 1 : 0)).current;
|
|
17
|
-
return useEffect(() => {
|
|
18
|
-
Animated.timing(animation, {
|
|
19
|
-
toValue: checked ? 1 : 0,
|
|
20
|
-
duration: 100,
|
|
21
|
-
useNativeDriver: !0
|
|
22
|
-
}).start();
|
|
23
|
-
}, [checked]), <>
|
|
24
|
-
<Pressable
|
|
25
|
-
style={{
|
|
26
|
-
width: 40,
|
|
27
|
-
height: 20,
|
|
28
|
-
borderRadius: 100,
|
|
29
|
-
backgroundColor: checked ? "lightblue" : "silver"
|
|
30
|
-
}}
|
|
31
|
-
ref={switchRef}
|
|
32
|
-
{...switchProps}
|
|
33
|
-
><Animated.View
|
|
34
|
-
style={[
|
|
35
|
-
{
|
|
36
|
-
backgroundColor: "black",
|
|
37
|
-
borderRadius: 100,
|
|
38
|
-
width: 20,
|
|
39
|
-
height: 20
|
|
40
|
-
},
|
|
41
|
-
{
|
|
42
|
-
transform: [
|
|
43
|
-
{
|
|
44
|
-
translateX: animation.interpolate({
|
|
45
|
-
inputRange: [0, 1],
|
|
46
|
-
outputRange: [0, 20]
|
|
47
|
-
})
|
|
48
|
-
}
|
|
49
|
-
]
|
|
50
|
-
}
|
|
51
|
-
]}
|
|
52
|
-
/></Pressable>
|
|
53
|
-
{bubbleInput}
|
|
54
|
-
</>;
|
|
55
|
-
});
|
|
56
|
-
export {
|
|
57
|
-
SwitchHeadlessDemo
|
|
58
|
-
};
|
|
59
|
-
//# sourceMappingURL=SwitchHeadlessDemo.js.map
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/SwitchHeadlessDemo.tsx"],
|
|
4
|
-
"mappings": "AAAA,SAA6C,iBAAiB;AAC9D,SAAS,YAAY,WAAW,QAAQ,gBAAgB;AACxD,SAAS,UAAU,iBAAuB;AAC1C,SAAS,OAAO,QAAQ,cAAc;AAE/B,SAAS,qBAAqB;AACnC,SACE,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,MAAM,KAC5C,CAAC,OAAO,MAAM,KAAK,WAAW;AAAA,IAC5B,CAAC,MAAM,QAAQ,WAAW,QAAQ,EAAjC;AAAA,IACD,CAAC,eAAe,eAAe,GAAG,WAAW;AAAA,EAC/C,EAHC,OAIH,EALC;AAOL;AAEA,MAAM,iBAAiB,WAAsC,CAAC,OAAO,QAAQ;AAC3E,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,MAAM,kBAAkB,EAAK,GAC9D,EAAE,aAAa,WAAW,YAAY,IAAI;AAAA,IAC9C;AAAA,IACA,CAAC,SAAS,UAAU;AAAA,IACpB;AAAA,EACF,GAEM,YAAY,OAAO,IAAI,SAAS,MAAM,UAAU,IAAI,CAAC,CAAC,EAAE;AAE9D,mBAAU,MAAM;AACd,aAAS,OAAO,WAAW;AAAA,MACzB,SAAS,UAAU,IAAI;AAAA,MACvB,UAAU;AAAA,MACV,iBAAiB;AAAA,IACnB,CAAC,EAAE,MAAM;AAAA,EACX,GAAG,CAAC,OAAO,CAAC,GAGV;AAAA,IACE,CAAC;AAAA,MACC,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,iBAAiB,UAAU,cAAc;AAAA,MAC3C;AAAA,MACA,KAAK;AAAA,UACD;AAAA,KAEJ,CAAC,SAAS;AAAA,MACR,OAAO;AAAA,QACL;AAAA,UACE,iBAAiB;AAAA,UACjB,cAAc;AAAA,UACd,OAAO;AAAA,UACP,QAAQ;AAAA,QACV;AAAA,QACA;AAAA,UACE,WAAW;AAAA,YACT;AAAA,cACE,YAAY,UAAU,YAAY;AAAA,gBAChC,YAAY,CAAC,GAAG,CAAC;AAAA,gBACjB,aAAa,CAAC,GAAG,EAAE;AAAA,cACrB,CAAC;AAAA,YACH;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF,EACF,EA9BC;AAAA,KA+BA;AAAA,EACH;AAEJ,CAAC;",
|
|
5
|
-
"names": []
|
|
6
|
-
}
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
import { useSwitch } from "@tamagui/switch-headless";
|
|
2
|
-
import { forwardRef, useEffect, useRef, useState } from "react";
|
|
3
|
-
import { Animated, Pressable } from "react-native";
|
|
4
|
-
import { Label, XStack, YStack } from "tamagui";
|
|
5
|
-
function SwitchHeadlessDemo() {
|
|
6
|
-
return <YStack width={200} alignItems="center" space="$3"><XStack space="$3" alignItems="center">
|
|
7
|
-
<Label htmlFor="headless">Headless</Label>
|
|
8
|
-
<HeadlessSwitch defaultChecked id="headless" />
|
|
9
|
-
</XStack></YStack>;
|
|
10
|
-
}
|
|
11
|
-
const HeadlessSwitch = forwardRef((props, ref) => {
|
|
12
|
-
const [checked, setChecked] = useState(props.defaultChecked || !1), { switchProps, switchRef, bubbleInput } = useSwitch(
|
|
13
|
-
props,
|
|
14
|
-
[checked, setChecked],
|
|
15
|
-
ref
|
|
16
|
-
), animation = useRef(new Animated.Value(checked ? 1 : 0)).current;
|
|
17
|
-
return useEffect(() => {
|
|
18
|
-
Animated.timing(animation, {
|
|
19
|
-
toValue: checked ? 1 : 0,
|
|
20
|
-
duration: 100,
|
|
21
|
-
useNativeDriver: !0
|
|
22
|
-
}).start();
|
|
23
|
-
}, [checked]), <>
|
|
24
|
-
<Pressable
|
|
25
|
-
style={{
|
|
26
|
-
width: 40,
|
|
27
|
-
height: 20,
|
|
28
|
-
borderRadius: 100,
|
|
29
|
-
backgroundColor: checked ? "lightblue" : "silver"
|
|
30
|
-
}}
|
|
31
|
-
ref={switchRef}
|
|
32
|
-
{...switchProps}
|
|
33
|
-
><Animated.View
|
|
34
|
-
style={[
|
|
35
|
-
{
|
|
36
|
-
backgroundColor: "black",
|
|
37
|
-
borderRadius: 100,
|
|
38
|
-
width: 20,
|
|
39
|
-
height: 20
|
|
40
|
-
},
|
|
41
|
-
{
|
|
42
|
-
transform: [
|
|
43
|
-
{
|
|
44
|
-
translateX: animation.interpolate({
|
|
45
|
-
inputRange: [0, 1],
|
|
46
|
-
outputRange: [0, 20]
|
|
47
|
-
})
|
|
48
|
-
}
|
|
49
|
-
]
|
|
50
|
-
}
|
|
51
|
-
]}
|
|
52
|
-
/></Pressable>
|
|
53
|
-
{bubbleInput}
|
|
54
|
-
</>;
|
|
55
|
-
});
|
|
56
|
-
export {
|
|
57
|
-
SwitchHeadlessDemo
|
|
58
|
-
};
|
|
59
|
-
//# sourceMappingURL=SwitchHeadlessDemo.js.map
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/SwitchHeadlessDemo.tsx"],
|
|
4
|
-
"mappings": "AAAA,SAA6C,iBAAiB;AAC9D,SAAS,YAAY,WAAW,QAAQ,gBAAgB;AACxD,SAAS,UAAU,iBAAuB;AAC1C,SAAS,OAAO,QAAQ,cAAc;AAE/B,SAAS,qBAAqB;AACnC,SACE,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,MAAM,KAC5C,CAAC,OAAO,MAAM,KAAK,WAAW;AAAA,IAC5B,CAAC,MAAM,QAAQ,WAAW,QAAQ,EAAjC;AAAA,IACD,CAAC,eAAe,eAAe,GAAG,WAAW;AAAA,EAC/C,EAHC,OAIH,EALC;AAOL;AAEA,MAAM,iBAAiB,WAAsC,CAAC,OAAO,QAAQ;AAC3E,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,MAAM,kBAAkB,EAAK,GAC9D,EAAE,aAAa,WAAW,YAAY,IAAI;AAAA,IAC9C;AAAA,IACA,CAAC,SAAS,UAAU;AAAA,IACpB;AAAA,EACF,GAEM,YAAY,OAAO,IAAI,SAAS,MAAM,UAAU,IAAI,CAAC,CAAC,EAAE;AAE9D,mBAAU,MAAM;AACd,aAAS,OAAO,WAAW;AAAA,MACzB,SAAS,UAAU,IAAI;AAAA,MACvB,UAAU;AAAA,MACV,iBAAiB;AAAA,IACnB,CAAC,EAAE,MAAM;AAAA,EACX,GAAG,CAAC,OAAO,CAAC,GAGV;AAAA,IACE,CAAC;AAAA,MACC,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,iBAAiB,UAAU,cAAc;AAAA,MAC3C;AAAA,MACA,KAAK;AAAA,UACD;AAAA,KAEJ,CAAC,SAAS;AAAA,MACR,OAAO;AAAA,QACL;AAAA,UACE,iBAAiB;AAAA,UACjB,cAAc;AAAA,UACd,OAAO;AAAA,UACP,QAAQ;AAAA,QACV;AAAA,QACA;AAAA,UACE,WAAW;AAAA,YACT;AAAA,cACE,YAAY,UAAU,YAAY;AAAA,gBAChC,YAAY,CAAC,GAAG,CAAC;AAAA,gBACjB,aAAa,CAAC,GAAG,EAAE;AAAA,cACrB,CAAC;AAAA,YACH;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF,EACF,EA9BC;AAAA,KA+BA;AAAA,EACH;AAEJ,CAAC;",
|
|
5
|
-
"names": []
|
|
6
|
-
}
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import { Stack, styled } from "@tamagui/core";
|
|
2
|
-
import { SwitchStyledContext, createSwitch } from "@tamagui/switch";
|
|
3
|
-
import { Label, XStack, YStack } from "tamagui";
|
|
4
|
-
const Frame = styled(Stack, {
|
|
5
|
-
context: SwitchStyledContext,
|
|
6
|
-
width: 40,
|
|
7
|
-
height: 20,
|
|
8
|
-
borderRadius: 20,
|
|
9
|
-
variants: {
|
|
10
|
-
checked: {
|
|
11
|
-
true: {
|
|
12
|
-
backgroundColor: "lightblue"
|
|
13
|
-
},
|
|
14
|
-
false: {
|
|
15
|
-
backgroundColor: "silver"
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
},
|
|
19
|
-
defaultVariants: {
|
|
20
|
-
checked: !1
|
|
21
|
-
}
|
|
22
|
-
}), Thumb = styled(Stack, {
|
|
23
|
-
context: SwitchStyledContext,
|
|
24
|
-
width: 20,
|
|
25
|
-
height: 20,
|
|
26
|
-
backgroundColor: "black",
|
|
27
|
-
borderRadius: 20,
|
|
28
|
-
variants: {
|
|
29
|
-
checked: {
|
|
30
|
-
true: {
|
|
31
|
-
opacity: 0.8
|
|
32
|
-
},
|
|
33
|
-
false: {
|
|
34
|
-
opacity: 0.5
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
}), Switch = createSwitch({
|
|
39
|
-
// @ts-ignore
|
|
40
|
-
Frame,
|
|
41
|
-
// @ts-ignore
|
|
42
|
-
Thumb
|
|
43
|
-
});
|
|
44
|
-
function SwitchUnstyledDemo() {
|
|
45
|
-
return <YStack width={200} alignItems="center" space="$3"><XStack space="$3" alignItems="center">
|
|
46
|
-
<Label htmlFor="unstyled-switch">Unstyled</Label>
|
|
47
|
-
<Switch defaultChecked id="unstyled-switch"><Switch.Thumb animation="quick" /></Switch>
|
|
48
|
-
</XStack></YStack>;
|
|
49
|
-
}
|
|
50
|
-
export {
|
|
51
|
-
Switch,
|
|
52
|
-
SwitchUnstyledDemo
|
|
53
|
-
};
|
|
54
|
-
//# sourceMappingURL=SwitchUnstyledDemo.js.map
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/SwitchUnstyledDemo.tsx"],
|
|
4
|
-
"mappings": "AAAA,SAAS,OAAO,cAAc;AAC9B,SAAS,qBAAqB,oBAAoB;AAClD,SAAS,OAAO,QAAQ,cAAc;AAEtC,MAAM,QAAQ,OAAO,OAAO;AAAA,EAC1B,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,UAAU;AAAA,IACR,SAAS;AAAA,MACP,MAAM;AAAA,QACJ,iBAAiB;AAAA,MACnB;AAAA,MACA,OAAO;AAAA,QACL,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,EACX;AACF,CAAC,GAEK,QAAQ,OAAO,OAAO;AAAA,EAC1B,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,cAAc;AAAA,EAEd,UAAU;AAAA,IACR,SAAS;AAAA,MACP,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,MACA,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACF,CAAC,GAGY,SAAS,aAAa;AAAA;AAAA,EAEjC;AAAA;AAAA,EAEA;AACF,CAAC;AAEM,SAAS,qBAAqB;AACnC,SACE,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,MAAM,KAC5C,CAAC,OAAO,MAAM,KAAK,WAAW;AAAA,IAC5B,CAAC,MAAM,QAAQ,kBAAkB,QAAQ,EAAxC;AAAA,IACD,CAAC,OAAO,eAAe,GAAG,kBACxB,CAAC,OAAO,MAAM,UAAU,QAAQ,EAClC,EAFC;AAAA,EAGH,EALC,OAMH,EAPC;AASL;",
|
|
5
|
-
"names": []
|
|
6
|
-
}
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import { Stack, styled } from "@tamagui/core";
|
|
2
|
-
import { SwitchStyledContext, createSwitch } from "@tamagui/switch";
|
|
3
|
-
import { Label, XStack, YStack } from "tamagui";
|
|
4
|
-
const Frame = styled(Stack, {
|
|
5
|
-
context: SwitchStyledContext,
|
|
6
|
-
width: 40,
|
|
7
|
-
height: 20,
|
|
8
|
-
borderRadius: 20,
|
|
9
|
-
variants: {
|
|
10
|
-
checked: {
|
|
11
|
-
true: {
|
|
12
|
-
backgroundColor: "lightblue"
|
|
13
|
-
},
|
|
14
|
-
false: {
|
|
15
|
-
backgroundColor: "silver"
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
},
|
|
19
|
-
defaultVariants: {
|
|
20
|
-
checked: !1
|
|
21
|
-
}
|
|
22
|
-
}), Thumb = styled(Stack, {
|
|
23
|
-
context: SwitchStyledContext,
|
|
24
|
-
width: 20,
|
|
25
|
-
height: 20,
|
|
26
|
-
backgroundColor: "black",
|
|
27
|
-
borderRadius: 20,
|
|
28
|
-
variants: {
|
|
29
|
-
checked: {
|
|
30
|
-
true: {
|
|
31
|
-
opacity: 0.8
|
|
32
|
-
},
|
|
33
|
-
false: {
|
|
34
|
-
opacity: 0.5
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
}), Switch = createSwitch({
|
|
39
|
-
// @ts-ignore
|
|
40
|
-
Frame,
|
|
41
|
-
// @ts-ignore
|
|
42
|
-
Thumb
|
|
43
|
-
});
|
|
44
|
-
function SwitchUnstyledDemo() {
|
|
45
|
-
return <YStack width={200} alignItems="center" space="$3"><XStack space="$3" alignItems="center">
|
|
46
|
-
<Label htmlFor="unstyled-switch">Unstyled</Label>
|
|
47
|
-
<Switch defaultChecked id="unstyled-switch"><Switch.Thumb animation="quick" /></Switch>
|
|
48
|
-
</XStack></YStack>;
|
|
49
|
-
}
|
|
50
|
-
export {
|
|
51
|
-
Switch,
|
|
52
|
-
SwitchUnstyledDemo
|
|
53
|
-
};
|
|
54
|
-
//# sourceMappingURL=SwitchUnstyledDemo.js.map
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/SwitchUnstyledDemo.tsx"],
|
|
4
|
-
"mappings": "AAAA,SAAS,OAAO,cAAc;AAC9B,SAAS,qBAAqB,oBAAoB;AAClD,SAAS,OAAO,QAAQ,cAAc;AAEtC,MAAM,QAAQ,OAAO,OAAO;AAAA,EAC1B,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,UAAU;AAAA,IACR,SAAS;AAAA,MACP,MAAM;AAAA,QACJ,iBAAiB;AAAA,MACnB;AAAA,MACA,OAAO;AAAA,QACL,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,EACX;AACF,CAAC,GAEK,QAAQ,OAAO,OAAO;AAAA,EAC1B,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,cAAc;AAAA,EAEd,UAAU;AAAA,IACR,SAAS;AAAA,MACP,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,MACA,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACF,CAAC,GAGY,SAAS,aAAa;AAAA;AAAA,EAEjC;AAAA;AAAA,EAEA;AACF,CAAC;AAEM,SAAS,qBAAqB;AACnC,SACE,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,MAAM,KAC5C,CAAC,OAAO,MAAM,KAAK,WAAW;AAAA,IAC5B,CAAC,MAAM,QAAQ,kBAAkB,QAAQ,EAAxC;AAAA,IACD,CAAC,OAAO,eAAe,GAAG,kBACxB,CAAC,OAAO,MAAM,UAAU,QAAQ,EAClC,EAFC;AAAA,EAGH,EALC,OAMH,EAPC;AASL;",
|
|
5
|
-
"names": []
|
|
6
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxHeadlessDemo.d.ts","sourceRoot":"","sources":["../src/CheckboxHeadlessDemo.tsx"],"names":[],"mappings":";AASA,wBAAgB,oBAAoB,gBAUnC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxUnstyledDemo.d.ts","sourceRoot":"","sources":["../src/CheckboxUnstyledDemo.tsx"],"names":[],"mappings":";AA8BA,eAAO,MAAM,QAAQ,KAGnB,CAAA;AAEF,wBAAgB,oBAAoB,gBAanC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SwitchHeadlessDemo.d.ts","sourceRoot":"","sources":["../src/SwitchHeadlessDemo.tsx"],"names":[],"mappings":";AAKA,wBAAgB,kBAAkB,gBASjC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SwitchUnstyledDemo.d.ts","sourceRoot":"","sources":["../src/SwitchUnstyledDemo.tsx"],"names":[],"mappings":";AA4CA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKjB,CAAA;AAEF,wBAAgB,kBAAkB,gBAWjC"}
|