@utilitywarehouse/hearth-react-native 0.15.3 → 0.16.0

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

@@ -6,6 +6,7 @@ interface RadioCardProps extends Omit<PressableProps, 'children'> {
     onChange?: (isSelected: boolean) => void;
     children?: ViewProps['children'];
     label?: string;
+    labelVariant?: 'heading' | 'body';
     flexDirection?: ViewStyle['flexDirection'];
     flexWrap?: ViewStyle['flexWrap'];
     alignItems?: ViewStyle['alignItems'];

package/build/components/Select/Select.d.ts

@@ -1,6 +1,6 @@
 import SelectProps from './Select.props';
 declare const Select: {
-    ({ options, value, onValueChange, label, placeholder, disabled, leadingIcon: LeadingIcon, validationStatus, required, children, bottomSheetProps, menuHeading, readonly, emptyText, listProps, searchable, searchPlaceholder, ...rest }: SelectProps): import("react/jsx-runtime").JSX.Element;
+    ({ options, value, onValueChange, label, labelVariant, placeholder, disabled, leadingIcon: LeadingIcon, validationStatus, required, children, bottomSheetProps, menuHeading, readonly, emptyText, listProps, searchable, searchPlaceholder, ...rest }: SelectProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Select;

package/build/components/Select/Select.js

@@ -12,7 +12,7 @@ import { Input } from '../Input';
 import { Label } from '../Label';
 import { SelectContext } from './Select.context';
 import SelectOption from './SelectOption';
-const Select = ({ options = [], value, onValueChange, label, placeholder = 'Select an option', disabled = false, leadingIcon: LeadingIcon, validationStatus = 'initial', required = true, children, bottomSheetProps, menuHeading, readonly = false, emptyText = 'No options available', listProps, searchable = false, searchPlaceholder = 'Search', ...rest }) => {
+const Select = ({ options = [], value, onValueChange, label, labelVariant = 'body', placeholder = 'Select an option', disabled = false, leadingIcon: LeadingIcon, validationStatus = 'initial', required = true, children, bottomSheetProps, menuHeading, readonly = false, emptyText = 'No options available', listProps, searchable = false, searchPlaceholder = 'Search', ...rest }) => {
     const formFieldContext = useFormFieldContext();
     const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
     const isRequired = formFieldContext?.required ?? required;
@@ -67,7 +67,7 @@ const Select = ({ options = [], value, onValueChange, label, placeholder = 'Sele
     }, []);
     const renderSelectOption = useCallback(({ item }) => (_jsx(SelectOption, { label: item.label, value: item.value, disabled: item.disabled, leadingIcon: item.leadingIcon, trailingIcon: item.trailingIcon })), []);
     const renderEmptyComponent = useCallback(() => (_jsx(BottomSheetView, { style: styles.emptyContainer, children: _jsx(DetailText, { children: emptyText }) })), [emptyText]);
-    return (_jsxs(View, { ...rest, style: [styles.container, rest.style], children: [!!label && (_jsx(View, { children: _jsxs(Label, { children: [label, !isRequired && _jsx(Label, { children: " (Optional)" })] }) })), _jsxs(Pressable, { onPress: openBottomSheet, disabled: isDisabled || isReadonly, style: ({ pressed }) => [
+    return (_jsxs(View, { ...rest, style: [styles.container, rest.style], children: [!!label && (_jsx(View, { children: _jsxs(Label, { variant: labelVariant, children: [label, !isRequired && _jsx(Label, { variant: labelVariant, children: " (Optional)" })] }) })), _jsxs(Pressable, { onPress: openBottomSheet, disabled: isDisabled || isReadonly, style: ({ pressed }) => [
                     styles.selectContainer,
                     styles.pressedContainer(pressed || isOpen),
                 ], children: [!!LeadingIcon && (_jsx(View, { children: (() => {

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

@@ -40,6 +40,16 @@ interface SelectProps extends ViewProps {
      * Label for the select
      */
     label?: string;
+    /**
+     * The variant of the label text.
+     *
+     * Supported values are:
+     * - `'heading'` – use heading text styling for the label.
+     * - `'body'` – use body text styling for the label.
+     *
+     * @default 'body'.
+     */
+    labelVariant?: 'heading' | 'body';
     /**
      * Placeholder text to show when no value is selected
      */

package/build/components/Textarea/Textarea.d.ts

@@ -7,5 +7,5 @@ export declare const TextareaComponent: import("@gluestack-ui/textarea/lib/types
     };
 }, import("react-native").TextInputProps>;
 export declare const TextareaField: import("react").ForwardRefExoticComponent<import("react-native").TextInputProps & import("react").RefAttributes<import("react-native").TextInputProps> & import("@gluestack-ui/textarea/lib/typescript/types").IInputProps>;
-declare const Textarea: ({ validationStatus, children, disabled, focused, readonly, ...props }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
+declare const Textarea: ({ validationStatus, children, disabled, focused, readonly, label, labelVariant, helperText, validText, invalidText, required, helperIcon, ...props }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
 export default Textarea;

package/build/components/Textarea/Textarea.js

@@ -1,17 +1,54 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { createTextarea } from '@gluestack-ui/textarea';
-import TextareaRoot from './TextareaRoot';
+import { useEffect } from 'react';
+import { FormField, useFormFieldContext } from '../FormField';
 import TextareaFieldComponent from './TextareaField';
-import { useFormFieldContext } from '../FormField';
+import TextareaRoot from './TextareaRoot';
 export const TextareaComponent = createTextarea({
     Root: TextareaRoot,
     Input: TextareaFieldComponent,
 });
 export const TextareaField = TextareaComponent.Input;
-const Textarea = ({ validationStatus = 'initial', children, disabled, focused, readonly, ...props }) => {
+const Textarea = ({ validationStatus = 'initial', children, disabled, focused, readonly, label, labelVariant, helperText, validText, invalidText, required, helperIcon, ...props }) => {
     const formFieldContext = useFormFieldContext();
-    const { disabled: formFieldDisabled } = formFieldContext;
-    const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
-    return (_jsx(TextareaComponent, { ...(children ? props : {}), validationStatus: validationStatusFromContext, isInvalid: validationStatusFromContext === 'invalid', isReadOnly: readonly, isDisabled: formFieldDisabled ?? disabled, isFocused: focused, children: children ? (_jsx(_Fragment, { children: children })) : (_jsx(_Fragment, { children: _jsx(TextareaField, { ...props }) })) }));
+    const textareaLabel = label ?? formFieldContext?.label;
+    const textareaHelperText = helperText ?? formFieldContext?.helperText;
+    const textareaValidText = validText ?? formFieldContext?.validText;
+    const textareaInvalidText = invalidText ?? formFieldContext?.invalidText;
+    const textareaRequired = required ?? formFieldContext?.required;
+    const textareaDisabled = disabled ?? formFieldContext?.disabled;
+    const textareaReadonly = readonly ?? formFieldContext?.readonly;
+    const textareaValidationStatus = formFieldContext?.validationStatus ?? validationStatus;
+    useEffect(() => {
+        if (formFieldContext?.setShouldHandleAccessibility) {
+            formFieldContext.setShouldHandleAccessibility(true);
+        }
+    }, []);
+    const getAccessibilityLabel = () => {
+        let accessibilityLabel = '';
+        if (textareaLabel) {
+            accessibilityLabel = accessibilityLabel + textareaLabel;
+        }
+        if (textareaRequired) {
+            accessibilityLabel = accessibilityLabel + ', required';
+        }
+        return accessibilityLabel || props.accessibilityLabel;
+    };
+    const getAccessibilityHint = () => {
+        let accessibilityHint = '';
+        if (textareaValidationStatus !== 'initial') {
+            if (accessibilityHint.length > 0) {
+                accessibilityHint = accessibilityHint + ', ';
+            }
+            if (textareaValidationStatus === 'invalid' && textareaInvalidText) {
+                accessibilityHint = accessibilityHint + textareaInvalidText;
+            }
+            if (textareaValidationStatus === 'valid' && textareaValidText) {
+                accessibilityHint = accessibilityHint + textareaValidText;
+            }
+        }
+        return accessibilityHint || props.accessibilityHint;
+    };
+    return (_jsx(FormField, { label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validText: validText, invalidText: invalidText, required: required, validationStatus: validationStatus, disabled: disabled, readonly: readonly, accessibilityHandledByChildren: true, children: _jsx(TextareaComponent, { ...(children ? props : {}), validationStatus: textareaValidationStatus, isInvalid: textareaValidationStatus === 'invalid', isReadOnly: textareaReadonly, isDisabled: textareaDisabled, isFocused: focused, required: textareaRequired, "aria-label": getAccessibilityLabel(), accessibilityHint: getAccessibilityHint(), children: children ? (_jsx(_Fragment, { children: children })) : (_jsx(_Fragment, { children: _jsx(TextareaField, { ...props }) })) }) }));
 };
 export default Textarea;

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

@@ -23,6 +23,14 @@ export interface TextareaBaseProps {
     readonly?: boolean;
     focused?: boolean;
     placeholder?: string;
+    label?: string;
+    labelVariant?: 'heading' | 'body';
+    helperText?: string;
+    helperIcon?: React.ComponentType;
+    validText?: string;
+    invalidText?: string;
+    required?: boolean;
+    isInBottomSheet?: boolean;
 }
 export interface TextareaWithChildrenProps extends TextareaBaseProps, ViewProps {
 }

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

@@ -1,6 +1,6 @@
 import VerificationInputProps from './VerificationInput.props';
 declare const VerificationInput: {
-    ({ value, onChangeText, label, helperText, helperIcon, validationStatus, validText, invalidText, disabled, readonly, secureTextEntry, style, ...props }: VerificationInputProps): import("react/jsx-runtime").JSX.Element;
+    ({ value, onChangeText, label, labelVariant, helperText, helperIcon, validationStatus, validText, invalidText, disabled, readonly, secureTextEntry, style, ...props }: VerificationInputProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default VerificationInput;

package/build/components/VerificationInput/VerificationInput.js

@@ -4,14 +4,14 @@ import { StyleSheet } from 'react-native-unistyles';
 import { FormField } from '../FormField';
 import { useVerificationInput } from './useVerificationInput';
 import { VerificationInputSlot } from './VerificationInputSlot';
-const VerificationInput = ({ value = '', onChangeText, label, helperText, helperIcon, validationStatus = 'initial', validText, invalidText, disabled = false, readonly = false, secureTextEntry = false, style, ...props }) => {
+const VerificationInput = ({ value = '', onChangeText, label, labelVariant = 'body', helperText, helperIcon, validationStatus = 'initial', validText, invalidText, disabled = false, readonly = false, secureTextEntry = false, style, ...props }) => {
     const length = 6;
     const { inputRefs, focusedIndex, handleFocus, handleBlur, handleChangeText, handleKeyPress } = useVerificationInput({
         value,
         onChangeText,
     });
     const slots = Array.from({ length }, (_, index) => index);
-    return (_jsx(FormField, { label: label, helperText: helperText, helperIcon: helperIcon, validationStatus: validationStatus, validText: validText, invalidText: invalidText, disabled: disabled, readonly: readonly, style: [styles.root, style], ...props, children: _jsx(View, { style: styles.slotsContainer, children: slots.map(index => {
+    return (_jsx(FormField, { label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validationStatus: validationStatus, validText: validText, invalidText: invalidText, disabled: disabled, readonly: readonly, style: [styles.root, style], ...props, children: _jsx(View, { style: styles.slotsContainer, children: slots.map(index => {
                 const char = value[index] || '';
                 const isActive = focusedIndex === index;
                 return (_jsx(VerificationInputSlot, { ref: ref => {

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

@@ -13,6 +13,10 @@ export interface VerificationInputProps extends ViewProps {
      * The label for the input.
      */
     label?: string;
+    /**
+     * The label variant for the input.
+     */
+    labelVariant?: 'heading' | 'body';
     /**
      * Helper text to display below the input.
      */

package/docs/components/AllComponents.web.tsx

@@ -17,7 +17,7 @@ import {
 import SpotBillingDark from '@utilitywarehouse/hearth-svg-assets/lib/spot-billing-dark.svg';
 // @ts-ignore
 import SpotBillingLight from '@utilitywarehouse/hearth-svg-assets/lib/spot-billing-light.svg';
-import { Image, Pressable, ScrollView, View, ViewProps } from 'react-native';
+import { Pressable, ScrollView, View, ViewProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import {
   Accordion,
@@ -55,6 +55,7 @@ import {
   Grid,
   Heading,
   HighlightBanner,
+  HighlightBannerImage,
   Icon,
   IconButton,
   IconContainer,
@@ -489,7 +490,7 @@ const AllComponents: React.FC = () => {
                 headingColor="energy"
                 imageContainerHeight={40}
                 image={
-                  <Image
+                  <HighlightBannerImage
                     source={{
                       uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=800&q=80',
                     }}

package/docs/theme-tokens.mdx

@@ -1,4 +1,6 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { ColorItem, ColorPalette, Meta } from '@storybook/addon-docs/blocks';
+import { color } from '@utilitywarehouse/hearth-tokens/js';
+import { Box, Link } from '../src/components';
 import { BackToTopButton, NextPrevPage } from './components';
 
 <Meta title="Theme Tokens" />
@@ -13,7 +15,10 @@ Hearth React Native provides a comprehensive set of design tokens that ensure co
 - [Colors](#colors)
   - [Brand and Service Colors](#brand-and-service-colors)
   - [Semantic Colors](#semantic-colors)
+  - [Light Theme Colors](#light-theme-colors)
+  - [Dark Theme Colors](#dark-theme-colors)
   - [Primitive Color Palette](#primitive-color-palette)
+  - [Color Scales](#color-scales)
 - [Typography](#typography)
   - [Font Family](#font-family)
   - [Font Size](#font-size)
@@ -111,7 +116,52 @@ const styles = StyleSheet.create(theme => ({
 
 The color system provides both semantic and primitive color tokens that automatically adapt to light and dark themes.
 
-You can view the full color palette in the [Hearth Tokens documentation](https://hearth.prod.uw.systems/?path=/docs/tokens_colours--docs#available-colour-tokens).
+You can view the full color scales below.
+
+<Box
+  style={{
+    position: 'sticky',
+    top: 0,
+    width: 240,
+    padding: 8,
+    height: 16,
+    overflow: 'visible',
+    marginLeft: '-260px !important',
+    zIndex: 1,
+  }}
+>
+  <ul
+    style={{
+      listStyleType: 'none',
+      paddingLeft: 0,
+      marginLeft: 0,
+    }}
+  >
+    <li>[Colors](#colors)</li>
+    <ul style={{ marginTop: 0, marginBottom: 0 }}>
+      <li>[Brand and Service Colors](#brand-and-service-colors)</li>
+      <li>[Semantic Colors](#semantic-colors)</li>
+      <li>[Light Theme Colors](#light-theme-colors)</li>
+      <li>[Dark Theme Colors](#dark-theme-colors)</li>
+      <li>[Primitive Color Palette](#primitive-color-palette)</li>
+      <li>[Color Scales](#color-scales)</li>
+    </ul>
+    <li>[Typography](#typography)</li>
+    <ul style={{ marginTop: 0, marginBottom: 0 }}>
+      <li>[Font Family](#font-family)</li>
+      <li>[Font Size](#font-size)</li>
+      <li>[Font Weight](#font-weight)</li>
+      <li>[Letter Spacing](#letter-spacing)</li>
+      <li>[Line Height](#line-height)</li>
+    </ul>
+    <li>[Spacing](#spacing)</li>
+    <li>[Border](#border)</li>
+    <ul style={{ marginTop: 0, marginBottom: 0 }}>
+      <li>[Border Width](#border-width)</li>
+      <li>[Border Radius](#border-radius)</li>
+    </ul>
+  </ul>
+</Box>
 
 ### Brand and Service Colors
 
@@ -245,6 +295,296 @@ const styles = StyleSheet.create(theme => ({
 }));
 ```
 
+#### Light Theme Colors
+
+<ColorPalette>
+  <ColorItem
+    title="Background"
+    subtitle="Background colors"
+    colors={{
+      'background.brand': color.light.background.brand,
+      'background.primary': color.light.background.primary,
+      'background.secondary': color.light.background.secondary,
+    }}
+  />
+  <ColorItem
+    title="Text"
+    subtitle="Text colors"
+    colors={{
+      'text.primary': color.light.text.primary,
+      'text.secondary': color.light.text.secondary,
+      'text.inverted': color.light.text.inverted,
+    }}
+  />
+  <ColorItem
+    title="Border"
+    subtitle="Border colors"
+    colors={{
+      'border.strong': color.light.border.strong,
+      'border.subtle': color.light.border.subtle,
+    }}
+  />
+  <ColorItem
+    title="Focus"
+    subtitle="Focus indicator colors"
+    colors={{
+      'focus.primary': color.light.focus.primary,
+      'focus.inverted': color.light.focus.inverted,
+    }}
+  />
+  <ColorItem
+    title="Feedback - Danger"
+    subtitle="Error and danger states"
+    colors={{
+      'feedback.danger.\nsurface.default': color.light.feedback.danger.surface.default,
+      'feedback.danger.\nsurface.subtle': color.light.feedback.danger.surface.subtle,
+      'feedback.danger.\nborder': color.light.feedback.danger.border,
+    }}
+  />
+  <ColorItem
+    title="Feedback - Functional"
+    subtitle="Neutral functional states"
+    colors={{
+      'feedback.functional.\nsurface.default': color.light.feedback.functional.surface.default,
+      'feedback.functional.\nsurface.subtle': color.light.feedback.functional.surface.subtle,
+      'feedback.functional.\nborder': color.light.feedback.functional.border,
+    }}
+  />
+  <ColorItem
+    title="Feedback - Info"
+    subtitle="Information states"
+    colors={{
+      'feedback.info.\nsurface.default': color.light.feedback.info.surface.default,
+      'feedback.info.\nsurface.subtle': color.light.feedback.info.surface.subtle,
+      'feedback.info.\nborder': color.light.feedback.info.border,
+    }}
+  />
+  <ColorItem
+    title="Feedback - Positive"
+    subtitle="Success and positive states"
+    colors={{
+      'feedback.positive.\nsurface.default': color.light.feedback.positive.surface.default,
+      'feedback.positive.\nsurface.subtle': color.light.feedback.positive.surface.subtle,
+      'feedback.positive.\nborder': color.light.feedback.positive.border,
+    }}
+  />
+  <ColorItem
+    title="Feedback - Warning"
+    subtitle="Warning and caution states"
+    colors={{
+      'feedback.warning.\nsurface.default': color.light.feedback.warning.surface.default,
+      'feedback.warning.\nsurface.subtle': color.light.feedback.warning.surface.subtle,
+      'feedback.warning.\nborder': color.light.feedback.warning.border,
+    }}
+  />
+  <ColorItem
+    title="Surface - Brand"
+    subtitle="Brand surface colors"
+    colors={{
+      'surface.brand.default': color.light.surface.brand.default,
+      'surface.brand.strong': color.light.surface.brand.strong,
+      'surface.brand.subtle': color.light.surface.brand.subtle,
+    }}
+  />
+  <ColorItem
+    title="Surface - Service Colors"
+    subtitle="Service-specific surface colors"
+    colors={{
+      'surface.\nbroadband.default': color.light.surface.broadband.default,
+      'surface.\nbroadband.subtle': color.light.surface.broadband.subtle,
+      'surface.\ncashback.default': color.light.surface.cashback.default,
+      'surface.\ncashback.subtle': color.light.surface.cashback.subtle,
+      'surface.\nenergy.default': color.light.surface.energy.default,
+      'surface.\nenergy.subtle': color.light.surface.energy.subtle,
+    }}
+  />
+  <ColorItem
+    title="Surface - Other Services"
+    subtitle="Additional service surface colors"
+    colors={{
+      'surface.\nhighlight.default': color.light.surface.highlight.default,
+      'surface.\nhighlight.subtle': color.light.surface.highlight.subtle,
+      'surface.\ninsurance.default': color.light.surface.insurance.default,
+      'surface.\ninsurance.subtle': color.light.surface.insurance.subtle,
+      'surface.\nmobile.default': color.light.surface.mobile.default,
+      'surface.\nmobile.subtle': color.light.surface.mobile.subtle,
+    }}
+  />
+  <ColorItem
+    title="Surface - Pig"
+    subtitle="Pig service surface colors"
+    colors={{
+      'surface.pig.default': color.light.surface.pig.default,
+      'surface.pig.subtle': color.light.surface.pig.subtle,
+    }}
+  />
+  <ColorItem
+    title="Shadow Colors"
+    subtitle="Shadow and elevation colors"
+    colors={{
+      'shadow.default': color.light.shadow.default,
+      'shadow.brand': color.light.shadow.brand,
+      'shadow.broadband': color.light.shadow.broadband,
+      'shadow.cashback': color.light.shadow.cashback,
+      'shadow.energy': color.light.shadow.energy,
+      'shadow.insurance': color.light.shadow.insurance,
+    }}
+  />
+  <ColorItem
+    title="Shadow Colors (Cont.)"
+    subtitle="Additional shadow colors"
+    colors={{
+      'shadow.mobile': color.light.shadow.mobile,
+      'shadow.pig': color.light.shadow.pig,
+    }}
+  />
+</ColorPalette>
+
+#### Dark Theme Colors
+
+<ColorPalette>
+  <ColorItem
+    title="Background"
+    subtitle="Background colors"
+    colors={{
+      'background.brand': color.dark.background.brand,
+      'background.primary': color.dark.background.primary,
+      'background.secondary': color.dark.background.secondary,
+    }}
+  />
+  <ColorItem
+    title="Text"
+    subtitle="Text colors"
+    colors={{
+      'text.primary': color.dark.text.primary,
+      'text.secondary': color.dark.text.secondary,
+      'text.inverted': color.dark.text.inverted,
+    }}
+  />
+  <ColorItem
+    title="Border"
+    subtitle="Border colors"
+    colors={{
+      'border.strong': color.dark.border.strong,
+      'border.subtle': color.dark.border.subtle,
+    }}
+  />
+  <ColorItem
+    title="Focus"
+    subtitle="Focus indicator colors"
+    colors={{
+      'focus.primary': color.dark.focus.primary,
+      'focus.inverted': color.dark.focus.inverted,
+    }}
+  />
+  <ColorItem
+    title="Feedback - Danger"
+    subtitle="Error and danger states"
+    colors={{
+      'feedback.danger.\nsurface.default': color.dark.feedback.danger.surface.default,
+      'feedback.danger.\nsurface.subtle': color.dark.feedback.danger.surface.subtle,
+      'feedback.danger.\nborder': color.dark.feedback.danger.border,
+    }}
+  />
+  <ColorItem
+    title="Feedback - Functional"
+    subtitle="Neutral functional states"
+    colors={{
+      'feedback.functional.\nsurface.default': color.dark.feedback.functional.surface.default,
+      'feedback.functional.\nsurface.subtle': color.dark.feedback.functional.surface.subtle,
+      'feedback.functional.\nborder': color.dark.feedback.functional.border,
+    }}
+  />
+  <ColorItem
+    title="Feedback - Info"
+    subtitle="Information states"
+    colors={{
+      'feedback.info.surface.\ndefault': color.dark.feedback.info.surface.default,
+      'feedback.info.surface.\nsubtle': color.dark.feedback.info.surface.subtle,
+      'feedback.info.border': color.dark.feedback.info.border,
+    }}
+  />
+  <ColorItem
+    title="Feedback - Positive"
+    subtitle="Success and positive states"
+    colors={{
+      'feedback.positive.\nsurface.default': color.dark.feedback.positive.surface.default,
+      'feedback.positive.\nsurface.subtle': color.dark.feedback.positive.surface.subtle,
+      'feedback.positive.\nborder': color.dark.feedback.positive.border,
+    }}
+  />
+  <ColorItem
+    title="Feedback - Warning"
+    subtitle="Warning and caution states"
+    colors={{
+      'feedback.warning.\nsurface.default': color.dark.feedback.warning.surface.default,
+      'feedback.warning.\nsurface.subtle': color.dark.feedback.warning.surface.subtle,
+      'feedback.warning.\nborder': color.dark.feedback.warning.border,
+    }}
+  />
+  <ColorItem
+    title="Surface - Brand"
+    subtitle="Brand surface colors"
+    colors={{
+      'surface.brand.default': color.dark.surface.brand.default,
+      'surface.brand.strong': color.dark.surface.brand.strong,
+      'surface.brand.subtle': color.dark.surface.brand.subtle,
+    }}
+  />
+  <ColorItem
+    title="Surface - Service Colors"
+    subtitle="Service-specific surface colors"
+    colors={{
+      'surface.\nbroadband.default': color.dark.surface.broadband.default,
+      'surface.\nbroadband.subtle': color.dark.surface.broadband.subtle,
+      'surface.\ncashback.default': color.dark.surface.cashback.default,
+      'surface.\ncashback.subtle': color.dark.surface.cashback.subtle,
+      'surface.\nenergy.default': color.dark.surface.energy.default,
+      'surface.\nenergy.subtle': color.dark.surface.energy.subtle,
+    }}
+  />
+  <ColorItem
+    title="Surface - Other Services"
+    subtitle="Additional service surface colors"
+    colors={{
+      'surface.\nhighlight.default': color.dark.surface.highlight.default,
+      'surface.\nhighlight.subtle': color.dark.surface.highlight.subtle,
+      'surface.\ninsurance.default': color.dark.surface.insurance.default,
+      'surface.\ninsurance.subtle': color.dark.surface.insurance.subtle,
+      'surface.\nmobile.default': color.dark.surface.mobile.default,
+      'surface.\nmobile.subtle': color.dark.surface.mobile.subtle,
+    }}
+  />
+  <ColorItem
+    title="Surface - Pig"
+    subtitle="Pig service surface colors"
+    colors={{
+      'surface.pig.default': color.dark.surface.pig.default,
+      'surface.pig.subtle': color.dark.surface.pig.subtle,
+    }}
+  />
+  <ColorItem
+    title="Shadow Colors"
+    subtitle="Shadow and elevation colors"
+    colors={{
+      'shadow.default': color.dark.shadow.default,
+      'shadow.brand': color.dark.shadow.brand,
+      'shadow.broadband': color.dark.shadow.broadband,
+      'shadow.cashback': color.dark.shadow.cashback,
+      'shadow.energy': color.dark.shadow.energy,
+      'shadow.insurance': color.dark.shadow.insurance,
+    }}
+  />
+  <ColorItem
+    title="Shadow Colors (Cont.)"
+    subtitle="Additional shadow colors"
+    colors={{
+      'shadow.mobile': color.dark.shadow.mobile,
+      'shadow.pig': color.dark.shadow.pig,
+    }}
+  />
+</ColorPalette>
+
 ### Primitive Color Palette
 
 Access the full primitive color palette for custom use cases:
@@ -266,6 +606,54 @@ Available primitive colors with full scales (0-1000):
 - `broadbandGreen`, `energyBlue`, `mobileRose`
 - `insuranceOrange`, `cashbackLilac`, `piggyPink`
 
+#### Color Scales
+
+<ColorPalette>
+  {Object.keys(color)
+    .filter(key => !['light', 'dark'].includes(key))
+    .map(key => (
+      <>
+        <ColorItem
+          key={`${key}-1`}
+          title={key}
+          subtitle={`${key}`}
+          colors={Object.keys(color[key])
+            .slice(0, 6)
+            .reduce((acc, subKey) => {
+              acc[subKey] = color[key][subKey];
+              return acc;
+            }, {})}
+        />
+        {Object.keys(color[key]).length > 6 && (
+          <ColorItem
+            key={`${key}-2`}
+            title=""
+            subtitle=""
+            colors={Object.keys(color[key])
+              .slice(6, 12)
+              .reduce((acc, subKey) => {
+                acc[subKey] = color[key][subKey];
+                return acc;
+              }, {})}
+          />
+        )}
+        {Object.keys(color[key]).length > 12 && (
+          <ColorItem
+            key={`${key}-3`}
+            title=""
+            subtitle=""
+            colors={Object.keys(color[key])
+              .slice(12, 18)
+              .reduce((acc, subKey) => {
+                acc[subKey] = color[key][subKey];
+                return acc;
+              }, {})}
+          />
+        )}
+      </>
+    ))}
+</ColorPalette>
+
 ## Typography
 
 The typography system provides a cohesive set of font properties based on the design system.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.15.3",
+  "version": "0.16.0",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -55,9 +55,9 @@
     "vite": "^7.1.3",
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
+    "@utilitywarehouse/hearth-fonts": "^0.0.4",
     "@utilitywarehouse/hearth-react-icons": "^0.7.4",
     "@utilitywarehouse/hearth-react-native-icons": "^0.7.4",
-    "@utilitywarehouse/hearth-fonts": "^0.0.4",
     "@utilitywarehouse/hearth-svg-assets": "^0.3.0",
     "@utilitywarehouse/hearth-tokens": "^0.2.2"
   },
@@ -69,7 +69,7 @@
     "react-native-gesture-handler": "^2.22.0",
     "react-native-reanimated": "3.x || ^4.x",
     "react-native-svg": ">=13.4.0",
-    "react-native-unistyles": ">=>3.0.0",
+    "react-native-unistyles": ">=3.0.0",
     "react-native-web": ">=0.19"
   },
   "scripts": {