melta-app 0.1.0

package/src/contracts/contract-types.ts

@@ -0,0 +1,199 @@
+// ⚠️ 自動生成ファイル — 手で編集しないこと。
+// 生成元: scripts/generate-contract-types.ts（入力 melta-contracts/components/*.contract.json）
+// 各 component の variant/size/state を contract から codegen した型 + 実行時メタ(__contract 用)。
+
+/** 各 contract メタの shape（§2 A-3: 生成結果が shape から逸脱したら型で検知する）。 */
+export interface ContractShape {
+  id: string;
+  version: string;
+  variants: readonly string[];
+  sizes: readonly string[];
+  states: readonly string[];
+}
+
+export const CONTRACTS = {
+  text: {
+    id: "text",
+    version: "0.1.0",
+    variants: ["xs", "sm", "base", "lg", "xl", "2xl", "3xl"],
+    sizes: [],
+    states: ["default"],
+  },
+  button: {
+    id: "button",
+    version: "2.0.0",
+    variants: ["contained", "outlined", "brand-outline", "neutral", "lighted", "danger", "subtle"],
+    sizes: ["small", "medium", "large"],
+    states: ["default", "hover", "focus", "disabled", "loading"],
+  },
+  tag: {
+    id: "tag",
+    version: "2.0.0",
+    variants: ["basic", "removable", "filter-chip"],
+    sizes: [],
+    states: ["default", "active", "inactive", "hover", "focus"],
+  },
+  card: {
+    id: "card",
+    version: "2.0.0",
+    variants: ["basic", "media", "action", "link"],
+    sizes: [],
+    states: ["default", "hover", "focus-within"],
+  },
+  image: {
+    id: "image",
+    version: "0.1.0",
+    variants: ["default"],
+    sizes: [],
+    states: ["default", "error"],
+  },
+  surface: {
+    id: "surface",
+    version: "0.1.0",
+    variants: ["default"],
+    sizes: [],
+    states: ["default"],
+  },
+  skeleton: {
+    id: "skeleton",
+    version: "2.0.0",
+    variants: ["text", "card", "circle"],
+    sizes: [],
+    states: ["default", "loading", "loaded"],
+  },
+  emptyState: {
+    id: "empty-state",
+    version: "0.1.0",
+    variants: ["default"],
+    sizes: [],
+    states: ["default"],
+  },
+  metric: {
+    id: "metric",
+    version: "0.1.0",
+    variants: ["default"],
+    sizes: ["sm", "md", "lg"],
+    states: ["default"],
+  },
+  stack: {
+    id: "stack",
+    version: "0.1.0",
+    variants: ["default"],
+    sizes: [],
+    states: ["default"],
+  },
+  row: {
+    id: "row",
+    version: "0.1.0",
+    variants: ["default"],
+    sizes: [],
+    states: ["default"],
+  },
+  screen: {
+    id: "screen",
+    version: "0.1.0",
+    variants: ["fixed", "scroll"],
+    sizes: [],
+    states: ["default"],
+  },
+  header: {
+    id: "header",
+    version: "0.1.0",
+    variants: ["default"],
+    sizes: [],
+    states: ["default"],
+  },
+  icon: {
+    id: "icon",
+    version: "0.1.0",
+    variants: ["default"],
+    sizes: ["sm", "md", "lg"],
+    states: ["default"],
+  },
+  avatar: {
+    id: "avatar",
+    version: "2.0.0",
+    variants: ["image", "initials", "group"],
+    sizes: ["small", "medium", "large"],
+    states: ["default", "online", "away", "offline"],
+  },
+  textfield: {
+    id: "textfield",
+    version: "2.0.0",
+    variants: ["default", "error", "disabled", "success"],
+    sizes: ["small", "medium", "large"],
+    states: ["default", "hover", "focus", "error", "disabled", "success"],
+  },
+  toggle: {
+    id: "toggle",
+    version: "2.0.0",
+    variants: ["off", "on"],
+    sizes: ["medium", "large"],
+    states: ["off", "on", "hover", "focus", "disabled"],
+  },
+  checkbox: {
+    id: "checkbox",
+    version: "2.0.0",
+    variants: ["default", "disabled", "indeterminate"],
+    sizes: [],
+    states: ["default", "checked", "unchecked", "indeterminate", "disabled", "error", "focus"],
+  },
+  radio: {
+    id: "radio",
+    version: "2.0.0",
+    variants: ["vertical", "horizontal", "card-style"],
+    sizes: [],
+    states: ["default", "selected", "unselected", "disabled", "error", "focus"],
+  },
+  alert: {
+    id: "alert",
+    version: "2.0.0",
+    variants: ["info", "success", "warning", "error"],
+    sizes: [],
+    states: ["default", "dismissing"],
+  },
+  toast: {
+    id: "toast",
+    version: "2.0.0",
+    variants: ["success", "error", "warning", "info"],
+    sizes: [],
+    states: ["default", "entering", "visible", "dismissing", "hover"],
+  },
+  progress: {
+    id: "progress",
+    version: "2.0.0",
+    variants: ["primary", "success", "indeterminate"],
+    sizes: [],
+    states: ["default", "determinate", "indeterminate", "complete"],
+  },
+  modal: {
+    id: "modal",
+    version: "2.0.0",
+    variants: ["confirmation", "form", "alert"],
+    sizes: ["small", "medium", "large"],
+    states: ["default", "open", "closing"],
+  },
+  actionSheet: {
+    id: "action-sheet",
+    version: "0.1.0",
+    variants: ["default"],
+    sizes: [],
+    states: ["default"],
+  },
+  bottomSheet: {
+    id: "bottom-sheet",
+    version: "0.1.0",
+    variants: ["default"],
+    sizes: [],
+    states: ["default"],
+  },
+} as const satisfies Record<string, ContractShape>;
+
+export type ContractId = keyof typeof CONTRACTS;
+
+/** contract の variant キー union（例: VariantOf<"text"> = "xs" | ... | "3xl"）。空なら never。 */
+export type VariantOf<K extends ContractId> = (typeof CONTRACTS)[K]["variants"][number];
+/** contract の size キー union（空なら never）。 */
+export type SizeOf<K extends ContractId> = (typeof CONTRACTS)[K]["sizes"][number];
+/** contract の state キー union。 */
+export type StateOf<K extends ContractId> = (typeof CONTRACTS)[K]["states"][number];

package/src/icons/Icon.tsx

@@ -0,0 +1,65 @@
+/**
+ * Icon — 統一アイコン primitive（Charcoal Icons、単色 tint）。
+ * contract: icon（app 先行定義、melta-contracts）。dogfood 不足-2（絵文字・生 Text 代用）の解消。
+ *
+ * ⚠️ 依存境界: このファイルだけが react-native-svg を import する。melta-app 本体エントリ
+ * （"melta-app"）は依存ゼロを維持し、Icon は subpath エントリ "melta-app/icons" からだけ
+ * export される（optional peerDependency。利用者は `npx expo install react-native-svg` が必要）。
+ *
+ * - name は glyphs.ts（assets/icons/*.svg からの codegen、commit 済み配布）のキー。
+ * - color は semantic token キー限定（default "text-default"）、size は contract sizes（sm/md/lg）。
+ * - a11y: 意味を持つ場合は accessibilityLabel を渡す。無指定は装飾扱いで a11y ツリーから除外
+ *   （contract a11y required の両ケース）。
+ * - 決定ロジックは pure resolver（icon.styles.ts）に分離 — recipe との機械照合対象。
+ */
+
+import { useMemo } from "react";
+import Svg, { Path } from "react-native-svg";
+import { useTheme } from "../theme";
+import type { SemanticColors } from "../theme";
+import { CONTRACTS, type SizeOf } from "../contracts/contract-types";
+import { resolveIconStyle, type IconStyle } from "./icon.styles";
+import { GLYPHS, type IconName } from "./glyphs";
+
+interface IconProps {
+  /** グリフ名（glyphs.ts のキー。例 "close" / "share-ios"）。 */
+  name: IconName;
+  /** サイズ（contract sizes）。default "md"（20px）。 */
+  size?: SizeOf<"icon">;
+  /** 色（semantic token キーのみ）。default "text-default"。 */
+  color?: keyof SemanticColors;
+  /** 意味を持つ icon は必須。省略時は装飾扱い（a11y ツリーから除外）。 */
+  accessibilityLabel?: string;
+  testID?: string;
+}
+
+export function Icon({ name, size = "md", color = "text-default", accessibilityLabel, testID }: IconProps) {
+  const { theme, mode } = useTheme();
+
+  const resolved = useMemo<IconStyle>(
+    () => resolveIconStyle(theme, mode, size, color),
+    [theme, mode, size, color],
+  );
+  const glyph = GLYPHS[name];
+  const decorative = accessibilityLabel == null;
+
+  return (
+    <Svg
+      width={resolved.width}
+      height={resolved.height}
+      viewBox={glyph.viewBox}
+      accessible={!decorative}
+      accessibilityRole="image"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityElementsHidden={decorative}
+      importantForAccessibility={decorative ? "no-hide-descendants" : "yes"}
+      testID={testID}
+    >
+      {glyph.paths.map((p, i) => (
+        <Path key={i} d={p.d} fillRule={p.fillRule} fill={resolved.color} />
+      ))}
+    </Svg>
+  );
+}
+
+Icon.__contract = CONTRACTS.icon;

package/src/icons/glyphs.ts

@@ -0,0 +1,54 @@
+// ⚠️ 自動生成ファイル — 手で編集しないこと。
+// 生成元: scripts/generate-icons.ts（入力 assets/icons/*.svg = Charcoal Icons, Apache-2.0）
+// 帰属表示は THIRD_PARTY_LICENSES.md を参照。
+
+export interface Glyph {
+  viewBox: string;
+  paths: readonly { d: string; fillRule?: "evenodd" }[];
+}
+
+const GLYPHS_SOURCE = {
+  "add": { viewBox: "0 0 24 24", paths: [{ d: "M14 10h4a2 2 0 110 4h-4v4a2 2 0 11-4 0v-4H6a2 2 0 110-4h4V6a2 2 0 114 0v4z" }] },
+  "back": { viewBox: "0 0 16 16", paths: [{ d: "M9.961 11.043a1 1 0 01-1.414 1.414L4.09 8l4.457-4.457a1 1 0 011.414 1.414L6.918 8l3.043 3.043z" }] },
+  "calendar": { viewBox: "0 0 24 24", paths: [{ d: "M8 3a1 1 0 00-2 0v1.126C4.275 4.57 3 6.136 3 8v10a4 4 0 004 4h10a4 4 0 004-4V8a4.002 4.002 0 00-3-3.874V3a1 1 0 10-2 0v1H8V3zm-3 7v8a2 2 0 002 2h10a2 2 0 002-2v-8H5z", fillRule: "evenodd" as const }] },
+  "camera": { viewBox: "0 0 24 24", paths: [{ d: "M8.5 13.5a3.5 3.5 0 117 0 3.5 3.5 0 01-7 0z" }, { d: "M9.295 3.557A2 2 0 0110.68 3h2.742a2 2 0 011.414.586L17.25 6H20a2 2 0 012 2v11a2 2 0 01-2 2H4a2 2 0 01-2-2V8a2 2 0 012-2h2.75l2.545-2.443zM12 8a5.5 5.5 0 100 11 5.5 5.5 0 000-11z", fillRule: "evenodd" as const }] },
+  "check": { viewBox: "0 0 24 24", paths: [{ d: "M15.848 7.449a2 2 0 012.804 2.853l-8.664 8.514-4.402-4.402a2 2 0 112.828-2.828l1.598 1.598 5.836-5.735z" }] },
+  "close": { viewBox: "0 0 24 24", paths: [{ d: "M8.414 5.586a2 2 0 10-2.828 2.828L9.172 12l-3.586 3.586a2 2 0 102.828 2.828L12 14.828l3.586 3.586a2 2 0 102.828-2.828L14.828 12l3.586-3.586a2 2 0 10-2.828-2.828L12 9.172 8.414 5.586z" }] },
+  "comment": { viewBox: "0 0 16 16", paths: [{ d: "M5.4 13.409l-2.64.377.333-2.332a6 6 0 112.306 1.955z" }] },
+  "copy": { viewBox: "0 0 24 24", paths: [{ d: "M3 7a1 1 0 011 1v10a2 2 0 002 2h11a1 1 0 110 2H6a4 4 0 01-4-4V8a1 1 0 011-1z" }, { d: "M19 2a3 3 0 013 3v10a3 3 0 01-3 3H9a3 3 0 01-3-3V5a3 3 0 013-3h10zM9 4a1 1 0 00-1 1v10a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1H9z", fillRule: "evenodd" as const }] },
+  "discovery": { viewBox: "0 0 24 24", paths: [{ d: "M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10zM6 18l4-8 8-4-4 8-8 4zm6-5a1 1 0 100-2 1 1 0 000 2z", fillRule: "evenodd" as const }] },
+  "down": { viewBox: "0 0 24 24", paths: [{ d: "M16.125 12V5a1 1 0 00-1-1h-6a1 1 0 00-1 1v7H4.539c-.89 0-1.337 1.077-.707 1.707L12.125 22l8.194-8.297c.623-.632.176-1.703-.712-1.703h-3.482z", fillRule: "evenodd" as const }] },
+  "edit": { viewBox: "0 0 32 32", paths: [{ d: "M7.26 23.537l1.12-5.6 7.955-7.955 5.657 5.657 1.768-1.768-5.657-5.657 2.121-2.121a2 2 0 012.828 0l2.829 2.828a2 2 0 010 2.829L14.037 23.594l-5.6 1.12a1 1 0 01-1.177-1.177z", fillRule: "evenodd" as const }] },
+  "error": { viewBox: "0 0 24 24", paths: [{ d: "M12 4a2 2 0 00-2 2v6.5a2 2 0 104 0V6a2 2 0 00-2-2zm2.25 13.75a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z", fillRule: "evenodd" as const }] },
+  "filter": { viewBox: "0 0 24 24", paths: [{ d: "M10.5 13.468L3.574 6.4C2.335 5.133 3.232 3 5.005 3h13.99c1.773 0 2.67 2.133 1.43 3.4L13.5 13.467V19a3 3 0 01-3.002 3v-8.532z" }] },
+  "home": { viewBox: "0 0 24 24", paths: [{ d: "M9 19a1 1 0 01-1 1H4a1 1 0 01-1-1v-7.586a1 1 0 01.293-.707l8-8a1 1 0 011.414 0l8 8a1 1 0 01.293.707V19a1 1 0 01-1 1h-4a1 1 0 01-1-1v-3.5a3 3 0 10-6 0V19z", fillRule: "evenodd" as const }] },
+  "image": { viewBox: "0 0 24 24", paths: [{ d: "M6 4a3 3 0 00-3 3v10a3 3 0 003 3h12a3 3 0 003-3V7a3 3 0 00-3-3H6zm13 8.5l-4 2-6-3-4 2V17a1 1 0 001 1h12a1 1 0 001-1v-4.5zM18 9a2 2 0 11-4 0 2 2 0 014 0z", fillRule: "evenodd" as const }] },
+  "info": { viewBox: "0 0 24 24", paths: [{ d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2.5 9a1 1 0 011-1H12a1 1 0 011 1v5h1a1 1 0 110 2h-4a1 1 0 110-2h1v-4h-.5a1 1 0 01-1-1zM12 5a1.5 1.5 0 100 3 1.5 1.5 0 000-3z", fillRule: "evenodd" as const }] },
+  "like-off": { viewBox: "0 0 24 24", paths: [{ d: "M13.087 21.021C18.792 17.831 22 13.81 22 8.91A5.91 5.91 0 0016.09 3c-1.529 0-2.976.747-4.09 1.834C10.886 3.747 9.439 3 7.91 3A5.91 5.91 0 002 8.91c0 4.9 3.208 8.92 8.913 12.111a2.227 2.227 0 002.174 0zM16.09 5A3.91 3.91 0 0120 8.91c0 3.86-2.482 7.342-7.889 10.366a.229.229 0 01-.222 0C6.482 16.252 4 12.77 4 8.91A3.91 3.91 0 017.91 5c1.115 0 2.38.723 3.287 1.943L12 8.021l.803-1.078C13.71 5.723 14.975 5 16.09 5z", fillRule: "evenodd" as const }] },
+  "like-on": { viewBox: "0 0 24 24", paths: [{ d: "M2 9.023A6.023 6.023 0 018.023 3c1.486 0 2.88.68 3.977 1.677C13.096 3.68 14.49 3 15.977 3A6.023 6.023 0 0122 9.023c0 4.908-3.22 8.893-8.807 12.018a2.443 2.443 0 01-2.386 0C5.22 17.916 2 13.931 2 9.023z", fillRule: "evenodd" as const }] },
+  "link": { viewBox: "0 0 24 24", paths: [{ d: "M14.031 3.367a4.666 4.666 0 116.6 6.598l-4.243 4.243a4.665 4.665 0 01-2.163 1.226h-.037l-.193.04-.107.02-.23.034h-.113c-.05 0-.097.005-.142.01a1.296 1.296 0 01-.095.01l-.2.023h-.253a4.616 4.616 0 01-.497-.047 5.356 5.356 0 01-.403-.083l-.197-.053a2.64 2.64 0 01-.213-.07l-.078-.029c-.045-.016-.09-.032-.135-.051a4.71 4.71 0 00-.07-.03 4.627 4.627 0 01-1.473-.994 1.333 1.333 0 010-1.879 1.366 1.366 0 011.873 0 2 2 0 002.826 0l1.093-1.086.027-.03 3.126-3.123a2 2 0 00-2.83-2.83l-2.51 2.507a.333.333 0 01-.362.073 5.6 5.6 0 00-2.13-.417h-.123a.333.333 0 01-.243-.57l3.495-3.492z" }, { d: "M13.418 9.166c.284.18.547.391.784.63.27.27.41.644.386 1.026-.023.32-.16.62-.386.847a1.366 1.366 0 01-1.873 0 2 2 0 00-2.827 0L5.246 15.92a2 2 0 002.83 2.83l2.516-2.52a.333.333 0 01.363-.073 5.612 5.612 0 002.133.413h.134a.333.333 0 01.236.57l-3.5 3.5A4.636 4.636 0 016.664 22a4.666 4.666 0 01-3.3-7.962l4.24-4.242a4.666 4.666 0 015.816-.63z" }] },
+  "menu": { viewBox: "0 0 24 24", paths: [{ d: "M4 7a1 1 0 011-1h14a1 1 0 110 2H5a1 1 0 01-1-1zM4 12a1 1 0 011-1h14a1 1 0 110 2H5a1 1 0 01-1-1zM5 16a1 1 0 100 2h14a1 1 0 100-2H5z" }] },
+  "more": { viewBox: "0 0 16 16", paths: [{ d: "M6.043 4.957a1 1 0 011.414-1.414L11.914 8l-4.457 4.457a1 1 0 01-1.414-1.414L9.086 8 6.043 4.957z" }] },
+  "next": { viewBox: "0 0 24 24", paths: [{ d: "M8.086 16.586a2 2 0 102.828 2.828L18.328 12l-7.414-7.414a2 2 0 10-2.828 2.828L12.672 12l-4.586 4.586z" }] },
+  "notification": { viewBox: "0 0 24 24", paths: [{ d: "M18 9.25V12l1.561 4.684A1 1 0 0118.613 18H5.387a1 1 0 01-.948-1.316L6 12V9.25C6 5.798 8.686 3 12 3s6 2.798 6 6.25zM12 21a3.001 3.001 0 01-2.83-2h5.66A3.001 3.001 0 0112 21z" }] },
+  "prev": { viewBox: "0 0 24 24", paths: [{ d: "M15.913 16.586a2 2 0 01-2.829 2.828L5.67 12l7.414-7.414a2 2 0 012.829 2.828L11.327 12l4.586 4.586z" }] },
+  "question": { viewBox: "0 0 24 24", paths: [{ d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.179 15.254a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0zm.058-3.98c.01-.02.02-.04.03-.05.272-.4.651-.732 1.036-1.069.886-.777 1.8-1.579 1.494-3.281-.29-1.69-1.64-3.08-3.33-3.33-2.06-.3-3.88.97-4.43 2.79-.17.58.27 1.17.87 1.17h.2c.41 0 .74-.29.88-.65.32-.89 1.26-1.5 2.3-1.28.96.2 1.66 1.15 1.57 2.13-.068.763-.613 1.186-1.219 1.654-.377.293-.778.603-1.101 1.026l-.01-.01a.326.326 0 00-.046.066 1.302 1.302 0 01-.084.129 2.261 2.261 0 00-.27.515.156.156 0 01-.025.05c-.01.015-.02.03-.025.05-.01.01-.01.02-.01.03-.12.36-.2.79-.2 1.3h2.01a2.11 2.11 0 01.18-.89c.01-.04.02-.08.04-.11.04-.08.09-.16.14-.24z", fillRule: "evenodd" as const }] },
+  "reload": { viewBox: "0 0 24 24", paths: [{ d: "M12 7a6 6 0 106 6 1 1 0 112 0 8 8 0 11-8-8h1.42l-1.7-2.125a1 1 0 111.56-1.25l3 3.75a1 1 0 010 1.25l-3 3.75a1 1 0 01-1.56-1.25L13.42 7H12z" }] },
+  "search": { viewBox: "0 0 24 24", paths: [{ d: "M15.461 10.615c0-1.334-.474-2.475-1.422-3.423-.948-.949-2.09-1.423-3.424-1.423s-2.475.474-3.423 1.423c-.949.948-1.423 2.09-1.423 3.423 0 1.335.474 2.476 1.423 3.424.948.948 2.09 1.422 3.423 1.422 1.335 0 2.476-.474 3.424-1.422s1.422-2.09 1.422-3.424zm5.539 9c0 .375-.137.7-.411.974a1.33 1.33 0 01-.974.411c-.389 0-.714-.137-.973-.411l-3.71-3.7a7.407 7.407 0 01-4.317 1.342c-1.03 0-2.017-.2-2.958-.6a7.613 7.613 0 01-2.434-1.623A7.614 7.614 0 013.6 13.574c-.4-.941-.6-1.927-.6-2.959 0-1.03.2-2.017.6-2.958.4-.941.941-1.753 1.623-2.434A7.614 7.614 0 017.657 3.6c.941-.4 1.927-.6 2.958-.6 1.032 0 2.018.2 2.959.6.941.4 1.752.941 2.434 1.623a7.613 7.613 0 011.622 2.434c.4.941.6 1.927.6 2.958a7.407 7.407 0 01-1.34 4.316l3.71 3.71c.267.268.4.592.4.974z", fillRule: "evenodd" as const }] },
+  "send": { viewBox: "0 0 24 24", paths: [{ d: "M3 13.5h5a1.5 1.5 0 000-3H3V3.695a1 1 0 011.466-.885l15.853 8.343a1 1 0 010 1.77L4.466 21.267A1 1 0 013 20.382V13.5z", fillRule: "evenodd" as const }] },
+  "settings": { viewBox: "0 0 24 24", paths: [{ d: "M19.5 12c0 .61.224 1.21.704 1.586l1.336 1.044c.19.15.24.42.12.64l-2 3.46c-.12.22-.38.31-.61.22l-1.589-.638c-.56-.225-1.186-.13-1.705.176-.528.31-.94.814-1.026 1.42l-.24 1.672c-.03.24-.24.42-.49.42h-4c-.25 0-.46-.18-.49-.42l-.24-1.68c-.087-.6-.495-1.098-1.02-1.404-.524-.305-1.156-.407-1.718-.181l-1.582.635c-.22.08-.49 0-.61-.22l-2-3.46a.505.505 0 01.12-.64l1.335-1.044c.48-.376.705-.976.705-1.586 0-.61-.224-1.21-.705-1.586L2.46 9.37a.493.493 0 01-.12-.64l2-3.46c.12-.22.38-.31.61-.22l1.588.638c.56.225 1.186.13 1.706-.176.528-.31.94-.814 1.026-1.42l.24-1.672c.03-.24.24-.42.49-.42h4c.25 0 .46.18.49.42l.24 1.68c.087.6.494 1.098 1.02 1.404.524.306 1.155.407 1.718.181l1.582-.635c.22-.08.49 0 .61.22l2 3.46c.12.22.07.49-.12.64l-1.336 1.044c-.48.376-.704.976-.704 1.586zm-11 0c0 1.93 1.57 3.5 3.5 3.5s3.5-1.57 3.5-3.5-1.57-3.5-3.5-3.5-3.5 1.57-3.5 3.5z", fillRule: "evenodd" as const }] },
+  "share-android": { viewBox: "0 0 24 24", paths: [{ d: "M13 6.375a2.75 2.75 0 111.03 2.146L8.72 11.586a2.773 2.773 0 010 .828l5.312 3.065a2.75 2.75 0 11-1 1.732l-5.312-3.065a2.75 2.75 0 110-4.293l5.312-3.064A2.773 2.773 0 0113 6.375z" }] },
+  "share-ios": { viewBox: "0 0 24 24", paths: [{ d: "M12 2.586L7.293 7.293a1 1 0 001.414 1.414L11 6.414V13a1 1 0 102 0V6.414l2.293 2.293a1 1 0 101.414-1.414L12 2.586z" }, { d: "M6 18v-6H4v6a3 3 0 003 3h10a3 3 0 003-3v-6h-2v6a1 1 0 01-1 1H7a1 1 0 01-1-1z" }] },
+  "trash": { viewBox: "0 0 24 24", paths: [{ d: "M9 4h6v1h2.5a1 1 0 110 2h-11a1 1 0 010-2H9V4zM7.01 8a1 1 0 00-1 1.01l.105 10a1 1 0 001 .99H17a1 1 0 001-1V9a1 1 0 00-1-1H7.01z" }] },
+  "up": { viewBox: "0 0 24 24", paths: [{ d: "M16 12v7a1 1 0 01-1 1H9a1 1 0 01-1-1v-7H4.414c-.89 0-1.337-1.077-.707-1.707L12 2l8.194 8.297c.623.632.176 1.703-.712 1.703H16z", fillRule: "evenodd" as const }] },
+  "user": { viewBox: "0 0 32 32", paths: [{ d: "M21.39 11.357c0 2.959-2.386 5.357-5.328 5.357-2.941 0-5.326-2.398-5.326-5.357S13.12 6 16.062 6c2.942 0 5.327 2.398 5.327 5.357zm-5.328 5.357c4.315 0 7.813 3.402 7.813 7.598v.26c0 .788-.636 1.428-1.42 1.428H9.67c-.784 0-1.42-.64-1.42-1.429v-.26c0-4.195 3.498-7.597 7.813-7.597z", fillRule: "evenodd" as const }] },
+  "users": { viewBox: "0 0 24 24", paths: [{ d: "M7.507 10.5a3.75 3.75 0 10-.014 0C4.459 10.504 2 12.883 2 15.818 2 16.471 2.53 17 3.182 17h7.451a5.608 5.608 0 012.21-2.445c-.585-2.325-2.752-4.052-5.336-4.055zm8.993 4a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5zm0 0c-3.038 0-5.5 2.381-5.5 5.318V20a1 1 0 001 1h9a1 1 0 001-1v-.182c0-2.937-2.462-5.318-5.5-5.318z", fillRule: "evenodd" as const }] },
+  "warning": { viewBox: "0 0 24 24", paths: [{ d: "M4.47 21h15.06c1.54 0 2.5-1.67 1.73-3L13.73 4.99c-.77-1.33-2.69-1.33-3.46 0L2.74 18c-.77 1.33.19 3 1.73 3zM11 9a1 1 0 112 0v4a1 1 0 11-2 0V9zm1 7a1.25 1.25 0 100 2.5 1.25 1.25 0 000-2.5z", fillRule: "evenodd" as const }] },
+} as const;
+
+export type IconName = keyof typeof GLYPHS_SOURCE;
+
+export const GLYPHS: Record<IconName, Glyph> = GLYPHS_SOURCE;
+
+/** 利用可能な icon name 一覧（catalog / ドキュメント生成用）。 */
+export const ICON_NAMES = Object.keys(GLYPHS) as IconName[];

package/src/icons/icon.styles.ts

@@ -0,0 +1,37 @@
+/**
+ * icon.styles — Icon の pure style resolver（styleRefs conformance 対応で Icon.tsx から分離）。
+ *
+ * react-native を import しない純粋モジュールにすることで node テスト（tsx --test）から
+ * 直接実行できる。recipes/app/icon.recipe.json（melta-contracts の styleRefs）との
+ * 機械照合は scripts/lib/icon-conformance.test.ts が行う。
+ */
+
+import type { NativeTheme, SemanticColors, ThemeMode } from "../theme";
+
+export type IconSize = "sm" | "md" | "lg";
+
+/** サイズ軸（contract sizes の height と 1:1。width=height の正方形）。 */
+const SIZE_TABLE = { sm: 16, md: 20, lg: 24 } as const;
+
+export interface IconStyle {
+  width: number;
+  height: number;
+  color: string;
+}
+
+/**
+ * size / color → Icon style の解決（icon.recipe styleRefs の 1:1 写像）。
+ * デフォルト（size=md / color=text-default）は recipe の default variant と一致させている。
+ */
+export function resolveIconStyle(
+  theme: NativeTheme,
+  mode: ThemeMode,
+  size: IconSize = "md",
+  color: keyof SemanticColors = "text-default",
+): IconStyle {
+  return {
+    width: SIZE_TABLE[size],
+    height: SIZE_TABLE[size],
+    color: theme.color.semantic[mode][color],
+  };
+}

package/src/icons/index.ts

@@ -0,0 +1,12 @@
+/**
+ * melta-app/icons — Icon の subpath エントリ。
+ *
+ * 本体エントリ（"melta-app"）から分離している理由: Icon だけが react-native-svg
+ * （optional peerDependency）に依存するため。Metro は import を静的に解決するので、
+ * 本体エントリに Icon を含めると react-native-svg 未 install の利用者がバンドルできなくなる。
+ * この subpath を import する利用者だけが react-native-svg を要求される。
+ */
+
+export { Icon } from "./Icon";
+export { GLYPHS, ICON_NAMES } from "./glyphs";
+export type { IconName, Glyph } from "./glyphs";

package/src/index.ts

@@ -0,0 +1,24 @@
+/**
+ * melta-app — melta デザインシステムの React Native 実装（公開エントリ）。
+ *
+ * 契約（npm: melta-contracts）を SSOT とし、theme（トークンの RN 正規化）/
+ * primitives / components がその契約を満たす。契約との整合は conformance テストが機械照合する。
+ * アプリ本体ではなく UI kit。使い方はルートを ThemeProvider で包み、コンポーネントを import する。
+ */
+
+// theme: トークン（melta-contracts/tokens.json 由来、codegen 済み）+ Provider + helpers
+export * from "./theme";
+
+// primitives / components（契約 appStatus=implemented の集合と一致。conformance が担保）
+export * from "./primitives";
+export * from "./components";
+
+// 契約メタ（variant/size/state の実行時参照 + 型。__contract 照合にも使う）
+export {
+  CONTRACTS,
+  type ContractId,
+  type ContractShape,
+  type VariantOf,
+  type SizeOf,
+  type StateOf,
+} from "./contracts/contract-types";

package/src/primitives/Button.tsx

@@ -0,0 +1,114 @@
+/**
+ * Button — CTA / セカンダリ / アイコンボタン（設計書 §1, §4 C-3）。contract: button。
+ *
+ * - variant 7（contained/outlined/brand-outline/neutral/lighted/danger/subtle）× size 3（small/medium/large）。
+ * - iconOnly は discriminated union で accessibilityLabel 必須を型強制（§4、label 排他）。
+ * - states（§2 mapping）: hover→pressed（背景を pressed 色に）、focus→FocusRing overlay（共通 helper）、
+ *   disabled→prop（opacity + 非活性）、loading→Spinner + disabled 相当。
+ * - 色は variant ごとに NativeTheme から解決（button.contract tokenRefs を 1:1 で写像）。
+ *   contained の pressed は hover-bg=primary.700（contract に native readable token あり、唯一）。
+ *   他 variant の pressed 視覚変化は contract が Tailwind のみ＝Phase1 non-conformant（§2 M-1）、
+ *   ここでは pressed 時に薄い overlay を敷く近似に留め、Phase2 で contract に pressed-* token 追加。
+ * - height は contract sizes（small32/medium40/large48）。
+ */
+
+import { useMemo, type ReactNode } from "react";
+import {
+  ActivityIndicator,
+  Pressable,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
+import { Text } from "./Text";
+import { useTheme } from "../theme";
+import { useFocusRing, FocusRing } from "./_internal/focus-ring";
+import { CONTRACTS } from "../contracts/contract-types";
+import { SIZE_SPEC, resolveVariant, type ButtonVariant, type ButtonSize } from "./button.styles";
+
+interface ButtonBase {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  leadingIcon?: ReactNode;
+  trailingIcon?: ReactNode;
+  disabled?: boolean;
+  loading?: boolean;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+type ButtonProps = ButtonBase &
+  (
+    // iconOnly は leadingIcon 必須（空ボタンを型で排除、§4 の最小 DU を保ちつつ icon 1個必須）。
+    | { iconOnly: true; accessibilityLabel: string; leadingIcon: ReactNode; label?: never }
+    | { iconOnly?: false; label: string }
+  );
+
+export function Button(props: ButtonProps) {
+  const { theme, mode } = useTheme();
+  const {
+    variant = "contained",
+    size = "medium",
+    leadingIcon,
+    trailingIcon,
+    disabled = false,
+    loading = false,
+    onPress,
+    style,
+    testID,
+  } = props;
+  const { focused, focusHandlers } = useFocusRing();
+
+  const spec = SIZE_SPEC[size];
+  const colors = useMemo(() => resolveVariant(theme, mode, variant), [theme, mode, variant]);
+  const isDisabled = disabled || loading;
+  const iconOnly = props.iconOnly === true;
+
+  return (
+    <Pressable
+      {...focusHandlers}
+      onPress={onPress}
+      disabled={isDisabled}
+      accessibilityRole="button"
+      accessibilityState={{ disabled: isDisabled, busy: loading }}
+      accessibilityLabel={iconOnly ? props.accessibilityLabel : undefined}
+      testID={testID}
+      style={({ pressed }) => [
+        {
+          height: spec.height,
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: theme.spacing["2"],
+          borderRadius: theme.radius.md,
+          backgroundColor: pressed && !isDisabled ? colors.pressedBg : colors.bg,
+          ...(iconOnly
+            ? { width: spec.iconBox }
+            : { paddingHorizontal: theme.spacing[spec.px] }),
+          ...(colors.border != null ? { borderWidth: 1, borderColor: colors.border } : null),
+          opacity: isDisabled ? 0.5 : 1,
+        },
+        style,
+      ]}
+    >
+      {loading ? (
+        <ActivityIndicator color={colors.textColor} />
+      ) : (
+        <>
+          {leadingIcon != null && <View>{leadingIcon}</View>}
+          {!iconOnly && (
+            <Text variant={spec.font} weight="medium" style={{ color: colors.textColor }}>
+              {props.label}
+            </Text>
+          )}
+          {trailingIcon != null && <View>{trailingIcon}</View>}
+        </>
+      )}
+      <FocusRing visible={focused && !isDisabled} radius={theme.radius.md} />
+    </Pressable>
+  );
+}
+
+// Phase 2 conformance test 用の contract メタ（§2 A-3）。
+Button.__contract = CONTRACTS.button;

package/src/primitives/Metric.tsx

@@ -0,0 +1,67 @@
+/**
+ * Metric — 数値 + 単位 + ラベルの指標表示 primitive（設計書 §1、意思決定3）。
+ * contract: metric（app 先行定義）。ツー活カードの主役（走行距離 / 時間 / 獲得標高 等）。
+ *
+ * - value は tabular（fontVariant:["tabular-nums"]）で桁揃え。Text primitive は fontVariant を
+ *   公開しないので、value は RN Text を直接使う。
+ * - size(sm/md/lg) は value の fontSize token にマップ（contract の height は想定行高、実 fontSize は
+ *   pure resolver（metric.styles.ts）で token 解決する。metric.contract intent 参照）。
+ * - unit は value の1段下の fontSize でベースライン揃え。label は muted。
+ * - a11y: value+unit+label を1つの accessibilityLabel に合成して読み上げる（contract a11y）。
+ */
+
+import { useMemo } from "react";
+import { Text as RNText, View, type StyleProp, type ViewStyle } from "react-native";
+import { useTheme } from "../theme";
+import { CONTRACTS, type SizeOf } from "../contracts/contract-types";
+import { resolveMetricStyles } from "./metric.styles";
+
+type MetricSize = SizeOf<"metric">; // "sm" | "md" | "lg"
+
+interface MetricProps {
+  /** 整形済みの数値文字列（整形は呼び出し側）。 */
+  value: string;
+  /** 単位（"km" / "m" / "h:mm" 等）。 */
+  unit?: string;
+  /** ラベル（"走行距離" 等）。 */
+  label?: string;
+  size?: MetricSize;
+  align?: "start" | "center";
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export function Metric({
+  value,
+  unit,
+  label,
+  size = "md",
+  align = "start",
+  style,
+  testID,
+}: MetricProps) {
+  const { theme, mode } = useTheme();
+
+  // 決定ロジックは pure resolver（metric.styles.ts）に分離済み — recipe との機械照合対象。
+  const styles = useMemo(() => resolveMetricStyles(theme, mode, size), [theme, mode, size]);
+
+  const a11yLabel = [value, unit, label].filter(Boolean).join(" ");
+
+  return (
+    <View
+      testID={testID}
+      accessible
+      accessibilityLabel={a11yLabel}
+      style={[{ alignItems: align === "center" ? "center" : "flex-start" }, style]}
+    >
+      <View style={{ flexDirection: "row", alignItems: "baseline" }}>
+        <RNText style={styles.valueStyle}>{value}</RNText>
+        {unit != null && <RNText style={styles.unitStyle}>{unit}</RNText>}
+      </View>
+      {label != null && <RNText style={styles.labelStyle}>{label}</RNText>}
+    </View>
+  );
+}
+
+// Phase 2 conformance test 用の contract メタ（§2 A-3）。
+Metric.__contract = CONTRACTS.metric;

package/src/primitives/Row.tsx

@@ -0,0 +1,54 @@
+/**
+ * Row — 横並び layout primitive。RN コア View の薄いラッパ。
+ * contract: row（app 先行定義、melta-contracts）。dogfood 不足-1（生 flexbox 手書き）の解消。
+ *
+ * - gap は spacing token キー限定（生数値不可、§5 lint の意味を保つ）。
+ * - align（交差軸、default center）/ justify（主軸、default start）/ wrap（折返し）。
+ * - 決定ロジックは pure resolver（row.styles.ts）に分離 — recipe との機械照合対象。
+ */
+
+import { useMemo, type ReactNode } from "react";
+import { View, type StyleProp, type ViewStyle } from "react-native";
+import { useTheme } from "../theme";
+import type { SpacingKey } from "../theme";
+import { CONTRACTS } from "../contracts/contract-types";
+import { resolveRowStyle, type RowAlign, type RowJustify, type RowStyle } from "./row.styles";
+
+interface RowProps {
+  /** 子要素間の gap（spacing token キー限定）。省略時 gap なし。 */
+  gap?: SpacingKey;
+  /** 交差軸の配置。default "center"。 */
+  align?: RowAlign;
+  /** 主軸の配置。default "start"。 */
+  justify?: RowJustify;
+  /** 折返し。default false。 */
+  wrap?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  children: ReactNode;
+}
+
+export function Row({
+  gap,
+  align = "center",
+  justify = "start",
+  wrap = false,
+  style,
+  testID,
+  children,
+}: RowProps) {
+  const { theme } = useTheme();
+
+  const layout = useMemo<RowStyle>(
+    () => resolveRowStyle(theme, { gap, align, justify, wrap }),
+    [theme, gap, align, justify, wrap],
+  );
+
+  return (
+    <View style={[layout, style]} testID={testID}>
+      {children}
+    </View>
+  );
+}
+
+Row.__contract = CONTRACTS.row;