@retray-dev/ui-kit 3.1.0 → 5.1.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 +1792 -659
  2. package/README.md +8 -7
  3. package/dist/index.d.mts +269 -89
  4. package/dist/index.d.ts +269 -89
  5. package/dist/index.js +1034 -312
  6. package/dist/index.mjs +1031 -314
  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 +4 -4
  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 +3 -9
  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,15 +413,10 @@ interface SheetProps {
427
413
  title?: string;
428
414
  description?: string;
429
415
  children?: React.ReactNode;
430
- /**
431
- * Heights the sheet can snap to. Accepts percentage strings (`'50%'`) or
432
- * absolute point values (`300`). Defaults to `['50%']`.
433
- */
434
- snapPoints?: (string | number)[];
435
416
  /** Style for the inner `BottomSheetView` content container. */
436
417
  style?: ViewStyle;
437
418
  }
438
- declare function Sheet({ open, onClose, title, description, children, snapPoints, style, }: SheetProps): React.JSX.Element;
419
+ declare function Sheet({ open, onClose, title, description, children, style, }: SheetProps): React.JSX.Element;
439
420
 
440
421
  interface SelectOption {
441
422
  label: string;
@@ -454,22 +435,23 @@ interface SelectProps {
454
435
  }
455
436
  declare function Select({ options, value, onValueChange, placeholder, label, error, disabled, style, }: SelectProps): React.JSX.Element;
456
437
 
457
- type ToastVariant = 'default' | 'destructive' | 'success';
438
+ type ToastVariant = 'default' | 'destructive' | 'success' | 'warning';
439
+ interface ToastAction {
440
+ label: string;
441
+ onPress: () => void;
442
+ }
458
443
  interface ToastItem {
459
444
  id: string;
460
445
  title?: string;
461
446
  description?: string;
462
447
  variant?: ToastVariant;
463
448
  icon?: React.ReactNode;
464
- /**
465
- * Icon name from `@expo/vector-icons`. See https://icons.expo.fyi.
466
- * Takes precedence over `icon`. When neither is set, a default variant icon is shown.
467
- */
468
449
  iconName?: string;
469
- /** Override the resolved icon color. Defaults to the variant text color. */
470
450
  iconColor?: string;
471
451
  /** Auto-dismiss delay in milliseconds. Defaults to `3000`. */
472
452
  duration?: number;
453
+ /** Optional inline action button rendered at the end of the toast. */
454
+ action?: ToastAction;
473
455
  }
474
456
  interface ToastContextValue {
475
457
  toast: (item: Omit<ToastItem, 'id'>) => void;
@@ -633,6 +615,83 @@ interface MonthPickerProps {
633
615
  }
634
616
  declare function MonthPicker({ value, onChange, style }: MonthPickerProps): React.JSX.Element;
635
617
 
618
+ type MediaCardAspectRatio = '1:1' | '4:3' | '16:9' | '4:5' | '3:2';
619
+ interface MediaCardProps {
620
+ /** Image source — URI string or require(). */
621
+ imageSource?: ImageSourcePropType;
622
+ /** Image aspect ratio. Defaults to `'4:3'`. */
623
+ aspectRatio?: MediaCardAspectRatio;
624
+ /** Badge content rendered top-left over the image (e.g. a Badge component or Text). */
625
+ badge?: React.ReactNode;
626
+ /** Icon rendered in a circle button top-right over the image. Defaults to `'heart'`. */
627
+ actionIcon?: React.ReactNode;
628
+ /** Icon name for the action button. Overrides `actionIcon`. */
629
+ actionIconName?: string;
630
+ /** Whether the action icon is in active/filled state. */
631
+ actionActive?: boolean;
632
+ /** Called when the top-right action icon is pressed. */
633
+ onActionPress?: () => void;
634
+ /** Primary text below the image. */
635
+ title?: string;
636
+ /** Secondary text below the title. */
637
+ subtitle?: string;
638
+ /** Tertiary / caption text below subtitle. */
639
+ caption?: string;
640
+ /** Called when the card body is pressed. */
641
+ onPress?: () => void;
642
+ style?: ViewStyle;
643
+ /** Style for the image container. */
644
+ imageStyle?: ViewStyle;
645
+ /** Additional content rendered below caption. */
646
+ footer?: React.ReactNode;
647
+ }
648
+ declare function MediaCard({ imageSource, aspectRatio, badge, actionIcon, actionIconName, actionActive, onActionPress, title, subtitle, caption, onPress, style, imageStyle, footer, }: MediaCardProps): React.JSX.Element;
649
+
650
+ interface CategoryItem {
651
+ label: string;
652
+ value: string;
653
+ /** Icon rendered to the left of the label. ReactNode or icon name string. */
654
+ icon?: React.ReactNode | string;
655
+ /** Badge count over the icon/label. */
656
+ badge?: number;
657
+ }
658
+ interface CategoryStripProps {
659
+ categories: CategoryItem[];
660
+ value?: string | string[];
661
+ /** Called with new value(s) on selection change. */
662
+ onValueChange?: (value: string | string[]) => void;
663
+ /** Allow multiple simultaneous selections. Defaults to false. */
664
+ multiSelect?: boolean;
665
+ style?: ViewStyle;
666
+ /** Style applied to each pill item. */
667
+ itemStyle?: ViewStyle;
668
+ }
669
+ declare function CategoryStrip({ categories, value, onValueChange, multiSelect, style, itemStyle, }: CategoryStripProps): React.JSX.Element;
670
+
671
+ interface PressableProps extends Omit<TouchableOpacityProps, 'activeOpacity'> {
672
+ /** Children content to render inside the pressable. */
673
+ children: React.ReactNode;
674
+ /** Called when pressed. */
675
+ onPress?: () => void;
676
+ /** Scale value on press. Defaults to `0.98` (MediaCard-style). */
677
+ pressScale?: number;
678
+ /** Bounciness of the spring animation on release. Defaults to `4`. */
679
+ bounciness?: number;
680
+ /** Enable haptic feedback on press. Defaults to `true`. */
681
+ haptics?: boolean;
682
+ /** Additional style for the Animated wrapper. */
683
+ style?: ViewStyle;
684
+ /** Disable interaction. */
685
+ disabled?: boolean;
686
+ /** Hover scale (web only). Defaults to `1.02`. Set to `1` to disable. */
687
+ hoverScale?: number;
688
+ }
689
+ /**
690
+ * Generic pressable with beautiful spring bounce effect matching MediaCard interaction.
691
+ * Use for custom pressable content that needs consistent press feel.
692
+ */
693
+ declare function Pressable({ children, onPress, pressScale, bounciness, haptics, style, disabled, hoverScale, ...touchableProps }: PressableProps): React.JSX.Element;
694
+
636
695
  type IconFamily = 'Feather' | 'AntDesign' | 'Entypo' | 'FontAwesome5' | 'MaterialIcons' | 'Ionicons';
637
696
  interface IconProps {
638
697
  /** Icon name from any supported @expo/vector-icons family. See https://icons.expo.fyi */
@@ -646,13 +705,15 @@ declare function Icon({ name, size, color, family }: IconProps): React.ReactElem
646
705
  declare function renderIcon(name: string, size: number, color: string): React.ReactElement | null;
647
706
 
648
707
  declare const SPACING: {
708
+ readonly xxs: 2;
649
709
  readonly xs: 4;
650
710
  readonly sm: 8;
651
711
  readonly md: 12;
652
- readonly lg: 16;
653
- readonly xl: 24;
654
- readonly '2xl': 32;
655
- readonly '3xl': 48;
712
+ readonly base: 16;
713
+ readonly lg: 24;
714
+ readonly xl: 32;
715
+ readonly xxl: 48;
716
+ readonly section: 64;
656
717
  };
657
718
  declare const ICON_SIZES: {
658
719
  readonly sm: 14;
@@ -662,10 +723,12 @@ declare const ICON_SIZES: {
662
723
  readonly '2xl': 32;
663
724
  };
664
725
  declare const RADIUS: {
665
- readonly sm: 4;
666
- readonly md: 8;
667
- readonly lg: 12;
668
- readonly xl: 16;
726
+ readonly none: 0;
727
+ readonly xs: 4;
728
+ readonly sm: 8;
729
+ readonly md: 14;
730
+ readonly lg: 20;
731
+ readonly xl: 32;
669
732
  readonly full: 9999;
670
733
  };
671
734
  declare const SHADOWS: {
@@ -675,7 +738,7 @@ declare const SHADOWS: {
675
738
  readonly width: 0;
676
739
  readonly height: 1;
677
740
  };
678
- readonly shadowOpacity: 0.08;
741
+ readonly shadowOpacity: 0.06;
679
742
  readonly shadowRadius: 4;
680
743
  readonly elevation: 2;
681
744
  };
@@ -683,9 +746,9 @@ declare const SHADOWS: {
683
746
  readonly shadowColor: "#000";
684
747
  readonly shadowOffset: {
685
748
  readonly width: 0;
686
- readonly height: 3;
749
+ readonly height: 2;
687
750
  };
688
- readonly shadowOpacity: 0.12;
751
+ readonly shadowOpacity: 0.1;
689
752
  readonly shadowRadius: 8;
690
753
  readonly elevation: 5;
691
754
  };
@@ -695,7 +758,7 @@ declare const SHADOWS: {
695
758
  readonly width: 0;
696
759
  readonly height: 6;
697
760
  };
698
- readonly shadowOpacity: 0.2;
761
+ readonly shadowOpacity: 0.16;
699
762
  readonly shadowRadius: 16;
700
763
  readonly elevation: 10;
701
764
  };
@@ -705,7 +768,7 @@ declare const SHADOWS: {
705
768
  readonly width: 0;
706
769
  readonly height: 12;
707
770
  };
708
- readonly shadowOpacity: 0.28;
771
+ readonly shadowOpacity: 0.24;
709
772
  readonly shadowRadius: 24;
710
773
  readonly elevation: 18;
711
774
  };
@@ -713,11 +776,128 @@ declare const SHADOWS: {
713
776
  declare const BREAKPOINTS: {
714
777
  readonly wide: 700;
715
778
  };
779
+ declare const TYPOGRAPHY: {
780
+ readonly 'display-hero': {
781
+ readonly fontFamily: "Poppins-Bold";
782
+ readonly fontSize: 64;
783
+ readonly fontWeight: "700";
784
+ readonly lineHeight: 70;
785
+ readonly letterSpacing: -1;
786
+ };
787
+ readonly 'display-xl': {
788
+ readonly fontFamily: "Poppins-Bold";
789
+ readonly fontSize: 28;
790
+ readonly fontWeight: "700";
791
+ readonly lineHeight: 40;
792
+ readonly letterSpacing: 0;
793
+ };
794
+ readonly 'display-lg': {
795
+ readonly fontFamily: "Poppins-Medium";
796
+ readonly fontSize: 22;
797
+ readonly fontWeight: "500";
798
+ readonly lineHeight: 26;
799
+ readonly letterSpacing: -0.44;
800
+ };
801
+ readonly 'display-md': {
802
+ readonly fontFamily: "Poppins-Bold";
803
+ readonly fontSize: 21;
804
+ readonly fontWeight: "700";
805
+ readonly lineHeight: 30;
806
+ readonly letterSpacing: 0;
807
+ };
808
+ readonly 'display-sm': {
809
+ readonly fontFamily: "Poppins-SemiBold";
810
+ readonly fontSize: 20;
811
+ readonly fontWeight: "600";
812
+ readonly lineHeight: 24;
813
+ readonly letterSpacing: -0.18;
814
+ };
815
+ readonly 'title-md': {
816
+ readonly fontFamily: "Poppins-SemiBold";
817
+ readonly fontSize: 16;
818
+ readonly fontWeight: "600";
819
+ readonly lineHeight: 20;
820
+ readonly letterSpacing: 0;
821
+ };
822
+ readonly 'title-sm': {
823
+ readonly fontFamily: "Poppins-Medium";
824
+ readonly fontSize: 16;
825
+ readonly fontWeight: "500";
826
+ readonly lineHeight: 20;
827
+ readonly letterSpacing: 0;
828
+ };
829
+ readonly 'body-md': {
830
+ readonly fontFamily: "Poppins-Regular";
831
+ readonly fontSize: 16;
832
+ readonly fontWeight: "400";
833
+ readonly lineHeight: 24;
834
+ readonly letterSpacing: 0;
835
+ };
836
+ readonly 'body-sm': {
837
+ readonly fontFamily: "Poppins-Regular";
838
+ readonly fontSize: 14;
839
+ readonly fontWeight: "400";
840
+ readonly lineHeight: 20;
841
+ readonly letterSpacing: 0;
842
+ };
843
+ readonly caption: {
844
+ readonly fontFamily: "Poppins-Medium";
845
+ readonly fontSize: 14;
846
+ readonly fontWeight: "500";
847
+ readonly lineHeight: 18;
848
+ readonly letterSpacing: 0;
849
+ };
850
+ readonly 'caption-sm': {
851
+ readonly fontFamily: "Poppins-Regular";
852
+ readonly fontSize: 13;
853
+ readonly fontWeight: "400";
854
+ readonly lineHeight: 16;
855
+ readonly letterSpacing: 0;
856
+ };
857
+ readonly 'badge-text': {
858
+ readonly fontFamily: "Poppins-SemiBold";
859
+ readonly fontSize: 11;
860
+ readonly fontWeight: "600";
861
+ readonly lineHeight: 13;
862
+ readonly letterSpacing: 0;
863
+ };
864
+ readonly 'micro-label': {
865
+ readonly fontFamily: "Poppins-Bold";
866
+ readonly fontSize: 12;
867
+ readonly fontWeight: "700";
868
+ readonly lineHeight: 16;
869
+ readonly letterSpacing: 0;
870
+ };
871
+ readonly 'uppercase-tag': {
872
+ readonly fontFamily: "Poppins-Bold";
873
+ readonly fontSize: 8;
874
+ readonly fontWeight: "700";
875
+ readonly lineHeight: 10;
876
+ readonly letterSpacing: 0.32;
877
+ readonly textTransform: "uppercase";
878
+ };
879
+ readonly 'button-lg': {
880
+ readonly fontFamily: "Poppins-Medium";
881
+ readonly fontSize: 16;
882
+ readonly fontWeight: "500";
883
+ readonly lineHeight: 20;
884
+ readonly letterSpacing: 0;
885
+ };
886
+ readonly 'button-sm': {
887
+ readonly fontFamily: "Poppins-Medium";
888
+ readonly fontSize: 14;
889
+ readonly fontWeight: "500";
890
+ readonly lineHeight: 18;
891
+ readonly letterSpacing: 0;
892
+ };
893
+ };
716
894
  type Spacing = typeof SPACING;
717
895
  type SpacingKey = keyof Spacing;
718
896
  type IconSize = typeof ICON_SIZES;
719
897
  type IconSizeKey = keyof IconSize;
720
898
  type Radius = typeof RADIUS;
721
899
  type RadiusKey = keyof Radius;
900
+ type Typography = typeof TYPOGRAPHY;
901
+ type TypographyKey = keyof Typography;
722
902
 
723
- 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 };
903
+ 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 };