lucentia-ui 0.2.4 β 0.2.6
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/Button/Button.module.css +8 -1
- package/dist/components/Button/Button.stories.js +1 -1
- package/dist/components/Feedback/Modal/Modal.js +10 -0
- package/dist/components/Feedback/Modal/Modal.module.css +1 -2
- package/dist/components/Feedback/Modal/Modal.stories.js +1 -1
- package/dist/components/Input/Input.module.css +1 -1
- package/dist/components/ThemeProvider/ThemeProvider.module.css +1 -0
- package/package.json +1 -1
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
.button {
|
|
2
|
+
width: fit-content;
|
|
3
|
+
height: fit-content;
|
|
2
4
|
font-family: var(--font);
|
|
3
5
|
font-weight: var(--font-weight-medium);
|
|
4
6
|
border: 2px solid transparent;
|
|
@@ -22,6 +24,7 @@
|
|
|
22
24
|
background: var(--color-surface-container);
|
|
23
25
|
}
|
|
24
26
|
|
|
27
|
+
|
|
25
28
|
.primary {
|
|
26
29
|
background: var(--color-primary-container);
|
|
27
30
|
color: var(--color-on-primary-container);
|
|
@@ -67,6 +70,7 @@
|
|
|
67
70
|
0 0 8px var(--color-secondary);
|
|
68
71
|
}
|
|
69
72
|
|
|
73
|
+
|
|
70
74
|
.danger {
|
|
71
75
|
background: var(--color-error-container);
|
|
72
76
|
color: var(--color-on-error-container);
|
|
@@ -86,6 +90,10 @@
|
|
|
86
90
|
0 0 8px var(--color-error);
|
|
87
91
|
}
|
|
88
92
|
|
|
93
|
+
.md.danger:active:not(:disabled) {
|
|
94
|
+
box-shadow: none;
|
|
95
|
+
}
|
|
96
|
+
|
|
89
97
|
|
|
90
98
|
/* ===== Size ===== */
|
|
91
99
|
|
|
@@ -107,7 +115,6 @@
|
|
|
107
115
|
.md.button:active:not(:disabled),
|
|
108
116
|
.button[data-state="pressed"] {
|
|
109
117
|
box-shadow: none;
|
|
110
|
-
background: var(--color-surface-container);
|
|
111
118
|
}
|
|
112
119
|
|
|
113
120
|
.button:focus-visible {
|
|
@@ -36,7 +36,7 @@ export const State = {
|
|
|
36
36
|
flexDirection: "column",
|
|
37
37
|
alignItems: "flex-start",
|
|
38
38
|
gap: 32,
|
|
39
|
-
}, children: [_jsx(Button, { variant: "ghost", children: "Default" }), _jsx(Button, { variant: "ghost", "data-state": "pressed", children: "Pressed" }), _jsx(Button, { variant: "ghost", disabled: true, children: "Disabled" })] })),
|
|
39
|
+
}, children: [_jsx(Button, { variant: "ghost", children: "Default" }), _jsx(Button, { variant: "ghost", style: { background: "var(--color-surface-container)" }, "data-state": "pressed", children: "Pressed" }), _jsx(Button, { variant: "ghost", disabled: true, children: "Disabled" })] })),
|
|
40
40
|
};
|
|
41
41
|
export const Variants = {
|
|
42
42
|
render: () => (_jsxs("div", { style: {
|
|
@@ -7,6 +7,16 @@ export const Modal = ({ open, onClose, children, className, }) => {
|
|
|
7
7
|
useEffect(() => {
|
|
8
8
|
setMounted(true);
|
|
9
9
|
}, []);
|
|
10
|
+
// π θζ―γΉγ―γγΌγ«γγγ―
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
if (!open)
|
|
13
|
+
return;
|
|
14
|
+
const originalOverflow = document.body.style.overflow;
|
|
15
|
+
document.body.style.overflow = "hidden";
|
|
16
|
+
return () => {
|
|
17
|
+
document.body.style.overflow = originalOverflow;
|
|
18
|
+
};
|
|
19
|
+
}, [open]);
|
|
10
20
|
if (!open || !mounted)
|
|
11
21
|
return null;
|
|
12
22
|
const modalRoot = document.getElementById("modal-root");
|
|
@@ -14,7 +14,7 @@ export const Default = {
|
|
|
14
14
|
display: "flex",
|
|
15
15
|
flexDirection: "column",
|
|
16
16
|
alignItems: "center",
|
|
17
|
-
gap:
|
|
17
|
+
gap: 48,
|
|
18
18
|
}, children: [_jsx("h2", { children: "Modal Title" }), _jsx("p", { children: "This is a modal content." }), _jsx(Button, { onClick: () => setOpen(false), children: "Close" })] }) })] }));
|
|
19
19
|
},
|
|
20
20
|
};
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
font-family: var(--font);
|
|
3
3
|
padding: var(--space-md) var(--space-lg);
|
|
4
4
|
border-radius: var(--radius-sm);
|
|
5
|
-
border: 2px solid var(--color-
|
|
5
|
+
border: 2px solid var(--color-background);
|
|
6
6
|
outline: none;
|
|
7
7
|
background: var(--color-surface-container);
|
|
8
8
|
color: var(--color-on-surface);
|
package/package.json
CHANGED