@tamagui/demos 1.135.4 → 1.135.6

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 (182) hide show
  1. package/dist/cjs/AccordionDemo.native.js +84 -90
  2. package/dist/cjs/AccordionDemo.native.js.map +1 -6
  3. package/dist/cjs/AddThemeDemo.cjs +1 -1
  4. package/dist/cjs/AddThemeDemo.js +1 -1
  5. package/dist/cjs/AddThemeDemo.js.map +1 -1
  6. package/dist/cjs/AddThemeDemo.native.js +50 -48
  7. package/dist/cjs/AddThemeDemo.native.js.map +1 -6
  8. package/dist/cjs/AlertDialogDemo.native.js +83 -95
  9. package/dist/cjs/AlertDialogDemo.native.js.map +1 -6
  10. package/dist/cjs/AnimationsDemo.native.js +84 -86
  11. package/dist/cjs/AnimationsDemo.native.js.map +1 -6
  12. package/dist/cjs/AnimationsEnterDemo.cjs +1 -1
  13. package/dist/cjs/AnimationsEnterDemo.js +1 -1
  14. package/dist/cjs/AnimationsEnterDemo.js.map +1 -1
  15. package/dist/cjs/AnimationsEnterDemo.native.js +58 -51
  16. package/dist/cjs/AnimationsEnterDemo.native.js.map +1 -6
  17. package/dist/cjs/AnimationsHoverDemo.native.js +22 -17
  18. package/dist/cjs/AnimationsHoverDemo.native.js.map +1 -6
  19. package/dist/cjs/AnimationsPresenceDemo.cjs +4 -4
  20. package/dist/cjs/AnimationsPresenceDemo.js +1 -1
  21. package/dist/cjs/AnimationsPresenceDemo.js.map +1 -1
  22. package/dist/cjs/AnimationsPresenceDemo.native.js +107 -104
  23. package/dist/cjs/AnimationsPresenceDemo.native.js.map +1 -6
  24. package/dist/cjs/AnimationsTimingDemo.native.js +22 -17
  25. package/dist/cjs/AnimationsTimingDemo.native.js.map +1 -6
  26. package/dist/cjs/AvatarDemo.native.js +41 -45
  27. package/dist/cjs/AvatarDemo.native.js.map +1 -6
  28. package/dist/cjs/BuildAButtonDemo.native.js +100 -113
  29. package/dist/cjs/BuildAButtonDemo.native.js.map +1 -6
  30. package/dist/cjs/ButtonDemo.native.js +69 -79
  31. package/dist/cjs/ButtonDemo.native.js.map +1 -6
  32. package/dist/cjs/CardDemo.native.js +64 -74
  33. package/dist/cjs/CardDemo.native.js.map +1 -6
  34. package/dist/cjs/CheckboxDemo.native.js +49 -47
  35. package/dist/cjs/CheckboxDemo.native.js.map +1 -6
  36. package/dist/cjs/CheckboxHeadlessDemo.cjs +1 -1
  37. package/dist/cjs/CheckboxHeadlessDemo.js +1 -1
  38. package/dist/cjs/CheckboxHeadlessDemo.js.map +1 -1
  39. package/dist/cjs/CheckboxHeadlessDemo.native.js +53 -47
  40. package/dist/cjs/CheckboxHeadlessDemo.native.js.map +1 -6
  41. package/dist/cjs/CheckboxUnstyledDemo.native.js +57 -51
  42. package/dist/cjs/CheckboxUnstyledDemo.native.js.map +1 -6
  43. package/dist/cjs/ColorsDemo.native.js +101 -116
  44. package/dist/cjs/ColorsDemo.native.js.map +1 -6
  45. package/dist/cjs/DialogDemo.native.js +167 -201
  46. package/dist/cjs/DialogDemo.native.js.map +1 -6
  47. package/dist/cjs/FormsDemo.cjs +1 -1
  48. package/dist/cjs/FormsDemo.js +1 -1
  49. package/dist/cjs/FormsDemo.js.map +1 -1
  50. package/dist/cjs/FormsDemo.native.js +42 -39
  51. package/dist/cjs/FormsDemo.native.js.map +1 -6
  52. package/dist/cjs/Grid.cjs +1 -1
  53. package/dist/cjs/Grid.js +1 -1
  54. package/dist/cjs/Grid.js.map +1 -1
  55. package/dist/cjs/Grid.native.js +48 -36
  56. package/dist/cjs/Grid.native.js.map +1 -6
  57. package/dist/cjs/GroupDemo.native.js +73 -83
  58. package/dist/cjs/GroupDemo.native.js.map +1 -6
  59. package/dist/cjs/HeadingsDemo.native.js +34 -36
  60. package/dist/cjs/HeadingsDemo.native.js.map +1 -6
  61. package/dist/cjs/ImageDemo.native.js +20 -16
  62. package/dist/cjs/ImageDemo.native.js.map +1 -6
  63. package/dist/cjs/InputsDemo.native.js +38 -42
  64. package/dist/cjs/InputsDemo.native.js.map +1 -6
  65. package/dist/cjs/LabelDemo.native.js +46 -51
  66. package/dist/cjs/LabelDemo.native.js.map +1 -6
  67. package/dist/cjs/LinearGradientDemo.native.js +38 -54
  68. package/dist/cjs/LinearGradientDemo.native.js.map +1 -6
  69. package/dist/cjs/ListItemDemo.native.js +68 -74
  70. package/dist/cjs/ListItemDemo.native.js.map +1 -6
  71. package/dist/cjs/LucideIconsDemo.cjs +2 -2
  72. package/dist/cjs/LucideIconsDemo.js +1 -1
  73. package/dist/cjs/LucideIconsDemo.js.map +1 -1
  74. package/dist/cjs/LucideIconsDemo.native.js +70 -62
  75. package/dist/cjs/LucideIconsDemo.native.js.map +1 -6
  76. package/dist/cjs/NewInputsDemo.native.js +38 -42
  77. package/dist/cjs/NewInputsDemo.native.js.map +1 -6
  78. package/dist/cjs/PopoverDemo.native.js +131 -154
  79. package/dist/cjs/PopoverDemo.native.js.map +1 -6
  80. package/dist/cjs/ProgressDemo.cjs +1 -1
  81. package/dist/cjs/ProgressDemo.js +1 -1
  82. package/dist/cjs/ProgressDemo.js.map +1 -1
  83. package/dist/cjs/ProgressDemo.native.js +93 -99
  84. package/dist/cjs/ProgressDemo.native.js.map +1 -6
  85. package/dist/cjs/RadioGroupDemo.native.js +45 -49
  86. package/dist/cjs/RadioGroupDemo.native.js.map +1 -6
  87. package/dist/cjs/RadioGroupHeadlessDemo.cjs +1 -1
  88. package/dist/cjs/RadioGroupHeadlessDemo.js +1 -1
  89. package/dist/cjs/RadioGroupHeadlessDemo.js.map +1 -1
  90. package/dist/cjs/RadioGroupHeadlessDemo.native.js +102 -78
  91. package/dist/cjs/RadioGroupHeadlessDemo.native.js.map +1 -6
  92. package/dist/cjs/RadioGroupUnstyledDemo.native.js +112 -106
  93. package/dist/cjs/RadioGroupUnstyledDemo.native.js.map +1 -6
  94. package/dist/cjs/ReplaceThemeDemo.cjs +1 -1
  95. package/dist/cjs/ReplaceThemeDemo.js +1 -1
  96. package/dist/cjs/ReplaceThemeDemo.js.map +1 -1
  97. package/dist/cjs/ReplaceThemeDemo.native.js +50 -43
  98. package/dist/cjs/ReplaceThemeDemo.native.js.map +1 -6
  99. package/dist/cjs/ScrollViewDemo.native.js +54 -59
  100. package/dist/cjs/ScrollViewDemo.native.js.map +1 -6
  101. package/dist/cjs/SelectDemo.cjs +1 -1
  102. package/dist/cjs/SelectDemo.js +1 -1
  103. package/dist/cjs/SelectDemo.js.map +1 -1
  104. package/dist/cjs/SelectDemo.native.js +211 -279
  105. package/dist/cjs/SelectDemo.native.js.map +1 -6
  106. package/dist/cjs/SeparatorDemo.native.js +47 -53
  107. package/dist/cjs/SeparatorDemo.native.js.map +1 -6
  108. package/dist/cjs/ShapesDemo.native.js +29 -28
  109. package/dist/cjs/ShapesDemo.native.js.map +1 -6
  110. package/dist/cjs/SheetDemo.cjs +1 -1
  111. package/dist/cjs/SheetDemo.js +1 -1
  112. package/dist/cjs/SheetDemo.js.map +1 -1
  113. package/dist/cjs/SheetDemo.native.js +172 -202
  114. package/dist/cjs/SheetDemo.native.js.map +1 -6
  115. package/dist/cjs/SliderDemo.native.js +39 -41
  116. package/dist/cjs/SliderDemo.native.js.map +1 -6
  117. package/dist/cjs/SpinnerDemo.native.js +27 -26
  118. package/dist/cjs/SpinnerDemo.native.js.map +1 -6
  119. package/dist/cjs/StacksDemo.native.js +85 -96
  120. package/dist/cjs/StacksDemo.native.js.map +1 -6
  121. package/dist/cjs/SwitchDemo.native.js +74 -87
  122. package/dist/cjs/SwitchDemo.native.js.map +1 -6
  123. package/dist/cjs/SwitchHeadlessDemo.cjs +1 -1
  124. package/dist/cjs/SwitchHeadlessDemo.js +1 -1
  125. package/dist/cjs/SwitchHeadlessDemo.js.map +1 -1
  126. package/dist/cjs/SwitchHeadlessDemo.native.js +71 -77
  127. package/dist/cjs/SwitchHeadlessDemo.native.js.map +1 -6
  128. package/dist/cjs/SwitchUnstyledDemo.native.js +66 -61
  129. package/dist/cjs/SwitchUnstyledDemo.native.js.map +1 -6
  130. package/dist/cjs/TabsAdvancedDemo.cjs +1 -1
  131. package/dist/cjs/TabsAdvancedDemo.js +1 -1
  132. package/dist/cjs/TabsAdvancedDemo.js.map +1 -1
  133. package/dist/cjs/TabsAdvancedDemo.native.js +321 -310
  134. package/dist/cjs/TabsAdvancedDemo.native.js.map +1 -6
  135. package/dist/cjs/TabsDemo.cjs +1 -1
  136. package/dist/cjs/TabsDemo.js +1 -1
  137. package/dist/cjs/TabsDemo.js.map +1 -1
  138. package/dist/cjs/TabsDemo.native.js +165 -177
  139. package/dist/cjs/TabsDemo.native.js.map +1 -6
  140. package/dist/cjs/TabsHeadlessDemo.native.js +102 -102
  141. package/dist/cjs/TabsHeadlessDemo.native.js.map +1 -6
  142. package/dist/cjs/TextDemo.native.js +39 -41
  143. package/dist/cjs/TextDemo.native.js.map +1 -6
  144. package/dist/cjs/ThemeBuilderDemo.native.js +154 -181
  145. package/dist/cjs/ThemeBuilderDemo.native.js.map +1 -6
  146. package/dist/cjs/ThemeInverseDemo.native.js +47 -54
  147. package/dist/cjs/ThemeInverseDemo.native.js.map +1 -6
  148. package/dist/cjs/ToastDemo.cjs +1 -1
  149. package/dist/cjs/ToastDemo.js +1 -1
  150. package/dist/cjs/ToastDemo.js.map +1 -1
  151. package/dist/cjs/ToastDemo.native.js +100 -104
  152. package/dist/cjs/ToastDemo.native.js.map +1 -6
  153. package/dist/cjs/ToastDuplicateDemo.cjs +1 -1
  154. package/dist/cjs/ToastDuplicateDemo.js +1 -1
  155. package/dist/cjs/ToastDuplicateDemo.js.map +1 -1
  156. package/dist/cjs/ToastDuplicateDemo.native.js +70 -73
  157. package/dist/cjs/ToastDuplicateDemo.native.js.map +1 -6
  158. package/dist/cjs/ToggleGroupDemo.native.js +83 -93
  159. package/dist/cjs/ToggleGroupDemo.native.js.map +1 -6
  160. package/dist/cjs/TokensDemo.cjs +1 -1
  161. package/dist/cjs/TokensDemo.js +1 -1
  162. package/dist/cjs/TokensDemo.js.map +1 -1
  163. package/dist/cjs/TokensDemo.native.js +111 -112
  164. package/dist/cjs/TokensDemo.native.js.map +1 -6
  165. package/dist/cjs/TooltipDemo.native.js +104 -121
  166. package/dist/cjs/TooltipDemo.native.js.map +1 -6
  167. package/dist/cjs/UpdateThemeDemo.cjs +1 -1
  168. package/dist/cjs/UpdateThemeDemo.js +1 -1
  169. package/dist/cjs/UpdateThemeDemo.js.map +1 -1
  170. package/dist/cjs/UpdateThemeDemo.native.js +54 -44
  171. package/dist/cjs/UpdateThemeDemo.native.js.map +1 -6
  172. package/dist/cjs/WebNativeImageDemo.native.js +20 -16
  173. package/dist/cjs/WebNativeImageDemo.native.js.map +1 -6
  174. package/dist/cjs/index.native.js +70 -126
  175. package/dist/cjs/index.native.js.map +1 -6
  176. package/dist/cjs/tamagui.config.native.js +21 -11
  177. package/dist/cjs/tamagui.config.native.js.map +1 -6
  178. package/dist/cjs/useOnIntersecting.native.js +62 -53
  179. package/dist/cjs/useOnIntersecting.native.js.map +1 -6
  180. package/dist/esm/ToastDuplicateDemo.native.js +4 -4
  181. package/dist/esm/ToastDuplicateDemo.native.js.map +1 -1
  182. package/package.json +32 -31
@@ -1,43 +1,54 @@
1
1
  "use strict";
2
+
2
3
  var __create = Object.create;
3
4
  var __defProp = Object.defineProperty;
4
5
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
6
  var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __getProtoOf = Object.getPrototypeOf,
8
+ __hasOwnProp = Object.prototype.hasOwnProperty;
7
9
  var __export = (target, all) => {
8
- for (var name in all)
9
- __defProp(target, name, { get: all[name], enumerable: !0 });
10
- }, __copyProps = (to, from, except, desc) => {
11
- if (from && typeof from == "object" || typeof from == "function")
12
- for (let key of __getOwnPropNames(from))
13
- !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
14
- return to;
15
- };
10
+ for (var name in all) __defProp(target, name, {
11
+ get: all[name],
12
+ enumerable: !0
13
+ });
14
+ },
15
+ __copyProps = (to, from, except, desc) => {
16
+ if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
17
+ get: () => from[key],
18
+ enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
19
+ });
20
+ return to;
21
+ };
16
22
  var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
17
23
  // If the importer is in node compatibility mode or this is not an ESM
18
24
  // file that has been converted to a CommonJS file using a Babel-
19
25
  // compatible transform (i.e. "__esModule" has not been set), then set
20
26
  // "default" to the CommonJS "module.exports" for node compatibility.
21
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
22
- mod
23
- )), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
27
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
28
+ value: mod,
29
+ enumerable: !0
30
+ }) : target, mod)),
31
+ __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
32
+ value: !0
33
+ }), mod);
24
34
  var TabsAdvancedDemo_exports = {};
25
35
  __export(TabsAdvancedDemo_exports, {
26
36
  TabsAdvancedDemo: () => TabsAdvancedDemo
27
37
  });
28
38
  module.exports = __toCommonJS(TabsAdvancedDemo_exports);
29
- var import_jsx_runtime = require("react/jsx-runtime"), import_react = __toESM(require("react")), import_tamagui = require("tamagui"), demos = [
30
- "background",
31
- "underline"
32
- ], demosTitle = {
33
- background: "Background Indicator",
34
- underline: "Underline Indicator"
35
- }, TabsAdvancedDemo = function() {
36
- var [demoIndex, setDemoIndex] = import_react.default.useState(0), demo = demos[demoIndex];
37
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
38
- children: [
39
- demo === "underline" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsAdvancedUnderline, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsAdvancedBackground, {}),
40
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
39
+ var import_jsx_runtime = require("react/jsx-runtime"),
40
+ import_react = __toESM(require("react"), 1),
41
+ import_tamagui = require("tamagui"),
42
+ demos = ["background", "underline"],
43
+ demosTitle = {
44
+ background: "Background Indicator",
45
+ underline: "Underline Indicator"
46
+ },
47
+ TabsAdvancedDemo = function () {
48
+ var [demoIndex, setDemoIndex] = import_react.default.useState(0),
49
+ demo = demos[demoIndex];
50
+ return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
51
+ children: [demo === "underline" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsAdvancedUnderline, {}) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsAdvancedBackground, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
41
52
  alignItems: "center",
42
53
  gap: "$4",
43
54
  position: "absolute",
@@ -46,332 +57,332 @@ var import_jsx_runtime = require("react/jsx-runtime"), import_react = __toESM(re
46
57
  $xxs: {
47
58
  display: "none"
48
59
  },
49
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, {
60
+ children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
50
61
  size: "$2",
51
- onPress: function() {
52
- return setDemoIndex(function(x) {
62
+ onPress: function () {
63
+ return setDemoIndex(function (x) {
53
64
  return (x + 1) % demos.length;
54
65
  });
55
66
  },
56
67
  children: demosTitle[demo]
57
68
  })
58
- })
59
- ]
60
- });
61
- }, TabsAdvancedBackground = function() {
62
- var [tabState, setTabState] = import_react.default.useState(
63
- /**
64
- * Layout of the Tab user might intend to select (hovering / focusing)
65
- */
66
- /**
67
- * Layout of the Tab user selected
68
- */
69
- /**
70
- * Used to get the direction of activation for animating the active indicator
71
- */
72
- {
73
- activeAt: null,
74
- currentTab: "tab1",
75
- intentAt: null,
76
- prevActiveAt: null
77
- }
78
- ), setCurrentTab = function(currentTab2) {
79
- return setTabState({
80
- ...tabState,
81
- currentTab: currentTab2
69
+ })]
82
70
  });
83
- }, setIntentIndicator = function(intentAt2) {
84
- return setTabState({
85
- ...tabState,
86
- intentAt: intentAt2
87
- });
88
- }, setActiveIndicator = function(activeAt2) {
89
- return setTabState({
90
- ...tabState,
91
- prevActiveAt: tabState.activeAt,
92
- activeAt: activeAt2
93
- });
94
- }, { activeAt, intentAt, prevActiveAt, currentTab } = tabState, direction = function() {
95
- return !activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x ? 0 : activeAt.x > prevActiveAt.x ? -1 : 1;
96
- }(), handleOnInteraction = function(type, layout) {
97
- type === "select" ? setActiveIndicator(layout) : setIntentIndicator(layout);
98
- };
99
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Tabs, {
100
- value: currentTab,
101
- onValueChange: setCurrentTab,
102
- orientation: "horizontal",
103
- size: "$4",
104
- padding: "$2",
105
- height: 150,
106
- flexDirection: "column",
107
- activationMode: "manual",
108
- backgroundColor: "$background",
109
- borderRadius: "$4",
110
- position: "relative",
111
- children: [
112
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
113
- children: [
114
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
115
- children: intentAt && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsRovingIndicator, {
116
- borderRadius: "$4",
117
- width: intentAt.width,
118
- height: intentAt.height,
119
- x: intentAt.x,
120
- y: intentAt.y
71
+ },
72
+ TabsAdvancedBackground = function () {
73
+ var [tabState, setTabState] = import_react.default.useState(
74
+ /**
75
+ * Layout of the Tab user might intend to select (hovering / focusing)
76
+ */
77
+ /**
78
+ * Layout of the Tab user selected
79
+ */
80
+ /**
81
+ * Used to get the direction of activation for animating the active indicator
82
+ */
83
+ {
84
+ activeAt: null,
85
+ currentTab: "tab1",
86
+ intentAt: null,
87
+ prevActiveAt: null
88
+ }),
89
+ setCurrentTab = function (currentTab2) {
90
+ return setTabState({
91
+ ...tabState,
92
+ currentTab: currentTab2
93
+ });
94
+ },
95
+ setIntentIndicator = function (intentAt2) {
96
+ return setTabState({
97
+ ...tabState,
98
+ intentAt: intentAt2
99
+ });
100
+ },
101
+ setActiveIndicator = function (activeAt2) {
102
+ return setTabState({
103
+ ...tabState,
104
+ prevActiveAt: tabState.activeAt,
105
+ activeAt: activeAt2
106
+ });
107
+ },
108
+ {
109
+ activeAt,
110
+ intentAt,
111
+ prevActiveAt,
112
+ currentTab
113
+ } = tabState,
114
+ direction = function () {
115
+ return !activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x ? 0 : activeAt.x > prevActiveAt.x ? -1 : 1;
116
+ }(),
117
+ handleOnInteraction = function (type, layout) {
118
+ type === "select" ? setActiveIndicator(layout) : setIntentIndicator(layout);
119
+ };
120
+ return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Tabs, {
121
+ value: currentTab,
122
+ onValueChange: setCurrentTab,
123
+ orientation: "horizontal",
124
+ size: "$4",
125
+ padding: "$2",
126
+ height: 150,
127
+ flexDirection: "column",
128
+ activationMode: "manual",
129
+ backgroundColor: "$background",
130
+ borderRadius: "$4",
131
+ position: "relative",
132
+ children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
133
+ children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
134
+ children: intentAt && /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsRovingIndicator, {
135
+ borderRadius: "$4",
136
+ width: intentAt.width,
137
+ height: intentAt.height,
138
+ x: intentAt.x,
139
+ y: intentAt.y
140
+ })
141
+ }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
142
+ children: activeAt && /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsRovingIndicator, {
143
+ borderRadius: "$4",
144
+ theme: "accent",
145
+ width: activeAt.width,
146
+ height: activeAt.height,
147
+ x: activeAt.x,
148
+ y: activeAt.y
149
+ })
150
+ }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Tabs.List, {
151
+ disablePassBorderRadius: !0,
152
+ loop: !1,
153
+ "aria-label": "Manage your account",
154
+ gap: "$2",
155
+ backgroundColor: "transparent",
156
+ children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
157
+ unstyled: !0,
158
+ paddingVertical: "$2",
159
+ paddingHorizontal: "$3",
160
+ value: "tab1",
161
+ onInteraction: handleOnInteraction,
162
+ children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
163
+ children: "Profile"
121
164
  })
122
- }),
123
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
124
- children: activeAt && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsRovingIndicator, {
125
- borderRadius: "$4",
126
- theme: "accent",
127
- width: activeAt.width,
128
- height: activeAt.height,
129
- x: activeAt.x,
130
- y: activeAt.y
165
+ }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
166
+ unstyled: !0,
167
+ paddingVertical: "$2",
168
+ paddingHorizontal: "$3",
169
+ value: "tab2",
170
+ onInteraction: handleOnInteraction,
171
+ children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
172
+ children: "Connections"
131
173
  })
132
- }),
133
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Tabs.List, {
134
- disablePassBorderRadius: !0,
135
- loop: !1,
136
- "aria-label": "Manage your account",
137
- gap: "$2",
138
- backgroundColor: "transparent",
139
- children: [
140
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
141
- unstyled: !0,
142
- paddingVertical: "$2",
143
- paddingHorizontal: "$3",
144
- value: "tab1",
145
- onInteraction: handleOnInteraction,
146
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
147
- children: "Profile"
148
- })
149
- }),
150
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
151
- unstyled: !0,
152
- paddingVertical: "$2",
153
- paddingHorizontal: "$3",
154
- value: "tab2",
155
- onInteraction: handleOnInteraction,
156
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
157
- children: "Connections"
158
- })
159
- }),
160
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
161
- unstyled: !0,
162
- paddingVertical: "$2",
163
- paddingHorizontal: "$3",
164
- value: "tab3",
165
- onInteraction: handleOnInteraction,
166
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
167
- children: "Notifications"
168
- })
169
- })
170
- ]
171
- })
172
- ]
173
- }),
174
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
174
+ }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
175
+ unstyled: !0,
176
+ paddingVertical: "$2",
177
+ paddingHorizontal: "$3",
178
+ value: "tab3",
179
+ onInteraction: handleOnInteraction,
180
+ children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
181
+ children: "Notifications"
182
+ })
183
+ })]
184
+ })]
185
+ }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
175
186
  exitBeforeEnter: !0,
176
187
  custom: {
177
188
  direction
178
189
  },
179
190
  initial: !1,
180
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AnimatedYStack, {
181
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, {
191
+ children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AnimatedYStack, {
192
+ children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, {
182
193
  value: currentTab,
183
194
  forceMount: !0,
184
195
  flex: 1,
185
196
  justifyContent: "center",
186
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, {
197
+ children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H5, {
187
198
  textAlign: "center",
188
199
  children: currentTab
189
200
  })
190
201
  })
191
202
  }, currentTab)
192
- })
193
- ]
194
- });
195
- }, TabsAdvancedUnderline = function() {
196
- var [tabState, setTabState] = import_react.default.useState(
197
- /**
198
- * Layout of the Tab user might intend to select (hovering / focusing)
199
- */
200
- /**
201
- * Layout of the Tab user selected
202
- */
203
- /**
204
- * Used to get the direction of activation for animating the active indicator
205
- */
206
- {
207
- activeAt: null,
208
- currentTab: "tab1",
209
- intentAt: null,
210
- prevActiveAt: null
211
- }
212
- ), setCurrentTab = function(currentTab2) {
213
- return setTabState({
214
- ...tabState,
215
- currentTab: currentTab2
216
- });
217
- }, setIntentIndicator = function(intentAt2) {
218
- return setTabState({
219
- ...tabState,
220
- intentAt: intentAt2
203
+ })]
221
204
  });
222
- }, setActiveIndicator = function(activeAt2) {
223
- return setTabState({
224
- ...tabState,
225
- prevActiveAt: tabState.activeAt,
226
- activeAt: activeAt2
227
- });
228
- }, { activeAt, intentAt, prevActiveAt, currentTab } = tabState, direction = function() {
229
- return !activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x ? 0 : activeAt.x > prevActiveAt.x ? -1 : 1;
230
- }(), handleOnInteraction = function(type, layout) {
231
- type === "select" ? setActiveIndicator(layout) : setIntentIndicator(layout);
232
- };
233
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Tabs, {
234
- value: currentTab,
235
- onValueChange: setCurrentTab,
236
- orientation: "horizontal",
237
- size: "$4",
238
- height: 150,
239
- flexDirection: "column",
240
- activationMode: "manual",
241
- backgroundColor: "$background",
242
- borderRadius: "$4",
243
- children: [
244
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
245
- children: [
246
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
247
- children: intentAt && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsRovingIndicator, {
248
- width: intentAt.width,
249
- height: "$0.5",
250
- x: intentAt.x,
251
- bottom: 0
205
+ },
206
+ TabsAdvancedUnderline = function () {
207
+ var [tabState, setTabState] = import_react.default.useState(
208
+ /**
209
+ * Layout of the Tab user might intend to select (hovering / focusing)
210
+ */
211
+ /**
212
+ * Layout of the Tab user selected
213
+ */
214
+ /**
215
+ * Used to get the direction of activation for animating the active indicator
216
+ */
217
+ {
218
+ activeAt: null,
219
+ currentTab: "tab1",
220
+ intentAt: null,
221
+ prevActiveAt: null
222
+ }),
223
+ setCurrentTab = function (currentTab2) {
224
+ return setTabState({
225
+ ...tabState,
226
+ currentTab: currentTab2
227
+ });
228
+ },
229
+ setIntentIndicator = function (intentAt2) {
230
+ return setTabState({
231
+ ...tabState,
232
+ intentAt: intentAt2
233
+ });
234
+ },
235
+ setActiveIndicator = function (activeAt2) {
236
+ return setTabState({
237
+ ...tabState,
238
+ prevActiveAt: tabState.activeAt,
239
+ activeAt: activeAt2
240
+ });
241
+ },
242
+ {
243
+ activeAt,
244
+ intentAt,
245
+ prevActiveAt,
246
+ currentTab
247
+ } = tabState,
248
+ direction = function () {
249
+ return !activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x ? 0 : activeAt.x > prevActiveAt.x ? -1 : 1;
250
+ }(),
251
+ handleOnInteraction = function (type, layout) {
252
+ type === "select" ? setActiveIndicator(layout) : setIntentIndicator(layout);
253
+ };
254
+ return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Tabs, {
255
+ value: currentTab,
256
+ onValueChange: setCurrentTab,
257
+ orientation: "horizontal",
258
+ size: "$4",
259
+ height: 150,
260
+ flexDirection: "column",
261
+ activationMode: "manual",
262
+ backgroundColor: "$background",
263
+ borderRadius: "$4",
264
+ children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
265
+ children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
266
+ children: intentAt && /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsRovingIndicator, {
267
+ width: intentAt.width,
268
+ height: "$0.5",
269
+ x: intentAt.x,
270
+ bottom: 0
271
+ })
272
+ }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
273
+ children: activeAt && /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsRovingIndicator, {
274
+ theme: "accent",
275
+ active: !0,
276
+ width: activeAt.width,
277
+ height: "$0.5",
278
+ x: activeAt.x,
279
+ bottom: 0
280
+ })
281
+ }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Tabs.List, {
282
+ disablePassBorderRadius: !0,
283
+ loop: !1,
284
+ "aria-label": "Manage your account",
285
+ borderBottomLeftRadius: 0,
286
+ borderBottomRightRadius: 0,
287
+ paddingBottom: "$1.5",
288
+ borderColor: "$color3",
289
+ borderBottomWidth: "$0.5",
290
+ backgroundColor: "transparent",
291
+ children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
292
+ unstyled: !0,
293
+ paddingHorizontal: "$3",
294
+ paddingVertical: "$2",
295
+ value: "tab1",
296
+ onInteraction: handleOnInteraction,
297
+ children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
298
+ children: "Profile"
252
299
  })
253
- }),
254
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
255
- children: activeAt && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsRovingIndicator, {
256
- theme: "accent",
257
- active: !0,
258
- width: activeAt.width,
259
- height: "$0.5",
260
- x: activeAt.x,
261
- bottom: 0
300
+ }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
301
+ unstyled: !0,
302
+ paddingHorizontal: "$3",
303
+ paddingVertical: "$2",
304
+ value: "tab2",
305
+ onInteraction: handleOnInteraction,
306
+ children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
307
+ children: "Connections"
262
308
  })
263
- }),
264
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Tabs.List, {
265
- disablePassBorderRadius: !0,
266
- loop: !1,
267
- "aria-label": "Manage your account",
268
- borderBottomLeftRadius: 0,
269
- borderBottomRightRadius: 0,
270
- paddingBottom: "$1.5",
271
- borderColor: "$color3",
272
- borderBottomWidth: "$0.5",
273
- backgroundColor: "transparent",
274
- children: [
275
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
276
- unstyled: !0,
277
- paddingHorizontal: "$3",
278
- paddingVertical: "$2",
279
- value: "tab1",
280
- onInteraction: handleOnInteraction,
281
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
282
- children: "Profile"
283
- })
284
- }),
285
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
286
- unstyled: !0,
287
- paddingHorizontal: "$3",
288
- paddingVertical: "$2",
289
- value: "tab2",
290
- onInteraction: handleOnInteraction,
291
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
292
- children: "Connections"
293
- })
294
- }),
295
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
296
- unstyled: !0,
297
- paddingHorizontal: "$3",
298
- paddingVertical: "$2",
299
- value: "tab3",
300
- onInteraction: handleOnInteraction,
301
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
302
- children: "Notifications"
303
- })
304
- })
305
- ]
306
- })
307
- ]
308
- }),
309
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
309
+ }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
310
+ unstyled: !0,
311
+ paddingHorizontal: "$3",
312
+ paddingVertical: "$2",
313
+ value: "tab3",
314
+ onInteraction: handleOnInteraction,
315
+ children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
316
+ children: "Notifications"
317
+ })
318
+ })]
319
+ })]
320
+ }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
310
321
  exitBeforeEnter: !0,
311
322
  custom: {
312
323
  direction
313
324
  },
314
325
  initial: !1,
315
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AnimatedYStack, {
316
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, {
326
+ children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AnimatedYStack, {
327
+ children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, {
317
328
  value: currentTab,
318
329
  forceMount: !0,
319
330
  flex: 1,
320
331
  justifyContent: "center",
321
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, {
332
+ children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H5, {
322
333
  textAlign: "center",
323
334
  children: currentTab
324
335
  })
325
336
  })
326
337
  }, currentTab)
327
- })
328
- ]
329
- });
330
- }, TabsRovingIndicator = function(param) {
331
- var { active, ...props } = param;
332
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
333
- position: "absolute",
334
- backgroundColor: "$color5",
335
- opacity: 0.7,
338
+ })]
339
+ });
340
+ },
341
+ TabsRovingIndicator = function (param) {
342
+ var {
343
+ active,
344
+ ...props
345
+ } = param;
346
+ return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
347
+ position: "absolute",
348
+ backgroundColor: "$color5",
349
+ opacity: 0.7,
350
+ animation: "100ms",
351
+ enterStyle: {
352
+ opacity: 0
353
+ },
354
+ exitStyle: {
355
+ opacity: 0
356
+ },
357
+ ...(active && {
358
+ backgroundColor: "$color8",
359
+ opacity: 0.6
360
+ }),
361
+ ...props
362
+ });
363
+ },
364
+ AnimatedYStack = (0, import_tamagui.styled)(import_tamagui.YStack, {
365
+ flex: 1,
366
+ x: 0,
367
+ opacity: 1,
336
368
  animation: "100ms",
337
- enterStyle: {
338
- opacity: 0
339
- },
340
- exitStyle: {
341
- opacity: 0
342
- },
343
- ...active && {
344
- backgroundColor: "$color8",
345
- opacity: 0.6
346
- },
347
- ...props
348
- });
349
- }, AnimatedYStack = (0, import_tamagui.styled)(import_tamagui.YStack, {
350
- flex: 1,
351
- x: 0,
352
- opacity: 1,
353
- animation: "100ms",
354
- variants: {
355
- // 1 = right, 0 = nowhere, -1 = left
356
- direction: {
357
- ":number": function(direction) {
358
- return {
359
- enterStyle: {
360
- x: direction > 0 ? -25 : 25,
361
- opacity: 0
362
- },
363
- exitStyle: {
364
- zIndex: 0,
365
- x: direction < 0 ? -25 : 25,
366
- opacity: 0
367
- }
368
- };
369
+ variants: {
370
+ // 1 = right, 0 = nowhere, -1 = left
371
+ direction: {
372
+ ":number": function (direction) {
373
+ return {
374
+ enterStyle: {
375
+ x: direction > 0 ? -25 : 25,
376
+ opacity: 0
377
+ },
378
+ exitStyle: {
379
+ zIndex: 0,
380
+ x: direction < 0 ? -25 : 25,
381
+ opacity: 0
382
+ }
383
+ };
384
+ }
369
385
  }
370
386
  }
371
- }
372
- });
373
- // Annotate the CommonJS export names for ESM import in node:
374
- 0 && (module.exports = {
375
- TabsAdvancedDemo
376
- });
377
- //# sourceMappingURL=TabsAdvancedDemo.js.map
387
+ });
388
+ //# sourceMappingURL=TabsAdvancedDemo.native.js.map