@sakura-ui/forms 0.1.5 → 0.1.6

package/dist/index.es.js

@@ -14,16 +14,16 @@ function vr() {
   if (Ne)
     return W;
   Ne = 1;
-  var p = y, b = Symbol.for("react.element"), m = Symbol.for("react.fragment"), f = Object.prototype.hasOwnProperty, i = p.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, a = { key: !0, ref: !0, __self: !0, __source: !0 };
+  var p = y, h = Symbol.for("react.element"), m = Symbol.for("react.fragment"), f = Object.prototype.hasOwnProperty, i = p.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, a = { key: !0, ref: !0, __self: !0, __source: !0 };
   function v(c, o, _) {
-    var h, g = {}, C = null, T = null;
+    var b, g = {}, C = null, T = null;
     _ !== void 0 && (C = "" + _), o.key !== void 0 && (C = "" + o.key), o.ref !== void 0 && (T = o.ref);
-    for (h in o)
-      f.call(o, h) && !a.hasOwnProperty(h) && (g[h] = o[h]);
+    for (b in o)
+      f.call(o, b) && !a.hasOwnProperty(b) && (g[b] = o[b]);
     if (c && c.defaultProps)
-      for (h in o = c.defaultProps, o)
-        g[h] === void 0 && (g[h] = o[h]);
-    return { $$typeof: b, type: c, key: C, ref: T, props: g, _owner: i.current };
+      for (b in o = c.defaultProps, o)
+        g[b] === void 0 && (g[b] = o[b]);
+    return { $$typeof: h, type: c, key: C, ref: T, props: g, _owner: i.current };
   }
   return W.Fragment = m, W.jsx = v, W.jsxs = v, W;
 }
@@ -40,7 +40,7 @@ var Y = {};
 var Pe;
 function mr() {
   return Pe || (Pe = 1, process.env.NODE_ENV !== "production" && function() {
-    var p = y, b = Symbol.for("react.element"), m = Symbol.for("react.portal"), f = Symbol.for("react.fragment"), i = Symbol.for("react.strict_mode"), a = Symbol.for("react.profiler"), v = Symbol.for("react.provider"), c = Symbol.for("react.context"), o = Symbol.for("react.forward_ref"), _ = Symbol.for("react.suspense"), h = Symbol.for("react.suspense_list"), g = Symbol.for("react.memo"), C = Symbol.for("react.lazy"), T = Symbol.for("react.offscreen"), I = Symbol.iterator, ke = "@@iterator";
+    var p = y, h = Symbol.for("react.element"), m = Symbol.for("react.portal"), f = Symbol.for("react.fragment"), i = Symbol.for("react.strict_mode"), a = Symbol.for("react.profiler"), v = Symbol.for("react.provider"), c = Symbol.for("react.context"), o = Symbol.for("react.forward_ref"), _ = Symbol.for("react.suspense"), b = Symbol.for("react.suspense_list"), g = Symbol.for("react.memo"), C = Symbol.for("react.lazy"), T = Symbol.for("react.offscreen"), I = Symbol.iterator, ke = "@@iterator";
     function Fe(e) {
       if (e === null || typeof e != "object")
         return null;
@@ -68,7 +68,7 @@ function mr() {
     var Ae = !1, Me = !1, $e = !1, qe = !1, We = !1, ne;
     ne = Symbol.for("react.module.reference");
     function Ye(e) {
-      return !!(typeof e == "string" || typeof e == "function" || e === f || e === a || We || e === i || e === _ || e === h || qe || e === T || Ae || Me || $e || typeof e == "object" && e !== null && (e.$$typeof === C || e.$$typeof === g || e.$$typeof === v || e.$$typeof === c || e.$$typeof === o || // This needs to include all possible module reference object
+      return !!(typeof e == "string" || typeof e == "function" || e === f || e === a || We || e === i || e === _ || e === b || qe || e === T || Ae || Me || $e || typeof e == "object" && e !== null && (e.$$typeof === C || e.$$typeof === g || e.$$typeof === v || e.$$typeof === c || e.$$typeof === o || // 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.
@@ -102,7 +102,7 @@ function mr() {
           return "StrictMode";
         case _:
           return "Suspense";
-        case h:
+        case b:
           return "SuspenseList";
       }
       if (typeof e == "object")
@@ -298,7 +298,7 @@ function mr() {
       switch (e) {
         case _:
           return L("Suspense");
-        case h:
+        case b:
           return L("SuspenseList");
       }
       if (typeof e == "object")
@@ -317,13 +317,13 @@ function mr() {
         }
       return "";
     }
-    var B = Object.prototype.hasOwnProperty, me = {}, he = D.ReactDebugCurrentFrame;
+    var B = Object.prototype.hasOwnProperty, me = {}, be = D.ReactDebugCurrentFrame;
     function G(e) {
       if (e) {
         var r = e._owner, t = U(e.type, e._source, r ? r.type : null);
-        he.setExtraStackFrame(t);
+        be.setExtraStackFrame(t);
       } else
-        he.setExtraStackFrame(null);
+        be.setExtraStackFrame(null);
     }
     function ze(e, r, t, n, d) {
       {
@@ -356,17 +356,17 @@ function mr() {
     }
     function Xe(e) {
       try {
-        return be(e), !1;
+        return he(e), !1;
       } catch {
         return !0;
       }
     }
-    function be(e) {
+    function he(e) {
       return "" + e;
     }
     function xe(e) {
       if (Xe(e))
-        return j("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Ke(e)), be(e);
+        return j("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Ke(e)), he(e);
     }
     var q = D.ReactCurrentOwner, Ze = {
       key: !0,
@@ -422,7 +422,7 @@ function mr() {
     var nr = function(e, r, t, n, d, x, u) {
       var l = {
         // This tag allows us to uniquely identify this as a React Element
-        $$typeof: b,
+        $$typeof: h,
         // Built-in properties that belong on the element
         type: e,
         key: r,
@@ -477,7 +477,7 @@ function mr() {
     var Q;
     Q = !1;
     function ee(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === b;
+      return typeof e == "object" && e !== null && e.$$typeof === h;
     }
     function Ee() {
       {
@@ -593,7 +593,7 @@ Check the top-level render call using <` + t + ">.");
           var w = ir(d);
           w ? l += w : l += Ee();
           var R;
-          e === null ? R = "null" : K(e) ? R = "array" : e !== void 0 && e.$$typeof === b ? (R = "<" + (S(e.type) || "Unknown") + " />", l = " Did you accidentally export a JSX literal instead of a component?") : R = typeof e, j("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", R, l);
+          e === null ? R = "null" : K(e) ? R = "array" : e !== void 0 && e.$$typeof === h ? (R = "<" + (S(e.type) || "Unknown") + " />", l = " Did you accidentally export a JSX literal instead of a component?") : R = typeof e, j("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", R, l);
         }
         var E = sr(e, r, t, d, x);
         if (E == null)
@@ -632,33 +632,36 @@ const P = (...p) => p.filter(Boolean).join(" "), F = y.createContext({
   isInvalid: !1,
   isRequired: !1
 }), Ie = y.forwardRef(
-  (p, b) => {
+  (p, h) => {
     const { className: m, children: f, ...i } = p, a = y.useContext(F);
     a.isRequired && (i.required = !0), a.groupName && (i.name = a.groupName);
     const v = `
-    inline-block
-    text-base
-    cursor-pointer
-    py-2
-    mr-4
-  `, c = `
-    peer
-    hidden
-  `, o = `
-    bg-clip-content
-    w-6 h-6
-    ml-1
-    mr-2
-    rounded
-    border
-    border-solid
-    border-sumi-900
-    fill-transparent
-    peer-checked:fill-white-1000
-    peer-checked:bg-sea-600
-    peer-checked:border-none
-    peer-disabled:border-sumi-500
-  `;
+      inline-block
+      text-base
+      cursor-pointer
+      py-2
+      mr-4
+    `, c = `
+      peer
+      sr-only
+    `, o = `
+      bg-clip-content
+      w-6 h-6
+      ml-1
+      mr-2
+      rounded
+      border
+      border-solid
+      border-sumi-900
+      fill-transparent
+      peer-checked:fill-white-1000
+      peer-checked:bg-sea-600
+      peer-checked:border-none
+      peer-disabled:border-sumi-500
+      peer-focus-visible:ring-2
+      peer-focus-visible:ring-offset-2
+      peer-focus-visible:ring-wood-500
+    `;
     return /* @__PURE__ */ s.jsx("label", { htmlFor: i.id, className: P(v, m), children: /* @__PURE__ */ s.jsxs("span", { className: "flex items-center", children: [
       /* @__PURE__ */ s.jsx(
         "input",
@@ -669,7 +672,7 @@ const P = (...p) => p.filter(Boolean).join(" "), F = y.createContext({
           "aria-errormessage": a.errorMessageId,
           "aria-invalid": a.isInvalid ?? !1,
           ...i,
-          ref: b
+          ref: h
         }
       ),
       /* @__PURE__ */ s.jsx("span", { className: o, children: /* @__PURE__ */ s.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", children: /* @__PURE__ */ s.jsx("path", { d: "m9.55 17.65-5.325-5.325 1.05-1.075 4.275 4.275 9.175-9.175 1.05 1.075Z" }) }) }),
@@ -679,33 +682,35 @@ const P = (...p) => p.filter(Boolean).join(" "), F = y.createContext({
 );
 Ie.displayName = "Checkbox";
 const Se = y.forwardRef(
-  (p, b) => {
+  (p, h) => {
     const { className: m, children: f, ...i } = p, a = y.useContext(F);
     a.isRequired && (i.required = !0), a.groupName && (i.name = a.groupName);
     const v = `
-    inline-block
-    text-base
-    cursor-pointer
-    py-2
-    mr-4
-    
-  `, c = `
-    peer
-    hidden
-  `, o = `
-    bg-clip-content
-    w-6 h-6
-    ml-1
-    mr-2
-    p-1
-    rounded-full
-    border
-    border-solid
-    border-sumi-900
-    peer-checked:bg-sea-600
-    peer-checked:border-sea-600
-    peer-disabled:border-sumi-500
-  `;
+      inline-block
+      text-base
+      cursor-pointer
+      py-2
+      mr-4
+    `, c = `
+      peer
+      sr-only
+    `, o = `
+      bg-clip-content
+      w-6 h-6
+      ml-1
+      mr-2
+      p-1
+      rounded-full
+      border
+      border-solid
+      border-sumi-900
+      peer-checked:bg-sea-600
+      peer-checked:border-sea-600
+      peer-disabled:border-sumi-500
+      peer-focus-visible:ring-2
+      peer-focus-visible:ring-offset-2
+      peer-focus-visible:ring-wood-500
+    `;
     return /* @__PURE__ */ s.jsx("label", { htmlFor: i.id, className: P(v, m), children: /* @__PURE__ */ s.jsxs("span", { className: "flex items-center", children: [
       /* @__PURE__ */ s.jsx(
         "input",
@@ -716,7 +721,7 @@ const Se = y.forwardRef(
           "aria-errormessage": a.errorMessageId,
           "aria-invalid": a.isInvalid ?? !1,
           ...i,
-          ref: b
+          ref: h
         }
       ),
       /* @__PURE__ */ s.jsx("span", { className: o }),
@@ -725,8 +730,8 @@ const Se = y.forwardRef(
   }
 );
 Se.displayName = "Radio";
-const hr = y.forwardRef(
-  (p, b) => {
+const br = y.forwardRef(
+  (p, h) => {
     const { className: m, children: f, ...i } = p, a = y.useContext(F);
     a.isRequired && (i.required = !0);
     const v = a.isInvalid ? "border-sun-800" : "border-sumi-900", c = `
@@ -740,6 +745,7 @@ const hr = y.forwardRef(
     border-solid
     py-4 px-4 pr-8
     rounded-[8px]
+    outline-offset-2
     focus:outline
     focus:outline-2
     focus:outline-wood-500
@@ -763,15 +769,15 @@ const hr = y.forwardRef(
           "aria-errormessage": a.errorMessageId,
           "aria-invalid": a.isInvalid ?? !1,
           ...i,
-          ref: b,
+          ref: h,
           children: f
         }
       ),
       /* @__PURE__ */ s.jsx("span", { className: o, children: /* @__PURE__ */ s.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", width: "24", children: /* @__PURE__ */ s.jsx("path", { d: "M12 15.05 6.35 9.4 7.4 8.35l4.6 4.6 4.6-4.6 1.05 1.05Z" }) }) })
     ] });
   }
-), br = y.forwardRef(
-  (p, b) => {
+), hr = y.forwardRef(
+  (p, h) => {
     const { className: m, ...f } = p, i = y.useContext(F);
     i.isRequired && (f.required = !0);
     const a = i.isInvalid ? "border-sun-800" : "border-sumi-900", v = `
@@ -779,6 +785,7 @@ const hr = y.forwardRef(
     rounded-lg
     border
     border-solid
+    outline-offset-2
     focus:outline
     focus:outline-2
     focus:outline-wood-500
@@ -795,24 +802,25 @@ const hr = y.forwardRef(
         "aria-describedby": i.helperTextId,
         "aria-errormessage": i.errorMessageId,
         "aria-invalid": i.isInvalid ?? !1,
-        ref: b,
+        ref: h,
         ...f
       }
     );
   }
 );
-br.displayName = "Input";
+hr.displayName = "Input";
 const Oe = y.forwardRef(
-  (p, b) => {
+  (p, h) => {
     const { className: m, children: f, onChange: i, maxLength: a, ...v } = p, [c, o] = y.useState(0), _ = (I) => {
       i && i(I), o(I.target.value.length);
-    }, h = y.useContext(F);
-    h.isRequired && (v.required = !0);
-    const g = h.isInvalid ? "border-sun-800" : "border-sumi-900", C = c > (a || 0) ? "text-sun-800" : "text-sumi-700", T = `
+    }, b = y.useContext(F);
+    b.isRequired && (v.required = !0);
+    const g = b.isInvalid ? "border-sun-800" : "border-sumi-900", C = c > (a || 0) ? "text-sun-800" : "text-sumi-700", T = `
     p-4
     rounded-lg
     border
     border-solid
+    outline-offset-2
     focus:outline
     focus:outline-2
     focus:outline-wood-500
@@ -824,14 +832,14 @@ const Oe = y.forwardRef(
       /* @__PURE__ */ s.jsx(
         "textarea",
         {
-          id: v.id ?? h.id,
+          id: v.id ?? b.id,
           className: P(T, g, m),
-          "aria-describedby": h.helperTextId,
-          "aria-errormessage": h.errorMessageId,
-          "aria-invalid": h.isInvalid ?? !1,
+          "aria-describedby": b.helperTextId,
+          "aria-errormessage": b.errorMessageId,
+          "aria-invalid": b.isInvalid ?? !1,
           onChange: _,
           ...v,
-          ref: b,
+          ref: h,
           children: f
         }
       ),
@@ -844,7 +852,7 @@ const Oe = y.forwardRef(
   }
 );
 Oe.displayName = "Textarea";
-const te = y.forwardRef((p, b) => {
+const te = y.forwardRef((p, h) => {
   const m = y.useId(), {
     labelText: f,
     className: i,
@@ -853,7 +861,7 @@ const te = y.forwardRef((p, b) => {
     isInvalid: c,
     isRequired: o,
     children: _,
-    ...h
+    ...b
   } = p, g = {
     id: p.htmlFor ?? `input-${m}`,
     helperTextId: `helper-text-${m}`,
@@ -867,8 +875,8 @@ const te = y.forwardRef((p, b) => {
       {
         className: P("block mb-2 text-label", c && "text-sun-800"),
         htmlFor: g.id,
-        ref: b,
-        ...h,
+        ref: h,
+        ...b,
         children: [
           f,
           o && /* @__PURE__ */ s.jsx("span", { className: "text-sun-800", children: " *" })
@@ -891,7 +899,7 @@ const te = y.forwardRef((p, b) => {
   ] }) });
 });
 te.displayName = "LabelControl";
-const ae = y.forwardRef((p, b) => {
+const ae = y.forwardRef((p, h) => {
   const m = y.useId(), {
     labelText: f,
     className: i,
@@ -900,7 +908,7 @@ const ae = y.forwardRef((p, b) => {
     isInvalid: c,
     isRequired: o,
     direction: _,
-    children: h,
+    children: b,
     ...g
   } = p, T = {
     groupName: g.name ?? `group-${m}`,
@@ -909,7 +917,7 @@ const ae = y.forwardRef((p, b) => {
     isInvalid: c ?? !1,
     isRequired: o ?? !1
   }, I = _ ?? "flex-col";
-  return /* @__PURE__ */ s.jsx(F.Provider, { value: T, children: /* @__PURE__ */ s.jsxs("fieldset", { className: P("mb-4", i), ref: b, ...g, children: [
+  return /* @__PURE__ */ s.jsx(F.Provider, { value: T, children: /* @__PURE__ */ s.jsxs("fieldset", { className: P("mb-4", i), ref: h, ...g, children: [
     /* @__PURE__ */ s.jsx("legend", { children: /* @__PURE__ */ s.jsxs(
       "p",
       {
@@ -920,7 +928,7 @@ const ae = y.forwardRef((p, b) => {
         ]
       }
     ) }),
-    /* @__PURE__ */ s.jsx("div", { className: P("inline-flex", I), children: h }),
+    /* @__PURE__ */ s.jsx("div", { className: P("inline-flex", I), children: b }),
     a && /* @__PURE__ */ s.jsx("p", { id: T.helperTextId, className: "text-sup text-sumi-700 mt-2", children: a }),
     c && /* @__PURE__ */ s.jsx(
       "p",
@@ -936,7 +944,7 @@ const ae = y.forwardRef((p, b) => {
   ] }) });
 });
 ae.displayName = "FieldsetControl";
-const xr = y.forwardRef((p, b) => {
+const xr = y.forwardRef((p, h) => {
   const {
     items: m,
     onChange: f,
@@ -946,7 +954,7 @@ const xr = y.forwardRef((p, b) => {
     errorMessage: c,
     isInvalid: o,
     isRequired: _,
-    ...h
+    ...b
   } = p;
   return /* @__PURE__ */ s.jsx(
     ae,
@@ -957,14 +965,14 @@ const xr = y.forwardRef((p, b) => {
       errorMessage: c,
       isInvalid: o,
       isRequired: _,
-      ref: b,
-      ...h,
+      ref: h,
+      ...b,
       children: m.map(({ label: g, value: C }, T) => /* @__PURE__ */ s.jsx(Ie, { value: C, onChange: f, children: g }, T))
     }
   );
 });
 xr.displayName = "CheckboxGroup";
-const gr = y.forwardRef((p, b) => {
+const gr = y.forwardRef((p, h) => {
   const {
     items: m,
     onChange: f,
@@ -974,7 +982,7 @@ const gr = y.forwardRef((p, b) => {
     errorMessage: c,
     isInvalid: o,
     isRequired: _,
-    defaultValue: h,
+    defaultValue: b,
     ...g
   } = p;
   return /* @__PURE__ */ s.jsx(
@@ -986,14 +994,14 @@ const gr = y.forwardRef((p, b) => {
       errorMessage: c,
       isInvalid: o,
       isRequired: _,
-      ref: b,
+      ref: h,
       ...g,
       children: m.map(({ label: C, value: T }, I) => /* @__PURE__ */ s.jsx(
         Se,
         {
           value: T,
           onChange: f,
-          defaultChecked: h === T,
+          defaultChecked: b === T,
           children: C
         },
         I
@@ -1002,7 +1010,7 @@ const gr = y.forwardRef((p, b) => {
   );
 });
 gr.displayName = "RadioGroup";
-const yr = y.forwardRef((p, b) => {
+const yr = y.forwardRef((p, h) => {
   const {
     className: m,
     labelText: f,
@@ -1021,12 +1029,12 @@ const yr = y.forwardRef((p, b) => {
       errorMessage: a,
       isInvalid: v,
       isRequired: c,
-      children: /* @__PURE__ */ s.jsx(hr, { ref: b, ...o })
+      children: /* @__PURE__ */ s.jsx(br, { ref: h, ...o })
     }
   );
 });
 yr.displayName = "SelectControl";
-const Rr = y.forwardRef((p, b) => {
+const Rr = y.forwardRef((p, h) => {
   const {
     className: m,
     labelText: f,
@@ -1045,7 +1053,7 @@ const Rr = y.forwardRef((p, b) => {
       errorMessage: a,
       isInvalid: v,
       isRequired: c,
-      children: /* @__PURE__ */ s.jsx(Oe, { ref: b, ...o })
+      children: /* @__PURE__ */ s.jsx(Oe, { ref: h, ...o })
     }
   );
 });
@@ -1054,11 +1062,11 @@ export {
   Ie as Checkbox,
   xr as CheckboxGroup,
   ae as FieldsetControl,
-  br as Input,
+  hr as Input,
   te as LabelControl,
   Se as Radio,
   gr as RadioGroup,
-  hr as Select,
+  br as Select,
   yr as SelectControl,
   Oe as Textarea,
   Rr as TextareaControl