koval-ui/dist/src/lib/InputTime/InputTime.js

React components collection with minimalistic design. Supports theming, layout, and input validation.

"use client";
import { jsxs as E, jsx as s } from "react/jsx-runtime";
import { forwardRef as F, useCallback as a } from "react";
import O from "classnames";
import { IconClock as S } from "../../internal/Icons/IconClock.js";
import { ValidationState as u } from "../../internal/inputs/ValidationProps.js";
import { useValidation as U } from "../../internal/inputs/useValidation.js";
import { useRevalidateOnFormChange as q } from "../../internal/inputs/useRevalidateOnFormChange.js";
import { useExternalValidation as z } from "../../internal/inputs/useExternalValidation.js";
import { useValidationIcon as A } from "../../internal/inputs/useValidationIcon.js";
import { useInternalRef as G } from "../../internal/hooks/useInternalRef.js";
import l from "./InputTime.module.css.js";
const H = F(
  ({
    className: h,
    placeholder: I = "",
    disabled: V,
    value: y,
    onChange: c = () => {
    },
    onFocus: x = () => {
    },
    onBlur: k = () => {
    },
    onKeyDown: m = () => {
    },
    onKeyUp: d = () => {
    },
    defaultValue: C,
    revalidateOnFormChange: g,
    validation: n,
    errorMessage: N,
    displayIcon: w = !0,
    ...i
  }, R) => {
    const t = G(R), T = !!n || typeof i.min == "string" || typeof i.max == "string", { validity: p, setValidity: e, validateTextual: f } = U({ validation: n, hasValidators: T });
    q(t, f, g), z({ errorMessage: N, inputRef: t, setValidity: e, validation: n });
    const b = A(p), j = a(() => {
      e(u.error);
    }, [e]), v = a(() => {
      var o, r;
      (o = t.current) == null || o.focus(), (r = t.current) == null || r.showPicker();
    }, [t]), K = a(
      (o) => {
        m(o);
      },
      [m]
    ), B = a(
      (o) => {
        d(o);
      },
      [d]
    ), D = a(
      (o) => {
        o.target.checkValidity() && e(u.valid), c(o);
      },
      [c, e]
    );
    return /* @__PURE__ */ E("div", { className: O(l.wrapper, h), children: [
      /* @__PURE__ */ s(S, { tabIndex: -1, onClick: v, className: l.icon }),
      /* @__PURE__ */ s(
        "input",
        {
          ...i,
          type: "time",
          placeholder: I,
          className: l.input,
          ref: t,
          disabled: V,
          value: y,
          defaultValue: C,
          onBlur: k,
          onFocus: x,
          onKeyUp: B,
          onKeyDown: K,
          onInvalid: j,
          onChange: D,
          onInput: f
        }
      ),
      w && p && /* @__PURE__ */ s(b, {})
    ] });
  }
);
H.displayName = "InputTime";
export {
  H as InputTime
};
//# sourceMappingURL=InputTime.js.map