@hanzogui/demos 2.0.0

package/dist/cjs/CheckboxDemo.native.js

@@ -0,0 +1,83 @@
+"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 CheckboxDemo_exports = {};
+__export(CheckboxDemo_exports, {
+  CheckboxDemo: () => CheckboxDemo,
+  CheckboxWithLabel: () => CheckboxWithLabel
+});
+module.exports = __toCommonJS(CheckboxDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_lucide_icons_2 = require("@hanzogui/lucide-icons-2"),
+  import_gui = require("@hanzo/gui");
+function CheckboxDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Theme, {
+    name: "surface2",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+      width: 300,
+      items: "center",
+      gap: "$2",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(CheckboxWithLabel, {
+        size: "$3"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(CheckboxWithLabel, {
+        size: "$4",
+        defaultChecked: !0
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(CheckboxWithLabel, {
+        size: "$5",
+        disabled: !0,
+        label: "Accept terms (disabled)"
+      })]
+    })
+  });
+}
+function CheckboxWithLabel(param) {
+  var {
+      size,
+      label = "Accept terms and conditions",
+      disabled,
+      ...checkboxProps
+    } = param,
+    id = `checkbox-${(size || "").toString().slice(1)}`;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Theme, {
+    name: disabled ? "gray" : null,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+      width: 300,
+      items: "center",
+      gap: "$4",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Checkbox, {
+        id,
+        size,
+        disabled,
+        ...checkboxProps,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Checkbox.Indicator, {
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.Check, {})
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Label, {
+        size,
+        htmlFor: id,
+        opacity: disabled ? 0.5 : 1,
+        children: label
+      })]
+    })
+  });
+}
+//# sourceMappingURL=CheckboxDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","CheckboxDemo_exports","__export","CheckboxDemo","CheckboxWithLabel","module","exports","import_jsx_runtime","require","import_lucide_icons_2","import_gui","jsx","Theme","name","children","jsxs","YStack","width","items","gap","size","defaultChecked","disabled"],"sources":["../../src/CheckboxDemo.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,oBAAA;AAAAC,QAAA,CAAAD,oBAAA;EAAAE,YAAA,EAAAA,CAAA,KAAAA,YAAA;EAAAC,iBAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAV,YAAmC,CAAAK,oBAAA;AAI5B,IAAAM,kBAAS,GAAeC,OAAA;EAAAC,qBAAA,GAAAD,OAAA;EAAAE,UAAA,GAAAF,OAAA;AAC7B,SACEL,aAAA;EAEI,0BAAAI,kBAAA,CAACI,GAAA,EAAAD,UAAA,CAAAE,KAAkB;IACnBC,IAAA;IACAC,QAAA,qBAAAP,kBAAC,CAAAQ,IAAA,EAAAL,UAAkB,CAAAM,MAAK;MAC1BC,KACF;MAEJC,KAAA;MAEOC,GAAS;MACdL,QAAA,GACA,eAAQ,IAAAP,kBAAA,CAAAI,GAAA,EAAAP,iBAAA;QACRgB,IAAA;MACG,IACkC,mBAAAb,kBAAA,CAAAI,GAAA,EAAAP,iBAAA;QAC/BgB,IAAK;QAETC,cAAA;MAEI,IAMA,mBAAAd,kBAAA,CAAAI,GAAC,EAAAP,iBAAM;QAIXgB,IAAA;QAEJE,QAAA","ignoreList":[]}

package/dist/cjs/CheckboxHeadlessDemo.cjs

@@ -0,0 +1,87 @@
+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 CheckboxHeadlessDemo_exports = {};
+__export(CheckboxHeadlessDemo_exports, {
+  CheckboxHeadlessDemo: () => CheckboxHeadlessDemo
+});
+module.exports = __toCommonJS(CheckboxHeadlessDemo_exports);
+var import_react = __toESM(require("react"), 1),
+  import_checkbox_headless = require("@hanzogui/checkbox-headless"),
+  import_lucide_icons_2 = require("@hanzogui/lucide-icons-2"),
+  import_react_native = require("react-native-web"),
+  import_gui = require("@hanzo/gui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function CheckboxHeadlessDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+    width: 200,
+    items: "center",
+    gap: "$3",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+      gap: "$3",
+      items: "center",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(HeadlessCheckbox, {
+        defaultChecked: "indeterminate",
+        id: "headless"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Label, {
+        htmlFor: "headless",
+        children: "Headless"
+      })]
+    })
+  });
+}
+const HeadlessCheckbox = import_react.default.forwardRef((props, ref) => {
+  const [checked, setChecked] = import_react.default.useState(props.defaultChecked || !1),
+    {
+      checkboxProps,
+      checkboxRef,
+      bubbleInput
+    } = (0, import_checkbox_headless.useCheckbox)(props, [checked, setChecked], ref);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react_native.Pressable, {
+    style: {
+      width: 20,
+      height: 20,
+      borderRadius: 4,
+      justifyContent: "center",
+      alignItems: "center",
+      backgroundColor: checked === !0 ? "lightblue" : "silver"
+    },
+    ref: checkboxRef,
+    ...checkboxProps,
+    children: [checked === "indeterminate" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.Minus, {
+      width: 18,
+      height: 18
+    }), checked === !0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.Check, {
+      width: 18,
+      height: 18
+    }), bubbleInput]
+  });
+});

package/dist/cjs/CheckboxHeadlessDemo.native.js

@@ -0,0 +1,90 @@
+"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 CheckboxHeadlessDemo_exports = {};
+__export(CheckboxHeadlessDemo_exports, {
+  CheckboxHeadlessDemo: () => CheckboxHeadlessDemo
+});
+module.exports = __toCommonJS(CheckboxHeadlessDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_react = __toESM(require("react"), 1),
+  import_checkbox_headless = require("@hanzogui/checkbox-headless"),
+  import_lucide_icons_2 = require("@hanzogui/lucide-icons-2"),
+  import_react_native = require("react-native"),
+  import_gui = require("@hanzo/gui");
+function CheckboxHeadlessDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+    width: 200,
+    items: "center",
+    gap: "$3",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+      gap: "$3",
+      items: "center",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(HeadlessCheckbox, {
+        defaultChecked: "indeterminate",
+        id: "headless"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Label, {
+        htmlFor: "headless",
+        children: "Headless"
+      })]
+    })
+  });
+}
+var HeadlessCheckbox = /* @__PURE__ */import_react.default.forwardRef(function (props, ref) {
+  var [checked, setChecked] = import_react.default.useState(props.defaultChecked || !1),
+    {
+      checkboxProps,
+      checkboxRef,
+      bubbleInput
+    } = (0, import_checkbox_headless.useCheckbox)(props, [checked, setChecked], ref);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react_native.Pressable, {
+    style: {
+      width: 20,
+      height: 20,
+      borderRadius: 4,
+      justifyContent: "center",
+      alignItems: "center",
+      backgroundColor: checked === !0 ? "lightblue" : "silver"
+    },
+    ref: checkboxRef,
+    ...checkboxProps,
+    children: [checked === "indeterminate" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.Minus, {
+      width: 18,
+      height: 18
+    }), checked === !0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.Check, {
+      width: 18,
+      height: 18
+    }), bubbleInput]
+  });
+});
+//# sourceMappingURL=CheckboxHeadlessDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","CheckboxHeadlessDemo_exports","__export","CheckboxHeadlessDemo","module","exports","import_jsx_runtime","require","import_react","__toESM","import_checkbox_headless","import_lucide_icons_2","import_react_native","import_gui","jsx","YStack","width","items","gap","children","jsxs","XStack","HeadlessCheckbox","defaultChecked","id","Label","htmlFor","default","forwardRef","props","ref","checked","setChecked","useState","checkboxProps","checkboxRef","bubbleInput","useCheckbox","Pressable","style","height","borderRadius","justifyContent"],"sources":["../../src/CheckboxHeadlessDemo.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAAA;EAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;IAAAC,KAAA;EAAA,IAAAH,GAAA;AAAA,IAAAI,4BAAA;AAAAC,QAAA,CAAAD,4BAAA;EAAAE,oBAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAAkB,CAAAK,4BAElB;AAOO,IAAAK,kBAAS,GAAAC,OAAuB;EAAAC,YAAA,GAAAC,OAAA,CAAAF,OAAA;EAAAG,wBAAA,GAAAH,OAAA;EAAAI,qBAAA,GAAAJ,OAAA;EAAAK,mBAAA,GAAAL,OAAA;EAAAM,UAAA,GAAAN,OAAA;AACrC,SACEJ,qBAAA;EAEI,0BAAAG,kBAAA,CAACQ,GAAA,EAAAD,UAAA,CAAAE,MAAiB;IAClBC,KAAA;IAAkCC,KAEtC;IAEJC,GAAA;IAEAC,QAAM,iBAAmB,IAAAb,kBAAM,CAAAc,IAAwC,EAACP,UAAO,CAAAQ,MAAQ;MACrFH,GAAO;MAELD,KAAA;MACCE,QAAS,GACV,mBAAAb,kBAAA,CAAAQ,GAAA,EAAAQ,gBAAA;QACFC,cAAA;QAGEC,EAAA;MAAC,uBAAAlB,kBAAA,CAAAQ,GAAA,EAAAD,UAAA,CAAAY,KAAA;QACCC,OAAO;QACLP,QAAO;MACP;IACc;EACE;AACJ;AACsC,IAAAG,gBACpD,kBAAAd,YAAA,CAAAmB,OAAA,CAAAC,UAAA,WAAAC,KAAA,EAAAC,GAAA;EAAA,IACA,CAAAC,OAAK,EAAAC,UAAA,IAAAxB,YAAA,CAAAmB,OAAA,CAAAM,QAAA,CAAAJ,KAAA,CAAAN,cAAA;IAAA;MAAAW,aAAA;MAAAC,WAAA;MAAAC;IAAA,QAAA1B,wBAAA,CAAA2B,WAAA,EAAAR,KAAA,GAAAE,OACD,EAAAC,UAEH,GAAAF,GAAA;EAA6D,OAC7D,eAAY,CAAQ,GAAAxB,kBAAA,CAAAc,IAAA,EAAAR,mBAAC,CAAA0B,SAAA;IAA6BC,KAClD;MAAAvB,KAAA;MAAAwB,MAAA;MACHC,YAAA;MAEHC,cAAA","ignoreList":[]}

package/dist/cjs/CheckboxUnstyledDemo.cjs

@@ -0,0 +1,78 @@
+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 CheckboxUnstyledDemo_exports = {};
+__export(CheckboxUnstyledDemo_exports, {
+  Checkbox: () => Checkbox,
+  CheckboxUnstyledDemo: () => CheckboxUnstyledDemo
+});
+module.exports = __toCommonJS(CheckboxUnstyledDemo_exports);
+var import_checkbox = require("@hanzogui/checkbox"),
+  import_core = require("@hanzogui/core"),
+  import_lucide_icons_2 = require("@hanzogui/lucide-icons-2"),
+  import_gui = require("@hanzo/gui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+const Frame = (0, import_core.styled)(import_core.View, {
+    borderWidth: 1,
+    borderColor: "$borderColor",
+    rounded: 5,
+    items: "center",
+    justify: "center",
+    variants: {
+      checked: {
+        indeterminate: {},
+        true: {
+          backgroundColor: "$color5"
+        },
+        false: {
+          backgroundColor: "$color3"
+        }
+      }
+    },
+    defaultVariants: {
+      checked: !1
+    }
+  }),
+  Indicator = (0, import_core.styled)(import_core.View, {}),
+  Checkbox = (0, import_checkbox.createCheckbox)({
+    Frame,
+    Indicator
+  });
+function CheckboxUnstyledDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+    width: 200,
+    items: "center",
+    gap: "$3",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+      gap: "$3",
+      items: "center",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(Checkbox, {
+        defaultChecked: !0,
+        id: "unstyled",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Checkbox.Indicator, {
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.Check, {})
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Label, {
+        htmlFor: "unstyled",
+        children: "Unstyled"
+      })]
+    })
+  });
+}

package/dist/cjs/CheckboxUnstyledDemo.native.js

@@ -0,0 +1,81 @@
+"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 CheckboxUnstyledDemo_exports = {};
+__export(CheckboxUnstyledDemo_exports, {
+  Checkbox: () => Checkbox,
+  CheckboxUnstyledDemo: () => CheckboxUnstyledDemo
+});
+module.exports = __toCommonJS(CheckboxUnstyledDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_checkbox = require("@hanzogui/checkbox"),
+  import_core = require("@hanzogui/core"),
+  import_lucide_icons_2 = require("@hanzogui/lucide-icons-2"),
+  import_gui = require("@hanzo/gui"),
+  Frame = (0, import_core.styled)(import_core.View, {
+    borderWidth: 1,
+    borderColor: "$borderColor",
+    rounded: 5,
+    items: "center",
+    justify: "center",
+    variants: {
+      checked: {
+        indeterminate: {},
+        true: {
+          backgroundColor: "$color5"
+        },
+        false: {
+          backgroundColor: "$color3"
+        }
+      }
+    },
+    defaultVariants: {
+      checked: !1
+    }
+  }),
+  Indicator = (0, import_core.styled)(import_core.View, {}),
+  Checkbox = (0, import_checkbox.createCheckbox)({
+    Frame,
+    Indicator
+  });
+function CheckboxUnstyledDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+    width: 200,
+    items: "center",
+    gap: "$3",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+      gap: "$3",
+      items: "center",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(Checkbox, {
+        defaultChecked: !0,
+        id: "unstyled",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Checkbox.Indicator, {
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.Check, {})
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Label, {
+        htmlFor: "unstyled",
+        children: "Unstyled"
+      })]
+    })
+  });
+}
+//# sourceMappingURL=CheckboxUnstyledDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","CheckboxUnstyledDemo_exports","__export","Checkbox","CheckboxUnstyledDemo","module","exports","import_jsx_runtime","require","import_checkbox","import_core","import_lucide_icons_2","import_gui","Frame","styled","View","borderWidth","borderColor","rounded","items","justify","variants","checked","indeterminate","true","backgroundColor","false","defaultVariants","Indicator","createCheckbox","jsx","YStack","width","gap","children","jsxs","XStack"],"sources":["../../src/CheckboxUnstyledDemo.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,4BAAA;AAAAC,QAAA,CAAAD,4BAAA;EAAAE,QAAA,EAAAA,CAAA,KAAAA,QAAA;EAAAC,oBAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAV,YAA+B,CAAAK,4BAC/B;AAIA,IAAAM,kBAAc,GAAAC,OAAA,oBAAO;EAAAC,eAAM,GAAAD,OAAA;EAAAE,WAAA,GAAAF,OAAA;EAAAG,qBAAA,GAAAH,OAAA;EAAAI,UAAA,GAAAJ,OAAA;EAAAK,KAAA,OAAAH,WAAA,CAAAI,MAAA,EAAAJ,WAAA,CAAAK,IAAA;IACzBC,WAAA,EAAa;IACbC,WAAA,EAAa;IACbC,OAAA,EAAS;IACTC,KAAA,EAAO;IACPC,OAAA,EAAS;IACTC,QAAA,EAAU;MACRC,OAAA,EAAS;QACPC,aAAA,EAAe,CAAC;QAChBC,IAAA,EAAM;UACJC,eAAA,EAAiB;QACnB;QACAC,KAAA,EAAO;UACLD,eAAA,EAAiB;QACnB;MACF;IACF;IAEAE,eAAA,EAAiB;MACfL,OAAA,EAAS;IACX;EACF,CAAC;EAEKM,SAAA,OAAYlB,WAAA,CAAAI,MAAA,EAAOJ,WAAA,CAAAK,IAAA,EAAM,CAAC,CAAC;EAEpBZ,QAAA,OAAWM,eAAA,CAAAoB,cAAA,EAAe;IACrChB,KAAA;IACAe;EACF,CAAC;AAEM,SAASxB,qBAAA,EAAuB;EACrC,OACE,mBAAAG,kBAAA,CAAAuB,GAAA,EAAClB,UAAA,CAAAmB,MAAA;IAEGC,KAAA;IAKAb,KAAA;IAAkCc,GACpC,EACF;IAEJC,QAAA,qBAAA3B,kBAAA,CAAA4B,IAAA,EAAAvB,UAAA,CAAAwB,MAAA","ignoreList":[]}

package/dist/cjs/ColorsDemo.cjs

@@ -0,0 +1,133 @@
+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 ColorsDemo_exports = {};
+__export(ColorsDemo_exports, {
+  ColorsDemo: () => ColorsDemo
+});
+module.exports = __toCommonJS(ColorsDemo_exports);
+var import_colors = require("@hanzogui/colors"),
+  import_gui = require("@hanzo/gui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+const colorGroups = ["gray", "blue", "green", "yellow", "red"],
+  lightColors = {
+    gray: import_colors.gray,
+    blue: import_colors.blue,
+    green: import_colors.green,
+    yellow: import_colors.yellow,
+    red: import_colors.red
+  },
+  darkColors = {
+    gray: import_colors.grayDark,
+    blue: import_colors.blueDark,
+    green: import_colors.greenDark,
+    yellow: import_colors.yellowDark,
+    red: import_colors.redDark
+  };
+function ColorsDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+    mt: "$4",
+    gap: "$8",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorsRow, {
+      title: "Light",
+      colorSets: lightColors
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorsRow, {
+      title: "Dark",
+      colorSets: darkColors
+    })]
+  });
+}
+function ColorsRow({
+  title,
+  colorSets
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+    gap: "$4",
+    $sm: {
+      gap: "$2"
+    },
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.H2, {
+      size: "$2",
+      children: title
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+      gap: "$4",
+      self: "center",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+        gap: "$4",
+        $sm: {
+          gap: "$2"
+        },
+        self: "center",
+        children: [colorGroups.map(groupName => {
+          const colorSet = colorSets[groupName],
+            colors = Object.values(colorSet);
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.XStack, {
+            gap: "$2",
+            children: colors.map((color, index) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+              rounded: "$2",
+              size: "$4",
+              height: "$4",
+              borderWidth: 1,
+              bg: color,
+              borderColor: "$color7",
+              $sm: {
+                size: "$2"
+              },
+              $xs: {
+                size: "$1"
+              }
+            }, `${groupName}${index}`))
+          }, groupName);
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.XStack, {
+          gap: "$2",
+          self: "center",
+          children: new Array(13).fill(0).slice(1).map((_, index) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Paragraph, {
+            color: "$color10",
+            text: "center",
+            width: "$4",
+            $sm: {
+              width: "$2"
+            },
+            $xs: {
+              width: "$1"
+            },
+            children: index
+          }, index))
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+        gap: "$4",
+        mt: "$2",
+        children: colorGroups.map(name => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Paragraph, {
+          theme: name,
+          color: "$color10",
+          height: "$4",
+          rotate: "-10deg",
+          $sm: {
+            height: "$2"
+          },
+          $xs: {
+            height: "$1"
+          },
+          children: name
+        }, name))
+      })]
+    })]
+  });
+}