@versaur/react 1.0.0 → 1.0.1

package/dist/forms.js

@@ -1,26 +1,567 @@
-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 n, jsxs as I } from "react/jsx-runtime";
+import { labelStyles as ae, helperTextStyles as se, errorTextStyles as de, textInputStyles as $, textAreaStyles as P, selectStyles as H, radioStyles as M, checkboxStyles as T, radioGroupStyles as A, checkboxGroupStyles as j, chipSingleInputStyles as F, chipMultipleInputStyles as L } from "@versaur/core/forms";
+import { forwardRef as b, useId as O, createContext as E, useContext as D } from "react";
+import { c as x } from "./cx-B9vmfsc1.js";
+import { u as y } from "./use-data-attrs-iPFyfiKN.js";
+const k = b(
+  ({ required: e = !1, disabled: o = !1, children: t, className: s, ...a }, i) => {
+    const c = y({
+      disabled: o,
+      required: e
+    });
+    return /* @__PURE__ */ n("label", { ref: i, className: x(ae.label, s), ...c, ...a, children: t });
+  }
+);
+k.displayName = "Label";
+const B = b(({ children: e, className: o, ...t }, s) => /* @__PURE__ */ n("p", { ref: s, className: x(se.helper, o), ...t, children: e }));
+B.displayName = "HelperText";
+const G = b(({ children: e, className: o, ...t }, s) => /* @__PURE__ */ n("p", { ref: s, className: x(de.error, o), role: "alert", "aria-live": "polite", ...t, children: e }));
+G.displayName = "ErrorText";
+const ce = b(
+  ({
+    label: e,
+    helper: o,
+    error: t,
+    required: s = !1,
+    disabled: a = !1,
+    readOnly: i = !1,
+    leftIcon: c,
+    rightIcon: d,
+    id: l,
+    className: r,
+    ...u
+  }, v) => {
+    const h = O(), m = l || h, p = o ? `${m}-helper` : void 0, f = t ? `${m}-error` : void 0, C = [p, f].filter(Boolean).join(" "), N = y({
+      disabled: a,
+      hasLeftIcon: !!c,
+      hasRightIcon: !!d,
+      invalid: !!t,
+      readOnly: i
+    });
+    return /* @__PURE__ */ I("div", { className: x($.field, r), children: [
+      e && /* @__PURE__ */ n(k, { htmlFor: m, required: s, disabled: a, children: e }),
+      /* @__PURE__ */ I("div", { className: $.wrapper, ...N, children: [
+        c && /* @__PURE__ */ n("span", { className: $["left-icon"], children: c }),
+        /* @__PURE__ */ n(
+          "input",
+          {
+            ref: v,
+            id: m,
+            type: "text",
+            className: $.input,
+            disabled: a,
+            readOnly: i,
+            required: s,
+            "aria-invalid": t ? "true" : void 0,
+            "aria-disabled": a ? "true" : void 0,
+            "aria-describedby": C || void 0,
+            ...u
+          }
+        ),
+        d && /* @__PURE__ */ n("span", { className: $["right-icon"], children: d })
+      ] }),
+      t && /* @__PURE__ */ n(G, { id: f, children: t }),
+      !t && o && /* @__PURE__ */ n(B, { id: p, children: o })
+    ] });
+  }
+);
+ce.displayName = "TextInput";
+const le = b(
+  ({
+    label: e,
+    helper: o,
+    error: t,
+    required: s = !1,
+    disabled: a = !1,
+    readOnly: i = !1,
+    resizable: c = !0,
+    minRows: d = 3,
+    maxRows: l,
+    id: r,
+    className: u,
+    ...v
+  }, h) => {
+    const m = O(), p = r || m, f = o ? `${p}-helper` : void 0, C = t ? `${p}-error` : void 0, N = [f, C].filter(Boolean).join(" "), g = y({
+      disabled: a,
+      invalid: !!t,
+      readOnly: i,
+      resizable: c ? "true" : "false",
+      minRows: "true",
+      ...l && { maxRows: "true" }
+    }), S = {
+      "--_min-rows-count": d,
+      ...l && { "--_max-rows-count": l }
+    };
+    return /* @__PURE__ */ I("div", { className: x(P.field, u), children: [
+      e && /* @__PURE__ */ n(k, { htmlFor: p, required: s, disabled: a, children: e }),
+      /* @__PURE__ */ n(
+        "textarea",
+        {
+          ref: h,
+          id: p,
+          className: P.textarea,
+          disabled: a,
+          readOnly: i,
+          required: s,
+          style: S,
+          "aria-invalid": t ? "true" : void 0,
+          "aria-disabled": a ? "true" : void 0,
+          "aria-describedby": N || void 0,
+          ...g,
+          ...v
+        }
+      ),
+      t && /* @__PURE__ */ n(G, { id: C, children: t }),
+      !t && o && /* @__PURE__ */ n(B, { id: f, children: o })
+    ] });
+  }
+);
+le.displayName = "TextArea";
+const V = b(({ children: e, ...o }, t) => /* @__PURE__ */ n("option", { ref: t, ...o, children: e }));
+V.displayName = "Select.Option";
+const _ = b(
+  ({ label: e, children: o, ...t }, s) => /* @__PURE__ */ n("optgroup", { ref: s, label: e, ...t, children: o })
+);
+_.displayName = "Select.OptionGroup";
+const z = b(
+  ({ label: e, helper: o, error: t, required: s = !1, disabled: a = !1, placeholder: i, children: c, id: d, className: l, ...r }, u) => {
+    const v = O(), h = d || v, m = o ? `${h}-helper` : void 0, p = t ? `${h}-error` : void 0, f = [m, p].filter(Boolean).join(" "), C = y({
+      disabled: a,
+      invalid: !!t
+    });
+    return /* @__PURE__ */ I("div", { className: x(H.field, l), children: [
+      e && /* @__PURE__ */ n(k, { htmlFor: h, required: s, disabled: a, children: e }),
+      /* @__PURE__ */ I(
+        "select",
+        {
+          ref: u,
+          id: h,
+          className: H.select,
+          disabled: a,
+          required: s,
+          "aria-invalid": t ? "true" : void 0,
+          "aria-disabled": a ? "true" : void 0,
+          "aria-describedby": f || void 0,
+          ...C,
+          ...r,
+          children: [
+            i && /* @__PURE__ */ n("option", { value: "", disabled: !0, children: i }),
+            c
+          ]
+        }
+      ),
+      t && /* @__PURE__ */ n(G, { id: p, children: t }),
+      !t && o && /* @__PURE__ */ n(B, { id: m, children: o })
+    ] });
+  }
+);
+z.displayName = "Select";
+const J = z;
+J.Option = V;
+J.OptionGroup = _;
+const re = b(
+  ({ variant: e = "outline", size: o = "medium", invalid: t = !1, disabled: s = !1, children: a, className: i, ...c }, d) => {
+    const l = y({
+      disabled: s,
+      invalid: t,
+      size: o,
+      variant: e
+    });
+    return /* @__PURE__ */ I("label", { className: x(M.radio, i), ...l, children: [
+      /* @__PURE__ */ n(
+        "input",
+        {
+          ref: d,
+          type: "radio",
+          className: M.input,
+          disabled: s,
+          "aria-invalid": t || void 0,
+          ...c
+        }
+      ),
+      /* @__PURE__ */ n("span", { className: M.indicator }),
+      a && /* @__PURE__ */ n("span", { className: M.label, children: a })
+    ] });
+  }
+);
+re.displayName = "Radio";
+const pe = b(
+  ({ invalid: e = !1, disabled: o = !1, required: t = !1, children: s, className: a, ...i }, c) => {
+    const d = y({
+      disabled: o,
+      invalid: e,
+      required: t
+    });
+    return /* @__PURE__ */ I("label", { className: x(T.checkbox, a), ...d, children: [
+      /* @__PURE__ */ n(
+        "input",
+        {
+          ref: c,
+          type: "checkbox",
+          className: T.input,
+          disabled: o,
+          required: t,
+          "aria-invalid": e || void 0,
+          "aria-required": t || void 0,
+          ...i
+        }
+      ),
+      /* @__PURE__ */ n("span", { className: T.indicator }),
+      s && /* @__PURE__ */ n("span", { className: T.label, "data-required": t || void 0, children: s })
+    ] });
+  }
+);
+pe.displayName = "Checkbox";
+const K = E(void 0);
+function ue() {
+  const e = D(K);
+  if (!e)
+    throw new Error("RadioGroup.Option must be used within RadioGroup");
+  return e;
+}
+const Q = b(
+  ({
+    value: e,
+    onChange: o,
+    name: t,
+    variant: s = "outline",
+    size: a = "medium",
+    label: i,
+    helper: c,
+    error: d,
+    required: l = !1,
+    disabled: r = !1,
+    direction: u = "column",
+    children: v,
+    className: h,
+    ...m
+  }, p) => {
+    const f = O(), C = m.id || f, N = c ? `${C}-helper` : void 0, g = d ? `${C}-error` : void 0, S = [N, g].filter(Boolean).join(" "), w = (oe) => {
+      !r && o && o(oe);
+    }, R = y({
+      disabled: r,
+      invalid: !!d,
+      size: a === "medium" ? void 0 : a,
+      variant: a === "medium" ? s : void 0
+    });
+    return /* @__PURE__ */ I("div", { ref: p, className: x(A.field, h), ...R, ...m, children: [
+      i && /* @__PURE__ */ n(k, { required: l, disabled: r, children: i }),
+      /* @__PURE__ */ n(K.Provider, { value: { disabled: r, name: t, onChange: w, value: e }, children: /* @__PURE__ */ n(
+        "div",
+        {
+          className: A.options,
+          "data-direction": u,
+          role: "radiogroup",
+          "aria-describedby": S || void 0,
+          "aria-invalid": d ? "true" : void 0,
+          children: v
+        }
+      ) }),
+      d && /* @__PURE__ */ n(G, { id: g, children: d }),
+      !d && c && /* @__PURE__ */ n(B, { id: N, children: c })
+    ] });
+  }
+);
+Q.displayName = "RadioGroup";
+const U = b(
+  ({ value: e, children: o, disabled: t, className: s, ...a }, i) => {
+    const c = ue(), d = c.value === e, l = c.disabled || t, r = () => {
+      l || c.onChange(e);
+    };
+    return /* @__PURE__ */ I("label", { className: x(A.option, s), children: [
+      /* @__PURE__ */ n(
+        "input",
+        {
+          ref: i,
+          type: "radio",
+          name: c.name,
+          value: e,
+          checked: d,
+          disabled: l,
+          onChange: r,
+          className: A.input,
+          ...a
+        }
+      ),
+      /* @__PURE__ */ n("span", { className: A.indicator }),
+      o && /* @__PURE__ */ n("span", { className: A.optionLabel, children: o })
+    ] });
+  }
+);
+U.displayName = "RadioGroup.Option";
+const Ie = Object.assign(Q, {
+  Option: U
+}), W = E(void 0);
+function he() {
+  const e = D(W);
+  if (!e)
+    throw new Error("CheckboxGroup.Option must be used within CheckboxGroup");
+  return e;
+}
+const X = b(
+  ({
+    value: e,
+    onChange: o,
+    name: t,
+    label: s,
+    helper: a,
+    error: i,
+    required: c = !1,
+    disabled: d = !1,
+    direction: l = "column",
+    children: r,
+    className: u,
+    ...v
+  }, h) => {
+    const m = O(), p = v.id || m, f = a ? `${p}-helper` : void 0, C = i ? `${p}-error` : void 0, N = [f, C].filter(Boolean).join(" "), g = (w) => {
+      !d && o && o(w);
+    }, S = y({
+      disabled: d,
+      invalid: !!i
+    });
+    return /* @__PURE__ */ I("div", { ref: h, className: x(j.field, u), ...S, ...v, children: [
+      s && /* @__PURE__ */ n(k, { required: c, disabled: d, children: s }),
+      /* @__PURE__ */ n(W.Provider, { value: { disabled: d, name: t, onChange: g, value: e }, children: /* @__PURE__ */ n(
+        "div",
+        {
+          className: j.options,
+          "data-direction": l,
+          role: "group",
+          "aria-describedby": N || void 0,
+          "aria-invalid": i ? "true" : void 0,
+          children: r
+        }
+      ) }),
+      i && /* @__PURE__ */ n(G, { id: C, children: i }),
+      !i && a && /* @__PURE__ */ n(B, { id: f, children: a })
+    ] });
+  }
+);
+X.displayName = "CheckboxGroup";
+const Y = b(
+  ({ value: e, children: o, disabled: t, required: s = !1, className: a, ...i }, c) => {
+    const d = O(), l = he(), r = l.value.includes(e), u = l.disabled || t, v = () => {
+      if (!u) {
+        const m = r ? l.value.filter((p) => p !== e) : [...l.value, e];
+        l.onChange(m);
+      }
+    }, h = y({
+      disabled: u,
+      required: s
+    });
+    return /* @__PURE__ */ I("label", { className: x(j.option, a), ...h, children: [
+      /* @__PURE__ */ n(
+        "input",
+        {
+          ref: c,
+          type: "checkbox",
+          name: l.name,
+          value: e,
+          checked: r,
+          disabled: u,
+          required: s,
+          onChange: v,
+          className: j.input,
+          "aria-required": s || void 0,
+          ...i,
+          id: d
+        }
+      ),
+      /* @__PURE__ */ n("span", { className: j.indicator }),
+      o && /* @__PURE__ */ n(k, { required: s, disabled: u, htmlFor: d, children: o })
+    ] });
+  }
+);
+Y.displayName = "CheckboxGroup.Option";
+const ye = Object.assign(X, {
+  Option: Y
+}), Z = E(void 0);
+function me() {
+  const e = D(Z);
+  if (!e)
+    throw new Error("ChipSingleInput.Option must be used within ChipSingleInput");
+  return e;
+}
+const q = b(
+  ({
+    value: e,
+    onChange: o,
+    name: t,
+    label: s,
+    helper: a,
+    error: i,
+    required: c = !1,
+    disabled: d = !1,
+    gap: l = "2",
+    wrap: r = !0,
+    children: u,
+    className: v,
+    ...h
+  }, m) => {
+    const p = O(), f = h.id || p, C = a ? `${f}-helper` : void 0, N = i ? `${f}-error` : void 0, g = [C, N].filter(Boolean).join(" "), S = (R) => {
+      !d && o && o(R);
+    }, w = y({
+      invalid: !!i
+    });
+    return /* @__PURE__ */ I("div", { ref: m, className: x(F.field, v), ...w, ...h, children: [
+      s && /* @__PURE__ */ n(k, { required: c, disabled: d, children: s }),
+      /* @__PURE__ */ n(
+        Z.Provider,
+        {
+          value: {
+            disabled: d,
+            name: t,
+            onChange: S,
+            value: e
+          },
+          children: /* @__PURE__ */ n(
+            "div",
+            {
+              className: F.options,
+              "data-gap": l,
+              "data-wrap": r,
+              role: "radiogroup",
+              "aria-describedby": g || void 0,
+              "aria-invalid": i ? "true" : void 0,
+              children: u
+            }
+          )
+        }
+      ),
+      i && /* @__PURE__ */ n(G, { id: N, children: i }),
+      !i && a && /* @__PURE__ */ n(B, { id: C, children: a })
+    ] });
+  }
+);
+q.displayName = "ChipSingleInput";
+const ee = b(
+  ({ value: e, children: o, disabled: t, ...s }, a) => {
+    const i = me(), c = i.value === e, d = i.disabled || t, l = () => {
+      !d && i.onChange && i.onChange(e);
+    }, r = y({
+      disabled: d,
+      selected: c
+    });
+    return /* @__PURE__ */ n(
+      "button",
+      {
+        ref: a,
+        type: "button",
+        className: F.option,
+        onClick: l,
+        disabled: d,
+        "aria-pressed": c,
+        ...r,
+        ...s,
+        children: o
+      }
+    );
+  }
+);
+ee.displayName = "ChipSingleInput.Option";
+const ge = Object.assign(q, {
+  Option: ee
+}), te = E(void 0);
+function ve() {
+  const e = D(te);
+  if (!e)
+    throw new Error("ChipMultipleInput.Option must be used within ChipMultipleInput");
+  return e;
+}
+const ie = b(
+  ({
+    value: e,
+    onChange: o,
+    name: t,
+    label: s,
+    helper: a,
+    error: i,
+    required: c = !1,
+    disabled: d = !1,
+    gap: l = "2",
+    wrap: r = !0,
+    children: u,
+    className: v,
+    ...h
+  }, m) => {
+    const p = O(), f = h.id || p, C = a ? `${f}-helper` : void 0, N = i ? `${f}-error` : void 0, g = [C, N].filter(Boolean).join(" "), S = (R) => {
+      !d && o && o(R);
+    }, w = y({
+      invalid: !!i
+    });
+    return /* @__PURE__ */ I("div", { ref: m, className: x(L.field, v), ...w, ...h, children: [
+      s && /* @__PURE__ */ n(k, { required: c, disabled: d, children: s }),
+      /* @__PURE__ */ n(
+        te.Provider,
+        {
+          value: {
+            disabled: d,
+            name: t,
+            onChange: S,
+            value: e
+          },
+          children: /* @__PURE__ */ n(
+            "div",
+            {
+              className: L.options,
+              "data-gap": l,
+              "data-wrap": r,
+              role: "group",
+              "aria-describedby": g || void 0,
+              "aria-invalid": i ? "true" : void 0,
+              children: u
+            }
+          )
+        }
+      ),
+      i && /* @__PURE__ */ n(G, { id: N, children: i }),
+      !i && a && /* @__PURE__ */ n(B, { id: C, children: a })
+    ] });
+  }
+);
+ie.displayName = "ChipMultipleInput";
+const ne = b(
+  ({ value: e, children: o, disabled: t, ...s }, a) => {
+    const i = ve(), c = i.value.includes(e), d = i.disabled || t, l = () => {
+      if (!d && i.onChange) {
+        const u = c ? i.value.filter((v) => v !== e) : [...i.value, e];
+        i.onChange(u);
+      }
+    }, r = y({
+      disabled: d,
+      selected: c
+    });
+    return /* @__PURE__ */ n(
+      "button",
+      {
+        ref: a,
+        type: "button",
+        className: L.option,
+        onClick: l,
+        disabled: d,
+        "aria-pressed": c,
+        ...r,
+        ...s,
+        children: o
+      }
+    );
+  }
+);
+ne.displayName = "ChipMultipleInput.Option";
+const Se = Object.assign(ie, {
+  Option: ne
+});
 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
+  pe as Checkbox,
+  ye as CheckboxGroup,
+  Se as ChipMultipleInput,
+  ge as ChipSingleInput,
+  G as ErrorText,
+  B as HelperText,
+  k as Label,
+  re as Radio,
+  Ie as RadioGroup,
+  J as Select,
+  le as TextArea,
+  ce as TextInput
 };

package/dist/overlay-parts-BhSNUdE2.js

@@ -0,0 +1,20 @@
+import { jsx as o } from "react/jsx-runtime";
+import { overlayPartsStyles as l } from "@versaur/core/utils";
+import { forwardRef as t } from "react";
+import { c as y } from "./cx-B9vmfsc1.js";
+const d = t(({ children: a, className: e, ...r }, s) => /* @__PURE__ */ o("div", { ref: s, className: y(l.header, e), ...r, children: a }));
+d.displayName = "OverlayHeader";
+const i = t(
+  ({ children: a, as: e = "h2", className: r, ...s }, m) => /* @__PURE__ */ o(e, { ref: m, className: y(l.title, r), ...s, children: a })
+);
+i.displayName = "OverlayTitle";
+const v = t(({ children: a, className: e, ...r }, s) => /* @__PURE__ */ o("div", { ref: s, className: y(l.body, e), ...r, children: a }));
+v.displayName = "OverlayBody";
+const c = t(({ children: a, className: e, ...r }, s) => /* @__PURE__ */ o("div", { ref: s, className: y(l.footer, e), ...r, children: a }));
+c.displayName = "OverlayFooter";
+export {
+  v as O,
+  c as a,
+  d as b,
+  i as c
+};