@platform-blocks/ui 0.6.0 → 0.6.1

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

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

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

@@ -52,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/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/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,7 +50,6 @@ 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';
@@ -133,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/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