@webority-technologies/mobile 0.0.6 → 0.0.8
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 +3 -463
- package/lib/commonjs/components/Badge/Badge.js +23 -13
- package/lib/commonjs/components/BottomSheet/BottomSheet.js +39 -5
- package/lib/commonjs/components/Button/Button.js +25 -6
- package/lib/commonjs/components/Card/Card.js +13 -1
- package/lib/commonjs/components/Checkbox/Checkbox.js +5 -3
- package/lib/commonjs/components/Chip/Chip.js +12 -3
- package/lib/commonjs/components/Dialog/Dialog.js +15 -8
- package/lib/commonjs/components/EmptyState/EmptyState.js +32 -26
- package/lib/commonjs/components/FormField/FormField.js +3 -3
- package/lib/commonjs/components/Input/Input.js +13 -5
- package/lib/commonjs/components/ListItem/ListItem.js +33 -27
- package/lib/commonjs/components/OTPInput/OTPInput.js +6 -3
- package/lib/commonjs/components/Radio/Radio.js +7 -6
- package/lib/commonjs/components/SearchBar/SearchBar.js +9 -5
- package/lib/commonjs/components/Skeleton/Skeleton.js +20 -12
- package/lib/commonjs/components/Skeleton/SkeletonContent.js +25 -9
- package/lib/commonjs/components/Skeleton/SkeletonList.js +7 -2
- package/lib/commonjs/components/Skeleton/SkeletonProvider.js +48 -0
- package/lib/commonjs/components/Skeleton/SkeletonSkip.js +37 -0
- package/lib/commonjs/components/Skeleton/index.js +20 -0
- package/lib/commonjs/components/Switch/Switch.js +31 -2
- package/lib/commonjs/components/Toast/Toast.js +16 -11
- package/lib/commonjs/components/index.js +18 -0
- package/lib/commonjs/theme/Gradient.js +57 -0
- package/lib/commonjs/theme/index.js +20 -0
- package/lib/commonjs/theme/textStyle.js +37 -0
- package/lib/commonjs/theme/tokens.js +260 -2
- package/lib/module/components/Badge/Badge.js +24 -14
- package/lib/module/components/BottomSheet/BottomSheet.js +40 -6
- package/lib/module/components/Button/Button.js +26 -7
- package/lib/module/components/Card/Card.js +14 -2
- package/lib/module/components/Checkbox/Checkbox.js +5 -3
- package/lib/module/components/Chip/Chip.js +13 -4
- package/lib/module/components/Dialog/Dialog.js +16 -9
- package/lib/module/components/EmptyState/EmptyState.js +33 -27
- package/lib/module/components/FormField/FormField.js +4 -4
- package/lib/module/components/Input/Input.js +14 -6
- package/lib/module/components/ListItem/ListItem.js +34 -28
- package/lib/module/components/OTPInput/OTPInput.js +7 -4
- package/lib/module/components/Radio/Radio.js +7 -6
- package/lib/module/components/SearchBar/SearchBar.js +10 -6
- package/lib/module/components/Skeleton/Skeleton.js +20 -12
- package/lib/module/components/Skeleton/SkeletonContent.js +25 -9
- package/lib/module/components/Skeleton/SkeletonList.js +7 -2
- package/lib/module/components/Skeleton/SkeletonProvider.js +41 -0
- package/lib/module/components/Skeleton/SkeletonSkip.js +31 -0
- package/lib/module/components/Skeleton/index.js +2 -0
- package/lib/module/components/Switch/Switch.js +31 -2
- package/lib/module/components/Toast/Toast.js +17 -12
- package/lib/module/components/index.js +1 -1
- package/lib/module/theme/Gradient.js +50 -0
- package/lib/module/theme/index.js +2 -0
- package/lib/module/theme/textStyle.js +32 -0
- package/lib/module/theme/tokens.js +260 -2
- package/lib/typescript/commonjs/components/BottomSheet/BottomSheet.d.ts +10 -0
- package/lib/typescript/commonjs/components/Button/Button.d.ts +8 -0
- package/lib/typescript/commonjs/components/Card/Card.d.ts +8 -0
- package/lib/typescript/commonjs/components/Dialog/Dialog.d.ts +5 -0
- package/lib/typescript/commonjs/components/Input/Input.d.ts +12 -0
- package/lib/typescript/commonjs/components/Skeleton/Skeleton.d.ts +9 -0
- package/lib/typescript/commonjs/components/Skeleton/SkeletonContent.d.ts +6 -0
- package/lib/typescript/commonjs/components/Skeleton/SkeletonList.d.ts +3 -0
- package/lib/typescript/commonjs/components/Skeleton/SkeletonProvider.d.ts +32 -0
- package/lib/typescript/commonjs/components/Skeleton/SkeletonSkip.d.ts +25 -0
- package/lib/typescript/commonjs/components/Skeleton/index.d.ts +4 -0
- package/lib/typescript/commonjs/components/Switch/Switch.d.ts +5 -0
- package/lib/typescript/commonjs/components/Toast/Toast.d.ts +5 -0
- package/lib/typescript/commonjs/components/index.d.ts +2 -2
- package/lib/typescript/commonjs/theme/Gradient.d.ts +11 -0
- package/lib/typescript/commonjs/theme/index.d.ts +5 -1
- package/lib/typescript/commonjs/theme/textStyle.d.ts +18 -0
- package/lib/typescript/commonjs/theme/types.d.ts +178 -0
- package/lib/typescript/module/components/BottomSheet/BottomSheet.d.ts +10 -0
- package/lib/typescript/module/components/Button/Button.d.ts +8 -0
- package/lib/typescript/module/components/Card/Card.d.ts +8 -0
- package/lib/typescript/module/components/Dialog/Dialog.d.ts +5 -0
- package/lib/typescript/module/components/Input/Input.d.ts +12 -0
- package/lib/typescript/module/components/Skeleton/Skeleton.d.ts +9 -0
- package/lib/typescript/module/components/Skeleton/SkeletonContent.d.ts +6 -0
- package/lib/typescript/module/components/Skeleton/SkeletonList.d.ts +3 -0
- package/lib/typescript/module/components/Skeleton/SkeletonProvider.d.ts +32 -0
- package/lib/typescript/module/components/Skeleton/SkeletonSkip.d.ts +25 -0
- package/lib/typescript/module/components/Skeleton/index.d.ts +4 -0
- package/lib/typescript/module/components/Switch/Switch.d.ts +5 -0
- package/lib/typescript/module/components/Toast/Toast.d.ts +5 -0
- package/lib/typescript/module/components/index.d.ts +2 -2
- package/lib/typescript/module/theme/Gradient.d.ts +11 -0
- package/lib/typescript/module/theme/index.d.ts +5 -1
- package/lib/typescript/module/theme/textStyle.d.ts +18 -0
- package/lib/typescript/module/theme/types.d.ts +178 -0
- package/package.json +5 -1
|
@@ -1,5 +1,32 @@
|
|
|
1
1
|
import type { TextStyle, ViewStyle } from 'react-native';
|
|
2
2
|
export type ColorMode = 'light' | 'dark';
|
|
3
|
+
/**
|
|
4
|
+
* A linear gradient definition used by Button, Card and consumer components.
|
|
5
|
+
* `colors` must have at least 2 entries. `start`/`end` follow the
|
|
6
|
+
* react-native-linear-gradient convention: { x: 0..1, y: 0..1 }.
|
|
7
|
+
*/
|
|
8
|
+
export interface GradientDefinition {
|
|
9
|
+
colors: string[];
|
|
10
|
+
locations?: number[];
|
|
11
|
+
start?: {
|
|
12
|
+
x: number;
|
|
13
|
+
y: number;
|
|
14
|
+
};
|
|
15
|
+
end?: {
|
|
16
|
+
x: number;
|
|
17
|
+
y: number;
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
export interface GradientScale {
|
|
21
|
+
/** Brand-primary gradient — used by `Button gradient` and `Card gradient="primary"`. */
|
|
22
|
+
primary?: GradientDefinition;
|
|
23
|
+
/** Secondary brand gradient. */
|
|
24
|
+
secondary?: GradientDefinition;
|
|
25
|
+
/** Backdrop / banner gradient (for hero sections). */
|
|
26
|
+
surface?: GradientDefinition;
|
|
27
|
+
/** Free-form named gradients. Consumer extends as needed. */
|
|
28
|
+
[key: string]: GradientDefinition | undefined;
|
|
29
|
+
}
|
|
3
30
|
export interface ColorPalette {
|
|
4
31
|
primary: string;
|
|
5
32
|
primaryHover: string;
|
|
@@ -44,6 +71,13 @@ export interface ColorPalette {
|
|
|
44
71
|
highlight: string;
|
|
45
72
|
};
|
|
46
73
|
}
|
|
74
|
+
export interface FontFamilyScale {
|
|
75
|
+
/** Font family for normal-weight text. Falls back to platform system font when undefined. */
|
|
76
|
+
regular?: string;
|
|
77
|
+
medium?: string;
|
|
78
|
+
semibold?: string;
|
|
79
|
+
bold?: string;
|
|
80
|
+
}
|
|
47
81
|
export interface TypographyScale {
|
|
48
82
|
fontSize: {
|
|
49
83
|
xs: number;
|
|
@@ -61,6 +95,13 @@ export interface TypographyScale {
|
|
|
61
95
|
semibold: TextStyle['fontWeight'];
|
|
62
96
|
bold: TextStyle['fontWeight'];
|
|
63
97
|
};
|
|
98
|
+
/**
|
|
99
|
+
* Optional brand font families. When set, library text components prefer
|
|
100
|
+
* `fontFamily.<weight>` over `fontWeight.<weight>` to match the consumer
|
|
101
|
+
* app's typeface. Each key is independently optional — leave undefined to
|
|
102
|
+
* fall back to the system font for that weight.
|
|
103
|
+
*/
|
|
104
|
+
fontFamily?: FontFamilyScale;
|
|
64
105
|
lineHeight: {
|
|
65
106
|
tight: number;
|
|
66
107
|
normal: number;
|
|
@@ -145,6 +186,135 @@ export interface MotionScale {
|
|
|
145
186
|
};
|
|
146
187
|
};
|
|
147
188
|
}
|
|
189
|
+
/**
|
|
190
|
+
* Per-component size tokens. Each component that exposes a `size` prop
|
|
191
|
+
* resolves dimensions via `theme.components.<name>[size]`. Library ships
|
|
192
|
+
* sensible defaults; consumer overrides win via `mergeTheme`.
|
|
193
|
+
*
|
|
194
|
+
* Keep entries here as components gain themable per-size dimensions —
|
|
195
|
+
* this is the single home for "X is X tall, has Y radius, uses Z font size".
|
|
196
|
+
*/
|
|
197
|
+
export type ComponentSizeKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
198
|
+
export interface ButtonSizeTokens {
|
|
199
|
+
paddingHorizontal: number;
|
|
200
|
+
paddingVertical: number;
|
|
201
|
+
minHeight: number;
|
|
202
|
+
fontSize: number;
|
|
203
|
+
borderRadius: number;
|
|
204
|
+
}
|
|
205
|
+
export interface InputSizeTokens {
|
|
206
|
+
paddingHorizontal: number;
|
|
207
|
+
paddingVertical: number;
|
|
208
|
+
minHeight: number;
|
|
209
|
+
multilineMinHeight: number;
|
|
210
|
+
fontSize: number;
|
|
211
|
+
borderRadius: number;
|
|
212
|
+
iconSize: number;
|
|
213
|
+
}
|
|
214
|
+
export interface SearchBarSizeTokens {
|
|
215
|
+
height: number;
|
|
216
|
+
paddingHorizontal: number;
|
|
217
|
+
fontSize: number;
|
|
218
|
+
iconSize: number;
|
|
219
|
+
gap: number;
|
|
220
|
+
}
|
|
221
|
+
export interface EmptyStateSizeTokens {
|
|
222
|
+
iconSize: number;
|
|
223
|
+
/** Resolves against the active theme's typography.fontSize scale, e.g. "lg", "xl", "2xl". */
|
|
224
|
+
titleFontSize: keyof TypographyScale['fontSize'];
|
|
225
|
+
descriptionFontSize: keyof TypographyScale['fontSize'];
|
|
226
|
+
/** Resolves against the active theme's spacing scale. */
|
|
227
|
+
paddingVertical: keyof SpacingScale;
|
|
228
|
+
}
|
|
229
|
+
export interface ListItemSizeTokens {
|
|
230
|
+
/** Resolves against the active theme's spacing scale. */
|
|
231
|
+
paddingVertical: keyof SpacingScale;
|
|
232
|
+
titleFontSize: keyof TypographyScale['fontSize'];
|
|
233
|
+
subtitleFontSize: keyof TypographyScale['fontSize'];
|
|
234
|
+
minHeight: number;
|
|
235
|
+
}
|
|
236
|
+
export interface BadgeSizeTokens {
|
|
237
|
+
fontSize: number;
|
|
238
|
+
minWidth: number;
|
|
239
|
+
height: number;
|
|
240
|
+
paddingHorizontal: number;
|
|
241
|
+
dotSize: number;
|
|
242
|
+
}
|
|
243
|
+
export interface ChipSizeTokens {
|
|
244
|
+
paddingHorizontal: number;
|
|
245
|
+
paddingVertical: number;
|
|
246
|
+
fontSize: number;
|
|
247
|
+
minHeight: number;
|
|
248
|
+
closeSize: number;
|
|
249
|
+
closeFontSize: number;
|
|
250
|
+
gap: number;
|
|
251
|
+
}
|
|
252
|
+
export interface SwitchSizeTokens {
|
|
253
|
+
trackWidth: number;
|
|
254
|
+
trackHeight: number;
|
|
255
|
+
thumbSize: number;
|
|
256
|
+
padding: number;
|
|
257
|
+
}
|
|
258
|
+
export interface OTPInputSizeTokens {
|
|
259
|
+
cell: number;
|
|
260
|
+
fontSize: number;
|
|
261
|
+
borderRadius: number;
|
|
262
|
+
gap: number;
|
|
263
|
+
}
|
|
264
|
+
export interface DialogTokens {
|
|
265
|
+
iconWrapperSize: number;
|
|
266
|
+
iconWrapperBorderRadius: number;
|
|
267
|
+
actionButtonMinHeight: number;
|
|
268
|
+
}
|
|
269
|
+
export interface ToastTokens {
|
|
270
|
+
iconCircleSize: number;
|
|
271
|
+
iconCircleBorderRadius: number;
|
|
272
|
+
iconGlyphFontSize: number;
|
|
273
|
+
tintBarWidth: number;
|
|
274
|
+
}
|
|
275
|
+
export interface FormFieldTokens {
|
|
276
|
+
/** Width of the inline label column when `layout="inline"`. Accepts CSS-like string ("35%") or number. */
|
|
277
|
+
inlineLabelWidth: number | `${number}%`;
|
|
278
|
+
}
|
|
279
|
+
export interface BadgeTokens extends Partial<Record<'sm' | 'md', BadgeSizeTokens>> {
|
|
280
|
+
borderWidth?: number;
|
|
281
|
+
anchorOffset?: number;
|
|
282
|
+
}
|
|
283
|
+
export interface CheckboxSizeTokens {
|
|
284
|
+
boxSize: number;
|
|
285
|
+
}
|
|
286
|
+
export interface CheckboxTokens extends Partial<Record<ComponentSizeKey, CheckboxSizeTokens>> {
|
|
287
|
+
borderWidth?: number;
|
|
288
|
+
labelGap?: number;
|
|
289
|
+
}
|
|
290
|
+
export interface RadioSizeTokens {
|
|
291
|
+
outer: number;
|
|
292
|
+
inner: number;
|
|
293
|
+
}
|
|
294
|
+
export interface RadioTokens extends Partial<Record<ComponentSizeKey, RadioSizeTokens>> {
|
|
295
|
+
borderWidth?: number;
|
|
296
|
+
labelGap?: number;
|
|
297
|
+
}
|
|
298
|
+
export interface ComponentTokens {
|
|
299
|
+
button?: Partial<Record<ComponentSizeKey, ButtonSizeTokens>>;
|
|
300
|
+
input?: Partial<Record<ComponentSizeKey, InputSizeTokens>>;
|
|
301
|
+
searchBar?: Partial<Record<ComponentSizeKey, SearchBarSizeTokens>> & {
|
|
302
|
+
cancelButtonWidth?: number;
|
|
303
|
+
};
|
|
304
|
+
emptyState?: Partial<Record<ComponentSizeKey, EmptyStateSizeTokens>>;
|
|
305
|
+
listItem?: Partial<Record<ComponentSizeKey, ListItemSizeTokens>>;
|
|
306
|
+
badge?: BadgeTokens;
|
|
307
|
+
chip?: Partial<Record<ComponentSizeKey, ChipSizeTokens>>;
|
|
308
|
+
checkbox?: CheckboxTokens;
|
|
309
|
+
radio?: RadioTokens;
|
|
310
|
+
switch?: Partial<Record<ComponentSizeKey, SwitchSizeTokens>> & {
|
|
311
|
+
thumbColor?: string;
|
|
312
|
+
};
|
|
313
|
+
otpInput?: Partial<Record<ComponentSizeKey, OTPInputSizeTokens>>;
|
|
314
|
+
dialog?: DialogTokens;
|
|
315
|
+
toast?: ToastTokens;
|
|
316
|
+
formField?: FormFieldTokens;
|
|
317
|
+
}
|
|
148
318
|
export interface Theme {
|
|
149
319
|
mode: ColorMode;
|
|
150
320
|
colors: ColorPalette;
|
|
@@ -153,6 +323,14 @@ export interface Theme {
|
|
|
153
323
|
radius: RadiusScale;
|
|
154
324
|
shadows: ShadowScale;
|
|
155
325
|
motion: MotionScale;
|
|
326
|
+
components: ComponentTokens;
|
|
327
|
+
/**
|
|
328
|
+
* Optional brand gradient palette. Empty by default — consumers register
|
|
329
|
+
* their own via theme overrides. Components that accept gradient inputs
|
|
330
|
+
* (Button, Card) read from here when consumers pass a string token, OR
|
|
331
|
+
* accept a `GradientDefinition` literal directly.
|
|
332
|
+
*/
|
|
333
|
+
gradients: GradientScale;
|
|
156
334
|
}
|
|
157
335
|
export type DeepPartial<T> = T extends object ? {
|
|
158
336
|
[K in keyof T]?: DeepPartial<T[K]>;
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
import React from 'react';
|
|
20
20
|
import type { StyleProp, ViewStyle } from 'react-native';
|
|
21
21
|
export type SnapPoint = number | `${number}%`;
|
|
22
|
+
export type KeyboardBehavior = 'none' | 'shift';
|
|
22
23
|
export interface BottomSheetProps {
|
|
23
24
|
snapPoints: SnapPoint[];
|
|
24
25
|
index?: number;
|
|
@@ -27,6 +28,15 @@ export interface BottomSheetProps {
|
|
|
27
28
|
enablePanDownToClose?: boolean;
|
|
28
29
|
enableBackdropPress?: boolean;
|
|
29
30
|
backdropOpacity?: number;
|
|
31
|
+
/**
|
|
32
|
+
* How the sheet reacts to the soft keyboard.
|
|
33
|
+
* - `'none'` (default): the sheet stays put; keyboard may overlap content.
|
|
34
|
+
* - `'shift'`: animate the sheet upward by the keyboard height while it's
|
|
35
|
+
* visible (clamped so the sheet never extends past the top of the screen)
|
|
36
|
+
* and animate back when dismissed. Best for forms that live inside the
|
|
37
|
+
* sheet itself.
|
|
38
|
+
*/
|
|
39
|
+
keyboardBehavior?: KeyboardBehavior;
|
|
30
40
|
handleIndicatorStyle?: StyleProp<ViewStyle>;
|
|
31
41
|
containerStyle?: StyleProp<ViewStyle>;
|
|
32
42
|
children?: React.ReactNode;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { View } from 'react-native';
|
|
3
3
|
import type { PressableProps, StyleProp, TextStyle, ViewStyle } from 'react-native';
|
|
4
|
+
import type { GradientDefinition } from '../../theme/types';
|
|
4
5
|
import type { HapticType } from '../../utils/hapticUtils';
|
|
5
6
|
export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'link';
|
|
6
7
|
export type ButtonTone = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
|
|
@@ -23,6 +24,13 @@ export interface ButtonProps extends Omit<PressableProps, 'style' | 'children'>
|
|
|
23
24
|
rightIcon?: React.ReactNode;
|
|
24
25
|
haptic?: HapticType | false;
|
|
25
26
|
rounded?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* Optional gradient background. Pass either a key from `theme.gradients`
|
|
29
|
+
* (e.g. `"primary"`) or a `GradientDefinition` literal. Requires
|
|
30
|
+
* `react-native-linear-gradient` to be installed; without it the button
|
|
31
|
+
* falls back to flat colour with a dev warning.
|
|
32
|
+
*/
|
|
33
|
+
gradient?: string | GradientDefinition;
|
|
26
34
|
style?: StyleProp<ViewStyle>;
|
|
27
35
|
textStyle?: StyleProp<TextStyle>;
|
|
28
36
|
pressAnimation?: boolean;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { View } from 'react-native';
|
|
3
3
|
import type { GestureResponderEvent, ImageSourcePropType, PressableProps, StyleProp, ViewStyle } from 'react-native';
|
|
4
|
+
import type { GradientDefinition } from '../../theme/types';
|
|
4
5
|
export type CardVariant = 'elevated' | 'outlined' | 'filled';
|
|
5
6
|
export type CardElevation = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
6
7
|
export type CardRadius = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
@@ -24,6 +25,13 @@ export interface CardProps extends Omit<PressableProps, 'style' | 'children'> {
|
|
|
24
25
|
* with shimmer blocks. Use this when the data driving the component is still being fetched.
|
|
25
26
|
*/
|
|
26
27
|
loading?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Optional gradient background. Pass a key from `theme.gradients` or a
|
|
30
|
+
* literal `GradientDefinition`. Layered behind the card's content so
|
|
31
|
+
* existing variant/elevation/radius continue to work. Requires
|
|
32
|
+
* `react-native-linear-gradient` to be installed.
|
|
33
|
+
*/
|
|
34
|
+
gradient?: string | GradientDefinition;
|
|
27
35
|
onPress?: (event: GestureResponderEvent) => void;
|
|
28
36
|
accessibilityLabel?: string;
|
|
29
37
|
style?: StyleProp<ViewStyle>;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import type { StyleProp, ViewStyle } from 'react-native';
|
|
2
3
|
export type DialogVariant = 'default' | 'success' | 'warning' | 'danger' | 'info';
|
|
3
4
|
export type DialogActionTone = 'primary' | 'neutral' | 'danger';
|
|
4
5
|
export interface DialogAction {
|
|
@@ -17,6 +18,10 @@ export interface DialogProps {
|
|
|
17
18
|
actions?: DialogAction[];
|
|
18
19
|
dismissOnAction?: boolean;
|
|
19
20
|
accessibilityLabel?: string;
|
|
21
|
+
/** Style applied to the underlying Modal sheet (consumer may override radius, padding, etc.). */
|
|
22
|
+
contentStyle?: StyleProp<ViewStyle>;
|
|
23
|
+
/** Style applied to the dialog inner container (above icon/title/message). */
|
|
24
|
+
containerStyle?: StyleProp<ViewStyle>;
|
|
20
25
|
testID?: string;
|
|
21
26
|
}
|
|
22
27
|
declare const Dialog: React.FC<DialogProps>;
|
|
@@ -20,6 +20,18 @@ export interface InputProps extends Omit<TextInputProps, 'style'> {
|
|
|
20
20
|
variant?: InputVariant;
|
|
21
21
|
required?: boolean;
|
|
22
22
|
maxLength?: number;
|
|
23
|
+
/**
|
|
24
|
+
* Format the raw `value` for display. Common uses: phone-number formatting
|
|
25
|
+
* ("5551234567" → "(555) 123-4567"), currency, postal codes, masked IDs.
|
|
26
|
+
* The TextInput shows `format(value)`; user input is passed to `parse` (or
|
|
27
|
+
* left raw) before reaching `onChangeText`.
|
|
28
|
+
*/
|
|
29
|
+
format?: (raw: string) => string;
|
|
30
|
+
/**
|
|
31
|
+
* Reverse of `format` — strips the formatted display back to the canonical
|
|
32
|
+
* value the consumer wants in state. If omitted, defaults to identity.
|
|
33
|
+
*/
|
|
34
|
+
parse?: (formatted: string) => string;
|
|
23
35
|
style?: StyleProp<ViewStyle>;
|
|
24
36
|
inputStyle?: StyleProp<TextStyle>;
|
|
25
37
|
labelStyle?: StyleProp<TextStyle>;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { StyleProp, ViewStyle } from 'react-native';
|
|
3
3
|
import type { RadiusScale } from '../../theme/types';
|
|
4
|
+
import type { SkeletonColors } from './SkeletonProvider';
|
|
4
5
|
export type SkeletonVariant = 'shimmer' | 'pulse';
|
|
5
6
|
export type SkeletonSpeed = 'slow' | 'normal' | 'fast';
|
|
6
7
|
export type SkeletonRadius = keyof Pick<RadiusScale, 'sm' | 'md' | 'lg' | 'xl' | 'full'> | number;
|
|
@@ -12,6 +13,14 @@ export interface SkeletonProps {
|
|
|
12
13
|
radius?: SkeletonRadius;
|
|
13
14
|
variant?: SkeletonVariant;
|
|
14
15
|
speed?: SkeletonSpeed;
|
|
16
|
+
/**
|
|
17
|
+
* Per-instance colour override. Either `background` or `highlight` (or both)
|
|
18
|
+
* can be set; missing keys fall back to the SkeletonProvider's defaults
|
|
19
|
+
* and finally to the theme. Use this for one-off contrast adjustments
|
|
20
|
+
* (dark shimmer on a light banner, etc.) — for app-wide overrides prefer
|
|
21
|
+
* `<SkeletonProvider colors={{...}}>`.
|
|
22
|
+
*/
|
|
23
|
+
colors?: SkeletonColors;
|
|
15
24
|
style?: StyleProp<ViewStyle>;
|
|
16
25
|
testID?: string;
|
|
17
26
|
}
|
|
@@ -2,6 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import type { ReactNode } from 'react';
|
|
3
3
|
import type { StyleProp, ViewStyle } from 'react-native';
|
|
4
4
|
import type { SkeletonSpeed, SkeletonVariant } from './Skeleton';
|
|
5
|
+
import type { SkeletonColors } from './SkeletonProvider';
|
|
5
6
|
export type SkeletonContentMode = 'auto' | 'block';
|
|
6
7
|
export interface SkeletonContentProps {
|
|
7
8
|
/** When true, replace children with skeleton placeholders. */
|
|
@@ -26,6 +27,11 @@ export interface SkeletonContentProps {
|
|
|
26
27
|
* `loading` is false. Default: `1`.
|
|
27
28
|
*/
|
|
28
29
|
count?: number;
|
|
30
|
+
/**
|
|
31
|
+
* Colour override forwarded to every `<Skeleton>` produced by the walker. Either or both
|
|
32
|
+
* keys can be set; missing keys fall back to provider defaults / theme.
|
|
33
|
+
*/
|
|
34
|
+
colors?: SkeletonColors;
|
|
29
35
|
style?: StyleProp<ViewStyle>;
|
|
30
36
|
testID?: string;
|
|
31
37
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { ReactElement, ReactNode } from 'react';
|
|
2
2
|
import type { FlatListProps, StyleProp, ViewStyle } from 'react-native';
|
|
3
3
|
import type { SkeletonSpeed, SkeletonVariant } from './Skeleton';
|
|
4
|
+
import type { SkeletonColors } from './SkeletonProvider';
|
|
4
5
|
export interface SkeletonListProps<ItemT> extends Omit<FlatListProps<ItemT>, 'data' | 'renderItem'> {
|
|
5
6
|
/** Whether the list is in its initial loading state. */
|
|
6
7
|
loading: boolean;
|
|
@@ -19,6 +20,8 @@ export interface SkeletonListProps<ItemT> extends Omit<FlatListProps<ItemT>, 'da
|
|
|
19
20
|
variant?: SkeletonVariant;
|
|
20
21
|
/** Animation speed — same as Skeleton. */
|
|
21
22
|
speed?: SkeletonSpeed;
|
|
23
|
+
/** Colour override forwarded to the placeholder skeletons. */
|
|
24
|
+
colors?: SkeletonColors;
|
|
22
25
|
/** Style applied to the wrapper View around the placeholders. */
|
|
23
26
|
placeholderContainerStyle?: StyleProp<ViewStyle>;
|
|
24
27
|
testID?: string;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ReactNode } from 'react';
|
|
3
|
+
import type { SkeletonRadius, SkeletonSpeed, SkeletonVariant } from './Skeleton';
|
|
4
|
+
/**
|
|
5
|
+
* Per-instance color override for a skeleton. `background` is the resting tone
|
|
6
|
+
* of the placeholder; `highlight` is the moving shimmer band (or pulse fade).
|
|
7
|
+
* Either can be omitted — missing keys fall back to the active theme.
|
|
8
|
+
*/
|
|
9
|
+
export interface SkeletonColors {
|
|
10
|
+
background?: string;
|
|
11
|
+
highlight?: string;
|
|
12
|
+
}
|
|
13
|
+
export interface SkeletonProviderDefaults {
|
|
14
|
+
variant?: SkeletonVariant;
|
|
15
|
+
speed?: SkeletonSpeed;
|
|
16
|
+
/** Default `placeholderCount` for `<SkeletonList>` when not specified per-instance. */
|
|
17
|
+
placeholderCount?: number;
|
|
18
|
+
/** Default `radius` for `<Skeleton>` when not specified per-instance. */
|
|
19
|
+
radius?: SkeletonRadius;
|
|
20
|
+
/** App-wide colour overrides for the shimmer base + highlight. */
|
|
21
|
+
colors?: SkeletonColors;
|
|
22
|
+
}
|
|
23
|
+
export interface SkeletonProviderProps extends SkeletonProviderDefaults {
|
|
24
|
+
children: ReactNode;
|
|
25
|
+
}
|
|
26
|
+
export declare const SkeletonProvider: React.FC<SkeletonProviderProps>;
|
|
27
|
+
/**
|
|
28
|
+
* Read the current SkeletonProvider defaults. Returns an empty object when no
|
|
29
|
+
* provider is mounted, so the skeleton primitives still work outside of one.
|
|
30
|
+
*/
|
|
31
|
+
export declare const useSkeletonDefaults: () => SkeletonProviderDefaults;
|
|
32
|
+
//# sourceMappingURL=SkeletonProvider.d.ts.map
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ReactNode } from 'react';
|
|
3
|
+
export interface SkeletonSkipProps {
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* Pass-through marker that opts a subtree out of `SkeletonContent`'s auto walker.
|
|
8
|
+
*
|
|
9
|
+
* The walker recognizes this element type and returns its children unchanged
|
|
10
|
+
* even while `loading` is true. Use it to keep a specific Text/Image/View
|
|
11
|
+
* visible inside a skeleton block — e.g., a brand mark, a status icon, or a
|
|
12
|
+
* decorative element that should never shimmer.
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* <SkeletonContent loading>
|
|
16
|
+
* <View style={styles.card}>
|
|
17
|
+
* <SkeletonSkip>
|
|
18
|
+
* <Image source={Logo} style={styles.brandMark} />
|
|
19
|
+
* </SkeletonSkip>
|
|
20
|
+
* <Text>Loading…</Text>
|
|
21
|
+
* </View>
|
|
22
|
+
* </SkeletonContent>
|
|
23
|
+
*/
|
|
24
|
+
export declare const SkeletonSkip: React.FC<SkeletonSkipProps>;
|
|
25
|
+
//# sourceMappingURL=SkeletonSkip.d.ts.map
|
|
@@ -4,4 +4,8 @@ export { SkeletonContent } from './SkeletonContent';
|
|
|
4
4
|
export type { SkeletonContentProps, SkeletonContentMode } from './SkeletonContent';
|
|
5
5
|
export { SkeletonList } from './SkeletonList';
|
|
6
6
|
export type { SkeletonListProps } from './SkeletonList';
|
|
7
|
+
export { SkeletonProvider, useSkeletonDefaults } from './SkeletonProvider';
|
|
8
|
+
export type { SkeletonColors, SkeletonProviderDefaults, SkeletonProviderProps } from './SkeletonProvider';
|
|
9
|
+
export { SkeletonSkip } from './SkeletonSkip';
|
|
10
|
+
export type { SkeletonSkipProps } from './SkeletonSkip';
|
|
7
11
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -13,6 +13,11 @@ export interface SwitchProps extends Omit<PressableProps, 'style' | 'children' |
|
|
|
13
13
|
label?: string;
|
|
14
14
|
accessibilityLabel?: string;
|
|
15
15
|
haptic?: HapticType | false;
|
|
16
|
+
/**
|
|
17
|
+
* When true, the thumb briefly scales up on value change (1 → 1.15 → 1).
|
|
18
|
+
* Use for playful/brand-flavored switches; default off for system feel.
|
|
19
|
+
*/
|
|
20
|
+
bounce?: boolean;
|
|
16
21
|
style?: StyleProp<ViewStyle>;
|
|
17
22
|
trackStyle?: StyleProp<ViewStyle>;
|
|
18
23
|
thumbStyle?: StyleProp<ViewStyle>;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
|
|
2
3
|
import type { HapticType } from '../../utils/hapticUtils';
|
|
3
4
|
export type ToastVariant = 'default' | 'success' | 'error' | 'warning' | 'info';
|
|
4
5
|
export type ToastPosition = 'top' | 'bottom';
|
|
@@ -15,6 +16,10 @@ export interface ToastOptions {
|
|
|
15
16
|
action?: ToastAction;
|
|
16
17
|
haptic?: HapticType | false;
|
|
17
18
|
icon?: React.ReactNode;
|
|
19
|
+
/** Style applied to the toast container (override radius, padding, shadow per-toast). */
|
|
20
|
+
style?: StyleProp<ViewStyle>;
|
|
21
|
+
/** Style applied to the toast message Text. */
|
|
22
|
+
textStyle?: StyleProp<TextStyle>;
|
|
18
23
|
}
|
|
19
24
|
export interface ToastItem extends ToastOptions {
|
|
20
25
|
id: string;
|
|
@@ -70,8 +70,8 @@ export { Select } from './Select';
|
|
|
70
70
|
export type { SelectProps, SelectOption, SelectSize } from './Select';
|
|
71
71
|
export { Stepper } from './Stepper';
|
|
72
72
|
export type { StepperProps, StepperVariant, StepperStep, StepperTone } from './Stepper';
|
|
73
|
-
export { Skeleton, SkeletonAvatar, SkeletonCard, SkeletonCircle, SkeletonContent, SkeletonList, SkeletonListItem, SkeletonText } from './Skeleton';
|
|
74
|
-
export type {
|
|
73
|
+
export { Skeleton, SkeletonAvatar, SkeletonCard, SkeletonCircle, SkeletonContent, SkeletonList, SkeletonListItem, SkeletonProvider, SkeletonSkip, SkeletonText, useSkeletonDefaults } from './Skeleton';
|
|
74
|
+
export type { SkeletonAvatarProps, SkeletonCardProps, SkeletonCircleProps, SkeletonColors, SkeletonContentMode, SkeletonContentProps, SkeletonListItemProps, SkeletonListProps, SkeletonProps, SkeletonProviderDefaults, SkeletonProviderProps, SkeletonSkipProps, SkeletonSpeed, SkeletonTextProps, SkeletonVariant } from './Skeleton';
|
|
75
75
|
export { Slider } from './Slider';
|
|
76
76
|
export type { SliderProps, SliderTone, SliderSize } from './Slider';
|
|
77
77
|
export { Swipeable } from './Swipeable';
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { StyleProp, ViewStyle } from 'react-native';
|
|
3
|
+
import type { GradientDefinition } from './types';
|
|
4
|
+
export interface GradientProps {
|
|
5
|
+
gradient: GradientDefinition;
|
|
6
|
+
style?: StyleProp<ViewStyle>;
|
|
7
|
+
children?: React.ReactNode;
|
|
8
|
+
}
|
|
9
|
+
export declare const Gradient: React.FC<GradientProps>;
|
|
10
|
+
export declare const isGradientAvailable: () => boolean;
|
|
11
|
+
//# sourceMappingURL=Gradient.d.ts.map
|
|
@@ -9,5 +9,9 @@ export { ThemeProvider, useTheme, useThemeMode } from './ThemeContext';
|
|
|
9
9
|
export type { ThemeProviderProps, ColorSchemePreference } from './ThemeContext';
|
|
10
10
|
export { lightTheme, darkTheme } from './tokens';
|
|
11
11
|
export { mergeTheme } from './merge';
|
|
12
|
-
export
|
|
12
|
+
export { fontFor } from './textStyle';
|
|
13
|
+
export type { FontWeightKey } from './textStyle';
|
|
14
|
+
export { Gradient, isGradientAvailable } from './Gradient';
|
|
15
|
+
export type { GradientProps } from './Gradient';
|
|
16
|
+
export type { ColorMode, ColorPalette, GradientDefinition, GradientScale, RadiusScale, ShadowDefinition, ShadowScale, SpacingScale, Theme, ThemeOverrides, TypographyScale, MotionScale, DeepPartial } from './types';
|
|
13
17
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { TextStyle } from 'react-native';
|
|
2
|
+
import type { Theme, TypographyScale } from './types';
|
|
3
|
+
export type FontWeightKey = keyof TypographyScale['fontWeight'];
|
|
4
|
+
/**
|
|
5
|
+
* Resolve text-weight style for the active theme.
|
|
6
|
+
*
|
|
7
|
+
* When the consumer registers a brand `theme.typography.fontFamily.<weight>`,
|
|
8
|
+
* we set `fontFamily` and leave `fontWeight` undefined — RN can't combine the
|
|
9
|
+
* two reliably across iOS/Android once a custom face is in play, so the brand
|
|
10
|
+
* file controls the weight glyph itself. Falls back to `fontWeight` when no
|
|
11
|
+
* brand font is registered for that weight.
|
|
12
|
+
*
|
|
13
|
+
* Note: the fontWeight scale uses `normal` while FontFamilyScale uses
|
|
14
|
+
* `regular` (the conventional font-name suffix). The helper maps between
|
|
15
|
+
* them transparently.
|
|
16
|
+
*/
|
|
17
|
+
export declare const fontFor: (theme: Theme, weight: FontWeightKey) => Pick<TextStyle, "fontFamily" | "fontWeight">;
|
|
18
|
+
//# sourceMappingURL=textStyle.d.ts.map
|