@a-type/ui 3.0.34 → 3.0.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/datePicker/Calendar.js +7 -7
- package/dist/cjs/components/datePicker/Calendar.js.map +1 -1
- package/dist/cjs/components/datePicker/DateRangePicker.js +2 -2
- package/dist/cjs/components/datePicker/DateRangePicker.js.map +1 -1
- package/dist/css/main.css +5 -5
- package/dist/esm/components/datePicker/Calendar.js +7 -7
- package/dist/esm/components/datePicker/Calendar.js.map +1 -1
- package/dist/esm/components/datePicker/DateRangePicker.js +2 -2
- package/dist/esm/components/datePicker/DateRangePicker.js.map +1 -1
- package/package.json +1 -1
- package/src/components/datePicker/Calendar.tsx +27 -28
- package/src/components/datePicker/DateRangePicker.tsx +4 -4
|
@@ -14,19 +14,19 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
|
|
|
14
14
|
import { CalendarDay as BaseCalendarDay, CalendarDays, } from 'calendar-blocks';
|
|
15
15
|
import { withClassName } from '../../hooks.js';
|
|
16
16
|
import { Button } from '../button/index.js';
|
|
17
|
-
export const MonthRow = withClassName('div', 'flex flex-row justify-between items-center w-full');
|
|
18
|
-
export const MonthLabel = withClassName('span', 'text-sm font-bold min-w-0 overflow-hidden text-center text-ellipsis
|
|
17
|
+
export const MonthRow = withClassName('div', 'layer-components:flex layer-components:flex-row layer-components:justify-between layer-components:items-center layer-components:w-full');
|
|
18
|
+
export const MonthLabel = withClassName('span', 'layer-components:text-sm layer-components:font-bold layer-components:min-w-0 layer-components:overflow-hidden layer-components:text-center layer-components:text-ellipsis layer-components:self-center');
|
|
19
19
|
export const MonthButton = withClassName(Button, 'self-center');
|
|
20
|
-
export const CalendarGridRoot = withClassName('div', 'grid grid-cols-[repeat(7,var(--day-size,32px))] [grid-auto-rows:var(--day-size,32px)]', 'height-[calc(var(--day-size,32px)*7)] rounded overflow-hidden p-2');
|
|
21
|
-
export const DayLabel = withClassName('div', 'flex items-center justify-center text-sm color-gray-dark');
|
|
20
|
+
export const CalendarGridRoot = withClassName('div', 'layer-components:grid layer-components:grid-cols-[repeat(7,var(--day-size,32px))] layer-components:[grid-auto-rows:var(--day-size,32px)]', 'layer-components:height-[calc(var(--day-size,32px)*7)] layer-components:rounded layer-components:overflow-hidden layer-components:p-2');
|
|
21
|
+
export const DayLabel = withClassName('div', 'layer-components:flex layer-components:items-center layer-components:justify-center layer-components:text-sm layer-components:color-gray-dark');
|
|
22
22
|
export const DayLabels = () => (_jsxs(_Fragment, { children: [_jsx(DayLabel, { children: "S" }), _jsx(DayLabel, { children: "M" }), _jsx(DayLabel, { children: "T" }), _jsx(DayLabel, { children: "W" }), _jsx(DayLabel, { children: "T" }), _jsx(DayLabel, { children: "F" }), _jsx(DayLabel, { children: "S" })] }));
|
|
23
23
|
export function CalendarGrid(_a) {
|
|
24
24
|
var { className } = _a, props = __rest(_a, ["className"]);
|
|
25
25
|
return (_jsxs(CalendarGridRoot, { className: className, children: [_jsx(DayLabels, {}), _jsx(CalendarDays, Object.assign({}, props))] }));
|
|
26
26
|
}
|
|
27
|
-
export const CalendarDay = withClassName(BaseCalendarDay, 'border border-solid border-transparent bg-white mr--1px mb--1px relative color-black', 'flex items-center justify-center transition cursor-pointer', '[&[data-highlighted]]:z-1 [&[data-highlighted]]:ring-2 [&[data-highlighted]]:ring-accent', 'hover:z-1 hover:ring-2 hover:ring-accent', 'active:bg-main-light active:rounded', '[&[data-selected]]:bg-main [&[data-selected]]:z-2 [&[data-selected]]:rounded', '[&[data-in-range]]:bg-main-light [&[data-in-range]]:rounded-none [&[data-in-range]]:z-1', '[&[data-range-start]]:bg-main [&[data-range-start]]:rounded-l [&[data-range-start]]:rounded-r-none [&[data-range-start]]:z-1', '[&[data-range-end]]:bg-main [&[data-range-end]]:rounded-r [&[data-range-end]]:rounded-l-none [&[data-range-end]]:z-1', '[&[data-disabled=true]]:opacity-50 [&[data-disabled=true]]:cursor-not-allowed',
|
|
27
|
+
export const CalendarDay = withClassName(BaseCalendarDay, 'layer-components:border layer-components:border-solid layer-components:border-transparent layer-components:bg-white layer-components:mr--1px layer-components:mb--1px layer-components:relative layer-components:color-black', 'layer-components:flex layer-components:items-center layer-components:justify-center layer-components:transition layer-components:cursor-pointer', 'layer-components:[&[data-highlighted]]:z-1 layer-components:[&[data-highlighted]]:ring-2 layer-components:[&[data-highlighted]]:ring-accent', 'layer-components:hover:z-1 layer-components:hover:ring-2 layer-components:hover:ring-accent', 'layer-components:active:bg-main-light layer-components:active:rounded', 'layer-components:[&[data-selected]]:bg-main layer-components:[&[data-selected]]:z-2 layer-components:[&[data-selected]]:rounded', 'layer-components:[&[data-in-range]]:bg-main-light layer-components:[&[data-in-range]]:rounded-none layer-components:[&[data-in-range]]:z-1', 'layer-components:[&[data-range-start]]:bg-main layer-components:[&[data-range-start]]:rounded-l layer-components:[&[data-range-start]]:rounded-r-none layer-components:[&[data-range-start]]:z-1', 'layer-components:[&[data-range-end]]:bg-main layer-components:[&[data-range-end]]:rounded-r layer-components:[&[data-range-end]]:rounded-l-none layer-components:[&[data-range-end]]:z-1', 'layer-components:[&[data-disabled=true]]:opacity-50 layer-components:[&[data-disabled=true]]:cursor-not-allowed',
|
|
28
28
|
// today dot
|
|
29
|
-
"[&[data-today]]:before:content-[''] [&[data-today]]:before:absolute [&[data-today]]:before:left-[1px] [&[data-today]]:before:top-[1px] [&[data-today]]:before:w-[6px] [&[data-today]]:before:h-[6px] [&[data-today]]:before:rounded-lg [&[data-today]]:before:bg-attention [&[data-today]]:before:border-1 [&[data-today]]:before:border-solid [&[data-today]]:before:border-black",
|
|
29
|
+
"layer-components:[&[data-today]]:before:content-[''] layer-components:[&[data-today]]:before:absolute layer-components:[&[data-today]]:before:left-[1px] layer-components:[&[data-today]]:before:top-[1px] layer-components:[&[data-today]]:before:w-[6px] layer-components:[&[data-today]]:before:h-[6px] layer-components:[&[data-today]]:before:rounded-lg layer-components:[&[data-today]]:before:bg-attention layer-components:[&[data-today]]:before:border-1 layer-components:[&[data-today]]:before:border-solid layer-components:[&[data-today]]:before:border-black",
|
|
30
30
|
// calendar edges
|
|
31
|
-
'[&[data-top-edge]]:border-t-gray', '[&[data-bottom-edge]]:border-b-gray', '[&[data-first-column]]:border-l-gray', '[&[data-last-column]]:border-r-gray', '[&[data-day-first]]:border-l-gray [&[data-day-first]]:rounded-tl', '[&[data-day-last]]:border-r-gray [&[data-day-last]]:rounded-br', '[&[data-first-column][data-bottom-edge]]:rounded-bl', '[&[data-last-column][data-bottom-edge]]:rounded-br', '[&[data-first-column][data-top-edge]]:rounded-tl', '[&[data-last-column][data-top-edge]]:rounded-tr', '[&[data-different-month]]:[visibility:hidden]');
|
|
31
|
+
'layer-components:[&[data-top-edge]]:border-t-gray', 'layer-components:[&[data-bottom-edge]]:border-b-gray', 'layer-components:[&[data-first-column]]:border-l-gray', 'layer-components:[&[data-last-column]]:border-r-gray', 'layer-components:[&[data-day-first]]:border-l-gray layer-components:[&[data-day-first]]:rounded-tl', 'layer-components:[&[data-day-last]]:border-r-gray layer-components:[&[data-day-last]]:rounded-br', 'layer-components:[&[data-first-column][data-bottom-edge]]:rounded-bl', 'layer-components:[&[data-last-column][data-bottom-edge]]:rounded-br', 'layer-components:[&[data-first-column][data-top-edge]]:rounded-tl', 'layer-components:[&[data-last-column][data-top-edge]]:rounded-tr', 'layer-components:[&[data-different-month]]:[visibility:hidden]');
|
|
32
32
|
//# sourceMappingURL=Calendar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../../../src/components/datePicker/Calendar.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EACN,WAAW,IAAI,eAAe,EAC9B,YAAY,GAEZ,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE5C,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CACpC,KAAK,EACL,
|
|
1
|
+
{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../../../src/components/datePicker/Calendar.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EACN,WAAW,IAAI,eAAe,EAC9B,YAAY,GAEZ,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE5C,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CACpC,KAAK,EACL,sEAAsE,CACtE,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CACtC,MAAM,EACN,oGAAoG,CACpG,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AAEhE,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAC5C,KAAK,EACL,0GAA0G,EAC1G,sFAAsF,CACtF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CACpC,KAAK,EACL,6EAA6E,CAC7E,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC9B,8BACC,KAAC,QAAQ,oBAAa,EACtB,KAAC,QAAQ,oBAAa,EACtB,KAAC,QAAQ,oBAAa,EACtB,KAAC,QAAQ,oBAAa,EACtB,KAAC,QAAQ,oBAAa,EACtB,KAAC,QAAQ,oBAAa,EACtB,KAAC,QAAQ,oBAAa,IACpB,CACH,CAAC;AAEF,MAAM,UAAU,YAAY,CAAC,EAGgB;QAHhB,EAC5B,SAAS,OAEmC,EADzC,KAAK,cAFoB,aAG5B,CADQ;IAER,OAAO,CACN,MAAC,gBAAgB,IAAC,SAAS,EAAE,SAAS,aACrC,KAAC,SAAS,KAAG,EACb,KAAC,YAAY,oBAAK,KAAK,EAAI,IACT,CACnB,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CACvC,eAAe,EACf,yGAAyG,EACzG,+EAA+E,EAC/E,iEAAiE,EACjE,iDAAiD,EACjD,iDAAiD,EACjD,2DAA2D,EAC3D,sEAAsE,EACtE,+EAA+E,EAC/E,6EAA6E,EAC7E,0EAA0E;AAC1E,YAAY;AACZ,iKAAiK;AACjK,iBAAiB;AACjB,qDAAqD,EACrD,wDAAwD,EACxD,yDAAyD,EACzD,wDAAwD,EACxD,iEAAiE,EACjE,gEAAgE,EAChE,sEAAsE,EACtE,qEAAqE,EACrE,mEAAmE,EACnE,kEAAkE,EAClE,gEAAgE,CAChE,CAAC"}
|
|
@@ -17,7 +17,7 @@ import { useCallback, useState } from 'react';
|
|
|
17
17
|
import { withClassName } from '../../hooks.js';
|
|
18
18
|
import { Icon } from '../icon/Icon.js';
|
|
19
19
|
import { CalendarDay, CalendarGrid, DayLabels, MonthButton, MonthLabel, } from './Calendar.js';
|
|
20
|
-
const RangeLayout = withClassName('div', 'grid [grid-template-areas:"prevMonth_leftMonth_nextMonth""leftGrid_leftGrid_leftGrid"] [grid-template-columns:auto_1fr_auto]', '[grid-template-rows:auto_1fr] gap-2', 'sm:grid-areas-[prevMonth_leftMonth_rightMonth_nextMonth]-[leftGrid_leftGrid_rightGrid_rightGrid] sm:[grid-template-columns:auto_1fr_1fr_auto]');
|
|
20
|
+
const RangeLayout = withClassName('div', 'layer-components:grid layer-components:[grid-template-areas:"prevMonth_leftMonth_nextMonth""leftGrid_leftGrid_leftGrid"] layer-components:[grid-template-columns:auto_1fr_auto]', 'layer-components:[grid-template-rows:auto_1fr] layer-components:gap-2', 'layer-components:sm:grid-areas-[prevMonth_leftMonth_rightMonth_nextMonth]-[leftGrid_leftGrid_rightGrid_rightGrid] sm:[grid-template-columns:auto_1fr_1fr_auto]');
|
|
21
21
|
function DateRangePickerMonthControls() {
|
|
22
22
|
const { setDisplayInfo, month, year } = useCalendarContext();
|
|
23
23
|
const monthLabel = new Date(year, month).toLocaleDateString('en-US', {
|
|
@@ -63,7 +63,7 @@ function DateRangePickerRoot(_a) {
|
|
|
63
63
|
year: newYear,
|
|
64
64
|
});
|
|
65
65
|
}, [month, year]);
|
|
66
|
-
return (_jsx(Calendar, Object.assign({ displayMonth: month, displayYear: year, rangeValue: value, onRangeChange: (range) => onChange(range), onDisplayChange: onDisplayChange, className: clsx('flex justify-center', color && `palette-${color}`, className) }, rest, { children: _jsx(RangeLayout, { children: children }) })));
|
|
66
|
+
return (_jsx(Calendar, Object.assign({ displayMonth: month, displayYear: year, rangeValue: value, onRangeChange: (range) => onChange(range), onDisplayChange: onDisplayChange, className: clsx('layer-components:flex layer-components:justify-center', color && `palette-${color}`, className) }, rest, { children: _jsx(RangeLayout, { children: children }) })));
|
|
67
67
|
}
|
|
68
68
|
function DateRangePickerBase(props) {
|
|
69
69
|
return (_jsxs(DateRangePickerRoot, Object.assign({}, props, { children: [_jsx(DateRangePickerMonthControls, {}), _jsx(CalendarGrid, { className: "[grid-area:leftGrid]", children: (value) => _jsx(CalendarDay, { value: value }, value.key) }), _jsx(CalendarGrid, { className: "[grid-area:rightGrid] !hidden !sm:grid", monthOffset: 1, children: (value) => _jsx(CalendarDay, { value: value }, value.key) })] })));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateRangePicker.js","sourceRoot":"","sources":["../../../../src/components/datePicker/DateRangePicker.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC7E,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAa,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EACN,WAAW,EACX,YAAY,EACZ,SAAS,EACT,WAAW,EACX,UAAU,GACV,MAAM,eAAe,CAAC;AAEvB,MAAM,WAAW,GAAG,aAAa,CAChC,KAAK,EACL,
|
|
1
|
+
{"version":3,"file":"DateRangePicker.js","sourceRoot":"","sources":["../../../../src/components/datePicker/DateRangePicker.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -8,26 +8,25 @@ import { Button } from '../button/index.js';
|
|
|
8
8
|
|
|
9
9
|
export const MonthRow = withClassName(
|
|
10
10
|
'div',
|
|
11
|
-
'flex flex-row justify-between items-center w-full',
|
|
11
|
+
'layer-components:(flex flex-row justify-between items-center w-full)',
|
|
12
12
|
);
|
|
13
13
|
|
|
14
14
|
export const MonthLabel = withClassName(
|
|
15
15
|
'span',
|
|
16
|
-
'text-sm font-bold min-w-0 overflow-hidden text-center text-ellipsis',
|
|
17
|
-
'self-center',
|
|
16
|
+
'layer-components:(text-sm font-bold min-w-0 overflow-hidden text-center text-ellipsis self-center)',
|
|
18
17
|
);
|
|
19
18
|
|
|
20
19
|
export const MonthButton = withClassName(Button, 'self-center');
|
|
21
20
|
|
|
22
21
|
export const CalendarGridRoot = withClassName(
|
|
23
22
|
'div',
|
|
24
|
-
'grid grid-cols-[repeat(7,var(--day-size,32px))] [grid-auto-rows:var(--day-size,32px)]',
|
|
25
|
-
'height-[calc(var(--day-size,32px)*7)] rounded overflow-hidden p-2',
|
|
23
|
+
'layer-components:(grid grid-cols-[repeat(7,var(--day-size,32px))] [grid-auto-rows:var(--day-size,32px)])',
|
|
24
|
+
'layer-components:(height-[calc(var(--day-size,32px)*7)] rounded overflow-hidden p-2)',
|
|
26
25
|
);
|
|
27
26
|
|
|
28
27
|
export const DayLabel = withClassName(
|
|
29
28
|
'div',
|
|
30
|
-
'flex items-center justify-center text-sm color-gray-dark',
|
|
29
|
+
'layer-components:(flex items-center justify-center text-sm color-gray-dark)',
|
|
31
30
|
);
|
|
32
31
|
|
|
33
32
|
export const DayLabels = () => (
|
|
@@ -56,28 +55,28 @@ export function CalendarGrid({
|
|
|
56
55
|
|
|
57
56
|
export const CalendarDay = withClassName(
|
|
58
57
|
BaseCalendarDay,
|
|
59
|
-
'border border-solid border-transparent bg-white mr--1px mb--1px relative color-black',
|
|
60
|
-
'flex items-center justify-center transition cursor-pointer',
|
|
61
|
-
'[&[data-highlighted]]:(z-1 ring-2 ring-accent)',
|
|
62
|
-
'hover:(z-1 ring-2 ring-accent)',
|
|
63
|
-
'active:(bg-main-light rounded)',
|
|
64
|
-
'[&[data-selected]]:(bg-main z-2 rounded)',
|
|
65
|
-
'[&[data-in-range]]:(bg-main-light rounded-none z-1)',
|
|
66
|
-
'[&[data-range-start]]:(bg-main rounded-l rounded-r-none z-1)',
|
|
67
|
-
'[&[data-range-end]]:(bg-main rounded-r rounded-l-none z-1)',
|
|
68
|
-
'[&[data-disabled=true]]:(opacity-50 cursor-not-allowed)',
|
|
58
|
+
'layer-components:(border border-solid border-transparent bg-white mr--1px mb--1px relative color-black)',
|
|
59
|
+
'layer-components:(flex items-center justify-center transition cursor-pointer)',
|
|
60
|
+
'layer-components:[&[data-highlighted]]:(z-1 ring-2 ring-accent)',
|
|
61
|
+
'layer-components:hover:(z-1 ring-2 ring-accent)',
|
|
62
|
+
'layer-components:active:(bg-main-light rounded)',
|
|
63
|
+
'layer-components:[&[data-selected]]:(bg-main z-2 rounded)',
|
|
64
|
+
'layer-components:[&[data-in-range]]:(bg-main-light rounded-none z-1)',
|
|
65
|
+
'layer-components:[&[data-range-start]]:(bg-main rounded-l rounded-r-none z-1)',
|
|
66
|
+
'layer-components:[&[data-range-end]]:(bg-main rounded-r rounded-l-none z-1)',
|
|
67
|
+
'layer-components:[&[data-disabled=true]]:(opacity-50 cursor-not-allowed)',
|
|
69
68
|
// today dot
|
|
70
|
-
"[&[data-today]]:before:(content-[''] absolute left-[1px] top-[1px] w-[6px] h-[6px] rounded-lg bg-attention border-1 border-solid border-black)",
|
|
69
|
+
"layer-components:[&[data-today]]:before:(content-[''] absolute left-[1px] top-[1px] w-[6px] h-[6px] rounded-lg bg-attention border-1 border-solid border-black)",
|
|
71
70
|
// calendar edges
|
|
72
|
-
'[&[data-top-edge]]:(border-t-gray)',
|
|
73
|
-
'[&[data-bottom-edge]]:(border-b-gray)',
|
|
74
|
-
'[&[data-first-column]]:(border-l-gray)',
|
|
75
|
-
'[&[data-last-column]]:(border-r-gray)',
|
|
76
|
-
'[&[data-day-first]]:(border-l-gray rounded-tl)',
|
|
77
|
-
'[&[data-day-last]]:(border-r-gray rounded-br)',
|
|
78
|
-
'[&[data-first-column][data-bottom-edge]]:rounded-bl',
|
|
79
|
-
'[&[data-last-column][data-bottom-edge]]:rounded-br',
|
|
80
|
-
'[&[data-first-column][data-top-edge]]:rounded-tl',
|
|
81
|
-
'[&[data-last-column][data-top-edge]]:rounded-tr',
|
|
82
|
-
'[&[data-different-month]]:[visibility:hidden]',
|
|
71
|
+
'layer-components:[&[data-top-edge]]:(border-t-gray)',
|
|
72
|
+
'layer-components:[&[data-bottom-edge]]:(border-b-gray)',
|
|
73
|
+
'layer-components:[&[data-first-column]]:(border-l-gray)',
|
|
74
|
+
'layer-components:[&[data-last-column]]:(border-r-gray)',
|
|
75
|
+
'layer-components:[&[data-day-first]]:(border-l-gray rounded-tl)',
|
|
76
|
+
'layer-components:[&[data-day-last]]:(border-r-gray rounded-br)',
|
|
77
|
+
'layer-components:[&[data-first-column][data-bottom-edge]]:rounded-bl',
|
|
78
|
+
'layer-components:[&[data-last-column][data-bottom-edge]]:rounded-br',
|
|
79
|
+
'layer-components:[&[data-first-column][data-top-edge]]:rounded-tl',
|
|
80
|
+
'layer-components:[&[data-last-column][data-top-edge]]:rounded-tr',
|
|
81
|
+
'layer-components:[&[data-different-month]]:[visibility:hidden]',
|
|
83
82
|
);
|
|
@@ -14,9 +14,9 @@ import {
|
|
|
14
14
|
|
|
15
15
|
const RangeLayout = withClassName(
|
|
16
16
|
'div',
|
|
17
|
-
'grid [grid-template-areas:"prevMonth_leftMonth_nextMonth""leftGrid_leftGrid_leftGrid"] [grid-template-columns:auto_1fr_auto]',
|
|
18
|
-
'[grid-template-rows:auto_1fr] gap-2',
|
|
19
|
-
'sm:grid-areas-[prevMonth_leftMonth_rightMonth_nextMonth]-[leftGrid_leftGrid_rightGrid_rightGrid] sm:[grid-template-columns:auto_1fr_1fr_auto]',
|
|
17
|
+
'layer-components:(grid [grid-template-areas:"prevMonth_leftMonth_nextMonth""leftGrid_leftGrid_leftGrid"] [grid-template-columns:auto_1fr_auto])',
|
|
18
|
+
'layer-components:([grid-template-rows:auto_1fr] gap-2)',
|
|
19
|
+
'layer-components:sm:grid-areas-[prevMonth_leftMonth_rightMonth_nextMonth]-[leftGrid_leftGrid_rightGrid_rightGrid] sm:[grid-template-columns:auto_1fr_1fr_auto]',
|
|
20
20
|
);
|
|
21
21
|
|
|
22
22
|
function DateRangePickerMonthControls() {
|
|
@@ -112,7 +112,7 @@ function DateRangePickerRoot({
|
|
|
112
112
|
onRangeChange={(range) => onChange(range)}
|
|
113
113
|
onDisplayChange={onDisplayChange}
|
|
114
114
|
className={clsx(
|
|
115
|
-
'flex justify-center',
|
|
115
|
+
'layer-components:(flex justify-center)',
|
|
116
116
|
color && `palette-${color}`,
|
|
117
117
|
className,
|
|
118
118
|
)}
|