@konstructio/ui 0.1.2-alpha.107 → 0.1.2-alpha.108

package/dist/index.js

@@ -1,5 +1,5 @@
 import { t as o } from "./Checkbox-8KnRLpQG.js";
-import { t as m } from "./DropdownButton-D4QlKGg7.js";
+import { t as m } from "./DropdownButton-LEDrhn1j.js";
 import { t as e } from "./Breadcrumb-MrF1Z6w2.js";
 import { t as a } from "./Input-is8n7emP.js";
 import { t as n } from "./Counter-CDXdP1Af.js";
@@ -8,160 +8,164 @@ import { Alert as g } from "./components/Alert/Alert.js";
 import { Button as c } from "./components/Button/Button.js";
 import { AlertDialog as D } from "./components/AlertDialog/AlertDialog.js";
 import { useClickOutside as R } from "./hooks/useClickOutside.js";
-import { useMediaQuery as b } from "./hooks/useMediaQuery.js";
-import { useToggle as w } from "./hooks/useToggle.js";
-import { Autocomplete as x } from "./components/Autocomplete/Autocomplete.js";
+import { useMediaQuery as V } from "./hooks/useMediaQuery.js";
+import { useToggle as h } from "./hooks/useToggle.js";
+import { Autocomplete as B } from "./components/Autocomplete/Autocomplete.js";
 import { t as E } from "./Loading-DO8JOWBV.js";
-import { Badge as P } from "./components/Badge/Badge.js";
+import { Badge as L } from "./components/Badge/Badge.js";
 import { Typography as I } from "./components/Typography/Typography.js";
 import { ButtonGroup as k } from "./components/ButtonGroup/ButtonGroup.js";
-import { Card as A } from "./components/Card/Card.js";
-import { DatePicker as y } from "./components/Datepicker/DatePicker.js";
-import { Radio as O } from "./components/Radio/Radio.js";
-import { RadioGroup as U } from "./components/RadioGroup/RadioGroup.js";
-import { TimePicker as j } from "./components/TimePicker/TimePicker.js";
-import { DateRangePicker as H } from "./components/DateRangePicker/DateRangePicker.js";
-import { Divider as K } from "./components/Divider/Divider.js";
-import { Drawer as Y } from "./components/Drawer/Drawer.js";
-import { BadgeMultiSelect as _ } from "./components/Filter/components/BadgeDropdown/BadgeMultiSelect.js";
-import { DateFilterDropdown as rr } from "./components/Filter/components/DateFilterDropdown/DateFilterDropdown.js";
-import { DateRangeFilterDropdown as tr } from "./components/Filter/components/DateRangeFilterDropdown/DateRangeFilterDropdown.js";
-import { TextMultiSelect as ir } from "./components/Filter/components/TextMultiSelect/TextMultiSelect.js";
-import { TimeFilterDropdown as pr } from "./components/Filter/components/TimeFilterDropdown/TimeFilterDropdown.js";
-import { Filter as fr } from "./components/Filter/Filter.js";
-import { t as sr } from "./ImageUpload-D7HKSXK8.js";
-import { LineChart as dr } from "./components/LineChart/LineChart.js";
-import { t as gr } from "./Modal-Dq9BHD_9.js";
-import { t as cr } from "./components-CaEW5ge4.js";
-import { PhoneNumberInput as Dr } from "./components/PhoneNumberInput/PhoneNumberInput.js";
-import { PieChart as Rr } from "./components/PieChart/PieChart.js";
-import { ProgressBar as br } from "./components/ProgressBar/ProgressBar.js";
-import { RadioCard as wr } from "./components/RadioCard/RadioCard.js";
-import { RadioCardGroup as xr } from "./components/RadioCardGroup/RadioCardGroup.js";
-import { Range as Er } from "./components/Range/Range.js";
-import { Select as Pr } from "./components/Select/Select.js";
-import { CollapseTrigger as Ir } from "./components/Sidebar/components/CollapseTrigger/CollapseTrigger.js";
-import { Footer as kr } from "./components/Sidebar/components/Footer/Footer.js";
-import { Label as Ar } from "./components/Sidebar/components/Label/Label.js";
-import { Logo as yr } from "./components/Sidebar/components/Logo/Logo.js";
-import { NavigationGroup as Or } from "./components/Sidebar/components/NavigationGroup/NavigationGroup.js";
-import { NavigationOption as Ur } from "./components/Sidebar/components/NavigationOption/NavigationOption.js";
-import { NavigationSeparator as jr } from "./components/Sidebar/components/NavigationSeparator/NavigationSeparator.js";
-import { Navigation as Hr } from "./components/Sidebar/components/Navigation/Navigation.js";
-import { Sidebar as Kr } from "./components/Sidebar/Sidebar.js";
-import { Slider as Yr } from "./components/Slider/Slider.js";
-import { t as _r } from "./Spinner-BJE79VTl.js";
-import { horizontalConnectorWrapperVariants as ro, stepConnectorVariants as oo, stepContentVariants as to, stepDescriptionVariants as mo, stepIndicatorVariants as io, stepItemVariants as eo, stepLabelVariants as po, stepListVariants as ao, stepVariants as fo, stepperVariants as no } from "./components/Stepper/Stepper.variants.js";
-import { Stepper as lo } from "./components/Stepper/Stepper.js";
-import { t as go } from "./Switch-C7286Bcu.js";
-import { Table as co } from "./components/Table/Table.js";
-import { Content as Do } from "./components/Tabs/components/Content.js";
-import { List as Ro } from "./components/Tabs/components/List.js";
-import { Trigger as bo } from "./components/Tabs/components/Trigger.js";
-import { Tabs as wo } from "./components/Tabs/Tabs.js";
-import { Tag as xo } from "./components/Tag/Tag.js";
-import { TagSelect as Eo } from "./components/TagSelect/TagSelect.js";
-import { TextArea as Po } from "./components/TextArea/TextArea.js";
-import { t as Io } from "./Toast-jSx3Lao8.js";
-import { Tooltip as ko } from "./components/Tooltip/Tooltip.js";
-import { t as Ao } from "./events.types-BG1Uh8i6.js";
-import { sendResetFiltersEvent as yo } from "./components/VirtualizedTable/events/filters/filters.js";
-import { sendRefreshEvent as Oo } from "./components/VirtualizedTable/events/refresh/refresh.js";
-import { sendCollapseRowEvent as Uo, sendExpandRowEvent as Wo, sendToggleRowEvent as jo } from "./components/VirtualizedTable/events/row/row.js";
-import { TruncateText as Ho } from "./components/VirtualizedTable/components/TruncateText/TruncateText.js";
-import { VirtualizedTable as Ko } from "./components/VirtualizedTable/VirtualizedTable.js";
-import { ThemeContext as Yo } from "./contexts/theme.context.js";
-import { useTheme as _o } from "./contexts/theme.hook.js";
-import { t as rt } from "./theme.provider-CSL1WCYG.js";
+import { Card as y } from "./components/Card/Card.js";
+import { CopyButton as G } from "./components/CopyButton/CopyButton.js";
+import { DatePicker as O } from "./components/Datepicker/DatePicker.js";
+import { Radio as U } from "./components/Radio/Radio.js";
+import { RadioGroup as j } from "./components/RadioGroup/RadioGroup.js";
+import { TimePicker as H } from "./components/TimePicker/TimePicker.js";
+import { DateRangePicker as K } from "./components/DateRangePicker/DateRangePicker.js";
+import { Divider as Y } from "./components/Divider/Divider.js";
+import { Drawer as _ } from "./components/Drawer/Drawer.js";
+import { BadgeMultiSelect as rr } from "./components/Filter/components/BadgeDropdown/BadgeMultiSelect.js";
+import { CustomDateRangeFilterDropdown as tr } from "./components/Filter/components/CustomDateRangeFilterDropdown/CustomDateRangeFilterDropdown.js";
+import { DateFilterDropdown as ir } from "./components/Filter/components/DateFilterDropdown/DateFilterDropdown.js";
+import { DateRangeFilterDropdown as pr } from "./components/Filter/components/DateRangeFilterDropdown/DateRangeFilterDropdown.js";
+import { TextMultiSelect as fr } from "./components/Filter/components/TextMultiSelect/TextMultiSelect.js";
+import { TimeFilterDropdown as sr } from "./components/Filter/components/TimeFilterDropdown/TimeFilterDropdown.js";
+import { Filter as dr } from "./components/Filter/Filter.js";
+import { t as gr } from "./ImageUpload-D7HKSXK8.js";
+import { LineChart as cr } from "./components/LineChart/LineChart.js";
+import { t as Dr } from "./Modal-DL4p692X.js";
+import { t as Rr } from "./components-CaEW5ge4.js";
+import { PhoneNumberInput as Vr } from "./components/PhoneNumberInput/PhoneNumberInput.js";
+import { PieChart as hr } from "./components/PieChart/PieChart.js";
+import { ProgressBar as Br } from "./components/ProgressBar/ProgressBar.js";
+import { RadioCard as Er } from "./components/RadioCard/RadioCard.js";
+import { RadioCardGroup as Lr } from "./components/RadioCardGroup/RadioCardGroup.js";
+import { Range as Ir } from "./components/Range/Range.js";
+import { Select as kr } from "./components/Select/Select.js";
+import { CollapseTrigger as yr } from "./components/Sidebar/components/CollapseTrigger/CollapseTrigger.js";
+import { Footer as Gr } from "./components/Sidebar/components/Footer/Footer.js";
+import { Label as Or } from "./components/Sidebar/components/Label/Label.js";
+import { Logo as Ur } from "./components/Sidebar/components/Logo/Logo.js";
+import { NavigationGroup as jr } from "./components/Sidebar/components/NavigationGroup/NavigationGroup.js";
+import { NavigationOption as Hr } from "./components/Sidebar/components/NavigationOption/NavigationOption.js";
+import { NavigationSeparator as Kr } from "./components/Sidebar/components/NavigationSeparator/NavigationSeparator.js";
+import { Navigation as Yr } from "./components/Sidebar/components/Navigation/Navigation.js";
+import { Sidebar as _r } from "./components/Sidebar/Sidebar.js";
+import { Slider as ro } from "./components/Slider/Slider.js";
+import { t as to } from "./Spinner-BJE79VTl.js";
+import { horizontalConnectorWrapperVariants as io, stepConnectorVariants as eo, stepContentVariants as po, stepDescriptionVariants as ao, stepIndicatorVariants as fo, stepItemVariants as no, stepLabelVariants as so, stepListVariants as lo, stepVariants as uo, stepperVariants as go } from "./components/Stepper/Stepper.variants.js";
+import { Stepper as co } from "./components/Stepper/Stepper.js";
+import { t as Do } from "./Switch-C7286Bcu.js";
+import { Table as Ro } from "./components/Table/Table.js";
+import { Content as Vo } from "./components/Tabs/components/Content.js";
+import { List as ho } from "./components/Tabs/components/List.js";
+import { Trigger as Bo } from "./components/Tabs/components/Trigger.js";
+import { Tabs as Eo } from "./components/Tabs/Tabs.js";
+import { Tag as Lo } from "./components/Tag/Tag.js";
+import { TagSelect as Io } from "./components/TagSelect/TagSelect.js";
+import { TextArea as ko } from "./components/TextArea/TextArea.js";
+import { t as yo } from "./Toast-jSx3Lao8.js";
+import { Tooltip as Go } from "./components/Tooltip/Tooltip.js";
+import { t as Oo } from "./events.types-BG1Uh8i6.js";
+import { sendResetFiltersEvent as Uo } from "./components/VirtualizedTable/events/filters/filters.js";
+import { sendRefreshEvent as jo } from "./components/VirtualizedTable/events/refresh/refresh.js";
+import { sendCollapseRowEvent as Ho, sendExpandRowEvent as Jo, sendToggleRowEvent as Ko } from "./components/VirtualizedTable/events/row/row.js";
+import { TruncateText as Yo } from "./components/VirtualizedTable/components/TruncateText/TruncateText.js";
+import { VirtualizedTable as _o } from "./components/VirtualizedTable/VirtualizedTable.js";
+import { ThemeContext as rt } from "./contexts/theme.context.js";
+import { useTheme as tt } from "./contexts/theme.hook.js";
+import { t as it } from "./theme.provider-CSL1WCYG.js";
 import "./contexts/index.js";
 export {
   g as Alert,
   D as AlertDialog,
-  x as Autocomplete,
-  P as Badge,
-  _ as BadgeMultiSelect,
+  B as Autocomplete,
+  L as Badge,
+  rr as BadgeMultiSelect,
   e as Breadcrumb,
   c as Button,
   k as ButtonGroup,
-  A as Card,
+  y as Card,
   o as Checkbox,
-  Ir as CollapseTrigger,
-  Do as Content,
+  yr as CollapseTrigger,
+  Vo as Content,
+  G as CopyButton,
   n as Counter,
-  rr as DateFilterDropdown,
-  y as DatePicker,
-  tr as DateRangeFilterDropdown,
-  H as DateRangePicker,
-  K as Divider,
-  Y as Drawer,
-  Pr as Dropdown,
+  tr as CustomDateRangeFilterDropdown,
+  ir as DateFilterDropdown,
+  O as DatePicker,
+  pr as DateRangeFilterDropdown,
+  K as DateRangePicker,
+  Y as Divider,
+  _ as Drawer,
+  kr as Dropdown,
   m as DropdownButton,
-  fr as Filter,
-  kr as Footer,
-  sr as ImageUpload,
+  dr as Filter,
+  Gr as Footer,
+  gr as ImageUpload,
   a as Input,
-  Ar as Label,
-  dr as LineChart,
-  Ro as List,
+  Or as Label,
+  cr as LineChart,
+  ho as List,
   E as Loading,
-  yr as Logo,
-  gr as Modal,
-  cr as MultiSelectDropdown,
-  Hr as Navigation,
-  Or as NavigationGroup,
-  Ur as NavigationOption,
-  jr as NavigationSeparator,
+  Ur as Logo,
+  Dr as Modal,
+  Rr as MultiSelectDropdown,
+  Yr as Navigation,
+  jr as NavigationGroup,
+  Hr as NavigationOption,
+  Kr as NavigationSeparator,
   n as NumberInput,
-  Dr as PhoneNumberInput,
-  Rr as PieChart,
-  br as ProgressBar,
-  O as Radio,
-  wr as RadioCard,
-  xr as RadioCardGroup,
-  U as RadioGroup,
-  Er as Range,
-  Pr as Select,
-  Kr as Sidebar,
-  Yr as Slider,
-  _r as Spinner,
-  lo as Stepper,
-  go as Switch,
-  co as Table,
-  wo as Tabs,
-  xo as Tag,
-  Eo as TagSelect,
-  Po as TextArea,
-  ir as TextMultiSelect,
-  Yo as ThemeContext,
-  rt as ThemeProvider,
-  pr as TimeFilterDropdown,
-  j as TimePicker,
-  Io as Toast,
-  ko as Tooltip,
-  bo as Trigger,
-  Ho as TruncateText,
+  Vr as PhoneNumberInput,
+  hr as PieChart,
+  Br as ProgressBar,
+  U as Radio,
+  Er as RadioCard,
+  Lr as RadioCardGroup,
+  j as RadioGroup,
+  Ir as Range,
+  kr as Select,
+  _r as Sidebar,
+  ro as Slider,
+  to as Spinner,
+  co as Stepper,
+  Do as Switch,
+  Ro as Table,
+  Eo as Tabs,
+  Lo as Tag,
+  Io as TagSelect,
+  ko as TextArea,
+  fr as TextMultiSelect,
+  rt as ThemeContext,
+  it as ThemeProvider,
+  sr as TimeFilterDropdown,
+  H as TimePicker,
+  yo as Toast,
+  Go as Tooltip,
+  Bo as Trigger,
+  Yo as TruncateText,
   I as Typography,
-  Ko as VirtualizedTable,
-  Ao as VirtualizedTableEvent,
+  _o as VirtualizedTable,
+  Oo as VirtualizedTableEvent,
   d as cn,
-  ro as horizontalConnectorWrapperVariants,
+  io as horizontalConnectorWrapperVariants,
   l as resolveColor,
-  Uo as sendCollapseRowEvent,
-  Wo as sendExpandRowEvent,
-  Oo as sendRefreshEvent,
-  yo as sendResetFiltersEvent,
-  jo as sendToggleRowEvent,
-  oo as stepConnectorVariants,
-  to as stepContentVariants,
-  mo as stepDescriptionVariants,
-  io as stepIndicatorVariants,
-  eo as stepItemVariants,
-  po as stepLabelVariants,
-  ao as stepListVariants,
-  fo as stepVariants,
-  no as stepperVariants,
+  Ho as sendCollapseRowEvent,
+  Jo as sendExpandRowEvent,
+  jo as sendRefreshEvent,
+  Uo as sendResetFiltersEvent,
+  Ko as sendToggleRowEvent,
+  eo as stepConnectorVariants,
+  po as stepContentVariants,
+  ao as stepDescriptionVariants,
+  fo as stepIndicatorVariants,
+  no as stepItemVariants,
+  so as stepLabelVariants,
+  lo as stepListVariants,
+  uo as stepVariants,
+  go as stepperVariants,
   R as useClickOutside,
-  b as useMediaQuery,
-  _o as useTheme,
-  w as useToggle
+  V as useMediaQuery,
+  tt as useTheme,
+  h as useToggle
 };

package/dist/lib/assets/icons/components/AllSetCheck.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './types';
+export declare const AllSetCheckIcon: import('react').ForwardRefExoticComponent<Omit<IconProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+export default AllSetCheckIcon;

package/dist/lib/assets/icons/components/Detach.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './types';
+export declare const DetachIcon: import('react').ForwardRefExoticComponent<Omit<IconProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+export default DetachIcon;

package/dist/lib/assets/icons/components/Pause.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './types';
+export declare const PauseIcon: import('react').ForwardRefExoticComponent<Omit<IconProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+export default PauseIcon;

package/dist/lib/assets/icons/components/SpendStatement.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './types';
+export declare const SpendStatementIcon: import('react').ForwardRefExoticComponent<Omit<IconProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+export default SpendStatementIcon;

package/dist/lib/assets/icons/components/Updated.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './types';
+export declare const UpdatedIcon: import('react').ForwardRefExoticComponent<Omit<IconProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+export default UpdatedIcon;

package/dist/lib/assets/icons/components/index.d.ts

@@ -2,6 +2,7 @@ export { AccountsIcon } from './Accounts';
 export { ActivityIcon } from './Activity';
 export { AddChartIcon } from './AddChart';
 export { AlertOutlineIcon } from './AlertOutline';
+export { AllSetCheckIcon } from './AllSetCheck';
 export { ApiKeyIcon } from './ApiKey';
 export { AppRepoIcon } from './AppRepo';
 export { AppsIcon } from './Apps';
@@ -39,6 +40,7 @@ export { DatabaseIcon } from './Database';
 export { DatacenterIcon } from './Datacenter';
 export { DeleteIcon } from './Delete';
 export { DeployIcon } from './Deploy';
+export { DetachIcon } from './Detach';
 export { DnsIcon } from './Dns';
 export { DocsIcon } from './Docs';
 export { DollarSignIcon } from './DollarSign';
@@ -81,6 +83,7 @@ export { OrganizationIcon } from './Organization';
 export { OrgSettingsIcon } from './OrgSettings';
 export { PagesStackIcon } from './PagesStack';
 export { PageviewIcon } from './Pageview';
+export { PauseIcon } from './Pause';
 export { PeopleIcon } from './People';
 export { PhotoLibraryIcon } from './PhotoLibrary';
 export { PipelineIcon } from './Pipeline';
@@ -96,11 +99,13 @@ export { ReservedIpIcon } from './ReservedIp';
 export { ScatterPlotIcon } from './ScatterPlot';
 export { SearchIcon } from './Search';
 export { ServerIcon } from './Server';
+export { SpendStatementIcon } from './SpendStatement';
 export { SshKeyIcon } from './SshKey';
 export { StartIcon } from './Start';
 export { TabNewIcon } from './TabNew';
 export { TeamMembersIcon } from './TeamMembers';
 export { TeamsIcon } from './Teams';
+export { UpdatedIcon } from './Updated';
 export { UploadIcon } from './Upload';
 export { VolumeIcon } from './Volume';
 export { WarningIcon } from './Warning';

package/dist/lib/components/CopyButton/CopyButton.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { Props } from './CopyButton.types';
+declare const CopyButton: FC<Props>;
+export { CopyButton };

package/dist/lib/components/CopyButton/CopyButton.types.d.ts

@@ -0,0 +1,15 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { Theme } from '../../domain/theme';
+export type Props = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onClick' | 'onCopy'> & {
+    arrowClassName?: string;
+    children?: ReactNode;
+    copiedLabel?: string;
+    copyLabel?: string;
+    label: string;
+    resetDelay?: number;
+    text: string;
+    theme?: Theme;
+    tooltipClassName?: string;
+    onCopy?: (text: string) => void;
+    onCopyError?: (error: unknown) => void;
+};

package/dist/lib/components/CopyButton/CopyButton.variants.d.ts

@@ -0,0 +1,3 @@
+export declare const copyButtonVariants: (props?: ({
+    iconOnly?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/lib/components/CopyButton/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useCopyToClipboard/useCopyToClipboard';

package/dist/lib/components/CopyButton/hooks/useCopyToClipboard/useCopyToClipboard.d.ts

@@ -0,0 +1,5 @@
+import { Options } from './useCopyToClipboard.types';
+export declare const useCopyToClipboard: ({ resetDelay, onCopy, onCopyError, }?: Options) => {
+    copied: boolean;
+    copy: (text: string) => Promise<boolean>;
+};

package/dist/lib/components/CopyButton/hooks/useCopyToClipboard/useCopyToClipboard.types.d.ts

@@ -0,0 +1,5 @@
+export type Options = {
+    resetDelay?: number;
+    onCopy?: (text: string) => void;
+    onCopyError?: (error: unknown) => void;
+};

package/dist/lib/components/DateRangePicker/DateRangePicker.types.d.ts

@@ -1,11 +1,12 @@
 import { VariantProps } from 'class-variance-authority';
+import { ReactNode } from 'react';
 import { Theme } from '../../domain/theme';
 import { CalendarPanelClassNames, DayPickerClassNames } from './components/CalendarPanel/CalendarPanel.types';
 import { DateTimeInputsClassNames } from './components/DateTimeInputs/DateTimeInputs.types';
 import { PresetLabels, PresetPanelClassNames } from './components/PresetPanel/PresetPanel.types';
 import { dateRangePickerVariants } from './DateRangePicker.variants';
-import { DateRange, DateRangePreset, DateRangeWithTime, TimeRange } from './contexts';
-export type { DateRange, DateRangePreset, DateRangeWithTime, TimeRange };
+import { DateDisplayFormat, DateRange, DateRangePreset, DateRangePresetOption, DateRangeWithTime, TimeRange } from './contexts';
+export type { DateDisplayFormat, DateRange, DateRangePreset, DateRangePresetOption, DateRangeWithTime, TimeRange, };
 export type { CalendarPanelClassNames, DateTimeInputsClassNames, DayPickerClassNames, PresetLabels, PresetPanelClassNames, };
 /**
  * Props for the DateRangePicker component.
@@ -24,11 +25,21 @@ export type Props = VariantProps<typeof dateRangePickerVariants> & {
     /** Initial time range */
     defaultTime?: TimeRange;
     /** Initially selected preset (default: 'custom') */
-    defaultPreset?: DateRangePreset;
+    /**
+     * Initially selected preset. `null` opens with nothing selected, which pairs
+     * with `revealCalendarOnCustom` to show only the preset list.
+     */
+    defaultPreset?: DateRangePreset | null;
     /** Callback when the range changes (includes time) */
     onRangeChange?: (range: DateRangeWithTime) => void;
     /** Callback when the date changes (start or end date, without time) */
     onDateChange?: (range: DateRange) => void;
+    /**
+     * Callback when a preset is selected, with the window it resolved to (empty for
+     * a manual-selection entry). Distinguishes choosing a preset from picking a day,
+     * which `onRangeChange` cannot.
+     */
+    onPresetChange?: (preset: DateRangePreset | null, range: DateRange) => void;
     /** Time format: '12' for 12-hour or '24' for 24-hour */
     timeFormat?: '12' | '24';
     /** Whether to show time inputs (default: true) */
@@ -71,6 +82,8 @@ export type Props = VariantProps<typeof dateRangePickerVariants> & {
      * - 'together': Both months navigate together (prev/next moves both by one month)
      */
     navigationMode?: 'independent' | 'together';
+    numberOfMonths?: 1 | 2;
+    dateDisplayFormat?: DateDisplayFormat;
     /** Aria label for the calendar container (default: 'Date range picker calendar') */
     ariaLabelCalendar?: string;
     /** Aria label for previous month button in together mode (default: 'Previous month') */
@@ -101,6 +114,39 @@ export type Props = VariantProps<typeof dateRangePickerVariants> & {
     errorDateNotAvailable?: string;
     /** Whether to show the preset panel (default: true) */
     showPresets?: boolean;
+    /**
+     * Replaces the built-in preset options. Each option carries its own label and a
+     * `resolve(now)` returning the window it stands for, which is what allows
+     * rolling windows ("the past 7×24 hours") rather than only calendar buckets.
+     *
+     * An option whose `resolve` returns an empty range is the manual-selection
+     * entry; `custom` is the reserved id the calendar switches back to when a day
+     * is picked, so include it in the list to keep that entry visible. Order in the
+     * array is the order rendered.
+     *
+     * @example
+     * ```tsx
+     * <DateRangePicker
+     *   presets={[
+     *     { value: 'last-24-hours', label: 'Last 24 hours',
+     *       resolve: (now) => ({ from: new Date(now.getTime() - 864e5), to: now }) },
+     *     { value: 'custom', label: 'Custom range', resolve: () => ({}) },
+     *   ]}
+     * />
+     * ```
+     */
+    presets?: DateRangePresetOption[];
+    footer?: ReactNode;
+    /**
+     * Render the date inputs and calendar only while the manual-selection preset is
+     * active — the entry whose `resolve` returns an empty range, `custom` by
+     * default (default: false, panels always visible).
+     *
+     * Presets become one-click shortcuts and the calendar is revealed on demand.
+     * Pair it with a `defaultPreset` that resolves to a window, otherwise the
+     * picker opens on `custom` — the library default — and starts expanded.
+     */
+    revealCalendarOnCustom?: boolean;
     /** Label for the time period section (default: 'Time period') */
     labelTimePeriod?: string;
     /** Aria label for the time period section (default: 'Time period options') */
@@ -108,6 +154,11 @@ export type Props = VariantProps<typeof dateRangePickerVariants> & {
     /** Custom labels for preset options */
     presetLabels?: PresetLabels;
     /** Custom class names for different parts of the component */
+    /**
+     * Marks the From/To fields with a required indicator. Decorative only — the
+     * fields carry no `aria-required`, since a range needs one date, not both.
+     */
+    requiredDates?: boolean;
     classNames?: DateRangePickerClassNames;
 };
 /** @deprecated Use Props instead */

package/dist/lib/components/DateRangePicker/DateRangePicker.variants.d.ts

@@ -1,2 +1,8 @@
+/**
+ * The surface is one continuous panel divided by hairlines, so the padding lives
+ * on the columns rather than here — that is what lets the preset column run to
+ * the edge and carry the rule between the two. `overflow-hidden` keeps those
+ * flush columns inside the rounded corner.
+ */
 export declare const dateRangePickerVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
 export declare const rightPanelVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/lib/components/DateRangePicker/components/CalendarPanel/hooks/useTogetherCarousel.d.ts

@@ -5,10 +5,11 @@ export type UseTogetherCarouselProps = {
     canNavigatePrev: boolean;
     canNavigateNext: boolean;
     navigationMode: 'together' | 'independent';
+    numberOfMonths?: 1 | 2;
     navigatePrevMonth: () => void;
     navigateNextMonth: () => void;
 };
-export declare const useTogetherCarousel: ({ displayedMonths, animationDuration, disabled, canNavigatePrev, canNavigateNext, navigationMode, navigatePrevMonth, navigateNextMonth, }: UseTogetherCarouselProps) => {
+export declare const useTogetherCarousel: ({ displayedMonths, animationDuration, disabled, canNavigatePrev, canNavigateNext, navigationMode, numberOfMonths, navigatePrevMonth, navigateNextMonth, }: UseTogetherCarouselProps) => {
     carouselRef: import('react').RefObject<HTMLDivElement | null>;
     isAnimating: boolean;
     enableTransition: boolean;

package/dist/lib/components/DateRangePicker/components/DateTimeInputs/DateTimeInputs.types.d.ts

@@ -20,6 +20,8 @@ export type DateTimeInputsProps = {
     labelEndDate?: string;
     /** Label for time inputs (default: 'Time') */
     labelTime?: string;
+    /** Marks both date fields as required */
+    requiredDates?: boolean;
     /** Aria label for start date input (default: 'Start date') */
     ariaLabelStartDate?: string;
     /** Aria label for end date input (default: 'End date') */
@@ -28,10 +30,6 @@ export type DateTimeInputsProps = {
     errorInvalidDate?: string;
     /** Error message for unavailable date (default: 'Date is not available') */
     errorDateNotAvailable?: string;
-    /** Error message when start date is after end date (default: 'Start date must be before end date') */
-    errorStartAfterEnd?: string;
-    /** Error message when end date is before start date (default: 'End date must be after start date') */
-    errorEndBeforeStart?: string;
     /** Custom class names for styling */
     classNames?: DateTimeInputsClassNames;
 };

package/dist/lib/components/DateRangePicker/components/DateTimeInputs/DateTimeInputs.variants.d.ts

@@ -1,5 +1,12 @@
-export declare const dateTimeInputsVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const dateTimeInputsVariants: (props?: ({
+    layout?: "row" | "compact" | "stacked" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const dateTimeGroupVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
 export declare const dateInputWrapperVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
 export declare const timeInputWrapperVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
 export declare const inputLabelVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+/**
+ * Marks the date fields as required. It is decorative: the range needs *a* date,
+ * not both, so the inputs are deliberately left without `aria-required`.
+ */
+export declare const inputRequiredMarkVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/lib/components/DateRangePicker/components/DateTimeInputs/components/EndInputFields/EndInputFields.types.d.ts

@@ -8,6 +8,8 @@ export type Props = {
     timeFormat?: '12' | '24';
     labelDate?: string;
     labelTime?: string;
+    /** Shows the required mark beside the date label */
+    required?: boolean;
     ariaLabelDate?: string;
     ariaLabelTime?: string;
     onDateChange: (e: ChangeEvent<HTMLInputElement>) => void;

package/dist/lib/components/DateRangePicker/components/DateTimeInputs/components/StartInputFields/StartInputFields.types.d.ts

@@ -8,6 +8,8 @@ export type Props = {
     timeFormat?: '12' | '24';
     labelDate?: string;
     labelTime?: string;
+    /** Shows the required mark beside the date label */
+    required?: boolean;
     ariaLabelDate?: string;
     ariaLabelTime?: string;
     onDateChange: (e: ChangeEvent<HTMLInputElement>) => void;

package/dist/lib/components/DateRangePicker/components/DateTimeInputs/hooks/useDateTimeInputs.d.ts

@@ -2,15 +2,13 @@ import { ChangeEvent, FocusEvent } from 'react';
 type UseDateTimeInputsProps = {
     errorInvalidDate: string;
     errorDateNotAvailable: string;
-    errorStartAfterEnd: string;
-    errorEndBeforeStart: string;
 };
-export declare const useDateTimeInputs: ({ errorInvalidDate, errorDateNotAvailable, errorStartAfterEnd, errorEndBeforeStart, }: UseDateTimeInputsProps) => {
+export declare const useDateTimeInputs: ({ errorInvalidDate, errorDateNotAvailable, }: UseDateTimeInputsProps) => {
     timeFormat: "24" | "12";
     showTime: boolean;
     name: string | undefined;
     disabled: boolean;
-    time: import('../../../DateRangePicker.types').TimeRange;
+    time: import('../../../contexts').TimeRange;
     startDateValue: string;
     startDateError: string | undefined;
     handleStartDateFocus: () => void;