@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.
Files changed (133) hide show
  1. package/dist/Accordion.d.ts +10 -0
  2. package/dist/{PuAccordion.jsx → Accordion.js} +5 -8
  3. package/dist/Alert.d.ts +10 -0
  4. package/dist/Alert.js +7 -0
  5. package/dist/Badge.d.ts +8 -0
  6. package/dist/Badge.js +6 -0
  7. package/dist/Breadcrumb.d.ts +14 -0
  8. package/dist/Breadcrumb.js +10 -0
  9. package/dist/Button.d.ts +36 -0
  10. package/dist/Button.js +74 -0
  11. package/dist/Card.d.ts +10 -0
  12. package/dist/Card.js +7 -0
  13. package/dist/Checkbox.d.ts +9 -0
  14. package/dist/Checkbox.js +12 -0
  15. package/dist/Chip.d.ts +8 -0
  16. package/dist/Chip.js +7 -0
  17. package/dist/Column.d.ts +14 -0
  18. package/dist/Column.js +7 -0
  19. package/dist/DataTable.d.ts +30 -0
  20. package/dist/DataTable.js +26 -0
  21. package/dist/DateInput.d.ts +9 -0
  22. package/dist/DateInput.js +7 -0
  23. package/dist/Dialog.d.ts +13 -0
  24. package/dist/Dialog.js +51 -0
  25. package/dist/Inplace.d.ts +12 -0
  26. package/dist/Inplace.js +16 -0
  27. package/dist/InputNumber.d.ts +10 -0
  28. package/dist/InputNumber.js +19 -0
  29. package/dist/InputText.d.ts +14 -0
  30. package/dist/InputText.js +11 -0
  31. package/dist/MenuItem.d.ts +8 -0
  32. package/dist/MenuItem.js +18 -0
  33. package/dist/MultiSelect.d.ts +18 -0
  34. package/dist/MultiSelect.js +53 -0
  35. package/dist/Panel.d.ts +11 -0
  36. package/dist/Panel.js +9 -0
  37. package/dist/PasswordInput.d.ts +8 -0
  38. package/dist/PasswordInput.js +10 -0
  39. package/dist/PopupMenu.d.ts +19 -0
  40. package/dist/PopupMenu.js +106 -0
  41. package/dist/RadioButton.d.ts +9 -0
  42. package/dist/RadioButton.js +12 -0
  43. package/dist/Select.d.ts +18 -0
  44. package/dist/Select.js +11 -0
  45. package/dist/SideMenu.d.ts +5 -0
  46. package/dist/SideMenu.js +13 -0
  47. package/dist/SortableList.d.ts +19 -0
  48. package/dist/SortableList.js +27 -0
  49. package/dist/Spinner.d.ts +2 -0
  50. package/dist/Spinner.js +5 -0
  51. package/dist/SplitButton.d.ts +25 -0
  52. package/dist/SplitButton.js +39 -0
  53. package/dist/Switch.d.ts +9 -0
  54. package/dist/Switch.js +12 -0
  55. package/dist/Tabs.d.ts +22 -0
  56. package/dist/Tabs.js +21 -0
  57. package/dist/Textarea.d.ts +8 -0
  58. package/dist/Textarea.js +7 -0
  59. package/dist/ToggleButton.d.ts +11 -0
  60. package/dist/ToggleButton.js +6 -0
  61. package/dist/ToggleGroup.d.ts +15 -0
  62. package/dist/ToggleGroup.js +6 -0
  63. package/dist/Tooltip.d.ts +10 -0
  64. package/dist/Tooltip.js +29 -0
  65. package/dist/Tree.d.ts +22 -0
  66. package/dist/Tree.js +43 -0
  67. package/dist/alert-stack.d.ts +20 -0
  68. package/dist/alert-stack.js +72 -0
  69. package/dist/index.d.ts +36 -10
  70. package/dist/index.js +45 -10
  71. package/dist/paroi-ui-lib-types.d.ts +4 -4
  72. package/dist/popup-positioning.d.ts +10 -0
  73. package/dist/popup-positioning.js +160 -0
  74. package/dist/react-ui-provider.d.ts +15 -0
  75. package/dist/react-ui-provider.js +22 -0
  76. package/package.json +16 -2
  77. package/styles/Accordion.css +46 -0
  78. package/styles/Alert.css +77 -0
  79. package/styles/Badge.css +59 -0
  80. package/styles/Breadcrumb.css +57 -0
  81. package/styles/Button.css +167 -0
  82. package/styles/Card.css +28 -0
  83. package/styles/Checkbox.css +61 -0
  84. package/styles/Chip.css +35 -0
  85. package/styles/DataTable.css +176 -0
  86. package/styles/DateInput.css +59 -0
  87. package/styles/Dialog.css +88 -0
  88. package/styles/Inplace.css +44 -0
  89. package/styles/InputNumber.css +60 -0
  90. package/styles/InputText.css +99 -0
  91. package/styles/MenuItem.css +169 -0
  92. package/styles/MultiSelect.css +143 -0
  93. package/styles/Panel.css +40 -0
  94. package/styles/PasswordInput.css +80 -0
  95. package/styles/PopupMenu.css +37 -0
  96. package/styles/RadioButton.css +60 -0
  97. package/styles/Select.css +72 -0
  98. package/styles/SideMenu.css +7 -0
  99. package/styles/SortableList.css +32 -0
  100. package/styles/Spinner.css +30 -0
  101. package/styles/SplitButton.css +137 -0
  102. package/styles/Switch.css +60 -0
  103. package/styles/Tabs.css +94 -0
  104. package/styles/Textarea.css +66 -0
  105. package/styles/ToggleButton.css +36 -0
  106. package/styles/ToggleGroup.css +55 -0
  107. package/styles/Tooltip.css +20 -0
  108. package/styles/Tree.css +162 -0
  109. package/styles/theme/base.css +40 -0
  110. package/styles/theme/common.css +410 -0
  111. package/styles/theme/index.css +15 -0
  112. package/styles/theme/margins.css +119 -0
  113. package/styles/theme/reset.css +119 -0
  114. package/styles/theme/tokens.css +226 -0
  115. package/dist/PuAccordion.d.ts +0 -9
  116. package/dist/PuButton.d.ts +0 -14
  117. package/dist/PuButton.jsx +0 -15
  118. package/dist/PuCheckbox.d.ts +0 -8
  119. package/dist/PuCheckbox.jsx +0 -13
  120. package/dist/PuInput.d.ts +0 -10
  121. package/dist/PuInput.jsx +0 -13
  122. package/dist/PuMenuItem.d.ts +0 -7
  123. package/dist/PuMenuItem.jsx +0 -33
  124. package/dist/PuPopupMenu.d.ts +0 -14
  125. package/dist/PuPopupMenu.jsx +0 -135
  126. package/dist/PuSelect.d.ts +0 -17
  127. package/dist/PuSelect.jsx +0 -24
  128. package/dist/PuSideMenu.d.ts +0 -4
  129. package/dist/PuSideMenu.jsx +0 -15
  130. package/dist/PuSpinner.d.ts +0 -1
  131. package/dist/PuSpinner.jsx +0 -3
  132. package/dist/svg-icons.d.ts +0 -5
  133. 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
+ }
@@ -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;
@@ -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
- });
@@ -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;
@@ -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
- }
@@ -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;
@@ -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
- }
@@ -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>>;