@g4rcez/components 2.2.8 → 2.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/core/button.d.ts.map +1 -1
- package/dist/components/core/polymorph.d.ts.map +1 -1
- package/dist/components/core/slot.d.ts +1 -1
- package/dist/components/core/slot.d.ts.map +1 -1
- package/dist/components/core/slot.jsx +28 -35
- package/dist/components/core/tag.jsx +1 -1
- package/dist/components/core/typography.d.ts.map +1 -1
- package/dist/components/core/typography.jsx +16 -20
- package/dist/components/display/alert.d.ts.map +1 -1
- package/dist/components/display/alert.jsx +22 -24
- package/dist/components/display/calendar.d.ts.map +1 -1
- package/dist/components/display/calendar.jsx +5 -7
- package/dist/components/display/card.d.ts.map +1 -1
- package/dist/components/display/card.jsx +5 -5
- package/dist/components/display/empty.jsx +1 -1
- package/dist/components/display/notifications.d.ts.map +1 -1
- package/dist/components/display/notifications.jsx +35 -35
- package/dist/components/display/progress.d.ts.map +1 -1
- package/dist/components/display/progress.jsx +6 -8
- package/dist/components/display/shortcut.jsx +1 -1
- package/dist/components/display/skeleton.d.ts.map +1 -1
- package/dist/components/display/skeleton.jsx +3 -5
- package/dist/components/display/step.d.ts.map +1 -1
- package/dist/components/display/step.jsx +27 -27
- package/dist/components/display/tabs.d.ts.map +1 -1
- package/dist/components/display/tabs.jsx +5 -7
- package/dist/components/floating/command-palette.d.ts.map +1 -1
- package/dist/components/floating/command-palette.jsx +40 -40
- package/dist/components/floating/dropdown.d.ts.map +1 -1
- package/dist/components/floating/dropdown.jsx +15 -15
- package/dist/components/floating/modal.d.ts.map +1 -1
- package/dist/components/floating/modal.jsx +73 -67
- package/dist/components/floating/tooltip.d.ts.map +1 -1
- package/dist/components/floating/tooltip.jsx +2 -8
- package/dist/components/floating/wizard.d.ts +1 -1
- package/dist/components/floating/wizard.d.ts.map +1 -1
- package/dist/components/floating/wizard.jsx +50 -53
- package/dist/components/form/autocomplete.d.ts.map +1 -1
- package/dist/components/form/autocomplete.jsx +38 -35
- package/dist/components/form/checkbox.jsx +2 -2
- package/dist/components/form/date-picker.d.ts.map +1 -1
- package/dist/components/form/date-picker.jsx +14 -14
- package/dist/components/form/file-upload.jsx +13 -13
- package/dist/components/form/free-text.d.ts.map +1 -1
- package/dist/components/form/free-text.jsx +2 -2
- package/dist/components/form/input-field.d.ts.map +1 -1
- package/dist/components/form/input-field.jsx +42 -41
- package/dist/components/form/multi-select.d.ts.map +1 -1
- package/dist/components/form/multi-select.jsx +56 -56
- package/dist/components/form/select.d.ts.map +1 -1
- package/dist/components/form/select.jsx +13 -13
- package/dist/components/form/slider.d.ts.map +1 -1
- package/dist/components/form/slider.jsx +10 -10
- package/dist/components/form/transfer-list.jsx +3 -3
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +1 -0
- package/dist/components/page-calendar/calendar-header.d.ts +16 -0
- package/dist/components/page-calendar/calendar-header.d.ts.map +1 -0
- package/dist/components/page-calendar/calendar-header.jsx +81 -0
- package/dist/components/page-calendar/day-view.d.ts +12 -0
- package/dist/components/page-calendar/day-view.d.ts.map +1 -0
- package/dist/components/page-calendar/day-view.jsx +84 -0
- package/dist/components/page-calendar/event-pill.d.ts +9 -0
- package/dist/components/page-calendar/event-pill.d.ts.map +1 -0
- package/dist/components/page-calendar/event-pill.jsx +23 -0
- package/dist/components/page-calendar/index.d.ts +4 -0
- package/dist/components/page-calendar/index.d.ts.map +1 -0
- package/dist/components/page-calendar/index.js +2 -0
- package/dist/components/page-calendar/month-view.d.ts +11 -0
- package/dist/components/page-calendar/month-view.d.ts.map +1 -0
- package/dist/components/page-calendar/month-view.jsx +47 -0
- package/dist/components/page-calendar/page-calendar.d.ts +18 -0
- package/dist/components/page-calendar/page-calendar.d.ts.map +1 -0
- package/dist/components/page-calendar/page-calendar.jsx +39 -0
- package/dist/components/page-calendar/page-calendar.types.d.ts +18 -0
- package/dist/components/page-calendar/page-calendar.types.d.ts.map +1 -0
- package/dist/components/page-calendar/page-calendar.types.js +1 -0
- package/dist/components/page-calendar/page-calendar.utils.d.ts +18 -0
- package/dist/components/page-calendar/page-calendar.utils.d.ts.map +1 -0
- package/dist/components/page-calendar/page-calendar.utils.js +71 -0
- package/dist/components/page-calendar/week-view.d.ts +11 -0
- package/dist/components/page-calendar/week-view.d.ts.map +1 -0
- package/dist/components/page-calendar/week-view.jsx +61 -0
- package/dist/components/table/filter.jsx +4 -4
- package/dist/components/table/index.d.ts.map +1 -1
- package/dist/components/table/index.jsx +10 -10
- package/dist/components/table/inner-table.d.ts.map +1 -1
- package/dist/components/table/inner-table.jsx +18 -18
- package/dist/components/table/metadata.d.ts.map +1 -1
- package/dist/components/table/metadata.jsx +29 -30
- package/dist/components/table/pagination.jsx +1 -1
- package/dist/components/table/row.d.ts.map +1 -1
- package/dist/components/table/row.jsx +17 -17
- package/dist/components/table/sort.jsx +1 -1
- package/dist/components/table/table-lib.d.ts.map +1 -1
- package/dist/components/table/table-lib.js +1 -2
- package/dist/components/table/thead.d.ts.map +1 -1
- package/dist/components/table/thead.jsx +5 -5
- package/dist/config/context.d.ts.map +1 -1
- package/dist/config/default-translations.d.ts +10 -0
- package/dist/config/default-translations.d.ts.map +1 -1
- package/dist/config/default-translations.jsx +11 -1
- package/dist/constants.d.ts.map +1 -1
- package/dist/hooks/use-components-provider.d.ts.map +1 -1
- package/dist/hooks/use-components-provider.jsx +2 -2
- package/dist/hooks/use-form.d.ts.map +1 -1
- package/dist/hooks/use-input-id.d.ts.map +1 -1
- package/dist/hooks/use-is-coarse-device.js +1 -1
- package/dist/hooks/use-preferences.d.ts.map +1 -1
- package/dist/hooks/use-resize-observer.d.ts.map +1 -1
- package/dist/hooks/use-translations.d.ts +10 -0
- package/dist/hooks/use-translations.d.ts.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +10121 -9704
- package/dist/index.mjs.map +1 -1
- package/dist/index.umd.js +14 -14
- package/dist/index.umd.js.map +1 -1
- package/dist/lib/dom.d.ts.map +1 -1
- package/dist/lib/fns.d.ts.map +1 -1
- package/dist/lib/fns.js +2 -2
- package/dist/preset/src/styles/theme.types.d.ts.map +1 -1
- package/dist/styles/theme.types.d.ts.map +1 -1
- package/package.json +289 -289
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/core/button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,WAAW,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EAAa,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCb,CAAC;AAUF,KAAK,QAAQ,GAAG,WAAW,CAAC,OAAO,QAAQ,CAAC,CAAC;AAE7C,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI,iBAAiB,CAC/E,gBAAgB,
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/core/button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,WAAW,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EAAa,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCb,CAAC;AAUF,KAAK,QAAQ,GAAG,WAAW,CAAC,OAAO,QAAQ,CAAC,CAAC;AAE7C,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI,iBAAiB,CAC/E,gBAAgB,CACZ,QAAQ,GACJ,OAAO,CAAC;IACJ,oCAAoC;IACpC,IAAI,EAAE,KAAK,CAAC;IACZ,+CAA+C;IAC/C,OAAO,EAAE,OAAO,CAAC;CACpB,CAAC,EACN,CAAC,CACJ,CACJ,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,MAAM,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAAE,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAwBjF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"polymorph.d.ts","sourceRoot":"","sources":["../../../src/components/core/polymorph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,OAAO,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC;AAE9E,MAAM,MAAM,gBAAgB,CAAC,KAAK,EAAE,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,KAAK,GAAG;
|
|
1
|
+
{"version":3,"file":"polymorph.d.ts","sourceRoot":"","sources":["../../../src/components/core/polymorph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,OAAO,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC;AAE9E,MAAM,MAAM,gBAAgB,CAAC,KAAK,EAAE,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,KAAK,GAAG;IACvE,EAAE,CAAC,EAAE,CAAC,CAAC;CACV,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,GAAG,IAAI,GAAG,KAAK,CAAC,GAAG;IAC3C,GAAG,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;CACxC,CAAC;AAEN,eAAO,MAAM,SAAS,kFAGpB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slot.d.ts","sourceRoot":"","sources":["../../../src/components/core/slot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"slot.d.ts","sourceRoot":"","sources":["../../../src/components/core/slot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgD/B,MAAM,MAAM,MAAM,CAAC,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AAI1D,UAAU,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACzD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAiBD,wBAAgB,UAAU,CAAC,SAAS,EAAE,MAAM,iFAyC3C;AAED,eAAO,MAAM,IAAI,+EAAqB,CAAC;AAgCvC,UAAU,cAAc;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,UAAU,kBAAmB,SAAQ,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC;IACzD,SAAS,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,eAAe,CAAC,SAAS,EAAE,MAAM,sBAOhD"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
const REACT_LAZY_TYPE = Symbol.for(
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
const REACT_LAZY_TYPE = Symbol.for("react.lazy");
|
|
3
3
|
function setRef(ref, value) {
|
|
4
|
-
if (typeof ref ===
|
|
4
|
+
if (typeof ref === "function") {
|
|
5
5
|
return ref(value);
|
|
6
6
|
}
|
|
7
7
|
else if (ref !== null && ref !== undefined) {
|
|
@@ -13,7 +13,7 @@ function composeRefs(...refs) {
|
|
|
13
13
|
let hasCleanup = false;
|
|
14
14
|
const cleanups = refs.map((ref) => {
|
|
15
15
|
const cleanup = setRef(ref, node);
|
|
16
|
-
if (!hasCleanup && typeof cleanup ==
|
|
16
|
+
if (!hasCleanup && typeof cleanup == "function") {
|
|
17
17
|
hasCleanup = true;
|
|
18
18
|
}
|
|
19
19
|
return cleanup;
|
|
@@ -22,7 +22,7 @@ function composeRefs(...refs) {
|
|
|
22
22
|
return () => {
|
|
23
23
|
for (let i = 0; i < cleanups.length; i++) {
|
|
24
24
|
const cleanup = cleanups[i];
|
|
25
|
-
if (typeof cleanup ==
|
|
25
|
+
if (typeof cleanup == "function") {
|
|
26
26
|
cleanup();
|
|
27
27
|
}
|
|
28
28
|
else {
|
|
@@ -33,23 +33,23 @@ function composeRefs(...refs) {
|
|
|
33
33
|
}
|
|
34
34
|
};
|
|
35
35
|
}
|
|
36
|
-
const use = React[
|
|
36
|
+
const use = React[" use ".trim().toString()];
|
|
37
37
|
function isPromiseLike(value) {
|
|
38
|
-
return typeof value ===
|
|
38
|
+
return typeof value === "object" && value !== null && "then" in value;
|
|
39
39
|
}
|
|
40
40
|
function isLazyComponent(element) {
|
|
41
41
|
return (element != null &&
|
|
42
|
-
typeof element ===
|
|
43
|
-
|
|
42
|
+
typeof element === "object" &&
|
|
43
|
+
"$$typeof" in element &&
|
|
44
44
|
element.$$typeof === REACT_LAZY_TYPE &&
|
|
45
|
-
|
|
45
|
+
"_payload" in element &&
|
|
46
46
|
isPromiseLike(element._payload));
|
|
47
47
|
}
|
|
48
48
|
export function createSlot(ownerName) {
|
|
49
49
|
const SlotClone = createSlotClone(ownerName);
|
|
50
50
|
const Slot = React.forwardRef((props, forwardedRef) => {
|
|
51
51
|
let { children, ...slotProps } = props;
|
|
52
|
-
if (isLazyComponent(children) && typeof use ===
|
|
52
|
+
if (isLazyComponent(children) && typeof use === "function") {
|
|
53
53
|
children = use(children._payload);
|
|
54
54
|
}
|
|
55
55
|
const childrenArray = React.Children.toArray(children);
|
|
@@ -63,32 +63,28 @@ export function createSlot(ownerName) {
|
|
|
63
63
|
// in grabbing its children (`newElement.props.children`)
|
|
64
64
|
if (React.Children.count(newElement) > 1)
|
|
65
65
|
return React.Children.only(null);
|
|
66
|
-
return React.isValidElement(newElement)
|
|
67
|
-
? newElement.props.children
|
|
68
|
-
: null;
|
|
66
|
+
return React.isValidElement(newElement) ? newElement.props.children : null;
|
|
69
67
|
}
|
|
70
68
|
else {
|
|
71
69
|
return child;
|
|
72
70
|
}
|
|
73
71
|
});
|
|
74
72
|
return (<SlotClone {...slotProps} ref={forwardedRef}>
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
: null}
|
|
78
|
-
</SlotClone>);
|
|
73
|
+
{React.isValidElement(newElement) ? React.cloneElement(newElement, undefined, newChildren) : null}
|
|
74
|
+
</SlotClone>);
|
|
79
75
|
}
|
|
80
76
|
return (<SlotClone {...slotProps} ref={forwardedRef}>
|
|
81
|
-
|
|
82
|
-
|
|
77
|
+
{children}
|
|
78
|
+
</SlotClone>);
|
|
83
79
|
});
|
|
84
80
|
Slot.displayName = `${ownerName}.Slot`;
|
|
85
81
|
return Slot;
|
|
86
82
|
}
|
|
87
|
-
export const Slot = createSlot(
|
|
83
|
+
export const Slot = createSlot("Slot");
|
|
88
84
|
function createSlotClone(ownerName) {
|
|
89
85
|
const SlotClone = React.forwardRef((props, forwardedRef) => {
|
|
90
86
|
let { children, ...slotProps } = props;
|
|
91
|
-
if (isLazyComponent(children) && typeof use ===
|
|
87
|
+
if (isLazyComponent(children) && typeof use === "function") {
|
|
92
88
|
children = use(children._payload);
|
|
93
89
|
}
|
|
94
90
|
if (React.isValidElement(children)) {
|
|
@@ -105,7 +101,7 @@ function createSlotClone(ownerName) {
|
|
|
105
101
|
SlotClone.displayName = `${ownerName}.SlotClone`;
|
|
106
102
|
return SlotClone;
|
|
107
103
|
}
|
|
108
|
-
const SLOTTABLE_IDENTIFIER = Symbol(
|
|
104
|
+
const SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
|
|
109
105
|
export function createSlottable(ownerName) {
|
|
110
106
|
const Slottable = ({ children }) => {
|
|
111
107
|
return <>{children}</>;
|
|
@@ -114,12 +110,9 @@ export function createSlottable(ownerName) {
|
|
|
114
110
|
Slottable.__radixId = SLOTTABLE_IDENTIFIER;
|
|
115
111
|
return Slottable;
|
|
116
112
|
}
|
|
117
|
-
const Slottable = createSlottable(
|
|
113
|
+
const Slottable = createSlottable("Slottable");
|
|
118
114
|
function isSlottable(child) {
|
|
119
|
-
return (React.isValidElement(child) &&
|
|
120
|
-
typeof child.type === 'function' &&
|
|
121
|
-
'__radixId' in child.type &&
|
|
122
|
-
child.type.__radixId === SLOTTABLE_IDENTIFIER);
|
|
115
|
+
return (React.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER);
|
|
123
116
|
}
|
|
124
117
|
function mergeProps(slotProps, childProps) {
|
|
125
118
|
const overrideProps = { ...childProps };
|
|
@@ -139,23 +132,23 @@ function mergeProps(slotProps, childProps) {
|
|
|
139
132
|
overrideProps[propName] = slotPropValue;
|
|
140
133
|
}
|
|
141
134
|
}
|
|
142
|
-
else if (propName ===
|
|
135
|
+
else if (propName === "style") {
|
|
143
136
|
overrideProps[propName] = { ...slotPropValue, ...childPropValue };
|
|
144
137
|
}
|
|
145
|
-
else if (propName ===
|
|
146
|
-
overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(
|
|
138
|
+
else if (propName === "className") {
|
|
139
|
+
overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
|
|
147
140
|
}
|
|
148
141
|
}
|
|
149
142
|
return { ...slotProps, ...overrideProps };
|
|
150
143
|
}
|
|
151
144
|
function getElementRef(element) {
|
|
152
|
-
let getter = Object.getOwnPropertyDescriptor(element.props,
|
|
153
|
-
let mayWarn = getter &&
|
|
145
|
+
let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
|
|
146
|
+
let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
|
|
154
147
|
if (mayWarn) {
|
|
155
148
|
return element.ref;
|
|
156
149
|
}
|
|
157
|
-
getter = Object.getOwnPropertyDescriptor(element,
|
|
158
|
-
mayWarn = getter &&
|
|
150
|
+
getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
|
|
151
|
+
mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
|
|
159
152
|
if (mayWarn) {
|
|
160
153
|
return element.props.ref;
|
|
161
154
|
}
|
|
@@ -24,7 +24,7 @@ const variants = {
|
|
|
24
24
|
loading: "animate-pulse bg-disabled duration-700 opacity-70",
|
|
25
25
|
},
|
|
26
26
|
};
|
|
27
|
-
const indicatorVariant = cva("size-2
|
|
27
|
+
const indicatorVariant = cva("size-2 aspect-square rounded-full border-0", {
|
|
28
28
|
variants: {
|
|
29
29
|
theme: {
|
|
30
30
|
info: "bg-info",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../src/components/core/typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAY,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,CAAC,GAAG,CAAC,
|
|
1
|
+
{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../src/components/core/typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAY,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,CAAC,GAAG,CAAC,sBAAgF,CAAC;AAErI,eAAO,MAAM,WAAW,GAAI,OAAO,cAAc,CAAC,GAAG,CAAC,sBAAwF,CAAC;AAE/I,MAAM,MAAM,SAAS,GAAG;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,KAAK,CAAC;IACb,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,sBAO7D,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,OAAO,iBAAiB,CAAC;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,sBAKpE,CAAC;AAEF,KAAK,eAAe,GAAG;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,KAAK,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,iBAAiB,CAAC,eAAe,CAAC,sBASnE,CAAC"}
|
|
@@ -1,26 +1,22 @@
|
|
|
1
1
|
import React, { Fragment } from "react";
|
|
2
2
|
import { css } from "../../lib/dom";
|
|
3
|
-
export const Paragraph = (props) =>
|
|
4
|
-
export const Description = (props) =>
|
|
3
|
+
export const Paragraph = (props) => <p {...props} className={css("text-base leading-snug", props.className)}/>;
|
|
4
|
+
export const Description = (props) => <p {...props} className={css("mb-kilo text-sm text-secondary", props.className)}/>;
|
|
5
5
|
export const Info = (props) => (<div className={css(`flex ${props.row ? "flex-row items-center" : "flex-col"} gap-1`, props.className)}>
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
</Fragment>
|
|
12
|
-
</div>);
|
|
6
|
+
<Fragment>
|
|
7
|
+
<span className="text-sm font-medium tracking-wide">{props.row ? `${props.label}:` : props.label}</span>
|
|
8
|
+
<span className={css(props.disabled ? "text-disabled" : "", props.row ? "w-fit text-base" : "w-full text-lg")}>{props.children}</span>
|
|
9
|
+
</Fragment>
|
|
10
|
+
</div>);
|
|
13
11
|
export const PageTitle = (props) => (<div>
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
12
|
+
<h2 className="typography text-3xl font-bold tracking-wide">{props.title}</h2>
|
|
13
|
+
<p className="typography text-secondary">{props.children}</p>
|
|
14
|
+
</div>);
|
|
17
15
|
export const PageHeader = (props) => {
|
|
18
|
-
return (<header className="flex flex-row flex-wrap
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
</div>
|
|
25
|
-
</header>);
|
|
16
|
+
return (<header className="gap-mega flex flex-row flex-wrap items-center justify-between">
|
|
17
|
+
<div>
|
|
18
|
+
<PageTitle title={props.title}>{props.description}</PageTitle>
|
|
19
|
+
</div>
|
|
20
|
+
<div className="gap-kilo flex flex-wrap items-center">{props.children}</div>
|
|
21
|
+
</header>);
|
|
26
22
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/display/alert.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,eAAe,EAAU,MAAM,cAAc,CAAC;AAExE,OAAO,KAAK,EAAE,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAa,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAahE,KAAK,aAAa,GAAG,eAAe,CAAC,SAAS,CAAC,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC;AAEpE,eAAO,MAAM,QAAQ,GAAI,OAAO,iBAAiB,CAAC,aAAa,CAAC,sBAiB/D,CAAC;AAEF,QAAA,MAAM,aAAa;;;;;;;;;;CAUlB,CAAC;AAOF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,IAAI,gBAAgB,
|
|
1
|
+
{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/display/alert.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,eAAe,EAAU,MAAM,cAAc,CAAC;AAExE,OAAO,KAAK,EAAE,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAa,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAahE,KAAK,aAAa,GAAG,eAAe,CAAC,SAAS,CAAC,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC;AAEpE,eAAO,MAAM,QAAQ,GAAI,OAAO,iBAAiB,CAAC,aAAa,CAAC,sBAiB/D,CAAC;AAEF,QAAA,MAAM,aAAa;;;;;;;;;;CAUlB,CAAC;AAOF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,IAAI,gBAAgB,CAC1E,WAAW,CAAC,OAAO,aAAa,CAAC,GAC7B,OAAO,CAAC;IACJ,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC,CAAC,EACN,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,GAiDxE,CAAC"}
|
|
@@ -15,8 +15,8 @@ const transition = {
|
|
|
15
15
|
ease: [0.04, 0.62, 0.23, 0.98],
|
|
16
16
|
};
|
|
17
17
|
export const Collapse = (props) => (<motion.div {...props} layout layoutRoot layoutScroll initial={false} variants={variants} exit={variants.false} transition={transition} aria-hidden={!props.open} data-component="collapse" animate={props.open.toString()} className={css("aria-hidden:pointer-events-none", props.className)}>
|
|
18
|
-
|
|
19
|
-
|
|
18
|
+
{props.children}
|
|
19
|
+
</motion.div>);
|
|
20
20
|
const themeVariants = {
|
|
21
21
|
theme: {
|
|
22
22
|
primary: "bg-alert-primary-bg text-alert-primary-text border-alert-primary-border",
|
|
@@ -35,26 +35,24 @@ const alertVariants = cva("p-4 w-full block border relative rounded-lg text-sm",
|
|
|
35
35
|
export const Alert = forwardRef(function Alert({ className, theme, Icon, onClose, open = true, ...props }, ref) {
|
|
36
36
|
const close = () => onClose?.(false);
|
|
37
37
|
return (<AnimatePresence presenceAffectsLayout propagate mode="sync">
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
</
|
|
58
|
-
</motion.div> : null}
|
|
59
|
-
</AnimatePresence>);
|
|
38
|
+
{open ? (<motion.div data-open={!!open} aria-hidden={!open} data-component="alert" className={css("isolate w-full", open ? "pointer-events-auto" : "pointer-events-none")}>
|
|
39
|
+
<Collapse data-open={!!open} open={!!open}>
|
|
40
|
+
<Polymorph {...props} ref={ref} role="alert" data-theme={theme} as={props.as ?? "div"} className={css(alertVariants({ theme }), className)}>
|
|
41
|
+
<div className="grid grid-cols-[auto_1fr] gap-base">
|
|
42
|
+
{onClose !== undefined && open ? (<button type="button" onClick={close} className="absolute right-3 top-3 text-foreground transition-colors duration-300 ease-in-out hover:text-danger">
|
|
43
|
+
<XIcon size={20}/>
|
|
44
|
+
</button>) : null}
|
|
45
|
+
<div className={css("flex items-center gap-2", props.title ? "" : "w-fit")}>
|
|
46
|
+
{!Icon && theme === "success" ? <CheckCircleIcon aria-hidden="true" size={20}/> : null}
|
|
47
|
+
{!Icon && theme === "info" ? <InfoIcon aria-hidden="true" size={20}/> : null}
|
|
48
|
+
{!Icon && theme === "danger" ? <TriangleAlertIcon aria-hidden="true" size={20}/> : null}
|
|
49
|
+
{Icon}
|
|
50
|
+
</div>
|
|
51
|
+
{props.title ? <h4 className="tracking-3 col-start-2 text-balance text-lg font-semibold">{props.title}</h4> : null}
|
|
52
|
+
<div className="col-start-2 w-full">{props.children}</div>
|
|
53
|
+
</div>
|
|
54
|
+
</Polymorph>
|
|
55
|
+
</Collapse>
|
|
56
|
+
</motion.div>) : null}
|
|
57
|
+
</AnimatePresence>);
|
|
60
58
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/components/display/calendar.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAEjE,OAAqB,EAAE,KAAK,OAAO,EAAE,MAAM,gBAAgB,CAAC;AA0B5D,KAAK,KAAK,GAAG;IAAE,IAAI,CAAC,EAAE,IAAI,CAAC;IAAC,EAAE,CAAC,EAAE,IAAI,CAAA;CAAE,CAAC;AAExC,KAAK,YAAY,GAAG,CAAC,CAAC,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;AAElD,KAAK,aAAa,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,SAAS,KAAK,IAAI,CAAC;AAEpD,KAAK,SAAS,GAAG,CAAC,CAAC,EAAE,IAAI,KAAK,MAAM,CAAC;AAErC,KAAK,cAAc,GAAG,OAAO,CAAC;IAC1B,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,IAAI,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,MAAM,CAAC,CAAC;IAC1C,QAAQ,EAAE,MAAM,GAAG,CAAC,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,MAAM,CAAC,CAAC;CACxD,CAAC,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC;IAChC,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE,KAAK,CAAC;IACb,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/components/display/calendar.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAEjE,OAAqB,EAAE,KAAK,OAAO,EAAE,MAAM,gBAAgB,CAAC;AA0B5D,KAAK,KAAK,GAAG;IAAE,IAAI,CAAC,EAAE,IAAI,CAAC;IAAC,EAAE,CAAC,EAAE,IAAI,CAAA;CAAE,CAAC;AAExC,KAAK,YAAY,GAAG,CAAC,CAAC,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;AAElD,KAAK,aAAa,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,SAAS,KAAK,IAAI,CAAC;AAEpD,KAAK,SAAS,GAAG,CAAC,CAAC,EAAE,IAAI,KAAK,MAAM,CAAC;AAErC,KAAK,cAAc,GAAG,OAAO,CAAC;IAC1B,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,IAAI,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,MAAM,CAAC,CAAC;IAC1C,QAAQ,EAAE,MAAM,GAAG,CAAC,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,MAAM,CAAC,CAAC;CACxD,CAAC,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC;IAChC,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE,KAAK,CAAC;IACb,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,cAAc,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC3B,iBAAiB,EAAE,OAAO,CAAC;IAC3B,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,YAAY,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,aAAa,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IACjC,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IACtC,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,CAAC,CAAC;IACtC,QAAQ,EAAE,aAAa,GAAG,YAAY,CAAC;IACvC,UAAU,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;CAC5C,CAAC,CAAC;AA2IH,eAAO,MAAM,QAAQ,GAAI,qLAgBtB,aAAa,sBAwRf,CAAC"}
|
|
@@ -79,8 +79,9 @@ const CalendarBody = (props) => {
|
|
|
79
79
|
const sameMonth = isSameMonth(day, props.stateDate);
|
|
80
80
|
const disableDate = !sameMonth || disabledByFn;
|
|
81
81
|
const isInRange = props.rangeMode ? inRange(props.range?.from, day, props.range?.to) : false;
|
|
82
|
-
return (<td key={key} align="center" className={css("relative", Is.function(props.styles?.dayFrame) ? props.styles?.dayFrame(day) : props.styles?.dayFrame)}>
|
|
83
|
-
<button type="button" data-date={key} disabled={disabledByFn} data-samemonth={sameMonth} data-range={props.rangeMode} onClick={props.dispatch.onSelectDate} data-view={props.stateDate.getMonth().toString()} className={css(`flex size-
|
|
82
|
+
return (<td key={key} align="center" className={css("relative p-1", Is.function(props.styles?.dayFrame) ? props.styles?.dayFrame(day) : props.styles?.dayFrame)}>
|
|
83
|
+
<button type="button" data-date={key} disabled={disabledByFn} data-samemonth={sameMonth} data-range={props.rangeMode} onClick={props.dispatch.onSelectDate} data-view={props.stateDate.getMonth().toString()} className={css(`relative flex size-9 items-center justify-center rounded-full proportional-nums disabled:cursor-not-allowed ${today ? "text-emphasis" : ""} ${disableDate ? "text-disabled" : ""} ${isSelected ? "bg-primary text-primary-foreground" : ""}`, isInRange && props.markRange ? "size-9 border border-dashed border-card-border" : "", Is.function(props.styles?.day) ? props.styles?.day(day) : props.styles?.day)}>
|
|
84
|
+
<div></div>
|
|
84
85
|
{day.getDate()}
|
|
85
86
|
{isSelected && props.stateRange.from?.toISOString() === key ? (<span className="absolute -top-2 left-0 h-full w-full">
|
|
86
87
|
<span className="text-xs text-foreground">
|
|
@@ -261,9 +262,6 @@ export const Calendar = ({ RenderOnDay, changeOnlyOnClick = false, labelRange, d
|
|
|
261
262
|
<motion.button layout type="button" data-focustrap="next" variants={removeImmediately} onClick={dispatch.nextMonth} title={translations.calendarNextMonth} className="z-calendar rounded-full p-1.5 hover:bg-primary hover:text-primary-foreground">
|
|
262
263
|
<ChevronRightIcon className="h-4 w-4"/>
|
|
263
264
|
</motion.button>
|
|
264
|
-
<div className="absolute inset-0" style={{
|
|
265
|
-
backgroundImage: "linear-gradient(to right, hsla(var(--card-background)) 15%, transparent 30%, transparent 70%, hsla(var(--card-background)) 85%)",
|
|
266
|
-
}}/>
|
|
267
265
|
</header>
|
|
268
266
|
<motion.table className="mt-2 table min-w-full table-auto border-0">
|
|
269
267
|
<thead>
|
|
@@ -278,8 +276,8 @@ export const Calendar = ({ RenderOnDay, changeOnlyOnClick = false, labelRange, d
|
|
|
278
276
|
</motion.div>
|
|
279
277
|
</AnimatePresence>
|
|
280
278
|
</div>
|
|
281
|
-
{type === "datetime" ? (<section className="grid items-center
|
|
282
|
-
<Input info={null} mask="time" optionalText=" " container="w-full" reportStatus={false} defaultValue={date ? format(date, "HH:mm") : undefined} title={datetimeTitle || translations.calendarDatetimeTitle} onChange={e => {
|
|
279
|
+
{type === "datetime" ? (<section className="my-4 grid items-center">
|
|
280
|
+
<Input info={null} mask="time" optionalText=" " container="w-full" reportStatus={false} defaultValue={date ? format(date, "HH:mm") : undefined} title={datetimeTitle || translations.calendarDatetimeTitle} onChange={(e) => {
|
|
283
281
|
const value = e.target.value;
|
|
284
282
|
const match = timeRegex.exec(value);
|
|
285
283
|
if (!match)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/display/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,UAAU,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGtD,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAa,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAGhE,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,IAAI,gBAAgB,CACzE;IACI,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;CACtC,EACD,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,IAAI;KAAI,CAAC,SAAS,KAAK,CAAC,WAAW,yFAS7C,iBAAiB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/display/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,UAAU,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGtD,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAa,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAGhE,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,IAAI,gBAAgB,CACzE;IACI,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;CACtC,EACD,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,IAAI;KAAI,CAAC,SAAS,KAAK,CAAC,WAAW,yFAS7C,iBAAiB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;wDAyC0B,iBAAiB,CAAC,oBAAoB,CAAC;CAXlG,CAAC;AAEF,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,IAAI,gBAAgB,CACpF;IACI,MAAM,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC7B,KAAK,EAAE,KAAK,CAAC,YAAY,GAAG,MAAM,CAAC;CACtC,EACD,CAAC,CACJ,CAAC;AAoBF,MAAM,MAAM,cAAc,GAAG,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG;IACxD,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,sBAuB9C,CAAC"}
|
|
@@ -4,7 +4,7 @@ import { Is } from "sidekicker";
|
|
|
4
4
|
import { css } from "../../lib/dom";
|
|
5
5
|
import { Polymorph } from "../core/polymorph";
|
|
6
6
|
import { Skeleton } from "./skeleton";
|
|
7
|
-
export const Card = ({ title, loading, children, as, header = null, container = "", titleClassName = "", ...props }) => (<Polymorph {...props} as={as || "div"} data-component="card" className={css("flex
|
|
7
|
+
export const Card = ({ title, loading, children, as, header = null, container = "", titleClassName = "", ...props }) => (<Polymorph {...props} as={as || "div"} data-component="card" className={css("flex w-full flex-col gap-4 rounded-card border border-card-border bg-card-background py-3 shadow-shadow-card", container)}>
|
|
8
8
|
{title ? (<header data-component="card-title" className={css("mb-2 w-full border-b border-card-border px-6 pb-2 text-xl font-medium", titleClassName)}>
|
|
9
9
|
{title}
|
|
10
10
|
</header>) : (header)}
|
|
@@ -14,7 +14,7 @@ export const Card = ({ title, loading, children, as, header = null, container =
|
|
|
14
14
|
<Skeleton className="w-8/12"/>
|
|
15
15
|
<Skeleton className="w-10/12"/>
|
|
16
16
|
<Skeleton className="w-1/2"/>
|
|
17
|
-
</div>) : children}
|
|
17
|
+
</div>) : (children)}
|
|
18
18
|
</div>
|
|
19
19
|
</Polymorph>);
|
|
20
20
|
Card.Title = ({ as, titleTag, navTag, children, ...props }) => {
|
|
@@ -23,18 +23,18 @@ Card.Title = ({ as, titleTag, navTag, children, ...props }) => {
|
|
|
23
23
|
const Nav = (navTag || "nav");
|
|
24
24
|
return (<Component {...props} title={Is.string(props.title) ? props.title : undefined} className={css("flex w-full flex-col flex-wrap items-start justify-between gap-base sm:flex-row sm:items-center", props.className)}>
|
|
25
25
|
<Title className="font-semibold">{props.title}</Title>
|
|
26
|
-
{children ? (<Nav className="flex flex-col
|
|
26
|
+
{children ? (<Nav className="gap-kilo flex flex-col items-start justify-start sm:flex-row sm:items-center sm:justify-end">{children}</Nav>) : null}
|
|
27
27
|
</Component>);
|
|
28
28
|
};
|
|
29
29
|
export const StatsCard = (props) => {
|
|
30
30
|
const interactive = props.interactive ?? true;
|
|
31
31
|
const Icon = props.Icon ?? InfoIcon;
|
|
32
|
-
return (<Card {...props} title={null} loading={undefined} container="px-0 py-0" className="flex gap-4
|
|
32
|
+
return (<Card {...props} title={null} loading={undefined} container="px-0 py-0" className="flex items-center gap-4 px-0">
|
|
33
33
|
<div className={`flex w-full items-center gap-4 rounded-card px-0 lg:px-0 ${interactive ? "transition-colors duration-300 ease-linear hover:bg-primary-hover/10" : ""}`}>
|
|
34
34
|
<div className={css("flex aspect-square h-[stretch] w-20 items-center justify-center rounded-l-card bg-primary p-4 text-primary-foreground", props.mark)}>
|
|
35
35
|
{<Icon size={48}/>}
|
|
36
36
|
</div>
|
|
37
|
-
<div className="flex flex-col gap-2
|
|
37
|
+
<div className="flex flex-col justify-center gap-2 py-2">
|
|
38
38
|
<p className="text-lg">{props.title}</p>
|
|
39
39
|
{props.loading ? <Skeleton className="h-10"/> : <p className="text-4xl font-bold tracking-wide">{props.value}</p>}
|
|
40
40
|
</div>
|
|
@@ -4,7 +4,7 @@ import { useTranslations } from "../../hooks/use-translations";
|
|
|
4
4
|
export const Empty = (props) => {
|
|
5
5
|
const Icon = props.Icon ?? FileIcon;
|
|
6
6
|
const translate = useTranslations();
|
|
7
|
-
return (<div className="flex flex-col
|
|
7
|
+
return (<div className="flex w-full flex-col items-center justify-center gap-4 px-8 py-12">
|
|
8
8
|
<Icon size={64} className="text-disabled"/>
|
|
9
9
|
<p className="text-disabled">{props.message ?? translate.emptyDataMessage}</p>
|
|
10
10
|
</div>);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"notifications.d.ts","sourceRoot":"","sources":["../../../src/components/display/notifications.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"notifications.d.ts","sourceRoot":"","sources":["../../../src/components/display/notifications.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAiB,KAAK,iBAAiB,EAAmC,MAAM,OAAO,CAAC;AAG/F,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,QAAA,MAAM,QAAQ;;mFAgBb,CAAC;AAYF,KAAK,mBAAmB,GAAG,OAAO,CAAC;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC;CACjD,CAAC,CAAC;AAQH,KAAK,sBAAsB,GAAG;IAAE,KAAK,EAAE,MAAM,IAAI,CAAC;IAAC,KAAK,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAEvE,KAAK,eAAe,GAAG,CAAC,WAAW,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,mBAAmB,KAAK,sBAAsB,CAAC;AAMlG,eAAO,MAAM,eAAe,uBAAwC,CAAC;AAkDrE,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAsF1E,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAO,EAAE,OAAc,EAAE,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,+BAMxG"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { Toast as Base } from "@base-ui/react/toast";
|
|
3
3
|
import { cva } from "class-variance-authority";
|
|
4
|
-
import { XIcon, CheckCircleIcon, TriangleAlertIcon, InfoIcon, Loader2Icon
|
|
4
|
+
import { XIcon, CheckCircleIcon, TriangleAlertIcon, InfoIcon, Loader2Icon } from "lucide-react";
|
|
5
5
|
import { AnimatePresence, motion } from "motion/react";
|
|
6
6
|
import { createContext, useCallback, useContext, useRef } from "react";
|
|
7
7
|
import { useHover } from "../../hooks/use-hover";
|
|
@@ -38,31 +38,31 @@ function Notification(props) {
|
|
|
38
38
|
const loading = props.toast.data?.loading ?? false;
|
|
39
39
|
const theme = props.toast.data?.theme || "default";
|
|
40
40
|
const className = variants({ theme });
|
|
41
|
-
const Icon = loading ? Loader2Icon :
|
|
41
|
+
const Icon = loading ? Loader2Icon : themeIcons[theme] || InfoIcon;
|
|
42
42
|
return (<Base.Root toast={props.toast} swipeDirection="right">
|
|
43
|
-
|
|
43
|
+
<motion.li layout initial={{ opacity: 0, y: -20, scale: 0.95 }} animate={{ opacity: 1, y: 0, scale: 1 }} exit={{ opacity: 0, scale: 0.9, y: -20, transition: { duration: 0.2 } }} transition={{
|
|
44
44
|
type: "spring",
|
|
45
45
|
damping: 25,
|
|
46
46
|
stiffness: 300,
|
|
47
|
-
}} className="pointer-events-auto list-none
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
47
|
+
}} className="pointer-events-auto w-full list-none">
|
|
48
|
+
<Base.Content className={css(className, "shadow-lg")}>
|
|
49
|
+
<div className="flex items-start gap-3 p-4">
|
|
50
|
+
<div className={css("mt-0.5 shrink-0 opacity-80", loading && "animate-spin")}>
|
|
51
|
+
<Icon className="size-4"/>
|
|
52
|
+
</div>
|
|
53
53
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
54
|
+
<div className="flex flex-1 flex-col gap-1 overflow-hidden">
|
|
55
|
+
{props.toast.title ? <Base.Title className="select-text truncate font-semibold leading-tight tracking-tight"/> : null}
|
|
56
|
+
<Base.Description className="line-clamp-2 select-text text-xs font-medium leading-relaxed opacity-90"/>
|
|
57
|
+
</div>
|
|
58
58
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
59
|
+
{closable && !loading ? (<Base.Close className="-mr-1 -mt-1 shrink-0 rounded-lg p-1.5 text-foreground/40 transition hover:bg-foreground/10 hover:text-foreground">
|
|
60
|
+
<XIcon className="size-3.5"/>
|
|
61
|
+
</Base.Close>) : null}
|
|
62
|
+
</div>
|
|
63
|
+
</Base.Content>
|
|
64
|
+
</motion.li>
|
|
65
|
+
</Base.Root>);
|
|
66
66
|
}
|
|
67
67
|
function NotificationsViewport({ max = 5 }) {
|
|
68
68
|
const ref = useRef(null);
|
|
@@ -71,15 +71,15 @@ function NotificationsViewport({ max = 5 }) {
|
|
|
71
71
|
const allToasts = max ? toastManager.toasts.slice(0, max) : toastManager.toasts;
|
|
72
72
|
const visibleToasts = hover ? allToasts : allToasts.slice(0, 3);
|
|
73
73
|
const hiddenCount = allToasts.length - visibleToasts.length;
|
|
74
|
-
return (<Base.Viewport ref={ref} className="fixed left-1/2 top-6 z-[100] flex w-full max-w-[380px] -translate-x-1/2 flex-col gap-3
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
74
|
+
return (<Base.Viewport ref={ref} className="pointer-events-none fixed left-1/2 top-6 z-[100] flex w-full max-w-[380px] -translate-x-1/2 flex-col gap-3 overflow-visible outline-none">
|
|
75
|
+
<AnimatePresence mode="popLayout" initial={false}>
|
|
76
|
+
{visibleToasts.map((toast) => (<Notification key={toast.id} toast={toast}/>))}
|
|
77
|
+
</AnimatePresence>
|
|
78
78
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
79
|
+
{!hover && hiddenCount > 0 && (<motion.div layout initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} className="pointer-events-auto cursor-default self-center rounded-full border border-card-border bg-card-background/80 px-3 py-1 text-[10px] font-bold uppercase tracking-wider text-foreground/50 shadow-sm backdrop-blur transition-all hover:bg-card-background hover:text-foreground/80">
|
|
80
|
+
+{hiddenCount} more
|
|
81
|
+
</motion.div>)}
|
|
82
|
+
</Base.Viewport>);
|
|
83
83
|
}
|
|
84
84
|
function NotificationsInner({ children, max = 5 }) {
|
|
85
85
|
const toastManager = Base.useToastManager();
|
|
@@ -113,14 +113,14 @@ function NotificationsInner({ children, max = 5 }) {
|
|
|
113
113
|
};
|
|
114
114
|
}, [toastManager, clear]);
|
|
115
115
|
return (<NotificationContext.Provider value={notify}>
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
116
|
+
{children}
|
|
117
|
+
<Base.Portal>
|
|
118
|
+
<NotificationsViewport max={max}/>
|
|
119
|
+
</Base.Portal>
|
|
120
|
+
</NotificationContext.Provider>);
|
|
121
121
|
}
|
|
122
122
|
export function Notifications({ children, max = 5, timeout = 5000 }) {
|
|
123
123
|
return (<Base.Provider limit={max} timeout={timeout}>
|
|
124
|
-
|
|
125
|
-
|
|
124
|
+
<NotificationsInner max={max}>{children}</NotificationsInner>
|
|
125
|
+
</Base.Provider>);
|
|
126
126
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/components/display/progress.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,KAAK,aAAa,GAAG;
|
|
1
|
+
{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/components/display/progress.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,KAAK,aAAa,GAAG;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,OAAO,eAAe,CAAC,aAAa,CAAC,gCAwB7D,CAAC"}
|
|
@@ -2,12 +2,10 @@ import { Is } from "sidekicker";
|
|
|
2
2
|
import { Progress as RadixProgress } from "@base-ui/react/progress";
|
|
3
3
|
import { css } from "../../lib/dom";
|
|
4
4
|
export const Progress = (props) => {
|
|
5
|
-
return (<RadixProgress.Root max={props.max} value={props.percent ?? null} style={{ transform: "translateZ(0)"
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
</
|
|
11
|
-
: null}
|
|
12
|
-
</RadixProgress.Root>);
|
|
5
|
+
return (<RadixProgress.Root max={props.max} value={props.percent ?? null} style={{ transform: "translateZ(0)" }} className={css("relative h-6 w-full overflow-hidden rounded-full bg-background", props.container)}>
|
|
6
|
+
<RadixProgress.Indicator style={{ transform: Is.number(props.percent) ? `translateX(-${100 - props.percent}%)` : undefined }} className={css("size-full bg-primary transition-transform duration-500 ease-in-out", props.className)}/>
|
|
7
|
+
{Is.number(props.percent) ? (<p className={css("absolute inset-0 flex w-full items-center justify-center font-semibold tabular-nums text-primary-foreground", props.textClassName)}>
|
|
8
|
+
{props.label ? props.label : `${props.percent} %`}
|
|
9
|
+
</p>) : null}
|
|
10
|
+
</RadixProgress.Root>);
|
|
13
11
|
};
|
|
@@ -11,7 +11,7 @@ const remap = (x) => {
|
|
|
11
11
|
};
|
|
12
12
|
export const Shortcut = (props) => {
|
|
13
13
|
const p = props.value.trim().split("+");
|
|
14
|
-
return (<span className="flex
|
|
14
|
+
return (<span className="flex items-center gap-1 text-sm">
|
|
15
15
|
{p.map((x, i) => {
|
|
16
16
|
const isLast = p.length - 1 === i;
|
|
17
17
|
return (<Fragment key={`${props.value}-${x}-key-${i}`}>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/display/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAU,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAIvE,eAAO,MAAM,YAAY,mBAAiE,CAAC;AAE3F,eAAO,MAAM,QAAQ,GAAI,OAAO;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,WAAW,CAAC;IAAC,KAAK,CAAC,EAAE,aAAa,CAAA;CAAE,sBAE9F,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,
|
|
1
|
+
{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/display/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAU,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAIvE,eAAO,MAAM,YAAY,mBAAiE,CAAC;AAE3F,eAAO,MAAM,QAAQ,GAAI,OAAO;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,WAAW,CAAC;IAAC,KAAK,CAAC,EAAE,aAAa,CAAA;CAAE,sBAE9F,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,sBAQvE,CAAC"}
|
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
import React, { useRef } from "react";
|
|
2
2
|
import { css } from "../../lib/dom";
|
|
3
3
|
import { Polymorph } from "../core/polymorph";
|
|
4
|
-
export const SkeletonCell = <div className="w-10/12
|
|
5
|
-
export const Skeleton = (props) => (<Polymorph {...props} as={props.as || "span"} className={css("block
|
|
4
|
+
export const SkeletonCell = <div className="h-6 w-10/12 animate-pulse rounded bg-muted"/>;
|
|
5
|
+
export const Skeleton = (props) => (<Polymorph {...props} as={props.as || "span"} className={css("block h-8 w-32 animate-pulse rounded bg-muted", props.className)}/>);
|
|
6
6
|
export const SkeletonList = (props) => {
|
|
7
7
|
const items = useRef(Array.from({ length: props.rows }).map((_, i) => {
|
|
8
8
|
const rand = Math.max(100, Math.random() * 99);
|
|
9
9
|
return <Skeleton key={`skeleton-${rand}-${i}`} style={{ width: `${rand}%` }} as="li"/>;
|
|
10
10
|
}));
|
|
11
|
-
return
|
|
12
|
-
{items.current}
|
|
13
|
-
</ul>);
|
|
11
|
+
return <ul className={css("flex flex-col gap-6", props.className)}>{items.current}</ul>;
|
|
14
12
|
};
|