@utilitywarehouse/hearth-react-native 0.36.0 → 0.36.2

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

@@ -1,6 +1,12 @@
 import type { PressableProps } from 'react-native';
 export interface ToggleButtonProps extends PressableProps {
+    /** The text label of the button. */
     text?: string;
+    /**
+     * Whether the button is in the toggled (pressed/selected) state.
+     * @default false
+     */
     toggled?: boolean;
+    /** Called with the new toggled state whenever the button is pressed. */
     onToggle?: (toggled: boolean) => void;
 }

package/build/components/ToggleButtonCard/ToggleButtonCard.d.ts

@@ -1,9 +1,17 @@
 import ToggleButtonCardProps from './ToggleButtonCard.props';
 import ToggleButtonCardGroupProps from './ToggleButtonCardGroup.props';
+/**
+ * Groups a set of `ToggleButtonCard`s so only one can be selected at a time, laid out as a
+ * flexbox row or a grid. Use it for forms or surveys that present multiple selectable options.
+ */
 declare const ToggleButtonCardGroup: {
     ({ onChange, onValueChange, ...props }: ToggleButtonCardGroupProps): import("react").JSX.Element;
     displayName: string;
 };
+/**
+ * A selectable card used as a single option within a `ToggleButtonCardGroup`. Use it to let
+ * users pick one option from a set of predefined choices in forms or surveys.
+ */
 declare const ToggleButtonCard: {
     ({ children, contentStyle, ...props }: ToggleButtonCardProps): import("react").JSX.Element;
     displayName: string;

package/build/components/ToggleButtonCard/ToggleButtonCard.js

@@ -12,11 +12,19 @@ const ToggleButtonCardComponent = createRadio({
     Label: () => null,
 });
 const ToggleButtonCardGroupComponent = ToggleButtonCardComponent.Group;
+/**
+ * Groups a set of `ToggleButtonCard`s so only one can be selected at a time, laid out as a
+ * flexbox row or a grid. Use it for forms or surveys that present multiple selectable options.
+ */
 const ToggleButtonCardGroup = ({ onChange, onValueChange, ...props }) => (_jsx(ToggleButtonCardGroupComponent, { ...props, onChange: (value) => {
         onChange?.(value);
         onValueChange?.(value);
     } }));
 ToggleButtonCardGroup.displayName = 'ToggleButtonCardGroup';
+/**
+ * A selectable card used as a single option within a `ToggleButtonCardGroup`. Use it to let
+ * users pick one option from a set of predefined choices in forms or surveys.
+ */
 const ToggleButtonCard = ({ children, contentStyle, ...props }) => {
     const { computedStyles } = useStyleProps(props);
     return (_jsx(ToggleButtonCardComponent, { ...props, children: !!children && _jsx(View, { style: [computedStyles, contentStyle], children: children }) }));

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

@@ -1,15 +1,24 @@
 import type { PressableProps, ViewProps, ViewStyle } from 'react-native';
 import { SpaceValue } from '../../types';
 interface ToggleButtonCardProps extends Omit<PressableProps, 'children'> {
+    /** The value used for the toggle button, returned on form submission. */
     value: string;
+    /** Called when the state of the toggle button changes. */
     onChange?: (isSelected: boolean) => void;
     children?: ViewProps['children'];
+    /** The label to be displayed next to the toggle button. */
     label?: string;
+    /** Flex direction. */
     flexDirection?: ViewStyle['flexDirection'];
+    /** Flex wrap. */
     flexWrap?: ViewStyle['flexWrap'];
+    /** Align items. */
     alignItems?: ViewStyle['alignItems'];
+    /** Justify content. */
     justifyContent?: ViewStyle['justifyContent'];
+    /** Style applied to the content wrapper around `children`. */
     contentStyle?: ViewStyle;
+    /** Gap between child elements. */
     gap?: SpaceValue;
 }
 export default ToggleButtonCardProps;

package/build/components/ToggleButtonCard/ToggleButtonCardGroup.props.d.ts

@@ -2,22 +2,37 @@ import { ViewProps, ViewStyle } from 'react-native';
 import { space } from '../../tokens';
 import { GridProps } from '../Grid';
 type ToggleButtonCardGroupBaseProps = {
+    /** The value of the currently selected toggle button card. */
     value?: string;
+    /** Called when the selected toggle button card changes. */
     onValueChange?: (value: string) => void;
     /**
+     * Called when any child ToggleButtonCard is checked or unchecked.
      * @deprecated Use `onValueChange` instead.
      */
     onChange?: (value: string) => void;
+    /**
+     * Gap between child elements.
+     * @default '200'
+     */
     gap?: keyof typeof space;
 } & ViewProps;
 type ToggleButtonCardGroupFlexProps = {
     columns?: never;
+    /**
+     * Flex direction.
+     * @default 'row'
+     */
     flexDirection?: ViewStyle['flexDirection'];
+    /** Flex wrap. */
     flexWrap?: ViewStyle['flexWrap'];
+    /** Align items. */
     alignItems?: ViewStyle['alignItems'];
+    /** Justify content. */
     justifyContent?: ViewStyle['justifyContent'];
 };
 type ToggleButtonCardGroupGridProps = {
+    /** Number of grid columns. When set, the group uses a grid layout instead of flexbox. */
     columns: GridProps['columns'];
     flexDirection?: never;
     flexWrap?: never;

package/build/components/UnstyledIconButton/UnstyledIconButton.d.ts

@@ -1,4 +1,9 @@
 import { UnstyledIconButtonProps } from './UnstyledIconButton.props';
+/**
+ * A pressable icon with no default visual styling, used as a building block for buttons that
+ * need bespoke appearance (such as input adornments) while keeping button accessibility and
+ * loading behaviour.
+ */
 declare const UnstyledIconButton: {
     ({ icon, disabled, pressed, size, inverted, iconStyle, ...props }: UnstyledIconButtonProps): import("react").JSX.Element;
     displayName: string;

package/build/components/UnstyledIconButton/UnstyledIconButton.js

@@ -15,6 +15,11 @@ const UnstyledIconButtonSpinner = UnstyledIconButtonComponent.Spinner;
 const UnstyledIconButtonIcon = UnstyledIconButtonComponent.Icon;
 UnstyledIconButtonSpinner.displayName = 'UnstyledIconButtonSpinner';
 UnstyledIconButtonIcon.displayName = 'UnstyledIconButtonIcon';
+/**
+ * A pressable icon with no default visual styling, used as a building block for buttons that
+ * need bespoke appearance (such as input adornments) while keeping button accessibility and
+ * loading behaviour.
+ */
 const UnstyledIconButton = ({ icon, disabled = false, pressed, size = 'md', inverted = false, iconStyle, ...props }) => {
     const { disabled: groupDisabled, loading: groupLoading } = useButtonGroupContext();
     const { loading, accessibilityRole = 'button', accessible = true, focusable = true, importantForAccessibility = 'yes', ...restProps } = props;

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

@@ -3,12 +3,29 @@ import type { PressableProps, ViewProps } from 'react-native';
 import { ColorValue } from '../../types';
 export type UnstyledIconButtonProps = {
     disabled?: boolean;
+    /** Whether the button is currently pressed. */
     pressed?: boolean;
+    /**
+     * The icon component displayed on the button.
+     */
     icon: ComponentType;
+    /**
+     * If `true`, the button will show a spinner.
+     * @default false
+     */
     loading?: boolean;
+    /**
+     * The size of the button.
+     * @default 'md'
+     */
     size?: 'sm' | 'md';
+    /**
+     * If `true`, the button colours will be inverted.
+     * @default false
+     */
     inverted?: boolean;
     children?: React.ReactNode;
+    /** Style applied to the icon. */
     iconStyle?: ViewProps['style'] & {
         color?: ColorValue;
     };

package/build/components/VerificationInput/VerificationInput.d.ts

@@ -1,3 +1,7 @@
 import type { VerificationInputHandle, VerificationInputProps } from './VerificationInput.props';
+/**
+ * Captures a one-time password or other verification code as a sequence of single-character slots.
+ * Use it for OTP and SMS/email verification flows.
+ */
 declare const VerificationInput: import("react").ForwardRefExoticComponent<VerificationInputProps & import("react").RefAttributes<VerificationInputHandle>>;
 export default VerificationInput;

package/build/components/VerificationInput/VerificationInput.js

@@ -6,6 +6,10 @@ import { useFormFieldAccessibility } from '../../hooks';
 import { FormField } from '../FormField';
 import { getNextIndexFromValueChange } from './VerificationInput.utils';
 import { VerificationInputSlot } from './VerificationInputSlot';
+/**
+ * Captures a one-time password or other verification code as a sequence of single-character slots.
+ * Use it for OTP and SMS/email verification flows.
+ */
 const VerificationInput = forwardRef(({ value = '', onChangeText, label, labelVariant = 'body', helperText, helperIcon, validationStatus = 'initial', validText, invalidText, disabled = false, readonly = false, secureTextEntry = false, autoFocus = false, style, testID, ...props }, ref) => {
     const length = 6;
     const inputRef = useRef(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.36.0",
+  "version": "0.36.2",
   "description": "Utility Warehouse React Native UI library",
   "license": "Apache-2.0",
   "repository": {
@@ -59,6 +59,7 @@
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
     "globals": "^15.15.0",
+    "oversight-lint": "^0.7.0",
     "playwright": "^1.59.1",
     "prismjs": "^1.30.0",
     "react": "19.2.3",
@@ -75,15 +76,16 @@
     "react-native-worklets": "0.10.1",
     "remark-gfm": "^4.0.1",
     "storybook": "^10.5.6",
+    "storybook-addon-oversight": "^0.7.0",
     "vite": "^7.1.3",
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^4.1.7",
     "@utilitywarehouse/hearth-fonts": "^0.1.1",
-    "@utilitywarehouse/hearth-react-native-icons": "^0.9.2",
-    "@utilitywarehouse/hearth-svg-assets": "^0.6.6",
     "@utilitywarehouse/hearth-react-icons": "^0.9.2",
     "@utilitywarehouse/hearth-storybook-utils": "0.0.0",
-    "@utilitywarehouse/hearth-tokens": "^0.4.6"
+    "@utilitywarehouse/hearth-svg-assets": "^0.6.6",
+    "@utilitywarehouse/hearth-react-native-icons": "^0.9.2",
+    "@utilitywarehouse/hearth-tokens": "^0.4.7"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": ">=5.0.0",
@@ -115,6 +117,7 @@
     "dev": "storybook dev -p 6006",
     "dev:docs": "storybook dev -p 6002 --no-open",
     "build:storybook": "storybook build",
-    "build:storybook:docs": "storybook build --docs"
+    "build:storybook:docs": "storybook build --docs",
+    "lint:oversight": "oversight"
   }
 }

package/public/llms/components/checkbox.md

@@ -121,7 +121,12 @@ The `CheckboxGroup` component is used to group multiple checkbox inputs together
 
 ```jsx
 // Example usage
-import { Checkbox, CheckboxGroup, CheckboxIndicator, CheckboxLabel, } from '@utilitywarehouse/hearth-react-native';
+import {
+  Checkbox,
+  CheckboxGroup,
+  CheckboxIndicator,
+  CheckboxLabel,
+} from '@utilitywarehouse/hearth-react-native';
 
 import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 

package/public/llms/components/expandable-card.md

@@ -407,7 +407,7 @@ If you need to use the `ExpandableCard` component in a more advanced way, you ca
 
 ```tsx
 // Example usage
-<div style={{ display: 'flex', flexDirection: 'column', gap: 16, width: 350 }}>
+<View style={{ display: 'flex', flexDirection: 'column', gap: 16, width: 350 }}>
   <ExpandableCard
     expanded={triggerContentExpanded}
     onExpandedChange={setTriggerContentExpanded}
@@ -446,7 +446,7 @@ If you need to use the `ExpandableCard` component in a more advanced way, you ca
       <BodyText>Last Updated: 12/11/25</BodyText>
     </ExpandableCardExpandedContent>
   </ExpandableCard>
-</div>
+</View>
 ```
 
 ```tsx

package/public/llms/components/modal.md

@@ -300,6 +300,7 @@ Use the `image` prop to display an image-centric modal with centered content:
   showCloseButton
   primaryButtonText="Primary"
   secondaryButtonText="Cancel"
+  loadingHeading="Loading"
   onPressCloseButton={() => null}
   onPressPrimaryButton={() => null}
   onPressSecondaryButton={() => null}
@@ -396,6 +397,7 @@ Add custom content between the header and footer sections:
   showCloseButton
   primaryButtonText="Primary"
   secondaryButtonText="Cancel"
+  loadingHeading="Loading"
   onPressCloseButton={() => null}
   onPressPrimaryButton={() => null}
   onPressSecondaryButton={() => null}
@@ -460,6 +462,7 @@ Replace the built-in buttons with a custom sticky footer when you need custom la
   showCloseButton
   primaryButtonText="Primary"
   secondaryButtonText="Cancel"
+  loadingHeading="Loading"
   onPressCloseButton={() => null}
   onPressPrimaryButton={() => null}
   onPressSecondaryButton={() => null}
@@ -519,6 +522,7 @@ Show a loading spinner while processing:
   showCloseButton
   primaryButtonText="Primary"
   secondaryButtonText="Cancel"
+  loadingHeading="Loading"
   onPressCloseButton={() => null}
   onPressPrimaryButton={() => null}
   onPressSecondaryButton={() => null}

package/public/llms/docs/introduction.md

@@ -1,7 +1,7 @@
 # Hearth React Native
 
 React Native component library for building UIs at Utility Warehouse.<br/>
-Current version: v0.36.0
+Current version: v0.36.2
 
 Hearth React Native is a comprehensive design system library for React Native, providing reusable components, consistent styling, and tools to streamline UI development. It is built to enhance productivity and maintain design consistency across projects.