@alif-ui-test/core 1.11.0

package/dist/components/Dates/InputTimePicker/InputTimePicker.js

@@ -0,0 +1,88 @@
+import { jsxs as j, jsx as t } from "react/jsx-runtime";
+import { useState as f, useEffect as v } from "react";
+import { MASK_VALUES as x, clampTimeToRange as y } from "./InputTimePicker.utils.js";
+import { sanitizeInput as A, formatInputValue as B } from "../Dates.utils.js";
+import { useLocale as E } from "../../../providers/hooks/useLocale/useLocale.js";
+import { Popover as l } from "../../Popover/Popover.js";
+import { Input as F } from "../../Input/Input.js";
+import { OutlineSystemClock as L } from "../../../icons/components/OutlineSystemClock.js";
+import { TimePicker as b } from "./TimePicker/TimePicker.js";
+const N = ({
+  onClick: s,
+  onClear: a,
+  onBlur: d,
+  onScroll: h,
+  value: n,
+  minTime: p,
+  maxTime: c,
+  hoursStep: g,
+  minutesStep: I,
+  withHeader: V,
+  withConfirmationButton: w,
+  className: D,
+  style: k,
+  ...C
+}) => {
+  const { locale: S } = E(), [m, i] = f(!1), [M, o] = f(""), u = x[S], O = (e) => {
+    d?.(e);
+    const r = y(e.target.value, p, c);
+    r ? (o(r), s?.(r)) : o("");
+  }, P = (e) => {
+    const r = A(e.target.value);
+    o(B(r, u));
+  }, T = () => {
+    a?.(), s?.(""), o("");
+  };
+  return v(() => {
+    o(n || "");
+  }, [n]), /* @__PURE__ */ j(
+    l,
+    {
+      isOpen: m,
+      position: "bottom-end",
+      onClose: () => i(!1),
+      children: [
+        /* @__PURE__ */ t(
+          l.Trigger,
+          {
+            className: D,
+            style: { width: "100%", ...k },
+            children: /* @__PURE__ */ t(
+              F,
+              {
+                rightIcon: /* @__PURE__ */ t(L, { onMouseDown: (e) => e.preventDefault() }),
+                ...C,
+                value: M,
+                onChange: P,
+                mask: u,
+                onBlur: O,
+                onFieldClick: () => i(!m),
+                isFilled: !!n,
+                onClear: a && T
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ t(l.Dropdown, { children: /* @__PURE__ */ t("div", { onMouseDown: (e) => e.preventDefault(), children: /* @__PURE__ */ t(
+          b,
+          {
+            value: n,
+            onClick: (e) => {
+              i(!1), s?.(e), o(e);
+            },
+            onScroll: h,
+            hoursStep: g,
+            minutesStep: I,
+            withConfirmationButton: w,
+            withHeader: V,
+            maxTime: c,
+            minTime: p
+          }
+        ) }) })
+      ]
+    }
+  );
+};
+export {
+  N as InputTimePicker
+};

package/dist/components/Dates/InputTimePicker/InputTimePicker.types.js

@@ -0,0 +1 @@
+

package/dist/components/Dates/InputTimePicker/InputTimePicker.utils.js

@@ -0,0 +1,17 @@
+import { formatTime as p } from "./TimePicker/TimePicker.utils.js";
+const M = {
+  en: "HH:MM",
+  ru: "ЧЧ:ММ",
+  tj: "СС:ДД"
+}, b = (u, a, c) => {
+  const n = u.match(/^([01]\d|2[0-3]):([0-5]\d)$/);
+  if (!n) return null;
+  const [, s, l] = n;
+  let t = Number(s), m = Number(l);
+  const [r, o] = a?.split(":").map(Number) ?? [0, 0], [e, i] = c?.split(":").map(Number) ?? [23, 59];
+  return (t < r || t === r && m < o) && (t = r, m = o), (t > e || t === e && m > i) && (t = e, m = i), p(t, m);
+};
+export {
+  M as MASK_VALUES,
+  b as clampTimeToRange
+};

package/dist/components/Dates/InputTimePicker/TimePicker/TimeColumn.js

@@ -0,0 +1,31 @@
+import { jsx as i } from "react/jsx-runtime";
+import { ITEM_HEIGHT as n } from "./TimePicker.utils.js";
+import m from "../../Dates.module.css.js";
+import { classNames as l } from "../../../../utils/class-names.js";
+const u = ({
+  list: t,
+  value: c,
+  onChange: s,
+  innerRef: r
+}) => {
+  const a = (o) => {
+    s(o);
+    const e = t.indexOf(o);
+    e >= 0 && r.current && r.current.scrollTo({
+      top: e * n,
+      behavior: "smooth"
+    });
+  };
+  return /* @__PURE__ */ i("div", { ref: r, className: m.timePickerColumn, children: t.map((o) => /* @__PURE__ */ i(
+    "span",
+    {
+      className: l(m.time, o === c && m.activeTime),
+      onClick: () => a(o),
+      children: String(o).padStart(2, "0")
+    },
+    o
+  )) });
+};
+export {
+  u as TimeColumn
+};

package/dist/components/Dates/InputTimePicker/TimePicker/TimePicker.js

@@ -0,0 +1,102 @@
+import { jsxs as k, Fragment as F, jsx as e } from "react/jsx-runtime";
+import { useState as C, useRef as R, useMemo as l } from "react";
+import { useInitialTime as S, getTimeBounds as _, getAvailableHours as w, getAvailableMinutes as z, TIME_LABEL as W, CONFIRMATION_TEXT as X, formatTime as q } from "./TimePicker.utils.js";
+import { useScrollSync as y } from "./useScrollSync.js";
+import { TimeColumn as B } from "./TimeColumn.js";
+import i from "../../Dates.module.css.js";
+import { getPickerStyles as D } from "../../Dates.utils.js";
+import { useLocale as G } from "../../../../providers/hooks/useLocale/useLocale.js";
+import { Button as J } from "../../../Button/Button.js";
+import { classNames as b } from "../../../../utils/class-names.js";
+const re = ({
+  value: A,
+  onClick: I,
+  onScroll: m,
+  maxTime: s,
+  minTime: a,
+  hoursStep: c = 1,
+  minutesStep: u = 1,
+  className: P,
+  withHeader: x,
+  withConfirmationButton: E = !0,
+  isStandalone: L = !0
+}) => {
+  const { locale: d } = G(), [O, j] = S(A, a, s), [t, f] = C(O), [r, p] = C(j), v = R(null), h = R(null), [n, o, N, M] = l(
+    () => _(a, s),
+    [a, s]
+  ), H = l(
+    () => w(n, o, c),
+    [n, o, c]
+  ), T = l(
+    () => z(
+      t,
+      n,
+      o,
+      N,
+      M,
+      u
+    ),
+    [t, n, o, N, M, u]
+  );
+  y(
+    v,
+    H,
+    t,
+    f,
+    r,
+    "hr",
+    m
+  ), y(
+    h,
+    T,
+    r,
+    p,
+    t,
+    "min",
+    m
+  );
+  const g = /* @__PURE__ */ k(F, { children: [
+    x && /* @__PURE__ */ e("div", { className: i.timeHeaderContainer, children: /* @__PURE__ */ e("div", { className: i.timeHeader, children: /* @__PURE__ */ e("span", { children: W[d] }) }) }),
+    /* @__PURE__ */ k("div", { className: b(i.timePicker, i.calendarShadow), children: [
+      /* @__PURE__ */ e("div", { className: i.timeOverlay }),
+      /* @__PURE__ */ e(
+        B,
+        {
+          list: H,
+          value: t,
+          onChange: f,
+          innerRef: v
+        }
+      ),
+      /* @__PURE__ */ e(
+        B,
+        {
+          list: T,
+          value: r,
+          onChange: p,
+          innerRef: h
+        }
+      )
+    ] }),
+    E && /* @__PURE__ */ e("div", { className: i.confirmationBlock, children: /* @__PURE__ */ e(
+      J,
+      {
+        size: "s",
+        className: i.confirmationButton,
+        onClick: () => I?.(q(t, r)),
+        children: X[d]
+      }
+    ) })
+  ] });
+  return L ? /* @__PURE__ */ e(
+    "div",
+    {
+      className: b(i.root, P),
+      style: D("time"),
+      children: g
+    }
+  ) : /* @__PURE__ */ e("div", { className: i.inlineTimePickerWrapper, children: g });
+};
+export {
+  re as TimePicker
+};

package/dist/components/Dates/InputTimePicker/TimePicker/TimePicker.types.js

@@ -0,0 +1 @@
+

package/dist/components/Dates/InputTimePicker/TimePicker/TimePicker.utils.js

@@ -0,0 +1,38 @@
+const l = {
+  en: "Ok",
+  ru: "Ок",
+  tj: "Ок"
+}, u = {
+  en: "Time",
+  ru: "Время",
+  tj: "Вақт"
+}, p = 36, M = (t, n) => Array.from({ length: n - t + 1 }, (m, a) => t + a), x = (t, n) => `${String(t).padStart(2, "0")}:${String(n).padStart(2, "0")}`, h = (t, n, m, a) => {
+  const [e, i] = m?.split(":").map(Number) ?? [0, 0], [r, c] = a?.split(":").map(Number) ?? [23, 59], o = Math.min(Math.max(t, e), r);
+  let s = n;
+  return o === e && (s = Math.max(s, i)), o === r && (s = Math.min(s, c)), [o, s];
+}, T = (t, n, m) => {
+  const a = /* @__PURE__ */ new Date(), [e, i] = t ? t.split(":").map(Number) : [a.getHours(), a.getMinutes()];
+  return h(e, i, n, m);
+}, g = (t, n) => {
+  const [m, a] = t?.split(":").map(Number) ?? [0, 0], [e, i] = n?.split(":").map(Number) ?? [23, 59];
+  return [
+    Math.max(0, Math.min(m, 23)),
+    Math.max(0, Math.min(e, 23)),
+    Math.max(0, Math.min(a, 59)),
+    Math.max(0, Math.min(i, 59))
+  ];
+}, b = (t, n, m) => M(t, n).filter((a) => a % m === 0), f = (t, n, m, a, e, i) => M(0, 59).filter((r) => r % i === 0).filter(
+  (r) => !(t === n && r < a) && !(t === m && r > e)
+);
+export {
+  l as CONFIRMATION_TEXT,
+  p as ITEM_HEIGHT,
+  u as TIME_LABEL,
+  h as clampTime,
+  x as formatTime,
+  b as getAvailableHours,
+  f as getAvailableMinutes,
+  g as getTimeBounds,
+  M as range,
+  T as useInitialTime
+};

package/dist/components/Dates/InputTimePicker/TimePicker/useScrollSync.js

@@ -0,0 +1,27 @@
+import { useEffect as l } from "react";
+import { ITEM_HEIGHT as T, formatTime as p } from "./TimePicker.utils.js";
+const x = (t, o, i, u, n, s, c) => {
+  l(() => {
+    const r = o.indexOf(i);
+    r >= 0 && t.current && t.current.scrollTo({ top: r * T, behavior: "auto" });
+  }, [o, i, t]), l(() => {
+    if (!t.current) return;
+    let r;
+    const m = () => {
+      clearTimeout(r), r = setTimeout(() => {
+        if (!t.current) return;
+        const v = Math.round(t.current.scrollTop / T), e = o[v];
+        if (e !== void 0 && u(e), c) {
+          const E = s === "hr" ? p(e, n) : p(n, e);
+          c(E);
+        }
+      }, 100);
+    }, d = t.current;
+    return d.addEventListener("scroll", m), () => {
+      d.removeEventListener("scroll", m), clearTimeout(r);
+    };
+  }, [o, u, t, c, s, n]);
+};
+export {
+  x as useScrollSync
+};

package/dist/components/Dates/InputYearPicker/InputYearPicker.js

@@ -0,0 +1,100 @@
+import { jsxs as F, jsx as o } from "react/jsx-runtime";
+import { useState as w, useMemo as S, useEffect as x } from "react";
+import { defineMask as z, formatValue as y, parseRangeInput as E, isValidYear as L } from "./InputYearPicker.utils.js";
+import { getPopoverWidth as T, sanitizeInput as q, formatInputValue as v } from "../Dates.utils.js";
+import { useLocale as G } from "../../../providers/hooks/useLocale/useLocale.js";
+import { Popover as f } from "../../Popover/Popover.js";
+import { Input as H } from "../../Input/Input.js";
+import { YearPicker as J } from "./YearPicker/YearPicker.js";
+import { OutlineSystemCalendar as K } from "../../../icons/components/OutlineSystemCalendar.js";
+const R = ({
+  value: i,
+  isRange: n,
+  maxYear: l = 2100,
+  minYear: u = 1900,
+  disabledYears: P,
+  onClear: m,
+  onChange: s,
+  onBlur: D,
+  options: M,
+  className: V,
+  style: g,
+  pickerWidth: d,
+  ...C
+}) => {
+  const { locale: h } = G(), [I, p] = w(!1), [O, t] = w(""), a = S(
+    () => z(!!n, h),
+    [n, h]
+  ), b = (e) => {
+    const r = q(e.target.value);
+    t(a ? v(r, a) : r);
+  }, j = (e) => {
+    D?.(e);
+    const r = e.target.value.trim();
+    if (!r) {
+      s?.(null);
+      return;
+    }
+    if (n) {
+      const c = E(r, u, l);
+      s?.(c), t(c ? y(c) : "");
+      return;
+    }
+    const k = parseInt(r, 10);
+    L(k, u, l) ? s?.(k) : t("");
+  }, A = (e) => {
+    !n || Array.isArray(e) && e[0] && e[1] ? (s?.(e), p(!1)) : typeof e == "number" && t(e + " – ");
+  }, B = () => {
+    m?.(), t(""), s?.(null);
+  };
+  return x(() => {
+    t(y(i));
+  }, [i]), /* @__PURE__ */ F(
+    f,
+    {
+      position: "bottom-start",
+      width: T(d),
+      isOpen: I,
+      onClose: () => p(!1),
+      children: [
+        /* @__PURE__ */ o(
+          f.Trigger,
+          {
+            className: V,
+            style: { width: "100%", ...g },
+            children: /* @__PURE__ */ o(
+              H,
+              {
+                rightIcon: /* @__PURE__ */ o(K, { onMouseDown: (e) => e.preventDefault() }),
+                ...C,
+                value: O,
+                onChange: b,
+                onBlur: j,
+                mask: a,
+                onFieldClick: () => p(!I),
+                isFilled: !!i,
+                onClear: m && B
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ o(f.Dropdown, { children: /* @__PURE__ */ o("div", { onMouseDown: (e) => e.preventDefault(), children: /* @__PURE__ */ o(
+          J,
+          {
+            value: i,
+            isRange: n,
+            minYear: u,
+            maxYear: l,
+            disabledYears: P,
+            onPickerChange: A,
+            options: M,
+            pickerWidth: d
+          }
+        ) }) })
+      ]
+    }
+  );
+};
+export {
+  R as InputYearPicker
+};

package/dist/components/Dates/InputYearPicker/InputYearPicker.types.js

@@ -0,0 +1 @@
+

package/dist/components/Dates/InputYearPicker/InputYearPicker.utils.js

@@ -0,0 +1,21 @@
+const u = {
+  year: {
+    en: "YYYY",
+    ru: "ГГГГ",
+    tj: "СССС"
+  },
+  year_range: {
+    en: "YYYY – YYYY",
+    ru: "ГГГГ – ГГГГ",
+    tj: "СССС – СССС"
+  }
+}, a = (r, t = "ru") => r ? u.year_range[t] : u.year[t], Y = (r, t, e) => Number.isInteger(r) && r >= t && r <= e, i = (r, t, e) => {
+  const n = r.split(/[––]/).map((s) => parseInt(s.trim(), 10));
+  return n.length === 2 && n.every((s) => Y(s, t, e)) ? [Math.min(n[0], n[1]), Math.max(n[0], n[1])] : null;
+}, o = (r) => r == null ? "" : Array.isArray(r) ? r.every((t) => t != null) ? `${r[0]} – ${r[1]}` : r[0]?.toString() ?? "" : r.toString();
+export {
+  a as defineMask,
+  o as formatValue,
+  Y as isValidYear,
+  i as parseRangeInput
+};

package/dist/components/Dates/InputYearPicker/YearPicker/YearPicker.js

@@ -0,0 +1,61 @@
+import { jsxs as k, jsx as a } from "react/jsx-runtime";
+import { useState as O, useMemo as P } from "react";
+import V from "../../Dates.module.css.js";
+import { PickerContent as g } from "../../PickerContent/PickerContent.js";
+import { getPickerStyles as j } from "../../Dates.utils.js";
+import { PickerOptions as x } from "../../PickerOptions/PickerOptions.js";
+import { classNames as M } from "../../../../utils/class-names.js";
+const _ = ({
+  className: p,
+  maxYear: s = 2100,
+  minYear: e = 1900,
+  onChange: i,
+  onPickerChange: n,
+  value: t,
+  isRange: m,
+  disabledYears: c,
+  options: y,
+  pickerWidth: l
+}) => {
+  const o = (/* @__PURE__ */ new Date()).getFullYear(), f = Array.isArray(t) ? t[0] ?? o : t ?? o, [u, A] = O(f), d = P(
+    () => Array.from({ length: s - e + 1 }, (r, h) => e + h),
+    [e, s]
+  ), b = (r) => {
+    n?.(r), i?.(r), r != null && A(Array.isArray(r) ? Math.min(...r) : r);
+  };
+  return /* @__PURE__ */ k(
+    "div",
+    {
+      style: j("year", l),
+      className: M(V.root, p),
+      children: [
+        /* @__PURE__ */ a(
+          g,
+          {
+            type: "year",
+            items: d,
+            currentValue: o,
+            visibleValue: u,
+            onChange: i,
+            onPickerChange: n,
+            isRange: m,
+            value: t,
+            disabledOptions: c
+          }
+        ),
+        /* @__PURE__ */ a(
+          x,
+          {
+            options: y,
+            isRange: m,
+            disabledOptions: c,
+            onChange: b
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  _ as YearPicker
+};

package/dist/components/Dates/InputYearPicker/YearPicker/YearPicker.types.js

@@ -0,0 +1 @@
+

package/dist/components/Dates/PickerContent/PickerContent.js

@@ -0,0 +1,64 @@
+import { jsx as p } from "react/jsx-runtime";
+import { useState as x, useRef as T, useMemo as A, useEffect as D } from "react";
+import { getRangeBoundaries as j, normalizeRange as w } from "./PickerContent.utils.js";
+import e from "../Dates.module.css.js";
+import { scrollToCenter as z } from "../Dates.utils.js";
+import { classNames as M } from "../../../utils/class-names.js";
+const F = ({
+  items: s,
+  currentValue: O,
+  isRange: t = !1,
+  value: o,
+  visibleValue: u,
+  onChange: S,
+  onPickerChange: b,
+  disabledOptions: g,
+  type: a,
+  monthNames: f
+}) => {
+  const [c, d] = x(null), [m, h] = x(null), C = T(null), l = A(
+    () => j(o, t, c, m),
+    [m, t, c, o]
+  ), k = (r) => {
+    const n = t ? c?.[0] ?? (Array.isArray(o) ? o[1] : null) : o;
+    return r === n || r === u;
+  }, y = (r) => {
+    if (!t) return r;
+    if (!c || c[0] === null)
+      return d([r, null]), r;
+    const [n] = c;
+    return d(null), w(n, r);
+  }, E = (r) => {
+    const n = y(r);
+    b?.(n), (typeof n != "number" || !t) && S?.(n);
+  }, N = (r) => M(
+    e.option,
+    a === "month" && e.month,
+    O === r && e.current,
+    !t && r === o && e.active,
+    t && l && r === l[0] && e.rangeStart,
+    t && l && r === l[1] && e.rangeEnd,
+    t && l && r > l[0] && r < l[1] && e.rangeMiddle
+  );
+  return D(() => {
+    z(C.current);
+  }, [u, o, s]), /* @__PURE__ */ p("div", { className: M(e.calendar, e.calendarShadow), children: s.map((r) => {
+    const n = g?.includes(r);
+    return /* @__PURE__ */ p(
+      "button",
+      {
+        ref: k(r) ? C : null,
+        onClick: () => E(r),
+        onMouseEnter: () => t && h(r),
+        onMouseLeave: () => t && h(null),
+        className: N(r),
+        disabled: n,
+        children: a === "month" && f ? f[r - 1] : r
+      },
+      r
+    );
+  }) });
+};
+export {
+  F as PickerContent
+};

package/dist/components/Dates/PickerContent/PickerContent.types.js

@@ -0,0 +1 @@
+

package/dist/components/Dates/PickerContent/PickerContent.utils.js

@@ -0,0 +1,20 @@
+const e = (n, t) => [
+  Math.min(n, t),
+  Math.max(n, t)
+], o = (n, t, u, i) => {
+  if (!t) return null;
+  if (u) {
+    const [r, f] = u;
+    if (typeof r == "number" && typeof f == "number")
+      return e(r, f);
+    if (typeof r == "number" && i !== null)
+      return e(r, i);
+    if (typeof r == "number")
+      return [r, r];
+  }
+  return Array.isArray(n) && n[0] != null && n[1] != null ? e(n[0], n[1]) : null;
+};
+export {
+  o as getRangeBoundaries,
+  e as normalizeRange
+};

package/dist/components/Dates/PickerHeader/PickerHeader.js

@@ -0,0 +1,60 @@
+import { jsxs as a, jsx as n } from "react/jsx-runtime";
+import o from "../Dates.module.css.js";
+import { OutlineNavigationChevronLeftSmall as u } from "../../../icons/components/OutlineNavigationChevronLeftSmall.js";
+import { classNames as e } from "../../../utils/class-names.js";
+import { OutlineNavigationChevronRightSmall as N } from "../../../icons/components/OutlineNavigationChevronRightSmall.js";
+const d = ({
+  month: l,
+  year: r,
+  onNext: i,
+  onPrev: c,
+  onMonthClick: s,
+  onYearClick: m,
+  viewMode: t
+}) => /* @__PURE__ */ a("div", { className: o.controlPanel, children: [
+  /* @__PURE__ */ n(
+    u,
+    {
+      role: "button",
+      "aria-label": "Previous",
+      className: o.controlPanelButtonArrow,
+      onClick: c
+    }
+  ),
+  /* @__PURE__ */ a("div", { className: o.controlPanelDateContainer, children: [
+    l && /* @__PURE__ */ n(
+      "span",
+      {
+        className: e(
+          o.controlPanelButtonMonth,
+          (t === "month" || t === "day") && o.controlPanelActiveButtonMonth
+        ),
+        onClick: s,
+        children: String(l)
+      }
+    ),
+    r && /* @__PURE__ */ n(
+      "span",
+      {
+        className: e(
+          o.controlPanelButtonYear,
+          t === "year" && o.controlPanelActiveButtonYear
+        ),
+        onClick: m,
+        children: String(r)
+      }
+    )
+  ] }),
+  /* @__PURE__ */ n(
+    N,
+    {
+      role: "button",
+      "aria-label": "Next",
+      className: o.controlPanelButtonArrow,
+      onClick: i
+    }
+  )
+] });
+export {
+  d as PickerHeader
+};

package/dist/components/Dates/PickerHeader/PickerHeader.types.js

@@ -0,0 +1 @@
+