@tamagui/demos 1.18.1 → 1.20.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.
Files changed (14) hide show
  1. package/dist/cjs/SelectDemo.js +82 -32
  2. package/dist/cjs/SelectDemo.js.map +1 -1
  3. package/dist/esm/SelectDemo.js +90 -33
  4. package/dist/esm/SelectDemo.js.map +1 -1
  5. package/dist/esm/SelectDemo.mjs +90 -33
  6. package/dist/esm/SelectDemo.mjs.map +1 -1
  7. package/dist/jsx/SelectDemo.js +61 -13
  8. package/dist/jsx/SelectDemo.js.map +1 -1
  9. package/dist/jsx/SelectDemo.mjs +61 -13
  10. package/dist/jsx/SelectDemo.mjs.map +1 -1
  11. package/package.json +18 -18
  12. package/src/SelectDemo.tsx +76 -17
  13. package/types/SelectDemo.d.ts +2 -0
  14. package/types/SelectDemo.d.ts.map +1 -1
package/dist/cjs/SelectDemo.js CHANGED
@@ -18,6 +18,7 @@ var __copyProps = (to, from, except, desc) => {
18
18
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
19
  var SelectDemo_exports = {};
20
20
  __export(SelectDemo_exports, {
21
+ MySelect: () => MySelect,
21
22
  SelectDemo: () => SelectDemo
22
23
  });
23
24
  module.exports = __toCommonJS(SelectDemo_exports);
@@ -28,48 +29,96 @@ var import_tamagui = require("tamagui");
28
29
  var import_linear_gradient = require("tamagui/linear-gradient");
29
30
  function SelectDemo() {
30
31
  const [val, setVal] = (0, import_react.useState)("apple");
31
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select, { id: "food", value: val, onValueChange: setVal, children: [
32
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { space: true, children: [
33
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { ai: "center", space: true, children: [
34
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Label, { f: 1, fb: 0, children: "Custom" }),
35
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MySelect, { value: val, onValueChange: setVal })
36
+ ] }),
37
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { ai: "center", space: true, children: [
38
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Label, { f: 1, fb: 0, children: "Native" }),
39
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MySelect, { value: val, onValueChange: setVal, native: true })
40
+ ] })
41
+ ] });
42
+ }
43
+ function MySelect(props) {
44
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select, { id: "food", ...props, children: [
32
45
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Select.Trigger, { width: 180, iconAfter: import_lucide_icons.ChevronDown, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Select.Value, { placeholder: "Something" }) }),
33
46
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Adapt, { when: "sm", platform: "touch", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Sheet, { modal: true, dismissOnSnapToBottom: true, children: [
34
47
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Sheet.Frame, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Sheet.ScrollView, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Adapt.Contents, {}) }) }),
35
48
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Sheet.Overlay, {})
36
49
  ] }) }),
37
50
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select.Content, { zIndex: 2e5, children: [
38
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select.ScrollUpButton, { alignItems: "center", justifyContent: "center", position: "relative", width: "100%", height: "$3", children: [
39
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { zIndex: 10, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.ChevronUp, { size: 20 }) }),
40
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
41
- import_linear_gradient.LinearGradient,
51
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
52
+ import_tamagui.Select.ScrollUpButton,
53
+ {
54
+ alignItems: "center",
55
+ justifyContent: "center",
56
+ position: "relative",
57
+ width: "100%",
58
+ height: "$3",
59
+ children: [
60
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { zIndex: 10, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.ChevronUp, { size: 20 }) }),
61
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
62
+ import_linear_gradient.LinearGradient,
63
+ {
64
+ start: [0, 0],
65
+ end: [0, 1],
66
+ fullscreen: true,
67
+ colors: ["$background", "$backgroundTransparent"],
68
+ borderRadius: "$4"
69
+ }
70
+ )
71
+ ]
72
+ }
73
+ ),
74
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Select.Viewport, { minWidth: 200, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { children: [
75
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select.Group, { space: "$0", children: [
76
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Select.Label, { children: "Fruits" }),
77
+ items.map((item, i) => {
78
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select.Item, { index: i, value: item.name.toLowerCase(), children: [
79
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Select.ItemText, { children: item.name }),
80
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Select.ItemIndicator, { marginLeft: "auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.Check, { size: 16 }) })
81
+ ] }, item.name);
82
+ })
83
+ ] }),
84
+ props.native && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
85
+ import_tamagui.YStack,
42
86
  {
43
- start: [0, 0],
44
- end: [0, 1],
45
- fullscreen: true,
46
- colors: ["$background", "$backgroundTransparent"],
47
- borderRadius: "$4"
87
+ position: "absolute",
88
+ right: 0,
89
+ top: 0,
90
+ bottom: 0,
91
+ alignItems: "center",
92
+ justifyContent: "center",
93
+ width: "$4",
94
+ pointerEvents: "none",
95
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.ChevronDown, { size: (0, import_tamagui.getFontSize)(props.size ?? "$true") })
48
96
  }
49
97
  )
50
- ] }),
51
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Select.Viewport, { minWidth: 200, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select.Group, { space: "$0", children: [
52
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Select.Label, { children: "Fruits" }),
53
- items.map((item, i) => {
54
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select.Item, { index: i, value: item.name.toLowerCase(), children: [
55
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Select.ItemText, { children: item.name }),
56
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Select.ItemIndicator, { marginLeft: "auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.Check, { size: 16 }) })
57
- ] }, item.name);
58
- })
59
98
  ] }) }),
60
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select.ScrollDownButton, { alignItems: "center", justifyContent: "center", position: "relative", width: "100%", height: "$3", children: [
61
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { zIndex: 10, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.ChevronDown, { size: 20 }) }),
62
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
63
- import_linear_gradient.LinearGradient,
64
- {
65
- start: [0, 0],
66
- end: [0, 1],
67
- fullscreen: true,
68
- colors: ["$backgroundTransparent", "$background"],
69
- borderRadius: "$4"
70
- }
71
- )
72
- ] })
99
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
100
+ import_tamagui.Select.ScrollDownButton,
101
+ {
102
+ alignItems: "center",
103
+ justifyContent: "center",
104
+ position: "relative",
105
+ width: "100%",
106
+ height: "$3",
107
+ children: [
108
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { zIndex: 10, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.ChevronDown, { size: 20 }) }),
109
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
110
+ import_linear_gradient.LinearGradient,
111
+ {
112
+ start: [0, 0],
113
+ end: [0, 1],
114
+ fullscreen: true,
115
+ colors: ["$backgroundTransparent", "$background"],
116
+ borderRadius: "$4"
117
+ }
118
+ )
119
+ ]
120
+ }
121
+ )
73
122
  ] })
74
123
  ] });
75
124
  }
@@ -99,6 +148,7 @@ const items = [
99
148
  ];
100
149
  // Annotate the CommonJS export names for ESM import in node:
101
150
  0 && (module.exports = {
151
+ MySelect,
102
152
  SelectDemo
103
153
  });
104
154
  //# sourceMappingURL=SelectDemo.js.map
package/dist/cjs/SelectDemo.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/SelectDemo.tsx"],
4
- "mappings": "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",
4
+ "mappings": "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",
5
5
  "names": []
6
6
  }
package/dist/esm/SelectDemo.js CHANGED
@@ -1,52 +1,108 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { Check, ChevronDown, ChevronUp } from "@tamagui/lucide-icons";
3
3
  import { useState } from "react";
4
- import { Adapt, Select, Sheet, YStack } from "tamagui";
4
+ import {
5
+ Adapt,
6
+ Label,
7
+ Select,
8
+ Sheet,
9
+ XStack,
10
+ YStack,
11
+ getFontSize
12
+ } from "tamagui";
5
13
  import { LinearGradient } from "tamagui/linear-gradient";
6
14
  function SelectDemo() {
7
15
  const [val, setVal] = useState("apple");
8
- return /* @__PURE__ */ jsxs(Select, { id: "food", value: val, onValueChange: setVal, children: [
16
+ return /* @__PURE__ */ jsxs(YStack, { space: true, children: [
17
+ /* @__PURE__ */ jsxs(XStack, { ai: "center", space: true, children: [
18
+ /* @__PURE__ */ jsx(Label, { f: 1, fb: 0, children: "Custom" }),
19
+ /* @__PURE__ */ jsx(MySelect, { value: val, onValueChange: setVal })
20
+ ] }),
21
+ /* @__PURE__ */ jsxs(XStack, { ai: "center", space: true, children: [
22
+ /* @__PURE__ */ jsx(Label, { f: 1, fb: 0, children: "Native" }),
23
+ /* @__PURE__ */ jsx(MySelect, { value: val, onValueChange: setVal, native: true })
24
+ ] })
25
+ ] });
26
+ }
27
+ function MySelect(props) {
28
+ return /* @__PURE__ */ jsxs(Select, { id: "food", ...props, children: [
9
29
  /* @__PURE__ */ jsx(Select.Trigger, { width: 180, iconAfter: ChevronDown, children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Something" }) }),
10
30
  /* @__PURE__ */ jsx(Adapt, { when: "sm", platform: "touch", children: /* @__PURE__ */ jsxs(Sheet, { modal: true, dismissOnSnapToBottom: true, children: [
11
31
  /* @__PURE__ */ jsx(Sheet.Frame, { children: /* @__PURE__ */ jsx(Sheet.ScrollView, { children: /* @__PURE__ */ jsx(Adapt.Contents, {}) }) }),
12
32
  /* @__PURE__ */ jsx(Sheet.Overlay, {})
13
33
  ] }) }),
14
34
  /* @__PURE__ */ jsxs(Select.Content, { zIndex: 2e5, children: [
15
- /* @__PURE__ */ jsxs(Select.ScrollUpButton, { alignItems: "center", justifyContent: "center", position: "relative", width: "100%", height: "$3", children: [
16
- /* @__PURE__ */ jsx(YStack, { zIndex: 10, children: /* @__PURE__ */ jsx(ChevronUp, { size: 20 }) }),
17
- /* @__PURE__ */ jsx(
18
- LinearGradient,
35
+ /* @__PURE__ */ jsxs(
36
+ Select.ScrollUpButton,
37
+ {
38
+ alignItems: "center",
39
+ justifyContent: "center",
40
+ position: "relative",
41
+ width: "100%",
42
+ height: "$3",
43
+ children: [
44
+ /* @__PURE__ */ jsx(YStack, { zIndex: 10, children: /* @__PURE__ */ jsx(ChevronUp, { size: 20 }) }),
45
+ /* @__PURE__ */ jsx(
46
+ LinearGradient,
47
+ {
48
+ start: [0, 0],
49
+ end: [0, 1],
50
+ fullscreen: true,
51
+ colors: ["$background", "$backgroundTransparent"],
52
+ borderRadius: "$4"
53
+ }
54
+ )
55
+ ]
56
+ }
57
+ ),
58
+ /* @__PURE__ */ jsx(Select.Viewport, { minWidth: 200, children: /* @__PURE__ */ jsxs(XStack, { children: [
59
+ /* @__PURE__ */ jsxs(Select.Group, { space: "$0", children: [
60
+ /* @__PURE__ */ jsx(Select.Label, { children: "Fruits" }),
61
+ items.map((item, i) => {
62
+ return /* @__PURE__ */ jsxs(Select.Item, { index: i, value: item.name.toLowerCase(), children: [
63
+ /* @__PURE__ */ jsx(Select.ItemText, { children: item.name }),
64
+ /* @__PURE__ */ jsx(Select.ItemIndicator, { marginLeft: "auto", children: /* @__PURE__ */ jsx(Check, { size: 16 }) })
65
+ ] }, item.name);
66
+ })
67
+ ] }),
68
+ props.native && /* @__PURE__ */ jsx(
69
+ YStack,
19
70
  {
20
- start: [0, 0],
21
- end: [0, 1],
22
- fullscreen: true,
23
- colors: ["$background", "$backgroundTransparent"],
24
- borderRadius: "$4"
71
+ position: "absolute",
72
+ right: 0,
73
+ top: 0,
74
+ bottom: 0,
75
+ alignItems: "center",
76
+ justifyContent: "center",
77
+ width: "$4",
78
+ pointerEvents: "none",
79
+ children: /* @__PURE__ */ jsx(ChevronDown, { size: getFontSize(props.size ?? "$true") })
25
80
  }
26
81
  )
27
- ] }),
28
- /* @__PURE__ */ jsx(Select.Viewport, { minWidth: 200, children: /* @__PURE__ */ jsxs(Select.Group, { space: "$0", children: [
29
- /* @__PURE__ */ jsx(Select.Label, { children: "Fruits" }),
30
- items.map((item, i) => {
31
- return /* @__PURE__ */ jsxs(Select.Item, { index: i, value: item.name.toLowerCase(), children: [
32
- /* @__PURE__ */ jsx(Select.ItemText, { children: item.name }),
33
- /* @__PURE__ */ jsx(Select.ItemIndicator, { marginLeft: "auto", children: /* @__PURE__ */ jsx(Check, { size: 16 }) })
34
- ] }, item.name);
35
- })
36
82
  ] }) }),
37
- /* @__PURE__ */ jsxs(Select.ScrollDownButton, { alignItems: "center", justifyContent: "center", position: "relative", width: "100%", height: "$3", children: [
38
- /* @__PURE__ */ jsx(YStack, { zIndex: 10, children: /* @__PURE__ */ jsx(ChevronDown, { size: 20 }) }),
39
- /* @__PURE__ */ jsx(
40
- LinearGradient,
41
- {
42
- start: [0, 0],
43
- end: [0, 1],
44
- fullscreen: true,
45
- colors: ["$backgroundTransparent", "$background"],
46
- borderRadius: "$4"
47
- }
48
- )
49
- ] })
83
+ /* @__PURE__ */ jsxs(
84
+ Select.ScrollDownButton,
85
+ {
86
+ alignItems: "center",
87
+ justifyContent: "center",
88
+ position: "relative",
89
+ width: "100%",
90
+ height: "$3",
91
+ children: [
92
+ /* @__PURE__ */ jsx(YStack, { zIndex: 10, children: /* @__PURE__ */ jsx(ChevronDown, { size: 20 }) }),
93
+ /* @__PURE__ */ jsx(
94
+ LinearGradient,
95
+ {
96
+ start: [0, 0],
97
+ end: [0, 1],
98
+ fullscreen: true,
99
+ colors: ["$backgroundTransparent", "$background"],
100
+ borderRadius: "$4"
101
+ }
102
+ )
103
+ ]
104
+ }
105
+ )
50
106
  ] })
51
107
  ] });
52
108
  }
@@ -75,6 +131,7 @@ const items = [
75
131
  { name: "Durian" }
76
132
  ];
77
133
  export {
134
+ MySelect,
78
135
  SelectDemo
79
136
  };
80
137
  //# sourceMappingURL=SelectDemo.js.map
package/dist/esm/SelectDemo.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/SelectDemo.tsx"],
4
- "mappings": "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",
4
+ "mappings": "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",
5
5
  "names": []
6
6
  }
package/dist/esm/SelectDemo.mjs CHANGED
@@ -1,52 +1,108 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { Check, ChevronDown, ChevronUp } from "@tamagui/lucide-icons";
3
3
  import { useState } from "react";
4
- import { Adapt, Select, Sheet, YStack } from "tamagui";
4
+ import {
5
+ Adapt,
6
+ Label,
7
+ Select,
8
+ Sheet,
9
+ XStack,
10
+ YStack,
11
+ getFontSize
12
+ } from "tamagui";
5
13
  import { LinearGradient } from "tamagui/linear-gradient";
6
14
  function SelectDemo() {
7
15
  const [val, setVal] = useState("apple");
8
- return /* @__PURE__ */ jsxs(Select, { id: "food", value: val, onValueChange: setVal, children: [
16
+ return /* @__PURE__ */ jsxs(YStack, { space: true, children: [
17
+ /* @__PURE__ */ jsxs(XStack, { ai: "center", space: true, children: [
18
+ /* @__PURE__ */ jsx(Label, { f: 1, fb: 0, children: "Custom" }),
19
+ /* @__PURE__ */ jsx(MySelect, { value: val, onValueChange: setVal })
20
+ ] }),
21
+ /* @__PURE__ */ jsxs(XStack, { ai: "center", space: true, children: [
22
+ /* @__PURE__ */ jsx(Label, { f: 1, fb: 0, children: "Native" }),
23
+ /* @__PURE__ */ jsx(MySelect, { value: val, onValueChange: setVal, native: true })
24
+ ] })
25
+ ] });
26
+ }
27
+ function MySelect(props) {
28
+ return /* @__PURE__ */ jsxs(Select, { id: "food", ...props, children: [
9
29
  /* @__PURE__ */ jsx(Select.Trigger, { width: 180, iconAfter: ChevronDown, children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Something" }) }),
10
30
  /* @__PURE__ */ jsx(Adapt, { when: "sm", platform: "touch", children: /* @__PURE__ */ jsxs(Sheet, { modal: true, dismissOnSnapToBottom: true, children: [
11
31
  /* @__PURE__ */ jsx(Sheet.Frame, { children: /* @__PURE__ */ jsx(Sheet.ScrollView, { children: /* @__PURE__ */ jsx(Adapt.Contents, {}) }) }),
12
32
  /* @__PURE__ */ jsx(Sheet.Overlay, {})
13
33
  ] }) }),
14
34
  /* @__PURE__ */ jsxs(Select.Content, { zIndex: 2e5, children: [
15
- /* @__PURE__ */ jsxs(Select.ScrollUpButton, { alignItems: "center", justifyContent: "center", position: "relative", width: "100%", height: "$3", children: [
16
- /* @__PURE__ */ jsx(YStack, { zIndex: 10, children: /* @__PURE__ */ jsx(ChevronUp, { size: 20 }) }),
17
- /* @__PURE__ */ jsx(
18
- LinearGradient,
35
+ /* @__PURE__ */ jsxs(
36
+ Select.ScrollUpButton,
37
+ {
38
+ alignItems: "center",
39
+ justifyContent: "center",
40
+ position: "relative",
41
+ width: "100%",
42
+ height: "$3",
43
+ children: [
44
+ /* @__PURE__ */ jsx(YStack, { zIndex: 10, children: /* @__PURE__ */ jsx(ChevronUp, { size: 20 }) }),
45
+ /* @__PURE__ */ jsx(
46
+ LinearGradient,
47
+ {
48
+ start: [0, 0],
49
+ end: [0, 1],
50
+ fullscreen: true,
51
+ colors: ["$background", "$backgroundTransparent"],
52
+ borderRadius: "$4"
53
+ }
54
+ )
55
+ ]
56
+ }
57
+ ),
58
+ /* @__PURE__ */ jsx(Select.Viewport, { minWidth: 200, children: /* @__PURE__ */ jsxs(XStack, { children: [
59
+ /* @__PURE__ */ jsxs(Select.Group, { space: "$0", children: [
60
+ /* @__PURE__ */ jsx(Select.Label, { children: "Fruits" }),
61
+ items.map((item, i) => {
62
+ return /* @__PURE__ */ jsxs(Select.Item, { index: i, value: item.name.toLowerCase(), children: [
63
+ /* @__PURE__ */ jsx(Select.ItemText, { children: item.name }),
64
+ /* @__PURE__ */ jsx(Select.ItemIndicator, { marginLeft: "auto", children: /* @__PURE__ */ jsx(Check, { size: 16 }) })
65
+ ] }, item.name);
66
+ })
67
+ ] }),
68
+ props.native && /* @__PURE__ */ jsx(
69
+ YStack,
19
70
  {
20
- start: [0, 0],
21
- end: [0, 1],
22
- fullscreen: true,
23
- colors: ["$background", "$backgroundTransparent"],
24
- borderRadius: "$4"
71
+ position: "absolute",
72
+ right: 0,
73
+ top: 0,
74
+ bottom: 0,
75
+ alignItems: "center",
76
+ justifyContent: "center",
77
+ width: "$4",
78
+ pointerEvents: "none",
79
+ children: /* @__PURE__ */ jsx(ChevronDown, { size: getFontSize(props.size ?? "$true") })
25
80
  }
26
81
  )
27
- ] }),
28
- /* @__PURE__ */ jsx(Select.Viewport, { minWidth: 200, children: /* @__PURE__ */ jsxs(Select.Group, { space: "$0", children: [
29
- /* @__PURE__ */ jsx(Select.Label, { children: "Fruits" }),
30
- items.map((item, i) => {
31
- return /* @__PURE__ */ jsxs(Select.Item, { index: i, value: item.name.toLowerCase(), children: [
32
- /* @__PURE__ */ jsx(Select.ItemText, { children: item.name }),
33
- /* @__PURE__ */ jsx(Select.ItemIndicator, { marginLeft: "auto", children: /* @__PURE__ */ jsx(Check, { size: 16 }) })
34
- ] }, item.name);
35
- })
36
82
  ] }) }),
37
- /* @__PURE__ */ jsxs(Select.ScrollDownButton, { alignItems: "center", justifyContent: "center", position: "relative", width: "100%", height: "$3", children: [
38
- /* @__PURE__ */ jsx(YStack, { zIndex: 10, children: /* @__PURE__ */ jsx(ChevronDown, { size: 20 }) }),
39
- /* @__PURE__ */ jsx(
40
- LinearGradient,
41
- {
42
- start: [0, 0],
43
- end: [0, 1],
44
- fullscreen: true,
45
- colors: ["$backgroundTransparent", "$background"],
46
- borderRadius: "$4"
47
- }
48
- )
49
- ] })
83
+ /* @__PURE__ */ jsxs(
84
+ Select.ScrollDownButton,
85
+ {
86
+ alignItems: "center",
87
+ justifyContent: "center",
88
+ position: "relative",
89
+ width: "100%",
90
+ height: "$3",
91
+ children: [
92
+ /* @__PURE__ */ jsx(YStack, { zIndex: 10, children: /* @__PURE__ */ jsx(ChevronDown, { size: 20 }) }),
93
+ /* @__PURE__ */ jsx(
94
+ LinearGradient,
95
+ {
96
+ start: [0, 0],
97
+ end: [0, 1],
98
+ fullscreen: true,
99
+ colors: ["$backgroundTransparent", "$background"],
100
+ borderRadius: "$4"
101
+ }
102
+ )
103
+ ]
104
+ }
105
+ )
50
106
  ] })
51
107
  ] });
52
108
  }
@@ -75,6 +131,7 @@ const items = [
75
131
  { name: "Durian" }
76
132
  ];
77
133
  export {
134
+ MySelect,
78
135
  SelectDemo
79
136
  };
80
137
  //# sourceMappingURL=SelectDemo.mjs.map
package/dist/esm/SelectDemo.mjs.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/SelectDemo.tsx"],
4
- "mappings": "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",
4
+ "mappings": "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",
5
5
  "names": []
6
6
  }
package/dist/jsx/SelectDemo.js CHANGED
@@ -1,17 +1,43 @@
1
1
  import { Check, ChevronDown, ChevronUp } from "@tamagui/lucide-icons";
2
2
  import { useState } from "react";
3
- import { Adapt, Select, Sheet, YStack } from "tamagui";
3
+ import {
4
+ Adapt,
5
+ Label,
6
+ Select,
7
+ Sheet,
8
+ XStack,
9
+ YStack,
10
+ getFontSize
11
+ } from "tamagui";
4
12
  import { LinearGradient } from "tamagui/linear-gradient";
5
13
  function SelectDemo() {
6
14
  const [val, setVal] = useState("apple");
7
- return <Select id="food" value={val} onValueChange={setVal}>
15
+ return <YStack space>
16
+ <XStack ai="center" space>
17
+ <Label f={1} fb={0}>Custom</Label>
18
+ <MySelect value={val} onValueChange={setVal} />
19
+ </XStack>
20
+ <XStack ai="center" space>
21
+ <Label f={1} fb={0}>Native</Label>
22
+ <MySelect value={val} onValueChange={setVal} native />
23
+ </XStack>
24
+ </YStack>;
25
+ }
26
+ function MySelect(props) {
27
+ return <Select id="food" {...props}>
8
28
  <Select.Trigger width={180} iconAfter={ChevronDown}><Select.Value placeholder="Something" /></Select.Trigger>
9
29
  <Adapt when="sm" platform="touch"><Sheet modal dismissOnSnapToBottom>
10
30
  <Sheet.Frame><Sheet.ScrollView><Adapt.Contents /></Sheet.ScrollView></Sheet.Frame>
11
31
  <Sheet.Overlay />
12
32
  </Sheet></Adapt>
13
33
  <Select.Content zIndex={2e5}>
14
- <Select.ScrollUpButton alignItems="center" justifyContent="center" position="relative" width="100%" height="$3">
34
+ <Select.ScrollUpButton
35
+ alignItems="center"
36
+ justifyContent="center"
37
+ position="relative"
38
+ width="100%"
39
+ height="$3"
40
+ >
15
41
  <YStack zIndex={10}><ChevronUp size={20} /></YStack>
16
42
  <LinearGradient
17
43
  start={[0, 0]}
@@ -21,16 +47,37 @@ function SelectDemo() {
21
47
  borderRadius="$4"
22
48
  />
23
49
  </Select.ScrollUpButton>
24
- <Select.Viewport minWidth={200}><Select.Group space="$0">
25
- <Select.Label>Fruits</Select.Label>
26
- {items.map((item, i) => {
27
- return <Select.Item index={i} key={item.name} value={item.name.toLowerCase()}>
28
- <Select.ItemText>{item.name}</Select.ItemText>
29
- <Select.ItemIndicator marginLeft="auto"><Check size={16} /></Select.ItemIndicator>
30
- </Select.Item>;
31
- })}
32
- </Select.Group></Select.Viewport>
33
- <Select.ScrollDownButton alignItems="center" justifyContent="center" position="relative" width="100%" height="$3">
50
+ <Select.Viewport minWidth={200}><XStack>
51
+ <Select.Group space="$0">
52
+ <Select.Label>Fruits</Select.Label>
53
+ {items.map((item, i) => {
54
+ return <Select.Item index={i} key={item.name} value={item.name.toLowerCase()}>
55
+ <Select.ItemText>{item.name}</Select.ItemText>
56
+ <Select.ItemIndicator marginLeft="auto"><Check size={16} /></Select.ItemIndicator>
57
+ </Select.Item>;
58
+ })}
59
+ </Select.Group>
60
+ {
61
+ /* special icon treatment for native */
62
+ }
63
+ {props.native && <YStack
64
+ position="absolute"
65
+ right={0}
66
+ top={0}
67
+ bottom={0}
68
+ alignItems="center"
69
+ justifyContent="center"
70
+ width="$4"
71
+ pointerEvents="none"
72
+ ><ChevronDown size={getFontSize(props.size ?? "$true")} /></YStack>}
73
+ </XStack></Select.Viewport>
74
+ <Select.ScrollDownButton
75
+ alignItems="center"
76
+ justifyContent="center"
77
+ position="relative"
78
+ width="100%"
79
+ height="$3"
80
+ >
34
81
  <YStack zIndex={10}><ChevronDown size={20} /></YStack>
35
82
  <LinearGradient
36
83
  start={[0, 0]}
@@ -68,6 +115,7 @@ const items = [
68
115
  { name: "Durian" }
69
116
  ];
70
117
  export {
118
+ MySelect,
71
119
  SelectDemo
72
120
  };
73
121
  //# sourceMappingURL=SelectDemo.js.map
package/dist/jsx/SelectDemo.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/SelectDemo.tsx"],
4
- "mappings": "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",
4
+ "mappings": "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",
5
5
  "names": []
6
6
  }
package/dist/jsx/SelectDemo.mjs CHANGED
@@ -1,17 +1,43 @@
1
1
  import { Check, ChevronDown, ChevronUp } from "@tamagui/lucide-icons";
2
2
  import { useState } from "react";
3
- import { Adapt, Select, Sheet, YStack } from "tamagui";
3
+ import {
4
+ Adapt,
5
+ Label,
6
+ Select,
7
+ Sheet,
8
+ XStack,
9
+ YStack,
10
+ getFontSize
11
+ } from "tamagui";
4
12
  import { LinearGradient } from "tamagui/linear-gradient";
5
13
  function SelectDemo() {
6
14
  const [val, setVal] = useState("apple");
7
- return <Select id="food" value={val} onValueChange={setVal}>
15
+ return <YStack space>
16
+ <XStack ai="center" space>
17
+ <Label f={1} fb={0}>Custom</Label>
18
+ <MySelect value={val} onValueChange={setVal} />
19
+ </XStack>
20
+ <XStack ai="center" space>
21
+ <Label f={1} fb={0}>Native</Label>
22
+ <MySelect value={val} onValueChange={setVal} native />
23
+ </XStack>
24
+ </YStack>;
25
+ }
26
+ function MySelect(props) {
27
+ return <Select id="food" {...props}>
8
28
  <Select.Trigger width={180} iconAfter={ChevronDown}><Select.Value placeholder="Something" /></Select.Trigger>
9
29
  <Adapt when="sm" platform="touch"><Sheet modal dismissOnSnapToBottom>
10
30
  <Sheet.Frame><Sheet.ScrollView><Adapt.Contents /></Sheet.ScrollView></Sheet.Frame>
11
31
  <Sheet.Overlay />
12
32
  </Sheet></Adapt>
13
33
  <Select.Content zIndex={2e5}>
14
- <Select.ScrollUpButton alignItems="center" justifyContent="center" position="relative" width="100%" height="$3">
34
+ <Select.ScrollUpButton
35
+ alignItems="center"
36
+ justifyContent="center"
37
+ position="relative"
38
+ width="100%"
39
+ height="$3"
40
+ >
15
41
  <YStack zIndex={10}><ChevronUp size={20} /></YStack>
16
42
  <LinearGradient
17
43
  start={[0, 0]}
@@ -21,16 +47,37 @@ function SelectDemo() {
21
47
  borderRadius="$4"
22
48
  />
23
49
  </Select.ScrollUpButton>
24
- <Select.Viewport minWidth={200}><Select.Group space="$0">
25
- <Select.Label>Fruits</Select.Label>
26
- {items.map((item, i) => {
27
- return <Select.Item index={i} key={item.name} value={item.name.toLowerCase()}>
28
- <Select.ItemText>{item.name}</Select.ItemText>
29
- <Select.ItemIndicator marginLeft="auto"><Check size={16} /></Select.ItemIndicator>
30
- </Select.Item>;
31
- })}
32
- </Select.Group></Select.Viewport>
33
- <Select.ScrollDownButton alignItems="center" justifyContent="center" position="relative" width="100%" height="$3">
50
+ <Select.Viewport minWidth={200}><XStack>
51
+ <Select.Group space="$0">
52
+ <Select.Label>Fruits</Select.Label>
53
+ {items.map((item, i) => {
54
+ return <Select.Item index={i} key={item.name} value={item.name.toLowerCase()}>
55
+ <Select.ItemText>{item.name}</Select.ItemText>
56
+ <Select.ItemIndicator marginLeft="auto"><Check size={16} /></Select.ItemIndicator>
57
+ </Select.Item>;
58
+ })}
59
+ </Select.Group>
60
+ {
61
+ /* special icon treatment for native */
62
+ }
63
+ {props.native && <YStack
64
+ position="absolute"
65
+ right={0}
66
+ top={0}
67
+ bottom={0}
68
+ alignItems="center"
69
+ justifyContent="center"
70
+ width="$4"
71
+ pointerEvents="none"
72
+ ><ChevronDown size={getFontSize(props.size ?? "$true")} /></YStack>}
73
+ </XStack></Select.Viewport>
74
+ <Select.ScrollDownButton
75
+ alignItems="center"
76
+ justifyContent="center"
77
+ position="relative"
78
+ width="100%"
79
+ height="$3"
80
+ >
34
81
  <YStack zIndex={10}><ChevronDown size={20} /></YStack>
35
82
  <LinearGradient
36
83
  start={[0, 0]}
@@ -68,6 +115,7 @@ const items = [
68
115
  { name: "Durian" }
69
116
  ];
70
117
  export {
118
+ MySelect,
71
119
  SelectDemo
72
120
  };
73
121
  //# sourceMappingURL=SelectDemo.mjs.map
package/dist/jsx/SelectDemo.mjs.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/SelectDemo.tsx"],
4
- "mappings": "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",
4
+ "mappings": "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",
5
5
  "names": []
6
6
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tamagui/demos",
3
- "version": "1.18.1",
3
+ "version": "1.20.0",
4
4
  "sideEffects": [
5
5
  "*.css"
6
6
  ],
@@ -28,29 +28,29 @@
28
28
  }
29
29
  },
30
30
  "dependencies": {
31
- "@tamagui/avatar": "1.18.1",
32
- "@tamagui/button": "1.18.1",
33
- "@tamagui/config": "1.18.1",
34
- "@tamagui/core": "1.18.1",
35
- "@tamagui/list-item": "1.18.1",
36
- "@tamagui/logo": "1.18.1",
37
- "@tamagui/menu": "1.18.1",
38
- "@tamagui/popover": "1.18.1",
39
- "@tamagui/progress": "1.18.1",
40
- "@tamagui/radio-group": "1.18.1",
41
- "@tamagui/select": "1.18.1",
42
- "@tamagui/sheet": "1.18.1",
43
- "@tamagui/slider": "1.18.1",
44
- "@tamagui/stacks": "1.18.1",
45
- "@tamagui/toast": "1.18.1",
46
- "tamagui": "1.18.1"
31
+ "@tamagui/avatar": "1.20.0",
32
+ "@tamagui/button": "1.20.0",
33
+ "@tamagui/config": "1.20.0",
34
+ "@tamagui/core": "1.20.0",
35
+ "@tamagui/list-item": "1.20.0",
36
+ "@tamagui/logo": "1.20.0",
37
+ "@tamagui/menu": "1.20.0",
38
+ "@tamagui/popover": "1.20.0",
39
+ "@tamagui/progress": "1.20.0",
40
+ "@tamagui/radio-group": "1.20.0",
41
+ "@tamagui/select": "1.20.0",
42
+ "@tamagui/sheet": "1.20.0",
43
+ "@tamagui/slider": "1.20.0",
44
+ "@tamagui/stacks": "1.20.0",
45
+ "@tamagui/toast": "1.20.0",
46
+ "tamagui": "1.20.0"
47
47
  },
48
48
  "peerDependencies": {
49
49
  "react": "*",
50
50
  "react-dom": "*"
51
51
  },
52
52
  "devDependencies": {
53
- "@tamagui/build": "1.18.1",
53
+ "@tamagui/build": "1.20.0",
54
54
  "react": "^18.2.0",
55
55
  "react-dom": "^18.2.0"
56
56
  },
package/src/SelectDemo.tsx CHANGED
@@ -1,12 +1,42 @@
1
1
  import { Check, ChevronDown, ChevronUp } from '@tamagui/lucide-icons'
2
2
  import { useState } from 'react'
3
- import { Adapt, Select, Sheet, YStack } from 'tamagui'
3
+ import {
4
+ Adapt,
5
+ Label,
6
+ Select,
7
+ SelectProps,
8
+ Sheet,
9
+ XStack,
10
+ YStack,
11
+ getFontSize,
12
+ } from 'tamagui'
4
13
  import { LinearGradient } from 'tamagui/linear-gradient'
5
14
 
6
15
  export function SelectDemo() {
7
16
  const [val, setVal] = useState('apple')
17
+
18
+ return (
19
+ <YStack space>
20
+ <XStack ai="center" space>
21
+ <Label f={1} fb={0}>
22
+ Custom
23
+ </Label>
24
+ <MySelect value={val} onValueChange={setVal} />
25
+ </XStack>
26
+
27
+ <XStack ai="center" space>
28
+ <Label f={1} fb={0}>
29
+ Native
30
+ </Label>
31
+ <MySelect value={val} onValueChange={setVal} native />
32
+ </XStack>
33
+ </YStack>
34
+ )
35
+ }
36
+
37
+ export function MySelect(props: SelectProps) {
8
38
  return (
9
- <Select id="food" value={val} onValueChange={setVal}>
39
+ <Select id="food" {...props}>
10
40
  <Select.Trigger width={180} iconAfter={ChevronDown}>
11
41
  <Select.Value placeholder="Something" />
12
42
  </Select.Trigger>
@@ -23,7 +53,13 @@ export function SelectDemo() {
23
53
  </Adapt>
24
54
 
25
55
  <Select.Content zIndex={200000}>
26
- <Select.ScrollUpButton alignItems="center" justifyContent="center" position="relative" width="100%" height="$3">
56
+ <Select.ScrollUpButton
57
+ alignItems="center"
58
+ justifyContent="center"
59
+ position="relative"
60
+ width="100%"
61
+ height="$3"
62
+ >
27
63
  <YStack zIndex={10}>
28
64
  <ChevronUp size={20} />
29
65
  </YStack>
@@ -37,22 +73,45 @@ export function SelectDemo() {
37
73
  </Select.ScrollUpButton>
38
74
 
39
75
  <Select.Viewport minWidth={200}>
40
- <Select.Group space="$0">
41
- <Select.Label>Fruits</Select.Label>
42
- {items.map((item, i) => {
43
- return (
44
- <Select.Item index={i} key={item.name} value={item.name.toLowerCase()}>
45
- <Select.ItemText>{item.name}</Select.ItemText>
46
- <Select.ItemIndicator marginLeft="auto">
47
- <Check size={16} />
48
- </Select.ItemIndicator>
49
- </Select.Item>
50
- )
51
- })}
52
- </Select.Group>
76
+ <XStack>
77
+ <Select.Group space="$0">
78
+ <Select.Label>Fruits</Select.Label>
79
+ {items.map((item, i) => {
80
+ return (
81
+ <Select.Item index={i} key={item.name} value={item.name.toLowerCase()}>
82
+ <Select.ItemText>{item.name}</Select.ItemText>
83
+ <Select.ItemIndicator marginLeft="auto">
84
+ <Check size={16} />
85
+ </Select.ItemIndicator>
86
+ </Select.Item>
87
+ )
88
+ })}
89
+ </Select.Group>
90
+ {/* special icon treatment for native */}
91
+ {props.native && (
92
+ <YStack
93
+ position="absolute"
94
+ right={0}
95
+ top={0}
96
+ bottom={0}
97
+ alignItems="center"
98
+ justifyContent="center"
99
+ width={'$4'}
100
+ pointerEvents="none"
101
+ >
102
+ <ChevronDown size={getFontSize((props.size ?? '$true') as any)} />
103
+ </YStack>
104
+ )}
105
+ </XStack>
53
106
  </Select.Viewport>
54
107
 
55
- <Select.ScrollDownButton alignItems="center" justifyContent="center" position="relative" width="100%" height="$3">
108
+ <Select.ScrollDownButton
109
+ alignItems="center"
110
+ justifyContent="center"
111
+ position="relative"
112
+ width="100%"
113
+ height="$3"
114
+ >
56
115
  <YStack zIndex={10}>
57
116
  <ChevronDown size={20} />
58
117
  </YStack>
package/types/SelectDemo.d.ts CHANGED
@@ -1,3 +1,5 @@
1
1
  /// <reference types="react" />
2
+ import { SelectProps } from 'tamagui';
2
3
  export declare function SelectDemo(): JSX.Element;
4
+ export declare function MySelect(props: SelectProps): JSX.Element;
3
5
  //# sourceMappingURL=SelectDemo.d.ts.map
package/types/SelectDemo.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SelectDemo.d.ts","sourceRoot":"","sources":["../src/SelectDemo.tsx"],"names":[],"mappings":";AAKA,wBAAgB,UAAU,gBAgEzB"}
1
+ {"version":3,"file":"SelectDemo.d.ts","sourceRoot":"","sources":["../src/SelectDemo.tsx"],"names":[],"mappings":";AAEA,OAAO,EAIL,WAAW,EAKZ,MAAM,SAAS,CAAA;AAGhB,wBAAgB,UAAU,gBAoBzB;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,WAAW,eA4F1C"}