@mrmeg/expo-ui 0.13.0 → 0.15.0

package/dist/components/RadioGroup.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { createContext, use, useEffect, useRef } from "react";
+import React, { createContext, use, useEffect, useRef, useState } from "react";
 import { View, StyleSheet, Pressable, Platform, Animated } from "react-native";
 import { StyledText } from "./StyledText.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
 import { hapticLight } from "../lib/haptics.js";
 import { useReducedMotion } from "../hooks/useReduceMotion.js";
+import { useScalePress } from "../hooks/useScalePress.js";
 import * as RadioGroupPrimitive from "@rn-primitives/radio-group";
 const DEFAULT_HIT_SLOP = 8;
 const SIZE_CONFIGS = {
@@ -54,10 +55,35 @@ function RadioGroupRoot({ size = "md", error = false, value, onValueChange, styl
  * Must be rendered inside a RadioGroup.
  */
 function RadioGroupItem({ label, required = false, style: styleOverride, labelStyle, value: itemValue, disabled, ...props }) {
-    const { theme, getContrastingColor } = useTheme();
+    const { theme, getContrastingColor, getFocusRingStyle } = useTheme();
     const reduceMotion = useReducedMotion();
     const { size, error, value: groupValue, onValueChange } = useRadioGroupContext();
     const sizeConfig = SIZE_CONFIGS[size];
+    const focusRingStyle = getFocusRingStyle();
+    const [focused, setFocused] = useState(false);
+    const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
+        disabled: !!disabled,
+        scaleTo: 0.92,
+        haptic: false,
+    });
+    const showFocusRing = (event) => {
+        let ringVisible = true;
+        if (Platform.OS === "web") {
+            const target = event?.nativeEvent?.target;
+            if (target && typeof target.matches === "function") {
+                try {
+                    ringVisible = target.matches(":focus-visible");
+                }
+                catch {
+                    ringVisible = true;
+                }
+            }
+        }
+        setFocused(ringVisible);
+    };
+    const hideFocusRing = () => {
+        setFocused(false);
+    };
     const isChecked = groupValue === itemValue;
     // Animated dot scale — follows Checkbox opacity pattern
     const dotScale = useRef(new Animated.Value(isChecked ? 1 : 0)).current;
@@ -75,26 +101,27 @@ function RadioGroupItem({ label, required = false, style: styleOverride, labelSt
             ? theme.colors.primary
             : getContrastingColor(theme.colors.background, theme.colors.text, theme.colors.textDim);
     const flattenedStyle = styleOverride ? StyleSheet.flatten(styleOverride) : undefined;
-    const radioElement = (_jsx(RadioGroupPrimitive.Item, { ...props, value: itemValue, disabled: disabled, onPress: handleRadioPress, style: {
-            ...styles.radio,
-            borderColor,
-            backgroundColor: theme.colors.background,
-            borderRadius: sizeConfig.outer / 2,
-            borderWidth: sizeConfig.borderWidth,
-            width: sizeConfig.outer,
-            height: sizeConfig.outer,
-            opacity: disabled ? 0.5 : 1,
-            ...(Platform.OS === "web" && { cursor: disabled ? "not-allowed" : "pointer" }),
-            ...(flattenedStyle || {}),
-        }, hitSlop: DEFAULT_HIT_SLOP, accessibilityLabel: label, children: _jsx(Animated.View, { style: [
-                { transform: [{ scale: dotScale }] },
-                {
-                    width: sizeConfig.inner,
-                    height: sizeConfig.inner,
-                    borderRadius: sizeConfig.inner / 2,
-                    backgroundColor: theme.colors.primary,
-                },
-            ] }) }));
+    const radioElement = (_jsx(Animated.View, { style: scaleStyle, children: _jsx(RadioGroupPrimitive.Item, { ...props, value: itemValue, disabled: disabled, onPress: handleRadioPress, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, onFocus: showFocusRing, onBlur: hideFocusRing, style: {
+                ...styles.radio,
+                borderColor,
+                backgroundColor: theme.colors.background,
+                borderRadius: sizeConfig.outer / 2,
+                borderWidth: sizeConfig.borderWidth,
+                width: sizeConfig.outer,
+                height: sizeConfig.outer,
+                opacity: disabled ? 0.5 : 1,
+                ...(Platform.OS === "web" && { cursor: disabled ? "not-allowed" : "pointer" }),
+                ...(focused && !disabled ? focusRingStyle : null),
+                ...(flattenedStyle || {}),
+            }, hitSlop: DEFAULT_HIT_SLOP, accessibilityLabel: label, children: _jsx(Animated.View, { style: [
+                    { transform: [{ scale: dotScale }] },
+                    {
+                        width: sizeConfig.inner,
+                        height: sizeConfig.inner,
+                        borderRadius: sizeConfig.inner / 2,
+                        backgroundColor: theme.colors.primary,
+                    },
+                ] }) }) }));
     // If no label, return just the radio button
     if (!label) {
         return radioElement;

package/dist/components/SectionHeader.d.ts

@@ -0,0 +1,42 @@
+import React from "react";
+import { StyleProp, ViewStyle, TextStyle } from "react-native";
+import { type TextProps } from "./StyledText";
+type TextPassthroughProps = Omit<TextProps, "style" | "children"> & {
+    style?: StyleProp<TextStyle>;
+};
+export interface SectionHeaderProps {
+    /** Small uppercase label rendered above the title. */
+    eyebrow?: string;
+    /** Section title. */
+    title: string;
+    /** Supporting copy rendered below the title. */
+    description?: string;
+    /** Text alignment for the whole block. @default "leading" */
+    align?: "leading" | "center";
+    /** Custom style override for the container. */
+    style?: StyleProp<ViewStyle>;
+    /** Passthrough props for the title text. */
+    titleProps?: TextPassthroughProps;
+    /** Passthrough props for the description text. */
+    descriptionProps?: TextPassthroughProps;
+}
+/**
+ * SectionHeader
+ *
+ * Composed eyebrow -> title -> description block used to introduce a page
+ * section. Supports a leading (default) or centered alignment; centered
+ * descriptions are width-constrained so long copy doesn't stretch edge to
+ * edge.
+ *
+ * @example
+ * ```tsx
+ * <SectionHeader
+ *   eyebrow="Pricing"
+ *   title="Simple, transparent plans"
+ *   description="Pick the plan that fits your team. Upgrade or cancel anytime."
+ *   align="center"
+ * />
+ * ```
+ */
+export declare function SectionHeader({ eyebrow, title, description, align, style, titleProps, descriptionProps, }: SectionHeaderProps): React.JSX.Element;
+export {};

package/dist/components/SectionHeader.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from "react-native";
+import { EyebrowText, TitleText, BodyText } from "./StyledText.js";
+import { useTheme } from "../hooks/useTheme.js";
+import { spacing } from "../constants/spacing.js";
+/**
+ * SectionHeader
+ *
+ * Composed eyebrow -> title -> description block used to introduce a page
+ * section. Supports a leading (default) or centered alignment; centered
+ * descriptions are width-constrained so long copy doesn't stretch edge to
+ * edge.
+ *
+ * @example
+ * ```tsx
+ * <SectionHeader
+ *   eyebrow="Pricing"
+ *   title="Simple, transparent plans"
+ *   description="Pick the plan that fits your team. Upgrade or cancel anytime."
+ *   align="center"
+ * />
+ * ```
+ */
+export function SectionHeader({ eyebrow, title, description, align = "leading", style, titleProps, descriptionProps, }) {
+    const { theme } = useTheme();
+    const isCentered = align === "center";
+    const textAlign = isCentered ? "center" : "left";
+    return (_jsxs(View, { style: [{ alignItems: isCentered ? "center" : "flex-start" }, style], children: [!!eyebrow && (_jsx(EyebrowText, { style: {
+                    color: theme.colors.accent,
+                    marginBottom: spacing.xs,
+                    textAlign,
+                }, children: eyebrow })), _jsx(TitleText, { ...titleProps, style: [
+                    { textAlign },
+                    !!description && { marginBottom: spacing.sm },
+                    titleProps?.style,
+                ], children: title }), !!description && (_jsx(BodyText, { ...descriptionProps, style: [
+                    { color: theme.colors.textDim, textAlign },
+                    isCentered && { maxWidth: 560 },
+                    descriptionProps?.style,
+                ], children: description }))] }));
+}

package/dist/components/Select.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Platform, StyleSheet, View } from "react-native";
+import { Animated, Platform, StyleSheet, View } from "react-native";
 import { Icon } from "./Icon.js";
 import { AnimatedView } from "./AnimatedView.js";
 import { TextClassContext, TextColorContext, TextSelectabilityContext } from "./StyledText.context";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
+import { useScalePress } from "../hooks/useScalePress.js";
 import * as SelectPrimitive from "@rn-primitives/select";
 import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -34,24 +35,50 @@ const SIZE_CONFIGS = {
     },
 };
 function SelectTrigger({ size = "md", error = false, children, style: styleOverride, disabled, ...props }) {
-    const { theme } = useTheme();
+    const { theme, getFocusRingStyle } = useTheme();
     const sizeConfig = SIZE_CONFIGS[size];
-    return (_jsx(SelectPrimitive.Trigger, { disabled: disabled, ...props, style: {
-            ...styles.trigger,
-            height: sizeConfig.height,
-            paddingHorizontal: sizeConfig.paddingHorizontal,
-            borderColor: error ? theme.colors.destructive : theme.colors.border,
-            backgroundColor: theme.colors.background,
-            ...(Platform.OS === "web" && {
-                cursor: disabled ? "not-allowed" : "pointer",
-                outlineStyle: "none",
-                userSelect: "none",
-            }),
-            ...(disabled && { opacity: 0.5 }),
-            ...(styleOverride && typeof styleOverride !== "function"
-                ? StyleSheet.flatten(styleOverride)
-                : {}),
-        }, children: _jsx(TextColorContext.Provider, { value: theme.colors.text, children: _jsxs(TextSelectabilityContext.Provider, { value: false, children: [typeof children === "function" ? null : children, _jsx(Icon, { name: "chevron-down", size: 16, color: theme.colors.mutedForeground })] }) }) }));
+    const focusRingStyle = getFocusRingStyle();
+    const [focused, setFocused] = React.useState(false);
+    const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
+        disabled: !!disabled,
+        scaleTo: 0.97,
+        haptic: false,
+    });
+    const showFocusRing = (event) => {
+        let ringVisible = true;
+        if (Platform.OS === "web") {
+            const target = event?.nativeEvent?.target;
+            if (target && typeof target.matches === "function") {
+                try {
+                    ringVisible = target.matches(":focus-visible");
+                }
+                catch {
+                    ringVisible = true;
+                }
+            }
+        }
+        setFocused(ringVisible);
+    };
+    const hideFocusRing = () => {
+        setFocused(false);
+    };
+    return (_jsx(Animated.View, { style: scaleStyle, children: _jsx(SelectPrimitive.Trigger, { disabled: disabled, ...props, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, onFocus: showFocusRing, onBlur: hideFocusRing, style: {
+                ...styles.trigger,
+                height: sizeConfig.height,
+                paddingHorizontal: sizeConfig.paddingHorizontal,
+                borderColor: error ? theme.colors.destructive : theme.colors.border,
+                backgroundColor: theme.colors.background,
+                ...(Platform.OS === "web" && {
+                    cursor: disabled ? "not-allowed" : "pointer",
+                    outlineStyle: "none",
+                    userSelect: "none",
+                }),
+                ...(disabled && { opacity: 0.5 }),
+                ...(focused && !disabled ? focusRingStyle : null),
+                ...(styleOverride && typeof styleOverride !== "function"
+                    ? StyleSheet.flatten(styleOverride)
+                    : {}),
+            }, children: _jsx(TextColorContext.Provider, { value: theme.colors.text, children: _jsxs(TextSelectabilityContext.Provider, { value: false, children: [typeof children === "function" ? null : children, _jsx(Icon, { name: "chevron-down", size: 16, color: theme.colors.mutedForeground })] }) }) }) }));
 }
 function SelectValue({ size = "md", placeholder, style: styleOverride, ...props }) {
     const { theme } = useTheme();
@@ -99,29 +126,34 @@ function SelectItem({ children, style: styleOverride, ...props }) {
     // "is this a renderable node?" keeps the API explicit without switching on the
     // primitive type of children.
     const hasCustomChildren = React.isValidElement(children) || Array.isArray(children);
-    return (_jsx(TextClassContext.Provider, { value: "", children: _jsxs(SelectPrimitive.Item, { ...props, style: {
-                ...styles.item,
-                ...(Platform.OS === "web" && {
-                    cursor: props.disabled ? "not-allowed" : "pointer",
-                    outlineStyle: "none",
-                    userSelect: "none",
-                }),
-                ...(props.disabled && { opacity: 0.5 }),
-                ...(styleOverride && typeof styleOverride !== "function"
-                    ? StyleSheet.flatten(styleOverride)
-                    : {}),
-            }, children: [_jsx(View, { style: {
-                        position: "absolute",
-                        left: spacing.sm,
-                        height: 14,
-                        width: 14,
-                        alignItems: "center",
-                        justifyContent: "center",
-                    }, children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Icon, { name: "check", size: 16, color: theme.colors.accent, ...(Platform.OS === "web" && { style: { pointerEvents: "none" } }) }) }) }), _jsx(TextSelectabilityContext.Provider, { value: false, children: hasCustomChildren ? (children) : (_jsx(SelectPrimitive.ItemText, { style: {
-                            color: theme.colors.popoverForeground,
-                            fontSize: 14,
-                            lineHeight: 20,
-                        } })) })] }) }));
+    const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
+        disabled: !!props.disabled,
+        scaleTo: 0.97,
+        haptic: false,
+    });
+    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(Animated.View, { style: scaleStyle, children: _jsxs(SelectPrimitive.Item, { ...props, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, style: {
+                    ...styles.item,
+                    ...(Platform.OS === "web" && {
+                        cursor: props.disabled ? "not-allowed" : "pointer",
+                        outlineStyle: "none",
+                        userSelect: "none",
+                    }),
+                    ...(props.disabled && { opacity: 0.5 }),
+                    ...(styleOverride && typeof styleOverride !== "function"
+                        ? StyleSheet.flatten(styleOverride)
+                        : {}),
+                }, children: [_jsx(View, { style: {
+                            position: "absolute",
+                            left: spacing.sm,
+                            height: 14,
+                            width: 14,
+                            alignItems: "center",
+                            justifyContent: "center",
+                        }, children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Icon, { name: "check", size: 16, color: theme.colors.accent, ...(Platform.OS === "web" && { style: { pointerEvents: "none" } }) }) }) }), _jsx(TextSelectabilityContext.Provider, { value: false, children: hasCustomChildren ? (children) : (_jsx(SelectPrimitive.ItemText, { style: {
+                                color: theme.colors.popoverForeground,
+                                fontSize: 14,
+                                lineHeight: 20,
+                            } })) })] }) }) }));
 }
 function SelectGroup({ style: styleOverride, ...props }) {
     return (_jsx(SelectPrimitive.Group, { ...props, style: {

package/dist/components/Skeleton.js

@@ -71,9 +71,9 @@ export function SkeletonAvatar({ size = 40, style }) {
  * and text lines in a Card-styled wrapper.
  */
 export function SkeletonCard({ showImage = true, imageHeight = 140, showAvatar = true, textLines = 3, style, }) {
-    const { theme } = useTheme();
+    const { theme, getShadowStyle } = useTheme();
     const styles = createCardStyles(theme);
-    return (_jsxs(View, { style: [styles.card, style], children: [showImage && (_jsx(Skeleton, { width: "100%", height: imageHeight, borderRadius: 0 })), _jsxs(View, { style: styles.body, children: [showAvatar && (_jsxs(View, { style: styles.avatarRow, children: [_jsx(SkeletonAvatar, { size: 36 }), _jsxs(View, { style: styles.avatarText, children: [_jsx(Skeleton, { width: "50%", height: 14 }), _jsx(Skeleton, { width: "30%", height: 12 })] })] })), _jsx(SkeletonText, { lines: textLines })] })] }));
+    return (_jsxs(View, { style: [styles.card, getShadowStyle("subtle"), style], children: [showImage && (_jsx(Skeleton, { width: "100%", height: imageHeight, borderRadius: 0 })), _jsxs(View, { style: styles.body, children: [showAvatar && (_jsxs(View, { style: styles.avatarRow, children: [_jsx(SkeletonAvatar, { size: 36 }), _jsxs(View, { style: styles.avatarText, children: [_jsx(Skeleton, { width: "50%", height: 14 }), _jsx(Skeleton, { width: "30%", height: 12 })] })] })), _jsx(SkeletonText, { lines: textLines })] })] }));
 }
 const createCardStyles = (theme) => StyleSheet.create({
     card: {

package/dist/components/StatCard.d.ts

@@ -0,0 +1,45 @@
+import React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+import { type IconName } from "./Icon";
+export type StatChangeDirection = "up" | "down" | "neutral";
+export interface StatCardChange {
+    /** Signed change text, e.g. "+12.5%" or "-3 orders". */
+    value: string;
+    /** Visual direction — drives color and (for up/down) a trend icon. */
+    direction: StatChangeDirection;
+}
+export interface StatCardProps {
+    /** Small uppercase label describing the stat. */
+    label: string;
+    /** The headline stat value. */
+    value: string | number;
+    /** Optional unit suffix rendered smaller and muted next to the value. */
+    unit?: string;
+    /** Optional signed change line below the value. */
+    change?: StatCardChange;
+    /** Optional leading icon name (Feather), rendered beside the label. */
+    icon?: IconName;
+    /** Makes the card pressable with scale feedback (delegates to Card). */
+    onPress?: () => void;
+    /** Custom style override for the outer card. */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * StatCard
+ *
+ * Dashboard stat idiom: a tiny uppercase tracked label, a large
+ * tabular-nums value (with an optional muted unit suffix), and an optional
+ * signed change line (success/destructive/muted by direction). Builds on
+ * `Card` for the container, default shadow, and press feedback.
+ *
+ * @example
+ * ```tsx
+ * <StatCard
+ *   label="Revenue"
+ *   value="48.2"
+ *   unit="k"
+ *   change={{ value: "+12.5%", direction: "up" }}
+ * />
+ * ```
+ */
+export declare function StatCard({ label, value, unit, change, icon, onPress, style }: StatCardProps): React.JSX.Element;

package/dist/components/StatCard.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from "react-native";
+import { Card } from "./Card.js";
+import { CaptionText, StyledText } from "./StyledText.js";
+import { Icon } from "./Icon.js";
+import { useTheme } from "../hooks/useTheme.js";
+import { spacing } from "../constants/spacing.js";
+// Only "up"/"down" get a directional trend icon — "neutral" is text-only.
+const DIRECTION_ICON = {
+    up: "trending-up",
+    down: "trending-down",
+};
+/**
+ * StatCard
+ *
+ * Dashboard stat idiom: a tiny uppercase tracked label, a large
+ * tabular-nums value (with an optional muted unit suffix), and an optional
+ * signed change line (success/destructive/muted by direction). Builds on
+ * `Card` for the container, default shadow, and press feedback.
+ *
+ * @example
+ * ```tsx
+ * <StatCard
+ *   label="Revenue"
+ *   value="48.2"
+ *   unit="k"
+ *   change={{ value: "+12.5%", direction: "up" }}
+ * />
+ * ```
+ */
+export function StatCard({ label, value, unit, change, icon, onPress, style }) {
+    const { theme } = useTheme();
+    const changeColor = !change
+        ? undefined
+        : change.direction === "up"
+            ? theme.colors.success
+            : change.direction === "down"
+                ? theme.colors.destructive
+                : theme.colors.textDim;
+    return (_jsx(Card, { onPress: onPress, style: style, children: _jsxs(View, { style: { padding: spacing.lg, gap: spacing.xs }, children: [_jsxs(View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" }, children: [_jsx(CaptionText, { selectable: false, style: { color: theme.colors.textDim, textTransform: "uppercase", letterSpacing: 0.96 }, children: label }), !!icon && _jsx(Icon, { name: icon, size: spacing.iconSm, color: theme.colors.mutedForeground, decorative: true })] }), _jsxs(View, { style: { flexDirection: "row", alignItems: "flex-end" }, children: [_jsx(StyledText, { selectable: false, size: "xxl", fontWeight: "bold", style: { color: theme.colors.foreground, fontVariant: ["tabular-nums"] }, children: value }), !!unit && (_jsx(StyledText, { selectable: false, size: "base", style: { color: theme.colors.textDim, marginLeft: spacing.xxs, marginBottom: 2 }, children: unit }))] }), !!change && (_jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: spacing.xxs }, children: [change.direction !== "neutral" && (_jsx(Icon, { name: DIRECTION_ICON[change.direction], size: spacing.iconXs, color: changeColor, decorative: true })), _jsx(StyledText, { selectable: false, size: "sm", style: { color: changeColor }, children: change.value })] }))] }) }));
+}

package/dist/components/StyledText.d.ts

@@ -1,13 +1,13 @@
 import { type Ref } from "react";
 import { Text as RNText, TextProps as RNTextProps } from "react-native";
 /**
- * Font size variants following the DM Sans / DM Serif Display scale
+ * Font size variants for the type scale (Inter sans-serif / Georgia serif)
  */
 export type FontSize = "xs" | "sm" | "base" | "body" | "lg" | "xl" | "xxl" | "display";
 /**
  * Semantic text variants for different use cases
  */
-export type SemanticVariant = "title" | "heading" | "subheading" | "body" | "caption" | "label";
+export type SemanticVariant = "title" | "heading" | "subheading" | "body" | "caption" | "label" | "eyebrow";
 /**
  * Font weight options
  */
@@ -18,7 +18,7 @@ export type FontWeight = "light" | "regular" | "medium" | "semibold" | "bold";
 export type TextAlign = "left" | "center" | "right" | "justify" | "auto";
 export type TextProps = RNTextProps & {
     /**
-     * Font variant - serif (DM Serif Display) or sans-serif (DM Sans)
+     * Font variant - serif (Georgia) or sans-serif (Inter)
      */
     variant?: "serif" | "sansSerif";
     /**
@@ -62,9 +62,12 @@ export type TextProps = RNTextProps & {
  *
  * Features:
  * - Size variants (xs, sm, base, body, lg, xl, xxl, display)
- * - Semantic variants (title, heading, subheading, body, caption, label)
+ * - Semantic variants (title, heading, subheading, body, caption, label, eyebrow)
  * - Text alignment prop
- * - Font weight options (light, regular, medium, semibold, bold)
+ * - Font weight options (light, regular, medium, semibold, bold) — resolves to
+ *   real Inter font files on native, and family + numeric fontWeight on web
+ * - Per-size letter-spacing scale (tight on large headings, positive on micro
+ *   labels); explicit `style` letterSpacing always wins
  * - Text selection enabled by default; pass `selectable={false}` for control
  *   chrome such as button labels, tabs, badges, and field labels
  * - numberOfLines and ellipsizeMode support from RN TextProps
@@ -72,27 +75,28 @@ export type TextProps = RNTextProps & {
 export declare function StyledText(props: TextProps): import("react").JSX.Element;
 /**
  * Serif Text Component
- * Uses serif font family (DM Serif Display)
+ * Uses the serif font family (Georgia)
  */
 export declare function SerifText(props: TextProps): import("react").JSX.Element;
 /**
  * Sans-Serif Text Component
- * Uses sans-serif font family (DM Sans)
+ * Uses the sans-serif font family (Inter)
  */
 export declare function SansSerifText(props: TextProps): import("react").JSX.Element;
 /**
  * Serif Bold Text Component
- * Uses serif font family — DM Serif Display only has regular weight
+ * Uses the serif font family — Georgia's only shipped weight is regular
  */
 export declare function SerifBoldText(props: TextProps): import("react").JSX.Element;
 /**
  * Sans-Serif Bold Text Component
- * Uses sans-serif font family with semibold weight (DM Sans 600)
+ * Uses the sans-serif font family at semibold weight (Inter 600)
  */
 export declare function SansSerifBoldText(props: TextProps): import("react").JSX.Element;
 /**
  * Display Text Component
- * Uses DM Serif Display at display size — for hero text and splash screens
+ * Uses the serif font family (Georgia) at display size — for hero text and
+ * splash screens
  */
 export declare function DisplayText(props: TextProps): import("react").JSX.Element;
 /**
@@ -119,3 +123,9 @@ export declare function CaptionText(props: TextProps): import("react").JSX.Eleme
  * Label Text - Medium weight text for form labels
  */
 export declare function LabelText(props: TextProps): import("react").JSX.Element;
+/**
+ * Eyebrow Text - Small, semibold, uppercase section label with wide positive
+ * tracking (the overline idiom above a heading). Consumed by the SectionHeader
+ * primitive (separate spec).
+ */
+export declare function EyebrowText(props: TextProps): import("react").JSX.Element;