@butternutbox/pawprint-native 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,780 @@
+import * as _butternutbox_pawprint_tokens from '@butternutbox/pawprint-tokens';
+import { TokensCorePrimitives, BrandThemeSemantics, BrandThemeComponents, BrandName, ThemeName, BrandThemeSemanticsColourText } from '@butternutbox/pawprint-tokens';
+export { tokens } from '@butternutbox/pawprint-tokens';
+import * as _emotion_native from '@emotion/native';
+export { default as styled } from '@emotion/native';
+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';
+
+declare module "@emotion/react" {
+    interface Theme {
+        tokens: {
+            primitives: TokensCorePrimitives;
+            semantics: BrandThemeSemantics;
+            components: BrandThemeComponents;
+        };
+        fontFaces?: string;
+    }
+    interface ThemeOptions {
+        tokens: Theme["tokens"];
+        fontFaces?: string;
+    }
+}
+
+declare const BRAND_FONTS: Partial<Record<BrandName, Record<string, FontSource>>>;
+declare const resolveFont: (fontFamily: string, fontWeight: string) => {
+    fontFamily: string;
+};
+
+interface PawprintProviderProps {
+    brand?: BrandName;
+    initialTheme?: ThemeName;
+    children: React.ReactNode;
+}
+declare const PawprintProvider: React.FC<PawprintProviderProps>;
+
+type ThemeContextType = {
+    brand: BrandName;
+    theme: ThemeName;
+    setTheme: (theme: ThemeName) => void;
+    emotionTheme: Theme;
+};
+type Props = {
+    brand?: BrandName;
+    initialTheme?: ThemeName;
+    children: React.ReactNode;
+};
+declare const ThemeProvider: ({ children, brand, initialTheme }: Props) => React.JSX.Element;
+declare const usePawprint: () => ThemeContextType;
+
+/**
+ * Creates a pawprint theme based on brand and theme name for React Native
+ *
+ * @param brand - The brand to use (butternutbox, marro, etc.)
+ * @param theme - The theme name to use (default, dark, etc.)
+ * @returns A theme object with the selected brand and theme options
+ */
+declare const createPawprintTheme: (brand?: BrandName, theme?: ThemeName) => Theme;
+
+declare const theme: _butternutbox_pawprint_tokens.Tokens;
+
+type AvatarSize = "sm" | "md" | "lg";
+type AvatarBorder = "none" | "sm" | "md";
+type AvatarFallbackType = "string" | "image";
+interface AvatarProps {
+    src?: string;
+    alt: string;
+    size?: AvatarSize;
+    border?: AvatarBorder;
+    fallbackType?: AvatarFallbackType;
+    fallbackString?: string;
+}
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<View>>;
+
+type BodySize = "xs" | "sm" | "md" | "lg";
+type HeadingSize = "2xs" | "xs" | "sm" | "md" | "lg" | "xl";
+type DisplaySize = "md" | "lg";
+type BodyWeight = "medium" | "semiBold" | "bold";
+type TextAlign = "left" | "right" | "center" | "justify";
+type TextTransform = "none" | "capitalize" | "uppercase" | "lowercase";
+type TextDecoration = "none" | "underline" | "line-through";
+type SemanticTextColorKey = Exclude<keyof BrandThemeSemanticsColourText, "link" | "action">;
+type FlattenTextColorValues<T> = T extends string ? T : T extends object ? {
+    [K in keyof T]: FlattenTextColorValues<T[K]>;
+}[keyof T] : never;
+type SemanticTextColorValue = FlattenTextColorValues<BrandThemeSemanticsColourText>;
+type NativeTypographyToken = {
+    fontFamily?: string;
+    fontWeight?: string;
+    fontSize?: string;
+    lineHeight?: string;
+    letterSpacing?: string;
+};
+type NativeTextProps = Omit<TextProps, "style">;
+type BodyVariant = {
+    variant?: "body";
+    size?: BodySize;
+    weight?: BodyWeight;
+};
+type HeadingVariant = {
+    variant: "heading";
+    size?: HeadingSize;
+    weight?: never;
+};
+type DisplayVariant = {
+    variant: "display";
+    size?: DisplaySize;
+    weight?: never;
+};
+type CommonProps = {
+    align?: TextAlign;
+    noWrap?: boolean;
+    textTransform?: TextTransform;
+    textDecoration?: TextDecoration;
+};
+type SemanticVariant = (BodyVariant | HeadingVariant | DisplayVariant) & {
+    color?: SemanticTextColorKey;
+    token?: never;
+} & CommonProps;
+type TokenVariant = {
+    token: NativeTypographyToken;
+    color?: SemanticTextColorValue;
+} & CommonProps;
+type TypographyProps = (SemanticVariant & NativeTextProps) | (TokenVariant & NativeTextProps);
+/**
+ * Typography component for body text, headings, and display copy.
+ * Styling and semantics only — no i18n concerns.
+ *
+ * **Semantic mode:**
+ * - `variant="body"` — 4 sizes (xs–lg), 3 weights.
+ * - `variant="heading"` — 6 sizes (2xs–xl), responsive (steps down one size on narrow screens).
+ * - `variant="display"` — 2 sizes (md/lg), responsive.
+ *
+ * **Token mode:**
+ * - `token` — Pass resolved typography token object from theme.tokens.components
+ *
+ * @param {"body" | "heading" | "display"} [variant="body"] - Text style variant.
+ * @param {"xs" | "sm" | "md" | "lg" | "2xs" | "xl"} [size="md"] - Size token. Available sizes depend on variant.
+ * @param {"medium" | "semiBold" | "bold"} [weight="medium"] - Font weight. Body only — heading and display have fixed weight.
+ * @param {NativeTypographyToken} [token] - Resolved typography token object (alternative to semantic props).
+ * @param {SemanticTextColorKey} [color] - Semantic text color key for semantic mode.
+ * @param {SemanticTextColorValue} [color] - Hex color string for token mode.
+ * @param {"left" | "right" | "center" | "justify"} [align] - Text alignment.
+ * @param {boolean} [noWrap] - If true, text is truncated to one line with an ellipsis.
+ * @param {"none" | "capitalize" | "uppercase" | "lowercase"} [textTransform] - Text transformation.
+ * @param {"none" | "underline" | "line-through"} [textDecoration] - Text decoration.
+ *
+ * @example
+ * // Semantic usage
+ * <Typography size="md" weight="semiBold">Body text</Typography>
+ * <Typography variant="heading" size="xl">Page title</Typography>
+ * <Typography variant="display" size="lg" color="secondary">Hero copy</Typography>
+ *
+ * // Token usage (for component-owned text)
+ * <Typography
+ *   token={theme.tokens.components.checkbox.typography.label}
+ *   color={theme.tokens.components.checkbox.colour.text.title}
+ * >
+ *   Accept terms
+ * </Typography>
+ */
+declare const Typography: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<Text>>;
+
+type IconCategory = "core" | "marketing" | "payments" | "flags";
+type IconSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+type IconColour = "primary" | "secondary" | "disabled" | "success" | "warning" | "error" | "promo" | "info" | "alt" | "action-default" | "action-inverse";
+type PawprintIcon = React.ComponentType<{
+    width?: number;
+    height?: number;
+    color?: string;
+}> & {
+    category?: IconCategory;
+};
+type IconOwnProps = {
+    icon: PawprintIcon;
+    size?: IconSize;
+    colour?: IconColour;
+    "aria-label"?: string;
+};
+type IconProps = IconOwnProps & Omit<ViewProps, keyof IconOwnProps>;
+/**
+ * Renders an SVG icon with token-based sizing and colour.
+ *
+ * @example
+ * ```tsx
+ * import { Icon } from "@butternutbox/pawprint-native"
+ * import { ArrowRight } from "@butternutbox/pawprint-icons/core"
+ *
+ * <Icon icon={ArrowRight} size="md" colour="primary" aria-label="Go forward" />
+ * ```
+ *
+ * @param icon - **(required)** Icon component from `@butternutbox/pawprint-icons/{category}`
+ * @param size - *(optional)* Size variant: xs, sm, md (default), lg, xl, 2xl
+ * @param colour - *(optional)* Colour variant from semantic icon tokens (default: primary)
+ * @param aria-label - *(optional)* Accessible label; omit for decorative icons
+ */
+declare const Icon: React.ForwardRefExoticComponent<IconOwnProps & Omit<ViewProps, keyof IconOwnProps> & React.RefAttributes<View>>;
+
+type BadgeVariant = "primary" | "promo" | "success" | "warning" | "error";
+type BadgeSize = "small" | "medium" | "large";
+type BaseBadgeProps = {
+    children: React.ReactNode;
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    icon?: PawprintIcon;
+};
+type PinnedBadgeProps = BaseBadgeProps & {
+    pinned: true;
+    top?: number;
+    bottom?: number;
+};
+type UnpinnedBadgeProps = BaseBadgeProps & {
+    pinned?: false;
+    top?: never;
+    bottom?: never;
+};
+type BadgeOwnProps = PinnedBadgeProps | UnpinnedBadgeProps;
+type BadgeProps = BadgeOwnProps & Omit<ViewProps, keyof BadgeOwnProps>;
+/**
+ * Badge component for displaying labels with optional icons.
+ * Used to highlight status, categories, or notifications.
+ *
+ * @param {React.ReactNode} children - Badge label text.
+ * @param {"primary" | "promo" | "success" | "warning" | "error"} [variant="primary"] - Visual style variant.
+ * @param {"small" | "medium" | "large"} [size="medium"] - Size of the badge.
+ * @param {boolean} [pinned=false] - If true, applies pinned styling and positions absolutely to the left edge.
+ * @param {PawprintIcon} [icon] - Optional icon from @butternutbox/pawprint-icons.
+ * @param {number} [top] - Top position when pinned.
+ * @param {number} [bottom] - Bottom position when pinned.
+ *
+ * @example
+ * <Badge>New</Badge>
+ * <Badge variant="success" size="large" icon={CheckCircle}>Verified</Badge>
+ *
+ * @example
+ * <View style={{ position: "relative" }}>
+ *   <Badge variant="promo" pinned top={16}>Special</Badge>
+ * </View>
+ */
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<View>>;
+
+type ButtonVariant = "filled" | "outlined" | "text";
+type ButtonSize = "sm" | "md" | "lg";
+type ButtonColour = "primary" | "secondary";
+type ButtonOwnProps = {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    colour?: ButtonColour;
+    loading?: boolean;
+    fullWidth?: boolean;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    children?: React.ReactNode;
+};
+type ButtonProps = ButtonOwnProps & Omit<PressableProps, keyof ButtonOwnProps | "children">;
+/**
+ * A button component with token-based styling.
+ *
+ * Supports `filled` (default), `outlined`, and `text` variants.
+ *
+ * @example
+ * ```tsx
+ * import { Button } from "@butternutbox/pawprint-native"
+ *
+ * <Button variant="filled" colour="primary" size="md">Click me</Button>
+ * <Button variant="text">Text button</Button>
+ * ```
+ *
+ * @param variant - *(optional)* Visual variant: filled (default), outlined, or text.
+ * @param size - *(optional)* Size variant: sm, md (default), lg
+ * @param colour - *(optional)* Colour variant: primary (default), secondary
+ * @param loading - *(optional)* Shows spinner and disables interaction
+ * @param fullWidth - *(optional)* Stretches button to fill its container
+ * @param startIcon - *(optional)* Leading icon element
+ * @param endIcon - *(optional)* Trailing icon element
+ */
+declare const Button: React.ForwardRefExoticComponent<ButtonOwnProps & Omit<PressableProps, keyof ButtonOwnProps> & React.RefAttributes<View>>;
+
+type HintVariant = "default" | "success" | "warning" | "error";
+type HintOwnProps = {
+    variant?: HintVariant;
+};
+type HintProps = HintOwnProps & Omit<ViewProps, keyof HintOwnProps>;
+/**
+ * Hint component for displaying notification indicators.
+ * A small circular dot used to draw attention or indicate status.
+ *
+ * @param {"default" | "success" | "warning" | "error"} [variant="default"] - Visual style variant.
+ *
+ * @example
+ * <Hint variant="success" />
+ * <Hint variant="error" />
+ */
+declare const Hint: React.ForwardRefExoticComponent<HintOwnProps & Omit<ViewProps, "variant"> & React.RefAttributes<View>>;
+
+type IconButtonVariant = "filled" | "outlined" | "text";
+type IconButtonSize = "sm" | "md" | "lg";
+type IconButtonColour = "primary" | "secondary" | "tertiary";
+type IconButtonOwnProps = {
+    icon: PawprintIcon;
+    variant?: IconButtonVariant;
+    size?: IconButtonSize;
+    colour?: IconButtonColour;
+    loading?: boolean;
+    disabled?: boolean;
+    "aria-label": string;
+};
+type IconButtonProps = IconButtonOwnProps & Omit<PressableProps, keyof IconButtonOwnProps | "children">;
+/**
+ * A circular icon-only button with token-based styling.
+ *
+ * @example
+ * ```tsx
+ * import { IconButton } from "@butternutbox/pawprint-native"
+ * import { Add } from "@butternutbox/pawprint-icons/core"
+ *
+ * <IconButton icon={Add} aria-label="Add item" />
+ * <IconButton icon={Add} variant="outlined" aria-label="Add item" />
+ * ```
+ *
+ * @param icon - **(required)** Icon component
+ * @param variant - *(optional)* Visual variant: filled (default), outlined, or text.
+ * @param size - *(optional)* Size variant: sm, md (default), lg
+ * @param colour - *(optional)* Colour variant: primary (default), secondary, tertiary
+ * @param loading - *(optional)* Shows spinner and disables interaction
+ * @param aria-label - **(required)** Accessible label for the button
+ */
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonOwnProps & Omit<PressableProps, "children" | keyof IconButtonOwnProps> & React.RefAttributes<View>>;
+
+type IllustrationSize = "sm" | "lg";
+type PawprintIllustration = React.ComponentType<{
+    width?: number;
+    height?: number;
+}>;
+type IllustrationOwnProps = {
+    illustration: PawprintIllustration;
+    size?: IllustrationSize;
+    "aria-label"?: string;
+};
+type IllustrationProps = IllustrationOwnProps & Omit<ViewProps, keyof IllustrationOwnProps>;
+/**
+ * Renders a multi-colour SVG illustration with token-based sizing.
+ *
+ * @example
+ * ```tsx
+ * import { Illustration } from "@butternutbox/pawprint-native"
+ * import { DogSittingFilled } from "@butternutbox/pawprint-illustrations/poses"
+ *
+ * <Illustration illustration={DogSittingFilled} size="sm" aria-label="Dog sitting" />
+ * ```
+ *
+ * @param illustration - **(required)** Illustration component
+ * @param size - *(optional)* Size variant: sm (default), lg
+ * @param aria-label - *(optional)* Accessible label
+ */
+declare const Illustration: React.ForwardRefExoticComponent<IllustrationOwnProps & Omit<ViewProps, keyof IllustrationOwnProps> & React.RefAttributes<View>>;
+
+type InputState = "default" | "error" | "success";
+type InputFieldOwnProps = {
+    leadingIcon?: React.ReactNode;
+    trailingIcon?: React.ReactNode;
+    state?: InputState;
+};
+type InputFieldProps = InputFieldOwnProps & Omit<TextInputProps, keyof InputFieldOwnProps>;
+/**
+ * InputField component - The input field wrapper with icons and visual states.
+ *
+ * @param {React.ReactNode} [leadingIcon] - Icon to display before the input
+ * @param {React.ReactNode} [trailingIcon] - Icon to display after the input
+ * @param {InputState} [state] - Visual state of the input (default, error, success)
+ */
+declare const InputField: React.ForwardRefExoticComponent<InputFieldOwnProps & Omit<TextInputProps, keyof InputFieldOwnProps> & React.RefAttributes<TextInput>>;
+
+type InputLabelOwnProps = {
+    optionalText?: string;
+    state?: InputState;
+    children: React.ReactNode;
+};
+type InputLabelProps = InputLabelOwnProps & Omit<ViewProps, keyof InputLabelOwnProps>;
+/**
+ * Label component for Input fields.
+ *
+ * @param optionalText - Optional text to display next to label (e.g., "(optional)")
+ * @param state - Visual state of the input (affects label color for error state)
+ * @param children - Label text content
+ */
+declare const InputLabel: React.ForwardRefExoticComponent<InputLabelOwnProps & Omit<ViewProps, keyof InputLabelOwnProps> & React.RefAttributes<View>>;
+
+type InputDescriptionOwnProps = {
+    state?: InputState;
+    children: React.ReactNode;
+};
+type InputDescriptionProps = InputDescriptionOwnProps & Omit<ViewProps, keyof InputDescriptionOwnProps>;
+/**
+ * Description/help text component for Input fields.
+ *
+ * @param state - Visual state of the input (affects description color for error state)
+ * @param children - Description text content
+ */
+declare const InputDescription: React.ForwardRefExoticComponent<InputDescriptionOwnProps & Omit<ViewProps, keyof InputDescriptionOwnProps> & React.RefAttributes<View>>;
+
+type InputErrorProps = {
+    children?: React.ReactNode;
+} & ViewProps;
+/**
+ * Error message component for Input fields.
+ *
+ * @param children - Error message text
+ */
+declare const InputError: React.ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+} & ViewProps & React.RefAttributes<View>>;
+
+type InputOwnProps = {
+    label?: string;
+    description?: string;
+    error?: string;
+    state?: InputState;
+    optionalText?: string;
+};
+type InputProps = InputOwnProps & Omit<InputFieldProps, keyof InputOwnProps> & Omit<ViewProps, keyof InputOwnProps>;
+declare const StyledRoot: _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;
+    Label: typeof InputLabel;
+    Field: typeof InputField;
+    Description: typeof InputDescription;
+    Error: typeof InputError;
+};
+declare const Input: InputComponent;
+
+type LinkSize = "sm" | "md" | "lg";
+type LinkWeight = "medium" | "semiBold" | "bold";
+type LinkOwnProps = {
+    weight?: LinkWeight;
+    standalone?: boolean;
+    size?: LinkSize;
+    disabled?: boolean;
+    href?: string;
+    children?: React.ReactNode;
+};
+type LinkProps = LinkOwnProps & Omit<PressableProps, keyof LinkOwnProps | "children">;
+/**
+ * Link component for navigational elements.
+ *
+ * - Inline (default) — underlined, inherits font size from surrounding context.
+ * - Standalone — includes a trailing arrow indicator.
+ *
+ * @param {"sm" | "md" | "lg"} [size="md"] - Size of standalone link text.
+ * @param {"medium" | "semiBold" | "bold"} [weight="semiBold"] - Font weight.
+ * @param {boolean} [standalone=false] - Renders with a trailing arrow.
+ * @param {boolean} [disabled=false] - Disables the link.
+ * @param {string} [href] - URL to open when pressed.
+ *
+ * @example
+ * <Link href="https://example.com" standalone>Find out more</Link>
+ */
+declare const Link: React.ForwardRefExoticComponent<LinkOwnProps & Omit<PressableProps, keyof LinkOwnProps> & React.RefAttributes<View>>;
+
+type LogoBrand = "butternut" | "psibufet" | "bcorp";
+type LogoVariant = "wordmark" | "primary" | "tabbed-top" | "tabbed-bottom" | "favicon";
+type LogoOwnProps = {
+    brand: LogoBrand;
+    variant?: LogoVariant;
+    "aria-label"?: string;
+};
+type LogoProps = LogoOwnProps & Omit<ViewProps, keyof LogoOwnProps>;
+/**
+ * Renders a brand logo SVG.
+ *
+ * @example
+ * ```tsx
+ * import { Logo } from "@butternutbox/pawprint-native"
+ *
+ * <Logo brand="butternut" variant="primary" aria-label="ButternutBox" />
+ * ```
+ *
+ * @param brand - **(required)** Brand: "butternut", "psibufet", or "bcorp"
+ * @param variant - *(optional)* Logo variant (default: "primary"). Ignored for "bcorp".
+ * @param aria-label - *(optional)* Accessible label
+ */
+declare const Logo: React.ForwardRefExoticComponent<LogoOwnProps & Omit<ViewProps, keyof LogoOwnProps> & React.RefAttributes<View>>;
+
+type LogoSvgComponent = React.ComponentType<{
+    width?: number;
+    height?: number;
+}>;
+declare function resolveLogo(brand: LogoBrand, variant: LogoVariant): LogoSvgComponent | undefined;
+declare function registerLogo(brand: LogoBrand, variant: LogoVariant, component: LogoSvgComponent): void;
+
+type SpinnerSize = "sm" | "md" | "lg";
+type SpinnerVariant = "dark" | "light";
+type SpinnerOwnProps = {
+    size?: SpinnerSize;
+    variant?: SpinnerVariant;
+};
+type SpinnerProps = SpinnerOwnProps & Omit<ViewProps, keyof SpinnerOwnProps>;
+/**
+ * A spinner component for indicating indeterminate loading states.
+ *
+ * @example
+ * ```tsx
+ * import { Spinner } from "@butternutbox/pawprint-native"
+ *
+ * <Spinner />
+ * <Spinner size="lg" variant="light" />
+ * ```
+ *
+ * @param size - *(optional)* Size variant: sm, md (default), lg
+ * @param variant - *(optional)* Colour variant: dark (default), light
+ */
+declare const Spinner: React.ForwardRefExoticComponent<SpinnerOwnProps & Omit<ViewProps, keyof SpinnerOwnProps> & React.RefAttributes<View>>;
+
+type SwitchOwnProps = {
+    label?: React.ReactNode;
+    subText?: React.ReactNode;
+    disabled?: boolean;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+};
+type SwitchProps = SwitchOwnProps & Omit<ViewProps, keyof SwitchOwnProps>;
+/**
+ * Switch component for toggling between two states, on and off.
+ *
+ * @param {React.ReactNode} [label] - Main label text or content.
+ * @param {React.ReactNode} [subText] - Optional descriptive subtext.
+ * @param {boolean} [disabled=false] - Whether the switch is disabled.
+ * @param {boolean} [checked] - Controlled checked state.
+ * @param {(checked: boolean) => void} [onCheckedChange] - Controlled change handler.
+ *
+ * @example
+ * <Switch label="SMS Delivery Notifications" subText="I want to receive SMS notifications" />
+ */
+declare const Switch: React.ForwardRefExoticComponent<SwitchOwnProps & Omit<ViewProps, keyof SwitchOwnProps> & React.RefAttributes<View>>;
+
+type TagVariant = "primary" | "secondary" | "tertiary" | "promo" | "success" | "warning" | "error";
+type TagSize = "small" | "medium" | "large";
+type TagOwnProps = {
+    children: React.ReactNode;
+    variant?: TagVariant;
+    size?: TagSize;
+    icon?: PawprintIcon;
+};
+type TagProps = TagOwnProps & Omit<ViewProps, keyof TagOwnProps>;
+/**
+ * Tag component for labelling and categorising content.
+ *
+ * @param {React.ReactNode} children - Tag label text.
+ * @param {"primary" | "secondary" | "tertiary" | "promo" | "success" | "warning" | "error"} [variant="primary"] - Visual style variant.
+ * @param {"small" | "medium" | "large"} [size="medium"] - Size of the tag.
+ * @param {PawprintIcon} [icon] - Optional leading icon from @butternutbox/pawprint-icons.
+ *
+ * @example
+ * <Tag>Company news</Tag>
+ * <Tag variant="success" size="large" icon={CheckCircle}>Verified</Tag>
+ */
+declare const Tag: React.ForwardRefExoticComponent<TagOwnProps & Omit<ViewProps, keyof TagOwnProps> & React.RefAttributes<View>>;
+
+type ButtonDockVariant = "stacked" | "inline";
+type ButtonDockOwnProps = {
+    variant?: ButtonDockVariant;
+    leadingContent?: React.ReactNode;
+    description?: React.ReactNode;
+};
+type ButtonDockProps = ButtonDockOwnProps & Omit<ViewProps, keyof ButtonDockOwnProps>;
+/**
+ * A layout container for action buttons, typically placed at the bottom of a
+ * page or section.
+ *
+ * @example
+ * ```tsx
+ * import { ButtonDock, Button } from "@butternutbox/pawprint-native"
+ *
+ * <ButtonDock variant="stacked" description="Helper text">
+ *   <Button fullWidth>Continue</Button>
+ *   <Button fullWidth variant="filled" colour="secondary">Back</Button>
+ * </ButtonDock>
+ * ```
+ *
+ * @param variant - *(optional)* Layout variant: stacked (default) or inline
+ * @param leadingContent - *(optional)* Content rendered above buttons (stacked only)
+ * @param description - *(optional)* Helper text rendered below buttons (stacked only)
+ */
+declare const ButtonDock: React.ForwardRefExoticComponent<ButtonDockOwnProps & Omit<ViewProps, keyof ButtonDockOwnProps> & React.RefAttributes<View>>;
+
+type ButtonGroupLayout = "stacked" | "inline";
+type ButtonGroupOwnProps = {
+    layout?: ButtonGroupLayout;
+    description?: React.ReactNode;
+    children: React.ReactNode;
+};
+type ButtonGroupProps = ButtonGroupOwnProps & Omit<ViewProps, keyof ButtonGroupOwnProps>;
+/**
+ * ButtonGroup arranges 1 or 2 buttons in a stacked or inline layout
+ * with an optional description below.
+ *
+ * @example
+ * ```tsx
+ * <ButtonGroup description="Choose an option">
+ *   <Button colour="primary">Confirm</Button>
+ *   <Button colour="secondary">Cancel</Button>
+ * </ButtonGroup>
+ * ```
+ *
+ * @param {"stacked" | "inline"} [layout="stacked"] - Layout direction for buttons.
+ * @param {React.ReactNode} [description] - Optional text displayed below the buttons.
+ * @param {React.ReactNode} children - 1 or 2 Button elements.
+ */
+declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupOwnProps & Omit<ViewProps, keyof ButtonGroupOwnProps> & React.RefAttributes<View>>;
+
+type CheckboxVariant = "standalone" | "tile";
+type CheckboxOwnProps = {
+    variant?: CheckboxVariant;
+    label: string;
+    subText?: string;
+    illustration?: React.ReactNode;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    name?: string;
+    value?: string;
+};
+type CheckboxProps = CheckboxOwnProps & Omit<PressableProps, keyof CheckboxOwnProps | "children">;
+/**
+ * Checkbox component for binary selection, supporting standalone and tile layouts.
+ *
+ * @param {"standalone" | "tile"} [variant="standalone"] - Visual layout variant.
+ * @param {string} label - Visible label text.
+ * @param {string} [subText] - Optional secondary descriptive text.
+ * @param {React.ReactNode} [illustration] - Optional decorative slot (tile variant only).
+ * @param {boolean} [checked] - Controlled checked state.
+ * @param {boolean} [defaultChecked] - Uncontrolled initial checked state.
+ * @param {(checked: boolean) => void} [onCheckedChange] - Callback when state changes.
+ * @param {boolean} [disabled=false] - Prevents interaction.
+ *
+ * @example
+ * <Checkbox label="Accept terms" subText="Required to proceed" />
+ * <Checkbox variant="tile" label="Newsletters" subText="Stay up to date" />
+ */
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxOwnProps & Omit<PressableProps, "children" | keyof CheckboxOwnProps> & React.RefAttributes<View>>;
+
+type CheckboxGroupOwnProps = {
+    children: React.ReactNode;
+    orientation?: "horizontal" | "vertical";
+};
+type CheckboxGroupProps = CheckboxGroupOwnProps & Omit<ViewProps, keyof CheckboxGroupOwnProps>;
+/**
+ * CheckboxGroup manages layout for a collection of Checkboxes.
+ *
+ * @param {"horizontal" | "vertical"} [orientation="vertical"] - Layout direction.
+ *
+ * @example
+ * <CheckboxGroup>
+ *   <Checkbox label="Chicken" />
+ *   <Checkbox label="Beef" />
+ * </CheckboxGroup>
+ */
+declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupOwnProps & Omit<ViewProps, keyof CheckboxGroupOwnProps> & React.RefAttributes<View>>;
+
+type RadioOwnProps = {
+    value: string;
+    variant?: "standalone" | "tile";
+    label?: React.ReactNode;
+    subText?: React.ReactNode;
+    asset?: IllustrationProps;
+    disabled?: boolean;
+    selected?: boolean;
+    onSelect?: (value: string) => void;
+};
+type RadioProps = RadioOwnProps & Omit<PressableProps, keyof RadioOwnProps | "children">;
+/**
+ * Radio button component for single selection within a group.
+ *
+ * @param {string} value - The value of the radio button (required).
+ * @param {"standalone" | "tile"} [variant="standalone"] - Visual style variant.
+ * @param {React.ReactNode} [label] - Main label text or content.
+ * @param {React.ReactNode} [subText] - Optional descriptive subtext.
+ * @param {IllustrationProps} [asset] - Optional illustration asset for tile variant.
+ * @param {boolean} [disabled=false] - Whether the radio is disabled.
+ * @param {boolean} [selected=false] - Whether the radio is currently selected.
+ * @param {(value: string) => void} [onSelect] - Callback when radio is selected.
+ *
+ * @example
+ * <Radio value="chicken" label="Chicken" subText="Tender & tasty" />
+ */
+declare const Radio: React.ForwardRefExoticComponent<RadioOwnProps & Omit<PressableProps, "children" | keyof RadioOwnProps> & React.RefAttributes<View>>;
+
+type RadioGroupOwnProps = {
+    name: string;
+    options?: RadioOwnProps[];
+    orientation?: "horizontal" | "vertical";
+    value?: string;
+    defaultValue?: string;
+    disabled?: boolean;
+    onValueChange?: (value: string) => void;
+};
+type RadioGroupProps = RadioGroupOwnProps & Omit<ViewProps, keyof RadioGroupOwnProps>;
+type RadioGroupComponent = React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<View>> & {
+    Radio: typeof Radio;
+};
+declare const RadioGroup: RadioGroupComponent;
+
+type SegmentedControlLayout = "fixed" | "intrinsic";
+type SegmentedControlOption = {
+    value: string;
+    label: React.ReactNode;
+    disabled?: boolean;
+};
+type SegmentedControlOwnProps = {
+    options?: SegmentedControlOption[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    layout?: SegmentedControlLayout;
+    disabled?: boolean;
+};
+type SegmentedControlProps = SegmentedControlOwnProps & Omit<ViewProps, keyof SegmentedControlOwnProps>;
+type SegmentedControlItemOwnProps = {
+    value: string;
+    disabled?: boolean;
+    children: React.ReactNode;
+};
+type SegmentedControlItemProps = SegmentedControlItemOwnProps & Omit<ViewProps, keyof SegmentedControlItemOwnProps>;
+/**
+ * SegmentedControl.Item for compound component API.
+ */
+declare const SegmentedControlItem: React.ForwardRefExoticComponent<SegmentedControlItemOwnProps & Omit<ViewProps, keyof SegmentedControlItemOwnProps> & React.RefAttributes<View>>;
+type SegmentedControlComponent = React.ForwardRefExoticComponent<SegmentedControlProps & React.RefAttributes<View>> & {
+    Item: typeof SegmentedControlItem;
+};
+declare const SegmentedControl: SegmentedControlComponent;
+
+type SliderOwnProps = {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    onValueCommitted?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    leadingLabel?: string;
+    trailingLabel?: string;
+    leadingIcon?: React.ReactNode;
+    trailingIcon?: React.ReactNode;
+    description?: string;
+};
+type SliderProps = SliderOwnProps & Omit<ViewProps, keyof SliderOwnProps>;
+/**
+ * Slider component for selecting a numeric value within a min/max range.
+ *
+ * @param {number} [value] - Controlled value.
+ * @param {number} [defaultValue] - Uncontrolled initial value.
+ * @param {(value: number) => void} [onValueChange] - Callback fired on every value change.
+ * @param {(value: number) => void} [onValueCommitted] - Callback fired when the user finishes dragging.
+ * @param {number} [min=0] - Minimum value.
+ * @param {number} [max=100] - Maximum value.
+ * @param {number} [step=1] - Step increment.
+ * @param {boolean} [disabled=false] - Prevents interaction.
+ * @param {string} [leadingLabel] - Label to the left of the track.
+ * @param {string} [trailingLabel] - Label to the right of the track.
+ * @param {React.ReactNode} [leadingIcon] - Icon before the leading label.
+ * @param {React.ReactNode} [trailingIcon] - Icon after the trailing label.
+ * @param {string} [description] - Descriptive text below the control.
+ *
+ * @example
+ * <Slider defaultValue={25} leadingLabel="0kg" trailingLabel="50kg+" />
+ */
+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 };