@tamagui/demos 1.58.8 → 1.59.0

package/dist/cjs/SheetDemo.js

@@ -26,15 +26,36 @@ var import_lucide_icons = require("@tamagui/lucide-icons");
 var import_sheet = require("@tamagui/sheet");
 var import_react = require("react");
 var import_tamagui = require("tamagui");
+const spModes = ["percent", "constant", "fit", "mixed"];
 const SheetDemo = () => {
   const [position, setPosition] = (0, import_react.useState)(0);
   const [open, setOpen] = (0, import_react.useState)(false);
   const [modal, setModal] = (0, import_react.useState)(true);
   const [innerOpen, setInnerOpen] = (0, import_react.useState)(false);
+  const [snapPointsMode, setSnapPointsMode] = (0, import_react.useState)("percent");
+  const [mixedFitDemo, setMixedFitDemo] = (0, import_react.useState)(false);
+  const isPercent = snapPointsMode === "percent";
+  const isConstant = snapPointsMode === "constant";
+  const isFit = snapPointsMode === "fit";
+  const isMixed = snapPointsMode === "mixed";
+  const hasFit = isFit || isMixed && mixedFitDemo;
+  const snapPoints = isPercent ? [85, 50, 25] : isConstant ? [256, 190] : isFit ? void 0 : mixedFitDemo ? ["fit", 190] : ["80%", 256, 190];
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { space: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { onPress: () => setOpen(true), children: "Open" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { onPress: () => setModal((x) => !x), children: modal ? "Type: Modal" : "Type: Inline" })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { space: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { space: true, $sm: { flexDirection: "column", alignItems: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { onPress: () => setOpen(true), children: "Open" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { onPress: () => setModal((x) => !x), children: modal ? "Type: Modal" : "Type: Inline" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_tamagui.Button,
+          {
+            onPress: () => setSnapPointsMode(
+              (prev) => spModes[(spModes.indexOf(prev) + 1) % spModes.length]
+            ),
+            children: `Mode: ${{ percent: "Percentage", constant: "Constant", fit: "Fit", mixed: "Mixed" }[snapPointsMode]}`
+          }
+        )
+      ] }),
+      isMixed ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { onPress: () => setMixedFitDemo((x) => !x), children: `Snap Points: ${JSON.stringify(snapPoints)}` }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XStack, { paddingVertical: "$2.5", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, { children: `Snap Points: ${isFit ? "(none)" : JSON.stringify(snapPoints)}` }) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       import_sheet.Sheet,
@@ -43,7 +64,8 @@ const SheetDemo = () => {
         modal,
         open,
         onOpenChange: setOpen,
-        snapPoints: [85, 50, 25],
+        snapPoints,
+        snapPointsMode,
         dismissOnSnapToBottom: true,
         position,
         onPositionChange: setPosition,
@@ -67,10 +89,11 @@ const SheetDemo = () => {
               justifyContent: "center",
               alignItems: "center",
               space: "$5",
+              ...hasFit && { minHeight: 320, flexShrink: 0 },
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { size: "$6", circular: true, icon: import_lucide_icons.ChevronDown, onPress: () => setOpen(false) }),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Input, { width: 200 }),
-                modal && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                modal && isPercent && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InnerSheet, { open: innerOpen, onOpenChange: setInnerOpen }),
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                     import_tamagui.Button,
@@ -86,7 +109,8 @@ const SheetDemo = () => {
             }
           )
         ]
-      }
+      },
+      hasFit ? "fit" : "no-fit"
     )
   ] });
 };

package/dist/cjs/SheetDemo.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/SheetDemo.tsx"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAaM;AAbN,0BAAuC;AACvC,mBAA4C;AAC5C,mBAAyB;AACzB,qBAAyD;AAElD,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,CAAC;AAC1C,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AACtC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,IAAI;AACvC,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAEhD,SACE,4EACE;AAAA,iDAAC,yBAAO,OAAK,MACX;AAAA,kDAAC,yBAAO,SAAS,MAAM,QAAQ,IAAI,GAAG,kBAAI;AAAA,MAC1C,4CAAC,yBAAO,SAAS,MAAM,SAAS,CAAC,MAAM,CAAC,CAAC,GACtC,kBAAQ,gBAAgB,gBAC3B;AAAA,OACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,0BAA0B;AAAA,QAC1B;AAAA,QACA;AAAA,QACA,cAAc;AAAA,QACd,YAAY,CAAC,IAAI,IAAI,EAAE;AAAA,QACvB,uBAAqB;AAAA,QACrB;AAAA,QACA,kBAAkB;AAAA,QAClB,QAAQ;AAAA,QACR,WAAU;AAAA,QAEV;AAAA;AAAA,YAAC,mBAAM;AAAA,YAAN;AAAA,cACC,WAAU;AAAA,cACV,YAAY,EAAE,SAAS,EAAE;AAAA,cACzB,WAAW,EAAE,SAAS,EAAE;AAAA;AAAA,UAC1B;AAAA,UACA,4CAAC,mBAAM,QAAN,EAAa;AAAA,UACd;AAAA,YAAC,mBAAM;AAAA,YAAN;AAAA,cACC,MAAM;AAAA,cACN,SAAQ;AAAA,cACR,gBAAe;AAAA,cACf,YAAW;AAAA,cACX,OAAM;AAAA,cAEN;AAAA,4DAAC,yBAAO,MAAK,MAAK,UAAQ,MAAC,MAAM,iCAAa,SAAS,MAAM,QAAQ,KAAK,GAAG;AAAA,gBAC7E,4CAAC,wBAAM,OAAO,KAAK;AAAA,gBAClB,SACC,4EACE;AAAA,8DAAC,cAAW,MAAM,WAAW,cAAc,cAAc;AAAA,kBACzD;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAK;AAAA,sBACL,UAAQ;AAAA,sBACR,MAAM;AAAA,sBACN,SAAS,MAAM,aAAa,IAAI;AAAA;AAAA,kBAClC;AAAA,mBACF;AAAA;AAAA;AAAA,UAEJ;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAEA,SAAS,WAAW,OAAmB;AACrC,SACE,6CAAC,sBAAM,OAAK,MAAC,YAAY,CAAC,EAAE,GAAG,uBAAqB,MAAE,GAAG,OACvD;AAAA,gDAAC,mBAAM,SAAN,EAAc;AAAA,IACf,4CAAC,mBAAM,QAAN,EAAa;AAAA,IACd,4CAAC,mBAAM,OAAN,EAAY,MAAM,GAAG,gBAAe,UAAS,YAAW,UAAS,OAAM,MACtE,uDAAC,mBAAM,YAAN,EAAiB,SAAQ,MAAK,OAAK,MAClC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAQ;AAAA,UACR,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS,MAAG;AA5ExB;AA4E2B,+BAAM,iBAAN,+BAAqB;AAAA;AAAA;AAAA,MACtC;AAAA,MACA,4CAAC,qBAAG,yBAAW;AAAA,MACf,4CAAC,qBAAG,+BAAiB;AAAA,MACpB,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,MACd,4CAAC,4BAAkB,MAAK,OAAM,0XAAd,CAMhB,CACD;AAAA,OACH,GACF;AAAA,KACF;AAEJ;",
+  "mappings": "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",
   "names": []
 }

package/dist/esm/SheetDemo.js

@@ -2,16 +2,37 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown, ChevronUp } from "@tamagui/lucide-icons";
 import { Sheet } from "@tamagui/sheet";
 import { useState } from "react";
-import { Button, H1, H2, Input, Paragraph, XStack } from "tamagui";
+import { Button, H1, H2, Input, Paragraph, XStack, YStack } from "tamagui";
+const spModes = ["percent", "constant", "fit", "mixed"];
 const SheetDemo = () => {
   const [position, setPosition] = useState(0);
   const [open, setOpen] = useState(false);
   const [modal, setModal] = useState(true);
   const [innerOpen, setInnerOpen] = useState(false);
+  const [snapPointsMode, setSnapPointsMode] = useState("percent");
+  const [mixedFitDemo, setMixedFitDemo] = useState(false);
+  const isPercent = snapPointsMode === "percent";
+  const isConstant = snapPointsMode === "constant";
+  const isFit = snapPointsMode === "fit";
+  const isMixed = snapPointsMode === "mixed";
+  const hasFit = isFit || isMixed && mixedFitDemo;
+  const snapPoints = isPercent ? [85, 50, 25] : isConstant ? [256, 190] : isFit ? void 0 : mixedFitDemo ? ["fit", 190] : ["80%", 256, 190];
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(XStack, { space: true, children: [
-      /* @__PURE__ */ jsx(Button, { onPress: () => setOpen(true), children: "Open" }),
-      /* @__PURE__ */ jsx(Button, { onPress: () => setModal((x) => !x), children: modal ? "Type: Modal" : "Type: Inline" })
+    /* @__PURE__ */ jsxs(YStack, { space: true, children: [
+      /* @__PURE__ */ jsxs(XStack, { space: true, $sm: { flexDirection: "column", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsx(Button, { onPress: () => setOpen(true), children: "Open" }),
+        /* @__PURE__ */ jsx(Button, { onPress: () => setModal((x) => !x), children: modal ? "Type: Modal" : "Type: Inline" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            onPress: () => setSnapPointsMode(
+              (prev) => spModes[(spModes.indexOf(prev) + 1) % spModes.length]
+            ),
+            children: `Mode: ${{ percent: "Percentage", constant: "Constant", fit: "Fit", mixed: "Mixed" }[snapPointsMode]}`
+          }
+        )
+      ] }),
+      isMixed ? /* @__PURE__ */ jsx(Button, { onPress: () => setMixedFitDemo((x) => !x), children: `Snap Points: ${JSON.stringify(snapPoints)}` }) : /* @__PURE__ */ jsx(XStack, { paddingVertical: "$2.5", justifyContent: "center", children: /* @__PURE__ */ jsx(Paragraph, { children: `Snap Points: ${isFit ? "(none)" : JSON.stringify(snapPoints)}` }) })
     ] }),
     /* @__PURE__ */ jsxs(
       Sheet,
@@ -20,7 +41,8 @@ const SheetDemo = () => {
         modal,
         open,
         onOpenChange: setOpen,
-        snapPoints: [85, 50, 25],
+        snapPoints,
+        snapPointsMode,
         dismissOnSnapToBottom: true,
         position,
         onPositionChange: setPosition,
@@ -44,10 +66,11 @@ const SheetDemo = () => {
               justifyContent: "center",
               alignItems: "center",
               space: "$5",
+              ...hasFit && { minHeight: 320, flexShrink: 0 },
               children: [
                 /* @__PURE__ */ jsx(Button, { size: "$6", circular: true, icon: ChevronDown, onPress: () => setOpen(false) }),
                 /* @__PURE__ */ jsx(Input, { width: 200 }),
-                modal && /* @__PURE__ */ jsxs(Fragment, { children: [
+                modal && isPercent && /* @__PURE__ */ jsxs(Fragment, { children: [
                   /* @__PURE__ */ jsx(InnerSheet, { open: innerOpen, onOpenChange: setInnerOpen }),
                   /* @__PURE__ */ jsx(
                     Button,
@@ -63,7 +86,8 @@ const SheetDemo = () => {
             }
           )
         ]
-      }
+      },
+      hasFit ? "fit" : "no-fit"
     )
   ] });
 };

package/dist/esm/SheetDemo.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/SheetDemo.tsx"],
-  "mappings": "AAaM,SAmCM,UAlCJ,KADF;AAbN,SAAS,aAAa,iBAAiB;AACvC,SAAS,aAAmC;AAC5C,SAAS,gBAAgB;AACzB,SAAS,QAAQ,IAAI,IAAI,OAAO,WAAW,cAAc;AAElD,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,CAAC;AAC1C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,IAAI;AACvC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,SACE,iCACE;AAAA,yBAAC,UAAO,OAAK,MACX;AAAA,0BAAC,UAAO,SAAS,MAAM,QAAQ,IAAI,GAAG,kBAAI;AAAA,MAC1C,oBAAC,UAAO,SAAS,MAAM,SAAS,CAAC,MAAM,CAAC,CAAC,GACtC,kBAAQ,gBAAgB,gBAC3B;AAAA,OACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,0BAA0B;AAAA,QAC1B;AAAA,QACA;AAAA,QACA,cAAc;AAAA,QACd,YAAY,CAAC,IAAI,IAAI,EAAE;AAAA,QACvB,uBAAqB;AAAA,QACrB;AAAA,QACA,kBAAkB;AAAA,QAClB,QAAQ;AAAA,QACR,WAAU;AAAA,QAEV;AAAA;AAAA,YAAC,MAAM;AAAA,YAAN;AAAA,cACC,WAAU;AAAA,cACV,YAAY,EAAE,SAAS,EAAE;AAAA,cACzB,WAAW,EAAE,SAAS,EAAE;AAAA;AAAA,UAC1B;AAAA,UACA,oBAAC,MAAM,QAAN,EAAa;AAAA,UACd;AAAA,YAAC,MAAM;AAAA,YAAN;AAAA,cACC,MAAM;AAAA,cACN,SAAQ;AAAA,cACR,gBAAe;AAAA,cACf,YAAW;AAAA,cACX,OAAM;AAAA,cAEN;AAAA,oCAAC,UAAO,MAAK,MAAK,UAAQ,MAAC,MAAM,aAAa,SAAS,MAAM,QAAQ,KAAK,GAAG;AAAA,gBAC7E,oBAAC,SAAM,OAAO,KAAK;AAAA,gBAClB,SACC,iCACE;AAAA,sCAAC,cAAW,MAAM,WAAW,cAAc,cAAc;AAAA,kBACzD;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAK;AAAA,sBACL,UAAQ;AAAA,sBACR,MAAM;AAAA,sBACN,SAAS,MAAM,aAAa,IAAI;AAAA;AAAA,kBAClC;AAAA,mBACF;AAAA;AAAA;AAAA,UAEJ;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAEA,SAAS,WAAW,OAAmB;AACrC,SACE,qBAAC,SAAM,OAAK,MAAC,YAAY,CAAC,EAAE,GAAG,uBAAqB,MAAE,GAAG,OACvD;AAAA,wBAAC,MAAM,SAAN,EAAc;AAAA,IACf,oBAAC,MAAM,QAAN,EAAa;AAAA,IACd,oBAAC,MAAM,OAAN,EAAY,MAAM,GAAG,gBAAe,UAAS,YAAW,UAAS,OAAM,MACtE,+BAAC,MAAM,YAAN,EAAiB,SAAQ,MAAK,OAAK,MAClC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAQ;AAAA,UACR,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS,MAAG;AA5ExB;AA4E2B,+BAAM,iBAAN,+BAAqB;AAAA;AAAA;AAAA,MACtC;AAAA,MACA,oBAAC,MAAG,yBAAW;AAAA,MACf,oBAAC,MAAG,+BAAiB;AAAA,MACpB,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,MACd,oBAAC,aAAkB,MAAK,OAAM,0XAAd,CAMhB,CACD;AAAA,OACH,GACF;AAAA,KACF;AAEJ;",
+  "mappings": "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",
   "names": []
 }

package/dist/jsx/SheetDemo.js

@@ -1,23 +1,42 @@
 import { ChevronDown, ChevronUp } from "@tamagui/lucide-icons";
 import { Sheet } from "@tamagui/sheet";
 import { useState } from "react";
-import { Button, H1, H2, Input, Paragraph, XStack } from "tamagui";
+import { Button, H1, H2, Input, Paragraph, XStack, YStack } from "tamagui";
+const spModes = ["percent", "constant", "fit", "mixed"];
 const SheetDemo = () => {
   const [position, setPosition] = useState(0);
   const [open, setOpen] = useState(false);
   const [modal, setModal] = useState(true);
   const [innerOpen, setInnerOpen] = useState(false);
+  const [snapPointsMode, setSnapPointsMode] = useState("percent");
+  const [mixedFitDemo, setMixedFitDemo] = useState(false);
+  const isPercent = snapPointsMode === "percent";
+  const isConstant = snapPointsMode === "constant";
+  const isFit = snapPointsMode === "fit";
+  const isMixed = snapPointsMode === "mixed";
+  const hasFit = isFit || isMixed && mixedFitDemo;
+  const snapPoints = isPercent ? [85, 50, 25] : isConstant ? [256, 190] : isFit ? void 0 : mixedFitDemo ? ["fit", 190] : ["80%", 256, 190];
   return <>
-    <XStack space>
-      <Button onPress={() => setOpen(true)}>Open</Button>
-      <Button onPress={() => setModal((x) => !x)}>{modal ? "Type: Modal" : "Type: Inline"}</Button>
-    </XStack>
+    <YStack space>
+      <XStack space $sm={{ flexDirection: "column", alignItems: "center" }}>
+        <Button onPress={() => setOpen(true)}>Open</Button>
+        <Button onPress={() => setModal((x) => !x)}>{modal ? "Type: Modal" : "Type: Inline"}</Button>
+        <Button
+          onPress={() => setSnapPointsMode(
+            (prev) => spModes[(spModes.indexOf(prev) + 1) % spModes.length]
+          )}
+        >{`Mode: ${{ percent: "Percentage", constant: "Constant", fit: "Fit", mixed: "Mixed" }[snapPointsMode]}`}</Button>
+      </XStack>
+      {isMixed ? <Button onPress={() => setMixedFitDemo((x) => !x)}>{`Snap Points: ${JSON.stringify(snapPoints)}`}</Button> : <XStack paddingVertical="$2.5" justifyContent="center"><Paragraph>{`Snap Points: ${isFit ? "(none)" : JSON.stringify(snapPoints)}`}</Paragraph></XStack>}
+    </YStack>
     <Sheet
+      key={hasFit ? "fit" : "no-fit"}
       forceRemoveScrollEnabled={open}
       modal={modal}
       open={open}
       onOpenChange={setOpen}
-      snapPoints={[85, 50, 25]}
+      snapPoints={snapPoints}
+      snapPointsMode={snapPointsMode}
       dismissOnSnapToBottom
       position={position}
       onPositionChange={setPosition}
@@ -36,10 +55,11 @@ const SheetDemo = () => {
         justifyContent="center"
         alignItems="center"
         space="$5"
+        {...hasFit && { minHeight: 320, flexShrink: 0 }}
       >
         <Button size="$6" circular icon={ChevronDown} onPress={() => setOpen(false)} />
         <Input width={200} />
-        {modal && <>
+        {modal && isPercent && <>
           <InnerSheet open={innerOpen} onOpenChange={setInnerOpen} />
           <Button
             size="$6"

package/dist/jsx/SheetDemo.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/SheetDemo.tsx"],
-  "mappings": "AAAA,SAAS,aAAa,iBAAiB;AACvC,SAAS,aAAmC;AAC5C,SAAS,gBAAgB;AACzB,SAAS,QAAQ,IAAI,IAAI,OAAO,WAAW,cAAc;AAElD,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,CAAC;AAC1C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,IAAI;AACvC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,SACE;AAAA,IACE,CAAC,OAAO;AAAA,MACN,CAAC,OAAO,SAAS,MAAM,QAAQ,IAAI,GAAG,IAAI,EAAzC;AAAA,MACD,CAAC,OAAO,SAAS,MAAM,SAAS,CAAC,MAAM,CAAC,CAAC,IACtC,QAAQ,gBAAgB,eAC3B,EAFC;AAAA,IAGH,EALC;AAAA,IAOD,CAAC;AAAA,MACC,0BAA0B;AAAA,MAC1B,OAAO;AAAA,MACP,MAAM;AAAA,MACN,cAAc;AAAA,MACd,YAAY,CAAC,IAAI,IAAI,EAAE;AAAA,MACvB;AAAA,MACA,UAAU;AAAA,MACV,kBAAkB;AAAA,MAClB,QAAQ;AAAA,MACR,UAAU;AAAA;AAAA,MAEV,CAAC,MAAM;AAAA,QACL,UAAU;AAAA,QACV,YAAY,EAAE,SAAS,EAAE;AAAA,QACzB,WAAW,EAAE,SAAS,EAAE;AAAA,MAC1B;AAAA,MACA,CAAC,MAAM,OAAO;AAAA,MACd,CAAC,MAAM;AAAA,QACL,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,eAAe;AAAA,QACf,WAAW;AAAA,QACX,MAAM;AAAA;AAAA,QAEN,CAAC,OAAO,KAAK,KAAK,SAAS,MAAM,aAAa,SAAS,MAAM,QAAQ,KAAK,GAAG;AAAA,QAC7E,CAAC,MAAM,OAAO,KAAK;AAAA,SAClB,SACC;AAAA,UACE,CAAC,WAAW,MAAM,WAAW,cAAc,cAAc;AAAA,UACzD,CAAC;AAAA,YACC,KAAK;AAAA,YACL;AAAA,YACA,MAAM;AAAA,YACN,SAAS,MAAM,aAAa,IAAI;AAAA,UAClC;AAAA,QACF;AAAA,MAEJ,EApBC,MAAM;AAAA,IAqBT,EAvCC;AAAA,EAwCH;AAEJ;AAEA,SAAS,WAAW,OAAmB;AACrC,SACE,CAAC,MAAM,MAAM,YAAY,CAAC,EAAE,GAAG,0BAA0B;AAAA,IACvD,CAAC,MAAM,QAAQ;AAAA,IACf,CAAC,MAAM,OAAO;AAAA,IACd,CAAC,MAAM,MAAM,MAAM,GAAG,eAAe,SAAS,WAAW,SAAS,MAAM,KACtE,CAAC,MAAM,WAAW,QAAQ,KAAK;AAAA,MAC7B,CAAC;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS,MAAM,MAAM,eAAe,KAAK;AAAA,MAC3C;AAAA,MACA,CAAC,GAAG,WAAW,EAAd;AAAA,MACD,CAAC,GAAG,iBAAiB,EAApB;AAAA,OACA,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,MACd,CAAC,UAAU,KAAK,GAAG,KAAK,MAAM,0WAM9B,EANC,UAOF;AAAA,IACH,EAnBC,MAAM,WAoBT,EArBC,MAAM;AAAA,EAsBT,EAzBC;AA2BL;",
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/demos",
-  "version": "1.58.8",
+  "version": "1.59.0",
   "sideEffects": [
     "*.css"
   ],
@@ -33,29 +33,29 @@
     }
   },
   "dependencies": {
-    "@tamagui/avatar": "1.58.8",
-    "@tamagui/button": "1.58.8",
-    "@tamagui/core": "1.58.8",
-    "@tamagui/list-item": "1.58.8",
-    "@tamagui/logo": "1.58.8",
-    "@tamagui/menu": "1.58.8",
-    "@tamagui/popover": "1.58.8",
-    "@tamagui/progress": "1.58.8",
-    "@tamagui/radio-group": "1.58.8",
-    "@tamagui/select": "1.58.8",
-    "@tamagui/sheet": "1.58.8",
-    "@tamagui/site-config": "1.58.8",
-    "@tamagui/slider": "1.58.8",
-    "@tamagui/stacks": "1.58.8",
-    "@tamagui/toast": "1.58.8",
-    "tamagui": "1.58.8"
+    "@tamagui/avatar": "1.59.0",
+    "@tamagui/button": "1.59.0",
+    "@tamagui/core": "1.59.0",
+    "@tamagui/list-item": "1.59.0",
+    "@tamagui/logo": "1.59.0",
+    "@tamagui/menu": "1.59.0",
+    "@tamagui/popover": "1.59.0",
+    "@tamagui/progress": "1.59.0",
+    "@tamagui/radio-group": "1.59.0",
+    "@tamagui/select": "1.59.0",
+    "@tamagui/sheet": "1.59.0",
+    "@tamagui/site-config": "1.59.0",
+    "@tamagui/slider": "1.59.0",
+    "@tamagui/stacks": "1.59.0",
+    "@tamagui/toast": "1.59.0",
+    "tamagui": "1.59.0"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.58.8",
+    "@tamagui/build": "1.59.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/src/SheetDemo.tsx

@@ -1,29 +1,78 @@
 import { ChevronDown, ChevronUp } from '@tamagui/lucide-icons'
 import { Sheet, SheetProps, useSheet } from '@tamagui/sheet'
 import { useState } from 'react'
-import { Button, H1, H2, Input, Paragraph, XStack } from 'tamagui'
+import { Button, H1, H2, Input, Paragraph, XStack, YStack } from 'tamagui'
+
+const spModes = ['percent', 'constant', 'fit', 'mixed'] as const
 
 export const SheetDemo = () => {
   const [position, setPosition] = useState(0)
   const [open, setOpen] = useState(false)
   const [modal, setModal] = useState(true)
   const [innerOpen, setInnerOpen] = useState(false)
+  const [snapPointsMode, setSnapPointsMode] =
+    useState<(typeof spModes)[number]>('percent')
+  const [mixedFitDemo, setMixedFitDemo] = useState(false)
+
+  const isPercent = snapPointsMode === 'percent'
+  const isConstant = snapPointsMode === 'constant'
+  const isFit = snapPointsMode === 'fit'
+  const isMixed = snapPointsMode === 'mixed'
+  const hasFit = isFit || (isMixed && mixedFitDemo)
+  const snapPoints = isPercent
+    ? [85, 50, 25]
+    : isConstant
+    ? [256, 190]
+    : isFit
+    ? undefined
+    : mixedFitDemo
+    ? ['fit', 190]
+    : ['80%', 256, 190]
 
   return (
     <>
-      <XStack space>
-        <Button onPress={() => setOpen(true)}>Open</Button>
-        <Button onPress={() => setModal((x) => !x)}>
-          {modal ? 'Type: Modal' : 'Type: Inline'}
-        </Button>
-      </XStack>
+      <YStack space>
+        <XStack space $sm={{ flexDirection: 'column', alignItems: 'center' }}>
+          <Button onPress={() => setOpen(true)}>Open</Button>
+          <Button onPress={() => setModal((x) => !x)}>
+            {modal ? 'Type: Modal' : 'Type: Inline'}
+          </Button>
+          <Button
+            onPress={() =>
+              setSnapPointsMode(
+                (prev) => spModes[(spModes.indexOf(prev) + 1) % spModes.length]
+              )
+            }
+          >
+            {`Mode: ${
+              { percent: 'Percentage', constant: 'Constant', fit: 'Fit', mixed: 'Mixed' }[
+                snapPointsMode
+              ]
+            }`}
+          </Button>
+        </XStack>
+        {isMixed ? (
+          <Button onPress={() => setMixedFitDemo((x) => !x)}>
+            {`Snap Points: ${JSON.stringify(snapPoints)}`}
+          </Button>
+        ) : (
+          <XStack paddingVertical="$2.5" justifyContent="center">
+            <Paragraph>{`Snap Points: ${
+              isFit ? '(none)' : JSON.stringify(snapPoints)
+            }`}</Paragraph>
+          </XStack>
+        )}
+      </YStack>
 
       <Sheet
+        // force remount when switching to fit modes to avoid weird measurement loop
+        key={hasFit ? 'fit' : 'no-fit'}
         forceRemoveScrollEnabled={open}
         modal={modal}
         open={open}
         onOpenChange={setOpen}
-        snapPoints={[85, 50, 25]}
+        snapPoints={snapPoints}
+        snapPointsMode={snapPointsMode}
         dismissOnSnapToBottom
         position={position}
         onPositionChange={setPosition}
@@ -42,10 +91,11 @@ export const SheetDemo = () => {
           justifyContent="center"
           alignItems="center"
           space="$5"
+          {...(hasFit && { minHeight: 320, flexShrink: 0 })}
         >
           <Button size="$6" circular icon={ChevronDown} onPress={() => setOpen(false)} />
           <Input width={200} />
-          {modal && (
+          {modal && isPercent && (
             <>
               <InnerSheet open={innerOpen} onOpenChange={setInnerOpen} />
               <Button

package/types/SheetDemo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SheetDemo.d.ts","sourceRoot":"","sources":["../src/SheetDemo.tsx"],"names":[],"mappings":";AAKA,eAAO,MAAM,SAAS,mBAyDrB,CAAA"}
+{"version":3,"file":"SheetDemo.d.ts","sourceRoot":"","sources":["../src/SheetDemo.tsx"],"names":[],"mappings":";AAOA,eAAO,MAAM,SAAS,mBAyGrB,CAAA"}