@platform-blocks/ui 0.4.0 → 0.6.0

package/lib/components/Avatar/Avatar.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { AvatarProps } from './types';
-export declare function Avatar({ size, src, fallback, backgroundColor, textColor, online, badgeColor, style, accessibilityLabel, label, description, gap, showText, }: AvatarProps): React.JSX.Element;
+export declare function Avatar({ size, src, fallback, backgroundColor, textColor, online, indicatorColor, style, accessibilityLabel, label, description, gap, showText, }: AvatarProps): React.JSX.Element;

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

@@ -14,9 +14,9 @@ export interface AvatarProps {
     textColor?: string;
     /** Whether to show online status indicator */
     online?: boolean;
-    /** Accessibility label for the avatar badge */
-    badgeColor?: string;
-    /** Accessibility label for the avatar badge */
+    /** Color override for the status indicator */
+    indicatorColor?: string;
+    /** Style override for the avatar container */
     style?: ViewStyle;
     /** Accessibility label for the avatar image */
     accessibilityLabel?: string;

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;
@@ -20,6 +22,24 @@ export interface CarouselProps extends SpacingProps {
     loop?: boolean;
     /** Number of visible items per page */
     itemsPerPage?: number;
+    /** Number of slides to advance per snap (defaults to itemsPerPage for backwards compatibility) */
+    slidesToScroll?: number;
+    /** Align the visible slides within the viewport when there is extra space */
+    align?: 'start' | 'center' | 'end';
+    /** Contain leading/trailing space by trimming or keeping snap points */
+    containScroll?: false | 'trimSnaps' | 'keepSnaps';
+    /** Initial slide index to show on mount */
+    startIndex?: number;
+    /** Allow momentum scrolling without forced snaps */
+    dragFree?: boolean;
+    /** Permit gestures to skip over multiple snap points (default true) */
+    skipSnaps?: boolean;
+    /** Drag distance (in px) required before a swipe is committed */
+    dragThreshold?: number;
+    /** Duration (ms) for programmatic scroll animations */
+    duration?: number;
+    /** Embla-style breakpoint overrides applied via media queries */
+    breakpoints?: Record<string, Partial<CarouselProps>>;
     /**
      * Explicit slide size. Accepts:
      *  - percentage string: e.g. "70%"
@@ -37,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/DataTable/DataTable.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type { DataTableProps } from './types';
 export type { DataTableProps, DataTableColumn, DataTableFilter, DataTableSort, DataTablePagination, SortDirection, FilterType, ColumnDataType } from './types';
-export declare const DataTable: <T>({ id, data, columns, loading, error, emptyMessage, searchable, searchPlaceholder, searchValue: controlledSearchValue, onSearchChange, sortBy, onSortChange, filters, onFilterChange, pagination, onPaginationChange, selectable, selectedRows, onSelectionChange, getRowId, onRowClick, editMode, onEditModeChange, onCellEdit, bulkActions, variant, density, height, virtual, style, hoverHighlight, enableColumnResizing, rowFeatureToggle, initialHiddenColumns, onColumnVisibilityChange, onColumnSettings, showColumnVisibilityManager, rowsPerPageOptions, showRowsPerPageControl, rowActions, actionsColumnWidth, fullWidth, rowBorderWidth, rowBorderColor, rowBorderStyle, columnBorderWidth, columnBorderColor, columnBorderStyle, showOuterBorder, outerBorderWidth, outerBorderColor, expandableRowRender, initialExpandedRows, expandedRows: controlledExpandedRows, onExpandedRowsChange, allowMultipleExpanded, expandIcon, collapseIcon, ...props }: DataTableProps<T>) => React.JSX.Element;
+export declare const DataTable: <T>({ id, data, columns, loading, error, emptyMessage, searchable, searchPlaceholder, searchValue: controlledSearchValue, onSearchChange, sortBy, onSortChange, filters, onFilterChange, pagination, onPaginationChange, selectable, selectedRows, onSelectionChange, getRowId, onRowClick, editMode, onEditModeChange, onCellEdit, bulkActions, variant, striped: stripedProp, density, height, virtual, style, hoverHighlight, enableColumnResizing, rowFeatureToggle, initialHiddenColumns, onColumnVisibilityChange, onColumnSettings, showColumnVisibilityManager, rowsPerPageOptions, showRowsPerPageControl, rowActions, actionsColumnWidth, fullWidth, rowBorderWidth, rowBorderColor, rowBorderStyle, columnBorderWidth, columnBorderColor, columnBorderStyle, showOuterBorder, outerBorderWidth, outerBorderColor, expandableRowRender, initialExpandedRows, expandedRows: controlledExpandedRows, onExpandedRowsChange, allowMultipleExpanded, expandIcon, collapseIcon, ...props }: DataTableProps<T>) => React.JSX.Element;
 export default DataTable;

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

@@ -169,6 +169,8 @@ export interface DataTableProps<T = any> extends SpacingProps {
     }>;
     /** Width of the actions column */
     actionsColumnWidth?: number;
+    /** Force striped row backgrounds regardless of variant */
+    striped?: boolean;
     /** Custom header background color */
     headerBackgroundColor?: string;
     /** Show enhanced loading skeletons instead of basic loading text */

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,7 +22,7 @@ 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;
@@ -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/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 */

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

@@ -1,6 +1,8 @@
 import React from 'react';
+import { ViewStyle } from 'react-native';
 import { BaseInputProps } from '../Input/types';
-import { ColorValue, SizeValue } from '../../core/theme/types';
+import { ColorValue, SizeValue, PlatformBlocksTheme } from '../../core/theme/types';
+export type SliderColorScheme = keyof PlatformBlocksTheme['colors'] | (string & {});
 export interface SliderTick {
     /** Tick value */
     value: number;
@@ -34,6 +36,18 @@ export interface SliderProps extends Omit<BaseInputProps, 'value' | 'onChangeTex
     trackSize?: number;
     /** Thumb size */
     thumbSize?: number;
+    /** Theme color palette or custom color to drive active elements */
+    colorScheme?: SliderColorScheme;
+    /** Additional styling for the inactive track */
+    trackStyle?: ViewStyle;
+    /** Additional styling for the active track */
+    activeTrackStyle?: ViewStyle;
+    /** Additional styling for the thumb */
+    thumbStyle?: ViewStyle;
+    /** Override inactive tick color */
+    tickColor?: ColorValue;
+    /** Override active tick color */
+    activeTickColor?: ColorValue;
     /** Input label (above the slider) */
     label?: React.ReactNode;
     /** Value label formatter function, set to null to disable value label */
@@ -97,6 +111,12 @@ export interface SliderTrackProps {
     activeWidth?: number;
     activeLeft?: number;
     isRange?: boolean;
+    trackColor?: ColorValue;
+    activeTrackColor?: ColorValue;
+    trackStyle?: ViewStyle;
+    activeTrackStyle?: ViewStyle;
+    trackHeight?: number;
+    thumbSize?: number;
 }
 export interface SliderTicksProps {
     ticks: Array<{
@@ -110,6 +130,10 @@ export interface SliderTicksProps {
     size: 'sm' | 'md' | 'lg';
     orientation: 'horizontal' | 'vertical';
     keyPrefix?: string;
+    trackHeight?: number;
+    thumbSize?: number;
+    activeTickColor?: ColorValue;
+    tickColor?: ColorValue;
 }
 export interface SliderThumbProps {
     position: number;
@@ -120,6 +144,9 @@ export interface SliderThumbProps {
     isDragging: boolean;
     zIndex?: number;
     panHandlers?: any;
+    thumbColor?: ColorValue;
+    thumbStyle?: ViewStyle;
+    thumbSize?: number;
 }
 export interface SliderLabelProps {
     label: React.ReactNode;
@@ -130,4 +157,5 @@ export interface SliderValueLabelProps {
     size: 'sm' | 'md' | 'lg';
     orientation: 'horizontal' | 'vertical';
     isCard?: boolean;
+    thumbSize?: number;
 }

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

@@ -57,7 +57,6 @@ 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 +81,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';

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;
 }