@konstructio/ui 0.1.2-alpha.51 → 0.1.2-alpha.53

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 k } from "react";
+import { cn as t } from "../../../../utils/index.js";
+import { RadioGroup as x } from "../../../RadioGroup/RadioGroup.js";
+import { Typography as y } from "../../../Typography/Typography.js";
+import { presetTitleVariants as g, presetPanelVariants as T } from "./PresetPanel.variants.js";
+import { useDateRangePicker as b } from "../../contexts/date-range-picker.hook.js";
+import { PRESET_OPTIONS as C } 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 = k(
+    () => C.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(
+      y,
+      {
+        component: "span",
+        className: t(g(), a?.title),
+        "aria-label": p,
+        children: m
+      }
+    ),
+    /* @__PURE__ */ i(
+      x,
+      {
+        name: "date-range-preset",
+        options: u,
+        defaultChecked: 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[];

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

@@ -0,0 +1,10 @@
+const a = [
+  { value: "today", label: "Today" },
+  { value: "current-month", label: "Current month" },
+  { value: "custom", label: "Custom" },
+  { value: "last-7-days", label: "Last 7 days" },
+  { value: "last-2-weeks", label: "Last 2 weeks" }
+];
+export {
+  a as PRESET_OPTIONS
+};

package/dist/components/DateRangePicker/contexts/date-range-picker.context.d.ts

@@ -0,0 +1,81 @@
+export type DateRangePreset = 'today' | 'current-month' | 'custom' | 'last-7-days' | 'last-2-weeks';
+export type DateRange = {
+    from?: Date;
+    to?: Date;
+};
+export type TimeRange = {
+    startTime?: Date;
+    endTime?: Date;
+};
+export type DateRangeWithTime = DateRange & TimeRange;
+export type BlockedMonth = {
+    year: number;
+    month: number;
+};
+export type DateRangePickerContextValue = {
+    /** Current selected date range */
+    range: DateRange;
+    /** Current time values */
+    time: TimeRange;
+    /** Current active preset */
+    preset: DateRangePreset;
+    /** Currently displayed months [left, right] */
+    displayedMonths: [Date, Date];
+    /** Time format */
+    timeFormat: '12' | '24';
+    /** Whether to show time inputs */
+    showTime: boolean;
+    /** Form field name */
+    name?: string;
+    /** Disabled state */
+    disabled: boolean;
+    /** Animation duration in milliseconds */
+    animationDuration: number;
+    /** Specific days that cannot be selected */
+    blockedDays: Date[];
+    /** Months that cannot be selected */
+    blockedMonths: BlockedMonth[];
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Whether navigation to previous month is allowed */
+    canNavigatePrev: boolean;
+    /** Whether navigation to next month is allowed */
+    canNavigateNext: boolean;
+    /** Hide navigation arrows when disabled */
+    hideDisabledNavigation: boolean;
+    /** Show days from previous/next month */
+    showOutsideDays: boolean;
+    /** Navigation mode: 'together' or 'independent' */
+    navigationMode: 'together' | 'independent';
+    /** Whether left month can navigate to previous (independent mode) */
+    canLeftNavigatePrev: boolean;
+    /** Whether left month can navigate to next (independent mode) */
+    canLeftNavigateNext: boolean;
+    /** Whether right month can navigate to previous (independent mode) */
+    canRightNavigatePrev: boolean;
+    /** Whether right month can navigate to next (independent mode) */
+    canRightNavigateNext: boolean;
+    /** Set the date range */
+    setRange: (range: DateRange) => void;
+    /** Set the time range */
+    setTime: (time: TimeRange) => void;
+    /** Set the preset */
+    setPreset: (preset: DateRangePreset) => void;
+    /** Navigate to previous month (together mode) */
+    navigatePrevMonth: () => void;
+    /** Navigate to next month (together mode) */
+    navigateNextMonth: () => void;
+    /** Navigate left month to previous (independent mode) */
+    navigateLeftPrev: () => void;
+    /** Navigate left month to next (independent mode) */
+    navigateLeftNext: () => void;
+    /** Navigate right month to previous (independent mode) */
+    navigateRightPrev: () => void;
+    /** Navigate right month to next (independent mode) */
+    navigateRightNext: () => void;
+    /** Set displayed months directly */
+    setDisplayedMonths: (months: [Date, Date]) => void;
+};
+export declare const DateRangePickerContext: import('react').Context<DateRangePickerContextValue | null>;

package/dist/components/DateRangePicker/contexts/date-range-picker.context.js

@@ -0,0 +1,5 @@
+import { createContext as t } from "react";
+const o = t(null);
+export {
+  o as DateRangePickerContext
+};

package/dist/components/DateRangePicker/contexts/date-range-picker.hook.d.ts

@@ -0,0 +1 @@
+export declare const useDateRangePicker: () => import('./date-range-picker.context').DateRangePickerContextValue;

package/dist/components/DateRangePicker/contexts/date-range-picker.hook.js

@@ -0,0 +1,13 @@
+import { useContext as t } from "react";
+import { DateRangePickerContext as r } from "./date-range-picker.context.js";
+const i = () => {
+  const e = t(r);
+  if (!e)
+    throw new Error(
+      "useDateRangePicker must be used within a DateRangePickerProvider"
+    );
+  return e;
+};
+export {
+  i as useDateRangePicker
+};

package/dist/components/DateRangePicker/contexts/date-range-picker.provider.d.ts

@@ -0,0 +1,24 @@
+import { FC, ReactNode } from 'react';
+import { BlockedMonth, DateRange, DateRangePreset, TimeRange } from './date-range-picker.context';
+interface DateRangePickerProviderProps {
+    children: ReactNode;
+    defaultRange?: DateRange;
+    defaultTime?: TimeRange;
+    defaultPreset?: DateRangePreset;
+    timeFormat?: '12' | '24';
+    showTime?: boolean;
+    name?: string;
+    disabled?: boolean;
+    animationDuration?: number;
+    blockedDays?: Date[];
+    blockedMonths?: BlockedMonth[];
+    minDate?: Date;
+    maxDate?: Date;
+    hideDisabledNavigation?: boolean;
+    showOutsideDays?: boolean;
+    navigationMode?: 'together' | 'independent';
+    onRangeChange?: (range: DateRange & TimeRange) => void;
+    onDateChange?: (range: DateRange) => void;
+}
+export declare const DateRangePickerProvider: FC<DateRangePickerProviderProps>;
+export {};

package/dist/components/DateRangePicker/contexts/date-range-picker.provider.js

@@ -0,0 +1,176 @@
+import { jsx as d } from "react/jsx-runtime";
+import { useState as p, useCallback as r, useMemo as c } from "react";
+import { calculatePresetRange as P } from "../utils/presets.js";
+import { canNavigateToPrevMonth as A, canNavigateToNextMonth as B } from "../utils/disabled-dates.js";
+import { DateRangePickerContext as C } from "./date-range-picker.context.js";
+const st = ({
+  children: E,
+  defaultRange: f,
+  defaultTime: G,
+  defaultPreset: g = "custom",
+  timeFormat: H = "24",
+  showTime: I = !0,
+  name: J,
+  disabled: K = !1,
+  animationDuration: O = 500,
+  blockedDays: Q = [],
+  blockedMonths: U = [],
+  minDate: u,
+  maxDate: l,
+  hideDisabledNavigation: W = !1,
+  showOutsideDays: X = !1,
+  navigationMode: Z = "together",
+  onRangeChange: i,
+  onDateChange: M
+}) => {
+  const [v, R] = p(() => f || (g !== "custom" ? P(g) : {})), [a, _] = p(() => G ?? {}), [T, x] = p(g), [n, s] = p(() => {
+    let t = {};
+    f ? t = f : g !== "custom" && (t = P(g));
+    const e = t?.from ?? t?.to ?? /* @__PURE__ */ new Date(), o = new Date(
+      e.getFullYear(),
+      e.getMonth(),
+      1
+    ), h = new Date(
+      e.getFullYear(),
+      e.getMonth() + 1,
+      1
+    );
+    return [o, h];
+  }), D = r(
+    (t) => {
+      R(t), x("custom"), i?.({ ...t, ...a }), M?.(t);
+    },
+    [a, i, M]
+  ), S = r(
+    (t) => {
+      _(t), i?.({ ...v, ...t });
+    },
+    [v, i]
+  ), k = r(
+    (t) => {
+      if (x(t), t !== "custom") {
+        const e = P(t);
+        R(e), i?.({ ...e, ...a }), M?.(e);
+      }
+    },
+    [a, i, M]
+  ), w = c(
+    () => A(n[0], u),
+    [n, u]
+  ), m = c(
+    () => B(n[1], l),
+    [n, l]
+  ), y = r(() => {
+    w && s(([t, e]) => {
+      const o = new Date(t.getFullYear(), t.getMonth() - 1, 1), h = new Date(e.getFullYear(), e.getMonth() - 1, 1);
+      return [o, h];
+    });
+  }, [w]), b = r(() => {
+    m && s(([t, e]) => {
+      const o = new Date(t.getFullYear(), t.getMonth() + 1, 1), h = new Date(e.getFullYear(), e.getMonth() + 1, 1);
+      return [o, h];
+    });
+  }, [m]), N = c(
+    () => A(n[0], u),
+    [n, u]
+  ), F = c(() => {
+    const t = n[0], e = n[1];
+    return new Date(
+      t.getFullYear(),
+      t.getMonth() + 1,
+      1
+    ).getTime() < e.getTime();
+  }, [n]), L = c(() => {
+    const t = n[0], e = n[1];
+    return new Date(
+      e.getFullYear(),
+      e.getMonth() - 1,
+      1
+    ).getTime() > t.getTime();
+  }, [n]), Y = c(
+    () => B(n[1], l),
+    [n, l]
+  ), j = r(() => {
+    N && s(([t, e]) => [new Date(t.getFullYear(), t.getMonth() - 1, 1), e]);
+  }, [N]), V = r(() => {
+    F && s(([t, e]) => [new Date(t.getFullYear(), t.getMonth() + 1, 1), e]);
+  }, [F]), q = r(() => {
+    L && s(([t, e]) => {
+      const o = new Date(e.getFullYear(), e.getMonth() - 1, 1);
+      return [t, o];
+    });
+  }, [L]), z = r(() => {
+    Y && s(([t, e]) => {
+      const o = new Date(e.getFullYear(), e.getMonth() + 1, 1);
+      return [t, o];
+    });
+  }, [Y]), $ = c(
+    () => ({
+      range: v,
+      time: a,
+      preset: T,
+      displayedMonths: n,
+      canNavigatePrev: w,
+      canNavigateNext: m,
+      canLeftNavigatePrev: N,
+      canLeftNavigateNext: F,
+      canRightNavigatePrev: L,
+      canRightNavigateNext: Y,
+      setRange: D,
+      setTime: S,
+      setPreset: k,
+      navigatePrevMonth: y,
+      navigateNextMonth: b,
+      navigateLeftPrev: j,
+      navigateLeftNext: V,
+      navigateRightPrev: q,
+      navigateRightNext: z,
+      setDisplayedMonths: s
+    }),
+    [
+      v,
+      a,
+      T,
+      n,
+      w,
+      m,
+      N,
+      F,
+      L,
+      Y,
+      D,
+      S,
+      k,
+      y,
+      b,
+      j,
+      V,
+      q,
+      z
+    ]
+  );
+  return /* @__PURE__ */ d(
+    C.Provider,
+    {
+      value: {
+        ...$,
+        timeFormat: H,
+        showTime: I,
+        name: J,
+        disabled: K,
+        animationDuration: O,
+        blockedDays: Q,
+        blockedMonths: U,
+        minDate: u,
+        maxDate: l,
+        hideDisabledNavigation: W,
+        showOutsideDays: X,
+        navigationMode: Z
+      },
+      children: E
+    }
+  );
+};
+export {
+  st as DateRangePickerProvider
+};

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

@@ -0,0 +1,4 @@
+export { DateRangePickerContext } from './date-range-picker.context';
+export type { BlockedMonth, DateRange, DateRangePreset, DateRangeWithTime, TimeRange, } from './date-range-picker.context';
+export { useDateRangePicker } from './date-range-picker.hook';
+export { DateRangePickerProvider } from './date-range-picker.provider';

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

@@ -0,0 +1,8 @@
+import { DateRangePickerContext as o } from "./date-range-picker.context.js";
+import { useDateRangePicker as a } from "./date-range-picker.hook.js";
+import { DateRangePickerProvider as n } from "./date-range-picker.provider.js";
+export {
+  o as DateRangePickerContext,
+  n as DateRangePickerProvider,
+  a as useDateRangePicker
+};