@tamagui/demos 1.15.24 → 1.15.25

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 (100) hide show
  1. package/package.json +18 -18
  2. package/dist/cjs/AccordionDemo.js +0 -42
  3. package/dist/cjs/AccordionDemo.js.map +0 -7
  4. package/dist/cjs/DrawerDemo.js +0 -79
  5. package/dist/cjs/DrawerDemo.js.map +0 -7
  6. package/dist/cjs/FeatherIconsDemo.js +0 -67
  7. package/dist/cjs/FeatherIconsDemo.js.map +0 -7
  8. package/dist/cjs/MenuDemo.js +0 -62
  9. package/dist/cjs/MenuDemo.js.map +0 -7
  10. package/dist/cjs/PopperDemo.js +0 -111
  11. package/dist/cjs/PopperDemo.js.map +0 -7
  12. package/dist/cjs/TabsAnimatedDemo.js +0 -167
  13. package/dist/cjs/TabsAnimatedDemo.js.map +0 -7
  14. package/dist/cjs/TabsHighlightedDemo.js +0 -184
  15. package/dist/cjs/TabsHighlightedDemo.js.map +0 -7
  16. package/dist/cjs/TabsUnderlinedDemo.js +0 -176
  17. package/dist/cjs/TabsUnderlinedDemo.js.map +0 -7
  18. package/dist/cjs/TamaguiLogo.js +0 -127
  19. package/dist/cjs/TamaguiLogo.js.map +0 -7
  20. package/dist/cjs/fixtures/zstack.js +0 -2
  21. package/dist/cjs/fixtures/zstack.js.map +0 -7
  22. package/dist/cjs/snapshots/zstack.js +0 -48
  23. package/dist/cjs/snapshots/zstack.js.map +0 -7
  24. package/dist/cjs/tests/zstack.js +0 -48
  25. package/dist/cjs/tests/zstack.js.map +0 -7
  26. package/dist/esm/AccordionDemo.js +0 -18
  27. package/dist/esm/AccordionDemo.js.map +0 -7
  28. package/dist/esm/AccordionDemo.mjs +0 -18
  29. package/dist/esm/AccordionDemo.mjs.map +0 -7
  30. package/dist/esm/DrawerDemo.js +0 -55
  31. package/dist/esm/DrawerDemo.js.map +0 -7
  32. package/dist/esm/FeatherIconsDemo.js +0 -33
  33. package/dist/esm/FeatherIconsDemo.js.map +0 -7
  34. package/dist/esm/FeatherIconsDemo.mjs +0 -33
  35. package/dist/esm/FeatherIconsDemo.mjs.map +0 -7
  36. package/dist/esm/MenuDemo.js +0 -38
  37. package/dist/esm/MenuDemo.js.map +0 -7
  38. package/dist/esm/PopperDemo.js +0 -97
  39. package/dist/esm/PopperDemo.js.map +0 -7
  40. package/dist/esm/TabsAnimatedDemo.js +0 -143
  41. package/dist/esm/TabsAnimatedDemo.js.map +0 -7
  42. package/dist/esm/TabsAnimatedDemo.mjs +0 -143
  43. package/dist/esm/TabsAnimatedDemo.mjs.map +0 -7
  44. package/dist/esm/TabsHighlightedDemo.js +0 -168
  45. package/dist/esm/TabsHighlightedDemo.js.map +0 -7
  46. package/dist/esm/TabsHighlightedDemo.mjs +0 -168
  47. package/dist/esm/TabsHighlightedDemo.mjs.map +0 -7
  48. package/dist/esm/TabsUnderlinedDemo.js +0 -160
  49. package/dist/esm/TabsUnderlinedDemo.js.map +0 -7
  50. package/dist/esm/TabsUnderlinedDemo.mjs +0 -160
  51. package/dist/esm/TabsUnderlinedDemo.mjs.map +0 -7
  52. package/dist/esm/TamaguiLogo.js +0 -96
  53. package/dist/esm/TamaguiLogo.js.map +0 -7
  54. package/dist/esm/fixtures/zstack.js +0 -1
  55. package/dist/esm/fixtures/zstack.js.map +0 -7
  56. package/dist/esm/snapshots/zstack.js +0 -24
  57. package/dist/esm/snapshots/zstack.js.map +0 -7
  58. package/dist/esm/tests/zstack.js +0 -24
  59. package/dist/esm/tests/zstack.js.map +0 -7
  60. package/dist/jsx/AccordionDemo.js +0 -17
  61. package/dist/jsx/AccordionDemo.js.map +0 -7
  62. package/dist/jsx/AccordionDemo.mjs +0 -17
  63. package/dist/jsx/AccordionDemo.mjs.map +0 -7
  64. package/dist/jsx/DrawerDemo.js +0 -18
  65. package/dist/jsx/DrawerDemo.js.map +0 -7
  66. package/dist/jsx/FeatherIconsDemo.js +0 -32
  67. package/dist/jsx/FeatherIconsDemo.js.map +0 -7
  68. package/dist/jsx/FeatherIconsDemo.mjs +0 -32
  69. package/dist/jsx/FeatherIconsDemo.mjs.map +0 -7
  70. package/dist/jsx/MenuDemo.js +0 -15
  71. package/dist/jsx/MenuDemo.js.map +0 -7
  72. package/dist/jsx/PopperDemo.js +0 -41
  73. package/dist/jsx/PopperDemo.js.map +0 -7
  74. package/dist/jsx/TabsAnimatedDemo.js +0 -114
  75. package/dist/jsx/TabsAnimatedDemo.js.map +0 -7
  76. package/dist/jsx/TabsAnimatedDemo.mjs +0 -114
  77. package/dist/jsx/TabsAnimatedDemo.mjs.map +0 -7
  78. package/dist/jsx/TabsHighlightedDemo.js +0 -137
  79. package/dist/jsx/TabsHighlightedDemo.js.map +0 -7
  80. package/dist/jsx/TabsHighlightedDemo.mjs +0 -137
  81. package/dist/jsx/TabsHighlightedDemo.mjs.map +0 -7
  82. package/dist/jsx/TabsUnderlinedDemo.js +0 -133
  83. package/dist/jsx/TabsUnderlinedDemo.js.map +0 -7
  84. package/dist/jsx/TabsUnderlinedDemo.mjs +0 -133
  85. package/dist/jsx/TabsUnderlinedDemo.mjs.map +0 -7
  86. package/dist/jsx/TamaguiLogo.js +0 -42
  87. package/dist/jsx/TamaguiLogo.js.map +0 -7
  88. package/dist/jsx/fixtures/zstack.js +0 -1
  89. package/dist/jsx/fixtures/zstack.js.map +0 -7
  90. package/dist/jsx/snapshots/zstack.js +0 -11
  91. package/dist/jsx/snapshots/zstack.js.map +0 -7
  92. package/dist/jsx/tests/zstack.js +0 -11
  93. package/dist/jsx/tests/zstack.js.map +0 -7
  94. package/types/AccordionDemo.d.ts.map +0 -1
  95. package/types/DrawerDemo.d.ts.map +0 -1
  96. package/types/FeatherIconsDemo.d.ts.map +0 -1
  97. package/types/MenuDemo.d.ts.map +0 -1
  98. package/types/PopperDemo.d.ts.map +0 -1
  99. package/types/TabsHighlightedDemo.d.ts.map +0 -1
  100. package/types/TabsUnderlinedDemo.d.ts.map +0 -1
@@ -1,160 +0,0 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
2
- import { useMemo, useRef, useState } from "react";
3
- import {
4
- AnimatePresence,
5
- H5,
6
- Stack,
7
- Tabs,
8
- XStack,
9
- YStack,
10
- styled
11
- } from "tamagui";
12
- function TabsUnderlinedDemo() {
13
- return /* @__PURE__ */ jsx(XStack, { maxHeight: "100%", maxWidth: "100%", justifyContent: "flex-start", px: "$4", children: /* @__PURE__ */ jsx(UnderlineTabs, {}) });
14
- }
15
- const TabsRovingIndicator = styled(Stack, {
16
- name: "TabsRovingIndicator",
17
- variants: {
18
- active: {
19
- true: {
20
- backgroundColor: "$color8"
21
- }
22
- },
23
- variants: {
24
- active: {
25
- true: {
26
- backgroundColor: "$color8"
27
- }
28
- },
29
- enter: {
30
- true: {
31
- opacity: 0
32
- }
33
- },
34
- exit: {
35
- true: {
36
- opacity: 0
37
- }
38
- }
39
- }
40
- },
41
- defaultVariants: {
42
- position: "absolute",
43
- backgroundColor: "$color5",
44
- opacity: 1,
45
- animation: "100ms"
46
- }
47
- });
48
- const AnimatedYStack = styled(YStack, {
49
- variants: {
50
- isTop: { true: { y: -25, opacity: 0 } },
51
- isBottom: { true: { y: 25, opacity: 0 } }
52
- }
53
- });
54
- const UnderlineTabs = () => {
55
- const [currentTab, setCurrentTab] = useState("tab1");
56
- const [focusIndicatorLayout, setFocusIndicatorLayout] = useState(null);
57
- const [hoverIndicatorLayout, setHoverIndicatorLayout] = useState(null);
58
- const [selectionIndicatorLayout, setSelectionIndicatorLayout] = useState(null);
59
- const prevSelectionIndicatorLayout = useRef(null);
60
- const handleUpdateSelectionIndicator = (newSize) => {
61
- prevSelectionIndicatorLayout.current = selectionIndicatorLayout;
62
- setSelectionIndicatorLayout(newSize);
63
- };
64
- const intentIndicatorLayout = hoverIndicatorLayout || focusIndicatorLayout;
65
- const direction = useMemo(() => {
66
- if (!selectionIndicatorLayout || !prevSelectionIndicatorLayout.current || selectionIndicatorLayout.y === prevSelectionIndicatorLayout.current.y) {
67
- return 0;
68
- }
69
- return selectionIndicatorLayout.y > prevSelectionIndicatorLayout.current.y ? 1 : -1;
70
- }, [selectionIndicatorLayout]);
71
- const enterVariant = direction === 1 ? "isTop" : direction === -1 ? "isBottom" : void 0;
72
- const exitVariant = direction === 1 ? "isBottom" : direction === -1 ? "isTop" : void 0;
73
- return /* @__PURE__ */ jsxs(
74
- Tabs,
75
- {
76
- value: currentTab,
77
- onValueChange: setCurrentTab,
78
- orientation: "vertical",
79
- width: 300,
80
- br: "$4",
81
- ai: "center",
82
- activationMode: "manual",
83
- children: [
84
- /* @__PURE__ */ jsx(YStack, { borderColor: "$color3", borderRightWidth: "$0.5", mr: "$2", children: /* @__PURE__ */ jsxs(Tabs.List, { loop: false, "aria-label": "Manage your account", disablePassBorderRadius: true, children: [
85
- intentIndicatorLayout && /* @__PURE__ */ jsx(
86
- TabsRovingIndicator,
87
- {
88
- width: "$0.5",
89
- height: intentIndicatorLayout.height,
90
- x: intentIndicatorLayout.x,
91
- y: intentIndicatorLayout.y,
92
- right: 0
93
- }
94
- ),
95
- selectionIndicatorLayout && /* @__PURE__ */ jsx(
96
- TabsRovingIndicator,
97
- {
98
- theme: "active",
99
- active: true,
100
- width: "$0.5",
101
- height: selectionIndicatorLayout.height,
102
- x: selectionIndicatorLayout.x,
103
- y: selectionIndicatorLayout.y,
104
- right: 0
105
- }
106
- ),
107
- /* @__PURE__ */ jsx(
108
- Tabs.Trigger,
109
- {
110
- unstyled: true,
111
- color: "$color12",
112
- value: "tab1",
113
- onSelectedLayoutChange: handleUpdateSelectionIndicator,
114
- onHoveredLayoutChange: setHoverIndicatorLayout,
115
- onFocusedLayoutChange: setFocusIndicatorLayout,
116
- children: "Profile"
117
- }
118
- ),
119
- /* @__PURE__ */ jsx(
120
- Tabs.Trigger,
121
- {
122
- unstyled: true,
123
- color: "$color12",
124
- value: "tab2",
125
- onSelectedLayoutChange: handleUpdateSelectionIndicator,
126
- onHoveredLayoutChange: setHoverIndicatorLayout,
127
- onFocusedLayoutChange: setFocusIndicatorLayout,
128
- children: "Connections"
129
- }
130
- ),
131
- /* @__PURE__ */ jsx(
132
- Tabs.Trigger,
133
- {
134
- unstyled: true,
135
- color: "$color12",
136
- value: "tab3",
137
- onSelectedLayoutChange: handleUpdateSelectionIndicator,
138
- onHoveredLayoutChange: setHoverIndicatorLayout,
139
- onFocusedLayoutChange: setFocusIndicatorLayout,
140
- children: "Notifications"
141
- }
142
- )
143
- ] }) }),
144
- /* @__PURE__ */ jsx(
145
- AnimatePresence,
146
- {
147
- exitBeforeEnter: true,
148
- enterVariant,
149
- exitVariant,
150
- children: /* @__PURE__ */ jsx(AnimatedYStack, { animation: "100ms", y: 0, o: 1, children: /* @__PURE__ */ jsx(Tabs.Content, { value: currentTab, forceMount: true, p: "$2", children: /* @__PURE__ */ jsx(H5, { ta: "center", children: currentTab }) }) }, currentTab)
151
- }
152
- )
153
- ]
154
- }
155
- );
156
- };
157
- export {
158
- TabsUnderlinedDemo
159
- };
160
- //# sourceMappingURL=TabsUnderlinedDemo.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/TabsUnderlinedDemo.tsx"],
4
- "sourcesContent": ["import { useMemo, useRef, useState } from 'react'\nimport {\n AnimatePresence,\n H5,\n Stack,\n TabTriggerLayout,\n Tabs,\n XStack,\n YStack,\n styled,\n} from 'tamagui'\n\nexport function TabsUnderlinedDemo() {\n return (\n <XStack maxHeight=\"100%\" maxWidth=\"100%\" justifyContent=\"flex-start\" px=\"$4\">\n <UnderlineTabs />\n </XStack>\n )\n}\n\nconst TabsRovingIndicator = styled(Stack, {\n name: 'TabsRovingIndicator',\n variants: {\n active: {\n true: {\n backgroundColor: '$color8',\n },\n },\n variants: {\n active: {\n true: {\n backgroundColor: '$color8',\n },\n },\n enter: {\n true: {\n opacity: 0,\n },\n },\n exit: {\n true: {\n opacity: 0,\n },\n },\n },\n },\n defaultVariants: {\n position: 'absolute',\n backgroundColor: '$color5',\n opacity: 1,\n animation: '100ms',\n },\n})\n\nconst AnimatedYStack = styled(YStack, {\n variants: {\n isTop: { true: { y: -25, opacity: 0 } },\n isBottom: { true: { y: 25, opacity: 0 } },\n } as const,\n})\n\nconst UnderlineTabs = () => {\n const [currentTab, setCurrentTab] = useState('tab1')\n const [focusIndicatorLayout, setFocusIndicatorLayout] =\n useState<TabTriggerLayout | null>(null)\n const [hoverIndicatorLayout, setHoverIndicatorLayout] =\n useState<TabTriggerLayout | null>(null)\n const [selectionIndicatorLayout, setSelectionIndicatorLayout] =\n useState<TabTriggerLayout | null>(null)\n const prevSelectionIndicatorLayout = useRef<TabTriggerLayout | null>(null)\n const handleUpdateSelectionIndicator = (newSize: TabTriggerLayout | null) => {\n prevSelectionIndicatorLayout.current = selectionIndicatorLayout\n setSelectionIndicatorLayout(newSize)\n }\n\n const intentIndicatorLayout = hoverIndicatorLayout || focusIndicatorLayout\n\n /**\n * -1: from top\n * 0: n/a\n * 1: from bottom\n */\n const direction = useMemo(() => {\n if (\n !selectionIndicatorLayout ||\n !prevSelectionIndicatorLayout.current ||\n selectionIndicatorLayout.y === prevSelectionIndicatorLayout.current.y\n ) {\n return 0\n }\n return selectionIndicatorLayout.y > prevSelectionIndicatorLayout.current.y ? 1 : -1\n }, [selectionIndicatorLayout])\n\n const enterVariant =\n direction === 1 ? 'isTop' : direction === -1 ? 'isBottom' : undefined\n const exitVariant =\n direction === 1 ? 'isBottom' : direction === -1 ? 'isTop' : undefined\n\n return (\n <Tabs\n value={currentTab}\n onValueChange={setCurrentTab}\n orientation=\"vertical\"\n width={300}\n br=\"$4\"\n ai=\"center\"\n activationMode=\"manual\"\n >\n <YStack borderColor=\"$color3\" borderRightWidth=\"$0.5\" mr=\"$2\">\n <Tabs.List loop={false} aria-label=\"Manage your account\" disablePassBorderRadius>\n {intentIndicatorLayout && (\n <TabsRovingIndicator\n width=\"$0.5\"\n height={intentIndicatorLayout.height}\n x={intentIndicatorLayout.x}\n y={intentIndicatorLayout.y}\n right={0}\n />\n )}\n {selectionIndicatorLayout && (\n <TabsRovingIndicator\n theme=\"active\"\n active\n width=\"$0.5\"\n height={selectionIndicatorLayout.height}\n x={selectionIndicatorLayout.x}\n y={selectionIndicatorLayout.y}\n right={0}\n />\n )}\n <Tabs.Trigger\n unstyled\n color=\"$color12\"\n value=\"tab1\"\n onSelectedLayoutChange={handleUpdateSelectionIndicator}\n onHoveredLayoutChange={setHoverIndicatorLayout}\n onFocusedLayoutChange={setFocusIndicatorLayout}\n >\n Profile\n </Tabs.Trigger>\n <Tabs.Trigger\n unstyled\n color=\"$color12\"\n value=\"tab2\"\n onSelectedLayoutChange={handleUpdateSelectionIndicator}\n onHoveredLayoutChange={setHoverIndicatorLayout}\n onFocusedLayoutChange={setFocusIndicatorLayout}\n >\n Connections\n </Tabs.Trigger>\n <Tabs.Trigger\n unstyled\n color=\"$color12\"\n value=\"tab3\"\n onSelectedLayoutChange={handleUpdateSelectionIndicator}\n onHoveredLayoutChange={setHoverIndicatorLayout}\n onFocusedLayoutChange={setFocusIndicatorLayout}\n >\n Notifications\n </Tabs.Trigger>\n </Tabs.List>\n </YStack>\n <AnimatePresence\n exitBeforeEnter\n enterVariant={enterVariant}\n exitVariant={exitVariant}\n >\n <AnimatedYStack key={currentTab} animation=\"100ms\" y={0} o={1}>\n <Tabs.Content value={currentTab} forceMount p=\"$2\">\n <H5 ta=\"center\">{currentTab}</H5>\n </Tabs.Content>\n </AnimatedYStack>\n </AnimatePresence>\n </Tabs>\n )\n}\n"],
5
- "mappings": "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",
6
- "names": []
7
- }
@@ -1,160 +0,0 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
2
- import { useMemo, useRef, useState } from "react";
3
- import {
4
- AnimatePresence,
5
- H5,
6
- Stack,
7
- Tabs,
8
- XStack,
9
- YStack,
10
- styled
11
- } from "tamagui";
12
- function TabsUnderlinedDemo() {
13
- return /* @__PURE__ */ jsx(XStack, { maxHeight: "100%", maxWidth: "100%", justifyContent: "flex-start", px: "$4", children: /* @__PURE__ */ jsx(UnderlineTabs, {}) });
14
- }
15
- const TabsRovingIndicator = styled(Stack, {
16
- name: "TabsRovingIndicator",
17
- variants: {
18
- active: {
19
- true: {
20
- backgroundColor: "$color8"
21
- }
22
- },
23
- variants: {
24
- active: {
25
- true: {
26
- backgroundColor: "$color8"
27
- }
28
- },
29
- enter: {
30
- true: {
31
- opacity: 0
32
- }
33
- },
34
- exit: {
35
- true: {
36
- opacity: 0
37
- }
38
- }
39
- }
40
- },
41
- defaultVariants: {
42
- position: "absolute",
43
- backgroundColor: "$color5",
44
- opacity: 1,
45
- animation: "100ms"
46
- }
47
- });
48
- const AnimatedYStack = styled(YStack, {
49
- variants: {
50
- isTop: { true: { y: -25, opacity: 0 } },
51
- isBottom: { true: { y: 25, opacity: 0 } }
52
- }
53
- });
54
- const UnderlineTabs = () => {
55
- const [currentTab, setCurrentTab] = useState("tab1");
56
- const [focusIndicatorLayout, setFocusIndicatorLayout] = useState(null);
57
- const [hoverIndicatorLayout, setHoverIndicatorLayout] = useState(null);
58
- const [selectionIndicatorLayout, setSelectionIndicatorLayout] = useState(null);
59
- const prevSelectionIndicatorLayout = useRef(null);
60
- const handleUpdateSelectionIndicator = (newSize) => {
61
- prevSelectionIndicatorLayout.current = selectionIndicatorLayout;
62
- setSelectionIndicatorLayout(newSize);
63
- };
64
- const intentIndicatorLayout = hoverIndicatorLayout || focusIndicatorLayout;
65
- const direction = useMemo(() => {
66
- if (!selectionIndicatorLayout || !prevSelectionIndicatorLayout.current || selectionIndicatorLayout.y === prevSelectionIndicatorLayout.current.y) {
67
- return 0;
68
- }
69
- return selectionIndicatorLayout.y > prevSelectionIndicatorLayout.current.y ? 1 : -1;
70
- }, [selectionIndicatorLayout]);
71
- const enterVariant = direction === 1 ? "isTop" : direction === -1 ? "isBottom" : void 0;
72
- const exitVariant = direction === 1 ? "isBottom" : direction === -1 ? "isTop" : void 0;
73
- return /* @__PURE__ */ jsxs(
74
- Tabs,
75
- {
76
- value: currentTab,
77
- onValueChange: setCurrentTab,
78
- orientation: "vertical",
79
- width: 300,
80
- br: "$4",
81
- ai: "center",
82
- activationMode: "manual",
83
- children: [
84
- /* @__PURE__ */ jsx(YStack, { borderColor: "$color3", borderRightWidth: "$0.5", mr: "$2", children: /* @__PURE__ */ jsxs(Tabs.List, { loop: false, "aria-label": "Manage your account", disablePassBorderRadius: true, children: [
85
- intentIndicatorLayout && /* @__PURE__ */ jsx(
86
- TabsRovingIndicator,
87
- {
88
- width: "$0.5",
89
- height: intentIndicatorLayout.height,
90
- x: intentIndicatorLayout.x,
91
- y: intentIndicatorLayout.y,
92
- right: 0
93
- }
94
- ),
95
- selectionIndicatorLayout && /* @__PURE__ */ jsx(
96
- TabsRovingIndicator,
97
- {
98
- theme: "active",
99
- active: true,
100
- width: "$0.5",
101
- height: selectionIndicatorLayout.height,
102
- x: selectionIndicatorLayout.x,
103
- y: selectionIndicatorLayout.y,
104
- right: 0
105
- }
106
- ),
107
- /* @__PURE__ */ jsx(
108
- Tabs.Trigger,
109
- {
110
- unstyled: true,
111
- color: "$color12",
112
- value: "tab1",
113
- onSelectedLayoutChange: handleUpdateSelectionIndicator,
114
- onHoveredLayoutChange: setHoverIndicatorLayout,
115
- onFocusedLayoutChange: setFocusIndicatorLayout,
116
- children: "Profile"
117
- }
118
- ),
119
- /* @__PURE__ */ jsx(
120
- Tabs.Trigger,
121
- {
122
- unstyled: true,
123
- color: "$color12",
124
- value: "tab2",
125
- onSelectedLayoutChange: handleUpdateSelectionIndicator,
126
- onHoveredLayoutChange: setHoverIndicatorLayout,
127
- onFocusedLayoutChange: setFocusIndicatorLayout,
128
- children: "Connections"
129
- }
130
- ),
131
- /* @__PURE__ */ jsx(
132
- Tabs.Trigger,
133
- {
134
- unstyled: true,
135
- color: "$color12",
136
- value: "tab3",
137
- onSelectedLayoutChange: handleUpdateSelectionIndicator,
138
- onHoveredLayoutChange: setHoverIndicatorLayout,
139
- onFocusedLayoutChange: setFocusIndicatorLayout,
140
- children: "Notifications"
141
- }
142
- )
143
- ] }) }),
144
- /* @__PURE__ */ jsx(
145
- AnimatePresence,
146
- {
147
- exitBeforeEnter: true,
148
- enterVariant,
149
- exitVariant,
150
- children: /* @__PURE__ */ jsx(AnimatedYStack, { animation: "100ms", y: 0, o: 1, children: /* @__PURE__ */ jsx(Tabs.Content, { value: currentTab, forceMount: true, p: "$2", children: /* @__PURE__ */ jsx(H5, { ta: "center", children: currentTab }) }) }, currentTab)
151
- }
152
- )
153
- ]
154
- }
155
- );
156
- };
157
- export {
158
- TabsUnderlinedDemo
159
- };
160
- //# sourceMappingURL=TabsUnderlinedDemo.mjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/TabsUnderlinedDemo.tsx"],
4
- "sourcesContent": ["import { useMemo, useRef, useState } from 'react'\nimport {\n AnimatePresence,\n H5,\n Stack,\n TabTriggerLayout,\n Tabs,\n XStack,\n YStack,\n styled,\n} from 'tamagui'\n\nexport function TabsUnderlinedDemo() {\n return (\n <XStack maxHeight=\"100%\" maxWidth=\"100%\" justifyContent=\"flex-start\" px=\"$4\">\n <UnderlineTabs />\n </XStack>\n )\n}\n\nconst TabsRovingIndicator = styled(Stack, {\n name: 'TabsRovingIndicator',\n variants: {\n active: {\n true: {\n backgroundColor: '$color8',\n },\n },\n variants: {\n active: {\n true: {\n backgroundColor: '$color8',\n },\n },\n enter: {\n true: {\n opacity: 0,\n },\n },\n exit: {\n true: {\n opacity: 0,\n },\n },\n },\n },\n defaultVariants: {\n position: 'absolute',\n backgroundColor: '$color5',\n opacity: 1,\n animation: '100ms',\n },\n})\n\nconst AnimatedYStack = styled(YStack, {\n variants: {\n isTop: { true: { y: -25, opacity: 0 } },\n isBottom: { true: { y: 25, opacity: 0 } },\n } as const,\n})\n\nconst UnderlineTabs = () => {\n const [currentTab, setCurrentTab] = useState('tab1')\n const [focusIndicatorLayout, setFocusIndicatorLayout] =\n useState<TabTriggerLayout | null>(null)\n const [hoverIndicatorLayout, setHoverIndicatorLayout] =\n useState<TabTriggerLayout | null>(null)\n const [selectionIndicatorLayout, setSelectionIndicatorLayout] =\n useState<TabTriggerLayout | null>(null)\n const prevSelectionIndicatorLayout = useRef<TabTriggerLayout | null>(null)\n const handleUpdateSelectionIndicator = (newSize: TabTriggerLayout | null) => {\n prevSelectionIndicatorLayout.current = selectionIndicatorLayout\n setSelectionIndicatorLayout(newSize)\n }\n\n const intentIndicatorLayout = hoverIndicatorLayout || focusIndicatorLayout\n\n /**\n * -1: from top\n * 0: n/a\n * 1: from bottom\n */\n const direction = useMemo(() => {\n if (\n !selectionIndicatorLayout ||\n !prevSelectionIndicatorLayout.current ||\n selectionIndicatorLayout.y === prevSelectionIndicatorLayout.current.y\n ) {\n return 0\n }\n return selectionIndicatorLayout.y > prevSelectionIndicatorLayout.current.y ? 1 : -1\n }, [selectionIndicatorLayout])\n\n const enterVariant =\n direction === 1 ? 'isTop' : direction === -1 ? 'isBottom' : undefined\n const exitVariant =\n direction === 1 ? 'isBottom' : direction === -1 ? 'isTop' : undefined\n\n return (\n <Tabs\n value={currentTab}\n onValueChange={setCurrentTab}\n orientation=\"vertical\"\n width={300}\n br=\"$4\"\n ai=\"center\"\n activationMode=\"manual\"\n >\n <YStack borderColor=\"$color3\" borderRightWidth=\"$0.5\" mr=\"$2\">\n <Tabs.List loop={false} aria-label=\"Manage your account\" disablePassBorderRadius>\n {intentIndicatorLayout && (\n <TabsRovingIndicator\n width=\"$0.5\"\n height={intentIndicatorLayout.height}\n x={intentIndicatorLayout.x}\n y={intentIndicatorLayout.y}\n right={0}\n />\n )}\n {selectionIndicatorLayout && (\n <TabsRovingIndicator\n theme=\"active\"\n active\n width=\"$0.5\"\n height={selectionIndicatorLayout.height}\n x={selectionIndicatorLayout.x}\n y={selectionIndicatorLayout.y}\n right={0}\n />\n )}\n <Tabs.Trigger\n unstyled\n color=\"$color12\"\n value=\"tab1\"\n onSelectedLayoutChange={handleUpdateSelectionIndicator}\n onHoveredLayoutChange={setHoverIndicatorLayout}\n onFocusedLayoutChange={setFocusIndicatorLayout}\n >\n Profile\n </Tabs.Trigger>\n <Tabs.Trigger\n unstyled\n color=\"$color12\"\n value=\"tab2\"\n onSelectedLayoutChange={handleUpdateSelectionIndicator}\n onHoveredLayoutChange={setHoverIndicatorLayout}\n onFocusedLayoutChange={setFocusIndicatorLayout}\n >\n Connections\n </Tabs.Trigger>\n <Tabs.Trigger\n unstyled\n color=\"$color12\"\n value=\"tab3\"\n onSelectedLayoutChange={handleUpdateSelectionIndicator}\n onHoveredLayoutChange={setHoverIndicatorLayout}\n onFocusedLayoutChange={setFocusIndicatorLayout}\n >\n Notifications\n </Tabs.Trigger>\n </Tabs.List>\n </YStack>\n <AnimatePresence\n exitBeforeEnter\n enterVariant={enterVariant}\n exitVariant={exitVariant}\n >\n <AnimatedYStack key={currentTab} animation=\"100ms\" y={0} o={1}>\n <Tabs.Content value={currentTab} forceMount p=\"$2\">\n <H5 ta=\"center\">{currentTab}</H5>\n </Tabs.Content>\n </AnimatedYStack>\n </AnimatePresence>\n </Tabs>\n )\n}\n"],
5
- "mappings": "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",
6
- "names": []
7
- }
@@ -1,96 +0,0 @@
1
- import React, { forwardRef } from "react";
2
- import { XStack, YStack } from "tamagui";
3
- const tints = ["red", "orange", "yellow", "green", "blue", "purple", "pink"];
4
- const logoColors = tints.map((t) => `var(--${t}9)`);
5
- const TamaguiLogo = forwardRef(({
6
- showWords,
7
- color,
8
- downscale,
9
- onHoverLetter,
10
- ...props
11
- }, ref) => /* @__PURE__ */ React.createElement(XStack, {
12
- ref,
13
- ai: "center",
14
- jc: "center",
15
- space: "$5",
16
- ...props
17
- }, /* @__PURE__ */ React.createElement(LogoIcon, {
18
- downscale: (downscale ?? 1) * (showWords ? 2 : 1.5),
19
- color
20
- }), showWords && /* @__PURE__ */ React.createElement(YStack, {
21
- mb: -4
22
- }, /* @__PURE__ */ React.createElement(LogoWords, {
23
- onHoverLetter,
24
- downscale: downscale ?? 2,
25
- color
26
- }))));
27
- const LogoWords = ({
28
- color,
29
- downscale = 1,
30
- onHoverLetter
31
- }) => {
32
- return /* @__PURE__ */ React.createElement("svg", {
33
- width: 373 * (1 / downscale) * 0.333333334,
34
- height: 41 * (1 / downscale) * 0.333333334,
35
- viewBox: "0 0 373 41"
36
- }, /* @__PURE__ */ React.createElement("polygon", {
37
- shapeRendering: "crispEdges",
38
- fill: color || logoColors[0],
39
- points: "24.3870968 40.1612903 24.3870968 8.67741935 32.2580645 8.67741935 32.2580645 0.806451613 0.774193548 0.806451613 0.774193548 8.67741935 8.64516129 8.67741935 8.64516129 40.1612903",
40
- onMouseEnter: onHoverLetter ? () => onHoverLetter(0) : void 0
41
- }), /* @__PURE__ */ React.createElement("path", {
42
- shapeRendering: "crispEdges",
43
- fill: color || logoColors[1],
44
- d: "M87.3548387,0.806451613 L87.3548387,8.67741935 L95.2258065,8.67741935 L95.2258065,40.1612903 L79.483871,40.1612903 L79.483871,24.4193548 L71.6129032,24.4193548 L71.6129032,40.1612903 L55.8709677,40.1612903 L55.8709677,8.67741935 L63.7419355,8.67741935 L63.7419355,0.806451613 L87.3548387,0.806451613 Z M79.483871,8.67741935 L71.6129032,8.67741935 L71.6129032,16.5483871 L79.483871,16.5483871 L79.483871,8.67741935 Z",
45
- fillRule: "nonzero",
46
- onMouseEnter: onHoverLetter ? () => onHoverLetter(1) : void 0
47
- }), /* @__PURE__ */ React.createElement("polygon", {
48
- shapeRendering: "crispEdges",
49
- fill: color || logoColors[2],
50
- points: "130.645161 40.1612903 130.645161 22.4516129 138.516129 22.4516129 138.516129 40.1612903 154.258065 40.1612903 154.258065 0.806451613 142.451613 0.806451613 142.451613 8.67741935 126.709677 8.67741935 126.709677 0.806451613 114.903226 0.806451613 114.903226 40.1612903",
51
- onMouseEnter: onHoverLetter ? () => onHoverLetter(2) : void 0
52
- }), /* @__PURE__ */ React.createElement("path", {
53
- fill: color || logoColors[3],
54
- d: "M205.419355,0.806451613 L205.419355,8.67741935 L213.290323,8.67741935 L213.290323,40.1612903 L197.548387,40.1612903 L197.548387,24.4193548 L189.677419,24.4193548 L189.677419,40.1612903 L173.935484,40.1612903 L173.935484,8.67741935 L181.806452,8.67741935 L181.806452,0.806451613 L205.419355,0.806451613 Z M197.548387,8.67741935 L189.677419,8.67741935 L189.677419,16.5483871 L197.548387,16.5483871 L197.548387,8.67741935 Z",
55
- fillRule: "nonzero",
56
- onMouseEnter: onHoverLetter ? () => onHoverLetter(3) : void 0
57
- }), /* @__PURE__ */ React.createElement("polygon", {
58
- shapeRendering: "crispEdges",
59
- fill: color || logoColors[4],
60
- points: "264.451613 40.1612903 264.451613 32.2903226 272.322581 32.2903226 272.322581 16.5483871 256.580645 16.5483871 256.580645 32.2903226 248.709677 32.2903226 248.709677 8.67741935 272.322581 8.67741935 272.322581 0.806451613 240.83871 0.806451613 240.83871 8.67741935 232.967742 8.67741935 232.967742 32.2903226 240.83871 32.2903226 240.83871 40.1612903",
61
- onMouseEnter: onHoverLetter ? () => onHoverLetter(4) : void 0
62
- }), /* @__PURE__ */ React.createElement("polygon", {
63
- shapeRendering: "crispEdges",
64
- fill: color || logoColors[5],
65
- points: "323.483871 40.1612903 323.483871 32.2903226 331.354839 32.2903226 331.354839 0.806451613 315.612903 0.806451613 315.612903 32.2903226 307.741935 32.2903226 307.741935 0.806451613 292 0.806451613 292 32.2903226 299.870968 32.2903226 299.870968 40.1612903",
66
- onMouseEnter: onHoverLetter ? () => onHoverLetter(5) : void 0
67
- }), /* @__PURE__ */ React.createElement("polygon", {
68
- shapeRendering: "crispEdges",
69
- fill: color || logoColors[6],
70
- points: "372.677419 40.1612903 372.677419 0.806451613 356.935484 0.806451613 356.935484 40.1612903",
71
- onMouseEnter: onHoverLetter ? () => onHoverLetter(6) : void 0
72
- }));
73
- };
74
- const LogoIcon = ({ downscale = 2 }) => {
75
- return /* @__PURE__ */ React.createElement(YStack, {
76
- className: "unselectable",
77
- als: "center",
78
- marginVertical: -10,
79
- pressStyle: {
80
- opacity: 0.7
81
- }
82
- }, /* @__PURE__ */ React.createElement("img", {
83
- className: "tamagui-icon",
84
- width: 450 / 8 / downscale,
85
- height: 420 / 8 / downscale,
86
- src: "/tamagui-icon.svg"
87
- }));
88
- };
89
- export {
90
- LogoIcon,
91
- LogoWords,
92
- TamaguiLogo,
93
- logoColors,
94
- tints
95
- };
96
- //# sourceMappingURL=TamaguiLogo.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/TamaguiLogo.tsx"],
4
- "sourcesContent": ["import React, { forwardRef } from 'react'\nimport { ThemeName, XStack, XStackProps, YStack } from 'tamagui'\n\nexport const tints: ThemeName[] = ['red', 'orange', 'yellow', 'green', 'blue', 'purple', 'pink']\n\nexport const logoColors = tints.map((t) => `var(--${t}9)`)\n\nexport const TamaguiLogo = forwardRef(\n (\n {\n showWords,\n color,\n downscale,\n onHoverLetter,\n ...props\n }: {\n onHoverLetter?: (i: number) => void\n showWords?: boolean\n color?: string\n downscale?: number\n } & XStackProps,\n ref\n ) => (\n <XStack ref={ref} ai=\"center\" jc=\"center\" space=\"$5\" {...props}>\n <LogoIcon downscale={(downscale ?? 1) * (showWords ? 2 : 1.5)} color={color} />\n {showWords && (\n <YStack mb={-4}>\n <LogoWords onHoverLetter={onHoverLetter} downscale={downscale ?? 2} color={color} />\n </YStack>\n )}\n </XStack>\n )\n)\n\nexport const LogoWords = ({\n color,\n downscale = 1,\n onHoverLetter,\n}: {\n color?: string\n downscale?: number\n onHoverLetter?: any\n}) => {\n return (\n <svg\n width={373 * (1 / downscale) * 0.333333334}\n height={41 * (1 / downscale) * 0.333333334}\n viewBox=\"0 0 373 41\"\n >\n <polygon\n shapeRendering=\"crispEdges\"\n fill={color || logoColors[0]}\n points=\"24.3870968 40.1612903 24.3870968 8.67741935 32.2580645 8.67741935 32.2580645 0.806451613 0.774193548 0.806451613 0.774193548 8.67741935 8.64516129 8.67741935 8.64516129 40.1612903\"\n onMouseEnter={onHoverLetter ? () => onHoverLetter(0) : undefined}\n />\n <path\n shapeRendering=\"crispEdges\"\n fill={color || logoColors[1]}\n d=\"M87.3548387,0.806451613 L87.3548387,8.67741935 L95.2258065,8.67741935 L95.2258065,40.1612903 L79.483871,40.1612903 L79.483871,24.4193548 L71.6129032,24.4193548 L71.6129032,40.1612903 L55.8709677,40.1612903 L55.8709677,8.67741935 L63.7419355,8.67741935 L63.7419355,0.806451613 L87.3548387,0.806451613 Z M79.483871,8.67741935 L71.6129032,8.67741935 L71.6129032,16.5483871 L79.483871,16.5483871 L79.483871,8.67741935 Z\"\n fillRule=\"nonzero\"\n onMouseEnter={onHoverLetter ? () => onHoverLetter(1) : undefined}\n />\n <polygon\n shapeRendering=\"crispEdges\"\n fill={color || logoColors[2]}\n points=\"130.645161 40.1612903 130.645161 22.4516129 138.516129 22.4516129 138.516129 40.1612903 154.258065 40.1612903 154.258065 0.806451613 142.451613 0.806451613 142.451613 8.67741935 126.709677 8.67741935 126.709677 0.806451613 114.903226 0.806451613 114.903226 40.1612903\"\n onMouseEnter={onHoverLetter ? () => onHoverLetter(2) : undefined}\n />\n <path\n fill={color || logoColors[3]}\n d=\"M205.419355,0.806451613 L205.419355,8.67741935 L213.290323,8.67741935 L213.290323,40.1612903 L197.548387,40.1612903 L197.548387,24.4193548 L189.677419,24.4193548 L189.677419,40.1612903 L173.935484,40.1612903 L173.935484,8.67741935 L181.806452,8.67741935 L181.806452,0.806451613 L205.419355,0.806451613 Z M197.548387,8.67741935 L189.677419,8.67741935 L189.677419,16.5483871 L197.548387,16.5483871 L197.548387,8.67741935 Z\"\n fillRule=\"nonzero\"\n onMouseEnter={onHoverLetter ? () => onHoverLetter(3) : undefined}\n />\n <polygon\n shapeRendering=\"crispEdges\"\n fill={color || logoColors[4]}\n points=\"264.451613 40.1612903 264.451613 32.2903226 272.322581 32.2903226 272.322581 16.5483871 256.580645 16.5483871 256.580645 32.2903226 248.709677 32.2903226 248.709677 8.67741935 272.322581 8.67741935 272.322581 0.806451613 240.83871 0.806451613 240.83871 8.67741935 232.967742 8.67741935 232.967742 32.2903226 240.83871 32.2903226 240.83871 40.1612903\"\n onMouseEnter={onHoverLetter ? () => onHoverLetter(4) : undefined}\n />\n <polygon\n shapeRendering=\"crispEdges\"\n fill={color || logoColors[5]}\n points=\"323.483871 40.1612903 323.483871 32.2903226 331.354839 32.2903226 331.354839 0.806451613 315.612903 0.806451613 315.612903 32.2903226 307.741935 32.2903226 307.741935 0.806451613 292 0.806451613 292 32.2903226 299.870968 32.2903226 299.870968 40.1612903\"\n onMouseEnter={onHoverLetter ? () => onHoverLetter(5) : undefined}\n />\n <polygon\n shapeRendering=\"crispEdges\"\n fill={color || logoColors[6]}\n points=\"372.677419 40.1612903 372.677419 0.806451613 356.935484 0.806451613 356.935484 40.1612903\"\n onMouseEnter={onHoverLetter ? () => onHoverLetter(6) : undefined}\n />\n </svg>\n )\n}\n\nexport const LogoIcon = ({ downscale = 2 }: any) => {\n return (\n <YStack\n className=\"unselectable\"\n als=\"center\"\n marginVertical={-10}\n pressStyle={{\n opacity: 0.7,\n }}\n >\n <img\n className=\"tamagui-icon\"\n width={450 / 8 / downscale}\n height={420 / 8 / downscale}\n src=\"/tamagui-icon.svg\"\n />\n </YStack>\n )\n}\n"],
5
- "mappings": "AAAA;AACA;AAEO,MAAM,QAAqB,CAAC,OAAO,UAAU,UAAU,SAAS,QAAQ,UAAU,MAAM;AAExF,MAAM,aAAa,MAAM,IAAI,CAAC,MAAM,SAAS,KAAK;AAElD,MAAM,cAAc,WACzB,CACE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,KACG;AAAA,GAOL,QAEA,oCAAC;AAAA,EAAO;AAAA,EAAU,IAAG;AAAA,EAAS,IAAG;AAAA,EAAS,OAAM;AAAA,EAAM,GAAG;AAAA,GACvD,oCAAC;AAAA,EAAS,WAAY,cAAa,KAAM,aAAY,IAAI;AAAA,EAAM;AAAA,CAAc,GAC5E,aACC,oCAAC;AAAA,EAAO,IAAI;AAAA,GACV,oCAAC;AAAA,EAAU;AAAA,EAA8B,WAAW,aAAa;AAAA,EAAG;AAAA,CAAc,CACpF,CAEJ,CAEJ;AAEO,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,MAKI;AACJ,SACE,oCAAC;AAAA,IACC,OAAO,MAAO,KAAI,aAAa;AAAA,IAC/B,QAAQ,KAAM,KAAI,aAAa;AAAA,IAC/B,SAAQ;AAAA,KAER,oCAAC;AAAA,IACC,gBAAe;AAAA,IACf,MAAM,SAAS,WAAW;AAAA,IAC1B,QAAO;AAAA,IACP,cAAc,gBAAgB,MAAM,cAAc,CAAC,IAAI;AAAA,GACzD,GACA,oCAAC;AAAA,IACC,gBAAe;AAAA,IACf,MAAM,SAAS,WAAW;AAAA,IAC1B,GAAE;AAAA,IACF,UAAS;AAAA,IACT,cAAc,gBAAgB,MAAM,cAAc,CAAC,IAAI;AAAA,GACzD,GACA,oCAAC;AAAA,IACC,gBAAe;AAAA,IACf,MAAM,SAAS,WAAW;AAAA,IAC1B,QAAO;AAAA,IACP,cAAc,gBAAgB,MAAM,cAAc,CAAC,IAAI;AAAA,GACzD,GACA,oCAAC;AAAA,IACC,MAAM,SAAS,WAAW;AAAA,IAC1B,GAAE;AAAA,IACF,UAAS;AAAA,IACT,cAAc,gBAAgB,MAAM,cAAc,CAAC,IAAI;AAAA,GACzD,GACA,oCAAC;AAAA,IACC,gBAAe;AAAA,IACf,MAAM,SAAS,WAAW;AAAA,IAC1B,QAAO;AAAA,IACP,cAAc,gBAAgB,MAAM,cAAc,CAAC,IAAI;AAAA,GACzD,GACA,oCAAC;AAAA,IACC,gBAAe;AAAA,IACf,MAAM,SAAS,WAAW;AAAA,IAC1B,QAAO;AAAA,IACP,cAAc,gBAAgB,MAAM,cAAc,CAAC,IAAI;AAAA,GACzD,GACA,oCAAC;AAAA,IACC,gBAAe;AAAA,IACf,MAAM,SAAS,WAAW;AAAA,IAC1B,QAAO;AAAA,IACP,cAAc,gBAAgB,MAAM,cAAc,CAAC,IAAI;AAAA,GACzD,CACF;AAEJ;AAEO,MAAM,WAAW,CAAC,EAAE,YAAY,QAAa;AAClD,SACE,oCAAC;AAAA,IACC,WAAU;AAAA,IACV,KAAI;AAAA,IACJ,gBAAgB;AAAA,IAChB,YAAY;AAAA,MACV,SAAS;AAAA,IACX;AAAA,KAEA,oCAAC;AAAA,IACC,WAAU;AAAA,IACV,OAAO,MAAM,IAAI;AAAA,IACjB,QAAQ,MAAM,IAAI;AAAA,IAClB,KAAI;AAAA,GACN,CACF;AAEJ;",
6
- "names": []
7
- }
@@ -1 +0,0 @@
1
- //# sourceMappingURL=zstack.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": [],
4
- "sourcesContent": [],
5
- "mappings": "",
6
- "names": []
7
- }
@@ -1,24 +0,0 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
2
- import { Separator, ZStack } from "tamagui";
3
- const Crosshairs = () => {
4
- return /* @__PURE__ */ jsxs(ZStack, {
5
- ai: "center",
6
- jc: "center",
7
- bc: "green",
8
- fullscreen: true,
9
- zi: 1e11,
10
- children: [
11
- /* @__PURE__ */ jsx(Separator, {
12
- borderColor: "red"
13
- }),
14
- /* @__PURE__ */ jsx(Separator, {
15
- vertical: true,
16
- borderColor: "red"
17
- })
18
- ]
19
- });
20
- };
21
- export {
22
- Crosshairs
23
- };
24
- //# sourceMappingURL=zstack.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/snapshots/zstack.tsx"],
4
- "sourcesContent": ["import { Separator, ZStack } from 'tamagui'\n\nexport const Crosshairs = () => {\n return (\n <ZStack ai=\"center\" jc=\"center\" bc=\"green\" fullscreen zi={100000000000}>\n <Separator borderColor=\"red\" />\n <Separator vertical borderColor=\"red\" />\n </ZStack>\n )\n}\n"],
5
- "mappings": "AAII,SACE,KADF;AAJJ,SAAS,WAAW,cAAc;AAE3B,MAAM,aAAa,MAAM;AAC9B,SACE,qBAAC;AAAA,IAAO,IAAG;AAAA,IAAS,IAAG;AAAA,IAAS,IAAG;AAAA,IAAQ,YAAU;AAAA,IAAC,IAAI;AAAA,IACxD;AAAA,0BAAC;AAAA,QAAU,aAAY;AAAA,OAAM;AAAA,MAC7B,oBAAC;AAAA,QAAU,UAAQ;AAAA,QAAC,aAAY;AAAA,OAAM;AAAA;AAAA,GACxC;AAEJ;",
6
- "names": []
7
- }
@@ -1,24 +0,0 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
2
- import { Separator, ZStack } from "tamagui";
3
- const Crosshairs = () => {
4
- return /* @__PURE__ */ jsxs(ZStack, {
5
- ai: "center",
6
- jc: "center",
7
- bc: "green",
8
- fullscreen: true,
9
- zi: 1e11,
10
- children: [
11
- /* @__PURE__ */ jsx(Separator, {
12
- borderColor: "red"
13
- }),
14
- /* @__PURE__ */ jsx(Separator, {
15
- vertical: true,
16
- borderColor: "red"
17
- })
18
- ]
19
- });
20
- };
21
- export {
22
- Crosshairs
23
- };
24
- //# sourceMappingURL=zstack.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/tests/zstack.tsx"],
4
- "sourcesContent": ["import { Separator, ZStack } from 'tamagui'\n\nexport const Crosshairs = () => {\n return (\n <ZStack ai=\"center\" jc=\"center\" bc=\"green\" fullscreen zi={100000000000}>\n <Separator borderColor=\"red\" />\n <Separator vertical borderColor=\"red\" />\n </ZStack>\n )\n}\n"],
5
- "mappings": "AAII,SACE,KADF;AAJJ,SAAS,WAAW,cAAc;AAE3B,MAAM,aAAa,MAAM;AAC9B,SACE,qBAAC;AAAA,IAAO,IAAG;AAAA,IAAS,IAAG;AAAA,IAAS,IAAG;AAAA,IAAQ,YAAU;AAAA,IAAC,IAAI;AAAA,IACxD;AAAA,0BAAC;AAAA,QAAU,aAAY;AAAA,OAAM;AAAA,MAC7B,oBAAC;AAAA,QAAU,UAAQ;AAAA,QAAC,aAAY;AAAA,OAAM;AAAA;AAAA,GACxC;AAEJ;",
6
- "names": []
7
- }
@@ -1,17 +0,0 @@
1
- import { Accordion, Paragraph } from "tamagui";
2
- function AccordionDemo() {
3
- return <Accordion orientation="horizontal" width="$20" type="multiple">
4
- <Accordion.Item value="a1">
5
- <Accordion.Trigger><Paragraph>1. Take a cold shower</Paragraph></Accordion.Trigger>
6
- <Accordion.Content><Paragraph>Cold showers can help reduce inflammation, relieve pain, improve circulation, lower stress levels, and reduce muscle soreness and fatigue.</Paragraph></Accordion.Content>
7
- </Accordion.Item>
8
- <Accordion.Item value="a2">
9
- <Accordion.Trigger><Paragraph>2: Eat 4 eggs</Paragraph></Accordion.Trigger>
10
- <Accordion.Content><Paragraph>{"Eggs have been a dietary staple since time immemorial and there\u2019s good reason for their continued presence in our menus and meals."}</Paragraph></Accordion.Content>
11
- </Accordion.Item>
12
- </Accordion>;
13
- }
14
- export {
15
- AccordionDemo
16
- };
17
- //# sourceMappingURL=AccordionDemo.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/AccordionDemo.tsx"],
4
- "sourcesContent": ["import { Accordion, Paragraph } from 'tamagui'\n\nexport function AccordionDemo() {\n return (\n <Accordion orientation=\"horizontal\" width=\"$20\" type=\"multiple\">\n <Accordion.Item value=\"a1\">\n <Accordion.Trigger>\n <Paragraph>1. Take a cold shower</Paragraph>\n </Accordion.Trigger>\n <Accordion.Content>\n <Paragraph>\n Cold showers can help reduce inflammation, relieve pain, improve circulation,\n lower stress levels, and reduce muscle soreness and fatigue.\n </Paragraph>\n </Accordion.Content>\n </Accordion.Item>\n\n <Accordion.Item value=\"a2\">\n <Accordion.Trigger>\n <Paragraph>2: Eat 4 eggs</Paragraph>\n </Accordion.Trigger>\n <Accordion.Content>\n <Paragraph>\n Eggs have been a dietary staple since time immemorial and there\u2019s good reason\n for their continued presence in our menus and meals.\n </Paragraph>\n </Accordion.Content>\n </Accordion.Item>\n </Accordion>\n )\n}\n"],
5
- "mappings": "AAAA,SAAS,WAAW,iBAAiB;AAE9B,SAAS,gBAAgB;AAC9B,SACE,CAAC,UAAU,YAAY,aAAa,MAAM,MAAM,KAAK;AAAA,IACnD,CAAC,UAAU,KAAK,MAAM;AAAA,MACpB,CAAC,UAAU,QACT,CAAC,UAAU,qBAAqB,EAA/B,UACH,EAFC,UAAU;AAAA,MAGX,CAAC,UAAU,QACT,CAAC,UAAU,0IAGX,EAHC,UAIH,EALC,UAAU;AAAA,IAMb,EAVC,UAAU;AAAA,IAYX,CAAC,UAAU,KAAK,MAAM;AAAA,MACpB,CAAC,UAAU,QACT,CAAC,UAAU,aAAa,EAAvB,UACH,EAFC,UAAU;AAAA,MAGX,CAAC,UAAU,QACT,CAAC,WAAU,0IAGX,EAHC,UAIH,EALC,UAAU;AAAA,IAMb,EAVC,UAAU;AAAA,EAWb,EAxBC;AA0BL;",
6
- "names": []
7
- }
@@ -1,17 +0,0 @@
1
- import { Accordion, Paragraph } from "tamagui";
2
- function AccordionDemo() {
3
- return <Accordion orientation="horizontal" width="$20" type="multiple">
4
- <Accordion.Item value="a1">
5
- <Accordion.Trigger><Paragraph>1. Take a cold shower</Paragraph></Accordion.Trigger>
6
- <Accordion.Content><Paragraph>Cold showers can help reduce inflammation, relieve pain, improve circulation, lower stress levels, and reduce muscle soreness and fatigue.</Paragraph></Accordion.Content>
7
- </Accordion.Item>
8
- <Accordion.Item value="a2">
9
- <Accordion.Trigger><Paragraph>2: Eat 4 eggs</Paragraph></Accordion.Trigger>
10
- <Accordion.Content><Paragraph>{"Eggs have been a dietary staple since time immemorial and there\u2019s good reason for their continued presence in our menus and meals."}</Paragraph></Accordion.Content>
11
- </Accordion.Item>
12
- </Accordion>;
13
- }
14
- export {
15
- AccordionDemo
16
- };
17
- //# sourceMappingURL=AccordionDemo.mjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/AccordionDemo.tsx"],
4
- "sourcesContent": ["import { Accordion, Paragraph } from 'tamagui'\n\nexport function AccordionDemo() {\n return (\n <Accordion orientation=\"horizontal\" width=\"$20\" type=\"multiple\">\n <Accordion.Item value=\"a1\">\n <Accordion.Trigger>\n <Paragraph>1. Take a cold shower</Paragraph>\n </Accordion.Trigger>\n <Accordion.Content>\n <Paragraph>\n Cold showers can help reduce inflammation, relieve pain, improve circulation,\n lower stress levels, and reduce muscle soreness and fatigue.\n </Paragraph>\n </Accordion.Content>\n </Accordion.Item>\n\n <Accordion.Item value=\"a2\">\n <Accordion.Trigger>\n <Paragraph>2: Eat 4 eggs</Paragraph>\n </Accordion.Trigger>\n <Accordion.Content>\n <Paragraph>\n Eggs have been a dietary staple since time immemorial and there\u2019s good reason\n for their continued presence in our menus and meals.\n </Paragraph>\n </Accordion.Content>\n </Accordion.Item>\n </Accordion>\n )\n}\n"],
5
- "mappings": "AAAA,SAAS,WAAW,iBAAiB;AAE9B,SAAS,gBAAgB;AAC9B,SACE,CAAC,UAAU,YAAY,aAAa,MAAM,MAAM,KAAK;AAAA,IACnD,CAAC,UAAU,KAAK,MAAM;AAAA,MACpB,CAAC,UAAU,QACT,CAAC,UAAU,qBAAqB,EAA/B,UACH,EAFC,UAAU;AAAA,MAGX,CAAC,UAAU,QACT,CAAC,UAAU,0IAGX,EAHC,UAIH,EALC,UAAU;AAAA,IAMb,EAVC,UAAU;AAAA,IAYX,CAAC,UAAU,KAAK,MAAM;AAAA,MACpB,CAAC,UAAU,QACT,CAAC,UAAU,aAAa,EAAvB,UACH,EAFC,UAAU;AAAA,MAGX,CAAC,UAAU,QACT,CAAC,WAAU,0IAGX,EAHC,UAIH,EALC,UAAU;AAAA,IAMb,EAVC,UAAU;AAAA,EAWb,EAxBC;AA0BL;",
6
- "names": []
7
- }
@@ -1,18 +0,0 @@
1
- import { Drawer } from "@tamagui/drawer";
2
- import { ChevronDown, ChevronUp } from "@tamagui/feather-icons";
3
- import { useState } from "react";
4
- import { Button, Paragraph, YStack } from "tamagui";
5
- function DrawerDemo() {
6
- const [show, setShow] = useState(false);
7
- return <YStack minWidth={230} w="100%" h="100%" ai="center" jc="center" position="relative"><Drawer.Provider>
8
- <Button size="$6" icon={show ? ChevronDown : ChevronUp} circular onPress={() => setShow((x) => !x)} elevation="$2" />
9
- <Drawer open={show} onOpenChange={setShow}><Drawer.Frame h={200} ai="center" jc="center" p="$6" space>
10
- <Paragraph selectable={false}>Hello.</Paragraph>
11
- <Button size="$6" icon={show ? ChevronDown : ChevronUp} circular onPress={() => setShow((x) => !x)} elevation="$2" />
12
- </Drawer.Frame></Drawer>
13
- </Drawer.Provider></YStack>;
14
- }
15
- export {
16
- DrawerDemo
17
- };
18
- //# sourceMappingURL=DrawerDemo.js.map