@hanzogui/demos 2.0.0

package/dist/cjs/PopoverDemo.cjs

@@ -0,0 +1,150 @@
+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 PopoverDemo_exports = {};
+__export(PopoverDemo_exports, {
+  Demo: () => Demo,
+  PopoverDemo: () => PopoverDemo
+});
+module.exports = __toCommonJS(PopoverDemo_exports);
+var import_lucide_icons_2 = require("@hanzogui/lucide-icons-2"),
+  import_react = require("react"),
+  import_gui = require("@hanzo/gui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function PopoverDemo() {
+  const [shouldAdapt, setShouldAdapt] = (0, import_react.useState)(!0);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+    gap: "$4",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+      gap: "$2",
+      flex: 1,
+      justify: "center",
+      items: "center",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(Demo, {
+        shouldAdapt,
+        placement: "left",
+        Icon: import_lucide_icons_2.ChevronLeft,
+        Name: "left-popover"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Demo, {
+        shouldAdapt,
+        placement: "bottom",
+        Icon: import_lucide_icons_2.ChevronDown,
+        Name: "bottom-popover"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Demo, {
+        shouldAdapt,
+        placement: "top",
+        Icon: import_lucide_icons_2.ChevronUp,
+        Name: "top-popover"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Demo, {
+        shouldAdapt,
+        placement: "right",
+        Icon: import_lucide_icons_2.ChevronRight,
+        Name: "right-popover"
+      })]
+    }), !import_gui.isWeb && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Button, {
+      onPress: () => setShouldAdapt(!shouldAdapt),
+      children: ["Adapt to Sheet: ", `${shouldAdapt}`]
+    })]
+  });
+}
+function Demo({
+  Icon,
+  Name,
+  shouldAdapt,
+  ...props
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Popover, {
+    size: "$5",
+    allowFlip: !0,
+    stayInFrame: !0,
+    offset: 15,
+    resize: !0,
+    ...props,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Popover.Trigger, {
+      asChild: !0,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+        icon: Icon
+      })
+    }), shouldAdapt && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Adapt, {
+      when: "maxMd",
+      platform: "touch",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Sheet, {
+        transition: "medium",
+        modal: !0,
+        dismissOnSnapToBottom: !0,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Sheet.Frame, {
+          p: "$4",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Adapt.Contents, {})
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Sheet.Overlay, {
+          bg: "$shadowColor",
+          transition: "lazy",
+          enterStyle: {
+            opacity: 0
+          },
+          exitStyle: {
+            opacity: 0
+          }
+        })]
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Popover.Content, {
+      borderWidth: 1,
+      borderColor: "$borderColor",
+      width: 300,
+      height: 200,
+      enterStyle: {
+        y: -10,
+        opacity: 0
+      },
+      exitStyle: {
+        y: -10,
+        opacity: 0
+      },
+      boxShadow: "0px 4px 8px rgba(0,0,0,0.1), 0px 12px 32px rgba(0,0,0,0.08)",
+      transition: ["quick", {
+        opacity: {
+          overshootClamping: !0
+        }
+      }],
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Popover.Arrow, {
+        borderWidth: 1,
+        borderColor: "$borderColor"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+        gap: "$3",
+        mb: "$3",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Label, {
+          size: "$3",
+          htmlFor: Name,
+          children: "Name"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Input, {
+          flex: 1,
+          size: "$3",
+          id: Name
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Popover.Close, {
+        asChild: !0,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+          size: "$3",
+          onPress: () => {},
+          children: "Submit"
+        })
+      })]
+    })]
+  });
+}

package/dist/cjs/PopoverDemo.native.js

@@ -0,0 +1,157 @@
+"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 PopoverDemo_exports = {};
+__export(PopoverDemo_exports, {
+  Demo: () => Demo,
+  PopoverDemo: () => PopoverDemo
+});
+module.exports = __toCommonJS(PopoverDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_lucide_icons_2 = require("@hanzogui/lucide-icons-2"),
+  import_react = require("react"),
+  import_gui = require("@hanzo/gui");
+function PopoverDemo() {
+  var [shouldAdapt, setShouldAdapt] = (0, import_react.useState)(!0);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+    gap: "$4",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+      gap: "$2",
+      flex: 1,
+      justify: "center",
+      items: "center",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(Demo, {
+        shouldAdapt,
+        placement: "left",
+        Icon: import_lucide_icons_2.ChevronLeft,
+        Name: "left-popover"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Demo, {
+        shouldAdapt,
+        placement: "bottom",
+        Icon: import_lucide_icons_2.ChevronDown,
+        Name: "bottom-popover"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Demo, {
+        shouldAdapt,
+        placement: "top",
+        Icon: import_lucide_icons_2.ChevronUp,
+        Name: "top-popover"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Demo, {
+        shouldAdapt,
+        placement: "right",
+        Icon: import_lucide_icons_2.ChevronRight,
+        Name: "right-popover"
+      })]
+    }), !import_gui.isWeb && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Button, {
+      onPress: function () {
+        return setShouldAdapt(!shouldAdapt);
+      },
+      children: ["Adapt to Sheet: ", `${shouldAdapt}`]
+    })]
+  });
+}
+function Demo(param) {
+  var {
+    Icon,
+    Name,
+    shouldAdapt,
+    ...props
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Popover, {
+    size: "$5",
+    allowFlip: !0,
+    stayInFrame: !0,
+    offset: 15,
+    resize: !0,
+    ...props,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Popover.Trigger, {
+      asChild: !0,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+        icon: Icon
+      })
+    }), shouldAdapt && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Adapt, {
+      when: "maxMd",
+      platform: "touch",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Sheet, {
+        transition: "medium",
+        modal: !0,
+        dismissOnSnapToBottom: !0,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Sheet.Frame, {
+          p: "$4",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Adapt.Contents, {})
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Sheet.Overlay, {
+          bg: "$shadowColor",
+          transition: "lazy",
+          enterStyle: {
+            opacity: 0
+          },
+          exitStyle: {
+            opacity: 0
+          }
+        })]
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Popover.Content, {
+      borderWidth: 1,
+      borderColor: "$borderColor",
+      width: 300,
+      height: 200,
+      enterStyle: {
+        y: -10,
+        opacity: 0
+      },
+      exitStyle: {
+        y: -10,
+        opacity: 0
+      },
+      boxShadow: "0px 4px 8px rgba(0,0,0,0.1), 0px 12px 32px rgba(0,0,0,0.08)",
+      transition: ["quick", {
+        opacity: {
+          overshootClamping: !0
+        }
+      }],
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Popover.Arrow, {
+        borderWidth: 1,
+        borderColor: "$borderColor"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+        gap: "$3",
+        mb: "$3",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Label, {
+          size: "$3",
+          htmlFor: Name,
+          children: "Name"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Input, {
+          flex: 1,
+          size: "$3",
+          id: Name
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Popover.Close, {
+        asChild: !0,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+          size: "$3",
+          onPress: function () {},
+          children: (/* Custom code goes here, does not interfere with popover closure */
+          "Submit")
+        })
+      })]
+    })]
+  });
+}
+//# sourceMappingURL=PopoverDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","PopoverDemo_exports","__export","Demo","PopoverDemo","module","exports","import_jsx_runtime","require","import_lucide_icons_2","import_react","import_gui","shouldAdapt","setShouldAdapt","useState","jsxs","YStack","gap","children","XStack","flex","justify","items","jsx","placement","Icon","ChevronLeft","Name","ChevronDown","ChevronUp","ChevronRight","isWeb","Button","onPress","param","props","Popover","size","allowFlip","stayInFrame","offset","resize","Trigger","asChild","icon","Adapt","when","platform","Sheet","transition","modal","dismissOnSnapToBottom","Frame","p","Contents","Overlay","bg","enterStyle","opacity","exitStyle","Content","borderWidth","borderColor","width","height","y","boxShadow"],"sources":["../../src/PopoverDemo.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/ProgressDemo.cjs

@@ -0,0 +1,88 @@
+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 ProgressDemo_exports = {};
+__export(ProgressDemo_exports, {
+  ProgressDemo: () => ProgressDemo
+});
+module.exports = __toCommonJS(ProgressDemo_exports);
+var import_react = __toESM(require("react"), 1),
+  import_gui = require("@hanzo/gui"),
+  import_lucide_icons_2 = require("@hanzogui/lucide-icons-2"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function ProgressDemo() {
+  const [key, setKey] = import_react.default.useState(0),
+    [progress, setProgress] = import_react.default.useState(60),
+    [slider, setSlider] = import_react.default.useState([60]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+      height: 60,
+      items: "center",
+      gap: "$4",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Paragraph, {
+        height: 30,
+        opacity: 0.5,
+        children: ["Progress: ", progress]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Progress, {
+        theme: "surface2",
+        value: progress,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Progress.Indicator, {
+          backgroundColor: "$color",
+          transition: ["quicker", {
+            transform: {
+              overshootClamping: !0
+            }
+          }]
+        })
+      }, key)]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+      items: "center",
+      gap: "$2",
+      position: "absolute",
+      b: "$3",
+      l: "$4",
+      $xxs: {
+        display: "none"
+      },
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+        size: "$3",
+        icon: import_lucide_icons_2.Play,
+        onPress: () => setProgress(prev => (prev + 20) % 100)
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+        size: "$3",
+        icon: import_lucide_icons_2.RotateCcw,
+        onPress: () => {
+          setKey(Math.random()), setProgress(0), setSlider([0]);
+        }
+      })]
+    })]
+  });
+}

package/dist/cjs/ProgressDemo.native.js

@@ -0,0 +1,115 @@
+"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 ProgressDemo_exports = {};
+__export(ProgressDemo_exports, {
+  ProgressDemo: () => ProgressDemo
+});
+module.exports = __toCommonJS(ProgressDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_react = __toESM(require("react"), 1),
+  import_gui = require("@hanzo/gui"),
+  import_lucide_icons_2 = require("@hanzogui/lucide-icons-2");
+function ProgressDemo() {
+  var [key, setKey] = import_react.default.useState(0),
+    [progress, setProgress] = import_react.default.useState(60),
+    [slider, setSlider] = import_react.default.useState([60]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+      height: 60,
+      items: "center",
+      gap: "$4",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Paragraph, {
+        height: 30,
+        opacity: 0.5,
+        children: ["Progress: ", progress]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Progress, {
+        theme: "surface2",
+        value: progress,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Progress.Indicator, {
+          backgroundColor: "$color",
+          transition: ["quicker", {
+            transform: {
+              overshootClamping: !0
+            }
+          }]
+        })
+      }, key)]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+      items: "center",
+      gap: "$2",
+      position: "absolute",
+      b: "$3",
+      l: "$4",
+      $xxs: {
+        display: "none"
+      },
+      children: [
+      /* <Slider
+        size="$2"
+        theme="surface2"
+        width={130}
+        value={slider}
+        min={0}
+        max={100}
+        step={1}
+        onValueChange={([val]) => {
+          setProgress(val)
+          setSlider([val])
+        }}
+      >
+        <Slider.Track borderWidth={1} borderColor="$color5">
+          <Slider.TrackActive />
+        </Slider.Track>
+        <Slider.Thumb theme="accent" circular index={0} />
+      </Slider> */
+      /* @__PURE__ */
+      (0, import_jsx_runtime.jsx)(import_gui.Button, {
+        size: "$3",
+        icon: import_lucide_icons_2.Play,
+        onPress: function () {
+          return setProgress(function (prev) {
+            return (prev + 20) % 100;
+          });
+        }
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+        size: "$3",
+        icon: import_lucide_icons_2.RotateCcw,
+        onPress: function () {
+          setKey(Math.random()), setProgress(0), setSlider([0]);
+        }
+      })]
+    })]
+  });
+}
+//# sourceMappingURL=ProgressDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","ProgressDemo_exports","__export","ProgressDemo","module","exports","import_jsx_runtime","require","import_react","__toESM","import_gui","import_lucide_icons_2","key","setKey","default","useState","progress","setProgress","slider","setSlider","jsxs","Fragment","children","YStack","height","items","gap","Paragraph","opacity","jsx","Progress","theme","Indicator","backgroundColor","transition","transform","overshootClamping","XStack","position","b","l","$xxs","display"],"sources":["../../src/ProgressDemo.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAAA;EAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;IAAAC,KAAA;EAAA,IAAAH,GAAA;AAAA,IAAAI,oBAAA;AAAAC,QAAA,CAAAD,oBAAA;EAAAE,YAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAAkB,CAAAK,oBAClB;AAGO,IAAAK,kBAAS,GAAeC,OAAA;EAAAC,YAAA,GAAAC,OAAA,CAAAF,OAAA;EAAAG,UAAA,GAAAH,OAAA;EAAAI,qBAAA,GAAAJ,OAAA;AAC7B,SAAOJ,YAAWA,CAAA,EAAI;EAItB,KAAAS,GACE,EAAAC,MAAA,IAAAL,YAAA,CAAAM,OAAA,CAAAC,QAAA;IAAA,CAAAC,QAAA,EAAAC,WAAA,IAAAT,YACE,CAAAM,OAAA,CAAAC,QAAA;IAAA,CAAAG,MAAA,EAAAC,SAAA,IAAAX,YAAA,CAAAM,OAAA,CAAAC,QAAA,KACE;EAAqC,0BAAAT,kBAAA,CAAAc,IAAA,EAAAd,kBAAA,CAAAe,QAAA;IAAAC,QACxB,kBACb,IAAAhB,kBAAA,CAAAc,IAAA,EAAAV,UAAA,CAAAa,MAAA;MAEAC,MAAA;MACGC,KAAA;MAAAC,GAAA;MAAAJ,QACC,GACA,eAAY,IAAAhB,kBAAA,CAAAc,IAAA,EAAAV,UAAA,CAAAiB,SAAA;QACVH,MAAA;QACAI,OAAA;QAAAN,QACE,GAAW,YACT,EACFN,QAAA;MAEJ,uBAAAV,kBAAA,CAAAuB,GAAA,EAAAnB,UAAA,CAAAoB,QAAA;QAVWC,KAYf;QACF/B,KAAA,EAAAgB,QAAA;QAEAM,QAAA,qBAAAhB,kBAAA,CAAAuB,GAAA,EAAAnB,UAAA,CAAAoB,QAAA,CAAAE,SAAA;UAACC,eAAA;UAAAC,UAAA,GACO,WACF;YACKC,SAAA;cACPC,iBAAA;YACA;UACM;QAqBR;MAAA,GAACxB,GAAA;IAAA,IACM,eACC,IAAAN,kBAAA,CAAAc,IAAA,EAAAV,UAAA,CAAA2B,MAAA;MAAAZ,KAAA,EACN,QAAS;MAA6CC,GAAA;MAAAY,QACxD;MAAAC,CAAA,EACA;MAAAC,CAAA,MAAC;MAAAC,IAAA;QAAAC,OACC;MAAK;MACCpB,QACN;MACE;AAEa;AACf;AAAA;AACF;AAAA;AAAA;AACF;AAGN","ignoreList":[]}

package/dist/cjs/RadioGroupDemo.cjs

@@ -0,0 +1,74 @@
+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 RadioGroupDemo_exports = {};
+__export(RadioGroupDemo_exports, {
+  RadioGroupDemo: () => RadioGroupDemo,
+  RadioGroupItemWithLabel: () => RadioGroupItemWithLabel
+});
+module.exports = __toCommonJS(RadioGroupDemo_exports);
+var import_gui = require("@hanzo/gui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function RadioGroupDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Theme, {
+    name: "surface2",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.RadioGroup, {
+      "aria-labelledby": "Select one item",
+      defaultValue: "3",
+      name: "form",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+        width: 300,
+        items: "center",
+        gap: "$2",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroupItemWithLabel, {
+          size: "$3",
+          value: "2",
+          label: "Second value"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroupItemWithLabel, {
+          size: "$4",
+          value: "3",
+          label: "Third value"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroupItemWithLabel, {
+          size: "$5",
+          value: "4",
+          label: "Fourth value"
+        })]
+      })
+    })
+  });
+}
+function RadioGroupItemWithLabel(props) {
+  const id = `radiogroup-${props.value}`;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+    width: 300,
+    items: "center",
+    gap: "$4",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.RadioGroup.Item, {
+      value: props.value,
+      id,
+      size: props.size,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.RadioGroup.Indicator, {})
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Label, {
+      size: props.size,
+      htmlFor: id,
+      children: props.label
+    })]
+  });
+}

package/dist/cjs/RadioGroupDemo.native.js

@@ -0,0 +1,77 @@
+"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 RadioGroupDemo_exports = {};
+__export(RadioGroupDemo_exports, {
+  RadioGroupDemo: () => RadioGroupDemo,
+  RadioGroupItemWithLabel: () => RadioGroupItemWithLabel
+});
+module.exports = __toCommonJS(RadioGroupDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_gui = require("@hanzo/gui");
+function RadioGroupDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Theme, {
+    name: "surface2",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.RadioGroup, {
+      "aria-labelledby": "Select one item",
+      defaultValue: "3",
+      name: "form",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+        width: 300,
+        items: "center",
+        gap: "$2",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroupItemWithLabel, {
+          size: "$3",
+          value: "2",
+          label: "Second value"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroupItemWithLabel, {
+          size: "$4",
+          value: "3",
+          label: "Third value"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroupItemWithLabel, {
+          size: "$5",
+          value: "4",
+          label: "Fourth value"
+        })]
+      })
+    })
+  });
+}
+function RadioGroupItemWithLabel(props) {
+  var id = `radiogroup-${props.value}`;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+    width: 300,
+    items: "center",
+    gap: "$4",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.RadioGroup.Item, {
+      value: props.value,
+      id,
+      size: props.size,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.RadioGroup.Indicator, {})
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Label, {
+      size: props.size,
+      htmlFor: id,
+      children: props.label
+    })]
+  });
+}
+//# sourceMappingURL=RadioGroupDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","RadioGroupDemo_exports","__export","RadioGroupDemo","RadioGroupItemWithLabel","module","exports","import_jsx_runtime","require","import_gui","jsx","Theme","name","children","RadioGroup","defaultValue","jsxs","YStack","width","items","gap"],"sources":["../../src/RadioGroupDemo.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,sBAAA;AAAAC,QAAA,CAAAD,sBAAA;EAAAE,cAAA,EAAAA,CAAA,KAAAA,cAAA;EAAAC,uBAAA,EAAAA,CAAA,KAAAA;AAAA;AACAC,MAAA,CAAAC,OAAA,GAAyDV,YAAA,CAAAK,sBAMjD;AAJD,IAAAM,kBAAS,GAAAC,OAAiB;EAAAC,UAAA,GAAAD,OAAA;AAC/B,SACEL,eAAA;EAGM,0BAAAI,kBAAA,CAACG,GAAA,EAAAD,UAAA,CAAAE,KAAA;IACDC,IAAA;IACAC,QAAA,qBAAAN,kBAAC,CAAAG,GAAA,EAAAD,UAAA,CAAAK,UAAwB,EAAK;MAChC,iBAEJ;MAEJC,YAAA;MAEOH,IAAS;MAKdC,QAAW,iBAAc,CAAM,GAAAN,kBAAK,CAAAS,IAAA,EAAAP,UAAA,CAAAQ,MAAA;QACpCC,KACE;QACEC,KAAA;QAIAC,GAAA;QAGFP,QAAA,GAEJ,mBAAAN,kBAAA,CAAAG,GAAA,EAAAN,uBAAA","ignoreList":[]}