@xola/ui-kit 3.0.8 → 3.4.0

package/build/components/DatePicker/NavbarElement.js

@@ -0,0 +1,43 @@
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import c from "clsx";
+import { useCallback as l } from "react";
+import { useDayPicker as m } from "react-day-picker";
+import { ChevronLeftIcon as p } from "../../icons/build/ChevronLeftIcon.js";
+import { ChevronRightIcon as x } from "../../icons/build/ChevronRightIcon.js";
+const C = ({ className: i, onTodayClick: t }) => {
+  const { nextMonth: e, previousMonth: o, goToMonth: n } = m(), b = !e, h = !o, d = l(() => {
+    o && n(o);
+  }, [o, n]), u = l(() => {
+    e && n(e);
+  }, [n, e]);
+  return /* @__PURE__ */ s("nav", { className: c("h-8 right-0 absolute items-center flex space-x-4 z-10", i), children: [
+    t && /* @__PURE__ */ r(
+      "button",
+      {
+        type: "button",
+        className: "h-8 px-3 py-1.5 text-sm rounded border border-solid border-gray bg-white font-semibold tracking-tightest text-black hover:border-blue hover:bg-blue-lighter",
+        onClick: t,
+        children: "Today"
+      }
+    ),
+    /* @__PURE__ */ s("span", { className: "flex space-x-2", children: [
+      /* @__PURE__ */ r(a, { isVisible: !h, onClick: d, children: /* @__PURE__ */ r(p, {}) }),
+      /* @__PURE__ */ r(a, { isVisible: !b, onClick: u, children: /* @__PURE__ */ r(x, {}) })
+    ] })
+  ] });
+}, a = ({ isVisible: i = !0, children: t, onClick: e }) => /* @__PURE__ */ r(
+  "button",
+  {
+    type: "button",
+    className: c(
+      i ? "inline-block" : "invisible",
+      "inline-flex h-7 w-7 items-center justify-center rounded-full border border-transparent leading-none text-black hover:border-black"
+    ),
+    onClick: () => e == null ? void 0 : e(),
+    children: t
+  }
+);
+export {
+  a as ChevronButton,
+  C as NavbarElement
+};

package/build/components/DatePicker/RangeDatePicker.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+interface DateRange {
+    from?: Date;
+    to?: Date;
+}
+export interface RangeDatePickerProps {
+    value?: DateRange;
+    selectedDays?: DateRange;
+    startMonth: Date;
+    endMonth: Date;
+    isDateRangeStyle?: boolean;
+    shouldShowYearPicker?: boolean;
+    disabledDays?: ((date: Date) => boolean) | Date[];
+    modifiers?: Record<string, any>;
+    locale?: string;
+    timezoneName?: string;
+    getDayContent?: (day: number, date: Date) => React.ReactNode;
+    getTooltip?: (date: Date) => React.ReactNode;
+    handleDayClick: (day: Date | undefined, options: Record<string, any>, event: React.MouseEvent | React.KeyboardEvent, isStart?: boolean) => void;
+    handleStartMonthChange: (month: Date) => void;
+    handleEndMonthChange: (month: Date) => void;
+    handleTodayClick: (day: Date, options: Record<string, any>, event: React.MouseEvent) => void;
+}
+declare const RangeDatePicker: ({ value, selectedDays, startMonth, endMonth, isDateRangeStyle, shouldShowYearPicker, disabledDays, modifiers, locale, timezoneName, getDayContent, getTooltip, handleDayClick, handleStartMonthChange, handleEndMonthChange, handleTodayClick, ...rest }: RangeDatePickerProps) => React.JSX.Element;
+export default RangeDatePicker;

package/build/components/DatePicker/RangeDatePicker.js

@@ -0,0 +1,134 @@
+import { jsxs as K, jsx as n } from "react/jsx-runtime";
+import a from "clsx";
+import { isFunction as Q, isArray as U } from "lodash-es";
+import { now as d } from "../../helpers/date.js";
+import { Tooltip as V } from "../Tooltip.js";
+import { Day as W } from "./Day.js";
+import { LocalizedDayPicker as F } from "./LocalizedDayPicker.js";
+import { MonthYearSelector as X } from "./MonthYearSelector.js";
+import { NavbarElement as A } from "./NavbarElement.js";
+const et = ({
+  value: o,
+  selectedDays: b,
+  startMonth: c,
+  endMonth: m,
+  isDateRangeStyle: f,
+  shouldShowYearPicker: I,
+  disabledDays: u,
+  modifiers: h = {},
+  locale: O,
+  timezoneName: i,
+  getDayContent: Y,
+  getTooltip: g,
+  handleDayClick: p,
+  handleStartMonthChange: x,
+  handleEndMonthChange: w,
+  handleTodayClick: q,
+  ...k
+}) => {
+  const y = d(o == null ? void 0 : o.from, i).isSame(d(o == null ? void 0 : o.to, i), "month"), l = d(o == null ? void 0 : o.from, i).isSame(d(o == null ? void 0 : o.to, i), "day"), C = (t, e) => I && t ? (r) => /* @__PURE__ */ n(
+    X,
+    {
+      date: r.date || t,
+      currentMonth: t,
+      locale: O,
+      onChange: e
+    }
+  ) : void 0, _ = C(c, x), S = C(m, w), D = (t) => Q(u) ? u(t) : U(u) ? u.some((e) => d(e, i).isSame(t, "day")) : !1, E = (t) => D(t), N = (t) => {
+    const e = d(t, i).isBefore(o == null ? void 0 : o.from, "day");
+    return D(t) || e && !l;
+  }, B = (t, e, r) => {
+    const s = g == null ? void 0 : g(t), J = e(t), L = /* @__PURE__ */ n(
+      W,
+      {
+        disabled: J,
+        selectedDate: o,
+        date: t,
+        getContent: Y,
+        currentMonth: r
+      }
+    );
+    return s ? /* @__PURE__ */ n(V, { placement: "top", content: s, children: L }) : L;
+  }, G = (t) => B(t, E, c), H = (t) => B(t, N, m), P = {
+    months: "flex flex-col relative",
+    month_caption: "relative flex h-8 mb-4 pl-4",
+    caption_label: "text-lg font-semibold",
+    nav: "h-8 right-4 absolute items-center",
+    weekdays: "flex flex-row",
+    weekday: "w-full m-0 p-0 text-base font-semibold text-black",
+    month: "w-full min-w-[400px]",
+    month_grid: "w-full mt-4",
+    week: "mt-0.5 flex w-full justify-between",
+    day: "w-[calc(100%/7)] mr-0.5 rounded",
+    day_button: "h-12 w-full cursor-pointer rounded bg-transparent hover:border hover:border-blue hover:bg-blue-lighter hover:text-black disabled:cursor-not-allowed disabled:text-gray-light disabled:hover:border-none disabled:hover:bg-transparent",
+    selected: a(
+      f ? "[&>button]:bg-transparent [&>button]:text-black [&>button:hover]:bg-blue-lighter [&>button:hover]:text-black" : "[&>button]:border [&>button]:border-blue [&>button]:bg-blue [&>button]:text-white [&>button:hover]:border-blue-darker [&>button:hover]:bg-blue-darker"
+    ),
+    today: "[&>button]:border [&>button]:border-gray-light",
+    outside: "opacity-0",
+    disabled: "text-gray-light cursor-not-allowed [&>button]:cursor-not-allowed",
+    hidden: "invisible"
+  }, j = {
+    start: a(
+      f && !l ? "rounded-none [background:linear-gradient(90deg,#ffffff_40%,#d1e1ff_25%)] [&>button]:!bg-blue [&>button]:!text-white [&>button]:rounded-full" : "[&>button]:!bg-blue [&>button]:!text-white",
+      l ? "[&>button]:outline [&>button]:outline-offset-1 [&>button]:outline-blue-lighter" : null
+    ),
+    end: a(
+      f && !l ? "rounded-none [background:linear-gradient(90deg,#d1e1ff_40%,#ffffff_25%)] [&>button]:!bg-blue [&>button]:!text-white [&>button]:rounded-full" : "[&>button]:!bg-blue [&>button]:!text-white",
+      l ? "[&>button]:outline [&>button]:outline-offset-1 [&>button]:outline-blue-lighter" : null
+    ),
+    selected: f ? "rounded-none bg-blue-lighter text-black" : "",
+    waitlist: "[&>button]:relative [&>button]:after:content-[''] [&>button]:after:absolute [&>button]:after:bottom-1 [&>button]:after:left-1/2 [&>button]:after:-translate-x-1/2 [&>button]:after:h-2 [&>button]:after:w-2 [&>button]:after:rounded-full [&>button]:after:bg-yellow"
+  };
+  return /* @__PURE__ */ K("div", { className: "flex gap-4", children: [
+    /* @__PURE__ */ n(
+      F,
+      {
+        className: a(
+          "pt-6 tracking-tightest max-w-[400px] rounded-lg ring-0 focus:outline-none focus:ring-0"
+        ),
+        mode: "single",
+        selected: b == null ? void 0 : b.from,
+        month: c,
+        modifiers: { ...h, start: o == null ? void 0 : o.from },
+        disabled: E,
+        onSelect: (t, e, r, s) => p(t, r, s, !0),
+        onMonthChange: x,
+        classNames: P,
+        modifiersClassNames: j,
+        components: {
+          ..._ ? { CaptionLabel: _ } : {},
+          DayButton: ({ day: t, ...e }) => /* @__PURE__ */ n("button", { ...e, children: G(t.date) }),
+          Nav: (t) => /* @__PURE__ */ n(A, { ...t, onTodayClick: (e) => q(/* @__PURE__ */ new Date(), {}, e) })
+        },
+        ...k
+      }
+    ),
+    /* @__PURE__ */ n(
+      F,
+      {
+        className: a(
+          "pt-6 tracking-tightest max-w-[400px] rounded-lg ring-0 focus:outline-none focus:ring-0"
+        ),
+        mode: "single",
+        selected: y || b == null ? void 0 : b.to,
+        month: m,
+        modifiers: y ? {} : { ...h, end: o == null ? void 0 : o.to },
+        disabled: N,
+        onSelect: (t, e, r, s) => p(t, r, s, !1),
+        onMonthChange: w,
+        classNames: P,
+        modifiersClassNames: j,
+        components: {
+          ...S ? { CaptionLabel: S } : {},
+          DayButton: ({ day: t, ...e }) => /* @__PURE__ */ n("button", { ...e, children: H(t.date) }),
+          Nav: (t) => /* @__PURE__ */ n(A, { ...t })
+        },
+        ...k
+      }
+    )
+  ] });
+};
+export {
+  et as default
+};

package/build/components/DatePicker/RelativeDateRange.d.ts

@@ -0,0 +1,51 @@
+import { default as React } from 'react';
+export declare const rangeOptions: {
+    readonly YESTERDAY: "P1D,yesterday";
+    readonly TODAY: "P1D,today";
+    readonly NEXT_DAY: "P1D,next day";
+    readonly LAST_WEEK: "P1W,last week";
+    readonly TRAILING_WEEK: "P1W,-1 week";
+    readonly THIS_WEEK: "P1W,this week";
+    readonly NEXT_WEEK: "P1W,next week";
+    readonly LEADING_WEEK: "P1W,+1 week";
+    readonly LAST_MONTH: "P1M,first day of last month";
+    readonly TRAILING_MONTH: "P1M,-1 month";
+    readonly THIS_MONTH: "P1M,first day of this month";
+    readonly NEXT_MONTH: "P1M,next month";
+    readonly LEADING_MONTH: "P1M,+1 month";
+    readonly LAST_QUARTER: "P3M,first day of last quarter";
+    readonly TRAILING_QUARTER: "P3M,-3 months";
+    readonly THIS_QUARTER: "P3M,first day of this quarter";
+    readonly NEXT_QUARTER: "P3M,next quarter";
+    readonly LEADING_QUARTER: "P3M,+3 months";
+    readonly LAST_YEAR: "P1Y,first day of January last year";
+    readonly TRAILING_YEAR: "P1Y,-1 year";
+    readonly THIS_YEAR: "P1Y,first day of this year";
+    readonly NEXT_YEAR: "P1Y,next year";
+    readonly LEADING_YEAR: "P1Y,+1 year";
+};
+export declare const rangeLabels: Record<string, string>;
+interface RangeOption {
+    value: string;
+    label: string;
+}
+export declare const dateRanges: Record<string, {
+    label: string;
+    rangeOptions: RangeOption[];
+}>;
+interface DateRange {
+    from: Date;
+    to: Date;
+}
+type RangeKey = "day" | "week" | "month" | "quarter" | "year";
+export interface RelativeDateRangeProps {
+    ranges?: RangeKey[];
+    value?: string;
+    showApply?: boolean;
+    isFutureDatesAllowed?: boolean;
+    timezoneName?: string;
+    onChange: (rangeName: string, range: DateRange) => void;
+    onSubmit?: () => void;
+}
+export declare const RelativeDateRange: ({ ranges, value, showApply, isFutureDatesAllowed, timezoneName, onChange, onSubmit, }: RelativeDateRangeProps) => React.JSX.Element;
+export {};

package/build/components/DatePicker/RelativeDateRange.js

@@ -0,0 +1,280 @@
+import { jsxs as f, jsx as d } from "react/jsx-runtime";
+import { Button as u } from "../Buttons/Button.js";
+import { Select as O } from "../Forms/Select.js";
+import { toDate as t, now as E } from "../../helpers/date.js";
+const a = {
+  // Day
+  YESTERDAY: "P1D,yesterday",
+  TODAY: "P1D,today",
+  NEXT_DAY: "P1D,next day",
+  // Week
+  LAST_WEEK: "P1W,last week",
+  TRAILING_WEEK: "P1W,-1 week",
+  THIS_WEEK: "P1W,this week",
+  NEXT_WEEK: "P1W,next week",
+  LEADING_WEEK: "P1W,+1 week",
+  // Month
+  LAST_MONTH: "P1M,first day of last month",
+  TRAILING_MONTH: "P1M,-1 month",
+  THIS_MONTH: "P1M,first day of this month",
+  NEXT_MONTH: "P1M,next month",
+  LEADING_MONTH: "P1M,+1 month",
+  // Quarter
+  LAST_QUARTER: "P3M,first day of last quarter",
+  TRAILING_QUARTER: "P3M,-3 months",
+  THIS_QUARTER: "P3M,first day of this quarter",
+  NEXT_QUARTER: "P3M,next quarter",
+  LEADING_QUARTER: "P3M,+3 months",
+  // Year
+  LAST_YEAR: "P1Y,first day of January last year",
+  TRAILING_YEAR: "P1Y,-1 year",
+  THIS_YEAR: "P1Y,first day of this year",
+  NEXT_YEAR: "P1Y,next year",
+  LEADING_YEAR: "P1Y,+1 year"
+}, T = {
+  // Day
+  [a.YESTERDAY]: "Yesterday",
+  [a.TODAY]: "Today",
+  [a.NEXT_DAY]: "Next Day",
+  // Week
+  [a.LAST_WEEK]: "Last Week",
+  [a.TRAILING_WEEK]: "Trailing Week",
+  [a.THIS_WEEK]: "This Week",
+  [a.NEXT_WEEK]: "Next Week",
+  [a.LEADING_WEEK]: "Leading Week",
+  // Month
+  [a.LAST_MONTH]: "Last Month",
+  [a.TRAILING_MONTH]: "Trailing Month",
+  [a.THIS_MONTH]: "This Month",
+  [a.NEXT_MONTH]: "Next Month",
+  [a.LEADING_MONTH]: "Leading Month",
+  // Quarter
+  [a.LAST_QUARTER]: "Last Quarter",
+  [a.TRAILING_QUARTER]: "Trailing Quarter",
+  [a.THIS_QUARTER]: "This Quarter",
+  [a.NEXT_QUARTER]: "Next Quarter",
+  [a.LEADING_QUARTER]: "Leading Quarter",
+  // Year
+  [a.LAST_YEAR]: "Last Year",
+  [a.TRAILING_YEAR]: "Trailing Year",
+  [a.THIS_YEAR]: "This Year",
+  [a.NEXT_YEAR]: "Next Year",
+  [a.LEADING_YEAR]: "Leading Year"
+}, I = {
+  day: {
+    label: "Day",
+    rangeOptions: [
+      { value: a.YESTERDAY, label: T[a.YESTERDAY] },
+      { value: a.TODAY, label: T[a.TODAY] },
+      { value: a.NEXT_DAY, label: T[a.NEXT_DAY] }
+    ]
+  },
+  week: {
+    label: "Week",
+    rangeOptions: [
+      { value: a.LAST_WEEK, label: T[a.LAST_WEEK] },
+      { value: a.TRAILING_WEEK, label: T[a.TRAILING_WEEK] },
+      { value: a.THIS_WEEK, label: T[a.THIS_WEEK] },
+      { value: a.NEXT_WEEK, label: T[a.NEXT_WEEK] },
+      { value: a.LEADING_WEEK, label: T[a.LEADING_WEEK] }
+    ]
+  },
+  month: {
+    label: "Month",
+    rangeOptions: [
+      { value: a.LAST_MONTH, label: T[a.LAST_MONTH] },
+      { value: a.TRAILING_MONTH, label: T[a.TRAILING_MONTH] },
+      { value: a.THIS_MONTH, label: T[a.THIS_MONTH] },
+      { value: a.NEXT_MONTH, label: T[a.NEXT_MONTH] },
+      { value: a.LEADING_MONTH, label: T[a.LEADING_MONTH] }
+    ]
+  },
+  quarter: {
+    label: "Quarter",
+    rangeOptions: [
+      { value: a.LAST_QUARTER, label: T[a.LAST_QUARTER] },
+      { value: a.TRAILING_QUARTER, label: T[a.TRAILING_QUARTER] },
+      { value: a.THIS_QUARTER, label: T[a.THIS_QUARTER] },
+      { value: a.NEXT_QUARTER, label: T[a.NEXT_QUARTER] },
+      { value: a.LEADING_QUARTER, label: T[a.LEADING_QUARTER] }
+    ]
+  },
+  year: {
+    label: "Year",
+    rangeOptions: [
+      { value: a.LAST_YEAR, label: T[a.LAST_YEAR] },
+      { value: a.TRAILING_YEAR, label: T[a.TRAILING_YEAR] },
+      { value: a.THIS_YEAR, label: T[a.THIS_YEAR] },
+      { value: a.NEXT_YEAR, label: T[a.NEXT_YEAR] },
+      { value: a.LEADING_YEAR, label: T[a.LEADING_YEAR] }
+    ]
+  }
+}, i = (e, r, s) => r ? e : e.filter((A) => !s.has(A.value)), y = /* @__PURE__ */ new Set([
+  a.NEXT_DAY,
+  a.NEXT_WEEK,
+  a.NEXT_MONTH,
+  a.NEXT_QUARTER,
+  a.NEXT_YEAR,
+  a.LEADING_WEEK,
+  a.LEADING_MONTH,
+  a.LEADING_QUARTER,
+  a.LEADING_YEAR
+]), L = {
+  [a.YESTERDAY]: (e) => {
+    const r = E(void 0, e).subtract(1, "day");
+    return {
+      from: t(r.startOf("day")),
+      to: t(r.endOf("day"), !1)
+    };
+  },
+  [a.TODAY]: (e) => ({
+    from: t(E(void 0, e).startOf("day")),
+    to: t(E(void 0, e).endOf("day"), !1)
+  }),
+  [a.NEXT_DAY]: (e) => {
+    const r = E(void 0, e).add(1, "day");
+    return {
+      from: t(r.startOf("day")),
+      to: t(r.endOf("day"), !1)
+    };
+  },
+  [a.LAST_WEEK]: (e) => {
+    const r = E(void 0, e).subtract(7, "day");
+    return {
+      from: t(r.startOf("week")),
+      to: t(r.endOf("week"), !1)
+    };
+  },
+  [a.TRAILING_WEEK]: (e) => ({
+    from: t(E(void 0, e).subtract(7, "day").startOf("day")),
+    to: t(E(void 0, e).subtract(1, "day").endOf("day"), !1)
+  }),
+  [a.THIS_WEEK]: (e) => ({
+    from: t(E(void 0, e).startOf("week")),
+    to: t(E(void 0, e).endOf("week"), !1)
+  }),
+  [a.NEXT_WEEK]: (e) => {
+    const r = E(void 0, e).add(1, "week");
+    return {
+      from: t(r.startOf("week")),
+      to: t(r.endOf("week"), !1)
+    };
+  },
+  [a.LEADING_WEEK]: (e) => {
+    const r = E(void 0, e);
+    return {
+      from: t(r.startOf("day")),
+      to: t(r.add(1, "week").subtract(1, "day").endOf("day"), !1)
+    };
+  },
+  [a.LAST_MONTH]: (e) => {
+    const r = E(void 0, e).subtract(1, "month");
+    return {
+      from: t(r.startOf("month")),
+      to: t(r.endOf("month"), !1)
+    };
+  },
+  [a.TRAILING_MONTH]: (e) => ({
+    from: t(E(void 0, e).subtract(1, "month").startOf("day")),
+    to: t(E(void 0, e).subtract(1, "day").endOf("day"), !1)
+  }),
+  [a.THIS_MONTH]: (e) => ({
+    from: t(E(void 0, e).startOf("month")),
+    to: t(E(void 0, e).endOf("month"), !1)
+  }),
+  [a.NEXT_MONTH]: (e) => {
+    const r = E(void 0, e).add(1, "month");
+    return {
+      from: t(r.startOf("month")),
+      to: t(r.endOf("month"), !1)
+    };
+  },
+  [a.LEADING_MONTH]: (e) => {
+    const r = E(void 0, e);
+    return {
+      from: t(r.startOf("day")),
+      to: t(r.add(1, "month").subtract(1, "day").endOf("day"), !1)
+    };
+  },
+  [a.LAST_QUARTER]: (e) => ({
+    from: t(E(void 0, e).startOf("quarter").subtract(3, "month").startOf("month")),
+    to: t(E(void 0, e).endOf("quarter").subtract(3, "month").endOf("month"), !1)
+  }),
+  [a.TRAILING_QUARTER]: (e) => ({
+    from: t(E(void 0, e).subtract(3, "month").startOf("day")),
+    to: t(E(void 0, e).subtract(1, "day").endOf("day"), !1)
+  }),
+  [a.THIS_QUARTER]: (e) => ({
+    from: t(E(void 0, e).startOf("Q")),
+    to: t(E(void 0, e).endOf("Q"), !1)
+  }),
+  [a.NEXT_QUARTER]: (e) => {
+    const r = E(void 0, e).add(1, "quarter");
+    return {
+      from: t(r.startOf("quarter")),
+      to: t(r.endOf("quarter"), !1)
+    };
+  },
+  [a.LEADING_QUARTER]: (e) => {
+    const r = E(void 0, e);
+    return {
+      from: t(r.startOf("day")),
+      to: t(r.add(3, "month").subtract(1, "day").endOf("day"), !1)
+    };
+  },
+  [a.LAST_YEAR]: (e) => {
+    const r = E(void 0, e).subtract(1, "year");
+    return {
+      from: t(r.startOf("year")),
+      to: t(r.endOf("year"), !1)
+    };
+  },
+  [a.TRAILING_YEAR]: (e) => ({
+    from: t(E(void 0, e).subtract(1, "year").startOf("day")),
+    to: t(E(void 0, e).subtract(1, "day").endOf("day"), !1)
+  }),
+  [a.THIS_YEAR]: (e) => ({
+    from: t(E(void 0, e).startOf("year")),
+    to: t(E(void 0, e).endOf("year"), !1)
+  }),
+  [a.NEXT_YEAR]: (e) => {
+    const r = E(void 0, e).add(1, "year");
+    return {
+      from: t(r.startOf("year")),
+      to: t(r.endOf("year"), !1)
+    };
+  },
+  [a.LEADING_YEAR]: (e) => {
+    const r = E(void 0, e);
+    return {
+      from: t(r.startOf("day")),
+      to: t(r.add(1, "year").subtract(1, "day").endOf("day"), !1)
+    };
+  }
+}, D = ({
+  ranges: e = ["day", "week", "month", "quarter", "year"],
+  value: r,
+  showApply: s = !0,
+  isFutureDatesAllowed: A = !1,
+  timezoneName: _,
+  onChange: R,
+  onSubmit: N
+}) => /* @__PURE__ */ f("div", { className: "flex space-x-2", children: [
+  /* @__PURE__ */ f(O, { size: "medium", value: r, className: "pr-8 leading-5", onChange: (l) => {
+    const o = l.target.value, n = L[o](_);
+    R(o, n);
+  }, children: [
+    /* @__PURE__ */ d("option", { value: "", children: "Relative Date Range" }),
+    e.map((l) => {
+      const o = I[l];
+      return /* @__PURE__ */ d("optgroup", { label: o.label, children: i(o.rangeOptions, A, y).map((n) => /* @__PURE__ */ d("option", { value: n.value, children: n.label }, n.value)) }, l);
+    })
+  ] }),
+  s && /* @__PURE__ */ d(u, { onClick: N, children: "Apply" })
+] });
+export {
+  D as RelativeDateRange,
+  I as dateRanges,
+  T as rangeLabels,
+  a as rangeOptions
+};

package/build/components/DatePicker/UpcomingDatePicker.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+export interface UpcomingDatePickerProps {
+    value?: Date | {
+        from?: Date;
+        to?: Date;
+    } | null;
+    upcomingDates: Date[];
+    onChange: (day: Date, options: Record<string, any>, event: React.MouseEvent) => void;
+    onMonthChange: (month: Date) => void;
+}
+export declare const UpcomingDatePicker: ({ value, upcomingDates, onChange, onMonthChange }: UpcomingDatePickerProps) => React.JSX.Element;

package/build/components/DatePicker/UpcomingDatePicker.js

@@ -0,0 +1,27 @@
+import { jsxs as n, jsx as l } from "react/jsx-runtime";
+import c from "clsx";
+import t from "dayjs";
+const f = ({ value: o, upcomingDates: r, onChange: d, onMonthChange: i }) => /* @__PURE__ */ n("div", { className: "rounded-l-lg border-r border-gray pt-8", children: [
+  /* @__PURE__ */ l("p", { className: "mb-2 px-6 text-lg font-bold", children: "Upcoming" }),
+  (r == null ? void 0 : r.length) > 0 ? /* @__PURE__ */ l("div", { className: "mt-5", children: r == null ? void 0 : r.map((e) => {
+    const m = t(e).isSame(t(o), "day"), s = t(e).format();
+    return /* @__PURE__ */ l(
+      "div",
+      {
+        className: c(
+          "mx-6 mt-3 flex min-w-40 cursor-pointer items-center justify-center",
+          "rounded border border-gray py-3 hover:border-blue hover:bg-blue hover:text-white",
+          { "border-blue bg-blue text-white": m }
+        ),
+        onClick: (b) => {
+          d(e, {}, b), i(e);
+        },
+        children: t(e).format("ddd DD MMMM")
+      },
+      s
+    );
+  }) }) : /* @__PURE__ */ l("div", { className: "mx-6 mt-7 max-w-40 items-center justify-center rounded bg-yellow-lighter p-3", children: "There is no future availability for this product." })
+] });
+export {
+  f as UpcomingDatePicker
+};

package/build/components/Dot/Dot.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+declare const colors: {
+    readonly primary: "bg-primary";
+    readonly secondary: "bg-secondary";
+    readonly success: "bg-success";
+    readonly warning: "bg-warning";
+    readonly danger: "bg-danger";
+    readonly caution: "bg-caution";
+};
+declare const sizes: {
+    readonly small: "h-1 w-1";
+    readonly medium: "h-1.5 w-1.5";
+    readonly large: "h-2 w-2";
+    readonly xlarge: "h-8 w-8";
+};
+type DotColor = keyof typeof colors;
+type DotSize = keyof typeof sizes;
+export interface DotProps extends React.HTMLAttributes<HTMLSpanElement> {
+    color?: DotColor;
+    size?: DotSize;
+    className?: string;
+}
+export declare const Dot: ({ color, size, className, ...rest }: DotProps) => React.JSX.Element;
+export {};

package/build/components/Dot/Dot.js

@@ -0,0 +1,24 @@
+import { jsx as o } from "react/jsx-runtime";
+import a from "clsx";
+const i = {
+  primary: "bg-primary",
+  secondary: "bg-secondary",
+  success: "bg-success",
+  warning: "bg-warning",
+  danger: "bg-danger",
+  caution: "bg-caution"
+}, c = {
+  small: "h-1 w-1",
+  medium: "h-1.5 w-1.5",
+  large: "h-2 w-2",
+  xlarge: "h-8 w-8"
+}, g = ({ color: r = "primary", size: s = "medium", className: e, ...n }) => /* @__PURE__ */ o(
+  "span",
+  {
+    className: a("ui-dot", "inline-block rounded-full text-white", i[r], c[s], e),
+    ...n
+  }
+);
+export {
+  g as Dot
+};

package/build/components/Dot/DotProgress.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+export interface DotProgressProps {
+    total: number;
+    current: number;
+}
+export declare const DotProgress: ({ current, total }: DotProgressProps) => React.JSX.Element | null;

package/build/components/Dot/DotProgress.js

@@ -0,0 +1,10 @@
+import { jsx as m } from "react/jsx-runtime";
+import { range as t } from "lodash-es";
+import { Dot as c } from "./Dot.js";
+const a = ({ current: r, total: o }) => o <= 1 ? null : /* @__PURE__ */ m("div", { className: "w-full space-x-2 text-center", children: t(0, o).map((e) => {
+  const s = r <= 0 ? 0 : r >= o ? r - 1 : r;
+  return /* @__PURE__ */ m(c, { color: e === s ? "primary" : "secondary", size: "medium" }, e);
+}) });
+export {
+  a as DotProgress
+};

package/build/components/Drawer.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+declare const sizes: {
+    readonly small: "w-72";
+    readonly medium: "w-85";
+    readonly large: "w-110";
+    readonly xl: "w-200";
+    readonly "2xl": "w-screen md:max-w-screen-md 2xl:max-w-screen-lg";
+};
+type DrawerSize = keyof typeof sizes;
+type DrawerPosition = "left" | "right";
+export interface DrawerProps {
+    isOpen: boolean;
+    title?: React.ReactNode;
+    size?: DrawerSize;
+    content: React.ReactNode;
+    sideIndent?: number;
+    position?: DrawerPosition;
+    classNames?: {
+        dialog?: string;
+        overlay?: string;
+        dialogContent?: string;
+        children?: string;
+        content?: string;
+    };
+    onClose: (value: boolean) => void;
+}
+export declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;
+export {};