@vellira-ui/react-native 2.20.0 → 2.22.0

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,6 +1868,16 @@ 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 }]
   }
@@ -1912,15 +1929,16 @@ function Button({
   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;
+  devWarning(
+    !iconOnly || Boolean(accessibilityLabel),
+    "Button: icon-only buttons must provide an accessibilityLabel."
+  );
+  const stateTheme = isDisabled ? theme.components.button.disabled : isPressed ? variantTheme.pressed : isHovered ? variantTheme.hover : variantTheme.default;
   const contentColor = stateTheme.fg;
   const resolvedIconSize = iconSize ?? config.iconSize;
   const renderIcon = (icon, iconColor) => {
@@ -1938,10 +1956,14 @@ function Button({
       accessibilityRole: "button",
       accessibilityState: { disabled: isDisabled, busy: loading },
       accessibilityLabel: accessibilityLabel ?? (typeof content === "string" ? content : void 0),
+      onBlur: () => setIsFocused(false),
+      onFocus: () => setIsFocused(true),
+      onHoverIn: () => setIsHovered(true),
+      onHoverOut: () => setIsHovered(false),
       onPressIn: () => setIsPressed(true),
       onPressOut: () => setIsPressed(false),
       style: ({ pressed }) => {
-        const pressedTheme = !isDisabled && pressed ? variantTheme.pressed : stateTheme;
+        const pressedTheme = !isDisabled && pressed ? variantTheme.pressed : !isDisabled && isHovered ? variantTheme.hover : stateTheme;
         return [
           styles.button,
           {
@@ -1953,6 +1975,7 @@ function Button({
           fullWidth && styles.fullWidth,
           isDisabled && styles.disabled,
           pressed && !isDisabled && styles.pressed,
+          isFocused && !isDisabled && styles.focused,
           style
         ];
       },
@@ -2103,7 +2126,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 +2151,51 @@ var createStyles23 = (theme) => StyleSheet23.create({
     borderRadius: theme.tokens.radius.md,
     borderWidth: 1
   },
-  inputWithLeftIcon: {
+  inputWithLeftAdornment: {
     paddingLeft: theme.tokens.spacing[5] + 20
   },
-  leftIcon: {
+  inputWithRightAdornment: {
+    paddingRight: theme.tokens.spacing[5] + 20
+  },
+  rightAdornment: {
+    position: "absolute",
+    right: theme.tokens.spacing[4],
+    top: "50%",
+    zIndex: 1,
+    width: 20,
+    height: 20,
+    marginTop: -10,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  leftAdornment: {
     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 +2225,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,
@@ -2210,14 +2271,20 @@ var Input = forwardRef2(
   ({
     label,
     value,
+    defaultValue,
     onChange,
     placeholder,
     size = "md",
     error,
     disabled = false,
     required = false,
+    readOnly = false,
     type = "text",
-    leftIcon,
+    leftAdornment,
+    rightAdornment,
+    leftAdornmentTone = "default",
+    rightAdornmentTone = "default",
+    clearIcon,
     iconSize,
     containerStyle,
     inputStyle,
@@ -2229,15 +2296,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,6 +2323,24 @@ 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(rightAdornment);
+    const leftIconColor = disabled ? theme.components.input.disabled.icon : theme.components.input.icon[leftAdornmentTone];
+    const rightIconColor = disabled ? theme.components.input.disabled.icon : theme.components.input.icon[rightAdornmentTone];
+    const clearIconColor = disabled ? theme.components.input.disabled.icon : theme.components.input.icon.danger;
     return /* @__PURE__ */ jsx25(
       FormField,
       {
@@ -2255,15 +2350,15 @@ var Input = forwardRef2(
         disabled,
         style: containerStyle,
         children: /* @__PURE__ */ jsxs15(View20, { style: styles.inputWrapper, children: [
-          leftIcon && /* @__PURE__ */ jsx25(
+          leftAdornment && /* @__PURE__ */ jsx25(
             View20,
             {
               pointerEvents: "none",
-              style: styles.leftIcon,
+              style: styles.leftAdornment,
               accessibilityElementsHidden: true,
               importantForAccessibility: "no",
-              children: cloneElement5(leftIcon, {
-                color: iconColor,
+              children: cloneElement5(leftAdornment, {
+                color: leftIconColor,
                 size: resolvedIconSize
               })
             }
@@ -2273,16 +2368,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 +2389,41 @@ var Input = forwardRef2(
                 styles.input,
                 styles[size],
                 inputStyle,
-                leftIcon && styles.inputWithLeftIcon,
-                isFocused && !disabled && styles.focused,
+                leftAdornment && 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, children: "\xD7" })
+            }
+          ) : showRightIcon && rightAdornment && /* @__PURE__ */ jsx25(
+            View20,
+            {
+              pointerEvents: "none",
+              style: styles.rightAdornment,
+              accessibilityElementsHidden: true,
+              importantForAccessibility: "no",
+              children: cloneElement5(rightAdornment, {
+                color: rightIconColor,
+                size: resolvedIconSize
+              })
+            }
           )
         ] })
       }

package/package.json

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