@tatamicks/checkbox 0.0.2 → 0.1.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { HorizontalAlign as q, VerticalAlign as J, toPx as b, DimensionInput as B, ColorPicker as w, sizeDefinition as ce, universalProperties as de } from "@tatamicks/core";
-import ue, { forwardRef as fe, useRef as he, useImperativeHandle as pe, useMemo as Y, useCallback as v } from "react";
+import { HorizontalAlign as $, VerticalAlign as G, toPx as b, DimensionInput as B, ColorPicker as w, sizeDefinition as de, universalProperties as Y } from "@tatamicks/core";
+import ue, { forwardRef as fe, useRef as he, useImperativeHandle as pe, useMemo as F, useCallback as v } from "react";
 var A = { exports: {} }, _ = {};
 /**
  * @license React
@@ -10,10 +10,10 @@ var A = { exports: {} }, _ = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var G;
+var X;
 function xe() {
-  if (G) return _;
-  G = 1;
+  if (X) return _;
+  X = 1;
   var n = Symbol.for("react.transitional.element"), h = Symbol.for("react.fragment");
   function i(d, a, o) {
     var p = null;
@@ -42,26 +42,26 @@ var T = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var X;
+var H;
 function me() {
-  return X || (X = 1, process.env.NODE_ENV !== "production" && (function() {
+  return H || (H = 1, process.env.NODE_ENV !== "production" && (function() {
     function n(e) {
       if (e == null) return null;
       if (typeof e == "function")
-        return e.$$typeof === ae ? null : e.displayName || e.name || null;
+        return e.$$typeof === le ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
-        case R:
+        case y:
           return "Fragment";
         case N:
           return "Profiler";
         case l:
           return "StrictMode";
-        case te:
-          return "Suspense";
         case ne:
+          return "Suspense";
+        case oe:
           return "SuspenseList";
-        case ie:
+        case ae:
           return "Activity";
       }
       if (typeof e == "object")
@@ -70,19 +70,19 @@ function me() {
         ), e.$$typeof) {
           case W:
             return "Portal";
-          case ee:
+          case te:
             return e.displayName || "Context";
-          case K:
+          case ee:
             return (e._context.displayName || "Context") + ".Consumer";
           case re:
-            var t = e.render;
-            return e = e.displayName, e || (e = t.displayName || t.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case oe:
-            return t = e.displayName || null, t !== null ? t : n(e.type) || "Memo";
+            var r = e.render;
+            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case ie:
+            return r = e.displayName || null, r !== null ? r : n(e.type) || "Memo";
           case P:
-            t = e._payload, e = e._init;
+            r = e._payload, e = e._init;
             try {
-              return n(e(t));
+              return n(e(r));
             } catch {
             }
         }
@@ -94,27 +94,27 @@ function me() {
     function i(e) {
       try {
         h(e);
-        var t = !1;
+        var r = !1;
       } catch {
-        t = !0;
+        r = !0;
       }
-      if (t) {
-        t = console;
-        var c = t.error, u = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+      if (r) {
+        r = console;
+        var c = r.error, u = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
         return c.call(
-          t,
+          r,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
           u
         ), h(e);
       }
     }
     function d(e) {
-      if (e === R) return "<>";
+      if (e === y) return "<>";
       if (typeof e == "object" && e !== null && e.$$typeof === P)
         return "<...>";
       try {
-        var t = n(e);
-        return t ? "<" + t + ">" : "<...>";
+        var r = n(e);
+        return r ? "<" + r + ">" : "<...>";
       } catch {
         return "<...>";
       }
@@ -127,17 +127,17 @@ function me() {
       return Error("react-stack-top-frame");
     }
     function p(e) {
-      if ($.call(e, "key")) {
-        var t = Object.getOwnPropertyDescriptor(e, "key").get;
-        if (t && t.isReactWarning) return !1;
+      if (U.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function m(e, t) {
+    function m(e, r) {
       function c() {
-        F || (F = !0, console.error(
+        L || (L = !0, console.error(
           "%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://react.dev/link/special-props)",
-          t
+          r
         ));
       }
       c.isReactWarning = !0, Object.defineProperty(e, "key", {
@@ -147,16 +147,16 @@ function me() {
     }
     function k() {
       var e = n(this.type);
-      return U[e] || (U[e] = !0, console.error(
+      return M[e] || (M[e] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), e = this.props.ref, e !== void 0 ? e : null;
     }
-    function x(e, t, c, u, S, z) {
+    function x(e, r, c, u, S, z) {
       var f = c.ref;
       return e = {
         $$typeof: E,
         type: e,
-        key: t,
+        key: r,
         props: c,
         _owner: u
       }, (f !== void 0 ? f : null) !== null ? Object.defineProperty(e, "ref", {
@@ -184,11 +184,11 @@ function me() {
         value: z
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function g(e, t, c, u, S, z) {
-      var f = t.children;
+    function g(e, r, c, u, S, z) {
+      var f = r.children;
       if (f !== void 0)
         if (u)
-          if (le(f)) {
+          if (se(f)) {
             for (u = 0; u < f.length; u++)
               C(f[u]);
             Object.freeze && Object.freeze(f);
@@ -197,12 +197,12 @@ function me() {
               "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 C(f);
-      if ($.call(t, "key")) {
+      if (U.call(r, "key")) {
         f = n(e);
-        var y = Object.keys(t).filter(function(se) {
-          return se !== "key";
+        var R = Object.keys(r).filter(function(ce) {
+          return ce !== "key";
         });
-        u = 0 < y.length ? "{key: someKey, " + y.join(": ..., ") + ": ...}" : "{key: someKey}", V[f + u] || (y = 0 < y.length ? "{" + y.join(": ..., ") + ": ...}" : "{}", console.error(
+        u = 0 < R.length ? "{key: someKey, " + R.join(": ..., ") + ": ...}" : "{key: someKey}", J[f + u] || (R = 0 < R.length ? "{" + R.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
@@ -211,15 +211,15 @@ React keys must be passed directly to JSX without using spread:
   <%s key={someKey} {...props} />`,
           u,
           f,
-          y,
+          R,
           f
-        ), V[f + u] = !0);
+        ), J[f + u] = !0);
       }
-      if (f = null, c !== void 0 && (i(c), f = "" + c), p(t) && (i(t.key), f = "" + t.key), "key" in t) {
+      if (f = null, c !== void 0 && (i(c), f = "" + c), p(r) && (i(r.key), f = "" + r.key), "key" in r) {
         c = {};
-        for (var D in t)
-          D !== "key" && (c[D] = t[D]);
-      } else c = t;
+        for (var D in r)
+          D !== "key" && (c[D] = r[D]);
+      } else c = r;
       return f && m(
         c,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
@@ -238,7 +238,7 @@ React keys must be passed directly to JSX without using spread:
     function j(e) {
       return typeof e == "object" && e !== null && e.$$typeof === E;
     }
-    var s = ue, E = Symbol.for("react.transitional.element"), W = Symbol.for("react.portal"), R = Symbol.for("react.fragment"), l = Symbol.for("react.strict_mode"), N = Symbol.for("react.profiler"), K = Symbol.for("react.consumer"), ee = Symbol.for("react.context"), re = Symbol.for("react.forward_ref"), te = Symbol.for("react.suspense"), ne = Symbol.for("react.suspense_list"), oe = Symbol.for("react.memo"), P = Symbol.for("react.lazy"), ie = Symbol.for("react.activity"), ae = Symbol.for("react.client.reference"), I = s.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, $ = Object.prototype.hasOwnProperty, le = Array.isArray, O = console.createTask ? console.createTask : function() {
+    var s = ue, E = Symbol.for("react.transitional.element"), W = Symbol.for("react.portal"), y = Symbol.for("react.fragment"), l = Symbol.for("react.strict_mode"), N = Symbol.for("react.profiler"), ee = Symbol.for("react.consumer"), te = Symbol.for("react.context"), re = Symbol.for("react.forward_ref"), ne = Symbol.for("react.suspense"), oe = Symbol.for("react.suspense_list"), ie = Symbol.for("react.memo"), P = Symbol.for("react.lazy"), ae = Symbol.for("react.activity"), le = Symbol.for("react.client.reference"), I = s.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, U = Object.prototype.hasOwnProperty, se = Array.isArray, O = console.createTask ? console.createTask : function() {
       return null;
     };
     s = {
@@ -246,38 +246,38 @@ React keys must be passed directly to JSX without using spread:
         return e();
       }
     };
-    var F, U = {}, L = s.react_stack_bottom_frame.bind(
+    var L, M = {}, V = s.react_stack_bottom_frame.bind(
       s,
       o
-    )(), M = O(d(o)), V = {};
-    T.Fragment = R, T.jsx = function(e, t, c) {
+    )(), q = O(d(o)), J = {};
+    T.Fragment = y, T.jsx = function(e, r, c) {
       var u = 1e4 > I.recentlyCreatedOwnerStacks++;
       return g(
         e,
-        t,
+        r,
         c,
         !1,
-        u ? Error("react-stack-top-frame") : L,
-        u ? O(d(e)) : M
+        u ? Error("react-stack-top-frame") : V,
+        u ? O(d(e)) : q
       );
-    }, T.jsxs = function(e, t, c) {
+    }, T.jsxs = function(e, r, c) {
       var u = 1e4 > I.recentlyCreatedOwnerStacks++;
       return g(
         e,
-        t,
+        r,
         c,
         !0,
-        u ? Error("react-stack-top-frame") : L,
-        u ? O(d(e)) : M
+        u ? Error("react-stack-top-frame") : V,
+        u ? O(d(e)) : q
       );
     };
   })()), T;
 }
-var H;
+var Z;
 function ge() {
-  return H || (H = 1, process.env.NODE_ENV === "production" ? A.exports = xe() : A.exports = me()), A.exports;
+  return Z || (Z = 1, process.env.NODE_ENV === "production" ? A.exports = xe() : A.exports = me()), A.exports;
 }
-var r = ge();
+var t = ge();
 function be({
   size: n = 16,
   checked: h = !1,
@@ -289,7 +289,7 @@ function be({
   checkedBackgroundColor: m
 }) {
   const k = h && m ? m : p;
-  return /* @__PURE__ */ r.jsxs(
+  return /* @__PURE__ */ t.jsxs(
     "svg",
     {
       width: n,
@@ -298,7 +298,7 @@ function be({
       "aria-hidden": "true",
       focusable: "false",
       children: [
-        /* @__PURE__ */ r.jsx(
+        /* @__PURE__ */ t.jsx(
           "rect",
           {
             x: i / 2,
@@ -310,7 +310,7 @@ function be({
             strokeWidth: i
           }
         ),
-        h ? /* @__PURE__ */ r.jsx(
+        h ? /* @__PURE__ */ t.jsx(
           "path",
           {
             d: "M3 11l4 4L17 4",
@@ -323,7 +323,7 @@ function be({
     }
   );
 }
-const Z = fe(({ props: n, value: h, onChange: i, readOnly: d }, a) => {
+const Q = fe(({ props: n, value: h, onChange: i, readOnly: d }, a) => {
   const o = he(null);
   pe(
     a,
@@ -337,7 +337,7 @@ const Z = fe(({ props: n, value: h, onChange: i, readOnly: d }, a) => {
   );
   const p = h ?? !1, m = (l) => {
     d || i(l.target.checked);
-  }, k = Y(() => {
+  }, k = F(() => {
     const l = {
       width: "100%",
       height: "100%",
@@ -346,10 +346,10 @@ const Z = fe(({ props: n, value: h, onChange: i, readOnly: d }, a) => {
       overflow: "hidden"
     };
     switch (n.justifyContent) {
-      case q.left:
+      case $.left:
         l.justifyContent = "flex-start";
         break;
-      case q.right:
+      case $.right:
         l.justifyContent = "flex-end";
         break;
       default:
@@ -357,10 +357,10 @@ const Z = fe(({ props: n, value: h, onChange: i, readOnly: d }, a) => {
         break;
     }
     switch (n.alignItems) {
-      case J.top:
+      case G.top:
         l.alignItems = "flex-start";
         break;
-      case J.bottom:
+      case G.bottom:
         l.alignItems = "flex-end";
         break;
       default:
@@ -394,10 +394,10 @@ const Z = fe(({ props: n, value: h, onChange: i, readOnly: d }, a) => {
     width: g,
     height: g,
     position: "relative"
-  }, R = () => {
+  }, y = () => {
     !d && i && i(!p);
   };
-  return /* @__PURE__ */ r.jsxs(
+  return /* @__PURE__ */ t.jsxs(
     "div",
     {
       style: {
@@ -409,12 +409,12 @@ const Z = fe(({ props: n, value: h, onChange: i, readOnly: d }, a) => {
       "aria-disabled": d,
       "aria-label": "Checkbox",
       tabIndex: d ? -1 : 0,
-      onClick: R,
+      onClick: y,
       onKeyDown: (l) => {
-        !d && (l.key === " " || l.key === "Enter") && (l.preventDefault(), R());
+        !d && (l.key === " " || l.key === "Enter") && (l.preventDefault(), y());
       },
       children: [
-        /* @__PURE__ */ r.jsx(
+        /* @__PURE__ */ t.jsx(
           "input",
           {
             ref: o,
@@ -427,7 +427,7 @@ const Z = fe(({ props: n, value: h, onChange: i, readOnly: d }, a) => {
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ r.jsx("div", { style: W, children: /* @__PURE__ */ r.jsx("div", { style: E, "aria-hidden": "true", children: /* @__PURE__ */ r.jsx(
+        /* @__PURE__ */ t.jsx("div", { style: W, children: /* @__PURE__ */ t.jsx("div", { style: E, "aria-hidden": "true", children: /* @__PURE__ */ t.jsx(
           be,
           {
             size: g,
@@ -444,13 +444,13 @@ const Z = fe(({ props: n, value: h, onChange: i, readOnly: d }, a) => {
     }
   );
 });
-Z.displayName = "CheckboxRenderer";
-const Q = ({
+Q.displayName = "CheckboxRenderer";
+const K = ({
   value: n,
   onChange: h,
   readOnly: i = !1
 }) => {
-  const d = Y(
+  const d = F(
     () => ({
       checkboxSize: { value: 16, unit: "px" },
       borderWidth: { value: 1, unit: "px" },
@@ -460,7 +460,7 @@ const Q = ({
       backgroundColor: "#ffffff"
     }),
     []
-  ), a = Y(
+  ), a = F(
     () => ({
       ...d,
       ...n
@@ -496,7 +496,7 @@ const Q = ({
     (s) => o("checkedBackgroundColor", s),
     [o]
   );
-  return /* @__PURE__ */ r.jsxs(
+  return /* @__PURE__ */ t.jsxs(
     "div",
     {
       style: {
@@ -506,7 +506,7 @@ const Q = ({
         padding: "12px"
       },
       children: [
-        /* @__PURE__ */ r.jsxs(
+        /* @__PURE__ */ t.jsxs(
           "div",
           {
             style: {
@@ -519,9 +519,9 @@ const Q = ({
               gap: "16px"
             },
             children: [
-              /* @__PURE__ */ r.jsxs("div", { style: { textAlign: "center" }, children: [
-                /* @__PURE__ */ r.jsx("div", { style: { fontSize: "12px", color: "#666", marginBottom: "8px" }, children: "未チェック" }),
-                /* @__PURE__ */ r.jsx(
+              /* @__PURE__ */ t.jsxs("div", { style: { textAlign: "center" }, children: [
+                /* @__PURE__ */ t.jsx("div", { style: { fontSize: "12px", color: "#666", marginBottom: "8px" }, children: "未チェック" }),
+                /* @__PURE__ */ t.jsx(
                   "div",
                   {
                     style: {
@@ -533,9 +533,9 @@ const Q = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ r.jsxs("div", { style: { textAlign: "center" }, children: [
-                /* @__PURE__ */ r.jsx("div", { style: { fontSize: "12px", color: "#666", marginBottom: "8px" }, children: "チェック" }),
-                /* @__PURE__ */ r.jsx(
+              /* @__PURE__ */ t.jsxs("div", { style: { textAlign: "center" }, children: [
+                /* @__PURE__ */ t.jsx("div", { style: { fontSize: "12px", color: "#666", marginBottom: "8px" }, children: "チェック" }),
+                /* @__PURE__ */ t.jsx(
                   "div",
                   {
                     style: {
@@ -550,8 +550,8 @@ const Q = ({
             ]
           }
         ),
-        /* @__PURE__ */ r.jsxs("div", { children: [
-          /* @__PURE__ */ r.jsx(
+        /* @__PURE__ */ t.jsxs("div", { children: [
+          /* @__PURE__ */ t.jsx(
             "div",
             {
               style: {
@@ -562,7 +562,7 @@ const Q = ({
               children: "チェックボックスのサイズ"
             }
           ),
-          /* @__PURE__ */ r.jsx(
+          /* @__PURE__ */ t.jsx(
             B,
             {
               value: a.checkboxSize,
@@ -578,7 +578,7 @@ const Q = ({
             }
           )
         ] }),
-        /* @__PURE__ */ r.jsxs(
+        /* @__PURE__ */ t.jsxs(
           "div",
           {
             style: {
@@ -587,8 +587,8 @@ const Q = ({
               gap: "8px"
             },
             children: [
-              /* @__PURE__ */ r.jsxs("div", { children: [
-                /* @__PURE__ */ r.jsx(
+              /* @__PURE__ */ t.jsxs("div", { children: [
+                /* @__PURE__ */ t.jsx(
                   "div",
                   {
                     style: {
@@ -599,7 +599,7 @@ const Q = ({
                     children: "枠線の太さ"
                   }
                 ),
-                /* @__PURE__ */ r.jsx(
+                /* @__PURE__ */ t.jsx(
                   B,
                   {
                     value: a.borderWidth,
@@ -614,8 +614,8 @@ const Q = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ r.jsxs("div", { children: [
-                /* @__PURE__ */ r.jsx(
+              /* @__PURE__ */ t.jsxs("div", { children: [
+                /* @__PURE__ */ t.jsx(
                   "div",
                   {
                     style: {
@@ -626,7 +626,7 @@ const Q = ({
                     children: "枠線の色"
                   }
                 ),
-                /* @__PURE__ */ r.jsx(
+                /* @__PURE__ */ t.jsx(
                   w,
                   {
                     value: a.borderColor,
@@ -640,7 +640,7 @@ const Q = ({
             ]
           }
         ),
-        /* @__PURE__ */ r.jsxs(
+        /* @__PURE__ */ t.jsxs(
           "div",
           {
             style: {
@@ -649,8 +649,8 @@ const Q = ({
               gap: "8px"
             },
             children: [
-              /* @__PURE__ */ r.jsxs("div", { children: [
-                /* @__PURE__ */ r.jsx(
+              /* @__PURE__ */ t.jsxs("div", { children: [
+                /* @__PURE__ */ t.jsx(
                   "div",
                   {
                     style: {
@@ -661,7 +661,7 @@ const Q = ({
                     children: "チェックマークの太さ"
                   }
                 ),
-                /* @__PURE__ */ r.jsx(
+                /* @__PURE__ */ t.jsx(
                   B,
                   {
                     value: a.checkWidth,
@@ -676,8 +676,8 @@ const Q = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ r.jsxs("div", { children: [
-                /* @__PURE__ */ r.jsx(
+              /* @__PURE__ */ t.jsxs("div", { children: [
+                /* @__PURE__ */ t.jsx(
                   "div",
                   {
                     style: {
@@ -688,7 +688,7 @@ const Q = ({
                     children: "チェックマークの色"
                   }
                 ),
-                /* @__PURE__ */ r.jsx(
+                /* @__PURE__ */ t.jsx(
                   w,
                   {
                     value: a.checkColor,
@@ -702,7 +702,7 @@ const Q = ({
             ]
           }
         ),
-        /* @__PURE__ */ r.jsxs(
+        /* @__PURE__ */ t.jsxs(
           "div",
           {
             style: {
@@ -711,8 +711,8 @@ const Q = ({
               gap: "8px"
             },
             children: [
-              /* @__PURE__ */ r.jsxs("div", { children: [
-                /* @__PURE__ */ r.jsx(
+              /* @__PURE__ */ t.jsxs("div", { children: [
+                /* @__PURE__ */ t.jsx(
                   "div",
                   {
                     style: {
@@ -723,7 +723,7 @@ const Q = ({
                     children: "背景色（未チェック）"
                   }
                 ),
-                /* @__PURE__ */ r.jsx(
+                /* @__PURE__ */ t.jsx(
                   w,
                   {
                     value: a.backgroundColor,
@@ -734,8 +734,8 @@ const Q = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ r.jsxs("div", { children: [
-                /* @__PURE__ */ r.jsx(
+              /* @__PURE__ */ t.jsxs("div", { children: [
+                /* @__PURE__ */ t.jsx(
                   "div",
                   {
                     style: {
@@ -746,7 +746,7 @@ const Q = ({
                     children: "背景色（チェック時）"
                   }
                 ),
-                /* @__PURE__ */ r.jsx(
+                /* @__PURE__ */ t.jsx(
                   w,
                   {
                     value: a.checkedBackgroundColor,
@@ -765,7 +765,7 @@ const Q = ({
     }
   );
 };
-Q.displayName = "CheckboxStyleEditor";
+K.displayName = "CheckboxStyleEditor";
 const Ce = {
   kind: "checkbox",
   meta: {
@@ -773,13 +773,18 @@ const Ce = {
     description: "チェック/非チェックを選択する入力ブロック",
     defaultSize: { w: 2, h: 2 }
   },
-  Renderer: Z,
+  Renderer: Q,
   properties: {
-    ...de,
+    ...Y,
     // alignment + padding
-    ...ce,
+    // チェックボックスは中央配置をデフォルトに
+    justifyContent: Y.justifyContent !== !1 ? {
+      ...Y.justifyContent,
+      defaultValue: $.center
+    } : !1,
+    ...de,
     styleConfig: {
-      Component: Q,
+      Component: K,
       label: "チェックボックススタイル",
       group: "スタイル",
       defaultValue: void 0
@@ -790,7 +795,7 @@ const Ce = {
 };
 export {
   Ce as CheckboxPlugin,
-  Z as CheckboxRenderer,
-  Q as CheckboxStyleEditor
+  Q as CheckboxRenderer,
+  K as CheckboxStyleEditor
 };
 //# sourceMappingURL=index.mjs.map