@vellira-ui/react-native 2.29.0 → 2.30.0

package/README.md

@@ -47,7 +47,7 @@ export function Example() {
 
   return (
     <View style={{ gap: 16 }}>
-      <Input label='Email' value={email} onChange={setEmail} />
+      <Input label='Email' value={email} onValueChange={setEmail} />
       <Checkbox
         label='Accept terms'
         description='Required to create an account.'

package/dist/index.js

@@ -944,6 +944,7 @@ import { useControllableState as useControllableState2 } from "@vellira-ui/core"
 import { View as View11 } from "react-native";
 
 // src/patterns/FormField/FormField.tsx
+import { useId } from "react";
 import { Text as Text6, View as View10 } from "react-native";
 
 // src/patterns/FormField/FormField.styles.ts
@@ -954,14 +955,14 @@ var createStyles12 = (theme) => StyleSheet12.create({
     width: "100%",
     minWidth: 0,
     alignSelf: "stretch",
-    gap: theme.tokens.spacing[2]
+    gap: theme.components.formField.size.md.gap
   },
   label: {
     color: theme.components.formField.label.fg,
     fontFamily: theme.tokens.typography.family.medium,
-    fontSize: theme.tokens.typography.size.md,
+    fontSize: theme.components.formField.size.md.labelFontSize,
     fontWeight: fontWeight(theme.tokens.typography.weight.medium),
-    lineHeight: theme.tokens.typography.lineHeight.md
+    lineHeight: theme.components.formField.size.md.labelLineHeight
   },
   labelDisabled: {
     color: theme.components.formField.disabled.labelFg
@@ -970,11 +971,25 @@ var createStyles12 = (theme) => StyleSheet12.create({
     marginLeft: theme.tokens.spacing[1],
     color: theme.components.formField.requiredMark.fg
   },
+  optional: {
+    marginLeft: theme.components.formField.size.md.gap,
+    color: theme.components.formField.optional.fg,
+    fontFamily: theme.tokens.typography.family.regular,
+    fontSize: theme.components.formField.size.md.optionalFontSize,
+    lineHeight: theme.components.formField.size.md.optionalLineHeight
+  },
+  labelInfo: {
+    marginLeft: theme.components.formField.size.md.gap,
+    color: theme.components.formField.labelInfo.fg,
+    fontFamily: theme.tokens.typography.family.medium,
+    fontSize: theme.components.formField.size.md.labelInfoFontSize,
+    lineHeight: theme.components.formField.size.md.labelInfoSize
+  },
   description: {
     color: theme.components.formField.description.fg,
     fontFamily: theme.tokens.typography.family.regular,
-    fontSize: theme.tokens.typography.size.sm,
-    lineHeight: theme.tokens.typography.lineHeight.sm
+    fontSize: theme.components.formField.size.md.descriptionFontSize,
+    lineHeight: theme.components.formField.size.md.descriptionLineHeight
   },
   descriptionDisabled: {
     color: theme.components.formField.disabled.descriptionFg
@@ -992,22 +1007,32 @@ var createStyles12 = (theme) => StyleSheet12.create({
   error: {
     color: theme.components.formField.helperText.error.fg,
     fontFamily: theme.tokens.typography.family.regular,
-    fontSize: theme.tokens.typography.size.sm,
-    lineHeight: theme.tokens.typography.lineHeight.sm
+    fontSize: theme.components.formField.size.md.helperTextFontSize,
+    lineHeight: theme.components.formField.size.md.helperTextLineHeight
   },
   helperTextDisabled: {
     color: theme.components.formField.disabled.helperTextFg
   }
 });
 
+// src/patterns/FormField/FormFieldContext.ts
+import { createContext as createContext3, useContext as useContext3 } from "react";
+var FormFieldContext = createContext3(null);
+var useFormFieldContext = () => useContext3(FormFieldContext);
+
 // src/patterns/FormField/FormField.tsx
 import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
 function FormField({
+  id,
   label,
   description,
   error,
   required = false,
   disabled = false,
+  invalid = false,
+  size = "md",
+  labelInfo,
+  optionalText,
   children,
   style,
   controlStyle,
@@ -1016,18 +1041,46 @@ function FormField({
   errorStyle,
   ...rest
 }) {
+  const { theme } = useTheme();
   const styles = useThemeStyles(createStyles12);
+  const sizeTokens = theme.components.formField.size[size];
+  const generatedId = useId();
+  const controlId = id ?? generatedId;
+  const labelId = label ? `${controlId}-label` : void 0;
+  const descriptionId = description ? `${controlId}-description` : void 0;
+  const errorId = error ? `${controlId}-error` : void 0;
+  const isInvalid = invalid || Boolean(error);
+  const contextValue = {
+    controlId,
+    labelId,
+    descriptionId,
+    errorId,
+    required,
+    disabled,
+    invalid: isInvalid,
+    size,
+    ariaLabelledBy: labelId,
+    ariaDescribedBy: [descriptionId, errorId].filter(Boolean).join(" ") || void 0
+  };
   return /* @__PURE__ */ jsxs7(
     View10,
     {
       ...rest,
       accessibilityState: disabled ? { disabled: true } : void 0,
-      style: [styles.root, style],
+      style: [styles.root, { gap: sizeTokens.gap }, style],
       children: [
         label && (typeof label === "string" || typeof label === "number" ? /* @__PURE__ */ jsxs7(
           Text6,
           {
-            style: [styles.label, disabled && styles.labelDisabled, labelStyle],
+            style: [
+              styles.label,
+              {
+                fontSize: sizeTokens.labelFontSize,
+                lineHeight: sizeTokens.labelLineHeight
+              },
+              disabled && styles.labelDisabled,
+              labelStyle
+            ],
             children: [
               label,
               required && /* @__PURE__ */ jsx14(
@@ -1038,6 +1091,32 @@ function FormField({
                   importantForAccessibility: "no",
                   children: " *"
                 }
+              ),
+              !required && optionalText && /* @__PURE__ */ jsx14(
+                Text6,
+                {
+                  style: [
+                    styles.optional,
+                    {
+                      fontSize: sizeTokens.optionalFontSize,
+                      lineHeight: sizeTokens.optionalLineHeight
+                    }
+                  ],
+                  children: optionalText
+                }
+              ),
+              labelInfo && /* @__PURE__ */ jsx14(
+                Text6,
+                {
+                  style: [
+                    styles.labelInfo,
+                    {
+                      fontSize: sizeTokens.labelInfoFontSize,
+                      lineHeight: sizeTokens.labelInfoSize
+                    }
+                  ],
+                  children: labelInfo
+                }
               )
             ]
           }
@@ -1051,26 +1130,36 @@ function FormField({
               importantForAccessibility: "no",
               children: "*"
             }
-          )
+          ),
+          !required && optionalText,
+          labelInfo
         ] })),
         description && (typeof description === "string" || typeof description === "number" ? /* @__PURE__ */ jsx14(
           Text6,
           {
             style: [
               styles.description,
+              {
+                fontSize: sizeTokens.descriptionFontSize,
+                lineHeight: sizeTokens.descriptionLineHeight
+              },
               disabled && styles.descriptionDisabled,
               descriptionStyle
             ],
             children: description
           }
         ) : description),
-        /* @__PURE__ */ jsx14(View10, { style: [styles.control, controlStyle], children }),
+        /* @__PURE__ */ jsx14(FormFieldContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx14(View10, { style: [styles.control, { gap: sizeTokens.gap }, controlStyle], children }) }),
         error && (typeof error === "string" || typeof error === "number" ? /* @__PURE__ */ jsx14(
           Text6,
           {
             accessibilityLiveRegion: "polite",
             style: [
               styles.error,
+              {
+                fontSize: sizeTokens.helperTextFontSize,
+                lineHeight: sizeTokens.helperTextLineHeight
+              },
               disabled && styles.helperTextDisabled,
               errorStyle
             ],
@@ -1101,11 +1190,11 @@ var createStyles13 = (theme) => StyleSheet13.create({
 });
 
 // src/components/RadioGroup/RadioGroupContext.tsx
-import { createContext as createContext3, useContext as useContext3 } from "react";
-var RadioGroupContext = createContext3(null);
+import { createContext as createContext4, useContext as useContext4 } from "react";
+var RadioGroupContext = createContext4(null);
 var RadioGroupProvider = RadioGroupContext.Provider;
 function useRadioGroupContext() {
-  return useContext3(RadioGroupContext);
+  return useContext4(RadioGroupContext);
 }
 
 // src/components/RadioGroup/RadioGroup.tsx
@@ -1642,11 +1731,11 @@ Select.displayName = "Select";
 import { View as View14 } from "react-native";
 
 // src/components/Tabs/TabsContext.tsx
-import { createContext as createContext4, useContext as useContext4 } from "react";
-var TabsContext = createContext4(null);
+import { createContext as createContext5, useContext as useContext5 } from "react";
+var TabsContext = createContext5(null);
 var TabsProvider = TabsContext.Provider;
 var useTabs = () => {
-  const context = useContext4(TabsContext);
+  const context = useContext5(TabsContext);
   if (!context) {
     throw new Error("Tabs components must be used inside <Tabs>.");
   }
@@ -2805,7 +2894,6 @@ import { Pressable as Pressable12, Text as Text13, TextInput, View as View21 } f
 
 // src/primitives/Input/Input.styles.ts
 import { StyleSheet as StyleSheet23 } from "react-native";
-var getPlaceholderTextColor = (theme) => theme.components.input.default.placeholder;
 var getDisabledPlaceholderTextColor = (theme) => theme.components.input.disabled.placeholder;
 var resolveRingColor = (ring) => typeof ring === "string" ? ring : ring.color;
 var createStyles23 = (theme) => StyleSheet23.create({
@@ -2867,6 +2955,24 @@ var createStyles23 = (theme) => StyleSheet23.create({
     alignItems: "center",
     justifyContent: "center"
   },
+  revealButton: {
+    position: "absolute",
+    right: theme.tokens.spacing[3],
+    top: "50%",
+    zIndex: 1,
+    minWidth: 40,
+    height: 28,
+    marginTop: -14,
+    borderRadius: theme.tokens.radius.sm,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  revealButtonText: {
+    color: theme.components.input.icon.muted,
+    fontFamily: theme.tokens.typography.family.medium,
+    fontSize: theme.tokens.typography.size.xs,
+    lineHeight: theme.tokens.typography.lineHeight.xs
+  },
   clearButtonText: {
     color: theme.components.input.clearButton.fg,
     fontSize: 16,
@@ -2920,20 +3026,6 @@ var createStyles23 = (theme) => StyleSheet23.create({
     shadowRadius: 6,
     elevation: 1
   },
-  success: {
-    borderColor: theme.components.input.success.border
-  },
-  successFocused: {
-    borderColor: theme.components.input.success.border,
-    shadowColor: resolveRingColor(theme.components.input.success.ring),
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.18,
-    shadowRadius: 6,
-    elevation: 1
-  },
   readOnly: {
     color: theme.components.input.readOnly.fg,
     borderColor: theme.components.input.readOnly.border,
@@ -2976,24 +3068,48 @@ var autoCorrectByInputType = {
   url: false,
   search: false
 };
+var applyPatternMask = (value, pattern) => {
+  const digits = value.replace(/\D/g, "");
+  let digitIndex = 0;
+  let maskedValue = "";
+  for (const character of pattern) {
+    if (character === "#") {
+      const nextDigit = digits[digitIndex];
+      if (!nextDigit) break;
+      maskedValue += nextDigit;
+      digitIndex += 1;
+      continue;
+    }
+    if (digitIndex < digits.length) {
+      maskedValue += character;
+    }
+  }
+  return maskedValue;
+};
+var applyMask = (value, mask) => {
+  if (!mask) return value;
+  return typeof mask === "function" ? mask(value) : applyPatternMask(value, mask);
+};
 var Input = forwardRef3(
   ({
     label,
     description,
     value,
     defaultValue,
-    onChange,
+    onValueChange,
     placeholder,
-    size = "md",
+    size,
     error,
+    invalid = false,
     disabled = false,
     required = false,
+    loading = false,
     readOnly = false,
     type = "text",
-    leftIcon,
-    rightIcon,
-    leftIconTone = "default",
-    rightIconTone = "default",
+    startIcon,
+    endIcon,
+    startIconTone = "default",
+    endIconTone = "default",
     clearIcon,
     clearIconTone = "danger",
     iconSize,
@@ -3012,19 +3128,38 @@ var Input = forwardRef3(
     maxLength,
     clearable,
     onClear,
+    color = "primary",
+    variant = "outline",
+    revealPassword = false,
+    showCounter: _showCounter,
+    mask,
+    format,
+    parse,
     ...props
   }, ref) => {
     const { theme } = useTheme();
     const styles = useThemeStyles(createStyles23);
+    const field = useFormFieldContext();
+    const hasOwnField = Boolean(label || description || error);
     const [isFocused, setIsFocused] = useState6(false);
     const [uncontrolledValue, setUncontrolledValue] = useState6(
       defaultValue ?? ""
     );
     const isControlled = value !== void 0;
     const currentValue = isControlled ? value : uncontrolledValue;
+    const displayValue = format ? format(currentValue) : currentValue;
     const hasValue = currentValue !== "";
-    const placeholderTextColor = disabled ? getDisabledPlaceholderTextColor(theme) : readOnly ? theme.components.input.readOnly.placeholder : getPlaceholderTextColor(theme);
+    const resolvedSize = size ?? field?.size ?? "md";
+    const inputColorPalette = theme.components.input[color];
+    const inputPalette = inputColorPalette[variant];
+    const inputState = isFocused ? inputPalette.focus : inputPalette.default;
+    const isInvalid = invalid || Boolean(error) || !hasOwnField && Boolean(field?.invalid);
+    const isDisabled = disabled || !hasOwnField && Boolean(field?.disabled);
+    const isRequired = required || !hasOwnField && Boolean(field?.required);
+    const isReadOnly = readOnly || loading;
+    const placeholderTextColor = isDisabled ? getDisabledPlaceholderTextColor(theme) : readOnly ? theme.components.input.readOnly.placeholder : inputState.placeholder;
     const isPassword = type === "password";
+    const [isPasswordRevealed, setIsPasswordRevealed] = useState6(false);
     const resolvedIconSize = iconSize ?? 16;
     const handleFocus = (event) => {
       setIsFocused(true);
@@ -3035,114 +3170,148 @@ var Input = forwardRef3(
       onBlur?.(event);
     };
     const handleChangeText = (nextValue) => {
+      const parsedValue = parse ? parse(nextValue) : nextValue;
+      const maskedValue = applyMask(parsedValue, mask);
       if (!isControlled) {
-        setUncontrolledValue(nextValue);
+        setUncontrolledValue(maskedValue);
       }
-      onChange?.(nextValue);
+      onValueChange?.(maskedValue);
     };
     const handleClear = () => {
       if (!isControlled) {
         setUncontrolledValue("");
       }
+      onValueChange?.("");
       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];
+    const showClearButton = clearable && hasValue && !isDisabled && !isReadOnly;
+    const showRevealButton = revealPassword && isPassword && !isDisabled;
+    const showRightIcon = !showClearButton && !showRevealButton && Boolean(endIcon);
+    const startIconColor = isDisabled ? theme.components.input.disabled.icon : theme.components.input.icon[startIconTone];
+    const endIconColor = isDisabled ? theme.components.input.disabled.icon : theme.components.input.icon[endIconTone];
+    const clearIconColor = isDisabled ? theme.components.input.disabled.icon : theme.components.input.icon[clearIconTone];
+    const control = /* @__PURE__ */ jsxs14(View21, { style: styles.inputWrapper, children: [
+      startIcon && /* @__PURE__ */ jsx25(
+        View21,
+        {
+          pointerEvents: "none",
+          style: styles.leftIcon,
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no",
+          children: cloneElement6(startIcon, {
+            color: startIconColor,
+            size: resolvedIconSize
+          })
+        }
+      ),
+      /* @__PURE__ */ jsx25(
+        TextInput,
+        {
+          ...props,
+          ref,
+          nativeID: props.nativeID ?? (!hasOwnField ? field?.controlId : void 0),
+          value: displayValue,
+          onChangeText: handleChangeText,
+          editable: !isDisabled && !isReadOnly,
+          placeholder,
+          keyboardType: keyboardType ?? keyboardTypeByInputType[type],
+          secureTextEntry: secureTextEntry ?? (isPassword && !isPasswordRevealed),
+          autoCapitalize: autoCapitalize ?? autoCapitalizeByInputType[type],
+          autoCorrect: autoCorrect ?? autoCorrectByInputType[type],
+          onBlur: handleBlur,
+          onFocus: handleFocus,
+          autoFocus,
+          maxLength,
+          testID,
+          placeholderTextColor,
+          accessibilityLabel: accessibilityLabel ?? label,
+          accessibilityHint,
+          accessibilityState: { disabled: isDisabled },
+          accessibilityLabelledBy: !hasOwnField ? field?.labelId : void 0,
+          "aria-describedby": !hasOwnField ? field?.ariaDescribedBy : void 0,
+          style: [
+            styles.input,
+            {
+              color: inputState.fg,
+              backgroundColor: inputState.bg,
+              borderColor: inputState.border
+            },
+            styles[resolvedSize],
+            inputStyle,
+            startIcon && styles.inputWithLeftAdornment,
+            (showRightIcon || showClearButton || showRevealButton) && styles.inputWithRightAdornment,
+            isFocused && !isDisabled && !isReadOnly && {
+              color: inputPalette.focus.fg,
+              backgroundColor: inputPalette.focus.bg,
+              borderColor: inputPalette.focus.border,
+              shadowColor: inputColorPalette.ring,
+              shadowOffset: {
+                width: 0,
+                height: 0
+              },
+              shadowOpacity: 0.18,
+              shadowRadius: 6,
+              elevation: 1
+            },
+            isInvalid && styles.error,
+            isFocused && isInvalid && !isDisabled && !isReadOnly && styles.errorFocused,
+            isReadOnly && !isDisabled && styles.readOnly,
+            isDisabled && styles.disabled
+          ]
+        }
+      ),
+      showClearButton ? /* @__PURE__ */ jsx25(
+        Pressable12,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: "Clear input",
+          hitSlop: 8,
+          onPress: handleClear,
+          style: styles.clearButton,
+          children: clearIcon ? cloneElement6(clearIcon, {
+            color: clearIconColor,
+            size: resolvedIconSize
+          }) : /* @__PURE__ */ jsx25(Text13, { style: [styles.clearButtonText, { color: clearIconColor }], children: "\xD7" })
+        }
+      ) : showRevealButton ? /* @__PURE__ */ jsx25(
+        Pressable12,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: isPasswordRevealed ? "Hide password" : "Show password",
+          hitSlop: 8,
+          onPress: () => setIsPasswordRevealed((revealed) => !revealed),
+          style: styles.revealButton,
+          children: /* @__PURE__ */ jsx25(Text13, { style: styles.revealButtonText, children: isPasswordRevealed ? "Hide" : "Show" })
+        }
+      ) : showRightIcon && endIcon && /* @__PURE__ */ jsx25(
+        View21,
+        {
+          pointerEvents: "none",
+          style: styles.rightIcon,
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no",
+          children: cloneElement6(endIcon, {
+            color: endIconColor,
+            size: resolvedIconSize
+          })
+        }
+      )
+    ] });
+    if (!hasOwnField && field) {
+      return control;
+    }
     return /* @__PURE__ */ jsx25(
       FormField,
       {
         label,
         description,
         error,
-        required,
-        disabled,
+        required: isRequired,
+        disabled: isDisabled,
+        invalid: isInvalid,
+        size: resolvedSize,
         style: containerStyle,
-        children: /* @__PURE__ */ jsxs14(View21, { style: styles.inputWrapper, children: [
-          leftIcon && /* @__PURE__ */ jsx25(
-            View21,
-            {
-              pointerEvents: "none",
-              style: styles.leftIcon,
-              accessibilityElementsHidden: true,
-              importantForAccessibility: "no",
-              children: cloneElement6(leftIcon, {
-                color: leftIconColor,
-                size: resolvedIconSize
-              })
-            }
-          ),
-          /* @__PURE__ */ jsx25(
-            TextInput,
-            {
-              ...props,
-              ref,
-              value: currentValue,
-              onChangeText: handleChangeText,
-              editable: !disabled && !readOnly,
-              placeholder,
-              keyboardType: keyboardType ?? keyboardTypeByInputType[type],
-              secureTextEntry: secureTextEntry ?? isPassword,
-              autoCapitalize: autoCapitalize ?? autoCapitalizeByInputType[type],
-              autoCorrect: autoCorrect ?? autoCorrectByInputType[type],
-              onBlur: handleBlur,
-              onFocus: handleFocus,
-              autoFocus,
-              maxLength,
-              testID,
-              placeholderTextColor,
-              accessibilityLabel: accessibilityLabel ?? label,
-              accessibilityHint,
-              accessibilityState: { disabled },
-              style: [
-                styles.input,
-                styles[size],
-                inputStyle,
-                leftIcon && styles.inputWithLeftAdornment,
-                (showRightIcon || showClearButton) && styles.inputWithRightAdornment,
-                isFocused && !disabled && !readOnly && styles.focused,
-                error && styles.error,
-                isFocused && error && !disabled && !readOnly && styles.errorFocused,
-                readOnly && !disabled && styles.readOnly,
-                disabled && styles.disabled
-              ]
-            }
-          ),
-          showClearButton ? /* @__PURE__ */ jsx25(
-            Pressable12,
-            {
-              accessibilityRole: "button",
-              accessibilityLabel: "Clear input",
-              hitSlop: 8,
-              onPress: handleClear,
-              style: styles.clearButton,
-              children: clearIcon ? cloneElement6(clearIcon, {
-                color: clearIconColor,
-                size: resolvedIconSize
-              }) : /* @__PURE__ */ jsx25(
-                Text13,
-                {
-                  style: [styles.clearButtonText, { color: clearIconColor }],
-                  children: "\xD7"
-                }
-              )
-            }
-          ) : showRightIcon && rightIcon && /* @__PURE__ */ jsx25(
-            View21,
-            {
-              pointerEvents: "none",
-              style: styles.rightIcon,
-              accessibilityElementsHidden: true,
-              importantForAccessibility: "no",
-              children: cloneElement6(rightIcon, {
-                color: rightIconColor,
-                size: resolvedIconSize
-              })
-            }
-          )
-        ] })
+        children: control
       }
     );
   }

package/package.json

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