@paroicms/react-ui 0.5.3 → 0.5.5

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 (58) hide show
  1. package/dist/Breadcrumb.d.ts +1 -0
  2. package/dist/Breadcrumb.js +4 -1
  3. package/dist/DataTable.d.ts +12 -3
  4. package/dist/DataTable.js +2 -10
  5. package/dist/InputSwitch.d.ts +10 -0
  6. package/dist/InputSwitch.js +10 -0
  7. package/dist/MenuItem.js +2 -2
  8. package/dist/PopupMenu.d.ts +4 -2
  9. package/dist/PopupMenu.js +11 -4
  10. package/dist/SideMenu.js +13 -2
  11. package/dist/SortableList.js +1 -2
  12. package/dist/Spinner.d.ts +5 -1
  13. package/dist/Spinner.js +3 -2
  14. package/dist/SplitButton.js +1 -3
  15. package/dist/Tabs.js +1 -1
  16. package/dist/ToggleButton.d.ts +2 -1
  17. package/dist/ToggleButton.js +2 -2
  18. package/dist/ToggleGroup.js +1 -1
  19. package/dist/index.d.ts +1 -2
  20. package/dist/index.js +1 -2
  21. package/dist/paroi-ui-lib-types.d.ts +5 -1
  22. package/dist/popup-positioning.js +3 -2
  23. package/package.json +1 -1
  24. package/styles/Accordion.css +7 -0
  25. package/styles/Alert.css +7 -1
  26. package/styles/Breadcrumb.css +20 -11
  27. package/styles/Button.css +46 -10
  28. package/styles/Checkbox.css +3 -1
  29. package/styles/Chip.css +7 -1
  30. package/styles/DataTable.css +27 -18
  31. package/styles/DateInput.css +3 -0
  32. package/styles/Dialog.css +8 -2
  33. package/styles/Inplace.css +15 -2
  34. package/styles/InputNumber.css +4 -3
  35. package/styles/{Switch.css → InputSwitch.css} +10 -10
  36. package/styles/InputText.css +19 -13
  37. package/styles/MenuItem.css +47 -45
  38. package/styles/MultiSelect.css +11 -5
  39. package/styles/Panel.css +8 -1
  40. package/styles/PasswordInput.css +18 -5
  41. package/styles/PopupMenu.css +19 -0
  42. package/styles/RadioButton.css +3 -1
  43. package/styles/Select.css +18 -5
  44. package/styles/Spinner.css +8 -4
  45. package/styles/SplitButton.css +128 -36
  46. package/styles/Tabs.css +11 -3
  47. package/styles/Textarea.css +4 -3
  48. package/styles/ToggleButton.css +126 -12
  49. package/styles/ToggleGroup.css +6 -4
  50. package/styles/Tree.css +7 -1
  51. package/styles/theme/common.css +4 -4
  52. package/styles/theme/index.css +1 -1
  53. package/styles/theme/tokens.css +14 -1
  54. package/styles/theme/{margins.css → utilities.css} +63 -36
  55. package/dist/Column.d.ts +0 -14
  56. package/dist/Column.js +0 -7
  57. package/dist/Switch.d.ts +0 -9
  58. package/dist/Switch.js +0 -12
package/styles/theme/{margins.css → utilities.css} RENAMED
@@ -1,119 +1,146 @@
1
+ .PaButtonBar {
2
+ display: flex;
3
+ flex-wrap: wrap;
4
+ gap: 8px;
5
+
6
+ &.alignRight {
7
+ justify-content: end;
8
+ }
9
+
10
+ &.spaceBetween {
11
+ justify-content: space-between;
12
+ width: 100%;
13
+
14
+ @media (max-width: 400px) {
15
+ justify-content: center;
16
+ }
17
+ }
18
+ }
19
+
20
+ .PaFullW {
21
+ width: 100% !important;
22
+ }
23
+
24
+ .PaFullH {
25
+ height: 100% !important;
26
+ }
27
+
1
28
  /* ========================================
2
29
  Margin Utilities
3
30
  ======================================== */
4
31
 
5
32
  /* Margin Top */
6
- .Mt1 {
33
+ .PaMt1 {
7
34
  margin-top: var(--space-1);
8
35
  }
9
- .Mt2 {
36
+ .PaMt2 {
10
37
  margin-top: var(--space-2);
11
38
  }
12
- .Mt3 {
39
+ .PaMt3 {
13
40
  margin-top: var(--space-3);
14
41
  }
15
- .Mt4 {
42
+ .PaMt4 {
16
43
  margin-top: var(--space-4);
17
44
  }
18
- .Mt5 {
45
+ .PaMt5 {
19
46
  margin-top: var(--space-5);
20
47
  }
21
- .Mt6 {
48
+ .PaMt6 {
22
49
  margin-top: var(--space-6);
23
50
  }
24
- .Mt8 {
51
+ .PaMt8 {
25
52
  margin-top: var(--space-8);
26
53
  }
27
- .Mt10 {
54
+ .PaMt10 {
28
55
  margin-top: var(--space-10);
29
56
  }
30
- .Mt12 {
57
+ .PaMt12 {
31
58
  margin-top: var(--space-12);
32
59
  }
33
60
 
34
61
  /* Margin Bottom */
35
- .Mb1 {
62
+ .PaMb1 {
36
63
  margin-bottom: var(--space-1);
37
64
  }
38
- .Mb2 {
65
+ .PaMb2 {
39
66
  margin-bottom: var(--space-2);
40
67
  }
41
- .Mb3 {
68
+ .PaMb3 {
42
69
  margin-bottom: var(--space-3);
43
70
  }
44
- .Mb4 {
71
+ .PaMb4 {
45
72
  margin-bottom: var(--space-4);
46
73
  }
47
- .Mb5 {
74
+ .PaMb5 {
48
75
  margin-bottom: var(--space-5);
49
76
  }
50
- .Mb6 {
77
+ .PaMb6 {
51
78
  margin-bottom: var(--space-6);
52
79
  }
53
- .Mb8 {
80
+ .PaMb8 {
54
81
  margin-bottom: var(--space-8);
55
82
  }
56
- .Mb10 {
83
+ .PaMb10 {
57
84
  margin-bottom: var(--space-10);
58
85
  }
59
- .Mb12 {
86
+ .PaMb12 {
60
87
  margin-bottom: var(--space-12);
61
88
  }
62
89
 
63
90
  /* Margin Left */
64
- .Ml1 {
91
+ .PaMl1 {
65
92
  margin-left: var(--space-1);
66
93
  }
67
- .Ml2 {
94
+ .PaMl2 {
68
95
  margin-left: var(--space-2);
69
96
  }
70
- .Ml3 {
97
+ .PaMl3 {
71
98
  margin-left: var(--space-3);
72
99
  }
73
- .Ml4 {
100
+ .PaMl4 {
74
101
  margin-left: var(--space-4);
75
102
  }
76
- .Ml5 {
103
+ .PaMl5 {
77
104
  margin-left: var(--space-5);
78
105
  }
79
- .Ml6 {
106
+ .PaMl6 {
80
107
  margin-left: var(--space-6);
81
108
  }
82
- .Ml8 {
109
+ .PaMl8 {
83
110
  margin-left: var(--space-8);
84
111
  }
85
- .Ml10 {
112
+ .PaMl10 {
86
113
  margin-left: var(--space-10);
87
114
  }
88
- .Ml12 {
115
+ .PaMl12 {
89
116
  margin-left: var(--space-12);
90
117
  }
91
118
 
92
119
  /* Margin Right */
93
- .Mr1 {
120
+ .PaMr1 {
94
121
  margin-right: var(--space-1);
95
122
  }
96
- .Mr2 {
123
+ .PaMr2 {
97
124
  margin-right: var(--space-2);
98
125
  }
99
- .Mr3 {
126
+ .PaMr3 {
100
127
  margin-right: var(--space-3);
101
128
  }
102
- .Mr4 {
129
+ .PaMr4 {
103
130
  margin-right: var(--space-4);
104
131
  }
105
- .Mr5 {
132
+ .PaMr5 {
106
133
  margin-right: var(--space-5);
107
134
  }
108
- .Mr6 {
135
+ .PaMr6 {
109
136
  margin-right: var(--space-6);
110
137
  }
111
- .Mr8 {
138
+ .PaMr8 {
112
139
  margin-right: var(--space-8);
113
140
  }
114
- .Mr10 {
141
+ .PaMr10 {
115
142
  margin-right: var(--space-10);
116
143
  }
117
- .Mr12 {
144
+ .PaMr12 {
118
145
  margin-right: var(--space-12);
119
146
  }
package/dist/Column.d.ts DELETED
@@ -1,14 +0,0 @@
1
- import type { CSSProperties, ReactNode } from "react";
2
- export interface ColumnProps<T = unknown> {
3
- field?: keyof T & string;
4
- header?: string;
5
- body?: (rowData: T) => ReactNode;
6
- style?: CSSProperties;
7
- sortable?: boolean;
8
- bodyClassName?: string;
9
- }
10
- /**
11
- * Render-less component for column definition.
12
- * Used for configuration only - does not render anything.
13
- */
14
- export declare function Column<T>(_props: ColumnProps<T>): null;
package/dist/Column.js DELETED
@@ -1,7 +0,0 @@
1
- /**
2
- * Render-less component for column definition.
3
- * Used for configuration only - does not render anything.
4
- */
5
- export function Column(_props) {
6
- return null;
7
- }
package/dist/Switch.d.ts DELETED
@@ -1,9 +0,0 @@
1
- import type { ChangeEvent, InputHTMLAttributes } from "react";
2
- import "../styles/Switch.css";
3
- export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> {
4
- checked: boolean;
5
- onChange?: (checked: boolean, ev: ChangeEvent<HTMLInputElement>) => void;
6
- label?: string;
7
- className?: string;
8
- }
9
- export declare function Switch({ checked, onChange, label, className, ...rest }: SwitchProps): import("react/jsx-runtime").JSX.Element;
package/dist/Switch.js DELETED
@@ -1,12 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { clsx } from "clsx";
3
- import "../styles/Switch.css";
4
- export function Switch({ checked, onChange, label, className, ...rest }) {
5
- const handleChange = (e) => {
6
- onChange?.(e.target.checked, e);
7
- };
8
- if (label) {
9
- return (_jsxs("label", { className: clsx("PaSwitch", className), children: [_jsx("input", { className: "PaSwitch-input", type: "checkbox", checked: checked, onChange: handleChange, ...rest }), _jsx("span", { className: "PaSwitch-track", children: _jsx("span", { className: "PaSwitch-thumb" }) }), _jsx("span", { className: "PaSwitch-label", children: label })] }));
10
- }
11
- return (_jsxs("span", { className: clsx("PaSwitch", className), children: [_jsx("input", { className: "PaSwitch-input", type: "checkbox", checked: checked, onChange: handleChange, ...rest }), _jsx("span", { className: "PaSwitch-track", children: _jsx("span", { className: "PaSwitch-thumb" }) })] }));
12
- }