panelui-native 0.101.0 → 0.102.0
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/lib/module/components/card/index.js +1 -1
- package/lib/module/components/card/index.js.map +1 -1
- package/lib/module/components/planner/index.js +8 -1
- package/lib/module/components/planner/index.js.map +1 -1
- package/lib/module/components/sankey-chart/index.js +801 -165
- package/lib/module/components/sankey-chart/index.js.map +1 -1
- package/lib/module/components/sankey-chart/sankey-layout.js +226 -0
- package/lib/module/components/sankey-chart/sankey-layout.js.map +1 -1
- package/lib/module/components/spinner/index.js +13 -3
- package/lib/module/components/spinner/index.js.map +1 -1
- package/lib/module/components/support/index.js +842 -0
- package/lib/module/components/support/index.js.map +1 -0
- package/lib/module/components/typography/index.js +10 -2
- package/lib/module/components/typography/index.js.map +1 -1
- package/lib/module/icons/index.js +40 -0
- package/lib/module/icons/index.js.map +1 -1
- package/lib/module/index.js +2 -1
- package/lib/module/index.js.map +1 -1
- package/lib/module/utils/chart.js +24 -0
- package/lib/module/utils/chart.js.map +1 -1
- package/lib/typescript/src/components/planner/index.d.ts.map +1 -1
- package/lib/typescript/src/components/sankey-chart/index.d.ts +131 -5
- package/lib/typescript/src/components/sankey-chart/index.d.ts.map +1 -1
- package/lib/typescript/src/components/sankey-chart/sankey-layout.d.ts +49 -6
- package/lib/typescript/src/components/sankey-chart/sankey-layout.d.ts.map +1 -1
- package/lib/typescript/src/components/spinner/index.d.ts +18 -1
- package/lib/typescript/src/components/spinner/index.d.ts.map +1 -1
- package/lib/typescript/src/components/support/index.d.ts +376 -0
- package/lib/typescript/src/components/support/index.d.ts.map +1 -0
- package/lib/typescript/src/components/typography/index.d.ts +0 -3
- package/lib/typescript/src/components/typography/index.d.ts.map +1 -1
- package/lib/typescript/src/icons/index.d.ts +8 -0
- package/lib/typescript/src/icons/index.d.ts.map +1 -1
- package/lib/typescript/src/index.d.ts +3 -2
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/utils/chart.d.ts +11 -0
- package/lib/typescript/src/utils/chart.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/card/index.tsx +1 -1
- package/src/components/planner/index.tsx +8 -1
- package/src/components/sankey-chart/index.tsx +935 -172
- package/src/components/sankey-chart/sankey-layout.ts +276 -2
- package/src/components/spinner/index.tsx +27 -1
- package/src/components/support/index.tsx +877 -0
- package/src/components/typography/index.tsx +10 -2
- package/src/icons/index.tsx +16 -0
- package/src/index.ts +35 -0
- package/src/utils/chart.ts +40 -0
|
@@ -61,8 +61,10 @@
|
|
|
61
61
|
import { type ReactNode } from 'react';
|
|
62
62
|
import { type ViewProps } from 'react-native';
|
|
63
63
|
import { type ChartAccessibilityProps } from '../../primitives/chart-accessibility.js';
|
|
64
|
-
import { type SankeyAlign } from './sankey-layout.js';
|
|
65
|
-
export type { SankeyAlign } from './sankey-layout.js';
|
|
64
|
+
import { type SankeyAlign, type SankeyCollapse } from './sankey-layout.js';
|
|
65
|
+
export type { SankeyAlign, SankeyCollapse } from './sankey-layout.js';
|
|
66
|
+
/** Which way the flow runs. */
|
|
67
|
+
export type SankeyOrientation = 'horizontal' | 'vertical';
|
|
66
68
|
export type SankeyChartStatus = 'loading' | 'ready';
|
|
67
69
|
export interface SankeyNode {
|
|
68
70
|
/** Stable key the links name. Must be unique; a repeat is ignored. */
|
|
@@ -88,16 +90,44 @@ export interface SankeyLink {
|
|
|
88
90
|
/** Explicit colour, instead of taking the source node's. */
|
|
89
91
|
color?: string;
|
|
90
92
|
}
|
|
93
|
+
/** One end of a stream meeting the selected node. */
|
|
94
|
+
export interface SankeyChartFlow {
|
|
95
|
+
/** The node at the other end. */
|
|
96
|
+
id: string;
|
|
97
|
+
/** Its name, already resolved. */
|
|
98
|
+
label: string;
|
|
99
|
+
/** What travels between the two. */
|
|
100
|
+
value: number;
|
|
101
|
+
/** That value as a fraction of the selected node's total, `0` to `1`. */
|
|
102
|
+
share: number;
|
|
103
|
+
/** The other node's colour, for a swatch beside its name. */
|
|
104
|
+
color: string;
|
|
105
|
+
}
|
|
91
106
|
/** The selected node and what runs through it, for something drawn inside the chart. */
|
|
92
107
|
export declare function useSankeyChart(): {
|
|
108
|
+
activeId: null;
|
|
109
|
+
activeNode: null;
|
|
110
|
+
activeValue: number;
|
|
111
|
+
incoming: number;
|
|
112
|
+
outgoing: number;
|
|
113
|
+
sources: SankeyChartFlow[];
|
|
114
|
+
targets: SankeyChartFlow[];
|
|
115
|
+
collapsed: string[] | null;
|
|
116
|
+
} | {
|
|
93
117
|
activeId: string | null;
|
|
94
|
-
activeNode: SankeyNode
|
|
118
|
+
activeNode: SankeyNode;
|
|
95
119
|
/** What passes through it — what the bar's height is drawn from. */
|
|
96
120
|
activeValue: number;
|
|
97
121
|
/** What arrives. Zero at a node the flow starts from. */
|
|
98
122
|
incoming: number;
|
|
99
123
|
/** What leaves. Zero at a node the flow ends at. */
|
|
100
124
|
outgoing: number;
|
|
125
|
+
/** Where it came from, largest first. */
|
|
126
|
+
sources: SankeyChartFlow[];
|
|
127
|
+
/** Where it went, largest first. */
|
|
128
|
+
targets: SankeyChartFlow[];
|
|
129
|
+
/** The ids `collapse` folded in, on a bucket. `null` on every other node. */
|
|
130
|
+
collapsed: string[] | null;
|
|
101
131
|
};
|
|
102
132
|
export interface SankeyChartProps extends ViewProps, ChartAccessibilityProps<SankeyNode> {
|
|
103
133
|
className?: string;
|
|
@@ -106,7 +136,9 @@ export interface SankeyChartProps extends ViewProps, ChartAccessibilityProps<San
|
|
|
106
136
|
/** What travels between them. */
|
|
107
137
|
links: SankeyLink[];
|
|
108
138
|
/**
|
|
109
|
-
* How tall the diagram is drawn, in points.
|
|
139
|
+
* How tall the diagram is drawn, in points. Under `orientation="vertical"`
|
|
140
|
+
* this is the length of the flow rather than the size of the bars, and left
|
|
141
|
+
* unset it is worked out from how many stages the flow turned out to need.
|
|
110
142
|
*
|
|
111
143
|
* The width is the card's, but nothing in a flow says how deep it should be:
|
|
112
144
|
* a diagram of four nodes and one of forty are the same data at two heights,
|
|
@@ -122,6 +154,28 @@ export interface SankeyChartProps extends ViewProps, ChartAccessibilityProps<San
|
|
|
122
154
|
* before it gives up the height of its bars, because the bar is the reading.
|
|
123
155
|
*/
|
|
124
156
|
nodePadding?: number;
|
|
157
|
+
/**
|
|
158
|
+
* Which way the flow runs: `horizontal` from one side to the other,
|
|
159
|
+
* `vertical` from the top of the diagram down to the bottom.
|
|
160
|
+
*
|
|
161
|
+
* This is the axis the *stages* advance along, not the one the bars point
|
|
162
|
+
* along — a vertical flow draws its bars as horizontal rules and stacks them
|
|
163
|
+
* down the screen. Prefer it on a phone: the stages get the long side of the
|
|
164
|
+
* screen, and a name gets the whole width of the card instead of the gap
|
|
165
|
+
* between two columns.
|
|
166
|
+
*/
|
|
167
|
+
orientation?: SankeyOrientation;
|
|
168
|
+
/**
|
|
169
|
+
* Folds each column's smallest nodes into one bucket, named `Other` unless
|
|
170
|
+
* you say otherwise.
|
|
171
|
+
*
|
|
172
|
+
* A ribbon carries its value in its thickness, so a column of thirty is
|
|
173
|
+
* thirty hairlines. `maxPerColumn` caps how many nodes a column keeps, the
|
|
174
|
+
* bucket included; `minShare` folds anything under that fraction of its own
|
|
175
|
+
* column. A column where fewer than two nodes would go in is left alone,
|
|
176
|
+
* because one node in a bucket is a rename rather than a simplification.
|
|
177
|
+
*/
|
|
178
|
+
collapse?: SankeyCollapse;
|
|
125
179
|
/** Which column a node goes in where the flow leaves a choice. */
|
|
126
180
|
align?: SankeyAlign;
|
|
127
181
|
/** Relaxation rounds spent untangling the ribbons. */
|
|
@@ -146,6 +200,15 @@ export interface SankeyChartProps extends ViewProps, ChartAccessibilityProps<San
|
|
|
146
200
|
* so a banner can be shown and taken away from the same signal.
|
|
147
201
|
*/
|
|
148
202
|
onDropLinks?: (count: number) => void;
|
|
203
|
+
/**
|
|
204
|
+
* Overrides what a screen reader says for one ribbon.
|
|
205
|
+
*
|
|
206
|
+
* The ribbons are the reading — a node's total says how much passed through
|
|
207
|
+
* it, never where it went — so each one is spoken in its own right, as
|
|
208
|
+
* "source to target, value". Only the rows that could be drawn are offered;
|
|
209
|
+
* a dropped row is reported through `onDropLinks` instead.
|
|
210
|
+
*/
|
|
211
|
+
accessibilityLabelForLink?: (link: SankeyLink, index: number) => string;
|
|
149
212
|
children?: ReactNode;
|
|
150
213
|
}
|
|
151
214
|
/** Imperative handle: re-run the entrance, for a "replay" control. */
|
|
@@ -182,6 +245,14 @@ export interface SankeyChartNodesProps {
|
|
|
182
245
|
radius?: number;
|
|
183
246
|
/** A bar's opacity when something else is selected. */
|
|
184
247
|
dimOpacity?: number;
|
|
248
|
+
/**
|
|
249
|
+
* Whether pressing a bar selects its node.
|
|
250
|
+
*
|
|
251
|
+
* On by default, because the names are not always there to press. A bar
|
|
252
|
+
* below `SankeyChart.Labels`' `minHeight` has no name and, without this, no
|
|
253
|
+
* way to be selected at all.
|
|
254
|
+
*/
|
|
255
|
+
interactive?: boolean;
|
|
185
256
|
}
|
|
186
257
|
/**
|
|
187
258
|
* The bars the ribbons run between.
|
|
@@ -190,7 +261,7 @@ export interface SankeyChartNodesProps {
|
|
|
190
261
|
* the diagram that is not crossing anything else — it is the edge the flow
|
|
191
262
|
* arrives at, and it reads as an edge only if nothing shows through it.
|
|
192
263
|
*/
|
|
193
|
-
declare function SankeyChartNodes({ radius, dimOpacity }: SankeyChartNodesProps): import("react").JSX.Element | null;
|
|
264
|
+
declare function SankeyChartNodes({ radius, dimOpacity, interactive, }: SankeyChartNodesProps): import("react").JSX.Element | null;
|
|
194
265
|
declare namespace SankeyChartNodes {
|
|
195
266
|
var displayName: string;
|
|
196
267
|
var slot: "svg";
|
|
@@ -255,6 +326,59 @@ declare namespace SankeyChartTooltip {
|
|
|
255
326
|
var displayName: string;
|
|
256
327
|
var slot: "overlay";
|
|
257
328
|
}
|
|
329
|
+
export interface SankeyChartBreakdownProps extends ViewProps {
|
|
330
|
+
className?: string;
|
|
331
|
+
/** Format the figures. Defaults to a compact number. */
|
|
332
|
+
formatValue?: (value: number) => string;
|
|
333
|
+
/** How many rows each side shows before stopping. */
|
|
334
|
+
maxRows?: number;
|
|
335
|
+
/**
|
|
336
|
+
* Fires with the node at the other end of a row, so a breakdown can be
|
|
337
|
+
* walked: press where a stream went and the chart follows it there.
|
|
338
|
+
*/
|
|
339
|
+
onSelectNode?: (id: string) => void;
|
|
340
|
+
/** Shown in place of the rows when nothing is selected. */
|
|
341
|
+
placeholder?: string;
|
|
342
|
+
}
|
|
343
|
+
/**
|
|
344
|
+
* What the selected node carries, written out in full underneath the diagram.
|
|
345
|
+
*
|
|
346
|
+
* The names on a flow diagram live in the gaps between its stages, which on a
|
|
347
|
+
* phone is a few dozen points — wide enough to truncate almost anything. Here
|
|
348
|
+
* there is the whole width of the card, so a stream is read as the name of
|
|
349
|
+
* where it came from and the number it carried rather than as a ribbon whose
|
|
350
|
+
* label ran out of room.
|
|
351
|
+
*
|
|
352
|
+
* In and out are listed separately because they are only the same total when
|
|
353
|
+
* nothing was lost on the way through, and a node where they differ is the
|
|
354
|
+
* interesting one on the chart.
|
|
355
|
+
*/
|
|
356
|
+
declare function SankeyChartBreakdown({ className, formatValue, maxRows, onSelectNode, placeholder, ...props }: SankeyChartBreakdownProps): import("react").JSX.Element | null;
|
|
357
|
+
declare namespace SankeyChartBreakdown {
|
|
358
|
+
var displayName: string;
|
|
359
|
+
var slot: "footer";
|
|
360
|
+
}
|
|
361
|
+
export interface SankeyChartLegendProps extends ViewProps {
|
|
362
|
+
className?: string;
|
|
363
|
+
/** How many names to show before stopping. */
|
|
364
|
+
limit?: number;
|
|
365
|
+
/** Show each node's share of the whole flow beside its name. */
|
|
366
|
+
showShare?: boolean;
|
|
367
|
+
}
|
|
368
|
+
/**
|
|
369
|
+
* Every stage named, under the diagram.
|
|
370
|
+
*
|
|
371
|
+
* The names on the chart are dropped wherever a bar is too short to carry one,
|
|
372
|
+
* which is the right call — forty names at that spacing overlap into a grey
|
|
373
|
+
* band that hides the flow behind them — but it leaves the smallest nodes with
|
|
374
|
+
* no name and nothing to press. Here each one gets its full name and a proper
|
|
375
|
+
* target, and pressing it selects the same node the bar would.
|
|
376
|
+
*/
|
|
377
|
+
declare function SankeyChartLegend({ className, limit, showShare, ...props }: SankeyChartLegendProps): import("react").JSX.Element | null;
|
|
378
|
+
declare namespace SankeyChartLegend {
|
|
379
|
+
var displayName: string;
|
|
380
|
+
var slot: "footer";
|
|
381
|
+
}
|
|
258
382
|
export interface SankeyChartSkeletonProps {
|
|
259
383
|
color?: string;
|
|
260
384
|
}
|
|
@@ -297,6 +421,8 @@ declare namespace SankeyChartHeader {
|
|
|
297
421
|
var slot: "header";
|
|
298
422
|
}
|
|
299
423
|
export declare const SankeyChart: import("react").ForwardRefExoticComponent<SankeyChartProps & import("react").RefAttributes<SankeyChartHandle>> & {
|
|
424
|
+
Breakdown: typeof SankeyChartBreakdown;
|
|
425
|
+
Legend: typeof SankeyChartLegend;
|
|
300
426
|
Header: typeof SankeyChartHeader;
|
|
301
427
|
Links: typeof SankeyChartLinks;
|
|
302
428
|
Nodes: typeof SankeyChartNodes;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/sankey-chart/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,OAAO,EAWL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAqD,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAYjG,OAAO,EAEL,KAAK,uBAAuB,EAC7B,MAAM,yCAAsC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/sankey-chart/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -45,6 +45,20 @@ export interface SankeyLayoutLinkInput {
|
|
|
45
45
|
target: string;
|
|
46
46
|
value: number;
|
|
47
47
|
}
|
|
48
|
+
/** Which nodes get folded into one, and what the result is called. */
|
|
49
|
+
export interface SankeyCollapse {
|
|
50
|
+
/**
|
|
51
|
+
* Keep at most this many nodes in a column, bucket included. A column with
|
|
52
|
+
* more folds its smallest until it fits.
|
|
53
|
+
*/
|
|
54
|
+
maxPerColumn?: number;
|
|
55
|
+
/**
|
|
56
|
+
* Fold any node worth less than this share of its own column, `0` to `1`.
|
|
57
|
+
*/
|
|
58
|
+
minShare?: number;
|
|
59
|
+
/** What the bucket is called. Defaults to `Other`. */
|
|
60
|
+
label?: string;
|
|
61
|
+
}
|
|
48
62
|
export interface SankeyLayoutOptions {
|
|
49
63
|
width: number;
|
|
50
64
|
height: number;
|
|
@@ -55,11 +69,29 @@ export interface SankeyLayoutOptions {
|
|
|
55
69
|
align: SankeyAlign;
|
|
56
70
|
/** Relaxation rounds. More is steadier and slower; six is the useful knee. */
|
|
57
71
|
iterations: number;
|
|
72
|
+
/**
|
|
73
|
+
* Folds a column's smallest nodes into one bucket before laying it out.
|
|
74
|
+
*
|
|
75
|
+
* A ribbon carries its value in its thickness, so a column of thirty is
|
|
76
|
+
* thirty hairlines — present in the data and unreadable on the screen. This
|
|
77
|
+
* is the only option here that reduces what is drawn rather than rearranging
|
|
78
|
+
* it.
|
|
79
|
+
*/
|
|
80
|
+
collapse?: SankeyCollapse;
|
|
58
81
|
}
|
|
59
82
|
export interface SankeyLayoutNode {
|
|
60
83
|
id: string;
|
|
61
|
-
/**
|
|
84
|
+
/**
|
|
85
|
+
* Position in the input array, so a caller can find its own datum again.
|
|
86
|
+
* `-1` on a node the layout made up rather than was given — see `collapsed`.
|
|
87
|
+
*/
|
|
62
88
|
index: number;
|
|
89
|
+
/**
|
|
90
|
+
* The ids folded into this node, on the bucket `collapse` produced. Absent
|
|
91
|
+
* on every node that came from the caller's array, which is how the two are
|
|
92
|
+
* told apart without comparing ids against the input.
|
|
93
|
+
*/
|
|
94
|
+
collapsed?: string[];
|
|
63
95
|
/** Which column it landed in, counting from the left. */
|
|
64
96
|
layer: number;
|
|
65
97
|
/** What flows through it: the larger of what arrives and what leaves. */
|
|
@@ -83,7 +115,10 @@ export interface SankeyLayoutLink {
|
|
|
83
115
|
value: number;
|
|
84
116
|
/** How thick the ribbon is, in points. */
|
|
85
117
|
width: number;
|
|
86
|
-
/**
|
|
118
|
+
/**
|
|
119
|
+
* The ribbon's centre where it leaves the source, across the flow — points
|
|
120
|
+
* from the top of an upright layout, and from the left of a transposed one.
|
|
121
|
+
*/
|
|
87
122
|
y0: number;
|
|
88
123
|
/** And where it meets the target. */
|
|
89
124
|
y1: number;
|
|
@@ -97,11 +132,19 @@ export interface SankeyLayout {
|
|
|
97
132
|
dropped: number;
|
|
98
133
|
}
|
|
99
134
|
/**
|
|
100
|
-
*
|
|
135
|
+
* The same arrangement, read down the screen instead of across it.
|
|
136
|
+
*
|
|
137
|
+
* A flow diagram has one axis carrying the order of the stages and another
|
|
138
|
+
* carrying the values, and which of them is horizontal is a question about the
|
|
139
|
+
* screen rather than about the data. So the layout is solved once, upright,
|
|
140
|
+
* and turned afterwards — the alternative is a second copy of the relaxation
|
|
141
|
+
* with every comparison reversed, which is the same maths maintained twice.
|
|
101
142
|
*
|
|
102
|
-
*
|
|
103
|
-
*
|
|
104
|
-
*
|
|
143
|
+
* Reflecting about the diagonal, so it is its own inverse: transposing twice
|
|
144
|
+
* returns the layout unchanged. Call `sankeyLayout` with `width` and `height`
|
|
145
|
+
* swapped and then pass the result through here, or the diagram comes back
|
|
146
|
+
* fitted to the wrong box.
|
|
105
147
|
*/
|
|
148
|
+
export declare function transposeLayout(layout: SankeyLayout): SankeyLayout;
|
|
106
149
|
export declare function sankeyLayout(nodeInput: readonly SankeyLayoutNodeInput[], linkInput: readonly SankeyLayoutLinkInput[], options: SankeyLayoutOptions): SankeyLayout;
|
|
107
150
|
//# sourceMappingURL=sankey-layout.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sankey-layout.d.ts","sourceRoot":"","sources":["../../../../../src/components/sankey-chart/sankey-layout.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,wEAAwE;AACxE,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAElE,MAAM,WAAW,qBAAqB;IACpC,iCAAiC;IACjC,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,SAAS,EAAE,MAAM,CAAC;IAClB,kEAAkE;IAClE,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,WAAW,CAAC;IACnB,8EAA8E;IAC9E,UAAU,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"sankey-layout.d.ts","sourceRoot":"","sources":["../../../../../src/components/sankey-chart/sankey-layout.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,wEAAwE;AACxE,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAElE,MAAM,WAAW,qBAAqB;IACpC,iCAAiC;IACjC,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED,sEAAsE;AACtE,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,SAAS,EAAE,MAAM,CAAC;IAClB,kEAAkE;IAClE,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,WAAW,CAAC;IACnB,8EAA8E;IAC9E,UAAU,EAAE,MAAM,CAAC;IACnB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B;AAED,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IACX,qCAAqC;IACrC,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,oDAAoD;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB,6EAA6E;IAC7E,OAAO,EAAE,MAAM,CAAC;CACjB;AA4bD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,YAAY,GAAG,YAAY,CAclE;AAED,wBAAgB,YAAY,CAC1B,SAAS,EAAE,SAAS,qBAAqB,EAAE,EAC3C,SAAS,EAAE,SAAS,qBAAqB,EAAE,EAC3C,OAAO,EAAE,mBAAmB,GAC3B,YAAY,CA4Sd"}
|
|
@@ -30,6 +30,23 @@ export interface SpinnerProps extends VariantProps<typeof spinnerVariants> {
|
|
|
30
30
|
* the spinner is the only sign, or the wait passes in silence.
|
|
31
31
|
*/
|
|
32
32
|
label?: string;
|
|
33
|
+
/**
|
|
34
|
+
* The colour of the turning arc. Any colour React Native accepts — a hex
|
|
35
|
+
* string, `rgb()`, a named colour. Leave it unset to follow the theme's
|
|
36
|
+
* primary colour.
|
|
37
|
+
*
|
|
38
|
+
* Set it where the spinner sits on a surface the theme did not choose for
|
|
39
|
+
* it: a spinner on a filled button, or over a photo, wants the colour of the
|
|
40
|
+
* text around it rather than the accent.
|
|
41
|
+
*/
|
|
42
|
+
color?: string;
|
|
43
|
+
/**
|
|
44
|
+
* The colour of the faint ring the arc turns around. Leave it unset for the
|
|
45
|
+
* theme's muted colour. Worth setting alongside `color` on a dark or
|
|
46
|
+
* coloured surface, where the default ring can read as a second, fainter
|
|
47
|
+
* spinner rather than as a track.
|
|
48
|
+
*/
|
|
49
|
+
trackColor?: string;
|
|
33
50
|
}
|
|
34
51
|
/**
|
|
35
52
|
* Rotating ring for work of unknown length. The animation runs entirely on the
|
|
@@ -45,6 +62,6 @@ export interface SpinnerProps extends VariantProps<typeof spinnerVariants> {
|
|
|
45
62
|
* single thing a spinner exists to rule out. Reduce motion asks for less
|
|
46
63
|
* travel, not for less news.
|
|
47
64
|
*/
|
|
48
|
-
export declare const Spinner: import("react").MemoExoticComponent<({ className, size, label, }: SpinnerProps) => import("react").JSX.Element>;
|
|
65
|
+
export declare const Spinner: import("react").MemoExoticComponent<({ className, size, label, color, trackColor, }: SpinnerProps) => import("react").JSX.Element>;
|
|
49
66
|
export {};
|
|
50
67
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/spinner/index.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAS1D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;kGAYnB,CAAC;AAEH,MAAM,WAAW,YAAa,SAAQ,YAAY,CAAC,OAAO,eAAe,CAAC;IACxE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;;OAQG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/spinner/index.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAS1D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;kGAYnB,CAAC;AAEH,MAAM,WAAW,YAAa,SAAQ,YAAY,CAAC,OAAO,eAAe,CAAC;IACxE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;;OAQG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;OAQG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,OAAO,uFAMjB,YAAY,iCA4Db,CAAC"}
|