fina-react-ds 1.0.49 → 1.0.51

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/README.md CHANGED
@@ -1,7 +1,235 @@
1
1
  # FINA CONCEPT DS
2
2
 
3
+ ## Prérequis
4
+
5
+ This package is designed to work with Tailwind4
6
+
3
7
  ## Installation
4
8
 
5
9
  ```bash
6
10
  npm install fina-react-ds
7
- ```
11
+ ```
12
+
13
+ In `index.css` add this lines :
14
+
15
+ ```css
16
+ @source "../node_modules/fina-react-ds/dist";
17
+
18
+ @custom-variant dark (&:is(.dark *));
19
+
20
+ @theme inline {
21
+ --color-primary: var(--primary);
22
+ --color-primary-foreground: var(--primary-foreground);
23
+ --color-primary-light: var(--primary-light);
24
+ --color-primary-light-foreground: var(--primary-light-foreground);
25
+ --color-info: var(--info);
26
+ --color-info-foreground: var(--info-foreground);
27
+ --color-info-light: var(--info-light);
28
+ --color-info-light-foreground: var(--info-light-foreground);
29
+ --color-warning: var(--warning);
30
+ --color-warning-foreground: var(--warning-foreground);
31
+ --color-warning-light: var(--warning-light);
32
+ --color-warning-light-foreground: var(--warning-light-foreground);
33
+ --color-success: var(--success);
34
+ --color-success-foreground: var(--success-foreground);
35
+ --color-success-light: var(--success-light);
36
+ --color-success-light-foreground: var(--success-light-foreground);
37
+ --color-dark: var(--dark);
38
+ --color-dark-foreground: var(--dark-foreground);
39
+ --color-destructive: var(--destructive);
40
+ --color-destructive-foreground: var(--destructive-foreground);
41
+ --color-destructive-light: var(--destructive-light);
42
+ --color-destructive-light-foreground: var(--destructive-light-foreground);
43
+
44
+ --color-background: var(--background);
45
+ --color-foreground: var(--foreground);
46
+ --color-border: var(--border);
47
+ --color-ring: var(--ring);
48
+ --color-muted: var(--muted);
49
+ --color-accent: var(--accent);
50
+ --color-accent-foreground: var(--accent-foreground);
51
+
52
+ --color-card: var(--card);
53
+ --color-card-foreground: var(--card-foreground);
54
+ --color-tabs: var(--tabs);
55
+ --color-popover: var(--popover);
56
+ --color-popover-foreground: var(--popover-foreground);
57
+
58
+ --color-input: var(--input);
59
+ --color-input-border: var(--input-border);
60
+ --color-input-accent: var(--input-accent);
61
+ --color-input-accent-foreground: var(--input-accent-foreground);
62
+ --color-placeholder: var(--placeholder);
63
+
64
+ --color-chart-1: var(--chart-1);
65
+ --color-chart-2: var(--chart-2);
66
+ --color-chart-3: var(--chart-3);
67
+ --color-chart-4: var(--chart-4);
68
+ --color-chart-5: var(--chart-5);
69
+
70
+ --color-sidebar: var(--sidebar);
71
+ --color-sidebar-foreground: var(--sidebar-foreground);
72
+ --color-sidebar-primary: var(--sidebar-primary);
73
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
74
+ --color-sidebar-accent: var(--sidebar-accent);
75
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
76
+ --color-sidebar-border: var(--sidebar-border);
77
+ --color-sidebar-ring: var(--sidebar-ring);
78
+ }
79
+
80
+ :root {
81
+ --primary: oklch(0.4481 0.0944 269.57);
82
+ --primary-foreground: oklch(1 0 0);
83
+ --primary-light: oklch(0.9219 0.0113 269.54);
84
+ --primary-light-foreground: oklch(0.401 0.0817 269.12);
85
+ --destructive: oklch(0.6438 0.204 25.26);
86
+ --destructive-foreground: oklch(1 0 0);
87
+ --destructive-light: oklch(0.9467 0.0237 30.49);
88
+ --destructive-light-foreground: oklch(0.6004 0.1556 33.58);
89
+ --info: oklch(0.6599 0.135 238.76);
90
+ --info-foreground: oklch(1 0 0);
91
+ --info-light: oklch(0.9455 0.0226 233.36);
92
+ --info-light-foreground: oklch(0.587 0.1182 238.22);
93
+ --warning: oklch(0.8218 0.1423 77.89);
94
+ --warning-foreground: oklch(1 0 0);
95
+ --warning-light: oklch(0.9707 0.0237 79.74);
96
+ --warning-light-foreground: oklch(0.7275 0.1248 77.62);
97
+ --success: oklch(0.6872 0.1242 179.08);
98
+ --success-foreground: oklch(1 0 0);
99
+ --success-light: oklch(0.9471 0.0277 185.57);
100
+ --success-light-foreground: oklch(0.6095 0.1094 179.62);
101
+ --dark: oklch(0 0 0);
102
+ --dark-foreground: oklch(1 0 0);
103
+
104
+ --background: oklch(0.9659 0.008 286.25);
105
+ --foreground: oklch(0.145 0 0);
106
+ --border: oklch(0.922 0 0);
107
+ --ring: oklch(0.708 0 0);
108
+ --muted: oklch(0.5517 0.0138 285.94);
109
+ --accent: oklch(0.9674 0.0013 286.38);
110
+ --accent-foreground: oklch(0.2103 0.0059 285.89);
111
+
112
+ --card: oklch(1 0 0);
113
+ --card-foreground: oklch(0.145 0 0);
114
+ --tabs: oklch(1 0 0);
115
+ --popover: oklch(1 0 0);
116
+ --popover-foreground: oklch(0.145 0 0);
117
+
118
+ --input: oklch(1 0 0);
119
+ --input-border: oklch(0.922 0 0);
120
+ --input-accent: oklch(0.922 0 0);
121
+ --input-accent-foreground: oklch(0.145 0 0);
122
+ --placeholder: oklch(0.5517 0.0138 285.94);
123
+
124
+ --chart-1: oklch(0.646 0.222 41.116);
125
+ --chart-2: oklch(0.6 0.118 184.704);
126
+ --chart-3: oklch(0.398 0.07 227.392);
127
+ --chart-4: oklch(0.828 0.189 84.429);
128
+ --chart-5: oklch(0.769 0.188 70.08);
129
+
130
+ --sidebar: oklch(0.4482 0.0944 269.57);
131
+ --sidebar-foreground: oklch(1 0 0);
132
+ --sidebar-primary: oklch(0.205 0 0);
133
+ --sidebar-primary-foreground: oklch(0.985 0 0);
134
+ --sidebar-accent: oklch(0.97 0 0);
135
+ --sidebar-accent-foreground: oklch(0.205 0 0);
136
+ --sidebar-border: oklch(0.922 0 0);
137
+ --sidebar-ring: oklch(0.708 0 0);
138
+ }
139
+
140
+ .dark {
141
+ --primary: oklch(0.4481 0.0944 269.57);
142
+ --primary-foreground: oklch(1 0 0);
143
+ --primary-light: oklch(0.289 0.0214 265.85);
144
+ --primary-light-foreground: oklch(0.5656 0.0719 270.69);
145
+ --destructive: oklch(0.6763 0.1776 33.46);
146
+ --destructive-foreground: oklch(1 0 0);
147
+ --destructive-light: oklch(0.324 0.0253 26.24);
148
+ --destructive-light-foreground: oklch(0.731 0.1407 32.84);
149
+ --info: oklch(0.6599 0.135 238.76);
150
+ --info-foreground: oklch(1 0 0);
151
+ --info-light: oklch(0.325 0.0354 236.54);
152
+ --info-light-foreground: oklch(0.7215 0.1136 235.18);
153
+ --warning: oklch(0.8218 0.1423 77.89);
154
+ --warning-foreground: oklch(1 0 0);
155
+ --warning-light: oklch(0.3569 0.024 90.72);
156
+ --warning-light-foreground: oklch(0.8544 0.1201 79.41);
157
+ --success: oklch(0.6872 0.1242 179.08);
158
+ --success-foreground: oklch(1 0 0);
159
+ --success-light: oklch(0.3287 0.036 192.75);
160
+ --success-light-foreground: oklch(0.7381 0.1169 182.21);
161
+ --dark: oklch(0.3232 0.0068 248.04);
162
+ --dark-foreground: oklch(1 0 0);
163
+
164
+ --background: oklch(0.2293 0.009 255.61);
165
+ --foreground: oklch(0.985 0 0);
166
+ --border: oklch(1 0 0 / 10%);
167
+ --ring: oklch(0.556 0 0);
168
+ --muted: oklch(0.708 0 0);
169
+ --accent: oklch(0.3 0.007 248.07);
170
+ --accent-foreground: oklch(0.985 0 0);
171
+
172
+ --card: oklch(0.2621 0.0095 248.19);
173
+ --card-foreground: oklch(0.985 0 0);
174
+ --tabs: oklch(0.2621 0.0095 248.19);
175
+ --popover: oklch(0.2293 0.009 255.61);
176
+ --popover-foreground: oklch(0.985 0 0);
177
+
178
+ --input: oklch(0.2988 0.0092 248.14);
179
+ --input-border: oklch(1 0 0 / 15%);
180
+ --input-accent: oklch(1 0 0 / 15%);
181
+ --input-accent-foreground: oklch(0.985 0 0);
182
+ --placeholder: oklch(0.708 0 0);
183
+
184
+ --chart-1: oklch(0.488 0.243 264.376);
185
+ --chart-2: oklch(0.696 0.17 162.48);
186
+ --chart-3: oklch(0.769 0.188 70.08);
187
+ --chart-4: oklch(0.627 0.265 303.9);
188
+ --chart-5: oklch(0.645 0.246 16.439);
189
+
190
+ --sidebar: oklch(0.2621 0.0095 248.19);
191
+ --sidebar-foreground: oklch(0.985 0 0);
192
+ --sidebar-primary: oklch(0.488 0.243 264.376);
193
+ --sidebar-primary-foreground: oklch(0.985 0 0);
194
+ --sidebar-accent: oklch(0.2958 0.0084 255.57);
195
+ --sidebar-accent-foreground: oklch(0.985 0 0);
196
+ --sidebar-border: oklch(1 0 0 / 10%);
197
+ --sidebar-ring: oklch(0.556 0 0);
198
+ }
199
+
200
+ @layer base {
201
+ * {
202
+ @apply border-border outline-ring/50;
203
+ }
204
+ body {
205
+ @apply bg-background text-foreground;
206
+ }
207
+ }
208
+ ```
209
+
210
+ ## CKEditor
211
+
212
+
213
+ In `index.jsx` add this line :
214
+
215
+ ```jsx
216
+ import "fina-react-ds/ckeditor5.css";
217
+ ```
218
+
219
+ In `index.css` add this lines :
220
+
221
+ ```css
222
+ :root {
223
+ --ck-inner-shadow: none;
224
+ --ck-border-radius: 0.375rem;
225
+ }
226
+
227
+ .ck-sticky-panel__content {
228
+ border: none !important;
229
+ }
230
+
231
+ .ck-editor__editable {
232
+ min-height: 200px !important;
233
+ border: none !important;
234
+ }
235
+ ````
@@ -5163,6 +5163,154 @@ a.ck.ck-button.ck-link-toolbar__preview:has( .ck-icon ) {
5163
5163
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
5164
5164
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
5165
5165
  */
5166
+ .ck.ck-table-properties-form {
5167
+ width: 320px;
5168
+ }
5169
+ .ck.ck-table-properties-form .ck-form__row.ck-table-properties-form__alignment-row {
5170
+ align-self: flex-end;
5171
+ }
5172
+ .ck.ck-table-properties-form .ck-form__row.ck-table-properties-form__alignment-row .ck.ck-toolbar {
5173
+ background: none;
5174
+
5175
+ /* Compensate for missing input label that would push the margin (toolbar has no inputs). */
5176
+ margin-top: var(--ck-spacing-standard);
5177
+ }
5178
+ .ck.ck-table-properties-form .ck-form__row.ck-table-properties-form__alignment-row .ck.ck-toolbar .ck-toolbar__items > * {
5179
+ flex: 1;
5180
+ }
5181
+ .ck.ck-table-properties-form.ck-table-properties-form_experimental .ck-form__row.ck-table-properties-form__alignment-row {
5182
+ padding: var(--ck-spacing-standard) var(--ck-spacing-large) 0;
5183
+ }
5184
+ .ck.ck-table-properties-form.ck-table-properties-form_experimental .ck-form__row.ck-table-form__action-row {
5185
+ justify-content: flex-end;
5186
+ }
5187
+ .ck.ck-table-properties-form.ck-table-properties-form_experimental .ck-form__row.ck-table-form__action-row > .ck.ck-button {
5188
+ flex-grow: initial;
5189
+ }
5190
+ .ck.ck-table-properties-form.ck-table-properties-form_experimental .ck-form__row.ck-table-form__action-row > .ck.ck-button .ck-button__label {
5191
+ color: currentColor;
5192
+ }
5193
+ /*
5194
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
5195
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
5196
+ */
5197
+ /*
5198
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
5199
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
5200
+ */
5201
+ /**
5202
+ * Implements rounded corner interface for .ck-rounded-corners class.
5203
+ *
5204
+ * @see $ck-border-radius
5205
+ */
5206
+ :root {
5207
+ --ck-table-properties-error-arrow-size: 6px;
5208
+ --ck-table-properties-min-error-width: 150px;
5209
+ }
5210
+ .ck.ck-table-form.ck-table-properties-form_experimental {
5211
+ --ck-table-form-default-input-width: 80px;
5212
+ }
5213
+ .ck.ck-table-form.ck-table-properties-form_experimental .ck-form__row.ck-table-form__border-row .ck-labeled-field-view > .ck-label {
5214
+ font-size: var(--ck-font-size-tiny);
5215
+ text-align: center;
5216
+ }
5217
+ .ck.ck-table-form.ck-table-properties-form_experimental .ck-form__row.ck-table-form__border-row .ck-table-form__border-style,
5218
+ .ck.ck-table-form.ck-table-properties-form_experimental .ck-form__row.ck-table-form__border-row .ck-table-form__border-width {
5219
+ width: var(--ck-table-form-default-input-width);
5220
+ min-width: var(--ck-table-form-default-input-width);
5221
+ max-width: var(--ck-table-form-default-input-width);
5222
+ }
5223
+ .ck.ck-table-form.ck-table-properties-form_experimental .ck-form__row.ck-table-form__dimensions-row {
5224
+ --ck-table-form-dimensions-input-width: calc(var(--ck-table-form-default-input-width) * 2 + var(--ck-spacing-large));
5225
+
5226
+ width: var(--ck-table-form-dimensions-input-width);
5227
+ max-width: var(--ck-table-form-dimensions-input-width);
5228
+ min-width: var(--ck-table-form-dimensions-input-width);
5229
+ padding: 0;
5230
+ }
5231
+ .ck.ck-table-form.ck-table-properties-form_experimental .ck-form__row.ck-table-form__dimensions-row .ck-table-form__dimensions-row__width,
5232
+ .ck.ck-table-form.ck-table-properties-form_experimental .ck-form__row.ck-table-form__dimensions-row .ck-table-form__dimensions-row__height {
5233
+ width: var(--ck-table-form-default-input-width);
5234
+ min-width: var(--ck-table-form-default-input-width);
5235
+ max-width: var(--ck-table-form-default-input-width);
5236
+ margin: 0
5237
+ }
5238
+ .ck.ck-table-form.ck-table-properties-form_experimental .ck-form__row.ck-table-form__dimensions-row .ck-table-form__dimension-operator {
5239
+ position: relative;
5240
+ left: -0.5ch;
5241
+ width: 0;
5242
+ overflow: visible;
5243
+ align-self: flex-end;
5244
+ display: inline-block;
5245
+ height: var(--ck-ui-component-min-height);
5246
+ line-height: var(--ck-ui-component-min-height);
5247
+ margin: 0 var(--ck-spacing-small);
5248
+ }
5249
+ .ck.ck-table-form.ck-table-properties-form_experimental .ck.ck-labeled-field-view {
5250
+ padding-top: var(--ck-spacing-standard);
5251
+ }
5252
+ .ck.ck-table-form.ck-table-properties-form_experimental .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status {
5253
+ border-radius: 0;
5254
+
5255
+ background: var(--ck-color-base-error);
5256
+ color: var(--ck-color-base-background);
5257
+ padding: var(--ck-spacing-small) var(--ck-spacing-medium);
5258
+ min-width: var(--ck-table-properties-min-error-width);
5259
+ text-align: center;
5260
+
5261
+ animation: ck-table-form-labeled-view-status-appear .15s ease both;
5262
+ }
5263
+ .ck-rounded-corners .ck.ck-table-form.ck-table-properties-form_experimental .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status,
5264
+ .ck.ck-table-form.ck-table-properties-form_experimental .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status.ck-rounded-corners {
5265
+ border-radius: var(--ck-border-radius);
5266
+ }
5267
+ /* The arrow pointing towards the field. */
5268
+ .ck.ck-table-form.ck-table-properties-form_experimental .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status::after {
5269
+ border-color: transparent transparent var(--ck-color-base-error) transparent;
5270
+ border-width: 0 var(--ck-table-properties-error-arrow-size) var(--ck-table-properties-error-arrow-size) var(--ck-table-properties-error-arrow-size);
5271
+ border-style: solid;
5272
+ }
5273
+ @media (prefers-reduced-motion: reduce) {
5274
+ .ck.ck-table-form.ck-table-properties-form_experimental .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status {
5275
+ animation: none;
5276
+ }
5277
+ }
5278
+ /* Hide the error balloon when the field is blurred. Makes the experience much more clear. */
5279
+ .ck.ck-table-form.ck-table-properties-form_experimental .ck.ck-labeled-field-view .ck-input.ck-error:not(:focus) + .ck.ck-labeled-field-view__status {
5280
+ display: none;
5281
+ }
5282
+ @keyframes ck-table-form-labeled-view-status-appear {
5283
+ 0% {
5284
+ opacity: 0;
5285
+ }
5286
+
5287
+ 100% {
5288
+ opacity: 1;
5289
+ }
5290
+ }
5291
+ /*
5292
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
5293
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
5294
+ */
5295
+ /*
5296
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
5297
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
5298
+ */
5299
+ /* Ignore labels that work as fieldset legends */
5300
+ .ck.ck-form__row > *:not(.ck-label) + * {
5301
+ margin-inline-start: var(--ck-spacing-large);
5302
+ }
5303
+ .ck.ck-form__row > .ck-label {
5304
+ width: 100%;
5305
+ min-width: 100%;
5306
+ }
5307
+ .ck.ck-form__row.ck-table-form__action-row {
5308
+ margin-top: var(--ck-spacing-large);
5309
+ }
5310
+ /*
5311
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
5312
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
5313
+ */
5166
5314
  /*
5167
5315
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
5168
5316
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
@@ -6195,6 +6343,7 @@ Fullscreen layout:
6195
6343
  <div class="ck ck-fullscreen__sidebar ck-fullscreen__left-sidebar" data-ck-fullscreen="left-sidebar"></div>
6196
6344
  <div class="ck ck-fullscreen__editable" data-ck-fullscreen="editable"></div>
6197
6345
  <div class="ck ck-fullscreen__sidebar ck-fullscreen__right-sidebar" data-ck-fullscreen="right-sidebar"></div>
6346
+ <div class="ck ck-fullscreen__right-edge" data-ck-fullscreen="right-edge"></div>
6198
6347
  </div>
6199
6348
  <div class="ck ck-fullscreen__bottom-wrapper">
6200
6349
  <div class="ck ck-fullscreen__body-wrapper" data-ck-fullscreen="body-wrapper"></div>
@@ -6283,7 +6432,7 @@ Fullscreen layout:
6283
6432
  }
6284
6433
 
6285
6434
  .ck-fullscreen__sidebar {
6286
- width: 300px;
6435
+ width: 270px;
6287
6436
  margin-top: var(--ck-fullscreen-editor-top-margin);
6288
6437
  margin-left: 10px;
6289
6438
  }
@@ -6297,18 +6446,41 @@ Fullscreen layout:
6297
6446
  height: 100%;
6298
6447
  background-color: transparent;
6299
6448
  margin-top: 0px;
6449
+ margin-right: 10px;
6300
6450
  box-sizing: border-box;
6301
6451
  display: flex;
6302
6452
  flex-direction: column;
6303
6453
  }
6304
6454
 
6305
- .ck-fullscreen__left-sidebar > :first-child {
6455
+ .ck-fullscreen__left-sidebar .ck-button.ck-fullscreen__left-sidebar-toggle-button {
6456
+ --ck-icon-size: 20px;
6457
+ --ck-ui-component-min-height: 0px;
6458
+
6459
+ align-self: flex-start;
6460
+ padding-top: 0;
6461
+ margin-top: var(--ck-fullscreen-editor-top-margin);
6462
+ margin-bottom: var(--ck-spacing-large);
6463
+ opacity: 0.5;
6464
+ border-radius: 100%;
6465
+ }
6466
+
6467
+ .ck-fullscreen__left-sidebar > .ck-fullscreen__left-sidebar-sticky {
6306
6468
  /* Set minimal width if there is any item in the sidebar. */
6307
- min-width: 300px;
6308
- /* We have to use padding-top instead of margin-top because margin is scrollable. */
6309
- padding-top: var(--ck-fullscreen-editor-top-margin);
6469
+ min-width: 270px;
6470
+ }
6471
+
6472
+ .ck-fullscreen__left-sidebar > .ck-fullscreen__left-sidebar-sticky:first-child {
6473
+ padding-top: var(--ck-fullscreen-editor-top-margin);
6474
+ }
6475
+
6476
+ .ck-fullscreen__left-sidebar.ck-fullscreen__left-sidebar--collapsed {
6477
+ width: 65px;
6310
6478
  }
6311
6479
 
6480
+ .ck-fullscreen__left-sidebar.ck-fullscreen__left-sidebar--collapsed > :not(.ck-fullscreen__left-sidebar-toggle-button) {
6481
+ display: none;
6482
+ }
6483
+
6312
6484
  .ck-fullscreen__left-sidebar .ck.ck-presence-list--collapsed {
6313
6485
  --ck-user-avatar-size: 32px;
6314
6486
  }
@@ -6379,9 +6551,32 @@ Fullscreen layout:
6379
6551
  margin-right: auto;
6380
6552
  }
6381
6553
 
6382
- .ck-fullscreen__sidebar.ck-fullscreen__right-sidebar> :first-child {
6554
+ .ck-fullscreen__sidebar.ck-fullscreen__right-sidebar:not(.ck-fullscreen__right-sidebar--collapsed) > :first-child {
6383
6555
  /* Set minimal width if there is any item in the sidebar. */
6384
- min-width: 300px;
6556
+ min-width: 270px;
6557
+ }
6558
+
6559
+ .ck-fullscreen__sidebar.ck-fullscreen__right-sidebar.ck-fullscreen__right-sidebar--collapsed {
6560
+ width: 65px;
6561
+ }
6562
+
6563
+ .ck-fullscreen__sidebar.ck-fullscreen__right-sidebar.ck-fullscreen__right-sidebar--collapsed > :first-child {
6564
+ min-width: 65px;
6565
+ }
6566
+
6567
+ .ck.ck-fullscreen__right-edge {
6568
+ position: sticky;
6569
+ top: 0;
6570
+ margin-top: 0;
6571
+ margin-left: 10px;
6572
+ }
6573
+
6574
+ .ck.ck-fullscreen__right-edge > :first-child {
6575
+ border-top: none;
6576
+ border-bottom: none;
6577
+ border-right: none;
6578
+ height: 100%;
6579
+ width: 495px;
6385
6580
  }
6386
6581
 
6387
6582
  /*
@@ -8733,9 +8928,9 @@ div.ck.ck-balloon-panel.ck-mention-balloon {
8733
8928
  * * The table has `display: table` style set.
8734
8929
  * * The block element is placed directly after the table.
8735
8930
  */
8736
- .ck-content figure.table:not(.layout-table):not(:has(> figcaption)) {
8737
- display: block;
8931
+ .ck-content figure.table:not(.layout-table) {
8738
8932
  width: fit-content;
8933
+ height: fit-content;
8739
8934
  }
8740
8935
 
8741
8936
  /**
@@ -8768,29 +8963,6 @@ div.ck.ck-balloon-panel.ck-mention-balloon {
8768
8963
  width: 100%;
8769
8964
  }
8770
8965
 
8771
- /*
8772
- * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
8773
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
8774
- */
8775
-
8776
- .ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row {
8777
- flex-wrap: wrap;
8778
- }
8779
-
8780
- .ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row .ck.ck-toolbar:first-of-type {
8781
- /* 4 buttons out of 7 (h-alignment + v-alignment) = 0.57 */
8782
- flex-grow: 0.57;
8783
- }
8784
-
8785
- .ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row .ck.ck-toolbar:last-of-type {
8786
- /* 3 buttons out of 7 (h-alignment + v-alignment) = 0.43 */
8787
- flex-grow: 0.43;
8788
- }
8789
-
8790
- .ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row .ck.ck-toolbar .ck-button {
8791
- flex-grow: 1;
8792
- }
8793
-
8794
8966
  /*
8795
8967
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
8796
8968
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
@@ -8865,96 +9037,156 @@ div.ck.ck-balloon-panel.ck-mention-balloon {
8865
9037
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
8866
9038
  */
8867
9039
 
9040
+ .ck.ck-table-properties-form .ck-form__row.ck-table-properties-form__alignment-row {
9041
+ flex-wrap: wrap;
9042
+ flex-basis: 0;
9043
+ align-content: baseline;
9044
+ }
9045
+
9046
+ .ck.ck-table-properties-form .ck-form__row.ck-table-properties-form__alignment-row .ck.ck-toolbar .ck-toolbar__items {
9047
+ flex-wrap: nowrap;
9048
+ }
9049
+
8868
9050
  /*
8869
9051
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
8870
9052
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
8871
9053
  */
9054
+
8872
9055
  /*
8873
9056
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
8874
9057
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
8875
9058
  */
8876
9059
 
8877
9060
  :root {
8878
- --ck-form-default-width: 340px;
9061
+ --ck-content-color-table-caption-background: hsl(0, 0%, 97%);
9062
+ --ck-content-color-table-caption-text: hsl(0, 0%, 20%);
9063
+ --ck-color-table-caption-highlighted-background: hsl(52deg 100% 50%);
8879
9064
  }
8880
9065
 
8881
- .ck.ck-form {
8882
- padding: 0 0 var(--ck-spacing-large);
8883
- }
9066
+ /* Content styles */
9067
+ .ck-content .table > figcaption,
9068
+ .ck-content figure.table > table > caption {
9069
+ display: table-caption;
9070
+ caption-side: top;
9071
+ word-break: normal;
9072
+ overflow-wrap: anywhere;
9073
+ text-align: center;
9074
+ color: var(--ck-content-color-table-caption-text);
9075
+ background-color: var(--ck-content-color-table-caption-background);
9076
+ padding: .6em;
9077
+ font-size: .75em;
9078
+ outline-offset: -1px;
8884
9079
 
8885
- .ck.ck-form.ck-form_default-width {
8886
- width: var(--ck-form-default-width);
9080
+ /* Improve placeholder rendering in high-constrast mode (https://github.com/ckeditor/ckeditor5/issues/14907). */
9081
+ }
9082
+ @media (forced-colors: active) {
9083
+ .ck-content .table > figcaption, .ck-content figure.table > table > caption {
9084
+ background-color: unset;
9085
+ color: unset;
9086
+ }
8887
9087
  }
8888
9088
 
8889
- .ck.ck-form:focus {
8890
- outline: none;
9089
+ /* Editing styles */
9090
+ @media (forced-colors: none) {
9091
+ .ck.ck-editor__editable .table > figcaption.table__caption_highlighted, .ck.ck-editor__editable figure.table > table > caption.table__caption_highlighted {
9092
+ animation: ck-table-caption-highlight .6s ease-out;
9093
+ }
8891
9094
  }
9095
+ .ck.ck-editor__editable .table > figcaption.ck-placeholder::before, .ck.ck-editor__editable figure.table > table > caption.ck-placeholder::before {
9096
+ padding-left: inherit;
9097
+ padding-right: inherit;
8892
9098
 
8893
- .ck.ck-form .ck.ck-input-text,
8894
- .ck.ck-form .ck.ck-input-number {
8895
- min-width: 100%;
8896
- width: 0;
9099
+ /*
9100
+ * Make sure the table caption placeholder doesn't overflow the placeholder area.
9101
+ * See https://github.com/ckeditor/ckeditor5/issues/9162.
9102
+ */
9103
+ white-space: nowrap;
9104
+ overflow: hidden;
9105
+ text-overflow: ellipsis;
8897
9106
  }
8898
9107
 
8899
- .ck.ck-form .ck.ck-dropdown {
8900
- min-width: 100%;
9108
+ @keyframes ck-table-caption-highlight {
9109
+ 0% {
9110
+ background-color: var(--ck-color-table-caption-highlighted-background);
8901
9111
  }
8902
9112
 
8903
- .ck.ck-form .ck.ck-dropdown .ck-dropdown__button:not(:focus) {
8904
- border: 1px solid var(--ck-color-base-border);
8905
- }
9113
+ 100% {
9114
+ background-color: var(--ck-content-color-table-caption-background);
9115
+ }
9116
+ }
8906
9117
 
8907
- .ck.ck-form .ck.ck-dropdown .ck-dropdown__button .ck-button__label {
8908
- width: 100%;
8909
- }
9118
+ /*
9119
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
9120
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
9121
+ */
8910
9122
 
8911
- /* Default `ck-responsive-form` customization when it lies next to `ck-form` class */
9123
+ :root {
9124
+ --ck-color-table-column-resizer-hover: var(--ck-color-base-active);
9125
+ --ck-table-column-resizer-width: 7px;
8912
9126
 
8913
- @media screen and (max-width: 600px) {
9127
+ /* The offset used for absolute positioning of the resizer element, so that it is placed exactly above the cell border.
9128
+ The value is: minus half the width of the resizer decreased additionaly by the half the width of the border (0.5px). */
9129
+ --ck-table-column-resizer-position-offset: calc(var(--ck-table-column-resizer-width) * -0.5 - 0.5px);
9130
+ }
8914
9131
 
8915
- .ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_with-submit {
8916
- flex-direction: column;
8917
- align-items: stretch;
8918
- padding: 0;
8919
- }
8920
- }
9132
+ .ck-content .table .ck-table-resized {
9133
+ table-layout: fixed;
9134
+ }
8921
9135
 
8922
- @media screen and (max-width: 600px) {
8923
-
8924
- .ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_with-submit > .ck {
8925
- margin: var(--ck-spacing-large) var(--ck-spacing-large) 0;
8926
- }
8927
- }
8928
-
8929
- @media screen and (max-width: 600px) {
9136
+ .ck-content .table td,
9137
+ .ck-content .table th {
9138
+ /* To prevent text overflowing beyond its cell when columns are resized by resize handler
9139
+ (https://github.com/ckeditor/ckeditor5/pull/14379#issuecomment-1589460978). */
9140
+ overflow-wrap: break-word;
9141
+ }
8930
9142
 
8931
- .ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_with-submit .ck-button_with-text {
8932
- justify-content: center;
8933
- }
8934
- }
9143
+ .ck.ck-editor__editable .table td,
9144
+ .ck.ck-editor__editable .table th {
9145
+ /* The resizer element is placed inside each cell, so it must be positioned relatively to the cell. */
9146
+ position: relative;
9147
+ }
8935
9148
 
8936
- @media screen and (max-width: 600px) {
9149
+ .ck.ck-editor__editable .table .ck-table-column-resizer {
9150
+ position: absolute;
9151
+ top: 0;
9152
+ bottom: 0;
9153
+ right: var(--ck-table-column-resizer-position-offset);
9154
+ width: var(--ck-table-column-resizer-width);
9155
+ cursor: col-resize;
9156
+ user-select: none;
9157
+ z-index: var(--ck-z-default);
9158
+ }
8937
9159
 
8938
- .ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_large-bottom-padding {
8939
- padding-bottom: var(--ck-spacing-large);
8940
- }
8941
- }
9160
+ .ck.ck-editor__editable.ck-column-resize_disabled .table .ck-table-column-resizer {
9161
+ display: none;
9162
+ }
8942
9163
 
8943
- [dir="ltr"] .ck.ck-form.ck-responsive-form > :not(:first-child) {
8944
- margin-left: 0;
8945
- }
9164
+ /* The resizer elements, which are extended to an extremely high height, break the drag & drop feature in Chrome. To make it work again,
9165
+ all resizers must be hidden while the table is dragged. */
9166
+ .ck.ck-editor__editable .table[draggable] .ck-table-column-resizer {
9167
+ display: none;
9168
+ }
8946
9169
 
8947
- [dir="rtl"] .ck.ck-form.ck-responsive-form > :not(:last-child) {
8948
- margin-left: 0;
8949
- }
9170
+ .ck.ck-editor__editable .table .ck-table-column-resizer:hover,
9171
+ .ck.ck-editor__editable .table .ck-table-column-resizer__active {
9172
+ background-color: var(--ck-color-table-column-resizer-hover);
9173
+ opacity: 0.25;
9174
+ }
8950
9175
 
8951
- /* End of `ck-responsive-form` customization */
9176
+ .ck.ck-editor__editable[dir=rtl] .table .ck-table-column-resizer {
9177
+ left: var(--ck-table-column-resizer-position-offset);
9178
+ right: unset;
9179
+ }
8952
9180
 
8953
9181
  /*
8954
9182
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
8955
9183
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
8956
9184
  */
8957
9185
 
9186
+ .ck.ck-form__row.ck-table-form__action-row {
9187
+ justify-content: flex-end;
9188
+ }
9189
+
8958
9190
  .ck.ck-form__row.ck-table-form__action-row .ck-button-save,
8959
9191
  .ck.ck-form__row.ck-table-form__action-row .ck-button-cancel {
8960
9192
  justify-content: center;
@@ -8988,15 +9220,11 @@ div.ck.ck-balloon-panel.ck-mention-balloon {
8988
9220
  flex-grow: 0;
8989
9221
  }
8990
9222
 
8991
- .ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row .ck-table-form__dimension-operator {
8992
- flex-grow: 0;
8993
- }
8994
-
8995
9223
  /* Ignore labels that work as fieldset legends */
8996
9224
 
8997
9225
  /* Fallback for table dimension operator */
8998
9226
 
8999
- .ck.ck-table-form .ck-form__row > *:not(.ck-label, .ck-table-form__dimension-operator) {
9227
+ .ck.ck-table-form .ck-form__row:not(.ck-table-form__action-row) > *:not(.ck-label, .ck-table-form__dimension-operator) {
9000
9228
  flex-grow: 1;
9001
9229
  }
9002
9230
 
@@ -9025,11 +9253,23 @@ div.ck.ck-balloon-panel.ck-mention-balloon {
9025
9253
  transform: translateX( -50% );
9026
9254
  }
9027
9255
 
9256
+ .ck.ck-table-form:has( .ck-form__header > .ck-button-back ) .ck-form__row.ck-table-form__action-row > .ck.ck-button {
9257
+ flex-grow: initial;
9258
+ }
9259
+
9260
+ .ck.ck-table-form:has( .ck-form__header > .ck-button-back ) .ck-form__row.ck-table-form__action-row > .ck.ck-button .ck-button__label {
9261
+ color: currentColor;
9262
+ }
9263
+
9028
9264
  /*
9029
9265
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
9030
9266
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
9031
9267
  */
9032
9268
 
9269
+ :root {
9270
+ --ck-content-table-style-spacing: 1.5em;
9271
+ }
9272
+
9033
9273
  .ck.ck-table-properties-form .ck-form__row.ck-table-properties-form__alignment-row {
9034
9274
  flex-wrap: wrap;
9035
9275
  flex-basis: 0;
@@ -9040,136 +9280,241 @@ div.ck.ck-balloon-panel.ck-mention-balloon {
9040
9280
  flex-wrap: nowrap;
9041
9281
  }
9042
9282
 
9283
+ .ck-content .table.table-style-align-left {
9284
+ float: left;
9285
+ margin-right: var(--ck-content-table-style-spacing);
9286
+ }
9287
+
9288
+ .ck-content .table.table-style-align-right {
9289
+ float: right;
9290
+ margin-left: var(--ck-content-table-style-spacing);
9291
+ }
9292
+
9293
+ .ck-content .table.table-style-align-center {
9294
+ margin-left: auto;
9295
+ margin-right: auto;
9296
+ }
9297
+
9298
+ .ck-content .table.table-style-block-align-left {
9299
+ margin-left: 0;
9300
+ margin-right: auto;
9301
+ }
9302
+
9303
+ .ck-content .table.table-style-block-align-right {
9304
+ margin-left: auto;
9305
+ margin-right: 0;
9306
+ }
9307
+
9308
+ .ck-editor__editable .table.layout-table.table-style-align-center {
9309
+ margin-left: auto;
9310
+ margin-right: auto;
9311
+ }
9312
+
9313
+ .ck-editor__editable .table.layout-table.table-style-align-left {
9314
+ margin-right: var(--ck-content-table-style-spacing);
9315
+ }
9316
+
9317
+ .ck-editor__editable .table.layout-table.table-style-align-right {
9318
+ margin-left: var(--ck-content-table-style-spacing);
9319
+ }
9320
+
9321
+ .ck-editor__editable .table.layout-table.table-style-block-align-left {
9322
+ margin-left: 0;
9323
+ margin-right: auto;
9324
+ }
9325
+
9326
+ .ck-editor__editable .table.layout-table.table-style-block-align-right {
9327
+ margin-left: auto;
9328
+ margin-right: 0;
9329
+ }
9330
+
9043
9331
  /*
9044
9332
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
9045
9333
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
9046
9334
  */
9047
9335
 
9336
+ /*
9337
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
9338
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
9339
+ */
9048
9340
  /*
9049
9341
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
9050
9342
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
9051
9343
  */
9052
9344
 
9053
9345
  :root {
9054
- --ck-content-color-table-caption-background: hsl(0, 0%, 97%);
9055
- --ck-content-color-table-caption-text: hsl(0, 0%, 20%);
9056
- --ck-color-table-caption-highlighted-background: hsl(52deg 100% 50%);
9346
+ --ck-form-default-width: 340px;
9057
9347
  }
9058
9348
 
9059
- /* Content styles */
9060
- .ck-content .table > figcaption,
9061
- .ck-content figure.table > table > caption {
9062
- display: table-caption;
9063
- caption-side: top;
9064
- word-break: normal;
9065
- overflow-wrap: anywhere;
9066
- text-align: center;
9067
- color: var(--ck-content-color-table-caption-text);
9068
- background-color: var(--ck-content-color-table-caption-background);
9069
- padding: .6em;
9070
- font-size: .75em;
9071
- outline-offset: -1px;
9072
-
9073
- /* Improve placeholder rendering in high-constrast mode (https://github.com/ckeditor/ckeditor5/issues/14907). */
9349
+ .ck.ck-form {
9350
+ padding: 0 0 var(--ck-spacing-large);
9074
9351
  }
9075
- @media (forced-colors: active) {
9076
- .ck-content .table > figcaption, .ck-content figure.table > table > caption {
9077
- background-color: unset;
9078
- color: unset;
9079
- }
9352
+
9353
+ .ck.ck-form.ck-form_default-width {
9354
+ width: var(--ck-form-default-width);
9080
9355
  }
9081
9356
 
9082
- /* Editing styles */
9083
- @media (forced-colors: none) {
9084
- .ck.ck-editor__editable .table > figcaption.table__caption_highlighted, .ck.ck-editor__editable figure.table > table > caption.table__caption_highlighted {
9085
- animation: ck-table-caption-highlight .6s ease-out;
9086
- }
9357
+ .ck.ck-form:focus {
9358
+ outline: none;
9087
9359
  }
9088
- .ck.ck-editor__editable .table > figcaption.ck-placeholder::before, .ck.ck-editor__editable figure.table > table > caption.ck-placeholder::before {
9089
- padding-left: inherit;
9090
- padding-right: inherit;
9091
9360
 
9092
- /*
9093
- * Make sure the table caption placeholder doesn't overflow the placeholder area.
9094
- * See https://github.com/ckeditor/ckeditor5/issues/9162.
9095
- */
9096
- white-space: nowrap;
9097
- overflow: hidden;
9098
- text-overflow: ellipsis;
9361
+ .ck.ck-form .ck.ck-input-text,
9362
+ .ck.ck-form .ck.ck-input-number {
9363
+ min-width: 100%;
9364
+ width: 0;
9099
9365
  }
9100
9366
 
9101
- @keyframes ck-table-caption-highlight {
9102
- 0% {
9103
- background-color: var(--ck-color-table-caption-highlighted-background);
9367
+ .ck.ck-form .ck.ck-dropdown {
9368
+ min-width: 100%;
9104
9369
  }
9105
9370
 
9106
- 100% {
9107
- background-color: var(--ck-content-color-table-caption-background);
9371
+ .ck.ck-form .ck.ck-dropdown .ck-dropdown__button:not(:focus) {
9372
+ border: 1px solid var(--ck-color-base-border);
9373
+ }
9374
+
9375
+ .ck.ck-form .ck.ck-dropdown .ck-dropdown__button .ck-button__label {
9376
+ width: 100%;
9377
+ }
9378
+
9379
+ /* Default `ck-responsive-form` customization when it lies next to `ck-form` class */
9380
+
9381
+ @media screen and (max-width: 600px) {
9382
+
9383
+ .ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_with-submit {
9384
+ flex-direction: column;
9385
+ align-items: stretch;
9386
+ padding: 0;
9387
+ }
9108
9388
  }
9109
- }
9389
+
9390
+ @media screen and (max-width: 600px) {
9391
+
9392
+ .ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_with-submit > .ck {
9393
+ margin: var(--ck-spacing-large) var(--ck-spacing-large) 0;
9394
+ }
9395
+ }
9396
+
9397
+ @media screen and (max-width: 600px) {
9398
+
9399
+ .ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_with-submit .ck-button_with-text {
9400
+ justify-content: center;
9401
+ }
9402
+ }
9403
+
9404
+ @media screen and (max-width: 600px) {
9405
+
9406
+ .ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_large-bottom-padding {
9407
+ padding-bottom: var(--ck-spacing-large);
9408
+ }
9409
+ }
9410
+
9411
+ [dir="ltr"] .ck.ck-form.ck-responsive-form > :not(:first-child) {
9412
+ margin-left: 0;
9413
+ }
9414
+
9415
+ [dir="rtl"] .ck.ck-form.ck-responsive-form > :not(:last-child) {
9416
+ margin-left: 0;
9417
+ }
9418
+
9419
+ /* End of `ck-responsive-form` customization */
9110
9420
 
9111
9421
  /*
9112
9422
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
9113
9423
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
9114
9424
  */
9115
9425
 
9116
- :root {
9117
- --ck-color-table-column-resizer-hover: var(--ck-color-base-active);
9118
- --ck-table-column-resizer-width: 7px;
9426
+ .ck.ck-form__row.ck-table-form__action-row .ck-button-save,
9427
+ .ck.ck-form__row.ck-table-form__action-row .ck-button-cancel {
9428
+ justify-content: center;
9429
+ }
9119
9430
 
9120
- /* The offset used for absolute positioning of the resizer element, so that it is placed exactly above the cell border.
9121
- The value is: minus half the width of the resizer decreased additionaly by the half the width of the border (0.5px). */
9122
- --ck-table-column-resizer-position-offset: calc(var(--ck-table-column-resizer-width) * -0.5 - 0.5px);
9123
- }
9431
+ /*
9432
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
9433
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
9434
+ */
9124
9435
 
9125
- .ck-content .table .ck-table-resized {
9126
- table-layout: fixed;
9127
- }
9436
+ .ck.ck-table-form .ck-form__row.ck-table-form__border-row {
9437
+ flex-wrap: wrap;
9438
+ }
9128
9439
 
9129
- .ck-content .table td,
9130
- .ck-content .table th {
9131
- /* To prevent text overflowing beyond its cell when columns are resized by resize handler
9132
- (https://github.com/ckeditor/ckeditor5/pull/14379#issuecomment-1589460978). */
9133
- overflow-wrap: break-word;
9134
- }
9440
+ .ck.ck-table-form .ck-form__row.ck-table-form__background-row {
9441
+ flex-wrap: wrap;
9442
+ }
9135
9443
 
9136
- .ck.ck-editor__editable .table td,
9137
- .ck.ck-editor__editable .table th {
9138
- /* The resizer element is placed inside each cell, so it must be positioned relatively to the cell. */
9139
- position: relative;
9140
- }
9444
+ .ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row {
9445
+ flex-wrap: wrap;
9446
+ align-items: center;
9447
+ }
9141
9448
 
9142
- .ck.ck-editor__editable .table .ck-table-column-resizer {
9143
- position: absolute;
9144
- top: 0;
9145
- bottom: 0;
9146
- right: var(--ck-table-column-resizer-position-offset);
9147
- width: var(--ck-table-column-resizer-width);
9148
- cursor: col-resize;
9149
- user-select: none;
9150
- z-index: var(--ck-z-default);
9151
- }
9449
+ .ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row .ck-labeled-field-view {
9450
+ display: flex;
9451
+ flex-direction: column-reverse;
9452
+ align-items: center;
9453
+ }
9152
9454
 
9153
- .ck.ck-editor__editable.ck-column-resize_disabled .table .ck-table-column-resizer {
9154
- display: none;
9155
- }
9455
+ .ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row .ck-labeled-field-view .ck.ck-dropdown {
9456
+ flex-grow: 0;
9457
+ }
9156
9458
 
9157
- /* The resizer elements, which are extended to an extremely high height, break the drag & drop feature in Chrome. To make it work again,
9158
- all resizers must be hidden while the table is dragged. */
9159
- .ck.ck-editor__editable .table[draggable] .ck-table-column-resizer {
9160
- display: none;
9161
- }
9459
+ .ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row .ck-table-form__dimension-operator {
9460
+ flex-grow: 0;
9461
+ }
9162
9462
 
9163
- .ck.ck-editor__editable .table .ck-table-column-resizer:hover,
9164
- .ck.ck-editor__editable .table .ck-table-column-resizer__active {
9165
- background-color: var(--ck-color-table-column-resizer-hover);
9166
- opacity: 0.25;
9167
- }
9463
+ /* Ignore labels that work as fieldset legends */
9168
9464
 
9169
- .ck.ck-editor__editable[dir=rtl] .table .ck-table-column-resizer {
9170
- left: var(--ck-table-column-resizer-position-offset);
9171
- right: unset;
9172
- }
9465
+ /* Fallback for table dimension operator */
9466
+
9467
+ .ck.ck-table-form .ck-form__row > *:not(.ck-label, .ck-table-form__dimension-operator) {
9468
+ flex-grow: 1;
9469
+ }
9470
+
9471
+ .ck.ck-table-form .ck.ck-labeled-field-view {
9472
+ /* Allow absolute positioning of the status (error) balloons. */
9473
+ position: relative;
9474
+ }
9475
+
9476
+ .ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status {
9477
+ position: absolute;
9478
+ left: 50%;
9479
+ bottom: calc( -1 * var(--ck-table-properties-error-arrow-size) );
9480
+ transform: translate(-50%,100%);
9481
+
9482
+ /* Make sure the balloon status stays on top of other form elements. */
9483
+ z-index: 1;
9484
+
9485
+ /* The arrow pointing towards the field. */
9486
+ }
9487
+
9488
+ .ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status::after {
9489
+ content: "";
9490
+ position: absolute;
9491
+ top: calc( -1 * var(--ck-table-properties-error-arrow-size) );
9492
+ left: 50%;
9493
+ transform: translateX( -50% );
9494
+ }
9495
+
9496
+ /*
9497
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
9498
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
9499
+ */
9500
+
9501
+ .ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row {
9502
+ flex-wrap: wrap;
9503
+ }
9504
+
9505
+ .ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row .ck.ck-toolbar:first-of-type {
9506
+ /* 4 buttons out of 7 (h-alignment + v-alignment) = 0.57 */
9507
+ flex-grow: 0.57;
9508
+ }
9509
+
9510
+ .ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row .ck.ck-toolbar:last-of-type {
9511
+ /* 3 buttons out of 7 (h-alignment + v-alignment) = 0.43 */
9512
+ flex-grow: 0.43;
9513
+ }
9514
+
9515
+ .ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row .ck.ck-toolbar .ck-button {
9516
+ flex-grow: 1;
9517
+ }
9173
9518
 
9174
9519
  /*
9175
9520
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
@@ -10573,17 +10918,20 @@ a.ck.ck-button {
10573
10918
  }
10574
10919
 
10575
10920
  /*
10576
- * Integration with the restricted editing mode (feature) of the editor.
10921
+ * Integration with the #isEnabled property of the WidgetTypeAround plugin.
10577
10922
  */
10578
- .ck.ck-editor__editable.ck-restricted-editing_mode_restricted .ck-widget__type-around {
10923
+ .ck.ck-editor__editable.ck-widget__type-around_disabled .ck-widget__type-around {
10579
10924
  display: none;
10580
10925
  }
10581
10926
 
10582
10927
  /*
10583
- * Integration with the #isEnabled property of the WidgetTypeAround plugin.
10928
+ * Integration with the restricted editing mode (feature) of the editor.
10584
10929
  */
10585
- .ck.ck-editor__editable.ck-widget__type-around_disabled .ck-widget__type-around {
10586
- display: none;
10587
- }
10930
+ .ck.ck-editor__editable.ck-restricted-editing_mode_restricted .ck-widget__type-around {
10931
+ display: none;
10932
+ }
10933
+ .ck.ck-editor__editable.ck-restricted-editing_mode_restricted div.restricted-editing-exception .ck-widget__type-around {
10934
+ display: initial;
10935
+ }
10588
10936
 
10589
10937
  /*# sourceMappingURL=ckeditor5.css.map */
@@ -1 +1 @@
1
- var F=Object.defineProperty;var n=(i,c)=>F(i,"name",{value:c,configurable:!0});import{jsxs as r,jsx as e,Fragment as f}from"react/jsx-runtime";import{useState as D,useImperativeHandle as C,useCallback as p}from"react";import{FileIcon as x,DownloadIcon as I,UploadIcon as S}from"lucide-react";import{useDropzone as w}from"react-dropzone";import{cn as o}from"../lib/utils.js";import{Button as b}from"./button.js";function O({onChange:i,"aria-invalid":c,fileTypes:h,ref:v}){const[d,a]=D([]);C(v,()=>({focus:n(()=>{t?.current&&t.current.focus()},"focus")}));const g=p(l=>{a(l),i?.(l.length>0?l[0]:null)},[i]),y=n(()=>{t?.current&&t.current.focus()},"handleFileDialogCancel"),{getRootProps:N,getInputProps:z,acceptedFiles:u,open:j,rootRef:t}=w({maxFiles:1,noClick:!0,onDrop:g,onFileDialogCancel:y}),k=p(l=>{let s=0,m="ko";return s=l.size/1e3,s>1e3&&(s/=1e3,m="mo"),s.toFixed(2)+" "+m},[]);return r("div",{className:"flex space-x-2 items-center h-50",children:[r("div",{className:"flex-1 flex-col h-full shrink-0 bg-accent rounded-md flex items-center justify-center",children:[e("div",{className:o("bg-primary text-primary-foreground flex items-center justify-center rounded-full size-10 mb-4"),children:e(x,{className:"size-4"})}),e("div",{className:"mb-4 text-center",children:"Mon super fichier"}),e(b,{type:"button",color:"info",size:"icon",variant:"ghost",onClick:n(()=>{a([]),i?.(null),t?.current?.focus()},"onClick"),children:e(I,{})})]}),r("div",{...N(),className:o("bg-input border border-input-border flex flex-col h-50 flex-2 rounded-md px-3 py-1 text-base shadow-xs items-center justify-center md:text-sm outline-none","focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]","aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"),"aria-invalid":c,children:[d.length>0&&r(f,{children:[e("div",{className:o("bg-primary text-primary-foreground flex items-center justify-center rounded-full size-10 mb-4"),children:e(x,{className:"size-4"})}),r("div",{className:"mb-4 text-center",children:[u[0].name,e("br",{}),k(u[0])]}),e(b,{type:"button",color:"destructive",variant:"ghost",onClick:n(()=>{a([]),i?.(null),t?.current?.focus()},"onClick"),children:"Supprimer"})]}),d.length===0&&r(f,{children:[e("div",{className:o("bg-primary text-primary-foreground flex items-center justify-center rounded-full size-10 mb-4"),children:e(S,{className:"size-4"})}),r("div",{className:"mb-4",children:["Glisser-déposer ou"," ",e("span",{className:"font-bold underline cursor-pointer",onClick:j,children:"Choisir un fichier"})," ","à uploader"]}),r("div",{className:"text-center text-sm md:text-xs",children:["Formats acceptés : ",Object.keys(h).join(", "),e("br",{}),"Taille max : 5Mo"]})]}),e("input",{...z()})]})]})}n(O,"FileUploader");export{O as FileUploader};
1
+ var z=Object.defineProperty;var o=(i,l)=>z(i,"name",{value:l,configurable:!0});import{jsxs as r,jsx as e,Fragment as f}from"react/jsx-runtime";import{useState as j,useCallback as p,useImperativeHandle as k}from"react";import{FileIcon as F,UploadIcon as C}from"lucide-react";import{useDropzone as D}from"react-dropzone";import{cn as c}from"../lib/utils.js";import{Button as I}from"./button.js";function H({onChange:i,"aria-invalid":l,fileTypes:x,ref:b}){const[a,d]=j([]),v=p(n=>{d(n),i?.(n.length>0?n[0]:null)},[i]),{getRootProps:g,getInputProps:h,acceptedFiles:u,open:y,rootRef:t}=D({maxFiles:1,noClick:!0,onDrop:v,onFileDialogCancel:o(()=>{t?.current&&t.current.focus()},"onFileDialogCancel")});k(b,()=>({focus:o(()=>{t?.current&&t.current.focus()},"focus")}));const N=p(n=>{let s=0,m="ko";return s=n.size/1e3,s>1e3&&(s/=1e3,m="mo"),s.toFixed(2)+" "+m},[]);return r("div",{...g(),className:c("bg-input border border-input-border flex flex-col h-50 flex-2 rounded-md px-3 py-1 text-base shadow-xs items-center justify-center md:text-sm outline-none","focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]","aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"),"aria-invalid":l,children:[a.length>0&&r(f,{children:[e("div",{className:c("bg-primary text-primary-foreground flex items-center justify-center rounded-full size-10 mb-4"),children:e(F,{className:"size-4"})}),r("div",{className:"mb-4 text-center",children:[u[0].name,e("br",{}),N(u[0])]}),e(I,{type:"button",color:"destructive",variant:"ghost",onClick:o(()=>{d([]),i?.(null),t?.current?.focus()},"onClick"),children:"Supprimer"})]}),a.length===0&&r(f,{children:[e("div",{className:c("bg-primary text-primary-foreground flex items-center justify-center rounded-full size-10 mb-4"),children:e(C,{className:"size-4"})}),r("div",{className:"mb-4",children:["Glisser-déposer ou"," ",e("span",{className:"font-bold underline cursor-pointer",onClick:y,children:"Choisir un fichier"})," ","à uploader"]}),r("div",{className:"text-center text-sm md:text-xs",children:["Formats acceptés : ",Object.keys(x).join(", "),e("br",{}),"Taille max : 5Mo"]})]}),e("input",{...h()})]})}o(H,"FileUploader");export{H as FileUploader};
@@ -3,5 +3,5 @@ export declare function FormInput({ name, label, description, required, ...props
3
3
  name: string;
4
4
  label: string;
5
5
  description?: string;
6
- required: boolean;
6
+ required?: boolean;
7
7
  } & React.ComponentProps<typeof Input>): import("react/jsx-runtime").JSX.Element;
@@ -1,3 +1,17 @@
1
- declare const orderByText: (array: Array<object>, propName: keyof object, order?: "asc" | "desc") => object[];
2
- declare const orderBy: (array: Array<object>, propName: keyof object, order?: "asc" | "desc") => object[];
1
+ /**
2
+ * Sorts an array of objects by a string property (case-insensitive).
3
+ * @param array - The array to sort
4
+ * @param propName - The property name to sort by
5
+ * @param order - Sort order: "asc" or "desc"
6
+ * @returns The sorted array
7
+ */
8
+ declare const orderByText: <T extends Record<string, unknown>>(array: T[], propName: keyof T, order?: "asc" | "desc") => T[];
9
+ /**
10
+ * Sorts an array of objects by a property.
11
+ * @param array - The array to sort
12
+ * @param propName - The property name to sort by
13
+ * @param order - Sort order: "asc" or "desc"
14
+ * @returns The sorted array
15
+ */
16
+ declare const orderBy: <T extends Record<string, unknown>>(array: T[], propName: keyof T, order?: "asc" | "desc") => T[];
3
17
  export { orderByText, orderBy };
@@ -1 +1 @@
1
- var u=Object.defineProperty;var c=(r,t)=>u(r,"name",{value:t,configurable:!0});const f=c((r,t,s="asc")=>r.sort((e,n)=>e[t].toLowerCase()<n[t].toLowerCase()?s==="asc"?-1:1:e[t].toLowerCase()>n[t].toLowerCase()?s==="asc"?1:-1:0),"orderByText"),i=c((r,t,s="asc")=>r.sort((e,n)=>e[t]<n[t]?s==="asc"?-1:1:e[t]>n[t]?s==="asc"?1:-1:0),"orderBy");export{i as orderBy,f as orderByText};
1
+ var o=Object.defineProperty;var u=(r,t)=>o(r,"name",{value:t,configurable:!0});const f=u((r,t,e="asc")=>r.sort((a,c)=>{const n=String(a[t]??"").toLowerCase(),s=String(c[t]??"").toLowerCase();return n<s?e==="asc"?-1:1:n>s?e==="asc"?1:-1:0}),"orderByText"),l=u((r,t,e="asc")=>r.sort((a,c)=>{const n=a[t],s=c[t];return n<s?e==="asc"?-1:1:n>s?e==="asc"?1:-1:0}),"orderBy");export{l as orderBy,f as orderByText};
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "url": "https://github.com/F1na/fina-react-ds"
6
6
  },
7
7
  "private": false,
8
- "version": "1.0.49",
8
+ "version": "1.0.51",
9
9
  "type": "module",
10
10
  "files": [
11
11
  "dist"
@@ -46,11 +46,11 @@
46
46
  },
47
47
  "dependencies": {
48
48
  "@ckeditor/ckeditor5-react": "^11.0.0",
49
- "ckeditor5": "^47.1.0",
49
+ "ckeditor5": "^47.3.0",
50
50
  "class-variance-authority": "^0.7.1",
51
51
  "clsx": "^2.1.1",
52
52
  "date-fns": "^4.0.0",
53
- "lucide-react": "^0.546.0",
53
+ "lucide-react": "^0.561.0",
54
54
  "next-themes": "^0.4.6",
55
55
  "qs": "^6.14.0",
56
56
  "radix-ui": "^1.4.3",
@@ -60,33 +60,32 @@
60
60
  "react-select": "^5.10.2",
61
61
  "react-spinners": "^0.17.0",
62
62
  "sonner": "^2.0.7",
63
- "tailwind-merge": "^3.3.1",
63
+ "tailwind-merge": "^3.4.0",
64
64
  "tw-animate-css": "^1.4.0",
65
65
  "yup": "^1.7.1"
66
66
  },
67
67
  "devDependencies": {
68
68
  "@eslint/js": "^9.38.0",
69
- "@tailwindcss/cli": "^4.1.15",
70
- "@tailwindcss/vite": "^4.1.15",
71
- "@types/node": "^24.9.0",
69
+ "@tailwindcss/vite": "^4.1.18",
70
+ "@types/node": "^25.0.2",
72
71
  "@types/qs": "^6.14.0",
73
- "@types/react": "^19.2.2",
74
- "@types/react-dom": "^19.2.2",
75
- "vom": "^4.1.0",
72
+ "@types/react": "^19.2.7",
73
+ "@types/react-dom": "^19.2.3",
74
+ "@vitejs/plugin-react-swc": "^4.2.2",
76
75
  "eslint": "^9.38.0",
77
76
  "eslint-plugin-react-hooks": "^7.0.0",
78
77
  "eslint-plugin-react-refresh": "^0.4.24",
79
- "globals": "^16.4.0",
80
- "react": "^19.2.0",
81
- "react-dom": "^19.2.0",
82
- "react-hook-form": "^7.65.0",
78
+ "globals": "^16.5.0",
79
+ "react": "^19.2.3",
80
+ "react-dom": "^19.2.3",
81
+ "react-hook-form": "^7.68.0",
83
82
  "rimraf": "^6.0.1",
84
83
  "rollup": "^4.52.5",
85
- "tailwindcss": "^4.1.15",
84
+ "tailwindcss": "^4.1.18",
86
85
  "tsc-alias": "^1.8.16",
87
86
  "typescript": "~5.9.3",
88
87
  "typescript-eslint": "^8.46.2",
89
- "vite": "^7.1.11",
88
+ "vite": "^7.2.7",
90
89
  "vite-plugin-static-copy": "^3.1.4"
91
90
  },
92
91
  "peerDependencies": {
package/dist/index.d.ts DELETED
@@ -1,51 +0,0 @@
1
- export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, } from "./components/alert-dialog";
2
- export { Alert, AlertTitle, AlertDescription } from "./components/alert";
3
- export { Badge } from "./components/badge";
4
- export { Button, buttonVariants } from "./components/button";
5
- export { Avatar, AvatarImage, AvatarFallback } from "./components/avatar";
6
- export { Calendar } from "./components/calendar";
7
- export { Card, CardHeader, CardAction, CardTitle, CardDescription, CardContent, CardFooter, } from "./components/card";
8
- export { Checkbox } from "./components/checkbox";
9
- export { DatePicker } from "./components/date-picker";
10
- export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } from "./components/dialog";
11
- export { DataLoader } from "./components/data-loader";
12
- export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, } from "./components/dropdown-menu";
13
- export { FileUploader } from "./components/file-uploader";
14
- export { ImageUploader } from "./components/image-uploader";
15
- export { HoverCard, HoverCardTrigger, HoverCardContent, } from "./components/hover-card";
16
- export { Input } from "./components/input";
17
- export { Label } from "./components/label";
18
- export { ModeToggle } from "./components/mode-toggle";
19
- export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, } from "./components/pagination";
20
- export { PasswordRulesChecker } from "./components/password-rules-checker";
21
- export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, } from "./components/popover";
22
- export { Select } from "./components/select";
23
- export { Separator } from "./components/separator";
24
- export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetBody, SheetFooter, SheetTitle, SheetDescription, } from "./components/sheet";
25
- export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, } from "./components/sidebar";
26
- export { SimplePagination } from "./components/simple-pagination";
27
- export { SimpleTooltip } from "./components/simple-tooltip";
28
- export { Skeleton } from "./components/skeleton";
29
- export { Switch } from "./components/switch";
30
- export { Toaster } from "./components/sonner";
31
- export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, } from "./components/table";
32
- export { Tabs, TabsList, TabsTrigger, TabsContent } from "./components/tabs";
33
- export { Textarea } from "./components/textarea";
34
- export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, } from "./components/tooltip";
35
- export { FormDate } from "./components/form-date";
36
- export { FormColorPicker } from "./components/form-color-picker";
37
- export { FormFileUploader } from "./components/form-file-uploader";
38
- export { FormInput } from "./components/form-input";
39
- export { FormSelect } from "./components/form-select";
40
- export { FormSwitch } from "./components/form-switch";
41
- export { FormTextarea } from "./components/form-textarea";
42
- export { FormImageUploader } from "./components/form-image-uploader";
43
- export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, } from "./components/form";
44
- export { ThemeProvider, useTheme } from "./providers/theme-provider";
45
- export { LoaderProvider, useLoader } from "./providers/loader-provider";
46
- export { formatDate } from "./lib/dates";
47
- export { requestApi } from "./lib/http";
48
- export { isNullOrEmptyString } from "./lib/strings";
49
- export { orderByText, orderBy } from "./lib/arrays";
50
- export { cn, apiErrorDescription, manageApiFormErrors } from "./lib/utils";
51
- export { string, number, boolean, date, array, object, mixed, ref, lazy, reach, addMethod, } from "./lib/yup";