melta-app 0.5.3 → 0.7.0

package/src/components/Surface.tsx

@@ -13,9 +13,9 @@
 
 import type { ReactNode } from "react";
 import { View, type StyleProp, type ViewStyle } from "react-native";
-import { useTheme } from "../theme";
-import { CONTRACTS } from "../contracts/contract-types";
-import { resolveSurfaceStyle, type SurfaceStyleProps } from "./surface.styles";
+import { useTheme } from "../theme/index.js";
+import { CONTRACTS } from "../contracts/contract-types.js";
+import { resolveSurfaceStyle, type SurfaceStyleProps } from "./surface.styles.js";
 
 export interface SurfaceProps extends SurfaceStyleProps {
   style?: StyleProp<ViewStyle>;
@@ -33,5 +33,6 @@ export function Surface({ bg, radius, elevation, padding, style, testID, childre
   );
 }
 
-// Phase 2 conformance test 用の contract メタ（§2 A-3）。
+// conformance test 用の contract メタ（§2 A-3）。scripts/lib/conformance.test.ts が
+// 「この宣言が正しい contract を指しているか」を静的スキャンで照合する。
 Surface.__contract = CONTRACTS.surface;

package/src/components/TextField.tsx

@@ -6,7 +6,8 @@
  *   editable=false + accessibilityState.disabled を併せて適用する（recipe description の規約）。
  * - error 時は errorText を必ずテキストで表示する（FORM_NO_COLOR_ONLY_ERROR = 色だけで伝えない）。
  *   RN には aria-describedby 相当が無いため、(a) errorText を input の accessibilityLabel に合成
- *   （再フォーカス時に読み上げ）、(b) errorText 側に accessibilityLiveRegion="polite"（Android は
+ *   （再フォーカス時に読み上げ。合成文は formatErrorAccessibilityLabel で差し替え可能 = i18n フック。
+ *   既定は日本語）、(b) errorText 側に accessibilityLiveRegion="polite"（Android は
  *   出現時に通知。iOS の即時通知が要る画面は submit 時に announceForAccessibility を併用する —
  *   docs/patterns.md 参照）。
  * - focus は内部 state（onFocus/onBlur）で recipe states.focus の inputStyle 差分
@@ -32,16 +33,16 @@ import {
   type TextStyle,
   type ViewStyle,
 } from "react-native";
-import { useTheme } from "../theme";
-import { CONTRACTS } from "../contracts/contract-types";
+import { useTheme } from "../theme/index.js";
+import { CONTRACTS } from "../contracts/contract-types.js";
 import {
   resolveTextFieldStyle,
   resolveTextFieldFocusStyle,
   type TextFieldSize,
-} from "./textfield.styles";
+} from "./textfield.styles.js";
 
 /**
- * Android の EditText は固定 height と組み合わさると既定の縦 padding で文字が
+ * Android の EditText は高さ下限（minHeight）と組み合わさると既定の縦 padding で文字が
  * 上寄り・下端切れになるため、縦 padding を殺して縦センターに揃える。
  * textAlignVertical は Android 専用、paddingVertical: 0 は iOS の見た目を変えない
  * （iOS の単一行入力は元々縦センター）。
@@ -65,6 +66,15 @@ export function resolveInputVerticalFix(os: typeof Platform.OS): TextStyle {
 
 const INPUT_VERTICAL_FIX = resolveInputVerticalFix(Platform.OS);
 
+/**
+ * error 時の accessibilityLabel 合成の既定（日本語）。
+ * props で差し替え可能（formatErrorAccessibilityLabel）。既定値を変えると
+ * 既存アプリの VoiceOver 読み上げが変わるので、既定は日本語のまま据え置く。
+ */
+function defaultErrorAccessibilityLabel(label: string, errorText: string): string {
+  return `${label}。エラー: ${errorText}`;
+}
+
 interface TextFieldProps {
   /** ラベル（必須。placeholder だけの入力欄を作らせない = FORM_NO_LABEL_OMIT）。 */
   label: string;
@@ -80,6 +90,12 @@ interface TextFieldProps {
   helperText?: string;
   /** variant="error" 時に表示するエラーメッセージ（色だけでなくテキストで伝える）。 */
   errorText?: string;
+  /**
+   * error 時に input の accessibilityLabel へ合成する文字列の組み立て（i18n フック）。
+   * 既定は日本語の `${label}。エラー: ${errorText}`（既存アプリの読み上げを変えないため据え置き）。
+   * 英語アプリなどでは `(label, error) => \`${label}. Error: ${error}\`` を渡す。
+   */
+  formatErrorAccessibilityLabel?: (label: string, errorText: string) => string;
   /** キーボード種別（RN TextInput へ透過）。 */
   keyboardType?: KeyboardTypeOptions;
   autoCapitalize?: "none" | "sentences" | "words" | "characters";
@@ -104,6 +120,7 @@ export function TextField({
   size = "medium",
   helperText,
   errorText,
+  formatErrorAccessibilityLabel = defaultErrorAccessibilityLabel,
   keyboardType,
   autoCapitalize,
   autoCorrect,
@@ -143,7 +160,7 @@ export function TextField({
         maxLength={maxLength}
         returnKeyType={returnKeyType}
         onSubmitEditing={onSubmitEditing}
-        accessibilityLabel={showError ? `${label}。エラー: ${errorText}` : label}
+        accessibilityLabel={showError ? formatErrorAccessibilityLabel(label, errorText) : label}
         accessibilityState={{ disabled }}
         onFocus={(e) => {
           if (!disabled) setFocused(true);
@@ -167,5 +184,6 @@ export function TextField({
   );
 }
 
-// Phase 2 conformance test 用の contract メタ（§2 A-3）。
+// conformance test 用の contract メタ（§2 A-3）。scripts/lib/conformance.test.ts が
+// 「この宣言が正しい contract を指しているか」を静的スキャンで照合する。
 TextField.__contract = CONTRACTS.textfield;

package/src/components/Toast.tsx

@@ -5,7 +5,9 @@
  * - presentational component。表示位置・キュー・自動消滅はアプリ層の責務
  *   （entering/visible/dismissing のアニメ state は Phase 外、recipe description）。
  * - closeButton は契約 anatomy で必須 → onClose を required prop にして型で強制。
- *   Pressable + テキスト ×（accessibilityLabel="閉じる" 必須）。
+ *   Pressable + テキスト ×（accessibilityLabel は既定 "閉じる"、closeAccessibilityLabel で差し替え可能）。
+ * - action と × は隣接する 2 つの操作要素。当たり判定が重なると押し違いが起きるので、
+ *   横 hitSlop を gap の 1/2 に絞る（toast.styles.ts の TOAST_TAP_TARGET）。
  * - a11y（§2 web→RN mapping）: web の role=status + aria-live=polite を
  *   accessibilityLiveRegion="polite"（Android のみ有効）に落とす。
  * - elevation は theme.elevation.sm（iOS shadow* + Android elevation の複合値）を container に
@@ -17,10 +19,15 @@
 
 import { useMemo } from "react";
 import { Pressable, View, type StyleProp, type ViewStyle } from "react-native";
-import { Text } from "../primitives/Text";
-import { useTheme } from "../theme";
-import { CONTRACTS } from "../contracts/contract-types";
-import { TOAST_SPEC, resolveToastStyles, type ToastVariant } from "./toast.styles";
+import { Text } from "../primitives/Text.js";
+import { useTheme } from "../theme/index.js";
+import { CONTRACTS } from "../contracts/contract-types.js";
+import {
+  TOAST_SPEC,
+  TOAST_TAP_TARGET,
+  resolveToastStyles,
+  type ToastVariant,
+} from "./toast.styles.js";
 
 interface ToastProps {
   /** 通知タイプ（contract variant）。 */
@@ -34,6 +41,11 @@ interface ToastProps {
   /** あれば message の後にアクションテキスト（onAction とセットで有効）。 */
   actionLabel?: string;
   onAction?: () => void;
+  /**
+   * × ボタンの accessibilityLabel（i18n フック）。既定は日本語 "閉じる"
+   * （既存アプリの読み上げを変えないため据え置き）。
+   */
+  closeAccessibilityLabel?: string;
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }
@@ -45,6 +57,7 @@ export function Toast({
   onClose,
   actionLabel,
   onAction,
+  closeAccessibilityLabel = "閉じる",
   style,
   testID,
 }: ToastProps) {
@@ -73,7 +86,9 @@ export function Toast({
         )}
       </View>
       {actionLabel != null && onAction != null && (
-        <Pressable onPress={onAction} accessibilityRole="button" hitSlop={10}>
+        // 横 hitSlop は gap/2（= 6）まで。10 のままだと隣の × と当たり判定が 8pt 重なり、
+        // 手前に描かれる × が勝って「元に戻す」が押せない（toast.styles.ts の TOAST_TAP_TARGET 参照）。
+        <Pressable onPress={onAction} accessibilityRole="button" hitSlop={TOAST_TAP_TARGET.hitSlop}>
           <Text
             variant={TOAST_SPEC.messageFont}
             weight={TOAST_SPEC.messageWeight}
@@ -83,13 +98,19 @@ export function Toast({
           </Text>
         </Pressable>
       )}
-      {/* 最小タップターゲット確保: min 24 + hitSlop（Tag removable と同じ手当て）。 */}
+      {/* 最小タップターゲット確保: 横 hitSlop を gap/2 に絞るぶん箱を 32pt に広げて 32+6×2 = 44pt。
+          縦は 24 + 10×2 = 44pt（正典パターン）。 */}
       <Pressable
         onPress={onClose}
         accessibilityRole="button"
-        accessibilityLabel="閉じる"
-        hitSlop={10}
-        style={{ minWidth: 24, minHeight: 24, alignItems: "center", justifyContent: "center" }}
+        accessibilityLabel={closeAccessibilityLabel}
+        hitSlop={TOAST_TAP_TARGET.hitSlop}
+        style={{
+          minWidth: TOAST_TAP_TARGET.closeMinWidth,
+          minHeight: TOAST_TAP_TARGET.closeMinHeight,
+          alignItems: "center",
+          justifyContent: "center",
+        }}
       >
         <Text variant="xs" style={{ color: styles.messageStyle.color }}>
           ×
@@ -99,5 +120,6 @@ export function Toast({
   );
 }
 
-// Phase 2 conformance test 用の contract メタ（§2 A-3）。
+// conformance test 用の contract メタ（§2 A-3）。scripts/lib/conformance.test.ts が
+// 「この宣言が正しい contract を指しているか」を静的スキャンで照合する。
 Toast.__contract = CONTRACTS.toast;

package/src/components/Toggle.tsx

@@ -8,22 +8,24 @@
  *   flex-start / flex-end を切り替える（アニメは Phase 外）。
  * - disabled: recipe states.disabled の opacity + accessibilityState.disabled + onPress 無効。
  * - a11y: accessibilityRole="switch" + accessibilityState.checked。label があれば右に表示し、
- *   Pressable 全体がタップ領域 + accessibilityLabel になる。
+ *   Pressable 全体がタップ領域 + accessibilityLabel になる。実効タップ標的 44pt は
+ *   縦 hitSlop で確保する（TOGGLE_VERTICAL_HIT_SLOP、A11Y_MIN_TAP_TARGET_44）。
  * - 色・寸法の決定は pure resolver（toggle.styles.ts）に分離。
  *   recipes/app/toggle.recipe.json との機械照合は scripts/lib/toggle-conformance.test.ts が行う。
  */
 
 import { useMemo } from "react";
 import { Pressable, View, type StyleProp, type ViewStyle } from "react-native";
-import { Text } from "../primitives/Text";
-import { useTheme } from "../theme";
-import { CONTRACTS } from "../contracts/contract-types";
+import { Text } from "../primitives/Text.js";
+import { useTheme } from "../theme/index.js";
+import { CONTRACTS } from "../contracts/contract-types.js";
 import {
   resolveToggleStyle,
   TOGGLE_DISABLED_OPACITY,
+  TOGGLE_VERTICAL_HIT_SLOP,
   type ToggleSize,
   type ToggleVariant,
-} from "./toggle.styles";
+} from "./toggle.styles.js";
 
 interface ToggleProps {
   /** 現在値（true=on / false=off。variant はここから暗黙決定）。 */
@@ -61,6 +63,12 @@ export function Toggle({
       accessibilityRole="switch"
       accessibilityState={{ checked: value, disabled }}
       accessibilityLabel={label}
+      // track（24/28pt）も label 付きの行（36pt）も 44pt に届かないので縦 hitSlop で補う。
+      // 値の根拠は toggle.styles.ts の TOGGLE_VERTICAL_HIT_SLOP。
+      hitSlop={{
+        top: TOGGLE_VERTICAL_HIT_SLOP[size],
+        bottom: TOGGLE_VERTICAL_HIT_SLOP[size],
+      }}
       testID={testID}
       style={[
         {
@@ -90,5 +98,6 @@ export function Toggle({
   );
 }
 
-// Phase 2 conformance test 用の contract メタ（§2 A-3）。
+// conformance test 用の contract メタ（§2 A-3）。scripts/lib/conformance.test.ts が
+// 「この宣言が正しい contract を指しているか」を静的スキャンで照合する。
 Toggle.__contract = CONTRACTS.toggle;

package/src/components/action-sheet.styles.ts

@@ -13,7 +13,7 @@
  * - sheet の下余白（SafeArea）は実装（ActionSheet.tsx）が SafeAreaView で加算する。
  */
 
-import type { FontWeightValue, NativeTheme, ThemeMode } from "../theme";
+import type { FontWeightValue, NativeTheme, ThemeMode } from "../theme/index.js";
 
 /** overlay の黒 50%（token 外 literal。modal と同値）。 */
 // eslint-disable-next-line melta/no-raw-color -- overlay の黒 50% は契約上 token 外の literal（recipe description / web の bg-black/50 と同値）

package/src/components/alert.styles.ts

@@ -7,8 +7,7 @@
  *
  * - RN では border を持たず bg subtle + text 色で表現する（status token に border 用の中間色が
  *   無いため。COLOR_ONLY_FORBIDDEN は title/message のテキストと icon slot で担保、recipe description）。
- * - dark mode は status.*.subtleDark / textDark 側を解決する。info variant のみ primary 固定
- *   （dark token が無い既知の割り切り、web と同じ）。
+ * - status 色（mode ごとの subtle / text、info の primary 固定）の解決は status-colors.ts が SSOT。
  */
 
 import type {
@@ -19,14 +18,23 @@ import type {
   RadiusKey,
   SpacingKey,
   ThemeMode,
-} from "../theme";
+} from "../theme/index.js";
+import { resolveStatusVariantColors, type StatusVariant } from "./status-colors.js";
+import { CANONICAL_TAP_TARGET } from "../a11y/tap-target.js";
 
-export type AlertVariant = "info" | "success" | "warning" | "error";
+/** alert.contract の variant 語彙（status 共通語彙と 1:1）。 */
+export type AlertVariant = StatusVariant;
 
 /**
  * 構成キー（token キー）。component は Text にこのキーをそのまま渡し、resolver は同じキーから
  * style 値を解決する（component と resolver が別々のキーを持って drift する事故を防ぐ SSOT）。
  */
+/**
+ * × の当たり判定（正典パターン: 視覚 24pt + hitSlop 10 = 実効 44pt）。
+ * Alert の × は右端に単独で立つ（Toast と違い隣接する操作要素が無い）ので横も 10 のままでよい。
+ */
+export const ALERT_CLOSE_TAP_TARGET = CANONICAL_TAP_TARGET;
+
 export const ALERT_SPEC = {
   padding: "4",
   gap: "3",
@@ -66,33 +74,13 @@ export interface AlertStyles {
   };
 }
 
-/**
- * variant → bg / text 色の解決。
- * - info: primary.50 / primary.800 固定（mode 非依存）。
- * - success / warning / error: status token（error は status キー上は danger）。
- *   light は subtleLight / textLight、dark は subtleDark / textDark（recipe description の写像）。
- */
-export function resolveAlertColors(
-  theme: NativeTheme,
-  mode: ThemeMode,
-  variant: AlertVariant,
-): { bg: string; text: string } {
-  if (variant === "info") {
-    return { bg: theme.color.primary["50"], text: theme.color.primary["800"] };
-  }
-  const status = theme.color.status[variant === "error" ? "danger" : variant];
-  return mode === "dark"
-    ? { bg: status.subtleDark, text: status.textDark }
-    : { bg: status.subtleLight, text: status.textLight };
-}
-
 /** variant → 全 slot の style 解決（alert.recipe styleRefs の 1:1 写像）。 */
 export function resolveAlertStyles(
   theme: NativeTheme,
   mode: ThemeMode,
   variant: AlertVariant,
 ): AlertStyles {
-  const { bg, text } = resolveAlertColors(theme, mode, variant);
+  const { bg, text } = resolveStatusVariantColors(theme, mode, variant);
   return {
     containerStyle: {
       backgroundColor: bg,

package/src/components/avatar.styles.ts

@@ -6,13 +6,13 @@
  * 機械照合は scripts/lib/avatar-conformance.test.ts が行う。
  */
 
-import type { FontWeightValue, NativeTheme, ThemeMode } from "../theme";
+import type { FontWeightValue, NativeTheme, ThemeMode } from "../theme/index.js";
 
 export type AvatarSize = "small" | "medium" | "large";
 export type AvatarStatus = "online" | "away" | "offline";
 
 /** サイズ軸（contract sizes の height と 1:1。recipe sizes の width/height/dotSize/fontSize に対応）。 */
-const SIZE_TABLE = {
+export const AVATAR_SIZE_SPEC = {
   small: { box: 32, dot: 8, fontSize: "xs" },
   medium: { box: 40, dot: 10, fontSize: "sm" },
   large: { box: 48, dot: 12, fontSize: "base" },
@@ -21,6 +21,28 @@ const SIZE_TABLE = {
 /** group の重なり（-spacing.2 相当。負値 token が無いため recipe と同じ literal）。 */
 export const AVATAR_GROUP_OVERLAP = -8;
 
+/**
+ * initials の文字サイズ倍率の上限（size 別）。
+ *
+ * Avatar の器は **width = height の円**（recipe sizes の box）で、fontScale で伸びるのは
+ * 中身の文字だけ。器は伸びないので、上限を掛けないと OS の文字サイズ拡大で文字が円から
+ * はみ出す（円が楕円に見える / 文字が切れる）。
+ *
+ * 導出は「box ÷ その size が使う fontSize token の lineHeight」を**小数第1位で切り捨て**（安全側）:
+ *   small  32 ÷ 19（xs   の lineHeight） = 1.68… → 1.6
+ *   medium 40 ÷ 26（sm   の lineHeight） = 1.53… → 1.5
+ *   large  48 ÷ 36（base の lineHeight） = 1.33… → 1.3
+ *
+ * lineHeight（fontSize ではなく）を分母に採るのは、RN が確保する行ボックスの高さが
+ * 溢れの実体だから。theme を差し替えても壊れないよう、この導出そのものは
+ * avatar-conformance.test.ts が実 theme の値で再検算する。
+ */
+export const AVATAR_INITIALS_MAX_FONT_SCALE: Record<AvatarSize, number> = {
+  small: 1.6,
+  medium: 1.5,
+  large: 1.3,
+};
+
 /**
  * group variant（avatar.recipe の group.style / group.overlapStyle の 1:1 写像）。
  * container は横並び、2枚目以降の子に overlap（負 margin）を適用する。
@@ -61,7 +83,7 @@ export function resolveAvatarStyle(
   variant: "image" | "initials",
   size: AvatarSize,
 ): AvatarStyleResult {
-  const s = SIZE_TABLE[size];
+  const s = AVATAR_SIZE_SPEC[size];
   return {
     container: {
       width: s.box,

package/src/components/bottom-sheet.styles.ts

@@ -13,7 +13,7 @@
  * - sheet の下余白（SafeArea）は実装（BottomSheet.tsx）が SafeAreaView で加算する。
  */
 
-import type { FontWeightValue, NativeTheme, ThemeMode } from "../theme";
+import type { FontWeightValue, NativeTheme, ThemeMode } from "../theme/index.js";
 
 /** overlay の黒 50%（token 外 literal。modal と同値）。 */
 // eslint-disable-next-line melta/no-raw-color -- overlay の黒 50% は契約上 token 外の literal（recipe description / web の bg-black/50 と同値）

package/src/components/card.styles.ts

@@ -7,7 +7,7 @@
  */
 
 import type { ViewStyle } from "react-native";
-import type { NativeTheme, ThemeMode, ElevationKey } from "../theme";
+import type { NativeTheme, ThemeMode, ElevationKey } from "../theme/index.js";
 
 export type CardVariant = "basic" | "media" | "action" | "link";
 

package/src/components/card.validate.ts

@@ -10,8 +10,8 @@
  */
 
 import { isValidElement } from "react";
-import type { CardVariant } from "./card.styles";
-import { CARD_INTERACTIVE } from "./card.styles";
+import type { CardVariant } from "./card.styles.js";
+import { CARD_INTERACTIVE } from "./card.styles.js";
 
 export interface CardPropsForValidation {
   variant: CardVariant;

package/src/components/checkbox.styles.ts

@@ -6,18 +6,21 @@
  * 機械照合は scripts/lib/checkbox-conformance.test.ts が行う。
  */
 
-import type { NativeTheme, ThemeMode } from "../theme";
+import type { NativeTheme, ThemeMode } from "../theme/index.js";
 
 /**
  * recipe 由来の literal 値テーブル（token 化されていない数値。conformance が recipe と照合する）。
  * - box は 20px（web の 16px より大きいのはタッチ前提、recipe description）
- * - hitSlop は (44 - box 20) / 2 = 12。行全体 Pressable に足して実タッチ領域 44pt を確保
+ * - 実効タップ標的 44pt は行の minHeight で確保（A11Y_MIN_TAP_TARGET_44。規約 10-(b):
+ *   背景を持たない行は hitSlop でなく寸法で満たす — 旧実装の四方 hitSlop 12 は行全体
+ *   Pressable に効くため、縦積みの隣接 Checkbox と当たり判定が最大 24pt 重なっていた
+ *   （Codex レビュー指摘）。Radio の option 行と同じ手当てに統一）
  */
 export const CHECKBOX_SPEC = {
   boxSize: 20,
   boxBorderWidth: 2,
   disabledOpacity: 0.5,
-  hitSlop: 12,
+  rowMinHeight: 44,
 } as const;
 
 /** 見た目（色）に効く状態入力。disabled は opacity のみで色を変えないため含めない。 */

package/src/components/empty-state.styles.ts

@@ -15,7 +15,7 @@ import type {
   SemanticColors,
   SpacingKey,
   ThemeMode,
-} from "../theme";
+} from "../theme/index.js";
 
 /**
  * default variant の構成キー（token キー）。

package/src/components/header.styles.ts

@@ -6,7 +6,7 @@
  * 機械照合は scripts/lib/header-conformance.test.ts が行う。
  */
 
-import type { NativeTheme, ThemeMode } from "../theme";
+import type { NativeTheme, ThemeMode } from "../theme/index.js";
 
 export interface HeaderStyle {
   containerStyle: {

package/src/components/image.styles.ts

@@ -11,7 +11,7 @@
  * （token キー限定）指定時のみ borderRadius + overflow:hidden を付ける。
  */
 
-import type { NativeTheme, RadiusKey } from "../theme";
+import type { NativeTheme, RadiusKey } from "../theme/index.js";
 
 /**
  * ImageStyle / ViewStyle 双方に有効な共通サブセット。

package/src/components/index.ts

@@ -3,21 +3,21 @@
  * Surface はライブラリ公開（P1）で正式 export（契約 surface.contract.json + recipe を持つ implemented）。
  */
 
-export { Surface } from "./Surface";
-export { Image } from "./Image";
-export { Card } from "./Card";
-export { Skeleton } from "./Skeleton";
-export { EmptyState } from "./EmptyState";
-export { Screen } from "./Screen";
-export { Header } from "./Header";
-export { Avatar } from "./Avatar";
-export { TextField } from "./TextField";
-export { Toggle } from "./Toggle";
-export { Checkbox } from "./Checkbox";
-export { Radio } from "./Radio";
-export { Alert } from "./Alert";
-export { Toast } from "./Toast";
-export { Progress } from "./Progress";
-export { Modal } from "./Modal";
-export { ActionSheet } from "./ActionSheet";
-export { BottomSheet } from "./BottomSheet";
+export { Surface } from "./Surface.js";
+export { Image } from "./Image.js";
+export { Card } from "./Card.js";
+export { Skeleton } from "./Skeleton.js";
+export { EmptyState } from "./EmptyState.js";
+export { Screen } from "./Screen.js";
+export { Header } from "./Header.js";
+export { Avatar } from "./Avatar.js";
+export { TextField } from "./TextField.js";
+export { Toggle } from "./Toggle.js";
+export { Checkbox } from "./Checkbox.js";
+export { Radio } from "./Radio.js";
+export { Alert } from "./Alert.js";
+export { Toast } from "./Toast.js";
+export { Progress } from "./Progress.js";
+export { Modal } from "./Modal.js";
+export { ActionSheet } from "./ActionSheet.js";
+export { BottomSheet } from "./BottomSheet.js";

package/src/components/modal.styles.ts

@@ -13,8 +13,17 @@
  * - sizes はタブレット以上で効く maxWidth（モバイルは width 100% - overlay padding が先に効く）。
  */
 
-import type { ElevationStyle, FontWeightValue, NativeTheme, ThemeMode } from "../theme";
-import type { SizeOf, VariantOf } from "../contracts/contract-types";
+import type { ElevationStyle, FontWeightValue, NativeTheme, ThemeMode } from "../theme/index.js";
+import type { SizeOf, VariantOf } from "../contracts/contract-types.js";
+import { CANONICAL_TAP_TARGET } from "../a11y/tap-target.js";
+
+/**
+ * title 行の × の当たり判定（正典パターン: 視覚 24pt + hitSlop 10 = 実効 44pt）。
+ *
+ * 以前は hitSlop=spacing.2（8）だけで、× のグリフ幅（fontSize.xl の "×" ≈ 13pt）＋ 8×2 =
+ * 実効 29pt しか無かった（Toast / Alert の × は正典パターン済みだったので Modal だけ取り残されていた）。
+ */
+export const MODAL_CLOSE_TAP_TARGET = CANONICAL_TAP_TARGET;
 
 export type ModalVariant = VariantOf<"modal">;
 export type ModalSize = SizeOf<"modal">;

package/src/components/progress.styles.ts

@@ -12,7 +12,7 @@
  *   fill は primary.500 / status.success.base（mode 非依存）。
  */
 
-import type { NativeTheme, RadiusKey, ThemeMode } from "../theme";
+import type { NativeTheme, RadiusKey, ThemeMode } from "../theme/index.js";
 
 export type ProgressVariant = "primary" | "success" | "indeterminate";
 

package/src/components/radio.styles.ts

@@ -11,17 +11,26 @@
  * 実装ではこの共通部を variant に関わらず同値で返す（conformance が variant 間一致を照合）。
  */
 
-import type { FontWeightValue, NativeTheme, ThemeMode } from "../theme";
+import type { FontWeightValue, NativeTheme, ThemeMode } from "../theme/index.js";
+import { MIN_TAP_TARGET } from "../a11y/tap-target.js";
 
 export type RadioVariant = "vertical" | "horizontal" | "card-style";
 
-/** recipe 由来の literal 値テーブル（token 化されていない数値。conformance が recipe と照合する）。 */
+/**
+ * recipe 由来の literal 値テーブル（token 化されていない数値。conformance が recipe と照合する）。
+ *
+ * `optionMinHeight` だけは recipe 外の a11y 手当て（A11Y_MIN_TAP_TARGET_44）。
+ * option 行の視覚高さは label（base）の lineHeight 36pt しかなく 44pt に届かないが、
+ * option 行は**背景を持たない**（card-style を除く。card は padding 16×2 で既に 68pt）ので
+ * hitSlop ではなく minHeight で下げ止める — 見た目は変わらず、hitSlop の重なりも原理的に起きない。
+ */
 export const RADIO_SPEC = {
   circleSize: 20,
   circleBorderWidth: 2,
   dotSize: 10,
   cardBorderWidth: 1,
   disabledOpacity: 0.5,
+  optionMinHeight: MIN_TAP_TARGET,
 } as const;
 
 export interface RadioGroupResolved {