@lt-three/love3 0.1.0 → 0.1.1

package/README.md

@@ -1,43 +1,43 @@
 # @lt-three/love3
 
-<3（Less Than Three）共通のデザインシステム。Linear（linear.app）に寄せた、背景の階層・極薄の枠・淡い影・インディゴの主操作。
-web（React + Tailwind CSS v4）と React Native（NativeWind v5）で同じ見た目になる。トークン（色・角丸・影・書体）の実値は TS オブジェクトとしても読める。
+The shared design system of <3 (Less Than Three): layered backgrounds, hairline borders, soft shadows, and an indigo primary action.
+It looks the same on web (React + Tailwind CSS v4) and React Native (NativeWind v5). The actual token values (color, radius, shadow, typeface) can also be read as a TS object.
 
-ライセンスは MIT。
+Licensed under MIT.
 
-## インストール
+## Installation
 
 ```sh
 npm install @lt-three/love3
 ```
 
-- **web**: `react` `react-dom`（`>=19.3.0 <20`）と `tailwindcss`（v4）を入れる。web の部品が使う依存（Radix・`@tanstack/charts` など）はこのパッケージの `dependencies` に入っているので、別に入れなくてよい。
-- **React Native**: `react` `react-native` `nativewind`（v5）`react-native-css` `tailwindcss` に加えて、使う部品が引く native 側の依存を入れる（`expo`・`expo-router`・`react-native-reanimated`・`react-native-svg` など）。
-  native 専用の依存は **optional な `peerDependencies`**。使わない部品の依存は入れなくてよい（どの部品がどれを引くかは `package.json` の `peerDependencies` と部品の import を見る）。
+- **web**: install `react` and `react-dom` (`>=19.3.0 <20`) and `tailwindcss` (v4). The dependencies used by the web components (Radix, `@tanstack/charts`, and so on) are in this package's `dependencies`, so you do not need to install them separately.
+- **React Native**: install `react`, `react-native`, `nativewind` (v5), `react-native-css`, and `tailwindcss`, plus the native dependencies pulled in by the components you use (`expo`, `expo-router`, `react-native-reanimated`, `react-native-svg`, and so on).
+  Native-only dependencies are **optional `peerDependencies`**. You do not need to install the dependencies of components you do not use (see the `peerDependencies` in `package.json` and the imports of each component to find out which component needs which).
 
-公開物は `dist/`（ESM の `.js` と `.d.ts`）。ソースと同じ構造で、部品ごとに 1 ファイルずつ出る。使わない部品の依存は引かれない。
+The published files are in `dist/` (ESM `.js` and `.d.ts`). They keep the same structure as the source, one file per component. The dependencies of components you do not use are not pulled in.
 
-## 使い方
+## Usage
 
-| import                                                                      | 中身                                                                                                                                                          |
-| --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `@lt-three/love3/styles.css`                                                | Tailwind v4 の `@theme` とライト・ダーク。web と NativeWind で共通                                                                                            |
-| `@lt-three/love3/tokens`                                                    | トークンの実値の TS オブジェクト（`tokens.light` / `tokens.dark`）・`cssVar`・型。CSS が使えない RN のチャート・Reanimated 向け。`node:` の組み込みも引かない |
-| `@lt-three/love3/tokens/contrast`                                           | コントラストを検査する前景 / 背景の組（`CONTRAST_PAIRS`）と、理由つきの既知の例外（`KNOWN_CONTRAST_EXCEPTIONS`）。データだけ                                  |
-| `@lt-three/love3/tuning`                                                    | トークンを実行時に上書きする「調整」の形式・検証・適用（`zod` だけを引く）                                                                                    |
-| `@lt-three/love3/web` / `@lt-three/love3/native` / `@lt-three/love3/shared` | 各レイヤーの入口（`index.ts`）                                                                                                                                |
-| `@lt-three/love3/web/atom/button.tsx` のように **拡張子つき**               | web コンポーネント。`web/*.ts`（hook・util）と `web/*.tsx`                                                                                                    |
-| `@lt-three/love3/web/styles.css`                                            | web のアプリが CSS の入口で import する。Tailwind・フォント・トークン・ベーススタイル                                                                         |
-| `@lt-three/love3/native/atom/button.tsx` のように **拡張子つき**            | native コンポーネント                                                                                                                                         |
-| `@lt-three/love3/native/styles.css`                                         | **実機（Metro / NativeWind v5）の CSS の入口**。Tailwind・`nativewind/theme`・トークン・部品のクラスの検出と、`dark:` を `prefers-color-scheme` にする上書き  |
-| `@lt-three/love3/shared/…`（`.ts` / `.tsx`）                                | web / native 共通の props 型・variant 定義                                                                                                                    |
+| import                                                                      | contents                                                                                                                                                                                      |
+| --------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `@lt-three/love3/styles.css`                                                | Tailwind v4 `@theme` with light and dark. Shared by web and NativeWind                                                                                                                        |
+| `@lt-three/love3/tokens`                                                    | The actual token values as a TS object (`tokens.light` / `tokens.dark`), `cssVar`, and types. For RN charts and Reanimated, where CSS is not available. Does not import `node:` built-ins     |
+| `@lt-three/love3/tokens/contrast`                                           | The foreground / background pairs checked for contrast (`CONTRAST_PAIRS`) and the known exceptions with reasons (`KNOWN_CONTRAST_EXCEPTIONS`). Data only                                      |
+| `@lt-three/love3/tuning`                                                    | The format, validation, and application of "tuning", which overrides tokens at runtime (imports only `zod`)                                                                                   |
+| `@lt-three/love3/web` / `@lt-three/love3/native` / `@lt-three/love3/shared` | The entry point of each layer (`index.ts`)                                                                                                                                                    |
+| `@lt-three/love3/web/atom/button.tsx`, **with the extension**               | Web components. `web/*.ts` (hooks and utilities) and `web/*.tsx`                                                                                                                              |
+| `@lt-three/love3/web/styles.css`                                            | Imported by a web app at its CSS entry. Tailwind, fonts, tokens, and base styles                                                                                                              |
+| `@lt-three/love3/native/atom/button.tsx`, **with the extension**            | Native components                                                                                                                                                                             |
+| `@lt-three/love3/native/styles.css`                                         | **The CSS entry for real devices (Metro / NativeWind v5)**. Tailwind, `nativewind/theme`, tokens, detection of component classes, and an override that maps `dark:` to `prefers-color-scheme` |
+| `@lt-three/love3/shared/…` (`.ts` / `.tsx`)                                 | Props types and variant definitions shared by web and native                                                                                                                                  |
 
-**ワイルドカードの export は拡張子つきのキー**（`./web/*.tsx` / `./web/*.ts`）。exports は拡張子を探してくれないので、利用側も拡張子つきで import する
-（TypeScript では `allowImportingTsExtensions` を有効にする）。拡張子なし（`.../atom/button`）は解決できない。指定子が指す先は `dist/` の `.js` と型宣言の `.d.ts`。
+**Wildcard exports use keys with the file extension** (`./web/*.tsx` / `./web/*.ts`). `exports` does not search for extensions, so consumers import with the extension too
+(enable `allowImportingTsExtensions` in TypeScript). Without the extension (`.../atom/button`) the specifier does not resolve. Specifiers point to the `.js` files and the `.d.ts` type declarations in `dist/`.
 
 ### web
 
-CSS の入口で 1 度だけ import する。
+Import it once at your CSS entry.
 
 ```css
 @import "@lt-three/love3/web/styles.css";
@@ -47,41 +47,41 @@ CSS の入口で 1 度だけ import する。
 import { Button } from "@lt-three/love3/web/atom/button.tsx";
 ```
 
-部品が使う Tailwind のクラスは、この CSS の `@source` が `dist/` から拾う。アプリ自身のソースは、バンドラのプロジェクトルートを基準にした Tailwind の自動検出に任せる。
-ダークは `<html class="dark">` で切り替える。
+The Tailwind classes used by the components are picked up from `dist/` by `@source` in this CSS. Your own app source is left to Tailwind's automatic detection, based on the bundler's project root.
+Switch to dark with `<html class="dark">`.
 
 ### React Native
 
-アプリの `global.css` で 1 度だけ import する（NativeWind v5 / react-native-css が Tailwind v4 としてコンパイルする）。
+Import it once in your app's `global.css` (NativeWind v5 / react-native-css compiles it as Tailwind v4).
 
 ```css
 @import "@lt-three/love3/native/styles.css";
 ```
 
-native の `dark:` は**クラスではなく OS の配色設定**（`prefers-color-scheme`）で解決する。`.dark` を祖先セレクタに持つと、react-native-css がそのビューを container として扱い、
-子孫の ScrollView が pan を受け取れなくなるため。アプリ内のテーマ設定は `Appearance.setColorScheme()` で切り替える。
+On native, `dark:` is resolved by **the OS color scheme** (`prefers-color-scheme`), not by a class. With `.dark` as an ancestor selector, react-native-css treats that view as a container,
+and a descendant ScrollView can no longer receive pans. Switch the in-app theme with `Appearance.setColorScheme()`.
 
-iOS の SwiftUI Charts を使う部品（`line-chart.ios.tsx` / `pie-chart.ios.tsx`）は、iOS のアプリが拡張子つきで明示して import する。
+The components that use SwiftUI Charts on iOS (`line-chart.ios.tsx` / `pie-chart.ios.tsx`) are imported explicitly, with the extension, by the iOS app.
 
-### トークン
+### Tokens
 
 ```ts
 import { cssVar, tokens } from "@lt-three/love3/tokens";
 
-tokens.light["ink-900"]; // 実値（"#1b1c20"）
+tokens.light["ink-900"]; // the actual value ("#1b1c20")
 cssVar("ink-900"); // "var(--ink-900)"
 ```
 
-変数名は shadcn 互換の名前（`--background` / `--primary` など）に、`--ink-*` / `--line*` / `--lt-three` などの生トークンを足したもの。
+The variable names are shadcn-compatible names (`--background`, `--primary`, and so on) plus raw tokens such as `--ink-*`, `--line*`, and `--lt-three`.
 
-## 注意: `.theme-light` はセマンティックなクラスを明るくしない
+## Note: `.theme-light` does not lighten semantic classes
 
-`.theme-light`（ライト固定のスコープ）が再定義するのは**生トークンだけ**（`--ink-*` / `--line*` / `--frame` / `--paper` / `--raised` / `--overlay` / `--wash` / `--scrim` / `--shadow-color` / `--action-ink` / `--state-*` / `--chart-*`）。
-`--background` / `--foreground` / `--primary` などのセマンティックな変数は `:root` で `var(--paper)` のように宣言されていて、**宣言した要素で解決されてから子孫へ継承される**。
-そのため `<html class="dark">` の下に `.theme-light` を置いても、その子孫で `bg-background` / `text-foreground` / `bg-primary` などは**暗いまま**になる
-（`bg-paper` / `text-ink-900` のような生トークンのクラスなら明るくなる）。
-love3 の部品は `.theme-light` を使わない。常にライトにしたいページでは、`.theme-light` の中で生トークンのクラスを使うか、`.theme-light` にもセマンティックな変数の再宣言を足す。
+`.theme-light` (a scope that forces light) redefines **only the raw tokens** (`--ink-*` / `--line*` / `--frame` / `--paper` / `--raised` / `--overlay` / `--wash` / `--scrim` / `--shadow-color` / `--action-ink` / `--state-*` / `--chart-*`).
+Semantic variables such as `--background` / `--foreground` / `--primary` are declared on `:root` as `var(--paper)` and the like, and **are resolved on the element that declares them, then inherited by descendants**.
+So even if you put `.theme-light` under `<html class="dark">`, classes such as `bg-background` / `text-foreground` / `bg-primary` **stay dark** in its descendants
+(classes of raw tokens such as `bg-paper` / `text-ink-900` do become light).
+love3 components do not use `.theme-light`. On a page that must always be light, use raw-token classes inside `.theme-light`, or also redeclare the semantic variables in `.theme-light`.
 
-## ライセンス
+## License
 
 [MIT](./LICENSE)

package/dist/native/analytics/animation.d.ts

@@ -1,4 +1,4 @@
 //#region src/native/analytics/animation.d.ts
-/** チャートのアニメーション時間（ms）。web の analytics/animation と同じ値に揃える。 */
+/** Chart animation duration (ms). Kept identical to the web analytics animation. */
 export declare const animationDuration = 250;
 //#endregion

package/dist/native/analytics/animation.js

@@ -1,5 +1,5 @@
 //#region src/native/analytics/animation.ts
-/** チャートのアニメーション時間（ms）。web の analytics/animation と同じ値に揃える。 */
+/** Chart animation duration (ms). Kept identical to the web analytics animation. */
 const animationDuration = 250;
 
 //#endregion

package/dist/native/analytics/chart.types.d.ts

@@ -9,15 +9,15 @@ export type PieSlice = {
 type ChartCommonProps = ChartCommonProps$1 & {
   style?: ViewStyle;
   /**
-   * ネイティブチャート非対応プラットフォームで出す文言。
-   * 共有パッケージなので既定値のみ持ち、翻訳は使用側が渡す。
+   * Text shown on platforms without native chart support.
+   * This is a shared package, so it only provides a default; consumers pass their own translation.
    */
   fallbackText?: string;
 };
 export type LineChartProps = ChartCommonProps & LineChartSharedProps;
 export type PieChartProps = ChartCommonProps & {
   data: PieSlice[];
-  /** 中心を空けたドーナツ表示にする。 */
+  /** Renders a donut with a hollow center. */
   donut?: boolean;
 };
 export type MultiLineChartProps = ChartCommonProps & MultiLineChartSharedProps;

package/dist/native/analytics/metric-card.d.ts

@@ -2,9 +2,9 @@ import { MetricCardSharedProps } from "../../shared/analytics.js";
 //#region src/native/analytics/metric-card.d.ts
 export type MetricCardProps = MetricCardSharedProps;
 /**
- * 面付きの単一指標。`@lt-three/web` の analytics/metric-card に対応する。
- * 中身（ラベル + 大型の等幅数値 + 補助）は `atom/readout` が持ち、
- * ここは web と同じく Card 外装を着せる役だけを担う。
+ * A single metric on a surface. Mirrors the web analytics metric-card.
+ * The content (label + large monospaced number + secondary text) lives in `atom/readout`;
+ * as on the web, this component only wraps it in the card chrome.
  */
 export declare function MetricCard({ label, value, subValue, trend, className }: MetricCardProps): import("react").JSX.Element;
 //#endregion

package/dist/native/analytics/metric-card.js

@@ -6,9 +6,9 @@ import { jsx } from "react/jsx-runtime";
 
 //#region src/native/analytics/metric-card.tsx
 /**
-* 面付きの単一指標。`@lt-three/web` の analytics/metric-card に対応する。
-* 中身（ラベル + 大型の等幅数値 + 補助）は `atom/readout` が持ち、
-* ここは web と同じく Card 外装を着せる役だけを担う。
+* A single metric on a surface. Mirrors the web analytics metric-card.
+* The content (label + large monospaced number + secondary text) lives in `atom/readout`;
+* as on the web, this component only wraps it in the card chrome.
 */
 function MetricCard({ label, value, subValue, trend, className }) {
 	const up = useTokenColor("--state-success");

package/dist/native/analytics/multi-line-chart.d.ts

@@ -1,17 +1,18 @@
 import { MultiLineChartProps } from "./chart.types.js";
 //#region src/native/analytics/multi-line-chart.d.ts
 /**
- * 複数系列の折れ線。移植元は `@lt-three/web` の analytics/line-chart（Recharts・複数キー）で、web の love3 では
- * `analytics/multi-line-chart`（`@tanstack/charts`）が対応する（props は `shared/analytics.ts` で同じ）。
+ * Multi-series line chart. The web counterpart is `analytics/multi-line-chart` (`@tanstack/charts`)
+ * (the props are shared via `shared/analytics.ts`).
  *
- * **`@expo/ui` の Chart は 1 系列しか描けない**（型定義にも line/area は single-series と
- * 明記されている）ので、同じ軸に 2 本以上載せたいものはこちらを使う。残高とエクイティの
- * ように単位も軸も同じ系列を 2 枚のカードに分けると、上下を見比べないと関係が読めない。
+ * **The `@expo/ui` Chart can only draw a single series** (its type definitions also state that
+ * line/area are single-series), so use this component when two or more series share an axis.
+ * Splitting series with the same unit and axis (such as balance and equity) across two cards
+ * makes the relationship hard to read without comparing them vertically.
  *
- * 描画は react-native-svg。SwiftUI Charts と違って外枠は描かず、目盛りの罫線だけを敷く
- * （使用側が `Panel` で囲うと枠が二重になるため）。
+ * Drawing uses react-native-svg. Unlike SwiftUI Charts it draws no outer frame, only the tick lines
+ * (a consumer wrapping it in a `Panel` would otherwise get a double border).
  *
- * タップすると、その位置の各系列の値を読み出す。折れ線は目盛りだけだと概形しか読めない。
+ * Tapping reads out each series' value at that position, since tick marks alone only convey the rough shape.
  */
 export declare function MultiLineChart({ series, height, formatValue, emptyText, style, accessibilityLabel }: MultiLineChartProps): import("react").JSX.Element;
 //#endregion

package/dist/native/analytics/multi-line-chart.js

@@ -8,17 +8,18 @@ import Svg, { Circle, Line, Path, Text as Text$1 } from "react-native-svg";
 
 //#region src/native/analytics/multi-line-chart.tsx
 /**
-* 複数系列の折れ線。移植元は `@lt-three/web` の analytics/line-chart（Recharts・複数キー）で、web の love3 では
-* `analytics/multi-line-chart`（`@tanstack/charts`）が対応する（props は `shared/analytics.ts` で同じ）。
+* Multi-series line chart. The web counterpart is `analytics/multi-line-chart` (`@tanstack/charts`)
+* (the props are shared via `shared/analytics.ts`).
 *
-* **`@expo/ui` の Chart は 1 系列しか描けない**（型定義にも line/area は single-series と
-* 明記されている）ので、同じ軸に 2 本以上載せたいものはこちらを使う。残高とエクイティの
-* ように単位も軸も同じ系列を 2 枚のカードに分けると、上下を見比べないと関係が読めない。
+* **The `@expo/ui` Chart can only draw a single series** (its type definitions also state that
+* line/area are single-series), so use this component when two or more series share an axis.
+* Splitting series with the same unit and axis (such as balance and equity) across two cards
+* makes the relationship hard to read without comparing them vertically.
 *
-* 描画は react-native-svg。SwiftUI Charts と違って外枠は描かず、目盛りの罫線だけを敷く
-* （使用側が `Panel` で囲うと枠が二重になるため）。
+* Drawing uses react-native-svg. Unlike SwiftUI Charts it draws no outer frame, only the tick lines
+* (a consumer wrapping it in a `Panel` would otherwise get a double border).
 *
-* タップすると、その位置の各系列の値を読み出す。折れ線は目盛りだけだと概形しか読めない。
+* Tapping reads out each series' value at that position, since tick marks alone only convey the rough shape.
 */
 function MultiLineChart({ series, height = 220, formatValue = (value) => String(Math.round(value)), emptyText = "データがありません", style, accessibilityLabel }) {
 	const line = useTokenColor("--line");
@@ -173,9 +174,9 @@ function MultiLineChart({ series, height = 220, formatValue = (value) => String(
 	});
 }
 /**
-* 押した位置（押した要素の左端からの x）。実機は `locationX`。
-* react-native-web の `onPress` は DOM の click を渡す（`locationX` が無い）ので、そのときは要素の左端との差で求める。
-* 位置の無い click（キーボード等）は null。
+* The pressed position (x from the left edge of the pressed element). On a device this is `locationX`.
+* react-native-web's `onPress` passes a DOM click (no `locationX`), so in that case it is computed from the difference to the element's left edge.
+* Returns null for a click without a position (keyboard, etc.).
 */
 function pressX(event) {
 	const { locationX } = event.nativeEvent;
@@ -185,12 +186,12 @@ function pressX(event) {
 	const target = event.currentTarget;
 	return dom.clientX - target.getBoundingClientRect().left;
 }
-/** 系列を 1 本の SVG パスにする。 */
+/** Turns a series into a single SVG path. */
 function pathOf(entry, toX, toY) {
 	const count = entry.points.length;
 	return entry.points.map((point, index) => `${index === 0 ? "M" : "L"}${toX(index, count, point.t)},${toY(point.y)}`).join(" ");
 }
-/** 押した x にいちばん近い点を、その描画位置ごと返す。 */
+/** Returns the point nearest to the pressed x, together with its drawn position. */
 function nearestPoint(entry, pickedX, toX) {
 	const count = entry.points.length;
 	let best;

package/dist/native/analytics/pie-chart.d.ts

@@ -1,15 +1,15 @@
 import { PieChartProps } from "./chart.types.js";
 //#region src/native/analytics/pie-chart.d.ts
 /**
- * 円グラフ（react-native-svg）。移植元の既定（Android / web）実装。iOS の SwiftUI Charts 版（`pie-chart.ios.tsx`）は
- * `@expo/ui` が要るので、placeholder の仕組み（G5）と一緒に足す。足すまでは iOS もこの実装で描く。
+ * Pie chart (react-native-svg). The default implementation for Android and web. The iOS SwiftUI Charts version (`pie-chart.ios.tsx`)
+ * needs `@expo/ui`, so iOS is drawn with this implementation too unless the app imports that file explicitly.
  *
- * 描画は `multi-line-chart` と同じ react-native-svg。**「iOS のみ」のプレースホルダに
- * しない**のは、勝敗比率・ロング / ショート・銘柄内訳がこのコンポーネントだけで出ており、
- * Android では画面の主役が丸ごと文言に置き換わってしまうため。
+ * Drawing uses the same react-native-svg as `multi-line-chart`. It is **not** an "iOS only"
+ * placeholder because a screen's main content can be produced by this component alone,
+ * and on Android that content would be replaced entirely by a text message.
  *
- * **凡例はここで持たない。** 使用側（口座のチャート）が色付きの内訳リストを円の下に
- * 必ず並べるので、ここで凡例を出すと同じものが 2 段になる。円の高さもそのぶん削れる。
+ * **No legend here.** Consumers are expected to list the colored breakdown below the circle,
+ * so a legend here would show the same thing twice and eat into the circle's height.
  */
 export declare function PieChart({ data, donut, height, style, accessibilityLabel }: PieChartProps): import("react").JSX.Element;
 //#endregion

package/dist/native/analytics/pie-chart.js

@@ -7,15 +7,15 @@ import Svg, { Circle, Path } from "react-native-svg";
 
 //#region src/native/analytics/pie-chart.tsx
 /**
-* 円グラフ（react-native-svg）。移植元の既定（Android / web）実装。iOS の SwiftUI Charts 版（`pie-chart.ios.tsx`）は
-* `@expo/ui` が要るので、placeholder の仕組み（G5）と一緒に足す。足すまでは iOS もこの実装で描く。
+* Pie chart (react-native-svg). The default implementation for Android and web. The iOS SwiftUI Charts version (`pie-chart.ios.tsx`)
+* needs `@expo/ui`, so iOS is drawn with this implementation too unless the app imports that file explicitly.
 *
-* 描画は `multi-line-chart` と同じ react-native-svg。**「iOS のみ」のプレースホルダに
-* しない**のは、勝敗比率・ロング / ショート・銘柄内訳がこのコンポーネントだけで出ており、
-* Android では画面の主役が丸ごと文言に置き換わってしまうため。
+* Drawing uses the same react-native-svg as `multi-line-chart`. It is **not** an "iOS only"
+* placeholder because a screen's main content can be produced by this component alone,
+* and on Android that content would be replaced entirely by a text message.
 *
-* **凡例はここで持たない。** 使用側（口座のチャート）が色付きの内訳リストを円の下に
-* 必ず並べるので、ここで凡例を出すと同じものが 2 段になる。円の高さもそのぶん削れる。
+* **No legend here.** Consumers are expected to list the colored breakdown below the circle,
+* so a legend here would show the same thing twice and eat into the circle's height.
 */
 function PieChart({ data, donut, height = 220, style, accessibilityLabel }) {
 	const palette = useChartPalette();
@@ -57,7 +57,7 @@ function PieChart({ data, donut, height = 220, style, accessibilityLabel }) {
 		})
 	});
 }
-/** 各スライスを SVG のパスにする。12 時から時計回りに並べる（SwiftUI Charts と同じ向き）。 */
+/** Turns each slice into an SVG path. Slices run clockwise from 12 o'clock (the same direction as SwiftUI Charts). */
 function slicePaths(data, total, radius, inner) {
 	let angle = -Math.PI / 2;
 	return data.map((slice) => {

package/dist/native/analytics/single-number.d.ts

@@ -4,16 +4,16 @@ export type SingleNumberProps = {
   subTitle?: string;
   value: number | null;
   unit?: string;
-  /** 比較対象の値。渡すと差分と増減率を併記する。 */
+  /** Value to compare against. When given, the difference and the percentage change are shown alongside. */
   compareValue?: number;
   compareTitle?: string;
-  /** 増が悪い指標（コスト等）で色を反転する。 */
+  /** Flips the colors for metrics where an increase is bad (cost, etc.). */
   reverseColor?: boolean;
   className?: string;
 };
 /**
- * raised 面（surface 角丸・1px の極薄の罫線）に大きな数値を載せる指標。
- * `@lt-three/web` の analytics/single-number に対応する。増減は state の色（面が反転しないので、同じテーマの値でよい）。
+ * A metric showing a large number on a raised surface (surface corner radius, 1px hairline border).
+ * Mirrors the web analytics single-number. Increase/decrease uses the state colors (the surface does not invert, so the same theme values work).
  */
 export declare function SingleNumber({ title, subTitle, value, unit, compareValue, compareTitle, reverseColor, className }: SingleNumberProps): import("react").JSX.Element;
 //#endregion

package/dist/native/analytics/single-number.js

@@ -8,8 +8,8 @@ import Feather from "@expo/vector-icons/Feather";
 
 //#region src/native/analytics/single-number.tsx
 /**
-* raised 面（surface 角丸・1px の極薄の罫線）に大きな数値を載せる指標。
-* `@lt-three/web` の analytics/single-number に対応する。増減は state の色（面が反転しないので、同じテーマの値でよい）。
+* A metric showing a large number on a raised surface (surface corner radius, 1px hairline border).
+* Mirrors the web analytics single-number. Increase/decrease uses the state colors (the surface does not invert, so the same theme values work).
 */
 function SingleNumber({ title, subTitle, value, unit, compareValue, compareTitle, reverseColor, className }) {
 	const up = useTokenColor("--state-success");

package/dist/native/atom/avatar.d.ts

@@ -2,20 +2,20 @@ import { ReactElement } from "react";
 //#region src/native/atom/avatar.d.ts
 export type AvatarProps = {
   src?: string;
-  /** 画像の代替テキスト。既定は空（飾り。隣に名前が出ている前提）。名前の無い単独の顔なら、人の名前を渡す（web と同じ） */
+  /** Alternative text for the image. Empty by default (decorative; assumes a name is shown next to it). For a standalone face with no name, pass the person's name (same as the web) */
   alt?: string;
   /**
-   * 画像が無い / 失敗したときに出すもの（イニシャル等）。文字列は Text で包む。**省略・空文字は人物アイコン**
-   * （web は空文字だと何も出さない）。数値は受けない（RN は View の直下の文字を描けない。文字列にして渡す）。
+   * What to show when there is no image or loading failed (initials, etc.). A string is wrapped in Text. **Omitted or empty shows a person icon**
+   * (the web shows nothing for an empty string). Numbers are not accepted (RN cannot render text directly under a View; pass a string).
    */
   fallback?: string | ReactElement;
-  /** 一辺の px。既定は web の `size-6` と同じ 24。 */
+  /** Side length in px. Defaults to 24, the same as the web `size-6`. */
   size?: number;
   className?: string;
 };
 /**
- * `@lt-three/web` の atom/avatar と同じ構成（画像 + フォールバック）。
- * web の Avatar と同じ円（`rounded-full`）で描く。
+ * Same structure as the web atom/avatar (image + fallback).
+ * Drawn as a circle (`rounded-full`), like the web Avatar.
  */
 export declare function Avatar({ src, alt, fallback, size, className }: AvatarProps): import("react").JSX.Element;
 //#endregion

package/dist/native/atom/avatar.js

@@ -9,8 +9,8 @@ import { Image } from "expo-image";
 
 //#region src/native/atom/avatar.tsx
 /**
-* `@lt-three/web` の atom/avatar と同じ構成（画像 + フォールバック）。
-* web の Avatar と同じ円（`rounded-full`）で描く。
+* Same structure as the web atom/avatar (image + fallback).
+* Drawn as a circle (`rounded-full`), like the web Avatar.
 */
 function Avatar({ src, alt = "", fallback, size = 24, className }) {
 	const [failed, setFailed] = useState(false);

package/dist/native/atom/badge.d.ts

@@ -9,16 +9,16 @@ export type BadgeProps = {
   children: ReactNode;
   variant?: BadgeVariants;
   /**
-   * タップ可能にする（フィルタチップ等）。web の Badge には無い native 固有の追加で、
-   * 見た目は変えずに `hitSlop` で 44pt 相当のタップ領域を確保する。
+   * Makes the badge tappable (filter chips, etc.). A native-only addition not present in the web Badge;
+   * it keeps the look unchanged and secures a tap area equivalent to 44pt via `hitSlop`.
    */
   onPress?: () => void;
   /**
-   * 読み上げ・E2E 用の名前。同じ文言のチップが軸をまたいで並ぶとき
-   * （どの軸の「すべて」なのか）に必ず渡す。
+   * Name for screen readers and E2E. Always pass it when chips with the same text appear
+   * across different axes (to tell which axis a given "All" belongs to).
    */
   accessibilityLabel?: string;
-  /** 選択中のチップであることを読み上げ・E2E に伝える。 */
+  /** Tells screen readers and E2E that this chip is selected. */
   selected?: boolean;
   className?: string;
   textClassName?: string;

package/dist/native/atom/button.d.ts

@@ -2,17 +2,17 @@ import { ReactNode } from "react";
 import { VariantProps } from "class-variance-authority";
 //#region src/native/atom/button.d.ts
 /**
- * `@lt-three/web` の base/button と同じバリアント・同じ見た目（インディゴの主操作・raised 面＋薄い枠・control 角丸）を持つボタン。
- * 高さだけは、指で押す前提で web より大きい（既定 36）。
+ * A button with the same variants and look as the web base/button (indigo primary action, raised surface + faint border, control corner radius).
+ * Only the height differs: it is larger than the web's (default 36) because it is pressed with a finger.
  *
- * `base/button`（`@expo/ui`）が OS ネイティブのボタン（iOS 26 の Liquid Glass 等）を出すのに対し、
- * こちらは RN の `Pressable` なのでトークンで塗れる。**web と同じ見た目にしたい場所はこちらを使う。**
+ * Where `base/button` (`@expo/ui`) renders an OS-native button (iOS 26 Liquid Glass, etc.),
+ * this one is an RN `Pressable`, so it can be painted with tokens. **Use this one wherever it should look the same as the web.**
  *
- * web の `hover:` は RN に無いので、押下中の `pressed` に読み替えてある。
+ * The web's `hover:` does not exist in RN, so it is mapped to `pressed` while pressed.
  *
- * web の Button は `inline-flex` なので内容幅に縮む。RN の `Pressable` は親の cross axis
- * いっぱいに伸びるため `self-start` で同じ挙動にする。画面幅いっぱいの CTA にしたいときは
- * 使用側で `className="self-stretch"` を渡す。
+ * The web Button is `inline-flex`, so it shrinks to its content. An RN `Pressable` stretches across
+ * the parent's cross axis, so `self-start` gives it the same behavior. For a full-width CTA,
+ * pass `className="self-stretch"` from the consumer.
  */
 declare const buttonVariants: (props?: ({
   variant?: "<3" | "default" | "destructive" | "ghost" | "link" | "outline" | "plate" | "secondary" | null | undefined;
@@ -28,14 +28,14 @@ export type ButtonProps = ButtonVariants & {
   onPress?: () => void;
   disabled?: boolean;
   /**
-   * ラベルの左右に置く要素。web は lucide のコンポーネント型を取るが、native は
-   * `@expo/vector-icons` / `expo-symbols` など描画系がまちまちなので描画済みの要素を受け取る。
+   * Elements placed to the left and right of the label. The web takes a lucide component type, but native
+   * icon renderers vary (`@expo/vector-icons`, `expo-symbols`, etc.), so it takes already-rendered elements.
    */
   iconLeft?: ReactNode;
   iconRight?: ReactNode;
   /**
-   * 読み上げ・E2E 用の名前。**一覧の中で同じ文言のボタンが並ぶとき（行ごとの「削除」等）は
-   * 必ず渡す。** 付けないと VoiceOver でどの行のボタンか分からず、E2E も掴み分けられない。
+   * Name for screen readers and E2E. **Always pass it when buttons with the same text appear in a list
+   * (a per-row "Delete", etc.).** Without it VoiceOver cannot tell which row a button belongs to, and E2E cannot target them individually.
    */
   accessibilityLabel?: string;
   className?: string;

package/dist/native/atom/button.js

@@ -7,17 +7,17 @@ import { cva } from "class-variance-authority";
 
 //#region src/native/atom/button.tsx
 /**
-* `@lt-three/web` の base/button と同じバリアント・同じ見た目（インディゴの主操作・raised 面＋薄い枠・control 角丸）を持つボタン。
-* 高さだけは、指で押す前提で web より大きい（既定 36）。
+* A button with the same variants and look as the web base/button (indigo primary action, raised surface + faint border, control corner radius).
+* Only the height differs: it is larger than the web's (default 36) because it is pressed with a finger.
 *
-* `base/button`（`@expo/ui`）が OS ネイティブのボタン（iOS 26 の Liquid Glass 等）を出すのに対し、
-* こちらは RN の `Pressable` なのでトークンで塗れる。**web と同じ見た目にしたい場所はこちらを使う。**
+* Where `base/button` (`@expo/ui`) renders an OS-native button (iOS 26 Liquid Glass, etc.),
+* this one is an RN `Pressable`, so it can be painted with tokens. **Use this one wherever it should look the same as the web.**
 *
-* web の `hover:` は RN に無いので、押下中の `pressed` に読み替えてある。
+* The web's `hover:` does not exist in RN, so it is mapped to `pressed` while pressed.
 *
-* web の Button は `inline-flex` なので内容幅に縮む。RN の `Pressable` は親の cross axis
-* いっぱいに伸びるため `self-start` で同じ挙動にする。画面幅いっぱいの CTA にしたいときは
-* 使用側で `className="self-stretch"` を渡す。
+* The web Button is `inline-flex`, so it shrinks to its content. An RN `Pressable` stretches across
+* the parent's cross axis, so `self-start` gives it the same behavior. For a full-width CTA,
+* pass `className="self-stretch"` from the consumer.
 */
 const buttonVariants = cva("flex-row items-center justify-center gap-2 self-start rounded-control border border-transparent", {
 	variants: {

package/dist/native/atom/checkbox.d.ts

@@ -4,9 +4,9 @@ import { ReactNode } from "react";
 export type CheckboxProps = NamedControlA11yProps & {
   checked: boolean;
   onCheckedChange: (checked: boolean) => void;
-  /** チェックボックスの右に表示するラベル。タップ領域に含まれる。 */
+  /** Label shown to the right of the checkbox. It is part of the tap area. */
   label?: ReactNode;
-  /** 読み上げ名。ラベルが文字列ならそれを使うので、ラベルが無い・文字列でないときに渡す。 */
+  /** Name for screen readers. A string label is used as-is, so pass this when there is no label or it is not a string. */
   accessibilityLabel?: string;
   disabled?: boolean;
   invalid?: boolean;
@@ -14,8 +14,8 @@ export type CheckboxProps = NamedControlA11yProps & {
   wrapperClassName?: string;
 };
 /**
- * `@lt-three/web` の base/checkbox と同じ 16px の control 角丸の四角。
- * 未選択は raised 面 + line-control の枠（3:1）、チェック時はインディゴ塗り + 白のチェック。
+ * A 16px square with the control corner radius, identical to the web base/checkbox.
+ * Unchecked is a raised surface + a line-control border (3:1); checked is an indigo fill + a white check.
  */
 export declare function Checkbox({ checked, onCheckedChange, label, accessibilityLabel, disabled, invalid, className, wrapperClassName, accessibilityHint, id, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid }: CheckboxProps): import("react").JSX.Element;
 //#endregion

package/dist/native/atom/checkbox.js

@@ -8,8 +8,8 @@ import Feather from "@expo/vector-icons/Feather";
 
 //#region src/native/atom/checkbox.tsx
 /**
-* `@lt-three/web` の base/checkbox と同じ 16px の control 角丸の四角。
-* 未選択は raised 面 + line-control の枠（3:1）、チェック時はインディゴ塗り + 白のチェック。
+* A 16px square with the control corner radius, identical to the web base/checkbox.
+* Unchecked is a raised surface + a line-control border (3:1); checked is an indigo fill + a white check.
 */
 function Checkbox({ checked, onCheckedChange, label, accessibilityLabel, disabled, invalid, className, wrapperClassName, accessibilityHint, id, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid }) {
 	const isInvalid = invalid ?? ariaInvalid;

package/dist/native/atom/colored-value.d.ts

@@ -3,10 +3,10 @@ import { ReactNode } from "react";
 //#region src/native/atom/colored-value.d.ts
 export type ColoredValueProps<TValue> = ColoredValueSharedProps<TValue>;
 /**
- * 符号で色が変わる数値。web の atom/colored-value（love3）と同じ API（`shared/analytics.ts`）。
- * 既定色は Tailwind の固定パレット（green-500 / red-500）でなく、トークンの `state-success` / `state-error`
- * （ダークでも 4.5:1 を保つ）。
- * 数値なので等幅（タブラー）で描く。
+ * A number whose color changes with its sign. Same API as the web atom/colored-value (`shared/analytics.ts`).
+ * The default colors are the tokens `state-success` / `state-error` rather than Tailwind's fixed palette (green-500 / red-500),
+ * and they keep 4.5:1 contrast in dark mode too.
+ * Being a number, it is drawn monospaced (tabular).
  */
 export declare function ColoredValue<TValue>({ value, format, isPositive, isNegative, positiveColor, negativeColor, className }: ColoredValueProps<TValue>): ReactNode;
 //#endregion

package/dist/native/atom/colored-value.js

@@ -5,10 +5,10 @@ import { jsx } from "react/jsx-runtime";
 
 //#region src/native/atom/colored-value.tsx
 /**
-* 符号で色が変わる数値。web の atom/colored-value（love3）と同じ API（`shared/analytics.ts`）。
-* 既定色は Tailwind の固定パレット（green-500 / red-500）でなく、トークンの `state-success` / `state-error`
-* （ダークでも 4.5:1 を保つ）。
-* 数値なので等幅（タブラー）で描く。
+* A number whose color changes with its sign. Same API as the web atom/colored-value (`shared/analytics.ts`).
+* The default colors are the tokens `state-success` / `state-error` rather than Tailwind's fixed palette (green-500 / red-500),
+* and they keep 4.5:1 contrast in dark mode too.
+* Being a number, it is drawn monospaced (tabular).
 */
 function ColoredValue({ value, format, isPositive, isNegative, positiveColor = "text-state-success", negativeColor = "text-state-error", className }) {
 	const formatted = format ? format(value) : String(value);