@muja-ui/native 0.2.0

package/dist/index.d.cts

@@ -0,0 +1,1039 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as react_native from 'react-native';
+import { FlexStyle, ViewStyle, ViewProps, StyleProp, View, TextStyle, TextProps as TextProps$1, Text as Text$1, PressableProps, TextInputProps, TextInput, DimensionValue } from 'react-native';
+import { Theme, IconDefinition, Variant, Size, ColorMode, ResolvedColorMode } from '@muja-ui/core';
+export { ColorMode, IconDefinition, ResolvedColorMode, Size, Status, Theme, ThemeOverride, Variant, createTheme, darkTheme, lightTheme, registerIcons } from '@muja-ui/core';
+import { SpaceToken, SemanticColorToken, BorderWidthToken, RadiusToken, ShadowToken, ZIndexToken, ShadowValue, FontSizeToken, FontWeightToken, FontFamilyToken, LineHeightToken, LetterSpacingToken } from '@muja-ui/tokens';
+
+/**
+ * Token-bound style props — the same names the web package uses, so a screen
+ * reads the same on both platforms. Values resolve against the active theme at
+ * render time (React Native has no CSS variables).
+ */
+interface StyleProps {
+    /** margin */
+    m?: SpaceToken;
+    mt?: SpaceToken;
+    mr?: SpaceToken;
+    mb?: SpaceToken;
+    ml?: SpaceToken;
+    mx?: SpaceToken;
+    my?: SpaceToken;
+    /** padding */
+    p?: SpaceToken;
+    pt?: SpaceToken;
+    pr?: SpaceToken;
+    pb?: SpaceToken;
+    pl?: SpaceToken;
+    px?: SpaceToken;
+    py?: SpaceToken;
+    /** colors */
+    bg?: SemanticColorToken;
+    borderColor?: SemanticColorToken;
+    /** borders & effects */
+    borderWidth?: BorderWidthToken;
+    borderTopWidth?: BorderWidthToken;
+    borderBottomWidth?: BorderWidthToken;
+    radius?: RadiusToken;
+    shadow?: ShadowToken;
+    opacity?: number;
+    zIndex?: ZIndexToken;
+    /** sizing — numbers are density-independent pixels, strings pass through ('100%') */
+    w?: FlexStyle['width'];
+    h?: FlexStyle['height'];
+    minW?: FlexStyle['minWidth'];
+    maxW?: FlexStyle['maxWidth'];
+    minH?: FlexStyle['minHeight'];
+    maxH?: FlexStyle['maxHeight'];
+    /** layout */
+    flex?: number;
+    alignSelf?: FlexStyle['alignSelf'];
+    position?: FlexStyle['position'];
+    top?: FlexStyle['top'];
+    right?: FlexStyle['right'];
+    bottom?: FlexStyle['bottom'];
+    left?: FlexStyle['left'];
+    overflow?: ViewStyle['overflow'];
+}
+/**
+ * Translates a token shadow into React Native's two shadow models: iOS reads
+ * the offset/opacity/radius quartet, Android only has `elevation`.
+ */
+declare function shadowStyle(value: ShadowValue): ViewStyle;
+/**
+ * Splits an incoming prop object into a resolved React Native style and the
+ * remaining component props.
+ */
+declare function splitStyleProps<P extends Record<string, unknown>>(props: P, theme: Theme): {
+    style: ViewStyle;
+    rest: Omit<P, keyof StyleProps>;
+};
+
+type BoxProps = StyleProps & Omit<ViewProps, 'style'> & {
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * The base layout primitive — a `View` with token-bound style props. Same prop
+ * names as `@muja-ui/web`'s Box, so layout code ports between platforms.
+ *
+ * ```tsx
+ * <Box p={6} bg="surface" radius="lg" shadow="sm" />
+ * ```
+ */
+declare const Box: react.ForwardRefExoticComponent<StyleProps & Omit<ViewProps, "style"> & {
+    style?: StyleProp<ViewStyle>;
+} & react.RefAttributes<View>>;
+
+interface FlexOwnProps {
+    direction?: FlexStyle['flexDirection'];
+    align?: FlexStyle['alignItems'];
+    justify?: FlexStyle['justifyContent'];
+    wrap?: FlexStyle['flexWrap'];
+    gap?: SpaceToken;
+    rowGap?: SpaceToken;
+    columnGap?: SpaceToken;
+}
+type FlexProps = FlexOwnProps & BoxProps;
+/** Flexbox container with token-bound `gap`. */
+declare const Flex: react.ForwardRefExoticComponent<FlexOwnProps & StyleProps & Omit<react_native.ViewProps, "style"> & {
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+} & react.RefAttributes<View>>;
+
+type StackProps = FlexProps;
+/** Vertical flex layout with a default gap. Use `direction="row"` for rows. */
+declare const Stack: react.ForwardRefExoticComponent<FlexOwnProps & StyleProps & Omit<react_native.ViewProps, "style"> & {
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+} & react.RefAttributes<View>>;
+/** Horizontal convenience wrapper around `Stack`. */
+declare const HStack: react.ForwardRefExoticComponent<FlexOwnProps & StyleProps & Omit<react_native.ViewProps, "style"> & {
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+} & react.RefAttributes<View>>;
+
+interface SpacerProps {
+    /** Fixed size along the parent's main axis. Omit to grow and fill. */
+    size?: SpaceToken;
+    axis?: 'horizontal' | 'vertical';
+}
+/** Flexible or fixed empty space. Without `size` it expands to fill. */
+declare function Spacer({ size, axis }: SpacerProps): react.JSX.Element;
+
+interface DividerProps {
+    orientation?: 'horizontal' | 'vertical';
+    color?: SemanticColorToken;
+    style?: StyleProp<ViewStyle>;
+}
+/** A one-hairline rule. Decorative — hidden from screen readers. */
+declare function Divider({ orientation, color, style }: DividerProps): react.JSX.Element;
+
+interface TextOwnProps {
+    size?: FontSizeToken;
+    weight?: FontWeightToken;
+    family?: FontFamilyToken;
+    leading?: LineHeightToken;
+    tracking?: LetterSpacingToken;
+    align?: TextStyle['textAlign'];
+    /** Semantic color token. Defaults to the theme's body text color. */
+    color?: SemanticColorToken;
+    /** Clips overflowing text to a single line with an ellipsis. */
+    truncate?: boolean;
+}
+type TextProps = TextOwnProps & StyleProps & Omit<TextProps$1, 'style'> & {
+    style?: StyleProp<TextStyle>;
+};
+/**
+ * Typography primitive. Color always comes from a semantic token, never a raw
+ * value. React Native needs an absolute `lineHeight`, so the unitless token
+ * multiplier is resolved against the font size here.
+ *
+ * ```tsx
+ * <Text size="sm" color="textSecondary" truncate>…</Text>
+ * ```
+ */
+declare const Text: react.ForwardRefExoticComponent<TextOwnProps & StyleProps & Omit<TextProps$1, "style"> & {
+    style?: StyleProp<TextStyle>;
+} & react.RefAttributes<Text$1>>;
+
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+interface HeadingProps extends Omit<TextProps, 'accessibilityRole'> {
+    /** Semantic heading level — sets the screen-reader heading role and default size. */
+    level?: HeadingLevel;
+}
+/**
+ * A heading with the correct accessibility role. Sizes follow the level unless
+ * `size` overrides them.
+ *
+ * ```tsx
+ * <Heading level={2}>Upcoming events</Heading>
+ * ```
+ */
+declare const Heading: react.ForwardRefExoticComponent<HeadingProps & react.RefAttributes<Text$1>>;
+
+interface IconProps {
+    /** An icon definition (preferred, tree-shakable) or a registered icon name. */
+    icon: IconDefinition | string;
+    size?: number;
+    /** Semantic color token. Defaults to the current text color. */
+    color?: SemanticColorToken;
+    /** Accessible label. Without it the icon is treated as decorative. */
+    label?: string;
+    strokeWidth?: number;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Renders a stroke-style icon from `@muja-ui/icons` through react-native-svg,
+ * from the same platform-neutral path data the web package uses.
+ *
+ * ```tsx
+ * <Icon icon={CheckIcon} color="success" />
+ * ```
+ */
+declare function Icon({ icon, size, color, label, strokeWidth, style, }: IconProps): react.JSX.Element | null;
+
+interface ButtonProps extends Omit<PressableProps, 'style' | 'children'> {
+    variant?: Variant;
+    size?: Size;
+    /** Shows a spinner, marks the control busy and blocks presses. */
+    loading?: boolean;
+    fullWidth?: boolean;
+    /** Decorative icon before the label (replaced by the spinner while loading). */
+    leftIcon?: ReactNode;
+    /** Decorative icon after the label. */
+    rightIcon?: ReactNode;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Pressable button. Same variant/size vocabulary as `@muja-ui/web`'s Button;
+ * every color resolves from a semantic theme token.
+ *
+ * ```tsx
+ * <Button variant="primary" size="lg" loading onPress={save}>Save</Button>
+ * ```
+ */
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<View>>;
+
+interface IconButtonProps extends Omit<PressableProps, 'style' | 'children'> {
+    /** Required: an icon-only control has no visible label. */
+    accessibilityLabel: string;
+    icon: ReactNode;
+    variant?: Variant;
+    size?: Size;
+    loading?: boolean;
+    /** Fully rounded instead of the default `md` radius. */
+    round?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * A square, icon-only button. `accessibilityLabel` is mandatory — there is no
+ * text for a screen reader to fall back on.
+ *
+ * ```tsx
+ * <IconButton icon={<Icon icon={XIcon} />} accessibilityLabel="Close" variant="ghost" />
+ * ```
+ */
+declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<View>>;
+
+interface InputProps extends Omit<TextInputProps, 'style' | 'editable'> {
+    size?: Size;
+    /** Marks the field invalid: danger border and `aria-invalid` for a11y. */
+    invalid?: boolean;
+    disabled?: boolean;
+    /** Adornment rendered inside the field, before the text. */
+    leftElement?: ReactNode;
+    /** Adornment rendered inside the field, after the text. */
+    rightElement?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Single-line text field. Focus and invalid states are drawn on the wrapper so
+ * adornments sit inside the border.
+ *
+ * ```tsx
+ * <Input size="md" placeholder="Email" invalid={!!error} />
+ * ```
+ */
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<TextInput>>;
+
+interface TextareaProps extends Omit<TextInputProps, 'style' | 'editable' | 'multiline'> {
+    invalid?: boolean;
+    disabled?: boolean;
+    /** Visible rows at rest (the field grows with content beyond this). */
+    rows?: number;
+    style?: StyleProp<TextStyle>;
+}
+/** Multi-line text field. Same states as `Input`. */
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<TextInput>>;
+
+interface LabelProps extends TextProps {
+    /** Appends a danger-colored asterisk. */
+    required?: boolean;
+}
+/** Field label. Pair with `FormField` to also render help and error text. */
+declare const Label: react.ForwardRefExoticComponent<LabelProps & react.RefAttributes<Text$1>>;
+
+interface FormFieldProps {
+    label?: string;
+    required?: boolean;
+    /** Hint shown under the control while it is valid. */
+    help?: string;
+    /** Replaces `help` and marks the row invalid. */
+    error?: string;
+    children: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Label + control + help/error row. Keeps every form in the app spacing the
+ * three parts identically, and makes the error text a live region so screen
+ * readers announce validation failures.
+ *
+ * ```tsx
+ * <FormField label="Email" required error={errors.email?.message}>
+ *   <Input value={email} onChangeText={setEmail} invalid={!!errors.email} />
+ * </FormField>
+ * ```
+ */
+declare function FormField({ label, required, help, error, children, style, }: FormFieldProps): react.JSX.Element;
+
+interface CheckboxProps {
+    /** Controlled state. Omit for uncontrolled use with `defaultChecked`. */
+    checked?: boolean;
+    defaultChecked?: boolean;
+    /**
+     * Fires with the next state. React Native has no form submission, so unlike
+     * the web package this is a value callback rather than a change event.
+     */
+    onChange?: (checked: boolean) => void;
+    indeterminate?: boolean;
+    size?: Size;
+    invalid?: boolean;
+    disabled?: boolean;
+    /** Label rendered next to the box; the whole row is the touch target. */
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Checkbox with an optional inline label.
+ *
+ * ```tsx
+ * <Checkbox checked={agreed} onChange={setAgreed}>I agree</Checkbox>
+ * ```
+ */
+declare function Checkbox({ checked: controlledChecked, defaultChecked, onChange, indeterminate, size, invalid, disabled, children, style, }: CheckboxProps): react.JSX.Element;
+
+interface SwitchProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    size?: Size;
+    disabled?: boolean;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Toggle switch. Built from primitives rather than RN's `Switch` so it follows
+ * the theme on both platforms (RN's own switch only takes raw colors and
+ * renders with platform-specific metrics).
+ *
+ * ```tsx
+ * <Switch checked={enabled} onChange={setEnabled}>Notifications</Switch>
+ * ```
+ */
+declare function Switch({ checked: controlledChecked, defaultChecked, onChange, size, disabled, children, style, }: SwitchProps): react.JSX.Element;
+
+interface RadioGroupProps {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    size?: Size;
+    disabled?: boolean;
+    orientation?: 'vertical' | 'horizontal';
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+    accessibilityLabel?: string;
+}
+/**
+ * Single-choice group. Wrap `Radio` children; selection state lives here.
+ *
+ * ```tsx
+ * <RadioGroup value={role} onChange={setRole} accessibilityLabel="Role">
+ *   <Radio value="student">Student</Radio>
+ *   <Radio value="organizer">Organizer</Radio>
+ * </RadioGroup>
+ * ```
+ */
+declare function RadioGroup({ value: controlledValue, defaultValue, onChange, size, disabled, orientation, children, style, accessibilityLabel, }: RadioGroupProps): react.JSX.Element;
+interface RadioProps {
+    value: string;
+    disabled?: boolean;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/** One option inside a `RadioGroup`. */
+declare function Radio({ value, disabled, children, style }: RadioProps): react.JSX.Element | null;
+
+interface SelectOption<T extends string = string> {
+    value: T;
+    label: string;
+    /** Secondary line under the label. */
+    description?: string;
+    disabled?: boolean;
+}
+interface SelectProps<T extends string = string> {
+    options: readonly SelectOption<T>[];
+    value?: T;
+    onChange?: (value: T) => void;
+    /** Shown when nothing is selected. */
+    placeholder?: string;
+    /** Sheet heading. */
+    title?: string;
+    size?: Size;
+    invalid?: boolean;
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    accessibilityLabel?: string;
+}
+/**
+ * Field that opens a bottom sheet of options — the native counterpart to the
+ * web package's `<select>`. Options are data, not `<option>` children, because
+ * React Native has no equivalent element.
+ *
+ * ```tsx
+ * <Select options={rooms} value={roomId} onChange={setRoomId} placeholder="Choose a room" />
+ * ```
+ */
+declare function Select<T extends string = string>({ options, value, onChange, placeholder, title, size, invalid, disabled, style, accessibilityLabel, }: SelectProps<T>): react.JSX.Element;
+
+interface SkeletonProps {
+    width?: DimensionValue;
+    height?: DimensionValue;
+    radius?: RadiusToken;
+    /** Turns off the pulse (useful in tests and for reduced-motion screens). */
+    animated?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Loading placeholder with a pulsing opacity. Hidden from screen readers —
+ * announce loading state on the container instead.
+ *
+ * ```tsx
+ * <Skeleton height={20} width="60%" />
+ * ```
+ */
+declare function Skeleton({ width, height, radius, animated, style, }: SkeletonProps): react.JSX.Element;
+
+interface SpinnerProps {
+    size?: Size;
+    color?: SemanticColorToken;
+    /** Accessible label; announced while the spinner is on screen. */
+    label?: string;
+    style?: StyleProp<ViewStyle>;
+}
+/** Indeterminate activity indicator. */
+declare function Spinner({ size, color, label, style }: SpinnerProps): react.JSX.Element;
+
+interface ProgressProps {
+    /** Current value, 0–`max`. */
+    value: number;
+    max?: number;
+    /** Track thickness in dp. */
+    height?: number;
+    color?: SemanticColorToken;
+    trackColor?: SemanticColorToken;
+    /** Accessible name, e.g. "Semester progress". */
+    label?: string;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Determinate progress bar.
+ *
+ * ```tsx
+ * <Progress value={earned} max={total} label="iGPA points" />
+ * ```
+ */
+declare function Progress({ value, max, height, color, trackColor, label, style, }: ProgressProps): react.JSX.Element;
+
+type ToastTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info';
+type ToastPlacement = 'top' | 'bottom';
+interface ToastOptions {
+    title: string;
+    description?: string;
+    tone?: ToastTone;
+    /** Milliseconds before auto-dismiss. `0` keeps it until dismissed. */
+    duration?: number;
+    /** Trailing action, e.g. Undo. */
+    action?: {
+        label: string;
+        onPress: () => void;
+    };
+}
+interface ToastContextValue {
+    toast: (options: ToastOptions) => void;
+    dismiss: (id: number) => void;
+}
+interface ToastProviderProps {
+    children: ReactNode;
+    placement?: ToastPlacement;
+    /** Most toasts visible at once; older ones are dropped. */
+    max?: number;
+}
+/**
+ * Mounts the toast host and provides `useToast()`. Put it inside the
+ * `ThemeProvider` and `SafeAreaProvider`, above the navigator.
+ *
+ * ```tsx
+ * <ToastProvider>
+ *   <Stack />
+ * </ToastProvider>
+ * ```
+ */
+declare function ToastProvider({ children, placement, max }: ToastProviderProps): react.JSX.Element;
+/** Queues toasts. Must be called under a `ToastProvider`. */
+declare function useToast(): ToastContextValue;
+
+interface EmptyStateProps {
+    title: string;
+    description?: string;
+    /** Illustration or icon above the title. */
+    icon?: ReactNode;
+    /** Primary action, e.g. a Button. */
+    action?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Placeholder for an empty list or a failed-but-recoverable state. Consistent
+ * empty states are what stop a list screen from looking broken.
+ *
+ * ```tsx
+ * <EmptyState title="No tickets yet" description="Register for an event to get one." />
+ * ```
+ */
+declare function EmptyState({ title, description, icon, action, style }: EmptyStateProps): react.JSX.Element;
+
+type BadgeTone = 'neutral' | 'primary' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
+interface BadgeProps {
+    tone?: BadgeTone;
+    /** `subtle` = tinted background, `solid` = filled, `outline` = bordered. */
+    variant?: 'subtle' | 'solid' | 'outline';
+    children?: ReactNode;
+    /** Icon rendered before the label. */
+    leftIcon?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Small status label. Tones map to the semantic status colors, so dark mode and
+ * brand themes apply automatically.
+ *
+ * ```tsx
+ * <Badge tone="success">Confirmed</Badge>
+ * ```
+ */
+declare function Badge({ tone, variant, children, leftIcon, style, }: BadgeProps): react.JSX.Element;
+
+interface ChipProps {
+    children?: ReactNode;
+    /** Filled/primary styling for an active filter. */
+    selected?: boolean;
+    disabled?: boolean;
+    onPress?: () => void;
+    /** Renders a trailing × that calls this instead of `onPress`. */
+    onRemove?: () => void;
+    leftIcon?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Compact toggle used for filters and tags. Pressable when `onPress` or
+ * `onRemove` is given, static otherwise.
+ *
+ * ```tsx
+ * <Chip selected={filter === 'today'} onPress={() => setFilter('today')}>Today</Chip>
+ * ```
+ */
+declare function Chip({ children, selected, disabled, onPress, onRemove, leftIcon, style, }: ChipProps): react.JSX.Element;
+
+interface CardProps {
+    /** `outline` (default) is bordered, `elevated` adds a shadow, `filled` uses a muted background. */
+    variant?: 'outline' | 'elevated' | 'filled';
+    /** Makes the whole card a button. */
+    onPress?: () => void;
+    accessibilityLabel?: string;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Surface container. Compose with `CardHeader`, `CardTitle`,
+ * `CardDescription`, `CardContent` and `CardFooter`.
+ *
+ * ```tsx
+ * <Card variant="elevated" onPress={open}>
+ *   <CardHeader>
+ *     <CardTitle>Room A101</CardTitle>
+ *     <CardDescription>Available today</CardDescription>
+ *   </CardHeader>
+ *   <CardContent>…</CardContent>
+ * </Card>
+ * ```
+ */
+declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<View>>;
+interface SectionProps$1 {
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+interface TextSectionProps {
+    children?: ReactNode;
+    style?: StyleProp<TextStyle>;
+}
+declare function CardHeader({ children, style }: SectionProps$1): react.JSX.Element;
+declare function CardTitle({ children, style }: TextSectionProps): react.JSX.Element;
+declare function CardDescription({ children, style }: TextSectionProps): react.JSX.Element;
+declare function CardContent({ children, style }: SectionProps$1): react.JSX.Element;
+declare function CardFooter({ children, style }: SectionProps$1): react.JSX.Element;
+
+interface ContainerProps {
+    /** Horizontal page gutter. Defaults to 4 (16dp). */
+    gutter?: SpaceToken;
+    /** Caps the width and centres the block on tablets. */
+    maxWidth?: number;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/** Page-level horizontal gutter, so every screen indents its content equally. */
+declare function Container({ gutter, maxWidth, children, style }: ContainerProps): react.JSX.Element;
+interface SectionProps {
+    title?: string;
+    description?: string;
+    /** Rendered on the title row's trailing edge, e.g. a "See all" link. */
+    action?: ReactNode;
+    /** Gap between the header and the content. Defaults to 3 (12dp). */
+    gap?: SpaceToken;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Titled block of content — the repeating unit of every screen in the app.
+ *
+ * ```tsx
+ * <Section title="Upcoming events" action={<Button variant="link">See all</Button>}>
+ *   …
+ * </Section>
+ * ```
+ */
+declare function Section({ title, description, action, gap, children, style }: SectionProps): react.JSX.Element;
+
+interface ScreenProps {
+    children?: ReactNode;
+    /** Page background. Defaults to the app background token. */
+    bg?: SemanticColorToken;
+    /** Wraps content in a ScrollView. Off for screens that own a FlatList. */
+    scrollable?: boolean;
+    /** Pull-to-refresh; only meaningful when `scrollable`. */
+    refreshing?: boolean;
+    onRefresh?: () => void;
+    /** Which safe-area edges to pad. Defaults to top and bottom. */
+    edges?: readonly ('top' | 'bottom')[];
+    /** Extra bottom padding so content clears a tab bar or sticky footer. */
+    bottomInset?: number;
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Screen shell: safe-area padding, themed background and optional scrolling
+ * with pull-to-refresh. Every route in an app should start with one.
+ *
+ * ```tsx
+ * <Screen scrollable refreshing={isRefetching} onRefresh={refetch}>
+ *   <Container>…</Container>
+ * </Screen>
+ * ```
+ */
+declare function Screen({ children, bg, scrollable, refreshing, onRefresh, edges, bottomInset, contentContainerStyle, style, }: ScreenProps): react.JSX.Element;
+
+interface ListRowProps {
+    title: string;
+    /** Secondary line under the title. */
+    subtitle?: string;
+    /** Leading slot — icon, avatar or a small image. */
+    left?: ReactNode;
+    /** Trailing slot; replaced by a chevron when `onPress` is set and this is empty. */
+    right?: ReactNode;
+    onPress?: () => void;
+    disabled?: boolean;
+    /** Hides the trailing chevron on a pressable row. */
+    hideChevron?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Settings/list row: leading slot, two lines of text, trailing slot. Pressable
+ * rows get a chevron and a button role.
+ *
+ * ```tsx
+ * <ListRow title="Notifications" subtitle="Push and email" onPress={open} />
+ * ```
+ */
+declare function ListRow({ title, subtitle, left, right, onPress, disabled, hideChevron, style, }: ListRowProps): react.JSX.Element;
+
+interface AvatarProps {
+    /** Image URL. Falls back to initials when absent or if loading fails. */
+    source?: string | null;
+    /** Full name — initials are derived from it, and it names the image for a11y. */
+    name?: string;
+    size?: Size | number;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Circular avatar with an initials fallback.
+ *
+ * ```tsx
+ * <Avatar source={user.photoUrl} name={user.fullName} size="lg" />
+ * ```
+ */
+declare function Avatar({ source, name, size, style }: AvatarProps): react.JSX.Element;
+
+interface TabItem<T extends string = string> {
+    value: T;
+    label: string;
+    /** Trailing count, e.g. a number of tickets. */
+    badge?: number | string;
+}
+interface TabsProps<T extends string = string> {
+    items: readonly TabItem<T>[];
+    value?: T;
+    defaultValue?: T;
+    onChange?: (value: T) => void;
+    /** `underline` for page-level tabs, `segmented` for a pill switch. */
+    variant?: 'underline' | 'segmented';
+    /** Lets tabs overflow horizontally instead of splitting the width. */
+    scrollable?: boolean;
+    style?: StyleProp<ViewStyle>;
+    accessibilityLabel?: string;
+}
+/**
+ * Tab bar. Panels are the caller's business — render by the selected value —
+ * because native screens usually swap whole lists rather than mounting all
+ * panels at once.
+ *
+ * ```tsx
+ * <Tabs items={tabs} value={tab} onChange={setTab} variant="segmented" />
+ * ```
+ */
+declare function Tabs<T extends string = string>({ items, value: controlledValue, defaultValue, onChange, variant, scrollable, style, accessibilityLabel, }: TabsProps<T>): react.JSX.Element;
+
+interface AccordionItemData {
+    value: string;
+    title: string;
+    content: ReactNode;
+}
+interface AccordionProps {
+    items: readonly AccordionItemData[];
+    /** Controlled open values. */
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (value: string[]) => void;
+    /** Only one section open at a time. */
+    single?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Collapsible sections.
+ *
+ * ```tsx
+ * <Accordion single items={[{ value: 'rules', title: 'Rules', content: <Text>…</Text> }]} />
+ * ```
+ */
+declare function Accordion({ items, value: controlledValue, defaultValue, onChange, single, style, }: AccordionProps): react.JSX.Element;
+interface CollapseProps {
+    title: string;
+    defaultOpen?: boolean;
+    children: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/** A single collapsible block, for when there is no list to group. */
+declare function Collapse({ title, defaultOpen, children, style }: CollapseProps): react.JSX.Element;
+
+interface CalendarProps {
+    /** Controlled selected date. */
+    value?: Date;
+    defaultValue?: Date;
+    onChange?: (date: Date) => void;
+    /** First visible month; defaults to the selected date's month, else today's. */
+    defaultMonth?: Date;
+    minDate?: Date;
+    maxDate?: Date;
+    /** 0 = Sunday, 1 = Monday. Defaults to Monday. */
+    weekStartsOn?: 0 | 1;
+    /** BCP 47 locale for month and weekday names. Defaults to the runtime locale. */
+    locale?: string;
+    /**
+     * Days to mark with a dot, keyed `YYYY-MM-DD` — e.g. days that already have
+     * bookings. The value is the dot's semantic color role.
+     */
+    markedDates?: Readonly<Record<string, 'primary' | 'accent' | 'success' | 'danger'>>;
+    /** Called when the visible month changes — use it to fetch that month's data. */
+    onMonthChange?: (month: Date) => void;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Single-date month grid. Month and weekday names come from `Intl` — no date
+ * library, matching the web package.
+ *
+ * ```tsx
+ * <Calendar value={date} onChange={setDate} minDate={new Date()} />
+ * ```
+ */
+declare function Calendar({ value: controlledValue, defaultValue, onChange, defaultMonth, minDate, maxDate, weekStartsOn, locale, markedDates, onMonthChange, style, }: CalendarProps): react.JSX.Element;
+
+interface CarouselProps {
+    /** One element per slide. */
+    children: ReactNode[];
+    /** Slide width. Defaults to the full screen width minus the gutter. */
+    slideWidth?: number;
+    /** Horizontal page gutter used to compute the default slide width. */
+    gutter?: number;
+    /** Shows the page dots. Defaults to true. */
+    dots?: boolean;
+    onSlideChange?: (index: number) => void;
+    style?: StyleProp<ViewStyle>;
+    accessibilityLabel?: string;
+}
+/**
+ * Snap-scrolling horizontal carousel with page dots. Uses a paging ScrollView
+ * rather than a gesture library, so it needs no extra native dependency.
+ *
+ * ```tsx
+ * <Carousel accessibilityLabel="Featured events">
+ *   {events.map((event) => <EventCard key={event.id} event={event} />)}
+ * </Carousel>
+ * ```
+ */
+declare function Carousel({ children, slideWidth, gutter, dots, onSlideChange, style, accessibilityLabel, }: CarouselProps): react.JSX.Element;
+
+interface TooltipProps {
+    /** Tooltip copy. Keep it short — there is no room for a paragraph. */
+    label: string;
+    /** Side the bubble appears on. Defaults to above the trigger. */
+    placement?: 'top' | 'bottom';
+    children: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Long-press hint. Phones have no hover, so the trigger reveals the bubble on
+ * long press and hides it on release; the label is also the trigger's
+ * accessibility hint so screen-reader users get it without the gesture.
+ *
+ * ```tsx
+ * <Tooltip label="Points earned this semester">
+ *   <Icon icon={InfoIcon} />
+ * </Tooltip>
+ * ```
+ */
+declare function Tooltip({ label, placement, children, style }: TooltipProps): react.JSX.Element;
+
+interface ModalProps {
+    open: boolean;
+    onClose: () => void;
+    size?: Size;
+    /** Close when the backdrop is pressed. Defaults to true. */
+    closeOnOverlayPress?: boolean;
+    /** Accessible name for the dialog. */
+    accessibilityLabel?: string;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Centered dialog on a dimmed backdrop. Built on React Native's `Modal`, so
+ * the Android back button and native stacking are handled for us.
+ *
+ * ```tsx
+ * <Modal open={open} onClose={close} accessibilityLabel="Book room">
+ *   <ModalHeader onClose={close}><ModalTitle>Book room</ModalTitle></ModalHeader>
+ *   <ModalBody>…</ModalBody>
+ *   <ModalFooter><Button onPress={confirm}>Confirm</Button></ModalFooter>
+ * </Modal>
+ * ```
+ */
+declare function Modal({ open, onClose, size, closeOnOverlayPress, accessibilityLabel, children, style, }: ModalProps): react.JSX.Element;
+interface ModalHeaderProps {
+    children?: ReactNode;
+    /** Renders a close button on the right when provided. */
+    onClose?: () => void;
+    style?: StyleProp<ViewStyle>;
+}
+declare function ModalHeader({ children, onClose, style }: ModalHeaderProps): react.JSX.Element;
+declare function ModalTitle({ children }: {
+    children?: ReactNode;
+}): react.JSX.Element;
+interface ModalBodyProps {
+    children?: ReactNode;
+    /** Wraps the content in a ScrollView. Defaults to true. */
+    scrollable?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+declare function ModalBody({ children, scrollable, style }: ModalBodyProps): react.JSX.Element;
+declare function ModalFooter({ children, style, }: {
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}): react.JSX.Element;
+
+interface BottomSheetProps {
+    open: boolean;
+    onClose: () => void;
+    /** Close when the backdrop is pressed. Defaults to true. */
+    closeOnOverlayPress?: boolean;
+    /** Visible title rendered next to the grab handle. */
+    title?: string;
+    /** Accessible name when there is no visible `title`. */
+    accessibilityLabel?: string;
+    /** Cap the sheet height as a fraction of the screen. Defaults to 0.9. */
+    maxHeightRatio?: number;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Sheet that slides up from the bottom edge, with a grab handle and
+ * drag-to-dismiss. The bottom inset is padded so content clears the home
+ * indicator.
+ *
+ * ```tsx
+ * <BottomSheet open={open} onClose={close} title="Pick a room">…</BottomSheet>
+ * ```
+ */
+declare function BottomSheet({ open, onClose, closeOnOverlayPress, title, accessibilityLabel, maxHeightRatio, children, style, }: BottomSheetProps): react.JSX.Element;
+
+interface DrawerProps {
+    open: boolean;
+    onClose: () => void;
+    /** Edge the panel slides in from. Defaults to the right. */
+    side?: 'left' | 'right';
+    /** Panel width as a fraction of the screen. Defaults to 0.85. */
+    widthRatio?: number;
+    title?: string;
+    accessibilityLabel?: string;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Side sheet — a filter or navigation panel that slides in from an edge.
+ *
+ * ```tsx
+ * <Drawer open={open} onClose={close} title="Filters">…</Drawer>
+ * ```
+ */
+declare function Drawer({ open, onClose, side, widthRatio, title, accessibilityLabel, children, style, }: DrawerProps): react.JSX.Element;
+
+interface ActionSheetAction {
+    label: string;
+    onPress: () => void;
+    /** Danger styling for destructive actions. */
+    destructive?: boolean;
+    disabled?: boolean;
+    icon?: ReactNode;
+}
+interface ActionSheetProps {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    description?: string;
+    actions: readonly ActionSheetAction[];
+    /** Label for the trailing cancel row. Pass `null` to omit it. */
+    cancelLabel?: string | null;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Menu of actions in a bottom sheet — the native counterpart to the web
+ * package's `DropdownMenu`. Anchored dropdowns don't belong on a phone, so the
+ * same intent surfaces as a sheet.
+ *
+ * ```tsx
+ * <ActionSheet open={open} onClose={close} actions={[
+ *   { label: 'Share ticket', onPress: share },
+ *   { label: 'Cancel registration', onPress: cancel, destructive: true },
+ * ]} />
+ * ```
+ */
+declare function ActionSheet({ open, onClose, title, description, actions, cancelLabel, style, }: ActionSheetProps): react.JSX.Element;
+
+interface ThemeContextValue {
+    /** The active theme for the resolved color mode. */
+    theme: Theme;
+    /** The user preference: 'light' | 'dark' | 'system'. */
+    colorMode: ColorMode;
+    /** What is actually rendered: 'light' | 'dark'. */
+    resolvedColorMode: ResolvedColorMode;
+    setColorMode: (mode: ColorMode) => void;
+    toggleColorMode: () => void;
+}
+interface ThemeProviderProps {
+    /** Theme used in light mode. Defaults to the built-in light theme. */
+    theme?: Theme;
+    /** Theme used in dark mode. Defaults to the built-in dark theme. */
+    darkTheme?: Theme;
+    /** Uncontrolled initial preference. */
+    defaultColorMode?: ColorMode;
+    /**
+     * Controlled preference. React Native has no synchronous storage, so
+     * persistence belongs to the app (SecureStore, AsyncStorage, MMKV…): pass the
+     * stored value here and write it back from `onColorModeChange`.
+     */
+    colorMode?: ColorMode;
+    onColorModeChange?: (mode: ColorMode) => void;
+    children: ReactNode;
+}
+/**
+ * Provides the resolved theme to every native component. `'system'` follows the
+ * OS appearance through React Native's `useColorScheme()`.
+ *
+ * ```tsx
+ * <ThemeProvider theme={sduLightTheme} darkTheme={sduDarkTheme}>
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ */
+declare function ThemeProvider({ theme, darkTheme, defaultColorMode, colorMode: colorModeProp, onColorModeChange, children, }: ThemeProviderProps): react.JSX.Element;
+/** The active theme object (already resolved for the current color mode). */
+declare function useTheme(): Theme;
+/** Color mode state and controls. */
+declare function useColorMode(): Omit<ThemeContextValue, 'theme'>;
+/** Picks a value based on the resolved color mode. */
+declare function useColorModeValue<T>(lightValue: T, darkValue: T): T;
+
+/** Resolved colors for one interactive variant, in its rest and pressed states. */
+interface VariantColors {
+    background: string;
+    backgroundPressed: string;
+    foreground: SemanticColorToken;
+    borderColor?: string;
+    borderWidth?: number;
+    /** `link` draws its label underlined instead of a container. */
+    underline?: boolean;
+}
+/**
+ * Maps a `Variant` onto semantic theme colors. Web does this in CSS via
+ * `data-variant` selectors; native resolves it here so both platforms answer
+ * `variant="accent"` with the same roles.
+ */
+declare function variantColors(variant: Variant, theme: Theme): VariantColors;
+/** Control geometry per size — shared by Button, Input, Select and Textarea. */
+interface SizeMetrics {
+    height: number;
+    paddingHorizontal: number;
+    fontSize: 'sm' | 'md' | 'lg';
+    gap: number;
+    iconSize: number;
+}
+declare function sizeMetrics(size: Size, theme: Theme): SizeMetrics;
+
+/** Local-time whole-day helpers. The calendar never leaves local time. */
+declare function startOfDay(date: Date): Date;
+declare function startOfMonth(date: Date): Date;
+declare function addDays(date: Date, amount: number): Date;
+declare function addMonths(date: Date, amount: number): Date;
+declare function isSameDay(a: Date, b: Date): boolean;
+/** `YYYY-MM-DD` in local time — safe as a React key or a lookup key. */
+declare function dayKey(date: Date): string;
+/**
+ * The 6×7 grid of days covering `month`, starting on `weekStartsOn`.
+ * Six rows always, so the grid height never jumps between months.
+ */
+declare function monthGrid(month: Date, weekStartsOn: 0 | 1): Date[];
+
+export { Accordion, type AccordionItemData, type AccordionProps, ActionSheet, type ActionSheetAction, type ActionSheetProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeTone, BottomSheet, type BottomSheetProps, Box, type BoxProps, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Carousel, type CarouselProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Collapse, type CollapseProps, Container, type ContainerProps, Divider, type DividerProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, Flex, type FlexOwnProps, type FlexProps, FormField, type FormFieldProps, HStack, Heading, type HeadingLevel, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconProps, Input, type InputProps, Label, type LabelProps, ListRow, type ListRowProps, Modal, ModalBody, type ModalBodyProps, ModalFooter, ModalHeader, type ModalHeaderProps, type ModalProps, ModalTitle, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Screen, type ScreenProps, Section, type SectionProps, Select, type SelectOption, type SelectProps, type SizeMetrics, Skeleton, type SkeletonProps, Spacer, type SpacerProps, Spinner, type SpinnerProps, Stack, type StackProps, type StyleProps, Switch, type SwitchProps, type TabItem, Tabs, type TabsProps, Text, type TextOwnProps, type TextProps, Textarea, type TextareaProps, type ThemeContextValue, ThemeProvider, type ThemeProviderProps, type ToastContextValue, type ToastOptions, type ToastPlacement, ToastProvider, type ToastProviderProps, type ToastTone, Tooltip, type TooltipProps, type VariantColors, addDays, addMonths, dayKey, isSameDay, monthGrid, shadowStyle, sizeMetrics, splitStyleProps, startOfDay, startOfMonth, useColorMode, useColorModeValue, useTheme, useToast, variantColors };