welcome-ui/dist/Field.js

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

"use client";
import './Field.css';
import { jsxs as y, jsx as f } from "react/jsx-runtime";
import { createContext as $, useMemo as q, useId as A, useContext as R } from "react";
import { Hint as S } from "./Hint.js";
import { Label as T } from "./Label.js";
import { c as W } from "./index-B6iGEm-i.js";
import { f as k } from "./forwardRefWithAs-8eP3ZN15.js";
const z = "_root_13hug_2", E = "_label_13hug_8", G = "_hint_13hug_8", J = "_inline_13hug_14", K = "_visuallyHidden_13hug_51", O = {
  root: z,
  label: E,
  hint: G,
  inline: J,
  "hint-max-length": "_hint-max-length_13hug_48",
  visuallyHidden: K
}, d = W(O), I = $({
  getInputProps: (n) => n,
  hintID: "",
  labelID: "",
  variant: void 0
});
function _(n) {
  const c = A();
  return n || c;
}
function ee() {
  return R(I);
}
const Q = k((n, c) => {
  const {
    children: N,
    className: p,
    disabled: u,
    error: g,
    hideLabel: D,
    hint: F,
    hintProps: l,
    id: H,
    inline: j,
    label: B,
    labelProps: i,
    maxLength: e,
    required: m,
    success: v,
    warning: x,
    ...C
  } = n, t = g ? "danger" : v ? "success" : x ? "warning" : void 0, s = g ?? x ?? v ?? F, a = e ? `${new Intl.NumberFormat().format(e.count)} / ${new Intl.NumberFormat().format(e.max)}` : void 0, r = _(i == null ? void 0 : i.id), o = _(l == null ? void 0 : l.id), h = _(H), w = q(
    () => ({
      getInputProps(b) {
        const L = [b["aria-describedby"], (s || a) && o].filter(Boolean).join(" ") || void 0, M = [b["aria-labelledby"], r].filter(Boolean).join(" ");
        return {
          ...b,
          "aria-describedby": L,
          "aria-invalid": t === "danger" ? !0 : void 0,
          "aria-labelledby": M,
          disabled: u,
          id: h,
          /**
           * pass maxCount to children for block form
           */
          maxLength: e == null ? void 0 : e.max,
          required: m
        };
      },
      hintID: o,
      labelID: r,
      variant: t
    }),
    [o, r, t, s, a, u, h, e == null ? void 0 : e.max, m]
  );
  return /* @__PURE__ */ y("div", { ref: c, ...C, className: d("root", j && "inline", p), children: [
    /* @__PURE__ */ f(
      T,
      {
        disabled: u,
        htmlFor: h,
        id: r,
        required: m,
        variant: t,
        ...i,
        className: d("label", D && "visuallyHidden", i == null ? void 0 : i.className),
        children: B
      }
    ),
    /* @__PURE__ */ f(I.Provider, { value: w, children: N }),
    s || a ? /* @__PURE__ */ y(S, { className: d("hint"), id: o, variant: t, ...l, children: [
      s,
      a ? /* @__PURE__ */ f("span", { className: d("hint-max-length"), children: a }) : null
    ] }) : null
  ] });
});
Q.displayName = "Field";
export {
  Q as Field,
  I as FieldContext,
  O as fieldClasses,
  _ as useDefaultID,
  ee as useField
};