@coveord/plasma-mantine 55.7.3 → 55.8.2

package/dist/esm/components/date-range-picker/DateRangePickerPopoverCalendar.js

@@ -3,6 +3,7 @@ import { Group, Popover, Space } from '@mantine/core';
 import { DatePicker } from '@mantine/dates';
 import { useClickOutside, useUncontrolled } from '@mantine/hooks';
 import { useState } from 'react';
+import dayjs from 'dayjs';
 import { DateRangePickerPresetSelect } from './DateRangePickerPresetSelect';
 import { EditableDateRangePicker } from './EditableDateRangePicker';
 export const DateRangePickerPopoverCalendar = ({ presets, value, defaultValue, onChange, startProps, endProps, rangeCalendarProps })=>{
@@ -18,6 +19,12 @@ export const DateRangePickerPopoverCalendar = ({ presets, value, defaultValue, o
         ]
     });
     const onCalendarChange = (dates)=>{
+        if (dates[0] !== null) {
+            dates[0] = dayjs(dates[0]).toISOString();
+        }
+        if (dates[1] !== null) {
+            dates[1] = dayjs(dates[1]).toISOString();
+        }
         handleChange?.(dates);
         if (dates[1] !== null) {
             setOpened(false);

package/dist/esm/components/date-range-picker/DateRangePickerPopoverCalendar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerPopoverCalendar.tsx"],"sourcesContent":["import {Group, Popover, Space} from '@mantine/core';\nimport {CalendarBaseProps, DatePicker} from '@mantine/dates';\nimport {useClickOutside, useUncontrolled} from '@mantine/hooks';\nimport {useState} from 'react';\n\nimport {DateRangePickerValue} from './DateRangePickerInlineCalendar';\nimport {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';\nimport {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';\n\ninterface DateRangePickerPopoverCalendarProps extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {\n    /** Default value for uncontrolled input */\n    defaultValue?: DateRangePickerValue;\n    /** Value for controlled input */\n    value?: DateRangePickerValue;\n    /** onChange value for controlled input */\n    onChange?(value: DateRangePickerValue): void;\n    /**\n     * The presets to display\n     *\n     * @default {}\n     * @example\n     * {\n     *     january: {label: 'January', range: [new Date(2022, 0, 1), new Date(2022, 0, 31)]},\n     *     february: {label: 'February', range: [new Date(2022, 1, 1), new Date(2022, 1, 28)]}\n     * }\n     */\n    presets?: Record<string, DateRangePickerPreset>;\n\n    /**\n     * Props for RangeCalendar\n     */\n    rangeCalendarProps?: Omit<\n        CalendarBaseProps,\n        'value' | 'onChange' | 'isDateInRange' | 'isDateFirstInRange' | 'isDateLastInRange'\n    >;\n}\n\nexport const DateRangePickerPopoverCalendar = ({\n    presets,\n    value,\n    defaultValue,\n    onChange,\n    startProps,\n    endProps,\n    rangeCalendarProps,\n}: DateRangePickerPopoverCalendarProps) => {\n    const [opened, setOpened] = useState(false);\n    const ref = useClickOutside(() => setOpened(false));\n\n    const [_value, handleChange] = useUncontrolled<DateRangePickerValue>({\n        value,\n        defaultValue,\n        onChange,\n        finalValue: [null, null],\n    });\n\n    const onCalendarChange = (dates: DateRangePickerValue) => {\n        handleChange?.(dates);\n        if (dates[1] !== null) {\n            setOpened(false);\n        }\n    };\n\n    return (\n        <>\n            <Popover opened={opened} onChange={setOpened} trapFocus>\n                <Popover.Target>\n                    <Group align=\"center\">\n                        <EditableDateRangePicker\n                            value={_value}\n                            onChange={handleChange}\n                            onFocus={() => setOpened(true)}\n                            startProps={startProps}\n                            endProps={endProps}\n                        />\n                        {presets ? (\n                            <>\n                                <Space w=\"sm\" />\n                                <DateRangePickerPresetSelect presets={presets} value={_value} onChange={handleChange} />\n                            </>\n                        ) : null}\n                    </Group>\n                </Popover.Target>\n                <Popover.Dropdown>\n                    <DatePicker\n                        ref={ref}\n                        type=\"range\"\n                        styles={{day: {textAlign: 'center'}}}\n                        numberOfColumns={2}\n                        columnsToScroll={1}\n                        firstDayOfWeek={0}\n                        allowSingleDateInRange\n                        value={_value}\n                        onChange={onCalendarChange}\n                        {...rangeCalendarProps}\n                    />\n                </Popover.Dropdown>\n            </Popover>\n        </>\n    );\n};\n"],"names":["Group","Popover","Space","DatePicker","useClickOutside","useUncontrolled","useState","DateRangePickerPresetSelect","EditableDateRangePicker","DateRangePickerPopoverCalendar","presets","value","defaultValue","onChange","startProps","endProps","rangeCalendarProps","opened","setOpened","ref","_value","handleChange","finalValue","onCalendarChange","dates","trapFocus","Target","align","onFocus","w","Dropdown","type","styles","day","textAlign","numberOfColumns","columnsToScroll","firstDayOfWeek","allowSingleDateInRange"],"mappings":";AAAA,SAAQA,KAAK,EAAEC,OAAO,EAAEC,KAAK,QAAO,gBAAgB;AACpD,SAA2BC,UAAU,QAAO,iBAAiB;AAC7D,SAAQC,eAAe,EAAEC,eAAe,QAAO,iBAAiB;AAChE,SAAQC,QAAQ,QAAO,QAAQ;AAG/B,SAA+BC,2BAA2B,QAAO,gCAAgC;AACjG,SAAQC,uBAAuB,QAAqC,4BAA4B;AA8BhG,OAAO,MAAMC,iCAAiC,CAAC,EAC3CC,OAAO,EACPC,KAAK,EACLC,YAAY,EACZC,QAAQ,EACRC,UAAU,EACVC,QAAQ,EACRC,kBAAkB,EACgB;IAClC,MAAM,CAACC,QAAQC,UAAU,GAAGZ,SAAS;IACrC,MAAMa,MAAMf,gBAAgB,IAAMc,UAAU;IAE5C,MAAM,CAACE,QAAQC,aAAa,GAAGhB,gBAAsC;QACjEM;QACAC;QACAC;QACAS,YAAY;YAAC;YAAM;SAAK;IAC5B;IAEA,MAAMC,mBAAmB,CAACC;QACtBH,eAAeG;QACf,IAAIA,KAAK,CAAC,EAAE,KAAK,MAAM;YACnBN,UAAU;QACd;IACJ;IAEA,qBACI;kBACI,cAAA,MAACjB;YAAQgB,QAAQA;YAAQJ,UAAUK;YAAWO,SAAS;;8BACnD,KAACxB,QAAQyB,MAAM;8BACX,cAAA,MAAC1B;wBAAM2B,OAAM;;0CACT,KAACnB;gCACGG,OAAOS;gCACPP,UAAUQ;gCACVO,SAAS,IAAMV,UAAU;gCACzBJ,YAAYA;gCACZC,UAAUA;;4BAEbL,wBACG;;kDACI,KAACR;wCAAM2B,GAAE;;kDACT,KAACtB;wCAA4BG,SAASA;wCAASC,OAAOS;wCAAQP,UAAUQ;;;iCAE5E;;;;8BAGZ,KAACpB,QAAQ6B,QAAQ;8BACb,cAAA,KAAC3B;wBACGgB,KAAKA;wBACLY,MAAK;wBACLC,QAAQ;4BAACC,KAAK;gCAACC,WAAW;4BAAQ;wBAAC;wBACnCC,iBAAiB;wBACjBC,iBAAiB;wBACjBC,gBAAgB;wBAChBC,sBAAsB;wBACtB3B,OAAOS;wBACPP,UAAUU;wBACT,GAAGP,kBAAkB;;;;;;AAM9C,EAAE"}
+{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerPopoverCalendar.tsx"],"sourcesContent":["import {Group, Popover, Space} from '@mantine/core';\nimport {CalendarBaseProps, DatePicker, type DateStringValue, type DatesRangeValue} from '@mantine/dates';\nimport {useClickOutside, useUncontrolled} from '@mantine/hooks';\nimport {useState} from 'react';\n\nimport dayjs from 'dayjs';\nimport {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';\nimport {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';\n\ninterface DateRangePickerPopoverCalendarProps extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {\n    /** Default value for uncontrolled input */\n    defaultValue?: DatesRangeValue<DateStringValue | null>;\n    /** Value for controlled input */\n    value?: DatesRangeValue<DateStringValue | null>;\n    /** onChange value for controlled input */\n    onChange?(value: DatesRangeValue<DateStringValue | null>): void;\n    /**\n     * The presets to display\n     *\n     * @default {}\n     * @example\n     * {\n     *     january: {label: 'January', range: [new Date(2022, 0, 1), new Date(2022, 0, 31)]},\n     *     february: {label: 'February', range: [new Date(2022, 1, 1), new Date(2022, 1, 28)]}\n     * }\n     */\n    presets?: Record<string, DateRangePickerPreset>;\n    /**\n     * Props for RangeCalendar\n     */\n    rangeCalendarProps?: Omit<\n        CalendarBaseProps,\n        'value' | 'onChange' | 'isDateInRange' | 'isDateFirstInRange' | 'isDateLastInRange'\n    >;\n}\n\nexport const DateRangePickerPopoverCalendar = ({\n    presets,\n    value,\n    defaultValue,\n    onChange,\n    startProps,\n    endProps,\n    rangeCalendarProps,\n}: DateRangePickerPopoverCalendarProps) => {\n    const [opened, setOpened] = useState(false);\n    const ref = useClickOutside(() => setOpened(false));\n\n    const [_value, handleChange] = useUncontrolled<DatesRangeValue<DateStringValue> | null>({\n        value,\n        defaultValue,\n        onChange,\n        finalValue: [null, null],\n    });\n\n    const onCalendarChange = (dates: DatesRangeValue<DateStringValue | null>) => {\n        if (dates[0] !== null) {\n            dates[0] = dayjs(dates[0]).toISOString();\n        }\n        if (dates[1] !== null) {\n            dates[1] = dayjs(dates[1]).toISOString();\n        }\n        handleChange?.(dates);\n        if (dates[1] !== null) {\n            setOpened(false);\n        }\n    };\n\n    return (\n        <>\n            <Popover opened={opened} onChange={setOpened} trapFocus>\n                <Popover.Target>\n                    <Group align=\"center\">\n                        <EditableDateRangePicker\n                            value={_value}\n                            onChange={handleChange}\n                            onFocus={() => setOpened(true)}\n                            startProps={startProps}\n                            endProps={endProps}\n                        />\n                        {presets ? (\n                            <>\n                                <Space w=\"sm\" />\n                                <DateRangePickerPresetSelect presets={presets} value={_value} onChange={handleChange} />\n                            </>\n                        ) : null}\n                    </Group>\n                </Popover.Target>\n                <Popover.Dropdown>\n                    <DatePicker\n                        ref={ref}\n                        type=\"range\"\n                        styles={{day: {textAlign: 'center'}}}\n                        numberOfColumns={2}\n                        columnsToScroll={1}\n                        firstDayOfWeek={0}\n                        allowSingleDateInRange\n                        value={_value}\n                        onChange={onCalendarChange}\n                        {...rangeCalendarProps}\n                    />\n                </Popover.Dropdown>\n            </Popover>\n        </>\n    );\n};\n"],"names":["Group","Popover","Space","DatePicker","useClickOutside","useUncontrolled","useState","dayjs","DateRangePickerPresetSelect","EditableDateRangePicker","DateRangePickerPopoverCalendar","presets","value","defaultValue","onChange","startProps","endProps","rangeCalendarProps","opened","setOpened","ref","_value","handleChange","finalValue","onCalendarChange","dates","toISOString","trapFocus","Target","align","onFocus","w","Dropdown","type","styles","day","textAlign","numberOfColumns","columnsToScroll","firstDayOfWeek","allowSingleDateInRange"],"mappings":";AAAA,SAAQA,KAAK,EAAEC,OAAO,EAAEC,KAAK,QAAO,gBAAgB;AACpD,SAA2BC,UAAU,QAAmD,iBAAiB;AACzG,SAAQC,eAAe,EAAEC,eAAe,QAAO,iBAAiB;AAChE,SAAQC,QAAQ,QAAO,QAAQ;AAE/B,OAAOC,WAAW,QAAQ;AAC1B,SAA+BC,2BAA2B,QAAO,gCAAgC;AACjG,SAAQC,uBAAuB,QAAqC,4BAA4B;AA6BhG,OAAO,MAAMC,iCAAiC,CAAC,EAC3CC,OAAO,EACPC,KAAK,EACLC,YAAY,EACZC,QAAQ,EACRC,UAAU,EACVC,QAAQ,EACRC,kBAAkB,EACgB;IAClC,MAAM,CAACC,QAAQC,UAAU,GAAGb,SAAS;IACrC,MAAMc,MAAMhB,gBAAgB,IAAMe,UAAU;IAE5C,MAAM,CAACE,QAAQC,aAAa,GAAGjB,gBAAyD;QACpFO;QACAC;QACAC;QACAS,YAAY;YAAC;YAAM;SAAK;IAC5B;IAEA,MAAMC,mBAAmB,CAACC;QACtB,IAAIA,KAAK,CAAC,EAAE,KAAK,MAAM;YACnBA,KAAK,CAAC,EAAE,GAAGlB,MAAMkB,KAAK,CAAC,EAAE,EAAEC,WAAW;QAC1C;QACA,IAAID,KAAK,CAAC,EAAE,KAAK,MAAM;YACnBA,KAAK,CAAC,EAAE,GAAGlB,MAAMkB,KAAK,CAAC,EAAE,EAAEC,WAAW;QAC1C;QACAJ,eAAeG;QACf,IAAIA,KAAK,CAAC,EAAE,KAAK,MAAM;YACnBN,UAAU;QACd;IACJ;IAEA,qBACI;kBACI,cAAA,MAAClB;YAAQiB,QAAQA;YAAQJ,UAAUK;YAAWQ,SAAS;;8BACnD,KAAC1B,QAAQ2B,MAAM;8BACX,cAAA,MAAC5B;wBAAM6B,OAAM;;0CACT,KAACpB;gCACGG,OAAOS;gCACPP,UAAUQ;gCACVQ,SAAS,IAAMX,UAAU;gCACzBJ,YAAYA;gCACZC,UAAUA;;4BAEbL,wBACG;;kDACI,KAACT;wCAAM6B,GAAE;;kDACT,KAACvB;wCAA4BG,SAASA;wCAASC,OAAOS;wCAAQP,UAAUQ;;;iCAE5E;;;;8BAGZ,KAACrB,QAAQ+B,QAAQ;8BACb,cAAA,KAAC7B;wBACGiB,KAAKA;wBACLa,MAAK;wBACLC,QAAQ;4BAACC,KAAK;gCAACC,WAAW;4BAAQ;wBAAC;wBACnCC,iBAAiB;wBACjBC,iBAAiB;wBACjBC,gBAAgB;wBAChBC,sBAAsB;wBACtB5B,OAAOS;wBACPP,UAAUU;wBACT,GAAGP,kBAAkB;;;;;;AAM9C,EAAE"}

package/dist/esm/components/date-range-picker/DateRangePickerPresetSelect.d.ts

@@ -1,13 +1,13 @@
 import { SelectProps } from '@mantine/core';
-import { DateRangePickerValue } from './DateRangePickerInlineCalendar';
+import type { DatesRangeValue, DateStringValue } from '@mantine/dates';
 export interface DateRangePickerPreset {
     label: string;
-    range: DateRangePickerValue;
+    range: DatesRangeValue<DateStringValue>;
 }
 interface DateRangePickerPresetsSelectProps {
     presets: Record<string, DateRangePickerPreset>;
-    value: DateRangePickerValue;
-    onChange?(value: DateRangePickerValue): void;
+    value: DatesRangeValue<DateStringValue>;
+    onChange?(value: DatesRangeValue): void;
     selectProps?: Partial<Omit<SelectProps, 'data' | 'value' | 'onChange'>>;
 }
 export declare const DateRangePickerPresetSelect: ({ presets, value, onChange, selectProps, }: DateRangePickerPresetsSelectProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/date-range-picker/DateRangePickerPresetSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangePickerPresetSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/date-range-picker/DateRangePickerPresetSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,WAAW,EAAC,MAAM,eAAe,CAAC;AAGhE,OAAO,EAAC,oBAAoB,EAAC,MAAM,iCAAiC,CAAC;AAErE,MAAM,WAAW,qBAAqB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,oBAAoB,CAAC;CAC/B;AAED,UAAU,iCAAiC;IACvC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;IAC/C,KAAK,EAAE,oBAAoB,CAAC;IAC5B,QAAQ,CAAC,CAAC,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAC7C,WAAW,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC;CAC3E;AAED,eAAO,MAAM,2BAA2B,GAAI,4CAKzC,iCAAiC,4CAwCnC,CAAC"}
+{"version":3,"file":"DateRangePickerPresetSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/date-range-picker/DateRangePickerPresetSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,WAAW,EAAC,MAAM,eAAe,CAAC;AAChE,OAAO,KAAK,EAAC,eAAe,EAAE,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAIrE,MAAM,WAAW,qBAAqB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;CAC3C;AAED,UAAU,iCAAiC;IACvC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;IAC/C,KAAK,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IACxC,QAAQ,CAAC,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC;CAC3E;AAED,eAAO,MAAM,2BAA2B,GAAI,4CAKzC,iCAAiC,4CAyCnC,CAAC"}

package/dist/esm/components/date-range-picker/DateRangePickerPresetSelect.js

@@ -9,7 +9,7 @@ export const DateRangePickerPresetSelect = ({ presets, value, onChange, selectPr
         }));
     const getSelectedPreset = ()=>{
         if (value[0] !== null && value[1] !== null && dayjs(value[0]).unix() !== dayjs(value[1]).unix()) {
-            const selected = Object.entries(presets).find(([, { range }])=>dayjs(range[0]).isSame(value[0]) && dayjs(value[1]).isSame(value[1]));
+            const selected = Object.entries(presets).find(([, { range }])=>dayjs(range[0]).isSame(dayjs(value[0]).toISOString()) && dayjs(range[1]).isSame(dayjs(value[1]).toISOString()));
             if (selected) {
                 return selected[0];
             }

package/dist/esm/components/date-range-picker/DateRangePickerPresetSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerPresetSelect.tsx"],"sourcesContent":["import {ComboboxItem, Select, SelectProps} from '@mantine/core';\nimport dayjs from 'dayjs';\nimport {useEffect, useState} from 'react';\nimport {DateRangePickerValue} from './DateRangePickerInlineCalendar';\n\nexport interface DateRangePickerPreset {\n    label: string;\n    range: DateRangePickerValue;\n}\n\ninterface DateRangePickerPresetsSelectProps {\n    presets: Record<string, DateRangePickerPreset>;\n    value: DateRangePickerValue;\n    onChange?(value: DateRangePickerValue): void;\n    selectProps?: Partial<Omit<SelectProps, 'data' | 'value' | 'onChange'>>;\n}\n\nexport const DateRangePickerPresetSelect = ({\n    presets,\n    value,\n    onChange,\n    selectProps = {},\n}: DateRangePickerPresetsSelectProps) => {\n    const selectData: ComboboxItem[] = Object.entries(presets).map(([val, {label}]) => ({value: val, label}));\n\n    const getSelectedPreset = () => {\n        if (value[0] !== null && value[1] !== null && dayjs(value[0]).unix() !== dayjs(value[1]).unix()) {\n            const selected = Object.entries(presets).find(\n                ([, {range}]) => dayjs(range[0]).isSame(value[0]) && dayjs(value[1]).isSame(value[1]),\n            );\n            if (selected) {\n                return selected[0];\n            }\n        }\n        return null;\n    };\n\n    const [selectedPreset, setSelectedPreset] = useState<string | null>(getSelectedPreset());\n\n    useEffect(() => {\n        const newPreset = getSelectedPreset();\n        if (newPreset !== selectedPreset) {\n            setSelectedPreset(newPreset);\n        }\n    }, [value]);\n\n    const onChangePreset = (presetId: keyof typeof presets) => {\n        const range = presets[presetId].range as any;\n        onChange?.(range);\n    };\n\n    return (\n        <Select\n            label=\"Date range\"\n            placeholder=\"Select a date range\"\n            {...selectProps}\n            value={selectedPreset}\n            onChange={onChangePreset}\n            data={selectData}\n            maxDropdownHeight={240}\n        />\n    );\n};\n"],"names":["Select","dayjs","useEffect","useState","DateRangePickerPresetSelect","presets","value","onChange","selectProps","selectData","Object","entries","map","val","label","getSelectedPreset","unix","selected","find","range","isSame","selectedPreset","setSelectedPreset","newPreset","onChangePreset","presetId","placeholder","data","maxDropdownHeight"],"mappings":";AAAA,SAAsBA,MAAM,QAAoB,gBAAgB;AAChE,OAAOC,WAAW,QAAQ;AAC1B,SAAQC,SAAS,EAAEC,QAAQ,QAAO,QAAQ;AAe1C,OAAO,MAAMC,8BAA8B,CAAC,EACxCC,OAAO,EACPC,KAAK,EACLC,QAAQ,EACRC,cAAc,CAAC,CAAC,EACgB;IAChC,MAAMC,aAA6BC,OAAOC,OAAO,CAACN,SAASO,GAAG,CAAC,CAAC,CAACC,KAAK,EAACC,KAAK,EAAC,CAAC,GAAM,CAAA;YAACR,OAAOO;YAAKC;QAAK,CAAA;IAEtG,MAAMC,oBAAoB;QACtB,IAAIT,KAAK,CAAC,EAAE,KAAK,QAAQA,KAAK,CAAC,EAAE,KAAK,QAAQL,MAAMK,KAAK,CAAC,EAAE,EAAEU,IAAI,OAAOf,MAAMK,KAAK,CAAC,EAAE,EAAEU,IAAI,IAAI;YAC7F,MAAMC,WAAWP,OAAOC,OAAO,CAACN,SAASa,IAAI,CACzC,CAAC,GAAG,EAACC,KAAK,EAAC,CAAC,GAAKlB,MAAMkB,KAAK,CAAC,EAAE,EAAEC,MAAM,CAACd,KAAK,CAAC,EAAE,KAAKL,MAAMK,KAAK,CAAC,EAAE,EAAEc,MAAM,CAACd,KAAK,CAAC,EAAE;YAExF,IAAIW,UAAU;gBACV,OAAOA,QAAQ,CAAC,EAAE;YACtB;QACJ;QACA,OAAO;IACX;IAEA,MAAM,CAACI,gBAAgBC,kBAAkB,GAAGnB,SAAwBY;IAEpEb,UAAU;QACN,MAAMqB,YAAYR;QAClB,IAAIQ,cAAcF,gBAAgB;YAC9BC,kBAAkBC;QACtB;IACJ,GAAG;QAACjB;KAAM;IAEV,MAAMkB,iBAAiB,CAACC;QACpB,MAAMN,QAAQd,OAAO,CAACoB,SAAS,CAACN,KAAK;QACrCZ,WAAWY;IACf;IAEA,qBACI,KAACnB;QACGc,OAAM;QACNY,aAAY;QACX,GAAGlB,WAAW;QACfF,OAAOe;QACPd,UAAUiB;QACVG,MAAMlB;QACNmB,mBAAmB;;AAG/B,EAAE"}
+{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerPresetSelect.tsx"],"sourcesContent":["import {ComboboxItem, Select, SelectProps} from '@mantine/core';\nimport type {DatesRangeValue, DateStringValue} from '@mantine/dates';\nimport dayjs from 'dayjs';\nimport {useEffect, useState} from 'react';\n\nexport interface DateRangePickerPreset {\n    label: string;\n    range: DatesRangeValue<DateStringValue>;\n}\n\ninterface DateRangePickerPresetsSelectProps {\n    presets: Record<string, DateRangePickerPreset>;\n    value: DatesRangeValue<DateStringValue>;\n    onChange?(value: DatesRangeValue): void;\n    selectProps?: Partial<Omit<SelectProps, 'data' | 'value' | 'onChange'>>;\n}\n\nexport const DateRangePickerPresetSelect = ({\n    presets,\n    value,\n    onChange,\n    selectProps = {},\n}: DateRangePickerPresetsSelectProps) => {\n    const selectData: ComboboxItem[] = Object.entries(presets).map(([val, {label}]) => ({value: val, label}));\n    const getSelectedPreset = () => {\n        if (value[0] !== null && value[1] !== null && dayjs(value[0]).unix() !== dayjs(value[1]).unix()) {\n            const selected = Object.entries(presets).find(\n                ([, {range}]) =>\n                    dayjs(range[0]).isSame(dayjs(value[0]).toISOString()) &&\n                    dayjs(range[1]).isSame(dayjs(value[1]).toISOString()),\n            );\n            if (selected) {\n                return selected[0];\n            }\n        }\n        return null;\n    };\n\n    const [selectedPreset, setSelectedPreset] = useState<string | null>(getSelectedPreset());\n\n    useEffect(() => {\n        const newPreset = getSelectedPreset();\n        if (newPreset !== selectedPreset) {\n            setSelectedPreset(newPreset);\n        }\n    }, [value]);\n\n    const onChangePreset = (presetId: keyof typeof presets) => {\n        const range = presets[presetId].range as any;\n        onChange?.(range);\n    };\n\n    return (\n        <Select\n            label=\"Date range\"\n            placeholder=\"Select a date range\"\n            {...selectProps}\n            value={selectedPreset}\n            onChange={onChangePreset}\n            data={selectData}\n            maxDropdownHeight={240}\n        />\n    );\n};\n"],"names":["Select","dayjs","useEffect","useState","DateRangePickerPresetSelect","presets","value","onChange","selectProps","selectData","Object","entries","map","val","label","getSelectedPreset","unix","selected","find","range","isSame","toISOString","selectedPreset","setSelectedPreset","newPreset","onChangePreset","presetId","placeholder","data","maxDropdownHeight"],"mappings":";AAAA,SAAsBA,MAAM,QAAoB,gBAAgB;AAEhE,OAAOC,WAAW,QAAQ;AAC1B,SAAQC,SAAS,EAAEC,QAAQ,QAAO,QAAQ;AAc1C,OAAO,MAAMC,8BAA8B,CAAC,EACxCC,OAAO,EACPC,KAAK,EACLC,QAAQ,EACRC,cAAc,CAAC,CAAC,EACgB;IAChC,MAAMC,aAA6BC,OAAOC,OAAO,CAACN,SAASO,GAAG,CAAC,CAAC,CAACC,KAAK,EAACC,KAAK,EAAC,CAAC,GAAM,CAAA;YAACR,OAAOO;YAAKC;QAAK,CAAA;IACtG,MAAMC,oBAAoB;QACtB,IAAIT,KAAK,CAAC,EAAE,KAAK,QAAQA,KAAK,CAAC,EAAE,KAAK,QAAQL,MAAMK,KAAK,CAAC,EAAE,EAAEU,IAAI,OAAOf,MAAMK,KAAK,CAAC,EAAE,EAAEU,IAAI,IAAI;YAC7F,MAAMC,WAAWP,OAAOC,OAAO,CAACN,SAASa,IAAI,CACzC,CAAC,GAAG,EAACC,KAAK,EAAC,CAAC,GACRlB,MAAMkB,KAAK,CAAC,EAAE,EAAEC,MAAM,CAACnB,MAAMK,KAAK,CAAC,EAAE,EAAEe,WAAW,OAClDpB,MAAMkB,KAAK,CAAC,EAAE,EAAEC,MAAM,CAACnB,MAAMK,KAAK,CAAC,EAAE,EAAEe,WAAW;YAE1D,IAAIJ,UAAU;gBACV,OAAOA,QAAQ,CAAC,EAAE;YACtB;QACJ;QACA,OAAO;IACX;IAEA,MAAM,CAACK,gBAAgBC,kBAAkB,GAAGpB,SAAwBY;IAEpEb,UAAU;QACN,MAAMsB,YAAYT;QAClB,IAAIS,cAAcF,gBAAgB;YAC9BC,kBAAkBC;QACtB;IACJ,GAAG;QAAClB;KAAM;IAEV,MAAMmB,iBAAiB,CAACC;QACpB,MAAMP,QAAQd,OAAO,CAACqB,SAAS,CAACP,KAAK;QACrCZ,WAAWY;IACf;IAEA,qBACI,KAACnB;QACGc,OAAM;QACNa,aAAY;QACX,GAAGnB,WAAW;QACfF,OAAOgB;QACPf,UAAUkB;QACVG,MAAMnB;QACNoB,mBAAmB;;AAG/B,EAAE"}

package/dist/esm/components/date-range-picker/EditableDateRangePicker.d.ts

@@ -1,8 +1,7 @@
-import { DatePickerProps } from '@mantine/dates';
-import { DateRangePickerValue } from './DateRangePickerInlineCalendar';
+import { DatePickerProps, DateStringValue, type DatesRangeValue } from '@mantine/dates';
 export interface EditableDateRangePickerProps {
-    value: DateRangePickerValue;
-    onChange?(value: DateRangePickerValue): void;
+    value: DatesRangeValue<DateStringValue | null>;
+    onChange?(value: DatesRangeValue<DateStringValue> | null): void;
     onFocus?: () => void;
     /**
      * Props for the start input

package/dist/esm/components/date-range-picker/EditableDateRangePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditableDateRangePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/date-range-picker/EditableDateRangePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAE1D,OAAO,EAAC,oBAAoB,EAAC,MAAM,iCAAiC,CAAC;AAErE,MAAM,WAAW,4BAA4B;IACzC,KAAK,EAAE,oBAAoB,CAAC;IAC5B,QAAQ,CAAC,CAAC,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAC7C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC;IAC9E;;OAEG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC;CAC/E;AAED,eAAO,MAAM,uBAAuB,GAAI,qDAMrC,4BAA4B,4CA8B9B,CAAC"}
+{"version":3,"file":"EditableDateRangePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/date-range-picker/EditableDateRangePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,eAAe,EAAE,eAAe,EAAE,KAAK,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAGjG,MAAM,WAAW,4BAA4B;IACzC,KAAK,EAAE,eAAe,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC;IAC/C,QAAQ,CAAC,CAAC,KAAK,EAAE,eAAe,CAAC,eAAe,CAAC,GAAG,IAAI,GAAG,IAAI,CAAC;IAChE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC;IAC9E;;OAEG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC;CAC/E;AAED,eAAO,MAAM,uBAAuB,GAAI,qDAMrC,4BAA4B,4CA8B9B,CAAC"}

package/dist/esm/components/date-range-picker/EditableDateRangePicker.js

@@ -4,14 +4,14 @@ import dayjs from 'dayjs';
 export const EditableDateRangePicker = ({ value, onChange, onFocus, startProps = {}, endProps = {} })=>{
     const onChangeStart = (date)=>{
         onChange?.([
-            dayjs(date).startOf('day').toDate(),
+            dayjs(date).startOf('day').toISOString(),
             value?.[1]
         ]);
     };
     const onChangeEnd = (date)=>{
         onChange?.([
             value?.[0],
-            dayjs(date).endOf('day').toDate()
+            dayjs(date).endOf('day').toISOString()
         ]);
     };
     return /*#__PURE__*/ _jsxs(_Fragment, {

package/dist/esm/components/date-range-picker/EditableDateRangePicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/date-range-picker/EditableDateRangePicker.tsx"],"sourcesContent":["import {DateInput, DatePickerProps} from '@mantine/dates';\nimport dayjs from 'dayjs';\nimport {DateRangePickerValue} from './DateRangePickerInlineCalendar';\n\nexport interface EditableDateRangePickerProps {\n    value: DateRangePickerValue;\n    onChange?(value: DateRangePickerValue): void;\n    onFocus?: () => void;\n    /**\n     * Props for the start input\n     */\n    startProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n    /**\n     * Props for the end input\n     */\n    endProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n}\n\nexport const EditableDateRangePicker = ({\n    value,\n    onChange,\n    onFocus,\n    startProps = {},\n    endProps = {},\n}: EditableDateRangePickerProps) => {\n    const onChangeStart = (date: Date) => {\n        onChange?.([dayjs(date).startOf('day').toDate(), value?.[1]]);\n    };\n    const onChangeEnd = (date: Date) => {\n        onChange?.([value?.[0], dayjs(date).endOf('day').toDate()]);\n    };\n\n    return (\n        <>\n            <DateInput\n                clearable={false}\n                label=\"Start\"\n                value={value?.[0]}\n                onChange={onChangeStart}\n                onFocus={onFocus}\n                popoverProps={{styles: {dropdown: {display: 'none'}}}}\n                styles={{...startProps.styles}}\n            />\n            <DateInput\n                clearable={false}\n                label=\"End\"\n                value={value?.[1]}\n                onChange={onChangeEnd}\n                onFocus={onFocus}\n                popoverProps={{styles: {dropdown: {display: 'none'}}}}\n                styles={{...endProps.styles}}\n            />\n        </>\n    );\n};\n"],"names":["DateInput","dayjs","EditableDateRangePicker","value","onChange","onFocus","startProps","endProps","onChangeStart","date","startOf","toDate","onChangeEnd","endOf","clearable","label","popoverProps","styles","dropdown","display"],"mappings":";AAAA,SAAQA,SAAS,QAAwB,iBAAiB;AAC1D,OAAOC,WAAW,QAAQ;AAiB1B,OAAO,MAAMC,0BAA0B,CAAC,EACpCC,KAAK,EACLC,QAAQ,EACRC,OAAO,EACPC,aAAa,CAAC,CAAC,EACfC,WAAW,CAAC,CAAC,EACc;IAC3B,MAAMC,gBAAgB,CAACC;QACnBL,WAAW;YAACH,MAAMQ,MAAMC,OAAO,CAAC,OAAOC,MAAM;YAAIR,OAAO,CAAC,EAAE;SAAC;IAChE;IACA,MAAMS,cAAc,CAACH;QACjBL,WAAW;YAACD,OAAO,CAAC,EAAE;YAAEF,MAAMQ,MAAMI,KAAK,CAAC,OAAOF,MAAM;SAAG;IAC9D;IAEA,qBACI;;0BACI,KAACX;gBACGc,WAAW;gBACXC,OAAM;gBACNZ,OAAOA,OAAO,CAAC,EAAE;gBACjBC,UAAUI;gBACVH,SAASA;gBACTW,cAAc;oBAACC,QAAQ;wBAACC,UAAU;4BAACC,SAAS;wBAAM;oBAAC;gBAAC;gBACpDF,QAAQ;oBAAC,GAAGX,WAAWW,MAAM;gBAAA;;0BAEjC,KAACjB;gBACGc,WAAW;gBACXC,OAAM;gBACNZ,OAAOA,OAAO,CAAC,EAAE;gBACjBC,UAAUQ;gBACVP,SAASA;gBACTW,cAAc;oBAACC,QAAQ;wBAACC,UAAU;4BAACC,SAAS;wBAAM;oBAAC;gBAAC;gBACpDF,QAAQ;oBAAC,GAAGV,SAASU,MAAM;gBAAA;;;;AAI3C,EAAE"}
+{"version":3,"sources":["../../../../src/components/date-range-picker/EditableDateRangePicker.tsx"],"sourcesContent":["import {DateInput, DatePickerProps, DateStringValue, type DatesRangeValue} from '@mantine/dates';\nimport dayjs from 'dayjs';\n\nexport interface EditableDateRangePickerProps {\n    value: DatesRangeValue<DateStringValue | null>;\n    onChange?(value: DatesRangeValue<DateStringValue> | null): void;\n    onFocus?: () => void;\n    /**\n     * Props for the start input\n     */\n    startProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n    /**\n     * Props for the end input\n     */\n    endProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n}\n\nexport const EditableDateRangePicker = ({\n    value,\n    onChange,\n    onFocus,\n    startProps = {},\n    endProps = {},\n}: EditableDateRangePickerProps) => {\n    const onChangeStart = (date: DateStringValue | null) => {\n        onChange?.([dayjs(date).startOf('day').toISOString(), value?.[1]]);\n    };\n    const onChangeEnd = (date: DateStringValue | null) => {\n        onChange?.([value?.[0], dayjs(date).endOf('day').toISOString()]);\n    };\n\n    return (\n        <>\n            <DateInput\n                clearable={false}\n                label=\"Start\"\n                value={value?.[0]}\n                onChange={onChangeStart}\n                onFocus={onFocus}\n                popoverProps={{styles: {dropdown: {display: 'none'}}}}\n                styles={{...startProps.styles}}\n            />\n            <DateInput\n                clearable={false}\n                label=\"End\"\n                value={value?.[1]}\n                onChange={onChangeEnd}\n                onFocus={onFocus}\n                popoverProps={{styles: {dropdown: {display: 'none'}}}}\n                styles={{...endProps.styles}}\n            />\n        </>\n    );\n};\n"],"names":["DateInput","dayjs","EditableDateRangePicker","value","onChange","onFocus","startProps","endProps","onChangeStart","date","startOf","toISOString","onChangeEnd","endOf","clearable","label","popoverProps","styles","dropdown","display"],"mappings":";AAAA,SAAQA,SAAS,QAA+D,iBAAiB;AACjG,OAAOC,WAAW,QAAQ;AAgB1B,OAAO,MAAMC,0BAA0B,CAAC,EACpCC,KAAK,EACLC,QAAQ,EACRC,OAAO,EACPC,aAAa,CAAC,CAAC,EACfC,WAAW,CAAC,CAAC,EACc;IAC3B,MAAMC,gBAAgB,CAACC;QACnBL,WAAW;YAACH,MAAMQ,MAAMC,OAAO,CAAC,OAAOC,WAAW;YAAIR,OAAO,CAAC,EAAE;SAAC;IACrE;IACA,MAAMS,cAAc,CAACH;QACjBL,WAAW;YAACD,OAAO,CAAC,EAAE;YAAEF,MAAMQ,MAAMI,KAAK,CAAC,OAAOF,WAAW;SAAG;IACnE;IAEA,qBACI;;0BACI,KAACX;gBACGc,WAAW;gBACXC,OAAM;gBACNZ,OAAOA,OAAO,CAAC,EAAE;gBACjBC,UAAUI;gBACVH,SAASA;gBACTW,cAAc;oBAACC,QAAQ;wBAACC,UAAU;4BAACC,SAAS;wBAAM;oBAAC;gBAAC;gBACpDF,QAAQ;oBAAC,GAAGX,WAAWW,MAAM;gBAAA;;0BAEjC,KAACjB;gBACGc,WAAW;gBACXC,OAAM;gBACNZ,OAAOA,OAAO,CAAC,EAAE;gBACjBC,UAAUQ;gBACVP,SAASA;gBACTW,cAAc;oBAACC,QAAQ;wBAACC,UAAU;4BAACC,SAAS;wBAAM;oBAAC;gBAAC;gBACpDF,QAAQ;oBAAC,GAAGV,SAASU,MAAM;gBAAA;;;;AAI3C,EAAE"}

package/dist/esm/components/date-time-range-picker/DateTimeRangePicker.d.ts

@@ -0,0 +1,25 @@
+import { DatesRangeValue, DateStringValue } from '@mantine/dates';
+import { DateRangePickerPreset } from '../date-range-picker/DateRangePickerPresetSelect';
+import { EditableDateTimeRangePickerProps } from './EditableDateTimeRangePicker';
+interface DateTimeRangePickerProps extends Pick<EditableDateTimeRangePickerProps, 'startProps' | 'endProps'> {
+    /** Default value for uncontrolled input */
+    defaultValue?: DatesRangeValue<DateStringValue | null>;
+    /** Value for controlled input */
+    value?: DatesRangeValue<DateStringValue | null>;
+    /** onChange value for controlled input */
+    onChange?(value: DatesRangeValue<DateStringValue | null>): void;
+    /**
+     * The presets to display
+     *
+     * @default {}
+     * @example
+     * {
+     *     january: {label: 'January', range: [new Date(2022, 0, 1, 0, 0, 0), new Date(2022, 0, 31, 23, 59, 59)]},
+     *     february: {label: 'February', range: [new Date(2022, 1, 1, 0, 0, 0), new Date(2022, 1, 28, 23, 59, 59)]}
+     * }
+     */
+    presets?: Record<string, DateRangePickerPreset>;
+}
+export declare const DateTimeRangePicker: ({ presets, value, defaultValue, onChange, startProps, endProps, }: DateTimeRangePickerProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DateTimeRangePicker.d.ts.map

package/dist/esm/components/date-time-range-picker/DateTimeRangePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeRangePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/date-time-range-picker/DateTimeRangePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,eAAe,EAAE,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAC,qBAAqB,EAA8B,MAAM,kDAAkD,CAAC;AACpH,OAAO,EAA8B,gCAAgC,EAAC,MAAM,+BAA+B,CAAC;AAE5G,UAAU,wBAAyB,SAAQ,IAAI,CAAC,gCAAgC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxG,2CAA2C;IAC3C,YAAY,CAAC,EAAE,eAAe,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC;IACvD,iCAAiC;IACjC,KAAK,CAAC,EAAE,eAAe,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC;IAChD,0CAA0C;IAC1C,QAAQ,CAAC,CAAC,KAAK,EAAE,eAAe,CAAC,eAAe,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;IAChE;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,mBAAmB,GAAI,mEAOjC,wBAAwB,4CA0B1B,CAAC"}

package/dist/esm/components/date-time-range-picker/DateTimeRangePicker.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Group } from '@mantine/core';
+import { useUncontrolled } from '@mantine/hooks';
+import { DateRangePickerPresetSelect } from '../date-range-picker/DateRangePickerPresetSelect';
+import { EditableDateTimeRangePicker } from './EditableDateTimeRangePicker';
+export const DateTimeRangePicker = ({ presets, value, defaultValue, onChange, startProps, endProps })=>{
+    const [_value, handleChange] = useUncontrolled({
+        value,
+        defaultValue,
+        onChange,
+        finalValue: [
+            null,
+            null
+        ]
+    });
+    return /*#__PURE__*/ _jsxs(Group, {
+        align: "center",
+        children: [
+            /*#__PURE__*/ _jsx(EditableDateTimeRangePicker, {
+                value: _value,
+                onChange: handleChange,
+                startProps: startProps,
+                endProps: endProps
+            }),
+            presets && /*#__PURE__*/ _jsx(DateRangePickerPresetSelect, {
+                presets: presets,
+                value: _value,
+                onChange: handleChange,
+                selectProps: {
+                    ml: 'sm'
+                }
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=DateTimeRangePicker.js.map

package/dist/esm/components/date-time-range-picker/DateTimeRangePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/date-time-range-picker/DateTimeRangePicker.tsx"],"sourcesContent":["import {Group} from '@mantine/core';\nimport {useUncontrolled} from '@mantine/hooks';\n\nimport {DatesRangeValue, DateStringValue} from '@mantine/dates';\nimport {DateRangePickerPreset, DateRangePickerPresetSelect} from '../date-range-picker/DateRangePickerPresetSelect';\nimport {EditableDateTimeRangePicker, EditableDateTimeRangePickerProps} from './EditableDateTimeRangePicker';\n\ninterface DateTimeRangePickerProps extends Pick<EditableDateTimeRangePickerProps, 'startProps' | 'endProps'> {\n    /** Default value for uncontrolled input */\n    defaultValue?: DatesRangeValue<DateStringValue | null>;\n    /** Value for controlled input */\n    value?: DatesRangeValue<DateStringValue | null>;\n    /** onChange value for controlled input */\n    onChange?(value: DatesRangeValue<DateStringValue | null>): void;\n    /**\n     * The presets to display\n     *\n     * @default {}\n     * @example\n     * {\n     *     january: {label: 'January', range: [new Date(2022, 0, 1, 0, 0, 0), new Date(2022, 0, 31, 23, 59, 59)]},\n     *     february: {label: 'February', range: [new Date(2022, 1, 1, 0, 0, 0), new Date(2022, 1, 28, 23, 59, 59)]}\n     * }\n     */\n    presets?: Record<string, DateRangePickerPreset>;\n}\n\nexport const DateTimeRangePicker = ({\n    presets,\n    value,\n    defaultValue,\n    onChange,\n    startProps,\n    endProps,\n}: DateTimeRangePickerProps) => {\n    const [_value, handleChange] = useUncontrolled<DatesRangeValue<DateStringValue | null>>({\n        value,\n        defaultValue,\n        onChange,\n        finalValue: [null, null],\n    });\n\n    return (\n        <Group align=\"center\">\n            <EditableDateTimeRangePicker\n                value={_value}\n                onChange={handleChange}\n                startProps={startProps}\n                endProps={endProps}\n            />\n            {presets && (\n                <DateRangePickerPresetSelect\n                    presets={presets}\n                    value={_value}\n                    onChange={handleChange}\n                    selectProps={{ml: 'sm'}}\n                />\n            )}\n        </Group>\n    );\n};\n"],"names":["Group","useUncontrolled","DateRangePickerPresetSelect","EditableDateTimeRangePicker","DateTimeRangePicker","presets","value","defaultValue","onChange","startProps","endProps","_value","handleChange","finalValue","align","selectProps","ml"],"mappings":";AAAA,SAAQA,KAAK,QAAO,gBAAgB;AACpC,SAAQC,eAAe,QAAO,iBAAiB;AAG/C,SAA+BC,2BAA2B,QAAO,mDAAmD;AACpH,SAAQC,2BAA2B,QAAyC,gCAAgC;AAsB5G,OAAO,MAAMC,sBAAsB,CAAC,EAChCC,OAAO,EACPC,KAAK,EACLC,YAAY,EACZC,QAAQ,EACRC,UAAU,EACVC,QAAQ,EACe;IACvB,MAAM,CAACC,QAAQC,aAAa,GAAGX,gBAAyD;QACpFK;QACAC;QACAC;QACAK,YAAY;YAAC;YAAM;SAAK;IAC5B;IAEA,qBACI,MAACb;QAAMc,OAAM;;0BACT,KAACX;gBACGG,OAAOK;gBACPH,UAAUI;gBACVH,YAAYA;gBACZC,UAAUA;;YAEbL,yBACG,KAACH;gBACGG,SAASA;gBACTC,OAAOK;gBACPH,UAAUI;gBACVG,aAAa;oBAACC,IAAI;gBAAI;;;;AAK1C,EAAE"}

package/dist/esm/components/date-time-range-picker/EditableDateTimeRangePicker.d.ts

@@ -0,0 +1,15 @@
+import { DatePickerProps, DatesRangeValue, DateStringValue } from '@mantine/dates';
+export interface EditableDateTimeRangePickerProps {
+    value: DatesRangeValue<DateStringValue | null>;
+    onChange?(value: DatesRangeValue<DateStringValue | null>): void;
+    /**
+     * Props for the start input
+     */
+    startProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;
+    /**
+     * Props for the end input
+     */
+    endProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;
+}
+export declare const EditableDateTimeRangePicker: ({ value, onChange, startProps, endProps, }: EditableDateTimeRangePickerProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EditableDateTimeRangePicker.d.ts.map

package/dist/esm/components/date-time-range-picker/EditableDateTimeRangePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableDateTimeRangePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/date-time-range-picker/EditableDateTimeRangePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAE,eAAe,EAAE,eAAe,EAAiB,MAAM,gBAAgB,CAAC;AAGjG,MAAM,WAAW,gCAAgC;IAC7C,KAAK,EAAE,eAAe,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC;IAC/C,QAAQ,CAAC,CAAC,KAAK,EAAE,eAAe,CAAC,eAAe,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;IAChE;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC;IAC9E;;OAEG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC;CAC/E;AAED,eAAO,MAAM,2BAA2B,GAAI,4CAKzC,gCAAgC,4CA8BlC,CAAC"}

package/dist/esm/components/date-time-range-picker/EditableDateTimeRangePicker.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { DateTimePicker } from '@mantine/dates';
+import dayjs from 'dayjs';
+export const EditableDateTimeRangePicker = ({ value, onChange, startProps = {}, endProps = {} })=>{
+    const onStartDateChange = (startDate)=>{
+        if (value?.[1] && dayjs(startDate) > dayjs(value[1])) {
+            onChange?.([
+                startDate,
+                null
+            ]);
+        } else {
+            onChange?.([
+                startDate,
+                value?.[1]
+            ]);
+        }
+    };
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(DateTimePicker, {
+                clearable: false,
+                label: "Start",
+                value: value?.[0],
+                onChange: onStartDateChange,
+                w: 150,
+                styles: {
+                    ...startProps.styles
+                }
+            }),
+            /*#__PURE__*/ _jsx(DateTimePicker, {
+                clearable: false,
+                label: "End",
+                value: value?.[1],
+                minDate: value?.[0],
+                onChange: (endDate)=>onChange?.([
+                        value?.[0],
+                        endDate
+                    ]),
+                w: 150,
+                styles: {
+                    ...endProps.styles
+                }
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=EditableDateTimeRangePicker.js.map

package/dist/esm/components/date-time-range-picker/EditableDateTimeRangePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/date-time-range-picker/EditableDateTimeRangePicker.tsx"],"sourcesContent":["import {DatePickerProps, DatesRangeValue, DateStringValue, DateTimePicker} from '@mantine/dates';\nimport dayjs from 'dayjs';\n\nexport interface EditableDateTimeRangePickerProps {\n    value: DatesRangeValue<DateStringValue | null>;\n    onChange?(value: DatesRangeValue<DateStringValue | null>): void;\n    /**\n     * Props for the start input\n     */\n    startProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n    /**\n     * Props for the end input\n     */\n    endProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n}\n\nexport const EditableDateTimeRangePicker = ({\n    value,\n    onChange,\n    startProps = {},\n    endProps = {},\n}: EditableDateTimeRangePickerProps) => {\n    const onStartDateChange = (startDate: string) => {\n        if (value?.[1] && dayjs(startDate) > dayjs(value[1])) {\n            onChange?.([startDate, null]);\n        } else {\n            onChange?.([startDate, value?.[1]]);\n        }\n    };\n\n    return (\n        <>\n            <DateTimePicker\n                clearable={false}\n                label=\"Start\"\n                value={value?.[0]}\n                onChange={onStartDateChange}\n                w={150}\n                styles={{...startProps.styles}}\n            />\n            <DateTimePicker\n                clearable={false}\n                label=\"End\"\n                value={value?.[1]}\n                minDate={value?.[0]}\n                onChange={(endDate) => onChange?.([value?.[0], endDate])}\n                w={150}\n                styles={{...endProps.styles}}\n            />\n        </>\n    );\n};\n"],"names":["DateTimePicker","dayjs","EditableDateTimeRangePicker","value","onChange","startProps","endProps","onStartDateChange","startDate","clearable","label","w","styles","minDate","endDate"],"mappings":";AAAA,SAA2DA,cAAc,QAAO,iBAAiB;AACjG,OAAOC,WAAW,QAAQ;AAe1B,OAAO,MAAMC,8BAA8B,CAAC,EACxCC,KAAK,EACLC,QAAQ,EACRC,aAAa,CAAC,CAAC,EACfC,WAAW,CAAC,CAAC,EACkB;IAC/B,MAAMC,oBAAoB,CAACC;QACvB,IAAIL,OAAO,CAAC,EAAE,IAAIF,MAAMO,aAAaP,MAAME,KAAK,CAAC,EAAE,GAAG;YAClDC,WAAW;gBAACI;gBAAW;aAAK;QAChC,OAAO;YACHJ,WAAW;gBAACI;gBAAWL,OAAO,CAAC,EAAE;aAAC;QACtC;IACJ;IAEA,qBACI;;0BACI,KAACH;gBACGS,WAAW;gBACXC,OAAM;gBACNP,OAAOA,OAAO,CAAC,EAAE;gBACjBC,UAAUG;gBACVI,GAAG;gBACHC,QAAQ;oBAAC,GAAGP,WAAWO,MAAM;gBAAA;;0BAEjC,KAACZ;gBACGS,WAAW;gBACXC,OAAM;gBACNP,OAAOA,OAAO,CAAC,EAAE;gBACjBU,SAASV,OAAO,CAAC,EAAE;gBACnBC,UAAU,CAACU,UAAYV,WAAW;wBAACD,OAAO,CAAC,EAAE;wBAAEW;qBAAQ;gBACvDH,GAAG;gBACHC,QAAQ;oBAAC,GAAGN,SAASM,MAAM;gBAAA;;;;AAI3C,EAAE"}

package/dist/esm/components/date-time-range-picker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DateTimeRangePicker';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/date-time-range-picker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/date-time-range-picker/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}

package/dist/esm/components/date-time-range-picker/index.js

@@ -0,0 +1,3 @@
+export * from './DateTimeRangePicker';
+
+//# sourceMappingURL=index.js.map

package/dist/esm/components/date-time-range-picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/date-time-range-picker/index.ts"],"sourcesContent":["export * from './DateTimeRangePicker';\n"],"names":[],"mappings":"AAAA,cAAc,wBAAwB"}

package/dist/esm/components/header/Header.d.ts

@@ -1,14 +1,16 @@
 import { Factory, GroupProps, StylesApiProps } from '@mantine/core';
-import { ReactNode } from 'react';
-import { HeaderActions, HeaderActionsStyleNames } from './HeaderActions/HeaderActions';
+import { ElementType, ReactNode } from 'react';
+import { HeaderBreadcrumbAnchor, type HeaderBreadcrumbAnchorStyleNames } from './HeaderBreadcrumbs/HeaderBreadcrumbAnchor';
 import { HeaderBreadcrumbs, HeaderBreadcrumbsStyleNames } from './HeaderBreadcrumbs/HeaderBreadcrumbs';
+import { HeaderBreadcrumbText, HeaderBreadcrumbTextStyleNames } from './HeaderBreadcrumbs/HeaderBreadcrumbText';
 import { HeaderDocAnchor, HeaderDocAnchorStyleNames } from './HeaderDocAnchor/HeaderDocAnchor';
-export type { HeaderActionsProps } from './HeaderActions/HeaderActions';
+import { HeaderRight, HeaderRightStyleNames } from './HeaderRight/HeaderRight';
 export type { HeaderBreadcrumbsProps } from './HeaderBreadcrumbs/HeaderBreadcrumbs';
 export type { HeaderDocAnchorProps } from './HeaderDocAnchor/HeaderDocAnchor';
+export type { HeaderRightProps } from './HeaderRight/HeaderRight';
 export type HeaderVariant = 'primary' | 'secondary';
-export type HeaderStyleNames = 'root' | 'title' | 'description' | 'divider' | HeaderDocAnchorStyleNames | HeaderBreadcrumbsStyleNames | HeaderActionsStyleNames;
-export interface HeaderProps extends StylesApiProps<HeaderFactory>, Omit<GroupProps, 'classNames' | 'styles' | 'vars'> {
+export type HeaderStyleNames = 'root' | 'title' | 'description' | 'divider' | 'body' | HeaderDocAnchorStyleNames | HeaderBreadcrumbsStyleNames | HeaderBreadcrumbAnchorStyleNames | HeaderBreadcrumbTextStyleNames | HeaderBreadcrumbsStyleNames | HeaderRightStyleNames;
+export interface HeaderProps extends StylesApiProps<HeaderFactory>, Omit<GroupProps, 'classNames' | 'styles' | 'vars' | 'variant'> {
     /**
      * The description text displayed inside the header underneath the title
      */
@@ -27,6 +29,13 @@ export interface HeaderProps extends StylesApiProps<HeaderFactory>, Omit<GroupPr
      * The title of the header.
      */
     children: ReactNode;
+    /**
+     * The component used to render the title.
+     *
+     * @default Title
+     * @example 'h2'
+     */
+    titleComponent?: ElementType;
 }
 export type HeaderFactory = Factory<{
     props: HeaderProps;
@@ -35,7 +44,9 @@ export type HeaderFactory = Factory<{
     stylesNames: HeaderStyleNames;
     staticComponents: {
         Breadcrumbs: typeof HeaderBreadcrumbs;
-        Actions: typeof HeaderActions;
+        BreadcrumbAnchor: typeof HeaderBreadcrumbAnchor;
+        BreadcrumbText: typeof HeaderBreadcrumbText;
+        Right: typeof HeaderRight;
         DocAnchor: typeof HeaderDocAnchor;
     };
 }>;
@@ -46,7 +57,9 @@ export declare const Header: import("@mantine/core").MantineComponent<{
     stylesNames: HeaderStyleNames;
     staticComponents: {
         Breadcrumbs: typeof HeaderBreadcrumbs;
-        Actions: typeof HeaderActions;
+        BreadcrumbAnchor: typeof HeaderBreadcrumbAnchor;
+        BreadcrumbText: typeof HeaderBreadcrumbText;
+        Right: typeof HeaderRight;
         DocAnchor: typeof HeaderDocAnchor;
     };
 }>;

package/dist/esm/components/header/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,OAAO,EAEP,UAAU,EAEV,cAAc,EAMjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAyB,SAAS,EAAC,MAAM,OAAO,CAAC;AAGxD,OAAO,EAAC,aAAa,EAAE,uBAAuB,EAAC,MAAM,+BAA+B,CAAC;AACrF,OAAO,EAAC,iBAAiB,EAAE,2BAA2B,EAAC,MAAM,uCAAuC,CAAC;AACrG,OAAO,EAAC,eAAe,EAAE,yBAAyB,EAAC,MAAM,mCAAmC,CAAC;AAE7F,YAAY,EAAC,kBAAkB,EAAC,MAAM,+BAA+B,CAAC;AACtE,YAAY,EAAC,sBAAsB,EAAC,MAAM,uCAAuC,CAAC;AAClF,YAAY,EAAC,oBAAoB,EAAC,MAAM,mCAAmC,CAAC;AAE5E,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,CAAC;AACpD,MAAM,MAAM,gBAAgB,GACtB,MAAM,GACN,OAAO,GACP,aAAa,GACb,SAAS,GACT,yBAAyB,GACzB,2BAA2B,GAC3B,uBAAuB,CAAC;AAE9B,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,aAAa,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,YAAY,GAAG,QAAQ,GAAG,MAAM,CAAC;IAClH;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC;IAChC,KAAK,EAAE,WAAW,CAAC;IACnB,GAAG,EAAE,cAAc,CAAC;IACpB,OAAO,EAAE,aAAa,CAAC;IACvB,WAAW,EAAE,gBAAgB,CAAC;IAC9B,gBAAgB,EAAE;QACd,WAAW,EAAE,OAAO,iBAAiB,CAAC;QACtC,OAAO,EAAE,OAAO,aAAa,CAAC;QAC9B,SAAS,EAAE,OAAO,eAAe,CAAC;KACrC,CAAC;CACL,CAAC,CAAC;AAQH,eAAO,MAAM,MAAM;WAjBR,WAAW;SACb,cAAc;aACV,aAAa;iBACT,gBAAgB;sBACX;QACd,WAAW,EAAE,OAAO,iBAAiB,CAAC;QACtC,OAAO,EAAE,OAAO,aAAa,CAAC;QAC9B,SAAS,EAAE,OAAO,eAAe,CAAC;KACrC;EAkEH,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,OAAO,EAEP,UAAU,EAEV,cAAc,EAMjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAW,WAAW,EAAgB,SAAS,EAAC,MAAM,OAAO,CAAC;AAGrE,OAAO,EACH,sBAAsB,EACtB,KAAK,gCAAgC,EACxC,MAAM,4CAA4C,CAAC;AACpD,OAAO,EAAC,iBAAiB,EAAE,2BAA2B,EAAC,MAAM,uCAAuC,CAAC;AACrG,OAAO,EAAC,oBAAoB,EAAE,8BAA8B,EAAC,MAAM,0CAA0C,CAAC;AAC9G,OAAO,EAAC,eAAe,EAAE,yBAAyB,EAAC,MAAM,mCAAmC,CAAC;AAC7F,OAAO,EAAC,WAAW,EAAE,qBAAqB,EAAC,MAAM,2BAA2B,CAAC;AAE7E,YAAY,EAAC,sBAAsB,EAAC,MAAM,uCAAuC,CAAC;AAClF,YAAY,EAAC,oBAAoB,EAAC,MAAM,mCAAmC,CAAC;AAC5E,YAAY,EAAC,gBAAgB,EAAC,MAAM,2BAA2B,CAAC;AAEhE,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,CAAC;AACpD,MAAM,MAAM,gBAAgB,GACtB,MAAM,GACN,OAAO,GACP,aAAa,GACb,SAAS,GACT,MAAM,GACN,yBAAyB,GACzB,2BAA2B,GAC3B,gCAAgC,GAChC,8BAA8B,GAC9B,2BAA2B,GAC3B,qBAAqB,CAAC;AAE5B,MAAM,WAAW,WACb,SAAQ,cAAc,CAAC,aAAa,CAAC,EACjC,IAAI,CAAC,UAAU,EAAE,YAAY,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;IAClE;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC;CAChC;AAED,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC;IAChC,KAAK,EAAE,WAAW,CAAC;IACnB,GAAG,EAAE,cAAc,CAAC;IACpB,OAAO,EAAE,aAAa,CAAC;IACvB,WAAW,EAAE,gBAAgB,CAAC;IAC9B,gBAAgB,EAAE;QACd,WAAW,EAAE,OAAO,iBAAiB,CAAC;QACtC,gBAAgB,EAAE,OAAO,sBAAsB,CAAC;QAChD,cAAc,EAAE,OAAO,oBAAoB,CAAC;QAC5C,KAAK,EAAE,OAAO,WAAW,CAAC;QAC1B,SAAS,EAAE,OAAO,eAAe,CAAC;KACrC,CAAC;CACL,CAAC,CAAC;AAUH,eAAO,MAAM,MAAM;WArBR,WAAW;SACb,cAAc;aACV,aAAa;iBACT,gBAAgB;sBACX;QACd,WAAW,EAAE,OAAO,iBAAiB,CAAC;QACtC,gBAAgB,EAAE,OAAO,sBAAsB,CAAC;QAChD,cAAc,EAAE,OAAO,oBAAoB,CAAC;QAC5C,KAAK,EAAE,OAAO,WAAW,CAAC;QAC1B,SAAS,EAAE,OAAO,eAAe,CAAC;KACrC;EAsEH,CAAC"}

package/dist/esm/components/header/Header.js

@@ -3,17 +3,20 @@ import { Divider, Group, Stack, Text, Title, factory, useProps, useStyles } from
 import { Children } from 'react';
 import { HeaderProvider } from './Header.context';
 import classes from './Header.module.css';
-import { HeaderActions } from './HeaderActions/HeaderActions';
+import { HeaderBreadcrumbAnchor } from './HeaderBreadcrumbs/HeaderBreadcrumbAnchor';
 import { HeaderBreadcrumbs } from './HeaderBreadcrumbs/HeaderBreadcrumbs';
+import { HeaderBreadcrumbText } from './HeaderBreadcrumbs/HeaderBreadcrumbText';
 import { HeaderDocAnchor } from './HeaderDocAnchor/HeaderDocAnchor';
+import { HeaderRight } from './HeaderRight/HeaderRight';
 const defaultProps = {
     variant: 'primary',
     justify: 'space-between',
     wrap: 'nowrap'
 };
+const getSpacing = (variant)=>variant === 'secondary' ? 'xxs' : 'xs';
 export const Header = factory((_props, ref)=>{
     const props = useProps('PlasmaHeader', defaultProps, _props);
-    const { className, description, borderBottom, variant, children, style, classNames, unstyled, vars, styles, ...others } = props;
+    const { className, description, borderBottom, variant, children, style, classNames, unstyled, vars, styles, titleComponent: TitleComponent, ...others } = props;
     const getStyles = useStyles({
         name: 'PlasmaHeader',
         props,
@@ -31,9 +34,9 @@ export const Header = factory((_props, ref)=>{
     };
     const convertedChildren = Children.toArray(children);
     const breadcrumbs = convertedChildren.find((child)=>child.type === HeaderBreadcrumbs);
-    const actions = convertedChildren.find((child)=>child.type === HeaderActions);
+    const right = convertedChildren.find((child)=>child.type === HeaderRight);
     const docAnchor = convertedChildren.find((child)=>child.type === HeaderDocAnchor);
-    const otherChildren = convertedChildren.filter((child)=>child.type !== HeaderBreadcrumbs && child.type !== HeaderActions && child.type !== HeaderDocAnchor);
+    const otherChildren = convertedChildren.filter((child)=>child.type !== HeaderBreadcrumbs && child.type !== HeaderRight && child.type !== HeaderDocAnchor);
     return /*#__PURE__*/ _jsxs(HeaderProvider, {
         value: {
             getStyles
@@ -46,11 +49,12 @@ export const Header = factory((_props, ref)=>{
                 ...others,
                 children: [
                     /*#__PURE__*/ _jsxs(Stack, {
-                        gap: 0,
+                        gap: getSpacing(variant),
                         children: [
                             breadcrumbs,
                             /*#__PURE__*/ _jsxs(Title, {
                                 variant: variant,
+                                component: TitleComponent,
                                 order: variant === 'primary' ? 1 : 3,
                                 ...getStyles('title', stylesApiProps),
                                 children: [
@@ -65,7 +69,7 @@ export const Header = factory((_props, ref)=>{
                             })
                         ]
                     }),
-                    actions
+                    right
                 ]
             }),
             borderBottom ? /*#__PURE__*/ _jsx(Divider, {
@@ -76,7 +80,9 @@ export const Header = factory((_props, ref)=>{
     });
 });
 Header.Breadcrumbs = HeaderBreadcrumbs;
-Header.Actions = HeaderActions;
+Header.BreadcrumbAnchor = HeaderBreadcrumbAnchor;
+Header.BreadcrumbText = HeaderBreadcrumbText;
+Header.Right = HeaderRight;
 Header.DocAnchor = HeaderDocAnchor;
 
 //# sourceMappingURL=Header.js.map

package/dist/esm/components/header/Header.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/header/Header.tsx"],"sourcesContent":["import {\n    Divider,\n    Factory,\n    Group,\n    GroupProps,\n    Stack,\n    StylesApiProps,\n    Text,\n    Title,\n    factory,\n    useProps,\n    useStyles,\n} from '@mantine/core';\nimport {Children, ReactElement, ReactNode} from 'react';\nimport {HeaderProvider} from './Header.context';\nimport classes from './Header.module.css';\nimport {HeaderActions, HeaderActionsStyleNames} from './HeaderActions/HeaderActions';\nimport {HeaderBreadcrumbs, HeaderBreadcrumbsStyleNames} from './HeaderBreadcrumbs/HeaderBreadcrumbs';\nimport {HeaderDocAnchor, HeaderDocAnchorStyleNames} from './HeaderDocAnchor/HeaderDocAnchor';\n\nexport type {HeaderActionsProps} from './HeaderActions/HeaderActions';\nexport type {HeaderBreadcrumbsProps} from './HeaderBreadcrumbs/HeaderBreadcrumbs';\nexport type {HeaderDocAnchorProps} from './HeaderDocAnchor/HeaderDocAnchor';\n\nexport type HeaderVariant = 'primary' | 'secondary';\nexport type HeaderStyleNames =\n    | 'root'\n    | 'title'\n    | 'description'\n    | 'divider'\n    | HeaderDocAnchorStyleNames\n    | HeaderBreadcrumbsStyleNames\n    | HeaderActionsStyleNames;\n\nexport interface HeaderProps extends StylesApiProps<HeaderFactory>, Omit<GroupProps, 'classNames' | 'styles' | 'vars'> {\n    /**\n     * The description text displayed inside the header underneath the title\n     */\n    description?: ReactNode;\n    /**\n     * Whether the header should have a border on the bottom\n     */\n    borderBottom?: boolean;\n    /**\n     * Use the primary variant for page header and secondary variant elsewhere\n     *\n     * @default 'primary'\n     */\n    variant?: 'primary' | 'secondary';\n    /**\n     * The title of the header.\n     */\n    children: ReactNode;\n}\n\nexport type HeaderFactory = Factory<{\n    props: HeaderProps;\n    ref: HTMLDivElement;\n    variant: HeaderVariant;\n    stylesNames: HeaderStyleNames;\n    staticComponents: {\n        Breadcrumbs: typeof HeaderBreadcrumbs;\n        Actions: typeof HeaderActions;\n        DocAnchor: typeof HeaderDocAnchor;\n    };\n}>;\n\nconst defaultProps: Partial<HeaderProps> = {\n    variant: 'primary',\n    justify: 'space-between',\n    wrap: 'nowrap',\n};\n\nexport const Header = factory<HeaderFactory>((_props, ref) => {\n    const props = useProps('PlasmaHeader', defaultProps, _props);\n    const {\n        className,\n        description,\n        borderBottom,\n        variant,\n        children,\n        style,\n        classNames,\n        unstyled,\n        vars,\n        styles,\n        ...others\n    } = props;\n    const getStyles = useStyles<HeaderFactory>({\n        name: 'PlasmaHeader',\n        props,\n        classes,\n        className,\n        style,\n        classNames,\n        styles,\n        unstyled,\n        vars,\n    });\n    const stylesApiProps = {classNames, styles};\n\n    const convertedChildren = Children.toArray(children) as ReactElement[];\n    const breadcrumbs = convertedChildren.find((child) => child.type === HeaderBreadcrumbs);\n    const actions = convertedChildren.find((child) => child.type === HeaderActions);\n    const docAnchor = convertedChildren.find((child) => child.type === HeaderDocAnchor);\n    const otherChildren = convertedChildren.filter(\n        (child) => child.type !== HeaderBreadcrumbs && child.type !== HeaderActions && child.type !== HeaderDocAnchor,\n    );\n    return (\n        <HeaderProvider value={{getStyles}}>\n            <Group ref={ref} variant={variant} {...getStyles('root')} {...others}>\n                <Stack gap={0}>\n                    {breadcrumbs}\n                    <Title\n                        variant={variant}\n                        order={variant === 'primary' ? 1 : 3}\n                        {...getStyles('title', stylesApiProps)}\n                    >\n                        {otherChildren}\n                        {docAnchor}\n                    </Title>\n                    <Text {...getStyles('description', stylesApiProps)} size={variant === 'primary' ? 'md' : 'sm'}>\n                        {description}\n                    </Text>\n                </Stack>\n                {actions}\n            </Group>\n            {borderBottom ? <Divider {...getStyles('divider', stylesApiProps)} size=\"xs\" /> : null}\n        </HeaderProvider>\n    );\n});\n\nHeader.Breadcrumbs = HeaderBreadcrumbs;\nHeader.Actions = HeaderActions;\nHeader.DocAnchor = HeaderDocAnchor;\n"],"names":["Divider","Group","Stack","Text","Title","factory","useProps","useStyles","Children","HeaderProvider","classes","HeaderActions","HeaderBreadcrumbs","HeaderDocAnchor","defaultProps","variant","justify","wrap","Header","_props","ref","props","className","description","borderBottom","children","style","classNames","unstyled","vars","styles","others","getStyles","name","stylesApiProps","convertedChildren","toArray","breadcrumbs","find","child","type","actions","docAnchor","otherChildren","filter","value","gap","order","size","Breadcrumbs","Actions","DocAnchor"],"mappings":";AAAA,SACIA,OAAO,EAEPC,KAAK,EAELC,KAAK,EAELC,IAAI,EACJC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,SAAS,QACN,gBAAgB;AACvB,SAAQC,QAAQ,QAAgC,QAAQ;AACxD,SAAQC,cAAc,QAAO,mBAAmB;AAChD,OAAOC,aAAa,sBAAsB;AAC1C,SAAQC,aAAa,QAAgC,gCAAgC;AACrF,SAAQC,iBAAiB,QAAoC,wCAAwC;AACrG,SAAQC,eAAe,QAAkC,oCAAoC;AAiD7F,MAAMC,eAAqC;IACvCC,SAAS;IACTC,SAAS;IACTC,MAAM;AACV;AAEA,OAAO,MAAMC,SAASb,QAAuB,CAACc,QAAQC;IAClD,MAAMC,QAAQf,SAAS,gBAAgBQ,cAAcK;IACrD,MAAM,EACFG,SAAS,EACTC,WAAW,EACXC,YAAY,EACZT,OAAO,EACPU,QAAQ,EACRC,KAAK,EACLC,UAAU,EACVC,QAAQ,EACRC,IAAI,EACJC,MAAM,EACN,GAAGC,QACN,GAAGV;IACJ,MAAMW,YAAYzB,UAAyB;QACvC0B,MAAM;QACNZ;QACAX;QACAY;QACAI;QACAC;QACAG;QACAF;QACAC;IACJ;IACA,MAAMK,iBAAiB;QAACP;QAAYG;IAAM;IAE1C,MAAMK,oBAAoB3B,SAAS4B,OAAO,CAACX;IAC3C,MAAMY,cAAcF,kBAAkBG,IAAI,CAAC,CAACC,QAAUA,MAAMC,IAAI,KAAK5B;IACrE,MAAM6B,UAAUN,kBAAkBG,IAAI,CAAC,CAACC,QAAUA,MAAMC,IAAI,KAAK7B;IACjE,MAAM+B,YAAYP,kBAAkBG,IAAI,CAAC,CAACC,QAAUA,MAAMC,IAAI,KAAK3B;IACnE,MAAM8B,gBAAgBR,kBAAkBS,MAAM,CAC1C,CAACL,QAAUA,MAAMC,IAAI,KAAK5B,qBAAqB2B,MAAMC,IAAI,KAAK7B,iBAAiB4B,MAAMC,IAAI,KAAK3B;IAElG,qBACI,MAACJ;QAAeoC,OAAO;YAACb;QAAS;;0BAC7B,MAAC/B;gBAAMmB,KAAKA;gBAAKL,SAASA;gBAAU,GAAGiB,UAAU,OAAO;gBAAG,GAAGD,MAAM;;kCAChE,MAAC7B;wBAAM4C,KAAK;;4BACPT;0CACD,MAACjC;gCACGW,SAASA;gCACTgC,OAAOhC,YAAY,YAAY,IAAI;gCAClC,GAAGiB,UAAU,SAASE,eAAe;;oCAErCS;oCACAD;;;0CAEL,KAACvC;gCAAM,GAAG6B,UAAU,eAAeE,eAAe;gCAAEc,MAAMjC,YAAY,YAAY,OAAO;0CACpFQ;;;;oBAGRkB;;;YAEJjB,6BAAe,KAACxB;gBAAS,GAAGgC,UAAU,WAAWE,eAAe;gBAAEc,MAAK;iBAAU;;;AAG9F,GAAG;AAEH9B,OAAO+B,WAAW,GAAGrC;AACrBM,OAAOgC,OAAO,GAAGvC;AACjBO,OAAOiC,SAAS,GAAGtC"}
+{"version":3,"sources":["../../../../src/components/header/Header.tsx"],"sourcesContent":["import {\n    Divider,\n    Factory,\n    Group,\n    GroupProps,\n    Stack,\n    StylesApiProps,\n    Text,\n    Title,\n    factory,\n    useProps,\n    useStyles,\n} from '@mantine/core';\nimport {Children, ElementType, ReactElement, ReactNode} from 'react';\nimport {HeaderProvider} from './Header.context';\nimport classes from './Header.module.css';\nimport {\n    HeaderBreadcrumbAnchor,\n    type HeaderBreadcrumbAnchorStyleNames,\n} from './HeaderBreadcrumbs/HeaderBreadcrumbAnchor';\nimport {HeaderBreadcrumbs, HeaderBreadcrumbsStyleNames} from './HeaderBreadcrumbs/HeaderBreadcrumbs';\nimport {HeaderBreadcrumbText, HeaderBreadcrumbTextStyleNames} from './HeaderBreadcrumbs/HeaderBreadcrumbText';\nimport {HeaderDocAnchor, HeaderDocAnchorStyleNames} from './HeaderDocAnchor/HeaderDocAnchor';\nimport {HeaderRight, HeaderRightStyleNames} from './HeaderRight/HeaderRight';\n\nexport type {HeaderBreadcrumbsProps} from './HeaderBreadcrumbs/HeaderBreadcrumbs';\nexport type {HeaderDocAnchorProps} from './HeaderDocAnchor/HeaderDocAnchor';\nexport type {HeaderRightProps} from './HeaderRight/HeaderRight';\n\nexport type HeaderVariant = 'primary' | 'secondary';\nexport type HeaderStyleNames =\n    | 'root'\n    | 'title'\n    | 'description'\n    | 'divider'\n    | 'body'\n    | HeaderDocAnchorStyleNames\n    | HeaderBreadcrumbsStyleNames\n    | HeaderBreadcrumbAnchorStyleNames\n    | HeaderBreadcrumbTextStyleNames\n    | HeaderBreadcrumbsStyleNames\n    | HeaderRightStyleNames;\n\nexport interface HeaderProps\n    extends StylesApiProps<HeaderFactory>,\n        Omit<GroupProps, 'classNames' | 'styles' | 'vars' | 'variant'> {\n    /**\n     * The description text displayed inside the header underneath the title\n     */\n    description?: ReactNode;\n    /**\n     * Whether the header should have a border on the bottom\n     */\n    borderBottom?: boolean;\n    /**\n     * Use the primary variant for page header and secondary variant elsewhere\n     *\n     * @default 'primary'\n     */\n    variant?: 'primary' | 'secondary';\n    /**\n     * The title of the header.\n     */\n    children: ReactNode;\n    /**\n     * The component used to render the title.\n     *\n     * @default Title\n     * @example 'h2'\n     */\n    titleComponent?: ElementType;\n}\n\nexport type HeaderFactory = Factory<{\n    props: HeaderProps;\n    ref: HTMLDivElement;\n    variant: HeaderVariant;\n    stylesNames: HeaderStyleNames;\n    staticComponents: {\n        Breadcrumbs: typeof HeaderBreadcrumbs;\n        BreadcrumbAnchor: typeof HeaderBreadcrumbAnchor;\n        BreadcrumbText: typeof HeaderBreadcrumbText;\n        Right: typeof HeaderRight;\n        DocAnchor: typeof HeaderDocAnchor;\n    };\n}>;\n\nconst defaultProps: Partial<HeaderProps> = {\n    variant: 'primary',\n    justify: 'space-between',\n    wrap: 'nowrap',\n};\n\nconst getSpacing = (variant: HeaderVariant) => (variant === 'secondary' ? 'xxs' : 'xs');\n\nexport const Header = factory<HeaderFactory>((_props, ref) => {\n    const props = useProps('PlasmaHeader', defaultProps, _props);\n    const {\n        className,\n        description,\n        borderBottom,\n        variant,\n        children,\n        style,\n        classNames,\n        unstyled,\n        vars,\n        styles,\n        titleComponent: TitleComponent,\n        ...others\n    } = props;\n    const getStyles = useStyles<HeaderFactory>({\n        name: 'PlasmaHeader',\n        props,\n        classes,\n        className,\n        style,\n        classNames,\n        styles,\n        unstyled,\n        vars,\n    });\n    const stylesApiProps = {classNames, styles};\n\n    const convertedChildren = Children.toArray(children) as ReactElement[];\n    const breadcrumbs = convertedChildren.find((child) => child.type === HeaderBreadcrumbs);\n    const right = convertedChildren.find((child) => child.type === HeaderRight);\n    const docAnchor = convertedChildren.find((child) => child.type === HeaderDocAnchor);\n    const otherChildren = convertedChildren.filter(\n        (child) => child.type !== HeaderBreadcrumbs && child.type !== HeaderRight && child.type !== HeaderDocAnchor,\n    );\n    return (\n        <HeaderProvider value={{getStyles}}>\n            <Group ref={ref} variant={variant} {...getStyles('root')} {...others}>\n                <Stack gap={getSpacing(variant)}>\n                    {breadcrumbs}\n                    <Title\n                        variant={variant}\n                        component={TitleComponent}\n                        order={variant === 'primary' ? 1 : 3}\n                        {...getStyles('title', stylesApiProps)}\n                    >\n                        {otherChildren}\n                        {docAnchor}\n                    </Title>\n                    <Text {...getStyles('description', stylesApiProps)} size={variant === 'primary' ? 'md' : 'sm'}>\n                        {description}\n                    </Text>\n                </Stack>\n                {right}\n            </Group>\n            {borderBottom ? <Divider {...getStyles('divider', stylesApiProps)} size=\"xs\" /> : null}\n        </HeaderProvider>\n    );\n});\n\nHeader.Breadcrumbs = HeaderBreadcrumbs;\nHeader.BreadcrumbAnchor = HeaderBreadcrumbAnchor;\nHeader.BreadcrumbText = HeaderBreadcrumbText;\nHeader.Right = HeaderRight;\nHeader.DocAnchor = HeaderDocAnchor;\n"],"names":["Divider","Group","Stack","Text","Title","factory","useProps","useStyles","Children","HeaderProvider","classes","HeaderBreadcrumbAnchor","HeaderBreadcrumbs","HeaderBreadcrumbText","HeaderDocAnchor","HeaderRight","defaultProps","variant","justify","wrap","getSpacing","Header","_props","ref","props","className","description","borderBottom","children","style","classNames","unstyled","vars","styles","titleComponent","TitleComponent","others","getStyles","name","stylesApiProps","convertedChildren","toArray","breadcrumbs","find","child","type","right","docAnchor","otherChildren","filter","value","gap","component","order","size","Breadcrumbs","BreadcrumbAnchor","BreadcrumbText","Right","DocAnchor"],"mappings":";AAAA,SACIA,OAAO,EAEPC,KAAK,EAELC,KAAK,EAELC,IAAI,EACJC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,SAAS,QACN,gBAAgB;AACvB,SAAQC,QAAQ,QAA6C,QAAQ;AACrE,SAAQC,cAAc,QAAO,mBAAmB;AAChD,OAAOC,aAAa,sBAAsB;AAC1C,SACIC,sBAAsB,QAEnB,6CAA6C;AACpD,SAAQC,iBAAiB,QAAoC,wCAAwC;AACrG,SAAQC,oBAAoB,QAAuC,2CAA2C;AAC9G,SAAQC,eAAe,QAAkC,oCAAoC;AAC7F,SAAQC,WAAW,QAA8B,4BAA4B;AAgE7E,MAAMC,eAAqC;IACvCC,SAAS;IACTC,SAAS;IACTC,MAAM;AACV;AAEA,MAAMC,aAAa,CAACH,UAA4BA,YAAY,cAAc,QAAQ;AAElF,OAAO,MAAMI,SAAShB,QAAuB,CAACiB,QAAQC;IAClD,MAAMC,QAAQlB,SAAS,gBAAgBU,cAAcM;IACrD,MAAM,EACFG,SAAS,EACTC,WAAW,EACXC,YAAY,EACZV,OAAO,EACPW,QAAQ,EACRC,KAAK,EACLC,UAAU,EACVC,QAAQ,EACRC,IAAI,EACJC,MAAM,EACNC,gBAAgBC,cAAc,EAC9B,GAAGC,QACN,GAAGZ;IACJ,MAAMa,YAAY9B,UAAyB;QACvC+B,MAAM;QACNd;QACAd;QACAe;QACAI;QACAC;QACAG;QACAF;QACAC;IACJ;IACA,MAAMO,iBAAiB;QAACT;QAAYG;IAAM;IAE1C,MAAMO,oBAAoBhC,SAASiC,OAAO,CAACb;IAC3C,MAAMc,cAAcF,kBAAkBG,IAAI,CAAC,CAACC,QAAUA,MAAMC,IAAI,KAAKjC;IACrE,MAAMkC,QAAQN,kBAAkBG,IAAI,CAAC,CAACC,QAAUA,MAAMC,IAAI,KAAK9B;IAC/D,MAAMgC,YAAYP,kBAAkBG,IAAI,CAAC,CAACC,QAAUA,MAAMC,IAAI,KAAK/B;IACnE,MAAMkC,gBAAgBR,kBAAkBS,MAAM,CAC1C,CAACL,QAAUA,MAAMC,IAAI,KAAKjC,qBAAqBgC,MAAMC,IAAI,KAAK9B,eAAe6B,MAAMC,IAAI,KAAK/B;IAEhG,qBACI,MAACL;QAAeyC,OAAO;YAACb;QAAS;;0BAC7B,MAACpC;gBAAMsB,KAAKA;gBAAKN,SAASA;gBAAU,GAAGoB,UAAU,OAAO;gBAAG,GAAGD,MAAM;;kCAChE,MAAClC;wBAAMiD,KAAK/B,WAAWH;;4BAClByB;0CACD,MAACtC;gCACGa,SAASA;gCACTmC,WAAWjB;gCACXkB,OAAOpC,YAAY,YAAY,IAAI;gCAClC,GAAGoB,UAAU,SAASE,eAAe;;oCAErCS;oCACAD;;;0CAEL,KAAC5C;gCAAM,GAAGkC,UAAU,eAAeE,eAAe;gCAAEe,MAAMrC,YAAY,YAAY,OAAO;0CACpFS;;;;oBAGRoB;;;YAEJnB,6BAAe,KAAC3B;gBAAS,GAAGqC,UAAU,WAAWE,eAAe;gBAAEe,MAAK;iBAAU;;;AAG9F,GAAG;AAEHjC,OAAOkC,WAAW,GAAG3C;AACrBS,OAAOmC,gBAAgB,GAAG7C;AAC1BU,OAAOoC,cAAc,GAAG5C;AACxBQ,OAAOqC,KAAK,GAAG3C;AACfM,OAAOsC,SAAS,GAAG7C"}

package/dist/esm/components/header/Header.module.css

@@ -5,31 +5,16 @@
     }
 
     & .description {
-        color: var(--mantine-color-gray-6);
-        font-weight: 300;
+        color: var(--mantine-color-dimmed);
+        font-weight: var(--coveo-fw-normal);
     }
 }
 
 .title {
     word-break: break-word;
-
-    &[data-variant='primary'] {
-        color: var(--mantine-color-gray-5);
-    }
-
-    line-height: var(--mantine-line-height-md);
 }
 
 .docAnchor {
     margin-left: var(--mantine-spacing-xs);
     vertical-align: middle;
 }
-
-.breadcrumbs {
-    font-size: var(--mantine-font-size-sm);
-    font-weight: 300;
-}
-
-.breadcrumbsSeparator {
-    color: var(--mantine-color-gray-5);
-}

package/dist/esm/components/header/HeaderBreadcrumbs/HeaderBreadcrumbAnchor.d.ts

@@ -0,0 +1,41 @@
+import { type AnchorProps, type PolymorphicFactory } from '@mantine/core';
+export type HeaderBreadcrumbAnchorStyleNames = 'breadcrumbAnchor';
+export type HeaderBreadcrumbAnchorFactory = PolymorphicFactory<{
+    props: AnchorProps;
+    ref: HTMLAnchorElement;
+    stylesNames: HeaderBreadcrumbAnchorStyleNames;
+    compound: true;
+    defaultComponent: 'a';
+    defaultRef: HTMLAnchorElement;
+}>;
+export declare const HeaderBreadcrumbAnchor: (<C = "a">(props: import("@mantine/core").PolymorphicComponentProps<C, AnchorProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(AnchorProps & {
+    component?: any;
+} & Omit<Omit<any, "ref">, "component" | keyof AnchorProps> & {
+    ref?: any;
+    renderRoot?: (props: any) => any;
+}) | (AnchorProps & {
+    component: React.ElementType;
+    renderRoot?: (props: Record<string, any>) => any;
+})>, never> & import("@mantine/core/lib/core/factory/factory").ThemeExtend<{
+    props: AnchorProps;
+    ref: HTMLAnchorElement;
+    stylesNames: HeaderBreadcrumbAnchorStyleNames;
+    compound: true;
+    defaultComponent: "a";
+    defaultRef: HTMLAnchorElement;
+}> & import("@mantine/core/lib/core/factory/factory").ComponentClasses<{
+    props: AnchorProps;
+    ref: HTMLAnchorElement;
+    stylesNames: HeaderBreadcrumbAnchorStyleNames;
+    compound: true;
+    defaultComponent: "a";
+    defaultRef: HTMLAnchorElement;
+}> & import("@mantine/core/lib/core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: AnchorProps;
+    ref: HTMLAnchorElement;
+    stylesNames: HeaderBreadcrumbAnchorStyleNames;
+    compound: true;
+    defaultComponent: "a";
+    defaultRef: HTMLAnchorElement;
+}>;
+//# sourceMappingURL=HeaderBreadcrumbAnchor.d.ts.map