@tatamicks/checkbox 0.0.1

package/dist/index.mjs

@@ -0,0 +1,1147 @@
+import { HorizontalAlign as Oe, VerticalAlign as De, toPx as O, DimensionInput as ie, ColorPicker as q, sizeDefinition as yr, universalProperties as Cr } from "@tatamicks/core";
+import Fe, { forwardRef as Rr, useRef as Er, useImperativeHandle as _r, useMemo as oe, useCallback as D } from "react";
+var K = { exports: {} }, Y = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var We;
+function kr() {
+  if (We) return Y;
+  We = 1;
+  var s = Fe, R = Symbol.for("react.element"), f = Symbol.for("react.fragment"), p = Object.prototype.hasOwnProperty, C = s.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, d = { key: !0, ref: !0, __self: !0, __source: !0 };
+  function _(k, h, m) {
+    var b, S = {}, T = null, v = null;
+    m !== void 0 && (T = "" + m), h.key !== void 0 && (T = "" + h.key), h.ref !== void 0 && (v = h.ref);
+    for (b in h) p.call(h, b) && !d.hasOwnProperty(b) && (S[b] = h[b]);
+    if (k && k.defaultProps) for (b in h = k.defaultProps, h) S[b] === void 0 && (S[b] = h[b]);
+    return { $$typeof: R, type: k, key: T, ref: v, props: S, _owner: C.current };
+  }
+  return Y.Fragment = f, Y.jsx = _, Y.jsxs = _, Y;
+}
+var V = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var Ie;
+function jr() {
+  return Ie || (Ie = 1, process.env.NODE_ENV !== "production" && (function() {
+    var s = Fe, R = Symbol.for("react.element"), f = Symbol.for("react.portal"), p = Symbol.for("react.fragment"), C = Symbol.for("react.strict_mode"), d = Symbol.for("react.profiler"), _ = Symbol.for("react.provider"), k = Symbol.for("react.context"), h = Symbol.for("react.forward_ref"), m = Symbol.for("react.suspense"), b = Symbol.for("react.suspense_list"), S = Symbol.for("react.memo"), T = Symbol.for("react.lazy"), v = Symbol.for("react.offscreen"), A = Symbol.iterator, G = "@@iterator";
+    function U(e) {
+      if (e === null || typeof e != "object")
+        return null;
+      var r = A && e[A] || e[G];
+      return typeof r == "function" ? r : null;
+    }
+    var u = s.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    function y(e) {
+      {
+        for (var r = arguments.length, t = new Array(r > 1 ? r - 1 : 0), n = 1; n < r; n++)
+          t[n - 1] = arguments[n];
+        ze("error", e, t);
+      }
+    }
+    function ze(e, r, t) {
+      {
+        var n = u.ReactDebugCurrentFrame, l = n.getStackAddendum();
+        l !== "" && (r += "%s", t = t.concat([l]));
+        var c = t.map(function(a) {
+          return String(a);
+        });
+        c.unshift("Warning: " + r), Function.prototype.apply.call(console[e], console, c);
+      }
+    }
+    var Ye = !1, Ve = !1, Ue = !1, Le = !1, Me = !1, ae;
+    ae = Symbol.for("react.module.reference");
+    function Ne(e) {
+      return !!(typeof e == "string" || typeof e == "function" || e === p || e === d || Me || e === C || e === m || e === b || Le || e === v || Ye || Ve || Ue || typeof e == "object" && e !== null && (e.$$typeof === T || e.$$typeof === S || e.$$typeof === _ || e.$$typeof === k || e.$$typeof === h || // This needs to include all possible module reference object
+      // types supported by any Flight configuration anywhere since
+      // we don't know which Flight build this will end up being used
+      // with.
+      e.$$typeof === ae || e.getModuleId !== void 0));
+    }
+    function Je(e, r, t) {
+      var n = e.displayName;
+      if (n)
+        return n;
+      var l = r.displayName || r.name || "";
+      return l !== "" ? t + "(" + l + ")" : t;
+    }
+    function se(e) {
+      return e.displayName || "Context";
+    }
+    function P(e) {
+      if (e == null)
+        return null;
+      if (typeof e.tag == "number" && y("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof e == "function")
+        return e.displayName || e.name || null;
+      if (typeof e == "string")
+        return e;
+      switch (e) {
+        case p:
+          return "Fragment";
+        case f:
+          return "Portal";
+        case d:
+          return "Profiler";
+        case C:
+          return "StrictMode";
+        case m:
+          return "Suspense";
+        case b:
+          return "SuspenseList";
+      }
+      if (typeof e == "object")
+        switch (e.$$typeof) {
+          case k:
+            var r = e;
+            return se(r) + ".Consumer";
+          case _:
+            var t = e;
+            return se(t._context) + ".Provider";
+          case h:
+            return Je(e, e.render, "ForwardRef");
+          case S:
+            var n = e.displayName || null;
+            return n !== null ? n : P(e.type) || "Memo";
+          case T: {
+            var l = e, c = l._payload, a = l._init;
+            try {
+              return P(a(c));
+            } catch {
+              return null;
+            }
+          }
+        }
+      return null;
+    }
+    var W = Object.assign, $ = 0, le, ue, ce, fe, de, ve, pe;
+    function he() {
+    }
+    he.__reactDisabledLog = !0;
+    function qe() {
+      {
+        if ($ === 0) {
+          le = console.log, ue = console.info, ce = console.warn, fe = console.error, de = console.group, ve = console.groupCollapsed, pe = console.groupEnd;
+          var e = {
+            configurable: !0,
+            enumerable: !0,
+            value: he,
+            writable: !0
+          };
+          Object.defineProperties(console, {
+            info: e,
+            log: e,
+            warn: e,
+            error: e,
+            group: e,
+            groupCollapsed: e,
+            groupEnd: e
+          });
+        }
+        $++;
+      }
+    }
+    function Ke() {
+      {
+        if ($--, $ === 0) {
+          var e = {
+            configurable: !0,
+            enumerable: !0,
+            writable: !0
+          };
+          Object.defineProperties(console, {
+            log: W({}, e, {
+              value: le
+            }),
+            info: W({}, e, {
+              value: ue
+            }),
+            warn: W({}, e, {
+              value: ce
+            }),
+            error: W({}, e, {
+              value: fe
+            }),
+            group: W({}, e, {
+              value: de
+            }),
+            groupCollapsed: W({}, e, {
+              value: ve
+            }),
+            groupEnd: W({}, e, {
+              value: pe
+            })
+          });
+        }
+        $ < 0 && y("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
+      }
+    }
+    var H = u.ReactCurrentDispatcher, X;
+    function L(e, r, t) {
+      {
+        if (X === void 0)
+          try {
+            throw Error();
+          } catch (l) {
+            var n = l.stack.trim().match(/\n( *(at )?)/);
+            X = n && n[1] || "";
+          }
+        return `
+` + X + e;
+      }
+    }
+    var Z = !1, M;
+    {
+      var Ge = typeof WeakMap == "function" ? WeakMap : Map;
+      M = new Ge();
+    }
+    function ge(e, r) {
+      if (!e || Z)
+        return "";
+      {
+        var t = M.get(e);
+        if (t !== void 0)
+          return t;
+      }
+      var n;
+      Z = !0;
+      var l = Error.prepareStackTrace;
+      Error.prepareStackTrace = void 0;
+      var c;
+      c = H.current, H.current = null, qe();
+      try {
+        if (r) {
+          var a = function() {
+            throw Error();
+          };
+          if (Object.defineProperty(a.prototype, "props", {
+            set: function() {
+              throw Error();
+            }
+          }), typeof Reflect == "object" && Reflect.construct) {
+            try {
+              Reflect.construct(a, []);
+            } catch (j) {
+              n = j;
+            }
+            Reflect.construct(e, [], a);
+          } else {
+            try {
+              a.call();
+            } catch (j) {
+              n = j;
+            }
+            e.call(a.prototype);
+          }
+        } else {
+          try {
+            throw Error();
+          } catch (j) {
+            n = j;
+          }
+          e();
+        }
+      } catch (j) {
+        if (j && n && typeof j.stack == "string") {
+          for (var o = j.stack.split(`
+`), E = n.stack.split(`
+`), g = o.length - 1, x = E.length - 1; g >= 1 && x >= 0 && o[g] !== E[x]; )
+            x--;
+          for (; g >= 1 && x >= 0; g--, x--)
+            if (o[g] !== E[x]) {
+              if (g !== 1 || x !== 1)
+                do
+                  if (g--, x--, x < 0 || o[g] !== E[x]) {
+                    var w = `
+` + o[g].replace(" at new ", " at ");
+                    return e.displayName && w.includes("<anonymous>") && (w = w.replace("<anonymous>", e.displayName)), typeof e == "function" && M.set(e, w), w;
+                  }
+                while (g >= 1 && x >= 0);
+              break;
+            }
+        }
+      } finally {
+        Z = !1, H.current = c, Ke(), Error.prepareStackTrace = l;
+      }
+      var B = e ? e.displayName || e.name : "", I = B ? L(B) : "";
+      return typeof e == "function" && M.set(e, I), I;
+    }
+    function He(e, r, t) {
+      return ge(e, !1);
+    }
+    function Xe(e) {
+      var r = e.prototype;
+      return !!(r && r.isReactComponent);
+    }
+    function N(e, r, t) {
+      if (e == null)
+        return "";
+      if (typeof e == "function")
+        return ge(e, Xe(e));
+      if (typeof e == "string")
+        return L(e);
+      switch (e) {
+        case m:
+          return L("Suspense");
+        case b:
+          return L("SuspenseList");
+      }
+      if (typeof e == "object")
+        switch (e.$$typeof) {
+          case h:
+            return He(e.render);
+          case S:
+            return N(e.type, r, t);
+          case T: {
+            var n = e, l = n._payload, c = n._init;
+            try {
+              return N(c(l), r, t);
+            } catch {
+            }
+          }
+        }
+      return "";
+    }
+    var z = Object.prototype.hasOwnProperty, xe = {}, me = u.ReactDebugCurrentFrame;
+    function J(e) {
+      if (e) {
+        var r = e._owner, t = N(e.type, e._source, r ? r.type : null);
+        me.setExtraStackFrame(t);
+      } else
+        me.setExtraStackFrame(null);
+    }
+    function Ze(e, r, t, n, l) {
+      {
+        var c = Function.call.bind(z);
+        for (var a in e)
+          if (c(e, a)) {
+            var o = void 0;
+            try {
+              if (typeof e[a] != "function") {
+                var E = Error((n || "React class") + ": " + t + " type `" + a + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[a] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
+                throw E.name = "Invariant Violation", E;
+              }
+              o = e[a](r, a, n, t, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
+            } catch (g) {
+              o = g;
+            }
+            o && !(o instanceof Error) && (J(l), y("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", n || "React class", t, a, typeof o), J(null)), o instanceof Error && !(o.message in xe) && (xe[o.message] = !0, J(l), y("Failed %s type: %s", t, o.message), J(null));
+          }
+      }
+    }
+    var Qe = Array.isArray;
+    function Q(e) {
+      return Qe(e);
+    }
+    function er(e) {
+      {
+        var r = typeof Symbol == "function" && Symbol.toStringTag, t = r && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return t;
+      }
+    }
+    function rr(e) {
+      try {
+        return be(e), !1;
+      } catch {
+        return !0;
+      }
+    }
+    function be(e) {
+      return "" + e;
+    }
+    function ye(e) {
+      if (rr(e))
+        return y("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", er(e)), be(e);
+    }
+    var Ce = u.ReactCurrentOwner, tr = {
+      key: !0,
+      ref: !0,
+      __self: !0,
+      __source: !0
+    }, Re, Ee;
+    function nr(e) {
+      if (z.call(e, "ref")) {
+        var r = Object.getOwnPropertyDescriptor(e, "ref").get;
+        if (r && r.isReactWarning)
+          return !1;
+      }
+      return e.ref !== void 0;
+    }
+    function ir(e) {
+      if (z.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning)
+          return !1;
+      }
+      return e.key !== void 0;
+    }
+    function or(e, r) {
+      typeof e.ref == "string" && Ce.current;
+    }
+    function ar(e, r) {
+      {
+        var t = function() {
+          Re || (Re = !0, y("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", r));
+        };
+        t.isReactWarning = !0, Object.defineProperty(e, "key", {
+          get: t,
+          configurable: !0
+        });
+      }
+    }
+    function sr(e, r) {
+      {
+        var t = function() {
+          Ee || (Ee = !0, y("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", r));
+        };
+        t.isReactWarning = !0, Object.defineProperty(e, "ref", {
+          get: t,
+          configurable: !0
+        });
+      }
+    }
+    var lr = function(e, r, t, n, l, c, a) {
+      var o = {
+        // This tag allows us to uniquely identify this as a React Element
+        $$typeof: R,
+        // Built-in properties that belong on the element
+        type: e,
+        key: r,
+        ref: t,
+        props: a,
+        // Record the component responsible for creating this element.
+        _owner: c
+      };
+      return o._store = {}, Object.defineProperty(o._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: !1
+      }), Object.defineProperty(o, "_self", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !1,
+        value: n
+      }), Object.defineProperty(o, "_source", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !1,
+        value: l
+      }), Object.freeze && (Object.freeze(o.props), Object.freeze(o)), o;
+    };
+    function ur(e, r, t, n, l) {
+      {
+        var c, a = {}, o = null, E = null;
+        t !== void 0 && (ye(t), o = "" + t), ir(r) && (ye(r.key), o = "" + r.key), nr(r) && (E = r.ref, or(r, l));
+        for (c in r)
+          z.call(r, c) && !tr.hasOwnProperty(c) && (a[c] = r[c]);
+        if (e && e.defaultProps) {
+          var g = e.defaultProps;
+          for (c in g)
+            a[c] === void 0 && (a[c] = g[c]);
+        }
+        if (o || E) {
+          var x = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
+          o && ar(a, x), E && sr(a, x);
+        }
+        return lr(e, o, E, l, n, Ce.current, a);
+      }
+    }
+    var ee = u.ReactCurrentOwner, _e = u.ReactDebugCurrentFrame;
+    function F(e) {
+      if (e) {
+        var r = e._owner, t = N(e.type, e._source, r ? r.type : null);
+        _e.setExtraStackFrame(t);
+      } else
+        _e.setExtraStackFrame(null);
+    }
+    var re;
+    re = !1;
+    function te(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === R;
+    }
+    function ke() {
+      {
+        if (ee.current) {
+          var e = P(ee.current.type);
+          if (e)
+            return `
+
+Check the render method of \`` + e + "`.";
+        }
+        return "";
+      }
+    }
+    function cr(e) {
+      return "";
+    }
+    var je = {};
+    function fr(e) {
+      {
+        var r = ke();
+        if (!r) {
+          var t = typeof e == "string" ? e : e.displayName || e.name;
+          t && (r = `
+
+Check the top-level render call using <` + t + ">.");
+        }
+        return r;
+      }
+    }
+    function Se(e, r) {
+      {
+        if (!e._store || e._store.validated || e.key != null)
+          return;
+        e._store.validated = !0;
+        var t = fr(r);
+        if (je[t])
+          return;
+        je[t] = !0;
+        var n = "";
+        e && e._owner && e._owner !== ee.current && (n = " It was passed a child from " + P(e._owner.type) + "."), F(e), y('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', t, n), F(null);
+      }
+    }
+    function we(e, r) {
+      {
+        if (typeof e != "object")
+          return;
+        if (Q(e))
+          for (var t = 0; t < e.length; t++) {
+            var n = e[t];
+            te(n) && Se(n, r);
+          }
+        else if (te(e))
+          e._store && (e._store.validated = !0);
+        else if (e) {
+          var l = U(e);
+          if (typeof l == "function" && l !== e.entries)
+            for (var c = l.call(e), a; !(a = c.next()).done; )
+              te(a.value) && Se(a.value, r);
+        }
+      }
+    }
+    function dr(e) {
+      {
+        var r = e.type;
+        if (r == null || typeof r == "string")
+          return;
+        var t;
+        if (typeof r == "function")
+          t = r.propTypes;
+        else if (typeof r == "object" && (r.$$typeof === h || // Note: Memo only checks outer props here.
+        // Inner props are checked in the reconciler.
+        r.$$typeof === S))
+          t = r.propTypes;
+        else
+          return;
+        if (t) {
+          var n = P(r);
+          Ze(t, e.props, "prop", n, e);
+        } else if (r.PropTypes !== void 0 && !re) {
+          re = !0;
+          var l = P(r);
+          y("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", l || "Unknown");
+        }
+        typeof r.getDefaultProps == "function" && !r.getDefaultProps.isReactClassApproved && y("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
+      }
+    }
+    function vr(e) {
+      {
+        for (var r = Object.keys(e.props), t = 0; t < r.length; t++) {
+          var n = r[t];
+          if (n !== "children" && n !== "key") {
+            F(e), y("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", n), F(null);
+            break;
+          }
+        }
+        e.ref !== null && (F(e), y("Invalid attribute `ref` supplied to `React.Fragment`."), F(null));
+      }
+    }
+    var Te = {};
+    function Pe(e, r, t, n, l, c) {
+      {
+        var a = Ne(e);
+        if (!a) {
+          var o = "";
+          (e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (o += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
+          var E = cr();
+          E ? o += E : o += ke();
+          var g;
+          e === null ? g = "null" : Q(e) ? g = "array" : e !== void 0 && e.$$typeof === R ? (g = "<" + (P(e.type) || "Unknown") + " />", o = " Did you accidentally export a JSX literal instead of a component?") : g = typeof e, y("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", g, o);
+        }
+        var x = ur(e, r, t, l, c);
+        if (x == null)
+          return x;
+        if (a) {
+          var w = r.children;
+          if (w !== void 0)
+            if (n)
+              if (Q(w)) {
+                for (var B = 0; B < w.length; B++)
+                  we(w[B], e);
+                Object.freeze && Object.freeze(w);
+              } else
+                y("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
+            else
+              we(w, e);
+        }
+        if (z.call(r, "key")) {
+          var I = P(e), j = Object.keys(r).filter(function(br) {
+            return br !== "key";
+          }), ne = j.length > 0 ? "{key: someKey, " + j.join(": ..., ") + ": ...}" : "{key: someKey}";
+          if (!Te[I + ne]) {
+            var mr = j.length > 0 ? "{" + j.join(": ..., ") + ": ...}" : "{}";
+            y(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`, ne, I, mr, I), Te[I + ne] = !0;
+          }
+        }
+        return e === p ? vr(x) : dr(x), x;
+      }
+    }
+    function pr(e, r, t) {
+      return Pe(e, r, t, !0);
+    }
+    function hr(e, r, t) {
+      return Pe(e, r, t, !1);
+    }
+    var gr = hr, xr = pr;
+    V.Fragment = p, V.jsx = gr, V.jsxs = xr;
+  })()), V;
+}
+var Ae;
+function Sr() {
+  return Ae || (Ae = 1, process.env.NODE_ENV === "production" ? K.exports = kr() : K.exports = jr()), K.exports;
+}
+var i = Sr();
+function wr({
+  size: s = 16,
+  checked: R = !1,
+  borderWidth: f = 1,
+  borderColor: p = "#d1d5db",
+  checkWidth: C = 3.5,
+  checkColor: d = "#2563eb",
+  backgroundColor: _ = "#ffffff",
+  checkedBackgroundColor: k
+}) {
+  const h = R && k ? k : _;
+  return /* @__PURE__ */ i.jsxs(
+    "svg",
+    {
+      width: s,
+      height: s,
+      viewBox: "0 0 20 20",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ i.jsx(
+          "rect",
+          {
+            x: f / 2,
+            y: f / 2,
+            width: 20 - f,
+            height: 20 - f,
+            fill: h,
+            stroke: p,
+            strokeWidth: f
+          }
+        ),
+        R ? /* @__PURE__ */ i.jsx(
+          "path",
+          {
+            d: "M3 11l4 4L17 4",
+            fill: "none",
+            stroke: d,
+            strokeWidth: C
+          }
+        ) : null
+      ]
+    }
+  );
+}
+const Be = Rr(({ props: s, value: R, onChange: f, readOnly: p }, C) => {
+  const d = Er(null);
+  _r(
+    C,
+    () => ({
+      focus: () => {
+        var u;
+        (u = d.current) == null || u.focus(), !p && f && f(!(R ?? !1));
+      }
+    }),
+    [p, f, R]
+  );
+  const _ = R ?? !1, k = (u) => {
+    p || f(u.target.checked);
+  }, h = oe(() => {
+    const u = {
+      width: "100%",
+      height: "100%",
+      display: "flex",
+      boxSizing: "border-box",
+      overflow: "hidden"
+    };
+    switch (s.justifyContent) {
+      case Oe.left:
+        u.justifyContent = "flex-start";
+        break;
+      case Oe.right:
+        u.justifyContent = "flex-end";
+        break;
+      default:
+        u.justifyContent = "center";
+        break;
+    }
+    switch (s.alignItems) {
+      case De.top:
+        u.alignItems = "flex-start";
+        break;
+      case De.bottom:
+        u.alignItems = "flex-end";
+        break;
+      default:
+        u.alignItems = "center";
+        break;
+    }
+    if (s.isIndividual)
+      s.top && (u.paddingTop = O.fromDim(s.top)), s.right && (u.paddingRight = O.fromDim(s.right)), s.bottom && (u.paddingBottom = O.fromDim(s.bottom)), s.left && (u.paddingLeft = O.fromDim(s.left));
+    else if (s.all) {
+      const y = O.fromDim(s.all);
+      u.padding = `${y}px`;
+    }
+    return u;
+  }, [s]), m = s.styleConfig ?? {}, b = m.checkboxSize ? O.fromDim(m.checkboxSize) : 16, S = m.borderWidth ? O.fromDim(m.borderWidth) : 1, T = m.checkWidth ? O.fromDim(m.checkWidth) : 3.5, v = {
+    position: "absolute",
+    inset: 0,
+    margin: 0,
+    width: "100%",
+    height: "100%",
+    opacity: 0,
+    pointerEvents: "none"
+    // クリックイベントを受け取らない
+  }, A = {
+    pointerEvents: "none",
+    position: "absolute",
+    inset: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }, G = {
+    width: b,
+    height: b,
+    position: "relative"
+  }, U = () => {
+    !p && f && f(!_);
+  };
+  return /* @__PURE__ */ i.jsxs(
+    "div",
+    {
+      style: {
+        ...h,
+        cursor: p ? "not-allowed" : "pointer"
+      },
+      role: "switch",
+      "aria-checked": _,
+      "aria-disabled": p,
+      "aria-label": "Checkbox",
+      tabIndex: p ? -1 : 0,
+      onClick: U,
+      onKeyDown: (u) => {
+        !p && (u.key === " " || u.key === "Enter") && (u.preventDefault(), U());
+      },
+      children: [
+        /* @__PURE__ */ i.jsx(
+          "input",
+          {
+            ref: d,
+            type: "checkbox",
+            checked: _,
+            onChange: k,
+            disabled: p,
+            style: v,
+            tabIndex: -1,
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ i.jsx("div", { style: G, children: /* @__PURE__ */ i.jsx("div", { style: A, "aria-hidden": "true", children: /* @__PURE__ */ i.jsx(
+          wr,
+          {
+            size: b,
+            checked: _,
+            borderWidth: S,
+            borderColor: m.borderColor ?? "#000000",
+            checkWidth: T,
+            checkColor: m.checkColor ?? "#000000",
+            backgroundColor: m.backgroundColor ?? "#ffffff",
+            checkedBackgroundColor: m.checkedBackgroundColor
+          }
+        ) }) })
+      ]
+    }
+  );
+});
+Be.displayName = "CheckboxRenderer";
+const $e = ({
+  value: s,
+  onChange: R,
+  readOnly: f = !1
+}) => {
+  const p = oe(
+    () => ({
+      checkboxSize: { value: 16, unit: "px" },
+      borderWidth: { value: 1, unit: "px" },
+      borderColor: "#d1d5db",
+      checkWidth: { value: 3.5, unit: "px" },
+      checkColor: "#2563eb",
+      backgroundColor: "#ffffff"
+    }),
+    []
+  ), C = oe(
+    () => ({
+      ...p,
+      ...s
+    }),
+    [s, p]
+  ), d = D(
+    (v, A) => {
+      R({
+        ...s,
+        [v]: A
+      });
+    },
+    [s, R]
+  ), _ = D(
+    (v) => d("checkboxSize", v),
+    [d]
+  ), k = D(
+    (v) => d("borderWidth", v),
+    [d]
+  ), h = D(
+    (v) => d("borderColor", v),
+    [d]
+  ), m = D(
+    (v) => d("checkWidth", v),
+    [d]
+  ), b = D(
+    (v) => d("checkColor", v),
+    [d]
+  ), S = D(
+    (v) => d("backgroundColor", v),
+    [d]
+  ), T = D(
+    (v) => d("checkedBackgroundColor", v),
+    [d]
+  );
+  return /* @__PURE__ */ i.jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "12px",
+        padding: "12px"
+      },
+      children: [
+        /* @__PURE__ */ i.jsxs(
+          "div",
+          {
+            style: {
+              padding: "16px",
+              backgroundColor: "#f5f5f5",
+              borderRadius: "4px",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              gap: "16px"
+            },
+            children: [
+              /* @__PURE__ */ i.jsxs("div", { style: { textAlign: "center" }, children: [
+                /* @__PURE__ */ i.jsx("div", { style: { fontSize: "12px", color: "#666", marginBottom: "8px" }, children: "未チェック" }),
+                /* @__PURE__ */ i.jsx(
+                  "div",
+                  {
+                    style: {
+                      width: "40px",
+                      height: "40px",
+                      backgroundColor: "#ddd",
+                      borderRadius: "4px"
+                    }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ i.jsxs("div", { style: { textAlign: "center" }, children: [
+                /* @__PURE__ */ i.jsx("div", { style: { fontSize: "12px", color: "#666", marginBottom: "8px" }, children: "チェック" }),
+                /* @__PURE__ */ i.jsx(
+                  "div",
+                  {
+                    style: {
+                      width: "40px",
+                      height: "40px",
+                      backgroundColor: "#ddd",
+                      borderRadius: "4px"
+                    }
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ i.jsxs("div", { children: [
+          /* @__PURE__ */ i.jsx(
+            "div",
+            {
+              style: {
+                fontSize: "12px",
+                fontWeight: "500",
+                marginBottom: "4px"
+              },
+              children: "チェックボックスのサイズ"
+            }
+          ),
+          /* @__PURE__ */ i.jsx(
+            ie,
+            {
+              value: C.checkboxSize,
+              onChange: _,
+              readOnly: f,
+              allowedUnits: ["px"],
+              config: {
+                min: 8,
+                max: 64,
+                step: 1,
+                placeholder: "16px"
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ i.jsxs(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: "1fr 1fr",
+              gap: "8px"
+            },
+            children: [
+              /* @__PURE__ */ i.jsxs("div", { children: [
+                /* @__PURE__ */ i.jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "12px",
+                      fontWeight: "500",
+                      marginBottom: "4px"
+                    },
+                    children: "枠線の太さ"
+                  }
+                ),
+                /* @__PURE__ */ i.jsx(
+                  ie,
+                  {
+                    value: C.borderWidth,
+                    onChange: k,
+                    readOnly: f,
+                    allowedUnits: ["px", "%"],
+                    config: {
+                      min: 0,
+                      step: 0.5,
+                      placeholder: "1px"
+                    }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ i.jsxs("div", { children: [
+                /* @__PURE__ */ i.jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "12px",
+                      fontWeight: "500",
+                      marginBottom: "4px"
+                    },
+                    children: "枠線の色"
+                  }
+                ),
+                /* @__PURE__ */ i.jsx(
+                  q,
+                  {
+                    value: C.borderColor,
+                    onChange: h,
+                    readOnly: f,
+                    showTextInput: !0,
+                    placeholder: "#d1d5db"
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ i.jsxs(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: "1fr 1fr",
+              gap: "8px"
+            },
+            children: [
+              /* @__PURE__ */ i.jsxs("div", { children: [
+                /* @__PURE__ */ i.jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "12px",
+                      fontWeight: "500",
+                      marginBottom: "4px"
+                    },
+                    children: "チェックマークの太さ"
+                  }
+                ),
+                /* @__PURE__ */ i.jsx(
+                  ie,
+                  {
+                    value: C.checkWidth,
+                    onChange: m,
+                    readOnly: f,
+                    allowedUnits: ["px", "%"],
+                    config: {
+                      min: 0,
+                      step: 0.5,
+                      placeholder: "3.5px"
+                    }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ i.jsxs("div", { children: [
+                /* @__PURE__ */ i.jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "12px",
+                      fontWeight: "500",
+                      marginBottom: "4px"
+                    },
+                    children: "チェックマークの色"
+                  }
+                ),
+                /* @__PURE__ */ i.jsx(
+                  q,
+                  {
+                    value: C.checkColor,
+                    onChange: b,
+                    readOnly: f,
+                    showTextInput: !0,
+                    placeholder: "#2563eb"
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ i.jsxs(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: "1fr 1fr",
+              gap: "8px"
+            },
+            children: [
+              /* @__PURE__ */ i.jsxs("div", { children: [
+                /* @__PURE__ */ i.jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "12px",
+                      fontWeight: "500",
+                      marginBottom: "4px"
+                    },
+                    children: "背景色（未チェック）"
+                  }
+                ),
+                /* @__PURE__ */ i.jsx(
+                  q,
+                  {
+                    value: C.backgroundColor,
+                    onChange: S,
+                    readOnly: f,
+                    showTextInput: !0,
+                    placeholder: "#ffffff"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ i.jsxs("div", { children: [
+                /* @__PURE__ */ i.jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "12px",
+                      fontWeight: "500",
+                      marginBottom: "4px"
+                    },
+                    children: "背景色（チェック時）"
+                  }
+                ),
+                /* @__PURE__ */ i.jsx(
+                  q,
+                  {
+                    value: C.checkedBackgroundColor,
+                    onChange: T,
+                    readOnly: f,
+                    showTextInput: !0,
+                    allowUndefined: !0,
+                    placeholder: "#ffffff"
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+$e.displayName = "CheckboxStyleEditor";
+const Or = {
+  kind: "checkbox",
+  meta: {
+    displayName: "チェックボックス",
+    description: "チェック/非チェックを選択する入力ブロック",
+    defaultSize: { w: 2, h: 2 }
+  },
+  Renderer: Be,
+  properties: {
+    ...Cr,
+    // alignment + padding
+    ...yr,
+    styleConfig: {
+      Component: $e,
+      label: "チェックボックススタイル",
+      group: "スタイル",
+      defaultValue: void 0
+    }
+  },
+  validateProps: (s) => s,
+  validateValue: (s) => typeof s == "boolean" ? s : !1
+};
+export {
+  Or as CheckboxPlugin,
+  Be as CheckboxRenderer,
+  $e as CheckboxStyleEditor
+};
+//# sourceMappingURL=index.mjs.map