@retray-dev/ui-kit 4.0.0 → 5.2.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.
Files changed (50) hide show
  1. package/COMPONENTS.md +1806 -663
  2. package/README.md +14 -10
  3. package/dist/index.d.mts +274 -85
  4. package/dist/index.d.ts +274 -85
  5. package/dist/index.js +1048 -321
  6. package/dist/index.mjs +1046 -324
  7. package/package.json +3 -2
  8. package/src/components/Accordion/Accordion.tsx +1 -1
  9. package/src/components/AlertBanner/AlertBanner.tsx +50 -45
  10. package/src/components/Avatar/Avatar.tsx +61 -17
  11. package/src/components/Badge/Badge.tsx +17 -15
  12. package/src/components/Button/Button.tsx +31 -42
  13. package/src/components/Card/Card.tsx +4 -4
  14. package/src/components/CategoryStrip/CategoryStrip.tsx +185 -0
  15. package/src/components/CategoryStrip/index.ts +2 -0
  16. package/src/components/Checkbox/Checkbox.tsx +44 -16
  17. package/src/components/Chip/Chip.tsx +1 -1
  18. package/src/components/ConfirmDialog/ConfirmDialog.tsx +9 -9
  19. package/src/components/CurrencyDisplay/CurrencyDisplay.tsx +1 -0
  20. package/src/components/CurrencyInput/CurrencyInput.tsx +6 -4
  21. package/src/components/EmptyState/EmptyState.tsx +9 -9
  22. package/src/components/IconButton/IconButton.tsx +74 -34
  23. package/src/components/Input/Input.tsx +15 -13
  24. package/src/components/LabelValue/LabelValue.tsx +1 -1
  25. package/src/components/ListItem/ListItem.tsx +5 -5
  26. package/src/components/MediaCard/MediaCard.tsx +249 -0
  27. package/src/components/MediaCard/index.ts +2 -0
  28. package/src/components/Pressable/Pressable.tsx +100 -0
  29. package/src/components/Pressable/index.ts +1 -0
  30. package/src/components/Progress/Progress.tsx +14 -7
  31. package/src/components/RadioGroup/RadioGroup.tsx +1 -1
  32. package/src/components/Select/Select.tsx +5 -5
  33. package/src/components/Sheet/Sheet.tsx +35 -15
  34. package/src/components/Skeleton/Skeleton.tsx +34 -7
  35. package/src/components/Slider/Slider.tsx +2 -2
  36. package/src/components/Spinner/Spinner.tsx +1 -1
  37. package/src/components/Switch/Switch.tsx +31 -4
  38. package/src/components/Tabs/Tabs.tsx +63 -45
  39. package/src/components/Text/Text.tsx +59 -10
  40. package/src/components/Textarea/Textarea.tsx +4 -3
  41. package/src/components/Toast/Toast.tsx +77 -36
  42. package/src/components/Toggle/Toggle.tsx +3 -3
  43. package/src/index.ts +8 -2
  44. package/src/theme/ThemeProvider.tsx +11 -10
  45. package/src/theme/colorUtils.ts +80 -0
  46. package/src/theme/colors.ts +76 -35
  47. package/src/theme/index.ts +2 -2
  48. package/src/theme/types.ts +27 -13
  49. package/src/tokens.ts +150 -13
  50. package/src/utils/hover.ts +25 -0
package/dist/index.d.ts CHANGED
@@ -1,31 +1,34 @@
1
1
  import React from 'react';
2
- import { TouchableOpacityProps, TextProps as TextProps$1, TextInputProps, TextStyle, ViewStyle, ActivityIndicatorProps } from 'react-native';
2
+ import { TouchableOpacityProps, TextProps as TextProps$1, TextInputProps, TextStyle, ViewStyle, ActivityIndicatorProps, ImageSourcePropType } from 'react-native';
3
3
  export { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
4
4
 
5
5
  type ThemeColors = {
6
6
  background: string;
7
7
  foreground: string;
8
8
  card: string;
9
- cardForeground: string;
10
9
  primary: string;
11
10
  primaryForeground: string;
12
- secondary: string;
13
- secondaryForeground: string;
14
- muted: string;
15
- mutedForeground: string;
16
- accent: string;
17
- accentForeground: string;
11
+ border: string;
18
12
  destructive: string;
19
13
  destructiveForeground: string;
20
- border: string;
21
- input: string;
22
- ring: string;
23
14
  success: string;
24
15
  successForeground: string;
16
+ warning: string;
17
+ warningForeground: string;
18
+ };
19
+ type ResolvedColors = ThemeColors & {
20
+ foregroundSubtle: string;
21
+ foregroundMuted: string;
22
+ surface: string;
23
+ surfaceStrong: string;
25
24
  destructiveTint: string;
26
25
  destructiveBorder: string;
27
26
  successTint: string;
28
27
  successBorder: string;
28
+ warningTint: string;
29
+ warningBorder: string;
30
+ ring: string;
31
+ input: string;
29
32
  };
30
33
  type Theme = {
31
34
  light?: Partial<ThemeColors>;
@@ -33,22 +36,22 @@ type Theme = {
33
36
  };
34
37
  type ColorScheme = 'light' | 'dark' | 'system';
35
38
  type ThemeContextValue = {
36
- colors: ThemeColors;
39
+ colors: ResolvedColors;
37
40
  colorScheme: 'light' | 'dark';
38
41
  };
39
42
 
40
43
  interface ThemeProviderProps {
41
44
  children: React.ReactNode;
42
45
  /**
43
- * Optional full-palette overrides per scheme. Supply a partial or full `ThemeColors` object
44
- * for `light` and/or `dark` to override the defaults.
45
- * @example
46
- * { light: { primary: '#6366f1', card: '#fff' }, dark: { primary: '#818cf8' } }
46
+ * Optional token overrides per scheme. Supply any of the 12 public ThemeColors
47
+ * tokens for `light` and/or `dark`. All derived colors are recomputed automatically.
48
+ * @example
49
+ * { light: { primary: '#ff385c' }, dark: { primary: '#ff385c' } }
47
50
  */
48
51
  theme?: Theme;
49
52
  /**
50
- * - `'system'` (default): auto-detects device setting and updates when it changes.
51
- * - `'light'` / `'dark'`: forces a specific scheme regardless of device setting.
53
+ * - `'system'` (default): auto-detects device setting.
54
+ * - `'light'` / `'dark'`: forces a specific scheme.
52
55
  */
53
56
  colorScheme?: ColorScheme;
54
57
  }
@@ -57,61 +60,45 @@ declare function useTheme(): ThemeContextValue;
57
60
 
58
61
  declare const defaultLight: ThemeColors;
59
62
  declare const defaultDark: ThemeColors;
63
+ declare function deriveColors(t: ThemeColors, scheme: 'light' | 'dark'): ResolvedColors;
60
64
 
61
- type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
65
+ type ButtonVariant = 'primary' | 'secondary' | 'text' | 'destructive';
62
66
  type ButtonSize = 'sm' | 'md' | 'lg';
63
67
  interface ButtonProps extends TouchableOpacityProps {
64
68
  label: string;
65
- /**
66
- * - `primary`: filled with `primary` token — main CTA
67
- * - `secondary`: filled with `secondary` token — less prominent
68
- * - `outline`: transparent with border — alternative actions
69
- * - `ghost`: fully transparent — in-context or low-emphasis actions
70
- */
71
69
  variant?: ButtonVariant;
72
70
  size?: ButtonSize;
73
- /** Replaces the label with a spinner and forces `disabled`. */
74
71
  loading?: boolean;
75
72
  fullWidth?: boolean;
76
- /** Icon rendered alongside the label. Can be a ReactNode or a render function `(props) => ReactNode`. */
77
73
  icon?: React.ReactNode | ((props: {
78
74
  label: string;
79
75
  size: ButtonSize;
80
76
  variant: ButtonVariant;
81
77
  }) => React.ReactNode);
82
- /**
83
- * Icon name from `@expo/vector-icons` (e.g. `"home"`, `"star"`, `"arrow-right"`).
84
- * See https://icons.expo.fyi to browse available icons.
85
- * Takes precedence over `icon` when both are supplied.
86
- */
87
78
  iconName?: string;
88
- /** Override the resolved icon color. Defaults to the label foreground color for the active variant. */
89
79
  iconColor?: string;
90
- /** Side the icon appears on. Defaults to `'left'`. */
91
80
  iconPosition?: 'left' | 'right';
92
81
  }
93
82
  declare function Button({ label, variant, size, loading, fullWidth, icon, iconName, iconColor, iconPosition, disabled, style, onPress, ...props }: ButtonProps): React.JSX.Element;
94
83
 
95
- type IconButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
84
+ type IconButtonVariant = 'primary' | 'secondary' | 'outline' | 'text' | 'destructive';
96
85
  type IconButtonSize = 'sm' | 'md' | 'lg';
97
86
  interface IconButtonProps extends TouchableOpacityProps {
98
- /**
99
- * Icon name from `@expo/vector-icons` (e.g. `"home"`, `"star"`, `"plus"`).
100
- * See https://icons.expo.fyi. Takes precedence over `icon` when both supplied.
101
- */
102
87
  iconName?: string;
103
- /** ReactNode icon — used when `iconName` is not provided. */
104
88
  icon?: React.ReactNode;
105
- /** Override the resolved icon color. Defaults to the foreground color for the active variant. */
106
89
  iconColor?: string;
107
90
  variant?: IconButtonVariant;
108
91
  size?: IconButtonSize;
109
- /** Replaces icon with a spinner and forces `disabled`. */
110
92
  loading?: boolean;
93
+ /**
94
+ * Badge overlay. `true` shows a dot. A number shows a count (capped at 99).
95
+ * The dot/count appears top-right of the button.
96
+ */
97
+ badge?: boolean | number;
111
98
  }
112
- declare function IconButton({ iconName, icon, iconColor, variant, size, loading, disabled, style, onPress, ...props }: IconButtonProps): React.JSX.Element;
99
+ declare function IconButton({ iconName, icon, iconColor, variant, size, loading, badge, disabled, style, onPress, ...props }: IconButtonProps): React.JSX.Element;
113
100
 
114
- type TextVariant = 'h1' | 'h2' | 'h3' | 'body' | 'caption' | 'label';
101
+ type TextVariant = 'display-hero' | 'display-xl' | 'display-lg' | 'display-md' | 'display-sm' | 'title-md' | 'title-sm' | 'body-md' | 'body-sm' | 'caption' | 'caption-sm' | 'badge-text' | 'micro-label' | 'uppercase-tag' | 'button-lg' | 'button-sm';
115
102
  interface TextProps extends TextProps$1 {
116
103
  variant?: TextVariant;
117
104
  color?: string;
@@ -155,7 +142,7 @@ interface InputProps extends TextInputProps {
155
142
  }
156
143
  declare function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type, containerStyle, inputWrapperStyle, style, onFocus, onBlur, secureTextEntry, ...props }: InputProps): React.JSX.Element;
157
144
 
158
- type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'successOutline' | 'destructiveOutline';
145
+ type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'successOutline' | 'destructiveOutline' | 'warningOutline';
159
146
  type BadgeSize = 'sm' | 'md' | 'lg';
160
147
  interface BadgeProps {
161
148
  label?: string;
@@ -226,50 +213,51 @@ interface SpinnerProps extends Omit<ActivityIndicatorProps, 'size'> {
226
213
  }
227
214
  declare function Spinner({ size, color, label, ...props }: SpinnerProps): React.JSX.Element;
228
215
 
216
+ type SkeletonPreset = 'base' | 'circle' | 'text';
229
217
  interface SkeletonProps {
230
218
  width?: number | string;
231
219
  height?: number;
232
220
  borderRadius?: number;
221
+ /** Preset shape. `'circle'` forces width=height square with full radius. `'text'` renders a short line. */
222
+ preset?: SkeletonPreset;
223
+ /** Only used with `preset='circle'` — overrides the diameter. Defaults to 40. */
224
+ diameter?: number;
233
225
  style?: ViewStyle;
234
226
  }
235
- declare function Skeleton({ width, height, borderRadius, style }: SkeletonProps): React.JSX.Element;
227
+ declare function Skeleton({ width, height, borderRadius, preset, diameter, style, }: SkeletonProps): React.JSX.Element;
236
228
 
237
229
  type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
230
+ type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
238
231
  interface AvatarProps {
239
- /** Remote image URI. Falls back to `fallback` initials on error or when omitted. */
240
232
  src?: string;
241
- /** Up to 2 characters shown when the image is unavailable. Auto-uppercased. Defaults to `'?'`. */
242
233
  fallback?: string;
243
234
  size?: AvatarSize;
235
+ /** Optional status indicator dot — bottom-right corner. */
236
+ status?: AvatarStatus;
244
237
  style?: ViewStyle;
245
238
  }
246
- declare function Avatar({ src, fallback, size, style }: AvatarProps): React.JSX.Element;
239
+ declare function Avatar({ src, fallback, size, status, style }: AvatarProps): React.JSX.Element;
247
240
 
248
- type AlertBannerVariant = 'default' | 'destructive' | 'success';
241
+ type AlertBannerVariant = 'default' | 'destructive' | 'success' | 'warning';
249
242
  interface AlertBannerProps {
250
243
  title: string;
251
244
  description?: string;
252
245
  variant?: AlertBannerVariant;
253
246
  icon?: React.ReactNode;
254
- /**
255
- * Icon name from `@expo/vector-icons`. See https://icons.expo.fyi.
256
- * Takes precedence over `icon`. When neither is set, a default variant icon is shown.
257
- */
258
247
  iconName?: string;
259
- /** Override the resolved icon color. Defaults to the variant title color. */
260
248
  iconColor?: string;
261
249
  style?: ViewStyle;
262
250
  }
263
251
  declare function AlertBanner({ title, description, variant, icon, iconName, iconColor, style }: AlertBannerProps): React.JSX.Element;
264
252
 
253
+ type ProgressVariant = 'default' | 'success' | 'warning' | 'destructive';
265
254
  interface ProgressProps {
266
- /** Current progress value. Clamped to `[0, max]`. Defaults to `0`. */
267
255
  value?: number;
268
- /** Maximum value. Defaults to `100`. */
269
256
  max?: number;
257
+ variant?: ProgressVariant;
270
258
  style?: ViewStyle;
271
259
  }
272
- declare function Progress({ value, max, style }: ProgressProps): React.JSX.Element;
260
+ declare function Progress({ value, max, variant, style }: ProgressProps): React.JSX.Element;
273
261
 
274
262
  interface EmptyStateProps {
275
263
  icon?: React.ReactNode;
@@ -367,12 +355,10 @@ interface TabItem {
367
355
  value: string;
368
356
  icon?: React.ReactNode | ((active: boolean) => React.ReactNode);
369
357
  }
358
+ type TabsVariant = 'pill' | 'underline';
370
359
  interface TabsProps {
371
360
  tabs: TabItem[];
372
- /**
373
- * Controlled active tab value. When omitted the component manages state internally
374
- * (uncontrolled), defaulting to the first tab.
375
- */
361
+ variant?: TabsVariant;
376
362
  value?: string;
377
363
  onValueChange?: (value: string) => void;
378
364
  children?: React.ReactNode;
@@ -384,7 +370,7 @@ interface TabsContentProps {
384
370
  children: React.ReactNode;
385
371
  style?: ViewStyle;
386
372
  }
387
- declare function Tabs({ tabs, value, onValueChange, children, style }: TabsProps): React.JSX.Element;
373
+ declare function Tabs({ tabs, variant, value, onValueChange, children, style }: TabsProps): React.JSX.Element;
388
374
  declare function TabsContent({ value, activeValue, children, style }: TabsContentProps): React.JSX.Element | null;
389
375
 
390
376
  interface AccordionItem {
@@ -427,10 +413,14 @@ interface SheetProps {
427
413
  title?: string;
428
414
  description?: string;
429
415
  children?: React.ReactNode;
430
- /** Style for the inner `BottomSheetView` content container. */
416
+ /** Style for the inner content container. */
431
417
  style?: ViewStyle;
418
+ /** Render children inside BottomSheetScrollView so gestures are handled correctly on both platforms. */
419
+ scrollable?: boolean;
420
+ /** Cap sheet height (dp). Children scroll when content exceeds this value. */
421
+ maxHeight?: number;
432
422
  }
433
- declare function Sheet({ open, onClose, title, description, children, style, }: SheetProps): React.JSX.Element;
423
+ declare function Sheet({ open, onClose, title, description, children, style, scrollable, maxHeight, }: SheetProps): React.JSX.Element;
434
424
 
435
425
  interface SelectOption {
436
426
  label: string;
@@ -449,22 +439,23 @@ interface SelectProps {
449
439
  }
450
440
  declare function Select({ options, value, onValueChange, placeholder, label, error, disabled, style, }: SelectProps): React.JSX.Element;
451
441
 
452
- type ToastVariant = 'default' | 'destructive' | 'success';
442
+ type ToastVariant = 'default' | 'destructive' | 'success' | 'warning';
443
+ interface ToastAction {
444
+ label: string;
445
+ onPress: () => void;
446
+ }
453
447
  interface ToastItem {
454
448
  id: string;
455
449
  title?: string;
456
450
  description?: string;
457
451
  variant?: ToastVariant;
458
452
  icon?: React.ReactNode;
459
- /**
460
- * Icon name from `@expo/vector-icons`. See https://icons.expo.fyi.
461
- * Takes precedence over `icon`. When neither is set, a default variant icon is shown.
462
- */
463
453
  iconName?: string;
464
- /** Override the resolved icon color. Defaults to the variant text color. */
465
454
  iconColor?: string;
466
455
  /** Auto-dismiss delay in milliseconds. Defaults to `3000`. */
467
456
  duration?: number;
457
+ /** Optional inline action button rendered at the end of the toast. */
458
+ action?: ToastAction;
468
459
  }
469
460
  interface ToastContextValue {
470
461
  toast: (item: Omit<ToastItem, 'id'>) => void;
@@ -628,6 +619,83 @@ interface MonthPickerProps {
628
619
  }
629
620
  declare function MonthPicker({ value, onChange, style }: MonthPickerProps): React.JSX.Element;
630
621
 
622
+ type MediaCardAspectRatio = '1:1' | '4:3' | '16:9' | '4:5' | '3:2';
623
+ interface MediaCardProps {
624
+ /** Image source — URI string or require(). */
625
+ imageSource?: ImageSourcePropType;
626
+ /** Image aspect ratio. Defaults to `'4:3'`. */
627
+ aspectRatio?: MediaCardAspectRatio;
628
+ /** Badge content rendered top-left over the image (e.g. a Badge component or Text). */
629
+ badge?: React.ReactNode;
630
+ /** Icon rendered in a circle button top-right over the image. Defaults to `'heart'`. */
631
+ actionIcon?: React.ReactNode;
632
+ /** Icon name for the action button. Overrides `actionIcon`. */
633
+ actionIconName?: string;
634
+ /** Whether the action icon is in active/filled state. */
635
+ actionActive?: boolean;
636
+ /** Called when the top-right action icon is pressed. */
637
+ onActionPress?: () => void;
638
+ /** Primary text below the image. */
639
+ title?: string;
640
+ /** Secondary text below the title. */
641
+ subtitle?: string;
642
+ /** Tertiary / caption text below subtitle. */
643
+ caption?: string;
644
+ /** Called when the card body is pressed. */
645
+ onPress?: () => void;
646
+ style?: ViewStyle;
647
+ /** Style for the image container. */
648
+ imageStyle?: ViewStyle;
649
+ /** Additional content rendered below caption. */
650
+ footer?: React.ReactNode;
651
+ }
652
+ declare function MediaCard({ imageSource, aspectRatio, badge, actionIcon, actionIconName, actionActive, onActionPress, title, subtitle, caption, onPress, style, imageStyle, footer, }: MediaCardProps): React.JSX.Element;
653
+
654
+ interface CategoryItem {
655
+ label: string;
656
+ value: string;
657
+ /** Icon rendered to the left of the label. ReactNode or icon name string. */
658
+ icon?: React.ReactNode | string;
659
+ /** Badge count over the icon/label. */
660
+ badge?: number;
661
+ }
662
+ interface CategoryStripProps {
663
+ categories: CategoryItem[];
664
+ value?: string | string[];
665
+ /** Called with new value(s) on selection change. */
666
+ onValueChange?: (value: string | string[]) => void;
667
+ /** Allow multiple simultaneous selections. Defaults to false. */
668
+ multiSelect?: boolean;
669
+ style?: ViewStyle;
670
+ /** Style applied to each pill item. */
671
+ itemStyle?: ViewStyle;
672
+ }
673
+ declare function CategoryStrip({ categories, value, onValueChange, multiSelect, style, itemStyle, }: CategoryStripProps): React.JSX.Element;
674
+
675
+ interface PressableProps extends Omit<TouchableOpacityProps, 'activeOpacity'> {
676
+ /** Children content to render inside the pressable. */
677
+ children: React.ReactNode;
678
+ /** Called when pressed. */
679
+ onPress?: () => void;
680
+ /** Scale value on press. Defaults to `0.98` (MediaCard-style). */
681
+ pressScale?: number;
682
+ /** Bounciness of the spring animation on release. Defaults to `4`. */
683
+ bounciness?: number;
684
+ /** Enable haptic feedback on press. Defaults to `true`. */
685
+ haptics?: boolean;
686
+ /** Additional style for the Animated wrapper. */
687
+ style?: ViewStyle;
688
+ /** Disable interaction. */
689
+ disabled?: boolean;
690
+ /** Hover scale (web only). Defaults to `1.02`. Set to `1` to disable. */
691
+ hoverScale?: number;
692
+ }
693
+ /**
694
+ * Generic pressable with beautiful spring bounce effect matching MediaCard interaction.
695
+ * Use for custom pressable content that needs consistent press feel.
696
+ */
697
+ declare function Pressable({ children, onPress, pressScale, bounciness, haptics, style, disabled, hoverScale, ...touchableProps }: PressableProps): React.JSX.Element;
698
+
631
699
  type IconFamily = 'Feather' | 'AntDesign' | 'Entypo' | 'FontAwesome5' | 'MaterialIcons' | 'Ionicons';
632
700
  interface IconProps {
633
701
  /** Icon name from any supported @expo/vector-icons family. See https://icons.expo.fyi */
@@ -641,13 +709,15 @@ declare function Icon({ name, size, color, family }: IconProps): React.ReactElem
641
709
  declare function renderIcon(name: string, size: number, color: string): React.ReactElement | null;
642
710
 
643
711
  declare const SPACING: {
712
+ readonly xxs: 2;
644
713
  readonly xs: 4;
645
714
  readonly sm: 8;
646
715
  readonly md: 12;
647
- readonly lg: 16;
648
- readonly xl: 24;
649
- readonly '2xl': 32;
650
- readonly '3xl': 48;
716
+ readonly base: 16;
717
+ readonly lg: 24;
718
+ readonly xl: 32;
719
+ readonly xxl: 48;
720
+ readonly section: 64;
651
721
  };
652
722
  declare const ICON_SIZES: {
653
723
  readonly sm: 14;
@@ -657,10 +727,12 @@ declare const ICON_SIZES: {
657
727
  readonly '2xl': 32;
658
728
  };
659
729
  declare const RADIUS: {
660
- readonly sm: 4;
661
- readonly md: 8;
662
- readonly lg: 12;
663
- readonly xl: 16;
730
+ readonly none: 0;
731
+ readonly xs: 4;
732
+ readonly sm: 8;
733
+ readonly md: 14;
734
+ readonly lg: 20;
735
+ readonly xl: 32;
664
736
  readonly full: 9999;
665
737
  };
666
738
  declare const SHADOWS: {
@@ -670,7 +742,7 @@ declare const SHADOWS: {
670
742
  readonly width: 0;
671
743
  readonly height: 1;
672
744
  };
673
- readonly shadowOpacity: 0.08;
745
+ readonly shadowOpacity: 0.06;
674
746
  readonly shadowRadius: 4;
675
747
  readonly elevation: 2;
676
748
  };
@@ -678,9 +750,9 @@ declare const SHADOWS: {
678
750
  readonly shadowColor: "#000";
679
751
  readonly shadowOffset: {
680
752
  readonly width: 0;
681
- readonly height: 3;
753
+ readonly height: 2;
682
754
  };
683
- readonly shadowOpacity: 0.12;
755
+ readonly shadowOpacity: 0.1;
684
756
  readonly shadowRadius: 8;
685
757
  readonly elevation: 5;
686
758
  };
@@ -690,7 +762,7 @@ declare const SHADOWS: {
690
762
  readonly width: 0;
691
763
  readonly height: 6;
692
764
  };
693
- readonly shadowOpacity: 0.2;
765
+ readonly shadowOpacity: 0.16;
694
766
  readonly shadowRadius: 16;
695
767
  readonly elevation: 10;
696
768
  };
@@ -700,7 +772,7 @@ declare const SHADOWS: {
700
772
  readonly width: 0;
701
773
  readonly height: 12;
702
774
  };
703
- readonly shadowOpacity: 0.28;
775
+ readonly shadowOpacity: 0.24;
704
776
  readonly shadowRadius: 24;
705
777
  readonly elevation: 18;
706
778
  };
@@ -708,11 +780,128 @@ declare const SHADOWS: {
708
780
  declare const BREAKPOINTS: {
709
781
  readonly wide: 700;
710
782
  };
783
+ declare const TYPOGRAPHY: {
784
+ readonly 'display-hero': {
785
+ readonly fontFamily: "Poppins-Bold";
786
+ readonly fontSize: 64;
787
+ readonly fontWeight: "700";
788
+ readonly lineHeight: 70;
789
+ readonly letterSpacing: -1;
790
+ };
791
+ readonly 'display-xl': {
792
+ readonly fontFamily: "Poppins-Bold";
793
+ readonly fontSize: 28;
794
+ readonly fontWeight: "700";
795
+ readonly lineHeight: 40;
796
+ readonly letterSpacing: 0;
797
+ };
798
+ readonly 'display-lg': {
799
+ readonly fontFamily: "Poppins-Medium";
800
+ readonly fontSize: 22;
801
+ readonly fontWeight: "500";
802
+ readonly lineHeight: 26;
803
+ readonly letterSpacing: -0.44;
804
+ };
805
+ readonly 'display-md': {
806
+ readonly fontFamily: "Poppins-Bold";
807
+ readonly fontSize: 21;
808
+ readonly fontWeight: "700";
809
+ readonly lineHeight: 30;
810
+ readonly letterSpacing: 0;
811
+ };
812
+ readonly 'display-sm': {
813
+ readonly fontFamily: "Poppins-SemiBold";
814
+ readonly fontSize: 20;
815
+ readonly fontWeight: "600";
816
+ readonly lineHeight: 24;
817
+ readonly letterSpacing: -0.18;
818
+ };
819
+ readonly 'title-md': {
820
+ readonly fontFamily: "Poppins-SemiBold";
821
+ readonly fontSize: 16;
822
+ readonly fontWeight: "600";
823
+ readonly lineHeight: 20;
824
+ readonly letterSpacing: 0;
825
+ };
826
+ readonly 'title-sm': {
827
+ readonly fontFamily: "Poppins-Medium";
828
+ readonly fontSize: 16;
829
+ readonly fontWeight: "500";
830
+ readonly lineHeight: 20;
831
+ readonly letterSpacing: 0;
832
+ };
833
+ readonly 'body-md': {
834
+ readonly fontFamily: "Poppins-Regular";
835
+ readonly fontSize: 16;
836
+ readonly fontWeight: "400";
837
+ readonly lineHeight: 24;
838
+ readonly letterSpacing: 0;
839
+ };
840
+ readonly 'body-sm': {
841
+ readonly fontFamily: "Poppins-Regular";
842
+ readonly fontSize: 14;
843
+ readonly fontWeight: "400";
844
+ readonly lineHeight: 20;
845
+ readonly letterSpacing: 0;
846
+ };
847
+ readonly caption: {
848
+ readonly fontFamily: "Poppins-Medium";
849
+ readonly fontSize: 14;
850
+ readonly fontWeight: "500";
851
+ readonly lineHeight: 18;
852
+ readonly letterSpacing: 0;
853
+ };
854
+ readonly 'caption-sm': {
855
+ readonly fontFamily: "Poppins-Regular";
856
+ readonly fontSize: 13;
857
+ readonly fontWeight: "400";
858
+ readonly lineHeight: 16;
859
+ readonly letterSpacing: 0;
860
+ };
861
+ readonly 'badge-text': {
862
+ readonly fontFamily: "Poppins-SemiBold";
863
+ readonly fontSize: 11;
864
+ readonly fontWeight: "600";
865
+ readonly lineHeight: 13;
866
+ readonly letterSpacing: 0;
867
+ };
868
+ readonly 'micro-label': {
869
+ readonly fontFamily: "Poppins-Bold";
870
+ readonly fontSize: 12;
871
+ readonly fontWeight: "700";
872
+ readonly lineHeight: 16;
873
+ readonly letterSpacing: 0;
874
+ };
875
+ readonly 'uppercase-tag': {
876
+ readonly fontFamily: "Poppins-Bold";
877
+ readonly fontSize: 8;
878
+ readonly fontWeight: "700";
879
+ readonly lineHeight: 10;
880
+ readonly letterSpacing: 0.32;
881
+ readonly textTransform: "uppercase";
882
+ };
883
+ readonly 'button-lg': {
884
+ readonly fontFamily: "Poppins-Medium";
885
+ readonly fontSize: 16;
886
+ readonly fontWeight: "500";
887
+ readonly lineHeight: 20;
888
+ readonly letterSpacing: 0;
889
+ };
890
+ readonly 'button-sm': {
891
+ readonly fontFamily: "Poppins-Medium";
892
+ readonly fontSize: 14;
893
+ readonly fontWeight: "500";
894
+ readonly lineHeight: 18;
895
+ readonly letterSpacing: 0;
896
+ };
897
+ };
711
898
  type Spacing = typeof SPACING;
712
899
  type SpacingKey = keyof Spacing;
713
900
  type IconSize = typeof ICON_SIZES;
714
901
  type IconSizeKey = keyof IconSize;
715
902
  type Radius = typeof RADIUS;
716
903
  type RadiusKey = keyof Radius;
904
+ type Typography = typeof TYPOGRAPHY;
905
+ type TypographyKey = keyof Typography;
717
906
 
718
- export { Accordion, type AccordionItem, type AccordionProps, AlertBanner, type AlertBannerProps, type AlertBannerVariant, Avatar, type AvatarProps, type AvatarSize, BREAKPOINTS, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipOption, type ChipProps, type ColorScheme, ConfirmDialog, type ConfirmDialogProps, CurrencyDisplay, type CurrencyDisplayProps, CurrencyInput, CurrencyInput as CurrencyInputLarge, type CurrencyInputProps, EmptyState, type EmptyStateProps, ICON_SIZES, Icon, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconFamily, type IconProps, type IconSize, type IconSizeKey, Input, type InputProps, LabelValue, type LabelValueProps, ListItem, type ListItemProps, MonthPicker, type MonthPickerProps, type MonthPickerValue, Progress, type ProgressProps, RADIUS, RadioGroup, type RadioGroupProps, type RadioOption, type Radius, type RadiusKey, SHADOWS, SPACING, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type Spacing, type SpacingKey, Spinner, type SpinnerProps, type SpinnerSize, Switch, type SwitchProps, type TabItem, Tabs, TabsContent, type TabsContentProps, type TabsProps, Text, type TextProps, type TextVariant, Textarea, type TextareaProps, type Theme, type ThemeColors, ThemeProvider, type ThemeProviderProps, type ToastItem, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, type ToggleVariant, defaultDark, defaultLight, renderIcon, useTheme, useToast };
907
+ export { Accordion, type AccordionItem, type AccordionProps, AlertBanner, type AlertBannerProps, type AlertBannerVariant, Avatar, type AvatarProps, type AvatarSize, BREAKPOINTS, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, type CategoryItem, CategoryStrip, type CategoryStripProps, Checkbox, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipOption, type ChipProps, type ColorScheme, ConfirmDialog, type ConfirmDialogProps, CurrencyDisplay, type CurrencyDisplayProps, CurrencyInput, CurrencyInput as CurrencyInputLarge, type CurrencyInputProps, EmptyState, type EmptyStateProps, ICON_SIZES, Icon, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconFamily, type IconProps, type IconSize, type IconSizeKey, Input, type InputProps, LabelValue, type LabelValueProps, ListItem, type ListItemProps, MediaCard, type MediaCardAspectRatio, type MediaCardProps, MonthPicker, type MonthPickerProps, type MonthPickerValue, Pressable, type PressableProps, Progress, type ProgressProps, RADIUS, RadioGroup, type RadioGroupProps, type RadioOption, type Radius, type RadiusKey, type ResolvedColors, SHADOWS, SPACING, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type Spacing, type SpacingKey, Spinner, type SpinnerProps, type SpinnerSize, Switch, type SwitchProps, TYPOGRAPHY, type TabItem, Tabs, TabsContent, type TabsContentProps, type TabsProps, Text, type TextProps, type TextVariant, Textarea, type TextareaProps, type Theme, type ThemeColors, ThemeProvider, type ThemeProviderProps, type ToastItem, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, type ToggleVariant, type Typography, type TypographyKey, defaultDark, defaultLight, deriveColors, renderIcon, useTheme, useToast };