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

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
+};

package/dist/components/DateRangePicker/utils/disabled-dates.d.ts

@@ -0,0 +1,26 @@
+import { BlockedMonth } from '../contexts';
+export type DateRestrictions = {
+    blockedDays: Date[];
+    blockedMonths: BlockedMonth[];
+    minDate?: Date;
+    maxDate?: Date;
+};
+/**
+ * Checks if a date is selectable based on all restrictions.
+ */
+export declare const isDateSelectable: (date: Date, restrictions: DateRestrictions) => boolean;
+/**
+ * Creates a matcher function for react-day-picker's disabled prop.
+ * Returns undefined if no restrictions are set.
+ */
+export declare const createDisabledMatcher: (restrictions: DateRestrictions) => ((date: Date) => boolean) | undefined;
+/**
+ * Checks if navigation to the previous month should be allowed.
+ * Returns false if the previous month would be entirely before minDate.
+ */
+export declare const canNavigateToPrevMonth: (currentLeftMonth: Date, minDate?: Date) => boolean;
+/**
+ * Checks if navigation to the next month should be allowed.
+ * Returns false if the next month would be entirely after maxDate.
+ */
+export declare const canNavigateToNextMonth: (currentRightMonth: Date, maxDate?: Date) => boolean;

package/dist/components/DateRangePicker/utils/disabled-dates.js

@@ -0,0 +1,47 @@
+const r = (e) => {
+  const t = new Date(e);
+  return t.setHours(0, 0, 0, 0), t;
+}, l = (e, t) => {
+  const n = r(e);
+  return t.some(
+    (o) => r(o).getTime() === n.getTime()
+  );
+}, c = (e, t) => {
+  const n = e.getFullYear(), o = e.getMonth();
+  return t.some(
+    (s) => s.year === n && s.month === o
+  );
+}, u = (e, t) => t ? r(e) < r(t) : !1, i = (e, t) => t ? r(e) > r(t) : !1, f = (e, t) => {
+  const { blockedDays: n, blockedMonths: o, minDate: s, maxDate: a } = t;
+  return !(l(e, n) || c(e, o) || u(e, s) || i(e, a));
+}, h = (e) => {
+  const { blockedDays: t, blockedMonths: n, minDate: o, maxDate: s } = e;
+  if (!(t.length === 0 && n.length === 0 && !o && !s))
+    return (a) => !f(a, e);
+}, D = (e, t) => {
+  if (!t) return !0;
+  const n = new Date(
+    e.getFullYear(),
+    e.getMonth() - 1,
+    1
+  ), o = new Date(
+    n.getFullYear(),
+    n.getMonth() + 1,
+    0
+  );
+  return r(o) >= r(t);
+}, g = (e, t) => {
+  if (!t) return !0;
+  const n = new Date(
+    e.getFullYear(),
+    e.getMonth() + 1,
+    1
+  );
+  return r(n) <= r(t);
+};
+export {
+  g as canNavigateToNextMonth,
+  D as canNavigateToPrevMonth,
+  h as createDisabledMatcher,
+  f as isDateSelectable
+};

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

@@ -0,0 +1,6 @@
+export { calculatePresetRange } from './presets';
+export { PRESET_OPTIONS } from '../constants';
+export type { PresetOption } from '../constants';
+export { autoFormatDateInput, combineDateAndTime, formatDateToDisplayString, formatDateToString, formatTimeToString, getMonthName, isValidTimeString, parseDateString, parseDisplayDateString, parseTimeString, } from './validation';
+export { createDisabledMatcher, isDateSelectable, canNavigateToPrevMonth, canNavigateToNextMonth, } from './disabled-dates';
+export type { DateRestrictions } from './disabled-dates';

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

@@ -0,0 +1,22 @@
+import { calculatePresetRange as a } from "./presets.js";
+import { autoFormatDateInput as o, combineDateAndTime as i, formatDateToDisplayString as n, formatDateToString as m, formatTimeToString as g, getMonthName as T, isValidTimeString as p, parseDateString as D, parseDisplayDateString as S, parseTimeString as s } from "./validation.js";
+import { canNavigateToNextMonth as l, canNavigateToPrevMonth as f, createDisabledMatcher as x, isDateSelectable as N } from "./disabled-dates.js";
+import { PRESET_OPTIONS as M } from "../constants/presets.js";
+export {
+  M as PRESET_OPTIONS,
+  o as autoFormatDateInput,
+  a as calculatePresetRange,
+  l as canNavigateToNextMonth,
+  f as canNavigateToPrevMonth,
+  i as combineDateAndTime,
+  x as createDisabledMatcher,
+  n as formatDateToDisplayString,
+  m as formatDateToString,
+  g as formatTimeToString,
+  T as getMonthName,
+  N as isDateSelectable,
+  p as isValidTimeString,
+  D as parseDateString,
+  S as parseDisplayDateString,
+  s as parseTimeString
+};

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

@@ -0,0 +1,5 @@
+import { DateRange, DateRangePreset } from '../DateRangePicker.types';
+/**
+ * Calculates the date range for a given preset.
+ */
+export declare const calculatePresetRange: (preset: DateRangePreset) => DateRange;

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

@@ -0,0 +1,36 @@
+const s = (o) => {
+  const e = /* @__PURE__ */ new Date(), a = new Date(e.getFullYear(), e.getMonth(), e.getDate());
+  switch (o) {
+    case "today":
+      return {
+        from: a,
+        to: a
+      };
+    case "current-month": {
+      const t = new Date(e.getFullYear(), e.getMonth(), 1), n = new Date(e.getFullYear(), e.getMonth() + 1, 0);
+      return {
+        from: t,
+        to: n
+      };
+    }
+    case "last-7-days": {
+      const t = new Date(a);
+      return t.setDate(t.getDate() - 6), {
+        from: t,
+        to: a
+      };
+    }
+    case "last-2-weeks": {
+      const t = new Date(a);
+      return t.setDate(t.getDate() - 13), {
+        from: t,
+        to: a
+      };
+    }
+    default:
+      return {};
+  }
+};
+export {
+  s as calculatePresetRange
+};

package/dist/components/DateRangePicker/utils/validation.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Combines a date and time into an ISO string.
+ */
+export declare const combineDateAndTime: (date?: Date, time?: Date) => string;
+/**
+ * Auto-formats a date input value as MM/DD/YYYY while typing.
+ * Inserts slashes after month (2 digits) and day (2 more digits).
+ */
+export declare const autoFormatDateInput: (rawValue: string, previousValue: string) => string;
+/**
+ * Validates a time string in HH:MM format.
+ * Returns true if valid, false otherwise.
+ */
+export declare const isValidTimeString: (timeString: string, format?: "12" | "24") => boolean;
+/**
+ * Parses a time string into a Date object.
+ * Returns undefined if invalid.
+ */
+export declare const parseTimeString: (timeString: string, format?: "12" | "24", period?: "AM" | "PM") => Date | undefined;
+/**
+ * Formats a Date object to a time string in HH:MM format.
+ */
+export declare const formatTimeToString: (date: Date | undefined, format?: "12" | "24") => string;
+/**
+ * Formats a Date object to a readable date string like "6 February 2025".
+ */
+export declare const formatDateToDisplayString: (date: Date | undefined) => string;
+/**
+ * Formats a Date object to a date string in MM/DD/YYYY format.
+ */
+export declare const formatDateToString: (date: Date | undefined) => string;
+/**
+ * Parses a display date string like "6 February 2025" to a Date object.
+ */
+export declare const parseDisplayDateString: (dateString: string) => Date | undefined;
+/**
+ * Parses a date string in MM/DD/YYYY format to a Date object.
+ */
+export declare const parseDateString: (dateString: string) => Date | undefined;
+/**
+ * Gets the month name from index
+ */
+export declare const getMonthName: (monthIndex: number) => string;

package/dist/components/DateRangePicker/utils/validation.js

@@ -0,0 +1,79 @@
+const d = (r, n) => {
+  if (!r) return "";
+  const e = new Date(r);
+  return n && e.setHours(n.getHours(), n.getMinutes(), n.getSeconds()), e.toISOString();
+}, l = (r, n) => {
+  const e = r.length < n.length;
+  let t = r.replace(/[^0-9/]/g, "").replace(/\/+/g, "/");
+  return t = t.slice(0, 10), e || (/^\d{2}$/.test(t) || /^\d{2}\/\d{2}$/.test(t)) && (t = t + "/"), t;
+}, c = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+], f = (r, n = "24") => {
+  if (!r) return !0;
+  const [e, t] = r.split(":").map(Number);
+  return isNaN(e) || isNaN(t) ? !1 : n === "24" ? e >= 0 && e <= 23 && t >= 0 && t <= 59 : e >= 1 && e <= 12 && t >= 0 && t <= 59;
+}, p = (r, n = "24", e) => {
+  if (!r || !f(r, n))
+    return;
+  const [t, s] = r.split(":").map(Number), o = /* @__PURE__ */ new Date();
+  let i = t;
+  return n === "12" && e && (e === "PM" && t !== 12 ? i = t + 12 : e === "AM" && t === 12 && (i = 0)), o.setHours(i, s, 0, 0), o;
+}, S = (r, n = "24") => {
+  if (!r) return "";
+  const e = r.getHours(), t = r.getMinutes();
+  if (n === "24")
+    return `${e.toString().padStart(2, "0")}:${t.toString().padStart(2, "0")}`;
+  const s = e >= 12 ? "PM" : "AM";
+  return `${(e % 12 || 12).toString().padStart(2, "0")}:${t.toString().padStart(2, "0")} ${s}`;
+}, m = (r) => {
+  if (!r) return "";
+  const n = r.getDate(), e = c[r.getMonth()], t = r.getFullYear();
+  return `${n} ${e} ${t}`;
+}, N = (r) => {
+  if (!r) return "";
+  const n = (r.getMonth() + 1).toString().padStart(2, "0"), e = r.getDate().toString().padStart(2, "0"), t = r.getFullYear();
+  return `${n}/${e}/${t}`;
+}, h = (r) => {
+  if (!r) return;
+  const n = r.trim().split(" ");
+  if (n.length !== 3) return;
+  const [e, t, s] = n, o = parseInt(e, 10), i = parseInt(s, 10), u = c.findIndex(
+    (g) => g.toLowerCase() === t.toLowerCase()
+  );
+  if (isNaN(o) || isNaN(i) || u === -1 || o < 1 || o > 31 || i < 1900 || i > 2100) return;
+  const a = new Date(i, u, o);
+  if (!(a.getMonth() !== u || a.getDate() !== o || a.getFullYear() !== i))
+    return a;
+}, D = (r) => {
+  if (!r) return;
+  const n = r.split("/");
+  if (n.length !== 3) return;
+  const [e, t, s] = n.map(Number);
+  if (isNaN(e) || isNaN(t) || isNaN(s) || e < 1 || e > 12 || t < 1 || t > 31 || s < 1900 || s > 2100) return;
+  const o = new Date(s, e - 1, t);
+  if (!(o.getMonth() !== e - 1 || o.getDate() !== t || o.getFullYear() !== s))
+    return o;
+}, v = (r) => c[r] || "";
+export {
+  l as autoFormatDateInput,
+  d as combineDateAndTime,
+  m as formatDateToDisplayString,
+  N as formatDateToString,
+  S as formatTimeToString,
+  v as getMonthName,
+  f as isValidTimeString,
+  D as parseDateString,
+  h as parseDisplayDateString,
+  p as parseTimeString
+};

package/dist/components/Datepicker/DatePicker.d.ts

@@ -0,0 +1,26 @@
+import { FC } from 'react';
+import { DatePickerProps } from './DatePicker.types';
+/**
+ * A date picker component built on react-day-picker.
+ * Allows single date selection with calendar navigation.
+ *
+ * @example
+ * ```tsx
+ * // Basic date picker
+ * <DatePicker
+ *   defaultSelected={new Date()}
+ *   onSelect={(date) => console.log(date)}
+ * />
+ *
+ * // With custom styling
+ * <DatePicker
+ *   defaultSelected={startDate}
+ *   onSelect={setStartDate}
+ *   monthsClassName="custom-months"
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-datepicker--docs Storybook}
+ */
+declare const DatePicker: FC<DatePickerProps>;
+export { DatePicker };