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

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

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

@@ -0,0 +1,136 @@
+import { jsx as e, jsxs as W } from "react/jsx-runtime";
+import { useCallback as z, useMemo as L } from "react";
+import { cn as i } from "../../../../../../utils/index.js";
+import { calendarGridContainerVariants as V, calendarPanelVariants as A } from "../../CalendarPanel.variants.js";
+import { CalendarDivider as F } from "../CalendarDivider/CalendarDivider.js";
+import { CalendarMonth as G } from "../CalendarMonth/CalendarMonth.js";
+import { NavigationButton as m } from "../NavigationButton/NavigationButton.js";
+import { useTogetherCarousel as H } from "../../hooks/useTogetherCarousel.js";
+import { m as R } from "../../../../../../proxy-CngVm5qA.js";
+const S = ({
+  className: s,
+  calendarWidth: h = 550,
+  ariaLabelCalendar: c = "Date range picker calendar",
+  ariaLabelPrevMonth: f = "Previous month",
+  ariaLabelNextMonth: u = "Next month",
+  classNames: a,
+  range: p,
+  onRangeSelect: o,
+  disabled: r,
+  disabledMatcher: v,
+  showOutsideDays: g,
+  hideDisabledNavigation: l,
+  canNavigatePrev: C,
+  canNavigateNext: b,
+  carouselProps: n
+}) => {
+  const {
+    carouselRef: k,
+    isAnimating: d,
+    enableTransition: T,
+    animateTransform: y,
+    calendarHeight: x,
+    carouselTotalWidth: D,
+    monthsToRender: M,
+    handlePrevMonth: N,
+    handleNextMonth: B,
+    getTransform: P
+  } = H(n), w = z(
+    (t) => {
+      t && o({
+        from: t.from,
+        to: t.to
+      });
+    },
+    [o]
+  ), $ = L(
+    () => a?.dayPicker,
+    [a?.dayPicker]
+  );
+  return /* @__PURE__ */ e("div", { className: i(A({ className: s }), a?.root), children: /* @__PURE__ */ W(
+    "div",
+    {
+      className: i(
+        V(),
+        "overflow-hidden relative justify-start!",
+        a?.gridContainer
+      ),
+      style: { width: h },
+      children: [
+        /* @__PURE__ */ e(
+          m,
+          {
+            direction: "prev",
+            onClick: N,
+            disabled: r,
+            isAnimating: d,
+            canNavigate: C,
+            hideWhenDisabled: l,
+            className: i("absolute left-0 top-3 z-10", a?.navButton),
+            disabledClassName: a?.navButtonDisabled,
+            ariaLabel: f
+          }
+        ),
+        /* @__PURE__ */ e(
+          m,
+          {
+            direction: "next",
+            onClick: B,
+            disabled: r,
+            isAnimating: d,
+            canNavigate: b,
+            hideWhenDisabled: l,
+            className: i("absolute right-0 top-3 z-10", a?.navButton),
+            disabledClassName: a?.navButtonDisabled,
+            ariaLabel: u
+          }
+        ),
+        /* @__PURE__ */ e(F, { className: a?.divider }),
+        /* @__PURE__ */ e(
+          R.div,
+          {
+            ref: k,
+            className: i(
+              "flex gap-8",
+              T && y && "konstruct-drp-carousel-transition"
+            ),
+            role: "application",
+            "aria-label": c,
+            initial: !1,
+            animate: { height: x },
+            transition: {
+              duration: n.animationDuration / 1e3,
+              ease: [0.25, 0.1, 0.25, 1]
+            },
+            style: {
+              "--konstruct-drp-animation-duration": `${n.animationDuration}ms`,
+              width: D,
+              transform: P(),
+              willChange: "transform"
+            },
+            children: M.map((t, j) => /* @__PURE__ */ e(
+              G,
+              {
+                month: t,
+                range: p,
+                onRangeSelect: w,
+                disabled: r,
+                disabledMatcher: v,
+                showOutsideDays: g,
+                classNames: {
+                  monthTitle: a?.monthTitle,
+                  dayPicker: $
+                }
+              },
+              `${t.getFullYear()}-${t.getMonth()}-${j}`
+            ))
+          }
+        )
+      ]
+    }
+  ) });
+};
+S.displayName = "TogetherModeCalendar";
+export {
+  S as TogetherModeCalendar
+};

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

@@ -0,0 +1,26 @@
+import { Matcher } from 'react-day-picker';
+import { CalendarPanelClassNames } from '../../CalendarPanel.types';
+import { UseTogetherCarouselProps } from '../../hooks';
+export type Props = {
+    className?: string;
+    calendarWidth?: number;
+    ariaLabelCalendar?: string;
+    ariaLabelPrevMonth?: string;
+    ariaLabelNextMonth?: string;
+    classNames?: CalendarPanelClassNames;
+    range: {
+        from?: Date;
+        to?: Date;
+    };
+    onRangeSelect: (range: {
+        from?: Date;
+        to?: Date;
+    }) => void;
+    disabled?: boolean;
+    disabledMatcher?: Matcher | Matcher[];
+    showOutsideDays?: boolean;
+    hideDisabledNavigation?: boolean;
+    canNavigatePrev: boolean;
+    canNavigateNext: boolean;
+    carouselProps: UseTogetherCarouselProps;
+};

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

@@ -0,0 +1,5 @@
+export { CalendarDivider } from './CalendarDivider/CalendarDivider';
+export { CalendarMonth } from './CalendarMonth/CalendarMonth';
+export { IndependentModeCalendar } from './IndependentModeCalendar/IndependentModeCalendar';
+export { NavigationButton } from './NavigationButton/NavigationButton';
+export { TogetherModeCalendar } from './TogetherModeCalendar/TogetherModeCalendar';

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

@@ -0,0 +1,12 @@
+import { CalendarDivider as r } from "./CalendarDivider/CalendarDivider.js";
+import { CalendarMonth as a } from "./CalendarMonth/CalendarMonth.js";
+import { IndependentModeCalendar as d } from "./IndependentModeCalendar/IndependentModeCalendar.js";
+import { NavigationButton as f } from "./NavigationButton/NavigationButton.js";
+import { TogetherModeCalendar as x } from "./TogetherModeCalendar/TogetherModeCalendar.js";
+export {
+  r as CalendarDivider,
+  a as CalendarMonth,
+  d as IndependentModeCalendar,
+  f as NavigationButton,
+  x as TogetherModeCalendar
+};