@hanzogui/demos 2.0.0

package/dist/esm/FormsDemo.native.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Button, Form, Spinner, AnimatePresence, YStack } from "@hanzo/gui";
+function FormsDemo(props) {
+  var [status, setStatus] = React.useState("off");
+  return React.useEffect(function () {
+    if (status === "submitting") {
+      var timer = setTimeout(function () {
+        return setStatus("off");
+      }, 2e3);
+      return function () {
+        clearTimeout(timer);
+      };
+    }
+  }, [status]), /* @__PURE__ */_jsx(Form, {
+    items: "center",
+    gap: "$2",
+    onSubmit: function () {
+      return setStatus("submitting");
+    },
+    borderWidth: 1,
+    rounded: "$4",
+    bg: "$color2",
+    borderColor: "$borderColor",
+    minW: 350,
+    p: "$6",
+    children: /* @__PURE__ */_jsx(Form.Trigger, {
+      asChild: !0,
+      disabled: status !== "off",
+      children: /* @__PURE__ */_jsxs(YStack, {
+        gap: "$4",
+        children: [/* @__PURE__ */_jsx(Button, {
+          children: "Submit"
+        }), /* @__PURE__ */_jsx(YStack, {
+          width: "100%",
+          height: 40,
+          justifyContent: "center",
+          alignItems: "center",
+          children: /* @__PURE__ */_jsx(AnimatePresence, {
+            children: status === "submitting" ? /* @__PURE__ */_jsx(Spinner, {
+              transition: "medium",
+              enterStyle: {
+                opacity: 0
+              },
+              alignSelf: "center",
+              width: 8
+            }, "spinner") : null
+          })
+        })]
+      })
+    })
+  });
+}
+export { FormsDemo };
+//# sourceMappingURL=FormsDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","React","Button","Form","Spinner","AnimatePresence","YStack","FormsDemo","props","status","setStatus","useState","useEffect","timer","setTimeout","clearTimeout","items","gap","onSubmit","borderWidth","rounded","bg","borderColor","minW","p","children","Trigger","asChild","disabled","width","height","justifyContent","alignItems","transition","enterStyle"],"sources":["../../src/FormsDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAAOA,GAAA,IAAAC,IAAW,EAAAC,IAAA,IAAAC,KAAA;AAElB,OAAAC,KAAA;AAAA,SACEC,MAAA,EAAAC,IAAA,EAAAC,OAAA,EAAAC,eAAA,EAAAC,MAAA;AAAA,SACAC,UAAAC,KAAA;EAEA,KAAAC,MAAA,EAAAC,SAAA,IAAAT,KAAA,CAAAU,QAAA;EACA,OAAAV,KAAA,CAAAW,SAAA;IAKA,IAAAH,MAAA;MAAA,IACKI,KAAA,GAAAC,UAAA;QA2BC,OAAAJ,SAAA;MAzBD,GAAS;MACd,OAAO,YAAQ;QAEfK,YAAM,CAAAF,KAAU;MACd;IACE;EACA,IACEJ,MAAA,CAAkB,GACpB,eAAAX,IAAA,CAAAK,IAAA;IACFa,KAAA;IACFC,GAAI,MAAO;IAGRC,QAAA,WAAAA,CAAA;MAAA,OAAAR,SAAA;IAAA;IACOS,WACF;IAAAC,OACJ,MAAU;IAA4BC,EACtC;IAAaC,WACL;IAAAC,IACR,EAAG;IAAAC,CAAA,EACH;IAAYC,QACN,iBAAA3B,IAAA,CAAAK,IAAA,CAAAuB,OAAA;MACNC,OAAE;MAEFC,QAAA,EAAAnB,MAAA;MAEIgB,QAAA,iBAACzB,KAAA,CAAOM,MAAA;QACRW,GAAA;QAGMQ,QAAC,kBAAA3B,IAAA,CAAAI,MAAA;UACCuB,QAAA;QAAW,EACX,EAAyB,eACf3B,IAAA,CAAAQ,MAAA;UAEVuB,KAAA,EAAO;UAAAC,MAAA;UADHC,cAAA;UAGJC,UAER;UAEJP,QAAA,iBAAA3B,IAAA,CAAAO,eAAA;YAAAoB,QAAA,EAAAhB,MAAA,mCAAAX,IAAA,CAAAM,OAAA;cACF6B,UAAA;cAEJC,UAAA","ignoreList":[]}

package/dist/esm/Grid.mjs

@@ -0,0 +1,35 @@
+import { isWeb } from "@hanzogui/core";
+import { XStack } from "@hanzogui/stacks";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+function Grid({
+  children,
+  columns,
+  itemMinWidth = 200,
+  gap
+}) {
+  if (isWeb) return /* @__PURE__ */jsx("div", {
+    style: {
+      gap,
+      display: "grid",
+      justifyContent: "stretch",
+      gridTemplateColumns: `repeat( auto-fit, minmax(${itemMinWidth}px, 1fr) )`
+    },
+    children
+  });
+  const childrenList = React.Children.toArray(children);
+  return /* @__PURE__ */jsx(XStack, {
+    items: "center",
+    justify: "center",
+    flexWrap: "wrap",
+    children: childrenList.map((child, i) => child ? /* @__PURE__ */jsx(XStack, {
+      flex: 1,
+      minW: itemMinWidth,
+      mr: gap,
+      mb: gap,
+      children: child
+    }, i) : null)
+  });
+}
+export { Grid };
+//# sourceMappingURL=Grid.mjs.map

package/dist/esm/Grid.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["isWeb","XStack","React","jsx","Grid","children","columns","itemMinWidth","gap","style","display","justifyContent","gridTemplateColumns","childrenList","Children","toArray","items","justify","flexWrap","map","child","i","flex","minW","mr","mb"],"sources":["../../src/Grid.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,KAAA,QAAa;AACtB,SAASC,MAAA,QAAc;AACvB,OAAOC,KAAA,MAAW;AAYZ,SAAAC,GAAA;AAHC,SAASC,KAAK;EAAEC,QAAA;EAAUC,OAAA;EAASC,YAAA,GAAe;EAAKC;AAAI,GAAc;EAC9E,IAAIR,KAAA,EACF,OACE,eAAAG,GAAA,CAAC;IACCM,KAAA,EAAO;MACLD,GAAA;MACAE,OAAA,EAAS;MACTC,cAAA,EAAgB;MAChBC,mBAAA,EAAqB,4BAA4BL,YAAY;IAC/D;IAECF;EAAA,CACH;EAIJ,MAAMQ,YAAA,GAAeX,KAAA,CAAMY,QAAA,CAASC,OAAA,CAAQV,QAAQ;EAEpD,OACE,eAAAF,GAAA,CAACF,MAAA;IAAOe,KAAA,EAAM;IAASC,OAAA,EAAQ;IAASC,QAAA,EAAS;IAC9Cb,QAAA,EAAAQ,YAAA,CAAaM,GAAA,CAAI,CAACC,KAAA,EAAOC,CAAA,KACnBD,KAAA,GAMH,eAAAjB,GAAA,CAACF,MAAA;MAAeqB,IAAA,EAAM;MAAGC,IAAA,EAAMhB,YAAA;MAAciB,EAAA,EAAIhB,GAAA;MAAKiB,EAAA,EAAIjB,GAAA;MACvDH,QAAA,EAAAe;IAAA,GADUC,CAEb,IAPO,IASV;EAAA,CACH;AAEJ","ignoreList":[]}

package/dist/esm/Grid.native.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isWeb } from "@hanzogui/core";
+import { XStack } from "@hanzogui/stacks";
+import React from "react";
+function Grid(param) {
+  var {
+    children,
+    columns,
+    itemMinWidth = 200,
+    gap
+  } = param;
+  if (isWeb) return /* @__PURE__ */_jsx("div", {
+    style: {
+      gap,
+      display: "grid",
+      justifyContent: "stretch",
+      gridTemplateColumns: `repeat( auto-fit, minmax(${itemMinWidth}px, 1fr) )`
+    },
+    children
+  });
+  var childrenList = React.Children.toArray(children);
+  return /* @__PURE__ */_jsx(XStack, {
+    items: "center",
+    justify: "center",
+    flexWrap: "wrap",
+    children: childrenList.map(function (child, i) {
+      return child ? /* @__PURE__ */_jsx(XStack, {
+        flex: 1,
+        minW: itemMinWidth,
+        mr: gap,
+        mb: gap,
+        children: child
+      }, i) : null;
+    })
+  });
+}
+export { Grid };
+//# sourceMappingURL=Grid.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","isWeb","XStack","React","Grid","param","children","columns","itemMinWidth","gap","style","display","justifyContent","gridTemplateColumns","childrenList","Children","toArray","items","justify","flexWrap"],"sources":["../../src/Grid.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,QAAa;AACtB,SAASC,KAAA,wBAAc;AACvB,SAAOC,MAAA,QAAW;AAYZ,OAAAC,KAAA;AAHC,SAASC,KAAKC,KAAE;EACrB,IAAI;IAAAC,QAAA;IAAAC,OAAA;IAAAC,YAAA;IAAAC;EAAA,IAAAJ,KAAA;EACF,IAAAJ,KACE,SAAC,eAAAD,IAAA;IAAAU,KAAA;MACCD,GAAA;MAAOE,OACL;MAAAC,cACS;MAAAC,mBACO,8BAAAL,YAAA;IAAA;IAC6CF;EAC/D;EAEC,IAAAQ,YAAA,GAAAX,KAAA,CAAAY,QAAA,CAAAC,OAAA,CAAAV,QAAA;EAAA,OACH,eAAAN,IAAA,CAAAE,MAAA;IAIJe,KAAM;IAENC,OACE;IAeJC,QAAA","ignoreList":[]}

package/dist/esm/GroupDemo.mjs

@@ -0,0 +1,69 @@
+import { Activity, Airplay } from "@hanzogui/lucide-icons-2";
+import { Button, Group, ListItem, Separator, XGroup, YGroup, YStack } from "@hanzo/gui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function GroupDemo() {
+  return /* @__PURE__ */jsxs(YStack, {
+    p: "$3",
+    gap: "$2",
+    items: "center",
+    children: [/* @__PURE__ */jsxs(Group, {
+      orientation: "horizontal",
+      children: [/* @__PURE__ */jsx(Group.Item, {
+        children: /* @__PURE__ */jsx(Button, {
+          children: "First"
+        })
+      }), /* @__PURE__ */jsx(Group.Item, {
+        children: /* @__PURE__ */jsx(Button, {
+          children: "Second"
+        })
+      }), /* @__PURE__ */jsx(Group.Item, {
+        children: /* @__PURE__ */jsx(Button, {
+          children: "Third"
+        })
+      })]
+    }), /* @__PURE__ */jsxs(XGroup, {
+      children: [/* @__PURE__ */jsx(XGroup.Item, {
+        children: /* @__PURE__ */jsx(Button, {
+          size: "$3",
+          $gtSm: {
+            size: "$5"
+          },
+          icon: Activity,
+          children: "First"
+        })
+      }), /* @__PURE__ */jsx(XGroup.Item, {
+        children: /* @__PURE__ */jsx(Button, {
+          size: "$3",
+          $gtSm: {
+            size: "$5"
+          },
+          icon: Airplay,
+          children: "Second"
+        })
+      })]
+    }), /* @__PURE__ */jsxs(YGroup, {
+      children: [/* @__PURE__ */jsx(YGroup.Item, {
+        children: /* @__PURE__ */jsx(ListItem, {
+          borderRadius: "$6",
+          theme: "surface1",
+          title: "First"
+        })
+      }), /* @__PURE__ */jsx(Separator, {}), /* @__PURE__ */jsx(YGroup.Item, {
+        children: /* @__PURE__ */jsx(ListItem, {
+          borderRadius: "$6",
+          theme: "surface1",
+          title: "Second",
+          subTitle: "Second subtitle"
+        })
+      }), /* @__PURE__ */jsx(Separator, {}), /* @__PURE__ */jsx(YGroup.Item, {
+        children: /* @__PURE__ */jsx(ListItem, {
+          borderRadius: "$6",
+          theme: "surface1",
+          children: "Third"
+        })
+      })]
+    })]
+  });
+}
+export { GroupDemo };
+//# sourceMappingURL=GroupDemo.mjs.map

package/dist/esm/GroupDemo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["Activity","Airplay","Button","Group","ListItem","Separator","XGroup","YGroup","YStack","jsx","jsxs","GroupDemo","p","gap","items","children","orientation","Item","size","$gtSm","icon","borderRadius","theme","title","subTitle"],"sources":["../../src/GroupDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,QAAA,EAAUC,OAAA,QAAe;AAClC,SAASC,MAAA,EAAQC,KAAA,EAAOC,QAAA,EAAUC,SAAA,EAAWC,MAAA,EAAQC,MAAA,EAAQC,MAAA,QAAc;AAKrE,SAEIC,GAAA,EAFJC,IAAA;AAHC,SAASC,UAAA,EAAY;EAC1B,OACE,eAAAD,IAAA,CAACF,MAAA;IAAOI,CAAA,EAAE;IAAKC,GAAA,EAAI;IAAKC,KAAA,EAAM;IAC5BC,QAAA,kBAAAL,IAAA,CAACP,KAAA;MAAMa,WAAA,EAAY;MACjBD,QAAA,kBAAAN,GAAA,CAACN,KAAA,CAAMc,IAAA,EAAN;QACCF,QAAA,iBAAAN,GAAA,CAACP,MAAA;UAAOa,QAAA;QAAA,CAAK;MAAA,CACf,GACA,eAAAN,GAAA,CAACN,KAAA,CAAMc,IAAA,EAAN;QACCF,QAAA,iBAAAN,GAAA,CAACP,MAAA;UAAOa,QAAA;QAAA,CAAM;MAAA,CAChB,GACA,eAAAN,GAAA,CAACN,KAAA,CAAMc,IAAA,EAAN;QACCF,QAAA,iBAAAN,GAAA,CAACP,MAAA;UAAOa,QAAA;QAAA,CAAK;MAAA,CACf;IAAA,CACF,GAGA,eAAAL,IAAA,CAACJ,MAAA;MACCS,QAAA,kBAAAN,GAAA,CAACH,MAAA,CAAOW,IAAA,EAAP;QACCF,QAAA,iBAAAN,GAAA,CAACP,MAAA;UAAOgB,IAAA,EAAK;UAAKC,KAAA,EAAO;YAAED,IAAA,EAAM;UAAK;UAAGE,IAAA,EAAMpB,QAAA;UAAUe,QAAA;QAAA,CAEzD;MAAA,CACF,GACA,eAAAN,GAAA,CAACH,MAAA,CAAOW,IAAA,EAAP;QACCF,QAAA,iBAAAN,GAAA,CAACP,MAAA;UAAOgB,IAAA,EAAK;UAAKC,KAAA,EAAO;YAAED,IAAA,EAAM;UAAK;UAAGE,IAAA,EAAMnB,OAAA;UAASc,QAAA;QAAA,CAExD;MAAA,CACF;IAAA,CACF,GAGA,eAAAL,IAAA,CAACH,MAAA;MACCQ,QAAA,kBAAAN,GAAA,CAACF,MAAA,CAAOU,IAAA,EAAP;QACCF,QAAA,iBAAAN,GAAA,CAACL,QAAA;UAASiB,YAAA,EAAa;UAAKC,KAAA,EAAM;UAAWC,KAAA,EAAM;QAAA,CAAQ;MAAA,CAC7D,GACA,eAAAd,GAAA,CAACJ,SAAA,IAAU,GACX,eAAAI,GAAA,CAACF,MAAA,CAAOU,IAAA,EAAP;QACCF,QAAA,iBAAAN,GAAA,CAACL,QAAA;UACCiB,YAAA,EAAa;UACbC,KAAA,EAAM;UACNC,KAAA,EAAM;UACNC,QAAA,EAAS;QAAA,CACX;MAAA,CACF,GACA,eAAAf,GAAA,CAACJ,SAAA,IAAU,GACX,eAAAI,GAAA,CAACF,MAAA,CAAOU,IAAA,EAAP;QACCF,QAAA,iBAAAN,GAAA,CAACL,QAAA;UAASiB,YAAA,EAAa;UAAKC,KAAA,EAAM;UAAWP,QAAA;QAAA,CAE7C;MAAA,CACF;IAAA,CACF;EAAA,CACF;AAEJ","ignoreList":[]}

package/dist/esm/GroupDemo.native.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Activity, Airplay } from "@hanzogui/lucide-icons-2";
+import { Button, Group, ListItem, Separator, XGroup, YGroup, YStack } from "@hanzo/gui";
+function GroupDemo() {
+  return /* @__PURE__ */_jsxs(YStack, {
+    p: "$3",
+    gap: "$2",
+    items: "center",
+    children: [/* @__PURE__ */_jsxs(Group, {
+      orientation: "horizontal",
+      children: [/* @__PURE__ */_jsx(Group.Item, {
+        children: /* @__PURE__ */_jsx(Button, {
+          children: "First"
+        })
+      }), /* @__PURE__ */_jsx(Group.Item, {
+        children: /* @__PURE__ */_jsx(Button, {
+          children: "Second"
+        })
+      }), /* @__PURE__ */_jsx(Group.Item, {
+        children: /* @__PURE__ */_jsx(Button, {
+          children: "Third"
+        })
+      })]
+    }), /* responsive size - children control their own size/radius */
+    /* @__PURE__ */_jsxs(XGroup, {
+      children: [/* @__PURE__ */_jsx(XGroup.Item, {
+        children: /* @__PURE__ */_jsx(Button, {
+          size: "$3",
+          $gtSm: {
+            size: "$5"
+          },
+          icon: Activity,
+          children: "First"
+        })
+      }), /* @__PURE__ */_jsx(XGroup.Item, {
+        children: /* @__PURE__ */_jsx(Button, {
+          size: "$3",
+          $gtSm: {
+            size: "$5"
+          },
+          icon: Airplay,
+          children: "Second"
+        })
+      })]
+    }), /* with separators - add them between items */
+    /* @__PURE__ */_jsxs(YGroup, {
+      children: [/* @__PURE__ */_jsx(YGroup.Item, {
+        children: /* @__PURE__ */_jsx(ListItem, {
+          borderRadius: "$6",
+          theme: "surface1",
+          title: "First"
+        })
+      }), /* @__PURE__ */_jsx(Separator, {}), /* @__PURE__ */_jsx(YGroup.Item, {
+        children: /* @__PURE__ */_jsx(ListItem, {
+          borderRadius: "$6",
+          theme: "surface1",
+          title: "Second",
+          subTitle: "Second subtitle"
+        })
+      }), /* @__PURE__ */_jsx(Separator, {}), /* @__PURE__ */_jsx(YGroup.Item, {
+        children: /* @__PURE__ */_jsx(ListItem, {
+          borderRadius: "$6",
+          theme: "surface1",
+          children: "Third"
+        })
+      })]
+    })]
+  });
+}
+export { GroupDemo };
+//# sourceMappingURL=GroupDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Activity","Airplay","Button","Group","ListItem","Separator","XGroup","YGroup","YStack","GroupDemo","p","gap","items","children","orientation","Item"],"sources":["../../src/GroupDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAU,EAAAC,IAAA,IAAAC,KAAe;AAClC,SAASC,QAAQ,EAAAC,OAAO,QAAU,0BAAmB;AAK/C,SAEIC,MAFJ,EAAAC,KAAA,EAAAC,QAAA,EAAAC,SAAA,EAAAC,MAAA,EAAAC,MAAA,EAAAC,MAAA;AAHC,SAASC,UAAA,EAAY;EAC1B,OACE,eAAAV,KAAC,CAAAS,MAAA;IACCE,CAAA;IACEC,GAAA;IAEAC,KACA;IAEAC,QACA,GAEA,eACFd,KAAA,CAAAI,KAAA;MAGAW,WAAA,cAAC;MACCD,QAAA,GAKA,eAAChB,IAAA,CAAAM,KAAO,CAAAY,IACN;QAIJF,QAAA,iBAAAhB,IAAA,CAAAK,MAAA;UAGAW,QAAA;QACE;MAGA,IACA,eAAChB,IAAA,CAAAM,KAAO,CAAAY,IACN;QAACF,QAAA,iBAAAhB,IAAA,CAAAK,MAAA;UAAAW,QAAA;QACC;MACA,IACA,eAAMhB,IAAA,CAAAM,KAAA,CAAAY,IAAA;QACNF,QAAS,iBAAAhB,IAAA,CAAAK,MAAA;UAAAW,QAAA;QAEb;MACA;IAKA,CACF,GACF;IAEJ,eAAAd,KAAA,CAAAO,MAAA","ignoreList":[]}

package/dist/esm/HeadingsDemo.mjs

@@ -0,0 +1,22 @@
+import { H1, H2, H3, H4, H5, H6, YStack } from "@hanzo/gui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function HeadingsDemo() {
+  return /* @__PURE__ */jsxs(YStack, {
+    self: "center",
+    children: [/* @__PURE__ */jsx(H1, {
+      children: "Heading 1"
+    }), /* @__PURE__ */jsx(H2, {
+      children: "Heading 2"
+    }), /* @__PURE__ */jsx(H3, {
+      children: "Heading 3"
+    }), /* @__PURE__ */jsx(H4, {
+      children: "Heading 4"
+    }), /* @__PURE__ */jsx(H5, {
+      children: "Heading 5"
+    }), /* @__PURE__ */jsx(H6, {
+      children: "Heading 6"
+    })]
+  });
+}
+export { HeadingsDemo };
+//# sourceMappingURL=HeadingsDemo.mjs.map

package/dist/esm/HeadingsDemo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["H1","H2","H3","H4","H5","H6","YStack","jsx","jsxs","HeadingsDemo","self","children"],"sources":["../../src/HeadingsDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,EAAA,EAAIC,EAAA,EAAIC,EAAA,EAAIC,EAAA,EAAIC,EAAA,EAAIC,EAAA,EAAIC,MAAA,QAAc;AAI3C,SACEC,GAAA,EADFC,IAAA;AAFG,SAASC,aAAA,EAAe;EAC7B,OACE,eAAAD,IAAA,CAACF,MAAA;IAAOI,IAAA,EAAK;IACXC,QAAA,kBAAAJ,GAAA,CAACP,EAAA;MAAGW,QAAA;IAAA,CAAS,GACb,eAAAJ,GAAA,CAACN,EAAA;MAAGU,QAAA;IAAA,CAAS,GACb,eAAAJ,GAAA,CAACL,EAAA;MAAGS,QAAA;IAAA,CAAS,GACb,eAAAJ,GAAA,CAACJ,EAAA;MAAGQ,QAAA;IAAA,CAAS,GACb,eAAAJ,GAAA,CAACH,EAAA;MAAGO,QAAA;IAAA,CAAS,GACb,eAAAJ,GAAA,CAACF,EAAA;MAAGM,QAAA;IAAA,CAAS;EAAA,CACf;AAEJ","ignoreList":[]}

package/dist/esm/HeadingsDemo.native.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { H1, H2, H3, H4, H5, H6, YStack } from "@hanzo/gui";
+function HeadingsDemo() {
+  return /* @__PURE__ */_jsxs(YStack, {
+    self: "center",
+    children: [/* @__PURE__ */_jsx(H1, {
+      children: "Heading 1"
+    }), /* @__PURE__ */_jsx(H2, {
+      children: "Heading 2"
+    }), /* @__PURE__ */_jsx(H3, {
+      children: "Heading 3"
+    }), /* @__PURE__ */_jsx(H4, {
+      children: "Heading 4"
+    }), /* @__PURE__ */_jsx(H5, {
+      children: "Heading 5"
+    }), /* @__PURE__ */_jsx(H6, {
+      children: "Heading 6"
+    })]
+  });
+}
+export { HeadingsDemo };
+//# sourceMappingURL=HeadingsDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","H1","H2","H3","H4","H5","H6","YStack","HeadingsDemo","self","children"],"sources":["../../src/HeadingsDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAIC,IAAI,EAAIC,IAAI,IAAIC,KAAI,2BAAc;AAI3C,SACEC,EAAA,EAAAC,EADF,EAAAC,EAAA,EAAAC,EAAA,EAAAC,EAAA,EAAAC,EAAA,EAAAC,MAAA;AAFG,SAASC,aAAA,EAAe;EAC7B,OACE,eAAAR,KAAC,CAAAO,MAAA;IACCE,IAAA;IACAC,QAAA,GACA,eAAAZ,IAAC,CAAAG,EAAA,EAAG;MACJS,QAAA;IACA,IACA,eAAAZ,IAAC,CAAAI,EAAA,EAAG;MACNQ,QAAA;IAEJ,I","ignoreList":[]}

package/dist/esm/ImageDemo.mjs

@@ -0,0 +1,15 @@
+import { Image } from "@hanzogui/image";
+import { Fragment, jsx } from "react/jsx-runtime";
+function ImageDemo() {
+  return /* @__PURE__ */jsx(Fragment, {
+    children: /* @__PURE__ */jsx(Image, {
+      src: "https://picsum.photos/200/300",
+      width: 200,
+      height: 300,
+      onLoad: () => {},
+      onLayout: e => {}
+    })
+  });
+}
+export { ImageDemo };
+//# sourceMappingURL=ImageDemo.mjs.map

package/dist/esm/ImageDemo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["Image","Fragment","jsx","ImageDemo","children","src","width","height","onLoad","onLayout","e"],"sources":["../../src/ImageDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,KAAA,QAAa;AAIlB,SAAAC,QAAA,EACEC,GAAA,QADF;AAFG,SAASC,UAAA,EAAY;EAC1B,OACE,eAAAD,GAAA,CAAAD,QAAA;IACEG,QAAA,iBAAAF,GAAA,CAACF,KAAA;MACCK,GAAA,EAAI;MACJC,KAAA,EAAO;MACPC,MAAA,EAAQ;MACRC,MAAA,EAAQA,CAAA,KAAM,CAAC;MACfC,QAAA,EAAWC,CAAA,IAAM,CAAC;IAAA,CACpB;EAAA,CACF;AAEJ","ignoreList":[]}

package/dist/esm/ImageDemo.native.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Image } from "@hanzogui/image";
+function ImageDemo() {
+  return /* @__PURE__ */_jsx(_Fragment, {
+    children: /* @__PURE__ */_jsx(Image, {
+      src: "https://picsum.photos/200/300",
+      width: 200,
+      height: 300,
+      onLoad: function () {},
+      onLayout: function (e) {}
+    })
+  });
+}
+export { ImageDemo };
+//# sourceMappingURL=ImageDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","Fragment","_Fragment","Image","ImageDemo","children","src","width","height","onLoad","onLayout","e"],"sources":["../../src/ImageDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,EAAaC,QAAA,IAAAC,SAAA;AAIlB,SAAAC,KAAA,QACE,iBADF;AAFG,SAASC,UAAA,EAAY;EAC1B,OACE,eAAAJ,IAAA,CAAAE,SAAA,EACE;IAACG,QAAA,iBAAAL,IAAA,CAAAG,KAAA;MAAAG,GAAA;MACCC,KAAI;MACJC,MAAA,EAAO;MACPC,MAAA,EAAQ,SAAAA,CAAA,GACR;MAAeC,QAAA,WAAAA,CAAAC,CAAA,GACf;IAAiB;EAAC;AAAA;AAI1B,S","ignoreList":[]}

package/dist/esm/InputsDemo.mjs

@@ -0,0 +1,39 @@
+import { Button, Input, TextArea, XStack, YStack } from "@hanzo/gui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function InputsDemo() {
+  return /* @__PURE__ */jsxs(YStack, {
+    width: 200,
+    minH: 250,
+    overflow: "hidden",
+    gap: "$2",
+    m: "$3",
+    p: "$2",
+    children: [/* @__PURE__ */jsx(InputDemo, {
+      size: "$2"
+    }), /* @__PURE__ */jsx(InputDemo, {
+      size: "$3"
+    }), /* @__PURE__ */jsx(InputDemo, {
+      size: "$4"
+    }), /* @__PURE__ */jsx(TextArea, {
+      theme: "surface1",
+      placeholder: "Enter your details..."
+    })]
+  });
+}
+function InputDemo(props) {
+  return /* @__PURE__ */jsxs(XStack, {
+    items: "center",
+    gap: "$2",
+    children: [/* @__PURE__ */jsx(Input, {
+      theme: "surface1",
+      flex: 1,
+      size: props.size,
+      placeholder: `Size ${props.size}...`
+    }), /* @__PURE__ */jsx(Button, {
+      size: props.size,
+      children: "Go"
+    })]
+  });
+}
+export { InputsDemo };
+//# sourceMappingURL=InputsDemo.mjs.map

package/dist/esm/InputsDemo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["Button","Input","TextArea","XStack","YStack","jsx","jsxs","InputsDemo","width","minH","overflow","gap","m","p","children","InputDemo","size","theme","placeholder","props","items","flex"],"sources":["../../src/InputsDemo.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,MAAA,EAAQC,KAAA,EAAOC,QAAA,EAAUC,MAAA,EAAQC,MAAA,QAAc;AAIpD,SACEC,GAAA,EADFC,IAAA;AAFG,SAASC,WAAA,EAAa;EAC3B,OACE,eAAAD,IAAA,CAACF,MAAA;IAAOI,KAAA,EAAO;IAAKC,IAAA,EAAM;IAAKC,QAAA,EAAS;IAASC,GAAA,EAAI;IAAKC,CAAA,EAAE;IAAKC,CAAA,EAAE;IACjEC,QAAA,kBAAAT,GAAA,CAACU,SAAA;MAAUC,IAAA,EAAK;IAAA,CAAK,GACrB,eAAAX,GAAA,CAACU,SAAA;MAAUC,IAAA,EAAK;IAAA,CAAK,GACrB,eAAAX,GAAA,CAACU,SAAA;MAAUC,IAAA,EAAK;IAAA,CAAK,GACrB,eAAAX,GAAA,CAACH,QAAA;MAASe,KAAA,EAAM;MAAWC,WAAA,EAAY;IAAA,CAAwB;EAAA,CACjE;AAEJ;AAEA,SAASH,UAAUI,KAAA,EAA6B;EAC9C,OACE,eAAAb,IAAA,CAACH,MAAA;IAAOiB,KAAA,EAAM;IAAST,GAAA,EAAI;IACzBG,QAAA,kBAAAT,GAAA,CAACJ,KAAA;MACCgB,KAAA,EAAM;MACNI,IAAA,EAAM;MACNL,IAAA,EAAMG,KAAA,CAAMH,IAAA;MACZE,WAAA,EAAa,QAAQC,KAAA,CAAMH,IAAI;IAAA,CACjC,GACA,eAAAX,GAAA,CAACL,MAAA;MAAOgB,IAAA,EAAMG,KAAA,CAAMH,IAAA;MAAMF,QAAA;IAAA,CAAE;EAAA,CAC9B;AAEJ","ignoreList":[]}

package/dist/esm/InputsDemo.native.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Input, TextArea, XStack, YStack } from "@hanzo/gui";
+function InputsDemo() {
+  return /* @__PURE__ */_jsxs(YStack, {
+    width: 200,
+    minH: 250,
+    overflow: "hidden",
+    gap: "$2",
+    m: "$3",
+    p: "$2",
+    children: [/* @__PURE__ */_jsx(InputDemo, {
+      size: "$2"
+    }), /* @__PURE__ */_jsx(InputDemo, {
+      size: "$3"
+    }), /* @__PURE__ */_jsx(InputDemo, {
+      size: "$4"
+    }), /* @__PURE__ */_jsx(TextArea, {
+      theme: "surface1",
+      placeholder: "Enter your details..."
+    })]
+  });
+}
+function InputDemo(props) {
+  return /* @__PURE__ */_jsxs(XStack, {
+    items: "center",
+    gap: "$2",
+    children: [/* @__PURE__ */_jsx(Input, {
+      theme: "surface1",
+      flex: 1,
+      size: props.size,
+      placeholder: `Size ${props.size}...`
+    }), /* @__PURE__ */_jsx(Button, {
+      size: props.size,
+      children: "Go"
+    })]
+  });
+}
+export { InputsDemo };
+//# sourceMappingURL=InputsDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Button","Input","TextArea","XStack","YStack","InputsDemo","width","minH","overflow","gap","m","p","children","InputDemo","size","theme","placeholder"],"sources":["../../src/InputsDemo.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,GAAA,IAAAC,IAAQ,EAAAC,IAAO,IAAAC,KAAU,QAAQ,mBAAc;AAIpD,SACEC,MADF,EAAAC,KAAA,EAAAC,QAAA,EAAAC,MAAA,EAAAC,MAAA;AAFG,SAASC,WAAA,EAAa;EAC3B,OACE,eAAAN,KAAC,CAAAK,MAAA;IACCE,KAAA;IACAC,IAAA;IACAC,QAAA;IACAC,GAAA;IAA+DC,CACjE;IAEJC,CAAA;IAEAC,QAAS,GACP,eACEf,IAAA,CAAAgB,SAAC;MACCC,IAAA;IAAC,mBAAAjB,IAAA,CAAAgB,SAAA;MACCC,IAAA;IAAM,EACN,EAAM,eACMjB,IAAA,CAAAgB,SAAA;MACZC,IAAA;IAA+B,IACjC,eAAAjB,IAAA,CAAAK,QAAA;MACAa,KAAA,YAAC;MACHC,WAAA;IAEJ","ignoreList":[]}

package/dist/esm/LabelDemo.mjs

@@ -0,0 +1,42 @@
+import { Input, Label, Switch, XStack, YStack } from "@hanzo/gui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function LabelDemo() {
+  return /* @__PURE__ */jsxs(YStack, {
+    $maxMd: {
+      width: "100%"
+    },
+    minW: 300,
+    gap: "$4",
+    children: [/* @__PURE__ */jsxs(XStack, {
+      items: "center",
+      gap: "$4",
+      children: [/* @__PURE__ */jsx(Label, {
+        width: 90,
+        htmlFor: "name",
+        children: "Name"
+      }), /* @__PURE__ */jsx(Input, {
+        flex: 1,
+        id: "name",
+        defaultValue: "Nate Wienert"
+      })]
+    }), /* @__PURE__ */jsxs(XStack, {
+      items: "center",
+      gap: "$4",
+      children: [/* @__PURE__ */jsx(Label, {
+        width: 90,
+        htmlFor: "notify",
+        children: "Notifications"
+      }), /* @__PURE__ */jsx(Switch, {
+        activeStyle: {
+          backgroundColor: "$color8"
+        },
+        id: "notify",
+        children: /* @__PURE__ */jsx(Switch.Thumb, {
+          transition: "quickest"
+        })
+      })]
+    })]
+  });
+}
+export { LabelDemo };
+//# sourceMappingURL=LabelDemo.mjs.map

package/dist/esm/LabelDemo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["Input","Label","Switch","XStack","YStack","jsx","jsxs","LabelDemo","$maxMd","width","minW","gap","children","items","htmlFor","flex","id","defaultValue","activeStyle","backgroundColor","Thumb","transition"],"sources":["../../src/LabelDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,KAAA,EAAOC,KAAA,EAAOC,MAAA,EAAQC,MAAA,EAAQC,MAAA,QAAc;AAK/C,SACEC,GAAA,EADFC,IAAA;AAHC,SAASC,UAAA,EAAY;EAC1B,OACE,eAAAD,IAAA,CAACF,MAAA;IAAOI,MAAA,EAAQ;MAAEC,KAAA,EAAO;IAAO;IAAGC,IAAA,EAAM;IAAKC,GAAA,EAAI;IAChDC,QAAA,kBAAAN,IAAA,CAACH,MAAA;MAAOU,KAAA,EAAM;MAASF,GAAA,EAAI;MACzBC,QAAA,kBAAAP,GAAA,CAACJ,KAAA;QAAMQ,KAAA,EAAO;QAAIK,OAAA,EAAQ;QAAOF,QAAA;MAAA,CAEjC,GACA,eAAAP,GAAA,CAACL,KAAA;QAAMe,IAAA,EAAM;QAAGC,EAAA,EAAG;QAAOC,YAAA,EAAa;MAAA,CAAe;IAAA,CACxD,GAEA,eAAAX,IAAA,CAACH,MAAA;MAAOU,KAAA,EAAM;MAASF,GAAA,EAAI;MACzBC,QAAA,kBAAAP,GAAA,CAACJ,KAAA;QAAMQ,KAAA,EAAO;QAAIK,OAAA,EAAQ;QAASF,QAAA;MAAA,CAEnC,GACA,eAAAP,GAAA,CAACH,MAAA;QACCgB,WAAA,EAAa;UACXC,eAAA,EAAiB;QACnB;QACAH,EAAA,EAAG;QAEHJ,QAAA,iBAAAP,GAAA,CAACH,MAAA,CAAOkB,KAAA,EAAP;UAAaC,UAAA,EAAW;QAAA,CAAW;MAAA,CACtC;IAAA,CACF;EAAA,CACF;AAEJ","ignoreList":[]}

package/dist/esm/LabelDemo.native.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input, Label, Switch, XStack, YStack } from "@hanzo/gui";
+function LabelDemo() {
+  return /* @__PURE__ */_jsxs(YStack, {
+    $maxMd: {
+      width: "100%"
+    },
+    minW: 300,
+    gap: "$4",
+    children: [/* @__PURE__ */_jsxs(XStack, {
+      items: "center",
+      gap: "$4",
+      children: [/* @__PURE__ */_jsx(Label, {
+        width: 90,
+        htmlFor: "name",
+        children: "Name"
+      }), /* @__PURE__ */_jsx(Input, {
+        flex: 1,
+        id: "name",
+        defaultValue: "Nate Wienert"
+      })]
+    }), /* @__PURE__ */_jsxs(XStack, {
+      items: "center",
+      gap: "$4",
+      children: [/* @__PURE__ */_jsx(Label, {
+        width: 90,
+        htmlFor: "notify",
+        children: "Notifications"
+      }), /* @__PURE__ */_jsx(Switch, {
+        activeStyle: {
+          backgroundColor: "$color8"
+        },
+        id: "notify",
+        children: /* @__PURE__ */_jsx(Switch.Thumb, {
+          transition: "quickest"
+        })
+      })]
+    })]
+  });
+}
+export { LabelDemo };
+//# sourceMappingURL=LabelDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Input","Label","Switch","XStack","YStack","LabelDemo","$maxMd","width","minW","gap","children","items","htmlFor","flex","id","defaultValue"],"sources":["../../src/LabelDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAOC,IAAA,EAAAC,IAAO,IAAAC,KAAQ,QAAQ,mBAAc;AAK/C,SACEC,KADF,EAAAC,KAAA,EAAAC,MAAA,EAAAC,MAAA,EAAAC,MAAA;AAHC,SAASC,UAAA,EAAY;EAC1B,OACE,eAAAN,KAAC,CAAAK,MAAA;IACCE,MAAA;MACEC,KAAA;IAEA;IACsDC,IACxD;IAEAC,GAAA;IACEC,QAAA,GAGA,eAAAX,KAAA,CAAAI,MAAA;MAACQ,KAAA;MAAAF,GAAA;MAAAC,QACC,GAAa,eACXb,IAAiB,CAAAI,KAAA;QACnBM,KAAA;QACAK,OAAG;QAEHF,QAAA;MAAoC,IACtC,eAAAb,IAAA,CAAAG,KAAA;QACFa,IAAA;QACFC,EAAA;QAEJC,YAAA","ignoreList":[]}

package/dist/esm/LinearGradientDemo.mjs

@@ -0,0 +1,25 @@
+import { XStack } from "@hanzo/gui";
+import { LinearGradient } from "@hanzogui/linear-gradient";
+import { jsx, jsxs } from "react/jsx-runtime";
+function LinearGradientDemo() {
+  return /* @__PURE__ */jsxs(XStack, {
+    gap: "$4",
+    children: [/* @__PURE__ */jsx(LinearGradient, {
+      width: "$6",
+      height: "$6",
+      rounded: "$4",
+      colors: ["$red10", "$yellow10"],
+      start: [0, 1],
+      end: [0, 0]
+    }), /* @__PURE__ */jsx(LinearGradient, {
+      width: "$6",
+      height: "$6",
+      rounded: "$4",
+      colors: ["$background", "$color"],
+      start: [1, 1],
+      end: [0, 0]
+    })]
+  });
+}
+export { LinearGradientDemo };
+//# sourceMappingURL=LinearGradientDemo.mjs.map

package/dist/esm/LinearGradientDemo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["XStack","LinearGradient","jsx","jsxs","LinearGradientDemo","gap","children","width","height","rounded","colors","start","end"],"sources":["../../src/LinearGradientDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,MAAA,QAAc;AACvB,SAASC,cAAA,QAAsB;AAI3B,SAEEC,GAAA,EAFFC,IAAA;AAFG,SAASC,mBAAA,EAAqB;EACnC,OACE,eAAAD,IAAA,CAACH,MAAA;IAAOK,GAAA,EAAI;IAEVC,QAAA,kBAAAJ,GAAA,CAACD,cAAA;MACCM,KAAA,EAAM;MACNC,MAAA,EAAO;MACPC,OAAA,EAAQ;MACRC,MAAA,EAAQ,CAAC,UAAU,WAAW;MAC9BC,KAAA,EAAO,CAAC,GAAG,CAAC;MACZC,GAAA,EAAK,CAAC,GAAG,CAAC;IAAA,CACZ,GAGA,eAAAV,GAAA,CAACD,cAAA;MACCM,KAAA,EAAM;MACNC,MAAA,EAAO;MACPC,OAAA,EAAQ;MACRC,MAAA,EAAQ,CAAC,eAAe,QAAQ;MAChCC,KAAA,EAAO,CAAC,GAAG,CAAC;MACZC,GAAA,EAAK,CAAC,GAAG,CAAC;IAAA,CACZ;EAAA,CACF;AAEJ","ignoreList":[]}

package/dist/esm/LinearGradientDemo.native.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XStack } from "@hanzo/gui";
+import { LinearGradient } from "@hanzogui/linear-gradient";
+function LinearGradientDemo() {
+  return /* @__PURE__ */_jsxs(XStack, {
+    gap: "$4",
+    children: [/* tokens */
+    /* @__PURE__ */_jsx(LinearGradient, {
+      width: "$6",
+      height: "$6",
+      rounded: "$4",
+      colors: ["$red10", "$yellow10"],
+      start: [0, 1],
+      end: [0, 0]
+    }), /* theme values */
+    /* @__PURE__ */_jsx(LinearGradient, {
+      width: "$6",
+      height: "$6",
+      rounded: "$4",
+      colors: ["$background", "$color"],
+      start: [1, 1],
+      end: [0, 0]
+    })]
+  });
+}
+export { LinearGradientDemo };
+//# sourceMappingURL=LinearGradientDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","XStack","LinearGradient","LinearGradientDemo","gap","children","width","height","rounded","colors","start","end"],"sources":["../../src/LinearGradientDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,EAAAC,IAAc,IAAAC,KAAA;AACvB,SAASC,MAAA,oBAAsB;AAI3B,SAEEC,cAFF;AAFG,SAASC,mBAAA,EAAqB;EACnC,OACE,eAAAH,KAAC,CAAAC,MAAA;IAECG,GAAA;IAAAC,QAAC;IAAA,eACOP,IAAA,CAAAI,cAAA;MACNI,KAAA,MAAO;MACPC,MAAA,MAAQ;MACRC,OAAA,EAAS;MACTC,MAAA,EAAQ,CACR,QAAU,cACZ;MAGAC,KAAA,GAAC,KACC;MACAC,GAAA,GACA,GACA;IACY,EACZ,EAAU;IACZ,eAAAb,IAAA,CAAAI,cAAA;MACFI,KAAA;MAEJC,MAAA","ignoreList":[]}