@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.
Files changed (92) hide show
  1. package/README.md +3 -463
  2. package/lib/commonjs/components/Badge/Badge.js +23 -13
  3. package/lib/commonjs/components/BottomSheet/BottomSheet.js +39 -5
  4. package/lib/commonjs/components/Button/Button.js +25 -6
  5. package/lib/commonjs/components/Card/Card.js +13 -1
  6. package/lib/commonjs/components/Checkbox/Checkbox.js +5 -3
  7. package/lib/commonjs/components/Chip/Chip.js +12 -3
  8. package/lib/commonjs/components/Dialog/Dialog.js +15 -8
  9. package/lib/commonjs/components/EmptyState/EmptyState.js +32 -26
  10. package/lib/commonjs/components/FormField/FormField.js +3 -3
  11. package/lib/commonjs/components/Input/Input.js +13 -5
  12. package/lib/commonjs/components/ListItem/ListItem.js +33 -27
  13. package/lib/commonjs/components/OTPInput/OTPInput.js +6 -3
  14. package/lib/commonjs/components/Radio/Radio.js +7 -6
  15. package/lib/commonjs/components/SearchBar/SearchBar.js +9 -5
  16. package/lib/commonjs/components/Skeleton/Skeleton.js +20 -12
  17. package/lib/commonjs/components/Skeleton/SkeletonContent.js +25 -9
  18. package/lib/commonjs/components/Skeleton/SkeletonList.js +7 -2
  19. package/lib/commonjs/components/Skeleton/SkeletonProvider.js +48 -0
  20. package/lib/commonjs/components/Skeleton/SkeletonSkip.js +37 -0
  21. package/lib/commonjs/components/Skeleton/index.js +20 -0
  22. package/lib/commonjs/components/Switch/Switch.js +31 -2
  23. package/lib/commonjs/components/Toast/Toast.js +16 -11
  24. package/lib/commonjs/components/index.js +18 -0
  25. package/lib/commonjs/theme/Gradient.js +57 -0
  26. package/lib/commonjs/theme/index.js +20 -0
  27. package/lib/commonjs/theme/textStyle.js +37 -0
  28. package/lib/commonjs/theme/tokens.js +260 -2
  29. package/lib/module/components/Badge/Badge.js +24 -14
  30. package/lib/module/components/BottomSheet/BottomSheet.js +40 -6
  31. package/lib/module/components/Button/Button.js +26 -7
  32. package/lib/module/components/Card/Card.js +14 -2
  33. package/lib/module/components/Checkbox/Checkbox.js +5 -3
  34. package/lib/module/components/Chip/Chip.js +13 -4
  35. package/lib/module/components/Dialog/Dialog.js +16 -9
  36. package/lib/module/components/EmptyState/EmptyState.js +33 -27
  37. package/lib/module/components/FormField/FormField.js +4 -4
  38. package/lib/module/components/Input/Input.js +14 -6
  39. package/lib/module/components/ListItem/ListItem.js +34 -28
  40. package/lib/module/components/OTPInput/OTPInput.js +7 -4
  41. package/lib/module/components/Radio/Radio.js +7 -6
  42. package/lib/module/components/SearchBar/SearchBar.js +10 -6
  43. package/lib/module/components/Skeleton/Skeleton.js +20 -12
  44. package/lib/module/components/Skeleton/SkeletonContent.js +25 -9
  45. package/lib/module/components/Skeleton/SkeletonList.js +7 -2
  46. package/lib/module/components/Skeleton/SkeletonProvider.js +41 -0
  47. package/lib/module/components/Skeleton/SkeletonSkip.js +31 -0
  48. package/lib/module/components/Skeleton/index.js +2 -0
  49. package/lib/module/components/Switch/Switch.js +31 -2
  50. package/lib/module/components/Toast/Toast.js +17 -12
  51. package/lib/module/components/index.js +1 -1
  52. package/lib/module/theme/Gradient.js +50 -0
  53. package/lib/module/theme/index.js +2 -0
  54. package/lib/module/theme/textStyle.js +32 -0
  55. package/lib/module/theme/tokens.js +260 -2
  56. package/lib/typescript/commonjs/components/BottomSheet/BottomSheet.d.ts +10 -0
  57. package/lib/typescript/commonjs/components/Button/Button.d.ts +8 -0
  58. package/lib/typescript/commonjs/components/Card/Card.d.ts +8 -0
  59. package/lib/typescript/commonjs/components/Dialog/Dialog.d.ts +5 -0
  60. package/lib/typescript/commonjs/components/Input/Input.d.ts +12 -0
  61. package/lib/typescript/commonjs/components/Skeleton/Skeleton.d.ts +9 -0
  62. package/lib/typescript/commonjs/components/Skeleton/SkeletonContent.d.ts +6 -0
  63. package/lib/typescript/commonjs/components/Skeleton/SkeletonList.d.ts +3 -0
  64. package/lib/typescript/commonjs/components/Skeleton/SkeletonProvider.d.ts +32 -0
  65. package/lib/typescript/commonjs/components/Skeleton/SkeletonSkip.d.ts +25 -0
  66. package/lib/typescript/commonjs/components/Skeleton/index.d.ts +4 -0
  67. package/lib/typescript/commonjs/components/Switch/Switch.d.ts +5 -0
  68. package/lib/typescript/commonjs/components/Toast/Toast.d.ts +5 -0
  69. package/lib/typescript/commonjs/components/index.d.ts +2 -2
  70. package/lib/typescript/commonjs/theme/Gradient.d.ts +11 -0
  71. package/lib/typescript/commonjs/theme/index.d.ts +5 -1
  72. package/lib/typescript/commonjs/theme/textStyle.d.ts +18 -0
  73. package/lib/typescript/commonjs/theme/types.d.ts +178 -0
  74. package/lib/typescript/module/components/BottomSheet/BottomSheet.d.ts +10 -0
  75. package/lib/typescript/module/components/Button/Button.d.ts +8 -0
  76. package/lib/typescript/module/components/Card/Card.d.ts +8 -0
  77. package/lib/typescript/module/components/Dialog/Dialog.d.ts +5 -0
  78. package/lib/typescript/module/components/Input/Input.d.ts +12 -0
  79. package/lib/typescript/module/components/Skeleton/Skeleton.d.ts +9 -0
  80. package/lib/typescript/module/components/Skeleton/SkeletonContent.d.ts +6 -0
  81. package/lib/typescript/module/components/Skeleton/SkeletonList.d.ts +3 -0
  82. package/lib/typescript/module/components/Skeleton/SkeletonProvider.d.ts +32 -0
  83. package/lib/typescript/module/components/Skeleton/SkeletonSkip.d.ts +25 -0
  84. package/lib/typescript/module/components/Skeleton/index.d.ts +4 -0
  85. package/lib/typescript/module/components/Switch/Switch.d.ts +5 -0
  86. package/lib/typescript/module/components/Toast/Toast.d.ts +5 -0
  87. package/lib/typescript/module/components/index.d.ts +2 -2
  88. package/lib/typescript/module/theme/Gradient.d.ts +11 -0
  89. package/lib/typescript/module/theme/index.d.ts +5 -1
  90. package/lib/typescript/module/theme/textStyle.d.ts +18 -0
  91. package/lib/typescript/module/theme/types.d.ts +178 -0
  92. 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 { SkeletonProps, SkeletonAvatarProps, SkeletonCardProps, SkeletonCircleProps, SkeletonContentMode, SkeletonContentProps, SkeletonListItemProps, SkeletonListProps, SkeletonTextProps, SkeletonVariant, SkeletonSpeed } from './Skeleton';
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 type { ColorMode, ColorPalette, RadiusScale, ShadowDefinition, ShadowScale, SpacingScale, Theme, ThemeOverrides, TypographyScale, MotionScale, DeepPartial } from './types';
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