radix-native 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,861 @@
+import React$1 from 'react';
+import { ViewStyle, ViewProps, TextProps as TextProps$1, StyleProp, TextStyle, PressableProps } from 'react-native';
+
+type AccentColor = 'gray' | 'gold' | 'bronze' | 'brown' | 'yellow' | 'amber' | 'orange' | 'tomato' | 'red' | 'ruby' | 'crimson' | 'pink' | 'plum' | 'purple' | 'violet' | 'iris' | 'indigo' | 'blue' | 'cyan' | 'teal' | 'jade' | 'green' | 'grass' | 'lime' | 'mint' | 'sky';
+type GrayColor = 'gray' | 'mauve' | 'slate' | 'sage' | 'olive' | 'sand';
+
+type RadiusToken = 'none' | 'small' | 'medium' | 'large' | 'full';
+/** Radius level (1–6) — components choose the level that fits their visual size. */
+type RadiusLevel = 1 | 2 | 3 | 4 | 5 | 6;
+/**
+ * Returns the border radius in pixels for a given token and level.
+ * Each component picks the level that matches its visual size.
+ */
+declare function getRadius(token: RadiusToken, level: RadiusLevel): number;
+/**
+ * Returns the full (pill) radius for a given token.
+ * Use this for components that should be fully rounded when token='full'.
+ */
+declare function getFullRadius(token: RadiusToken): number;
+
+type ScalingMode = '90%' | '95%' | '100%' | '105%' | '110%';
+/** Multiplier applied to space, fontSize and lineHeight */
+declare const scalingMap: Record<ScalingMode, number>;
+
+type ThemeAppearance = 'inherit' | 'light' | 'dark';
+type ThemeColor = `accent-${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}` | `accent-a${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}` | `gray-${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}` | `gray-a${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}` | `${AccentColor}-${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}` | (string & {});
+interface ThemeFonts {
+    /** fontWeight 300 — falls back to regular */
+    light?: string;
+    /** fontWeight 400 — base body font */
+    regular?: string;
+    /** fontWeight 500 — falls back to regular */
+    medium?: string;
+    /** fontWeight 700 — falls back to regular */
+    bold?: string;
+    /** Heading component — falls back to bold → regular */
+    heading?: string;
+    /** Code / Kbd — monospace font, falls back to system monospace */
+    code?: string;
+}
+/**
+ * Partial override of individual color steps within a scale.
+ * Only the steps you specify are overridden; the rest fall back to the built-in scale.
+ */
+type ColorScaleOverride = Partial<Record<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'a1' | 'a2' | 'a3' | 'a4' | 'a5' | 'a6' | 'a7' | 'a8' | 'a9' | 'a10' | 'a11' | 'a12' | 'contrast' | 'surface', string>>;
+/**
+ * Override any color scale with light/dark variants — like overriding CSS custom
+ * properties in Radix web (e.g. `--red-9: #custom`).
+ *
+ * @example
+ * colorOverrides={{
+ *   red: {
+ *     light: { 9: '#e54666', 10: '#dc3b5d' },
+ *     dark:  { 9: '#e5484d', 10: '#ec5d5e' },
+ *   },
+ * }}
+ */
+type ColorOverrides = Partial<Record<AccentColor | GrayColor, {
+    light?: ColorScaleOverride;
+    dark?: ColorScaleOverride;
+}>>;
+interface ThemeChangeHandlers {
+    onAppearanceChange: (value: 'light' | 'dark') => void;
+    onAccentColorChange: (value: AccentColor) => void;
+    onGrayColorChange: (value: GrayColor | 'auto') => void;
+    onRadiusChange: (value: RadiusToken) => void;
+    onScalingChange: (value: ScalingMode) => void;
+}
+interface ThemeContextValue extends ThemeChangeHandlers {
+    /** Resolved appearance — always 'light' | 'dark', never 'inherit' */
+    appearance: 'light' | 'dark';
+    accentColor: AccentColor;
+    grayColor: GrayColor | 'auto';
+    /** Resolved gray when grayColor is 'auto' */
+    resolvedGrayColor: GrayColor;
+    radius: RadiusToken;
+    scaling: ScalingMode;
+    /** RN-only: custom font family names */
+    fonts: ThemeFonts;
+    /** RN-only: override individual color steps */
+    colorOverrides: ColorOverrides;
+}
+interface ThemeProps {
+    appearance?: ThemeAppearance;
+    accentColor?: AccentColor;
+    grayColor?: GrayColor | 'auto';
+    radius?: RadiusToken;
+    scaling?: ScalingMode;
+    /** RN-only */
+    fonts?: ThemeFonts;
+    /** RN-only */
+    colorOverrides?: ColorOverrides;
+    children: React.ReactNode;
+}
+
+declare function Theme(props: ThemeProps): React$1.JSX.Element;
+declare namespace Theme {
+    var displayName: string;
+}
+
+/**
+ * Factory that creates a pre-configured Theme component.
+ * Useful for white-label or multi-brand applications.
+ */
+declare function createTheme(config: Omit<ThemeProps, 'children'>): (props: {
+    children: React$1.ReactNode;
+}) => React$1.JSX.Element;
+
+declare function useThemeContext(): ThemeContextValue;
+
+/**
+ * Returns a resolver function bound to the current theme context.
+ * Use this to resolve ThemeColor tokens to hex strings inside components.
+ *
+ * @example
+ * const rc = useResolveColor()
+ * const bg = rc('gray-1')
+ * const accent = rc('accent-9')
+ * const blue = rc('blue-5')
+ */
+declare function useResolveColor(): (color: ThemeColor) => string;
+
+/** Applies the scaling multiplier to a base pixel value and rounds to nearest integer. */
+declare function applyScaling(value: number, scaling: ScalingMode): number;
+
+type SpaceToken = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+/**
+ * Margin token — superset of SpaceToken that includes negative values.
+ * Matches Radix's marginValues which include '-1' through '-9'.
+ */
+type MarginToken = -9 | -8 | -7 | -6 | -5 | -4 | -3 | -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+/** Base space scale in pixels (before scaling is applied) */
+declare const space: Record<SpaceToken, number>;
+
+/**
+ * Returns the resolved pixel value for a SpaceToken or MarginToken with scaling applied.
+ * Negative margin tokens return a negative pixel value using the absolute space scale.
+ */
+declare function resolveSpace(token: MarginToken, scaling: ScalingMode): number;
+
+/**
+ * Resolves a ThemeColor token to a hex string.
+ *
+ * - `'accent-9'`        → step 9 of the active accent color
+ * - `'accent-a9'`       → alpha step a9 of the active accent color
+ * - `'accent-contrast'` → contrast color (text over step 9 background)
+ * - `'accent-surface'`  → translucent tinted surface
+ * - `'gray-9'`          → step 9 of the resolved gray color
+ * - `'blue-9'`          → step 9 of the blue scale (exact, not aliased)
+ * - `'#ff0000'`         → returned as-is (escape hatch)
+ */
+declare function resolveColor(color: ThemeColor, appearance: 'light' | 'dark', accentColor: AccentColor, resolvedGrayColor: GrayColor, colorOverrides?: ColorOverrides): string;
+
+/**
+ * Returns ViewStyle that approximates the Radix "classic" 3D effect
+ * using only native RN shadow capabilities.
+ *
+ * Radix CSS uses linear-gradient overlays + inset box-shadows which
+ * are not available in RN. We approximate with an outer drop shadow
+ * and pressed state removal (simulates "pushed in").
+ */
+declare function getClassicEffect(appearance: 'light' | 'dark', options?: {
+    pressed?: boolean;
+    disabled?: boolean;
+}): ViewStyle;
+
+interface BoxProps extends ViewProps {
+    p?: SpaceToken;
+    px?: SpaceToken;
+    py?: SpaceToken;
+    pt?: SpaceToken;
+    pr?: SpaceToken;
+    pb?: SpaceToken;
+    pl?: SpaceToken;
+    m?: MarginToken;
+    mx?: MarginToken;
+    my?: MarginToken;
+    mt?: MarginToken;
+    mr?: MarginToken;
+    mb?: MarginToken;
+    ml?: MarginToken;
+    width?: number | string;
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    height?: number | string;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+    position?: 'relative' | 'absolute';
+    top?: number | string;
+    right?: number | string;
+    bottom?: number | string;
+    left?: number | string;
+    overflow?: 'hidden' | 'visible' | 'scroll';
+    flexBasis?: number | string;
+    flexShrink?: number;
+    flexGrow?: number;
+    /** Background color from the theme token system */
+    bg?: ThemeColor;
+    /** Border radius using the theme radius token (level 4 — card-sized) */
+    radius?: RadiusToken;
+}
+/** Fundamental layout primitive backed by a View. */
+declare function Box({ p, px, py, pt, pr, pb, pl, m, mx, my, mt, mr, mb, ml, width, minWidth, maxWidth, height, minHeight, maxHeight, position, top, right, bottom, left, overflow, flexBasis, flexShrink, flexGrow, bg, radius, style, ...rest }: BoxProps): React$1.JSX.Element;
+declare namespace Box {
+    var displayName: string;
+}
+
+type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+type FlexAlign = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+type FlexJustify = 'start' | 'center' | 'end' | 'between';
+type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+interface FlexProps extends ViewProps {
+    direction?: FlexDirection;
+    align?: FlexAlign;
+    justify?: FlexJustify;
+    wrap?: FlexWrap;
+    gap?: SpaceToken;
+    gapX?: SpaceToken;
+    gapY?: SpaceToken;
+    p?: SpaceToken;
+    px?: SpaceToken;
+    py?: SpaceToken;
+    pt?: SpaceToken;
+    pr?: SpaceToken;
+    pb?: SpaceToken;
+    pl?: SpaceToken;
+    m?: MarginToken;
+    mx?: MarginToken;
+    my?: MarginToken;
+    mt?: MarginToken;
+    mr?: MarginToken;
+    mb?: MarginToken;
+    ml?: MarginToken;
+    width?: number | string;
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    height?: number | string;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+    position?: 'relative' | 'absolute';
+    top?: number | string;
+    right?: number | string;
+    bottom?: number | string;
+    left?: number | string;
+    overflow?: 'hidden' | 'visible' | 'scroll';
+    flexBasis?: number | string;
+    flexShrink?: number;
+    flexGrow?: number;
+    bg?: ThemeColor;
+    radius?: RadiusToken;
+}
+/** Flexbox layout primitive. Renders as a View with display: flex (the RN default). */
+declare function Flex({ direction, align, justify, wrap, gap, gapX, gapY, p, px, py, pt, pr, pb, pl, m, mx, my, mt, mr, mb, ml, width, minWidth, maxWidth, height, minHeight, maxHeight, position, top, right, bottom, left, overflow, flexBasis, flexShrink, flexGrow, bg, radius, style, ...rest }: FlexProps): React$1.JSX.Element;
+declare namespace Flex {
+    var displayName: string;
+}
+
+/**
+ * Grid — CSS-Grid-inspired layout component for React Native.
+ *
+ * Renders a plain View with `flexDirection: 'row'` and `flexWrap: 'wrap'`.
+ * Each direct child is automatically wrapped in a cell whose width is
+ * calculated from the number of `columns` so items flow into a uniform grid.
+ *
+ * ─── What it CAN do ────────────────────────────────────────────────────────────
+ *  - Equal-width column grids: `<Grid columns={3} gap={3}>…</Grid>`
+ *  - Theme-aware gap, padding, margin, background, and radius tokens
+ *  - Consistent spacing via `gap` / `gapX` / `gapY` (mapped to space tokens)
+ *  - Alignment of items within the grid via `align` / `justify`
+ *
+ * ─── What it CANNOT do (CSS Grid limitations in RN) ────────────────────────────
+ *  - Mixed-width column templates (e.g. `"1fr 2fr"`, `"200px 1fr"`)
+ *  - Row templates (`grid-template-rows`)
+ *  - `grid-auto-flow: column`
+ *  - Children spanning multiple columns/rows (`grid-column: span 2`)
+ *  - Named grid areas (`grid-template-areas`)
+ *  - Responsive breakpoint objects — use platform-specific logic instead
+ *
+ * ─── For scrolling & virtualization ────────────────────────────────────────────
+ *  Grid is a layout container (View), NOT a scrollable list.
+ *  If you need scrolling or virtualized rendering, use one of:
+ *    - `<FlatList numColumns={N} />`       (React Native built-in)
+ *    - `<FlashList numColumns={N} />`      (@shopify/flash-list)
+ *    - `<LegendList numColumns={N} />`     (@legendapp/list)
+ *  These support virtualization out of the box and are the right choice for
+ *  long or dynamic lists rendered in a grid.
+ */
+
+type GridAlign = 'start' | 'center' | 'end' | 'stretch';
+type GridJustify = 'start' | 'center' | 'end' | 'between';
+interface GridProps extends Omit<ViewProps, 'style'> {
+    /** Number of equal-width columns. Default: 1. */
+    columns?: number;
+    /** Space token applied to both row and column gaps. */
+    gap?: SpaceToken;
+    /** Space token for column (horizontal) gaps only. Overrides `gap`. */
+    gapX?: SpaceToken;
+    /** Space token for row (vertical) gaps only. Overrides `gap`. */
+    gapY?: SpaceToken;
+    /** Cross-axis alignment of items within their cells. */
+    align?: GridAlign;
+    /** Main-axis justification of items within their cells. */
+    justify?: GridJustify;
+    p?: SpaceToken;
+    px?: SpaceToken;
+    py?: SpaceToken;
+    pt?: SpaceToken;
+    pr?: SpaceToken;
+    pb?: SpaceToken;
+    pl?: SpaceToken;
+    m?: MarginToken;
+    mx?: MarginToken;
+    my?: MarginToken;
+    mt?: MarginToken;
+    mr?: MarginToken;
+    mb?: MarginToken;
+    ml?: MarginToken;
+    width?: number | string;
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    height?: number | string;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+    position?: 'relative' | 'absolute';
+    top?: number | string;
+    right?: number | string;
+    bottom?: number | string;
+    left?: number | string;
+    overflow?: 'hidden' | 'visible' | 'scroll';
+    flexBasis?: number | string;
+    flexShrink?: number;
+    flexGrow?: number;
+    bg?: ThemeColor;
+    radius?: RadiusToken;
+    style?: ViewProps['style'];
+}
+declare function Grid({ columns, gap, gapX, gapY, align, justify, p, px, py, pt, pr, pb, pl, m, mx, my, mt, mr, mb, ml, width, minWidth, maxWidth, height, minHeight, maxHeight, position, top, right, bottom, left, overflow, flexBasis, flexShrink, flexGrow, bg, radius, style, children, onLayout: onLayoutProp, ...rest }: GridProps): React$1.JSX.Element;
+declare namespace Grid {
+    var displayName: string;
+}
+
+type FontSizeToken = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+/** Base font size scale in pixels (before scaling is applied) */
+declare const fontSize: Record<FontSizeToken, number>;
+/** Base line height scale in pixels (before scaling is applied) */
+declare const lineHeight: Record<FontSizeToken, number>;
+/**
+ * Heading line heights in pixels (before scaling).
+ * Tighter than body line heights for sizes 2–5.
+ */
+declare const headingLineHeight: Record<FontSizeToken, number>;
+/**
+ * Letter spacing as em multipliers per size token.
+ * In RN, letterSpacing is in pixels — multiply by the resolved fontSize:
+ *   letterSpacing = letterSpacingEm[size] * resolvedFontSize
+ */
+declare const letterSpacingEm: Record<FontSizeToken, number>;
+
+type TextSize = FontSizeToken;
+type TextWeight = 'light' | 'regular' | 'medium' | 'bold';
+type TextAlign = 'left' | 'center' | 'right';
+/** 'pretty' and 'balance' are not supported in React Native and have no effect. */
+type TextWrap = 'wrap' | 'nowrap' | 'pretty' | 'balance';
+interface TextProps extends Omit<TextProps$1, 'style'> {
+    /** Text size token (1–9). Default: 3 (16px). */
+    size?: TextSize;
+    /** Font weight. Each weight maps to its own fontFamily when configured in ThemeFonts. */
+    weight?: TextWeight;
+    /** Text alignment. */
+    align?: TextAlign;
+    /** Truncates text with an ellipsis when it overflows its container. */
+    truncate?: boolean;
+    /**
+     * Controls text wrapping.
+     * 'nowrap' → single line with clip (no ellipsis).
+     * 'pretty' / 'balance' → not supported in React Native, no-op.
+     */
+    wrap?: TextWrap;
+    /**
+     * Text color from the theme palette.
+     * When set: uses alpha step a11 (accessible foreground).
+     * When not set: uses gray-12 (standard body text color).
+     */
+    color?: AccentColor;
+    /**
+     * Increases color contrast when `color` is set: switches from a11 → solid 12.
+     * Has no effect when `color` is not set (gray-12 is already maximum contrast).
+     */
+    highContrast?: boolean;
+    m?: MarginToken;
+    mx?: MarginToken;
+    my?: MarginToken;
+    mt?: MarginToken;
+    mr?: MarginToken;
+    mb?: MarginToken;
+    ml?: MarginToken;
+    style?: StyleProp<TextStyle>;
+}
+declare function Text({ size, weight, align, truncate, wrap, color, highContrast, m, mx, my, mt, mr, mb, ml, style, ...rest }: TextProps): React$1.JSX.Element;
+declare namespace Text {
+    var displayName: string;
+}
+
+type HeadingSize = FontSizeToken;
+interface HeadingProps {
+    /** Heading size token (1–9). Default: 6 (24px). */
+    size?: HeadingSize;
+    /** Font weight. Default: 'bold'. */
+    weight?: TextWeight;
+    /** Text alignment. */
+    align?: TextAlign;
+    /** Truncates text with an ellipsis when it overflows its container. */
+    truncate?: boolean;
+    /**
+     * Controls text wrapping.
+     * 'nowrap' → single line with clip. 'pretty'/'balance' → not supported in React Native, no-op.
+     */
+    wrap?: TextWrap;
+    /**
+     * Text color from the theme palette.
+     * No color → gray-12; color → {color}-a11; color + highContrast → {color}-12.
+     */
+    color?: AccentColor;
+    /** Increases color contrast when `color` is set (a11 → solid 12). */
+    highContrast?: boolean;
+    m?: MarginToken;
+    mx?: MarginToken;
+    my?: MarginToken;
+    mt?: MarginToken;
+    mr?: MarginToken;
+    mb?: MarginToken;
+    ml?: MarginToken;
+    style?: StyleProp<TextStyle>;
+    children?: React$1.ReactNode;
+    accessibilityLabel?: string;
+}
+declare function Heading({ size, weight, align, truncate, wrap, color, highContrast, m, mx, my, mt, mr, mb, ml, style, children, ...rest }: HeadingProps): React$1.JSX.Element;
+declare namespace Heading {
+    var displayName: string;
+}
+
+/**
+ * Controls underline visibility.
+ * 'auto'   → no underline by default (Radix shows on hover; RN has no hover).
+ *             highContrast forces underline visible (matches Radix .rt-high-contrast).
+ * 'always' → underline always visible
+ * 'hover'  → no underline (hover never fires in RN)
+ * 'none'   → no underline
+ */
+type LinkUnderline = 'auto' | 'always' | 'hover' | 'none';
+interface LinkProps extends Omit<TextProps$1, 'style'> {
+    /** Text size token (1–9). Default: inherits — set to 3 (16px) if no parent. */
+    size?: FontSizeToken;
+    weight?: TextWeight;
+    /** Truncates text with an ellipsis when it overflows. */
+    truncate?: boolean;
+    /** Controls text wrapping. 'pretty'/'balance' are not supported in React Native, no-op. */
+    wrap?: TextWrap;
+    /**
+     * Underline visibility. Default: 'auto'.
+     * 'auto' → no underline, unless highContrast is set.
+     * 'hover' → no underline (hover does not exist on mobile).
+     */
+    underline?: LinkUnderline;
+    /** Accent color for the link. Default: theme accent (accent-11). */
+    color?: AccentColor;
+    /** Switches color to step 12 and forces underline visible in 'auto' mode. */
+    highContrast?: boolean;
+    /**
+     * RN-only: URL opened via Linking.openURL when pressed.
+     * If both `href` and `onPress` are provided, `onPress` takes precedence.
+     */
+    href?: string;
+    m?: MarginToken;
+    mx?: MarginToken;
+    my?: MarginToken;
+    mt?: MarginToken;
+    mr?: MarginToken;
+    mb?: MarginToken;
+    ml?: MarginToken;
+    style?: StyleProp<TextStyle>;
+}
+declare function Link({ size, weight, truncate, wrap, underline, color, highContrast, href, onPress, m, mx, my, mt, mr, mb, ml, style, ...rest }: LinkProps): React$1.JSX.Element;
+declare namespace Link {
+    var displayName: string;
+}
+
+interface BlockquoteProps {
+    /** Text size token (1–9). Default: 3 (16px). */
+    size?: FontSizeToken;
+    /** Font weight. Default: 'regular'. */
+    weight?: TextWeight;
+    /** Text color. When not set: uses gray-12. */
+    color?: AccentColor;
+    /** Increases color contrast when `color` is set (a11 → 12). */
+    highContrast?: boolean;
+    /** Truncates text with an ellipsis when it overflows. */
+    truncate?: boolean;
+    /** Controls text wrapping. 'pretty'/'balance' are not supported in React Native, no-op. */
+    wrap?: TextWrap;
+    m?: MarginToken;
+    mx?: MarginToken;
+    my?: MarginToken;
+    mt?: MarginToken;
+    mr?: MarginToken;
+    mb?: MarginToken;
+    ml?: MarginToken;
+    style?: StyleProp<ViewStyle>;
+    children?: React$1.ReactNode;
+}
+declare function Blockquote({ size, weight, color, highContrast, truncate, wrap, m, mx, my, mt, mr, mb, ml, style, children, }: BlockquoteProps): React$1.JSX.Element;
+declare namespace Blockquote {
+    var displayName: string;
+}
+
+interface EmProps extends Omit<TextProps$1, 'style'> {
+    /** Truncates text with an ellipsis when it overflows. */
+    truncate?: boolean;
+    /** Controls text wrapping. 'pretty'/'balance' are not supported in React Native, no-op. */
+    wrap?: TextWrap;
+    m?: MarginToken;
+    mx?: MarginToken;
+    my?: MarginToken;
+    mt?: MarginToken;
+    mr?: MarginToken;
+    mb?: MarginToken;
+    ml?: MarginToken;
+    style?: StyleProp<TextStyle>;
+}
+/**
+ * Inline italic text. Can be nested inside `<Text>` for inline use.
+ * Can be nested inside `<Text>` for inline use.
+ */
+declare function Em({ truncate, wrap, m, mx, my, mt, mr, mb, ml, style, ...rest }: EmProps): React$1.JSX.Element;
+declare namespace Em {
+    var displayName: string;
+}
+
+interface StrongProps extends Omit<TextProps$1, 'style'> {
+    /** Truncates text with an ellipsis when it overflows. */
+    truncate?: boolean;
+    /** Controls text wrapping. 'pretty'/'balance' are not supported in React Native, no-op. */
+    wrap?: TextWrap;
+    m?: MarginToken;
+    mx?: MarginToken;
+    my?: MarginToken;
+    mt?: MarginToken;
+    mr?: MarginToken;
+    mb?: MarginToken;
+    ml?: MarginToken;
+    style?: StyleProp<TextStyle>;
+}
+/**
+ * Inline bold text. Can be nested inside `<Text>` for inline use.
+ * Can be nested inside `<Text>` for inline use.
+ * Uses `fonts.bold` when provided, otherwise `fontWeight: '700'`.
+ */
+declare function Strong({ truncate, wrap, m, mx, my, mt, mr, mb, ml, style, ...rest }: StrongProps): React$1.JSX.Element;
+declare namespace Strong {
+    var displayName: string;
+}
+
+type CodeVariant = 'solid' | 'soft' | 'outline' | 'ghost';
+interface CodeProps extends Omit<TextProps$1, 'style'> {
+    /** Text size token (1–9). Default: inherits context — set to 3 (16px) if no parent. */
+    size?: FontSizeToken;
+    /**
+     * Visual style.
+     * 'soft'    → light accent background, accent-a11 text (default)
+     * 'solid'   → filled accent-9 background, contrast text
+     * 'outline' → transparent background with accent border
+     * 'ghost'   → no background, no border
+     */
+    variant?: CodeVariant;
+    weight?: TextWeight;
+    /** Accent color. Default: theme accent. */
+    color?: AccentColor;
+    /** Increases color contrast (a11 → 12 for text in soft/outline/ghost). */
+    highContrast?: boolean;
+    /** Truncates text with an ellipsis when it overflows. */
+    truncate?: boolean;
+    /** Controls text wrapping. 'pretty'/'balance' are not supported in React Native, no-op. */
+    wrap?: TextWrap;
+    m?: MarginToken;
+    mx?: MarginToken;
+    my?: MarginToken;
+    mt?: MarginToken;
+    mr?: MarginToken;
+    mb?: MarginToken;
+    ml?: MarginToken;
+    style?: StyleProp<TextStyle>;
+}
+/**
+ * Inline code. Can be nested inside `<Text>` for inline use.
+ * Can be nested inside `<Text>` for inline use.
+ *
+ * Note: In RN, `backgroundColor` on inline Text fills the tight text bounds
+ * without padding/borderRadius support when nested. For block-level code with
+ * full visual fidelity, wrap in a `<Box>` with explicit styling.
+ */
+declare function Code({ size, variant, weight, color, highContrast, truncate, wrap, m, mx, my, mt, mr, mb, ml, style, ...rest }: CodeProps): React$1.JSX.Element;
+declare namespace Code {
+    var displayName: string;
+}
+
+type KbdVariant = 'classic' | 'soft';
+interface KbdProps {
+    /**
+     * Text size token (1–9).
+     *
+     * In Radix web, Kbd uses `0.75em` to inherit from the parent.
+     * In RN there are no relative units, so `size` sets the *parent* text size
+     * and the Kbd font is derived as `fontSize[size] * 0.8` (matching Radix).
+     */
+    size?: FontSizeToken;
+    /** Visual variant. Default: `'classic'`. */
+    variant?: KbdVariant;
+    m?: MarginToken;
+    mx?: MarginToken;
+    my?: MarginToken;
+    mt?: MarginToken;
+    mr?: MarginToken;
+    mb?: MarginToken;
+    ml?: MarginToken;
+    style?: StyleProp<ViewStyle>;
+    children?: React$1.ReactNode;
+}
+/**
+ * Keyboard key indicator — styled to look like a physical key.
+ *
+ * Follows the Radix Themes Kbd API:
+ * - `size` 1-9 (default 2)
+ * - `variant` 'classic' (raised key with shadow) | 'soft' (flat tinted bg)
+ * - Margin props: m, mx, my, mt, mr, mb, ml
+ *
+ * When nested inline inside `<Text>`, RN places the View's bottom at the
+ * text baseline. We use `transform: translateY` to shift it into alignment
+ * (marginBottom is ignored for inline Views in Text).
+ */
+declare function Kbd({ size, variant, m, mx, my, mt, mr, mb, ml, style, children, }: KbdProps): React$1.JSX.Element;
+declare namespace Kbd {
+    var displayName: string;
+}
+
+interface QuoteProps extends Omit<TextProps$1, 'style'> {
+    /** Truncates text with an ellipsis when it overflows. */
+    truncate?: boolean;
+    /** Controls text wrapping. 'pretty'/'balance' are not supported in React Native, no-op. */
+    wrap?: TextWrap;
+    m?: MarginToken;
+    mx?: MarginToken;
+    my?: MarginToken;
+    mt?: MarginToken;
+    mr?: MarginToken;
+    mb?: MarginToken;
+    ml?: MarginToken;
+    style?: StyleProp<TextStyle>;
+}
+/**
+ * Inline quoted text. Wraps children with typographic curly quotes (" ").
+ * Can be nested inside `<Text>` for inline use.
+ */
+declare function Quote({ truncate, wrap, m, mx, my, mt, mr, mb, ml, style, children, ...rest }: QuoteProps): React$1.JSX.Element;
+declare namespace Quote {
+    var displayName: string;
+}
+
+type ButtonSize = 1 | 2 | 3 | 4;
+type ButtonVariant = 'classic' | 'solid' | 'soft' | 'surface' | 'outline' | 'ghost';
+interface ButtonProps extends Omit<PressableProps, 'style' | 'children'> {
+    /** Button size (1–4). Default: 2. */
+    size?: ButtonSize;
+    /** Visual variant. Default: 'solid'. */
+    variant?: ButtonVariant;
+    /** Accent color. Default: theme accent. */
+    color?: AccentColor;
+    /** Increases color contrast with the background. */
+    highContrast?: boolean;
+    /** Override the theme radius for this button. */
+    radius?: RadiusToken;
+    /** Shows a loading spinner and disables the button. */
+    loading?: boolean;
+    /** Disables the button. */
+    disabled?: boolean;
+    /** Button content (usually a string). */
+    children?: React$1.ReactNode;
+    m?: MarginToken;
+    mx?: MarginToken;
+    my?: MarginToken;
+    mt?: MarginToken;
+    mr?: MarginToken;
+    mb?: MarginToken;
+    ml?: MarginToken;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Button({ size, variant, color, highContrast, radius: radiusProp, loading, disabled, children, m, mx, my, mt, mr, mb, ml, style, onPress, ...rest }: ButtonProps): React$1.JSX.Element;
+declare namespace Button {
+    var displayName: string;
+}
+
+type CheckboxSize = 1 | 2 | 3;
+type CheckboxVariant = 'classic' | 'surface' | 'soft';
+type CheckedState = boolean | 'indeterminate';
+interface CheckboxProps extends Omit<PressableProps, 'style' | 'children'> {
+    /** Checkbox size (1–3). Default: 2. */
+    size?: CheckboxSize;
+    /** Visual variant. Default: 'surface'. */
+    variant?: CheckboxVariant;
+    /** Accent color. Default: theme accent. */
+    color?: AccentColor;
+    /** Increases color contrast with the background. */
+    highContrast?: boolean;
+    /** Controlled checked state. */
+    checked?: CheckedState;
+    /** Uncontrolled default checked state. */
+    defaultChecked?: CheckedState;
+    /** Called when the checked state changes. */
+    onCheckedChange?: (checked: CheckedState) => void;
+    /** Disables the checkbox. */
+    disabled?: boolean;
+    m?: MarginToken;
+    mx?: MarginToken;
+    my?: MarginToken;
+    mt?: MarginToken;
+    mr?: MarginToken;
+    mb?: MarginToken;
+    ml?: MarginToken;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Checkbox({ size, variant, color, highContrast, checked: checkedProp, defaultChecked, onCheckedChange, disabled, m, mx, my, mt, mr, mb, ml, style, ...rest }: CheckboxProps): React$1.JSX.Element;
+declare namespace Checkbox {
+    var displayName: string;
+}
+
+interface CheckboxGroupProps {
+    /** Checkbox size (1–3). Default: 2. */
+    size?: CheckboxSize;
+    /** Visual variant. Default: 'surface'. */
+    variant?: CheckboxVariant;
+    /** Accent color. Default: theme accent. */
+    color?: AccentColor;
+    /** Increases color contrast with the background. */
+    highContrast?: boolean;
+    /** Controlled selected values. */
+    value?: string[];
+    /** Uncontrolled default selected values. */
+    defaultValue?: string[];
+    /** Called when selected values change. */
+    onValueChange?: (value: string[]) => void;
+    /** Disables all checkboxes in the group. */
+    disabled?: boolean;
+    /** Group children (CheckboxGroup.Item). */
+    children?: React$1.ReactNode;
+    m?: MarginToken;
+    mx?: MarginToken;
+    my?: MarginToken;
+    mt?: MarginToken;
+    mr?: MarginToken;
+    mb?: MarginToken;
+    ml?: MarginToken;
+    style?: StyleProp<ViewStyle>;
+}
+interface CheckboxGroupItemProps {
+    /** Unique value identifying this item. */
+    value: string;
+    /** Disables this individual item. */
+    disabled?: boolean;
+    /** Label text or custom content. */
+    children?: React$1.ReactNode;
+    m?: MarginToken;
+    mx?: MarginToken;
+    my?: MarginToken;
+    mt?: MarginToken;
+    mr?: MarginToken;
+    mb?: MarginToken;
+    ml?: MarginToken;
+    style?: StyleProp<ViewStyle>;
+}
+declare function CheckboxGroupRoot({ size, variant, color, highContrast, value: valueProp, defaultValue, onValueChange, disabled, children, m, mx, my, mt, mr, mb, ml, style, }: CheckboxGroupProps): React$1.JSX.Element;
+declare namespace CheckboxGroupRoot {
+    var displayName: string;
+}
+declare function CheckboxGroupItem({ value: itemValue, disabled: disabledProp, children, m, mx, my, mt, mr, mb, ml, style, }: CheckboxGroupItemProps): React$1.JSX.Element;
+declare namespace CheckboxGroupItem {
+    var displayName: string;
+}
+declare const CheckboxGroup: typeof CheckboxGroupRoot & {
+    Root: typeof CheckboxGroupRoot;
+    Item: typeof CheckboxGroupItem;
+};
+
+type CheckboxCardsVariant = 'surface' | 'classic';
+interface CheckboxCardsProps {
+    /** Card size (1–3). Default: 2. */
+    size?: CheckboxSize;
+    /** Visual variant. Default: 'surface'. */
+    variant?: CheckboxCardsVariant;
+    /** Accent color. Default: theme accent. */
+    color?: AccentColor;
+    /** Increases color contrast with the background. */
+    highContrast?: boolean;
+    /** Number of columns. Default: 1. */
+    columns?: number;
+    /** Gap between cards as space token. Default: 4. */
+    gap?: SpaceToken;
+    /** Controlled selected values. */
+    value?: string[];
+    /** Uncontrolled default selected values. */
+    defaultValue?: string[];
+    /** Called when selected values change. */
+    onValueChange?: (value: string[]) => void;
+    /** Disables all cards. */
+    disabled?: boolean;
+    /** Card items. */
+    children?: React$1.ReactNode;
+    m?: MarginToken;
+    mx?: MarginToken;
+    my?: MarginToken;
+    mt?: MarginToken;
+    mr?: MarginToken;
+    mb?: MarginToken;
+    ml?: MarginToken;
+    style?: StyleProp<ViewStyle>;
+}
+interface CheckboxCardsItemProps {
+    /** Unique value identifying this card. */
+    value: string;
+    /** Disables this individual card. */
+    disabled?: boolean;
+    /** Card content. */
+    children?: React$1.ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare function CheckboxCardsRoot({ size, variant, color, highContrast, columns, gap: gapProp, value: valueProp, defaultValue, onValueChange, disabled, children, m, mx, my, mt, mr, mb, ml, style, }: CheckboxCardsProps): React$1.JSX.Element;
+declare namespace CheckboxCardsRoot {
+    var displayName: string;
+}
+declare function CheckboxCardsItem({ value: itemValue, disabled: disabledProp, children, style, }: CheckboxCardsItemProps): React$1.JSX.Element;
+declare namespace CheckboxCardsItem {
+    var displayName: string;
+}
+declare const CheckboxCards: typeof CheckboxCardsRoot & {
+    Root: typeof CheckboxCardsRoot;
+    Item: typeof CheckboxCardsItem;
+};
+
+interface ThemeControlsProps {
+    /** Show the "Copy Theme" button at the bottom */
+    showCopyTheme?: boolean;
+    /** Callback when "Copy Theme" is pressed — receives the config string */
+    onCopyTheme?: (config: string) => void;
+    /** Start with the panel open */
+    defaultOpen?: boolean;
+}
+declare function ThemeControls({ showCopyTheme, onCopyTheme, defaultOpen }?: ThemeControlsProps): React$1.JSX.Element;
+declare namespace ThemeControls {
+    var displayName: string;
+}
+
+export { Blockquote, Box, Button, Checkbox, CheckboxCards, CheckboxGroup, Code, Em, Flex, Grid, Heading, Kbd, Link, Quote, Strong, Text, Theme, ThemeControls, applyScaling, createTheme, fontSize, getClassicEffect, getFullRadius, getRadius, headingLineHeight, letterSpacingEm, lineHeight, resolveColor, resolveSpace, scalingMap, space, useResolveColor, useThemeContext };
+export type { AccentColor, BlockquoteProps, BoxProps, ButtonProps, ButtonSize, ButtonVariant, CheckboxCardsItemProps, CheckboxCardsProps, CheckboxCardsVariant, CheckboxGroupItemProps, CheckboxGroupProps, CheckboxProps, CheckboxSize, CheckboxVariant, CheckedState, CodeProps, CodeVariant, ColorOverrides, ColorScaleOverride, EmProps, FlexAlign, FlexDirection, FlexJustify, FlexProps, FlexWrap, FontSizeToken, GrayColor, GridAlign, GridJustify, GridProps, HeadingProps, HeadingSize, KbdProps, KbdVariant, LinkProps, LinkUnderline, MarginToken, QuoteProps, RadiusLevel, RadiusToken, ScalingMode, SpaceToken, StrongProps, TextAlign, TextProps, TextSize, TextWeight, TextWrap, ThemeAppearance, ThemeColor, ThemeContextValue, ThemeControlsProps, ThemeFonts, ThemeProps };