@hanzogui/demos 2.0.0

package/dist/cjs/ToggleGroupDemo.native.js

@@ -0,0 +1,123 @@
+"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 ToggleGroupDemo_exports = {};
+__export(ToggleGroupDemo_exports, {
+  ToggleGroupDemo: () => ToggleGroupDemo
+});
+module.exports = __toCommonJS(ToggleGroupDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_lucide_icons_2 = require("@hanzogui/lucide-icons-2"),
+  import_gui = require("@hanzo/gui");
+function ToggleGroupDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+    px: "$4",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+      items: "center",
+      gap: "$10",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+        items: "center",
+        gap: "$6",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupComponent, {
+          type: "single",
+          orientation: "horizontal"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupComponent, {
+          type: "multiple",
+          orientation: "horizontal"
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+        items: "center",
+        gap: "$6",
+        y: -28,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupComponent, {
+          type: "single",
+          orientation: "vertical"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupComponent, {
+          type: "multiple",
+          orientation: "vertical"
+        })]
+      })]
+    })
+  });
+}
+function ToggleGroupComponent(props) {
+  var id = `switch-${props.type}`,
+    Group = props.orientation === "horizontal" ? import_gui.XGroup : import_gui.YGroup;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+    flexDirection: props.orientation === "horizontal" ? "row" : "column",
+    items: "center",
+    justify: "center",
+    gap: "$4",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Label, {
+      pr: "$0",
+      justify: "flex-end",
+      size: "$4",
+      htmlFor: id,
+      children: props.type === "single" ? "Single" : "Multiple"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.ToggleGroup, {
+      orientation: props.orientation,
+      id,
+      type: props.type,
+      disableDeactivation: props.type === "single" ? !0 : void 0,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(Group, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(Group.Item, {
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.ToggleGroup.Item, {
+            value: "left",
+            "aria-label": "Left aligned",
+            borderRadius: "$4",
+            activeStyle: {
+              backgroundColor: "$color5"
+            },
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.AlignLeft, {
+              size: 16
+            })
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Group.Item, {
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.ToggleGroup.Item, {
+            value: "center",
+            "aria-label": "Center aligned",
+            borderRadius: "$4",
+            activeStyle: {
+              backgroundColor: "$color5"
+            },
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.AlignCenter, {
+              size: 16
+            })
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Group.Item, {
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.ToggleGroup.Item, {
+            value: "right",
+            "aria-label": "Right aligned",
+            borderRadius: "$4",
+            activeStyle: {
+              backgroundColor: "$color5"
+            },
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.AlignRight, {
+              size: 16
+            })
+          })
+        })]
+      })
+    })]
+  });
+}
+//# sourceMappingURL=ToggleGroupDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","ToggleGroupDemo_exports","__export","ToggleGroupDemo","module","exports","import_jsx_runtime","require","import_lucide_icons_2","import_gui","jsx","YStack","px","children","jsxs","XStack","items","gap","ToggleGroupComponent","type","orientation","y","props","id","Group","XGroup","YGroup","flexDirection","justify","Label","pr","size","htmlFor","ToggleGroup","disableDeactivation","Item","borderRadius"],"sources":["../../src/ToggleGroupDemo.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,uBAAA;AAAAC,QAAA,CAAAD,uBAAA;EAAAE,eAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAAmD,CAAAK,uBAAA;AAG5C,IAAAK,kBAAS,GAAAC,OAAkB;EAAAC,qBAAA,GAAAD,OAAA;EAAAE,UAAA,GAAAF,OAAA;AAChC,SACEJ,gBAAA;EAEI,0BAAAG,kBAAA,CAAAI,GAAC,EAAAD,UAAA,CAAAE,MAAO;IACNC,EAAA;IAA6DC,QAC7D,qBAAAP,kBAAC,CAAAQ,IAAA,EAAAL,UAAA,CAAAM,MAAqB;MAAyCC,KACjE;MACAC,GAAA;MACEJ,QAAA,GACA,mBAAAP,kBAAA,CAAAQ,IAAC,EAAAL,UAAA,CAAAE,MAAA;QACHK,KAAA;QAEJC,GAAA;QAEJJ,QAAA,GAES,iBAAqB,EAAAP,kBAG3B,CAAAI,GAAA,EAAAQ,oBAAA;UACUC,IAAA,UAAU;UAInBC,WAAA;QAAC,uBAAAd,kBAAA,CAAAI,GAAA,EAAAQ,oBAAA;UACCC,IAAA,YAAqB;UACfC,WAAA;QACN;MAGA,uBAAAd,kBAAA,CAAAQ,IAAA,EAACL,UAAA,CAAAM,MAAA,EAAM;QAIPC,KAAA;QAACC,GAAA;QAAAI,CAAA;QAAAR,QACC,GACA,mBAAAP,kBAAA,CAAAI,GAAA,EAAAQ,oBAAA;UACAC,IAAM,UAAM;UACZC,WAAA;QAEA,IACE,mBAAAd,kBAAA,CAAAI,GAAA,EAAAQ,oBACE;UAAAC,IAAC;UAAYC,WAAZ;QAAA;MAEY;IAE+B;EAErB;AAAA;AAEzB,SAAAF,oBAEAA,CAAAI,KAAA;EACE,IAAAC,EAAA,aAACD,KAAA,CAAAH,IAAA;IAAAK,KAAY,GAAAF,KAAA,CAAAF,WAAA,oBAAAX,UAAA,CAAAgB,MAAA,GAAAhB,UAAA,CAAAiB,MAAA;EAAA,sBAAZ,IAAApB,kBAAA,CAAAQ,IAAA,EAAAL,UAAA,CAAAM,MAAA;IAAAY,aAAA,EACCL,KAAA,CAAMF,WAAA;IAAAJ,KAAA,UACN;IAAWY,OAAA,UACX;IAAaX,GAAA;IAC6BJ,QAAA,GAEnB,mBAAAP,kBAAA,CAAAI,GAAA,EAAAD,UAAA,CAAAoB,KAAA;MAAAC,EAAA,MACzB;MACFF,OAEA;MACEG,IAAA,MAAC;MAAYC,OAAA,EAAZT,EAAA;MAAAV,QAAA,EACCS,KAAA,CAAAH,IAAM;IAAA,IACK,eACX,IAAAb,kBAAa,CAAAI,GAAA,EAAAD,UAAA,CAAAwB,WAAA;MAAAb,WACb,EAAAE,KAAA,CAAAF,WAAe;MAA2BG,EAAA;MAEpBJ,IAAA,EAAAG,KAAA,CAAAH,IAAA;MAAAe,mBAE1B,EAAAZ,KAAA,CAAAH,IAAA;MAAAN,QACF,qBAAAP,kBAAA,CAAAQ,IAAA,EAAAU,KAAA;QAAAX,QAAA,GACF,mBAAAP,kBAAA,CAAAI,GAAA,EAAAc,KAAA,CAAAW,IAAA;UAAAtB,QAAA,qBAAAP,kBAAA,CAAAI,GAAA,EAAAD,UAAA,CAAAwB,WAAA,CAAAE,IAAA;YAAAnC,KAAA;YACF;YAEJoC,YAAA","ignoreList":[]}

package/dist/cjs/TokensDemo.cjs

@@ -0,0 +1,123 @@
+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 TokensDemo_exports = {};
+__export(TokensDemo_exports, {
+  TokensDemo: () => TokensDemo
+});
+module.exports = __toCommonJS(TokensDemo_exports);
+var import_core = require("@hanzogui/core"),
+  import_react = __toESM(require("react"), 1),
+  import_gui = require("@hanzo/gui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+const sections = [{
+  name: "Size",
+  key: "size"
+}, {
+  name: "Space",
+  key: "space"
+}, {
+  name: "Space (-)",
+  key: "spaceNegative"
+}, {
+  name: "Radius",
+  key: "radius"
+}];
+function TokensDemo() {
+  const [section, setSection] = import_react.default.useState("size");
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+    gap: "$4",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.XGroup, {
+      items: "center",
+      self: "center",
+      children: sections.map(({
+        name,
+        key
+      }) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.XGroup.Item, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+          size: "$3",
+          theme: section === key ? "accent" : null,
+          onPress: () => setSection(key),
+          children: name
+        })
+      }, key))
+    }), (section === "size" || section === "spaceNegative" || section === "space" || section === "radius") && /* @__PURE__ */(0, import_jsx_runtime.jsx)(SizeSection, {
+      section
+    })]
+  });
+}
+function SizeSection({
+  section
+}) {
+  const allTokens = (0, import_core.getConfig)().tokens,
+    tokens = allTokens[section.startsWith("space") ? "space" : section],
+    st = Object.keys(tokens).sort((a, b) => Number.parseFloat(a) > Number.parseFloat(b) ? 1 : -1),
+    spaceTokens = st.filter(t => Number.parseFloat(t) >= 0),
+    spaceTokensNegative = st.filter(t => Number.parseFloat(t) < 0).sort((a, b) => Number.parseFloat(a) > Number.parseFloat(b) ? -1 : 1);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+    flex: 1,
+    gap: "$4",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.H2, {
+      children: "Sizes"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+      width: "100%",
+      gap: "$2",
+      children: (section === "spaceNegative" ? spaceTokensNegative : spaceTokens).map(token => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+        width: "100%",
+        items: "center",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+          width: "25%",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.H3, {
+            size: "$6",
+            children: ["$", token]
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+          width: "20%",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.H4, {
+            size: "$5",
+            children: [tokens[token]?.val, "px"]
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+          size: tokens[token]?.val,
+          backgroundColor: "$color5",
+          ...(section === "spaceNegative" && {
+            backgroundColor: "$red5",
+            size: -tokens[spaceTokensNegative.find(t => Number.parseFloat(t) === -Number.parseFloat(token)) ?? token]?.val
+          }),
+          ...(section === "radius" && {
+            size: allTokens.size[token]?.val,
+            borderRadius: tokens[token]?.val
+          })
+        })]
+      }, token))
+    })]
+  });
+}

package/dist/cjs/TokensDemo.native.js

@@ -0,0 +1,145 @@
+"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 TokensDemo_exports = {};
+__export(TokensDemo_exports, {
+  TokensDemo: () => TokensDemo
+});
+module.exports = __toCommonJS(TokensDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_core = require("@hanzogui/core"),
+  import_react = __toESM(require("react"), 1),
+  import_gui = require("@hanzo/gui"),
+  sections = [{
+    name: "Size",
+    key: "size"
+  }, {
+    name: "Space",
+    key: "space"
+  }, {
+    name: "Space (-)",
+    key: "spaceNegative"
+  }, {
+    name: "Radius",
+    key: "radius"
+  }];
+function TokensDemo() {
+  var [section, setSection] = import_react.default.useState("size");
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+    gap: "$4",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.XGroup, {
+      items: "center",
+      self: "center",
+      children: sections.map(function (param) {
+        var {
+          name,
+          key
+        } = param;
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.XGroup.Item, {
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+            size: "$3",
+            theme: section === key ? "accent" : null,
+            onPress: function () {
+              return setSection(key);
+            },
+            children: name
+          })
+        }, key);
+      })
+    }), (section === "size" || section === "spaceNegative" || section === "space" || section === "radius") && /* @__PURE__ */(0, import_jsx_runtime.jsx)(SizeSection, {
+      section
+    })]
+  });
+}
+function SizeSection(param) {
+  var {
+      section
+    } = param,
+    allTokens = (0, import_core.getConfig)().tokens,
+    tokens = allTokens[section.startsWith("space") ? "space" : section],
+    st = Object.keys(tokens).sort(function (a, b) {
+      return Number.parseFloat(a) > Number.parseFloat(b) ? 1 : -1;
+    }),
+    spaceTokens = st.filter(function (t) {
+      return Number.parseFloat(t) >= 0;
+    }),
+    spaceTokensNegative = st.filter(function (t) {
+      return Number.parseFloat(t) < 0;
+    }).sort(function (a, b) {
+      return Number.parseFloat(a) > Number.parseFloat(b) ? -1 : 1;
+    });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+    flex: 1,
+    gap: "$4",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.H2, {
+      children: "Sizes"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+      width: "100%",
+      gap: "$2",
+      children: (section === "spaceNegative" ? spaceTokensNegative : spaceTokens).map(function (token) {
+        var _tokens_token, _tokens_token1, _tokens_, _allTokens_size_token, _tokens_token2, _spaceTokensNegative_find;
+        return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+          width: "100%",
+          items: "center",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+            width: "25%",
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.H3, {
+              size: "$6",
+              children: ["$", token]
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+            width: "20%",
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.H4, {
+              size: "$5",
+              children: [(_tokens_token = tokens[token]) === null || _tokens_token === void 0 ? void 0 : _tokens_token.val, "px"]
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+            size: (_tokens_token1 = tokens[token]) === null || _tokens_token1 === void 0 ? void 0 : _tokens_token1.val,
+            backgroundColor: "$color5",
+            ...(section === "spaceNegative" && {
+              backgroundColor: "$red5",
+              size: -((_tokens_ = tokens[(_spaceTokensNegative_find = spaceTokensNegative.find(function (t) {
+                return Number.parseFloat(t) === -Number.parseFloat(token);
+              })) !== null && _spaceTokensNegative_find !== void 0 ? _spaceTokensNegative_find : token]) === null || _tokens_ === void 0 ? void 0 : _tokens_.val)
+            }),
+            ...(section === "radius" && {
+              size: (_allTokens_size_token = allTokens.size[token]) === null || _allTokens_size_token === void 0 ? void 0 : _allTokens_size_token.val,
+              borderRadius: (_tokens_token2 = tokens[token]) === null || _tokens_token2 === void 0 ? void 0 : _tokens_token2.val
+            })
+          })]
+        }, token);
+      })
+    })]
+  });
+}
+//# sourceMappingURL=TokensDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","TokensDemo_exports","__export","TokensDemo","module","exports","import_jsx_runtime","require","import_core","import_react","__toESM","import_gui","sections","name","key","section","setSection","default","useState","jsxs","YStack","gap","children","jsx","XGroup","items","self","map","param","Item","Button","size","theme","onPress","SizeSection","allTokens","getConfig","tokens","startsWith","st","Object","keys","sort","a","b","Number","parseFloat","spaceTokens","filter","t","spaceTokensNegative","flex","H2","width","token","_tokens_token","_tokens_token1","_tokens_","_allTokens_size_token","_tokens_token2","_spaceTokensNegative_find","XStack"],"sources":["../../src/TokensDemo.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/TooltipDemo.cjs

@@ -0,0 +1,131 @@
+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 TooltipDemo_exports = {};
+__export(TooltipDemo_exports, {
+  TooltipDemo: () => TooltipDemo
+});
+module.exports = __toCommonJS(TooltipDemo_exports);
+var import_lucide_icons_2 = require("@hanzogui/lucide-icons-2"),
+  import_gui = require("@hanzo/gui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function TooltipDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Theme, {
+    name: "surface2",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.TooltipGroup, {
+      delay: {
+        open: 300,
+        close: 100
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+        gap: "$2",
+        self: "center",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+          gap: "$2",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(Demo, {
+            groupId: "0",
+            placement: "top-end",
+            Icon: import_lucide_icons_2.Circle
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Demo, {
+            groupId: "1",
+            placement: "top",
+            Icon: import_lucide_icons_2.ChevronUp
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Demo, {
+            groupId: "2",
+            placement: "top-start",
+            Icon: import_lucide_icons_2.Circle
+          })]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+          gap: "$2",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(Demo, {
+            groupId: "3",
+            placement: "left",
+            Icon: import_lucide_icons_2.ChevronLeft
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+            flex: 1
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Demo, {
+            groupId: "4",
+            placement: "right",
+            Icon: import_lucide_icons_2.ChevronRight
+          })]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+          gap: "$2",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(Demo, {
+            groupId: "5",
+            placement: "bottom-end",
+            Icon: import_lucide_icons_2.Circle
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Demo, {
+            groupId: "6",
+            placement: "bottom",
+            Icon: import_lucide_icons_2.ChevronDown
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Demo, {
+            groupId: "7",
+            placement: "bottom-start",
+            Icon: import_lucide_icons_2.Circle
+          })]
+        })]
+      })
+    })
+  });
+}
+function Demo({
+  Icon,
+  ...props
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Tooltip, {
+    ...props,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Tooltip.Trigger, {
+      asChild: !0,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+        icon: Icon,
+        circular: !0
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Tooltip.Content, {
+      enterStyle: {
+        x: 0,
+        y: -5,
+        opacity: 0,
+        scale: 0.9
+      },
+      exitStyle: {
+        x: 0,
+        y: -5,
+        opacity: 0,
+        scale: 0.9
+      },
+      scale: 1,
+      x: 0,
+      y: 0,
+      opacity: 1,
+      py: "$2",
+      px: "$3",
+      transition: ["quick", {
+        opacity: {
+          overshootClamping: !0
+        }
+      }],
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Tooltip.Arrow, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Paragraph, {
+        size: "$2",
+        lineHeight: "$1",
+        children: "Hello world"
+      })]
+    })]
+  });
+}

package/dist/cjs/TooltipDemo.native.js

@@ -0,0 +1,135 @@
+"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 TooltipDemo_exports = {};
+__export(TooltipDemo_exports, {
+  TooltipDemo: () => TooltipDemo
+});
+module.exports = __toCommonJS(TooltipDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_lucide_icons_2 = require("@hanzogui/lucide-icons-2"),
+  import_gui = require("@hanzo/gui");
+function TooltipDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Theme, {
+    name: "surface2",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.TooltipGroup, {
+      delay: {
+        open: 300,
+        close: 100
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+        gap: "$2",
+        self: "center",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+          gap: "$2",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(Demo, {
+            groupId: "0",
+            placement: "top-end",
+            Icon: import_lucide_icons_2.Circle
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Demo, {
+            groupId: "1",
+            placement: "top",
+            Icon: import_lucide_icons_2.ChevronUp
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Demo, {
+            groupId: "2",
+            placement: "top-start",
+            Icon: import_lucide_icons_2.Circle
+          })]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+          gap: "$2",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(Demo, {
+            groupId: "3",
+            placement: "left",
+            Icon: import_lucide_icons_2.ChevronLeft
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+            flex: 1
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Demo, {
+            groupId: "4",
+            placement: "right",
+            Icon: import_lucide_icons_2.ChevronRight
+          })]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+          gap: "$2",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(Demo, {
+            groupId: "5",
+            placement: "bottom-end",
+            Icon: import_lucide_icons_2.Circle
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Demo, {
+            groupId: "6",
+            placement: "bottom",
+            Icon: import_lucide_icons_2.ChevronDown
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Demo, {
+            groupId: "7",
+            placement: "bottom-start",
+            Icon: import_lucide_icons_2.Circle
+          })]
+        })]
+      })
+    })
+  });
+}
+function Demo(param) {
+  var {
+    Icon,
+    ...props
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Tooltip, {
+    ...props,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Tooltip.Trigger, {
+      asChild: !0,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+        icon: Icon,
+        circular: !0
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Tooltip.Content, {
+      enterStyle: {
+        x: 0,
+        y: -5,
+        opacity: 0,
+        scale: 0.9
+      },
+      exitStyle: {
+        x: 0,
+        y: -5,
+        opacity: 0,
+        scale: 0.9
+      },
+      scale: 1,
+      x: 0,
+      y: 0,
+      opacity: 1,
+      py: "$2",
+      px: "$3",
+      transition: ["quick", {
+        opacity: {
+          overshootClamping: !0
+        }
+      }],
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Tooltip.Arrow, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Paragraph, {
+        size: "$2",
+        lineHeight: "$1",
+        children: "Hello world"
+      })]
+    })]
+  });
+}
+//# sourceMappingURL=TooltipDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","TooltipDemo_exports","__export","TooltipDemo","module","exports","import_jsx_runtime","require","import_lucide_icons_2","import_gui","jsx","Theme","name","children","TooltipGroup","delay","open","close","jsxs","YStack","gap","self","XStack","Demo","groupId","placement","Icon","Circle","ChevronUp","ChevronLeft","flex","ChevronRight"],"sources":["../../src/TooltipDemo.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,mBAAA;AAAAC,QAAA,CAAAD,mBAAA;EAAAE,WAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAMO,CAAAK,mBAAA;AAIA,IAAAK,kBAAS,GAAcC,OAAA;EAAAC,qBAAA,GAAAD,OAAA;EAAAE,UAAA,GAAAF,OAAA;AAC5B,SACEJ,YAAA;EAGM,0BAAAG,kBAAA,CAAAI,GAAC,EAAAD,UAAA,CAAAE,KAAA,EAAO;IACNC,IAAA;IAAoDC,QACpD,qBAAAP,kBAAC,CAAAI,GAAA,EAAKD,UAAQ,CAAAK,YAAI,EAAU;MAC5BC,KAAA;QACFC,IAAA;QACAC,KAAA;MACE;MACAJ,QAAA,qBAAAP,kBAAC,CAAAY,IAAA,EAAAT,UAAO,CAAAU,MAAM,EAAG;QACjBC,GAAA;QACFC,IAAA;QACAR,QAAA,GACE,mBAAAP,kBAAA,CAAAY,IAAC,EAAAT,UAAK,CAAAa,MAAY;UAClBF,GAAA;UACAP,QAAA,GACF,mBAAAP,kBAAA,CAAAI,GAAA,EAAAa,IAAA;YAGNC,OAAA;YAEJC,SAAA;YAEgBC,IAAA,EAAMlB,qBAA2C,CAAAmB;UAE7D,IACE,mBAAArB,kBAAC,CAAAI,GAAA,EAAAa,IAAA;YAGDC,OAAA;YAACC,SAAQ;YAARC,IAAA,EAAAlB,qBAAA,CAAAoB;UACC,IACA,eAAsB,IAAItB,kBAAY,CAAOI,GAAA,EAAIa,IAAA;YAC1CC,OAAA;YACJC,SAAA;YACAC,IAAA,EAAAlB,qBAAA,CAAAmB;UACH;QAEA,EAAG,EACH,eAAY,IAAArB,kBAAA,CAAAY,IAAA,EAAAT,UAAA,CAAAa,MAAA;UACVF,GAAA;UACAP,QAAA,GACE,eAAS,IAAAP,kBAAA,CAAAI,GAAA,EAAAa,IAAA;YACPC,OAAA;YACFC,SAAA;YACFC,IAAA,EAAAlB,qBAAA,CAAAqB;UACF,IAEA,mBAAAvB,kBAAA,CAAAI,GAAA,EAAAD,UAAA,CAAAU,MAAA;YAAAW,IAAA;UACA,IAEA,mBAAAxB,kBAAA,CAAAI,GAAA,EAAAa,IAAA;YAAAC,OAAA;YACFC,SAAA;YACFC,IAAA,EAAAlB,qBAAA,CAAAuB;UAEJ","ignoreList":[]}