melta-app 0.1.0

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

@@ -0,0 +1,98 @@
+/**
+ * empty-state.styles — EmptyState の pure style resolver（styleRefs conformance 対応で
+ * EmptyState.tsx から分離）。
+ *
+ * react-native を import しない純粋モジュールにすることで node テスト（tsx --test）から
+ * 直接実行できる。recipes/app/empty-state.recipe.json（melta-contracts の styleRefs）との
+ * 機械照合は scripts/lib/empty-state-conformance.test.ts が行う。
+ */
+
+import type {
+  FontSizeKey,
+  FontWeightKey,
+  FontWeightValue,
+  NativeTheme,
+  SemanticColors,
+  SpacingKey,
+  ThemeMode,
+} from "../theme";
+
+/**
+ * default variant の構成キー（token キー）。
+ * component は Text / View にこのキーをそのまま渡し、resolver は同じキーから style 値を解決する
+ * （component と resolver が別々のキーを持って drift する事故を防ぐ SSOT）。
+ */
+export const EMPTY_STATE_SPEC = {
+  padding: "8",
+  gap: "3",
+  titleFont: "lg",
+  titleWeight: "semibold",
+  titleColor: "text-heading",
+  descriptionFont: "sm",
+  descriptionColor: "text-muted",
+  actionMarginTop: "2",
+} as const satisfies {
+  padding: SpacingKey;
+  gap: SpacingKey;
+  titleFont: FontSizeKey;
+  titleWeight: FontWeightKey;
+  titleColor: keyof SemanticColors;
+  descriptionFont: FontSizeKey;
+  descriptionColor: keyof SemanticColors;
+  actionMarginTop: SpacingKey;
+};
+
+/** slot 構成（recipe default variant の style / titleStyle / descriptionStyle / actionStyle と 1:1）。 */
+export interface EmptyStateStyles {
+  /** 中央寄せコンテナ */
+  style: {
+    alignItems: "center";
+    justifyContent: "center";
+    padding: number;
+    gap: number;
+  };
+  /** compose する Text primitive（title）へ渡す値の解決結果 */
+  titleStyle: {
+    fontSize: number;
+    fontWeight: FontWeightValue;
+    color: string;
+    textAlign: "center";
+  };
+  /** compose する Text primitive（description）へ渡す値の解決結果 */
+  descriptionStyle: {
+    fontSize: number;
+    color: string;
+    textAlign: "center";
+  };
+  /** 任意 action（Button contained を内部 compose）のラッパ */
+  actionStyle: { marginTop: number };
+}
+
+/**
+ * default variant → style 解決（empty-state.recipe styleRefs の 1:1 写像）。
+ * title / description の fontSize・fontWeight・色は EMPTY_STATE_SPEC のキーから解決する
+ * （component 側は同じキーを Text の variant / weight / color prop に渡す = 同源）。
+ */
+export function resolveEmptyStateStyles(theme: NativeTheme, mode: ThemeMode): EmptyStateStyles {
+  const sem = theme.color.semantic[mode];
+  return {
+    style: {
+      alignItems: "center",
+      justifyContent: "center",
+      padding: theme.spacing[EMPTY_STATE_SPEC.padding],
+      gap: theme.spacing[EMPTY_STATE_SPEC.gap],
+    },
+    titleStyle: {
+      fontSize: theme.typography.fontSize[EMPTY_STATE_SPEC.titleFont].fontSize,
+      fontWeight: theme.typography.fontWeight[EMPTY_STATE_SPEC.titleWeight],
+      color: sem[EMPTY_STATE_SPEC.titleColor],
+      textAlign: "center",
+    },
+    descriptionStyle: {
+      fontSize: theme.typography.fontSize[EMPTY_STATE_SPEC.descriptionFont].fontSize,
+      color: sem[EMPTY_STATE_SPEC.descriptionColor],
+      textAlign: "center",
+    },
+    actionStyle: { marginTop: theme.spacing[EMPTY_STATE_SPEC.actionMarginTop] },
+  };
+}

package/src/components/header.styles.ts

@@ -0,0 +1,44 @@
+/**
+ * header.styles — Header の pure style resolver（styleRefs conformance 対応で Header.tsx から分離）。
+ *
+ * react-native を import しない純粋モジュールにすることで node テスト（tsx --test）から
+ * 直接実行できる。recipes/app/header.recipe.json（melta-contracts の styleRefs）との
+ * 機械照合は scripts/lib/header-conformance.test.ts が行う。
+ */
+
+import type { NativeTheme, ThemeMode } from "../theme";
+
+export interface HeaderStyle {
+  containerStyle: {
+    flexDirection: "row";
+    alignItems: "center";
+    gap: number;
+    paddingHorizontal: number;
+    paddingVertical: number;
+    backgroundColor: string;
+    borderBottomWidth: 1;
+    borderBottomColor: string;
+  };
+  titleWrapStyle: { flex: 1 };
+}
+
+/**
+ * mode → ヘッダー style の解決（header.recipe styleRefs の 1:1 写像）。
+ * title の typography はここでは持たない — Header は melta の Text
+ * （variant="xl" weight="bold" color="text-heading" role="heading"）を compose する（text recipe が正）。
+ */
+export function resolveHeaderStyle(theme: NativeTheme, mode: ThemeMode): HeaderStyle {
+  return {
+    containerStyle: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: theme.spacing["3"],
+      paddingHorizontal: theme.spacing["4"],
+      paddingVertical: theme.spacing["3"],
+      backgroundColor: theme.color.semantic[mode]["bg-page"],
+      borderBottomWidth: 1,
+      borderBottomColor: theme.color.semantic[mode]["border-default"],
+    },
+    titleWrapStyle: { flex: 1 },
+  };
+}

package/src/components/image.styles.ts

@@ -0,0 +1,36 @@
+/**
+ * image.styles — Image の pure style resolver（styleRefs conformance 対応で Image.tsx から分離）。
+ *
+ * react-native を import しない純粋モジュールにすることで node テスト（tsx --test）から
+ * 直接実行できる。recipes/app/image.recipe.json（melta-contracts の styleRefs）との
+ * 機械照合は scripts/lib/image-conformance.test.ts が行う。
+ *
+ * recipe の variants.default.style / states.error.style は両方とも空 object＝
+ * 「実装はデフォルトの装飾 style を持たない」が意図（contract の tokenRefs radius=radius.md
+ * とは意図的な食い違い。recipe description に明記済み）。ここでは radius prop
+ * （token キー限定）指定時のみ borderRadius + overflow:hidden を付ける。
+ */
+
+import type { NativeTheme, RadiusKey } from "../theme";
+
+/**
+ * ImageStyle / ViewStyle 双方に有効な共通サブセット。
+ * 画像本体（RNImage）と error 時の fallback View で同じ shape を共用する。
+ */
+export interface ImageShapeStyle {
+  aspectRatio?: number;
+  borderRadius?: number;
+  overflow?: "hidden";
+}
+
+/** radius / aspectRatio props → shape style の解決。未指定なら空 object（装飾なし）。 */
+export function resolveImageShape(
+  theme: NativeTheme,
+  { aspectRatio, radius }: { aspectRatio?: number; radius?: RadiusKey } = {},
+): ImageShapeStyle {
+  const borderRadius = radius != null ? theme.radius[radius] : undefined;
+  return {
+    ...(aspectRatio != null ? { aspectRatio } : null),
+    ...(borderRadius != null ? { borderRadius, overflow: "hidden" } : null),
+  };
+}

package/src/components/index.ts

@@ -0,0 +1,23 @@
+/**
+ * melta-app components の公開エントリ（設計書 §1）。
+ * 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";

package/src/components/modal.styles.ts

@@ -0,0 +1,106 @@
+/**
+ * modal.styles — Modal の pure style resolver（styleRefs conformance 対応で Modal.tsx から分離）。
+ *
+ * react-native を import しない純粋モジュールにすることで node テスト（tsx --test）から
+ * 直接実行できる。recipes/app/modal.recipe.json（melta-contracts の styleRefs）との
+ * 機械照合は scripts/lib/modal-conformance.test.ts が行う。
+ *
+ * - variant（confirmation/form/alert）は意味分類で style は 3 つとも共通（recipe と同じ）。
+ *   props には受けるが style 解決では使わない（API 対称性のため interface には残す）。
+ * - overlay の黒 50% は token 外の literal（recipe description 参照。web も bg-black/50）。
+ * - elevation.overlay は iOS shadow* + Android elevation の複合 token のため、
+ *   panelStyle 本体と分けて panelElevation で返す（Surface と同じ扱い）。
+ * - sizes はタブレット以上で効く maxWidth（モバイルは width 100% - overlay padding が先に効く）。
+ */
+
+import type { ElevationStyle, FontWeightValue, NativeTheme, ThemeMode } from "../theme";
+import type { SizeOf, VariantOf } from "../contracts/contract-types";
+
+export type ModalVariant = VariantOf<"modal">;
+export type ModalSize = SizeOf<"modal">;
+
+/** size → panel の maxWidth（modal.recipe sizes の literal と 1:1）。 */
+export const MODAL_MAX_WIDTH: Record<ModalSize, number> = {
+  small: 384,
+  medium: 512,
+  large: 768,
+};
+
+/** overlay の黒 50%（token 外 literal。recipe / web の bg-black/50 と同値）。 */
+// eslint-disable-next-line melta/no-raw-color -- overlay の黒 50% は契約上 token 外の literal（recipe description / web の bg-black/50 と同値）
+export const MODAL_OVERLAY_COLOR = "rgba(0,0,0,0.5)";
+
+export interface ModalStyleProps {
+  /** 意味分類（style は共通）。default "confirmation"。 */
+  variant?: ModalVariant;
+  /** panel の maxWidth 段階。default "medium"。 */
+  size?: ModalSize;
+}
+
+export interface ModalStyle {
+  overlayStyle: {
+    flex: 1;
+    backgroundColor: string;
+    justifyContent: "center";
+    alignItems: "center";
+    padding: number;
+  };
+  panelStyle: {
+    backgroundColor: string;
+    borderRadius: number;
+    padding: number;
+    width: "100%";
+    maxWidth: number;
+  };
+  /** iOS shadow* + Android elevation の複合値。panelStyle と並べて spread する。 */
+  panelElevation: ElevationStyle;
+  titleStyle: { fontSize: number; fontWeight: FontWeightValue; color: string };
+  bodyStyle: { marginTop: number };
+  footerStyle: {
+    flexDirection: "row";
+    justifyContent: "flex-end";
+    gap: number;
+    marginTop: number;
+  };
+}
+
+/**
+ * size / mode → Modal style の解決（modal.recipe styleRefs の 1:1 写像）。
+ * variant は意味分類のみで style に影響しない（recipe の 3 variant が同値）。
+ */
+export function resolveModalStyle(
+  theme: NativeTheme,
+  mode: ThemeMode,
+  { size = "medium" }: ModalStyleProps = {},
+): ModalStyle {
+  const semantic = theme.color.semantic[mode];
+  return {
+    overlayStyle: {
+      flex: 1,
+      backgroundColor: MODAL_OVERLAY_COLOR,
+      justifyContent: "center",
+      alignItems: "center",
+      padding: theme.spacing["4"],
+    },
+    panelStyle: {
+      backgroundColor: semantic["bg-surface"],
+      borderRadius: theme.radius.lg,
+      padding: theme.spacing["6"],
+      width: "100%",
+      maxWidth: MODAL_MAX_WIDTH[size],
+    },
+    panelElevation: theme.elevation.overlay,
+    titleStyle: {
+      fontSize: theme.typography.fontSize["2xl"].fontSize,
+      fontWeight: theme.typography.fontWeight.bold,
+      color: semantic["text-heading"],
+    },
+    bodyStyle: { marginTop: theme.spacing["2"] },
+    footerStyle: {
+      flexDirection: "row",
+      justifyContent: "flex-end",
+      gap: theme.spacing["3"],
+      marginTop: theme.spacing["6"],
+    },
+  };
+}

package/src/components/progress.styles.ts

@@ -0,0 +1,74 @@
+/**
+ * progress.styles — Progress の pure style resolver（styleRefs conformance 対応で Progress.tsx から分離）。
+ *
+ * react-native を import しない純粋モジュールにすることで node テスト（tsx --test）から
+ * 直接実行できる。recipes/app/progress.recipe.json（melta-contracts の styleRefs）との
+ * 機械照合は scripts/lib/progress-conformance.test.ts が行う。
+ *
+ * - track（高さ8 = web h-2）の中を fill が value%（determinate）または往復アニメ
+ *   （indeterminate variant）で埋める。fill の幅は実装（Progress.tsx）が value から算出する
+ *   （recipe は色と形のみ、recipe description）。
+ * - track の背景は semantic border-default → dark mode では dark 側から解決する。
+ *   fill は primary.500 / status.success.base（mode 非依存）。
+ */
+
+import type { NativeTheme, RadiusKey, ThemeMode } from "../theme";
+
+export type ProgressVariant = "primary" | "success" | "indeterminate";
+
+/** track / fill の高さ（recipe の literal 8 = web h-2 の写像。token では無い raw px）。 */
+export const PROGRESS_TRACK_HEIGHT = 8;
+
+/** indeterminate variant の fill 幅比率（track の 40%。往復アニメ / reduce motion 時の静止幅）。 */
+export const PROGRESS_INDETERMINATE_FILL_RATIO = 0.4;
+
+/** 角丸キー（token キー。全 variant 共通 radius.full）。 */
+export const PROGRESS_RADIUS = "full" as const satisfies RadiusKey;
+
+/** value の 0〜100 clamp（非有限は 0 に落とす）。determinate の幅・accessibilityValue.now の同源。 */
+export function clampProgressValue(value: number): number {
+  if (!Number.isFinite(value)) return 0;
+  return Math.min(100, Math.max(0, value));
+}
+
+/** slot 構成（progress.recipe 各 variant の trackStyle / fillStyle と 1:1）。 */
+export interface ProgressStyles {
+  trackStyle: {
+    backgroundColor: string;
+    borderRadius: number;
+    height: number;
+    overflow: "hidden";
+  };
+  fillStyle: {
+    backgroundColor: string;
+    borderRadius: number;
+    height: number;
+  };
+}
+
+/**
+ * variant → 全 slot の style 解決（progress.recipe styleRefs の 1:1 写像）。
+ * - track: semantic border-default（mode 依存）。
+ * - fill: success は status.success.base、primary / indeterminate は primary.500（mode 非依存）。
+ */
+export function resolveProgressStyles(
+  theme: NativeTheme,
+  mode: ThemeMode,
+  variant: ProgressVariant,
+): ProgressStyles {
+  const fill =
+    variant === "success" ? theme.color.status.success.base : theme.color.primary["500"];
+  return {
+    trackStyle: {
+      backgroundColor: theme.color.semantic[mode]["border-default"],
+      borderRadius: theme.radius[PROGRESS_RADIUS],
+      height: PROGRESS_TRACK_HEIGHT,
+      overflow: "hidden",
+    },
+    fillStyle: {
+      backgroundColor: fill,
+      borderRadius: theme.radius[PROGRESS_RADIUS],
+      height: PROGRESS_TRACK_HEIGHT,
+    },
+  };
+}

package/src/components/radio.styles.ts

@@ -0,0 +1,132 @@
+/**
+ * radio.styles — Radio（RadioGroup）の pure style resolver（styleRefs conformance 対応で
+ * Radio.tsx から分離）。
+ *
+ * react-native を import しない純粋モジュールにすることで node テスト（tsx --test）から
+ * 直接実行できる。recipes/app/radio.recipe.json（melta-contracts の styleRefs）との
+ * 機械照合は scripts/lib/radio-conformance.test.ts が行う。
+ *
+ * recipe の構造メモ: circleStyle/dotStyle/labelStyle/groupLabelStyle/optionGap は
+ * variant 非依存の共通部として vertical にのみ載っている（recipe description）。
+ * 実装ではこの共通部を variant に関わらず同値で返す（conformance が variant 間一致を照合）。
+ */
+
+import type { FontWeightValue, NativeTheme, ThemeMode } from "../theme";
+
+export type RadioVariant = "vertical" | "horizontal" | "card-style";
+
+/** recipe 由来の literal 値テーブル（token 化されていない数値。conformance が recipe と照合する）。 */
+export const RADIO_SPEC = {
+  circleSize: 20,
+  circleBorderWidth: 2,
+  dotSize: 10,
+  cardBorderWidth: 1,
+  disabledOpacity: 0.5,
+} as const;
+
+export interface RadioGroupResolved {
+  /** variant 別レイアウト（vertical/card-style は縦積み、horizontal は wrap する横並び）。 */
+  containerStyle: { flexDirection: "column" | "row"; flexWrap?: "wrap"; gap: number };
+  /** selected 時に circle 内へ表示する内側ドット。 */
+  dotStyle: { width: number; height: number; borderRadius: number; backgroundColor: string };
+  /** option label（recipe の labelStyle スロットと 1:1。実装は Text primitive の base/text-default で同値）。 */
+  labelStyle: { fontSize: number; color: string };
+  /** groupLabel = fieldset の legend 相当（FORM_FIELDSET_LEGEND_REQUIRED で必須）。 */
+  groupLabelStyle: { fontSize: number; fontWeight: FontWeightValue; color: string; marginBottom: number };
+  /** 各 option 内の circle と label の間隔。 */
+  optionGap: number;
+  /** states.error のエラーメッセージ（danger.text-light は recipe 指定どおり mode 非依存）。 */
+  errorTextStyle: { fontSize: number; color: string; marginTop: number };
+  /** card-style のみ: 各 option を包む枠付きカード。 */
+  cardStyle?: { borderWidth: number; borderColor: string; borderRadius: number; padding: number };
+  /** card-style のみ: selected 時にカードへ重ねる差分。 */
+  cardSelectedStyle?: { borderColor: string; backgroundColor: string };
+}
+
+/**
+ * variant → グループ全体の style 解決（radio.recipe styleRefs の 1:1 写像）。
+ * circle は selected/error の state 差分を持つため resolveRadioCircleStyle に分離。
+ */
+export function resolveRadioGroupStyle(
+  theme: NativeTheme,
+  mode: ThemeMode,
+  variant: RadioVariant,
+): RadioGroupResolved {
+  const sem = theme.color.semantic[mode];
+  const containerStyle: RadioGroupResolved["containerStyle"] =
+    variant === "horizontal"
+      ? { flexDirection: "row", flexWrap: "wrap", gap: theme.spacing["4"] }
+      : { flexDirection: "column", gap: theme.spacing["3"] };
+  return {
+    containerStyle,
+    dotStyle: {
+      width: RADIO_SPEC.dotSize,
+      height: RADIO_SPEC.dotSize,
+      borderRadius: theme.radius.full,
+      backgroundColor: theme.color.primary["500"],
+    },
+    labelStyle: {
+      fontSize: theme.typography.fontSize.base.fontSize,
+      color: sem["text-default"],
+    },
+    groupLabelStyle: {
+      fontSize: theme.typography.fontSize.sm.fontSize,
+      fontWeight: theme.typography.fontWeight.medium,
+      color: sem["text-heading"],
+      marginBottom: theme.spacing["3"],
+    },
+    optionGap: theme.spacing["2"],
+    errorTextStyle: {
+      fontSize: theme.typography.fontSize.xs.fontSize,
+      color: theme.color.status.danger.textLight,
+      marginTop: theme.spacing["2"],
+    },
+    ...(variant === "card-style"
+      ? {
+          cardStyle: {
+            borderWidth: RADIO_SPEC.cardBorderWidth,
+            borderColor: sem["border-default"],
+            borderRadius: theme.radius.md,
+            padding: theme.spacing["4"],
+          },
+          cardSelectedStyle: {
+            borderColor: theme.color.primary["500"],
+            backgroundColor: theme.color.primary["50"],
+          },
+        }
+      : null),
+  };
+}
+
+/**
+ * 状態 → radioCircle の style 解決（variant 非依存の共通部 + states.selected / states.error 差分）。
+ * error は selected より優先（契約 stateSpecs: 選択済みでもエラーなら赤枠）。
+ */
+export function resolveRadioCircleStyle(
+  theme: NativeTheme,
+  mode: ThemeMode,
+  { selected, error = false }: { selected: boolean; error?: boolean },
+): {
+  width: number;
+  height: number;
+  borderWidth: number;
+  borderColor: string;
+  borderRadius: number;
+  alignItems: "center";
+  justifyContent: "center";
+} {
+  const sem = theme.color.semantic[mode];
+  return {
+    width: RADIO_SPEC.circleSize,
+    height: RADIO_SPEC.circleSize,
+    borderWidth: RADIO_SPEC.circleBorderWidth,
+    borderColor: error
+      ? theme.color.status.danger.base
+      : selected
+        ? theme.color.primary["500"]
+        : sem["border-strong"],
+    borderRadius: theme.radius.full,
+    alignItems: "center",
+    justifyContent: "center",
+  };
+}

package/src/components/screen.styles.ts

@@ -0,0 +1,44 @@
+/**
+ * screen.styles — Screen の pure style resolver（styleRefs conformance 対応で Screen.tsx から分離）。
+ *
+ * react-native を import しない純粋モジュールにすることで node テスト（tsx --test）から
+ * 直接実行できる。recipes/app/screen.recipe.json（melta-contracts の styleRefs）との
+ * 機械照合は scripts/lib/screen-conformance.test.ts が行う。
+ */
+
+import type { NativeTheme, SpacingKey, ThemeMode } from "../theme";
+
+/** content の padding（spacing token キー限定 | "none"）。default "4"（recipe に焼いてある）。 */
+export type ScreenPadding = SpacingKey | "none";
+
+export interface ScreenStyleProps {
+  /** fixed = flex:1 の View / scroll = ScrollView contentContainerStyle。 */
+  variant: "fixed" | "scroll";
+  /** content の padding。default "4"。 */
+  padding?: ScreenPadding;
+}
+
+export interface ScreenStyle {
+  safeAreaStyle: { flex: 1; backgroundColor: string };
+  contentStyle: { flex?: 1; padding?: number };
+}
+
+/**
+ * variant / padding → 画面骨格 style の解決（screen.recipe styleRefs の 1:1 写像）。
+ * - safeAreaStyle は両 variant 共通（flex:1 + bg-page。mode で semantic 解決）。
+ * - contentStyle は fixed のみ flex:1 を持つ（scroll は ScrollView が伸びるため不要）。
+ * - padding="none" は padding を出力しない。
+ */
+export function resolveScreenStyle(
+  theme: NativeTheme,
+  mode: ThemeMode,
+  { variant, padding = "4" }: ScreenStyleProps,
+): ScreenStyle {
+  return {
+    safeAreaStyle: { flex: 1, backgroundColor: theme.color.semantic[mode]["bg-page"] },
+    contentStyle: {
+      ...(variant === "fixed" ? { flex: 1 as const } : null),
+      ...(padding !== "none" ? { padding: theme.spacing[padding] } : null),
+    },
+  };
+}