@hanzogui/demos 2.0.0

package/dist/esm/SelectDemo.native.js

@@ -0,0 +1,214 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, ChevronDown, ChevronUp } from "@hanzogui/lucide-icons-2";
+import React from "react";
+import { Adapt, Label, Select, Sheet, Theme, XStack, YStack, getFontSize } from "@hanzo/gui";
+import { LinearGradient } from "gui/linear-gradient";
+function SelectDemo() {
+  return /* @__PURE__ */_jsx(Theme, {
+    name: "surface1",
+    children: /* @__PURE__ */_jsxs(YStack, {
+      gap: "$4",
+      children: [/* @__PURE__ */_jsxs(XStack, {
+        width: "100%",
+        items: "center",
+        gap: "$4",
+        children: [/* @__PURE__ */_jsx(Label, {
+          htmlFor: "select-demo-1",
+          flex: 1,
+          minW: 80,
+          children: "Custom"
+        }), /* @__PURE__ */_jsx(SelectDemoContents, {
+          id: "select-demo-1"
+        })]
+      }), /* @__PURE__ */_jsxs(XStack, {
+        width: "100%",
+        items: "center",
+        gap: "$4",
+        children: [/* @__PURE__ */_jsx(Label, {
+          htmlFor: "select-demo-2",
+          flex: 1,
+          minW: 80,
+          children: "Native"
+        }), /* @__PURE__ */_jsx(SelectDemoContents, {
+          id: "select-demo-2",
+          native: !0
+        })]
+      })]
+    })
+  });
+}
+var getItemLabel = function (value) {
+  var _items_find;
+  return (_items_find = items.find(function (item) {
+    return item.name.toLowerCase() === value;
+  })) === null || _items_find === void 0 ? void 0 : _items_find.name;
+};
+function SelectDemoContents(props) {
+  var [val, setVal] = React.useState("apple"),
+    _props_size;
+  return /* @__PURE__ */_jsxs(Select, {
+    value: val,
+    onValueChange: setVal,
+    disablePreventBodyScroll: !0,
+    ...props,
+    // renderValue enables SSR support by providing the label synchronously
+    renderValue: getItemLabel,
+    children: [props?.trigger || /* @__PURE__ */_jsx(Select.Trigger, {
+      maxWidth: 220,
+      iconAfter: ChevronDown,
+      borderRadius: "$4",
+      backgroundColor: "$background",
+      children: /* @__PURE__ */_jsx(Select.Value, {
+        placeholder: "Something"
+      })
+    }), /* @__PURE__ */_jsx(Adapt, {
+      when: "maxMd",
+      platform: "touch",
+      children: /* @__PURE__ */_jsxs(Sheet, {
+        native: !!props.native,
+        modal: !0,
+        dismissOnSnapToBottom: !0,
+        transition: "medium",
+        children: [/* @__PURE__ */_jsx(Sheet.Frame, {
+          children: /* @__PURE__ */_jsx(Sheet.ScrollView, {
+            children: /* @__PURE__ */_jsx(Adapt.Contents, {})
+          })
+        }), /* @__PURE__ */_jsx(Sheet.Overlay, {
+          bg: "$shadowColor",
+          transition: "lazy",
+          enterStyle: {
+            opacity: 0
+          },
+          exitStyle: {
+            opacity: 0
+          }
+        })]
+      })
+    }), /* @__PURE__ */_jsxs(Select.Content, {
+      children: [/* @__PURE__ */_jsxs(Select.ScrollUpButton, {
+        items: "center",
+        justify: "center",
+        position: "relative",
+        width: "100%",
+        height: "$3",
+        children: [/* @__PURE__ */_jsx(YStack, {
+          z: 10,
+          children: /* @__PURE__ */_jsx(ChevronUp, {
+            size: 20
+          })
+        }), /* @__PURE__ */_jsx(LinearGradient, {
+          start: [0, 0],
+          end: [0, 1],
+          fullscreen: !0,
+          colors: ["$background", "transparent"],
+          rounded: "$4"
+        })]
+      }), /* @__PURE__ */_jsxs(Select.Viewport, {
+        minW: 200,
+        bg: "$background",
+        rounded: "$4",
+        borderWidth: 1,
+        borderColor: "$borderColor",
+        children: [/* @__PURE__ */_jsxs(Select.Group, {
+          children: [/* @__PURE__ */_jsx(Select.Label, {
+            fontWeight: "700",
+            children: "Fruits"
+          }), /* for longer lists memoizing these is useful */
+          React.useMemo(function () {
+            return items.map(function (item, i) {
+              return /* @__PURE__ */_jsxs(Select.Item, {
+                index: i,
+                value: item.name.toLowerCase(),
+                children: [/* @__PURE__ */_jsx(Select.ItemText, {
+                  children: item.name
+                }), /* @__PURE__ */_jsx(Select.ItemIndicator, {
+                  marginLeft: "auto",
+                  children: /* @__PURE__ */_jsx(Check, {
+                    size: 16
+                  })
+                })]
+              }, item.name);
+            });
+          }, [items])]
+        }), /* Native gets an extra icon */
+        props.native && /* @__PURE__ */_jsx(YStack, {
+          position: "absolute",
+          r: 0,
+          t: 16,
+          items: "center",
+          justify: "center",
+          width: "$4",
+          pointerEvents: "none",
+          children: /* @__PURE__ */_jsx(ChevronDown, {
+            size: getFontSize((_props_size = props.size) !== null && _props_size !== void 0 ? _props_size : "$true")
+          })
+        })]
+      }), /* @__PURE__ */_jsxs(Select.ScrollDownButton, {
+        items: "center",
+        justify: "center",
+        position: "relative",
+        width: "100%",
+        height: "$3",
+        children: [/* @__PURE__ */_jsx(YStack, {
+          z: 10,
+          children: /* @__PURE__ */_jsx(ChevronDown, {
+            size: 20
+          })
+        }), /* @__PURE__ */_jsx(LinearGradient, {
+          start: [0, 0],
+          end: [0, 1],
+          fullscreen: !0,
+          colors: ["transparent", "$background"],
+          rounded: "$4"
+        })]
+      })]
+    })]
+  });
+}
+var items = [{
+  name: "Apple"
+}, {
+  name: "Pear"
+}, {
+  name: "Blackberry"
+}, {
+  name: "Peach"
+}, {
+  name: "Apricot"
+}, {
+  name: "Melon"
+}, {
+  name: "Honeydew"
+}, {
+  name: "Starfruit"
+}, {
+  name: "Blueberry"
+}, {
+  name: "Raspberry"
+}, {
+  name: "Strawberry"
+}, {
+  name: "Mango"
+}, {
+  name: "Pineapple"
+}, {
+  name: "Lime"
+}, {
+  name: "Lemon"
+}, {
+  name: "Coconut"
+}, {
+  name: "Guava"
+}, {
+  name: "Papaya"
+}, {
+  name: "Orange"
+}, {
+  name: "Grape"
+}, {
+  name: "Jackfruit"
+}, {
+  name: "Durian"
+}];
+export { SelectDemo, SelectDemoContents };
+//# sourceMappingURL=SelectDemo.native.js.map

package/dist/esm/SelectDemo.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Check","ChevronDown","ChevronUp","React","Adapt","Label","Select","Sheet","Theme","XStack","YStack","getFontSize","LinearGradient","SelectDemo","name","children","gap","width","items","htmlFor","flex","minW","SelectDemoContents","id","native","getItemLabel","value","_items_find","find","item","toLowerCase","props","val","setVal","useState","_props_size","onValueChange","disablePreventBodyScroll","renderValue","trigger","Trigger","maxWidth","iconAfter","borderRadius","backgroundColor","Value","placeholder","when","platform","modal","dismissOnSnapToBottom","transition","Frame","ScrollView","Contents","Overlay","bg","enterStyle","opacity","exitStyle","Content","ScrollUpButton","justify","position","height","z","size","start","end","fullscreen","colors","rounded","Viewport","borderWidth","borderColor","Group","fontWeight","useMemo","map","i","Item","index","ItemText","ItemIndicator","marginLeft","r","t"],"sources":["../../src/SelectDemo.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/SeparatorDemo.mjs

@@ -0,0 +1,37 @@
+import { Paragraph, Separator, XStack, YStack } from "@hanzo/gui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SeparatorDemo() {
+  return /* @__PURE__ */jsxs(YStack, {
+    width: "100%",
+    maxW: 300,
+    mx: 16,
+    children: [/* @__PURE__ */jsx(Paragraph, {
+      fontWeight: "800",
+      children: "Gui"
+    }), /* @__PURE__ */jsx(Paragraph, {
+      children: "A cross-platform component library."
+    }), /* @__PURE__ */jsx(Separator, {
+      my: 15
+    }), /* @__PURE__ */jsxs(XStack, {
+      height: 20,
+      items: "center",
+      children: [/* @__PURE__ */jsx(Paragraph, {
+        children: "Blog"
+      }), /* @__PURE__ */jsx(Separator, {
+        self: "stretch",
+        vertical: !0,
+        mx: 16
+      }), /* @__PURE__ */jsx(Paragraph, {
+        children: "Docs"
+      }), /* @__PURE__ */jsx(Separator, {
+        self: "stretch",
+        vertical: !0,
+        mx: 16
+      }), /* @__PURE__ */jsx(Paragraph, {
+        children: "Source"
+      })]
+    })]
+  });
+}
+export { SeparatorDemo };
+//# sourceMappingURL=SeparatorDemo.mjs.map

package/dist/esm/SeparatorDemo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["Paragraph","Separator","XStack","YStack","jsx","jsxs","SeparatorDemo","width","maxW","mx","children","fontWeight","my","height","items","self","vertical"],"sources":["../../src/SeparatorDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,SAAA,EAAWC,SAAA,EAAWC,MAAA,EAAQC,MAAA,QAAc;AAK/C,SAAAC,GAAA,EAGAC,IAAA,QAHA;AAHC,SAASC,cAAA,EAAgB;EAC9B,OACE,eAAAD,IAAA,CAACF,MAAA;IAAOI,KAAA,EAAM;IAAOC,IAAA,EAAM;IAAKC,EAAA,EAAI;IAClCC,QAAA,kBAAAN,GAAA,CAACJ,SAAA;MAAUW,UAAA,EAAW;MAAMD,QAAA;IAAA,CAAG,GAC/B,eAAAN,GAAA,CAACJ,SAAA;MAAUU,QAAA;IAAA,CAAmC,GAC9C,eAAAN,GAAA,CAACH,SAAA;MAAUW,EAAA,EAAI;IAAA,CAAI,GACnB,eAAAP,IAAA,CAACH,MAAA;MAAOW,MAAA,EAAQ;MAAIC,KAAA,EAAM;MACxBJ,QAAA,kBAAAN,GAAA,CAACJ,SAAA;QAAUU,QAAA;MAAA,CAAI,GACf,eAAAN,GAAA,CAACH,SAAA;QAAUc,IAAA,EAAK;QAAUC,QAAA,EAAQ;QAACP,EAAA,EAAI;MAAA,CAAI,GAC3C,eAAAL,GAAA,CAACJ,SAAA;QAAUU,QAAA;MAAA,CAAI,GACf,eAAAN,GAAA,CAACH,SAAA;QAAUc,IAAA,EAAK;QAAUC,QAAA,EAAQ;QAACP,EAAA,EAAI;MAAA,CAAI,GAC3C,eAAAL,GAAA,CAACJ,SAAA;QAAUU,QAAA;MAAA,CAAM;IAAA,CACnB;EAAA,CACF;AAEJ","ignoreList":[]}

package/dist/esm/SeparatorDemo.native.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Paragraph, Separator, XStack, YStack } from "@hanzo/gui";
+function SeparatorDemo() {
+  return /* @__PURE__ */_jsxs(YStack, {
+    width: "100%",
+    maxW: 300,
+    mx: 16,
+    children: [/* @__PURE__ */_jsx(Paragraph, {
+      fontWeight: "800",
+      children: "Gui"
+    }), /* @__PURE__ */_jsx(Paragraph, {
+      children: "A cross-platform component library."
+    }), /* @__PURE__ */_jsx(Separator, {
+      my: 15
+    }), /* @__PURE__ */_jsxs(XStack, {
+      height: 20,
+      items: "center",
+      children: [/* @__PURE__ */_jsx(Paragraph, {
+        children: "Blog"
+      }), /* @__PURE__ */_jsx(Separator, {
+        self: "stretch",
+        vertical: !0,
+        mx: 16
+      }), /* @__PURE__ */_jsx(Paragraph, {
+        children: "Docs"
+      }), /* @__PURE__ */_jsx(Separator, {
+        self: "stretch",
+        vertical: !0,
+        mx: 16
+      }), /* @__PURE__ */_jsx(Paragraph, {
+        children: "Source"
+      })]
+    })]
+  });
+}
+export { SeparatorDemo };
+//# sourceMappingURL=SeparatorDemo.native.js.map

package/dist/esm/SeparatorDemo.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Paragraph","Separator","XStack","YStack","SeparatorDemo","width","maxW","mx","children","fontWeight"],"sources":["../../src/SeparatorDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAW,EAAAC,IAAA,IAAAC,KAAW,QAAQ,mBAAc;AAK/C,SAAAC,SAGA,EAAAC,SAHA,EAAAC,MAAA,EAAAC,MAAA;AAHC,SAASC,cAAA,EAAgB;EAC9B,OACE,eAAAL,KAAC,CAAAI,MAAA;IACCE,KAAA;IACAC,IAAA;IACAC,EAAA;IACAC,QAAA,GACE,eAAAX,IAAC,CAAAG,SAAA;MACDS,UAAA;MACAD,QAAA;IACA,IACA,eAAAX,IAAC,CAAAG,SAAA;MACHQ,QAAA;IACF,IAEJ,eAAAX,IAAA,CAAAI,SAAA","ignoreList":[]}

package/dist/esm/ShapesDemo.mjs

@@ -0,0 +1,19 @@
+import { Circle, Square, XStack } from "@hanzo/gui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ShapesDemo() {
+  return /* @__PURE__ */jsxs(XStack, {
+    p: "$2",
+    gap: "$4",
+    children: [/* @__PURE__ */jsx(Square, {
+      size: 100,
+      bg: "$color",
+      elevation: "$4"
+    }), /* @__PURE__ */jsx(Circle, {
+      size: 100,
+      bg: "$color",
+      elevation: "$4"
+    })]
+  });
+}
+export { ShapesDemo };
+//# sourceMappingURL=ShapesDemo.mjs.map

package/dist/esm/ShapesDemo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["Circle","Square","XStack","jsx","jsxs","ShapesDemo","p","gap","children","size","bg","elevation"],"sources":["../../src/ShapesDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,MAAA,EAAQC,MAAA,EAAQC,MAAA,QAAc;AAInC,SACEC,GAAA,EADFC,IAAA;AAFG,SAASC,WAAA,EAAa;EAC3B,OACE,eAAAD,IAAA,CAACF,MAAA;IAAOI,CAAA,EAAE;IAAKC,GAAA,EAAI;IACjBC,QAAA,kBAAAL,GAAA,CAACF,MAAA;MAAOQ,IAAA,EAAM;MAAKC,EAAA,EAAG;MAASC,SAAA,EAAU;IAAA,CAAK,GAC9C,eAAAR,GAAA,CAACH,MAAA;MAAOS,IAAA,EAAM;MAAKC,EAAA,EAAG;MAASC,SAAA,EAAU;IAAA,CAAK;EAAA,CAChD;AAEJ","ignoreList":[]}

package/dist/esm/ShapesDemo.native.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Circle, Square, XStack } from "@hanzo/gui";
+function ShapesDemo() {
+  return /* @__PURE__ */_jsxs(XStack, {
+    p: "$2",
+    gap: "$4",
+    children: [/* @__PURE__ */_jsx(Square, {
+      size: 100,
+      bg: "$color",
+      elevation: "$4"
+    }), /* @__PURE__ */_jsx(Circle, {
+      size: 100,
+      bg: "$color",
+      elevation: "$4"
+    })]
+  });
+}
+export { ShapesDemo };
+//# sourceMappingURL=ShapesDemo.native.js.map

package/dist/esm/ShapesDemo.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Circle","Square","XStack","ShapesDemo","p","gap","children"],"sources":["../../src/ShapesDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAQ,EAAAC,IAAQ,IAAAC,KAAA,QAAc;AAInC,SACEC,MADF,EAAAC,MAAA,EAAAC,MAAA;AAFG,SAASC,WAAA,EAAa;EAC3B,OACE,eAAAJ,KAAC,CAAAG,MAAA;IACCE,CAAA;IACAC,GAAA;IAA8CC,QAChD,GAEJ,eAAAT,IAAA,CAAAI,MAAA","ignoreList":[]}

package/dist/esm/SheetDemo.mjs

@@ -0,0 +1,158 @@
+import { ChevronDown, ChevronUp } from "@hanzogui/lucide-icons-2";
+import { Sheet } from "@hanzogui/sheet";
+import React, { memo } from "react";
+import { Button, H2, Input, Paragraph, XStack, YStack } from "@hanzo/gui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+const spModes = ["percent", "constant", "fit", "mixed"],
+  SheetDemo = () => {
+    const [position, setPosition] = React.useState(0),
+      [open, setOpen] = React.useState(!1),
+      [modal, setModal] = React.useState(!0),
+      [innerOpen, setInnerOpen] = React.useState(!1),
+      [snapPointsMode, setSnapPointsMode] = React.useState("percent"),
+      [mixedFitDemo, setMixedFitDemo] = React.useState(!1),
+      isPercent = snapPointsMode === "percent",
+      isConstant = snapPointsMode === "constant",
+      isFit = snapPointsMode === "fit",
+      isMixed = snapPointsMode === "mixed",
+      snapPoints = isPercent ? [85, 50, 25] : isConstant ? [256, 190] : isFit ? void 0 : mixedFitDemo ? ["fit", 110] : ["80%", 256, 190];
+    return /* @__PURE__ */jsxs(Fragment, {
+      children: [/* @__PURE__ */jsxs(YStack, {
+        gap: "$4",
+        children: [/* @__PURE__ */jsxs(XStack, {
+          gap: "$4",
+          $maxMd: {
+            flexDirection: "column",
+            items: "center"
+          },
+          children: [/* @__PURE__ */jsx(Button, {
+            onPress: () => setOpen(!0),
+            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, {
+          py: "$2.5",
+          justify: "center",
+          children: /* @__PURE__ */jsx(Paragraph, {
+            children: `Snap Points: ${isFit ? "(none)" : JSON.stringify(snapPoints)}`
+          })
+        })]
+      }), /* @__PURE__ */jsxs(Sheet, {
+        modal,
+        open,
+        onOpenChange: setOpen,
+        snapPoints,
+        snapPointsMode,
+        dismissOnSnapToBottom: !0,
+        position,
+        onPositionChange: setPosition,
+        zIndex: 1e5,
+        transition: "medium",
+        children: [/* @__PURE__ */jsx(Sheet.Overlay, {
+          transition: "lazy",
+          bg: "$shadow6",
+          enterStyle: {
+            opacity: 0
+          },
+          exitStyle: {
+            opacity: 0
+          }
+        }), /* @__PURE__ */jsx(Sheet.Handle, {}), /* @__PURE__ */jsx(Sheet.Frame, {
+          p: "$4",
+          justify: "center",
+          items: "center",
+          gap: "$5",
+          children: /* @__PURE__ */jsx(SheetContents, {
+            modal,
+            isPercent,
+            innerOpen,
+            setInnerOpen,
+            setOpen
+          })
+        })]
+      })]
+    });
+  },
+  SheetContents = memo(({
+    modal,
+    isPercent,
+    innerOpen,
+    setInnerOpen,
+    setOpen
+  }) => /* @__PURE__ */jsxs(Fragment, {
+    children: [/* @__PURE__ */jsx(Button, {
+      size: "$6",
+      circular: !0,
+      icon: ChevronDown,
+      onPress: () => setOpen(!1)
+    }), /* @__PURE__ */jsx(Input, {
+      width: 200
+    }), modal && isPercent && /* @__PURE__ */jsxs(Fragment, {
+      children: [/* @__PURE__ */jsx(InnerSheet, {
+        open: innerOpen,
+        onOpenChange: setInnerOpen
+      }), /* @__PURE__ */jsx(Button, {
+        size: "$6",
+        circular: !0,
+        icon: ChevronUp,
+        onPress: () => setInnerOpen(!0)
+      })]
+    })]
+  }));
+function InnerSheet(props) {
+  return /* @__PURE__ */jsxs(Sheet, {
+    transition: "medium",
+    modal: !0,
+    snapPoints: [90],
+    dismissOnSnapToBottom: !0,
+    ...props,
+    children: [/* @__PURE__ */jsx(Sheet.Overlay, {
+      transition: "medium",
+      bg: "$shadow2",
+      enterStyle: {
+        opacity: 0
+      },
+      exitStyle: {
+        opacity: 0
+      }
+    }), /* @__PURE__ */jsx(Sheet.Handle, {}), /* @__PURE__ */jsx(Sheet.Frame, {
+      flex: 1,
+      justify: "center",
+      items: "center",
+      gap: "$5",
+      children: /* @__PURE__ */jsx(Sheet.ScrollView, {
+        children: /* @__PURE__ */jsxs(YStack, {
+          p: "$5",
+          gap: "$8",
+          children: [/* @__PURE__ */jsx(Button, {
+            size: "$6",
+            circular: !0,
+            self: "center",
+            icon: ChevronDown,
+            onPress: () => props.onOpenChange?.(!1)
+          }), /* @__PURE__ */jsx(H2, {
+            children: "Hello world"
+          }), [1, 2, 3, 4, 5, 6, 7, 8].map(i => /* @__PURE__ */jsx(Paragraph, {
+            size: "$8",
+            children: "Eu officia sunt ipsum nisi dolore labore est laborum laborum in esse ad pariatur. Dolor excepteur esse deserunt voluptate labore ea. Exercitation ipsum deserunt occaecat cupidatat consequat est adipisicing velit cupidatat ullamco veniam aliquip reprehenderit officia. Officia labore culpa ullamco velit. In sit occaecat velit ipsum fugiat esse aliqua dolor sint."
+          }, i))]
+        })
+      })
+    })]
+  });
+}
+export { SheetDemo };
+//# sourceMappingURL=SheetDemo.mjs.map

package/dist/esm/SheetDemo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["ChevronDown","ChevronUp","Sheet","React","memo","Button","H2","Input","Paragraph","XStack","YStack","Fragment","jsx","jsxs","spModes","SheetDemo","position","setPosition","useState","open","setOpen","modal","setModal","innerOpen","setInnerOpen","snapPointsMode","setSnapPointsMode","mixedFitDemo","setMixedFitDemo","isPercent","isConstant","isFit","isMixed","snapPoints","children","gap","$maxMd","flexDirection","items","onPress","x","prev","indexOf","length","percent","constant","fit","mixed","JSON","stringify","py","justify","onOpenChange","dismissOnSnapToBottom","onPositionChange","zIndex","transition","Overlay","bg","enterStyle","opacity","exitStyle","Handle","Frame","p","SheetContents","size","circular","icon","width","InnerSheet","props","flex","ScrollView","self","map","i"],"sources":["../../src/SheetDemo.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}