@ceed/cds 1.28.0 → 1.29.0

package/dist/index.cjs

@@ -2238,6 +2238,15 @@ function calculateColumnGroups(columnGroupingModel, columns, visibleFields) {
   const correctedMaxLevel = filteredGroupsByLevel.length > 0 ? filteredGroupsByLevel.length - 1 : -1;
   return { groups: filteredGroupsByLevel, maxLevel: correctedMaxLevel, fieldsInGroupingModel };
 }
+function parsePxValue(value) {
+  if (!value) return null;
+  const trimmed = value.trim();
+  if (trimmed.endsWith("px")) {
+    const num = parseFloat(trimmed);
+    return isNaN(num) ? null : num;
+  }
+  return null;
+}
 function getTextAlign(props) {
   return !props.editMode && ["number", "date", "currency"].includes(props.type || "") ? "end" : "start";
 }
@@ -2550,10 +2559,47 @@ var CalendarSheet = (0, import_joy28.styled)(Sheet_default, {
   slot: "sheet",
   overridesResolver: (props, styles) => styles.root
 })(({ theme }) => ({
-  width: "264px",
   boxShadow: theme.shadow.md,
   borderRadius: theme.radius.md
 }));
+var CalendarSheetContent = (0, import_joy28.styled)("div", {
+  name: "DatePicker",
+  slot: "sheetContent"
+})({
+  display: "flex",
+  flexDirection: "row"
+});
+var CalendarSection = (0, import_joy28.styled)("div", {
+  name: "DatePicker",
+  slot: "calendarSection"
+})({
+  width: "264px"
+});
+var PresetPanel = (0, import_joy28.styled)("div", {
+  name: "DatePicker",
+  slot: "presetPanel"
+})(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  borderLeft: `1px solid ${theme.vars.palette.divider}`,
+  padding: theme.spacing(1),
+  minWidth: "120px",
+  overflowY: "auto"
+}));
+var PresetItem = (0, import_joy28.styled)(Button_default, {
+  name: "DatePicker",
+  slot: "presetItem",
+  shouldForwardProp: (prop) => prop !== "active"
+})(({ active }) => [
+  {
+    width: "100%",
+    justifyContent: "flex-start",
+    whiteSpace: "nowrap"
+  },
+  active && {
+    fontWeight: "bold"
+  }
+]);
 var DatePickerRoot = (0, import_joy28.styled)("div", {
   name: "DatePicker",
   slot: "root",
@@ -2671,6 +2717,7 @@ var DatePicker = (0, import_react20.forwardRef)((inProps, ref) => {
     hideClearButton,
     readOnly,
     shouldDisableDate,
+    presets,
     ...innerProps
   } = props;
   const innerRef = (0, import_react20.useRef)(null);
@@ -2752,6 +2799,35 @@ var DatePicker = (0, import_react20.forwardRef)((inProps, ref) => {
     },
     [inputReadOnly, buttonRef]
   );
+  const handlePresetClick = (0, import_react20.useCallback)(
+    (presetValue) => {
+      handleChange({
+        target: {
+          name: props.name,
+          value: presetValue
+        }
+      });
+      setAnchorEl(null);
+    },
+    [handleChange, props.name]
+  );
+  const isPresetDisabled = (0, import_react20.useCallback)(
+    (presetValue) => {
+      try {
+        const date = parseDate(presetValue, format);
+        if (Number.isNaN(date.getTime())) return true;
+        if (minDate && date < new Date(minDate)) return true;
+        if (maxDate && date > new Date(maxDate)) return true;
+        if (disableFuture && date > new Date((/* @__PURE__ */ new Date()).toDateString())) return true;
+        if (disablePast && date < new Date((/* @__PURE__ */ new Date()).toDateString())) return true;
+        if (shouldDisableDate?.(presetValue)) return true;
+        return false;
+      } catch {
+        return true;
+      }
+    },
+    [format, minDate, maxDate, disableFuture, disablePast, shouldDisableDate]
+  );
   return /* @__PURE__ */ import_react20.default.createElement(DatePickerRoot, null, /* @__PURE__ */ import_react20.default.createElement(import_base3.FocusTrap, { open: true }, /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement(
     Input_default,
     {
@@ -2817,7 +2893,7 @@ var DatePicker = (0, import_react20.forwardRef)((inProps, ref) => {
       "aria-label": "Calendar Tooltip",
       "aria-expanded": open
     },
-    /* @__PURE__ */ import_react20.default.createElement(CalendarSheet, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ import_react20.default.createElement(
+    /* @__PURE__ */ import_react20.default.createElement(CalendarSheet, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ import_react20.default.createElement(CalendarSheetContent, null, /* @__PURE__ */ import_react20.default.createElement(CalendarSection, null, /* @__PURE__ */ import_react20.default.createElement(
       Calendar_default,
       {
         value: value && !Number.isNaN(parseDate(value, format).getTime()) ? [parseDate(value, format), void 0] : void 0,
@@ -2861,7 +2937,22 @@ var DatePicker = (0, import_react20.forwardRef)((inProps, ref) => {
         },
         "Clear"
       )
-    ))
+    )), presets && presets.length > 0 && /* @__PURE__ */ import_react20.default.createElement(PresetPanel, null, presets.map((preset) => {
+      const disabled2 = isPresetDisabled(preset.value);
+      return /* @__PURE__ */ import_react20.default.createElement(
+        PresetItem,
+        {
+          key: preset.label,
+          size: "sm",
+          variant: value === preset.value ? "soft" : "plain",
+          color: value === preset.value ? "primary" : "neutral",
+          active: value === preset.value,
+          disabled: disabled2,
+          onClick: () => handlePresetClick(preset.value)
+        },
+        preset.label
+      );
+    }))))
   )))));
 });
 
@@ -3537,7 +3628,8 @@ function useDataTableRenderer({
   isRowSelectable,
   columnGroupingModel,
   columnVisibilityModel,
-  onColumnVisibilityModelChange
+  onColumnVisibilityModelChange,
+  checkboxSelection
 }) {
   if (pinnedColumns && columnGroupingModel) {
     throw new Error(
@@ -3570,6 +3662,14 @@ function useDataTableRenderer({
     [reorderedColumns, visibilityModel]
   );
   const visibleFieldSet = (0, import_react25.useMemo)(() => new Set(visibleColumns.map((c) => c.field)), [visibleColumns]);
+  const tableMinWidth = (0, import_react25.useMemo)(() => {
+    const DEFAULT_MIN = 50;
+    let total = checkboxSelection ? 40 : 0;
+    for (const col of visibleColumns) {
+      total += parsePxValue(col.minWidth) ?? parsePxValue(col.width) ?? DEFAULT_MIN;
+    }
+    return total;
+  }, [visibleColumns, checkboxSelection]);
   const allColumnsByField = (0, import_react25.useMemo)(
     () => reorderedColumns.reduce(
       (acc, curr) => ({
@@ -3870,6 +3970,7 @@ function useDataTableRenderer({
       ]
     ),
     columns,
+    tableMinWidth,
     processedColumnGroups,
     onTotalSelect: (0, import_react25.useCallback)(() => {
       const selectableRows = rows.filter((row, i) => {
@@ -4259,6 +4360,7 @@ function Component(props, apiRef) {
     onTotalSelect,
     HeadCell: HeadCell2,
     BodyRow: BodyRow2,
+    tableMinWidth,
     // For keyboard selection
     selectionAnchor,
     setSelectionAnchor
@@ -4448,7 +4550,7 @@ function Component(props, apiRef) {
         ref: parentRef,
         ...backgroundProps
       },
-      /* @__PURE__ */ import_react28.default.createElement(Table, { ...innerProps }, /* @__PURE__ */ import_react28.default.createElement("colgroup", null, checkboxSelection && /* @__PURE__ */ import_react28.default.createElement(
+      /* @__PURE__ */ import_react28.default.createElement(Table, { ...innerProps, sx: { ...innerProps.sx, minWidth: tableMinWidth } }, /* @__PURE__ */ import_react28.default.createElement("colgroup", null, checkboxSelection && /* @__PURE__ */ import_react28.default.createElement(
         "col",
         {
           style: {
@@ -4461,7 +4563,8 @@ function Component(props, apiRef) {
           ref: c.tableColRef,
           key: `${c.field.toString()}_${c.width}`,
           style: {
-            width: c.width
+            width: c.width,
+            minWidth: c.minWidth ?? "50px"
           }
         }
       ))), /* @__PURE__ */ import_react28.default.createElement("thead", null, processedColumnGroups && processedColumnGroups.groups.length > 0 && processedColumnGroups.groups.map((levelGroups, level) => /* @__PURE__ */ import_react28.default.createElement("tr", { key: `group-level-${level}` }, checkboxSelection && level === 0 && /* @__PURE__ */ import_react28.default.createElement(
@@ -4680,10 +4783,47 @@ var CalendarSheet2 = (0, import_joy36.styled)(Sheet_default, {
   overridesResolver: (props, styles) => styles.root
 })(({ theme }) => ({
   zIndex: theme.zIndex.tooltip,
-  width: "264px",
   boxShadow: theme.shadow.md,
   borderRadius: theme.radius.md
 }));
+var CalendarSheetContent2 = (0, import_joy36.styled)("div", {
+  name: "DateRangePicker",
+  slot: "sheetContent"
+})({
+  display: "flex",
+  flexDirection: "row"
+});
+var CalendarSection2 = (0, import_joy36.styled)("div", {
+  name: "DateRangePicker",
+  slot: "calendarSection"
+})({
+  width: "264px"
+});
+var PresetPanel2 = (0, import_joy36.styled)("div", {
+  name: "DateRangePicker",
+  slot: "presetPanel"
+})(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  borderLeft: `1px solid ${theme.vars.palette.divider}`,
+  padding: theme.spacing(1),
+  minWidth: "120px",
+  overflowY: "auto"
+}));
+var PresetItem2 = (0, import_joy36.styled)(Button_default, {
+  name: "DateRangePicker",
+  slot: "presetItem",
+  shouldForwardProp: (prop) => prop !== "active"
+})(({ active }) => [
+  {
+    width: "100%",
+    justifyContent: "flex-start",
+    whiteSpace: "nowrap"
+  },
+  active && {
+    fontWeight: "bold"
+  }
+]);
 var DateRangePickerRoot = (0, import_joy36.styled)("div", {
   name: "DateRangePicker",
   slot: "root",
@@ -4812,6 +4952,7 @@ var DateRangePicker = (0, import_react29.forwardRef)((inProps, ref) => {
     inputReadOnly,
     hideClearButton,
     readOnly,
+    presets,
     ...innerProps
   } = props;
   const innerRef = (0, import_react29.useRef)(null);
@@ -4911,6 +5052,38 @@ var DateRangePicker = (0, import_react29.forwardRef)((inProps, ref) => {
     },
     [inputReadOnly, buttonRef]
   );
+  const handlePresetClick = (0, import_react29.useCallback)(
+    (presetValue) => {
+      if (props.value !== void 0) {
+        onChange?.({ target: { name: props.name, value: presetValue } });
+      } else {
+        const dates = parseDates(presetValue, format);
+        setDisplayValue(formatValueString2(dates, displayFormat));
+        setValue(presetValue);
+      }
+      setAnchorEl(null);
+    },
+    [props.value, props.name, onChange, setValue, setAnchorEl, format, displayFormat]
+  );
+  const isPresetDisabled = (0, import_react29.useCallback)(
+    (presetValue) => {
+      try {
+        const dates = parseDates(presetValue, format);
+        if (dates.some((d) => Number.isNaN(d.getTime()))) return true;
+        const today = new Date((/* @__PURE__ */ new Date()).toDateString());
+        for (const date of dates) {
+          if (minDate && date < new Date(minDate)) return true;
+          if (maxDate && date > new Date(maxDate)) return true;
+          if (disableFuture && date > today) return true;
+          if (disablePast && date < today) return true;
+        }
+        return false;
+      } catch {
+        return true;
+      }
+    },
+    [format, minDate, maxDate, disableFuture, disablePast]
+  );
   return /* @__PURE__ */ import_react29.default.createElement(DateRangePickerRoot, null, /* @__PURE__ */ import_react29.default.createElement(import_base4.FocusTrap, { open: true }, /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, /* @__PURE__ */ import_react29.default.createElement(
     Input_default,
     {
@@ -4976,7 +5149,7 @@ var DateRangePicker = (0, import_react29.forwardRef)((inProps, ref) => {
       "aria-label": "Calendar Tooltip",
       "aria-expanded": open
     },
-    /* @__PURE__ */ import_react29.default.createElement(CalendarSheet2, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ import_react29.default.createElement(
+    /* @__PURE__ */ import_react29.default.createElement(CalendarSheet2, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ import_react29.default.createElement(CalendarSheetContent2, null, /* @__PURE__ */ import_react29.default.createElement(CalendarSection2, null, /* @__PURE__ */ import_react29.default.createElement(
       Calendar_default,
       {
         rangeSelection: true,
@@ -5008,7 +5181,22 @@ var DateRangePicker = (0, import_react29.forwardRef)((inProps, ref) => {
         },
         "Clear"
       )
-    ))
+    )), presets && presets.length > 0 && /* @__PURE__ */ import_react29.default.createElement(PresetPanel2, null, presets.map((preset) => {
+      const disabled2 = isPresetDisabled(preset.value);
+      return /* @__PURE__ */ import_react29.default.createElement(
+        PresetItem2,
+        {
+          key: preset.label,
+          size: "sm",
+          variant: value === preset.value ? "soft" : "plain",
+          color: value === preset.value ? "primary" : "neutral",
+          active: value === preset.value,
+          disabled: disabled2,
+          onClick: () => handlePresetClick(preset.value)
+        },
+        preset.label
+      );
+    }))))
   )))));
 });
 DateRangePicker.displayName = "DateRangePicker";

package/dist/index.js

@@ -2112,6 +2112,15 @@ function calculateColumnGroups(columnGroupingModel, columns, visibleFields) {
   const correctedMaxLevel = filteredGroupsByLevel.length > 0 ? filteredGroupsByLevel.length - 1 : -1;
   return { groups: filteredGroupsByLevel, maxLevel: correctedMaxLevel, fieldsInGroupingModel };
 }
+function parsePxValue(value) {
+  if (!value) return null;
+  const trimmed = value.trim();
+  if (trimmed.endsWith("px")) {
+    const num = parseFloat(trimmed);
+    return isNaN(num) ? null : num;
+  }
+  return null;
+}
 function getTextAlign(props) {
   return !props.editMode && ["number", "date", "currency"].includes(props.type || "") ? "end" : "start";
 }
@@ -2433,10 +2442,47 @@ var CalendarSheet = styled10(Sheet_default, {
   slot: "sheet",
   overridesResolver: (props, styles) => styles.root
 })(({ theme }) => ({
-  width: "264px",
   boxShadow: theme.shadow.md,
   borderRadius: theme.radius.md
 }));
+var CalendarSheetContent = styled10("div", {
+  name: "DatePicker",
+  slot: "sheetContent"
+})({
+  display: "flex",
+  flexDirection: "row"
+});
+var CalendarSection = styled10("div", {
+  name: "DatePicker",
+  slot: "calendarSection"
+})({
+  width: "264px"
+});
+var PresetPanel = styled10("div", {
+  name: "DatePicker",
+  slot: "presetPanel"
+})(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  borderLeft: `1px solid ${theme.vars.palette.divider}`,
+  padding: theme.spacing(1),
+  minWidth: "120px",
+  overflowY: "auto"
+}));
+var PresetItem = styled10(Button_default, {
+  name: "DatePicker",
+  slot: "presetItem",
+  shouldForwardProp: (prop) => prop !== "active"
+})(({ active }) => [
+  {
+    width: "100%",
+    justifyContent: "flex-start",
+    whiteSpace: "nowrap"
+  },
+  active && {
+    fontWeight: "bold"
+  }
+]);
 var DatePickerRoot = styled10("div", {
   name: "DatePicker",
   slot: "root",
@@ -2554,6 +2600,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
     hideClearButton,
     readOnly,
     shouldDisableDate,
+    presets,
     ...innerProps
   } = props;
   const innerRef = useRef4(null);
@@ -2635,6 +2682,35 @@ var DatePicker = forwardRef6((inProps, ref) => {
     },
     [inputReadOnly, buttonRef]
   );
+  const handlePresetClick = useCallback8(
+    (presetValue) => {
+      handleChange({
+        target: {
+          name: props.name,
+          value: presetValue
+        }
+      });
+      setAnchorEl(null);
+    },
+    [handleChange, props.name]
+  );
+  const isPresetDisabled = useCallback8(
+    (presetValue) => {
+      try {
+        const date = parseDate(presetValue, format);
+        if (Number.isNaN(date.getTime())) return true;
+        if (minDate && date < new Date(minDate)) return true;
+        if (maxDate && date > new Date(maxDate)) return true;
+        if (disableFuture && date > new Date((/* @__PURE__ */ new Date()).toDateString())) return true;
+        if (disablePast && date < new Date((/* @__PURE__ */ new Date()).toDateString())) return true;
+        if (shouldDisableDate?.(presetValue)) return true;
+        return false;
+      } catch {
+        return true;
+      }
+    },
+    [format, minDate, maxDate, disableFuture, disablePast, shouldDisableDate]
+  );
   return /* @__PURE__ */ React18.createElement(DatePickerRoot, null, /* @__PURE__ */ React18.createElement(FocusTrap, { open: true }, /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(
     Input_default,
     {
@@ -2700,7 +2776,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
       "aria-label": "Calendar Tooltip",
       "aria-expanded": open
     },
-    /* @__PURE__ */ React18.createElement(CalendarSheet, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ React18.createElement(
+    /* @__PURE__ */ React18.createElement(CalendarSheet, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ React18.createElement(CalendarSheetContent, null, /* @__PURE__ */ React18.createElement(CalendarSection, null, /* @__PURE__ */ React18.createElement(
       Calendar_default,
       {
         value: value && !Number.isNaN(parseDate(value, format).getTime()) ? [parseDate(value, format), void 0] : void 0,
@@ -2744,7 +2820,22 @@ var DatePicker = forwardRef6((inProps, ref) => {
         },
         "Clear"
       )
-    ))
+    )), presets && presets.length > 0 && /* @__PURE__ */ React18.createElement(PresetPanel, null, presets.map((preset) => {
+      const disabled2 = isPresetDisabled(preset.value);
+      return /* @__PURE__ */ React18.createElement(
+        PresetItem,
+        {
+          key: preset.label,
+          size: "sm",
+          variant: value === preset.value ? "soft" : "plain",
+          color: value === preset.value ? "primary" : "neutral",
+          active: value === preset.value,
+          disabled: disabled2,
+          onClick: () => handlePresetClick(preset.value)
+        },
+        preset.label
+      );
+    }))))
   )))));
 });
 
@@ -3420,7 +3511,8 @@ function useDataTableRenderer({
   isRowSelectable,
   columnGroupingModel,
   columnVisibilityModel,
-  onColumnVisibilityModelChange
+  onColumnVisibilityModelChange,
+  checkboxSelection
 }) {
   if (pinnedColumns && columnGroupingModel) {
     throw new Error(
@@ -3453,6 +3545,14 @@ function useDataTableRenderer({
     [reorderedColumns, visibilityModel]
   );
   const visibleFieldSet = useMemo9(() => new Set(visibleColumns.map((c) => c.field)), [visibleColumns]);
+  const tableMinWidth = useMemo9(() => {
+    const DEFAULT_MIN = 50;
+    let total = checkboxSelection ? 40 : 0;
+    for (const col of visibleColumns) {
+      total += parsePxValue(col.minWidth) ?? parsePxValue(col.width) ?? DEFAULT_MIN;
+    }
+    return total;
+  }, [visibleColumns, checkboxSelection]);
   const allColumnsByField = useMemo9(
     () => reorderedColumns.reduce(
       (acc, curr) => ({
@@ -3753,6 +3853,7 @@ function useDataTableRenderer({
       ]
     ),
     columns,
+    tableMinWidth,
     processedColumnGroups,
     onTotalSelect: useCallback10(() => {
       const selectableRows = rows.filter((row, i) => {
@@ -4142,6 +4243,7 @@ function Component(props, apiRef) {
     onTotalSelect,
     HeadCell: HeadCell2,
     BodyRow: BodyRow2,
+    tableMinWidth,
     // For keyboard selection
     selectionAnchor,
     setSelectionAnchor
@@ -4331,7 +4433,7 @@ function Component(props, apiRef) {
         ref: parentRef,
         ...backgroundProps
       },
-      /* @__PURE__ */ React25.createElement(Table, { ...innerProps }, /* @__PURE__ */ React25.createElement("colgroup", null, checkboxSelection && /* @__PURE__ */ React25.createElement(
+      /* @__PURE__ */ React25.createElement(Table, { ...innerProps, sx: { ...innerProps.sx, minWidth: tableMinWidth } }, /* @__PURE__ */ React25.createElement("colgroup", null, checkboxSelection && /* @__PURE__ */ React25.createElement(
         "col",
         {
           style: {
@@ -4344,7 +4446,8 @@ function Component(props, apiRef) {
           ref: c.tableColRef,
           key: `${c.field.toString()}_${c.width}`,
           style: {
-            width: c.width
+            width: c.width,
+            minWidth: c.minWidth ?? "50px"
           }
         }
       ))), /* @__PURE__ */ React25.createElement("thead", null, processedColumnGroups && processedColumnGroups.groups.length > 0 && processedColumnGroups.groups.map((levelGroups, level) => /* @__PURE__ */ React25.createElement("tr", { key: `group-level-${level}` }, checkboxSelection && level === 0 && /* @__PURE__ */ React25.createElement(
@@ -4563,10 +4666,47 @@ var CalendarSheet2 = styled14(Sheet_default, {
   overridesResolver: (props, styles) => styles.root
 })(({ theme }) => ({
   zIndex: theme.zIndex.tooltip,
-  width: "264px",
   boxShadow: theme.shadow.md,
   borderRadius: theme.radius.md
 }));
+var CalendarSheetContent2 = styled14("div", {
+  name: "DateRangePicker",
+  slot: "sheetContent"
+})({
+  display: "flex",
+  flexDirection: "row"
+});
+var CalendarSection2 = styled14("div", {
+  name: "DateRangePicker",
+  slot: "calendarSection"
+})({
+  width: "264px"
+});
+var PresetPanel2 = styled14("div", {
+  name: "DateRangePicker",
+  slot: "presetPanel"
+})(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  borderLeft: `1px solid ${theme.vars.palette.divider}`,
+  padding: theme.spacing(1),
+  minWidth: "120px",
+  overflowY: "auto"
+}));
+var PresetItem2 = styled14(Button_default, {
+  name: "DateRangePicker",
+  slot: "presetItem",
+  shouldForwardProp: (prop) => prop !== "active"
+})(({ active }) => [
+  {
+    width: "100%",
+    justifyContent: "flex-start",
+    whiteSpace: "nowrap"
+  },
+  active && {
+    fontWeight: "bold"
+  }
+]);
 var DateRangePickerRoot = styled14("div", {
   name: "DateRangePicker",
   slot: "root",
@@ -4695,6 +4835,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
     inputReadOnly,
     hideClearButton,
     readOnly,
+    presets,
     ...innerProps
   } = props;
   const innerRef = useRef8(null);
@@ -4794,6 +4935,38 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
     },
     [inputReadOnly, buttonRef]
   );
+  const handlePresetClick = useCallback13(
+    (presetValue) => {
+      if (props.value !== void 0) {
+        onChange?.({ target: { name: props.name, value: presetValue } });
+      } else {
+        const dates = parseDates(presetValue, format);
+        setDisplayValue(formatValueString2(dates, displayFormat));
+        setValue(presetValue);
+      }
+      setAnchorEl(null);
+    },
+    [props.value, props.name, onChange, setValue, setAnchorEl, format, displayFormat]
+  );
+  const isPresetDisabled = useCallback13(
+    (presetValue) => {
+      try {
+        const dates = parseDates(presetValue, format);
+        if (dates.some((d) => Number.isNaN(d.getTime()))) return true;
+        const today = new Date((/* @__PURE__ */ new Date()).toDateString());
+        for (const date of dates) {
+          if (minDate && date < new Date(minDate)) return true;
+          if (maxDate && date > new Date(maxDate)) return true;
+          if (disableFuture && date > today) return true;
+          if (disablePast && date < today) return true;
+        }
+        return false;
+      } catch {
+        return true;
+      }
+    },
+    [format, minDate, maxDate, disableFuture, disablePast]
+  );
   return /* @__PURE__ */ React26.createElement(DateRangePickerRoot, null, /* @__PURE__ */ React26.createElement(FocusTrap2, { open: true }, /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(
     Input_default,
     {
@@ -4859,7 +5032,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
       "aria-label": "Calendar Tooltip",
       "aria-expanded": open
     },
-    /* @__PURE__ */ React26.createElement(CalendarSheet2, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ React26.createElement(
+    /* @__PURE__ */ React26.createElement(CalendarSheet2, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ React26.createElement(CalendarSheetContent2, null, /* @__PURE__ */ React26.createElement(CalendarSection2, null, /* @__PURE__ */ React26.createElement(
       Calendar_default,
       {
         rangeSelection: true,
@@ -4891,7 +5064,22 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
         },
         "Clear"
       )
-    ))
+    )), presets && presets.length > 0 && /* @__PURE__ */ React26.createElement(PresetPanel2, null, presets.map((preset) => {
+      const disabled2 = isPresetDisabled(preset.value);
+      return /* @__PURE__ */ React26.createElement(
+        PresetItem2,
+        {
+          key: preset.label,
+          size: "sm",
+          variant: value === preset.value ? "soft" : "plain",
+          color: value === preset.value ? "primary" : "neutral",
+          active: value === preset.value,
+          disabled: disabled2,
+          onClick: () => handlePresetClick(preset.value)
+        },
+        preset.label
+      );
+    }))))
   )))));
 });
 DateRangePicker.displayName = "DateRangePicker";