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

package/dist/cjs/hooks/useOutsideClickListener.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var React = require('react');
+
+const useOutsideClickListener = ({
+  ref,
+  onClickOutside
+}) => {
+  const handleClickOutside = React.useCallback((event) => {
+    if (ref.current && !ref.current.contains(event.target)) {
+      onClickOutside?.();
+    }
+  }, []);
+  React.useEffect(() => {
+    document.addEventListener("click", handleClickOutside, true);
+    return () => {
+      document.removeEventListener("click", handleClickOutside, true);
+    };
+  }, [handleClickOutside]);
+};
+
+exports.useOutsideClickListener = useOutsideClickListener;

package/dist/cjs/hooks/useRangeCalendar.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var date = require('@internationalized/date');
+var React = require('react');
+var reactAria = require('react-aria');
+var reactStately = require('react-stately');
+var utils = require('../components/utils.js');
+
+const useRangeCalendar = ({
+  value,
+  onChange
+}) => {
+  const { locale } = reactAria.useLocale();
+  const state = reactStately.useRangeCalendarState({
+    locale,
+    createCalendar: date.createCalendar,
+    defaultValue: {
+      start: utils.dateToCalendarDate(value?.start),
+      end: utils.dateToCalendarDate(value?.end)
+    },
+    onChange: (value2) => onChange({
+      start: utils.calendarDateToDate(value2.start),
+      end: utils.calendarDateToDate(value2.end)
+    })
+  });
+  const ref = React.useRef(null);
+  const { calendarProps, title } = reactAria.useRangeCalendar({}, state, ref);
+  return {
+    calendarProps,
+    title,
+    state,
+    ref
+  };
+};
+
+exports.useRangeCalendar = useRangeCalendar;

package/dist/cjs/index.js

@@ -7,6 +7,8 @@ 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 DatePickerInput = require('./components/DatePickerInput.js');
+var DateRangePickerInput = require('./components/DateRangePickerInput.js');
 var DefaultSnack = require('./components/DefaultSnack.js');
 var Drawer = require('./components/Drawer.js');
 var GroupButton = require('./components/GroupButton.js');
@@ -15,18 +17,26 @@ 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');
+require('react');
+require('react-icons/ai');
+require('react-icons/io5');
+require('tailwind-merge');
+var useCalendar = require('./hooks/useCalendar.js');
+var useCalendarCell = require('./hooks/useCalendarCell.js');
+var useCalendarGrid = require('./hooks/useCalendarGrid.js');
+var useDatePickerInput = require('./hooks/useDatePickerInput.js');
+var useDateRangePickerInput = require('./hooks/useDateRangePickerInput.js');
+var useDebouncedState = require('./hooks/useDebouncedState.js');
+var useOutsideClickListener = require('./hooks/useOutsideClickListener.js');
+var useRangeCalendar = require('./hooks/useRangeCalendar.js');
+var index = require('./components/Select/index.js');
 var Skeleton = require('./components/Skeleton.js');
 var Table = require('./components/Table.js');
 var Tag = require('./components/Tag.js');
 var TextArea = require('./components/TextArea.js');
-var Toggle = require('./components/Toggle.js');
 var TimeFieldInput = require('./components/TimeFieldInput.js');
+var Toggle = require('./components/Toggle.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');
 
 
 
@@ -38,20 +48,30 @@ exports.Breadcrumbs = Breadcrumbs.Breadcrumbs;
 exports.Button = Button.Button;
 exports.Calendar = Calendar.Calendar;
 exports.Card = Card.Card;
+exports.DatePickerInput = DatePickerInput.DatePickerInput;
+exports.DateRangePickerInput = DateRangePickerInput.DateRangePickerInput;
 exports.DefaultSnack = DefaultSnack.DefaultSnack;
 exports.Drawer = Drawer.Drawer;
 exports.GroupButton = GroupButton.GroupButton;
 exports.Hint = Hint.Hint;
-exports.Box = Input.Box;
-exports.Face = Input.Face;
 exports.Input = Input.Input;
-exports.Left = Input.Left;
-exports.Right = Input.Right;
-exports.Root = Input.Root;
+exports.InputBox = Input.InputBox;
+exports.InputFace = Input.InputFace;
+exports.InputLeft = Input.InputLeft;
+exports.InputRight = Input.InputRight;
+exports.InputRoot = Input.InputRoot;
 exports.Modal = Modal.Modal;
 exports.ProgressBar = ProgressBar.ProgressBar;
 exports.RangeCalendar = RangeCalendar.RangeCalendar;
-exports.Select = Select.Select;
+exports.useCalendar = useCalendar.useCalendar;
+exports.useCalendarCell = useCalendarCell.useCalendarCell;
+exports.useCalendarGrid = useCalendarGrid.useCalendarGrid;
+exports.useDatePickerInput = useDatePickerInput.useDatePickerInput;
+exports.useDateRangePickerInput = useDateRangePickerInput.useDateRangePickerInput;
+exports.useDebouncedState = useDebouncedState.useDebouncedState;
+exports.useOutsideClickListener = useOutsideClickListener.useOutsideClickListener;
+exports.useRangeCalendar = useRangeCalendar.useRangeCalendar;
+exports.Select = index.Select;
 exports.Skeleton = Skeleton.Skeleton;
 exports.TCell = Table.TCell;
 exports.TFoot = Table.TFoot;
@@ -63,10 +83,6 @@ exports.Table = Table.Table;
 exports.Td = Table.Td;
 exports.Tag = Tag.Tag;
 exports.TextArea = TextArea.TextArea;
-exports.Toggle = Toggle.Toggle;
 exports.TimeFieldInput = TimeFieldInput.TimeFieldInput;
+exports.Toggle = Toggle.Toggle;
 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

@@ -3,26 +3,33 @@
 var sonner = require('sonner');
 var React = require('react');
 require('clsx');
+require('@internationalized/date');
 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');
+require('react-icons/lia');
+require('../components/Input.js');
 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('react-icons/ai');
+require('react-icons/io5');
+require('tailwind-merge');
+require('../components/Select/GroupedOptions.js');
+require('../components/Select/context.js');
+require('../components/Select/Popover.js');
+require('../components/Select/Trigger.js');
 require('../components/Tag.js');
 require('../components/TextArea.js');
 require('../components/Toggle.js');

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

@@ -4,13 +4,13 @@ var tailwindVariants = require('tailwind-variants');
 
 const calendarCell = tailwindVariants.tv({
   slots: {
-    cell: "text-center rounded-mili text-black",
+    cell: "text-center rounded-mili text-black hover:bg-primary-light",
     button: "flex aspect-square items-center justify-center"
   },
   variants: {
     isSelected: {
       true: {
-        cell: "bg-primary-medium text-white"
+        cell: "bg-primary-medium text-white hover:bg-primary-medium"
       }
     },
     isSelectionStart: {
@@ -30,7 +30,7 @@ const calendarCell = tailwindVariants.tv({
     },
     isOutsideVisibleRange: {
       true: {
-        cell: "text-secondary-light cursor-default",
+        cell: "text-secondary-light cursor-default  hover:bg-white-500",
         button: "cursor-default"
       }
     }

package/dist/esm/components/Calendar.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { useCalendar } from '../hooks/useCalendar.js';
 import '@internationalized/date';
 import 'react-aria';
+import 'react-stately';
 import { CalendarGrid } from './CalendarGrid.js';
 import { CalendarHeader } from './CalendarHeader.js';
 

package/dist/esm/components/DateField.js

@@ -0,0 +1,23 @@
+import { createCalendar } from '@internationalized/date';
+import React from 'react';
+import { useLocale, useDateField } from 'react-aria';
+import { useDateFieldState } from 'react-stately';
+import { DateSegment } from './DateSegment.js';
+
+const DateField = (props) => {
+  const { locale } = useLocale();
+  const state = useDateFieldState({
+    ...props,
+    createCalendar,
+    locale
+  });
+  const ref = React.useRef(null);
+  const { fieldProps } = useDateField(
+    { "aria-label": "date-field" },
+    state,
+    ref
+  );
+  return /* @__PURE__ */ React.createElement("div", { ...fieldProps, ref, className: "flex flex-row" }, state.segments.map((segment, i) => /* @__PURE__ */ React.createElement(DateSegment, { key: i, segment, state })));
+};
+
+export { DateField };

package/dist/esm/components/DatePickerInput.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import { dateToCalendarDate } from './utils.js';
+import { useDatePickerInput } from '../hooks/useDatePickerInput.js';
+import { Calendar } from './Calendar.js';
+import { DateField } from './DateField.js';
+import { DatePickerInputBase } from './DatePickerInputBase.js';
+
+const DatePickerInput = (props) => {
+  const { onChange, value, label, variants } = props;
+  const { fieldProps, state, ref } = useDatePickerInput({ value, onChange });
+  return /* @__PURE__ */ React.createElement("div", { "data-testid": "date-picker-input" }, /* @__PURE__ */ React.createElement(
+    DatePickerInputBase,
+    {
+      onClickCalendar: () => state.isOpen ? state.close() : state.open(),
+      variants: {
+        ...variants,
+        intent: state.isInvalid ? "error" : variants?.intent
+      },
+      label
+    },
+    /* @__PURE__ */ React.createElement("div", { ref }, /* @__PURE__ */ React.createElement(
+      DateField,
+      {
+        ...fieldProps,
+        onChange: (value2) => {
+          state.setDateValue(value2);
+          state.close();
+        }
+      }
+    ))
+  ), state.isOpen ? /* @__PURE__ */ React.createElement("div", { className: "absolute" }, /* @__PURE__ */ React.createElement(
+    Calendar,
+    {
+      value,
+      onChange: (value2) => {
+        state.setDateValue(dateToCalendarDate(value2));
+        state.close();
+      }
+    }
+  )) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+};
+
+export { DatePickerInput };

package/dist/esm/components/DatePickerInputBase.js

@@ -0,0 +1,22 @@
+import { labelStyle, inputBox } from '@tecsinapse/cortex-core';
+import React from 'react';
+import { LiaCalendar } from 'react-icons/lia';
+import { Input } from './Input.js';
+
+const DatePickerInputBase = ({
+  children,
+  variants,
+  label,
+  onClickCalendar
+}) => {
+  return /* @__PURE__ */ React.createElement(Input.Face, { variants, "data-testid": "date-picker-input-base" }, /* @__PURE__ */ React.createElement("span", { className: labelStyle({}) }, label), /* @__PURE__ */ React.createElement("div", { className: inputBox("", label) }, children), /* @__PURE__ */ React.createElement(Input.Right, { className: "" }, /* @__PURE__ */ React.createElement(
+    LiaCalendar,
+    {
+      className: "cursor-pointer mt-centi",
+      onClick: onClickCalendar,
+      "data-testid": "date-picker-input-base-calendar"
+    }
+  )));
+};
+
+export { DatePickerInputBase };

package/dist/esm/components/DateRangePickerInput.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import { dateToCalendarDate } from './utils.js';
+import { useDateRangePickerInput } from '../hooks/useDateRangePickerInput.js';
+import { DateField } from './DateField.js';
+import { DatePickerInputBase } from './DatePickerInputBase.js';
+import { RangeCalendar } from './RangeCalendar.js';
+
+const DateRangePickerInput = (props) => {
+  const { onChange, value, label, variants } = props;
+  const { endFieldProps, startFieldProps, ref, state } = useDateRangePickerInput({ value, onChange });
+  return /* @__PURE__ */ React.createElement("div", { "data-testid": "date-range-picker-input" }, /* @__PURE__ */ React.createElement(
+    DatePickerInputBase,
+    {
+      onClickCalendar: () => state.isOpen ? state.close() : state.open(),
+      variants: {
+        ...variants,
+        intent: state.isInvalid ? "error" : variants?.intent
+      },
+      label
+    },
+    /* @__PURE__ */ React.createElement("div", { ref, className: "flex flex-row gap-x-micro items-center" }, /* @__PURE__ */ React.createElement(
+      DateField,
+      {
+        ...startFieldProps,
+        value: dateToCalendarDate(value?.start),
+        onChange: (value2) => {
+          state.setDate("start", value2);
+          state.close();
+        }
+      }
+    ), /* @__PURE__ */ React.createElement("span", null, "-"), /* @__PURE__ */ React.createElement(
+      DateField,
+      {
+        ...endFieldProps,
+        value: dateToCalendarDate(value?.end),
+        onChange: (value2) => {
+          state.setDate("end", value2);
+          state.close();
+        }
+      }
+    ))
+  ), state.isOpen ? /* @__PURE__ */ React.createElement("div", { className: "absolute" }, /* @__PURE__ */ React.createElement(
+    RangeCalendar,
+    {
+      value,
+      onChange: (value2) => {
+        state.setDateRange({
+          start: dateToCalendarDate(value2.start),
+          end: dateToCalendarDate(value2.end)
+        });
+        state.close();
+      }
+    }
+  )) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+};
+
+export { DateRangePickerInput };

package/dist/esm/components/DateSegment.js

@@ -4,7 +4,15 @@ import { useDateSegment } from 'react-aria';
 const DateSegment = ({ segment, state }) => {
   const ref = React.useRef(null);
   const { segmentProps } = useDateSegment(segment, state, ref);
-  return /* @__PURE__ */ React.createElement("div", { ...segmentProps, ref, className: "text-sub accent-transparent" }, segment.text);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...segmentProps,
+      ref,
+      className: "focus:outline-none focus:bg-secondary-light"
+    },
+    segment.text
+  );
 };
 
 export { DateSegment };

package/dist/esm/components/Input.js

@@ -7,7 +7,7 @@ const getValidChildren = (children) => {
     (el) => React.isValidElement(el)
   );
 };
-const Box = React.forwardRef(
+const InputBox = React.forwardRef(
   ({ id, name, variants, label, placeholder, className, ...rest }, ref) => {
     return /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col" }, /* @__PURE__ */ React.createElement(
       "input",
@@ -31,7 +31,7 @@ const Box = React.forwardRef(
     ));
   }
 );
-const Face = React.forwardRef(
+const InputFace = React.forwardRef(
   ({ children, variants, className, ...rest }, ref) => {
     const clones = getValidChildren(children).map((el) => {
       return React.cloneElement(el, { ...el.props, variants });
@@ -48,27 +48,27 @@ const Face = React.forwardRef(
     );
   }
 );
-const Root = React.forwardRef(
+const InputRoot = React.forwardRef(
   ({ variants, className, ...rest }, ref) => {
-    return /* @__PURE__ */ React.createElement(Face, { variants, className }, /* @__PURE__ */ React.createElement(Box, { ...rest, ref }));
+    return /* @__PURE__ */ React.createElement(InputFace, { variants, className }, /* @__PURE__ */ React.createElement(InputBox, { ...rest, ref }));
   }
 );
-const Left = React.forwardRef(
+const InputLeft = React.forwardRef(
   ({ children, className, ...rest }, ref) => {
     return /* @__PURE__ */ React.createElement("div", { className: clsx(className, "mr-2.5"), ...rest, ref }, children);
   }
 );
-const Right = React.forwardRef(
+const InputRight = React.forwardRef(
   ({ children, className, ...rest }, ref) => {
     return /* @__PURE__ */ React.createElement("div", { className: clsx(className, "ml-2.5"), ...rest, ref }, children);
   }
 );
 const Input = {
-  Root,
-  Face,
-  Box,
-  Left,
-  Right
+  Root: InputRoot,
+  Face: InputFace,
+  Box: InputBox,
+  Left: InputLeft,
+  Right: InputRight
 };
 
-export { Box, Face, Input, Left, Right, Root };
+export { Input, InputBox, InputFace, InputLeft, InputRight, InputRoot };

package/dist/esm/components/RangeCalendar.js

@@ -1,42 +1,34 @@
-import { createCalendar, CalendarDate, getLocalTimeZone } from '@internationalized/date';
 import React from 'react';
-import { useLocale, useRangeCalendar } from 'react-aria';
-import { useRangeCalendarState } from 'react-stately';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import { useRangeCalendar } from '../hooks/useRangeCalendar.js';
 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 { calendarProps, state, title, ref } = useRangeCalendar({
+    value,
+    onChange
   });
-  const ref = React.useRef(null);
-  const { calendarProps, title } = useRangeCalendar({}, state, ref);
-  return /* @__PURE__ */ React.createElement("div", { ...calendarProps, className: "calendar", ref }, /* @__PURE__ */ React.createElement(
-    CalendarHeader,
+  return /* @__PURE__ */ React.createElement(
+    "div",
     {
-      onClickPrevButton: () => state.focusPreviousPage(),
-      onClickNextButton: () => state.focusNextPage(),
-      title
-    }
-  ), /* @__PURE__ */ React.createElement(CalendarGrid, { state }));
+      ...calendarProps,
+      className: "calendar",
+      ref,
+      "data-testid": "calendar-range-div"
+    },
+    /* @__PURE__ */ React.createElement(
+      CalendarHeader,
+      {
+        onClickPrevButton: () => state.focusPreviousPage(),
+        onClickNextButton: () => state.focusNextPage(),
+        title
+      }
+    ),
+    /* @__PURE__ */ React.createElement(CalendarGrid, { state })
+  );
 };
 
 export { RangeCalendar };

package/dist/esm/components/Select/GroupedOptions.js

@@ -0,0 +1,30 @@
+import { selectVariants } from '@tecsinapse/cortex-core';
+import React, { useContext, useCallback } from 'react';
+import { Select } from './index.js';
+import { SelectContext } from './context.js';
+
+const { groupedTitle, containerGrouped } = selectVariants();
+const SelectGroupedOptions = ({
+  onSelect,
+  groupedLabelExtractor,
+  options
+}) => {
+  const { setOpen, keyExtractor } = useContext(SelectContext);
+  const handleSelect = useCallback(
+    (option) => {
+      onSelect(option);
+      setOpen?.(false);
+    },
+    [onSelect]
+  );
+  return /* @__PURE__ */ React.createElement("ul", { role: "select", className: containerGrouped() }, [...options ?? []].map(([key, value]) => /* @__PURE__ */ React.createElement("div", { key }, /* @__PURE__ */ React.createElement("span", { className: groupedTitle() }, groupedLabelExtractor?.(key)), value.map((option) => /* @__PURE__ */ React.createElement(
+    Select.Option,
+    {
+      option,
+      key: keyExtractor(option),
+      onSelectOption: handleSelect
+    }
+  )))));
+};
+
+export { SelectGroupedOptions };

package/dist/esm/components/Select/Option.js

@@ -0,0 +1,23 @@
+import { option } from '@tecsinapse/cortex-core';
+import React, { useContext } from 'react';
+import { SelectContext } from './context.js';
+
+const SelectOption = ({
+  onSelectOption,
+  option: option$1
+}) => {
+  const { keyExtractor, labelExtractor, value } = useContext(SelectContext);
+  return /* @__PURE__ */ React.createElement(
+    "li",
+    {
+      onClick: () => onSelectOption(option$1),
+      className: option({
+        selected: value && keyExtractor(value) === keyExtractor(option$1)
+      }),
+      role: "option"
+    },
+    labelExtractor(option$1)
+  );
+};
+
+export { SelectOption };

package/dist/esm/components/Select/Options.js

@@ -0,0 +1,27 @@
+import React, { useContext, useCallback } from 'react';
+import { Select } from './index.js';
+import { SelectContext } from './context.js';
+
+const SelectOptions = ({
+  onSelect,
+  options
+}) => {
+  const { setOpen, keyExtractor } = useContext(SelectContext);
+  const handleSelect = useCallback(
+    (option) => {
+      onSelect(option);
+      setOpen?.(false);
+    },
+    [onSelect]
+  );
+  return /* @__PURE__ */ React.createElement("ul", { role: "select" }, (options ?? []).map((option) => /* @__PURE__ */ React.createElement(
+    Select.Option,
+    {
+      option,
+      key: keyExtractor(option),
+      onSelectOption: handleSelect
+    }
+  )));
+};
+
+export { SelectOptions };

package/dist/esm/components/Select/Popover.js

@@ -0,0 +1,11 @@
+import { selectVariants } from '@tecsinapse/cortex-core';
+import React, { useContext } from 'react';
+import { SelectContext } from './context.js';
+
+const { dropdown } = selectVariants();
+const SelectPopover = ({ children }) => {
+  const { open } = useContext(SelectContext);
+  return /* @__PURE__ */ React.createElement("div", { className: dropdown({ open }), "data-testid": "select-popover" }, children);
+};
+
+export { SelectPopover };

package/dist/esm/components/Select/Root.js

@@ -0,0 +1,29 @@
+import React, { useState, useRef } from 'react';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import { useOutsideClickListener } from '../../hooks/useOutsideClickListener.js';
+import { SelectContext } from './context.js';
+
+const SelectRoot = ({
+  children,
+  value,
+  keyExtractor,
+  labelExtractor
+}) => {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  useOutsideClickListener({
+    ref,
+    onClickOutside: () => setOpen?.(false)
+  });
+  return /* @__PURE__ */ React.createElement(
+    SelectContext.Provider,
+    {
+      value: { value, open, setOpen, keyExtractor, labelExtractor }
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "w-full relative bg-white", ref }, children)
+  );
+};
+
+export { SelectRoot };