@tamagui/demos 1.0.1-beta.73 → 1.0.1-beta.74

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.
@@ -30,7 +30,22 @@ function SelectDemo() {
30
30
  iconAfter: import_feather_icons.ChevronDown
31
31
  }, /* @__PURE__ */ React.createElement(import_tamagui.Select.Value, {
32
32
  placeholder: "Something"
33
- })), /* @__PURE__ */ React.createElement(import_tamagui.Select.Content, null, /* @__PURE__ */ React.createElement(import_tamagui.Select.ScrollUpButton, null, /* @__PURE__ */ React.createElement(import_tamagui.Text, null, "\u261D\uFE0F")), /* @__PURE__ */ React.createElement(import_tamagui.Select.Viewport, {
33
+ })), /* @__PURE__ */ React.createElement(import_tamagui.Select.Content, null, /* @__PURE__ */ React.createElement(import_tamagui.Select.ScrollUpButton, {
34
+ ai: "center",
35
+ jc: "center",
36
+ pos: "relative",
37
+ w: "100%",
38
+ h: "$3"
39
+ }, /* @__PURE__ */ React.createElement(import_tamagui.YStack, {
40
+ zi: 10
41
+ }, /* @__PURE__ */ React.createElement(import_feather_icons.ChevronUp, {
42
+ size: 20
43
+ })), /* @__PURE__ */ React.createElement(import_tamagui.LinearGradient, {
44
+ start: [0, 0],
45
+ end: [0, 1],
46
+ fullscreen: true,
47
+ colors: ["$background", "$backgroundTransparent"]
48
+ })), /* @__PURE__ */ React.createElement(import_tamagui.Select.Viewport, {
34
49
  minWidth: 200
35
50
  }, /* @__PURE__ */ React.createElement(import_tamagui.Select.Group, null, /* @__PURE__ */ React.createElement(import_tamagui.Select.Label, null, "Fruits"), items.map((item, i) => {
36
51
  return /* @__PURE__ */ React.createElement(import_tamagui.Select.Item, {
@@ -38,7 +53,22 @@ function SelectDemo() {
38
53
  key: item.name,
39
54
  value: item.name.toLowerCase()
40
55
  }, /* @__PURE__ */ React.createElement(import_tamagui.Select.ItemText, null, item.name));
41
- }))), /* @__PURE__ */ React.createElement(import_tamagui.Select.ScrollDownButton, null, /* @__PURE__ */ React.createElement(import_tamagui.Text, null, "\u{1F447}"))));
56
+ }))), /* @__PURE__ */ React.createElement(import_tamagui.Select.ScrollDownButton, {
57
+ ai: "center",
58
+ jc: "center",
59
+ pos: "relative",
60
+ w: "100%",
61
+ h: "$3"
62
+ }, /* @__PURE__ */ React.createElement(import_tamagui.YStack, {
63
+ zi: 10
64
+ }, /* @__PURE__ */ React.createElement(import_feather_icons.ChevronDown, {
65
+ size: 20
66
+ })), /* @__PURE__ */ React.createElement(import_tamagui.LinearGradient, {
67
+ start: [0, 0],
68
+ end: [0, 1],
69
+ fullscreen: true,
70
+ colors: ["$backgroundTransparent", "$background"]
71
+ }))));
42
72
  }
43
73
  const items = [
44
74
  { name: "Apple" },
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/SelectDemo.tsx"],
4
- "sourcesContent": ["import { ChevronDown } from '@tamagui/feather-icons'\nimport { Select, Text } from 'tamagui'\n\nexport default function SelectDemo() {\n return (\n <Select defaultValue=\"apple\">\n <Select.Trigger w={200} iconAfter={ChevronDown}>\n <Select.Value placeholder=\"Something\" />\n </Select.Trigger>\n\n <Select.Content>\n <Select.ScrollUpButton>\n <Text>\u261D\uFE0F</Text>\n </Select.ScrollUpButton>\n\n <Select.Viewport minWidth={200}>\n <Select.Group>\n <Select.Label>Fruits</Select.Label>\n {items.map((item, i) => {\n return (\n <Select.Item index={i} key={item.name} value={item.name.toLowerCase()}>\n <Select.ItemText>{item.name}</Select.ItemText>\n </Select.Item>\n )\n })}\n </Select.Group>\n </Select.Viewport>\n\n <Select.ScrollDownButton>\n <Text>\uD83D\uDC47</Text>\n </Select.ScrollDownButton>\n </Select.Content>\n </Select>\n )\n}\n\nconst items = [\n { name: 'Apple' },\n { name: 'Pear' },\n { name: 'Blackberry' },\n { name: 'Peach' },\n { name: 'Apricot' },\n { name: 'Melon' },\n { name: 'Honeydew' },\n { name: 'Starfruit' },\n { name: 'Blueberry' },\n { name: 'Rasberry' },\n { name: 'Strawberry' },\n { name: 'Mango' },\n { name: 'Pineapple' },\n { name: 'Lime' },\n { name: 'Lemon' },\n { name: 'Coconut' },\n { name: 'Guava' },\n { name: 'Papaya' },\n { name: 'Orange' },\n { name: 'Grape' },\n { name: 'Jackfruit' },\n { name: 'Durian' },\n]\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAA4B;AAC5B,qBAA6B;AAEd,sBAAsB;AACnC,SACE,oCAAC;AAAA,IAAO,cAAa;AAAA,KACnB,oCAAC,sBAAO,SAAP;AAAA,IAAe,GAAG;AAAA,IAAK,WAAW;AAAA,KACjC,oCAAC,sBAAO,OAAP;AAAA,IAAa,aAAY;AAAA,GAAY,CACxC,GAEA,oCAAC,sBAAO,SAAP,MACC,oCAAC,sBAAO,gBAAP,MACC,oCAAC,2BAAK,cAAE,CACV,GAEA,oCAAC,sBAAO,UAAP;AAAA,IAAgB,UAAU;AAAA,KACzB,oCAAC,sBAAO,OAAP,MACC,oCAAC,sBAAO,OAAP,MAAa,QAAM,GACnB,MAAM,IAAI,CAAC,MAAM,MAAM;AACtB,WACE,oCAAC,sBAAO,MAAP;AAAA,MAAY,OAAO;AAAA,MAAG,KAAK,KAAK;AAAA,MAAM,OAAO,KAAK,KAAK,YAAY;AAAA,OAClE,oCAAC,sBAAO,UAAP,MAAiB,KAAK,IAAK,CAC9B;AAAA,EAEJ,CAAC,CACH,CACF,GAEA,oCAAC,sBAAO,kBAAP,MACC,oCAAC,2BAAK,WAAE,CACV,CACF,CACF;AAEJ;AAEA,MAAM,QAAQ;AAAA,EACZ,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,OAAO;AAAA,EACf,EAAE,MAAM,aAAa;AAAA,EACrB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,UAAU;AAAA,EAClB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,WAAW;AAAA,EACnB,EAAE,MAAM,YAAY;AAAA,EACpB,EAAE,MAAM,YAAY;AAAA,EACpB,EAAE,MAAM,WAAW;AAAA,EACnB,EAAE,MAAM,aAAa;AAAA,EACrB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,YAAY;AAAA,EACpB,EAAE,MAAM,OAAO;AAAA,EACf,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,UAAU;AAAA,EAClB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,SAAS;AAAA,EACjB,EAAE,MAAM,SAAS;AAAA,EACjB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,YAAY;AAAA,EACpB,EAAE,MAAM,SAAS;AACnB;",
4
+ "sourcesContent": ["import { ChevronDown, ChevronUp } from '@tamagui/feather-icons'\nimport { LinearGradient, Select, Text, YStack } from 'tamagui'\n\nexport default function SelectDemo() {\n return (\n <Select defaultValue=\"apple\">\n <Select.Trigger w={200} iconAfter={ChevronDown}>\n <Select.Value placeholder=\"Something\" />\n </Select.Trigger>\n\n <Select.Content>\n <Select.ScrollUpButton ai=\"center\" jc=\"center\" pos=\"relative\" w=\"100%\" h=\"$3\">\n <YStack zi={10}>\n <ChevronUp size={20} />\n </YStack>\n <LinearGradient\n start={[0, 0]}\n end={[0, 1]}\n fullscreen\n colors={['$background', '$backgroundTransparent']}\n />\n </Select.ScrollUpButton>\n\n <Select.Viewport minWidth={200}>\n <Select.Group>\n <Select.Label>Fruits</Select.Label>\n {items.map((item, i) => {\n return (\n <Select.Item index={i} key={item.name} value={item.name.toLowerCase()}>\n <Select.ItemText>{item.name}</Select.ItemText>\n </Select.Item>\n )\n })}\n </Select.Group>\n </Select.Viewport>\n\n <Select.ScrollDownButton ai=\"center\" jc=\"center\" pos=\"relative\" w=\"100%\" h=\"$3\">\n <YStack zi={10}>\n <ChevronDown size={20} />\n </YStack>\n <LinearGradient\n start={[0, 0]}\n end={[0, 1]}\n fullscreen\n colors={['$backgroundTransparent', '$background']}\n />\n </Select.ScrollDownButton>\n </Select.Content>\n </Select>\n )\n}\n\nconst items = [\n { name: 'Apple' },\n { name: 'Pear' },\n { name: 'Blackberry' },\n { name: 'Peach' },\n { name: 'Apricot' },\n { name: 'Melon' },\n { name: 'Honeydew' },\n { name: 'Starfruit' },\n { name: 'Blueberry' },\n { name: 'Rasberry' },\n { name: 'Strawberry' },\n { name: 'Mango' },\n { name: 'Pineapple' },\n { name: 'Lime' },\n { name: 'Lemon' },\n { name: 'Coconut' },\n { name: 'Guava' },\n { name: 'Papaya' },\n { name: 'Orange' },\n { name: 'Grape' },\n { name: 'Jackfruit' },\n { name: 'Durian' },\n]\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAuC;AACvC,qBAAqD;AAEtC,sBAAsB;AACnC,SACE,oCAAC;AAAA,IAAO,cAAa;AAAA,KACnB,oCAAC,sBAAO,SAAP;AAAA,IAAe,GAAG;AAAA,IAAK,WAAW;AAAA,KACjC,oCAAC,sBAAO,OAAP;AAAA,IAAa,aAAY;AAAA,GAAY,CACxC,GAEA,oCAAC,sBAAO,SAAP,MACC,oCAAC,sBAAO,gBAAP;AAAA,IAAsB,IAAG;AAAA,IAAS,IAAG;AAAA,IAAS,KAAI;AAAA,IAAW,GAAE;AAAA,IAAO,GAAE;AAAA,KACvE,oCAAC;AAAA,IAAO,IAAI;AAAA,KACV,oCAAC;AAAA,IAAU,MAAM;AAAA,GAAI,CACvB,GACA,oCAAC;AAAA,IACC,OAAO,CAAC,GAAG,CAAC;AAAA,IACZ,KAAK,CAAC,GAAG,CAAC;AAAA,IACV,YAAU;AAAA,IACV,QAAQ,CAAC,eAAe,wBAAwB;AAAA,GAClD,CACF,GAEA,oCAAC,sBAAO,UAAP;AAAA,IAAgB,UAAU;AAAA,KACzB,oCAAC,sBAAO,OAAP,MACC,oCAAC,sBAAO,OAAP,MAAa,QAAM,GACnB,MAAM,IAAI,CAAC,MAAM,MAAM;AACtB,WACE,oCAAC,sBAAO,MAAP;AAAA,MAAY,OAAO;AAAA,MAAG,KAAK,KAAK;AAAA,MAAM,OAAO,KAAK,KAAK,YAAY;AAAA,OAClE,oCAAC,sBAAO,UAAP,MAAiB,KAAK,IAAK,CAC9B;AAAA,EAEJ,CAAC,CACH,CACF,GAEA,oCAAC,sBAAO,kBAAP;AAAA,IAAwB,IAAG;AAAA,IAAS,IAAG;AAAA,IAAS,KAAI;AAAA,IAAW,GAAE;AAAA,IAAO,GAAE;AAAA,KACzE,oCAAC;AAAA,IAAO,IAAI;AAAA,KACV,oCAAC;AAAA,IAAY,MAAM;AAAA,GAAI,CACzB,GACA,oCAAC;AAAA,IACC,OAAO,CAAC,GAAG,CAAC;AAAA,IACZ,KAAK,CAAC,GAAG,CAAC;AAAA,IACV,YAAU;AAAA,IACV,QAAQ,CAAC,0BAA0B,aAAa;AAAA,GAClD,CACF,CACF,CACF;AAEJ;AAEA,MAAM,QAAQ;AAAA,EACZ,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,OAAO;AAAA,EACf,EAAE,MAAM,aAAa;AAAA,EACrB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,UAAU;AAAA,EAClB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,WAAW;AAAA,EACnB,EAAE,MAAM,YAAY;AAAA,EACpB,EAAE,MAAM,YAAY;AAAA,EACpB,EAAE,MAAM,WAAW;AAAA,EACnB,EAAE,MAAM,aAAa;AAAA,EACrB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,YAAY;AAAA,EACpB,EAAE,MAAM,OAAO;AAAA,EACf,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,UAAU;AAAA,EAClB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,SAAS;AAAA,EACjB,EAAE,MAAM,SAAS;AAAA,EACjB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,YAAY;AAAA,EACpB,EAAE,MAAM,SAAS;AACnB;",
6
6
  "names": []
7
7
  }
@@ -1,5 +1,5 @@
1
- import { ChevronDown } from "@tamagui/feather-icons";
2
- import { Select, Text } from "tamagui";
1
+ import { ChevronDown, ChevronUp } from "@tamagui/feather-icons";
2
+ import { LinearGradient, Select, YStack } from "tamagui";
3
3
  function SelectDemo() {
4
4
  return /* @__PURE__ */ React.createElement(Select, {
5
5
  defaultValue: "apple"
@@ -8,7 +8,22 @@ function SelectDemo() {
8
8
  iconAfter: ChevronDown
9
9
  }, /* @__PURE__ */ React.createElement(Select.Value, {
10
10
  placeholder: "Something"
11
- })), /* @__PURE__ */ React.createElement(Select.Content, null, /* @__PURE__ */ React.createElement(Select.ScrollUpButton, null, /* @__PURE__ */ React.createElement(Text, null, "\u261D\uFE0F")), /* @__PURE__ */ React.createElement(Select.Viewport, {
11
+ })), /* @__PURE__ */ React.createElement(Select.Content, null, /* @__PURE__ */ React.createElement(Select.ScrollUpButton, {
12
+ ai: "center",
13
+ jc: "center",
14
+ pos: "relative",
15
+ w: "100%",
16
+ h: "$3"
17
+ }, /* @__PURE__ */ React.createElement(YStack, {
18
+ zi: 10
19
+ }, /* @__PURE__ */ React.createElement(ChevronUp, {
20
+ size: 20
21
+ })), /* @__PURE__ */ React.createElement(LinearGradient, {
22
+ start: [0, 0],
23
+ end: [0, 1],
24
+ fullscreen: true,
25
+ colors: ["$background", "$backgroundTransparent"]
26
+ })), /* @__PURE__ */ React.createElement(Select.Viewport, {
12
27
  minWidth: 200
13
28
  }, /* @__PURE__ */ React.createElement(Select.Group, null, /* @__PURE__ */ React.createElement(Select.Label, null, "Fruits"), items.map((item, i) => {
14
29
  return /* @__PURE__ */ React.createElement(Select.Item, {
@@ -16,7 +31,22 @@ function SelectDemo() {
16
31
  key: item.name,
17
32
  value: item.name.toLowerCase()
18
33
  }, /* @__PURE__ */ React.createElement(Select.ItemText, null, item.name));
19
- }))), /* @__PURE__ */ React.createElement(Select.ScrollDownButton, null, /* @__PURE__ */ React.createElement(Text, null, "\u{1F447}"))));
34
+ }))), /* @__PURE__ */ React.createElement(Select.ScrollDownButton, {
35
+ ai: "center",
36
+ jc: "center",
37
+ pos: "relative",
38
+ w: "100%",
39
+ h: "$3"
40
+ }, /* @__PURE__ */ React.createElement(YStack, {
41
+ zi: 10
42
+ }, /* @__PURE__ */ React.createElement(ChevronDown, {
43
+ size: 20
44
+ })), /* @__PURE__ */ React.createElement(LinearGradient, {
45
+ start: [0, 0],
46
+ end: [0, 1],
47
+ fullscreen: true,
48
+ colors: ["$backgroundTransparent", "$background"]
49
+ }))));
20
50
  }
21
51
  const items = [
22
52
  { name: "Apple" },
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/SelectDemo.tsx"],
4
- "sourcesContent": ["import { ChevronDown } from '@tamagui/feather-icons'\nimport { Select, Text } from 'tamagui'\n\nexport default function SelectDemo() {\n return (\n <Select defaultValue=\"apple\">\n <Select.Trigger w={200} iconAfter={ChevronDown}>\n <Select.Value placeholder=\"Something\" />\n </Select.Trigger>\n\n <Select.Content>\n <Select.ScrollUpButton>\n <Text>\u261D\uFE0F</Text>\n </Select.ScrollUpButton>\n\n <Select.Viewport minWidth={200}>\n <Select.Group>\n <Select.Label>Fruits</Select.Label>\n {items.map((item, i) => {\n return (\n <Select.Item index={i} key={item.name} value={item.name.toLowerCase()}>\n <Select.ItemText>{item.name}</Select.ItemText>\n </Select.Item>\n )\n })}\n </Select.Group>\n </Select.Viewport>\n\n <Select.ScrollDownButton>\n <Text>\uD83D\uDC47</Text>\n </Select.ScrollDownButton>\n </Select.Content>\n </Select>\n )\n}\n\nconst items = [\n { name: 'Apple' },\n { name: 'Pear' },\n { name: 'Blackberry' },\n { name: 'Peach' },\n { name: 'Apricot' },\n { name: 'Melon' },\n { name: 'Honeydew' },\n { name: 'Starfruit' },\n { name: 'Blueberry' },\n { name: 'Rasberry' },\n { name: 'Strawberry' },\n { name: 'Mango' },\n { name: 'Pineapple' },\n { name: 'Lime' },\n { name: 'Lemon' },\n { name: 'Coconut' },\n { name: 'Guava' },\n { name: 'Papaya' },\n { name: 'Orange' },\n { name: 'Grape' },\n { name: 'Jackfruit' },\n { name: 'Durian' },\n]\n"],
5
- "mappings": "AAAA;AACA;AAEe,sBAAsB;AACnC,SACE,oCAAC;AAAA,IAAO,cAAa;AAAA,KACnB,oCAAC,OAAO,SAAP;AAAA,IAAe,GAAG;AAAA,IAAK,WAAW;AAAA,KACjC,oCAAC,OAAO,OAAP;AAAA,IAAa,aAAY;AAAA,GAAY,CACxC,GAEA,oCAAC,OAAO,SAAP,MACC,oCAAC,OAAO,gBAAP,MACC,oCAAC,YAAK,cAAE,CACV,GAEA,oCAAC,OAAO,UAAP;AAAA,IAAgB,UAAU;AAAA,KACzB,oCAAC,OAAO,OAAP,MACC,oCAAC,OAAO,OAAP,MAAa,QAAM,GACnB,MAAM,IAAI,CAAC,MAAM,MAAM;AACtB,WACE,oCAAC,OAAO,MAAP;AAAA,MAAY,OAAO;AAAA,MAAG,KAAK,KAAK;AAAA,MAAM,OAAO,KAAK,KAAK,YAAY;AAAA,OAClE,oCAAC,OAAO,UAAP,MAAiB,KAAK,IAAK,CAC9B;AAAA,EAEJ,CAAC,CACH,CACF,GAEA,oCAAC,OAAO,kBAAP,MACC,oCAAC,YAAK,WAAE,CACV,CACF,CACF;AAEJ;AAEA,MAAM,QAAQ;AAAA,EACZ,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,OAAO;AAAA,EACf,EAAE,MAAM,aAAa;AAAA,EACrB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,UAAU;AAAA,EAClB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,WAAW;AAAA,EACnB,EAAE,MAAM,YAAY;AAAA,EACpB,EAAE,MAAM,YAAY;AAAA,EACpB,EAAE,MAAM,WAAW;AAAA,EACnB,EAAE,MAAM,aAAa;AAAA,EACrB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,YAAY;AAAA,EACpB,EAAE,MAAM,OAAO;AAAA,EACf,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,UAAU;AAAA,EAClB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,SAAS;AAAA,EACjB,EAAE,MAAM,SAAS;AAAA,EACjB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,YAAY;AAAA,EACpB,EAAE,MAAM,SAAS;AACnB;",
4
+ "sourcesContent": ["import { ChevronDown, ChevronUp } from '@tamagui/feather-icons'\nimport { LinearGradient, Select, Text, YStack } from 'tamagui'\n\nexport default function SelectDemo() {\n return (\n <Select defaultValue=\"apple\">\n <Select.Trigger w={200} iconAfter={ChevronDown}>\n <Select.Value placeholder=\"Something\" />\n </Select.Trigger>\n\n <Select.Content>\n <Select.ScrollUpButton ai=\"center\" jc=\"center\" pos=\"relative\" w=\"100%\" h=\"$3\">\n <YStack zi={10}>\n <ChevronUp size={20} />\n </YStack>\n <LinearGradient\n start={[0, 0]}\n end={[0, 1]}\n fullscreen\n colors={['$background', '$backgroundTransparent']}\n />\n </Select.ScrollUpButton>\n\n <Select.Viewport minWidth={200}>\n <Select.Group>\n <Select.Label>Fruits</Select.Label>\n {items.map((item, i) => {\n return (\n <Select.Item index={i} key={item.name} value={item.name.toLowerCase()}>\n <Select.ItemText>{item.name}</Select.ItemText>\n </Select.Item>\n )\n })}\n </Select.Group>\n </Select.Viewport>\n\n <Select.ScrollDownButton ai=\"center\" jc=\"center\" pos=\"relative\" w=\"100%\" h=\"$3\">\n <YStack zi={10}>\n <ChevronDown size={20} />\n </YStack>\n <LinearGradient\n start={[0, 0]}\n end={[0, 1]}\n fullscreen\n colors={['$backgroundTransparent', '$background']}\n />\n </Select.ScrollDownButton>\n </Select.Content>\n </Select>\n )\n}\n\nconst items = [\n { name: 'Apple' },\n { name: 'Pear' },\n { name: 'Blackberry' },\n { name: 'Peach' },\n { name: 'Apricot' },\n { name: 'Melon' },\n { name: 'Honeydew' },\n { name: 'Starfruit' },\n { name: 'Blueberry' },\n { name: 'Rasberry' },\n { name: 'Strawberry' },\n { name: 'Mango' },\n { name: 'Pineapple' },\n { name: 'Lime' },\n { name: 'Lemon' },\n { name: 'Coconut' },\n { name: 'Guava' },\n { name: 'Papaya' },\n { name: 'Orange' },\n { name: 'Grape' },\n { name: 'Jackfruit' },\n { name: 'Durian' },\n]\n"],
5
+ "mappings": "AAAA;AACA;AAEe,sBAAsB;AACnC,SACE,oCAAC;AAAA,IAAO,cAAa;AAAA,KACnB,oCAAC,OAAO,SAAP;AAAA,IAAe,GAAG;AAAA,IAAK,WAAW;AAAA,KACjC,oCAAC,OAAO,OAAP;AAAA,IAAa,aAAY;AAAA,GAAY,CACxC,GAEA,oCAAC,OAAO,SAAP,MACC,oCAAC,OAAO,gBAAP;AAAA,IAAsB,IAAG;AAAA,IAAS,IAAG;AAAA,IAAS,KAAI;AAAA,IAAW,GAAE;AAAA,IAAO,GAAE;AAAA,KACvE,oCAAC;AAAA,IAAO,IAAI;AAAA,KACV,oCAAC;AAAA,IAAU,MAAM;AAAA,GAAI,CACvB,GACA,oCAAC;AAAA,IACC,OAAO,CAAC,GAAG,CAAC;AAAA,IACZ,KAAK,CAAC,GAAG,CAAC;AAAA,IACV,YAAU;AAAA,IACV,QAAQ,CAAC,eAAe,wBAAwB;AAAA,GAClD,CACF,GAEA,oCAAC,OAAO,UAAP;AAAA,IAAgB,UAAU;AAAA,KACzB,oCAAC,OAAO,OAAP,MACC,oCAAC,OAAO,OAAP,MAAa,QAAM,GACnB,MAAM,IAAI,CAAC,MAAM,MAAM;AACtB,WACE,oCAAC,OAAO,MAAP;AAAA,MAAY,OAAO;AAAA,MAAG,KAAK,KAAK;AAAA,MAAM,OAAO,KAAK,KAAK,YAAY;AAAA,OAClE,oCAAC,OAAO,UAAP,MAAiB,KAAK,IAAK,CAC9B;AAAA,EAEJ,CAAC,CACH,CACF,GAEA,oCAAC,OAAO,kBAAP;AAAA,IAAwB,IAAG;AAAA,IAAS,IAAG;AAAA,IAAS,KAAI;AAAA,IAAW,GAAE;AAAA,IAAO,GAAE;AAAA,KACzE,oCAAC;AAAA,IAAO,IAAI;AAAA,KACV,oCAAC;AAAA,IAAY,MAAM;AAAA,GAAI,CACzB,GACA,oCAAC;AAAA,IACC,OAAO,CAAC,GAAG,CAAC;AAAA,IACZ,KAAK,CAAC,GAAG,CAAC;AAAA,IACV,YAAU;AAAA,IACV,QAAQ,CAAC,0BAA0B,aAAa;AAAA,GAClD,CACF,CACF,CACF;AAEJ;AAEA,MAAM,QAAQ;AAAA,EACZ,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,OAAO;AAAA,EACf,EAAE,MAAM,aAAa;AAAA,EACrB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,UAAU;AAAA,EAClB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,WAAW;AAAA,EACnB,EAAE,MAAM,YAAY;AAAA,EACpB,EAAE,MAAM,YAAY;AAAA,EACpB,EAAE,MAAM,WAAW;AAAA,EACnB,EAAE,MAAM,aAAa;AAAA,EACrB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,YAAY;AAAA,EACpB,EAAE,MAAM,OAAO;AAAA,EACf,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,UAAU;AAAA,EAClB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,SAAS;AAAA,EACjB,EAAE,MAAM,SAAS;AAAA,EACjB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,YAAY;AAAA,EACpB,EAAE,MAAM,SAAS;AACnB;",
6
6
  "names": []
7
7
  }
@@ -1,17 +1,23 @@
1
- import { ChevronDown } from "@tamagui/feather-icons";
2
- import { Select, Text } from "tamagui";
1
+ import { ChevronDown, ChevronUp } from "@tamagui/feather-icons";
2
+ import { LinearGradient, Select, YStack } from "tamagui";
3
3
  function SelectDemo() {
4
4
  return <Select defaultValue="apple">
5
5
  <Select.Trigger w={200} iconAfter={ChevronDown}><Select.Value placeholder="Something" /></Select.Trigger>
6
6
  <Select.Content>
7
- <Select.ScrollUpButton><Text>{"\u261D\uFE0F"}</Text></Select.ScrollUpButton>
7
+ <Select.ScrollUpButton ai="center" jc="center" pos="relative" w="100%" h="$3">
8
+ <YStack zi={10}><ChevronUp size={20} /></YStack>
9
+ <LinearGradient start={[0, 0]} end={[0, 1]} fullscreen colors={["$background", "$backgroundTransparent"]} />
10
+ </Select.ScrollUpButton>
8
11
  <Select.Viewport minWidth={200}><Select.Group>
9
12
  <Select.Label>Fruits</Select.Label>
10
13
  {items.map((item, i) => {
11
14
  return <Select.Item index={i} key={item.name} value={item.name.toLowerCase()}><Select.ItemText>{item.name}</Select.ItemText></Select.Item>;
12
15
  })}
13
16
  </Select.Group></Select.Viewport>
14
- <Select.ScrollDownButton><Text>{"\u{1F447}"}</Text></Select.ScrollDownButton>
17
+ <Select.ScrollDownButton ai="center" jc="center" pos="relative" w="100%" h="$3">
18
+ <YStack zi={10}><ChevronDown size={20} /></YStack>
19
+ <LinearGradient start={[0, 0]} end={[0, 1]} fullscreen colors={["$backgroundTransparent", "$background"]} />
20
+ </Select.ScrollDownButton>
15
21
  </Select.Content>
16
22
  </Select>;
17
23
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tamagui/demos",
3
- "version": "1.0.1-beta.73",
3
+ "version": "1.0.1-beta.74",
4
4
  "sideEffects": false,
5
5
  "source": "src/index.ts",
6
6
  "types": "./types/index.d.ts",
@@ -17,16 +17,16 @@
17
17
  "watch": "tamagui-build --watch"
18
18
  },
19
19
  "dependencies": {
20
- "@tamagui/config-base": "^1.0.1-beta.73",
21
- "@tamagui/core": "^1.0.1-beta.73",
22
- "tamagui": "^1.0.1-beta.73"
20
+ "@tamagui/config-base": "^1.0.1-beta.74",
21
+ "@tamagui/core": "^1.0.1-beta.74",
22
+ "tamagui": "^1.0.1-beta.74"
23
23
  },
24
24
  "peerDependencies": {
25
25
  "react": "*",
26
26
  "react-dom": "*"
27
27
  },
28
28
  "devDependencies": {
29
- "@tamagui/build": "^1.0.1-beta.73",
29
+ "@tamagui/build": "^1.0.1-beta.74",
30
30
  "react": "*",
31
31
  "react-dom": "*"
32
32
  },
@@ -1,5 +1,5 @@
1
- import { ChevronDown } from '@tamagui/feather-icons'
2
- import { Select, Text } from 'tamagui'
1
+ import { ChevronDown, ChevronUp } from '@tamagui/feather-icons'
2
+ import { LinearGradient, Select, Text, YStack } from 'tamagui'
3
3
 
4
4
  export default function SelectDemo() {
5
5
  return (
@@ -9,8 +9,16 @@ export default function SelectDemo() {
9
9
  </Select.Trigger>
10
10
 
11
11
  <Select.Content>
12
- <Select.ScrollUpButton>
13
- <Text>☝️</Text>
12
+ <Select.ScrollUpButton ai="center" jc="center" pos="relative" w="100%" h="$3">
13
+ <YStack zi={10}>
14
+ <ChevronUp size={20} />
15
+ </YStack>
16
+ <LinearGradient
17
+ start={[0, 0]}
18
+ end={[0, 1]}
19
+ fullscreen
20
+ colors={['$background', '$backgroundTransparent']}
21
+ />
14
22
  </Select.ScrollUpButton>
15
23
 
16
24
  <Select.Viewport minWidth={200}>
@@ -26,8 +34,16 @@ export default function SelectDemo() {
26
34
  </Select.Group>
27
35
  </Select.Viewport>
28
36
 
29
- <Select.ScrollDownButton>
30
- <Text>👇</Text>
37
+ <Select.ScrollDownButton ai="center" jc="center" pos="relative" w="100%" h="$3">
38
+ <YStack zi={10}>
39
+ <ChevronDown size={20} />
40
+ </YStack>
41
+ <LinearGradient
42
+ start={[0, 0]}
43
+ end={[0, 1]}
44
+ fullscreen
45
+ colors={['$backgroundTransparent', '$background']}
46
+ />
31
47
  </Select.ScrollDownButton>
32
48
  </Select.Content>
33
49
  </Select>
@@ -1 +1 @@
1
- {"version":3,"file":"SelectDemo.d.ts","sourceRoot":"","sources":["../src/SelectDemo.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,OAAO,UAAU,UAAU,gBA+BjC"}
1
+ {"version":3,"file":"SelectDemo.d.ts","sourceRoot":"","sources":["../src/SelectDemo.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,OAAO,UAAU,UAAU,gBA+CjC"}