@butternutbox/pawprint-native 0.0.1 → 0.2.0

package/dist/index.d.ts

@@ -7,7 +7,13 @@ import { FontSource } from 'expo-font';
 import React from 'react';
 import * as _emotion_react from '@emotion/react';
 import { Theme } from '@emotion/react';
-import { View, TextProps, Text, ViewProps, PressableProps, TextInputProps, TextInput } from 'react-native';
+import * as react_native from 'react-native';
+import { View, ViewProps, TextProps, Text, PressableProps, TextInputProps, TextInput, ImageSourcePropType, ScrollViewProps } from 'react-native';
+import * as react_native_reanimated from 'react-native-reanimated';
+import { FadeIn, FadeOut, FadeInUp, FadeOutUp, FadeInDown, FadeOutDown, ComplexAnimationBuilder, BaseAnimationBuilder, EntryExitAnimationFunction, FadeInRight, FadeOutRight, FadeInLeft, FadeOutLeft } from 'react-native-reanimated';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Option } from '@rn-primitives/select';
+import { Locale } from 'date-fns';
 
 declare module "@emotion/react" {
     interface Theme {
@@ -62,18 +68,74 @@ declare const createPawprintTheme: (brand?: BrandName, theme?: ThemeName) => The
 declare const theme: _butternutbox_pawprint_tokens.Tokens;
 
 type AvatarSize = "sm" | "md" | "lg";
-type AvatarBorder = "none" | "sm" | "md";
 type AvatarFallbackType = "string" | "image";
-interface AvatarProps {
+type SmallAvatarProps = {
+    size?: "sm";
+    border?: "none" | "sm";
+};
+type MediumLargeAvatarProps = {
+    size?: "md" | "lg";
+    border?: "none" | "md";
+};
+type BaseAvatarProps = {
     src?: string;
     alt: string;
-    size?: AvatarSize;
-    border?: AvatarBorder;
     fallbackType?: AvatarFallbackType;
     fallbackString?: string;
-}
+};
+type AvatarProps = BaseAvatarProps & (SmallAvatarProps | MediumLargeAvatarProps);
 declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<View>>;
 
+type CarouselControlsProps = {
+    /**
+     * Total number of carousel items. Renders one dot per item (max 5 visible
+     * for 6–7 items via a sliding window).
+     */
+    count: number;
+    /**
+     * Zero-based index of the currently active item.
+     */
+    activeIndex: number;
+    /**
+     * Show a white pill background behind the dots. Defaults to `true`.
+     *
+     * Set to `false` when placing controls on a light surface where the
+     * background pill would clash with the page background.
+     */
+    showBackground?: boolean;
+} & ViewProps;
+/**
+ * Carousel position indicator — a row of dots where the active dot is
+ * highlighted and inactive dots are shown at reduced opacity.
+ *
+ * For 6–7 item carousels a 5-dot sliding window is used with diminishing
+ * dot sizes to indicate proximity to the active item.
+ *
+ * @example
+ * ```tsx
+ * <CarouselControls count={4} activeIndex={currentIndex} />
+ * <CarouselControls count={4} activeIndex={currentIndex} showBackground={false} />
+ * ```
+ */
+declare const CarouselControls: React.ForwardRefExoticComponent<{
+    /**
+     * Total number of carousel items. Renders one dot per item (max 5 visible
+     * for 6–7 items via a sliding window).
+     */
+    count: number;
+    /**
+     * Zero-based index of the currently active item.
+     */
+    activeIndex: number;
+    /**
+     * Show a white pill background behind the dots. Defaults to `true`.
+     *
+     * Set to `false` when placing controls on a light surface where the
+     * background pill would clash with the page background.
+     */
+    showBackground?: boolean;
+} & ViewProps & React.RefAttributes<View>>;
+
 type BodySize = "xs" | "sm" | "md" | "lg";
 type HeadingSize = "2xs" | "xs" | "sm" | "md" | "lg" | "xl";
 type DisplaySize = "md" | "lg";
@@ -177,6 +239,7 @@ type IconOwnProps = {
     icon: PawprintIcon;
     size?: IconSize;
     colour?: IconColour;
+    customColour?: string;
     "aria-label"?: string;
 };
 type IconProps = IconOwnProps & Omit<ViewProps, keyof IconOwnProps>;
@@ -329,13 +392,13 @@ type IconButtonProps = IconButtonOwnProps & Omit<PressableProps, keyof IconButto
  */
 declare const IconButton: React.ForwardRefExoticComponent<IconButtonOwnProps & Omit<PressableProps, "children" | keyof IconButtonOwnProps> & React.RefAttributes<View>>;
 
-type IllustrationSize = "sm" | "lg";
-type PawprintIllustration = React.ComponentType<{
+type IllustrationSize = "sm" | "lg" | "xl";
+type PawprintIllustration$2 = React.ComponentType<{
     width?: number;
     height?: number;
 }>;
 type IllustrationOwnProps = {
-    illustration: PawprintIllustration;
+    illustration: PawprintIllustration$2;
     size?: IllustrationSize;
     "aria-label"?: string;
 };
@@ -352,7 +415,7 @@ type IllustrationProps = IllustrationOwnProps & Omit<ViewProps, keyof Illustrati
  * ```
  *
  * @param illustration - **(required)** Illustration component
- * @param size - *(optional)* Size variant: sm (default), lg
+ * @param size - *(optional)* Size variant: sm (default), lg, xl
  * @param aria-label - *(optional)* Accessible label
  */
 declare const Illustration: React.ForwardRefExoticComponent<IllustrationOwnProps & Omit<ViewProps, keyof IllustrationOwnProps> & React.RefAttributes<View>>;
@@ -361,7 +424,11 @@ type InputState = "default" | "error" | "success";
 type InputFieldOwnProps = {
     leadingIcon?: React.ReactNode;
     trailingIcon?: React.ReactNode;
+    actionIcon?: React.ReactNode;
     state?: InputState;
+    hideStateIcons?: boolean;
+    containerWidth?: number;
+    containerHeight?: number;
 };
 type InputFieldProps = InputFieldOwnProps & Omit<TextInputProps, keyof InputFieldOwnProps>;
 /**
@@ -369,7 +436,9 @@ type InputFieldProps = InputFieldOwnProps & Omit<TextInputProps, keyof InputFiel
  *
  * @param {React.ReactNode} [leadingIcon] - Icon to display before the input
  * @param {React.ReactNode} [trailingIcon] - Icon to display after the input
+ * @param {React.ReactNode} [actionIcon] - Interactive icon at the rightmost position (e.g. clear button, password toggle)
  * @param {InputState} [state] - Visual state of the input (default, error, success)
+ * @param {boolean} [hideStateIcons] - Hide automatic error/success icons
  */
 declare const InputField: React.ForwardRefExoticComponent<InputFieldOwnProps & Omit<TextInputProps, keyof InputFieldOwnProps> & React.RefAttributes<TextInput>>;
 
@@ -419,16 +488,17 @@ type InputOwnProps = {
     error?: string;
     state?: InputState;
     optionalText?: string;
+    onValueChange?: (value: string) => void;
 };
 type InputProps = InputOwnProps & Omit<InputFieldProps, keyof InputOwnProps> & Omit<ViewProps, keyof InputOwnProps>;
-declare const StyledRoot: _emotion_native.StyledComponent<ViewProps & {
+declare const StyledRoot$6: _emotion_native.StyledComponent<ViewProps & {
     theme?: _emotion_react.Theme;
     as?: React.ElementType;
 }, {}, {
     ref?: React.Ref<View> | undefined;
 }>;
 type InputComponent = React.ForwardRefExoticComponent<InputProps & React.RefAttributes<View>> & {
-    Root: typeof StyledRoot;
+    Root: typeof StyledRoot$6;
     Label: typeof InputLabel;
     Field: typeof InputField;
     Description: typeof InputDescription;
@@ -495,6 +565,36 @@ type LogoSvgComponent = React.ComponentType<{
 declare function resolveLogo(brand: LogoBrand, variant: LogoVariant): LogoSvgComponent | undefined;
 declare function registerLogo(brand: LogoBrand, variant: LogoVariant, component: LogoSvgComponent): void;
 
+type NumberInputFieldOwnProps = {
+    fieldText?: string;
+};
+type NumberInputFieldProps = NumberInputFieldOwnProps & Omit<InputFieldProps, keyof NumberInputFieldOwnProps>;
+/**
+ * Field component for NumberInput.
+ * Renders a centered number input sized to `numberField.size.large.height`.
+ * When fieldText is provided, wraps input + text in a horizontal group.
+ */
+declare const NumberInputField: React.ForwardRefExoticComponent<NumberInputFieldOwnProps & Omit<InputFieldProps, "fieldText"> & React.RefAttributes<TextInput>>;
+
+type NumberInputOwnProps = Pick<InputProps, "label" | "description" | "error" | "state" | "optionalText" | "onValueChange"> & {
+    fieldText?: string;
+};
+type NumberInputProps = NumberInputOwnProps & Omit<InputFieldProps, keyof NumberInputOwnProps> & Omit<ViewProps, keyof NumberInputOwnProps>;
+declare const StyledRoot$5: _emotion_native.StyledComponent<ViewProps & {
+    theme?: _emotion_react.Theme;
+    as?: React.ElementType;
+}, {}, {
+    ref?: React.Ref<View> | undefined;
+}>;
+type NumberInputComponent = React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<View>> & {
+    Root: typeof StyledRoot$5;
+    Label: typeof InputLabel;
+    Field: typeof NumberInputField;
+    Description: typeof InputDescription;
+    Error: typeof InputError;
+};
+declare const NumberInput: NumberInputComponent;
+
 type SpinnerSize = "sm" | "md" | "lg";
 type SpinnerVariant = "dark" | "light";
 type SpinnerOwnProps = {
@@ -564,6 +664,282 @@ type TagProps = TagOwnProps & Omit<ViewProps, keyof TagOwnProps>;
  */
 declare const Tag: React.ForwardRefExoticComponent<TagOwnProps & Omit<ViewProps, keyof TagOwnProps> & React.RefAttributes<View>>;
 
+type TextAreaFieldOwnProps = {
+    leadingIcon?: React.ReactNode;
+    trailingIcon?: React.ReactNode;
+    state?: InputState;
+    hideStateIcons?: boolean;
+    rows?: number;
+};
+type TextAreaFieldProps = TextAreaFieldOwnProps & Omit<TextInputProps, keyof TextAreaFieldOwnProps>;
+/**
+ * TextAreaField component - Multi-line text input field with icons and visual states.
+ *
+ * @param {React.ReactNode} [leadingIcon] - Icon to display at the start of the textarea (top-left, should be 24px)
+ * @param {React.ReactNode} [trailingIcon] - Icon to display at the end of the textarea (top-right, overrides automatic state icons)
+ * @param {InputState} [state] - Visual state of the textarea (default, error, success)
+ * @param {boolean} [hideStateIcons] - Hide automatic error/success icons
+ * @param {number} [rows=2] - Number of visible text rows (used to calculate minHeight)
+ */
+declare const TextAreaField: React.ForwardRefExoticComponent<TextAreaFieldOwnProps & Omit<TextInputProps, keyof TextAreaFieldOwnProps> & React.RefAttributes<TextInput>>;
+
+type TextAreaLabelOwnProps = {
+    optionalText?: string;
+    state?: InputState;
+    children: React.ReactNode;
+    maxLength?: number;
+    currentLength?: number;
+};
+type TextAreaLabelProps = TextAreaLabelOwnProps;
+declare const TextAreaLabel: React.ForwardRefExoticComponent<TextAreaLabelOwnProps & React.RefAttributes<View>>;
+
+type TextAreaOwnProps = {
+    label?: string;
+    description?: string;
+    error?: string;
+    state?: InputState;
+    optionalText?: string;
+    onValueChange?: (value: string) => void;
+};
+type TextAreaProps = TextAreaOwnProps & Omit<TextAreaFieldProps, keyof TextAreaOwnProps> & Omit<ViewProps, keyof TextAreaOwnProps>;
+declare const StyledRoot$4: _emotion_native.StyledComponent<ViewProps & {
+    theme?: _emotion_react.Theme;
+    as?: React.ElementType;
+}, {}, {
+    ref?: React.Ref<View> | undefined;
+}>;
+type TextAreaComponent = React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<View>> & {
+    Root: typeof StyledRoot$4;
+    Label: typeof TextAreaLabel;
+    Field: typeof TextAreaField;
+    Description: typeof InputDescription;
+    Error: typeof InputError;
+};
+declare const TextArea: TextAreaComponent;
+
+type AccordionSize = "small" | "large";
+type AccordionRootOwnProps = {
+    size?: AccordionSize;
+    multiple?: boolean;
+    defaultValue?: string[];
+    value?: string[];
+    onValueChange?: (value: string[]) => void;
+    disabled?: boolean;
+    children: React.ReactNode;
+};
+type AccordionProps = AccordionRootOwnProps & Omit<ViewProps, keyof AccordionRootOwnProps>;
+type AccordionItemOwnProps = {
+    title: string;
+    children: React.ReactNode;
+    value?: string;
+    disabled?: boolean;
+};
+type AccordionItemProps = AccordionItemOwnProps & Omit<ViewProps, keyof AccordionItemOwnProps>;
+declare const Accordion: React.ForwardRefExoticComponent<AccordionRootOwnProps & Omit<ViewProps, keyof AccordionRootOwnProps> & React.RefAttributes<View>> & {
+    Item: React.ForwardRefExoticComponent<AccordionItemOwnProps & Omit<ViewProps, keyof AccordionItemOwnProps> & React.RefAttributes<View>>;
+};
+
+declare class SubtleScaleIn extends ComplexAnimationBuilder {
+    static presetName: string;
+    static createInstance<T extends typeof BaseAnimationBuilder>(this: T): InstanceType<T>;
+    build: () => EntryExitAnimationFunction;
+}
+declare const fadeAnimation: {
+    readonly entering: typeof FadeIn;
+    readonly exiting: typeof FadeOut;
+};
+declare const fadeUpAnimation: {
+    readonly entering: typeof FadeInDown;
+    readonly exiting: typeof FadeOutDown;
+};
+declare const fadeDownAnimation: {
+    readonly entering: typeof FadeInUp;
+    readonly exiting: typeof FadeOutUp;
+};
+declare const slideInAnimation: {
+    readonly entering: typeof FadeInRight;
+    readonly exiting: typeof FadeOutRight;
+};
+declare const slideOutAnimation: {
+    readonly entering: typeof FadeInLeft;
+    readonly exiting: typeof FadeOutLeft;
+};
+declare const DURATIONS: {
+    readonly fade: 200;
+    readonly scale: 150;
+    readonly fadeUp: 200;
+    readonly fadeDown: 200;
+    readonly slideIn: 250;
+    readonly slideOut: 250;
+};
+declare const scaleAnimation: {
+    readonly entering: typeof SubtleScaleIn;
+    readonly exiting: react_native_reanimated.ReanimatedKeyframe;
+};
+type AnimatedVariant = keyof typeof DURATIONS;
+type AnimatedProps = {
+    /**
+     * Animation preset. Defaults to `"fade"`.
+     *
+     * | Preset      | Motion                                    |
+     * |-------------|-------------------------------------------|
+     * | `fade`      | opacity                                   |
+     * | `fadeUp`    | opacity + enter from below                |
+     * | `fadeDown`  | opacity + enter from above                |
+     * | `scale`     | opacity + subtle scale 0.85↔1             |
+     * | `slideIn`   | opacity + enter from right                |
+     * | `slideOut`  | opacity + enter from left                 |
+     */
+    variant?: AnimatedVariant;
+    /**
+     * Delay in seconds before the entering animation starts. Useful for
+     * sequencing elements without a full stagger setup. Ignored when
+     * `prefers-reduced-motion` is active.
+     *
+     * @example
+     * ```tsx
+     * <Animated variant="fadeUp" delay={0}>First</Animated>
+     * <Animated variant="fadeUp" delay={0.08}>Second</Animated>
+     * <Animated variant="fadeUp" delay={0.16}>Third</Animated>
+     * ```
+     */
+    delay?: number;
+} & ViewProps;
+/**
+ * Reanimated wrapper that applies a named animation preset to its children.
+ *
+ * Exit animations run automatically when the component unmounts — no wrapper
+ * component needed (unlike `AnimatePresence` on web).
+ *
+ * Respects the OS reduce-motion setting automatically — Reanimated builders
+ * default to `ReduceMotion.System` so no extra hook is needed.
+ *
+ * Export `*Animation` objects (e.g. `fadeUpAnimation`) for applying presets
+ * directly on `Reanimated.View` in custom stagger patterns:
+ *
+ * ```tsx
+ * <Reanimated.View entering={fadeUpAnimation.entering.duration(200).delay(80)}>
+ *   <Item />
+ * </Reanimated.View>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Enter animation
+ * <Animated variant="fadeUp"><Card /></Animated>
+ *
+ * // Enter + exit — condition the render and Reanimated handles both
+ * {visible && <Animated variant="slideIn"><Panel /></Animated>}
+ *
+ * // Sequenced elements
+ * <Animated variant="fadeUp" delay={0}>Title</Animated>
+ * <Animated variant="fadeUp" delay={0.1}>Subtitle</Animated>
+ * ```
+ */
+declare const Animated: React.ForwardRefExoticComponent<{
+    /**
+     * Animation preset. Defaults to `"fade"`.
+     *
+     * | Preset      | Motion                                    |
+     * |-------------|-------------------------------------------|
+     * | `fade`      | opacity                                   |
+     * | `fadeUp`    | opacity + enter from below                |
+     * | `fadeDown`  | opacity + enter from above                |
+     * | `scale`     | opacity + subtle scale 0.85↔1             |
+     * | `slideIn`   | opacity + enter from right                |
+     * | `slideOut`  | opacity + enter from left                 |
+     */
+    variant?: AnimatedVariant;
+    /**
+     * Delay in seconds before the entering animation starts. Useful for
+     * sequencing elements without a full stagger setup. Ignored when
+     * `prefers-reduced-motion` is active.
+     *
+     * @example
+     * ```tsx
+     * <Animated variant="fadeUp" delay={0}>First</Animated>
+     * <Animated variant="fadeUp" delay={0.08}>Second</Animated>
+     * <Animated variant="fadeUp" delay={0.16}>Third</Animated>
+     * ```
+     */
+    delay?: number;
+} & ViewProps & React.RefAttributes<View>>;
+
+type DrawerHeaderVariant = "titleAndText" | "image" | "fullBleed";
+
+type DrawerContentProps = Omit<ViewProps, "style">;
+
+type DrawerOverlayProps = {
+    accessible?: boolean;
+};
+
+type DrawerRootOwnProps = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: React.ReactNode;
+};
+type DrawerProps = DrawerRootOwnProps & Omit<ViewProps, keyof DrawerRootOwnProps>;
+type DrawerTriggerProps = {
+    children: React.ReactElement;
+};
+type DrawerPortalProps = {
+    children: React.ReactNode;
+};
+declare const Drawer: React.ForwardRefExoticComponent<DrawerRootOwnProps & Omit<ViewProps, keyof DrawerRootOwnProps> & React.RefAttributes<View>> & {
+    Root: React.ForwardRefExoticComponent<DrawerRootOwnProps & Omit<ViewProps, keyof DrawerRootOwnProps> & React.RefAttributes<View>>;
+    Trigger: React.ForwardRefExoticComponent<DrawerTriggerProps & React.RefAttributes<View>>;
+    Portal: {
+        ({ children }: DrawerPortalProps): react_jsx_runtime.JSX.Element | null;
+        displayName: string;
+    };
+    Overlay: React.ForwardRefExoticComponent<DrawerOverlayProps & React.RefAttributes<View>>;
+    Content: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<View>>;
+    Grabber: React.ForwardRefExoticComponent<ViewProps & React.RefAttributes<View>>;
+    Header: React.ForwardRefExoticComponent<{
+        variant?: DrawerHeaderVariant;
+        imageSource?: react_native.ImageSourcePropType;
+    } & Omit<ViewProps, keyof {
+        variant?: DrawerHeaderVariant;
+        imageSource?: react_native.ImageSourcePropType;
+    }> & React.RefAttributes<View>>;
+    Title: React.ForwardRefExoticComponent<{
+        children: React.ReactNode;
+    } & Omit<ViewProps, "children"> & React.RefAttributes<View>>;
+    Description: React.ForwardRefExoticComponent<{
+        children: React.ReactNode;
+    } & Omit<ViewProps, "children"> & React.RefAttributes<View>>;
+    Close: React.ForwardRefExoticComponent<{
+        "aria-label"?: string;
+    } & Omit<ViewProps, "children"> & React.RefAttributes<View>>;
+    Body: React.ForwardRefExoticComponent<react_native.ScrollViewProps & React.RefAttributes<react_native.ScrollView>>;
+    Footer: React.ForwardRefExoticComponent<ViewProps & React.RefAttributes<View>>;
+};
+
+type DrawerGrabberProps = ViewProps;
+
+type DrawerHeaderOwnProps = {
+    variant?: DrawerHeaderVariant;
+    imageSource?: ImageSourcePropType;
+};
+type DrawerHeaderProps = DrawerHeaderOwnProps & Omit<ViewProps, keyof DrawerHeaderOwnProps>;
+
+type DrawerTitleProps = {
+    children: React.ReactNode;
+} & Omit<ViewProps, "children">;
+
+type DrawerDescriptionProps = {
+    children: React.ReactNode;
+} & Omit<ViewProps, "children">;
+
+type DrawerCloseProps = {
+    "aria-label"?: string;
+} & Omit<ViewProps, "children">;
+
+type DrawerBodyProps = ScrollViewProps;
+
+type DrawerFooterProps = ViewProps;
+
 type ButtonDockVariant = "stacked" | "inline";
 type ButtonDockOwnProps = {
     variant?: ButtonDockVariant;
@@ -666,6 +1042,288 @@ type CheckboxGroupProps = CheckboxGroupOwnProps & Omit<ViewProps, keyof Checkbox
  */
 declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupOwnProps & Omit<ViewProps, keyof CheckboxGroupOwnProps> & React.RefAttributes<View>>;
 
+type CopyFieldInputOwnProps = {
+    onCopy?: (value: string) => void;
+    onValueChange?: (value: string) => void;
+    copyButtonLabel?: string;
+};
+declare const CopyFieldInput: React.ForwardRefExoticComponent<CopyFieldInputOwnProps & Omit<InputFieldProps, keyof CopyFieldInputOwnProps> & React.RefAttributes<TextInput>>;
+
+declare const StyledRoot$3: _emotion_native.StyledComponent<ViewProps & {
+    theme?: _emotion_react.Theme;
+    as?: React.ElementType;
+}, {}, {
+    ref?: React.Ref<View> | undefined;
+}>;
+type CopyFieldOwnProps = {
+    label?: string;
+    description?: string;
+    error?: string;
+    state?: InputState;
+    optionalText?: string;
+    onCopy?: (value: string) => void;
+    onValueChange?: (value: string) => void;
+    copyButtonLabel?: string;
+};
+type CopyFieldProps = CopyFieldOwnProps & Omit<InputFieldProps, keyof CopyFieldOwnProps> & Omit<ViewProps, keyof CopyFieldOwnProps>;
+type CopyFieldComponent = React.ForwardRefExoticComponent<CopyFieldProps & React.RefAttributes<View>> & {
+    Root: typeof StyledRoot$3;
+    Label: typeof InputLabel;
+    Field: typeof CopyFieldInput;
+    Description: typeof InputDescription;
+    Error: typeof InputError;
+};
+declare const CopyField: CopyFieldComponent;
+
+type UseCopyFieldOptions = {
+    initialValue?: string;
+    onCopy?: (value: string) => void;
+};
+declare const useCopyField: (options?: UseCopyFieldOptions) => {
+    value: string;
+    onValueChange: (newValue: string) => void;
+    onCopy: (copiedValue: string) => void;
+};
+
+type FilterTabSize = "sm" | "lg";
+type FilterTabRootOwnProps = {
+    size?: FilterTabSize;
+    multiple?: boolean;
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    children: React.ReactNode;
+};
+type FilterTabProps = FilterTabRootOwnProps & Omit<ViewProps, keyof FilterTabRootOwnProps>;
+type FilterTabItemOwnProps = {
+    value: string;
+    label?: string;
+    icon?: PawprintIcon;
+    leadingIcon?: PawprintIcon;
+    trailingIcon?: PawprintIcon;
+    disabled?: boolean;
+};
+type FilterTabItemProps = FilterTabItemOwnProps & Omit<PressableProps, keyof FilterTabItemOwnProps | "children">;
+declare const FilterTab: React.ForwardRefExoticComponent<FilterTabRootOwnProps & Omit<ViewProps, keyof FilterTabRootOwnProps> & React.RefAttributes<View>> & {
+    Item: React.ForwardRefExoticComponent<FilterTabItemOwnProps & Omit<PressableProps, "children" | keyof FilterTabItemOwnProps> & React.RefAttributes<View>>;
+};
+
+type NumberFieldSize$1 = "sm" | "lg";
+type NumberFieldInputOwnProps = {
+    fieldSize?: NumberFieldSize$1;
+    state?: "default" | "error" | "success";
+    onIncrement?: () => void;
+    onDecrement?: () => void;
+    showIncrementButton?: boolean;
+    showDecrementButton?: boolean;
+    disabled?: boolean;
+    incrementDisabled?: boolean;
+    decrementDisabled?: boolean;
+    min?: number;
+    max?: number;
+};
+type NumberFieldInputProps = NumberFieldInputOwnProps & Omit<TextInputProps, keyof NumberFieldInputOwnProps>;
+
+type NumberFieldSize = "sm" | "lg";
+type NumberFieldState = "default" | "error" | "success";
+type NumberFieldOwnProps = {
+    label?: string;
+    smallLabel?: string;
+    description?: string;
+    error?: string;
+    state?: NumberFieldState;
+    size?: NumberFieldSize;
+    disabled?: boolean;
+    onIncrement?: () => void;
+    onDecrement?: () => void;
+    showIncrementButton?: boolean;
+    showDecrementButton?: boolean;
+    incrementDisabled?: boolean;
+    decrementDisabled?: boolean;
+    min?: number;
+    max?: number;
+};
+type NumberFieldProps = NumberFieldOwnProps & Omit<NumberFieldInputProps, keyof NumberFieldOwnProps | "fieldSize"> & Omit<ViewProps, keyof NumberFieldOwnProps>;
+/**
+ * Number field component for collecting numeric data with increment/decrement
+ * buttons and an optional side text label.
+ * Built on React Native TextInput with design system styling.
+ *
+ * @param {"sm" | "lg"} [size="lg"] - Size variant controlling typography and spacing.
+ * @param {string} [label] - Primary label text above the field.
+ * @param {string} [smallLabel] - Secondary label text displayed below the primary label.
+ * @param {string} [description] - Help text displayed below the field.
+ * @param {string} [error] - Error message displayed when state is "error".
+ * @param {"default" | "error" | "success"} [state="default"] - Visual state of the field.
+ * @param {boolean} [disabled=false] - Whether the entire field (input + buttons) is disabled.
+ * @param {() => void} [onIncrement] - Called when the + button is pressed.
+ * @param {() => void} [onDecrement] - Called when the - button is pressed.
+ * @param {boolean} [showIncrementButton=true] - Whether to show the + button.
+ * @param {boolean} [showDecrementButton=true] - Whether to show the - button.
+ * @param {boolean} [incrementDisabled=false] - Whether the + button is independently disabled.
+ * @param {boolean} [decrementDisabled=false] - Whether the - button is independently disabled.
+ * @param {number} [min] - Minimum allowed value. Clamps on blur and disables decrement at min.
+ * @param {number} [max] - Maximum allowed value. Clamps on blur and disables increment at max.
+ *
+ * @example
+ * ```tsx
+ * import { NumberField } from "@butternutbox/pawprint-native"
+ *
+ * <NumberField
+ *   label="Weight"
+ *   size="lg"
+ *   defaultValue="0"
+ *   onIncrement={() => setValue(v => v + 1)}
+ *   onDecrement={() => setValue(v => v - 1)}
+ * />
+ * ```
+ *
+ * Note: Unlike the web version, this component does not support a compound component API.
+ */
+declare const NumberField: React.ForwardRefExoticComponent<NumberFieldOwnProps & Omit<NumberFieldInputProps, "fieldSize" | keyof NumberFieldOwnProps> & Omit<ViewProps, keyof NumberFieldOwnProps> & React.RefAttributes<View>>;
+
+/**
+ * Input field component for PasswordField.
+ * Wraps InputField with password visibility toggle.
+ *
+ * @param onValueChange - Value change handler
+ * @param value - Controlled value
+ * @param state - Visual state of the input
+ * @param editable - Controls whether the input is editable
+ */
+declare const PasswordFieldInput: React.ForwardRefExoticComponent<Omit<PasswordFieldProps, "error" | "label" | "description" | "optionalText" | "requirements" | "showRequirements"> & React.RefAttributes<TextInput>>;
+
+/**
+ * Error message component for PasswordField.
+ * Displays the error text with a RemoveCircle icon to match the design system
+ * password validation styling.
+ *
+ * @param children - Error message text
+ */
+declare const PasswordFieldError: React.ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+} & ViewProps & React.RefAttributes<View>>;
+
+type PasswordRequirement = {
+    text: string;
+    satisfied: boolean;
+};
+type PasswordFieldRequirementsOwnProps = {
+    requirements: string[] | PasswordRequirement[];
+    children?: never;
+};
+type PasswordFieldRequirementsProps = PasswordFieldRequirementsOwnProps & Omit<ViewProps, keyof PasswordFieldRequirementsOwnProps>;
+/**
+ * Requirements list component for PasswordField.
+ * Displays a list of password requirements with validation icons.
+ *
+ * @param requirements - Array of requirement strings or objects with text and satisfied status
+ */
+declare const PasswordFieldRequirements: React.ForwardRefExoticComponent<PasswordFieldRequirementsOwnProps & Omit<ViewProps, keyof PasswordFieldRequirementsOwnProps> & React.RefAttributes<View>>;
+
+declare const StyledRoot$2: _emotion_native.StyledComponent<ViewProps & {
+    theme?: _emotion_react.Theme;
+    as?: React.ElementType;
+}, {}, {
+    ref?: React.Ref<View> | undefined;
+}>;
+type PasswordFieldOwnProps = {
+    label?: string;
+    description?: string;
+    error?: string | string[];
+    state?: InputState;
+    optionalText?: string;
+    requirements?: string[] | PasswordRequirement[];
+    showRequirements?: boolean;
+    onValueChange?: (value: string) => void;
+};
+type PasswordFieldProps = PasswordFieldOwnProps & Omit<InputFieldProps, keyof PasswordFieldOwnProps> & Omit<ViewProps, keyof PasswordFieldOwnProps>;
+type PasswordFieldComponent = React.ForwardRefExoticComponent<PasswordFieldProps & React.RefAttributes<View>> & {
+    Root: typeof StyledRoot$2;
+    Label: typeof InputLabel;
+    Field: typeof PasswordFieldInput;
+    Description: typeof InputDescription;
+    Requirements: typeof PasswordFieldRequirements;
+    Error: typeof PasswordFieldError;
+};
+declare const PasswordField: PasswordFieldComponent;
+
+type PasswordValidationRule = {
+    test: (value: string) => boolean;
+    message: string;
+};
+type UsePasswordFieldOptions = {
+    initialValue?: string;
+    onValueChange?: (value: string) => void;
+    validationRules?: PasswordValidationRule[];
+    autoShowRequirements?: boolean;
+};
+type UsePasswordFieldReturn = Pick<PasswordFieldProps, "value" | "onValueChange" | "state" | "requirements" | "showRequirements">;
+/**
+ * Hook for managing PasswordField state with built-in validation.
+ * Handles value, validation state, and requirements automatically.
+ *
+ * @example
+ * ```tsx
+ * // Simple usage without validation
+ * const passwordProps = usePasswordField()
+ * <PasswordField {...passwordProps} label="Password" />
+ *
+ * // With validation rules
+ * const passwordProps = usePasswordField({
+ *   validationRules: [
+ *     { test: (v) => v.length >= 8, message: "At least 8 characters" },
+ *     { test: (v) => /[A-Z]/.test(v), message: "One uppercase letter" },
+ *     { test: (v) => /[a-z]/.test(v), message: "One lowercase letter" },
+ *     { test: (v) => /\d/.test(v), message: "One number" }
+ *   ]
+ * })
+ * <PasswordField {...passwordProps} label="Create Password" />
+ * ```
+ *
+ * @param {string} [initialValue=""] - Initial password value
+ * @param {(value: string) => void} [onValueChange] - Optional callback called after value changes
+ * @param {PasswordValidationRule[]} [validationRules] - Array of validation rules
+ * @param {boolean} [autoShowRequirements] - Whether to auto-show requirements (default: true when rules provided)
+ */
+declare function usePasswordField({ initialValue, onValueChange: onValueChangeCallback, validationRules, autoShowRequirements }?: UsePasswordFieldOptions): UsePasswordFieldReturn;
+
+type ProgressSize = "sm" | "lg";
+type ProgressColour = "primary" | "secondary";
+type ProgressOwnProps = {
+    value?: number;
+    max?: number;
+    size?: ProgressSize;
+    colour?: ProgressColour;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    getValueLabel?: (value: number, max: number) => string;
+};
+type ProgressProps = ProgressOwnProps & Omit<ViewProps, keyof ProgressOwnProps>;
+/**
+ * A horizontal progress bar that visualises the completion of a determinate
+ * task. Supports an optional label (top-left) and description (top-right),
+ * two sizes, and two indicator colours.
+ *
+ * Wraps `@rn-primitives/progress` for accessibility.
+ *
+ * @param {number} [value=0] - Current progress value (0 to `max`). Clamped.
+ * @param {number} [max=100] - Maximum value representing 100% completion.
+ * @param {"sm" | "lg"} [size="sm"] - Track height: sm (8px) or lg (16px).
+ * @param {"primary" | "secondary"} [colour="primary"] - Indicator fill colour.
+ * @param {React.ReactNode} [label] - Label rendered in the top-left above the track.
+ * @param {React.ReactNode} [description] - Helper text rendered in the top-right above the track.
+ * @param {(value: number, max: number) => string} [getValueLabel] - Accessible value label.
+ *
+ * @example
+ * ```tsx
+ * import { Progress } from "@butternutbox/pawprint-native"
+ *
+ * <Progress label="Box capacity" description="14/14" value={100} />
+ * ```
+ */
+declare const Progress: React.ForwardRefExoticComponent<ProgressOwnProps & Omit<ViewProps, keyof ProgressOwnProps> & React.RefAttributes<View>>;
+
 type RadioOwnProps = {
     value: string;
     variant?: "standalone" | "tile";
@@ -709,6 +1367,60 @@ type RadioGroupComponent = React.ForwardRefExoticComponent<RadioGroupProps & Rea
 };
 declare const RadioGroup: RadioGroupComponent;
 
+declare const SearchFieldInput: React.ForwardRefExoticComponent<Omit<SearchFieldProps, "error" | "label" | "description" | "optionalText"> & React.RefAttributes<TextInput>>;
+
+declare const StyledRoot$1: _emotion_native.StyledComponent<ViewProps & {
+    theme?: _emotion_react.Theme;
+    as?: React.ElementType;
+}, {}, {
+    ref?: React.Ref<View> | undefined;
+}>;
+type SearchFieldOwnProps = {
+    label?: string;
+    description?: string;
+    error?: string;
+    state?: InputState;
+    optionalText?: string;
+    onClear?: () => void;
+    onValueChange?: (value: string) => void;
+};
+type SearchFieldProps = SearchFieldOwnProps & Omit<InputFieldProps, keyof SearchFieldOwnProps> & Omit<ViewProps, keyof SearchFieldOwnProps>;
+type SearchFieldComponent = React.ForwardRefExoticComponent<SearchFieldProps & React.RefAttributes<View>> & {
+    Root: typeof StyledRoot$1;
+    Label: typeof InputLabel;
+    Field: typeof SearchFieldInput;
+    Description: typeof InputDescription;
+    Error: typeof InputError;
+};
+declare const SearchField: SearchFieldComponent;
+
+type UseSearchFieldOptions = {
+    initialValue?: string;
+    onValueChange?: (value: string) => void;
+    onClear?: () => void;
+};
+type UseSearchFieldReturn = Pick<SearchFieldProps, "value" | "onValueChange" | "onClear">;
+/**
+ * Hook for managing SearchField state with optional additional callbacks.
+ * Handles the common pattern of controlled SearchField with value/onValueChange/onClear.
+ *
+ * @example
+ * ```tsx
+ * const searchProps = useSearchField({
+ *   initialValue: "",
+ *   onValueChange: (value) => triggerSearch(value),
+ *   onClear: () => resetResults()
+ * })
+ *
+ * <SearchField {...searchProps} placeholder="Search..." />
+ * ```
+ *
+ * @param {string} [initialValue=""] - Initial search value
+ * @param {(value: string) => void} [onValueChange] - Optional callback called after value changes
+ * @param {() => void} [onClear] - Optional callback called after clearing (in addition to clearing the value)
+ */
+declare function useSearchField({ initialValue, onValueChange: onValueChangeCallback, onClear: onClearCallback }?: UseSearchFieldOptions): UseSearchFieldReturn;
+
 type SegmentedControlLayout = "fixed" | "intrinsic";
 type SegmentedControlOption = {
     value: string;
@@ -739,6 +1451,103 @@ type SegmentedControlComponent = React.ForwardRefExoticComponent<SegmentedContro
 };
 declare const SegmentedControl: SegmentedControlComponent;
 
+type SelectFieldTriggerOwnProps = {
+    state?: InputState;
+    leadingIcon?: React.ReactNode;
+    children?: React.ReactNode;
+    isOpen?: boolean;
+};
+type SelectFieldTriggerProps = SelectFieldTriggerOwnProps & Omit<PressableProps, keyof SelectFieldTriggerOwnProps>;
+declare const SelectFieldTrigger: React.ForwardRefExoticComponent<SelectFieldTriggerOwnProps & Omit<PressableProps, keyof SelectFieldTriggerOwnProps> & React.RefAttributes<View>>;
+
+declare const SelectFieldValue: React.ForwardRefExoticComponent<{
+    placeholder?: string;
+} & Omit<TextProps, "children"> & React.RefAttributes<Text>>;
+
+declare const SelectFieldContent: React.ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+} & Omit<ViewProps, "children"> & React.RefAttributes<View>>;
+
+type SelectFieldItemOwnProps = {
+    value: string;
+    leadingIcon?: React.ReactNode;
+    hintText?: string;
+    disabled?: boolean;
+    isSelected?: boolean;
+};
+type SelectFieldItemProps = SelectFieldItemOwnProps & Omit<PressableProps, keyof SelectFieldItemOwnProps>;
+declare const SelectFieldItem: React.ForwardRefExoticComponent<SelectFieldItemOwnProps & Omit<PressableProps, keyof SelectFieldItemOwnProps> & React.RefAttributes<View>>;
+
+declare const StyledRoot: _emotion_native.StyledComponent<ViewProps & {
+    theme?: _emotion_react.Theme;
+    as?: React.ElementType;
+}, {}, {
+    ref?: React.Ref<View> | undefined;
+}>;
+type SelectFieldOwnProps<Value = Option | string> = {
+    label?: string;
+    description?: string;
+    error?: string;
+    state?: InputState;
+    optionalText?: string;
+    placeholder?: string;
+    leadingIcon?: React.ReactNode;
+    value?: Value | null;
+    defaultValue?: Value | null;
+    onValueChange?: (value: Value | null) => void;
+    children?: React.ReactNode;
+    disabled?: boolean;
+};
+type SelectFieldProps<Value = Option> = SelectFieldOwnProps<Value> & Omit<ViewProps, keyof SelectFieldOwnProps<Value>>;
+type SelectFieldComponent = React.ForwardRefExoticComponent<SelectFieldProps<Option | string> & React.RefAttributes<View>> & {
+    Root: typeof StyledRoot;
+    Label: typeof InputLabel;
+    Trigger: typeof SelectFieldTrigger;
+    Value: typeof SelectFieldValue;
+    Content: typeof SelectFieldContent;
+    Item: typeof SelectFieldItem;
+    Description: typeof InputDescription;
+    Error: typeof InputError;
+};
+declare const SelectField: SelectFieldComponent;
+
+type SelectValidationRule<T = string | Option> = {
+    test: (value: T | null) => boolean;
+    message: string;
+};
+type SelectOptions<T = string | Option> = {
+    initialValue?: T | null;
+    onValueChange?: (value: T | null) => void;
+    validationRule?: SelectValidationRule<T>;
+};
+type SelectReturn<T = string | Option> = {
+    value: T | null;
+    onValueChange: (value: T | null) => void;
+    state?: InputState;
+    error?: string;
+};
+/**
+ * Hook for managing SelectField state with built-in validation.
+ * Handles value, validation state, and error message automatically.
+ *
+ * @example
+ * ```tsx
+ * // Simple usage without validation
+ * const selectProps = useSelectField()
+ * <SelectField {...selectProps} label="Country" />
+ *
+ * // With validation rule
+ * const selectProps = useSelectField({
+ *   validationRule: {
+ *     test: (v) => v !== null,
+ *     message: "Please select an option"
+ *   }
+ * })
+ * <SelectField {...selectProps} label="Category" />
+ * ```
+ */
+declare function useSelectField<T = string | Option>(options?: SelectOptions<T>): SelectReturn<T>;
+
 type SliderOwnProps = {
     value?: number;
     defaultValue?: number;
@@ -777,4 +1586,293 @@ type SliderProps = SliderOwnProps & Omit<ViewProps, keyof SliderOwnProps>;
  */
 declare const Slider: React.ForwardRefExoticComponent<SliderOwnProps & Omit<ViewProps, keyof SliderOwnProps> & React.RefAttributes<View>>;
 
-export { Avatar, type AvatarBorder, type AvatarFallbackType, type AvatarProps, type AvatarSize, BRAND_FONTS, Badge, type BadgeProps, Button, type ButtonColour, ButtonDock, type ButtonDockProps, type ButtonDockVariant, ButtonGroup, type ButtonGroupLayout, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxVariant, Hint, type HintProps, Icon, IconButton, type IconButtonColour, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconCategory, type IconColour, type IconProps, type IconSize, Illustration, type IllustrationProps, type IllustrationSize, Input, InputDescription, type InputDescriptionProps, InputError, type InputErrorProps, InputField, type InputFieldProps, InputLabel, type InputLabelProps, type InputProps, Link, type LinkProps, type LinkSize, type LinkWeight, Logo, type LogoBrand, type LogoProps, type LogoSvgComponent, type LogoVariant, type PawprintIcon, type PawprintIllustration, PawprintProvider, type PawprintProviderProps, Radio, RadioGroup, type RadioGroupProps, type RadioOwnProps, type RadioProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, type SpinnerVariant, Switch, type SwitchProps, Tag, type TagProps, ThemeProvider, Typography, type TypographyProps, createPawprintTheme, registerLogo, resolveFont, resolveLogo, theme, usePawprint };
+type NotificationType = "error" | "success" | "warning" | "info";
+type NotificationSize = "sm" | "lg";
+type BaseProps = {
+    type?: NotificationType;
+    showIcon?: boolean;
+    children: React.ReactNode;
+};
+type InlineVariantProps = BaseProps & {
+    variant?: "inline";
+    title?: string;
+    onClose?: () => void;
+    size?: never;
+    link?: never;
+};
+type ToastVariantProps = BaseProps & {
+    variant: "toast";
+    onClose?: () => void;
+    link?: {
+        label: string;
+        href?: string;
+        onPress?: () => void;
+    };
+    title?: never;
+    size?: never;
+};
+type SystemVariantProps = BaseProps & {
+    variant: "system";
+    size?: NotificationSize;
+    title?: never;
+    onClose?: never;
+    link?: never;
+};
+type NotificationOwnProps = InlineVariantProps | ToastVariantProps | SystemVariantProps;
+type NotificationProps = NotificationOwnProps & Omit<ViewProps, keyof NotificationOwnProps>;
+/**
+ * Displays contextual feedback messages to users. Supports three layout
+ * variants — inline (within content flow), toast (floating overlay), and
+ * system (full-width banner) — each with four severity types.
+ *
+ * Note: Unlike the web version, toast link uses `onPress` callback instead
+ * of `href` for navigation. The `href` prop is also available and opens
+ * the URL via `Linking`.
+ *
+ * @param {"inline" | "toast" | "system"} [variant="inline"] - Layout variant.
+ * @param {"error" | "success" | "warning" | "info"} [type="error"] - Severity type controlling colours and icon.
+ * @param {boolean} [showIcon=true] - Whether to show the status icon.
+ * @param {string} [title] - Optional headline (inline variant only).
+ * @param {() => void} [onClose] - Close callback (inline and toast variants).
+ * @param {{ label: string; href?: string; onPress?: () => void }} [link] - Optional action link (toast variant only).
+ * @param {"sm" | "lg"} [size="sm"] - Size variant (system variant only).
+ * @param {React.ReactNode} children - The notification body text.
+ *
+ * @example
+ * ```tsx
+ * import { Notification } from "@butternutbox/pawprint-native"
+ *
+ * <Notification type="success" title="Order confirmed">
+ *   Your order has been placed successfully.
+ * </Notification>
+ * ```
+ */
+declare const Notification: React.ForwardRefExoticComponent<NotificationProps & React.RefAttributes<View>>;
+
+type TooltipAlignment = "left" | "middle" | "right";
+type TooltipPosition = "top" | "bottom";
+type TooltipOwnProps = {
+    text: string;
+    alignment?: TooltipAlignment;
+    position?: TooltipPosition;
+    /**
+     * Trigger element. When provided the component manages its own open/close
+     * state (press-to-toggle, animated). Omit for static rendering (docs stories).
+     *
+     * Requires a <PortalHost /> at the application root.
+     */
+    children?: React.ReactNode;
+};
+type TooltipProps = TooltipOwnProps & Omit<ViewProps, keyof TooltipOwnProps>;
+declare const Tooltip: React.ForwardRefExoticComponent<TooltipOwnProps & Omit<ViewProps, keyof TooltipOwnProps> & React.RefAttributes<View>>;
+
+type PawprintIllustration$1 = React.ComponentType<{
+    width?: number;
+    height?: number;
+}>;
+type InsightVariant = "standalone" | "supporting";
+type MessageCardInsightOwnProps = {
+    variant?: InsightVariant;
+    icon?: PawprintIcon;
+    illustration?: PawprintIllustration$1;
+    title?: string;
+    children: React.ReactNode;
+};
+type MessageCardInsightProps = MessageCardInsightOwnProps & Omit<ViewProps, keyof MessageCardInsightOwnProps>;
+/**
+ * Yellow highlight card for bite-sized USPs and trust signals.
+ *
+ * @param {"standalone" | "supporting"} [variant="standalone"] - `supporting`
+ *   renders a flat top edge when attached to a related element above.
+ * @param {PawprintIcon} [icon] - Optional core icon. Ignored when
+ *   `illustration` is provided.
+ * @param {PawprintIllustration} [illustration] - Optional illustration; takes
+ *   precedence over `icon`.
+ * @param {string} [title] - Optional headline. Renders above the body copy
+ *   in both `standalone` and `supporting` variants.
+ * @param {React.ReactNode} children - Body copy.
+ */
+declare const MessageCardInsight: React.ForwardRefExoticComponent<MessageCardInsightOwnProps & Omit<ViewProps, keyof MessageCardInsightOwnProps> & React.RefAttributes<View>>;
+type BannerColourScheme = "primary" | "secondary";
+type MessageCardBannerMedia = {
+    type: "image";
+    source: ImageSourcePropType;
+    alt?: string;
+} | {
+    type: "illustration";
+    illustration: PawprintIllustration$1;
+};
+type MessageCardBannerOwnProps = {
+    colourScheme?: BannerColourScheme;
+    media?: MessageCardBannerMedia;
+    title?: string;
+    children: React.ReactNode;
+    linkLabel?: string;
+    linkHref?: string;
+    onLinkPress?: () => void;
+};
+type MessageCardBannerProps = MessageCardBannerOwnProps & Omit<ViewProps, keyof MessageCardBannerOwnProps>;
+/**
+ * Horizontal card with an image or illustration, title, body copy and an
+ * optional link CTA.
+ *
+ * @param {"primary" | "secondary"} [colourScheme="primary"] - Background
+ *   scheme. `primary` is saturated yellow; `secondary` is a lighter cream.
+ * @param {MessageCardBannerMedia} [media] - Tagged slot accepting either
+ *   `{ type: "image", source, alt }` or `{ type: "illustration", illustration }`.
+ * @param {string} [title] - Optional headline.
+ * @param {React.ReactNode} children - Body copy.
+ * @param {string} [linkLabel] - CTA label. When provided with `linkHref` or
+ *   `onLinkPress`, renders a link row.
+ * @param {string} [linkHref] - URL opened via `Linking` when pressed.
+ * @param {() => void} [onLinkPress] - Callback when the CTA is pressed.
+ */
+declare const MessageCardBanner: React.ForwardRefExoticComponent<MessageCardBannerOwnProps & Omit<ViewProps, keyof MessageCardBannerOwnProps> & React.RefAttributes<View>>;
+/**
+ * Compound component exposing two sub-components:
+ *
+ * - `MessageCard.Insight` — yellow trust-signal card
+ * - `MessageCard.Banner` — horizontal image/illustration + copy + optional CTA
+ */
+declare const MessageCard: {
+    Insight: React.ForwardRefExoticComponent<MessageCardInsightOwnProps & Omit<ViewProps, keyof MessageCardInsightOwnProps> & React.RefAttributes<View>>;
+    Banner: React.ForwardRefExoticComponent<MessageCardBannerOwnProps & Omit<ViewProps, keyof MessageCardBannerOwnProps> & React.RefAttributes<View>>;
+};
+
+/**
+ * Visual state for a calendar date cell.
+ *
+ * - `previous`  — Dates before today. Non-interactive, shown in muted text.
+ * - `current`   — Today's date. Bold + underlined, no indicator fill.
+ * - `default`   — A future date with no scheduled delivery. Plain text.
+ * - `nextBox`   — The next scheduled box delivery date. Filled dark indicator.
+ *                 When selected (`selectedDate` matches): dashed-border indicator.
+ *                 When disabled (`isDateDisabled` returns true): shown at reduced opacity (undeliverable — e.g. bank holiday).
+ * - `futureBox` — A future recurring delivery slot (cadence-based, typically weekly).
+ *                 Beige indicator by default.
+ *                 When selected: dashed-border indicator (projected future delivery after user's chosen date).
+ *                 When disabled: shown at reduced opacity (undeliverable — e.g. bank holiday).
+ */
+type DateItemState = "default" | "previous" | "current" | "nextBox" | "futureBox";
+type DatePickerOwnProps = {
+    year: number;
+    month: number;
+    selectedDate?: Date | null;
+    selectedDates?: Date[];
+    onDateSelect?: (date: Date) => void;
+    onPrevMonth?: () => void;
+    onNextMonth?: () => void;
+    onMonthChange?: (year: number, month: number) => void;
+    showWeekHeader?: boolean;
+    showPrevControl?: boolean;
+    showNextControl?: boolean;
+    locale?: Locale;
+    monthLabel?: string;
+    weekDayLabels?: [string, string, string, string, string, string, string];
+    getDateState?: (date: Date) => DateItemState;
+    isDateDisabled?: (date: Date) => boolean;
+    minDate?: Date;
+    maxDate?: Date;
+};
+type DatePickerProps = DatePickerOwnProps & Omit<ViewProps, keyof DatePickerOwnProps>;
+/**
+ * A controlled calendar date-picker showing a single month grid.
+ *
+ * Supports date states: default, previous, current, nextBox, futureBox.
+ * Prev/next month navigation and the week-day header are optional.
+ *
+ * Note: Unlike the web version, there is no hover state (not available on mobile).
+ *
+ * @param {number} year - Full year (e.g. 2026).
+ * @param {number} month - Zero-based month index (0–11).
+ * @param {Date | null} [selectedDate] - Currently selected date.
+ * @param {(date: Date) => void} [onDateSelect] - Called when the user selects a date.
+ * @param {() => void} [onPrevMonth] - Called when the prev-month control is pressed.
+ * @param {() => void} [onNextMonth] - Called when the next-month control is pressed.
+ * @param {(year: number, month: number) => void} [onMonthChange] - Called with the new year and month (0-based) whenever the month changes via prev/next.
+ * @param {boolean} [showWeekHeader=true] - Show the Mon–Sun column headers.
+ * @param {boolean} [showPrevControl=true] - Show the left chevron control.
+ * @param {boolean} [showNextControl=true] - Show the right chevron control.
+ * @param {string} [monthLabel] - Override the month/year label (defaults to Intl formatting).
+ * @param {[string,string,string,string,string,string,string]} [weekDayLabels] - Day-column labels Mon→Sun.
+ * @param {(date: Date) => DateItemState} [getDateState] - Returns the visual state for a date.
+ *   Defaults to: past="previous", today="current", future="default".
+ * @param {(date: Date) => boolean} [isDateDisabled] - Returns true to disable a date.
+ * @param {Date} [minDate] - Dates before this (exclusive of time) will be disabled.
+ * @param {Date} [maxDate] - Dates after this (exclusive of time) will be disabled.
+ *
+ * @example
+ * ```tsx
+ * import { DatePicker } from "@butternutbox/pawprint-native"
+ *
+ * const [month, setMonth] = React.useState(new Date().getMonth())
+ * const [year, setYear] = React.useState(new Date().getFullYear())
+ * const [selected, setSelected] = React.useState<Date | null>(null)
+ *
+ * <DatePicker
+ *   year={year}
+ *   month={month}
+ *   selectedDate={selected}
+ *   onDateSelect={setSelected}
+ *   onPrevMonth={() => setMonth(m => m === 0 ? (setYear(y => y - 1), 11) : m - 1)}
+ *   onNextMonth={() => setMonth(m => m === 11 ? (setYear(y => y + 1), 0) : m + 1)}
+ * />
+ * ```
+ */
+declare const DatePicker: React.ForwardRefExoticComponent<DatePickerOwnProps & Omit<ViewProps, keyof DatePickerOwnProps> & React.RefAttributes<View>>;
+
+type PawprintIllustration = React.ComponentType<{
+    width?: number;
+    height?: number;
+}>;
+type PictureSelectorItem = {
+    value: string;
+    illustration?: PawprintIllustration;
+    disabled?: boolean;
+    ariaLabel?: string;
+    insightTitle?: string;
+    insightDescription?: React.ReactNode;
+};
+type PictureSelectorOwnProps = {
+    label?: string;
+    items: PictureSelectorItem[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Optional fixed card width (px). Defaults to `100%` (fluid). */
+    itemWidth?: number;
+    /** Card aspect ratio (width / height). Defaults to `1` (square). */
+    itemAspectRatio?: number;
+    /** Optional floor on each card's width (px). No default. */
+    itemMinWidth?: number;
+    /** Optional floor on each card's height (px). No default. */
+    itemMinHeight?: number;
+};
+type PictureSelectorProps = PictureSelectorOwnProps & Omit<ViewProps, keyof PictureSelectorOwnProps>;
+/**
+ * A horizontal group of image/illustration buttons where one is selectable at
+ * a time. When the selected item has `insightTitle`/`insightDescription`, a
+ * `MessageCard.Insight` (standalone variant) renders below the row with a
+ * pointer beneath the selected button linking the two. The pointer moves with
+ * the selection.
+ *
+ * By default each card fills the width of its flex item (`width: 100%`)
+ * and is square (`aspectRatio: 1`). Override with `itemWidth` for a fixed
+ * width, `itemAspectRatio` for a non-square shape, and `itemMinWidth` /
+ * `itemMinHeight` for per-dim minimum floors.
+ *
+ * @param {string} [label] - Optional headline above the row.
+ * @param {PictureSelectorItem[]} items - 3 or 4 items to choose between.
+ * @param {string} [value] - Controlled selected value.
+ * @param {string} [defaultValue] - Uncontrolled initial selected value.
+ * @param {(value: string) => void} [onValueChange] - Fires when selection changes.
+ * @param {number} [itemWidth] - Fixed card width (px). Defaults to `100%`.
+ * @param {number} [itemAspectRatio=1] - Card aspect ratio (width / height).
+ * @param {number} [itemMinWidth] - Optional override for the card's min-width.
+ *   Defaults to `pictureButton.size.minWidth` (80px).
+ * @param {number} [itemMinHeight] - Optional override for the card's min-height.
+ *   Defaults to `pictureButton.size.minHeight` (120px).
+ */
+declare const PictureSelector: React.ForwardRefExoticComponent<PictureSelectorOwnProps & Omit<ViewProps, keyof PictureSelectorOwnProps> & React.RefAttributes<View>>;
+
+export { Accordion, type AccordionItemProps, type AccordionProps, type AccordionSize, Animated, type AnimatedProps, type AnimatedVariant, Avatar, type AvatarFallbackType, type AvatarProps, type AvatarSize, BRAND_FONTS, Badge, type BadgeProps, Button, type ButtonColour, ButtonDock, type ButtonDockProps, type ButtonDockVariant, ButtonGroup, type ButtonGroupLayout, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, CarouselControls, type CarouselControlsProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxVariant, CopyField, CopyFieldInput, type CopyFieldProps, type DateItemState, DatePicker, type DatePickerProps, Drawer, type DrawerBodyProps, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerGrabberProps, type DrawerHeaderProps, type DrawerHeaderVariant, type DrawerOverlayProps, type DrawerProps, type DrawerTitleProps, type DrawerTriggerProps, FilterTab, type FilterTabItemProps, type FilterTabProps, Hint, type HintProps, Icon, IconButton, type IconButtonColour, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconCategory, type IconColour, type IconProps, type IconSize, Illustration, type IllustrationProps, type IllustrationSize, Input, InputDescription, type InputDescriptionProps, InputError, type InputErrorProps, InputField, type InputFieldProps, InputLabel, type InputLabelProps, type InputProps, Link, type LinkProps, type LinkSize, type LinkWeight, Logo, type LogoBrand, type LogoProps, type LogoSvgComponent, type LogoVariant, MessageCard, MessageCardBanner, type MessageCardBannerMedia, type MessageCardBannerProps, MessageCardInsight, type MessageCardInsightProps, Notification, type NotificationProps, NumberField, type NumberFieldProps, NumberInput, NumberInputField, type NumberInputFieldProps, type NumberInputProps, PasswordField, PasswordFieldInput, type PasswordFieldProps, PasswordFieldRequirements, type PasswordFieldRequirementsProps, type PasswordRequirement, type PasswordValidationRule, type PawprintIcon, type PawprintIllustration$2 as PawprintIllustration, PawprintProvider, type PawprintProviderProps, PictureSelector, type PictureSelectorItem, type PictureSelectorProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioOwnProps, type RadioProps, SearchField, SearchFieldInput, type SearchFieldProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectField, SelectFieldContent, SelectFieldItem, type SelectFieldItemProps, type SelectFieldProps, SelectFieldTrigger, type SelectFieldTriggerProps, SelectFieldValue, type SelectValidationRule, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, type SpinnerVariant, Switch, type SwitchProps, Tag, type TagProps, TextArea, TextAreaField, type TextAreaFieldProps, TextAreaLabel, type TextAreaLabelProps, type TextAreaProps, ThemeProvider, Tooltip, type TooltipProps, Typography, type TypographyProps, createPawprintTheme, fadeAnimation, fadeDownAnimation, fadeUpAnimation, registerLogo, resolveFont, resolveLogo, scaleAnimation, slideInAnimation, slideOutAnimation, theme, useCopyField, usePasswordField, usePawprint, useSearchField, useSelectField };