@vellira-ui/react-native 2.44.1 → 2.44.3
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.js +13 -8
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -2493,11 +2493,12 @@ const SelectItemRow = ({ option, isSelected, isDisabled, optionStyle, onSelect }
|
|
|
2493
2493
|
const { theme } = useTheme();
|
|
2494
2494
|
const styles = useThemeStyles(createItemStyles);
|
|
2495
2495
|
const { color, variant, renderOption } = useSelectContext();
|
|
2496
|
+
const [isHovered, setIsHovered] = useState(false);
|
|
2496
2497
|
const optionPalette = theme.components.select[option.color ?? color][variant].option;
|
|
2497
2498
|
const getOptionState = (pressed) => {
|
|
2498
2499
|
if (isDisabled) return theme.components.select.option.disabled;
|
|
2499
|
-
if (isSelected) return pressed ? optionPalette.selectedPressed : optionPalette.selected;
|
|
2500
|
-
return pressed ? optionPalette.pressed : theme.components.select.option.default;
|
|
2500
|
+
if (isSelected) return pressed ? optionPalette.selectedPressed : isHovered ? optionPalette.selectedHover : optionPalette.selected;
|
|
2501
|
+
return pressed ? optionPalette.pressed : isHovered ? optionPalette.hover : theme.components.select.option.default;
|
|
2501
2502
|
};
|
|
2502
2503
|
return /* @__PURE__ */ jsx(Pressable, {
|
|
2503
2504
|
disabled: isDisabled,
|
|
@@ -2509,6 +2510,8 @@ const SelectItemRow = ({ option, isSelected, isDisabled, optionStyle, onSelect }
|
|
|
2509
2510
|
disabled: isDisabled
|
|
2510
2511
|
},
|
|
2511
2512
|
onPress: () => onSelect(option),
|
|
2513
|
+
onHoverIn: () => setIsHovered(true),
|
|
2514
|
+
onHoverOut: () => setIsHovered(false),
|
|
2512
2515
|
style: ({ pressed }) => {
|
|
2513
2516
|
const optionState = getOptionState(pressed);
|
|
2514
2517
|
return [
|
|
@@ -3915,15 +3918,16 @@ const TabsIndicator = ({ children, style }) => {
|
|
|
3915
3918
|
borderRadius: theme.tokens.radius.lg,
|
|
3916
3919
|
borderWidth: 1,
|
|
3917
3920
|
...Platform.select({
|
|
3918
|
-
web: { boxShadow:
|
|
3921
|
+
web: { boxShadow: `${theme.tokens.shadows.sm.x}px ${theme.tokens.shadows.sm.y}px ${theme.tokens.shadows.sm.blur}px ${theme.tokens.shadows.sm.color}` },
|
|
3919
3922
|
default: {
|
|
3920
|
-
shadowColor:
|
|
3923
|
+
shadowColor: theme.tokens.shadows.sm.color,
|
|
3921
3924
|
shadowOffset: {
|
|
3922
|
-
width:
|
|
3923
|
-
height:
|
|
3925
|
+
width: theme.tokens.shadows.sm.x,
|
|
3926
|
+
height: theme.tokens.shadows.sm.y
|
|
3924
3927
|
},
|
|
3925
|
-
shadowOpacity: .
|
|
3926
|
-
shadowRadius:
|
|
3928
|
+
shadowOpacity: theme.tokens.shadows.sm.opacity,
|
|
3929
|
+
shadowRadius: theme.tokens.shadows.sm.blur,
|
|
3930
|
+
elevation: theme.tokens.shadows.sm.elevation
|
|
3927
3931
|
}
|
|
3928
3932
|
}),
|
|
3929
3933
|
transform: [{ translateX }, { translateY }]
|
|
@@ -3941,6 +3945,7 @@ const TabsIndicator = ({ children, style }) => {
|
|
|
3941
3945
|
size,
|
|
3942
3946
|
style,
|
|
3943
3947
|
theme.tokens.radius,
|
|
3948
|
+
theme.tokens.shadows.sm,
|
|
3944
3949
|
translateX,
|
|
3945
3950
|
translateY,
|
|
3946
3951
|
variant,
|