@tecsinapse/cortex-react 1.9.12-beta.0 → 1.9.12-beta.1

package/dist/cjs/components/Calendar/CalendarCell.js

@@ -10,6 +10,8 @@ require('currency.js');
 require('react-dropzone');
 require('uuid');
 var calendarCell = require('../../styles/calendar-cell.js');
+require('../../styles/date-picker-input-base.js');
+require('../../styles/date-segment.js');
 require('../../styles/groupButton.js');
 require('../../styles/progressBar.js');
 var Table = require('../Table.js');

package/dist/cjs/components/DatePicker/DatePickerInput.js

@@ -13,32 +13,28 @@ require('uuid');
 var Calendar = require('../Calendar/Calendar.js');
 var index = require('../Popover/index.js');
 var Context = require('../Popover/Context.js');
-var Content = require('./Content.js');
+var Content = require('../Select/Content.js');
 var DateField = require('./DateField.js');
 var DatePickerInputBase = require('./DatePickerInputBase.js');
 
 const DatePickerInputWithPopover = (props) => {
   const { setIsOpen } = Context.usePopoverContext();
-  const { onChange, value, label, variants } = props;
+  const { onChange, value, label, variants, disabled } = props;
   const { fieldProps, state, ref } = useDatePickerInput.useDatePickerInput({ value, onChange });
-  return /* @__PURE__ */ React.createElement("div", { ref, "data-testid": "date-picker-input" }, /* @__PURE__ */ React.createElement(index.Popover.Trigger, null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { ref, "data-testid": "date-picker-input" }, /* @__PURE__ */ React.createElement(index.Popover.Trigger, { disabled: true }, /* @__PURE__ */ React.createElement(
     DatePickerInputBase.DatePickerInputBase,
     {
       variants: {
         ...variants,
         intent: state.isInvalid ? "error" : variants?.intent
       },
-      label
+      label,
+      disabled,
+      value,
+      onClean: () => state.setValue(null),
+      onToggle: () => setIsOpen((open) => !open)
     },
-    /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
-      DateField.DateField,
-      {
-        ...fieldProps,
-        onChange: (value2) => {
-          state.setDateValue(value2);
-        }
-      }
-    ))
+    /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(DateField.DateField, { ...fieldProps, isDisabled: disabled }))
   )), /* @__PURE__ */ React.createElement(index.Popover.Content, { className: "bg-inherit shadow-none border-none" }, /* @__PURE__ */ React.createElement(
     Calendar.Calendar,
     {

package/dist/cjs/components/DatePicker/DatePickerInputBase.js

@@ -2,20 +2,60 @@
 
 var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
+var io = require('react-icons/io');
 var lia = require('react-icons/lia');
+require('../../styles/calendar-cell.js');
+var datePickerInputBase = require('../../styles/date-picker-input-base.js');
+require('../../styles/date-segment.js');
+require('../../styles/groupButton.js');
+require('../../styles/progressBar.js');
 var index = require('../Input/index.js');
 
+const { icon } = datePickerInputBase.datePickerInputBase();
 const DatePickerInputBase = ({
   children,
   variants,
-  label
+  label,
+  disabled = false,
+  value,
+  onClean,
+  onToggle
 }) => {
-  return /* @__PURE__ */ React.createElement(index.Input.Face, { variants, "data-testid": "date-picker-input-base" }, /* @__PURE__ */ React.createElement("span", { className: cortexCore.labelStyle({}) }, label), /* @__PURE__ */ React.createElement("div", { className: cortexCore.inputBox("", label, "w-full flex flex-row") }, children), /* @__PURE__ */ React.createElement(index.Input.Right, { className: "" }, /* @__PURE__ */ React.createElement(
-    lia.LiaCalendar,
+  const showCloseIcon = React.useMemo(() => {
+    const hasDate = value != void 0;
+    const hasStartDate = value?.start != void 0;
+    const hasEndDate = value?.end != void 0;
+    if (value && "start" in value) return hasStartDate && hasEndDate;
+    return hasDate;
+  }, [value]);
+  return /* @__PURE__ */ React.createElement(index.Input.Face, { variants, "data-testid": "date-picker-input-base" }, /* @__PURE__ */ React.createElement("span", { className: cortexCore.labelStyle({}) }, label), /* @__PURE__ */ React.createElement("div", { className: cortexCore.inputBox("", label, "w-full flex flex-row") }, children), /* @__PURE__ */ React.createElement(index.Input.Right, { className: "mt-centi" }, showCloseIcon ? /* @__PURE__ */ React.createElement(
+    "button",
     {
-      className: "cursor-pointer mt-centi",
-      "data-testid": "date-picker-input-base-calendar"
-    }
+      onClick: onClean,
+      disabled,
+      "data-testid": "date-picker-input-base-clean-button"
+    },
+    /* @__PURE__ */ React.createElement(
+      io.IoMdClose,
+      {
+        className: icon({ disabled }),
+        "data-testid": "date-picker-input-base-clean-icon"
+      }
+    )
+  ) : /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      onClick: onToggle,
+      disabled,
+      "data-testid": "date-picker-input-base-calendar-button"
+    },
+    /* @__PURE__ */ React.createElement(
+      lia.LiaCalendar,
+      {
+        className: icon({ disabled }),
+        "data-testid": "date-picker-input-base-calendar-icon"
+      }
+    )
   )));
 };
 

package/dist/cjs/components/DatePicker/DateRangePickerInput.js

@@ -19,36 +19,22 @@ var DatePickerInputBase = require('./DatePickerInputBase.js');
 
 const DateRangePickerInputWithPopover = (props) => {
   const { setIsOpen } = Context.usePopoverContext();
-  const { onChange, value, label, variants } = props;
+  const { onChange, value, label, variants, disabled = false } = props;
   const { endFieldProps, startFieldProps, ref, state } = useDateRangePickerInput.useDateRangePickerInput({ value, onChange });
-  return /* @__PURE__ */ React.createElement("div", { ref, "data-testid": "date-range-picker-input" }, /* @__PURE__ */ React.createElement(index.Popover.Trigger, null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { ref, "data-testid": "date-range-picker-input" }, /* @__PURE__ */ React.createElement(index.Popover.Trigger, { disabled: true }, /* @__PURE__ */ React.createElement(
     DatePickerInputBase.DatePickerInputBase,
     {
       variants: {
         ...variants,
         intent: state.isInvalid ? "error" : variants?.intent
       },
-      label
+      label,
+      disabled,
+      value,
+      onClean: () => state.setValue(null),
+      onToggle: () => setIsOpen((open) => !open)
     },
-    /* @__PURE__ */ React.createElement("div", { className: "flex flex-row gap-x-micro items-center" }, /* @__PURE__ */ React.createElement(
-      DateField.DateField,
-      {
-        ...startFieldProps,
-        value: date.dateToCalendarDate(value?.start),
-        onChange: (value2) => {
-          state.setDate("start", value2);
-        }
-      }
-    ), /* @__PURE__ */ React.createElement("span", null, "-"), /* @__PURE__ */ React.createElement(
-      DateField.DateField,
-      {
-        ...endFieldProps,
-        value: date.dateToCalendarDate(value?.end),
-        onChange: (value2) => {
-          state.setDate("end", value2);
-        }
-      }
-    ))
+    /* @__PURE__ */ React.createElement("div", { className: "flex flex-row gap-x-micro items-center" }, /* @__PURE__ */ React.createElement(DateField.DateField, { ...startFieldProps, isDisabled: disabled }), /* @__PURE__ */ React.createElement("span", null, "-"), /* @__PURE__ */ React.createElement(DateField.DateField, { ...endFieldProps, isDisabled: disabled }))
   )), /* @__PURE__ */ React.createElement(index.Popover.Content, { className: "bg-inherit shadow-none border-none" }, /* @__PURE__ */ React.createElement(
     RangeCalendar.RangeCalendar,
     {

package/dist/cjs/components/DatePicker/DateSegment.js

@@ -2,7 +2,13 @@
 
 var React = require('react');
 var reactAria = require('react-aria');
+require('../../styles/calendar-cell.js');
+require('../../styles/date-picker-input-base.js');
+var dateSegment = require('../../styles/date-segment.js');
+require('../../styles/groupButton.js');
+require('../../styles/progressBar.js');
 
+const { base } = dateSegment.dateSegment();
 const DateSegment = ({ segment, state }) => {
   const ref = React.useRef(null);
   const { segmentProps } = reactAria.useDateSegment(segment, state, ref);
@@ -11,7 +17,7 @@ const DateSegment = ({ segment, state }) => {
     {
       ...segmentProps,
       ref,
-      className: "focus:outline-none focus:bg-secondary-light"
+      className: base({ disabled: state.isDisabled })
     },
     segment.text
   );

package/dist/cjs/components/GroupButton.js

@@ -3,6 +3,8 @@
 var clsx = require('clsx');
 var React = require('react');
 require('../styles/calendar-cell.js');
+require('../styles/date-picker-input-base.js');
+require('../styles/date-segment.js');
 var groupButton = require('../styles/groupButton.js');
 require('../styles/progressBar.js');
 

package/dist/cjs/components/Popover/Trigger.js

@@ -4,10 +4,23 @@ require('@internationalized/date');
 var react = require('../../utils/react.js');
 var Context = require('./Context.js');
 
-const PopoverTrigger = ({ children }) => {
+const isDisabledProps = {
+  onClick: () => void 0,
+  onKeyDown: () => void 0,
+  onMouseDown: () => void 0,
+  onKeyUp: () => void 0,
+  onPointerDown: () => void 0
+};
+const PopoverTrigger = ({
+  children,
+  disabled = false
+}) => {
   const { triggerProps } = Context.usePopoverContext();
-  const isDisabled = children.props?.disabled;
-  return react.cloneWithProps(children, isDisabled ? {} : triggerProps);
+  const isDisabled = disabled ?? children.props?.disabled;
+  return react.cloneWithProps(children, {
+    ...triggerProps,
+    ...isDisabled ? isDisabledProps : {}
+  });
 };
 
 exports.PopoverTrigger = PopoverTrigger;

package/dist/cjs/components/ProgressBar/Progress.js

@@ -2,6 +2,8 @@
 
 var React = require('react');
 require('../../styles/calendar-cell.js');
+require('../../styles/date-picker-input-base.js');
+require('../../styles/date-segment.js');
 require('../../styles/groupButton.js');
 var progressBar = require('../../styles/progressBar.js');
 

package/dist/cjs/hooks/useCalendar.js

@@ -11,7 +11,7 @@ const useCalendar = ({ value, onChange }) => {
   const state = reactStately.useCalendarState({
     locale,
     createCalendar: date.createCalendar,
-    defaultValue: date$1.dateToCalendarDate(value),
+    defaultValue: value ? date$1.dateToCalendarDate(value) : null,
     onChange: (value2) => onChange(date$1.calendarDateToDate(value2))
   });
   const { calendarProps, title } = reactAria.useCalendar({}, state);

package/dist/cjs/hooks/useCalendarCell.js

@@ -14,8 +14,8 @@ const useCalendarCell = ({ state, date: date$1 }) => {
     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 isSameDayStart = rangeStateHighlitedRange && date$1 ? date.isSameDay(date$1, state?.highlightedRange?.start) : void 0;
+  const isSameDayEnd = rangeStateHighlitedRange && date$1 ? 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;

package/dist/cjs/hooks/useDatePickerInput.js

@@ -10,7 +10,7 @@ const useDatePickerInput = ({
   onChange
 }) => {
   const state = reactStately.useDatePickerState({
-    defaultValue: date.dateToCalendarDate(value),
+    defaultValue: value ? date.dateToCalendarDate(value) : null,
     onChange: (value2) => {
       onChange(date.calendarDateToDate(value2));
     }

package/dist/cjs/hooks/useDateRangePickerInput.js

@@ -10,14 +10,14 @@ const useDateRangePickerInput = ({
   onChange
 }) => {
   const state = reactStately.useDateRangePickerState({
-    defaultValue: {
+    defaultValue: value ? {
       start: date.dateToCalendarDate(value?.start),
       end: date.dateToCalendarDate(value?.end)
-    },
+    } : null,
     onChange: (value2) => {
       onChange({
-        start: date.calendarDateToDate(value2.start),
-        end: date.calendarDateToDate(value2.end)
+        start: value2 ? date.calendarDateToDate(value2.start) : void 0,
+        end: value2 ? date.calendarDateToDate(value2.end) : void 0
       });
     }
   });

package/dist/cjs/styles/date-picker-input-base.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var tailwindVariants = require('tailwind-variants');
+
+const datePickerInputBase = tailwindVariants.tv({
+  slots: {
+    icon: "cursor-pointer"
+  },
+  variants: {
+    disabled: {
+      true: {
+        icon: "text-secondary-light cursor-default"
+      }
+    }
+  }
+});
+
+exports.datePickerInputBase = datePickerInputBase;

package/dist/cjs/styles/date-segment.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var tailwindVariants = require('tailwind-variants');
+
+const dateSegment = tailwindVariants.tv({
+  slots: {
+    base: "focus:outline-none focus:bg-secondary-light"
+  },
+  variants: {
+    disabled: {
+      true: {
+        base: "text-secondary-light"
+      }
+    }
+  }
+});
+
+exports.dateSegment = dateSegment;

package/dist/cjs/utils/date.js

@@ -10,6 +10,7 @@ const dateToCalendarDate = (value) => {
   );
 };
 const calendarDateToDate = (value) => {
+  if (!value) return void 0;
   return value.toDate(date.getLocalTimeZone());
 };
 

package/dist/esm/components/Calendar/CalendarCell.js

@@ -8,6 +8,8 @@ import 'currency.js';
 import 'react-dropzone';
 import 'uuid';
 import { calendarCell } from '../../styles/calendar-cell.js';
+import '../../styles/date-picker-input-base.js';
+import '../../styles/date-segment.js';
 import '../../styles/groupButton.js';
 import '../../styles/progressBar.js';
 import { Td } from '../Table.js';

package/dist/esm/components/DatePicker/DatePickerInput.js

@@ -11,32 +11,28 @@ import 'uuid';
 import { Calendar } from '../Calendar/Calendar.js';
 import { Popover } from '../Popover/index.js';
 import { usePopoverContext } from '../Popover/Context.js';
-import { Content } from './Content.js';
+import { Content } from '../Select/Content.js';
 import { DateField } from './DateField.js';
 import { DatePickerInputBase } from './DatePickerInputBase.js';
 
 const DatePickerInputWithPopover = (props) => {
   const { setIsOpen } = usePopoverContext();
-  const { onChange, value, label, variants } = props;
+  const { onChange, value, label, variants, disabled } = props;
   const { fieldProps, state, ref } = useDatePickerInput({ value, onChange });
-  return /* @__PURE__ */ React__default.createElement("div", { ref, "data-testid": "date-picker-input" }, /* @__PURE__ */ React__default.createElement(Popover.Trigger, null, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement("div", { ref, "data-testid": "date-picker-input" }, /* @__PURE__ */ React__default.createElement(Popover.Trigger, { disabled: true }, /* @__PURE__ */ React__default.createElement(
     DatePickerInputBase,
     {
       variants: {
         ...variants,
         intent: state.isInvalid ? "error" : variants?.intent
       },
-      label
+      label,
+      disabled,
+      value,
+      onClean: () => state.setValue(null),
+      onToggle: () => setIsOpen((open) => !open)
     },
-    /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(
-      DateField,
-      {
-        ...fieldProps,
-        onChange: (value2) => {
-          state.setDateValue(value2);
-        }
-      }
-    ))
+    /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(DateField, { ...fieldProps, isDisabled: disabled }))
   )), /* @__PURE__ */ React__default.createElement(Popover.Content, { className: "bg-inherit shadow-none border-none" }, /* @__PURE__ */ React__default.createElement(
     Calendar,
     {

package/dist/esm/components/DatePicker/DatePickerInputBase.js

@@ -1,19 +1,59 @@
 import { labelStyle, inputBox } from '@tecsinapse/cortex-core';
-import React__default from 'react';
+import React__default, { useMemo } from 'react';
+import { IoMdClose } from 'react-icons/io';
 import { LiaCalendar } from 'react-icons/lia';
+import '../../styles/calendar-cell.js';
+import { datePickerInputBase } from '../../styles/date-picker-input-base.js';
+import '../../styles/date-segment.js';
+import '../../styles/groupButton.js';
+import '../../styles/progressBar.js';
 import { Input } from '../Input/index.js';
 
+const { icon } = datePickerInputBase();
 const DatePickerInputBase = ({
   children,
   variants,
-  label
+  label,
+  disabled = false,
+  value,
+  onClean,
+  onToggle
 }) => {
-  return /* @__PURE__ */ React__default.createElement(Input.Face, { variants, "data-testid": "date-picker-input-base" }, /* @__PURE__ */ React__default.createElement("span", { className: labelStyle({}) }, label), /* @__PURE__ */ React__default.createElement("div", { className: inputBox("", label, "w-full flex flex-row") }, children), /* @__PURE__ */ React__default.createElement(Input.Right, { className: "" }, /* @__PURE__ */ React__default.createElement(
-    LiaCalendar,
+  const showCloseIcon = useMemo(() => {
+    const hasDate = value != void 0;
+    const hasStartDate = value?.start != void 0;
+    const hasEndDate = value?.end != void 0;
+    if (value && "start" in value) return hasStartDate && hasEndDate;
+    return hasDate;
+  }, [value]);
+  return /* @__PURE__ */ React__default.createElement(Input.Face, { variants, "data-testid": "date-picker-input-base" }, /* @__PURE__ */ React__default.createElement("span", { className: labelStyle({}) }, label), /* @__PURE__ */ React__default.createElement("div", { className: inputBox("", label, "w-full flex flex-row") }, children), /* @__PURE__ */ React__default.createElement(Input.Right, { className: "mt-centi" }, showCloseIcon ? /* @__PURE__ */ React__default.createElement(
+    "button",
     {
-      className: "cursor-pointer mt-centi",
-      "data-testid": "date-picker-input-base-calendar"
-    }
+      onClick: onClean,
+      disabled,
+      "data-testid": "date-picker-input-base-clean-button"
+    },
+    /* @__PURE__ */ React__default.createElement(
+      IoMdClose,
+      {
+        className: icon({ disabled }),
+        "data-testid": "date-picker-input-base-clean-icon"
+      }
+    )
+  ) : /* @__PURE__ */ React__default.createElement(
+    "button",
+    {
+      onClick: onToggle,
+      disabled,
+      "data-testid": "date-picker-input-base-calendar-button"
+    },
+    /* @__PURE__ */ React__default.createElement(
+      LiaCalendar,
+      {
+        className: icon({ disabled }),
+        "data-testid": "date-picker-input-base-calendar-icon"
+      }
+    )
   )));
 };
 

package/dist/esm/components/DatePicker/DateRangePickerInput.js

@@ -17,36 +17,22 @@ import { DatePickerInputBase } from './DatePickerInputBase.js';
 
 const DateRangePickerInputWithPopover = (props) => {
   const { setIsOpen } = usePopoverContext();
-  const { onChange, value, label, variants } = props;
+  const { onChange, value, label, variants, disabled = false } = props;
   const { endFieldProps, startFieldProps, ref, state } = useDateRangePickerInput({ value, onChange });
-  return /* @__PURE__ */ React__default.createElement("div", { ref, "data-testid": "date-range-picker-input" }, /* @__PURE__ */ React__default.createElement(Popover.Trigger, null, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement("div", { ref, "data-testid": "date-range-picker-input" }, /* @__PURE__ */ React__default.createElement(Popover.Trigger, { disabled: true }, /* @__PURE__ */ React__default.createElement(
     DatePickerInputBase,
     {
       variants: {
         ...variants,
         intent: state.isInvalid ? "error" : variants?.intent
       },
-      label
+      label,
+      disabled,
+      value,
+      onClean: () => state.setValue(null),
+      onToggle: () => setIsOpen((open) => !open)
     },
-    /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-row gap-x-micro items-center" }, /* @__PURE__ */ React__default.createElement(
-      DateField,
-      {
-        ...startFieldProps,
-        value: dateToCalendarDate(value?.start),
-        onChange: (value2) => {
-          state.setDate("start", value2);
-        }
-      }
-    ), /* @__PURE__ */ React__default.createElement("span", null, "-"), /* @__PURE__ */ React__default.createElement(
-      DateField,
-      {
-        ...endFieldProps,
-        value: dateToCalendarDate(value?.end),
-        onChange: (value2) => {
-          state.setDate("end", value2);
-        }
-      }
-    ))
+    /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-row gap-x-micro items-center" }, /* @__PURE__ */ React__default.createElement(DateField, { ...startFieldProps, isDisabled: disabled }), /* @__PURE__ */ React__default.createElement("span", null, "-"), /* @__PURE__ */ React__default.createElement(DateField, { ...endFieldProps, isDisabled: disabled }))
   )), /* @__PURE__ */ React__default.createElement(Popover.Content, { className: "bg-inherit shadow-none border-none" }, /* @__PURE__ */ React__default.createElement(
     RangeCalendar,
     {

package/dist/esm/components/DatePicker/DateSegment.js

@@ -1,6 +1,12 @@
 import React__default from 'react';
 import { useDateSegment } from 'react-aria';
+import '../../styles/calendar-cell.js';
+import '../../styles/date-picker-input-base.js';
+import { dateSegment } from '../../styles/date-segment.js';
+import '../../styles/groupButton.js';
+import '../../styles/progressBar.js';
 
+const { base } = dateSegment();
 const DateSegment = ({ segment, state }) => {
   const ref = React__default.useRef(null);
   const { segmentProps } = useDateSegment(segment, state, ref);
@@ -9,7 +15,7 @@ const DateSegment = ({ segment, state }) => {
     {
       ...segmentProps,
       ref,
-      className: "focus:outline-none focus:bg-secondary-light"
+      className: base({ disabled: state.isDisabled })
     },
     segment.text
   );

package/dist/esm/components/GroupButton.js

@@ -1,6 +1,8 @@
 import clsx from 'clsx';
 import React__default from 'react';
 import '../styles/calendar-cell.js';
+import '../styles/date-picker-input-base.js';
+import '../styles/date-segment.js';
 import { groupButton } from '../styles/groupButton.js';
 import '../styles/progressBar.js';
 

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

@@ -2,10 +2,23 @@ import '@internationalized/date';
 import { cloneWithProps } from '../../utils/react.js';
 import { usePopoverContext } from './Context.js';
 
-const PopoverTrigger = ({ children }) => {
+const isDisabledProps = {
+  onClick: () => void 0,
+  onKeyDown: () => void 0,
+  onMouseDown: () => void 0,
+  onKeyUp: () => void 0,
+  onPointerDown: () => void 0
+};
+const PopoverTrigger = ({
+  children,
+  disabled = false
+}) => {
   const { triggerProps } = usePopoverContext();
-  const isDisabled = children.props?.disabled;
-  return cloneWithProps(children, isDisabled ? {} : triggerProps);
+  const isDisabled = disabled ?? children.props?.disabled;
+  return cloneWithProps(children, {
+    ...triggerProps,
+    ...isDisabled ? isDisabledProps : {}
+  });
 };
 
 export { PopoverTrigger };

package/dist/esm/components/ProgressBar/Progress.js

@@ -1,5 +1,7 @@
 import React__default from 'react';
 import '../../styles/calendar-cell.js';
+import '../../styles/date-picker-input-base.js';
+import '../../styles/date-segment.js';
 import '../../styles/groupButton.js';
 import { ProgressVariants } from '../../styles/progressBar.js';
 

package/dist/esm/hooks/useCalendar.js

@@ -9,7 +9,7 @@ const useCalendar = ({ value, onChange }) => {
   const state = useCalendarState({
     locale,
     createCalendar,
-    defaultValue: dateToCalendarDate(value),
+    defaultValue: value ? dateToCalendarDate(value) : null,
     onChange: (value2) => onChange(calendarDateToDate(value2))
   });
   const { calendarProps, title } = useCalendar$1({}, state);

package/dist/esm/hooks/useCalendarCell.js

@@ -12,8 +12,8 @@ const useCalendarCell = ({ state, date }) => {
     formattedDate
   } = useCalendarCell$1({ date }, state, ref);
   const rangeStateHighlitedRange = state?.highlightedRange;
-  const isSameDayStart = rangeStateHighlitedRange ? isSameDay(date, state?.highlightedRange?.start) : void 0;
-  const isSameDayEnd = rangeStateHighlitedRange ? isSameDay(date, state?.highlightedRange?.end) : void 0;
+  const isSameDayStart = rangeStateHighlitedRange && date ? isSameDay(date, state?.highlightedRange?.start) : void 0;
+  const isSameDayEnd = rangeStateHighlitedRange && date ? isSameDay(date, state?.highlightedRange?.end) : void 0;
   const isSelectionStart = isSameDayStart && !isSameDayEnd;
   const isSelectionEnd = isSameDayEnd && !isSameDayStart;
   const inRange = date > rangeStateHighlitedRange?.start && date < rangeStateHighlitedRange?.end;

package/dist/esm/hooks/useDatePickerInput.js

@@ -8,7 +8,7 @@ const useDatePickerInput = ({
   onChange
 }) => {
   const state = useDatePickerState({
-    defaultValue: dateToCalendarDate(value),
+    defaultValue: value ? dateToCalendarDate(value) : null,
     onChange: (value2) => {
       onChange(calendarDateToDate(value2));
     }

package/dist/esm/hooks/useDateRangePickerInput.js

@@ -8,14 +8,14 @@ const useDateRangePickerInput = ({
   onChange
 }) => {
   const state = useDateRangePickerState({
-    defaultValue: {
+    defaultValue: value ? {
       start: dateToCalendarDate(value?.start),
       end: dateToCalendarDate(value?.end)
-    },
+    } : null,
     onChange: (value2) => {
       onChange({
-        start: calendarDateToDate(value2.start),
-        end: calendarDateToDate(value2.end)
+        start: value2 ? calendarDateToDate(value2.start) : void 0,
+        end: value2 ? calendarDateToDate(value2.end) : void 0
       });
     }
   });

package/dist/esm/styles/date-picker-input-base.js

@@ -0,0 +1,16 @@
+import { tv } from 'tailwind-variants';
+
+const datePickerInputBase = tv({
+  slots: {
+    icon: "cursor-pointer"
+  },
+  variants: {
+    disabled: {
+      true: {
+        icon: "text-secondary-light cursor-default"
+      }
+    }
+  }
+});
+
+export { datePickerInputBase };

package/dist/esm/styles/date-segment.js

@@ -0,0 +1,16 @@
+import { tv } from 'tailwind-variants';
+
+const dateSegment = tv({
+  slots: {
+    base: "focus:outline-none focus:bg-secondary-light"
+  },
+  variants: {
+    disabled: {
+      true: {
+        base: "text-secondary-light"
+      }
+    }
+  }
+});
+
+export { dateSegment };

package/dist/esm/utils/date.js

@@ -8,6 +8,7 @@ const dateToCalendarDate = (value) => {
   );
 };
 const calendarDateToDate = (value) => {
+  if (!value) return void 0;
   return value.toDate(getLocalTimeZone());
 };
 

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 interface CalendarProps {
     value?: Date;
-    onChange: (value: Date) => void;
+    onChange: (value?: Date) => void;
 }
 export declare const Calendar: ({ value, onChange }: CalendarProps) => JSX.Element;
 export {};

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export type DateRange = {
-    start: Date;
-    end: Date;
+    start?: Date;
+    end?: Date;
 };
 export interface RangeCalendarProps {
     value?: DateRange;

package/dist/types/components/DatePicker/DatePickerInput.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { InputPropsBase } from '../Input';
-export interface DatePickerInputProps extends InputPropsBase {
+import { InputProps } from '../Input';
+export interface DatePickerInputProps extends Omit<InputProps, 'value' | 'onChange'> {
     value?: Date;
-    onChange: (date: Date) => void;
+    onChange: (date?: Date) => void;
 }
 export declare const DatePickerInput: (props: DatePickerInputProps) => JSX.Element;

package/dist/types/components/DatePicker/DatePickerInputBase.d.ts

@@ -1,7 +1,12 @@
 import React from 'react';
-import { InputPropsBase } from '../Input';
-interface DatePickerInputBaseProps extends InputPropsBase {
+import { DateRange } from '../Calendar';
+import { InputProps } from '../Input';
+interface DatePickerInputBaseProps extends Omit<InputProps, 'value' | 'onChange'> {
     children: React.ReactElement;
+    value?: Date | DateRange;
+    onClean?: () => void;
+    onToggle?: () => void;
+    disabled?: boolean;
 }
-export declare const DatePickerInputBase: ({ children, variants, label, }: DatePickerInputBaseProps) => JSX.Element;
+export declare const DatePickerInputBase: ({ children, variants, label, disabled, value, onClean, onToggle, }: DatePickerInputBaseProps) => JSX.Element;
 export {};

package/dist/types/components/DatePicker/DateRangePickerInput.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { DateRange } from '../Calendar/RangeCalendar';
-import { InputPropsBase } from '../Input';
-export interface DateRangePickerInputProps extends InputPropsBase {
+import { InputProps } from '../Input';
+export interface DateRangePickerInputProps extends Omit<InputProps, 'value' | 'onChange'> {
     value?: DateRange;
-    onChange: (date: DateRange) => void;
+    onChange: (date?: DateRange) => void;
 }
 export declare const DateRangePickerInput: (props: DateRangePickerInputProps) => JSX.Element;

package/dist/types/components/Popover/Trigger.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 export interface PopoverTriggerProps {
     children: React.ReactElement;
+    disabled?: boolean;
 }
-export declare const PopoverTrigger: ({ children }: PopoverTriggerProps) => React.FunctionComponentElement<any>;
+export declare const PopoverTrigger: ({ children, disabled, }: PopoverTriggerProps) => React.FunctionComponentElement<any>;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export declare const Popover: {
     Root: ({ children, placement, trigger, ...props }: import("./Root").PopoverRootProps) => JSX.Element;
-    Trigger: ({ children }: import("./Trigger").PopoverTriggerProps) => import("react").FunctionComponentElement<any>;
+    Trigger: ({ children, disabled, }: import("./Trigger").PopoverTriggerProps) => import("react").FunctionComponentElement<any>;
     Content: ({ children, className, modal, ...rest }: import("./Content").PopoverContentProps) => JSX.Element;
     Provider: ({ children, placement, trigger, ...props }: import("./Provider").PopoverProviderProps) => JSX.Element;
 };

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

@@ -1,6 +1,6 @@
 interface useCalendarProps {
     value?: Date;
-    onChange: (value: Date) => void;
+    onChange: (value?: Date) => void;
 }
 export declare const useCalendar: ({ value, onChange }: useCalendarProps) => {
     calendarProps: import("@react-types/shared").DOMAttributes<import("@react-types/shared").FocusableElement>;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 interface useDatePickerInputProps {
     value?: Date;
-    onChange: (date: Date) => void;
+    onChange: (date?: Date) => void;
 }
 export declare const useDatePickerInput: ({ value, onChange, }: useDatePickerInputProps) => {
     fieldProps: import("react-aria").AriaDatePickerProps<import("react-aria").DateValue>;

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

@@ -2,7 +2,7 @@
 import { DateRange } from '../components';
 interface useDateRangePickerInputProps {
     value?: DateRange;
-    onChange: (date: DateRange) => void;
+    onChange: (date?: DateRange) => void;
 }
 export declare const useDateRangePickerInput: ({ value, onChange, }: useDateRangePickerInputProps) => {
     startFieldProps: import("react-aria").AriaDatePickerProps<import("react-aria").DateValue>;

package/dist/types/styles/date-picker-input-base.d.ts

@@ -0,0 +1,49 @@
+export declare const datePickerInputBase: import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            icon: string;
+        };
+    };
+}, {
+    icon: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    disabled: {
+        true: {
+            icon: string;
+        };
+    };
+}, {
+    disabled: {
+        true: {
+            icon: string;
+        };
+    };
+}>, {
+    disabled: {
+        true: {
+            icon: string;
+        };
+    };
+}, {
+    icon: string;
+}, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            icon: string;
+        };
+    };
+}, {
+    icon: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    disabled: {
+        true: {
+            icon: string;
+        };
+    };
+}, {
+    disabled: {
+        true: {
+            icon: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;

package/dist/types/styles/date-segment.d.ts

@@ -0,0 +1,49 @@
+export declare const dateSegment: import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+}>, {
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;

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

@@ -1,3 +1,5 @@
 export * from './calendar-cell';
+export * from './date-picker-input-base';
+export * from './date-segment';
 export * from './groupButton';
 export * from './progressBar';

package/dist/types/styles/menubar.d.ts

@@ -172,16 +172,16 @@ export declare const mostUsedItem: import("tailwind-variants").TVReturnType<{
 export declare const item: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
-            container?: import("tailwind-merge").ClassNameValue;
             icon?: import("tailwind-merge").ClassNameValue;
+            container?: import("tailwind-merge").ClassNameValue;
             textBehavior?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import("tailwind-merge").ClassNameValue | {
-            container?: import("tailwind-merge").ClassNameValue;
             icon?: import("tailwind-merge").ClassNameValue;
+            container?: import("tailwind-merge").ClassNameValue;
             textBehavior?: import("tailwind-merge").ClassNameValue;
         };
     };
@@ -192,16 +192,16 @@ export declare const item: import("tailwind-variants").TVReturnType<{
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
-            container?: import("tailwind-merge").ClassNameValue;
             icon?: import("tailwind-merge").ClassNameValue;
+            container?: import("tailwind-merge").ClassNameValue;
             textBehavior?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}>, {
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
-            container?: import("tailwind-merge").ClassNameValue;
             icon?: import("tailwind-merge").ClassNameValue;
+            container?: import("tailwind-merge").ClassNameValue;
             textBehavior?: import("tailwind-merge").ClassNameValue;
         };
     };
@@ -216,8 +216,8 @@ export declare const item: import("tailwind-variants").TVReturnType<{
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
-            container?: import("tailwind-merge").ClassNameValue;
             icon?: import("tailwind-merge").ClassNameValue;
+            container?: import("tailwind-merge").ClassNameValue;
             textBehavior?: import("tailwind-merge").ClassNameValue;
         };
     };

package/dist/types/utils/date.d.ts

@@ -1,3 +1,3 @@
 import { CalendarDate } from '@internationalized/date';
 export declare const dateToCalendarDate: (value?: Date) => CalendarDate;
-export declare const calendarDateToDate: (value: CalendarDate) => Date;
+export declare const calendarDateToDate: (value: CalendarDate) => Date | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.9.12-beta.0",
+  "version": "1.9.12-beta.1",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -48,5 +48,5 @@
     "react-dom": ">=18.0.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "187bb429d8232a5dea24c571ed04d833667ec9e3"
+  "gitHead": "8f626686ff07da013f3d9ea353b94dfe615cd087"
 }