@konstructio/ui 0.1.2-alpha.7 → 0.1.2-alpha.71

package/dist/components/DateRangePicker/components/DateTimeInputs/DateTimeInputs.variants.js

@@ -0,0 +1,30 @@
+import { c as t } from "../../../../index-D29mdTf5.js";
+const a = t(["flex", "gap-8", "w-full", "px-1"]), n = t([
+  "flex",
+  "gap-2",
+  "items-center",
+  "w-66.5"
+]), p = t([
+  "flex",
+  "flex-col",
+  "gap-2",
+  "w-38"
+]), l = t([
+  "flex",
+  "flex-col",
+  "gap-2",
+  "flex-1"
+]), r = t([
+  "text-sm",
+  "font-medium",
+  "text-slate-500",
+  "dark:text-metal-400",
+  "leading-5"
+]);
+export {
+  p as dateInputWrapperVariants,
+  n as dateTimeGroupVariants,
+  a as dateTimeInputsVariants,
+  r as inputLabelVariants,
+  l as timeInputWrapperVariants
+};

package/dist/components/DateRangePicker/components/DateTimeInputs/components/EndInputFields/EndInputFields.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { Props } from './EndInputFields.types';
+export declare const EndInputFields: FC<Props>;

package/dist/components/DateRangePicker/components/DateTimeInputs/components/EndInputFields/EndInputFields.js

@@ -0,0 +1,92 @@
+import { jsxs as t, jsx as a } from "react/jsx-runtime";
+import { cn as r } from "../../../../../../utils/index.js";
+import { Input as g } from "../../../../../Input/Input.js";
+import { TimePicker as v } from "../../../../../TimePicker/TimePicker.js";
+import { Typography as p } from "../../../../../Typography/Typography.js";
+import { inputLabelVariants as o, dateInputWrapperVariants as E, timeInputWrapperVariants as V, dateTimeGroupVariants as W } from "../../DateTimeInputs.variants.js";
+const y = ({
+  dateValue: l,
+  timeValue: m,
+  error: d,
+  disabled: i,
+  showTime: n,
+  timeFormat: u = "24",
+  labelDate: c = "End date",
+  labelTime: f = "Time",
+  ariaLabelDate: s = "End date",
+  onDateChange: h,
+  onDateFocus: b,
+  onDateBlur: x,
+  onTimeChange: I,
+  classNames: e
+}) => /* @__PURE__ */ t(
+  "div",
+  {
+    className: r(
+      W(),
+      !n && "w-auto flex-1",
+      e?.group
+    ),
+    children: [
+      /* @__PURE__ */ t(
+        "div",
+        {
+          className: r(
+            E(),
+            !n && "w-full flex-1",
+            e?.dateWrapper
+          ),
+          children: [
+            /* @__PURE__ */ a(
+              p,
+              {
+                component: "label",
+                className: r(o(), e?.label),
+                children: c
+              }
+            ),
+            /* @__PURE__ */ a(
+              g,
+              {
+                value: l,
+                onChange: h,
+                onFocus: b,
+                onBlur: x,
+                error: d,
+                disabled: i,
+                className: r(e?.input),
+                "aria-label": s
+              }
+            )
+          ]
+        }
+      ),
+      n && /* @__PURE__ */ t("div", { className: r(V(), e?.timeWrapper), children: [
+        /* @__PURE__ */ a(
+          p,
+          {
+            component: "label",
+            className: r(o(), e?.label),
+            children: f
+          }
+        ),
+        /* @__PURE__ */ a(
+          v,
+          {
+            mode: "input",
+            showList: !0,
+            format: u,
+            time: m,
+            onChange: I,
+            disabled: i,
+            name: "end time"
+          }
+        )
+      ] })
+    ]
+  }
+);
+y.displayName = "EndInputFields";
+export {
+  y as EndInputFields
+};

package/dist/components/DateRangePicker/components/DateTimeInputs/components/EndInputFields/EndInputFields.types.d.ts

@@ -0,0 +1,23 @@
+import { ChangeEvent, FocusEvent } from 'react';
+export type Props = {
+    dateValue: string;
+    timeValue?: Date;
+    error?: string;
+    disabled?: boolean;
+    showTime?: boolean;
+    timeFormat?: '12' | '24';
+    labelDate?: string;
+    labelTime?: string;
+    ariaLabelDate?: string;
+    onDateChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    onDateFocus: () => void;
+    onDateBlur: (e: FocusEvent<HTMLInputElement>) => void;
+    onTimeChange: (time: Date) => void;
+    classNames?: {
+        group?: string;
+        dateWrapper?: string;
+        timeWrapper?: string;
+        label?: string;
+        input?: string;
+    };
+};

package/dist/components/DateRangePicker/components/DateTimeInputs/components/StartInputFields/StartInputFields.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { Props } from './StartInputFields.types';
+export declare const StartInputFields: FC<Props>;

package/dist/components/DateRangePicker/components/DateTimeInputs/components/StartInputFields/StartInputFields.js

@@ -0,0 +1,92 @@
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import { cn as r } from "../../../../../../utils/index.js";
+import { Input as g } from "../../../../../Input/Input.js";
+import { TimePicker as v } from "../../../../../TimePicker/TimePicker.js";
+import { Typography as p } from "../../../../../Typography/Typography.js";
+import { inputLabelVariants as o, dateInputWrapperVariants as S, timeInputWrapperVariants as V, dateTimeGroupVariants as W } from "../../DateTimeInputs.variants.js";
+const y = ({
+  dateValue: l,
+  timeValue: m,
+  error: u,
+  disabled: n,
+  showTime: e,
+  timeFormat: d = "24",
+  labelDate: c = "Start date",
+  labelTime: f = "Time",
+  ariaLabelDate: s = "Start date",
+  onDateChange: h,
+  onDateFocus: b,
+  onDateBlur: x,
+  onTimeChange: I,
+  classNames: t
+}) => /* @__PURE__ */ i(
+  "div",
+  {
+    className: r(
+      W(),
+      !e && "w-auto flex-1",
+      t?.group
+    ),
+    children: [
+      /* @__PURE__ */ i(
+        "div",
+        {
+          className: r(
+            S(),
+            !e && "w-full flex-1",
+            t?.dateWrapper
+          ),
+          children: [
+            /* @__PURE__ */ a(
+              p,
+              {
+                component: "label",
+                className: r(o(), t?.label),
+                children: c
+              }
+            ),
+            /* @__PURE__ */ a(
+              g,
+              {
+                value: l,
+                onChange: h,
+                onFocus: b,
+                onBlur: x,
+                error: u,
+                disabled: n,
+                className: r(t?.input),
+                "aria-label": s
+              }
+            )
+          ]
+        }
+      ),
+      e && /* @__PURE__ */ i("div", { className: r(V(), t?.timeWrapper), children: [
+        /* @__PURE__ */ a(
+          p,
+          {
+            component: "label",
+            className: r(o(), t?.label),
+            children: f
+          }
+        ),
+        /* @__PURE__ */ a(
+          v,
+          {
+            mode: "input",
+            showList: !0,
+            format: d,
+            time: m,
+            onChange: I,
+            disabled: n,
+            name: "start time"
+          }
+        )
+      ] })
+    ]
+  }
+);
+y.displayName = "StartInputFields";
+export {
+  y as StartInputFields
+};

package/dist/components/DateRangePicker/components/DateTimeInputs/components/StartInputFields/StartInputFields.types.d.ts

@@ -0,0 +1,23 @@
+import { ChangeEvent, FocusEvent } from 'react';
+export type Props = {
+    dateValue: string;
+    timeValue?: Date;
+    error?: string;
+    disabled?: boolean;
+    showTime?: boolean;
+    timeFormat?: '12' | '24';
+    labelDate?: string;
+    labelTime?: string;
+    ariaLabelDate?: string;
+    onDateChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    onDateFocus: () => void;
+    onDateBlur: (e: FocusEvent<HTMLInputElement>) => void;
+    onTimeChange: (time: Date) => void;
+    classNames?: {
+        group?: string;
+        dateWrapper?: string;
+        timeWrapper?: string;
+        label?: string;
+        input?: string;
+    };
+};

package/dist/components/DateRangePicker/components/DateTimeInputs/components/index.d.ts

@@ -0,0 +1,2 @@
+export { EndInputFields } from './EndInputFields/EndInputFields';
+export { StartInputFields } from './StartInputFields/StartInputFields';

package/dist/components/DateRangePicker/components/DateTimeInputs/components/index.js

@@ -0,0 +1,6 @@
+import { EndInputFields as e } from "./EndInputFields/EndInputFields.js";
+import { StartInputFields as p } from "./StartInputFields/StartInputFields.js";
+export {
+  e as EndInputFields,
+  p as StartInputFields
+};

package/dist/components/DateRangePicker/components/DateTimeInputs/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useDateTimeInputs } from './useDateTimeInputs';

package/dist/components/DateRangePicker/components/DateTimeInputs/hooks/index.js

@@ -0,0 +1,4 @@
+import { useDateTimeInputs as m } from "./useDateTimeInputs.js";
+export {
+  m as useDateTimeInputs
+};

package/dist/components/DateRangePicker/components/DateTimeInputs/hooks/useDateTimeInputs.d.ts

@@ -0,0 +1,29 @@
+import { ChangeEvent, FocusEvent } from 'react';
+type UseDateTimeInputsProps = {
+    errorInvalidDate: string;
+    errorDateNotAvailable: string;
+    errorStartAfterEnd: string;
+    errorEndBeforeStart: string;
+};
+export declare const useDateTimeInputs: ({ errorInvalidDate, errorDateNotAvailable, errorStartAfterEnd, errorEndBeforeStart, }: UseDateTimeInputsProps) => {
+    timeFormat: "12" | "24";
+    showTime: boolean;
+    name: string | undefined;
+    disabled: boolean;
+    time: import('../../../DateRangePicker.types').TimeRange;
+    startDateValue: string;
+    startDateError: string | undefined;
+    handleStartDateFocus: () => void;
+    handleStartDateChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    handleStartDateBlur: (e: FocusEvent<HTMLInputElement>) => void;
+    handleStartTimeChange: (newTime: Date) => void;
+    endDateValue: string;
+    endDateError: string | undefined;
+    handleEndDateFocus: () => void;
+    handleEndDateChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    handleEndDateBlur: (e: FocusEvent<HTMLInputElement>) => void;
+    handleEndTimeChange: (newTime: Date) => void;
+    startHiddenValue: string;
+    endHiddenValue: string;
+};
+export {};

package/dist/components/DateRangePicker/components/DateTimeInputs/hooks/useDateTimeInputs.js

@@ -0,0 +1,186 @@
+import { useMemo as k, useRef as B, useState as C, useEffect as j, useCallback as f } from "react";
+import { useDateRangePicker as tt } from "../../../contexts/date-range-picker.hook.js";
+import { formatDateToDisplayString as T, formatDateToString as P, parseDateString as i, parseDisplayDateString as g, autoFormatDateInput as q, combineDateAndTime as z } from "../../../utils/validation.js";
+import { isDateSelectable as R } from "../../../utils/disabled-dates.js";
+const at = ({
+  errorInvalidDate: E,
+  errorDateNotAvailable: V,
+  errorStartAfterEnd: F,
+  errorEndBeforeStart: b
+}) => {
+  const {
+    range: t,
+    time: c,
+    timeFormat: G,
+    showTime: J,
+    name: K,
+    disabled: L,
+    blockedDays: w,
+    blockedMonths: x,
+    minDate: H,
+    maxDate: M,
+    setRange: o,
+    setTime: y
+  } = tt(), d = k(
+    () => ({ blockedDays: w, blockedMonths: x, minDate: H, maxDate: M }),
+    [w, x, H, M]
+  ), h = B(!1), v = B(!1), [a, D] = C(
+    () => T(t.from)
+  ), [s, p] = C(
+    () => T(t.to)
+  ), [O, m] = C(), [Q, l] = C();
+  j(() => {
+    h.current || D(T(t.from));
+  }, [t.from]), j(() => {
+    v.current || p(T(t.to));
+  }, [t.to]);
+  const U = f(() => {
+    if (h.current = !0, m(void 0), t.from)
+      D(P(t.from));
+    else {
+      const e = i(a) || g(a);
+      e && D(P(e));
+    }
+  }, [t.from, a]), W = f(
+    (e) => {
+      const u = e.target.value, r = q(u, a);
+      D(r), m(void 0);
+      const n = i(r);
+      if (n && R(n, d)) {
+        const S = t.to || i(s) || g(s);
+        if (S && n > S)
+          return;
+        o({ ...t, from: n });
+      }
+    },
+    [a, s, t, o, d]
+  ), X = f(
+    (e) => {
+      const u = e.currentTarget.value.trim();
+      if (u === "") {
+        h.current = !1, m(void 0), D(""), o({ ...t, from: void 0 });
+        return;
+      }
+      const r = i(u);
+      if (!r) {
+        m(E);
+        return;
+      }
+      if (!R(r, d)) {
+        m(V);
+        return;
+      }
+      const n = i(s) || g(s);
+      if (n && r > n) {
+        m(F), v.current = !0, o({ from: void 0, to: void 0 });
+        return;
+      }
+      h.current = !1, m(void 0), o({ ...t, from: r }), D(T(r));
+    },
+    [
+      t,
+      o,
+      d,
+      E,
+      V,
+      F,
+      s
+    ]
+  ), Y = f(() => {
+    if (v.current = !0, l(void 0), t.to)
+      p(P(t.to));
+    else {
+      const e = i(s) || g(s);
+      e && p(P(e));
+    }
+  }, [t.to, s]), Z = f(
+    (e) => {
+      const u = e.target.value, r = q(u, s);
+      p(r), l(void 0);
+      const n = i(r);
+      if (n && R(n, d)) {
+        const S = t.from || i(a) || g(a);
+        if (S && n < S)
+          return;
+        o({ ...t, to: n });
+      }
+    },
+    [s, a, t, o, d]
+  ), _ = f(
+    (e) => {
+      const u = e.currentTarget.value.trim();
+      if (u === "") {
+        v.current = !1, l(void 0), p(""), o({ ...t, to: void 0 });
+        return;
+      }
+      const r = i(u);
+      if (!r) {
+        l(E);
+        return;
+      }
+      if (!R(r, d)) {
+        l(V);
+        return;
+      }
+      const n = i(a) || g(a);
+      if (n && r < n) {
+        l(b), h.current = !0, o({ from: void 0, to: void 0 });
+        return;
+      }
+      v.current = !1, l(void 0), o({ ...t, to: r }), p(T(r));
+    },
+    [
+      t,
+      o,
+      d,
+      E,
+      V,
+      b,
+      a
+    ]
+  ), $ = f(
+    (e) => {
+      y({ ...c, startTime: e });
+    },
+    [c, y]
+  ), I = f(
+    (e) => {
+      y({ ...c, endTime: e });
+    },
+    [c, y]
+  ), A = k(
+    () => z(t.from, c.startTime),
+    [t.from, c.startTime]
+  ), N = k(
+    () => z(t.to, c.endTime),
+    [t.to, c.endTime]
+  );
+  return {
+    // Context values
+    timeFormat: G,
+    showTime: J,
+    name: K,
+    disabled: L,
+    time: c,
+    // Start date state and handlers
+    startDateValue: a,
+    startDateError: O,
+    handleStartDateFocus: U,
+    handleStartDateChange: W,
+    handleStartDateBlur: X,
+    handleStartTimeChange: $,
+    // End date state and handlers
+    endDateValue: s,
+    endDateError: Q,
+    handleEndDateFocus: Y,
+    handleEndDateChange: Z,
+    handleEndDateBlur: _,
+    handleEndTimeChange: I,
+    // Hidden input values
+    startHiddenValue: A,
+    endHiddenValue: N
+  };
+};
+export {
+  at as useDateTimeInputs
+};

package/dist/components/DateRangePicker/components/PresetPanel/PresetPanel.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { PresetPanelProps } from './PresetPanel.types';
+export declare const PresetPanel: FC<PresetPanelProps>;

package/dist/components/DateRangePicker/components/PresetPanel/PresetPanel.js

@@ -0,0 +1,71 @@
+import { jsxs as f, jsx as i } from "react/jsx-runtime";
+import { useCallback as h, useMemo as x } from "react";
+import { cn as t } from "../../../../utils/index.js";
+import { RadioGroup as y } from "../../../RadioGroup/RadioGroup.js";
+import { Typography as g } from "../../../Typography/Typography.js";
+import { presetTitleVariants as k, presetPanelVariants as T } from "./PresetPanel.variants.js";
+import { useDateRangePicker as b } from "../../contexts/date-range-picker.hook.js";
+import { PRESET_OPTIONS as v } from "../../constants/presets.js";
+const E = {
+  today: "today",
+  "current-month": "currentMonth",
+  custom: "custom",
+  "last-7-days": "last7Days",
+  "last-2-weeks": "last2Weeks"
+}, R = ({
+  className: l,
+  labelTimePeriod: m = "Time period",
+  ariaLabelTimePeriod: p = "Time period options",
+  presetLabels: r,
+  classNames: a
+}) => {
+  const { preset: c, setPreset: o, disabled: s } = b(), d = h(
+    (e) => {
+      o(e);
+    },
+    [o]
+  ), u = x(
+    () => v.map((e) => {
+      const n = E[e.value], P = n && r?.[n];
+      return {
+        value: e.value,
+        label: P || e.label,
+        disabled: s
+      };
+    }),
+    [s, r]
+  );
+  return /* @__PURE__ */ f("div", { className: t(T({ className: l }), a?.root), children: [
+    /* @__PURE__ */ i(
+      g,
+      {
+        component: "span",
+        className: t(k(), a?.title),
+        "aria-label": p,
+        children: m
+      }
+    ),
+    /* @__PURE__ */ i(
+      y,
+      {
+        name: "date-range-preset",
+        options: u,
+        value: c,
+        onValueChange: d,
+        direction: "col",
+        wrapperClassName: t("gap-4 pl-2", a?.radioGroup),
+        className: t(
+          "text-sm",
+          "text-zinc-700",
+          "dark:text-zinc-300",
+          "[&_span]:text-zinc-700",
+          "dark:[&_span]:text-zinc-300"
+        )
+      }
+    )
+  ] });
+};
+R.displayName = "DateRangePickerPresetPanel";
+export {
+  R as PresetPanel
+};

package/dist/components/DateRangePicker/components/PresetPanel/PresetPanel.types.d.ts

@@ -0,0 +1,31 @@
+export type PresetLabels = {
+    /** Label for 'Today' preset (default: 'Today') */
+    today?: string;
+    /** Label for 'Current month' preset (default: 'Current month') */
+    currentMonth?: string;
+    /** Label for 'Custom' preset (default: 'Custom') */
+    custom?: string;
+    /** Label for 'Last 7 days' preset (default: 'Last 7 days') */
+    last7Days?: string;
+    /** Label for 'Last 2 weeks' preset (default: 'Last 2 weeks') */
+    last2Weeks?: string;
+};
+export type PresetPanelClassNames = {
+    /** Root container of the preset panel */
+    root?: string;
+    /** Title text */
+    title?: string;
+    /** RadioGroup wrapper */
+    radioGroup?: string;
+};
+export type PresetPanelProps = {
+    className?: string;
+    /** Title for the preset panel (default: 'Time period') */
+    labelTimePeriod?: string;
+    /** Aria label for the preset panel (default: 'Time period options') */
+    ariaLabelTimePeriod?: string;
+    /** Custom labels for preset options */
+    presetLabels?: PresetLabels;
+    /** Custom class names for styling */
+    classNames?: PresetPanelClassNames;
+};

package/dist/components/DateRangePicker/components/PresetPanel/PresetPanel.variants.d.ts

@@ -0,0 +1,2 @@
+export declare const presetPanelVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const presetTitleVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/DateRangePicker/components/PresetPanel/PresetPanel.variants.js

@@ -0,0 +1,24 @@
+import { c as e } from "../../../../index-D29mdTf5.js";
+const a = e([
+  "flex",
+  "flex-col",
+  "gap-6",
+  "p-4",
+  "pr-8",
+  "bg-slate-100",
+  "rounded-lg",
+  "dark:bg-metal-600/25",
+  "min-w-40"
+]), r = e([
+  "text-xs",
+  "font-medium",
+  "uppercase",
+  "text-slate-700",
+  "dark:text-metal-300",
+  "tracking-[0.25px]",
+  "leading-4"
+]);
+export {
+  a as presetPanelVariants,
+  r as presetTitleVariants
+};

package/dist/components/DateRangePicker/components/index.d.ts

@@ -0,0 +1,3 @@
+export { PresetPanel } from './PresetPanel/PresetPanel';
+export { DateTimeInputs } from './DateTimeInputs/DateTimeInputs';
+export { CalendarPanel } from './CalendarPanel/CalendarPanel';

package/dist/components/DateRangePicker/components/index.js

@@ -0,0 +1,8 @@
+import { PresetPanel as o } from "./PresetPanel/PresetPanel.js";
+import { DateTimeInputs as a } from "./DateTimeInputs/DateTimeInputs.js";
+import { CalendarPanel as n } from "./CalendarPanel/CalendarPanel.js";
+export {
+  n as CalendarPanel,
+  a as DateTimeInputs,
+  o as PresetPanel
+};

package/dist/components/DateRangePicker/constants/index.d.ts

@@ -0,0 +1 @@
+export * from './presets';

package/dist/components/DateRangePicker/constants/index.js

@@ -0,0 +1,4 @@
+import { PRESET_OPTIONS as E } from "./presets.js";
+export {
+  E as PRESET_OPTIONS
+};

package/dist/components/DateRangePicker/constants/presets.d.ts

@@ -0,0 +1,6 @@
+import { DateRangePreset } from '../DateRangePicker.types';
+export type PresetOption = {
+    value: DateRangePreset;
+    label: string;
+};
+export declare const PRESET_OPTIONS: PresetOption[];