@versaur/react 1.0.0 → 1.0.3

package/dist/forms.js

@@ -1,26 +1,611 @@
-import { Label as e } from "./components/forms/label/label.js";
-import { HelperText as t } from "./components/forms/helper-text/helper-text.js";
-import { ErrorText as f } from "./components/forms/error-text/error-text.js";
-import { TextInput as i } from "./components/forms/text-input/text-input.js";
-import { TextArea as u } from "./components/forms/text-area/text-area.js";
-import { Select as h } from "./components/forms/select/select.js";
-import { Radio as C } from "./components/forms/radio/radio.js";
-import { Checkbox as b } from "./components/forms/checkbox/checkbox.js";
-import { RadioGroup as I } from "./components/forms/radio-group/radio-group.js";
-import { CheckboxGroup as k } from "./components/forms/checkbox-group/checkbox-group.js";
-import { ChipSingleInput as R } from "./components/forms/chip-single-input/chip-single-input.js";
-import { ChipMultipleInput as g } from "./components/forms/chip-multiple-input/chip-multiple-input.js";
+import { jsx as o, jsxs as N } from "react/jsx-runtime";
+import { forwardRef as b, useId as S, createContext as T, useContext as L } from "react";
+import { c as x } from "./cx-B9vmfsc1.js";
+import { u as I } from "./use-data-attrs-iPFyfiKN.js";
+import { c as R } from "./checkbox.module-D4Do_b6S.js";
+const at = "_label_16k0w_6", st = {
+  label: at
+}, ct = "_helper_m3vrz_6", dt = {
+  helper: ct
+}, lt = "_error_9kiiv_6", rt = {
+  error: lt
+}, pt = "_field_1hj6p_7", ut = "_wrapper_1hj6p_14", ht = "_input_1hj6p_34", j = {
+  field: pt,
+  wrapper: ut,
+  input: ht,
+  "left-icon": "_left-icon_1hj6p_79",
+  "right-icon": "_right-icon_1hj6p_80"
+}, _t = "_field_7fkx1_7", ft = "_textarea_7fkx1_14", z = {
+  field: _t,
+  textarea: ft
+}, mt = "_field_1wbjc_7", vt = "_select_1wbjc_14", F = {
+  field: mt,
+  select: vt
+}, bt = "_radio_18cvp_7", Ct = "_input_18cvp_36", xt = "_indicator_18cvp_45", Nt = "_label_18cvp_135", M = {
+  radio: bt,
+  input: Ct,
+  indicator: xt,
+  label: Nt
+}, It = "_field_1f11i_7", yt = "_options_1f11i_15", gt = "_option_1f11i_15", $t = "_input_1f11i_57", St = "_indicator_1f11i_66", kt = "_optionLabel_1f11i_156", B = {
+  field: It,
+  options: yt,
+  option: gt,
+  input: $t,
+  indicator: St,
+  optionLabel: kt
+}, wt = "_field_1onfr_7", Ot = "_options_1onfr_15", Bt = "_option_1onfr_15", Gt = "_input_1onfr_57", jt = "_indicator_1onfr_66", A = {
+  field: wt,
+  options: Ot,
+  option: Bt,
+  input: Gt,
+  indicator: jt
+}, At = "_field_17mmo_7", Rt = "_options_17mmo_15", Mt = "_option_17mmo_15", E = {
+  field: At,
+  options: Rt,
+  option: Mt
+}, Tt = "_field_14sz7_7", Lt = "_options_14sz7_15", Et = "_option_14sz7_15", D = {
+  field: Tt,
+  options: Lt,
+  option: Et
+}, $ = b(
+  ({ required: t = !1, disabled: n = !1, children: e, className: s, ...a }, i) => {
+    const d = I({
+      disabled: n,
+      required: t
+    });
+    return /* @__PURE__ */ o("label", { ref: i, className: x(st.label, s), ...d, ...a, children: e });
+  }
+);
+$.displayName = "Label";
+const k = b(({ children: t, className: n, ...e }, s) => /* @__PURE__ */ o("p", { ref: s, className: x(dt.helper, n), ...e, children: t }));
+k.displayName = "HelperText";
+const w = b(({ children: t, className: n, ...e }, s) => /* @__PURE__ */ o("p", { ref: s, className: x(rt.error, n), role: "alert", "aria-live": "polite", ...e, children: t }));
+w.displayName = "ErrorText";
+const Dt = b(
+  ({
+    label: t,
+    helper: n,
+    error: e,
+    required: s = !1,
+    disabled: a = !1,
+    readOnly: i = !1,
+    leftIcon: d,
+    rightIcon: c,
+    id: l,
+    className: r,
+    ...u
+  }, f) => {
+    const h = S(), _ = l || h, p = n ? `${_}-helper` : void 0, m = e ? `${_}-error` : void 0, v = [p, m].filter(Boolean).join(" "), C = I({
+      disabled: a,
+      hasLeftIcon: !!d,
+      hasRightIcon: !!c,
+      invalid: !!e,
+      readOnly: i
+    });
+    return /* @__PURE__ */ N("div", { className: x(j.field, r), children: [
+      t && /* @__PURE__ */ o($, { htmlFor: _, required: s, disabled: a, children: t }),
+      /* @__PURE__ */ N("div", { className: j.wrapper, ...C, children: [
+        d && /* @__PURE__ */ o("span", { className: j["left-icon"], children: d }),
+        /* @__PURE__ */ o(
+          "input",
+          {
+            ref: f,
+            id: _,
+            type: "text",
+            className: j.input,
+            disabled: a,
+            readOnly: i,
+            required: s,
+            "aria-invalid": e ? "true" : void 0,
+            "aria-disabled": a ? "true" : void 0,
+            "aria-describedby": v || void 0,
+            ...u
+          }
+        ),
+        c && /* @__PURE__ */ o("span", { className: j["right-icon"], children: c })
+      ] }),
+      e && /* @__PURE__ */ o(w, { id: m, children: e }),
+      !e && n && /* @__PURE__ */ o(k, { id: p, children: n })
+    ] });
+  }
+);
+Dt.displayName = "TextInput";
+const zt = b(
+  ({
+    label: t,
+    helper: n,
+    error: e,
+    required: s = !1,
+    disabled: a = !1,
+    readOnly: i = !1,
+    resizable: d = !0,
+    minRows: c = 3,
+    maxRows: l,
+    id: r,
+    className: u,
+    ...f
+  }, h) => {
+    const _ = S(), p = r || _, m = n ? `${p}-helper` : void 0, v = e ? `${p}-error` : void 0, C = [m, v].filter(Boolean).join(" "), y = I({
+      disabled: a,
+      invalid: !!e,
+      readOnly: i,
+      resizable: d ? "true" : "false",
+      minRows: "true",
+      ...l && { maxRows: "true" }
+    }), g = {
+      "--_min-rows-count": c,
+      ...l && { "--_max-rows-count": l }
+    };
+    return /* @__PURE__ */ N("div", { className: x(z.field, u), children: [
+      t && /* @__PURE__ */ o($, { htmlFor: p, required: s, disabled: a, children: t }),
+      /* @__PURE__ */ o(
+        "textarea",
+        {
+          ref: h,
+          id: p,
+          className: z.textarea,
+          disabled: a,
+          readOnly: i,
+          required: s,
+          style: g,
+          "aria-invalid": e ? "true" : void 0,
+          "aria-disabled": a ? "true" : void 0,
+          "aria-describedby": C || void 0,
+          ...y,
+          ...f
+        }
+      ),
+      e && /* @__PURE__ */ o(w, { id: v, children: e }),
+      !e && n && /* @__PURE__ */ o(k, { id: m, children: n })
+    ] });
+  }
+);
+zt.displayName = "TextArea";
+const P = b(({ children: t, ...n }, e) => /* @__PURE__ */ o("option", { ref: e, ...n, children: t }));
+P.displayName = "Select.Option";
+const H = b(
+  ({ label: t, children: n, ...e }, s) => /* @__PURE__ */ o("optgroup", { ref: s, label: t, ...e, children: n })
+);
+H.displayName = "Select.OptionGroup";
+const V = b(
+  ({ label: t, helper: n, error: e, required: s = !1, disabled: a = !1, placeholder: i, children: d, id: c, className: l, ...r }, u) => {
+    const f = S(), h = c || f, _ = n ? `${h}-helper` : void 0, p = e ? `${h}-error` : void 0, m = [_, p].filter(Boolean).join(" "), v = I({
+      disabled: a,
+      invalid: !!e
+    });
+    return /* @__PURE__ */ N("div", { className: x(F.field, l), children: [
+      t && /* @__PURE__ */ o($, { htmlFor: h, required: s, disabled: a, children: t }),
+      /* @__PURE__ */ N(
+        "select",
+        {
+          ref: u,
+          id: h,
+          className: F.select,
+          disabled: a,
+          required: s,
+          "aria-invalid": e ? "true" : void 0,
+          "aria-disabled": a ? "true" : void 0,
+          "aria-describedby": m || void 0,
+          ...v,
+          ...r,
+          children: [
+            i && /* @__PURE__ */ o("option", { value: "", disabled: !0, children: i }),
+            d
+          ]
+        }
+      ),
+      e && /* @__PURE__ */ o(w, { id: p, children: e }),
+      !e && n && /* @__PURE__ */ o(k, { id: _, children: n })
+    ] });
+  }
+);
+V.displayName = "Select";
+const J = V;
+J.Option = P;
+J.OptionGroup = H;
+const Ft = b(
+  ({ variant: t = "outline", size: n = "medium", invalid: e = !1, disabled: s = !1, children: a, className: i, ...d }, c) => {
+    const l = I({
+      disabled: s,
+      invalid: e,
+      size: n,
+      variant: t
+    });
+    return /* @__PURE__ */ N("label", { className: x(M.radio, i), ...l, children: [
+      /* @__PURE__ */ o(
+        "input",
+        {
+          ref: c,
+          type: "radio",
+          className: M.input,
+          disabled: s,
+          "aria-invalid": e || void 0,
+          ...d
+        }
+      ),
+      /* @__PURE__ */ o("span", { className: M.indicator }),
+      a && /* @__PURE__ */ o("span", { className: M.label, children: a })
+    ] });
+  }
+);
+Ft.displayName = "Radio";
+const Pt = b(
+  ({ invalid: t = !1, disabled: n = !1, required: e = !1, children: s, className: a, ...i }, d) => {
+    const c = I({
+      disabled: n,
+      invalid: t,
+      required: e
+    });
+    return /* @__PURE__ */ N("label", { className: x(R.checkbox, a), ...c, children: [
+      /* @__PURE__ */ o(
+        "input",
+        {
+          ref: d,
+          type: "checkbox",
+          className: R.input,
+          disabled: n,
+          required: e,
+          "aria-invalid": t || void 0,
+          "aria-required": e || void 0,
+          ...i
+        }
+      ),
+      /* @__PURE__ */ o("span", { className: R.indicator }),
+      s && /* @__PURE__ */ o("span", { className: R.label, "data-required": e || void 0, children: s })
+    ] });
+  }
+);
+Pt.displayName = "Checkbox";
+const K = T(void 0);
+function Ht() {
+  const t = L(K);
+  if (!t)
+    throw new Error("RadioGroup.Option must be used within RadioGroup");
+  return t;
+}
+const Q = b(
+  ({
+    value: t,
+    onChange: n,
+    name: e,
+    variant: s = "outline",
+    size: a = "medium",
+    label: i,
+    helper: d,
+    error: c,
+    required: l = !1,
+    disabled: r = !1,
+    direction: u = "column",
+    children: f,
+    className: h,
+    ..._
+  }, p) => {
+    const m = S(), v = _.id || m, C = d ? `${v}-helper` : void 0, y = c ? `${v}-error` : void 0, g = [C, y].filter(Boolean).join(" "), O = (nt) => {
+      !r && n && n(nt);
+    }, G = I({
+      disabled: r,
+      invalid: !!c,
+      size: a === "medium" ? void 0 : a,
+      variant: a === "medium" ? s : void 0
+    });
+    return /* @__PURE__ */ N("div", { ref: p, className: x(B.field, h), ...G, ..._, children: [
+      i && /* @__PURE__ */ o($, { required: l, disabled: r, children: i }),
+      /* @__PURE__ */ o(K.Provider, { value: { disabled: r, name: e, onChange: O, value: t }, children: /* @__PURE__ */ o(
+        "div",
+        {
+          className: B.options,
+          "data-direction": u,
+          role: "radiogroup",
+          "aria-describedby": g || void 0,
+          "aria-invalid": c ? "true" : void 0,
+          children: f
+        }
+      ) }),
+      c && /* @__PURE__ */ o(w, { id: y, children: c }),
+      !c && d && /* @__PURE__ */ o(k, { id: C, children: d })
+    ] });
+  }
+);
+Q.displayName = "RadioGroup";
+const U = b(
+  ({ value: t, children: n, disabled: e, className: s, ...a }, i) => {
+    const d = Ht(), c = d.value === t, l = d.disabled || e, r = () => {
+      l || d.onChange(t);
+    };
+    return /* @__PURE__ */ N("label", { className: x(B.option, s), children: [
+      /* @__PURE__ */ o(
+        "input",
+        {
+          ref: i,
+          type: "radio",
+          name: d.name,
+          value: t,
+          checked: c,
+          disabled: l,
+          onChange: r,
+          className: B.input,
+          ...a
+        }
+      ),
+      /* @__PURE__ */ o("span", { className: B.indicator }),
+      n && /* @__PURE__ */ o("span", { className: B.optionLabel, children: n })
+    ] });
+  }
+);
+U.displayName = "RadioGroup.Option";
+const Zt = Object.assign(Q, {
+  Option: U
+}), W = T(void 0);
+function Vt() {
+  const t = L(W);
+  if (!t)
+    throw new Error("CheckboxGroup.Option must be used within CheckboxGroup");
+  return t;
+}
+const X = b(
+  ({
+    value: t,
+    onChange: n,
+    name: e,
+    label: s,
+    helper: a,
+    error: i,
+    required: d = !1,
+    disabled: c = !1,
+    direction: l = "column",
+    children: r,
+    className: u,
+    ...f
+  }, h) => {
+    const _ = S(), p = f.id || _, m = a ? `${p}-helper` : void 0, v = i ? `${p}-error` : void 0, C = [m, v].filter(Boolean).join(" "), y = (O) => {
+      !c && n && n(O);
+    }, g = I({
+      disabled: c,
+      invalid: !!i
+    });
+    return /* @__PURE__ */ N("div", { ref: h, className: x(A.field, u), ...g, ...f, children: [
+      s && /* @__PURE__ */ o($, { required: d, disabled: c, children: s }),
+      /* @__PURE__ */ o(W.Provider, { value: { disabled: c, name: e, onChange: y, value: t }, children: /* @__PURE__ */ o(
+        "div",
+        {
+          className: A.options,
+          "data-direction": l,
+          role: "group",
+          "aria-describedby": C || void 0,
+          "aria-invalid": i ? "true" : void 0,
+          children: r
+        }
+      ) }),
+      i && /* @__PURE__ */ o(w, { id: v, children: i }),
+      !i && a && /* @__PURE__ */ o(k, { id: m, children: a })
+    ] });
+  }
+);
+X.displayName = "CheckboxGroup";
+const Y = b(
+  ({ value: t, children: n, disabled: e, required: s = !1, className: a, ...i }, d) => {
+    const c = S(), l = Vt(), r = l.value.includes(t), u = l.disabled || e, f = () => {
+      if (!u) {
+        const _ = r ? l.value.filter((p) => p !== t) : [...l.value, t];
+        l.onChange(_);
+      }
+    }, h = I({
+      disabled: u,
+      required: s
+    });
+    return /* @__PURE__ */ N("label", { className: x(A.option, a), ...h, children: [
+      /* @__PURE__ */ o(
+        "input",
+        {
+          ref: d,
+          type: "checkbox",
+          name: l.name,
+          value: t,
+          checked: r,
+          disabled: u,
+          required: s,
+          onChange: f,
+          className: A.input,
+          "aria-required": s || void 0,
+          ...i,
+          id: c
+        }
+      ),
+      /* @__PURE__ */ o("span", { className: A.indicator }),
+      n && /* @__PURE__ */ o($, { required: s, disabled: u, htmlFor: c, children: n })
+    ] });
+  }
+);
+Y.displayName = "CheckboxGroup.Option";
+const qt = Object.assign(X, {
+  Option: Y
+}), Z = T(void 0);
+function Jt() {
+  const t = L(Z);
+  if (!t)
+    throw new Error("ChipSingleInput.Option must be used within ChipSingleInput");
+  return t;
+}
+const q = b(
+  ({
+    value: t,
+    onChange: n,
+    name: e,
+    label: s,
+    helper: a,
+    error: i,
+    required: d = !1,
+    disabled: c = !1,
+    gap: l = "2",
+    wrap: r = !0,
+    children: u,
+    className: f,
+    ...h
+  }, _) => {
+    const p = S(), m = h.id || p, v = a ? `${m}-helper` : void 0, C = i ? `${m}-error` : void 0, y = [v, C].filter(Boolean).join(" "), g = (G) => {
+      !c && n && n(G);
+    }, O = I({
+      invalid: !!i
+    });
+    return /* @__PURE__ */ N("div", { ref: _, className: x(E.field, f), ...O, ...h, children: [
+      s && /* @__PURE__ */ o($, { required: d, disabled: c, children: s }),
+      /* @__PURE__ */ o(
+        Z.Provider,
+        {
+          value: {
+            disabled: c,
+            name: e,
+            onChange: g,
+            value: t
+          },
+          children: /* @__PURE__ */ o(
+            "div",
+            {
+              className: E.options,
+              "data-gap": l,
+              "data-wrap": r,
+              role: "radiogroup",
+              "aria-describedby": y || void 0,
+              "aria-invalid": i ? "true" : void 0,
+              children: u
+            }
+          )
+        }
+      ),
+      i && /* @__PURE__ */ o(w, { id: C, children: i }),
+      !i && a && /* @__PURE__ */ o(k, { id: v, children: a })
+    ] });
+  }
+);
+q.displayName = "ChipSingleInput";
+const tt = b(
+  ({ value: t, children: n, disabled: e, ...s }, a) => {
+    const i = Jt(), d = i.value === t, c = i.disabled || e, l = () => {
+      !c && i.onChange && i.onChange(t);
+    }, r = I({
+      disabled: c,
+      selected: d
+    });
+    return /* @__PURE__ */ o(
+      "button",
+      {
+        ref: a,
+        type: "button",
+        className: E.option,
+        onClick: l,
+        disabled: c,
+        "aria-pressed": d,
+        ...r,
+        ...s,
+        children: n
+      }
+    );
+  }
+);
+tt.displayName = "ChipSingleInput.Option";
+const te = Object.assign(q, {
+  Option: tt
+}), et = T(void 0);
+function Kt() {
+  const t = L(et);
+  if (!t)
+    throw new Error("ChipMultipleInput.Option must be used within ChipMultipleInput");
+  return t;
+}
+const it = b(
+  ({
+    value: t,
+    onChange: n,
+    name: e,
+    label: s,
+    helper: a,
+    error: i,
+    required: d = !1,
+    disabled: c = !1,
+    gap: l = "2",
+    wrap: r = !0,
+    children: u,
+    className: f,
+    ...h
+  }, _) => {
+    const p = S(), m = h.id || p, v = a ? `${m}-helper` : void 0, C = i ? `${m}-error` : void 0, y = [v, C].filter(Boolean).join(" "), g = (G) => {
+      !c && n && n(G);
+    }, O = I({
+      invalid: !!i
+    });
+    return /* @__PURE__ */ N("div", { ref: _, className: x(D.field, f), ...O, ...h, children: [
+      s && /* @__PURE__ */ o($, { required: d, disabled: c, children: s }),
+      /* @__PURE__ */ o(
+        et.Provider,
+        {
+          value: {
+            disabled: c,
+            name: e,
+            onChange: g,
+            value: t
+          },
+          children: /* @__PURE__ */ o(
+            "div",
+            {
+              className: D.options,
+              "data-gap": l,
+              "data-wrap": r,
+              role: "group",
+              "aria-describedby": y || void 0,
+              "aria-invalid": i ? "true" : void 0,
+              children: u
+            }
+          )
+        }
+      ),
+      i && /* @__PURE__ */ o(w, { id: C, children: i }),
+      !i && a && /* @__PURE__ */ o(k, { id: v, children: a })
+    ] });
+  }
+);
+it.displayName = "ChipMultipleInput";
+const ot = b(
+  ({ value: t, children: n, disabled: e, ...s }, a) => {
+    const i = Kt(), d = i.value.includes(t), c = i.disabled || e, l = () => {
+      if (!c && i.onChange) {
+        const u = d ? i.value.filter((f) => f !== t) : [...i.value, t];
+        i.onChange(u);
+      }
+    }, r = I({
+      disabled: c,
+      selected: d
+    });
+    return /* @__PURE__ */ o(
+      "button",
+      {
+        ref: a,
+        type: "button",
+        className: D.option,
+        onClick: l,
+        disabled: c,
+        "aria-pressed": d,
+        ...r,
+        ...s,
+        children: n
+      }
+    );
+  }
+);
+ot.displayName = "ChipMultipleInput.Option";
+const ee = Object.assign(it, {
+  Option: ot
+});
 export {
-  b as Checkbox,
-  k as CheckboxGroup,
-  g as ChipMultipleInput,
-  R as ChipSingleInput,
-  f as ErrorText,
-  t as HelperText,
-  e as Label,
-  C as Radio,
-  I as RadioGroup,
-  h as Select,
-  u as TextArea,
-  i as TextInput
+  Pt as Checkbox,
+  qt as CheckboxGroup,
+  ee as ChipMultipleInput,
+  te as ChipSingleInput,
+  w as ErrorText,
+  k as HelperText,
+  $ as Label,
+  Ft as Radio,
+  Zt as RadioGroup,
+  J as Select,
+  zt as TextArea,
+  Dt as TextInput
 };

package/dist/overlay-parts-YglazEA-.js

@@ -0,0 +1,29 @@
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as r } from "react";
+import { c as d } from "./cx-B9vmfsc1.js";
+const l = "_header_oiyd6_1", c = "_headerTop_oiyd6_42", i = "_headerContent_oiyd6_60", _ = "_title_oiyd6_102", m = "_closeButton_oiyd6_110", v = "_body_oiyd6_114", h = "_footer_oiyd6_122", p = "_content_oiyd6_133", n = {
+  header: l,
+  headerTop: c,
+  headerContent: i,
+  title: _,
+  closeButton: m,
+  body: v,
+  footer: h,
+  content: p
+}, f = r(({ children: e, className: o, ...t }, a) => /* @__PURE__ */ s("div", { ref: a, className: d(n.header, o), ...t, children: e }));
+f.displayName = "OverlayHeader";
+const O = r(
+  ({ children: e, as: o = "h2", className: t, ...a }, y) => /* @__PURE__ */ s(o, { ref: y, className: d(n.title, t), ...a, children: e })
+);
+O.displayName = "OverlayTitle";
+const N = r(({ children: e, className: o, ...t }, a) => /* @__PURE__ */ s("div", { ref: a, className: d(n.body, o), ...t, children: e }));
+N.displayName = "OverlayBody";
+const b = r(({ children: e, className: o, ...t }, a) => /* @__PURE__ */ s("div", { ref: a, className: d(n.footer, o), ...t, children: e }));
+b.displayName = "OverlayFooter";
+export {
+  N as O,
+  b as a,
+  f as b,
+  O as c,
+  n as o
+};