@vellira-ui/react-native 2.19.6 → 2.20.0

package/README.md

@@ -47,7 +47,9 @@ export function Example() {
     <View style={{ gap: 16 }}>
       <Input label='Email' value={email} onChange={setEmail} />
       <Checkbox label='Accept terms' />
-      <Button variant='primary'>Continue</Button>
+      <Button color='primary' variant='solid'>
+        Continue
+      </Button>
     </View>
   );
 }

package/dist/index.js

@@ -1829,7 +1829,7 @@ Tooltip.displayName = "Tooltip";
 
 // src/primitives/Button/Button.tsx
 import { cloneElement as cloneElement4, useState as useState7 } from "react";
-import { Pressable as Pressable11, Text as Text12 } from "react-native";
+import { ActivityIndicator, Pressable as Pressable11, Text as Text12 } from "react-native";
 
 // src/primitives/Button/Button.styles.ts
 import { StyleSheet as StyleSheet21 } from "react-native";
@@ -1841,7 +1841,7 @@ var createStyles21 = (theme) => StyleSheet21.create({
     justifyContent: "center",
     gap: 8,
     borderRadius: theme.tokens.radius.md,
-    borderWidth: 0
+    borderWidth: 1
   },
   fullWidth: {
     alignSelf: "stretch",
@@ -1851,13 +1851,15 @@ var createStyles21 = (theme) => StyleSheet21.create({
     fontFamily: theme.tokens.typography.family.regular,
     fontWeight: fontWeight3(theme.tokens.typography.weight.regular),
     lineHeight: theme.tokens.typography.lineHeight.md,
-    // Кнопка сама задает цвет текста через props,
-    // поэтому это значение используется как fallback.
-    color: theme.components.button.primary.default.fg
+    // Fallback color.
+    color: theme.components.button.primary.solid.default.fg
+  },
+  spinner: {
+    fontSize: 12,
+    lineHeight: theme.tokens.typography.lineHeight.md
   },
   disabled: {
-    borderColor: theme.components.button.disabled.border,
-    borderWidth: 1
+    borderColor: theme.components.button.disabled.border
   },
   pressed: {
     transform: [{ scale: 0.98 }]
@@ -1888,61 +1890,76 @@ var sizeMap = {
 };
 function Button({
   children,
+  color = "primary",
+  variant = "solid",
   disabled = false,
+  loading = false,
+  loadingText,
   onPress,
-  variant = "primary",
   size = "md",
   leftIcon,
   rightIcon,
   fullWidth = false,
+  iconOnly: iconOnlyProp = false,
   style,
+  textStyle,
   accessibilityLabel,
-  iconSize
+  iconSize,
+  testID
 }) {
   const { theme } = useTheme();
   const styles = useThemeStyles(createStyles21);
   const config = sizeMap[size];
-  const variantTheme = theme.components.button[variant];
+  const variantTheme = theme.components.button[color][variant];
   const [isPressed, setIsPressed] = useState7(false);
-  const iconOnly = !children && Boolean(leftIcon || rightIcon);
+  const isDisabled = disabled || loading;
+  const iconOnly = iconOnlyProp || !children && Boolean(leftIcon || rightIcon);
+  const content = loading && loadingText ? loadingText : children;
   if (iconOnly && !accessibilityLabel) {
     console.warn(
       "Vellira Button: icon-only buttons must provide an accessibilityLabel."
     );
   }
-  const contentColor = disabled ? theme.components.button.disabled.fg : isPressed ? variantTheme.pressed.fg : variantTheme.default.fg;
+  const stateTheme = isDisabled ? theme.components.button.disabled : isPressed ? variantTheme.pressed : variantTheme.default;
+  const contentColor = stateTheme.fg;
   const resolvedIconSize = iconSize ?? config.iconSize;
-  const renderIcon = (icon, color) => {
+  const renderIcon = (icon, iconColor) => {
     return cloneElement4(icon, {
-      color,
+      color: iconColor,
       size: resolvedIconSize
     });
   };
   return /* @__PURE__ */ jsxs13(
     Pressable11,
     {
-      disabled,
-      onPress,
+      testID,
+      disabled: isDisabled,
+      onPress: isDisabled ? void 0 : onPress,
       accessibilityRole: "button",
-      accessibilityState: { disabled },
-      accessibilityLabel: accessibilityLabel ?? (typeof children === "string" ? children : void 0),
+      accessibilityState: { disabled: isDisabled, busy: loading },
+      accessibilityLabel: accessibilityLabel ?? (typeof content === "string" ? content : void 0),
       onPressIn: () => setIsPressed(true),
       onPressOut: () => setIsPressed(false),
-      style: ({ pressed }) => [
-        styles.button,
-        {
-          backgroundColor: disabled ? theme.components.button.disabled.bg : pressed ? variantTheme.pressed.bg : variantTheme.default.bg,
-          paddingHorizontal: iconOnly ? config.py : config.px,
-          paddingVertical: config.py
-        },
-        fullWidth && styles.fullWidth,
-        disabled && styles.disabled,
-        pressed && !disabled && styles.pressed,
-        style
-      ],
+      style: ({ pressed }) => {
+        const pressedTheme = !isDisabled && pressed ? variantTheme.pressed : stateTheme;
+        return [
+          styles.button,
+          {
+            backgroundColor: pressedTheme.bg,
+            borderColor: pressedTheme.border,
+            paddingHorizontal: iconOnly ? config.py : config.px,
+            paddingVertical: config.py
+          },
+          fullWidth && styles.fullWidth,
+          isDisabled && styles.disabled,
+          pressed && !isDisabled && styles.pressed,
+          style
+        ];
+      },
       children: [
-        leftIcon && renderIcon(leftIcon, contentColor),
-        children && /* @__PURE__ */ jsx23(
+        loading && /* @__PURE__ */ jsx23(ActivityIndicator, { size: "small", color: contentColor }),
+        !loading && leftIcon && renderIcon(leftIcon, contentColor),
+        content && !iconOnly && /* @__PURE__ */ jsx23(
           Text12,
           {
             style: [
@@ -1950,12 +1967,13 @@ function Button({
               {
                 fontSize: config.fontSize,
                 color: contentColor
-              }
+              },
+              textStyle
             ],
-            children
+            children: content
           }
         ),
-        rightIcon && renderIcon(rightIcon, contentColor)
+        !loading && rightIcon && renderIcon(rightIcon, contentColor)
       ]
     }
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vellira-ui/react-native",
-  "version": "2.19.6",
+  "version": "2.20.0",
   "description": "React Native components for Vellira Design System",
   "author": "Roman Bakurov",
   "license": "MIT",
@@ -35,10 +35,10 @@
     "react-native": ">=0.81"
   },
   "dependencies": {
-    "@vellira-ui/core": "2.19.6",
-    "@vellira-ui/tokens": "2.19.6",
-    "@vellira-ui/icons": "2.19.6",
-    "@vellira-ui/types": "2.19.6"
+    "@vellira-ui/core": "2.20.0",
+    "@vellira-ui/icons": "2.20.0",
+    "@vellira-ui/types": "2.20.0",
+    "@vellira-ui/tokens": "2.20.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.3",