tw-react-components 0.0.170 → 0.0.173
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 +7 -9
- package/index.esm.js +50 -49
- package/package.json +1 -1
- package/tailwindcss-plugin.cjs +3 -3
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
|
@@ -145,7 +145,7 @@ function resolveTargetObject(payload, fieldChain, defaultValue) {
|
|
|
145
145
|
const variantClassNames = {
|
|
146
146
|
filled: {
|
|
147
147
|
slate: {
|
|
148
|
-
base: 'bg-slate-100 dark:bg-slate-
|
|
148
|
+
base: 'bg-slate-100 dark:bg-slate-900/70',
|
|
149
149
|
hover: 'hover:bg-slate-200 dark:hover:bg-slate-700',
|
|
150
150
|
focus: 'focus:bg-slate-200 dark:focus:bg-slate-700',
|
|
151
151
|
active: 'active:bg-slate-300 dark:active:bg-slate-800/50',
|
|
@@ -569,7 +569,7 @@ const Button = (_a) => {
|
|
|
569
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', props.disabled
|
|
570
570
|
? 'cursor-not-allowed opacity-50'
|
|
571
571
|
: !unstyled
|
|
572
|
-
? `${variantClassNames[variant][color].hover} ${variantClassNames[variant][color].focus} ${variantClassNames[variant][color].active}`
|
|
572
|
+
? `${variantClassNames[variant][color].hover} ${variantClassNames[variant][color].focus} ${variantClassNames[variant][color].active} cursor-pointer`
|
|
573
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 }))] })));
|
|
574
574
|
};
|
|
575
575
|
|
|
@@ -585,7 +585,7 @@ const Block = (_a) => {
|
|
|
585
585
|
|
|
586
586
|
const Card = (_a) => {
|
|
587
587
|
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
|
|
588
|
+
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
589
|
};
|
|
590
590
|
|
|
591
591
|
const CollapsibleRoot = (_a) => {
|
|
@@ -856,7 +856,7 @@ const BasicInput = (_a) => {
|
|
|
856
856
|
[inputClasses.withoutErrors.input]: !hasErrors,
|
|
857
857
|
[inputClasses.withErrors.input]: hasErrors,
|
|
858
858
|
'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, {
|
|
859
|
+
}, 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
860
|
[inputClasses.base.disabled]: props.disabled,
|
|
861
861
|
'bg-red-100': hasErrors,
|
|
862
862
|
}, 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 +864,7 @@ const BasicInput = (_a) => {
|
|
|
864
864
|
[inputClasses.withoutErrors.input]: !hasErrors,
|
|
865
865
|
[inputClasses.withErrors.input]: hasErrors,
|
|
866
866
|
'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
|
|
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 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
868
|
[sizeClasses[size].clearButton.withSuffixIcon]: SuffixIcon,
|
|
869
869
|
}), 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
870
|
};
|
|
@@ -966,7 +966,7 @@ const DaysView = ({ date, value, month, year, minDate, maxDate, locale, dataTest
|
|
|
966
966
|
}
|
|
967
967
|
setNewDate(newDate);
|
|
968
968
|
}, [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
|
|
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 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
970
|
};
|
|
971
971
|
const Day = ({ value, day, month, year, minDate, maxDate, primary, dataTestId = 'day', setDayNumber, }) => {
|
|
972
972
|
const dayDate = useMemo(() => new Date(year, month, day), [day, month, year]);
|
|
@@ -993,7 +993,7 @@ const Month = ({ date, value, shortName, month, year, minDate, maxDate, dataTest
|
|
|
993
993
|
(!maxDate || compareDates(dayDate, new Date(maxDate), 'month') <= 0), [dayDate, minDate, maxDate]);
|
|
994
994
|
const isSelected = useMemo(() => !!value && !compareDates(dayDate, new Date(value), 'month'), [dayDate, value]);
|
|
995
995
|
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', {
|
|
996
|
+
return (jsx("div", { className: cn('mx-auto flex w-14 items-center justify-center rounded-sm border py-3 text-sm', {
|
|
997
997
|
'border-blue-500': isEqualThisMonth,
|
|
998
998
|
'border-transparent': !isEqualThisMonth,
|
|
999
999
|
'bg-blue-500 text-white': isSelected,
|
|
@@ -1010,7 +1010,7 @@ const Year = ({ date, value, year, minDate, maxDate, dataTestId = 'year', select
|
|
|
1010
1010
|
(!maxDate || compareDates(dayDate, new Date(maxDate), 'year') <= 0), [dayDate, minDate, maxDate]);
|
|
1011
1011
|
const isSelected = useMemo(() => !!value && !compareDates(dayDate, new Date(value), 'year'), [dayDate, value]);
|
|
1012
1012
|
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', {
|
|
1013
|
+
return (jsx("div", { className: cn('mx-auto flex w-14 items-center justify-center rounded-sm border py-3 text-sm', {
|
|
1014
1014
|
'border-blue-500': isEqualThisYear,
|
|
1015
1015
|
'border-transparent': !isEqualThisYear,
|
|
1016
1016
|
'bg-blue-500 text-white': isSelected,
|
|
@@ -1079,7 +1079,7 @@ const DateSelector = ({ date, value, minDate, maxDate, locale, calendarView, set
|
|
|
1079
1079
|
setYear(year);
|
|
1080
1080
|
setCalendarView('months');
|
|
1081
1081
|
};
|
|
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` }))] }));
|
|
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-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
1083
|
};
|
|
1084
1084
|
|
|
1085
1085
|
const TimeSelector = ({ date, step = 1, minDate, maxDate, setNewDate, dataTestId = 'time-selector', }) => {
|
|
@@ -1096,7 +1096,7 @@ const TimeSelector = ({ date, step = 1, minDate, maxDate, setNewDate, dataTestId
|
|
|
1096
1096
|
const increaseMinutes = useLongPress(editDateField('minutes', step));
|
|
1097
1097
|
const decreaseMinutes = useLongPress(editDateField('minutes', -step));
|
|
1098
1098
|
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` }))] })] })] }));
|
|
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-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
1100
|
};
|
|
1101
1101
|
|
|
1102
1102
|
const DateTimeInput = (_a) => {
|
|
@@ -1152,12 +1152,12 @@ const DateTimeInput = (_a) => {
|
|
|
1152
1152
|
setIsOpen(false);
|
|
1153
1153
|
}
|
|
1154
1154
|
};
|
|
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
|
|
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-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
1156
|
};
|
|
1157
1157
|
|
|
1158
1158
|
const ListContent = (_a) => {
|
|
1159
1159
|
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
|
|
1160
|
+
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
1161
|
};
|
|
1162
1162
|
const labelSizeClasses = {
|
|
1163
1163
|
small: 'p-1 text-sm',
|
|
@@ -1165,7 +1165,7 @@ const labelSizeClasses = {
|
|
|
1165
1165
|
};
|
|
1166
1166
|
const ListItem = (_a) => {
|
|
1167
1167
|
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
|
|
1168
|
+
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
1169
|
};
|
|
1170
1170
|
const ListLabel = (_a) => {
|
|
1171
1171
|
var { className, size = 'medium', inset, dataTestId = 'list-label' } = _a, props = __rest(_a, ["className", "size", "inset", "dataTestId"]);
|
|
@@ -1355,7 +1355,7 @@ const SelectInput = (_a) => {
|
|
|
1355
1355
|
}, dataTestId: option.dataTestId, children: jsx("span", { children: renderItem(option, isNotNullOrUndefined(selectedMap[option.id])) }) }));
|
|
1356
1356
|
}, [ItemComponent, handleOnSelect, multiple, renderItem, selectedMap]);
|
|
1357
1357
|
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))) })] })] }));
|
|
1358
|
+
(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
1359
|
};
|
|
1360
1360
|
function isNotNullOrUndefined(value) {
|
|
1361
1361
|
return value !== null && value !== undefined;
|
|
@@ -1376,7 +1376,7 @@ const FileInput = (_a) => {
|
|
|
1376
1376
|
}, type: "file", hidden: true, accept: accept, onChange: handleFileChange, "data-testid": `${dataTestId}-hidden` })] }));
|
|
1377
1377
|
};
|
|
1378
1378
|
|
|
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
|
|
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 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
1380
|
|
|
1381
1381
|
function withForm(Component) {
|
|
1382
1382
|
return (props) => {
|
|
@@ -1511,7 +1511,7 @@ const $Table = (_a) => {
|
|
|
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) => {
|
|
@@ -1704,7 +1704,7 @@ const sheetVariants = cva('fixed flex flex-col z-50 gap-4 bg-background p-4 shad
|
|
|
1704
1704
|
});
|
|
1705
1705
|
const SheetContent = (_a) => {
|
|
1706
1706
|
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
|
|
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 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
1708
|
};
|
|
1709
1709
|
SheetContent.displayName = DialogPrimitive.Content.displayName;
|
|
1710
1710
|
const SheetHeader = (_a) => {
|
|
@@ -1778,7 +1778,7 @@ function ListSorterDialog({ className, open, title, items, idResolver, renderer,
|
|
|
1778
1778
|
}
|
|
1779
1779
|
}, [items, open]);
|
|
1780
1780
|
const preFinish = () => onSubmit(sortedItems);
|
|
1781
|
-
const customRenderer = (item, index, listeners) => (jsxs(Flex, { align: "center", className: "gap-4 p-4 focus:outline-
|
|
1781
|
+
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)] }));
|
|
1782
1782
|
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", dataTestId: `${dataTestId}-cancel-button`, children: cancelLabel !== null && cancelLabel !== void 0 ? cancelLabel : 'Cancel' }) }), jsx(Button, { color: "green", onClick: preFinish, dataTestId: `${dataTestId}-submit-button`, children: submitLabel !== null && submitLabel !== void 0 ? submitLabel : 'Submit' })] })] }) }));
|
|
1783
1783
|
}
|
|
1784
1784
|
|
|
@@ -1866,22 +1866,22 @@ const SidebarComp = (_a) => {
|
|
|
1866
1866
|
var { side = 'left', variant = 'sidebar', collapsible = 'offcanvas', className, children, dataTestId = 'sidebar' } = _a, props = __rest(_a, ["side", "variant", "collapsible", "className", "children", "dataTestId"]);
|
|
1867
1867
|
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
|
|
1868
1868
|
if (collapsible === 'none') {
|
|
1869
|
-
return (jsx("div", Object.assign({ "data-testid": dataTestId, className: cn('bg-sidebar text-sidebar-foreground flex h-full w-
|
|
1869
|
+
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
1870
|
}
|
|
1871
1871
|
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-
|
|
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-(--sidebar-width) p-0 [&>button]:hidden", style: {
|
|
1873
1873
|
'--sidebar-width': SIDEBAR_WIDTH_MOBILE,
|
|
1874
1874
|
}, side: side, children: jsx("div", { className: "flex h-full w-full flex-col", children: children }) }) })));
|
|
1875
1875
|
}
|
|
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-
|
|
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 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'
|
|
1877
|
+
? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.2))]'
|
|
1878
|
+
: '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
1879
|
? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
|
|
1880
1880
|
: 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
|
|
1881
1881
|
// Adjust the padding for floating and inset variants.
|
|
1882
1882
|
variant === 'floating' || variant === 'inset'
|
|
1883
|
-
? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.
|
|
1884
|
-
: '
|
|
1883
|
+
? 'p-2 pr-0 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.2)_+2px)]'
|
|
1884
|
+
: '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
1885
|
};
|
|
1886
1886
|
SidebarComp.displayName = 'Sidebar';
|
|
1887
1887
|
const SidebarTrigger = (_a) => {
|
|
@@ -1896,12 +1896,12 @@ SidebarTrigger.displayName = 'SidebarTrigger';
|
|
|
1896
1896
|
const SidebarRail = (_a) => {
|
|
1897
1897
|
var { className, dataTestId = 'sidebar-rail' } = _a, props = __rest(_a, ["className", "dataTestId"]);
|
|
1898
1898
|
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]
|
|
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 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
1900
|
};
|
|
1901
1901
|
SidebarRail.displayName = 'SidebarRail';
|
|
1902
1902
|
const SidebarInset = (_a) => {
|
|
1903
1903
|
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
|
|
1904
|
+
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
1905
|
};
|
|
1906
1906
|
SidebarInset.displayName = 'SidebarInset';
|
|
1907
1907
|
const SidebarInput = (_a) => {
|
|
@@ -1937,20 +1937,20 @@ SidebarGroup.displayName = 'SidebarGroup';
|
|
|
1937
1937
|
const SidebarGroupLabel = (_a) => {
|
|
1938
1938
|
var { className, asChild = false, dataTestId = 'sidebar-group-label' } = _a, props = __rest(_a, ["className", "asChild", "dataTestId"]);
|
|
1939
1939
|
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-
|
|
1940
|
+
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
1941
|
};
|
|
1942
1942
|
SidebarGroupLabel.displayName = 'SidebarGroupLabel';
|
|
1943
1943
|
const SidebarGroupAction = (_a) => {
|
|
1944
1944
|
var { className, asChild = false, dataTestId = 'sidebar-group-action' } = _a, props = __rest(_a, ["className", "asChild", "dataTestId"]);
|
|
1945
1945
|
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
|
|
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 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
1947
|
// Increases the hit area of the button on mobile.
|
|
1948
1948
|
'after:absolute after:-inset-2 after:md:hidden', 'group-data-[collapsible=icon]:hidden', className) }, props)));
|
|
1949
1949
|
};
|
|
1950
1950
|
SidebarGroupAction.displayName = 'SidebarGroupAction';
|
|
1951
1951
|
const SidebarGroupContent = (_a) => {
|
|
1952
1952
|
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
|
|
1953
|
+
return (jsx("div", Object.assign({ "data-testid": dataTestId, "data-sidebar": "group-content", className: cn('w-full', className) }, props)));
|
|
1954
1954
|
};
|
|
1955
1955
|
SidebarGroupContent.displayName = 'SidebarGroupContent';
|
|
1956
1956
|
const SidebarMenu = (_a) => {
|
|
@@ -1963,16 +1963,16 @@ const SidebarMenuItem = (_a) => {
|
|
|
1963
1963
|
return (jsx("li", Object.assign({ "data-testid": dataTestId, "data-sidebar": "menu-item", className: cn('group/menu-item relative', className) }, props)));
|
|
1964
1964
|
};
|
|
1965
1965
|
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
|
|
1966
|
+
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
1967
|
variants: {
|
|
1968
1968
|
variant: {
|
|
1969
1969
|
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-[
|
|
1970
|
+
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
1971
|
},
|
|
1972
1972
|
size: {
|
|
1973
|
-
default: 'h-
|
|
1974
|
-
sm: 'h-7 text-
|
|
1975
|
-
lg: 'h-12 text-
|
|
1973
|
+
default: 'h-9',
|
|
1974
|
+
sm: 'h-7 text-sm',
|
|
1975
|
+
lg: 'h-12 text-md group-data-[collapsible=icon]:!p-0',
|
|
1976
1976
|
},
|
|
1977
1977
|
},
|
|
1978
1978
|
defaultVariants: {
|
|
@@ -1999,7 +1999,7 @@ SidebarMenuButton.displayName = 'SidebarMenuButton';
|
|
|
1999
1999
|
const SidebarMenuAction = (_a) => {
|
|
2000
2000
|
var { className, asChild = false, showOnHover = false, dataTestId = 'sidebar-menu-action' } = _a, props = __rest(_a, ["className", "asChild", "showOnHover", "dataTestId"]);
|
|
2001
2001
|
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
|
|
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 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
2003
|
// Increases the hit area of the button on mobile.
|
|
2004
2004
|
'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
2005
|
'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 +2007,7 @@ const SidebarMenuAction = (_a) => {
|
|
|
2007
2007
|
SidebarMenuAction.displayName = 'SidebarMenuAction';
|
|
2008
2008
|
const SidebarMenuBadge = (_a) => {
|
|
2009
2009
|
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
|
|
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 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
2011
|
};
|
|
2012
2012
|
SidebarMenuBadge.displayName = 'SidebarMenuBadge';
|
|
2013
2013
|
const SidebarMenuSkeleton = (_a) => {
|
|
@@ -2016,7 +2016,7 @@ const SidebarMenuSkeleton = (_a) => {
|
|
|
2016
2016
|
const width = useMemo(() => {
|
|
2017
2017
|
return `${Math.floor(Math.random() * 40) + 50}%`;
|
|
2018
2018
|
}, []);
|
|
2019
|
-
return (jsxs("div", Object.assign({ "data-testid": dataTestId, "data-sidebar": "menu-skeleton", className: cn('flex h-
|
|
2019
|
+
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
2020
|
'--skeleton-width': width,
|
|
2021
2021
|
} })] })));
|
|
2022
2022
|
};
|
|
@@ -2034,7 +2034,7 @@ SidebarMenuSubItem.displayName = 'SidebarMenuSubItem';
|
|
|
2034
2034
|
const SidebarMenuSubButton = (_a) => {
|
|
2035
2035
|
var { asChild = false, size = 'md', isActive, className, dataTestId = 'sidebar-menu-sub-button' } = _a, props = __rest(_a, ["asChild", "size", "isActive", "className", "dataTestId"]);
|
|
2036
2036
|
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-
|
|
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-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
2038
|
};
|
|
2039
2039
|
SidebarMenuSubButton.displayName = 'SidebarMenuSubButton';
|
|
2040
2040
|
const Sidebar = Object.assign(SidebarComp, {
|
|
@@ -2065,11 +2065,12 @@ const Navbar = ({ className, sidebarTriggerClassName, leftSlot, rightSlot, dataT
|
|
|
2065
2065
|
|
|
2066
2066
|
const Layout = (_a) => {
|
|
2067
2067
|
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
|
-
|
|
2068
|
+
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);
|
|
2069
|
+
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
2070
|
.filter((item) => !item.hidden)
|
|
2070
2071
|
.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
2072
|
.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",
|
|
2073
|
+
.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
2074
|
};
|
|
2074
2075
|
const RenderSideBarItem = ({ basePath = '/', pathname, title, Icon, items, NavLink, useLocation }) => {
|
|
2075
2076
|
const location = useLocation();
|
|
@@ -2094,7 +2095,7 @@ const PopoverTrigger = (_a) => {
|
|
|
2094
2095
|
};
|
|
2095
2096
|
const PopoverContent = (_a) => {
|
|
2096
2097
|
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-
|
|
2098
|
+
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
2099
|
};
|
|
2099
2100
|
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
|
|
2100
2101
|
const Popover = Object.assign($Popover, {
|
|
@@ -2112,7 +2113,7 @@ const ResizablePanel = (_a) => {
|
|
|
2112
2113
|
};
|
|
2113
2114
|
const ResizableHandle = (_a) => {
|
|
2114
2115
|
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:
|
|
2116
|
+
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
2117
|
};
|
|
2117
2118
|
const Resizable = {
|
|
2118
2119
|
PanelGroup: ResizablePanelGroup,
|
|
@@ -2122,7 +2123,7 @@ const Resizable = {
|
|
|
2122
2123
|
|
|
2123
2124
|
const Switch = (_a) => {
|
|
2124
2125
|
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:
|
|
2126
|
+
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
2127
|
};
|
|
2127
2128
|
Switch.displayName = SwitchPrimitives.Root.displayName;
|
|
2128
2129
|
|
|
@@ -2138,7 +2139,7 @@ const TabsList = (_a) => {
|
|
|
2138
2139
|
TabsList.displayName = TabsPrimitive.List.displayName;
|
|
2139
2140
|
const TabsTrigger = (_a) => {
|
|
2140
2141
|
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
|
|
2142
|
+
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
2143
|
};
|
|
2143
2144
|
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
|
|
2144
2145
|
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.173",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"homepage": "https://bacali95.github.io/tw-react-components",
|
|
7
7
|
"type": "module",
|
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))',
|