@platform-blocks/ui 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +23 -1
- package/lib/cjs/index.js +6915 -4498
- package/lib/cjs/index.js.map +1 -1
- package/lib/components/AutoComplete/types.d.ts +2 -0
- package/lib/components/Avatar/types.d.ts +3 -2
- package/lib/components/Badge/types.d.ts +4 -4
- package/lib/components/Blockquote/styles.d.ts +2 -1
- package/lib/components/Breadcrumbs/types.d.ts +2 -1
- package/lib/components/Calendar/types.d.ts +1 -0
- package/lib/components/Card/types.d.ts +1 -1
- package/lib/components/Carousel/types.d.ts +3 -2
- package/lib/components/Chip/types.d.ts +1 -1
- package/lib/components/ColorPicker/styles.d.ts +15 -1
- package/lib/components/ColorPicker/types.d.ts +4 -1
- package/lib/components/CopyButton/types.d.ts +3 -2
- package/lib/components/Dialog/Dialog.d.ts +1 -1
- package/lib/components/Dialog/types.d.ts +3 -0
- package/lib/components/Input/styles.d.ts +0 -24
- package/lib/components/Input/types.d.ts +2 -0
- package/lib/components/KeyCap/types.d.ts +9 -2
- package/lib/components/KeyboardAwareLayout/KeyboardAwareLayout.d.ts +4 -0
- package/lib/components/KeyboardAwareLayout/index.d.ts +3 -0
- package/lib/components/KeyboardAwareLayout/types.d.ts +26 -0
- package/lib/components/Knob/Knob.d.ts +6 -0
- package/lib/components/Knob/index.d.ts +2 -0
- package/lib/components/Knob/types.d.ts +65 -0
- package/lib/components/ListGroup/types.d.ts +11 -2
- package/lib/components/MenuItemButton/MenuItemButton.d.ts +2 -1
- package/lib/components/MonthPicker/types.d.ts +2 -2
- package/lib/components/NumberInput/types.d.ts +14 -0
- package/lib/components/Pagination/types.d.ts +10 -1
- package/lib/components/PinInput/types.d.ts +2 -0
- package/lib/components/Popover/Popover.d.ts +9 -3
- package/lib/components/Popover/index.d.ts +1 -1
- package/lib/components/Popover/styles.d.ts +1 -0
- package/lib/components/Popover/types.d.ts +2 -0
- package/lib/components/Ring/Ring.d.ts +8 -0
- package/lib/components/Ring/index.d.ts +3 -0
- package/lib/components/Ring/types.d.ts +75 -0
- package/lib/components/SegmentedControl/types.d.ts +8 -2
- package/lib/components/Select/Select.d.ts +0 -1
- package/lib/components/Select/Select.types.d.ts +33 -0
- package/lib/components/Spotlight/DirectSpotlightState.d.ts +1 -1
- package/lib/components/Spotlight/Spotlight.d.ts +1 -1
- package/lib/components/Spotlight/types.d.ts +3 -1
- package/lib/components/Stepper/types.d.ts +10 -2
- package/lib/components/TextArea/styles.d.ts +3 -33
- package/lib/components/TextArea/types.d.ts +2 -1
- package/lib/components/TimePicker/TimePicker.d.ts +1 -3
- package/lib/components/TimePickerInput/TimePickerInput.d.ts +3 -0
- package/lib/components/TimePickerInput/index.d.ts +2 -2
- package/lib/components/TimePickerInput/types.d.ts +3 -0
- package/lib/components/Timeline/types.d.ts +10 -2
- package/lib/components/Tree/types.d.ts +7 -0
- package/lib/components/index.d.ts +7 -1
- package/lib/components/optimized.d.ts +5 -0
- package/lib/components/types.d.ts +3 -0
- package/lib/core/hooks/usePopoverPositioning.d.ts +2 -5
- package/lib/core/keyboard/selection.d.ts +42 -0
- package/lib/core/providers/KeyboardManagerProvider.d.ts +45 -0
- package/lib/core/providers/index.d.ts +3 -1
- package/lib/core/theme/PlatformBlocksProvider.d.ts +14 -1
- package/lib/core/theme/componentSize.d.ts +10 -0
- package/lib/core/theme/index.d.ts +1 -0
- package/lib/core/theme/sizes.d.ts +2 -1
- package/lib/core/theme/types.d.ts +4 -2
- package/lib/esm/index.js +6905 -4496
- package/lib/esm/index.js.map +1 -1
- package/lib/index.d.ts +12 -1
- package/lib/utils/optionalDependencies.d.ts +17 -2
- package/lib/utils/optionalModule.d.ts +16 -0
- package/package.json +2 -1
- package/lib/components/Select/types.d.ts +0 -25
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ViewStyle, TextStyle } from 'react-native';
|
|
3
|
+
import { SpacingProps } from '../../core/utils';
|
|
4
|
+
export interface RingColorStop {
|
|
5
|
+
/** Threshold (0-100) that determines when the color becomes active */
|
|
6
|
+
value: number;
|
|
7
|
+
/** Stroke color applied once the threshold is reached */
|
|
8
|
+
color: string;
|
|
9
|
+
}
|
|
10
|
+
export interface RingRenderContext {
|
|
11
|
+
/** Clamped value within the provided min/max range */
|
|
12
|
+
value: number;
|
|
13
|
+
/** Normalized percentage (0-100) for the current value */
|
|
14
|
+
percent: number;
|
|
15
|
+
/** Minimum bound used for normalization */
|
|
16
|
+
min: number;
|
|
17
|
+
/** Maximum bound used for normalization */
|
|
18
|
+
max: number;
|
|
19
|
+
}
|
|
20
|
+
export interface RingProps extends SpacingProps {
|
|
21
|
+
/** Current value represented by the ring */
|
|
22
|
+
value: number;
|
|
23
|
+
/** Lower bound for normalization. Defaults to 0. */
|
|
24
|
+
min?: number;
|
|
25
|
+
/** Upper bound for normalization. Defaults to 100. */
|
|
26
|
+
max?: number;
|
|
27
|
+
/** Diameter of the ring in pixels. Defaults to 100. */
|
|
28
|
+
size?: number;
|
|
29
|
+
/** Stroke thickness in pixels. Defaults to 12. */
|
|
30
|
+
thickness?: number;
|
|
31
|
+
/** Optional caption rendered beneath the ring */
|
|
32
|
+
caption?: React.ReactNode;
|
|
33
|
+
/** Main label rendered in the ring center */
|
|
34
|
+
label?: React.ReactNode;
|
|
35
|
+
/** Secondary label rendered below the main label */
|
|
36
|
+
subLabel?: React.ReactNode;
|
|
37
|
+
/** Displays the computed percentage when no label/subLabel is provided. Defaults to true. */
|
|
38
|
+
showValue?: boolean;
|
|
39
|
+
/** Formats the displayed value or percentage */
|
|
40
|
+
valueFormatter?: (value: number, percent: number) => React.ReactNode;
|
|
41
|
+
/** Track color behind the progress stroke */
|
|
42
|
+
trackColor?: string;
|
|
43
|
+
/** Progress stroke color or resolver */
|
|
44
|
+
progressColor?: string | ((value: number, percent: number) => string);
|
|
45
|
+
/** Optional color stops evaluated against the computed percent */
|
|
46
|
+
colorStops?: RingColorStop[];
|
|
47
|
+
/** Forces the ring into a neutral state, disabling the progress stroke */
|
|
48
|
+
neutral?: boolean;
|
|
49
|
+
/** Controls whether the progress stroke has rounded caps. Defaults to true. */
|
|
50
|
+
roundedCaps?: boolean;
|
|
51
|
+
/** Container style for the outer wrapper */
|
|
52
|
+
style?: ViewStyle;
|
|
53
|
+
/** Style applied to the ring wrapper */
|
|
54
|
+
ringStyle?: ViewStyle;
|
|
55
|
+
/** Style applied to the center content container */
|
|
56
|
+
contentStyle?: ViewStyle;
|
|
57
|
+
/** Style overrides for the main label */
|
|
58
|
+
labelStyle?: TextStyle;
|
|
59
|
+
/** Style overrides for the secondary label */
|
|
60
|
+
subLabelStyle?: TextStyle;
|
|
61
|
+
/** Style overrides for the caption */
|
|
62
|
+
captionStyle?: TextStyle;
|
|
63
|
+
/** Color override for the main label */
|
|
64
|
+
labelColor?: string;
|
|
65
|
+
/** Color override for the secondary label */
|
|
66
|
+
subLabelColor?: string;
|
|
67
|
+
/** Color override for the caption */
|
|
68
|
+
captionColor?: string;
|
|
69
|
+
/** Custom center content. Receives value info when passed as a function */
|
|
70
|
+
children?: React.ReactNode | ((context: RingRenderContext) => React.ReactNode);
|
|
71
|
+
/** Test identifier for end-to-end tests */
|
|
72
|
+
testID?: string;
|
|
73
|
+
/** Accessibility label describing the ring */
|
|
74
|
+
accessibilityLabel?: string;
|
|
75
|
+
}
|
|
@@ -37,7 +37,7 @@ export interface SegmentedControlProps extends SpacingProps, LayoutProps, Border
|
|
|
37
37
|
disabled?: boolean;
|
|
38
38
|
/** Prevent user interaction but keep visual state */
|
|
39
39
|
readOnly?: boolean;
|
|
40
|
-
/** Adjust text color automatically for filled
|
|
40
|
+
/** Adjust text color automatically for filled/outline variants */
|
|
41
41
|
autoContrast?: boolean;
|
|
42
42
|
/** Render dividers between items */
|
|
43
43
|
withItemsBorders?: boolean;
|
|
@@ -48,7 +48,7 @@ export interface SegmentedControlProps extends SpacingProps, LayoutProps, Border
|
|
|
48
48
|
/** Optional radio group name hint */
|
|
49
49
|
name?: string;
|
|
50
50
|
/** Visual style variant */
|
|
51
|
-
variant?: 'default' | 'filled';
|
|
51
|
+
variant?: 'default' | 'filled' | 'outline' | 'ghost';
|
|
52
52
|
/** Custom style for indicator */
|
|
53
53
|
indicatorStyle?: ViewStyle;
|
|
54
54
|
/** Custom style applied to every item */
|
|
@@ -59,4 +59,10 @@ export interface SegmentedControlProps extends SpacingProps, LayoutProps, Border
|
|
|
59
59
|
testID?: string;
|
|
60
60
|
/** Accessibility label for the entire control */
|
|
61
61
|
accessibilityLabel?: string;
|
|
62
|
+
/** Optional label rendered alongside the control */
|
|
63
|
+
label?: ReactNode;
|
|
64
|
+
/** Supplementary description text rendered with the label */
|
|
65
|
+
description?: ReactNode;
|
|
66
|
+
/** Placement of the label relative to the control */
|
|
67
|
+
labelPosition?: 'left' | 'right' | 'top' | 'bottom';
|
|
62
68
|
}
|
|
@@ -1,31 +1,64 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { SizeValue } from '../../core/theme/sizes';
|
|
3
3
|
import { LayoutProps, SpacingProps } from '../../core/utils';
|
|
4
|
+
/**
|
|
5
|
+
* Represents a single option exposed by the Select component.
|
|
6
|
+
*/
|
|
4
7
|
export interface SelectOption<T = any> {
|
|
8
|
+
/** Human-readable text displayed for the option. */
|
|
5
9
|
label: string;
|
|
10
|
+
/** Value returned when the option is chosen. */
|
|
6
11
|
value: T;
|
|
12
|
+
/** When true, the option renders but cannot be selected. */
|
|
7
13
|
disabled?: boolean;
|
|
8
14
|
}
|
|
15
|
+
/**
|
|
16
|
+
* Props accepted by the Select component. Inherits spacing and layout helpers
|
|
17
|
+
* for consistency with other inputs.
|
|
18
|
+
*/
|
|
9
19
|
export interface SelectProps<T = any> extends SpacingProps, LayoutProps {
|
|
20
|
+
/** Current value when the component is controlled. */
|
|
10
21
|
value?: T | null;
|
|
22
|
+
/** Initial value when the component manages its own state. */
|
|
11
23
|
defaultValue?: T | null;
|
|
24
|
+
/** Callback fired whenever the selection changes. */
|
|
12
25
|
onChange?: (value: T | null, option?: SelectOption<T> | null) => void;
|
|
26
|
+
/** Collection of options available to choose from. */
|
|
13
27
|
options: SelectOption<T>[];
|
|
28
|
+
/** Placeholder text shown when no value is selected. */
|
|
14
29
|
placeholder?: string;
|
|
30
|
+
/** Size token controlling trigger height and typography. */
|
|
15
31
|
size?: SizeValue;
|
|
32
|
+
/** Corner radius token applied to the trigger and dropdown. */
|
|
16
33
|
radius?: any;
|
|
34
|
+
/** Disables the control when set to true. */
|
|
17
35
|
disabled?: boolean;
|
|
36
|
+
/** Optional label rendered above the trigger. */
|
|
18
37
|
label?: string;
|
|
19
38
|
/** Optional short descriptive text shown directly under the label (above the field). */
|
|
20
39
|
description?: string;
|
|
40
|
+
/** Helper copy displayed beneath the control. */
|
|
21
41
|
helperText?: string;
|
|
42
|
+
/** Error message shown beneath the control in error state. */
|
|
22
43
|
error?: string;
|
|
44
|
+
/** Enables client-side filtering of options. */
|
|
23
45
|
searchable?: boolean;
|
|
46
|
+
/** Custom renderer for an individual option row. */
|
|
24
47
|
renderOption?: (opt: SelectOption<T>, active: boolean, selected: boolean) => React.ReactNode;
|
|
48
|
+
/** Stretches the trigger to occupy the full width of its container. */
|
|
25
49
|
fullWidth?: boolean;
|
|
50
|
+
/** Maximum height the dropdown may reach before it scrolls. */
|
|
26
51
|
maxHeight?: number;
|
|
52
|
+
/** Whether the dropdown should close immediately after selection. */
|
|
27
53
|
closeOnSelect?: boolean;
|
|
54
|
+
/** Allows the user to clear the current selection. */
|
|
28
55
|
clearable?: boolean;
|
|
56
|
+
/** Accessible label announced for the clear button when present. */
|
|
29
57
|
clearButtonLabel?: string;
|
|
58
|
+
/** Handler invoked after the selection is cleared. */
|
|
30
59
|
onClear?: () => void;
|
|
60
|
+
/** Controls whether the trigger regains focus after selecting an option. */
|
|
61
|
+
refocusAfterSelect?: boolean;
|
|
62
|
+
/** Whether dropdown positioning should avoid the on-screen keyboard. */
|
|
63
|
+
keyboardAvoidance?: boolean;
|
|
31
64
|
}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* This hook bypasses the SpotlightProvider context and uses the global state directly.
|
|
5
5
|
* This should be used in the GlobalSpotlight component to avoid provider re-mounting issues.
|
|
6
6
|
*/
|
|
7
|
-
import { SpotlightState } from './SpotlightStore';
|
|
7
|
+
import type { SpotlightState } from './SpotlightStore';
|
|
8
8
|
interface GlobalSpotlightState {
|
|
9
9
|
opened: boolean;
|
|
10
10
|
query: string;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { SpotlightProps, SpotlightRootProps, SpotlightSearchProps, SpotlightActionsListProps, SpotlightActionProps, SpotlightActionsGroupProps, SpotlightEmptyProps } from './types';
|
|
3
3
|
declare function SpotlightRoot({ query, onQueryChange, children, opened, onClose, shortcut, style, }: SpotlightRootProps): React.JSX.Element;
|
|
4
|
-
declare function SpotlightSearch({ value, onChangeText, leftSection, placeholder, onNavigateUp, onNavigateDown, onSelectAction, onClose, ...props }: SpotlightSearchProps): React.JSX.Element;
|
|
4
|
+
declare function SpotlightSearch({ value, onChangeText, leftSection, placeholder, onNavigateUp, onNavigateDown, onSelectAction, onClose, autoFocus, inputRef: forwardedRef, ...props }: SpotlightSearchProps): React.JSX.Element;
|
|
5
5
|
declare function SpotlightActionsList({ children, scrollable, maxHeight, style, scrollRef, onScrollChange, }: SpotlightActionsListProps): React.JSX.Element;
|
|
6
6
|
declare function SpotlightAction({ label, description, leftSection, rightSection, onPress, disabled, selected, children, style, innerRef, highlightQuery, }: SpotlightActionProps): React.JSX.Element;
|
|
7
7
|
declare function SpotlightActionsGroup({ label, children, style, }: SpotlightActionsGroupProps): React.JSX.Element;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ViewStyle } from 'react-native';
|
|
1
|
+
import type { ViewStyle, TextInput } from 'react-native';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { SpotlightItem } from './SpotlightTypes';
|
|
4
4
|
import type { HighlightProps as HighlightComponentProps } from '../Highlight';
|
|
@@ -34,6 +34,8 @@ export interface SpotlightSearchProps {
|
|
|
34
34
|
onNavigateDown?: () => void;
|
|
35
35
|
onSelectAction?: () => void;
|
|
36
36
|
onClose?: () => void;
|
|
37
|
+
autoFocus?: boolean;
|
|
38
|
+
inputRef?: React.RefObject<TextInput | null>;
|
|
37
39
|
}
|
|
38
40
|
export interface SpotlightActionsListProps {
|
|
39
41
|
children: React.ReactNode;
|
|
@@ -1,4 +1,11 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
+
import type { ComponentSizeValue } from '../../core/theme/componentSize';
|
|
3
|
+
export interface StepperMetrics {
|
|
4
|
+
iconSize: number;
|
|
5
|
+
fontSize: number;
|
|
6
|
+
spacing: number;
|
|
7
|
+
descriptionFontSize: number;
|
|
8
|
+
}
|
|
2
9
|
export interface StepperStepProps {
|
|
3
10
|
/** Step content */
|
|
4
11
|
children?: ReactNode;
|
|
@@ -37,7 +44,7 @@ export interface StepperProps {
|
|
|
37
44
|
/** Icon size */
|
|
38
45
|
iconSize?: number;
|
|
39
46
|
/** Component size */
|
|
40
|
-
size?:
|
|
47
|
+
size?: ComponentSizeValue;
|
|
41
48
|
/** Component color */
|
|
42
49
|
color?: string;
|
|
43
50
|
/** Icon to display when step is completed */
|
|
@@ -61,7 +68,8 @@ export interface StepperContextValue {
|
|
|
61
68
|
orientation: 'horizontal' | 'vertical';
|
|
62
69
|
iconPosition: 'left' | 'right';
|
|
63
70
|
iconSize: number;
|
|
64
|
-
size:
|
|
71
|
+
size: ComponentSizeValue;
|
|
72
|
+
metrics: StepperMetrics;
|
|
65
73
|
color: string;
|
|
66
74
|
completedIcon?: ReactNode;
|
|
67
75
|
allowNextStepsSelect: boolean;
|
|
@@ -56,40 +56,10 @@ export declare const useTextAreaStyles: (props: TextAreaProps & {
|
|
|
56
56
|
textInput: any;
|
|
57
57
|
};
|
|
58
58
|
getSizeStyles: (size: SizeValue, rows?: number) => {
|
|
59
|
-
fontSize:
|
|
60
|
-
padding:
|
|
59
|
+
fontSize: number;
|
|
60
|
+
padding: number;
|
|
61
61
|
minHeight: number;
|
|
62
|
-
lineHeight:
|
|
63
|
-
} | {
|
|
64
|
-
fontSize: 14;
|
|
65
|
-
padding: 8;
|
|
66
|
-
minHeight: number;
|
|
67
|
-
lineHeight: 20;
|
|
68
|
-
} | {
|
|
69
|
-
fontSize: 16;
|
|
70
|
-
padding: 12;
|
|
71
|
-
minHeight: number;
|
|
72
|
-
lineHeight: 24;
|
|
73
|
-
} | {
|
|
74
|
-
fontSize: 18;
|
|
75
|
-
padding: 16;
|
|
76
|
-
minHeight: number;
|
|
77
|
-
lineHeight: 28;
|
|
78
|
-
} | {
|
|
79
|
-
fontSize: 20;
|
|
80
|
-
padding: 20;
|
|
81
|
-
minHeight: number;
|
|
82
|
-
lineHeight: 32;
|
|
83
|
-
} | {
|
|
84
|
-
fontSize: 24;
|
|
85
|
-
padding: 24;
|
|
86
|
-
minHeight: number;
|
|
87
|
-
lineHeight: 36;
|
|
88
|
-
} | {
|
|
89
|
-
fontSize: 30;
|
|
90
|
-
padding: 32;
|
|
91
|
-
minHeight: number;
|
|
92
|
-
lineHeight: 42;
|
|
62
|
+
lineHeight: number;
|
|
93
63
|
};
|
|
94
64
|
};
|
|
95
65
|
export {};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { TextInputProps } from 'react-native';
|
|
2
2
|
import { BaseInputProps } from '../Input/types';
|
|
3
|
+
import { SizeValue } from '../../core/theme/types';
|
|
3
4
|
export interface TextAreaProps extends BaseInputProps {
|
|
4
5
|
/** Default value for uncontrolled mode */
|
|
5
6
|
defaultValue?: string;
|
|
@@ -23,7 +24,7 @@ export interface TextAreaProps extends BaseInputProps {
|
|
|
23
24
|
textInputProps?: Omit<TextInputProps, keyof BaseInputProps>;
|
|
24
25
|
}
|
|
25
26
|
export interface TextAreaStyleProps {
|
|
26
|
-
size:
|
|
27
|
+
size: SizeValue;
|
|
27
28
|
focused?: boolean;
|
|
28
29
|
disabled?: boolean;
|
|
29
30
|
error?: boolean;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export {
|
|
2
|
-
export type {
|
|
1
|
+
export { TimePickerInput } from './TimePickerInput';
|
|
2
|
+
export type { TimePickerInputProps, TimePickerValue } from './types';
|
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
import { ViewProps } from 'react-native';
|
|
3
|
+
import { type ComponentSizeValue } from '../../core/theme/componentSize';
|
|
4
|
+
export interface TimelineSizeMetrics {
|
|
5
|
+
bulletSize: number;
|
|
6
|
+
lineWidth: number;
|
|
7
|
+
fontSize: number;
|
|
8
|
+
spacing: number;
|
|
9
|
+
}
|
|
3
10
|
export interface TimelineItemProps extends Omit<ViewProps, 'children'> {
|
|
4
11
|
/** Item content */
|
|
5
12
|
children?: ReactNode;
|
|
@@ -36,7 +43,7 @@ export interface TimelineProps extends Omit<ViewProps, 'children'> {
|
|
|
36
43
|
/** Reverse active highlighting */
|
|
37
44
|
reverseActive?: boolean;
|
|
38
45
|
/** Component size */
|
|
39
|
-
size?:
|
|
46
|
+
size?: ComponentSizeValue;
|
|
40
47
|
/** Center mode renders a single central spine allowing items on both sides via itemAlign prop */
|
|
41
48
|
centerMode?: boolean;
|
|
42
49
|
}
|
|
@@ -47,7 +54,8 @@ export interface TimelineContextValue {
|
|
|
47
54
|
bulletSize: number;
|
|
48
55
|
align: 'left' | 'right';
|
|
49
56
|
reverseActive: boolean;
|
|
50
|
-
size:
|
|
57
|
+
size: ComponentSizeValue;
|
|
58
|
+
metrics: TimelineSizeMetrics;
|
|
51
59
|
/** Whether layout is split with centered vertical line */
|
|
52
60
|
centerMode?: boolean;
|
|
53
61
|
}
|
|
@@ -13,6 +13,11 @@ export interface TreeProps {
|
|
|
13
13
|
data: TreeNode[];
|
|
14
14
|
/** Called when a leaf (no children) or any node with href is pressed */
|
|
15
15
|
onNavigate?: (node: TreeNode) => void;
|
|
16
|
+
/** Called when a node row is pressed. Return false to prevent default handling (selection, expand). */
|
|
17
|
+
onNodePress?: (node: TreeNode, context: {
|
|
18
|
+
isBranch: boolean;
|
|
19
|
+
event?: any;
|
|
20
|
+
}) => boolean | void;
|
|
16
21
|
/** Allow collapsing/expanding */
|
|
17
22
|
collapsible?: boolean;
|
|
18
23
|
/** Indent size in px for each depth level */
|
|
@@ -62,4 +67,6 @@ export interface TreeProps {
|
|
|
62
67
|
noResultsFallback?: React.ReactNode;
|
|
63
68
|
/** Custom highlight function for labels (return ReactNode) */
|
|
64
69
|
highlight?: (label: string, query: string) => React.ReactNode;
|
|
70
|
+
/** Apply alternating background stripes to rows */
|
|
71
|
+
striped?: boolean;
|
|
65
72
|
}
|
|
@@ -15,6 +15,7 @@ export { CodeBlock } from './CodeBlock';
|
|
|
15
15
|
export { CopyButton } from './CopyButton/CopyButton';
|
|
16
16
|
export { ColorPicker } from './ColorPicker';
|
|
17
17
|
export { Container } from './Container';
|
|
18
|
+
export { KeyboardAwareLayout } from './KeyboardAwareLayout';
|
|
18
19
|
export { DataTable } from './DataTable';
|
|
19
20
|
export { Disclaimer, ComponentWithDisclaimer, useDisclaimer, withDisclaimer, extractDisclaimerProps } from './Disclaimer';
|
|
20
21
|
export { Dialog, DialogProvider, DialogRenderer, useDialog, useSimpleDialog } from './Dialog';
|
|
@@ -47,6 +48,7 @@ export { YearPickerInput } from './YearPickerInput';
|
|
|
47
48
|
export { Pagination } from './Pagination';
|
|
48
49
|
export { PinInput } from './PinInput';
|
|
49
50
|
export { Slider, RangeSlider } from './Slider';
|
|
51
|
+
export { Knob } from './Knob';
|
|
50
52
|
export { AutoComplete } from './AutoComplete';
|
|
51
53
|
export { FileInput } from './FileInput';
|
|
52
54
|
export { RichTextEditor } from './RichTextEditor';
|
|
@@ -60,6 +62,7 @@ export { NavigationProgress, navigationProgress } from './NavigationProgress';
|
|
|
60
62
|
export { Radio, RadioGroup } from './Radio';
|
|
61
63
|
export { Rating } from './Rating';
|
|
62
64
|
export { Reveal } from './Reveal';
|
|
65
|
+
export { Ring } from './Ring';
|
|
63
66
|
export { Skeleton } from './Skeleton';
|
|
64
67
|
export { Loader } from './Loader';
|
|
65
68
|
export { LoadingOverlay } from './LoadingOverlay';
|
|
@@ -82,7 +85,7 @@ export { Title } from './Title/Title';
|
|
|
82
85
|
export { TableOfContents } from './TableOfContents/TableOfContents';
|
|
83
86
|
export { HoverCard } from './HoverCard/HoverCard';
|
|
84
87
|
export { ContextMenu } from './ContextMenu';
|
|
85
|
-
export { Popover
|
|
88
|
+
export { Popover } from './Popover';
|
|
86
89
|
export { Gallery } from './Gallery';
|
|
87
90
|
export type { AlertProps } from './Alert';
|
|
88
91
|
export type { AppShellProps } from './AppShell';
|
|
@@ -101,6 +104,7 @@ export type { CodeBlockProps } from './CodeBlock/types';
|
|
|
101
104
|
export type { CopyButtonProps } from './CopyButton/types';
|
|
102
105
|
export type { ColorPickerProps } from './ColorPicker';
|
|
103
106
|
export type { ContainerProps } from './Container';
|
|
107
|
+
export type { KeyboardAwareLayoutProps } from './KeyboardAwareLayout';
|
|
104
108
|
export type { DialogProps, DialogConfig, UseSimpleDialogOptions } from './Dialog';
|
|
105
109
|
export type { DividerProps } from './Divider';
|
|
106
110
|
export type { SpaceProps } from './Space';
|
|
@@ -130,6 +134,7 @@ export type { TimePickerInputProps } from './TimePickerInput';
|
|
|
130
134
|
export type { PaginationProps } from './Pagination';
|
|
131
135
|
export type { PinInputProps } from './PinInput';
|
|
132
136
|
export type { SliderProps, RangeSliderProps } from './Slider';
|
|
137
|
+
export type { KnobProps, KnobMark } from './Knob';
|
|
133
138
|
export type { AutoCompleteProps, AutoCompleteOption } from './AutoComplete';
|
|
134
139
|
export type { FileInputProps, FileInputFile } from './FileInput';
|
|
135
140
|
export type { RichTextEditorProps, RichTextEditorContent, RichTextEditorFormat, RichTextEditorSelection } from './RichTextEditor';
|
|
@@ -140,6 +145,7 @@ export type { ProgressProps } from './Progress';
|
|
|
140
145
|
export type { QRCodeProps } from './QRCode';
|
|
141
146
|
export type { RadioProps, RadioGroupProps } from './Radio';
|
|
142
147
|
export type { RatingProps } from './Rating';
|
|
148
|
+
export type { RingProps, RingColorStop, RingRenderContext } from './Ring';
|
|
143
149
|
export type { SkeletonProps } from './Skeleton';
|
|
144
150
|
export type { LoaderProps } from './Loader';
|
|
145
151
|
export type { LoadingOverlayProps } from './LoadingOverlay';
|
|
@@ -12,6 +12,7 @@ export type { SwitchProps } from './Switch/types';
|
|
|
12
12
|
export type { NumberInputProps } from './NumberInput/types';
|
|
13
13
|
export type { PinInputProps } from './PinInput/types';
|
|
14
14
|
export type { SliderProps, RangeSliderProps } from './Slider/types';
|
|
15
|
+
export type { KnobProps, KnobMark } from './Knob/types';
|
|
15
16
|
export declare const LazyPasswordInput: React.LazyExoticComponent<React.FC<import("./Input/types").PasswordInputProps>>;
|
|
16
17
|
export declare const LazyNumberInput: React.LazyExoticComponent<import("../core").PlatformBlocksComponent<{
|
|
17
18
|
props: import("./NumberInput/types").NumberInputProps;
|
|
@@ -29,6 +30,10 @@ export declare const LazyRangeSlider: React.LazyExoticComponent<import("../core"
|
|
|
29
30
|
props: import("./Slider/types").RangeSliderProps;
|
|
30
31
|
ref: import("react-native").View;
|
|
31
32
|
}>>;
|
|
33
|
+
export declare const LazyKnob: React.LazyExoticComponent<import("../core").PlatformBlocksComponent<{
|
|
34
|
+
props: import("./Knob/types").KnobProps;
|
|
35
|
+
ref: import("react-native").View;
|
|
36
|
+
}>>;
|
|
32
37
|
export declare const LazyCheckbox: React.LazyExoticComponent<React.ForwardRefExoticComponent<import("./Checkbox/types").CheckboxProps & React.RefAttributes<import("react-native").View>>>;
|
|
33
38
|
export declare const LazyRadio: React.LazyExoticComponent<import("../core").PlatformBlocksComponent<{
|
|
34
39
|
props: import("./Radio/types").RadioProps;
|
|
@@ -11,6 +11,7 @@ export type { CodeBlockProps } from './CodeBlock/types';
|
|
|
11
11
|
export type { CopyButtonProps } from './CopyButton/types';
|
|
12
12
|
export type { ColorPickerProps } from './ColorPicker';
|
|
13
13
|
export type { ContainerProps } from './Container';
|
|
14
|
+
export type { KeyboardAwareLayoutProps } from './KeyboardAwareLayout';
|
|
14
15
|
export type { DialogProps } from './Dialog';
|
|
15
16
|
export type { DividerProps } from './Divider';
|
|
16
17
|
export type { SpaceProps } from './Space';
|
|
@@ -32,6 +33,7 @@ export type { YearPickerInputProps } from './YearPickerInput';
|
|
|
32
33
|
export type { PaginationProps } from './Pagination';
|
|
33
34
|
export type { PinInputProps } from './PinInput';
|
|
34
35
|
export type { SliderProps, RangeSliderProps } from './Slider';
|
|
36
|
+
export type { KnobProps, KnobMark } from './Knob';
|
|
35
37
|
export type { AutoCompleteProps, AutoCompleteOption } from './AutoComplete';
|
|
36
38
|
export type { FileInputProps, FileInputFile } from './FileInput';
|
|
37
39
|
export type { RichTextEditorProps } from './RichTextEditor';
|
|
@@ -41,6 +43,7 @@ export type { ProgressProps } from './Progress';
|
|
|
41
43
|
export type { QRCodeProps } from './QRCode';
|
|
42
44
|
export type { RadioProps, RadioGroupProps } from './Radio';
|
|
43
45
|
export type { RatingProps } from './Rating';
|
|
46
|
+
export type { RingProps, RingColorStop, RingRenderContext } from './Ring';
|
|
44
47
|
export type { SkeletonProps } from './Skeleton';
|
|
45
48
|
export type { LoaderProps } from './Loader';
|
|
46
49
|
export type { SpotlightProps } from './Spotlight';
|
|
@@ -4,6 +4,8 @@ export interface UsePopoverPositioningOptions extends PositioningOptions {
|
|
|
4
4
|
autoUpdate?: boolean;
|
|
5
5
|
/** Debounce delay for resize/scroll updates in ms */
|
|
6
6
|
updateDelay?: number;
|
|
7
|
+
/** Adjust viewport height when on-screen keyboard is visible (default: true) */
|
|
8
|
+
keyboardAvoidance?: boolean;
|
|
7
9
|
}
|
|
8
10
|
export interface UsePopoverPositioningReturn {
|
|
9
11
|
/** Current position result */
|
|
@@ -26,8 +28,3 @@ export declare function usePopoverPositioning(isOpen: boolean, options?: UsePopo
|
|
|
26
28
|
* (simplified version with tooltip-specific defaults)
|
|
27
29
|
*/
|
|
28
30
|
export declare function useTooltipPositioning(isOpen: boolean, placement?: PositioningOptions['placement']): UsePopoverPositioningReturn;
|
|
29
|
-
/**
|
|
30
|
-
* Hook for managing dropdown/menu positioning
|
|
31
|
-
* (optimized for dropdown behavior)
|
|
32
|
-
*/
|
|
33
|
-
export declare function useDropdownPositioning(isOpen: boolean, placement?: PositioningOptions['placement']): UsePopoverPositioningReturn;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { Platform } from 'react-native';
|
|
2
|
+
import type { KeyboardManagerContextValue } from '../providers/KeyboardManagerProvider';
|
|
3
|
+
export type SelectionMode = 'single' | 'multiple';
|
|
4
|
+
export interface SelectionFocusCallbacks {
|
|
5
|
+
focusPrimary?: () => void;
|
|
6
|
+
focusModal?: () => void;
|
|
7
|
+
blurPrimary?: () => void;
|
|
8
|
+
blurModal?: () => void;
|
|
9
|
+
}
|
|
10
|
+
export interface HandleSelectionCompleteOptions {
|
|
11
|
+
mode: SelectionMode;
|
|
12
|
+
preferRefocus?: boolean;
|
|
13
|
+
useModal?: boolean;
|
|
14
|
+
keyboardManager?: KeyboardManagerContextValue | null;
|
|
15
|
+
focusCallbacks?: SelectionFocusCallbacks;
|
|
16
|
+
onRefocus?: () => void;
|
|
17
|
+
onBlur?: () => void;
|
|
18
|
+
interactionScheduler?: (cb: () => void) => void;
|
|
19
|
+
focusTargetId?: string;
|
|
20
|
+
}
|
|
21
|
+
export interface SelectionCompleteResult {
|
|
22
|
+
refocused: boolean;
|
|
23
|
+
}
|
|
24
|
+
export interface SelectionContractConfig extends Omit<HandleSelectionCompleteOptions, 'onRefocus' | 'onBlur' | 'focusCallbacks'> {
|
|
25
|
+
focusCallbacks?: SelectionFocusCallbacks;
|
|
26
|
+
}
|
|
27
|
+
export interface SelectionContractRunOptions {
|
|
28
|
+
focusCallbacks?: SelectionFocusCallbacks;
|
|
29
|
+
onRefocus?: () => void;
|
|
30
|
+
onBlur?: () => void;
|
|
31
|
+
preferRefocus?: boolean;
|
|
32
|
+
focusTargetId?: string;
|
|
33
|
+
keyboardManager?: KeyboardManagerContextValue | null;
|
|
34
|
+
}
|
|
35
|
+
export type SelectionContract = (options?: SelectionContractRunOptions) => SelectionCompleteResult;
|
|
36
|
+
export declare function resolveRefocusBehavior(options: {
|
|
37
|
+
mode: SelectionMode;
|
|
38
|
+
preferRefocus?: boolean;
|
|
39
|
+
platform?: typeof Platform.OS;
|
|
40
|
+
}): boolean;
|
|
41
|
+
export declare function handleSelectionComplete(options: HandleSelectionCompleteOptions): SelectionCompleteResult;
|
|
42
|
+
export declare function createSelectionContract(config: SelectionContractConfig): SelectionContract;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { KeyboardEvent } from 'react-native';
|
|
3
|
+
export interface KeyboardManagerProviderProps {
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
/**
|
|
6
|
+
* Optional flag to disable native listeners (primarily for tests).
|
|
7
|
+
*/
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
}
|
|
10
|
+
export interface KeyboardManagerContextValue {
|
|
11
|
+
/** Indicates if the on-screen keyboard is currently visible */
|
|
12
|
+
isKeyboardVisible: boolean;
|
|
13
|
+
/** Height of the keyboard in pixels when visible */
|
|
14
|
+
keyboardHeight: number;
|
|
15
|
+
/** Native end coordinates from the last keyboard event */
|
|
16
|
+
keyboardEndCoordinates?: KeyboardEvent['endCoordinates'];
|
|
17
|
+
/** Reported animation duration (ms) from the native keyboard event */
|
|
18
|
+
keyboardAnimationDuration: number;
|
|
19
|
+
/** Reported animation easing from the native keyboard event */
|
|
20
|
+
keyboardAnimationEasing?: KeyboardEvent['easing'];
|
|
21
|
+
/** Latest focus target requested via `setFocusTarget`; null when none pending */
|
|
22
|
+
pendingFocusTarget: string | null;
|
|
23
|
+
/** Imperative helper for dismissing the keyboard */
|
|
24
|
+
dismissKeyboard: () => void;
|
|
25
|
+
/**
|
|
26
|
+
* Sets an optional focus target that can be consumed by an input after the keyboard closes.
|
|
27
|
+
* Passing null clears the stored target.
|
|
28
|
+
*/
|
|
29
|
+
setFocusTarget: (componentId: string | null) => void;
|
|
30
|
+
/**
|
|
31
|
+
* Returns true when the provided component id matches the stored focus target.
|
|
32
|
+
* The focus target is cleared after a successful match.
|
|
33
|
+
*/
|
|
34
|
+
consumeFocusTarget: (componentId: string) => boolean;
|
|
35
|
+
/**
|
|
36
|
+
* Helper that records a focus target so the next mounted input can restore focus.
|
|
37
|
+
* Consumers can call `dismissKeyboard` separately when they need to drop the keyboard.
|
|
38
|
+
*/
|
|
39
|
+
refocus: (componentId: string, options?: {
|
|
40
|
+
dismiss?: boolean;
|
|
41
|
+
}) => void;
|
|
42
|
+
}
|
|
43
|
+
export declare const KeyboardManagerProvider: React.FC<KeyboardManagerProviderProps>;
|
|
44
|
+
export declare function useKeyboardManager(): KeyboardManagerContextValue;
|
|
45
|
+
export declare function useKeyboardManagerOptional(): KeyboardManagerContextValue | null;
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
export { OverlayProvider, useOverlay } from './OverlayProvider';
|
|
1
|
+
export { OverlayProvider, useOverlay, useOverlayApi, useOverlays } from './OverlayProvider';
|
|
2
2
|
export { OverlayRenderer } from './OverlayRenderer';
|
|
3
3
|
export type { OverlayConfig } from './OverlayProvider';
|
|
4
4
|
export { DirectionProvider, useDirection, useDirectionSafe, DirectionContext } from './DirectionProvider';
|
|
5
5
|
export type { Direction, DirectionContextValue, DirectionProviderProps, StorageController } from './DirectionProvider';
|
|
6
|
+
export { KeyboardManagerProvider, useKeyboardManager, useKeyboardManagerOptional, } from './KeyboardManagerProvider';
|
|
7
|
+
export type { KeyboardManagerProviderProps, KeyboardManagerContextValue, } from './KeyboardManagerProvider';
|
|
@@ -1,7 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { PlatformBlocksThemeProviderProps } from './ThemeProvider';
|
|
3
|
+
import type { DirectionProviderProps } from '../providers';
|
|
3
4
|
import type { HighlightProps as HighlightComponentProps } from '../../components/Highlight';
|
|
5
|
+
import type { HapticsProviderProps } from '../haptics/HapticsProvider';
|
|
6
|
+
import type { PermissionProviderProps } from '../../components/Can';
|
|
4
7
|
import { ThemeModeConfig } from './ThemeModeProvider';
|
|
8
|
+
type DirectionProviderConfig = Omit<DirectionProviderProps, 'children'>;
|
|
9
|
+
type HapticsProviderConfig = Omit<HapticsProviderProps, 'children'>;
|
|
10
|
+
type PermissionProviderConfig = Omit<PermissionProviderProps, 'children'>;
|
|
5
11
|
export interface PlatformBlocksProviderProps extends Omit<PlatformBlocksThemeProviderProps, 'children'> {
|
|
6
12
|
/** Your application */
|
|
7
13
|
children: React.ReactNode;
|
|
@@ -42,12 +48,19 @@ export interface PlatformBlocksProviderProps extends Omit<PlatformBlocksThemePro
|
|
|
42
48
|
i18nResources?: Record<string, {
|
|
43
49
|
translation: Record<string, any>;
|
|
44
50
|
}>;
|
|
51
|
+
/** Direction context configuration (pass false to opt out) */
|
|
52
|
+
direction?: false | DirectionProviderConfig;
|
|
53
|
+
/** Haptics context configuration (pass false to opt out) */
|
|
54
|
+
haptics?: false | HapticsProviderConfig;
|
|
55
|
+
/** Permission context configuration (pass false to opt out) */
|
|
56
|
+
permissions?: false | PermissionProviderConfig;
|
|
45
57
|
}
|
|
46
58
|
/**
|
|
47
59
|
* Main provider component for Platform Blocks library
|
|
48
60
|
* Provides theme context and injects CSS variables
|
|
49
61
|
*/
|
|
50
|
-
export declare function PlatformBlocksProvider({ children, theme, inherit, withCSSVariables, cssVariablesSelector, colorSchemeMode, withOverlays, withSpotlight, withGlobalCSS, themeModeConfig, spotlightConfig, locale, fallbackLocale, i18nResources }: PlatformBlocksProviderProps): React.JSX.Element;
|
|
62
|
+
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;
|
|
51
63
|
export declare namespace PlatformBlocksProvider {
|
|
52
64
|
var displayName: string;
|
|
53
65
|
}
|
|
66
|
+
export {};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export declare const COMPONENT_SIZE_ORDER: readonly ["xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
|
|
2
|
+
export type ComponentSize = (typeof COMPONENT_SIZE_ORDER)[number];
|
|
3
|
+
export type ComponentSizeValue = ComponentSize | number;
|
|
4
|
+
export declare const DEFAULT_COMPONENT_SIZE: ComponentSize;
|
|
5
|
+
export declare function isComponentSize(value: unknown): value is ComponentSize;
|
|
6
|
+
export declare function clampComponentSize(value: ComponentSizeValue | undefined, allowedSizes?: ReadonlyArray<ComponentSize>, fallback?: ComponentSize): ComponentSizeValue;
|
|
7
|
+
export declare function resolveComponentSize<T>(value: ComponentSizeValue | undefined, scale: Partial<Record<ComponentSize, T>>, options?: {
|
|
8
|
+
fallback?: ComponentSize;
|
|
9
|
+
allowedSizes?: ComponentSize[];
|
|
10
|
+
}): T | number;
|