panelui-native 0.40.0 → 0.43.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/README.md +4 -2
- package/lib/module/components/card/index.js +172 -3
- package/lib/module/components/card/index.js.map +1 -1
- package/lib/module/components/color-picker/index.js +1395 -0
- package/lib/module/components/color-picker/index.js.map +1 -0
- package/lib/module/components/combobox/index.js +87 -19
- package/lib/module/components/combobox/index.js.map +1 -1
- package/lib/module/components/drawer/index.js +13 -4
- package/lib/module/components/drawer/index.js.map +1 -1
- package/lib/module/components/kpi-chart/index.js +648 -0
- package/lib/module/components/kpi-chart/index.js.map +1 -0
- package/lib/module/components/map/index.js +72 -12
- package/lib/module/components/map/index.js.map +1 -1
- package/lib/module/components/menu/index.js +40 -10
- package/lib/module/components/menu/index.js.map +1 -1
- package/lib/module/components/pagination/index.js +19 -9
- package/lib/module/components/pagination/index.js.map +1 -1
- package/lib/module/components/panelside/index.js +68 -18
- package/lib/module/components/panelside/index.js.map +1 -1
- package/lib/module/components/radar-chart/index.js +704 -0
- package/lib/module/components/radar-chart/index.js.map +1 -0
- package/lib/module/components/section-rail/index.js +32 -7
- package/lib/module/components/section-rail/index.js.map +1 -1
- package/lib/module/components/slider/index.js +240 -39
- package/lib/module/components/slider/index.js.map +1 -1
- package/lib/module/components/tabs/index.js +194 -10
- package/lib/module/components/tabs/index.js.map +1 -1
- package/lib/module/components/text-animation/index.js +857 -0
- package/lib/module/components/text-animation/index.js.map +1 -0
- package/lib/module/icons/index.js +25 -7
- package/lib/module/icons/index.js.map +1 -1
- package/lib/module/index.js +5 -0
- package/lib/module/index.js.map +1 -1
- package/lib/module/theme/use-theme.js +1 -1
- package/lib/module/utils/chart.js +44 -0
- package/lib/module/utils/chart.js.map +1 -1
- package/lib/module/utils/color.js +268 -0
- package/lib/module/utils/color.js.map +1 -0
- package/lib/typescript/src/components/card/index.d.ts +20 -0
- package/lib/typescript/src/components/card/index.d.ts.map +1 -1
- package/lib/typescript/src/components/color-picker/index.d.ts +258 -0
- package/lib/typescript/src/components/color-picker/index.d.ts.map +1 -0
- package/lib/typescript/src/components/combobox/index.d.ts.map +1 -1
- package/lib/typescript/src/components/drawer/index.d.ts +13 -1
- package/lib/typescript/src/components/drawer/index.d.ts.map +1 -1
- package/lib/typescript/src/components/kpi-chart/index.d.ts +490 -0
- package/lib/typescript/src/components/kpi-chart/index.d.ts.map +1 -0
- package/lib/typescript/src/components/map/index.d.ts +37 -2
- package/lib/typescript/src/components/map/index.d.ts.map +1 -1
- package/lib/typescript/src/components/menu/index.d.ts.map +1 -1
- package/lib/typescript/src/components/pagination/index.d.ts.map +1 -1
- package/lib/typescript/src/components/panelside/index.d.ts +50 -4
- package/lib/typescript/src/components/panelside/index.d.ts.map +1 -1
- package/lib/typescript/src/components/radar-chart/index.d.ts +214 -0
- package/lib/typescript/src/components/radar-chart/index.d.ts.map +1 -0
- package/lib/typescript/src/components/section-rail/index.d.ts +8 -1
- package/lib/typescript/src/components/section-rail/index.d.ts.map +1 -1
- package/lib/typescript/src/components/slider/index.d.ts +19 -0
- package/lib/typescript/src/components/slider/index.d.ts.map +1 -1
- package/lib/typescript/src/components/tabs/index.d.ts +11 -1
- package/lib/typescript/src/components/tabs/index.d.ts.map +1 -1
- package/lib/typescript/src/components/text-animation/index.d.ts +268 -0
- package/lib/typescript/src/components/text-animation/index.d.ts.map +1 -0
- package/lib/typescript/src/icons/index.d.ts +6 -0
- package/lib/typescript/src/icons/index.d.ts.map +1 -1
- package/lib/typescript/src/index.d.ts +8 -3
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/utils/chart.d.ts +21 -0
- package/lib/typescript/src/utils/chart.d.ts.map +1 -1
- package/lib/typescript/src/utils/color.d.ts +74 -0
- package/lib/typescript/src/utils/color.d.ts.map +1 -0
- package/package.json +2 -1
- package/src/components/card/index.tsx +227 -2
- package/src/components/color-picker/index.tsx +1618 -0
- package/src/components/combobox/index.tsx +89 -19
- package/src/components/drawer/index.tsx +31 -9
- package/src/components/kpi-chart/index.tsx +719 -0
- package/src/components/map/index.tsx +158 -14
- package/src/components/menu/index.tsx +51 -6
- package/src/components/pagination/index.tsx +18 -6
- package/src/components/panelside/index.tsx +134 -19
- package/src/components/radar-chart/index.tsx +910 -0
- package/src/components/section-rail/index.tsx +42 -8
- package/src/components/slider/index.tsx +283 -41
- package/src/components/tabs/index.tsx +263 -8
- package/src/components/text-animation/index.tsx +1093 -0
- package/src/icons/index.tsx +23 -4
- package/src/index.ts +73 -1
- package/src/theme/use-theme.ts +1 -1
- package/src/utils/chart.ts +52 -0
- package/src/utils/color.ts +246 -0
- package/theme.css +125 -112
|
@@ -81,6 +81,8 @@ import { type PressableProps, type ScrollViewProps, type TextInputProps, type Vi
|
|
|
81
81
|
import { type SharedValue } from 'react-native-reanimated';
|
|
82
82
|
export type PanelsideMode = 'push' | 'overlay';
|
|
83
83
|
export type PanelsideSwipeFrom = 'anywhere' | 'edge';
|
|
84
|
+
export type PanelsideItemSize = 'default' | 'sm';
|
|
85
|
+
export type PanelsideCtaSize = 'default' | 'lg';
|
|
84
86
|
export interface UsePanelsideResult {
|
|
85
87
|
open: boolean;
|
|
86
88
|
setOpen: (open: boolean) => void;
|
|
@@ -160,9 +162,29 @@ export interface PanelsideProps {
|
|
|
160
162
|
* Default true.
|
|
161
163
|
*/
|
|
162
164
|
dismissible?: boolean;
|
|
165
|
+
/**
|
|
166
|
+
* A tick under the finger when a swipe commits to opening or closing. Off by
|
|
167
|
+
* default — needs the optional `expo-haptics`, and is silent without it.
|
|
168
|
+
*
|
|
169
|
+
* It fires on the commit rather than during the drag: the panel following
|
|
170
|
+
* your thumb is already the feedback for the drag, and a tick per frame is
|
|
171
|
+
* what makes a gesture feel broken rather than responsive.
|
|
172
|
+
*/
|
|
173
|
+
haptics?: boolean;
|
|
174
|
+
/**
|
|
175
|
+
* How far the scene shrinks at full open, as a scale factor. Sets the
|
|
176
|
+
* default for every `Panelside.Scene` underneath; the scene's own prop still
|
|
177
|
+
* wins. Here so the three numbers that describe the curve can be set once
|
|
178
|
+
* where the panel is configured, rather than on a part further down.
|
|
179
|
+
*/
|
|
180
|
+
scale?: number;
|
|
181
|
+
/** The corner radius the scene reaches at full open, in points. */
|
|
182
|
+
radius?: number;
|
|
183
|
+
/** How far the scene is dimmed at full open, 0 to 1. */
|
|
184
|
+
dim?: number;
|
|
163
185
|
className?: string;
|
|
164
186
|
}
|
|
165
|
-
declare function PanelsideRoot({ children, open: controlledOpen, onOpenChange, defaultOpen, mode, width: widthProp, dock, swipeEnabled, swipeFrom, edgeWidth, dismissible, className, }: PanelsideProps): import("react").JSX.Element;
|
|
187
|
+
declare function PanelsideRoot({ children, open: controlledOpen, onOpenChange, defaultOpen, mode, width: widthProp, dock, swipeEnabled, swipeFrom, edgeWidth, dismissible, haptics, scale, radius, dim, className, }: PanelsideProps): import("react").JSX.Element;
|
|
166
188
|
export interface PanelsidePanelProps extends ViewProps {
|
|
167
189
|
className?: string;
|
|
168
190
|
children?: ReactNode;
|
|
@@ -239,10 +261,16 @@ export interface PanelsideItemProps extends Omit<PressableProps, 'children'> {
|
|
|
239
261
|
*/
|
|
240
262
|
badge?: ReactNode;
|
|
241
263
|
disabled?: boolean;
|
|
264
|
+
/**
|
|
265
|
+
* Row density. `sm` tightens the padding for a panel that has to show more
|
|
266
|
+
* history at once, without touching the type size — a list you can read is
|
|
267
|
+
* worth more than two extra rows.
|
|
268
|
+
*/
|
|
269
|
+
size?: PanelsideItemSize;
|
|
242
270
|
/** Trailing content — usually a `Panelside.Action`. */
|
|
243
271
|
children?: ReactNode;
|
|
244
272
|
}
|
|
245
|
-
declare function PanelsideItem({ className, icon, label, active, badge, disabled, children, ...props }: PanelsideItemProps): import("react").JSX.Element;
|
|
273
|
+
declare function PanelsideItem({ className, icon, label, active, badge, disabled, size, children, ...props }: PanelsideItemProps): import("react").JSX.Element;
|
|
246
274
|
declare namespace PanelsideItem {
|
|
247
275
|
var displayName: string;
|
|
248
276
|
}
|
|
@@ -282,6 +310,15 @@ export interface PanelsideCtaProps extends Omit<PressableProps, 'children'> {
|
|
|
282
310
|
icon?: ReactNode;
|
|
283
311
|
/** `primary` is the filled accent pill; `secondary` is the quiet one. */
|
|
284
312
|
variant?: 'primary' | 'secondary';
|
|
313
|
+
/**
|
|
314
|
+
* How tall the pill is. `default` is 40pt, which sits level with the account
|
|
315
|
+
* button beside it in the footer; `lg` is the 48pt pill, for a panel where
|
|
316
|
+
* the call to action is the only thing in the row.
|
|
317
|
+
*
|
|
318
|
+
* Ignored under `native` — the platform sizes its own button, and asks for a
|
|
319
|
+
* control size rather than a height.
|
|
320
|
+
*/
|
|
321
|
+
size?: PanelsideCtaSize;
|
|
285
322
|
/**
|
|
286
323
|
* Render the platform's own button instead of the pill. Requires the
|
|
287
324
|
* optional `@expo/ui` package; without it this prop does nothing.
|
|
@@ -297,7 +334,7 @@ export interface PanelsideCtaProps extends Omit<PressableProps, 'children'> {
|
|
|
297
334
|
glass?: boolean;
|
|
298
335
|
children?: ReactNode;
|
|
299
336
|
}
|
|
300
|
-
declare function PanelsideCta({ className, label, icon, variant, native, glass, disabled, children, ...props }: PanelsideCtaProps): import("react").JSX.Element;
|
|
337
|
+
declare function PanelsideCta({ className, label, icon, variant, size, native, glass, disabled, children, ...props }: PanelsideCtaProps): import("react").JSX.Element;
|
|
301
338
|
declare namespace PanelsideCta {
|
|
302
339
|
var displayName: string;
|
|
303
340
|
}
|
|
@@ -308,15 +345,24 @@ export interface PanelsideSceneProps extends ViewProps {
|
|
|
308
345
|
* full height and stays behind the status bar, and the radius and dim do the
|
|
309
346
|
* work. Below one it shrinks about its centre, which insets it top and bottom
|
|
310
347
|
* as well as at the side.
|
|
348
|
+
*
|
|
349
|
+
* Falls back to the same prop on the `Panelside` root, so the three numbers
|
|
350
|
+
* that describe the curve can be set once where the panel is configured.
|
|
311
351
|
*/
|
|
312
352
|
scale?: number;
|
|
313
353
|
/** The corner radius the scene reaches at full travel. Default 44. */
|
|
314
354
|
radius?: number;
|
|
315
355
|
/** How far the scene dims at full travel, 0 to 1. Default 0.45. */
|
|
316
356
|
dim?: number;
|
|
357
|
+
/**
|
|
358
|
+
* Styles the layer that dims the scene. Its opacity is `dim`'s to set, so
|
|
359
|
+
* this is for the colour — a scrim that is not black, for a light theme
|
|
360
|
+
* where black at 45% reads as a hole rather than as shade.
|
|
361
|
+
*/
|
|
362
|
+
scrimClassName?: string;
|
|
317
363
|
children?: ReactNode;
|
|
318
364
|
}
|
|
319
|
-
declare function PanelsideScene({ className, scale, radius, dim, children, style, ...props }: PanelsideSceneProps): import("react").JSX.Element;
|
|
365
|
+
declare function PanelsideScene({ className, scale: scaleProp, radius: radiusProp, dim: dimProp, scrimClassName, children, style, ...props }: PanelsideSceneProps): import("react").JSX.Element;
|
|
320
366
|
declare namespace PanelsideScene {
|
|
321
367
|
var displayName: string;
|
|
322
368
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/panelside/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6EG;AACH,OAAO,EASL,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EASL,KAAK,cAAc,EACnB,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAiB,EAOf,KAAK,WAAW,EACjB,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/panelside/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,214 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* RadarChart — several measures of one thing, on one shape.
|
|
3
|
+
*
|
|
4
|
+
* A radar answers a question a bar chart cannot: not "which of these is
|
|
5
|
+
* biggest" but "what shape is this". Five scores read as five bars are five
|
|
6
|
+
* facts; read as a polygon they are a profile, and two profiles laid over each
|
|
7
|
+
* other are comparable at a glance in a way two groups of bars never are.
|
|
8
|
+
*
|
|
9
|
+
* ```tsx
|
|
10
|
+
* <RadarChart data={scores} axisKey="skill">
|
|
11
|
+
* <RadarChart.Header title="Team profile" legend />
|
|
12
|
+
* <RadarChart.Grid />
|
|
13
|
+
* <RadarChart.Axis />
|
|
14
|
+
* <RadarChart.Series dataKey="you" colorIndex={1} />
|
|
15
|
+
* <RadarChart.Series dataKey="team" colorIndex={2} />
|
|
16
|
+
* </RadarChart>
|
|
17
|
+
* ```
|
|
18
|
+
*
|
|
19
|
+
* That is also the shape's limit, and worth saying out loud: the order of the
|
|
20
|
+
* axes changes the outline, and the outline is what people read. Two datasets
|
|
21
|
+
* are only comparable on one radar if the axes are in the same order, and a
|
|
22
|
+
* radar is the wrong chart for data whose axes have no natural order at all.
|
|
23
|
+
*
|
|
24
|
+
* The reveal grows the polygons out of the centre rather than sweeping across
|
|
25
|
+
* them, because a polar chart has no left-hand edge for a sweep to start at.
|
|
26
|
+
* Everything below the root is drawn on the UI thread.
|
|
27
|
+
*/
|
|
28
|
+
import { type ReactNode } from 'react';
|
|
29
|
+
import { type ViewProps } from 'react-native';
|
|
30
|
+
import { type SharedValue } from 'react-native-reanimated';
|
|
31
|
+
import { type SeriesColorIndex } from '../../utils/chart.js';
|
|
32
|
+
export type RadarChartStatus = 'loading' | 'ready';
|
|
33
|
+
/** One row is one axis: its label, and one value per series. */
|
|
34
|
+
export type RadarChartDatum = Record<string, string | number | null | undefined>;
|
|
35
|
+
interface RadarChartContextValue {
|
|
36
|
+
data: RadarChartDatum[];
|
|
37
|
+
axisKey: string;
|
|
38
|
+
/** Centre of the rings, in view coordinates. */
|
|
39
|
+
cx: number;
|
|
40
|
+
cy: number;
|
|
41
|
+
/** Radius of the outermost ring. */
|
|
42
|
+
radius: number;
|
|
43
|
+
/** The drawing box, so a label can be kept inside it rather than clipped. */
|
|
44
|
+
width: number;
|
|
45
|
+
height: number;
|
|
46
|
+
status: RadarChartStatus;
|
|
47
|
+
/** The value the outermost ring stands for, tweened. */
|
|
48
|
+
domainMax: SharedValue<number>;
|
|
49
|
+
/** …and the innermost, which is usually but not always zero. */
|
|
50
|
+
domainMin: SharedValue<number>;
|
|
51
|
+
reveal: SharedValue<number>;
|
|
52
|
+
series: [string, string][];
|
|
53
|
+
registerSeries: (key: string, color: string) => void;
|
|
54
|
+
unregisterSeries: (key: string) => void;
|
|
55
|
+
}
|
|
56
|
+
/** The chart's geometry and data, for a part or a readout beside one. */
|
|
57
|
+
export declare function useRadarChart(): RadarChartContextValue;
|
|
58
|
+
export interface RadarChartProps extends Omit<ViewProps, 'children'> {
|
|
59
|
+
className?: string;
|
|
60
|
+
/** One row per axis, in the order they go round. */
|
|
61
|
+
data: RadarChartDatum[];
|
|
62
|
+
/** Key holding each row's axis label. */
|
|
63
|
+
axisKey?: string;
|
|
64
|
+
/**
|
|
65
|
+
* `loading` holds the shape at the centre until the data arrives, then grows
|
|
66
|
+
* it — one component throughout rather than a spinner swapped for a chart,
|
|
67
|
+
* because swapping loses the transition.
|
|
68
|
+
*/
|
|
69
|
+
status?: RadarChartStatus;
|
|
70
|
+
/**
|
|
71
|
+
* Diameter of the outermost ring, in points. The view is that plus the room
|
|
72
|
+
* the axis labels need around it, and centres itself.
|
|
73
|
+
*
|
|
74
|
+
* The ring rather than the box, because the ring is the thing being sized —
|
|
75
|
+
* a box measurement would mean "bigger" also meant "labels further from the
|
|
76
|
+
* shape", and the chart would grow without the drawing growing with it.
|
|
77
|
+
*
|
|
78
|
+
* Pass `size={undefined}` with an `aspectRatio` to fill the container the
|
|
79
|
+
* way the other charts do.
|
|
80
|
+
*/
|
|
81
|
+
size?: number;
|
|
82
|
+
/**
|
|
83
|
+
* Width ÷ height when `size` is not given. `1` is the square a radar wants;
|
|
84
|
+
* the rings stay circular whatever it is set to.
|
|
85
|
+
*/
|
|
86
|
+
aspectRatio?: number;
|
|
87
|
+
/**
|
|
88
|
+
* Fix the scale instead of deriving it from the data. A radar almost always
|
|
89
|
+
* wants this: the shape only means something against a known maximum, and a
|
|
90
|
+
* scale that moves with the data makes two charts incomparable.
|
|
91
|
+
*/
|
|
92
|
+
domain?: [number, number];
|
|
93
|
+
/** Milliseconds for the reveal on mount. */
|
|
94
|
+
animationDuration?: number;
|
|
95
|
+
/** Drop the room reserved for axis labels, for a radar with none. */
|
|
96
|
+
compact?: boolean;
|
|
97
|
+
children?: ReactNode;
|
|
98
|
+
}
|
|
99
|
+
/** Imperative handle: re-run the reveal on demand, for a "replay" control. */
|
|
100
|
+
export interface RadarChartHandle {
|
|
101
|
+
replay: () => void;
|
|
102
|
+
}
|
|
103
|
+
export interface RadarChartGridProps {
|
|
104
|
+
/** How many rings, including the outermost. */
|
|
105
|
+
rings?: number;
|
|
106
|
+
/** Overrides the themed hairline colour. */
|
|
107
|
+
color?: string;
|
|
108
|
+
/** Draw the rings as circles rather than as polygons through the spokes. */
|
|
109
|
+
circular?: boolean;
|
|
110
|
+
/** Draw a line from the centre out to each axis. */
|
|
111
|
+
spokes?: boolean;
|
|
112
|
+
}
|
|
113
|
+
/**
|
|
114
|
+
* The scale, drawn as rings.
|
|
115
|
+
*
|
|
116
|
+
* Polygonal by default rather than circular, because the rings are read
|
|
117
|
+
* against the shape laid over them — a round ring behind an angular polygon
|
|
118
|
+
* gives every axis a different apparent distance to the edge, and the whole
|
|
119
|
+
* point of the rings is to say how far out something is.
|
|
120
|
+
*/
|
|
121
|
+
declare function RadarChartGrid({ rings, color, circular, spokes, }: RadarChartGridProps): import("react").JSX.Element | null;
|
|
122
|
+
declare namespace RadarChartGrid {
|
|
123
|
+
var displayName: string;
|
|
124
|
+
}
|
|
125
|
+
export interface RadarChartAxisProps {
|
|
126
|
+
/** Overrides the themed label colour. */
|
|
127
|
+
color?: string;
|
|
128
|
+
/** Label size in points. */
|
|
129
|
+
fontSize?: number;
|
|
130
|
+
/** How far outside the rings the labels sit. */
|
|
131
|
+
offset?: number;
|
|
132
|
+
/** Rewrites a label — to shorten it, or to add a unit. */
|
|
133
|
+
formatLabel?: (label: string, index: number) => string;
|
|
134
|
+
}
|
|
135
|
+
/**
|
|
136
|
+
* The axis names, placed around the rings.
|
|
137
|
+
*
|
|
138
|
+
* Each label is anchored by which side of the circle it is on rather than
|
|
139
|
+
* centred on its point: a label centred at three o'clock overlaps the shape it
|
|
140
|
+
* belongs to, and one centred at nine o'clock overlaps the view's edge.
|
|
141
|
+
*/
|
|
142
|
+
declare function RadarChartAxis({ color, fontSize, offset, formatLabel }: RadarChartAxisProps): import("react").JSX.Element | null;
|
|
143
|
+
declare namespace RadarChartAxis {
|
|
144
|
+
var displayName: string;
|
|
145
|
+
}
|
|
146
|
+
export interface RadarChartSeriesProps {
|
|
147
|
+
/** Key holding this series' value on each row. */
|
|
148
|
+
dataKey: string;
|
|
149
|
+
/** Name for the legend. Defaults to `dataKey`. */
|
|
150
|
+
name?: string;
|
|
151
|
+
/**
|
|
152
|
+
* Stroke colour. Defaults to the `--color-chart-*` token at `colorIndex`, so
|
|
153
|
+
* a series follows the theme without the call site naming a colour.
|
|
154
|
+
*/
|
|
155
|
+
color?: string;
|
|
156
|
+
/** Which `--color-chart-*` token to take when `color` is not given. */
|
|
157
|
+
colorIndex?: SeriesColorIndex;
|
|
158
|
+
strokeWidth?: number;
|
|
159
|
+
/**
|
|
160
|
+
* Opacity of the fill. Two filled polygons over each other make a third
|
|
161
|
+
* colour that means nothing, so drop it towards `0` — or to `0` — on the
|
|
162
|
+
* second and subsequent series.
|
|
163
|
+
*/
|
|
164
|
+
fillOpacity?: number;
|
|
165
|
+
/** A dot at each vertex. Worth it on a radar with few axes. */
|
|
166
|
+
showDots?: boolean;
|
|
167
|
+
}
|
|
168
|
+
/** One profile. */
|
|
169
|
+
declare function RadarChartSeries({ dataKey, name, color, colorIndex, strokeWidth, fillOpacity, showDots, }: RadarChartSeriesProps): import("react").JSX.Element;
|
|
170
|
+
declare namespace RadarChartSeries {
|
|
171
|
+
var displayName: string;
|
|
172
|
+
}
|
|
173
|
+
export interface RadarChartHeaderProps {
|
|
174
|
+
className?: string;
|
|
175
|
+
/** Small caption above the value. */
|
|
176
|
+
title?: string;
|
|
177
|
+
/** The headline figure, if there is one. */
|
|
178
|
+
value?: string;
|
|
179
|
+
/** A line under the value. */
|
|
180
|
+
caption?: string;
|
|
181
|
+
/** Draw the series legend on the trailing end of the strip. */
|
|
182
|
+
legend?: boolean;
|
|
183
|
+
children?: ReactNode;
|
|
184
|
+
}
|
|
185
|
+
/** The strip above the rings. */
|
|
186
|
+
declare function RadarChartHeader({ className, title, value, caption, legend, children, }: RadarChartHeaderProps): import("react").JSX.Element;
|
|
187
|
+
declare namespace RadarChartHeader {
|
|
188
|
+
var displayName: string;
|
|
189
|
+
}
|
|
190
|
+
export interface RadarChartLegendProps {
|
|
191
|
+
className?: string;
|
|
192
|
+
/** Rewrites a series' name — the key is rarely what a reader should see. */
|
|
193
|
+
formatName?: (key: string) => string;
|
|
194
|
+
}
|
|
195
|
+
/**
|
|
196
|
+
* The series, named and coloured.
|
|
197
|
+
*
|
|
198
|
+
* In the bottom-left of the plot rather than under it, which on a radar costs
|
|
199
|
+
* nothing: the shape is a circle in a square box, so the corners are empty by
|
|
200
|
+
* construction. Move it with `className`.
|
|
201
|
+
*/
|
|
202
|
+
declare function RadarChartLegend({ className, formatName }: RadarChartLegendProps): import("react").JSX.Element | null;
|
|
203
|
+
declare namespace RadarChartLegend {
|
|
204
|
+
var displayName: string;
|
|
205
|
+
}
|
|
206
|
+
export declare const RadarChart: import("react").ForwardRefExoticComponent<RadarChartProps & import("react").RefAttributes<RadarChartHandle>> & {
|
|
207
|
+
Header: typeof RadarChartHeader;
|
|
208
|
+
Grid: typeof RadarChartGrid;
|
|
209
|
+
Axis: typeof RadarChartAxis;
|
|
210
|
+
Series: typeof RadarChartSeries;
|
|
211
|
+
Legend: typeof RadarChartLegend;
|
|
212
|
+
};
|
|
213
|
+
export {};
|
|
214
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/radar-chart/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -88,13 +88,20 @@ export interface SectionRailBarProps {
|
|
|
88
88
|
declare function SectionRailBar({ className, value, level }: SectionRailBarProps): import("react").JSX.Element;
|
|
89
89
|
export interface SectionRailContentProps extends ViewProps {
|
|
90
90
|
className?: string;
|
|
91
|
+
/**
|
|
92
|
+
* How wide the panel may grow, as a fraction of the screen or a point width.
|
|
93
|
+
* The default leaves room for the rail and the edge it is anchored to; raise
|
|
94
|
+
* it for a screen whose section titles are long enough to be worth wrapping
|
|
95
|
+
* rather than truncating.
|
|
96
|
+
*/
|
|
97
|
+
maxWidth?: number | `${number}%`;
|
|
91
98
|
children: ReactNode;
|
|
92
99
|
}
|
|
93
100
|
/**
|
|
94
101
|
* The expanded panel. Mounted through a portal so it floats over everything,
|
|
95
102
|
* and unmounted after it fades out rather than left behind hidden.
|
|
96
103
|
*/
|
|
97
|
-
declare function SectionRailContent({ className, children, ...props }: SectionRailContentProps): import("react").JSX.Element | null;
|
|
104
|
+
declare function SectionRailContent({ className, maxWidth, children, ...props }: SectionRailContentProps): import("react").JSX.Element | null;
|
|
98
105
|
export interface SectionRailItemProps {
|
|
99
106
|
className?: string;
|
|
100
107
|
/** Section this row jumps to. Matches the root's `value`. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/section-rail/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/section-rail/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAkC3E,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,OAAO,CAAC;AACpD,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAC;AA6B3D,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8DAA8D;IAC9D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,SAAmB,EACnB,KAAgB,EAChB,OAAe,EACf,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,aAAa,EACb,IAAI,EAAE,QAAQ,EACd,WAAmB,EACnB,YAAY,EACZ,UAAgB,EAChB,MAAW,EACX,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAsGlB;AAED,MAAM,WAAW,uBAAwB,SAAQ,SAAS;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,+BAqBrF;AAED,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,mFAAmF;AACnF,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,KAAS,EAAE,EAAE,mBAAmB,+BAiC3E;AAED,MAAM,WAAW,uBAAwB,SAAQ,SAAS;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,CAAC;IACjC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;GAGG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,QAA0B,EAC1B,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,uBAAuB,sCAuCzB;AAiDD,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,4CAA4C;AAC5C,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,KAAS,EAAE,QAAQ,EAAE,EAAE,oBAAoB,+BA+BvF;AAED,eAAO,MAAM,WAAW;;;;;CAKtB,CAAC"}
|
|
@@ -161,16 +161,32 @@ export interface SliderProps extends Omit<SliderVariantProps, 'disabled'> {
|
|
|
161
161
|
value?: number;
|
|
162
162
|
/** Starting value when uncontrolled. */
|
|
163
163
|
defaultValue?: number;
|
|
164
|
+
/**
|
|
165
|
+
* Controlled span, as `[low, high]`. Passing this — or `defaultRange` — gives
|
|
166
|
+
* the slider two thumbs and fills between them instead of from the start.
|
|
167
|
+
*/
|
|
168
|
+
range?: [number, number];
|
|
169
|
+
/** Starting span when uncontrolled, as `[low, high]`. */
|
|
170
|
+
defaultRange?: [number, number];
|
|
164
171
|
/** Lower bound. */
|
|
165
172
|
min?: number;
|
|
166
173
|
/** Upper bound. */
|
|
167
174
|
max?: number;
|
|
168
175
|
/** Snap granularity. The value is always a multiple of `step` from `min`. */
|
|
169
176
|
step?: number;
|
|
177
|
+
/**
|
|
178
|
+
* How many steps the two thumbs must stay apart on a range slider. `0` lets
|
|
179
|
+
* them meet; `1` keeps a step between them, so the span is never empty.
|
|
180
|
+
*/
|
|
181
|
+
minStepsBetweenThumbs?: number;
|
|
170
182
|
/** Fires on every change while dragging — cheap updates only. */
|
|
171
183
|
onValueChange?: (value: number) => void;
|
|
172
184
|
/** Fires once when the gesture ends — the place for expensive side effects. */
|
|
173
185
|
onValueCommit?: (value: number) => void;
|
|
186
|
+
/** The range equivalent of `onValueChange`. Only fires on a range slider. */
|
|
187
|
+
onRangeChange?: (range: [number, number]) => void;
|
|
188
|
+
/** The range equivalent of `onValueCommit`. Only fires on a range slider. */
|
|
189
|
+
onRangeCommit?: (range: [number, number]) => void;
|
|
174
190
|
disabled?: boolean;
|
|
175
191
|
/**
|
|
176
192
|
* Render the platform's own slider instead of this one. Requires the
|
|
@@ -179,6 +195,9 @@ export interface SliderProps extends Omit<SliderVariantProps, 'disabled'> {
|
|
|
179
195
|
* **Theme tokens do not apply** — the platform draws the control, so
|
|
180
196
|
* `color`, `size` and the slot classNames are ignored. `label` and
|
|
181
197
|
* `showValue` still render the caption row above it, since that is ours.
|
|
198
|
+
*
|
|
199
|
+
* **Ignored on a range slider.** Neither platform ships a two-thumb slider,
|
|
200
|
+
* so a range draws ours rather than quietly losing a thumb.
|
|
182
201
|
*/
|
|
183
202
|
native?: boolean;
|
|
184
203
|
/** Caption above the track. Also becomes the accessibility label. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/slider/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/slider/index.tsx"],"names":[],"mappings":"AA8BA,OAAO,EACL,IAAI,EAGL,MAAM,cAAc,CAAC;AAQtB,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAmB1D,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAsClB,CAAC;AAKH,KAAK,kBAAkB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAE9D,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iFAAiF;IACjF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzB,yDAAyD;IACzD,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,mBAAmB;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mBAAmB;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,iEAAiE;IACjE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,+EAA+E;IAC/E,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,6EAA6E;IAC7E,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAClD,6EAA6E;IAC7E,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yCAAyC;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4CAA4C;IAC5C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6CAA6C;IAC7C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAeD,eAAO,MAAM,MAAM,8FAqclB,CAAC"}
|
|
@@ -35,9 +35,19 @@ export interface TabsProps extends ViewProps {
|
|
|
35
35
|
* Costs the render of every panel up front.
|
|
36
36
|
*/
|
|
37
37
|
keepMounted?: boolean;
|
|
38
|
+
/**
|
|
39
|
+
* Move between tabs by dragging sideways on the panel, as well as by
|
|
40
|
+
* pressing the triggers.
|
|
41
|
+
*
|
|
42
|
+
* Off by default, because a panel is allowed to contain something that
|
|
43
|
+
* already wants a horizontal drag — a carousel, a slider, a row that swipes
|
|
44
|
+
* open — and the two cannot both have it. Turn it on for panels of ordinary
|
|
45
|
+
* scrolling content, where it is the gesture people try first.
|
|
46
|
+
*/
|
|
47
|
+
swipeable?: boolean;
|
|
38
48
|
children: ReactNode;
|
|
39
49
|
}
|
|
40
|
-
declare function TabsRoot({ className, value, onValueChange, defaultValue, variant, keepMounted, children, ...props }: TabsProps): import("react").JSX.Element;
|
|
50
|
+
declare function TabsRoot({ className, value, onValueChange, defaultValue, variant, keepMounted, swipeable, children, ...props }: TabsProps): import("react").JSX.Element;
|
|
41
51
|
export interface TabsListProps extends ViewProps {
|
|
42
52
|
className?: string;
|
|
43
53
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/tabs/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/tabs/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAyDtB,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,MAAM,CAAC;AAuG7D,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,KAAK,EACL,aAAa,EACb,YAAY,EACZ,OAAqB,EACrB,WAAmB,EACnB,SAAiB,EACjB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,SAAS,+BA+GX;AAqCD,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,UAAkB,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,+BA2CrF;AAED,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,KAAK,EACL,IAAI,EACJ,KAAK,EACL,QAAgB,EAChB,QAAQ,GACT,EAAE,gBAAgB,+BA6ClB;AAED,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,sCAqIrF;AAED,eAAO,MAAM,IAAI;;;;CAIf,CAAC"}
|