@platform-blocks/ui 0.6.0 → 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/Dialog/Dialog.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { DialogProps } from './types';
-export declare function Dialog({ visible, variant, title, children, closable, backdrop, backdropClosable, shouldClose, onClose, width, height, style, bottomSheetSwipeZone, }: DialogProps): React.JSX.Element | null;
+export declare function Dialog({ visible, variant, title, children, closable, backdrop, backdropClosable, shouldClose, onClose, w, h, radius, style, showHeader, bottomSheetSwipeZone, }: DialogProps): React.JSX.Element | null;

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

@@ -1,17 +1,33 @@
 import { ReactNode } from 'react';
 export interface DialogProps {
+    /** Controls whether the dialog is visible. */
     visible: boolean;
+    /** Presentation style of the dialog. */
     variant?: 'modal' | 'bottomsheet' | 'fullscreen';
+    /** Optional title text shown in the header area. */
     title?: string | null;
+    /** Dialog body content. */
     children: ReactNode;
+    /** Allows the user to close the dialog via UI controls or escape/back. */
     closable?: boolean;
+    /** Whether to render the dimming backdrop behind the dialog. */
     backdrop?: boolean;
+    /** Whether tapping the backdrop should close the dialog. */
     backdropClosable?: boolean;
+    /** Triggers close animation when set to true. */
     shouldClose?: boolean;
+    /** Called when the dialog requests to close. */
     onClose?: () => void;
-    width?: number;
-    height?: number;
+    /** Optional explicit width for the dialog content (modal/bottomsheet). */
+    w?: number;
+    /** Optional explicit height for the dialog content. */
+    h?: number;
+    /** Corner radius for the dialog container (bottom sheet rounds top corners only). */
+    radius?: number;
+    /** Optional style overrides for the dialog container. */
     style?: object;
+    /** Whether to show the styled header area with background and border (default true). */
+    showHeader?: boolean;
     /** Controls which part of the bottom sheet responds to swipe-to-dismiss gestures */
     bottomSheetSwipeZone?: 'container' | 'handle' | 'none';
 }
@@ -26,6 +42,11 @@ export interface DialogConfig {
     backdropClosable?: boolean;
     isClosing?: boolean;
     bottomSheetSwipeZone?: 'container' | 'handle' | 'none';
+    w?: number;
+    h?: number;
+    radius?: number;
+    style?: object;
+    showHeader?: boolean;
 }
 export interface DialogContextValue {
     dialogs: DialogConfig[];

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';
@@ -25,7 +25,7 @@ export interface HoverCardProps {
     /** Whether rendered in portal (deprecated - always uses portal) */
     withinPortal?: boolean;
     /** Fixed width */
-    width?: number;
+    w?: number;
     /** Show directional arrow */
     withArrow?: boolean;
     /** Close on Escape (web) */
@@ -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/Image.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { ImageProps } from './types';
-export declare function Image({ src, source, alt, accessibilityLabel, resizeMode, size, width, height, aspectRatio, borderWidth, borderColor, rounded, circle, fallback, loading, onLoad, onError, onLoadStart, onLoadEnd, containerStyle, imageStyle, testID, style, ...rest }: ImageProps): React.JSX.Element | null;
+export declare function Image({ src, source, alt, accessibilityLabel, resizeMode, size, w, h, aspectRatio, borderWidth, borderColor, rounded, circle, fallback, loading, onLoad, onError, onLoadStart, onLoadEnd, containerStyle, imageStyle, testID, style, ...rest }: ImageProps): React.JSX.Element | null;

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';
@@ -9,7 +9,7 @@ export interface BaseComponentProps extends SpacingProps {
     /** Additional CSS styles */
     style?: any;
 }
-export interface ImageProps extends BaseComponentProps, Omit<LayoutProps, 'width' | 'height'>, BorderRadiusProps {
+export interface ImageProps extends BaseComponentProps, Omit<LayoutProps, 'w' | 'h'>, BorderRadiusProps {
     /** Image source URI */
     src: string;
     /** Image source object (alternative to src) */
@@ -25,9 +25,9 @@ export interface ImageProps extends BaseComponentProps, Omit<LayoutProps, 'width
     /** Image size preset */
     size?: SizeValue | number;
     /** Custom width */
-    width?: number | string;
+    w?: number | string;
     /** Custom height */
-    height?: number | string;
+    h?: number | string;
     /** Aspect ratio */
     aspectRatio?: number;
     /** Border width */
@@ -51,7 +51,7 @@ export interface ImageProps extends BaseComponentProps, Omit<LayoutProps, 'width
     /** 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/Input/styles.d.ts

@@ -16,18 +16,7 @@ export declare const createInputStyles: (theme: PlatformBlocksTheme, isRTL?: boo
             fontSize: number;
             marginTop: number;
         };
-        input: {
-            outlineWidth?: number | undefined;
-            border?: string | undefined;
-            backgroundColor?: string | undefined;
-            flex: number;
-            fontSize: number;
-            color: string;
-            paddingVertical: number;
-            paddingHorizontal: number;
-            minHeight: number;
-            fontFamily: string;
-        };
+        input: any;
         inputContainer: any;
         label: {
             color: string;

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/Layout/Layout.d.ts

@@ -14,5 +14,6 @@ export interface ColumnProps extends Omit<FlexProps, 'direction'> {
 export declare const Row: React.FC<RowProps>;
 /**
  * Column component - alias for Flex with direction="column"
+ * Defaults to fullWidth={true} since vertical layouts typically fill available width
  */
 export declare const Column: React.FC<ColumnProps>;

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;
 }