@apliteni/apliteni-ui 0.57.0 → 0.58.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/react/dist/index.css +57 -54
- package/react/dist/index.d.ts +6 -2
- package/react/dist/index.js +530 -494
- package/src/components/table-values.js +1 -1
- package/src/styles/drawer.css +2 -1
- package/src/styles/segmented.css +19 -7
- package/src/styles/table.css +11 -0
package/package.json
CHANGED
package/react/dist/index.css
CHANGED
|
@@ -26,6 +26,57 @@
|
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
+
/* ../src/styles/tooltip.css */
|
|
30
|
+
.ui-tip-host {
|
|
31
|
+
position: relative;
|
|
32
|
+
}
|
|
33
|
+
.ui-tip {
|
|
34
|
+
--ui-tip-gap: 8px;
|
|
35
|
+
--ui-tip-bg: var(--bg-elevated);
|
|
36
|
+
position: absolute;
|
|
37
|
+
top: var(--ui-tip-y, 0px);
|
|
38
|
+
left: var(--ui-tip-x, 50%);
|
|
39
|
+
z-index: var(--z-dropdown);
|
|
40
|
+
translate: calc(-50% + var(--ui-tip-shift, 0px)) calc(-100% - var(--ui-tip-gap));
|
|
41
|
+
display: flex;
|
|
42
|
+
flex-direction: column;
|
|
43
|
+
width: max-content;
|
|
44
|
+
max-width: var(--prose-caption);
|
|
45
|
+
padding: var(--space-2) var(--space-3);
|
|
46
|
+
background: var(--ui-tip-bg);
|
|
47
|
+
border: 1px solid var(--border-strong);
|
|
48
|
+
box-shadow: inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop);
|
|
49
|
+
border-radius: var(--radius-sm);
|
|
50
|
+
font-family: var(--font-sans);
|
|
51
|
+
font-size: var(--text-xs);
|
|
52
|
+
line-height: 1.45;
|
|
53
|
+
color: var(--text);
|
|
54
|
+
pointer-events: none;
|
|
55
|
+
opacity: 0;
|
|
56
|
+
visibility: hidden;
|
|
57
|
+
transition: opacity var(--dur-fast) var(--ease), visibility var(--dur-fast) linear;
|
|
58
|
+
}
|
|
59
|
+
.ui-tip.is-below {
|
|
60
|
+
translate: calc(-50% + var(--ui-tip-shift, 0px)) var(--ui-tip-gap);
|
|
61
|
+
}
|
|
62
|
+
.ui-tip.is-open {
|
|
63
|
+
opacity: 1;
|
|
64
|
+
visibility: visible;
|
|
65
|
+
}
|
|
66
|
+
.ui-tip__label {
|
|
67
|
+
color: var(--text);
|
|
68
|
+
}
|
|
69
|
+
.ui-tip__value {
|
|
70
|
+
font-size: var(--text-sm);
|
|
71
|
+
font-weight: var(--weight-semibold);
|
|
72
|
+
color: var(--strong);
|
|
73
|
+
font-variant-numeric: tabular-nums;
|
|
74
|
+
}
|
|
75
|
+
.ui-tip__detail {
|
|
76
|
+
color: var(--text);
|
|
77
|
+
font-variant-numeric: tabular-nums;
|
|
78
|
+
}
|
|
79
|
+
|
|
29
80
|
/* src/Modal.css */
|
|
30
81
|
.rx-scrim {
|
|
31
82
|
position: fixed;
|
|
@@ -134,10 +185,13 @@
|
|
|
134
185
|
}
|
|
135
186
|
|
|
136
187
|
/* src/KeyValueList.css */
|
|
137
|
-
.ui-
|
|
188
|
+
.ui-kv {
|
|
189
|
+
display: grid;
|
|
190
|
+
column-gap: var(--space-4);
|
|
191
|
+
margin: 0;
|
|
138
192
|
grid-template-columns: calc(var(--space-6) * 5) minmax(0, 1fr);
|
|
139
193
|
}
|
|
140
|
-
.ui-
|
|
194
|
+
.ui-kv--two-columns {
|
|
141
195
|
grid-template-columns: repeat(2, calc(var(--space-6) * 5) minmax(0, 1fr));
|
|
142
196
|
}
|
|
143
197
|
.ui-kv__hidden {
|
|
@@ -152,7 +206,7 @@
|
|
|
152
206
|
stroke-width: 2.25;
|
|
153
207
|
}
|
|
154
208
|
@media (max-width: 560px) {
|
|
155
|
-
.ui-
|
|
209
|
+
.ui-kv {
|
|
156
210
|
grid-template-columns: minmax(0, 1fr);
|
|
157
211
|
row-gap: var(--space-3);
|
|
158
212
|
}
|
|
@@ -670,54 +724,3 @@
|
|
|
670
724
|
align-items: center;
|
|
671
725
|
gap: var(--space-3);
|
|
672
726
|
}
|
|
673
|
-
|
|
674
|
-
/* ../src/styles/tooltip.css */
|
|
675
|
-
.ui-tip-host {
|
|
676
|
-
position: relative;
|
|
677
|
-
}
|
|
678
|
-
.ui-tip {
|
|
679
|
-
--ui-tip-gap: 8px;
|
|
680
|
-
--ui-tip-bg: var(--bg-elevated);
|
|
681
|
-
position: absolute;
|
|
682
|
-
top: var(--ui-tip-y, 0px);
|
|
683
|
-
left: var(--ui-tip-x, 50%);
|
|
684
|
-
z-index: var(--z-dropdown);
|
|
685
|
-
translate: calc(-50% + var(--ui-tip-shift, 0px)) calc(-100% - var(--ui-tip-gap));
|
|
686
|
-
display: flex;
|
|
687
|
-
flex-direction: column;
|
|
688
|
-
width: max-content;
|
|
689
|
-
max-width: var(--prose-caption);
|
|
690
|
-
padding: var(--space-2) var(--space-3);
|
|
691
|
-
background: var(--ui-tip-bg);
|
|
692
|
-
border: 1px solid var(--border-strong);
|
|
693
|
-
box-shadow: inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop);
|
|
694
|
-
border-radius: var(--radius-sm);
|
|
695
|
-
font-family: var(--font-sans);
|
|
696
|
-
font-size: var(--text-xs);
|
|
697
|
-
line-height: 1.45;
|
|
698
|
-
color: var(--text);
|
|
699
|
-
pointer-events: none;
|
|
700
|
-
opacity: 0;
|
|
701
|
-
visibility: hidden;
|
|
702
|
-
transition: opacity var(--dur-fast) var(--ease), visibility var(--dur-fast) linear;
|
|
703
|
-
}
|
|
704
|
-
.ui-tip.is-below {
|
|
705
|
-
translate: calc(-50% + var(--ui-tip-shift, 0px)) var(--ui-tip-gap);
|
|
706
|
-
}
|
|
707
|
-
.ui-tip.is-open {
|
|
708
|
-
opacity: 1;
|
|
709
|
-
visibility: visible;
|
|
710
|
-
}
|
|
711
|
-
.ui-tip__label {
|
|
712
|
-
color: var(--text);
|
|
713
|
-
}
|
|
714
|
-
.ui-tip__value {
|
|
715
|
-
font-size: var(--text-sm);
|
|
716
|
-
font-weight: var(--weight-semibold);
|
|
717
|
-
color: var(--strong);
|
|
718
|
-
font-variant-numeric: tabular-nums;
|
|
719
|
-
}
|
|
720
|
-
.ui-tip__detail {
|
|
721
|
-
color: var(--text);
|
|
722
|
-
font-variant-numeric: tabular-nums;
|
|
723
|
-
}
|
package/react/dist/index.d.ts
CHANGED
|
@@ -60,6 +60,7 @@ interface StatDelta {
|
|
|
60
60
|
value: string | null;
|
|
61
61
|
tone?: StatTone;
|
|
62
62
|
basis?: string;
|
|
63
|
+
tooltip?: string;
|
|
63
64
|
direction?: 'up' | 'down' | 'flat';
|
|
64
65
|
none?: string;
|
|
65
66
|
}
|
|
@@ -73,10 +74,12 @@ interface StatBandProps {
|
|
|
73
74
|
stats: StatFigure[];
|
|
74
75
|
variant?: StatVariant;
|
|
75
76
|
basis?: string;
|
|
77
|
+
/** Existing caption before the figures; used when basis is omitted. */
|
|
78
|
+
basisId?: string;
|
|
76
79
|
label?: string;
|
|
77
80
|
id?: string;
|
|
78
81
|
}
|
|
79
|
-
declare function StatBand({ stats, variant, basis, label, id }: StatBandProps): react.JSX.Element;
|
|
82
|
+
declare function StatBand({ stats, variant, basis, basisId: sharedBasisId, label, id }: StatBandProps): react.JSX.Element;
|
|
80
83
|
|
|
81
84
|
type ConfirmProps = {
|
|
82
85
|
open: boolean;
|
|
@@ -161,7 +164,7 @@ declare function CommandPalette({ open, onClose, groups, onSelect, label, placeh
|
|
|
161
164
|
|
|
162
165
|
type Column<T> = {
|
|
163
166
|
key: keyof T & string;
|
|
164
|
-
label:
|
|
167
|
+
label: ReactNode;
|
|
165
168
|
num?: boolean;
|
|
166
169
|
sortable?: boolean;
|
|
167
170
|
render?: (row: T) => ReactNode;
|
|
@@ -431,6 +434,7 @@ declare function RowIdentity({ symbol, name, logo, href }: RowIdentityProps): re
|
|
|
431
434
|
type SegmentOption = {
|
|
432
435
|
label: string;
|
|
433
436
|
value: string;
|
|
437
|
+
ariaLabel?: string;
|
|
434
438
|
disabled?: boolean;
|
|
435
439
|
};
|
|
436
440
|
type SegmentedProps = {
|