@memobit/libs 1.0.61 → 1.0.63
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/index.css +1 -1
- package/dist/index.d.ts +434 -3
- package/dist/index.esm.js +7137 -5910
- package/dist/version.json +4 -4
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -13,6 +13,7 @@ import { ReactElement } from 'react';
|
|
|
13
13
|
import { ReactNode } from 'react';
|
|
14
14
|
import { ReactPortal } from 'react';
|
|
15
15
|
import { RefAttributes } from 'react';
|
|
16
|
+
import { TouchEvent as TouchEvent_2 } from 'react';
|
|
16
17
|
|
|
17
18
|
export declare const Accordion: default_2.FC<AccordionProps>;
|
|
18
19
|
|
|
@@ -73,6 +74,32 @@ export declare interface AnalogClockProps {
|
|
|
73
74
|
className?: string;
|
|
74
75
|
}
|
|
75
76
|
|
|
77
|
+
export declare const AngleSlider: FC<AngleSliderProps>;
|
|
78
|
+
|
|
79
|
+
export declare interface AngleSliderProps {
|
|
80
|
+
disabled?: boolean;
|
|
81
|
+
/** Text under the dial. Replaced by the degree readout when `showValue` is on. */
|
|
82
|
+
label?: string;
|
|
83
|
+
/** Highest angle the dial accepts, in degrees. Defaults to a full turn. */
|
|
84
|
+
max?: number;
|
|
85
|
+
/** Lowest angle the dial accepts, in degrees. */
|
|
86
|
+
min?: number;
|
|
87
|
+
onChange: (value: number) => void;
|
|
88
|
+
/** Diameter in pixels. */
|
|
89
|
+
size?: number;
|
|
90
|
+
/** Rounding applied to every change, in degrees. */
|
|
91
|
+
step?: number;
|
|
92
|
+
/** Draws a tick every N degrees. `0` turns the ticks off. */
|
|
93
|
+
tickStep?: number;
|
|
94
|
+
/** Degrees moved per arrow key press. Defaults to `step`. */
|
|
95
|
+
keyboardStep?: number;
|
|
96
|
+
showValue?: boolean;
|
|
97
|
+
value: number;
|
|
98
|
+
variant?: AngleSliderVariant;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
export declare type AngleSliderVariant = 'accent' | 'info' | 'success' | 'warning' | 'danger';
|
|
102
|
+
|
|
76
103
|
export declare const APP_DATE_FORMAT = "DD MMM YYYY";
|
|
77
104
|
|
|
78
105
|
export declare const APP_DATE_TIME_FORMAT = "DD MMM YYYY HH:mm";
|
|
@@ -187,6 +214,35 @@ export declare interface BannerProps {
|
|
|
187
214
|
|
|
188
215
|
export declare type BannerVariant = 'default' | 'success' | 'info' | 'warning' | 'danger';
|
|
189
216
|
|
|
217
|
+
export declare const Blockquote: FC<BlockquoteProps>;
|
|
218
|
+
|
|
219
|
+
export declare type BlockquoteAppearance = 'bar' | 'card' | 'plain' | 'pull';
|
|
220
|
+
|
|
221
|
+
export declare interface BlockquoteProps {
|
|
222
|
+
/** Centres a `pull` quote; the other appearances read better left-aligned. */
|
|
223
|
+
align?: 'left' | 'center';
|
|
224
|
+
/** How the quote is framed: a left rule, a filled card, bare text, or a large pull quote. */
|
|
225
|
+
appearance?: BlockquoteAppearance;
|
|
226
|
+
/** Who said it. */
|
|
227
|
+
author?: string;
|
|
228
|
+
children: ReactNode;
|
|
229
|
+
className?: string;
|
|
230
|
+
/** Turns the source into a link. */
|
|
231
|
+
href?: string;
|
|
232
|
+
/** Small icon before the quote — handy for flagging a note or a warning. */
|
|
233
|
+
icon?: IconName;
|
|
234
|
+
/** Draws a large decorative quote glyph behind the text. */
|
|
235
|
+
showQuoteMark?: boolean;
|
|
236
|
+
size?: BlockquoteSize;
|
|
237
|
+
/** Where it came from: a book, an article, a ticket. Shown after the author. */
|
|
238
|
+
source?: string;
|
|
239
|
+
variant?: BlockquoteVariant;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
export declare type BlockquoteSize = 'sm' | 'md' | 'lg';
|
|
243
|
+
|
|
244
|
+
export declare type BlockquoteVariant = 'default' | 'accent' | 'info' | 'success' | 'warning' | 'danger';
|
|
245
|
+
|
|
190
246
|
export declare const BMI: default_2.FC<BMIProps>;
|
|
191
247
|
|
|
192
248
|
declare interface BMIProps {
|
|
@@ -304,6 +360,12 @@ export declare const calculateTimelineMarkers: <T extends TimelineMarkersItem>(i
|
|
|
304
360
|
|
|
305
361
|
export declare const Calendar: default_2.FC<CalendarProps>;
|
|
306
362
|
|
|
363
|
+
/** Half-open [start, end): with start 9 and end 18, 17:00 is active and 18:00 is not. */
|
|
364
|
+
export declare interface CalendarActiveHours {
|
|
365
|
+
start: number;
|
|
366
|
+
end: number;
|
|
367
|
+
}
|
|
368
|
+
|
|
307
369
|
export declare interface CalendarDateRange {
|
|
308
370
|
start: Date;
|
|
309
371
|
end: Date;
|
|
@@ -439,6 +501,8 @@ export declare type ChipSize = 'xsmall' | 'small' | 'medium' | 'large';
|
|
|
439
501
|
|
|
440
502
|
export declare type ChipVariant = 'plain' | 'default' | 'success' | 'info' | 'warning' | 'danger';
|
|
441
503
|
|
|
504
|
+
export declare const Col: FC<ColProps>;
|
|
505
|
+
|
|
442
506
|
export declare const CollapsibleSection: default_2.FC<CollapsibleSectionProps>;
|
|
443
507
|
|
|
444
508
|
declare interface CollapsibleSectionProps {
|
|
@@ -468,6 +532,20 @@ export declare interface ColorPickerProps {
|
|
|
468
532
|
onChange?: (hex: string) => void;
|
|
469
533
|
}
|
|
470
534
|
|
|
535
|
+
export declare interface ColProps {
|
|
536
|
+
children: ReactNode;
|
|
537
|
+
className?: string;
|
|
538
|
+
/** Column count this cell occupies on desktop. */
|
|
539
|
+
span?: ColSpan;
|
|
540
|
+
/** Column count on mobile (<= 768px). Defaults to filling the row. */
|
|
541
|
+
spanMobile?: ColSpan;
|
|
542
|
+
/** Column count on tablet (769px - 1024px). Defaults to `span`, clamped by the parent. */
|
|
543
|
+
spanTablet?: ColSpan;
|
|
544
|
+
style?: CSSProperties;
|
|
545
|
+
}
|
|
546
|
+
|
|
547
|
+
export declare type ColSpan = GridColumns;
|
|
548
|
+
|
|
471
549
|
export declare interface CommandItem {
|
|
472
550
|
id: string;
|
|
473
551
|
label: string;
|
|
@@ -656,6 +734,12 @@ export declare interface ControlPanelFilter {
|
|
|
656
734
|
* from the filter's value when omitted (selected option labels, the date
|
|
657
735
|
* range, the typed text, ...). Pass `''` to hide the preview. */
|
|
658
736
|
summary?: string;
|
|
737
|
+
/** Flows the option rows onto shared lines instead of stacking one per row,
|
|
738
|
+
* each sized to its own content. Worth it when the labels are short and of a
|
|
739
|
+
* predictable width — emoji, colours, single digits — where a row apiece turns
|
|
740
|
+
* a dozen options into a scroll. Defaults to stacked. Honored by the option
|
|
741
|
+
* list filters (`radio`, `boolean`, and a short single-select `dropdown`). */
|
|
742
|
+
inline?: boolean;
|
|
659
743
|
}
|
|
660
744
|
|
|
661
745
|
export declare interface ControlPanelFilterChangeEvent {
|
|
@@ -1081,6 +1165,59 @@ export declare interface DateRangePreset {
|
|
|
1081
1165
|
days: number;
|
|
1082
1166
|
}
|
|
1083
1167
|
|
|
1168
|
+
/**
|
|
1169
|
+
* One day laid out against the clock, in a modal.
|
|
1170
|
+
*
|
|
1171
|
+
* A month cell can only carry a chip or three before the rest hide behind "+N more", and
|
|
1172
|
+
* those chips are too small to aim at on a phone. This is the way into a busy day: events
|
|
1173
|
+
* sit at the hour they actually happen, overlapping ones split into lanes, and the empty
|
|
1174
|
+
* stretches are themselves the target for adding something at that time.
|
|
1175
|
+
*/
|
|
1176
|
+
export declare function DayAgenda<T>({ activeHours, addLabel, className, date, dayEndHour, dayStartHour, defaultDurationMinutes, emptyLabel, events, hourHeight, isOpen, onAdd, onClose, onDateChange, onEventClick, renderEvent, }: DayAgendaProps<T>): JSX.Element;
|
|
1177
|
+
|
|
1178
|
+
export declare interface DayAgendaProps<T = unknown> {
|
|
1179
|
+
/** The day to lay out. Only the date part is read. */
|
|
1180
|
+
date: Date;
|
|
1181
|
+
/**
|
|
1182
|
+
* The same array the calendar is given — the day's events are picked out here, so the
|
|
1183
|
+
* caller never has to keep a second, pre-filtered copy in sync.
|
|
1184
|
+
*/
|
|
1185
|
+
events: CalendarEvent<T>[];
|
|
1186
|
+
isOpen: boolean;
|
|
1187
|
+
onClose: () => void;
|
|
1188
|
+
/**
|
|
1189
|
+
* Enables swiping the grid left or right to step a day. Without it the modal shows
|
|
1190
|
+
* only the day it was opened on — which is fine for a one-off, but on a phone the
|
|
1191
|
+
* neighbouring day is usually the next thing wanted.
|
|
1192
|
+
*/
|
|
1193
|
+
onDateChange?: (date: Date) => void;
|
|
1194
|
+
onEventClick?: (event: CalendarEvent<T>) => void;
|
|
1195
|
+
/**
|
|
1196
|
+
* Fires with the hour slot that was clicked, so something added from an empty stretch
|
|
1197
|
+
* starts at the time pointed at rather than at midnight. Also backs the footer button,
|
|
1198
|
+
* which passes the day itself for an entry with no particular time.
|
|
1199
|
+
*/
|
|
1200
|
+
onAdd?: (date: Date) => void;
|
|
1201
|
+
addLabel?: string;
|
|
1202
|
+
/** Replaces a chip's contents. */
|
|
1203
|
+
renderEvent?: (event: CalendarEvent<T>) => ReactNode;
|
|
1204
|
+
emptyLabel?: string;
|
|
1205
|
+
/** First and last hour rendered. */
|
|
1206
|
+
dayStartHour?: number;
|
|
1207
|
+
dayEndHour?: number;
|
|
1208
|
+
/**
|
|
1209
|
+
* The hours that matter — working hours, opening hours. Everything outside the band
|
|
1210
|
+
* recedes, so the part of the day worth reading is found without counting rows. It
|
|
1211
|
+
* trims nothing, unlike `dayStartHour`/`dayEndHour`.
|
|
1212
|
+
*/
|
|
1213
|
+
activeHours?: CalendarActiveHours;
|
|
1214
|
+
/** Height of one hour row, in pixels. */
|
|
1215
|
+
hourHeight?: number;
|
|
1216
|
+
/** Assumed length of a timed event with no `end`. */
|
|
1217
|
+
defaultDurationMinutes?: number;
|
|
1218
|
+
className?: string;
|
|
1219
|
+
}
|
|
1220
|
+
|
|
1084
1221
|
declare type DiffLang = 'javascript' | 'typescript' | 'jsx' | 'tsx' | 'css' | 'scss' | 'html' | 'json' | 'python' | 'bash' | 'plaintext';
|
|
1085
1222
|
|
|
1086
1223
|
declare type DiffMode = 'split' | 'inline';
|
|
@@ -1263,7 +1400,7 @@ declare interface ErrorBoundaryState {
|
|
|
1263
1400
|
error: Error | null;
|
|
1264
1401
|
}
|
|
1265
1402
|
|
|
1266
|
-
export declare function EventCalendar<T>({ className, date, dayEndHour, dayStartHour, defaultDurationMinutes, emptyLabel, events, firstDayOfWeek, headerExtra, hourHeight, maxEventsPerDay, onDateChange, onDayClick, onEventClick, onEventDrop, onViewChange, renderEvent, showHeader, view, }: EventCalendarProps<T>): JSX.Element;
|
|
1403
|
+
export declare function EventCalendar<T>({ activeHours, className, date, dayAgenda, dayEndHour, dayStartHour, defaultDurationMinutes, emptyLabel, events, firstDayOfWeek, headerExtra, hourHeight, maxEventsPerDay, onDateChange, onDayClick, onEventClick, onEventDrop, onViewChange, renderEvent, showHeader, showWeekNumbers, swipeNavigation, view, }: EventCalendarProps<T>): JSX.Element;
|
|
1267
1404
|
|
|
1268
1405
|
export declare interface EventCalendarProps<T = unknown> {
|
|
1269
1406
|
events: CalendarEvent<T>[];
|
|
@@ -1274,6 +1411,14 @@ export declare interface EventCalendarProps<T = unknown> {
|
|
|
1274
1411
|
date?: Date;
|
|
1275
1412
|
onDateChange?: (date: Date) => void;
|
|
1276
1413
|
firstDayOfWeek?: 0 | 1;
|
|
1414
|
+
/** Adds a leading ISO week-number column to the month grid. The week view names its own period, so it needs none. */
|
|
1415
|
+
showWeekNumbers?: boolean;
|
|
1416
|
+
/**
|
|
1417
|
+
* Swiping the grid left or right pages to the next or previous period — the month in
|
|
1418
|
+
* month view, the week in week view. Touch only, so it costs a desktop nothing. Set
|
|
1419
|
+
* false where a horizontal drag already means something else.
|
|
1420
|
+
*/
|
|
1421
|
+
swipeNavigation?: boolean;
|
|
1277
1422
|
onEventClick?: (event: CalendarEvent<T>) => void;
|
|
1278
1423
|
/** Fires on the empty part of a day cell (month) or an hour slot (week). */
|
|
1279
1424
|
onDayClick?: (date: Date) => void;
|
|
@@ -1285,12 +1430,26 @@ export declare interface EventCalendarProps<T = unknown> {
|
|
|
1285
1430
|
renderEvent?: (event: CalendarEvent<T>) => ReactNode;
|
|
1286
1431
|
/** Chips shown in a month cell before the rest collapse behind "+N more". */
|
|
1287
1432
|
maxEventsPerDay?: number;
|
|
1433
|
+
/**
|
|
1434
|
+
* Routes a chip click, a "+N more" and a day number through a `DayAgenda` listing that
|
|
1435
|
+
* day instead of firing `onEventClick` straight away. `onEventClick` then fires from a
|
|
1436
|
+
* row inside the agenda, and `onDayClick` becomes its Add action. Aiming at a 16px chip
|
|
1437
|
+
* is the part that does not survive a phone, and a busy cell hides its events anyway.
|
|
1438
|
+
*/
|
|
1439
|
+
dayAgenda?: boolean;
|
|
1288
1440
|
showHeader?: boolean;
|
|
1289
1441
|
/** Extra controls rendered in the header, between the title and the view switch. */
|
|
1290
1442
|
headerExtra?: ReactNode;
|
|
1291
1443
|
/** First and last hour rendered by the week view. */
|
|
1292
1444
|
dayStartHour?: number;
|
|
1293
1445
|
dayEndHour?: number;
|
|
1446
|
+
/**
|
|
1447
|
+
* The hours that matter — working hours, opening hours. Everything outside the band
|
|
1448
|
+
* recedes, so the part of the day worth reading is found without counting rows. Unlike
|
|
1449
|
+
* `dayStartHour`/`dayEndHour` this trims nothing: a 21:00 event still shows, just
|
|
1450
|
+
* against a quieter background. Omit to treat every hour alike.
|
|
1451
|
+
*/
|
|
1452
|
+
activeHours?: CalendarActiveHours;
|
|
1294
1453
|
/** Height of one hour row in the week view, in pixels. */
|
|
1295
1454
|
hourHeight?: number;
|
|
1296
1455
|
/** Assumed length of a timed event with no `end`. */
|
|
@@ -1338,6 +1497,46 @@ declare interface FloatButtonProps {
|
|
|
1338
1497
|
actions: FloatButtonAction[];
|
|
1339
1498
|
}
|
|
1340
1499
|
|
|
1500
|
+
export declare const FloatingWindow: FC<FloatingWindowProps>;
|
|
1501
|
+
|
|
1502
|
+
export declare interface FloatingWindowPosition {
|
|
1503
|
+
x: number;
|
|
1504
|
+
y: number;
|
|
1505
|
+
}
|
|
1506
|
+
|
|
1507
|
+
export declare interface FloatingWindowProps {
|
|
1508
|
+
children: ReactNode;
|
|
1509
|
+
className?: string;
|
|
1510
|
+
/** Escape closes the window. Off by default — a floating window is not modal. */
|
|
1511
|
+
closeOnEscape?: boolean;
|
|
1512
|
+
/** Opening position in viewport pixels. Centred on the viewport when omitted. */
|
|
1513
|
+
defaultPosition?: FloatingWindowPosition;
|
|
1514
|
+
defaultSize?: FloatingWindowSize;
|
|
1515
|
+
/** Pinned strip along the bottom of the window. */
|
|
1516
|
+
footer?: ReactNode;
|
|
1517
|
+
isOpen: boolean;
|
|
1518
|
+
/** Shows the collapse control. */
|
|
1519
|
+
minimizable?: boolean;
|
|
1520
|
+
minHeight?: number;
|
|
1521
|
+
minWidth?: number;
|
|
1522
|
+
onClose: () => void;
|
|
1523
|
+
/** Reports every settled move and resize, for callers that persist the geometry. */
|
|
1524
|
+
onGeometryChange?: (geometry: FloatingWindowPosition & FloatingWindowSize) => void;
|
|
1525
|
+
/** Shows the maximize control and the edge handles. */
|
|
1526
|
+
resizable?: boolean;
|
|
1527
|
+
title?: string;
|
|
1528
|
+
titleIcon?: IconName;
|
|
1529
|
+
usePortal?: boolean;
|
|
1530
|
+
zIndex?: number;
|
|
1531
|
+
}
|
|
1532
|
+
|
|
1533
|
+
export declare type FloatingWindowResizeDirection = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
|
|
1534
|
+
|
|
1535
|
+
export declare interface FloatingWindowSize {
|
|
1536
|
+
height: number;
|
|
1537
|
+
width: number;
|
|
1538
|
+
}
|
|
1539
|
+
|
|
1341
1540
|
export declare const foldDiacritics: (input: string) => string;
|
|
1342
1541
|
|
|
1343
1542
|
export declare interface FolderBrowserEntry {
|
|
@@ -1414,6 +1613,13 @@ export declare const getIndicatorColor: (bmi: number, ranges: BMIRange[]) => str
|
|
|
1414
1613
|
|
|
1415
1614
|
export declare const getIndicatorPosition: (bmi: number, ranges: BMIRange[]) => number;
|
|
1416
1615
|
|
|
1616
|
+
/**
|
|
1617
|
+
* ISO-8601 week number (1-53). Weeks run Monday to Sunday and week 1 is the one
|
|
1618
|
+
* holding the first Thursday of the year, which is why the date is nudged to the
|
|
1619
|
+
* Thursday of its own week before the year is read.
|
|
1620
|
+
*/
|
|
1621
|
+
export declare const getIsoWeek: (date: Date) => number;
|
|
1622
|
+
|
|
1417
1623
|
/**
|
|
1418
1624
|
* Generates a matrix of dates for calendar display
|
|
1419
1625
|
* Returns a 2D array where each sub-array represents a week
|
|
@@ -1437,6 +1643,41 @@ export declare const getThemeConfig: (themeValue: string) => ThemeConfig | undef
|
|
|
1437
1643
|
|
|
1438
1644
|
export declare const getTodayDateString: () => string;
|
|
1439
1645
|
|
|
1646
|
+
export declare const Grid: FC<GridProps>;
|
|
1647
|
+
|
|
1648
|
+
export declare type GridAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
|
|
1649
|
+
|
|
1650
|
+
export declare type GridColumns = 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
|
|
1651
|
+
|
|
1652
|
+
export declare type GridGap = '0' | '2' | '4' | '6' | '8' | '12' | '16' | '20' | '24' | '32' | '40' | '48';
|
|
1653
|
+
|
|
1654
|
+
export declare type GridJustify = 'start' | 'center' | 'end' | 'space-between' | 'space-around';
|
|
1655
|
+
|
|
1656
|
+
export declare interface GridProps {
|
|
1657
|
+
/** Vertical alignment of the items inside each row. */
|
|
1658
|
+
align?: GridAlign;
|
|
1659
|
+
children: ReactNode;
|
|
1660
|
+
className?: string;
|
|
1661
|
+
/** Columns from the desktop breakpoint up (> 1024px). */
|
|
1662
|
+
cols?: GridColumns;
|
|
1663
|
+
/** Columns on mobile (<= 768px). Defaults to 1 so content stacks. */
|
|
1664
|
+
colsMobile?: GridColumns;
|
|
1665
|
+
/** Columns on tablet (769px - 1024px). Defaults to `cols` capped at 2. */
|
|
1666
|
+
colsTablet?: GridColumns;
|
|
1667
|
+
/** Spacing token used between columns, and between rows unless `rowGap` overrides it. */
|
|
1668
|
+
gap?: GridGap;
|
|
1669
|
+
/** Horizontal distribution of a partially filled row. */
|
|
1670
|
+
justify?: GridJustify;
|
|
1671
|
+
/**
|
|
1672
|
+
* Switches to a fluid track: every child takes at least this many pixels and rows wrap on
|
|
1673
|
+
* their own. `cols` and the responsive overrides are ignored while this is set.
|
|
1674
|
+
*/
|
|
1675
|
+
minColWidth?: number;
|
|
1676
|
+
/** Row spacing token, when rows should breathe differently from columns. */
|
|
1677
|
+
rowGap?: GridGap;
|
|
1678
|
+
style?: CSSProperties;
|
|
1679
|
+
}
|
|
1680
|
+
|
|
1440
1681
|
export declare function highlightText(text: string, searchTerm: string): ReactNode;
|
|
1441
1682
|
|
|
1442
1683
|
/**
|
|
@@ -1691,6 +1932,32 @@ declare interface InputPhoneProps {
|
|
|
1691
1932
|
value?: string;
|
|
1692
1933
|
}
|
|
1693
1934
|
|
|
1935
|
+
export declare const InputPIN: FC<InputPINProps>;
|
|
1936
|
+
|
|
1937
|
+
export declare interface InputPINProps {
|
|
1938
|
+
autoFocus?: boolean;
|
|
1939
|
+
disabled?: boolean;
|
|
1940
|
+
error?: string;
|
|
1941
|
+
id?: string;
|
|
1942
|
+
label?: string;
|
|
1943
|
+
/** Number of cells. */
|
|
1944
|
+
length?: number;
|
|
1945
|
+
/** Renders a gap after this many cells, the way grouped codes are printed. */
|
|
1946
|
+
groupSize?: number;
|
|
1947
|
+
/** Fired on every edit with the code so far, shorter than `length` while incomplete. */
|
|
1948
|
+
onChange: (value: string) => void;
|
|
1949
|
+
/** Fired once the last cell is filled, with the finished code. */
|
|
1950
|
+
onComplete?: (value: string) => void;
|
|
1951
|
+
/** Masks the characters, for a PIN rather than a one-time code. */
|
|
1952
|
+
secret?: boolean;
|
|
1953
|
+
success?: string;
|
|
1954
|
+
/** `numeric` accepts digits only and asks phones for the number pad. */
|
|
1955
|
+
type?: InputPINType;
|
|
1956
|
+
value: string;
|
|
1957
|
+
}
|
|
1958
|
+
|
|
1959
|
+
export declare type InputPINType = 'numeric' | 'alphanumeric';
|
|
1960
|
+
|
|
1694
1961
|
export declare const InputSearch: ForwardRefExoticComponent<InputSearchProps & RefAttributes<HTMLInputElement>>;
|
|
1695
1962
|
|
|
1696
1963
|
export declare interface InputSearchProps {
|
|
@@ -2272,12 +2539,49 @@ export declare interface RadioProps {
|
|
|
2272
2539
|
className?: string;
|
|
2273
2540
|
}
|
|
2274
2541
|
|
|
2542
|
+
export declare const RangeSlider: FC<RangeSliderProps>;
|
|
2543
|
+
|
|
2544
|
+
export declare interface RangeSliderProps {
|
|
2545
|
+
disabled?: boolean;
|
|
2546
|
+
/** Renders each readout and tick label — money, units, dates, whatever the range means. */
|
|
2547
|
+
formatValue?: (value: number) => string;
|
|
2548
|
+
label?: string;
|
|
2549
|
+
max?: number;
|
|
2550
|
+
min?: number;
|
|
2551
|
+
/** Smallest gap the two thumbs may be pushed to. Defaults to one `step`. */
|
|
2552
|
+
minDistance?: number;
|
|
2553
|
+
onChange: (value: RangeSliderValue) => void;
|
|
2554
|
+
/** Fired once when a drag or key press settles — the place to kick off a query. */
|
|
2555
|
+
onChangeEnd?: (value: RangeSliderValue) => void;
|
|
2556
|
+
showValues?: boolean;
|
|
2557
|
+
step?: number;
|
|
2558
|
+
/** Renders a thinner track and smaller thumbs. */
|
|
2559
|
+
thin?: boolean;
|
|
2560
|
+
/** Draws a labelled tick every N units. `0` turns the ticks off. */
|
|
2561
|
+
tickStep?: number;
|
|
2562
|
+
value: RangeSliderValue;
|
|
2563
|
+
variant?: RangeSliderVariant;
|
|
2564
|
+
}
|
|
2565
|
+
|
|
2566
|
+
export declare type RangeSliderValue = [number, number];
|
|
2567
|
+
|
|
2568
|
+
export declare type RangeSliderVariant = 'accent' | 'info' | 'success' | 'warning' | 'danger';
|
|
2569
|
+
|
|
2275
2570
|
export declare const Rating: FC<RatingProps>;
|
|
2276
2571
|
|
|
2277
|
-
declare type
|
|
2572
|
+
export declare type RatingFilled = 'full' | 'half' | 'empty';
|
|
2573
|
+
|
|
2574
|
+
export declare type RatingIconType = 'star' | 'bullet' | 'bar' | 'emoji';
|
|
2278
2575
|
|
|
2279
2576
|
declare interface RatingProps {
|
|
2280
2577
|
align?: 'left' | 'right' | 'space-between';
|
|
2578
|
+
/**
|
|
2579
|
+
* Emoji only: tint the chosen face by where it sits on the scale — red at the sad end,
|
|
2580
|
+
* amber in the middle, green at the happy end — instead of using `variant` throughout.
|
|
2581
|
+
*/
|
|
2582
|
+
emojiColorByMood?: boolean;
|
|
2583
|
+
/** Emoji only: pixel size of each face. Faces need more room than a star to stay readable. */
|
|
2584
|
+
emojiSize?: number;
|
|
2281
2585
|
icon?: RatingIconType;
|
|
2282
2586
|
maxRate?: number;
|
|
2283
2587
|
onHover?: (value: number) => void;
|
|
@@ -2290,7 +2594,7 @@ declare interface RatingProps {
|
|
|
2290
2594
|
variant?: RatingVariant;
|
|
2291
2595
|
}
|
|
2292
2596
|
|
|
2293
|
-
declare type RatingVariant = 'success' | 'info' | 'warning' | 'danger';
|
|
2597
|
+
export declare type RatingVariant = 'success' | 'info' | 'warning' | 'danger';
|
|
2294
2598
|
|
|
2295
2599
|
export declare const RichTextEditor: ({ advanced, error, format, id, label, onBlur, onChange, placeholder, required, value, }: RichTextEditorProps) => JSX.Element;
|
|
2296
2600
|
|
|
@@ -2307,6 +2611,33 @@ declare interface RichTextEditorProps {
|
|
|
2307
2611
|
value?: string;
|
|
2308
2612
|
}
|
|
2309
2613
|
|
|
2614
|
+
export declare const RollingNumber: FC<RollingNumberProps>;
|
|
2615
|
+
|
|
2616
|
+
export declare type RollingNumberDirection = 'up' | 'down' | 'none';
|
|
2617
|
+
|
|
2618
|
+
export declare interface RollingNumberProps {
|
|
2619
|
+
className?: string;
|
|
2620
|
+
/** Tint the readout green when the value rose and red when it fell, overriding `variant`. */
|
|
2621
|
+
colorByDirection?: boolean;
|
|
2622
|
+
decimals?: number;
|
|
2623
|
+
decimalSeparator?: string;
|
|
2624
|
+
/** Roll duration in milliseconds. */
|
|
2625
|
+
duration?: number;
|
|
2626
|
+
/** Thousands separator. Pass an empty string to switch grouping off. */
|
|
2627
|
+
groupSeparator?: string;
|
|
2628
|
+
prefix?: string;
|
|
2629
|
+
size?: RollingNumberSize;
|
|
2630
|
+
/** Delay added per digit so the columns land one after another, in milliseconds. */
|
|
2631
|
+
stagger?: number;
|
|
2632
|
+
suffix?: string;
|
|
2633
|
+
value: number;
|
|
2634
|
+
variant?: RollingNumberVariant;
|
|
2635
|
+
}
|
|
2636
|
+
|
|
2637
|
+
export declare type RollingNumberSize = 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
|
|
2638
|
+
|
|
2639
|
+
export declare type RollingNumberVariant = 'default' | 'accent' | 'info' | 'success' | 'warning' | 'danger';
|
|
2640
|
+
|
|
2310
2641
|
export declare interface ScrollInfo {
|
|
2311
2642
|
scrollTop: number;
|
|
2312
2643
|
scrollHeight: number;
|
|
@@ -2482,6 +2813,37 @@ declare interface SplitPanelProps {
|
|
|
2482
2813
|
className?: string;
|
|
2483
2814
|
}
|
|
2484
2815
|
|
|
2816
|
+
export declare const Splitter: FC<SplitterProps>;
|
|
2817
|
+
|
|
2818
|
+
export declare type SplitterOrientation = 'horizontal' | 'vertical';
|
|
2819
|
+
|
|
2820
|
+
export declare interface SplitterPane {
|
|
2821
|
+
content: ReactNode;
|
|
2822
|
+
/** Stable identity for the pane — also used as the React key. */
|
|
2823
|
+
id: string;
|
|
2824
|
+
/** Smallest share this pane may be dragged to, in percent. Defaults to 10. */
|
|
2825
|
+
minSize?: number;
|
|
2826
|
+
/** Starting share of the container, in percent. Omitted panes split what is left evenly. */
|
|
2827
|
+
size?: number;
|
|
2828
|
+
}
|
|
2829
|
+
|
|
2830
|
+
export declare interface SplitterProps {
|
|
2831
|
+
className?: string;
|
|
2832
|
+
/** Dragging a pane below half its minimum snaps it shut instead of stopping at the minimum. */
|
|
2833
|
+
collapsible?: boolean;
|
|
2834
|
+
/** Thickness of the drag handles in pixels. */
|
|
2835
|
+
gutterSize?: number;
|
|
2836
|
+
/** Percent moved per arrow key press on a focused gutter. */
|
|
2837
|
+
keyboardStep?: number;
|
|
2838
|
+
/** Fired with the full list of pane sizes (percent) whenever a drag or key press settles. */
|
|
2839
|
+
onResize?: (sizes: number[]) => void;
|
|
2840
|
+
/** `horizontal` lays the panes out side by side; `vertical` stacks them. */
|
|
2841
|
+
orientation?: SplitterOrientation;
|
|
2842
|
+
panes: SplitterPane[];
|
|
2843
|
+
/** Double-clicking a gutter restores the sizes the Splitter started with. */
|
|
2844
|
+
resetOnDoubleClick?: boolean;
|
|
2845
|
+
}
|
|
2846
|
+
|
|
2485
2847
|
export declare const StackedBar: ({ animated, height, normalize, orientation, segments, separators, showLabels, showPercentage, thin, width, }: StackedBarProps) => JSX.Element;
|
|
2486
2848
|
|
|
2487
2849
|
export declare type StackedBarOrientation = 'horizontal' | 'vertical';
|
|
@@ -2583,6 +2945,12 @@ declare interface SuggestionsListProps {
|
|
|
2583
2945
|
onRowClick?: (item: SuggestionsListElement) => void;
|
|
2584
2946
|
}
|
|
2585
2947
|
|
|
2948
|
+
export declare interface SwipeHandlers {
|
|
2949
|
+
onTouchStart: (event: TouchEvent_2) => void;
|
|
2950
|
+
onTouchEnd: (event: TouchEvent_2) => void;
|
|
2951
|
+
onTouchCancel: () => void;
|
|
2952
|
+
}
|
|
2953
|
+
|
|
2586
2954
|
export declare type Theme = 'amber-meridian' | 'archive-indigo' | 'arctic-blue' | 'asphalt-code' | 'atelier-media' | 'audit-ember' | 'azure-night' | 'blossom-meadow' | 'blueprint-clay' | 'blush-market' | 'brass-chronicle' | 'carbon-velocity' | 'chalk-circuit' | 'chrono-atlas' | 'clinical-aqua' | 'cobalt-pulse' | 'citrus-vital' | 'command-slate' | 'crawler-dusk' | 'crimson-dusk' | 'cyber-forest' | 'dashdarkx' | 'ember-night' | 'emerald-ledger' | 'frost-petal' | 'garden-harvest' | 'gilded-bear' | 'graphite-shell' | 'horizon-amber' | 'horizon-drift' | 'ivory-serif' | 'lavender-mist' | 'light-blue' | 'lumen' | 'luna' | 'mesh-circuit' | 'midnight-atlas' | 'midnight-amber' | 'midnight-folio' | 'mint-meadow' | 'mintone' | 'neon-tokyo' | 'noir-marquee' | 'ocean-breeze' | 'ocean-depths' | 'orbital-night' | 'sandstone' | 'sandy-parchment' | 'screening-room' | 'signal-burst' | 'signal-clarity' | 'slate-focus' | 'slate-bazaar' | 'spectrum-vault' | 'tailwind-vue-dark' | 'terminal-phosphor' | 'terracotta-kitchen' | 'twilight-pulse' | 'vault-guard' | 'velvet-reel' | 'velvet-tome' | 'verdant-pulse' | 'vital-aurora' | 'vital-signal';
|
|
2587
2955
|
|
|
2588
2956
|
export declare const THEME_CONFIGS: ThemeConfig[];
|
|
@@ -2932,6 +3300,35 @@ export declare interface TourHudProps {
|
|
|
2932
3300
|
className?: string;
|
|
2933
3301
|
}
|
|
2934
3302
|
|
|
3303
|
+
export declare const Transition: FC<TransitionProps>;
|
|
3304
|
+
|
|
3305
|
+
export declare interface TransitionProps {
|
|
3306
|
+
/** Play the enter animation on the very first render too. */
|
|
3307
|
+
appear?: boolean;
|
|
3308
|
+
/** Element rendered around the children. */
|
|
3309
|
+
as?: TransitionTag;
|
|
3310
|
+
children: ReactNode;
|
|
3311
|
+
className?: string;
|
|
3312
|
+
/** Delay before the enter animation starts, in milliseconds. */
|
|
3313
|
+
delay?: number;
|
|
3314
|
+
/** Animation length in milliseconds. Also how long the exit is held before unmounting. */
|
|
3315
|
+
duration?: number;
|
|
3316
|
+
easing?: string;
|
|
3317
|
+
/** Keep the element mounted but hidden instead of removing it once the exit finishes. */
|
|
3318
|
+
keepMounted?: boolean;
|
|
3319
|
+
onEntered?: () => void;
|
|
3320
|
+
onExited?: () => void;
|
|
3321
|
+
/** `true` plays the enter animation; `false` plays the exit animation, then unmounts. */
|
|
3322
|
+
show: boolean;
|
|
3323
|
+
type?: TransitionType;
|
|
3324
|
+
}
|
|
3325
|
+
|
|
3326
|
+
export declare type TransitionStatus = 'unmounted' | 'entering' | 'entered' | 'exiting';
|
|
3327
|
+
|
|
3328
|
+
export declare type TransitionTag = 'div' | 'span' | 'section' | 'li';
|
|
3329
|
+
|
|
3330
|
+
export declare type TransitionType = 'fade' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'scale' | 'collapse';
|
|
3331
|
+
|
|
2935
3332
|
export declare const Tree: default_2.FC<TreeProps>;
|
|
2936
3333
|
|
|
2937
3334
|
export declare interface TreeNode {
|
|
@@ -3020,6 +3417,40 @@ export declare interface User {
|
|
|
3020
3417
|
|
|
3021
3418
|
export declare const useSidebar: () => SidebarContextValue;
|
|
3022
3419
|
|
|
3420
|
+
/**
|
|
3421
|
+
* Turns a touch drag into a direction.
|
|
3422
|
+
*
|
|
3423
|
+
* Touch only, deliberately: a mouse drag on the same element usually already means
|
|
3424
|
+
* something (selecting text, dragging an item), and a phone is where a swipe is the
|
|
3425
|
+
* natural gesture. Nothing is ever `preventDefault`ed, so the element keeps scrolling
|
|
3426
|
+
* normally and a swipe that fails the threshold costs the user nothing.
|
|
3427
|
+
*
|
|
3428
|
+
* Spread the returned handlers onto the element that should respond:
|
|
3429
|
+
*
|
|
3430
|
+
* const swipe = useSwipe({ onSwipeLeft: next, onSwipeRight: previous });
|
|
3431
|
+
* return <div {...swipe}>…</div>;
|
|
3432
|
+
*/
|
|
3433
|
+
export declare const useSwipe: ({ enabled, maxDurationMs, onSwipeDown, onSwipeLeft, onSwipeRight, onSwipeUp, restraint, threshold, }: UseSwipeOptions) => SwipeHandlers;
|
|
3434
|
+
|
|
3435
|
+
export declare interface UseSwipeOptions {
|
|
3436
|
+
onSwipeLeft?: () => void;
|
|
3437
|
+
onSwipeRight?: () => void;
|
|
3438
|
+
onSwipeUp?: () => void;
|
|
3439
|
+
onSwipeDown?: () => void;
|
|
3440
|
+
/** Distance along the swipe axis, in px, before it counts as one. */
|
|
3441
|
+
threshold?: number;
|
|
3442
|
+
/**
|
|
3443
|
+
* Allowed drift across the swipe axis, in px. This is what keeps a vertical scroll
|
|
3444
|
+
* inside a calendar grid from registering as a horizontal page turn, so it matters
|
|
3445
|
+
* most when the swiped element scrolls the other way.
|
|
3446
|
+
*/
|
|
3447
|
+
restraint?: number;
|
|
3448
|
+
/** A drag slower than this is someone reading, not swiping. */
|
|
3449
|
+
maxDurationMs?: number;
|
|
3450
|
+
/** Set false to detach without changing where the hook is called. */
|
|
3451
|
+
enabled?: boolean;
|
|
3452
|
+
}
|
|
3453
|
+
|
|
3023
3454
|
export declare const useTheme: () => ThemeContextType;
|
|
3024
3455
|
|
|
3025
3456
|
export declare const useToast: () => ToastContextValue;
|