welcome-ui/dist/Field.js

Customizable design system with react, typescript, tailwindcss and ariakit.

"use client";
import { jsxs as L, jsx as r } from "react/jsx-runtime";
import { createContext as q, useMemo as w, useId as A, useContext as M } from "react";
import { Hint as R } from "./Hint.js";
import { Label as S } from "./Label.js";
import { c as T } from "./index-PAaZGbyz.js";
import { f as W } from "./forwardRefWithAs-8eP3ZN15.js";
const k = "_root_13ut9_2", z = "_label_13ut9_7", E = "_hint_13ut9_7", G = "_inline_13ut9_13", J = "_input_13ut9_35", K = "_visuallyHidden_13ut9_44", O = {
  root: k,
  label: z,
  hint: E,
  inline: G,
  input: J,
  visuallyHidden: K
}, o = T(O), p = q({
  getInputProps: (e) => e,
  hintID: "",
  labelID: "",
  variant: void 0
});
function _(e) {
  const d = A();
  return e || d;
}
function P() {
  return M(p);
}
const Q = W((e, d) => {
  const {
    children: y,
    className: I,
    disabled: c,
    error: f,
    hideLabel: x,
    hint: D,
    hintProps: t,
    id: g,
    inline: N,
    label: F,
    labelProps: n,
    required: u,
    success: h,
    warning: v,
    ...H
  } = e, i = f ? "danger" : h ? "success" : v ? "warning" : void 0, l = f ?? v ?? h ?? D, a = _(n == null ? void 0 : n.id), s = _(t == null ? void 0 : t.id), m = _(g), j = w(
    () => ({
      getInputProps(b) {
        const B = [b["aria-describedby"], l && s].filter(Boolean).join(" ") || void 0, C = [b["aria-labelledby"], a].filter(Boolean).join(" ");
        return {
          ...b,
          "aria-describedby": B,
          "aria-invalid": i === "danger" ? !0 : void 0,
          "aria-labelledby": C,
          disabled: c,
          id: m,
          required: u
        };
      },
      hintID: s,
      labelID: a,
      variant: i
    }),
    [s, a, i, l, c, m, u]
  );
  return /* @__PURE__ */ L("div", { ref: d, ...H, className: o("root", N && "inline", I), children: [
    /* @__PURE__ */ r(
      S,
      {
        className: o("label", x && "visuallyHidden"),
        disabled: c,
        htmlFor: m,
        id: a,
        required: u,
        variant: i,
        ...n,
        children: F
      }
    ),
    /* @__PURE__ */ r(p.Provider, { value: j, children: /* @__PURE__ */ r("div", { className: o("input"), children: y }) }),
    l ? /* @__PURE__ */ r(R, { className: o("hint"), id: s, variant: i, ...t, children: l }) : null
  ] });
});
Q.displayName = "Field";
export {
  Q as Field,
  p as FieldContext,
  _ as useDefaultID,
  P as useField
};