welcome-ui/dist/index-D10ydFFH.mjs

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

"use client";
import { j as L } from "./jsx-runtime-Bqq1Hxg9.mjs";
import { shouldForwardProp as B, forwardRef as D } from "./System.mjs";
import Z, { th as C, system as H, css as F } from "@xstyled/styled-components";
import { d as O } from "./field-styles-CfVLcVQp.mjs";
import { t as V, f as W, c as q, h as z, _ as G, j as I, l as J, x as K, b as E, D as Q, d as X, e as Y, g as y, y as ee } from "./LVA2YJMS-B8X1PCyC.mjs";
import { createContext as te, useState as re, useRef as oe, useEffect as ie } from "react";
import { u as ae } from "./KUU7WJ55-ClLMNDee.mjs";
import { u as ne } from "./YV4JVR4I-BLeUul5N.mjs";
var ce = te(!1), se = V(), de = se.useContext, j = "input";
function _(t, o) {
  o ? t.indeterminate = !0 : t.indeterminate && (t.indeterminate = !1);
}
function le(t, o) {
  return t === "input" && (!o || o === "checkbox");
}
function A(t) {
  return Array.isArray(t) ? t.toString() : t;
}
var ue = q(
  function(o) {
    var c = o, {
      store: a,
      name: s,
      value: i,
      checked: l,
      defaultChecked: p
    } = c, r = G(c, [
      "store",
      "name",
      "value",
      "checked",
      "defaultChecked"
    ]);
    const v = de();
    a = a || v;
    const [x, u] = re(p ?? !1), f = ne(a, (e) => {
      if (l !== void 0) return l;
      if ((e == null ? void 0 : e.value) === void 0) return x;
      if (i != null) {
        if (Array.isArray(e.value)) {
          const m = A(i);
          return e.value.includes(m);
        }
        return e.value === i;
      }
      return Array.isArray(e.value) ? !1 : typeof e.value == "boolean" ? e.value : !1;
    }), g = oe(null), R = I(g, j), n = le(R, r.type), b = f ? f === "mixed" : void 0, h = f === "mixed" ? !1 : f, S = J(r), [T, N] = K();
    ie(() => {
      const e = g.current;
      e && (_(e, b), !n && (e.checked = h, s !== void 0 && (e.name = s), i !== void 0 && (e.value = `${i}`)));
    }, [T, b, n, h, s, i]);
    const w = r.onChange, $ = E((e) => {
      if (S) {
        e.stopPropagation(), e.preventDefault();
        return;
      }
      if (_(e.currentTarget, b), n || (e.currentTarget.checked = !e.currentTarget.checked, N()), w == null || w(e), e.defaultPrevented) return;
      const m = e.currentTarget.checked;
      u(m), a == null || a.setValue((d) => {
        if (i == null) return m;
        const k = A(i);
        return Array.isArray(d) ? m ? d.includes(k) ? d : [...d, k] : d.filter((U) => U !== k) : d === k ? !1 : k;
      });
    }), P = r.onClick, M = E((e) => {
      P == null || P(e), !e.defaultPrevented && (n || $(e));
    });
    return r = Q(
      r,
      (e) => /* @__PURE__ */ L.jsx(ce.Provider, { value: h, children: e }),
      [h]
    ), r = X(y({
      role: n ? void 0 : "checkbox",
      type: n ? "checkbox" : void 0,
      "aria-checked": f
    }, r), {
      ref: Y(g, r.ref),
      onChange: $,
      onClick: M
    }), r = ae(y({ clickOnEnter: !n }, r)), ee(y({
      name: n ? s : void 0,
      value: n ? i : void 0,
      checked: h
    }, r));
  }
), fe = W(function(o) {
  const c = ue(o);
  return z(j, c);
});
const he = Z(fe).withConfig({
  shouldForwardProp: B
})(
  ({ indeterminate: t, order: o = "-1", size: c, theme: a, variant: s }) => F`
    ${O({ size: c, variant: s })};
    ${C("checkboxes.default")}
    position: relative;
    padding: 0;
    order: ${o};
    cursor: pointer;
    transition: medium;
    overflow: hidden;
    ${H};

    &[aria-checked='true'] {
      &:not([disabled]) {
        ${C("checkboxes.checked")};
      }

      &:not([indeterminate]) {
        &::after {
          content: url(${`'data:image/svg+xml; utf8, <svg viewBox="0 0 10 8" xmlns="http://www.w3.org/2000/svg"><path fill="${a.defaultFields.checkableField.checked.color}" d="M7.96171 0.596898C8.24912 0.27893 8.74024 0.25262 9.06024 0.537743C9.37208 0.815607 9.40671 1.28712 9.14514 1.60662L9.11975 1.63611L3.90331 7.40311C3.75365 7.5687 3.54304 7.66003 3.32401 7.66003C3.15017 7.66003 2.98077 7.60235 2.84241 7.49383L2.80848 7.46564L0.943652 5.82577C0.620151 5.54147 0.590221 5.04928 0.877091 4.72749C1.15398 4.41772 1.62383 4.38076 1.94536 4.6368L1.97506 4.66166L3.26156 5.79276L7.96171 0.596898Z" /></svg>'`});
          position: absolute;
          top: -2;
          right: 0;
          bottom: 0;
          left: 0;
          width: 10;
          margin: auto;
          text-align: center;
        }
      }
    }

    ${t && F`
      &:not([disabled]) {
        ${C("checkboxes.checked")};
      }

      /* stylelint-disable string-no-newline */
      &::after {
        content: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 10 4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.3973 1.76919C0.953776 1.81988 0.634816 2.04775 0.685235 2.49156C0.732149 2.90436 1.08212 3.03624 1.48789 3.03624L8.6029 2.23086C9.04669 2.18017 9.36538 1.9523 9.31469 1.50849C9.26427 1.06468 8.86389 0.917163 8.41956 0.969201C4.90971 1.38026 4.90828 1.36792 1.3973 1.76919Z' fill='${a.defaultFields.checkableField.checked.color}'/%3E%3C/svg%3E");
        position: absolute;
        top: -3.5;
        right: 0;
        bottom: 0;
        left: 2;
        margin: auto;
      }
    `}

    &[disabled] {
      ${C("checkboxes.disabled")}

      &::after {
        opacity: ${a.defaultFields.checkableField.disabled.opacity};
      }
    }
  `
), me = D(
  ({
    checked: t = !1,
    Component: o = he,
    dataTestId: c,
    disabled: a,
    indeterminate: s = !1,
    name: i,
    onChange: l,
    size: p,
    ...r
  }, v) => {
    const x = (u) => {
      u.target.checked = !u.target.checked, l && l(u);
    };
    return /* @__PURE__ */ L.jsx(
      o,
      {
        checked: t,
        "data-testid": c,
        disabled: a,
        id: i,
        indeterminate: s,
        name: i,
        onChange: x,
        ref: v,
        size: p,
        ...r
      }
    );
  }
);
me.displayName = "Checkbox";
export {
  fe as C,
  me as a
};