@quen-ui/components 0.0.14 → 1.0.0

package/dist/Calendar/DaysLevel.cjs.js

@@ -0,0 +1,93 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const styles = require("./styles.cjs.js");
+const helpers = require("./helpers.cjs.js");
+const Title = require("../typography/Title/Title.cjs.js");
+const DaysLevel = ({
+  locale,
+  days,
+  startDate,
+  endDate,
+  range,
+  today,
+  selectedDate,
+  onDateSelect,
+  renderDay,
+  getDayProps,
+  minDate,
+  maxDate
+}) => {
+  const [hoverDate, setHoverDate] = React.useState(null);
+  const min = React.useMemo(() => {
+    return minDate ? new Date(minDate) : null;
+  }, [minDate]);
+  const max = React.useMemo(() => {
+    return maxDate ? new Date(maxDate) : null;
+  }, [maxDate]);
+  const isHoverRange = (date) => {
+    if (!startDate || endDate || !hoverDate) return false;
+    if (hoverDate > startDate) return date > startDate && date < hoverDate;
+    return date < startDate && date > hoverDate;
+  };
+  const isInRange = (date) => {
+    if (!startDate || !endDate) return false;
+    return date > startDate && date < endDate;
+  };
+  const isDisabled = (date) => {
+    if (min && helpers.isBefore(date, min)) return true;
+    if (max && helpers.isAfter(date, max)) return true;
+    return false;
+  };
+  const handleDayClick = (date, isCurrentMonth) => {
+    if (min && helpers.isBefore(date, min)) return;
+    if (max && helpers.isAfter(date, max)) return;
+    onDateSelect(date, isCurrentMonth);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(styles.CalendarGrid, { children: [
+    locale.weekdays.map((day) => /* @__PURE__ */ jsxRuntime.jsx(Title, { align: "center", size: "xs", as: "div", children: day }, day)),
+    days.map(({ date, isCurrentMonth }) => {
+      const isStart = helpers.getDate(startDate) === helpers.getDate(date);
+      const isEnd = helpers.getDate(endDate) === helpers.getDate(date);
+      const isSel = helpers.getDate(selectedDate) === helpers.getDate(date);
+      const isToday = helpers.getDate(date) === helpers.getDate(today);
+      if (renderDay) {
+        return renderDay(date, {
+          isCurrentMonth,
+          isHoverRange: isHoverRange(date),
+          isInRange: isInRange(date),
+          isRangeEnd: isEnd && startDate != null,
+          isToday,
+          isRangeStart: isStart && endDate != null,
+          isSelected: range ? isStart || isEnd : isSel,
+          isDisabled: isDisabled(date),
+          onClick: () => handleDayClick(date, isCurrentMonth),
+          onMouseEnter: () => setHoverDate(date),
+          onMouseLeave: () => setHoverDate(null)
+        });
+      }
+      const dayProps = getDayProps?.(date);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        styles.DayStyled,
+        {
+          "aria-disabled": !isCurrentMonth,
+          "aria-label": `Day ${date.getDate()}`,
+          isHoverRange: dayProps?.isHoverRange ?? isHoverRange(date),
+          isInRange: dayProps?.isInRange ?? isInRange(date),
+          isSelected: dayProps?.isSelected ? dayProps?.isSelected : range ? isStart || isEnd : isSel,
+          isRangeStart: dayProps?.isRangeStart ?? (isStart && endDate != null),
+          isRangeEnd: dayProps?.isRangeEnd ?? (isEnd && startDate != null),
+          isCurrentMonth: dayProps?.isCurrentMonth ?? isCurrentMonth,
+          isToday: dayProps?.isToday ?? isToday,
+          isDisabled: dayProps?.isDisabled ?? isDisabled(date),
+          onClick: dayProps?.onClick ?? (() => handleDayClick(date, isCurrentMonth)),
+          onMouseEnter: dayProps?.onMouseEnter ?? (() => setHoverDate(date)),
+          onMouseLeave: dayProps?.onMouseLeave ?? (() => setHoverDate(null)),
+          children: date.getDate()
+        },
+        date.toISOString()
+      );
+    })
+  ] });
+};
+module.exports = DaysLevel;

package/dist/Calendar/DaysLevel.d.ts

@@ -0,0 +1,3 @@
+import { ICalendarDaysLevelProps } from './types';
+declare const DaysLevel: ({ locale, days, startDate, endDate, range, today, selectedDate, onDateSelect, renderDay, getDayProps, minDate, maxDate }: ICalendarDaysLevelProps) => import("react/jsx-runtime").JSX.Element;
+export default DaysLevel;

package/dist/Calendar/DaysLevel.es.js

@@ -0,0 +1,94 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
+import { CalendarGrid, DayStyled } from "./styles.es.js";
+import { getDate, isBefore, isAfter } from "./helpers.es.js";
+import Title from "../typography/Title/Title.es.js";
+const DaysLevel = ({
+  locale,
+  days,
+  startDate,
+  endDate,
+  range,
+  today,
+  selectedDate,
+  onDateSelect,
+  renderDay,
+  getDayProps,
+  minDate,
+  maxDate
+}) => {
+  const [hoverDate, setHoverDate] = useState(null);
+  const min = useMemo(() => {
+    return minDate ? new Date(minDate) : null;
+  }, [minDate]);
+  const max = useMemo(() => {
+    return maxDate ? new Date(maxDate) : null;
+  }, [maxDate]);
+  const isHoverRange = (date) => {
+    if (!startDate || endDate || !hoverDate) return false;
+    if (hoverDate > startDate) return date > startDate && date < hoverDate;
+    return date < startDate && date > hoverDate;
+  };
+  const isInRange = (date) => {
+    if (!startDate || !endDate) return false;
+    return date > startDate && date < endDate;
+  };
+  const isDisabled = (date) => {
+    if (min && isBefore(date, min)) return true;
+    if (max && isAfter(date, max)) return true;
+    return false;
+  };
+  const handleDayClick = (date, isCurrentMonth) => {
+    if (min && isBefore(date, min)) return;
+    if (max && isAfter(date, max)) return;
+    onDateSelect(date, isCurrentMonth);
+  };
+  return /* @__PURE__ */ jsxs(CalendarGrid, { children: [
+    locale.weekdays.map((day) => /* @__PURE__ */ jsx(Title, { align: "center", size: "xs", as: "div", children: day }, day)),
+    days.map(({ date, isCurrentMonth }) => {
+      const isStart = getDate(startDate) === getDate(date);
+      const isEnd = getDate(endDate) === getDate(date);
+      const isSel = getDate(selectedDate) === getDate(date);
+      const isToday = getDate(date) === getDate(today);
+      if (renderDay) {
+        return renderDay(date, {
+          isCurrentMonth,
+          isHoverRange: isHoverRange(date),
+          isInRange: isInRange(date),
+          isRangeEnd: isEnd && startDate != null,
+          isToday,
+          isRangeStart: isStart && endDate != null,
+          isSelected: range ? isStart || isEnd : isSel,
+          isDisabled: isDisabled(date),
+          onClick: () => handleDayClick(date, isCurrentMonth),
+          onMouseEnter: () => setHoverDate(date),
+          onMouseLeave: () => setHoverDate(null)
+        });
+      }
+      const dayProps = getDayProps?.(date);
+      return /* @__PURE__ */ jsx(
+        DayStyled,
+        {
+          "aria-disabled": !isCurrentMonth,
+          "aria-label": `Day ${date.getDate()}`,
+          isHoverRange: dayProps?.isHoverRange ?? isHoverRange(date),
+          isInRange: dayProps?.isInRange ?? isInRange(date),
+          isSelected: dayProps?.isSelected ? dayProps?.isSelected : range ? isStart || isEnd : isSel,
+          isRangeStart: dayProps?.isRangeStart ?? (isStart && endDate != null),
+          isRangeEnd: dayProps?.isRangeEnd ?? (isEnd && startDate != null),
+          isCurrentMonth: dayProps?.isCurrentMonth ?? isCurrentMonth,
+          isToday: dayProps?.isToday ?? isToday,
+          isDisabled: dayProps?.isDisabled ?? isDisabled(date),
+          onClick: dayProps?.onClick ?? (() => handleDayClick(date, isCurrentMonth)),
+          onMouseEnter: dayProps?.onMouseEnter ?? (() => setHoverDate(date)),
+          onMouseLeave: dayProps?.onMouseLeave ?? (() => setHoverDate(null)),
+          children: date.getDate()
+        },
+        date.toISOString()
+      );
+    })
+  ] });
+};
+export {
+  DaysLevel as default
+};

package/dist/Calendar/MonthLevel.cjs.js

@@ -0,0 +1,23 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const styles = require("./styles.cjs.js");
+const MonthLevel = ({
+  locale,
+  currentMonth,
+  setLevelMode,
+  setCurrentMonth
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(styles.CalendarGrid, { style: { gridTemplateColumns: "repeat(3, 1fr)" }, children: locale.months.map((month, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    styles.MonthStyled,
+    {
+      isSelected: index === currentMonth.getMonth(),
+      onClick: () => {
+        setCurrentMonth(new Date(currentMonth.getFullYear(), index));
+        setLevelMode("days");
+      },
+      children: month.slice(0, 3)
+    },
+    month
+  )) });
+};
+module.exports = MonthLevel;

package/dist/Calendar/MonthLevel.d.ts

@@ -0,0 +1,3 @@
+import { ICalendarMonthLevelProps } from './types';
+declare const MonthLevel: ({ locale, currentMonth, setLevelMode, setCurrentMonth }: ICalendarMonthLevelProps) => import("react/jsx-runtime").JSX.Element;
+export default MonthLevel;

package/dist/Calendar/MonthLevel.es.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { CalendarGrid, MonthStyled } from "./styles.es.js";
+const MonthLevel = ({
+  locale,
+  currentMonth,
+  setLevelMode,
+  setCurrentMonth
+}) => {
+  return /* @__PURE__ */ jsx(CalendarGrid, { style: { gridTemplateColumns: "repeat(3, 1fr)" }, children: locale.months.map((month, index) => /* @__PURE__ */ jsx(
+    MonthStyled,
+    {
+      isSelected: index === currentMonth.getMonth(),
+      onClick: () => {
+        setCurrentMonth(new Date(currentMonth.getFullYear(), index));
+        setLevelMode("days");
+      },
+      children: month.slice(0, 3)
+    },
+    month
+  )) });
+};
+export {
+  MonthLevel as default
+};

package/dist/Calendar/YearsLevel.cjs.js

@@ -0,0 +1,24 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const styles = require("./styles.cjs.js");
+const YearsLevel = ({
+  currentMonth,
+  setLevelMode,
+  setCurrentMonth
+}) => {
+  const startYear = Math.floor(currentMonth.getFullYear() / 10) * 10;
+  const years = Array.from({ length: 12 }, (_, i) => startYear - 1 + i);
+  return /* @__PURE__ */ jsxRuntime.jsx(styles.CalendarGrid, { style: { gridTemplateColumns: "repeat(3, 1fr)" }, children: years.map((year) => /* @__PURE__ */ jsxRuntime.jsx(
+    styles.MonthStyled,
+    {
+      isSelected: year === currentMonth.getFullYear(),
+      onClick: () => {
+        setCurrentMonth(new Date(year, currentMonth.getMonth()));
+        setLevelMode("months");
+      },
+      children: year
+    },
+    year
+  )) });
+};
+module.exports = YearsLevel;

package/dist/Calendar/YearsLevel.d.ts

@@ -0,0 +1,3 @@
+import { ICalendarYearsLevelProps } from './types';
+declare const YearsLevel: ({ currentMonth, setLevelMode, setCurrentMonth }: ICalendarYearsLevelProps) => import("react/jsx-runtime").JSX.Element;
+export default YearsLevel;

package/dist/Calendar/YearsLevel.es.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { CalendarGrid, MonthStyled } from "./styles.es.js";
+const YearsLevel = ({
+  currentMonth,
+  setLevelMode,
+  setCurrentMonth
+}) => {
+  const startYear = Math.floor(currentMonth.getFullYear() / 10) * 10;
+  const years = Array.from({ length: 12 }, (_, i) => startYear - 1 + i);
+  return /* @__PURE__ */ jsx(CalendarGrid, { style: { gridTemplateColumns: "repeat(3, 1fr)" }, children: years.map((year) => /* @__PURE__ */ jsx(
+    MonthStyled,
+    {
+      isSelected: year === currentMonth.getFullYear(),
+      onClick: () => {
+        setCurrentMonth(new Date(year, currentMonth.getMonth()));
+        setLevelMode("months");
+      },
+      children: year
+    },
+    year
+  )) });
+};
+export {
+  YearsLevel as default
+};

package/dist/Calendar/helpers.cjs.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const generateCalendarDays = (year, month) => {
+  const firstDayOfMonth = new Date(year, month, 1);
+  const lastDayOfMonth = new Date(year, month + 1, 0);
+  const days = [];
+  let firstWeekday = firstDayOfMonth.getDay();
+  if (firstWeekday === 0) firstWeekday = 7;
+  for (let i = firstWeekday - 1; i > 0; i--) {
+    const d = new Date(year, month, 1 - i);
+    days.push({ date: d, isCurrentMonth: false });
+  }
+  for (let i = 1; i <= lastDayOfMonth.getDate(); i++) {
+    const d = new Date(year, month, i);
+    days.push({ date: d, isCurrentMonth: true });
+  }
+  while (days.length % 7 !== 0) {
+    const nextDay = new Date(
+      year,
+      month,
+      lastDayOfMonth.getDate() + (days.length - (firstWeekday - 1) + 1)
+    );
+    days.push({ date: nextDay, isCurrentMonth: false });
+  }
+  return days;
+};
+const defaultLocale = {
+  weekdays: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
+  months: [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December"
+  ]
+};
+const isBefore = (a, b) => {
+  return a.getTime() < b.getTime();
+};
+const isAfter = (a, b) => {
+  return a.getTime() > b.getTime();
+};
+const getDate = (date) => {
+  if (date) {
+    return date.toLocaleDateString("en-CA");
+  }
+  return "";
+};
+exports.defaultLocale = defaultLocale;
+exports.generateCalendarDays = generateCalendarDays;
+exports.getDate = getDate;
+exports.isAfter = isAfter;
+exports.isBefore = isBefore;

package/dist/Calendar/helpers.d.ts

@@ -0,0 +1,9 @@
+import { ICalendarLocale } from './types';
+export declare const generateCalendarDays: (year: number, month: number) => {
+    date: Date;
+    isCurrentMonth: boolean;
+}[];
+export declare const defaultLocale: ICalendarLocale;
+export declare const isBefore: (a: Date, b: Date) => boolean;
+export declare const isAfter: (a: Date, b: Date) => boolean;
+export declare const getDate: (date?: Date | null) => string;

package/dist/Calendar/helpers.es.js

@@ -0,0 +1,60 @@
+const generateCalendarDays = (year, month) => {
+  const firstDayOfMonth = new Date(year, month, 1);
+  const lastDayOfMonth = new Date(year, month + 1, 0);
+  const days = [];
+  let firstWeekday = firstDayOfMonth.getDay();
+  if (firstWeekday === 0) firstWeekday = 7;
+  for (let i = firstWeekday - 1; i > 0; i--) {
+    const d = new Date(year, month, 1 - i);
+    days.push({ date: d, isCurrentMonth: false });
+  }
+  for (let i = 1; i <= lastDayOfMonth.getDate(); i++) {
+    const d = new Date(year, month, i);
+    days.push({ date: d, isCurrentMonth: true });
+  }
+  while (days.length % 7 !== 0) {
+    const nextDay = new Date(
+      year,
+      month,
+      lastDayOfMonth.getDate() + (days.length - (firstWeekday - 1) + 1)
+    );
+    days.push({ date: nextDay, isCurrentMonth: false });
+  }
+  return days;
+};
+const defaultLocale = {
+  weekdays: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
+  months: [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December"
+  ]
+};
+const isBefore = (a, b) => {
+  return a.getTime() < b.getTime();
+};
+const isAfter = (a, b) => {
+  return a.getTime() > b.getTime();
+};
+const getDate = (date) => {
+  if (date) {
+    return date.toLocaleDateString("en-CA");
+  }
+  return "";
+};
+export {
+  defaultLocale,
+  generateCalendarDays,
+  getDate,
+  isAfter,
+  isBefore
+};

package/dist/Calendar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Calendar } from './Calendar';
+export type { ICalendarLocale, TCalendarProps, TCalendarRenderDay, TGetDayProps, TCalendarRangeProps, TCalendarSingleProps, TCalendarBaseProps } from './types';

package/dist/Calendar/styles.cjs.js

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const polished = require("polished");
+const Button = require("../Button/Button.cjs.js");
+const CalendarStyled = styled.div`
+  width: max-content;
+  padding: 16px;
+  background: ${({ theme }) => theme.components.Calendar.background};
+  border: 1px solid ${({ theme }) => theme.components.Calendar.borderColor};
+  border-radius: ${({ theme }) => theme.components.Calendar.radius};
+  z-index: 100;
+  color: ${({ theme }) => theme.textColor};
+  overflow: hidden;
+
+  .quen-ui__calendar__icon--right {
+    transform: rotateZ(270deg);
+  }
+
+  .quen-ui__calendar__icon--left {
+    transform: rotateZ(90deg);
+  }
+`;
+const CalendarGridWrapper = styled.div`
+  margin-top: 8px;
+  display: flex;
+  width: 100%;
+`;
+const CalendarGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(7, 32px);
+  gap: 4px;
+  min-width: 50%;
+  position: relative;
+`;
+const DayStyled = styled(Button).attrs({ view: "icon" }).withConfig({
+  shouldForwardProp: (prop) => ![
+    "isSelected",
+    "isCurrentMonth",
+    "isToday",
+    "isRangeStart",
+    "isRangeEnd",
+    "isInRange",
+    "isHoverRange",
+    "isDisabled"
+  ].includes(prop)
+})`
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 1;
+
+  cursor: ${({ isCurrentMonth, isDisabled }) => isCurrentMonth && !isDisabled ? "pointer" : "default"};
+  font-weight: ${({ isToday, isSelected }) => isToday && !isSelected ? "bold" : "normal"};
+  opacity: ${({ isDisabled }) => isDisabled ? 0.3 : 1};
+
+  ${({ theme, isSelected, isCurrentMonth }) => {
+  const { secondaryColor } = theme.components.Calendar;
+  console.log(secondaryColor);
+  return styled.css`
+      color: ${isSelected ? "#fff" : isCurrentMonth ? theme.textColor : secondaryColor};
+    `;
+}}
+  
+
+  ${({ theme, isToday, isSelected }) => isToday && !isSelected && styled.css`
+      border: 1px solid ${theme.components.Calendar.activeBackground};
+      border-radius: ${theme.components.Calendar.radius};
+    `}
+
+  ${({ theme, isInRange, isHoverRange }) => {
+  if (isHoverRange || isInRange) {
+    return styled.css`
+        background: ${polished.rgba(theme.components.Calendar.activeBackground, 0.5)};
+        color: white;
+      `;
+  }
+}}
+
+  ${({ theme, isRangeStart, isRangeEnd, isSelected }) => {
+  const { activeBackground, radius } = theme.components.Calendar;
+  if (isSelected) {
+    return styled.css`
+        background: ${activeBackground};
+        border-radius: ${radius};
+      `;
+  }
+  if (isRangeStart) {
+    return styled.css`
+        background: ${activeBackground};
+        border-radius: ${radius} 0 0 ${radius};
+      `;
+  }
+  if (isRangeEnd) {
+    return styled.css`
+        background: ${activeBackground};
+        border-radius: 0 ${radius} ${radius} 0;
+      `;
+  }
+}}
+`;
+const MonthStyled = styled(Button).attrs({ view: "icon" }).withConfig({
+  shouldForwardProp: (prop) => !["isSelected"].includes(prop)
+})`
+  background: ${({ theme, isSelected }) => isSelected && theme.components.Calendar.activeBackground};
+  color: ${({ theme, isSelected }) => isSelected ? "#fff" : theme.textColor};
+  width: 5rem;
+`;
+exports.CalendarGrid = CalendarGrid;
+exports.CalendarGridWrapper = CalendarGridWrapper;
+exports.CalendarStyled = CalendarStyled;
+exports.DayStyled = DayStyled;
+exports.MonthStyled = MonthStyled;

package/dist/Calendar/styles.d.ts

@@ -0,0 +1,16 @@
+export declare const CalendarStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CalendarGridWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CalendarGrid: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const DayStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('styled-components').FastOmit<import('styled-components/dist/types').Substitute<import('..').IButtonProps, import('..').IButtonProps>, never>, {
+    isSelected?: boolean;
+    isCurrentMonth?: boolean;
+    isToday?: boolean;
+    isRangeStart?: boolean;
+    isRangeEnd?: boolean;
+    isInRange?: boolean;
+    isHoverRange?: boolean;
+    isDisabled?: boolean;
+}>> & string & Omit<import('react').FC<import('..').IButtonProps>, keyof import('react').Component<any, {}, any>>;
+export declare const MonthStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('styled-components').FastOmit<import('styled-components/dist/types').Substitute<import('..').IButtonProps, import('..').IButtonProps>, never>, {
+    isSelected: boolean;
+}>> & string & Omit<import('react').FC<import('..').IButtonProps>, keyof import('react').Component<any, {}, any>>;