{ "version": "2.1.0", "components": [ { "id": "accordion", "name": "Accordion", "category": "navigation", "description": "折りたたみ式コンテンツ。aria-expanded必須。", "docPath": "components/accordion.md", "anatomy": [ "container", "item", "trigger", "icon", "panel" ], "variants": [ { "name": "single", "class": "border border-slate-200 rounded-lg divide-y divide-slate-200", "tailwind": "border border-slate-200 rounded-lg divide-y divide-slate-200" }, { "name": "multiple", "class": "border border-slate-200 rounded-lg divide-y divide-slate-200", "tailwind": "border border-slate-200 rounded-lg divide-y divide-slate-200" } ], "sizes": [], "states": [ "default", "expanded", "collapsed", "hover", "focus" ], "appStatus": "planned", "accessibility": { "role": "button (trigger)", "required": [ "aria-expanded", "aria-controls" ], "focusRing": "focus-visible:ring-2 focus-visible:ring-primary-500/50" }, "prohibited": [], "htmlSample": "
内容
" }, { "id": "action-sheet", "name": "ActionSheet", "category": "feedback", "description": "画面下から出るアクション/選択リスト。web の select / dropdown を APP に adapted 変換する際の受け皿（構造的 P0）。destructive アクションは色で区別しラベルでも伝える。", "docPath": "components/action-sheet.md", "anatomy": [ "overlay", "sheet", "title?", "action", "cancelAction" ], "variants": [ { "name": "default", "class": "", "tailwind": "" } ], "sizes": [], "states": [ "default" ], "appStatus": "implemented", "recipes": { "app": { "$schema": "../../../schemas/recipe.schema.json", "id": "action-sheet", "platform": "app", "contractVersion": "0.1.0", "description": "RN 実装（src/components/ActionSheet.tsx）の具象レシピ（styleRefs 形式）。RN core Modal（transparent + slide）+ 下端 sheet。actions は縦積み（区切り線 border-default）、cancel は下に分離した独立ブロック。destructive アクションは actionTextStyle の色を destructiveColor に差し替える。sheet の下余白は SafeArea を実装が加算する。overlay の黒 50% は token 外の literal（modal と同じ）。", "variants": { "default": { "overlayStyle": { "flex": 1, "backgroundColor": "rgba(0,0,0,0.5)", "justifyContent": "flex-end", "padding": { "token": "spacing.2" } }, "sheetStyle": { "backgroundColor": { "token": "color.semantic.light.bg-surface" }, "borderRadius": { "token": "radius.lg" }, "overflow": "hidden" }, "titleStyle": { "fontSize": { "token": "typography.fontSize.sm" }, "color": { "token": "color.semantic.light.text-muted" }, "textAlign": "center", "paddingVertical": { "token": "spacing.3" } }, "actionStyle": { "paddingVertical": { "token": "spacing.4" }, "alignItems": "center", "borderTopWidth": 1, "borderTopColor": { "token": "color.semantic.light.border-default" } }, "actionTextStyle": { "fontSize": { "token": "typography.fontSize.lg" }, "color": { "token": "color.primary.500" } }, "destructiveTextStyle": { "fontSize": { "token": "typography.fontSize.lg" }, "color": { "token": "color.status.danger.base" } }, "cancelStyle": { "backgroundColor": { "token": "color.semantic.light.bg-surface" }, "borderRadius": { "token": "radius.lg" }, "marginTop": { "token": "spacing.2" }, "paddingVertical": { "token": "spacing.4" }, "alignItems": "center" }, "cancelTextStyle": { "fontSize": { "token": "typography.fontSize.lg" }, "fontWeight": { "token": "typography.fontWeight.semibold" }, "color": { "token": "color.primary.500" } } } }, "sizes": {}, "states": {} } }, "accessibility": { "role": "dialog", "required": [ "開いている間は背後を操作不可にする（RN: Modal の accessibilityViewIsModal）", "閉じる手段を複数持つ（cancelAction 必須 + overlay tap + Android back）", "destructive は色だけでなくラベル文言でも破壊的操作と分かるようにする" ], "focusRing": "N/A" }, "prohibited": [], "htmlSample": "" }, { "id": "alert", "name": "Alert", "category": "feedback", "description": "インラインアラート通知。Info / Success / Warning / Error の4タイプ。", "docPath": "components/alert.md", "anatomy": [ "container", "icon", "title?", "message", "closeButton?" ], "variants": [ { "name": "info", "class": "bg-primary-50 border border-primary-200 text-primary-800 rounded-lg p-4", "tailwind": "bg-primary-50 border border-primary-200 text-primary-800 rounded-lg p-4" }, { "name": "success", "class": "bg-emerald-50 border border-emerald-200 text-emerald-800 rounded-lg p-4", "tailwind": "bg-emerald-50 border border-emerald-200 text-emerald-800 rounded-lg p-4" }, { "name": "warning", "class": "bg-amber-50 border border-amber-200 text-amber-800 rounded-lg p-4", "tailwind": "bg-amber-50 border border-amber-200 text-amber-800 rounded-lg p-4" }, { "name": "error", "class": "bg-red-50 border border-red-200 text-red-800 rounded-lg p-4", "tailwind": "bg-red-50 border border-red-200 text-red-800 rounded-lg p-4" } ], "sizes": [], "states": [ "default", "dismissing" ], "appStatus": "implemented", "recipes": { "app": { "$schema": "../../../schemas/recipe.schema.json", "id": "alert", "platform": "app", "contractVersion": "2.0.0", "description": "RN 実装（src/components/Alert.tsx）の具象レシピ（styleRefs 形式）。variant = 通知タイプ4種。RN では border を持たず bg subtle + text 色で表現する（status token に border 用の中間色が無いため。COLOR_ONLY_FORBIDDEN は title/message のテキストと icon slot で担保）。dark mode は実装 resolver が status.*.subtle-dark / text-dark 側を解決する（info のみ primary 固定 = dark token が無い既知の割り切り、web と同じ）。icon は ReactNode slot（EmptyState 前例。Icon を差すなら melta-app/icons を利用者が opt-in）。", "variants": { "info": { "containerStyle": { "backgroundColor": { "token": "color.primary.50" }, "borderRadius": { "token": "radius.md" }, "padding": { "token": "spacing.4" }, "flexDirection": "row", "alignItems": "flex-start", "gap": { "token": "spacing.3" } }, "titleStyle": { "color": { "token": "color.primary.800" }, "fontSize": { "token": "typography.fontSize.base" }, "fontWeight": { "token": "typography.fontWeight.medium" } }, "messageStyle": { "color": { "token": "color.primary.800" }, "fontSize": { "token": "typography.fontSize.sm" } } }, "success": { "containerStyle": { "backgroundColor": { "token": "color.status.success.subtle-light" }, "borderRadius": { "token": "radius.md" }, "padding": { "token": "spacing.4" }, "flexDirection": "row", "alignItems": "flex-start", "gap": { "token": "spacing.3" } }, "titleStyle": { "color": { "token": "color.status.success.text-light" }, "fontSize": { "token": "typography.fontSize.base" }, "fontWeight": { "token": "typography.fontWeight.medium" } }, "messageStyle": { "color": { "token": "color.status.success.text-light" }, "fontSize": { "token": "typography.fontSize.sm" } } }, "warning": { "containerStyle": { "backgroundColor": { "token": "color.status.warning.subtle-light" }, "borderRadius": { "token": "radius.md" }, "padding": { "token": "spacing.4" }, "flexDirection": "row", "alignItems": "flex-start", "gap": { "token": "spacing.3" } }, "titleStyle": { "color": { "token": "color.status.warning.text-light" }, "fontSize": { "token": "typography.fontSize.base" }, "fontWeight": { "token": "typography.fontWeight.medium" } }, "messageStyle": { "color": { "token": "color.status.warning.text-light" }, "fontSize": { "token": "typography.fontSize.sm" } } }, "error": { "containerStyle": { "backgroundColor": { "token": "color.status.danger.subtle-light" }, "borderRadius": { "token": "radius.md" }, "padding": { "token": "spacing.4" }, "flexDirection": "row", "alignItems": "flex-start", "gap": { "token": "spacing.3" } }, "titleStyle": { "color": { "token": "color.status.danger.text-light" }, "fontSize": { "token": "typography.fontSize.base" }, "fontWeight": { "token": "typography.fontWeight.medium" } }, "messageStyle": { "color": { "token": "color.status.danger.text-light" }, "fontSize": { "token": "typography.fontSize.sm" } } } }, "sizes": {}, "states": {} } }, "accessibility": { "role": "alert (error/warning) / status (info/success)", "required": [ "aria-live" ], "focusRing": "N/A" }, "prohibited": [ "色だけで情報伝達すると色覚多様性への非対応になる", "Alert含め全コンポーネントで禁止", "AI生成UIの典型パターン。装飾過剰で汎用性が低い" ], "htmlSample": "

エラー

もう一度お試しください

" }, { "id": "avatar", "name": "Avatar", "category": "data-display", "description": "ユーザーアバター。Image / Initials / Status / Group。", "docPath": "components/avatar.md", "anatomy": [ "container", "image?", "initials?", "statusDot?" ], "variants": [ { "name": "image", "class": "w-10 h-10 rounded-full object-cover", "tailwind": "w-10 h-10 rounded-full object-cover" }, { "name": "initials", "class": "w-10 h-10 rounded-full bg-primary-50 text-primary-600 font-medium inline-flex items-center justify-center text-sm", "tailwind": "w-10 h-10 rounded-full bg-primary-50 text-primary-600 font-medium inline-flex items-center justify-center text-sm" }, { "name": "group", "class": "flex -space-x-2", "tailwind": "flex -space-x-2" } ], "sizes": [ { "name": "small", "class": "w-8 h-8", "tailwind": "w-8 h-8", "height": "32px" }, { "name": "medium", "class": "w-10 h-10", "tailwind": "w-10 h-10", "height": "40px" }, { "name": "large", "class": "w-12 h-12", "tailwind": "w-12 h-12", "height": "48px" } ], "states": [ "default", "online", "away", "offline" ], "appStatus": "implemented", "recipes": { "app": { "$schema": "../../../schemas/recipe.schema.json", "id": "avatar", "platform": "app", "contractVersion": "2.0.0", "description": "RN 実装（src/components/Avatar.tsx）の具象レシピ（styleRefs 形式）。variant=image は RN Image を radius.full で clip、variant=initials は bg primary.50 + text primary.600（fontSize は sizes 軸で xs/sm/base に段階）、variant=group は AvatarGroup（2枚目以降を overlapStyle の負 margin = -spacing.2 相当で重ねる。負値 token が無いため literal -8）。states の online/away/offline は statusDot（右下配置、bg-surface の ring）で表現し、dot 径は sizes 軸の dotSize。", "variants": { "image": { "style": { "borderRadius": { "token": "radius.full" }, "overflow": "hidden" } }, "initials": { "style": { "borderRadius": { "token": "radius.full" }, "backgroundColor": { "token": "color.primary.50" }, "alignItems": "center", "justifyContent": "center" }, "textStyle": { "color": { "token": "color.primary.600" }, "fontWeight": { "token": "typography.fontWeight.medium" } } }, "group": { "style": { "flexDirection": "row" }, "overlapStyle": { "marginLeft": -8 } } }, "sizes": { "small": { "style": { "width": 32, "height": 32 }, "textStyle": { "fontSize": { "token": "typography.fontSize.xs" } }, "dotSize": 8 }, "medium": { "style": { "width": 40, "height": 40 }, "textStyle": { "fontSize": { "token": "typography.fontSize.sm" } }, "dotSize": 10 }, "large": { "style": { "width": 48, "height": 48 }, "textStyle": { "fontSize": { "token": "typography.fontSize.base" } }, "dotSize": 12 } }, "states": { "online": { "dotStyle": { "backgroundColor": { "token": "color.status.success.base" }, "borderColor": { "token": "color.semantic.light.bg-surface" }, "borderWidth": 2 } }, "away": { "dotStyle": { "backgroundColor": { "token": "color.status.warning.base" }, "borderColor": { "token": "color.semantic.light.bg-surface" }, "borderWidth": 2 } }, "offline": { "dotStyle": { "backgroundColor": { "token": "color.semantic.light.border-strong" }, "borderColor": { "token": "color.semantic.light.bg-surface" }, "borderWidth": 2 } } } } }, "accessibility": { "role": "img", "required": [ "aria-label=\"名前\"" ], "focusRing": "N/A" }, "prohibited": [], "htmlSample": "
田中
" }, { "id": "badge", "name": "Badge", "category": "data-display", "description": "ステータス・カウント表示。Status / Dot / Count / Outline の4バリエーション。", "docPath": "components/badge.md", "anatomy": [ "container", "dotIndicator?", "label" ], "variants": [ { "name": "neutral", "class": "inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-slate-100 text-slate-700", "tailwind": "inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-slate-100 text-slate-700" }, { "name": "success", "class": "inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-emerald-50 text-emerald-700", "tailwind": "inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-emerald-50 text-emerald-700" }, { "name": "warning", "class": "inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-amber-50 text-amber-700", "tailwind": "inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-amber-50 text-amber-700" }, { "name": "danger", "class": "inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-red-50 text-red-700", "tailwind": "inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-red-50 text-red-700" }, { "name": "accent", "class": "inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-primary-50 text-primary-700", "tailwind": "inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-primary-50 text-primary-700" } ], "sizes": [], "states": [ "default" ], "appStatus": "planned", "accessibility": { "role": "status", "required": [], "focusRing": "N/A" }, "prohibited": [ "色だけで情報伝達すると色覚多様性への非対応になる", "Badge はステータス表示、Tag はユーザー管理メタデータ" ], "htmlSample": "未着手" }, { "id": "bottom-sheet", "name": "BottomSheet", "category": "feedback", "description": "画面下から出る汎用シート container（content は自由 slot）。フィルタ・詳細・複雑な選択 UI の受け皿。ActionSheet がリスト特化なのに対しこちらは容器。", "docPath": "components/bottom-sheet.md", "anatomy": [ "overlay", "sheet", "grabber", "title?", "content" ], "variants": [ { "name": "default", "class": "", "tailwind": "" } ], "sizes": [], "states": [ "default" ], "appStatus": "implemented", "recipes": { "app": { "$schema": "../../../schemas/recipe.schema.json", "id": "bottom-sheet", "platform": "app", "contractVersion": "0.1.0", "description": "RN 実装（src/components/BottomSheet.tsx）の具象レシピ（styleRefs 形式）。RN core Modal（transparent + slide）+ 下端 sheet（上角のみ radius）。grabber は装飾バー（a11y ツリーから除外）。content は自由 slot で padding のみ供給。スワイプで閉じるジェスチャは Phase 外（overlay tap + Android back で閉じる）。sheet の下余白は SafeArea を実装が加算する。", "variants": { "default": { "overlayStyle": { "flex": 1, "backgroundColor": "rgba(0,0,0,0.5)", "justifyContent": "flex-end" }, "sheetStyle": { "backgroundColor": { "token": "color.semantic.light.bg-surface" }, "borderTopLeftRadius": { "token": "radius.lg" }, "borderTopRightRadius": { "token": "radius.lg" } }, "grabberStyle": { "width": 36, "height": 4, "borderRadius": { "token": "radius.full" }, "backgroundColor": { "token": "color.semantic.light.border-strong" }, "alignSelf": "center", "marginTop": { "token": "spacing.2" } }, "titleStyle": { "fontSize": { "token": "typography.fontSize.lg" }, "fontWeight": { "token": "typography.fontWeight.bold" }, "color": { "token": "color.semantic.light.text-heading" }, "paddingHorizontal": { "token": "spacing.4" }, "paddingTop": { "token": "spacing.4" } }, "contentStyle": { "padding": { "token": "spacing.4" } } } }, "sizes": {}, "states": {} } }, "accessibility": { "role": "dialog", "required": [ "開いている間は背後を操作不可にする（RN: Modal の accessibilityViewIsModal）", "閉じる手段を複数持つ（overlay tap + Android back。title があれば閉じるボタンを推奨）" ], "focusRing": "N/A" }, "prohibited": [], "htmlSample": "" }, { "id": "breadcrumb", "name": "Breadcrumb", "category": "navigation", "description": "階層パスナビゲーション。ol要素で構造化。", "docPath": "components/breadcrumb.md", "anatomy": [ "nav", "orderedList", "linkItem", "separator", "currentPage", "ellipsis?", "homeIcon?" ], "variants": [ { "name": "text-separator", "class": "flex items-center gap-2 text-sm", "tailwind": "flex items-center gap-2 text-sm" }, { "name": "chevron-separator", "class": "flex items-center gap-2 text-sm", "tailwind": "flex items-center gap-2 text-sm" } ], "sizes": [], "states": [ "default", "hover" ], "appStatus": "not-planned", "appNote": "RN 主要ライブラリ提供 0/5。Apple HIG が multisegment breadcrumb を明示的に否定。back ボタン + nav bar タイトルで代替", "accessibility": { "role": "navigation", "required": [ "aria-label=\"パンくずリスト\"", "aria-current=\"page\"" ], "focusRing": "focus:ring-2 focus:ring-primary-500/50" }, "prohibited": [ "スクリーンリーダーが現在ページを識別できない", "