arxatec-ui 0.1.21 → 0.1.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/styles.css CHANGED
@@ -1,5 +1,6 @@
1
1
  @import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap");
2
2
  @import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap");
3
+ @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap");
3
4
  @import "tailwindcss";
4
5
  @source ".";
5
6
  @import "tw-animate-css";
@@ -10,6 +11,7 @@
10
11
  @theme inline {
11
12
  --font-serif: "Cormorant Garamond", serif;
12
13
  --font-sans: "Source Sans 3", sans-serif;
14
+ --font-mono: "JetBrains Mono", monospace;
13
15
  --radius-sm: calc(var(--radius) - 4px);
14
16
  --radius-md: calc(var(--radius) - 2px);
15
17
  --radius-lg: var(--radius);
@@ -61,10 +63,14 @@
61
63
  /* Status colors card */
62
64
  --color-status-card-background-error: var(--status-card-background-error);
63
65
  --color-status-card-foreground-error: var(--status-card-foreground-error);
64
- --color-status-card-background-icon-error: var(--status-card-background-icon-error);
66
+ --color-status-card-background-icon-error: var(
67
+ --status-card-background-icon-error
68
+ );
65
69
  --color-status-card-background-empty: var(--status-card-background-empty);
66
70
  --color-status-card-foreground-empty: var(--status-card-foreground-empty);
67
- --color-status-card-background-icon-empty: var(--status-card-background-icon-empty);
71
+ --color-status-card-background-icon-empty: var(
72
+ --status-card-background-icon-empty
73
+ );
68
74
 
69
75
  /* Calendar colors */
70
76
  --color-calendar-color-gray: var(--calendar-color-gray);
@@ -78,7 +84,6 @@
78
84
  --color-calendar-color-green: var(--calendar-color-green);
79
85
  --color-calendar-color-lime: var(--calendar-color-lime);
80
86
 
81
-
82
87
  /* Case urgency colors*/
83
88
  --color-case-urgency-high-background: var(--case-urgency-high-background);
84
89
  --color-case-urgency-high-foreground: var(--case-urgency-high-foreground);
@@ -86,24 +91,48 @@
86
91
  --color-case-urgency-medium-foreground: var(--case-urgency-medium-foreground);
87
92
  --color-case-urgency-low-background: var(--case-urgency-low-background);
88
93
  --color-case-urgency-low-foreground: var(--case-urgency-low-foreground);
89
- --color-case-urgency-critical-background: var(--case-urgency-critical-background);
90
- --color-case-urgency-critical-foreground: var(--case-urgency-critical-foreground);
94
+ --color-case-urgency-critical-background: var(
95
+ --case-urgency-critical-background
96
+ );
97
+ --color-case-urgency-critical-foreground: var(
98
+ --case-urgency-critical-foreground
99
+ );
91
100
 
92
101
  /* Case status colors */
93
102
  --color-case-status-open-background: var(--case-status-open-background);
94
103
  --color-case-status-open-foreground: var(--case-status-open-foreground);
95
- --color-case-status-in-progress-background: var(--case-status-in-progress-background);
96
- --color-case-status-in-progress-foreground: var(--case-status-in-progress-foreground);
104
+ --color-case-status-in-progress-background: var(
105
+ --case-status-in-progress-background
106
+ );
107
+ --color-case-status-in-progress-foreground: var(
108
+ --case-status-in-progress-foreground
109
+ );
97
110
  --color-case-status-closed-background: var(--case-status-closed-background);
98
111
  --color-case-status-closed-foreground: var(--case-status-closed-foreground);
99
- --color-case-status-archived-background: var(--case-status-archived-background);
100
- --color-case-status-archived-foreground: var(--case-status-archived-foreground);
101
- --color-case-status-under-negotiation-background: var(--case-status-under-negotiation-background);
102
- --color-case-status-under-negotiation-foreground: var(--case-status-under-negotiation-foreground);
103
- --color-case-status-waiting-for-customer-background: var(--case-status-waiting-for-customer-background);
104
- --color-case-status-waiting-for-customer-foreground: var(--case-status-waiting-for-customer-foreground);
105
- --color-case-status-awaiting-trial-background: var(--case-status-awaiting-trial-background);
106
- --color-case-status-awaiting-trial-foreground: var(--case-status-awaiting-trial-foreground);
112
+ --color-case-status-archived-background: var(
113
+ --case-status-archived-background
114
+ );
115
+ --color-case-status-archived-foreground: var(
116
+ --case-status-archived-foreground
117
+ );
118
+ --color-case-status-under-negotiation-background: var(
119
+ --case-status-under-negotiation-background
120
+ );
121
+ --color-case-status-under-negotiation-foreground: var(
122
+ --case-status-under-negotiation-foreground
123
+ );
124
+ --color-case-status-waiting-for-customer-background: var(
125
+ --case-status-waiting-for-customer-background
126
+ );
127
+ --color-case-status-waiting-for-customer-foreground: var(
128
+ --case-status-waiting-for-customer-foreground
129
+ );
130
+ --color-case-status-awaiting-trial-background: var(
131
+ --case-status-awaiting-trial-background
132
+ );
133
+ --color-case-status-awaiting-trial-foreground: var(
134
+ --case-status-awaiting-trial-foreground
135
+ );
107
136
  --color-case-status-waiting-background: var(--case-status-waiting-background);
108
137
  --color-case-status-waiting-foreground: var(--case-status-waiting-foreground);
109
138
 
@@ -123,8 +152,12 @@
123
152
  /* Finances type colors */
124
153
  --color-finance-type-income-background: var(--finance-type-income-background);
125
154
  --color-finance-type-income-foreground: var(--finance-type-income-foreground);
126
- --color-finance-type-expense-background: var(--finance-type-expense-background);
127
- --color-finance-type-expense-foreground: var(--finance-type-expense-foreground);
155
+ --color-finance-type-expense-background: var(
156
+ --finance-type-expense-background
157
+ );
158
+ --color-finance-type-expense-foreground: var(
159
+ --finance-type-expense-foreground
160
+ );
128
161
 
129
162
  /* Task tag colors */
130
163
 
@@ -161,14 +194,22 @@
161
194
  --color-task-priority-foreground-low: var(--task-priority-foreground-low);
162
195
  --color-task-priority-background-low: var(--task-priority-background-low);
163
196
 
164
- --color-task-priority-foreground-medium: var(--task-priority-foreground-medium);
165
- --color-task-priority-background-medium: var(--task-priority-background-medium);
197
+ --color-task-priority-foreground-medium: var(
198
+ --task-priority-foreground-medium
199
+ );
200
+ --color-task-priority-background-medium: var(
201
+ --task-priority-background-medium
202
+ );
166
203
 
167
204
  --color-task-priority-foreground-high: var(--task-priority-foreground-high);
168
205
  --color-task-priority-background-high: var(--task-priority-background-high);
169
206
 
170
- --color-task-priority-foreground-critical: var(--task-priority-foreground-critical);
171
- --color-task-priority-background-critical: var(--task-priority-background-critical);
207
+ --color-task-priority-foreground-critical: var(
208
+ --task-priority-foreground-critical
209
+ );
210
+ --color-task-priority-background-critical: var(
211
+ --task-priority-background-critical
212
+ );
172
213
  }
173
214
 
174
215
  :root {
@@ -228,7 +269,7 @@
228
269
  /* Calendar colors */
229
270
  --calendar-color-gray: oklch(55.6% 0 0);
230
271
  --calendar-color-red: oklch(57.7% 0.245 27.325);
231
- --calendar-color-yellow: oklch(76.9% 0.188 70.08) ;
272
+ --calendar-color-yellow: oklch(76.9% 0.188 70.08);
232
273
  --calendar-color-orange: oklch(70.5% 0.213 47.604);
233
274
  --calendar-color-purple: oklch(55.8% 0.288 302.321);
234
275
  --calendar-color-blue: oklch(62.3% 0.214 259.815);
@@ -263,7 +304,7 @@
263
304
  --case-status-awaiting-trial-background: oklch(91% 0.01 260);
264
305
  --case-status-awaiting-trial-foreground: oklch(29% 0.01 260);
265
306
  --case-status-waiting-background: oklch(86% 0.01 260);
266
- --case-status-waiting-foreground: oklch(33% 0.01 260);
307
+ --case-status-waiting-foreground: oklch(33% 0.01 260);
267
308
 
268
309
  /* Documents selector colors */
269
310
  --selector-rectangle: oklch(90.1% 0.058 230.902);
@@ -272,11 +313,11 @@
272
313
 
273
314
  /* License status colors */
274
315
  --license-valid-foreground: oklch(0.205 0 0);
275
- --license-valid-background:oklch(0.97 0 0);
316
+ --license-valid-background: oklch(0.97 0 0);
276
317
  --license-invalid-foreground: oklch(64.5% 0.246 16.439);
277
318
  --license-invalid-background: oklch(94.1% 0.03 12.58);
278
319
  --license-no-config-foreground: oklch(68.5% 0.169 237.323);
279
- --license-no-config-background:oklch(95.1% 0.026 236.824);
320
+ --license-no-config-background: oklch(95.1% 0.026 236.824);
280
321
 
281
322
  /* Finances type colors */
282
323
  --finance-type-income-background: oklch(96.2% 0.044 156.743);
@@ -318,15 +359,19 @@
318
359
  --editor-spacing-8: 2rem;
319
360
  --editor-spacing-12: 3rem;
320
361
  --editor-spacing-16: 4rem;
321
- --editor-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
322
- --editor-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
362
+ --editor-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
363
+ Roboto, "Helvetica Neue", Arial, sans-serif;
364
+ --editor-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
365
+ monospace;
323
366
  --editor-font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
324
367
  --editor-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
325
368
  --editor-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
326
369
  --editor-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
327
370
  --editor-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
328
- --editor-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
329
- --editor-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
371
+ --editor-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1),
372
+ 0 2px 4px -2px rgb(0 0 0 / 0.1);
373
+ --editor-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
374
+ 0 4px 6px -4px rgb(0 0 0 / 0.1);
330
375
 
331
376
  /* Task tag colors */
332
377
  --task-tag-foreground-gray: oklch(32% 0.018 260);
@@ -414,21 +459,21 @@
414
459
  --status-foreground-warning: oklch(79.5% 0.184 86.047);
415
460
  --status-background-info: oklch(29.3% 0.066 243.157);
416
461
  --status-foreground-info: oklch(68.5% 0.169 237.323);
417
- --status-background-loading: oklch(0.269 0 0);
462
+ --status-background-loading: oklch(0.269 0 0);
418
463
  --status-foreground-loading: oklch(0.985 0 0);
419
464
 
420
465
  /* Status colors for card */
421
- --status-card-background-error: oklch(27.1% 0.105 12.094);
466
+ --status-card-background-error: oklch(27.1% 0.105 12.094);
422
467
  --status-card-foreground-error: oklch(64.5% 0.246 16.439);
423
- --status-card-background-icon-error:oklch(33.1% 0.105 12.094);
468
+ --status-card-background-icon-error: oklch(33.1% 0.105 12.094);
424
469
  --status-card-background-empty: oklch(0.269 0 0);
425
470
  --status-card-foreground-empty: oklch(0.985 0 0);
426
- --status-card-background-icon-empty: oklch(0.320 0 0);;
471
+ --status-card-background-icon-empty: oklch(0.32 0 0);
427
472
 
428
473
  /* Calendar colors */
429
474
  --calendar-color-gray: oklch(55.6% 0 0);
430
475
  --calendar-color-red: oklch(25.8% 0.092 26.042);
431
- --calendar-color-yellow: oklch(42.1% 0.095 57.708) ;
476
+ --calendar-color-yellow: oklch(42.1% 0.095 57.708);
432
477
  --calendar-color-orange: oklch(47% 0.157 37.304);
433
478
  --calendar-color-purple: oklch(38.1% 0.176 304.987);
434
479
  --calendar-color-blue: oklch(37.9% 0.146 265.522);
@@ -600,20 +645,21 @@
600
645
  text-decoration: underline;
601
646
  }
602
647
 
603
- .prose [style*="text-align: center"],
648
+ .prose [style*="text-align: center"],
604
649
  .prose .text-center {
605
650
  text-align: center !important;
606
651
  }
607
- .prose [style*="text-align: right"],
652
+ .prose [style*="text-align: right"],
608
653
  .prose .text-right {
609
654
  text-align: right !important;
610
655
  }
611
- .prose [style*="text-align: justify"],
656
+ .prose [style*="text-align: justify"],
612
657
  .prose .text-justify {
613
658
  text-align: justify !important;
614
659
  }
615
660
 
616
- .prose ul, .prose ol {
661
+ .prose ul,
662
+ .prose ol {
617
663
  padding-left: 1.5rem !important;
618
664
  margin-top: 1rem !important;
619
665
  margin-bottom: 1rem !important;
@@ -681,6 +727,8 @@
681
727
  .prose .tableWrapper {
682
728
  margin: 1.5rem 0;
683
729
  overflow-x: auto;
730
+ border: 1px solid color-mix(in srgb, var(--color-border), transparent 55%);
731
+ border-radius: 8px;
684
732
  }
685
733
 
686
734
  .prose.resize-cursor {
@@ -712,6 +760,23 @@
712
760
  box-shadow: none;
713
761
  }
714
762
 
763
+ /* Resaltado al arrastrar / seleccionar nodo de bloque (drag handle) */
764
+ .ProseMirror-selectednode,
765
+ .ProseMirror-selectednoderange {
766
+ position: relative;
767
+ }
768
+
769
+ .ProseMirror-selectednode::before,
770
+ .ProseMirror-selectednoderange::before {
771
+ content: "";
772
+ position: absolute;
773
+ inset: -2px -4px;
774
+ border-radius: 6px;
775
+ background-color: color-mix(in srgb, var(--editor-highlight-blue), transparent 60%);
776
+ pointer-events: none;
777
+ z-index: 0;
778
+ }
779
+
715
780
  .ProseMirror .selection,
716
781
  .ProseMirror *::selection {
717
782
  background-color: var(--editor-highlight-blue);
@@ -860,6 +925,20 @@
860
925
  list-style-type: lower-roman;
861
926
  }
862
927
 
928
+ .ProseMirror .tableWrapper {
929
+ margin: var(--editor-spacing-6) 0;
930
+ max-width: 100%;
931
+ overflow-x: auto;
932
+ border: 1px solid color-mix(in srgb, var(--editor-border-default), transparent 50%);
933
+ border-radius: 8px;
934
+ }
935
+
936
+ .ProseMirror .tableWrapper > table {
937
+ margin: 0;
938
+ border: none;
939
+ border-radius: 0;
940
+ }
941
+
863
942
  .ProseMirror table {
864
943
  width: 100%;
865
944
  border-collapse: separate;
@@ -1036,5 +1115,6 @@
1036
1115
  height: 0;
1037
1116
  pointer-events: none;
1038
1117
  }
1118
+
1039
1119
  ._wrapper_ctoxj_2 .ProseMirror{max-width:none;min-height:0;font-size:.875rem;line-height:1rem;font-family:var(--font-sans);background:0 0;outline:none;margin:0;padding:.375rem .75rem}._wrapper_ctoxj_2{min-height:2.5rem}._wrapper_ctoxj_2 .ProseMirror p,._wrapper_ctoxj_2 .ProseMirror li,._wrapper_ctoxj_2 .ProseMirror blockquote,._wrapper_ctoxj_2 .ProseMirror code,._wrapper_ctoxj_2 .ProseMirror strong,._wrapper_ctoxj_2 .ProseMirror em,._wrapper_ctoxj_2 .ProseMirror u{margin:.5rem 0;font-size:.9rem;line-height:1rem}._wrapper_ctoxj_2 .ProseMirror h1{margin:.375rem 0 .25rem;font-size:1.125rem;font-weight:600;line-height:1.35}._wrapper_ctoxj_2 .ProseMirror h2{margin:.375rem 0 .25rem;font-size:1.05rem;font-weight:600;line-height:1.35}._wrapper_ctoxj_2 .ProseMirror h3{margin:.35rem 0 .2rem;font-size:.95rem;font-weight:600;line-height:1.3}._wrapper_ctoxj_2 .ProseMirror h4{margin:.3rem 0 .15rem;font-size:.875rem;font-weight:600;line-height:1.3}._wrapper_ctoxj_2 .ProseMirror h5,._wrapper_ctoxj_2 .ProseMirror h6{margin:.25rem 0;font-size:.875rem;font-weight:600;line-height:1.25}._wrapper_ctoxj_2 .ProseMirror p{margin:.125rem 0}._wrapper_ctoxj_2 .ProseMirror ul,._wrapper_ctoxj_2 .ProseMirror ol{margin:.25rem 0;padding-left:1.25rem}._wrapper_ctoxj_2 .ProseMirror li{margin:0}._wrapper_ctoxj_2 .ProseMirror blockquote{border-left-width:2px;margin:.25rem 0;padding-left:.75rem}._wrapper_ctoxj_2 .ProseMirror code{font-size:.8125rem}._wrapper_ctoxj_2 .ProseMirror .is-description-editor-empty:before{content:attr(data-placeholder);float:left;pointer-events:none;height:0;color:var(--color-muted-foreground);font-size:.9rem}
1040
1120
  /*$vite$:1*/
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "arxatec-ui",
3
- "version": "0.1.21",
3
+ "version": "0.1.22",
4
4
  "description": "React component library for building Arxatec product UIs—built on established ecosystem libraries for a consistent, efficient workflow. More at https://arxatec.net.",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -98,12 +98,16 @@
98
98
  "@tailwindcss/vite": "^4.1.13",
99
99
  "@tanstack/react-virtual": "^3.13.18",
100
100
  "@tiptap/core": "^3.14.0",
101
+ "@tiptap/extension-collaboration": "^3.22.4",
101
102
  "@tiptap/extension-color": "^3.14.0",
103
+ "@tiptap/extension-drag-handle": "^3.22.4",
104
+ "@tiptap/extension-drag-handle-react": "^3.22.4",
102
105
  "@tiptap/extension-heading": "^3.14.0",
103
106
  "@tiptap/extension-highlight": "^3.14.0",
104
107
  "@tiptap/extension-image": "^3.14.0",
105
108
  "@tiptap/extension-link": "^3.14.0",
106
109
  "@tiptap/extension-mention": "^3.22.4",
110
+ "@tiptap/extension-node-range": "^3.22.4",
107
111
  "@tiptap/extension-placeholder": "^3.14.0",
108
112
  "@tiptap/extension-subscript": "^3.14.0",
109
113
  "@tiptap/extension-superscript": "^3.14.0",
@@ -120,6 +124,7 @@
120
124
  "@tiptap/react": "^3.14.0",
121
125
  "@tiptap/starter-kit": "^3.14.0",
122
126
  "@tiptap/suggestion": "^3.22.4",
127
+ "@tiptap/y-tiptap": "^3.0.3",
123
128
  "@types/turndown": "^5.0.6",
124
129
  "class-variance-authority": "^0.7.1",
125
130
  "clsx": "^2.1.1",
@@ -145,7 +150,9 @@
145
150
  "turndown": "^7.2.2",
146
151
  "tw-animate-css": "^1.3.8",
147
152
  "usehooks-ts": "^3.1.1",
148
- "vaul": "^1.1.2"
153
+ "vaul": "^1.1.2",
154
+ "y-protocols": "^1.0.7",
155
+ "yjs": "^13.6.30"
149
156
  },
150
157
  "devDependencies": {
151
158
  "@chromatic-com/storybook": "^5.1.1",