@clickhouse/click-ui 0.0.202 → 0.0.203

package/dist/click-ui.bundled.es.js

@@ -17126,13 +17126,6 @@ pt.svg.withConfig({
     }
   `);
 const locale = "en-US";
-const weekdayFormatter = new Intl.DateTimeFormat(locale, {
-  weekday: "short"
-});
-const headerDateFormatter = new Intl.DateTimeFormat(locale, {
-  month: "short",
-  year: "numeric"
-});
 const selectedDateFormatter = new Intl.DateTimeFormat(locale, {
   day: "2-digit",
   month: "short",
@@ -17140,20 +17133,41 @@ const selectedDateFormatter = new Intl.DateTimeFormat(locale, {
 });
 const explicitWidth = "250px";
 const HighlightedInputWrapper = pt(InputWrapper).withConfig({
-  componentId: "sc-1kfphgn-0"
+  componentId: "sc-1m6g9rm-0"
 })(["", " width:", ";}"], ({
   $isActive,
   theme: theme2
 }) => {
   return `border: ${theme2.click.datePicker.dateOption.stroke} solid ${$isActive ? theme2.click.datePicker.dateOption.color.stroke.active : theme2.click.field.color.stroke.default};`;
 }, explicitWidth);
+const DatePickerInput = ({
+  isActive,
+  disabled,
+  id,
+  placeholder,
+  selectedDate
+}) => {
+  const defaultId = useId();
+  const formattedSelectedDate = selectedDate instanceof Date ? selectedDateFormatter.format(selectedDate) : "";
+  return /* @__PURE__ */ jsxs(HighlightedInputWrapper, { $isActive: isActive, disabled, id: id ?? defaultId, children: [
+    /* @__PURE__ */ jsx(SvgImage, { name: "calendar" }),
+    /* @__PURE__ */ jsx(InputElement, { "data-testid": "datepicker-input", placeholder, readOnly: true, value: formattedSelectedDate })
+  ] });
+};
+const weekdayFormatter = new Intl.DateTimeFormat(locale, {
+  weekday: "short"
+});
+const headerDateFormatter = new Intl.DateTimeFormat(locale, {
+  month: "short",
+  year: "numeric"
+});
 const DatePickerContainer = pt(Container).withConfig({
-  componentId: "sc-1kfphgn-1"
+  componentId: "sc-1m6g9rm-1"
 })(["background:", ";"], ({
   theme: theme2
 }) => theme2.click.datePicker.dateOption.color.background.default);
 const UnselectableTitle = pt.h2.withConfig({
-  componentId: "sc-1kfphgn-2"
+  componentId: "sc-1m6g9rm-2"
 })(["", " user-select:none;"], ({
   theme: theme2
 }) => `
@@ -17161,16 +17175,14 @@ const UnselectableTitle = pt.h2.withConfig({
     font: ${theme2.click.datePicker.typography.title.default};
   `);
 const DateTable = pt.table.withConfig({
-  componentId: "sc-1kfphgn-3"
-})(["border-collapse:separate;border-spacing:0;font:", " table-layout:fixed;user-select:none;width:", ";thead tr{height:", ";}tbody{cursor:pointer;}td,th{", ";padding:4px;}"], ({
+  componentId: "sc-1m6g9rm-3"
+})(["border-collapse:separate;border-spacing:0;font:", ";table-layout:fixed;user-select:none;width:", ";thead tr{height:", ";}tbody{cursor:pointer;}td,th{padding:4px;}"], ({
   theme: theme2
 }) => theme2.typography.styles.product.text.normal.md, explicitWidth, ({
   theme: theme2
-}) => theme2.click.datePicker.dateOption.size.height, ({
-  theme: theme2
-}) => `border: ${theme2.click.datePicker.dateOption.stroke} solid ${theme2.click.datePicker.dateOption.color.stroke.default}`);
+}) => theme2.click.datePicker.dateOption.size.height);
 const DateTableHeader = pt.th.withConfig({
-  componentId: "sc-1kfphgn-4"
+  componentId: "sc-1m6g9rm-4"
 })(["", " width:14%;"], ({
   theme: theme2
 }) => `
@@ -17178,10 +17190,11 @@ const DateTableHeader = pt.th.withConfig({
     font: ${theme2.click.datePicker.typography.daytitle.default};
   `);
 const DateTableCell = pt.td.withConfig({
-  componentId: "sc-1kfphgn-5"
+  componentId: "sc-1m6g9rm-5"
 })(["", " ", " ", " text-align:center;", " &:hover{", ";}"], ({
   theme: theme2
 }) => `
+    border: ${theme2.click.datePicker.dateOption.stroke} solid ${theme2.click.datePicker.dateOption.color.stroke.default};
     border-radius: ${theme2.click.datePicker.dateOption.radii.default};
     font: ${theme2.click.datePicker.dateOption.typography.label.default};
   `, ({
@@ -17203,50 +17216,35 @@ const DateTableCell = pt.td.withConfig({
 }) => $isToday && `font: ${theme2.click.datePicker.dateOption.typography.label.active};`, ({
   $isDisabled,
   theme: theme2
-}) => `border: ${theme2.click.datePicker.dateOption.stroke} solid ${$isDisabled ? theme2.click.datePicker.dateOption.color.stroke.disabled : theme2.click.datePicker.dateOption.color.stroke.hover}`);
-const DatePickerInput = ({
-  isActive,
-  disabled,
-  id,
-  placeholder,
-  selectedDate
-}) => {
-  const defaultId = useId();
-  const formattedSelectedDate = selectedDate instanceof Date ? selectedDateFormatter.format(selectedDate) : "";
-  return /* @__PURE__ */ jsxs(HighlightedInputWrapper, { $isActive: isActive, disabled, id: id ?? defaultId, children: [
-    /* @__PURE__ */ jsx(SvgImage, { name: "calendar" }),
-    /* @__PURE__ */ jsx(InputElement, { "data-testid": "datepicker-input", placeholder, readOnly: true, value: formattedSelectedDate })
-  ] });
-};
-const Calendar = ({
-  closeDatepicker,
-  futureDatesDisabled,
-  selectedDate,
-  setSelectedDate
+}) => `border: ${theme2.click.datePicker.dateOption.stroke} solid ${$isDisabled ? theme2.click.datePicker.dateOption.color.stroke.disabled : theme2.click.datePicker.dateOption.color.stroke.hover};
+
+
+    border-radius: ${theme2.click.datePicker.dateOption.radii.default};`);
+const CalendarRenderer = ({
+  calendarOptions = {},
+  children,
+  ...props
 }) => {
-  const calendarOptions = {
-    defaultWeekStart: 1
-  };
-  if (selectedDate) {
-    calendarOptions.defaultDate = selectedDate;
-  }
   const {
     body,
     headers,
     month,
     navigation,
     year
-  } = useCalendar(calendarOptions);
-  const handleNextClick = () => {
+  } = useCalendar({
+    defaultWeekStart: 1,
+    ...calendarOptions
+  });
+  const handleNextClick = useCallback(() => {
     navigation.toNext();
-  };
-  const handlePreviousClick = () => {
+  }, [navigation]);
+  const handlePreviousClick = useCallback(() => {
     navigation.toPrev();
-  };
+  }, [navigation]);
   const headerDate = /* @__PURE__ */ new Date();
   headerDate.setMonth(month);
   headerDate.setFullYear(year);
-  return /* @__PURE__ */ jsxs(DatePickerContainer, { "data-testid": "datepicker-calendar-container", isResponsive: false, fillWidth: false, orientation: "vertical", padding: "sm", children: [
+  return /* @__PURE__ */ jsxs(DatePickerContainer, { "data-testid": "datepicker-calendar-container", isResponsive: false, fillWidth: false, orientation: "vertical", padding: "sm", ...props, children: [
     /* @__PURE__ */ jsxs(Container, { isResponsive: false, justifyContent: "space-between", orientation: "horizontal", children: [
       /* @__PURE__ */ jsx(IconButton$1, { icon: "chevron-left", onClick: handlePreviousClick, size: "sm", type: "ghost" }),
       /* @__PURE__ */ jsx(UnselectableTitle, { children: headerDateFormatter.format(headerDate) }),
@@ -17259,32 +17257,42 @@ const Calendar = ({
       }) => {
         return /* @__PURE__ */ jsx(DateTableHeader, { children: weekdayFormatter.format(date) }, key);
       }) }) }),
-      /* @__PURE__ */ jsx("tbody", { children: body.value.map(({
-        key: weekKey,
-        value: week
-      }) => {
-        return /* @__PURE__ */ jsx("tr", { children: week.map(({
-          date,
-          isCurrentMonth,
-          key: dayKey,
-          value: fullDate
-        }) => {
-          const isSelected = selectedDate ? isSameDate(selectedDate, fullDate) : false;
-          const today = /* @__PURE__ */ new Date();
-          const isCurrentDate = isSameDate(today, fullDate);
-          const isDisabled = futureDatesDisabled ? fullDate > today : false;
-          return /* @__PURE__ */ jsx(DateTableCell, { $isCurrentMonth: isCurrentMonth, $isDisabled: isDisabled, $isSelected: isSelected, $isToday: isCurrentDate, onClick: () => {
-            if (isDisabled) {
-              return false;
-            }
-            setSelectedDate(fullDate);
-            closeDatepicker();
-          }, children: date }, dayKey);
-        }) }, weekKey);
-      }) })
+      /* @__PURE__ */ jsx("tbody", { children: children(body) })
     ] })
   ] });
 };
+const Calendar = ({
+  calendarBody,
+  closeDatepicker,
+  futureDatesDisabled,
+  selectedDate,
+  setSelectedDate
+}) => {
+  return calendarBody.value.map(({
+    key: weekKey,
+    value: week
+  }) => {
+    return /* @__PURE__ */ jsx("tr", { children: week.map(({
+      date,
+      isCurrentMonth,
+      key: dayKey,
+      value: fullDate
+    }) => {
+      const isSelected = selectedDate ? isSameDate(selectedDate, fullDate) : false;
+      const today = /* @__PURE__ */ new Date();
+      const isCurrentDate = isSameDate(today, fullDate);
+      const isDisabled = futureDatesDisabled ? fullDate > today : false;
+      const handleClick = () => {
+        if (isDisabled) {
+          return false;
+        }
+        setSelectedDate(fullDate);
+        closeDatepicker();
+      };
+      return /* @__PURE__ */ jsx(DateTableCell, { $isCurrentMonth: isCurrentMonth, $isDisabled: isDisabled, $isSelected: isSelected, $isToday: isCurrentDate, onClick: handleClick, children: date }, dayKey);
+    }) }, weekKey);
+  });
+};
 const DatePicker = ({
   date,
   disabled = false,
@@ -17294,6 +17302,10 @@ const DatePicker = ({
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [selectedDate, setSelectedDate] = useState();
+  const calendarOptions = {};
+  if (selectedDate) {
+    calendarOptions.defaultDate = selectedDate;
+  }
   useEffect(() => {
     if (date) {
       setSelectedDate(date);
@@ -17307,8 +17319,8 @@ const DatePicker = ({
     onSelectDate(selectedDate2);
   };
   return /* @__PURE__ */ jsxs(Dropdown, { onOpenChange: setIsOpen, open: isOpen, children: [
-    /* @__PURE__ */ jsx(Dropdown.Trigger, { disabled, children: /* @__PURE__ */ jsx(DatePickerInput, { "data-testid": "datepicker-inpcontainer", disabled, isActive: isOpen, placeholder, selectedDate }) }),
-    /* @__PURE__ */ jsx(Dropdown.Content, { align: "start", children: /* @__PURE__ */ jsx(Calendar, { closeDatepicker: closeDatePicker, futureDatesDisabled, selectedDate, setSelectedDate: handleSelectDate }) })
+    /* @__PURE__ */ jsx(Dropdown.Trigger, { disabled, children: /* @__PURE__ */ jsx(DatePickerInput, { "data-testid": "datepicker-input-container", disabled, isActive: isOpen, placeholder, selectedDate }) }),
+    /* @__PURE__ */ jsx(Dropdown.Content, { align: "start", children: /* @__PURE__ */ jsx(CalendarRenderer, { calendarOptions, children: (body) => /* @__PURE__ */ jsx(Calendar, { calendarBody: body, closeDatepicker: closeDatePicker, futureDatesDisabled, selectedDate, setSelectedDate: handleSelectDate }) }) })
   ] });
 };
 const $5d3850c4d0b4e6c7$var$DIALOG_NAME = "Dialog";

package/dist/click-ui.bundled.umd.js

@@ -17142,13 +17142,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
   `);
   const locale = "en-US";
-  const weekdayFormatter = new Intl.DateTimeFormat(locale, {
-    weekday: "short"
-  });
-  const headerDateFormatter = new Intl.DateTimeFormat(locale, {
-    month: "short",
-    year: "numeric"
-  });
   const selectedDateFormatter = new Intl.DateTimeFormat(locale, {
     day: "2-digit",
     month: "short",
@@ -17156,20 +17149,41 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   });
   const explicitWidth = "250px";
   const HighlightedInputWrapper = pt(InputWrapper).withConfig({
-    componentId: "sc-1kfphgn-0"
+    componentId: "sc-1m6g9rm-0"
   })(["", " width:", ";}"], ({
     $isActive,
     theme: theme2
   }) => {
     return `border: ${theme2.click.datePicker.dateOption.stroke} solid ${$isActive ? theme2.click.datePicker.dateOption.color.stroke.active : theme2.click.field.color.stroke.default};`;
   }, explicitWidth);
+  const DatePickerInput = ({
+    isActive,
+    disabled,
+    id,
+    placeholder,
+    selectedDate
+  }) => {
+    const defaultId = React.useId();
+    const formattedSelectedDate = selectedDate instanceof Date ? selectedDateFormatter.format(selectedDate) : "";
+    return /* @__PURE__ */ jsxRuntime.jsxs(HighlightedInputWrapper, { $isActive: isActive, disabled, id: id ?? defaultId, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "calendar" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InputElement, { "data-testid": "datepicker-input", placeholder, readOnly: true, value: formattedSelectedDate })
+    ] });
+  };
+  const weekdayFormatter = new Intl.DateTimeFormat(locale, {
+    weekday: "short"
+  });
+  const headerDateFormatter = new Intl.DateTimeFormat(locale, {
+    month: "short",
+    year: "numeric"
+  });
   const DatePickerContainer = pt(Container).withConfig({
-    componentId: "sc-1kfphgn-1"
+    componentId: "sc-1m6g9rm-1"
   })(["background:", ";"], ({
     theme: theme2
   }) => theme2.click.datePicker.dateOption.color.background.default);
   const UnselectableTitle = pt.h2.withConfig({
-    componentId: "sc-1kfphgn-2"
+    componentId: "sc-1m6g9rm-2"
   })(["", " user-select:none;"], ({
     theme: theme2
   }) => `
@@ -17177,16 +17191,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     font: ${theme2.click.datePicker.typography.title.default};
   `);
   const DateTable = pt.table.withConfig({
-    componentId: "sc-1kfphgn-3"
-  })(["border-collapse:separate;border-spacing:0;font:", " table-layout:fixed;user-select:none;width:", ";thead tr{height:", ";}tbody{cursor:pointer;}td,th{", ";padding:4px;}"], ({
+    componentId: "sc-1m6g9rm-3"
+  })(["border-collapse:separate;border-spacing:0;font:", ";table-layout:fixed;user-select:none;width:", ";thead tr{height:", ";}tbody{cursor:pointer;}td,th{padding:4px;}"], ({
     theme: theme2
   }) => theme2.typography.styles.product.text.normal.md, explicitWidth, ({
     theme: theme2
-  }) => theme2.click.datePicker.dateOption.size.height, ({
-    theme: theme2
-  }) => `border: ${theme2.click.datePicker.dateOption.stroke} solid ${theme2.click.datePicker.dateOption.color.stroke.default}`);
+  }) => theme2.click.datePicker.dateOption.size.height);
   const DateTableHeader = pt.th.withConfig({
-    componentId: "sc-1kfphgn-4"
+    componentId: "sc-1m6g9rm-4"
   })(["", " width:14%;"], ({
     theme: theme2
   }) => `
@@ -17194,10 +17206,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     font: ${theme2.click.datePicker.typography.daytitle.default};
   `);
   const DateTableCell = pt.td.withConfig({
-    componentId: "sc-1kfphgn-5"
+    componentId: "sc-1m6g9rm-5"
   })(["", " ", " ", " text-align:center;", " &:hover{", ";}"], ({
     theme: theme2
   }) => `
+    border: ${theme2.click.datePicker.dateOption.stroke} solid ${theme2.click.datePicker.dateOption.color.stroke.default};
     border-radius: ${theme2.click.datePicker.dateOption.radii.default};
     font: ${theme2.click.datePicker.dateOption.typography.label.default};
   `, ({
@@ -17219,50 +17232,35 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   }) => $isToday && `font: ${theme2.click.datePicker.dateOption.typography.label.active};`, ({
     $isDisabled,
     theme: theme2
-  }) => `border: ${theme2.click.datePicker.dateOption.stroke} solid ${$isDisabled ? theme2.click.datePicker.dateOption.color.stroke.disabled : theme2.click.datePicker.dateOption.color.stroke.hover}`);
-  const DatePickerInput = ({
-    isActive,
-    disabled,
-    id,
-    placeholder,
-    selectedDate
-  }) => {
-    const defaultId = React.useId();
-    const formattedSelectedDate = selectedDate instanceof Date ? selectedDateFormatter.format(selectedDate) : "";
-    return /* @__PURE__ */ jsxRuntime.jsxs(HighlightedInputWrapper, { $isActive: isActive, disabled, id: id ?? defaultId, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "calendar" }),
-      /* @__PURE__ */ jsxRuntime.jsx(InputElement, { "data-testid": "datepicker-input", placeholder, readOnly: true, value: formattedSelectedDate })
-    ] });
-  };
-  const Calendar = ({
-    closeDatepicker,
-    futureDatesDisabled,
-    selectedDate,
-    setSelectedDate
+  }) => `border: ${theme2.click.datePicker.dateOption.stroke} solid ${$isDisabled ? theme2.click.datePicker.dateOption.color.stroke.disabled : theme2.click.datePicker.dateOption.color.stroke.hover};
+
+
+    border-radius: ${theme2.click.datePicker.dateOption.radii.default};`);
+  const CalendarRenderer = ({
+    calendarOptions = {},
+    children,
+    ...props
   }) => {
-    const calendarOptions = {
-      defaultWeekStart: 1
-    };
-    if (selectedDate) {
-      calendarOptions.defaultDate = selectedDate;
-    }
     const {
       body,
       headers,
       month,
       navigation,
       year
-    } = useCalendar(calendarOptions);
-    const handleNextClick = () => {
+    } = useCalendar({
+      defaultWeekStart: 1,
+      ...calendarOptions
+    });
+    const handleNextClick = React.useCallback(() => {
       navigation.toNext();
-    };
-    const handlePreviousClick = () => {
+    }, [navigation]);
+    const handlePreviousClick = React.useCallback(() => {
       navigation.toPrev();
-    };
+    }, [navigation]);
     const headerDate = /* @__PURE__ */ new Date();
     headerDate.setMonth(month);
     headerDate.setFullYear(year);
-    return /* @__PURE__ */ jsxRuntime.jsxs(DatePickerContainer, { "data-testid": "datepicker-calendar-container", isResponsive: false, fillWidth: false, orientation: "vertical", padding: "sm", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(DatePickerContainer, { "data-testid": "datepicker-calendar-container", isResponsive: false, fillWidth: false, orientation: "vertical", padding: "sm", ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Container, { isResponsive: false, justifyContent: "space-between", orientation: "horizontal", children: [
         /* @__PURE__ */ jsxRuntime.jsx(IconButton$1, { icon: "chevron-left", onClick: handlePreviousClick, size: "sm", type: "ghost" }),
         /* @__PURE__ */ jsxRuntime.jsx(UnselectableTitle, { children: headerDateFormatter.format(headerDate) }),
@@ -17275,32 +17273,42 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         }) => {
           return /* @__PURE__ */ jsxRuntime.jsx(DateTableHeader, { children: weekdayFormatter.format(date) }, key);
         }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: body.value.map(({
-          key: weekKey,
-          value: week
-        }) => {
-          return /* @__PURE__ */ jsxRuntime.jsx("tr", { children: week.map(({
-            date,
-            isCurrentMonth,
-            key: dayKey,
-            value: fullDate
-          }) => {
-            const isSelected = selectedDate ? isSameDate(selectedDate, fullDate) : false;
-            const today = /* @__PURE__ */ new Date();
-            const isCurrentDate = isSameDate(today, fullDate);
-            const isDisabled = futureDatesDisabled ? fullDate > today : false;
-            return /* @__PURE__ */ jsxRuntime.jsx(DateTableCell, { $isCurrentMonth: isCurrentMonth, $isDisabled: isDisabled, $isSelected: isSelected, $isToday: isCurrentDate, onClick: () => {
-              if (isDisabled) {
-                return false;
-              }
-              setSelectedDate(fullDate);
-              closeDatepicker();
-            }, children: date }, dayKey);
-          }) }, weekKey);
-        }) })
+        /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: children(body) })
       ] })
     ] });
   };
+  const Calendar = ({
+    calendarBody,
+    closeDatepicker,
+    futureDatesDisabled,
+    selectedDate,
+    setSelectedDate
+  }) => {
+    return calendarBody.value.map(({
+      key: weekKey,
+      value: week
+    }) => {
+      return /* @__PURE__ */ jsxRuntime.jsx("tr", { children: week.map(({
+        date,
+        isCurrentMonth,
+        key: dayKey,
+        value: fullDate
+      }) => {
+        const isSelected = selectedDate ? isSameDate(selectedDate, fullDate) : false;
+        const today = /* @__PURE__ */ new Date();
+        const isCurrentDate = isSameDate(today, fullDate);
+        const isDisabled = futureDatesDisabled ? fullDate > today : false;
+        const handleClick = () => {
+          if (isDisabled) {
+            return false;
+          }
+          setSelectedDate(fullDate);
+          closeDatepicker();
+        };
+        return /* @__PURE__ */ jsxRuntime.jsx(DateTableCell, { $isCurrentMonth: isCurrentMonth, $isDisabled: isDisabled, $isSelected: isSelected, $isToday: isCurrentDate, onClick: handleClick, children: date }, dayKey);
+      }) }, weekKey);
+    });
+  };
   const DatePicker = ({
     date,
     disabled = false,
@@ -17310,6 +17318,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   }) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const [selectedDate, setSelectedDate] = React.useState();
+    const calendarOptions = {};
+    if (selectedDate) {
+      calendarOptions.defaultDate = selectedDate;
+    }
     React.useEffect(() => {
       if (date) {
         setSelectedDate(date);
@@ -17323,8 +17335,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       onSelectDate(selectedDate2);
     };
     return /* @__PURE__ */ jsxRuntime.jsxs(Dropdown, { onOpenChange: setIsOpen, open: isOpen, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Trigger, { disabled, children: /* @__PURE__ */ jsxRuntime.jsx(DatePickerInput, { "data-testid": "datepicker-inpcontainer", disabled, isActive: isOpen, placeholder, selectedDate }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Content, { align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(Calendar, { closeDatepicker: closeDatePicker, futureDatesDisabled, selectedDate, setSelectedDate: handleSelectDate }) })
+      /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Trigger, { disabled, children: /* @__PURE__ */ jsxRuntime.jsx(DatePickerInput, { "data-testid": "datepicker-input-container", disabled, isActive: isOpen, placeholder, selectedDate }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Content, { align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(CalendarRenderer, { calendarOptions, children: (body) => /* @__PURE__ */ jsxRuntime.jsx(Calendar, { calendarBody: body, closeDatepicker: closeDatePicker, futureDatesDisabled, selectedDate, setSelectedDate: handleSelectDate }) }) })
     ] });
   };
   const $5d3850c4d0b4e6c7$var$DIALOG_NAME = "Dialog";

package/dist/click-ui.es.js

@@ -15958,62 +15958,75 @@ styled.svg.withConfig({
     }
   `);
 const locale = "en-US";
-const weekdayFormatter = new Intl.DateTimeFormat(locale, {
-  weekday: "short"
-});
-const headerDateFormatter = new Intl.DateTimeFormat(locale, {
-  month: "short",
-  year: "numeric"
-});
 const selectedDateFormatter = new Intl.DateTimeFormat(locale, {
   day: "2-digit",
   month: "short",
   year: "numeric"
 });
 const explicitWidth = "250px";
-const HighlightedInputWrapper = styled(InputWrapper).withConfig({
-  componentId: "sc-1kfphgn-0"
+const HighlightedInputWrapper = styled$1(InputWrapper).withConfig({
+  componentId: "sc-1m6g9rm-0"
 })(["", " width:", ";}"], ({
   $isActive,
   theme: theme2
 }) => {
   return `border: ${theme2.click.datePicker.dateOption.stroke} solid ${$isActive ? theme2.click.datePicker.dateOption.color.stroke.active : theme2.click.field.color.stroke.default};`;
 }, explicitWidth);
-const DatePickerContainer = styled(Container).withConfig({
-  componentId: "sc-1kfphgn-1"
+const DatePickerInput = ({
+  isActive,
+  disabled,
+  id,
+  placeholder,
+  selectedDate
+}) => {
+  const defaultId = useId();
+  const formattedSelectedDate = selectedDate instanceof Date ? selectedDateFormatter.format(selectedDate) : "";
+  return /* @__PURE__ */ jsxs(HighlightedInputWrapper, { $isActive: isActive, disabled, id: id ?? defaultId, children: [
+    /* @__PURE__ */ jsx(SvgImage, { name: "calendar" }),
+    /* @__PURE__ */ jsx(InputElement, { "data-testid": "datepicker-input", placeholder, readOnly: true, value: formattedSelectedDate })
+  ] });
+};
+const weekdayFormatter = new Intl.DateTimeFormat(locale, {
+  weekday: "short"
+});
+const headerDateFormatter = new Intl.DateTimeFormat(locale, {
+  month: "short",
+  year: "numeric"
+});
+const DatePickerContainer = styled$1(Container).withConfig({
+  componentId: "sc-1m6g9rm-1"
 })(["background:", ";"], ({
   theme: theme2
 }) => theme2.click.datePicker.dateOption.color.background.default);
-const UnselectableTitle = styled.h2.withConfig({
-  componentId: "sc-1kfphgn-2"
+const UnselectableTitle = styled$1.h2.withConfig({
+  componentId: "sc-1m6g9rm-2"
 })(["", " user-select:none;"], ({
   theme: theme2
 }) => `
     color: ${theme2.click.datePicker.color.title.default};
     font: ${theme2.click.datePicker.typography.title.default};
   `);
-const DateTable = styled.table.withConfig({
-  componentId: "sc-1kfphgn-3"
-})(["border-collapse:separate;border-spacing:0;font:", " table-layout:fixed;user-select:none;width:", ";thead tr{height:", ";}tbody{cursor:pointer;}td,th{", ";padding:4px;}"], ({
+const DateTable = styled$1.table.withConfig({
+  componentId: "sc-1m6g9rm-3"
+})(["border-collapse:separate;border-spacing:0;font:", ";table-layout:fixed;user-select:none;width:", ";thead tr{height:", ";}tbody{cursor:pointer;}td,th{padding:4px;}"], ({
   theme: theme2
 }) => theme2.typography.styles.product.text.normal.md, explicitWidth, ({
   theme: theme2
-}) => theme2.click.datePicker.dateOption.size.height, ({
-  theme: theme2
-}) => `border: ${theme2.click.datePicker.dateOption.stroke} solid ${theme2.click.datePicker.dateOption.color.stroke.default}`);
-const DateTableHeader = styled.th.withConfig({
-  componentId: "sc-1kfphgn-4"
+}) => theme2.click.datePicker.dateOption.size.height);
+const DateTableHeader = styled$1.th.withConfig({
+  componentId: "sc-1m6g9rm-4"
 })(["", " width:14%;"], ({
   theme: theme2
 }) => `
     color: ${theme2.click.datePicker.color.daytitle.default};
     font: ${theme2.click.datePicker.typography.daytitle.default};
   `);
-const DateTableCell = styled.td.withConfig({
-  componentId: "sc-1kfphgn-5"
+const DateTableCell = styled$1.td.withConfig({
+  componentId: "sc-1m6g9rm-5"
 })(["", " ", " ", " text-align:center;", " &:hover{", ";}"], ({
   theme: theme2
 }) => `
+    border: ${theme2.click.datePicker.dateOption.stroke} solid ${theme2.click.datePicker.dateOption.color.stroke.default};
     border-radius: ${theme2.click.datePicker.dateOption.radii.default};
     font: ${theme2.click.datePicker.dateOption.typography.label.default};
   `, ({
@@ -16035,50 +16048,35 @@ const DateTableCell = styled.td.withConfig({
 }) => $isToday && `font: ${theme2.click.datePicker.dateOption.typography.label.active};`, ({
   $isDisabled,
   theme: theme2
-}) => `border: ${theme2.click.datePicker.dateOption.stroke} solid ${$isDisabled ? theme2.click.datePicker.dateOption.color.stroke.disabled : theme2.click.datePicker.dateOption.color.stroke.hover}`);
-const DatePickerInput = ({
-  isActive,
-  disabled,
-  id,
-  placeholder,
-  selectedDate
-}) => {
-  const defaultId = useId();
-  const formattedSelectedDate = selectedDate instanceof Date ? selectedDateFormatter.format(selectedDate) : "";
-  return /* @__PURE__ */ jsxs(HighlightedInputWrapper, { $isActive: isActive, disabled, id: id ?? defaultId, children: [
-    /* @__PURE__ */ jsx(SvgImage, { name: "calendar" }),
-    /* @__PURE__ */ jsx(InputElement, { "data-testid": "datepicker-input", placeholder, readOnly: true, value: formattedSelectedDate })
-  ] });
-};
-const Calendar = ({
-  closeDatepicker,
-  futureDatesDisabled,
-  selectedDate,
-  setSelectedDate
+}) => `border: ${theme2.click.datePicker.dateOption.stroke} solid ${$isDisabled ? theme2.click.datePicker.dateOption.color.stroke.disabled : theme2.click.datePicker.dateOption.color.stroke.hover};
+
+
+    border-radius: ${theme2.click.datePicker.dateOption.radii.default};`);
+const CalendarRenderer = ({
+  calendarOptions = {},
+  children,
+  ...props
 }) => {
-  const calendarOptions = {
-    defaultWeekStart: 1
-  };
-  if (selectedDate) {
-    calendarOptions.defaultDate = selectedDate;
-  }
   const {
     body,
     headers,
     month,
     navigation,
     year
-  } = useCalendar(calendarOptions);
-  const handleNextClick = () => {
+  } = useCalendar({
+    defaultWeekStart: 1,
+    ...calendarOptions
+  });
+  const handleNextClick = useCallback(() => {
     navigation.toNext();
-  };
-  const handlePreviousClick = () => {
+  }, [navigation]);
+  const handlePreviousClick = useCallback(() => {
     navigation.toPrev();
-  };
+  }, [navigation]);
   const headerDate = /* @__PURE__ */ new Date();
   headerDate.setMonth(month);
   headerDate.setFullYear(year);
-  return /* @__PURE__ */ jsxs(DatePickerContainer, { "data-testid": "datepicker-calendar-container", isResponsive: false, fillWidth: false, orientation: "vertical", padding: "sm", children: [
+  return /* @__PURE__ */ jsxs(DatePickerContainer, { "data-testid": "datepicker-calendar-container", isResponsive: false, fillWidth: false, orientation: "vertical", padding: "sm", ...props, children: [
     /* @__PURE__ */ jsxs(Container, { isResponsive: false, justifyContent: "space-between", orientation: "horizontal", children: [
       /* @__PURE__ */ jsx(IconButton$1, { icon: "chevron-left", onClick: handlePreviousClick, size: "sm", type: "ghost" }),
       /* @__PURE__ */ jsx(UnselectableTitle, { children: headerDateFormatter.format(headerDate) }),
@@ -16091,32 +16089,42 @@ const Calendar = ({
       }) => {
         return /* @__PURE__ */ jsx(DateTableHeader, { children: weekdayFormatter.format(date) }, key);
       }) }) }),
-      /* @__PURE__ */ jsx("tbody", { children: body.value.map(({
-        key: weekKey,
-        value: week
-      }) => {
-        return /* @__PURE__ */ jsx("tr", { children: week.map(({
-          date,
-          isCurrentMonth,
-          key: dayKey,
-          value: fullDate
-        }) => {
-          const isSelected = selectedDate ? isSameDate(selectedDate, fullDate) : false;
-          const today = /* @__PURE__ */ new Date();
-          const isCurrentDate = isSameDate(today, fullDate);
-          const isDisabled = futureDatesDisabled ? fullDate > today : false;
-          return /* @__PURE__ */ jsx(DateTableCell, { $isCurrentMonth: isCurrentMonth, $isDisabled: isDisabled, $isSelected: isSelected, $isToday: isCurrentDate, onClick: () => {
-            if (isDisabled) {
-              return false;
-            }
-            setSelectedDate(fullDate);
-            closeDatepicker();
-          }, children: date }, dayKey);
-        }) }, weekKey);
-      }) })
+      /* @__PURE__ */ jsx("tbody", { children: children(body) })
     ] })
   ] });
 };
+const Calendar = ({
+  calendarBody,
+  closeDatepicker,
+  futureDatesDisabled,
+  selectedDate,
+  setSelectedDate
+}) => {
+  return calendarBody.value.map(({
+    key: weekKey,
+    value: week
+  }) => {
+    return /* @__PURE__ */ jsx("tr", { children: week.map(({
+      date,
+      isCurrentMonth,
+      key: dayKey,
+      value: fullDate
+    }) => {
+      const isSelected = selectedDate ? isSameDate(selectedDate, fullDate) : false;
+      const today = /* @__PURE__ */ new Date();
+      const isCurrentDate = isSameDate(today, fullDate);
+      const isDisabled = futureDatesDisabled ? fullDate > today : false;
+      const handleClick = () => {
+        if (isDisabled) {
+          return false;
+        }
+        setSelectedDate(fullDate);
+        closeDatepicker();
+      };
+      return /* @__PURE__ */ jsx(DateTableCell, { $isCurrentMonth: isCurrentMonth, $isDisabled: isDisabled, $isSelected: isSelected, $isToday: isCurrentDate, onClick: handleClick, children: date }, dayKey);
+    }) }, weekKey);
+  });
+};
 const DatePicker = ({
   date,
   disabled = false,
@@ -16126,6 +16134,10 @@ const DatePicker = ({
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [selectedDate, setSelectedDate] = useState();
+  const calendarOptions = {};
+  if (selectedDate) {
+    calendarOptions.defaultDate = selectedDate;
+  }
   useEffect(() => {
     if (date) {
       setSelectedDate(date);
@@ -16139,8 +16151,8 @@ const DatePicker = ({
     onSelectDate(selectedDate2);
   };
   return /* @__PURE__ */ jsxs(Dropdown, { onOpenChange: setIsOpen, open: isOpen, children: [
-    /* @__PURE__ */ jsx(Dropdown.Trigger, { disabled, children: /* @__PURE__ */ jsx(DatePickerInput, { "data-testid": "datepicker-inpcontainer", disabled, isActive: isOpen, placeholder, selectedDate }) }),
-    /* @__PURE__ */ jsx(Dropdown.Content, { align: "start", children: /* @__PURE__ */ jsx(Calendar, { closeDatepicker: closeDatePicker, futureDatesDisabled, selectedDate, setSelectedDate: handleSelectDate }) })
+    /* @__PURE__ */ jsx(Dropdown.Trigger, { disabled, children: /* @__PURE__ */ jsx(DatePickerInput, { "data-testid": "datepicker-input-container", disabled, isActive: isOpen, placeholder, selectedDate }) }),
+    /* @__PURE__ */ jsx(Dropdown.Content, { align: "start", children: /* @__PURE__ */ jsx(CalendarRenderer, { calendarOptions, children: (body) => /* @__PURE__ */ jsx(Calendar, { calendarBody: body, closeDatepicker: closeDatePicker, futureDatesDisabled, selectedDate, setSelectedDate: handleSelectDate }) }) })
   ] });
 };
 const $5d3850c4d0b4e6c7$var$DIALOG_NAME = "Dialog";

package/dist/click-ui.umd.js

@@ -15973,62 +15973,75 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
   `);
   const locale = "en-US";
-  const weekdayFormatter = new Intl.DateTimeFormat(locale, {
-    weekday: "short"
-  });
-  const headerDateFormatter = new Intl.DateTimeFormat(locale, {
-    month: "short",
-    year: "numeric"
-  });
   const selectedDateFormatter = new Intl.DateTimeFormat(locale, {
     day: "2-digit",
     month: "short",
     year: "numeric"
   });
   const explicitWidth = "250px";
-  const HighlightedInputWrapper = styled.styled(InputWrapper).withConfig({
-    componentId: "sc-1kfphgn-0"
+  const HighlightedInputWrapper = styled(InputWrapper).withConfig({
+    componentId: "sc-1m6g9rm-0"
   })(["", " width:", ";}"], ({
     $isActive,
     theme: theme2
   }) => {
     return `border: ${theme2.click.datePicker.dateOption.stroke} solid ${$isActive ? theme2.click.datePicker.dateOption.color.stroke.active : theme2.click.field.color.stroke.default};`;
   }, explicitWidth);
-  const DatePickerContainer = styled.styled(Container).withConfig({
-    componentId: "sc-1kfphgn-1"
+  const DatePickerInput = ({
+    isActive,
+    disabled,
+    id,
+    placeholder,
+    selectedDate
+  }) => {
+    const defaultId = React.useId();
+    const formattedSelectedDate = selectedDate instanceof Date ? selectedDateFormatter.format(selectedDate) : "";
+    return /* @__PURE__ */ jsxRuntime.jsxs(HighlightedInputWrapper, { $isActive: isActive, disabled, id: id ?? defaultId, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "calendar" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InputElement, { "data-testid": "datepicker-input", placeholder, readOnly: true, value: formattedSelectedDate })
+    ] });
+  };
+  const weekdayFormatter = new Intl.DateTimeFormat(locale, {
+    weekday: "short"
+  });
+  const headerDateFormatter = new Intl.DateTimeFormat(locale, {
+    month: "short",
+    year: "numeric"
+  });
+  const DatePickerContainer = styled(Container).withConfig({
+    componentId: "sc-1m6g9rm-1"
   })(["background:", ";"], ({
     theme: theme2
   }) => theme2.click.datePicker.dateOption.color.background.default);
-  const UnselectableTitle = styled.styled.h2.withConfig({
-    componentId: "sc-1kfphgn-2"
+  const UnselectableTitle = styled.h2.withConfig({
+    componentId: "sc-1m6g9rm-2"
   })(["", " user-select:none;"], ({
     theme: theme2
   }) => `
     color: ${theme2.click.datePicker.color.title.default};
     font: ${theme2.click.datePicker.typography.title.default};
   `);
-  const DateTable = styled.styled.table.withConfig({
-    componentId: "sc-1kfphgn-3"
-  })(["border-collapse:separate;border-spacing:0;font:", " table-layout:fixed;user-select:none;width:", ";thead tr{height:", ";}tbody{cursor:pointer;}td,th{", ";padding:4px;}"], ({
+  const DateTable = styled.table.withConfig({
+    componentId: "sc-1m6g9rm-3"
+  })(["border-collapse:separate;border-spacing:0;font:", ";table-layout:fixed;user-select:none;width:", ";thead tr{height:", ";}tbody{cursor:pointer;}td,th{padding:4px;}"], ({
     theme: theme2
   }) => theme2.typography.styles.product.text.normal.md, explicitWidth, ({
     theme: theme2
-  }) => theme2.click.datePicker.dateOption.size.height, ({
-    theme: theme2
-  }) => `border: ${theme2.click.datePicker.dateOption.stroke} solid ${theme2.click.datePicker.dateOption.color.stroke.default}`);
-  const DateTableHeader = styled.styled.th.withConfig({
-    componentId: "sc-1kfphgn-4"
+  }) => theme2.click.datePicker.dateOption.size.height);
+  const DateTableHeader = styled.th.withConfig({
+    componentId: "sc-1m6g9rm-4"
   })(["", " width:14%;"], ({
     theme: theme2
   }) => `
     color: ${theme2.click.datePicker.color.daytitle.default};
     font: ${theme2.click.datePicker.typography.daytitle.default};
   `);
-  const DateTableCell = styled.styled.td.withConfig({
-    componentId: "sc-1kfphgn-5"
+  const DateTableCell = styled.td.withConfig({
+    componentId: "sc-1m6g9rm-5"
   })(["", " ", " ", " text-align:center;", " &:hover{", ";}"], ({
     theme: theme2
   }) => `
+    border: ${theme2.click.datePicker.dateOption.stroke} solid ${theme2.click.datePicker.dateOption.color.stroke.default};
     border-radius: ${theme2.click.datePicker.dateOption.radii.default};
     font: ${theme2.click.datePicker.dateOption.typography.label.default};
   `, ({
@@ -16050,50 +16063,35 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   }) => $isToday && `font: ${theme2.click.datePicker.dateOption.typography.label.active};`, ({
     $isDisabled,
     theme: theme2
-  }) => `border: ${theme2.click.datePicker.dateOption.stroke} solid ${$isDisabled ? theme2.click.datePicker.dateOption.color.stroke.disabled : theme2.click.datePicker.dateOption.color.stroke.hover}`);
-  const DatePickerInput = ({
-    isActive,
-    disabled,
-    id,
-    placeholder,
-    selectedDate
-  }) => {
-    const defaultId = React.useId();
-    const formattedSelectedDate = selectedDate instanceof Date ? selectedDateFormatter.format(selectedDate) : "";
-    return /* @__PURE__ */ jsxRuntime.jsxs(HighlightedInputWrapper, { $isActive: isActive, disabled, id: id ?? defaultId, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "calendar" }),
-      /* @__PURE__ */ jsxRuntime.jsx(InputElement, { "data-testid": "datepicker-input", placeholder, readOnly: true, value: formattedSelectedDate })
-    ] });
-  };
-  const Calendar = ({
-    closeDatepicker,
-    futureDatesDisabled,
-    selectedDate,
-    setSelectedDate
+  }) => `border: ${theme2.click.datePicker.dateOption.stroke} solid ${$isDisabled ? theme2.click.datePicker.dateOption.color.stroke.disabled : theme2.click.datePicker.dateOption.color.stroke.hover};
+
+
+    border-radius: ${theme2.click.datePicker.dateOption.radii.default};`);
+  const CalendarRenderer = ({
+    calendarOptions = {},
+    children,
+    ...props
   }) => {
-    const calendarOptions = {
-      defaultWeekStart: 1
-    };
-    if (selectedDate) {
-      calendarOptions.defaultDate = selectedDate;
-    }
     const {
       body,
       headers,
       month,
       navigation,
       year
-    } = useCalendar(calendarOptions);
-    const handleNextClick = () => {
+    } = useCalendar({
+      defaultWeekStart: 1,
+      ...calendarOptions
+    });
+    const handleNextClick = React.useCallback(() => {
       navigation.toNext();
-    };
-    const handlePreviousClick = () => {
+    }, [navigation]);
+    const handlePreviousClick = React.useCallback(() => {
       navigation.toPrev();
-    };
+    }, [navigation]);
     const headerDate = /* @__PURE__ */ new Date();
     headerDate.setMonth(month);
     headerDate.setFullYear(year);
-    return /* @__PURE__ */ jsxRuntime.jsxs(DatePickerContainer, { "data-testid": "datepicker-calendar-container", isResponsive: false, fillWidth: false, orientation: "vertical", padding: "sm", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(DatePickerContainer, { "data-testid": "datepicker-calendar-container", isResponsive: false, fillWidth: false, orientation: "vertical", padding: "sm", ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Container, { isResponsive: false, justifyContent: "space-between", orientation: "horizontal", children: [
         /* @__PURE__ */ jsxRuntime.jsx(IconButton$1, { icon: "chevron-left", onClick: handlePreviousClick, size: "sm", type: "ghost" }),
         /* @__PURE__ */ jsxRuntime.jsx(UnselectableTitle, { children: headerDateFormatter.format(headerDate) }),
@@ -16106,32 +16104,42 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         }) => {
           return /* @__PURE__ */ jsxRuntime.jsx(DateTableHeader, { children: weekdayFormatter.format(date) }, key);
         }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: body.value.map(({
-          key: weekKey,
-          value: week
-        }) => {
-          return /* @__PURE__ */ jsxRuntime.jsx("tr", { children: week.map(({
-            date,
-            isCurrentMonth,
-            key: dayKey,
-            value: fullDate
-          }) => {
-            const isSelected = selectedDate ? isSameDate(selectedDate, fullDate) : false;
-            const today = /* @__PURE__ */ new Date();
-            const isCurrentDate = isSameDate(today, fullDate);
-            const isDisabled = futureDatesDisabled ? fullDate > today : false;
-            return /* @__PURE__ */ jsxRuntime.jsx(DateTableCell, { $isCurrentMonth: isCurrentMonth, $isDisabled: isDisabled, $isSelected: isSelected, $isToday: isCurrentDate, onClick: () => {
-              if (isDisabled) {
-                return false;
-              }
-              setSelectedDate(fullDate);
-              closeDatepicker();
-            }, children: date }, dayKey);
-          }) }, weekKey);
-        }) })
+        /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: children(body) })
       ] })
     ] });
   };
+  const Calendar = ({
+    calendarBody,
+    closeDatepicker,
+    futureDatesDisabled,
+    selectedDate,
+    setSelectedDate
+  }) => {
+    return calendarBody.value.map(({
+      key: weekKey,
+      value: week
+    }) => {
+      return /* @__PURE__ */ jsxRuntime.jsx("tr", { children: week.map(({
+        date,
+        isCurrentMonth,
+        key: dayKey,
+        value: fullDate
+      }) => {
+        const isSelected = selectedDate ? isSameDate(selectedDate, fullDate) : false;
+        const today = /* @__PURE__ */ new Date();
+        const isCurrentDate = isSameDate(today, fullDate);
+        const isDisabled = futureDatesDisabled ? fullDate > today : false;
+        const handleClick = () => {
+          if (isDisabled) {
+            return false;
+          }
+          setSelectedDate(fullDate);
+          closeDatepicker();
+        };
+        return /* @__PURE__ */ jsxRuntime.jsx(DateTableCell, { $isCurrentMonth: isCurrentMonth, $isDisabled: isDisabled, $isSelected: isSelected, $isToday: isCurrentDate, onClick: handleClick, children: date }, dayKey);
+      }) }, weekKey);
+    });
+  };
   const DatePicker = ({
     date,
     disabled = false,
@@ -16141,6 +16149,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   }) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const [selectedDate, setSelectedDate] = React.useState();
+    const calendarOptions = {};
+    if (selectedDate) {
+      calendarOptions.defaultDate = selectedDate;
+    }
     React.useEffect(() => {
       if (date) {
         setSelectedDate(date);
@@ -16154,8 +16166,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       onSelectDate(selectedDate2);
     };
     return /* @__PURE__ */ jsxRuntime.jsxs(Dropdown, { onOpenChange: setIsOpen, open: isOpen, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Trigger, { disabled, children: /* @__PURE__ */ jsxRuntime.jsx(DatePickerInput, { "data-testid": "datepicker-inpcontainer", disabled, isActive: isOpen, placeholder, selectedDate }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Content, { align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(Calendar, { closeDatepicker: closeDatePicker, futureDatesDisabled, selectedDate, setSelectedDate: handleSelectDate }) })
+      /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Trigger, { disabled, children: /* @__PURE__ */ jsxRuntime.jsx(DatePickerInput, { "data-testid": "datepicker-input-container", disabled, isActive: isOpen, placeholder, selectedDate }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Content, { align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(CalendarRenderer, { calendarOptions, children: (body) => /* @__PURE__ */ jsxRuntime.jsx(Calendar, { calendarBody: body, closeDatepicker: closeDatePicker, futureDatesDisabled, selectedDate, setSelectedDate: handleSelectDate }) }) })
     ] });
   };
   const $5d3850c4d0b4e6c7$var$DIALOG_NAME = "Dialog";

package/dist/components/DatePicker/Common.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { useCalendar, UseCalendarOptions } from '@h6s/calendar';
+
+interface DatePickerInputProps {
+    isActive: boolean;
+    disabled: boolean;
+    id?: string;
+    placeholder?: string;
+    selectedDate?: Date;
+}
+export declare const DatePickerInput: ({ isActive, disabled, id, placeholder, selectedDate, }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
+interface DateRangePickerInputProps {
+    isActive: boolean;
+    disabled: boolean;
+    id?: string;
+    placeholder?: string;
+    selectedEndDate?: Date;
+    selectedStartDate?: Date;
+}
+export declare const DateRangePickerInput: ({ isActive, disabled, id, placeholder, selectedEndDate, selectedStartDate, }: DateRangePickerInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateTableCell: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {
+    $isCurrentMonth?: boolean;
+    $isDisabled?: boolean;
+    $isSelected?: boolean;
+    $isToday?: boolean;
+}>> & string;
+export type Body = ReturnType<typeof useCalendar>["body"];
+interface CalendarRendererProps {
+    calendarOptions?: UseCalendarOptions;
+    children: (body: Body) => ReactNode;
+}
+export declare const CalendarRenderer: ({ calendarOptions, children, ...props }: CalendarRendererProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DatePicker/DateRangePicker.d.ts

@@ -0,0 +1,9 @@
+export interface DatePickerProps {
+    endDate?: Date;
+    disabled?: boolean;
+    futureDatesDisabled?: boolean;
+    onSelectDateRange: (selectedStartDate: Date, selectedEndDate: Date) => void;
+    placeholder?: string;
+    startDate?: Date;
+}
+export declare const DateRangePicker: ({ endDate, startDate, disabled, futureDatesDisabled, onSelectDateRange, placeholder, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "0.0.202",
+  "version": "0.0.203",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",