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

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

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

@@ -0,0 +1,60 @@
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { useMemo as c } from "react";
+import { cn as d } from "../../../../../../utils/index.js";
+import { calendarMonthTitleVariants as f } from "../../CalendarPanel.variants.js";
+import { createDayPickerClassNames as h, SINGLE_MONTH_WIDTH as p } from "../../constants/index.js";
+import { getMonthName as M } from "../../../../utils/validation.js";
+import { D as y } from "../../../../../../DayPicker-PUEUVAST.js";
+const N = (e) => `${M(e.getMonth())} ${e.getFullYear()}`, g = ({
+  month: e,
+  range: a,
+  onRangeSelect: o,
+  disabled: i,
+  disabledMatcher: n,
+  showOutsideDays: m,
+  classNames: t
+}) => {
+  const s = c(
+    () => h(t?.dayPicker),
+    [t?.dayPicker]
+  );
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      style: { width: p },
+      children: [
+        /* @__PURE__ */ r("div", { className: "flex items-center justify-center mb-8 h-6", children: /* @__PURE__ */ r(
+          "span",
+          {
+            className: d(
+              f(),
+              "flex-1 text-center",
+              t?.monthTitle
+            ),
+            children: N(e)
+          }
+        ) }),
+        /* @__PURE__ */ r(
+          y,
+          {
+            mode: "range",
+            selected: { from: a.from, to: a.to },
+            onSelect: o,
+            month: e,
+            numberOfMonths: 1,
+            disabled: n || i,
+            hideNavigation: !0,
+            animate: !1,
+            showOutsideDays: m,
+            classNames: s
+          }
+        )
+      ]
+    },
+    `${e.getFullYear()}-${e.getMonth()}`
+  );
+};
+g.displayName = "CalendarMonth";
+export {
+  g as CalendarMonth
+};

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

@@ -0,0 +1,17 @@
+import { DateRange, Matcher } from 'react-day-picker';
+import { DayPickerClassNames } from '../../CalendarPanel.types';
+export type Props = {
+    month: Date;
+    range: {
+        from?: Date;
+        to?: Date;
+    };
+    onRangeSelect: (range: DateRange | undefined) => void;
+    disabled?: boolean;
+    disabledMatcher?: Matcher | Matcher[];
+    showOutsideDays?: boolean;
+    classNames?: {
+        monthTitle?: string;
+        dayPicker?: DayPickerClassNames;
+    };
+};

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

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

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

@@ -0,0 +1,308 @@
+import { jsx as n, jsxs as s } from "react/jsx-runtime";
+import { useCallback as Y, useMemo as k } from "react";
+import { cn as a } from "../../../../../../utils/index.js";
+import { calendarGridContainerVariants as Z, calendarPanelVariants as O } from "../../CalendarPanel.variants.js";
+import { SINGLE_MONTH_WIDTH as c } from "../../constants/index.js";
+import { CalendarDivider as tt } from "../CalendarDivider/CalendarDivider.js";
+import { CalendarMonth as d } from "../CalendarMonth/CalendarMonth.js";
+import { NavigationButton as g } from "../NavigationButton/NavigationButton.js";
+import { useIndependentCarousel as nt } from "../../hooks/useIndependentCarousel.js";
+import { m as et } from "../../../../../../proxy-Drz23HDt.js";
+const at = ({
+  className: b,
+  calendarWidth: x = 550,
+  ariaLabelCalendar: T = "Date range picker calendar",
+  ariaLabelPrevMonthStart: B = "Previous month for start date",
+  ariaLabelNextMonthStart: R = "Next month for start date",
+  ariaLabelPrevMonthEnd: w = "Previous month for end date",
+  ariaLabelNextMonthEnd: z = "Next month for end date",
+  classNames: t,
+  range: i,
+  onRangeSelect: v,
+  disabled: e,
+  disabledMatcher: o,
+  showOutsideDays: r,
+  hideDisabledNavigation: h,
+  canLeftNavigatePrev: A,
+  canLeftNavigateNext: L,
+  canRightNavigatePrev: I,
+  canRightNavigateNext: S,
+  navigateLeftPrev: D,
+  navigateLeftNext: M,
+  navigateRightPrev: P,
+  navigateRightNext: y,
+  carouselProps: f
+}) => {
+  const {
+    calendarHeight: W,
+    enableLeftTransition: H,
+    enableRightTransition: j,
+    isLeftAnimating: u,
+    isRightAnimating: C,
+    leftAnimateTransform: G,
+    leftCarouselRef: V,
+    leftInternalMonth: _,
+    leftNextMonth: $,
+    leftPrevMonth: E,
+    rightAnimateTransform: q,
+    rightCarouselRef: F,
+    rightInternalMonth: J,
+    rightNextMonth: K,
+    rightPrevMonth: Q,
+    getLeftTransform: U,
+    getRightTransform: X
+  } = nt(f), l = Y(
+    (p) => {
+      p && v({
+        from: p.from,
+        to: p.to
+      });
+    },
+    [v]
+  ), N = k(
+    () => t?.dayPicker,
+    [t?.dayPicker]
+  ), m = k(
+    () => ({
+      monthTitle: t?.monthTitle,
+      dayPicker: N
+    }),
+    [t?.monthTitle, N]
+  );
+  return /* @__PURE__ */ n("div", { className: a(O({ className: b }), t?.root), children: /* @__PURE__ */ s(
+    "div",
+    {
+      className: a(
+        Z(),
+        "relative",
+        t?.gridContainer
+      ),
+      style: { width: x },
+      children: [
+        /* @__PURE__ */ n(tt, { className: t?.divider }),
+        /* @__PURE__ */ s(
+          et.div,
+          {
+            className: "flex gap-8",
+            role: "application",
+            "aria-label": T,
+            initial: !1,
+            animate: { height: W },
+            transition: {
+              duration: f.animationDuration / 1e3,
+              ease: [0.25, 0.1, 0.25, 1]
+            },
+            children: [
+              /* @__PURE__ */ s(
+                "div",
+                {
+                  style: { width: c },
+                  className: "relative overflow-hidden",
+                  children: [
+                    /* @__PURE__ */ n(
+                      g,
+                      {
+                        direction: "prev",
+                        onClick: D,
+                        disabled: e,
+                        isAnimating: u,
+                        canNavigate: A,
+                        hideWhenDisabled: h,
+                        className: a(
+                          "absolute left-0 top-0 z-10 p-1",
+                          "bg-white dark:bg-metal-800",
+                          t?.navButton
+                        ),
+                        disabledClassName: t?.navButtonDisabled,
+                        ariaLabel: B,
+                        size: "small"
+                      }
+                    ),
+                    /* @__PURE__ */ n(
+                      g,
+                      {
+                        direction: "next",
+                        onClick: M,
+                        disabled: e,
+                        isAnimating: u,
+                        canNavigate: L,
+                        hideWhenDisabled: h,
+                        className: a(
+                          "absolute right-0 top-0 z-10 p-1",
+                          "bg-white dark:bg-metal-800",
+                          t?.navButton
+                        ),
+                        disabledClassName: t?.navButtonDisabled,
+                        ariaLabel: R,
+                        size: "small"
+                      }
+                    ),
+                    /* @__PURE__ */ s(
+                      "div",
+                      {
+                        ref: V,
+                        className: a(
+                          "flex",
+                          H && G && "konstruct-drp-carousel-transition"
+                        ),
+                        style: {
+                          "--konstruct-drp-animation-duration": `${f.animationDuration}ms`,
+                          width: 3 * c,
+                          transform: U(),
+                          willChange: "transform"
+                        },
+                        children: [
+                          /* @__PURE__ */ n(
+                            d,
+                            {
+                              month: E,
+                              range: i,
+                              onRangeSelect: l,
+                              disabled: e,
+                              disabledMatcher: o,
+                              showOutsideDays: r,
+                              classNames: m
+                            }
+                          ),
+                          /* @__PURE__ */ n(
+                            d,
+                            {
+                              month: _,
+                              range: i,
+                              onRangeSelect: l,
+                              disabled: e,
+                              disabledMatcher: o,
+                              showOutsideDays: r,
+                              classNames: m
+                            }
+                          ),
+                          /* @__PURE__ */ n(
+                            d,
+                            {
+                              month: $,
+                              range: i,
+                              onRangeSelect: l,
+                              disabled: e,
+                              disabledMatcher: o,
+                              showOutsideDays: r,
+                              classNames: m
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ s(
+                "div",
+                {
+                  style: { width: c },
+                  className: "relative overflow-hidden",
+                  children: [
+                    /* @__PURE__ */ n(
+                      g,
+                      {
+                        direction: "prev",
+                        onClick: P,
+                        disabled: e,
+                        isAnimating: C,
+                        canNavigate: I,
+                        hideWhenDisabled: h,
+                        className: a(
+                          "absolute left-0 top-0 z-10 p-1",
+                          "bg-white dark:bg-metal-800",
+                          t?.navButton
+                        ),
+                        disabledClassName: t?.navButtonDisabled,
+                        ariaLabel: w,
+                        size: "small"
+                      }
+                    ),
+                    /* @__PURE__ */ n(
+                      g,
+                      {
+                        direction: "next",
+                        onClick: y,
+                        disabled: e,
+                        isAnimating: C,
+                        canNavigate: S,
+                        hideWhenDisabled: h,
+                        className: a(
+                          "absolute right-0 top-0 z-10 p-1",
+                          "bg-white dark:bg-metal-800",
+                          t?.navButton
+                        ),
+                        disabledClassName: t?.navButtonDisabled,
+                        ariaLabel: z,
+                        size: "small"
+                      }
+                    ),
+                    /* @__PURE__ */ s(
+                      "div",
+                      {
+                        ref: F,
+                        className: a(
+                          "flex",
+                          j && q && "konstruct-drp-carousel-transition"
+                        ),
+                        style: {
+                          "--konstruct-drp-animation-duration": `${f.animationDuration}ms`,
+                          width: 3 * c,
+                          transform: X(),
+                          willChange: "transform"
+                        },
+                        children: [
+                          /* @__PURE__ */ n(
+                            d,
+                            {
+                              month: Q,
+                              range: i,
+                              onRangeSelect: l,
+                              disabled: e,
+                              disabledMatcher: o,
+                              showOutsideDays: r,
+                              classNames: m
+                            }
+                          ),
+                          /* @__PURE__ */ n(
+                            d,
+                            {
+                              month: J,
+                              range: i,
+                              onRangeSelect: l,
+                              disabled: e,
+                              disabledMatcher: o,
+                              showOutsideDays: r,
+                              classNames: m
+                            }
+                          ),
+                          /* @__PURE__ */ n(
+                            d,
+                            {
+                              month: K,
+                              range: i,
+                              onRangeSelect: l,
+                              disabled: e,
+                              disabledMatcher: o,
+                              showOutsideDays: r,
+                              classNames: m
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+};
+at.displayName = "IndependentModeCalendar";
+export {
+  at as IndependentModeCalendar
+};

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

@@ -0,0 +1,34 @@
+import { Matcher } from 'react-day-picker';
+import { CalendarPanelClassNames } from '../../CalendarPanel.types';
+import { UseIndependentCarouselProps } from '../../hooks';
+export type Props = {
+    className?: string;
+    calendarWidth?: number;
+    ariaLabelCalendar?: string;
+    ariaLabelPrevMonthStart?: string;
+    ariaLabelNextMonthStart?: string;
+    ariaLabelPrevMonthEnd?: string;
+    ariaLabelNextMonthEnd?: string;
+    classNames?: CalendarPanelClassNames;
+    range: {
+        from?: Date;
+        to?: Date;
+    };
+    onRangeSelect: (range: {
+        from?: Date;
+        to?: Date;
+    }) => void;
+    disabled?: boolean;
+    disabledMatcher?: Matcher | Matcher[];
+    showOutsideDays?: boolean;
+    hideDisabledNavigation?: boolean;
+    canLeftNavigatePrev: boolean;
+    canLeftNavigateNext: boolean;
+    canRightNavigatePrev: boolean;
+    canRightNavigateNext: boolean;
+    navigateLeftPrev: () => void;
+    navigateLeftNext: () => void;
+    navigateRightPrev: () => void;
+    navigateRightNext: () => void;
+    carouselProps: UseIndependentCarouselProps;
+};

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

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

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

@@ -0,0 +1,40 @@
+import { jsx as o } from "react/jsx-runtime";
+import { cn as e } from "../../../../../../utils/index.js";
+import { calendarNavButtonDisabledVariants as p, calendarNavButtonVariants as b } from "../../CalendarPanel.variants.js";
+import { C as v, a as N } from "../../../../../../chevron-right-SUh6si0f.js";
+const B = ({
+  direction: n,
+  onClick: s,
+  disabled: i = !1,
+  isAnimating: r = !1,
+  canNavigate: t = !0,
+  hideWhenDisabled: l = !1,
+  className: m,
+  disabledClassName: d,
+  ariaLabel: u,
+  size: c = "medium"
+}) => {
+  const a = i || r || !t;
+  if (l && !t)
+    return null;
+  const f = n === "prev" ? v : N, h = c === "small" ? "w-4 h-4" : "w-5 h-5";
+  return /* @__PURE__ */ o(
+    "button",
+    {
+      type: "button",
+      onClick: s,
+      disabled: a,
+      className: e(
+        b(),
+        m,
+        a && e(p(), d)
+      ),
+      "aria-label": u,
+      children: /* @__PURE__ */ o(f, { className: h })
+    }
+  );
+};
+B.displayName = "NavigationButton";
+export {
+  B as NavigationButton
+};

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

@@ -0,0 +1,12 @@
+export type Props = {
+    direction: 'prev' | 'next';
+    onClick: () => void;
+    disabled?: boolean;
+    isAnimating?: boolean;
+    canNavigate?: boolean;
+    hideWhenDisabled?: boolean;
+    className?: string;
+    disabledClassName?: string;
+    ariaLabel: string;
+    size?: 'small' | 'medium';
+};

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

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