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

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

@@ -0,0 +1,31 @@
+import { FC } from 'react';
+import { DateRangePickerProps } from './DateRangePicker.types';
+/**
+ * A date range picker component that allows selecting a range of dates
+ * with optional time inputs and preset options.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <DateRangePicker
+ *   onRangeChange={(range) => console.log(range)}
+ * />
+ *
+ * // With default values
+ * <DateRangePicker
+ *   defaultRange={{ from: new Date(), to: new Date() }}
+ *   defaultPreset="last-7-days"
+ *   onRangeChange={handleRangeChange}
+ * />
+ *
+ * // With 12-hour time format
+ * <DateRangePicker
+ *   timeFormat="12"
+ *   onRangeChange={handleRangeChange}
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-daterangepicker--docs Storybook}
+ */
+declare const DateRangePicker: FC<DateRangePickerProps>;
+export { DateRangePicker };

package/dist/components/DateRangePicker/DateRangePicker.js

@@ -0,0 +1,163 @@
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
+import { cn as t } from "../../utils/index.js";
+import { Typography as i } from "../Typography/Typography.js";
+import { rightPanelVariants as O, dateRangePickerVariants as Q } from "./DateRangePicker.variants.js";
+import { DateRangePickerProvider as S } from "./contexts/date-range-picker.provider.js";
+import { PresetPanel as U } from "./components/PresetPanel/PresetPanel.js";
+import { DateTimeInputs as W } from "./components/DateTimeInputs/DateTimeInputs.js";
+import { CalendarPanel as X } from "./components/CalendarPanel/CalendarPanel.js";
+const Y = ({
+  animationDuration: o = 500,
+  className: m,
+  defaultPreset: l = "custom",
+  defaultRange: c,
+  defaultTime: p,
+  disabled: s = !1,
+  isRequired: d,
+  label: n,
+  name: f,
+  showTime: g = !0,
+  theme: P,
+  timeFormat: x = "24",
+  blockedDays: h,
+  blockedMonths: u,
+  minDate: k,
+  maxDate: v,
+  hideDisabledNavigation: D,
+  showOutsideDays: N,
+  navigationMode: R = "independent",
+  // CalendarPanel props
+  ariaLabelCalendar: y,
+  ariaLabelPrevMonth: T,
+  ariaLabelNextMonth: j,
+  ariaLabelPrevMonthStart: I,
+  ariaLabelNextMonthStart: V,
+  ariaLabelPrevMonthEnd: b,
+  ariaLabelNextMonthEnd: C,
+  // DateTimeInputs props
+  labelStartDate: K,
+  labelEndDate: L,
+  labelTime: q,
+  ariaLabelStartDate: w,
+  ariaLabelEndDate: z,
+  errorInvalidDate: A,
+  errorDateNotAvailable: B,
+  // PresetPanel props
+  showPresets: E = !0,
+  labelTimePeriod: F,
+  ariaLabelTimePeriod: G,
+  presetLabels: H,
+  // Customizable class names
+  classNames: e,
+  // Callbacks
+  onRangeChange: J,
+  onDateChange: M
+}) => /* @__PURE__ */ r(
+  S,
+  {
+    defaultRange: c,
+    defaultTime: p,
+    defaultPreset: l,
+    timeFormat: x,
+    showTime: g,
+    name: f,
+    disabled: s,
+    animationDuration: o,
+    blockedDays: h,
+    blockedMonths: u,
+    minDate: k,
+    maxDate: v,
+    hideDisabledNavigation: D,
+    showOutsideDays: N,
+    navigationMode: R,
+    onRangeChange: J,
+    onDateChange: M,
+    children: /* @__PURE__ */ a("div", { className: "flex flex-col gap-2", "data-theme": P, children: [
+      n ? /* @__PURE__ */ a(
+        i,
+        {
+          component: "label",
+          variant: "labelLarge",
+          className: t(
+            "cursor-pointer",
+            "flex",
+            "gap-1",
+            "text-sm",
+            "font-medium"
+          ),
+          children: [
+            n,
+            d && /* @__PURE__ */ r(
+              i,
+              {
+                component: "span",
+                className: t(
+                  "text-red-600",
+                  "dark:text-red-500",
+                  "text-xs",
+                  "mt-0.5"
+                ),
+                children: "*"
+              }
+            )
+          ]
+        }
+      ) : null,
+      /* @__PURE__ */ a(
+        "div",
+        {
+          className: t(
+            Q({ className: m }),
+            "gap-4",
+            e?.container
+          ),
+          role: "group",
+          "aria-label": n || "Date range picker",
+          children: [
+            E && /* @__PURE__ */ r(
+              U,
+              {
+                labelTimePeriod: F,
+                ariaLabelTimePeriod: G,
+                presetLabels: H,
+                classNames: e?.presetPanel
+              }
+            ),
+            /* @__PURE__ */ a("div", { className: t(O(), e?.rightPanel), children: [
+              /* @__PURE__ */ r(
+                W,
+                {
+                  labelStartDate: K,
+                  labelEndDate: L,
+                  labelTime: q,
+                  ariaLabelStartDate: w,
+                  ariaLabelEndDate: z,
+                  errorInvalidDate: A,
+                  errorDateNotAvailable: B,
+                  classNames: e?.dateTimeInputs
+                }
+              ),
+              /* @__PURE__ */ r(
+                X,
+                {
+                  ariaLabelCalendar: y,
+                  ariaLabelPrevMonth: T,
+                  ariaLabelNextMonth: j,
+                  ariaLabelPrevMonthStart: I,
+                  ariaLabelNextMonthStart: V,
+                  ariaLabelPrevMonthEnd: b,
+                  ariaLabelNextMonthEnd: C,
+                  classNames: e?.calendarPanel
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] })
+  }
+);
+Y.displayName = "KonstructDateRangePicker";
+export {
+  Y as DateRangePicker
+};

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

@@ -0,0 +1,123 @@
+import { VariantProps } from 'class-variance-authority';
+import { Theme } from '../../domain/theme';
+import { CalendarPanelClassNames, DayPickerClassNames } from './components/CalendarPanel/CalendarPanel.types';
+import { DateTimeInputsClassNames } from './components/DateTimeInputs/DateTimeInputs.types';
+import { PresetLabels, PresetPanelClassNames } from './components/PresetPanel/PresetPanel.types';
+import { dateRangePickerVariants } from './DateRangePicker.variants';
+import { DateRange, DateRangePreset, DateRangeWithTime, TimeRange } from './contexts';
+export type { DateRange, DateRangePreset, DateRangeWithTime, TimeRange };
+export type { CalendarPanelClassNames, DateTimeInputsClassNames, DayPickerClassNames, PresetLabels, PresetPanelClassNames, };
+/**
+ * Props for the DateRangePicker component.
+ *
+ * @example
+ * ```tsx
+ * <DateRangePicker
+ *   defaultRange={{ from: new Date(), to: new Date() }}
+ *   onRangeChange={(range) => console.log(range)}
+ * />
+ * ```
+ */
+export type DateRangePickerProps = VariantProps<typeof dateRangePickerVariants> & {
+    /** Initial date range */
+    defaultRange?: DateRange;
+    /** Initial time range */
+    defaultTime?: TimeRange;
+    /** Initially selected preset (default: 'custom') */
+    defaultPreset?: DateRangePreset;
+    /** Callback when the range changes (includes time) */
+    onRangeChange?: (range: DateRangeWithTime) => void;
+    /** Callback when the date changes (start or end date, without time) */
+    onDateChange?: (range: DateRange) => void;
+    /** Time format: '12' for 12-hour or '24' for 24-hour */
+    timeFormat?: '12' | '24';
+    /** Whether to show time inputs (default: true) */
+    showTime?: boolean;
+    /** Theme override */
+    theme?: Theme;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Form field name (used for hidden inputs: {name}-start and {name}-end) */
+    name?: string;
+    /** Label for the component */
+    label?: string;
+    /** Whether the field is required */
+    isRequired?: boolean;
+    /** Animation duration in milliseconds for month transitions (default: 400) */
+    animationDuration?: number;
+    /** Additional CSS classes */
+    className?: string;
+    /** Specific days that cannot be selected */
+    blockedDays?: Date[];
+    /** Months that cannot be selected (all days in these months will be disabled) */
+    blockedMonths?: {
+        year: number;
+        month: number;
+    }[];
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Hide navigation arrows when they are disabled (default: false) */
+    hideDisabledNavigation?: boolean;
+    /** Show days from previous/next month in the calendar grid (default: false) */
+    showOutsideDays?: boolean;
+    /**
+     * Navigation mode for the calendar months (default: 'independent')
+     * - 'independent': Each month has its own navigation arrows and can move independently
+     *   (first month cannot go on or past second month and vice versa)
+     * - 'together': Both months navigate together (prev/next moves both by one month)
+     */
+    navigationMode?: 'independent' | 'together';
+    /** Aria label for the calendar container (default: 'Date range picker calendar') */
+    ariaLabelCalendar?: string;
+    /** Aria label for previous month button in together mode (default: 'Previous month') */
+    ariaLabelPrevMonth?: string;
+    /** Aria label for next month button in together mode (default: 'Next month') */
+    ariaLabelNextMonth?: string;
+    /** Aria label for previous month button for start date in independent mode (default: 'Previous month for start date') */
+    ariaLabelPrevMonthStart?: string;
+    /** Aria label for next month button for start date in independent mode (default: 'Next month for start date') */
+    ariaLabelNextMonthStart?: string;
+    /** Aria label for previous month button for end date in independent mode (default: 'Previous month for end date') */
+    ariaLabelPrevMonthEnd?: string;
+    /** Aria label for next month button for end date in independent mode (default: 'Next month for end date') */
+    ariaLabelNextMonthEnd?: string;
+    /** Label for start date input (default: 'Start date') */
+    labelStartDate?: string;
+    /** Label for end date input (default: 'End date') */
+    labelEndDate?: string;
+    /** Label for time inputs (default: 'Time') */
+    labelTime?: string;
+    /** Aria label for start date input (default: 'Start date') */
+    ariaLabelStartDate?: string;
+    /** Aria label for end date input (default: 'End date') */
+    ariaLabelEndDate?: string;
+    /** Error message for invalid date format (default: 'Invalid date') */
+    errorInvalidDate?: string;
+    /** Error message for unavailable date (default: 'Date is not available') */
+    errorDateNotAvailable?: string;
+    /** Whether to show the preset panel (default: true) */
+    showPresets?: boolean;
+    /** Label for the time period section (default: 'Time period') */
+    labelTimePeriod?: string;
+    /** Aria label for the time period section (default: 'Time period options') */
+    ariaLabelTimePeriod?: string;
+    /** Custom labels for preset options */
+    presetLabels?: PresetLabels;
+    /** Custom class names for different parts of the component */
+    classNames?: DateRangePickerClassNames;
+};
+/** Custom class names for different parts of the DateRangePicker component */
+export type DateRangePickerClassNames = {
+    /** Class name for the main container */
+    container?: string;
+    /** Class name for the right panel (contains inputs and calendar) */
+    rightPanel?: string;
+    /** Class names for the preset panel */
+    presetPanel?: PresetPanelClassNames;
+    /** Class names for the date/time inputs section */
+    dateTimeInputs?: DateTimeInputsClassNames;
+    /** Class names for the calendar panel */
+    calendarPanel?: CalendarPanelClassNames;
+};

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

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

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

@@ -0,0 +1,25 @@
+import { c as a } from "../../index-D29mdTf5.js";
+const t = a([
+  "flex",
+  "rounded-xl",
+  "max-w-fit",
+  "bg-white",
+  "dark:bg-metal-800",
+  "dark:border-metal-700",
+  "shadow",
+  "dark:shadow-metal-50/5",
+  "pt-4.5",
+  "pb-3.5",
+  "px-4"
+]), r = a([
+  "flex",
+  "flex-col",
+  "pt-4",
+  "gap-6",
+  "pr-4",
+  "items-center"
+]);
+export {
+  t as dateRangePickerVariants,
+  r as rightPanelVariants
+};

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

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

package/dist/components/DateRangePicker/components/CalendarPanel/CalendarPanel.js

@@ -0,0 +1,120 @@
+import { jsx as x } from "react/jsx-runtime";
+import { useMemo as B } from "react";
+import '../../../../style.css';import '../../../../CalendarPanel.css';/* empty css                         */
+import { useDateRangePicker as E } from "../../contexts/date-range-picker.hook.js";
+import { createDisabledMatcher as F } from "../../utils/disabled-dates.js";
+import { IndependentModeCalendar as G } from "./components/IndependentModeCalendar/IndependentModeCalendar.js";
+import { TogetherModeCalendar as H } from "./components/TogetherModeCalendar/TogetherModeCalendar.js";
+const J = ({
+  className: a,
+  calendarWidth: n = 550,
+  ariaLabelCalendar: o = "Date range picker calendar",
+  ariaLabelPrevMonth: u = "Previous month",
+  ariaLabelNextMonth: D = "Next month",
+  ariaLabelPrevMonthStart: M = "Previous month for start date",
+  ariaLabelNextMonthStart: R = "Next month for start date",
+  ariaLabelPrevMonthEnd: b = "Previous month for end date",
+  ariaLabelNextMonthEnd: k = "Next month for end date",
+  classNames: r
+}) => {
+  const {
+    animationDuration: i,
+    blockedDays: d,
+    blockedMonths: g,
+    canLeftNavigateNext: y,
+    canLeftNavigatePrev: C,
+    canNavigateNext: s,
+    canNavigatePrev: v,
+    canRightNavigateNext: L,
+    canRightNavigatePrev: S,
+    disabled: e,
+    displayedMonths: m,
+    hideDisabledNavigation: c,
+    maxDate: h,
+    minDate: l,
+    navigationMode: t,
+    range: f,
+    showOutsideDays: p,
+    navigateLeftNext: j,
+    navigateLeftPrev: w,
+    navigateNextMonth: I,
+    navigatePrevMonth: O,
+    navigateRightNext: T,
+    navigateRightPrev: q,
+    setRange: z
+  } = E(), N = B(
+    () => F({
+      blockedDays: d,
+      blockedMonths: g,
+      minDate: l,
+      maxDate: h
+    }),
+    [d, g, l, h]
+  ), P = (A) => {
+    z(A);
+  };
+  return t === "independent" ? /* @__PURE__ */ x(
+    G,
+    {
+      className: a,
+      calendarWidth: n,
+      ariaLabelCalendar: o,
+      ariaLabelPrevMonthStart: M,
+      ariaLabelNextMonthStart: R,
+      ariaLabelPrevMonthEnd: b,
+      ariaLabelNextMonthEnd: k,
+      classNames: r,
+      range: f,
+      onRangeSelect: P,
+      disabled: e,
+      disabledMatcher: N,
+      showOutsideDays: p,
+      hideDisabledNavigation: c,
+      canLeftNavigatePrev: C,
+      canLeftNavigateNext: y,
+      canRightNavigatePrev: S,
+      canRightNavigateNext: L,
+      navigateLeftPrev: w,
+      navigateLeftNext: j,
+      navigateRightPrev: q,
+      navigateRightNext: T,
+      carouselProps: {
+        displayedMonths: m,
+        animationDuration: i,
+        navigationMode: t
+      }
+    }
+  ) : /* @__PURE__ */ x(
+    H,
+    {
+      className: a,
+      calendarWidth: n,
+      ariaLabelCalendar: o,
+      ariaLabelPrevMonth: u,
+      ariaLabelNextMonth: D,
+      classNames: r,
+      range: f,
+      onRangeSelect: P,
+      disabled: e,
+      disabledMatcher: N,
+      showOutsideDays: p,
+      hideDisabledNavigation: c,
+      canNavigatePrev: v,
+      canNavigateNext: s,
+      carouselProps: {
+        displayedMonths: m,
+        animationDuration: i,
+        disabled: e,
+        canNavigatePrev: v,
+        canNavigateNext: s,
+        navigationMode: t,
+        navigatePrevMonth: O,
+        navigateNextMonth: I
+      }
+    }
+  );
+};
+J.displayName = "DateRangePickerCalendarPanel";
+export {
+  J as CalendarPanel
+};

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

@@ -0,0 +1,79 @@
+export type CalendarPanelClassNames = {
+    /** Root container */
+    root?: string;
+    /** Navigation bar container */
+    navigation?: string;
+    /** Navigation group (contains prev button + month title + next button) */
+    navGroup?: string;
+    /** Navigation buttons */
+    navButton?: string;
+    /** Disabled navigation buttons */
+    navButtonDisabled?: string;
+    /** Month title text */
+    monthTitle?: string;
+    /** Divider line between month header and calendar grid */
+    divider?: string;
+    /** Calendar grids container */
+    gridContainer?: string;
+    /** Individual calendar grid */
+    grid?: string;
+    /** Day picker specific class names */
+    dayPicker?: DayPickerClassNames;
+};
+/** Class names for DayPicker calendar elements */
+export type DayPickerClassNames = {
+    /** Root container of the day picker */
+    root?: string;
+    /** Months container */
+    months?: string;
+    /** Individual month container */
+    month?: string;
+    /** Calendar table */
+    table?: string;
+    /** Table head with weekday names */
+    weekdays?: string;
+    /** Individual weekday header cell */
+    weekday?: string;
+    /** Table body with weeks */
+    weeks?: string;
+    /** Individual day cell */
+    day?: string;
+    /** Day button inside each cell */
+    dayButton?: string;
+    /** Selected day(s) */
+    selected?: string;
+    /** Start of the selected range */
+    rangeStart?: string;
+    /** End of the selected range */
+    rangeEnd?: string;
+    /** Days between range start and end */
+    rangeMiddle?: string;
+    /** Today's date */
+    today?: string;
+    /** Disabled days */
+    disabled?: string;
+    /** Days outside the current month */
+    outside?: string;
+};
+export type CalendarPanelProps = {
+    className?: string;
+    /** Width of the calendar panel in pixels (default: 550) */
+    calendarWidth?: number;
+    /** Aria label for the calendar container (default: 'Date range picker calendar') */
+    ariaLabelCalendar?: string;
+    /** Aria label for previous month button in together mode (default: 'Previous month') */
+    ariaLabelPrevMonth?: string;
+    /** Aria label for next month button in together mode (default: 'Next month') */
+    ariaLabelNextMonth?: string;
+    /** Aria label for previous month button for start date in independent mode (default: 'Previous month for start date') */
+    ariaLabelPrevMonthStart?: string;
+    /** Aria label for next month button for start date in independent mode (default: 'Next month for start date') */
+    ariaLabelNextMonthStart?: string;
+    /** Aria label for previous month button for end date in independent mode (default: 'Previous month for end date') */
+    ariaLabelPrevMonthEnd?: string;
+    /** Aria label for next month button for end date in independent mode (default: 'Next month for end date') */
+    ariaLabelNextMonthEnd?: string;
+    /** Custom class names for styling */
+    classNames?: CalendarPanelClassNames;
+};
+export type SlideDirection = 'left' | 'right' | null;

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

@@ -0,0 +1,8 @@
+export declare const calendarPanelVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const calendarNavigationVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const calendarNavGroupVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const calendarNavButtonVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const calendarNavButtonDisabledVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const calendarMonthTitleVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const calendarGridContainerVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const calendarGridVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

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

@@ -0,0 +1,56 @@
+import { c as t } from "../../../../index-D29mdTf5.js";
+const a = t([
+  "flex",
+  "flex-col",
+  "items-center",
+  "w-full"
+]), n = t([
+  "flex",
+  "items-center",
+  "justify-between",
+  "w-138"
+]), r = t([
+  "flex",
+  "items-center",
+  "w-64.75"
+]), s = t([
+  "flex",
+  "items-center",
+  "justify-center",
+  "p-2",
+  "rounded-full",
+  "cursor-pointer",
+  "text-slate-500",
+  "dark:text-metal-300",
+  "hover:bg-slate-100",
+  "dark:hover:bg-metal-700",
+  "transition-colors"
+]), l = t([
+  "opacity-45",
+  "cursor-not-allowed",
+  "hover:bg-transparent"
+]), o = t([
+  "flex-1",
+  "text-center",
+  "text-base",
+  "font-medium",
+  "text-slate-700",
+  "dark:text-white",
+  "leading-6"
+]), c = t([
+  "flex",
+  "gap-8",
+  "py-4",
+  "w-138",
+  "justify-center"
+]), i = t(["w-64.75"]);
+export {
+  c as calendarGridContainerVariants,
+  i as calendarGridVariants,
+  o as calendarMonthTitleVariants,
+  l as calendarNavButtonDisabledVariants,
+  s as calendarNavButtonVariants,
+  r as calendarNavGroupVariants,
+  n as calendarNavigationVariants,
+  a as calendarPanelVariants
+};

package/dist/components/DateRangePicker/components/CalendarPanel/components/CalendarDivider/CalendarDivider.d.ts

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

package/dist/components/DateRangePicker/components/CalendarPanel/components/CalendarDivider/CalendarDivider.js

@@ -0,0 +1,22 @@
+import { jsx as e } from "react/jsx-runtime";
+import { cn as r } from "../../../../../../utils/index.js";
+const i = ({ className: a }) => /* @__PURE__ */ e(
+  "div",
+  {
+    className: r(
+      "absolute",
+      "left-0",
+      "right-0",
+      "top-14",
+      "h-px",
+      "bg-slate-200",
+      "dark:bg-metal-700",
+      a
+    ),
+    "aria-hidden": "true"
+  }
+);
+i.displayName = "CalendarDivider";
+export {
+  i as CalendarDivider
+};

package/dist/components/DateRangePicker/components/CalendarPanel/components/CalendarDivider/CalendarDivider.types.d.ts

@@ -0,0 +1,3 @@
+export type Props = {
+    className?: string;
+};

package/dist/components/DateRangePicker/components/CalendarPanel/components/CalendarMonth/CalendarMonth.d.ts

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