@react-beauty/ui-checkbox/dist/index.js

ui-checkbox

import { jsx as a, jsxs as L } from "react/jsx-runtime";
import { createContext as w, useContext as A, useState as m, useId as V, forwardRef as u, useEffect as G } from "react";
import { styled as k } from "@linaria/react";
const y = /* @__PURE__ */ k("div")({
  name: "ElCheckboxContainer",
  class: "react-beauty-el-checkbox-container",
  propsAsIs: !1
}), H = /* @__PURE__ */ k("label")({
  name: "ElCheckboxLabel",
  class: "react-beauty-el-checkbox-label",
  propsAsIs: !1
}), O = /* @__PURE__ */ k("div")({
  name: "ElCheckboxBox",
  class: "react-beauty-el-checkbox-box",
  propsAsIs: !1
}), $ = /* @__PURE__ */ k("input")({
  name: "ElCheckboxInput",
  class: "react-beauty-el-checkbox-input",
  propsAsIs: !1
}), S = /* @__PURE__ */ k("span")({
  name: "ElCheckboxHelperText",
  class: "react-beauty-el-checkbox-helper-text",
  propsAsIs: !1
}), W = /* @__PURE__ */ k("div")({
  name: "ElCheckboxWrapper",
  class: "react-beauty-el-checkbox-wrapper",
  propsAsIs: !1
}), R = /* @__PURE__ */ k("div")({
  name: "ElCheckboxGroupContainer",
  class: "react-beauty-el-checkbox-group-container",
  propsAsIs: !1
}), P = w(void 0), E = () => A(P), D = ({
  children: t,
  hasError: s = !1,
  isDisabled: e = !1,
  name: o,
  defaultValues: c = [],
  values: r,
  onValueChange: h
}) => {
  const [n, l] = m(c), i = r !== void 0, b = i ? r : n, x = (d, p) => {
    const C = p ? [...b, d] : b.filter((f) => f !== d);
    i || l(C), h == null || h(C);
  };
  return /* @__PURE__ */ a(
    P.Provider,
    {
      value: {
        hasError: s,
        isDisabled: e,
        selectedValues: b,
        name: o,
        onChange: x
      },
      children: t
    }
  );
}, T = w(
  void 0
), v = () => {
  const t = A(T);
  if (!t)
    throw new Error("useCheckbox must be used within a CheckboxProvider");
  return t;
}, j = ({
  children: t,
  hasError: s = !1,
  isDisabled: e = !1,
  value: o
}) => {
  const [c, r] = m(!1), h = V(), n = E();
  if (!n)
    throw new Error(
      "CheckboxProvider must be used within a CheckboxGroupProvider"
    );
  const l = n.selectedValues.includes(o), i = n.hasError || s, b = n.isDisabled || e, x = n.name, d = (C, f) => {
    b || n.onChange(C, f);
  }, p = () => ({
    "data-error": i,
    "data-disabled": b,
    "data-checked": l,
    "data-is-focused": c,
    "data-is-blurred": !c
  });
  return /* @__PURE__ */ a(
    T.Provider,
    {
      value: {
        hasError: i,
        isDisabled: b,
        isChecked: l,
        isFocused: c,
        checkboxId: h,
        value: o,
        name: x,
        onChange: d,
        setIsFocused: r,
        getAttributes: p
      },
      children: t
    }
  );
};
u(({ hasError: t = !1, isDisabled: s = !1, children: e, value: o, ...c }, r) => /* @__PURE__ */ a(j, { hasError: t, isDisabled: s, value: o, children: /* @__PURE__ */ a(y, { ref: r, ...c, children: e }) }));
const g = u(({ hasError: t = !1, isDisabled: s = !1, value: e, children: o, ...c }, r) => /* @__PURE__ */ a(j, { hasError: t, isDisabled: s, value: e, children: /* @__PURE__ */ a(y, { ref: r, ...c, children: o }) })), q = u(
  (t, s) => {
    const {
      value: e,
      checked: o,
      defaultChecked: c,
      hasError: r,
      isDisabled: h,
      onValueChange: n
    } = t, l = E(), [i, b] = m([]);
    if (G(() => {
      !l && c && b([e]);
    }, [l, e, c]), G(() => {
      !l && o !== void 0 && b(o ? [e] : []);
    }, [l, o, e]), l)
      return /* @__PURE__ */ a(g, { ...t, ref: s });
    const x = (d) => {
      const p = d.includes(e);
      n == null || n(p), b(d);
    };
    return /* @__PURE__ */ a(
      D,
      {
        name: `standalone-${e}`,
        values: i,
        onValueChange: x,
        hasError: r,
        isDisabled: h,
        children: /* @__PURE__ */ a(g, { ...t, ref: s })
      }
    );
  }
), z = u(({ children: t, htmlFor: s, ...e }, o) => {
  const { checkboxId: c, getAttributes: r } = v();
  return /* @__PURE__ */ a(
    H,
    {
      ref: o,
      htmlFor: s || c,
      ...e,
      ...r(),
      children: t
    }
  );
});
u(
  ({ children: t, htmlFor: s, ...e }, o) => {
    const { checkboxId: c, getAttributes: r } = v();
    return /* @__PURE__ */ a(
      H,
      {
        ref: o,
        htmlFor: s || c,
        ...e,
        ...r(),
        children: t
      }
    );
  }
);
const F = u((t, s) => {
  const e = E();
  if (!e)
    throw new Error(
      "CheckboxGroupHelperText must be used within a CheckboxGroup"
    );
  const o = {
    "data-error": e.hasError,
    "data-disabled": e.isDisabled
  };
  return /* @__PURE__ */ a(S, { ref: s, ...t, ...o });
}), B = Object.assign(
  u(
    ({
      children: t,
      name: s,
      defaultValues: e,
      values: o,
      onValueChange: c,
      isDisabled: r = !1,
      hasError: h = !1,
      ...n
    }, l) => /* @__PURE__ */ a(
      D,
      {
        name: s,
        defaultValues: e,
        values: o,
        onValueChange: c,
        isDisabled: r,
        hasError: h,
        children: /* @__PURE__ */ a(R, { ref: l, ...n, children: t })
      }
    )
  ),
  { HelperText: F }
), J = u(({ id: t, onFocus: s, onBlur: e, ...o }, c) => {
  const {
    isDisabled: r,
    isChecked: h,
    checkboxId: n,
    name: l,
    value: i,
    onChange: b,
    getAttributes: x,
    setIsFocused: d
  } = v(), p = (I) => {
    d(!0), s == null || s(I);
  }, C = (I) => {
    d(!1), e == null || e(I);
  }, f = () => {
    b(i, !h);
  };
  return /* @__PURE__ */ L(W, { ...x(), children: [
    /* @__PURE__ */ a(
      $,
      {
        ref: c,
        id: t || n,
        name: l,
        value: i,
        type: "checkbox",
        checked: h,
        disabled: r,
        onFocus: p,
        onBlur: C,
        onChange: f,
        ...o
      }
    ),
    /* @__PURE__ */ a(O, { "data-disabled": r })
  ] });
}), K = {
  Field: J,
  Label: z
}, X = Object.assign(
  q,
  K
), M = {
  HelperText: F
}, Y = Object.assign(
  B,
  M
);
export {
  Y as CheckboxGroup,
  X as CheckboxInput
};