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

package/dist/cjs/components/utils.js

@@ -1,5 +1,7 @@
 'use strict';
 
+var date = require('@internationalized/date');
+
 const getNameInitials = (name) => {
   const nameSplit = name.split(" ");
   const length = nameSplit.length;
@@ -8,5 +10,17 @@ const getNameInitials = (name) => {
   }
   return name[0];
 };
+const dateToCalendarDate = (value) => {
+  return new date.CalendarDate(
+    value?.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear(),
+    value?.getMonth() ? value.getMonth() + 1 : (/* @__PURE__ */ new Date()).getMonth() + 1,
+    value?.getDate() ?? (/* @__PURE__ */ new Date()).getDate()
+  );
+};
+const calendarDateToDate = (value) => {
+  return value.toDate(date.getLocalTimeZone());
+};
 
+exports.calendarDateToDate = calendarDateToDate;
+exports.dateToCalendarDate = dateToCalendarDate;
 exports.getNameInitials = getNameInitials;

package/dist/cjs/hooks/useCalendar.js

@@ -3,18 +3,15 @@
 var date = require('@internationalized/date');
 var reactAria = require('react-aria');
 var reactStately = require('react-stately');
+var utils = require('../components/utils.js');
 
 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()))
+    defaultValue: utils.dateToCalendarDate(value),
+    onChange: (value2) => onChange(utils.calendarDateToDate(value2))
   });
   const { calendarProps, title } = reactAria.useCalendar({}, state);
   return {

package/dist/cjs/hooks/useDatePickerInput.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var React = require('react');
+var reactAria = require('react-aria');
+var reactStately = require('react-stately');
+var utils = require('../components/utils.js');
+
+const useDatePickerInput = ({
+  value,
+  onChange
+}) => {
+  const state = reactStately.useDatePickerState({
+    defaultValue: utils.dateToCalendarDate(value),
+    onChange: (value2) => {
+      onChange(utils.calendarDateToDate(value2));
+    }
+  });
+  const ref = React.useRef(null);
+  const { fieldProps } = reactAria.useDatePicker(
+    { "aria-label": "date-picker-field" },
+    state,
+    ref
+  );
+  return {
+    fieldProps,
+    state,
+    ref
+  };
+};
+
+exports.useDatePickerInput = useDatePickerInput;

package/dist/cjs/hooks/useDateRangePickerInput.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var React = require('react');
+var reactAria = require('react-aria');
+var reactStately = require('react-stately');
+var utils = require('../components/utils.js');
+
+const useDateRangePickerInput = ({
+  value,
+  onChange
+}) => {
+  const state = reactStately.useDateRangePickerState({
+    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 { startFieldProps, endFieldProps } = reactAria.useDateRangePicker(
+    { "aria-label": "date-range-picker-field" },
+    state,
+    ref
+  );
+  return { startFieldProps, endFieldProps, state, ref };
+};
+
+exports.useDateRangePickerInput = useDateRangePickerInput;

package/dist/cjs/hooks/useFloatingLogic.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var React = require('react');
+var react = require('@floating-ui/react');
+
+const useFloatingLogic = ({
+  placement,
+  trigger,
+  arrowRef
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const { x, y, strategy, refs, update, context, floatingStyles } = react.useFloating(
+    {
+      placement,
+      whileElementsMounted: react.autoUpdate,
+      middleware: [
+        react.offset(10),
+        react.flip({
+          flipAlignment: true,
+          fallbackPlacements: ["right", "bottom", "left", "top"]
+        }),
+        react.shift(),
+        ...arrowRef ? [react.arrow({ element: arrowRef })] : []
+      ]
+    }
+  );
+  React.useEffect(() => {
+    if (isOpen) update();
+  }, [isOpen, update]);
+  const triggerProps = {
+    ref: refs.setReference,
+    ...trigger === "hover" && {
+      onMouseEnter: () => setIsOpen(true),
+      onMouseLeave: () => setIsOpen(false)
+    },
+    ...trigger === "click" && {
+      onClick: () => setIsOpen((prev) => !prev)
+    }
+  };
+  return {
+    isOpen,
+    setIsOpen,
+    x,
+    y,
+    strategy,
+    refs,
+    context,
+    floatingStyles,
+    triggerProps
+  };
+};
+
+exports.useFloatingLogic = useFloatingLogic;

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,26 +7,37 @@ 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 Divider = require('./components/Divider.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 index = require('./components/Input/index.js');
+var index$1 = require('./components/Menubar/index.js');
 var Modal = require('./components/Modal.js');
+var index$2 = require('./components/Popover/index.js');
 var ProgressBar = require('./components/ProgressBar.js');
 var RangeCalendar = require('./components/RangeCalendar.js');
-var Select = require('./components/Select.js');
+var index$3 = 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 SnackbarSonner = require('./service/SnackbarSonner.js');
+var Toggle = require('./components/Toggle.js');
+var Tooltip = require('./components/Tooltip.js');
 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 useFloatingLogic = require('./hooks/useFloatingLogic.js');
+var SnackbarSonner = require('./service/SnackbarSonner.js');
 
 
 
@@ -38,20 +49,20 @@ 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.Divider = Divider.Divider;
 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.Input = index.Input;
+exports.Menubar = index$1.Menubar;
 exports.Modal = Modal.Modal;
+exports.Popover = index$2.Popover;
 exports.ProgressBar = ProgressBar.ProgressBar;
 exports.RangeCalendar = RangeCalendar.RangeCalendar;
-exports.Select = Select.Select;
+exports.Select = index$3.Select;
 exports.Skeleton = Skeleton.Skeleton;
 exports.TCell = Table.TCell;
 exports.TFoot = Table.TFoot;
@@ -63,10 +74,16 @@ 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.SnackbarSonner = SnackbarSonner.SnackbarSonner;
+exports.Toggle = Toggle.Toggle;
+exports.Tooltip = Tooltip.Tooltip;
 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.useFloatingLogic = useFloatingLogic.useFloatingLogic;
+exports.SnackbarSonner = SnackbarSonner.SnackbarSonner;

package/dist/cjs/provider/MenubarProvider.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var React = require('react');
+
+const MenubarContext = React.createContext({
+  show: false,
+  setShow: () => void 0
+});
+const MenubarProvider = ({ children }) => {
+  const [show, setShow] = React.useState(false);
+  return /* @__PURE__ */ React.createElement(MenubarContext.Provider, { value: { show, setShow } }, children);
+};
+const useMenubar = () => {
+  const context = React.useContext(MenubarContext);
+  if (!context) {
+    throw new Error("useSnackbar must be used within a SnackbarProvider");
+  }
+  return [context.show, context.setShow];
+};
+
+exports.MenubarProvider = MenubarProvider;
+exports.useMenubar = useMenubar;

package/dist/cjs/provider/SnackbarProvider.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var React = require('react');
+require('sonner');
+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('react-aria');
+require('react-stately');
+require('@floating-ui/react');
+require('../components/CalendarCell.js');
+require('@tecsinapse/cortex-core');
+require('react-icons/fa');
+require('react-icons/lia');
+require('../components/Input/Box.js');
+require('../components/Input/Face.js');
+require('../components/Input/Left.js');
+require('../components/Input/Right.js');
+require('../components/Input/Root.js');
+require('../components/Input/Search.js');
+require('react-icons/io');
+require('../components/GroupButton.js');
+require('../components/Hint.js');
+require('./MenubarProvider.js');
+require('../components/Menubar/Left.js');
+require('../styles/menubar.js');
+require('../components/Menubar/Right.js');
+require('../components/Menubar/Dropdown.js');
+require('../components/Menubar/MostUsed.js');
+require('../components/Menubar/MostUsedItem.js');
+require('../components/Menubar/Header.js');
+require('../components/Menubar/Item.js');
+require('../components/Menubar/SubItem.js');
+require('../components/Modal.js');
+require('../components/Popover/Context.js');
+require('../styles/calendar-cell.js');
+require('../styles/groupButton.js');
+require('../styles/progressBar.js');
+require('../components/Select/GroupedOptions.js');
+require('../components/Select/context.js');
+require('../components/Select/Trigger.js');
+require('../components/Tag.js');
+require('../components/TextArea.js');
+require('../components/Toggle.js');
+require('../components/Tooltip.js');
+
+React.createContext(null);

package/dist/cjs/service/SnackbarSonner.js

@@ -3,29 +3,51 @@
 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('@floating-ui/react');
 require('../components/CalendarCell.js');
 require('@tecsinapse/cortex-core');
 require('react-icons/fa');
+require('react-icons/lia');
+require('../components/Input/Box.js');
+require('../components/Input/Face.js');
+require('../components/Input/Left.js');
+require('../components/Input/Right.js');
+require('../components/Input/Root.js');
+require('../components/Input/Search.js');
 var DefaultSnack = require('../components/DefaultSnack.js');
 require('../components/GroupButton.js');
 require('../components/Hint.js');
-require('../components/Input.js');
+require('../provider/MenubarProvider.js');
+require('../provider/SnackbarProvider.js');
+require('../components/Menubar/Left.js');
+require('../styles/menubar.js');
+require('../components/Menubar/Right.js');
+require('../components/Menubar/Dropdown.js');
+require('../components/Menubar/MostUsed.js');
+require('../components/Menubar/MostUsedItem.js');
+require('../components/Menubar/Header.js');
+require('../components/Menubar/Item.js');
+require('../components/Menubar/SubItem.js');
 require('../components/Modal.js');
+require('../components/Popover/Context.js');
 require('../styles/calendar-cell.js');
 require('../styles/groupButton.js');
 require('../styles/progressBar.js');
-require('../components/Select.js');
+require('../components/Select/GroupedOptions.js');
+require('../components/Select/context.js');
+require('../components/Select/Trigger.js');
 require('../components/Tag.js');
 require('../components/TextArea.js');
 require('../components/Toggle.js');
+require('../components/Tooltip.js');
 
 class SnackbarSonner {
   custom(Component, options) {

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/cjs/styles/menubar.js

@@ -0,0 +1,62 @@
+'use strict';
+
+var tailwindVariants = require('tailwind-variants');
+
+const menubar = tailwindVariants.tv({
+  slots: {
+    root: "w-screen px-kilo py-deca flex flex-row justify-between bg-white z-[100]",
+    left: "flex items-center w-fit",
+    right: "flex items-center gap-x-deca",
+    dropdown: "w-full bg-white flex-1 pt-kilo pb-mega shadow-default px-[8vw] z-[100]"
+  }
+});
+const mostUsed = tailwindVariants.tv({
+  slots: {
+    container: "mb-kilo",
+    label: "font-bold mb-centi",
+    containerList: "gap-x-kilo flex flex-row"
+  }
+});
+const mostUsedItem = tailwindVariants.tv({
+  slots: {
+    container: "flex-1 py-mili",
+    title: "text-primary-medium font-bold",
+    category: "text-secondary-medium"
+  }
+});
+const item = tailwindVariants.tv({
+  slots: {
+    container: "flex flex-row gap-x-deca items-center",
+    text: "text-secondary-dark hover:text-primary-medium hover:cursor-pointer text-base",
+    icon: "text-primary-medium hover:cursor-pointer"
+  }
+});
+const category = tailwindVariants.tv({
+  slots: {
+    text: "mb-mili font-bold",
+    hr: "mb-mili",
+    container: "flex flex-col gap-y-mili"
+  }
+});
+const subItem = tailwindVariants.tv({
+  slots: {
+    container: "pl-deca text-sub border-l-[1px] border-primary-medium text-secondary-dark hover:text-primary-medium cursor-pointer"
+  }
+});
+const animate = tailwindVariants.tv({
+  base: "transition-all ease-in-out duration-250",
+  variants: {
+    show: {
+      true: "translate-y-0 opacity-1 visible",
+      false: "-translate-y-[120%] opacity-0 invisible"
+    }
+  }
+});
+
+exports.animate = animate;
+exports.category = category;
+exports.item = item;
+exports.menubar = menubar;
+exports.mostUsed = mostUsed;
+exports.mostUsedItem = mostUsedItem;
+exports.subItem = subItem;

package/dist/esm/components/Calendar.js

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

package/dist/esm/components/CalendarCell.js

@@ -3,6 +3,7 @@ import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
 import { useCalendarCell } from '../hooks/useCalendarCell.js';
+import '@floating-ui/react';
 import { calendarCell } from '../styles/calendar-cell.js';
 import '../styles/groupButton.js';
 import '../styles/progressBar.js';

package/dist/esm/components/CalendarGrid.js

@@ -3,6 +3,7 @@ import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
 import { useCalendarGrid } from '../hooks/useCalendarGrid.js';
+import '@floating-ui/react';
 import { CalendarGridBodyRows } from './CalendarGridBodyRows.js';
 import { CalendarGridHeaderRow } from './CalendarGridHeaderRow.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,47 @@
+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 '@floating-ui/react';
+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/index.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 };