@vellira-ui/react-native 2.22.0 → 2.22.1

package/dist/index.js

@@ -1884,23 +1884,26 @@ var createStyles21 = (theme) => StyleSheet21.create({
 });
 
 // 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
   }
@@ -1913,6 +1916,10 @@ function Button({
   loading = false,
   loadingText,
   onPress,
+  onFocus,
+  onBlur,
+  onHoverIn,
+  onHoverOut,
   size = "md",
   leftIcon,
   rightIcon,
@@ -1922,13 +1929,13 @@ 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;
@@ -1938,66 +1945,84 @@ function Button({
     !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) => {
-    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);
   };
-  return /* @__PURE__ */ jsxs13(
+  const handleHoverOut = (event) => {
+    setIsHovered(false);
+    onHoverOut?.(event);
+  };
+  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),
-      onBlur: () => setIsFocused(false),
-      onFocus: () => setIsFocused(true),
-      onHoverIn: () => setIsHovered(true),
-      onHoverOut: () => setIsHovered(false),
-      onPressIn: () => setIsPressed(true),
-      onPressOut: () => setIsPressed(false),
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      onHoverIn: handleHoverIn,
+      onHoverOut: handleHoverOut,
       style: ({ pressed }) => {
-        const pressedTheme = !isDisabled && pressed ? variantTheme.pressed : !isDisabled && isHovered ? variantTheme.hover : 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)
+        ] });
+      }
     }
   );
 }
@@ -2157,7 +2182,7 @@ var createStyles23 = (theme) => StyleSheet23.create({
   inputWithRightAdornment: {
     paddingRight: theme.tokens.spacing[5] + 20
   },
-  rightAdornment: {
+  rightIcon: {
     position: "absolute",
     right: theme.tokens.spacing[4],
     top: "50%",
@@ -2168,7 +2193,7 @@ var createStyles23 = (theme) => StyleSheet23.create({
     alignItems: "center",
     justifyContent: "center"
   },
-  leftAdornment: {
+  leftIcon: {
     position: "absolute",
     left: theme.tokens.spacing[4],
     top: "50%",
@@ -2270,6 +2295,7 @@ var autoCorrectByInputType = {
 var Input = forwardRef2(
   ({
     label,
+    description,
     value,
     defaultValue,
     onChange,
@@ -2280,11 +2306,12 @@ var Input = forwardRef2(
     required = false,
     readOnly = false,
     type = "text",
-    leftAdornment,
-    rightAdornment,
-    leftAdornmentTone = "default",
-    rightAdornmentTone = "default",
+    leftIcon,
+    rightIcon,
+    leftIconTone = "default",
+    rightIconTone = "default",
     clearIcon,
+    clearIconTone = "danger",
     iconSize,
     containerStyle,
     inputStyle,
@@ -2337,27 +2364,28 @@ var Input = forwardRef2(
       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;
+    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,
         style: containerStyle,
         children: /* @__PURE__ */ jsxs15(View20, { style: styles.inputWrapper, children: [
-          leftAdornment && /* @__PURE__ */ jsx25(
+          leftIcon && /* @__PURE__ */ jsx25(
             View20,
             {
               pointerEvents: "none",
-              style: styles.leftAdornment,
+              style: styles.leftIcon,
               accessibilityElementsHidden: true,
               importantForAccessibility: "no",
-              children: cloneElement5(leftAdornment, {
+              children: cloneElement5(leftIcon, {
                 color: leftIconColor,
                 size: resolvedIconSize
               })
@@ -2389,7 +2417,7 @@ var Input = forwardRef2(
                 styles.input,
                 styles[size],
                 inputStyle,
-                leftAdornment && styles.inputWithLeftAdornment,
+                leftIcon && styles.inputWithLeftAdornment,
                 (showRightIcon || showClearButton) && styles.inputWithRightAdornment,
                 isFocused && !disabled && !readOnly && styles.focused,
                 error && styles.error,
@@ -2410,16 +2438,22 @@ var Input = forwardRef2(
               children: clearIcon ? cloneElement5(clearIcon, {
                 color: clearIconColor,
                 size: resolvedIconSize
-              }) : /* @__PURE__ */ jsx25(Text14, { style: styles.clearButtonText, children: "\xD7" })
+              }) : /* @__PURE__ */ jsx25(
+                Text14,
+                {
+                  style: [styles.clearButtonText, { color: clearIconColor }],
+                  children: "\xD7"
+                }
+              )
             }
-          ) : showRightIcon && rightAdornment && /* @__PURE__ */ jsx25(
+          ) : showRightIcon && rightIcon && /* @__PURE__ */ jsx25(
             View20,
             {
               pointerEvents: "none",
-              style: styles.rightAdornment,
+              style: styles.rightIcon,
               accessibilityElementsHidden: true,
               importantForAccessibility: "no",
-              children: cloneElement5(rightAdornment, {
+              children: cloneElement5(rightIcon, {
                 color: rightIconColor,
                 size: resolvedIconSize
               })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vellira-ui/react-native",
-  "version": "2.22.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.22.0",
-    "@vellira-ui/icons": "2.22.0",
-    "@vellira-ui/types": "2.22.0",
-    "@vellira-ui/tokens": "2.22.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",