@aivenio/aquarium 4.2.0 → 4.3.0

package/dist/system.mjs

@@ -12272,14 +12272,30 @@ var CalendarGridHeader = () => {
 // src/atoms/DatePicker/DatePicker.tsx
 import React84 from "react";
 import {
+  Button as AriaButton3,
   DatePicker as AriaDatePicker,
-  DateRangePicker as AriaDateRangePicker
+  DatePickerStateContext as AriaDatePickerStateContext,
+  DateRangePicker as AriaDateRangePicker,
+  DateRangePickerStateContext as AriaDateRangePickerStateContext
 } from "react-aria-components";
 import { tv as tv11 } from "tailwind-variants";
 var datePickerCalendarStyles = tv11({
   slots: {
-    dialog: "p-5 [[data-placement]>&]:px-5 [[data-placement]>&]:py-6 max-h-[inherit]",
-    errorMessage: "typography-caption text-danger-default max-w-[300px]"
+    dialog: "flex",
+    calendar: "[[data-placement]>&]:px-5 [[data-placement]>&]:py-6 max-h-[inherit]",
+    errorMessage: "typography-caption text-danger-default max-w-[300px]",
+    presets: "bg-muted py-6 px-5 flex flex-col min-w-[150px] max-w-[300px] self-stretch",
+    preset: "hover:text-primary-active p-3 text-left hover:underline"
+  },
+  variants: {
+    isPresetActive: {
+      true: {
+        preset: "text-primary-active typography-small-strong"
+      },
+      false: {
+        preset: "typography-small"
+      }
+    }
   }
 });
 var DatePicker = ({ variant, ...props }) => {
@@ -12304,6 +12320,30 @@ var DateRangePicker = ({ variant, ...props }) => {
     }
   );
 };
+var Presets = ({ children }) => {
+  const { presets } = datePickerCalendarStyles();
+  return /* @__PURE__ */ React84.createElement("div", { className: presets() }, children);
+};
+var Preset = ({ value, label }) => {
+  const { preset } = datePickerCalendarStyles();
+  const context2 = React84.useContext(AriaDatePickerStateContext);
+  const handlePress = () => {
+    context2?.setValue(value);
+    context2?.close();
+  };
+  const isActive = context2?.value !== void 0 && context2.value?.toString() === value.toString();
+  return /* @__PURE__ */ React84.createElement(AriaButton3, { onPress: handlePress, className: preset({ isPresetActive: isActive }) }, label);
+};
+var RangePreset = ({ value, label }) => {
+  const { preset } = datePickerCalendarStyles();
+  const context2 = React84.useContext(AriaDateRangePickerStateContext);
+  const handlePress = () => {
+    context2?.setValue(value);
+    context2?.close();
+  };
+  const isActive = context2?.value !== void 0 && context2.value.start?.toString() === value.start.toString() && context2.value.end?.toString() === value.end.toString();
+  return /* @__PURE__ */ React84.createElement(AriaButton3, { onPress: handlePress, className: preset({ isPresetActive: isActive }) }, label);
+};
 
 // src/atoms/Dialog/Dialog.tsx
 import React85 from "react";
@@ -14833,9 +14873,9 @@ var CalendarTimeField = ({ granularity, labelText = "Time", ...props }) => {
 var DatePickerCalendarPropsContext = React86.createContext(null);
 var DatePickerCalendar = (props) => {
   const ctx = React86.useContext(DatePickerCalendarPropsContext);
-  const { variant, granularity, errorMessage } = mergeProps3(ctx, props);
-  const { dialog, errorMessage: errorMessageStyle } = datePickerCalendarStyles();
-  return /* @__PURE__ */ React86.createElement(Popover, { offset: 0 }, /* @__PURE__ */ React86.createElement(Dialog, { className: dialog() }, /* @__PURE__ */ React86.createElement(Spacing, { gap: "3" }, /* @__PURE__ */ React86.createElement(Calendar, null), variant === "datetime" && /* @__PURE__ */ React86.createElement(CalendarTimeField, { granularity }), errorMessage && /* @__PURE__ */ React86.createElement(Text, { slot: "errorMessage", className: errorMessageStyle() }, errorMessage))));
+  const { variant, granularity, errorMessage, presets = [] } = mergeProps3(ctx, props);
+  const { dialog, calendar, errorMessage: errorMessageStyle } = datePickerCalendarStyles();
+  return /* @__PURE__ */ React86.createElement(Popover, { offset: 0 }, /* @__PURE__ */ React86.createElement(Dialog, { className: dialog() }, presets.length > 0 && /* @__PURE__ */ React86.createElement(Presets, null, presets.map((props2) => /* @__PURE__ */ React86.createElement(Preset, { key: props2.value.toString(), ...props2 }))), /* @__PURE__ */ React86.createElement(Spacing, { gap: "3", className: tw("p-5") }, /* @__PURE__ */ React86.createElement(Calendar, { className: calendar() }), variant === "datetime" && /* @__PURE__ */ React86.createElement(CalendarTimeField, { granularity }), errorMessage && /* @__PURE__ */ React86.createElement(Text, { slot: "errorMessage", className: errorMessageStyle() }, errorMessage))));
 };
 DatePickerCalendar.displayName = "DatePicker.Calendar";
 var DatePickerField = ({ clearSelectionEnabled = true, disabled = false }) => {
@@ -14849,11 +14889,18 @@ var createDatePickerBase = (variant) => {
     shouldCloseOnSelect,
     errorMessage,
     clearSelectionEnabled = true,
+    presets,
     children,
     ...props
   }) => {
     const content = children ?? /* @__PURE__ */ React86.createElement(React86.Fragment, null, /* @__PURE__ */ React86.createElement(DatePickerField, { clearSelectionEnabled, disabled }), /* @__PURE__ */ React86.createElement(DatePickerCalendar, null));
-    return /* @__PURE__ */ React86.createElement(DatePickerCalendarPropsContext.Provider, { value: { variant, granularity: props.granularity, errorMessage } }, /* @__PURE__ */ React86.createElement(DatePicker, { ...props, variant, isDisabled: disabled, isInvalid: valid === false }, content));
+    return /* @__PURE__ */ React86.createElement(
+      DatePickerCalendarPropsContext.Provider,
+      {
+        value: { variant, granularity: props.granularity, errorMessage, presets }
+      },
+      /* @__PURE__ */ React86.createElement(DatePicker, { ...props, variant, isDisabled: disabled, isInvalid: valid === false }, content)
+    );
   };
   datePicker.Calendar = DatePickerCalendar;
   datePicker.Field = DatePickerField;
@@ -14983,9 +15030,9 @@ var RangeCalendarTimeField = ({ granularity, part, ...props }) => {
 var DateRangePickerCalendarPropsContext = React88.createContext(null);
 var DateRangePickerCalendar = (props) => {
   const ctx = React88.useContext(DateRangePickerCalendarPropsContext);
-  const { variant, granularity, errorMessage } = mergeProps4(ctx, props);
-  const { dialog, errorMessage: errorMessageStyle } = datePickerCalendarStyles();
-  return /* @__PURE__ */ React88.createElement(Popover, { offset: 0 }, /* @__PURE__ */ React88.createElement(Dialog, { className: dialog() }, /* @__PURE__ */ React88.createElement(Spacing, { gap: "3" }, /* @__PURE__ */ React88.createElement(RangeCalendar, null), variant === "datetime" && /* @__PURE__ */ React88.createElement(Box.Flex, { gap: "6" }, /* @__PURE__ */ React88.createElement("div", { className: tw("flex-1") }, /* @__PURE__ */ React88.createElement(RangeCalendarTimeField, { granularity, part: "start" })), /* @__PURE__ */ React88.createElement("div", { className: tw("flex-1") }, /* @__PURE__ */ React88.createElement(RangeCalendarTimeField, { granularity, part: "end" }))), errorMessage && /* @__PURE__ */ React88.createElement(Text2, { slot: "errorMessage", className: errorMessageStyle() }, errorMessage))));
+  const { variant, granularity, errorMessage, presets = [] } = mergeProps4(ctx, props);
+  const { dialog, calendar, errorMessage: errorMessageStyle } = datePickerCalendarStyles();
+  return /* @__PURE__ */ React88.createElement(Popover, { offset: 0 }, /* @__PURE__ */ React88.createElement(Dialog, { className: dialog() }, presets.length > 0 && /* @__PURE__ */ React88.createElement(Presets, null, presets.map((props2) => /* @__PURE__ */ React88.createElement(RangePreset, { key: `${props2.value.start.toString()}-${props2.value.end.toString()}`, ...props2 }))), /* @__PURE__ */ React88.createElement(Spacing, { gap: "3", className: tw("p-5") }, /* @__PURE__ */ React88.createElement(RangeCalendar, { className: calendar() }), variant === "datetime" && /* @__PURE__ */ React88.createElement(Box.Flex, { gap: "6" }, /* @__PURE__ */ React88.createElement("div", { className: tw("flex-1") }, /* @__PURE__ */ React88.createElement(RangeCalendarTimeField, { granularity, part: "start" })), /* @__PURE__ */ React88.createElement("div", { className: tw("flex-1") }, /* @__PURE__ */ React88.createElement(RangeCalendarTimeField, { granularity, part: "end" }))), errorMessage && /* @__PURE__ */ React88.createElement(Text2, { slot: "errorMessage", className: errorMessageStyle() }, errorMessage))));
 };
 DateRangePickerCalendar.displayName = "DateRangePicker.Calendar";
 var DateRangePickerField = ({ clearSelectionEnabled = true, disabled = false }) => {
@@ -14999,11 +15046,18 @@ var createDateRangePickerBase = (variant) => {
     shouldCloseOnSelect,
     errorMessage,
     clearSelectionEnabled = true,
+    presets,
     children,
     ...props
   }) => {
     const content = children ?? /* @__PURE__ */ React88.createElement(React88.Fragment, null, /* @__PURE__ */ React88.createElement(DateRangePickerField, { clearSelectionEnabled, disabled }), /* @__PURE__ */ React88.createElement(DateRangePickerCalendar, { variant, granularity: props.granularity, errorMessage }));
-    return /* @__PURE__ */ React88.createElement(DateRangePickerCalendarPropsContext.Provider, { value: { variant, granularity: props.granularity, errorMessage } }, /* @__PURE__ */ React88.createElement(DateRangePicker, { ...props, variant, isDisabled: disabled, isInvalid: valid === false }, content));
+    return /* @__PURE__ */ React88.createElement(
+      DateRangePickerCalendarPropsContext.Provider,
+      {
+        value: { variant, granularity: props.granularity, errorMessage, presets }
+      },
+      /* @__PURE__ */ React88.createElement(DateRangePicker, { ...props, variant, isDisabled: disabled, isInvalid: valid === false }, content)
+    );
   };
   dateRangePicker.Calendar = DateRangePickerCalendar;
   dateRangePicker.Field = DateRangePickerField;
@@ -15800,9 +15854,9 @@ var EmptyState = ({
 // src/atoms/Filter/Filter.tsx
 import React97 from "react";
 import {
-  Button as AriaButton3,
-  DatePickerStateContext as AriaDatePickerStateContext,
-  DateRangePickerStateContext as AriaDateRangePickerStateContext,
+  Button as AriaButton4,
+  DatePickerStateContext as AriaDatePickerStateContext2,
+  DateRangePickerStateContext as AriaDateRangePickerStateContext2,
   Group as AriaGroup
 } from "react-aria-components";
 import { tv as tv14 } from "tailwind-variants";
@@ -15839,8 +15893,8 @@ var FilterTrigger = ({
   error: error2 = false,
   ...props
 }) => {
-  const ariaDatePickerState = React97.useContext(AriaDatePickerStateContext);
-  const ariaDateRangePickerState = React97.useContext(AriaDateRangePickerStateContext);
+  const ariaDatePickerState = React97.useContext(AriaDatePickerStateContext2);
+  const ariaDateRangePickerState = React97.useContext(AriaDateRangePickerStateContext2);
   const isUsedInsideDatePicker = !!ariaDatePickerState?.value;
   const isUsedInsideDateRangePicker = !!ariaDateRangePickerState?.value.start && !!ariaDateRangePickerState.value.end;
   const onClearDatePickerRelated = () => {
@@ -15860,7 +15914,7 @@ var FilterTrigger = ({
       className: (renderProps) => filterWrapper({ ...renderProps, hasValue: hasValue || !!badge })
     },
     /* @__PURE__ */ React97.createElement(React97.Fragment, null, /* @__PURE__ */ React97.createElement(
-      AriaButton3,
+      AriaButton4,
       {
         onPress: () => {
           onClick && onClick();