melta-app 0.2.1 → 0.2.3

package/README.md

@@ -193,11 +193,21 @@ npx expo install react-native-safe-area-context
 // アプリの entry（Screen の初回 render より前）で一度だけ
 import { enableSafeAreaContext } from "melta-app/safe-area";
 enableSafeAreaContext();
+
+// ボトムタブバー等が bottom inset を自前処理するアプリは edge を絞る
+// （全 edge のまま使うとタブ内 Screen の bottom が二重余白になる）
+enableSafeAreaContext({ edges: ["top"] });
 ```
 
-⚠️ react-native-safe-area-context の SafeAreaView は祖先に `SafeAreaProvider` が必要
-（React Navigation / Expo Router を使っていれば設置済みのことが多い。無い場合は root を
-`<SafeAreaProvider>` で包むこと — 無いと警告は消えるが inset が効かない）。
+⚠️ 前提と契約:
+
+- 祖先に `SafeAreaProvider` が**必須**（無いと `useSafeAreaInsets` が **throw する**。
+  React Navigation / Expo Router を使っていれば設置済みのことが多い）。初回 render から
+  正しい inset を使うには Provider に `initialMetrics` を渡す
+- adapter は `useSafeAreaInsets()` を render 中に同期参照して View padding に加算する方式
+  （native SafeAreaView の初回フレーム inset 未適用によるフラッシュを避けるため）
+- safe-area と合成する padding は**数値のみ**サポート（`"5%"` 等の非数値は基底として扱えず、
+  対象 edge は inset 値に置き換わる）。RTL / `paddingStart`・`paddingEnd` は対応済み
 
 ## ステータス
 

package/lib/module/components/TextField.js

@@ -15,11 +15,38 @@
  */
 
 import { useMemo, useState } from "react";
-import { TextInput, View, Text as RNText } from "react-native";
+import { Platform, TextInput, View, Text as RNText } from "react-native";
 import { useTheme } from "../theme/index.js";
 import { CONTRACTS } from "../contracts/contract-types.js";
 import { resolveTextFieldStyle, resolveTextFieldFocusStyle } from "./textfield.styles.js";
+
+/**
+ * Android の EditText は固定 height と組み合わさると既定の縦 padding で文字が
+ * 上寄り・下端切れになるため、縦 padding を殺して縦センターに揃える。
+ * textAlignVertical は Android 専用、paddingVertical: 0 は iOS の見た目を変えない
+ * （iOS の単一行入力は元々縦センター）。
+ * さらに Android では Noto CJK のフォントメトリクス由来で文字インクが
+ * 1dp 強下寄りになる（Pixel 実機ピクセル実測 +2.7px/density2.5。
+ * includeFontPadding: false は gravity center 下では無効なことも実測済み）ため、
+ * paddingBottom の光学ナッジで打ち消す（gravity center は残り高さの中央に置くので
+ * paddingBottom p で p/2 上がる）。
+ * recipe（styleRefs）の写像ではなく RN 実装の補正なので resolver には置かない。
+ */
+/* eslint-disable melta/no-raw-spacing -- spacing の選択ではなく EditText 既定 padding の打ち消しと CJK 光学ナッジ（実測由来の固定値） */
+/** OS 毎の補正値を返す純関数（jest は Platform=ios 固定のため、Android 分岐はこれを直接検証する）。 */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function resolveInputVerticalFix(os) {
+  return {
+    paddingVertical: 0,
+    ...(os === "android" ? {
+      paddingBottom: 2
+    } : null),
+    textAlignVertical: "center"
+  };
+}
+/* eslint-enable melta/no-raw-spacing */
+
+const INPUT_VERTICAL_FIX = resolveInputVerticalFix(Platform.OS);
 export function TextField({
   label,
   value,
@@ -68,7 +95,7 @@ export function TextField({
         if (!disabled) setFocused(true);
       },
       onBlur: () => setFocused(false),
-      style: [resolved.input, focused && !disabled ? focusStyle : null]
+      style: [resolved.input, INPUT_VERTICAL_FIX, focused && !disabled ? focusStyle : null]
     }), helperText != null && !showError && /*#__PURE__*/_jsx(RNText, {
       style: resolved.helperText,
       children: helperText

package/lib/module/components/TextField.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMemo","useState","TextInput","View","Text","RNText","useTheme","CONTRACTS","resolveTextFieldStyle","resolveTextFieldFocusStyle","jsx","_jsx","jsxs","_jsxs","TextField","label","value","onChangeText","placeholder","variant","disabled","size","helperText","errorText","style","testID","theme","mode","colors","focused","setFocused","effectiveVariant","resolved","focusStyle","showError","children","placeholderTextColor","editable","accessibilityLabel","accessibilityState","onFocus","onBlur","input","__contract","textfield"],"sourceRoot":"../../../src","sources":["components/TextField.tsx"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACzC,SACEC,SAAS,EACTC,IAAI,EACJC,IAAI,IAAIC,MAAM,QAGT,cAAc;AACrB,SAASC,QAAQ,QAAQ,mBAAU;AACnC,SAASC,SAAS,QAAQ,gCAA6B;AACvD,SACEC,qBAAqB,EACrBC,0BAA0B,QAErB,uBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAqB5B,OAAO,SAASC,SAASA,CAAC;EACxBC,KAAK;EACLC,KAAK;EACLC,YAAY;EACZC,WAAW;EACXC,OAAO,GAAG,SAAS;EACnBC,QAAQ,GAAG,KAAK;EAChBC,IAAI,GAAG,QAAQ;EACfC,UAAU;EACVC,SAAS;EACTC,KAAK;EACLC;AACc,CAAC,EAAE;EACjB,MAAM;IAAEC,KAAK;IAAEC,IAAI;IAAEC;EAAO,CAAC,GAAGtB,QAAQ,CAAC,CAAC;EAC1C,MAAM,CAACuB,OAAO,EAAEC,UAAU,CAAC,GAAG7B,QAAQ,CAAC,KAAK,CAAC;;EAE7C;EACA,MAAM8B,gBAAgB,GAAGX,QAAQ,GAAG,UAAU,GAAGD,OAAO;EACxD,MAAMa,QAAQ,GAAGhC,OAAO,CACtB,MAAMQ,qBAAqB,CAACkB,KAAK,EAAEC,IAAI,EAAE;IAAER,OAAO,EAAEY,gBAAgB;IAAEV;EAAK,CAAC,CAAC,EAC7E,CAACK,KAAK,EAAEC,IAAI,EAAEI,gBAAgB,EAAEV,IAAI,CACtC,CAAC;EACD,MAAMY,UAAU,GAAGjC,OAAO,CAAC,MAAMS,0BAA0B,CAACiB,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAE5E,MAAMQ,SAAS,GAAGH,gBAAgB,KAAK,OAAO,IAAIR,SAAS,IAAI,IAAI;EAEnE,oBACEV,KAAA,CAACV,IAAI;IAACqB,KAAK,EAAEA,KAAM;IAACC,MAAM,EAAEA,MAAO;IAAAU,QAAA,gBACjCxB,IAAA,CAACN,MAAM;MAACmB,KAAK,EAAEQ,QAAQ,CAACjB,KAAM;MAAAoB,QAAA,EAAEpB;IAAK,CAAS,CAAC,eAC/CJ,IAAA,CAACT,SAAS;MACRc,KAAK,EAAEA,KAAM;MACbC,YAAY,EAAEA,YAAa;MAC3BC,WAAW,EAAEA,WAAY;MACzBkB,oBAAoB,EAAER,MAAM,CAAC,YAAY,CAAE;MAC3CS,QAAQ,EAAE,CAACjB,QAAS;MACpBkB,kBAAkB,EAAEvB,KAAM;MAC1BwB,kBAAkB,EAAE;QAAEnB;MAAS,CAAE;MACjCoB,OAAO,EAAEA,CAAA,KAAM;QACb,IAAI,CAACpB,QAAQ,EAAEU,UAAU,CAAC,IAAI,CAAC;MACjC,CAAE;MACFW,MAAM,EAAEA,CAAA,KAAMX,UAAU,CAAC,KAAK,CAAE;MAChCN,KAAK,EAAE,CAACQ,QAAQ,CAACU,KAAK,EAAEb,OAAO,IAAI,CAACT,QAAQ,GAAGa,UAAU,GAAG,IAAI;IAAE,CACnE,CAAC,EACDX,UAAU,IAAI,IAAI,IAAI,CAACY,SAAS,iBAC/BvB,IAAA,CAACN,MAAM;MAACmB,KAAK,EAAEQ,QAAQ,CAACV,UAAW;MAAAa,QAAA,EAAEb;IAAU,CAAS,CACzD,EACAY,SAAS,iBAAIvB,IAAA,CAACN,MAAM;MAACmB,KAAK,EAAEQ,QAAQ,CAACT,SAAU;MAAAY,QAAA,EAAEZ;IAAS,CAAS,CAAC;EAAA,CACjE,CAAC;AAEX;;AAEA;AACAT,SAAS,CAAC6B,UAAU,GAAGpC,SAAS,CAACqC,SAAS","ignoreList":[]}
+{"version":3,"names":["useMemo","useState","Platform","TextInput","View","Text","RNText","useTheme","CONTRACTS","resolveTextFieldStyle","resolveTextFieldFocusStyle","jsx","_jsx","jsxs","_jsxs","resolveInputVerticalFix","os","paddingVertical","paddingBottom","textAlignVertical","INPUT_VERTICAL_FIX","OS","TextField","label","value","onChangeText","placeholder","variant","disabled","size","helperText","errorText","style","testID","theme","mode","colors","focused","setFocused","effectiveVariant","resolved","focusStyle","showError","children","placeholderTextColor","editable","accessibilityLabel","accessibilityState","onFocus","onBlur","input","__contract","textfield"],"sourceRoot":"../../../src","sources":["components/TextField.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/src/components/TextField.d.ts

@@ -11,8 +11,22 @@
  * - 色・寸法の決定は pure resolver（textfield.styles.ts）に分離。
  *   recipes/app/textfield.recipe.json との機械照合は scripts/lib/textfield-conformance.test.ts が行う。
  */
-import { type StyleProp, type ViewStyle } from "react-native";
+import { Platform, type StyleProp, type TextStyle, type ViewStyle } from "react-native";
 import { type TextFieldSize } from "./textfield.styles";
+/**
+ * Android の EditText は固定 height と組み合わさると既定の縦 padding で文字が
+ * 上寄り・下端切れになるため、縦 padding を殺して縦センターに揃える。
+ * textAlignVertical は Android 専用、paddingVertical: 0 は iOS の見た目を変えない
+ * （iOS の単一行入力は元々縦センター）。
+ * さらに Android では Noto CJK のフォントメトリクス由来で文字インクが
+ * 1dp 強下寄りになる（Pixel 実機ピクセル実測 +2.7px/density2.5。
+ * includeFontPadding: false は gravity center 下では無効なことも実測済み）ため、
+ * paddingBottom の光学ナッジで打ち消す（gravity center は残り高さの中央に置くので
+ * paddingBottom p で p/2 上がる）。
+ * recipe（styleRefs）の写像ではなく RN 実装の補正なので resolver には置かない。
+ */
+/** OS 毎の補正値を返す純関数（jest は Platform=ios 固定のため、Android 分岐はこれを直接検証する）。 */
+export declare function resolveInputVerticalFix(os: typeof Platform.OS): TextStyle;
 interface TextFieldProps {
     /** ラベル（必須。placeholder だけの入力欄を作らせない = FORM_NO_LABEL_OMIT）。 */
     label: string;

package/lib/typescript/src/components/TextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../src/components/TextField.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAGH,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAGtB,OAAO,EAGL,KAAK,aAAa,EACnB,MAAM,oBAAoB,CAAC;AAE5B,UAAU,cAAc;IACtB,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAC1C,uFAAuF;IACvF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,KAAK,EACL,YAAY,EACZ,WAAW,EACX,OAAmB,EACnB,QAAgB,EAChB,IAAe,EACf,UAAU,EACV,SAAS,EACT,KAAK,EACL,MAAM,GACP,EAAE,cAAc,2CAqChB;yBAjDe,SAAS"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../src/components/TextField.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAGH,OAAO,EACL,QAAQ,EAIR,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAGtB,OAAO,EAGL,KAAK,aAAa,EACnB,MAAM,oBAAoB,CAAC;AAE5B;;;;;;;;;;;GAWG;AAEH,sEAAsE;AACtE,wBAAgB,uBAAuB,CAAC,EAAE,EAAE,OAAO,QAAQ,CAAC,EAAE,GAAG,SAAS,CAMzE;AAKD,UAAU,cAAc;IACtB,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAC1C,uFAAuF;IACvF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,KAAK,EACL,YAAY,EACZ,WAAW,EACX,OAAmB,EACnB,QAAgB,EAChB,IAAe,EACf,UAAU,EACV,SAAS,EACT,KAAK,EACL,MAAM,GACP,EAAE,cAAc,2CAqChB;yBAjDe,SAAS"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "melta-app",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "melta for APP — melta デザインシステムの React Native UI kit。melta-contracts（デザイン契約）を single source of truth に RN 実装でその契約を満たす。アプリ本体ではなくライブラリ。",
   "license": "MIT",
   "homepage": "https://app.melta.tsubotax.com",

package/src/components/TextField.tsx

@@ -14,10 +14,12 @@
 
 import { useMemo, useState } from "react";
 import {
+  Platform,
   TextInput,
   View,
   Text as RNText,
   type StyleProp,
+  type TextStyle,
   type ViewStyle,
 } from "react-native";
 import { useTheme } from "../theme";
@@ -28,6 +30,31 @@ import {
   type TextFieldSize,
 } from "./textfield.styles";
 
+/**
+ * Android の EditText は固定 height と組み合わさると既定の縦 padding で文字が
+ * 上寄り・下端切れになるため、縦 padding を殺して縦センターに揃える。
+ * textAlignVertical は Android 専用、paddingVertical: 0 は iOS の見た目を変えない
+ * （iOS の単一行入力は元々縦センター）。
+ * さらに Android では Noto CJK のフォントメトリクス由来で文字インクが
+ * 1dp 強下寄りになる（Pixel 実機ピクセル実測 +2.7px/density2.5。
+ * includeFontPadding: false は gravity center 下では無効なことも実測済み）ため、
+ * paddingBottom の光学ナッジで打ち消す（gravity center は残り高さの中央に置くので
+ * paddingBottom p で p/2 上がる）。
+ * recipe（styleRefs）の写像ではなく RN 実装の補正なので resolver には置かない。
+ */
+/* eslint-disable melta/no-raw-spacing -- spacing の選択ではなく EditText 既定 padding の打ち消しと CJK 光学ナッジ（実測由来の固定値） */
+/** OS 毎の補正値を返す純関数（jest は Platform=ios 固定のため、Android 分岐はこれを直接検証する）。 */
+export function resolveInputVerticalFix(os: typeof Platform.OS): TextStyle {
+  return {
+    paddingVertical: 0,
+    ...(os === "android" ? { paddingBottom: 2 } : null),
+    textAlignVertical: "center",
+  };
+}
+/* eslint-enable melta/no-raw-spacing */
+
+const INPUT_VERTICAL_FIX = resolveInputVerticalFix(Platform.OS);
+
 interface TextFieldProps {
   /** ラベル（必須。placeholder だけの入力欄を作らせない = FORM_NO_LABEL_OMIT）。 */
   label: string;
@@ -88,7 +115,7 @@ export function TextField({
           if (!disabled) setFocused(true);
         }}
         onBlur={() => setFocused(false)}
-        style={[resolved.input, focused && !disabled ? focusStyle : null]}
+        style={[resolved.input, INPUT_VERTICAL_FIX, focused && !disabled ? focusStyle : null]}
       />
       {helperText != null && !showError && (
         <RNText style={resolved.helperText}>{helperText}</RNText>

package/src/safe-area/index.ts

@@ -15,13 +15,17 @@
  * Provider の context 値を render 中に同期参照して padding を付けるため、native
  * SafeAreaView の layout/state 更新を待たず、初回 render から inset が反映される。
  *
- * ⚠️ 前提: アプリの root に SafeAreaProvider が必要。初回 render から正しい inset を
- * 使うには Provider に initialMetrics も渡す。React Navigation / Expo Router 利用時は
- * Provider が設置済みのことが多い。
+ * ⚠️ 前提: アプリの root に SafeAreaProvider が必要（無いと useSafeAreaInsets が throw
+ * する）。初回 render から正しい inset を使うには Provider に initialMetrics も渡す。
+ * React Navigation / Expo Router 利用時は Provider が設置済みのことが多い。
+ *
+ * ⚠️ 公開契約: safe-area と合成する padding は数値のみサポート。"5%" 等の非数値は
+ * 基底値として扱えず、対象 edge の padding は inset 値に置き換わる（RNSAC native も
+ * percentage padding 未サポートのため、より弱い保証を契約化はしない）。
  */
 
 import { createElement, useMemo } from "react";
-import { StyleSheet, View, type ViewStyle } from "react-native";
+import { I18nManager, StyleSheet, View, type ViewStyle } from "react-native";
 import {
   useSafeAreaInsets,
   type Edge,
@@ -47,21 +51,36 @@ function additivePadding(
   edges: ReadonlySet<Edge>,
 ): ViewStyle {
   const flat = StyleSheet.flatten(style) ?? {};
+  const num = (value: unknown): number | null => (typeof value === "number" ? value : null);
 
-  const base = (edge: Edge): number => {
-    const edgeValue = flat[`padding${edge[0].toUpperCase()}${edge.slice(1)}` as keyof ViewStyle];
-    const axisValue =
-      edge === "top" || edge === "bottom" ? flat.paddingVertical : flat.paddingHorizontal;
-    const value = edgeValue ?? axisValue ?? flat.padding;
-    return typeof value === "number" ? value : 0;
-  };
+  // 基底 padding の解決は Yoga の優先順位（論理 > 物理 > 軸 > 全体）に合わせる。
+  // 論理キー（paddingStart/End）を読まないと、基底が論理指定のとき取りこぼす。
+  const isRTL = I18nManager.isRTL;
+  const baseVertical = (edge: "top" | "bottom"): number =>
+    num(edge === "top" ? flat.paddingTop : flat.paddingBottom) ??
+    num(flat.paddingVertical) ??
+    num(flat.padding) ??
+    0;
+  const baseHorizontal = (edge: "left" | "right"): number =>
+    num(flat[(edge === "left") === !isRTL ? "paddingStart" : "paddingEnd"]) ??
+    num(edge === "left" ? flat.paddingLeft : flat.paddingRight) ??
+    num(flat.paddingHorizontal) ??
+    num(flat.padding) ??
+    0;
 
-  return {
-    ...(edges.has("top") ? { paddingTop: base("top") + insets.top } : null),
-    ...(edges.has("right") ? { paddingRight: base("right") + insets.right } : null),
-    ...(edges.has("bottom") ? { paddingBottom: base("bottom") + insets.bottom } : null),
-    ...(edges.has("left") ? { paddingLeft: base("left") + insets.left } : null),
-  };
+  // 水平方向は論理キーで出力する。物理キー（paddingLeft/Right）で上書きすると、
+  // 基底 style 側に paddingStart/End があるとき論理キーが Yoga 上で勝ち、
+  // inset の加算結果ごと無視されるため。
+  const out: ViewStyle = {};
+  if (edges.has("top")) out.paddingTop = baseVertical("top") + insets.top;
+  if (edges.has("bottom")) out.paddingBottom = baseVertical("bottom") + insets.bottom;
+  if (edges.has("left")) {
+    out[isRTL ? "paddingEnd" : "paddingStart"] = baseHorizontal("left") + insets.left;
+  }
+  if (edges.has("right")) {
+    out[isRTL ? "paddingStart" : "paddingEnd"] = baseHorizontal("right") + insets.right;
+  }
+  return out;
 }
 
 function createContextSafeAreaView(selectedEdges: readonly Edge[]): SafeAreaViewLike {