welcome-ui/dist/Field.mjs

Customizable design system with react • styled-components • styled-system and ariakit.

"use client";
import { j as n } from "./jsx-runtime-Bqq1Hxg9.mjs";
import F from "react";
import { Hint as w } from "./Hint.mjs";
import { StyledLabel as P, Label as H } from "./Label.mjs";
import { shouldForwardProp as z, forwardRef as C } from "./System.mjs";
import { VariantIcon as D } from "./VariantIcon.mjs";
import { u as V } from "./use-isomorphic-layout-effect-Izr-e2pi.mjs";
import c, { th as i, css as s } from "@xstyled/styled-components";
const Y = s`
  ${i("defaultFields.checkablelabel.default")};
  align-items: flex-start;
  overflow-wrap: break-word;
`, _ = c.divBox.withConfig({ shouldForwardProp: z })(
  ({ checked: t, isCheckable: o, isRadioGroup: l, withHintText: u }) => s`
    ${o && s`
      input {
        margin-top: xs;
      }
    `}
    ${P} {
      ${o && Y};
      ${o && u && i("defaultFields.checkablelabel.default")}
      ${t && i("defaultFields.checkablelabel.checked")}
      ${!o && s`
        margin-bottom: sm;
      `}
      ${l && s`
        margin-bottom: md;
      `}
    }
  `
), M = c.div`
  display: flex;
  align-items: flex-start;
  gap: sm;
`, O = c.divBox`
  display: flex;
  flex-direction: column;
`, q = c.divBox(
  ({ iconPlacement: t, size: o }) => s`
    position: absolute;
    top: 0;
    left: ${t === "left" ? i(`defaultFields.iconPlacement.${o}.left`) : "auto"};
    right: ${t === "right" ? i(`defaultFields.iconPlacement.${o}.right`) : "auto"};
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    transition: medium;
    transition-timing-function: primary;
    color: neutral-90;

    /* for button action */
    & > button {
      pointer-events: auto;
    }

    ${o === "xs" && s`
      button {
        height: ${i("buttons.sizes.xxs.height")};
        width: ${i("buttons.sizes.xxs.height")};
      }
    `}
  `
), A = c.divBox(
  ({ size: t }) => s`
    position: absolute;
    padding: 0;
    top: 0;
    bottom: 0;
    right: ${t === "xs" ? "sm" : "md"};
    display: flex;
    align-items: center;
    gap: xs;
    color: neutral-90;
    ${t === "xs" && s`
      button {
        height: ${i("buttons.sizes.xxs.height")};
        width: ${i("buttons.sizes.xxs.height")};
      }
    `}
  `
), J = {
  Checkbox: "checkbox",
  InputText: "text",
  Radio: "radio",
  RadioTab: "radio",
  Select: "text",
  Toggle: "checkbox"
}, K = (t) => J[t] || t, Q = ({
  error: t,
  success: o,
  warning: l
}) => {
  if (t) return "danger";
  if (l) return "warning";
  if (o) return "success";
}, U = () => `wui-field-${Math.random().toString(36).slice(2)}`, X = ["disabled", "required", "variant"], Z = C(
  ({
    children: t,
    dataTestId: o,
    disabled: l,
    disabledIcon: u,
    error: m,
    flexDirection: v,
    hint: k,
    label: x,
    required: f,
    success: h,
    transparent: j,
    warning: b,
    ...R
  }, I) => {
    const d = K(t.props.type || t.type.displayName), T = d === "radio", g = d === "RadioGroup", G = d === "FieldGroup", B = d === "checkbox", E = t.type.displayName === "Toggle", e = T || B || E, L = v || (e ? "row" : "column"), S = G || g, a = Q({ error: m, success: h, warning: b }), r = a ? m || b || h : k, W = !!r, p = t.props.id || t.props.name || U(), $ = F.cloneElement(F.Children.only(t), {
      disabled: l,
      id: p,
      required: f,
      transparent: j,
      variant: a,
      ...S ? { flexDirection: L } : {}
    });
    return V(() => {
      Object.keys(t.props).forEach((y) => {
        if (X.includes(y)) {
          const N = document.getElementById(p);
          console.warn(`You must pass the "${y}" prop to the <Field /> instead of`, N);
        }
      });
    }, [t.props, t.type.displayName, p]), /* @__PURE__ */ n.jsxs(
      _,
      {
        ref: I,
        ...R,
        "data-testid": o,
        isCheckable: e,
        isRadioGroup: g,
        withHintText: W,
        children: [
          /* @__PURE__ */ n.jsxs(M, { children: [
            e ? $ : null,
            /* @__PURE__ */ n.jsxs(O, { children: [
              x ? /* @__PURE__ */ n.jsxs(
                H,
                {
                  checkableField: e,
                  disabled: l,
                  disabledIcon: u,
                  htmlFor: p,
                  required: f,
                  variant: a,
                  withDisabledIcon: !e,
                  children: [
                    e ? /* @__PURE__ */ n.jsx(D, { size: "sm", variant: a }) : null,
                    x
                  ]
                }
              ) : null,
              e && r ? /* @__PURE__ */ n.jsx(
                w,
                {
                  checkableField: !0,
                  dataTestId: o ? `${o}-hint` : void 0,
                  mt: "0",
                  variant: a,
                  children: r
                }
              ) : null
            ] })
          ] }),
          !e && $,
          !e && r ? /* @__PURE__ */ n.jsx(w, { dataTestId: o ? `${o}-hint` : void 0, variant: a, children: r }) : null
        ]
      }
    );
  }
);
Z.displayName = "Field";
const rt = q, ct = A;
export {
  Z as Field,
  ct as IconGroupWrapper,
  rt as IconWrapper,
  K as getBaseType
};