@hanzogui/demos 2.0.0

package/dist/esm/SheetDemo.native.js

@@ -0,0 +1,184 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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";
+var spModes = ["percent", "constant", "fit", "mixed"],
+  SheetDemo = function () {
+    var [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: function () {
+              return setOpen(!0);
+            },
+            children: "Open"
+          }), /* @__PURE__ */_jsx(Button, {
+            onPress: function () {
+              return setModal(function (x) {
+                return !x;
+              });
+            },
+            children: modal ? "Type: Modal" : "Type: Inline"
+          }), /* @__PURE__ */_jsx(Button, {
+            onPress: function () {
+              return setSnapPointsMode(function (prev) {
+                return spModes[(spModes.indexOf(prev) + 1) % spModes.length];
+              });
+            },
+            children: `Mode: ${{
+              percent: "Percentage",
+              constant: "Constant",
+              fit: "Fit",
+              mixed: "Mixed"
+            }[snapPointsMode]}`
+          })]
+        }), isMixed ? /* @__PURE__ */_jsx(Button, {
+          onPress: function () {
+            return setMixedFitDemo(function (x) {
+              return !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 = /* @__PURE__ */memo(function (param) {
+    var {
+      modal,
+      isPercent,
+      innerOpen,
+      setInnerOpen,
+      setOpen
+    } = param;
+    return /* @__PURE__ */_jsxs(_Fragment, {
+      children: [/* @__PURE__ */_jsx(Button, {
+        size: "$6",
+        circular: !0,
+        icon: ChevronDown,
+        onPress: function () {
+          return 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: function () {
+            return 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: function () {
+              var _props_onOpenChange;
+              return (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, !1);
+            }
+          }), /* @__PURE__ */_jsx(H2, {
+            children: "Hello world"
+          }), [1, 2, 3, 4, 5, 6, 7, 8].map(function (i) {
+            return /* @__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.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","ChevronDown","ChevronUp","Sheet","React","memo","Button","H2","Input","Paragraph","XStack","YStack","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"],"sources":["../../src/SheetDemo.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/SliderDemo.mjs

@@ -0,0 +1,35 @@
+import { Slider, XStack } from "@hanzo/gui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SliderDemo() {
+  return /* @__PURE__ */jsxs(XStack, {
+    height: 200,
+    items: "center",
+    gap: "$8",
+    children: [/* @__PURE__ */jsx(SimpleSlider, {
+      height: 200,
+      orientation: "vertical"
+    }), /* @__PURE__ */jsx(SimpleSlider, {
+      width: 200
+    })]
+  });
+}
+function SimpleSlider({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */jsxs(Slider, {
+    defaultValue: [50],
+    max: 100,
+    step: 1,
+    ...props,
+    children: [/* @__PURE__ */jsx(Slider.Track, {
+      children: /* @__PURE__ */jsx(Slider.TrackActive, {})
+    }), /* @__PURE__ */jsx(Slider.Thumb, {
+      theme: "accent",
+      size: 30,
+      borderRadius: 100
+    }), children]
+  });
+}
+export { SliderDemo };
+//# sourceMappingURL=SliderDemo.mjs.map

package/dist/esm/SliderDemo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["Slider","XStack","jsx","jsxs","SliderDemo","height","items","gap","children","SimpleSlider","orientation","width","props","defaultValue","max","step","Track","TrackActive","Thumb","theme","size","borderRadius"],"sources":["../../src/SliderDemo.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,MAAA,EAAeC,MAAA,QAAc;AAIlC,SACEC,GAAA,EADFC,IAAA;AAFG,SAASC,WAAA,EAAa;EAC3B,OACE,eAAAD,IAAA,CAACF,MAAA;IAAOI,MAAA,EAAQ;IAAKC,KAAA,EAAM;IAASC,GAAA,EAAI;IACtCC,QAAA,kBAAAN,GAAA,CAACO,YAAA;MAAaJ,MAAA,EAAQ;MAAKK,WAAA,EAAY;IAAA,CAAW,GAClD,eAAAR,GAAA,CAACO,YAAA;MAAaE,KAAA,EAAO;IAAA,CAAK;EAAA,CAC5B;AAEJ;AAEA,SAASF,aAAa;EAAED,QAAA;EAAU,GAAGI;AAAM,GAAgB;EACzD,OACE,eAAAT,IAAA,CAACH,MAAA;IAAOa,YAAA,EAAc,CAAC,EAAE;IAAGC,GAAA,EAAK;IAAKC,IAAA,EAAM;IAAI,GAAGH,KAAA;IACjDJ,QAAA,kBAAAN,GAAA,CAACF,MAAA,CAAOgB,KAAA,EAAP;MACCR,QAAA,iBAAAN,GAAA,CAACF,MAAA,CAAOiB,WAAA,EAAP,EAAmB;IAAA,CACtB,GACA,eAAAf,GAAA,CAACF,MAAA,CAAOkB,KAAA,EAAP;MAAaC,KAAA,EAAM;MAASC,IAAA,EAAM;MAAIC,YAAA,EAAc;IAAA,CAAK,GACzDb,QAAA;EAAA,CACH;AAEJ","ignoreList":[]}

package/dist/esm/SliderDemo.native.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slider, XStack } from "@hanzo/gui";
+function SliderDemo() {
+  return /* @__PURE__ */_jsxs(XStack, {
+    height: 200,
+    items: "center",
+    gap: "$8",
+    children: [/* @__PURE__ */_jsx(SimpleSlider, {
+      height: 200,
+      orientation: "vertical"
+    }), /* @__PURE__ */_jsx(SimpleSlider, {
+      width: 200
+    })]
+  });
+}
+function SimpleSlider(param) {
+  var {
+    children,
+    ...props
+  } = param;
+  return /* @__PURE__ */_jsxs(Slider, {
+    defaultValue: [50],
+    max: 100,
+    step: 1,
+    ...props,
+    children: [/* @__PURE__ */_jsx(Slider.Track, {
+      children: /* @__PURE__ */_jsx(Slider.TrackActive, {})
+    }), /* @__PURE__ */_jsx(Slider.Thumb, {
+      theme: "accent",
+      size: 30,
+      borderRadius: 100
+    }), children]
+  });
+}
+export { SliderDemo };
+//# sourceMappingURL=SliderDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Slider","XStack","SliderDemo","height","items","gap","children","SimpleSlider","orientation","width"],"sources":["../../src/SliderDemo.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,GAAA,IAAAC,IAAe,EAAAC,IAAA,IAAAC,KAAc;AAIlC,SACEC,MADF,EAAAC,MAAA;AAFG,SAASC,WAAA,EAAa;EAC3B,OACE,eAAAH,KAAC,CAAAE,MAAA;IACCE,MAAA;IACAC,KAAA;IAA0BC,GAC5B;IAEJC,QAAA,GAEA,eAAsBT,IAAE,CAAAU,YAAa;MACnCJ,MACE;MACEK,WAAA;IAGA,IACC,eAAAX,IAAA,CAAAU,YAAA;MACHE,KAAA;IAEJ","ignoreList":[]}

package/dist/esm/SpinnerDemo.mjs

@@ -0,0 +1,18 @@
+import { Spinner, YStack } from "@hanzo/gui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SpinnerDemo() {
+  return /* @__PURE__ */jsxs(YStack, {
+    p: "$3",
+    gap: "$4",
+    items: "center",
+    children: [/* @__PURE__ */jsx(Spinner, {
+      size: "small",
+      color: "$green10"
+    }), /* @__PURE__ */jsx(Spinner, {
+      size: "large",
+      color: "$yellow10"
+    })]
+  });
+}
+export { SpinnerDemo };
+//# sourceMappingURL=SpinnerDemo.mjs.map

package/dist/esm/SpinnerDemo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["Spinner","YStack","jsx","jsxs","SpinnerDemo","p","gap","items","children","size","color"],"sources":["../../src/SpinnerDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,OAAA,EAASC,MAAA,QAAc;AAI5B,SACEC,GAAA,EADFC,IAAA;AAFG,SAASC,YAAA,EAAc;EAC5B,OACE,eAAAD,IAAA,CAACF,MAAA;IAAOI,CAAA,EAAE;IAAKC,GAAA,EAAI;IAAKC,KAAA,EAAM;IAC5BC,QAAA,kBAAAN,GAAA,CAACF,OAAA;MAAQS,IAAA,EAAK;MAAQC,KAAA,EAAM;IAAA,CAAW,GACvC,eAAAR,GAAA,CAACF,OAAA;MAAQS,IAAA,EAAK;MAAQC,KAAA,EAAM;IAAA,CAAY;EAAA,CAC1C;AAEJ","ignoreList":[]}

package/dist/esm/SpinnerDemo.native.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Spinner, YStack } from "@hanzo/gui";
+function SpinnerDemo() {
+  return /* @__PURE__ */_jsxs(YStack, {
+    p: "$3",
+    gap: "$4",
+    items: "center",
+    children: [/* @__PURE__ */_jsx(Spinner, {
+      size: "small",
+      color: "$green10"
+    }), /* @__PURE__ */_jsx(Spinner, {
+      size: "large",
+      color: "$yellow10"
+    })]
+  });
+}
+export { SpinnerDemo };
+//# sourceMappingURL=SpinnerDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Spinner","YStack","SpinnerDemo","p","gap","items","children"],"sources":["../../src/SpinnerDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAS,EAAAC,IAAA,IAAAC,KAAc;AAI5B,SACEC,OADF,EAAAC,MAAA;AAFG,SAASC,YAAA,EAAc;EAC5B,OACE,eAAAH,KAAC,CAAAE,MAAA;IACCE,CAAA;IACAC,GAAA;IAAwCC,KAC1C;IAEJC,QAAA,G","ignoreList":[]}

package/dist/esm/StacksDemo.mjs

@@ -0,0 +1,84 @@
+import { XStack, YStack, ZStack } from "@hanzo/gui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function StacksDemo() {
+  return /* @__PURE__ */jsxs(XStack, {
+    maxW: 250,
+    p: "$2",
+    self: "center",
+    gap: "$2",
+    children: [/* @__PURE__ */jsxs(YStack, {
+      flex: 1,
+      flexBasis: "auto",
+      borderWidth: 2,
+      borderColor: "$color",
+      rounded: "$4",
+      gap: "$2",
+      p: "$2",
+      children: [/* @__PURE__ */jsx(YStack, {
+        bg: "$color",
+        rounded: "$3",
+        p: "$2"
+      }), /* @__PURE__ */jsx(YStack, {
+        bg: "$color",
+        rounded: "$3",
+        p: "$2"
+      }), /* @__PURE__ */jsx(YStack, {
+        bg: "$color",
+        rounded: "$3",
+        p: "$2"
+      })]
+    }), /* @__PURE__ */jsxs(XStack, {
+      flex: 1,
+      flexBasis: "auto",
+      borderWidth: 2,
+      borderColor: "$color",
+      rounded: "$4",
+      gap: "$2",
+      p: "$2",
+      children: [/* @__PURE__ */jsx(YStack, {
+        bg: "$color",
+        rounded: "$3",
+        p: "$2"
+      }), /* @__PURE__ */jsx(YStack, {
+        bg: "$color",
+        rounded: "$3",
+        p: "$2"
+      }), /* @__PURE__ */jsx(YStack, {
+        bg: "$color",
+        rounded: "$3",
+        p: "$2"
+      })]
+    }), /* @__PURE__ */jsxs(ZStack, {
+      flex: 1,
+      flexBasis: "auto",
+      maxW: 50,
+      maxH: 85,
+      width: 100,
+      children: [/* @__PURE__ */jsx(YStack, {
+        fullscreen: !0,
+        rounded: "$4",
+        p: "$2",
+        borderColor: "$color",
+        borderWidth: 2
+      }), /* @__PURE__ */jsx(YStack, {
+        borderColor: "$color",
+        fullscreen: !0,
+        y: 10,
+        x: 10,
+        borderWidth: 2,
+        rounded: "$4",
+        p: "$2"
+      }), /* @__PURE__ */jsx(YStack, {
+        borderColor: "$color",
+        fullscreen: !0,
+        y: 20,
+        x: 20,
+        borderWidth: 2,
+        rounded: "$4",
+        p: "$2"
+      })]
+    })]
+  });
+}
+export { StacksDemo };
+//# sourceMappingURL=StacksDemo.mjs.map

package/dist/esm/StacksDemo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["XStack","YStack","ZStack","jsx","jsxs","StacksDemo","maxW","p","self","gap","children","flex","flexBasis","borderWidth","borderColor","rounded","bg","maxH","width","fullscreen","y","x"],"sources":["../../src/StacksDemo.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,MAAA,EAAQC,MAAA,EAAQC,MAAA,QAAc;AAKjC,SASEC,GAAA,EATFC,IAAA;AAHC,SAASC,WAAA,EAAa;EAC3B,OACE,eAAAD,IAAA,CAACJ,MAAA;IAAOM,IAAA,EAAM;IAAKC,CAAA,EAAE;IAAKC,IAAA,EAAK;IAASC,GAAA,EAAI;IAC1CC,QAAA,kBAAAN,IAAA,CAACH,MAAA;MACCU,IAAA,EAAM;MACNC,SAAA,EAAU;MACVC,WAAA,EAAa;MACbC,WAAA,EAAY;MACZC,OAAA,EAAQ;MACRN,GAAA,EAAI;MACJF,CAAA,EAAE;MAEFG,QAAA,kBAAAP,GAAA,CAACF,MAAA;QAAOe,EAAA,EAAG;QAASD,OAAA,EAAQ;QAAKR,CAAA,EAAE;MAAA,CAAK,GACxC,eAAAJ,GAAA,CAACF,MAAA;QAAOe,EAAA,EAAG;QAASD,OAAA,EAAQ;QAAKR,CAAA,EAAE;MAAA,CAAK,GACxC,eAAAJ,GAAA,CAACF,MAAA;QAAOe,EAAA,EAAG;QAASD,OAAA,EAAQ;QAAKR,CAAA,EAAE;MAAA,CAAK;IAAA,CAC1C,GAEA,eAAAH,IAAA,CAACJ,MAAA;MACCW,IAAA,EAAM;MACNC,SAAA,EAAU;MACVC,WAAA,EAAa;MACbC,WAAA,EAAY;MACZC,OAAA,EAAQ;MACRN,GAAA,EAAI;MACJF,CAAA,EAAE;MAEFG,QAAA,kBAAAP,GAAA,CAACF,MAAA;QAAOe,EAAA,EAAG;QAASD,OAAA,EAAQ;QAAKR,CAAA,EAAE;MAAA,CAAK,GACxC,eAAAJ,GAAA,CAACF,MAAA;QAAOe,EAAA,EAAG;QAASD,OAAA,EAAQ;QAAKR,CAAA,EAAE;MAAA,CAAK,GACxC,eAAAJ,GAAA,CAACF,MAAA;QAAOe,EAAA,EAAG;QAASD,OAAA,EAAQ;QAAKR,CAAA,EAAE;MAAA,CAAK;IAAA,CAC1C,GAEA,eAAAH,IAAA,CAACF,MAAA;MAAOS,IAAA,EAAM;MAAGC,SAAA,EAAU;MAAON,IAAA,EAAM;MAAIW,IAAA,EAAM;MAAIC,KAAA,EAAO;MAC3DR,QAAA,kBAAAP,GAAA,CAACF,MAAA;QAAOkB,UAAA,EAAU;QAACJ,OAAA,EAAQ;QAAKR,CAAA,EAAE;QAAKO,WAAA,EAAY;QAASD,WAAA,EAAa;MAAA,CAAG,GAC5E,eAAAV,GAAA,CAACF,MAAA;QACCa,WAAA,EAAY;QACZK,UAAA,EAAU;QACVC,CAAA,EAAG;QACHC,CAAA,EAAG;QACHR,WAAA,EAAa;QACbE,OAAA,EAAQ;QACRR,CAAA,EAAE;MAAA,CACJ,GACA,eAAAJ,GAAA,CAACF,MAAA;QACCa,WAAA,EAAY;QACZK,UAAA,EAAU;QACVC,CAAA,EAAG;QACHC,CAAA,EAAG;QACHR,WAAA,EAAa;QACbE,OAAA,EAAQ;QACRR,CAAA,EAAE;MAAA,CACJ;IAAA,CACF;EAAA,CACF;AAEJ","ignoreList":[]}

package/dist/esm/StacksDemo.native.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XStack, YStack, ZStack } from "@hanzo/gui";
+function StacksDemo() {
+  return /* @__PURE__ */_jsxs(XStack, {
+    maxW: 250,
+    p: "$2",
+    self: "center",
+    gap: "$2",
+    children: [/* @__PURE__ */_jsxs(YStack, {
+      flex: 1,
+      flexBasis: "auto",
+      borderWidth: 2,
+      borderColor: "$color",
+      rounded: "$4",
+      gap: "$2",
+      p: "$2",
+      children: [/* @__PURE__ */_jsx(YStack, {
+        bg: "$color",
+        rounded: "$3",
+        p: "$2"
+      }), /* @__PURE__ */_jsx(YStack, {
+        bg: "$color",
+        rounded: "$3",
+        p: "$2"
+      }), /* @__PURE__ */_jsx(YStack, {
+        bg: "$color",
+        rounded: "$3",
+        p: "$2"
+      })]
+    }), /* @__PURE__ */_jsxs(XStack, {
+      flex: 1,
+      flexBasis: "auto",
+      borderWidth: 2,
+      borderColor: "$color",
+      rounded: "$4",
+      gap: "$2",
+      p: "$2",
+      children: [/* @__PURE__ */_jsx(YStack, {
+        bg: "$color",
+        rounded: "$3",
+        p: "$2"
+      }), /* @__PURE__ */_jsx(YStack, {
+        bg: "$color",
+        rounded: "$3",
+        p: "$2"
+      }), /* @__PURE__ */_jsx(YStack, {
+        bg: "$color",
+        rounded: "$3",
+        p: "$2"
+      })]
+    }), /* @__PURE__ */_jsxs(ZStack, {
+      flex: 1,
+      flexBasis: "auto",
+      maxW: 50,
+      maxH: 85,
+      width: 100,
+      children: [/* @__PURE__ */_jsx(YStack, {
+        fullscreen: !0,
+        rounded: "$4",
+        p: "$2",
+        borderColor: "$color",
+        borderWidth: 2
+      }), /* @__PURE__ */_jsx(YStack, {
+        borderColor: "$color",
+        fullscreen: !0,
+        y: 10,
+        x: 10,
+        borderWidth: 2,
+        rounded: "$4",
+        p: "$2"
+      }), /* @__PURE__ */_jsx(YStack, {
+        borderColor: "$color",
+        fullscreen: !0,
+        y: 20,
+        x: 20,
+        borderWidth: 2,
+        rounded: "$4",
+        p: "$2"
+      })]
+    })]
+  });
+}
+export { StacksDemo };
+//# sourceMappingURL=StacksDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","XStack","YStack","ZStack","StacksDemo","maxW","p","self","gap","children","flex","flexBasis","borderWidth","borderColor","rounded","bg","maxH"],"sources":["../../src/StacksDemo.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,GAAA,IAAAC,IAAQ,EAAAC,IAAQ,IAAAC,KAAA,QAAc;AAEhC,SAASC,MAAA,EAAAC,MAAa,EAAAC,MAAA;AAC3B,SACEC,WAAA;EACE,sBAAAJ,KAAA,CAAAC,MAAA;IAAAI,IAAC;IAAAC,CAAA;IAAAC,IACC,UAAM;IAAAC,GAAA,EACN;IAAUC,QACV,GAAa,eACDT,KAAA,CAAAE,MAAA;MACZQ,IAAA;MACAC,SAAI;MACJC,WAAE;MAEFC,WAAA;MAAAC,OAAA;MAAwCN,GACxC;MAAwCF,CAAA,EACxC;MAAwCG,QAAA,kBAAAX,IAAA,CAAAI,MAAA;QAC1Ca,EAAA;QAEAD,OAAA;QAACR,CAAA;MAAA,IACC,eAAMR,IAAA,CAAAI,MAAA;QACNa,EAAA,UAAU;QACVD,OAAA,EAAa;QACbR,CAAA;MACA,IACA,eAAIR,IAAA,CAAAI,MAAA;QACFa,EAAA;QAEFD,OAAA;QAAAR,CAAA;MACA;IACwC,mBAAAN,KAAA,CAAAC,MAAA;MAC1CS,IAAA;MAEAC,SAAA,QAAC;MACCC,WAAA;MACAC,WAAA;MAACC,OAAA;MAAAN,GAAA;MAAAF,CAAA,EACC;MAAYG,QACZ,GACA,eAAGX,IAAA,CAAAI,MAAA;QACHa,EAAG;QACHD,OAAA,MAAa;QACbR,CAAA;MACA,IAAE,eAAAR,IAAA,CAAAI,MAAA;QACJa,EAAA;QACAD,OAAA;QAACR,CAAA;MAAA,IACC,eAAYR,IAAA,CAAAI,MAAA;QACZa,EAAA,UAAU;QACVD,OAAG;QACHR,CAAG;MACH;IACQ,IACN,eAAAN,KAAA,CAAAG,MAAA;MACJO,IAAA;MACFC,SAAA;MACFN,IAAA;MAEJW,IAAA","ignoreList":[]}

package/dist/esm/SwitchDemo.mjs

@@ -0,0 +1,77 @@
+import { Label, Separator, Switch, XStack, YStack } from "@hanzo/gui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function SwitchDemo() {
+  return /* @__PURE__ */jsx(Fragment, {
+    children: /* @__PURE__ */jsxs(YStack, {
+      width: 200,
+      items: "center",
+      gap: "$3",
+      children: [/* @__PURE__ */jsxs(XStack, {
+        gap: "$3",
+        $xs: {
+          flexDirection: "column"
+        },
+        children: [/* @__PURE__ */jsx(SwitchWithLabel, {
+          size: "$2"
+        }), /* @__PURE__ */jsx(SwitchWithLabel, {
+          size: "$2",
+          defaultChecked: !0
+        })]
+      }), /* @__PURE__ */jsxs(XStack, {
+        gap: "$3",
+        $xs: {
+          flexDirection: "column"
+        },
+        children: [/* @__PURE__ */jsx(SwitchWithLabel, {
+          size: "$3"
+        }), /* @__PURE__ */jsx(SwitchWithLabel, {
+          size: "$3",
+          defaultChecked: !0
+        })]
+      }), /* @__PURE__ */jsxs(XStack, {
+        gap: "$3",
+        $xs: {
+          flexDirection: "column"
+        },
+        children: [/* @__PURE__ */jsx(SwitchWithLabel, {
+          size: "$4"
+        }), /* @__PURE__ */jsx(SwitchWithLabel, {
+          size: "$4",
+          defaultChecked: !0
+        })]
+      })]
+    })
+  });
+}
+function SwitchWithLabel(props) {
+  const id = `switch-${props.size.toString().slice(1)}-${props.defaultChecked ?? ""}}`;
+  return /* @__PURE__ */jsxs(XStack, {
+    width: 200,
+    items: "center",
+    gap: "$4",
+    children: [/* @__PURE__ */jsx(Label, {
+      pr: "$0",
+      minW: 90,
+      justify: "flex-end",
+      size: props.size,
+      htmlFor: id,
+      children: "Accept"
+    }), /* @__PURE__ */jsx(Separator, {
+      minH: 20,
+      vertical: !0
+    }), /* @__PURE__ */jsx(Switch, {
+      id,
+      transition: "300ms",
+      size: props.size,
+      defaultChecked: props.defaultChecked,
+      activeStyle: {
+        backgroundColor: "$color6"
+      },
+      children: /* @__PURE__ */jsx(Switch.Thumb, {
+        transition: "quickest"
+      })
+    })]
+  });
+}
+export { SwitchDemo, SwitchWithLabel };
+//# sourceMappingURL=SwitchDemo.mjs.map

package/dist/esm/SwitchDemo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["Label","Separator","Switch","XStack","YStack","Fragment","jsx","jsxs","SwitchDemo","children","width","items","gap","$xs","flexDirection","SwitchWithLabel","size","defaultChecked","props","id","toString","slice","pr","minW","justify","htmlFor","minH","vertical","transition","activeStyle","backgroundColor","Thumb"],"sources":["../../src/SwitchDemo.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,KAAA,EAAOC,SAAA,EAAWC,MAAA,EAAeC,MAAA,EAAQC,MAAA,QAAc;AAI5D,SAAAC,QAAA,EAGMC,GAAA,EADFC,IAAA,QAFJ;AAFG,SAASC,WAAA,EAAa;EAC3B,OACE,eAAAF,GAAA,CAAAD,QAAA;IACEI,QAAA,iBAAAF,IAAA,CAACH,MAAA;MAAOM,KAAA,EAAO;MAAKC,KAAA,EAAM;MAASC,GAAA,EAAI;MACrCH,QAAA,kBAAAF,IAAA,CAACJ,MAAA;QAAOS,GAAA,EAAI;QAAKC,GAAA,EAAK;UAAEC,aAAA,EAAe;QAAS;QAC9CL,QAAA,kBAAAH,GAAA,CAACS,eAAA;UAAgBC,IAAA,EAAK;QAAA,CAAK,GAC3B,eAAAV,GAAA,CAACS,eAAA;UAAgBC,IAAA,EAAK;UAAKC,cAAA,EAAc;QAAA,CAAC;MAAA,CAC5C,GACA,eAAAV,IAAA,CAACJ,MAAA;QAAOS,GAAA,EAAI;QAAKC,GAAA,EAAK;UAAEC,aAAA,EAAe;QAAS;QAC9CL,QAAA,kBAAAH,GAAA,CAACS,eAAA;UAAgBC,IAAA,EAAK;QAAA,CAAK,GAC3B,eAAAV,GAAA,CAACS,eAAA;UAAgBC,IAAA,EAAK;UAAKC,cAAA,EAAc;QAAA,CAAC;MAAA,CAC5C,GACA,eAAAV,IAAA,CAACJ,MAAA;QAAOS,GAAA,EAAI;QAAKC,GAAA,EAAK;UAAEC,aAAA,EAAe;QAAS;QAC9CL,QAAA,kBAAAH,GAAA,CAACS,eAAA;UAAgBC,IAAA,EAAK;QAAA,CAAK,GAC3B,eAAAV,GAAA,CAACS,eAAA;UAAgBC,IAAA,EAAK;UAAKC,cAAA,EAAc;QAAA,CAAC;MAAA,CAC5C;IAAA,CACF;EAAA,CACF;AAEJ;AAEO,SAASF,gBAAgBG,KAAA,EAI7B;EACD,MAAMC,EAAA,GAAK,UAAUD,KAAA,CAAMF,IAAA,CAAKI,QAAA,CAAS,EAAEC,KAAA,CAAM,CAAC,CAAC,IAAIH,KAAA,CAAMD,cAAA,IAAkB,EAAE;EACjF,OACE,eAAAV,IAAA,CAACJ,MAAA;IAAOO,KAAA,EAAO;IAAKC,KAAA,EAAM;IAASC,GAAA,EAAI;IACrCH,QAAA,kBAAAH,GAAA,CAACN,KAAA;MAAMsB,EAAA,EAAG;MAAKC,IAAA,EAAM;MAAIC,OAAA,EAAQ;MAAWR,IAAA,EAAME,KAAA,CAAMF,IAAA;MAAMS,OAAA,EAASN,EAAA;MAAIV,QAAA;IAAA,CAE3E,GACA,eAAAH,GAAA,CAACL,SAAA;MAAUyB,IAAA,EAAM;MAAIC,QAAA,EAAQ;IAAA,CAAC,GAC9B,eAAArB,GAAA,CAACJ,MAAA;MACCiB,EAAA;MACAS,UAAA,EAAW;MACXZ,IAAA,EAAME,KAAA,CAAMF,IAAA;MACZC,cAAA,EAAgBC,KAAA,CAAMD,cAAA;MAGtBY,WAAA,EAAa;QACXC,eAAA,EAAiB;MACnB;MAEArB,QAAA,iBAAAH,GAAA,CAACJ,MAAA,CAAO6B,KAAA,EAAP;QAAaH,UAAA,EAAW;MAAA,CAAW;IAAA,CACtC;EAAA,CACF;AAEJ","ignoreList":[]}

package/dist/esm/SwitchDemo.native.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Label, Separator, Switch, XStack, YStack } from "@hanzo/gui";
+function SwitchDemo() {
+  return /* @__PURE__ */_jsx(_Fragment, {
+    children: /* @__PURE__ */_jsxs(YStack, {
+      width: 200,
+      items: "center",
+      gap: "$3",
+      children: [/* @__PURE__ */_jsxs(XStack, {
+        gap: "$3",
+        $xs: {
+          flexDirection: "column"
+        },
+        children: [/* @__PURE__ */_jsx(SwitchWithLabel, {
+          size: "$2"
+        }), /* @__PURE__ */_jsx(SwitchWithLabel, {
+          size: "$2",
+          defaultChecked: !0
+        })]
+      }), /* @__PURE__ */_jsxs(XStack, {
+        gap: "$3",
+        $xs: {
+          flexDirection: "column"
+        },
+        children: [/* @__PURE__ */_jsx(SwitchWithLabel, {
+          size: "$3"
+        }), /* @__PURE__ */_jsx(SwitchWithLabel, {
+          size: "$3",
+          defaultChecked: !0
+        })]
+      }), /* @__PURE__ */_jsxs(XStack, {
+        gap: "$3",
+        $xs: {
+          flexDirection: "column"
+        },
+        children: [/* @__PURE__ */_jsx(SwitchWithLabel, {
+          size: "$4"
+        }), /* @__PURE__ */_jsx(SwitchWithLabel, {
+          size: "$4",
+          defaultChecked: !0
+        })]
+      })]
+    })
+  });
+}
+function SwitchWithLabel(props) {
+  var _props_defaultChecked,
+    id = `switch-${props.size.toString().slice(1)}-${(_props_defaultChecked = props.defaultChecked) !== null && _props_defaultChecked !== void 0 ? _props_defaultChecked : ""}}`;
+  return /* @__PURE__ */_jsxs(XStack, {
+    width: 200,
+    items: "center",
+    gap: "$4",
+    children: [/* @__PURE__ */_jsx(Label, {
+      pr: "$0",
+      minW: 90,
+      justify: "flex-end",
+      size: props.size,
+      htmlFor: id,
+      children: "Accept"
+    }), /* @__PURE__ */_jsx(Separator, {
+      minH: 20,
+      vertical: !0
+    }), /* @__PURE__ */_jsx(Switch, {
+      id,
+      transition: "300ms",
+      size: props.size,
+      defaultChecked: props.defaultChecked,
+      // use activeStyle to choose youra active color
+      // default to $backgroundActive unless "unstyled" boolean prop is on
+      activeStyle: {
+        backgroundColor: "$color6"
+      },
+      children: /* @__PURE__ */_jsx(Switch.Thumb, {
+        transition: "quickest"
+      })
+    })]
+  });
+}
+export { SwitchDemo, SwitchWithLabel };
+//# sourceMappingURL=SwitchDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","Label","Separator","Switch","XStack","YStack","SwitchDemo","children","width","items","gap","$xs","flexDirection","SwitchWithLabel","size","defaultChecked"],"sources":["../../src/SwitchDemo.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,GAAA,IAAOC,IAAA,EAAAC,IAAA,IAAWC,KAAe,EAAAC,QAAQ,IAAAC,SAAc;AAI5D,SAAAC,KAAA,EAAAC,SAEI,EAAAC,MAAA,EAAAC,MAFJ,EAAAC,MAAA;AAFG,SAASC,WAAA,EAAa;EAC3B,OACE,eAAAV,IAAA,CAAAI,SAAA,EACE;IACEO,QAAA,iBAACT,KAAO,CAAAO,MAAI;MACVG,KAAA;MACAC,KAAA;MAA0CC,GAC5C;MACAH,QAAA,GACE,eAAAT,KAAC,CAAAM,MAAA;QACDM,GAAA;QACFC,GAAA;UACAC,aAAC;QACC;QACAL,QAAA,GACF,eAAAX,IAAA,CAAAiB,eAAA;UAEJC,IAAA;QAEJ,IAEgB,eAAgBlB,IAI7B,CAAAiB,eAAA;UACUC,IAAA,MAAU;UAEnBC,cAAA,EAAC;QACC;MAIA,IAAC,eAAAjB,KAAA,CAAAM,MAAA;QAAAM,GAAA;QACCC,GAAA;UACAC,aAAW;QACX;QACAL,QAAA,GAGA,eAAaX,IAAA,CAAAiB,eAAA;UACXC,IAAA;QACF,IAEA,eAAAlB,IAAA,CAAAiB,eAAQ;UAA4BC,IAAA;UACtCC,cAAA;QACF","ignoreList":[]}