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

package/dist/cjs/components/Table.js

@@ -7,46 +7,40 @@ const THead = ({
   children,
   className,
   ...rest
-}) => /* @__PURE__ */ React.createElement("thead", { className: cortexCore.tHead({ className }), ...rest }, children);
+}) => /* @__PURE__ */ React.createElement("thead", { className: cortexCore.tHead({ className }), "data-testid": "thead", ...rest }, children);
 const TRow = ({
   children,
   className,
   ...rest
-}) => /* @__PURE__ */ React.createElement("tr", { className: cortexCore.tRow({ className }), ...rest }, children);
+}) => /* @__PURE__ */ React.createElement("tr", { className: cortexCore.tRow({ className }), "data-testid": "trow", ...rest }, children);
 const THeadCell = ({
   children,
   className,
   ...rest
-}) => /* @__PURE__ */ React.createElement("th", { className: cortexCore.tHeadCell({ className }), ...rest }, children);
+}) => /* @__PURE__ */ React.createElement("th", { className: cortexCore.tHeadCell({ className }), "data-testid": "thead-cell", ...rest }, children);
 const TRowHeader = ({
   children
-}) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("tr", { className: cortexCore.tRow() }, children), /* @__PURE__ */ React.createElement("tr", { className: cortexCore.tRow() }, /* @__PURE__ */ React.createElement("td", { colSpan: 99 }, /* @__PURE__ */ React.createElement("hr", { className: cortexCore.hr() }))));
+}) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("tr", { className: cortexCore.tRow(), "data-testid": "trow-header" }, children), /* @__PURE__ */ React.createElement("tr", { className: cortexCore.tRow() }, /* @__PURE__ */ React.createElement("td", { colSpan: 99 }, /* @__PURE__ */ React.createElement("hr", { className: cortexCore.hr() }))));
 const TCell = ({
   children,
   className,
   ...rest
-}) => /* @__PURE__ */ React.createElement("td", { className: cortexCore.tCell({ className }), ...rest }, children);
+}) => /* @__PURE__ */ React.createElement("td", { className: cortexCore.tCell({ className }), "data-testid": "tcell", ...rest }, children);
 const TFoot = ({
   children,
   className,
   ...rest
-}) => /* @__PURE__ */ React.createElement("tfoot", { className: cortexCore.tFoot({ className }), ...rest }, children);
+}) => /* @__PURE__ */ React.createElement("tfoot", { className: cortexCore.tFoot({ className }), "data-testid": "tfoot", ...rest }, children);
 const Table = ({
   children,
   className,
   ...rest
-}) => /* @__PURE__ */ React.createElement("table", { className: cortexCore.tRoot({ className }), ...rest }, children);
-const Hr = ({
-  children,
-  className,
-  ...rest
-}) => /* @__PURE__ */ React.createElement("hr", { className: cortexCore.hr({ className }), ...rest }, children);
+}) => /* @__PURE__ */ React.createElement("table", { className: cortexCore.tRoot({ className }), "data-testid": "table", ...rest }, children);
 const Td = ({
   children,
   ...rest
-}) => /* @__PURE__ */ React.createElement("td", { ...rest }, children);
+}) => /* @__PURE__ */ React.createElement("td", { ...rest, "data-testid": "td" }, children);
 
-exports.Hr = Hr;
 exports.TCell = TCell;
 exports.TFoot = TFoot;
 exports.THead = THead;

package/dist/cjs/components/TextArea.js

@@ -14,6 +14,7 @@ const Box = React.forwardRef(
     return /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col" }, /* @__PURE__ */ React.createElement(
       "textarea",
       {
+        "data-testid": "textarea-box",
         ref,
         id: id ?? name,
         name,
@@ -48,6 +49,7 @@ const Face = React.forwardRef(
       {
         ref,
         className: clsx.clsx(cortexCore.input(variants), className),
+        "data-testid": "textarea-face",
         id: "textarea-face",
         ...rest
       },

package/dist/cjs/components/TimeField.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var React = require('react');
+var DateSegment = require('./DateSegment.js');
+var useTimeField = require('../hooks/useTimeField.js');
+
+const TimeField = (props) => {
+  const { fieldProps, ref, state } = useTimeField.useTimeField(props);
+  return /* @__PURE__ */ React.createElement("div", { ...fieldProps, ref, className: "flex flex-row" }, state.segments.map((segment, i) => /* @__PURE__ */ React.createElement(DateSegment.DateSegment, { key: i, segment, state })));
+};
+
+module.exports = TimeField;

package/dist/cjs/components/TimeFieldInput.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var React = require('react');
+var Input = require('./Input.js');
+var cortexCore = require('@tecsinapse/cortex-core');
+var TimeField = require('./TimeField.js');
+
+const TimeFieldInput = (props) => {
+  const { onChange, value, label, variants } = props;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    Input.Input.Face,
+    {
+      variants,
+      className: "flex flex-row",
+      "data-testid": "time-field-input"
+    },
+    /* @__PURE__ */ React.createElement("span", { className: cortexCore.labelStyle({}) }, label),
+    /* @__PURE__ */ React.createElement("div", { className: cortexCore.inputBox("", label) }, /* @__PURE__ */ React.createElement(TimeField, { onChange, value }))
+  ));
+};
+
+exports.TimeFieldInput = TimeFieldInput;

package/dist/cjs/components/Toggle.js

@@ -1,18 +1,26 @@
 'use strict';
 
-var React = require('react');
 var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
 
 const Toggle = React.forwardRef((props, ref) => {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-row items-center gap-x-centi" }, /* @__PURE__ */ React.createElement("label", { className: cortexCore.styleLabelElement() }, /* @__PURE__ */ React.createElement(
-    "input",
+  return /* @__PURE__ */ React.createElement(
+    "div",
     {
-      type: "checkbox",
-      className: cortexCore.styleInputElement(),
-      ref,
-      ...props
-    }
-  ), /* @__PURE__ */ React.createElement("div", { className: cortexCore.toggle() })));
+      className: "flex flex-row items-center gap-x-centi",
+      "data-testid": "toggle-div"
+    },
+    /* @__PURE__ */ React.createElement("label", { className: cortexCore.styleLabelElement() }, /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        type: "checkbox",
+        className: cortexCore.styleInputElement(),
+        ref,
+        "data-testid": "toggle-input",
+        ...props
+      }
+    ), /* @__PURE__ */ React.createElement("div", { className: cortexCore.toggle() }))
+  );
 });
 
 exports.Toggle = Toggle;

package/dist/cjs/components/utils.js

@@ -1,11 +1,12 @@
 'use strict';
 
-const getInitialsName = (name) => {
+const getNameInitials = (name) => {
   const nameSplit = name.split(" ");
-  if (nameSplit.length > 1) {
-    return nameSplit.slice(0, 2).map((name2) => name2[0]).join("");
+  const length = nameSplit.length;
+  if (length > 1) {
+    return `${nameSplit[0][0]}${nameSplit[length - 1][0]}`;
   }
   return name[0];
 };
 
-exports.getInitialsName = getInitialsName;
+exports.getNameInitials = getNameInitials;

package/dist/cjs/hooks/useCalendar.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var date = require('@internationalized/date');
+var reactAria = require('react-aria');
+var reactStately = require('react-stately');
+
+const useCalendar = ({ value, onChange }) => {
+  const { locale } = reactAria.useLocale();
+  const state = reactStately.useCalendarState({
+    locale,
+    createCalendar: date.createCalendar,
+    defaultValue: new date.CalendarDate(
+      value.getFullYear(),
+      value.getMonth(),
+      value.getDate()
+    ),
+    onChange: (value2) => onChange(value2.toDate(date.getLocalTimeZone()))
+  });
+  const { calendarProps, title } = reactAria.useCalendar({}, state);
+  return {
+    calendarProps,
+    title,
+    state
+  };
+};
+
+exports.useCalendar = useCalendar;

package/dist/cjs/hooks/useCalendarCell.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var date = require('@internationalized/date');
+var React = require('react');
+var reactAria = require('react-aria');
+
+const useCalendarCell = ({ state, date: date$1 }) => {
+  const ref = React.useRef(null);
+  const {
+    cellProps,
+    buttonProps,
+    isSelected,
+    isOutsideVisibleRange,
+    formattedDate
+  } = reactAria.useCalendarCell({ date: date$1 }, state, ref);
+  const rangeStateHighlitedRange = state?.highlightedRange;
+  const isSameDayStart = rangeStateHighlitedRange ? date.isSameDay(date$1, state?.highlightedRange?.start) : void 0;
+  const isSameDayEnd = rangeStateHighlitedRange ? date.isSameDay(date$1, state?.highlightedRange?.end) : void 0;
+  const isSelectionStart = isSameDayStart && !isSameDayEnd;
+  const isSelectionEnd = isSameDayEnd && !isSameDayStart;
+  const inRange = date$1 > rangeStateHighlitedRange?.start && date$1 < rangeStateHighlitedRange?.end;
+  return {
+    ref,
+    cellProps,
+    buttonProps,
+    isSelected,
+    isOutsideVisibleRange,
+    formattedDate,
+    isSelectionStart,
+    isSelectionEnd,
+    inRange
+  };
+};
+
+exports.useCalendarCell = useCalendarCell;

package/dist/cjs/hooks/useCalendarGrid.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var reactAria = require('react-aria');
+
+const useCalendarGrid = ({ state }) => {
+  const { gridProps, headerProps, weekDays } = reactAria.useCalendarGrid({}, state);
+  return {
+    gridProps,
+    headerProps,
+    weekDays
+  };
+};
+
+exports.useCalendarGrid = useCalendarGrid;

package/dist/cjs/hooks/useTimeField.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var React = require('react');
+var reactAria = require('react-aria');
+var reactStately = require('react-stately');
+var date = require('@internationalized/date');
+
+const useTimeField = (props) => {
+  const { value, onChange } = props;
+  const { locale } = reactAria.useLocale();
+  const state = reactStately.useTimeFieldState({
+    value: new date.Time(value?.hour, value?.minute),
+    onChange: (timeValue) => onChange({ hour: timeValue.hour, minute: timeValue.minute }),
+    locale
+  });
+  const ref = React.useRef(null);
+  const { fieldProps } = reactAria.useTimeField(
+    {
+      "aria-label": "time-field",
+      hourCycle: 24
+    },
+    state,
+    ref
+  );
+  return {
+    fieldProps,
+    ref,
+    state
+  };
+};
+
+exports.useTimeField = useTimeField;

package/dist/cjs/index.js

@@ -1,28 +1,46 @@
 'use strict';
 
+var Avatar = require('./components/Avatar.js');
 var Badge = require('./components/Badge.js');
+var BaseSnackbar = require('./components/BaseSnackbar.js');
+var Breadcrumbs = require('./components/Breadcrumbs.js');
 var Button = require('./components/Button.js');
+var Calendar = require('./components/Calendar.js');
 var Card = require('./components/Card.js');
+var DefaultSnack = require('./components/DefaultSnack.js');
+var Drawer = require('./components/Drawer.js');
+var GroupButton = require('./components/GroupButton.js');
 var Hint = require('./components/Hint.js');
 var Input = require('./components/Input.js');
 var Modal = require('./components/Modal.js');
+var ProgressBar = require('./components/ProgressBar.js');
+var RangeCalendar = require('./components/RangeCalendar.js');
 var Select = require('./components/Select.js');
-var Snackbar = require('./components/Snackbar.js');
+var Skeleton = require('./components/Skeleton.js');
+var Table = require('./components/Table.js');
 var Tag = require('./components/Tag.js');
-var Toggle = require('./components/Toggle.js');
 var TextArea = require('./components/TextArea.js');
-var Table = require('./components/Table.js');
-var Drawer = require('./components/Drawer.js');
-var Breadcrumbs = require('./components/Breadcrumbs.js');
-var Avatar = require('./components/Avatar.js');
-var Skeleton = require('./components/Skeleton.js');
+var Toggle = require('./components/Toggle.js');
+var TimeFieldInput = require('./components/TimeFieldInput.js');
+var SnackbarSonner = require('./service/SnackbarSonner.js');
+var useCalendar = require('./hooks/useCalendar.js');
+var useCalendarCell = require('./hooks/useCalendarCell.js');
+var useCalendarGrid = require('./hooks/useCalendarGrid.js');
+var useDebouncedState = require('./hooks/useDebouncedState.js');
 
 
 
+exports.Avatar = Avatar.Avatar;
 exports.Badge = Badge.Badge;
 exports.BadgeAnchor = Badge.BadgeAnchor;
+exports.BaseSnackbar = BaseSnackbar.BaseSnackbar;
+exports.Breadcrumbs = Breadcrumbs.Breadcrumbs;
 exports.Button = Button.Button;
+exports.Calendar = Calendar.Calendar;
 exports.Card = Card.Card;
+exports.DefaultSnack = DefaultSnack.DefaultSnack;
+exports.Drawer = Drawer.Drawer;
+exports.GroupButton = GroupButton.GroupButton;
 exports.Hint = Hint.Hint;
 exports.Box = Input.Box;
 exports.Face = Input.Face;
@@ -31,12 +49,10 @@ exports.Left = Input.Left;
 exports.Right = Input.Right;
 exports.Root = Input.Root;
 exports.Modal = Modal.Modal;
+exports.ProgressBar = ProgressBar.ProgressBar;
+exports.RangeCalendar = RangeCalendar.RangeCalendar;
 exports.Select = Select.Select;
-exports.Snackbar = Snackbar.Snackbar;
-exports.Tag = Tag.Tag;
-exports.Toggle = Toggle.Toggle;
-exports.TextArea = TextArea.TextArea;
-exports.Hr = Table.Hr;
+exports.Skeleton = Skeleton.Skeleton;
 exports.TCell = Table.TCell;
 exports.TFoot = Table.TFoot;
 exports.THead = Table.THead;
@@ -45,7 +61,12 @@ exports.TRow = Table.TRow;
 exports.TRowHeader = Table.TRowHeader;
 exports.Table = Table.Table;
 exports.Td = Table.Td;
-exports.Drawer = Drawer.Drawer;
-exports.Breadcrumbs = Breadcrumbs.Breadcrumbs;
-exports.Avatar = Avatar.Avatar;
-exports.Skeleton = Skeleton.Skeleton;
+exports.Tag = Tag.Tag;
+exports.TextArea = TextArea.TextArea;
+exports.Toggle = Toggle.Toggle;
+exports.TimeFieldInput = TimeFieldInput.TimeFieldInput;
+exports.SnackbarSonner = SnackbarSonner.SnackbarSonner;
+exports.useCalendar = useCalendar.useCalendar;
+exports.useCalendarCell = useCalendarCell.useCalendarCell;
+exports.useCalendarGrid = useCalendarGrid.useCalendarGrid;
+exports.useDebouncedState = useDebouncedState.useDebouncedState;

package/dist/cjs/service/SnackbarSonner.js

@@ -0,0 +1,54 @@
+'use strict';
+
+var sonner = require('sonner');
+var React = require('react');
+require('clsx');
+require('../components/Badge.js');
+require('../components/BaseSnackbar.js');
+require('react-icons/md');
+require('../components/Card.js');
+require('../components/Button.js');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+require('../components/CalendarCell.js');
+require('@tecsinapse/cortex-core');
+require('react-icons/fa');
+var DefaultSnack = require('../components/DefaultSnack.js');
+require('../components/GroupButton.js');
+require('../components/Hint.js');
+require('../components/Input.js');
+require('../components/Modal.js');
+require('../styles/calendar-cell.js');
+require('../styles/groupButton.js');
+require('../styles/progressBar.js');
+require('../components/Select.js');
+require('../components/Tag.js');
+require('../components/TextArea.js');
+require('../components/Toggle.js');
+
+class SnackbarSonner {
+  custom(Component, options) {
+    return sonner.toast.custom(() => Component, {
+      ...options,
+      duration: options?.duration ?? 5e3
+    });
+  }
+  show(type, message, options) {
+    return sonner.toast.custom(
+      (t) => {
+        return /* @__PURE__ */ React.createElement(
+          DefaultSnack.DefaultSnack,
+          {
+            text: message,
+            variants: { intent: type },
+            onDismiss: () => sonner.toast.dismiss(t)
+          }
+        );
+      },
+      { ...options, duration: options?.duration ?? 5e3 }
+    );
+  }
+}
+
+exports.SnackbarSonner = SnackbarSonner;

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

@@ -0,0 +1,40 @@
+'use strict';
+
+var tailwindVariants = require('tailwind-variants');
+
+const calendarCell = tailwindVariants.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"
+      }
+    }
+  }
+});
+
+exports.calendarCell = calendarCell;

package/dist/cjs/styles/groupButton.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var tailwindVariants = require('tailwind-variants');
+
+const groupButton = tailwindVariants.tv({
+  slots: {
+    button: "border-[1px] border-secondary-medium px-centi py-mili items-center flex text-sub font-bold",
+    inactive: "bg-white text-secondary-medium disabled:bg-secondary-light",
+    firstButton: "first:rounded-l-mili first:border-r-0",
+    lastButton: "last:rounded-r-mili last:border-l-0",
+    container: "flex flex-row flex-1 h-[2rem] w-[500px]",
+    active: "text-white bg-secondary-medium"
+  }
+});
+
+exports.groupButton = groupButton;

package/dist/cjs/styles/progressBar.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var tailwindVariants = require('tailwind-variants');
+
+const progressBarFilled = tailwindVariants.tv({
+  base: "h-full first:rounded-l-pill last:rounded-r-pill",
+  variants: {
+    intentProgress: {
+      default: "bg-primary-medium",
+      error: "bg-error-medium",
+      info: "bg-info-medium",
+      warning: "bg-warning-medium",
+      success: "bg-success-medium"
+    },
+    showAnimation: {
+      true: "transition-[width] duration-1000 ease-linear"
+    }
+  }
+});
+
+exports.progressBarFilled = progressBarFilled;

package/dist/esm/components/Avatar.js

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import React from 'react';
-import { getInitialsName } from './utils.js';
+import { getNameInitials } from './utils.js';
 
 const Avatar = ({ src, name, className, ...rest }) => {
   const [hasError, setHasError] = React.useState(false);
@@ -22,9 +22,10 @@ const Avatar = ({ src, name, className, ...rest }) => {
         src,
         alt: name,
         className: "rounded-pill",
-        onError: () => setHasError(true)
+        onError: () => setHasError(true),
+        "data-testid": "avatar-img"
       }
-    ) : /* @__PURE__ */ React.createElement("p", { className: "font-bold text-white text-base" }, getInitialsName(name))
+    ) : /* @__PURE__ */ React.createElement("p", { className: "font-bold text-white text-base", "data-testid": "avatar-p" }, getNameInitials(name))
   );
 };
 

package/dist/esm/components/BaseSnackbar.js

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+import { snackbar } from '@tecsinapse/cortex-core';
+
+const BaseSnackbar = forwardRef(
+  (props, ref) => {
+    const { children, show, variants } = props;
+    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));
+  }
+);
+
+export { BaseSnackbar };

package/dist/esm/components/BreadcrumbItem.js

@@ -16,7 +16,8 @@ const BreadcrumbItem = ({
   ), !isLast ? /* @__PURE__ */ React.createElement(
     MdOutlineKeyboardDoubleArrowRight,
     {
-      className: "mt-[0.125rem] text-primary-medium"
+      className: "mt-[0.125rem] text-primary-medium",
+      "data-testid": "breadcrumb-item-icon"
     }
   ) : /* @__PURE__ */ React.createElement(React.Fragment, null)));
 };

package/dist/esm/components/Breadcrumbs.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Card } from './Card.js';
 import { BreadcrumbItem } from './BreadcrumbItem.js';
+import { Card } from './Card.js';
 
 const Breadcrumbs = (props) => {
   const { breadcrumbs, ...rest } = props;

package/dist/esm/components/Button.js

@@ -3,7 +3,16 @@ import { button } from '@tecsinapse/cortex-core';
 
 const Button = forwardRef((props, ref) => {
   const { variants, children, ...rest } = props;
-  return /* @__PURE__ */ React.createElement("button", { className: button(variants), ref, ...rest }, children);
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: button(variants),
+      ref,
+      "data-testid": "button",
+      ...rest
+    },
+    children
+  );
 });
 
 export { Button };

package/dist/esm/components/Calendar.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useCalendar } from '../hooks/useCalendar.js';
+import '@internationalized/date';
+import 'react-aria';
+import { CalendarGrid } from './CalendarGrid.js';
+import { CalendarHeader } from './CalendarHeader.js';
+
+const Calendar = ({ value, onChange }) => {
+  const { calendarProps, title, state } = useCalendar({ value, onChange });
+  return /* @__PURE__ */ React.createElement("div", { ...calendarProps, className: "calendar", "data-testid": "calendar-div" }, /* @__PURE__ */ React.createElement(
+    CalendarHeader,
+    {
+      onClickPrevButton: () => state.focusPreviousPage(),
+      onClickNextButton: () => state.focusNextPage(),
+      title
+    }
+  ), /* @__PURE__ */ React.createElement(CalendarGrid, { state }));
+};
+
+export { Calendar };

package/dist/esm/components/CalendarCell.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import { useCalendarCell } from '../hooks/useCalendarCell.js';
+import { calendarCell } from '../styles/calendar-cell.js';
+import '../styles/groupButton.js';
+import '../styles/progressBar.js';
+import { Td } from './Table.js';
+
+const { cell, button } = calendarCell();
+const CalendarCell = ({ state, date }) => {
+  const {
+    ref,
+    cellProps,
+    buttonProps,
+    isSelected,
+    isOutsideVisibleRange,
+    formattedDate,
+    isSelectionStart,
+    isSelectionEnd,
+    inRange
+  } = useCalendarCell({ state, date });
+  return /* @__PURE__ */ React.createElement(
+    Td,
+    {
+      ...cellProps,
+      "data-testid": "calendar-cell-td",
+      className: cell({
+        isOutsideVisibleRange,
+        isSelected,
+        isSelectionStart,
+        isSelectionEnd,
+        inRange
+      })
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ...buttonProps,
+        ref,
+        className: button({ isOutsideVisibleRange })
+      },
+      formattedDate
+    )
+  );
+};
+
+export { CalendarCell };