@platform-blocks/ui 0.5.0 → 0.6.1

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

@@ -4,9 +4,11 @@ import { SpacingProps } from '../../core/utils';
 import type { ResponsiveSize } from '../AppShell/types';
 import type { ComponentSizeValue } from '../../core/theme/componentSize';
 export interface CarouselProps extends SpacingProps {
+    /** Array of carousel slide elements */
     children: React.ReactNode[];
     /** Orientation of the carousel */
     orientation?: 'horizontal' | 'vertical';
+    /** Show navigation arrow buttons */
     showArrows?: boolean;
     /** Show navigation dots */
     showDots?: boolean;
@@ -55,16 +57,28 @@ export interface CarouselProps extends SpacingProps {
     };
     /** Responsive gap between slides (overrides itemGap). Accepts spacing token string or number or responsive map. */
     slideGap?: ResponsiveSize;
+    /** Gap between slides in pixels */
     itemGap?: number;
+    /** Fixed height of the carousel container */
     height?: number;
+    /** Callback fired when the active slide changes */
     onSlideChange?: (index: number) => void;
+    /** Style override for the carousel container */
     style?: ViewStyle;
+    /** Style override applied to each slide item */
     itemStyle?: ViewStyle;
+    /** Enable snapping to individual items */
     snapToItem?: boolean;
+    /** Position of navigation arrows relative to the carousel */
     arrowPosition?: 'inside' | 'outside';
+    /** Size of the navigation arrow buttons */
     arrowSize?: ComponentSizeValue;
+    /** Size of the navigation dots */
     dotSize?: ComponentSizeValue;
+    /** Enable or disable scroll gestures */
     scrollEnabled?: boolean;
+    /** Disable animated width/color transitions for dots and snapping */
     reducedMotion?: boolean;
+    /** Number of logical pages to render for virtualization */
     windowSize?: number;
 }

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ViewStyle, View } from 'react-native';
 import { SizeValue } from '../../core/theme/sizes';
-export type HoverCardPosition = 'top' | 'bottom' | 'left' | 'right';
+export type HoverCardPosition = 'top' | 'bottom' | 'left' | 'right' | 'auto';
 export type HoverCardShadow = 'none' | 'sm' | 'md' | 'lg';
 export interface HoverCardProps {
     /** Floating content */
@@ -22,10 +22,10 @@ export interface HoverCardProps {
     shadow?: HoverCardShadow;
     /** Corner radius */
     radius?: SizeValue;
-    /** Whether rendered in portal (not yet implemented) */
+    /** 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) */
@@ -46,6 +46,8 @@ export interface HoverCardProps {
     keepMounted?: boolean;
     /** Trigger mode */
     trigger?: 'hover' | 'click';
+    /** Positioning strategy: 'fixed' for web, 'portal' for native */
+    strategy?: 'fixed' | 'portal';
 }
 export interface HoverCardFactoryPayload {
     props: HoverCardProps;

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

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

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

@@ -17,9 +17,9 @@ export interface MenuProps extends SpacingProps {
     /** Callback when menu closes */
     onClose?: () => void;
     /** Menu content width */
-    width?: number | 'target' | 'auto';
+    w?: number | 'target' | 'auto';
     /** Maximum height for scrollable content */
-    maxHeight?: number;
+    maxH?: number;
     /** Menu content shadow */
     shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
     /** Border radius */

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

@@ -29,6 +29,8 @@ export interface PopoverProps extends SpacingProps {
     onClose?: () => void;
     /** Called when popover is dismissed via outside click or escape */
     onDismiss?: () => void;
+    /** How the popover is triggered: 'click' (default) or 'hover' (mostly useful for devices with a mouse) */
+    trigger?: 'click' | 'hover';
     /** Disable popover entirely */
     disabled?: boolean;
     /** Close when clicking outside */
@@ -50,15 +52,15 @@ export interface PopoverProps extends SpacingProps {
     /** Overlay component props */
     overlayProps?: Record<string, unknown>;
     /** Dropdown width, number or 'target' to match target width */
-    width?: number | 'target';
+    w?: number | 'target';
     /** Dropdown max-width */
-    maxWidth?: number;
+    maxW?: number;
     /** Dropdown max-height */
-    maxHeight?: number;
+    maxH?: number;
     /** Dropdown min-width */
-    minWidth?: number;
+    minW?: number;
     /** Dropdown min-height */
-    minHeight?: number;
+    minH?: number;
     /** Border radius */
     radius?: RadiusValue | number;
     /** Box shadow */

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

@@ -48,7 +48,7 @@ export interface SelectProps<T = any> extends SpacingProps, LayoutProps {
     /** Stretches the trigger to occupy the full width of its container. */
     fullWidth?: boolean;
     /** Maximum height the dropdown may reach before it scrolls. */
-    maxHeight?: number;
+    maxH?: number;
     /** Whether the dropdown should close immediately after selection. */
     closeOnSelect?: boolean;
     /** Allows the user to clear the current selection. */

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

@@ -6,9 +6,9 @@ export interface SkeletonProps extends SpacingProps {
     /** Shape of the skeleton placeholder */
     shape?: SkeletonShape;
     /** Width of the skeleton component */
-    width?: DimensionValue;
+    w?: DimensionValue;
     /** Height of the skeleton component */
-    height?: DimensionValue;
+    h?: DimensionValue;
     /** Size of the skeleton component (overrides width/height) */
     size?: SizeValue;
     /** Border radius for rectangle/rounded shapes */

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

@@ -26,7 +26,7 @@ export declare const useSwitchStyles: (props: SwitchStyleProps & {
         lineHeight: number;
     };
     labelContainer: {
-        flex: number;
+        flexShrink: number;
         justifyContent: "center";
     };
     labelDisabled: {

package/lib/components/Table/Table.d.ts

@@ -53,9 +53,9 @@ export interface TableProps extends SpacingProps {
 export interface TableScrollContainerProps extends SpacingProps {
     children?: React.ReactNode;
     /** Minimum width before scrolling kicks in */
-    minWidth?: number;
+    minW?: number;
     /** Maximum height before vertical scrolling */
-    maxHeight?: number;
+    maxH?: number;
     /** Scroll type for web */
     type?: 'native' | 'custom';
     style?: any;
@@ -84,9 +84,9 @@ export interface TableCellProps extends SpacingProps {
     /** Text alignment */
     align?: 'left' | 'center' | 'right';
     /** Minimum width for auto-sizing */
-    minWidth?: number;
+    minW?: number;
     /** Maximum width for auto-sizing */
-    maxWidth?: number;
+    maxW?: number;
     /** Flex grow factor for flexible sizing */
     flex?: number;
     /** Width strategy for responsive behavior */

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

@@ -40,7 +40,7 @@ export declare const useTextAreaStyles: (props: TextAreaProps & {
             backgroundColor: string;
             borderColor: string;
             borderRadius: 8;
-            borderWidth: 2;
+            borderWidth: number;
             paddingHorizontal: 8;
             paddingVertical: 4;
         };

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

@@ -17,7 +17,7 @@ export interface TextAreaProps extends BaseInputProps {
     /** Show character counter */
     showCharCounter?: boolean;
     /** Fixed height for the TextArea */
-    height?: number;
+    h?: number;
     /** Resize behavior */
     resize?: 'none' | 'vertical' | 'horizontal' | 'both';
     /** Additional TextInput props */
@@ -30,5 +30,5 @@ export interface TextAreaStyleProps {
     error?: boolean;
     rows?: number;
     resize?: 'none' | 'vertical' | 'horizontal' | 'both';
-    height?: number;
+    h?: number;
 }

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

@@ -12,6 +12,8 @@ export interface TimelineItemProps extends Omit<ViewProps, 'children'> {
     children?: ReactNode;
     /** Item title */
     title?: string;
+    /** Optional timestamp text or node */
+    timestamp?: ReactNode;
     /** Custom bullet content (icon, avatar, etc.) */
     bullet?: ReactNode;
     /** Line variant for this item */
@@ -20,6 +22,12 @@ export interface TimelineItemProps extends Omit<ViewProps, 'children'> {
     color?: string;
     /** Item color variant token (e.g. primary.5 or primary) used if color not provided */
     colorVariant?: string;
+    /** Override title text color for this item */
+    titleColor?: string;
+    /** Override description text color for this item */
+    descriptionColor?: string;
+    /** Override timestamp text color for this item */
+    timestampColor?: string;
     /** Whether this item is active */
     active?: boolean;
     /** Override timeline alignment for this specific item */
@@ -34,6 +42,12 @@ export interface TimelineProps extends Omit<ViewProps, 'children'> {
     color?: string;
     /** Timeline color variant token (e.g. primary.5) used when color not provided */
     colorVariant?: string;
+    /** Default title color for all items */
+    titleColor?: string;
+    /** Default description color for all items */
+    descriptionColor?: string;
+    /** Default timestamp color for all items */
+    timestampColor?: string;
     /** Line width */
     lineWidth?: number;
     /** Bullet size */
@@ -58,4 +72,10 @@ export interface TimelineContextValue {
     metrics: TimelineSizeMetrics;
     /** Whether layout is split with centered vertical line */
     centerMode?: boolean;
+    /** Default title color for items */
+    titleColor?: string;
+    /** Default description color for items */
+    descriptionColor?: string;
+    /** Default timestamp color for items */
+    timestampColor?: string;
 }

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

@@ -74,8 +74,8 @@ export interface VideoProps extends SpacingProps {
     /** Video source configuration */
     source: VideoSource;
     /** Display and sizing */
-    width?: number | string;
-    height?: number | string;
+    w?: number | string;
+    h?: number | string;
     aspectRatio?: number;
     poster?: string;
     /** Playback configuration */

package/lib/components/Waveform/WaveformSkeleton.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 interface WaveformSkeletonProps {
-    width?: number;
-    height?: number;
+    w?: number;
+    h?: number;
     fullWidth?: boolean;
     barsCount?: number;
 }

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

@@ -4,9 +4,9 @@ export interface WaveformProps extends Omit<ViewProps, 'children'> {
     /** Array of peak values (normalized between -1 and 1) */
     peaks: number[];
     /** Width of the waveform */
-    width?: number;
+    w?: number;
     /** Height of the waveform */
-    height?: number;
+    h?: number;
     /** Color of the waveform */
     color?: string;
     /** Visual variant of the waveform */

package/lib/components/index.d.ts

@@ -50,14 +50,12 @@ export { Slider, RangeSlider } from './Slider';
 export { Knob } from './Knob';
 export { AutoComplete } from './AutoComplete';
 export { FileInput } from './FileInput';
-export { RichTextEditor } from './RichTextEditor';
 export { Form } from './Form';
 export { FormLayout, FormSection, FormGroup, FormField } from './FormLayout';
 export { Row, Column } from './Layout';
 export { ToastProvider, useToast, useToastApi } from './Toast';
 export { Progress } from './Progress';
 export { QRCode } from './QRCode';
-export { NavigationProgress, navigationProgress } from './NavigationProgress';
 export { Radio, RadioGroup } from './Radio';
 export { Rating } from './Rating';
 export { Collapse } from './Collapse';
@@ -82,7 +80,6 @@ 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 } from './Popover';
 export { Gallery } from './Gallery';
@@ -135,7 +132,6 @@ export type { SliderProps, RangeSliderProps } from './Slider';
 export type { KnobProps, KnobMark } from './Knob';
 export type { AutoCompleteProps, AutoCompleteOption } from './AutoComplete';
 export type { FileInputProps, FileInputFile } from './FileInput';
-export type { RichTextEditorProps, RichTextEditorContent, RichTextEditorFormat, RichTextEditorSelection } from './RichTextEditor';
 export type { FormProps, FormFieldProps, FormInputProps, FormLabelProps, FormErrorProps, FormSubmitProps } from './Form';
 export type { RowProps, ColumnProps } from './Layout';
 export type { ToastOptions, ToastPosition } from './Toast';

package/lib/components/types.d.ts

@@ -35,7 +35,6 @@ export type { SliderProps, RangeSliderProps } from './Slider';
 export type { KnobProps, KnobMark } from './Knob';
 export type { AutoCompleteProps, AutoCompleteOption } from './AutoComplete';
 export type { FileInputProps, FileInputFile } from './FileInput';
-export type { RichTextEditorProps } from './RichTextEditor';
 export type { FormProps } from './Form';
 export type { RowProps, ColumnProps } from './Layout';
 export type { ProgressProps } from './Progress';

package/lib/core/providers/OverlayProvider.d.ts

@@ -3,7 +3,7 @@ export interface OverlayConfig {
     id: string;
     content: ReactNode;
     trigger?: 'click' | 'hover' | 'contextmenu' | 'manual';
-    placement?: 'top' | 'bottom' | 'left' | 'right' | 'auto';
+    placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end' | 'auto';
     offset?: number;
     anchor?: {
         x: number;

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

@@ -3,11 +3,9 @@ import { PlatformBlocksThemeProviderProps } from './ThemeProvider';
 import type { DirectionProviderProps } from '../providers';
 import type { HighlightProps as HighlightComponentProps } from '../../components/Highlight';
 import type { HapticsProviderProps } from '../haptics/HapticsProvider';
-import type { PermissionProviderProps } from '../../components/Can';
 import { ThemeModeConfig } from './ThemeModeProvider';
 type DirectionProviderConfig = Omit<DirectionProviderProps, 'children'>;
 type HapticsProviderConfig = Omit<HapticsProviderProps, 'children'>;
-type PermissionProviderConfig = Omit<PermissionProviderProps, 'children'>;
 export interface PlatformBlocksProviderProps extends Omit<PlatformBlocksThemeProviderProps, 'children'> {
     /** Your application */
     children: React.ReactNode;
@@ -52,14 +50,12 @@ export interface PlatformBlocksProviderProps extends Omit<PlatformBlocksThemePro
     direction?: false | DirectionProviderConfig;
     /** Haptics context configuration (pass false to opt out) */
     haptics?: false | HapticsProviderConfig;
-    /** Permission context configuration (pass false to opt out) */
-    permissions?: false | PermissionProviderConfig;
 }
 /**
  * Main provider component for Platform Blocks library
  * Provides theme context and injects CSS variables
  */
-export declare function PlatformBlocksProvider({ children, theme, inherit, withCSSVariables, cssVariablesSelector, colorSchemeMode, withOverlays, withSpotlight, withGlobalCSS, themeModeConfig, spotlightConfig, locale, fallbackLocale, i18nResources, direction, haptics, permissions }: PlatformBlocksProviderProps): React.JSX.Element;
+export declare function PlatformBlocksProvider({ children, theme, inherit, withCSSVariables, cssVariablesSelector, colorSchemeMode, withOverlays, withSpotlight, withGlobalCSS, themeModeConfig, spotlightConfig, locale, fallbackLocale, i18nResources, direction, haptics }: PlatformBlocksProviderProps): React.JSX.Element;
 export declare namespace PlatformBlocksProvider {
     var displayName: string;
 }

package/lib/core/utils/layout.d.ts

@@ -2,38 +2,35 @@ import { ViewStyle, DimensionValue } from 'react-native';
 export interface LayoutProps {
     /** Makes the component fill the full width of its parent */
     fullWidth?: boolean;
-    /** Sets a specific width (shorthand for width) */
-    w?: DimensionValue;
     /** Sets a specific width */
-    width?: DimensionValue;
+    w?: DimensionValue;
     /** Sets a specific height */
-    height?: DimensionValue;
+    h?: DimensionValue;
     /** Sets the maximum width */
-    maxWidth?: DimensionValue;
+    maxW?: DimensionValue;
     /** Sets the minimum width */
-    minWidth?: DimensionValue;
+    minW?: DimensionValue;
     /** Sets the maximum height */
-    maxHeight?: DimensionValue;
+    maxH?: DimensionValue;
     /** Sets the minimum height */
-    minHeight?: DimensionValue;
+    minH?: DimensionValue;
 }
 /**
  * Generates layout styles based on provided layout properties.
  *
  * @param props - The layout properties object
  * @param props.fullWidth - When true, sets width to 100%
- * @param props.w - Shorthand width property (overrides fullWidth)
- * @param props.width - Specific width value (overrides fullWidth and w)
- * @param props.height - Height value
- * @param props.maxWidth - Maximum width constraint
- * @param props.minWidth - Minimum width constraint
- * @param props.maxHeight - Maximum height constraint
- * @param props.minHeight - Minimum height constraint
+ * @param props.w - Width property (overrides fullWidth)
+ * @param props.h - Height value
+ * @param props.maxW - Maximum width constraint
+ * @param props.minW - Minimum width constraint
+ * @param props.maxH - Maximum height constraint
+ * @param props.minH - Minimum height constraint
  *
  * @returns A partial ViewStyle object containing the computed layout styles
  *
  * @remarks
- * Property precedence for width: width > w > fullWidth
+ * Property precedence for width: w > fullWidth
  * The function processes width properties in order of specificity, with more specific
  * properties overriding more general ones.
  */

package/lib/core/utils/positioning-enhanced.d.ts

@@ -38,6 +38,8 @@ export interface PositioningOptions {
     boundary?: number;
     /** Fallback placements to try if primary placement doesn't fit */
     fallbackPlacements?: PlacementType[];
+    /** Match the anchor element's width (useful for dropdown inputs) */
+    matchAnchorWidth?: boolean;
 }
 /**
  * Enhanced overlay positioning that prevents off-screen rendering with intelligent caching