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