@tecsinapse/cortex-react 1.2.2-beta.1 → 1.2.2-beta.2

package/dist/esm/components/CalendarHeader.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
+import { Button } from './Button.js';
+
+const CalendarHeader = ({
+  onClickPrevButton,
+  onClickNextButton,
+  title
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: "flex flex-row justify-between items-center gap-x-deca bg-miscellaneous-body p-mili",
+      "data-testid": "calendar-header"
+    },
+    /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        onClick: onClickPrevButton,
+        variants: { variant: "text", intent: "secondary", size: "small" },
+        "data-testid": "calendar-header-prev-button"
+      },
+      /* @__PURE__ */ React.createElement(FaChevronLeft, null)
+    ),
+    /* @__PURE__ */ React.createElement("span", { className: "font-bold capitalize" }, title),
+    /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        onClick: onClickNextButton,
+        variants: { variant: "text", intent: "secondary", size: "small" },
+        "data-testid": "calendar-header-next-button"
+      },
+      /* @__PURE__ */ React.createElement(FaChevronRight, null)
+    )
+  );
+};
+
+export { CalendarHeader };

package/dist/esm/components/GroupButton.js

@@ -1,7 +1,8 @@
 import clsx from 'clsx';
 import React from 'react';
-import '../styles/progressBar.js';
+import '../styles/calendar-cell.js';
 import { groupButton } from '../styles/groupButton.js';
+import '../styles/progressBar.js';
 
 const { button, container, active, inactive, firstButton, lastButton } = groupButton();
 const GroupButton = (props) => {

package/dist/esm/components/ProgressBar.js

@@ -1,7 +1,8 @@
 import clsx from 'clsx';
 import React, { useState, useEffect, useCallback } from 'react';
-import { progressBarFilled } from '../styles/progressBar.js';
+import '../styles/calendar-cell.js';
 import '../styles/groupButton.js';
+import { progressBarFilled } from '../styles/progressBar.js';
 
 const ProgressBar = ({
   segments: _segments = 1,

package/dist/esm/components/RangeCalendar.js

@@ -0,0 +1,42 @@
+import { createCalendar, CalendarDate, getLocalTimeZone } from '@internationalized/date';
+import React from 'react';
+import { useLocale, useRangeCalendar } from 'react-aria';
+import { useRangeCalendarState } from 'react-stately';
+import { CalendarGrid } from './CalendarGrid.js';
+import { CalendarHeader } from './CalendarHeader.js';
+
+const RangeCalendar = ({ value, onChange }) => {
+  const { locale } = useLocale();
+  const state = useRangeCalendarState({
+    locale,
+    createCalendar,
+    defaultValue: {
+      start: new CalendarDate(
+        value.start.getFullYear(),
+        value.start.getMonth(),
+        value.start.getDate()
+      ),
+      end: new CalendarDate(
+        value.end.getFullYear(),
+        value.end.getMonth(),
+        value.end.getDate()
+      )
+    },
+    onChange: (value2) => onChange({
+      start: value2.start.toDate(getLocalTimeZone()),
+      end: value2.end.toDate(getLocalTimeZone())
+    })
+  });
+  const ref = React.useRef(null);
+  const { calendarProps, title } = useRangeCalendar({}, state, ref);
+  return /* @__PURE__ */ React.createElement("div", { ...calendarProps, className: "calendar", ref }, /* @__PURE__ */ React.createElement(
+    CalendarHeader,
+    {
+      onClickPrevButton: () => state.focusPreviousPage(),
+      onClickNextButton: () => state.focusNextPage(),
+      title
+    }
+  ), /* @__PURE__ */ React.createElement(CalendarGrid, { state }));
+};
+
+export { RangeCalendar };

package/dist/esm/components/SearchInput.js

@@ -1,25 +1,31 @@
 import React, { useState, useEffect } from 'react';
+import 'clsx';
 import './Badge.js';
-import { Button } from './Button.js';
+import './BaseSnackbar.js';
+import 'react-icons/md';
 import './Card.js';
+import { Button } from './Button.js';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import { useDebouncedState } from '../hooks/useDebouncedState.js';
+import './CalendarCell.js';
+import '@tecsinapse/cortex-core';
+import 'react-icons/fa';
+import 'react-icons/io';
+import './GroupButton.js';
 import './Hint.js';
 import { Input } from './Input.js';
 import './Modal.js';
+import '../styles/calendar-cell.js';
+import '../styles/groupButton.js';
+import '../styles/progressBar.js';
 import './Select.js';
-import './BaseSnackbar.js';
 import './Tag.js';
-import './Toggle.js';
 import './TextArea.js';
-import '@tecsinapse/cortex-core';
-import 'react-icons/md';
-import 'clsx';
-import '../styles/progressBar.js';
-import '../styles/groupButton.js';
-import './GroupButton.js';
-import 'react-icons/io';
+import './Toggle.js';
 import { AiOutlineLoading } from 'react-icons/ai';
 import { IoSearchOutline } from 'react-icons/io5';
-import { useDebouncedState } from '../hooks/useDebouncedState.js';
 
 const inputFace = "bg-white w-full";
 const inputLeft = "flex items-center";

package/dist/esm/hooks/useCalendar.js

@@ -0,0 +1,25 @@
+import { createCalendar, CalendarDate, getLocalTimeZone } from '@internationalized/date';
+import { useLocale, useCalendar as useCalendar$1 } from 'react-aria';
+import { useCalendarState } from 'react-stately';
+
+const useCalendar = ({ value, onChange }) => {
+  const { locale } = useLocale();
+  const state = useCalendarState({
+    locale,
+    createCalendar,
+    defaultValue: new CalendarDate(
+      value.getFullYear(),
+      value.getMonth(),
+      value.getDate()
+    ),
+    onChange: (value2) => onChange(value2.toDate(getLocalTimeZone()))
+  });
+  const { calendarProps, title } = useCalendar$1({}, state);
+  return {
+    calendarProps,
+    title,
+    state
+  };
+};
+
+export { useCalendar };

package/dist/esm/hooks/useCalendarCell.js

@@ -0,0 +1,33 @@
+import { isSameDay } from '@internationalized/date';
+import { useRef } from 'react';
+import { useCalendarCell as useCalendarCell$1 } from 'react-aria';
+
+const useCalendarCell = ({ state, date }) => {
+  const ref = useRef(null);
+  const {
+    cellProps,
+    buttonProps,
+    isSelected,
+    isOutsideVisibleRange,
+    formattedDate
+  } = useCalendarCell$1({ date }, state, ref);
+  const rangeStateHighlitedRange = state?.highlightedRange;
+  const isSameDayStart = rangeStateHighlitedRange ? isSameDay(date, state?.highlightedRange?.start) : void 0;
+  const isSameDayEnd = rangeStateHighlitedRange ? isSameDay(date, state?.highlightedRange?.end) : void 0;
+  const isSelectionStart = isSameDayStart && !isSameDayEnd;
+  const isSelectionEnd = isSameDayEnd && !isSameDayStart;
+  const inRange = date > rangeStateHighlitedRange?.start && date < rangeStateHighlitedRange?.end;
+  return {
+    ref,
+    cellProps,
+    buttonProps,
+    isSelected,
+    isOutsideVisibleRange,
+    formattedDate,
+    isSelectionStart,
+    isSelectionEnd,
+    inRange
+  };
+};
+
+export { useCalendarCell };

package/dist/esm/hooks/useCalendarGrid.js

@@ -0,0 +1,12 @@
+import { useCalendarGrid as useCalendarGrid$1 } from 'react-aria';
+
+const useCalendarGrid = ({ state }) => {
+  const { gridProps, headerProps, weekDays } = useCalendarGrid$1({}, state);
+  return {
+    gridProps,
+    headerProps,
+    weekDays
+  };
+};
+
+export { useCalendarGrid };

package/dist/esm/index.js

@@ -1,21 +1,26 @@
+export { Avatar } from './components/Avatar.js';
 export { Badge, BadgeAnchor } from './components/Badge.js';
+export { BaseSnackbar } from './components/BaseSnackbar.js';
+export { Breadcrumbs } from './components/Breadcrumbs.js';
 export { Button } from './components/Button.js';
+export { Calendar } from './components/Calendar.js';
 export { Card } from './components/Card.js';
+export { DefaultSnack } from './components/DefaultSnack.js';
+export { Drawer } from './components/Drawer.js';
+export { GroupButton } from './components/GroupButton.js';
 export { Hint } from './components/Hint.js';
 export { Box, Face, Input, Left, Right, Root } from './components/Input.js';
 export { Modal } from './components/Modal.js';
+export { ProgressBar } from './components/ProgressBar.js';
+export { RangeCalendar } from './components/RangeCalendar.js';
 export { Select } from './components/Select.js';
-export { BaseSnackbar } from './components/BaseSnackbar.js';
+export { Skeleton } from './components/Skeleton.js';
+export { TCell, TFoot, THead, THeadCell, TRow, TRowHeader, Table, Td } from './components/Table.js';
 export { Tag } from './components/Tag.js';
-export { Toggle } from './components/Toggle.js';
 export { TextArea } from './components/TextArea.js';
-export { TCell, TFoot, THead, THeadCell, TRow, TRowHeader, Table, Td } from './components/Table.js';
-export { Drawer } from './components/Drawer.js';
-export { Breadcrumbs } from './components/Breadcrumbs.js';
-export { Avatar } from './components/Avatar.js';
-export { Skeleton } from './components/Skeleton.js';
-export { ProgressBar } from './components/ProgressBar.js';
-export { GroupButton } from './components/GroupButton.js';
-export { DefaultSnack } from './components/DefaultSnack.js';
+export { Toggle } from './components/Toggle.js';
 export { SnackbarSonner } from './service/SnackbarSonner.js';
+export { useCalendar } from './hooks/useCalendar.js';
+export { useCalendarCell } from './hooks/useCalendarCell.js';
+export { useCalendarGrid } from './hooks/useCalendarGrid.js';
 export { useDebouncedState } from './hooks/useDebouncedState.js';

package/dist/esm/service/SnackbarSonner.js

@@ -1,23 +1,29 @@
 import { toast } from 'sonner';
 import React from 'react';
+import 'clsx';
 import '../components/Badge.js';
-import '../components/Button.js';
+import '../components/BaseSnackbar.js';
+import 'react-icons/md';
 import '../components/Card.js';
+import '../components/Button.js';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import '../components/CalendarCell.js';
+import '@tecsinapse/cortex-core';
+import 'react-icons/fa';
+import { DefaultSnack } from '../components/DefaultSnack.js';
+import '../components/GroupButton.js';
 import '../components/Hint.js';
 import '../components/Input.js';
 import '../components/Modal.js';
+import '../styles/calendar-cell.js';
+import '../styles/groupButton.js';
+import '../styles/progressBar.js';
 import '../components/Select.js';
-import '../components/BaseSnackbar.js';
 import '../components/Tag.js';
-import '../components/Toggle.js';
 import '../components/TextArea.js';
-import '@tecsinapse/cortex-core';
-import 'react-icons/md';
-import 'clsx';
-import '../styles/progressBar.js';
-import '../styles/groupButton.js';
-import '../components/GroupButton.js';
-import { DefaultSnack } from '../components/DefaultSnack.js';
+import '../components/Toggle.js';
 
 class SnackbarSonner {
   custom(Component, options) {

package/dist/esm/styles/calendar-cell.js

@@ -0,0 +1,38 @@
+import { tv } from 'tailwind-variants';
+
+const calendarCell = tv({
+  slots: {
+    cell: "text-center rounded-mili text-black",
+    button: "flex aspect-square items-center justify-center"
+  },
+  variants: {
+    isSelected: {
+      true: {
+        cell: "bg-primary-medium text-white"
+      }
+    },
+    isSelectionStart: {
+      true: {
+        cell: "bg-primary-medium rounded-r-none text-white"
+      }
+    },
+    isSelectionEnd: {
+      true: {
+        cell: "bg-primary-medium rounded-l-none text-white"
+      }
+    },
+    inRange: {
+      true: {
+        cell: "bg-primary-light rounded-none text-black"
+      }
+    },
+    isOutsideVisibleRange: {
+      true: {
+        cell: "text-secondary-light cursor-default",
+        button: "cursor-default"
+      }
+    }
+  }
+});
+
+export { calendarCell };

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

@@ -0,0 +1,6 @@
+interface CalendarProps {
+    value: Date;
+    onChange: (value: Date) => void;
+}
+export declare const Calendar: ({ value, onChange }: CalendarProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,8 @@
+import { CalendarDate } from '@internationalized/date';
+import { CalendarState, RangeCalendarState } from 'react-stately';
+interface CalendarCellProps {
+    state: CalendarState | RangeCalendarState;
+    date: CalendarDate;
+}
+export declare const CalendarCell: ({ state, date }: CalendarCellProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+import { CalendarState, RangeCalendarState } from 'react-stately';
+interface CalendarGridProps {
+    state: CalendarState | RangeCalendarState;
+}
+export declare const CalendarGrid: ({ state }: CalendarGridProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+import { CalendarState, RangeCalendarState } from 'react-stately';
+interface CalendarGridBodyRowsProps {
+    state: CalendarState | RangeCalendarState;
+}
+export declare const CalendarGridBodyRows: ({ state }: CalendarGridBodyRowsProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,5 @@
+interface CalendarGridHeaderRowProps {
+    weekDays: string[];
+}
+export declare const CalendarGridHeaderRow: ({ weekDays, }: CalendarGridHeaderRowProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+export interface CalendarHeaderProps {
+    onClickPrevButton: () => void;
+    onClickNextButton: () => void;
+    title: string;
+}
+export declare const CalendarHeader: ({ onClickPrevButton, onClickNextButton, title, }: CalendarHeaderProps) => JSX.Element;

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

@@ -0,0 +1,10 @@
+export type DateRange = {
+    start: Date;
+    end: Date;
+};
+interface RangeCalendarProps {
+    onChange: (value: DateRange) => void;
+    value: DateRange;
+}
+export declare const RangeCalendar: ({ value, onChange }: RangeCalendarProps) => JSX.Element;
+export {};

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

@@ -1,19 +1,21 @@
+export * from './Avatar';
 export * from './Badge';
+export * from './BaseSnackbar';
+export * from './Breadcrumbs';
 export * from './Button';
+export * from './Calendar';
 export * from './Card';
+export * from './DefaultSnack';
+export * from './Drawer';
+export * from './GroupButton';
 export * from './Hint';
 export * from './Input';
 export * from './Modal';
+export * from './ProgressBar';
+export * from './RangeCalendar';
 export { default as Select } from './Select';
-export * from './BaseSnackbar';
+export * from './Skeleton';
+export * from './Table';
 export * from './Tag';
-export * from './Toggle';
 export * from './TextArea';
-export * from './Table';
-export * from './Drawer';
-export * from './Breadcrumbs';
-export * from './Avatar';
-export * from './Skeleton';
-export * from './ProgressBar';
-export * from './GroupButton';
-export * from './DefaultSnack';
+export * from './Toggle';

package/dist/types/hooks/index.d.ts

@@ -1 +1,4 @@
+export * from './useCalendar';
+export * from './useCalendarCell';
+export * from './useCalendarGrid';
 export * from './useDebouncedState';

package/dist/types/hooks/useCalendar.d.ts

@@ -0,0 +1,10 @@
+interface useCalendarProps {
+    value: Date;
+    onChange: (value: Date) => void;
+}
+export declare const useCalendar: ({ value, onChange }: useCalendarProps) => {
+    calendarProps: import("@react-types/shared").DOMAttributes<import("@react-types/shared").FocusableElement>;
+    title: string;
+    state: import("react-stately").CalendarState;
+};
+export {};

package/dist/types/hooks/useCalendarCell.d.ts

@@ -0,0 +1,18 @@
+import { CalendarDate } from '@internationalized/date';
+import { CalendarState, RangeCalendarState } from 'react-stately';
+interface useCalendarCellProps {
+    state: CalendarState | RangeCalendarState;
+    date: CalendarDate;
+}
+export declare const useCalendarCell: ({ state, date }: useCalendarCellProps) => {
+    ref: import("react").MutableRefObject<null>;
+    cellProps: import("@react-types/shared").DOMAttributes<import("@react-types/shared").FocusableElement>;
+    buttonProps: import("@react-types/shared").DOMAttributes<import("@react-types/shared").FocusableElement>;
+    isSelected: boolean;
+    isOutsideVisibleRange: boolean;
+    formattedDate: string;
+    isSelectionStart: boolean | undefined;
+    isSelectionEnd: boolean | undefined;
+    inRange: boolean;
+};
+export {};

package/dist/types/hooks/useCalendarGrid.d.ts

@@ -0,0 +1,10 @@
+import { CalendarState, RangeCalendarState } from 'react-stately';
+interface useCalendarGridProps {
+    state: CalendarState | RangeCalendarState;
+}
+export declare const useCalendarGrid: ({ state }: useCalendarGridProps) => {
+    gridProps: import("@react-types/shared").DOMAttributes<import("@react-types/shared").FocusableElement>;
+    headerProps: import("@react-types/shared").DOMAttributes<import("@react-types/shared").FocusableElement>;
+    weekDays: string[];
+};
+export {};

package/dist/types/styles/calendar-cell.d.ts

@@ -0,0 +1,199 @@
+export declare const calendarCell: import("tailwind-variants").TVReturnType<{
+    isSelected: {
+        true: {
+            cell: string;
+        };
+    };
+    isSelectionStart: {
+        true: {
+            cell: string;
+        };
+    };
+    isSelectionEnd: {
+        true: {
+            cell: string;
+        };
+    };
+    inRange: {
+        true: {
+            cell: string;
+        };
+    };
+    isOutsideVisibleRange: {
+        true: {
+            cell: string;
+            button: string;
+        };
+    };
+}, {
+    cell: string;
+    button: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    isSelected: {
+        true: {
+            cell: string;
+        };
+    };
+    isSelectionStart: {
+        true: {
+            cell: string;
+        };
+    };
+    isSelectionEnd: {
+        true: {
+            cell: string;
+        };
+    };
+    inRange: {
+        true: {
+            cell: string;
+        };
+    };
+    isOutsideVisibleRange: {
+        true: {
+            cell: string;
+            button: string;
+        };
+    };
+}, {
+    isSelected: {
+        true: {
+            cell: string;
+        };
+    };
+    isSelectionStart: {
+        true: {
+            cell: string;
+        };
+    };
+    isSelectionEnd: {
+        true: {
+            cell: string;
+        };
+    };
+    inRange: {
+        true: {
+            cell: string;
+        };
+    };
+    isOutsideVisibleRange: {
+        true: {
+            cell: string;
+            button: string;
+        };
+    };
+}>, {
+    isSelected: {
+        true: {
+            cell: string;
+        };
+    };
+    isSelectionStart: {
+        true: {
+            cell: string;
+        };
+    };
+    isSelectionEnd: {
+        true: {
+            cell: string;
+        };
+    };
+    inRange: {
+        true: {
+            cell: string;
+        };
+    };
+    isOutsideVisibleRange: {
+        true: {
+            cell: string;
+            button: string;
+        };
+    };
+}, {
+    cell: string;
+    button: string;
+}, import("tailwind-variants").TVReturnType<{
+    isSelected: {
+        true: {
+            cell: string;
+        };
+    };
+    isSelectionStart: {
+        true: {
+            cell: string;
+        };
+    };
+    isSelectionEnd: {
+        true: {
+            cell: string;
+        };
+    };
+    inRange: {
+        true: {
+            cell: string;
+        };
+    };
+    isOutsideVisibleRange: {
+        true: {
+            cell: string;
+            button: string;
+        };
+    };
+}, {
+    cell: string;
+    button: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    isSelected: {
+        true: {
+            cell: string;
+        };
+    };
+    isSelectionStart: {
+        true: {
+            cell: string;
+        };
+    };
+    isSelectionEnd: {
+        true: {
+            cell: string;
+        };
+    };
+    inRange: {
+        true: {
+            cell: string;
+        };
+    };
+    isOutsideVisibleRange: {
+        true: {
+            cell: string;
+            button: string;
+        };
+    };
+}, {
+    isSelected: {
+        true: {
+            cell: string;
+        };
+    };
+    isSelectionStart: {
+        true: {
+            cell: string;
+        };
+    };
+    isSelectionEnd: {
+        true: {
+            cell: string;
+        };
+    };
+    inRange: {
+        true: {
+            cell: string;
+        };
+    };
+    isOutsideVisibleRange: {
+        true: {
+            cell: string;
+            button: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;