@tatamicks/select 0.0.2 → 0.1.0

package/dist/index.mjs

@@ -1,6 +1,6 @@
-import ce, { useCallback as w, useId as ue, forwardRef as fe, useRef as de, useImperativeHandle as me, useMemo as A } from "react";
-import { HorizontalAlign as U, VerticalAlign as q, toPx as y, NoteMode as J, validationDefinition as pe, fontStyleDefinition as be, placeholderDefinition as _e, universalProperties as ve } from "@tatamicks/core";
-var P = { exports: {} }, N = {};
+import ce, { useCallback as j, useId as ue, forwardRef as fe, useRef as de, useImperativeHandle as me, useMemo as P } from "react";
+import { ColorPicker as be, HorizontalAlign as C, VerticalAlign as q, toPx as T, NoteMode as J, validationDefinition as pe, fontStyleDefinition as he, placeholderDefinition as _e, universalProperties as ve } from "@tatamicks/core";
+var I = { exports: {} }, N = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -11,26 +11,26 @@ var P = { exports: {} }, N = {};
  * LICENSE file in the root directory of this source tree.
  */
 var X;
-function he() {
+function ge() {
   if (X) return N;
   X = 1;
-  var t = Symbol.for("react.transitional.element"), s = Symbol.for("react.fragment");
-  function v(l, i, _) {
+  var t = Symbol.for("react.transitional.element"), c = Symbol.for("react.fragment");
+  function _(l, i, h) {
     var g = null;
-    if (_ !== void 0 && (g = "" + _), i.key !== void 0 && (g = "" + i.key), "key" in i) {
-      _ = {};
-      for (var h in i)
-        h !== "key" && (_[h] = i[h]);
-    } else _ = i;
-    return i = _.ref, {
+    if (h !== void 0 && (g = "" + h), i.key !== void 0 && (g = "" + i.key), "key" in i) {
+      h = {};
+      for (var v in i)
+        v !== "key" && (h[v] = i[v]);
+    } else h = i;
+    return i = h.ref, {
       $$typeof: t,
       type: l,
       key: g,
       ref: i !== void 0 ? i : null,
-      props: _
+      props: h
     };
   }
-  return N.Fragment = s, N.jsx = v, N.jsxs = v, N;
+  return N.Fragment = c, N.jsx = _, N.jsxs = _, N;
 }
 var O = {};
 /**
@@ -43,7 +43,7 @@ var O = {};
  * LICENSE file in the root directory of this source tree.
  */
 var H;
-function ge() {
+function Ee() {
   return H || (H = 1, process.env.NODE_ENV !== "production" && (function() {
     function t(e) {
       if (e == null) return null;
@@ -51,15 +51,15 @@ function ge() {
         return e.$$typeof === le ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
-        case d:
+        case f:
           return "Fragment";
-        case T:
+        case k:
           return "Profiler";
         case R:
           return "StrictMode";
         case re:
           return "Suspense";
-        case oe:
+        case ne:
           return "SuspenseList";
         case ae:
           return "Activity";
@@ -72,72 +72,72 @@ function ge() {
             return "Portal";
           case ee:
             return e.displayName || "Context";
-          case I:
+          case D:
             return (e._context.displayName || "Context") + ".Consumer";
           case te:
-            var o = e.render;
-            return e = e.displayName, e || (e = o.displayName || o.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case ne:
-            return o = e.displayName || null, o !== null ? o : t(e.type) || "Memo";
-          case D:
-            o = e._payload, e = e._init;
+            var n = e.render;
+            return e = e.displayName, e || (e = n.displayName || n.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case oe:
+            return n = e.displayName || null, n !== null ? n : t(e.type) || "Memo";
+          case $:
+            n = e._payload, e = e._init;
             try {
-              return t(e(o));
+              return t(e(n));
             } catch {
             }
         }
       return null;
     }
-    function s(e) {
+    function c(e) {
       return "" + e;
     }
-    function v(e) {
+    function _(e) {
       try {
-        s(e);
-        var o = !1;
+        c(e);
+        var n = !1;
       } catch {
-        o = !0;
+        n = !0;
       }
-      if (o) {
-        o = console;
-        var u = o.error, m = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+      if (n) {
+        n = console;
+        var u = n.error, d = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
         return u.call(
-          o,
+          n,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          m
-        ), s(e);
+          d
+        ), c(e);
       }
     }
     function l(e) {
-      if (e === d) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === D)
+      if (e === f) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === $)
         return "<...>";
       try {
-        var o = t(e);
-        return o ? "<" + o + ">" : "<...>";
+        var n = t(e);
+        return n ? "<" + n + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
     function i() {
-      var e = $.A;
+      var e = L.A;
       return e === null ? null : e.getOwner();
     }
-    function _() {
+    function h() {
       return Error("react-stack-top-frame");
     }
     function g(e) {
-      if (B.call(e, "key")) {
-        var o = Object.getOwnPropertyDescriptor(e, "key").get;
-        if (o && o.isReactWarning) return !1;
+      if (M.call(e, "key")) {
+        var n = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (n && n.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function h(e, o) {
+    function v(e, n) {
       function u() {
-        z || (z = !0, console.error(
+        V || (V = !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)",
-          o
+          n
         ));
       }
       u.isReactWarning = !0, Object.defineProperty(e, "key", {
@@ -147,19 +147,19 @@ function ge() {
     }
     function E() {
       var e = t(this.type);
-      return M[e] || (M[e] = !0, console.error(
+      return W[e] || (W[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 j(e, o, u, m, C, F) {
-      var p = u.ref;
+    function S(e, n, u, d, A, F) {
+      var m = u.ref;
       return e = {
-        $$typeof: f,
+        $$typeof: p,
         type: e,
-        key: o,
+        key: n,
         props: u,
-        _owner: m
-      }, (p !== void 0 ? p : null) !== null ? Object.defineProperty(e, "ref", {
+        _owner: d
+      }, (m !== void 0 ? m : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
         get: E
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
@@ -176,7 +176,7 @@ function ge() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: C
+        value: A
       }), Object.defineProperty(e, "_debugTask", {
         configurable: !1,
         enumerable: !1,
@@ -184,280 +184,272 @@ function ge() {
         value: F
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function k(e, o, u, m, C, F) {
-      var p = o.children;
-      if (p !== void 0)
-        if (m)
-          if (ie(p)) {
-            for (m = 0; m < p.length; m++)
-              x(p[m]);
-            Object.freeze && Object.freeze(p);
+    function w(e, n, u, d, A, F) {
+      var m = n.children;
+      if (m !== void 0)
+        if (d)
+          if (ie(m)) {
+            for (d = 0; d < m.length; d++)
+              x(m[d]);
+            Object.freeze && Object.freeze(m);
           } else
             console.error(
               "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 x(p);
-      if (B.call(o, "key")) {
-        p = t(e);
-        var S = Object.keys(o).filter(function(se) {
+        else x(m);
+      if (M.call(n, "key")) {
+        m = t(e);
+        var y = Object.keys(n).filter(function(se) {
           return se !== "key";
         });
-        m = 0 < S.length ? "{key: someKey, " + S.join(": ..., ") + ": ...}" : "{key: someKey}", G[p + m] || (S = 0 < S.length ? "{" + S.join(": ..., ") + ": ...}" : "{}", console.error(
+        d = 0 < y.length ? "{key: someKey, " + y.join(": ..., ") + ": ...}" : "{key: someKey}", U[m + d] || (y = 0 < y.length ? "{" + y.join(": ..., ") + ": ...}" : "{}", console.error(
           `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} />`,
+          d,
           m,
-          p,
-          S,
-          p
-        ), G[p + m] = !0);
+          y,
+          m
+        ), U[m + d] = !0);
       }
-      if (p = null, u !== void 0 && (v(u), p = "" + u), g(o) && (v(o.key), p = "" + o.key), "key" in o) {
+      if (m = null, u !== void 0 && (_(u), m = "" + u), g(n) && (_(n.key), m = "" + n.key), "key" in n) {
         u = {};
-        for (var L in o)
-          L !== "key" && (u[L] = o[L]);
-      } else u = o;
-      return p && h(
+        for (var z in n)
+          z !== "key" && (u[z] = n[z]);
+      } else u = n;
+      return m && v(
         u,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), j(
+      ), S(
         e,
-        p,
+        m,
         u,
         i(),
-        C,
+        A,
         F
       );
     }
     function x(e) {
-      a(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === D && (e._payload.status === "fulfilled" ? a(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+      a(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === $ && (e._payload.status === "fulfilled" ? a(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
     }
     function a(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === f;
+      return typeof e == "object" && e !== null && e.$$typeof === p;
     }
-    var n = ce, f = Symbol.for("react.transitional.element"), r = Symbol.for("react.portal"), d = Symbol.for("react.fragment"), R = Symbol.for("react.strict_mode"), T = Symbol.for("react.profiler"), I = Symbol.for("react.consumer"), ee = Symbol.for("react.context"), te = Symbol.for("react.forward_ref"), re = Symbol.for("react.suspense"), oe = Symbol.for("react.suspense_list"), ne = Symbol.for("react.memo"), D = Symbol.for("react.lazy"), ae = Symbol.for("react.activity"), le = Symbol.for("react.client.reference"), $ = n.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, B = Object.prototype.hasOwnProperty, ie = Array.isArray, Y = console.createTask ? console.createTask : function() {
+    var o = ce, p = Symbol.for("react.transitional.element"), r = Symbol.for("react.portal"), f = Symbol.for("react.fragment"), R = Symbol.for("react.strict_mode"), k = Symbol.for("react.profiler"), D = Symbol.for("react.consumer"), ee = Symbol.for("react.context"), te = Symbol.for("react.forward_ref"), re = Symbol.for("react.suspense"), ne = Symbol.for("react.suspense_list"), oe = Symbol.for("react.memo"), $ = Symbol.for("react.lazy"), ae = Symbol.for("react.activity"), le = Symbol.for("react.client.reference"), L = o.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, M = Object.prototype.hasOwnProperty, ie = Array.isArray, Y = console.createTask ? console.createTask : function() {
       return null;
     };
-    n = {
+    o = {
       react_stack_bottom_frame: function(e) {
         return e();
       }
     };
-    var z, M = {}, V = n.react_stack_bottom_frame.bind(
-      n,
-      _
-    )(), W = Y(l(_)), G = {};
-    O.Fragment = d, O.jsx = function(e, o, u) {
-      var m = 1e4 > $.recentlyCreatedOwnerStacks++;
-      return k(
+    var V, W = {}, B = o.react_stack_bottom_frame.bind(
+      o,
+      h
+    )(), G = Y(l(h)), U = {};
+    O.Fragment = f, O.jsx = function(e, n, u) {
+      var d = 1e4 > L.recentlyCreatedOwnerStacks++;
+      return w(
         e,
-        o,
+        n,
         u,
         !1,
-        m ? Error("react-stack-top-frame") : V,
-        m ? Y(l(e)) : W
+        d ? Error("react-stack-top-frame") : B,
+        d ? Y(l(e)) : G
       );
-    }, O.jsxs = function(e, o, u) {
-      var m = 1e4 > $.recentlyCreatedOwnerStacks++;
-      return k(
+    }, O.jsxs = function(e, n, u) {
+      var d = 1e4 > L.recentlyCreatedOwnerStacks++;
+      return w(
         e,
-        o,
+        n,
         u,
         !0,
-        m ? Error("react-stack-top-frame") : V,
-        m ? Y(l(e)) : W
+        d ? Error("react-stack-top-frame") : B,
+        d ? Y(l(e)) : G
       );
     };
   })()), O;
 }
 var Z;
-function Ee() {
-  return Z || (Z = 1, process.env.NODE_ENV === "production" ? P.exports = he() : P.exports = ge()), P.exports;
+function Re() {
+  return Z || (Z = 1, process.env.NODE_ENV === "production" ? I.exports = ge() : I.exports = Ee()), I.exports;
 }
-var c = Ee();
-const Re = "_container_puorg_1", xe = "_defaultSection_puorg_15", je = "_optionsList_puorg_35", ke = "_optionItem_puorg_51", Te = "_inputGroup_puorg_71", Se = "_label_puorg_83", we = "_input_puorg_71", ye = "_colorInput_puorg_133", Ne = "_clearColorButton_puorg_163", Oe = "_removeButton_puorg_215", Ce = "_addButton_puorg_269", b = {
-  container: Re,
-  defaultSection: xe,
-  optionsList: je,
-  optionItem: ke,
-  inputGroup: Te,
-  label: Se,
-  input: we,
-  colorInput: ye,
-  clearColorButton: Ne,
-  removeButton: Oe,
-  addButton: Ce
+var s = Re();
+const xe = "_container_y9aws_1", we = "_defaultSection_y9aws_8", ke = "_optionsList_y9aws_18", ye = "_optionItem_y9aws_26", je = "_header_y9aws_35", Te = "_headerLabel_y9aws_42", Se = "_inputGroup_y9aws_48", Ne = "_label_y9aws_54", Oe = "_input_y9aws_48", Ae = "_removeButton_y9aws_122", Pe = "_addButton_y9aws_145", b = {
+  container: xe,
+  defaultSection: we,
+  optionsList: ke,
+  optionItem: ye,
+  header: je,
+  headerLabel: Te,
+  inputGroup: Se,
+  label: Ne,
+  input: Oe,
+  removeButton: Ae,
+  addButton: Pe
 }, Q = ({
   value: t,
-  onChange: s,
-  readOnly: v = !1
+  onChange: c,
+  readOnly: _ = !1
 }) => {
-  const { options: l, defaultOption: i } = t, _ = w(() => {
+  const { options: l, defaultOption: i } = t, h = j(() => {
     const a = {
       label: `選択肢${l.length + 1}`,
       value: `option${l.length + 1}`
     };
-    s({ ...t, options: [...l, a] });
-  }, [l, t, s]), g = w(
+    c({ ...t, options: [...l, a] });
+  }, [l, t, c]), g = j(
     (a) => {
-      var d;
-      const n = l.filter((R, T) => T !== a), f = (d = l[a]) == null ? void 0 : d.value;
-      s({ options: n, defaultOption: f !== void 0 && i === f ? void 0 : i });
+      var f;
+      const o = l.filter((R, k) => k !== a), p = (f = l[a]) == null ? void 0 : f.value;
+      c({ options: o, defaultOption: p !== void 0 && i === p ? void 0 : i });
     },
-    [l, i, s]
-  ), h = w(
-    (a, n) => {
-      const f = l.map(
-        (r, d) => d === a ? { ...r, label: n } : r
+    [l, i, c]
+  ), v = j(
+    (a, o) => {
+      const p = l.map(
+        (r, f) => f === a ? { ...r, label: o } : r
       );
-      s({ ...t, options: f });
+      c({ ...t, options: p });
     },
-    [l, t, s]
-  ), E = w(
-    (a, n) => {
+    [l, t, c]
+  ), E = j(
+    (a, o) => {
       var R;
-      const f = (R = l[a]) == null ? void 0 : R.value, r = l.map(
-        (T, I) => I === a ? { ...T, value: n } : T
+      const p = (R = l[a]) == null ? void 0 : R.value, r = l.map(
+        (k, D) => D === a ? { ...k, value: o } : k
       );
-      s({ options: r, defaultOption: i === f ? n : i });
+      c({ options: r, defaultOption: i === p ? o : i });
     },
-    [l, i, s]
-  ), j = w(
-    (a, n) => {
-      const f = l.map(
-        (r, d) => d === a ? { ...r, color: n || void 0 } : r
+    [l, i, c]
+  ), S = j(
+    (a, o) => {
+      const p = l.map(
+        (r, f) => f === a ? { ...r, color: o || void 0 } : r
       );
-      s({ ...t, options: f });
+      c({ ...t, options: p });
     },
-    [l, t, s]
-  ), k = w(
+    [l, t, c]
+  ), w = j(
     (a) => {
-      s({ ...t, defaultOption: a || void 0 });
+      c({ ...t, defaultOption: a || void 0 });
     },
-    [t, s]
+    [t, c]
   ), x = ue();
-  return /* @__PURE__ */ c.jsxs("div", { className: b.container, children: [
-    /* @__PURE__ */ c.jsxs("div", { className: b.defaultSection, children: [
-      /* @__PURE__ */ c.jsx("label", { className: b.label, htmlFor: x, children: "初期選択値:" }),
-      /* @__PURE__ */ c.jsxs(
+  return /* @__PURE__ */ s.jsxs("div", { className: b.container, children: [
+    /* @__PURE__ */ s.jsxs("div", { className: b.defaultSection, children: [
+      /* @__PURE__ */ s.jsx("label", { className: b.label, htmlFor: x, children: "初期選択値:" }),
+      /* @__PURE__ */ s.jsxs(
         "select",
         {
           id: x,
           className: b.input,
           value: i || "",
-          onChange: (a) => k(a.target.value),
-          disabled: v,
+          onChange: (a) => w(a.target.value),
+          disabled: _,
           children: [
-            /* @__PURE__ */ c.jsx("option", { value: "", children: "未選択" }),
-            l.map((a, n) => (
-              // biome-ignore lint/suspicious/noArrayIndexKey: 選択肢の順序は重要で、固有IDがないためindexを使用
-              /* @__PURE__ */ c.jsx("option", { value: a.value, children: a.label }, n)
-            ))
+            /* @__PURE__ */ s.jsx("option", { value: "", children: "placeholder" }),
+            l.map((a, o) => {
+              const p = `option-${o}`;
+              return /* @__PURE__ */ s.jsx("option", { value: a.value, children: a.label }, p);
+            })
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ c.jsx("div", { className: b.optionsList, children: l.map((a, n) => (
-      // biome-ignore lint/suspicious/noArrayIndexKey: 選択肢の順序は重要で、固有IDがないためindexを使用
-      /* @__PURE__ */ c.jsxs("div", { className: b.optionItem, children: [
-        /* @__PURE__ */ c.jsxs("div", { className: b.inputGroup, children: [
-          /* @__PURE__ */ c.jsx("label", { className: b.label, htmlFor: `label-${n}`, children: "ラベル:" }),
-          /* @__PURE__ */ c.jsx(
+    /* @__PURE__ */ s.jsx("div", { className: b.optionsList, children: l.map((a, o) => {
+      const p = `option-${o}`;
+      return /* @__PURE__ */ s.jsxs("div", { className: b.optionItem, children: [
+        /* @__PURE__ */ s.jsxs("div", { className: b.header, children: [
+          /* @__PURE__ */ s.jsxs("span", { className: b.headerLabel, children: [
+            "オプション",
+            o + 1
+          ] }),
+          /* @__PURE__ */ s.jsx(
+            "button",
+            {
+              type: "button",
+              className: b.removeButton,
+              onClick: () => g(o),
+              disabled: _ || l.length === 1,
+              title: "削除",
+              children: "削除"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ s.jsxs("div", { className: b.inputGroup, children: [
+          /* @__PURE__ */ s.jsx("label", { className: b.label, htmlFor: `label-${o}`, children: "ラベル" }),
+          /* @__PURE__ */ s.jsx(
             "input",
             {
               type: "text",
-              id: `label-${n}`,
+              id: `label-${o}`,
               className: b.input,
               value: a.label,
-              onChange: (f) => h(n, f.target.value),
-              disabled: v,
+              onChange: (r) => v(o, r.target.value),
+              disabled: _,
               placeholder: "表示名"
             }
           )
         ] }),
-        /* @__PURE__ */ c.jsxs("div", { className: b.inputGroup, children: [
-          /* @__PURE__ */ c.jsx("label", { className: b.label, htmlFor: `value-${n}`, children: "値:" }),
-          /* @__PURE__ */ c.jsx(
+        /* @__PURE__ */ s.jsxs("div", { className: b.inputGroup, children: [
+          /* @__PURE__ */ s.jsx("label", { className: b.label, htmlFor: `value-${o}`, children: "値" }),
+          /* @__PURE__ */ s.jsx(
             "input",
             {
               type: "text",
-              id: `value-${n}`,
+              id: `value-${o}`,
               className: b.input,
               value: a.value,
-              onChange: (f) => E(n, f.target.value),
-              disabled: v,
+              onChange: (r) => E(o, r.target.value),
+              disabled: _,
               placeholder: "内部値"
             }
           )
         ] }),
-        /* @__PURE__ */ c.jsxs("div", { className: b.inputGroup, children: [
-          /* @__PURE__ */ c.jsx("label", { className: b.label, htmlFor: `color-${n}`, children: "色:" }),
-          /* @__PURE__ */ c.jsx(
-            "input",
+        /* @__PURE__ */ s.jsxs("div", { className: b.inputGroup, children: [
+          /* @__PURE__ */ s.jsx("label", { className: b.label, htmlFor: `color-${o}`, children: "色" }),
+          /* @__PURE__ */ s.jsx(
+            be,
             {
-              type: "color",
-              id: `color-${n}`,
-              className: b.colorInput,
-              value: a.color || "#ffffff",
-              onChange: (f) => j(n, f.target.value),
-              disabled: v,
-              title: "背景色"
-            }
-          ),
-          a.color && /* @__PURE__ */ c.jsx(
-            "button",
-            {
-              type: "button",
-              className: b.clearColorButton,
-              onClick: () => j(n, ""),
-              disabled: v,
-              title: "色をクリア",
-              children: "✕"
+              value: a.color,
+              onChange: (r) => S(o, r || ""),
+              allowUndefined: !0,
+              placeholder: "色を選択"
             }
           )
-        ] }),
-        /* @__PURE__ */ c.jsx(
-          "button",
-          {
-            type: "button",
-            className: b.removeButton,
-            onClick: () => g(n),
-            disabled: v || l.length === 1,
-            title: "削除",
-            children: "×"
-          }
-        )
-      ] }, n)
-    )) }),
-    /* @__PURE__ */ c.jsx(
+        ] })
+      ] }, p);
+    }) }),
+    /* @__PURE__ */ s.jsx(
       "button",
       {
         type: "button",
         className: b.addButton,
-        onClick: _,
-        disabled: v,
+        onClick: h,
+        disabled: _,
         children: "+ 選択肢を追加"
       }
     )
   ] });
 };
 Q.displayName = "OptionsEditor";
-const K = fe(({ props: t, value: s, onChange: v, onBlur: l, readOnly: i, mode: _ }, g) => {
-  const h = de(null);
+const K = fe(({ props: t, value: c, onChange: _, onBlur: l, readOnly: i, mode: h }, g) => {
+  const v = de(null);
   me(
     g,
     () => ({
       focus: () => {
-        var r, d, R;
-        (r = h.current) == null || r.focus(), h.current && !i && ((R = (d = h.current).showPicker) == null || R.call(d));
+        var r, f, R;
+        (r = v.current) == null || r.focus(), v.current && !i && ((R = (f = v.current).showPicker) == null || R.call(f));
       }
     }),
     [i]
   );
-  const E = A(() => s && t.selectConfig.options.find((r) => r.value === s) || null, [s, t.selectConfig.options]), j = A(() => {
+  const E = P(() => c && t.selectConfig.options.find((r) => r.value === c) || null, [c, t.selectConfig.options]), S = P(() => {
     const r = {
       width: "100%",
       height: "100%",
@@ -468,10 +460,10 @@ const K = fe(({ props: t, value: s, onChange: v, onBlur: l, readOnly: i, mode: _
       // 矢印アイコンの配置用
     };
     switch (t.justifyContent) {
-      case U.center:
+      case C.center:
         r.justifyContent = "center";
         break;
-      case U.right:
+      case C.right:
         r.justifyContent = "flex-end";
         break;
       default:
@@ -490,13 +482,13 @@ const K = fe(({ props: t, value: s, onChange: v, onBlur: l, readOnly: i, mode: _
         break;
     }
     if (t.isIndividual)
-      t.top && (r.paddingTop = y.fromDim(t.top)), t.right && (r.paddingRight = y.fromDim(t.right)), t.bottom && (r.paddingBottom = y.fromDim(t.bottom)), t.left && (r.paddingLeft = y.fromDim(t.left));
+      t.top && (r.paddingTop = T.fromDim(t.top)), t.right && (r.paddingRight = T.fromDim(t.right)), t.bottom && (r.paddingBottom = T.fromDim(t.bottom)), t.left && (r.paddingLeft = T.fromDim(t.left));
     else if (t.all) {
-      const d = y.fromDim(t.all);
-      r.padding = `${d}px`;
+      const f = T.fromDim(t.all);
+      r.padding = `${f}px`;
     }
-    return r;
-  }, [t]), k = A(() => {
+    return c && (E != null && E.color) && (r.backgroundColor = E.color), r;
+  }, [t, c, E]), w = P(() => {
     const r = {
       appearance: "none",
       // ネイティブの矢印を消す
@@ -508,6 +500,7 @@ const K = fe(({ props: t, value: s, onChange: v, onBlur: l, readOnly: i, mode: _
       // 右側に矢印用のスペース
       margin: 0,
       width: "100%",
+      // ブロック全体の幅に合わせる
       height: "100%",
       // ブロック全体の高さに合わせる
       boxSizing: "border-box",
@@ -516,15 +509,25 @@ const K = fe(({ props: t, value: s, onChange: v, onBlur: l, readOnly: i, mode: _
       // readOnly時は操作を無効化（disabledを使わない）
       pointerEvents: i ? "none" : "auto"
     };
-    return t.fontSize && (r.fontSize = y.fromDim(t.fontSize)), t.color && (r.color = t.color), t.fontWeight && (r.fontWeight = "bold"), t.italic && (r.fontStyle = "italic"), s && (E != null && E.color) ? r.backgroundColor = E.color : r.backgroundColor = "transparent", r;
+    switch (t.justifyContent) {
+      case C.center:
+        r.textAlign = "center";
+        break;
+      case C.right:
+        r.textAlign = "right";
+        break;
+      default:
+        r.textAlign = "left";
+        break;
+    }
+    return t.fontSize && (r.fontSize = T.fromDim(t.fontSize)), t.color && (r.color = t.color), t.fontWeight && (r.fontWeight = "bold"), t.italic && (r.fontStyle = "italic"), r;
   }, [
+    t.justifyContent,
     t.fontSize,
     t.color,
     t.fontWeight,
     t.italic,
-    E,
-    i,
-    s
+    i
   ]), x = {
     position: "absolute",
     right: "8px",
@@ -537,24 +540,24 @@ const K = fe(({ props: t, value: s, onChange: v, onBlur: l, readOnly: i, mode: _
     borderRight: "4px solid transparent",
     borderTop: "5px solid",
     borderTopColor: t.color || "#6b7280"
-  }, a = A(() => _ === J.FORM ? !0 : _ === J.EDIT ? !i : !1, [_, i]), n = (r) => {
-    const d = r.target.value;
-    v(d === "" ? null : d);
-  }, f = () => {
-    l && l(s);
+  }, a = P(() => h === J.FORM ? !0 : h === J.EDIT ? !i : !1, [h, i]), o = (r) => {
+    const f = r.target.value;
+    _(f === "" ? null : f);
+  }, p = () => {
+    l && l(c);
   };
-  return /* @__PURE__ */ c.jsxs("div", { style: j, children: [
-    /* @__PURE__ */ c.jsxs(
+  return /* @__PURE__ */ s.jsxs("div", { style: S, children: [
+    /* @__PURE__ */ s.jsxs(
       "select",
       {
-        ref: h,
-        value: s ?? "",
-        onChange: n,
-        onBlur: f,
-        style: k,
+        ref: v,
+        value: c ?? "",
+        onChange: o,
+        onBlur: p,
+        style: w,
         children: [
-          /* @__PURE__ */ c.jsx("option", { value: "", style: { backgroundColor: "#ffffff" }, children: "未選択" }),
-          t.selectConfig.options.map((r) => /* @__PURE__ */ c.jsx(
+          /* @__PURE__ */ s.jsx("option", { value: "", style: { backgroundColor: "#ffffff" }, children: t.placeholder || "" }),
+          t.selectConfig.options.map((r) => /* @__PURE__ */ s.jsx(
             "option",
             {
               value: r.value,
@@ -566,11 +569,11 @@ const K = fe(({ props: t, value: s, onChange: v, onBlur: l, readOnly: i, mode: _
         ]
       }
     ),
-    a && /* @__PURE__ */ c.jsx("div", { style: x })
+    a && /* @__PURE__ */ s.jsx("div", { style: x })
   ] });
 });
 K.displayName = "SelectRenderer";
-const Ie = {
+const De = {
   kind: "select",
   meta: {
     displayName: "セレクトボックス",
@@ -582,7 +585,7 @@ const Ie = {
     ...ve,
     // alignment + padding
     ..._e,
-    ...be,
+    ...he,
     ...pe,
     // Select固有プロパティ - 選択肢とデフォルト値を統合
     selectConfig: {
@@ -604,7 +607,7 @@ const Ie = {
 };
 export {
   Q as OptionsEditor,
-  Ie as SelectPlugin,
+  De as SelectPlugin,
   K as SelectRenderer
 };
 //# sourceMappingURL=index.mjs.map