@konstructio/ui 0.1.2-alpha.8 → 0.1.2-alpha.80

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

@@ -0,0 +1,25 @@
+var 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 e } from "react";
+var r = e(null);
+export {
+  r 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,10 @@
+import { DateRangePickerContext as r } from "./date-range-picker.context.js";
+import { useContext as t } from "react";
+var a = () => {
+  const e = t(r);
+  if (!e) throw new Error("useDateRangePicker must be used within a DateRangePickerProvider");
+  return e;
+};
+export {
+  a 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,119 @@
+import { DateRangePickerContext as _ } from "./date-range-picker.context.js";
+import { calculatePresetRange as w } from "../utils/presets.js";
+import { canNavigateToNextMonth as q, canNavigateToPrevMonth as z } from "../utils/disabled-dates.js";
+import { useCallback as n, useMemo as a, useState as p } from "react";
+import { jsx as $ } from "react/jsx-runtime";
+var nt = ({ children: A, defaultRange: l, defaultTime: B, defaultPreset: i = "custom", timeFormat: E = "24", showTime: G = !0, name: H, disabled: I = !1, animationDuration: J = 500, blockedDays: K = [], blockedMonths: O = [], minDate: u, maxDate: g, hideDisabledNavigation: Q = !1, showOutsideDays: U = !1, navigationMode: W = "together", onRangeChange: s, onDateChange: v }) => {
+  const [M, P] = p(() => l || (i !== "custom" ? w(i) : {})), [c, X] = p(() => B ?? {}), [T, x] = p(i), [r, o] = p(() => {
+    let t = {};
+    l ? t = l : i !== "custom" && (t = w(i));
+    const e = t?.from ?? t?.to ?? /* @__PURE__ */ new Date();
+    return [new Date(e.getFullYear(), e.getMonth(), 1), new Date(e.getFullYear(), e.getMonth() + 1, 1)];
+  }), D = n((t) => {
+    P(t), x("custom"), s?.({
+      ...t,
+      ...c
+    }), v?.(t);
+  }, [
+    c,
+    s,
+    v
+  ]), L = n((t) => {
+    X(t), s?.({
+      ...M,
+      ...t
+    });
+  }, [M, s]), S = n((t) => {
+    if (x(t), t !== "custom") {
+      const e = w(t);
+      P(e), s?.({
+        ...e,
+        ...c
+      }), v?.(e);
+    }
+  }, [
+    c,
+    s,
+    v
+  ]), h = a(() => z(r[0], u), [r, u]), f = a(() => q(r[1], g), [r, g]), k = n(() => {
+    h && o(([t, e]) => [new Date(t.getFullYear(), t.getMonth() - 1, 1), new Date(e.getFullYear(), e.getMonth() - 1, 1)]);
+  }, [h]), y = n(() => {
+    f && o(([t, e]) => [new Date(t.getFullYear(), t.getMonth() + 1, 1), new Date(e.getFullYear(), e.getMonth() + 1, 1)]);
+  }, [f]), m = a(() => z(r[0], u), [r, u]), N = a(() => {
+    const t = r[0], e = r[1];
+    return new Date(t.getFullYear(), t.getMonth() + 1, 1).getTime() < e.getTime();
+  }, [r]), F = a(() => {
+    const t = r[0], e = r[1];
+    return new Date(e.getFullYear(), e.getMonth() - 1, 1).getTime() > t.getTime();
+  }, [r]), Y = a(() => q(r[1], g), [r, g]), b = n(() => {
+    m && o(([t, e]) => [new Date(t.getFullYear(), t.getMonth() - 1, 1), e]);
+  }, [m]), j = n(() => {
+    N && o(([t, e]) => [new Date(t.getFullYear(), t.getMonth() + 1, 1), e]);
+  }, [N]), R = n(() => {
+    F && o(([t, e]) => [t, new Date(e.getFullYear(), e.getMonth() - 1, 1)]);
+  }, [F]), V = n(() => {
+    Y && o(([t, e]) => [t, new Date(e.getFullYear(), e.getMonth() + 1, 1)]);
+  }, [Y]), Z = a(() => ({
+    range: M,
+    time: c,
+    preset: T,
+    displayedMonths: r,
+    canNavigatePrev: h,
+    canNavigateNext: f,
+    canLeftNavigatePrev: m,
+    canLeftNavigateNext: N,
+    canRightNavigatePrev: F,
+    canRightNavigateNext: Y,
+    setRange: D,
+    setTime: L,
+    setPreset: S,
+    navigatePrevMonth: k,
+    navigateNextMonth: y,
+    navigateLeftPrev: b,
+    navigateLeftNext: j,
+    navigateRightPrev: R,
+    navigateRightNext: V,
+    setDisplayedMonths: o
+  }), [
+    M,
+    c,
+    T,
+    r,
+    h,
+    f,
+    m,
+    N,
+    F,
+    Y,
+    D,
+    L,
+    S,
+    k,
+    y,
+    b,
+    j,
+    R,
+    V
+  ]);
+  return /* @__PURE__ */ $(_.Provider, {
+    value: {
+      ...Z,
+      timeFormat: E,
+      showTime: G,
+      name: H,
+      disabled: I,
+      animationDuration: J,
+      blockedDays: K,
+      blockedMonths: O,
+      minDate: u,
+      maxDate: g,
+      hideDisabledNavigation: Q,
+      showOutsideDays: U,
+      navigationMode: W
+    },
+    children: A
+  });
+};
+export {
+  nt 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 r } from "./date-range-picker.context.js";
+import { useDateRangePicker as t } from "./date-range-picker.hook.js";
+import { DateRangePickerProvider as a } from "./date-range-picker.provider.js";
+export {
+  r as DateRangePickerContext,
+  a as DateRangePickerProvider,
+  t 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,27 @@
+var n = (e) => {
+  const r = new Date(e);
+  return r.setHours(0, 0, 0, 0), r;
+}, s = (e, r) => {
+  const t = n(e);
+  return r.some((a) => n(a).getTime() === t.getTime());
+}, u = (e, r) => {
+  const t = e.getFullYear(), a = e.getMonth();
+  return r.some((o) => o.year === t && o.month === a);
+}, i = (e, r) => r ? n(e) < n(r) : !1, f = (e, r) => r ? n(e) > n(r) : !1, c = (e, r) => {
+  const { blockedDays: t, blockedMonths: a, minDate: o, maxDate: l } = r;
+  return !(s(e, t) || u(e, a) || i(e, o) || f(e, l));
+}, g = (e) => {
+  const { blockedDays: r, blockedMonths: t, minDate: a, maxDate: o } = e;
+  if (!(r.length === 0 && t.length === 0 && !a && !o))
+    return (l) => !c(l, e);
+}, v = (e, r) => {
+  if (!r) return !0;
+  const t = new Date(e.getFullYear(), e.getMonth() - 1, 1);
+  return n(new Date(t.getFullYear(), t.getMonth() + 1, 0)) >= n(r);
+}, D = (e, r) => r ? n(new Date(e.getFullYear(), e.getMonth() + 1, 1)) <= n(r) : !0;
+export {
+  D as canNavigateToNextMonth,
+  v as canNavigateToPrevMonth,
+  g as createDisabledMatcher,
+  c 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 e } from "./presets.js";
+import { canNavigateToNextMonth as r, canNavigateToPrevMonth as i, createDisabledMatcher as o, isDateSelectable as m } from "./disabled-dates.js";
+import { PRESET_OPTIONS as g } from "../constants/presets.js";
+import { autoFormatDateInput as T, combineDateAndTime as D, formatDateToDisplayString as S, formatDateToString as s, formatTimeToString as c, getMonthName as l, isValidTimeString as f, parseDateString as N, parseDisplayDateString as h, parseTimeString as M } from "./validation.js";
+export {
+  g as PRESET_OPTIONS,
+  T as autoFormatDateInput,
+  e as calculatePresetRange,
+  r as canNavigateToNextMonth,
+  i as canNavigateToPrevMonth,
+  D as combineDateAndTime,
+  o as createDisabledMatcher,
+  S as formatDateToDisplayString,
+  s as formatDateToString,
+  c as formatTimeToString,
+  l as getMonthName,
+  m as isDateSelectable,
+  f as isValidTimeString,
+  N as parseDateString,
+  h as parseDisplayDateString,
+  M 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,34 @@
+var o = (n) => {
+  const e = /* @__PURE__ */ new Date(), a = new Date(e.getFullYear(), e.getMonth(), e.getDate());
+  switch (n) {
+    case "today":
+      return {
+        from: a,
+        to: a
+      };
+    case "current-month":
+      return {
+        from: new Date(e.getFullYear(), e.getMonth(), 1),
+        to: new Date(e.getFullYear(), e.getMonth() + 1, 0)
+      };
+    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 {
+  o 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,67 @@
+var p = (t, n) => {
+  if (!t) return "";
+  const e = new Date(t);
+  return n && e.setHours(n.getHours(), n.getMinutes(), n.getSeconds()), e.toISOString();
+}, c = (t, n) => {
+  const e = t.length < n.length;
+  let r = t.replace(/[^0-9/]/g, "").replace(/\/+/g, "/");
+  return r = r.slice(0, 10), e || (/^\d{2}$/.test(r) || /^\d{2}\/\d{2}$/.test(r)) && (r = r + "/"), r;
+}, g = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+], l = (t, n = "24") => {
+  if (!t) return !0;
+  const [e, r] = t.split(":").map(Number);
+  return isNaN(e) || isNaN(r) ? !1 : n === "24" ? e >= 0 && e <= 23 && r >= 0 && r <= 59 : e >= 1 && e <= 12 && r >= 0 && r <= 59;
+}, v = (t, n = "24", e) => {
+  if (!t || !l(t, n)) return;
+  const [r, i] = t.split(":").map(Number), a = /* @__PURE__ */ new Date();
+  let o = r;
+  return n === "12" && e && (e === "PM" && r !== 12 ? o = r + 12 : e === "AM" && r === 12 && (o = 0)), a.setHours(o, i, 0, 0), a;
+}, d = (t, n = "24") => {
+  if (!t) return "";
+  const e = t.getHours(), r = t.getMinutes();
+  if (n === "24") return `${e.toString().padStart(2, "0")}:${r.toString().padStart(2, "0")}`;
+  const i = e >= 12 ? "PM" : "AM";
+  return `${(e % 12 || 12).toString().padStart(2, "0")}:${r.toString().padStart(2, "0")} ${i}`;
+}, S = (t) => t ? `${t.getDate()} ${g[t.getMonth()]} ${t.getFullYear()}` : "", N = (t) => t ? `${(t.getMonth() + 1).toString().padStart(2, "0")}/${t.getDate().toString().padStart(2, "0")}/${t.getFullYear()}` : "", m = (t) => {
+  if (!t) return;
+  const n = t.trim().split(" ");
+  if (n.length !== 3) return;
+  const [e, r, i] = n, a = parseInt(e, 10), o = parseInt(i, 10), u = g.findIndex((f) => f.toLowerCase() === r.toLowerCase());
+  if (isNaN(a) || isNaN(o) || u === -1 || a < 1 || a > 31 || o < 1900 || o > 2100) return;
+  const s = new Date(o, u, a);
+  if (!(s.getMonth() !== u || s.getDate() !== a || s.getFullYear() !== o))
+    return s;
+}, D = (t) => {
+  if (!t) return;
+  const n = t.split("/");
+  if (n.length !== 3) return;
+  const [e, r, i] = n.map(Number);
+  if (isNaN(e) || isNaN(r) || isNaN(i) || e < 1 || e > 12 || r < 1 || r > 31 || i < 1900 || i > 2100) return;
+  const a = new Date(i, e - 1, r);
+  if (!(a.getMonth() !== e - 1 || a.getDate() !== r || a.getFullYear() !== i))
+    return a;
+}, h = (t) => g[t] || "";
+export {
+  c as autoFormatDateInput,
+  p as combineDateAndTime,
+  S as formatDateToDisplayString,
+  N as formatDateToString,
+  d as formatTimeToString,
+  h as getMonthName,
+  l as isValidTimeString,
+  D as parseDateString,
+  m as parseDisplayDateString,
+  v as parseTimeString
+};

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

@@ -0,0 +1,26 @@
+import { FC } from 'react';
+import { Props } 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<Props>;
+export { DatePicker };