@tamagui/demos 1.5.18 → 1.5.20

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 (61) hide show
  1. package/dist/cjs/ButtonDemo.js +2 -2
  2. package/dist/cjs/ButtonDemo.js.map +2 -2
  3. package/dist/cjs/GroupDemo.js +9 -9
  4. package/dist/cjs/GroupDemo.js.map +2 -2
  5. package/dist/cjs/ListItemDemo.js +8 -8
  6. package/dist/cjs/ListItemDemo.js.map +2 -2
  7. package/dist/cjs/PopoverDemo.js +4 -4
  8. package/dist/cjs/PopoverDemo.js.map +2 -2
  9. package/dist/cjs/TokensDemo.js +3 -4
  10. package/dist/cjs/TokensDemo.js.map +2 -2
  11. package/dist/esm/ButtonDemo.js +2 -2
  12. package/dist/esm/ButtonDemo.js.map +2 -2
  13. package/dist/esm/ButtonDemo.mjs +2 -2
  14. package/dist/esm/ButtonDemo.mjs.map +2 -2
  15. package/dist/esm/GroupDemo.js +10 -10
  16. package/dist/esm/GroupDemo.js.map +2 -2
  17. package/dist/esm/GroupDemo.mjs +10 -10
  18. package/dist/esm/GroupDemo.mjs.map +2 -2
  19. package/dist/esm/ListItemDemo.js +8 -8
  20. package/dist/esm/ListItemDemo.js.map +2 -2
  21. package/dist/esm/ListItemDemo.mjs +8 -8
  22. package/dist/esm/ListItemDemo.mjs.map +2 -2
  23. package/dist/esm/PopoverDemo.js +4 -4
  24. package/dist/esm/PopoverDemo.js.map +2 -2
  25. package/dist/esm/PopoverDemo.mjs +4 -4
  26. package/dist/esm/PopoverDemo.mjs.map +2 -2
  27. package/dist/esm/TokensDemo.js +4 -15
  28. package/dist/esm/TokensDemo.js.map +2 -2
  29. package/dist/esm/TokensDemo.mjs +4 -15
  30. package/dist/esm/TokensDemo.mjs.map +2 -2
  31. package/dist/jsx/ButtonDemo.js +2 -2
  32. package/dist/jsx/ButtonDemo.js.map +2 -2
  33. package/dist/jsx/ButtonDemo.mjs +2 -2
  34. package/dist/jsx/ButtonDemo.mjs.map +2 -2
  35. package/dist/jsx/GroupDemo.js +11 -11
  36. package/dist/jsx/GroupDemo.js.map +2 -2
  37. package/dist/jsx/GroupDemo.mjs +11 -11
  38. package/dist/jsx/GroupDemo.mjs.map +2 -2
  39. package/dist/jsx/ListItemDemo.js +8 -8
  40. package/dist/jsx/ListItemDemo.js.map +2 -2
  41. package/dist/jsx/ListItemDemo.mjs +8 -8
  42. package/dist/jsx/ListItemDemo.mjs.map +2 -2
  43. package/dist/jsx/PopoverDemo.js +4 -4
  44. package/dist/jsx/PopoverDemo.js.map +2 -2
  45. package/dist/jsx/PopoverDemo.mjs +4 -4
  46. package/dist/jsx/PopoverDemo.mjs.map +2 -2
  47. package/dist/jsx/TokensDemo.js +3 -14
  48. package/dist/jsx/TokensDemo.js.map +2 -2
  49. package/dist/jsx/TokensDemo.mjs +3 -14
  50. package/dist/jsx/TokensDemo.mjs.map +2 -2
  51. package/package.json +17 -17
  52. package/src/ButtonDemo.tsx +11 -6
  53. package/src/GroupDemo.tsx +32 -15
  54. package/src/ListItemDemo.tsx +38 -27
  55. package/src/PopoverDemo.tsx +20 -16
  56. package/src/TokensDemo.tsx +11 -21
  57. package/types/ButtonDemo.d.ts.map +1 -1
  58. package/types/GroupDemo.d.ts.map +1 -1
  59. package/types/ListItemDemo.d.ts.map +1 -1
  60. package/types/PopoverDemo.d.ts.map +1 -1
  61. package/types/TokensDemo.d.ts.map +1 -1
@@ -37,8 +37,8 @@ function ButtonDemo(props) {
37
37
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { iconAfter: import_lucide_icons.Activity, size: "$3", children: "After" })
38
38
  ] }),
39
39
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XGroup, { children: [
40
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { w: "50%", size: "$2", disabled: true, o: 0.5, children: "disabled" }),
41
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { w: "50%", size: "$2", chromeless: true, children: "chromeless" })
40
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XGroup.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { w: "50%", size: "$2", disabled: true, o: 0.5, children: "disabled" }) }),
41
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XGroup.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { w: "50%", size: "$2", chromeless: true, children: "chromeless" }) })
42
42
  ] })
43
43
  ] });
44
44
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/ButtonDemo.tsx"],
4
- "sourcesContent": ["import { Activity, Airplay } from '@tamagui/lucide-icons'\nimport { Button, XGroup, XStack, YStack } from 'tamagui'\n\nexport function ButtonDemo(props) {\n return (\n <YStack p=\"$3\" space {...props}>\n <Button>Plain</Button>\n <Button als=\"center\" icon={Airplay} size=\"$6\">\n Large\n </Button>\n <XGroup size=\"$3\">\n <Button w=\"50%\" theme=\"alt2\">\n Alt2\n </Button>\n <Button w=\"50%\" theme=\"yellow\">\n Yellow\n </Button>\n </XGroup>\n <XStack space=\"$2\">\n <Button themeInverse size=\"$3\">\n Small Inverse\n </Button>\n <Button iconAfter={Activity} size=\"$3\">\n After\n </Button>\n </XStack>\n <XGroup>\n <Button w=\"50%\" size=\"$2\" disabled o={0.5}>\n disabled\n </Button>\n <Button w=\"50%\" size=\"$2\" chromeless>\n chromeless\n </Button>\n </XGroup>\n </YStack>\n )\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMM;AANN,0BAAkC;AAClC,qBAA+C;AAExC,SAAS,WAAW,OAAO;AAChC,SACE,6CAAC,yBAAO,GAAE,MAAK,OAAK,MAAE,GAAG,OACvB;AAAA,gDAAC,yBAAO,mBAAK;AAAA,IACb,4CAAC,yBAAO,KAAI,UAAS,MAAM,6BAAS,MAAK,MAAK,mBAE9C;AAAA,IACA,6CAAC,yBAAO,MAAK,MACX;AAAA,kDAAC,yBAAO,GAAE,OAAM,OAAM,QAAO,kBAE7B;AAAA,MACA,4CAAC,yBAAO,GAAE,OAAM,OAAM,UAAS,oBAE/B;AAAA,OACF;AAAA,IACA,6CAAC,yBAAO,OAAM,MACZ;AAAA,kDAAC,yBAAO,cAAY,MAAC,MAAK,MAAK,2BAE/B;AAAA,MACA,4CAAC,yBAAO,WAAW,8BAAU,MAAK,MAAK,mBAEvC;AAAA,OACF;AAAA,IACA,6CAAC,yBACC;AAAA,kDAAC,yBAAO,GAAE,OAAM,MAAK,MAAK,UAAQ,MAAC,GAAG,KAAK,sBAE3C;AAAA,MACA,4CAAC,yBAAO,GAAE,OAAM,MAAK,MAAK,YAAU,MAAC,wBAErC;AAAA,OACF;AAAA,KACF;AAEJ;",
4
+ "sourcesContent": ["import { Activity, Airplay } from '@tamagui/lucide-icons'\nimport { Button, XGroup, XStack, YStack } from 'tamagui'\n\nexport function ButtonDemo(props) {\n return (\n <YStack p=\"$3\" space {...props}>\n <Button>Plain</Button>\n <Button als=\"center\" icon={Airplay} size=\"$6\">\n Large\n </Button>\n <XGroup size=\"$3\">\n <Button w=\"50%\" theme=\"alt2\">\n Alt2\n </Button>\n <Button w=\"50%\" theme=\"yellow\">\n Yellow\n </Button>\n </XGroup>\n <XStack space=\"$2\">\n <Button themeInverse size=\"$3\">\n Small Inverse\n </Button>\n <Button iconAfter={Activity} size=\"$3\">\n After\n </Button>\n </XStack>\n <XGroup>\n <XGroup.Item>\n <Button w=\"50%\" size=\"$2\" disabled o={0.5}>\n disabled\n </Button>\n </XGroup.Item>\n\n <XGroup.Item>\n <Button w=\"50%\" size=\"$2\" chromeless>\n chromeless\n </Button>\n </XGroup.Item>\n </XGroup>\n </YStack>\n )\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMM;AANN,0BAAkC;AAClC,qBAA+C;AAExC,SAAS,WAAW,OAAO;AAChC,SACE,6CAAC,yBAAO,GAAE,MAAK,OAAK,MAAE,GAAG,OACvB;AAAA,gDAAC,yBAAO,mBAAK;AAAA,IACb,4CAAC,yBAAO,KAAI,UAAS,MAAM,6BAAS,MAAK,MAAK,mBAE9C;AAAA,IACA,6CAAC,yBAAO,MAAK,MACX;AAAA,kDAAC,yBAAO,GAAE,OAAM,OAAM,QAAO,kBAE7B;AAAA,MACA,4CAAC,yBAAO,GAAE,OAAM,OAAM,UAAS,oBAE/B;AAAA,OACF;AAAA,IACA,6CAAC,yBAAO,OAAM,MACZ;AAAA,kDAAC,yBAAO,cAAY,MAAC,MAAK,MAAK,2BAE/B;AAAA,MACA,4CAAC,yBAAO,WAAW,8BAAU,MAAK,MAAK,mBAEvC;AAAA,OACF;AAAA,IACA,6CAAC,yBACC;AAAA,kDAAC,sBAAO,MAAP,EACC,sDAAC,yBAAO,GAAE,OAAM,MAAK,MAAK,UAAQ,MAAC,GAAG,KAAK,sBAE3C,GACF;AAAA,MAEA,4CAAC,sBAAO,MAAP,EACC,sDAAC,yBAAO,GAAE,OAAM,MAAK,MAAK,YAAU,MAAC,wBAErC,GACF;AAAA,OACF;AAAA,KACF;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -26,19 +26,19 @@ var import_lucide_icons = require("@tamagui/lucide-icons");
26
26
  var import_tamagui = require("tamagui");
27
27
  function GroupDemo() {
28
28
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { p: "$3", space: "$2", ai: "center", children: [
29
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XGroup, { children: [
30
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { children: "First" }),
31
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { children: "Second" }),
32
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { children: "Third" })
29
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Group, { axis: "horizontal", children: [
30
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Group.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { children: "First" }) }),
31
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Group.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { children: "Second" }) }),
32
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Group.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { children: "Third" }) })
33
33
  ] }),
34
34
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XGroup, { size: "$3", $gtSm: { size: "$5" }, children: [
35
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { size: "$3", icon: import_lucide_icons.Activity, children: "First" }),
36
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { size: "$3", icon: import_lucide_icons.Airplay, children: "Second" })
35
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XGroup.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { size: "$3", icon: import_lucide_icons.Activity, children: "First" }) }),
36
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XGroup.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { size: "$3", icon: import_lucide_icons.Airplay, children: "Second" }) })
37
37
  ] }),
38
38
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YGroup, { separator: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), children: [
39
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ListItem, { title: "First" }),
40
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ListItem, { title: "Second", subTitle: "Second subtitle" }),
41
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ListItem, { children: "Third" })
39
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YGroup.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ListItem, { title: "First" }) }),
40
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YGroup.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ListItem, { title: "Second", subTitle: "Second subtitle" }) }),
41
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YGroup.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ListItem, { children: "Third" }) })
42
42
  ] })
43
43
  ] });
44
44
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/GroupDemo.tsx"],
4
- "sourcesContent": ["import { Activity, Airplay } from '@tamagui/lucide-icons'\nimport { Button, ListItem, Separator, XGroup, YGroup, YStack } from 'tamagui'\n\nexport function GroupDemo() {\n return (\n <YStack p=\"$3\" space=\"$2\" ai=\"center\">\n <XGroup>\n <Button>First</Button>\n <Button>Second</Button>\n <Button>Third</Button>\n </XGroup>\n\n {/* responsive + size */}\n <XGroup size=\"$3\" $gtSm={{ size: '$5' }}>\n <Button size=\"$3\" icon={Activity}>\n First\n </Button>\n <Button size=\"$3\" icon={Airplay}>\n Second\n </Button>\n </XGroup>\n\n <YGroup separator={<Separator />}>\n <ListItem title=\"First\" />\n <ListItem title=\"Second\" subTitle=\"Second subtitle\" />\n <ListItem>Third</ListItem>\n </YGroup>\n </YStack>\n )\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMM;AANN,0BAAkC;AAClC,qBAAoE;AAE7D,SAAS,YAAY;AAC1B,SACE,6CAAC,yBAAO,GAAE,MAAK,OAAM,MAAK,IAAG,UAC3B;AAAA,iDAAC,yBACC;AAAA,kDAAC,yBAAO,mBAAK;AAAA,MACb,4CAAC,yBAAO,oBAAM;AAAA,MACd,4CAAC,yBAAO,mBAAK;AAAA,OACf;AAAA,IAGA,6CAAC,yBAAO,MAAK,MAAK,OAAO,EAAE,MAAM,KAAK,GACpC;AAAA,kDAAC,yBAAO,MAAK,MAAK,MAAM,8BAAU,mBAElC;AAAA,MACA,4CAAC,yBAAO,MAAK,MAAK,MAAM,6BAAS,oBAEjC;AAAA,OACF;AAAA,IAEA,6CAAC,yBAAO,WAAW,4CAAC,4BAAU,GAC5B;AAAA,kDAAC,2BAAS,OAAM,SAAQ;AAAA,MACxB,4CAAC,2BAAS,OAAM,UAAS,UAAS,mBAAkB;AAAA,MACpD,4CAAC,2BAAS,mBAAK;AAAA,OACjB;AAAA,KACF;AAEJ;",
4
+ "sourcesContent": ["import { Activity, Airplay } from '@tamagui/lucide-icons'\nimport { Button, Group, ListItem, Separator, XGroup, YGroup, YStack } from 'tamagui'\n\nexport function GroupDemo() {\n return (\n <YStack p=\"$3\" space=\"$2\" ai=\"center\">\n <Group axis=\"horizontal\">\n <Group.Item>\n <Button>First</Button>\n </Group.Item>\n <Group.Item>\n <Button>Second</Button>\n </Group.Item>\n <Group.Item>\n <Button>Third</Button>\n </Group.Item>\n </Group>\n\n {/* responsive + size */}\n <XGroup size=\"$3\" $gtSm={{ size: '$5' }}>\n <XGroup.Item>\n <Button size=\"$3\" icon={Activity}>\n First\n </Button>\n </XGroup.Item>\n <XGroup.Item>\n <Button size=\"$3\" icon={Airplay}>\n Second\n </Button>\n </XGroup.Item>\n </XGroup>\n\n {/* Separator */}\n <YGroup separator={<Separator />}>\n <YGroup.Item>\n <ListItem title=\"First\" />\n </YGroup.Item>\n <YGroup.Item>\n <ListItem title=\"Second\" subTitle=\"Second subtitle\" />\n </YGroup.Item>\n <YGroup.Item>\n <ListItem>Third</ListItem>\n </YGroup.Item>\n </YGroup>\n </YStack>\n )\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMM;AANN,0BAAkC;AAClC,qBAA2E;AAEpE,SAAS,YAAY;AAC1B,SACE,6CAAC,yBAAO,GAAE,MAAK,OAAM,MAAK,IAAG,UAC3B;AAAA,iDAAC,wBAAM,MAAK,cACV;AAAA,kDAAC,qBAAM,MAAN,EACC,sDAAC,yBAAO,mBAAK,GACf;AAAA,MACA,4CAAC,qBAAM,MAAN,EACC,sDAAC,yBAAO,oBAAM,GAChB;AAAA,MACA,4CAAC,qBAAM,MAAN,EACC,sDAAC,yBAAO,mBAAK,GACf;AAAA,OACF;AAAA,IAGA,6CAAC,yBAAO,MAAK,MAAK,OAAO,EAAE,MAAM,KAAK,GACpC;AAAA,kDAAC,sBAAO,MAAP,EACC,sDAAC,yBAAO,MAAK,MAAK,MAAM,8BAAU,mBAElC,GACF;AAAA,MACA,4CAAC,sBAAO,MAAP,EACC,sDAAC,yBAAO,MAAK,MAAK,MAAM,6BAAS,oBAEjC,GACF;AAAA,OACF;AAAA,IAGA,6CAAC,yBAAO,WAAW,4CAAC,4BAAU,GAC5B;AAAA,kDAAC,sBAAO,MAAP,EACC,sDAAC,2BAAS,OAAM,SAAQ,GAC1B;AAAA,MACA,4CAAC,sBAAO,MAAP,EACC,sDAAC,2BAAS,OAAM,UAAS,UAAS,mBAAkB,GACtD;AAAA,MACA,4CAAC,sBAAO,MAAP,EACC,sDAAC,2BAAS,mBAAK,GACjB;AAAA,OACF;AAAA,KACF;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -32,15 +32,15 @@ function ListItemDemo() {
32
32
  }
33
33
  function ListItemDemo1() {
34
34
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YGroup, { als: "center", bordered: true, w: 240, size: "$4", children: [
35
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ListItem, { hoverTheme: true, icon: import_lucide_icons.Star, title: "Star", subTitle: "Twinkles" }),
36
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ListItem, { hoverTheme: true, icon: import_lucide_icons.Moon, children: "Moon" }),
37
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ListItem, { hoverTheme: true, icon: import_lucide_icons.Sun, children: "Sun" }),
38
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ListItem, { hoverTheme: true, icon: import_lucide_icons.Cloud, children: "Cloud" })
35
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YGroup.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ListItem, { hoverTheme: true, icon: import_lucide_icons.Star, title: "Star", subTitle: "Twinkles" }) }),
36
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YGroup.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ListItem, { hoverTheme: true, icon: import_lucide_icons.Moon, children: "Moon" }) }),
37
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YGroup.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ListItem, { hoverTheme: true, icon: import_lucide_icons.Sun, children: "Sun" }) }),
38
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YGroup.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ListItem, { hoverTheme: true, icon: import_lucide_icons.Cloud, children: "Cloud" }) })
39
39
  ] });
40
40
  }
41
41
  function ListItemDemo2() {
42
42
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YGroup, { als: "center", bordered: true, w: 240, size: "$5", separator: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), children: [
43
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
43
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YGroup.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
44
44
  import_tamagui.ListItem,
45
45
  {
46
46
  hoverTheme: true,
@@ -50,8 +50,8 @@ function ListItemDemo2() {
50
50
  icon: import_lucide_icons.Star,
51
51
  iconAfter: import_lucide_icons.ChevronRight
52
52
  }
53
- ),
54
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
53
+ ) }),
54
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YGroup.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
55
55
  import_tamagui.ListItem,
56
56
  {
57
57
  hoverTheme: true,
@@ -61,7 +61,7 @@ function ListItemDemo2() {
61
61
  icon: import_lucide_icons.Moon,
62
62
  iconAfter: import_lucide_icons.ChevronRight
63
63
  }
64
- )
64
+ ) })
65
65
  ] });
66
66
  }
67
67
  // Annotate the CommonJS export names for ESM import in node:
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/ListItemDemo.tsx"],
4
- "sourcesContent": ["import { ChevronRight, Cloud, Moon, Star, Sun } from '@tamagui/lucide-icons'\nimport React from 'react'\nimport { ListItem, Separator, XStack, YGroup } from 'tamagui'\n\nexport function ListItemDemo() {\n return (\n <XStack $sm={{ flexDirection: 'column' }} px=\"$4\" space>\n <ListItemDemo1 />\n <ListItemDemo2 />\n </XStack>\n )\n}\n\nfunction ListItemDemo1() {\n return (\n <YGroup als=\"center\" bordered w={240} size=\"$4\">\n <ListItem hoverTheme icon={Star} title=\"Star\" subTitle=\"Twinkles\" />\n <ListItem hoverTheme icon={Moon}>\n Moon\n </ListItem>\n <ListItem hoverTheme icon={Sun}>\n Sun\n </ListItem>\n <ListItem hoverTheme icon={Cloud}>\n Cloud\n </ListItem>\n </YGroup>\n )\n}\n\nfunction ListItemDemo2() {\n return (\n <YGroup als=\"center\" bordered w={240} size=\"$5\" separator={<Separator />}>\n <ListItem\n hoverTheme\n pressTheme\n title=\"Star\"\n subTitle=\"Subtitle\"\n icon={Star}\n iconAfter={ChevronRight}\n />\n <ListItem\n hoverTheme\n pressTheme\n title=\"Moon\"\n subTitle=\"Subtitle\"\n icon={Moon}\n iconAfter={ChevronRight}\n />\n </YGroup>\n )\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMI;AANJ,0BAAqD;AAErD,qBAAoD;AAE7C,SAAS,eAAe;AAC7B,SACE,6CAAC,yBAAO,KAAK,EAAE,eAAe,SAAS,GAAG,IAAG,MAAK,OAAK,MACrD;AAAA,gDAAC,iBAAc;AAAA,IACf,4CAAC,iBAAc;AAAA,KACjB;AAEJ;AAEA,SAAS,gBAAgB;AACvB,SACE,6CAAC,yBAAO,KAAI,UAAS,UAAQ,MAAC,GAAG,KAAK,MAAK,MACzC;AAAA,gDAAC,2BAAS,YAAU,MAAC,MAAM,0BAAM,OAAM,QAAO,UAAS,YAAW;AAAA,IAClE,4CAAC,2BAAS,YAAU,MAAC,MAAM,0BAAM,kBAEjC;AAAA,IACA,4CAAC,2BAAS,YAAU,MAAC,MAAM,yBAAK,iBAEhC;AAAA,IACA,4CAAC,2BAAS,YAAU,MAAC,MAAM,2BAAO,mBAElC;AAAA,KACF;AAEJ;AAEA,SAAS,gBAAgB;AACvB,SACE,6CAAC,yBAAO,KAAI,UAAS,UAAQ,MAAC,GAAG,KAAK,MAAK,MAAK,WAAW,4CAAC,4BAAU,GACpE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,YAAU;AAAA,QACV,YAAU;AAAA,QACV,OAAM;AAAA,QACN,UAAS;AAAA,QACT,MAAM;AAAA,QACN,WAAW;AAAA;AAAA,IACb;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,YAAU;AAAA,QACV,YAAU;AAAA,QACV,OAAM;AAAA,QACN,UAAS;AAAA,QACT,MAAM;AAAA,QACN,WAAW;AAAA;AAAA,IACb;AAAA,KACF;AAEJ;",
4
+ "sourcesContent": ["import { ChevronRight, Cloud, Moon, Star, Sun } from '@tamagui/lucide-icons'\nimport { ListItem, Separator, XStack, YGroup } from 'tamagui'\n\nexport function ListItemDemo() {\n return (\n <XStack $sm={{ flexDirection: 'column' }} px=\"$4\" space>\n <ListItemDemo1 />\n <ListItemDemo2 />\n </XStack>\n )\n}\n\nfunction ListItemDemo1() {\n return (\n <YGroup als=\"center\" bordered w={240} size=\"$4\">\n <YGroup.Item>\n <ListItem hoverTheme icon={Star} title=\"Star\" subTitle=\"Twinkles\" />\n </YGroup.Item>\n <YGroup.Item>\n <ListItem hoverTheme icon={Moon}>\n Moon\n </ListItem>\n </YGroup.Item>\n <YGroup.Item>\n <ListItem hoverTheme icon={Sun}>\n Sun\n </ListItem>\n </YGroup.Item>\n <YGroup.Item>\n <ListItem hoverTheme icon={Cloud}>\n Cloud\n </ListItem>\n </YGroup.Item>\n </YGroup>\n )\n}\n\nfunction ListItemDemo2() {\n return (\n <YGroup als=\"center\" bordered w={240} size=\"$5\" separator={<Separator />}>\n <YGroup.Item>\n <ListItem\n hoverTheme\n pressTheme\n title=\"Star\"\n subTitle=\"Subtitle\"\n icon={Star}\n iconAfter={ChevronRight}\n />\n </YGroup.Item>\n <YGroup.Item>\n <ListItem\n hoverTheme\n pressTheme\n title=\"Moon\"\n subTitle=\"Subtitle\"\n icon={Moon}\n iconAfter={ChevronRight}\n />\n </YGroup.Item>\n </YGroup>\n )\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKI;AALJ,0BAAqD;AACrD,qBAAoD;AAE7C,SAAS,eAAe;AAC7B,SACE,6CAAC,yBAAO,KAAK,EAAE,eAAe,SAAS,GAAG,IAAG,MAAK,OAAK,MACrD;AAAA,gDAAC,iBAAc;AAAA,IACf,4CAAC,iBAAc;AAAA,KACjB;AAEJ;AAEA,SAAS,gBAAgB;AACvB,SACE,6CAAC,yBAAO,KAAI,UAAS,UAAQ,MAAC,GAAG,KAAK,MAAK,MACzC;AAAA,gDAAC,sBAAO,MAAP,EACC,sDAAC,2BAAS,YAAU,MAAC,MAAM,0BAAM,OAAM,QAAO,UAAS,YAAW,GACpE;AAAA,IACA,4CAAC,sBAAO,MAAP,EACC,sDAAC,2BAAS,YAAU,MAAC,MAAM,0BAAM,kBAEjC,GACF;AAAA,IACA,4CAAC,sBAAO,MAAP,EACC,sDAAC,2BAAS,YAAU,MAAC,MAAM,yBAAK,iBAEhC,GACF;AAAA,IACA,4CAAC,sBAAO,MAAP,EACC,sDAAC,2BAAS,YAAU,MAAC,MAAM,2BAAO,mBAElC,GACF;AAAA,KACF;AAEJ;AAEA,SAAS,gBAAgB;AACvB,SACE,6CAAC,yBAAO,KAAI,UAAS,UAAQ,MAAC,GAAG,KAAK,MAAK,MAAK,WAAW,4CAAC,4BAAU,GACpE;AAAA,gDAAC,sBAAO,MAAP,EACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAU;AAAA,QACV,YAAU;AAAA,QACV,OAAM;AAAA,QACN,UAAS;AAAA,QACT,MAAM;AAAA,QACN,WAAW;AAAA;AAAA,IACb,GACF;AAAA,IACA,4CAAC,sBAAO,MAAP,EACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAU;AAAA,QACV,YAAU;AAAA,QACV,OAAM;AAAA,QACN,UAAS;AAAA,QACT,MAAM;AAAA,QACN,WAAW;AAAA;AAAA,IACb,GACF;AAAA,KACF;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -66,11 +66,11 @@ function Demo({
66
66
  children: [
67
67
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Popover.Arrow, { bw: 1, boc: "$borderColor" }),
68
68
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YGroup, { space: "$3", children: [
69
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { space: "$3", children: [
69
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YGroup.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { space: "$3", children: [
70
70
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Label, { size: "$3", htmlFor: Name, children: "Name" }),
71
71
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Input, { size: "$3", id: Name })
72
- ] }),
73
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Popover.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
72
+ ] }) }),
73
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YGroup.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Popover.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
74
74
  import_tamagui.Button,
75
75
  {
76
76
  size: "$3",
@@ -78,7 +78,7 @@ function Demo({
78
78
  },
79
79
  children: "Submit"
80
80
  }
81
- ) })
81
+ ) }) })
82
82
  ] })
83
83
  ]
84
84
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/PopoverDemo.tsx"],
4
- "sourcesContent": ["import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@tamagui/lucide-icons'\nimport {\n Adapt,\n Button,\n Input,\n Label,\n Popover,\n PopoverProps,\n XStack,\n YGroup,\n} from 'tamagui'\n\nexport function PopoverDemo() {\n return (\n <XStack space=\"$2\" f={1} jc=\"center\" ai=\"center\">\n <Demo placement=\"left\" Icon={ChevronLeft} Name=\"left-popover\" />\n <Demo placement=\"bottom\" Icon={ChevronDown} Name=\"bottom-popover\" />\n <Demo placement=\"top\" Icon={ChevronUp} Name=\"top-popover\" />\n <Demo placement=\"right\" Icon={ChevronRight} Name=\"right-popover\" />\n </XStack>\n )\n}\n\nexport function Demo({\n Icon,\n Name,\n ...props\n}: PopoverProps & { Icon?: any; Name?: string }) {\n return (\n <Popover size=\"$5\" {...props}>\n <Popover.Trigger asChild>\n <Button icon={Icon} />\n </Popover.Trigger>\n\n <Adapt when=\"sm\" platform=\"web\">\n <Popover.Sheet modal dismissOnSnapToBottom>\n <Popover.Sheet.Frame padding=\"$4\">\n <Adapt.Contents />\n </Popover.Sheet.Frame>\n <Popover.Sheet.Overlay />\n </Popover.Sheet>\n </Adapt>\n\n <Popover.Content\n bw={1}\n boc=\"$borderColor\"\n enterStyle={{ x: 0, y: -10, o: 0 }}\n exitStyle={{ x: 0, y: -10, o: 0 }}\n x={0}\n y={0}\n o={1}\n animation={[\n 'quick',\n {\n opacity: {\n overshootClamping: true,\n },\n },\n ]}\n elevate\n >\n <Popover.Arrow bw={1} boc=\"$borderColor\" />\n\n <YGroup space=\"$3\">\n <XStack space=\"$3\">\n <Label size=\"$3\" htmlFor={Name}>\n Name\n </Label>\n <Input size=\"$3\" id={Name} />\n </XStack>\n <Popover.Close asChild>\n <Button\n size=\"$3\"\n onPress={() => {\n /* Custom code goes here, does not interfere with popover closure */\n }}\n >\n Submit\n </Button>\n </Popover.Close>\n </YGroup>\n </Popover.Content>\n </Popover>\n )\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcI;AAdJ,0BAAkE;AAClE,qBASO;AAEA,SAAS,cAAc;AAC5B,SACE,6CAAC,yBAAO,OAAM,MAAK,GAAG,GAAG,IAAG,UAAS,IAAG,UACtC;AAAA,gDAAC,QAAK,WAAU,QAAO,MAAM,iCAAa,MAAK,gBAAe;AAAA,IAC9D,4CAAC,QAAK,WAAU,UAAS,MAAM,iCAAa,MAAK,kBAAiB;AAAA,IAClE,4CAAC,QAAK,WAAU,OAAM,MAAM,+BAAW,MAAK,eAAc;AAAA,IAC1D,4CAAC,QAAK,WAAU,SAAQ,MAAM,kCAAc,MAAK,iBAAgB;AAAA,KACnE;AAEJ;AAEO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiD;AAC/C,SACE,6CAAC,0BAAQ,MAAK,MAAM,GAAG,OACrB;AAAA,gDAAC,uBAAQ,SAAR,EAAgB,SAAO,MACtB,sDAAC,yBAAO,MAAM,MAAM,GACtB;AAAA,IAEA,4CAAC,wBAAM,MAAK,MAAK,UAAS,OACxB,uDAAC,uBAAQ,OAAR,EAAc,OAAK,MAAC,uBAAqB,MACxC;AAAA,kDAAC,uBAAQ,MAAM,OAAd,EAAoB,SAAQ,MAC3B,sDAAC,qBAAM,UAAN,EAAe,GAClB;AAAA,MACA,4CAAC,uBAAQ,MAAM,SAAd,EAAsB;AAAA,OACzB,GACF;AAAA,IAEA;AAAA,MAAC,uBAAQ;AAAA,MAAR;AAAA,QACC,IAAI;AAAA,QACJ,KAAI;AAAA,QACJ,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE;AAAA,QACjC,WAAW,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE;AAAA,QAChC,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,SAAS;AAAA,cACP,mBAAmB;AAAA,YACrB;AAAA,UACF;AAAA,QACF;AAAA,QACA,SAAO;AAAA,QAEP;AAAA,sDAAC,uBAAQ,OAAR,EAAc,IAAI,GAAG,KAAI,gBAAe;AAAA,UAEzC,6CAAC,yBAAO,OAAM,MACZ;AAAA,yDAAC,yBAAO,OAAM,MACZ;AAAA,0DAAC,wBAAM,MAAK,MAAK,SAAS,MAAM,kBAEhC;AAAA,cACA,4CAAC,wBAAM,MAAK,MAAK,IAAI,MAAM;AAAA,eAC7B;AAAA,YACA,4CAAC,uBAAQ,OAAR,EAAc,SAAO,MACpB;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS,MAAM;AAAA,gBAEf;AAAA,gBACD;AAAA;AAAA,YAED,GACF;AAAA,aACF;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
4
+ "sourcesContent": ["import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@tamagui/lucide-icons'\nimport {\n Adapt,\n Button,\n Input,\n Label,\n Popover,\n PopoverProps,\n XStack,\n YGroup,\n} from 'tamagui'\n\nexport function PopoverDemo() {\n return (\n <XStack space=\"$2\" f={1} jc=\"center\" ai=\"center\">\n <Demo placement=\"left\" Icon={ChevronLeft} Name=\"left-popover\" />\n <Demo placement=\"bottom\" Icon={ChevronDown} Name=\"bottom-popover\" />\n <Demo placement=\"top\" Icon={ChevronUp} Name=\"top-popover\" />\n <Demo placement=\"right\" Icon={ChevronRight} Name=\"right-popover\" />\n </XStack>\n )\n}\n\nexport function Demo({\n Icon,\n Name,\n ...props\n}: PopoverProps & { Icon?: any; Name?: string }) {\n return (\n <Popover size=\"$5\" {...props}>\n <Popover.Trigger asChild>\n <Button icon={Icon} />\n </Popover.Trigger>\n\n <Adapt when=\"sm\" platform=\"web\">\n <Popover.Sheet modal dismissOnSnapToBottom>\n <Popover.Sheet.Frame padding=\"$4\">\n <Adapt.Contents />\n </Popover.Sheet.Frame>\n <Popover.Sheet.Overlay />\n </Popover.Sheet>\n </Adapt>\n\n <Popover.Content\n bw={1}\n boc=\"$borderColor\"\n enterStyle={{ x: 0, y: -10, o: 0 }}\n exitStyle={{ x: 0, y: -10, o: 0 }}\n x={0}\n y={0}\n o={1}\n animation={[\n 'quick',\n {\n opacity: {\n overshootClamping: true,\n },\n },\n ]}\n elevate\n >\n <Popover.Arrow bw={1} boc=\"$borderColor\" />\n\n <YGroup space=\"$3\">\n <YGroup.Item>\n <XStack space=\"$3\">\n <Label size=\"$3\" htmlFor={Name}>\n Name\n </Label>\n <Input size=\"$3\" id={Name} />\n </XStack>\n </YGroup.Item>\n <YGroup.Item>\n <Popover.Close asChild>\n <Button\n size=\"$3\"\n onPress={() => {\n /* Custom code goes here, does not interfere with popover closure */\n }}\n >\n Submit\n </Button>\n </Popover.Close>\n </YGroup.Item>\n </YGroup>\n </Popover.Content>\n </Popover>\n )\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcI;AAdJ,0BAAkE;AAClE,qBASO;AAEA,SAAS,cAAc;AAC5B,SACE,6CAAC,yBAAO,OAAM,MAAK,GAAG,GAAG,IAAG,UAAS,IAAG,UACtC;AAAA,gDAAC,QAAK,WAAU,QAAO,MAAM,iCAAa,MAAK,gBAAe;AAAA,IAC9D,4CAAC,QAAK,WAAU,UAAS,MAAM,iCAAa,MAAK,kBAAiB;AAAA,IAClE,4CAAC,QAAK,WAAU,OAAM,MAAM,+BAAW,MAAK,eAAc;AAAA,IAC1D,4CAAC,QAAK,WAAU,SAAQ,MAAM,kCAAc,MAAK,iBAAgB;AAAA,KACnE;AAEJ;AAEO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiD;AAC/C,SACE,6CAAC,0BAAQ,MAAK,MAAM,GAAG,OACrB;AAAA,gDAAC,uBAAQ,SAAR,EAAgB,SAAO,MACtB,sDAAC,yBAAO,MAAM,MAAM,GACtB;AAAA,IAEA,4CAAC,wBAAM,MAAK,MAAK,UAAS,OACxB,uDAAC,uBAAQ,OAAR,EAAc,OAAK,MAAC,uBAAqB,MACxC;AAAA,kDAAC,uBAAQ,MAAM,OAAd,EAAoB,SAAQ,MAC3B,sDAAC,qBAAM,UAAN,EAAe,GAClB;AAAA,MACA,4CAAC,uBAAQ,MAAM,SAAd,EAAsB;AAAA,OACzB,GACF;AAAA,IAEA;AAAA,MAAC,uBAAQ;AAAA,MAAR;AAAA,QACC,IAAI;AAAA,QACJ,KAAI;AAAA,QACJ,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE;AAAA,QACjC,WAAW,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE;AAAA,QAChC,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,SAAS;AAAA,cACP,mBAAmB;AAAA,YACrB;AAAA,UACF;AAAA,QACF;AAAA,QACA,SAAO;AAAA,QAEP;AAAA,sDAAC,uBAAQ,OAAR,EAAc,IAAI,GAAG,KAAI,gBAAe;AAAA,UAEzC,6CAAC,yBAAO,OAAM,MACZ;AAAA,wDAAC,sBAAO,MAAP,EACC,uDAAC,yBAAO,OAAM,MACZ;AAAA,0DAAC,wBAAM,MAAK,MAAK,SAAS,MAAM,kBAEhC;AAAA,cACA,4CAAC,wBAAM,MAAK,MAAK,IAAI,MAAM;AAAA,eAC7B,GACF;AAAA,YACA,4CAAC,sBAAO,MAAP,EACC,sDAAC,uBAAQ,OAAR,EAAc,SAAO,MACpB;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS,MAAM;AAAA,gBAEf;AAAA,gBACD;AAAA;AAAA,YAED,GACF,GACF;AAAA,aACF;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -47,7 +47,7 @@ function TokensDemo() {
47
47
  const [section, setSection] = (0, import_react.useState)("size");
48
48
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { space: true, children: [
49
49
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XGroup, { ai: "center", als: "center", children: sections.map(({ name, key }) => {
50
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
50
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XGroup.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
51
51
  import_tamagui.Button,
52
52
  {
53
53
  size: "$3",
@@ -55,9 +55,8 @@ function TokensDemo() {
55
55
  fontFamily: "$silkscreen",
56
56
  onPress: () => setSection(key),
57
57
  children: name
58
- },
59
- key
60
- );
58
+ }
59
+ ) }, key);
61
60
  }) }),
62
61
  (section === "size" || section === "spaceNegative" || section === "space" || section === "radius") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SizeSection, { section })
63
62
  ] });
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/TokensDemo.tsx"],
4
- "sourcesContent": ["import { Tokens, getConfig } from '@tamagui/core'\nimport { useState } from 'react'\nimport {\n Button,\n H2,\n H3,\n H4,\n ScrollView,\n Separator,\n Square,\n XGroup,\n XStack,\n YStack,\n} from 'tamagui'\n\ntype Section = 'spaceNegative' | keyof Tokens\n\nconst sections: { name: string; key: Section }[] = [\n {\n name: `Size`,\n key: `size`,\n },\n {\n name: `Space`,\n key: 'space',\n },\n {\n name: `Space (-)`,\n key: `spaceNegative`,\n },\n {\n name: `Radius`,\n key: `radius`,\n },\n]\n\nexport function TokensDemo() {\n const [section, setSection] = useState<Section>('size')\n\n return (\n <YStack space>\n <XGroup ai=\"center\" als=\"center\">\n {sections.map(({ name, key }) => {\n return (\n <Button\n key={key}\n size=\"$3\"\n theme={section === key ? 'active' : null}\n fontFamily=\"$silkscreen\"\n onPress={() => setSection(key)}\n >\n {name}\n </Button>\n )\n })}\n </XGroup>\n\n {(section === 'size' ||\n section === 'spaceNegative' ||\n section === 'space' ||\n section === 'radius') && <SizeSection section={section} />}\n </YStack>\n )\n}\n\nfunction SizeSection({ section }: { section: Section }) {\n const allTokens = getConfig().tokens\n const tokens = allTokens[section.startsWith('space') ? 'space' : section]\n const st = Object.keys(tokens).sort((a, b) => (parseFloat(a) > parseFloat(b) ? 1 : -1))\n const spaceTokens = st.filter((t) => parseFloat(t) >= 0 && t !== '-0')\n const spaceTokensNegative = st\n .filter((t) => parseFloat(t) < 0 || t === '-0')\n .sort((a, b) => (parseFloat(a) > parseFloat(b) ? -1 : 1))\n\n return (\n <YStack f={1} space>\n <H2>Sizes</H2>\n <YStack w=\"100%\" space=\"$2\" separator={<Separator />}>\n {(section === 'spaceNegative' ? spaceTokensNegative : spaceTokens).map(\n (token) => {\n return (\n <XStack w=\"100%\" ai=\"center\" key={token}>\n <YStack w=\"25%\">\n <H3 size=\"$6\">${token}</H3>\n </YStack>\n <YStack w=\"20%\">\n <H4 size=\"$5\">{tokens[token]?.val}px</H4>\n </YStack>\n <Square\n size={tokens[token]?.val}\n bc=\"$color5\"\n {...(section === 'spaceNegative' && {\n bc: '$red5',\n size: -tokens[\n spaceTokensNegative.find(\n (t) => parseFloat(t) === -parseFloat(token)\n ) ?? token\n ]?.val,\n })}\n {...(section === 'radius' && {\n // @ts-ignore\n size: allTokens.size[token]?.val,\n br: tokens[token]?.val,\n })}\n />\n </XStack>\n )\n }\n )}\n </YStack>\n </YStack>\n )\n}\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import { Tokens, getConfig } from '@tamagui/core'\nimport { useState } from 'react'\nimport { Button, H2, H3, H4, Separator, Square, XGroup, XStack, YStack } from 'tamagui'\n\ntype Section = 'spaceNegative' | keyof Tokens\n\nconst sections: { name: string; key: Section }[] = [\n {\n name: `Size`,\n key: `size`,\n },\n {\n name: `Space`,\n key: 'space',\n },\n {\n name: `Space (-)`,\n key: `spaceNegative`,\n },\n {\n name: `Radius`,\n key: `radius`,\n },\n]\n\nexport function TokensDemo() {\n const [section, setSection] = useState<Section>('size')\n\n return (\n <YStack space>\n <XGroup ai=\"center\" als=\"center\">\n {sections.map(({ name, key }) => {\n return (\n <XGroup.Item key={key}>\n <Button\n size=\"$3\"\n theme={section === key ? 'active' : null}\n fontFamily=\"$silkscreen\"\n onPress={() => setSection(key)}\n >\n {name}\n </Button>\n </XGroup.Item>\n )\n })}\n </XGroup>\n\n {(section === 'size' ||\n section === 'spaceNegative' ||\n section === 'space' ||\n section === 'radius') && <SizeSection section={section} />}\n </YStack>\n )\n}\n\nfunction SizeSection({ section }: { section: Section }) {\n const allTokens = getConfig().tokens\n const tokens = allTokens[section.startsWith('space') ? 'space' : section]\n const st = Object.keys(tokens).sort((a, b) => (parseFloat(a) > parseFloat(b) ? 1 : -1))\n const spaceTokens = st.filter((t) => parseFloat(t) >= 0 && t !== '-0')\n const spaceTokensNegative = st\n .filter((t) => parseFloat(t) < 0 || t === '-0')\n .sort((a, b) => (parseFloat(a) > parseFloat(b) ? -1 : 1))\n\n return (\n <YStack f={1} space>\n <H2>Sizes</H2>\n <YStack w=\"100%\" space=\"$2\" separator={<Separator />}>\n {(section === 'spaceNegative' ? spaceTokensNegative : spaceTokens).map(\n (token) => {\n return (\n <XStack w=\"100%\" ai=\"center\" key={token}>\n <YStack w=\"25%\">\n <H3 size=\"$6\">${token}</H3>\n </YStack>\n <YStack w=\"20%\">\n <H4 size=\"$5\">{tokens[token]?.val}px</H4>\n </YStack>\n <Square\n size={tokens[token]?.val}\n bc=\"$color5\"\n {...(section === 'spaceNegative' && {\n bc: '$red5',\n size: -tokens[\n spaceTokensNegative.find(\n (t) => parseFloat(t) === -parseFloat(token)\n ) ?? token\n ]?.val,\n })}\n {...(section === 'radius' && {\n // @ts-ignore\n size: allTokens.size[token]?.val,\n br: tokens[token]?.val,\n })}\n />\n </XStack>\n )\n }\n )}\n </YStack>\n </YStack>\n )\n}\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -14,8 +14,8 @@ function ButtonDemo(props) {
14
14
  /* @__PURE__ */ jsx(Button, { iconAfter: Activity, size: "$3", children: "After" })
15
15
  ] }),
16
16
  /* @__PURE__ */ jsxs(XGroup, { children: [
17
- /* @__PURE__ */ jsx(Button, { w: "50%", size: "$2", disabled: true, o: 0.5, children: "disabled" }),
18
- /* @__PURE__ */ jsx(Button, { w: "50%", size: "$2", chromeless: true, children: "chromeless" })
17
+ /* @__PURE__ */ jsx(XGroup.Item, { children: /* @__PURE__ */ jsx(Button, { w: "50%", size: "$2", disabled: true, o: 0.5, children: "disabled" }) }),
18
+ /* @__PURE__ */ jsx(XGroup.Item, { children: /* @__PURE__ */ jsx(Button, { w: "50%", size: "$2", chromeless: true, children: "chromeless" }) })
19
19
  ] })
20
20
  ] });
21
21
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/ButtonDemo.tsx"],
4
- "sourcesContent": ["import { Activity, Airplay } from '@tamagui/lucide-icons'\nimport { Button, XGroup, XStack, YStack } from 'tamagui'\n\nexport function ButtonDemo(props) {\n return (\n <YStack p=\"$3\" space {...props}>\n <Button>Plain</Button>\n <Button als=\"center\" icon={Airplay} size=\"$6\">\n Large\n </Button>\n <XGroup size=\"$3\">\n <Button w=\"50%\" theme=\"alt2\">\n Alt2\n </Button>\n <Button w=\"50%\" theme=\"yellow\">\n Yellow\n </Button>\n </XGroup>\n <XStack space=\"$2\">\n <Button themeInverse size=\"$3\">\n Small Inverse\n </Button>\n <Button iconAfter={Activity} size=\"$3\">\n After\n </Button>\n </XStack>\n <XGroup>\n <Button w=\"50%\" size=\"$2\" disabled o={0.5}>\n disabled\n </Button>\n <Button w=\"50%\" size=\"$2\" chromeless>\n chromeless\n </Button>\n </XGroup>\n </YStack>\n )\n}\n"],
5
- "mappings": "AAMM,cAIA,YAJA;AANN,SAAS,UAAU,eAAe;AAClC,SAAS,QAAQ,QAAQ,QAAQ,cAAc;AAExC,SAAS,WAAW,OAAO;AAChC,SACE,qBAAC,UAAO,GAAE,MAAK,OAAK,MAAE,GAAG,OACvB;AAAA,wBAAC,UAAO,mBAAK;AAAA,IACb,oBAAC,UAAO,KAAI,UAAS,MAAM,SAAS,MAAK,MAAK,mBAE9C;AAAA,IACA,qBAAC,UAAO,MAAK,MACX;AAAA,0BAAC,UAAO,GAAE,OAAM,OAAM,QAAO,kBAE7B;AAAA,MACA,oBAAC,UAAO,GAAE,OAAM,OAAM,UAAS,oBAE/B;AAAA,OACF;AAAA,IACA,qBAAC,UAAO,OAAM,MACZ;AAAA,0BAAC,UAAO,cAAY,MAAC,MAAK,MAAK,2BAE/B;AAAA,MACA,oBAAC,UAAO,WAAW,UAAU,MAAK,MAAK,mBAEvC;AAAA,OACF;AAAA,IACA,qBAAC,UACC;AAAA,0BAAC,UAAO,GAAE,OAAM,MAAK,MAAK,UAAQ,MAAC,GAAG,KAAK,sBAE3C;AAAA,MACA,oBAAC,UAAO,GAAE,OAAM,MAAK,MAAK,YAAU,MAAC,wBAErC;AAAA,OACF;AAAA,KACF;AAEJ;",
4
+ "sourcesContent": ["import { Activity, Airplay } from '@tamagui/lucide-icons'\nimport { Button, XGroup, XStack, YStack } from 'tamagui'\n\nexport function ButtonDemo(props) {\n return (\n <YStack p=\"$3\" space {...props}>\n <Button>Plain</Button>\n <Button als=\"center\" icon={Airplay} size=\"$6\">\n Large\n </Button>\n <XGroup size=\"$3\">\n <Button w=\"50%\" theme=\"alt2\">\n Alt2\n </Button>\n <Button w=\"50%\" theme=\"yellow\">\n Yellow\n </Button>\n </XGroup>\n <XStack space=\"$2\">\n <Button themeInverse size=\"$3\">\n Small Inverse\n </Button>\n <Button iconAfter={Activity} size=\"$3\">\n After\n </Button>\n </XStack>\n <XGroup>\n <XGroup.Item>\n <Button w=\"50%\" size=\"$2\" disabled o={0.5}>\n disabled\n </Button>\n </XGroup.Item>\n\n <XGroup.Item>\n <Button w=\"50%\" size=\"$2\" chromeless>\n chromeless\n </Button>\n </XGroup.Item>\n </XGroup>\n </YStack>\n )\n}\n"],
5
+ "mappings": "AAMM,cAIA,YAJA;AANN,SAAS,UAAU,eAAe;AAClC,SAAS,QAAQ,QAAQ,QAAQ,cAAc;AAExC,SAAS,WAAW,OAAO;AAChC,SACE,qBAAC,UAAO,GAAE,MAAK,OAAK,MAAE,GAAG,OACvB;AAAA,wBAAC,UAAO,mBAAK;AAAA,IACb,oBAAC,UAAO,KAAI,UAAS,MAAM,SAAS,MAAK,MAAK,mBAE9C;AAAA,IACA,qBAAC,UAAO,MAAK,MACX;AAAA,0BAAC,UAAO,GAAE,OAAM,OAAM,QAAO,kBAE7B;AAAA,MACA,oBAAC,UAAO,GAAE,OAAM,OAAM,UAAS,oBAE/B;AAAA,OACF;AAAA,IACA,qBAAC,UAAO,OAAM,MACZ;AAAA,0BAAC,UAAO,cAAY,MAAC,MAAK,MAAK,2BAE/B;AAAA,MACA,oBAAC,UAAO,WAAW,UAAU,MAAK,MAAK,mBAEvC;AAAA,OACF;AAAA,IACA,qBAAC,UACC;AAAA,0BAAC,OAAO,MAAP,EACC,8BAAC,UAAO,GAAE,OAAM,MAAK,MAAK,UAAQ,MAAC,GAAG,KAAK,sBAE3C,GACF;AAAA,MAEA,oBAAC,OAAO,MAAP,EACC,8BAAC,UAAO,GAAE,OAAM,MAAK,MAAK,YAAU,MAAC,wBAErC,GACF;AAAA,OACF;AAAA,KACF;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -14,8 +14,8 @@ function ButtonDemo(props) {
14
14
  /* @__PURE__ */ jsx(Button, { iconAfter: Activity, size: "$3", children: "After" })
15
15
  ] }),
16
16
  /* @__PURE__ */ jsxs(XGroup, { children: [
17
- /* @__PURE__ */ jsx(Button, { w: "50%", size: "$2", disabled: true, o: 0.5, children: "disabled" }),
18
- /* @__PURE__ */ jsx(Button, { w: "50%", size: "$2", chromeless: true, children: "chromeless" })
17
+ /* @__PURE__ */ jsx(XGroup.Item, { children: /* @__PURE__ */ jsx(Button, { w: "50%", size: "$2", disabled: true, o: 0.5, children: "disabled" }) }),
18
+ /* @__PURE__ */ jsx(XGroup.Item, { children: /* @__PURE__ */ jsx(Button, { w: "50%", size: "$2", chromeless: true, children: "chromeless" }) })
19
19
  ] })
20
20
  ] });
21
21
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/ButtonDemo.tsx"],
4
- "sourcesContent": ["import { Activity, Airplay } from '@tamagui/lucide-icons'\nimport { Button, XGroup, XStack, YStack } from 'tamagui'\n\nexport function ButtonDemo(props) {\n return (\n <YStack p=\"$3\" space {...props}>\n <Button>Plain</Button>\n <Button als=\"center\" icon={Airplay} size=\"$6\">\n Large\n </Button>\n <XGroup size=\"$3\">\n <Button w=\"50%\" theme=\"alt2\">\n Alt2\n </Button>\n <Button w=\"50%\" theme=\"yellow\">\n Yellow\n </Button>\n </XGroup>\n <XStack space=\"$2\">\n <Button themeInverse size=\"$3\">\n Small Inverse\n </Button>\n <Button iconAfter={Activity} size=\"$3\">\n After\n </Button>\n </XStack>\n <XGroup>\n <Button w=\"50%\" size=\"$2\" disabled o={0.5}>\n disabled\n </Button>\n <Button w=\"50%\" size=\"$2\" chromeless>\n chromeless\n </Button>\n </XGroup>\n </YStack>\n )\n}\n"],
5
- "mappings": "AAMM,cAIA,YAJA;AANN,SAAS,UAAU,eAAe;AAClC,SAAS,QAAQ,QAAQ,QAAQ,cAAc;AAExC,SAAS,WAAW,OAAO;AAChC,SACE,qBAAC,UAAO,GAAE,MAAK,OAAK,MAAE,GAAG,OACvB;AAAA,wBAAC,UAAO,mBAAK;AAAA,IACb,oBAAC,UAAO,KAAI,UAAS,MAAM,SAAS,MAAK,MAAK,mBAE9C;AAAA,IACA,qBAAC,UAAO,MAAK,MACX;AAAA,0BAAC,UAAO,GAAE,OAAM,OAAM,QAAO,kBAE7B;AAAA,MACA,oBAAC,UAAO,GAAE,OAAM,OAAM,UAAS,oBAE/B;AAAA,OACF;AAAA,IACA,qBAAC,UAAO,OAAM,MACZ;AAAA,0BAAC,UAAO,cAAY,MAAC,MAAK,MAAK,2BAE/B;AAAA,MACA,oBAAC,UAAO,WAAW,UAAU,MAAK,MAAK,mBAEvC;AAAA,OACF;AAAA,IACA,qBAAC,UACC;AAAA,0BAAC,UAAO,GAAE,OAAM,MAAK,MAAK,UAAQ,MAAC,GAAG,KAAK,sBAE3C;AAAA,MACA,oBAAC,UAAO,GAAE,OAAM,MAAK,MAAK,YAAU,MAAC,wBAErC;AAAA,OACF;AAAA,KACF;AAEJ;",
4
+ "sourcesContent": ["import { Activity, Airplay } from '@tamagui/lucide-icons'\nimport { Button, XGroup, XStack, YStack } from 'tamagui'\n\nexport function ButtonDemo(props) {\n return (\n <YStack p=\"$3\" space {...props}>\n <Button>Plain</Button>\n <Button als=\"center\" icon={Airplay} size=\"$6\">\n Large\n </Button>\n <XGroup size=\"$3\">\n <Button w=\"50%\" theme=\"alt2\">\n Alt2\n </Button>\n <Button w=\"50%\" theme=\"yellow\">\n Yellow\n </Button>\n </XGroup>\n <XStack space=\"$2\">\n <Button themeInverse size=\"$3\">\n Small Inverse\n </Button>\n <Button iconAfter={Activity} size=\"$3\">\n After\n </Button>\n </XStack>\n <XGroup>\n <XGroup.Item>\n <Button w=\"50%\" size=\"$2\" disabled o={0.5}>\n disabled\n </Button>\n </XGroup.Item>\n\n <XGroup.Item>\n <Button w=\"50%\" size=\"$2\" chromeless>\n chromeless\n </Button>\n </XGroup.Item>\n </XGroup>\n </YStack>\n )\n}\n"],
5
+ "mappings": "AAMM,cAIA,YAJA;AANN,SAAS,UAAU,eAAe;AAClC,SAAS,QAAQ,QAAQ,QAAQ,cAAc;AAExC,SAAS,WAAW,OAAO;AAChC,SACE,qBAAC,UAAO,GAAE,MAAK,OAAK,MAAE,GAAG,OACvB;AAAA,wBAAC,UAAO,mBAAK;AAAA,IACb,oBAAC,UAAO,KAAI,UAAS,MAAM,SAAS,MAAK,MAAK,mBAE9C;AAAA,IACA,qBAAC,UAAO,MAAK,MACX;AAAA,0BAAC,UAAO,GAAE,OAAM,OAAM,QAAO,kBAE7B;AAAA,MACA,oBAAC,UAAO,GAAE,OAAM,OAAM,UAAS,oBAE/B;AAAA,OACF;AAAA,IACA,qBAAC,UAAO,OAAM,MACZ;AAAA,0BAAC,UAAO,cAAY,MAAC,MAAK,MAAK,2BAE/B;AAAA,MACA,oBAAC,UAAO,WAAW,UAAU,MAAK,MAAK,mBAEvC;AAAA,OACF;AAAA,IACA,qBAAC,UACC;AAAA,0BAAC,OAAO,MAAP,EACC,8BAAC,UAAO,GAAE,OAAM,MAAK,MAAK,UAAQ,MAAC,GAAG,KAAK,sBAE3C,GACF;AAAA,MAEA,oBAAC,OAAO,MAAP,EACC,8BAAC,UAAO,GAAE,OAAM,MAAK,MAAK,YAAU,MAAC,wBAErC,GACF;AAAA,OACF;AAAA,KACF;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -1,21 +1,21 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { Activity, Airplay } from "@tamagui/lucide-icons";
3
- import { Button, ListItem, Separator, XGroup, YGroup, YStack } from "tamagui";
3
+ import { Button, Group, ListItem, Separator, XGroup, YGroup, YStack } from "tamagui";
4
4
  function GroupDemo() {
5
5
  return /* @__PURE__ */ jsxs(YStack, { p: "$3", space: "$2", ai: "center", children: [
6
- /* @__PURE__ */ jsxs(XGroup, { children: [
7
- /* @__PURE__ */ jsx(Button, { children: "First" }),
8
- /* @__PURE__ */ jsx(Button, { children: "Second" }),
9
- /* @__PURE__ */ jsx(Button, { children: "Third" })
6
+ /* @__PURE__ */ jsxs(Group, { axis: "horizontal", children: [
7
+ /* @__PURE__ */ jsx(Group.Item, { children: /* @__PURE__ */ jsx(Button, { children: "First" }) }),
8
+ /* @__PURE__ */ jsx(Group.Item, { children: /* @__PURE__ */ jsx(Button, { children: "Second" }) }),
9
+ /* @__PURE__ */ jsx(Group.Item, { children: /* @__PURE__ */ jsx(Button, { children: "Third" }) })
10
10
  ] }),
11
11
  /* @__PURE__ */ jsxs(XGroup, { size: "$3", $gtSm: { size: "$5" }, children: [
12
- /* @__PURE__ */ jsx(Button, { size: "$3", icon: Activity, children: "First" }),
13
- /* @__PURE__ */ jsx(Button, { size: "$3", icon: Airplay, children: "Second" })
12
+ /* @__PURE__ */ jsx(XGroup.Item, { children: /* @__PURE__ */ jsx(Button, { size: "$3", icon: Activity, children: "First" }) }),
13
+ /* @__PURE__ */ jsx(XGroup.Item, { children: /* @__PURE__ */ jsx(Button, { size: "$3", icon: Airplay, children: "Second" }) })
14
14
  ] }),
15
15
  /* @__PURE__ */ jsxs(YGroup, { separator: /* @__PURE__ */ jsx(Separator, {}), children: [
16
- /* @__PURE__ */ jsx(ListItem, { title: "First" }),
17
- /* @__PURE__ */ jsx(ListItem, { title: "Second", subTitle: "Second subtitle" }),
18
- /* @__PURE__ */ jsx(ListItem, { children: "Third" })
16
+ /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(ListItem, { title: "First" }) }),
17
+ /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(ListItem, { title: "Second", subTitle: "Second subtitle" }) }),
18
+ /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(ListItem, { children: "Third" }) })
19
19
  ] })
20
20
  ] });
21
21
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/GroupDemo.tsx"],
4
- "sourcesContent": ["import { Activity, Airplay } from '@tamagui/lucide-icons'\nimport { Button, ListItem, Separator, XGroup, YGroup, YStack } from 'tamagui'\n\nexport function GroupDemo() {\n return (\n <YStack p=\"$3\" space=\"$2\" ai=\"center\">\n <XGroup>\n <Button>First</Button>\n <Button>Second</Button>\n <Button>Third</Button>\n </XGroup>\n\n {/* responsive + size */}\n <XGroup size=\"$3\" $gtSm={{ size: '$5' }}>\n <Button size=\"$3\" icon={Activity}>\n First\n </Button>\n <Button size=\"$3\" icon={Airplay}>\n Second\n </Button>\n </XGroup>\n\n <YGroup separator={<Separator />}>\n <ListItem title=\"First\" />\n <ListItem title=\"Second\" subTitle=\"Second subtitle\" />\n <ListItem>Third</ListItem>\n </YGroup>\n </YStack>\n )\n}\n"],
5
- "mappings": "AAMM,SACE,KADF;AANN,SAAS,UAAU,eAAe;AAClC,SAAS,QAAQ,UAAU,WAAW,QAAQ,QAAQ,cAAc;AAE7D,SAAS,YAAY;AAC1B,SACE,qBAAC,UAAO,GAAE,MAAK,OAAM,MAAK,IAAG,UAC3B;AAAA,yBAAC,UACC;AAAA,0BAAC,UAAO,mBAAK;AAAA,MACb,oBAAC,UAAO,oBAAM;AAAA,MACd,oBAAC,UAAO,mBAAK;AAAA,OACf;AAAA,IAGA,qBAAC,UAAO,MAAK,MAAK,OAAO,EAAE,MAAM,KAAK,GACpC;AAAA,0BAAC,UAAO,MAAK,MAAK,MAAM,UAAU,mBAElC;AAAA,MACA,oBAAC,UAAO,MAAK,MAAK,MAAM,SAAS,oBAEjC;AAAA,OACF;AAAA,IAEA,qBAAC,UAAO,WAAW,oBAAC,aAAU,GAC5B;AAAA,0BAAC,YAAS,OAAM,SAAQ;AAAA,MACxB,oBAAC,YAAS,OAAM,UAAS,UAAS,mBAAkB;AAAA,MACpD,oBAAC,YAAS,mBAAK;AAAA,OACjB;AAAA,KACF;AAEJ;",
4
+ "sourcesContent": ["import { Activity, Airplay } from '@tamagui/lucide-icons'\nimport { Button, Group, ListItem, Separator, XGroup, YGroup, YStack } from 'tamagui'\n\nexport function GroupDemo() {\n return (\n <YStack p=\"$3\" space=\"$2\" ai=\"center\">\n <Group axis=\"horizontal\">\n <Group.Item>\n <Button>First</Button>\n </Group.Item>\n <Group.Item>\n <Button>Second</Button>\n </Group.Item>\n <Group.Item>\n <Button>Third</Button>\n </Group.Item>\n </Group>\n\n {/* responsive + size */}\n <XGroup size=\"$3\" $gtSm={{ size: '$5' }}>\n <XGroup.Item>\n <Button size=\"$3\" icon={Activity}>\n First\n </Button>\n </XGroup.Item>\n <XGroup.Item>\n <Button size=\"$3\" icon={Airplay}>\n Second\n </Button>\n </XGroup.Item>\n </XGroup>\n\n {/* Separator */}\n <YGroup separator={<Separator />}>\n <YGroup.Item>\n <ListItem title=\"First\" />\n </YGroup.Item>\n <YGroup.Item>\n <ListItem title=\"Second\" subTitle=\"Second subtitle\" />\n </YGroup.Item>\n <YGroup.Item>\n <ListItem>Third</ListItem>\n </YGroup.Item>\n </YGroup>\n </YStack>\n )\n}\n"],
5
+ "mappings": "AAMM,SAEI,KAFJ;AANN,SAAS,UAAU,eAAe;AAClC,SAAS,QAAQ,OAAO,UAAU,WAAW,QAAQ,QAAQ,cAAc;AAEpE,SAAS,YAAY;AAC1B,SACE,qBAAC,UAAO,GAAE,MAAK,OAAM,MAAK,IAAG,UAC3B;AAAA,yBAAC,SAAM,MAAK,cACV;AAAA,0BAAC,MAAM,MAAN,EACC,8BAAC,UAAO,mBAAK,GACf;AAAA,MACA,oBAAC,MAAM,MAAN,EACC,8BAAC,UAAO,oBAAM,GAChB;AAAA,MACA,oBAAC,MAAM,MAAN,EACC,8BAAC,UAAO,mBAAK,GACf;AAAA,OACF;AAAA,IAGA,qBAAC,UAAO,MAAK,MAAK,OAAO,EAAE,MAAM,KAAK,GACpC;AAAA,0BAAC,OAAO,MAAP,EACC,8BAAC,UAAO,MAAK,MAAK,MAAM,UAAU,mBAElC,GACF;AAAA,MACA,oBAAC,OAAO,MAAP,EACC,8BAAC,UAAO,MAAK,MAAK,MAAM,SAAS,oBAEjC,GACF;AAAA,OACF;AAAA,IAGA,qBAAC,UAAO,WAAW,oBAAC,aAAU,GAC5B;AAAA,0BAAC,OAAO,MAAP,EACC,8BAAC,YAAS,OAAM,SAAQ,GAC1B;AAAA,MACA,oBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,OAAM,UAAS,UAAS,mBAAkB,GACtD;AAAA,MACA,oBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,mBAAK,GACjB;AAAA,OACF;AAAA,KACF;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -1,21 +1,21 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { Activity, Airplay } from "@tamagui/lucide-icons";
3
- import { Button, ListItem, Separator, XGroup, YGroup, YStack } from "tamagui";
3
+ import { Button, Group, ListItem, Separator, XGroup, YGroup, YStack } from "tamagui";
4
4
  function GroupDemo() {
5
5
  return /* @__PURE__ */ jsxs(YStack, { p: "$3", space: "$2", ai: "center", children: [
6
- /* @__PURE__ */ jsxs(XGroup, { children: [
7
- /* @__PURE__ */ jsx(Button, { children: "First" }),
8
- /* @__PURE__ */ jsx(Button, { children: "Second" }),
9
- /* @__PURE__ */ jsx(Button, { children: "Third" })
6
+ /* @__PURE__ */ jsxs(Group, { axis: "horizontal", children: [
7
+ /* @__PURE__ */ jsx(Group.Item, { children: /* @__PURE__ */ jsx(Button, { children: "First" }) }),
8
+ /* @__PURE__ */ jsx(Group.Item, { children: /* @__PURE__ */ jsx(Button, { children: "Second" }) }),
9
+ /* @__PURE__ */ jsx(Group.Item, { children: /* @__PURE__ */ jsx(Button, { children: "Third" }) })
10
10
  ] }),
11
11
  /* @__PURE__ */ jsxs(XGroup, { size: "$3", $gtSm: { size: "$5" }, children: [
12
- /* @__PURE__ */ jsx(Button, { size: "$3", icon: Activity, children: "First" }),
13
- /* @__PURE__ */ jsx(Button, { size: "$3", icon: Airplay, children: "Second" })
12
+ /* @__PURE__ */ jsx(XGroup.Item, { children: /* @__PURE__ */ jsx(Button, { size: "$3", icon: Activity, children: "First" }) }),
13
+ /* @__PURE__ */ jsx(XGroup.Item, { children: /* @__PURE__ */ jsx(Button, { size: "$3", icon: Airplay, children: "Second" }) })
14
14
  ] }),
15
15
  /* @__PURE__ */ jsxs(YGroup, { separator: /* @__PURE__ */ jsx(Separator, {}), children: [
16
- /* @__PURE__ */ jsx(ListItem, { title: "First" }),
17
- /* @__PURE__ */ jsx(ListItem, { title: "Second", subTitle: "Second subtitle" }),
18
- /* @__PURE__ */ jsx(ListItem, { children: "Third" })
16
+ /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(ListItem, { title: "First" }) }),
17
+ /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(ListItem, { title: "Second", subTitle: "Second subtitle" }) }),
18
+ /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(ListItem, { children: "Third" }) })
19
19
  ] })
20
20
  ] });
21
21
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/GroupDemo.tsx"],
4
- "sourcesContent": ["import { Activity, Airplay } from '@tamagui/lucide-icons'\nimport { Button, ListItem, Separator, XGroup, YGroup, YStack } from 'tamagui'\n\nexport function GroupDemo() {\n return (\n <YStack p=\"$3\" space=\"$2\" ai=\"center\">\n <XGroup>\n <Button>First</Button>\n <Button>Second</Button>\n <Button>Third</Button>\n </XGroup>\n\n {/* responsive + size */}\n <XGroup size=\"$3\" $gtSm={{ size: '$5' }}>\n <Button size=\"$3\" icon={Activity}>\n First\n </Button>\n <Button size=\"$3\" icon={Airplay}>\n Second\n </Button>\n </XGroup>\n\n <YGroup separator={<Separator />}>\n <ListItem title=\"First\" />\n <ListItem title=\"Second\" subTitle=\"Second subtitle\" />\n <ListItem>Third</ListItem>\n </YGroup>\n </YStack>\n )\n}\n"],
5
- "mappings": "AAMM,SACE,KADF;AANN,SAAS,UAAU,eAAe;AAClC,SAAS,QAAQ,UAAU,WAAW,QAAQ,QAAQ,cAAc;AAE7D,SAAS,YAAY;AAC1B,SACE,qBAAC,UAAO,GAAE,MAAK,OAAM,MAAK,IAAG,UAC3B;AAAA,yBAAC,UACC;AAAA,0BAAC,UAAO,mBAAK;AAAA,MACb,oBAAC,UAAO,oBAAM;AAAA,MACd,oBAAC,UAAO,mBAAK;AAAA,OACf;AAAA,IAGA,qBAAC,UAAO,MAAK,MAAK,OAAO,EAAE,MAAM,KAAK,GACpC;AAAA,0BAAC,UAAO,MAAK,MAAK,MAAM,UAAU,mBAElC;AAAA,MACA,oBAAC,UAAO,MAAK,MAAK,MAAM,SAAS,oBAEjC;AAAA,OACF;AAAA,IAEA,qBAAC,UAAO,WAAW,oBAAC,aAAU,GAC5B;AAAA,0BAAC,YAAS,OAAM,SAAQ;AAAA,MACxB,oBAAC,YAAS,OAAM,UAAS,UAAS,mBAAkB;AAAA,MACpD,oBAAC,YAAS,mBAAK;AAAA,OACjB;AAAA,KACF;AAEJ;",
4
+ "sourcesContent": ["import { Activity, Airplay } from '@tamagui/lucide-icons'\nimport { Button, Group, ListItem, Separator, XGroup, YGroup, YStack } from 'tamagui'\n\nexport function GroupDemo() {\n return (\n <YStack p=\"$3\" space=\"$2\" ai=\"center\">\n <Group axis=\"horizontal\">\n <Group.Item>\n <Button>First</Button>\n </Group.Item>\n <Group.Item>\n <Button>Second</Button>\n </Group.Item>\n <Group.Item>\n <Button>Third</Button>\n </Group.Item>\n </Group>\n\n {/* responsive + size */}\n <XGroup size=\"$3\" $gtSm={{ size: '$5' }}>\n <XGroup.Item>\n <Button size=\"$3\" icon={Activity}>\n First\n </Button>\n </XGroup.Item>\n <XGroup.Item>\n <Button size=\"$3\" icon={Airplay}>\n Second\n </Button>\n </XGroup.Item>\n </XGroup>\n\n {/* Separator */}\n <YGroup separator={<Separator />}>\n <YGroup.Item>\n <ListItem title=\"First\" />\n </YGroup.Item>\n <YGroup.Item>\n <ListItem title=\"Second\" subTitle=\"Second subtitle\" />\n </YGroup.Item>\n <YGroup.Item>\n <ListItem>Third</ListItem>\n </YGroup.Item>\n </YGroup>\n </YStack>\n )\n}\n"],
5
+ "mappings": "AAMM,SAEI,KAFJ;AANN,SAAS,UAAU,eAAe;AAClC,SAAS,QAAQ,OAAO,UAAU,WAAW,QAAQ,QAAQ,cAAc;AAEpE,SAAS,YAAY;AAC1B,SACE,qBAAC,UAAO,GAAE,MAAK,OAAM,MAAK,IAAG,UAC3B;AAAA,yBAAC,SAAM,MAAK,cACV;AAAA,0BAAC,MAAM,MAAN,EACC,8BAAC,UAAO,mBAAK,GACf;AAAA,MACA,oBAAC,MAAM,MAAN,EACC,8BAAC,UAAO,oBAAM,GAChB;AAAA,MACA,oBAAC,MAAM,MAAN,EACC,8BAAC,UAAO,mBAAK,GACf;AAAA,OACF;AAAA,IAGA,qBAAC,UAAO,MAAK,MAAK,OAAO,EAAE,MAAM,KAAK,GACpC;AAAA,0BAAC,OAAO,MAAP,EACC,8BAAC,UAAO,MAAK,MAAK,MAAM,UAAU,mBAElC,GACF;AAAA,MACA,oBAAC,OAAO,MAAP,EACC,8BAAC,UAAO,MAAK,MAAK,MAAM,SAAS,oBAEjC,GACF;AAAA,OACF;AAAA,IAGA,qBAAC,UAAO,WAAW,oBAAC,aAAU,GAC5B;AAAA,0BAAC,OAAO,MAAP,EACC,8BAAC,YAAS,OAAM,SAAQ,GAC1B;AAAA,MACA,oBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,OAAM,UAAS,UAAS,mBAAkB,GACtD;AAAA,MACA,oBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,mBAAK,GACjB;AAAA,OACF;AAAA,KACF;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -9,15 +9,15 @@ function ListItemDemo() {
9
9
  }
10
10
  function ListItemDemo1() {
11
11
  return /* @__PURE__ */ jsxs(YGroup, { als: "center", bordered: true, w: 240, size: "$4", children: [
12
- /* @__PURE__ */ jsx(ListItem, { hoverTheme: true, icon: Star, title: "Star", subTitle: "Twinkles" }),
13
- /* @__PURE__ */ jsx(ListItem, { hoverTheme: true, icon: Moon, children: "Moon" }),
14
- /* @__PURE__ */ jsx(ListItem, { hoverTheme: true, icon: Sun, children: "Sun" }),
15
- /* @__PURE__ */ jsx(ListItem, { hoverTheme: true, icon: Cloud, children: "Cloud" })
12
+ /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(ListItem, { hoverTheme: true, icon: Star, title: "Star", subTitle: "Twinkles" }) }),
13
+ /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(ListItem, { hoverTheme: true, icon: Moon, children: "Moon" }) }),
14
+ /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(ListItem, { hoverTheme: true, icon: Sun, children: "Sun" }) }),
15
+ /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(ListItem, { hoverTheme: true, icon: Cloud, children: "Cloud" }) })
16
16
  ] });
17
17
  }
18
18
  function ListItemDemo2() {
19
19
  return /* @__PURE__ */ jsxs(YGroup, { als: "center", bordered: true, w: 240, size: "$5", separator: /* @__PURE__ */ jsx(Separator, {}), children: [
20
- /* @__PURE__ */ jsx(
20
+ /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(
21
21
  ListItem,
22
22
  {
23
23
  hoverTheme: true,
@@ -27,8 +27,8 @@ function ListItemDemo2() {
27
27
  icon: Star,
28
28
  iconAfter: ChevronRight
29
29
  }
30
- ),
31
- /* @__PURE__ */ jsx(
30
+ ) }),
31
+ /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(
32
32
  ListItem,
33
33
  {
34
34
  hoverTheme: true,
@@ -38,7 +38,7 @@ function ListItemDemo2() {
38
38
  icon: Moon,
39
39
  iconAfter: ChevronRight
40
40
  }
41
- )
41
+ ) })
42
42
  ] });
43
43
  }
44
44
  export {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/ListItemDemo.tsx"],
4
- "sourcesContent": ["import { ChevronRight, Cloud, Moon, Star, Sun } from '@tamagui/lucide-icons'\nimport React from 'react'\nimport { ListItem, Separator, XStack, YGroup } from 'tamagui'\n\nexport function ListItemDemo() {\n return (\n <XStack $sm={{ flexDirection: 'column' }} px=\"$4\" space>\n <ListItemDemo1 />\n <ListItemDemo2 />\n </XStack>\n )\n}\n\nfunction ListItemDemo1() {\n return (\n <YGroup als=\"center\" bordered w={240} size=\"$4\">\n <ListItem hoverTheme icon={Star} title=\"Star\" subTitle=\"Twinkles\" />\n <ListItem hoverTheme icon={Moon}>\n Moon\n </ListItem>\n <ListItem hoverTheme icon={Sun}>\n Sun\n </ListItem>\n <ListItem hoverTheme icon={Cloud}>\n Cloud\n </ListItem>\n </YGroup>\n )\n}\n\nfunction ListItemDemo2() {\n return (\n <YGroup als=\"center\" bordered w={240} size=\"$5\" separator={<Separator />}>\n <ListItem\n hoverTheme\n pressTheme\n title=\"Star\"\n subTitle=\"Subtitle\"\n icon={Star}\n iconAfter={ChevronRight}\n />\n <ListItem\n hoverTheme\n pressTheme\n title=\"Moon\"\n subTitle=\"Subtitle\"\n icon={Moon}\n iconAfter={ChevronRight}\n />\n </YGroup>\n )\n}\n"],
5
- "mappings": "AAMI,SACE,KADF;AANJ,SAAS,cAAc,OAAO,MAAM,MAAM,WAAW;AAErD,SAAS,UAAU,WAAW,QAAQ,cAAc;AAE7C,SAAS,eAAe;AAC7B,SACE,qBAAC,UAAO,KAAK,EAAE,eAAe,SAAS,GAAG,IAAG,MAAK,OAAK,MACrD;AAAA,wBAAC,iBAAc;AAAA,IACf,oBAAC,iBAAc;AAAA,KACjB;AAEJ;AAEA,SAAS,gBAAgB;AACvB,SACE,qBAAC,UAAO,KAAI,UAAS,UAAQ,MAAC,GAAG,KAAK,MAAK,MACzC;AAAA,wBAAC,YAAS,YAAU,MAAC,MAAM,MAAM,OAAM,QAAO,UAAS,YAAW;AAAA,IAClE,oBAAC,YAAS,YAAU,MAAC,MAAM,MAAM,kBAEjC;AAAA,IACA,oBAAC,YAAS,YAAU,MAAC,MAAM,KAAK,iBAEhC;AAAA,IACA,oBAAC,YAAS,YAAU,MAAC,MAAM,OAAO,mBAElC;AAAA,KACF;AAEJ;AAEA,SAAS,gBAAgB;AACvB,SACE,qBAAC,UAAO,KAAI,UAAS,UAAQ,MAAC,GAAG,KAAK,MAAK,MAAK,WAAW,oBAAC,aAAU,GACpE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,YAAU;AAAA,QACV,YAAU;AAAA,QACV,OAAM;AAAA,QACN,UAAS;AAAA,QACT,MAAM;AAAA,QACN,WAAW;AAAA;AAAA,IACb;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,YAAU;AAAA,QACV,YAAU;AAAA,QACV,OAAM;AAAA,QACN,UAAS;AAAA,QACT,MAAM;AAAA,QACN,WAAW;AAAA;AAAA,IACb;AAAA,KACF;AAEJ;",
4
+ "sourcesContent": ["import { ChevronRight, Cloud, Moon, Star, Sun } from '@tamagui/lucide-icons'\nimport { ListItem, Separator, XStack, YGroup } from 'tamagui'\n\nexport function ListItemDemo() {\n return (\n <XStack $sm={{ flexDirection: 'column' }} px=\"$4\" space>\n <ListItemDemo1 />\n <ListItemDemo2 />\n </XStack>\n )\n}\n\nfunction ListItemDemo1() {\n return (\n <YGroup als=\"center\" bordered w={240} size=\"$4\">\n <YGroup.Item>\n <ListItem hoverTheme icon={Star} title=\"Star\" subTitle=\"Twinkles\" />\n </YGroup.Item>\n <YGroup.Item>\n <ListItem hoverTheme icon={Moon}>\n Moon\n </ListItem>\n </YGroup.Item>\n <YGroup.Item>\n <ListItem hoverTheme icon={Sun}>\n Sun\n </ListItem>\n </YGroup.Item>\n <YGroup.Item>\n <ListItem hoverTheme icon={Cloud}>\n Cloud\n </ListItem>\n </YGroup.Item>\n </YGroup>\n )\n}\n\nfunction ListItemDemo2() {\n return (\n <YGroup als=\"center\" bordered w={240} size=\"$5\" separator={<Separator />}>\n <YGroup.Item>\n <ListItem\n hoverTheme\n pressTheme\n title=\"Star\"\n subTitle=\"Subtitle\"\n icon={Star}\n iconAfter={ChevronRight}\n />\n </YGroup.Item>\n <YGroup.Item>\n <ListItem\n hoverTheme\n pressTheme\n title=\"Moon\"\n subTitle=\"Subtitle\"\n icon={Moon}\n iconAfter={ChevronRight}\n />\n </YGroup.Item>\n </YGroup>\n )\n}\n"],
5
+ "mappings": "AAKI,SACE,KADF;AALJ,SAAS,cAAc,OAAO,MAAM,MAAM,WAAW;AACrD,SAAS,UAAU,WAAW,QAAQ,cAAc;AAE7C,SAAS,eAAe;AAC7B,SACE,qBAAC,UAAO,KAAK,EAAE,eAAe,SAAS,GAAG,IAAG,MAAK,OAAK,MACrD;AAAA,wBAAC,iBAAc;AAAA,IACf,oBAAC,iBAAc;AAAA,KACjB;AAEJ;AAEA,SAAS,gBAAgB;AACvB,SACE,qBAAC,UAAO,KAAI,UAAS,UAAQ,MAAC,GAAG,KAAK,MAAK,MACzC;AAAA,wBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,YAAU,MAAC,MAAM,MAAM,OAAM,QAAO,UAAS,YAAW,GACpE;AAAA,IACA,oBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,YAAU,MAAC,MAAM,MAAM,kBAEjC,GACF;AAAA,IACA,oBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,YAAU,MAAC,MAAM,KAAK,iBAEhC,GACF;AAAA,IACA,oBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,YAAU,MAAC,MAAM,OAAO,mBAElC,GACF;AAAA,KACF;AAEJ;AAEA,SAAS,gBAAgB;AACvB,SACE,qBAAC,UAAO,KAAI,UAAS,UAAQ,MAAC,GAAG,KAAK,MAAK,MAAK,WAAW,oBAAC,aAAU,GACpE;AAAA,wBAAC,OAAO,MAAP,EACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAU;AAAA,QACV,YAAU;AAAA,QACV,OAAM;AAAA,QACN,UAAS;AAAA,QACT,MAAM;AAAA,QACN,WAAW;AAAA;AAAA,IACb,GACF;AAAA,IACA,oBAAC,OAAO,MAAP,EACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAU;AAAA,QACV,YAAU;AAAA,QACV,OAAM;AAAA,QACN,UAAS;AAAA,QACT,MAAM;AAAA,QACN,WAAW;AAAA;AAAA,IACb,GACF;AAAA,KACF;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -9,15 +9,15 @@ function ListItemDemo() {
9
9
  }
10
10
  function ListItemDemo1() {
11
11
  return /* @__PURE__ */ jsxs(YGroup, { als: "center", bordered: true, w: 240, size: "$4", children: [
12
- /* @__PURE__ */ jsx(ListItem, { hoverTheme: true, icon: Star, title: "Star", subTitle: "Twinkles" }),
13
- /* @__PURE__ */ jsx(ListItem, { hoverTheme: true, icon: Moon, children: "Moon" }),
14
- /* @__PURE__ */ jsx(ListItem, { hoverTheme: true, icon: Sun, children: "Sun" }),
15
- /* @__PURE__ */ jsx(ListItem, { hoverTheme: true, icon: Cloud, children: "Cloud" })
12
+ /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(ListItem, { hoverTheme: true, icon: Star, title: "Star", subTitle: "Twinkles" }) }),
13
+ /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(ListItem, { hoverTheme: true, icon: Moon, children: "Moon" }) }),
14
+ /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(ListItem, { hoverTheme: true, icon: Sun, children: "Sun" }) }),
15
+ /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(ListItem, { hoverTheme: true, icon: Cloud, children: "Cloud" }) })
16
16
  ] });
17
17
  }
18
18
  function ListItemDemo2() {
19
19
  return /* @__PURE__ */ jsxs(YGroup, { als: "center", bordered: true, w: 240, size: "$5", separator: /* @__PURE__ */ jsx(Separator, {}), children: [
20
- /* @__PURE__ */ jsx(
20
+ /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(
21
21
  ListItem,
22
22
  {
23
23
  hoverTheme: true,
@@ -27,8 +27,8 @@ function ListItemDemo2() {
27
27
  icon: Star,
28
28
  iconAfter: ChevronRight
29
29
  }
30
- ),
31
- /* @__PURE__ */ jsx(
30
+ ) }),
31
+ /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(
32
32
  ListItem,
33
33
  {
34
34
  hoverTheme: true,
@@ -38,7 +38,7 @@ function ListItemDemo2() {
38
38
  icon: Moon,
39
39
  iconAfter: ChevronRight
40
40
  }
41
- )
41
+ ) })
42
42
  ] });
43
43
  }
44
44
  export {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/ListItemDemo.tsx"],
4
- "sourcesContent": ["import { ChevronRight, Cloud, Moon, Star, Sun } from '@tamagui/lucide-icons'\nimport React from 'react'\nimport { ListItem, Separator, XStack, YGroup } from 'tamagui'\n\nexport function ListItemDemo() {\n return (\n <XStack $sm={{ flexDirection: 'column' }} px=\"$4\" space>\n <ListItemDemo1 />\n <ListItemDemo2 />\n </XStack>\n )\n}\n\nfunction ListItemDemo1() {\n return (\n <YGroup als=\"center\" bordered w={240} size=\"$4\">\n <ListItem hoverTheme icon={Star} title=\"Star\" subTitle=\"Twinkles\" />\n <ListItem hoverTheme icon={Moon}>\n Moon\n </ListItem>\n <ListItem hoverTheme icon={Sun}>\n Sun\n </ListItem>\n <ListItem hoverTheme icon={Cloud}>\n Cloud\n </ListItem>\n </YGroup>\n )\n}\n\nfunction ListItemDemo2() {\n return (\n <YGroup als=\"center\" bordered w={240} size=\"$5\" separator={<Separator />}>\n <ListItem\n hoverTheme\n pressTheme\n title=\"Star\"\n subTitle=\"Subtitle\"\n icon={Star}\n iconAfter={ChevronRight}\n />\n <ListItem\n hoverTheme\n pressTheme\n title=\"Moon\"\n subTitle=\"Subtitle\"\n icon={Moon}\n iconAfter={ChevronRight}\n />\n </YGroup>\n )\n}\n"],
5
- "mappings": "AAMI,SACE,KADF;AANJ,SAAS,cAAc,OAAO,MAAM,MAAM,WAAW;AAErD,SAAS,UAAU,WAAW,QAAQ,cAAc;AAE7C,SAAS,eAAe;AAC7B,SACE,qBAAC,UAAO,KAAK,EAAE,eAAe,SAAS,GAAG,IAAG,MAAK,OAAK,MACrD;AAAA,wBAAC,iBAAc;AAAA,IACf,oBAAC,iBAAc;AAAA,KACjB;AAEJ;AAEA,SAAS,gBAAgB;AACvB,SACE,qBAAC,UAAO,KAAI,UAAS,UAAQ,MAAC,GAAG,KAAK,MAAK,MACzC;AAAA,wBAAC,YAAS,YAAU,MAAC,MAAM,MAAM,OAAM,QAAO,UAAS,YAAW;AAAA,IAClE,oBAAC,YAAS,YAAU,MAAC,MAAM,MAAM,kBAEjC;AAAA,IACA,oBAAC,YAAS,YAAU,MAAC,MAAM,KAAK,iBAEhC;AAAA,IACA,oBAAC,YAAS,YAAU,MAAC,MAAM,OAAO,mBAElC;AAAA,KACF;AAEJ;AAEA,SAAS,gBAAgB;AACvB,SACE,qBAAC,UAAO,KAAI,UAAS,UAAQ,MAAC,GAAG,KAAK,MAAK,MAAK,WAAW,oBAAC,aAAU,GACpE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,YAAU;AAAA,QACV,YAAU;AAAA,QACV,OAAM;AAAA,QACN,UAAS;AAAA,QACT,MAAM;AAAA,QACN,WAAW;AAAA;AAAA,IACb;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,YAAU;AAAA,QACV,YAAU;AAAA,QACV,OAAM;AAAA,QACN,UAAS;AAAA,QACT,MAAM;AAAA,QACN,WAAW;AAAA;AAAA,IACb;AAAA,KACF;AAEJ;",
4
+ "sourcesContent": ["import { ChevronRight, Cloud, Moon, Star, Sun } from '@tamagui/lucide-icons'\nimport { ListItem, Separator, XStack, YGroup } from 'tamagui'\n\nexport function ListItemDemo() {\n return (\n <XStack $sm={{ flexDirection: 'column' }} px=\"$4\" space>\n <ListItemDemo1 />\n <ListItemDemo2 />\n </XStack>\n )\n}\n\nfunction ListItemDemo1() {\n return (\n <YGroup als=\"center\" bordered w={240} size=\"$4\">\n <YGroup.Item>\n <ListItem hoverTheme icon={Star} title=\"Star\" subTitle=\"Twinkles\" />\n </YGroup.Item>\n <YGroup.Item>\n <ListItem hoverTheme icon={Moon}>\n Moon\n </ListItem>\n </YGroup.Item>\n <YGroup.Item>\n <ListItem hoverTheme icon={Sun}>\n Sun\n </ListItem>\n </YGroup.Item>\n <YGroup.Item>\n <ListItem hoverTheme icon={Cloud}>\n Cloud\n </ListItem>\n </YGroup.Item>\n </YGroup>\n )\n}\n\nfunction ListItemDemo2() {\n return (\n <YGroup als=\"center\" bordered w={240} size=\"$5\" separator={<Separator />}>\n <YGroup.Item>\n <ListItem\n hoverTheme\n pressTheme\n title=\"Star\"\n subTitle=\"Subtitle\"\n icon={Star}\n iconAfter={ChevronRight}\n />\n </YGroup.Item>\n <YGroup.Item>\n <ListItem\n hoverTheme\n pressTheme\n title=\"Moon\"\n subTitle=\"Subtitle\"\n icon={Moon}\n iconAfter={ChevronRight}\n />\n </YGroup.Item>\n </YGroup>\n )\n}\n"],
5
+ "mappings": "AAKI,SACE,KADF;AALJ,SAAS,cAAc,OAAO,MAAM,MAAM,WAAW;AACrD,SAAS,UAAU,WAAW,QAAQ,cAAc;AAE7C,SAAS,eAAe;AAC7B,SACE,qBAAC,UAAO,KAAK,EAAE,eAAe,SAAS,GAAG,IAAG,MAAK,OAAK,MACrD;AAAA,wBAAC,iBAAc;AAAA,IACf,oBAAC,iBAAc;AAAA,KACjB;AAEJ;AAEA,SAAS,gBAAgB;AACvB,SACE,qBAAC,UAAO,KAAI,UAAS,UAAQ,MAAC,GAAG,KAAK,MAAK,MACzC;AAAA,wBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,YAAU,MAAC,MAAM,MAAM,OAAM,QAAO,UAAS,YAAW,GACpE;AAAA,IACA,oBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,YAAU,MAAC,MAAM,MAAM,kBAEjC,GACF;AAAA,IACA,oBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,YAAU,MAAC,MAAM,KAAK,iBAEhC,GACF;AAAA,IACA,oBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,YAAU,MAAC,MAAM,OAAO,mBAElC,GACF;AAAA,KACF;AAEJ;AAEA,SAAS,gBAAgB;AACvB,SACE,qBAAC,UAAO,KAAI,UAAS,UAAQ,MAAC,GAAG,KAAK,MAAK,MAAK,WAAW,oBAAC,aAAU,GACpE;AAAA,wBAAC,OAAO,MAAP,EACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAU;AAAA,QACV,YAAU;AAAA,QACV,OAAM;AAAA,QACN,UAAS;AAAA,QACT,MAAM;AAAA,QACN,WAAW;AAAA;AAAA,IACb,GACF;AAAA,IACA,oBAAC,OAAO,MAAP,EACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAU;AAAA,QACV,YAAU;AAAA,QACV,OAAM;AAAA,QACN,UAAS;AAAA,QACT,MAAM;AAAA,QACN,WAAW;AAAA;AAAA,IACb,GACF;AAAA,KACF;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -50,11 +50,11 @@ function Demo({
50
50
  children: [
51
51
  /* @__PURE__ */ jsx(Popover.Arrow, { bw: 1, boc: "$borderColor" }),
52
52
  /* @__PURE__ */ jsxs(YGroup, { space: "$3", children: [
53
- /* @__PURE__ */ jsxs(XStack, { space: "$3", children: [
53
+ /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsxs(XStack, { space: "$3", children: [
54
54
  /* @__PURE__ */ jsx(Label, { size: "$3", htmlFor: Name, children: "Name" }),
55
55
  /* @__PURE__ */ jsx(Input, { size: "$3", id: Name })
56
- ] }),
57
- /* @__PURE__ */ jsx(Popover.Close, { asChild: true, children: /* @__PURE__ */ jsx(
56
+ ] }) }),
57
+ /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(Popover.Close, { asChild: true, children: /* @__PURE__ */ jsx(
58
58
  Button,
59
59
  {
60
60
  size: "$3",
@@ -62,7 +62,7 @@ function Demo({
62
62
  },
63
63
  children: "Submit"
64
64
  }
65
- ) })
65
+ ) }) })
66
66
  ] })
67
67
  ]
68
68
  }