@hanzogui/demos 2.0.0

package/dist/esm/TabsDemo.native.js

@@ -0,0 +1,188 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Button, H5, Separator, SizableText, Tabs, XStack, YStack, isWeb, useWindowDimensions } from "@hanzo/gui";
+var demos = ["horizontal", "vertical"],
+  demosTitle = {
+    horizontal: "Horizontal",
+    vertical: "Vertical"
+  };
+function TabsDemo() {
+  var [demoIndex, setDemoIndex] = React.useState(0),
+    demo = demos[demoIndex];
+  return /* @__PURE__ */_jsxs(YStack, {
+    px: "$4",
+    ...(isWeb && {
+      position: "unset"
+    }),
+    children: [demo === "horizontal" ? /* @__PURE__ */_jsx(HorizontalTabs, {}) : /* @__PURE__ */_jsx(VerticalTabs, {}), /* @__PURE__ */_jsx(XStack, {
+      items: "center",
+      gap: "$4",
+      position: "absolute",
+      b: "$3",
+      l: "$4",
+      $maxXs: {
+        display: "none"
+      },
+      children: /* @__PURE__ */_jsx(Button, {
+        size: "$2",
+        onPress: function () {
+          return setDemoIndex(function (x) {
+            return (x + 1) % demos.length;
+          });
+        },
+        children: demosTitle[demo]
+      })
+    })]
+  });
+}
+var HorizontalTabs = function () {
+    var {
+      width
+    } = useWindowDimensions();
+    return /* @__PURE__ */_jsxs(Tabs, {
+      defaultValue: "tab1",
+      orientation: "horizontal",
+      flexDirection: "column",
+      $maxMd: {
+        width: width - 32
+      },
+      width: 400,
+      height: 150,
+      rounded: "$4",
+      borderWidth: "$0.25",
+      borderColor: "$borderColor",
+      children: [/* @__PURE__ */_jsxs(Tabs.List, {
+        "aria-label": "Manage your account",
+        children: [/* @__PURE__ */_jsx(Tabs.Tab, {
+          activeStyle: {
+            backgroundColor: "$color3"
+          },
+          flex: 1,
+          value: "tab1",
+          children: /* @__PURE__ */_jsx(SizableText, {
+            fontFamily: "$body",
+            text: "center",
+            ellipsis: !0,
+            children: "Profile"
+          })
+        }), /* @__PURE__ */_jsx(Tabs.Tab, {
+          activeStyle: {
+            backgroundColor: "$color3"
+          },
+          flex: 1,
+          value: "tab2",
+          children: /* @__PURE__ */_jsx(SizableText, {
+            fontFamily: "$body",
+            text: "center",
+            ellipsis: !0,
+            children: "Connections"
+          })
+        }), /* @__PURE__ */_jsx(Tabs.Tab, {
+          activeStyle: {
+            backgroundColor: "$color3"
+          },
+          flex: 1,
+          value: "tab3",
+          children: /* @__PURE__ */_jsx(SizableText, {
+            fontFamily: "$body",
+            text: "center",
+            ellipsis: !0,
+            children: "Notifications"
+          })
+        })]
+      }), /* @__PURE__ */_jsx(Separator, {}), /* @__PURE__ */_jsx(TabsContent, {
+        value: "tab1",
+        children: /* @__PURE__ */_jsx(H5, {
+          children: "Profile"
+        })
+      }), /* @__PURE__ */_jsx(TabsContent, {
+        value: "tab2",
+        children: /* @__PURE__ */_jsx(H5, {
+          children: "Connections"
+        })
+      }), /* @__PURE__ */_jsx(TabsContent, {
+        value: "tab3",
+        children: /* @__PURE__ */_jsx(H5, {
+          children: "Notifications"
+        })
+      })]
+    });
+  },
+  VerticalTabs = function () {
+    return /* @__PURE__ */_jsxs(Tabs, {
+      defaultValue: "tab1",
+      flexDirection: "row",
+      orientation: "vertical",
+      width: 400,
+      rounded: "$4",
+      borderWidth: "$0.25",
+      overflow: "hidden",
+      borderColor: "$borderColor",
+      children: [/* @__PURE__ */_jsxs(Tabs.List, {
+        "aria-label": "Manage your account",
+        children: [/* @__PURE__ */_jsx(Tabs.Tab, {
+          activeStyle: {
+            backgroundColor: "$color3"
+          },
+          value: "tab1",
+          children: /* @__PURE__ */_jsx(SizableText, {
+            children: "Profile"
+          })
+        }), /* @__PURE__ */_jsx(Tabs.Tab, {
+          activeStyle: {
+            backgroundColor: "$color3"
+          },
+          value: "tab2",
+          children: /* @__PURE__ */_jsx(SizableText, {
+            children: "Connections"
+          })
+        }), /* @__PURE__ */_jsx(Tabs.Tab, {
+          activeStyle: {
+            backgroundColor: "$color3"
+          },
+          value: "tab3",
+          children: /* @__PURE__ */_jsx(SizableText, {
+            children: "Notifications"
+          })
+        })]
+      }), /* @__PURE__ */_jsx(Separator, {
+        vertical: !0
+      }), /* @__PURE__ */_jsx(TabsContent, {
+        value: "tab1",
+        children: /* @__PURE__ */_jsx(H5, {
+          text: "center",
+          children: "Profile"
+        })
+      }), /* @__PURE__ */_jsx(TabsContent, {
+        value: "tab2",
+        children: /* @__PURE__ */_jsx(H5, {
+          text: "center",
+          children: "Connections"
+        })
+      }), /* @__PURE__ */_jsx(TabsContent, {
+        value: "tab3",
+        children: /* @__PURE__ */_jsx(H5, {
+          text: "center",
+          children: "Notifications"
+        })
+      })]
+    });
+  },
+  TabsContent = function (props) {
+    return /* @__PURE__ */_jsx(Tabs.Content, {
+      bg: "$background",
+      p: "$2",
+      items: "center",
+      justify: "center",
+      flex: 1,
+      borderColor: "$background",
+      rounded: "$2",
+      borderTopLeftRadius: 0,
+      borderTopRightRadius: 0,
+      borderWidth: "$2",
+      ...props,
+      children: props.children
+    }, "tab3");
+  };
+export { TabsDemo };
+//# sourceMappingURL=TabsDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","React","Button","H5","Separator","SizableText","Tabs","XStack","YStack","isWeb","useWindowDimensions","demos","demosTitle","horizontal","vertical","TabsDemo","demoIndex","setDemoIndex","useState","demo","px","position","children","HorizontalTabs","VerticalTabs","items","gap","b","l","$maxXs","display","size","onPress","x","length","width","defaultValue","orientation","flexDirection","$maxMd","height","rounded","borderWidth","borderColor","List","Tab","activeStyle","backgroundColor","flex","value","fontFamily","text","ellipsis","TabsContent","overflow"],"sources":["../../src/TabsDemo.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/TabsHeadlessDemo.mjs

@@ -0,0 +1,105 @@
+import { useState } from "react";
+import { Button, SizableStack, ThemeableStack, XStack, YStack, isWeb, styled } from "@hanzo/gui";
+import { createTabs } from "@hanzogui/tabs";
+import { getButtonSized } from "@hanzogui/get-button-sized";
+import { jsx, jsxs } from "react/jsx-runtime";
+const demos = ["horizontal", "vertical"],
+  TabsFrame = styled(SizableStack, {
+    name: "TabsFrame"
+  }),
+  TabFrame = styled(ThemeableStack, {
+    name: "TabsTrigger",
+    render: "button",
+    cursor: "pointer",
+    backgroundColor: "transparent",
+    variants: {
+      size: {
+        "...size": getButtonSized
+      },
+      disabled: {
+        true: {
+          pointerEvents: "none"
+        }
+      },
+      active: {
+        true: {
+          hoverStyle: {
+            backgroundColor: "$background"
+          },
+          focusStyle: {
+            backgroundColor: "$background"
+          }
+        }
+      }
+    }
+  }),
+  CONTENT_NAME = "TabsContent",
+  ContentFrame = styled(ThemeableStack, {
+    name: CONTENT_NAME,
+    flex: 1,
+    p: "$6",
+    justify: "center",
+    items: "center",
+    bg: "$color4",
+    rounded: "$4"
+  }),
+  CustomTabs = createTabs({
+    TabsFrame,
+    TabFrame,
+    ContentFrame
+  });
+function TabsHeadlessDemo() {
+  const [demo, setDemo] = useState(demos[0]);
+  return (
+    // web only fix for position relative
+    /* @__PURE__ */
+    jsxs(YStack, {
+      px: "$4",
+      ...(isWeb && {
+        position: "static"
+      }),
+      children: [/* @__PURE__ */jsx(TabsView, {
+        flexDirection: demo === "horizontal" ? "row" : "column"
+      }), /* @__PURE__ */jsx(XStack, {
+        items: "center",
+        gap: "$4",
+        position: "absolute",
+        b: "$3",
+        l: "$4",
+        $xxs: {
+          display: "none"
+        },
+        children: /* @__PURE__ */jsx(Button, {
+          size: "$2",
+          onPress: () => setDemo(demo === "horizontal" ? "vertical" : "horizontal"),
+          children: /* @__PURE__ */jsx(Button.Text, {
+            textTransform: "capitalize",
+            children: demo
+          })
+        })
+      })]
+    })
+  );
+}
+const content = ["Home", "Profile", "Settings"],
+  TabsView = ({
+    flexDirection = "row"
+  }) => /* @__PURE__ */jsxs(CustomTabs, {
+    flexDirection: flexDirection === "column" ? "row" : "column",
+    defaultValue: content[0],
+    children: [/* @__PURE__ */jsx(CustomTabs.List, {
+      flexDirection,
+      children: content.map((name, index) => /* @__PURE__ */jsx(CustomTabs.Tab, {
+        value: name,
+        activeStyle: {
+          backgroundColor: "transparent"
+        },
+        children: name
+      }, index))
+    }), content.map((name, index) => /* @__PURE__ */jsx(CustomTabs.Content, {
+      value: name,
+      children: name
+    }, index))]
+  });
+export { ContentFrame, CustomTabs, TabFrame, TabsFrame, TabsHeadlessDemo };
+//# sourceMappingURL=TabsHeadlessDemo.mjs.map

package/dist/esm/TabsHeadlessDemo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["useState","Button","SizableStack","ThemeableStack","XStack","YStack","isWeb","styled","createTabs","getButtonSized","jsx","jsxs","demos","TabsFrame","name","TabFrame","render","cursor","backgroundColor","variants","size","disabled","true","pointerEvents","active","hoverStyle","focusStyle","CONTENT_NAME","ContentFrame","flex","p","justify","items","bg","rounded","CustomTabs","TabsHeadlessDemo","demo","setDemo","px","position","children","TabsView","flexDirection","gap","b","l","$xxs","display","onPress","Text","textTransform","content","defaultValue","List","map","index","Tab","value","activeStyle","Content"],"sources":["../../src/TabsHeadlessDemo.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/TabsHeadlessDemo.native.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button, SizableStack, ThemeableStack, XStack, YStack, isWeb, styled } from "@hanzo/gui";
+import { createTabs } from "@hanzogui/tabs";
+import { getButtonSized } from "@hanzogui/get-button-sized";
+var demos = ["horizontal", "vertical"],
+  TabsFrame = styled(SizableStack, {
+    name: "TabsFrame"
+  }),
+  TabFrame = styled(ThemeableStack, {
+    name: "TabsTrigger",
+    render: "button",
+    cursor: "pointer",
+    backgroundColor: "transparent",
+    variants: {
+      size: {
+        "...size": getButtonSized
+      },
+      disabled: {
+        true: {
+          pointerEvents: "none"
+        }
+      },
+      active: {
+        true: {
+          hoverStyle: {
+            backgroundColor: "$background"
+          },
+          focusStyle: {
+            backgroundColor: "$background"
+          }
+        }
+      }
+    }
+  }),
+  CONTENT_NAME = "TabsContent",
+  ContentFrame = styled(ThemeableStack, {
+    name: CONTENT_NAME,
+    flex: 1,
+    p: "$6",
+    justify: "center",
+    items: "center",
+    bg: "$color4",
+    rounded: "$4"
+  }),
+  CustomTabs = createTabs({
+    TabsFrame,
+    TabFrame,
+    ContentFrame
+  });
+function TabsHeadlessDemo() {
+  var [demo, setDemo] = useState(demos[0]);
+  return (
+    // web only fix for position relative
+    /* @__PURE__ */
+    _jsxs(YStack, {
+      px: "$4",
+      ...(isWeb && {
+        position: "static"
+      }),
+      children: [/* @__PURE__ */_jsx(TabsView, {
+        flexDirection: demo === "horizontal" ? "row" : "column"
+      }), /* @__PURE__ */_jsx(XStack, {
+        items: "center",
+        gap: "$4",
+        position: "absolute",
+        b: "$3",
+        l: "$4",
+        $xxs: {
+          display: "none"
+        },
+        children: /* @__PURE__ */_jsx(Button, {
+          size: "$2",
+          onPress: function () {
+            return setDemo(demo === "horizontal" ? "vertical" : "horizontal");
+          },
+          children: /* @__PURE__ */_jsx(Button.Text, {
+            textTransform: "capitalize",
+            children: demo
+          })
+        })
+      })]
+    })
+  );
+}
+var content = ["Home", "Profile", "Settings"],
+  TabsView = function (param) {
+    var {
+      flexDirection = "row"
+    } = param;
+    return /* @__PURE__ */_jsxs(CustomTabs, {
+      flexDirection: flexDirection === "column" ? "row" : "column",
+      defaultValue: content[0],
+      children: [/* @__PURE__ */_jsx(CustomTabs.List, {
+        flexDirection,
+        children: content.map(function (name, index) {
+          return /* @__PURE__ */_jsx(CustomTabs.Tab, {
+            value: name,
+            activeStyle: {
+              backgroundColor: "transparent"
+            },
+            children: name
+          }, index);
+        })
+      }), content.map(function (name, index) {
+        return /* @__PURE__ */_jsx(CustomTabs.Content, {
+          value: name,
+          children: name
+        }, index);
+      })]
+    });
+  };
+export { ContentFrame, CustomTabs, TabFrame, TabsFrame, TabsHeadlessDemo };
+//# sourceMappingURL=TabsHeadlessDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","useState","Button","SizableStack","ThemeableStack","XStack","YStack","isWeb","styled","createTabs","getButtonSized","demos","TabsFrame","name","TabFrame","render","cursor","backgroundColor","variants","size","disabled","true","pointerEvents","active","hoverStyle","focusStyle","CONTENT_NAME","ContentFrame","flex","p","justify","items","bg","rounded","CustomTabs","TabsHeadlessDemo","demo","setDemo","px","position","children","TabsView","flexDirection","gap","b","l","$xxs","display","onPress","Text","textTransform","content","param","defaultValue","List","map","index","Tab","value","activeStyle","Content"],"sources":["../../src/TabsHeadlessDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAAgBA,GAAA,IAAAC,IAAA,EAAAC,IAAgB,IAAAC,KAAA;AAChC,SAAAC,QAAA;AAAA,SACEC,MAAA,EAAAC,YAAA,EAAAC,cAAA,EAAAC,MAAA,EAAAC,MAAA,EAAAC,KAAA,EAAAC,MAAA;AAAA,SACAC,UAAA;AAAA,SACAC,cAAA;AAAA,IACAC,KAAA,IACA,cACA;EACAC,SAAA,GAAAJ,MAAA,CAAAL,YAAA;IAAAU,IAAA,EACK;EACP;EAAAC,QAAS,GAAAN,MAAA,CAAAJ,cAAkB;IAC3BS,IAAA,eAAS;IA6DLE,MAAA,EAME,QANF;IA3DJC,MAAM,WAAS;IAGbC,eAAM;IACPC,QAEY;MACXC,IAAM;QACN,SAAQ,EAAAT;MACR;MACAU,QAAA;QACAC,IAAA,EAAU;UACRC,aAAM;QACJ;MACF;MAEAC,MAAA;QACEF,IAAA,EAAM;UACJG,UAAA;YACFP,eAAA;UACF;UAEAQ,UAAQ;YACNR,eAAM;UACJ;QAAY;MACO;IACnB;EAEY;EAAAS,YACV,gBAAiB;EAAAC,YAAA,GAAAnB,MAAA,CAAAJ,cAAA;IAAAS,IAAA,EACnBa,YAAA;IAAAE,IACF;IAAAC,CAAA,EACF;IACFC,OAAA;IACDC,KAEK;IAGJC,EAAA,WAAM;IACNC,OAAM;EAAA,EACN;EAAAC,UAAG,GAAAzB,UAAA;IACHG,SAAS;IACTE,QAAO;IACPa;EAAI,EACJ;AACF,SAEaQ,gBAAaA,CAAA,EAAW;EACnC,KAAAC,IAAA,EAAAC,OAAA,IAAApC,QAAA,CAAAU,KAAA;EACA;IACA;IACD;IAAAX,KAAA,CAAAM,MAAA;MAEMgC,EAAA,EAAS;MACd,IAAO/B,KAAA,IAAM;QAEbgC,QAAA;MAAA;MAEEC,QAAA,GAAC,eAAA1C,IAAA,CAAA2C,QAAA;QAAAC,aAAA,EAAAN,IAAA;MACC,IACC,eAAatC,IAAA,CAAAO,MAAA;QACZ0B,KAAA,UAAU;QACZY,GAAA;QAEAJ,QAAA;QAAAK,CAAA;QAEAC,CAAA;QAAAC,IAAC;UAAAC,OAAA;QAAA;QACOP,QACN,EAAI,eAAA1C,IAAA,CAAAI,MAAA;UAAAiB,IACJ;UAAS6B,OACP,WAAAA,CAAA;YACF,OAAEX,OAAA,CAAAD,IAAA;UAAA;UACsBI,QAExB,iBAAA1C,IAAA,CAAAI,MAAA,CAAA+C,IAAA;YAAAC,aAAC;YAAAV,QAAA,EAAAJ;UAAA;QACM;MACmE;IAE1B;EAAA;AAChD;AACF,IAAAe,OAAA,qBACF,aAEJ;EAAAV,QAAA,YAAAA,CAAAW,KAAA;IAEA,IAAM;MAAAV,aAAW;IAAQ,IAAAU,KAAW;IAI/B,sBAAApD,KAAA,CAAAkC,UAAA;MAAAQ,aAAA,EAAAA,aAAA;MACCW,YAAA,EAAAF,OAAe;MACfX,QAAA,GAEA,eAAA1C,IAAA,CAAAoC,UAAA,CAAAoB,IAAA;QAAAZ,aAAA;QAEKF,QAAA,EAAAW,OAAW,CAAAI,GAAA,WAAA1C,IAAA,EAAA2C,KAAA;UAAX,sBAAA1D,IAAA,CAAAoC,UAAA,CAAAuB,GAAA;YAECC,KAAO,EAAA7C,IAAA;YACP8C,WAAa,EAAE;cAEd1C,eAAA;YAAA;YAJIuB,QAAA,EAAA3B;UAOX,GAAA2C,KAAA;QACC;MAIA,IAAAL,OAAA,CAAAI,GAAA,WAAA1C,IAAA,EAAA2C,KAAA;QACH,sBAAA1D,IAAA,CAAAoC,UAAA,CAAA0B,OAAA","ignoreList":[]}

package/dist/esm/TextDemo.mjs

@@ -0,0 +1,26 @@
+import { Em, Paragraph, SizableText, Span, Strong, YStack } from "@hanzo/gui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function TextDemo() {
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$2",
+    items: "center",
+    children: [/* @__PURE__ */jsx(SizableText, {
+      size: "$3",
+      children: "SizableText"
+    }), /* @__PURE__ */jsx(Paragraph, {
+      size: "$2",
+      fontWeight: "800",
+      children: "Paragraph"
+    }), /* @__PURE__ */jsxs(Paragraph, {
+      children: [/* @__PURE__ */jsx(Strong, {
+        children: "Strong"
+      }), ", ", /* @__PURE__ */jsx(Em, {
+        children: "Em"
+      }), ", ", /* @__PURE__ */jsx(Span, {
+        children: "Span"
+      })]
+    })]
+  });
+}
+export { TextDemo };
+//# sourceMappingURL=TextDemo.mjs.map

package/dist/esm/TextDemo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["Em","Paragraph","SizableText","Span","Strong","YStack","jsx","jsxs","TextDemo","gap","items","children","size","fontWeight"],"sources":["../../src/TextDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,EAAA,EAAIC,SAAA,EAAWC,WAAA,EAAaC,IAAA,EAAMC,MAAA,EAAQC,MAAA,QAAc;AAK3D,SAAAC,GAAA,EAIAC,IAAA,QAJA;AAHC,SAASC,SAAA,EAAW;EACzB,OACE,eAAAD,IAAA,CAACF,MAAA;IAAOI,GAAA,EAAI;IAAKC,KAAA,EAAM;IACrBC,QAAA,kBAAAL,GAAA,CAACJ,WAAA;MAAYU,IAAA,EAAK;MAAKD,QAAA;IAAA,CAAW,GAClC,eAAAL,GAAA,CAACL,SAAA;MAAUW,IAAA,EAAK;MAAKC,UAAA,EAAW;MAAMF,QAAA;IAAA,CAEtC,GACA,eAAAJ,IAAA,CAACN,SAAA;MACCU,QAAA,kBAAAL,GAAA,CAACF,MAAA;QAAOO,QAAA;MAAA,CAAM,GAAS,MAAE,eAAAL,GAAA,CAACN,EAAA;QAAGW,QAAA;MAAA,CAAE,GAAK,MAAE,eAAAL,GAAA,CAACH,IAAA;QAAKQ,QAAA;MAAA,CAAI;IAAA,CAClD;EAAA,CACF;AAEJ","ignoreList":[]}

package/dist/esm/TextDemo.native.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Em, Paragraph, SizableText, Span, Strong, YStack } from "@hanzo/gui";
+function TextDemo() {
+  return /* @__PURE__ */_jsxs(YStack, {
+    gap: "$2",
+    items: "center",
+    children: [/* @__PURE__ */_jsx(SizableText, {
+      size: "$3",
+      children: "SizableText"
+    }), /* @__PURE__ */_jsx(Paragraph, {
+      size: "$2",
+      fontWeight: "800",
+      children: "Paragraph"
+    }), /* @__PURE__ */_jsxs(Paragraph, {
+      children: [/* @__PURE__ */_jsx(Strong, {
+        children: "Strong"
+      }), ", ", /* @__PURE__ */_jsx(Em, {
+        children: "Em"
+      }), ", ", /* @__PURE__ */_jsx(Span, {
+        children: "Span"
+      })]
+    })]
+  });
+}
+export { TextDemo };
+//# sourceMappingURL=TextDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Em","Paragraph","SizableText","Span","Strong","YStack","TextDemo","gap","items","children","size","fontWeight"],"sources":["../../src/TextDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAIC,IAAA,EAAAC,IAAW,IAAAC,KAAA,QAAmB,mBAAQ;AAK7C,SAAAC,EAAA,EAAAC,SAIA,EAAAC,WAJA,EAAAC,IAAA,EAAAC,MAAA,EAAAC,MAAA;AAHC,SAASC,SAAA,EAAW;EACzB,OACE,eAAAP,KAAC,CAAAM,MAAA;IACCE,GAAA;IACAC,KAAA;IAGAC,QAAA,GACE,eAAAZ,IAAC,CAAAK,WAAO;MAAeQ,IAAA;MAAED,QAAA;IAAW,IAAE,eAAAZ,IAAC,CAAAI,SAAK;MAC9CS,IAAA;MACFC,UAAA;MAEJF,QAAA","ignoreList":[]}

package/dist/esm/ThemeBuilderDemo.mjs

@@ -0,0 +1,155 @@
+import { Square, XStack, YStack } from "@hanzo/gui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ThemeBuilderDemo() {
+  return /* @__PURE__ */jsx(YStack, {
+    fullscreen: !0,
+    overflow: "hidden",
+    children: /* @__PURE__ */jsxs(XStack, {
+      maxH: 200,
+      y: -100,
+      x: -50,
+      rotate: "-10deg",
+      children: [/* @__PURE__ */jsx(Col, {
+        y: 35,
+        bg: "$color9"
+      }), /* @__PURE__ */jsx(Col, {
+        size: "$8",
+        y: 30,
+        bg: "$color7"
+      }), /* @__PURE__ */jsx(Col, {
+        size: "$6",
+        y: -50,
+        bg: "$color5"
+      }), /* @__PURE__ */jsx(Col, {
+        size: "$4",
+        bg: "$color3"
+      }), /* @__PURE__ */jsx(Col, {
+        size: "$2",
+        bg: "$color1"
+      }), /* @__PURE__ */jsx(Col, {
+        size: "$4",
+        y: 50,
+        bg: "$color3"
+      }), /* @__PURE__ */jsx(Col, {
+        size: "$6",
+        y: 80,
+        bg: "$color5"
+      }), /* @__PURE__ */jsx(Col, {
+        size: "$8",
+        bg: "$color7"
+      }), /* @__PURE__ */jsx(Col, {
+        bg: "$color9"
+      }), /* @__PURE__ */jsx(Col, {
+        size: "$8",
+        bg: "$color7"
+      }), /* @__PURE__ */jsx(Col, {
+        size: "$6",
+        y: 80,
+        bg: "$color5"
+      }), /* @__PURE__ */jsx(Col, {
+        size: "$4",
+        y: 50,
+        bg: "$color3"
+      }), /* @__PURE__ */jsx(Col, {
+        size: "$2",
+        bg: "$color1"
+      }), /* @__PURE__ */jsx(Col, {
+        size: "$4",
+        bg: "$color3"
+      }), /* @__PURE__ */jsx(Col, {
+        size: "$6",
+        y: -50,
+        bg: "$color5"
+      }), /* @__PURE__ */jsx(Col, {
+        size: "$8",
+        y: 30,
+        bg: "$color7"
+      }), /* @__PURE__ */jsx(Col, {
+        y: 35,
+        bg: "$color9"
+      })]
+    })
+  });
+}
+function Col(props) {
+  const subTheme = props.subTheme ? `_${props.subTheme}` : "";
+  return /* @__PURE__ */jsxs(YStack, {
+    p: "$2.5",
+    gap: "$3.5",
+    children: [/* @__PURE__ */jsx(Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: props.subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */jsx(Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "orange" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */jsx(Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "yellow" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */jsx(Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "green" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */jsx(Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "blue" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */jsx(Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "purple" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */jsx(Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "pink" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */jsx(Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "red" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */jsx(Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: props.subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */jsx(Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "orange" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */jsx(Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "yellow" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */jsx(Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "green" + subTheme,
+      bg: "$background",
+      ...props
+    })]
+  });
+}
+export { ThemeBuilderDemo };
+//# sourceMappingURL=ThemeBuilderDemo.mjs.map

package/dist/esm/ThemeBuilderDemo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["Square","XStack","YStack","jsx","jsxs","ThemeBuilderDemo","fullscreen","overflow","children","maxH","y","x","rotate","Col","bg","size","props","subTheme","p","gap","rounded","theme"],"sources":["../../src/ThemeBuilderDemo.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,MAAA,EAAQC,MAAA,EAAQC,MAAA,QAAc;AAKjC,SACEC,GAAA,EADFC,IAAA;AAHC,SAASC,iBAAA,EAAmB;EACjC,OACE,eAAAF,GAAA,CAACD,MAAA;IAAOI,UAAA,EAAU;IAACC,QAAA,EAAS;IAC1BC,QAAA,iBAAAJ,IAAA,CAACH,MAAA;MAAOQ,IAAA,EAAM;MAAKC,CAAA,EAAG;MAAMC,CAAA,EAAG;MAAKC,MAAA,EAAO;MACzCJ,QAAA,kBAAAL,GAAA,CAACU,GAAA;QAAIH,CAAA,EAAG;QAAII,EAAA,EAAG;MAAA,CAAU,GACzB,eAAAX,GAAA,CAACU,GAAA;QAAIE,IAAA,EAAK;QAAKL,CAAA,EAAG;QAAII,EAAA,EAAG;MAAA,CAAU,GACnC,eAAAX,GAAA,CAACU,GAAA;QAAIE,IAAA,EAAK;QAAKL,CAAA,EAAG;QAAKI,EAAA,EAAG;MAAA,CAAU,GACpC,eAAAX,GAAA,CAACU,GAAA;QAAIE,IAAA,EAAK;QAAKD,EAAA,EAAG;MAAA,CAAU,GAC5B,eAAAX,GAAA,CAACU,GAAA;QAAIE,IAAA,EAAK;QAAKD,EAAA,EAAG;MAAA,CAAU,GAC5B,eAAAX,GAAA,CAACU,GAAA;QAAIE,IAAA,EAAK;QAAKL,CAAA,EAAG;QAAII,EAAA,EAAG;MAAA,CAAU,GACnC,eAAAX,GAAA,CAACU,GAAA;QAAIE,IAAA,EAAK;QAAKL,CAAA,EAAG;QAAII,EAAA,EAAG;MAAA,CAAU,GACnC,eAAAX,GAAA,CAACU,GAAA;QAAIE,IAAA,EAAK;QAAKD,EAAA,EAAG;MAAA,CAAU,GAC5B,eAAAX,GAAA,CAACU,GAAA;QAAIC,EAAA,EAAG;MAAA,CAAU,GAClB,eAAAX,GAAA,CAACU,GAAA;QAAIE,IAAA,EAAK;QAAKD,EAAA,EAAG;MAAA,CAAU,GAC5B,eAAAX,GAAA,CAACU,GAAA;QAAIE,IAAA,EAAK;QAAKL,CAAA,EAAG;QAAII,EAAA,EAAG;MAAA,CAAU,GACnC,eAAAX,GAAA,CAACU,GAAA;QAAIE,IAAA,EAAK;QAAKL,CAAA,EAAG;QAAII,EAAA,EAAG;MAAA,CAAU,GACnC,eAAAX,GAAA,CAACU,GAAA;QAAIE,IAAA,EAAK;QAAKD,EAAA,EAAG;MAAA,CAAU,GAC5B,eAAAX,GAAA,CAACU,GAAA;QAAIE,IAAA,EAAK;QAAKD,EAAA,EAAG;MAAA,CAAU,GAC5B,eAAAX,GAAA,CAACU,GAAA;QAAIE,IAAA,EAAK;QAAKL,CAAA,EAAG;QAAKI,EAAA,EAAG;MAAA,CAAU,GACpC,eAAAX,GAAA,CAACU,GAAA;QAAIE,IAAA,EAAK;QAAKL,CAAA,EAAG;QAAII,EAAA,EAAG;MAAA,CAAU,GACnC,eAAAX,GAAA,CAACU,GAAA;QAAIH,CAAA,EAAG;QAAII,EAAA,EAAG;MAAA,CAAU;IAAA,CAC3B;EAAA,CACF;AAEJ;AAEA,SAASD,IACPG,KAAA,EAGA;EACA,MAAMC,QAAA,GAAWD,KAAA,CAAMC,QAAA,GAAW,IAAID,KAAA,CAAMC,QAAQ,KAAK;EACzD,OACE,eAAAb,IAAA,CAACF,MAAA;IAAOgB,CAAA,EAAE;IAAOC,GAAA,EAAI;IACnBX,QAAA,kBAAAL,GAAA,CAACH,MAAA;MACCoB,OAAA,EAAQ;MACRL,IAAA,EAAK;MACLM,KAAA,EAAOL,KAAA,CAAMC,QAAA;MACbH,EAAA,EAAG;MACF,GAAGE;IAAA,CACN,GACA,eAAAb,GAAA,CAACH,MAAA;MACCoB,OAAA,EAAQ;MACRL,IAAA,EAAK;MACLM,KAAA,EAAQ,WAAWJ,QAAA;MACnBH,EAAA,EAAG;MACF,GAAGE;IAAA,CACN,GACA,eAAAb,GAAA,CAACH,MAAA;MACCoB,OAAA,EAAQ;MACRL,IAAA,EAAK;MACLM,KAAA,EAAQ,WAAWJ,QAAA;MACnBH,EAAA,EAAG;MACF,GAAGE;IAAA,CACN,GACA,eAAAb,GAAA,CAACH,MAAA;MACCoB,OAAA,EAAQ;MACRL,IAAA,EAAK;MACLM,KAAA,EAAQ,UAAUJ,QAAA;MAClBH,EAAA,EAAG;MACF,GAAGE;IAAA,CACN,GACA,eAAAb,GAAA,CAACH,MAAA;MACCoB,OAAA,EAAQ;MACRL,IAAA,EAAK;MACLM,KAAA,EAAQ,SAASJ,QAAA;MACjBH,EAAA,EAAG;MACF,GAAGE;IAAA,CACN,GACA,eAAAb,GAAA,CAACH,MAAA;MACCoB,OAAA,EAAQ;MACRL,IAAA,EAAK;MACLM,KAAA,EAAQ,WAAWJ,QAAA;MACnBH,EAAA,EAAG;MACF,GAAGE;IAAA,CACN,GACA,eAAAb,GAAA,CAACH,MAAA;MACCoB,OAAA,EAAQ;MACRL,IAAA,EAAK;MACLM,KAAA,EAAQ,SAASJ,QAAA;MACjBH,EAAA,EAAG;MACF,GAAGE;IAAA,CACN,GACA,eAAAb,GAAA,CAACH,MAAA;MACCoB,OAAA,EAAQ;MACRL,IAAA,EAAK;MACLM,KAAA,EAAQ,QAAQJ,QAAA;MAChBH,EAAA,EAAG;MACF,GAAGE;IAAA,CACN,GACA,eAAAb,GAAA,CAACH,MAAA;MACCoB,OAAA,EAAQ;MACRL,IAAA,EAAK;MACLM,KAAA,EAAOL,KAAA,CAAMC,QAAA;MACbH,EAAA,EAAG;MACF,GAAGE;IAAA,CACN,GACA,eAAAb,GAAA,CAACH,MAAA;MACCoB,OAAA,EAAQ;MACRL,IAAA,EAAK;MACLM,KAAA,EAAQ,WAAWJ,QAAA;MACnBH,EAAA,EAAG;MACF,GAAGE;IAAA,CACN,GACA,eAAAb,GAAA,CAACH,MAAA;MACCoB,OAAA,EAAQ;MACRL,IAAA,EAAK;MACLM,KAAA,EAAQ,WAAWJ,QAAA;MACnBH,EAAA,EAAG;MACF,GAAGE;IAAA,CACN,GACA,eAAAb,GAAA,CAACH,MAAA;MACCoB,OAAA,EAAQ;MACRL,IAAA,EAAK;MACLM,KAAA,EAAQ,UAAUJ,QAAA;MAClBH,EAAA,EAAG;MACF,GAAGE;IAAA,CACN;EAAA,CACF;AAEJ","ignoreList":[]}