@tamagui/demos 1.1.7 → 1.1.8

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 (9) hide show
  1. package/dist/cjs/PopoverDemo.js +21 -9
  2. package/dist/cjs/PopoverDemo.js.map +2 -2
  3. package/dist/esm/PopoverDemo.js +21 -9
  4. package/dist/esm/PopoverDemo.js.map +2 -2
  5. package/dist/jsx/PopoverDemo.js +15 -11
  6. package/dist/jsx/PopoverDemo.js.map +2 -2
  7. package/package.json +16 -16
  8. package/src/PopoverDemo.tsx +15 -11
  9. package/types/PopoverDemo.d.ts +2 -1
package/dist/cjs/PopoverDemo.js CHANGED
@@ -28,27 +28,38 @@ var import_tamagui = require("tamagui");
28
28
  function PopoverDemo() {
29
29
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
30
30
  space: "$2",
31
+ f: 1,
32
+ jc: "center",
33
+ ai: "center",
31
34
  children: [
32
35
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Demo, {
33
36
  placement: "left",
34
- Icon: import_lucide_icons.ChevronLeft
37
+ Icon: import_lucide_icons.ChevronLeft,
38
+ Name: "left-popover"
35
39
  }),
36
40
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Demo, {
37
41
  placement: "bottom",
38
- Icon: import_lucide_icons.ChevronDown
42
+ Icon: import_lucide_icons.ChevronDown,
43
+ Name: "bottom-popover"
39
44
  }),
40
45
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Demo, {
41
46
  placement: "top",
42
- Icon: import_lucide_icons.ChevronUp
47
+ Icon: import_lucide_icons.ChevronUp,
48
+ Name: "top-popover"
43
49
  }),
44
50
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Demo, {
45
51
  placement: "right",
46
- Icon: import_lucide_icons.ChevronRight
52
+ Icon: import_lucide_icons.ChevronRight,
53
+ Name: "right-popover"
47
54
  })
48
55
  ]
49
56
  });
50
57
  }
51
- function Demo({ Icon, ...props }) {
58
+ function Demo({
59
+ Icon,
60
+ Name,
61
+ ...props
62
+ }) {
52
63
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
53
64
  size: "$5",
54
65
  ...props,
@@ -61,7 +72,7 @@ function Demo({ Icon, ...props }) {
61
72
  }),
62
73
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Adapt, {
63
74
  when: "sm",
64
- platform: "touch",
75
+ platform: "web",
65
76
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Popover.Sheet, {
66
77
  modal: true,
67
78
  dismissOnSnapToBottom: true,
@@ -104,16 +115,17 @@ function Demo({ Icon, ...props }) {
104
115
  children: [
105
116
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Label, {
106
117
  size: "$3",
107
- htmlFor: "name",
118
+ htmlFor: Name,
108
119
  children: "Name"
109
120
  }),
110
121
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Input, {
111
122
  size: "$3",
112
- id: "name"
123
+ id: Name
113
124
  })
114
125
  ]
115
126
  }),
116
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
127
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Popover.Close, {
128
+ asChild: true,
117
129
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, {
118
130
  size: "$3",
119
131
  onPress: () => {
package/dist/cjs/PopoverDemo.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/PopoverDemo.tsx"],
4
- "sourcesContent": ["import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@tamagui/lucide-icons'\nimport {\n Adapt,\n Button,\n Input,\n Label,\n Popover,\n PopoverProps,\n XStack,\n YGroup,\n} from 'tamagui'\n\nexport function PopoverDemo() {\n return (\n <XStack space=\"$2\">\n <Demo placement=\"left\" Icon={ChevronLeft} />\n <Demo placement=\"bottom\" Icon={ChevronDown} />\n <Demo placement=\"top\" Icon={ChevronUp} />\n <Demo placement=\"right\" Icon={ChevronRight} />\n </XStack>\n )\n}\n\nexport function Demo({ Icon, ...props }: PopoverProps & { Icon?: any }) {\n return (\n <Popover size=\"$5\" {...props}>\n <Popover.Trigger asChild>\n <Button icon={Icon} />\n </Popover.Trigger>\n\n <Adapt when=\"sm\" platform=\"touch\">\n <Popover.Sheet modal dismissOnSnapToBottom>\n <Popover.Sheet.Frame padding=\"$4\">\n <Adapt.Contents />\n </Popover.Sheet.Frame>\n <Popover.Sheet.Overlay />\n </Popover.Sheet>\n </Adapt>\n\n <Popover.Content\n bw={1}\n boc=\"$borderColor\"\n enterStyle={{ x: 0, y: -10, o: 0 }}\n exitStyle={{ x: 0, y: -10, o: 0 }}\n x={0}\n y={0}\n o={1}\n animation={[\n 'quick',\n {\n opacity: {\n overshootClamping: true,\n },\n },\n ]}\n elevate\n >\n <Popover.Arrow bw={1} boc=\"$borderColor\" />\n\n <YGroup space=\"$3\">\n <XStack space=\"$3\">\n <Label size=\"$3\" htmlFor=\"name\">\n Name\n </Label>\n <Input size=\"$3\" id=\"name\" />\n </XStack>\n <Popover.Trigger>\n <Button\n size=\"$3\"\n onPress={() => {\n /* Custom code goes here, does not interfere with popover closure */\n }}\n >\n Submit\n </Button>\n </Popover.Trigger>\n </YGroup>\n </Popover.Content>\n </Popover>\n )\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcI;AAdJ,0BAAkE;AAClE,qBASO;AAEA,SAAS,cAAc;AAC5B,SACE,6CAAC;AAAA,IAAO,OAAM;AAAA,IACZ;AAAA,kDAAC;AAAA,QAAK,WAAU;AAAA,QAAO,MAAM;AAAA,OAAa;AAAA,MAC1C,4CAAC;AAAA,QAAK,WAAU;AAAA,QAAS,MAAM;AAAA,OAAa;AAAA,MAC5C,4CAAC;AAAA,QAAK,WAAU;AAAA,QAAM,MAAM;AAAA,OAAW;AAAA,MACvC,4CAAC;AAAA,QAAK,WAAU;AAAA,QAAQ,MAAM;AAAA,OAAc;AAAA;AAAA,GAC9C;AAEJ;AAEO,SAAS,KAAK,EAAE,SAAS,MAAM,GAAkC;AACtE,SACE,6CAAC;AAAA,IAAQ,MAAK;AAAA,IAAM,GAAG;AAAA,IACrB;AAAA,kDAAC,uBAAQ,SAAR;AAAA,QAAgB,SAAO;AAAA,QACtB,sDAAC;AAAA,UAAO,MAAM;AAAA,SAAM;AAAA,OACtB;AAAA,MAEA,4CAAC;AAAA,QAAM,MAAK;AAAA,QAAK,UAAS;AAAA,QACxB,uDAAC,uBAAQ,OAAR;AAAA,UAAc,OAAK;AAAA,UAAC,uBAAqB;AAAA,UACxC;AAAA,wDAAC,uBAAQ,MAAM,OAAd;AAAA,cAAoB,SAAQ;AAAA,cAC3B,sDAAC,qBAAM,UAAN,EAAe;AAAA,aAClB;AAAA,YACA,4CAAC,uBAAQ,MAAM,SAAd,EAAsB;AAAA;AAAA,SACzB;AAAA,OACF;AAAA,MAEA,6CAAC,uBAAQ,SAAR;AAAA,QACC,IAAI;AAAA,QACJ,KAAI;AAAA,QACJ,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE;AAAA,QACjC,WAAW,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE;AAAA,QAChC,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,SAAS;AAAA,cACP,mBAAmB;AAAA,YACrB;AAAA,UACF;AAAA,QACF;AAAA,QACA,SAAO;AAAA,QAEP;AAAA,sDAAC,uBAAQ,OAAR;AAAA,YAAc,IAAI;AAAA,YAAG,KAAI;AAAA,WAAe;AAAA,UAEzC,6CAAC;AAAA,YAAO,OAAM;AAAA,YACZ;AAAA,2DAAC;AAAA,gBAAO,OAAM;AAAA,gBACZ;AAAA,8DAAC;AAAA,oBAAM,MAAK;AAAA,oBAAK,SAAQ;AAAA,oBAAO;AAAA,mBAEhC;AAAA,kBACA,4CAAC;AAAA,oBAAM,MAAK;AAAA,oBAAK,IAAG;AAAA,mBAAO;AAAA;AAAA,eAC7B;AAAA,cACA,4CAAC,uBAAQ,SAAR;AAAA,gBACC,sDAAC;AAAA,kBACC,MAAK;AAAA,kBACL,SAAS,MAAM;AAAA,kBAEf;AAAA,kBACD;AAAA,iBAED;AAAA,eACF;AAAA;AAAA,WACF;AAAA;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;",
4
+ "sourcesContent": ["import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@tamagui/lucide-icons'\nimport {\n Adapt,\n Button,\n Input,\n Label,\n Popover,\n PopoverProps,\n XStack,\n YGroup,\n} from 'tamagui'\n\nexport function PopoverDemo() {\n return (\n <XStack space=\"$2\" f={1} jc=\"center\" ai=\"center\">\n <Demo placement=\"left\" Icon={ChevronLeft} Name=\"left-popover\" />\n <Demo placement=\"bottom\" Icon={ChevronDown} Name=\"bottom-popover\" />\n <Demo placement=\"top\" Icon={ChevronUp} Name=\"top-popover\" />\n <Demo placement=\"right\" Icon={ChevronRight} Name=\"right-popover\" />\n </XStack>\n )\n}\n\nexport function Demo({\n Icon,\n Name,\n ...props\n}: PopoverProps & { Icon?: any; Name?: string }) {\n return (\n <Popover size=\"$5\" {...props}>\n <Popover.Trigger asChild>\n <Button icon={Icon} />\n </Popover.Trigger>\n\n <Adapt when=\"sm\" platform=\"web\">\n <Popover.Sheet modal dismissOnSnapToBottom>\n <Popover.Sheet.Frame padding=\"$4\">\n <Adapt.Contents />\n </Popover.Sheet.Frame>\n <Popover.Sheet.Overlay />\n </Popover.Sheet>\n </Adapt>\n\n <Popover.Content\n bw={1}\n boc=\"$borderColor\"\n enterStyle={{ x: 0, y: -10, o: 0 }}\n exitStyle={{ x: 0, y: -10, o: 0 }}\n x={0}\n y={0}\n o={1}\n animation={[\n 'quick',\n {\n opacity: {\n overshootClamping: true,\n },\n },\n ]}\n elevate\n >\n <Popover.Arrow bw={1} boc=\"$borderColor\" />\n\n <YGroup space=\"$3\">\n <XStack space=\"$3\">\n <Label size=\"$3\" htmlFor={Name}>\n Name\n </Label>\n <Input size=\"$3\" id={Name} />\n </XStack>\n <Popover.Close asChild>\n <Button\n size=\"$3\"\n onPress={() => {\n /* Custom code goes here, does not interfere with popover closure */\n }}\n >\n Submit\n </Button>\n </Popover.Close>\n </YGroup>\n </Popover.Content>\n </Popover>\n )\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcI;AAdJ,0BAAkE;AAClE,qBASO;AAEA,SAAS,cAAc;AAC5B,SACE,6CAAC;AAAA,IAAO,OAAM;AAAA,IAAK,GAAG;AAAA,IAAG,IAAG;AAAA,IAAS,IAAG;AAAA,IACtC;AAAA,kDAAC;AAAA,QAAK,WAAU;AAAA,QAAO,MAAM;AAAA,QAAa,MAAK;AAAA,OAAe;AAAA,MAC9D,4CAAC;AAAA,QAAK,WAAU;AAAA,QAAS,MAAM;AAAA,QAAa,MAAK;AAAA,OAAiB;AAAA,MAClE,4CAAC;AAAA,QAAK,WAAU;AAAA,QAAM,MAAM;AAAA,QAAW,MAAK;AAAA,OAAc;AAAA,MAC1D,4CAAC;AAAA,QAAK,WAAU;AAAA,QAAQ,MAAM;AAAA,QAAc,MAAK;AAAA,OAAgB;AAAA;AAAA,GACnE;AAEJ;AAEO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,KACG;AACL,GAAiD;AAC/C,SACE,6CAAC;AAAA,IAAQ,MAAK;AAAA,IAAM,GAAG;AAAA,IACrB;AAAA,kDAAC,uBAAQ,SAAR;AAAA,QAAgB,SAAO;AAAA,QACtB,sDAAC;AAAA,UAAO,MAAM;AAAA,SAAM;AAAA,OACtB;AAAA,MAEA,4CAAC;AAAA,QAAM,MAAK;AAAA,QAAK,UAAS;AAAA,QACxB,uDAAC,uBAAQ,OAAR;AAAA,UAAc,OAAK;AAAA,UAAC,uBAAqB;AAAA,UACxC;AAAA,wDAAC,uBAAQ,MAAM,OAAd;AAAA,cAAoB,SAAQ;AAAA,cAC3B,sDAAC,qBAAM,UAAN,EAAe;AAAA,aAClB;AAAA,YACA,4CAAC,uBAAQ,MAAM,SAAd,EAAsB;AAAA;AAAA,SACzB;AAAA,OACF;AAAA,MAEA,6CAAC,uBAAQ,SAAR;AAAA,QACC,IAAI;AAAA,QACJ,KAAI;AAAA,QACJ,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE;AAAA,QACjC,WAAW,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE;AAAA,QAChC,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,SAAS;AAAA,cACP,mBAAmB;AAAA,YACrB;AAAA,UACF;AAAA,QACF;AAAA,QACA,SAAO;AAAA,QAEP;AAAA,sDAAC,uBAAQ,OAAR;AAAA,YAAc,IAAI;AAAA,YAAG,KAAI;AAAA,WAAe;AAAA,UAEzC,6CAAC;AAAA,YAAO,OAAM;AAAA,YACZ;AAAA,2DAAC;AAAA,gBAAO,OAAM;AAAA,gBACZ;AAAA,8DAAC;AAAA,oBAAM,MAAK;AAAA,oBAAK,SAAS;AAAA,oBAAM;AAAA,mBAEhC;AAAA,kBACA,4CAAC;AAAA,oBAAM,MAAK;AAAA,oBAAK,IAAI;AAAA,mBAAM;AAAA;AAAA,eAC7B;AAAA,cACA,4CAAC,uBAAQ,OAAR;AAAA,gBAAc,SAAO;AAAA,gBACpB,sDAAC;AAAA,kBACC,MAAK;AAAA,kBACL,SAAS,MAAM;AAAA,kBAEf;AAAA,kBACD;AAAA,iBAED;AAAA,eACF;AAAA;AAAA,WACF;AAAA;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;",
6
6
  "names": []
7
7
  }
package/dist/esm/PopoverDemo.js CHANGED
@@ -12,27 +12,38 @@ import {
12
12
  function PopoverDemo() {
13
13
  return /* @__PURE__ */ jsxs(XStack, {
14
14
  space: "$2",
15
+ f: 1,
16
+ jc: "center",
17
+ ai: "center",
15
18
  children: [
16
19
  /* @__PURE__ */ jsx(Demo, {
17
20
  placement: "left",
18
- Icon: ChevronLeft
21
+ Icon: ChevronLeft,
22
+ Name: "left-popover"
19
23
  }),
20
24
  /* @__PURE__ */ jsx(Demo, {
21
25
  placement: "bottom",
22
- Icon: ChevronDown
26
+ Icon: ChevronDown,
27
+ Name: "bottom-popover"
23
28
  }),
24
29
  /* @__PURE__ */ jsx(Demo, {
25
30
  placement: "top",
26
- Icon: ChevronUp
31
+ Icon: ChevronUp,
32
+ Name: "top-popover"
27
33
  }),
28
34
  /* @__PURE__ */ jsx(Demo, {
29
35
  placement: "right",
30
- Icon: ChevronRight
36
+ Icon: ChevronRight,
37
+ Name: "right-popover"
31
38
  })
32
39
  ]
33
40
  });
34
41
  }
35
- function Demo({ Icon, ...props }) {
42
+ function Demo({
43
+ Icon,
44
+ Name,
45
+ ...props
46
+ }) {
36
47
  return /* @__PURE__ */ jsxs(Popover, {
37
48
  size: "$5",
38
49
  ...props,
@@ -45,7 +56,7 @@ function Demo({ Icon, ...props }) {
45
56
  }),
46
57
  /* @__PURE__ */ jsx(Adapt, {
47
58
  when: "sm",
48
- platform: "touch",
59
+ platform: "web",
49
60
  children: /* @__PURE__ */ jsxs(Popover.Sheet, {
50
61
  modal: true,
51
62
  dismissOnSnapToBottom: true,
@@ -88,16 +99,17 @@ function Demo({ Icon, ...props }) {
88
99
  children: [
89
100
  /* @__PURE__ */ jsx(Label, {
90
101
  size: "$3",
91
- htmlFor: "name",
102
+ htmlFor: Name,
92
103
  children: "Name"
93
104
  }),
94
105
  /* @__PURE__ */ jsx(Input, {
95
106
  size: "$3",
96
- id: "name"
107
+ id: Name
97
108
  })
98
109
  ]
99
110
  }),
100
- /* @__PURE__ */ jsx(Popover.Trigger, {
111
+ /* @__PURE__ */ jsx(Popover.Close, {
112
+ asChild: true,
101
113
  children: /* @__PURE__ */ jsx(Button, {
102
114
  size: "$3",
103
115
  onPress: () => {
package/dist/esm/PopoverDemo.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/PopoverDemo.tsx"],
4
- "sourcesContent": ["import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@tamagui/lucide-icons'\nimport {\n Adapt,\n Button,\n Input,\n Label,\n Popover,\n PopoverProps,\n XStack,\n YGroup,\n} from 'tamagui'\n\nexport function PopoverDemo() {\n return (\n <XStack space=\"$2\">\n <Demo placement=\"left\" Icon={ChevronLeft} />\n <Demo placement=\"bottom\" Icon={ChevronDown} />\n <Demo placement=\"top\" Icon={ChevronUp} />\n <Demo placement=\"right\" Icon={ChevronRight} />\n </XStack>\n )\n}\n\nexport function Demo({ Icon, ...props }: PopoverProps & { Icon?: any }) {\n return (\n <Popover size=\"$5\" {...props}>\n <Popover.Trigger asChild>\n <Button icon={Icon} />\n </Popover.Trigger>\n\n <Adapt when=\"sm\" platform=\"touch\">\n <Popover.Sheet modal dismissOnSnapToBottom>\n <Popover.Sheet.Frame padding=\"$4\">\n <Adapt.Contents />\n </Popover.Sheet.Frame>\n <Popover.Sheet.Overlay />\n </Popover.Sheet>\n </Adapt>\n\n <Popover.Content\n bw={1}\n boc=\"$borderColor\"\n enterStyle={{ x: 0, y: -10, o: 0 }}\n exitStyle={{ x: 0, y: -10, o: 0 }}\n x={0}\n y={0}\n o={1}\n animation={[\n 'quick',\n {\n opacity: {\n overshootClamping: true,\n },\n },\n ]}\n elevate\n >\n <Popover.Arrow bw={1} boc=\"$borderColor\" />\n\n <YGroup space=\"$3\">\n <XStack space=\"$3\">\n <Label size=\"$3\" htmlFor=\"name\">\n Name\n </Label>\n <Input size=\"$3\" id=\"name\" />\n </XStack>\n <Popover.Trigger>\n <Button\n size=\"$3\"\n onPress={() => {\n /* Custom code goes here, does not interfere with popover closure */\n }}\n >\n Submit\n </Button>\n </Popover.Trigger>\n </YGroup>\n </Popover.Content>\n </Popover>\n )\n}\n"],
5
- "mappings": "AAcI,SACE,KADF;AAdJ,SAAS,aAAa,aAAa,cAAc,iBAAiB;AAClE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,cAAc;AAC5B,SACE,qBAAC;AAAA,IAAO,OAAM;AAAA,IACZ;AAAA,0BAAC;AAAA,QAAK,WAAU;AAAA,QAAO,MAAM;AAAA,OAAa;AAAA,MAC1C,oBAAC;AAAA,QAAK,WAAU;AAAA,QAAS,MAAM;AAAA,OAAa;AAAA,MAC5C,oBAAC;AAAA,QAAK,WAAU;AAAA,QAAM,MAAM;AAAA,OAAW;AAAA,MACvC,oBAAC;AAAA,QAAK,WAAU;AAAA,QAAQ,MAAM;AAAA,OAAc;AAAA;AAAA,GAC9C;AAEJ;AAEO,SAAS,KAAK,EAAE,SAAS,MAAM,GAAkC;AACtE,SACE,qBAAC;AAAA,IAAQ,MAAK;AAAA,IAAM,GAAG;AAAA,IACrB;AAAA,0BAAC,QAAQ,SAAR;AAAA,QAAgB,SAAO;AAAA,QACtB,8BAAC;AAAA,UAAO,MAAM;AAAA,SAAM;AAAA,OACtB;AAAA,MAEA,oBAAC;AAAA,QAAM,MAAK;AAAA,QAAK,UAAS;AAAA,QACxB,+BAAC,QAAQ,OAAR;AAAA,UAAc,OAAK;AAAA,UAAC,uBAAqB;AAAA,UACxC;AAAA,gCAAC,QAAQ,MAAM,OAAd;AAAA,cAAoB,SAAQ;AAAA,cAC3B,8BAAC,MAAM,UAAN,EAAe;AAAA,aAClB;AAAA,YACA,oBAAC,QAAQ,MAAM,SAAd,EAAsB;AAAA;AAAA,SACzB;AAAA,OACF;AAAA,MAEA,qBAAC,QAAQ,SAAR;AAAA,QACC,IAAI;AAAA,QACJ,KAAI;AAAA,QACJ,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE;AAAA,QACjC,WAAW,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE;AAAA,QAChC,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,SAAS;AAAA,cACP,mBAAmB;AAAA,YACrB;AAAA,UACF;AAAA,QACF;AAAA,QACA,SAAO;AAAA,QAEP;AAAA,8BAAC,QAAQ,OAAR;AAAA,YAAc,IAAI;AAAA,YAAG,KAAI;AAAA,WAAe;AAAA,UAEzC,qBAAC;AAAA,YAAO,OAAM;AAAA,YACZ;AAAA,mCAAC;AAAA,gBAAO,OAAM;AAAA,gBACZ;AAAA,sCAAC;AAAA,oBAAM,MAAK;AAAA,oBAAK,SAAQ;AAAA,oBAAO;AAAA,mBAEhC;AAAA,kBACA,oBAAC;AAAA,oBAAM,MAAK;AAAA,oBAAK,IAAG;AAAA,mBAAO;AAAA;AAAA,eAC7B;AAAA,cACA,oBAAC,QAAQ,SAAR;AAAA,gBACC,8BAAC;AAAA,kBACC,MAAK;AAAA,kBACL,SAAS,MAAM;AAAA,kBAEf;AAAA,kBACD;AAAA,iBAED;AAAA,eACF;AAAA;AAAA,WACF;AAAA;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;",
4
+ "sourcesContent": ["import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@tamagui/lucide-icons'\nimport {\n Adapt,\n Button,\n Input,\n Label,\n Popover,\n PopoverProps,\n XStack,\n YGroup,\n} from 'tamagui'\n\nexport function PopoverDemo() {\n return (\n <XStack space=\"$2\" f={1} jc=\"center\" ai=\"center\">\n <Demo placement=\"left\" Icon={ChevronLeft} Name=\"left-popover\" />\n <Demo placement=\"bottom\" Icon={ChevronDown} Name=\"bottom-popover\" />\n <Demo placement=\"top\" Icon={ChevronUp} Name=\"top-popover\" />\n <Demo placement=\"right\" Icon={ChevronRight} Name=\"right-popover\" />\n </XStack>\n )\n}\n\nexport function Demo({\n Icon,\n Name,\n ...props\n}: PopoverProps & { Icon?: any; Name?: string }) {\n return (\n <Popover size=\"$5\" {...props}>\n <Popover.Trigger asChild>\n <Button icon={Icon} />\n </Popover.Trigger>\n\n <Adapt when=\"sm\" platform=\"web\">\n <Popover.Sheet modal dismissOnSnapToBottom>\n <Popover.Sheet.Frame padding=\"$4\">\n <Adapt.Contents />\n </Popover.Sheet.Frame>\n <Popover.Sheet.Overlay />\n </Popover.Sheet>\n </Adapt>\n\n <Popover.Content\n bw={1}\n boc=\"$borderColor\"\n enterStyle={{ x: 0, y: -10, o: 0 }}\n exitStyle={{ x: 0, y: -10, o: 0 }}\n x={0}\n y={0}\n o={1}\n animation={[\n 'quick',\n {\n opacity: {\n overshootClamping: true,\n },\n },\n ]}\n elevate\n >\n <Popover.Arrow bw={1} boc=\"$borderColor\" />\n\n <YGroup space=\"$3\">\n <XStack space=\"$3\">\n <Label size=\"$3\" htmlFor={Name}>\n Name\n </Label>\n <Input size=\"$3\" id={Name} />\n </XStack>\n <Popover.Close asChild>\n <Button\n size=\"$3\"\n onPress={() => {\n /* Custom code goes here, does not interfere with popover closure */\n }}\n >\n Submit\n </Button>\n </Popover.Close>\n </YGroup>\n </Popover.Content>\n </Popover>\n )\n}\n"],
5
+ "mappings": "AAcI,SACE,KADF;AAdJ,SAAS,aAAa,aAAa,cAAc,iBAAiB;AAClE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,cAAc;AAC5B,SACE,qBAAC;AAAA,IAAO,OAAM;AAAA,IAAK,GAAG;AAAA,IAAG,IAAG;AAAA,IAAS,IAAG;AAAA,IACtC;AAAA,0BAAC;AAAA,QAAK,WAAU;AAAA,QAAO,MAAM;AAAA,QAAa,MAAK;AAAA,OAAe;AAAA,MAC9D,oBAAC;AAAA,QAAK,WAAU;AAAA,QAAS,MAAM;AAAA,QAAa,MAAK;AAAA,OAAiB;AAAA,MAClE,oBAAC;AAAA,QAAK,WAAU;AAAA,QAAM,MAAM;AAAA,QAAW,MAAK;AAAA,OAAc;AAAA,MAC1D,oBAAC;AAAA,QAAK,WAAU;AAAA,QAAQ,MAAM;AAAA,QAAc,MAAK;AAAA,OAAgB;AAAA;AAAA,GACnE;AAEJ;AAEO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,KACG;AACL,GAAiD;AAC/C,SACE,qBAAC;AAAA,IAAQ,MAAK;AAAA,IAAM,GAAG;AAAA,IACrB;AAAA,0BAAC,QAAQ,SAAR;AAAA,QAAgB,SAAO;AAAA,QACtB,8BAAC;AAAA,UAAO,MAAM;AAAA,SAAM;AAAA,OACtB;AAAA,MAEA,oBAAC;AAAA,QAAM,MAAK;AAAA,QAAK,UAAS;AAAA,QACxB,+BAAC,QAAQ,OAAR;AAAA,UAAc,OAAK;AAAA,UAAC,uBAAqB;AAAA,UACxC;AAAA,gCAAC,QAAQ,MAAM,OAAd;AAAA,cAAoB,SAAQ;AAAA,cAC3B,8BAAC,MAAM,UAAN,EAAe;AAAA,aAClB;AAAA,YACA,oBAAC,QAAQ,MAAM,SAAd,EAAsB;AAAA;AAAA,SACzB;AAAA,OACF;AAAA,MAEA,qBAAC,QAAQ,SAAR;AAAA,QACC,IAAI;AAAA,QACJ,KAAI;AAAA,QACJ,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE;AAAA,QACjC,WAAW,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE;AAAA,QAChC,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,SAAS;AAAA,cACP,mBAAmB;AAAA,YACrB;AAAA,UACF;AAAA,QACF;AAAA,QACA,SAAO;AAAA,QAEP;AAAA,8BAAC,QAAQ,OAAR;AAAA,YAAc,IAAI;AAAA,YAAG,KAAI;AAAA,WAAe;AAAA,UAEzC,qBAAC;AAAA,YAAO,OAAM;AAAA,YACZ;AAAA,mCAAC;AAAA,gBAAO,OAAM;AAAA,gBACZ;AAAA,sCAAC;AAAA,oBAAM,MAAK;AAAA,oBAAK,SAAS;AAAA,oBAAM;AAAA,mBAEhC;AAAA,kBACA,oBAAC;AAAA,oBAAM,MAAK;AAAA,oBAAK,IAAI;AAAA,mBAAM;AAAA;AAAA,eAC7B;AAAA,cACA,oBAAC,QAAQ,OAAR;AAAA,gBAAc,SAAO;AAAA,gBACpB,8BAAC;AAAA,kBACC,MAAK;AAAA,kBACL,SAAS,MAAM;AAAA,kBAEf;AAAA,kBACD;AAAA,iBAED;AAAA,eACF;AAAA;AAAA,WACF;AAAA;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;",
6
6
  "names": []
7
7
  }
package/dist/jsx/PopoverDemo.js CHANGED
@@ -9,17 +9,21 @@ import {
9
9
  YGroup
10
10
  } from "tamagui";
11
11
  function PopoverDemo() {
12
- return <XStack space="$2">
13
- <Demo placement="left" Icon={ChevronLeft} />
14
- <Demo placement="bottom" Icon={ChevronDown} />
15
- <Demo placement="top" Icon={ChevronUp} />
16
- <Demo placement="right" Icon={ChevronRight} />
12
+ return <XStack space="$2" f={1} jc="center" ai="center">
13
+ <Demo placement="left" Icon={ChevronLeft} Name="left-popover" />
14
+ <Demo placement="bottom" Icon={ChevronDown} Name="bottom-popover" />
15
+ <Demo placement="top" Icon={ChevronUp} Name="top-popover" />
16
+ <Demo placement="right" Icon={ChevronRight} Name="right-popover" />
17
17
  </XStack>;
18
18
  }
19
- function Demo({ Icon, ...props }) {
19
+ function Demo({
20
+ Icon,
21
+ Name,
22
+ ...props
23
+ }) {
20
24
  return <Popover size="$5" {...props}>
21
25
  <Popover.Trigger asChild><Button icon={Icon} /></Popover.Trigger>
22
- <Adapt when="sm" platform="touch"><Popover.Sheet modal dismissOnSnapToBottom>
26
+ <Adapt when="sm" platform="web"><Popover.Sheet modal dismissOnSnapToBottom>
23
27
  <Popover.Sheet.Frame padding="$4"><Adapt.Contents /></Popover.Sheet.Frame>
24
28
  <Popover.Sheet.Overlay />
25
29
  </Popover.Sheet></Adapt>
@@ -34,11 +38,11 @@ function Demo({ Icon, ...props }) {
34
38
  <Popover.Arrow bw={1} boc="$borderColor" />
35
39
  <YGroup space="$3">
36
40
  <XStack space="$3">
37
- <Label size="$3" htmlFor="name">Name</Label>
38
- <Input size="$3" id="name" />
41
+ <Label size="$3" htmlFor={Name}>Name</Label>
42
+ <Input size="$3" id={Name} />
39
43
  </XStack>
40
- <Popover.Trigger><Button size="$3" onPress={() => {
41
- }}>Submit</Button></Popover.Trigger>
44
+ <Popover.Close asChild><Button size="$3" onPress={() => {
45
+ }}>Submit</Button></Popover.Close>
42
46
  </YGroup>
43
47
  </Popover.Content>
44
48
  </Popover>;
package/dist/jsx/PopoverDemo.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/PopoverDemo.tsx"],
4
- "sourcesContent": ["import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@tamagui/lucide-icons'\nimport {\n Adapt,\n Button,\n Input,\n Label,\n Popover,\n PopoverProps,\n XStack,\n YGroup,\n} from 'tamagui'\n\nexport function PopoverDemo() {\n return (\n <XStack space=\"$2\">\n <Demo placement=\"left\" Icon={ChevronLeft} />\n <Demo placement=\"bottom\" Icon={ChevronDown} />\n <Demo placement=\"top\" Icon={ChevronUp} />\n <Demo placement=\"right\" Icon={ChevronRight} />\n </XStack>\n )\n}\n\nexport function Demo({ Icon, ...props }: PopoverProps & { Icon?: any }) {\n return (\n <Popover size=\"$5\" {...props}>\n <Popover.Trigger asChild>\n <Button icon={Icon} />\n </Popover.Trigger>\n\n <Adapt when=\"sm\" platform=\"touch\">\n <Popover.Sheet modal dismissOnSnapToBottom>\n <Popover.Sheet.Frame padding=\"$4\">\n <Adapt.Contents />\n </Popover.Sheet.Frame>\n <Popover.Sheet.Overlay />\n </Popover.Sheet>\n </Adapt>\n\n <Popover.Content\n bw={1}\n boc=\"$borderColor\"\n enterStyle={{ x: 0, y: -10, o: 0 }}\n exitStyle={{ x: 0, y: -10, o: 0 }}\n x={0}\n y={0}\n o={1}\n animation={[\n 'quick',\n {\n opacity: {\n overshootClamping: true,\n },\n },\n ]}\n elevate\n >\n <Popover.Arrow bw={1} boc=\"$borderColor\" />\n\n <YGroup space=\"$3\">\n <XStack space=\"$3\">\n <Label size=\"$3\" htmlFor=\"name\">\n Name\n </Label>\n <Input size=\"$3\" id=\"name\" />\n </XStack>\n <Popover.Trigger>\n <Button\n size=\"$3\"\n onPress={() => {\n /* Custom code goes here, does not interfere with popover closure */\n }}\n >\n Submit\n </Button>\n </Popover.Trigger>\n </YGroup>\n </Popover.Content>\n </Popover>\n )\n}\n"],
5
- "mappings": "AAAA,SAAS,aAAa,aAAa,cAAc,iBAAiB;AAClE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,cAAc;AAC5B,SACE,CAAC,OAAO,MAAM;AAAA,IACZ,CAAC,KAAK,UAAU,OAAO,MAAM,aAAa;AAAA,IAC1C,CAAC,KAAK,UAAU,SAAS,MAAM,aAAa;AAAA,IAC5C,CAAC,KAAK,UAAU,MAAM,MAAM,WAAW;AAAA,IACvC,CAAC,KAAK,UAAU,QAAQ,MAAM,cAAc;AAAA,EAC9C,EALC;AAOL;AAEO,SAAS,KAAK,EAAE,SAAS,MAAM,GAAkC;AACtE,SACE,CAAC,QAAQ,KAAK,SAAS;AAAA,IACrB,CAAC,QAAQ,QAAQ,QACf,CAAC,OAAO,MAAM,MAAM,EACtB,EAFC,QAAQ;AAAA,IAIT,CAAC,MAAM,KAAK,KAAK,SAAS,QACxB,CAAC,QAAQ,MAAM,MAAM;AAAA,MACnB,CAAC,QAAQ,MAAM,MAAM,QAAQ,KAC3B,CAAC,MAAM,SAAS,EAClB,EAFC,QAAQ,MAAM;AAAA,MAGf,CAAC,QAAQ,MAAM,QAAQ;AAAA,IACzB,EALC,QAAQ,MAMX,EAPC;AAAA,IASD,CAAC,QAAQ,QACP,IAAI,GACJ,IAAI,eACJ,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE,GACjC,WAAW,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE,GAChC,GAAG,GACH,GAAG,GACH,GAAG,GACH,WAAW;AAAA,MACT;AAAA,MACA;AAAA,QACE,SAAS;AAAA,UACP,mBAAmB;AAAA,QACrB;AAAA,MACF;AAAA,IACF,GACA;AAAA,MAEA,CAAC,QAAQ,MAAM,IAAI,GAAG,IAAI,eAAe;AAAA,MAEzC,CAAC,OAAO,MAAM;AAAA,QACZ,CAAC,OAAO,MAAM;AAAA,UACZ,CAAC,MAAM,KAAK,KAAK,QAAQ,OAAO,IAEhC,EAFC;AAAA,UAGD,CAAC,MAAM,KAAK,KAAK,GAAG,OAAO;AAAA,QAC7B,EALC;AAAA,QAMD,CAAC,QAAQ,QACP,CAAC,OACC,KAAK,KACL,SAAS,MAAM;AAAA,QAEf,GACD,MAED,EAPC,OAQH,EATC,QAAQ;AAAA,MAUX,EAjBC;AAAA,IAkBH,EAtCC,QAAQ;AAAA,EAuCX,EArDC;AAuDL;",
4
+ "sourcesContent": ["import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@tamagui/lucide-icons'\nimport {\n Adapt,\n Button,\n Input,\n Label,\n Popover,\n PopoverProps,\n XStack,\n YGroup,\n} from 'tamagui'\n\nexport function PopoverDemo() {\n return (\n <XStack space=\"$2\" f={1} jc=\"center\" ai=\"center\">\n <Demo placement=\"left\" Icon={ChevronLeft} Name=\"left-popover\" />\n <Demo placement=\"bottom\" Icon={ChevronDown} Name=\"bottom-popover\" />\n <Demo placement=\"top\" Icon={ChevronUp} Name=\"top-popover\" />\n <Demo placement=\"right\" Icon={ChevronRight} Name=\"right-popover\" />\n </XStack>\n )\n}\n\nexport function Demo({\n Icon,\n Name,\n ...props\n}: PopoverProps & { Icon?: any; Name?: string }) {\n return (\n <Popover size=\"$5\" {...props}>\n <Popover.Trigger asChild>\n <Button icon={Icon} />\n </Popover.Trigger>\n\n <Adapt when=\"sm\" platform=\"web\">\n <Popover.Sheet modal dismissOnSnapToBottom>\n <Popover.Sheet.Frame padding=\"$4\">\n <Adapt.Contents />\n </Popover.Sheet.Frame>\n <Popover.Sheet.Overlay />\n </Popover.Sheet>\n </Adapt>\n\n <Popover.Content\n bw={1}\n boc=\"$borderColor\"\n enterStyle={{ x: 0, y: -10, o: 0 }}\n exitStyle={{ x: 0, y: -10, o: 0 }}\n x={0}\n y={0}\n o={1}\n animation={[\n 'quick',\n {\n opacity: {\n overshootClamping: true,\n },\n },\n ]}\n elevate\n >\n <Popover.Arrow bw={1} boc=\"$borderColor\" />\n\n <YGroup space=\"$3\">\n <XStack space=\"$3\">\n <Label size=\"$3\" htmlFor={Name}>\n Name\n </Label>\n <Input size=\"$3\" id={Name} />\n </XStack>\n <Popover.Close asChild>\n <Button\n size=\"$3\"\n onPress={() => {\n /* Custom code goes here, does not interfere with popover closure */\n }}\n >\n Submit\n </Button>\n </Popover.Close>\n </YGroup>\n </Popover.Content>\n </Popover>\n )\n}\n"],
5
+ "mappings": "AAAA,SAAS,aAAa,aAAa,cAAc,iBAAiB;AAClE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,cAAc;AAC5B,SACE,CAAC,OAAO,MAAM,KAAK,GAAG,GAAG,GAAG,SAAS,GAAG;AAAA,IACtC,CAAC,KAAK,UAAU,OAAO,MAAM,aAAa,KAAK,eAAe;AAAA,IAC9D,CAAC,KAAK,UAAU,SAAS,MAAM,aAAa,KAAK,iBAAiB;AAAA,IAClE,CAAC,KAAK,UAAU,MAAM,MAAM,WAAW,KAAK,cAAc;AAAA,IAC1D,CAAC,KAAK,UAAU,QAAQ,MAAM,cAAc,KAAK,gBAAgB;AAAA,EACnE,EALC;AAOL;AAEO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,KACG;AACL,GAAiD;AAC/C,SACE,CAAC,QAAQ,KAAK,SAAS;AAAA,IACrB,CAAC,QAAQ,QAAQ,QACf,CAAC,OAAO,MAAM,MAAM,EACtB,EAFC,QAAQ;AAAA,IAIT,CAAC,MAAM,KAAK,KAAK,SAAS,MACxB,CAAC,QAAQ,MAAM,MAAM;AAAA,MACnB,CAAC,QAAQ,MAAM,MAAM,QAAQ,KAC3B,CAAC,MAAM,SAAS,EAClB,EAFC,QAAQ,MAAM;AAAA,MAGf,CAAC,QAAQ,MAAM,QAAQ;AAAA,IACzB,EALC,QAAQ,MAMX,EAPC;AAAA,IASD,CAAC,QAAQ,QACP,IAAI,GACJ,IAAI,eACJ,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE,GACjC,WAAW,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE,GAChC,GAAG,GACH,GAAG,GACH,GAAG,GACH,WAAW;AAAA,MACT;AAAA,MACA;AAAA,QACE,SAAS;AAAA,UACP,mBAAmB;AAAA,QACrB;AAAA,MACF;AAAA,IACF,GACA;AAAA,MAEA,CAAC,QAAQ,MAAM,IAAI,GAAG,IAAI,eAAe;AAAA,MAEzC,CAAC,OAAO,MAAM;AAAA,QACZ,CAAC,OAAO,MAAM;AAAA,UACZ,CAAC,MAAM,KAAK,KAAK,SAAS,MAAM,IAEhC,EAFC;AAAA,UAGD,CAAC,MAAM,KAAK,KAAK,IAAI,MAAM;AAAA,QAC7B,EALC;AAAA,QAMD,CAAC,QAAQ,MAAM,QACb,CAAC,OACC,KAAK,KACL,SAAS,MAAM;AAAA,QAEf,GACD,MAED,EAPC,OAQH,EATC,QAAQ;AAAA,MAUX,EAjBC;AAAA,IAkBH,EAtCC,QAAQ;AAAA,EAuCX,EArDC;AAuDL;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tamagui/demos",
3
- "version": "1.1.7",
3
+ "version": "1.1.8",
4
4
  "sideEffects": [
5
5
  "*.css"
6
6
  ],
@@ -29,27 +29,27 @@
29
29
  }
30
30
  },
31
31
  "dependencies": {
32
- "@tamagui/avatar": "^1.1.7",
33
- "@tamagui/button": "^1.1.7",
34
- "@tamagui/config-base": "^1.1.7",
35
- "@tamagui/core": "^1.1.7",
36
- "@tamagui/list-item": "^1.1.7",
37
- "@tamagui/logo": "^1.1.7",
38
- "@tamagui/menu": "^1.1.7",
39
- "@tamagui/popover": "^1.1.7",
40
- "@tamagui/progress": "^1.1.7",
41
- "@tamagui/select": "^1.1.7",
42
- "@tamagui/sheet": "^1.1.7",
43
- "@tamagui/slider": "^1.1.7",
44
- "@tamagui/stacks": "^1.1.7",
45
- "tamagui": "^1.1.7"
32
+ "@tamagui/avatar": "^1.1.8",
33
+ "@tamagui/button": "^1.1.8",
34
+ "@tamagui/config-base": "^1.1.8",
35
+ "@tamagui/core": "^1.1.8",
36
+ "@tamagui/list-item": "^1.1.8",
37
+ "@tamagui/logo": "^1.1.8",
38
+ "@tamagui/menu": "^1.1.8",
39
+ "@tamagui/popover": "^1.1.8",
40
+ "@tamagui/progress": "^1.1.8",
41
+ "@tamagui/select": "^1.1.8",
42
+ "@tamagui/sheet": "^1.1.8",
43
+ "@tamagui/slider": "^1.1.8",
44
+ "@tamagui/stacks": "^1.1.8",
45
+ "tamagui": "^1.1.8"
46
46
  },
47
47
  "peerDependencies": {
48
48
  "react": "*",
49
49
  "react-dom": "*"
50
50
  },
51
51
  "devDependencies": {
52
- "@tamagui/build": "^1.1.7",
52
+ "@tamagui/build": "^1.1.8",
53
53
  "react": "^18.2.0",
54
54
  "react-dom": "^18.2.0"
55
55
  },
package/src/PopoverDemo.tsx CHANGED
@@ -12,23 +12,27 @@ import {
12
12
 
13
13
  export function PopoverDemo() {
14
14
  return (
15
- <XStack space="$2">
16
- <Demo placement="left" Icon={ChevronLeft} />
17
- <Demo placement="bottom" Icon={ChevronDown} />
18
- <Demo placement="top" Icon={ChevronUp} />
19
- <Demo placement="right" Icon={ChevronRight} />
15
+ <XStack space="$2" f={1} jc="center" ai="center">
16
+ <Demo placement="left" Icon={ChevronLeft} Name="left-popover" />
17
+ <Demo placement="bottom" Icon={ChevronDown} Name="bottom-popover" />
18
+ <Demo placement="top" Icon={ChevronUp} Name="top-popover" />
19
+ <Demo placement="right" Icon={ChevronRight} Name="right-popover" />
20
20
  </XStack>
21
21
  )
22
22
  }
23
23
 
24
- export function Demo({ Icon, ...props }: PopoverProps & { Icon?: any }) {
24
+ export function Demo({
25
+ Icon,
26
+ Name,
27
+ ...props
28
+ }: PopoverProps & { Icon?: any; Name?: string }) {
25
29
  return (
26
30
  <Popover size="$5" {...props}>
27
31
  <Popover.Trigger asChild>
28
32
  <Button icon={Icon} />
29
33
  </Popover.Trigger>
30
34
 
31
- <Adapt when="sm" platform="touch">
35
+ <Adapt when="sm" platform="web">
32
36
  <Popover.Sheet modal dismissOnSnapToBottom>
33
37
  <Popover.Sheet.Frame padding="$4">
34
38
  <Adapt.Contents />
@@ -59,12 +63,12 @@ export function Demo({ Icon, ...props }: PopoverProps & { Icon?: any }) {
59
63
 
60
64
  <YGroup space="$3">
61
65
  <XStack space="$3">
62
- <Label size="$3" htmlFor="name">
66
+ <Label size="$3" htmlFor={Name}>
63
67
  Name
64
68
  </Label>
65
- <Input size="$3" id="name" />
69
+ <Input size="$3" id={Name} />
66
70
  </XStack>
67
- <Popover.Trigger>
71
+ <Popover.Close asChild>
68
72
  <Button
69
73
  size="$3"
70
74
  onPress={() => {
@@ -73,7 +77,7 @@ export function Demo({ Icon, ...props }: PopoverProps & { Icon?: any }) {
73
77
  >
74
78
  Submit
75
79
  </Button>
76
- </Popover.Trigger>
80
+ </Popover.Close>
77
81
  </YGroup>
78
82
  </Popover.Content>
79
83
  </Popover>
package/types/PopoverDemo.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  /// <reference types="react" />
2
2
  import { PopoverProps } from 'tamagui';
3
3
  export declare function PopoverDemo(): JSX.Element;
4
- export declare function Demo({ Icon, ...props }: PopoverProps & {
4
+ export declare function Demo({ Icon, Name, ...props }: PopoverProps & {
5
5
  Icon?: any;
6
+ Name?: string;
6
7
  }): JSX.Element;
7
8
  //# sourceMappingURL=PopoverDemo.d.ts.map