@revolut/ui-kit-miniapp 0.2.1 → 0.3.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/package.json +6 -7
- package/types/index.d.ts +407 -25
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@revolut/ui-kit-miniapp",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"main": "",
|
|
6
6
|
"types": "types/index.d.ts",
|
|
@@ -18,14 +18,13 @@
|
|
|
18
18
|
"sideEffects": [
|
|
19
19
|
"*.css"
|
|
20
20
|
],
|
|
21
|
-
"scripts": {
|
|
22
|
-
"prebuild": "rimraf types",
|
|
23
|
-
"prepublishOnly": "pnpm run build",
|
|
24
|
-
"build": "mkdir -p types && cp ../ui-kit-miniapp/dist/index.d.ts ./types/index.d.ts"
|
|
25
|
-
},
|
|
26
21
|
"peerDependencies": {
|
|
27
22
|
"react": "^19.0.0",
|
|
28
23
|
"react-dom": "^19.0.0",
|
|
29
24
|
"react-is": "^19.0.0"
|
|
25
|
+
},
|
|
26
|
+
"scripts": {
|
|
27
|
+
"prebuild": "rimraf types",
|
|
28
|
+
"build": "mkdir -p types && cp ../ui-kit-miniapp/dist/index.d.ts ./types/index.d.ts"
|
|
30
29
|
}
|
|
31
|
-
}
|
|
30
|
+
}
|
package/types/index.d.ts
CHANGED
|
@@ -68,6 +68,7 @@ declare const DEFAULT_MESSAGES: {
|
|
|
68
68
|
readonly 'action.open-menu': "Open menu";
|
|
69
69
|
readonly 'action.open-filters': "Open filters";
|
|
70
70
|
readonly 'label.apps': "Apps";
|
|
71
|
+
readonly 'label.all-apps': "All apps";
|
|
71
72
|
readonly 'label.notifications': "Notifications";
|
|
72
73
|
readonly 'label.accounts': "Accounts";
|
|
73
74
|
readonly 'label.profile': "Profile";
|
|
@@ -1601,13 +1602,13 @@ interface SpaceProps {
|
|
|
1601
1602
|
}
|
|
1602
1603
|
|
|
1603
1604
|
declare const sprinkles: ((props: {
|
|
1604
|
-
display?: "
|
|
1605
|
-
all?: "
|
|
1606
|
-
sm?: "
|
|
1607
|
-
md?: "
|
|
1608
|
-
lg?: "
|
|
1609
|
-
xl?: "
|
|
1610
|
-
xxl?: "
|
|
1605
|
+
display?: "flex" | "grid" | "none" | "block" | "inline" | "inline-block" | "inline-flex" | "inline-grid" | "contents" | {
|
|
1606
|
+
all?: "flex" | "grid" | "none" | "block" | "inline" | "inline-block" | "inline-flex" | "inline-grid" | "contents" | undefined;
|
|
1607
|
+
sm?: "flex" | "grid" | "none" | "block" | "inline" | "inline-block" | "inline-flex" | "inline-grid" | "contents" | undefined;
|
|
1608
|
+
md?: "flex" | "grid" | "none" | "block" | "inline" | "inline-block" | "inline-flex" | "inline-grid" | "contents" | undefined;
|
|
1609
|
+
lg?: "flex" | "grid" | "none" | "block" | "inline" | "inline-block" | "inline-flex" | "inline-grid" | "contents" | undefined;
|
|
1610
|
+
xl?: "flex" | "grid" | "none" | "block" | "inline" | "inline-block" | "inline-flex" | "inline-grid" | "contents" | undefined;
|
|
1611
|
+
xxl?: "flex" | "grid" | "none" | "block" | "inline" | "inline-block" | "inline-flex" | "inline-grid" | "contents" | undefined;
|
|
1611
1612
|
} | undefined;
|
|
1612
1613
|
flexDirection?: "column" | "column-reverse" | "row" | "row-reverse" | {
|
|
1613
1614
|
all?: "column" | "column-reverse" | "row" | "row-reverse" | undefined;
|
|
@@ -1641,21 +1642,21 @@ declare const sprinkles: ((props: {
|
|
|
1641
1642
|
xl?: "center" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start" | undefined;
|
|
1642
1643
|
xxl?: "center" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start" | undefined;
|
|
1643
1644
|
} | undefined;
|
|
1644
|
-
alignSelf?: "
|
|
1645
|
-
all?: "
|
|
1646
|
-
sm?: "
|
|
1647
|
-
md?: "
|
|
1648
|
-
lg?: "
|
|
1649
|
-
xl?: "
|
|
1650
|
-
xxl?: "
|
|
1645
|
+
alignSelf?: "center" | "auto" | "stretch" | "flex-end" | "flex-start" | "baseline" | {
|
|
1646
|
+
all?: "center" | "auto" | "stretch" | "flex-end" | "flex-start" | "baseline" | undefined;
|
|
1647
|
+
sm?: "center" | "auto" | "stretch" | "flex-end" | "flex-start" | "baseline" | undefined;
|
|
1648
|
+
md?: "center" | "auto" | "stretch" | "flex-end" | "flex-start" | "baseline" | undefined;
|
|
1649
|
+
lg?: "center" | "auto" | "stretch" | "flex-end" | "flex-start" | "baseline" | undefined;
|
|
1650
|
+
xl?: "center" | "auto" | "stretch" | "flex-end" | "flex-start" | "baseline" | undefined;
|
|
1651
|
+
xxl?: "center" | "auto" | "stretch" | "flex-end" | "flex-start" | "baseline" | undefined;
|
|
1651
1652
|
} | undefined;
|
|
1652
|
-
overflow?: "
|
|
1653
|
-
all?: "
|
|
1654
|
-
sm?: "
|
|
1655
|
-
md?: "
|
|
1656
|
-
lg?: "
|
|
1657
|
-
xl?: "
|
|
1658
|
-
xxl?: "
|
|
1653
|
+
overflow?: "hidden" | "auto" | "visible" | "scroll" | {
|
|
1654
|
+
all?: "hidden" | "auto" | "visible" | "scroll" | undefined;
|
|
1655
|
+
sm?: "hidden" | "auto" | "visible" | "scroll" | undefined;
|
|
1656
|
+
md?: "hidden" | "auto" | "visible" | "scroll" | undefined;
|
|
1657
|
+
lg?: "hidden" | "auto" | "visible" | "scroll" | undefined;
|
|
1658
|
+
xl?: "hidden" | "auto" | "visible" | "scroll" | undefined;
|
|
1659
|
+
xxl?: "hidden" | "auto" | "visible" | "scroll" | undefined;
|
|
1659
1660
|
} | undefined;
|
|
1660
1661
|
position?: "static" | "fixed" | "absolute" | "relative" | "sticky" | {
|
|
1661
1662
|
all?: "static" | "fixed" | "absolute" | "relative" | "sticky" | undefined;
|
|
@@ -1674,7 +1675,7 @@ declare const sprinkles: ((props: {
|
|
|
1674
1675
|
xxl?: "center" | "start" | "right" | "left" | "end" | undefined;
|
|
1675
1676
|
} | undefined;
|
|
1676
1677
|
}) => string) & {
|
|
1677
|
-
properties: Set<"
|
|
1678
|
+
properties: Set<"display" | "overflow" | "textAlign" | "alignItems" | "justifyContent" | "flexWrap" | "flexDirection" | "alignSelf" | "position">;
|
|
1678
1679
|
};
|
|
1679
1680
|
type Sprinkles = Parameters<typeof sprinkles>[0];
|
|
1680
1681
|
|
|
@@ -2013,6 +2014,58 @@ interface ImageProps$1 extends Omit<BoxProps<'img'>, 'variant' | 'use'> {
|
|
|
2013
2014
|
image?: ImageProp$1;
|
|
2014
2015
|
}
|
|
2015
2016
|
|
|
2017
|
+
interface MapMarker$1<T = string> {
|
|
2018
|
+
id?: string;
|
|
2019
|
+
title: string;
|
|
2020
|
+
lat: number;
|
|
2021
|
+
lng: number;
|
|
2022
|
+
image?: string;
|
|
2023
|
+
description?: string;
|
|
2024
|
+
data?: T;
|
|
2025
|
+
}
|
|
2026
|
+
interface MapCenter$1 {
|
|
2027
|
+
lat: number;
|
|
2028
|
+
lng: number;
|
|
2029
|
+
}
|
|
2030
|
+
/**
|
|
2031
|
+
* Corner points rather than Google's `north`/`south`/`east`/`west` edges, so
|
|
2032
|
+
* each corner is ready to send as a single `<Latitude>,<Longitude>` pair.
|
|
2033
|
+
*/
|
|
2034
|
+
interface MapBounds {
|
|
2035
|
+
southWest: MapCenter$1;
|
|
2036
|
+
northEast: MapCenter$1;
|
|
2037
|
+
}
|
|
2038
|
+
interface MapViewportEvent {
|
|
2039
|
+
center: MapCenter$1;
|
|
2040
|
+
zoom: number;
|
|
2041
|
+
bounds: MapBounds;
|
|
2042
|
+
}
|
|
2043
|
+
interface MapErrorEvent {
|
|
2044
|
+
message: string;
|
|
2045
|
+
}
|
|
2046
|
+
interface MapControls$1 {
|
|
2047
|
+
zoomControl?: boolean;
|
|
2048
|
+
mapTypeControl?: boolean;
|
|
2049
|
+
scaleControl?: boolean;
|
|
2050
|
+
streetViewControl?: boolean;
|
|
2051
|
+
rotateControl?: boolean;
|
|
2052
|
+
fullscreenControl?: boolean;
|
|
2053
|
+
gestureHandling?: 'auto' | 'cooperative' | 'greedy' | 'none';
|
|
2054
|
+
}
|
|
2055
|
+
declare const MapLoadingState$1: {
|
|
2056
|
+
readonly BUSY: "busy";
|
|
2057
|
+
readonly FAILED: "failed";
|
|
2058
|
+
readonly LOADING: "loading";
|
|
2059
|
+
readonly READY: "ready";
|
|
2060
|
+
};
|
|
2061
|
+
type MapLoadingState$1 = ValueOf<typeof MapLoadingState$1>;
|
|
2062
|
+
|
|
2063
|
+
declare const SliderVariant: {
|
|
2064
|
+
readonly SLIDER: "slider";
|
|
2065
|
+
readonly RANGE: "range";
|
|
2066
|
+
};
|
|
2067
|
+
type SliderVariant = ValueOf<typeof SliderVariant>;
|
|
2068
|
+
|
|
2016
2069
|
declare const ToastTimeout: {
|
|
2017
2070
|
readonly SHORT: "short";
|
|
2018
2071
|
readonly LONG: "long";
|
|
@@ -4074,6 +4127,176 @@ interface ListProps {
|
|
|
4074
4127
|
*/
|
|
4075
4128
|
declare const List: ({ items }: ListProps) => react_jsx_runtime.JSX.Element;
|
|
4076
4129
|
|
|
4130
|
+
/**
|
|
4131
|
+
* Marker to display on the map.
|
|
4132
|
+
*/
|
|
4133
|
+
type MapMarker = MapMarker$1;
|
|
4134
|
+
/**
|
|
4135
|
+
* Map center coordinates.
|
|
4136
|
+
*/
|
|
4137
|
+
type MapCenter = MapCenter$1;
|
|
4138
|
+
/**
|
|
4139
|
+
* Map loading state options.
|
|
4140
|
+
* - 'loading': initial script load (skeleton shown)
|
|
4141
|
+
* - 'busy': reloading results over an already-ready map
|
|
4142
|
+
* - 'failed': map failed to load (error state shown)
|
|
4143
|
+
* - 'ready': map is ready (default)
|
|
4144
|
+
*/
|
|
4145
|
+
type MapLoadingState = MapLoadingState$1;
|
|
4146
|
+
/**
|
|
4147
|
+
* Map controls configuration.
|
|
4148
|
+
*/
|
|
4149
|
+
type MapControls = MapControls$1;
|
|
4150
|
+
/**
|
|
4151
|
+
* Props for the Map component.
|
|
4152
|
+
*
|
|
4153
|
+
* @example
|
|
4154
|
+
* ```tsx
|
|
4155
|
+
* <Map apiKey="YOUR_API_KEY" center={{ lat: 51.5074, lng: -0.1278 }} />
|
|
4156
|
+
* ```
|
|
4157
|
+
*/
|
|
4158
|
+
interface MapProps {
|
|
4159
|
+
/**
|
|
4160
|
+
* Google Maps API key (required).
|
|
4161
|
+
*/
|
|
4162
|
+
apiKey: string;
|
|
4163
|
+
/**
|
|
4164
|
+
* Google Maps map ID.
|
|
4165
|
+
*/
|
|
4166
|
+
mapId?: string;
|
|
4167
|
+
/**
|
|
4168
|
+
* Initial map center coordinates.
|
|
4169
|
+
* @default { lat: 51.5074, lng: -0.1278 }
|
|
4170
|
+
*/
|
|
4171
|
+
center?: MapCenter;
|
|
4172
|
+
/**
|
|
4173
|
+
* Initial zoom level.
|
|
4174
|
+
* @default 11
|
|
4175
|
+
*/
|
|
4176
|
+
zoom?: number;
|
|
4177
|
+
/**
|
|
4178
|
+
* Markers to display on the map.
|
|
4179
|
+
*/
|
|
4180
|
+
markers?: MapMarker[];
|
|
4181
|
+
/**
|
|
4182
|
+
* Map UI controls configuration.
|
|
4183
|
+
*/
|
|
4184
|
+
controls?: MapControls;
|
|
4185
|
+
/**
|
|
4186
|
+
* Loading state override.
|
|
4187
|
+
*/
|
|
4188
|
+
loadingState?: MapLoadingState;
|
|
4189
|
+
/**
|
|
4190
|
+
* Label shown when the map fails to load.
|
|
4191
|
+
*/
|
|
4192
|
+
labelFailedState?: React__default.ReactNode;
|
|
4193
|
+
/**
|
|
4194
|
+
* Label for the retry button shown on failure.
|
|
4195
|
+
*/
|
|
4196
|
+
labelRetry?: React__default.ReactNode;
|
|
4197
|
+
/**
|
|
4198
|
+
* Callback fired when the user retries after a failure.
|
|
4199
|
+
*/
|
|
4200
|
+
onRetry?: () => void;
|
|
4201
|
+
/**
|
|
4202
|
+
* Callback fired when the map errors.
|
|
4203
|
+
*/
|
|
4204
|
+
onError?: (error: MapErrorEvent) => void;
|
|
4205
|
+
/**
|
|
4206
|
+
* Callback fired when the user finishes dragging the map.
|
|
4207
|
+
*/
|
|
4208
|
+
onDragEnd?: (event: MapViewportEvent) => void;
|
|
4209
|
+
/**
|
|
4210
|
+
* Callback fired when the map zoom changes.
|
|
4211
|
+
*/
|
|
4212
|
+
onZoom?: (event: MapViewportEvent) => void;
|
|
4213
|
+
/**
|
|
4214
|
+
* Custom marker renderer.
|
|
4215
|
+
*/
|
|
4216
|
+
renderMarker?: (marker: MapMarker) => React__default.ReactNode;
|
|
4217
|
+
/**
|
|
4218
|
+
* Custom popup renderer shown when a marker is activated.
|
|
4219
|
+
*/
|
|
4220
|
+
renderPopup?: (marker: MapMarker) => React__default.ReactNode;
|
|
4221
|
+
}
|
|
4222
|
+
/**
|
|
4223
|
+
* Map component for embedding an interactive Google Map.
|
|
4224
|
+
*
|
|
4225
|
+
* Renders a Google Map with optional markers, custom controls, and
|
|
4226
|
+
* custom marker/popup renderers. Requires a Google Maps API key.
|
|
4227
|
+
*
|
|
4228
|
+
* @example
|
|
4229
|
+
* ```tsx
|
|
4230
|
+
* import { Map } from '@revolut/ui-kit-miniapp'
|
|
4231
|
+
*
|
|
4232
|
+
* function BasicExample() {
|
|
4233
|
+
* return (
|
|
4234
|
+
* <Map
|
|
4235
|
+
* apiKey="YOUR_API_KEY"
|
|
4236
|
+
* center={{ lat: 51.5074, lng: -0.1278 }}
|
|
4237
|
+
* />
|
|
4238
|
+
* )
|
|
4239
|
+
* }
|
|
4240
|
+
* ```
|
|
4241
|
+
*
|
|
4242
|
+
* @example
|
|
4243
|
+
* ```tsx
|
|
4244
|
+
* import { Map } from '@revolut/ui-kit-miniapp'
|
|
4245
|
+
*
|
|
4246
|
+
* // With markers
|
|
4247
|
+
* function MarkersExample() {
|
|
4248
|
+
* return (
|
|
4249
|
+
* <Map
|
|
4250
|
+
* apiKey="YOUR_API_KEY"
|
|
4251
|
+
* center={{ lat: 51.5074, lng: -0.1278 }}
|
|
4252
|
+
* markers={[
|
|
4253
|
+
* { id: 'office', title: 'Revolut Office', lat: 51.5044, lng: -0.0204 },
|
|
4254
|
+
* ]}
|
|
4255
|
+
* />
|
|
4256
|
+
* )
|
|
4257
|
+
* }
|
|
4258
|
+
* ```
|
|
4259
|
+
*
|
|
4260
|
+
* @example
|
|
4261
|
+
* ```tsx
|
|
4262
|
+
* import { Map } from '@revolut/ui-kit-miniapp'
|
|
4263
|
+
*
|
|
4264
|
+
* // With viewport events
|
|
4265
|
+
* function ViewportExample() {
|
|
4266
|
+
* return (
|
|
4267
|
+
* <Map
|
|
4268
|
+
* apiKey="YOUR_API_KEY"
|
|
4269
|
+
* center={{ lat: 51.5074, lng: -0.1278 }}
|
|
4270
|
+
* onDragEnd={(event) => console.log('Center:', event.center)}
|
|
4271
|
+
* onZoom={(event) => console.log('Zoom:', event.zoom)}
|
|
4272
|
+
* />
|
|
4273
|
+
* )
|
|
4274
|
+
* }
|
|
4275
|
+
* ```
|
|
4276
|
+
*
|
|
4277
|
+
* @example
|
|
4278
|
+
* ```tsx
|
|
4279
|
+
* import { Map } from '@revolut/ui-kit-miniapp'
|
|
4280
|
+
*
|
|
4281
|
+
* // With custom controls
|
|
4282
|
+
* function ControlsExample() {
|
|
4283
|
+
* return (
|
|
4284
|
+
* <Map
|
|
4285
|
+
* apiKey="YOUR_API_KEY"
|
|
4286
|
+
* center={{ lat: 51.5074, lng: -0.1278 }}
|
|
4287
|
+
* controls={{
|
|
4288
|
+
* zoomControl: false,
|
|
4289
|
+
* fullscreenControl: false,
|
|
4290
|
+
* streetViewControl: false,
|
|
4291
|
+
* mapTypeControl: false,
|
|
4292
|
+
* }}
|
|
4293
|
+
* />
|
|
4294
|
+
* )
|
|
4295
|
+
* }
|
|
4296
|
+
* ```
|
|
4297
|
+
*/
|
|
4298
|
+
declare const Map: ({ apiKey, mapId, center, zoom, markers, controls, loadingState, labelFailedState, labelRetry, onRetry, onError, onDragEnd, onZoom, renderMarker, renderPopup, }: MapProps) => react_jsx_runtime.JSX.Element;
|
|
4299
|
+
|
|
4077
4300
|
/**
|
|
4078
4301
|
* Props for the FilterButton component.
|
|
4079
4302
|
*
|
|
@@ -4257,6 +4480,165 @@ interface SearchProps extends NativeInputProps$2 {
|
|
|
4257
4480
|
*/
|
|
4258
4481
|
declare const Search: ({ value, defaultValue, onChange, placeholder, labelButtonClear, disabled, readOnly, invalid, ...rest }: SearchProps) => react_jsx_runtime.JSX.Element;
|
|
4259
4482
|
|
|
4483
|
+
interface SliderBaseProps extends Omit<NativeDivProps, 'onChange' | 'value' | 'defaultValue' | 'variant'> {
|
|
4484
|
+
/**
|
|
4485
|
+
* Minimum allowed value.
|
|
4486
|
+
* @default 0
|
|
4487
|
+
*/
|
|
4488
|
+
min?: number;
|
|
4489
|
+
/**
|
|
4490
|
+
* Maximum allowed value.
|
|
4491
|
+
* @default 1
|
|
4492
|
+
*/
|
|
4493
|
+
max?: number;
|
|
4494
|
+
/**
|
|
4495
|
+
* Step between allowed values.
|
|
4496
|
+
* @default 0.01
|
|
4497
|
+
*/
|
|
4498
|
+
step?: number;
|
|
4499
|
+
/**
|
|
4500
|
+
* Whether the slider is disabled.
|
|
4501
|
+
* @default false
|
|
4502
|
+
*/
|
|
4503
|
+
disabled?: boolean;
|
|
4504
|
+
/**
|
|
4505
|
+
* Accessible label for the maximum handle.
|
|
4506
|
+
*/
|
|
4507
|
+
labelMax?: string;
|
|
4508
|
+
/**
|
|
4509
|
+
* Accessible label for the minimum handle.
|
|
4510
|
+
*/
|
|
4511
|
+
labelMin?: string;
|
|
4512
|
+
/**
|
|
4513
|
+
* Whether to show a tooltip with the current value while interacting.
|
|
4514
|
+
* @default false
|
|
4515
|
+
*/
|
|
4516
|
+
showTooltip?: boolean;
|
|
4517
|
+
}
|
|
4518
|
+
/**
|
|
4519
|
+
* Props for the single-value Slider variant.
|
|
4520
|
+
*/
|
|
4521
|
+
interface SingleSliderProps extends SliderBaseProps {
|
|
4522
|
+
variant: typeof SliderVariant.SLIDER;
|
|
4523
|
+
/**
|
|
4524
|
+
* Controlled value.
|
|
4525
|
+
*/
|
|
4526
|
+
value?: number;
|
|
4527
|
+
/**
|
|
4528
|
+
* Default value for uncontrolled usage.
|
|
4529
|
+
*/
|
|
4530
|
+
defaultValue?: number;
|
|
4531
|
+
/**
|
|
4532
|
+
* Callback fired continuously while the value changes.
|
|
4533
|
+
*/
|
|
4534
|
+
onChange?: (value: number) => void;
|
|
4535
|
+
/**
|
|
4536
|
+
* Callback fired once when the user finishes changing the value.
|
|
4537
|
+
*/
|
|
4538
|
+
onChangeEnd?: (value: number) => void;
|
|
4539
|
+
/**
|
|
4540
|
+
* Positions to mark and snap to on the track. Values at the `min` and `max`
|
|
4541
|
+
* edges are ignored. Only supported on the single (non-range) variant.
|
|
4542
|
+
*/
|
|
4543
|
+
checkpoints?: number[];
|
|
4544
|
+
}
|
|
4545
|
+
/**
|
|
4546
|
+
* Props for the range Slider variant.
|
|
4547
|
+
*/
|
|
4548
|
+
interface RangeSliderProps extends SliderBaseProps {
|
|
4549
|
+
variant: typeof SliderVariant.RANGE;
|
|
4550
|
+
/**
|
|
4551
|
+
* Controlled [min, max] values.
|
|
4552
|
+
*/
|
|
4553
|
+
value?: [number, number];
|
|
4554
|
+
/**
|
|
4555
|
+
* Default [min, max] values for uncontrolled usage.
|
|
4556
|
+
*/
|
|
4557
|
+
defaultValue?: [number, number];
|
|
4558
|
+
/**
|
|
4559
|
+
* Callback fired continuously while the values change.
|
|
4560
|
+
*/
|
|
4561
|
+
onChange?: (value: [number, number]) => void;
|
|
4562
|
+
/**
|
|
4563
|
+
* Callback fired once when the user finishes changing the values.
|
|
4564
|
+
*/
|
|
4565
|
+
onChangeEnd?: (value: [number, number]) => void;
|
|
4566
|
+
}
|
|
4567
|
+
/**
|
|
4568
|
+
* Props for the Slider component.
|
|
4569
|
+
*/
|
|
4570
|
+
type SliderProps = SingleSliderProps | RangeSliderProps;
|
|
4571
|
+
/**
|
|
4572
|
+
* Slider component for picking a single numeric value or a min–max range.
|
|
4573
|
+
*
|
|
4574
|
+
* Use sliders for approximate adjustments where dragging is faster than typing an exact number.
|
|
4575
|
+
*
|
|
4576
|
+
* @example
|
|
4577
|
+
* ```tsx
|
|
4578
|
+
* import { Slider } from '@revolut/ui-kit-miniapp'
|
|
4579
|
+
*
|
|
4580
|
+
* // Uncontrolled single value
|
|
4581
|
+
* function SingleExample() {
|
|
4582
|
+
* return (
|
|
4583
|
+
* <Slider
|
|
4584
|
+
* defaultValue={0.5}
|
|
4585
|
+
* min={0}
|
|
4586
|
+
* max={1}
|
|
4587
|
+
* onChange={(value) => console.log('Value:', value)}
|
|
4588
|
+
* />
|
|
4589
|
+
* )
|
|
4590
|
+
* }
|
|
4591
|
+
* ```
|
|
4592
|
+
*
|
|
4593
|
+
* @example
|
|
4594
|
+
* ```tsx
|
|
4595
|
+
* import { Slider } from '@revolut/ui-kit-miniapp'
|
|
4596
|
+
* import { useState } from 'react'
|
|
4597
|
+
*
|
|
4598
|
+
* // Controlled range
|
|
4599
|
+
* function RangeExample() {
|
|
4600
|
+
* const [value, setValue] = useState<[number, number]>([0.25, 0.75])
|
|
4601
|
+
*
|
|
4602
|
+
* return (
|
|
4603
|
+
* <Slider
|
|
4604
|
+
* variant="range"
|
|
4605
|
+
* value={value}
|
|
4606
|
+
* onChange={setValue}
|
|
4607
|
+
* labelMin="Minimum"
|
|
4608
|
+
* labelMax="Maximum"
|
|
4609
|
+
* />
|
|
4610
|
+
* )
|
|
4611
|
+
* }
|
|
4612
|
+
* ```
|
|
4613
|
+
*
|
|
4614
|
+
* @example
|
|
4615
|
+
* ```tsx
|
|
4616
|
+
* import { Slider } from '@revolut/ui-kit-miniapp'
|
|
4617
|
+
*
|
|
4618
|
+
* // With checkpoints and tooltip
|
|
4619
|
+
* function CheckpointsExample() {
|
|
4620
|
+
* return (
|
|
4621
|
+
* <Slider
|
|
4622
|
+
* defaultValue={0.5}
|
|
4623
|
+
* checkpoints={[0.25, 0.5, 0.75]}
|
|
4624
|
+
* showTooltip
|
|
4625
|
+
* />
|
|
4626
|
+
* )
|
|
4627
|
+
* }
|
|
4628
|
+
* ```
|
|
4629
|
+
*
|
|
4630
|
+
* @example
|
|
4631
|
+
* ```tsx
|
|
4632
|
+
* import { Slider } from '@revolut/ui-kit-miniapp'
|
|
4633
|
+
*
|
|
4634
|
+
* // Disabled state
|
|
4635
|
+
* function DisabledExample() {
|
|
4636
|
+
* return <Slider disabled defaultValue={0.4} />
|
|
4637
|
+
* }
|
|
4638
|
+
* ```
|
|
4639
|
+
*/
|
|
4640
|
+
declare const Slider: (props: SliderProps) => react_jsx_runtime.JSX.Element;
|
|
4641
|
+
|
|
4260
4642
|
/**
|
|
4261
4643
|
* Props for the HStack component.
|
|
4262
4644
|
*
|
|
@@ -6162,7 +6544,7 @@ declare const Token: {
|
|
|
6162
6544
|
* Token.color.danger // Error state
|
|
6163
6545
|
* ```
|
|
6164
6546
|
*/
|
|
6165
|
-
readonly color: Record<"searchBackground" | "segmentedWidgetBackground" | "segmentedBackground" | "segmentedActive" | "actionPhotoHeaderText" | "actionPhotoHeaderTextNeutral" | "actionPhotoHeaderBackground" | "actionPhotoHeaderBackgroundNeutral" | "redActionBackground" | "nestedBackground" | "greyTone5" | "greyTone8" | "greyTone10" | "greyTone20" | "greyTone50" | "actionLabel" | "actionLabelNeutral" | "inputError" | "inputErrorFocus" | "disabledBackground" | "progressNeutral" | "up" | "down" | "neutral" | "shimmer" | "onShimmer" | "modalOverlay" | "metalDark" | "metalLight" | "plus" | "premiumDark" | "premiumLight" | "premiumMid" | "ultraDark" | "ultraLight" | "ultraLightBlue" | "ultraMid" | "reflectiveSmallUIOverlay" | "groupedBackgroundReflective" | "popoverBackgroundReflective" | "widgetBackgroundReflective" | ("accent" | "
|
|
6547
|
+
readonly color: Record<"searchBackground" | "segmentedWidgetBackground" | "segmentedBackground" | "segmentedActive" | "actionPhotoHeaderText" | "actionPhotoHeaderTextNeutral" | "actionPhotoHeaderBackground" | "actionPhotoHeaderBackgroundNeutral" | "redActionBackground" | "nestedBackground" | "greyTone5" | "greyTone8" | "greyTone10" | "greyTone20" | "greyTone50" | "actionLabel" | "actionLabelNeutral" | "inputError" | "inputErrorFocus" | "disabledBackground" | "progressNeutral" | "up" | "down" | "neutral" | "shimmer" | "onShimmer" | "modalOverlay" | "metalDark" | "metalLight" | "plus" | "premiumDark" | "premiumLight" | "premiumMid" | "ultraDark" | "ultraLight" | "ultraLightBlue" | "ultraMid" | "reflectiveSmallUIOverlay" | "groupedBackgroundReflective" | "popoverBackgroundReflective" | "widgetBackgroundReflective" | ("accent" | "accentNeutral" | "blue" | "coldBlue" | "pink" | "green" | "orange" | "red" | "deepPink" | "terracotta" | "yellow" | "lime" | "lightGreen" | "teal" | "cyan" | "lightBlue" | "indigo" | "deepPurple" | "purple" | "brown" | "deepGrey" | "black" | "grey50" | "grey20" | "grey10" | "grey5" | "grey8" | "grey2" | "white" | "actionBlue" | "actionBlueNeutral" | "onAccent" | "onAccentNeutral" | "actionBackground" | "actionBackgroundNeutral" | "widgetBackground" | "groupedBackground" | "popoverBackground" | "background" | "greyTone2" | "foreground" | "success" | "warning" | "danger" | "inactive" | "positive" | "negative" | "static" | "layoutBackground" | "accent_5" | "accent_10" | "accent_20" | "accent_30" | "accent_40" | "accent_50" | "accent_60" | "accent_70" | "accent_80" | "accent_90" | "accentNeutral_5" | "accentNeutral_10" | "accentNeutral_20" | "accentNeutral_30" | "accentNeutral_40" | "accentNeutral_50" | "accentNeutral_60" | "accentNeutral_70" | "accentNeutral_80" | "accentNeutral_90" | "blue_5" | "blue_10" | "blue_20" | "blue_30" | "blue_40" | "blue_50" | "blue_60" | "blue_70" | "blue_80" | "blue_90" | "coldBlue_5" | "coldBlue_10" | "coldBlue_20" | "coldBlue_30" | "coldBlue_40" | "coldBlue_50" | "coldBlue_60" | "coldBlue_70" | "coldBlue_80" | "coldBlue_90" | "pink_5" | "pink_10" | "pink_20" | "pink_30" | "pink_40" | "pink_50" | "pink_60" | "pink_70" | "pink_80" | "pink_90" | "green_5" | "green_10" | "green_20" | "green_30" | "green_40" | "green_50" | "green_60" | "green_70" | "green_80" | "green_90" | "orange_5" | "orange_10" | "orange_20" | "orange_30" | "orange_40" | "orange_50" | "orange_60" | "orange_70" | "orange_80" | "orange_90" | "red_5" | "red_10" | "red_20" | "red_30" | "red_40" | "red_50" | "red_60" | "red_70" | "red_80" | "red_90" | "deepPink_5" | "deepPink_10" | "deepPink_20" | "deepPink_30" | "deepPink_40" | "deepPink_50" | "deepPink_60" | "deepPink_70" | "deepPink_80" | "deepPink_90" | "terracotta_5" | "terracotta_10" | "terracotta_20" | "terracotta_30" | "terracotta_40" | "terracotta_50" | "terracotta_60" | "terracotta_70" | "terracotta_80" | "terracotta_90" | "yellow_5" | "yellow_10" | "yellow_20" | "yellow_30" | "yellow_40" | "yellow_50" | "yellow_60" | "yellow_70" | "yellow_80" | "yellow_90" | "lime_5" | "lime_10" | "lime_20" | "lime_30" | "lime_40" | "lime_50" | "lime_60" | "lime_70" | "lime_80" | "lime_90" | "lightGreen_5" | "lightGreen_10" | "lightGreen_20" | "lightGreen_30" | "lightGreen_40" | "lightGreen_50" | "lightGreen_60" | "lightGreen_70" | "lightGreen_80" | "lightGreen_90" | "teal_5" | "teal_10" | "teal_20" | "teal_30" | "teal_40" | "teal_50" | "teal_60" | "teal_70" | "teal_80" | "teal_90" | "cyan_5" | "cyan_10" | "cyan_20" | "cyan_30" | "cyan_40" | "cyan_50" | "cyan_60" | "cyan_70" | "cyan_80" | "cyan_90" | "lightBlue_5" | "lightBlue_10" | "lightBlue_20" | "lightBlue_30" | "lightBlue_40" | "lightBlue_50" | "lightBlue_60" | "lightBlue_70" | "lightBlue_80" | "lightBlue_90" | "indigo_5" | "indigo_10" | "indigo_20" | "indigo_30" | "indigo_40" | "indigo_50" | "indigo_60" | "indigo_70" | "indigo_80" | "indigo_90" | "deepPurple_5" | "deepPurple_10" | "deepPurple_20" | "deepPurple_30" | "deepPurple_40" | "deepPurple_50" | "deepPurple_60" | "deepPurple_70" | "deepPurple_80" | "deepPurple_90" | "purple_5" | "purple_10" | "purple_20" | "purple_30" | "purple_40" | "purple_50" | "purple_60" | "purple_70" | "purple_80" | "purple_90" | "brown_5" | "brown_10" | "brown_20" | "brown_30" | "brown_40" | "brown_50" | "brown_60" | "brown_70" | "brown_80" | "brown_90" | "deepGrey_5" | "deepGrey_10" | "deepGrey_20" | "deepGrey_30" | "deepGrey_40" | "deepGrey_50" | "deepGrey_60" | "deepGrey_70" | "deepGrey_80" | "deepGrey_90" | "black_5" | "black_10" | "black_20" | "black_30" | "black_40" | "black_50" | "black_60" | "black_70" | "black_80" | "black_90" | "grey50_5" | "grey50_10" | "grey50_20" | "grey50_30" | "grey50_40" | "grey50_50" | "grey50_60" | "grey50_70" | "grey50_80" | "grey50_90" | "grey20_5" | "grey20_10" | "grey20_20" | "grey20_30" | "grey20_40" | "grey20_50" | "grey20_60" | "grey20_70" | "grey20_80" | "grey20_90" | "grey10_5" | "grey10_10" | "grey10_20" | "grey10_30" | "grey10_40" | "grey10_50" | "grey10_60" | "grey10_70" | "grey10_80" | "grey10_90" | "grey5_5" | "grey5_10" | "grey5_20" | "grey5_30" | "grey5_40" | "grey5_50" | "grey5_60" | "grey5_70" | "grey5_80" | "grey5_90" | "grey8_5" | "grey8_10" | "grey8_20" | "grey8_30" | "grey8_40" | "grey8_50" | "grey8_60" | "grey8_70" | "grey8_80" | "grey8_90" | "grey2_5" | "grey2_10" | "grey2_20" | "grey2_30" | "grey2_40" | "grey2_50" | "grey2_60" | "grey2_70" | "grey2_80" | "grey2_90" | "white_5" | "white_10" | "white_20" | "white_30" | "white_40" | "white_50" | "white_60" | "white_70" | "white_80" | "white_90" | "actionBlue_5" | "actionBlue_10" | "actionBlue_20" | "actionBlue_30" | "actionBlue_40" | "actionBlue_50" | "actionBlue_60" | "actionBlue_70" | "actionBlue_80" | "actionBlue_90" | "actionBlueNeutral_5" | "actionBlueNeutral_10" | "actionBlueNeutral_20" | "actionBlueNeutral_30" | "actionBlueNeutral_40" | "actionBlueNeutral_50" | "actionBlueNeutral_60" | "actionBlueNeutral_70" | "actionBlueNeutral_80" | "actionBlueNeutral_90" | "onAccent_5" | "onAccent_10" | "onAccent_20" | "onAccent_30" | "onAccent_40" | "onAccent_50" | "onAccent_60" | "onAccent_70" | "onAccent_80" | "onAccent_90" | "onAccentNeutral_5" | "onAccentNeutral_10" | "onAccentNeutral_20" | "onAccentNeutral_30" | "onAccentNeutral_40" | "onAccentNeutral_50" | "onAccentNeutral_60" | "onAccentNeutral_70" | "onAccentNeutral_80" | "onAccentNeutral_90" | "actionBackgroundNeutral_5" | "actionBackgroundNeutral_10" | "actionBackgroundNeutral_20" | "actionBackgroundNeutral_30" | "actionBackgroundNeutral_40" | "actionBackgroundNeutral_50" | "actionBackgroundNeutral_60" | "actionBackgroundNeutral_70" | "actionBackgroundNeutral_80" | "actionBackgroundNeutral_90" | "popoverBackground_5" | "popoverBackground_10" | "popoverBackground_20" | "popoverBackground_30" | "popoverBackground_40" | "popoverBackground_50" | "popoverBackground_60" | "popoverBackground_70" | "popoverBackground_80" | "popoverBackground_90" | "greyTone2_5" | "greyTone2_10" | "greyTone2_20" | "greyTone2_30" | "greyTone2_40" | "greyTone2_50" | "greyTone2_60" | "greyTone2_70" | "greyTone2_80" | "greyTone2_90" | "success_5" | "success_10" | "success_20" | "success_30" | "success_40" | "success_50" | "success_60" | "success_70" | "success_80" | "success_90" | "warning_5" | "warning_10" | "warning_20" | "warning_30" | "warning_40" | "warning_50" | "warning_60" | "warning_70" | "warning_80" | "warning_90" | "danger_5" | "danger_10" | "danger_20" | "danger_30" | "danger_40" | "danger_50" | "danger_60" | "danger_70" | "danger_80" | "danger_90" | "inactive_5" | "inactive_10" | "inactive_20" | "inactive_30" | "inactive_40" | "inactive_50" | "inactive_60" | "inactive_70" | "inactive_80" | "inactive_90" | "positive_5" | "positive_10" | "positive_20" | "positive_30" | "positive_40" | "positive_50" | "positive_60" | "positive_70" | "positive_80" | "positive_90" | "negative_5" | "negative_10" | "negative_20" | "negative_30" | "negative_40" | "negative_50" | "negative_60" | "negative_70" | "negative_80" | "negative_90" | "static_5" | "static_10" | "static_20" | "static_30" | "static_40" | "static_50" | "static_60" | "static_70" | "static_80" | "static_90"), string>;
|
|
6166
6548
|
/**
|
|
6167
6549
|
* Border radius tokens.
|
|
6168
6550
|
*
|
|
@@ -6276,5 +6658,5 @@ declare const Token: {
|
|
|
6276
6658
|
};
|
|
6277
6659
|
};
|
|
6278
6660
|
|
|
6279
|
-
export { Action, ActionButton, Avatar, Badge, BottomSheet, Button, Calendar, Cell, CellSkeleton, Checkbox, CompactInput, Copyable, DetailsCell, Dropdown, FilterButton, Footnote, Group, HStack, Icon, Image, Input, Link, List, MessageBubble, Page, Placeholder, Popup, ProgressSteps, Radio, RootProvider, Search, Spacer, StarRating, Subheader, Switch, TabBar, Text, TextArea, Toast, ToggleButton, Token, VStack, VisuallyHidden, copyToClipboard, nodeChain, useDateFormat, useDateRangeFormat, useDateTimeFormat, useDropdown, useIsRTL, useMoneyFormat, useStatusSheet, useTimeFormat, useToast };
|
|
6280
|
-
export type { ActionButtonProps, ActionButtonVariant, ActionProps, AvatarProps, AvatarSize, BadgeProps, BottomSheetActionsProps, BottomSheetContentProps, BottomSheetHeaderProps, BottomSheetProps, ButtonProps, ButtonVariant, CalendarDateProps, CalendarDisabledDays, CalendarProps, CalendarRangeProps, CalendarVariant, CellProps, CellVariant, CheckboxProps, CompactInputProps, CopyableProps, CurrencyDefinition, DateFormatOptions, DateRangeFormatOptions, DateTimeFormatOptions, DetailsCellProps, DropdownOptions, DropdownProps, DropdownState, FilterButtonProps, FootnoteProps, GroupProps, GroupVariant, HStackProps, IconName, IconProps, ImageFit, ImageProp, ImageProps, InputProps, InputType, IntlMessages, LinkProps, ListProps, MessageBubbleProps, PageHeaderProps, PageMainProps, PageProps, PageTabsProps, PlaceholderProps, PopupProps, ProgressStepsProps, RadioProps, RootProviderProps, SearchProps, Space, SpacerProps, StackAlignment, StarRatingProps, StatusSheetAction, StatusSheetInstance, StatusSheetOptions, StatusSheetVariant, SubheaderProps, SubheaderVariant, SwitchProps, TabBarItem, TabBarProps, TabBarVariant, TextAreaProps, TextProps, TextVariant, ThemeBackground, ThemeMode, TimeFormatOptions, ToastActions, ToastProps, ToggleButtonProps, UseMoneyFormatOptions, VStackProps, VisuallyHiddenProps };
|
|
6661
|
+
export { Action, ActionButton, Avatar, Badge, BottomSheet, Button, Calendar, Cell, CellSkeleton, Checkbox, CompactInput, Copyable, DetailsCell, Dropdown, FilterButton, Footnote, Group, HStack, Icon, Image, Input, Link, List, Map, MessageBubble, Page, Placeholder, Popup, ProgressSteps, Radio, RootProvider, Search, Slider, SliderVariant, Spacer, StarRating, Subheader, Switch, TabBar, Text, TextArea, Toast, ToggleButton, Token, VStack, VisuallyHidden, copyToClipboard, nodeChain, useDateFormat, useDateRangeFormat, useDateTimeFormat, useDropdown, useIsRTL, useMoneyFormat, useStatusSheet, useTimeFormat, useToast };
|
|
6662
|
+
export type { ActionButtonProps, ActionButtonVariant, ActionProps, AvatarProps, AvatarSize, BadgeProps, BottomSheetActionsProps, BottomSheetContentProps, BottomSheetHeaderProps, BottomSheetProps, ButtonProps, ButtonVariant, CalendarDateProps, CalendarDisabledDays, CalendarProps, CalendarRangeProps, CalendarVariant, CellProps, CellVariant, CheckboxProps, CompactInputProps, CopyableProps, CurrencyDefinition, DateFormatOptions, DateRangeFormatOptions, DateTimeFormatOptions, DetailsCellProps, DropdownOptions, DropdownProps, DropdownState, FilterButtonProps, FootnoteProps, GroupProps, GroupVariant, HStackProps, IconName, IconProps, ImageFit, ImageProp, ImageProps, InputProps, InputType, IntlMessages, LinkProps, ListProps, MapCenter, MapControls, MapLoadingState, MapMarker, MapProps, MessageBubbleProps, PageHeaderProps, PageMainProps, PageProps, PageTabsProps, PlaceholderProps, PopupProps, ProgressStepsProps, RadioProps, RangeSliderProps, RootProviderProps, SearchProps, SingleSliderProps, SliderProps, Space, SpacerProps, StackAlignment, StarRatingProps, StatusSheetAction, StatusSheetInstance, StatusSheetOptions, StatusSheetVariant, SubheaderProps, SubheaderVariant, SwitchProps, TabBarItem, TabBarProps, TabBarVariant, TextAreaProps, TextProps, TextVariant, ThemeBackground, ThemeMode, TimeFormatOptions, ToastActions, ToastProps, ToggleButtonProps, UseMoneyFormatOptions, VStackProps, VisuallyHiddenProps };
|