@tamagui/demos 1.135.4-1761749240853 → 1.135.4

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 +90 -84
  2. package/dist/cjs/AccordionDemo.native.js.map +6 -1
  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 +48 -50
  7. package/dist/cjs/AddThemeDemo.native.js.map +6 -1
  8. package/dist/cjs/AlertDialogDemo.native.js +95 -83
  9. package/dist/cjs/AlertDialogDemo.native.js.map +6 -1
  10. package/dist/cjs/AnimationsDemo.native.js +86 -84
  11. package/dist/cjs/AnimationsDemo.native.js.map +6 -1
  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 +51 -58
  16. package/dist/cjs/AnimationsEnterDemo.native.js.map +6 -1
  17. package/dist/cjs/AnimationsHoverDemo.native.js +17 -22
  18. package/dist/cjs/AnimationsHoverDemo.native.js.map +6 -1
  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 +104 -107
  23. package/dist/cjs/AnimationsPresenceDemo.native.js.map +6 -1
  24. package/dist/cjs/AnimationsTimingDemo.native.js +17 -22
  25. package/dist/cjs/AnimationsTimingDemo.native.js.map +6 -1
  26. package/dist/cjs/AvatarDemo.native.js +45 -41
  27. package/dist/cjs/AvatarDemo.native.js.map +6 -1
  28. package/dist/cjs/BuildAButtonDemo.native.js +113 -100
  29. package/dist/cjs/BuildAButtonDemo.native.js.map +6 -1
  30. package/dist/cjs/ButtonDemo.native.js +79 -69
  31. package/dist/cjs/ButtonDemo.native.js.map +6 -1
  32. package/dist/cjs/CardDemo.native.js +74 -64
  33. package/dist/cjs/CardDemo.native.js.map +6 -1
  34. package/dist/cjs/CheckboxDemo.native.js +47 -49
  35. package/dist/cjs/CheckboxDemo.native.js.map +6 -1
  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 +47 -53
  40. package/dist/cjs/CheckboxHeadlessDemo.native.js.map +6 -1
  41. package/dist/cjs/CheckboxUnstyledDemo.native.js +51 -57
  42. package/dist/cjs/CheckboxUnstyledDemo.native.js.map +6 -1
  43. package/dist/cjs/ColorsDemo.native.js +116 -101
  44. package/dist/cjs/ColorsDemo.native.js.map +6 -1
  45. package/dist/cjs/DialogDemo.native.js +201 -167
  46. package/dist/cjs/DialogDemo.native.js.map +6 -1
  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 +39 -42
  51. package/dist/cjs/FormsDemo.native.js.map +6 -1
  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 +36 -48
  56. package/dist/cjs/Grid.native.js.map +6 -1
  57. package/dist/cjs/GroupDemo.native.js +83 -73
  58. package/dist/cjs/GroupDemo.native.js.map +6 -1
  59. package/dist/cjs/HeadingsDemo.native.js +36 -34
  60. package/dist/cjs/HeadingsDemo.native.js.map +6 -1
  61. package/dist/cjs/ImageDemo.native.js +16 -20
  62. package/dist/cjs/ImageDemo.native.js.map +6 -1
  63. package/dist/cjs/InputsDemo.native.js +42 -38
  64. package/dist/cjs/InputsDemo.native.js.map +6 -1
  65. package/dist/cjs/LabelDemo.native.js +51 -46
  66. package/dist/cjs/LabelDemo.native.js.map +6 -1
  67. package/dist/cjs/LinearGradientDemo.native.js +54 -38
  68. package/dist/cjs/LinearGradientDemo.native.js.map +6 -1
  69. package/dist/cjs/ListItemDemo.native.js +74 -68
  70. package/dist/cjs/ListItemDemo.native.js.map +6 -1
  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 +62 -70
  75. package/dist/cjs/LucideIconsDemo.native.js.map +6 -1
  76. package/dist/cjs/NewInputsDemo.native.js +42 -38
  77. package/dist/cjs/NewInputsDemo.native.js.map +6 -1
  78. package/dist/cjs/PopoverDemo.native.js +154 -131
  79. package/dist/cjs/PopoverDemo.native.js.map +6 -1
  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 +99 -93
  84. package/dist/cjs/ProgressDemo.native.js.map +6 -1
  85. package/dist/cjs/RadioGroupDemo.native.js +49 -45
  86. package/dist/cjs/RadioGroupDemo.native.js.map +6 -1
  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 +78 -102
  91. package/dist/cjs/RadioGroupHeadlessDemo.native.js.map +6 -1
  92. package/dist/cjs/RadioGroupUnstyledDemo.native.js +106 -112
  93. package/dist/cjs/RadioGroupUnstyledDemo.native.js.map +6 -1
  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 +43 -50
  98. package/dist/cjs/ReplaceThemeDemo.native.js.map +6 -1
  99. package/dist/cjs/ScrollViewDemo.native.js +59 -54
  100. package/dist/cjs/ScrollViewDemo.native.js.map +6 -1
  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 +279 -211
  105. package/dist/cjs/SelectDemo.native.js.map +6 -1
  106. package/dist/cjs/SeparatorDemo.native.js +53 -47
  107. package/dist/cjs/SeparatorDemo.native.js.map +6 -1
  108. package/dist/cjs/ShapesDemo.native.js +28 -29
  109. package/dist/cjs/ShapesDemo.native.js.map +6 -1
  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 +202 -172
  114. package/dist/cjs/SheetDemo.native.js.map +6 -1
  115. package/dist/cjs/SliderDemo.native.js +41 -39
  116. package/dist/cjs/SliderDemo.native.js.map +6 -1
  117. package/dist/cjs/SpinnerDemo.native.js +26 -27
  118. package/dist/cjs/SpinnerDemo.native.js.map +6 -1
  119. package/dist/cjs/StacksDemo.native.js +96 -85
  120. package/dist/cjs/StacksDemo.native.js.map +6 -1
  121. package/dist/cjs/SwitchDemo.native.js +87 -74
  122. package/dist/cjs/SwitchDemo.native.js.map +6 -1
  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 +77 -71
  127. package/dist/cjs/SwitchHeadlessDemo.native.js.map +6 -1
  128. package/dist/cjs/SwitchUnstyledDemo.native.js +61 -66
  129. package/dist/cjs/SwitchUnstyledDemo.native.js.map +6 -1
  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 +310 -321
  134. package/dist/cjs/TabsAdvancedDemo.native.js.map +6 -1
  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 +177 -165
  139. package/dist/cjs/TabsDemo.native.js.map +6 -1
  140. package/dist/cjs/TabsHeadlessDemo.native.js +102 -102
  141. package/dist/cjs/TabsHeadlessDemo.native.js.map +6 -1
  142. package/dist/cjs/TextDemo.native.js +41 -39
  143. package/dist/cjs/TextDemo.native.js.map +6 -1
  144. package/dist/cjs/ThemeBuilderDemo.native.js +181 -154
  145. package/dist/cjs/ThemeBuilderDemo.native.js.map +6 -1
  146. package/dist/cjs/ThemeInverseDemo.native.js +54 -47
  147. package/dist/cjs/ThemeInverseDemo.native.js.map +6 -1
  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 +104 -100
  152. package/dist/cjs/ToastDemo.native.js.map +6 -1
  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 +73 -70
  157. package/dist/cjs/ToastDuplicateDemo.native.js.map +6 -1
  158. package/dist/cjs/ToggleGroupDemo.native.js +93 -83
  159. package/dist/cjs/ToggleGroupDemo.native.js.map +6 -1
  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 +112 -111
  164. package/dist/cjs/TokensDemo.native.js.map +6 -1
  165. package/dist/cjs/TooltipDemo.native.js +121 -104
  166. package/dist/cjs/TooltipDemo.native.js.map +6 -1
  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 +44 -54
  171. package/dist/cjs/UpdateThemeDemo.native.js.map +6 -1
  172. package/dist/cjs/WebNativeImageDemo.native.js +16 -20
  173. package/dist/cjs/WebNativeImageDemo.native.js.map +6 -1
  174. package/dist/cjs/index.native.js +126 -70
  175. package/dist/cjs/index.native.js.map +6 -1
  176. package/dist/cjs/tamagui.config.native.js +11 -21
  177. package/dist/cjs/tamagui.config.native.js.map +6 -1
  178. package/dist/cjs/useOnIntersecting.native.js +53 -62
  179. package/dist/cjs/useOnIntersecting.native.js.map +6 -1
  180. package/dist/esm/ToastDuplicateDemo.native.js +4 -4
  181. package/dist/esm/ToastDuplicateDemo.native.js.map +1 -1
  182. package/package.json +31 -32
@@ -1,54 +1,43 @@
1
1
  "use strict";
2
-
3
2
  var __create = Object.create;
4
3
  var __defProp = Object.defineProperty;
5
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
5
  var __getOwnPropNames = Object.getOwnPropertyNames;
7
- var __getProtoOf = Object.getPrototypeOf,
8
- __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
9
7
  var __export = (target, all) => {
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
- };
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
+ };
22
16
  var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
23
17
  // If the importer is in node compatibility mode or this is not an ESM
24
18
  // file that has been converted to a CommonJS file using a Babel-
25
19
  // compatible transform (i.e. "__esModule" has not been set), then set
26
20
  // "default" to the CommonJS "module.exports" for node compatibility.
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);
21
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
22
+ mod
23
+ )), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
34
24
  var TabsAdvancedDemo_exports = {};
35
25
  __export(TabsAdvancedDemo_exports, {
36
26
  TabsAdvancedDemo: () => TabsAdvancedDemo
37
27
  });
38
28
  module.exports = __toCommonJS(TabsAdvancedDemo_exports);
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, {
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, {
52
41
  alignItems: "center",
53
42
  gap: "$4",
54
43
  position: "absolute",
@@ -57,332 +46,332 @@ var import_jsx_runtime = require("react/jsx-runtime"),
57
46
  $xxs: {
58
47
  display: "none"
59
48
  },
60
- children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
49
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, {
61
50
  size: "$2",
62
- onPress: function () {
63
- return setDemoIndex(function (x) {
51
+ onPress: function() {
52
+ return setDemoIndex(function(x) {
64
53
  return (x + 1) % demos.length;
65
54
  });
66
55
  },
67
56
  children: demosTitle[demo]
68
57
  })
69
- })]
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
70
82
  });
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"
164
- })
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"
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
173
121
  })
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"
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
182
131
  })
183
- })]
184
- })]
185
- }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
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, {
186
175
  exitBeforeEnter: !0,
187
176
  custom: {
188
177
  direction
189
178
  },
190
179
  initial: !1,
191
- children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AnimatedYStack, {
192
- children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, {
180
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AnimatedYStack, {
181
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, {
193
182
  value: currentTab,
194
183
  forceMount: !0,
195
184
  flex: 1,
196
185
  justifyContent: "center",
197
- children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H5, {
186
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, {
198
187
  textAlign: "center",
199
188
  children: currentTab
200
189
  })
201
190
  })
202
191
  }, currentTab)
203
- })]
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
204
216
  });
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"
299
- })
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"
217
+ }, setIntentIndicator = function(intentAt2) {
218
+ return setTabState({
219
+ ...tabState,
220
+ intentAt: intentAt2
221
+ });
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
308
252
  })
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"
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
317
262
  })
318
- })]
319
- })]
320
- }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
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, {
321
310
  exitBeforeEnter: !0,
322
311
  custom: {
323
312
  direction
324
313
  },
325
314
  initial: !1,
326
- children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AnimatedYStack, {
327
- children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, {
315
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AnimatedYStack, {
316
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, {
328
317
  value: currentTab,
329
318
  forceMount: !0,
330
319
  flex: 1,
331
320
  justifyContent: "center",
332
- children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H5, {
321
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, {
333
322
  textAlign: "center",
334
323
  children: currentTab
335
324
  })
336
325
  })
337
326
  }, currentTab)
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,
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,
368
336
  animation: "100ms",
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
- }
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
+ };
385
369
  }
386
370
  }
387
- });
388
- //# sourceMappingURL=TabsAdvancedDemo.native.js.map
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