@platform-blocks/ui 0.7.3 → 0.8.0

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TextInputProps, ViewStyle, StyleProp } from 'react-native';
+import { TextInputProps, TextInputProps as RNTextInputProps, 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';
@@ -109,6 +109,34 @@ export interface AutoCompleteProps extends SpacingProps, LayoutProps {
     minWidth?: number;
     /** Additional TextInput props */
     textInputProps?: Omit<TextInputProps, 'value' | 'onChangeText' | 'placeholder'>;
+    /** Text auto-capitalization behavior */
+    autoCapitalize?: RNTextInputProps['autoCapitalize'];
+    /** Whether to enable auto-correct */
+    autoCorrect?: boolean;
+    /** Whether to auto-focus on mount */
+    autoFocus?: boolean;
+    /** Return key type for soft keyboard */
+    returnKeyType?: RNTextInputProps['returnKeyType'];
+    /** Whether to blur on submit */
+    blurOnSubmit?: boolean;
+    /** Select all text on focus */
+    selectTextOnFocus?: boolean;
+    /** iOS text content type for autofill */
+    textContentType?: RNTextInputProps['textContentType'];
+    /** Text alignment */
+    textAlign?: RNTextInputProps['textAlign'];
+    /** Whether spell check is enabled */
+    spellCheck?: boolean;
+    /** Input mode (modern alternative to keyboardType) */
+    inputMode?: RNTextInputProps['inputMode'];
+    /** Enter key hint */
+    enterKeyHint?: RNTextInputProps['enterKeyHint'];
+    /** Color of the text selection handles and highlight */
+    selectionColor?: string;
+    /** Whether to show the soft keyboard on focus */
+    showSoftInputOnFocus?: boolean;
+    /** Whether the field is editable */
+    editable?: boolean;
     /** Placement preference for the suggestions dropdown (default: 'bottom-start') */
     placement?: 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
     /** Enable flipping to opposite side when dropdown would go off-screen (default: true) */

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { KeyboardTypeOptions, TextInputProps } from 'react-native';
+import { KeyboardTypeOptions, TextInputProps as RNTextInputProps } from 'react-native';
 import { SpacingProps } from '../../core/theme/types';
 import { LayoutProps } from '../../core/utils';
 import { BorderRadiusProps } from '../../core/theme/radius';
@@ -75,7 +75,7 @@ export interface BaseInputProps extends SpacingProps, LayoutProps, BorderRadiusP
     /** Identifier used with KeyboardManagerProvider to request refocus */
     keyboardFocusId?: string;
 }
-export type ExtendedTextInputProps = Omit<TextInputProps, keyof BaseInputProps> & {
+export type ExtendedTextInputProps = Omit<RNTextInputProps, keyof BaseInputProps> & {
     onKeyDown?: (event: any) => void;
     onKeyUp?: (event: any) => void;
 };
@@ -104,6 +104,34 @@ export interface InputProps extends BaseInputProps {
     textInputProps?: ExtendedTextInputProps;
     /** Ref to underlying TextInput (focus control) */
     inputRef?: React.Ref<any>;
+    /** Text auto-capitalization behavior */
+    autoCapitalize?: RNTextInputProps['autoCapitalize'];
+    /** Whether to enable auto-correct */
+    autoCorrect?: boolean;
+    /** Whether to auto-focus on mount */
+    autoFocus?: boolean;
+    /** Return key type for soft keyboard */
+    returnKeyType?: RNTextInputProps['returnKeyType'];
+    /** Whether to blur on submit */
+    blurOnSubmit?: boolean;
+    /** Select all text on focus */
+    selectTextOnFocus?: boolean;
+    /** iOS text content type for autofill */
+    textContentType?: RNTextInputProps['textContentType'];
+    /** Text alignment */
+    textAlign?: RNTextInputProps['textAlign'];
+    /** Whether spell check is enabled */
+    spellCheck?: boolean;
+    /** Input mode (modern alternative to keyboardType) */
+    inputMode?: RNTextInputProps['inputMode'];
+    /** Hint for the enter key */
+    enterKeyHint?: RNTextInputProps['enterKeyHint'];
+    /** Color of the text selection handles and highlight */
+    selectionColor?: string;
+    /** Whether to show the soft keyboard on focus */
+    showSoftInputOnFocus?: boolean;
+    /** Whether the field is read-only (alias for !editable) */
+    editable?: boolean;
 }
 export interface PasswordInputProps extends Omit<InputProps, 'type' | 'secureTextEntry'> {
     /** Whether to show password strength indicator */

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

@@ -23,4 +23,26 @@ export interface KeyboardAwareLayoutProps extends SpacingProps, Omit<KeyboardAvo
     scrollRef?: React.Ref<ScrollView>;
     /** Additional props that will be spread onto the internal ScrollView */
     scrollViewProps?: ScrollViewProps;
+    /** Whether scrolling is enabled */
+    scrollEnabled?: boolean;
+    /** Whether the scroll view bounces past the edge of content (iOS) */
+    bounces?: boolean;
+    /** Scroll event callback */
+    onScroll?: ScrollViewProps['onScroll'];
+    /** Throttle interval for scroll events in ms */
+    scrollEventThrottle?: number;
+    /** Callback when momentum scroll begins */
+    onMomentumScrollBegin?: ScrollViewProps['onMomentumScrollBegin'];
+    /** Callback when momentum scroll ends */
+    onMomentumScrollEnd?: ScrollViewProps['onMomentumScrollEnd'];
+    /** Whether to show the vertical scroll indicator */
+    showsVerticalScrollIndicator?: boolean;
+    /** Whether to show the horizontal scroll indicator */
+    showsHorizontalScrollIndicator?: boolean;
+    /** Deceleration rate ('normal' | 'fast' | number) */
+    decelerationRate?: ScrollViewProps['decelerationRate'];
+    /** Over-scroll mode for Android */
+    overScrollMode?: ScrollViewProps['overScrollMode'];
+    /** Pull-to-refresh control */
+    refreshControl?: ScrollViewProps['refreshControl'];
 }

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

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import type { ViewStyle, StyleProp } from 'react-native';
-import type { FlashListProps } from '@shopify/flash-list';
+import type { FlashListProps, ViewToken } from '@shopify/flash-list';
 import type { SpacingProps } from '../../core/utils/spacing';
 import type { SizeValue } from '../../core/theme/sizes';
 export interface MasonryItem {
@@ -36,4 +36,31 @@ export interface MasonryProps extends SpacingProps {
     emptyContent?: ReactNode;
     /** Flash list props to pass through */
     flashListProps?: Partial<Omit<FlashListProps<MasonryItem>, 'data' | 'renderItem' | 'numColumns'>>;
+    /** Callback when the end of the list is reached (for pagination / infinite scroll) */
+    onEndReached?: ((info: {
+        distanceFromEnd: number;
+    }) => void) | null;
+    /** Distance from end (in pixels) to trigger onEndReached (default: FlashList default) */
+    onEndReachedThreshold?: number;
+    /** Callback when viewable items change */
+    onViewableItemsChanged?: ((info: {
+        viewableItems: ViewToken<MasonryItem>[];
+        changed: ViewToken<MasonryItem>[];
+    }) => void) | null;
+    /** Whether scrolling is enabled */
+    scrollEnabled?: boolean;
+    /** Component rendered when the list is empty */
+    ListEmptyComponent?: React.ComponentType<any> | React.ReactElement | null;
+    /** Component rendered at the bottom of the list */
+    ListFooterComponent?: React.ComponentType<any> | React.ReactElement | null;
+    /** Component rendered at the top of the list */
+    ListHeaderComponent?: React.ComponentType<any> | React.ReactElement | null;
+    /** Estimated size of each item (performance hint) */
+    estimatedItemSize?: number;
+    /** Pull-to-refresh control */
+    refreshControl?: React.ReactElement;
+    /** Scroll event callback */
+    onScroll?: FlashListProps<MasonryItem>['onScroll'];
+    /** Throttle interval for scroll events in ms */
+    scrollEventThrottle?: number;
 }

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

@@ -1,3 +1,4 @@
+import { TextInputProps as RNTextInputProps } from 'react-native';
 import { BaseInputProps, ExtendedTextInputProps } from '../Input/types';
 export interface NumberInputProps extends Omit<BaseInputProps, 'value' | 'onChangeText'> {
     /** Number value */
@@ -80,6 +81,34 @@ export interface NumberInputProps extends Omit<BaseInputProps, 'value' | 'onChan
     allowEmpty?: boolean;
     /** Additional TextInput props */
     textInputProps?: ExtendedTextInputProps;
+    /** Text auto-capitalization behavior */
+    autoCapitalize?: RNTextInputProps['autoCapitalize'];
+    /** Whether to enable auto-correct */
+    autoCorrect?: boolean;
+    /** Whether to auto-focus on mount */
+    autoFocus?: boolean;
+    /** Return key type for soft keyboard */
+    returnKeyType?: RNTextInputProps['returnKeyType'];
+    /** Whether to blur on submit */
+    blurOnSubmit?: boolean;
+    /** Select all text on focus */
+    selectTextOnFocus?: boolean;
+    /** iOS text content type for autofill */
+    textContentType?: RNTextInputProps['textContentType'];
+    /** Text alignment */
+    textAlign?: RNTextInputProps['textAlign'];
+    /** Whether spell check is enabled */
+    spellCheck?: boolean;
+    /** Input mode (modern alternative to keyboardType) */
+    inputMode?: RNTextInputProps['inputMode'];
+    /** Enter key hint */
+    enterKeyHint?: RNTextInputProps['enterKeyHint'];
+    /** Color of the text selection handles and highlight */
+    selectionColor?: string;
+    /** Whether to show the soft keyboard on focus */
+    showSoftInputOnFocus?: boolean;
+    /** Whether the field is editable */
+    editable?: boolean;
 }
 export interface NumberInputStyleProps {
     error?: boolean;

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

@@ -6,7 +6,7 @@ export interface OverlayProps extends Omit<ViewProps, 'style'> {
     color?: string;
     /** Opacity applied to the background color. Defaults to 0.6. */
     opacity?: number;
-    /** Mantine-compatible alias for `opacity`. */
+    /** Opacity applied to the entire overlay, including gradients and blur effects. Defaults to 1. */
     backgroundOpacity?: number;
     /** Web-only CSS gradient string. Falls back to `color` on native platforms. */
     gradient?: string;

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

@@ -1,4 +1,4 @@
-import { TextInputProps } from 'react-native';
+import { TextInputProps, TextInputProps as RNTextInputProps } from 'react-native';
 import { BaseInputProps } from '../Input/types';
 export interface PinInputProps extends Omit<BaseInputProps, 'value' | 'onChangeText'> {
     /** Number of PIN digits */
@@ -33,6 +33,24 @@ export interface PinInputProps extends Omit<BaseInputProps, 'value' | 'onChangeT
     onComplete?: (pin: string) => void;
     /** Additional TextInput props for each input */
     textInputProps?: Omit<TextInputProps, keyof BaseInputProps>;
+    /** Text auto-capitalization behavior */
+    autoCapitalize?: RNTextInputProps['autoCapitalize'];
+    /** Whether to enable auto-correct */
+    autoCorrect?: boolean;
+    /** Whether to auto-focus on first input on mount */
+    autoFocus?: boolean;
+    /** Select all text on focus */
+    selectTextOnFocus?: boolean;
+    /** iOS text content type for autofill */
+    textContentType?: RNTextInputProps['textContentType'];
+    /** Text alignment */
+    textAlign?: RNTextInputProps['textAlign'];
+    /** Whether spell check is enabled */
+    spellCheck?: boolean;
+    /** Color of the text selection handles and highlight */
+    selectionColor?: string;
+    /** Whether to show the soft keyboard on focus */
+    showSoftInputOnFocus?: boolean;
 }
 export interface PinInputStyleProps {
     error?: boolean;

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

@@ -1,4 +1,4 @@
-import { TextInputProps } from 'react-native';
+import { TextInputProps, TextInputProps as RNTextInputProps } from 'react-native';
 import { BaseInputProps } from '../Input/types';
 import { SizeValue } from '../../core/theme/types';
 export interface TextAreaProps extends BaseInputProps {
@@ -22,6 +22,36 @@ export interface TextAreaProps extends BaseInputProps {
     resize?: 'none' | 'vertical' | 'horizontal' | 'both';
     /** Additional TextInput props */
     textInputProps?: Omit<TextInputProps, keyof BaseInputProps>;
+    /** Text auto-capitalization behavior */
+    autoCapitalize?: RNTextInputProps['autoCapitalize'];
+    /** Whether to enable auto-correct */
+    autoCorrect?: boolean;
+    /** Whether to auto-focus on mount */
+    autoFocus?: boolean;
+    /** Return key type for soft keyboard */
+    returnKeyType?: RNTextInputProps['returnKeyType'];
+    /** Whether to blur on submit */
+    blurOnSubmit?: boolean;
+    /** Select all text on focus */
+    selectTextOnFocus?: boolean;
+    /** iOS text content type for autofill */
+    textContentType?: RNTextInputProps['textContentType'];
+    /** Text alignment */
+    textAlign?: RNTextInputProps['textAlign'];
+    /** Whether spell check is enabled */
+    spellCheck?: boolean;
+    /** Input mode (modern alternative to keyboardType) */
+    inputMode?: RNTextInputProps['inputMode'];
+    /** Enter key hint */
+    enterKeyHint?: RNTextInputProps['enterKeyHint'];
+    /** Color of the text selection handles and highlight */
+    selectionColor?: string;
+    /** Whether to show the soft keyboard on focus */
+    showSoftInputOnFocus?: boolean;
+    /** Whether the field is editable */
+    editable?: boolean;
+    /** Whether scroll is enabled (multiline) */
+    scrollEnabled?: boolean;
 }
 export interface TextAreaStyleProps {
     size: SizeValue;

package/lib/core/factory/index.d.ts

@@ -1,4 +1,4 @@
 export type { Factory, FactoryPayload, PlatformBlocksComponent, FactoryOptions } from './factory';
 export { factory } from './factory';
-export type { PolymorphicFactory, PolymorphicFactoryPayload, PolymorphicComponent, PolymorphicComponentProps, PolymorphicRef } from './polymorphicFactory';
+export type { PolymorphicFactory, PolymorphicFactoryPayload, PolymorphicFactoryOptions, PolymorphicComponent, PolymorphicComponentProps, PolymorphicRef } from './polymorphicFactory';
 export { polymorphicFactory, createPolymorphicComponent } from './polymorphicFactory';

package/lib/core/factory/polymorphicFactory.d.ts

@@ -23,10 +23,18 @@ export interface PolymorphicComponent<Payload extends PolymorphicFactoryPayload>
     extend: any;
     displayName?: string;
 }
+export interface PolymorphicFactoryOptions {
+    /** Optional display name applied to the resulting component */
+    displayName?: string;
+    /** Enable or disable memoization. Defaults to `true`. */
+    memo?: boolean;
+    /** Optional custom comparison used when memoization is enabled */
+    arePropsEqual?: (prevProps: Readonly<any>, nextProps: Readonly<any>) => boolean;
+}
 /**
  * Factory function for creating polymorphic PlatformBlocks components
  */
-export declare function polymorphicFactory<Payload extends PolymorphicFactoryPayload>(ui: React.ForwardRefRenderFunction<Payload['defaultRef'], Payload['props']>): PolymorphicComponent<Payload>;
+export declare function polymorphicFactory<Payload extends PolymorphicFactoryPayload>(ui: React.ForwardRefRenderFunction<Payload['defaultRef'], Payload['props']>, options?: PolymorphicFactoryOptions): PolymorphicComponent<Payload>;
 /**
  * Creates a polymorphic component from a regular component
  */

package/lib/core/responsive/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export type Breakpoint = 'base' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 declare const BREAKPOINTS: {
     readonly base: 0;
@@ -11,6 +12,14 @@ export type ResponsiveValue<T> = T | Partial<Record<Breakpoint, T>>;
 export type ResponsiveSize = ResponsiveValue<number>;
 export type ResponsiveString = ResponsiveValue<string>;
 export type ResponsiveBoolean = ResponsiveValue<boolean>;
+/**
+ * Provider that maintains a single resize / Dimensions listener and shares
+ * the current breakpoint with all descendants via context.
+ * Mount once near the root of the app (PlatformBlocksProvider does this automatically).
+ */
+declare function BreakpointProvider({ children }: {
+    children: React.ReactNode;
+}): React.FunctionComponentElement<React.ProviderProps<Breakpoint | null>>;
 declare const useBreakpoint: () => Breakpoint;
 declare const useIsMobile: () => boolean;
 declare const resolveResponsiveValue: <T>(value: ResponsiveValue<T>, currentBreakpoint: Breakpoint) => T;
@@ -19,4 +28,4 @@ declare const createResponsiveStyle: <T extends Record<string, any>>(styleValue:
 declare const isResponsiveValue: <T>(value: ResponsiveValue<T>) => value is Partial<Record<Breakpoint, T>>;
 declare const createResponsiveCSS: <T>(property: string, value: ResponsiveValue<T>, unit?: string) => Record<string, any>;
 declare const getResponsiveSpacing: (value: ResponsiveValue<number | string>, breakpoint: Breakpoint, multiplier?: number) => number;
-export { BREAKPOINTS, useBreakpoint, useIsMobile, resolveResponsiveValue, useResponsiveValue, createResponsiveStyle, isResponsiveValue, createResponsiveCSS, getResponsiveSpacing, };
+export { BREAKPOINTS, BreakpointProvider, useBreakpoint, useIsMobile, resolveResponsiveValue, useResponsiveValue, createResponsiveStyle, isResponsiveValue, createResponsiveCSS, getResponsiveSpacing, };

package/lib/core/style-factory.d.ts

@@ -14,7 +14,8 @@ export interface StyleFactoryConfig {
     radius?: any;
 }
 /**
- * Base component style factory
+ * Base component style factory — now backed by a bounded cache.
+ * Repeated calls with identical theme + config return the same object reference.
  */
 export declare function createComponentStyles(theme: PlatformBlocksTheme, config: StyleFactoryConfig): {
     container: ViewStyle;

package/lib/core/theme/ThemeProvider.d.ts

@@ -1,5 +1,24 @@
 import React from 'react';
 import { PlatformBlocksTheme, PlatformBlocksThemeOverride } from './types';
+/** Visual slice: colors, text, backgrounds, interactive states, colorScheme */
+export interface ThemeVisuals {
+    colorScheme: PlatformBlocksTheme['colorScheme'];
+    primaryColor: PlatformBlocksTheme['primaryColor'];
+    colors: PlatformBlocksTheme['colors'];
+    text: PlatformBlocksTheme['text'];
+    backgrounds: PlatformBlocksTheme['backgrounds'];
+    states: PlatformBlocksTheme['states'];
+}
+/** Layout / token slice: font, spacing, radii, shadows, breakpoints */
+export interface ThemeLayout {
+    fontFamily: PlatformBlocksTheme['fontFamily'];
+    fontSizes: PlatformBlocksTheme['fontSizes'];
+    spacing: PlatformBlocksTheme['spacing'];
+    radii: PlatformBlocksTheme['radii'];
+    shadows: PlatformBlocksTheme['shadows'];
+    breakpoints: PlatformBlocksTheme['breakpoints'];
+    designTokens: PlatformBlocksTheme['designTokens'];
+}
 export interface PlatformBlocksThemeProviderProps {
     /** Theme override object */
     theme?: PlatformBlocksThemeOverride;
@@ -10,9 +29,19 @@ export interface PlatformBlocksThemeProviderProps {
 }
 export declare function PlatformBlocksThemeProvider({ theme, inherit, children }: PlatformBlocksThemeProviderProps): React.JSX.Element;
 /**
- * Hook to access the current theme
+ * Hook to access the current theme (full object — backwards compatible)
  */
 export declare function useTheme(): PlatformBlocksTheme;
+/**
+ * Granular hook: subscribe only to visual / color-related properties.
+ * Components using this will NOT re-render when layout tokens change.
+ */
+export declare function useThemeVisuals(): ThemeVisuals;
+/**
+ * Granular hook: subscribe only to layout / token properties.
+ * Components using this will NOT re-render when colors change.
+ */
+export declare function useThemeLayout(): ThemeLayout;
 /**
  * Hook that safely returns theme or default theme
  */