@wellingtonhlc/shared-ui 0.25.1 → 0.25.2
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/README.md +13 -0
- package/dist/components/DateField.d.ts +2 -0
- package/dist/components/DateField.d.ts.map +1 -1
- package/dist/components/DateField.js +57 -12
- package/dist/components/Sidebar.js +1 -1
- package/dist/components/TabsUnderlined.d.ts.map +1 -1
- package/dist/components/TabsUnderlined.js +6 -4
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/styles.css +21 -12
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -192,6 +192,19 @@ Componentes disponiveis na API publica:
|
|
|
192
192
|
| Controle de renderizacao | `RenderIf`, `RenderCase` |
|
|
193
193
|
| Tema | `ThemePreferencesSelector` |
|
|
194
194
|
|
|
195
|
+
## DateField
|
|
196
|
+
|
|
197
|
+
`DateField` centraliza entrada de data, data e hora, ou apenas hora. Use `mode`
|
|
198
|
+
para declarar o formato esperado pelo campo:
|
|
199
|
+
|
|
200
|
+
```tsx
|
|
201
|
+
<DateField label="Data" value="2026-06-16" onChange={setDate} mode="date" />
|
|
202
|
+
<DateField label="Data e hora" value="2026-06-16T14:30" onChange={setDateTime} mode="dateTime" />
|
|
203
|
+
<DateField label="Hora" value="14:30" onChange={setTime} mode="time" />
|
|
204
|
+
```
|
|
205
|
+
|
|
206
|
+
`enableTime` permanece suportado como alias legado para `mode="dateTime"`.
|
|
207
|
+
|
|
195
208
|
## AppShell.Topbar.Button
|
|
196
209
|
|
|
197
210
|
Use `AppShell.Topbar.Button` para acoes de icone na barra superior, como notificacoes,
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
export type DateFieldMode = 'date' | 'dateTime' | 'time';
|
|
2
3
|
export interface DateFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'value' | 'onChange'> {
|
|
3
4
|
label?: string;
|
|
4
5
|
value?: string | Date | null;
|
|
@@ -9,6 +10,7 @@ export interface DateFieldProps extends Omit<React.InputHTMLAttributes<HTMLInput
|
|
|
9
10
|
labelClassName?: string;
|
|
10
11
|
size?: 'sm' | 'md' | 'lg';
|
|
11
12
|
roundedFull?: boolean;
|
|
13
|
+
mode?: DateFieldMode;
|
|
12
14
|
enableTime?: boolean;
|
|
13
15
|
timeIntervals?: number;
|
|
14
16
|
noPortal?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateField.d.ts","sourceRoot":"","sources":["../../src/components/DateField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"DateField.d.ts","sourceRoot":"","sources":["../../src/components/DateField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC;AA6FzD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;IAC/H,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAClF,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,yFA6IrB,CAAC"}
|
|
@@ -33,6 +33,19 @@ function toDateTimeString(value) {
|
|
|
33
33
|
const pad = (n) => String(n).padStart(2, '0');
|
|
34
34
|
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
|
|
35
35
|
}
|
|
36
|
+
function toTimeOnlyString(value) {
|
|
37
|
+
if (value === undefined)
|
|
38
|
+
return undefined;
|
|
39
|
+
if (value === null || value === '')
|
|
40
|
+
return '';
|
|
41
|
+
if (typeof value === 'string' && /^\d{2}:\d{2}$/.test(value))
|
|
42
|
+
return value;
|
|
43
|
+
const date = value instanceof Date ? value : new Date(value);
|
|
44
|
+
if (Number.isNaN(date.getTime()))
|
|
45
|
+
return '';
|
|
46
|
+
const pad = (n) => String(n).padStart(2, '0');
|
|
47
|
+
return `${pad(date.getHours())}:${pad(date.getMinutes())}`;
|
|
48
|
+
}
|
|
36
49
|
function toDateOnlyObject(value) {
|
|
37
50
|
const str = toDateOnlyString(value);
|
|
38
51
|
if (!str)
|
|
@@ -47,11 +60,39 @@ function toDateTimeObject(value) {
|
|
|
47
60
|
const date = value instanceof Date ? value : new Date(value);
|
|
48
61
|
return Number.isNaN(date.getTime()) ? null : date;
|
|
49
62
|
}
|
|
63
|
+
function toTimeOnlyObject(value) {
|
|
64
|
+
const str = toTimeOnlyString(value);
|
|
65
|
+
if (!str)
|
|
66
|
+
return null;
|
|
67
|
+
const [hours, minutes] = str.split(':').map(Number);
|
|
68
|
+
const d = new Date();
|
|
69
|
+
d.setHours(hours, minutes, 0, 0);
|
|
70
|
+
return Number.isNaN(d.getTime()) ? null : d;
|
|
71
|
+
}
|
|
50
72
|
function toOptionalDate(value) {
|
|
51
73
|
if (typeof value !== 'string' || !value)
|
|
52
74
|
return undefined;
|
|
53
75
|
return toDateOnlyObject(value) ?? undefined;
|
|
54
76
|
}
|
|
77
|
+
function getDateFieldMode(mode, enableTime) {
|
|
78
|
+
if (mode)
|
|
79
|
+
return mode;
|
|
80
|
+
return enableTime ? 'dateTime' : 'date';
|
|
81
|
+
}
|
|
82
|
+
function toInputValueByMode(mode, value) {
|
|
83
|
+
if (mode === 'time')
|
|
84
|
+
return toTimeOnlyString(value);
|
|
85
|
+
if (mode === 'dateTime')
|
|
86
|
+
return toDateTimeString(value);
|
|
87
|
+
return toDateOnlyString(value);
|
|
88
|
+
}
|
|
89
|
+
function toDateObjectByMode(mode, value) {
|
|
90
|
+
if (mode === 'time')
|
|
91
|
+
return toTimeOnlyObject(value);
|
|
92
|
+
if (mode === 'dateTime')
|
|
93
|
+
return toDateTimeObject(value);
|
|
94
|
+
return toDateOnlyObject(value);
|
|
95
|
+
}
|
|
55
96
|
function assignRef(ref, value) {
|
|
56
97
|
if (!ref)
|
|
57
98
|
return;
|
|
@@ -61,7 +102,7 @@ function assignRef(ref, value) {
|
|
|
61
102
|
}
|
|
62
103
|
ref.current = value;
|
|
63
104
|
}
|
|
64
|
-
export const DateField = React.forwardRef(({ label, onChange, onBlur, inputRef, disabled, errorMessage, id, className, wrapperClassName, labelClassName, size = 'sm', roundedFull = false, noPortal = false, enableTime = false, timeIntervals = 5, value, name, placeholder, min, max, autoComplete = 'off', autoFocus, }, ref) => {
|
|
105
|
+
export const DateField = React.forwardRef(({ label, onChange, onBlur, inputRef, disabled, errorMessage, id, className, wrapperClassName, labelClassName, size = 'sm', roundedFull = false, noPortal = false, mode, enableTime = false, timeIntervals = 5, value, name, placeholder, min, max, autoComplete = 'off', autoFocus, }, ref) => {
|
|
65
106
|
const sizeMap = {
|
|
66
107
|
sm: 'h-9 text-sm px-3 rounded-md',
|
|
67
108
|
md: 'h-12 text-sm px-4 rounded-md',
|
|
@@ -69,14 +110,16 @@ export const DateField = React.forwardRef(({ label, onChange, onBlur, inputRef,
|
|
|
69
110
|
};
|
|
70
111
|
const sizeClass = sizeMap[size ?? 'sm'];
|
|
71
112
|
const hiddenInputRef = React.useRef(null);
|
|
72
|
-
const
|
|
73
|
-
const
|
|
74
|
-
const
|
|
75
|
-
const
|
|
113
|
+
const resolvedMode = getDateFieldMode(mode, enableTime);
|
|
114
|
+
const isTimeOnly = resolvedMode === 'time';
|
|
115
|
+
const isDateTime = resolvedMode === 'dateTime';
|
|
116
|
+
const isDateOnly = resolvedMode === 'date';
|
|
117
|
+
const normalizedValue = toInputValueByMode(resolvedMode, value);
|
|
118
|
+
const [selectedDate, setSelectedDate] = React.useState(() => toDateObjectByMode(resolvedMode, value));
|
|
76
119
|
React.useEffect(() => {
|
|
77
120
|
if (value !== undefined)
|
|
78
|
-
setSelectedDate(
|
|
79
|
-
}, [value,
|
|
121
|
+
setSelectedDate(toDateObjectByMode(resolvedMode, value));
|
|
122
|
+
}, [value, resolvedMode]);
|
|
80
123
|
React.useEffect(() => {
|
|
81
124
|
if (hiddenInputRef.current && normalizedValue !== undefined) {
|
|
82
125
|
hiddenInputRef.current.value = normalizedValue;
|
|
@@ -101,7 +144,7 @@ export const DateField = React.forwardRef(({ label, onChange, onBlur, inputRef,
|
|
|
101
144
|
const handleDateChange = (nextDate) => {
|
|
102
145
|
const resolved = Array.isArray(nextDate) ? (nextDate[0] ?? null) : nextDate;
|
|
103
146
|
setSelectedDate(resolved);
|
|
104
|
-
emitChange(
|
|
147
|
+
emitChange(toInputValueByMode(resolvedMode, resolved) ?? '');
|
|
105
148
|
};
|
|
106
149
|
return (_jsx(FieldControl, { label: label, id: id || name, wrapperClassName: wrapperClassName, labelClassName: labelClassName, errorMessage: errorMessage, roundedFull: roundedFull, size: size, disabled: disabled, children: ({ controlId, describedBy, errorMessage: controlError, disabled: controlDisabled }) => (_jsxs("div", { className: "relative", children: [_jsx("input", { type: "hidden", ref: (node) => {
|
|
107
150
|
hiddenInputRef.current = node;
|
|
@@ -116,12 +159,14 @@ export const DateField = React.forwardRef(({ label, onChange, onBlur, inputRef,
|
|
|
116
159
|
currentTarget: hiddenInputRef.current,
|
|
117
160
|
};
|
|
118
161
|
onBlur(syntheticEvent);
|
|
119
|
-
}, ...(
|
|
120
|
-
? { showTimeSelect: true, timeIntervals, dateFormat: '
|
|
121
|
-
:
|
|
162
|
+
}, ...(isTimeOnly
|
|
163
|
+
? { showTimeSelect: true, showTimeSelectOnly: true, timeIntervals, dateFormat: 'HH:mm', timeFormat: 'HH:mm', timeCaption: 'Hora' }
|
|
164
|
+
: isDateTime
|
|
165
|
+
? { showTimeSelect: true, timeIntervals, dateFormat: 'dd/MM/yyyy HH:mm', timeFormat: 'HH:mm', timeCaption: 'Hora' }
|
|
166
|
+
: { dateFormat: 'dd/MM/yyyy', minDate: toOptionalDate(min), maxDate: toOptionalDate(max) }), locale: "pt-BR", placeholderText: placeholder ?? label, disabled: controlDisabled, showPopperArrow: false, popperClassName: "app-datepicker-popper", calendarClassName: "app-datepicker", wrapperClassName: "w-full", formatWeekDay: (day) => day.slice(0, 3), ariaDescribedBy: describedBy, ariaInvalid: controlError ? 'true' : undefined, autoComplete: autoComplete, autoFocus: autoFocus, className: controlClasses({
|
|
122
167
|
errorMessage: controlError,
|
|
123
168
|
disabled: controlDisabled,
|
|
124
169
|
extra: cn(className, 'w-full cursor-pointer pr-10', sizeClass),
|
|
125
|
-
}) }), _jsx("div", { className: "pointer-events-none absolute top-1/2 right-3 flex -translate-y-1/2 items-center justify-center", children:
|
|
170
|
+
}) }), _jsx("div", { className: "pointer-events-none absolute top-1/2 right-3 flex -translate-y-1/2 items-center justify-center", children: isDateOnly ? _jsx(Calendar, { className: "text-foreground-muted h-4 w-4" }) : _jsx(CalendarClock, { className: "text-foreground-muted h-4 w-4" }) })] })) }));
|
|
126
171
|
});
|
|
127
172
|
DateField.displayName = 'DateField';
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
|
|
3
3
|
import { cn } from '../utils/cn';
|
|
4
4
|
const Root = forwardRef(function SidebarRoot({ ariaLabel = 'Menu lateral', children, className, desktopWidthClass = 'lg:w-72', isOpen, mobileWidthClass = 'w-72', }, ref) {
|
|
5
|
-
return (_jsx("aside", { ref: ref, "aria-label": ariaLabel, "data-open": isOpen, className: cn('border-app-border bg-background-secondary fixed inset-y-0 left-0 z-40 flex h-full w-20 shrink-0 -translate-x-full flex-col justify-between overflow-visible border-r px-2
|
|
5
|
+
return (_jsx("aside", { ref: ref, "aria-label": ariaLabel, "data-open": isOpen, className: cn('border-app-border bg-background-secondary fixed inset-y-0 left-0 z-40 flex h-full w-20 shrink-0 -translate-x-full flex-col justify-between overflow-visible border-r px-2 transition-[width,transform] duration-300 ease-in-out data-[open=true]:w-4/5 data-[open=true]:translate-x-0 md:static md:z-[60] md:w-20 md:translate-x-0 md:shadow-none md:data-[open=true]:w-72', isOpen && `${mobileWidthClass} ${desktopWidthClass}`, className), children: children }));
|
|
6
6
|
});
|
|
7
7
|
function Content({ ariaLabel = 'Navegação principal', children, className }) {
|
|
8
8
|
return (_jsx("nav", { "aria-label": ariaLabel, className: cn('flex min-h-0 w-full flex-1 flex-col', className), children: children }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsUnderlined.d.ts","sourceRoot":"","sources":["../../src/components/TabsUnderlined.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAK1D,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,KAAK,EACL,aAAa,EACb,aAAa,EACb,gBAAgB,EAChB,KAAK,GACN,EAAE,mBAAmB,+
|
|
1
|
+
{"version":3,"file":"TabsUnderlined.d.ts","sourceRoot":"","sources":["../../src/components/TabsUnderlined.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAK1D,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,KAAK,EACL,aAAa,EACb,aAAa,EACb,gBAAgB,EAChB,KAAK,GACN,EAAE,mBAAmB,+BA8CrB"}
|
|
@@ -4,15 +4,17 @@ import * as Tabs from '@radix-ui/react-tabs';
|
|
|
4
4
|
import { cn } from '../utils/cn';
|
|
5
5
|
export function TabsUnderlined({ className, contentClassName, defaultValue, items, listClassName, onValueChange, triggerClassName, value, }) {
|
|
6
6
|
const visibleItems = useMemo(() => items.filter((item) => item.visible ?? true), [items]);
|
|
7
|
-
const initialValue = defaultValue && visibleItems.some((item) => item.id === defaultValue)
|
|
7
|
+
const initialValue = defaultValue && visibleItems.some((item) => item.id === defaultValue)
|
|
8
|
+
? defaultValue
|
|
9
|
+
: visibleItems[0]?.id || '';
|
|
8
10
|
const [internalValue, setInternalValue] = useState(initialValue);
|
|
9
11
|
const resolvedValue = value ?? internalValue;
|
|
10
12
|
function handleValueChange(nextValue) {
|
|
11
13
|
setInternalValue(nextValue);
|
|
12
14
|
onValueChange?.(nextValue);
|
|
13
15
|
}
|
|
14
|
-
return (_jsx("div", { className: cn('border-app-border bg-surface flex h-full flex-col rounded-xl border', className), children: _jsxs(Tabs.Root, { value: resolvedValue, onValueChange: handleValueChange, className: "flex flex-1 flex-col", children: [_jsx(Tabs.List, { className: cn('border-app-border flex gap-1 border-b text-sm', listClassName), children: visibleItems.map((item) => (_jsx(TabTrigger, { value: item.id, className: triggerClassName, children: item.label }, item.id))) }), visibleItems.map((item) => (_jsx(Tabs.Content, { value: item.id, className: cn('flex h-full flex-1 flex-col overflow-hidden', contentClassName), children: item.children }, item.id)))] }) }));
|
|
16
|
+
return (_jsx("div", { className: cn('border-app-border bg-surface flex h-full flex-col rounded-xl border', className), children: _jsxs(Tabs.Root, { value: resolvedValue, onValueChange: handleValueChange, className: "flex flex-1 flex-col", children: [_jsx(Tabs.List, { className: cn('border-app-border flex gap-1 border-b bg-[color-mix(in_srgb,var(--foreground-muted)_5%,var(--surface))] text-sm', listClassName), children: visibleItems.map((item) => (_jsx(TabTrigger, { value: item.id, className: triggerClassName, children: item.label }, item.id))) }), visibleItems.map((item) => (_jsx(Tabs.Content, { value: item.id, className: cn('flex h-full flex-1 flex-col overflow-hidden', contentClassName), children: item.children }, item.id)))] }) }));
|
|
15
17
|
}
|
|
16
|
-
function TabTrigger({ children, className, value }) {
|
|
17
|
-
return (_jsx(Tabs.Trigger, { value: value, className: cn('text-foreground-muted hover:text-foreground focus-visible:ring-brand/50 data-[state=active]:border-app-border data-[state=active]:border-b-surface data-[state=active]:text-foreground -mb-px inline-flex cursor-pointer items-center border border-t-0 border-transparent px-3 py-2 text-sm font-medium transition-colors first:border-l-0 focus:outline-none focus-visible:ring-2', className), children: children }));
|
|
18
|
+
function TabTrigger({ children, className, value, }) {
|
|
19
|
+
return (_jsx(Tabs.Trigger, { value: value, className: cn('text-foreground-muted hover:text-foreground focus-visible:ring-brand/50 data-[state=active]:border-app-border data-[state=active]:border-b-surface data-[state=active]:bg-surface data-[state=active]:text-foreground -mb-px inline-flex cursor-pointer items-center border border-t-0 border-transparent bg-[color-mix(in_srgb,var(--foreground-muted)_7%,var(--surface))] px-3 py-2 text-sm font-medium transition-colors first:border-l-0 hover:bg-[color-mix(in_srgb,var(--foreground-muted)_10%,var(--surface))] focus:outline-none focus-visible:ring-2', className), children: children }));
|
|
18
20
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -21,7 +21,7 @@ export { SearchField, type SearchFieldProps } from './components/SearchField';
|
|
|
21
21
|
export { SelectionField, type SelectionDisplayValue, type SelectionFieldProps, type SelectionFieldSize, type SelectionFieldVariant, } from './components/SelectionField';
|
|
22
22
|
export { Switch, type SwitchProps } from './components/Switch';
|
|
23
23
|
export { TextareaField, type TextareaFieldProps } from './components/TextareaField';
|
|
24
|
-
export { DateField, type DateFieldProps } from './components/DateField';
|
|
24
|
+
export { DateField, type DateFieldMode, type DateFieldProps } from './components/DateField';
|
|
25
25
|
export { DecimalField, type DecimalFieldProps } from './components/DecimalField';
|
|
26
26
|
export { Pagination, type PaginationProps, type PaginationSize } from './components/Pagination';
|
|
27
27
|
export { Page, type PageActionButtonProps, type PageActionsAlign, type PageActionsElement, type PageActionsHelpContentProps, type PageActionsPreferences, type PageActionsPosition, type PageActionsProps, type PageActionsSeparatorProps, type PageActionsSize, type PageDescriptionProps, type PageTitleProps, } from './components/Page';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAChC,OAAO,EACL,QAAQ,EACR,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EACzB,KAAK,sBAAsB,EAC3B,KAAK,yBAAyB,EAC9B,KAAK,mBAAmB,GACzB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,oBAAoB,EACpB,eAAe,EACf,wBAAwB,EACxB,KAAK,yBAAyB,EAC9B,KAAK,2BAA2B,EAChC,KAAK,oBAAoB,EACzB,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,EAC1B,KAAK,6BAA6B,GACnC,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC/E,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpG,OAAO,EACL,kBAAkB,EAClB,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,EAC5B,KAAK,yBAAyB,EAC9B,KAAK,8BAA8B,GACpC,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACpF,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AACxF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACnG,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AACjF,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACpF,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,KAAK,EAAE,KAAK,cAAc,EAAE,KAAK,YAAY,EAAE,KAAK,cAAc,EAAE,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACnK,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,KAAK,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AACrH,OAAO,EAAE,SAAS,EAAE,KAAK,qBAAqB,EAAE,KAAK,cAAc,EAAE,KAAK,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC3H,OAAO,EAAE,UAAU,EAAE,KAAK,mBAAmB,EAAE,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AACrG,OAAO,EAAE,UAAU,EAAE,KAAK,oBAAoB,EAAE,KAAK,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC1G,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAChG,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC9E,OAAO,EACL,cAAc,EACd,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,EACvB,KAAK,qBAAqB,GAC3B,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACpF,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/styles.css
CHANGED
|
@@ -1914,6 +1914,12 @@ h2.react-datepicker__current-month {
|
|
|
1914
1914
|
background-color: color-mix(in srgb,var(--foreground-muted) 5%,var(--surface));
|
|
1915
1915
|
}
|
|
1916
1916
|
}
|
|
1917
|
+
.bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_7\%\,var\(--surface\)\)\] {
|
|
1918
|
+
background-color: var(--foreground-muted);
|
|
1919
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
1920
|
+
background-color: color-mix(in srgb,var(--foreground-muted) 7%,var(--surface));
|
|
1921
|
+
}
|
|
1922
|
+
}
|
|
1917
1923
|
.bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_8\%\,var\(--surface\)\)\] {
|
|
1918
1924
|
background-color: var(--foreground-muted);
|
|
1919
1925
|
@supports (color: color-mix(in lab, red, red)) {
|
|
@@ -2608,10 +2614,6 @@ h2.react-datepicker__current-month {
|
|
|
2608
2614
|
--tw-shadow: 0 16px 36px -24px var(--tw-shadow-color, color-mix(in srgb,#000 50%,transparent));
|
|
2609
2615
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
2610
2616
|
}
|
|
2611
|
-
.shadow-\[0_20px_45px_-20px_color-mix\(in_srgb\,\#000_45\%\,transparent\)\] {
|
|
2612
|
-
--tw-shadow: 0 20px 45px -20px var(--tw-shadow-color, color-mix(in srgb,#000 45%,transparent));
|
|
2613
|
-
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
2614
|
-
}
|
|
2615
2617
|
.shadow-\[inset_0_0_0_1px_color-mix\(in_srgb\,\#fff_32\%\,transparent\)\,0_8px_18px_-14px_rgba\(0\,0\,0\,0\.55\)\] {
|
|
2616
2618
|
--tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, color-mix(in srgb,#fff 32%,transparent)), 0 8px 18px -14px var(--tw-shadow-color, rgba(0,0,0,0.55));
|
|
2617
2619
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
@@ -3025,6 +3027,16 @@ h2.react-datepicker__current-month {
|
|
|
3025
3027
|
}
|
|
3026
3028
|
}
|
|
3027
3029
|
}
|
|
3030
|
+
.hover\:bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_10\%\,var\(--surface\)\)\] {
|
|
3031
|
+
&:hover {
|
|
3032
|
+
@media (hover: hover) {
|
|
3033
|
+
background-color: var(--foreground-muted);
|
|
3034
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
3035
|
+
background-color: color-mix(in srgb,var(--foreground-muted) 10%,var(--surface));
|
|
3036
|
+
}
|
|
3037
|
+
}
|
|
3038
|
+
}
|
|
3039
|
+
}
|
|
3028
3040
|
.hover\:bg-\[color-mix\(in_srgb\,var\(--status-danger-text\,\#b91c1c\)_88\%\,\#000\)\] {
|
|
3029
3041
|
&:hover {
|
|
3030
3042
|
@media (hover: hover) {
|
|
@@ -3567,6 +3579,11 @@ h2.react-datepicker__current-month {
|
|
|
3567
3579
|
border-bottom-color: var(--color-surface);
|
|
3568
3580
|
}
|
|
3569
3581
|
}
|
|
3582
|
+
.data-\[state\=active\]\:bg-surface {
|
|
3583
|
+
&[data-state="active"] {
|
|
3584
|
+
background-color: var(--color-surface);
|
|
3585
|
+
}
|
|
3586
|
+
}
|
|
3570
3587
|
.data-\[state\=active\]\:text-foreground {
|
|
3571
3588
|
&[data-state="active"] {
|
|
3572
3589
|
color: var(--color-foreground);
|
|
@@ -3780,14 +3797,6 @@ h2.react-datepicker__current-month {
|
|
|
3780
3797
|
}
|
|
3781
3798
|
}
|
|
3782
3799
|
}
|
|
3783
|
-
.md\:data-\[open\=true\]\:shadow-\[4px_0_20px_-6px_color-mix\(in_srgb\,\#000_15\%\,transparent\)\] {
|
|
3784
|
-
@media (width >= 48rem) {
|
|
3785
|
-
&[data-open="true"] {
|
|
3786
|
-
--tw-shadow: 4px 0 20px -6px var(--tw-shadow-color, color-mix(in srgb,#000 15%,transparent));
|
|
3787
|
-
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
3788
|
-
}
|
|
3789
|
-
}
|
|
3790
|
-
}
|
|
3791
3800
|
.lg\:w-72 {
|
|
3792
3801
|
@media (width >= 64rem) {
|
|
3793
3802
|
width: calc(var(--spacing) * 72);
|