@butternutbox/pawprint-native 0.3.2 → 0.4.1

package/dist/index.d.cts

@@ -279,8 +279,8 @@ type UnpinnedBadgeProps = BaseBadgeProps & {
     top?: never;
     bottom?: never;
 };
-type BadgeOwnProps = PinnedBadgeProps | UnpinnedBadgeProps;
-type BadgeProps = BadgeOwnProps & Omit<ViewProps, keyof BadgeOwnProps>;
+type BadgeOwnProps$1 = PinnedBadgeProps | UnpinnedBadgeProps;
+type BadgeProps = BadgeOwnProps$1 & Omit<ViewProps, keyof BadgeOwnProps$1>;
 /**
  * Badge component for displaying labels with optional icons.
  * Used to highlight status, categories, or notifications.
@@ -302,7 +302,7 @@ type BadgeProps = BadgeOwnProps & Omit<ViewProps, keyof BadgeOwnProps>;
  *   <Badge variant="promo" pinned top={16}>Special</Badge>
  * </View>
  */
-declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<View>>;
+declare const Badge$1: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<View>>;
 
 type ButtonVariant = "filled" | "outlined" | "text";
 type ButtonSize = "sm" | "md" | "lg";
@@ -804,12 +804,21 @@ type AnimatedProps = {
      * ```
      */
     delay?: number;
+    /**
+     * Whether to play the exit animation when the component unmounts. Defaults
+     * to `true`. Set to `false` for an enter-only animation — useful when a
+     * parent unmounts the element directly (e.g. tab panels). Mirrors the web
+     * `Animated`, whose exit only runs inside `AnimatePresence`.
+     */
+    exit?: boolean;
 } & 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).
+ * component needed (unlike `AnimatePresence` on web). Pass `exit={false}` for
+ * an enter-only animation (matching the web default, where exit requires
+ * `AnimatePresence`).
  *
  * Respects the OS reduce-motion setting automatically — Reanimated builders
  * default to `ReduceMotion.System` so no extra hook is needed.
@@ -863,6 +872,13 @@ declare const Animated: React.ForwardRefExoticComponent<{
      * ```
      */
     delay?: number;
+    /**
+     * Whether to play the exit animation when the component unmounts. Defaults
+     * to `true`. Set to `false` for an enter-only animation — useful when a
+     * parent unmounts the element directly (e.g. tab panels). Mirrors the web
+     * `Animated`, whose exit only runs inside `AnimatePresence`.
+     */
+    exit?: boolean;
 } & ViewProps & React.RefAttributes<View>>;
 
 type DrawerHeaderVariant = "titleAndText" | "image" | "fullBleed";
@@ -1875,4 +1891,235 @@ type PictureSelectorProps = PictureSelectorOwnProps & Omit<ViewProps, keyof Pict
  */
 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 };
+type CountdownLayout = "stacked" | "inline";
+type CountdownOwnProps = {
+    layout?: CountdownLayout;
+    days?: number;
+    hours?: number;
+    minutes?: number;
+    seconds?: number;
+    showDays?: boolean;
+    showSeconds?: boolean;
+    label?: React.ReactNode;
+};
+type CountdownProps = CountdownOwnProps & Omit<ViewProps, keyof CountdownOwnProps>;
+/**
+ * Displays the remaining time until an event, deadline, or expiry. Purely
+ * presentational — the consuming app computes the remaining time and passes
+ * the discrete `days`/`hours`/`minutes`/`seconds` values.
+ *
+ * Two layouts:
+ * - `stacked` — each unit sits in its own styled container (brand fill) with
+ *   the value above the label, separated by colons. Best for heroes, checkout
+ *   screens, and promotional cards.
+ * - `inline` — a single condensed banner with a customizable prefix `label`
+ *   followed by the time string on one line. Best for notification banners,
+ *   sticky footers, and dense UI.
+ *
+ * Units can be toggled to scale across timeframes: hide `days` when under
+ * 24 hours remain (`showDays={false}`) and hide `seconds` to reduce visual
+ * noise (`showSeconds={false}`). Toggling a unit also removes its separator.
+ * Hours and minutes are always shown.
+ *
+ * Note: API parity with the web `Countdown`. Unlike the web version, the
+ * native root is a `View` and px token strings are parsed to numbers.
+ *
+ * @param {"stacked" | "inline"} [layout="stacked"] - Visual layout.
+ * @param {number} [days=0] - Days remaining (zero-padded to 2 digits).
+ * @param {number} [hours=0] - Hours remaining (zero-padded to 2 digits).
+ * @param {number} [minutes=0] - Minutes remaining (zero-padded to 2 digits).
+ * @param {number} [seconds=0] - Seconds remaining (zero-padded to 2 digits).
+ * @param {boolean} [showDays=true] - Whether to render the days unit and its separator.
+ * @param {boolean} [showSeconds=true] - Whether to render the seconds unit and its separator.
+ * @param {React.ReactNode} [label] - Customizable prefix label, rendered in the `inline` layout only.
+ *
+ * @example
+ * ```tsx
+ * import { Countdown } from "@butternutbox/pawprint-native"
+ *
+ * <Countdown layout="stacked" days={2} hours={9} minutes={48} seconds={38} />
+ * <Countdown layout="inline" label="Sale ends:" showDays={false} hours={3} minutes={49} seconds={38} />
+ * ```
+ */
+declare const Countdown: React.ForwardRefExoticComponent<CountdownOwnProps & Omit<ViewProps, keyof CountdownOwnProps> & React.RefAttributes<View>>;
+
+type BadgeOwnProps = {
+    icon?: React.ReactNode;
+    text: React.ReactNode;
+};
+declare const Badge: React.ForwardRefExoticComponent<BadgeOwnProps & Omit<ViewProps, keyof BadgeOwnProps> & React.RefAttributes<View>>;
+
+type ProductListingCardGridOwnProps = {
+    children: React.ReactNode;
+    xs?: number;
+    md?: number;
+    lg?: number;
+};
+declare const Grid: React.ForwardRefExoticComponent<ProductListingCardGridOwnProps & Omit<ViewProps, keyof ProductListingCardGridOwnProps> & React.RefAttributes<View>>;
+
+type ProductListingCardOwnProps = {
+    image?: ImageSourcePropType;
+    imageAlt?: string;
+    badge?: React.ReactNode;
+    category?: string;
+    title?: string;
+    size?: string;
+    price?: string;
+    wasPrice?: string;
+    showBadge?: boolean;
+    showCategory?: boolean;
+    showTitle?: boolean;
+    showSize?: boolean;
+    showPrice?: boolean;
+    onPress?: () => void;
+};
+type ProductListingCardProps = ProductListingCardOwnProps & Omit<PressableProps, keyof ProductListingCardOwnProps>;
+declare const _ProductListingCard: React.ForwardRefExoticComponent<ProductListingCardOwnProps & Omit<PressableProps, keyof ProductListingCardOwnProps> & React.RefAttributes<View>>;
+declare const ProductListingCardWithBadgeAndGrid: typeof _ProductListingCard & {
+    Badge: typeof Badge;
+    Grid: typeof Grid;
+};
+
+type ProductDisplayCardDevice = "desktop" | "mobile";
+type ProductDisplayCardProps = ViewProps & {
+    device?: ProductDisplayCardDevice;
+    title: string;
+    subtext?: string | React.ReactNode;
+    showSubtext?: boolean;
+    quantity?: number;
+    onQuantityChange?: (quantity: number) => void;
+    showQuantityPicker?: boolean;
+    disableQuantityButtons?: boolean;
+    hideQuantityButtons?: boolean;
+    showIncrementButton?: boolean;
+    showDecrementButton?: boolean;
+    incrementDisabled?: boolean;
+    decrementDisabled?: boolean;
+    image?: string | React.ReactNode;
+    imageBackgroundColor?: string;
+    showImageQuantityBadge?: boolean;
+    banner?: React.ReactNode;
+    showBanner?: boolean;
+    bannerType?: "error" | "success" | "warning" | "info";
+    showBannerIcon?: boolean;
+};
+/**
+ * Product Display Card component for showing product information with optional quantity picker.
+ *
+ * @example
+ * ```tsx
+ * import { ProductDisplayCard } from "@butternutbox/pawprint-native"
+ *
+ * <ProductDisplayCard
+ *   device="mobile"
+ *   title="Premium Recipe"
+ *   subtext="+£0.00/pouch"
+ *   quantity={1}
+ *   showQuantityPicker
+ * />
+ * ```
+ *
+ * @param device - *(optional)* Device variant: "desktop" or "mobile" (default)
+ * @param title - Product title
+ * @param subtext - *(optional)* Subtitle text or JSX element (e.g. price)
+ * @param showSubtext - *(optional)* Show/hide subtext
+ * @param quantity - *(optional)* Current quantity value
+ * @param onQuantityChange - *(optional)* Callback when quantity changes
+ * @param showQuantityPicker - *(optional)* Show/hide quantity picker
+ * @param image - *(optional)* Image URL string or React element/JSX content
+ * @param imageBackgroundColor - *(optional)* Background color for image container (default: theme background.container.secondary)
+ * @param showImageQuantityBadge - *(optional)* Show/hide quantity badge overlay on image
+ * @param banner - *(optional)* Banner content to show below card
+ * @param showBanner - *(optional)* Show/hide banner
+ * @param bannerType - *(optional)* Banner notification type: "error", "success", "warning", or "info" (default)
+ * @param showBannerIcon - *(optional)* Show/hide banner notification icon
+ */
+declare const ProductDisplayCard: React.ForwardRefExoticComponent<ViewProps & {
+    device?: ProductDisplayCardDevice;
+    title: string;
+    subtext?: string | React.ReactNode;
+    showSubtext?: boolean;
+    quantity?: number;
+    onQuantityChange?: (quantity: number) => void;
+    showQuantityPicker?: boolean;
+    disableQuantityButtons?: boolean;
+    hideQuantityButtons?: boolean;
+    showIncrementButton?: boolean;
+    showDecrementButton?: boolean;
+    incrementDisabled?: boolean;
+    decrementDisabled?: boolean;
+    image?: string | React.ReactNode;
+    imageBackgroundColor?: string;
+    showImageQuantityBadge?: boolean;
+    banner?: React.ReactNode;
+    showBanner?: boolean;
+    bannerType?: "error" | "success" | "warning" | "info";
+    showBannerIcon?: boolean;
+} & React.RefAttributes<View>>;
+
+type TabNavigationLayout = "fixed" | "intrinsic";
+type TabNavigationOwnProps = {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    layout?: TabNavigationLayout;
+    animation?: AnimatedVariant;
+    children?: React.ReactNode;
+};
+type TabNavigationProps = TabNavigationOwnProps & Omit<ViewProps, keyof TabNavigationOwnProps>;
+type TabNavigationListOwnProps = {
+    children?: React.ReactNode;
+};
+type TabNavigationListProps = TabNavigationListOwnProps & Omit<ViewProps, keyof TabNavigationListOwnProps>;
+type TabNavigationTabOwnProps = {
+    value: string;
+    disabled?: boolean;
+    children: React.ReactNode;
+};
+type TabNavigationTabProps = TabNavigationTabOwnProps & Omit<ViewProps, keyof TabNavigationTabOwnProps>;
+type TabNavigationPanelOwnProps = {
+    value: string;
+    children?: React.ReactNode;
+};
+type TabNavigationPanelProps = TabNavigationPanelOwnProps & Omit<ViewProps, keyof TabNavigationPanelOwnProps>;
+/**
+ * Wraps the tab buttons. In `fixed` layout the tabs share the available width
+ * equally; in `intrinsic` layout the tabs size to their content and the list
+ * scrolls horizontally when they overflow.
+ *
+ * Must be used within a `TabNavigation` component.
+ */
+declare const TabNavigationList: React.ForwardRefExoticComponent<TabNavigationListOwnProps & Omit<ViewProps, "children"> & React.RefAttributes<View>>;
+/**
+ * An individual tab button within a `TabNavigation`. Selected tabs render with
+ * a brand bottom border and bold label; unselected tabs use a neutral border
+ * and semibold label. Disabled tabs are muted and non-interactive.
+ *
+ * Wraps `@rn-primitives/tabs` `Trigger` for accessibility (role, selected and
+ * disabled state). Unlike the web version there are no hover or focus-visible
+ * states (not applicable on mobile).
+ *
+ * @param {string} value - Unique identifier; matches the `value` of a `TabNavigation.Panel`.
+ * @param {boolean} [disabled=false] - Whether this tab is disabled.
+ * @param {React.ReactNode} children - Tab label (and optional leading content).
+ */
+declare const TabNavigationTab: React.ForwardRefExoticComponent<TabNavigationTabOwnProps & Omit<ViewProps, keyof TabNavigationTabOwnProps> & React.RefAttributes<View>>;
+/**
+ * Content area shown when the tab with the matching `value` is selected. Wraps
+ * `@rn-primitives/tabs` `Content` (which unmounts the inactive panels) and
+ * animates the content with the `Animated` atom (variant set by the parent
+ * `TabNavigation`'s `animation` prop). The enter animation replays each time
+ * the tab becomes active.
+ *
+ * @param {string} value - Matches the `value` of a `TabNavigation.Tab`.
+ * @param {React.ReactNode} [children] - Panel content.
+ */
+declare const TabNavigationPanel: React.ForwardRefExoticComponent<TabNavigationPanelOwnProps & Omit<ViewProps, keyof TabNavigationPanelOwnProps> & React.RefAttributes<View>>;
+type TabNavigationComponent = React.ForwardRefExoticComponent<TabNavigationProps & React.RefAttributes<View>> & {
+    List: typeof TabNavigationList;
+    Tab: typeof TabNavigationTab;
+    Panel: typeof TabNavigationPanel;
+};
+declare const TabNavigation: TabNavigationComponent;
+
+export { Accordion, type AccordionItemProps, type AccordionProps, type AccordionSize, Animated, type AnimatedProps, type AnimatedVariant, Avatar, type AvatarFallbackType, type AvatarProps, type AvatarSize, BRAND_FONTS, Badge$1 as 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, Countdown, type CountdownProps, 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, ProductDisplayCard, type ProductDisplayCardDevice, type ProductDisplayCardProps, ProductListingCardWithBadgeAndGrid as ProductListingCard, type ProductListingCardProps, 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, TabNavigation, type TabNavigationListProps, type TabNavigationPanelProps, type TabNavigationProps, type TabNavigationTabProps, 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 };

package/dist/index.d.ts

@@ -279,8 +279,8 @@ type UnpinnedBadgeProps = BaseBadgeProps & {
     top?: never;
     bottom?: never;
 };
-type BadgeOwnProps = PinnedBadgeProps | UnpinnedBadgeProps;
-type BadgeProps = BadgeOwnProps & Omit<ViewProps, keyof BadgeOwnProps>;
+type BadgeOwnProps$1 = PinnedBadgeProps | UnpinnedBadgeProps;
+type BadgeProps = BadgeOwnProps$1 & Omit<ViewProps, keyof BadgeOwnProps$1>;
 /**
  * Badge component for displaying labels with optional icons.
  * Used to highlight status, categories, or notifications.
@@ -302,7 +302,7 @@ type BadgeProps = BadgeOwnProps & Omit<ViewProps, keyof BadgeOwnProps>;
  *   <Badge variant="promo" pinned top={16}>Special</Badge>
  * </View>
  */
-declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<View>>;
+declare const Badge$1: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<View>>;
 
 type ButtonVariant = "filled" | "outlined" | "text";
 type ButtonSize = "sm" | "md" | "lg";
@@ -804,12 +804,21 @@ type AnimatedProps = {
      * ```
      */
     delay?: number;
+    /**
+     * Whether to play the exit animation when the component unmounts. Defaults
+     * to `true`. Set to `false` for an enter-only animation — useful when a
+     * parent unmounts the element directly (e.g. tab panels). Mirrors the web
+     * `Animated`, whose exit only runs inside `AnimatePresence`.
+     */
+    exit?: boolean;
 } & 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).
+ * component needed (unlike `AnimatePresence` on web). Pass `exit={false}` for
+ * an enter-only animation (matching the web default, where exit requires
+ * `AnimatePresence`).
  *
  * Respects the OS reduce-motion setting automatically — Reanimated builders
  * default to `ReduceMotion.System` so no extra hook is needed.
@@ -863,6 +872,13 @@ declare const Animated: React.ForwardRefExoticComponent<{
      * ```
      */
     delay?: number;
+    /**
+     * Whether to play the exit animation when the component unmounts. Defaults
+     * to `true`. Set to `false` for an enter-only animation — useful when a
+     * parent unmounts the element directly (e.g. tab panels). Mirrors the web
+     * `Animated`, whose exit only runs inside `AnimatePresence`.
+     */
+    exit?: boolean;
 } & ViewProps & React.RefAttributes<View>>;
 
 type DrawerHeaderVariant = "titleAndText" | "image" | "fullBleed";
@@ -1875,4 +1891,235 @@ type PictureSelectorProps = PictureSelectorOwnProps & Omit<ViewProps, keyof Pict
  */
 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 };
+type CountdownLayout = "stacked" | "inline";
+type CountdownOwnProps = {
+    layout?: CountdownLayout;
+    days?: number;
+    hours?: number;
+    minutes?: number;
+    seconds?: number;
+    showDays?: boolean;
+    showSeconds?: boolean;
+    label?: React.ReactNode;
+};
+type CountdownProps = CountdownOwnProps & Omit<ViewProps, keyof CountdownOwnProps>;
+/**
+ * Displays the remaining time until an event, deadline, or expiry. Purely
+ * presentational — the consuming app computes the remaining time and passes
+ * the discrete `days`/`hours`/`minutes`/`seconds` values.
+ *
+ * Two layouts:
+ * - `stacked` — each unit sits in its own styled container (brand fill) with
+ *   the value above the label, separated by colons. Best for heroes, checkout
+ *   screens, and promotional cards.
+ * - `inline` — a single condensed banner with a customizable prefix `label`
+ *   followed by the time string on one line. Best for notification banners,
+ *   sticky footers, and dense UI.
+ *
+ * Units can be toggled to scale across timeframes: hide `days` when under
+ * 24 hours remain (`showDays={false}`) and hide `seconds` to reduce visual
+ * noise (`showSeconds={false}`). Toggling a unit also removes its separator.
+ * Hours and minutes are always shown.
+ *
+ * Note: API parity with the web `Countdown`. Unlike the web version, the
+ * native root is a `View` and px token strings are parsed to numbers.
+ *
+ * @param {"stacked" | "inline"} [layout="stacked"] - Visual layout.
+ * @param {number} [days=0] - Days remaining (zero-padded to 2 digits).
+ * @param {number} [hours=0] - Hours remaining (zero-padded to 2 digits).
+ * @param {number} [minutes=0] - Minutes remaining (zero-padded to 2 digits).
+ * @param {number} [seconds=0] - Seconds remaining (zero-padded to 2 digits).
+ * @param {boolean} [showDays=true] - Whether to render the days unit and its separator.
+ * @param {boolean} [showSeconds=true] - Whether to render the seconds unit and its separator.
+ * @param {React.ReactNode} [label] - Customizable prefix label, rendered in the `inline` layout only.
+ *
+ * @example
+ * ```tsx
+ * import { Countdown } from "@butternutbox/pawprint-native"
+ *
+ * <Countdown layout="stacked" days={2} hours={9} minutes={48} seconds={38} />
+ * <Countdown layout="inline" label="Sale ends:" showDays={false} hours={3} minutes={49} seconds={38} />
+ * ```
+ */
+declare const Countdown: React.ForwardRefExoticComponent<CountdownOwnProps & Omit<ViewProps, keyof CountdownOwnProps> & React.RefAttributes<View>>;
+
+type BadgeOwnProps = {
+    icon?: React.ReactNode;
+    text: React.ReactNode;
+};
+declare const Badge: React.ForwardRefExoticComponent<BadgeOwnProps & Omit<ViewProps, keyof BadgeOwnProps> & React.RefAttributes<View>>;
+
+type ProductListingCardGridOwnProps = {
+    children: React.ReactNode;
+    xs?: number;
+    md?: number;
+    lg?: number;
+};
+declare const Grid: React.ForwardRefExoticComponent<ProductListingCardGridOwnProps & Omit<ViewProps, keyof ProductListingCardGridOwnProps> & React.RefAttributes<View>>;
+
+type ProductListingCardOwnProps = {
+    image?: ImageSourcePropType;
+    imageAlt?: string;
+    badge?: React.ReactNode;
+    category?: string;
+    title?: string;
+    size?: string;
+    price?: string;
+    wasPrice?: string;
+    showBadge?: boolean;
+    showCategory?: boolean;
+    showTitle?: boolean;
+    showSize?: boolean;
+    showPrice?: boolean;
+    onPress?: () => void;
+};
+type ProductListingCardProps = ProductListingCardOwnProps & Omit<PressableProps, keyof ProductListingCardOwnProps>;
+declare const _ProductListingCard: React.ForwardRefExoticComponent<ProductListingCardOwnProps & Omit<PressableProps, keyof ProductListingCardOwnProps> & React.RefAttributes<View>>;
+declare const ProductListingCardWithBadgeAndGrid: typeof _ProductListingCard & {
+    Badge: typeof Badge;
+    Grid: typeof Grid;
+};
+
+type ProductDisplayCardDevice = "desktop" | "mobile";
+type ProductDisplayCardProps = ViewProps & {
+    device?: ProductDisplayCardDevice;
+    title: string;
+    subtext?: string | React.ReactNode;
+    showSubtext?: boolean;
+    quantity?: number;
+    onQuantityChange?: (quantity: number) => void;
+    showQuantityPicker?: boolean;
+    disableQuantityButtons?: boolean;
+    hideQuantityButtons?: boolean;
+    showIncrementButton?: boolean;
+    showDecrementButton?: boolean;
+    incrementDisabled?: boolean;
+    decrementDisabled?: boolean;
+    image?: string | React.ReactNode;
+    imageBackgroundColor?: string;
+    showImageQuantityBadge?: boolean;
+    banner?: React.ReactNode;
+    showBanner?: boolean;
+    bannerType?: "error" | "success" | "warning" | "info";
+    showBannerIcon?: boolean;
+};
+/**
+ * Product Display Card component for showing product information with optional quantity picker.
+ *
+ * @example
+ * ```tsx
+ * import { ProductDisplayCard } from "@butternutbox/pawprint-native"
+ *
+ * <ProductDisplayCard
+ *   device="mobile"
+ *   title="Premium Recipe"
+ *   subtext="+£0.00/pouch"
+ *   quantity={1}
+ *   showQuantityPicker
+ * />
+ * ```
+ *
+ * @param device - *(optional)* Device variant: "desktop" or "mobile" (default)
+ * @param title - Product title
+ * @param subtext - *(optional)* Subtitle text or JSX element (e.g. price)
+ * @param showSubtext - *(optional)* Show/hide subtext
+ * @param quantity - *(optional)* Current quantity value
+ * @param onQuantityChange - *(optional)* Callback when quantity changes
+ * @param showQuantityPicker - *(optional)* Show/hide quantity picker
+ * @param image - *(optional)* Image URL string or React element/JSX content
+ * @param imageBackgroundColor - *(optional)* Background color for image container (default: theme background.container.secondary)
+ * @param showImageQuantityBadge - *(optional)* Show/hide quantity badge overlay on image
+ * @param banner - *(optional)* Banner content to show below card
+ * @param showBanner - *(optional)* Show/hide banner
+ * @param bannerType - *(optional)* Banner notification type: "error", "success", "warning", or "info" (default)
+ * @param showBannerIcon - *(optional)* Show/hide banner notification icon
+ */
+declare const ProductDisplayCard: React.ForwardRefExoticComponent<ViewProps & {
+    device?: ProductDisplayCardDevice;
+    title: string;
+    subtext?: string | React.ReactNode;
+    showSubtext?: boolean;
+    quantity?: number;
+    onQuantityChange?: (quantity: number) => void;
+    showQuantityPicker?: boolean;
+    disableQuantityButtons?: boolean;
+    hideQuantityButtons?: boolean;
+    showIncrementButton?: boolean;
+    showDecrementButton?: boolean;
+    incrementDisabled?: boolean;
+    decrementDisabled?: boolean;
+    image?: string | React.ReactNode;
+    imageBackgroundColor?: string;
+    showImageQuantityBadge?: boolean;
+    banner?: React.ReactNode;
+    showBanner?: boolean;
+    bannerType?: "error" | "success" | "warning" | "info";
+    showBannerIcon?: boolean;
+} & React.RefAttributes<View>>;
+
+type TabNavigationLayout = "fixed" | "intrinsic";
+type TabNavigationOwnProps = {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    layout?: TabNavigationLayout;
+    animation?: AnimatedVariant;
+    children?: React.ReactNode;
+};
+type TabNavigationProps = TabNavigationOwnProps & Omit<ViewProps, keyof TabNavigationOwnProps>;
+type TabNavigationListOwnProps = {
+    children?: React.ReactNode;
+};
+type TabNavigationListProps = TabNavigationListOwnProps & Omit<ViewProps, keyof TabNavigationListOwnProps>;
+type TabNavigationTabOwnProps = {
+    value: string;
+    disabled?: boolean;
+    children: React.ReactNode;
+};
+type TabNavigationTabProps = TabNavigationTabOwnProps & Omit<ViewProps, keyof TabNavigationTabOwnProps>;
+type TabNavigationPanelOwnProps = {
+    value: string;
+    children?: React.ReactNode;
+};
+type TabNavigationPanelProps = TabNavigationPanelOwnProps & Omit<ViewProps, keyof TabNavigationPanelOwnProps>;
+/**
+ * Wraps the tab buttons. In `fixed` layout the tabs share the available width
+ * equally; in `intrinsic` layout the tabs size to their content and the list
+ * scrolls horizontally when they overflow.
+ *
+ * Must be used within a `TabNavigation` component.
+ */
+declare const TabNavigationList: React.ForwardRefExoticComponent<TabNavigationListOwnProps & Omit<ViewProps, "children"> & React.RefAttributes<View>>;
+/**
+ * An individual tab button within a `TabNavigation`. Selected tabs render with
+ * a brand bottom border and bold label; unselected tabs use a neutral border
+ * and semibold label. Disabled tabs are muted and non-interactive.
+ *
+ * Wraps `@rn-primitives/tabs` `Trigger` for accessibility (role, selected and
+ * disabled state). Unlike the web version there are no hover or focus-visible
+ * states (not applicable on mobile).
+ *
+ * @param {string} value - Unique identifier; matches the `value` of a `TabNavigation.Panel`.
+ * @param {boolean} [disabled=false] - Whether this tab is disabled.
+ * @param {React.ReactNode} children - Tab label (and optional leading content).
+ */
+declare const TabNavigationTab: React.ForwardRefExoticComponent<TabNavigationTabOwnProps & Omit<ViewProps, keyof TabNavigationTabOwnProps> & React.RefAttributes<View>>;
+/**
+ * Content area shown when the tab with the matching `value` is selected. Wraps
+ * `@rn-primitives/tabs` `Content` (which unmounts the inactive panels) and
+ * animates the content with the `Animated` atom (variant set by the parent
+ * `TabNavigation`'s `animation` prop). The enter animation replays each time
+ * the tab becomes active.
+ *
+ * @param {string} value - Matches the `value` of a `TabNavigation.Tab`.
+ * @param {React.ReactNode} [children] - Panel content.
+ */
+declare const TabNavigationPanel: React.ForwardRefExoticComponent<TabNavigationPanelOwnProps & Omit<ViewProps, keyof TabNavigationPanelOwnProps> & React.RefAttributes<View>>;
+type TabNavigationComponent = React.ForwardRefExoticComponent<TabNavigationProps & React.RefAttributes<View>> & {
+    List: typeof TabNavigationList;
+    Tab: typeof TabNavigationTab;
+    Panel: typeof TabNavigationPanel;
+};
+declare const TabNavigation: TabNavigationComponent;
+
+export { Accordion, type AccordionItemProps, type AccordionProps, type AccordionSize, Animated, type AnimatedProps, type AnimatedVariant, Avatar, type AvatarFallbackType, type AvatarProps, type AvatarSize, BRAND_FONTS, Badge$1 as 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, Countdown, type CountdownProps, 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, ProductDisplayCard, type ProductDisplayCardDevice, type ProductDisplayCardProps, ProductListingCardWithBadgeAndGrid as ProductListingCard, type ProductListingCardProps, 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, TabNavigation, type TabNavigationListProps, type TabNavigationPanelProps, type TabNavigationProps, type TabNavigationTabProps, 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 };