@anoki/fse-ui/dist/index.es78.js

FSE UI components library

import { j as i } from "./index.es244.js";
import { clsx as h } from "./index.es246.js";
import { useRef as k, useEffect as N } from "react";
import { DatePicker as x } from "./index.es77.js";
import { Row as $ } from "./index.es9.js";
const E = ({
  label: l,
  startDateLabel: f = "Start Date",
  endDateLabel: p = "End Date",
  startDate: t,
  endDate: c,
  className: d,
  disabled: u = !1,
  required: o = !1,
  error: a,
  onStartDateChange: n,
  onEndDateChange: m,
  onStartDateClick: b,
  onEndDateClick: v
}) => {
  const r = k(null), s = l ? `datepicker-range-${l.toLowerCase().replace(/\s+/g, "-")}` : "datepicker-range";
  N(() => {
    a && r.current ? (r.current.setAttribute("aria-invalid", "true"), r.current.setAttribute(
      "aria-describedby",
      `${s}-error`
    )) : r.current && (r.current.setAttribute("aria-invalid", "false"), r.current.removeAttribute("aria-describedby"));
  }, [a, s]);
  const j = (e) => {
    c && e > c ? (n(e), m(e)) : n(e);
  }, g = (e) => {
    t && e < t && n(e), m(e);
  };
  return /* @__PURE__ */ i.jsxs(
    "div",
    {
      ref: r,
      className: h("base-col gap-x8", d),
      role: "group",
      "aria-labelledby": l ? `${s}-label` : void 0,
      "aria-describedby": a ? `${s}-error` : void 0,
      children: [
        l && /* @__PURE__ */ i.jsxs("label", { id: `${s}-label`, className: "text-sm text-dark", children: [
          l,
          o && /* @__PURE__ */ i.jsx("span", { className: "text-error ml-1", "aria-hidden": "true", children: "*" })
        ] }),
        /* @__PURE__ */ i.jsxs($, { gap: "x16", role: "group", children: [
          /* @__PURE__ */ i.jsx(
            x,
            {
              label: f,
              value: t,
              maxValue: c,
              disabled: u,
              required: o,
              onChange: j,
              onClick: b,
              className: "flex-1"
            }
          ),
          /* @__PURE__ */ i.jsx(
            x,
            {
              label: p,
              value: c,
              minValue: t,
              disabled: u,
              required: o,
              onChange: g,
              onClick: v,
              className: "flex-1"
            }
          )
        ] }),
        a && /* @__PURE__ */ i.jsx(
          "div",
          {
            id: `${s}-error`,
            className: "text-sm text-error",
            role: "alert",
            "aria-live": "polite",
            children: a
          }
        )
      ]
    }
  );
};
export {
  E as DatePickerRange
};
//# sourceMappingURL=index.es78.js.map