@retray-dev/ui-kit 4.0.0 → 5.1.0

package/README.md

@@ -2,7 +2,7 @@
 
 A personal React Native / Expo UI component library with a built-in design system, dark mode support, haptic feedback, and smooth animations.
 
-- 33 components across 6 categories
+- 36 components across 7 categories
 - Light/dark theme with 23 color tokens and full customization
 - Apple HIG–compliant touch targets and haptic feedback
 - Animated interactions: spring press, sliding tabs, accordion easing, animated progress
@@ -138,12 +138,13 @@ import { SPACING, ICON_SIZES, RADIUS, SHADOWS, BREAKPOINTS } from '@retray-dev/u
 | Category    | Components                                                                                      |
 | ----------- | ----------------------------------------------------------------------------------------------- |
 | Display     | `Text`, `Badge`, `Avatar`, `Separator`, `Spinner`, `Skeleton`, `Progress`, `CurrencyDisplay`   |
-| Surfaces    | `Card`, `AlertBanner`, `EmptyState`                                                             |
+| Surfaces    | `Card`, `AlertBanner`, `EmptyState`, `MediaCard`                                                |
 | Form        | `Button`, `IconButton`, `Input`, `CurrencyInput`, `CurrencyInputLarge`, `Textarea`, `Checkbox`, `Switch`, `Toggle`, `RadioGroup`, `Select`, `Slider` |
 | Composition | `Tabs`, `Accordion`                                                                             |
 | Overlays    | `Sheet`, `ConfirmDialog`                                                                        |
 | Feedback    | `Toast` / `ToastProvider` / `useToast`                                                          |
-| Data        | `ListItem`, `Chip` / `ChipGroup`, `LabelValue`, `MonthPicker`                                  |
+| Data        | `ListItem`, `Chip` / `ChipGroup`, `LabelValue`, `MonthPicker`, `CategoryStrip`                 |
+| Utilities   | `Pressable`                                                                                     |
 
 ### Quick examples
 

package/dist/index.d.mts

@@ -1,31 +1,34 @@
 import React from 'react';
-import { TouchableOpacityProps, TextProps as TextProps$1, TextInputProps, TextStyle, ViewStyle, ActivityIndicatorProps } from 'react-native';
+import { TouchableOpacityProps, TextProps as TextProps$1, TextInputProps, TextStyle, ViewStyle, ActivityIndicatorProps, ImageSourcePropType } from 'react-native';
 export { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 
 type ThemeColors = {
     background: string;
     foreground: string;
     card: string;
-    cardForeground: string;
     primary: string;
     primaryForeground: string;
-    secondary: string;
-    secondaryForeground: string;
-    muted: string;
-    mutedForeground: string;
-    accent: string;
-    accentForeground: string;
+    border: string;
     destructive: string;
     destructiveForeground: string;
-    border: string;
-    input: string;
-    ring: string;
     success: string;
     successForeground: string;
+    warning: string;
+    warningForeground: string;
+};
+type ResolvedColors = ThemeColors & {
+    foregroundSubtle: string;
+    foregroundMuted: string;
+    surface: string;
+    surfaceStrong: string;
     destructiveTint: string;
     destructiveBorder: string;
     successTint: string;
     successBorder: string;
+    warningTint: string;
+    warningBorder: string;
+    ring: string;
+    input: string;
 };
 type Theme = {
     light?: Partial<ThemeColors>;
@@ -33,22 +36,22 @@ type Theme = {
 };
 type ColorScheme = 'light' | 'dark' | 'system';
 type ThemeContextValue = {
-    colors: ThemeColors;
+    colors: ResolvedColors;
     colorScheme: 'light' | 'dark';
 };
 
 interface ThemeProviderProps {
     children: React.ReactNode;
     /**
-    * Optional full-palette overrides per scheme. Supply a partial or full `ThemeColors` object
-    * for `light` and/or `dark` to override the defaults.
-    * @example
-    * { light: { primary: '#6366f1', card: '#fff' }, dark: { primary: '#818cf8' } }
+     * Optional token overrides per scheme. Supply any of the 12 public ThemeColors
+     * tokens for `light` and/or `dark`. All derived colors are recomputed automatically.
+     * @example
+     * { light: { primary: '#ff385c' }, dark: { primary: '#ff385c' } }
      */
     theme?: Theme;
     /**
-     * - `'system'` (default): auto-detects device setting and updates when it changes.
-     * - `'light'` / `'dark'`: forces a specific scheme regardless of device setting.
+     * - `'system'` (default): auto-detects device setting.
+     * - `'light'` / `'dark'`: forces a specific scheme.
      */
     colorScheme?: ColorScheme;
 }
@@ -57,61 +60,45 @@ declare function useTheme(): ThemeContextValue;
 
 declare const defaultLight: ThemeColors;
 declare const defaultDark: ThemeColors;
+declare function deriveColors(t: ThemeColors, scheme: 'light' | 'dark'): ResolvedColors;
 
-type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
+type ButtonVariant = 'primary' | 'secondary' | 'text' | 'destructive';
 type ButtonSize = 'sm' | 'md' | 'lg';
 interface ButtonProps extends TouchableOpacityProps {
     label: string;
-    /**
-     * - `primary`: filled with `primary` token — main CTA
-     * - `secondary`: filled with `secondary` token — less prominent
-     * - `outline`: transparent with border — alternative actions
-     * - `ghost`: fully transparent — in-context or low-emphasis actions
-     */
     variant?: ButtonVariant;
     size?: ButtonSize;
-    /** Replaces the label with a spinner and forces `disabled`. */
     loading?: boolean;
     fullWidth?: boolean;
-    /** Icon rendered alongside the label. Can be a ReactNode or a render function `(props) => ReactNode`. */
     icon?: React.ReactNode | ((props: {
         label: string;
         size: ButtonSize;
         variant: ButtonVariant;
     }) => React.ReactNode);
-    /**
-     * Icon name from `@expo/vector-icons` (e.g. `"home"`, `"star"`, `"arrow-right"`).
-     * See https://icons.expo.fyi to browse available icons.
-     * Takes precedence over `icon` when both are supplied.
-     */
     iconName?: string;
-    /** Override the resolved icon color. Defaults to the label foreground color for the active variant. */
     iconColor?: string;
-    /** Side the icon appears on. Defaults to `'left'`. */
     iconPosition?: 'left' | 'right';
 }
 declare function Button({ label, variant, size, loading, fullWidth, icon, iconName, iconColor, iconPosition, disabled, style, onPress, ...props }: ButtonProps): React.JSX.Element;
 
-type IconButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
+type IconButtonVariant = 'primary' | 'secondary' | 'outline' | 'text' | 'destructive';
 type IconButtonSize = 'sm' | 'md' | 'lg';
 interface IconButtonProps extends TouchableOpacityProps {
-    /**
-     * Icon name from `@expo/vector-icons` (e.g. `"home"`, `"star"`, `"plus"`).
-     * See https://icons.expo.fyi. Takes precedence over `icon` when both supplied.
-     */
     iconName?: string;
-    /** ReactNode icon — used when `iconName` is not provided. */
     icon?: React.ReactNode;
-    /** Override the resolved icon color. Defaults to the foreground color for the active variant. */
     iconColor?: string;
     variant?: IconButtonVariant;
     size?: IconButtonSize;
-    /** Replaces icon with a spinner and forces `disabled`. */
     loading?: boolean;
+    /**
+     * Badge overlay. `true` shows a dot. A number shows a count (capped at 99).
+     * The dot/count appears top-right of the button.
+     */
+    badge?: boolean | number;
 }
-declare function IconButton({ iconName, icon, iconColor, variant, size, loading, disabled, style, onPress, ...props }: IconButtonProps): React.JSX.Element;
+declare function IconButton({ iconName, icon, iconColor, variant, size, loading, badge, disabled, style, onPress, ...props }: IconButtonProps): React.JSX.Element;
 
-type TextVariant = 'h1' | 'h2' | 'h3' | 'body' | 'caption' | 'label';
+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';
 interface TextProps extends TextProps$1 {
     variant?: TextVariant;
     color?: string;
@@ -155,7 +142,7 @@ interface InputProps extends TextInputProps {
 }
 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;
 
-type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'successOutline' | 'destructiveOutline';
+type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'successOutline' | 'destructiveOutline' | 'warningOutline';
 type BadgeSize = 'sm' | 'md' | 'lg';
 interface BadgeProps {
     label?: string;
@@ -226,50 +213,51 @@ interface SpinnerProps extends Omit<ActivityIndicatorProps, 'size'> {
 }
 declare function Spinner({ size, color, label, ...props }: SpinnerProps): React.JSX.Element;
 
+type SkeletonPreset = 'base' | 'circle' | 'text';
 interface SkeletonProps {
     width?: number | string;
     height?: number;
     borderRadius?: number;
+    /** Preset shape. `'circle'` forces width=height square with full radius. `'text'` renders a short line. */
+    preset?: SkeletonPreset;
+    /** Only used with `preset='circle'` — overrides the diameter. Defaults to 40. */
+    diameter?: number;
     style?: ViewStyle;
 }
-declare function Skeleton({ width, height, borderRadius, style }: SkeletonProps): React.JSX.Element;
+declare function Skeleton({ width, height, borderRadius, preset, diameter, style, }: SkeletonProps): React.JSX.Element;
 
 type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
 interface AvatarProps {
-    /** Remote image URI. Falls back to `fallback` initials on error or when omitted. */
     src?: string;
-    /** Up to 2 characters shown when the image is unavailable. Auto-uppercased. Defaults to `'?'`. */
     fallback?: string;
     size?: AvatarSize;
+    /** Optional status indicator dot — bottom-right corner. */
+    status?: AvatarStatus;
     style?: ViewStyle;
 }
-declare function Avatar({ src, fallback, size, style }: AvatarProps): React.JSX.Element;
+declare function Avatar({ src, fallback, size, status, style }: AvatarProps): React.JSX.Element;
 
-type AlertBannerVariant = 'default' | 'destructive' | 'success';
+type AlertBannerVariant = 'default' | 'destructive' | 'success' | 'warning';
 interface AlertBannerProps {
     title: string;
     description?: string;
     variant?: AlertBannerVariant;
     icon?: React.ReactNode;
-    /**
-     * Icon name from `@expo/vector-icons`. See https://icons.expo.fyi.
-     * Takes precedence over `icon`. When neither is set, a default variant icon is shown.
-     */
     iconName?: string;
-    /** Override the resolved icon color. Defaults to the variant title color. */
     iconColor?: string;
     style?: ViewStyle;
 }
 declare function AlertBanner({ title, description, variant, icon, iconName, iconColor, style }: AlertBannerProps): React.JSX.Element;
 
+type ProgressVariant = 'default' | 'success' | 'warning' | 'destructive';
 interface ProgressProps {
-    /** Current progress value. Clamped to `[0, max]`. Defaults to `0`. */
     value?: number;
-    /** Maximum value. Defaults to `100`. */
     max?: number;
+    variant?: ProgressVariant;
     style?: ViewStyle;
 }
-declare function Progress({ value, max, style }: ProgressProps): React.JSX.Element;
+declare function Progress({ value, max, variant, style }: ProgressProps): React.JSX.Element;
 
 interface EmptyStateProps {
     icon?: React.ReactNode;
@@ -367,12 +355,10 @@ interface TabItem {
     value: string;
     icon?: React.ReactNode | ((active: boolean) => React.ReactNode);
 }
+type TabsVariant = 'pill' | 'underline';
 interface TabsProps {
     tabs: TabItem[];
-    /**
-     * Controlled active tab value. When omitted the component manages state internally
-     * (uncontrolled), defaulting to the first tab.
-     */
+    variant?: TabsVariant;
     value?: string;
     onValueChange?: (value: string) => void;
     children?: React.ReactNode;
@@ -384,7 +370,7 @@ interface TabsContentProps {
     children: React.ReactNode;
     style?: ViewStyle;
 }
-declare function Tabs({ tabs, value, onValueChange, children, style }: TabsProps): React.JSX.Element;
+declare function Tabs({ tabs, variant, value, onValueChange, children, style }: TabsProps): React.JSX.Element;
 declare function TabsContent({ value, activeValue, children, style }: TabsContentProps): React.JSX.Element | null;
 
 interface AccordionItem {
@@ -449,22 +435,23 @@ interface SelectProps {
 }
 declare function Select({ options, value, onValueChange, placeholder, label, error, disabled, style, }: SelectProps): React.JSX.Element;
 
-type ToastVariant = 'default' | 'destructive' | 'success';
+type ToastVariant = 'default' | 'destructive' | 'success' | 'warning';
+interface ToastAction {
+    label: string;
+    onPress: () => void;
+}
 interface ToastItem {
     id: string;
     title?: string;
     description?: string;
     variant?: ToastVariant;
     icon?: React.ReactNode;
-    /**
-     * Icon name from `@expo/vector-icons`. See https://icons.expo.fyi.
-     * Takes precedence over `icon`. When neither is set, a default variant icon is shown.
-     */
     iconName?: string;
-    /** Override the resolved icon color. Defaults to the variant text color. */
     iconColor?: string;
     /** Auto-dismiss delay in milliseconds. Defaults to `3000`. */
     duration?: number;
+    /** Optional inline action button rendered at the end of the toast. */
+    action?: ToastAction;
 }
 interface ToastContextValue {
     toast: (item: Omit<ToastItem, 'id'>) => void;
@@ -628,6 +615,83 @@ interface MonthPickerProps {
 }
 declare function MonthPicker({ value, onChange, style }: MonthPickerProps): React.JSX.Element;
 
+type MediaCardAspectRatio = '1:1' | '4:3' | '16:9' | '4:5' | '3:2';
+interface MediaCardProps {
+    /** Image source — URI string or require(). */
+    imageSource?: ImageSourcePropType;
+    /** Image aspect ratio. Defaults to `'4:3'`. */
+    aspectRatio?: MediaCardAspectRatio;
+    /** Badge content rendered top-left over the image (e.g. a Badge component or Text). */
+    badge?: React.ReactNode;
+    /** Icon rendered in a circle button top-right over the image. Defaults to `'heart'`. */
+    actionIcon?: React.ReactNode;
+    /** Icon name for the action button. Overrides `actionIcon`. */
+    actionIconName?: string;
+    /** Whether the action icon is in active/filled state. */
+    actionActive?: boolean;
+    /** Called when the top-right action icon is pressed. */
+    onActionPress?: () => void;
+    /** Primary text below the image. */
+    title?: string;
+    /** Secondary text below the title. */
+    subtitle?: string;
+    /** Tertiary / caption text below subtitle. */
+    caption?: string;
+    /** Called when the card body is pressed. */
+    onPress?: () => void;
+    style?: ViewStyle;
+    /** Style for the image container. */
+    imageStyle?: ViewStyle;
+    /** Additional content rendered below caption. */
+    footer?: React.ReactNode;
+}
+declare function MediaCard({ imageSource, aspectRatio, badge, actionIcon, actionIconName, actionActive, onActionPress, title, subtitle, caption, onPress, style, imageStyle, footer, }: MediaCardProps): React.JSX.Element;
+
+interface CategoryItem {
+    label: string;
+    value: string;
+    /** Icon rendered to the left of the label. ReactNode or icon name string. */
+    icon?: React.ReactNode | string;
+    /** Badge count over the icon/label. */
+    badge?: number;
+}
+interface CategoryStripProps {
+    categories: CategoryItem[];
+    value?: string | string[];
+    /** Called with new value(s) on selection change. */
+    onValueChange?: (value: string | string[]) => void;
+    /** Allow multiple simultaneous selections. Defaults to false. */
+    multiSelect?: boolean;
+    style?: ViewStyle;
+    /** Style applied to each pill item. */
+    itemStyle?: ViewStyle;
+}
+declare function CategoryStrip({ categories, value, onValueChange, multiSelect, style, itemStyle, }: CategoryStripProps): React.JSX.Element;
+
+interface PressableProps extends Omit<TouchableOpacityProps, 'activeOpacity'> {
+    /** Children content to render inside the pressable. */
+    children: React.ReactNode;
+    /** Called when pressed. */
+    onPress?: () => void;
+    /** Scale value on press. Defaults to `0.98` (MediaCard-style). */
+    pressScale?: number;
+    /** Bounciness of the spring animation on release. Defaults to `4`. */
+    bounciness?: number;
+    /** Enable haptic feedback on press. Defaults to `true`. */
+    haptics?: boolean;
+    /** Additional style for the Animated wrapper. */
+    style?: ViewStyle;
+    /** Disable interaction. */
+    disabled?: boolean;
+    /** Hover scale (web only). Defaults to `1.02`. Set to `1` to disable. */
+    hoverScale?: number;
+}
+/**
+ * Generic pressable with beautiful spring bounce effect matching MediaCard interaction.
+ * Use for custom pressable content that needs consistent press feel.
+ */
+declare function Pressable({ children, onPress, pressScale, bounciness, haptics, style, disabled, hoverScale, ...touchableProps }: PressableProps): React.JSX.Element;
+
 type IconFamily = 'Feather' | 'AntDesign' | 'Entypo' | 'FontAwesome5' | 'MaterialIcons' | 'Ionicons';
 interface IconProps {
     /** Icon name from any supported @expo/vector-icons family. See https://icons.expo.fyi */
@@ -641,13 +705,15 @@ declare function Icon({ name, size, color, family }: IconProps): React.ReactElem
 declare function renderIcon(name: string, size: number, color: string): React.ReactElement | null;
 
 declare const SPACING: {
+    readonly xxs: 2;
     readonly xs: 4;
     readonly sm: 8;
     readonly md: 12;
-    readonly lg: 16;
-    readonly xl: 24;
-    readonly '2xl': 32;
-    readonly '3xl': 48;
+    readonly base: 16;
+    readonly lg: 24;
+    readonly xl: 32;
+    readonly xxl: 48;
+    readonly section: 64;
 };
 declare const ICON_SIZES: {
     readonly sm: 14;
@@ -657,10 +723,12 @@ declare const ICON_SIZES: {
     readonly '2xl': 32;
 };
 declare const RADIUS: {
-    readonly sm: 4;
-    readonly md: 8;
-    readonly lg: 12;
-    readonly xl: 16;
+    readonly none: 0;
+    readonly xs: 4;
+    readonly sm: 8;
+    readonly md: 14;
+    readonly lg: 20;
+    readonly xl: 32;
     readonly full: 9999;
 };
 declare const SHADOWS: {
@@ -670,7 +738,7 @@ declare const SHADOWS: {
             readonly width: 0;
             readonly height: 1;
         };
-        readonly shadowOpacity: 0.08;
+        readonly shadowOpacity: 0.06;
         readonly shadowRadius: 4;
         readonly elevation: 2;
     };
@@ -678,9 +746,9 @@ declare const SHADOWS: {
         readonly shadowColor: "#000";
         readonly shadowOffset: {
             readonly width: 0;
-            readonly height: 3;
+            readonly height: 2;
         };
-        readonly shadowOpacity: 0.12;
+        readonly shadowOpacity: 0.1;
         readonly shadowRadius: 8;
         readonly elevation: 5;
     };
@@ -690,7 +758,7 @@ declare const SHADOWS: {
             readonly width: 0;
             readonly height: 6;
         };
-        readonly shadowOpacity: 0.2;
+        readonly shadowOpacity: 0.16;
         readonly shadowRadius: 16;
         readonly elevation: 10;
     };
@@ -700,7 +768,7 @@ declare const SHADOWS: {
             readonly width: 0;
             readonly height: 12;
         };
-        readonly shadowOpacity: 0.28;
+        readonly shadowOpacity: 0.24;
         readonly shadowRadius: 24;
         readonly elevation: 18;
     };
@@ -708,11 +776,128 @@ declare const SHADOWS: {
 declare const BREAKPOINTS: {
     readonly wide: 700;
 };
+declare const TYPOGRAPHY: {
+    readonly 'display-hero': {
+        readonly fontFamily: "Poppins-Bold";
+        readonly fontSize: 64;
+        readonly fontWeight: "700";
+        readonly lineHeight: 70;
+        readonly letterSpacing: -1;
+    };
+    readonly 'display-xl': {
+        readonly fontFamily: "Poppins-Bold";
+        readonly fontSize: 28;
+        readonly fontWeight: "700";
+        readonly lineHeight: 40;
+        readonly letterSpacing: 0;
+    };
+    readonly 'display-lg': {
+        readonly fontFamily: "Poppins-Medium";
+        readonly fontSize: 22;
+        readonly fontWeight: "500";
+        readonly lineHeight: 26;
+        readonly letterSpacing: -0.44;
+    };
+    readonly 'display-md': {
+        readonly fontFamily: "Poppins-Bold";
+        readonly fontSize: 21;
+        readonly fontWeight: "700";
+        readonly lineHeight: 30;
+        readonly letterSpacing: 0;
+    };
+    readonly 'display-sm': {
+        readonly fontFamily: "Poppins-SemiBold";
+        readonly fontSize: 20;
+        readonly fontWeight: "600";
+        readonly lineHeight: 24;
+        readonly letterSpacing: -0.18;
+    };
+    readonly 'title-md': {
+        readonly fontFamily: "Poppins-SemiBold";
+        readonly fontSize: 16;
+        readonly fontWeight: "600";
+        readonly lineHeight: 20;
+        readonly letterSpacing: 0;
+    };
+    readonly 'title-sm': {
+        readonly fontFamily: "Poppins-Medium";
+        readonly fontSize: 16;
+        readonly fontWeight: "500";
+        readonly lineHeight: 20;
+        readonly letterSpacing: 0;
+    };
+    readonly 'body-md': {
+        readonly fontFamily: "Poppins-Regular";
+        readonly fontSize: 16;
+        readonly fontWeight: "400";
+        readonly lineHeight: 24;
+        readonly letterSpacing: 0;
+    };
+    readonly 'body-sm': {
+        readonly fontFamily: "Poppins-Regular";
+        readonly fontSize: 14;
+        readonly fontWeight: "400";
+        readonly lineHeight: 20;
+        readonly letterSpacing: 0;
+    };
+    readonly caption: {
+        readonly fontFamily: "Poppins-Medium";
+        readonly fontSize: 14;
+        readonly fontWeight: "500";
+        readonly lineHeight: 18;
+        readonly letterSpacing: 0;
+    };
+    readonly 'caption-sm': {
+        readonly fontFamily: "Poppins-Regular";
+        readonly fontSize: 13;
+        readonly fontWeight: "400";
+        readonly lineHeight: 16;
+        readonly letterSpacing: 0;
+    };
+    readonly 'badge-text': {
+        readonly fontFamily: "Poppins-SemiBold";
+        readonly fontSize: 11;
+        readonly fontWeight: "600";
+        readonly lineHeight: 13;
+        readonly letterSpacing: 0;
+    };
+    readonly 'micro-label': {
+        readonly fontFamily: "Poppins-Bold";
+        readonly fontSize: 12;
+        readonly fontWeight: "700";
+        readonly lineHeight: 16;
+        readonly letterSpacing: 0;
+    };
+    readonly 'uppercase-tag': {
+        readonly fontFamily: "Poppins-Bold";
+        readonly fontSize: 8;
+        readonly fontWeight: "700";
+        readonly lineHeight: 10;
+        readonly letterSpacing: 0.32;
+        readonly textTransform: "uppercase";
+    };
+    readonly 'button-lg': {
+        readonly fontFamily: "Poppins-Medium";
+        readonly fontSize: 16;
+        readonly fontWeight: "500";
+        readonly lineHeight: 20;
+        readonly letterSpacing: 0;
+    };
+    readonly 'button-sm': {
+        readonly fontFamily: "Poppins-Medium";
+        readonly fontSize: 14;
+        readonly fontWeight: "500";
+        readonly lineHeight: 18;
+        readonly letterSpacing: 0;
+    };
+};
 type Spacing = typeof SPACING;
 type SpacingKey = keyof Spacing;
 type IconSize = typeof ICON_SIZES;
 type IconSizeKey = keyof IconSize;
 type Radius = typeof RADIUS;
 type RadiusKey = keyof Radius;
+type Typography = typeof TYPOGRAPHY;
+type TypographyKey = keyof Typography;
 
-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 };
+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 };