@tamagui/demos 1.114.4 → 1.115.0

package/dist/cjs/CheckboxHeadlessDemo.cjs

@@ -0,0 +1,87 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf,
+  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+    value: mod,
+    enumerable: !0
+  }) : target, mod)),
+  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+    value: !0
+  }), mod);
+var CheckboxHeadlessDemo_exports = {};
+__export(CheckboxHeadlessDemo_exports, {
+  CheckboxHeadlessDemo: () => CheckboxHeadlessDemo
+});
+module.exports = __toCommonJS(CheckboxHeadlessDemo_exports);
+var import_react = __toESM(require("react")),
+  import_checkbox_headless = require("@tamagui/checkbox-headless"),
+  import_lucide_icons = require("@tamagui/lucide-icons"),
+  import_react_native = require("react-native-web"),
+  import_tamagui = require("tamagui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function CheckboxHeadlessDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    width: 200,
+    alignItems: "center",
+    gap: "$3",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      gap: "$3",
+      alignItems: "center",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(HeadlessCheckbox, {
+        defaultChecked: "indeterminate",
+        id: "headless"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Label, {
+        htmlFor: "headless",
+        children: "Headless"
+      })]
+    })
+  });
+}
+const HeadlessCheckbox = import_react.default.forwardRef((props, ref) => {
+  const [checked, setChecked] = import_react.default.useState(props.defaultChecked || !1),
+    {
+      checkboxProps,
+      checkboxRef,
+      bubbleInput
+    } = (0, import_checkbox_headless.useCheckbox)(props, [checked, setChecked], ref);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react_native.Pressable, {
+    style: {
+      width: 20,
+      height: 20,
+      borderRadius: 4,
+      justifyContent: "center",
+      alignItems: "center",
+      backgroundColor: checked === !0 ? "lightblue" : "silver"
+    },
+    ref: checkboxRef,
+    ...checkboxProps,
+    children: [checked === "indeterminate" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons.Minus, {
+      width: 18,
+      height: 18
+    }), checked === !0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons.Check, {
+      width: 18,
+      height: 18
+    }), bubbleInput]
+  });
+});

package/dist/cjs/CheckboxUnstyledDemo.cjs

@@ -0,0 +1,78 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var CheckboxUnstyledDemo_exports = {};
+__export(CheckboxUnstyledDemo_exports, {
+  Checkbox: () => Checkbox,
+  CheckboxUnstyledDemo: () => CheckboxUnstyledDemo
+});
+module.exports = __toCommonJS(CheckboxUnstyledDemo_exports);
+var import_checkbox = require("@tamagui/checkbox"),
+  import_core = require("@tamagui/core"),
+  import_lucide_icons = require("@tamagui/lucide-icons"),
+  import_tamagui = require("tamagui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+const Frame = (0, import_core.styled)(import_core.Stack, {
+    borderWidth: 1,
+    borderColor: "$borderColor",
+    borderRadius: 5,
+    alignItems: "center",
+    justifyContent: "center",
+    variants: {
+      checked: {
+        indeterminate: {},
+        true: {
+          backgroundColor: "$color5"
+        },
+        false: {
+          backgroundColor: "$color3"
+        }
+      }
+    },
+    defaultVariants: {
+      checked: !1
+    }
+  }),
+  Indicator = (0, import_core.styled)(import_core.Stack, {}),
+  Checkbox = (0, import_checkbox.createCheckbox)({
+    Frame,
+    Indicator
+  });
+function CheckboxUnstyledDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    width: 200,
+    alignItems: "center",
+    gap: "$3",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      gap: "$3",
+      alignItems: "center",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(Checkbox, {
+        defaultChecked: !0,
+        id: "unstyled",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Checkbox.Indicator, {
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons.Check, {})
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Label, {
+        htmlFor: "unstyled",
+        children: "Unstyled"
+      })]
+    })
+  });
+}

package/dist/cjs/ColorsDemo.cjs

@@ -0,0 +1,121 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var ColorsDemo_exports = {};
+__export(ColorsDemo_exports, {
+  ColorsDemo: () => ColorsDemo
+});
+module.exports = __toCommonJS(ColorsDemo_exports);
+var import_tamagui = require("tamagui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+const colorGroups = ["orange", "yellow", "green", "blue", "purple", "pink", "red"];
+function ColorsDemo() {
+  const colors = (0, import_tamagui.getTokens)({
+      prefixed: !1
+    }).color,
+    [colorsLight, colorsDark] = [getColors(colors), getColors(colors, !0)];
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    marginTop: "$4",
+    space: "$8",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorsRow, {
+      title: "Light",
+      colors: colorsLight
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorsRow, {
+      title: "Dark",
+      colors: colorsDark
+    })]
+  });
+}
+function ColorsRow({
+  title,
+  colors
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    space: !0,
+    $sm: {
+      space: "$2"
+    },
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H2, {
+      size: "$2",
+      children: title
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      space: !0,
+      alignSelf: "center",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        space: !0,
+        $sm: {
+          space: "$2"
+        },
+        alignSelf: "center",
+        children: [colors.map((group, index) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+          gap: "$2",
+          children: group.map(color => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Square, {
+            borderRadius: "$2",
+            size: "$4",
+            height: "$4",
+            borderWidth: 1,
+            backgroundColor: (0, import_tamagui.getVariableValue)(color),
+            borderColor: "$color7",
+            $sm: {
+              size: "$2"
+            },
+            $xs: {
+              size: "$1"
+            }
+          }, `${color.key}${index}`))
+        }, index)), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+          gap: "$2",
+          alignSelf: "center",
+          children: new Array(13).fill(0).slice(1).map((_, index) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+            color: "$color10",
+            textAlign: "center",
+            width: "$4",
+            $sm: {
+              width: "$2"
+            },
+            $xs: {
+              width: "$1"
+            },
+            children: index
+          }, index))
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        gap: "$4",
+        marginTop: "$2",
+        children: colorGroups.map(name => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+          theme: name,
+          color: "$color10",
+          height: "$4",
+          rotate: "-10deg",
+          $sm: {
+            height: "$2"
+          },
+          $xs: {
+            height: "$1"
+          },
+          children: name
+        }, name))
+      })]
+    })]
+  });
+}
+function getColors(colors, dark = !1) {
+  return colorGroups.map(group => Object.keys(colors).filter(color => color.startsWith(group) && (dark ? color.endsWith("Dark") : !color.endsWith("Dark"))).map(key => colors[key]));
+}

package/dist/cjs/DialogDemo.cjs

@@ -0,0 +1,155 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var DialogDemo_exports = {};
+__export(DialogDemo_exports, {
+  DialogDemo: () => DialogDemo
+});
+module.exports = __toCommonJS(DialogDemo_exports);
+var import_lucide_icons = require("@tamagui/lucide-icons"),
+  import_tamagui = require("tamagui"),
+  import_SelectDemo = require("./SelectDemo.cjs"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function DialogDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogInstance, {});
+}
+function DialogInstance() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Dialog, {
+    modal: !0,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Trigger, {
+      asChild: !0,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+        children: "Show Dialog"
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Adapt, {
+      when: "sm",
+      platform: "touch",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Sheet, {
+        animation: "medium",
+        zIndex: 2e5,
+        modal: !0,
+        dismissOnSnapToBottom: !0,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Sheet.Frame, {
+          padding: "$4",
+          gap: "$4",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Adapt.Contents, {})
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Sheet.Overlay, {
+          animation: "lazy",
+          enterStyle: {
+            opacity: 0
+          },
+          exitStyle: {
+            opacity: 0
+          }
+        })]
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Dialog.Portal, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Overlay, {
+        animation: "slow",
+        opacity: 0.5,
+        enterStyle: {
+          opacity: 0
+        },
+        exitStyle: {
+          opacity: 0
+        }
+      }, "overlay"), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Dialog.Content, {
+        bordered: !0,
+        elevate: !0,
+        animateOnly: ["transform", "opacity"],
+        animation: ["quicker", {
+          opacity: {
+            overshootClamping: !0
+          }
+        }],
+        enterStyle: {
+          x: 0,
+          y: -20,
+          opacity: 0,
+          scale: 0.9
+        },
+        exitStyle: {
+          x: 0,
+          y: 10,
+          opacity: 0,
+          scale: 0.95
+        },
+        gap: "$4",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Title, {
+          children: "Edit profile"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Description, {
+          children: "Make changes to your profile here. Click save when you're done."
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Fieldset, {
+          gap: "$4",
+          horizontal: !0,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Label, {
+            width: 160,
+            justifyContent: "flex-end",
+            htmlFor: "name",
+            children: "Name"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Input, {
+            flex: 1,
+            id: "name",
+            defaultValue: "Nate Wienert"
+          })]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Fieldset, {
+          gap: "$4",
+          horizontal: !0,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Label, {
+            width: 160,
+            justifyContent: "flex-end",
+            htmlFor: "username",
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.TooltipSimple, {
+              label: "Pick your favorite",
+              placement: "bottom-start",
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+                children: "Food"
+              })
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_SelectDemo.SelectDemoItem, {})]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          alignSelf: "flex-end",
+          gap: "$4",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogInstance, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Close, {
+            displayWhenAdapted: !0,
+            asChild: !0,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+              theme: "active",
+              "aria-label": "Close",
+              children: "Save changes"
+            })
+          })]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Unspaced, {
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Close, {
+            asChild: !0,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+              position: "absolute",
+              top: "$3",
+              right: "$3",
+              size: "$2",
+              circular: !0,
+              icon: import_lucide_icons.X
+            })
+          })
+        })]
+      }, "content")]
+    })]
+  });
+}

package/dist/cjs/FormsDemo.cjs

@@ -0,0 +1,70 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf,
+  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+    value: mod,
+    enumerable: !0
+  }) : target, mod)),
+  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+    value: !0
+  }), mod);
+var FormsDemo_exports = {};
+__export(FormsDemo_exports, {
+  FormsDemo: () => FormsDemo
+});
+module.exports = __toCommonJS(FormsDemo_exports);
+var import_react = __toESM(require("react")),
+  import_tamagui = require("tamagui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function FormsDemo(props) {
+  const [status, setStatus] = import_react.default.useState("off");
+  return import_react.default.useEffect(() => {
+    if (status === "submitting") {
+      const timer = setTimeout(() => setStatus("off"), 2e3);
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+  }, [status]), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Form, {
+    alignItems: "center",
+    minWidth: 300,
+    gap: "$2",
+    onSubmit: () => setStatus("submitting"),
+    borderWidth: 1,
+    borderRadius: "$4",
+    backgroundColor: "$background",
+    borderColor: "$borderColor",
+    padding: "$8",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H4, {
+      children: status[0].toUpperCase() + status.slice(1)
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Form.Trigger, {
+      asChild: !0,
+      disabled: status !== "off",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+        icon: status === "submitting" ? () => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Spinner, {}) : void 0,
+        children: "Submit"
+      })
+    })]
+  });
+}

package/dist/cjs/Grid.cjs

@@ -0,0 +1,71 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf,
+  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+    value: mod,
+    enumerable: !0
+  }) : target, mod)),
+  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+    value: !0
+  }), mod);
+var Grid_exports = {};
+__export(Grid_exports, {
+  Grid: () => Grid
+});
+module.exports = __toCommonJS(Grid_exports);
+var import_core = require("@tamagui/core"),
+  import_stacks = require("@tamagui/stacks"),
+  import_react = __toESM(require("react")),
+  import_jsx_runtime = require("react/jsx-runtime");
+function Grid({
+  children,
+  columns,
+  itemMinWidth = 200,
+  gap
+}) {
+  if (import_core.isWeb) return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+    style: {
+      gap,
+      display: "grid",
+      justifyContent: "stretch",
+      // gridTemplateRows: 'repeat(4, 1fr)',
+      gridTemplateColumns: `repeat( auto-fit, minmax(${itemMinWidth}px, 1fr) )`
+      // gridTemplateColumns: '1fr 1fr',
+    },
+    children
+  });
+  const childrenList = import_react.default.Children.toArray(children);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_stacks.XStack, {
+    alignItems: "center",
+    justifyContent: "center",
+    flexWrap: "wrap",
+    children: childrenList.map((child, i) => child ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_stacks.XStack, {
+      flex: 1,
+      minWidth: itemMinWidth,
+      marginRight: gap,
+      marginBottom: gap,
+      children: child
+    }, i) : null)
+  });
+}

package/dist/cjs/GroupDemo.cjs

@@ -0,0 +1,85 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var GroupDemo_exports = {};
+__export(GroupDemo_exports, {
+  GroupDemo: () => GroupDemo
+});
+module.exports = __toCommonJS(GroupDemo_exports);
+var import_lucide_icons = require("@tamagui/lucide-icons"),
+  import_tamagui = require("tamagui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function GroupDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    padding: "$3",
+    space: "$2",
+    alignItems: "center",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Group, {
+      orientation: "horizontal",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Group.Item, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+          children: "First"
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Group.Item, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+          children: "Second"
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Group.Item, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+          children: "Third"
+        })
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XGroup, {
+      size: "$3",
+      $gtSm: {
+        size: "$5"
+      },
+      children: [/* @__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"
+        })
+      }), /* @__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"
+        })
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YGroup, {
+      separator: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}),
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YGroup.Item, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ListItem, {
+          title: "First"
+        })
+      }), /* @__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"
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YGroup.Item, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ListItem, {
+          children: "Third"
+        })
+      })]
+    })]
+  });
+}