@platform-blocks/ui 0.1.2 → 0.3.0

package/lib/components/Popover/Popover.d.ts

@@ -0,0 +1,20 @@
+import { View } from 'react-native';
+import type { PopoverProps, PopoverTargetProps, PopoverDropdownProps } from './types';
+declare const PopoverComponent: import("../../core/factory").PlatformBlocksComponent<{
+    props: PopoverProps;
+    ref: View;
+}>;
+declare const PopoverTarget: import("../../core/factory").PlatformBlocksComponent<{
+    props: PopoverTargetProps;
+    ref: View;
+}>;
+declare const PopoverDropdown: import("../../core/factory").PlatformBlocksComponent<{
+    props: PopoverDropdownProps;
+    ref: View;
+}>;
+type PopoverCompoundComponent = typeof PopoverComponent & {
+    Target: typeof PopoverTarget;
+    Dropdown: typeof PopoverDropdown;
+};
+declare const Popover: PopoverCompoundComponent;
+export { Popover };

package/lib/components/Popover/index.d.ts

@@ -0,0 +1,2 @@
+export { Popover } from './Popover';
+export type { PopoverProps, PopoverTargetProps, PopoverDropdownProps } from './types';

package/lib/components/Popover/styles.d.ts

@@ -0,0 +1,67 @@
+import type { PlatformBlocksTheme } from '../../core/theme/types';
+import type { RadiusValue } from '../../core/theme/radius';
+import type { ShadowValue } from '../../core/theme/shadow';
+interface CreateStylesParams {
+    radius?: RadiusValue | number;
+    shadow?: ShadowValue;
+    arrowSize: number;
+}
+export declare const createPopoverStyles: (theme: PlatformBlocksTheme) => (params: CreateStylesParams) => {
+    wrapper: {
+        boxShadow?: undefined;
+        shadowOffset?: undefined;
+        shadowRadius?: undefined;
+        shadowColor?: undefined;
+        shadowOpacity?: undefined;
+        elevation?: undefined;
+        position: "relative";
+        alignSelf: "flex-start";
+        overflow: "visible";
+    } | {
+        boxShadow: string;
+        shadowOffset?: undefined;
+        shadowRadius?: undefined;
+        shadowColor?: undefined;
+        shadowOpacity?: undefined;
+        elevation?: undefined;
+        position: "relative";
+        alignSelf: "flex-start";
+        overflow: "visible";
+    } | {
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowRadius: number;
+        shadowColor: string;
+        shadowOpacity: number;
+        elevation: number;
+        boxShadow?: undefined;
+        position: "relative";
+        alignSelf: "flex-start";
+        overflow: "visible";
+    };
+    dropdown: {
+        overflow: "hidden";
+        minWidth: number;
+        borderRadius: number;
+        borderTopLeftRadius: number;
+        borderTopRightRadius: number;
+        borderBottomLeftRadius: number;
+        borderBottomRightRadius: number;
+        backgroundColor: string;
+        borderColor: string;
+        borderWidth: number;
+        color: string;
+    };
+    arrow: {
+        position: "absolute";
+        width: number;
+        height: number;
+        backgroundColor: string;
+        transform: {
+            rotate: string;
+        }[];
+    };
+};
+export {};

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

@@ -0,0 +1,131 @@
+import type { ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
+import type { PlacementType, PositioningOptions } from '../../core/utils/positioning-enhanced';
+import type { RadiusValue } from '../../core/theme/radius';
+import type { ShadowValue } from '../../core/theme/shadow';
+import type { SpacingProps } from '../../core/utils';
+export type FloatingStrategy = 'absolute' | 'fixed';
+export type ArrowPosition = 'center' | 'side';
+export interface PopoverMiddlewares {
+    flip?: boolean | {
+        padding?: number;
+    };
+    shift?: boolean | {
+        padding?: number;
+    };
+    inline?: boolean;
+}
+export interface PopoverProps extends SpacingProps {
+    children: ReactNode;
+    /** Controlled open state */
+    opened?: boolean;
+    /** Initial open state in uncontrolled mode */
+    defaultOpened?: boolean;
+    /** Called when open state changes */
+    onChange?: (opened: boolean) => void;
+    /** Called when popover opens */
+    onOpen?: () => void;
+    /** Called when popover closes */
+    onClose?: () => void;
+    /** Called when popover is dismissed via outside click or escape */
+    onDismiss?: () => void;
+    /** Disable popover entirely */
+    disabled?: boolean;
+    /** Close when clicking outside */
+    closeOnClickOutside?: boolean;
+    /** Close when pressing Escape */
+    closeOnEscape?: boolean;
+    /** Events considered for outside click detection (web only) */
+    clickOutsideEvents?: string[];
+    /** Trap focus within dropdown (web only) */
+    trapFocus?: boolean;
+    /** Keep dropdown mounted when hidden */
+    keepMounted?: boolean;
+    /** Return focus to target after close */
+    returnFocus?: boolean;
+    /** Render dropdown within portal */
+    withinPortal?: boolean;
+    /** Render overlay/backdrop */
+    withOverlay?: boolean;
+    /** Overlay component props */
+    overlayProps?: Record<string, unknown>;
+    /** Dropdown width, number or 'target' to match target width */
+    width?: number | 'target';
+    /** Dropdown max-width */
+    maxWidth?: number;
+    /** Dropdown max-height */
+    maxHeight?: number;
+    /** Dropdown min-width */
+    minWidth?: number;
+    /** Dropdown min-height */
+    minHeight?: number;
+    /** Border radius */
+    radius?: RadiusValue | number;
+    /** Box shadow */
+    shadow?: ShadowValue;
+    /** Dropdown z-index */
+    zIndex?: number;
+    /** Popover position relative to target */
+    position?: PlacementType;
+    /** Offset from target */
+    offset?: number | {
+        mainAxis?: number;
+        crossAxis?: number;
+    };
+    /** Floating strategy for positioning */
+    floatingStrategy?: FloatingStrategy;
+    /** Custom positioning options */
+    middlewares?: PopoverMiddlewares;
+    /** Prevent flipping/shifting when visible */
+    preventPositionChangeWhenVisible?: boolean;
+    /** Hide dropdown when target becomes detached */
+    hideDetached?: boolean;
+    /** Override viewport padding */
+    viewport?: PositioningOptions['viewport'];
+    /** Whether positioning should avoid the on-screen keyboard */
+    keyboardAvoidance?: boolean;
+    /** Override fallback placements */
+    fallbackPlacements?: PlacementType[];
+    /** Override boundary padding */
+    boundary?: number;
+    /** Render ARIA roles */
+    withRoles?: boolean;
+    /** Unique id base for accessibility */
+    id?: string;
+    /** Render arrow */
+    withArrow?: boolean;
+    /** Arrow size */
+    arrowSize?: number;
+    /** Arrow border radius */
+    arrowRadius?: number;
+    /** Arrow offset */
+    arrowOffset?: number;
+    /** Arrow position for start/end placements */
+    arrowPosition?: ArrowPosition;
+    /** Called when dropdown position changes */
+    onPositionChange?: (placement: PlacementType) => void;
+    /** Test identifier */
+    testID?: string;
+}
+export interface PopoverTargetProps {
+    children: React.ReactElement;
+    popupType?: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid';
+    refProp?: string;
+    /** Additional props merged onto target */
+    targetProps?: Record<string, unknown>;
+}
+export interface PopoverDropdownProps extends ViewProps {
+    children: ReactNode;
+    /** Whether dropdown content should trap focus (web only) */
+    trapFocus?: boolean;
+    /** Keep dropdown mounted */
+    keepMounted?: boolean;
+}
+export interface RegisteredDropdown {
+    content: ReactNode;
+    style?: PopoverDropdownProps['style'];
+    trapFocus: boolean;
+    keepMounted?: boolean;
+    testID?: string;
+    containerProps?: Omit<PopoverDropdownProps, 'children' | 'style' | 'trapFocus' | 'keepMounted' | 'testID'>;
+}

package/lib/components/Ring/Ring.d.ts

@@ -0,0 +1,8 @@
+import { View } from 'react-native';
+import type { RingProps } from './types';
+interface RingFactoryPayload {
+    props: RingProps;
+    ref: View;
+}
+export declare const Ring: import("../../core/factory").PlatformBlocksComponent<RingFactoryPayload>;
+export default Ring;

package/lib/components/Ring/index.d.ts

@@ -0,0 +1,3 @@
+export { Ring } from './Ring';
+export type { RingProps, RingColorStop, RingRenderContext } from './types';
+export { Ring as default } from './Ring';

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

@@ -0,0 +1,75 @@
+import React from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+import { SpacingProps } from '../../core/utils';
+export interface RingColorStop {
+    /** Threshold (0-100) that determines when the color becomes active */
+    value: number;
+    /** Stroke color applied once the threshold is reached */
+    color: string;
+}
+export interface RingRenderContext {
+    /** Clamped value within the provided min/max range */
+    value: number;
+    /** Normalized percentage (0-100) for the current value */
+    percent: number;
+    /** Minimum bound used for normalization */
+    min: number;
+    /** Maximum bound used for normalization */
+    max: number;
+}
+export interface RingProps extends SpacingProps {
+    /** Current value represented by the ring */
+    value: number;
+    /** Lower bound for normalization. Defaults to 0. */
+    min?: number;
+    /** Upper bound for normalization. Defaults to 100. */
+    max?: number;
+    /** Diameter of the ring in pixels. Defaults to 100. */
+    size?: number;
+    /** Stroke thickness in pixels. Defaults to 12. */
+    thickness?: number;
+    /** Optional caption rendered beneath the ring */
+    caption?: React.ReactNode;
+    /** Main label rendered in the ring center */
+    label?: React.ReactNode;
+    /** Secondary label rendered below the main label */
+    subLabel?: React.ReactNode;
+    /** Displays the computed percentage when no label/subLabel is provided. Defaults to true. */
+    showValue?: boolean;
+    /** Formats the displayed value or percentage */
+    valueFormatter?: (value: number, percent: number) => React.ReactNode;
+    /** Track color behind the progress stroke */
+    trackColor?: string;
+    /** Progress stroke color or resolver */
+    progressColor?: string | ((value: number, percent: number) => string);
+    /** Optional color stops evaluated against the computed percent */
+    colorStops?: RingColorStop[];
+    /** Forces the ring into a neutral state, disabling the progress stroke */
+    neutral?: boolean;
+    /** Controls whether the progress stroke has rounded caps. Defaults to true. */
+    roundedCaps?: boolean;
+    /** Container style for the outer wrapper */
+    style?: ViewStyle;
+    /** Style applied to the ring wrapper */
+    ringStyle?: ViewStyle;
+    /** Style applied to the center content container */
+    contentStyle?: ViewStyle;
+    /** Style overrides for the main label */
+    labelStyle?: TextStyle;
+    /** Style overrides for the secondary label */
+    subLabelStyle?: TextStyle;
+    /** Style overrides for the caption */
+    captionStyle?: TextStyle;
+    /** Color override for the main label */
+    labelColor?: string;
+    /** Color override for the secondary label */
+    subLabelColor?: string;
+    /** Color override for the caption */
+    captionColor?: string;
+    /** Custom center content. Receives value info when passed as a function */
+    children?: React.ReactNode | ((context: RingRenderContext) => React.ReactNode);
+    /** Test identifier for end-to-end tests */
+    testID?: string;
+    /** Accessibility label describing the ring */
+    accessibilityLabel?: string;
+}

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

@@ -37,7 +37,7 @@ export interface SegmentedControlProps extends SpacingProps, LayoutProps, Border
     disabled?: boolean;
     /** Prevent user interaction but keep visual state */
     readOnly?: boolean;
-    /** Adjust text color automatically for filled variant */
+    /** Adjust text color automatically for filled/outline variants */
     autoContrast?: boolean;
     /** Render dividers between items */
     withItemsBorders?: boolean;
@@ -48,7 +48,7 @@ export interface SegmentedControlProps extends SpacingProps, LayoutProps, Border
     /** Optional radio group name hint */
     name?: string;
     /** Visual style variant */
-    variant?: 'default' | 'filled';
+    variant?: 'default' | 'filled' | 'outline' | 'ghost';
     /** Custom style for indicator */
     indicatorStyle?: ViewStyle;
     /** Custom style applied to every item */
@@ -59,4 +59,10 @@ export interface SegmentedControlProps extends SpacingProps, LayoutProps, Border
     testID?: string;
     /** Accessibility label for the entire control */
     accessibilityLabel?: string;
+    /** Optional label rendered alongside the control */
+    label?: ReactNode;
+    /** Supplementary description text rendered with the label */
+    description?: ReactNode;
+    /** Placement of the label relative to the control */
+    labelPosition?: 'left' | 'right' | 'top' | 'bottom';
 }

package/lib/components/Select/Select.d.ts

@@ -3,4 +3,3 @@ export declare const Select: import("../../core/factory/factory").PlatformBlocks
     props: SelectProps;
     ref: any;
 }>;
-export default Select;

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

@@ -1,31 +1,64 @@
 import React from 'react';
 import { SizeValue } from '../../core/theme/sizes';
 import { LayoutProps, SpacingProps } from '../../core/utils';
+/**
+ * Represents a single option exposed by the Select component.
+ */
 export interface SelectOption<T = any> {
+    /** Human-readable text displayed for the option. */
     label: string;
+    /** Value returned when the option is chosen. */
     value: T;
+    /** When true, the option renders but cannot be selected. */
     disabled?: boolean;
 }
+/**
+ * Props accepted by the Select component. Inherits spacing and layout helpers
+ * for consistency with other inputs.
+ */
 export interface SelectProps<T = any> extends SpacingProps, LayoutProps {
+    /** Current value when the component is controlled. */
     value?: T | null;
+    /** Initial value when the component manages its own state. */
     defaultValue?: T | null;
+    /** Callback fired whenever the selection changes. */
     onChange?: (value: T | null, option?: SelectOption<T> | null) => void;
+    /** Collection of options available to choose from. */
     options: SelectOption<T>[];
+    /** Placeholder text shown when no value is selected. */
     placeholder?: string;
+    /** Size token controlling trigger height and typography. */
     size?: SizeValue;
+    /** Corner radius token applied to the trigger and dropdown. */
     radius?: any;
+    /** Disables the control when set to true. */
     disabled?: boolean;
+    /** Optional label rendered above the trigger. */
     label?: string;
     /** Optional short descriptive text shown directly under the label (above the field). */
     description?: string;
+    /** Helper copy displayed beneath the control. */
     helperText?: string;
+    /** Error message shown beneath the control in error state. */
     error?: string;
+    /** Enables client-side filtering of options. */
     searchable?: boolean;
+    /** Custom renderer for an individual option row. */
     renderOption?: (opt: SelectOption<T>, active: boolean, selected: boolean) => React.ReactNode;
+    /** Stretches the trigger to occupy the full width of its container. */
     fullWidth?: boolean;
+    /** Maximum height the dropdown may reach before it scrolls. */
     maxHeight?: number;
+    /** Whether the dropdown should close immediately after selection. */
     closeOnSelect?: boolean;
+    /** Allows the user to clear the current selection. */
     clearable?: boolean;
+    /** Accessible label announced for the clear button when present. */
     clearButtonLabel?: string;
+    /** Handler invoked after the selection is cleared. */
     onClear?: () => void;
+    /** Controls whether the trigger regains focus after selecting an option. */
+    refocusAfterSelect?: boolean;
+    /** Whether dropdown positioning should avoid the on-screen keyboard. */
+    keyboardAvoidance?: boolean;
 }

package/lib/components/ShimmerText/ShimmerText.d.ts

@@ -3,6 +3,7 @@ import { type TextProps } from '../Text';
 type ShimmerDirection = 'ltr' | 'rtl';
 export interface ShimmerTextProps extends Omit<TextProps, 'children' | 'color' | 'onLayout'> {
     children?: React.ReactNode;
+    /** Text to render with shimmer effect */
     text?: string;
     /** Base text color rendered underneath the shimmer */
     color?: string;

package/lib/components/Spotlight/DirectSpotlightState.d.ts

@@ -4,7 +4,7 @@
  * This hook bypasses the SpotlightProvider context and uses the global state directly.
  * This should be used in the GlobalSpotlight component to avoid provider re-mounting issues.
  */
-import { SpotlightState } from './SpotlightStore';
+import type { SpotlightState } from './SpotlightStore';
 interface GlobalSpotlightState {
     opened: boolean;
     query: string;

package/lib/components/Spotlight/Spotlight.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { SpotlightProps, SpotlightRootProps, SpotlightSearchProps, SpotlightActionsListProps, SpotlightActionProps, SpotlightActionsGroupProps, SpotlightEmptyProps } from './types';
 declare function SpotlightRoot({ query, onQueryChange, children, opened, onClose, shortcut, style, }: SpotlightRootProps): React.JSX.Element;
-declare function SpotlightSearch({ value, onChangeText, leftSection, placeholder, onNavigateUp, onNavigateDown, onSelectAction, onClose, ...props }: SpotlightSearchProps): React.JSX.Element;
+declare function SpotlightSearch({ value, onChangeText, leftSection, placeholder, onNavigateUp, onNavigateDown, onSelectAction, onClose, autoFocus, inputRef: forwardedRef, ...props }: SpotlightSearchProps): React.JSX.Element;
 declare function SpotlightActionsList({ children, scrollable, maxHeight, style, scrollRef, onScrollChange, }: SpotlightActionsListProps): React.JSX.Element;
-declare function SpotlightAction({ label, description, leftSection, rightSection, onPress, disabled, selected, children, style, innerRef, }: SpotlightActionProps): React.JSX.Element;
+declare function SpotlightAction({ label, description, leftSection, rightSection, onPress, disabled, selected, children, style, innerRef, highlightQuery, }: SpotlightActionProps): React.JSX.Element;
 declare function SpotlightActionsGroup({ label, children, style, }: SpotlightActionsGroupProps): React.JSX.Element;
 declare function SpotlightEmpty({ children, style }: SpotlightEmptyProps): React.JSX.Element;
 export declare function Spotlight({ actions, nothingFound, highlightQuery, limit, scrollable, maxHeight, // Remove default - let it be calculated dynamically

package/lib/components/Spotlight/SpotlightController.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
+import type { HighlightProps as HighlightComponentProps } from '../Highlight';
 interface SpotlightControllerProps {
     config?: {
         shortcut?: string | string[] | null;
         actions?: any[];
         alwaysMount?: boolean;
-        highlightQuery?: boolean;
+        highlightQuery?: boolean | HighlightComponentProps['highlight'];
         limit?: number;
         placeholder?: string;
     };

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

@@ -1,10 +1,11 @@
-import { ViewStyle } from 'react-native';
+import type { ViewStyle, TextInput } from 'react-native';
 import React from 'react';
 import { SpotlightItem } from './SpotlightTypes';
+import type { HighlightProps as HighlightComponentProps } from '../Highlight';
 export interface SpotlightProps {
     actions: SpotlightItem[];
     nothingFound?: string;
-    highlightQuery?: boolean;
+    highlightQuery?: boolean | HighlightComponentProps['highlight'];
     limit?: number;
     scrollable?: boolean;
     maxHeight?: number;
@@ -33,6 +34,8 @@ export interface SpotlightSearchProps {
     onNavigateDown?: () => void;
     onSelectAction?: () => void;
     onClose?: () => void;
+    autoFocus?: boolean;
+    inputRef?: React.RefObject<TextInput | null>;
 }
 export interface SpotlightActionsListProps {
     children: React.ReactNode;
@@ -54,6 +57,7 @@ export interface SpotlightActionProps {
     style?: ViewStyle;
     innerRef?: any;
     onLayout?: (e: any) => void;
+    highlightQuery?: HighlightComponentProps['highlight'];
 }
 export interface SpotlightActionsGroupProps {
     label: string;

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

@@ -1,4 +1,11 @@
 import { ReactNode } from 'react';
+import type { ComponentSizeValue } from '../../core/theme/componentSize';
+export interface StepperMetrics {
+    iconSize: number;
+    fontSize: number;
+    spacing: number;
+    descriptionFontSize: number;
+}
 export interface StepperStepProps {
     /** Step content */
     children?: ReactNode;
@@ -37,7 +44,7 @@ export interface StepperProps {
     /** Icon size */
     iconSize?: number;
     /** Component size */
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    size?: ComponentSizeValue;
     /** Component color */
     color?: string;
     /** Icon to display when step is completed */
@@ -61,7 +68,8 @@ export interface StepperContextValue {
     orientation: 'horizontal' | 'vertical';
     iconPosition: 'left' | 'right';
     iconSize: number;
-    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    size: ComponentSizeValue;
+    metrics: StepperMetrics;
     color: string;
     completedIcon?: ReactNode;
     allowNextStepsSelect: boolean;

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

@@ -56,40 +56,10 @@ export declare const useTextAreaStyles: (props: TextAreaProps & {
         textInput: any;
     };
     getSizeStyles: (size: SizeValue, rows?: number) => {
-        fontSize: 12;
-        padding: 4;
+        fontSize: number;
+        padding: number;
         minHeight: number;
-        lineHeight: 16;
-    } | {
-        fontSize: 14;
-        padding: 8;
-        minHeight: number;
-        lineHeight: 20;
-    } | {
-        fontSize: 16;
-        padding: 12;
-        minHeight: number;
-        lineHeight: 24;
-    } | {
-        fontSize: 18;
-        padding: 16;
-        minHeight: number;
-        lineHeight: 28;
-    } | {
-        fontSize: 20;
-        padding: 20;
-        minHeight: number;
-        lineHeight: 32;
-    } | {
-        fontSize: 24;
-        padding: 24;
-        minHeight: number;
-        lineHeight: 36;
-    } | {
-        fontSize: 30;
-        padding: 32;
-        minHeight: number;
-        lineHeight: 42;
+        lineHeight: number;
     };
 };
 export {};

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

@@ -1,5 +1,6 @@
 import { TextInputProps } from 'react-native';
 import { BaseInputProps } from '../Input/types';
+import { SizeValue } from '../../core/theme/types';
 export interface TextAreaProps extends BaseInputProps {
     /** Default value for uncontrolled mode */
     defaultValue?: string;
@@ -23,7 +24,7 @@ export interface TextAreaProps extends BaseInputProps {
     textInputProps?: Omit<TextInputProps, keyof BaseInputProps>;
 }
 export interface TextAreaStyleProps {
-    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+    size: SizeValue;
     focused?: boolean;
     disabled?: boolean;
     error?: boolean;

package/lib/components/TimePicker/TimePicker.d.ts

@@ -1,3 +1 @@
-import React from 'react';
-import type { TimePickerProps } from './types';
-export declare const TimePicker: React.FC<TimePickerProps>;
+export { TimePickerInput as TimePicker } from '../TimePickerInput/TimePickerInput';

package/lib/components/TimePickerInput/TimePickerInput.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { TimePickerInputProps } from './types';
+export declare const TimePickerInput: React.FC<TimePickerInputProps>;

package/lib/components/TimePickerInput/index.d.ts

@@ -1,2 +1,2 @@
-export { TimePicker as TimePickerInput } from '../TimePicker/TimePicker';
-export type { TimePickerProps as TimePickerInputProps } from '../TimePicker/types';
+export { TimePickerInput } from './TimePickerInput';
+export type { TimePickerInputProps, TimePickerValue } from './types';

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

@@ -0,0 +1,3 @@
+import type { TimePickerProps, TimePickerValue } from '../TimePicker/types';
+export type TimePickerInputProps = TimePickerProps;
+export type { TimePickerValue };

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

@@ -1,5 +1,12 @@
 import { ReactNode } from 'react';
 import { ViewProps } from 'react-native';
+import { type ComponentSizeValue } from '../../core/theme/componentSize';
+export interface TimelineSizeMetrics {
+    bulletSize: number;
+    lineWidth: number;
+    fontSize: number;
+    spacing: number;
+}
 export interface TimelineItemProps extends Omit<ViewProps, 'children'> {
     /** Item content */
     children?: ReactNode;
@@ -36,7 +43,7 @@ export interface TimelineProps extends Omit<ViewProps, 'children'> {
     /** Reverse active highlighting */
     reverseActive?: boolean;
     /** Component size */
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    size?: ComponentSizeValue;
     /** Center mode renders a single central spine allowing items on both sides via itemAlign prop */
     centerMode?: boolean;
 }
@@ -47,7 +54,8 @@ export interface TimelineContextValue {
     bulletSize: number;
     align: 'left' | 'right';
     reverseActive: boolean;
-    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    size: ComponentSizeValue;
+    metrics: TimelineSizeMetrics;
     /** Whether layout is split with centered vertical line */
     centerMode?: boolean;
 }

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

@@ -69,6 +69,8 @@ export interface ToastProps extends SpacingProps, BorderRadiusProps {
     maxWidth?: number;
     /** Persist toast until manually dismissed */
     persistent?: boolean;
+    /** Keep toast mounted in the tree when hidden */
+    keepMounted?: boolean;
     /** Animation configuration */
     animationConfig?: ToastAnimationConfig;
     /** Swipe to dismiss configuration */