@tamagui/demos 1.22.8 → 1.22.10

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 (13) hide show
  1. package/dist/cjs/ThemeInverseDemo.js +31 -9
  2. package/dist/cjs/ThemeInverseDemo.js.map +1 -1
  3. package/dist/esm/ThemeInverseDemo.js +32 -10
  4. package/dist/esm/ThemeInverseDemo.js.map +1 -1
  5. package/dist/esm/ThemeInverseDemo.mjs +32 -10
  6. package/dist/esm/ThemeInverseDemo.mjs.map +1 -1
  7. package/dist/jsx/ThemeInverseDemo.js +24 -9
  8. package/dist/jsx/ThemeInverseDemo.js.map +1 -1
  9. package/dist/jsx/ThemeInverseDemo.mjs +24 -9
  10. package/dist/jsx/ThemeInverseDemo.mjs.map +1 -1
  11. package/package.json +18 -18
  12. package/src/ThemeInverseDemo.tsx +22 -9
  13. package/types/ThemeInverseDemo.d.ts.map +1 -1
package/dist/cjs/ThemeInverseDemo.js CHANGED
@@ -24,18 +24,40 @@ module.exports = __toCommonJS(ThemeInverseDemo_exports);
24
24
  var import_jsx_runtime = require("react/jsx-runtime");
25
25
  var import_tamagui = require("tamagui");
26
26
  function ThemeInverseDemo() {
27
+ const themeName = (0, import_tamagui.useThemeName)();
28
+ const opposite = themeName.includes("dark") ? "light" : "dark";
27
29
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { space: true, children: [
28
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Buttons, {}),
29
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Theme, { inverse: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Buttons, {}) })
30
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Buttons, { title: "Normal", name: themeName }),
31
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Theme, { inverse: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
32
+ Buttons,
33
+ {
34
+ title: "Inversed",
35
+ name: themeName.replace(themeName.split("_")[0], opposite)
36
+ }
37
+ ) })
30
38
  ] });
31
39
  }
32
- function Buttons() {
33
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { backgroundColor: "$background", padding: "$3", borderRadius: "$3", space: true, children: [
34
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { children: "Dark" }),
35
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { themeInverse: true, children: "Inversed" }),
36
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { theme: "alt1", children: "Alt1 Dark" }),
37
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Theme, { name: "yellow", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { children: "Yellow dark" }) })
38
- ] });
40
+ function Buttons(props) {
41
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
42
+ import_tamagui.YStack,
43
+ {
44
+ elevation: "$4",
45
+ backgroundColor: "$background",
46
+ padding: "$4",
47
+ borderRadius: "$4",
48
+ space: "$3",
49
+ children: [
50
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { children: props.title }),
51
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { children: props.name }),
52
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { themeInverse: true, children: "inversed" }),
53
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Button, { theme: "alt1", children: [
54
+ props.name,
55
+ "_alt1"
56
+ ] }),
57
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Theme, { name: "yellow", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { children: props.name.split("_")[0] + "_yellow" }) })
58
+ ]
59
+ }
60
+ );
39
61
  }
40
62
  // Annotate the CommonJS export names for ESM import in node:
41
63
  0 && (module.exports = {
package/dist/cjs/ThemeInverseDemo.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/ThemeInverseDemo.tsx"],
4
- "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAII;AAJJ,qBAA8C;AAEvC,SAAS,mBAAmB;AACjC,SACE,6CAAC,yBAAO,OAAK,MACX;AAAA,gDAAC,WAAQ;AAAA,IACT,4CAAC,wBAAM,SAAO,MACZ,sDAAC,WAAQ,GACX;AAAA,KACF;AAEJ;AAEA,SAAS,UAAU;AACjB,SACE,6CAAC,yBAAO,iBAAgB,eAAc,SAAQ,MAAK,cAAa,MAAK,OAAK,MACxE;AAAA,gDAAC,yBAAO,kBAAI;AAAA,IACZ,4CAAC,yBAAO,cAAY,MAAC,sBAAQ;AAAA,IAC7B,4CAAC,yBAAO,OAAM,QAAO,uBAAS;AAAA,IAC9B,4CAAC,wBAAM,MAAK,UACV,sDAAC,yBAAO,yBAAW,GACrB;AAAA,KACF;AAEJ;",
4
+ "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOI;AAPJ,qBAAgE;AAEzD,SAAS,mBAAmB;AACjC,QAAM,gBAAY,6BAAa;AAC/B,QAAM,WAAW,UAAU,SAAS,MAAM,IAAI,UAAU;AAExD,SACE,6CAAC,yBAAO,OAAK,MACX;AAAA,gDAAC,WAAQ,OAAM,UAAS,MAAM,WAAW;AAAA,IACzC,4CAAC,wBAAM,SAAO,MACZ;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,MAAM,UAAU,QAAQ,UAAU,MAAM,GAAG,EAAE,CAAC,GAAG,QAAQ;AAAA;AAAA,IAC3D,GACF;AAAA,KACF;AAEJ;AAEA,SAAS,QAAQ,OAAwC;AACvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,iBAAgB;AAAA,MAChB,SAAQ;AAAA,MACR,cAAa;AAAA,MACb,OAAM;AAAA,MAEN;AAAA,oDAAC,qBAAI,gBAAM,OAAM;AAAA,QACjB,4CAAC,yBAAQ,gBAAM,MAAK;AAAA,QACpB,4CAAC,yBAAO,cAAY,MAAC,sBAAQ;AAAA,QAC7B,6CAAC,yBAAO,OAAM,QAAQ;AAAA,gBAAM;AAAA,UAAK;AAAA,WAAK;AAAA,QACtC,4CAAC,wBAAM,MAAK,UACV,sDAAC,yBAAQ,gBAAM,KAAK,MAAM,GAAG,EAAE,CAAC,IAAI,WAAU,GAChD;AAAA;AAAA;AAAA,EACF;AAEJ;",
5
5
  "names": []
6
6
  }
package/dist/esm/ThemeInverseDemo.js CHANGED
@@ -1,18 +1,40 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
- import { Button, Theme, XStack, YStack } from "tamagui";
2
+ import { Button, H5, Theme, XStack, YStack, useThemeName } from "tamagui";
3
3
  function ThemeInverseDemo() {
4
+ const themeName = useThemeName();
5
+ const opposite = themeName.includes("dark") ? "light" : "dark";
4
6
  return /* @__PURE__ */ jsxs(XStack, { space: true, children: [
5
- /* @__PURE__ */ jsx(Buttons, {}),
6
- /* @__PURE__ */ jsx(Theme, { inverse: true, children: /* @__PURE__ */ jsx(Buttons, {}) })
7
+ /* @__PURE__ */ jsx(Buttons, { title: "Normal", name: themeName }),
8
+ /* @__PURE__ */ jsx(Theme, { inverse: true, children: /* @__PURE__ */ jsx(
9
+ Buttons,
10
+ {
11
+ title: "Inversed",
12
+ name: themeName.replace(themeName.split("_")[0], opposite)
13
+ }
14
+ ) })
7
15
  ] });
8
16
  }
9
- function Buttons() {
10
- return /* @__PURE__ */ jsxs(YStack, { backgroundColor: "$background", padding: "$3", borderRadius: "$3", space: true, children: [
11
- /* @__PURE__ */ jsx(Button, { children: "Dark" }),
12
- /* @__PURE__ */ jsx(Button, { themeInverse: true, children: "Inversed" }),
13
- /* @__PURE__ */ jsx(Button, { theme: "alt1", children: "Alt1 Dark" }),
14
- /* @__PURE__ */ jsx(Theme, { name: "yellow", children: /* @__PURE__ */ jsx(Button, { children: "Yellow dark" }) })
15
- ] });
17
+ function Buttons(props) {
18
+ return /* @__PURE__ */ jsxs(
19
+ YStack,
20
+ {
21
+ elevation: "$4",
22
+ backgroundColor: "$background",
23
+ padding: "$4",
24
+ borderRadius: "$4",
25
+ space: "$3",
26
+ children: [
27
+ /* @__PURE__ */ jsx(H5, { children: props.title }),
28
+ /* @__PURE__ */ jsx(Button, { children: props.name }),
29
+ /* @__PURE__ */ jsx(Button, { themeInverse: true, children: "inversed" }),
30
+ /* @__PURE__ */ jsxs(Button, { theme: "alt1", children: [
31
+ props.name,
32
+ "_alt1"
33
+ ] }),
34
+ /* @__PURE__ */ jsx(Theme, { name: "yellow", children: /* @__PURE__ */ jsx(Button, { children: props.name.split("_")[0] + "_yellow" }) })
35
+ ]
36
+ }
37
+ );
16
38
  }
17
39
  export {
18
40
  ThemeInverseDemo
package/dist/esm/ThemeInverseDemo.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/ThemeInverseDemo.tsx"],
4
- "mappings": "AAII,SACE,KADF;AAJJ,SAAS,QAAQ,OAAO,QAAQ,cAAc;AAEvC,SAAS,mBAAmB;AACjC,SACE,qBAAC,UAAO,OAAK,MACX;AAAA,wBAAC,WAAQ;AAAA,IACT,oBAAC,SAAM,SAAO,MACZ,8BAAC,WAAQ,GACX;AAAA,KACF;AAEJ;AAEA,SAAS,UAAU;AACjB,SACE,qBAAC,UAAO,iBAAgB,eAAc,SAAQ,MAAK,cAAa,MAAK,OAAK,MACxE;AAAA,wBAAC,UAAO,kBAAI;AAAA,IACZ,oBAAC,UAAO,cAAY,MAAC,sBAAQ;AAAA,IAC7B,oBAAC,UAAO,OAAM,QAAO,uBAAS;AAAA,IAC9B,oBAAC,SAAM,MAAK,UACV,8BAAC,UAAO,yBAAW,GACrB;AAAA,KACF;AAEJ;",
4
+ "mappings": "AAOI,SACE,KADF;AAPJ,SAAS,QAAQ,IAAI,OAAO,QAAQ,QAAQ,oBAAoB;AAEzD,SAAS,mBAAmB;AACjC,QAAM,YAAY,aAAa;AAC/B,QAAM,WAAW,UAAU,SAAS,MAAM,IAAI,UAAU;AAExD,SACE,qBAAC,UAAO,OAAK,MACX;AAAA,wBAAC,WAAQ,OAAM,UAAS,MAAM,WAAW;AAAA,IACzC,oBAAC,SAAM,SAAO,MACZ;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,MAAM,UAAU,QAAQ,UAAU,MAAM,GAAG,EAAE,CAAC,GAAG,QAAQ;AAAA;AAAA,IAC3D,GACF;AAAA,KACF;AAEJ;AAEA,SAAS,QAAQ,OAAwC;AACvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,iBAAgB;AAAA,MAChB,SAAQ;AAAA,MACR,cAAa;AAAA,MACb,OAAM;AAAA,MAEN;AAAA,4BAAC,MAAI,gBAAM,OAAM;AAAA,QACjB,oBAAC,UAAQ,gBAAM,MAAK;AAAA,QACpB,oBAAC,UAAO,cAAY,MAAC,sBAAQ;AAAA,QAC7B,qBAAC,UAAO,OAAM,QAAQ;AAAA,gBAAM;AAAA,UAAK;AAAA,WAAK;AAAA,QACtC,oBAAC,SAAM,MAAK,UACV,8BAAC,UAAQ,gBAAM,KAAK,MAAM,GAAG,EAAE,CAAC,IAAI,WAAU,GAChD;AAAA;AAAA;AAAA,EACF;AAEJ;",
5
5
  "names": []
6
6
  }
package/dist/esm/ThemeInverseDemo.mjs CHANGED
@@ -1,18 +1,40 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
- import { Button, Theme, XStack, YStack } from "tamagui";
2
+ import { Button, H5, Theme, XStack, YStack, useThemeName } from "tamagui";
3
3
  function ThemeInverseDemo() {
4
+ const themeName = useThemeName();
5
+ const opposite = themeName.includes("dark") ? "light" : "dark";
4
6
  return /* @__PURE__ */ jsxs(XStack, { space: true, children: [
5
- /* @__PURE__ */ jsx(Buttons, {}),
6
- /* @__PURE__ */ jsx(Theme, { inverse: true, children: /* @__PURE__ */ jsx(Buttons, {}) })
7
+ /* @__PURE__ */ jsx(Buttons, { title: "Normal", name: themeName }),
8
+ /* @__PURE__ */ jsx(Theme, { inverse: true, children: /* @__PURE__ */ jsx(
9
+ Buttons,
10
+ {
11
+ title: "Inversed",
12
+ name: themeName.replace(themeName.split("_")[0], opposite)
13
+ }
14
+ ) })
7
15
  ] });
8
16
  }
9
- function Buttons() {
10
- return /* @__PURE__ */ jsxs(YStack, { backgroundColor: "$background", padding: "$3", borderRadius: "$3", space: true, children: [
11
- /* @__PURE__ */ jsx(Button, { children: "Dark" }),
12
- /* @__PURE__ */ jsx(Button, { themeInverse: true, children: "Inversed" }),
13
- /* @__PURE__ */ jsx(Button, { theme: "alt1", children: "Alt1 Dark" }),
14
- /* @__PURE__ */ jsx(Theme, { name: "yellow", children: /* @__PURE__ */ jsx(Button, { children: "Yellow dark" }) })
15
- ] });
17
+ function Buttons(props) {
18
+ return /* @__PURE__ */ jsxs(
19
+ YStack,
20
+ {
21
+ elevation: "$4",
22
+ backgroundColor: "$background",
23
+ padding: "$4",
24
+ borderRadius: "$4",
25
+ space: "$3",
26
+ children: [
27
+ /* @__PURE__ */ jsx(H5, { children: props.title }),
28
+ /* @__PURE__ */ jsx(Button, { children: props.name }),
29
+ /* @__PURE__ */ jsx(Button, { themeInverse: true, children: "inversed" }),
30
+ /* @__PURE__ */ jsxs(Button, { theme: "alt1", children: [
31
+ props.name,
32
+ "_alt1"
33
+ ] }),
34
+ /* @__PURE__ */ jsx(Theme, { name: "yellow", children: /* @__PURE__ */ jsx(Button, { children: props.name.split("_")[0] + "_yellow" }) })
35
+ ]
36
+ }
37
+ );
16
38
  }
17
39
  export {
18
40
  ThemeInverseDemo
package/dist/esm/ThemeInverseDemo.mjs.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/ThemeInverseDemo.tsx"],
4
- "mappings": "AAII,SACE,KADF;AAJJ,SAAS,QAAQ,OAAO,QAAQ,cAAc;AAEvC,SAAS,mBAAmB;AACjC,SACE,qBAAC,UAAO,OAAK,MACX;AAAA,wBAAC,WAAQ;AAAA,IACT,oBAAC,SAAM,SAAO,MACZ,8BAAC,WAAQ,GACX;AAAA,KACF;AAEJ;AAEA,SAAS,UAAU;AACjB,SACE,qBAAC,UAAO,iBAAgB,eAAc,SAAQ,MAAK,cAAa,MAAK,OAAK,MACxE;AAAA,wBAAC,UAAO,kBAAI;AAAA,IACZ,oBAAC,UAAO,cAAY,MAAC,sBAAQ;AAAA,IAC7B,oBAAC,UAAO,OAAM,QAAO,uBAAS;AAAA,IAC9B,oBAAC,SAAM,MAAK,UACV,8BAAC,UAAO,yBAAW,GACrB;AAAA,KACF;AAEJ;",
4
+ "mappings": "AAOI,SACE,KADF;AAPJ,SAAS,QAAQ,IAAI,OAAO,QAAQ,QAAQ,oBAAoB;AAEzD,SAAS,mBAAmB;AACjC,QAAM,YAAY,aAAa;AAC/B,QAAM,WAAW,UAAU,SAAS,MAAM,IAAI,UAAU;AAExD,SACE,qBAAC,UAAO,OAAK,MACX;AAAA,wBAAC,WAAQ,OAAM,UAAS,MAAM,WAAW;AAAA,IACzC,oBAAC,SAAM,SAAO,MACZ;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,MAAM,UAAU,QAAQ,UAAU,MAAM,GAAG,EAAE,CAAC,GAAG,QAAQ;AAAA;AAAA,IAC3D,GACF;AAAA,KACF;AAEJ;AAEA,SAAS,QAAQ,OAAwC;AACvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,iBAAgB;AAAA,MAChB,SAAQ;AAAA,MACR,cAAa;AAAA,MACb,OAAM;AAAA,MAEN;AAAA,4BAAC,MAAI,gBAAM,OAAM;AAAA,QACjB,oBAAC,UAAQ,gBAAM,MAAK;AAAA,QACpB,oBAAC,UAAO,cAAY,MAAC,sBAAQ;AAAA,QAC7B,qBAAC,UAAO,OAAM,QAAQ;AAAA,gBAAM;AAAA,UAAK;AAAA,WAAK;AAAA,QACtC,oBAAC,SAAM,MAAK,UACV,8BAAC,UAAQ,gBAAM,KAAK,MAAM,GAAG,EAAE,CAAC,IAAI,WAAU,GAChD;AAAA;AAAA;AAAA,EACF;AAEJ;",
5
5
  "names": []
6
6
  }
package/dist/jsx/ThemeInverseDemo.js CHANGED
@@ -1,16 +1,31 @@
1
- import { Button, Theme, XStack, YStack } from "tamagui";
1
+ import { Button, H5, Theme, XStack, YStack, useThemeName } from "tamagui";
2
2
  function ThemeInverseDemo() {
3
+ const themeName = useThemeName();
4
+ const opposite = themeName.includes("dark") ? "light" : "dark";
3
5
  return <XStack space>
4
- <Buttons />
5
- <Theme inverse><Buttons /></Theme>
6
+ <Buttons title="Normal" name={themeName} />
7
+ <Theme inverse><Buttons
8
+ title="Inversed"
9
+ name={themeName.replace(themeName.split("_")[0], opposite)}
10
+ /></Theme>
6
11
  </XStack>;
7
12
  }
8
- function Buttons() {
9
- return <YStack backgroundColor="$background" padding="$3" borderRadius="$3" space>
10
- <Button>Dark</Button>
11
- <Button themeInverse>Inversed</Button>
12
- <Button theme="alt1">Alt1 Dark</Button>
13
- <Theme name="yellow"><Button>Yellow dark</Button></Theme>
13
+ function Buttons(props) {
14
+ return <YStack
15
+ elevation="$4"
16
+ backgroundColor="$background"
17
+ padding="$4"
18
+ borderRadius="$4"
19
+ space="$3"
20
+ >
21
+ <H5>{props.title}</H5>
22
+ <Button>{props.name}</Button>
23
+ <Button themeInverse>inversed</Button>
24
+ <Button theme="alt1">
25
+ {props.name}
26
+ {"_alt1"}
27
+ </Button>
28
+ <Theme name="yellow"><Button>{props.name.split("_")[0] + "_yellow"}</Button></Theme>
14
29
  </YStack>;
15
30
  }
16
31
  export {
package/dist/jsx/ThemeInverseDemo.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/ThemeInverseDemo.tsx"],
4
- "mappings": "AAAA,SAAS,QAAQ,OAAO,QAAQ,cAAc;AAEvC,SAAS,mBAAmB;AACjC,SACE,CAAC,OAAO;AAAA,IACN,CAAC,QAAQ;AAAA,IACT,CAAC,MAAM,QACL,CAAC,QAAQ,EACX,EAFC;AAAA,EAGH,EALC;AAOL;AAEA,SAAS,UAAU;AACjB,SACE,CAAC,OAAO,gBAAgB,cAAc,QAAQ,KAAK,aAAa,KAAK;AAAA,IACnE,CAAC,OAAO,IAAI,EAAX;AAAA,IACD,CAAC,OAAO,aAAa,QAAQ,EAA5B;AAAA,IACD,CAAC,OAAO,MAAM,OAAO,SAAS,EAA7B;AAAA,IACD,CAAC,MAAM,KAAK,SACV,CAAC,OAAO,WAAW,EAAlB,OACH,EAFC;AAAA,EAGH,EAPC;AASL;",
4
+ "mappings": "AAAA,SAAS,QAAQ,IAAI,OAAO,QAAQ,QAAQ,oBAAoB;AAEzD,SAAS,mBAAmB;AACjC,QAAM,YAAY,aAAa;AAC/B,QAAM,WAAW,UAAU,SAAS,MAAM,IAAI,UAAU;AAExD,SACE,CAAC,OAAO;AAAA,IACN,CAAC,QAAQ,MAAM,SAAS,MAAM,WAAW;AAAA,IACzC,CAAC,MAAM,QACL,CAAC;AAAA,MACC,MAAM;AAAA,MACN,MAAM,UAAU,QAAQ,UAAU,MAAM,GAAG,EAAE,CAAC,GAAG,QAAQ;AAAA,IAC3D,EACF,EALC;AAAA,EAMH,EARC;AAUL;AAEA,SAAS,QAAQ,OAAwC;AACvD,SACE,CAAC;AAAA,IACC,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,MAAM;AAAA;AAAA,IAEN,CAAC,IAAI,MAAM,MAAM,EAAhB;AAAA,IACD,CAAC,QAAQ,MAAM,KAAK,EAAnB;AAAA,IACD,CAAC,OAAO,aAAa,QAAQ,EAA5B;AAAA,IACD,CAAC,OAAO,MAAM;AAAA,OAAQ,MAAM;AAAA,OAAK;AAAA,IAAK,EAArC;AAAA,IACD,CAAC,MAAM,KAAK,SACV,CAAC,QAAQ,MAAM,KAAK,MAAM,GAAG,EAAE,CAAC,IAAI,UAAU,EAA7C,OACH,EAFC;AAAA,EAGH,EAdC;AAgBL;",
5
5
  "names": []
6
6
  }
package/dist/jsx/ThemeInverseDemo.mjs CHANGED
@@ -1,16 +1,31 @@
1
- import { Button, Theme, XStack, YStack } from "tamagui";
1
+ import { Button, H5, Theme, XStack, YStack, useThemeName } from "tamagui";
2
2
  function ThemeInverseDemo() {
3
+ const themeName = useThemeName();
4
+ const opposite = themeName.includes("dark") ? "light" : "dark";
3
5
  return <XStack space>
4
- <Buttons />
5
- <Theme inverse><Buttons /></Theme>
6
+ <Buttons title="Normal" name={themeName} />
7
+ <Theme inverse><Buttons
8
+ title="Inversed"
9
+ name={themeName.replace(themeName.split("_")[0], opposite)}
10
+ /></Theme>
6
11
  </XStack>;
7
12
  }
8
- function Buttons() {
9
- return <YStack backgroundColor="$background" padding="$3" borderRadius="$3" space>
10
- <Button>Dark</Button>
11
- <Button themeInverse>Inversed</Button>
12
- <Button theme="alt1">Alt1 Dark</Button>
13
- <Theme name="yellow"><Button>Yellow dark</Button></Theme>
13
+ function Buttons(props) {
14
+ return <YStack
15
+ elevation="$4"
16
+ backgroundColor="$background"
17
+ padding="$4"
18
+ borderRadius="$4"
19
+ space="$3"
20
+ >
21
+ <H5>{props.title}</H5>
22
+ <Button>{props.name}</Button>
23
+ <Button themeInverse>inversed</Button>
24
+ <Button theme="alt1">
25
+ {props.name}
26
+ {"_alt1"}
27
+ </Button>
28
+ <Theme name="yellow"><Button>{props.name.split("_")[0] + "_yellow"}</Button></Theme>
14
29
  </YStack>;
15
30
  }
16
31
  export {
package/dist/jsx/ThemeInverseDemo.mjs.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/ThemeInverseDemo.tsx"],
4
- "mappings": "AAAA,SAAS,QAAQ,OAAO,QAAQ,cAAc;AAEvC,SAAS,mBAAmB;AACjC,SACE,CAAC,OAAO;AAAA,IACN,CAAC,QAAQ;AAAA,IACT,CAAC,MAAM,QACL,CAAC,QAAQ,EACX,EAFC;AAAA,EAGH,EALC;AAOL;AAEA,SAAS,UAAU;AACjB,SACE,CAAC,OAAO,gBAAgB,cAAc,QAAQ,KAAK,aAAa,KAAK;AAAA,IACnE,CAAC,OAAO,IAAI,EAAX;AAAA,IACD,CAAC,OAAO,aAAa,QAAQ,EAA5B;AAAA,IACD,CAAC,OAAO,MAAM,OAAO,SAAS,EAA7B;AAAA,IACD,CAAC,MAAM,KAAK,SACV,CAAC,OAAO,WAAW,EAAlB,OACH,EAFC;AAAA,EAGH,EAPC;AASL;",
4
+ "mappings": "AAAA,SAAS,QAAQ,IAAI,OAAO,QAAQ,QAAQ,oBAAoB;AAEzD,SAAS,mBAAmB;AACjC,QAAM,YAAY,aAAa;AAC/B,QAAM,WAAW,UAAU,SAAS,MAAM,IAAI,UAAU;AAExD,SACE,CAAC,OAAO;AAAA,IACN,CAAC,QAAQ,MAAM,SAAS,MAAM,WAAW;AAAA,IACzC,CAAC,MAAM,QACL,CAAC;AAAA,MACC,MAAM;AAAA,MACN,MAAM,UAAU,QAAQ,UAAU,MAAM,GAAG,EAAE,CAAC,GAAG,QAAQ;AAAA,IAC3D,EACF,EALC;AAAA,EAMH,EARC;AAUL;AAEA,SAAS,QAAQ,OAAwC;AACvD,SACE,CAAC;AAAA,IACC,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,MAAM;AAAA;AAAA,IAEN,CAAC,IAAI,MAAM,MAAM,EAAhB;AAAA,IACD,CAAC,QAAQ,MAAM,KAAK,EAAnB;AAAA,IACD,CAAC,OAAO,aAAa,QAAQ,EAA5B;AAAA,IACD,CAAC,OAAO,MAAM;AAAA,OAAQ,MAAM;AAAA,OAAK;AAAA,IAAK,EAArC;AAAA,IACD,CAAC,MAAM,KAAK,SACV,CAAC,QAAQ,MAAM,KAAK,MAAM,GAAG,EAAE,CAAC,IAAI,UAAU,EAA7C,OACH,EAFC;AAAA,EAGH,EAdC;AAgBL;",
5
5
  "names": []
6
6
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tamagui/demos",
3
- "version": "1.22.8",
3
+ "version": "1.22.10",
4
4
  "sideEffects": [
5
5
  "*.css"
6
6
  ],
@@ -28,29 +28,29 @@
28
28
  }
29
29
  },
30
30
  "dependencies": {
31
- "@tamagui/avatar": "1.22.8",
32
- "@tamagui/button": "1.22.8",
33
- "@tamagui/config": "1.22.8",
34
- "@tamagui/core": "1.22.8",
35
- "@tamagui/list-item": "1.22.8",
36
- "@tamagui/logo": "1.22.8",
37
- "@tamagui/menu": "1.22.8",
38
- "@tamagui/popover": "1.22.8",
39
- "@tamagui/progress": "1.22.8",
40
- "@tamagui/radio-group": "1.22.8",
41
- "@tamagui/select": "1.22.8",
42
- "@tamagui/sheet": "1.22.8",
43
- "@tamagui/slider": "1.22.8",
44
- "@tamagui/stacks": "1.22.8",
45
- "@tamagui/toast": "1.22.8",
46
- "tamagui": "1.22.8"
31
+ "@tamagui/avatar": "1.22.10",
32
+ "@tamagui/button": "1.22.10",
33
+ "@tamagui/config": "1.22.10",
34
+ "@tamagui/core": "1.22.10",
35
+ "@tamagui/list-item": "1.22.10",
36
+ "@tamagui/logo": "1.22.10",
37
+ "@tamagui/menu": "1.22.10",
38
+ "@tamagui/popover": "1.22.10",
39
+ "@tamagui/progress": "1.22.10",
40
+ "@tamagui/radio-group": "1.22.10",
41
+ "@tamagui/select": "1.22.10",
42
+ "@tamagui/sheet": "1.22.10",
43
+ "@tamagui/slider": "1.22.10",
44
+ "@tamagui/stacks": "1.22.10",
45
+ "@tamagui/toast": "1.22.10",
46
+ "tamagui": "1.22.10"
47
47
  },
48
48
  "peerDependencies": {
49
49
  "react": "*",
50
50
  "react-dom": "*"
51
51
  },
52
52
  "devDependencies": {
53
- "@tamagui/build": "1.22.8",
53
+ "@tamagui/build": "1.22.10",
54
54
  "react": "^18.2.0",
55
55
  "react-dom": "^18.2.0"
56
56
  },
package/src/ThemeInverseDemo.tsx CHANGED
@@ -1,24 +1,37 @@
1
- import { Button, Theme, XStack, YStack } from 'tamagui'
1
+ import { Button, H5, Theme, XStack, YStack, useThemeName } from 'tamagui'
2
2
 
3
3
  export function ThemeInverseDemo() {
4
+ const themeName = useThemeName()
5
+ const opposite = themeName.includes('dark') ? 'light' : 'dark'
6
+
4
7
  return (
5
8
  <XStack space>
6
- <Buttons />
9
+ <Buttons title="Normal" name={themeName} />
7
10
  <Theme inverse>
8
- <Buttons />
11
+ <Buttons
12
+ title="Inversed"
13
+ name={themeName.replace(themeName.split('_')[0], opposite)}
14
+ />
9
15
  </Theme>
10
16
  </XStack>
11
17
  )
12
18
  }
13
19
 
14
- function Buttons() {
20
+ function Buttons(props: { name: string; title: string }) {
15
21
  return (
16
- <YStack backgroundColor="$background" padding="$3" borderRadius="$3" space>
17
- <Button>Dark</Button>
18
- <Button themeInverse>Inversed</Button>
19
- <Button theme="alt1">Alt1 Dark</Button>
22
+ <YStack
23
+ elevation="$4"
24
+ backgroundColor="$background"
25
+ padding="$4"
26
+ borderRadius="$4"
27
+ space="$3"
28
+ >
29
+ <H5>{props.title}</H5>
30
+ <Button>{props.name}</Button>
31
+ <Button themeInverse>inversed</Button>
32
+ <Button theme="alt1">{props.name}_alt1</Button>
20
33
  <Theme name="yellow">
21
- <Button>Yellow dark</Button>
34
+ <Button>{props.name.split('_')[0] + '_yellow'}</Button>
22
35
  </Theme>
23
36
  </YStack>
24
37
  )
package/types/ThemeInverseDemo.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ThemeInverseDemo.d.ts","sourceRoot":"","sources":["../src/ThemeInverseDemo.tsx"],"names":[],"mappings":";AAEA,wBAAgB,gBAAgB,gBAS/B"}
1
+ {"version":3,"file":"ThemeInverseDemo.d.ts","sourceRoot":"","sources":["../src/ThemeInverseDemo.tsx"],"names":[],"mappings":";AAEA,wBAAgB,gBAAgB,gBAe/B"}