melta-app 0.5.3 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +493 -186
- package/docs/architecture.md +99 -0
- package/eslint-rules/melta.d.mts +44 -0
- package/lib/module/a11y/tap-target.js +41 -0
- package/lib/module/a11y/tap-target.js.map +1 -0
- package/lib/module/components/ActionSheet.js +20 -6
- package/lib/module/components/ActionSheet.js.map +1 -1
- package/lib/module/components/Alert.js +11 -7
- package/lib/module/components/Alert.js.map +1 -1
- package/lib/module/components/Avatar.js +7 -2
- package/lib/module/components/Avatar.js.map +1 -1
- package/lib/module/components/BottomSheet.js +11 -3
- package/lib/module/components/BottomSheet.js.map +1 -1
- package/lib/module/components/Card.js +4 -3
- package/lib/module/components/Card.js.map +1 -1
- package/lib/module/components/Checkbox.js +8 -5
- package/lib/module/components/Checkbox.js.map +1 -1
- package/lib/module/components/EmptyState.js +2 -1
- package/lib/module/components/EmptyState.js.map +1 -1
- package/lib/module/components/Header.js.map +1 -1
- package/lib/module/components/Image.js +5 -3
- package/lib/module/components/Image.js.map +1 -1
- package/lib/module/components/Modal.js +12 -4
- package/lib/module/components/Modal.js.map +1 -1
- package/lib/module/components/Progress.js +2 -1
- package/lib/module/components/Progress.js.map +1 -1
- package/lib/module/components/Radio.js +11 -3
- package/lib/module/components/Radio.js.map +1 -1
- package/lib/module/components/Screen.js +28 -3
- package/lib/module/components/Screen.js.map +1 -1
- package/lib/module/components/Skeleton.js +2 -1
- package/lib/module/components/Skeleton.js.map +1 -1
- package/lib/module/components/Surface.js +2 -1
- package/lib/module/components/Surface.js.map +1 -1
- package/lib/module/components/TextField.js +16 -4
- package/lib/module/components/TextField.js.map +1 -1
- package/lib/module/components/Toast.js +17 -9
- package/lib/module/components/Toast.js.map +1 -1
- package/lib/module/components/Toggle.js +13 -4
- package/lib/module/components/Toggle.js.map +1 -1
- package/lib/module/components/alert.styles.js +12 -26
- package/lib/module/components/alert.styles.js.map +1 -1
- package/lib/module/components/avatar.styles.js +24 -2
- package/lib/module/components/avatar.styles.js.map +1 -1
- package/lib/module/components/card.validate.js.map +1 -1
- package/lib/module/components/checkbox.styles.js +5 -2
- package/lib/module/components/checkbox.styles.js.map +1 -1
- package/lib/module/components/index.js.map +1 -1
- package/lib/module/components/modal.styles.js +9 -0
- package/lib/module/components/modal.styles.js.map +1 -1
- package/lib/module/components/radio.styles.js +11 -2
- package/lib/module/components/radio.styles.js.map +1 -1
- package/lib/module/components/safe-area-registry.js +64 -13
- package/lib/module/components/safe-area-registry.js.map +1 -1
- package/lib/module/components/status-colors.js +53 -0
- package/lib/module/components/status-colors.js.map +1 -0
- package/lib/module/components/textfield.styles.js +15 -8
- package/lib/module/components/textfield.styles.js.map +1 -1
- package/lib/module/components/toast.styles.js +36 -25
- package/lib/module/components/toast.styles.js.map +1 -1
- package/lib/module/components/toggle.styles.js +20 -0
- package/lib/module/components/toggle.styles.js.map +1 -1
- package/lib/module/icons/Icon.js +4 -1
- package/lib/module/icons/Icon.js.map +1 -1
- package/lib/module/icons/icon.styles.js +32 -1
- package/lib/module/icons/icon.styles.js.map +1 -1
- package/lib/module/icons/index.js.map +1 -1
- package/lib/module/index.js.map +1 -1
- package/lib/module/primitives/Button.js +23 -11
- package/lib/module/primitives/Button.js.map +1 -1
- package/lib/module/primitives/Metric.js +2 -1
- package/lib/module/primitives/Metric.js.map +1 -1
- package/lib/module/primitives/Row.js.map +1 -1
- package/lib/module/primitives/Stack.js.map +1 -1
- package/lib/module/primitives/Tag.js +15 -7
- package/lib/module/primitives/Tag.js.map +1 -1
- package/lib/module/primitives/Text.js +28 -7
- package/lib/module/primitives/Text.js.map +1 -1
- package/lib/module/primitives/_internal/focus-ring.js.map +1 -1
- package/lib/module/primitives/button.styles.js +58 -8
- package/lib/module/primitives/button.styles.js.map +1 -1
- package/lib/module/primitives/index.js.map +1 -1
- package/lib/module/primitives/metric.styles.js +4 -1
- package/lib/module/primitives/metric.styles.js.map +1 -1
- package/lib/module/primitives/tag.styles.js +42 -3
- package/lib/module/primitives/tag.styles.js.map +1 -1
- package/lib/module/primitives/text.styles.js +10 -5
- package/lib/module/primitives/text.styles.js.map +1 -1
- package/lib/module/safe-area/index.js +11 -5
- package/lib/module/safe-area/index.js.map +1 -1
- package/lib/module/theme/ThemeProvider.js +5 -2
- package/lib/module/theme/ThemeProvider.js.map +1 -1
- package/lib/module/theme/define-theme.js +27 -1
- package/lib/module/theme/define-theme.js.map +1 -1
- package/lib/module/theme/index.js +7 -8
- package/lib/module/theme/index.js.map +1 -1
- package/lib/module/theme/letter-spacing.js +20 -0
- package/lib/module/theme/letter-spacing.js.map +1 -0
- package/lib/module/theme/line-height.js +52 -0
- package/lib/module/theme/line-height.js.map +1 -0
- package/lib/module/theme/native-theme.js +8 -7
- package/lib/module/theme/native-theme.js.map +1 -1
- package/lib/typescript/src/a11y/tap-target.d.ts +34 -0
- package/lib/typescript/src/a11y/tap-target.d.ts.map +1 -0
- package/lib/typescript/src/components/ActionSheet.d.ts +8 -1
- package/lib/typescript/src/components/ActionSheet.d.ts.map +1 -1
- package/lib/typescript/src/components/Alert.d.ts +9 -2
- package/lib/typescript/src/components/Alert.d.ts.map +1 -1
- package/lib/typescript/src/components/Avatar.d.ts +1 -1
- package/lib/typescript/src/components/Avatar.d.ts.map +1 -1
- package/lib/typescript/src/components/BottomSheet.d.ts +4 -1
- package/lib/typescript/src/components/BottomSheet.d.ts.map +1 -1
- package/lib/typescript/src/components/Card.d.ts +2 -2
- package/lib/typescript/src/components/Checkbox.d.ts +3 -3
- package/lib/typescript/src/components/Checkbox.d.ts.map +1 -1
- package/lib/typescript/src/components/Image.d.ts +4 -3
- package/lib/typescript/src/components/Image.d.ts.map +1 -1
- package/lib/typescript/src/components/Modal.d.ts +9 -3
- package/lib/typescript/src/components/Modal.d.ts.map +1 -1
- package/lib/typescript/src/components/Progress.d.ts +1 -1
- package/lib/typescript/src/components/Progress.d.ts.map +1 -1
- package/lib/typescript/src/components/Radio.d.ts +3 -2
- package/lib/typescript/src/components/Radio.d.ts.map +1 -1
- package/lib/typescript/src/components/Screen.d.ts +28 -5
- package/lib/typescript/src/components/Screen.d.ts.map +1 -1
- package/lib/typescript/src/components/Skeleton.d.ts +1 -1
- package/lib/typescript/src/components/Skeleton.d.ts.map +1 -1
- package/lib/typescript/src/components/Surface.d.ts +1 -1
- package/lib/typescript/src/components/Surface.d.ts.map +1 -1
- package/lib/typescript/src/components/TextField.d.ts +11 -4
- package/lib/typescript/src/components/TextField.d.ts.map +1 -1
- package/lib/typescript/src/components/Toast.d.ts +10 -3
- package/lib/typescript/src/components/Toast.d.ts.map +1 -1
- package/lib/typescript/src/components/Toggle.d.ts +3 -2
- package/lib/typescript/src/components/Toggle.d.ts.map +1 -1
- package/lib/typescript/src/components/action-sheet.styles.d.ts +1 -1
- package/lib/typescript/src/components/action-sheet.styles.d.ts.map +1 -1
- package/lib/typescript/src/components/alert.styles.d.ts +14 -14
- package/lib/typescript/src/components/alert.styles.d.ts.map +1 -1
- package/lib/typescript/src/components/avatar.styles.d.ts +36 -1
- package/lib/typescript/src/components/avatar.styles.d.ts.map +1 -1
- package/lib/typescript/src/components/bottom-sheet.styles.d.ts +1 -1
- package/lib/typescript/src/components/bottom-sheet.styles.d.ts.map +1 -1
- package/lib/typescript/src/components/card.styles.d.ts +1 -1
- package/lib/typescript/src/components/card.styles.d.ts.map +1 -1
- package/lib/typescript/src/components/card.validate.d.ts +1 -1
- package/lib/typescript/src/components/card.validate.d.ts.map +1 -1
- package/lib/typescript/src/components/checkbox.styles.d.ts +6 -3
- package/lib/typescript/src/components/checkbox.styles.d.ts.map +1 -1
- package/lib/typescript/src/components/empty-state.styles.d.ts +1 -1
- package/lib/typescript/src/components/empty-state.styles.d.ts.map +1 -1
- package/lib/typescript/src/components/header.styles.d.ts +1 -1
- package/lib/typescript/src/components/header.styles.d.ts.map +1 -1
- package/lib/typescript/src/components/image.styles.d.ts +1 -1
- package/lib/typescript/src/components/image.styles.d.ts.map +1 -1
- package/lib/typescript/src/components/index.d.ts +18 -18
- package/lib/typescript/src/components/index.d.ts.map +1 -1
- package/lib/typescript/src/components/modal.styles.d.ts +13 -2
- package/lib/typescript/src/components/modal.styles.d.ts.map +1 -1
- package/lib/typescript/src/components/progress.styles.d.ts +1 -1
- package/lib/typescript/src/components/progress.styles.d.ts.map +1 -1
- package/lib/typescript/src/components/radio.styles.d.ts +10 -2
- package/lib/typescript/src/components/radio.styles.d.ts.map +1 -1
- package/lib/typescript/src/components/safe-area-registry.d.ts +47 -11
- package/lib/typescript/src/components/safe-area-registry.d.ts.map +1 -1
- package/lib/typescript/src/components/screen.styles.d.ts +1 -1
- package/lib/typescript/src/components/screen.styles.d.ts.map +1 -1
- package/lib/typescript/src/components/skeleton.styles.d.ts +1 -1
- package/lib/typescript/src/components/skeleton.styles.d.ts.map +1 -1
- package/lib/typescript/src/components/status-colors.d.ts +33 -0
- package/lib/typescript/src/components/status-colors.d.ts.map +1 -0
- package/lib/typescript/src/components/surface.styles.d.ts +1 -1
- package/lib/typescript/src/components/surface.styles.d.ts.map +1 -1
- package/lib/typescript/src/components/textfield.styles.d.ts +9 -5
- package/lib/typescript/src/components/textfield.styles.d.ts.map +1 -1
- package/lib/typescript/src/components/toast.styles.d.ts +34 -14
- package/lib/typescript/src/components/toast.styles.d.ts.map +1 -1
- package/lib/typescript/src/components/toggle.styles.d.ts +17 -1
- package/lib/typescript/src/components/toggle.styles.d.ts.map +1 -1
- package/lib/typescript/src/icons/Icon.d.ts +12 -6
- package/lib/typescript/src/icons/Icon.d.ts.map +1 -1
- package/lib/typescript/src/icons/icon.styles.d.ts +14 -2
- package/lib/typescript/src/icons/icon.styles.d.ts.map +1 -1
- package/lib/typescript/src/icons/index.d.ts +3 -3
- package/lib/typescript/src/icons/index.d.ts.map +1 -1
- package/lib/typescript/src/index.d.ts +4 -4
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/primitives/Button.d.ts +8 -4
- package/lib/typescript/src/primitives/Button.d.ts.map +1 -1
- package/lib/typescript/src/primitives/Metric.d.ts +1 -1
- package/lib/typescript/src/primitives/Metric.d.ts.map +1 -1
- package/lib/typescript/src/primitives/Row.d.ts +2 -2
- package/lib/typescript/src/primitives/Row.d.ts.map +1 -1
- package/lib/typescript/src/primitives/Stack.d.ts +2 -2
- package/lib/typescript/src/primitives/Stack.d.ts.map +1 -1
- package/lib/typescript/src/primitives/Tag.d.ts +2 -2
- package/lib/typescript/src/primitives/Tag.d.ts.map +1 -1
- package/lib/typescript/src/primitives/Text.d.ts +20 -6
- package/lib/typescript/src/primitives/Text.d.ts.map +1 -1
- package/lib/typescript/src/primitives/button.styles.d.ts +44 -7
- package/lib/typescript/src/primitives/button.styles.d.ts.map +1 -1
- package/lib/typescript/src/primitives/index.d.ts +6 -6
- package/lib/typescript/src/primitives/index.d.ts.map +1 -1
- package/lib/typescript/src/primitives/metric.styles.d.ts +1 -1
- package/lib/typescript/src/primitives/metric.styles.d.ts.map +1 -1
- package/lib/typescript/src/primitives/row.styles.d.ts +1 -1
- package/lib/typescript/src/primitives/row.styles.d.ts.map +1 -1
- package/lib/typescript/src/primitives/stack.styles.d.ts +1 -1
- package/lib/typescript/src/primitives/stack.styles.d.ts.map +1 -1
- package/lib/typescript/src/primitives/tag.styles.d.ts +34 -1
- package/lib/typescript/src/primitives/tag.styles.d.ts.map +1 -1
- package/lib/typescript/src/primitives/text.styles.d.ts +2 -4
- package/lib/typescript/src/primitives/text.styles.d.ts.map +1 -1
- package/lib/typescript/src/safe-area/index.d.ts +19 -5
- package/lib/typescript/src/safe-area/index.d.ts.map +1 -1
- package/lib/typescript/src/theme/ThemeProvider.d.ts +2 -2
- package/lib/typescript/src/theme/ThemeProvider.d.ts.map +1 -1
- package/lib/typescript/src/theme/define-theme.d.ts +15 -2
- package/lib/typescript/src/theme/define-theme.d.ts.map +1 -1
- package/lib/typescript/src/theme/index.d.ts +14 -13
- package/lib/typescript/src/theme/index.d.ts.map +1 -1
- package/lib/typescript/src/theme/letter-spacing.d.ts +15 -0
- package/lib/typescript/src/theme/letter-spacing.d.ts.map +1 -0
- package/lib/typescript/src/theme/line-height.d.ts +44 -0
- package/lib/typescript/src/theme/line-height.d.ts.map +1 -0
- package/lib/typescript/src/theme/native-theme.d.ts +1 -1
- package/lib/typescript/src/theme/native-theme.d.ts.map +1 -1
- package/lib/typescript/src/theme/types.d.ts +10 -1
- package/lib/typescript/src/theme/types.d.ts.map +1 -1
- package/llms.txt +2 -1
- package/package.json +22 -7
- package/src/a11y/tap-target.ts +38 -0
- package/src/components/ActionSheet.tsx +25 -15
- package/src/components/Alert.tsx +37 -10
- package/src/components/Avatar.tsx +12 -4
- package/src/components/BottomSheet.tsx +16 -13
- package/src/components/Card.tsx +9 -8
- package/src/components/Checkbox.tsx +12 -9
- package/src/components/EmptyState.tsx +7 -6
- package/src/components/Header.tsx +4 -4
- package/src/components/Image.tsx +9 -7
- package/src/components/Modal.tsx +22 -6
- package/src/components/Progress.tsx +5 -4
- package/src/components/Radio.tsx +11 -6
- package/src/components/Screen.tsx +66 -8
- package/src/components/Skeleton.tsx +6 -5
- package/src/components/Surface.tsx +5 -4
- package/src/components/TextField.tsx +25 -7
- package/src/components/Toast.tsx +33 -11
- package/src/components/Toggle.tsx +15 -6
- package/src/components/action-sheet.styles.ts +1 -1
- package/src/components/alert.styles.ts +13 -25
- package/src/components/avatar.styles.ts +25 -3
- package/src/components/bottom-sheet.styles.ts +1 -1
- package/src/components/card.styles.ts +1 -1
- package/src/components/card.validate.ts +2 -2
- package/src/components/checkbox.styles.ts +6 -3
- package/src/components/empty-state.styles.ts +1 -1
- package/src/components/header.styles.ts +1 -1
- package/src/components/image.styles.ts +1 -1
- package/src/components/index.ts +18 -18
- package/src/components/modal.styles.ts +11 -2
- package/src/components/progress.styles.ts +1 -1
- package/src/components/radio.styles.ts +11 -2
- package/src/components/safe-area-registry.ts +81 -14
- package/src/components/screen.styles.ts +1 -1
- package/src/components/skeleton.styles.ts +1 -1
- package/src/components/status-colors.ts +59 -0
- package/src/components/surface.styles.ts +1 -1
- package/src/components/textfield.styles.ts +18 -15
- package/src/components/toast.styles.ts +32 -25
- package/src/components/toggle.styles.ts +21 -1
- package/src/icons/Icon.tsx +13 -8
- package/src/icons/icon.styles.ts +38 -3
- package/src/icons/index.ts +3 -3
- package/src/index.ts +4 -4
- package/src/primitives/Button.tsx +28 -14
- package/src/primitives/Metric.tsx +5 -4
- package/src/primitives/Row.tsx +4 -4
- package/src/primitives/Stack.tsx +4 -4
- package/src/primitives/Tag.tsx +29 -11
- package/src/primitives/Text.tsx +42 -9
- package/src/primitives/_internal/focus-ring.tsx +1 -1
- package/src/primitives/button.styles.ts +63 -10
- package/src/primitives/index.ts +6 -6
- package/src/primitives/metric.styles.ts +9 -2
- package/src/primitives/row.styles.ts +1 -1
- package/src/primitives/stack.styles.ts +1 -1
- package/src/primitives/tag.styles.ts +43 -4
- package/src/primitives/text.styles.ts +10 -6
- package/src/safe-area/index.ts +21 -7
- package/src/theme/ThemeProvider.tsx +8 -5
- package/src/theme/define-theme.ts +33 -2
- package/src/theme/index.ts +18 -16
- package/src/theme/letter-spacing.ts +17 -0
- package/src/theme/line-height.ts +53 -0
- package/src/theme/native-theme.ts +9 -8
- package/src/theme/types.ts +10 -1
|
@@ -5,8 +5,41 @@
|
|
|
5
5
|
* 直接実行できる。recipes/app/tag.recipe.json(melta-contracts の styleRefs)との
|
|
6
6
|
* 機械照合は scripts/lib/tag-conformance.test.ts が行う。
|
|
7
7
|
*/
|
|
8
|
-
import type { NativeTheme, ThemeMode, FontSizeKey } from "../theme";
|
|
8
|
+
import type { NativeTheme, ThemeMode, FontSizeKey } from "../theme/index.js";
|
|
9
9
|
export type TagVariant = "basic" | "removable" | "filter-chip";
|
|
10
|
+
/** label の fontSize token キー(component / resolver / 検算が同じキーを読む SSOT)。 */
|
|
11
|
+
export declare const TAG_SPEC: {
|
|
12
|
+
/** basic / removable の label。 */
|
|
13
|
+
readonly labelFont: "xs";
|
|
14
|
+
/** filter-chip の label(押せる要素なので一段大きい)。 */
|
|
15
|
+
readonly chipLabelFont: "sm";
|
|
16
|
+
};
|
|
17
|
+
/**
|
|
18
|
+
* removable の × の当たり判定(正典パターン: 視覚 24pt + hitSlop 10 = 実効 44pt)。
|
|
19
|
+
* 親 Tag の高さ(padding 駆動で 34pt 前後)を超えられないので × 自身に持たせる。
|
|
20
|
+
*/
|
|
21
|
+
export declare const TAG_REMOVE_TAP_TARGET: {
|
|
22
|
+
readonly minWidth: 24;
|
|
23
|
+
readonly minHeight: 24;
|
|
24
|
+
readonly hitSlop: 10;
|
|
25
|
+
};
|
|
26
|
+
/**
|
|
27
|
+
* filter-chip(押せる chip 本体)の縦 hitSlop。
|
|
28
|
+
*
|
|
29
|
+
* chip は背景と枠を持つので minHeight で伸ばすと**見た目が変わる**(他 variant と高さが揃わない)。
|
|
30
|
+
* よって視覚寸法は据え置き、当たり判定だけ広げる:
|
|
31
|
+
* 視覚高さ 34pt(paddingVertical 4 × 2 + label sm の lineHeight 26)+ 5 × 2 = 44pt。
|
|
32
|
+
*
|
|
33
|
+
* padding 駆動なので fontScale で視覚高さ自体が伸びる = 拡大時に過剰な当たり判定にならない。
|
|
34
|
+
* ⚠️ literal で持つ(resolveTagFilterChipVisualHeight から導出しない)。導出にすると
|
|
35
|
+
* 寸法変更に hitSlop が黙って追随し、conformance が fail-open になる。
|
|
36
|
+
*/
|
|
37
|
+
export declare const TAG_FILTER_CHIP_VERTICAL_HIT_SLOP = 5;
|
|
38
|
+
/**
|
|
39
|
+
* filter-chip の視覚高さ(padding 駆動)。conformance が 44pt 到達を検算するための実測値。
|
|
40
|
+
* = paddingVertical × 2 + label(sm)の lineHeight。
|
|
41
|
+
*/
|
|
42
|
+
export declare function resolveTagFilterChipVisualHeight(theme: NativeTheme): number;
|
|
10
43
|
/** 共通形状(px-3 py-1 gap-1 rounded-full。tag.recipe の全 variant style と共通の寸法キー)。 */
|
|
11
44
|
export declare function resolveTagBase(theme: NativeTheme): {
|
|
12
45
|
gap: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tag.styles.d.ts","sourceRoot":"","sources":["../../../../src/primitives/tag.styles.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"tag.styles.d.ts","sourceRoot":"","sources":["../../../../src/primitives/tag.styles.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAI7E,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,WAAW,GAAG,aAAa,CAAC;AAE/D,yEAAyE;AACzE,eAAO,MAAM,QAAQ;IACnB,iCAAiC;;IAEjC,0CAA0C;;CAE+B,CAAC;AAE5E;;;GAGG;AACH,eAAO,MAAM,qBAAqB;;;;CAAuB,CAAC;AAE1D;;;;;;;;;;GAUG;AACH,eAAO,MAAM,iCAAiC,IAAI,CAAC;AAEnD;;;GAGG;AACH,wBAAgB,gCAAgC,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM,CAI3E;AAED,+EAA+E;AAC/E,wBAAgB,cAAc,CAAC,KAAK,EAAE,WAAW,GAAG;IAClD,GAAG,EAAE,MAAM,CAAC;IACZ,iBAAiB,EAAE,MAAM,CAAC;IAC1B,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;CACtB,CAOA;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,WAAW,EAClB,IAAI,EAAE,SAAS,EACf,OAAO,EAAE,UAAU,EACnB,QAAQ,UAAQ,GACf;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,WAAW,CAAA;CAAE,CAwB7F"}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* 直接実行できる。recipes/app/text.recipe.json(melta-contracts の styleRefs)との
|
|
6
6
|
* 機械照合は scripts/lib/text-conformance.test.ts が行う。
|
|
7
7
|
*/
|
|
8
|
-
import type { NativeTheme, FontSizeKey, FontWeightKey, FontWeightValue } from "../theme";
|
|
8
|
+
import type { NativeTheme, FontSizeKey, FontWeightKey, FontWeightValue } from "../theme/index.js";
|
|
9
9
|
/** letterSpacing の切替軸(text.recipe description の role prop に対応)。 */
|
|
10
10
|
export type TextRole = "heading" | "body";
|
|
11
11
|
/** Text の形状 style(mode 非依存部分。文字色は render 時に semantic colors から取る)。 */
|
|
@@ -18,9 +18,7 @@ export interface TextShape {
|
|
|
18
18
|
/**
|
|
19
19
|
* variant / role / weight → 形状解決(text.recipe styleRefs の 1:1 写像)。
|
|
20
20
|
* - fontSize token は複合値(px + lineHeight 比率)。theme 生成時に lineHeight は px 化済み。
|
|
21
|
-
* - letterSpacing は em 比率 token のため fontSize × ratio で pt
|
|
22
|
-
* theme の resolveLetterSpacing と同一式だが、theme index 経由の runtime import は
|
|
23
|
-
* ThemeProvider → react-native を引くため、pure に保つ目的でここでは式を直書きする。
|
|
21
|
+
* - letterSpacing は em 比率 token のため fontSize × ratio で pt 化する(resolveLetterSpacing)。
|
|
24
22
|
*/
|
|
25
23
|
export declare function resolveTextShape(theme: NativeTheme, variant: FontSizeKey, role: TextRole, weight?: FontWeightKey): TextShape;
|
|
26
24
|
//# sourceMappingURL=text.styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text.styles.d.ts","sourceRoot":"","sources":["../../../../src/primitives/text.styles.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"text.styles.d.ts","sourceRoot":"","sources":["../../../../src/primitives/text.styles.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAMlG,mEAAmE;AACnE,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;AAE1C,sEAAsE;AACtE,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,eAAe,CAAC;CAC9B;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,WAAW,EACpB,IAAI,EAAE,QAAQ,EACd,MAAM,CAAC,EAAE,aAAa,GACrB,SAAS,CAUX"}
|
|
@@ -11,9 +11,10 @@
|
|
|
11
11
|
* import { enableSafeAreaContext } from "melta-app/safe-area";
|
|
12
12
|
* enableSafeAreaContext();
|
|
13
13
|
*
|
|
14
|
-
* これで Screen の SafeArea が useSafeAreaInsets() + View の
|
|
15
|
-
* Provider の context 値を render 中に同期参照して padding を付けるため、
|
|
16
|
-
* SafeAreaView の layout/state 更新を待たず、初回 render から inset が反映される。
|
|
14
|
+
* これで Screen / ActionSheet / BottomSheet の SafeArea が useSafeAreaInsets() + View の
|
|
15
|
+
* adapter に切り替わる。Provider の context 値を render 中に同期参照して padding を付けるため、
|
|
16
|
+
* native SafeAreaView の layout/state 更新を待たず、初回 render から inset が反映される。
|
|
17
|
+
* Android でも効く(RN core の SafeAreaView は Android では完全 no-op)。
|
|
17
18
|
*
|
|
18
19
|
* ⚠️ 前提: アプリの root に SafeAreaProvider が必要(無いと useSafeAreaInsets が throw
|
|
19
20
|
* する)。初回 render から正しい inset を使うには Provider に initialMetrics も渡す。
|
|
@@ -26,9 +27,22 @@
|
|
|
26
27
|
import { type Edge } from "react-native-safe-area-context";
|
|
27
28
|
/** enableSafeAreaContext() の設定。edges 省略時は従来相当の全 edge。 */
|
|
28
29
|
export interface EnableSafeAreaContextOptions {
|
|
29
|
-
/**
|
|
30
|
+
/**
|
|
31
|
+
* **Screen の既定 edge**(`edges` prop を渡さなかった Screen に適用される)。
|
|
32
|
+
* tab bar 等が担当する edge は除外する。
|
|
33
|
+
*
|
|
34
|
+
* ⚠️ 0.5.x までは「アプリ全体で 1 個のグローバル」だったが、edge は消費者ごとに
|
|
35
|
+
* 決まるべきものなので既定値の意味に変わった。ActionSheet / BottomSheet は画面下端に
|
|
36
|
+
* 出る都合上、ここの指定に関わらず自前の edge(bottom + 左右)を使う。
|
|
37
|
+
* 画面ごとに変えたい場合は `<Screen edges={["top"]} />` のように Screen 側で指定する。
|
|
38
|
+
*/
|
|
30
39
|
edges?: readonly Edge[];
|
|
31
40
|
}
|
|
32
|
-
/**
|
|
41
|
+
/**
|
|
42
|
+
* melta の SafeArea を context 同期参照の View adapter に切り替える。
|
|
43
|
+
*
|
|
44
|
+
* registry には**ファクトリ**を渡す(消費者ごとに edges が違うため)。同じ edges 集合には
|
|
45
|
+
* 同じコンポーネント参照が返るよう memo するのは registry 側の責務。
|
|
46
|
+
*/
|
|
33
47
|
export declare function enableSafeAreaContext(options?: EnableSafeAreaContextOptions): void;
|
|
34
48
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/safe-area/index.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/safe-area/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAIH,OAAO,EAEL,KAAK,IAAI,EAEV,MAAM,gCAAgC,CAAC;AASxC,yDAAyD;AACzD,MAAM,WAAW,4BAA4B;IAC3C;;;;;;;;OAQG;IACH,KAAK,CAAC,EAAE,SAAS,IAAI,EAAE,CAAC;CACzB;AAyDD;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,GAAE,4BAAiC,GAAG,IAAI,CAEtF"}
|
|
@@ -12,8 +12,8 @@
|
|
|
12
12
|
* `defineTheme()` の戻り値だけ(define-theme.ts 参照)。
|
|
13
13
|
*/
|
|
14
14
|
import { type ReactNode } from "react";
|
|
15
|
-
import { type ResolvedCapabilities, type ResolvedNativeTheme } from "./define-theme";
|
|
16
|
-
import type { NativeTheme, SemanticColors, ThemeMode } from "./types";
|
|
15
|
+
import { type ResolvedCapabilities, type ResolvedNativeTheme } from "./define-theme.js";
|
|
16
|
+
import type { NativeTheme, SemanticColors, ThemeMode } from "./types.js";
|
|
17
17
|
export type { ThemeMode };
|
|
18
18
|
export interface ThemeContextValue {
|
|
19
19
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAsC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG3E,OAAO,EAAmC,KAAK,oBAAoB,EAAE,KAAK,mBAAmB,EAA2B,MAAM,
|
|
1
|
+
{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAsC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG3E,OAAO,EAAmC,KAAK,oBAAoB,EAAE,KAAK,mBAAmB,EAA2B,MAAM,mBAAmB,CAAC;AAClJ,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEzE,YAAY,EAAE,SAAS,EAAE,CAAC;AAE1B,MAAM,WAAW,iBAAiB;IAChC;;;;;;OAMG;IACH,KAAK,EAAE,WAAW,CAAC;IACnB,gBAAgB;IAChB,IAAI,EAAE,SAAS,CAAC;IAChB,2EAA2E;IAC3E,MAAM,EAAE,cAAc,CAAC;IACvB,mDAAmD;IACnD,YAAY,EAAE,oBAAoB,CAAC;CACpC;AAsCD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;OAIG;IACH,KAAK,CAAC,EAAE,mBAAmB,CAAC;CAC7B;AAED,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,kBAAkB,2CAiChF;AAED,wBAAgB,QAAQ,IAAI,iBAAiB,CAM5C"}
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
* theme でも現状 **必須のまま**。①の射程は colorScheme 軸だけで、それらの capability 化は
|
|
20
20
|
* 後続(accent 依存の除去)で扱う。
|
|
21
21
|
*/
|
|
22
|
-
import type { NativeTheme, SemanticColors, ThemeColor, ThemeMode } from "./types";
|
|
22
|
+
import type { NativeTheme, SemanticColors, ThemeColor, ThemeMode } from "./types.js";
|
|
23
23
|
/**
|
|
24
24
|
* 開発ビルドか。**裸の `__DEV__` を直接書かないこと。**
|
|
25
25
|
*
|
|
@@ -78,9 +78,15 @@ export interface ThemeModeViolation {
|
|
|
78
78
|
* プロパティにも true を返すので、それで判定すると「持っていない mode に置いた番人の getter」を
|
|
79
79
|
* 値として数えてしまい、解決後の theme に対して常に light / dark 両方を返す(0.4.0 の不具合)。
|
|
80
80
|
* 入力(素のデータプロパティ)と解決後(番人つき)のどちらに対しても正しく答える必要がある。
|
|
81
|
+
*
|
|
82
|
+
* @experimental 公開しているが安定 API ではない。挙動・シグネチャは予告なく変わりうる。
|
|
81
83
|
*/
|
|
82
84
|
export declare function declaredModes(semantic: Partial<Record<ThemeMode, SemanticColors>>): ThemeMode[];
|
|
83
|
-
/**
|
|
85
|
+
/**
|
|
86
|
+
* colorScheme capability を `color.semantic` のキー集合から導出する。
|
|
87
|
+
*
|
|
88
|
+
* @experimental 公開しているが安定 API ではない。挙動・シグネチャは予告なく変わりうる。
|
|
89
|
+
*/
|
|
84
90
|
export declare function deriveColorScheme(semantic: Partial<Record<ThemeMode, SemanticColors>>): ColorSchemeCapability;
|
|
85
91
|
/**
|
|
86
92
|
* capability が実際に描ける mode。
|
|
@@ -88,6 +94,8 @@ export declare function deriveColorScheme(semantic: Partial<Record<ThemeMode, Se
|
|
|
88
94
|
* 未知の値は**黙って light-dark 扱いにしない**。TypeScript を使わない消費者や、将来
|
|
89
95
|
* capability の値が増えたときに、誤った値が「両対応の theme」として通ってしまうと、
|
|
90
96
|
* 持っていない mode で描画されて初めて壊れる(=原因から遠い場所で落ちる)。
|
|
97
|
+
*
|
|
98
|
+
* @experimental 公開しているが安定 API ではない。挙動・シグネチャは予告なく変わりうる。
|
|
91
99
|
*/
|
|
92
100
|
export declare function supportedModes(colorScheme: ColorSchemeCapability): ThemeMode[];
|
|
93
101
|
/**
|
|
@@ -99,6 +107,8 @@ export declare function supportedModes(colorScheme: ColorSchemeCapability): Them
|
|
|
99
107
|
* - **`forcedMode` との不一致は報告する**。宣言同士の矛盾=呼び出し側の間違いなので violation を返す。
|
|
100
108
|
* ただし throw はしない(clamp して描き続ける)。厳格に落としたいテストや compiler が
|
|
101
109
|
* violation を error に昇格させる側の責務にする。
|
|
110
|
+
*
|
|
111
|
+
* @experimental 公開しているが安定 API ではない。挙動・シグネチャ・violation の内容は予告なく変わりうる。
|
|
102
112
|
*/
|
|
103
113
|
export declare function resolveMode(colorScheme: ColorSchemeCapability, forcedMode: ThemeMode | undefined, systemMode: ThemeMode): {
|
|
104
114
|
mode: ThemeMode;
|
|
@@ -127,6 +137,9 @@ export declare function validateTheme(options: ThemeOptions): string[];
|
|
|
127
137
|
*
|
|
128
138
|
* dev では validateTheme を1回通し、問題があれば throw する(構造が壊れた theme は
|
|
129
139
|
* 後段で必ず事故になるので早く落とす)。production では検査ごと省く。
|
|
140
|
+
*
|
|
141
|
+
* dev では**戻り値だけ**が入れ子まで再帰 freeze される。入力オブジェクトと公開 export の
|
|
142
|
+
* `nativeTheme` は `cloneTokenTree` で参照を切ってあるので凍らない(0.4.3 で意図的にこうした)。
|
|
130
143
|
*/
|
|
131
144
|
export declare function defineTheme(options: ThemeOptions): ResolvedNativeTheme;
|
|
132
145
|
//# sourceMappingURL=define-theme.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"define-theme.d.ts","sourceRoot":"","sources":["../../../../src/theme/define-theme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,KAAK,EAIV,WAAW,EAGX,cAAc,EAGd,UAAU,EACV,SAAS,EACV,MAAM,
|
|
1
|
+
{"version":3,"file":"define-theme.d.ts","sourceRoot":"","sources":["../../../../src/theme/define-theme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,KAAK,EAIV,WAAW,EAGX,cAAc,EAGd,UAAU,EACV,SAAS,EACV,MAAM,YAAY,CAAC;AAMpB;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,KAAK,EAAE,OAID,CAAC;AAMpB,4DAA4D;AAC5D,MAAM,MAAM,qBAAqB,GAAG,YAAY,GAAG,cAAc,GAAG,aAAa,CAAC;AAElF;;;GAGG;AACH,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,qBAAqB,CAAC;CACpC;AAED;;;GAGG;AACH,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9D,gEAAgE;IAChE,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG;QACpC,QAAQ,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;KACtD,CAAC;CACH;AAED;;;GAGG;AACH,MAAM,WAAW,mBAAoB,SAAQ,YAAY;IACvD,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC;IACvB,QAAQ,CAAC,YAAY,EAAE,oBAAoB,CAAC;CAC7C;AAED,0EAA0E;AAC1E,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,yBAAyB,CAAC;IAChC,oCAAoC;IACpC,SAAS,EAAE,SAAS,CAAC;IACrB,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,EAAE,qBAAqB,CAAC;CACpC;AA0GD;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,QAAQ,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,GAAG,SAAS,EAAE,CAG/F;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,GACnD,qBAAqB,CAQvB;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,WAAW,EAAE,qBAAqB,GAAG,SAAS,EAAE,CAa9E;AAMD;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CACzB,WAAW,EAAE,qBAAqB,EAClC,UAAU,EAAE,SAAS,GAAG,SAAS,EACjC,UAAU,EAAE,SAAS,GACpB;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,kBAAkB,CAAA;CAAE,CAgBrD;AA2BD;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,YAAY,GAAG,MAAM,EAAE,CA0E7D;AA4FD;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,YAAY,GAAG,mBAAmB,CA4BtE"}
|
|
@@ -3,22 +3,23 @@
|
|
|
3
3
|
* 型は types.ts、値は native-theme.ts(melta-contracts から自動生成)。
|
|
4
4
|
* 消費者ブランドの theme を注入する口は define-theme.ts(`defineTheme`)。
|
|
5
5
|
*/
|
|
6
|
-
export * from "./types";
|
|
7
|
-
export { nativeTheme } from "./native-theme";
|
|
8
|
-
export { ThemeProvider, useTheme } from "./ThemeProvider";
|
|
9
|
-
export type { ThemeContextValue, ThemeMode } from "./ThemeProvider";
|
|
10
|
-
export { defineTheme } from "./define-theme";
|
|
6
|
+
export * from "./types.js";
|
|
7
|
+
export { nativeTheme } from "./native-theme.js";
|
|
8
|
+
export { ThemeProvider, useTheme } from "./ThemeProvider.js";
|
|
9
|
+
export type { ThemeContextValue, ThemeMode } from "./ThemeProvider.js";
|
|
10
|
+
export { defineTheme } from "./define-theme.js";
|
|
11
|
+
export { DEFAULT_MIN_LINE_HEIGHT_RATIO, minLineHeightFor, clampLineHeight, } from "./line-height.js";
|
|
12
|
+
/**
|
|
13
|
+
* letterSpacingRatio(em 相当の比率)を適用先の fontSize から letterSpacing(pt) に解決する helper。
|
|
14
|
+
* 実体は pure module(./letter-spacing)。resolver 側は index を経由せず直接 import する
|
|
15
|
+
* (index は ThemeProvider = react-native を引くため)。
|
|
16
|
+
*/
|
|
17
|
+
export { resolveLetterSpacing } from "./letter-spacing.js";
|
|
11
18
|
/**
|
|
12
19
|
* 以下は theme の解決規則を外から検証・再利用するためのヘルパ。
|
|
13
20
|
* **@experimental — 安定 API ではない。** 挙動・シグネチャ・メッセージは予告なく変わりうる。
|
|
14
21
|
* アプリの実行時ロジックが依存する場合は、useTheme().capabilities を使うほうが安全。
|
|
15
22
|
*/
|
|
16
|
-
export { validateTheme, resolveMode, supportedModes, deriveColorScheme, declaredModes, } from "./define-theme";
|
|
17
|
-
export type { ColorSchemeCapability, ResolvedCapabilities, ResolvedNativeTheme, ThemeModeViolation, ThemeOptions, } from "./define-theme";
|
|
18
|
-
/**
|
|
19
|
-
* letterSpacingRatio(em 相当の比率)を、適用先の fontSize から RN の letterSpacing(pt) に解決する。
|
|
20
|
-
* 例: resolveLetterSpacing(18, theme.typography.letterSpacingRatio.body)
|
|
21
|
-
* theme.typography.letterSpacingRatio.* をそのまま style.letterSpacing に入れる誤用を避けるための helper。
|
|
22
|
-
*/
|
|
23
|
-
export declare function resolveLetterSpacing(fontSize: number, ratio: number): number;
|
|
23
|
+
export { validateTheme, resolveMode, supportedModes, deriveColorScheme, declaredModes, } from "./define-theme.js";
|
|
24
|
+
export type { ColorSchemeCapability, ResolvedCapabilities, ResolvedNativeTheme, ThemeModeViolation, ThemeOptions, } from "./define-theme.js";
|
|
24
25
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC7D,YAAY,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EACL,6BAA6B,EAC7B,gBAAgB,EAChB,eAAe,GAChB,MAAM,kBAAkB,CAAC;AAC1B;;;;GAIG;AACH,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC3D;;;;GAIG;AACH,OAAO,EACL,aAAa,EACb,WAAW,EACX,cAAc,EACd,iBAAiB,EACjB,aAAa,GACd,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EACV,qBAAqB,EACrB,oBAAoB,EACpB,mBAAmB,EACnB,kBAAkB,EAClB,YAAY,GACb,MAAM,mBAAmB,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* letter-spacing — letterSpacingRatio(em 相当の比率)→ RN の letterSpacing(pt) の解決。
|
|
3
|
+
*
|
|
4
|
+
* theme/index.ts は ThemeProvider(react-native 依存)を re-export するので、pure style resolver や
|
|
5
|
+
* node テストから index 経由でこの helper を引くと RN を巻き込んでしまう。そのため実体は
|
|
6
|
+
* line-height.ts と同じく **pure module** に置き、index.ts は re-export だけする
|
|
7
|
+
* (公開 API の位置と名前は不変)。以前は index.ts に実体があり、pure 側は同じ式を直書きしていた。
|
|
8
|
+
*/
|
|
9
|
+
/**
|
|
10
|
+
* letterSpacingRatio(em 相当の比率)を、適用先の fontSize から RN の letterSpacing(pt) に解決する。
|
|
11
|
+
* 例: resolveLetterSpacing(18, theme.typography.letterSpacingRatio.body)
|
|
12
|
+
* theme.typography.letterSpacingRatio.* をそのまま style.letterSpacing に入れる誤用を避けるための helper。
|
|
13
|
+
*/
|
|
14
|
+
export declare function resolveLetterSpacing(fontSize: number, ratio: number): number;
|
|
15
|
+
//# sourceMappingURL=letter-spacing.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"letter-spacing.d.ts","sourceRoot":"","sources":["../../../../src/theme/letter-spacing.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAE5E"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* line-height — 行間の安全下限(フォントの字形を欠かせない最小 lineHeight)。
|
|
3
|
+
*
|
|
4
|
+
* なぜ要るか(2026-08-05 modelog dogfood で実害):
|
|
5
|
+
* RN Android の CustomLineHeightSpan は `leading = lineHeight - (ascent + descent)` を計算し、
|
|
6
|
+
* leading が負になると不足分を行の上下から半分ずつ削って帳尻を合わせる。削られた領域の字形
|
|
7
|
+
* (濁点は行の上端にある)は Text 既定の overflow: hidden で消える——「ギ」が「チ」に見える。
|
|
8
|
+
* web はこの機序を持たないため、web の実描画検査では検出できない(Android 実機のみで発現)。
|
|
9
|
+
*
|
|
10
|
+
* 下限は使用フォントのメトリクス(ascent + descent)に依存するが、melta はフォントを同梱しない
|
|
11
|
+
* (system フォント運用)ので、既定は **Android の日本語 system フォント Noto Sans CJK JP の
|
|
12
|
+
* 実測 1.448**(hhea: (1160 + 288) / 1000。AOSP 版・Google Fonts 版とも同値、2026-08-06 実測)
|
|
13
|
+
* を切り上げた 1.45 とする。iOS(Hiragino 1.50 相当)にはこの clip 機序が無いので基準にしない。
|
|
14
|
+
*
|
|
15
|
+
* フォントを同梱する消費者は、そのフォントの実測比率を theme の
|
|
16
|
+
* `typography.minLineHeightRatio` で宣言する(例: LINE Seed JP = 1.61)。
|
|
17
|
+
* 宣言が既定より小さいラテン専用フォント(例: Inter 1.21)も同じ口で下げられる。
|
|
18
|
+
*/
|
|
19
|
+
/**
|
|
20
|
+
* 既定の最小行間比。Android system 日本語フォント(Noto Sans CJK JP)の実測 1.448 の切り上げ。
|
|
21
|
+
* theme が `typography.minLineHeightRatio` を宣言しない場合にこの値へ倒れる(日本語安全側)。
|
|
22
|
+
*/
|
|
23
|
+
export declare const DEFAULT_MIN_LINE_HEIGHT_RATIO = 1.45;
|
|
24
|
+
/**
|
|
25
|
+
* theme が宣言する最小行間比を取り出す(未宣言なら既定へ倒す)。
|
|
26
|
+
* `theme.typography.minLineHeightRatio ?? DEFAULT_MIN_LINE_HEIGHT_RATIO` を各 resolver が
|
|
27
|
+
* 写経すると、既定へ倒す規則が一箇所ずつ腐る(片方だけ ?? を落とす等)ためここに集約する。
|
|
28
|
+
*/
|
|
29
|
+
export declare function minRatioOf(theme: {
|
|
30
|
+
typography: {
|
|
31
|
+
minLineHeightRatio?: number;
|
|
32
|
+
};
|
|
33
|
+
}): number;
|
|
34
|
+
/**
|
|
35
|
+
* fontSize に対する安全な最小 lineHeight(px)。
|
|
36
|
+
* **切り上げ**であることが要点: 四捨五入だと 32 × 1.45 = 46.4 → 46 で下限を割る。
|
|
37
|
+
*/
|
|
38
|
+
export declare function minLineHeightFor(fontSize: number, minRatio: number): number;
|
|
39
|
+
/**
|
|
40
|
+
* 宣言された lineHeight を安全下限でクランプする。
|
|
41
|
+
* 宣言値が下限以上ならそのまま(意匠の行間はどこまでも広げられる。詰める方向だけを止める)。
|
|
42
|
+
*/
|
|
43
|
+
export declare function clampLineHeight(fontSize: number, declaredLineHeight: number, minRatio: number): number;
|
|
44
|
+
//# sourceMappingURL=line-height.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"line-height.d.ts","sourceRoot":"","sources":["../../../../src/theme/line-height.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH;;;GAGG;AACH,eAAO,MAAM,6BAA6B,OAAO,CAAC;AAElD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAAE,UAAU,EAAE;QAAE,kBAAkB,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,GAAG,MAAM,CAEzF;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAE3E;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,MAAM,EAChB,kBAAkB,EAAE,MAAM,EAC1B,QAAQ,EAAE,MAAM,GACf,MAAM,CAER"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"native-theme.d.ts","sourceRoot":"","sources":["../../../../src/theme/native-theme.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"native-theme.d.ts","sourceRoot":"","sources":["../../../../src/theme/native-theme.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9C,eAAO,MAAM,WAAW,EAAE,WAuNzB,CAAC"}
|
|
@@ -64,7 +64,7 @@ export interface ThemeTypography {
|
|
|
64
64
|
/**
|
|
65
65
|
* 初期は system default(未指定 = OS デフォルトフォント)。RN の fontFamily は string 一本で
|
|
66
66
|
* web の fallback 配列のようには効かず、Inter 等を焼くと expo-font でのロード必須になり実機で崩れる。
|
|
67
|
-
* Inter / JetBrains Mono の embed は expo-font
|
|
67
|
+
* Inter / JetBrains Mono の embed は expo-font を導入し、generator へ font マップを渡す形になる(未着手)。
|
|
68
68
|
* それまでは sans/mono とも未指定(= OS の sans / monospace)にする。
|
|
69
69
|
*/
|
|
70
70
|
fontFamily: {
|
|
@@ -84,6 +84,15 @@ export interface ThemeTypography {
|
|
|
84
84
|
heading: number;
|
|
85
85
|
body: number;
|
|
86
86
|
};
|
|
87
|
+
/**
|
|
88
|
+
* 使用フォントが要求する最小行間比((ascent + descent) / unitsPerEm)。
|
|
89
|
+
* これを下回る lineHeight は RN Android で字形の描画領域を削り、濁点などが欠ける
|
|
90
|
+
* (機序と既定値 1.45 の根拠は theme/line-height.ts のコメント)。
|
|
91
|
+
* style resolver は `clampLineHeight()` でこの比率を下限として適用する。
|
|
92
|
+
* 未宣言は DEFAULT_MIN_LINE_HEIGHT_RATIO(1.45 = Android system 日本語フォント基準)へ倒れる。
|
|
93
|
+
* フォントを同梱する消費者は実測値を宣言する(例: LINE Seed JP = 1.61)。
|
|
94
|
+
*/
|
|
95
|
+
minLineHeightRatio?: number;
|
|
87
96
|
}
|
|
88
97
|
/**
|
|
89
98
|
* elevation 1段。iOS は shadow* を、Android は elevation を読む(互いに無視するので
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/theme/types.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C;;;GAGG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEzC,uCAAuC;AACvC,MAAM,MAAM,YAAY,GACpB,IAAI,GACJ,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,CAAC;AAEV,oDAAoD;AACpD,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,2EAA2E;AAC3E,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE;QAAE,KAAK,EAAE,cAAc,CAAC;QAAC,IAAI,EAAE,cAAc,CAAA;KAAE,CAAC;IAC1D,MAAM,EAAE;QAAE,OAAO,EAAE,YAAY,CAAC;QAAC,OAAO,EAAE,YAAY,CAAC;QAAC,MAAM,EAAE,YAAY,CAAA;KAAE,CAAC;CAChF;AAED,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,CAAC;AACrF,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AACtE,uDAAuD;AACvD,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAE5D,MAAM,WAAW,aAAa;IAC5B,sCAAsC;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB,yCAAyC;IACzC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;OAKG;IACH,UAAU,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,QAAQ,EAAE,MAAM,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;IAC7C,UAAU,EAAE,MAAM,CAAC,aAAa,EAAE,eAAe,CAAC,CAAC;IACnD;;;;;;OAMG;IACH,kBAAkB,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/theme/types.ts"],"names":[],"mappings":"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"}
|
package/llms.txt
CHANGED
|
@@ -6,7 +6,8 @@ UI を組む前に docs/patterns.md(組み方の規範)を読むこと。exa
|
|
|
6
6
|
|
|
7
7
|
## Docs
|
|
8
8
|
|
|
9
|
-
- [README.md](https://github.com/tsubotax/melta-app#readme):
|
|
9
|
+
- [README.md](https://github.com/tsubotax/melta-app#readme): 使う側の全体像(Quickstart / 利用側コードの lint 強制層 / コンポーネント表 / テーマ注入 / 制約)
|
|
10
|
+
- [architecture.md](https://github.com/tsubotax/melta-app/blob/main/docs/architecture.md): 触る側の台帳(ディレクトリ構成 / トークン正規化 web→RN / 実装ステータス詳細 / CI)
|
|
10
11
|
- [patterns.md](https://app.melta.tsubotax.com/docs/patterns.md): フォーム等「組み方」の規範 + コピペ可能スニペット(実コードと drift 検査済み)
|
|
11
12
|
- [showcase](https://app.melta.tsubotax.com/): Live Catalog(実 RN コンポーネントの web export)+ 実装状態の全量表
|
|
12
13
|
- [tokens.json](https://melta.tsubotax.com/design/contracts/tokens.json): デザイントークン(契約 SSOT の配信面)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "melta-app",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.0",
|
|
4
4
|
"description": "melta for APP — melta デザインシステムの React Native UI kit。melta-contracts(デザイン契約)を single source of truth に RN 実装でその契約を満たす。アプリ本体ではなくライブラリ。",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"homepage": "https://app.melta.tsubotax.com",
|
|
@@ -37,8 +37,16 @@
|
|
|
37
37
|
"import": "./lib/module/safe-area/index.js",
|
|
38
38
|
"default": "./lib/module/safe-area/index.js"
|
|
39
39
|
},
|
|
40
|
-
"./eslint-plugin":
|
|
41
|
-
|
|
40
|
+
"./eslint-plugin": {
|
|
41
|
+
"types": "./eslint-rules/melta.d.mts",
|
|
42
|
+
"import": "./eslint-rules/melta.mjs",
|
|
43
|
+
"default": "./eslint-rules/melta.mjs"
|
|
44
|
+
},
|
|
45
|
+
"./eslint-rules/melta.mjs": {
|
|
46
|
+
"types": "./eslint-rules/melta.d.mts",
|
|
47
|
+
"import": "./eslint-rules/melta.mjs",
|
|
48
|
+
"default": "./eslint-rules/melta.mjs"
|
|
49
|
+
},
|
|
42
50
|
"./package.json": "./package.json"
|
|
43
51
|
},
|
|
44
52
|
"files": [
|
|
@@ -55,8 +63,8 @@
|
|
|
55
63
|
"example"
|
|
56
64
|
],
|
|
57
65
|
"peerDependencies": {
|
|
58
|
-
"react": "
|
|
59
|
-
"react-native": "
|
|
66
|
+
"react": ">=18.2.0",
|
|
67
|
+
"react-native": ">=0.71.0",
|
|
60
68
|
"react-native-safe-area-context": ">=4",
|
|
61
69
|
"react-native-svg": ">=15"
|
|
62
70
|
},
|
|
@@ -69,6 +77,7 @@
|
|
|
69
77
|
}
|
|
70
78
|
},
|
|
71
79
|
"devDependencies": {
|
|
80
|
+
"@arethetypeswrong/cli": "0.18.5",
|
|
72
81
|
"@jest/globals": "^29.7.0",
|
|
73
82
|
"@react-native/babel-preset": "^0.85.3",
|
|
74
83
|
"@react-native/jest-preset": "^0.85.3",
|
|
@@ -77,7 +86,7 @@
|
|
|
77
86
|
"@types/react": "~19.2.2",
|
|
78
87
|
"eslint": "^10.4.1",
|
|
79
88
|
"jest": "^29.7.0",
|
|
80
|
-
"melta-contracts": "^0.
|
|
89
|
+
"melta-contracts": "^0.7.0",
|
|
81
90
|
"react": "19.2.3",
|
|
82
91
|
"react-native": "0.85.3",
|
|
83
92
|
"react-native-builder-bob": "^0.40.13",
|
|
@@ -117,7 +126,10 @@
|
|
|
117
126
|
],
|
|
118
127
|
"testMatch": [
|
|
119
128
|
"<rootDir>/src/**/__tests__/**/*.test.tsx"
|
|
120
|
-
]
|
|
129
|
+
],
|
|
130
|
+
"moduleNameMapper": {
|
|
131
|
+
"^(\\.{1,2}/.*)\\.js$": "$1"
|
|
132
|
+
}
|
|
121
133
|
},
|
|
122
134
|
"react-native-builder-bob": {
|
|
123
135
|
"source": "src",
|
|
@@ -136,5 +148,8 @@
|
|
|
136
148
|
}
|
|
137
149
|
]
|
|
138
150
|
]
|
|
151
|
+
},
|
|
152
|
+
"engines": {
|
|
153
|
+
"node": ">=22"
|
|
139
154
|
}
|
|
140
155
|
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* tap-target — 実効タップ標的 44pt(横断方針)の数値 SSOT。
|
|
3
|
+
*
|
|
4
|
+
* 正本は melta-contracts の `A11Y_MIN_TAP_TARGET_44`(rules.json):
|
|
5
|
+
* 「すべての操作要素は実効タップ標的 44pt を下回らない。視覚寸法は契約どおり据え置き、
|
|
6
|
+
* 当たり判定だけを広げる。app は視覚 24pt + hitSlop 10 の正典パターンか minHeight で下限を保証する
|
|
7
|
+
* (height 固定は fontScale でクリップするので使わない)」。
|
|
8
|
+
*
|
|
9
|
+
* ここは「44」という数と正典パターンの寸法を**一箇所**に置くための pure module。
|
|
10
|
+
* 各コンポーネントの hitSlop 値そのものは **literal で各 `*.styles.ts` に置く**(ここから
|
|
11
|
+
* 自動導出しない)。導出にすると視覚寸法が変わったとき hitSlop も一緒に動いてしまい、
|
|
12
|
+
* conformance テスト(scripts/lib/tap-target-conformance.test.ts)が構造的に fail-open になるため。
|
|
13
|
+
*
|
|
14
|
+
* react-native を import しない純粋モジュール(`*.styles.ts` と同じ規約)。
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
/** 実効タップ標的の下限(pt)。WCAG 2.2 SC 2.5.5(AAA)水準を melta の横断方針として採る。 */
|
|
18
|
+
export const MIN_TAP_TARGET = 44;
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* 正典パターン: 視覚 24pt の箱 + hitSlop 10 → 実効 44pt。
|
|
22
|
+
* 背景を持たない小さな操作要素(Tag removable の × / Toast の × / Alert の × / Modal の ×)はこれ。
|
|
23
|
+
*/
|
|
24
|
+
export const CANONICAL_TAP_TARGET = {
|
|
25
|
+
minWidth: 24,
|
|
26
|
+
minHeight: 24,
|
|
27
|
+
hitSlop: 10,
|
|
28
|
+
} as const;
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
* 視覚寸法 `visual` を実効 44pt に届かせるのに必要な**片側** hitSlop(切り上げ = 安全側)。
|
|
32
|
+
*
|
|
33
|
+
* ⚠️ 実装の hitSlop 値をこの関数で計算しないこと(上のコメント参照)。
|
|
34
|
+
* 使うのは (a) 値を決めるときの検算、(b) conformance テストの期待値算出。
|
|
35
|
+
*/
|
|
36
|
+
export function requiredHitSlop(visual: number): number {
|
|
37
|
+
return Math.max(0, Math.ceil((MIN_TAP_TARGET - visual) / 2));
|
|
38
|
+
}
|
|
@@ -9,22 +9,27 @@
|
|
|
9
9
|
* 色だけでなくラベル文言でも破壊的操作と分かる文言にするのは呼び出し側の責務(contract a11y)。
|
|
10
10
|
* - 先頭 action の borderTop は title が無い場合は消す(title がある時だけ区切りとして意味を持つ)。
|
|
11
11
|
* - action の onPress 後は onClose も呼ぶ(選択 = シートを閉じる)。
|
|
12
|
-
* -
|
|
12
|
+
* - 下余白(ホームインジケータ)は SafeArea で確保する(recipe description 参照)。位置は
|
|
13
|
+
* **最下部の面である cancel ブロックの内側**(BottomSheet と同じ「内側」方針に統一)。
|
|
14
|
+
* 0.5.x までは sheet 群の外側に置いていたため、iOS では inset 帯に overlay の黒が見えていた。
|
|
15
|
+
* 内側に移したことで inset 帯まで bg-surface で塗られる代わり、cancel ブロックは
|
|
16
|
+
* inset のぶん背が高くなる(ラベルは上寄りに見える)=意図した見た目の変更。
|
|
17
|
+
* edge は bottom + 左右のみ(top は overlay 側で、シートは上端に接しない)。
|
|
18
|
+
* SafeArea 実装は registry 経由(safe-area-registry.ts)— "melta-app/safe-area" を
|
|
19
|
+
* 有効化したアプリでは Android でも inset が入る(RN core の SafeAreaView は Android で no-op)。
|
|
13
20
|
* - sheet 側は onStartShouldSetResponder で touch を claim し、overlay tap でだけ閉じる。
|
|
14
21
|
* - style の決定は pure resolver(action-sheet.styles.ts)に分離 — recipe との機械照合対象。
|
|
15
22
|
*/
|
|
16
23
|
|
|
17
24
|
import { useMemo } from "react";
|
|
18
|
-
import {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
import { CONTRACTS } from "../contracts/contract-types";
|
|
27
|
-
import { resolveActionSheetStyle, type ActionSheetStyle } from "./action-sheet.styles";
|
|
25
|
+
import { Modal as RNModal, Pressable, Text as RNText, View } from "react-native";
|
|
26
|
+
import { useTheme } from "../theme/index.js";
|
|
27
|
+
import { CONTRACTS } from "../contracts/contract-types.js";
|
|
28
|
+
import { resolveActionSheetStyle, type ActionSheetStyle } from "./action-sheet.styles.js";
|
|
29
|
+
import { resolveSafeAreaView, type SafeAreaEdge } from "./safe-area-registry.js";
|
|
30
|
+
|
|
31
|
+
/** シートは画面下端に密着するので top inset は不要。 */
|
|
32
|
+
const SHEET_EDGES: readonly SafeAreaEdge[] = ["bottom", "left", "right"];
|
|
28
33
|
|
|
29
34
|
export interface ActionSheetAction {
|
|
30
35
|
label: string;
|
|
@@ -61,6 +66,8 @@ export function ActionSheet({
|
|
|
61
66
|
[theme, mode],
|
|
62
67
|
);
|
|
63
68
|
|
|
69
|
+
const SafeArea = resolveSafeAreaView(SHEET_EDGES);
|
|
70
|
+
|
|
64
71
|
return (
|
|
65
72
|
<RNModal
|
|
66
73
|
visible={visible}
|
|
@@ -70,8 +77,8 @@ export function ActionSheet({
|
|
|
70
77
|
statusBarTranslucent
|
|
71
78
|
>
|
|
72
79
|
<Pressable style={styles.overlayStyle} onPress={onClose} accessible={false}>
|
|
73
|
-
{/* sheet 群(sheet + cancel):
|
|
74
|
-
<
|
|
80
|
+
{/* sheet 群(sheet + cancel): touch を claim して overlay へ流さない */}
|
|
81
|
+
<View
|
|
75
82
|
accessibilityViewIsModal
|
|
76
83
|
onStartShouldSetResponder={() => true}
|
|
77
84
|
testID={testID}
|
|
@@ -101,9 +108,12 @@ export function ActionSheet({
|
|
|
101
108
|
))}
|
|
102
109
|
</View>
|
|
103
110
|
<Pressable accessibilityRole="button" onPress={onClose} style={styles.cancelStyle}>
|
|
104
|
-
|
|
111
|
+
{/* SafeArea は最下部の面(cancel)の内側 = inset 帯を overlay の黒でなく bg-surface で塗る */}
|
|
112
|
+
<SafeArea>
|
|
113
|
+
<RNText style={styles.cancelTextStyle}>{cancelLabel}</RNText>
|
|
114
|
+
</SafeArea>
|
|
105
115
|
</Pressable>
|
|
106
|
-
</
|
|
116
|
+
</View>
|
|
107
117
|
</Pressable>
|
|
108
118
|
</RNModal>
|
|
109
119
|
);
|