@atlure/ui 0.12.3 → 0.12.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlure/ui",
-  "version": "0.12.3",
+  "version": "0.12.5",
   "description": "Atlure React Native component library: NativeWind primitives built on @atlure/tokens, shipped as untranspiled TypeScript source",
   "license": "MIT",
   "author": "David Moreira",
@@ -37,9 +37,9 @@
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "tailwind-merge": "2.6.0",
-    "@atlure/icons": "0.12.3",
-    "@atlure/tokens": "0.12.3",
-    "@atlure/types": "0.12.3"
+    "@atlure/icons": "0.12.5",
+    "@atlure/tokens": "0.12.5",
+    "@atlure/types": "0.12.5"
   },
   "peerDependencies": {
     "nativewind": "^4.2.6",

package/src/components/input/input.tsx

@@ -4,8 +4,8 @@ import { Platform, TextInput, type TextInputProps, View } from "react-native";
 import { cn } from "../../lib/cn";
 import { touchTargetHitSlop } from "../../lib/touch-target";
 import {
-  inputFieldWrapperClassName,
   inputIconSlotVariants,
+  inputTextClassName,
   inputVariants,
   type InputVariantProps,
 } from "../../variants/input-variants";
@@ -22,24 +22,22 @@ export interface InputProps extends Omit<TextInputProps, "editable" | "multiline
   ref?: Ref<ComponentRef<typeof TextInput>>;
 }
 
-const CONTROL_HEIGHT_PX: Record<NonNullable<InputVariantProps["size"]>, number> = {
-  sm: 36,
-  md: 40,
-  lg: 48,
-};
-
-function singleLineVerticalFix(
-  size: NonNullable<InputVariantProps["size"]>,
-): { paddingTop: 0; paddingBottom: 0; lineHeight: number; includeFontPadding?: false } {
-  const base = {
-    paddingTop: 0 as const,
-    paddingBottom: 0 as const,
-    lineHeight: CONTROL_HEIGHT_PX[size],
-  };
-  return Platform.OS === "android"
-    ? { ...base, includeFontPadding: false as const }
-    : base;
-}
+// `text-base` in the tailwind preset expands to `{ fontSize: 16, lineHeight:
+// 24 }`. On Android that 24px line box is centered inside the fixed control
+// height via gravity, but the visible glyph is drawn at the baseline INSIDE
+// that line box, which biases it below the geometric middle of the input.
+// Tighten the line height to just above the glyph height (fontSize × 1.15,
+// enough room for descenders) so the line box is roughly equal to the glyph
+// itself and the center of the line box IS the visible center of the text.
+const TEXT_INPUT_RESET =
+  Platform.OS === "android"
+    ? {
+        paddingTop: 0,
+        paddingBottom: 0,
+        includeFontPadding: false as const,
+        lineHeight: 18,
+      }
+    : { paddingTop: 0, paddingBottom: 0, lineHeight: 18 };
 
 export function Input({
   size = "md",
@@ -59,22 +57,8 @@ export function Input({
   const isControlInvalid = isInvalid ?? field?.isInvalid ?? false;
   const isControlRequired = isRequired ?? field?.isRequired ?? false;
 
-  const verticalFix = isMultiline ? null : singleLineVerticalFix(size);
-
-  const control = (
-    <TextInput
-      accessibilityState={{ disabled: isControlDisabled }}
-      accessibilityLabelledBy={field?.labelledBy}
-      aria-labelledby={field?.labelledBy}
-      aria-describedby={field?.describedBy}
-      aria-disabled={isControlDisabled}
-      aria-invalid={isControlInvalid}
-      aria-required={isControlRequired}
-      nativeID={nativeID ?? field?.nativeID}
-      editable={!isControlDisabled}
-      multiline={isMultiline}
-      textAlignVertical={isMultiline ? "top" : "center"}
-      hitSlop={touchTargetHitSlop(size)}
+  return (
+    <View
       className={cn(
         inputVariants({
           size,
@@ -86,21 +70,27 @@ export function Input({
         }),
         className,
       )}
-      style={verticalFix ? [verticalFix, style] : style}
-      {...textInputProps}
-    />
-  );
-
-  if (!leadingIcon && !trailingIcon) {
-    return control;
-  }
-
-  return (
-    <View className={inputFieldWrapperClassName}>
+    >
       {leadingIcon ? (
         <View className={inputIconSlotVariants({ slot: "leading" })}>{leadingIcon}</View>
       ) : null}
-      {control}
+      <TextInput
+        accessibilityState={{ disabled: isControlDisabled }}
+        accessibilityLabelledBy={field?.labelledBy}
+        aria-labelledby={field?.labelledBy}
+        aria-describedby={field?.describedBy}
+        aria-disabled={isControlDisabled}
+        aria-invalid={isControlInvalid}
+        aria-required={isControlRequired}
+        nativeID={nativeID ?? field?.nativeID}
+        editable={!isControlDisabled}
+        multiline={isMultiline}
+        textAlignVertical={isMultiline ? "top" : "center"}
+        hitSlop={touchTargetHitSlop(size)}
+        className={inputTextClassName}
+        style={[TEXT_INPUT_RESET, style]}
+        {...textInputProps}
+      />
       {trailingIcon ? (
         <View className={inputIconSlotVariants({ slot: "trailing" })}>{trailingIcon}</View>
       ) : null}

package/src/variants/input-variants.ts

@@ -1,7 +1,7 @@
 import { cva, type VariantProps } from "class-variance-authority";
 
 export const inputVariants = cva(
-  "w-full rounded-md border bg-input-background px-md text-base text-foreground placeholder:text-muted-foreground",
+  "w-full flex-row items-center rounded-md border bg-input-background px-md",
   {
     variants: {
       size: {
@@ -18,7 +18,7 @@ export const inputVariants = cva(
         false: "",
       },
       isMultiline: {
-        true: "h-auto min-h-control-lg py-sm",
+        true: "h-auto min-h-control-lg py-sm items-start",
         false: "",
       },
       hasLeadingIcon: {
@@ -41,6 +41,9 @@ export const inputVariants = cva(
   },
 );
 
+export const inputTextClassName =
+  "flex-1 text-base text-foreground placeholder:text-muted-foreground";
+
 export const inputIconSlotVariants = cva("absolute inset-y-0 justify-center", {
   variants: {
     slot: {