@hanzogui/demos 2.0.0

package/dist/esm/AvatarDemo.mjs

@@ -0,0 +1,30 @@
+import { Avatar, XStack } from "@hanzo/gui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AvatarDemo() {
+  return /* @__PURE__ */jsxs(XStack, {
+    items: "center",
+    gap: "$6",
+    children: [/* @__PURE__ */jsxs(Avatar, {
+      circular: !0,
+      size: "$10",
+      children: [/* @__PURE__ */jsx(Avatar.Image, {
+        "aria-label": "Cam",
+        src: "https://images.unsplash.com/photo-1548142813-c348350df52b?&w=150&h=150&dpr=2&q=80"
+      }), /* @__PURE__ */jsx(Avatar.Fallback, {
+        bg: "$blue10"
+      })]
+    }), /* @__PURE__ */jsxs(Avatar, {
+      circular: !0,
+      size: "$8",
+      children: [/* @__PURE__ */jsx(Avatar.Image, {
+        "aria-label": "Nate Wienert",
+        src: "https://images.unsplash.com/photo-1531384441138-2736e62e0919?&w=100&h=100&dpr=2&q=80"
+      }), /* @__PURE__ */jsx(Avatar.Fallback, {
+        delayMs: 600,
+        bg: "$blue10"
+      })]
+    })]
+  });
+}
+export { AvatarDemo };
+//# sourceMappingURL=AvatarDemo.mjs.map

package/dist/esm/AvatarDemo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["Avatar","XStack","jsx","jsxs","AvatarDemo","items","gap","children","circular","size","Image","src","Fallback","bg","delayMs"],"sources":["../../src/AvatarDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,MAAA,EAAQC,MAAA,QAAc;AAKzB,SACEC,GAAA,EADFC,IAAA;AAHC,SAASC,WAAA,EAAa;EAC3B,OACE,eAAAD,IAAA,CAACF,MAAA;IAAOI,KAAA,EAAM;IAASC,GAAA,EAAI;IACzBC,QAAA,kBAAAJ,IAAA,CAACH,MAAA;MAAOQ,QAAA,EAAQ;MAACC,IAAA,EAAK;MACpBF,QAAA,kBAAAL,GAAA,CAACF,MAAA,CAAOU,KAAA,EAAP;QACC,cAAW;QACXC,GAAA,EAAI;MAAA,CACN,GACA,eAAAT,GAAA,CAACF,MAAA,CAAOY,QAAA,EAAP;QAAgBC,EAAA,EAAG;MAAA,CAAU;IAAA,CAChC,GAEA,eAAAV,IAAA,CAACH,MAAA;MAAOQ,QAAA,EAAQ;MAACC,IAAA,EAAK;MACpBF,QAAA,kBAAAL,GAAA,CAACF,MAAA,CAAOU,KAAA,EAAP;QACC,cAAW;QACXC,GAAA,EAAI;MAAA,CACN,GACA,eAAAT,GAAA,CAACF,MAAA,CAAOY,QAAA,EAAP;QAAgBE,OAAA,EAAS;QAAKD,EAAA,EAAG;MAAA,CAAU;IAAA,CAC9C;EAAA,CACF;AAEJ","ignoreList":[]}

package/dist/esm/AvatarDemo.native.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, XStack } from "@hanzo/gui";
+function AvatarDemo() {
+  return /* @__PURE__ */_jsxs(XStack, {
+    items: "center",
+    gap: "$6",
+    children: [/* @__PURE__ */_jsxs(Avatar, {
+      circular: !0,
+      size: "$10",
+      children: [/* @__PURE__ */_jsx(Avatar.Image, {
+        "aria-label": "Cam",
+        src: "https://images.unsplash.com/photo-1548142813-c348350df52b?&w=150&h=150&dpr=2&q=80"
+      }), /* @__PURE__ */_jsx(Avatar.Fallback, {
+        bg: "$blue10"
+      })]
+    }), /* @__PURE__ */_jsxs(Avatar, {
+      circular: !0,
+      size: "$8",
+      children: [/* @__PURE__ */_jsx(Avatar.Image, {
+        "aria-label": "Nate Wienert",
+        src: "https://images.unsplash.com/photo-1531384441138-2736e62e0919?&w=100&h=100&dpr=2&q=80"
+      }), /* @__PURE__ */_jsx(Avatar.Fallback, {
+        delayMs: 600,
+        bg: "$blue10"
+      })]
+    })]
+  });
+}
+export { AvatarDemo };
+//# sourceMappingURL=AvatarDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Avatar","XStack","AvatarDemo","items","gap","children","circular","size","Image","src","Fallback","bg"],"sources":["../../src/AvatarDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAQ,EAAAC,IAAA,IAAAC,KAAc;AAKzB,SACEC,MADF,EAAAC,MAAA;AAHC,SAASC,WAAA,EAAa;EAC3B,OACE,eAAAH,KAAC,CAAAE,MAAA;IACCE,KAAA;IACEC,GAAA;IAAAC,QAAC,GAAO,eAAPN,KAAA,CAAAC,MAAA;MAAAM,QACC;MAAWC,IACX,OAAI;MAAAF,QAAA,GACN,eAAAR,IAAA,CAAAG,MAAA,CAAAQ,KAAA;QACA,cAAC;QACHC,GAAA;MAEA,IACE,eAAAZ,IAAA,CAAAG,MAAA,CAAAU,QAAA;QAACC,EAAA,EAAO;MAAP;IACY,IACP,eAAAZ,KAAA,CAAAC,MAAA;MACNM,QAAA;MACAC,IAAA;MACFF,QAAA,GACF,eAAAR,IAAA,CAAAG,MAAA,CAAAQ,KAAA;QAEJ","ignoreList":[]}

package/dist/esm/BoxShadowTokenDemo.mjs

@@ -0,0 +1,34 @@
+import { styled, View, Text, YStack } from "@hanzo/gui";
+import { jsx, jsxs } from "react/jsx-runtime";
+const StyledShadowBox = styled(View, {
+  width: 100,
+  height: 100,
+  backgroundColor: "$color5",
+  borderRadius: "$4",
+  boxShadow: "0px 2px 8px $shadowColor"
+});
+function BoxShadowTokenDemo() {
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    items: "center",
+    p: "$4",
+    children: [/* @__PURE__ */jsx(Text, {
+      testID: "box-shadow-token-title",
+      children: "BoxShadow Token Test"
+    }), /* @__PURE__ */jsx(StyledShadowBox, {
+      testID: "box-shadow-styled"
+    }), /* @__PURE__ */jsx(View, {
+      width: 100,
+      height: 100,
+      backgroundColor: "$color5",
+      borderRadius: "$4",
+      boxShadow: "0px 2px 8px $shadowColor",
+      testID: "box-shadow-prop"
+    }), /* @__PURE__ */jsx(Text, {
+      testID: "box-shadow-token-ok",
+      children: "OK"
+    })]
+  });
+}
+export { BoxShadowTokenDemo };
+//# sourceMappingURL=BoxShadowTokenDemo.mjs.map

package/dist/esm/BoxShadowTokenDemo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["styled","View","Text","YStack","jsx","jsxs","StyledShadowBox","width","height","backgroundColor","borderRadius","boxShadow","BoxShadowTokenDemo","gap","items","p","children","testID"],"sources":["../../src/BoxShadowTokenDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,MAAA,EAAQC,IAAA,EAAMC,IAAA,EAAMC,MAAA,QAAc;AAevC,SACEC,GAAA,EADFC,IAAA;AAVJ,MAAMC,eAAA,GAAkBN,MAAA,CAAOC,IAAA,EAAM;EACnCM,KAAA,EAAO;EACPC,MAAA,EAAQ;EACRC,eAAA,EAAiB;EACjBC,YAAA,EAAc;EACdC,SAAA,EAAW;AACb,CAAC;AAEM,SAASC,mBAAA,EAAqB;EACnC,OACE,eAAAP,IAAA,CAACF,MAAA;IAAOU,GAAA,EAAI;IAAKC,KAAA,EAAM;IAASC,CAAA,EAAE;IAChCC,QAAA,kBAAAZ,GAAA,CAACF,IAAA;MAAKe,MAAA,EAAO;MAAyBD,QAAA;IAAA,CAAoB,GAG1D,eAAAZ,GAAA,CAACE,eAAA;MAAgBW,MAAA,EAAO;IAAA,CAAoB,GAG5C,eAAAb,GAAA,CAACH,IAAA;MACCM,KAAA,EAAO;MACPC,MAAA,EAAQ;MACRC,eAAA,EAAgB;MAChBC,YAAA,EAAa;MACbC,SAAA,EAAU;MACVM,MAAA,EAAO;IAAA,CACT,GAEA,eAAAb,GAAA,CAACF,IAAA;MAAKe,MAAA,EAAO;MAAsBD,QAAA;IAAA,CAAE;EAAA,CACvC;AAEJ","ignoreList":[]}

package/dist/esm/BoxShadowTokenDemo.native.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { styled, View, Text, YStack } from "@hanzo/gui";
+var StyledShadowBox = styled(View, {
+  width: 100,
+  height: 100,
+  backgroundColor: "$color5",
+  borderRadius: "$4",
+  boxShadow: "0px 2px 8px $shadowColor"
+});
+function BoxShadowTokenDemo() {
+  return /* @__PURE__ */_jsxs(YStack, {
+    gap: "$4",
+    items: "center",
+    p: "$4",
+    children: [/* @__PURE__ */_jsx(Text, {
+      testID: "box-shadow-token-title",
+      children: "BoxShadow Token Test"
+    }), /* styled() definition - breaks if web imports leak to native */
+    /* @__PURE__ */_jsx(StyledShadowBox, {
+      testID: "box-shadow-styled"
+    }), /* inline prop - should always work */
+    /* @__PURE__ */_jsx(View, {
+      width: 100,
+      height: 100,
+      backgroundColor: "$color5",
+      borderRadius: "$4",
+      boxShadow: "0px 2px 8px $shadowColor",
+      testID: "box-shadow-prop"
+    }), /* @__PURE__ */_jsx(Text, {
+      testID: "box-shadow-token-ok",
+      children: "OK"
+    })]
+  });
+}
+export { BoxShadowTokenDemo };
+//# sourceMappingURL=BoxShadowTokenDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","styled","View","Text","YStack","StyledShadowBox","width","height","backgroundColor","borderRadius","boxShadow","BoxShadowTokenDemo","gap","items","p","children","testID"],"sources":["../../src/BoxShadowTokenDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAQ,EAAAC,IAAM,IAAMC,KAAA,QAAc;AAevC,SACEC,MADF,EAAAC,IAAA,EAAAC,IAAA,EAAAC,MAAA;AAVJ,IAAAC,eAAM,GAAAJ,MAAkB,CAAAC,IAAO;EAC7BI,KAAA,EAAO;EACPC,MAAA,EAAQ;EACRC,eAAA,EAAiB;EACjBC,YAAA,EAAc;EACdC,SAAA,EAAW;AACb,CAAC;AAEM,SAASC,mBAAA,EAAqB;EACnC,OACE,eAAAX,KAAC,CAAAI,MAAA;IACCQ,GAAA;IAGAC,KAAA;IAGAC,CAAA;IAAAC,QAAC,kBAAAjB,IAAA,CAAAK,IAAA;MACCa,MAAA,EAAO;MACPD,QAAQ;IAAA,EACR,EAAgB;IACH,eACHjB,IAAA,CAAAO,eAAA;MACVW,MAAA,EAAO;IAAA,IACT;IAEA,eAAAlB,IAAC,CAAAI,IAAA,EAAK;MACRI,KAAA;MAEJC,MAAA","ignoreList":[]}

package/dist/esm/BuildAButtonDemo.mjs

@@ -0,0 +1,106 @@
+import { Drumstick, Hand } from "@hanzogui/lucide-icons-2";
+import { Button, XStack, YStack } from "@hanzo/gui";
+import { jsx, jsxs } from "react/jsx-runtime";
+const outlined = {
+  bg: "transparent",
+  borderWidth: 2,
+  borderColor: "$background",
+  rounded: "$10",
+  hoverStyle: {
+    bg: "transparent",
+    borderColor: "$backgroundPress"
+  }
+};
+function BuildAButtonDemo() {
+  return /* @__PURE__ */jsx(YStack, {
+    fullscreen: !0,
+    overflow: "hidden",
+    children: /* @__PURE__ */jsxs(XStack, {
+      maxH: 200,
+      y: -100,
+      x: -40,
+      rotate: "-10deg",
+      children: [/* @__PURE__ */jsx(ButtonCol, {
+        y: 35,
+        size: "$2",
+        ...outlined,
+        subTheme: "surface1",
+        borderWidth: 1
+      }), /* @__PURE__ */jsx(ButtonCol, {
+        y: 30
+      }), /* @__PURE__ */jsx(ButtonCol, {
+        y: -50,
+        ...outlined
+      }), /* @__PURE__ */jsx(ButtonCol, {
+        ...outlined,
+        icon: /* @__PURE__ */jsx(Hand, {})
+      }), /* @__PURE__ */jsx(ButtonCol, {
+        size: "$6",
+        subTheme: "surface2"
+      }), /* @__PURE__ */jsx(ButtonCol, {
+        size: "$6",
+        subTheme: "surface2",
+        ...outlined
+      }), /* @__PURE__ */jsx(ButtonCol, {
+        size: "$8",
+        subTheme: "surface2",
+        iconAfter: /* @__PURE__ */jsx(Drumstick, {}),
+        ...outlined
+      }), /* @__PURE__ */jsx(ButtonCol, {
+        size: "$10",
+        subTheme: "surface1"
+      }), /* @__PURE__ */jsx(ButtonCol, {
+        size: "$8",
+        subTheme: "surface2",
+        ...outlined,
+        rounded: 0
+      })]
+    })
+  });
+}
+function ButtonCol(props) {
+  const {
+      subTheme,
+      ...buttonProps
+    } = props,
+    subThemeSuffix = subTheme ? `_${subTheme}` : "";
+  return /* @__PURE__ */jsxs(YStack, {
+    p: "$2",
+    gap: "$3",
+    children: [/* @__PURE__ */jsx(Button, {
+      theme: props.subTheme,
+      ...props,
+      children: "Hello"
+    }), /* @__PURE__ */jsx(Button, {
+      theme: "orange" + subThemeSuffix,
+      ...buttonProps,
+      children: "Hello"
+    }), /* @__PURE__ */jsx(Button, {
+      theme: "yellow" + subThemeSuffix,
+      ...buttonProps,
+      children: "Hello"
+    }), /* @__PURE__ */jsx(Button, {
+      theme: "green" + subThemeSuffix,
+      ...buttonProps,
+      children: "Hello"
+    }), /* @__PURE__ */jsx(Button, {
+      theme: "blue" + subThemeSuffix,
+      ...buttonProps,
+      children: "Hello"
+    }), /* @__PURE__ */jsx(Button, {
+      theme: "purple" + subThemeSuffix,
+      ...buttonProps,
+      children: "Hello"
+    }), /* @__PURE__ */jsx(Button, {
+      theme: "pink" + subThemeSuffix,
+      ...buttonProps,
+      children: "Hello"
+    }), /* @__PURE__ */jsx(Button, {
+      theme: "red" + subThemeSuffix,
+      ...buttonProps,
+      children: "Hello"
+    })]
+  });
+}
+export { BuildAButtonDemo };
+//# sourceMappingURL=BuildAButtonDemo.mjs.map

package/dist/esm/BuildAButtonDemo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["Drumstick","Hand","Button","XStack","YStack","jsx","jsxs","outlined","bg","borderWidth","borderColor","rounded","hoverStyle","BuildAButtonDemo","fullscreen","overflow","children","maxH","y","x","rotate","ButtonCol","size","subTheme","icon","iconAfter","props","buttonProps","subThemeSuffix","p","gap","theme"],"sources":["../../src/BuildAButtonDemo.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/BuildAButtonDemo.native.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Drumstick, Hand } from "@hanzogui/lucide-icons-2";
+import { Button, XStack, YStack } from "@hanzo/gui";
+var outlined = {
+  bg: "transparent",
+  borderWidth: 2,
+  borderColor: "$background",
+  rounded: "$10",
+  hoverStyle: {
+    bg: "transparent",
+    borderColor: "$backgroundPress"
+  }
+};
+function BuildAButtonDemo() {
+  return /* @__PURE__ */_jsx(YStack, {
+    fullscreen: !0,
+    overflow: "hidden",
+    children: /* @__PURE__ */_jsxs(XStack, {
+      maxH: 200,
+      y: -100,
+      x: -40,
+      rotate: "-10deg",
+      children: [/* @__PURE__ */_jsx(ButtonCol, {
+        y: 35,
+        size: "$2",
+        ...outlined,
+        subTheme: "surface1",
+        borderWidth: 1
+      }), /* @__PURE__ */_jsx(ButtonCol, {
+        y: 30
+      }), /* @__PURE__ */_jsx(ButtonCol, {
+        y: -50,
+        ...outlined
+      }), /* @__PURE__ */_jsx(ButtonCol, {
+        ...outlined,
+        icon: /* @__PURE__ */_jsx(Hand, {})
+      }), /* @__PURE__ */_jsx(ButtonCol, {
+        size: "$6",
+        subTheme: "surface2"
+      }), /* @__PURE__ */_jsx(ButtonCol, {
+        size: "$6",
+        subTheme: "surface2",
+        ...outlined
+      }), /* @__PURE__ */_jsx(ButtonCol, {
+        size: "$8",
+        subTheme: "surface2",
+        iconAfter: /* @__PURE__ */_jsx(Drumstick, {}),
+        ...outlined
+      }), /* @__PURE__ */_jsx(ButtonCol, {
+        size: "$10",
+        subTheme: "surface1"
+      }), /* @__PURE__ */_jsx(ButtonCol, {
+        size: "$8",
+        subTheme: "surface2",
+        ...outlined,
+        rounded: 0
+      })]
+    })
+  });
+}
+function ButtonCol(props) {
+  var {
+      subTheme,
+      ...buttonProps
+    } = props,
+    subThemeSuffix = subTheme ? `_${subTheme}` : "";
+  return /* @__PURE__ */_jsxs(YStack, {
+    p: "$2",
+    gap: "$3",
+    children: [/* @__PURE__ */_jsx(Button, {
+      theme: props.subTheme,
+      ...props,
+      children: "Hello"
+    }), /* @__PURE__ */_jsx(Button, {
+      theme: "orange" + subThemeSuffix,
+      ...buttonProps,
+      children: "Hello"
+    }), /* @__PURE__ */_jsx(Button, {
+      theme: "yellow" + subThemeSuffix,
+      ...buttonProps,
+      children: "Hello"
+    }), /* @__PURE__ */_jsx(Button, {
+      theme: "green" + subThemeSuffix,
+      ...buttonProps,
+      children: "Hello"
+    }), /* @__PURE__ */_jsx(Button, {
+      theme: "blue" + subThemeSuffix,
+      ...buttonProps,
+      children: "Hello"
+    }), /* @__PURE__ */_jsx(Button, {
+      theme: "purple" + subThemeSuffix,
+      ...buttonProps,
+      children: "Hello"
+    }), /* @__PURE__ */_jsx(Button, {
+      theme: "pink" + subThemeSuffix,
+      ...buttonProps,
+      children: "Hello"
+    }), /* @__PURE__ */_jsx(Button, {
+      theme: "red" + subThemeSuffix,
+      ...buttonProps,
+      children: "Hello"
+    })]
+  });
+}
+export { BuildAButtonDemo };
+//# sourceMappingURL=BuildAButtonDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Drumstick","Hand","Button","XStack","YStack","outlined","bg","borderWidth","borderColor","rounded","hoverStyle","BuildAButtonDemo","fullscreen","overflow","children","maxH","y","x","rotate","ButtonCol","size","subTheme","icon"],"sources":["../../src/BuildAButtonDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAW,EAAAC,IAAA,IAAAC,KAAY;AAEhC,SAASC,SAAQ,EAAAC,IAAA,QAAQ,0BAAc;AAiBjC,SACEC,MADF,EAAAC,MAAA,EAAAC,MAAA;AAfN,IAAAC,QAAM;EACJC,EAAA,EAAI;EACJC,WAAA,EAAa;EACbC,WAAA,EAAa;EACbC,OAAA,EAAS;EAETC,UAAA,EAAY;IACVJ,EAAA,EAAI;IACJE,WAAA,EAAa;EACf;AACF;AAEO,SAASG,iBAAA,EAAmB;EACjC,OACE,eAAAd,IAAC,CAAAO,MAAA;IAEGQ,UAAA;IACAC,QAAA;IACAC,QAAA,iBAACf,KAAA,CAAAI,MAAa;MACdY,IAAA;MACAC,CAAA;MACAC,CAAA;MACAC,MAAA;MAACJ,QAAA,kBAAAjB,IAAA,CAAAsB,SAAA;QACCH,CAAA,IAAK;QACLI,IAAA,MAAS;QACT,GAAAf,QAAW;QACVgB,QAAG;QAAAd,WAAA;MACN,IACA,eAACV,IAAA,CAAAsB,SAAU;QACXH,CAAA;MAEJ,IAEJ,eAAAnB,IAAA,CAAAsB,SAAA;QAESH,CAAA;QACC,GAAAX;MAGR,CACE,GACE,eAACR,IAAA,CAAAsB,SAAO;QAGR,GAAAd,QAAA;QAGAiB,IAAA,iBAACzB,IAAO,CAAAI,IAAQ;MAGhB,IAGA,eAACJ,IAAA,CAAAsB,SAAO;QAGRC,IAAA;QAGAC,QAAA;MAGA,IAGF,eAAAxB,IAAA,CAAAsB,SAAA;QAEJC,IAAA","ignoreList":[]}

package/dist/esm/ButtonDemo.mjs

@@ -0,0 +1,66 @@
+import { Button } from "@hanzogui/button";
+import { Activity, Airplay } from "@hanzogui/lucide-icons-2";
+import { Theme, XGroup, XStack, YStack } from "@hanzo/gui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ButtonDemo() {
+  return /* @__PURE__ */jsxs(YStack, {
+    p: "$3",
+    gap: "$3",
+    children: [/* @__PURE__ */jsx(Button, {
+      children: "Plain"
+    }), /* @__PURE__ */jsx(Button, {
+      self: "center",
+      icon: Airplay,
+      size: "$6",
+      children: "Large"
+    }), /* @__PURE__ */jsxs(XStack, {
+      gap: "$2",
+      justify: "center",
+      children: [/* @__PURE__ */jsx(Button, {
+        size: "$3",
+        theme: "accent",
+        children: "Active"
+      }), /* @__PURE__ */jsx(Button, {
+        size: "$3",
+        variant: "outlined",
+        children: "Outlined"
+      })]
+    }), /* @__PURE__ */jsxs(XStack, {
+      gap: "$2",
+      justify: "center",
+      children: [/* @__PURE__ */jsx(Theme, {
+        name: "accent",
+        children: /* @__PURE__ */jsxs(Button, {
+          size: "$3",
+          children: [/* @__PURE__ */jsx(Button.Icon, {
+            children: /* @__PURE__ */jsx(Activity, {})
+          }), /* @__PURE__ */jsx(Button.Text, {
+            children: "Inverse"
+          })]
+        })
+      }), /* @__PURE__ */jsx(Button, {
+        iconAfter: Activity,
+        size: "$3",
+        children: "iconAfter"
+      })]
+    }), /* @__PURE__ */jsxs(XGroup, {
+      children: [/* @__PURE__ */jsx(XGroup.Item, {
+        children: /* @__PURE__ */jsx(Button, {
+          width: "50%",
+          size: "$2",
+          disabled: !0,
+          opacity: 0.5,
+          children: "disabled"
+        })
+      }), /* @__PURE__ */jsx(XGroup.Item, {
+        children: /* @__PURE__ */jsx(Button, {
+          width: "50%",
+          size: "$2",
+          children: "plain"
+        })
+      })]
+    })]
+  });
+}
+export { ButtonDemo };
+//# sourceMappingURL=ButtonDemo.mjs.map

package/dist/esm/ButtonDemo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["Button","Activity","Airplay","Theme","XGroup","XStack","YStack","jsx","jsxs","ButtonDemo","p","gap","children","self","icon","size","justify","theme","variant","name","Icon","Text","iconAfter","Item","width","disabled","opacity"],"sources":["../../src/ButtonDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,MAAA,QAAc;AACvB,SAASC,QAAA,EAAUC,OAAA,QAAe;AAClC,SAASC,KAAA,EAAOC,MAAA,EAAQC,MAAA,EAAQC,MAAA,QAAc;AAKxC,SAAAC,GAAA,EAIAC,IAAA,QAJA;AAHC,SAASC,WAAA,EAAa;EAC3B,OACE,eAAAD,IAAA,CAACF,MAAA;IAAOI,CAAA,EAAE;IAAKC,GAAA,EAAI;IACjBC,QAAA,kBAAAL,GAAA,CAACP,MAAA;MAAOY,QAAA;IAAA,CAAK,GACb,eAAAL,GAAA,CAACP,MAAA;MAAOa,IAAA,EAAK;MAASC,IAAA,EAAMZ,OAAA;MAASa,IAAA,EAAK;MAAKH,QAAA;IAAA,CAE/C,GACA,eAAAJ,IAAA,CAACH,MAAA;MAAOM,GAAA,EAAI;MAAKK,OAAA,EAAQ;MACvBJ,QAAA,kBAAAL,GAAA,CAACP,MAAA;QAAOe,IAAA,EAAK;QAAKE,KAAA,EAAM;QAASL,QAAA;MAAA,CAEjC,GACA,eAAAL,GAAA,CAACP,MAAA;QAAOe,IAAA,EAAK;QAAKG,OAAA,EAAQ;QAAWN,QAAA;MAAA,CAErC;IAAA,CACF,GACA,eAAAJ,IAAA,CAACH,MAAA;MAAOM,GAAA,EAAI;MAAKK,OAAA,EAAQ;MACvBJ,QAAA,kBAAAL,GAAA,CAACJ,KAAA;QAAMgB,IAAA,EAAK;QACVP,QAAA,iBAAAJ,IAAA,CAACR,MAAA;UAAOe,IAAA,EAAK;UACXH,QAAA,kBAAAL,GAAA,CAACP,MAAA,CAAOoB,IAAA,EAAP;YACCR,QAAA,iBAAAL,GAAA,CAACN,QAAA,IAAS;UAAA,CACZ,GACA,eAAAM,GAAA,CAACP,MAAA,CAAOqB,IAAA,EAAP;YAAYT,QAAA;UAAA,CAAO;QAAA,CACtB;MAAA,CACF,GACA,eAAAL,GAAA,CAACP,MAAA;QAAOsB,SAAA,EAAWrB,QAAA;QAAUc,IAAA,EAAK;QAAKH,QAAA;MAAA,CAEvC;IAAA,CACF,GAEA,eAAAJ,IAAA,CAACJ,MAAA;MACCQ,QAAA,kBAAAL,GAAA,CAACH,MAAA,CAAOmB,IAAA,EAAP;QACCX,QAAA,iBAAAL,GAAA,CAACP,MAAA;UAAOwB,KAAA,EAAM;UAAMT,IAAA,EAAK;UAAKU,QAAA,EAAQ;UAACC,OAAA,EAAS;UAAKd,QAAA;QAAA,CAErD;MAAA,CACF,GAEA,eAAAL,GAAA,CAACH,MAAA,CAAOmB,IAAA,EAAP;QACCX,QAAA,iBAAAL,GAAA,CAACP,MAAA;UAAOwB,KAAA,EAAM;UAAMT,IAAA,EAAK;UAAKH,QAAA;QAAA,CAE9B;MAAA,CACF;IAAA,CACF;EAAA,CACF;AAEJ","ignoreList":[]}

package/dist/esm/ButtonDemo.native.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@hanzogui/button";
+import { Activity, Airplay } from "@hanzogui/lucide-icons-2";
+import { Theme, XGroup, XStack, YStack } from "@hanzo/gui";
+function ButtonDemo() {
+  return /* @__PURE__ */_jsxs(YStack, {
+    p: "$3",
+    gap: "$3",
+    children: [/* @__PURE__ */_jsx(Button, {
+      children: "Plain"
+    }), /* @__PURE__ */_jsx(Button, {
+      self: "center",
+      icon: Airplay,
+      size: "$6",
+      children: "Large"
+    }), /* @__PURE__ */_jsxs(XStack, {
+      gap: "$2",
+      justify: "center",
+      children: [/* @__PURE__ */_jsx(Button, {
+        size: "$3",
+        theme: "accent",
+        children: "Active"
+      }), /* @__PURE__ */_jsx(Button, {
+        size: "$3",
+        variant: "outlined",
+        children: "Outlined"
+      })]
+    }), /* @__PURE__ */_jsxs(XStack, {
+      gap: "$2",
+      justify: "center",
+      children: [/* @__PURE__ */_jsx(Theme, {
+        name: "accent",
+        children: /* @__PURE__ */_jsxs(Button, {
+          size: "$3",
+          children: [/* @__PURE__ */_jsx(Button.Icon, {
+            children: /* @__PURE__ */_jsx(Activity, {})
+          }), /* @__PURE__ */_jsx(Button.Text, {
+            children: "Inverse"
+          })]
+        })
+      }), /* @__PURE__ */_jsx(Button, {
+        iconAfter: Activity,
+        size: "$3",
+        children: "iconAfter"
+      })]
+    }), /* @__PURE__ */_jsxs(XGroup, {
+      children: [/* @__PURE__ */_jsx(XGroup.Item, {
+        children: /* @__PURE__ */_jsx(Button, {
+          width: "50%",
+          size: "$2",
+          disabled: !0,
+          opacity: 0.5,
+          children: "disabled"
+        })
+      }), /* @__PURE__ */_jsx(XGroup.Item, {
+        children: /* @__PURE__ */_jsx(Button, {
+          width: "50%",
+          size: "$2",
+          children: "plain"
+        })
+      })]
+    })]
+  });
+}
+export { ButtonDemo };
+//# sourceMappingURL=ButtonDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Button","Activity","Airplay","Theme","XGroup","XStack","YStack","ButtonDemo","p","gap","children","self","icon","size","justify","theme"],"sources":["../../src/ButtonDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,EAAAC,IAAc,IAAAC,KAAA;AACvB,SAASC,MAAA,QAAU,kBAAe;AAClC,SAASC,QAAO,EAAAC,OAAQ,QAAQ,0BAAc;AAKxC,SAAAC,KAIA,EAAAC,MAAA,EAAAC,MAJA,EAAAC,MAAA;AAHC,SAASC,WAAA,EAAa;EAC3B,OACE,eAAAR,KAAC,CAAAO,MAAA;IACCE,CAAA;IACAC,GAAA;IAGAC,QAAA,GACE,eAAAb,IAAC,CAAAG,MAAA;MAGDU,QAAA;IAEA,CACF,GACA,eAAAb,IAAC,CAAAG,MAAA,EAAO;MACNW,IAAA;MAEIC,IAAA,EAAAV,OAAA;MAGAW,IAAA;MAAoBH,QAExB;IACA,IAEA,eACFX,KAAA,CAAAM,MAAA;MAEAI,GAAA;MACEK,OAAA;MAMAJ,QAAA,GAKF,eAAAb,IAAA,CAAAG,MAAA;QACFa,IAAA;QAEJE,KAAA","ignoreList":[]}