@paroicms/react-ui 0.4.4 → 0.5.1
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/Accordion.d.ts +10 -0
- package/dist/{PuAccordion.jsx → Accordion.js} +5 -8
- package/dist/Alert.d.ts +10 -0
- package/dist/Alert.js +7 -0
- package/dist/Badge.d.ts +8 -0
- package/dist/Badge.js +6 -0
- package/dist/Breadcrumb.d.ts +14 -0
- package/dist/Breadcrumb.js +10 -0
- package/dist/Button.d.ts +36 -0
- package/dist/Button.js +74 -0
- package/dist/Card.d.ts +10 -0
- package/dist/Card.js +7 -0
- package/dist/Checkbox.d.ts +9 -0
- package/dist/Checkbox.js +12 -0
- package/dist/Chip.d.ts +8 -0
- package/dist/Chip.js +7 -0
- package/dist/Column.d.ts +14 -0
- package/dist/Column.js +7 -0
- package/dist/DataTable.d.ts +30 -0
- package/dist/DataTable.js +26 -0
- package/dist/DateInput.d.ts +9 -0
- package/dist/DateInput.js +7 -0
- package/dist/Dialog.d.ts +13 -0
- package/dist/Dialog.js +51 -0
- package/dist/Inplace.d.ts +12 -0
- package/dist/Inplace.js +16 -0
- package/dist/InputNumber.d.ts +10 -0
- package/dist/InputNumber.js +19 -0
- package/dist/InputText.d.ts +14 -0
- package/dist/InputText.js +11 -0
- package/dist/MenuItem.d.ts +8 -0
- package/dist/MenuItem.js +18 -0
- package/dist/MultiSelect.d.ts +18 -0
- package/dist/MultiSelect.js +53 -0
- package/dist/Panel.d.ts +11 -0
- package/dist/Panel.js +9 -0
- package/dist/PasswordInput.d.ts +8 -0
- package/dist/PasswordInput.js +10 -0
- package/dist/PopupMenu.d.ts +19 -0
- package/dist/PopupMenu.js +106 -0
- package/dist/RadioButton.d.ts +9 -0
- package/dist/RadioButton.js +12 -0
- package/dist/Select.d.ts +18 -0
- package/dist/Select.js +11 -0
- package/dist/SideMenu.d.ts +5 -0
- package/dist/SideMenu.js +13 -0
- package/dist/SortableList.d.ts +19 -0
- package/dist/SortableList.js +27 -0
- package/dist/Spinner.d.ts +2 -0
- package/dist/Spinner.js +5 -0
- package/dist/SplitButton.d.ts +25 -0
- package/dist/SplitButton.js +39 -0
- package/dist/Switch.d.ts +9 -0
- package/dist/Switch.js +12 -0
- package/dist/Tabs.d.ts +22 -0
- package/dist/Tabs.js +21 -0
- package/dist/Textarea.d.ts +8 -0
- package/dist/Textarea.js +7 -0
- package/dist/ToggleButton.d.ts +11 -0
- package/dist/ToggleButton.js +6 -0
- package/dist/ToggleGroup.d.ts +15 -0
- package/dist/ToggleGroup.js +6 -0
- package/dist/Tooltip.d.ts +10 -0
- package/dist/Tooltip.js +29 -0
- package/dist/Tree.d.ts +22 -0
- package/dist/Tree.js +43 -0
- package/dist/alert-stack.d.ts +20 -0
- package/dist/alert-stack.js +72 -0
- package/dist/index.d.ts +36 -10
- package/dist/index.js +45 -10
- package/dist/paroi-ui-lib-types.d.ts +4 -4
- package/dist/popup-positioning.d.ts +10 -0
- package/dist/popup-positioning.js +160 -0
- package/dist/react-ui-provider.d.ts +15 -0
- package/dist/react-ui-provider.js +22 -0
- package/package.json +16 -2
- package/styles/Accordion.css +46 -0
- package/styles/Alert.css +77 -0
- package/styles/Badge.css +59 -0
- package/styles/Breadcrumb.css +57 -0
- package/styles/Button.css +167 -0
- package/styles/Card.css +28 -0
- package/styles/Checkbox.css +61 -0
- package/styles/Chip.css +35 -0
- package/styles/DataTable.css +176 -0
- package/styles/DateInput.css +59 -0
- package/styles/Dialog.css +88 -0
- package/styles/Inplace.css +44 -0
- package/styles/InputNumber.css +60 -0
- package/styles/InputText.css +99 -0
- package/styles/MenuItem.css +169 -0
- package/styles/MultiSelect.css +143 -0
- package/styles/Panel.css +40 -0
- package/styles/PasswordInput.css +80 -0
- package/styles/PopupMenu.css +37 -0
- package/styles/RadioButton.css +60 -0
- package/styles/Select.css +72 -0
- package/styles/SideMenu.css +7 -0
- package/styles/SortableList.css +32 -0
- package/styles/Spinner.css +30 -0
- package/styles/SplitButton.css +137 -0
- package/styles/Switch.css +60 -0
- package/styles/Tabs.css +94 -0
- package/styles/Textarea.css +66 -0
- package/styles/ToggleButton.css +36 -0
- package/styles/ToggleGroup.css +55 -0
- package/styles/Tooltip.css +20 -0
- package/styles/Tree.css +162 -0
- package/styles/theme/base.css +40 -0
- package/styles/theme/common.css +410 -0
- package/styles/theme/index.css +15 -0
- package/styles/theme/margins.css +119 -0
- package/styles/theme/reset.css +119 -0
- package/styles/theme/tokens.css +226 -0
- package/dist/PuAccordion.d.ts +0 -9
- package/dist/PuButton.d.ts +0 -14
- package/dist/PuButton.jsx +0 -15
- package/dist/PuCheckbox.d.ts +0 -8
- package/dist/PuCheckbox.jsx +0 -13
- package/dist/PuInput.d.ts +0 -10
- package/dist/PuInput.jsx +0 -13
- package/dist/PuMenuItem.d.ts +0 -7
- package/dist/PuMenuItem.jsx +0 -33
- package/dist/PuPopupMenu.d.ts +0 -14
- package/dist/PuPopupMenu.jsx +0 -135
- package/dist/PuSelect.d.ts +0 -17
- package/dist/PuSelect.jsx +0 -24
- package/dist/PuSideMenu.d.ts +0 -4
- package/dist/PuSideMenu.jsx +0 -15
- package/dist/PuSpinner.d.ts +0 -1
- package/dist/PuSpinner.jsx +0 -3
- package/dist/svg-icons.d.ts +0 -5
- package/dist/svg-icons.jsx +0 -30
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
/* ========================================
|
|
2
|
+
Margin Utilities
|
|
3
|
+
======================================== */
|
|
4
|
+
|
|
5
|
+
/* Margin Top */
|
|
6
|
+
.Mt1 {
|
|
7
|
+
margin-top: var(--space-1);
|
|
8
|
+
}
|
|
9
|
+
.Mt2 {
|
|
10
|
+
margin-top: var(--space-2);
|
|
11
|
+
}
|
|
12
|
+
.Mt3 {
|
|
13
|
+
margin-top: var(--space-3);
|
|
14
|
+
}
|
|
15
|
+
.Mt4 {
|
|
16
|
+
margin-top: var(--space-4);
|
|
17
|
+
}
|
|
18
|
+
.Mt5 {
|
|
19
|
+
margin-top: var(--space-5);
|
|
20
|
+
}
|
|
21
|
+
.Mt6 {
|
|
22
|
+
margin-top: var(--space-6);
|
|
23
|
+
}
|
|
24
|
+
.Mt8 {
|
|
25
|
+
margin-top: var(--space-8);
|
|
26
|
+
}
|
|
27
|
+
.Mt10 {
|
|
28
|
+
margin-top: var(--space-10);
|
|
29
|
+
}
|
|
30
|
+
.Mt12 {
|
|
31
|
+
margin-top: var(--space-12);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* Margin Bottom */
|
|
35
|
+
.Mb1 {
|
|
36
|
+
margin-bottom: var(--space-1);
|
|
37
|
+
}
|
|
38
|
+
.Mb2 {
|
|
39
|
+
margin-bottom: var(--space-2);
|
|
40
|
+
}
|
|
41
|
+
.Mb3 {
|
|
42
|
+
margin-bottom: var(--space-3);
|
|
43
|
+
}
|
|
44
|
+
.Mb4 {
|
|
45
|
+
margin-bottom: var(--space-4);
|
|
46
|
+
}
|
|
47
|
+
.Mb5 {
|
|
48
|
+
margin-bottom: var(--space-5);
|
|
49
|
+
}
|
|
50
|
+
.Mb6 {
|
|
51
|
+
margin-bottom: var(--space-6);
|
|
52
|
+
}
|
|
53
|
+
.Mb8 {
|
|
54
|
+
margin-bottom: var(--space-8);
|
|
55
|
+
}
|
|
56
|
+
.Mb10 {
|
|
57
|
+
margin-bottom: var(--space-10);
|
|
58
|
+
}
|
|
59
|
+
.Mb12 {
|
|
60
|
+
margin-bottom: var(--space-12);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/* Margin Left */
|
|
64
|
+
.Ml1 {
|
|
65
|
+
margin-left: var(--space-1);
|
|
66
|
+
}
|
|
67
|
+
.Ml2 {
|
|
68
|
+
margin-left: var(--space-2);
|
|
69
|
+
}
|
|
70
|
+
.Ml3 {
|
|
71
|
+
margin-left: var(--space-3);
|
|
72
|
+
}
|
|
73
|
+
.Ml4 {
|
|
74
|
+
margin-left: var(--space-4);
|
|
75
|
+
}
|
|
76
|
+
.Ml5 {
|
|
77
|
+
margin-left: var(--space-5);
|
|
78
|
+
}
|
|
79
|
+
.Ml6 {
|
|
80
|
+
margin-left: var(--space-6);
|
|
81
|
+
}
|
|
82
|
+
.Ml8 {
|
|
83
|
+
margin-left: var(--space-8);
|
|
84
|
+
}
|
|
85
|
+
.Ml10 {
|
|
86
|
+
margin-left: var(--space-10);
|
|
87
|
+
}
|
|
88
|
+
.Ml12 {
|
|
89
|
+
margin-left: var(--space-12);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
/* Margin Right */
|
|
93
|
+
.Mr1 {
|
|
94
|
+
margin-right: var(--space-1);
|
|
95
|
+
}
|
|
96
|
+
.Mr2 {
|
|
97
|
+
margin-right: var(--space-2);
|
|
98
|
+
}
|
|
99
|
+
.Mr3 {
|
|
100
|
+
margin-right: var(--space-3);
|
|
101
|
+
}
|
|
102
|
+
.Mr4 {
|
|
103
|
+
margin-right: var(--space-4);
|
|
104
|
+
}
|
|
105
|
+
.Mr5 {
|
|
106
|
+
margin-right: var(--space-5);
|
|
107
|
+
}
|
|
108
|
+
.Mr6 {
|
|
109
|
+
margin-right: var(--space-6);
|
|
110
|
+
}
|
|
111
|
+
.Mr8 {
|
|
112
|
+
margin-right: var(--space-8);
|
|
113
|
+
}
|
|
114
|
+
.Mr10 {
|
|
115
|
+
margin-right: var(--space-10);
|
|
116
|
+
}
|
|
117
|
+
.Mr12 {
|
|
118
|
+
margin-right: var(--space-12);
|
|
119
|
+
}
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
/***
|
|
2
|
+
The new CSS reset - version 1.11.3 (last updated 25.08.2024)
|
|
3
|
+
GitHub page: https://github.com/elad2412/the-new-css-reset
|
|
4
|
+
***/
|
|
5
|
+
|
|
6
|
+
/*
|
|
7
|
+
Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
|
|
8
|
+
- The "symbol *" part is to solve Firefox SVG sprite bug
|
|
9
|
+
- The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
|
|
10
|
+
*/
|
|
11
|
+
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
|
|
12
|
+
all: unset;
|
|
13
|
+
display: revert;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
/* Preferred box-sizing value */
|
|
17
|
+
*,
|
|
18
|
+
*::before,
|
|
19
|
+
*::after {
|
|
20
|
+
box-sizing: border-box;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/* Fix mobile Safari increase font-size on landscape mode */
|
|
24
|
+
html {
|
|
25
|
+
-moz-text-size-adjust: none;
|
|
26
|
+
-webkit-text-size-adjust: none;
|
|
27
|
+
text-size-adjust: none;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/* Reapply the pointer cursor for anchor tags */
|
|
31
|
+
a,
|
|
32
|
+
button {
|
|
33
|
+
cursor: revert;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
/* Remove list styles (bullets/numbers) */
|
|
37
|
+
ol,
|
|
38
|
+
ul,
|
|
39
|
+
menu,
|
|
40
|
+
summary {
|
|
41
|
+
list-style: none;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */
|
|
45
|
+
ol {
|
|
46
|
+
counter-reset: revert;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* For images to not be able to exceed their container */
|
|
50
|
+
img {
|
|
51
|
+
max-inline-size: 100%;
|
|
52
|
+
max-block-size: 100%;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/* removes spacing between cells in tables */
|
|
56
|
+
table {
|
|
57
|
+
border-collapse: collapse;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
|
|
61
|
+
input,
|
|
62
|
+
textarea {
|
|
63
|
+
-webkit-user-select: auto;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/* revert the 'white-space' property for textarea elements on Safari */
|
|
67
|
+
textarea {
|
|
68
|
+
white-space: revert;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/* minimum style to allow to style meter element */
|
|
72
|
+
meter {
|
|
73
|
+
-webkit-appearance: revert;
|
|
74
|
+
appearance: revert;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* preformatted text - use only for this feature */
|
|
78
|
+
:where(pre) {
|
|
79
|
+
all: revert;
|
|
80
|
+
box-sizing: border-box;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/* reset default text opacity of input placeholder */
|
|
84
|
+
::placeholder {
|
|
85
|
+
color: unset;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
/* fix the feature of 'hidden' attribute.
|
|
89
|
+
display:revert; revert to element instead of attribute */
|
|
90
|
+
:where([hidden]) {
|
|
91
|
+
display: none;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/* revert for bug in Chromium browsers
|
|
95
|
+
- fix for the content editable attribute will work properly.
|
|
96
|
+
- webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
|
|
97
|
+
:where([contenteditable]:not([contenteditable="false"])) {
|
|
98
|
+
-moz-user-modify: read-write;
|
|
99
|
+
-webkit-user-modify: read-write;
|
|
100
|
+
overflow-wrap: break-word;
|
|
101
|
+
-webkit-line-break: after-white-space;
|
|
102
|
+
-webkit-user-select: auto;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
/* apply back the draggable feature - exist only in Chromium and Safari */
|
|
106
|
+
:where([draggable="true"]) {
|
|
107
|
+
-webkit-user-drag: element;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
/* Revert Modal native behavior */
|
|
111
|
+
:where(dialog:modal) {
|
|
112
|
+
all: revert;
|
|
113
|
+
box-sizing: border-box;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
/* Remove details summary webkit styles */
|
|
117
|
+
::-webkit-details-marker {
|
|
118
|
+
display: none;
|
|
119
|
+
}
|
|
@@ -0,0 +1,226 @@
|
|
|
1
|
+
/* ========================================
|
|
2
|
+
ParoiCMS Design System - Tokens
|
|
3
|
+
Design variables for Admin-UI
|
|
4
|
+
Coworking-inspired palette
|
|
5
|
+
======================================== */
|
|
6
|
+
|
|
7
|
+
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
|
|
8
|
+
|
|
9
|
+
:root {
|
|
10
|
+
/* ========================================
|
|
11
|
+
Color Palette
|
|
12
|
+
======================================== */
|
|
13
|
+
|
|
14
|
+
/* Primary: Soft Teal/Green - Main action color */
|
|
15
|
+
--color-primary: #0d9488;
|
|
16
|
+
--color-primary-dark: #0f766e;
|
|
17
|
+
--color-primary-hover: #14b8a6;
|
|
18
|
+
--color-primary-light: #ccfbf1;
|
|
19
|
+
--color-primary-subtle: #f0fdfa;
|
|
20
|
+
|
|
21
|
+
/* Accent: Warm Coral - Secondary action color */
|
|
22
|
+
--color-accent: #f97316;
|
|
23
|
+
--color-accent-dark: #ea580c;
|
|
24
|
+
--color-accent-light: #ffedd5;
|
|
25
|
+
|
|
26
|
+
/* Warning: Amber */
|
|
27
|
+
--color-yellow: #f59e0b;
|
|
28
|
+
--color-yellow-dark: #d97706;
|
|
29
|
+
--color-yellow-light: #fef3c7;
|
|
30
|
+
|
|
31
|
+
/* Danger: Rose Red for destructive actions */
|
|
32
|
+
--color-danger: #e11d48;
|
|
33
|
+
--color-danger-dark: #be123c;
|
|
34
|
+
--color-danger-light2: #c67a8b;
|
|
35
|
+
--color-danger-light: #ffe4e6;
|
|
36
|
+
|
|
37
|
+
/* Success: Emerald for confirmation */
|
|
38
|
+
--color-success: #10b981;
|
|
39
|
+
--color-success-dark: #059669;
|
|
40
|
+
--color-success-light: #d1fae5;
|
|
41
|
+
|
|
42
|
+
/* Info: Blue for informational messages */
|
|
43
|
+
--color-info: #3b82f6;
|
|
44
|
+
--color-info-dark: #2563eb;
|
|
45
|
+
--color-info-light: #dbeafe;
|
|
46
|
+
|
|
47
|
+
/* ========================================
|
|
48
|
+
Text Colors
|
|
49
|
+
======================================== */
|
|
50
|
+
--color-text: #1e293b;
|
|
51
|
+
--color-text-light: #64748b;
|
|
52
|
+
--color-text-muted: #475569;
|
|
53
|
+
--color-text-inverse: #ffffff;
|
|
54
|
+
|
|
55
|
+
/* ========================================
|
|
56
|
+
Background Colors
|
|
57
|
+
Warm sunny palette - like morning light
|
|
58
|
+
======================================== */
|
|
59
|
+
--color-bg: #ffffff;
|
|
60
|
+
/* --color-bg-app: #f7f5e8; */
|
|
61
|
+
/* --color-bg-app: #fbffdf; */
|
|
62
|
+
--color-bg-app: #fff;
|
|
63
|
+
/* #ffffe0 */
|
|
64
|
+
--color-bg-section: #f6f3eb;
|
|
65
|
+
/* Lighter warm */
|
|
66
|
+
--color-bg-subtle: #f2f1ec;
|
|
67
|
+
/* Very light warmth */
|
|
68
|
+
--color-bg-elevated: #ffffff;
|
|
69
|
+
|
|
70
|
+
/* Sidebar specific */
|
|
71
|
+
--color-bg-sidebar: #1e293b;
|
|
72
|
+
--color-bg-sidebar-hover: #334155;
|
|
73
|
+
--color-text-sidebar: #e2e8f0;
|
|
74
|
+
--color-text-sidebar-muted: #94a3b8;
|
|
75
|
+
--color-bg-muted: #fafafa;
|
|
76
|
+
|
|
77
|
+
/* Sidebar hover colors - light green tints */
|
|
78
|
+
--color-hover-sidebar-dark: #40a59d;
|
|
79
|
+
/* Emerald green with transparency for dark bg */
|
|
80
|
+
--color-hover-sidebar-light: #d1fae5;
|
|
81
|
+
/* Light emerald green for light bg */
|
|
82
|
+
|
|
83
|
+
/* ========================================
|
|
84
|
+
Border Colors
|
|
85
|
+
======================================== */
|
|
86
|
+
--color-border: #d6dce3;
|
|
87
|
+
--color-border-focus: var(--color-primary);
|
|
88
|
+
--color-border-light: #eceff1;
|
|
89
|
+
|
|
90
|
+
/* ========================================
|
|
91
|
+
Layout Dimensions
|
|
92
|
+
======================================== */
|
|
93
|
+
|
|
94
|
+
/* Secondary sidebar (parts navigation) */
|
|
95
|
+
--sidebar-secondary-width: 220px;
|
|
96
|
+
|
|
97
|
+
/* Navbar/Topbar */
|
|
98
|
+
--navbar-height: 58px;
|
|
99
|
+
--navbar-height-mobile: 76px;
|
|
100
|
+
|
|
101
|
+
/* Control bar (document/part header) */
|
|
102
|
+
--control-bar-height: 65px;
|
|
103
|
+
|
|
104
|
+
/* Content */
|
|
105
|
+
--doc-content-max-width: 1200px;
|
|
106
|
+
/* Max width for document content area */
|
|
107
|
+
--content-max-width: 960px;
|
|
108
|
+
--content-padding: 1.5rem;
|
|
109
|
+
--content-padding-mobile: 1rem;
|
|
110
|
+
|
|
111
|
+
/* ========================================
|
|
112
|
+
Spacing Scale
|
|
113
|
+
======================================== */
|
|
114
|
+
--space-0: 0;
|
|
115
|
+
--space-1: 0.25rem;
|
|
116
|
+
/* 4px */
|
|
117
|
+
--space-2: 0.5rem;
|
|
118
|
+
/* 8px */
|
|
119
|
+
--space-3: 0.75rem;
|
|
120
|
+
/* 12px */
|
|
121
|
+
--space-4: 1rem;
|
|
122
|
+
/* 16px */
|
|
123
|
+
--space-5: 1.25rem;
|
|
124
|
+
/* 20px */
|
|
125
|
+
--space-6: 1.5rem;
|
|
126
|
+
/* 24px */
|
|
127
|
+
--space-8: 2rem;
|
|
128
|
+
/* 32px */
|
|
129
|
+
--space-10: 2.5rem;
|
|
130
|
+
/* 40px */
|
|
131
|
+
--space-12: 3rem;
|
|
132
|
+
/* 48px */
|
|
133
|
+
|
|
134
|
+
/* ========================================
|
|
135
|
+
Typography
|
|
136
|
+
======================================== */
|
|
137
|
+
|
|
138
|
+
/* Font Families */
|
|
139
|
+
--font-sans:
|
|
140
|
+
"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
141
|
+
--font-mono: ui-monospace, "SF Mono", Monaco, "Cascadia Code", monospace;
|
|
142
|
+
|
|
143
|
+
/* Font Sizes */
|
|
144
|
+
--text-xs: 0.75rem;
|
|
145
|
+
/* 12px */
|
|
146
|
+
--text-sm: 0.875rem;
|
|
147
|
+
/* 14px */
|
|
148
|
+
--text-base: 1rem;
|
|
149
|
+
/* 16px */
|
|
150
|
+
--text-md: 1.0625rem;
|
|
151
|
+
/* 17px */
|
|
152
|
+
--text-lg: 1.125rem;
|
|
153
|
+
/* 18px */
|
|
154
|
+
--text-xl: 1.25rem;
|
|
155
|
+
/* 20px */
|
|
156
|
+
--text-2xl: 1.5rem;
|
|
157
|
+
/* 24px */
|
|
158
|
+
--text-3xl: 1.875rem;
|
|
159
|
+
/* 30px */
|
|
160
|
+
|
|
161
|
+
/* Line Heights */
|
|
162
|
+
--leading-tight: 1.25;
|
|
163
|
+
--leading-snug: 1.375;
|
|
164
|
+
--leading-normal: 1.5;
|
|
165
|
+
--leading-relaxed: 1.625;
|
|
166
|
+
|
|
167
|
+
/* Font Weights */
|
|
168
|
+
--font-normal: 400;
|
|
169
|
+
--font-medium: 500;
|
|
170
|
+
--font-semibold: 600;
|
|
171
|
+
--font-bold: 700;
|
|
172
|
+
|
|
173
|
+
/* ========================================
|
|
174
|
+
Border Radius
|
|
175
|
+
======================================== */
|
|
176
|
+
--radius-sm: 4px;
|
|
177
|
+
--radius: 6px;
|
|
178
|
+
--radius-md: 8px;
|
|
179
|
+
--radius-lg: 10px;
|
|
180
|
+
--radius-xl: 12px;
|
|
181
|
+
--radius-full: 9999px;
|
|
182
|
+
|
|
183
|
+
/* ========================================
|
|
184
|
+
Shadows
|
|
185
|
+
======================================== */
|
|
186
|
+
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
|
|
187
|
+
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
|
|
188
|
+
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
189
|
+
--shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
190
|
+
--shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
191
|
+
|
|
192
|
+
/* ========================================
|
|
193
|
+
Transitions
|
|
194
|
+
======================================== */
|
|
195
|
+
--transition-fast: 0.1s ease;
|
|
196
|
+
--transition: 0.15s ease;
|
|
197
|
+
--transition-slow: 0.25s ease;
|
|
198
|
+
|
|
199
|
+
/* ========================================
|
|
200
|
+
Z-Index Scale
|
|
201
|
+
======================================== */
|
|
202
|
+
--z-dropdown: 100;
|
|
203
|
+
--z-sticky: 200;
|
|
204
|
+
--z-fixed: 300;
|
|
205
|
+
--z-modal-backdrop: 400;
|
|
206
|
+
--z-modal: 500;
|
|
207
|
+
--z-popover: 600;
|
|
208
|
+
--z-tooltip: 700;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
/* ========================================
|
|
212
|
+
Dark Mode (for sidebar)
|
|
213
|
+
======================================== */
|
|
214
|
+
.dark {
|
|
215
|
+
--color-text: #e2e8f0;
|
|
216
|
+
--color-text-light: #94a3b8;
|
|
217
|
+
--color-text-muted: #cbd5e1;
|
|
218
|
+
|
|
219
|
+
--color-bg: #1e293b;
|
|
220
|
+
--color-bg-section: #334155;
|
|
221
|
+
--color-bg-subtle: #475569;
|
|
222
|
+
--color-bg-elevated: #334155;
|
|
223
|
+
|
|
224
|
+
--color-border: #475569;
|
|
225
|
+
--color-border-light: #334155;
|
|
226
|
+
}
|
package/dist/PuAccordion.d.ts
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { type ReactNode } from "react";
|
|
2
|
-
import type { PuMenuOption } from "./paroi-ui-lib-types.js";
|
|
3
|
-
export interface PuAccordionProps {
|
|
4
|
-
children: ReactNode;
|
|
5
|
-
header: PuMenuOption;
|
|
6
|
-
/** Initial value */
|
|
7
|
-
expanded?: boolean;
|
|
8
|
-
}
|
|
9
|
-
export declare function PuAccordion({ children, header, expanded }: PuAccordionProps): import("react").JSX.Element;
|
package/dist/PuButton.d.ts
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { type MouseEvent, type ReactNode } from "react";
|
|
2
|
-
export interface PuButtonProps {
|
|
3
|
-
children: ReactNode;
|
|
4
|
-
className?: string;
|
|
5
|
-
disabled?: boolean;
|
|
6
|
-
outlined?: boolean;
|
|
7
|
-
severity?: "primary" | "secondary" | "success" | "info" | "warning" | "danger";
|
|
8
|
-
onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
|
|
9
|
-
"aria-label"?: string;
|
|
10
|
-
"aria-controls"?: string;
|
|
11
|
-
"aria-haspopup"?: boolean;
|
|
12
|
-
type?: "button" | "submit" | "reset";
|
|
13
|
-
}
|
|
14
|
-
export declare const PuButton: import("react").ForwardRefExoticComponent<PuButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
|
package/dist/PuButton.jsx
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { forwardRef } from "react";
|
|
2
|
-
export const PuButton = forwardRef(({ children, className, disabled, outlined, severity = "primary", onClick, type = "button", ...rest }, ref) => {
|
|
3
|
-
const classes = [
|
|
4
|
-
"PuButton",
|
|
5
|
-
outlined ? "outlined" : "",
|
|
6
|
-
severity ? severity : "",
|
|
7
|
-
className || "",
|
|
8
|
-
disabled ? "disabled" : "",
|
|
9
|
-
]
|
|
10
|
-
.filter(Boolean)
|
|
11
|
-
.join(" ");
|
|
12
|
-
return (<button ref={ref} className={classes} disabled={disabled} onClick={onClick} type={type} {...rest}>
|
|
13
|
-
{children}
|
|
14
|
-
</button>);
|
|
15
|
-
});
|
package/dist/PuCheckbox.d.ts
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import type { InputHTMLAttributes } from "react";
|
|
2
|
-
export interface PuCheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "type"> {
|
|
3
|
-
checked: boolean;
|
|
4
|
-
onChange: (checked: boolean) => void;
|
|
5
|
-
label?: string;
|
|
6
|
-
className?: string;
|
|
7
|
-
}
|
|
8
|
-
export declare function PuCheckbox({ checked, onChange, label, className, ...rest }: PuCheckboxProps): import("react").JSX.Element;
|
package/dist/PuCheckbox.jsx
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
export function PuCheckbox({ checked, onChange, label, className = "", ...rest }) {
|
|
2
|
-
const handleChange = (e) => {
|
|
3
|
-
onChange(e.target.checked);
|
|
4
|
-
};
|
|
5
|
-
const checkboxClasses = ["PuCheckbox", className].filter(Boolean).join(" ");
|
|
6
|
-
return (<div className={checkboxClasses}>
|
|
7
|
-
<label className="PuCheckbox-container">
|
|
8
|
-
<input className="PuCheckbox-input" type="checkbox" checked={checked} onChange={handleChange} {...rest}/>
|
|
9
|
-
<span className="PuCheckbox-checkmark"/>
|
|
10
|
-
{label && <span className="PuCheckbox-label">{label}</span>}
|
|
11
|
-
</label>
|
|
12
|
-
</div>);
|
|
13
|
-
}
|
package/dist/PuInput.d.ts
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { InputHTMLAttributes } from "react";
|
|
2
|
-
export interface PuInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
|
|
3
|
-
value: string;
|
|
4
|
-
onChange: (value: string) => void;
|
|
5
|
-
label?: string;
|
|
6
|
-
error?: string;
|
|
7
|
-
className?: string;
|
|
8
|
-
fullWidth?: boolean;
|
|
9
|
-
}
|
|
10
|
-
export declare function PuInput({ value, onChange, label, error, className, fullWidth, ...rest }: PuInputProps): import("react").JSX.Element;
|
package/dist/PuInput.jsx
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
export function PuInput({ value, onChange, label, error, className = "", fullWidth = false, ...rest }) {
|
|
2
|
-
const handleChange = (e) => {
|
|
3
|
-
onChange(e.target.value);
|
|
4
|
-
};
|
|
5
|
-
const inputClasses = ["PuInput", error ? "error" : "", fullWidth ? "fullWidth" : "", className]
|
|
6
|
-
.filter(Boolean)
|
|
7
|
-
.join(" ");
|
|
8
|
-
return (<div className={inputClasses}>
|
|
9
|
-
{label && <label className="PuInput-label">{label}</label>}
|
|
10
|
-
<input className="PuInput-field" value={value} onChange={handleChange} {...rest}/>
|
|
11
|
-
{error && <div className="PuInput-error">{error}</div>}
|
|
12
|
-
</div>);
|
|
13
|
-
}
|
package/dist/PuMenuItem.d.ts
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import type { PuMenuOption } from "./paroi-ui-lib-types.js";
|
|
2
|
-
export interface PuMenuItemProps {
|
|
3
|
-
item: PuMenuOption;
|
|
4
|
-
expanded?: boolean;
|
|
5
|
-
onToggle?: (expanded: boolean) => void;
|
|
6
|
-
}
|
|
7
|
-
export declare function PuMenuItem({ item, expanded, onToggle }: PuMenuItemProps): import("react").JSX.Element;
|
package/dist/PuMenuItem.jsx
DELETED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { PuPopupMenu } from "./PuPopupMenu.jsx";
|
|
2
|
-
import { SubMenuIconBottom, SubMenuIconLeft } from "./svg-icons.jsx";
|
|
3
|
-
export function PuMenuItem({ item, expanded, onToggle }) {
|
|
4
|
-
let { key: id, label, icon, url, command, popupMenu, className, style, active, disabled } = item;
|
|
5
|
-
if (disabled) {
|
|
6
|
-
url = undefined;
|
|
7
|
-
command = undefined;
|
|
8
|
-
}
|
|
9
|
-
const itemClassNames = [
|
|
10
|
-
"PuMenuItem",
|
|
11
|
-
className || "",
|
|
12
|
-
active ? "active" : "",
|
|
13
|
-
disabled ? "disabled" : "",
|
|
14
|
-
]
|
|
15
|
-
.filter(Boolean)
|
|
16
|
-
.join(" ");
|
|
17
|
-
return (<div className={itemClassNames} style={style} key={id}>
|
|
18
|
-
{expanded !== undefined && onToggle ? (<button className="PuMenuItem-left toggle" onClick={() => onToggle(!expanded)} type="button">
|
|
19
|
-
{expanded ? <SubMenuIconBottom /> : <SubMenuIconLeft />}
|
|
20
|
-
</button>) : icon ? (<div className="PuMenuItem-left icon">{icon}</div>) : undefined}
|
|
21
|
-
{url ? (<a className="PuMenuItem-label" href={url} onClick={url && command
|
|
22
|
-
? (ev) => {
|
|
23
|
-
ev.preventDefault();
|
|
24
|
-
command?.();
|
|
25
|
-
}
|
|
26
|
-
: undefined}>
|
|
27
|
-
{label}
|
|
28
|
-
</a>) : command ? (<button className="PuMenuItem-label" onClick={command} type="button">
|
|
29
|
-
{label}
|
|
30
|
-
</button>) : (<span className="PuMenuItem-label">{label}</span>)}
|
|
31
|
-
{popupMenu && <PuPopupMenu className="PuMenuItem-popup" items={popupMenu}/>}
|
|
32
|
-
</div>);
|
|
33
|
-
}
|
package/dist/PuPopupMenu.d.ts
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { type MouseEvent } from "react";
|
|
2
|
-
import type { PuMenuNode } from "./paroi-ui-lib-types.js";
|
|
3
|
-
export interface PuPopupMenuProps {
|
|
4
|
-
items: PuMenuNode[];
|
|
5
|
-
className?: string;
|
|
6
|
-
id?: string;
|
|
7
|
-
autoPosition?: boolean;
|
|
8
|
-
}
|
|
9
|
-
export interface PopupMenuRef {
|
|
10
|
-
toggle: (event: MouseEvent) => void;
|
|
11
|
-
show: (event: MouseEvent) => void;
|
|
12
|
-
hide: () => void;
|
|
13
|
-
}
|
|
14
|
-
export declare const PuPopupMenu: import("react").ForwardRefExoticComponent<PuPopupMenuProps & import("react").RefAttributes<PopupMenuRef>>;
|