@hopline/ux4g-react-native 0.1.0

package/dist/index.d.cts

@@ -0,0 +1,1661 @@
+import React from 'react';
+import { PressableProps, StyleProp, ViewStyle, TextInputProps, TextStyle, GestureResponderEvent } from 'react-native';
+
+declare const ramp: {
+    readonly violet: {
+        readonly 50: "#F4F3FE";
+        readonly 100: "#ECD0FF";
+        readonly 200: "#DAB2FF";
+        readonly 300: "#C495FF";
+        readonly 400: "#AC7AFF";
+        readonly 500: "#7C5BF7";
+        readonly 600: "#613AF5";
+        readonly 700: "#4A26C4";
+        readonly 800: "#381C8A";
+        readonly 900: "#2A1466";
+    };
+    readonly secondary: {
+        readonly 50: "#F4F3F9";
+        readonly 100: "#ECEAF3";
+        readonly 200: "#D9D6E7";
+        readonly 300: "#C0BBD7";
+        readonly 400: "#A7A0C6";
+        readonly 500: "#8981AB";
+        readonly 600: "#746D96";
+        readonly 700: "#60597F";
+        readonly 800: "#4D4768";
+        readonly 900: "#3A364F";
+    };
+    readonly success: {
+        readonly 50: "#EDF7E6";
+        readonly 100: "#E3F2D9";
+        readonly 200: "#C6E5B5";
+        readonly 300: "#9BCF80";
+        readonly 400: "#69B349";
+        readonly 500: "#389314";
+        readonly 600: "#107400";
+        readonly 700: "#005A00";
+        readonly 800: "#024900";
+        readonly 900: "#013300";
+    };
+    readonly danger: {
+        readonly 50: "#FFEEEA";
+        readonly 100: "#FEDAD3";
+        readonly 200: "#FEAEAE";
+        readonly 300: "#FF7A7A";
+        readonly 400: "#F35B5B";
+        readonly 500: "#DB2829";
+        readonly 600: "#C21D22";
+        readonly 700: "#B7131A";
+        readonly 800: "#8E0F15";
+        readonly 900: "#6B0B10";
+    };
+    readonly warning: {
+        readonly 50: "#FEF1E7";
+        readonly 100: "#FDDCC2";
+        readonly 200: "#FBC499";
+        readonly 300: "#F6A766";
+        readonly 400: "#F2933F";
+        readonly 500: "#EE8033";
+        readonly 600: "#D86A1E";
+        readonly 700: "#B5551A";
+        readonly 800: "#8F4314";
+        readonly 900: "#6B320F";
+    };
+    readonly info: {
+        readonly 50: "#E8F1FB";
+        readonly 100: "#C7DDF5";
+        readonly 200: "#8FBBEB";
+        readonly 300: "#5798DD";
+        readonly 400: "#2E80D2";
+        readonly 500: "#2384C5";
+        readonly 600: "#1F6FB0";
+        readonly 700: "#1937B2";
+        readonly 800: "#15296F";
+        readonly 900: "#0F1C4B";
+    };
+    readonly neutral: {
+        readonly 0: "#FFFFFF";
+        readonly 50: "#F8F8F8";
+        readonly 100: "#F3F3F3";
+        readonly 200: "#EEEEEE";
+        readonly 300: "#DBDBDB";
+        readonly 400: "#C6C6C6";
+        readonly 500: "#ABABAB";
+        readonly 600: "#727272";
+        readonly 700: "#525252";
+        readonly 800: "#393939";
+        readonly 900: "#212121";
+        readonly 1000: "#000000";
+    };
+};
+declare const space: {
+    readonly 0: 0;
+    readonly 1: 4;
+    readonly 2: 8;
+    readonly 3: 12;
+    readonly 4: 16;
+    readonly 5: 24;
+    readonly 6: 32;
+    readonly 7: 40;
+    readonly 8: 48;
+    readonly 9: 56;
+    readonly 10: 64;
+    readonly 12: 80;
+    readonly 14: 96;
+    readonly 16: 120;
+    readonly 20: 160;
+};
+declare const radius: {
+    readonly xs: 4;
+    readonly sm: 5;
+    readonly md: 8;
+    readonly lg: 12;
+    readonly xl: 16;
+    readonly "2xl": 24;
+    readonly full: 999;
+};
+declare const border: {
+    readonly thin: 1;
+    readonly md: 1.5;
+    readonly thick: 2;
+};
+
+type ShadowStyle = {
+    shadowColor: string;
+    shadowOffset: {
+        width: number;
+        height: number;
+    };
+    shadowOpacity: number;
+    shadowRadius: number;
+    elevation: number;
+};
+declare const shadow: {
+    readonly none: ShadowStyle;
+    readonly xs: ShadowStyle;
+    readonly s: ShadowStyle;
+    readonly md: ShadowStyle;
+    readonly l: ShadowStyle;
+    readonly xl: ShadowStyle;
+    readonly xxl: ShadowStyle;
+};
+declare const motion: {
+    readonly duration: {
+        readonly fast: 120;
+        readonly base: 200;
+        readonly slow: 300;
+    };
+    readonly easing: {
+        readonly standard: readonly [0.2, 0, 0, 1];
+        readonly emphasized: readonly [0.3, 0, 0, 1];
+    };
+};
+declare const font: {
+    readonly family: {
+        readonly sans: "NotoSans";
+        readonly ui: "Roboto-Medium";
+        readonly mono: "RedHatMono";
+    };
+    readonly weight: {
+        readonly regular: "400";
+        readonly medium: "500";
+        readonly semibold: "600";
+        readonly bold: "700";
+    };
+};
+type TypeStep = {
+    fontSize: number;
+    lineHeight: number;
+    letterSpacing?: number;
+};
+declare const type: Record<string, TypeStep>;
+/** A full colour ramp (50..900) of hex strings — the shape an override supplies. */
+type ColorRamp = Record<keyof typeof ramp.violet, string>;
+type ThemeOverrides = {
+    primary?: ColorRamp;
+    secondary?: ColorRamp;
+    fontFamily?: Partial<typeof font.family>;
+};
+declare function makeTheme(overrides?: ThemeOverrides): {
+    color: {
+        readonly primary: string;
+        readonly primaryHover: string;
+        readonly primaryActive: string;
+        readonly primarySubtle: string;
+        readonly onPrimary: "#FFFFFF";
+        readonly secondary: string;
+        readonly secondaryHover: string;
+        readonly success: "#107400";
+        readonly successSubtle: "#EDF7E6";
+        readonly danger: "#DB2829";
+        readonly dangerHover: "#C21D22";
+        readonly dangerSubtle: "#FFEEEA";
+        readonly warning: "#EE8033";
+        readonly warningSubtle: "#FEF1E7";
+        readonly info: "#1937B2";
+        readonly infoSubtle: "#E8F1FB";
+        readonly text: "#212121";
+        readonly textMuted: "#727272";
+        readonly textSubtle: "#ABABAB";
+        readonly textInverse: "#FFFFFF";
+        readonly textLink: string;
+        readonly surface: "#FFFFFF";
+        readonly surfaceSubtle: "#F8F8F8";
+        readonly surfaceMuted: "#F3F3F3";
+        readonly surfaceBrand: string;
+        readonly border: "#DBDBDB";
+        readonly borderStrong: "#C6C6C6";
+        readonly divider: "#EEEEEE";
+        readonly focus: "rgba(97, 58, 245, 0.48)";
+    };
+    ramp: {
+        readonly violet: {
+            readonly 50: "#F4F3FE";
+            readonly 100: "#ECD0FF";
+            readonly 200: "#DAB2FF";
+            readonly 300: "#C495FF";
+            readonly 400: "#AC7AFF";
+            readonly 500: "#7C5BF7";
+            readonly 600: "#613AF5";
+            readonly 700: "#4A26C4";
+            readonly 800: "#381C8A";
+            readonly 900: "#2A1466";
+        };
+        readonly secondary: {
+            readonly 50: "#F4F3F9";
+            readonly 100: "#ECEAF3";
+            readonly 200: "#D9D6E7";
+            readonly 300: "#C0BBD7";
+            readonly 400: "#A7A0C6";
+            readonly 500: "#8981AB";
+            readonly 600: "#746D96";
+            readonly 700: "#60597F";
+            readonly 800: "#4D4768";
+            readonly 900: "#3A364F";
+        };
+        readonly success: {
+            readonly 50: "#EDF7E6";
+            readonly 100: "#E3F2D9";
+            readonly 200: "#C6E5B5";
+            readonly 300: "#9BCF80";
+            readonly 400: "#69B349";
+            readonly 500: "#389314";
+            readonly 600: "#107400";
+            readonly 700: "#005A00";
+            readonly 800: "#024900";
+            readonly 900: "#013300";
+        };
+        readonly danger: {
+            readonly 50: "#FFEEEA";
+            readonly 100: "#FEDAD3";
+            readonly 200: "#FEAEAE";
+            readonly 300: "#FF7A7A";
+            readonly 400: "#F35B5B";
+            readonly 500: "#DB2829";
+            readonly 600: "#C21D22";
+            readonly 700: "#B7131A";
+            readonly 800: "#8E0F15";
+            readonly 900: "#6B0B10";
+        };
+        readonly warning: {
+            readonly 50: "#FEF1E7";
+            readonly 100: "#FDDCC2";
+            readonly 200: "#FBC499";
+            readonly 300: "#F6A766";
+            readonly 400: "#F2933F";
+            readonly 500: "#EE8033";
+            readonly 600: "#D86A1E";
+            readonly 700: "#B5551A";
+            readonly 800: "#8F4314";
+            readonly 900: "#6B320F";
+        };
+        readonly info: {
+            readonly 50: "#E8F1FB";
+            readonly 100: "#C7DDF5";
+            readonly 200: "#8FBBEB";
+            readonly 300: "#5798DD";
+            readonly 400: "#2E80D2";
+            readonly 500: "#2384C5";
+            readonly 600: "#1F6FB0";
+            readonly 700: "#1937B2";
+            readonly 800: "#15296F";
+            readonly 900: "#0F1C4B";
+        };
+        readonly neutral: {
+            readonly 0: "#FFFFFF";
+            readonly 50: "#F8F8F8";
+            readonly 100: "#F3F3F3";
+            readonly 200: "#EEEEEE";
+            readonly 300: "#DBDBDB";
+            readonly 400: "#C6C6C6";
+            readonly 500: "#ABABAB";
+            readonly 600: "#727272";
+            readonly 700: "#525252";
+            readonly 800: "#393939";
+            readonly 900: "#212121";
+            readonly 1000: "#000000";
+        };
+    };
+    space: {
+        readonly 0: 0;
+        readonly 1: 4;
+        readonly 2: 8;
+        readonly 3: 12;
+        readonly 4: 16;
+        readonly 5: 24;
+        readonly 6: 32;
+        readonly 7: 40;
+        readonly 8: 48;
+        readonly 9: 56;
+        readonly 10: 64;
+        readonly 12: 80;
+        readonly 14: 96;
+        readonly 16: 120;
+        readonly 20: 160;
+    };
+    radius: {
+        readonly xs: 4;
+        readonly sm: 5;
+        readonly md: 8;
+        readonly lg: 12;
+        readonly xl: 16;
+        readonly "2xl": 24;
+        readonly full: 999;
+    };
+    border: {
+        readonly thin: 1;
+        readonly md: 1.5;
+        readonly thick: 2;
+    };
+    shadow: {
+        readonly none: ShadowStyle;
+        readonly xs: ShadowStyle;
+        readonly s: ShadowStyle;
+        readonly md: ShadowStyle;
+        readonly l: ShadowStyle;
+        readonly xl: ShadowStyle;
+        readonly xxl: ShadowStyle;
+    };
+    motion: {
+        readonly duration: {
+            readonly fast: 120;
+            readonly base: 200;
+            readonly slow: 300;
+        };
+        readonly easing: {
+            readonly standard: readonly [0.2, 0, 0, 1];
+            readonly emphasized: readonly [0.3, 0, 0, 1];
+        };
+    };
+    font: {
+        family: {
+            sans: "NotoSans";
+            ui: "Roboto-Medium";
+            mono: "RedHatMono";
+        };
+        weight: {
+            readonly regular: "400";
+            readonly medium: "500";
+            readonly semibold: "600";
+            readonly bold: "700";
+        };
+    };
+    type: Record<string, TypeStep>;
+    layout: {
+        containerMax: number;
+        gutter: number;
+        columns: number;
+    };
+    focusRingWidth: number;
+};
+type UX4GTheme = ReturnType<typeof makeTheme>;
+declare const theme: {
+    color: {
+        readonly primary: string;
+        readonly primaryHover: string;
+        readonly primaryActive: string;
+        readonly primarySubtle: string;
+        readonly onPrimary: "#FFFFFF";
+        readonly secondary: string;
+        readonly secondaryHover: string;
+        readonly success: "#107400";
+        readonly successSubtle: "#EDF7E6";
+        readonly danger: "#DB2829";
+        readonly dangerHover: "#C21D22";
+        readonly dangerSubtle: "#FFEEEA";
+        readonly warning: "#EE8033";
+        readonly warningSubtle: "#FEF1E7";
+        readonly info: "#1937B2";
+        readonly infoSubtle: "#E8F1FB";
+        readonly text: "#212121";
+        readonly textMuted: "#727272";
+        readonly textSubtle: "#ABABAB";
+        readonly textInverse: "#FFFFFF";
+        readonly textLink: string;
+        readonly surface: "#FFFFFF";
+        readonly surfaceSubtle: "#F8F8F8";
+        readonly surfaceMuted: "#F3F3F3";
+        readonly surfaceBrand: string;
+        readonly border: "#DBDBDB";
+        readonly borderStrong: "#C6C6C6";
+        readonly divider: "#EEEEEE";
+        readonly focus: "rgba(97, 58, 245, 0.48)";
+    };
+    ramp: {
+        readonly violet: {
+            readonly 50: "#F4F3FE";
+            readonly 100: "#ECD0FF";
+            readonly 200: "#DAB2FF";
+            readonly 300: "#C495FF";
+            readonly 400: "#AC7AFF";
+            readonly 500: "#7C5BF7";
+            readonly 600: "#613AF5";
+            readonly 700: "#4A26C4";
+            readonly 800: "#381C8A";
+            readonly 900: "#2A1466";
+        };
+        readonly secondary: {
+            readonly 50: "#F4F3F9";
+            readonly 100: "#ECEAF3";
+            readonly 200: "#D9D6E7";
+            readonly 300: "#C0BBD7";
+            readonly 400: "#A7A0C6";
+            readonly 500: "#8981AB";
+            readonly 600: "#746D96";
+            readonly 700: "#60597F";
+            readonly 800: "#4D4768";
+            readonly 900: "#3A364F";
+        };
+        readonly success: {
+            readonly 50: "#EDF7E6";
+            readonly 100: "#E3F2D9";
+            readonly 200: "#C6E5B5";
+            readonly 300: "#9BCF80";
+            readonly 400: "#69B349";
+            readonly 500: "#389314";
+            readonly 600: "#107400";
+            readonly 700: "#005A00";
+            readonly 800: "#024900";
+            readonly 900: "#013300";
+        };
+        readonly danger: {
+            readonly 50: "#FFEEEA";
+            readonly 100: "#FEDAD3";
+            readonly 200: "#FEAEAE";
+            readonly 300: "#FF7A7A";
+            readonly 400: "#F35B5B";
+            readonly 500: "#DB2829";
+            readonly 600: "#C21D22";
+            readonly 700: "#B7131A";
+            readonly 800: "#8E0F15";
+            readonly 900: "#6B0B10";
+        };
+        readonly warning: {
+            readonly 50: "#FEF1E7";
+            readonly 100: "#FDDCC2";
+            readonly 200: "#FBC499";
+            readonly 300: "#F6A766";
+            readonly 400: "#F2933F";
+            readonly 500: "#EE8033";
+            readonly 600: "#D86A1E";
+            readonly 700: "#B5551A";
+            readonly 800: "#8F4314";
+            readonly 900: "#6B320F";
+        };
+        readonly info: {
+            readonly 50: "#E8F1FB";
+            readonly 100: "#C7DDF5";
+            readonly 200: "#8FBBEB";
+            readonly 300: "#5798DD";
+            readonly 400: "#2E80D2";
+            readonly 500: "#2384C5";
+            readonly 600: "#1F6FB0";
+            readonly 700: "#1937B2";
+            readonly 800: "#15296F";
+            readonly 900: "#0F1C4B";
+        };
+        readonly neutral: {
+            readonly 0: "#FFFFFF";
+            readonly 50: "#F8F8F8";
+            readonly 100: "#F3F3F3";
+            readonly 200: "#EEEEEE";
+            readonly 300: "#DBDBDB";
+            readonly 400: "#C6C6C6";
+            readonly 500: "#ABABAB";
+            readonly 600: "#727272";
+            readonly 700: "#525252";
+            readonly 800: "#393939";
+            readonly 900: "#212121";
+            readonly 1000: "#000000";
+        };
+    };
+    space: {
+        readonly 0: 0;
+        readonly 1: 4;
+        readonly 2: 8;
+        readonly 3: 12;
+        readonly 4: 16;
+        readonly 5: 24;
+        readonly 6: 32;
+        readonly 7: 40;
+        readonly 8: 48;
+        readonly 9: 56;
+        readonly 10: 64;
+        readonly 12: 80;
+        readonly 14: 96;
+        readonly 16: 120;
+        readonly 20: 160;
+    };
+    radius: {
+        readonly xs: 4;
+        readonly sm: 5;
+        readonly md: 8;
+        readonly lg: 12;
+        readonly xl: 16;
+        readonly "2xl": 24;
+        readonly full: 999;
+    };
+    border: {
+        readonly thin: 1;
+        readonly md: 1.5;
+        readonly thick: 2;
+    };
+    shadow: {
+        readonly none: ShadowStyle;
+        readonly xs: ShadowStyle;
+        readonly s: ShadowStyle;
+        readonly md: ShadowStyle;
+        readonly l: ShadowStyle;
+        readonly xl: ShadowStyle;
+        readonly xxl: ShadowStyle;
+    };
+    motion: {
+        readonly duration: {
+            readonly fast: 120;
+            readonly base: 200;
+            readonly slow: 300;
+        };
+        readonly easing: {
+            readonly standard: readonly [0.2, 0, 0, 1];
+            readonly emphasized: readonly [0.3, 0, 0, 1];
+        };
+    };
+    font: {
+        family: {
+            sans: "NotoSans";
+            ui: "Roboto-Medium";
+            mono: "RedHatMono";
+        };
+        weight: {
+            readonly regular: "400";
+            readonly medium: "500";
+            readonly semibold: "600";
+            readonly bold: "700";
+        };
+    };
+    type: Record<string, TypeStep>;
+    layout: {
+        containerMax: number;
+        gutter: number;
+        columns: number;
+    };
+    focusRingWidth: number;
+};
+
+interface ThemeProviderProps extends ThemeOverrides {
+    /** A fully built theme. When set, the override fields are ignored. */
+    theme?: UX4GTheme;
+    children: React.ReactNode;
+}
+/**
+ * Seeds the UX4G theme for the subtree. Pass `primary` / `secondary` /
+ * `fontFamily` to re-skin (UX4G "Theme Craft"), or a fully built `theme`.
+ */
+declare function ThemeProvider({ theme, primary, secondary, fontFamily, children, }: ThemeProviderProps): React.JSX.Element;
+/** Read the active UX4G theme. Returns the default violet theme outside a provider. */
+declare function useUX4GTheme(): UX4GTheme;
+
+interface ButtonProps extends Omit<PressableProps, "style" | "children"> {
+    children?: React.ReactNode;
+    /** Colourway. @default "primary" */
+    variant?: "primary" | "success" | "danger";
+    /** Fill treatment. @default "filled" */
+    appearance?: "filled" | "outlined" | "text" | "tonal";
+    /** @default "default" */
+    size?: "small" | "default" | "large";
+    /** Stretch to container width. @default false */
+    fullWidth?: boolean;
+    disabled?: boolean;
+    /** Leading icon node (e.g. a react-native-svg element). */
+    iconLeft?: React.ReactNode;
+    /** Trailing icon node. */
+    iconRight?: React.ReactNode;
+    /** Optional theme override (else the active provider/default theme). */
+    theme?: UX4GTheme;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Button({ children, variant, appearance, size, fullWidth, disabled, iconLeft, iconRight, theme: themeProp, style, accessibilityLabel, ...rest }: ButtonProps): React.JSX.Element;
+
+interface IconButtonProps extends Omit<PressableProps, "style" | "children" | "accessibilityLabel"> {
+    /** The icon node (e.g. a react-native-svg element). */
+    children?: React.ReactNode;
+    /** Colourway. @default "neutral" */
+    variant?: "neutral" | "primary" | "danger";
+    /** Fill treatment. @default "ghost" */
+    appearance?: "ghost" | "tonal" | "filled";
+    /** Box size — small (32) · default (40) · large (48). @default "default" */
+    size?: "small" | "default" | "large";
+    /** Accessible name — required for icon-only controls. */
+    accessibilityLabel: string;
+    disabled?: boolean;
+    /** Optional theme override (else the active provider/default theme). */
+    theme?: UX4GTheme;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * UX4G IconButton — a square, icon-only action (close, menu, more, edit).
+ * Pass an icon node (e.g. a react-native-svg element) as children, and an
+ * `accessibilityLabel` for the screen-reader name.
+ */
+declare function IconButton({ children, variant, appearance, size, disabled, accessibilityLabel, theme: themeProp, style, ...rest }: IconButtonProps): React.JSX.Element;
+
+interface InputProps extends Omit<TextInputProps, "editable" | "style"> {
+    label?: string;
+    helperText?: string;
+    /** @default "default" */
+    size?: "small" | "default" | "large";
+    /** @default "default" */
+    state?: "default" | "error" | "success";
+    iconLeft?: React.ReactNode;
+    iconRight?: React.ReactNode;
+    required?: boolean;
+    disabled?: boolean;
+    theme?: UX4GTheme;
+    /** Style for the field box itself. */
+    style?: StyleProp<TextStyle>;
+    /** Style for the outer group (label + field + helper). */
+    containerStyle?: StyleProp<ViewStyle>;
+}
+declare function Input({ label, helperText, size, state, disabled, required, iconLeft, iconRight, theme: themeProp, style, containerStyle, accessibilityLabel, onFocus, onBlur, ...rest }: InputProps): React.JSX.Element;
+
+interface TextareaProps extends Omit<TextInputProps, "editable" | "style" | "multiline" | "numberOfLines"> {
+    label?: string;
+    helperText?: string;
+    /** Visible line count — drives the field's minimum height. @default 4 */
+    rows?: number;
+    /** @default "default" */
+    state?: "default" | "error" | "success";
+    required?: boolean;
+    disabled?: boolean;
+    theme?: UX4GTheme;
+    /** Style for the field box itself. */
+    style?: StyleProp<TextStyle>;
+    /** Style for the outer group (label + field + helper). */
+    containerStyle?: StyleProp<ViewStyle>;
+}
+declare function Textarea({ label, helperText, rows, state, disabled, required, theme: themeProp, style, containerStyle, accessibilityLabel, onFocus, onBlur, ...rest }: TextareaProps): React.JSX.Element;
+
+interface SelectOption {
+    value: string;
+    label: string;
+}
+interface SelectProps {
+    label?: string;
+    helperText?: string;
+    placeholder?: string;
+    /** Options as strings or {value,label}. */
+    options?: (string | SelectOption)[];
+    /** Controlled selected value. */
+    value?: string;
+    /** Initial value when uncontrolled. */
+    defaultValue?: string;
+    /** Reports the chosen option's value when the user selects it. */
+    onChange?: (value: string) => void;
+    /** @default "default" */
+    size?: "small" | "default" | "large";
+    /** @default "default" */
+    state?: "default" | "error" | "success";
+    required?: boolean;
+    disabled?: boolean;
+    /** Optional theme override (else the active provider/default theme). */
+    theme?: UX4GTheme;
+    /** Style for the field box (trigger) itself. */
+    style?: StyleProp<ViewStyle>;
+    /** Style for the outer group (label + field + helper). */
+    containerStyle?: StyleProp<ViewStyle>;
+}
+declare function Select({ label, helperText, placeholder, options, value, defaultValue, onChange, size, state, required, disabled, theme: themeProp, style, containerStyle, }: SelectProps): React.JSX.Element;
+
+interface CheckboxProps {
+    label?: React.ReactNode;
+    /** Controlled checked state. */
+    checked?: boolean;
+    /** Initial checked state when uncontrolled. */
+    defaultChecked?: boolean;
+    /** Reports the intended next value on press. */
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    indeterminate?: boolean;
+    theme?: UX4GTheme;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Checkbox({ label, checked, defaultChecked, onChange, disabled, indeterminate, theme: themeProp, style, }: CheckboxProps): React.JSX.Element;
+
+/** UX4G Radio — circular single-select control. Group options via a shared `name`. */
+interface RadioProps {
+    label?: React.ReactNode;
+    /** Controlled checked state. */
+    checked?: boolean;
+    /** Initial checked state when uncontrolled. */
+    defaultChecked?: boolean;
+    /** Groups options for single-select; give every option in a group the same name. */
+    name?: string;
+    /** This option's value, reported to `onChange` when selected. */
+    value?: string;
+    /** Fired with the option's `value` (and `true`) when the radio is selected. */
+    onChange?: (value: string | undefined, checked: boolean) => void;
+    disabled?: boolean;
+    /** Optional theme override (else the active provider/default theme). */
+    theme?: UX4GTheme;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Radio({ label, checked, defaultChecked, name, value, onChange, disabled, theme: themeProp, style, }: RadioProps): React.JSX.Element;
+
+interface SwitchProps {
+    label?: React.ReactNode;
+    /** Controlled on/off state. */
+    checked?: boolean;
+    /** Initial on/off state when uncontrolled. */
+    defaultChecked?: boolean;
+    /** Reports the intended next value on press. */
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    /** Optional theme override (else the active provider/default theme). */
+    theme?: UX4GTheme;
+    style?: StyleProp<ViewStyle>;
+}
+/** UX4G Switch — on/off toggle for settings and preferences. */
+declare function Switch({ label, checked, defaultChecked, onChange, disabled, theme: themeProp, style, }: SwitchProps): React.JSX.Element;
+
+interface SearchProps {
+    /** Controlled value. */
+    value?: string;
+    /** Reports the value on every keystroke. */
+    onChange?: (value: string) => void;
+    /** Fires the current value when the user submits (keyboard return / search key). */
+    onSearch?: (value: string) => void;
+    placeholder?: string;
+    /** @default "default" */
+    size?: "default" | "large";
+    /** Optional theme override (else the active provider/default theme). */
+    theme?: UX4GTheme;
+    /** Style for the field box itself. */
+    style?: StyleProp<TextStyle>;
+    /** Style for the outer container. */
+    containerStyle?: StyleProp<ViewStyle>;
+}
+declare function Search({ value, onChange, onSearch, placeholder, size, theme: themeProp, style, containerStyle, }: SearchProps): React.JSX.Element;
+
+/** UX4G DatePicker — field that opens a month calendar popover; value is ISO yyyy-mm-dd. */
+interface DatePickerProps {
+    label?: string;
+    /** ISO yyyy-mm-dd. */
+    value?: string;
+    onChange?: (iso: string) => void;
+    placeholder?: string;
+    min?: string;
+    max?: string;
+    required?: boolean;
+    /** Optional theme override (else the active provider/default theme). */
+    theme?: UX4GTheme;
+    /** Style for the field box (trigger) itself. */
+    style?: StyleProp<ViewStyle>;
+    /** Style for the outer group (label + field). */
+    containerStyle?: StyleProp<ViewStyle>;
+}
+declare function DatePicker({ label, value, onChange, placeholder, min, max, required, theme: themeProp, style, containerStyle, }: DatePickerProps): React.JSX.Element;
+
+interface RangeSliderProps {
+    label?: string;
+    value?: number;
+    defaultValue?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    onChange?: (value: number) => void;
+    /** Show the current value bubble. @default true */
+    showValue?: boolean;
+    /** Optional unit suffix for the value label, e.g. "%". */
+    unit?: string;
+    disabled?: boolean;
+    /** Optional theme override (else the active provider/default theme). */
+    theme?: UX4GTheme;
+    style?: StyleProp<ViewStyle>;
+}
+/** UX4G RangeSlider — single-value slider with a filled track and value bubble. */
+declare function RangeSlider({ label, value, defaultValue, min, max, step, onChange, showValue, unit, disabled, theme: themeProp, style, }: RangeSliderProps): React.JSX.Element;
+
+interface ColorPickerProps {
+    label?: string;
+    /** Selected hex value (controlled). */
+    value?: string;
+    /** Initial hex value when uncontrolled. @default "#613AF5" */
+    defaultValue?: string;
+    /** Fired with the chosen hex (uppercased). */
+    onChange?: (hex: string) => void;
+    /** Curated swatches. */
+    swatches?: string[];
+    /** Show a trigger that opens the full palette panel. @default true */
+    allowCustom?: boolean;
+    /** Optional theme override (else the active provider/default theme). */
+    theme?: UX4GTheme;
+    /** Style for the outer group (label + swatches). */
+    style?: StyleProp<ViewStyle>;
+}
+declare function ColorPicker({ label, value, defaultValue, onChange, swatches, allowCustom, theme: themeProp, style, }: ColorPickerProps): React.JSX.Element;
+
+interface UploadedFile {
+    name: string;
+    size: number;
+    type: string;
+}
+interface FileUploadProps {
+    label?: string;
+    hint?: string;
+    /**
+     * Accept hint, e.g. ".pdf,image/*". Kept for parity with the web contract and
+     * passed to `onPick` so the consuming app can configure its native picker.
+     */
+    accept?: string;
+    multiple?: boolean;
+    /** Controlled file list. Omit for uncontrolled (internal) state. */
+    files?: UploadedFile[];
+    onChange?: (files: UploadedFile[]) => void;
+    /**
+     * React Native has no `<input type="file">`. Pressing the dropzone (or
+     * "browse") calls `onPick` — the consuming app wires a real picker
+     * (e.g. expo-document-picker, react-native-image-picker) and returns the
+     * chosen files. Receives `{ accept, multiple }` so the picker can be
+     * configured. Returning nothing (or an empty array) is treated as a cancel.
+     */
+    onPick?: (opts: {
+        accept?: string;
+        multiple: boolean;
+    }) => UploadedFile[] | undefined | Promise<UploadedFile[] | undefined>;
+    disabled?: boolean;
+    /** Optional theme override (else the active provider/default theme). */
+    theme?: UX4GTheme;
+    style?: StyleProp<ViewStyle>;
+}
+/** UX4G FileUpload — drop-zone visual with a removable selected-file list. */
+declare function FileUpload({ label, hint, accept, multiple, files, onChange, onPick, disabled, theme: themeProp, style, }: FileUploadProps): React.JSX.Element;
+
+interface CardProps {
+    title?: React.ReactNode;
+    subtitle?: React.ReactNode;
+    /** Media node rendered in a 16:9 frame at the top. */
+    media?: React.ReactNode;
+    footer?: React.ReactNode;
+    /** Right-aligned action row (e.g. Buttons). */
+    actions?: React.ReactNode;
+    /** Inner padding in px. @default 20 */
+    padding?: number;
+    /** Adds a pressable / hover affordance. @default false */
+    interactive?: boolean;
+    /** Fired on tap when `interactive`. */
+    onPress?: (event: GestureResponderEvent) => void;
+    /** Disables the press affordance when `interactive`. @default false */
+    disabled?: boolean;
+    /** Required when `interactive` so assistive tech can name the card. */
+    accessibilityLabel?: string;
+    /** Optional theme override (else the active provider/default theme). */
+    theme?: UX4GTheme;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+    children?: React.ReactNode;
+}
+/**
+ * UX4G Card — surface container. 1px border + soft shadow, 12px radius.
+ * Compose freely, or use the optional header/media/footer props.
+ */
+declare function Card({ children, title, subtitle, media, footer, actions, padding, interactive, onPress, disabled, accessibilityLabel, theme: themeProp, style, testID, }: CardProps): React.JSX.Element;
+
+interface BadgeProps {
+    /** Colourway. @default "neutral" */
+    variant?: "neutral" | "primary" | "success" | "danger" | "info" | "warning";
+    /** Fill treatment. @default "tonal" */
+    appearance?: "tonal" | "solid" | "dot";
+    children?: React.ReactNode;
+    /** Optional theme override (else the active provider/default theme). */
+    theme?: UX4GTheme;
+    /** Container style override for the pill (ignored for `dot`). */
+    style?: StyleProp<ViewStyle>;
+}
+declare function Badge({ children, variant, appearance, theme: themeProp, style, }: BadgeProps): React.JSX.Element;
+
+interface ChipProps {
+    /** Highlight the chip as the active filter / choice. @default false */
+    selected?: boolean;
+    /** Dim and block interaction. @default false */
+    disabled?: boolean;
+    /** Leading icon node (e.g. a react-native-svg element). */
+    icon?: React.ReactNode;
+    /** Make the chip pressable (filter / choice token). */
+    onPress?: (e: GestureResponderEvent) => void;
+    /** Show a remove (×) button and handle its press (input token). */
+    onRemove?: (e: GestureResponderEvent) => void;
+    children?: React.ReactNode;
+    /** Optional theme override (else the active provider/default theme). */
+    theme?: UX4GTheme;
+    style?: StyleProp<ViewStyle>;
+    /** Override the computed accessibility label. */
+    accessibilityLabel?: string;
+}
+declare function Chip({ children, selected, disabled, icon, onPress, onRemove, theme: themeProp, style, accessibilityLabel, }: ChipProps): React.JSX.Element;
+
+interface AvatarProps {
+    src?: string;
+    /** Full name — drives initials fallback and accessibility label. */
+    name?: string;
+    /** Pixel size. @default 40 */
+    size?: number;
+    /** @default "circle" */
+    shape?: "circle" | "rounded";
+    status?: "online" | "busy" | "away" | null;
+    /** Optional theme override (else the active provider/default theme). */
+    theme?: UX4GTheme;
+    /** Test hook on the outer container. */
+    testID?: string;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Avatar({ src, name, size, shape, status, theme: themeProp, testID, style, }: AvatarProps): React.JSX.Element;
+
+interface CommentProps {
+    /** Author name / node shown next to the avatar. */
+    author: React.ReactNode;
+    /** Avatar node. Omit to render an initials monogram from `author`. */
+    avatar?: React.ReactNode;
+    /** Time / meta line next to the author. */
+    timestamp?: React.ReactNode;
+    /** Comment body. */
+    body: React.ReactNode;
+    /** Action row (e.g. Reply, Like). */
+    actions?: React.ReactNode;
+    /** Nested replies — usually more <Comment> elements. */
+    children?: React.ReactNode;
+    /** Tint + accent for an unread / highlighted comment. */
+    highlight?: boolean;
+    /** Optional theme override (else the active provider/default theme). */
+    theme?: UX4GTheme;
+    /** Forwarded to the outer container for testing / styling. */
+    testID?: string;
+    /** Optional style override for the outer container. */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * UX4G Comment — a single comment / discussion entry: avatar (or initials
+ * monogram), author + timestamp, body, an optional actions row and optional
+ * nested replies passed as children.
+ */
+declare function Comment({ author, avatar, timestamp, body, actions, children, highlight, theme: themeProp, testID, style, }: CommentProps): React.JSX.Element;
+
+type AlertVariant = "info" | "success" | "warning" | "danger";
+interface AlertProps {
+    /** Severity colourway. @default "info" */
+    variant?: AlertVariant;
+    /** Bold heading shown above the body. */
+    title?: React.ReactNode;
+    /** Override the default glyph for the variant. */
+    icon?: AlertVariant;
+    /** Show a dismiss (×) button and handle its press. */
+    onClose?: () => void;
+    children?: React.ReactNode;
+    /** Optional theme override (else the active provider/default theme). */
+    theme?: UX4GTheme;
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>;
+}
+/** UX4G Alert — inline status message (info, success, warning, danger). */
+declare function Alert({ children, title, variant, onClose, icon, theme: themeProp, style, }: AlertProps): React.JSX.Element;
+
+interface ProgressProps {
+    /** 0–100. Omit for an indeterminate bar. */
+    value?: number;
+    variant?: "primary" | "success" | "danger" | "warning";
+    /** @default "md" */
+    size?: "sm" | "md";
+    /** Show the % label. @default false */
+    showValue?: boolean;
+    /** Render a circular ring instead of a bar. @default false */
+    circular?: boolean;
+    /** Optional theme override (else the active provider/default theme). */
+    theme?: UX4GTheme;
+    /** Test handle. The fill/track/label derive `${testID}-fill` etc. */
+    testID?: string;
+    /** Override the computed accessibility label. */
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+}
+/** UX4G Progress — linear bar or circular ring. */
+declare function Progress({ value, variant, size, showValue, circular, theme: themeProp, testID, accessibilityLabel, style, }: ProgressProps): React.JSX.Element;
+
+interface SpinnerProps {
+    /** Pixel diameter. @default 24 */
+    size?: number;
+    /** Arc (stroke) colour. Defaults to the theme primary colour. */
+    color?: string;
+    /** Accessible name announced while loading. @default "Loading" */
+    label?: string;
+    /** Optional theme override (else the active provider/default theme). */
+    theme?: UX4GTheme;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * UX4G Spinner — indeterminate loading indicator.
+ *
+ * Mirrors the web spinner's geometry: a full neutral track circle with a
+ * coloured 90° arc on top. The web spins the SVG via a CSS keyframe; in RN
+ * that is a host driver concern (the platform paints the rotation), so the
+ * component renders the canonical resting frame and exposes the busy state to
+ * assistive tech. Keeping it static avoids a perpetual timer loop in tests and
+ * keeps the render deterministic.
+ */
+declare function Spinner({ size, color, label, theme: themeProp, style, }: SpinnerProps): React.JSX.Element;
+
+interface EmptyStateProps {
+    /** An illustration or inline-SVG icon node (e.g. a react-native-svg element). */
+    icon?: React.ReactNode;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** Primary action (e.g. a Button). */
+    action?: React.ReactNode;
+    /** Optional theme override (else the active provider/default theme). */
+    theme?: UX4GTheme;
+    /** Test handle for the outer container. */
+    testID?: string;
+}
+/** UX4G EmptyState — friendly placeholder for empty lists, search and dashboards. */
+declare function EmptyState({ icon, title, description, action, theme: themeProp, testID, }: EmptyStateProps): React.JSX.Element;
+
+interface FeedbackRating {
+    value: number;
+    label: string;
+}
+interface FeedbackWidgetProps {
+    /** Corner for the floating launcher. @default "bottom-right" */
+    position?: "bottom-right" | "bottom-left";
+    /** Launcher label. @default "Feedback" */
+    triggerLabel?: string;
+    title?: string;
+    prompt?: string;
+    /** Rating scale (1–5 faces by default). */
+    ratings?: FeedbackRating[];
+    /** Optional category chips. */
+    categories?: string[];
+    placeholder?: string;
+    onSubmit?: (data: {
+        rating: number | null;
+        category?: string;
+        message: string;
+    }) => void;
+    /** Render in flow instead of fixed to a corner (for embedding / demos). */
+    inline?: boolean;
+    defaultOpen?: boolean;
+    /** Optional theme override (else the active provider/default theme). */
+    theme?: UX4GTheme;
+}
+/**
+ * UX4G FeedbackWidget — a corner launcher that opens a short feedback form: a
+ * face rating, optional category chips, a comment and submit, with a thank-you
+ * confirmation. Faces are inline SVG (no emoji), per UX4G iconography. Set
+ * `inline` to embed it in flow instead of fixing to a corner.
+ */
+declare function FeedbackWidget({ position, triggerLabel, title, prompt, ratings, categories, placeholder, onSubmit, inline, defaultOpen, theme: themeProp, }: FeedbackWidgetProps): React.JSX.Element;
+
+interface ModalProps {
+    open: boolean;
+    onClose?: () => void;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    /** Footer actions row (right-aligned), e.g. Buttons. */
+    footer?: React.ReactNode;
+    /** @default "md" */
+    size?: "sm" | "md" | "lg";
+    /** Hide the × button. @default false */
+    hideClose?: boolean;
+    children?: React.ReactNode;
+    theme?: UX4GTheme;
+}
+declare function Modal({ open, onClose, title, description, footer, size, hideClose, children, theme: themeProp, }: ModalProps): React.JSX.Element | null;
+
+type TooltipPlacement = "top" | "bottom" | "left" | "right";
+interface TooltipProps {
+    /** Tooltip text. */
+    label: React.ReactNode;
+    /** @default "top" */
+    placement?: TooltipPlacement;
+    /** A single interactive element to wrap. */
+    children: React.ReactElement;
+    /** Optional theme override (else the active provider/default theme). */
+    theme?: UX4GTheme;
+}
+/**
+ * UX4G Tooltip — a small dark label clarifying an icon button or truncated
+ * text. The web shows it on hover/focus; on touch there is no hover, so the
+ * bubble toggles on press / long-press of the wrapped trigger.
+ */
+declare function Tooltip({ label, placement, children, theme: themeProp, }: TooltipProps): React.JSX.Element;
+
+interface MenuItem {
+    label: React.ReactNode;
+    /** Optional leading inline icon node (e.g. a react-native-svg element). */
+    icon?: React.ReactNode;
+    onClick?: () => void;
+    danger?: boolean;
+    disabled?: boolean;
+}
+interface MenuProps {
+    /** The element that opens the menu (a Button / IconButton / Pressable). */
+    trigger: React.ReactElement;
+    items: MenuItem[];
+    /** @default "left" */
+    align?: "left" | "right";
+    /** Optional theme override (else the active provider/default theme). */
+    theme?: UX4GTheme;
+    /** Test id; the scrim is exposed as `${testID}-scrim`. */
+    testID?: string;
+}
+/** UX4G Menu — a dropdown of actions anchored to a trigger. */
+declare function Menu({ trigger, items, align, theme: themeProp, testID, }: MenuProps): React.JSX.Element;
+
+type ToastVariant = "info" | "success" | "warning" | "danger";
+interface ToastProps {
+    /** Colourway driving the accent bar and status icon. @default "info" */
+    variant?: ToastVariant;
+    /** Bold heading line. */
+    title?: React.ReactNode;
+    /** Fires when the dismiss button is pressed, or after `duration` elapses. */
+    onClose?: () => void;
+    /** Auto-dismiss after this many milliseconds (calls `onClose`). Omit to keep it sticky. */
+    duration?: number;
+    /** Supporting body text or nodes. */
+    children?: React.ReactNode;
+    /** Optional theme override (else the active provider/default theme). */
+    theme?: UX4GTheme;
+    /** Forwarded to the outer card for testing/targeting. */
+    testID?: string;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Toast({ variant, title, onClose, duration, children, theme: themeProp, testID, style, }: ToastProps): React.JSX.Element;
+
+interface PopoverProps {
+    /** Element that toggles the popover (rendered inline). */
+    trigger: React.ReactNode;
+    /** Optional bold heading inside the panel. */
+    title?: React.ReactNode;
+    /** Panel body. */
+    children: React.ReactNode;
+    /** Side of the trigger the panel opens on. @default "bottom" */
+    placement?: "top" | "bottom" | "left" | "right";
+    /** Panel width in px. @default 264 */
+    width?: number;
+    /** Start open. @default false */
+    defaultOpen?: boolean;
+    /** Optional theme override (else the active provider/default theme). */
+    theme?: UX4GTheme;
+}
+/**
+ * UX4G Popover — click-triggered floating panel with an arrow. Richer than a
+ * Tooltip: holds a title, body content and actions. Toggles open on press of
+ * the trigger and again to close.
+ */
+declare function Popover({ trigger, title, children, placement, width, defaultOpen, theme: themeProp, }: PopoverProps): React.JSX.Element;
+
+/**
+ * A value that a cell can hold by default (when no `render` is supplied).
+ * Strings and numbers are wrapped in <Text>; a ReactNode is rendered as-is.
+ */
+type TableCellValue = React.ReactNode;
+/** Default row shape: an indexable record of renderable cell values. */
+type TableRow = Record<string, TableCellValue>;
+interface TableColumn<Row extends TableRow = TableRow> {
+    /** Field key on the row; also used as a React key for the column. */
+    key: string;
+    /** Column heading. */
+    header: React.ReactNode;
+    /** Custom cell renderer. Defaults to row[key]. */
+    render?: (row: Row) => React.ReactNode;
+    /** Horizontal text alignment for the header and its cells. @default "left" */
+    align?: "left" | "right" | "center";
+    /** Fixed column width in px (number) or a flex-basis string. */
+    width?: number | string;
+}
+interface TableProps<Row extends TableRow = TableRow> {
+    columns: TableColumn<Row>[];
+    rows: Row[];
+    /** Zebra striping. @default false */
+    striped?: boolean;
+    /**
+     * Web highlights rows on hover; React Native has no hover, so this is
+     * accepted for API parity but has no visual effect. @default true
+     */
+    hover?: boolean;
+    /** Render when rows is empty. Defaults to a "No records" message. */
+    empty?: React.ReactNode;
+    /** Optional theme override (else the active provider/default theme). */
+    theme?: UX4GTheme;
+    /** Forwarded to the outer container for testing / styling. */
+    testID?: string;
+    /** Optional style override for the outer container. */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * UX4G Table — a simple, scannable data table built from `columns` + `rows`.
+ *
+ * React Native has no `<table>`: the header is a row of Views and each record
+ * is a row of Views laid out with `flexDirection: "row"`. Columns are sized via
+ * `flex` (or a fixed `width`). The whole table is wrapped in a horizontal
+ * ScrollView so wide tables can scroll sideways on narrow screens.
+ */
+declare function Table<Row extends TableRow = TableRow>({ columns, rows, striped, hover: _hover, empty, theme: themeProp, testID, style, }: TableProps<Row>): React.JSX.Element;
+
+interface AccordionItem {
+    /** Stable id; also used for default open state. */
+    value: string;
+    title: React.ReactNode;
+    content: React.ReactNode;
+}
+interface AccordionProps {
+    items: AccordionItem[];
+    /** Allow multiple panels open at once. @default false */
+    multiple?: boolean;
+    /** Values open by default. */
+    defaultOpen?: string[];
+    /** Optional theme override (else the active provider/default theme). */
+    theme?: UX4GTheme;
+    /** Style for the outer accordion container. */
+    style?: StyleProp<ViewStyle>;
+}
+/** UX4G Accordion — collapsible panels for FAQs and grouped content. */
+declare function Accordion({ items, multiple, defaultOpen, theme: themeProp, style, }: AccordionProps): React.JSX.Element;
+
+interface PaginationProps {
+    /** Current page, 1-indexed. */
+    page: number;
+    /** Total number of pages. */
+    pageCount: number;
+    /** Fired with the next 1-indexed page when the user navigates. */
+    onChange: (page: number) => void;
+    /** Sibling pages either side of current. @default 1 */
+    siblings?: number;
+    /** Optional theme override (else the active provider/default theme). */
+    theme?: UX4GTheme;
+    /** Style for the outer navigation container. */
+    style?: StyleProp<ViewStyle>;
+}
+/** UX4G Pagination — page navigation for tables and lists. 1-indexed. */
+declare function Pagination({ page, pageCount, onChange, siblings, theme: themeProp, style, }: PaginationProps): React.JSX.Element;
+
+interface ListItemData {
+    /** Leading slot — icon, avatar or monogram. */
+    leading?: React.ReactNode;
+    /** Small uppercase label above the title. */
+    overline?: React.ReactNode;
+    title: React.ReactNode;
+    /** Supporting text under the title. */
+    description?: React.ReactNode;
+    /** Trailing slot — meta text, a control, or a chevron. */
+    trailing?: React.ReactNode;
+    /**
+     * Marks the row as a link target. In React Native there is no navigation
+     * here; like `onClick` it simply makes the row pressable.
+     */
+    href?: string;
+    /** Fired when the row is pressed (rows are pressable when set, or `interactive`). */
+    onClick?: (event: GestureResponderEvent) => void;
+    /** Current / selected row — violet-subtle fill + left accent. */
+    active?: boolean;
+    /** Dim and disable the row. */
+    disabled?: boolean;
+}
+interface ListProps {
+    items: ListItemData[];
+    /** Hairline dividers between rows. @default true */
+    dividers?: boolean;
+    /** Press affordance on rows. @default false */
+    interactive?: boolean;
+    /** Wrap in a bordered, rounded surface. @default true */
+    bordered?: boolean;
+    /** Show a chevron on every row (overridden by an item's own `trailing`). */
+    chevron?: boolean;
+    /** Optional theme override (else the active provider/default theme). */
+    theme?: UX4GTheme;
+    /** Forwarded to the outer container for testing / styling. */
+    testID?: string;
+    /** Optional style override for the outer container. */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * UX4G List — a vertical list of rows, each with optional leading/trailing
+ * slots and one to three lines of text (overline / title / description).
+ * Supports dividers, press interactivity, an active row and a trailing chevron.
+ */
+declare function List({ items, dividers, interactive, bordered, chevron, theme: themeProp, testID, style, }: ListProps): React.JSX.Element;
+
+type ChartType = "bar" | "line" | "pie" | "doughnut" | "radar" | "polarArea";
+/**
+ * A single Chart.js-style dataset. Only the fields the UX4G wrapper reads (or
+ * forwards through) are typed; colours are auto-filled from the palette when
+ * omitted, matching the web `Chart` behaviour.
+ */
+interface ChartDataset {
+    /** Legend / series name. */
+    label?: string;
+    /** The values, one per category label. */
+    data: number[];
+    /** Fill colour. A string applies to the whole series; an array colours each
+     *  slice (pie/doughnut/polarArea). Auto-filled from the palette when omitted. */
+    backgroundColor?: string | string[];
+    /** Stroke / line colour. Auto-filled from the palette when omitted. */
+    borderColor?: string;
+    /** Stroke width in px. */
+    borderWidth?: number;
+    /** Fill the area under a line. @default false */
+    fill?: boolean;
+}
+/** Chart.js-style `data` object. */
+interface ChartData {
+    /** Category labels (x axis / slice names). */
+    labels: string[];
+    datasets: ChartDataset[];
+}
+/** A small, typed subset of Chart.js `options` the RN wrapper honours. */
+interface ChartOptions {
+    /** Show the legend. @default true */
+    showLegend?: boolean;
+}
+interface ChartProps {
+    /** Chart type. */
+    type: ChartType;
+    /** Chart data ({ labels, datasets }). Dataset colours are auto-filled from
+     *  the UX4G palette when omitted. */
+    data: ChartData;
+    /** Display options, merged over UX4G defaults. */
+    options?: ChartOptions;
+    /** Pixel height of the chart area. @default 300 */
+    height?: number;
+    /** Override the categorical colour sequence. */
+    palette?: string[];
+    /** Optional theme override (else the active provider/default theme). */
+    theme?: UX4GTheme;
+    /** Test handle. Bars derive `${testID}-bar-<dataset>-<index>`. */
+    testID?: string;
+    /** Override the computed accessibility label. */
+    accessibilityLabel?: string;
+    /** Style override for the outer container. */
+    style?: StyleProp<ViewStyle>;
+}
+/** UX4G categorical palette — brand violet first, then info/success/warning/danger. */
+declare const UX4G_CHART_PALETTE: string[];
+/**
+ * UX4G Chart — a themed, native rendering of common Chart.js chart types.
+ * Bars are Views; line/area/radar and circular charts are drawn with
+ * react-native-svg. Dataset colours default to the UX4G palette. No Chart.js.
+ */
+declare function Chart({ type, data, options, height, palette, theme: themeProp, testID, accessibilityLabel, style, }: ChartProps): React.JSX.Element;
+
+interface IndiaStateGeo {
+    /** ISO 3166-2:IN style code. */
+    code: string;
+    name: string;
+    /** "state" | "ut" */
+    type: "state" | "ut";
+    /** Label / centroid anchor in viewBox units. */
+    cx: number;
+    cy: number;
+    /** SVG path data in the shared 659.598 x 750.626 viewBox. */
+    d: string;
+}
+declare const INDIA_VIEWBOX = "0 0 659.598 750.626";
+declare const INDIA_STATES: IndiaStateGeo[];
+
+interface IndiaMapProps {
+    /** Metric per region, keyed by state code (e.g. { MH: 124, KA: 98 }). */
+    values?: Record<string, number>;
+    /** Sequential colour ramp, light -> dark. */
+    colorScale?: string[];
+    /** Value domain [min, max]; defaults to the extent of `values`. */
+    domain?: [number, number];
+    /** Fill for regions with no value. */
+    emptyColor?: string;
+    /** Currently selected region code (controlled). */
+    selected?: string;
+    /** Fired on tap / select. */
+    onSelect?: (code: string, region: IndiaStateGeo) => void;
+    /** Tooltip / legend value formatter. */
+    formatValue?: (v: number) => string;
+    /** Legend heading. @default "Value" */
+    legendLabel?: string;
+    /** Show the gradient legend. @default true */
+    showLegend?: boolean;
+    /** Pixel height of the map area. @default 560 */
+    height?: number;
+    /** Map surface treatment. @default "light" */
+    theme?: "light" | "dark";
+    /**
+     * Optional UX4G design-system theme override (else the active provider /
+     * default theme). Named `uxTheme` because the contract's `theme` prop is the
+     * "light" | "dark" map surface, not the design-system theme object.
+     */
+    uxTheme?: UX4GTheme;
+    /** Test handle for the outer container. */
+    testID?: string;
+}
+/**
+ * UX4G India Map — data-driven choropleth. Colour each state / union territory
+ * by a metric, with tap selection and a gradient legend. Geometry covers 29
+ * states + 7 union territories. Use for region-based data / heatmaps, not as a
+ * substitute for a simple dropdown.
+ */
+declare function IndiaMap({ values, colorScale, domain, emptyColor, selected, onSelect, formatValue, legendLabel, showLegend, height, theme, uxTheme, testID, }: IndiaMapProps): React.JSX.Element;
+
+interface TabItem {
+    value: string;
+    label: React.ReactNode;
+    /** Optional leading icon node (e.g. a react-native-svg element). */
+    icon?: React.ReactNode;
+    /** Count/badge shown after the label. */
+    badge?: React.ReactNode;
+    disabled?: boolean;
+}
+/** UX4G Tabs — underline tab bar. Controlled (`value`) or uncontrolled (`defaultValue`). */
+interface TabsProps {
+    /** Items as strings or {value,label,icon,badge,disabled}. */
+    tabs: (string | TabItem)[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    /** Stretch tabs to share the row evenly. @default false */
+    fullWidth?: boolean;
+    /** Optional theme override (else the active provider/default theme). */
+    theme?: UX4GTheme;
+    /** Style for the outer tablist container. */
+    style?: StyleProp<ViewStyle>;
+}
+declare function Tabs({ tabs, value, defaultValue, onChange, fullWidth, theme: themeProp, style, }: TabsProps): React.JSX.Element;
+
+/** A single crumb in the trail. Items with an `href` render as links; the last item is the current page. */
+interface CrumbItem {
+    /** Visible label. May be a string or a rich node. */
+    label: React.ReactNode;
+    /** Destination. Present on link crumbs; omit on the current page. */
+    href?: string;
+}
+interface BreadcrumbProps {
+    /** The hierarchy trail. The last item is the current page (non-link). */
+    items: CrumbItem[];
+    /**
+     * Called when a link crumb is pressed (RN has no anchor navigation).
+     * The current/last crumb never fires this.
+     */
+    onPressItem?: (item: CrumbItem, index: number) => void;
+    /** Optional theme override (else the active provider/default theme). */
+    theme?: UX4GTheme;
+    /** Style for the outer navigation container. */
+    style?: StyleProp<ViewStyle>;
+}
+/** UX4G Breadcrumb — page hierarchy trail. The last item is the current page. */
+declare function Breadcrumb({ items, onPressItem, theme: themeProp, style, }: BreadcrumbProps): React.JSX.Element;
+
+/** A single step in the flow. `label` is required; `description` is an optional sub-line. */
+interface StepperStep {
+    /** Visible label. May be a string or a rich node. */
+    label: React.ReactNode;
+    /** Optional sub-line shown beneath the label. */
+    description?: React.ReactNode;
+}
+interface StepperProps {
+    /** The ordered steps. */
+    steps: StepperStep[];
+    /** 0-indexed current step. */
+    current: number;
+    /** @default "horizontal" */
+    orientation?: "horizontal" | "vertical";
+    /** Optional theme override (else the active provider/default theme). */
+    theme?: UX4GTheme;
+    /** Style for the outer container. */
+    style?: StyleProp<ViewStyle>;
+}
+/** UX4G Stepper — progress through a multi-step flow (e.g. grievance, KYC). */
+declare function Stepper({ steps, current, orientation, theme: themeProp, style, }: StepperProps): React.JSX.Element;
+
+/** A single primary-navigation link. */
+interface NavLink {
+    /** Visible label. May be a string or a rich node. */
+    label: React.ReactNode;
+    /** Destination. Kept for parity with the web contract; RN has no anchor
+     *  navigation, so use `onPress` to handle taps. */
+    href?: string;
+    /** Marks the current page — violet-subtle fill + `selected` a11y state. */
+    active?: boolean;
+    /** Called when the link is pressed (RN replaces the web `onClick`). */
+    onPress?: () => void;
+}
+interface NavbarProps {
+    /** Site / department title shown next to the mark. */
+    title: React.ReactNode;
+    /** Optional second line under the title. */
+    subtitle?: React.ReactNode;
+    /** Brand mark. Defaults to the UX4G wordmark. */
+    logo?: React.ReactNode;
+    /** Primary navigation links. */
+    links?: NavLink[];
+    /** Right-aligned slot — buttons, login, language, etc. */
+    actions?: React.ReactNode;
+    /** Government utility strip above the bar. `true` renders the default
+     *  "Government of India" strip; pass a node to customise. */
+    topStrip?: React.ReactNode | boolean;
+    /** Stick to the top of the viewport on scroll. @default false */
+    sticky?: boolean;
+    /** Optional theme override (else the active provider/default theme). */
+    theme?: UX4GTheme;
+    /** Style for the outer header container. */
+    style?: StyleProp<ViewStyle>;
+}
+/** UX4G Navbar — government website header: optional gov utility strip,
+ *  brand lockup, primary nav and an actions slot. */
+declare function Navbar({ title, subtitle, logo, links, actions, topStrip, sticky, theme: themeProp, style, }: NavbarProps): React.JSX.Element;
+
+/** A footer link. Renders as a pressable; `href` is carried for the caller. */
+interface FooterLink {
+    /** Visible label. May be a string or a rich node. */
+    label: React.ReactNode;
+    /** Destination. Carried through to `onPressLink` (RN has no anchor nav). */
+    href?: string;
+}
+/** A column of links with a heading. */
+interface FooterColumn {
+    /** Column heading. */
+    title: React.ReactNode;
+    /** Links under this heading. */
+    links: FooterLink[];
+}
+/** A social / external icon link. */
+interface FooterSocial {
+    /** Accessible label (required — these are icon-only controls). */
+    label: string;
+    /** Destination. Carried through to `onPressSocial`. */
+    href?: string;
+    /** Inline glyph node (e.g. a react-native-svg element). */
+    icon: React.ReactNode;
+}
+interface FooterProps {
+    /** Brand mark. Defaults to the UX4G wordmark. */
+    logo?: React.ReactNode;
+    /** Short line under the mark. */
+    tagline?: React.ReactNode;
+    /** Link columns. */
+    columns?: FooterColumn[];
+    /** Social / external icon links. */
+    social?: FooterSocial[];
+    /** Bottom-strip copyright text. */
+    copyright?: React.ReactNode;
+    /** Bottom-strip policy links (privacy, terms, accessibility…). */
+    policyLinks?: FooterLink[];
+    /** Called when a column or policy link is pressed (RN has no anchor nav). */
+    onPressLink?: (link: FooterLink) => void;
+    /** Called when a social icon link is pressed. */
+    onPressSocial?: (social: FooterSocial) => void;
+    /** Optional theme override (else the active provider/default theme). */
+    theme?: UX4GTheme;
+    /** Style for the outer footer container. */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * UX4G Footer — government portal footer. Brand mark + tagline + social icons
+ * on the left, link columns on the right, and a grounding dark bottom strip
+ * carrying the copyright line and policy links.
+ */
+declare function Footer({ logo, tagline, columns, social, copyright, policyLinks, onPressLink, onPressSocial, theme: themeProp, style, }: FooterProps): React.JSX.Element;
+
+interface CarouselProps {
+    /** Each child is a slide (image, card, banner). */
+    children: React.ReactNode;
+    /** Pixel height of the viewport. @default 280 */
+    height?: number;
+    /** Auto-advance interval in ms (0 = off). @default 0 */
+    interval?: number;
+    /** Show prev/next arrows. @default true */
+    arrows?: boolean;
+    /** Show dot indicators. @default true */
+    dots?: boolean;
+    /** Optional theme override (else the active provider/default theme). */
+    theme?: UX4GTheme;
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>;
+}
+/** UX4G Carousel — swipeable slide deck for hero banners and galleries. */
+declare function Carousel({ children, height, interval, arrows, dots, theme: themeProp, style, }: CarouselProps): React.JSX.Element;
+
+/**
+ * The live reading adjustments tracked by the widget. Mirrors the web
+ * reference: numeric levels for text/spacing/line/saturation, plus a set of
+ * on/off reading aids. RN has no DOM/CSS to mutate, so the active settings are
+ * exposed to the host app via `onSettingsChange` to apply however it chooses.
+ */
+interface AccessibilitySettings {
+    /** Page zoom, 0.8 – 1.6. */
+    fontScale: number;
+    /** Letter-spacing level, 0 – 3. */
+    spacing: number;
+    /** Line-height level, 0 – 3. */
+    line: number;
+    dyslexia: boolean;
+    /** Reading-mask mode. */
+    adhd: boolean;
+    /** Saturation level: 0 normal · 1 low · 2 high · 3 none (grayscale). */
+    saturation: number;
+    /** Dark mode (smart invert). */
+    dark: boolean;
+    /** Full colour inversion. */
+    invert: boolean;
+    /** Highlight links. */
+    links: boolean;
+    /** Text to speech. */
+    tts: boolean;
+    /** Big cursor. */
+    cursor: boolean;
+    /** Pause animation. */
+    pause: boolean;
+    hideImages: boolean;
+    contrast: boolean;
+}
+interface AccessibilityWidgetProps {
+    /** Corner to dock the launcher. @default "bottom-right" */
+    position?: "bottom-right" | "bottom-left";
+    /** Open the panel on mount (handy for demos / embedding). @default false */
+    defaultOpen?: boolean;
+    /**
+     * Called whenever the adjustments change. The host app applies them however
+     * it likes (RN has no DOM/CSS to mutate). Replaces the web's direct DOM +
+     * localStorage side effects.
+     */
+    onSettingsChange?: (settings: AccessibilitySettings) => void;
+    /** Optional theme override (else the active provider/default theme). */
+    theme?: UX4GTheme;
+}
+/**
+ * UX4G AccessibilityWidget (React Native) — a floating "universal access"
+ * launcher that opens a panel with a 3-column tile grid of live reading
+ * adjustments: Bigger / Smaller Text, Text Spacing, Line Height, Dyslexia
+ * Friendly, ADHD Mode, Saturation, Light-Dark, Invert Colors, Highlight Links,
+ * Text to Speech, Cursor, Pause Animation, Hide Images and Contrast, plus Reset
+ * all. Light-Dark and Invert Colors are mutually exclusive. The web version
+ * mutates the DOM and localStorage directly; in RN there is no DOM, so the
+ * active settings are surfaced through `onSettingsChange` for the host app to
+ * apply.
+ */
+declare function AccessibilityWidget({ position, defaultOpen, onSettingsChange, theme: themeProp, }: AccessibilityWidgetProps): React.JSX.Element;
+
+export { type AccessibilitySettings, AccessibilityWidget, type AccessibilityWidgetProps, Accordion, type AccordionItem, type AccordionProps, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, Badge, type BadgeProps, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, Card, type CardProps, Carousel, type CarouselProps, Chart, type ChartData, type ChartDataset, type ChartOptions, type ChartProps, type ChartType, Checkbox, type CheckboxProps, Chip, type ChipProps, ColorPicker, type ColorPickerProps, type ColorRamp, Comment, type CommentProps, type CrumbItem, DatePicker, type DatePickerProps, EmptyState, type EmptyStateProps, type FeedbackRating, FeedbackWidget, type FeedbackWidgetProps, FileUpload, type FileUploadProps, Footer, type FooterColumn, type FooterLink, type FooterProps, type FooterSocial, INDIA_STATES, INDIA_VIEWBOX, IconButton, type IconButtonProps, IndiaMap, type IndiaMapProps, type IndiaStateGeo, Input, type InputProps, List, type ListItemData, type ListProps, Menu, type MenuItem, type MenuProps, Modal, type ModalProps, type NavLink, Navbar, type NavbarProps, Pagination, type PaginationProps, Popover, type PopoverProps, Progress, type ProgressProps, Radio, type RadioProps, RangeSlider, type RangeSliderProps, Search, type SearchProps, Select, type SelectOption, type SelectProps, Spinner, type SpinnerProps, Stepper, type StepperProps, type StepperStep, Switch, type SwitchProps, type TabItem, Table, type TableCellValue, type TableColumn, type TableProps, type TableRow, Tabs, type TabsProps, Textarea, type TextareaProps, type ThemeOverrides, ThemeProvider, type ThemeProviderProps, Toast, type ToastProps, type ToastVariant, Tooltip, type TooltipPlacement, type TooltipProps, type UX4GTheme, UX4G_CHART_PALETTE, type UploadedFile, border, font, makeTheme, motion, radius, ramp, shadow, space, theme, type, useUX4GTheme };