@vellira-ui/react-native 2.21.0 → 2.22.1

package/README.md

@@ -55,6 +55,20 @@ export function Example() {
 }
 ```
 
+### Button Notes
+
+Use `accessibilityLabel` for icon-only native buttons:
+
+```tsx
+import { Search } from '@vellira-ui/icons';
+
+<Button accessibilityLabel='Search' iconOnly leftIcon={<Search />} />;
+```
+
+Button icons are React elements from `@vellira-ui/icons`; the component injects
+the current icon color and size. `loading` disables interaction and can replace
+the visible label with `loadingText`.
+
 ## Testing
 
 Run only native tests:

package/dist/index.js

@@ -1831,6 +1831,13 @@ Tooltip.displayName = "Tooltip";
 import { cloneElement as cloneElement4, useState as useState7 } from "react";
 import { ActivityIndicator, Pressable as Pressable11, Text as Text12 } from "react-native";
 
+// src/utils/devWarning.ts
+var devWarning = (condition, message) => {
+  if ((typeof __DEV__ === "undefined" || __DEV__) && !condition) {
+    console.warn(message);
+  }
+};
+
 // src/primitives/Button/Button.styles.ts
 import { StyleSheet as StyleSheet21 } from "react-native";
 var fontWeight3 = (value) => value;
@@ -1861,29 +1868,42 @@ var createStyles21 = (theme) => StyleSheet21.create({
   disabled: {
     borderColor: theme.components.button.disabled.border
   },
+  focused: {
+    borderColor: theme.semantic.focus.ring,
+    shadowColor: theme.semantic.focus.ring,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.35,
+    shadowRadius: 4
+  },
   pressed: {
     transform: [{ scale: 0.98 }]
   }
 });
 
 // src/primitives/Button/Button.tsx
-import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
 var sizeMap = {
   sm: {
     px: 12,
     py: 8,
+    height: 36,
     fontSize: 12,
     iconSize: 16
   },
   md: {
     px: 16,
     py: 12,
+    height: 44,
     fontSize: 14,
     iconSize: 20
   },
   lg: {
     px: 20,
     py: 16,
+    height: 52,
     fontSize: 16,
     iconSize: 24
   }
@@ -1896,6 +1916,10 @@ function Button({
   loading = false,
   loadingText,
   onPress,
+  onFocus,
+  onBlur,
+  onHoverIn,
+  onHoverOut,
   size = "md",
   leftIcon,
   rightIcon,
@@ -1905,76 +1929,100 @@ function Button({
   textStyle,
   accessibilityLabel,
   iconSize,
-  testID
+  testID,
+  ...props
 }) {
   const { theme } = useTheme();
   const styles = useThemeStyles(createStyles21);
   const config = sizeMap[size];
   const variantTheme = theme.components.button[color][variant];
-  const [isPressed, setIsPressed] = useState7(false);
+  const [isHovered, setIsHovered] = useState7(false);
+  const [isFocused, setIsFocused] = useState7(false);
   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 stateTheme = isDisabled ? theme.components.button.disabled : isPressed ? variantTheme.pressed : variantTheme.default;
-  const contentColor = stateTheme.fg;
+  devWarning(
+    !iconOnly || Boolean(accessibilityLabel),
+    "Button: icon-only buttons must provide an accessibilityLabel."
+  );
   const resolvedIconSize = iconSize ?? config.iconSize;
-  const renderIcon = (icon, iconColor) => {
-    return cloneElement4(icon, {
-      color: iconColor,
-      size: resolvedIconSize
-    });
+  const handleFocus = (event) => {
+    setIsFocused(true);
+    onFocus?.(event);
+  };
+  const handleBlur = (event) => {
+    setIsFocused(false);
+    onBlur?.(event);
+  };
+  const handleHoverIn = (event) => {
+    setIsHovered(true);
+    onHoverIn?.(event);
+  };
+  const handleHoverOut = (event) => {
+    setIsHovered(false);
+    onHoverOut?.(event);
   };
-  return /* @__PURE__ */ jsxs13(
+  const renderIcon = (icon, iconColor) => cloneElement4(icon, {
+    color: iconColor,
+    size: resolvedIconSize
+  });
+  const getInteractionTheme = (pressed) => isDisabled ? theme.components.button.disabled : pressed ? variantTheme.pressed : isHovered ? variantTheme.hover : variantTheme.default;
+  return /* @__PURE__ */ jsx23(
     Pressable11,
     {
+      ...props,
       testID,
       disabled: isDisabled,
       onPress: isDisabled ? void 0 : onPress,
       accessibilityRole: "button",
       accessibilityState: { disabled: isDisabled, busy: loading },
       accessibilityLabel: accessibilityLabel ?? (typeof content === "string" ? content : void 0),
-      onPressIn: () => setIsPressed(true),
-      onPressOut: () => setIsPressed(false),
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      onHoverIn: handleHoverIn,
+      onHoverOut: handleHoverOut,
       style: ({ pressed }) => {
-        const pressedTheme = !isDisabled && pressed ? variantTheme.pressed : stateTheme;
+        const interactionTheme = getInteractionTheme(pressed);
         return [
           styles.button,
           {
-            backgroundColor: pressedTheme.bg,
-            borderColor: pressedTheme.border,
-            paddingHorizontal: iconOnly ? config.py : config.px,
-            paddingVertical: config.py
+            backgroundColor: interactionTheme.bg,
+            borderColor: interactionTheme.border,
+            paddingHorizontal: iconOnly ? 0 : config.px,
+            paddingVertical: iconOnly ? 0 : config.py,
+            width: iconOnly ? config.height : void 0,
+            height: iconOnly ? config.height : void 0
           },
-          fullWidth && styles.fullWidth,
+          fullWidth && !iconOnly && styles.fullWidth,
           isDisabled && styles.disabled,
           pressed && !isDisabled && styles.pressed,
+          isFocused && !isDisabled && styles.focused,
           style
         ];
       },
-      children: [
-        loading && /* @__PURE__ */ jsx23(ActivityIndicator, { size: "small", color: contentColor }),
-        !loading && leftIcon && renderIcon(leftIcon, contentColor),
-        content && !iconOnly && /* @__PURE__ */ jsx23(
-          Text12,
-          {
-            style: [
-              styles.text,
-              {
-                fontSize: config.fontSize,
-                color: contentColor
-              },
-              textStyle
-            ],
-            children: content
-          }
-        ),
-        !loading && rightIcon && renderIcon(rightIcon, contentColor)
-      ]
+      children: ({ pressed }) => {
+        const interactionTheme = getInteractionTheme(pressed);
+        const contentColor = interactionTheme.fg;
+        return /* @__PURE__ */ jsxs13(Fragment, { children: [
+          loading && /* @__PURE__ */ jsx23(ActivityIndicator, { size: "small", color: contentColor }),
+          !loading && leftIcon && renderIcon(leftIcon, contentColor),
+          content && !iconOnly && /* @__PURE__ */ jsx23(
+            Text12,
+            {
+              style: [
+                styles.text,
+                {
+                  fontSize: config.fontSize,
+                  color: contentColor
+                },
+                textStyle
+              ],
+              children: content
+            }
+          ),
+          !loading && rightIcon && renderIcon(rightIcon, contentColor)
+        ] });
+      }
     }
   );
 }
@@ -2103,7 +2151,7 @@ Checkbox.displayName = "Checkbox";
 
 // src/primitives/Input/Input.tsx
 import { cloneElement as cloneElement5, forwardRef as forwardRef2, useState as useState8 } from "react";
-import { TextInput, View as View20 } from "react-native";
+import { Pressable as Pressable13, Text as Text14, TextInput, View as View20 } from "react-native";
 
 // src/primitives/Input/Input.styles.ts
 import { StyleSheet as StyleSheet23 } from "react-native";
@@ -2128,18 +2176,51 @@ var createStyles23 = (theme) => StyleSheet23.create({
     borderRadius: theme.tokens.radius.md,
     borderWidth: 1
   },
-  inputWithLeftIcon: {
+  inputWithLeftAdornment: {
     paddingLeft: theme.tokens.spacing[5] + 20
   },
+  inputWithRightAdornment: {
+    paddingRight: theme.tokens.spacing[5] + 20
+  },
+  rightIcon: {
+    position: "absolute",
+    right: theme.tokens.spacing[4],
+    top: "50%",
+    zIndex: 1,
+    width: 20,
+    height: 20,
+    marginTop: -10,
+    alignItems: "center",
+    justifyContent: "center"
+  },
   leftIcon: {
     position: "absolute",
     left: theme.tokens.spacing[4],
-    top: 0,
-    bottom: 0,
+    top: "50%",
     zIndex: 1,
+    width: 20,
+    height: 20,
+    marginTop: -10,
     alignItems: "center",
     justifyContent: "center"
   },
+  clearButton: {
+    position: "absolute",
+    right: theme.tokens.spacing[4],
+    top: "50%",
+    zIndex: 1,
+    width: 20,
+    height: 20,
+    marginTop: -10,
+    borderRadius: 999,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  clearButtonText: {
+    color: theme.components.input.icon.danger,
+    fontSize: 16,
+    lineHeight: 20
+  },
   sm: {
     minHeight: 36,
     paddingHorizontal: theme.tokens.spacing[3],
@@ -2169,6 +2250,11 @@ var createStyles23 = (theme) => StyleSheet23.create({
   errorFocused: {
     borderColor: theme.components.input.error.border
   },
+  readOnly: {
+    color: theme.components.input.readOnly.fg,
+    borderColor: theme.components.input.readOnly.border,
+    backgroundColor: theme.components.input.readOnly.bg
+  },
   disabled: {
     opacity: 1,
     color: theme.components.input.disabled.fg,
@@ -2209,15 +2295,23 @@ var autoCorrectByInputType = {
 var Input = forwardRef2(
   ({
     label,
+    description,
     value,
+    defaultValue,
     onChange,
     placeholder,
     size = "md",
     error,
     disabled = false,
     required = false,
+    readOnly = false,
     type = "text",
     leftIcon,
+    rightIcon,
+    leftIconTone = "default",
+    rightIconTone = "default",
+    clearIcon,
+    clearIconTone = "danger",
     iconSize,
     containerStyle,
     inputStyle,
@@ -2229,15 +2323,25 @@ var Input = forwardRef2(
     onFocus,
     accessibilityLabel,
     accessibilityHint,
+    testID,
+    autoFocus,
+    maxLength,
+    clearable,
+    onClear,
     ...props
   }, ref) => {
     const { theme } = useTheme();
     const styles = useThemeStyles(createStyles23);
     const [isFocused, setIsFocused] = useState8(false);
-    const placeholderTextColor = disabled ? getDisabledPlaceholderTextColor(theme) : getPlaceholderTextColor(theme);
+    const [uncontrolledValue, setUncontrolledValue] = useState8(
+      defaultValue ?? ""
+    );
+    const isControlled = value !== void 0;
+    const currentValue = isControlled ? value : uncontrolledValue;
+    const hasValue = currentValue !== "";
+    const placeholderTextColor = disabled ? getDisabledPlaceholderTextColor(theme) : readOnly ? theme.components.input.readOnly.placeholder : getPlaceholderTextColor(theme);
     const isPassword = type === "password";
     const resolvedIconSize = iconSize ?? 16;
-    const iconColor = disabled ? theme.components.input.disabled.fg : isFocused ? theme.components.input.focus.fg : theme.components.input.default.placeholder;
     const handleFocus = (event) => {
       setIsFocused(true);
       onFocus?.(event);
@@ -2246,10 +2350,29 @@ var Input = forwardRef2(
       setIsFocused(false);
       onBlur?.(event);
     };
+    const handleChangeText = (nextValue) => {
+      if (!isControlled) {
+        setUncontrolledValue(nextValue);
+      }
+      onChange?.(nextValue);
+    };
+    const handleClear = () => {
+      if (!isControlled) {
+        setUncontrolledValue("");
+      }
+      onChange?.("");
+      onClear?.();
+    };
+    const showClearButton = clearable && hasValue && !disabled && !readOnly;
+    const showRightIcon = !showClearButton && Boolean(rightIcon);
+    const leftIconColor = disabled ? theme.components.input.disabled.icon : theme.components.input.icon[leftIconTone];
+    const rightIconColor = disabled ? theme.components.input.disabled.icon : theme.components.input.icon[rightIconTone];
+    const clearIconColor = disabled ? theme.components.input.disabled.icon : theme.components.input.icon[clearIconTone];
     return /* @__PURE__ */ jsx25(
       FormField,
       {
         label,
+        description,
         error,
         required,
         disabled,
@@ -2263,7 +2386,7 @@ var Input = forwardRef2(
               accessibilityElementsHidden: true,
               importantForAccessibility: "no",
               children: cloneElement5(leftIcon, {
-                color: iconColor,
+                color: leftIconColor,
                 size: resolvedIconSize
               })
             }
@@ -2273,16 +2396,19 @@ var Input = forwardRef2(
             {
               ...props,
               ref,
-              value,
-              editable: !disabled,
+              value: currentValue,
+              onChangeText: handleChangeText,
+              editable: !disabled && !readOnly,
               placeholder,
               keyboardType: keyboardType ?? keyboardTypeByInputType[type],
               secureTextEntry: secureTextEntry ?? isPassword,
               autoCapitalize: autoCapitalize ?? autoCapitalizeByInputType[type],
               autoCorrect: autoCorrect ?? autoCorrectByInputType[type],
-              onChangeText: onChange,
               onBlur: handleBlur,
               onFocus: handleFocus,
+              autoFocus,
+              maxLength,
+              testID,
               placeholderTextColor,
               accessibilityLabel: accessibilityLabel ?? label,
               accessibilityHint,
@@ -2291,13 +2417,47 @@ var Input = forwardRef2(
                 styles.input,
                 styles[size],
                 inputStyle,
-                leftIcon && styles.inputWithLeftIcon,
-                isFocused && !disabled && styles.focused,
+                leftIcon && styles.inputWithLeftAdornment,
+                (showRightIcon || showClearButton) && styles.inputWithRightAdornment,
+                isFocused && !disabled && !readOnly && styles.focused,
                 error && styles.error,
-                isFocused && error && !disabled && styles.errorFocused,
+                isFocused && error && !disabled && !readOnly && styles.errorFocused,
+                readOnly && !disabled && styles.readOnly,
                 disabled && styles.disabled
               ]
             }
+          ),
+          showClearButton ? /* @__PURE__ */ jsx25(
+            Pressable13,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: "Clear input",
+              hitSlop: 8,
+              onPress: handleClear,
+              style: styles.clearButton,
+              children: clearIcon ? cloneElement5(clearIcon, {
+                color: clearIconColor,
+                size: resolvedIconSize
+              }) : /* @__PURE__ */ jsx25(
+                Text14,
+                {
+                  style: [styles.clearButtonText, { color: clearIconColor }],
+                  children: "\xD7"
+                }
+              )
+            }
+          ) : showRightIcon && rightIcon && /* @__PURE__ */ jsx25(
+            View20,
+            {
+              pointerEvents: "none",
+              style: styles.rightIcon,
+              accessibilityElementsHidden: true,
+              importantForAccessibility: "no",
+              children: cloneElement5(rightIcon, {
+                color: rightIconColor,
+                size: resolvedIconSize
+              })
+            }
           )
         ] })
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vellira-ui/react-native",
-  "version": "2.21.0",
+  "version": "2.22.1",
   "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.21.0",
-    "@vellira-ui/icons": "2.21.0",
-    "@vellira-ui/tokens": "2.21.0",
-    "@vellira-ui/types": "2.21.0"
+    "@vellira-ui/icons": "2.22.1",
+    "@vellira-ui/core": "2.22.1",
+    "@vellira-ui/types": "2.22.1",
+    "@vellira-ui/tokens": "2.22.1"
   },
   "devDependencies": {
     "@types/react": "^19.2.3",