@clubmed/trident-ui/ui/forms/Filter.js

Shared ClubMed React UI components

import { jsxs as a, jsx as e } from "react/jsx-runtime";
import { c as g } from "../../chunks/clsx.js";
import { useId as C } from "react";
/* empty css                    */
import { Icon as l } from "@clubmed/trident-icons";
import { useValue as S } from "../hooks/useValue.js";
import { useInternalStatus as V } from "../hooks/useInternalStatus.js";
function q(d) {
  const m = C(), {
    id: r = m,
    name: n = r,
    className: u,
    dataTestId: p,
    disabled: t = !1,
    checked: h = !1,
    value: s,
    tabIndex: f = 0,
    validationStatus: x = "default",
    errorMessage: i,
    onChange: b,
    hasDropdown: k,
    children: v,
    ...N
  } = d, { value: o, setValue: w } = S({
    name: n,
    initialValue: h,
    onChange(I, c) {
      b?.(I, c ? s !== void 0 ? s : c : null);
    }
  }), D = V({
    isDisabled: t,
    validationStatus: x
  }) === "error" && i;
  return /* @__PURE__ */ a("div", { className: g(u, "relative"), children: [
    /* @__PURE__ */ a("label", { "data-testid": `filter-container-${r}`, className: "relative", children: [
      /* @__PURE__ */ e(
        "input",
        {
          ...N,
          name: n,
          "data-testid": p,
          type: "checkbox",
          tabIndex: f,
          onChange: () => {
            t || w(!o);
          },
          checked: o,
          "data-name": "Filter",
          disabled: t,
          value: s
        }
      ),
      /* @__PURE__ */ a("span", { children: [
        /* @__PURE__ */ e("span", { className: "font-semibold", children: v }),
        /* @__PURE__ */ e(l, { className: "check", width: null, name: "CheckDefault", color: "black" }),
        k && /* @__PURE__ */ e(l, { name: "ArrowDefaultDown", className: "ml-8", width: "24px", color: "black" })
      ] })
    ] }),
    D && /* @__PURE__ */ a("span", { className: "text-red text-b4 flex items-start space-x-4 ps-20", role: "alert", children: [
      /* @__PURE__ */ e(l, { name: "Error", width: "20px" }),
      i
    ] })
  ] });
}
export {
  q as Filter
};
//# sourceMappingURL=Filter.js.map