@tamagui/demos 1.15.24 → 1.15.26

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 (219) hide show
  1. package/dist/cjs/CardDemo.js +1 -1
  2. package/dist/cjs/CardDemo.js.map +1 -1
  3. package/dist/cjs/ColorsDemo.js +1 -1
  4. package/dist/cjs/ColorsDemo.js.map +1 -1
  5. package/dist/cjs/InputsDemo.js +17 -6
  6. package/dist/cjs/InputsDemo.js.map +1 -1
  7. package/dist/cjs/LucideIconsDemo.js +27 -18
  8. package/dist/cjs/LucideIconsDemo.js.map +1 -1
  9. package/dist/cjs/ProgressDemo.js +32 -21
  10. package/dist/cjs/ProgressDemo.js.map +1 -1
  11. package/dist/cjs/ReplaceThemeDemo.js +65 -0
  12. package/dist/cjs/ReplaceThemeDemo.js.map +6 -0
  13. package/dist/cjs/StacksDemo.js +1 -1
  14. package/dist/cjs/StacksDemo.js.map +1 -1
  15. package/dist/cjs/TabsAdvancedDemo.js +12 -1
  16. package/dist/cjs/TabsAdvancedDemo.js.map +1 -1
  17. package/dist/cjs/UpdateThemeDemo.js +6 -2
  18. package/dist/cjs/UpdateThemeDemo.js.map +1 -1
  19. package/dist/cjs/index.js +3 -0
  20. package/dist/cjs/index.js.map +1 -1
  21. package/dist/esm/CardDemo.js +1 -1
  22. package/dist/esm/CardDemo.js.map +1 -1
  23. package/dist/esm/CardDemo.mjs +1 -1
  24. package/dist/esm/CardDemo.mjs.map +1 -1
  25. package/dist/esm/ColorsDemo.js +1 -1
  26. package/dist/esm/ColorsDemo.js.map +1 -1
  27. package/dist/esm/ColorsDemo.mjs +1 -1
  28. package/dist/esm/ColorsDemo.mjs.map +1 -1
  29. package/dist/esm/InputsDemo.js +17 -6
  30. package/dist/esm/InputsDemo.js.map +1 -1
  31. package/dist/esm/InputsDemo.mjs +17 -6
  32. package/dist/esm/InputsDemo.mjs.map +1 -1
  33. package/dist/esm/LucideIconsDemo.js +27 -18
  34. package/dist/esm/LucideIconsDemo.js.map +1 -1
  35. package/dist/esm/LucideIconsDemo.mjs +27 -18
  36. package/dist/esm/LucideIconsDemo.mjs.map +1 -1
  37. package/dist/esm/ProgressDemo.js +32 -21
  38. package/dist/esm/ProgressDemo.js.map +1 -1
  39. package/dist/esm/ProgressDemo.mjs +32 -21
  40. package/dist/esm/ProgressDemo.mjs.map +1 -1
  41. package/dist/esm/ReplaceThemeDemo.js +49 -0
  42. package/dist/esm/ReplaceThemeDemo.js.map +6 -0
  43. package/dist/esm/ReplaceThemeDemo.mjs +49 -0
  44. package/dist/esm/ReplaceThemeDemo.mjs.map +6 -0
  45. package/dist/esm/StacksDemo.js +1 -1
  46. package/dist/esm/StacksDemo.js.map +1 -1
  47. package/dist/esm/StacksDemo.mjs +1 -1
  48. package/dist/esm/StacksDemo.mjs.map +1 -1
  49. package/dist/esm/TabsAdvancedDemo.js +12 -1
  50. package/dist/esm/TabsAdvancedDemo.js.map +1 -1
  51. package/dist/esm/TabsAdvancedDemo.mjs +12 -1
  52. package/dist/esm/TabsAdvancedDemo.mjs.map +1 -1
  53. package/dist/esm/UpdateThemeDemo.js +7 -2
  54. package/dist/esm/UpdateThemeDemo.js.map +1 -1
  55. package/dist/esm/UpdateThemeDemo.mjs +7 -2
  56. package/dist/esm/UpdateThemeDemo.mjs.map +1 -1
  57. package/dist/esm/index.js +2 -0
  58. package/dist/esm/index.js.map +1 -1
  59. package/dist/esm/index.mjs +2 -0
  60. package/dist/esm/index.mjs.map +1 -1
  61. package/dist/jsx/CardDemo.js +1 -1
  62. package/dist/jsx/CardDemo.js.map +1 -1
  63. package/dist/jsx/CardDemo.mjs +1 -1
  64. package/dist/jsx/CardDemo.mjs.map +1 -1
  65. package/dist/jsx/ColorsDemo.js +1 -1
  66. package/dist/jsx/ColorsDemo.js.map +1 -1
  67. package/dist/jsx/ColorsDemo.mjs +1 -1
  68. package/dist/jsx/ColorsDemo.mjs.map +1 -1
  69. package/dist/jsx/InputsDemo.js +8 -1
  70. package/dist/jsx/InputsDemo.js.map +1 -1
  71. package/dist/jsx/InputsDemo.mjs +8 -1
  72. package/dist/jsx/InputsDemo.mjs.map +1 -1
  73. package/dist/jsx/LucideIconsDemo.js +13 -8
  74. package/dist/jsx/LucideIconsDemo.js.map +1 -1
  75. package/dist/jsx/LucideIconsDemo.mjs +13 -8
  76. package/dist/jsx/LucideIconsDemo.mjs.map +1 -1
  77. package/dist/jsx/ProgressDemo.js +8 -1
  78. package/dist/jsx/ProgressDemo.js.map +1 -1
  79. package/dist/jsx/ProgressDemo.mjs +8 -1
  80. package/dist/jsx/ProgressDemo.mjs.map +1 -1
  81. package/dist/jsx/ReplaceThemeDemo.js +44 -0
  82. package/dist/jsx/ReplaceThemeDemo.js.map +6 -0
  83. package/dist/jsx/ReplaceThemeDemo.mjs +44 -0
  84. package/dist/jsx/ReplaceThemeDemo.mjs.map +6 -0
  85. package/dist/jsx/StacksDemo.js +1 -1
  86. package/dist/jsx/StacksDemo.js.map +1 -1
  87. package/dist/jsx/StacksDemo.mjs +1 -1
  88. package/dist/jsx/StacksDemo.mjs.map +1 -1
  89. package/dist/jsx/TabsAdvancedDemo.js +8 -1
  90. package/dist/jsx/TabsAdvancedDemo.js.map +1 -1
  91. package/dist/jsx/TabsAdvancedDemo.mjs +8 -1
  92. package/dist/jsx/TabsAdvancedDemo.mjs.map +1 -1
  93. package/dist/jsx/UpdateThemeDemo.js +7 -2
  94. package/dist/jsx/UpdateThemeDemo.js.map +1 -1
  95. package/dist/jsx/UpdateThemeDemo.mjs +7 -2
  96. package/dist/jsx/UpdateThemeDemo.mjs.map +1 -1
  97. package/dist/jsx/index.js +2 -0
  98. package/dist/jsx/index.js.map +1 -1
  99. package/dist/jsx/index.mjs +2 -0
  100. package/dist/jsx/index.mjs.map +1 -1
  101. package/package.json +18 -18
  102. package/src/CardDemo.tsx +1 -1
  103. package/src/ColorsDemo.tsx +2 -2
  104. package/src/InputsDemo.tsx +9 -2
  105. package/src/LucideIconsDemo.tsx +13 -8
  106. package/src/ProgressDemo.tsx +8 -1
  107. package/src/ReplaceThemeDemo.tsx +52 -0
  108. package/src/StacksDemo.tsx +1 -1
  109. package/src/TabsAdvancedDemo.tsx +8 -1
  110. package/src/UpdateThemeDemo.tsx +8 -3
  111. package/src/index.tsx +1 -0
  112. package/types/InputsDemo.d.ts.map +1 -1
  113. package/types/LucideIconsDemo.d.ts.map +1 -1
  114. package/types/ProgressDemo.d.ts.map +1 -1
  115. package/types/ReplaceThemeDemo.d.ts +3 -0
  116. package/types/ReplaceThemeDemo.d.ts.map +1 -0
  117. package/types/TabsAdvancedDemo.d.ts.map +1 -1
  118. package/types/UpdateThemeDemo.d.ts.map +1 -1
  119. package/types/index.d.ts +1 -0
  120. package/types/index.d.ts.map +1 -1
  121. package/dist/cjs/AccordionDemo.js +0 -42
  122. package/dist/cjs/AccordionDemo.js.map +0 -7
  123. package/dist/cjs/DrawerDemo.js +0 -79
  124. package/dist/cjs/DrawerDemo.js.map +0 -7
  125. package/dist/cjs/FeatherIconsDemo.js +0 -67
  126. package/dist/cjs/FeatherIconsDemo.js.map +0 -7
  127. package/dist/cjs/MenuDemo.js +0 -62
  128. package/dist/cjs/MenuDemo.js.map +0 -7
  129. package/dist/cjs/PopperDemo.js +0 -111
  130. package/dist/cjs/PopperDemo.js.map +0 -7
  131. package/dist/cjs/TabsAnimatedDemo.js +0 -167
  132. package/dist/cjs/TabsAnimatedDemo.js.map +0 -7
  133. package/dist/cjs/TabsHighlightedDemo.js +0 -184
  134. package/dist/cjs/TabsHighlightedDemo.js.map +0 -7
  135. package/dist/cjs/TabsUnderlinedDemo.js +0 -176
  136. package/dist/cjs/TabsUnderlinedDemo.js.map +0 -7
  137. package/dist/cjs/TamaguiLogo.js +0 -127
  138. package/dist/cjs/TamaguiLogo.js.map +0 -7
  139. package/dist/cjs/fixtures/zstack.js +0 -2
  140. package/dist/cjs/fixtures/zstack.js.map +0 -7
  141. package/dist/cjs/snapshots/zstack.js +0 -48
  142. package/dist/cjs/snapshots/zstack.js.map +0 -7
  143. package/dist/cjs/tests/zstack.js +0 -48
  144. package/dist/cjs/tests/zstack.js.map +0 -7
  145. package/dist/esm/AccordionDemo.js +0 -18
  146. package/dist/esm/AccordionDemo.js.map +0 -7
  147. package/dist/esm/AccordionDemo.mjs +0 -18
  148. package/dist/esm/AccordionDemo.mjs.map +0 -7
  149. package/dist/esm/DrawerDemo.js +0 -55
  150. package/dist/esm/DrawerDemo.js.map +0 -7
  151. package/dist/esm/FeatherIconsDemo.js +0 -33
  152. package/dist/esm/FeatherIconsDemo.js.map +0 -7
  153. package/dist/esm/FeatherIconsDemo.mjs +0 -33
  154. package/dist/esm/FeatherIconsDemo.mjs.map +0 -7
  155. package/dist/esm/MenuDemo.js +0 -38
  156. package/dist/esm/MenuDemo.js.map +0 -7
  157. package/dist/esm/PopperDemo.js +0 -97
  158. package/dist/esm/PopperDemo.js.map +0 -7
  159. package/dist/esm/TabsAnimatedDemo.js +0 -143
  160. package/dist/esm/TabsAnimatedDemo.js.map +0 -7
  161. package/dist/esm/TabsAnimatedDemo.mjs +0 -143
  162. package/dist/esm/TabsAnimatedDemo.mjs.map +0 -7
  163. package/dist/esm/TabsHighlightedDemo.js +0 -168
  164. package/dist/esm/TabsHighlightedDemo.js.map +0 -7
  165. package/dist/esm/TabsHighlightedDemo.mjs +0 -168
  166. package/dist/esm/TabsHighlightedDemo.mjs.map +0 -7
  167. package/dist/esm/TabsUnderlinedDemo.js +0 -160
  168. package/dist/esm/TabsUnderlinedDemo.js.map +0 -7
  169. package/dist/esm/TabsUnderlinedDemo.mjs +0 -160
  170. package/dist/esm/TabsUnderlinedDemo.mjs.map +0 -7
  171. package/dist/esm/TamaguiLogo.js +0 -96
  172. package/dist/esm/TamaguiLogo.js.map +0 -7
  173. package/dist/esm/fixtures/zstack.js +0 -1
  174. package/dist/esm/fixtures/zstack.js.map +0 -7
  175. package/dist/esm/snapshots/zstack.js +0 -24
  176. package/dist/esm/snapshots/zstack.js.map +0 -7
  177. package/dist/esm/tests/zstack.js +0 -24
  178. package/dist/esm/tests/zstack.js.map +0 -7
  179. package/dist/jsx/AccordionDemo.js +0 -17
  180. package/dist/jsx/AccordionDemo.js.map +0 -7
  181. package/dist/jsx/AccordionDemo.mjs +0 -17
  182. package/dist/jsx/AccordionDemo.mjs.map +0 -7
  183. package/dist/jsx/DrawerDemo.js +0 -18
  184. package/dist/jsx/DrawerDemo.js.map +0 -7
  185. package/dist/jsx/FeatherIconsDemo.js +0 -32
  186. package/dist/jsx/FeatherIconsDemo.js.map +0 -7
  187. package/dist/jsx/FeatherIconsDemo.mjs +0 -32
  188. package/dist/jsx/FeatherIconsDemo.mjs.map +0 -7
  189. package/dist/jsx/MenuDemo.js +0 -15
  190. package/dist/jsx/MenuDemo.js.map +0 -7
  191. package/dist/jsx/PopperDemo.js +0 -41
  192. package/dist/jsx/PopperDemo.js.map +0 -7
  193. package/dist/jsx/TabsAnimatedDemo.js +0 -114
  194. package/dist/jsx/TabsAnimatedDemo.js.map +0 -7
  195. package/dist/jsx/TabsAnimatedDemo.mjs +0 -114
  196. package/dist/jsx/TabsAnimatedDemo.mjs.map +0 -7
  197. package/dist/jsx/TabsHighlightedDemo.js +0 -137
  198. package/dist/jsx/TabsHighlightedDemo.js.map +0 -7
  199. package/dist/jsx/TabsHighlightedDemo.mjs +0 -137
  200. package/dist/jsx/TabsHighlightedDemo.mjs.map +0 -7
  201. package/dist/jsx/TabsUnderlinedDemo.js +0 -133
  202. package/dist/jsx/TabsUnderlinedDemo.js.map +0 -7
  203. package/dist/jsx/TabsUnderlinedDemo.mjs +0 -133
  204. package/dist/jsx/TabsUnderlinedDemo.mjs.map +0 -7
  205. package/dist/jsx/TamaguiLogo.js +0 -42
  206. package/dist/jsx/TamaguiLogo.js.map +0 -7
  207. package/dist/jsx/fixtures/zstack.js +0 -1
  208. package/dist/jsx/fixtures/zstack.js.map +0 -7
  209. package/dist/jsx/snapshots/zstack.js +0 -11
  210. package/dist/jsx/snapshots/zstack.js.map +0 -7
  211. package/dist/jsx/tests/zstack.js +0 -11
  212. package/dist/jsx/tests/zstack.js.map +0 -7
  213. package/types/AccordionDemo.d.ts.map +0 -1
  214. package/types/DrawerDemo.d.ts.map +0 -1
  215. package/types/FeatherIconsDemo.d.ts.map +0 -1
  216. package/types/MenuDemo.d.ts.map +0 -1
  217. package/types/PopperDemo.d.ts.map +0 -1
  218. package/types/TabsHighlightedDemo.d.ts.map +0 -1
  219. package/types/TabsUnderlinedDemo.d.ts.map +0 -1
@@ -1,79 +0,0 @@
1
- "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __export = (target, all) => {
7
- for (var name in all)
8
- __defProp(target, name, { get: all[name], enumerable: true });
9
- };
10
- var __copyProps = (to, from, except, desc) => {
11
- if (from && typeof from === "object" || typeof from === "function") {
12
- for (let key of __getOwnPropNames(from))
13
- if (!__hasOwnProp.call(to, key) && key !== except)
14
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
- }
16
- return to;
17
- };
18
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
- var DrawerDemo_exports = {};
20
- __export(DrawerDemo_exports, {
21
- DrawerDemo: () => DrawerDemo
22
- });
23
- module.exports = __toCommonJS(DrawerDemo_exports);
24
- var import_jsx_runtime = require("react/jsx-runtime");
25
- var import_drawer = require("@tamagui/drawer");
26
- var import_feather_icons = require("@tamagui/feather-icons");
27
- var import_react2 = require("react");
28
- var import_tamagui = require("tamagui");
29
- function DrawerDemo() {
30
- const [show, setShow] = (0, import_react2.useState)(false);
31
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
32
- minWidth: 230,
33
- w: "100%",
34
- h: "100%",
35
- ai: "center",
36
- jc: "center",
37
- position: "relative",
38
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_drawer.Drawer.Provider, {
39
- children: [
40
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, {
41
- size: "$6",
42
- icon: show ? import_feather_icons.ChevronDown : import_feather_icons.ChevronUp,
43
- circular: true,
44
- onPress: () => setShow((x) => !x),
45
- elevation: "$2"
46
- }),
47
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_drawer.Drawer, {
48
- open: show,
49
- onOpenChange: setShow,
50
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_drawer.Drawer.Frame, {
51
- h: 200,
52
- ai: "center",
53
- jc: "center",
54
- p: "$6",
55
- space: true,
56
- children: [
57
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
58
- selectable: false,
59
- children: "Hello."
60
- }),
61
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, {
62
- size: "$6",
63
- icon: show ? import_feather_icons.ChevronDown : import_feather_icons.ChevronUp,
64
- circular: true,
65
- onPress: () => setShow((x) => !x),
66
- elevation: "$2"
67
- })
68
- ]
69
- })
70
- })
71
- ]
72
- })
73
- });
74
- }
75
- // Annotate the CommonJS export names for ESM import in node:
76
- 0 && (module.exports = {
77
- DrawerDemo
78
- });
79
- //# sourceMappingURL=DrawerDemo.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/DrawerDemo.tsx"],
4
- "sourcesContent": ["import { Drawer } from '@tamagui/drawer'\nimport { ChevronDown, ChevronUp } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { useState } from 'react'\nimport { Button, Paragraph, YStack } from 'tamagui'\n\nexport function DrawerDemo() {\n const [show, setShow] = useState(false)\n return (\n <YStack minWidth={230} w=\"100%\" h=\"100%\" ai=\"center\" jc=\"center\" position=\"relative\">\n <Drawer.Provider>\n <Button\n size=\"$6\"\n icon={show ? ChevronDown : ChevronUp}\n circular\n onPress={() => setShow((x) => !x)}\n elevation=\"$2\"\n />\n <Drawer open={show} onOpenChange={setShow}>\n <Drawer.Frame h={200} ai=\"center\" jc=\"center\" p=\"$6\" space>\n <Paragraph selectable={false}>Hello.</Paragraph>\n <Button\n size=\"$6\"\n icon={show ? ChevronDown : ChevronUp}\n circular\n onPress={() => setShow((x) => !x)}\n elevation=\"$2\"\n />\n </Drawer.Frame>\n </Drawer>\n </Drawer.Provider>\n </YStack>\n )\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAWQ;AAXR,oBAAuB;AACvB,2BAAuC;AAEvC,IAAAA,gBAAyB;AACzB,qBAA0C;AAEnC,SAAS,aAAa;AAC3B,QAAM,CAAC,MAAM,OAAO,QAAI,wBAAS,KAAK;AACtC,SACE,4CAAC;AAAA,IAAO,UAAU;AAAA,IAAK,GAAE;AAAA,IAAO,GAAE;AAAA,IAAO,IAAG;AAAA,IAAS,IAAG;AAAA,IAAS,UAAS;AAAA,IACxE,uDAAC,qBAAO,UAAP;AAAA,MACC;AAAA,oDAAC;AAAA,UACC,MAAK;AAAA,UACL,MAAM,OAAO,mCAAc;AAAA,UAC3B,UAAQ;AAAA,UACR,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,UAChC,WAAU;AAAA,SACZ;AAAA,QACA,4CAAC;AAAA,UAAO,MAAM;AAAA,UAAM,cAAc;AAAA,UAChC,uDAAC,qBAAO,OAAP;AAAA,YAAa,GAAG;AAAA,YAAK,IAAG;AAAA,YAAS,IAAG;AAAA,YAAS,GAAE;AAAA,YAAK,OAAK;AAAA,YACxD;AAAA,0DAAC;AAAA,gBAAU,YAAY;AAAA,gBAAO;AAAA,eAAM;AAAA,cACpC,4CAAC;AAAA,gBACC,MAAK;AAAA,gBACL,MAAM,OAAO,mCAAc;AAAA,gBAC3B,UAAQ;AAAA,gBACR,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,gBAChC,WAAU;AAAA,eACZ;AAAA;AAAA,WACF;AAAA,SACF;AAAA;AAAA,KACF;AAAA,GACF;AAEJ;",
6
- "names": ["import_react"]
7
- }
@@ -1,67 +0,0 @@
1
- "use strict";
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __copyProps = (to, from, except, desc) => {
13
- if (from && typeof from === "object" || typeof from === "function") {
14
- for (let key of __getOwnPropNames(from))
15
- if (!__hasOwnProp.call(to, key) && key !== except)
16
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
- }
18
- return to;
19
- };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
- // If the importer is in node compatibility mode or this is not an ESM
22
- // file that has been converted to a CommonJS file using a Babel-
23
- // compatible transform (i.e. "__esModule" has not been set), then set
24
- // "default" to the CommonJS "module.exports" for node compatibility.
25
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
- mod
27
- ));
28
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
- var FeatherIconsDemo_exports = {};
30
- __export(FeatherIconsDemo_exports, {
31
- FeatherIconsDemo: () => FeatherIconsDemo
32
- });
33
- module.exports = __toCommonJS(FeatherIconsDemo_exports);
34
- var import_jsx_runtime = require("react/jsx-runtime");
35
- var FeatherIcons = __toESM(require("@tamagui/lucide-icons"), 1);
36
- var import_react2 = require("react");
37
- var import_react_native = require("react-native");
38
- var import_tamagui = require("tamagui");
39
- const featherIcons = Object.keys(FeatherIcons).map((name) => ({
40
- key: name.toLowerCase(),
41
- name,
42
- Icon: FeatherIcons[name]
43
- }));
44
- function FeatherIconsDemo() {
45
- const [searchRaw, setSearch] = (0, import_react2.useState)("");
46
- const search = (0, import_tamagui.useDebounceValue)(searchRaw, 400);
47
- const size = 100;
48
- const iconsMemo = (0, import_react2.useMemo)(() => {
49
- const icons = featherIcons.filter((x) => x.key.startsWith(search.toLowerCase()));
50
- return icons.map(({ Icon, name }) => {
51
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { h: size, ai: "center", jc: "center", children: [
52
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { size: size * 0.25 }),
53
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Spacer, {}),
54
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, { size: "$2", o: 0.5, children: name })
55
- ] }, name);
56
- });
57
- }, [search]);
58
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { als: "stretch", p: "$4", pb: "$0", space: true, children: [
59
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Input, { value: searchRaw, onChangeText: setSearch, placeholder: "Search..." }),
60
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { h: 420, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.ScrollView, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Grid, { itemMinWidth: size, children: iconsMemo }) }) })
61
- ] });
62
- }
63
- // Annotate the CommonJS export names for ESM import in node:
64
- 0 && (module.exports = {
65
- FeatherIconsDemo
66
- });
67
- //# sourceMappingURL=FeatherIconsDemo.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/FeatherIconsDemo.tsx"],
4
- "sourcesContent": ["import * as FeatherIcons from '@tamagui/lucide-icons'\nimport React from 'react'\nimport { useMemo, useState } from 'react'\nimport { ScrollView } from 'react-native'\nimport { Grid, Input, Paragraph, Spacer, YStack, useDebounceValue } from 'tamagui'\n\nconst featherIcons = Object.keys(FeatherIcons).map((name) => ({\n key: name.toLowerCase(),\n name,\n Icon: FeatherIcons[name],\n}))\n\nexport function FeatherIconsDemo() {\n const [searchRaw, setSearch] = useState('')\n const search = useDebounceValue(searchRaw, 400)\n\n const size = 100\n\n const iconsMemo = useMemo(() => {\n const icons = featherIcons.filter((x) => x.key.startsWith(search.toLowerCase()))\n return icons.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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBQ;AAtBR,mBAA8B;AAE9B,IAAAA,gBAAkC;AAClC,0BAA2B;AAC3B,qBAAyE;AAEzE,MAAM,eAAe,OAAO,KAAK,YAAY,EAAE,IAAI,CAAC,UAAU;AAAA,EAC5D,KAAK,KAAK,YAAY;AAAA,EACtB;AAAA,EACA,MAAM,aAAa,IAAI;AACzB,EAAE;AAEK,SAAS,mBAAmB;AACjC,QAAM,CAAC,WAAW,SAAS,QAAI,wBAAS,EAAE;AAC1C,QAAM,aAAS,iCAAiB,WAAW,GAAG;AAE9C,QAAM,OAAO;AAEb,QAAM,gBAAY,uBAAQ,MAAM;AAC9B,UAAM,QAAQ,aAAa,OAAO,CAAC,MAAM,EAAE,IAAI,WAAW,OAAO,YAAY,CAAC,CAAC;AAC/E,WAAO,MAAM,IAAI,CAAC,EAAE,MAAM,KAAK,MAAM;AACnC,aACE,6CAAC,yBAAO,GAAG,MAAM,IAAG,UAAS,IAAG,UAC9B;AAAA,oDAAC,QAAK,MAAM,OAAO,MAAM;AAAA,QACzB,4CAAC,yBAAO;AAAA,QACR,4CAAC,4BAAU,MAAK,MAAK,GAAG,KACrB,gBACH;AAAA,WAL4C,IAM9C;AAAA,IAEJ,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,6CAAC,yBAAO,KAAI,WAAU,GAAE,MAAK,IAAG,MAAK,OAAK,MACxC;AAAA,gDAAC,wBAAM,OAAO,WAAW,cAAc,WAAW,aAAY,aAAY;AAAA,IAE1E,4CAAC,yBAAO,GAAG,KACT,sDAAC,kCACC,sDAAC,uBAAK,cAAc,MAAO,qBAAU,GACvC,GACF;AAAA,KACF;AAEJ;",
6
- "names": ["import_react"]
7
- }
@@ -1,62 +0,0 @@
1
- "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __export = (target, all) => {
7
- for (var name in all)
8
- __defProp(target, name, { get: all[name], enumerable: true });
9
- };
10
- var __copyProps = (to, from, except, desc) => {
11
- if (from && typeof from === "object" || typeof from === "function") {
12
- for (let key of __getOwnPropNames(from))
13
- if (!__hasOwnProp.call(to, key) && key !== except)
14
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
- }
16
- return to;
17
- };
18
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
- var MenuDemo_exports = {};
20
- __export(MenuDemo_exports, {
21
- MenuDemo: () => MenuDemo
22
- });
23
- module.exports = __toCommonJS(MenuDemo_exports);
24
- var import_jsx_runtime = require("react/jsx-runtime");
25
- var import_feather_icons = require("@tamagui/feather-icons");
26
- var import_menu = require("@tamagui/menu");
27
- var import_react = require("react");
28
- var import_tamagui = require("tamagui");
29
- function MenuDemo() {
30
- const [show, setShow] = (0, import_react.useState)(false);
31
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu.Menu.Provider, {
32
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu.Menu, {
33
- open: show,
34
- onOpenChange: setShow,
35
- trigger: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, {
36
- size: "$6",
37
- icon: import_feather_icons.Menu,
38
- theme: show ? "active" : null,
39
- circular: true,
40
- onPress: () => setShow((x) => !x)
41
- }),
42
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu.Menu.Item, {
43
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
44
- p: "$2",
45
- children: [
46
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H4, {
47
- children: "Menu contents"
48
- }),
49
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
50
- children: "Lorem ipsum dolor sit amet."
51
- })
52
- ]
53
- })
54
- })
55
- })
56
- });
57
- }
58
- // Annotate the CommonJS export names for ESM import in node:
59
- 0 && (module.exports = {
60
- MenuDemo
61
- });
62
- //# sourceMappingURL=MenuDemo.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/MenuDemo.tsx"],
4
- "sourcesContent": ["import { Menu as MenuIcon } from '@tamagui/feather-icons'\nimport { Menu } from '@tamagui/menu'\nimport React, { useState } from 'react'\nimport { Button, H4, Paragraph, YStack } from 'tamagui'\n\nexport function MenuDemo() {\n const [show, setShow] = useState(false)\n\n return (\n <Menu.Provider>\n <Menu\n open={show}\n onOpenChange={setShow}\n trigger={\n <Button\n size=\"$6\"\n icon={MenuIcon}\n theme={show ? 'active' : null}\n circular\n onPress={() => setShow((x) => !x)}\n />\n }\n >\n <Menu.Item>\n <YStack p=\"$2\">\n <H4>Menu contents</H4>\n <Paragraph>Lorem ipsum dolor sit amet.</Paragraph>\n </YStack>\n </Menu.Item>\n </Menu>\n </Menu.Provider>\n )\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAcU;AAdV,2BAAiC;AACjC,kBAAqB;AACrB,mBAAgC;AAChC,qBAA8C;AAEvC,SAAS,WAAW;AACzB,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AAEtC,SACE,4CAAC,iBAAK,UAAL;AAAA,IACC,sDAAC;AAAA,MACC,MAAM;AAAA,MACN,cAAc;AAAA,MACd,SACE,4CAAC;AAAA,QACC,MAAK;AAAA,QACL,MAAM,qBAAAA;AAAA,QACN,OAAO,OAAO,WAAW;AAAA,QACzB,UAAQ;AAAA,QACR,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,OAClC;AAAA,MAGF,sDAAC,iBAAK,MAAL;AAAA,QACC,uDAAC;AAAA,UAAO,GAAE;AAAA,UACR;AAAA,wDAAC;AAAA,cAAG;AAAA,aAAa;AAAA,YACjB,4CAAC;AAAA,cAAU;AAAA,aAA2B;AAAA;AAAA,SACxC;AAAA,OACF;AAAA,KACF;AAAA,GACF;AAEJ;",
6
- "names": ["MenuIcon"]
7
- }
@@ -1,111 +0,0 @@
1
- "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __export = (target, all) => {
7
- for (var name in all)
8
- __defProp(target, name, { get: all[name], enumerable: true });
9
- };
10
- var __copyProps = (to, from, except, desc) => {
11
- if (from && typeof from === "object" || typeof from === "function") {
12
- for (let key of __getOwnPropNames(from))
13
- if (!__hasOwnProp.call(to, key) && key !== except)
14
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
- }
16
- return to;
17
- };
18
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
- var PopperDemo_exports = {};
20
- __export(PopperDemo_exports, {
21
- Demo: () => Demo,
22
- PopperDemo: () => PopperDemo
23
- });
24
- module.exports = __toCommonJS(PopperDemo_exports);
25
- var import_jsx_runtime = require("react/jsx-runtime");
26
- var import_lucide_icons = require("@tamagui/lucide-icons");
27
- var import_tamagui = require("tamagui");
28
- function PopperDemo() {
29
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
30
- space: "$2",
31
- f: 1,
32
- justifyContent: "center",
33
- alignItems: "center",
34
- children: [
35
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Demo, {
36
- placement: "left-end",
37
- Icon: import_lucide_icons.ChevronLeft,
38
- Id: "left"
39
- }),
40
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Demo, {
41
- placement: "bottom-end",
42
- Icon: import_lucide_icons.ChevronDown,
43
- Id: "bottom"
44
- }),
45
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Demo, {
46
- placement: "top-end",
47
- Icon: import_lucide_icons.ChevronUp,
48
- Id: "top"
49
- }),
50
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Demo, {
51
- placement: "right-end",
52
- Icon: import_lucide_icons.ChevronRight,
53
- Id: "right"
54
- })
55
- ]
56
- });
57
- }
58
- function Demo({ Icon, Id, ...props }) {
59
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Popper, {
60
- placement: props.placement,
61
- children: [
62
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.PopperAnchor, {
63
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, {
64
- icon: Icon
65
- })
66
- }),
67
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Portal, {
68
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.PopperContent, {
69
- children: [
70
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.PopperArrow, {
71
- bw: 1,
72
- boc: "$borderColor"
73
- }),
74
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YGroup, {
75
- space: "$3",
76
- width: 200,
77
- bw: 1,
78
- boc: "$borderColor",
79
- children: [
80
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
81
- space: "$3",
82
- children: [
83
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Label, {
84
- size: "$3",
85
- htmlFor: Id,
86
- children: "Name"
87
- }),
88
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Input, {
89
- size: "$3",
90
- id: Id
91
- })
92
- ]
93
- }),
94
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, {
95
- size: "$3",
96
- children: "Submit"
97
- })
98
- ]
99
- })
100
- ]
101
- })
102
- })
103
- ]
104
- });
105
- }
106
- // Annotate the CommonJS export names for ESM import in node:
107
- 0 && (module.exports = {
108
- Demo,
109
- PopperDemo
110
- });
111
- //# sourceMappingURL=PopperDemo.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/PopperDemo.tsx"],
4
- "sourcesContent": ["import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@tamagui/lucide-icons'\nimport {\n Adapt,\n Button,\n Input,\n Label,\n Popper,\n PopperAnchor,\n PopperArrow,\n PopperContent,\n PopperProps,\n Portal,\n PortalHost,\n PortalItem,\n XGroup,\n XStack,\n YGroup,\n} from 'tamagui'\n\nexport function PopperDemo() {\n return (\n\n\n <XStack space=\"$2\" f={1} justifyContent='center' alignItems='center'>\n <Demo placement=\"left-end\" Icon={ChevronLeft} Id=\"left\" />\n <Demo placement=\"bottom-end\" Icon={ChevronDown} Id=\"bottom\" />\n <Demo placement=\"top-end\" Icon={ChevronUp} Id=\"top\" />\n <Demo placement=\"right-end\" Icon={ChevronRight} Id=\"right\" />\n </XStack>\n\n )\n}\n\nexport function Demo({ Icon, Id, ...props }: PopperProps & { Icon?: any, Id?: string }) {\n return (\n \n <Popper placement={props.placement}>\n <PopperAnchor>\n <Button icon={Icon} />\n </PopperAnchor>\n\n <Portal>\n <PopperContent>\n <PopperArrow bw={1} boc=\"$borderColor\" />\n\n <YGroup space=\"$3\" width={200} bw={1} boc=\"$borderColor\">\n <XStack space=\"$3\">\n <Label size=\"$3\" htmlFor={Id}>\n Name\n </Label>\n <Input size=\"$3\" id={Id} />\n </XStack>\n \n <Button\n size=\"$3\"\n >\n Submit\n </Button>\n </YGroup>\n\n </PopperContent>\n </Portal>\n\n\n </Popper>\n\n )\n\n\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBM;AAvBN,0BAAkE;AAClE,qBAgBO;AAEA,SAAS,aAAa;AAC3B,SAGI,6CAAC;AAAA,IAAO,OAAM;AAAA,IAAK,GAAG;AAAA,IAAG,gBAAe;AAAA,IAAS,YAAW;AAAA,IAC1D;AAAA,kDAAC;AAAA,QAAK,WAAU;AAAA,QAAW,MAAM;AAAA,QAAa,IAAG;AAAA,OAAO;AAAA,MACxD,4CAAC;AAAA,QAAK,WAAU;AAAA,QAAa,MAAM;AAAA,QAAa,IAAG;AAAA,OAAS;AAAA,MAC5D,4CAAC;AAAA,QAAK,WAAU;AAAA,QAAU,MAAM;AAAA,QAAW,IAAG;AAAA,OAAM;AAAA,MACpD,4CAAC;AAAA,QAAK,WAAU;AAAA,QAAY,MAAM;AAAA,QAAc,IAAG;AAAA,OAAQ;AAAA;AAAA,GAC7D;AAGN;AAEO,SAAS,KAAK,EAAE,MAAM,OAAO,MAAM,GAA8C;AACtF,SAEE,6CAAC;AAAA,IAAO,WAAW,MAAM;AAAA,IACvB;AAAA,kDAAC;AAAA,QACC,sDAAC;AAAA,UAAO,MAAM;AAAA,SAAM;AAAA,OACtB;AAAA,MAEA,4CAAC;AAAA,QACC,uDAAC;AAAA,UACG;AAAA,wDAAC;AAAA,cAAY,IAAI;AAAA,cAAG,KAAI;AAAA,aAAe;AAAA,YAEvC,6CAAC;AAAA,cAAO,OAAM;AAAA,cAAK,OAAO;AAAA,cAAK,IAAI;AAAA,cAAG,KAAI;AAAA,cACxC;AAAA,6DAAC;AAAA,kBAAO,OAAM;AAAA,kBACZ;AAAA,gEAAC;AAAA,sBAAM,MAAK;AAAA,sBAAK,SAAS;AAAA,sBAAI;AAAA,qBAE9B;AAAA,oBACA,4CAAC;AAAA,sBAAM,MAAK;AAAA,sBAAK,IAAI;AAAA,qBAAI;AAAA;AAAA,iBAC3B;AAAA,gBAEE,4CAAC;AAAA,kBACC,MAAK;AAAA,kBACN;AAAA,iBAED;AAAA;AAAA,aACJ;AAAA;AAAA,SAEF;AAAA,OACF;AAAA;AAAA,GAGJ;AAKJ;",
6
- "names": []
7
- }
@@ -1,167 +0,0 @@
1
- "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __export = (target, all) => {
7
- for (var name in all)
8
- __defProp(target, name, { get: all[name], enumerable: true });
9
- };
10
- var __copyProps = (to, from, except, desc) => {
11
- if (from && typeof from === "object" || typeof from === "function") {
12
- for (let key of __getOwnPropNames(from))
13
- if (!__hasOwnProp.call(to, key) && key !== except)
14
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
- }
16
- return to;
17
- };
18
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
- var TabsAnimatedDemo_exports = {};
20
- __export(TabsAnimatedDemo_exports, {
21
- TabsAnimatedDemo: () => TabsAnimatedDemo
22
- });
23
- module.exports = __toCommonJS(TabsAnimatedDemo_exports);
24
- var import_jsx_runtime = require("react/jsx-runtime");
25
- var import_react = require("react");
26
- var import_tamagui = require("tamagui");
27
- function TabsAnimatedDemo() {
28
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XStack, { maxHeight: "100%", maxWidth: "100%", justifyContent: "flex-start", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { space: "$3", px: "$8", children: [
29
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UnderlineTabs, {}),
30
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HighlightTabs, {})
31
- ] }) });
32
- }
33
- const UnderlineTabs = () => {
34
- const [currentTab, setCurrentTab] = (0, import_react.useState)("tab1");
35
- const [direction, setDirection] = (0, import_react.useState)(0);
36
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
37
- import_tamagui.Tabs,
38
- {
39
- value: currentTab,
40
- onValueChange: setCurrentTab,
41
- onDirectionChange: setDirection,
42
- orientation: "vertical",
43
- width: 300,
44
- br: "$4",
45
- ai: "center",
46
- children: [
47
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { borderColor: "$color3", borderRightWidth: "$0.5", mr: "$2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { children: [
48
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
49
- import_tamagui.Tabs.RovingIndicator,
50
- {
51
- highlightMode: "hoverOrFocus",
52
- width: "$0.5",
53
- right: 0,
54
- animation: "100ms"
55
- }
56
- ),
57
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
58
- import_tamagui.Tabs.RovingIndicator,
59
- {
60
- highlightMode: "select",
61
- width: "$0.5",
62
- right: 0,
63
- animation: "100ms"
64
- }
65
- ),
66
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Tabs.List, { "aria-label": "Manage your account", flexDirection: "column", children: [
67
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Trigger, { unstyled: true, color: "$color12", value: "tab1", children: "Profile" }),
68
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Trigger, { unstyled: true, color: "$color12", value: "tab2", children: "Connections" }),
69
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Trigger, { unstyled: true, color: "$color12", value: "tab3", children: "Notifications" })
70
- ] })
71
- ] }) }),
72
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, { exitBeforeEnter: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
73
- import_tamagui.Tabs.Content,
74
- {
75
- value: currentTab,
76
- forceMount: true,
77
- p: "$2",
78
- animation: "100ms",
79
- o: 1,
80
- y: 0,
81
- f: 1,
82
- enterStyle: {
83
- ...direction === -1 ? { y: -25 } : {},
84
- ...direction === 1 ? { y: 25 } : {},
85
- opacity: 0
86
- },
87
- exitStyle: {
88
- ...direction === -1 ? { y: 25 } : {},
89
- ...direction === 1 ? { y: -25 } : {},
90
- opacity: 0
91
- },
92
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { ta: "center", children: currentTab })
93
- },
94
- currentTab
95
- ) })
96
- ]
97
- }
98
- );
99
- };
100
- const HighlightTabs = () => {
101
- const [currentTab, setCurrentTab] = (0, import_react.useState)("tab1");
102
- const [direction, setDirection] = (0, import_react.useState)(0);
103
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
104
- import_tamagui.Tabs,
105
- {
106
- value: currentTab,
107
- onValueChange: setCurrentTab,
108
- onDirectionChange: setDirection,
109
- orientation: "horizontal",
110
- br: "$4",
111
- flexDirection: "column",
112
- children: [
113
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { children: [
114
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
115
- import_tamagui.Tabs.RovingIndicator,
116
- {
117
- highlightMode: "hoverOrFocus",
118
- borderRadius: "$4",
119
- animation: "100ms"
120
- }
121
- ),
122
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
123
- import_tamagui.Tabs.RovingIndicator,
124
- {
125
- highlightMode: "select",
126
- borderRadius: "$4",
127
- animation: "100ms"
128
- }
129
- ),
130
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Tabs.List, { "aria-label": "Manage your account", children: [
131
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Trigger, { unstyled: true, color: "$color12", value: "tab1", children: "Profile" }),
132
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Trigger, { unstyled: true, color: "$color12", value: "tab2", children: "Connections" }),
133
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Trigger, { unstyled: true, color: "$color12", value: "tab3", children: "Notifications" })
134
- ] })
135
- ] }),
136
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, { exitBeforeEnter: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
137
- import_tamagui.Tabs.Content,
138
- {
139
- value: currentTab,
140
- forceMount: true,
141
- p: "$2",
142
- animation: "100ms",
143
- o: 1,
144
- x: 0,
145
- enterStyle: {
146
- ...direction === -1 ? { x: -25 } : {},
147
- ...direction === 1 ? { x: 25 } : {},
148
- opacity: 0
149
- },
150
- exitStyle: {
151
- ...direction === -1 ? { x: 25 } : {},
152
- ...direction === 1 ? { x: -25 } : {},
153
- opacity: 0
154
- },
155
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { ta: "center", children: currentTab })
156
- },
157
- currentTab
158
- ) })
159
- ]
160
- }
161
- );
162
- };
163
- // Annotate the CommonJS export names for ESM import in node:
164
- 0 && (module.exports = {
165
- TabsAnimatedDemo
166
- });
167
- //# sourceMappingURL=TabsAnimatedDemo.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/TabsAnimatedDemo.tsx"],
4
- "sourcesContent": ["import { useState } from 'react'\nimport { AnimatePresence, H5, Tabs, XStack, YStack } from 'tamagui'\n\nexport function TabsAnimatedDemo() {\n return (\n <XStack maxHeight=\"100%\" maxWidth=\"100%\" justifyContent=\"flex-start\">\n <XStack space=\"$3\" px=\"$8\">\n <UnderlineTabs />\n <HighlightTabs />\n </XStack>\n </XStack>\n )\n}\n\nconst UnderlineTabs = () => {\n const [currentTab, setCurrentTab] = useState('tab1')\n const [direction, setDirection] = useState<-1 | 0 | 1>(0)\n\n return (\n <Tabs\n value={currentTab}\n onValueChange={setCurrentTab}\n onDirectionChange={setDirection}\n orientation=\"vertical\"\n width={300}\n br=\"$4\"\n ai=\"center\"\n >\n <YStack borderColor=\"$color3\" borderRightWidth=\"$0.5\" mr=\"$2\">\n <YStack>\n <Tabs.RovingIndicator\n highlightMode=\"hoverOrFocus\"\n width=\"$0.5\"\n right={0}\n animation=\"100ms\"\n />\n <Tabs.RovingIndicator\n highlightMode=\"select\"\n width=\"$0.5\"\n right={0}\n animation=\"100ms\"\n />\n <Tabs.List aria-label=\"Manage your account\" flexDirection=\"column\">\n <Tabs.Trigger unstyled color=\"$color12\" value=\"tab1\">\n Profile\n </Tabs.Trigger>\n <Tabs.Trigger unstyled color=\"$color12\" value=\"tab2\">\n Connections\n </Tabs.Trigger>\n <Tabs.Trigger unstyled color=\"$color12\" value=\"tab3\">\n Notifications\n </Tabs.Trigger>\n </Tabs.List>\n </YStack>\n </YStack>\n <AnimatePresence exitBeforeEnter>\n <Tabs.Content\n value={currentTab}\n key={currentTab}\n forceMount\n p=\"$2\"\n animation=\"100ms\"\n o={1}\n y={0}\n f={1}\n enterStyle={{\n ...(direction === -1 ? { y: -25 } : {}),\n ...(direction === 1 ? { y: 25 } : {}),\n opacity: 0,\n }}\n exitStyle={{\n ...(direction === -1 ? { y: 25 } : {}),\n ...(direction === 1 ? { y: -25 } : {}),\n opacity: 0,\n }}\n >\n <H5 ta=\"center\">{currentTab}</H5>\n </Tabs.Content>\n </AnimatePresence>\n </Tabs>\n )\n}\n\nconst HighlightTabs = () => {\n const [currentTab, setCurrentTab] = useState('tab1')\n const [direction, setDirection] = useState<-1 | 0 | 1>(0)\n\n return (\n <Tabs\n value={currentTab}\n onValueChange={setCurrentTab}\n onDirectionChange={setDirection}\n orientation=\"horizontal\"\n br=\"$4\"\n flexDirection=\"column\"\n >\n <YStack>\n <Tabs.RovingIndicator\n highlightMode=\"hoverOrFocus\"\n borderRadius=\"$4\"\n animation=\"100ms\"\n />\n <Tabs.RovingIndicator\n highlightMode=\"select\"\n borderRadius=\"$4\"\n animation=\"100ms\"\n />\n <Tabs.List aria-label=\"Manage your account\">\n <Tabs.Trigger unstyled color=\"$color12\" value=\"tab1\">\n Profile\n </Tabs.Trigger>\n <Tabs.Trigger unstyled color=\"$color12\" value=\"tab2\">\n Connections\n </Tabs.Trigger>\n <Tabs.Trigger unstyled color=\"$color12\" value=\"tab3\">\n Notifications\n </Tabs.Trigger>\n </Tabs.List>\n </YStack>\n <AnimatePresence exitBeforeEnter>\n <Tabs.Content\n value={currentTab}\n key={currentTab}\n forceMount\n p=\"$2\"\n animation=\"100ms\"\n o={1}\n x={0}\n enterStyle={{\n ...(direction === -1 ? { x: -25 } : {}),\n ...(direction === 1 ? { x: 25 } : {}),\n opacity: 0,\n }}\n exitStyle={{\n ...(direction === -1 ? { x: 25 } : {}),\n ...(direction === 1 ? { x: -25 } : {}),\n opacity: 0,\n }}\n >\n <H5 ta=\"center\">{currentTab}</H5>\n </Tabs.Content>\n </AnimatePresence>\n </Tabs>\n )\n}\n"],
5
- "mappings": "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",
6
- "names": []
7
- }