@tamagui/demos 1.7.1 → 1.7.2
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.
- package/dist/cjs/TabsDemo.js +3 -3
- package/dist/cjs/TabsDemo.js.map +2 -2
- package/dist/esm/TabsDemo.js +3 -3
- package/dist/esm/TabsDemo.js.map +2 -2
- package/dist/esm/TabsDemo.mjs +3 -3
- package/dist/esm/TabsDemo.mjs.map +2 -2
- package/dist/jsx/TabsDemo.js +3 -3
- package/dist/jsx/TabsDemo.js.map +2 -2
- package/dist/jsx/TabsDemo.mjs +3 -3
- package/dist/jsx/TabsDemo.mjs.map +2 -2
- package/package.json +17 -17
- package/src/TabsDemo.tsx +3 -3
package/dist/cjs/TabsDemo.js
CHANGED
|
@@ -67,9 +67,9 @@ const VerticalTabs = () => {
|
|
|
67
67
|
br: "$4",
|
|
68
68
|
children: [
|
|
69
69
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Tabs.List, { disablePassBorderRadius: "end", "aria-label": "Manage your account", children: [
|
|
70
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Trigger, { theme: "Button", value: "tab1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
|
|
71
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Trigger, { theme: "Button", value: "tab2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
|
|
72
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Trigger, { theme: "Button", value: "tab3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
|
|
70
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Trigger, { theme: "Button", value: "tab1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, { children: "Profile" }) }),
|
|
71
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Trigger, { theme: "Button", value: "tab2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, { children: "Connections" }) }),
|
|
72
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Trigger, { theme: "Button", value: "tab3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, { children: "Notifications" }) })
|
|
73
73
|
] }),
|
|
74
74
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, { value: "tab1", p: "$2", ai: "center", jc: "center", f: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { ta: "center", children: "Profile" }) }, "tab1"),
|
|
75
75
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, { value: "tab2", p: "$2", ai: "center", jc: "center", f: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { ta: "center", children: "Connections" }) }, "tab2"),
|
package/dist/cjs/TabsDemo.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/TabsDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useState } from 'react'\nimport { Button, H5, SizableText, Tabs, XStack } from 'tamagui'\n\nconst demos = ['horizontal', 'vertical'] as const\n\nexport function TabsDemo() {\n const [demoIndex, setDemoIndex] = useState(0)\n const demo = demos[demoIndex]\n\n return (\n <>\n {demo === 'horizontal' ? <HorizontalTabs /> : <VerticalTabs />}\n\n <XStack ai=\"center\" space pos=\"absolute\" b=\"$3\" l=\"$4\" $xxs={{ dsp: 'none' }}>\n <Button size=\"$2\" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>\n {demo}\n </Button>\n </XStack>\n </>\n )\n}\n\nconst HorizontalTabs = () => {\n return (\n <Tabs\n defaultValue=\"tab1\"\n orientation=\"horizontal\"\n flexDirection=\"column\"\n width={400}\n height={150}\n br=\"$4\"\n >\n <Tabs.List disablePassBorderRadius=\"bottom\" aria-label=\"Manage your account\">\n <Tabs.Trigger theme=\"Button\" f={1} value=\"tab1\">\n <SizableText fontFamily=\"$body\">Profile</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger theme=\"Button\" f={1} value=\"tab2\">\n <SizableText fontFamily=\"$body\">Connections</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger theme=\"Button\" f={1} value=\"tab3\">\n <SizableText fontFamily=\"$body\">Notifications</SizableText>\n </Tabs.Trigger>\n </Tabs.List>\n\n <Tabs.Content value=\"tab1\" key=\"tab1\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n <H5>Profile</H5>\n </Tabs.Content>\n\n <Tabs.Content value=\"tab2\" key=\"tab2\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n <H5>Connections</H5>\n </Tabs.Content>\n\n <Tabs.Content value=\"tab3\" key=\"tab3\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n <H5>Notifications</H5>\n </Tabs.Content>\n </Tabs>\n )\n}\n\nconst VerticalTabs = () => {\n return (\n <Tabs\n defaultValue=\"tab1\"\n flexDirection=\"row\"\n orientation=\"vertical\"\n width={400}\n br=\"$4\"\n >\n <Tabs.List disablePassBorderRadius=\"end\" aria-label=\"Manage your account\">\n <Tabs.Trigger theme=\"Button\" value=\"tab1\">\n <SizableText
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAUI;AAVJ,mBAAyB;AACzB,qBAAsD;AAEtD,MAAM,QAAQ,CAAC,cAAc,UAAU;AAEhC,SAAS,WAAW;AACzB,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,CAAC;AAC5C,QAAM,OAAO,MAAM,SAAS;AAE5B,SACE,4EACG;AAAA,aAAS,eAAe,4CAAC,kBAAe,IAAK,4CAAC,gBAAa;AAAA,IAE5D,4CAAC,yBAAO,IAAG,UAAS,OAAK,MAAC,KAAI,YAAW,GAAE,MAAK,GAAE,MAAK,MAAM,EAAE,KAAK,OAAO,GACzE,sDAAC,yBAAO,MAAK,MAAK,SAAS,MAAM,aAAa,CAAC,OAAO,IAAI,KAAK,MAAM,MAAM,GACxE,gBACH,GACF;AAAA,KACF;AAEJ;AAEA,MAAM,iBAAiB,MAAM;AAC3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAa;AAAA,MACb,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,IAAG;AAAA,MAEH;AAAA,qDAAC,oBAAK,MAAL,EAAU,yBAAwB,UAAS,cAAW,uBACrD;AAAA,sDAAC,oBAAK,SAAL,EAAa,OAAM,UAAS,GAAG,GAAG,OAAM,QACvC,sDAAC,8BAAY,YAAW,SAAQ,qBAAO,GACzC;AAAA,UACA,4CAAC,oBAAK,SAAL,EAAa,OAAM,UAAS,GAAG,GAAG,OAAM,QACvC,sDAAC,8BAAY,YAAW,SAAQ,yBAAW,GAC7C;AAAA,UACA,4CAAC,oBAAK,SAAL,EAAa,OAAM,UAAS,GAAG,GAAG,OAAM,QACvC,sDAAC,8BAAY,YAAW,SAAQ,2BAAa,GAC/C;AAAA,WACF;AAAA,QAEA,4CAAC,oBAAK,SAAL,EAAa,OAAM,QAAkB,GAAE,MAAK,IAAG,UAAS,IAAG,UAAS,GAAG,GACtE,sDAAC,qBAAG,qBAAO,KADkB,MAE/B;AAAA,QAEA,4CAAC,oBAAK,SAAL,EAAa,OAAM,QAAkB,GAAE,MAAK,IAAG,UAAS,IAAG,UAAS,GAAG,GACtE,sDAAC,qBAAG,yBAAW,KADc,MAE/B;AAAA,QAEA,4CAAC,oBAAK,SAAL,EAAa,OAAM,QAAkB,GAAE,MAAK,IAAG,UAAS,IAAG,UAAS,GAAG,GACtE,sDAAC,qBAAG,2BAAa,KADY,MAE/B;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,eAAe,MAAM;AACzB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAa;AAAA,MACb,eAAc;AAAA,MACd,aAAY;AAAA,MACZ,OAAO;AAAA,MACP,IAAG;AAAA,MAEH;AAAA,qDAAC,oBAAK,MAAL,EAAU,yBAAwB,OAAM,cAAW,uBAClD;AAAA,sDAAC,oBAAK,SAAL,EAAa,OAAM,UAAS,OAAM,QACjC,sDAAC,8BAAY,
|
|
4
|
+
"sourcesContent": ["import { useState } from 'react'\nimport { Button, H5, SizableText, Tabs, XStack } from 'tamagui'\n\nconst demos = ['horizontal', 'vertical'] as const\n\nexport function TabsDemo() {\n const [demoIndex, setDemoIndex] = useState(0)\n const demo = demos[demoIndex]\n\n return (\n <>\n {demo === 'horizontal' ? <HorizontalTabs /> : <VerticalTabs />}\n\n <XStack ai=\"center\" space pos=\"absolute\" b=\"$3\" l=\"$4\" $xxs={{ dsp: 'none' }}>\n <Button size=\"$2\" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>\n {demo}\n </Button>\n </XStack>\n </>\n )\n}\n\nconst HorizontalTabs = () => {\n return (\n <Tabs\n defaultValue=\"tab1\"\n orientation=\"horizontal\"\n flexDirection=\"column\"\n width={400}\n height={150}\n br=\"$4\"\n >\n <Tabs.List disablePassBorderRadius=\"bottom\" aria-label=\"Manage your account\">\n <Tabs.Trigger theme=\"Button\" f={1} value=\"tab1\">\n <SizableText fontFamily=\"$body\">Profile</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger theme=\"Button\" f={1} value=\"tab2\">\n <SizableText fontFamily=\"$body\">Connections</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger theme=\"Button\" f={1} value=\"tab3\">\n <SizableText fontFamily=\"$body\">Notifications</SizableText>\n </Tabs.Trigger>\n </Tabs.List>\n\n <Tabs.Content value=\"tab1\" key=\"tab1\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n <H5>Profile</H5>\n </Tabs.Content>\n\n <Tabs.Content value=\"tab2\" key=\"tab2\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n <H5>Connections</H5>\n </Tabs.Content>\n\n <Tabs.Content value=\"tab3\" key=\"tab3\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n <H5>Notifications</H5>\n </Tabs.Content>\n </Tabs>\n )\n}\n\nconst VerticalTabs = () => {\n return (\n <Tabs\n defaultValue=\"tab1\"\n flexDirection=\"row\"\n orientation=\"vertical\"\n width={400}\n br=\"$4\"\n >\n <Tabs.List disablePassBorderRadius=\"end\" aria-label=\"Manage your account\">\n <Tabs.Trigger theme=\"Button\" value=\"tab1\">\n <SizableText>Profile</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger theme=\"Button\" value=\"tab2\">\n <SizableText>Connections</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger theme=\"Button\" value=\"tab3\">\n <SizableText>Notifications</SizableText>\n </Tabs.Trigger>\n </Tabs.List>\n <Tabs.Content value=\"tab1\" key=\"tab1\" p=\"$2\" ai=\"center\" jc=\"center\" f={1}>\n <H5 ta=\"center\">Profile</H5>\n </Tabs.Content>\n <Tabs.Content value=\"tab2\" key=\"tab2\" p=\"$2\" ai=\"center\" jc=\"center\" f={1}>\n <H5 ta=\"center\">Connections</H5>\n </Tabs.Content>\n <Tabs.Content value=\"tab3\" key=\"tab3\" p=\"$2\" ai=\"center\" jc=\"center\" f={1}>\n <H5 ta=\"center\">Notifications</H5>\n </Tabs.Content>\n </Tabs>\n )\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/TabsDemo.js
CHANGED
|
@@ -44,9 +44,9 @@ const VerticalTabs = () => {
|
|
|
44
44
|
br: "$4",
|
|
45
45
|
children: [
|
|
46
46
|
/* @__PURE__ */ jsxs(Tabs.List, { disablePassBorderRadius: "end", "aria-label": "Manage your account", children: [
|
|
47
|
-
/* @__PURE__ */ jsx(Tabs.Trigger, { theme: "Button", value: "tab1", children: /* @__PURE__ */ jsx(SizableText, {
|
|
48
|
-
/* @__PURE__ */ jsx(Tabs.Trigger, { theme: "Button", value: "tab2", children: /* @__PURE__ */ jsx(SizableText, {
|
|
49
|
-
/* @__PURE__ */ jsx(Tabs.Trigger, { theme: "Button", value: "tab3", children: /* @__PURE__ */ jsx(SizableText, {
|
|
47
|
+
/* @__PURE__ */ jsx(Tabs.Trigger, { theme: "Button", value: "tab1", children: /* @__PURE__ */ jsx(SizableText, { children: "Profile" }) }),
|
|
48
|
+
/* @__PURE__ */ jsx(Tabs.Trigger, { theme: "Button", value: "tab2", children: /* @__PURE__ */ jsx(SizableText, { children: "Connections" }) }),
|
|
49
|
+
/* @__PURE__ */ jsx(Tabs.Trigger, { theme: "Button", value: "tab3", children: /* @__PURE__ */ jsx(SizableText, { children: "Notifications" }) })
|
|
50
50
|
] }),
|
|
51
51
|
/* @__PURE__ */ jsx(Tabs.Content, { value: "tab1", p: "$2", ai: "center", jc: "center", f: 1, children: /* @__PURE__ */ jsx(H5, { ta: "center", children: "Profile" }) }, "tab1"),
|
|
52
52
|
/* @__PURE__ */ jsx(Tabs.Content, { value: "tab2", p: "$2", ai: "center", jc: "center", f: 1, children: /* @__PURE__ */ jsx(H5, { ta: "center", children: "Connections" }) }, "tab2"),
|
package/dist/esm/TabsDemo.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/TabsDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useState } from 'react'\nimport { Button, H5, SizableText, Tabs, XStack } from 'tamagui'\n\nconst demos = ['horizontal', 'vertical'] as const\n\nexport function TabsDemo() {\n const [demoIndex, setDemoIndex] = useState(0)\n const demo = demos[demoIndex]\n\n return (\n <>\n {demo === 'horizontal' ? <HorizontalTabs /> : <VerticalTabs />}\n\n <XStack ai=\"center\" space pos=\"absolute\" b=\"$3\" l=\"$4\" $xxs={{ dsp: 'none' }}>\n <Button size=\"$2\" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>\n {demo}\n </Button>\n </XStack>\n </>\n )\n}\n\nconst HorizontalTabs = () => {\n return (\n <Tabs\n defaultValue=\"tab1\"\n orientation=\"horizontal\"\n flexDirection=\"column\"\n width={400}\n height={150}\n br=\"$4\"\n >\n <Tabs.List disablePassBorderRadius=\"bottom\" aria-label=\"Manage your account\">\n <Tabs.Trigger theme=\"Button\" f={1} value=\"tab1\">\n <SizableText fontFamily=\"$body\">Profile</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger theme=\"Button\" f={1} value=\"tab2\">\n <SizableText fontFamily=\"$body\">Connections</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger theme=\"Button\" f={1} value=\"tab3\">\n <SizableText fontFamily=\"$body\">Notifications</SizableText>\n </Tabs.Trigger>\n </Tabs.List>\n\n <Tabs.Content value=\"tab1\" key=\"tab1\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n <H5>Profile</H5>\n </Tabs.Content>\n\n <Tabs.Content value=\"tab2\" key=\"tab2\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n <H5>Connections</H5>\n </Tabs.Content>\n\n <Tabs.Content value=\"tab3\" key=\"tab3\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n <H5>Notifications</H5>\n </Tabs.Content>\n </Tabs>\n )\n}\n\nconst VerticalTabs = () => {\n return (\n <Tabs\n defaultValue=\"tab1\"\n flexDirection=\"row\"\n orientation=\"vertical\"\n width={400}\n br=\"$4\"\n >\n <Tabs.List disablePassBorderRadius=\"end\" aria-label=\"Manage your account\">\n <Tabs.Trigger theme=\"Button\" value=\"tab1\">\n <SizableText
|
|
5
|
-
"mappings": "AAUI,mBAC2B,KAD3B;AAVJ,SAAS,gBAAgB;AACzB,SAAS,QAAQ,IAAI,aAAa,MAAM,cAAc;AAEtD,MAAM,QAAQ,CAAC,cAAc,UAAU;AAEhC,SAAS,WAAW;AACzB,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,CAAC;AAC5C,QAAM,OAAO,MAAM,SAAS;AAE5B,SACE,iCACG;AAAA,aAAS,eAAe,oBAAC,kBAAe,IAAK,oBAAC,gBAAa;AAAA,IAE5D,oBAAC,UAAO,IAAG,UAAS,OAAK,MAAC,KAAI,YAAW,GAAE,MAAK,GAAE,MAAK,MAAM,EAAE,KAAK,OAAO,GACzE,8BAAC,UAAO,MAAK,MAAK,SAAS,MAAM,aAAa,CAAC,OAAO,IAAI,KAAK,MAAM,MAAM,GACxE,gBACH,GACF;AAAA,KACF;AAEJ;AAEA,MAAM,iBAAiB,MAAM;AAC3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAa;AAAA,MACb,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,IAAG;AAAA,MAEH;AAAA,6BAAC,KAAK,MAAL,EAAU,yBAAwB,UAAS,cAAW,uBACrD;AAAA,8BAAC,KAAK,SAAL,EAAa,OAAM,UAAS,GAAG,GAAG,OAAM,QACvC,8BAAC,eAAY,YAAW,SAAQ,qBAAO,GACzC;AAAA,UACA,oBAAC,KAAK,SAAL,EAAa,OAAM,UAAS,GAAG,GAAG,OAAM,QACvC,8BAAC,eAAY,YAAW,SAAQ,yBAAW,GAC7C;AAAA,UACA,oBAAC,KAAK,SAAL,EAAa,OAAM,UAAS,GAAG,GAAG,OAAM,QACvC,8BAAC,eAAY,YAAW,SAAQ,2BAAa,GAC/C;AAAA,WACF;AAAA,QAEA,oBAAC,KAAK,SAAL,EAAa,OAAM,QAAkB,GAAE,MAAK,IAAG,UAAS,IAAG,UAAS,GAAG,GACtE,8BAAC,MAAG,qBAAO,KADkB,MAE/B;AAAA,QAEA,oBAAC,KAAK,SAAL,EAAa,OAAM,QAAkB,GAAE,MAAK,IAAG,UAAS,IAAG,UAAS,GAAG,GACtE,8BAAC,MAAG,yBAAW,KADc,MAE/B;AAAA,QAEA,oBAAC,KAAK,SAAL,EAAa,OAAM,QAAkB,GAAE,MAAK,IAAG,UAAS,IAAG,UAAS,GAAG,GACtE,8BAAC,MAAG,2BAAa,KADY,MAE/B;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,eAAe,MAAM;AACzB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAa;AAAA,MACb,eAAc;AAAA,MACd,aAAY;AAAA,MACZ,OAAO;AAAA,MACP,IAAG;AAAA,MAEH;AAAA,6BAAC,KAAK,MAAL,EAAU,yBAAwB,OAAM,cAAW,uBAClD;AAAA,8BAAC,KAAK,SAAL,EAAa,OAAM,UAAS,OAAM,QACjC,8BAAC,eAAY,
|
|
4
|
+
"sourcesContent": ["import { useState } from 'react'\nimport { Button, H5, SizableText, Tabs, XStack } from 'tamagui'\n\nconst demos = ['horizontal', 'vertical'] as const\n\nexport function TabsDemo() {\n const [demoIndex, setDemoIndex] = useState(0)\n const demo = demos[demoIndex]\n\n return (\n <>\n {demo === 'horizontal' ? <HorizontalTabs /> : <VerticalTabs />}\n\n <XStack ai=\"center\" space pos=\"absolute\" b=\"$3\" l=\"$4\" $xxs={{ dsp: 'none' }}>\n <Button size=\"$2\" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>\n {demo}\n </Button>\n </XStack>\n </>\n )\n}\n\nconst HorizontalTabs = () => {\n return (\n <Tabs\n defaultValue=\"tab1\"\n orientation=\"horizontal\"\n flexDirection=\"column\"\n width={400}\n height={150}\n br=\"$4\"\n >\n <Tabs.List disablePassBorderRadius=\"bottom\" aria-label=\"Manage your account\">\n <Tabs.Trigger theme=\"Button\" f={1} value=\"tab1\">\n <SizableText fontFamily=\"$body\">Profile</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger theme=\"Button\" f={1} value=\"tab2\">\n <SizableText fontFamily=\"$body\">Connections</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger theme=\"Button\" f={1} value=\"tab3\">\n <SizableText fontFamily=\"$body\">Notifications</SizableText>\n </Tabs.Trigger>\n </Tabs.List>\n\n <Tabs.Content value=\"tab1\" key=\"tab1\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n <H5>Profile</H5>\n </Tabs.Content>\n\n <Tabs.Content value=\"tab2\" key=\"tab2\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n <H5>Connections</H5>\n </Tabs.Content>\n\n <Tabs.Content value=\"tab3\" key=\"tab3\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n <H5>Notifications</H5>\n </Tabs.Content>\n </Tabs>\n )\n}\n\nconst VerticalTabs = () => {\n return (\n <Tabs\n defaultValue=\"tab1\"\n flexDirection=\"row\"\n orientation=\"vertical\"\n width={400}\n br=\"$4\"\n >\n <Tabs.List disablePassBorderRadius=\"end\" aria-label=\"Manage your account\">\n <Tabs.Trigger theme=\"Button\" value=\"tab1\">\n <SizableText>Profile</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger theme=\"Button\" value=\"tab2\">\n <SizableText>Connections</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger theme=\"Button\" value=\"tab3\">\n <SizableText>Notifications</SizableText>\n </Tabs.Trigger>\n </Tabs.List>\n <Tabs.Content value=\"tab1\" key=\"tab1\" p=\"$2\" ai=\"center\" jc=\"center\" f={1}>\n <H5 ta=\"center\">Profile</H5>\n </Tabs.Content>\n <Tabs.Content value=\"tab2\" key=\"tab2\" p=\"$2\" ai=\"center\" jc=\"center\" f={1}>\n <H5 ta=\"center\">Connections</H5>\n </Tabs.Content>\n <Tabs.Content value=\"tab3\" key=\"tab3\" p=\"$2\" ai=\"center\" jc=\"center\" f={1}>\n <H5 ta=\"center\">Notifications</H5>\n </Tabs.Content>\n </Tabs>\n )\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/TabsDemo.mjs
CHANGED
|
@@ -44,9 +44,9 @@ const VerticalTabs = () => {
|
|
|
44
44
|
br: "$4",
|
|
45
45
|
children: [
|
|
46
46
|
/* @__PURE__ */ jsxs(Tabs.List, { disablePassBorderRadius: "end", "aria-label": "Manage your account", children: [
|
|
47
|
-
/* @__PURE__ */ jsx(Tabs.Trigger, { theme: "Button", value: "tab1", children: /* @__PURE__ */ jsx(SizableText, {
|
|
48
|
-
/* @__PURE__ */ jsx(Tabs.Trigger, { theme: "Button", value: "tab2", children: /* @__PURE__ */ jsx(SizableText, {
|
|
49
|
-
/* @__PURE__ */ jsx(Tabs.Trigger, { theme: "Button", value: "tab3", children: /* @__PURE__ */ jsx(SizableText, {
|
|
47
|
+
/* @__PURE__ */ jsx(Tabs.Trigger, { theme: "Button", value: "tab1", children: /* @__PURE__ */ jsx(SizableText, { children: "Profile" }) }),
|
|
48
|
+
/* @__PURE__ */ jsx(Tabs.Trigger, { theme: "Button", value: "tab2", children: /* @__PURE__ */ jsx(SizableText, { children: "Connections" }) }),
|
|
49
|
+
/* @__PURE__ */ jsx(Tabs.Trigger, { theme: "Button", value: "tab3", children: /* @__PURE__ */ jsx(SizableText, { children: "Notifications" }) })
|
|
50
50
|
] }),
|
|
51
51
|
/* @__PURE__ */ jsx(Tabs.Content, { value: "tab1", p: "$2", ai: "center", jc: "center", f: 1, children: /* @__PURE__ */ jsx(H5, { ta: "center", children: "Profile" }) }, "tab1"),
|
|
52
52
|
/* @__PURE__ */ jsx(Tabs.Content, { value: "tab2", p: "$2", ai: "center", jc: "center", f: 1, children: /* @__PURE__ */ jsx(H5, { ta: "center", children: "Connections" }) }, "tab2"),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/TabsDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useState } from 'react'\nimport { Button, H5, SizableText, Tabs, XStack } from 'tamagui'\n\nconst demos = ['horizontal', 'vertical'] as const\n\nexport function TabsDemo() {\n const [demoIndex, setDemoIndex] = useState(0)\n const demo = demos[demoIndex]\n\n return (\n <>\n {demo === 'horizontal' ? <HorizontalTabs /> : <VerticalTabs />}\n\n <XStack ai=\"center\" space pos=\"absolute\" b=\"$3\" l=\"$4\" $xxs={{ dsp: 'none' }}>\n <Button size=\"$2\" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>\n {demo}\n </Button>\n </XStack>\n </>\n )\n}\n\nconst HorizontalTabs = () => {\n return (\n <Tabs\n defaultValue=\"tab1\"\n orientation=\"horizontal\"\n flexDirection=\"column\"\n width={400}\n height={150}\n br=\"$4\"\n >\n <Tabs.List disablePassBorderRadius=\"bottom\" aria-label=\"Manage your account\">\n <Tabs.Trigger theme=\"Button\" f={1} value=\"tab1\">\n <SizableText fontFamily=\"$body\">Profile</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger theme=\"Button\" f={1} value=\"tab2\">\n <SizableText fontFamily=\"$body\">Connections</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger theme=\"Button\" f={1} value=\"tab3\">\n <SizableText fontFamily=\"$body\">Notifications</SizableText>\n </Tabs.Trigger>\n </Tabs.List>\n\n <Tabs.Content value=\"tab1\" key=\"tab1\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n <H5>Profile</H5>\n </Tabs.Content>\n\n <Tabs.Content value=\"tab2\" key=\"tab2\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n <H5>Connections</H5>\n </Tabs.Content>\n\n <Tabs.Content value=\"tab3\" key=\"tab3\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n <H5>Notifications</H5>\n </Tabs.Content>\n </Tabs>\n )\n}\n\nconst VerticalTabs = () => {\n return (\n <Tabs\n defaultValue=\"tab1\"\n flexDirection=\"row\"\n orientation=\"vertical\"\n width={400}\n br=\"$4\"\n >\n <Tabs.List disablePassBorderRadius=\"end\" aria-label=\"Manage your account\">\n <Tabs.Trigger theme=\"Button\" value=\"tab1\">\n <SizableText
|
|
5
|
-
"mappings": "AAUI,mBAC2B,KAD3B;AAVJ,SAAS,gBAAgB;AACzB,SAAS,QAAQ,IAAI,aAAa,MAAM,cAAc;AAEtD,MAAM,QAAQ,CAAC,cAAc,UAAU;AAEhC,SAAS,WAAW;AACzB,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,CAAC;AAC5C,QAAM,OAAO,MAAM,SAAS;AAE5B,SACE,iCACG;AAAA,aAAS,eAAe,oBAAC,kBAAe,IAAK,oBAAC,gBAAa;AAAA,IAE5D,oBAAC,UAAO,IAAG,UAAS,OAAK,MAAC,KAAI,YAAW,GAAE,MAAK,GAAE,MAAK,MAAM,EAAE,KAAK,OAAO,GACzE,8BAAC,UAAO,MAAK,MAAK,SAAS,MAAM,aAAa,CAAC,OAAO,IAAI,KAAK,MAAM,MAAM,GACxE,gBACH,GACF;AAAA,KACF;AAEJ;AAEA,MAAM,iBAAiB,MAAM;AAC3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAa;AAAA,MACb,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,IAAG;AAAA,MAEH;AAAA,6BAAC,KAAK,MAAL,EAAU,yBAAwB,UAAS,cAAW,uBACrD;AAAA,8BAAC,KAAK,SAAL,EAAa,OAAM,UAAS,GAAG,GAAG,OAAM,QACvC,8BAAC,eAAY,YAAW,SAAQ,qBAAO,GACzC;AAAA,UACA,oBAAC,KAAK,SAAL,EAAa,OAAM,UAAS,GAAG,GAAG,OAAM,QACvC,8BAAC,eAAY,YAAW,SAAQ,yBAAW,GAC7C;AAAA,UACA,oBAAC,KAAK,SAAL,EAAa,OAAM,UAAS,GAAG,GAAG,OAAM,QACvC,8BAAC,eAAY,YAAW,SAAQ,2BAAa,GAC/C;AAAA,WACF;AAAA,QAEA,oBAAC,KAAK,SAAL,EAAa,OAAM,QAAkB,GAAE,MAAK,IAAG,UAAS,IAAG,UAAS,GAAG,GACtE,8BAAC,MAAG,qBAAO,KADkB,MAE/B;AAAA,QAEA,oBAAC,KAAK,SAAL,EAAa,OAAM,QAAkB,GAAE,MAAK,IAAG,UAAS,IAAG,UAAS,GAAG,GACtE,8BAAC,MAAG,yBAAW,KADc,MAE/B;AAAA,QAEA,oBAAC,KAAK,SAAL,EAAa,OAAM,QAAkB,GAAE,MAAK,IAAG,UAAS,IAAG,UAAS,GAAG,GACtE,8BAAC,MAAG,2BAAa,KADY,MAE/B;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,eAAe,MAAM;AACzB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAa;AAAA,MACb,eAAc;AAAA,MACd,aAAY;AAAA,MACZ,OAAO;AAAA,MACP,IAAG;AAAA,MAEH;AAAA,6BAAC,KAAK,MAAL,EAAU,yBAAwB,OAAM,cAAW,uBAClD;AAAA,8BAAC,KAAK,SAAL,EAAa,OAAM,UAAS,OAAM,QACjC,8BAAC,eAAY,
|
|
4
|
+
"sourcesContent": ["import { useState } from 'react'\nimport { Button, H5, SizableText, Tabs, XStack } from 'tamagui'\n\nconst demos = ['horizontal', 'vertical'] as const\n\nexport function TabsDemo() {\n const [demoIndex, setDemoIndex] = useState(0)\n const demo = demos[demoIndex]\n\n return (\n <>\n {demo === 'horizontal' ? <HorizontalTabs /> : <VerticalTabs />}\n\n <XStack ai=\"center\" space pos=\"absolute\" b=\"$3\" l=\"$4\" $xxs={{ dsp: 'none' }}>\n <Button size=\"$2\" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>\n {demo}\n </Button>\n </XStack>\n </>\n )\n}\n\nconst HorizontalTabs = () => {\n return (\n <Tabs\n defaultValue=\"tab1\"\n orientation=\"horizontal\"\n flexDirection=\"column\"\n width={400}\n height={150}\n br=\"$4\"\n >\n <Tabs.List disablePassBorderRadius=\"bottom\" aria-label=\"Manage your account\">\n <Tabs.Trigger theme=\"Button\" f={1} value=\"tab1\">\n <SizableText fontFamily=\"$body\">Profile</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger theme=\"Button\" f={1} value=\"tab2\">\n <SizableText fontFamily=\"$body\">Connections</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger theme=\"Button\" f={1} value=\"tab3\">\n <SizableText fontFamily=\"$body\">Notifications</SizableText>\n </Tabs.Trigger>\n </Tabs.List>\n\n <Tabs.Content value=\"tab1\" key=\"tab1\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n <H5>Profile</H5>\n </Tabs.Content>\n\n <Tabs.Content value=\"tab2\" key=\"tab2\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n <H5>Connections</H5>\n </Tabs.Content>\n\n <Tabs.Content value=\"tab3\" key=\"tab3\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n <H5>Notifications</H5>\n </Tabs.Content>\n </Tabs>\n )\n}\n\nconst VerticalTabs = () => {\n return (\n <Tabs\n defaultValue=\"tab1\"\n flexDirection=\"row\"\n orientation=\"vertical\"\n width={400}\n br=\"$4\"\n >\n <Tabs.List disablePassBorderRadius=\"end\" aria-label=\"Manage your account\">\n <Tabs.Trigger theme=\"Button\" value=\"tab1\">\n <SizableText>Profile</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger theme=\"Button\" value=\"tab2\">\n <SizableText>Connections</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger theme=\"Button\" value=\"tab3\">\n <SizableText>Notifications</SizableText>\n </Tabs.Trigger>\n </Tabs.List>\n <Tabs.Content value=\"tab1\" key=\"tab1\" p=\"$2\" ai=\"center\" jc=\"center\" f={1}>\n <H5 ta=\"center\">Profile</H5>\n </Tabs.Content>\n <Tabs.Content value=\"tab2\" key=\"tab2\" p=\"$2\" ai=\"center\" jc=\"center\" f={1}>\n <H5 ta=\"center\">Connections</H5>\n </Tabs.Content>\n <Tabs.Content value=\"tab3\" key=\"tab3\" p=\"$2\" ai=\"center\" jc=\"center\" f={1}>\n <H5 ta=\"center\">Notifications</H5>\n </Tabs.Content>\n </Tabs>\n )\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/TabsDemo.js
CHANGED
|
@@ -37,9 +37,9 @@ const VerticalTabs = () => {
|
|
|
37
37
|
br="$4"
|
|
38
38
|
>
|
|
39
39
|
<Tabs.List disablePassBorderRadius="end" aria-label="Manage your account">
|
|
40
|
-
<Tabs.Trigger theme="Button" value="tab1"><SizableText
|
|
41
|
-
<Tabs.Trigger theme="Button" value="tab2"><SizableText
|
|
42
|
-
<Tabs.Trigger theme="Button" value="tab3"><SizableText
|
|
40
|
+
<Tabs.Trigger theme="Button" value="tab1"><SizableText>Profile</SizableText></Tabs.Trigger>
|
|
41
|
+
<Tabs.Trigger theme="Button" value="tab2"><SizableText>Connections</SizableText></Tabs.Trigger>
|
|
42
|
+
<Tabs.Trigger theme="Button" value="tab3"><SizableText>Notifications</SizableText></Tabs.Trigger>
|
|
43
43
|
</Tabs.List>
|
|
44
44
|
<Tabs.Content value="tab1" key="tab1" p="$2" ai="center" jc="center" f={1}><H5 ta="center">Profile</H5></Tabs.Content>
|
|
45
45
|
<Tabs.Content value="tab2" key="tab2" p="$2" ai="center" jc="center" f={1}><H5 ta="center">Connections</H5></Tabs.Content>
|
package/dist/jsx/TabsDemo.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/TabsDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useState } from 'react'\nimport { Button, H5, SizableText, Tabs, XStack } from 'tamagui'\n\nconst demos = ['horizontal', 'vertical'] as const\n\nexport function TabsDemo() {\n const [demoIndex, setDemoIndex] = useState(0)\n const demo = demos[demoIndex]\n\n return (\n <>\n {demo === 'horizontal' ? <HorizontalTabs /> : <VerticalTabs />}\n\n <XStack ai=\"center\" space pos=\"absolute\" b=\"$3\" l=\"$4\" $xxs={{ dsp: 'none' }}>\n <Button size=\"$2\" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>\n {demo}\n </Button>\n </XStack>\n </>\n )\n}\n\nconst HorizontalTabs = () => {\n return (\n <Tabs\n defaultValue=\"tab1\"\n orientation=\"horizontal\"\n flexDirection=\"column\"\n width={400}\n height={150}\n br=\"$4\"\n >\n <Tabs.List disablePassBorderRadius=\"bottom\" aria-label=\"Manage your account\">\n <Tabs.Trigger theme=\"Button\" f={1} value=\"tab1\">\n <SizableText fontFamily=\"$body\">Profile</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger theme=\"Button\" f={1} value=\"tab2\">\n <SizableText fontFamily=\"$body\">Connections</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger theme=\"Button\" f={1} value=\"tab3\">\n <SizableText fontFamily=\"$body\">Notifications</SizableText>\n </Tabs.Trigger>\n </Tabs.List>\n\n <Tabs.Content value=\"tab1\" key=\"tab1\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n <H5>Profile</H5>\n </Tabs.Content>\n\n <Tabs.Content value=\"tab2\" key=\"tab2\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n <H5>Connections</H5>\n </Tabs.Content>\n\n <Tabs.Content value=\"tab3\" key=\"tab3\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n <H5>Notifications</H5>\n </Tabs.Content>\n </Tabs>\n )\n}\n\nconst VerticalTabs = () => {\n return (\n <Tabs\n defaultValue=\"tab1\"\n flexDirection=\"row\"\n orientation=\"vertical\"\n width={400}\n br=\"$4\"\n >\n <Tabs.List disablePassBorderRadius=\"end\" aria-label=\"Manage your account\">\n <Tabs.Trigger theme=\"Button\" value=\"tab1\">\n <SizableText
|
|
5
|
-
"mappings": "AAAA,SAAS,gBAAgB;AACzB,SAAS,QAAQ,IAAI,aAAa,MAAM,cAAc;AAEtD,MAAM,QAAQ,CAAC,cAAc,UAAU;AAEhC,SAAS,WAAW;AACzB,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,CAAC;AAC5C,QAAM,OAAO,MAAM,SAAS;AAE5B,SACE;AAAA,KACG,SAAS,eAAe,CAAC,eAAe,KAAK,CAAC,aAAa;AAAA,IAE5D,CAAC,OAAO,GAAG,SAAS,MAAM,IAAI,WAAW,EAAE,KAAK,EAAE,KAAK,MAAM,EAAE,KAAK,OAAO,GACzE,CAAC,OAAO,KAAK,KAAK,SAAS,MAAM,aAAa,CAAC,OAAO,IAAI,KAAK,MAAM,MAAM,IACxE,KACH,EAFC,OAGH,EAJC;AAAA,EAKH;AAEJ;AAEA,MAAM,iBAAiB,MAAM;AAC3B,SACE,CAAC;AAAA,IACC,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,GAAG;AAAA;AAAA,IAEH,CAAC,KAAK,KAAK,wBAAwB,SAAS,WAAW;AAAA,MACrD,CAAC,KAAK,QAAQ,MAAM,SAAS,GAAG,GAAG,MAAM,OACvC,CAAC,YAAY,WAAW,QAAQ,OAAO,EAAtC,YACH,EAFC,KAAK;AAAA,MAGN,CAAC,KAAK,QAAQ,MAAM,SAAS,GAAG,GAAG,MAAM,OACvC,CAAC,YAAY,WAAW,QAAQ,WAAW,EAA1C,YACH,EAFC,KAAK;AAAA,MAGN,CAAC,KAAK,QAAQ,MAAM,SAAS,GAAG,GAAG,MAAM,OACvC,CAAC,YAAY,WAAW,QAAQ,aAAa,EAA5C,YACH,EAFC,KAAK;AAAA,IAGR,EAVC,KAAK;AAAA,IAYN,CAAC,KAAK,QAAQ,MAAM,OAAO,IAAI,OAAO,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,GACtE,CAAC,GAAG,OAAO,EAAV,GACH,EAFC,KAAK;AAAA,IAIN,CAAC,KAAK,QAAQ,MAAM,OAAO,IAAI,OAAO,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,GACtE,CAAC,GAAG,WAAW,EAAd,GACH,EAFC,KAAK;AAAA,IAIN,CAAC,KAAK,QAAQ,MAAM,OAAO,IAAI,OAAO,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,GACtE,CAAC,GAAG,aAAa,EAAhB,GACH,EAFC,KAAK;AAAA,EAGR,EA/BC;AAiCL;AAEA,MAAM,eAAe,MAAM;AACzB,SACE,CAAC;AAAA,IACC,aAAa;AAAA,IACb,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,GAAG;AAAA;AAAA,IAEH,CAAC,KAAK,KAAK,wBAAwB,MAAM,WAAW;AAAA,MAClD,CAAC,KAAK,QAAQ,MAAM,SAAS,MAAM,OACjC,CAAC,YAAY,
|
|
4
|
+
"sourcesContent": ["import { useState } from 'react'\nimport { Button, H5, SizableText, Tabs, XStack } from 'tamagui'\n\nconst demos = ['horizontal', 'vertical'] as const\n\nexport function TabsDemo() {\n const [demoIndex, setDemoIndex] = useState(0)\n const demo = demos[demoIndex]\n\n return (\n <>\n {demo === 'horizontal' ? <HorizontalTabs /> : <VerticalTabs />}\n\n <XStack ai=\"center\" space pos=\"absolute\" b=\"$3\" l=\"$4\" $xxs={{ dsp: 'none' }}>\n <Button size=\"$2\" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>\n {demo}\n </Button>\n </XStack>\n </>\n )\n}\n\nconst HorizontalTabs = () => {\n return (\n <Tabs\n defaultValue=\"tab1\"\n orientation=\"horizontal\"\n flexDirection=\"column\"\n width={400}\n height={150}\n br=\"$4\"\n >\n <Tabs.List disablePassBorderRadius=\"bottom\" aria-label=\"Manage your account\">\n <Tabs.Trigger theme=\"Button\" f={1} value=\"tab1\">\n <SizableText fontFamily=\"$body\">Profile</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger theme=\"Button\" f={1} value=\"tab2\">\n <SizableText fontFamily=\"$body\">Connections</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger theme=\"Button\" f={1} value=\"tab3\">\n <SizableText fontFamily=\"$body\">Notifications</SizableText>\n </Tabs.Trigger>\n </Tabs.List>\n\n <Tabs.Content value=\"tab1\" key=\"tab1\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n <H5>Profile</H5>\n </Tabs.Content>\n\n <Tabs.Content value=\"tab2\" key=\"tab2\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n <H5>Connections</H5>\n </Tabs.Content>\n\n <Tabs.Content value=\"tab3\" key=\"tab3\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n <H5>Notifications</H5>\n </Tabs.Content>\n </Tabs>\n )\n}\n\nconst VerticalTabs = () => {\n return (\n <Tabs\n defaultValue=\"tab1\"\n flexDirection=\"row\"\n orientation=\"vertical\"\n width={400}\n br=\"$4\"\n >\n <Tabs.List disablePassBorderRadius=\"end\" aria-label=\"Manage your account\">\n <Tabs.Trigger theme=\"Button\" value=\"tab1\">\n <SizableText>Profile</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger theme=\"Button\" value=\"tab2\">\n <SizableText>Connections</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger theme=\"Button\" value=\"tab3\">\n <SizableText>Notifications</SizableText>\n </Tabs.Trigger>\n </Tabs.List>\n <Tabs.Content value=\"tab1\" key=\"tab1\" p=\"$2\" ai=\"center\" jc=\"center\" f={1}>\n <H5 ta=\"center\">Profile</H5>\n </Tabs.Content>\n <Tabs.Content value=\"tab2\" key=\"tab2\" p=\"$2\" ai=\"center\" jc=\"center\" f={1}>\n <H5 ta=\"center\">Connections</H5>\n </Tabs.Content>\n <Tabs.Content value=\"tab3\" key=\"tab3\" p=\"$2\" ai=\"center\" jc=\"center\" f={1}>\n <H5 ta=\"center\">Notifications</H5>\n </Tabs.Content>\n </Tabs>\n )\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/TabsDemo.mjs
CHANGED
|
@@ -37,9 +37,9 @@ const VerticalTabs = () => {
|
|
|
37
37
|
br="$4"
|
|
38
38
|
>
|
|
39
39
|
<Tabs.List disablePassBorderRadius="end" aria-label="Manage your account">
|
|
40
|
-
<Tabs.Trigger theme="Button" value="tab1"><SizableText
|
|
41
|
-
<Tabs.Trigger theme="Button" value="tab2"><SizableText
|
|
42
|
-
<Tabs.Trigger theme="Button" value="tab3"><SizableText
|
|
40
|
+
<Tabs.Trigger theme="Button" value="tab1"><SizableText>Profile</SizableText></Tabs.Trigger>
|
|
41
|
+
<Tabs.Trigger theme="Button" value="tab2"><SizableText>Connections</SizableText></Tabs.Trigger>
|
|
42
|
+
<Tabs.Trigger theme="Button" value="tab3"><SizableText>Notifications</SizableText></Tabs.Trigger>
|
|
43
43
|
</Tabs.List>
|
|
44
44
|
<Tabs.Content value="tab1" key="tab1" p="$2" ai="center" jc="center" f={1}><H5 ta="center">Profile</H5></Tabs.Content>
|
|
45
45
|
<Tabs.Content value="tab2" key="tab2" p="$2" ai="center" jc="center" f={1}><H5 ta="center">Connections</H5></Tabs.Content>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/TabsDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useState } from 'react'\nimport { Button, H5, SizableText, Tabs, XStack } from 'tamagui'\n\nconst demos = ['horizontal', 'vertical'] as const\n\nexport function TabsDemo() {\n const [demoIndex, setDemoIndex] = useState(0)\n const demo = demos[demoIndex]\n\n return (\n <>\n {demo === 'horizontal' ? <HorizontalTabs /> : <VerticalTabs />}\n\n <XStack ai=\"center\" space pos=\"absolute\" b=\"$3\" l=\"$4\" $xxs={{ dsp: 'none' }}>\n <Button size=\"$2\" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>\n {demo}\n </Button>\n </XStack>\n </>\n )\n}\n\nconst HorizontalTabs = () => {\n return (\n <Tabs\n defaultValue=\"tab1\"\n orientation=\"horizontal\"\n flexDirection=\"column\"\n width={400}\n height={150}\n br=\"$4\"\n >\n <Tabs.List disablePassBorderRadius=\"bottom\" aria-label=\"Manage your account\">\n <Tabs.Trigger theme=\"Button\" f={1} value=\"tab1\">\n <SizableText fontFamily=\"$body\">Profile</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger theme=\"Button\" f={1} value=\"tab2\">\n <SizableText fontFamily=\"$body\">Connections</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger theme=\"Button\" f={1} value=\"tab3\">\n <SizableText fontFamily=\"$body\">Notifications</SizableText>\n </Tabs.Trigger>\n </Tabs.List>\n\n <Tabs.Content value=\"tab1\" key=\"tab1\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n <H5>Profile</H5>\n </Tabs.Content>\n\n <Tabs.Content value=\"tab2\" key=\"tab2\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n <H5>Connections</H5>\n </Tabs.Content>\n\n <Tabs.Content value=\"tab3\" key=\"tab3\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n <H5>Notifications</H5>\n </Tabs.Content>\n </Tabs>\n )\n}\n\nconst VerticalTabs = () => {\n return (\n <Tabs\n defaultValue=\"tab1\"\n flexDirection=\"row\"\n orientation=\"vertical\"\n width={400}\n br=\"$4\"\n >\n <Tabs.List disablePassBorderRadius=\"end\" aria-label=\"Manage your account\">\n <Tabs.Trigger theme=\"Button\" value=\"tab1\">\n <SizableText
|
|
5
|
-
"mappings": "AAAA,SAAS,gBAAgB;AACzB,SAAS,QAAQ,IAAI,aAAa,MAAM,cAAc;AAEtD,MAAM,QAAQ,CAAC,cAAc,UAAU;AAEhC,SAAS,WAAW;AACzB,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,CAAC;AAC5C,QAAM,OAAO,MAAM,SAAS;AAE5B,SACE;AAAA,KACG,SAAS,eAAe,CAAC,eAAe,KAAK,CAAC,aAAa;AAAA,IAE5D,CAAC,OAAO,GAAG,SAAS,MAAM,IAAI,WAAW,EAAE,KAAK,EAAE,KAAK,MAAM,EAAE,KAAK,OAAO,GACzE,CAAC,OAAO,KAAK,KAAK,SAAS,MAAM,aAAa,CAAC,OAAO,IAAI,KAAK,MAAM,MAAM,IACxE,KACH,EAFC,OAGH,EAJC;AAAA,EAKH;AAEJ;AAEA,MAAM,iBAAiB,MAAM;AAC3B,SACE,CAAC;AAAA,IACC,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,GAAG;AAAA;AAAA,IAEH,CAAC,KAAK,KAAK,wBAAwB,SAAS,WAAW;AAAA,MACrD,CAAC,KAAK,QAAQ,MAAM,SAAS,GAAG,GAAG,MAAM,OACvC,CAAC,YAAY,WAAW,QAAQ,OAAO,EAAtC,YACH,EAFC,KAAK;AAAA,MAGN,CAAC,KAAK,QAAQ,MAAM,SAAS,GAAG,GAAG,MAAM,OACvC,CAAC,YAAY,WAAW,QAAQ,WAAW,EAA1C,YACH,EAFC,KAAK;AAAA,MAGN,CAAC,KAAK,QAAQ,MAAM,SAAS,GAAG,GAAG,MAAM,OACvC,CAAC,YAAY,WAAW,QAAQ,aAAa,EAA5C,YACH,EAFC,KAAK;AAAA,IAGR,EAVC,KAAK;AAAA,IAYN,CAAC,KAAK,QAAQ,MAAM,OAAO,IAAI,OAAO,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,GACtE,CAAC,GAAG,OAAO,EAAV,GACH,EAFC,KAAK;AAAA,IAIN,CAAC,KAAK,QAAQ,MAAM,OAAO,IAAI,OAAO,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,GACtE,CAAC,GAAG,WAAW,EAAd,GACH,EAFC,KAAK;AAAA,IAIN,CAAC,KAAK,QAAQ,MAAM,OAAO,IAAI,OAAO,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,GACtE,CAAC,GAAG,aAAa,EAAhB,GACH,EAFC,KAAK;AAAA,EAGR,EA/BC;AAiCL;AAEA,MAAM,eAAe,MAAM;AACzB,SACE,CAAC;AAAA,IACC,aAAa;AAAA,IACb,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,GAAG;AAAA;AAAA,IAEH,CAAC,KAAK,KAAK,wBAAwB,MAAM,WAAW;AAAA,MAClD,CAAC,KAAK,QAAQ,MAAM,SAAS,MAAM,OACjC,CAAC,YAAY,
|
|
4
|
+
"sourcesContent": ["import { useState } from 'react'\nimport { Button, H5, SizableText, Tabs, XStack } from 'tamagui'\n\nconst demos = ['horizontal', 'vertical'] as const\n\nexport function TabsDemo() {\n const [demoIndex, setDemoIndex] = useState(0)\n const demo = demos[demoIndex]\n\n return (\n <>\n {demo === 'horizontal' ? <HorizontalTabs /> : <VerticalTabs />}\n\n <XStack ai=\"center\" space pos=\"absolute\" b=\"$3\" l=\"$4\" $xxs={{ dsp: 'none' }}>\n <Button size=\"$2\" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>\n {demo}\n </Button>\n </XStack>\n </>\n )\n}\n\nconst HorizontalTabs = () => {\n return (\n <Tabs\n defaultValue=\"tab1\"\n orientation=\"horizontal\"\n flexDirection=\"column\"\n width={400}\n height={150}\n br=\"$4\"\n >\n <Tabs.List disablePassBorderRadius=\"bottom\" aria-label=\"Manage your account\">\n <Tabs.Trigger theme=\"Button\" f={1} value=\"tab1\">\n <SizableText fontFamily=\"$body\">Profile</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger theme=\"Button\" f={1} value=\"tab2\">\n <SizableText fontFamily=\"$body\">Connections</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger theme=\"Button\" f={1} value=\"tab3\">\n <SizableText fontFamily=\"$body\">Notifications</SizableText>\n </Tabs.Trigger>\n </Tabs.List>\n\n <Tabs.Content value=\"tab1\" key=\"tab1\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n <H5>Profile</H5>\n </Tabs.Content>\n\n <Tabs.Content value=\"tab2\" key=\"tab2\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n <H5>Connections</H5>\n </Tabs.Content>\n\n <Tabs.Content value=\"tab3\" key=\"tab3\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n <H5>Notifications</H5>\n </Tabs.Content>\n </Tabs>\n )\n}\n\nconst VerticalTabs = () => {\n return (\n <Tabs\n defaultValue=\"tab1\"\n flexDirection=\"row\"\n orientation=\"vertical\"\n width={400}\n br=\"$4\"\n >\n <Tabs.List disablePassBorderRadius=\"end\" aria-label=\"Manage your account\">\n <Tabs.Trigger theme=\"Button\" value=\"tab1\">\n <SizableText>Profile</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger theme=\"Button\" value=\"tab2\">\n <SizableText>Connections</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger theme=\"Button\" value=\"tab3\">\n <SizableText>Notifications</SizableText>\n </Tabs.Trigger>\n </Tabs.List>\n <Tabs.Content value=\"tab1\" key=\"tab1\" p=\"$2\" ai=\"center\" jc=\"center\" f={1}>\n <H5 ta=\"center\">Profile</H5>\n </Tabs.Content>\n <Tabs.Content value=\"tab2\" key=\"tab2\" p=\"$2\" ai=\"center\" jc=\"center\" f={1}>\n <H5 ta=\"center\">Connections</H5>\n </Tabs.Content>\n <Tabs.Content value=\"tab3\" key=\"tab3\" p=\"$2\" ai=\"center\" jc=\"center\" f={1}>\n <H5 ta=\"center\">Notifications</H5>\n </Tabs.Content>\n </Tabs>\n )\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/demos",
|
|
3
|
-
"version": "1.7.
|
|
3
|
+
"version": "1.7.2",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -28,28 +28,28 @@
|
|
|
28
28
|
}
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@tamagui/avatar": "1.7.
|
|
32
|
-
"@tamagui/button": "1.7.
|
|
33
|
-
"@tamagui/config": "1.7.
|
|
34
|
-
"@tamagui/core": "1.7.
|
|
35
|
-
"@tamagui/list-item": "1.7.
|
|
36
|
-
"@tamagui/logo": "1.7.
|
|
37
|
-
"@tamagui/menu": "1.7.
|
|
38
|
-
"@tamagui/popover": "1.7.
|
|
39
|
-
"@tamagui/progress": "1.7.
|
|
40
|
-
"@tamagui/radio-group": "1.7.
|
|
41
|
-
"@tamagui/select": "1.7.
|
|
42
|
-
"@tamagui/sheet": "1.7.
|
|
43
|
-
"@tamagui/slider": "1.7.
|
|
44
|
-
"@tamagui/stacks": "1.7.
|
|
45
|
-
"tamagui": "1.7.
|
|
31
|
+
"@tamagui/avatar": "1.7.2",
|
|
32
|
+
"@tamagui/button": "1.7.2",
|
|
33
|
+
"@tamagui/config": "1.7.2",
|
|
34
|
+
"@tamagui/core": "1.7.2",
|
|
35
|
+
"@tamagui/list-item": "1.7.2",
|
|
36
|
+
"@tamagui/logo": "1.7.2",
|
|
37
|
+
"@tamagui/menu": "1.7.2",
|
|
38
|
+
"@tamagui/popover": "1.7.2",
|
|
39
|
+
"@tamagui/progress": "1.7.2",
|
|
40
|
+
"@tamagui/radio-group": "1.7.2",
|
|
41
|
+
"@tamagui/select": "1.7.2",
|
|
42
|
+
"@tamagui/sheet": "1.7.2",
|
|
43
|
+
"@tamagui/slider": "1.7.2",
|
|
44
|
+
"@tamagui/stacks": "1.7.2",
|
|
45
|
+
"tamagui": "1.7.2"
|
|
46
46
|
},
|
|
47
47
|
"peerDependencies": {
|
|
48
48
|
"react": "*",
|
|
49
49
|
"react-dom": "*"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
|
-
"@tamagui/build": "1.7.
|
|
52
|
+
"@tamagui/build": "1.7.2",
|
|
53
53
|
"react": "^18.2.0",
|
|
54
54
|
"react-dom": "^18.2.0"
|
|
55
55
|
},
|
package/src/TabsDemo.tsx
CHANGED
|
@@ -68,13 +68,13 @@ const VerticalTabs = () => {
|
|
|
68
68
|
>
|
|
69
69
|
<Tabs.List disablePassBorderRadius="end" aria-label="Manage your account">
|
|
70
70
|
<Tabs.Trigger theme="Button" value="tab1">
|
|
71
|
-
<SizableText
|
|
71
|
+
<SizableText>Profile</SizableText>
|
|
72
72
|
</Tabs.Trigger>
|
|
73
73
|
<Tabs.Trigger theme="Button" value="tab2">
|
|
74
|
-
<SizableText
|
|
74
|
+
<SizableText>Connections</SizableText>
|
|
75
75
|
</Tabs.Trigger>
|
|
76
76
|
<Tabs.Trigger theme="Button" value="tab3">
|
|
77
|
-
<SizableText
|
|
77
|
+
<SizableText>Notifications</SizableText>
|
|
78
78
|
</Tabs.Trigger>
|
|
79
79
|
</Tabs.List>
|
|
80
80
|
<Tabs.Content value="tab1" key="tab1" p="$2" ai="center" jc="center" f={1}>
|