@tamagui/demos 1.1.8 → 1.1.9

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 (198) hide show
  1. package/dist/cjs/AddThemeDemo.js +12 -22
  2. package/dist/cjs/AddThemeDemo.js.map +1 -1
  3. package/dist/cjs/AlertDialogDemo.js +44 -68
  4. package/dist/cjs/AlertDialogDemo.js.map +1 -1
  5. package/dist/cjs/AnimationsDemo.js +13 -11
  6. package/dist/cjs/AnimationsDemo.js.map +1 -1
  7. package/dist/cjs/AnimationsEnterDemo.js +11 -18
  8. package/dist/cjs/AnimationsEnterDemo.js.map +1 -1
  9. package/dist/cjs/AnimationsHoverDemo.js +17 -16
  10. package/dist/cjs/AnimationsHoverDemo.js.map +1 -1
  11. package/dist/cjs/AnimationsPresenceDemo.js +17 -29
  12. package/dist/cjs/AnimationsPresenceDemo.js.map +1 -1
  13. package/dist/cjs/AnimationsTimingDemo.js +17 -16
  14. package/dist/cjs/AnimationsTimingDemo.js.map +1 -1
  15. package/dist/cjs/AvatarDemo.js +22 -33
  16. package/dist/cjs/AvatarDemo.js.map +1 -1
  17. package/dist/cjs/ButtonDemo.js +16 -63
  18. package/dist/cjs/ButtonDemo.js.map +1 -1
  19. package/dist/cjs/CardDemo.js +29 -57
  20. package/dist/cjs/CardDemo.js.map +1 -1
  21. package/dist/cjs/ColorsDemo.js +62 -86
  22. package/dist/cjs/ColorsDemo.js.map +1 -1
  23. package/dist/cjs/DialogDemo.js +50 -115
  24. package/dist/cjs/DialogDemo.js.map +1 -1
  25. package/dist/cjs/FeatherIconsDemo.js +13 -38
  26. package/dist/cjs/FeatherIconsDemo.js.map +1 -1
  27. package/dist/cjs/FormsDemo.js +10 -39
  28. package/dist/cjs/FormsDemo.js.map +1 -1
  29. package/dist/cjs/GroupDemo.js +16 -51
  30. package/dist/cjs/GroupDemo.js.map +1 -1
  31. package/dist/cjs/HeadingsDemo.js +8 -23
  32. package/dist/cjs/HeadingsDemo.js.map +1 -1
  33. package/dist/cjs/ImageDemo.js +1 -5
  34. package/dist/cjs/ImageDemo.js.map +1 -1
  35. package/dist/cjs/LabelDemo.js +10 -40
  36. package/dist/cjs/LabelDemo.js.map +1 -1
  37. package/dist/cjs/LinearGradientDemo.js +12 -9
  38. package/dist/cjs/LinearGradientDemo.js.map +1 -1
  39. package/dist/cjs/ListItemDemo.js +22 -51
  40. package/dist/cjs/ListItemDemo.js.map +1 -1
  41. package/dist/cjs/LucideIconsDemo.js +13 -38
  42. package/dist/cjs/LucideIconsDemo.js.map +1 -1
  43. package/dist/cjs/PopoverDemo.js +34 -89
  44. package/dist/cjs/PopoverDemo.js.map +1 -1
  45. package/dist/cjs/ProgressDemo.js +30 -61
  46. package/dist/cjs/ProgressDemo.js.map +1 -1
  47. package/dist/cjs/ScrollViewDemo.js +10 -54
  48. package/dist/cjs/ScrollViewDemo.js.map +1 -1
  49. package/dist/cjs/SelectDemo.js +43 -106
  50. package/dist/cjs/SelectDemo.js.map +1 -1
  51. package/dist/cjs/SeparatorDemo.js +12 -42
  52. package/dist/cjs/SeparatorDemo.js.map +1 -1
  53. package/dist/cjs/ShapesDemo.js +4 -16
  54. package/dist/cjs/ShapesDemo.js.map +1 -1
  55. package/dist/cjs/SheetDemo.js +48 -90
  56. package/dist/cjs/SheetDemo.js.map +1 -1
  57. package/dist/cjs/SliderDemo.js +9 -32
  58. package/dist/cjs/SliderDemo.js.map +1 -1
  59. package/dist/cjs/SpinnerDemo.js +4 -15
  60. package/dist/cjs/SpinnerDemo.js.map +1 -1
  61. package/dist/cjs/StacksDemo.js +17 -89
  62. package/dist/cjs/StacksDemo.js.map +1 -1
  63. package/dist/cjs/SwitchDemo.js +11 -45
  64. package/dist/cjs/SwitchDemo.js.map +1 -1
  65. package/dist/cjs/TextDemo.js +9 -33
  66. package/dist/cjs/TextDemo.js.map +1 -1
  67. package/dist/cjs/ThemeInverseDemo.js +10 -35
  68. package/dist/cjs/ThemeInverseDemo.js.map +1 -1
  69. package/dist/cjs/TokensDemo.js +52 -80
  70. package/dist/cjs/TokensDemo.js.map +1 -1
  71. package/dist/cjs/TooltipDemo.js +42 -104
  72. package/dist/cjs/TooltipDemo.js.map +1 -1
  73. package/dist/cjs/UpdateThemeDemo.js +12 -16
  74. package/dist/cjs/UpdateThemeDemo.js.map +1 -1
  75. package/dist/cjs/useOnIntersecting.js +1 -0
  76. package/dist/cjs/useOnIntersecting.js.map +1 -1
  77. package/dist/esm/AddThemeDemo.js +12 -22
  78. package/dist/esm/AddThemeDemo.js.map +1 -1
  79. package/dist/esm/AlertDialogDemo.js +44 -68
  80. package/dist/esm/AlertDialogDemo.js.map +1 -1
  81. package/dist/esm/AnimationsDemo.js +13 -11
  82. package/dist/esm/AnimationsDemo.js.map +1 -1
  83. package/dist/esm/AnimationsEnterDemo.js +11 -18
  84. package/dist/esm/AnimationsEnterDemo.js.map +1 -1
  85. package/dist/esm/AnimationsHoverDemo.js +17 -16
  86. package/dist/esm/AnimationsHoverDemo.js.map +1 -1
  87. package/dist/esm/AnimationsPresenceDemo.js +13 -29
  88. package/dist/esm/AnimationsPresenceDemo.js.map +1 -1
  89. package/dist/esm/AnimationsTimingDemo.js +17 -16
  90. package/dist/esm/AnimationsTimingDemo.js.map +1 -1
  91. package/dist/esm/AvatarDemo.js +22 -33
  92. package/dist/esm/AvatarDemo.js.map +1 -1
  93. package/dist/esm/ButtonDemo.js +16 -63
  94. package/dist/esm/ButtonDemo.js.map +1 -1
  95. package/dist/esm/CardDemo.js +29 -57
  96. package/dist/esm/CardDemo.js.map +1 -1
  97. package/dist/esm/ColorsDemo.js +62 -86
  98. package/dist/esm/ColorsDemo.js.map +1 -1
  99. package/dist/esm/DialogDemo.js +50 -115
  100. package/dist/esm/DialogDemo.js.map +1 -1
  101. package/dist/esm/FeatherIconsDemo.js +9 -38
  102. package/dist/esm/FeatherIconsDemo.js.map +1 -1
  103. package/dist/esm/FormsDemo.js +10 -39
  104. package/dist/esm/FormsDemo.js.map +1 -1
  105. package/dist/esm/GroupDemo.js +16 -51
  106. package/dist/esm/GroupDemo.js.map +1 -1
  107. package/dist/esm/HeadingsDemo.js +8 -23
  108. package/dist/esm/HeadingsDemo.js.map +1 -1
  109. package/dist/esm/ImageDemo.js +1 -5
  110. package/dist/esm/ImageDemo.js.map +1 -1
  111. package/dist/esm/LabelDemo.js +10 -40
  112. package/dist/esm/LabelDemo.js.map +1 -1
  113. package/dist/esm/LinearGradientDemo.js +12 -9
  114. package/dist/esm/LinearGradientDemo.js.map +1 -1
  115. package/dist/esm/ListItemDemo.js +22 -51
  116. package/dist/esm/ListItemDemo.js.map +1 -1
  117. package/dist/esm/LucideIconsDemo.js +9 -38
  118. package/dist/esm/LucideIconsDemo.js.map +1 -1
  119. package/dist/esm/PopoverDemo.js +34 -89
  120. package/dist/esm/PopoverDemo.js.map +1 -1
  121. package/dist/esm/ProgressDemo.js +30 -61
  122. package/dist/esm/ProgressDemo.js.map +1 -1
  123. package/dist/esm/ScrollViewDemo.js +10 -54
  124. package/dist/esm/ScrollViewDemo.js.map +1 -1
  125. package/dist/esm/SelectDemo.js +43 -106
  126. package/dist/esm/SelectDemo.js.map +1 -1
  127. package/dist/esm/SeparatorDemo.js +12 -42
  128. package/dist/esm/SeparatorDemo.js.map +1 -1
  129. package/dist/esm/ShapesDemo.js +4 -16
  130. package/dist/esm/ShapesDemo.js.map +1 -1
  131. package/dist/esm/SheetDemo.js +48 -90
  132. package/dist/esm/SheetDemo.js.map +1 -1
  133. package/dist/esm/SliderDemo.js +9 -32
  134. package/dist/esm/SliderDemo.js.map +1 -1
  135. package/dist/esm/SpinnerDemo.js +4 -15
  136. package/dist/esm/SpinnerDemo.js.map +1 -1
  137. package/dist/esm/StacksDemo.js +17 -89
  138. package/dist/esm/StacksDemo.js.map +1 -1
  139. package/dist/esm/SwitchDemo.js +11 -45
  140. package/dist/esm/SwitchDemo.js.map +1 -1
  141. package/dist/esm/TextDemo.js +9 -33
  142. package/dist/esm/TextDemo.js.map +1 -1
  143. package/dist/esm/ThemeInverseDemo.js +10 -35
  144. package/dist/esm/ThemeInverseDemo.js.map +1 -1
  145. package/dist/esm/TokensDemo.js +52 -80
  146. package/dist/esm/TokensDemo.js.map +1 -1
  147. package/dist/esm/TooltipDemo.js +42 -104
  148. package/dist/esm/TooltipDemo.js.map +1 -1
  149. package/dist/esm/UpdateThemeDemo.js +8 -16
  150. package/dist/esm/UpdateThemeDemo.js.map +1 -1
  151. package/dist/esm/useOnIntersecting.js +1 -0
  152. package/dist/esm/useOnIntersecting.js.map +1 -1
  153. package/dist/jsx/AddThemeDemo.js +14 -11
  154. package/dist/jsx/AddThemeDemo.js.map +1 -1
  155. package/dist/jsx/AlertDialogDemo.js +25 -8
  156. package/dist/jsx/AlertDialogDemo.js.map +1 -1
  157. package/dist/jsx/AnimationsDemo.js +26 -6
  158. package/dist/jsx/AnimationsDemo.js.map +1 -1
  159. package/dist/jsx/AnimationsEnterDemo.js +16 -5
  160. package/dist/jsx/AnimationsEnterDemo.js.map +1 -1
  161. package/dist/jsx/AnimationsHoverDemo.js +13 -5
  162. package/dist/jsx/AnimationsHoverDemo.js.map +1 -1
  163. package/dist/jsx/AnimationsPresenceDemo.js +20 -2
  164. package/dist/jsx/AnimationsPresenceDemo.js.map +1 -1
  165. package/dist/jsx/AnimationsTimingDemo.js +13 -5
  166. package/dist/jsx/AnimationsTimingDemo.js.map +1 -1
  167. package/dist/jsx/AvatarDemo.js +8 -2
  168. package/dist/jsx/AvatarDemo.js.map +1 -1
  169. package/dist/jsx/CardDemo.js +17 -2
  170. package/dist/jsx/CardDemo.js.map +1 -1
  171. package/dist/jsx/ColorsDemo.js +38 -15
  172. package/dist/jsx/ColorsDemo.js.map +1 -1
  173. package/dist/jsx/DialogDemo.js +22 -8
  174. package/dist/jsx/DialogDemo.js.map +1 -1
  175. package/dist/jsx/FeatherIconsDemo.js.map +1 -1
  176. package/dist/jsx/LinearGradientDemo.js +16 -2
  177. package/dist/jsx/LinearGradientDemo.js.map +1 -1
  178. package/dist/jsx/ListItemDemo.js +16 -2
  179. package/dist/jsx/ListItemDemo.js.map +1 -1
  180. package/dist/jsx/LucideIconsDemo.js.map +1 -1
  181. package/dist/jsx/PopoverDemo.js +22 -9
  182. package/dist/jsx/PopoverDemo.js.map +1 -1
  183. package/dist/jsx/ProgressDemo.js +11 -3
  184. package/dist/jsx/ProgressDemo.js.map +1 -1
  185. package/dist/jsx/SelectDemo.js +14 -2
  186. package/dist/jsx/SelectDemo.js.map +1 -1
  187. package/dist/jsx/SheetDemo.js +24 -3
  188. package/dist/jsx/SheetDemo.js.map +1 -1
  189. package/dist/jsx/SliderDemo.js.map +1 -1
  190. package/dist/jsx/TokensDemo.js +22 -10
  191. package/dist/jsx/TokensDemo.js.map +1 -1
  192. package/dist/jsx/TooltipDemo.js +15 -7
  193. package/dist/jsx/TooltipDemo.js.map +1 -1
  194. package/dist/jsx/UpdateThemeDemo.js +14 -12
  195. package/dist/jsx/UpdateThemeDemo.js.map +1 -1
  196. package/dist/jsx/useOnIntersecting.js +1 -0
  197. package/dist/jsx/useOnIntersecting.js.map +1 -1
  198. package/package.json +16 -16
@@ -1,29 +1,14 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { H1, H2, H3, H4, H5, H6, YStack } from "tamagui";
3
3
  function HeadingsDemo() {
4
- return /* @__PURE__ */ jsxs(YStack, {
5
- als: "center",
6
- children: [
7
- /* @__PURE__ */ jsx(H1, {
8
- children: "Heading 1"
9
- }),
10
- /* @__PURE__ */ jsx(H2, {
11
- children: "Heading 2"
12
- }),
13
- /* @__PURE__ */ jsx(H3, {
14
- children: "Heading 3"
15
- }),
16
- /* @__PURE__ */ jsx(H4, {
17
- children: "Heading 4"
18
- }),
19
- /* @__PURE__ */ jsx(H5, {
20
- children: "Heading 5"
21
- }),
22
- /* @__PURE__ */ jsx(H6, {
23
- children: "Heading 6"
24
- })
25
- ]
26
- });
4
+ return /* @__PURE__ */ jsxs(YStack, { als: "center", children: [
5
+ /* @__PURE__ */ jsx(H1, { children: "Heading 1" }),
6
+ /* @__PURE__ */ jsx(H2, { children: "Heading 2" }),
7
+ /* @__PURE__ */ jsx(H3, { children: "Heading 3" }),
8
+ /* @__PURE__ */ jsx(H4, { children: "Heading 4" }),
9
+ /* @__PURE__ */ jsx(H5, { children: "Heading 5" }),
10
+ /* @__PURE__ */ jsx(H6, { children: "Heading 6" })
11
+ ] });
27
12
  }
28
13
  export {
29
14
  HeadingsDemo
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../src/HeadingsDemo.tsx"],
4
4
  "sourcesContent": ["import React from 'react'\nimport { H1, H2, H3, H4, H5, H6, YStack } from 'tamagui'\n\nexport function HeadingsDemo() {\n return (\n <YStack als=\"center\">\n <H1>Heading 1</H1>\n <H2>Heading 2</H2>\n <H3>Heading 3</H3>\n <H4>Heading 4</H4>\n <H5>Heading 5</H5>\n <H6>Heading 6</H6>\n </YStack>\n )\n}\n"],
5
- "mappings": "AAKI,SACE,KADF;AAJJ,SAAS,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,cAAc;AAExC,SAAS,eAAe;AAC7B,SACE,qBAAC;AAAA,IAAO,KAAI;AAAA,IACV;AAAA,0BAAC;AAAA,QAAG;AAAA,OAAS;AAAA,MACb,oBAAC;AAAA,QAAG;AAAA,OAAS;AAAA,MACb,oBAAC;AAAA,QAAG;AAAA,OAAS;AAAA,MACb,oBAAC;AAAA,QAAG;AAAA,OAAS;AAAA,MACb,oBAAC;AAAA,QAAG;AAAA,OAAS;AAAA,MACb,oBAAC;AAAA,QAAG;AAAA,OAAS;AAAA;AAAA,GACf;AAEJ;",
5
+ "mappings": "AAKI,SACE,KADF;AAJJ,SAAS,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,cAAc;AAExC,SAAS,eAAe;AAC7B,SACE,qBAAC,UAAO,KAAI,UACV;AAAA,wBAAC,MAAG,uBAAS;AAAA,IACb,oBAAC,MAAG,uBAAS;AAAA,IACb,oBAAC,MAAG,uBAAS;AAAA,IACb,oBAAC,MAAG,uBAAS;AAAA,IACb,oBAAC,MAAG,uBAAS;AAAA,IACb,oBAAC,MAAG,uBAAS;AAAA,KACf;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -1,11 +1,7 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { Image } from "tamagui";
3
3
  function ImageDemo() {
4
- return /* @__PURE__ */ jsx(Image, {
5
- src: "https://placekitten.com/200/300",
6
- width: 200,
7
- height: 300
8
- });
4
+ return /* @__PURE__ */ jsx(Image, { src: "https://placekitten.com/200/300", width: 200, height: 300 });
9
5
  }
10
6
  export {
11
7
  ImageDemo
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../src/ImageDemo.tsx"],
4
4
  "sourcesContent": ["import { Image } from 'tamagui'\n\nexport function ImageDemo() {\n return <Image src=\"https://placekitten.com/200/300\" width={200} height={300} />\n}\n"],
5
- "mappings": "AAGS;AAHT,SAAS,aAAa;AAEf,SAAS,YAAY;AAC1B,SAAO,oBAAC;AAAA,IAAM,KAAI;AAAA,IAAkC,OAAO;AAAA,IAAK,QAAQ;AAAA,GAAK;AAC/E;",
5
+ "mappings": "AAGS;AAHT,SAAS,aAAa;AAEf,SAAS,YAAY;AAC1B,SAAO,oBAAC,SAAM,KAAI,mCAAkC,OAAO,KAAK,QAAQ,KAAK;AAC/E;",
6
6
  "names": []
7
7
  }
@@ -1,46 +1,16 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { Input, Label, Switch, XStack, YStack } from "tamagui";
3
3
  function LabelDemo() {
4
- return /* @__PURE__ */ jsxs(YStack, {
5
- p: "$3",
6
- miw: 300,
7
- space: "$4",
8
- children: [
9
- /* @__PURE__ */ jsxs(XStack, {
10
- ai: "center",
11
- space: "$4",
12
- children: [
13
- /* @__PURE__ */ jsx(Label, {
14
- w: 90,
15
- htmlFor: "name",
16
- children: "Name"
17
- }),
18
- /* @__PURE__ */ jsx(Input, {
19
- f: 1,
20
- id: "name",
21
- defaultValue: "Nate Wienert"
22
- })
23
- ]
24
- }),
25
- /* @__PURE__ */ jsxs(XStack, {
26
- ai: "center",
27
- space: "$4",
28
- children: [
29
- /* @__PURE__ */ jsx(Label, {
30
- w: 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
- ]
43
- });
4
+ return /* @__PURE__ */ jsxs(YStack, { p: "$3", miw: 300, space: "$4", children: [
5
+ /* @__PURE__ */ jsxs(XStack, { ai: "center", space: "$4", children: [
6
+ /* @__PURE__ */ jsx(Label, { w: 90, htmlFor: "name", children: "Name" }),
7
+ /* @__PURE__ */ jsx(Input, { f: 1, id: "name", defaultValue: "Nate Wienert" })
8
+ ] }),
9
+ /* @__PURE__ */ jsxs(XStack, { ai: "center", space: "$4", children: [
10
+ /* @__PURE__ */ jsx(Label, { w: 90, htmlFor: "notify", children: "Notifications" }),
11
+ /* @__PURE__ */ jsx(Switch, { id: "notify", children: /* @__PURE__ */ jsx(Switch.Thumb, { animation: "quick" }) })
12
+ ] })
13
+ ] });
44
14
  }
45
15
  export {
46
16
  LabelDemo
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../src/LabelDemo.tsx"],
4
4
  "sourcesContent": ["import { Input, Label, Switch, XStack, YStack } from 'tamagui'\n\nexport function LabelDemo() {\n return (\n <YStack p=\"$3\" miw={300} space=\"$4\">\n <XStack ai=\"center\" space=\"$4\">\n <Label w={90} htmlFor=\"name\">\n Name\n </Label>\n <Input f={1} id=\"name\" defaultValue=\"Nate Wienert\" />\n </XStack>\n\n <XStack ai=\"center\" space=\"$4\">\n <Label w={90} htmlFor=\"notify\">\n Notifications\n </Label>\n <Switch id=\"notify\">\n <Switch.Thumb animation=\"quick\" />\n </Switch>\n </XStack>\n </YStack>\n )\n}\n"],
5
- "mappings": "AAKM,SACE,KADF;AALN,SAAS,OAAO,OAAO,QAAQ,QAAQ,cAAc;AAE9C,SAAS,YAAY;AAC1B,SACE,qBAAC;AAAA,IAAO,GAAE;AAAA,IAAK,KAAK;AAAA,IAAK,OAAM;AAAA,IAC7B;AAAA,2BAAC;AAAA,QAAO,IAAG;AAAA,QAAS,OAAM;AAAA,QACxB;AAAA,8BAAC;AAAA,YAAM,GAAG;AAAA,YAAI,SAAQ;AAAA,YAAO;AAAA,WAE7B;AAAA,UACA,oBAAC;AAAA,YAAM,GAAG;AAAA,YAAG,IAAG;AAAA,YAAO,cAAa;AAAA,WAAe;AAAA;AAAA,OACrD;AAAA,MAEA,qBAAC;AAAA,QAAO,IAAG;AAAA,QAAS,OAAM;AAAA,QACxB;AAAA,8BAAC;AAAA,YAAM,GAAG;AAAA,YAAI,SAAQ;AAAA,YAAS;AAAA,WAE/B;AAAA,UACA,oBAAC;AAAA,YAAO,IAAG;AAAA,YACT,8BAAC,OAAO,OAAP;AAAA,cAAa,WAAU;AAAA,aAAQ;AAAA,WAClC;AAAA;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;",
5
+ "mappings": "AAKM,SACE,KADF;AALN,SAAS,OAAO,OAAO,QAAQ,QAAQ,cAAc;AAE9C,SAAS,YAAY;AAC1B,SACE,qBAAC,UAAO,GAAE,MAAK,KAAK,KAAK,OAAM,MAC7B;AAAA,yBAAC,UAAO,IAAG,UAAS,OAAM,MACxB;AAAA,0BAAC,SAAM,GAAG,IAAI,SAAQ,QAAO,kBAE7B;AAAA,MACA,oBAAC,SAAM,GAAG,GAAG,IAAG,QAAO,cAAa,gBAAe;AAAA,OACrD;AAAA,IAEA,qBAAC,UAAO,IAAG,UAAS,OAAM,MACxB;AAAA,0BAAC,SAAM,GAAG,IAAI,SAAQ,UAAS,2BAE/B;AAAA,MACA,oBAAC,UAAO,IAAG,UACT,8BAAC,OAAO,OAAP,EAAa,WAAU,SAAQ,GAClC;AAAA,OACF;AAAA,KACF;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -2,27 +2,30 @@ import { jsx, 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, {
6
- space: true,
7
- children: [
8
- /* @__PURE__ */ jsx(LinearGradient, {
5
+ return /* @__PURE__ */ jsxs(XStack, { space: true, children: [
6
+ /* @__PURE__ */ jsx(
7
+ LinearGradient,
8
+ {
9
9
  width: "$6",
10
10
  height: "$6",
11
11
  br: "$4",
12
12
  colors: ["$red10", "$yellow10"],
13
13
  start: [0, 1],
14
14
  end: [0, 0]
15
- }),
16
- /* @__PURE__ */ jsx(LinearGradient, {
15
+ }
16
+ ),
17
+ /* @__PURE__ */ jsx(
18
+ LinearGradient,
19
+ {
17
20
  width: "$6",
18
21
  height: "$6",
19
22
  br: "$4",
20
23
  colors: ["$background", "$color"],
21
24
  start: [1, 1],
22
25
  end: [0, 0]
23
- })
24
- ]
25
- });
26
+ }
27
+ )
28
+ ] });
26
29
  }
27
30
  export {
28
31
  LinearGradientDemo
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../src/LinearGradientDemo.tsx"],
4
4
  "sourcesContent": ["import { XStack } from 'tamagui'\nimport { LinearGradient } from 'tamagui/linear-gradient'\n\nexport function LinearGradientDemo() {\n return (\n <XStack space>\n {/* tokens */}\n <LinearGradient\n width=\"$6\"\n height=\"$6\"\n br=\"$4\"\n colors={['$red10', '$yellow10']}\n start={[0, 1]}\n end={[0, 0]}\n />\n\n {/* theme values */}\n <LinearGradient\n width=\"$6\"\n height=\"$6\"\n br=\"$4\"\n colors={['$background', '$color']}\n start={[1, 1]}\n end={[0, 0]}\n />\n </XStack>\n )\n}\n"],
5
- "mappings": "AAKI,SAEE,KAFF;AALJ,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAExB,SAAS,qBAAqB;AACnC,SACE,qBAAC;AAAA,IAAO,OAAK;AAAA,IAEX;AAAA,0BAAC;AAAA,QACC,OAAM;AAAA,QACN,QAAO;AAAA,QACP,IAAG;AAAA,QACH,QAAQ,CAAC,UAAU,WAAW;AAAA,QAC9B,OAAO,CAAC,GAAG,CAAC;AAAA,QACZ,KAAK,CAAC,GAAG,CAAC;AAAA,OACZ;AAAA,MAGA,oBAAC;AAAA,QACC,OAAM;AAAA,QACN,QAAO;AAAA,QACP,IAAG;AAAA,QACH,QAAQ,CAAC,eAAe,QAAQ;AAAA,QAChC,OAAO,CAAC,GAAG,CAAC;AAAA,QACZ,KAAK,CAAC,GAAG,CAAC;AAAA,OACZ;AAAA;AAAA,GACF;AAEJ;",
5
+ "mappings": "AAKI,SAEE,KAFF;AALJ,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAExB,SAAS,qBAAqB;AACnC,SACE,qBAAC,UAAO,OAAK,MAEX;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,QAAO;AAAA,QACP,IAAG;AAAA,QACH,QAAQ,CAAC,UAAU,WAAW;AAAA,QAC9B,OAAO,CAAC,GAAG,CAAC;AAAA,QACZ,KAAK,CAAC,GAAG,CAAC;AAAA;AAAA,IACZ;AAAA,IAGA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,QAAO;AAAA,QACP,IAAG;AAAA,QACH,QAAQ,CAAC,eAAe,QAAQ;AAAA,QAChC,OAAO,CAAC,GAAG,CAAC;AAAA,QACZ,KAAK,CAAC,GAAG,CAAC;AAAA;AAAA,IACZ;AAAA,KACF;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -2,73 +2,44 @@ import { jsx, 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, {
6
- $sm: { flexDirection: "column" },
7
- px: "$4",
8
- space: true,
9
- children: [
10
- /* @__PURE__ */ jsx(ListItemDemo1, {}),
11
- /* @__PURE__ */ jsx(ListItemDemo2, {})
12
- ]
13
- });
5
+ return /* @__PURE__ */ jsxs(XStack, { $sm: { flexDirection: "column" }, px: "$4", space: true, children: [
6
+ /* @__PURE__ */ jsx(ListItemDemo1, {}),
7
+ /* @__PURE__ */ jsx(ListItemDemo2, {})
8
+ ] });
14
9
  }
15
10
  function ListItemDemo1() {
16
- return /* @__PURE__ */ jsxs(YGroup, {
17
- als: "center",
18
- bordered: true,
19
- w: 240,
20
- size: "$4",
21
- children: [
22
- /* @__PURE__ */ jsx(ListItem, {
23
- hoverTheme: true,
24
- icon: Star,
25
- title: "Star",
26
- subTitle: "Twinkles"
27
- }),
28
- /* @__PURE__ */ jsx(ListItem, {
29
- hoverTheme: true,
30
- icon: Moon,
31
- children: "Moon"
32
- }),
33
- /* @__PURE__ */ jsx(ListItem, {
34
- hoverTheme: true,
35
- icon: Sun,
36
- children: "Sun"
37
- }),
38
- /* @__PURE__ */ jsx(ListItem, {
39
- hoverTheme: true,
40
- icon: Cloud,
41
- children: "Cloud"
42
- })
43
- ]
44
- });
11
+ return /* @__PURE__ */ jsxs(YGroup, { als: "center", bordered: true, w: 240, size: "$4", children: [
12
+ /* @__PURE__ */ jsx(ListItem, { hoverTheme: true, icon: Star, title: "Star", subTitle: "Twinkles" }),
13
+ /* @__PURE__ */ jsx(ListItem, { hoverTheme: true, icon: Moon, children: "Moon" }),
14
+ /* @__PURE__ */ jsx(ListItem, { hoverTheme: true, icon: Sun, children: "Sun" }),
15
+ /* @__PURE__ */ jsx(ListItem, { hoverTheme: true, icon: Cloud, children: "Cloud" })
16
+ ] });
45
17
  }
46
18
  function ListItemDemo2() {
47
- return /* @__PURE__ */ jsxs(YGroup, {
48
- als: "center",
49
- bordered: true,
50
- w: 240,
51
- size: "$5",
52
- separator: /* @__PURE__ */ jsx(Separator, {}),
53
- children: [
54
- /* @__PURE__ */ jsx(ListItem, {
19
+ return /* @__PURE__ */ jsxs(YGroup, { als: "center", bordered: true, w: 240, size: "$5", separator: /* @__PURE__ */ jsx(Separator, {}), children: [
20
+ /* @__PURE__ */ jsx(
21
+ ListItem,
22
+ {
55
23
  hoverTheme: true,
56
24
  pressTheme: true,
57
25
  title: "Star",
58
26
  subTitle: "Subtitle",
59
27
  icon: Star,
60
28
  iconAfter: ChevronRight
61
- }),
62
- /* @__PURE__ */ jsx(ListItem, {
29
+ }
30
+ ),
31
+ /* @__PURE__ */ jsx(
32
+ ListItem,
33
+ {
63
34
  hoverTheme: true,
64
35
  pressTheme: true,
65
36
  title: "Moon",
66
37
  subTitle: "Subtitle",
67
38
  icon: Moon,
68
39
  iconAfter: ChevronRight
69
- })
70
- ]
71
- });
40
+ }
41
+ )
42
+ ] });
72
43
  }
73
44
  export {
74
45
  ListItemDemo
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../src/ListItemDemo.tsx"],
4
4
  "sourcesContent": ["import { ChevronRight, Cloud, Moon, Star, Sun } from '@tamagui/lucide-icons'\nimport React from 'react'\nimport { ListItem, Separator, XStack, YGroup } from 'tamagui'\n\nexport function ListItemDemo() {\n return (\n <XStack $sm={{ flexDirection: 'column' }} px=\"$4\" space>\n <ListItemDemo1 />\n <ListItemDemo2 />\n </XStack>\n )\n}\n\nfunction ListItemDemo1() {\n return (\n <YGroup als=\"center\" bordered w={240} size=\"$4\">\n <ListItem hoverTheme icon={Star} title=\"Star\" subTitle=\"Twinkles\" />\n <ListItem hoverTheme icon={Moon}>\n Moon\n </ListItem>\n <ListItem hoverTheme icon={Sun}>\n Sun\n </ListItem>\n <ListItem hoverTheme icon={Cloud}>\n Cloud\n </ListItem>\n </YGroup>\n )\n}\n\nfunction ListItemDemo2() {\n return (\n <YGroup als=\"center\" bordered w={240} size=\"$5\" separator={<Separator />}>\n <ListItem\n hoverTheme\n pressTheme\n title=\"Star\"\n subTitle=\"Subtitle\"\n icon={Star}\n iconAfter={ChevronRight}\n />\n <ListItem\n hoverTheme\n pressTheme\n title=\"Moon\"\n subTitle=\"Subtitle\"\n icon={Moon}\n iconAfter={ChevronRight}\n />\n </YGroup>\n )\n}\n"],
5
- "mappings": "AAMI,SACE,KADF;AANJ,SAAS,cAAc,OAAO,MAAM,MAAM,WAAW;AAErD,SAAS,UAAU,WAAW,QAAQ,cAAc;AAE7C,SAAS,eAAe;AAC7B,SACE,qBAAC;AAAA,IAAO,KAAK,EAAE,eAAe,SAAS;AAAA,IAAG,IAAG;AAAA,IAAK,OAAK;AAAA,IACrD;AAAA,0BAAC,iBAAc;AAAA,MACf,oBAAC,iBAAc;AAAA;AAAA,GACjB;AAEJ;AAEA,SAAS,gBAAgB;AACvB,SACE,qBAAC;AAAA,IAAO,KAAI;AAAA,IAAS,UAAQ;AAAA,IAAC,GAAG;AAAA,IAAK,MAAK;AAAA,IACzC;AAAA,0BAAC;AAAA,QAAS,YAAU;AAAA,QAAC,MAAM;AAAA,QAAM,OAAM;AAAA,QAAO,UAAS;AAAA,OAAW;AAAA,MAClE,oBAAC;AAAA,QAAS,YAAU;AAAA,QAAC,MAAM;AAAA,QAAM;AAAA,OAEjC;AAAA,MACA,oBAAC;AAAA,QAAS,YAAU;AAAA,QAAC,MAAM;AAAA,QAAK;AAAA,OAEhC;AAAA,MACA,oBAAC;AAAA,QAAS,YAAU;AAAA,QAAC,MAAM;AAAA,QAAO;AAAA,OAElC;AAAA;AAAA,GACF;AAEJ;AAEA,SAAS,gBAAgB;AACvB,SACE,qBAAC;AAAA,IAAO,KAAI;AAAA,IAAS,UAAQ;AAAA,IAAC,GAAG;AAAA,IAAK,MAAK;AAAA,IAAK,WAAW,oBAAC,aAAU;AAAA,IACpE;AAAA,0BAAC;AAAA,QACC,YAAU;AAAA,QACV,YAAU;AAAA,QACV,OAAM;AAAA,QACN,UAAS;AAAA,QACT,MAAM;AAAA,QACN,WAAW;AAAA,OACb;AAAA,MACA,oBAAC;AAAA,QACC,YAAU;AAAA,QACV,YAAU;AAAA,QACV,OAAM;AAAA,QACN,UAAS;AAAA,QACT,MAAM;AAAA,QACN,WAAW;AAAA,OACb;AAAA;AAAA,GACF;AAEJ;",
5
+ "mappings": "AAMI,SACE,KADF;AANJ,SAAS,cAAc,OAAO,MAAM,MAAM,WAAW;AAErD,SAAS,UAAU,WAAW,QAAQ,cAAc;AAE7C,SAAS,eAAe;AAC7B,SACE,qBAAC,UAAO,KAAK,EAAE,eAAe,SAAS,GAAG,IAAG,MAAK,OAAK,MACrD;AAAA,wBAAC,iBAAc;AAAA,IACf,oBAAC,iBAAc;AAAA,KACjB;AAEJ;AAEA,SAAS,gBAAgB;AACvB,SACE,qBAAC,UAAO,KAAI,UAAS,UAAQ,MAAC,GAAG,KAAK,MAAK,MACzC;AAAA,wBAAC,YAAS,YAAU,MAAC,MAAM,MAAM,OAAM,QAAO,UAAS,YAAW;AAAA,IAClE,oBAAC,YAAS,YAAU,MAAC,MAAM,MAAM,kBAEjC;AAAA,IACA,oBAAC,YAAS,YAAU,MAAC,MAAM,KAAK,iBAEhC;AAAA,IACA,oBAAC,YAAS,YAAU,MAAC,MAAM,OAAO,mBAElC;AAAA,KACF;AAEJ;AAEA,SAAS,gBAAgB;AACvB,SACE,qBAAC,UAAO,KAAI,UAAS,UAAQ,MAAC,GAAG,KAAK,MAAK,MAAK,WAAW,oBAAC,aAAU,GACpE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,YAAU;AAAA,QACV,YAAU;AAAA,QACV,OAAM;AAAA,QACN,UAAS;AAAA,QACT,MAAM;AAAA,QACN,WAAW;AAAA;AAAA,IACb;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,YAAU;AAAA,QACV,YAAU;AAAA,QACV,OAAM;AAAA,QACN,UAAS;AAAA,QACT,MAAM;AAAA,QACN,WAAW;AAAA;AAAA,IACb;AAAA,KACF;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -15,46 +15,17 @@ function LucideIconsDemo() {
15
15
  const iconsMemo = useMemo(() => {
16
16
  const icons = lucideIcons.filter((x) => x.key.startsWith(search.toLowerCase()));
17
17
  return icons.slice(0, 835).map(({ Icon, name }) => {
18
- return /* @__PURE__ */ jsxs(YStack, {
19
- h: size,
20
- ai: "center",
21
- jc: "center",
22
- children: [
23
- /* @__PURE__ */ jsx(Icon, {
24
- size: size * 0.25
25
- }),
26
- /* @__PURE__ */ jsx(Spacer, {}),
27
- /* @__PURE__ */ jsx(Paragraph, {
28
- size: "$2",
29
- o: 0.5,
30
- children: name
31
- })
32
- ]
33
- }, name);
18
+ return /* @__PURE__ */ jsxs(YStack, { h: size, ai: "center", jc: "center", children: [
19
+ /* @__PURE__ */ jsx(Icon, { size: size * 0.25 }),
20
+ /* @__PURE__ */ jsx(Spacer, {}),
21
+ /* @__PURE__ */ jsx(Paragraph, { size: "$2", o: 0.5, children: name })
22
+ ] }, name);
34
23
  });
35
24
  }, [search]);
36
- return /* @__PURE__ */ jsxs(YStack, {
37
- als: "stretch",
38
- p: "$4",
39
- pb: "$0",
40
- space: true,
41
- children: [
42
- /* @__PURE__ */ jsx(Input, {
43
- value: searchRaw,
44
- onChangeText: setSearch,
45
- placeholder: "Search..."
46
- }),
47
- /* @__PURE__ */ jsx(YStack, {
48
- h: 420,
49
- children: /* @__PURE__ */ jsx(ScrollView, {
50
- children: /* @__PURE__ */ jsx(Grid, {
51
- itemMinWidth: size,
52
- children: iconsMemo
53
- })
54
- })
55
- })
56
- ]
57
- });
25
+ return /* @__PURE__ */ jsxs(YStack, { als: "stretch", p: "$4", pb: "$0", space: true, children: [
26
+ /* @__PURE__ */ jsx(Input, { value: searchRaw, onChangeText: setSearch, placeholder: "Search..." }),
27
+ /* @__PURE__ */ jsx(YStack, { h: 420, children: /* @__PURE__ */ jsx(ScrollView, { children: /* @__PURE__ */ jsx(Grid, { itemMinWidth: size, children: iconsMemo }) }) })
28
+ ] });
58
29
  }
59
30
  export {
60
31
  LucideIconsDemo
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../src/LucideIconsDemo.tsx"],
4
4
  "sourcesContent": ["import * as LucideIcons from '@tamagui/lucide-icons'\nimport { useMemo, useState } from 'react'\nimport { ScrollView } from 'react-native'\nimport { Grid, Input, Paragraph, Spacer, YStack, useDebounceValue } from 'tamagui'\n\nconst lucideIcons = Object.keys(LucideIcons).map((name) => ({\n key: name.toLowerCase(),\n name,\n Icon: LucideIcons[name],\n}))\n\nexport function LucideIconsDemo() {\n const [searchRaw, setSearch] = useState('')\n const search = useDebounceValue(searchRaw, 400)\n\n const size = 100\n\n const iconsMemo = useMemo(() => {\n const icons = lucideIcons.filter((x) => x.key.startsWith(search.toLowerCase()))\n return icons.slice(0, 835).map(({ Icon, name }) => {\n return (\n <YStack h={size} ai=\"center\" jc=\"center\" key={name}>\n <Icon size={size * 0.25} />\n <Spacer />\n <Paragraph size=\"$2\" o={0.5}>\n {name}\n </Paragraph>\n </YStack>\n )\n })\n }, [search])\n\n return (\n <YStack als=\"stretch\" p=\"$4\" pb=\"$0\" space>\n <Input value={searchRaw} onChangeText={setSearch} placeholder=\"Search...\" />\n\n <YStack h={420}>\n <ScrollView>\n <Grid itemMinWidth={size}>{iconsMemo}</Grid>\n </ScrollView>\n </YStack>\n </YStack>\n )\n}\n"],
5
- "mappings": "AAqBQ,SACE,KADF;AArBR,YAAY,iBAAiB;AAC7B,SAAS,SAAS,gBAAgB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,MAAM,OAAO,WAAW,QAAQ,QAAQ,wBAAwB;AAEzE,MAAM,cAAc,OAAO,KAAK,WAAW,EAAE,IAAI,CAAC,UAAU;AAAA,EAC1D,KAAK,KAAK,YAAY;AAAA,EACtB;AAAA,EACA,MAAM,YAAY;AACpB,EAAE;AAEK,SAAS,kBAAkB;AAChC,QAAM,CAAC,WAAW,SAAS,IAAI,SAAS,EAAE;AAC1C,QAAM,SAAS,iBAAiB,WAAW,GAAG;AAE9C,QAAM,OAAO;AAEb,QAAM,YAAY,QAAQ,MAAM;AAC9B,UAAM,QAAQ,YAAY,OAAO,CAAC,MAAM,EAAE,IAAI,WAAW,OAAO,YAAY,CAAC,CAAC;AAC9E,WAAO,MAAM,MAAM,GAAG,GAAG,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,MAAM;AACjD,aACE,qBAAC;AAAA,QAAO,GAAG;AAAA,QAAM,IAAG;AAAA,QAAS,IAAG;AAAA,QAC9B;AAAA,8BAAC;AAAA,YAAK,MAAM,OAAO;AAAA,WAAM;AAAA,UACzB,oBAAC,UAAO;AAAA,UACR,oBAAC;AAAA,YAAU,MAAK;AAAA,YAAK,GAAG;AAAA,YACrB;AAAA,WACH;AAAA;AAAA,SAL4C,IAM9C;AAAA,IAEJ,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,qBAAC;AAAA,IAAO,KAAI;AAAA,IAAU,GAAE;AAAA,IAAK,IAAG;AAAA,IAAK,OAAK;AAAA,IACxC;AAAA,0BAAC;AAAA,QAAM,OAAO;AAAA,QAAW,cAAc;AAAA,QAAW,aAAY;AAAA,OAAY;AAAA,MAE1E,oBAAC;AAAA,QAAO,GAAG;AAAA,QACT,8BAAC;AAAA,UACC,8BAAC;AAAA,YAAK,cAAc;AAAA,YAAO;AAAA,WAAU;AAAA,SACvC;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;",
5
+ "mappings": "AAqBQ,SACE,KADF;AArBR,YAAY,iBAAiB;AAC7B,SAAS,SAAS,gBAAgB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,MAAM,OAAO,WAAW,QAAQ,QAAQ,wBAAwB;AAEzE,MAAM,cAAc,OAAO,KAAK,WAAW,EAAE,IAAI,CAAC,UAAU;AAAA,EAC1D,KAAK,KAAK,YAAY;AAAA,EACtB;AAAA,EACA,MAAM,YAAY,IAAI;AACxB,EAAE;AAEK,SAAS,kBAAkB;AAChC,QAAM,CAAC,WAAW,SAAS,IAAI,SAAS,EAAE;AAC1C,QAAM,SAAS,iBAAiB,WAAW,GAAG;AAE9C,QAAM,OAAO;AAEb,QAAM,YAAY,QAAQ,MAAM;AAC9B,UAAM,QAAQ,YAAY,OAAO,CAAC,MAAM,EAAE,IAAI,WAAW,OAAO,YAAY,CAAC,CAAC;AAC9E,WAAO,MAAM,MAAM,GAAG,GAAG,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,MAAM;AACjD,aACE,qBAAC,UAAO,GAAG,MAAM,IAAG,UAAS,IAAG,UAC9B;AAAA,4BAAC,QAAK,MAAM,OAAO,MAAM;AAAA,QACzB,oBAAC,UAAO;AAAA,QACR,oBAAC,aAAU,MAAK,MAAK,GAAG,KACrB,gBACH;AAAA,WAL4C,IAM9C;AAAA,IAEJ,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,qBAAC,UAAO,KAAI,WAAU,GAAE,MAAK,IAAG,MAAK,OAAK,MACxC;AAAA,wBAAC,SAAM,OAAO,WAAW,cAAc,WAAW,aAAY,aAAY;AAAA,IAE1E,oBAAC,UAAO,GAAG,KACT,8BAAC,cACC,8BAAC,QAAK,cAAc,MAAO,qBAAU,GACvC,GACF;AAAA,KACF;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -10,66 +10,27 @@ import {
10
10
  YGroup
11
11
  } from "tamagui";
12
12
  function PopoverDemo() {
13
- return /* @__PURE__ */ jsxs(XStack, {
14
- space: "$2",
15
- f: 1,
16
- jc: "center",
17
- ai: "center",
18
- children: [
19
- /* @__PURE__ */ jsx(Demo, {
20
- placement: "left",
21
- Icon: ChevronLeft,
22
- Name: "left-popover"
23
- }),
24
- /* @__PURE__ */ jsx(Demo, {
25
- placement: "bottom",
26
- Icon: ChevronDown,
27
- Name: "bottom-popover"
28
- }),
29
- /* @__PURE__ */ jsx(Demo, {
30
- placement: "top",
31
- Icon: ChevronUp,
32
- Name: "top-popover"
33
- }),
34
- /* @__PURE__ */ jsx(Demo, {
35
- placement: "right",
36
- Icon: ChevronRight,
37
- Name: "right-popover"
38
- })
39
- ]
40
- });
13
+ return /* @__PURE__ */ jsxs(XStack, { space: "$2", f: 1, jc: "center", ai: "center", children: [
14
+ /* @__PURE__ */ jsx(Demo, { placement: "left", Icon: ChevronLeft, Name: "left-popover" }),
15
+ /* @__PURE__ */ jsx(Demo, { placement: "bottom", Icon: ChevronDown, Name: "bottom-popover" }),
16
+ /* @__PURE__ */ jsx(Demo, { placement: "top", Icon: ChevronUp, Name: "top-popover" }),
17
+ /* @__PURE__ */ jsx(Demo, { placement: "right", Icon: ChevronRight, Name: "right-popover" })
18
+ ] });
41
19
  }
42
20
  function Demo({
43
21
  Icon,
44
22
  Name,
45
23
  ...props
46
24
  }) {
47
- return /* @__PURE__ */ jsxs(Popover, {
48
- size: "$5",
49
- ...props,
50
- children: [
51
- /* @__PURE__ */ jsx(Popover.Trigger, {
52
- asChild: true,
53
- children: /* @__PURE__ */ jsx(Button, {
54
- icon: Icon
55
- })
56
- }),
57
- /* @__PURE__ */ jsx(Adapt, {
58
- when: "sm",
59
- platform: "web",
60
- children: /* @__PURE__ */ jsxs(Popover.Sheet, {
61
- modal: true,
62
- dismissOnSnapToBottom: true,
63
- children: [
64
- /* @__PURE__ */ jsx(Popover.Sheet.Frame, {
65
- padding: "$4",
66
- children: /* @__PURE__ */ jsx(Adapt.Contents, {})
67
- }),
68
- /* @__PURE__ */ jsx(Popover.Sheet.Overlay, {})
69
- ]
70
- })
71
- }),
72
- /* @__PURE__ */ jsxs(Popover.Content, {
25
+ return /* @__PURE__ */ jsxs(Popover, { size: "$5", ...props, children: [
26
+ /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { icon: Icon }) }),
27
+ /* @__PURE__ */ jsx(Adapt, { when: "sm", platform: "web", children: /* @__PURE__ */ jsxs(Popover.Sheet, { modal: true, dismissOnSnapToBottom: true, children: [
28
+ /* @__PURE__ */ jsx(Popover.Sheet.Frame, { padding: "$4", children: /* @__PURE__ */ jsx(Adapt.Contents, {}) }),
29
+ /* @__PURE__ */ jsx(Popover.Sheet.Overlay, {})
30
+ ] }) }),
31
+ /* @__PURE__ */ jsxs(
32
+ Popover.Content,
33
+ {
73
34
  bw: 1,
74
35
  boc: "$borderColor",
75
36
  enterStyle: { x: 0, y: -10, o: 0 },
@@ -87,42 +48,26 @@ function Demo({
87
48
  ],
88
49
  elevate: true,
89
50
  children: [
90
- /* @__PURE__ */ jsx(Popover.Arrow, {
91
- bw: 1,
92
- boc: "$borderColor"
93
- }),
94
- /* @__PURE__ */ jsxs(YGroup, {
95
- space: "$3",
96
- children: [
97
- /* @__PURE__ */ jsxs(XStack, {
98
- space: "$3",
99
- children: [
100
- /* @__PURE__ */ jsx(Label, {
101
- size: "$3",
102
- htmlFor: Name,
103
- children: "Name"
104
- }),
105
- /* @__PURE__ */ jsx(Input, {
106
- size: "$3",
107
- id: Name
108
- })
109
- ]
110
- }),
111
- /* @__PURE__ */ jsx(Popover.Close, {
112
- asChild: true,
113
- children: /* @__PURE__ */ jsx(Button, {
114
- size: "$3",
115
- onPress: () => {
116
- },
117
- children: "Submit"
118
- })
119
- })
120
- ]
121
- })
51
+ /* @__PURE__ */ jsx(Popover.Arrow, { bw: 1, boc: "$borderColor" }),
52
+ /* @__PURE__ */ jsxs(YGroup, { space: "$3", children: [
53
+ /* @__PURE__ */ jsxs(XStack, { space: "$3", children: [
54
+ /* @__PURE__ */ jsx(Label, { size: "$3", htmlFor: Name, children: "Name" }),
55
+ /* @__PURE__ */ jsx(Input, { size: "$3", id: Name })
56
+ ] }),
57
+ /* @__PURE__ */ jsx(Popover.Close, { asChild: true, children: /* @__PURE__ */ jsx(
58
+ Button,
59
+ {
60
+ size: "$3",
61
+ onPress: () => {
62
+ },
63
+ children: "Submit"
64
+ }
65
+ ) })
66
+ ] })
122
67
  ]
123
- })
124
- ]
125
- });
68
+ }
69
+ )
70
+ ] });
126
71
  }
127
72
  export {
128
73
  Demo,
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../src/PopoverDemo.tsx"],
4
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;",
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,UAAO,OAAM,MAAK,GAAG,GAAG,IAAG,UAAS,IAAG,UACtC;AAAA,wBAAC,QAAK,WAAU,QAAO,MAAM,aAAa,MAAK,gBAAe;AAAA,IAC9D,oBAAC,QAAK,WAAU,UAAS,MAAM,aAAa,MAAK,kBAAiB;AAAA,IAClE,oBAAC,QAAK,WAAU,OAAM,MAAM,WAAW,MAAK,eAAc;AAAA,IAC1D,oBAAC,QAAK,WAAU,SAAQ,MAAM,cAAc,MAAK,iBAAgB;AAAA,KACnE;AAEJ;AAEO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiD;AAC/C,SACE,qBAAC,WAAQ,MAAK,MAAM,GAAG,OACrB;AAAA,wBAAC,QAAQ,SAAR,EAAgB,SAAO,MACtB,8BAAC,UAAO,MAAM,MAAM,GACtB;AAAA,IAEA,oBAAC,SAAM,MAAK,MAAK,UAAS,OACxB,+BAAC,QAAQ,OAAR,EAAc,OAAK,MAAC,uBAAqB,MACxC;AAAA,0BAAC,QAAQ,MAAM,OAAd,EAAoB,SAAQ,MAC3B,8BAAC,MAAM,UAAN,EAAe,GAClB;AAAA,MACA,oBAAC,QAAQ,MAAM,SAAd,EAAsB;AAAA,OACzB,GACF;AAAA,IAEA;AAAA,MAAC,QAAQ;AAAA,MAAR;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,EAAc,IAAI,GAAG,KAAI,gBAAe;AAAA,UAEzC,qBAAC,UAAO,OAAM,MACZ;AAAA,iCAAC,UAAO,OAAM,MACZ;AAAA,kCAAC,SAAM,MAAK,MAAK,SAAS,MAAM,kBAEhC;AAAA,cACA,oBAAC,SAAM,MAAK,MAAK,IAAI,MAAM;AAAA,eAC7B;AAAA,YACA,oBAAC,QAAQ,OAAR,EAAc,SAAO,MACpB;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS,MAAM;AAAA,gBAEf;AAAA,gBACD;AAAA;AAAA,YAED,GACF;AAAA,aACF;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
6
6
  "names": []
7
7
  }