tw-react-components 0.0.170 → 0.0.174
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/index.css
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
@
|
|
2
|
-
@tailwind components;
|
|
3
|
-
@tailwind utilities;
|
|
1
|
+
@import 'tailwindcss';
|
|
4
2
|
|
|
5
3
|
@layer base {
|
|
6
4
|
:root {
|
|
7
|
-
--background:
|
|
5
|
+
--background: var(--color-white);
|
|
8
6
|
--foreground: 222.2 47.4% 11.2%;
|
|
9
7
|
|
|
10
8
|
--muted: 210 40% 96.1%;
|
|
@@ -35,18 +33,18 @@
|
|
|
35
33
|
|
|
36
34
|
--radius: 0.5rem;
|
|
37
35
|
|
|
38
|
-
--sidebar-background:
|
|
36
|
+
--sidebar-background: var(--color-slate-100);
|
|
39
37
|
--sidebar-foreground: 240 5.3% 26.1%;
|
|
40
38
|
--sidebar-primary: 240 5.9% 10%;
|
|
41
39
|
--sidebar-primary-foreground: 0 0% 98%;
|
|
42
|
-
--sidebar-accent:
|
|
40
|
+
--sidebar-accent: var(--color-slate-200);
|
|
43
41
|
--sidebar-accent-foreground: 240 5.9% 10%;
|
|
44
42
|
--sidebar-border: 220 13% 91%;
|
|
45
43
|
--sidebar-ring: 217.2 91.2% 59.8%;
|
|
46
44
|
}
|
|
47
45
|
|
|
48
46
|
.dark {
|
|
49
|
-
--background:
|
|
47
|
+
--background: var(--color-slate-800);
|
|
50
48
|
--foreground: 213 31% 91%;
|
|
51
49
|
|
|
52
50
|
--muted: 223 47% 11%;
|
|
@@ -77,11 +75,11 @@
|
|
|
77
75
|
|
|
78
76
|
--radius: 0.5rem;
|
|
79
77
|
|
|
80
|
-
--sidebar-background:
|
|
78
|
+
--sidebar-background: var(--color-slate-900);
|
|
81
79
|
--sidebar-foreground: 240 4.8% 95.9%;
|
|
82
80
|
--sidebar-primary: 224.3 76.3% 48%;
|
|
83
81
|
--sidebar-primary-foreground: 0 0% 100%;
|
|
84
|
-
--sidebar-accent:
|
|
82
|
+
--sidebar-accent: var(--color-slate-800);
|
|
85
83
|
--sidebar-accent-foreground: 240 4.8% 95.9%;
|
|
86
84
|
--sidebar-border: 215 25% 27%;
|
|
87
85
|
--sidebar-ring: 217.2 91.2% 59.8%;
|
package/index.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import { clsx } from 'clsx';
|
|
3
3
|
import { twMerge } from 'tailwind-merge';
|
|
4
4
|
import dayjs from 'dayjs';
|
|
@@ -142,10 +142,46 @@ function resolveTargetObject(payload, fieldChain, defaultValue) {
|
|
|
142
142
|
return resolveTargetObject(payload[key], rest, defaultValue);
|
|
143
143
|
}
|
|
144
144
|
|
|
145
|
+
const Block = (_a) => {
|
|
146
|
+
var { children, className, centered, container, fullWidth, fullHeight, dataTestId = 'block' } = _a, props = __rest(_a, ["children", "className", "centered", "container", "fullWidth", "fullHeight", "dataTestId"]);
|
|
147
|
+
return (jsx("div", Object.assign({ "data-testid": dataTestId, className: cn(centered && 'mx-auto', container && 'container', fullWidth && 'w-full', fullHeight && 'h-full', className) }, props, { children: children })));
|
|
148
|
+
};
|
|
149
|
+
|
|
150
|
+
const directionClasses = {
|
|
151
|
+
row: {
|
|
152
|
+
normal: 'flex-row',
|
|
153
|
+
reverse: 'flex-row-reverse',
|
|
154
|
+
},
|
|
155
|
+
column: {
|
|
156
|
+
normal: 'flex-col',
|
|
157
|
+
reverse: 'flex-col-reverse',
|
|
158
|
+
},
|
|
159
|
+
};
|
|
160
|
+
const alignClasses = {
|
|
161
|
+
start: 'items-start',
|
|
162
|
+
center: 'items-center',
|
|
163
|
+
end: 'items-end',
|
|
164
|
+
};
|
|
165
|
+
const justifyClasses = {
|
|
166
|
+
start: 'justify-start',
|
|
167
|
+
center: 'justify-center',
|
|
168
|
+
between: 'justify-between',
|
|
169
|
+
end: 'justify-end',
|
|
170
|
+
};
|
|
171
|
+
const Flex = (_a) => {
|
|
172
|
+
var { children, className, reverse, wrap, direction = 'row', align = 'start', justify = 'start', dataTestId = 'flex' } = _a, blockProps = __rest(_a, ["children", "className", "reverse", "wrap", "direction", "align", "justify", "dataTestId"]);
|
|
173
|
+
return (jsx(Block, Object.assign({ className: cn('flex gap-2', wrap && 'flex-wrap', directionClasses[direction][reverse ? 'reverse' : 'normal'], alignClasses[align], justifyClasses[justify], className), dataTestId: dataTestId }, blockProps, { children: children })));
|
|
174
|
+
};
|
|
175
|
+
|
|
176
|
+
const Spinner = ({ className, fullScreen, dataTestId = 'spinner' }) => (jsx("div", { className: cn('flex w-full items-center justify-center bg-white dark:bg-slate-900', {
|
|
177
|
+
'h-screen': fullScreen,
|
|
178
|
+
'h-full': !fullScreen,
|
|
179
|
+
}, className), "data-testid": dataTestId, children: jsxs("svg", { className: "h-8 w-8 animate-spin text-black dark:text-white", fill: "none", viewBox: "0 0 24 24", children: [jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }) }));
|
|
180
|
+
|
|
145
181
|
const variantClassNames = {
|
|
146
182
|
filled: {
|
|
147
183
|
slate: {
|
|
148
|
-
base: 'bg-slate-100 dark:bg-slate-
|
|
184
|
+
base: 'bg-slate-100 dark:bg-slate-900/70',
|
|
149
185
|
hover: 'hover:bg-slate-200 dark:hover:bg-slate-700',
|
|
150
186
|
focus: 'focus:bg-slate-200 dark:focus:bg-slate-700',
|
|
151
187
|
active: 'active:bg-slate-300 dark:active:bg-slate-800/50',
|
|
@@ -565,12 +601,12 @@ const sizeClassNames = {
|
|
|
565
601
|
},
|
|
566
602
|
};
|
|
567
603
|
const Button = (_a) => {
|
|
568
|
-
var { children, className, size = 'medium', color = 'slate', variant = 'filled', rounded, prefixIcon: PrefixIcon, suffixIcon: SuffixIcon, unstyled, dataTestId = 'button' } = _a, props = __rest(_a, ["children", "className", "size", "color", "variant", "rounded", "prefixIcon", "suffixIcon", "unstyled", "dataTestId"]);
|
|
569
|
-
return (jsxs("button", Object.assign({ className: cn('relative flex aspect-square items-center font-medium duration-200', sizeClassNames[size].base, variantClassNames[variant][color].base, rounded ? 'rounded-full' : 'rounded-md',
|
|
604
|
+
var { children, className, size = 'medium', color = 'slate', variant = 'filled', rounded, loading, disabled, prefixIcon: PrefixIcon, suffixIcon: SuffixIcon, unstyled, dataTestId = 'button' } = _a, props = __rest(_a, ["children", "className", "size", "color", "variant", "rounded", "loading", "disabled", "prefixIcon", "suffixIcon", "unstyled", "dataTestId"]);
|
|
605
|
+
return (jsxs("button", Object.assign({ className: cn('relative flex aspect-square items-center font-medium duration-200', sizeClassNames[size].base, variantClassNames[variant][color].base, rounded ? 'rounded-full' : 'rounded-md', disabled || loading
|
|
570
606
|
? 'cursor-not-allowed opacity-50'
|
|
571
607
|
: !unstyled
|
|
572
|
-
? `${variantClassNames[variant][color].hover} ${variantClassNames[variant][color].focus} ${variantClassNames[variant][color].active}`
|
|
573
|
-
: 'cursor-default', children ? `${sizeClassNames[size].withChildren} aspect-[initial]` : 'justify-center', className), "data-testid": dataTestId, type: "button" }, props, { children: [PrefixIcon && (jsx(PrefixIcon, { className: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base })), children, SuffixIcon && (jsx(SuffixIcon, { className: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base }))] })));
|
|
608
|
+
? `${variantClassNames[variant][color].hover} ${variantClassNames[variant][color].focus} ${variantClassNames[variant][color].active} cursor-pointer`
|
|
609
|
+
: 'cursor-default', children ? `${sizeClassNames[size].withChildren} aspect-[initial]` : 'justify-center', className), "data-testid": dataTestId, type: "button", disabled: disabled || loading }, props, { children: [loading && (jsx(Flex, { className: cn('absolute inset-0', rounded ? 'rounded-full' : 'rounded-md'), align: "center", justify: "center", children: jsx(Spinner, { className: "h-5 w-5 animate-spin bg-transparent dark:bg-transparent", dataTestId: `${dataTestId}-spinner` }) })), PrefixIcon && (jsx(PrefixIcon, { className: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base })), children, SuffixIcon && (jsx(SuffixIcon, { className: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base }))] })));
|
|
574
610
|
};
|
|
575
611
|
|
|
576
612
|
const Badge = (_a) => {
|
|
@@ -578,14 +614,9 @@ const Badge = (_a) => {
|
|
|
578
614
|
return (jsx(Button, Object.assign({ size: size, dataTestId: dataTestId }, props)));
|
|
579
615
|
};
|
|
580
616
|
|
|
581
|
-
const Block = (_a) => {
|
|
582
|
-
var { children, className, centered, container, fullWidth, fullHeight, dataTestId = 'block' } = _a, props = __rest(_a, ["children", "className", "centered", "container", "fullWidth", "fullHeight", "dataTestId"]);
|
|
583
|
-
return (jsx("div", Object.assign({ "data-testid": dataTestId, className: cn(centered && 'mx-auto', container && 'container', fullWidth && 'w-full', fullHeight && 'h-full', className) }, props, { children: children })));
|
|
584
|
-
};
|
|
585
|
-
|
|
586
617
|
const Card = (_a) => {
|
|
587
618
|
var { children, className, dataTestId = 'card' } = _a, blockProps = __rest(_a, ["children", "className", "dataTestId"]);
|
|
588
|
-
return (jsx(Block, Object.assign({ className: cn('rounded-lg border p-2 dark:border-slate-700
|
|
619
|
+
return (jsx(Block, Object.assign({ className: cn('bg-background rounded-lg border p-2 dark:border-slate-700', className), dataTestId: dataTestId }, blockProps, { children: children })));
|
|
589
620
|
};
|
|
590
621
|
|
|
591
622
|
const CollapsibleRoot = (_a) => {
|
|
@@ -605,32 +636,6 @@ const Collapsible = Object.assign(CollapsibleRoot, {
|
|
|
605
636
|
Content: CollapsibleContent,
|
|
606
637
|
});
|
|
607
638
|
|
|
608
|
-
const directionClasses = {
|
|
609
|
-
row: {
|
|
610
|
-
normal: 'flex-row',
|
|
611
|
-
reverse: 'flex-row-reverse',
|
|
612
|
-
},
|
|
613
|
-
column: {
|
|
614
|
-
normal: 'flex-col',
|
|
615
|
-
reverse: 'flex-col-reverse',
|
|
616
|
-
},
|
|
617
|
-
};
|
|
618
|
-
const alignClasses = {
|
|
619
|
-
start: 'items-start',
|
|
620
|
-
center: 'items-center',
|
|
621
|
-
end: 'items-end',
|
|
622
|
-
};
|
|
623
|
-
const justifyClasses = {
|
|
624
|
-
start: 'justify-start',
|
|
625
|
-
center: 'justify-center',
|
|
626
|
-
between: 'justify-between',
|
|
627
|
-
end: 'justify-end',
|
|
628
|
-
};
|
|
629
|
-
const Flex = (_a) => {
|
|
630
|
-
var { children, className, reverse, wrap, direction = 'row', align = 'start', justify = 'start', dataTestId = 'flex' } = _a, blockProps = __rest(_a, ["children", "className", "reverse", "wrap", "direction", "align", "justify", "dataTestId"]);
|
|
631
|
-
return (jsx(Block, Object.assign({ className: cn('flex gap-2', wrap && 'flex-wrap', directionClasses[direction][reverse ? 'reverse' : 'normal'], alignClasses[align], justifyClasses[justify], className), dataTestId: dataTestId }, blockProps, { children: children })));
|
|
632
|
-
};
|
|
633
|
-
|
|
634
639
|
dayjs.extend(localeData);
|
|
635
640
|
function useDays(locale = 'en') {
|
|
636
641
|
return useMemo(() => {
|
|
@@ -856,7 +861,7 @@ const BasicInput = (_a) => {
|
|
|
856
861
|
[inputClasses.withoutErrors.input]: !hasErrors,
|
|
857
862
|
[inputClasses.withErrors.input]: hasErrors,
|
|
858
863
|
'rounded-r-none border-r-0': SuffixIcon,
|
|
859
|
-
}, inputClassName) }, props, { value: props.value, "data-testid": `${dataTestId}-textarea` }))) : type === 'checkbox' ? (jsx("input", Object.assign({ id: id, className: cn('rounded border-slate-300 text-blue-600', sizeClasses[size].checkbox.input, {
|
|
864
|
+
}, inputClassName) }, props, { value: props.value, "data-testid": `${dataTestId}-textarea` }))) : type === 'checkbox' ? (jsx("input", Object.assign({ id: id, className: cn('rounded-sm border-slate-300 text-blue-600', sizeClasses[size].checkbox.input, {
|
|
860
865
|
[inputClasses.base.disabled]: props.disabled,
|
|
861
866
|
'bg-red-100': hasErrors,
|
|
862
867
|
}, inputClassName), type: type, checked: Boolean(props.value) }, props, { "data-testid": `${dataTestId}-checkbox` }))) : (jsx("input", Object.assign({ id: id, className: cn(inputClasses.base.input, sizeClasses[size].input, {
|
|
@@ -864,7 +869,7 @@ const BasicInput = (_a) => {
|
|
|
864
869
|
[inputClasses.withoutErrors.input]: !hasErrors,
|
|
865
870
|
[inputClasses.withErrors.input]: hasErrors,
|
|
866
871
|
'rounded-r-none border-r-0': SuffixIcon,
|
|
867
|
-
}, inputClassName), type: type !== null && type !== void 0 ? type : 'text' }, props, { value: props.value, "data-testid": `${dataTestId}-input` }))), type === 'checkbox' && memoLabel, clearable && (onClear || !!props.value) && !props.disabled && (jsx(XIcon, { className: cn('absolute
|
|
872
|
+
}, inputClassName), type: type !== null && type !== void 0 ? type : 'text' }, props, { value: props.value, "data-testid": `${dataTestId}-input` }))), type === 'checkbox' && memoLabel, clearable && (onClear || !!props.value) && !props.disabled && (jsx(XIcon, { className: cn('absolute top-1/2 right-2 -translate-y-1/2 cursor-pointer rounded-full bg-white p-0.5 opacity-0 duration-200 group-hover:opacity-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-800', sizeClasses[size].clearButton.base, {
|
|
868
873
|
[sizeClasses[size].clearButton.withSuffixIcon]: SuffixIcon,
|
|
869
874
|
}), onClick: handleClear, onPointerDown: (event) => event.stopPropagation(), "data-testid": `${dataTestId}-clear` })), type !== 'checkbox' && SuffixIcon && (jsx(BasicInputExtension, { className: extensionClassName, hasErrors: hasErrors, size: size, disabled: props.disabled, onClick: onSuffixIconClick, dataTestId: `${dataTestId}-suffix`, children: jsx(SuffixIcon, { className: sizeClasses[size].suffix.icon }) }))] })] }));
|
|
870
875
|
};
|
|
@@ -966,7 +971,7 @@ const DaysView = ({ date, value, month, year, minDate, maxDate, locale, dataTest
|
|
|
966
971
|
}
|
|
967
972
|
setNewDate(newDate);
|
|
968
973
|
}, [date, maxDate, minDate, month, setNewDate, year]);
|
|
969
|
-
return (jsxs("div", { className: "gap-1 px-3 py-2", "data-testid": dataTestId, children: [jsx("div", { className: "grid grid-cols-7", children: days.map((day, index) => (jsx("span", { className: "flex h-8 w-8 items-center justify-center text-xs
|
|
974
|
+
return (jsxs("div", { className: "gap-1 px-3 py-2", "data-testid": dataTestId, children: [jsx("div", { className: "grid grid-cols-7", children: days.map((day, index) => (jsx("span", { className: "flex h-8 w-8 items-center justify-center text-xs text-slate-500 uppercase dark:text-slate-400", "data-testid": `${dataTestId}-weekday-${index}`, children: day.shortName }, index))) }), jsxs("div", { className: "grid grid-cols-7 gap-1", children: [prefixDays.map((dayNumber, index) => (jsx(Day, { value: value, day: dayNumber, month: (month - 1 + 12) % 12, year: month % 12 ? year : year - 1, minDate: minDate, maxDate: maxDate, setDayNumber: setDayNumber, dataTestId: dataTestId }, `${dayNumber}-${index}`))), monthDays.map((dayNumber, index) => (jsx(Day, { value: value, day: dayNumber, month: month, year: year, minDate: minDate, maxDate: maxDate, primary: true, setDayNumber: setDayNumber, dataTestId: dataTestId }, `${dayNumber}-${index}`))), suffixDays.map((dayNumber, index) => (jsx(Day, { value: value, day: dayNumber, month: (month + 1) % 12, year: (month + 1) % 12 ? year : year + 1, minDate: minDate, maxDate: maxDate, setDayNumber: setDayNumber, dataTestId: dataTestId }, `${dayNumber}-${index}`)))] })] }));
|
|
970
975
|
};
|
|
971
976
|
const Day = ({ value, day, month, year, minDate, maxDate, primary, dataTestId = 'day', setDayNumber, }) => {
|
|
972
977
|
const dayDate = useMemo(() => new Date(year, month, day), [day, month, year]);
|
|
@@ -993,7 +998,7 @@ const Month = ({ date, value, shortName, month, year, minDate, maxDate, dataTest
|
|
|
993
998
|
(!maxDate || compareDates(dayDate, new Date(maxDate), 'month') <= 0), [dayDate, minDate, maxDate]);
|
|
994
999
|
const isSelected = useMemo(() => !!value && !compareDates(dayDate, new Date(value), 'month'), [dayDate, value]);
|
|
995
1000
|
const isEqualThisMonth = useMemo(() => !compareDates(dayDate, new Date(), 'month'), [dayDate]);
|
|
996
|
-
return (jsx("div", { className: cn('mx-auto flex w-14 items-center justify-center rounded border py-3 text-sm', {
|
|
1001
|
+
return (jsx("div", { className: cn('mx-auto flex w-14 items-center justify-center rounded-sm border py-3 text-sm', {
|
|
997
1002
|
'border-blue-500': isEqualThisMonth,
|
|
998
1003
|
'border-transparent': !isEqualThisMonth,
|
|
999
1004
|
'bg-blue-500 text-white': isSelected,
|
|
@@ -1010,7 +1015,7 @@ const Year = ({ date, value, year, minDate, maxDate, dataTestId = 'year', select
|
|
|
1010
1015
|
(!maxDate || compareDates(dayDate, new Date(maxDate), 'year') <= 0), [dayDate, minDate, maxDate]);
|
|
1011
1016
|
const isSelected = useMemo(() => !!value && !compareDates(dayDate, new Date(value), 'year'), [dayDate, value]);
|
|
1012
1017
|
const isEqualThisYear = useMemo(() => !compareDates(dayDate, new Date(), 'year'), [dayDate]);
|
|
1013
|
-
return (jsx("div", { className: cn('mx-auto flex w-14 items-center justify-center rounded border py-3 text-sm', {
|
|
1018
|
+
return (jsx("div", { className: cn('mx-auto flex w-14 items-center justify-center rounded-sm border py-3 text-sm', {
|
|
1014
1019
|
'border-blue-500': isEqualThisYear,
|
|
1015
1020
|
'border-transparent': !isEqualThisYear,
|
|
1016
1021
|
'bg-blue-500 text-white': isSelected,
|
|
@@ -1079,7 +1084,7 @@ const DateSelector = ({ date, value, minDate, maxDate, locale, calendarView, set
|
|
|
1079
1084
|
setYear(year);
|
|
1080
1085
|
setCalendarView('months');
|
|
1081
1086
|
};
|
|
1082
|
-
return (jsxs("div", { className: "select-none", "data-testid": dataTestId, children: [jsxs("div", { className: "flex justify-between px-3 pt-2", children: [jsx("div", { className: "flex cursor-pointer items-center justify-center rounded-lg px-1 transition duration-100 ease-in-out hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-slate-700", onClick: editCalendarViewPage('subtract'), "data-testid": `${dataTestId}-prev`, children: jsx(ChevronLeftIcon, { className: "h-5 w-5 text-slate-400" }) }), jsxs("div", { className: "flex cursor-pointer items-center gap-1 rounded px-2 py-1 transition duration-100 ease-in-out hover:bg-slate-100 dark:hover:bg-slate-700", onClick: nextCalendarView, "data-testid": `${dataTestId}-view-selector`, children: [calendarView === 'days' && (jsx("span", { className: "capitalize", "data-testid": `${dataTestId}-month`, children: months[month].name })), calendarView !== 'years' ? (jsx("span", { className: "text-slate-500 dark:text-slate-300", "data-testid": `${dataTestId}-year`, children: year })) : (jsxs("span", { className: "text-slate-500 dark:text-slate-300", "data-testid": `${dataTestId}-year-range`, children: [yearsRange[0], " - ", yearsRange[11]] }))] }), jsx("div", { className: "flex cursor-pointer items-center justify-center rounded-lg px-1 transition duration-100 ease-in-out hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-slate-700", onClick: editCalendarViewPage('add'), "data-testid": `${dataTestId}-next`, children: jsx(ChevronRightIcon, { className: "h-5 w-5 text-slate-400" }) })] }), calendarView === 'days' ? (jsx(DaysView, { date: date, value: value, month: month, year: year, minDate: minDate, maxDate: maxDate, locale: locale, setNewDate: setNewDate, dataTestId: `${dataTestId}-days` })) : calendarView === 'months' ? (jsx(MonthsView, { date: date, value: value, year: year, minDate: minDate, maxDate: maxDate, locale: locale, selectMonth: selectMonth, dataTestId: `${dataTestId}-months` })) : (jsx(YearsView, { date: date, value: value, years: yearsRange, minDate: minDate, maxDate: maxDate, selectYear: selectYear, dataTestId: `${dataTestId}-years` }))] }));
|
|
1087
|
+
return (jsxs("div", { className: "select-none", "data-testid": dataTestId, children: [jsxs("div", { className: "flex justify-between px-3 pt-2", children: [jsx("div", { className: "flex cursor-pointer items-center justify-center rounded-lg px-1 transition duration-100 ease-in-out hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-slate-700", onClick: editCalendarViewPage('subtract'), "data-testid": `${dataTestId}-prev`, children: jsx(ChevronLeftIcon, { className: "h-5 w-5 text-slate-400" }) }), jsxs("div", { className: "flex cursor-pointer items-center gap-1 rounded-sm px-2 py-1 transition duration-100 ease-in-out hover:bg-slate-100 dark:hover:bg-slate-700", onClick: nextCalendarView, "data-testid": `${dataTestId}-view-selector`, children: [calendarView === 'days' && (jsx("span", { className: "capitalize", "data-testid": `${dataTestId}-month`, children: months[month].name })), calendarView !== 'years' ? (jsx("span", { className: "text-slate-500 dark:text-slate-300", "data-testid": `${dataTestId}-year`, children: year })) : (jsxs("span", { className: "text-slate-500 dark:text-slate-300", "data-testid": `${dataTestId}-year-range`, children: [yearsRange[0], " - ", yearsRange[11]] }))] }), jsx("div", { className: "flex cursor-pointer items-center justify-center rounded-lg px-1 transition duration-100 ease-in-out hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-slate-700", onClick: editCalendarViewPage('add'), "data-testid": `${dataTestId}-next`, children: jsx(ChevronRightIcon, { className: "h-5 w-5 text-slate-400" }) })] }), calendarView === 'days' ? (jsx(DaysView, { date: date, value: value, month: month, year: year, minDate: minDate, maxDate: maxDate, locale: locale, setNewDate: setNewDate, dataTestId: `${dataTestId}-days` })) : calendarView === 'months' ? (jsx(MonthsView, { date: date, value: value, year: year, minDate: minDate, maxDate: maxDate, locale: locale, selectMonth: selectMonth, dataTestId: `${dataTestId}-months` })) : (jsx(YearsView, { date: date, value: value, years: yearsRange, minDate: minDate, maxDate: maxDate, selectYear: selectYear, dataTestId: `${dataTestId}-years` }))] }));
|
|
1083
1088
|
};
|
|
1084
1089
|
|
|
1085
1090
|
const TimeSelector = ({ date, step = 1, minDate, maxDate, setNewDate, dataTestId = 'time-selector', }) => {
|
|
@@ -1096,7 +1101,7 @@ const TimeSelector = ({ date, step = 1, minDate, maxDate, setNewDate, dataTestId
|
|
|
1096
1101
|
const increaseMinutes = useLongPress(editDateField('minutes', step));
|
|
1097
1102
|
const decreaseMinutes = useLongPress(editDateField('minutes', -step));
|
|
1098
1103
|
const onWheel = (field) => (event) => editDateField(field, (event.deltaY < 0 ? 1 : -1) * (field === 'hours' ? 1 : step))();
|
|
1099
|
-
return (jsxs(Fragment, { children: [jsx("label", { className: "text-sm text-slate-700 dark:text-slate-300", children: "Time" }), jsxs("div", { className: "flex flex-grow justify-center gap-2", children: [jsxs("div", { className: "flex flex-col items-center justify-center", children: [jsx(ChevronUpIcon, Object.assign({ className: "h-4 w-4 rounded hover:bg-slate-100 dark:hover:bg-slate-700", onClick: editDateField('hours', 1) }, increaseHours, { "data-testid": `${dataTestId}-hours-up` })), jsx(ChevronDownIcon, Object.assign({ className: "h-4 w-4 rounded hover:bg-slate-100 dark:hover:bg-slate-700", onClick: editDateField('hours', -1) }, decreaseHours, { "data-testid": `${dataTestId}-hours-down` }))] }), jsxs("div", { className: "flex items-center rounded-lg border border-slate-100 bg-slate-100 text-right dark:border-slate-700 dark:bg-slate-800", children: [jsx("span", { className: "flex px-2", onWheel: onWheel('hours'), "data-testid": `${dataTestId}-hours`, children: date.getHours().toString().padStart(2, '0') }), jsx("span", { children: ":" }), jsx("span", { className: "flex px-2", onWheel: onWheel('minutes'), "data-testid": `${dataTestId}-minutes`, children: date.getMinutes().toString().padStart(2, '0') })] }), jsxs("div", { className: "flex flex-col items-center justify-center", children: [jsx(ChevronUpIcon, Object.assign({ className: "h-4 w-4 rounded hover:bg-slate-100 dark:hover:bg-slate-700", onClick: editDateField('minutes', step) }, increaseMinutes, { "data-testid": `${dataTestId}-minutes-up` })), jsx(ChevronDownIcon, Object.assign({ className: "h-4 w-4 rounded hover:bg-slate-100 dark:hover:bg-slate-700", onClick: editDateField('minutes', -step) }, decreaseMinutes, { "data-testid": `${dataTestId}-minutes-down` }))] })] })] }));
|
|
1104
|
+
return (jsxs(Fragment, { children: [jsx("label", { className: "text-sm text-slate-700 dark:text-slate-300", children: "Time" }), jsxs("div", { className: "flex flex-grow justify-center gap-2", children: [jsxs("div", { className: "flex flex-col items-center justify-center", children: [jsx(ChevronUpIcon, Object.assign({ className: "h-4 w-4 rounded-sm hover:bg-slate-100 dark:hover:bg-slate-700", onClick: editDateField('hours', 1) }, increaseHours, { "data-testid": `${dataTestId}-hours-up` })), jsx(ChevronDownIcon, Object.assign({ className: "h-4 w-4 rounded-sm hover:bg-slate-100 dark:hover:bg-slate-700", onClick: editDateField('hours', -1) }, decreaseHours, { "data-testid": `${dataTestId}-hours-down` }))] }), jsxs("div", { className: "flex items-center rounded-lg border border-slate-100 bg-slate-100 text-right dark:border-slate-700 dark:bg-slate-800", children: [jsx("span", { className: "flex px-2", onWheel: onWheel('hours'), "data-testid": `${dataTestId}-hours`, children: date.getHours().toString().padStart(2, '0') }), jsx("span", { children: ":" }), jsx("span", { className: "flex px-2", onWheel: onWheel('minutes'), "data-testid": `${dataTestId}-minutes`, children: date.getMinutes().toString().padStart(2, '0') })] }), jsxs("div", { className: "flex flex-col items-center justify-center", children: [jsx(ChevronUpIcon, Object.assign({ className: "h-4 w-4 rounded-sm hover:bg-slate-100 dark:hover:bg-slate-700", onClick: editDateField('minutes', step) }, increaseMinutes, { "data-testid": `${dataTestId}-minutes-up` })), jsx(ChevronDownIcon, Object.assign({ className: "h-4 w-4 rounded-sm hover:bg-slate-100 dark:hover:bg-slate-700", onClick: editDateField('minutes', -step) }, decreaseMinutes, { "data-testid": `${dataTestId}-minutes-down` }))] })] })] }));
|
|
1100
1105
|
};
|
|
1101
1106
|
|
|
1102
1107
|
const DateTimeInput = (_a) => {
|
|
@@ -1152,12 +1157,12 @@ const DateTimeInput = (_a) => {
|
|
|
1152
1157
|
setIsOpen(false);
|
|
1153
1158
|
}
|
|
1154
1159
|
};
|
|
1155
|
-
return (jsxs("div", { className: cn('relative w-full', className), ref: ref, children: [jsx(BasicInput, Object.assign({}, props, { type: "text", readOnly: true, value: displayDate !== null && displayDate !== void 0 ? displayDate : '', hasErrors: hasErrors, onClick: handleOnClick, onKeyUp: handleOnKeyUp, clearable: clearable && !!displayDate, onClear: clearDate, suffixIcon: (type === null || type === void 0 ? void 0 : type.includes('date')) ? CalendarIcon : ClockIcon, onSuffixIconClick: handleOnClick, dataTestId: dataTestId })), isOpen && (jsxs("div", { className: "absolute z-20 mt-2 flex origin-top-left flex-col rounded-md border bg-white shadow duration-200 dark:border-slate-700 dark:bg-slate-900 dark:text-white", tabIndex: 0, onBlur: handleOnBlur, ref: calendarRef, "data-testid": `${dataTestId}-popup`, children: [(type === null || type === void 0 ? void 0 : type.includes('date')) && (jsx(DateSelector, { date: date, value: value, minDate: minDate, maxDate: maxDate, locale: displayLocale, calendarView: calendarView, setCalendarView: setCalendarView, setNewDate: setNewDate, dataTestId: `${dataTestId}-date-selector` })), calendarView === 'days' && (jsxs("div", { className: "flex
|
|
1160
|
+
return (jsxs("div", { className: cn('relative w-full', className), ref: ref, children: [jsx(BasicInput, Object.assign({}, props, { type: "text", readOnly: true, value: displayDate !== null && displayDate !== void 0 ? displayDate : '', hasErrors: hasErrors, onClick: handleOnClick, onKeyUp: handleOnKeyUp, clearable: clearable && !!displayDate, onClear: clearDate, suffixIcon: (type === null || type === void 0 ? void 0 : type.includes('date')) ? CalendarIcon : ClockIcon, onSuffixIconClick: handleOnClick, dataTestId: dataTestId })), isOpen && (jsxs("div", { className: "absolute z-20 mt-2 flex origin-top-left flex-col rounded-md border bg-white shadow-sm duration-200 dark:border-slate-700 dark:bg-slate-900 dark:text-white", tabIndex: 0, onBlur: handleOnBlur, ref: calendarRef, "data-testid": `${dataTestId}-popup`, children: [(type === null || type === void 0 ? void 0 : type.includes('date')) && (jsx(DateSelector, { date: date, value: value, minDate: minDate, maxDate: maxDate, locale: displayLocale, calendarView: calendarView, setCalendarView: setCalendarView, setNewDate: setNewDate, dataTestId: `${dataTestId}-date-selector` })), calendarView === 'days' && (jsxs("div", { className: "flex items-center justify-end gap-2 px-3 py-2 select-none", "data-testid": `${dataTestId}-time-selector`, children: [(type === null || type === void 0 ? void 0 : type.includes('time')) && (jsx(TimeSelector, { date: date, step: step, minDate: minDate, maxDate: maxDate, setNewDate: setNewDate, dataTestId: `${dataTestId}-time-selector` })), jsx("div", { className: "cursor-pointer rounded-lg border border-transparent p-1 text-sm font-bold text-blue-600 uppercase transition duration-100 ease-in-out hover:bg-slate-100 dark:text-blue-500 dark:hover:bg-slate-700", onClick: () => setIsOpen(false), "data-testid": `${dataTestId}-ok`, children: "OK" })] }))] }))] }));
|
|
1156
1161
|
};
|
|
1157
1162
|
|
|
1158
1163
|
const ListContent = (_a) => {
|
|
1159
1164
|
var { className, dataTestId = 'list' } = _a, props = __rest(_a, ["className", "dataTestId"]);
|
|
1160
|
-
return (jsx(Block, Object.assign({ className: cn('z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100
|
|
1165
|
+
return (jsx(Block, Object.assign({ className: cn('bg-background z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 p-1 text-slate-700 shadow-md dark:border-slate-700 dark:text-white', className), dataTestId: dataTestId }, props)));
|
|
1161
1166
|
};
|
|
1162
1167
|
const labelSizeClasses = {
|
|
1163
1168
|
small: 'p-1 text-sm',
|
|
@@ -1165,7 +1170,7 @@ const labelSizeClasses = {
|
|
|
1165
1170
|
};
|
|
1166
1171
|
const ListItem = (_a) => {
|
|
1167
1172
|
var { className, size = 'medium', inset, dataTestId = 'list-item' } = _a, props = __rest(_a, ["className", "size", "inset", "dataTestId"]);
|
|
1168
|
-
return (jsx(Flex, Object.assign({ className: cn(labelSizeClasses[size], 'relative cursor-default
|
|
1173
|
+
return (jsx(Flex, Object.assign({ className: cn(labelSizeClasses[size], 'relative cursor-default gap-2 rounded-md outline-hidden select-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-700', inset && 'pl-8', className), align: "center", dataTestId: dataTestId }, props)));
|
|
1169
1174
|
};
|
|
1170
1175
|
const ListLabel = (_a) => {
|
|
1171
1176
|
var { className, size = 'medium', inset, dataTestId = 'list-label' } = _a, props = __rest(_a, ["className", "size", "inset", "dataTestId"]);
|
|
@@ -1355,7 +1360,7 @@ const SelectInput = (_a) => {
|
|
|
1355
1360
|
}, dataTestId: option.dataTestId, children: jsx("span", { children: renderItem(option, isNotNullOrUndefined(selectedMap[option.id])) }) }));
|
|
1356
1361
|
}, [ItemComponent, handleOnSelect, multiple, renderItem, selectedMap]);
|
|
1357
1362
|
return (jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [jsx(DropdownMenu.Trigger, { className: cn('w-full', className), dataTestId: `${dataTestId}-trigger`, children: jsx(TextInput, Object.assign({ className: "[&>div>*]:cursor-pointer", inputClassName: "text-left" }, props, { value: text !== null && text !== void 0 ? text : '', clearable: clearable && !!selectedItems.length, onClear: handleOnClear, suffixIcon: ChevronDownIcon, onSuffixIconClick: () => setOpen((open) => !open), readOnly: true, dataTestId: dataTestId })) }), jsxs(DropdownMenu.Content, { className: "flex max-h-80 w-[calc(var(--radix-popper-anchor-width))] flex-col overflow-hidden", dataTestId: `${dataTestId}-content`, children: [search && (jsxs(Fragment, { children: [jsx(TextInput, { value: searchValue, placeholder: "Search...", size: props.size, onChange: handleOnSearchValueChange, onKeyUp: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), clearable: !!searchValue.length, onClear: clearSearchValue, dataTestId: `${dataTestId}-search` }), jsx(DropdownMenu.Separator, { className: "w-full", dataTestId: `${dataTestId}-separator` })] })), filteredItems.length === 0 &&
|
|
1358
|
-
(allowAddition && searchValue ? (jsxs("button", { className: "rounded bg-slate-100 py-1.5 text-center hover:bg-slate-200 dark:bg-slate-900/30 dark:hover:bg-slate-700/30", onClick: handleOnAddItemClicked, "data-testid": `${dataTestId}-add-button`, children: ["Add '", searchValue, "'"] })) : (jsx("div", { className: "py-1.5 text-center text-slate-500", "data-testid": `${dataTestId}-no-items`, children: "No items" }))), jsx(GroupComponent, { className: "flex flex-col gap-1 overflow-auto", value: !multiple && selectedItems.length ? String(selectedItems[0].id) : undefined, dataTestId: `${dataTestId}-group`, children: filteredItems.map((item, index) => item.group ? (jsxs(Flex, { className: "gap-1", direction: "column", fullWidth: true, children: [jsx(DropdownMenu.Label, { className: "sticky top-0 z-[51] w-full rounded-md border bg-white py-1 dark:bg-slate-900", dataTestId: `${dataTestId}-group-label-${item.id}`, children: item.label }), item.items.map((subItem) => (jsx(RenderOption, Object.assign({}, subItem, { dataTestId: `${dataTestId}-item-${subItem.id}` }), subItem.id))), index < filteredItems.length - 1 && (jsx("div", { className: "mb-1 h-px w-full bg-slate-200 dark:bg-slate-700" }))] }, item.id)) : (jsx(RenderOption, Object.assign({}, item, { dataTestId: `${dataTestId}-item-${item.id}` }), item.id))) })] })] }));
|
|
1363
|
+
(allowAddition && searchValue ? (jsxs("button", { className: "rounded-sm bg-slate-100 py-1.5 text-center hover:bg-slate-200 dark:bg-slate-900/30 dark:hover:bg-slate-700/30", onClick: handleOnAddItemClicked, "data-testid": `${dataTestId}-add-button`, children: ["Add '", searchValue, "'"] })) : (jsx("div", { className: "py-1.5 text-center text-slate-500", "data-testid": `${dataTestId}-no-items`, children: "No items" }))), jsx(GroupComponent, { className: "flex flex-col gap-1 overflow-auto", value: !multiple && selectedItems.length ? String(selectedItems[0].id) : undefined, dataTestId: `${dataTestId}-group`, children: filteredItems.map((item, index) => item.group ? (jsxs(Flex, { className: "gap-1", direction: "column", fullWidth: true, children: [jsx(DropdownMenu.Label, { className: "sticky top-0 z-[51] w-full rounded-md border bg-white py-1 dark:bg-slate-900", dataTestId: `${dataTestId}-group-label-${item.id}`, children: item.label }), item.items.map((subItem) => (jsx(RenderOption, Object.assign({}, subItem, { dataTestId: `${dataTestId}-item-${subItem.id}` }), subItem.id))), index < filteredItems.length - 1 && (jsx("div", { className: "mb-1 h-px w-full bg-slate-200 dark:bg-slate-700" }))] }, item.id)) : (jsx(RenderOption, Object.assign({}, item, { dataTestId: `${dataTestId}-item-${item.id}` }), item.id))) })] })] }));
|
|
1359
1364
|
};
|
|
1360
1365
|
function isNotNullOrUndefined(value) {
|
|
1361
1366
|
return value !== null && value !== undefined;
|
|
@@ -1376,7 +1381,7 @@ const FileInput = (_a) => {
|
|
|
1376
1381
|
}, type: "file", hidden: true, accept: accept, onChange: handleFileChange, "data-testid": `${dataTestId}-hidden` })] }));
|
|
1377
1382
|
};
|
|
1378
1383
|
|
|
1379
|
-
const FormGroup = ({ className, label, children }) => (jsxs(Flex, { className: cn('relative !gap-4 rounded-lg border p-4 dark:border-slate-700', className), direction: "column", fullWidth: true, children: [jsx("div", { className: "absolute
|
|
1384
|
+
const FormGroup = ({ className, label, children }) => (jsxs(Flex, { className: cn('relative !gap-4 rounded-lg border p-4 dark:border-slate-700', className), direction: "column", fullWidth: true, children: [jsx("div", { className: "absolute top-0 right-0 rounded-tr-lg rounded-bl-lg bg-slate-500 px-2 py-1 font-medium text-white dark:bg-slate-900 dark:text-white", children: label }), children] }));
|
|
1380
1385
|
|
|
1381
1386
|
function withForm(Component) {
|
|
1382
1387
|
return (props) => {
|
|
@@ -1500,18 +1505,13 @@ const PaginationItem = (_a) => {
|
|
|
1500
1505
|
}), align: "center", justify: "center", fullHeight: true }, props, { children: children })));
|
|
1501
1506
|
};
|
|
1502
1507
|
|
|
1503
|
-
const Spinner = ({ className, fullScreen, dataTestId = 'spinner' }) => (jsx("div", { className: cn('flex w-full items-center justify-center bg-white dark:bg-slate-900', {
|
|
1504
|
-
'h-screen': fullScreen,
|
|
1505
|
-
'h-full': !fullScreen,
|
|
1506
|
-
}, className), "data-testid": dataTestId, children: jsxs("svg", { className: "h-8 w-8 animate-spin text-black dark:text-white", fill: "none", viewBox: "0 0 24 24", children: [jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }) }));
|
|
1507
|
-
|
|
1508
1508
|
const $Table = (_a) => {
|
|
1509
1509
|
var { children, className, dataTestId = 'table' } = _a, props = __rest(_a, ["children", "className", "dataTestId"]);
|
|
1510
1510
|
return (jsx(Flex, { className: cn('overflow-auto rounded-lg', className), fullWidth: true, children: jsx("table", Object.assign({ className: "min-w-full divide-y divide-slate-200 dark:divide-slate-800 dark:text-white", "data-testid": dataTestId }, props, { children: children })) }));
|
|
1511
1511
|
};
|
|
1512
1512
|
const TableHead = (_a) => {
|
|
1513
1513
|
var { children, className, dataTestId = 'table-head' } = _a, props = __rest(_a, ["children", "className", "dataTestId"]);
|
|
1514
|
-
return (jsx("thead", Object.assign({ className: cn('border-b
|
|
1514
|
+
return (jsx("thead", Object.assign({ className: cn('bg-background border-b text-slate-800 dark:border-slate-700 dark:text-slate-300', className), "data-testid": dataTestId }, props, { children: children })));
|
|
1515
1515
|
};
|
|
1516
1516
|
const TableHeadCell = (_a) => {
|
|
1517
1517
|
var { children, className, dataTestId = 'table-head-cell' } = _a, props = __rest(_a, ["children", "className", "dataTestId"]);
|
|
@@ -1519,7 +1519,7 @@ const TableHeadCell = (_a) => {
|
|
|
1519
1519
|
};
|
|
1520
1520
|
const TableBody = (_a) => {
|
|
1521
1521
|
var { children, className, dataTestId = 'table-body' } = _a, props = __rest(_a, ["children", "className", "dataTestId"]);
|
|
1522
|
-
return (jsx("tbody", Object.assign({ className: cn('divide-y divide-slate-200
|
|
1522
|
+
return (jsx("tbody", Object.assign({ className: cn('bg-background divide-y divide-slate-200 dark:divide-slate-700', className), "data-testid": dataTestId }, props, { children: children })));
|
|
1523
1523
|
};
|
|
1524
1524
|
const TableRow = (_a) => {
|
|
1525
1525
|
var { children, dataTestId = 'table-row' } = _a, props = __rest(_a, ["children", "dataTestId"]);
|
|
@@ -1531,7 +1531,7 @@ const TableCell = (_a) => {
|
|
|
1531
1531
|
};
|
|
1532
1532
|
const TableFooter = (_a) => {
|
|
1533
1533
|
var { children, className, dataTestId = 'table-footer' } = _a, props = __rest(_a, ["children", "className", "dataTestId"]);
|
|
1534
|
-
return (jsx("tfoot", Object.assign({ className: cn('bg-
|
|
1534
|
+
return (jsx("tfoot", Object.assign({ className: cn('bg-background text-slate-800 dark:text-slate-300', className), "data-testid": dataTestId }, props, { children: children })));
|
|
1535
1535
|
};
|
|
1536
1536
|
const Table = Object.assign($Table, {
|
|
1537
1537
|
Head: TableHead,
|
|
@@ -1629,7 +1629,7 @@ function DataTable({ className, columns, rows, sorting, pagination, actions = []
|
|
|
1629
1629
|
}
|
|
1630
1630
|
const ExpandButton = ({ folded, foldComponent, unfoldComponent, onClick, dataTestId, }) => {
|
|
1631
1631
|
const Icon = folded ? unfoldComponent : foldComponent;
|
|
1632
|
-
return (jsx(Icon, { className: "h-6 w-6 cursor-pointer rounded p-1 hover:bg-slate-300 hover:dark:bg-slate-600", onClick: onClick, "data-testid": dataTestId }));
|
|
1632
|
+
return (jsx(Icon, { className: "h-6 w-6 cursor-pointer rounded-sm p-1 hover:bg-slate-300 hover:dark:bg-slate-600", onClick: onClick, "data-testid": dataTestId }));
|
|
1633
1633
|
};
|
|
1634
1634
|
|
|
1635
1635
|
const $Dialog = (props) => (jsx(DialogPrimitive.Root, Object.assign({}, props)));
|
|
@@ -1644,7 +1644,7 @@ const DialogOverlay = (_a) => {
|
|
|
1644
1644
|
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
|
1645
1645
|
const DialogContent = (_a) => {
|
|
1646
1646
|
var { className, fullScreen, children, dataTestId = 'dialog-content' } = _a, props = __rest(_a, ["className", "fullScreen", "children", "dataTestId"]);
|
|
1647
|
-
return (jsxs(DialogPortal, { children: [jsx(DialogOverlay, { dataTestId: `${dataTestId}-overlay` }), jsxs(DialogPrimitive.Content, Object.assign({ className: cn('bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]', 'fixed
|
|
1647
|
+
return (jsxs(DialogPortal, { children: [jsx(DialogOverlay, { dataTestId: `${dataTestId}-overlay` }), jsxs(DialogPrimitive.Content, Object.assign({ className: cn('bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]', 'fixed top-[50%] left-[50%] z-50 flex max-h-[95dvh] w-full max-w-lg translate-x-[-50%] translate-y-[-50%] flex-col gap-4 rounded-lg border p-4 shadow-lg duration-200', className, fullScreen && 'h-full max-h-none w-full max-w-none rounded-none'), "aria-describedby": "dialog-content", "data-testid": dataTestId }, props, { children: [children, jsx(DialogPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-2 right-2 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", asChild: true, "data-testid": `${dataTestId}-close-button`, children: jsx(Button, { prefixIcon: XIcon, size: "small", variant: "text" }) }), jsx(DialogPrimitive.Description, { className: "hidden" })] }))] }));
|
|
1648
1648
|
};
|
|
1649
1649
|
DialogContent.displayName = DialogPrimitive.Content.displayName;
|
|
1650
1650
|
const DialogHeader = (_a) => {
|
|
@@ -1679,7 +1679,15 @@ const Dialog = Object.assign($Dialog, {
|
|
|
1679
1679
|
Description: DialogDescription,
|
|
1680
1680
|
});
|
|
1681
1681
|
|
|
1682
|
-
const ConfirmDialog = ({ open, title, children, yesLabel, noLabel, onConfirm, onClose, dataTestId = 'confirm-dialog', }) =>
|
|
1682
|
+
const ConfirmDialog = ({ open, title, children, yesLabel, noLabel, onConfirm, onClose, dataTestId = 'confirm-dialog', }) => {
|
|
1683
|
+
const [loading, setLoading] = useState(false);
|
|
1684
|
+
const handleConfirm = () => __awaiter(void 0, void 0, void 0, function* () {
|
|
1685
|
+
setLoading(true);
|
|
1686
|
+
yield onConfirm();
|
|
1687
|
+
setLoading(false);
|
|
1688
|
+
});
|
|
1689
|
+
return (jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(Dialog.Content, { dataTestId: `${dataTestId}-content`, children: [jsx(Dialog.Header, { dataTestId: `${dataTestId}-header`, children: jsx(Dialog.Title, { dataTestId: `${dataTestId}-title`, children: title }) }), children, jsxs(Dialog.Footer, { dataTestId: `${dataTestId}-footer`, children: [jsx(Dialog.Close, { asChild: true, children: jsx(Button, { color: "red", disabled: loading, "data-testid": `${dataTestId}-no-button`, children: noLabel !== null && noLabel !== void 0 ? noLabel : 'No' }) }), jsx(Button, { color: "green", loading: loading, onClick: handleConfirm, "data-testid": `${dataTestId}-yes-button`, children: yesLabel !== null && yesLabel !== void 0 ? yesLabel : 'Yes' })] })] }) }));
|
|
1690
|
+
};
|
|
1683
1691
|
|
|
1684
1692
|
const SheetTrigger = DialogPrimitive.Trigger;
|
|
1685
1693
|
const SheetClose = DialogPrimitive.Close;
|
|
@@ -1704,7 +1712,7 @@ const sheetVariants = cva('fixed flex flex-col z-50 gap-4 bg-background p-4 shad
|
|
|
1704
1712
|
});
|
|
1705
1713
|
const SheetContent = (_a) => {
|
|
1706
1714
|
var { side = 'right', className, children, dataTestId = 'sheet-content' } = _a, props = __rest(_a, ["side", "className", "children", "dataTestId"]);
|
|
1707
|
-
return (jsxs(SheetPortal, { children: [jsx(SheetOverlay, { dataTestId: `${dataTestId}-overlay` }), jsxs(DialogPrimitive.Content, Object.assign({ className: cn(sheetVariants({ side }), className), "data-testid": dataTestId }, props, { children: [children, jsx(DialogPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute
|
|
1715
|
+
return (jsxs(SheetPortal, { children: [jsx(SheetOverlay, { dataTestId: `${dataTestId}-overlay` }), jsxs(DialogPrimitive.Content, Object.assign({ className: cn(sheetVariants({ side }), className), "data-testid": dataTestId }, props, { children: [children, jsx(DialogPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-2 right-2 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", asChild: true, "data-testid": `${dataTestId}-close-button`, children: jsx(Button, { prefixIcon: XIcon, size: "small", variant: "text" }) }), jsx(DialogPrimitive.Description, { className: "hidden" })] }))] }));
|
|
1708
1716
|
};
|
|
1709
1717
|
SheetContent.displayName = DialogPrimitive.Content.displayName;
|
|
1710
1718
|
const SheetHeader = (_a) => {
|
|
@@ -1741,7 +1749,7 @@ const Sheet = Object.assign(DialogPrimitive.Root, {
|
|
|
1741
1749
|
|
|
1742
1750
|
const FormDialog = ({ className, formClassName, open, title, form, children, submitLabel = 'Submit', cancelLabel = 'Cancel', extraAction, as: As = Sheet, onSubmit, onInvalid, onClose, dataTestId = 'form-dialog', }) => {
|
|
1743
1751
|
const id = useId();
|
|
1744
|
-
return (jsx(As, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(As.Content, { className: className, dataTestId: `${dataTestId}-content`, children: [jsx(As.Header, { dataTestId: `${dataTestId}-header`, children: jsx(As.Title, { dataTestId: `${dataTestId}-title`, children: title }) }), jsx(FormProvider, Object.assign({}, form, { children: jsx("form", { id: `form-${id}`, className: cn('flex h-full w-full flex-col gap-2 overflow-auto', formClassName), onSubmit: form.handleSubmit(onSubmit, onInvalid), "data-testid": `${dataTestId}-form`, children: children }) })), jsxs(As.Footer, { className: "w-full sm:justify-between", dataTestId: `${dataTestId}-footer`, children: [extraAction, jsxs(As.Footer, { className: "ml-auto", dataTestId: `${dataTestId}-actions`, children: [jsx(As.Close, { asChild: true, children: jsx(Button, { color: "red", dataTestId: `${dataTestId}-cancel-button`, children: cancelLabel }) }), jsx(Button, { color: "green", type: "submit", form: `form-${id}`,
|
|
1752
|
+
return (jsx(As, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(As.Content, { className: className, dataTestId: `${dataTestId}-content`, children: [jsx(As.Header, { dataTestId: `${dataTestId}-header`, children: jsx(As.Title, { dataTestId: `${dataTestId}-title`, children: title }) }), jsx(FormProvider, Object.assign({}, form, { children: jsx("form", { id: `form-${id}`, className: cn('flex h-full w-full flex-col gap-2 overflow-auto', formClassName), onSubmit: form.handleSubmit(onSubmit, onInvalid), "data-testid": `${dataTestId}-form`, children: children }) })), jsxs(As.Footer, { className: "w-full sm:justify-between", dataTestId: `${dataTestId}-footer`, children: [extraAction, jsxs(As.Footer, { className: "ml-auto", dataTestId: `${dataTestId}-actions`, children: [jsx(As.Close, { asChild: true, children: jsx(Button, { color: "red", dataTestId: `${dataTestId}-cancel-button`, disabled: form.formState.isSubmitting, children: cancelLabel }) }), jsx(Button, { color: "green", type: "submit", form: `form-${id}`, loading: form.formState.isSubmitting, dataTestId: `${dataTestId}-submit-button`, children: submitLabel })] })] })] }) }));
|
|
1745
1753
|
};
|
|
1746
1754
|
|
|
1747
1755
|
function ListSorter({ className, items, dataTestId = 'list-sorter', idResolver, renderer, onChange, }) {
|
|
@@ -1772,14 +1780,19 @@ function SortableItem({ item, index, dataTestId, renderer, }) {
|
|
|
1772
1780
|
|
|
1773
1781
|
function ListSorterDialog({ className, open, title, items, idResolver, renderer, cancelLabel, submitLabel, onSubmit, onClose, dataTestId = 'list-sorter-dialog', }) {
|
|
1774
1782
|
const [sortedItems, setSortedItems] = useState(structuredClone(items));
|
|
1783
|
+
const [loading, setLoading] = useState(false);
|
|
1775
1784
|
useEffect(() => {
|
|
1776
1785
|
if (!open) {
|
|
1777
1786
|
setSortedItems(structuredClone(items));
|
|
1778
1787
|
}
|
|
1779
1788
|
}, [items, open]);
|
|
1780
|
-
const
|
|
1781
|
-
|
|
1782
|
-
|
|
1789
|
+
const handleSubmit = () => __awaiter(this, void 0, void 0, function* () {
|
|
1790
|
+
setLoading(true);
|
|
1791
|
+
yield onSubmit(sortedItems);
|
|
1792
|
+
setLoading(false);
|
|
1793
|
+
});
|
|
1794
|
+
const customRenderer = (item, index, listeners) => (jsxs(Flex, { align: "center", className: "gap-4 p-4 focus:outline-hidden dark:bg-slate-900 hover:dark:bg-slate-800", "data-testid": `${dataTestId}-item-${index}`, children: [jsx(Flex, Object.assign({ align: "center", justify: "center", className: "cursor-move rounded-lg p-2 hover:bg-slate-200 dark:hover:bg-slate-700", "data-testid": `${dataTestId}-drag-handle-${index}` }, listeners, { children: jsx(ArrowUpDownIcon, { className: "h-5 w-5" }) })), renderer(item, index, listeners)] }));
|
|
1795
|
+
return (jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(Dialog.Content, { className: className, onPointerDownOutside: (event) => event.preventDefault(), dataTestId: `${dataTestId}-content`, children: [jsx(Dialog.Header, { dataTestId: `${dataTestId}-header`, children: jsx(Dialog.Title, { dataTestId: `${dataTestId}-title`, children: title }) }), jsx(ListSorter, { className: "divide-y overflow-auto rounded-lg border dark:divide-slate-700 dark:border-slate-700 dark:text-white", items: sortedItems, idResolver: idResolver, renderer: customRenderer, onChange: setSortedItems, dataTestId: `${dataTestId}-sorter` }), jsxs(Dialog.Footer, { dataTestId: `${dataTestId}-footer`, children: [jsx(Dialog.Close, { asChild: true, children: jsx(Button, { color: "red", disabled: loading, dataTestId: `${dataTestId}-cancel-button`, children: cancelLabel !== null && cancelLabel !== void 0 ? cancelLabel : 'Cancel' }) }), jsx(Button, { color: "green", loading: loading, onClick: handleSubmit, dataTestId: `${dataTestId}-submit-button`, children: submitLabel !== null && submitLabel !== void 0 ? submitLabel : 'Submit' })] })] }) }));
|
|
1783
1796
|
}
|
|
1784
1797
|
|
|
1785
1798
|
const PdfViewerDialog = ({ open, title, url, data, onClose, dataTestId = 'pdf-viewer-dialog', }) => {
|
|
@@ -1866,22 +1879,22 @@ const SidebarComp = (_a) => {
|
|
|
1866
1879
|
var { side = 'left', variant = 'sidebar', collapsible = 'offcanvas', className, children, dataTestId = 'sidebar' } = _a, props = __rest(_a, ["side", "variant", "collapsible", "className", "children", "dataTestId"]);
|
|
1867
1880
|
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
|
|
1868
1881
|
if (collapsible === 'none') {
|
|
1869
|
-
return (jsx("div", Object.assign({ "data-testid": dataTestId, className: cn('bg-sidebar text-sidebar-foreground flex h-full w-
|
|
1882
|
+
return (jsx("div", Object.assign({ "data-testid": dataTestId, className: cn('bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col', className) }, props, { children: children })));
|
|
1870
1883
|
}
|
|
1871
1884
|
if (isMobile) {
|
|
1872
|
-
return (jsx(Sheet, Object.assign({ open: openMobile, onOpenChange: setOpenMobile }, props, { children: jsx(Sheet.Content, { "data-testid": dataTestId, "data-sidebar": "sidebar", "data-mobile": "true", className: "bg-sidebar text-sidebar-foreground w-
|
|
1885
|
+
return (jsx(Sheet, Object.assign({ open: openMobile, onOpenChange: setOpenMobile }, props, { children: jsx(Sheet.Content, { "data-testid": dataTestId, "data-sidebar": "sidebar", "data-mobile": "true", className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden", style: {
|
|
1873
1886
|
'--sidebar-width': SIDEBAR_WIDTH_MOBILE,
|
|
1874
1887
|
}, side: side, children: jsx("div", { className: "flex h-full w-full flex-col", children: children }) }) })));
|
|
1875
1888
|
}
|
|
1876
|
-
return (jsxs("div", { className: "text-sidebar-foreground group peer hidden md:block", "data-state": state, "data-collapsible": state === 'collapsed' ? collapsible : '', "data-variant": variant, "data-side": side, children: [jsx("div", { className: cn('relative
|
|
1877
|
-
? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.
|
|
1878
|
-
: 'group-data-[collapsible=icon]:w-
|
|
1889
|
+
return (jsxs("div", { className: "text-sidebar-foreground group peer hidden md:block", "data-state": state, "data-collapsible": state === 'collapsed' ? collapsible : '', "data-variant": variant, "data-side": side, children: [jsx("div", { className: cn('relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear', 'group-data-[collapsible=offcanvas]:w-0', 'group-data-[side=right]:rotate-180', variant === 'floating' || variant === 'inset'
|
|
1890
|
+
? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.2))]'
|
|
1891
|
+
: 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)') }), jsx("div", Object.assign({ className: cn('fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex', side === 'left'
|
|
1879
1892
|
? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
|
|
1880
1893
|
: 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
|
|
1881
1894
|
// Adjust the padding for floating and inset variants.
|
|
1882
1895
|
variant === 'floating' || variant === 'inset'
|
|
1883
|
-
? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.
|
|
1884
|
-
: '
|
|
1896
|
+
? 'p-2 pr-0 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.2)_+2px)]'
|
|
1897
|
+
: 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l', className) }, props, { "data-testid": dataTestId, "data-state": state, children: jsx("div", { "data-sidebar": "sidebar", className: "bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm", children: children }) }))] }));
|
|
1885
1898
|
};
|
|
1886
1899
|
SidebarComp.displayName = 'Sidebar';
|
|
1887
1900
|
const SidebarTrigger = (_a) => {
|
|
@@ -1896,12 +1909,12 @@ SidebarTrigger.displayName = 'SidebarTrigger';
|
|
|
1896
1909
|
const SidebarRail = (_a) => {
|
|
1897
1910
|
var { className, dataTestId = 'sidebar-rail' } = _a, props = __rest(_a, ["className", "dataTestId"]);
|
|
1898
1911
|
const { toggleSidebar } = useSidebar();
|
|
1899
|
-
return (jsx("button", Object.assign({ "data-testid": dataTestId, "data-sidebar": "rail", "aria-label": "Toggle Sidebar", tabIndex: -1, onClick: toggleSidebar, title: "Toggle Sidebar", className: cn('hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px]
|
|
1912
|
+
return (jsx("button", Object.assign({ "data-testid": dataTestId, "data-sidebar": "rail", "aria-label": "Toggle Sidebar", tabIndex: -1, onClick: toggleSidebar, title: "Toggle Sidebar", className: cn('hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex', '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize', '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize', 'group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full', '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2', '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2', className) }, props)));
|
|
1900
1913
|
};
|
|
1901
1914
|
SidebarRail.displayName = 'SidebarRail';
|
|
1902
1915
|
const SidebarInset = (_a) => {
|
|
1903
1916
|
var { className, dataTestId = 'sidebar-inset' } = _a, props = __rest(_a, ["className", "dataTestId"]);
|
|
1904
|
-
return (jsx("main", Object.assign({ "data-testid": dataTestId, className: cn('bg-background relative flex
|
|
1917
|
+
return (jsx("main", Object.assign({ "data-testid": dataTestId, className: cn('bg-background relative flex w-full flex-1 flex-col', 'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2', className) }, props)));
|
|
1905
1918
|
};
|
|
1906
1919
|
SidebarInset.displayName = 'SidebarInset';
|
|
1907
1920
|
const SidebarInput = (_a) => {
|
|
@@ -1937,20 +1950,20 @@ SidebarGroup.displayName = 'SidebarGroup';
|
|
|
1937
1950
|
const SidebarGroupLabel = (_a) => {
|
|
1938
1951
|
var { className, asChild = false, dataTestId = 'sidebar-group-label' } = _a, props = __rest(_a, ["className", "asChild", "dataTestId"]);
|
|
1939
1952
|
const Comp = asChild ? Slot : 'div';
|
|
1940
|
-
return (jsx(Comp, Object.assign({ "data-testid": dataTestId, "data-sidebar": "group-label", className: cn('text-sidebar-foreground/70 ring-sidebar-ring flex h-
|
|
1953
|
+
return (jsx(Comp, Object.assign({ "data-testid": dataTestId, "data-sidebar": "group-label", className: cn('text-sidebar-foreground/70 ring-sidebar-ring flex h-9 shrink-0 items-center rounded-md px-2 text-sm font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0', className) }, props)));
|
|
1941
1954
|
};
|
|
1942
1955
|
SidebarGroupLabel.displayName = 'SidebarGroupLabel';
|
|
1943
1956
|
const SidebarGroupAction = (_a) => {
|
|
1944
1957
|
var { className, asChild = false, dataTestId = 'sidebar-group-action' } = _a, props = __rest(_a, ["className", "asChild", "dataTestId"]);
|
|
1945
1958
|
const Comp = asChild ? Slot : 'button';
|
|
1946
|
-
return (jsx(Comp, Object.assign({ "data-testid": dataTestId, "data-sidebar": "group-action", className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute
|
|
1959
|
+
return (jsx(Comp, Object.assign({ "data-testid": dataTestId, "data-sidebar": "group-action", className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
|
|
1947
1960
|
// Increases the hit area of the button on mobile.
|
|
1948
1961
|
'after:absolute after:-inset-2 after:md:hidden', 'group-data-[collapsible=icon]:hidden', className) }, props)));
|
|
1949
1962
|
};
|
|
1950
1963
|
SidebarGroupAction.displayName = 'SidebarGroupAction';
|
|
1951
1964
|
const SidebarGroupContent = (_a) => {
|
|
1952
1965
|
var { className, dataTestId = 'sidebar-group-content' } = _a, props = __rest(_a, ["className", "dataTestId"]);
|
|
1953
|
-
return (jsx("div", Object.assign({ "data-testid": dataTestId, "data-sidebar": "group-content", className: cn('w-full
|
|
1966
|
+
return (jsx("div", Object.assign({ "data-testid": dataTestId, "data-sidebar": "group-content", className: cn('w-full', className) }, props)));
|
|
1954
1967
|
};
|
|
1955
1968
|
SidebarGroupContent.displayName = 'SidebarGroupContent';
|
|
1956
1969
|
const SidebarMenu = (_a) => {
|
|
@@ -1963,16 +1976,16 @@ const SidebarMenuItem = (_a) => {
|
|
|
1963
1976
|
return (jsx("li", Object.assign({ "data-testid": dataTestId, "data-sidebar": "menu-item", className: cn('group/menu-item relative', className) }, props)));
|
|
1964
1977
|
};
|
|
1965
1978
|
SidebarMenuItem.displayName = 'SidebarMenuItem';
|
|
1966
|
-
const sidebarMenuButtonVariants = cva('peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left
|
|
1979
|
+
const sidebarMenuButtonVariants = cva('cursor-pointer peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', {
|
|
1967
1980
|
variants: {
|
|
1968
1981
|
variant: {
|
|
1969
1982
|
default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
|
|
1970
|
-
outline: 'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[
|
|
1983
|
+
outline: 'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]',
|
|
1971
1984
|
},
|
|
1972
1985
|
size: {
|
|
1973
|
-
default: 'h-
|
|
1974
|
-
sm: 'h-7 text-
|
|
1975
|
-
lg: 'h-12 text-
|
|
1986
|
+
default: 'h-9',
|
|
1987
|
+
sm: 'h-7 text-sm',
|
|
1988
|
+
lg: 'h-12 text-md group-data-[collapsible=icon]:!p-0',
|
|
1976
1989
|
},
|
|
1977
1990
|
},
|
|
1978
1991
|
defaultVariants: {
|
|
@@ -1999,7 +2012,7 @@ SidebarMenuButton.displayName = 'SidebarMenuButton';
|
|
|
1999
2012
|
const SidebarMenuAction = (_a) => {
|
|
2000
2013
|
var { className, asChild = false, showOnHover = false, dataTestId = 'sidebar-menu-action' } = _a, props = __rest(_a, ["className", "asChild", "showOnHover", "dataTestId"]);
|
|
2001
2014
|
const Comp = asChild ? Slot : 'button';
|
|
2002
|
-
return (jsx(Comp, Object.assign({ "data-testid": dataTestId, "data-sidebar": "menu-action", className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute
|
|
2015
|
+
return (jsx(Comp, Object.assign({ "data-testid": dataTestId, "data-sidebar": "menu-action", className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
|
|
2003
2016
|
// Increases the hit area of the button on mobile.
|
|
2004
2017
|
'after:absolute after:-inset-2 after:md:hidden', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', showOnHover &&
|
|
2005
2018
|
'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0', className) }, props)));
|
|
@@ -2007,7 +2020,7 @@ const SidebarMenuAction = (_a) => {
|
|
|
2007
2020
|
SidebarMenuAction.displayName = 'SidebarMenuAction';
|
|
2008
2021
|
const SidebarMenuBadge = (_a) => {
|
|
2009
2022
|
var { className, dataTestId = 'sidebar-menu-badge' } = _a, props = __rest(_a, ["className", "dataTestId"]);
|
|
2010
|
-
return (jsx("div", Object.assign({ "data-testid": dataTestId, "data-sidebar": "menu-badge", className: cn('text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5
|
|
2023
|
+
return (jsx("div", Object.assign({ "data-testid": dataTestId, "data-sidebar": "menu-badge", className: cn('text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none', 'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', className) }, props)));
|
|
2011
2024
|
};
|
|
2012
2025
|
SidebarMenuBadge.displayName = 'SidebarMenuBadge';
|
|
2013
2026
|
const SidebarMenuSkeleton = (_a) => {
|
|
@@ -2016,7 +2029,7 @@ const SidebarMenuSkeleton = (_a) => {
|
|
|
2016
2029
|
const width = useMemo(() => {
|
|
2017
2030
|
return `${Math.floor(Math.random() * 40) + 50}%`;
|
|
2018
2031
|
}, []);
|
|
2019
|
-
return (jsxs("div", Object.assign({ "data-testid": dataTestId, "data-sidebar": "menu-skeleton", className: cn('flex h-
|
|
2032
|
+
return (jsxs("div", Object.assign({ "data-testid": dataTestId, "data-sidebar": "menu-skeleton", className: cn('flex h-9 items-center gap-2 rounded-md px-2', className) }, props, { children: [showIcon && jsx(Skeleton, { className: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon" }), jsx(Skeleton, { className: "h-4 max-w-[--skeleton-width] flex-1", "data-sidebar": "menu-skeleton-text", style: {
|
|
2020
2033
|
'--skeleton-width': width,
|
|
2021
2034
|
} })] })));
|
|
2022
2035
|
};
|
|
@@ -2034,7 +2047,7 @@ SidebarMenuSubItem.displayName = 'SidebarMenuSubItem';
|
|
|
2034
2047
|
const SidebarMenuSubButton = (_a) => {
|
|
2035
2048
|
var { asChild = false, size = 'md', isActive, className, dataTestId = 'sidebar-menu-sub-button' } = _a, props = __rest(_a, ["asChild", "size", "isActive", "className", "dataTestId"]);
|
|
2036
2049
|
const Comp = asChild ? Slot : 'button';
|
|
2037
|
-
return (jsx(Comp, Object.assign({ "data-testid": dataTestId, "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-
|
|
2050
|
+
return (jsx(Comp, Object.assign({ "data-testid": dataTestId, "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-8 w-full min-w-0 -translate-x-px cursor-pointer items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground', size === 'sm' && 'text-sm', size === 'md' && 'text-md', 'group-data-[collapsible=icon]:hidden', className) }, props)));
|
|
2038
2051
|
};
|
|
2039
2052
|
SidebarMenuSubButton.displayName = 'SidebarMenuSubButton';
|
|
2040
2053
|
const Sidebar = Object.assign(SidebarComp, {
|
|
@@ -2065,11 +2078,12 @@ const Navbar = ({ className, sidebarTriggerClassName, leftSlot, rightSlot, dataT
|
|
|
2065
2078
|
|
|
2066
2079
|
const Layout = (_a) => {
|
|
2067
2080
|
var { children, className } = _a, _b = _a.sidebarProps, { basePath, header, items, extraContent, footer } = _b, sidebarProps = __rest(_b, ["basePath", "header", "items", "extraContent", "footer"]), { navbarProps, NavLink, useLocation } = _a;
|
|
2068
|
-
|
|
2081
|
+
const Wrapper = ({ children }) => sidebarProps.variant === 'inset' ? (jsx(Block, { className: "overflow-hidden p-2", fullHeight: true, fullWidth: true, children: jsx(Block, { className: "bg-background overflow-hidden rounded-xl shadow-sm", fullHeight: true, fullWidth: true, children: children }) })) : (children);
|
|
2082
|
+
return (jsxs(Flex, { className: "bg-sidebar h-screen w-screen gap-0 text-black dark:text-white", children: [jsxs(Sidebar, Object.assign({ collapsible: "icon" }, sidebarProps, { className: cn('h-full overflow-hidden', sidebarProps.className), children: [header && (jsx(Sidebar.Header, { children: jsx(Sidebar.Menu, { children: jsx(Sidebar.MenuItem, { children: header }) }) })), jsxs(Sidebar.Content, { className: "gap-0", children: [items
|
|
2069
2083
|
.filter((item) => !item.hidden)
|
|
2070
2084
|
.map((item, index) => item.type === 'item' ? (jsx(Sidebar.Group, { children: jsx(Sidebar.Menu, { children: jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, item, { NavLink: NavLink, useLocation: useLocation })) }) }, index)) : (jsxs(Sidebar.Group, { children: [item.title && jsx(Sidebar.GroupLabel, { children: item.title }), jsx(Sidebar.GroupContent, { children: jsx(Sidebar.Menu, { children: item.items
|
|
2071
2085
|
.filter((subItem) => !subItem.hidden)
|
|
2072
|
-
.map((subItem, index) => (jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, subItem, { NavLink: NavLink, useLocation: useLocation }), index))) }) })] }, index))), extraContent] }), footer && (jsx(Sidebar.Footer, { children: jsx(Sidebar.Menu, { children: jsx(Sidebar.MenuItem, { children: footer }) }) })), jsx(Sidebar.Rail, {})] })), jsxs(Flex, { className: "gap-0 overflow-hidden", direction: "column",
|
|
2086
|
+
.map((subItem, index) => (jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, subItem, { NavLink: NavLink, useLocation: useLocation }), index))) }) })] }, index))), extraContent] }), footer && (jsx(Sidebar.Footer, { children: jsx(Sidebar.Menu, { children: jsx(Sidebar.MenuItem, { children: footer }) }) })), sidebarProps.variant === 'sidebar' && jsx(Sidebar.Rail, {})] })), jsx(Wrapper, { children: jsxs(Flex, { className: "gap-0 overflow-hidden", direction: "column", fullWidth: true, fullHeight: true, children: [navbarProps && jsx(Navbar, Object.assign({}, navbarProps)), jsx(Flex, { className: cn('overflow-hidden p-3', className), direction: "column", fullWidth: true, fullHeight: true, children: children })] }) })] }));
|
|
2073
2087
|
};
|
|
2074
2088
|
const RenderSideBarItem = ({ basePath = '/', pathname, title, Icon, items, NavLink, useLocation }) => {
|
|
2075
2089
|
const location = useLocation();
|
|
@@ -2094,7 +2108,7 @@ const PopoverTrigger = (_a) => {
|
|
|
2094
2108
|
};
|
|
2095
2109
|
const PopoverContent = (_a) => {
|
|
2096
2110
|
var { className, align = 'center', sideOffset = 4, container, dataTestId = 'popover-content' } = _a, props = __rest(_a, ["className", "align", "sideOffset", "container", "dataTestId"]);
|
|
2097
|
-
return (jsx(PopoverPrimitive.Portal, { container: container, children: jsx(PopoverPrimitive.Content, Object.assign({ align: align, sideOffset: sideOffset, "data-testid": dataTestId, className: cn('z-50 rounded-md border bg-white p-1 shadow-md outline-
|
|
2111
|
+
return (jsx(PopoverPrimitive.Portal, { container: container, children: jsx(PopoverPrimitive.Content, Object.assign({ align: align, sideOffset: sideOffset, "data-testid": dataTestId, className: cn('z-50 rounded-md border bg-white p-1 shadow-md outline-hidden dark:border-slate-700 dark:bg-slate-900 dark:text-white', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', 'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', className) }, props)) }));
|
|
2098
2112
|
};
|
|
2099
2113
|
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
|
|
2100
2114
|
const Popover = Object.assign($Popover, {
|
|
@@ -2112,7 +2126,7 @@ const ResizablePanel = (_a) => {
|
|
|
2112
2126
|
};
|
|
2113
2127
|
const ResizableHandle = (_a) => {
|
|
2114
2128
|
var { withHandle, className, dataTestId = 'resizable-handle' } = _a, props = __rest(_a, ["withHandle", "className", "dataTestId"]);
|
|
2115
|
-
return (jsx(ResizablePrimitive.PanelResizeHandle, Object.assign({ className: cn('bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:
|
|
2129
|
+
return (jsx(ResizablePrimitive.PanelResizeHandle, Object.assign({ className: cn('bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden', 'data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90', className), "data-testid": dataTestId }, props, { children: withHandle && (jsx("div", { className: "bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border", "data-testid": `${dataTestId}-handle`, children: jsx(GripVertical, { className: "h-2.5 w-2.5" }) })) })));
|
|
2116
2130
|
};
|
|
2117
2131
|
const Resizable = {
|
|
2118
2132
|
PanelGroup: ResizablePanelGroup,
|
|
@@ -2122,7 +2136,7 @@ const Resizable = {
|
|
|
2122
2136
|
|
|
2123
2137
|
const Switch = (_a) => {
|
|
2124
2138
|
var { className } = _a, _b = _a.thumbProps, _c = _b === void 0 ? {} : _b, { className: thumbClassName } = _c, thumbProps = __rest(_c, ["className"]), { dataTestId = 'switch' } = _a, props = __rest(_a, ["className", "thumbProps", "dataTestId"]);
|
|
2125
|
-
return (jsx(SwitchPrimitives.Root, Object.assign({ className: cn('peer inline-flex h-[calc(1.5rem+6px)] w-[calc(3rem+6px)] shrink-0 cursor-pointer items-center rounded-full border-[3px] border-transparent', 'transition-colors focus-visible:
|
|
2139
|
+
return (jsx(SwitchPrimitives.Root, Object.assign({ className: cn('peer inline-flex h-[calc(1.5rem+6px)] w-[calc(3rem+6px)] shrink-0 cursor-pointer items-center rounded-full border-[3px] border-transparent', 'transition-colors focus-visible:ring-2 focus-visible:ring-slate-600 focus-visible:ring-offset-2 focus-visible:outline-hidden', 'focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-slate-300', 'dark:focus-visible:ring-slate-200 dark:focus-visible:ring-offset-slate-800 dark:data-[state=checked]:bg-blue-700 dark:data-[state=unchecked]:bg-slate-700', className), "data-testid": dataTestId }, props, { children: jsx(SwitchPrimitives.Thumb, Object.assign({ className: cn('pointer-events-none block h-6 w-6 rounded-full bg-white shadow-lg ring-0 transition-transform', 'data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0 dark:bg-slate-900', thumbClassName), "data-testid": `${dataTestId}-thumb` }, thumbProps)) })));
|
|
2126
2140
|
};
|
|
2127
2141
|
Switch.displayName = SwitchPrimitives.Root.displayName;
|
|
2128
2142
|
|
|
@@ -2138,7 +2152,7 @@ const TabsList = (_a) => {
|
|
|
2138
2152
|
TabsList.displayName = TabsPrimitive.List.displayName;
|
|
2139
2153
|
const TabsTrigger = (_a) => {
|
|
2140
2154
|
var { className, dataTestId = 'tabs-trigger' } = _a, props = __rest(_a, ["className", "dataTestId"]);
|
|
2141
|
-
return (jsx(TabsPrimitive.Trigger, Object.assign({ className: cn('inline-flex w-full items-center justify-center
|
|
2155
|
+
return (jsx(TabsPrimitive.Trigger, Object.assign({ className: cn('inline-flex w-full items-center justify-center rounded-md px-2 py-1.5 font-medium whitespace-nowrap transition-all hover:bg-slate-200 disabled:pointer-events-none disabled:opacity-50 dark:hover:bg-slate-800', 'data-[state=active]:bg-white data-[state=active]:text-black data-[state=active]:shadow-sm dark:data-[state=active]:bg-slate-700 dark:data-[state=active]:text-white', className), "data-testid": dataTestId }, props)));
|
|
2142
2156
|
};
|
|
2143
2157
|
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
|
|
2144
2158
|
const TabsContent = (_a) => {
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tw-react-components",
|
|
3
3
|
"description": "A set of React components build with TailwindCSS to make a nice dashboard.",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.174",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"homepage": "https://bacali95.github.io/tw-react-components",
|
|
7
7
|
"type": "module",
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import type
|
|
1
|
+
import { type FC, type PropsWithChildren, type ReactNode } from 'react';
|
|
2
2
|
type Props = {
|
|
3
3
|
open: boolean;
|
|
4
4
|
title: ReactNode;
|
|
5
5
|
yesLabel?: string;
|
|
6
6
|
noLabel?: string;
|
|
7
|
-
onConfirm: () => void
|
|
7
|
+
onConfirm: () => void | Promise<void>;
|
|
8
8
|
onClose: () => void;
|
|
9
9
|
dataTestId?: string;
|
|
10
10
|
};
|
|
@@ -8,6 +8,6 @@ export type ListSorterDialogProps<T extends ListSorterItem> = {
|
|
|
8
8
|
} & Omit<ListSorterProps<T>, 'onChange'> & {
|
|
9
9
|
cancelLabel?: string;
|
|
10
10
|
submitLabel?: string;
|
|
11
|
-
onSubmit: (items: T[]) => void
|
|
11
|
+
onSubmit: (items: T[]) => void | Promise<void>;
|
|
12
12
|
};
|
|
13
13
|
export declare function ListSorterDialog<T extends ListSorterItem>({ className, open, title, items, idResolver, renderer, cancelLabel, submitLabel, onSubmit, onClose, dataTestId, }: ListSorterDialogProps<T>): import("react/jsx-runtime").JSX.Element;
|
package/tailwindcss-plugin.cjs
CHANGED
|
@@ -18,7 +18,7 @@ module.exports = plugin(
|
|
|
18
18
|
border: 'hsl(var(--border))',
|
|
19
19
|
input: 'hsl(var(--input))',
|
|
20
20
|
ring: 'hsl(var(--ring))',
|
|
21
|
-
background: '
|
|
21
|
+
background: 'var(--background)',
|
|
22
22
|
foreground: 'hsl(var(--foreground))',
|
|
23
23
|
primary: {
|
|
24
24
|
DEFAULT: 'hsl(var(--primary))',
|
|
@@ -49,11 +49,11 @@ module.exports = plugin(
|
|
|
49
49
|
foreground: 'hsl(var(--card-foreground))',
|
|
50
50
|
},
|
|
51
51
|
sidebar: {
|
|
52
|
-
DEFAULT: '
|
|
52
|
+
DEFAULT: 'var(--sidebar-background)',
|
|
53
53
|
foreground: 'hsl(var(--sidebar-foreground))',
|
|
54
54
|
primary: 'hsl(var(--sidebar-primary))',
|
|
55
55
|
'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
|
|
56
|
-
accent: '
|
|
56
|
+
accent: 'var(--sidebar-accent)',
|
|
57
57
|
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
|
|
58
58
|
border: 'hsl(var(--sidebar-border))',
|
|
59
59
|
ring: 'hsl(var(--sidebar-ring))',
|