@tamagui/demos 1.113.1 → 1.114.0
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/esm/AccordionDemo.native.js +79 -66
- package/dist/esm/AccordionDemo.native.js.map +6 -1
- package/dist/esm/AddThemeDemo.native.js +34 -25
- package/dist/esm/AddThemeDemo.native.js.map +6 -1
- package/dist/esm/AlertDialogDemo.native.js +84 -66
- package/dist/esm/AlertDialogDemo.native.js.map +6 -1
- package/dist/esm/AnimationsDemo.native.js +75 -65
- package/dist/esm/AnimationsDemo.native.js.map +6 -1
- package/dist/esm/AnimationsEnterDemo.native.js +38 -33
- package/dist/esm/AnimationsEnterDemo.native.js.map +6 -1
- package/dist/esm/AnimationsHoverDemo.native.js +6 -4
- package/dist/esm/AnimationsHoverDemo.native.js.map +6 -1
- package/dist/esm/AnimationsPresenceDemo.native.js +91 -78
- package/dist/esm/AnimationsPresenceDemo.native.js.map +6 -1
- package/dist/esm/AnimationsTimingDemo.native.js +6 -4
- package/dist/esm/AnimationsTimingDemo.native.js.map +6 -1
- package/dist/esm/AvatarDemo.native.js +34 -23
- package/dist/esm/AvatarDemo.native.js.map +6 -1
- package/dist/esm/BuildAButtonDemo.native.js +94 -73
- package/dist/esm/BuildAButtonDemo.native.js.map +6 -1
- package/dist/esm/ButtonDemo.native.js +68 -51
- package/dist/esm/ButtonDemo.native.js.map +6 -1
- package/dist/esm/CardDemo.native.js +63 -47
- package/dist/esm/CardDemo.native.js.map +6 -1
- package/dist/esm/CheckboxDemo.native.js +36 -31
- package/dist/esm/CheckboxDemo.native.js.map +6 -1
- package/dist/esm/CheckboxHeadlessDemo.native.js +33 -26
- package/dist/esm/CheckboxHeadlessDemo.native.js.map +6 -1
- package/dist/esm/CheckboxUnstyledDemo.native.js +40 -36
- package/dist/esm/CheckboxUnstyledDemo.native.js.map +6 -1
- package/dist/esm/ColorsDemo.native.js +106 -84
- package/dist/esm/ColorsDemo.native.js.map +6 -1
- package/dist/esm/DialogDemo.native.js +156 -122
- package/dist/esm/DialogDemo.native.js.map +6 -1
- package/dist/esm/FormsDemo.native.js +25 -18
- package/dist/esm/FormsDemo.native.js.map +6 -1
- package/dist/esm/Grid.native.js +22 -23
- package/dist/esm/Grid.native.js.map +6 -1
- package/dist/esm/GroupDemo.native.js +72 -55
- package/dist/esm/GroupDemo.native.js.map +6 -1
- package/dist/esm/HeadingsDemo.native.js +25 -16
- package/dist/esm/HeadingsDemo.native.js.map +6 -1
- package/dist/esm/ImageDemo.native.js +5 -3
- package/dist/esm/ImageDemo.native.js.map +6 -1
- package/dist/esm/InputsDemo.native.js +31 -21
- package/dist/esm/InputsDemo.native.js.map +6 -1
- package/dist/esm/LabelDemo.native.js +40 -29
- package/dist/esm/LabelDemo.native.js.map +6 -1
- package/dist/esm/LinearGradientDemo.native.js +43 -20
- package/dist/esm/LinearGradientDemo.native.js.map +6 -1
- package/dist/esm/ListItemDemo.native.js +63 -50
- package/dist/esm/ListItemDemo.native.js.map +6 -1
- package/dist/esm/LucideIconsDemo.native.js +44 -38
- package/dist/esm/LucideIconsDemo.native.js.map +6 -1
- package/dist/esm/NewInputsDemo.native.js +31 -21
- package/dist/esm/NewInputsDemo.native.js.map +6 -1
- package/dist/esm/PopoverDemo.native.js +139 -108
- package/dist/esm/PopoverDemo.native.js.map +6 -1
- package/dist/esm/ProgressDemo.native.js +85 -68
- package/dist/esm/ProgressDemo.native.js.map +6 -1
- package/dist/esm/RadioGroupDemo.native.js +38 -28
- package/dist/esm/RadioGroupDemo.native.js.map +6 -1
- package/dist/esm/RadioGroupHeadlessDemo.native.js +65 -75
- package/dist/esm/RadioGroupHeadlessDemo.native.js.map +6 -1
- package/dist/esm/RadioGroupUnstyledDemo.native.js +96 -94
- package/dist/esm/RadioGroupUnstyledDemo.native.js.map +6 -1
- package/dist/esm/ReplaceThemeDemo.native.js +29 -25
- package/dist/esm/ReplaceThemeDemo.native.js.map +6 -1
- package/dist/esm/ScrollViewDemo.native.js +48 -37
- package/dist/esm/ScrollViewDemo.native.js.map +6 -1
- package/dist/esm/SelectDemo.native.js +267 -187
- package/dist/esm/SelectDemo.native.js.map +6 -1
- package/dist/esm/SeparatorDemo.native.js +42 -29
- package/dist/esm/SeparatorDemo.native.js.map +6 -1
- package/dist/esm/ShapesDemo.native.js +17 -12
- package/dist/esm/ShapesDemo.native.js.map +6 -1
- package/dist/esm/SheetDemo.native.js +183 -133
- package/dist/esm/SheetDemo.native.js.map +6 -1
- package/dist/esm/SliderDemo.native.js +30 -22
- package/dist/esm/SliderDemo.native.js.map +6 -1
- package/dist/esm/SpinnerDemo.native.js +15 -10
- package/dist/esm/SpinnerDemo.native.js.map +6 -1
- package/dist/esm/StacksDemo.native.js +85 -67
- package/dist/esm/StacksDemo.native.js.map +6 -1
- package/dist/esm/SwitchDemo.native.js +76 -57
- package/dist/esm/SwitchDemo.native.js.map +6 -1
- package/dist/esm/SwitchHeadlessDemo.native.js +63 -45
- package/dist/esm/SwitchHeadlessDemo.native.js.map +6 -1
- package/dist/esm/SwitchUnstyledDemo.native.js +50 -46
- package/dist/esm/SwitchUnstyledDemo.native.js.map +6 -1
- package/dist/esm/TabsAdvancedDemo.native.js +297 -297
- package/dist/esm/TabsAdvancedDemo.native.js.map +6 -1
- package/dist/esm/TabsDemo.native.js +149 -126
- package/dist/esm/TabsDemo.native.js.map +6 -1
- package/dist/esm/TextDemo.native.js +30 -21
- package/dist/esm/TextDemo.native.js.map +6 -1
- package/dist/esm/ThemeBuilderDemo.native.js +170 -137
- package/dist/esm/ThemeBuilderDemo.native.js.map +6 -1
- package/dist/esm/ThemeInverseDemo.native.js +43 -30
- package/dist/esm/ThemeInverseDemo.native.js.map +6 -1
- package/dist/esm/ToastDemo.native.js +83 -73
- package/dist/esm/ToastDemo.native.js.map +6 -1
- package/dist/esm/ToastDuplicateDemo.native.js +61 -45
- package/dist/esm/ToastDuplicateDemo.native.js.map +6 -1
- package/dist/esm/ToggleGroupDemo.native.js +76 -58
- package/dist/esm/ToggleGroupDemo.native.js.map +6 -1
- package/dist/esm/TokensDemo.native.js +107 -94
- package/dist/esm/TokensDemo.native.js.map +6 -1
- package/dist/esm/TooltipDemo.native.js +109 -85
- package/dist/esm/TooltipDemo.native.js.map +6 -1
- package/dist/esm/UpdateThemeDemo.native.js +31 -28
- package/dist/esm/UpdateThemeDemo.native.js.map +6 -1
- package/dist/esm/WebNativeImageDemo.native.js +5 -3
- package/dist/esm/WebNativeImageDemo.native.js.map +6 -1
- package/dist/esm/index.native.js +58 -58
- package/dist/esm/index.native.js.map +6 -1
- package/dist/esm/tamagui.config.native.js +5 -2
- package/dist/esm/tamagui.config.native.js.map +6 -1
- package/dist/esm/useOnIntersecting.native.js +39 -42
- package/dist/esm/useOnIntersecting.native.js.map +6 -1
- package/package.json +19 -19
|
@@ -4,101 +4,89 @@ import { RovingFocusGroup } from "@tamagui/roving-focus";
|
|
|
4
4
|
import React from "react";
|
|
5
5
|
import { Pressable, StyleSheet, Text, View } from "react-native";
|
|
6
6
|
import { isWeb, useTheme } from "tamagui";
|
|
7
|
-
var RadioGroupContext = /* @__PURE__ */React.createContext({}),
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
});
|
|
7
|
+
var RadioGroupContext = /* @__PURE__ */ React.createContext({}), RadioGroupItemContext = /* @__PURE__ */ React.createContext({
|
|
8
|
+
checked: !1,
|
|
9
|
+
disabled: !1
|
|
10
|
+
});
|
|
12
11
|
function RadioGroupHeadlessDemo() {
|
|
13
|
-
var {
|
|
14
|
-
providerValue,
|
|
15
|
-
frameAttrs,
|
|
16
|
-
rovingFocusGroupAttrs
|
|
17
|
-
} = useRadioGroup({
|
|
12
|
+
var { providerValue, frameAttrs, rovingFocusGroupAttrs } = useRadioGroup({
|
|
18
13
|
orientation: "vertical",
|
|
19
14
|
name: "form",
|
|
20
15
|
defaultValue: "3"
|
|
21
16
|
});
|
|
22
|
-
return /* @__PURE__ */_jsx(RadioGroupContext.Provider, {
|
|
17
|
+
return /* @__PURE__ */ _jsx(RadioGroupContext.Provider, {
|
|
23
18
|
value: providerValue,
|
|
24
|
-
children: /* @__PURE__ */_jsx(RovingFocusGroup, {
|
|
19
|
+
children: /* @__PURE__ */ _jsx(RovingFocusGroup, {
|
|
25
20
|
...rovingFocusGroupAttrs,
|
|
26
|
-
children: /* @__PURE__ */_jsxs(View, {
|
|
21
|
+
children: /* @__PURE__ */ _jsxs(View, {
|
|
27
22
|
style: styles.radioGroup,
|
|
28
23
|
...frameAttrs,
|
|
29
|
-
children: [
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
24
|
+
children: [
|
|
25
|
+
/* @__PURE__ */ _jsx(RadioGroupItem, {
|
|
26
|
+
value: "2",
|
|
27
|
+
id: "2",
|
|
28
|
+
label: "First Value"
|
|
29
|
+
}),
|
|
30
|
+
/* @__PURE__ */ _jsx(RadioGroupItem, {
|
|
31
|
+
value: "3",
|
|
32
|
+
id: "3",
|
|
33
|
+
label: "Second Value"
|
|
34
|
+
}),
|
|
35
|
+
/* @__PURE__ */ _jsx(RadioGroupItem, {
|
|
36
|
+
value: "4",
|
|
37
|
+
id: "4",
|
|
38
|
+
label: "Third Value"
|
|
39
|
+
})
|
|
40
|
+
]
|
|
42
41
|
})
|
|
43
42
|
})
|
|
44
43
|
});
|
|
45
44
|
}
|
|
46
45
|
function RadioGroupItem(props) {
|
|
47
|
-
var theme = useTheme(),
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
{
|
|
54
|
-
providerValue,
|
|
55
|
-
native,
|
|
56
|
-
bubbleInput,
|
|
57
|
-
rovingFocusGroupAttrs,
|
|
58
|
-
frameAttrs,
|
|
59
|
-
isFormControl,
|
|
60
|
-
checked
|
|
61
|
-
} = useRadioGroupItem({
|
|
62
|
-
radioGroupContext: RadioGroupContext,
|
|
63
|
-
value,
|
|
64
|
-
id
|
|
65
|
-
});
|
|
66
|
-
return /* @__PURE__ */_jsx(RadioGroupItemContext.Provider, {
|
|
46
|
+
var theme = useTheme(), { value, id, label } = props, { providerValue, native, bubbleInput, rovingFocusGroupAttrs, frameAttrs, isFormControl, checked } = useRadioGroupItem({
|
|
47
|
+
radioGroupContext: RadioGroupContext,
|
|
48
|
+
value,
|
|
49
|
+
id
|
|
50
|
+
});
|
|
51
|
+
return /* @__PURE__ */ _jsx(RadioGroupItemContext.Provider, {
|
|
67
52
|
value: providerValue,
|
|
68
|
-
children: isWeb && native ? bubbleInput : /* @__PURE__ */_jsxs(View, {
|
|
53
|
+
children: isWeb && native ? bubbleInput : /* @__PURE__ */ _jsxs(View, {
|
|
69
54
|
style: styles.radioGroupItemContainer,
|
|
70
|
-
children: [
|
|
71
|
-
|
|
72
|
-
|
|
55
|
+
children: [
|
|
56
|
+
/* @__PURE__ */ _jsx(RovingFocusGroup.Item, {
|
|
57
|
+
...rovingFocusGroupAttrs,
|
|
58
|
+
children: /* @__PURE__ */ _jsx(Pressable, {
|
|
59
|
+
style: {
|
|
60
|
+
...styles.radioGroupItem,
|
|
61
|
+
borderColor: theme.borderColor.get(),
|
|
62
|
+
...checked ? {
|
|
63
|
+
borderWidth: 4
|
|
64
|
+
} : {
|
|
65
|
+
backgroundColor: theme.background.get()
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
...frameAttrs,
|
|
69
|
+
onFocus: frameAttrs.onFocus,
|
|
70
|
+
children: /* @__PURE__ */ _jsx(RadioGroupItemIndicator, {})
|
|
71
|
+
})
|
|
72
|
+
}),
|
|
73
|
+
/* @__PURE__ */ _jsx(Text, {
|
|
73
74
|
style: {
|
|
74
|
-
|
|
75
|
-
borderColor: theme.borderColor.get(),
|
|
76
|
-
...(checked ? {
|
|
77
|
-
borderWidth: 4
|
|
78
|
-
} : {
|
|
79
|
-
backgroundColor: theme.background.get()
|
|
80
|
-
})
|
|
75
|
+
color: theme.color.get()
|
|
81
76
|
},
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
}), /* @__PURE__ */_jsx(Text, {
|
|
87
|
-
style: {
|
|
88
|
-
color: theme.color.get()
|
|
89
|
-
},
|
|
90
|
-
children: label
|
|
91
|
-
}), isFormControl && bubbleInput]
|
|
77
|
+
children: label
|
|
78
|
+
}),
|
|
79
|
+
isFormControl && bubbleInput
|
|
80
|
+
]
|
|
92
81
|
})
|
|
93
82
|
});
|
|
94
83
|
}
|
|
95
84
|
function RadioGroupItemIndicator() {
|
|
96
|
-
var theme = useTheme(),
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
return params.checked ? /* @__PURE__ */_jsx(View, {
|
|
85
|
+
var theme = useTheme(), params = useRadioGroupItemIndicator({
|
|
86
|
+
radioGroupItemContext: RadioGroupItemContext,
|
|
87
|
+
disabled: !1
|
|
88
|
+
});
|
|
89
|
+
return params.checked ? /* @__PURE__ */ _jsx(View, {
|
|
102
90
|
style: {
|
|
103
91
|
...styles.radioGroupItemIndicator,
|
|
104
92
|
backgroundColor: theme.color.get()
|
|
@@ -130,5 +118,7 @@ var styles = StyleSheet.create({
|
|
|
130
118
|
gap: 12
|
|
131
119
|
}
|
|
132
120
|
});
|
|
133
|
-
export {
|
|
134
|
-
|
|
121
|
+
export {
|
|
122
|
+
RadioGroupHeadlessDemo
|
|
123
|
+
};
|
|
124
|
+
//# sourceMappingURL=RadioGroupHeadlessDemo.js.map
|
|
@@ -1 +1,6 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Users/n8/tamagui/code/demos/src/RadioGroupHeadlessDemo.tsx"],
|
|
4
|
+
"mappings": ";AAIA,SACEA,eACAC,mBACAC,kCACK;AACP,SAASC,wBAAwB;AACjC,OAAOC,WAAW;AAClB,SAASC,WAAWC,YAAYC,MAAMC,YAAY;AAClD,SAASC,OAAOC,gBAAgB;AAEhC,IAAMC,oBAAoBP,sBAAMQ,cAAsC,CAAC,CAAA,GACjEC,wBAAwBT,sBAAMQ,cAA0C;EAC5EE,SAAS;EACTC,UAAU;AACZ,CAAA;AAEO,SAASC,yBAAAA;AACd,MAAM,EAAEC,eAAeC,YAAYC,sBAAqB,IAAKnB,cAAc;IACzEoB,aAAa;IACbC,MAAM;IACNC,cAAc;EAChB,CAAA;AACA,SACE,qBAACX,kBAAkBY,UAAQ;IAACC,OAAOP;cACjC,qBAACd,kBAAAA;MAAkB,GAAGgB;gBACpB,sBAACX,MAAAA;QAAKiB,OAAOC,OAAOC;QAAa,GAAGT;;UAClC,qBAACU,gBAAAA;YAAeJ,OAAM;YAAIK,IAAG;YAAIC,OAAM;;UACvC,qBAACF,gBAAAA;YAAeJ,OAAM;YAAIK,IAAG;YAAIC,OAAM;;UACvC,qBAACF,gBAAAA;YAAeJ,OAAM;YAAIK,IAAG;YAAIC,OAAM;;;;;;AAKjD;AAEA,SAASF,eAAeG,OAIvB;AACC,MAAMC,QAAQtB,SAAAA,GACR,EAAEc,OAAOK,IAAIC,MAAK,IAAKC,OACvB,EACJd,eACAgB,QACAC,aACAf,uBACAD,YACAiB,eACArB,QAAO,IACLb,kBAAkB;IACpBmC,mBAAmBzB;IACnBa;IACAK;EACF,CAAA;AAEA,SACE,qBAAChB,sBAAsBU,UAAQ;IAACC,OAAOP;cACpCR,SAASwB,SACRC,cAEA,sBAAC1B,MAAAA;MAAKiB,OAAOC,OAAOW;;QAClB,qBAAClC,iBAAiBmC,MAAI;UAAE,GAAGnB;oBACzB,qBAACd,WAAAA;YACCoB,OAAO;cACL,GAAGC,OAAOa;cACLC,aAAaR,MAAMQ,YAAYC,IAAG;cACvC,GAAI3B,UACA;gBAAE4B,aAAa;cAAE,IACjB;gBAAEC,iBAAiBX,MAAMY,WAAWH,IAAG;cAAG;YAChD;YACC,GAAGvB;YACJ2B,SAAS3B,WAAW2B;sBAEpB,qBAACC,yBAAAA,CAAAA,CAAAA;;;QAGL,qBAACvC,MAAAA;UAAKkB,OAAO;YAAEsB,OAAOf,MAAMe,MAAMN,IAAG;UAAG;oBAAIX;;QAC3CK,iBAAiBD;;;;AAK5B;AAEA,SAASY,0BAAAA;AACP,MAAMd,QAAQtB,SAAAA,GACRsC,SAAS9C,2BAA2B;IACxC+C,uBAAuBpC;IACvBE,UAAU;EACZ,CAAA;AACA,SAAIiC,OAAOlC,UAEP,qBAACN,MAAAA;IACCiB,OAAO;MACL,GAAGC,OAAOwB;MACVP,iBAAiBX,MAAMe,MAAMN,IAAG;IAClC;IACC,GAAGO;OAIH;AACT;AAEA,IAAMtB,SAASpB,WAAW6C,OAAO;EAC/BxB,YAAY;IACVyB,eAAe;IACfC,KAAK;IACLC,YAAY;EACd;EACAf,gBAAgB;IACdG,aAAa;IACba,OAAO;IACPC,QAAQ;IACRC,gBAAgB;IAChBH,YAAY;EACd;EACAJ,yBAAyB;IACvBK,OAAO;IACPC,QAAQ;EACV;EACAnB,yBAAyB;IACvBoB,gBAAgB;IAChBH,YAAY;IACZF,eAAe;IACfC,KAAK;EACP;AACF,CAAA;",
|
|
5
|
+
"names": ["useRadioGroup", "useRadioGroupItem", "useRadioGroupItemIndicator", "RovingFocusGroup", "React", "Pressable", "StyleSheet", "Text", "View", "isWeb", "useTheme", "RadioGroupContext", "createContext", "RadioGroupItemContext", "checked", "disabled", "RadioGroupHeadlessDemo", "providerValue", "frameAttrs", "rovingFocusGroupAttrs", "orientation", "name", "defaultValue", "Provider", "value", "style", "styles", "radioGroup", "RadioGroupItem", "id", "label", "props", "theme", "native", "bubbleInput", "isFormControl", "radioGroupContext", "radioGroupItemContainer", "Item", "radioGroupItem", "borderColor", "get", "borderWidth", "backgroundColor", "background", "onFocus", "RadioGroupItemIndicator", "color", "params", "radioGroupItemContext", "radioGroupItemIndicator", "create", "flexDirection", "gap", "alignItems", "width", "height", "justifyContent"]
|
|
6
|
+
}
|
|
@@ -1,119 +1,121 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Label, ThemeableStack, XStack, YStack, styled } from "tamagui";
|
|
3
3
|
import { createRadioGroup } from "@tamagui/radio-group";
|
|
4
|
-
var RADIO_GROUP_ITEM_NAME = "RadioGroupItem",
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
outlineWidth: 0
|
|
48
|
-
}
|
|
4
|
+
var RADIO_GROUP_ITEM_NAME = "RadioGroupItem", RadioGroupItemFrame = styled(ThemeableStack, {
|
|
5
|
+
name: RADIO_GROUP_ITEM_NAME,
|
|
6
|
+
tag: "button",
|
|
7
|
+
borderRadius: 1e3,
|
|
8
|
+
backgroundColor: "$background",
|
|
9
|
+
alignItems: "center",
|
|
10
|
+
justifyContent: "center",
|
|
11
|
+
borderWidth: 1,
|
|
12
|
+
borderColor: "$borderColor",
|
|
13
|
+
padding: 0,
|
|
14
|
+
hoverStyle: {
|
|
15
|
+
borderColor: "$borderColorHover",
|
|
16
|
+
backgroundColor: "$backgroundHover"
|
|
17
|
+
},
|
|
18
|
+
focusStyle: {
|
|
19
|
+
borderColor: "$borderColorHover",
|
|
20
|
+
backgroundColor: "$backgroundHover"
|
|
21
|
+
},
|
|
22
|
+
focusVisibleStyle: {
|
|
23
|
+
outlineStyle: "solid",
|
|
24
|
+
outlineWidth: 2,
|
|
25
|
+
outlineColor: "$outlineColor"
|
|
26
|
+
},
|
|
27
|
+
pressStyle: {
|
|
28
|
+
borderColor: "$borderColorFocus",
|
|
29
|
+
backgroundColor: "$backgroundFocus"
|
|
30
|
+
},
|
|
31
|
+
variants: {
|
|
32
|
+
disabled: {
|
|
33
|
+
true: {
|
|
34
|
+
pointerEvents: "none",
|
|
35
|
+
userSelect: "none",
|
|
36
|
+
cursor: "not-allowed",
|
|
37
|
+
hoverStyle: {
|
|
38
|
+
borderColor: "$borderColor",
|
|
39
|
+
backgroundColor: "$background"
|
|
40
|
+
},
|
|
41
|
+
pressStyle: {
|
|
42
|
+
borderColor: "$borderColor",
|
|
43
|
+
backgroundColor: "$background"
|
|
44
|
+
},
|
|
45
|
+
focusVisibleStyle: {
|
|
46
|
+
outlineWidth: 0
|
|
49
47
|
}
|
|
50
48
|
}
|
|
51
49
|
}
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
vertical: {
|
|
72
|
-
flexDirection: "column",
|
|
73
|
-
spaceDirection: "vertical"
|
|
74
|
-
}
|
|
50
|
+
}
|
|
51
|
+
}), RADIO_GROUP_INDICATOR_NAME = "RadioGroupIndicator", RadioGroupIndicatorFrame = styled(ThemeableStack, {
|
|
52
|
+
name: RADIO_GROUP_INDICATOR_NAME,
|
|
53
|
+
width: "53%",
|
|
54
|
+
height: "53%",
|
|
55
|
+
borderRadius: 1e3,
|
|
56
|
+
backgroundColor: "$color",
|
|
57
|
+
pressTheme: !0
|
|
58
|
+
}), RADIO_GROUP_NAME = "RadioGroup", RadioGroupFrame = styled(ThemeableStack, {
|
|
59
|
+
name: RADIO_GROUP_NAME,
|
|
60
|
+
variants: {
|
|
61
|
+
orientation: {
|
|
62
|
+
horizontal: {
|
|
63
|
+
flexDirection: "row",
|
|
64
|
+
spaceDirection: "horizontal"
|
|
65
|
+
},
|
|
66
|
+
vertical: {
|
|
67
|
+
flexDirection: "column",
|
|
68
|
+
spaceDirection: "vertical"
|
|
75
69
|
}
|
|
76
70
|
}
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
71
|
+
}
|
|
72
|
+
}), RadioGroup = createRadioGroup({
|
|
73
|
+
Frame: RadioGroupFrame,
|
|
74
|
+
Indicator: RadioGroupIndicatorFrame,
|
|
75
|
+
Item: RadioGroupItemFrame
|
|
76
|
+
});
|
|
83
77
|
function RadioGroupUnstyledDemo() {
|
|
84
|
-
return /* @__PURE__ */_jsx(RadioGroup, {
|
|
78
|
+
return /* @__PURE__ */ _jsx(RadioGroup, {
|
|
85
79
|
"aria-labelledby": "Select one item",
|
|
86
80
|
defaultValue: "3",
|
|
87
81
|
name: "form",
|
|
88
|
-
children: /* @__PURE__ */_jsxs(YStack, {
|
|
82
|
+
children: /* @__PURE__ */ _jsxs(YStack, {
|
|
89
83
|
width: 200,
|
|
90
84
|
alignItems: "center",
|
|
91
85
|
space: "$2",
|
|
92
|
-
children: [
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
86
|
+
children: [
|
|
87
|
+
/* @__PURE__ */ _jsx(RadioGroupItemWithLabel, {
|
|
88
|
+
value: "2",
|
|
89
|
+
label: "Option One"
|
|
90
|
+
}),
|
|
91
|
+
/* @__PURE__ */ _jsx(RadioGroupItemWithLabel, {
|
|
92
|
+
value: "3",
|
|
93
|
+
label: "Option Two"
|
|
94
|
+
})
|
|
95
|
+
]
|
|
99
96
|
})
|
|
100
97
|
});
|
|
101
98
|
}
|
|
102
99
|
function RadioGroupItemWithLabel(props) {
|
|
103
100
|
var id = `radiogroup-${props.value}`;
|
|
104
|
-
return /* @__PURE__ */_jsxs(XStack, {
|
|
101
|
+
return /* @__PURE__ */ _jsxs(XStack, {
|
|
105
102
|
width: 300,
|
|
106
103
|
alignItems: "center",
|
|
107
104
|
gap: "$4",
|
|
108
|
-
children: [
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
105
|
+
children: [
|
|
106
|
+
/* @__PURE__ */ _jsx(RadioGroup.Item, {
|
|
107
|
+
value: props.value,
|
|
108
|
+
id,
|
|
109
|
+
children: /* @__PURE__ */ _jsx(RadioGroup.Indicator, {})
|
|
110
|
+
}),
|
|
111
|
+
/* @__PURE__ */ _jsx(Label, {
|
|
112
|
+
htmlFor: id,
|
|
113
|
+
children: props.label
|
|
114
|
+
})
|
|
115
|
+
]
|
|
116
116
|
});
|
|
117
117
|
}
|
|
118
|
-
export {
|
|
119
|
-
|
|
118
|
+
export {
|
|
119
|
+
RadioGroupUnstyledDemo
|
|
120
|
+
};
|
|
121
|
+
//# sourceMappingURL=RadioGroupUnstyledDemo.js.map
|
|
@@ -1 +1,6 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Users/n8/tamagui/code/demos/src/RadioGroupUnstyledDemo.tsx"],
|
|
4
|
+
"mappings": ";AACA,SAASA,OAAOC,gBAAgBC,QAAQC,QAAQC,cAAc;AAE9D,SAASC,wBAAwB;AAEjC,IAAMC,wBAAwB,kBAExBC,sBAAsBH,OAAOH,gBAAgB;EACjDO,MAAMF;EACNG,KAAK;EAELC,cAAc;EACdC,iBAAiB;EACjBC,YAAY;EACZC,gBAAgB;EAChBC,aAAa;EACbC,aAAa;EACbC,SAAS;EAETC,YAAY;IACVF,aAAa;IACbJ,iBAAiB;EACnB;EAEAO,YAAY;IACVH,aAAa;IACbJ,iBAAiB;EACnB;EAEAQ,mBAAmB;IACjBC,cAAc;IACdC,cAAc;IACdC,cAAc;EAChB;EAEAC,YAAY;IACVR,aAAa;IACbJ,iBAAiB;EACnB;EAEAa,UAAU;IACRC,UAAU;MACRC,MAAM;QACJC,eAAe;QACfC,YAAY;QACZC,QAAQ;QAERZ,YAAY;UACVF,aAAa;UACbJ,iBAAiB;QACnB;QAEAY,YAAY;UACVR,aAAa;UACbJ,iBAAiB;QACnB;QAEAQ,mBAAmB;UACjBE,cAAc;QAChB;MACF;IACF;EACF;AACF,CAAA,GAEMS,6BAA6B,uBAE7BC,2BAA2B3B,OAAOH,gBAAgB;EACtDO,MAAMsB;EACNE,OAAO;EACPC,QAAQ;EACRvB,cAAc;EACdC,iBAAiB;EACjBuB,YAAY;AACd,CAAA,GAEMC,mBAAmB,cAEnBC,kBAAkBhC,OAAOH,gBAAgB;EAC7CO,MAAM2B;EACNX,UAAU;IACRa,aAAa;MACXC,YAAY;QACVC,eAAe;QACfC,gBAAgB;MAClB;MACAC,UAAU;QACRF,eAAe;QACfC,gBAAgB;MAClB;IACF;EACF;AACF,CAAA,GAEME,aAAarC,iBAAiB;EAClCsC,OAAOP;EACPQ,WAAWb;EACXc,MAAMtC;AACR,CAAA;AAEO,SAASuC,yBAAAA;AACd,SACE,qBAACJ,YAAAA;IAAWK,mBAAgB;IAAkBC,cAAa;IAAIxC,MAAK;cAClE,sBAACL,QAAAA;MAAO6B,OAAO;MAAKpB,YAAW;MAASqC,OAAM;;QAC5C,qBAACC,yBAAAA;UAAwBC,OAAM;UAAIC,OAAM;;QACzC,qBAACF,yBAAAA;UAAwBC,OAAM;UAAIC,OAAM;;;;;AAIjD;AAEA,SAASF,wBAAwBG,OAGhC;AACC,MAAMC,KAAK,cAAcD,MAAMF,KAAK;AACpC,SACE,sBAACjD,QAAAA;IAAO8B,OAAO;IAAKpB,YAAW;IAAS2C,KAAI;;MAC1C,qBAACb,WAAWG,MAAI;QAACM,OAAOE,MAAMF;QAAOG;kBACnC,qBAACZ,WAAWE,WAAS,CAAA,CAAA;;MAGvB,qBAAC5C,OAAAA;QAAMwD,SAASF;kBAAKD,MAAMD;;;;AAGjC;",
|
|
5
|
+
"names": ["Label", "ThemeableStack", "XStack", "YStack", "styled", "createRadioGroup", "RADIO_GROUP_ITEM_NAME", "RadioGroupItemFrame", "name", "tag", "borderRadius", "backgroundColor", "alignItems", "justifyContent", "borderWidth", "borderColor", "padding", "hoverStyle", "focusStyle", "focusVisibleStyle", "outlineStyle", "outlineWidth", "outlineColor", "pressStyle", "variants", "disabled", "true", "pointerEvents", "userSelect", "cursor", "RADIO_GROUP_INDICATOR_NAME", "RadioGroupIndicatorFrame", "width", "height", "pressTheme", "RADIO_GROUP_NAME", "RadioGroupFrame", "orientation", "horizontal", "flexDirection", "spaceDirection", "vertical", "RadioGroup", "Frame", "Indicator", "Item", "RadioGroupUnstyledDemo", "aria-labelledby", "defaultValue", "space", "RadioGroupItemWithLabel", "value", "label", "props", "id", "gap", "htmlFor"]
|
|
6
|
+
}
|
|
@@ -3,9 +3,8 @@ import React from "react";
|
|
|
3
3
|
import { addTheme, replaceTheme } from "@tamagui/theme";
|
|
4
4
|
import { Button, Square, Theme, XStack, YStack, useForceUpdate, useIsomorphicLayoutEffect } from "tamagui";
|
|
5
5
|
function ReplaceThemeDemo() {
|
|
6
|
-
var [theme, setTheme] = React.useState(),
|
|
7
|
-
|
|
8
|
-
return useIsomorphicLayoutEffect(function () {
|
|
6
|
+
var [theme, setTheme] = React.useState(), update = useForceUpdate();
|
|
7
|
+
return useIsomorphicLayoutEffect(function() {
|
|
9
8
|
addTheme({
|
|
10
9
|
name: "mytheme",
|
|
11
10
|
insertCSS: !0,
|
|
@@ -14,31 +13,36 @@ function ReplaceThemeDemo() {
|
|
|
14
13
|
color2: "green"
|
|
15
14
|
}
|
|
16
15
|
}), setTheme("mytheme");
|
|
17
|
-
}, []), /* @__PURE__ */_jsxs(YStack, {
|
|
16
|
+
}, []), /* @__PURE__ */ _jsxs(YStack, {
|
|
18
17
|
alignItems: "center",
|
|
19
18
|
space: !0,
|
|
20
|
-
children: [
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
19
|
+
children: [
|
|
20
|
+
/* @__PURE__ */ _jsx(XStack, {
|
|
21
|
+
gap: "$5",
|
|
22
|
+
children: /* @__PURE__ */ _jsx(Theme, {
|
|
23
|
+
name: theme ?? null,
|
|
24
|
+
children: /* @__PURE__ */ _jsx(Square, {
|
|
25
|
+
borderRadius: "$8",
|
|
26
|
+
size: 100,
|
|
27
|
+
backgroundColor: "$color"
|
|
28
|
+
})
|
|
28
29
|
})
|
|
30
|
+
}),
|
|
31
|
+
/* @__PURE__ */ _jsx(Button, {
|
|
32
|
+
onPress: function() {
|
|
33
|
+
replaceTheme({
|
|
34
|
+
name: "mytheme",
|
|
35
|
+
theme: {
|
|
36
|
+
color: "blue"
|
|
37
|
+
}
|
|
38
|
+
}), update();
|
|
39
|
+
},
|
|
40
|
+
children: "Replace theme to only have $color: blue"
|
|
29
41
|
})
|
|
30
|
-
|
|
31
|
-
onPress: function () {
|
|
32
|
-
replaceTheme({
|
|
33
|
-
name: "mytheme",
|
|
34
|
-
theme: {
|
|
35
|
-
color: "blue"
|
|
36
|
-
}
|
|
37
|
-
}), update();
|
|
38
|
-
},
|
|
39
|
-
children: "Replace theme to only have $color: blue"
|
|
40
|
-
})]
|
|
42
|
+
]
|
|
41
43
|
});
|
|
42
44
|
}
|
|
43
|
-
export {
|
|
44
|
-
|
|
45
|
+
export {
|
|
46
|
+
ReplaceThemeDemo
|
|
47
|
+
};
|
|
48
|
+
//# sourceMappingURL=ReplaceThemeDemo.js.map
|
|
@@ -1 +1,6 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Users/n8/tamagui/code/demos/src/ReplaceThemeDemo.tsx"],
|
|
4
|
+
"mappings": ";AAAA,OAAOA,WAAW;AAClB,SAASC,UAAUC,oBAAoB;AAEvC,SACEC,QACAC,QACAC,OACAC,QACAC,QACAC,gBACAC,iCACK;AAEA,SAASC,mBAAAA;AACd,MAAM,CAACC,OAAOC,QAAAA,IAAYZ,MAAMa,SAAQ,GAClCC,SAASN,eAAAA;AAEfC,mCAA0B,WAAA;AACxBR,aAAS;MACPc,MAAM;MACNC,WAAW;MACXL,OAAO;QACLM,OAAO;QACPC,QAAQ;MACV;IACF,CAAA,GACAN,SAAS,SAAA;EACX,GAAG,CAAA,CAAE,GAGH,sBAACL,QAAAA;IAAOY,YAAW;IAASC,OAAK;;MAC/B,qBAACd,QAAAA;QAAOe,KAAI;kBACV,qBAAChB,OAAAA;UAAMU,MAAMJ,SAAS;oBACpB,qBAACP,QAAAA;YAAOkB,cAAa;YAAKC,MAAM;YAAKC,iBAAgB;;;;MAIzD,qBAACrB,QAAAA;QACCsB,SAAS,WAAA;AACPvB,uBAAa;YACXa,MAAM;YACNJ,OAAO;cACLM,OAAO;YACT;UACF,CAAA,GACAH,OAAAA;QACF;kBACD;;;;AAKP;",
|
|
5
|
+
"names": ["React", "addTheme", "replaceTheme", "Button", "Square", "Theme", "XStack", "YStack", "useForceUpdate", "useIsomorphicLayoutEffect", "ReplaceThemeDemo", "theme", "setTheme", "useState", "update", "name", "insertCSS", "color", "color2", "alignItems", "space", "gap", "borderRadius", "size", "backgroundColor", "onPress"]
|
|
6
|
+
}
|
|
@@ -1,51 +1,62 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Circle, ScrollView, Square, XStack } from "tamagui";
|
|
3
3
|
function ScrollViewDemo() {
|
|
4
|
-
return /* @__PURE__ */_jsx(ScrollView, {
|
|
4
|
+
return /* @__PURE__ */ _jsx(ScrollView, {
|
|
5
5
|
maxHeight: 250,
|
|
6
6
|
width: "75%",
|
|
7
7
|
backgroundColor: "$background",
|
|
8
8
|
padding: "$4",
|
|
9
9
|
borderRadius: "$4",
|
|
10
|
-
children: /* @__PURE__ */_jsxs(XStack, {
|
|
10
|
+
children: /* @__PURE__ */ _jsxs(XStack, {
|
|
11
11
|
flexWrap: "wrap",
|
|
12
12
|
alignItems: "center",
|
|
13
13
|
justifyContent: "center",
|
|
14
|
-
children: [
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
14
|
+
children: [
|
|
15
|
+
/* @__PURE__ */ _jsx(Square, {
|
|
16
|
+
margin: "$4",
|
|
17
|
+
size: 120,
|
|
18
|
+
backgroundColor: "$red9"
|
|
19
|
+
}),
|
|
20
|
+
/* @__PURE__ */ _jsx(Circle, {
|
|
21
|
+
margin: "$4",
|
|
22
|
+
size: 120,
|
|
23
|
+
backgroundColor: "$orange9"
|
|
24
|
+
}),
|
|
25
|
+
/* @__PURE__ */ _jsx(Square, {
|
|
26
|
+
margin: "$4",
|
|
27
|
+
size: 120,
|
|
28
|
+
backgroundColor: "$yellow9"
|
|
29
|
+
}),
|
|
30
|
+
/* @__PURE__ */ _jsx(Circle, {
|
|
31
|
+
margin: "$4",
|
|
32
|
+
size: 120,
|
|
33
|
+
backgroundColor: "$green9"
|
|
34
|
+
}),
|
|
35
|
+
/* @__PURE__ */ _jsx(Square, {
|
|
36
|
+
margin: "$4",
|
|
37
|
+
size: 120,
|
|
38
|
+
backgroundColor: "$blue9"
|
|
39
|
+
}),
|
|
40
|
+
/* @__PURE__ */ _jsx(Circle, {
|
|
41
|
+
margin: "$4",
|
|
42
|
+
size: 120,
|
|
43
|
+
backgroundColor: "$purple9"
|
|
44
|
+
}),
|
|
45
|
+
/* @__PURE__ */ _jsx(Square, {
|
|
46
|
+
margin: "$4",
|
|
47
|
+
size: 120,
|
|
48
|
+
backgroundColor: "$pink9"
|
|
49
|
+
}),
|
|
50
|
+
/* @__PURE__ */ _jsx(Circle, {
|
|
51
|
+
margin: "$4",
|
|
52
|
+
size: 120,
|
|
53
|
+
backgroundColor: "$red9"
|
|
54
|
+
})
|
|
55
|
+
]
|
|
47
56
|
})
|
|
48
57
|
});
|
|
49
58
|
}
|
|
50
|
-
export {
|
|
51
|
-
|
|
59
|
+
export {
|
|
60
|
+
ScrollViewDemo
|
|
61
|
+
};
|
|
62
|
+
//# sourceMappingURL=ScrollViewDemo.js.map
|
|
@@ -1 +1,6 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Users/n8/tamagui/code/demos/src/ScrollViewDemo.tsx"],
|
|
4
|
+
"mappings": ";AAAA,SAASA,QAAQC,YAAYC,QAAQC,cAAc;AAE5C,SAASC,iBAAAA;AACd,SACE,qBAACH,YAAAA;IACCI,WAAW;IACXC,OAAM;IACNC,iBAAgB;IAChBC,SAAQ;IACRC,cAAa;cAEb,sBAACN,QAAAA;MAAOO,UAAS;MAAOC,YAAW;MAASC,gBAAe;;QACzD,qBAACV,QAAAA;UAAOW,QAAO;UAAKC,MAAM;UAAKP,iBAAgB;;QAC/C,qBAACP,QAAAA;UAAOa,QAAO;UAAKC,MAAM;UAAKP,iBAAgB;;QAC/C,qBAACL,QAAAA;UAAOW,QAAO;UAAKC,MAAM;UAAKP,iBAAgB;;QAC/C,qBAACP,QAAAA;UAAOa,QAAO;UAAKC,MAAM;UAAKP,iBAAgB;;QAC/C,qBAACL,QAAAA;UAAOW,QAAO;UAAKC,MAAM;UAAKP,iBAAgB;;QAC/C,qBAACP,QAAAA;UAAOa,QAAO;UAAKC,MAAM;UAAKP,iBAAgB;;QAC/C,qBAACL,QAAAA;UAAOW,QAAO;UAAKC,MAAM;UAAKP,iBAAgB;;QAC/C,qBAACP,QAAAA;UAAOa,QAAO;UAAKC,MAAM;UAAKP,iBAAgB;;;;;AAIvD;",
|
|
5
|
+
"names": ["Circle", "ScrollView", "Square", "XStack", "ScrollViewDemo", "maxHeight", "width", "backgroundColor", "padding", "borderRadius", "flexWrap", "alignItems", "justifyContent", "margin", "size"]
|
|
6
|
+
}
|