@platform-blocks/ui 0.1.2 → 0.2.0

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

@@ -1,9 +1,18 @@
 import React from 'react';
-import type { DocumentPickerAsset } from 'expo-document-picker';
 import { BaseInputProps } from '../Input/types';
+export interface DocumentPickerAssetLike {
+    uri?: string | null;
+    name?: string | null;
+    size?: number | null;
+    mimeType?: string | null;
+    type?: string | null;
+    file?: File;
+    fileCopyUri?: string | null;
+    [key: string]: any;
+}
 export interface FileInputFile {
     /** File object or document picker asset */
-    file: File | DocumentPickerAsset;
+    file: File | DocumentPickerAssetLike;
     /** Unique identifier */
     id: string;
     /** File name */
@@ -54,7 +63,7 @@ export interface FileInputProps extends BaseInputProps {
     /** Whether to enable drag and drop */
     enableDragDrop?: boolean;
     /** Custom validation function */
-    validateFile?: (file: File | DocumentPickerAsset) => string | null;
+    validateFile?: (file: File | DocumentPickerAssetLike) => string | null;
     /** Image preview settings */
     imagePreview?: {
         /** Enable image previews */

package/lib/components/Highlight/Highlight.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { HighlightProps } from './types';
+export declare const Highlight: React.FC<HighlightProps>;
+export default Highlight;

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

@@ -0,0 +1,3 @@
+export { Highlight } from './Highlight';
+export type { HighlightProps } from './types';
+export { Highlight as default } from './Highlight';

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

@@ -0,0 +1,24 @@
+import type { TextProps } from '../Text/Text';
+import type { PlatformBlocksTheme } from '../../core/theme/types';
+export type HighlightValue = string | number;
+export interface HighlightProps extends TextProps {
+    /** Substring or substrings to emphasize within the provided children */
+    highlight?: HighlightValue | HighlightValue[];
+    /**
+     * Optional override for the highlighted segment styles. Accepts either a style object/array
+     * or a callback that receives the current theme and returns styles.
+     */
+    highlightStyles?: any | ((theme: PlatformBlocksTheme) => any);
+    /**
+     * When provided, overrides the default highlight background/text palette. If the value matches
+     * a key from the theme color palettes it will use the related swatch, otherwise the value is
+     * treated as a raw color string.
+     */
+    highlightColor?: string;
+    /** Toggle case-sensitive matching (defaults to case-insensitive). */
+    caseSensitive?: boolean;
+    /** Trim highlight values before matching to ignore accidental whitespace. Defaults to true. */
+    trim?: boolean;
+    /** Additional props applied to the highlighted Text nodes. */
+    highlightProps?: Partial<TextProps>;
+}

package/lib/components/MenuItemButton/MenuItemButton.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
+import { View } from 'react-native';
+import type { PressableProps } from 'react-native';
 import type { GestureResponderEvent } from 'react-native';
 import { SpacingProps } from '../../core/utils';
 export interface MenuItemButtonProps extends SpacingProps {
@@ -34,6 +36,32 @@ export interface MenuItemButtonProps extends SpacingProps {
     onPressOut?: (event: GestureResponderEvent) => void;
     /** Web-only mouse down handler */
     onMouseDown?: (event: any) => void;
+    /** Web-only mouse enter handler */
+    onMouseEnter?: (event: any) => void;
+    /** Web-only mouse leave handler */
+    onMouseLeave?: (event: any) => void;
+    /** Pointer hover start handler (web) */
+    onHoverIn?: PressableProps['onHoverIn'];
+    /** Pointer hover end handler (web) */
+    onHoverOut?: PressableProps['onHoverOut'];
+    /** Focus handler */
+    onFocus?: PressableProps['onFocus'];
+    /** Blur handler */
+    onBlur?: PressableProps['onBlur'];
+    /** Semantic tone for menu styling */
+    tone?: 'default' | 'danger' | 'success' | 'warning';
+    /** Tone to apply when hovered */
+    hoverTone?: 'default' | 'danger' | 'success' | 'warning';
+    /** Tone to apply when active/pressed */
+    activeTone?: 'default' | 'danger' | 'success' | 'warning';
+    /** Override text color for base state */
+    textColor?: string;
+    /** Override text color when hovered */
+    hoverTextColor?: string;
+    /** Override text color when active */
+    activeTextColor?: string;
+    /** Test identifier forwarded to Pressable */
+    testID?: string;
 }
-export declare const MenuItemButton: React.FC<MenuItemButtonProps>;
+export declare const MenuItemButton: React.ForwardRefExoticComponent<MenuItemButtonProps & React.RefAttributes<View>>;
 export default MenuItemButton;

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

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

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

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

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

@@ -0,0 +1,66 @@
+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;
+    };
+    arrow: {
+        position: "absolute";
+        width: number;
+        height: number;
+        backgroundColor: string;
+        transform: {
+            rotate: string;
+        }[];
+    };
+};
+export {};

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

@@ -0,0 +1,129 @@
+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'];
+    /** 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/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/Spotlight.d.ts

@@ -3,7 +3,7 @@ import type { SpotlightProps, SpotlightRootProps, SpotlightSearchProps, Spotligh
 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 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 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;
@@ -54,6 +55,7 @@ export interface SpotlightActionProps {
     style?: ViewStyle;
     innerRef?: any;
     onLayout?: (e: any) => void;
+    highlightQuery?: HighlightComponentProps['highlight'];
 }
 export interface SpotlightActionsGroupProps {
     label: string;

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 */

package/lib/components/index.d.ts

@@ -77,10 +77,12 @@ export { Accordion } from './Accordion';
 export { Gauge } from './Gauge';
 export { GradientText } from './GradientText';
 export { ShimmerText } from './ShimmerText';
+export { Highlight } from './Highlight';
 export { Title } from './Title/Title';
 export { TableOfContents } from './TableOfContents/TableOfContents';
 export { HoverCard } from './HoverCard/HoverCard';
 export { ContextMenu } from './ContextMenu';
+export { Popover, PopoverTarget, PopoverDropdown } from './Popover';
 export { Gallery } from './Gallery';
 export type { AlertProps } from './Alert';
 export type { AppShellProps } from './AppShell';
@@ -106,6 +108,7 @@ export type { FlexProps } from './Flex';
 export type { GridProps } from './Grid';
 export type { GradientTextProps } from './GradientText';
 export type { ShimmerTextProps } from './ShimmerText';
+export type { HighlightProps } from './Highlight';
 export type { TreeProps, TreeNode } from './Tree/Tree';
 export type { TimePickerProps, TimePickerValue } from './TimePicker/types';
 export type { IconProps, IconSize, IconVariant, IconDefinition, IconRegistry } from './Icon';
@@ -156,6 +159,7 @@ export type { TableOfContentsProps, TocItem } from './TableOfContents/types';
 export type { StepperProps } from './Stepper';
 export type { HoverCardProps } from './HoverCard/types';
 export type { ContextMenuProps, ContextMenuItem } from './ContextMenu/ContextMenu';
+export type { PopoverProps, PopoverTargetProps, PopoverDropdownProps } from './Popover';
 export type { SegmentedControlProps, SegmentedControlItem, SegmentedControlData } from './SegmentedControl';
 export type { GalleryProps, GalleryModalProps, GalleryItem } from './Gallery';
 export * from './Accessibility/AccessibilityHelpers';

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

@@ -5,10 +5,10 @@ export interface FactoryPayload {
     ref: any;
     staticComponents?: Record<string, any>;
 }
-export interface ComponentWithProps<Props = {}> {
-    withProps: <T extends Partial<Props>>(fixedProps: T) => React.FC<Omit<Props, keyof T>>;
+export interface ComponentWithProps<Props = {}, RefType = any> {
+    withProps: <T extends Partial<Props>>(fixedProps: T) => any;
 }
-export interface PlatformBlocksComponent<Payload extends FactoryPayload> extends React.FC<Payload['props']>, ComponentWithProps<Payload['props']> {
+export interface PlatformBlocksComponent<Payload extends FactoryPayload> extends React.ForwardRefExoticComponent<React.PropsWithoutRef<Payload['props']> & React.RefAttributes<Payload['ref']>>, ComponentWithProps<Payload['props'], Payload['ref']> {
     extend: any;
     displayName?: string;
 }

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { PlatformBlocksThemeProviderProps } from './ThemeProvider';
+import type { HighlightProps as HighlightComponentProps } from '../../components/Highlight';
 import { ThemeModeConfig } from './ThemeModeProvider';
 export interface PlatformBlocksProviderProps extends Omit<PlatformBlocksThemeProviderProps, 'children'> {
     /** Your application */
@@ -29,7 +30,7 @@ export interface PlatformBlocksProviderProps extends Omit<PlatformBlocksThemePro
         actions?: any[];
         placeholder?: string;
         limit?: number;
-        highlightQuery?: boolean;
+        highlightQuery?: boolean | HighlightComponentProps['highlight'];
         /** Render Spotlight even when no actions provided (useful to inject later) */
         alwaysMount?: boolean;
     };