ksk-design-system 2.3.0 → 2.5.0

package/dist/{native-E7YOVABy.js → native-BsJ3ntN3.js}

@@ -1345,24 +1345,24 @@ var e = {
 		},
 		body: {
 			lg: {
-				fontSize: 16,
+				fontSize: 18,
 				fontWeight: "400",
-				lineHeight: 28
+				lineHeight: 32
 			},
 			md: {
-				fontSize: 14,
+				fontSize: 16,
 				fontWeight: "400",
-				lineHeight: 25
+				lineHeight: 28
 			},
 			sm: {
-				fontSize: 12,
+				fontSize: 14,
 				fontWeight: "400",
-				lineHeight: 18
+				lineHeight: 21
 			},
 			xs: {
-				fontSize: 10,
+				fontSize: 12,
 				fontWeight: "400",
-				lineHeight: 15
+				lineHeight: 18
 			}
 		},
 		label: {

package/dist/native.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, r, t as i } from "./native-E7YOVABy.js";
+import { a as e, i as t, n, r, t as i } from "./native-BsJ3ntN3.js";
 export { i as getTheme, r as primitives, t as scales, n as themeNames, e as themes };

package/dist/types/components/patterns/search-bar.d.ts

@@ -10,5 +10,5 @@ interface SearchBarProps extends Omit<React.ComponentProps<"input">, "type"> {
      */
     asForm?: boolean;
 }
-declare function SearchBar({ className, onSearch, asForm, ...props }: SearchBarProps): React.JSX.Element;
+declare function SearchBar({ className, onSearch, asForm, onKeyDown, onCompositionStart, onCompositionEnd, ...props }: SearchBarProps): React.JSX.Element;
 export { SearchBar };

package/dist/types/native/components/ProgressRing.d.ts

@@ -21,7 +21,12 @@ export interface ProgressRingProps {
     showLabel?: boolean;
 }
 /**
- * SVG非依存の簡易ProgressRing。
- * 半円を2枚使った clip 風表現で React Native のViewのみで完結させる。
+ * value/max に比例した円弧を描く ProgressRing。
+ *
+ * - react-native-svg があれば strokeDasharray/strokeDashoffset で円弧を描く。
+ * - 無い環境（optional peerDependency）では View の 2 マスク方式にフォールバックする。
+ *
+ * issue #540: 以前は半円 2 枚の重ね合わせだったため角度によらず常に半周の塗りになり、
+ * 180 度ちょうど（50%）では塗りが消えていた。
  */
 export declare function ProgressRing({ value, max, size, strokeWidth, thickness, showLabel, }: ProgressRingProps): React.JSX.Element;

package/dist/types/native/components/Scrim.d.ts

@@ -0,0 +1,40 @@
+import React from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+import { type ScrimAlign } from "../scrim-layout";
+export type { ScrimAlign };
+export interface ScrimProps {
+    /**
+     * 背景タップで呼ばれる。未指定なら押下面を描かない
+     * （背面へのタッチは塞いだまま＝閉じられないスクリム）。
+     */
+    onPress?: () => void;
+    /** 押下面の読み上げ名。既定「閉じる」。 */
+    accessibilityLabel?: string;
+    /** スクリムの上に置くパネル。背景・padding・maxWidth は一切強制しない。 */
+    children?: React.ReactNode;
+    /**
+     * 子の寄せ方。既定 "center"（Dialog と同じ中央寄せ）。
+     * "stretch" は子を全面へ伸ばす。細かいレイアウトは利用側が子の中で行う。
+     */
+    align?: ScrimAlign;
+    style?: StyleProp<ViewStyle>;
+    /** root に付く。押下面には `${testID}-backdrop` が付く。 */
+    testID?: string;
+}
+/**
+ * RN Modal を生成しない単体のスクリム（issue #555）。
+ *
+ * 親の中で `absolute` 全面に敷く。Modal を作らないため、別の RN Modal の内側や
+ * 画面内オーバーレイ（FeedbackOverlay 等）にそのまま重ねられる。
+ * 濃さは Dialog の背景と同じ `theme.overlay.dark` トークンを使う。
+ *
+ * 構造は「root（素の View・背景と寄せだけ）＋ 押下面 Pressable ＋ children」の
+ * **兄弟**並び。root を accessible にしないので、VoiceOver はパネル内の
+ * ボタン・入力欄へ個別にフォーカスできる。children は押下面より後ろの兄弟＝
+ * 前面に描かれるため、パネル上のタップは押下面へ届かない（吸収用の
+ * ダミー Pressable は不要）。
+ *
+ * 背面を触らせたい（タッチを素通しさせたい）用途はこの部品の対象外。
+ * スクリムは常に背面へのタッチを塞ぐ。
+ */
+export declare function Scrim({ onPress, accessibilityLabel, children, align, style, testID, }: ScrimProps): React.JSX.Element;

package/dist/types/native/components/index.d.ts

@@ -42,6 +42,7 @@ export { FormField, type FormFieldProps } from "./FormField";
 export { FormRoot, FormSection, FormActions, type FormRootProps, type FormSectionProps, type FormActionsProps, } from "./Form";
 export { Alert, type AlertProps, type AlertTone } from "./Alert";
 export { Dialog, type DialogProps, type DialogPosition } from "./Dialog";
+export { Scrim, type ScrimProps, type ScrimAlign } from "./Scrim";
 export { AlertDialog, type AlertDialogProps } from "./AlertDialog";
 export { Sheet, type SheetProps, type SheetSide } from "./Sheet";
 export { DetailSheetScaffold, DetailSheetHeader, DetailSheetBody, type DetailSheetScaffoldProps, type DetailSheetHeaderProps, type DetailSheetBodyProps, } from "./DetailSheetScaffold";

package/dist/types/native/index.d.ts

@@ -3,4 +3,5 @@ export { ThemeProvider, useTheme, type ThemeContextValue } from "./theme/ThemePr
 export { SafeAreaInsetsProvider, useSafeAreaInsets, type SafeAreaInsetsProviderProps, } from "./theme/SafeAreaInsetsProvider";
 export { APP_HEADER_IOS_FALLBACK_PADDING_TOP, hasInsetEdge, resolveAppHeaderPaddingTop, resolveBottomSheetTopInset, resolveFullscreenDialogPadding, resolveInsetEdge, resolveTopSheetPaddingTop, type EdgePadding, type SafeAreaEdge, type SafeAreaInsets, } from "./safe-area";
 export { resolveTypo, type TypoVariant, type TypoStyle } from "./typography";
+export { resolveScrimAlignment, resolveScrimContentStyle, type ScrimAlignmentStyle, type ScrimContentStyle, } from "./scrim-layout";
 export * from "./components";

package/dist/types/native/progress-ring-geometry.d.ts

@@ -0,0 +1,32 @@
+/** value を 0〜max にクランプする。max<=0 は 0 として扱う（ゼロ除算ガード）。 */
+export declare function clampProgressValue(value: number, max: number): number;
+/** 0〜100 の実効パーセンテージ。 */
+export declare function progressRingPct(value: number, max: number): number;
+/** 0〜360 度の円弧角度。0/25/50/80/100% → 0/90/180/288/360 度。 */
+export declare function progressRingAngle(value: number, max: number): number;
+export interface ProgressRingGeometry {
+    /** ストロークの中心半径（= (size - strokeWidth) / 2） */
+    radius: number;
+    /** 中心半径の円周 */
+    circumference: number;
+    /** strokeDasharray に渡す値 */
+    dashArray: number;
+    /** strokeDashoffset に渡す値（0% で circumference、100% で 0） */
+    dashOffset: number;
+    /** 角度（度） */
+    angle: number;
+}
+/** SVG 円弧（strokeDasharray / strokeDashoffset）用のジオメトリ。 */
+export declare function getProgressRingGeometry(value: number, max: number, size: number, strokeWidth: number): ProgressRingGeometry;
+export interface ProgressRingMaskRotations {
+    /** 右半分の窓に見せる左半円の回転角（0〜180 度） */
+    rightRotation: number;
+    /** 左半分の窓に見せる右半円の回転角（0〜180 度） */
+    leftRotation: number;
+}
+/**
+ * react-native-svg が無い環境向けの 2 マスク方式の回転角。
+ * 0〜180 度は右半分の窓だけが埋まり、180 度を超えると右は塗り切った状態のまま
+ * 左半分の窓が 0→180 度で埋まる（180 度ちょうどで塗りが消えない）。
+ */
+export declare function getProgressRingMaskRotations(value: number, max: number): ProgressRingMaskRotations;

package/dist/types/native/scrim-layout.d.ts

@@ -0,0 +1,26 @@
+/** スクリムの中で子（パネル）をどこへ寄せるか。 */
+export type ScrimAlign = "center" | "top" | "bottom" | "stretch";
+export interface ScrimAlignmentStyle {
+    /** 交差軸（横方向）の寄せ */
+    alignItems: "center" | "stretch";
+    /** 主軸（縦方向）の寄せ */
+    justifyContent: "center" | "flex-start" | "flex-end";
+}
+/** 子ラッパに与えるスタイル。stretch のときだけ全面へ伸ばす。 */
+export interface ScrimContentStyle {
+    flex?: number;
+    alignSelf?: "stretch";
+}
+/**
+ * align からコンテナの寄せスタイルを返す。
+ * "stretch" は子を全面へ伸ばす（ViewShot のキャプチャ対象など、
+ * 子が自前で全面レイアウトを持つ場合向け）。
+ */
+export declare function resolveScrimAlignment(align?: ScrimAlign): ScrimAlignmentStyle;
+/**
+ * 子ラッパのスタイル。stretch 以外では何も足さない（= 子の内在サイズのまま）。
+ * 背景色・padding・maxWidth・overflow は一切与えない。
+ * ラッパは押下面 Pressable の兄弟として前面に置かれ、余白部分のタップは
+ * `pointerEvents="box-none"` で押下面へ抜ける（コンポーネント側で付与）。
+ */
+export declare function resolveScrimContentStyle(align?: ScrimAlign): ScrimContentStyle;

package/dist/types/tokens/native/scales.d.ts

@@ -126,24 +126,24 @@ export declare const scales: {
         };
         readonly body: {
             readonly lg: {
-                readonly fontSize: 16;
+                readonly fontSize: 18;
                 readonly fontWeight: "400";
-                readonly lineHeight: 28;
+                readonly lineHeight: 32;
             };
             readonly md: {
-                readonly fontSize: 14;
+                readonly fontSize: 16;
                 readonly fontWeight: "400";
-                readonly lineHeight: 25;
+                readonly lineHeight: 28;
             };
             readonly sm: {
-                readonly fontSize: 12;
+                readonly fontSize: 14;
                 readonly fontWeight: "400";
-                readonly lineHeight: 18;
+                readonly lineHeight: 21;
             };
             readonly xs: {
-                readonly fontSize: 10;
+                readonly fontSize: 12;
                 readonly fontWeight: "400";
-                readonly lineHeight: 15;
+                readonly lineHeight: 18;
             };
         };
         readonly label: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ksk-design-system",
-  "version": "2.3.0",
+  "version": "2.5.0",
   "type": "module",
   "description": "KSK Design System — フリーランス向けマルチテーマ対応デザインシステム",
   "license": "MIT",
@@ -97,6 +97,10 @@
       "import": "./src/styles/product-theme.css",
       "default": "./src/styles/product-theme.css"
     },
+    "./tokens/radius": {
+      "import": "./src/styles/radius.css",
+      "default": "./src/styles/radius.css"
+    },
     "./glass": {
       "import": "./src/styles/glass.css",
       "default": "./src/styles/glass.css"

package/src/native/COMPONENT_LOOKUP.md

@@ -4,7 +4,7 @@
 
 React Native / Expo consumer は、新規 UI を作る前にこの一覧で既存コンポーネントを確認してください。すべて `ksk-design-system/native/ui` から import します。
 
-- Public native component exports: 150
+- Public native component exports: 151
 - Import: `import { Button, Screen } from "ksk-design-system/native/ui"`
 
 | Component | Source | Section |
@@ -75,6 +75,7 @@ React Native / Expo consumer は、新規 UI を作る前にこの一覧で既
 | `PromptCoordinatorProvider` | `src/native/components/PromptCoordinator.tsx` | Phase 3: Overlay |
 | `ResponsiveDialog` | `src/native/components/ResponsiveDialog.tsx` | Phase 3: Overlay |
 | `ReviewOverlay` | `src/native/components/ReviewOverlay.tsx` | Phase 3: Overlay |
+| `Scrim` | `src/native/components/Scrim.tsx` | Phase 3: Overlay |
 | `Sheet` | `src/native/components/Sheet.tsx` | Phase 3: Overlay |
 | `ToastProvider` | `src/native/components/Toast.tsx` | Phase 3: Overlay |
 | `Accordion` | `src/native/components/Accordion.tsx` | Phase 4: Selection / Disclosure |

package/src/preset.css

@@ -15,6 +15,9 @@
    ============================================================= */
 
 @import "./styles/primitive.css";
+/* 角丸の意味別トークン（issue #553）。定義元は styles/radius.css の1箇所で、
+   product-theme.css からも読み込まれる（個別 subpath 構成の消費側対策）。 */
+@import "./styles/radius.css";
 @import "./styles/semantic.css";
 @import "./styles/categorical.css";
 @import "./styles/typography.css";
@@ -108,15 +111,8 @@
 }
 
 /* ─── Radius Tokens ───
-   角丸の意味別トークン。コンポーネントは rounded-[var(--Radius-*)] で参照し、
-   rounded-lg / rounded-[32px] のベタ書き（＝ドリフトの元）を避ける。
-   テーマ非依存（Brand / Light-Dark で変わらない固定値）。
-   面 < モーダル < シート の順に丸くなる階層。 */
-:root {
-  --Radius-Surface: 0.875rem; /* 14px  — Card / Popover パネル / 面の既定。丸くしたいならここを上げる */
-  --Radius-Modal:   1.5rem;  /* 24px — 中央モーダル（Dialog / AlertDialog）。ピル/シートの丸い言語に合わせる */
-  --Radius-Sheet:   2rem;    /* 32px — 端寄せ Sheet（bottom / float） */
-}
+   定義はこのファイルから styles/radius.css へ切り出した（issue #553）。
+   ファイル先頭の @import 群で読み込んでいる。 */
 
 /* ─── Section Spacing Tokens ───
    コンポーネント内の 4px scale と分離した、ページセクション間の縦リズム。

package/src/styles/product-theme.css

@@ -35,6 +35,12 @@
      prop 追加も要らない（Server Component のまま使える）。
    ============================================================= */
 
+/* 角丸の意味別トークン（--Radius-Surface / -Modal / -Sheet）。preset を使わず
+   個別 subpath だけを import する消費側でも角丸が 0 にならないよう、ここから
+   読み込む（issue #553）。定義元は radius.css の1箇所で、値はテーマ非依存の
+   固定値。Radius だけが欲しい場合は "ksk-design-system/tokens/radius" を使う。 */
+@import "./radius.css";
+
 :root {
   /* ─── Control: Button 系の内寸 ───
      5段スケール。Button の size バリアント xs / sm / default(=Md) / lg / xl と

package/src/styles/radius.css

@@ -0,0 +1,23 @@
+/* =============================================================
+   KSK Design System — Radius Tokens（issue #553）
+
+   角丸の意味別トークン。コンポーネントは rounded-[var(--Radius-*)] で参照し、
+   rounded-lg / rounded-[32px] のベタ書き（＝ドリフトの元）を避ける。
+   テーマ非依存（Brand / Light-Dark で変わらない固定値）。
+   面 < モーダル < シート の順に丸くなる階層。
+
+   このファイルが Radius トークンの**唯一の定義元**。`preset.css` と
+   `product-theme.css` の両方から読み込まれる（同値の再定義なので二重読み込みは
+   無害。consumer が preset の後ろで上書きすれば従来どおり後勝ちで効く）。
+
+   preset を使わずトークン CSS を個別 import する消費側は、
+   `tokens/product-theme` を読めば自動的に含まれる。Radius だけを取りたい場合は:
+
+     @import "ksk-design-system/tokens/radius";
+   ============================================================= */
+
+:root {
+  --Radius-Surface: 0.875rem; /* 14px  — Card / Popover パネル / 面の既定。丸くしたいならここを上げる */
+  --Radius-Modal:   1.5rem;  /* 24px — 中央モーダル（Dialog / AlertDialog）。ピル/シートの丸い言語に合わせる */
+  --Radius-Sheet:   2rem;    /* 32px — 端寄せ Sheet（bottom / float） */
+}

package/src/styles/typography.css

@@ -66,28 +66,28 @@
 /* ─── Body（本文） ─── */
 
 @utility typo-body-lg {
-  font-size: calc(16px * var(--Product-Type-Scale, 1));
+  font-size: calc(18px * var(--Product-Type-Scale, 1));
   line-height: 1.75;
   font-weight: 400;
 }
 
 @utility typo-body-md {
-  font-size: calc(14px * var(--Product-Type-Scale, 1));
+  font-size: calc(16px * var(--Product-Type-Scale, 1));
   line-height: 1.75;
   font-weight: 400;
 }
 
 @utility typo-body-sm {
-  font-size: calc(12px * var(--Product-Type-Scale, 1));
+  font-size: calc(14px * var(--Product-Type-Scale, 1));
   line-height: 1.5;
   font-weight: 400;
 }
 
-/* body-xs(10px) は本文禁止 — 補助ラベル/メタ情報専用。
-   本文の最小は typo-body-sm(12px)。10px を本文に使うとモバイル可読性の
+/* body-xs(12px) は本文禁止 — 補助ラベル/メタ情報専用。
+   本文の最小は typo-body-sm(14px)。12px を本文に使うとモバイル可読性の
    下限（iOS HIG ~11pt / WCAG 観点）を割る。 */
 @utility typo-body-xs {
-  font-size: calc(10px * var(--Product-Type-Scale, 1));
+  font-size: calc(12px * var(--Product-Type-Scale, 1));
   line-height: 1.5;
   font-weight: 400;
 }

package/tokens.json

@@ -520,25 +520,25 @@
     },
     "body": {
       "lg": {
-        "size": "16px",
+        "size": "18px",
         "weight": 400,
         "lineHeight": 1.75
       },
       "md": {
-        "size": "14px",
+        "size": "16px",
         "weight": 400,
         "lineHeight": 1.75
       },
       "sm": {
-        "size": "12px",
+        "size": "14px",
         "weight": 400,
         "lineHeight": 1.5
       },
       "xs": {
-        "size": "10px",
+        "size": "12px",
         "weight": 400,
         "lineHeight": 1.5,
-        "restriction": "本文禁止。補助ラベル/メタ情報専用。本文の下限は body.sm(12px)。"
+        "restriction": "本文禁止。補助ラベル/メタ情報専用。本文の下限は body.sm(14px)。"
       }
     },
     "label": {