@hanzogui/demos 2.0.0

package/dist/cjs/TabsDemo.native.js

@@ -0,0 +1,225 @@
+"use strict";
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf,
+  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+    value: mod,
+    enumerable: !0
+  }) : target, mod)),
+  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+    value: !0
+  }), mod);
+var TabsDemo_exports = {};
+__export(TabsDemo_exports, {
+  TabsDemo: () => TabsDemo
+});
+module.exports = __toCommonJS(TabsDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_react = __toESM(require("react"), 1),
+  import_gui = require("@hanzo/gui"),
+  demos = ["horizontal", "vertical"],
+  demosTitle = {
+    horizontal: "Horizontal",
+    vertical: "Vertical"
+  };
+function TabsDemo() {
+  var [demoIndex, setDemoIndex] = import_react.default.useState(0),
+    demo = demos[demoIndex];
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+    px: "$4",
+    ...(import_gui.isWeb && {
+      position: "unset"
+    }),
+    children: [demo === "horizontal" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(HorizontalTabs, {}) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(VerticalTabs, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.XStack, {
+      items: "center",
+      gap: "$4",
+      position: "absolute",
+      b: "$3",
+      l: "$4",
+      $maxXs: {
+        display: "none"
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+        size: "$2",
+        onPress: function () {
+          return setDemoIndex(function (x) {
+            return (x + 1) % demos.length;
+          });
+        },
+        children: demosTitle[demo]
+      })
+    })]
+  });
+}
+var HorizontalTabs = function () {
+    var {
+      width
+    } = (0, import_gui.useWindowDimensions)();
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Tabs, {
+      defaultValue: "tab1",
+      orientation: "horizontal",
+      flexDirection: "column",
+      $maxMd: {
+        width: width - 32
+      },
+      width: 400,
+      height: 150,
+      rounded: "$4",
+      borderWidth: "$0.25",
+      borderColor: "$borderColor",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Tabs.List, {
+        "aria-label": "Manage your account",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Tabs.Tab, {
+          activeStyle: {
+            backgroundColor: "$color3"
+          },
+          flex: 1,
+          value: "tab1",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.SizableText, {
+            fontFamily: "$body",
+            text: "center",
+            ellipsis: !0,
+            children: "Profile"
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Tabs.Tab, {
+          activeStyle: {
+            backgroundColor: "$color3"
+          },
+          flex: 1,
+          value: "tab2",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.SizableText, {
+            fontFamily: "$body",
+            text: "center",
+            ellipsis: !0,
+            children: "Connections"
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Tabs.Tab, {
+          activeStyle: {
+            backgroundColor: "$color3"
+          },
+          flex: 1,
+          value: "tab3",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.SizableText, {
+            fontFamily: "$body",
+            text: "center",
+            ellipsis: !0,
+            children: "Notifications"
+          })
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsContent, {
+        value: "tab1",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.H5, {
+          children: "Profile"
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsContent, {
+        value: "tab2",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.H5, {
+          children: "Connections"
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsContent, {
+        value: "tab3",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.H5, {
+          children: "Notifications"
+        })
+      })]
+    });
+  },
+  VerticalTabs = function () {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Tabs, {
+      defaultValue: "tab1",
+      flexDirection: "row",
+      orientation: "vertical",
+      width: 400,
+      rounded: "$4",
+      borderWidth: "$0.25",
+      overflow: "hidden",
+      borderColor: "$borderColor",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Tabs.List, {
+        "aria-label": "Manage your account",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Tabs.Tab, {
+          activeStyle: {
+            backgroundColor: "$color3"
+          },
+          value: "tab1",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.SizableText, {
+            children: "Profile"
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Tabs.Tab, {
+          activeStyle: {
+            backgroundColor: "$color3"
+          },
+          value: "tab2",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.SizableText, {
+            children: "Connections"
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Tabs.Tab, {
+          activeStyle: {
+            backgroundColor: "$color3"
+          },
+          value: "tab3",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.SizableText, {
+            children: "Notifications"
+          })
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Separator, {
+        vertical: !0
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsContent, {
+        value: "tab1",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.H5, {
+          text: "center",
+          children: "Profile"
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsContent, {
+        value: "tab2",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.H5, {
+          text: "center",
+          children: "Connections"
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsContent, {
+        value: "tab3",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.H5, {
+          text: "center",
+          children: "Notifications"
+        })
+      })]
+    });
+  },
+  TabsContent = function (props) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.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");
+  };
+//# sourceMappingURL=TabsDemo.native.js.map

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

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

package/dist/cjs/TabsHeadlessDemo.cjs

@@ -0,0 +1,130 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var TabsHeadlessDemo_exports = {};
+__export(TabsHeadlessDemo_exports, {
+  ContentFrame: () => ContentFrame,
+  CustomTabs: () => CustomTabs,
+  TabFrame: () => TabFrame,
+  TabsFrame: () => TabsFrame,
+  TabsHeadlessDemo: () => TabsHeadlessDemo
+});
+module.exports = __toCommonJS(TabsHeadlessDemo_exports);
+var import_react = require("react"),
+  import_gui = require("@hanzo/gui"),
+  import_tabs = require("@hanzogui/tabs"),
+  import_get_button_sized = require("@hanzogui/get-button-sized"),
+  import_jsx_runtime =
+  // web only fix for position relative
+  require("react/jsx-runtime");
+const demos = ["horizontal", "vertical"],
+  TabsFrame = (0, import_gui.styled)(import_gui.SizableStack, {
+    name: "TabsFrame"
+  }),
+  TabFrame = (0, import_gui.styled)(import_gui.ThemeableStack, {
+    name: "TabsTrigger",
+    render: "button",
+    cursor: "pointer",
+    backgroundColor: "transparent",
+    variants: {
+      size: {
+        "...size": import_get_button_sized.getButtonSized
+      },
+      disabled: {
+        true: {
+          pointerEvents: "none"
+        }
+      },
+      active: {
+        true: {
+          hoverStyle: {
+            backgroundColor: "$background"
+          },
+          focusStyle: {
+            backgroundColor: "$background"
+          }
+        }
+      }
+    }
+  }),
+  CONTENT_NAME = "TabsContent",
+  ContentFrame = (0, import_gui.styled)(import_gui.ThemeableStack, {
+    name: CONTENT_NAME,
+    flex: 1,
+    p: "$6",
+    justify: "center",
+    items: "center",
+    bg: "$color4",
+    rounded: "$4"
+  }),
+  CustomTabs = (0, import_tabs.createTabs)({
+    TabsFrame,
+    TabFrame,
+    ContentFrame
+  });
+function TabsHeadlessDemo() {
+  const [demo, setDemo] = (0, import_react.useState)(demos[0]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+    px: "$4",
+    ...(import_gui.isWeb && {
+      position: "static"
+    }),
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsView, {
+      flexDirection: demo === "horizontal" ? "row" : "column"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.XStack, {
+      items: "center",
+      gap: "$4",
+      position: "absolute",
+      b: "$3",
+      l: "$4",
+      $xxs: {
+        display: "none"
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+        size: "$2",
+        onPress: () => setDemo(demo === "horizontal" ? "vertical" : "horizontal"),
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button.Text, {
+          textTransform: "capitalize",
+          children: demo
+        })
+      })
+    })]
+  });
+}
+const content = ["Home", "Profile", "Settings"],
+  TabsView = ({
+    flexDirection = "row"
+  }) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(CustomTabs, {
+    flexDirection: flexDirection === "column" ? "row" : "column",
+    defaultValue: content[0],
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(CustomTabs.List, {
+      flexDirection,
+      children: content.map((name, index) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(CustomTabs.Tab, {
+        value: name,
+        activeStyle: {
+          backgroundColor: "transparent"
+        },
+        children: name
+      }, index))
+    }), content.map((name, index) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(CustomTabs.Content, {
+      value: name,
+      children: name
+    }, index))]
+  });

package/dist/cjs/TabsHeadlessDemo.native.js

@@ -0,0 +1,144 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var TabsHeadlessDemo_exports = {};
+__export(TabsHeadlessDemo_exports, {
+  ContentFrame: () => ContentFrame,
+  CustomTabs: () => CustomTabs,
+  TabFrame: () => TabFrame,
+  TabsFrame: () => TabsFrame,
+  TabsHeadlessDemo: () => TabsHeadlessDemo
+});
+module.exports = __toCommonJS(TabsHeadlessDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_react = require("react"),
+  import_gui = require("@hanzo/gui"),
+  import_tabs = require("@hanzogui/tabs"),
+  import_get_button_sized = require("@hanzogui/get-button-sized"),
+  demos = ["horizontal", "vertical"],
+  TabsFrame = (0, import_gui.styled)(import_gui.SizableStack, {
+    name: "TabsFrame"
+  }),
+  TabFrame = (0, import_gui.styled)(import_gui.ThemeableStack, {
+    name: "TabsTrigger",
+    render: "button",
+    cursor: "pointer",
+    backgroundColor: "transparent",
+    variants: {
+      size: {
+        "...size": import_get_button_sized.getButtonSized
+      },
+      disabled: {
+        true: {
+          pointerEvents: "none"
+        }
+      },
+      active: {
+        true: {
+          hoverStyle: {
+            backgroundColor: "$background"
+          },
+          focusStyle: {
+            backgroundColor: "$background"
+          }
+        }
+      }
+    }
+  }),
+  CONTENT_NAME = "TabsContent",
+  ContentFrame = (0, import_gui.styled)(import_gui.ThemeableStack, {
+    name: CONTENT_NAME,
+    flex: 1,
+    p: "$6",
+    justify: "center",
+    items: "center",
+    bg: "$color4",
+    rounded: "$4"
+  }),
+  CustomTabs = (0, import_tabs.createTabs)({
+    TabsFrame,
+    TabFrame,
+    ContentFrame
+  });
+function TabsHeadlessDemo() {
+  var [demo, setDemo] = (0, import_react.useState)(demos[0]);
+  return (
+    // web only fix for position relative
+    /* @__PURE__ */
+    (0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+      px: "$4",
+      ...(import_gui.isWeb && {
+        position: "static"
+      }),
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsView, {
+        flexDirection: demo === "horizontal" ? "row" : "column"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.XStack, {
+        items: "center",
+        gap: "$4",
+        position: "absolute",
+        b: "$3",
+        l: "$4",
+        $xxs: {
+          display: "none"
+        },
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+          size: "$2",
+          onPress: function () {
+            return setDemo(demo === "horizontal" ? "vertical" : "horizontal");
+          },
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button.Text, {
+            textTransform: "capitalize",
+            children: demo
+          })
+        })
+      })]
+    })
+  );
+}
+var content = ["Home", "Profile", "Settings"],
+  TabsView = function (param) {
+    var {
+      flexDirection = "row"
+    } = param;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(CustomTabs, {
+      flexDirection: flexDirection === "column" ? "row" : "column",
+      defaultValue: content[0],
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(CustomTabs.List, {
+        flexDirection,
+        children: content.map(function (name, index) {
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CustomTabs.Tab, {
+            value: name,
+            activeStyle: {
+              backgroundColor: "transparent"
+            },
+            children: name
+          }, index);
+        })
+      }), content.map(function (name, index) {
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CustomTabs.Content, {
+          value: name,
+          children: name
+        }, index);
+      })]
+    });
+  };
+//# sourceMappingURL=TabsHeadlessDemo.native.js.map

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

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

package/dist/cjs/TextDemo.cjs

@@ -0,0 +1,49 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var TextDemo_exports = {};
+__export(TextDemo_exports, {
+  TextDemo: () => TextDemo
+});
+module.exports = __toCommonJS(TextDemo_exports);
+var import_gui = require("@hanzo/gui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function TextDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+    gap: "$2",
+    items: "center",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.SizableText, {
+      size: "$3",
+      children: "SizableText"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Paragraph, {
+      size: "$2",
+      fontWeight: "800",
+      children: "Paragraph"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Paragraph, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Strong, {
+        children: "Strong"
+      }), ", ", /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Em, {
+        children: "Em"
+      }), ", ", /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Span, {
+        children: "Span"
+      })]
+    })]
+  });
+}

package/dist/cjs/TextDemo.native.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var TextDemo_exports = {};
+__export(TextDemo_exports, {
+  TextDemo: () => TextDemo
+});
+module.exports = __toCommonJS(TextDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_gui = require("@hanzo/gui");
+function TextDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+    gap: "$2",
+    items: "center",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.SizableText, {
+      size: "$3",
+      children: "SizableText"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Paragraph, {
+      size: "$2",
+      fontWeight: "800",
+      children: "Paragraph"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Paragraph, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Strong, {
+        children: "Strong"
+      }), ", ", /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Em, {
+        children: "Em"
+      }), ", ", /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Span, {
+        children: "Span"
+      })]
+    })]
+  });
+}
+//# sourceMappingURL=TextDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","TextDemo_exports","__export","TextDemo","module","exports","import_jsx_runtime","require","import_gui","jsxs","YStack","gap","items","children","jsx","SizableText","size","Paragraph","fontWeight"],"sources":["../../src/TextDemo.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,gBAAA;AAAAC,QAAA,CAAAD,gBAAA;EAAAE,QAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAiET,YAAA,CAAAK,gBAK3D;AAHC,IAAAK,kBAAoB,GAAAC,OAAA;EAAAC,UAAA,GAAAD,OAAA;AACzB,SACEJ,SAAA;EACE,0BAAAG,kBAAA,CAACG,IAAA,EAAAD,UAAA,CAAAE,MAAA;IACDC,GAAA;IAGAC,KAAA;IACEC,QAAA,GAAuB,mBAAAP,kBAAA,CAAAQ,GAAA,EAAAN,UAAA,CAAAO,WAAA;MAAEC,IAAA;MAAWH,QAAA;IAAE,IAAU,eAClD,IAAAP,kBAAA,CAAAQ,GAAA,EAAAN,UAAA,CAAAS,SAAA;MACFD,IAAA;MAEJE,UAAA","ignoreList":[]}