@lt-three/love3 0.0.0-stage → 0.1.0

package/dist/shared/form.d.ts

@@ -0,0 +1,45 @@
+import { AnyFieldApi } from "@tanstack/react-form";
+import React from "react";
+//#region src/shared/form.d.ts
+export declare const fieldContext: React.Context<AnyFieldApi>, formContext: React.Context<import("@tanstack/react-form").AnyFormApi>, useFormContext: () => import("@tanstack/react-form").ReactFormExtendedApi<Record<string, never>, any, any, any, any, any, any, any, any, any, any, any>, useFieldContext: <TData>() => import("@tanstack/react-form").FieldApi<any, string, TData, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>;
+/**
+ * フィールドの中なら field を、外なら null を返す（`useFieldContext` は外だと投げる）。
+ * 戻り値は null を含む型にしてある。呼び出し側が `?.` を忘れると tsc が落ちる。
+ */
+export declare function useOptionalFieldContext(): AnyFieldApi | null;
+/**
+ * フィールド型の入力（`form/*`）が共通で受ける props。値は field context（TanStack Form）が持つので、
+ * `value` / `onValueChange` は受けない（受けて黙って無視する形にしない）。
+ */
+export type FieldInputProps = {
+  label?: React.ReactNode;
+  required?: boolean;
+  placeholder?: string;
+  description?: string;
+  className?: string;
+  wrapperClassName?: string;
+  disabled?: boolean;
+  helpText?: React.ReactNode;
+  debounce?: number;
+  /** テスト用の data-testid。実際の input 要素にそのまま付与される。 */
+  "data-testid"?: string;
+};
+/**
+ * `FieldInputProps` に、制御モード（`value` / `onValueChange` を渡すと field context を使わない）を足したもの。
+ * 制御モードを実装している入力（`form/checkbox` `form/switch`）だけが使う。
+ */
+export type BaseInputProps<T> = FieldInputProps & ({
+  value: T;
+  onValueChange: (value: T) => void;
+} | {
+  value?: never;
+  onValueChange?: never;
+});
+type UseFieldValueProps<T> = {
+  emptyValue?: T;
+  debounce?: number;
+  onChange?: (prevValue: T, newValue: T) => void;
+};
+export declare const useFieldValue: <T>(props?: UseFieldValueProps<T>) => readonly [T, React.Dispatch<React.SetStateAction<T>>, import("@tanstack/react-form").FieldApi<any, string, T, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>];
+//#endregion
+export {};

package/dist/shared/form.js

@@ -0,0 +1,46 @@
+import { createFormHookContexts, useStore } from "@tanstack/react-form";
+import { useDebouncedCallback } from "@tanstack/react-pacer";
+import { isEqual } from "es-toolkit/compat";
+import { useContext, useState } from "react";
+
+//#region src/shared/form.ts
+const { fieldContext, formContext, useFormContext, useFieldContext } = createFormHookContexts();
+/**
+* フィールドの中なら field を、外なら null を返す（`useFieldContext` は外だと投げる）。
+* 戻り値は null を含む型にしてある。呼び出し側が `?.` を忘れると tsc が落ちる。
+*/
+function useOptionalFieldContext() {
+	return useContext(fieldContext);
+}
+function isUpdater(action) {
+	return typeof action === "function";
+}
+const useFieldValue = (props) => {
+	const field = useFieldContext();
+	const formValue = useStore(field.store, (state) => state.value == null && props?.emptyValue != null ? props.emptyValue : state.value);
+	const setDebouncedValue = useDebouncedCallback((value) => {
+		field.handleChange((current) => {
+			if (!isEqual(current, value)) props?.onChange?.(current, value);
+			return value;
+		});
+	}, { wait: props?.debounce ?? 0 });
+	const [instantValue, setInstantValue] = useState(formValue);
+	const [syncedFormValue, setSyncedFormValue] = useState(formValue);
+	if (!Object.is(syncedFormValue, formValue)) {
+		setSyncedFormValue(formValue);
+		setInstantValue(formValue);
+	}
+	const setValue = (action) => {
+		const resolved = isUpdater(action) ? action(instantValue) : action;
+		setInstantValue(resolved);
+		setDebouncedValue(resolved);
+	};
+	return [
+		instantValue,
+		setValue,
+		field
+	];
+};
+
+//#endregion
+export { fieldContext, formContext, useFieldContext, useFieldValue, useFormContext, useOptionalFieldContext };

package/dist/shared/index.d.ts

@@ -0,0 +1,3 @@
+import { ChartCommonProps, ColoredValueSharedProps, LineChartSharedProps, LinePoint, LineSeries, MetricCardSharedProps, MultiLineChartSharedProps } from "./analytics.js";
+import { BUTTON_SIZES, BUTTON_VARIANTS, ButtonSize, ButtonVariant } from "./button.js";
+export { BUTTON_SIZES, BUTTON_VARIANTS, type ButtonSize, type ButtonVariant, type ChartCommonProps, type ColoredValueSharedProps, type LineChartSharedProps, type LinePoint, type LineSeries, type MetricCardSharedProps, type MultiLineChartSharedProps };

package/dist/shared/index.js

@@ -0,0 +1,3 @@
+import { BUTTON_SIZES, BUTTON_VARIANTS } from "./button.js";
+
+export { BUTTON_SIZES, BUTTON_VARIANTS };

package/dist/tokens/contrast-pairs.d.ts

@@ -0,0 +1,30 @@
+//#region src/tokens/contrast-pairs.d.ts
+export type ContrastKind = "text" | "ui";
+/** 検査する前景 / 背景の組。`text` は本文の 4.5:1、`ui` は大きい文字と UI 部品・図形の 3:1。 */
+export declare const CONTRAST_PAIRS: ReadonlyArray<{
+  kind: ContrastKind;
+  fg: string;
+  bg: string;
+}>;
+/**
+ * 基準を満たさないと分かっていて、理由があって許している組。キーは `<モード>:<前景>/<背景>`。
+ *
+ * **ここに足すときは理由を書く。** 例外の組は「まだ基準を下回っている」ことも検査する
+ * （満たすようになったら、例外から外すよう落ちる。一覧が実態から離れないようにする）。
+ * 無効（disabled）の `ink-300` は WCAG が対象外にしているので、そもそも組に入れていない。
+ */
+export declare const KNOWN_CONTRAST_EXCEPTIONS: Readonly<Record<string, string>>;
+/**
+ * 淡い塗り（`bg-state-error/5` など、state の色を `alpha` だけ面に混ぜた塗り）の上の、同じ state の文字（12px の本文の 4.5:1）。
+ * 半透明の合成値は `CONTRAST_PAIRS`（トークン同士の組）に入らないので、面の色に塗りを合成してから比を計算する（contrast.test.ts）。
+ * `usedIn` のファイルが `tintClass` を使っていることもテストが見る（alpha を変えるときは、ここと部品を一緒に直す）。
+ */
+export declare const TINTED_STATE_PAIRS: ReadonlyArray<{
+  token: string;
+  alpha: number;
+  tintClass: string;
+  usedIn: readonly string[];
+}>;
+/** 淡い塗りを置く面（背景の 4 階層と wash）。 */
+export declare const TINT_SURFACES: readonly ["frame", "paper", "raised", "overlay", "wash"];
+//#endregion

package/dist/tokens/contrast-pairs.js

@@ -0,0 +1,404 @@
+//#region src/tokens/contrast-pairs.ts
+/** 検査する前景 / 背景の組。`text` は本文の 4.5:1、`ui` は大きい文字と UI 部品・図形の 3:1。 */
+const CONTRAST_PAIRS = [
+	{
+		kind: "text",
+		fg: "foreground",
+		bg: "background"
+	},
+	{
+		kind: "text",
+		fg: "card-foreground",
+		bg: "card"
+	},
+	{
+		kind: "text",
+		fg: "popover-foreground",
+		bg: "popover"
+	},
+	{
+		kind: "text",
+		fg: "primary-foreground",
+		bg: "primary"
+	},
+	{
+		kind: "text",
+		fg: "secondary-foreground",
+		bg: "secondary"
+	},
+	{
+		kind: "text",
+		fg: "accent-foreground",
+		bg: "accent"
+	},
+	{
+		kind: "text",
+		fg: "destructive-foreground",
+		bg: "destructive"
+	},
+	{
+		kind: "text",
+		fg: "sidebar-foreground",
+		bg: "sidebar"
+	},
+	{
+		kind: "text",
+		fg: "sidebar-primary-foreground",
+		bg: "sidebar-primary"
+	},
+	{
+		kind: "text",
+		fg: "sidebar-accent-foreground",
+		bg: "sidebar-accent"
+	},
+	{
+		kind: "text",
+		fg: "action-foreground",
+		bg: "action"
+	},
+	{
+		kind: "text",
+		fg: "action-foreground",
+		bg: "action-hover"
+	},
+	{
+		kind: "text",
+		fg: "destructive-solid-foreground",
+		bg: "destructive-solid"
+	},
+	{
+		kind: "text",
+		fg: "ink-900",
+		bg: "frame"
+	},
+	{
+		kind: "text",
+		fg: "ink-900",
+		bg: "paper"
+	},
+	{
+		kind: "text",
+		fg: "ink-900",
+		bg: "raised"
+	},
+	{
+		kind: "text",
+		fg: "ink-900",
+		bg: "overlay"
+	},
+	{
+		kind: "text",
+		fg: "ink-900",
+		bg: "wash"
+	},
+	{
+		kind: "text",
+		fg: "ink-700",
+		bg: "frame"
+	},
+	{
+		kind: "text",
+		fg: "ink-700",
+		bg: "paper"
+	},
+	{
+		kind: "text",
+		fg: "ink-700",
+		bg: "raised"
+	},
+	{
+		kind: "text",
+		fg: "ink-700",
+		bg: "overlay"
+	},
+	{
+		kind: "text",
+		fg: "ink-700",
+		bg: "wash"
+	},
+	{
+		kind: "text",
+		fg: "muted-foreground",
+		bg: "frame"
+	},
+	{
+		kind: "text",
+		fg: "muted-foreground",
+		bg: "background"
+	},
+	{
+		kind: "text",
+		fg: "muted-foreground",
+		bg: "raised"
+	},
+	{
+		kind: "text",
+		fg: "muted-foreground",
+		bg: "overlay"
+	},
+	{
+		kind: "text",
+		fg: "muted-foreground",
+		bg: "muted"
+	},
+	{
+		kind: "text",
+		fg: "action-ink",
+		bg: "frame"
+	},
+	{
+		kind: "text",
+		fg: "action-ink",
+		bg: "paper"
+	},
+	{
+		kind: "text",
+		fg: "action-ink",
+		bg: "raised"
+	},
+	{
+		kind: "text",
+		fg: "action-ink",
+		bg: "overlay"
+	},
+	{
+		kind: "text",
+		fg: "action-ink",
+		bg: "wash"
+	},
+	{
+		kind: "text",
+		fg: "state-success",
+		bg: "frame"
+	},
+	{
+		kind: "text",
+		fg: "state-success",
+		bg: "paper"
+	},
+	{
+		kind: "text",
+		fg: "state-success",
+		bg: "raised"
+	},
+	{
+		kind: "text",
+		fg: "state-success",
+		bg: "overlay"
+	},
+	{
+		kind: "text",
+		fg: "state-success",
+		bg: "wash"
+	},
+	{
+		kind: "text",
+		fg: "state-error",
+		bg: "frame"
+	},
+	{
+		kind: "text",
+		fg: "state-error",
+		bg: "paper"
+	},
+	{
+		kind: "text",
+		fg: "state-error",
+		bg: "raised"
+	},
+	{
+		kind: "text",
+		fg: "state-error",
+		bg: "overlay"
+	},
+	{
+		kind: "text",
+		fg: "state-error",
+		bg: "wash"
+	},
+	{
+		kind: "text",
+		fg: "state-warning",
+		bg: "frame"
+	},
+	{
+		kind: "text",
+		fg: "state-warning",
+		bg: "paper"
+	},
+	{
+		kind: "text",
+		fg: "state-warning",
+		bg: "raised"
+	},
+	{
+		kind: "text",
+		fg: "state-warning",
+		bg: "overlay"
+	},
+	{
+		kind: "text",
+		fg: "state-warning",
+		bg: "wash"
+	},
+	{
+		kind: "text",
+		fg: "lt-three-foreground",
+		bg: "lt-three"
+	},
+	{
+		kind: "ui",
+		fg: "ring",
+		bg: "frame"
+	},
+	{
+		kind: "ui",
+		fg: "ring",
+		bg: "background"
+	},
+	{
+		kind: "ui",
+		fg: "ring",
+		bg: "raised"
+	},
+	{
+		kind: "ui",
+		fg: "ring",
+		bg: "overlay"
+	},
+	{
+		kind: "ui",
+		fg: "ring",
+		bg: "wash"
+	},
+	{
+		kind: "ui",
+		fg: "line-control",
+		bg: "frame"
+	},
+	{
+		kind: "ui",
+		fg: "line-control",
+		bg: "background"
+	},
+	{
+		kind: "ui",
+		fg: "line-control",
+		bg: "raised"
+	},
+	{
+		kind: "ui",
+		fg: "line-control",
+		bg: "overlay"
+	},
+	{
+		kind: "ui",
+		fg: "line-control",
+		bg: "wash"
+	},
+	{
+		kind: "ui",
+		fg: "action",
+		bg: "frame"
+	},
+	{
+		kind: "ui",
+		fg: "action",
+		bg: "paper"
+	},
+	{
+		kind: "ui",
+		fg: "action",
+		bg: "raised"
+	},
+	{
+		kind: "ui",
+		fg: "action",
+		bg: "overlay"
+	},
+	{
+		kind: "ui",
+		fg: "action",
+		bg: "wash"
+	},
+	{
+		kind: "ui",
+		fg: "border",
+		bg: "background"
+	},
+	{
+		kind: "ui",
+		fg: "input",
+		bg: "background"
+	},
+	{
+		kind: "ui",
+		fg: "lt-three",
+		bg: "paper"
+	},
+	{
+		kind: "ui",
+		fg: "chart-1",
+		bg: "paper"
+	},
+	{
+		kind: "ui",
+		fg: "chart-2",
+		bg: "paper"
+	},
+	{
+		kind: "ui",
+		fg: "chart-3",
+		bg: "paper"
+	},
+	{
+		kind: "ui",
+		fg: "chart-4",
+		bg: "paper"
+	},
+	{
+		kind: "ui",
+		fg: "chart-5",
+		bg: "paper"
+	}
+];
+/**
+* 基準を満たさないと分かっていて、理由があって許している組。キーは `<モード>:<前景>/<背景>`。
+*
+* **ここに足すときは理由を書く。** 例外の組は「まだ基準を下回っている」ことも検査する
+* （満たすようになったら、例外から外すよう落ちる。一覧が実態から離れないようにする）。
+* 無効（disabled）の `ink-300` は WCAG が対象外にしているので、そもそも組に入れていない。
+*/
+const KNOWN_CONTRAST_EXCEPTIONS = {
+	"light:border/background": "1px の極薄の枠（#e6e7eb）は面の区切りで、情報は文字と余白・面の明るさの差が持つ。カードや区切り線の輪郭は 3:1 に届かない（1.23:1）。Linear 流の「枠は極めて薄く」を意図した値",
+	"dark:border/background": "同上（ダークは 1.24:1）",
+	"light:input/background": "**テキスト入力（Input・Textarea・Select のトリガー）の枠だけ**の例外。枠（line-strong #d5d7dd）は 3:1 に届かない（1.4:1）が、入力欄はラベル・プレースホルダ・フォーカス時のインディゴの枠（4.7:1）でも識別できる。Checkbox・Radio・Switch の枠は、文字を持たず形だけで識別されるので例外にせず line-control（3:1 以上）にした",
+	"dark:input/background": "同上（ダークは 1.54:1）",
+	"light:lt-three/paper": "ブランドのピンク（#ff5c76）は塗りとして使い、必ず黒文字を載せる（7.04:1）。紙の上の単独の図形としては 2.98:1 で 3:1 にわずかに届かない"
+};
+/**
+* 淡い塗り（`bg-state-error/5` など、state の色を `alpha` だけ面に混ぜた塗り）の上の、同じ state の文字（12px の本文の 4.5:1）。
+* 半透明の合成値は `CONTRAST_PAIRS`（トークン同士の組）に入らないので、面の色に塗りを合成してから比を計算する（contrast.test.ts）。
+* `usedIn` のファイルが `tintClass` を使っていることもテストが見る（alpha を変えるときは、ここと部品を一緒に直す）。
+*/
+const TINTED_STATE_PAIRS = [{
+	token: "state-error",
+	alpha: .05,
+	tintClass: "bg-state-error/5",
+	usedIn: [
+		"../web/base/badge.tsx",
+		"../web/base/alert.tsx",
+		"../native/atom/badge.tsx"
+	]
+}];
+/** 淡い塗りを置く面（背景の 4 階層と wash）。 */
+const TINT_SURFACES = [
+	"frame",
+	"paper",
+	"raised",
+	"overlay",
+	"wash"
+];
+
+//#endregion
+export { CONTRAST_PAIRS, KNOWN_CONTRAST_EXCEPTIONS, TINTED_STATE_PAIRS, TINT_SURFACES };

package/dist/tokens/index.d.ts

@@ -0,0 +1,6 @@
+import { TokenName, TokenValues, tokenNames, tokens } from "./tokens.gen.js";
+//#region src/tokens/index.d.ts
+/** CSS 変数の参照（`var(--ink-500)`）。実値が要るときは `tokens.light[name]` / `tokens.dark[name]`。 */
+export declare function cssVar(name: TokenName): string;
+//#endregion
+export { type TokenName, type TokenValues, tokenNames, tokens };

package/dist/tokens/index.js

@@ -0,0 +1,10 @@
+import { tokenNames, tokens } from "./tokens.gen.js";
+
+//#region src/tokens/index.ts
+/** CSS 変数の参照（`var(--ink-500)`）。実値が要るときは `tokens.light[name]` / `tokens.dark[name]`。 */
+function cssVar(name) {
+	return `var(--${name})`;
+}
+
+//#endregion
+export { cssVar, tokenNames, tokens };