@tamagui/demos 1.113.0 → 1.113.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/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
|
@@ -1 +1,6 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Users/n8/tamagui/code/demos/src/HeadingsDemo.tsx"],
|
|
4
|
+
"mappings": ";AAAA,OAAkB;AAClB,SAASA,IAAIC,IAAIC,IAAIC,IAAIC,IAAIC,IAAIC,cAAc;AAExC,SAASC,eAAAA;AACd,SACE,sBAACD,QAAAA;IAAOE,WAAU;;MAChB,qBAACR,IAAAA;kBAAG;;MACJ,qBAACC,IAAAA;kBAAG;;MACJ,qBAACC,IAAAA;kBAAG;;MACJ,qBAACC,IAAAA;kBAAG;;MACJ,qBAACC,IAAAA;kBAAG;;MACJ,qBAACC,IAAAA;kBAAG;;;;AAGV;",
|
|
5
|
+
"names": ["H1", "H2", "H3", "H4", "H5", "H6", "YStack", "HeadingsDemo", "alignSelf"]
|
|
6
|
+
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { Image } from "tamagui";
|
|
3
3
|
function ImageDemo() {
|
|
4
|
-
return /* @__PURE__ */_jsx(Image, {
|
|
4
|
+
return /* @__PURE__ */ _jsx(Image, {
|
|
5
5
|
source: {
|
|
6
6
|
uri: "https://picsum.photos/200/300",
|
|
7
7
|
width: 200,
|
|
@@ -9,5 +9,7 @@ function ImageDemo() {
|
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
11
|
}
|
|
12
|
-
export {
|
|
13
|
-
|
|
12
|
+
export {
|
|
13
|
+
ImageDemo
|
|
14
|
+
};
|
|
15
|
+
//# sourceMappingURL=ImageDemo.js.map
|
|
@@ -1 +1,6 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Users/n8/tamagui/code/demos/src/ImageDemo.tsx"],
|
|
4
|
+
"mappings": ";AAAA,SAASA,aAAa;AAEf,SAASC,YAAAA;AACd,SACE,qBAACD,OAAAA;IACCE,QAAQ;MACNC,KAAK;MACLC,OAAO;MACPC,QAAQ;IACV;;AAGN;",
|
|
5
|
+
"names": ["Image", "ImageDemo", "source", "uri", "width", "height"]
|
|
6
|
+
}
|
|
@@ -1,37 +1,47 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Button, Input, TextArea, XStack, YStack } from "tamagui";
|
|
3
3
|
function InputsDemo() {
|
|
4
|
-
return /* @__PURE__ */_jsxs(YStack, {
|
|
4
|
+
return /* @__PURE__ */ _jsxs(YStack, {
|
|
5
5
|
width: 200,
|
|
6
6
|
minHeight: 250,
|
|
7
7
|
overflow: "hidden",
|
|
8
8
|
space: "$2",
|
|
9
9
|
margin: "$3",
|
|
10
10
|
padding: "$2",
|
|
11
|
-
children: [
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
11
|
+
children: [
|
|
12
|
+
/* @__PURE__ */ _jsx(InputDemo, {
|
|
13
|
+
size: "$2"
|
|
14
|
+
}),
|
|
15
|
+
/* @__PURE__ */ _jsx(InputDemo, {
|
|
16
|
+
size: "$3"
|
|
17
|
+
}),
|
|
18
|
+
/* @__PURE__ */ _jsx(InputDemo, {
|
|
19
|
+
size: "$4"
|
|
20
|
+
}),
|
|
21
|
+
/* @__PURE__ */ _jsx(TextArea, {
|
|
22
|
+
placeholder: "Enter your details..."
|
|
23
|
+
})
|
|
24
|
+
]
|
|
20
25
|
});
|
|
21
26
|
}
|
|
22
27
|
function InputDemo(props) {
|
|
23
|
-
return /* @__PURE__ */_jsxs(XStack, {
|
|
28
|
+
return /* @__PURE__ */ _jsxs(XStack, {
|
|
24
29
|
alignItems: "center",
|
|
25
30
|
space: "$2",
|
|
26
|
-
children: [
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
31
|
+
children: [
|
|
32
|
+
/* @__PURE__ */ _jsx(Input, {
|
|
33
|
+
flex: 1,
|
|
34
|
+
size: props.size,
|
|
35
|
+
placeholder: `Size ${props.size}...`
|
|
36
|
+
}),
|
|
37
|
+
/* @__PURE__ */ _jsx(Button, {
|
|
38
|
+
size: props.size,
|
|
39
|
+
children: "Go"
|
|
40
|
+
})
|
|
41
|
+
]
|
|
34
42
|
});
|
|
35
43
|
}
|
|
36
|
-
export {
|
|
37
|
-
|
|
44
|
+
export {
|
|
45
|
+
InputsDemo
|
|
46
|
+
};
|
|
47
|
+
//# sourceMappingURL=InputsDemo.js.map
|
|
@@ -1 +1,6 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Users/n8/tamagui/code/demos/src/InputsDemo.tsx"],
|
|
4
|
+
"mappings": ";AACA,SAASA,QAAQC,OAAOC,UAAUC,QAAQC,cAAc;AAEjD,SAASC,aAAAA;AACd,SACE,sBAACD,QAAAA;IACCE,OAAO;IACPC,WAAW;IACXC,UAAS;IACTC,OAAM;IACNC,QAAO;IACPC,SAAQ;;MAER,qBAACC,WAAAA;QAAUC,MAAK;;MAChB,qBAACD,WAAAA;QAAUC,MAAK;;MAChB,qBAACD,WAAAA;QAAUC,MAAK;;MAChB,qBAACX,UAAAA;QAASY,aAAY;;;;AAG5B;AAEA,SAASF,UAAUG,OAA2B;AAC5C,SACE,sBAACZ,QAAAA;IAAOa,YAAW;IAASP,OAAM;;MAChC,qBAACR,OAAAA;QAAMgB,MAAM;QAAGJ,MAAME,MAAMF;QAAMC,aAAa,QAAQC,MAAMF,IAAI;;MACjE,qBAACb,QAAAA;QAAOa,MAAME,MAAMF;kBAAM;;;;AAGhC;",
|
|
5
|
+
"names": ["Button", "Input", "TextArea", "XStack", "YStack", "InputsDemo", "width", "minHeight", "overflow", "space", "margin", "padding", "InputDemo", "size", "placeholder", "props", "alignItems", "flex"]
|
|
6
|
+
}
|
|
@@ -1,37 +1,48 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Input, Label, Switch, XStack, YStack } from "tamagui";
|
|
3
3
|
function LabelDemo() {
|
|
4
|
-
return /* @__PURE__ */_jsxs(YStack, {
|
|
4
|
+
return /* @__PURE__ */ _jsxs(YStack, {
|
|
5
5
|
padding: "$3",
|
|
6
6
|
minWidth: 300,
|
|
7
7
|
space: "$4",
|
|
8
|
-
children: [
|
|
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
|
-
|
|
8
|
+
children: [
|
|
9
|
+
/* @__PURE__ */ _jsxs(XStack, {
|
|
10
|
+
alignItems: "center",
|
|
11
|
+
space: "$4",
|
|
12
|
+
children: [
|
|
13
|
+
/* @__PURE__ */ _jsx(Label, {
|
|
14
|
+
width: 90,
|
|
15
|
+
htmlFor: "name",
|
|
16
|
+
children: "Name"
|
|
17
|
+
}),
|
|
18
|
+
/* @__PURE__ */ _jsx(Input, {
|
|
19
|
+
flex: 1,
|
|
20
|
+
id: "name",
|
|
21
|
+
defaultValue: "Nate Wienert"
|
|
22
|
+
})
|
|
23
|
+
]
|
|
24
|
+
}),
|
|
25
|
+
/* @__PURE__ */ _jsxs(XStack, {
|
|
26
|
+
alignItems: "center",
|
|
27
|
+
space: "$4",
|
|
28
|
+
children: [
|
|
29
|
+
/* @__PURE__ */ _jsx(Label, {
|
|
30
|
+
width: 90,
|
|
31
|
+
htmlFor: "notify",
|
|
32
|
+
children: "Notifications"
|
|
33
|
+
}),
|
|
34
|
+
/* @__PURE__ */ _jsx(Switch, {
|
|
35
|
+
id: "notify",
|
|
36
|
+
children: /* @__PURE__ */ _jsx(Switch.Thumb, {
|
|
37
|
+
animation: "quick"
|
|
38
|
+
})
|
|
39
|
+
})
|
|
40
|
+
]
|
|
41
|
+
})
|
|
42
|
+
]
|
|
34
43
|
});
|
|
35
44
|
}
|
|
36
|
-
export {
|
|
37
|
-
|
|
45
|
+
export {
|
|
46
|
+
LabelDemo
|
|
47
|
+
};
|
|
48
|
+
//# sourceMappingURL=LabelDemo.js.map
|
|
@@ -1 +1,6 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Users/n8/tamagui/code/demos/src/LabelDemo.tsx"],
|
|
4
|
+
"mappings": ";AAAA,SAASA,OAAOC,OAAOC,QAAQC,QAAQC,cAAc;AAE9C,SAASC,YAAAA;AACd,SACE,sBAACD,QAAAA;IAAOE,SAAQ;IAAKC,UAAU;IAAKC,OAAM;;MACxC,sBAACL,QAAAA;QAAOM,YAAW;QAASD,OAAM;;UAChC,qBAACP,OAAAA;YAAMS,OAAO;YAAIC,SAAQ;sBAAO;;UAGjC,qBAACX,OAAAA;YAAMY,MAAM;YAAGC,IAAG;YAAOC,cAAa;;;;MAGzC,sBAACX,QAAAA;QAAOM,YAAW;QAASD,OAAM;;UAChC,qBAACP,OAAAA;YAAMS,OAAO;YAAIC,SAAQ;sBAAS;;UAGnC,qBAACT,QAAAA;YAAOW,IAAG;sBACT,qBAACX,OAAOa,OAAK;cAACC,WAAU;;;;;;;AAKlC;",
|
|
5
|
+
"names": ["Input", "Label", "Switch", "XStack", "YStack", "LabelDemo", "padding", "minWidth", "space", "alignItems", "width", "htmlFor", "flex", "id", "defaultValue", "Thumb", "animation"]
|
|
6
|
+
}
|
|
@@ -2,26 +2,49 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { XStack } from "tamagui";
|
|
3
3
|
import { LinearGradient } from "tamagui/linear-gradient";
|
|
4
4
|
function LinearGradientDemo() {
|
|
5
|
-
return /* @__PURE__ */_jsxs(XStack, {
|
|
5
|
+
return /* @__PURE__ */ _jsxs(XStack, {
|
|
6
6
|
space: !0,
|
|
7
|
-
children: [
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
7
|
+
children: [
|
|
8
|
+
/* tokens */
|
|
9
|
+
/* @__PURE__ */ _jsx(LinearGradient, {
|
|
10
|
+
width: "$6",
|
|
11
|
+
height: "$6",
|
|
12
|
+
borderRadius: "$4",
|
|
13
|
+
colors: [
|
|
14
|
+
"$red10",
|
|
15
|
+
"$yellow10"
|
|
16
|
+
],
|
|
17
|
+
start: [
|
|
18
|
+
0,
|
|
19
|
+
1
|
|
20
|
+
],
|
|
21
|
+
end: [
|
|
22
|
+
0,
|
|
23
|
+
0
|
|
24
|
+
]
|
|
25
|
+
}),
|
|
26
|
+
/* theme values */
|
|
27
|
+
/* @__PURE__ */ _jsx(LinearGradient, {
|
|
28
|
+
width: "$6",
|
|
29
|
+
height: "$6",
|
|
30
|
+
borderRadius: "$4",
|
|
31
|
+
colors: [
|
|
32
|
+
"$background",
|
|
33
|
+
"$color"
|
|
34
|
+
],
|
|
35
|
+
start: [
|
|
36
|
+
1,
|
|
37
|
+
1
|
|
38
|
+
],
|
|
39
|
+
end: [
|
|
40
|
+
0,
|
|
41
|
+
0
|
|
42
|
+
]
|
|
43
|
+
})
|
|
44
|
+
]
|
|
24
45
|
});
|
|
25
46
|
}
|
|
26
|
-
export {
|
|
27
|
-
|
|
47
|
+
export {
|
|
48
|
+
LinearGradientDemo
|
|
49
|
+
};
|
|
50
|
+
//# sourceMappingURL=LinearGradientDemo.js.map
|
|
@@ -1 +1,6 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Users/n8/tamagui/code/demos/src/LinearGradientDemo.tsx"],
|
|
4
|
+
"mappings": ";AAAA,SAASA,cAAc;AACvB,SAASC,sBAAsB;AAExB,SAASC,qBAAAA;AACd,SACE,sBAACF,QAAAA;IAAOG,OAAK;;;MAEX,qBAACF,gBAAAA;QACCG,OAAM;QACNC,QAAO;QACPC,cAAa;QACbC,QAAQ;UAAC;UAAU;;QACnBC,OAAO;UAAC;UAAG;;QACXC,KAAK;UAAC;UAAG;;;;MAIX,qBAACR,gBAAAA;QACCG,OAAM;QACNC,QAAO;QACPC,cAAa;QACbC,QAAQ;UAAC;UAAe;;QACxBC,OAAO;UAAC;UAAG;;QACXC,KAAK;UAAC;UAAG;;;;;AAIjB;",
|
|
5
|
+
"names": ["XStack", "LinearGradient", "LinearGradientDemo", "space", "width", "height", "borderRadius", "colors", "start", "end"]
|
|
6
|
+
}
|
|
@@ -2,76 +2,89 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { ChevronRight, Cloud, Moon, Star, Sun } from "@tamagui/lucide-icons";
|
|
3
3
|
import { ListItem, Separator, XStack, YGroup } from "tamagui";
|
|
4
4
|
function ListItemDemo() {
|
|
5
|
-
return /* @__PURE__ */_jsxs(XStack, {
|
|
5
|
+
return /* @__PURE__ */ _jsxs(XStack, {
|
|
6
6
|
$sm: {
|
|
7
7
|
flexDirection: "column"
|
|
8
8
|
},
|
|
9
9
|
paddingHorizontal: "$4",
|
|
10
10
|
space: !0,
|
|
11
|
-
children: [
|
|
11
|
+
children: [
|
|
12
|
+
/* @__PURE__ */ _jsx(ListItemDemo1, {}),
|
|
13
|
+
/* @__PURE__ */ _jsx(ListItemDemo2, {})
|
|
14
|
+
]
|
|
12
15
|
});
|
|
13
16
|
}
|
|
14
17
|
function ListItemDemo1() {
|
|
15
|
-
return /* @__PURE__ */_jsxs(YGroup, {
|
|
18
|
+
return /* @__PURE__ */ _jsxs(YGroup, {
|
|
16
19
|
alignSelf: "center",
|
|
17
20
|
bordered: !0,
|
|
18
21
|
width: 240,
|
|
19
22
|
size: "$4",
|
|
20
|
-
children: [
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
23
|
+
children: [
|
|
24
|
+
/* @__PURE__ */ _jsx(YGroup.Item, {
|
|
25
|
+
children: /* @__PURE__ */ _jsx(ListItem, {
|
|
26
|
+
hoverTheme: !0,
|
|
27
|
+
icon: Star,
|
|
28
|
+
title: "Star",
|
|
29
|
+
subTitle: "Twinkles"
|
|
30
|
+
})
|
|
31
|
+
}),
|
|
32
|
+
/* @__PURE__ */ _jsx(YGroup.Item, {
|
|
33
|
+
children: /* @__PURE__ */ _jsx(ListItem, {
|
|
34
|
+
hoverTheme: !0,
|
|
35
|
+
icon: Moon,
|
|
36
|
+
children: "Moon"
|
|
37
|
+
})
|
|
38
|
+
}),
|
|
39
|
+
/* @__PURE__ */ _jsx(YGroup.Item, {
|
|
40
|
+
children: /* @__PURE__ */ _jsx(ListItem, {
|
|
41
|
+
hoverTheme: !0,
|
|
42
|
+
icon: Sun,
|
|
43
|
+
children: "Sun"
|
|
44
|
+
})
|
|
45
|
+
}),
|
|
46
|
+
/* @__PURE__ */ _jsx(YGroup.Item, {
|
|
47
|
+
children: /* @__PURE__ */ _jsx(ListItem, {
|
|
48
|
+
hoverTheme: !0,
|
|
49
|
+
icon: Cloud,
|
|
50
|
+
children: "Cloud"
|
|
51
|
+
})
|
|
26
52
|
})
|
|
27
|
-
|
|
28
|
-
children: /* @__PURE__ */_jsx(ListItem, {
|
|
29
|
-
hoverTheme: !0,
|
|
30
|
-
icon: Moon,
|
|
31
|
-
children: "Moon"
|
|
32
|
-
})
|
|
33
|
-
}), /* @__PURE__ */_jsx(YGroup.Item, {
|
|
34
|
-
children: /* @__PURE__ */_jsx(ListItem, {
|
|
35
|
-
hoverTheme: !0,
|
|
36
|
-
icon: Sun,
|
|
37
|
-
children: "Sun"
|
|
38
|
-
})
|
|
39
|
-
}), /* @__PURE__ */_jsx(YGroup.Item, {
|
|
40
|
-
children: /* @__PURE__ */_jsx(ListItem, {
|
|
41
|
-
hoverTheme: !0,
|
|
42
|
-
icon: Cloud,
|
|
43
|
-
children: "Cloud"
|
|
44
|
-
})
|
|
45
|
-
})]
|
|
53
|
+
]
|
|
46
54
|
});
|
|
47
55
|
}
|
|
48
56
|
function ListItemDemo2() {
|
|
49
|
-
return /* @__PURE__ */_jsxs(YGroup, {
|
|
57
|
+
return /* @__PURE__ */ _jsxs(YGroup, {
|
|
50
58
|
alignSelf: "center",
|
|
51
59
|
bordered: !0,
|
|
52
60
|
width: 240,
|
|
53
61
|
size: "$5",
|
|
54
|
-
separator: /* @__PURE__ */_jsx(Separator, {}),
|
|
55
|
-
children: [
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
62
|
+
separator: /* @__PURE__ */ _jsx(Separator, {}),
|
|
63
|
+
children: [
|
|
64
|
+
/* @__PURE__ */ _jsx(YGroup.Item, {
|
|
65
|
+
children: /* @__PURE__ */ _jsx(ListItem, {
|
|
66
|
+
hoverTheme: !0,
|
|
67
|
+
pressTheme: !0,
|
|
68
|
+
title: "Star",
|
|
69
|
+
subTitle: "Subtitle",
|
|
70
|
+
icon: Star,
|
|
71
|
+
iconAfter: ChevronRight
|
|
72
|
+
})
|
|
73
|
+
}),
|
|
74
|
+
/* @__PURE__ */ _jsx(YGroup.Item, {
|
|
75
|
+
children: /* @__PURE__ */ _jsx(ListItem, {
|
|
76
|
+
hoverTheme: !0,
|
|
77
|
+
pressTheme: !0,
|
|
78
|
+
title: "Moon",
|
|
79
|
+
subTitle: "Subtitle",
|
|
80
|
+
icon: Moon,
|
|
81
|
+
iconAfter: ChevronRight
|
|
82
|
+
})
|
|
72
83
|
})
|
|
73
|
-
|
|
84
|
+
]
|
|
74
85
|
});
|
|
75
86
|
}
|
|
76
|
-
export {
|
|
77
|
-
|
|
87
|
+
export {
|
|
88
|
+
ListItemDemo
|
|
89
|
+
};
|
|
90
|
+
//# sourceMappingURL=ListItemDemo.js.map
|
|
@@ -1 +1,6 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Users/n8/tamagui/code/demos/src/ListItemDemo.tsx"],
|
|
4
|
+
"mappings": ";AAAA,SAASA,cAAcC,OAAOC,MAAMC,MAAMC,WAAW;AACrD,SAASC,UAAUC,WAAWC,QAAQC,cAAc;AAE7C,SAASC,eAAAA;AACd,SACE,sBAACF,QAAAA;IAAOG,KAAK;MAAEC,eAAe;IAAS;IAAGC,mBAAkB;IAAKC,OAAK;;MACpE,qBAACC,eAAAA,CAAAA,CAAAA;MACD,qBAACC,eAAAA,CAAAA,CAAAA;;;AAGP;AAEA,SAASD,gBAAAA;AACP,SACE,sBAACN,QAAAA;IAAOQ,WAAU;IAASC,UAAQ;IAACC,OAAO;IAAKC,MAAK;;MACnD,qBAACX,OAAOY,MAAI;kBACV,qBAACf,UAAAA;UAASgB,YAAU;UAACC,MAAMnB;UAAMoB,OAAM;UAAOC,UAAS;;;MAEzD,qBAAChB,OAAOY,MAAI;kBACV,qBAACf,UAAAA;UAASgB,YAAU;UAACC,MAAMpB;oBAAM;;;MAInC,qBAACM,OAAOY,MAAI;kBACV,qBAACf,UAAAA;UAASgB,YAAU;UAACC,MAAMlB;oBAAK;;;MAIlC,qBAACI,OAAOY,MAAI;kBACV,qBAACf,UAAAA;UAASgB,YAAU;UAACC,MAAMrB;oBAAO;;;;;AAM1C;AAEA,SAASc,gBAAAA;AACP,SACE,sBAACP,QAAAA;IAAOQ,WAAU;IAASC,UAAQ;IAACC,OAAO;IAAKC,MAAK;IAAKM,WAAW,qBAACnB,WAAAA,CAAAA,CAAAA;;MACpE,qBAACE,OAAOY,MAAI;kBACV,qBAACf,UAAAA;UACCgB,YAAU;UACVK,YAAU;UACVH,OAAM;UACNC,UAAS;UACTF,MAAMnB;UACNwB,WAAW3B;;;MAGf,qBAACQ,OAAOY,MAAI;kBACV,qBAACf,UAAAA;UACCgB,YAAU;UACVK,YAAU;UACVH,OAAM;UACNC,UAAS;UACTF,MAAMpB;UACNyB,WAAW3B;;;;;AAKrB;",
|
|
5
|
+
"names": ["ChevronRight", "Cloud", "Moon", "Star", "Sun", "ListItem", "Separator", "XStack", "YGroup", "ListItemDemo", "$sm", "flexDirection", "paddingHorizontal", "space", "ListItemDemo1", "ListItemDemo2", "alignSelf", "bordered", "width", "size", "Item", "hoverTheme", "icon", "title", "subTitle", "separator", "pressTheme", "iconAfter"]
|
|
6
|
+
}
|
|
@@ -3,10 +3,11 @@ import React from "react";
|
|
|
3
3
|
import * as LucideIcons from "@tamagui/lucide-icons";
|
|
4
4
|
import { ScrollView } from "react-native";
|
|
5
5
|
import { Input, Paragraph, Spacer, YStack, useDebounceValue } from "tamagui";
|
|
6
|
-
import { Grid } from "./Grid
|
|
6
|
+
import { Grid } from "./Grid";
|
|
7
7
|
var lucideIcons = Object.keys(
|
|
8
|
-
// vite tree shaking workaround
|
|
9
|
-
typeof LucideIcons < "u" ? LucideIcons : {}
|
|
8
|
+
// vite tree shaking workaround
|
|
9
|
+
typeof LucideIcons < "u" ? LucideIcons : {}
|
|
10
|
+
).map(function(name) {
|
|
10
11
|
return {
|
|
11
12
|
key: name.toLowerCase(),
|
|
12
13
|
name,
|
|
@@ -14,24 +15,21 @@ typeof LucideIcons < "u" ? LucideIcons : {}).map(function (name) {
|
|
|
14
15
|
};
|
|
15
16
|
});
|
|
16
17
|
function LucideIconsDemo() {
|
|
17
|
-
var [searchRaw, setSearch] = React.useState(""),
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
return /* @__PURE__ */_jsxs(YStack, {
|
|
29
|
-
height: size + 20,
|
|
30
|
-
alignItems: "center",
|
|
31
|
-
justifyContent: "center",
|
|
32
|
-
children: [/* @__PURE__ */_jsx(Icon, {
|
|
18
|
+
var [searchRaw, setSearch] = React.useState(""), search = useDebounceValue(searchRaw, 400), size = 100, iconsMemo = React.useMemo(function() {
|
|
19
|
+
return lucideIcons.filter(function(x) {
|
|
20
|
+
return x.key.includes(search.toLowerCase());
|
|
21
|
+
}).map(function(param) {
|
|
22
|
+
var { Icon, name } = param;
|
|
23
|
+
return /* @__PURE__ */ _jsxs(YStack, {
|
|
24
|
+
height: size + 20,
|
|
25
|
+
alignItems: "center",
|
|
26
|
+
justifyContent: "center",
|
|
27
|
+
children: [
|
|
28
|
+
/* @__PURE__ */ _jsx(Icon, {
|
|
33
29
|
size: size * 0.25
|
|
34
|
-
}),
|
|
30
|
+
}),
|
|
31
|
+
/* @__PURE__ */ _jsx(Spacer, {}),
|
|
32
|
+
/* @__PURE__ */ _jsx(Paragraph, {
|
|
35
33
|
height: "$6",
|
|
36
34
|
wordWrap: "break-word",
|
|
37
35
|
maxWidth: "100%",
|
|
@@ -40,29 +38,37 @@ function LucideIconsDemo() {
|
|
|
40
38
|
size: "$1",
|
|
41
39
|
opacity: 0.5,
|
|
42
40
|
children: name
|
|
43
|
-
})
|
|
44
|
-
|
|
45
|
-
});
|
|
46
|
-
}
|
|
47
|
-
|
|
41
|
+
})
|
|
42
|
+
]
|
|
43
|
+
}, name);
|
|
44
|
+
});
|
|
45
|
+
}, [
|
|
46
|
+
search
|
|
47
|
+
]);
|
|
48
|
+
return /* @__PURE__ */ _jsxs(YStack, {
|
|
48
49
|
minWidth: "100%",
|
|
49
50
|
padding: "$4",
|
|
50
51
|
paddingBottom: "$0",
|
|
51
52
|
space: !0,
|
|
52
|
-
children: [
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
children:
|
|
53
|
+
children: [
|
|
54
|
+
/* @__PURE__ */ _jsx(Input, {
|
|
55
|
+
value: searchRaw,
|
|
56
|
+
onChangeText: setSearch,
|
|
57
|
+
placeholder: "Search..."
|
|
58
|
+
}),
|
|
59
|
+
/* @__PURE__ */ _jsx(YStack, {
|
|
60
|
+
height: 420,
|
|
61
|
+
children: /* @__PURE__ */ _jsx(ScrollView, {
|
|
62
|
+
children: /* @__PURE__ */ _jsx(Grid, {
|
|
63
|
+
itemMinWidth: size,
|
|
64
|
+
children: iconsMemo
|
|
65
|
+
})
|
|
62
66
|
})
|
|
63
67
|
})
|
|
64
|
-
|
|
68
|
+
]
|
|
65
69
|
});
|
|
66
70
|
}
|
|
67
|
-
export {
|
|
68
|
-
|
|
71
|
+
export {
|
|
72
|
+
LucideIconsDemo
|
|
73
|
+
};
|
|
74
|
+
//# sourceMappingURL=LucideIconsDemo.js.map
|
|
@@ -1 +1,6 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Users/n8/tamagui/code/demos/src/LucideIconsDemo.tsx"],
|
|
4
|
+
"mappings": ";AAAA,OAAOA,WAAW;AAClB,YAAYC,iBAAiB;AAE7B,SAASC,kBAAkB;AAC3B,SAASC,OAAOC,WAAWC,QAAQC,QAAQC,wBAAwB;AAEnE,SAASC,YAAY;AAErB,IAAMC,cAAcC,OAAOC;;EAEzB,OAAOV,cAAgB,MAAcA,cAAc,CAAC;AAAA,EACpDW,IAAI,SAACC,MAAAA;SAAU;IACfC,KAAKD,KAAKE,YAAW;IACrBF;IACAG,MAAMf,YAAYY,IAAAA;EACpB;;AAEO,SAASI,kBAAAA;AACd,MAAM,CAACC,WAAWC,SAAAA,IAAanB,MAAMoB,SAAS,EAAA,GACxCC,SAASd,iBAAiBW,WAAW,GAAA,GAErCI,OAAO,KAEPC,YAAYvB,MAAMwB,QACtB,WAAA;WACEf,YACGgB,OAAO,SAACC,GAAAA;aAAMA,EAAEZ,IAAIa,SAASN,OAAON,YAAW,CAAA;OAC/CH,IAAI,SAAA,OAAA;UAAC,EAAEI,MAAMH,KAAI,IAAE;aAClB,sBAACP,QAAAA;QACCsB,QAAQN,OAAO;QACfO,YAAW;QACXC,gBAAe;;UAGf,qBAACd,MAAAA;YAAKM,MAAMA,OAAO;;UACnB,qBAACjB,QAAAA,CAAAA,CAAAA;UACD,qBAACD,WAAAA;YACCwB,QAAO;YACPG,UAAS;YACTC,UAAS;YACTC,WAAU;YACVC,mBAAkB;YAClBZ,MAAK;YACLa,SAAS;sBAERtB;;;SAbEA,IAAAA;;KAiBb;IAACQ;GAAO;AAGV,SACE,sBAACf,QAAAA;IAAO8B,UAAS;IAAOC,SAAQ;IAAKC,eAAc;IAAKC,OAAK;;MAC3D,qBAACpC,OAAAA;QAAMqC,OAAOtB;QAAWuB,cAActB;QAAWuB,aAAY;;MAE9D,qBAACpC,QAAAA;QAAOsB,QAAQ;kBACd,qBAAC1B,YAAAA;oBACC,qBAACM,MAAAA;YAAKmC,cAAcrB;sBAAOC;;;;;;AAKrC;",
|
|
5
|
+
"names": ["React", "LucideIcons", "ScrollView", "Input", "Paragraph", "Spacer", "YStack", "useDebounceValue", "Grid", "lucideIcons", "Object", "keys", "map", "name", "key", "toLowerCase", "Icon", "LucideIconsDemo", "searchRaw", "setSearch", "useState", "search", "size", "iconsMemo", "useMemo", "filter", "x", "includes", "height", "alignItems", "justifyContent", "wordWrap", "maxWidth", "textAlign", "paddingHorizontal", "opacity", "minWidth", "padding", "paddingBottom", "space", "value", "onChangeText", "placeholder", "itemMinWidth"]
|
|
6
|
+
}
|
|
@@ -1,37 +1,47 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Button, Input, TextArea, XStack, YStack } from "tamagui";
|
|
3
3
|
function NewInputsDemo() {
|
|
4
|
-
return /* @__PURE__ */_jsxs(YStack, {
|
|
4
|
+
return /* @__PURE__ */ _jsxs(YStack, {
|
|
5
5
|
width: 200,
|
|
6
6
|
minHeight: 250,
|
|
7
7
|
overflow: "hidden",
|
|
8
8
|
space: "$2",
|
|
9
9
|
margin: "$3",
|
|
10
10
|
padding: "$2",
|
|
11
|
-
children: [
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
11
|
+
children: [
|
|
12
|
+
/* @__PURE__ */ _jsx(InputDemo, {
|
|
13
|
+
size: "$2"
|
|
14
|
+
}),
|
|
15
|
+
/* @__PURE__ */ _jsx(InputDemo, {
|
|
16
|
+
size: "$3"
|
|
17
|
+
}),
|
|
18
|
+
/* @__PURE__ */ _jsx(InputDemo, {
|
|
19
|
+
size: "$4"
|
|
20
|
+
}),
|
|
21
|
+
/* @__PURE__ */ _jsx(TextArea, {
|
|
22
|
+
placeholder: "Enter your details..."
|
|
23
|
+
})
|
|
24
|
+
]
|
|
20
25
|
});
|
|
21
26
|
}
|
|
22
27
|
function InputDemo(props) {
|
|
23
|
-
return /* @__PURE__ */_jsxs(XStack, {
|
|
28
|
+
return /* @__PURE__ */ _jsxs(XStack, {
|
|
24
29
|
alignItems: "center",
|
|
25
30
|
space: "$2",
|
|
26
|
-
children: [
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
31
|
+
children: [
|
|
32
|
+
/* @__PURE__ */ _jsx(Input, {
|
|
33
|
+
flex: 1,
|
|
34
|
+
size: props.size,
|
|
35
|
+
placeholder: `Size ${props.size}...`
|
|
36
|
+
}),
|
|
37
|
+
/* @__PURE__ */ _jsx(Button, {
|
|
38
|
+
size: props.size,
|
|
39
|
+
children: "Go"
|
|
40
|
+
})
|
|
41
|
+
]
|
|
34
42
|
});
|
|
35
43
|
}
|
|
36
|
-
export {
|
|
37
|
-
|
|
44
|
+
export {
|
|
45
|
+
NewInputsDemo
|
|
46
|
+
};
|
|
47
|
+
//# sourceMappingURL=NewInputsDemo.js.map
|