@rehagro/ui 1.0.29 → 1.0.31
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/dist/index.d.mts +7 -2
- package/dist/index.d.ts +7 -2
- package/dist/index.js +8 -4
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +8 -4
- package/dist/index.mjs.map +1 -1
- package/dist/native.d.mts +67 -3
- package/dist/native.d.ts +67 -3
- package/dist/native.js +356 -4
- package/dist/native.js.map +1 -1
- package/dist/native.mjs +358 -7
- package/dist/native.mjs.map +1 -1
- package/dist/styles.css +3 -3
- package/package.json +1 -1
package/dist/native.d.mts
CHANGED
|
@@ -36,6 +36,10 @@ type RehagroNativeTheme = {
|
|
|
36
36
|
inputHeightSm?: number;
|
|
37
37
|
inputHeightMd?: number;
|
|
38
38
|
inputHeightLg?: number;
|
|
39
|
+
buttonHeightSm?: number;
|
|
40
|
+
buttonHeightMd?: number;
|
|
41
|
+
buttonHeightLg?: number;
|
|
42
|
+
buttonHeightXl?: number;
|
|
39
43
|
fontFamilyBody?: string;
|
|
40
44
|
fontFamilyDisplay?: string;
|
|
41
45
|
fontSizeXs?: number;
|
|
@@ -55,7 +59,7 @@ type RehagroNativeTheme = {
|
|
|
55
59
|
};
|
|
56
60
|
type RehagroNativeProviderProps = {
|
|
57
61
|
/** Theme overrides — any token not provided keeps the default value */
|
|
58
|
-
theme
|
|
62
|
+
theme: RehagroNativeTheme;
|
|
59
63
|
children: React.ReactNode;
|
|
60
64
|
};
|
|
61
65
|
|
|
@@ -64,7 +68,7 @@ declare function RehagroNativeProvider({ theme, children }: RehagroNativeProvide
|
|
|
64
68
|
declare function useRehagroTheme(): RehagroNativeTheme;
|
|
65
69
|
|
|
66
70
|
type ButtonVariant = "solid" | "outline" | "ghost";
|
|
67
|
-
type ButtonSize = "sm" | "md" | "lg";
|
|
71
|
+
type ButtonSize = "sm" | "md" | "lg" | "xl";
|
|
68
72
|
type ButtonRadius = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
|
|
69
73
|
type ButtonProps = Omit<PressableProps, "style"> & {
|
|
70
74
|
/** Visual style variant */
|
|
@@ -413,4 +417,64 @@ declare const Card: React__default.ForwardRefExoticComponent<Omit<PressableProps
|
|
|
413
417
|
Footer: React__default.ForwardRefExoticComponent<CardFooterProps & React__default.RefAttributes<View>>;
|
|
414
418
|
};
|
|
415
419
|
|
|
416
|
-
|
|
420
|
+
type SelectSize = "sm" | "md" | "lg";
|
|
421
|
+
type SelectRadius = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
|
|
422
|
+
type SelectStatus = "default" | "error";
|
|
423
|
+
type SelectOption = {
|
|
424
|
+
/** Unique value for the option */
|
|
425
|
+
value: string;
|
|
426
|
+
/** Display label */
|
|
427
|
+
label: string;
|
|
428
|
+
/** Whether the option is disabled */
|
|
429
|
+
disabled?: boolean;
|
|
430
|
+
};
|
|
431
|
+
type SelectBaseProps = {
|
|
432
|
+
/** List of available options */
|
|
433
|
+
options: SelectOption[];
|
|
434
|
+
/** Label text displayed above the select */
|
|
435
|
+
label?: string;
|
|
436
|
+
/** Subtitle displayed next to the label */
|
|
437
|
+
subtitle?: string;
|
|
438
|
+
/** Placeholder text when no option is selected */
|
|
439
|
+
placeholder?: string;
|
|
440
|
+
/** Validation status */
|
|
441
|
+
status?: SelectStatus;
|
|
442
|
+
/** Select size */
|
|
443
|
+
size?: SelectSize;
|
|
444
|
+
/** Border radius */
|
|
445
|
+
radius?: SelectRadius;
|
|
446
|
+
/** Helper/error message displayed below the select */
|
|
447
|
+
helperText?: React__default.ReactNode;
|
|
448
|
+
/** Whether the select is disabled */
|
|
449
|
+
disabled?: boolean;
|
|
450
|
+
/** Custom style for the trigger container */
|
|
451
|
+
style?: StyleProp<ViewStyle>;
|
|
452
|
+
/** Custom style for the outermost wrapper */
|
|
453
|
+
wrapperStyle?: StyleProp<ViewStyle>;
|
|
454
|
+
/** Accessibility label */
|
|
455
|
+
accessibilityLabel?: string;
|
|
456
|
+
};
|
|
457
|
+
type SelectSingleProps = SelectBaseProps & {
|
|
458
|
+
/** Enables multi-select mode */
|
|
459
|
+
multiple?: false;
|
|
460
|
+
/** Currently selected value (single mode) */
|
|
461
|
+
value?: string;
|
|
462
|
+
/** Default selected value (single mode, uncontrolled) */
|
|
463
|
+
defaultValue?: string;
|
|
464
|
+
/** Called when selection changes (single mode) */
|
|
465
|
+
onChange?: (value: string) => void;
|
|
466
|
+
};
|
|
467
|
+
type SelectMultipleProps = SelectBaseProps & {
|
|
468
|
+
/** Enables multi-select mode */
|
|
469
|
+
multiple: true;
|
|
470
|
+
/** Currently selected values (multi mode) */
|
|
471
|
+
value?: string[];
|
|
472
|
+
/** Default selected values (multi mode, uncontrolled) */
|
|
473
|
+
defaultValue?: string[];
|
|
474
|
+
/** Called when selection changes (multi mode) */
|
|
475
|
+
onChange?: (value: string[]) => void;
|
|
476
|
+
};
|
|
477
|
+
type SelectProps = SelectSingleProps | SelectMultipleProps;
|
|
478
|
+
declare const Select: React__default.ForwardRefExoticComponent<SelectProps & React__default.RefAttributes<View>>;
|
|
479
|
+
|
|
480
|
+
export { ActivityIndicator, type ActivityIndicatorColor, type ActivityIndicatorProps, type ActivityIndicatorSize, Avatar, type AvatarProps, type AvatarSize, type AvatarVariant, Button, ButtonColor, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardPadding, type CardProps, type CardRadius, type CardVariant, Checkbox, type CheckboxProps, type CheckboxSize, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonRadius, type IconButtonSize, type IconButtonVariant, RehagroNativeProvider, type RehagroNativeProviderProps, type RehagroNativeTheme, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectRadius, type SelectSingleProps, type SelectSize, type SelectStatus, Tag, type TagColor, type TagProps, type TagSize, Text, type TextColor, TextInput, type TextInputProps, type TextInputRadius, type TextInputSize, type TextInputStatus, type TextProps, type TextSize, useRehagroTheme };
|
package/dist/native.d.ts
CHANGED
|
@@ -36,6 +36,10 @@ type RehagroNativeTheme = {
|
|
|
36
36
|
inputHeightSm?: number;
|
|
37
37
|
inputHeightMd?: number;
|
|
38
38
|
inputHeightLg?: number;
|
|
39
|
+
buttonHeightSm?: number;
|
|
40
|
+
buttonHeightMd?: number;
|
|
41
|
+
buttonHeightLg?: number;
|
|
42
|
+
buttonHeightXl?: number;
|
|
39
43
|
fontFamilyBody?: string;
|
|
40
44
|
fontFamilyDisplay?: string;
|
|
41
45
|
fontSizeXs?: number;
|
|
@@ -55,7 +59,7 @@ type RehagroNativeTheme = {
|
|
|
55
59
|
};
|
|
56
60
|
type RehagroNativeProviderProps = {
|
|
57
61
|
/** Theme overrides — any token not provided keeps the default value */
|
|
58
|
-
theme
|
|
62
|
+
theme: RehagroNativeTheme;
|
|
59
63
|
children: React.ReactNode;
|
|
60
64
|
};
|
|
61
65
|
|
|
@@ -64,7 +68,7 @@ declare function RehagroNativeProvider({ theme, children }: RehagroNativeProvide
|
|
|
64
68
|
declare function useRehagroTheme(): RehagroNativeTheme;
|
|
65
69
|
|
|
66
70
|
type ButtonVariant = "solid" | "outline" | "ghost";
|
|
67
|
-
type ButtonSize = "sm" | "md" | "lg";
|
|
71
|
+
type ButtonSize = "sm" | "md" | "lg" | "xl";
|
|
68
72
|
type ButtonRadius = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
|
|
69
73
|
type ButtonProps = Omit<PressableProps, "style"> & {
|
|
70
74
|
/** Visual style variant */
|
|
@@ -413,4 +417,64 @@ declare const Card: React__default.ForwardRefExoticComponent<Omit<PressableProps
|
|
|
413
417
|
Footer: React__default.ForwardRefExoticComponent<CardFooterProps & React__default.RefAttributes<View>>;
|
|
414
418
|
};
|
|
415
419
|
|
|
416
|
-
|
|
420
|
+
type SelectSize = "sm" | "md" | "lg";
|
|
421
|
+
type SelectRadius = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
|
|
422
|
+
type SelectStatus = "default" | "error";
|
|
423
|
+
type SelectOption = {
|
|
424
|
+
/** Unique value for the option */
|
|
425
|
+
value: string;
|
|
426
|
+
/** Display label */
|
|
427
|
+
label: string;
|
|
428
|
+
/** Whether the option is disabled */
|
|
429
|
+
disabled?: boolean;
|
|
430
|
+
};
|
|
431
|
+
type SelectBaseProps = {
|
|
432
|
+
/** List of available options */
|
|
433
|
+
options: SelectOption[];
|
|
434
|
+
/** Label text displayed above the select */
|
|
435
|
+
label?: string;
|
|
436
|
+
/** Subtitle displayed next to the label */
|
|
437
|
+
subtitle?: string;
|
|
438
|
+
/** Placeholder text when no option is selected */
|
|
439
|
+
placeholder?: string;
|
|
440
|
+
/** Validation status */
|
|
441
|
+
status?: SelectStatus;
|
|
442
|
+
/** Select size */
|
|
443
|
+
size?: SelectSize;
|
|
444
|
+
/** Border radius */
|
|
445
|
+
radius?: SelectRadius;
|
|
446
|
+
/** Helper/error message displayed below the select */
|
|
447
|
+
helperText?: React__default.ReactNode;
|
|
448
|
+
/** Whether the select is disabled */
|
|
449
|
+
disabled?: boolean;
|
|
450
|
+
/** Custom style for the trigger container */
|
|
451
|
+
style?: StyleProp<ViewStyle>;
|
|
452
|
+
/** Custom style for the outermost wrapper */
|
|
453
|
+
wrapperStyle?: StyleProp<ViewStyle>;
|
|
454
|
+
/** Accessibility label */
|
|
455
|
+
accessibilityLabel?: string;
|
|
456
|
+
};
|
|
457
|
+
type SelectSingleProps = SelectBaseProps & {
|
|
458
|
+
/** Enables multi-select mode */
|
|
459
|
+
multiple?: false;
|
|
460
|
+
/** Currently selected value (single mode) */
|
|
461
|
+
value?: string;
|
|
462
|
+
/** Default selected value (single mode, uncontrolled) */
|
|
463
|
+
defaultValue?: string;
|
|
464
|
+
/** Called when selection changes (single mode) */
|
|
465
|
+
onChange?: (value: string) => void;
|
|
466
|
+
};
|
|
467
|
+
type SelectMultipleProps = SelectBaseProps & {
|
|
468
|
+
/** Enables multi-select mode */
|
|
469
|
+
multiple: true;
|
|
470
|
+
/** Currently selected values (multi mode) */
|
|
471
|
+
value?: string[];
|
|
472
|
+
/** Default selected values (multi mode, uncontrolled) */
|
|
473
|
+
defaultValue?: string[];
|
|
474
|
+
/** Called when selection changes (multi mode) */
|
|
475
|
+
onChange?: (value: string[]) => void;
|
|
476
|
+
};
|
|
477
|
+
type SelectProps = SelectSingleProps | SelectMultipleProps;
|
|
478
|
+
declare const Select: React__default.ForwardRefExoticComponent<SelectProps & React__default.RefAttributes<View>>;
|
|
479
|
+
|
|
480
|
+
export { ActivityIndicator, type ActivityIndicatorColor, type ActivityIndicatorProps, type ActivityIndicatorSize, Avatar, type AvatarProps, type AvatarSize, type AvatarVariant, Button, ButtonColor, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardPadding, type CardProps, type CardRadius, type CardVariant, Checkbox, type CheckboxProps, type CheckboxSize, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonRadius, type IconButtonSize, type IconButtonVariant, RehagroNativeProvider, type RehagroNativeProviderProps, type RehagroNativeTheme, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectRadius, type SelectSingleProps, type SelectSize, type SelectStatus, Tag, type TagColor, type TagProps, type TagSize, Text, type TextColor, TextInput, type TextInputProps, type TextInputRadius, type TextInputSize, type TextInputStatus, type TextProps, type TextSize, useRehagroTheme };
|
package/dist/native.js
CHANGED
|
@@ -32,6 +32,10 @@ var DEFAULT_NATIVE_THEME = {
|
|
|
32
32
|
inputHeightSm: 36,
|
|
33
33
|
inputHeightMd: 44,
|
|
34
34
|
inputHeightLg: 52,
|
|
35
|
+
buttonHeightSm: 36,
|
|
36
|
+
buttonHeightMd: 44,
|
|
37
|
+
buttonHeightLg: 52,
|
|
38
|
+
buttonHeightXl: 60,
|
|
35
39
|
fontFamilyBody: "",
|
|
36
40
|
fontFamilyDisplay: "",
|
|
37
41
|
fontSizeXs: 12,
|
|
@@ -119,14 +123,16 @@ var Button = react.forwardRef(function Button2({
|
|
|
119
123
|
const colorBase = preset ? presetBase[color] : color;
|
|
120
124
|
const colorHover = preset ? presetHover[color] : darkenColor(color);
|
|
121
125
|
const sizeStyleMap = {
|
|
122
|
-
sm: { paddingHorizontal: 12,
|
|
123
|
-
md: { paddingHorizontal: 16,
|
|
124
|
-
lg: { paddingHorizontal: 20,
|
|
126
|
+
sm: { paddingHorizontal: 12, height: theme.buttonHeightSm ?? 36 },
|
|
127
|
+
md: { paddingHorizontal: 16, height: theme.buttonHeightMd ?? 44 },
|
|
128
|
+
lg: { paddingHorizontal: 20, height: theme.buttonHeightLg ?? 52 },
|
|
129
|
+
xl: { paddingHorizontal: 24, height: theme.buttonHeightXl ?? 60 }
|
|
125
130
|
};
|
|
126
131
|
const fontSizeMap = {
|
|
127
132
|
sm: 14,
|
|
128
133
|
md: 14,
|
|
129
|
-
lg: 16
|
|
134
|
+
lg: 16,
|
|
135
|
+
xl: 18
|
|
130
136
|
};
|
|
131
137
|
const radiusStyleMap = {
|
|
132
138
|
none: 0,
|
|
@@ -931,6 +937,351 @@ var Card2 = Object.assign(CardRoot, {
|
|
|
931
937
|
Content: CardContent,
|
|
932
938
|
Footer: CardFooter
|
|
933
939
|
});
|
|
940
|
+
var ChevronIcon = ({ size, color, open }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
941
|
+
reactNative.View,
|
|
942
|
+
{
|
|
943
|
+
style: {
|
|
944
|
+
width: size,
|
|
945
|
+
height: size,
|
|
946
|
+
alignItems: "center",
|
|
947
|
+
justifyContent: "center"
|
|
948
|
+
},
|
|
949
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
950
|
+
reactNative.View,
|
|
951
|
+
{
|
|
952
|
+
style: {
|
|
953
|
+
width: size * 0.5,
|
|
954
|
+
height: size * 0.5,
|
|
955
|
+
borderRightWidth: 2,
|
|
956
|
+
borderBottomWidth: 2,
|
|
957
|
+
borderColor: color,
|
|
958
|
+
transform: [
|
|
959
|
+
{ rotate: open ? "225deg" : "45deg" },
|
|
960
|
+
{ translateY: open ? size * 0.1 : -size * 0.1 }
|
|
961
|
+
]
|
|
962
|
+
}
|
|
963
|
+
}
|
|
964
|
+
)
|
|
965
|
+
}
|
|
966
|
+
);
|
|
967
|
+
var CheckIcon2 = ({ size, color }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
968
|
+
reactNative.View,
|
|
969
|
+
{
|
|
970
|
+
style: {
|
|
971
|
+
width: size,
|
|
972
|
+
height: size,
|
|
973
|
+
alignItems: "center",
|
|
974
|
+
justifyContent: "center"
|
|
975
|
+
},
|
|
976
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
977
|
+
reactNative.View,
|
|
978
|
+
{
|
|
979
|
+
style: {
|
|
980
|
+
position: "absolute",
|
|
981
|
+
width: size * 0.55,
|
|
982
|
+
height: size * 0.3,
|
|
983
|
+
borderLeftWidth: 2,
|
|
984
|
+
borderBottomWidth: 2,
|
|
985
|
+
borderColor: color,
|
|
986
|
+
transform: [{ rotate: "-45deg" }, { translateY: -size * 0.05 }]
|
|
987
|
+
}
|
|
988
|
+
}
|
|
989
|
+
)
|
|
990
|
+
}
|
|
991
|
+
);
|
|
992
|
+
var Select = react.forwardRef(function Select2(props, ref) {
|
|
993
|
+
const {
|
|
994
|
+
options,
|
|
995
|
+
label,
|
|
996
|
+
subtitle,
|
|
997
|
+
placeholder = "Selecione",
|
|
998
|
+
status = "default",
|
|
999
|
+
size = "md",
|
|
1000
|
+
radius = "xs",
|
|
1001
|
+
helperText,
|
|
1002
|
+
disabled = false,
|
|
1003
|
+
style,
|
|
1004
|
+
wrapperStyle,
|
|
1005
|
+
accessibilityLabel,
|
|
1006
|
+
multiple = false
|
|
1007
|
+
} = props;
|
|
1008
|
+
const theme = useRehagroTheme();
|
|
1009
|
+
const triggerRef = react.useRef(null);
|
|
1010
|
+
const [isOpen, setIsOpen] = react.useState(false);
|
|
1011
|
+
const [triggerLayout, setTriggerLayout] = react.useState(null);
|
|
1012
|
+
const [internalValue, setInternalValue] = react.useState(() => {
|
|
1013
|
+
if (props.defaultValue !== void 0) {
|
|
1014
|
+
return Array.isArray(props.defaultValue) ? props.defaultValue : [props.defaultValue];
|
|
1015
|
+
}
|
|
1016
|
+
return [];
|
|
1017
|
+
});
|
|
1018
|
+
const isControlled = props.value !== void 0;
|
|
1019
|
+
const selectedValues = isControlled ? Array.isArray(props.value) ? props.value : props.value !== void 0 ? [props.value] : [] : internalValue;
|
|
1020
|
+
const heightMap = {
|
|
1021
|
+
sm: theme.inputHeightSm ?? 36,
|
|
1022
|
+
md: theme.inputHeightMd ?? 44,
|
|
1023
|
+
lg: theme.inputHeightLg ?? 52
|
|
1024
|
+
};
|
|
1025
|
+
const paddingMap2 = {
|
|
1026
|
+
sm: 12,
|
|
1027
|
+
md: 14,
|
|
1028
|
+
lg: 16
|
|
1029
|
+
};
|
|
1030
|
+
const fontSizeMap = {
|
|
1031
|
+
sm: 14,
|
|
1032
|
+
md: 14,
|
|
1033
|
+
lg: 16
|
|
1034
|
+
};
|
|
1035
|
+
const optionPaddingMap = {
|
|
1036
|
+
sm: 8,
|
|
1037
|
+
md: 10,
|
|
1038
|
+
lg: 12
|
|
1039
|
+
};
|
|
1040
|
+
const radiusMap2 = {
|
|
1041
|
+
none: 0,
|
|
1042
|
+
xxs: theme.radiusXxs ?? 4,
|
|
1043
|
+
xs: theme.radiusXs ?? 8,
|
|
1044
|
+
sm: theme.radiusSm ?? 12,
|
|
1045
|
+
md: theme.radiusMd ?? 16,
|
|
1046
|
+
lg: theme.radiusLg ?? 24,
|
|
1047
|
+
xl: theme.radiusXl ?? 32,
|
|
1048
|
+
full: 9999
|
|
1049
|
+
};
|
|
1050
|
+
const dropdownRadiusMap = {
|
|
1051
|
+
none: 0,
|
|
1052
|
+
xxs: theme.radiusXxs ?? 4,
|
|
1053
|
+
xs: theme.radiusXs ?? 8,
|
|
1054
|
+
sm: theme.radiusXs ?? 8,
|
|
1055
|
+
md: theme.radiusXs ?? 8,
|
|
1056
|
+
lg: theme.radiusXs ?? 8,
|
|
1057
|
+
xl: theme.radiusXs ?? 8,
|
|
1058
|
+
full: theme.radiusXs ?? 8
|
|
1059
|
+
};
|
|
1060
|
+
const hasError = status === "error";
|
|
1061
|
+
const borderColor = hasError ? theme.danger : isOpen ? theme.primary : theme.border;
|
|
1062
|
+
const containerStyle = {
|
|
1063
|
+
height: heightMap[size],
|
|
1064
|
+
paddingHorizontal: paddingMap2[size],
|
|
1065
|
+
borderRadius: radiusMap2[radius],
|
|
1066
|
+
borderWidth: theme.borderWidthSm,
|
|
1067
|
+
borderColor,
|
|
1068
|
+
backgroundColor: disabled ? theme.background : theme.surface,
|
|
1069
|
+
flexDirection: "row",
|
|
1070
|
+
alignItems: "center",
|
|
1071
|
+
justifyContent: "space-between",
|
|
1072
|
+
gap: 8,
|
|
1073
|
+
opacity: disabled ? 0.5 : 1
|
|
1074
|
+
};
|
|
1075
|
+
const displayText = react.useMemo(() => {
|
|
1076
|
+
if (selectedValues.length === 0) return null;
|
|
1077
|
+
if (!multiple) {
|
|
1078
|
+
return options.find((o) => o.value === selectedValues[0])?.label ?? null;
|
|
1079
|
+
}
|
|
1080
|
+
const selectedLabels = selectedValues.map((v) => options.find((o) => o.value === v)?.label).filter(Boolean);
|
|
1081
|
+
if (selectedLabels.length === 0) return null;
|
|
1082
|
+
if (selectedLabels.length === 1) return selectedLabels[0];
|
|
1083
|
+
return `${selectedLabels.length} selecionados`;
|
|
1084
|
+
}, [selectedValues, options, multiple]);
|
|
1085
|
+
const handleSelect = react.useCallback(
|
|
1086
|
+
(optionValue) => {
|
|
1087
|
+
if (multiple) {
|
|
1088
|
+
const next = selectedValues.includes(optionValue) ? selectedValues.filter((v) => v !== optionValue) : [...selectedValues, optionValue];
|
|
1089
|
+
if (!isControlled) setInternalValue(next);
|
|
1090
|
+
props.onChange?.(next);
|
|
1091
|
+
} else {
|
|
1092
|
+
const next = [optionValue];
|
|
1093
|
+
if (!isControlled) setInternalValue(next);
|
|
1094
|
+
props.onChange?.(optionValue);
|
|
1095
|
+
setIsOpen(false);
|
|
1096
|
+
}
|
|
1097
|
+
},
|
|
1098
|
+
[multiple, selectedValues, isControlled, props]
|
|
1099
|
+
);
|
|
1100
|
+
const openDropdown = react.useCallback(() => {
|
|
1101
|
+
if (disabled) return;
|
|
1102
|
+
triggerRef.current?.measureInWindow((x, y, width, height) => {
|
|
1103
|
+
setTriggerLayout({ x, y, width, height });
|
|
1104
|
+
setIsOpen(true);
|
|
1105
|
+
});
|
|
1106
|
+
}, [disabled]);
|
|
1107
|
+
const closeDropdown = react.useCallback(() => {
|
|
1108
|
+
setIsOpen(false);
|
|
1109
|
+
}, []);
|
|
1110
|
+
const handleTriggerLayout = (_e) => {
|
|
1111
|
+
if (isOpen) {
|
|
1112
|
+
triggerRef.current?.measureInWindow((x, y, width, height) => {
|
|
1113
|
+
setTriggerLayout({ x, y, width, height });
|
|
1114
|
+
});
|
|
1115
|
+
}
|
|
1116
|
+
};
|
|
1117
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [{ gap: 4 }, wrapperStyle], children: [
|
|
1118
|
+
label && /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { flexDirection: "row", alignItems: "baseline", gap: 4 }, children: [
|
|
1119
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1120
|
+
reactNative.Text,
|
|
1121
|
+
{
|
|
1122
|
+
style: {
|
|
1123
|
+
fontSize: 14,
|
|
1124
|
+
fontWeight: "500",
|
|
1125
|
+
color: theme.text,
|
|
1126
|
+
...theme.fontFamilyBody ? { fontFamily: theme.fontFamilyBody } : {}
|
|
1127
|
+
},
|
|
1128
|
+
children: label
|
|
1129
|
+
}
|
|
1130
|
+
),
|
|
1131
|
+
subtitle && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1132
|
+
reactNative.Text,
|
|
1133
|
+
{
|
|
1134
|
+
style: {
|
|
1135
|
+
fontSize: 14,
|
|
1136
|
+
color: theme.textMuted,
|
|
1137
|
+
...theme.fontFamilyBody ? { fontFamily: theme.fontFamilyBody } : {}
|
|
1138
|
+
},
|
|
1139
|
+
children: subtitle
|
|
1140
|
+
}
|
|
1141
|
+
)
|
|
1142
|
+
] }),
|
|
1143
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1144
|
+
reactNative.Pressable,
|
|
1145
|
+
{
|
|
1146
|
+
ref: (node) => {
|
|
1147
|
+
triggerRef.current = node;
|
|
1148
|
+
if (typeof ref === "function") ref(node);
|
|
1149
|
+
else if (ref) ref.current = node;
|
|
1150
|
+
},
|
|
1151
|
+
onPress: openDropdown,
|
|
1152
|
+
onLayout: handleTriggerLayout,
|
|
1153
|
+
disabled,
|
|
1154
|
+
accessibilityRole: "combobox",
|
|
1155
|
+
accessibilityState: { disabled, expanded: isOpen },
|
|
1156
|
+
accessibilityLabel: accessibilityLabel ?? label,
|
|
1157
|
+
style: [containerStyle, style],
|
|
1158
|
+
children: [
|
|
1159
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1160
|
+
reactNative.Text,
|
|
1161
|
+
{
|
|
1162
|
+
numberOfLines: 1,
|
|
1163
|
+
style: {
|
|
1164
|
+
flex: 1,
|
|
1165
|
+
fontSize: fontSizeMap[size],
|
|
1166
|
+
color: displayText ? theme.text : theme.textMuted,
|
|
1167
|
+
...theme.fontFamilyBody ? { fontFamily: theme.fontFamilyBody } : {}
|
|
1168
|
+
},
|
|
1169
|
+
children: displayText ?? placeholder
|
|
1170
|
+
}
|
|
1171
|
+
),
|
|
1172
|
+
/* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { size: 18, color: theme.textMuted ?? "#6b7280", open: isOpen })
|
|
1173
|
+
]
|
|
1174
|
+
}
|
|
1175
|
+
),
|
|
1176
|
+
helperText && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1177
|
+
reactNative.Text,
|
|
1178
|
+
{
|
|
1179
|
+
style: {
|
|
1180
|
+
fontSize: 12,
|
|
1181
|
+
color: hasError ? theme.danger : theme.textMuted,
|
|
1182
|
+
...theme.fontFamilyBody ? { fontFamily: theme.fontFamilyBody } : {}
|
|
1183
|
+
},
|
|
1184
|
+
children: helperText
|
|
1185
|
+
}
|
|
1186
|
+
),
|
|
1187
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1188
|
+
reactNative.Modal,
|
|
1189
|
+
{
|
|
1190
|
+
visible: isOpen,
|
|
1191
|
+
transparent: true,
|
|
1192
|
+
animationType: "fade",
|
|
1193
|
+
onRequestClose: closeDropdown,
|
|
1194
|
+
statusBarTranslucent: true,
|
|
1195
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { style: { flex: 1, backgroundColor: "transparent" }, onPress: closeDropdown, children: triggerLayout && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1196
|
+
reactNative.View,
|
|
1197
|
+
{
|
|
1198
|
+
style: {
|
|
1199
|
+
position: "absolute",
|
|
1200
|
+
top: triggerLayout.y + triggerLayout.height + 36,
|
|
1201
|
+
left: triggerLayout.x,
|
|
1202
|
+
width: triggerLayout.width,
|
|
1203
|
+
maxHeight: 240,
|
|
1204
|
+
borderRadius: dropdownRadiusMap[radius],
|
|
1205
|
+
borderWidth: theme.borderWidthSm,
|
|
1206
|
+
borderColor: theme.border,
|
|
1207
|
+
backgroundColor: theme.surface,
|
|
1208
|
+
shadowColor: "#000",
|
|
1209
|
+
shadowOffset: { width: 0, height: 2 },
|
|
1210
|
+
shadowOpacity: 0.1,
|
|
1211
|
+
shadowRadius: 8,
|
|
1212
|
+
elevation: 4,
|
|
1213
|
+
overflow: "hidden"
|
|
1214
|
+
},
|
|
1215
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1216
|
+
reactNative.FlatList,
|
|
1217
|
+
{
|
|
1218
|
+
data: options,
|
|
1219
|
+
keyExtractor: (item) => item.value,
|
|
1220
|
+
keyboardShouldPersistTaps: "handled",
|
|
1221
|
+
renderItem: ({ item }) => {
|
|
1222
|
+
const isSelected = selectedValues.includes(item.value);
|
|
1223
|
+
const isDisabled = !!item.disabled;
|
|
1224
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1225
|
+
reactNative.Pressable,
|
|
1226
|
+
{
|
|
1227
|
+
onPress: () => {
|
|
1228
|
+
if (!isDisabled) handleSelect(item.value);
|
|
1229
|
+
},
|
|
1230
|
+
disabled: isDisabled,
|
|
1231
|
+
accessibilityRole: "menuitem",
|
|
1232
|
+
accessibilityState: { selected: isSelected, disabled: isDisabled },
|
|
1233
|
+
style: ({ pressed }) => ({
|
|
1234
|
+
paddingHorizontal: paddingMap2[size],
|
|
1235
|
+
paddingVertical: optionPaddingMap[size],
|
|
1236
|
+
flexDirection: "row",
|
|
1237
|
+
alignItems: "center",
|
|
1238
|
+
justifyContent: "space-between",
|
|
1239
|
+
gap: 8,
|
|
1240
|
+
backgroundColor: pressed && !isDisabled ? theme.background : "transparent",
|
|
1241
|
+
opacity: isDisabled ? 0.5 : 1
|
|
1242
|
+
}),
|
|
1243
|
+
children: [
|
|
1244
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1245
|
+
reactNative.Text,
|
|
1246
|
+
{
|
|
1247
|
+
numberOfLines: 1,
|
|
1248
|
+
style: {
|
|
1249
|
+
flex: 1,
|
|
1250
|
+
fontSize: fontSizeMap[size],
|
|
1251
|
+
color: theme.text,
|
|
1252
|
+
...theme.fontFamilyBody ? { fontFamily: theme.fontFamilyBody } : {}
|
|
1253
|
+
},
|
|
1254
|
+
children: item.label
|
|
1255
|
+
}
|
|
1256
|
+
),
|
|
1257
|
+
multiple ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1258
|
+
reactNative.View,
|
|
1259
|
+
{
|
|
1260
|
+
style: {
|
|
1261
|
+
width: 18,
|
|
1262
|
+
height: 18,
|
|
1263
|
+
borderRadius: theme.radiusXxs,
|
|
1264
|
+
borderWidth: theme.borderWidthSm,
|
|
1265
|
+
borderColor: isSelected ? theme.primary : theme.border,
|
|
1266
|
+
backgroundColor: isSelected ? theme.primary : theme.surface,
|
|
1267
|
+
alignItems: "center",
|
|
1268
|
+
justifyContent: "center"
|
|
1269
|
+
},
|
|
1270
|
+
children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon2, { size: 12, color: theme.surface ?? "#ffffff" })
|
|
1271
|
+
}
|
|
1272
|
+
) : isSelected && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon2, { size: 14, color: theme.primary ?? "#16a34a" })
|
|
1273
|
+
]
|
|
1274
|
+
}
|
|
1275
|
+
);
|
|
1276
|
+
}
|
|
1277
|
+
}
|
|
1278
|
+
)
|
|
1279
|
+
}
|
|
1280
|
+
) })
|
|
1281
|
+
}
|
|
1282
|
+
)
|
|
1283
|
+
] });
|
|
1284
|
+
});
|
|
934
1285
|
|
|
935
1286
|
exports.ActivityIndicator = ActivityIndicator3;
|
|
936
1287
|
exports.Avatar = Avatar;
|
|
@@ -942,6 +1293,7 @@ exports.CardHeader = CardHeader;
|
|
|
942
1293
|
exports.Checkbox = Checkbox;
|
|
943
1294
|
exports.IconButton = IconButton;
|
|
944
1295
|
exports.RehagroNativeProvider = RehagroNativeProvider;
|
|
1296
|
+
exports.Select = Select;
|
|
945
1297
|
exports.Tag = Tag;
|
|
946
1298
|
exports.Text = Text5;
|
|
947
1299
|
exports.TextInput = TextInput;
|