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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (81) hide show
  1. package/dist/cjs/components/BaseSnackbar.js +13 -0
  2. package/dist/cjs/components/Calendar.js +22 -0
  3. package/dist/cjs/components/CalendarCell.js +51 -0
  4. package/dist/cjs/components/CalendarGrid.js +23 -0
  5. package/dist/cjs/components/CalendarGridBodyRows.js +12 -0
  6. package/dist/cjs/components/CalendarGridHeaderRow.js +12 -0
  7. package/dist/cjs/components/CalendarHeader.js +40 -0
  8. package/dist/cjs/components/DefaultSnack.js +27 -0
  9. package/dist/cjs/components/GroupButton.js +2 -1
  10. package/dist/cjs/components/ProgressBar.js +2 -1
  11. package/dist/cjs/components/RangeCalendar.js +44 -0
  12. package/dist/cjs/components/SearchInput.js +19 -12
  13. package/dist/cjs/components/Select.js +4 -4
  14. package/dist/cjs/components/Skeleton.js +1 -0
  15. package/dist/cjs/components/Table.js +8 -14
  16. package/dist/cjs/hooks/useCalendar.js +27 -0
  17. package/dist/cjs/hooks/useCalendarCell.js +35 -0
  18. package/dist/cjs/hooks/useCalendarGrid.js +14 -0
  19. package/dist/cjs/index.js +35 -20
  20. package/dist/cjs/service/SnackbarSonner.js +54 -0
  21. package/dist/cjs/styles/calendar-cell.js +40 -0
  22. package/dist/esm/components/BaseSnackbar.js +11 -0
  23. package/dist/esm/components/Calendar.js +20 -0
  24. package/dist/esm/components/CalendarCell.js +49 -0
  25. package/dist/esm/components/CalendarGrid.js +21 -0
  26. package/dist/esm/components/CalendarGridBodyRows.js +10 -0
  27. package/dist/esm/components/CalendarGridHeaderRow.js +10 -0
  28. package/dist/esm/components/CalendarHeader.js +38 -0
  29. package/dist/esm/components/DefaultSnack.js +25 -0
  30. package/dist/esm/components/GroupButton.js +2 -1
  31. package/dist/esm/components/ProgressBar.js +2 -1
  32. package/dist/esm/components/RangeCalendar.js +42 -0
  33. package/dist/esm/components/SearchInput.js +19 -12
  34. package/dist/esm/components/Select.js +4 -4
  35. package/dist/esm/components/Skeleton.js +1 -0
  36. package/dist/esm/components/Table.js +9 -14
  37. package/dist/esm/hooks/useCalendar.js +25 -0
  38. package/dist/esm/hooks/useCalendarCell.js +33 -0
  39. package/dist/esm/hooks/useCalendarGrid.js +12 -0
  40. package/dist/esm/index.js +17 -9
  41. package/dist/esm/service/SnackbarSonner.js +52 -0
  42. package/dist/esm/styles/calendar-cell.js +38 -0
  43. package/dist/types/components/BaseSnackbar.d.ts +9 -0
  44. package/dist/types/components/Calendar.d.ts +6 -0
  45. package/dist/types/components/CalendarCell.d.ts +8 -0
  46. package/dist/types/components/CalendarGrid.d.ts +6 -0
  47. package/dist/types/components/CalendarGridBodyRows.d.ts +6 -0
  48. package/dist/types/components/CalendarGridHeaderRow.d.ts +5 -0
  49. package/dist/types/components/CalendarHeader.d.ts +6 -0
  50. package/dist/types/components/DefaultSnack.d.ts +6 -0
  51. package/dist/types/components/RangeCalendar.d.ts +10 -0
  52. package/dist/types/components/Table.d.ts +0 -1
  53. package/dist/types/components/index.d.ts +12 -9
  54. package/dist/types/hooks/index.d.ts +3 -0
  55. package/dist/types/hooks/useCalendar.d.ts +10 -0
  56. package/dist/types/hooks/useCalendarCell.d.ts +18 -0
  57. package/dist/types/hooks/useCalendarGrid.d.ts +10 -0
  58. package/dist/types/index.d.ts +2 -0
  59. package/dist/types/provider/SnackbarProvider.d.ts +10 -0
  60. package/dist/types/service/ISnackbar.d.ts +7 -0
  61. package/dist/types/service/SnackbarSonner.d.ts +7 -0
  62. package/dist/types/service/index.d.ts +2 -0
  63. package/dist/types/styles/calendar-cell.d.ts +199 -0
  64. package/dist/types/styles/index.d.ts +2 -1
  65. package/dist/types/tests/Calendar.test.d.ts +1 -0
  66. package/dist/types/tests/CalendarCell.test.d.ts +1 -0
  67. package/dist/types/tests/CalendarGridBodyRows.test.d.ts +1 -0
  68. package/dist/types/tests/CalendarGridHeaderRow.test.d.ts +1 -0
  69. package/dist/types/tests/CalendarHeader.test.d.ts +1 -0
  70. package/dist/types/tests/DefaultSnack.test.d.ts +1 -0
  71. package/dist/types/tests/SearchInput.test.d.ts +1 -0
  72. package/dist/types/tests/Select.test.d.ts +1 -0
  73. package/dist/types/tests/Skeleton.test.d.ts +1 -0
  74. package/dist/types/tests/Snackbar.test.d.ts +1 -0
  75. package/dist/types/tests/Table.test.d.ts +1 -0
  76. package/dist/types/tests/useCalendarCell.test.d.ts +1 -0
  77. package/dist/types/tests/useDebouncedState.test.d.ts +1 -0
  78. package/package.json +7 -4
  79. package/dist/cjs/components/Snackbar.js +0 -18
  80. package/dist/esm/components/Snackbar.js +0 -16
  81. package/dist/types/components/Snackbar.d.ts +0 -9
@@ -0,0 +1,40 @@
1
+ 'use strict';
2
+
3
+ var tailwindVariants = require('tailwind-variants');
4
+
5
+ const calendarCell = tailwindVariants.tv({
6
+ slots: {
7
+ cell: "text-center rounded-mili text-black",
8
+ button: "flex aspect-square items-center justify-center"
9
+ },
10
+ variants: {
11
+ isSelected: {
12
+ true: {
13
+ cell: "bg-primary-medium text-white"
14
+ }
15
+ },
16
+ isSelectionStart: {
17
+ true: {
18
+ cell: "bg-primary-medium rounded-r-none text-white"
19
+ }
20
+ },
21
+ isSelectionEnd: {
22
+ true: {
23
+ cell: "bg-primary-medium rounded-l-none text-white"
24
+ }
25
+ },
26
+ inRange: {
27
+ true: {
28
+ cell: "bg-primary-light rounded-none text-black"
29
+ }
30
+ },
31
+ isOutsideVisibleRange: {
32
+ true: {
33
+ cell: "text-secondary-light cursor-default",
34
+ button: "cursor-default"
35
+ }
36
+ }
37
+ }
38
+ });
39
+
40
+ exports.calendarCell = calendarCell;
@@ -0,0 +1,11 @@
1
+ import React, { forwardRef } from 'react';
2
+ import { snackbar } from '@tecsinapse/cortex-core';
3
+
4
+ const BaseSnackbar = forwardRef(
5
+ (props, ref) => {
6
+ const { children, show, variants } = props;
7
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, show ? /* @__PURE__ */ React.createElement("div", { className: snackbar(variants), ref, "data-testid": "snackbar" }, children) : /* @__PURE__ */ React.createElement(React.Fragment, null));
8
+ }
9
+ );
10
+
11
+ export { BaseSnackbar };
@@ -0,0 +1,20 @@
1
+ import React from 'react';
2
+ import { useCalendar } from '../hooks/useCalendar.js';
3
+ import '@internationalized/date';
4
+ import 'react-aria';
5
+ import { CalendarGrid } from './CalendarGrid.js';
6
+ import { CalendarHeader } from './CalendarHeader.js';
7
+
8
+ const Calendar = ({ value, onChange }) => {
9
+ const { calendarProps, title, state } = useCalendar({ value, onChange });
10
+ return /* @__PURE__ */ React.createElement("div", { ...calendarProps, className: "calendar", "data-testid": "calendar-div" }, /* @__PURE__ */ React.createElement(
11
+ CalendarHeader,
12
+ {
13
+ onClickPrevButton: () => state.focusPreviousPage(),
14
+ onClickNextButton: () => state.focusNextPage(),
15
+ title
16
+ }
17
+ ), /* @__PURE__ */ React.createElement(CalendarGrid, { state }));
18
+ };
19
+
20
+ export { Calendar };
@@ -0,0 +1,49 @@
1
+ import React from 'react';
2
+ import '@internationalized/date';
3
+ import 'react-aria';
4
+ import 'react-stately';
5
+ import { useCalendarCell } from '../hooks/useCalendarCell.js';
6
+ import { calendarCell } from '../styles/calendar-cell.js';
7
+ import '../styles/groupButton.js';
8
+ import '../styles/progressBar.js';
9
+ import { Td } from './Table.js';
10
+
11
+ const { cell, button } = calendarCell();
12
+ const CalendarCell = ({ state, date }) => {
13
+ const {
14
+ ref,
15
+ cellProps,
16
+ buttonProps,
17
+ isSelected,
18
+ isOutsideVisibleRange,
19
+ formattedDate,
20
+ isSelectionStart,
21
+ isSelectionEnd,
22
+ inRange
23
+ } = useCalendarCell({ state, date });
24
+ return /* @__PURE__ */ React.createElement(
25
+ Td,
26
+ {
27
+ ...cellProps,
28
+ "data-testid": "calendar-cell-td",
29
+ className: cell({
30
+ isOutsideVisibleRange,
31
+ isSelected,
32
+ isSelectionStart,
33
+ isSelectionEnd,
34
+ inRange
35
+ })
36
+ },
37
+ /* @__PURE__ */ React.createElement(
38
+ "div",
39
+ {
40
+ ...buttonProps,
41
+ ref,
42
+ className: button({ isOutsideVisibleRange })
43
+ },
44
+ formattedDate
45
+ )
46
+ );
47
+ };
48
+
49
+ export { CalendarCell };
@@ -0,0 +1,21 @@
1
+ import React from 'react';
2
+ import '@internationalized/date';
3
+ import 'react-aria';
4
+ import 'react-stately';
5
+ import { useCalendarGrid } from '../hooks/useCalendarGrid.js';
6
+ import { CalendarGridBodyRows } from './CalendarGridBodyRows.js';
7
+ import { CalendarGridHeaderRow } from './CalendarGridHeaderRow.js';
8
+
9
+ const CalendarGrid = ({ state }) => {
10
+ const { gridProps, headerProps, weekDays } = useCalendarGrid({ state });
11
+ return /* @__PURE__ */ React.createElement(
12
+ "div",
13
+ {
14
+ className: "bg-white rounded-micro px-deca py-mili",
15
+ "data-testid": "calendar-grid"
16
+ },
17
+ /* @__PURE__ */ React.createElement("table", { ...gridProps, className: "border-separate border-spacing-y-nano" }, /* @__PURE__ */ React.createElement("thead", { ...headerProps }, /* @__PURE__ */ React.createElement(CalendarGridHeaderRow, { weekDays })), /* @__PURE__ */ React.createElement("tbody", null, /* @__PURE__ */ React.createElement(CalendarGridBodyRows, { state })))
18
+ );
19
+ };
20
+
21
+ export { CalendarGrid };
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ import { CalendarCell } from './CalendarCell.js';
3
+
4
+ const CalendarGridBodyRows = ({ state }) => {
5
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, [...new Array(6).keys()].map((weekIndex) => /* @__PURE__ */ React.createElement("tr", { key: weekIndex, className: "shadow-0 px-deca" }, state.getDatesInWeek(weekIndex).map((date, i) => {
6
+ return date ? /* @__PURE__ */ React.createElement(CalendarCell, { key: i, state, date }) : /* @__PURE__ */ React.createElement("td", { key: i });
7
+ }))));
8
+ };
9
+
10
+ export { CalendarGridBodyRows };
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ import { THeadCell } from './Table.js';
3
+
4
+ const CalendarGridHeaderRow = ({
5
+ weekDays
6
+ }) => {
7
+ return /* @__PURE__ */ React.createElement("tr", { "data-testid": "calendar-grid-header-row" }, weekDays.map((day, index) => /* @__PURE__ */ React.createElement(THeadCell, { key: index }, day)));
8
+ };
9
+
10
+ export { CalendarGridHeaderRow };
@@ -0,0 +1,38 @@
1
+ import React from 'react';
2
+ import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
3
+ import { Button } from './Button.js';
4
+
5
+ const CalendarHeader = ({
6
+ onClickPrevButton,
7
+ onClickNextButton,
8
+ title
9
+ }) => {
10
+ return /* @__PURE__ */ React.createElement(
11
+ "div",
12
+ {
13
+ className: "flex flex-row justify-between items-center gap-x-deca bg-miscellaneous-body p-mili",
14
+ "data-testid": "calendar-header"
15
+ },
16
+ /* @__PURE__ */ React.createElement(
17
+ Button,
18
+ {
19
+ onClick: onClickPrevButton,
20
+ variants: { variant: "text", intent: "secondary", size: "small" },
21
+ "data-testid": "calendar-header-prev-button"
22
+ },
23
+ /* @__PURE__ */ React.createElement(FaChevronLeft, null)
24
+ ),
25
+ /* @__PURE__ */ React.createElement("span", { className: "font-bold capitalize" }, title),
26
+ /* @__PURE__ */ React.createElement(
27
+ Button,
28
+ {
29
+ onClick: onClickNextButton,
30
+ variants: { variant: "text", intent: "secondary", size: "small" },
31
+ "data-testid": "calendar-header-next-button"
32
+ },
33
+ /* @__PURE__ */ React.createElement(FaChevronRight, null)
34
+ )
35
+ );
36
+ };
37
+
38
+ export { CalendarHeader };
@@ -0,0 +1,25 @@
1
+ import React from 'react';
2
+ import { BaseSnackbar } from './BaseSnackbar.js';
3
+ import { IoMdInformationCircleOutline, IoMdClose } from 'react-icons/io';
4
+
5
+ const DefaultSnack = ({
6
+ text,
7
+ onDismiss,
8
+ variants
9
+ }) => /* @__PURE__ */ React.createElement(BaseSnackbar, { show: true, variants: { intent: variants?.intent } }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-center flex-row gap-x-mili" }, /* @__PURE__ */ React.createElement(
10
+ IoMdInformationCircleOutline,
11
+ {
12
+ className: "w-[20px] h-[20px] shrink-0",
13
+ "data-testid": "icon-info"
14
+ }
15
+ ), /* @__PURE__ */ React.createElement("p", null, text), /* @__PURE__ */ React.createElement(
16
+ IoMdClose,
17
+ {
18
+ "data-testid": "icon-close",
19
+ onClick: onDismiss,
20
+ size: 24,
21
+ className: "cursor-pointer w-[20px] h-[20px] shrink-0"
22
+ }
23
+ )));
24
+
25
+ export { DefaultSnack };
@@ -1,7 +1,8 @@
1
1
  import clsx from 'clsx';
2
2
  import React from 'react';
3
- import '../styles/progressBar.js';
3
+ import '../styles/calendar-cell.js';
4
4
  import { groupButton } from '../styles/groupButton.js';
5
+ import '../styles/progressBar.js';
5
6
 
6
7
  const { button, container, active, inactive, firstButton, lastButton } = groupButton();
7
8
  const GroupButton = (props) => {
@@ -1,7 +1,8 @@
1
1
  import clsx from 'clsx';
2
2
  import React, { useState, useEffect, useCallback } from 'react';
3
- import { progressBarFilled } from '../styles/progressBar.js';
3
+ import '../styles/calendar-cell.js';
4
4
  import '../styles/groupButton.js';
5
+ import { progressBarFilled } from '../styles/progressBar.js';
5
6
 
6
7
  const ProgressBar = ({
7
8
  segments: _segments = 1,
@@ -0,0 +1,42 @@
1
+ import { createCalendar, CalendarDate, getLocalTimeZone } from '@internationalized/date';
2
+ import React from 'react';
3
+ import { useLocale, useRangeCalendar } from 'react-aria';
4
+ import { useRangeCalendarState } from 'react-stately';
5
+ import { CalendarGrid } from './CalendarGrid.js';
6
+ import { CalendarHeader } from './CalendarHeader.js';
7
+
8
+ const RangeCalendar = ({ value, onChange }) => {
9
+ const { locale } = useLocale();
10
+ const state = useRangeCalendarState({
11
+ locale,
12
+ createCalendar,
13
+ defaultValue: {
14
+ start: new CalendarDate(
15
+ value.start.getFullYear(),
16
+ value.start.getMonth(),
17
+ value.start.getDate()
18
+ ),
19
+ end: new CalendarDate(
20
+ value.end.getFullYear(),
21
+ value.end.getMonth(),
22
+ value.end.getDate()
23
+ )
24
+ },
25
+ onChange: (value2) => onChange({
26
+ start: value2.start.toDate(getLocalTimeZone()),
27
+ end: value2.end.toDate(getLocalTimeZone())
28
+ })
29
+ });
30
+ const ref = React.useRef(null);
31
+ const { calendarProps, title } = useRangeCalendar({}, state, ref);
32
+ return /* @__PURE__ */ React.createElement("div", { ...calendarProps, className: "calendar", ref }, /* @__PURE__ */ React.createElement(
33
+ CalendarHeader,
34
+ {
35
+ onClickPrevButton: () => state.focusPreviousPage(),
36
+ onClickNextButton: () => state.focusNextPage(),
37
+ title
38
+ }
39
+ ), /* @__PURE__ */ React.createElement(CalendarGrid, { state }));
40
+ };
41
+
42
+ export { RangeCalendar };
@@ -1,24 +1,31 @@
1
1
  import React, { useState, useEffect } from 'react';
2
+ import 'clsx';
2
3
  import './Badge.js';
3
- import { Button } from './Button.js';
4
+ import './BaseSnackbar.js';
5
+ import 'react-icons/md';
4
6
  import './Card.js';
7
+ import { Button } from './Button.js';
8
+ import '@internationalized/date';
9
+ import 'react-aria';
10
+ import 'react-stately';
11
+ import { useDebouncedState } from '../hooks/useDebouncedState.js';
12
+ import './CalendarCell.js';
13
+ import '@tecsinapse/cortex-core';
14
+ import 'react-icons/fa';
15
+ import 'react-icons/io';
16
+ import './GroupButton.js';
5
17
  import './Hint.js';
6
18
  import { Input } from './Input.js';
7
19
  import './Modal.js';
20
+ import '../styles/calendar-cell.js';
21
+ import '../styles/groupButton.js';
22
+ import '../styles/progressBar.js';
8
23
  import './Select.js';
9
- import './Snackbar.js';
10
24
  import './Tag.js';
11
- import './Toggle.js';
12
25
  import './TextArea.js';
13
- import '@tecsinapse/cortex-core';
14
- import 'react-icons/md';
15
- import 'clsx';
16
- import '../styles/progressBar.js';
17
- import '../styles/groupButton.js';
18
- import './GroupButton.js';
26
+ import './Toggle.js';
19
27
  import { AiOutlineLoading } from 'react-icons/ai';
20
28
  import { IoSearchOutline } from 'react-icons/io5';
21
- import { useDebouncedState } from '../hooks/useDebouncedState.js';
22
29
 
23
30
  const inputFace = "bg-white w-full";
24
31
  const inputLeft = "flex items-center";
@@ -46,7 +53,7 @@ const SearchInput = ({
46
53
  onClick(searchInput);
47
54
  }
48
55
  };
49
- return /* @__PURE__ */ React.createElement("div", { className: "flex flex-row w-full space-x-mili" }, /* @__PURE__ */ React.createElement(Input.Face, { variants: { className: inputFace } }, !onClick && /* @__PURE__ */ React.createElement(Input.Left, { className: inputLeft }, /* @__PURE__ */ React.createElement(IoSearchOutline, null)), /* @__PURE__ */ React.createElement(
56
+ return /* @__PURE__ */ React.createElement("div", { className: "flex flex-row w-full space-x-mili" }, /* @__PURE__ */ React.createElement(Input.Face, { variants: { className: inputFace } }, !onClick && /* @__PURE__ */ React.createElement(Input.Left, { className: inputLeft }, /* @__PURE__ */ React.createElement(IoSearchOutline, { "data-testid": "icon-search-left" })), /* @__PURE__ */ React.createElement(
50
57
  Input.Box,
51
58
  {
52
59
  placeholder,
@@ -66,7 +73,7 @@ const SearchInput = ({
66
73
  onClick: () => onClick(searchInput),
67
74
  disabled: !searchInput || isSubmitting
68
75
  },
69
- isSubmitting ? /* @__PURE__ */ React.createElement("div", { className: "animate-spin" }, /* @__PURE__ */ React.createElement(AiOutlineLoading, null)) : /* @__PURE__ */ React.createElement(IoSearchOutline, null)
76
+ isSubmitting ? /* @__PURE__ */ React.createElement("div", { className: "animate-spin" }, /* @__PURE__ */ React.createElement(AiOutlineLoading, { "data-testid": "icon-loading" })) : /* @__PURE__ */ React.createElement(IoSearchOutline, { "data-testid": "icon-search-button" })
70
77
  ));
71
78
  };
72
79
 
@@ -1,8 +1,8 @@
1
1
  import { selectVariants, option } from '@tecsinapse/cortex-core';
2
2
  import React, { useState, useMemo, useRef, useCallback, useEffect } from 'react';
3
- import { Hint } from './Hint.js';
4
- import { IoChevronDownOutline } from 'react-icons/io5';
5
3
  import { IoIosCloseCircleOutline } from 'react-icons/io';
4
+ import { IoChevronDownOutline } from 'react-icons/io5';
5
+ import { Hint } from './Hint.js';
6
6
  import SearchInput from './SearchInput.js';
7
7
 
8
8
  const { button, dropdown, groupedTitle, containerGrouped, hintBody } = selectVariants();
@@ -64,7 +64,7 @@ const Select = (props) => {
64
64
  onClick: () => setOpen((prevState) => !prevState),
65
65
  disabled
66
66
  },
67
- /* @__PURE__ */ React.createElement("span", null, placeholder),
67
+ /* @__PURE__ */ React.createElement("span", { "data-testid": "select-placeholder" }, placeholder),
68
68
  /* @__PURE__ */ React.createElement(IoChevronDownOutline, null)
69
69
  ), /* @__PURE__ */ React.createElement(
70
70
  "ul",
@@ -89,7 +89,7 @@ const Select = (props) => {
89
89
  intent: variant
90
90
  }
91
91
  },
92
- /* @__PURE__ */ React.createElement("div", { className: hintBody() }, variant === "error" ? /* @__PURE__ */ React.createElement(IoIosCloseCircleOutline, null) : /* @__PURE__ */ React.createElement(React.Fragment, null), /* @__PURE__ */ React.createElement("span", null, hint))
92
+ /* @__PURE__ */ React.createElement("div", { className: hintBody() }, variant === "error" ? /* @__PURE__ */ React.createElement(IoIosCloseCircleOutline, { "data-testid": "select-hint-error-icon" }) : /* @__PURE__ */ React.createElement(React.Fragment, null), /* @__PURE__ */ React.createElement("span", null, hint))
93
93
  ));
94
94
  };
95
95
 
@@ -10,6 +10,7 @@ const Skeleton = ({
10
10
  "div",
11
11
  {
12
12
  ...rest,
13
+ "data-testid": "skeleton",
13
14
  className: clsx("animate-pulse bg-secondary-light", className)
14
15
  },
15
16
  children
@@ -5,43 +5,38 @@ const THead = ({
5
5
  children,
6
6
  className,
7
7
  ...rest
8
- }) => /* @__PURE__ */ React.createElement("thead", { className: tHead({ className }), ...rest }, children);
8
+ }) => /* @__PURE__ */ React.createElement("thead", { className: tHead({ className }), "data-testid": "thead", ...rest }, children);
9
9
  const TRow = ({
10
10
  children,
11
11
  className,
12
12
  ...rest
13
- }) => /* @__PURE__ */ React.createElement("tr", { className: tRow({ className }), ...rest }, children);
13
+ }) => /* @__PURE__ */ React.createElement("tr", { className: tRow({ className }), "data-testid": "trow", ...rest }, children);
14
14
  const THeadCell = ({
15
15
  children,
16
16
  className,
17
17
  ...rest
18
- }) => /* @__PURE__ */ React.createElement("th", { className: tHeadCell({ className }), ...rest }, children);
18
+ }) => /* @__PURE__ */ React.createElement("th", { className: tHeadCell({ className }), "data-testid": "thead-cell", ...rest }, children);
19
19
  const TRowHeader = ({
20
20
  children
21
- }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("tr", { className: tRow() }, children), /* @__PURE__ */ React.createElement("tr", { className: tRow() }, /* @__PURE__ */ React.createElement("td", { colSpan: 99 }, /* @__PURE__ */ React.createElement("hr", { className: hr() }))));
21
+ }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("tr", { className: tRow(), "data-testid": "trow-header" }, children), /* @__PURE__ */ React.createElement("tr", { className: tRow() }, /* @__PURE__ */ React.createElement("td", { colSpan: 99 }, /* @__PURE__ */ React.createElement("hr", { className: hr() }))));
22
22
  const TCell = ({
23
23
  children,
24
24
  className,
25
25
  ...rest
26
- }) => /* @__PURE__ */ React.createElement("td", { className: tCell({ className }), ...rest }, children);
26
+ }) => /* @__PURE__ */ React.createElement("td", { className: tCell({ className }), "data-testid": "tcell", ...rest }, children);
27
27
  const TFoot = ({
28
28
  children,
29
29
  className,
30
30
  ...rest
31
- }) => /* @__PURE__ */ React.createElement("tfoot", { className: tFoot({ className }), ...rest }, children);
31
+ }) => /* @__PURE__ */ React.createElement("tfoot", { className: tFoot({ className }), "data-testid": "tfoot", ...rest }, children);
32
32
  const Table = ({
33
33
  children,
34
34
  className,
35
35
  ...rest
36
- }) => /* @__PURE__ */ React.createElement("table", { className: tRoot({ className }), ...rest }, children);
37
- const Hr = ({
38
- children,
39
- className,
40
- ...rest
41
- }) => /* @__PURE__ */ React.createElement("hr", { className: hr({ className }), ...rest }, children);
36
+ }) => /* @__PURE__ */ React.createElement("table", { className: tRoot({ className }), "data-testid": "table", ...rest }, children);
42
37
  const Td = ({
43
38
  children,
44
39
  ...rest
45
- }) => /* @__PURE__ */ React.createElement("td", { ...rest }, children);
40
+ }) => /* @__PURE__ */ React.createElement("td", { ...rest, "data-testid": "td" }, children);
46
41
 
47
- export { Hr, TCell, TFoot, THead, THeadCell, TRow, TRowHeader, Table, Td };
42
+ export { TCell, TFoot, THead, THeadCell, TRow, TRowHeader, Table, Td };
@@ -0,0 +1,25 @@
1
+ import { createCalendar, CalendarDate, getLocalTimeZone } from '@internationalized/date';
2
+ import { useLocale, useCalendar as useCalendar$1 } from 'react-aria';
3
+ import { useCalendarState } from 'react-stately';
4
+
5
+ const useCalendar = ({ value, onChange }) => {
6
+ const { locale } = useLocale();
7
+ const state = useCalendarState({
8
+ locale,
9
+ createCalendar,
10
+ defaultValue: new CalendarDate(
11
+ value.getFullYear(),
12
+ value.getMonth(),
13
+ value.getDate()
14
+ ),
15
+ onChange: (value2) => onChange(value2.toDate(getLocalTimeZone()))
16
+ });
17
+ const { calendarProps, title } = useCalendar$1({}, state);
18
+ return {
19
+ calendarProps,
20
+ title,
21
+ state
22
+ };
23
+ };
24
+
25
+ export { useCalendar };
@@ -0,0 +1,33 @@
1
+ import { isSameDay } from '@internationalized/date';
2
+ import { useRef } from 'react';
3
+ import { useCalendarCell as useCalendarCell$1 } from 'react-aria';
4
+
5
+ const useCalendarCell = ({ state, date }) => {
6
+ const ref = useRef(null);
7
+ const {
8
+ cellProps,
9
+ buttonProps,
10
+ isSelected,
11
+ isOutsideVisibleRange,
12
+ formattedDate
13
+ } = useCalendarCell$1({ date }, state, ref);
14
+ const rangeStateHighlitedRange = state?.highlightedRange;
15
+ const isSameDayStart = rangeStateHighlitedRange ? isSameDay(date, state?.highlightedRange?.start) : void 0;
16
+ const isSameDayEnd = rangeStateHighlitedRange ? isSameDay(date, state?.highlightedRange?.end) : void 0;
17
+ const isSelectionStart = isSameDayStart && !isSameDayEnd;
18
+ const isSelectionEnd = isSameDayEnd && !isSameDayStart;
19
+ const inRange = date > rangeStateHighlitedRange?.start && date < rangeStateHighlitedRange?.end;
20
+ return {
21
+ ref,
22
+ cellProps,
23
+ buttonProps,
24
+ isSelected,
25
+ isOutsideVisibleRange,
26
+ formattedDate,
27
+ isSelectionStart,
28
+ isSelectionEnd,
29
+ inRange
30
+ };
31
+ };
32
+
33
+ export { useCalendarCell };
@@ -0,0 +1,12 @@
1
+ import { useCalendarGrid as useCalendarGrid$1 } from 'react-aria';
2
+
3
+ const useCalendarGrid = ({ state }) => {
4
+ const { gridProps, headerProps, weekDays } = useCalendarGrid$1({}, state);
5
+ return {
6
+ gridProps,
7
+ headerProps,
8
+ weekDays
9
+ };
10
+ };
11
+
12
+ export { useCalendarGrid };
package/dist/esm/index.js CHANGED
@@ -1,18 +1,26 @@
1
+ export { Avatar } from './components/Avatar.js';
1
2
  export { Badge, BadgeAnchor } from './components/Badge.js';
3
+ export { BaseSnackbar } from './components/BaseSnackbar.js';
4
+ export { Breadcrumbs } from './components/Breadcrumbs.js';
2
5
  export { Button } from './components/Button.js';
6
+ export { Calendar } from './components/Calendar.js';
3
7
  export { Card } from './components/Card.js';
8
+ export { DefaultSnack } from './components/DefaultSnack.js';
9
+ export { Drawer } from './components/Drawer.js';
10
+ export { GroupButton } from './components/GroupButton.js';
4
11
  export { Hint } from './components/Hint.js';
5
12
  export { Box, Face, Input, Left, Right, Root } from './components/Input.js';
6
13
  export { Modal } from './components/Modal.js';
14
+ export { ProgressBar } from './components/ProgressBar.js';
15
+ export { RangeCalendar } from './components/RangeCalendar.js';
7
16
  export { Select } from './components/Select.js';
8
- export { Snackbar } from './components/Snackbar.js';
17
+ export { Skeleton } from './components/Skeleton.js';
18
+ export { TCell, TFoot, THead, THeadCell, TRow, TRowHeader, Table, Td } from './components/Table.js';
9
19
  export { Tag } from './components/Tag.js';
10
- export { Toggle } from './components/Toggle.js';
11
20
  export { TextArea } from './components/TextArea.js';
12
- export { Hr, TCell, TFoot, THead, THeadCell, TRow, TRowHeader, Table, Td } from './components/Table.js';
13
- export { Drawer } from './components/Drawer.js';
14
- export { Breadcrumbs } from './components/Breadcrumbs.js';
15
- export { Avatar } from './components/Avatar.js';
16
- export { Skeleton } from './components/Skeleton.js';
17
- export { ProgressBar } from './components/ProgressBar.js';
18
- export { GroupButton } from './components/GroupButton.js';
21
+ export { Toggle } from './components/Toggle.js';
22
+ export { SnackbarSonner } from './service/SnackbarSonner.js';
23
+ export { useCalendar } from './hooks/useCalendar.js';
24
+ export { useCalendarCell } from './hooks/useCalendarCell.js';
25
+ export { useCalendarGrid } from './hooks/useCalendarGrid.js';
26
+ export { useDebouncedState } from './hooks/useDebouncedState.js';
@@ -0,0 +1,52 @@
1
+ import { toast } from 'sonner';
2
+ import React from 'react';
3
+ import 'clsx';
4
+ import '../components/Badge.js';
5
+ import '../components/BaseSnackbar.js';
6
+ import 'react-icons/md';
7
+ import '../components/Card.js';
8
+ import '../components/Button.js';
9
+ import '@internationalized/date';
10
+ import 'react-aria';
11
+ import 'react-stately';
12
+ import '../components/CalendarCell.js';
13
+ import '@tecsinapse/cortex-core';
14
+ import 'react-icons/fa';
15
+ import { DefaultSnack } from '../components/DefaultSnack.js';
16
+ import '../components/GroupButton.js';
17
+ import '../components/Hint.js';
18
+ import '../components/Input.js';
19
+ import '../components/Modal.js';
20
+ import '../styles/calendar-cell.js';
21
+ import '../styles/groupButton.js';
22
+ import '../styles/progressBar.js';
23
+ import '../components/Select.js';
24
+ import '../components/Tag.js';
25
+ import '../components/TextArea.js';
26
+ import '../components/Toggle.js';
27
+
28
+ class SnackbarSonner {
29
+ custom(Component, options) {
30
+ return toast.custom(() => Component, {
31
+ ...options,
32
+ duration: options?.duration ?? 5e3
33
+ });
34
+ }
35
+ show(type, message, options) {
36
+ return toast.custom(
37
+ (t) => {
38
+ return /* @__PURE__ */ React.createElement(
39
+ DefaultSnack,
40
+ {
41
+ text: message,
42
+ variants: { intent: type },
43
+ onDismiss: () => toast.dismiss(t)
44
+ }
45
+ );
46
+ },
47
+ { ...options, duration: options?.duration ?? 5e3 }
48
+ );
49
+ }
50
+ }
51
+
52
+ export { SnackbarSonner };
@@ -0,0 +1,38 @@
1
+ import { tv } from 'tailwind-variants';
2
+
3
+ const calendarCell = tv({
4
+ slots: {
5
+ cell: "text-center rounded-mili text-black",
6
+ button: "flex aspect-square items-center justify-center"
7
+ },
8
+ variants: {
9
+ isSelected: {
10
+ true: {
11
+ cell: "bg-primary-medium text-white"
12
+ }
13
+ },
14
+ isSelectionStart: {
15
+ true: {
16
+ cell: "bg-primary-medium rounded-r-none text-white"
17
+ }
18
+ },
19
+ isSelectionEnd: {
20
+ true: {
21
+ cell: "bg-primary-medium rounded-l-none text-white"
22
+ }
23
+ },
24
+ inRange: {
25
+ true: {
26
+ cell: "bg-primary-light rounded-none text-black"
27
+ }
28
+ },
29
+ isOutsideVisibleRange: {
30
+ true: {
31
+ cell: "text-secondary-light cursor-default",
32
+ button: "cursor-default"
33
+ }
34
+ }
35
+ }
36
+ });
37
+
38
+ export { calendarCell };