@vellira-ui/react-native 2.44.0 → 2.44.2

package/dist/index.js

@@ -587,16 +587,16 @@ const createStyles$21 = (theme) => StyleSheet.create({
 		borderTopRightRadius: theme.tokens.radius.lg,
 		borderWidth: 1,
 		...Platform.select({
-			web: { boxShadow: "0 -4px 16px rgba(0, 0, 0, 0.24)" },
+			web: { boxShadow: `${theme.tokens.shadows.lg.x}px ${-theme.tokens.shadows.lg.y}px ${theme.tokens.shadows.lg.blur}px ${theme.tokens.shadows.lg.color}` },
 			default: {
-				shadowColor: "#000000",
+				shadowColor: theme.tokens.shadows.lg.color,
 				shadowOffset: {
-					width: 0,
-					height: -4
+					width: theme.tokens.shadows.lg.x,
+					height: -theme.tokens.shadows.lg.y
 				},
-				shadowOpacity: .24,
-				shadowRadius: 16,
-				elevation: 12
+				shadowOpacity: theme.tokens.shadows.lg.opacity,
+				shadowRadius: theme.tokens.shadows.lg.blur,
+				elevation: theme.tokens.shadows.lg.elevation
 			}
 		})
 	},
@@ -905,23 +905,26 @@ const createStyles$19 = (theme) => StyleSheet.create({
 });
 //#endregion
 //#region src/components/Dropdown/Item/DropdownItem.tsx
-function DropdownItem({ label, value, color = "primary", icon, danger = false, disabled = false, textWrap = "truncate", itemStyle, textStyle, onSelect }) {
+function DropdownItem({ label, value, rootColor = "primary", color = "default", icon, disabled = false, textWrap = "truncate", itemStyle, textStyle, onSelect }) {
 	const { theme } = useTheme();
 	const styles = useThemeStyles(createStyles$19);
-	const colorPalette = theme.components.dropdown[color];
+	const rootColorPalette = theme.components.dropdown[rootColor];
+	const itemColorPalette = color === "default" ? void 0 : theme.components.dropdown[color];
 	const renderColoredNode = (node, color) => {
 		if (!isValidElement(node)) return node;
 		return cloneElement(node, { color });
 	};
 	const getContentColor = (pressed) => {
 		if (disabled) return theme.components.dropdown.item.disabled.fg;
-		if (danger) return pressed ? theme.components.dropdown.item.danger.active.fg : theme.components.dropdown.item.danger.default.fg;
-		return pressed ? colorPalette.item.pressed.fg : theme.components.dropdown.item.default.fg;
+		if (color === "danger") return pressed ? theme.components.dropdown.item.danger.active.fg : theme.components.dropdown.item.danger.default.fg;
+		if (itemColorPalette) return pressed ? itemColorPalette.item.pressed.fg : itemColorPalette.item.fg;
+		return pressed ? rootColorPalette.item.pressed.fg : theme.components.dropdown.item.default.fg;
 	};
 	const getBackgroundColor = (pressed) => {
 		if (disabled) return theme.components.dropdown.item.disabled.bg;
-		if (danger) return pressed ? theme.components.dropdown.item.danger.active.bg : theme.components.dropdown.item.danger.default.bg;
-		return pressed ? colorPalette.item.pressed.bg : theme.components.dropdown.item.default.bg;
+		if (color === "danger") return pressed ? theme.components.dropdown.item.danger.active.bg : theme.components.dropdown.item.danger.default.bg;
+		if (itemColorPalette) return pressed ? itemColorPalette.item.pressed.bg : theme.components.dropdown.item.default.bg;
+		return pressed ? rootColorPalette.item.pressed.bg : theme.components.dropdown.item.default.bg;
 	};
 	const accessibilityLabel = typeof label === "string" ? label : value;
 	const numberOfLines = textWrap === "wrap" ? void 0 : 1;
@@ -1193,7 +1196,7 @@ const createStyles$16 = (theme) => StyleSheet.create({
 });
 //#endregion
 //#region src/components/Dropdown/Dropdown.tsx
-function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, showArrow = true, open, defaultOpen = false, onOpenChange, presentation = "auto", closeOnSelect = true, color = "primary", disabled = false, loading = false, loadingText = "Loading actions...", searchable = false, command = false, searchValue, defaultSearchValue = "", searchPlaceholder, onSearch, empty, noOptionsText, size = "md", style, triggerStyle, contentStyle, itemStyle, textStyle, accessibilityLabel, accessibilityHint }) {
+function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, showArrow = true, open, defaultOpen = false, onOpenChange, presentation = "auto", closeOnSelect = true, color = "primary", disabled = false, loading = false, loadingText = "Loading actions...", searchable = false, command = false, searchValue, defaultSearchValue = "", searchPlaceholder, onSearch, empty, size = "md", style, triggerStyle, contentStyle, itemStyle, textStyle, accessibilityLabel, accessibilityHint }) {
 	const styles = useThemeStyles(createStyles$16);
 	const overlayId = useId();
 	const [uncontrolledSearchValue, setUncontrolledSearchValue] = useState(defaultSearchValue);
@@ -1285,9 +1288,9 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 		return /* @__PURE__ */ jsx(DropdownItem, {
 			label: item.props.children,
 			value: item.props.value ?? item.id,
-			color,
+			rootColor: color,
+			color: item.props.color,
 			icon: item.props.icon,
-			danger: item.props.danger,
 			disabled: item.props.disabled,
 			textWrap: item.props.textWrap,
 			itemStyle,
@@ -1308,7 +1311,7 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 	}] : isSearchable && filteredParsed.items.length === 0 ? [{
 		type: "empty",
 		id: "empty",
-		props: { children: empty ?? noOptionsText ?? "No actions found" }
+		props: { children: empty ?? "No actions found" }
 	}] : filteredParsed.entries;
 	const contentStyleFromSlot = parsed.contentProps?.style;
 	const presentationFromSlot = parsed.contentProps?.presentation === "auto" ? void 0 : parsed.contentProps?.presentation;
@@ -3912,15 +3915,16 @@ const TabsIndicator = ({ children, style }) => {
 				borderRadius: theme.tokens.radius.lg,
 				borderWidth: 1,
 				...Platform.select({
-					web: { boxShadow: "0 1px 2px rgba(24, 21, 33, 0.06)" },
+					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}` },
 					default: {
-						shadowColor: "#181521",
+						shadowColor: theme.tokens.shadows.sm.color,
 						shadowOffset: {
-							width: 0,
-							height: 1
+							width: theme.tokens.shadows.sm.x,
+							height: theme.tokens.shadows.sm.y
 						},
-						shadowOpacity: .06,
-						shadowRadius: 2
+						shadowOpacity: theme.tokens.shadows.sm.opacity,
+						shadowRadius: theme.tokens.shadows.sm.blur,
+						elevation: theme.tokens.shadows.sm.elevation
 					}
 				}),
 				transform: [{ translateX }, { translateY }]
@@ -3938,6 +3942,7 @@ const TabsIndicator = ({ children, style }) => {
 		size,
 		style,
 		theme.tokens.radius,
+		theme.tokens.shadows.sm,
 		translateX,
 		translateY,
 		variant,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vellira-ui/react-native",
-  "version": "2.44.0",
+  "version": "2.44.2",
   "description": "React Native components for Vellira Design System",
   "author": "Roman Bakurov",
   "license": "MIT",