@utilitywarehouse/hearth-react-native 0.36.1 → 0.36.2

package/SKILL.md

@@ -48,14 +48,22 @@ There are 2 options for discovering existing components and documentation:
 - MCP server: `hearth-react-native` MCP hosted on a remote URL
 - Raw markdown files: located in the `public` folder of the `hearth-react-native` package
 
-**Default to the raw markdown files.** They are local, always available, and
-version-matched to what the app actually has installed — so the API you read is
-the API you get.
-
-**Use the MCP server for richer exploration** — searching across components,
-fetching story code, or discovering what exists when you're not sure where to
-start. It's worth reaching for when the markdown files don't give you enough
-context, but it requires the server to be configured and reachable.
+**Default to the MCP server** for component lookups and general/cross-cutting
+guidance (design tokens, styling, layout, getting started, dark mode). For a
+component, fetch both its plain `stories-<component>` entry (props + story
+code) and its `components-<component>--docs` entry (narrative usage,
+accessibility, and examples) — together they cover what the local markdown
+file documents.
+
+Subcomponents (e.g. `ModalImage`, `CardAction`) are listed as their own
+`stories-<subcomponent>` entries in `list-all-documentation` — fetch them
+directly by their own id rather than relying on the parent's `--docs` page.
+They don't have a separate `--docs` entry of their own; their narrative usage
+stays documented inline in the parent's `components-<parent>--docs` entry.
+
+**Fall back to the raw markdown files** for a specific story's exact code
+beyond what's already surfaced by `get-documentation` or
+`get-documentation-for-story`.
 
 Whatever source you use, review what is available before writing any code.
 
@@ -68,6 +76,17 @@ prop the library added later (e.g. `List`'s own `heading`/`helperText` props
 vs. a sibling `SectionHeader` or `Heading`). Prefer the documented, current shorthand over
 an older local convention when they diverge.
 
+### MCP Server
+
+You can use the **`hearth-react-native`** MCP server if available (`https://main--68e3ad5c6e80b57678cad6c6.chromatic.com/mcp`):
+
+1. `list-all-documentation` — get an index of all Hearth React Native components and docs
+2. `get-documentation` — get props, API, and usage examples for a specific
+   component or docs entry. Pass the plain `stories-<component>` id (e.g.
+   `stories-modal`) for props and story code, or the `components-<component>--docs`
+   id (e.g. `components-modal--docs`) for narrative usage and accessibility docs
+3. `get-documentation-for-story` — get story code and docs for a specific story
+
 ### Raw markdown files
 
 Full component API reference is available in the installed package. First,
@@ -82,14 +101,6 @@ The docs are then at:
 - `<hearth-react-native-root>/public/llms/docs/` — design tokens, styling, layout, hooks, dark mode
 - `<hearth-react-native-root>/public/llms.txt` — index of all available docs
 
-### MCP Server
-
-You can use the **`hearth-react-native`** MCP server if available (`https://main--68e3ad5c6e80b57678cad6c6.chromatic.com/mcp`):
-
-1. `list-all-documentation` — get an index of all Hearth React Native components
-2. `get-documentation` — get props, API, and usage examples for a specific component
-3. `get-documentation-for-story` — get story code and docs for a specific story
-
 ## Plan before writing
 
 For anything beyond a trivial change — a new screen, a multi-component feature, an

package/build/components/Accordion/Accordion.d.ts

@@ -14,6 +14,10 @@ export declare const AccordionContent: import("react").ForwardRefExoticComponent
 export declare const AccordionContentText: import("react").ForwardRefExoticComponent<import("react-native").TextProps & import("react").RefAttributes<import("react-native").TextProps>>;
 export declare const AccordionIcon: import("react").ForwardRefExoticComponent<import("..").IconProps & import("react").RefAttributes<import("..").IconProps>>;
 export declare const AccordionTitleText: import("react").ForwardRefExoticComponent<import("react-native").TextProps & import("react").RefAttributes<import("react-native").TextProps>>;
+/**
+ * A vertically stacked set of interactive headers that each reveal a section of
+ * content. Use it to condense large amounts of information into a more manageable format.
+ */
 declare const Accordion: {
     ({ children, collapsible, type, heading, helperText, ...props }: AccordionProps): import("react").JSX.Element;
     displayName: string;

package/build/components/Accordion/Accordion.js

@@ -28,6 +28,10 @@ export const AccordionContent = AccordionComponent.Content;
 export const AccordionContentText = AccordionComponent.ContentText;
 export const AccordionIcon = AccordionComponent.Icon;
 export const AccordionTitleText = AccordionComponent.TitleText;
+/**
+ * A vertically stacked set of interactive headers that each reveal a section of
+ * content. Use it to condense large amounts of information into a more manageable format.
+ */
 const Accordion = ({ children, collapsible, type = 'multiple', heading, helperText, ...props }) => (_jsxs(AccordionComponent, { isDisabled: props.disabled, isCollapsible: collapsible, type: type, contentNoPadding: props.contentNoPadding, ...props, children: [heading ? _jsx(SectionHeader, { heading: heading, helperText: helperText }) : null, children] }));
 let accordionItemCounter = 0;
 export const AccordionItem = ({ children, value, title, expanded, triggerContent, testID, ...props }) => {

package/build/components/Accordion/Accordion.props.d.ts

@@ -37,6 +37,8 @@ export interface AccordionProps extends ViewProps {
      * @default false
      */
     contentNoPadding?: boolean;
+    /** Heading text to display above the accordion. */
     heading?: string;
+    /** Helper text to display alongside the heading. */
     helperText?: string;
 }

package/build/components/Alert/Alert.d.ts

@@ -1,4 +1,8 @@
 import type { AlertProps } from './Alert.props';
+/**
+ * Displays an inline message to draw attention to feedback, a status change, or
+ * information the user needs to act on, styled by colour scheme.
+ */
 declare const Alert: {
     ({ text, title, link, onPressLink, colorScheme, onPressIconButton, onClose, children, onPress, iconButtonTestID, linkTestID, style, ...props }: AlertProps): import("react").JSX.Element;
     displayName: string;

package/build/components/Alert/Alert.js

@@ -10,6 +10,10 @@ import AlertIconButton from './AlertIconButton';
 import AlertLink from './AlertLink';
 import AlertText from './AlertText';
 import AlertTitle from './AlertTitle';
+/**
+ * Displays an inline message to draw attention to feedback, a status change, or
+ * information the user needs to act on, styled by colour scheme.
+ */
 const Alert = ({ text, title, link, onPressLink, colorScheme = 'info', onPressIconButton, onClose, children, onPress, iconButtonTestID, linkTestID, style, ...props }) => {
     useEffect(() => {
         if (__DEV__) {

package/build/components/Avatar/Avatar.d.ts

@@ -1,4 +1,8 @@
 import AvatarProps from './Avatar.props';
+/**
+ * Displays a user's profile image, initials, or a fallback icon, connecting the
+ * product experience to the person it represents.
+ */
 declare const Avatar: {
     ({ src, name, size, delayMs, onLoadingStatusChange, style, ...props }: AvatarProps): import("react").JSX.Element;
     displayName: string;

package/build/components/Avatar/Avatar.js

@@ -5,6 +5,10 @@ import { Image, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { getInitials } from '../../utils';
 import BodyText from '../BodyText/BodyText';
+/**
+ * Displays a user's profile image, initials, or a fallback icon, connecting the
+ * product experience to the person it represents.
+ */
 const Avatar = ({ src, name, size = 'md', delayMs = 0, onLoadingStatusChange, style, ...props }) => {
     const [status, setStatus] = useState('idle');
     const [isDelayed, setIsDelayed] = useState(delayMs > 0);

package/build/components/Badge/Badge.d.ts

@@ -1,4 +1,8 @@
 import type BadgeProps from './Badge.props';
+/**
+ * Draws attention to another interface element or provides additional context,
+ * such as a status. Badge is stateless: it has no pressed, disabled, or active states.
+ */
 declare const Badge: {
     ({ children, ...props }: BadgeProps): import("react").JSX.Element;
     displayName: string;

package/build/components/Badge/Badge.js

@@ -5,6 +5,10 @@ import { StyleSheet } from 'react-native-unistyles';
 import { BadgeContext } from './Badge.context';
 import BadgeIcon from './BadgeIcon';
 import BadgeText from './BadgeText';
+/**
+ * Draws attention to another interface element or provides additional context,
+ * such as a status. Badge is stateless: it has no pressed, disabled, or active states.
+ */
 const Badge = ({ children, ...props }) => {
     const { variant = 'subtle', icon, colorScheme = 'info', flatBase = false, size = 'sm', style, text, numberOfLines, ...rest } = props;
     const value = useMemo(() => ({ colorScheme, flatBase, variant, size }), [colorScheme, flatBase, variant, size]);

package/build/components/Badge/Badge.props.d.ts

@@ -1,12 +1,31 @@
 import type { ComponentType } from 'react';
 import type { ViewProps } from 'react-native';
 interface BadgeProps extends ViewProps {
+    /**
+     * The visual style of the badge.
+     * @default 'subtle'
+     */
     variant?: 'subtle' | 'emphasis' | 'outline';
+    /**
+     * The color scheme used for the badge.
+     * @default 'info'
+     */
     colorScheme?: 'info' | 'positive' | 'danger' | 'warning' | 'functional' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'pig' | 'highlight';
+    /**
+     * The size of the badge.
+     * @default 'sm'
+     */
     size?: 'sm' | 'md';
+    /** Icon component to display in the badge. */
     icon?: ComponentType;
+    /**
+     * Whether the badge has a flat base.
+     * @default false
+     */
     flatBase?: boolean;
+    /** Text to display in the badge, taking precedence over `children`. */
     text?: string | number;
+    /** Maximum number of lines to render for the badge text. */
     numberOfLines?: number;
 }
 export default BadgeProps;

package/build/components/Banner/Banner.d.ts

@@ -1,4 +1,9 @@
 import type BannerProps from './Banner.props';
+/**
+ * A versatile card-based component for displaying informational content with an
+ * icon, image, or illustration. Supports horizontal and vertical layouts, a
+ * pressable state, a close button, and an optional button or link action.
+ */
 declare const Banner: {
     ({ icon, iconContainerVariant, iconContainerSize, iconContainerColor, illustration, image, heading, description, direction, link, button, onPress, onClose, variant, alignChevron, style, ...props }: BannerProps): import("react").JSX.Element;
     displayName: string;

package/build/components/Banner/Banner.js

@@ -9,6 +9,11 @@ import { Heading } from '../Heading';
 import { IconContainer } from '../IconContainer';
 import { UnstyledIconButton } from '../UnstyledIconButton';
 import BannerContext from './Banner.context';
+/**
+ * A versatile card-based component for displaying informational content with an
+ * icon, image, or illustration. Supports horizontal and vertical layouts, a
+ * pressable state, a close button, and an optional button or link action.
+ */
 const Banner = ({ icon, iconContainerVariant = 'subtle', iconContainerSize = 'md', iconContainerColor = 'pig', illustration, image, heading, description, direction = 'horizontal', link, button, onPress, onClose, variant = 'subtle', alignChevron = 'center', style, ...props }) => {
     const hasIllustration = Boolean(illustration);
     styles.useVariants({

package/build/components/Banner/BannerIllustration.d.ts

@@ -1,4 +1,8 @@
 import { ImageProps } from 'react-native';
 import { ThemedImageProps } from '../ThemedImage';
+/**
+ * Renders a themed illustration inside a `Banner`, adapting its size to the
+ * banner's layout direction and switching between light and dark sources.
+ */
 declare const BannerIllustration: (props: ImageProps | ThemedImageProps) => import("react").JSX.Element;
 export default BannerIllustration;

package/build/components/Banner/BannerIllustration.js

@@ -4,6 +4,10 @@ import { StyleSheet } from 'react-native-unistyles';
 import { isThemedImageProps } from '../../utils';
 import { ThemedImage } from '../ThemedImage';
 import { useBannerContext } from './Banner.context';
+/**
+ * Renders a themed illustration inside a `Banner`, adapting its size to the
+ * banner's layout direction and switching between light and dark sources.
+ */
 const BannerIllustration = (props) => {
     const { direction } = useBannerContext();
     styles.useVariants({ direction });

package/build/components/Banner/BannerImage.d.ts

@@ -1,4 +1,8 @@
 import { ImageProps } from 'react-native';
 import { ThemedImageProps } from '../ThemedImage';
+/**
+ * Renders a themed image inside a `Banner`, adapting its size to the banner's
+ * layout direction and switching between light and dark sources.
+ */
 declare const BannerImage: (props: ImageProps | ThemedImageProps) => import("react").JSX.Element;
 export default BannerImage;

package/build/components/Banner/BannerImage.js

@@ -4,6 +4,10 @@ import { StyleSheet } from 'react-native-unistyles';
 import { isThemedImageProps } from '../../utils';
 import { ThemedImage } from '../ThemedImage';
 import { useBannerContext } from './Banner.context';
+/**
+ * Renders a themed image inside a `Banner`, adapting its size to the banner's
+ * layout direction and switching between light and dark sources.
+ */
 const BannerImage = (props) => {
     const { direction } = useBannerContext();
     styles.useVariants({ direction });

package/build/components/BodyText/BodyText.d.ts

@@ -1,4 +1,8 @@
 import type BodyTextProps from './BodyText.props';
+/**
+ * Renders body copy, the default text component for paragraphs and general
+ * reading content, with size, weight, and colour variants.
+ */
 declare const BodyText: {
     ({ children, color, size, truncated, weight, underline, strikeThrough, italic, textTransform, textAlign, textAlignVertical, textDecorationColor, textDecorationLine, textDecorationStyle, userSelect, inverted, ...props }: BodyTextProps): import("react").JSX.Element;
     displayName: string;

package/build/components/BodyText/BodyText.js

@@ -3,6 +3,10 @@ import { Text } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useStyleProps } from '../../hooks';
 import { getFlattenedColorValue, resolveThemeValueWithFallback } from '../../utils';
+/**
+ * Renders body copy, the default text component for paragraphs and general
+ * reading content, with size, weight, and colour variants.
+ */
 const BodyText = ({ children, color, size = 'md', truncated, weight = 'regular', underline, strikeThrough, italic, textTransform, textAlign, textAlignVertical, textDecorationColor, textDecorationLine, textDecorationStyle, userSelect, inverted, ...props }) => {
     // Extract margin utility props from remaining props
     const { computedStyles: utilityStyles, remainingProps } = useStyleProps(props);

package/build/components/BottomSheet/BottomSheet.d.ts

@@ -2,6 +2,12 @@ import { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 import React from 'react';
 import type BottomSheetProps from './BottomSheet.props';
 type BottomSheet = BottomSheetMethods;
+/**
+ * A drawer-like interface that slides up from the bottom of the screen, used to
+ * display additional content or actions without navigating away from the
+ * current screen. Rendered inline with page content, so use `BottomSheetModal`
+ * for most cases instead, since it appears over the page.
+ */
 declare const BottomSheet: {
     ({ children, containerStyle, handleStyle, backdrop, showHandle, ref, ...rest }: BottomSheetProps): React.JSX.Element;
     displayName: string;

package/build/components/BottomSheet/BottomSheet.js

@@ -5,6 +5,12 @@ import { StyleSheet, withUnistyles } from 'react-native-unistyles';
 import { BottomSheetContext } from './BottomSheet.context';
 import useBottomSheetLogic from './useBottomSheetLogic';
 const StyledBottomSheetCore = withUnistyles(BottomSheetCore);
+/**
+ * A drawer-like interface that slides up from the bottom of the screen, used to
+ * display additional content or actions without navigating away from the
+ * current screen. Rendered inline with page content, so use `BottomSheetModal`
+ * for most cases instead, since it appears over the page.
+ */
 const BottomSheet = ({ children, containerStyle, handleStyle, backdrop = true, showHandle = true, ref, ...rest }) => {
     const bottomSheetRef = React.useRef(null);
     const parentContext = React.useContext(BottomSheetContext);

package/build/components/BottomSheet/BottomSheet.props.d.ts

@@ -28,7 +28,9 @@ interface BottomSheetProps extends Omit<GorhomBottomSheetProps, 'handleComponent
      * @default true
      */
     showHandle?: boolean;
+    /** Style for the bottom sheet content container. */
     contentStyle?: ViewStyle;
+    /** Ref exposing imperative methods for controlling the bottom sheet. */
     ref?: Ref<BottomSheetMethods> | Ref<BottomSheetModalMethods<any>>;
 }
 export default BottomSheetProps;

package/build/components/Box/Box.d.ts

@@ -1,5 +1,9 @@
 import React from 'react';
 import type BoxProps from './Box.props';
+/**
+ * A low-level layout primitive that renders a `View` (or another element via
+ * `as`) with style utility props for spacing, sizing, color, and layout.
+ */
 declare const BoxComponent: {
     ({ as, style, children, ...props }: BoxProps): React.JSX.Element;
     displayName: string;

package/build/components/Box/Box.js

@@ -4,6 +4,10 @@ import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { propStyleMapping, resolveThemeKey, resolveThemeValueWithFallback, semanticPropMapping, themeStyleFallbackMapping, themeStyleMapping, viewStyleProps, } from '../../utils';
 // --- Box component definition ---
+/**
+ * A low-level layout primitive that renders a `View` (or another element via
+ * `as`) with style utility props for spacing, sizing, color, and layout.
+ */
 const BoxComponent = ({ as, style, children, ...props }) => {
     const { computedProps } = useMemo(() => {
         const computedProps = {};

package/build/components/Box/Box.props.d.ts

@@ -2,7 +2,9 @@ import React from 'react';
 import type { ViewProps } from 'react-native';
 import type { AllUtilityProps, SpacingValues } from '../../types';
 interface CustomBoxProps {
+    /** The component or element type to render the Box as, in place of `View`. */
     as?: React.ElementType;
+    /** Gap between child elements. */
     spacing?: SpacingValues;
 }
 export interface BoxProps extends AllUtilityProps, ViewProps, CustomBoxProps {

package/build/components/Button/Button.d.ts

@@ -15,6 +15,10 @@ export declare const ButtonGroupComponent: import("react").ForwardRefExoticCompo
     space?: import("../../types").SpacingValues;
     spacing?: import("../../types").SpacingValues;
 } & import("@gluestack-ui/button/lib/typescript/types").IButtonGroupProps>;
+/**
+ * Triggers an action or event, such as submitting a form, opening a dialog,
+ * cancelling an action, or performing a delete operation.
+ */
 declare const Button: {
     ({ children, disabled, pressed, text, ...props }: ButtonProps): import("react").JSX.Element;
     displayName: string;

package/build/components/Button/Button.js

@@ -22,6 +22,10 @@ export const ButtonGroupComponent = ButtonComponent.Group;
 ButtonText.displayName = 'ButtonText';
 ButtonSpinner.displayName = 'ButtonSpinner';
 ButtonIcon.displayName = 'ButtonIcon';
+/**
+ * Triggers an action or event, such as submitting a form, opening a dialog,
+ * cancelling an action, or performing a delete operation.
+ */
 const Button = ({ children, disabled = false, pressed, text, ...props }) => {
     const { disabled: groupDisabled, loading: groupLoading } = useButtonGroupContext();
     const { loading } = props;

package/build/components/Button/Button.props.d.ts

@@ -1,52 +1,181 @@
 import type { ComponentType, ReactElement, ReactNode } from 'react';
 import type { PressableProps, ViewProps } from 'react-native';
 export type ButtonVariants = {
+    /**
+     * The variant of the button.
+     * @default 'solid'
+     */
     variant?: 'solid';
+    /**
+     * The color scheme of the button.
+     * @default 'highlight'
+     */
     colorScheme?: 'affirmative' | 'destructive';
+    /**
+     * Whether the button uses an inverted (light-on-dark) style, for use on
+     * `midnight` or `purple` backgrounds.
+     */
     inverted?: never;
 } | {
+    /**
+     * The variant of the button.
+     * @default 'solid'
+     */
     variant?: 'outline';
+    /**
+     * The color scheme of the button.
+     * @default 'highlight'
+     */
     colorScheme: 'affirmative' | 'destructive';
+    /**
+     * Whether the button uses an inverted (light-on-dark) style, for use on
+     * `midnight` or `purple` backgrounds.
+     */
     inverted?: never;
 } | {
+    /**
+     * The variant of the button.
+     * @default 'solid'
+     */
     variant?: 'ghost';
+    /**
+     * The color scheme of the button.
+     * @default 'highlight'
+     */
     colorScheme: 'affirmative' | 'destructive';
+    /**
+     * Whether the button uses an inverted (light-on-dark) style, for use on
+     * `midnight` or `purple` backgrounds.
+     */
     inverted?: never;
 } | {
+    /**
+     * The variant of the button.
+     * @default 'solid'
+     */
     variant?: 'emphasis';
+    /**
+     * The color scheme of the button.
+     * @default 'highlight'
+     */
     colorScheme?: 'highlight';
+    /**
+     * Whether the button uses an inverted (light-on-dark) style, for use on
+     * `midnight` or `purple` backgrounds.
+     */
     inverted?: boolean;
 } | {
+    /**
+     * The variant of the button.
+     * @default 'solid'
+     */
     variant?: 'solid';
+    /**
+     * The color scheme of the button.
+     * @default 'highlight'
+     */
     colorScheme?: 'highlight';
+    /**
+     * Whether the button uses an inverted (light-on-dark) style, for use on
+     * `midnight` or `purple` backgrounds.
+     */
     inverted?: boolean;
 } | {
+    /**
+     * The variant of the button.
+     * @default 'solid'
+     */
     variant?: 'outline';
+    /**
+     * The color scheme of the button.
+     * @default 'highlight'
+     */
     colorScheme: 'functional';
+    /**
+     * Whether the button uses an inverted (light-on-dark) style, for use on
+     * `midnight` or `purple` backgrounds.
+     */
     inverted?: boolean;
 } | {
+    /**
+     * The variant of the button.
+     * @default 'solid'
+     */
     variant?: 'ghost';
+    /**
+     * The color scheme of the button.
+     * @default 'highlight'
+     */
     colorScheme: 'functional';
+    /**
+     * Whether the button uses an inverted (light-on-dark) style, for use on
+     * `midnight` or `purple` backgrounds.
+     */
     inverted?: boolean;
 };
 export type BaseButtonProps = Omit<PressableProps, 'children'> & {
+    /**
+     * If `true`, the button will be disabled.
+     * @default false
+     */
     disabled?: boolean;
+    /**
+     * The size of the button.
+     * @default 'md'
+     */
     size?: 'sm' | 'md';
+    /**
+     * Changes the button to a pressed state.
+     * @default false
+     */
     pressed?: boolean;
+    /**
+     * Removes the horizontal padding from the button (only applies to `sm` size `ghost` variant buttons).
+     * @default false
+     */
     paddingNone?: boolean;
+    /** Content rendered inside the button. */
     children?: ViewProps['children'];
 } & ButtonVariants;
 export type ButtonWithoutChildrenProps = BaseButtonProps & {
     children?: never;
+    /** Text to display in the button, used in place of `children`. */
     text?: string;
+    /**
+     * The icon to display on the button.
+     * @default undefined
+     */
     icon?: ComponentType;
+    /**
+     * The position of the icon.
+     * @default 'left'
+     */
     iconPosition?: 'left' | 'right';
+    /**
+     * If `true`, the button will show a spinner.
+     * @default false
+     */
     loading?: boolean;
 };
 export type ButtonWithStringChildrenProps = BaseButtonProps & {
+    /**
+     * The content of the button.
+     */
     children: string | number | null | undefined;
+    /**
+     * The icon to display on the button.
+     * @default undefined
+     */
     icon?: ComponentType;
+    /**
+     * The position of the icon.
+     * @default 'left'
+     */
     iconPosition?: 'left' | 'right';
+    /**
+     * If `true`, the button will show a spinner.
+     * @default false
+     */
     loading?: boolean;
     text?: never;
 };

package/build/components/Card/Card.d.ts

@@ -1,3 +1,7 @@
+/**
+ * A visual container that groups related content and actions. Use it to present a distinct block
+ * of information, optionally with `CardAction` items, inside a bordered, coloured surface.
+ */
 declare const Card: import("react").ForwardRefExoticComponent<Omit<import("./Card.props").default & {
     states?: {
         active?: boolean;

package/build/components/Card/Card.js

@@ -1,5 +1,9 @@
 import { createPressable } from '@gluestack-ui/pressable';
 import CardRoot from './CardRoot';
+/**
+ * A visual container that groups related content and actions. Use it to present a distinct block
+ * of information, optionally with `CardAction` items, inside a bordered, coloured surface.
+ */
 const Card = createPressable({
     Root: CardRoot,
 });

package/build/components/Card/Card.props.d.ts

@@ -1,13 +1,31 @@
 import { PressableProps } from 'react-native';
 import { DisplayProps, FlexLayoutProps, GapProps, MarginProps, SpacingValues } from '../../types';
 interface CardProps extends PressableProps, MarginProps, GapProps, FlexLayoutProps, Omit<DisplayProps, 'direction'> {
+    /** Visual emphasis of the card.
+     * @default 'subtle'
+     */
     variant?: 'emphasis' | 'subtle';
+    /**
+     * The card's color scheme.
+     * @default 'neutralStrong'
+     */
     colorScheme?: 'neutralStrong' | 'neutralSubtle' | 'brand' | 'energy' | 'broadband' | 'highlight' | 'mobile' | 'insurance' | 'cashback' | 'pig';
+    /** The color of the card's shadow. */
     shadowColor?: 'functional' | 'brand' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'pig';
+    /** Removes the card's default padding.
+     * @default false
+     */
     noPadding?: boolean;
+    /** Disables interaction and applies a disabled visual style.
+     * @default false
+     */
     disabled?: boolean;
+    /** The space between the card's content. */
     spacing?: SpacingValues;
-    /** @deprecated Use `spacing` instead. The `space` prop will be removed in a future release. */
+    /**
+     * The space between the card's content.
+     * @deprecated Use `spacing` instead. The `space` prop will be removed in a future release.
+     */
     space?: SpacingValues;
 }
 export default CardProps;

package/build/components/Card/CardAction/CardAction.d.ts

@@ -1,3 +1,7 @@
+/**
+ * A pressable, consistently styled row for an actionable item inside a `Card`. Use it, wrapped in
+ * `CardActions`, to list navigable or triggerable actions within a card.
+ */
 declare const CardAction: import("react").ForwardRefExoticComponent<(Omit<import("./CardAction.props").CardActionWithChildren & {
     states?: {
         active?: boolean;

package/build/components/Card/CardAction/CardAction.js

@@ -1,5 +1,9 @@
 import { createPressable } from '@gluestack-ui/pressable';
 import CardActionRoot from './CardActionRoot';
+/**
+ * A pressable, consistently styled row for an actionable item inside a `Card`. Use it, wrapped in
+ * `CardActions`, to list navigable or triggerable actions within a card.
+ */
 const CardAction = createPressable({
     Root: CardActionRoot,
 });