@vellira-ui/react-native 2.22.4 → 2.23.0

package/README.md

@@ -42,11 +42,17 @@ import { View } from 'react-native';
 
 export function Example() {
   const [email, setEmail] = useState('');
+  const [accepted, setAccepted] = useState(false);
 
   return (
     <View style={{ gap: 16 }}>
       <Input label='Email' value={email} onChange={setEmail} />
-      <Checkbox label='Accept terms' />
+      <Checkbox
+        label='Accept terms'
+        description='Required to create an account.'
+        checked={accepted}
+        onCheckedChange={setAccepted}
+      />
       <Button color='primary' variant='solid'>
         Continue
       </Button>
@@ -69,6 +75,12 @@ 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`.
 
+### Checkbox Notes
+
+Use `description` for settings-style helper text when the checkbox is not
+wrapped in `FormField`. For checkbox rows without a visible label, provide
+`accessibilityLabel`.
+
 ## Testing
 
 Run only native tests:

package/dist/index.js

@@ -2036,23 +2036,45 @@ import { Pressable as Pressable12, Text as Text13, View as View19 } from "react-
 // src/primitives/Checkbox/Checkbox.styles.ts
 import { StyleSheet as StyleSheet22 } from "react-native";
 var createStyles22 = (theme) => StyleSheet22.create({
+  container: {
+    gap: theme.tokens.spacing[2]
+  },
   wrapper: {
     flexDirection: "row",
     alignItems: "center",
     gap: theme.tokens.spacing[3]
   },
+  iconOnly: {
+    justifyContent: "center",
+    minWidth: 44,
+    minHeight: 44
+  },
   disabled: {
     opacity: 1
   },
   box: {
-    width: 22,
-    height: 22,
-    borderWidth: 2,
-    borderColor: theme.components.checkbox.default.border,
-    borderRadius: theme.tokens.radius.md,
+    flexShrink: 0,
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: theme.components.checkbox.default.bg
+    backgroundColor: theme.components.checkbox.default.bg,
+    borderWidth: 2,
+    borderColor: theme.components.checkbox.default.border,
+    borderRadius: theme.tokens.radius.xs
+  },
+  boxSm: {
+    width: 16,
+    height: 16,
+    borderWidth: 1
+  },
+  boxMd: {
+    width: 20,
+    height: 20,
+    borderWidth: 2
+  },
+  boxLg: {
+    width: 24,
+    height: 24,
+    borderWidth: 2
   },
   boxChecked: {
     backgroundColor: theme.components.checkbox.checked.default.bg,
@@ -2065,40 +2087,102 @@ var createStyles22 = (theme) => StyleSheet22.create({
   boxError: {
     borderColor: theme.components.checkbox.error.border
   },
+  indeterminateMark: {
+    width: "60%",
+    height: 2,
+    backgroundColor: theme.components.checkbox.checked.default.fg,
+    borderRadius: theme.tokens.radius.full
+  },
   label: {
+    flexShrink: 1,
     fontFamily: theme.tokens.typography.family.regular,
-    fontSize: theme.tokens.typography.size.md,
     color: theme.components.checkbox.default.fg
   },
+  labelSm: {
+    fontSize: theme.tokens.typography.size.sm,
+    lineHeight: theme.tokens.typography.lineHeight.sm
+  },
+  labelMd: {
+    fontSize: theme.tokens.typography.size.md,
+    lineHeight: theme.tokens.typography.lineHeight.md
+  },
+  labelLg: {
+    fontSize: theme.tokens.typography.size.lg,
+    lineHeight: theme.tokens.typography.lineHeight.lg
+  },
   labelDisabled: {
     color: theme.components.checkbox.disabled.fg
   },
-  container: {
-    gap: theme.tokens.spacing[2]
+  requiredMark: {
+    color: theme.components.checkbox.error.fg
+  },
+  descriptionText: {
+    color: theme.components.formField.description.fg,
+    fontFamily: theme.tokens.typography.family.regular,
+    fontSize: theme.tokens.typography.size.sm,
+    lineHeight: theme.tokens.typography.lineHeight.sm
+  },
+  descriptionTextDisabled: {
+    color: theme.components.formField.disabled.descriptionFg
   },
   errorText: {
     color: theme.components.checkbox.error.fg,
+    fontFamily: theme.tokens.typography.family.regular,
     fontSize: theme.tokens.typography.size.sm,
-    lineHeight: theme.tokens.typography.lineHeight.sm,
-    marginLeft: 22 + theme.tokens.spacing[3]
+    lineHeight: theme.tokens.typography.lineHeight.sm
+  },
+  errorTextSm: {
+    marginLeft: 16 + theme.tokens.spacing[3]
+  },
+  errorTextMd: {
+    marginLeft: 20 + theme.tokens.spacing[3]
+  },
+  errorTextLg: {
+    marginLeft: 24 + theme.tokens.spacing[3]
   }
 });
 
 // src/primitives/Checkbox/Checkbox.tsx
 import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
+var iconSizeBySize = {
+  sm: 10,
+  md: 12,
+  lg: 14
+};
 var Checkbox = forwardRef(
   ({
     label,
+    description,
     checked,
     defaultChecked = false,
     disabled = false,
+    required = false,
+    indeterminate = false,
+    size = "md",
     onCheckedChange,
     error,
     style,
-    ...props
+    accessibilityLabel,
+    accessibilityHint,
+    ...PressableProps
   }, ref) => {
     const { theme } = useTheme();
     const styles = useThemeStyles(createStyles22);
+    const boxSizeStyle = {
+      sm: styles.boxSm,
+      md: styles.boxMd,
+      lg: styles.boxLg
+    };
+    const labelSizeStyle = {
+      sm: styles.labelSm,
+      md: styles.labelMd,
+      lg: styles.labelLg
+    };
+    const helperTextSizeStyle = {
+      sm: styles.errorTextSm,
+      md: styles.errorTextMd,
+      lg: styles.errorTextLg
+    };
     const hasError = Boolean(error);
     const [isChecked, setIsChecked] = useControllableState4({
       value: checked,
@@ -2107,43 +2191,80 @@ var Checkbox = forwardRef(
     });
     const handlePress = () => {
       if (disabled) return;
-      setIsChecked(!isChecked);
+      setIsChecked(indeterminate ? true : !isChecked);
     };
+    const resolvedAccessibilityLabel = accessibilityLabel ?? label;
+    const resolvedAccessibilityHint = [accessibilityHint, description, error].filter(Boolean).join(" ");
+    const accessibilityChecked = indeterminate ? "mixed" : isChecked;
     const checkColor = disabled ? theme.components.checkbox.disabled.fg : theme.components.checkbox.checked.default.fg;
+    devWarning(
+      Boolean(resolvedAccessibilityLabel),
+      "Checkbox: an accessible label must be provided through label or accessibilityLabel."
+    );
     return /* @__PURE__ */ jsxs14(View19, { style: styles.container, children: [
       /* @__PURE__ */ jsxs14(
         Pressable12,
         {
+          ...PressableProps,
           ref,
           onPress: handlePress,
           disabled,
           accessibilityRole: "checkbox",
           accessibilityState: {
-            checked: isChecked,
+            checked: accessibilityChecked,
             disabled
           },
-          accessibilityHint: hasError ? error : void 0,
-          accessibilityLabel: label ?? "Checkbox",
-          style: [styles.wrapper, disabled && styles.disabled, style],
-          ...props,
+          accessibilityHint: resolvedAccessibilityHint || void 0,
+          accessibilityLabel: resolvedAccessibilityLabel,
+          style: [
+            styles.wrapper,
+            !label && styles.iconOnly,
+            disabled && styles.disabled,
+            style
+          ],
           children: [
             /* @__PURE__ */ jsx24(
               View19,
               {
                 style: [
                   styles.box,
-                  isChecked && styles.boxChecked,
+                  boxSizeStyle[size],
+                  (isChecked || indeterminate) && styles.boxChecked,
                   hasError && styles.boxError,
                   disabled && styles.boxDisabled
                 ],
-                children: isChecked && /* @__PURE__ */ jsx24(Check, { size: 12, color: checkColor })
+                children: indeterminate ? /* @__PURE__ */ jsx24(View19, { style: styles.indeterminateMark }) : isChecked && /* @__PURE__ */ jsx24(Check, { size: iconSizeBySize[size], color: checkColor })
               }
             ),
-            label && /* @__PURE__ */ jsx24(Text13, { style: [styles.label, disabled && styles.labelDisabled], children: label })
+            label && /* @__PURE__ */ jsxs14(
+              Text13,
+              {
+                style: [
+                  styles.label,
+                  labelSizeStyle[size],
+                  disabled && styles.labelDisabled
+                ],
+                children: [
+                  label,
+                  required && /* @__PURE__ */ jsx24(Text13, { style: styles.requiredMark, children: " *" })
+                ]
+              }
+            )
           ]
         }
       ),
-      hasError && /* @__PURE__ */ jsx24(Text13, { style: styles.errorText, children: error })
+      description && /* @__PURE__ */ jsx24(
+        Text13,
+        {
+          style: [
+            styles.descriptionText,
+            helperTextSizeStyle[size],
+            disabled && styles.descriptionTextDisabled
+          ],
+          children: description
+        }
+      ),
+      hasError && /* @__PURE__ */ jsx24(Text13, { style: [styles.errorText, helperTextSizeStyle[size]], children: error })
     ] });
   }
 );
@@ -2360,7 +2481,6 @@ var Input = forwardRef2(
       if (!isControlled) {
         setUncontrolledValue("");
       }
-      onChange?.("");
       onClear?.();
     };
     const showClearButton = clearable && hasValue && !disabled && !readOnly;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vellira-ui/react-native",
-  "version": "2.22.4",
+  "version": "2.23.0",
   "description": "React Native components for Vellira Design System",
   "author": "Roman Bakurov",
   "license": "MIT",
@@ -49,12 +49,12 @@
   },
   "devDependencies": {
     "@types/react": "^19.2.3",
-    "@vitest/coverage-v8": "^4.1.9",
+    "@vitest/coverage-v8": "^4.1.10",
     "jsdom": "^28.1.0",
     "react": "19.2.7",
     "tsup": "^8.5.1",
     "typescript": "6.0.3",
-    "vitest": "^4.1.9"
+    "vitest": "^4.1.10"
   },
   "publishConfig": {
     "access": "public"