@platform-blocks/ui 0.6.1 → 0.7.0

package/lib/components/Accordion/types.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { ViewStyle, TextStyle } from 'react-native';
+import type { ViewStyle, TextStyle, StyleProp } from 'react-native';
 import type { SizeValue } from '../../core/theme/sizes';
 import type { BorderRadiusProps } from '../../core/theme/radius';
 import type { PlatformBlocksTheme } from '../../core/theme/types';
@@ -100,19 +100,19 @@ export interface AccordionProps extends SpacingProps, BorderRadiusProps {
     /**
      * Root container style override.
      */
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     /**
      * Header row style override applied to each item.
      */
-    headerStyle?: ViewStyle;
+    headerStyle?: StyleProp<ViewStyle>;
     /**
      * Collapsible content container style override.
      */
-    contentStyle?: ViewStyle;
+    contentStyle?: StyleProp<ViewStyle>;
     /**
      * Text style applied to the header label.
      */
-    headerTextStyle?: TextStyle;
+    headerTextStyle?: StyleProp<TextStyle>;
     /**
      * Explicit persistence key. If omitted, an automatic hash key will be generated when uncontrolled.
      */

package/lib/components/AutoComplete/types.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TextInputProps, ViewStyle } from 'react-native';
+import { TextInputProps, ViewStyle, StyleProp } from 'react-native';
 import { SpacingProps, LayoutProps } from '../../core/utils';
 import type { SizeValue } from '../../core/theme/types';
 import type { RadiusValue } from '../../core/theme/radius';
@@ -41,7 +41,7 @@ export interface AutoCompleteProps extends SpacingProps, LayoutProps {
     /** Callback when the clear button is pressed */
     onClear?: () => void;
     /** Custom style */
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     /** Data source for suggestions */
     data?: AutoCompleteOption[];
     /** Async data fetcher */
@@ -90,7 +90,7 @@ export interface AutoCompleteProps extends SpacingProps, LayoutProps {
         source: 'input' | 'modal';
     }) => React.ReactNode;
     /** Optional style override for the selected values container */
-    selectedValuesContainerStyle?: ViewStyle;
+    selectedValuesContainerStyle?: StyleProp<ViewStyle>;
     /** Additional props applied to the default Chip renderer for selected values */
     selectedValueChipProps?: Partial<ChipProps>;
     /** Controls whether the input regains focus after selecting an option */

package/lib/components/Avatar/types.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ViewStyle } from 'react-native';
+import { ViewStyle, StyleProp } from 'react-native';
 import type { ComponentSizeValue } from '../../core/theme/componentSize';
 export interface AvatarProps {
     /** Size of the avatar */
@@ -17,7 +17,7 @@ export interface AvatarProps {
     /** Color override for the status indicator */
     indicatorColor?: string;
     /** Style override for the avatar container */
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     /** Accessibility label for the avatar image */
     accessibilityLabel?: string;
     /** Primary label displayed to the right of the avatar (string or custom React node) */
@@ -33,7 +33,7 @@ export interface AvatarGroupProps {
     children: React.ReactNode;
     limit?: number;
     spacing?: number;
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     size?: ComponentSizeValue;
     /** Whether to add borders around avatars for separation */
     bordered?: boolean;

package/lib/components/Badge/types.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ViewStyle, TextStyle } from 'react-native';
+import { ViewStyle, TextStyle, StyleProp } from 'react-native';
 import { type ComponentSizeValue } from '../../core/theme/componentSize';
 import { SpacingProps } from '../../core/utils';
 import { BorderRadiusProps } from '../../core/theme/radius';
@@ -19,8 +19,8 @@ export interface BadgeProps extends SpacingProps, BorderRadiusProps, ShadowProps
     onRemove?: () => void;
     removePosition?: 'left' | 'right';
     disabled?: boolean;
-    style?: ViewStyle;
-    textStyle?: TextStyle;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
     radius?: any;
     shadow?: any;
 }

package/lib/components/Block/types.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ViewStyle } from 'react-native';
+import { ViewStyle, StyleProp } from 'react-native';
 import type { SpacingProps } from '../../core/utils/spacing';
 import type { PolymorphicFactory } from '../../core/factory';
 /**
@@ -79,7 +79,7 @@ export interface BlockProps extends SpacingProps, BlockStyleProps {
     /** The component to render as */
     component?: React.ElementType;
     /** Custom style object */
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     /** Test ID for testing purposes */
     testID?: string;
     /** Accessibility label */

package/lib/components/Blockquote/types.d.ts

@@ -1,4 +1,4 @@
-import type { ViewStyle } from 'react-native';
+import type { ViewStyle, StyleProp } from 'react-native';
 import type { SizeValue } from '../../core/theme/types';
 import type { BrandName } from '../BrandIcon/brands';
 export interface BlockquoteAuthor {
@@ -44,7 +44,7 @@ export interface BlockquoteProps {
     alignment?: 'left' | 'center' | 'right';
     border?: boolean;
     shadow?: boolean;
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     onPress?: () => void;
 }
 export interface BlockquoteAttributionProps {

package/lib/components/Breadcrumbs/types.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ViewStyle, TextStyle } from 'react-native';
+import { ViewStyle, TextStyle, StyleProp } from 'react-native';
 import { SpacingProps } from '../../core/theme/types';
 import { type ComponentSizeValue } from '../../core/theme/componentSize';
 export interface BreadcrumbItem {
@@ -26,11 +26,11 @@ export interface BreadcrumbsProps extends SpacingProps {
     /** Whether to show icons */
     showIcons?: boolean;
     /** Custom styles */
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     /** Custom text styles */
-    textStyle?: TextStyle;
+    textStyle?: StyleProp<TextStyle>;
     /** Custom separator styles */
-    separatorStyle?: ViewStyle;
+    separatorStyle?: StyleProp<ViewStyle>;
     /** Accessibility label */
     accessibilityLabel?: string;
 }

package/lib/components/Calendar/types.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ViewStyle } from 'react-native';
+import { ViewStyle, StyleProp } from 'react-native';
 import { SizeValue } from '../../core/theme/types';
 import type { DisclaimerSupport } from '../_internal/Disclaimer';
 export type CalendarLevel = 'month' | 'year' | 'decade';
@@ -88,7 +88,7 @@ export interface DayProps {
     onMouseEnter?: () => void;
     onMouseLeave?: () => void;
     size?: SizeValue;
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     children?: React.ReactNode;
     [key: string]: any;
 }

package/lib/components/Carousel/types.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ViewStyle } from 'react-native';
+import { ViewStyle, StyleProp } from 'react-native';
 import { SpacingProps } from '../../core/utils';
 import type { ResponsiveSize } from '../AppShell/types';
 import type { ComponentSizeValue } from '../../core/theme/componentSize';
@@ -64,9 +64,9 @@ export interface CarouselProps extends SpacingProps {
     /** Callback fired when the active slide changes */
     onSlideChange?: (index: number) => void;
     /** Style override for the carousel container */
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     /** Style override applied to each slide item */
-    itemStyle?: ViewStyle;
+    itemStyle?: StyleProp<ViewStyle>;
     /** Enable snapping to individual items */
     snapToItem?: boolean;
     /** Position of navigation arrows relative to the carousel */

package/lib/components/Chip/types.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ViewStyle, TextStyle } from 'react-native';
+import { ViewStyle, TextStyle, StyleProp } from 'react-native';
 import { SizeValue } from '../../core/theme/sizes';
 import { SpacingProps } from '../../core/utils';
 import { BorderRadiusProps } from '../../core/theme/radius';
@@ -15,8 +15,8 @@ export interface ChipProps extends SpacingProps, BorderRadiusProps, ShadowProps
     onRemove?: () => void;
     removePosition?: 'left' | 'right';
     disabled?: boolean;
-    style?: ViewStyle;
-    textStyle?: TextStyle;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
     radius?: any;
     shadow?: any;
 }

package/lib/components/CodeBlock/types.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ViewStyle, TextStyle } from 'react-native';
+import { ViewStyle, TextStyle, StyleProp } from 'react-native';
 import { SpacingProps } from '../../core/utils';
 export type CodeBlockToken = 'keyword' | 'string' | 'comment' | 'number' | 'function' | 'operator' | 'punctuation' | 'tag' | 'attribute' | 'className';
 export type CodeBlockTextPalette = string | string[] | Partial<Record<CodeBlockToken, string>>;
@@ -37,11 +37,11 @@ export interface CodeBlockProps extends SpacingProps {
     /** Callback when code is copied */
     onCopy?: (code: string) => void;
     /** Custom styles for the code block container and text */
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     /** Custom styles for the code text */
-    textStyle?: TextStyle;
+    textStyle?: StyleProp<TextStyle>;
     /** Custom styles for the title text */
-    titleStyle?: TextStyle;
+    titleStyle?: StyleProp<TextStyle>;
     /** Lines to highlight, e.g. ["1", "3-5"] */
     highlightLines?: string[];
     /** Show a spoiler for the code block */

package/lib/components/ColorPicker/types.d.ts

@@ -1,4 +1,4 @@
-import { ViewStyle, TextStyle } from 'react-native';
+import { ViewStyle, TextStyle, StyleProp } from 'react-native';
 import { SpacingProps } from '../../core/theme/types';
 import { LayoutProps } from '../../core/utils';
 import { BorderRadiusProps } from '../../core/theme/radius';
@@ -58,11 +58,11 @@ export interface ColorPickerProps extends SpacingProps, LayoutProps, BorderRadiu
     /** Whether dropdown should avoid the on-screen keyboard when visible */
     keyboardAvoidance?: boolean;
     /** Custom style for the container */
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     /** Custom style for the preview */
-    previewStyle?: ViewStyle;
+    previewStyle?: StyleProp<ViewStyle>;
     /** Custom style for the input */
-    inputStyle?: TextStyle;
+    inputStyle?: StyleProp<TextStyle>;
     /** Whether the picker should display a clear button */
     clearable?: boolean;
     /** Accessible label for the clear button */

package/lib/components/CopyButton/types.d.ts

@@ -1,4 +1,4 @@
-import { ViewStyle } from 'react-native';
+import { ViewStyle, StyleProp } from 'react-native';
 import type { ComponentSizeValue } from '../../core/theme/componentSize';
 export interface CopyButtonProps {
     /** The text to copy to clipboard */
@@ -16,7 +16,7 @@ export interface CopyButtonProps {
     /** Visual size token */
     size?: ComponentSizeValue;
     /** Style overrides for the button container */
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     /** Disable the "copied to clipboard" toast */
     disableToast?: boolean;
     /** Tooltip text */

package/lib/components/DatePicker/types.d.ts

@@ -1,4 +1,4 @@
-import { ViewStyle } from 'react-native';
+import { ViewStyle, StyleProp } from 'react-native';
 import { BaseInputProps } from '../Input/types';
 import { SizeValue } from '../../core/theme/types';
 import type { CalendarProps as CoreCalendarProps, CalendarType, CalendarValue, CalendarLevel } from '../Calendar/types';
@@ -14,7 +14,7 @@ export interface DatePickerProps {
     /** Pass-through customization for underlying Calendar */
     calendarProps?: Partial<CoreCalendarProps>;
     /** Optional container style for the inline calendar */
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     /** Test identifier */
     testID?: string;
     /** Accessibility label for the inline calendar region */

package/lib/components/Divider/types.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ViewStyle, View } from 'react-native';
+import { ViewStyle, View, StyleProp } from 'react-native';
 import { SpacingProps } from '../../core/utils';
 import { SizeValue } from '../../core/theme/sizes';
 export type DividerOrientation = 'horizontal' | 'vertical';
@@ -13,7 +13,7 @@ export interface DividerProps extends SpacingProps {
     size?: SizeValue | number;
     label?: React.ReactNode;
     labelPosition?: 'left' | 'center' | 'right';
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     testID?: string;
 }
 export interface DividerFactoryPayload {

package/lib/components/Grid/types.d.ts

@@ -1,4 +1,4 @@
-import type { ViewStyle } from 'react-native';
+import type { ViewStyle, StyleProp } from 'react-native';
 import type { SpacingProps } from '../../core/utils/spacing';
 import type { SizeValue } from '../../core/theme/sizes';
 import type { ResponsiveProp } from '../../core/theme/breakpoints';
@@ -16,7 +16,7 @@ export interface GridProps extends SpacingProps {
     /** Children elements */
     children?: React.ReactNode;
     /** Custom styles */
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     /** Test ID for testing */
     testID?: string;
 }
@@ -26,7 +26,7 @@ export interface GridItemProps extends SpacingProps {
     /** Children elements */
     children?: React.ReactNode;
     /** Custom styles */
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     /** Test ID for testing */
     testID?: string;
 }

package/lib/components/HoverCard/types.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ViewStyle, View } from 'react-native';
+import { ViewStyle, View, StyleProp } from 'react-native';
 import { SizeValue } from '../../core/theme/sizes';
 export type HoverCardPosition = 'top' | 'bottom' | 'left' | 'right' | 'auto';
 export type HoverCardShadow = 'none' | 'sm' | 'md' | 'lg';
@@ -37,7 +37,7 @@ export interface HoverCardProps {
     /** Disable interactions */
     disabled?: boolean;
     /** Style override */
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     /** Test id */
     testID?: string;
     /** z-index layering */

package/lib/components/Image/types.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ViewStyle, ImageStyle } from 'react-native';
+import { ViewStyle, ImageStyle, StyleProp } from 'react-native';
 import { SizeValue, ColorValue, SpacingProps } from '../../core/theme/types';
 import { LayoutProps } from '../../core/utils';
 import { BorderRadiusProps } from '../../core/theme/radius';
@@ -51,7 +51,7 @@ export interface ImageProps extends BaseComponentProps, Omit<LayoutProps, 'w' |
     /** Called when image finishes loading (success or error) */
     onLoadEnd?: () => void;
     /** Container style */
-    containerStyle?: ViewStyle;
+    containerStyle?: StyleProp<ViewStyle>;
     /** Image style overrides */
-    imageStyle?: ImageStyle;
+    imageStyle?: StyleProp<ImageStyle>;
 }

package/lib/components/Indicator/types.d.ts

@@ -1,4 +1,4 @@
-import type { ViewStyle } from 'react-native';
+import type { ViewStyle, StyleProp } from 'react-native';
 import type { SizeValue } from '../../core/theme/types';
 export interface IndicatorProps {
     size?: SizeValue | number;
@@ -7,7 +7,7 @@ export interface IndicatorProps {
     borderWidth?: number;
     placement?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     offset?: number;
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     children?: React.ReactNode;
     invisible?: boolean;
 }

package/lib/components/Knob/components/SurfaceLayers.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ViewStyle } from 'react-native';
+import { ViewStyle, StyleProp } from 'react-native';
 import type { KnobFillStyle } from '../types';
 import type { LayoutState } from '../hooks/useKnobGeometry';
 export type SurfaceLayersProps = {
@@ -15,7 +15,7 @@ export type SurfaceLayersProps = {
     ringThickness: number;
     ringCap: 'butt' | 'round';
     ringShadowStyle: ViewStyle | null;
-    trackStyle?: ViewStyle;
+    trackStyle?: StyleProp<ViewStyle>;
     showContiguousProgress: boolean;
     progressPath: string;
     progressStrokeColor: string;

package/lib/components/Knob/components/ThumbLayer.d.ts

@@ -7,7 +7,7 @@ export type ThumbLayerProps = {
     thumbColor: string;
     disabled: boolean;
     thumbAnimatedStyle: StyleProp<ViewStyle>;
-    thumbStyle?: ViewStyle;
+    thumbStyle?: StyleProp<ViewStyle>;
     displayValue: number;
     displayAngle: number;
 };

package/lib/components/Knob/components/TickLayers.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { TextStyle } from 'react-native';
+import type { StyleProp, TextStyle } from 'react-native';
 import type { KnobAppearance, KnobMark } from '../types';
 import type { LayoutState } from '../hooks/useKnobGeometry';
 export type TickLayersProps = {
@@ -21,7 +21,7 @@ export type TickLayersProps = {
     displayValue: number;
     activeMark?: KnobMark | null;
     disabled: boolean;
-    markLabelStyle?: TextStyle;
+    markLabelStyle?: StyleProp<TextStyle>;
     labelColor: string;
 };
 export declare const TickLayers: React.FC<TickLayersProps>;

package/lib/components/Knob/types.d.ts

@@ -1,5 +1,5 @@
 import type { FC, ReactNode } from 'react';
-import type { TextStyle, ViewStyle } from 'react-native';
+import type { TextStyle, ViewStyle, StyleProp } from 'react-native';
 import type { SpacingProps, LayoutProps } from '../../core/utils';
 export interface KnobMark {
     /** Absolute value within the knob range to display */
@@ -23,17 +23,17 @@ export interface KnobValueLabelConfig {
     /** Optional suffix rendered after the value */
     suffix?: ReactNode;
     /** Style overrides for the wrapper */
-    containerStyle?: ViewStyle;
+    containerStyle?: StyleProp<ViewStyle>;
     /** Style overrides for the primary text */
-    textStyle?: TextStyle;
+    textStyle?: StyleProp<TextStyle>;
     /** Secondary readout rendered at an independent slot */
     secondary?: {
         formatter?: (value: number) => ReactNode;
         position?: KnobValueLabelPosition;
         prefix?: ReactNode;
         suffix?: ReactNode;
-        containerStyle?: ViewStyle;
-        textStyle?: TextStyle;
+        containerStyle?: StyleProp<ViewStyle>;
+        textStyle?: StyleProp<TextStyle>;
     };
 }
 export type KnobInteractionMode = 'spin' | 'vertical-slide' | 'horizontal-slide' | 'scroll';
@@ -109,7 +109,7 @@ export interface KnobThumbStyle {
     strokeColor?: string;
     offset?: number;
     glow?: KnobThumbGlow;
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     renderThumb?: (context: KnobThumbRenderContext) => ReactNode;
 }
 export type KnobTickSource = 'marks' | 'steps' | 'values';
@@ -119,7 +119,7 @@ export interface KnobTickLabelConfig {
     formatter?: (mark: KnobMark, index: number) => ReactNode;
     position?: 'inner' | 'center' | 'outer';
     offset?: number;
-    style?: TextStyle;
+    style?: StyleProp<TextStyle>;
 }
 export interface KnobTickLayer {
     source?: KnobTickSource;
@@ -239,13 +239,13 @@ export interface KnobProps extends SpacingProps, LayoutProps {
     /** Placement for the external label */
     labelPosition?: 'left' | 'right' | 'top' | 'bottom';
     /** Style overrides for the outer container */
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     /** Style overrides for the circular track */
-    trackStyle?: ViewStyle;
+    trackStyle?: StyleProp<ViewStyle>;
     /** Style overrides for the thumb */
-    thumbStyle?: ViewStyle;
+    thumbStyle?: StyleProp<ViewStyle>;
     /** Style overrides for mark labels */
-    markLabelStyle?: TextStyle;
+    markLabelStyle?: StyleProp<TextStyle>;
     /** Accessibility identifier */
     testID?: string;
     /** Screen reader label */

package/lib/components/ListGroup/types.d.ts

@@ -1,4 +1,4 @@
-import type { ViewStyle, TextStyle } from 'react-native';
+import type { ViewStyle, TextStyle, StyleProp } from 'react-native';
 import type { ComponentSizeValue } from '../../core/theme/componentSize';
 export interface ListGroupMetrics {
     paddingVertical: number;
@@ -14,7 +14,7 @@ export interface ListGroupProps {
     radius?: 'sm' | 'md' | 'lg' | number;
     dividers?: boolean;
     insetDividers?: boolean;
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
 }
 export interface ListGroupItemProps {
     children: React.ReactNode;
@@ -24,8 +24,8 @@ export interface ListGroupItemProps {
     danger?: boolean;
     startSection?: React.ReactNode;
     endSection?: React.ReactNode;
-    style?: ViewStyle;
-    textStyle?: TextStyle;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
 }
 export interface ListGroupContextValue {
     size: ComponentSizeValue;

package/lib/components/Loader/types.d.ts

@@ -1,4 +1,4 @@
-import { ViewStyle } from 'react-native';
+import { ViewStyle, StyleProp } from 'react-native';
 import { SizeValue } from '../../core/theme/sizes';
 import { SpacingProps } from '../../core/utils';
 export type LoaderVariant = 'bars' | 'dots' | 'oval';
@@ -12,7 +12,7 @@ export interface LoaderProps extends SpacingProps {
     /** Animation speed in milliseconds */
     speed?: number;
     /** Container style */
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     /** Test ID for testing */
     testID?: string;
 }

package/lib/components/Masonry/types.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { ViewStyle } from 'react-native';
+import type { ViewStyle, StyleProp } from 'react-native';
 import type { FlashListProps } from '@shopify/flash-list';
 import type { SpacingProps } from '../../core/utils/spacing';
 import type { SizeValue } from '../../core/theme/sizes';
@@ -11,7 +11,7 @@ export interface MasonryItem {
     /** Optional custom height ratio (default: 1) */
     heightRatio?: number;
     /** Optional custom styling for the item */
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
 }
 export interface MasonryProps extends SpacingProps {
     /** Array of items to display in masonry layout */
@@ -25,9 +25,9 @@ export interface MasonryProps extends SpacingProps {
     /** Custom item renderer - receives item and index */
     renderItem?: (item: MasonryItem, index: number) => ReactNode;
     /** Content container style */
-    contentContainerStyle?: ViewStyle;
+    contentContainerStyle?: StyleProp<ViewStyle>;
     /** Custom styles */
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     /** Test ID for testing */
     testID?: string;
     /** Loading state */

package/lib/components/Navigation/types.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { ViewStyle } from 'react-native';
+import type { ViewStyle, StyleProp } from 'react-native';
 export interface NavigationState {
     routes: Route[];
     index: number;
@@ -46,7 +46,7 @@ export interface DrawerScreenProps extends Omit<ScreenProps, 'options'> {
 }
 export interface DrawerNavigatorProps extends NavigatorProps {
     screenOptions?: DrawerOptions;
-    drawerStyle?: ViewStyle;
+    drawerStyle?: StyleProp<ViewStyle>;
     drawerContent?: (props: any) => ReactNode;
 }
 export interface StackOptions extends NavigationOptions {

package/lib/components/Notice/types.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, ViewStyle } from 'react-native';
+import { View, ViewStyle, StyleProp } from 'react-native';
 import { SpacingProps } from '../../core/utils';
 import { BorderRadiusProps } from '../../core/theme/radius';
 export type NoticeVariant = 'light' | 'filled' | 'outline' | 'subtle';
@@ -16,7 +16,7 @@ export interface NoticeProps extends SpacingProps, BorderRadiusProps {
     withCloseButton?: boolean;
     closeButtonLabel?: string;
     onClose?: () => void;
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     testID?: string;
 }
 export interface NoticeFactoryPayload {

package/lib/components/Pagination/types.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ViewStyle, TextStyle } from 'react-native';
+import { ViewStyle, TextStyle, StyleProp } from 'react-native';
 import { SpacingProps } from '../../core/theme/types';
 import type { ComponentSizeValue } from '../../core/theme/componentSize';
 export interface PaginationMetrics {
@@ -41,15 +41,15 @@ export interface PaginationProps extends SpacingProps {
     /** Whether pagination is disabled */
     disabled?: boolean;
     /** Custom styles */
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     /** Custom button styles */
-    buttonStyle?: ViewStyle;
+    buttonStyle?: StyleProp<ViewStyle>;
     /** Custom active button styles */
-    activeButtonStyle?: ViewStyle;
+    activeButtonStyle?: StyleProp<ViewStyle>;
     /** Custom text styles */
-    textStyle?: TextStyle;
+    textStyle?: StyleProp<TextStyle>;
     /** Custom active text styles */
-    activeTextStyle?: TextStyle;
+    activeTextStyle?: StyleProp<TextStyle>;
     /** Hide pagination when there's only one page */
     hideOnSinglePage?: boolean;
     /** Show page size selector */

package/lib/components/Progress/types.d.ts

@@ -1,4 +1,4 @@
-import type { View, Text, ViewStyle } from 'react-native';
+import type { View, Text, ViewStyle, StyleProp } from 'react-native';
 import type { SpacingProps } from '../../core/utils';
 import type { SizeValue } from '../../core/theme/sizes';
 export type ProgressColor = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'gray';
@@ -11,7 +11,7 @@ export interface ProgressProps extends SpacingProps {
     animate?: boolean;
     transitionDuration?: number;
     fullWidth?: boolean;
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     'aria-label'?: string;
     testID?: string;
 }
@@ -24,7 +24,7 @@ export interface ProgressRootProps extends SpacingProps {
     size?: SizeValue;
     radius?: SizeValue;
     children: React.ReactNode;
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     testID?: string;
 }
 export interface ProgressLabelProps {