ksk-design-system 1.37.5 → 1.38.0

package/README.md

@@ -4,7 +4,7 @@
 
 **🔗 ライブ Storybook → https://ksk-design-system.vercel.app**
 
-110 コンポーネントを実際に操作・確認できます。
+115 コンポーネントを実際に操作・確認できます。
 
 ---
 
@@ -14,7 +14,7 @@
 - **アクセシブル** — shadcn/ui（Radix UI ベース）+ `@storybook/addon-a11y` で a11y を担保
 - **Tailwind CSS v4 ネイティブ** — `@theme` ベースのトークン設計
 - **型安全** — React 19 + TypeScript、CVA によるバリアント管理
-- **110 + 91 コンポーネント** — Web 110（UI 55 / EC 11 / 管理 8 / シェル 3 / パターン 33）+ React Native 91
+- **115 + 91 コンポーネント** — Web 115（UI 56 / EC 11 / 管理 8 / シェル 3 / パターン 37）+ React Native 91
 - **iOS 26 Liquid Glass 対応** — RN 側 `GlassView` + `Button variant="glass"`、Web 側 `.glass` CSS マテリアル
 
 ## 🎨 テーマ
@@ -54,6 +54,44 @@ import { Button, Card, Input, FormField } from "ksk-design-system"
 
 新規クライアント案件では、テーマファイルで `--Primitive-Brand-500` などブランドカラーの 10 行を定義するだけで、全コンポーネントがそのブランドカラーで動作します。
 
+### Media overlay utilities
+
+動画・写真の上に文字や操作を置く場合は、`--Text-on-Media` と `.text-on-media` / `.text-on-media-secondary`、上下の `.media-scrim-top` / `.media-scrim-bottom` を使います。TikTok / Reels 型の操作群は `MediaActionCluster` が glass ボタン、ラベル、safe-area anchor、idle auto-hide をまとめて扱います。
+
+```tsx
+import { MediaActionCluster } from "ksk-design-system"
+
+<div className="relative">
+  <div className="absolute inset-x-0 top-0 h-32 media-scrim-top" />
+  <h1 className="text-on-media">メディア上のタイトル</h1>
+  <MediaActionCluster
+    anchor="bottom-right"
+    items={[
+      { label: "いいね", icon: <HeartIcon />, active: true },
+      { label: "シェア", icon: <ShareIcon /> },
+    ]}
+  />
+</div>
+```
+
+### Fullscreen screen primitives
+
+フルスクリーン画面は `Screen` で固定高 root、本文の内部スクロール、下部 CTA の safe-area 余白をまとめて扱います。写真背景の入口画面やオンボーディングスライドは `PhotoHero` と `typo-on-image` を組み合わせます。
+
+```tsx
+import { Screen, PhotoHero, Button } from "ksk-design-system"
+
+<Screen scroll={false} padding="none">
+  <PhotoHero src="/onboarding/slide-1.jpg" overlay="dark">
+    <PhotoHero.Eyebrow>さあ、始めよう</PhotoHero.Eyebrow>
+    <PhotoHero.Title>ふたりの準備、ここから。</PhotoHero.Title>
+    <PhotoHero.Actions>
+      <Button variant="glass-inverse" className="w-full">はじめる</Button>
+    </PhotoHero.Actions>
+  </PhotoHero>
+</Screen>
+```
+
 ### React Native / Expo
 
 `ksk-design-system/native/ui` から直接 RN 用コンポーネント（91 個）を import できます。iOS 26 の **Liquid Glass** にも対応:

package/contracts/components.json

@@ -5,11 +5,11 @@
     "description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
     "counts": {
       "ui": 56,
-      "patterns": 34,
+      "patterns": 37,
       "commerce": 11,
       "admin": 8,
       "shells": 3,
-      "total": 112
+      "total": 115
     }
   },
   "ui": [
@@ -1115,11 +1115,89 @@
         "providers",
         "region defaults",
         "copy fallback",
-        "circle / inline layout"
+        "circle / inline layout",
+        "onShare tracking"
       ],
       "rules": [
         "providers を渡すと明示順で表示",
-        "region=jp は line/x/copy、region=us は whatsapp/x/copy を既定にする"
+        "region=jp は line/x/copy、region=us は whatsapp/x/copy を既定にする",
+        "provider 別の計測には onShare(provider) を使う。copy 完了時だけ必要なら onCopy も併用する"
+      ]
+    },
+    {
+      "name": "MediaActionCluster",
+      "path": "src/components/patterns/media-action-cluster.tsx",
+      "description": "動画・写真などのメディア上に重ねる icon + label のアクションクラスタ。TikTok/Reels 型の縦・横操作群、safe-area anchor、idle auto-hide に対応。",
+      "features": [
+        "media overlay",
+        "icon + label actions",
+        "vertical / horizontal / auto orientation",
+        "safe-area anchor",
+        "idle auto-hide",
+        "glass buttons",
+        "text-on-media"
+      ],
+      "accessibility": [
+        "role=group",
+        "aria-label",
+        "aria-pressed for active button items",
+        "44px touch target"
+      ],
+      "rules": [
+        "メディア上の操作群に使用する。通常画面の下部 CTA には StickyActionBar を使う",
+        "items[].label は必須。アイコン単独にしない",
+        "暗い写真・動画・濃色面上では glass-inverse / text-on-media を維持する",
+        "autoHideMs=null で idle fade を無効化できる"
+      ]
+    },
+    {
+      "name": "Screen",
+      "path": "src/components/patterns/screen.tsx",
+      "description": "固定高ビューポート、本文だけの内部スクロール、下部固定 CTA の safe-area 余白を内包するフルスクリーン画面骨組み。",
+      "features": [
+        "100dvh fixed viewport",
+        "internal scroll body",
+        "min-h-0 guard",
+        "fixed header slot",
+        "fixed footer slot",
+        "safe-area bottom"
+      ],
+      "accessibility": [
+        "main landmark",
+        "footer landmark when footer is present"
+      ],
+      "rules": [
+        "body スクロールを使わないアプリのフルスクリーン画面に使う",
+        "本文が長い画面では scroll=true のまま使う",
+        "写真ヒーローなど 1 画面固定では scroll=false と padding=none を組み合わせる",
+        "footer には主要 CTA を置き、safe-area 余白を消費側で再実装しない"
+      ]
+    },
+    {
+      "name": "PhotoHero",
+      "path": "src/components/patterns/photo-hero.tsx",
+      "description": "写真背景、暗化オーバーレイ、下詰め/中央寄せコンテンツ、写真上の可読性 typography をまとめるフルスクリーンヒーロー。",
+      "features": [
+        "photo background",
+        "medium / dark overlay",
+        "bottom / center align",
+        "on-image typography",
+        "compound slots"
+      ],
+      "subcomponents": [
+        "PhotoHero.Eyebrow",
+        "PhotoHero.Title",
+        "PhotoHero.Body",
+        "PhotoHero.Actions"
+      ],
+      "accessibility": [
+        "decorative image defaults to alt empty",
+        "alt can be provided when the image is meaningful"
+      ],
+      "rules": [
+        "オンボーディング入口・写真スライド・メディア上 CTA に使う",
+        "写真上の CTA には Button variant=glass-inverse / ghost-inverse を使う",
+        "本文が長い場合は Screen scroll=true 側で内部スクロールを確保する"
       ]
     },
     {

package/dist/class-names.js

@@ -1,4 +1,4 @@
-import { b as o } from "./server-variants-EoHx5Klh.js";
+import { b as o } from "./server-variants-qSBVrkGA.js";
 export {
   o as buttonVariants
 };