@lt-three/love3 0.0.0 → 0.1.1

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>;
+/**
+ * Returns the field inside a field and null outside (`useFieldContext` throws outside).
+ * The return type includes null, so tsc fails if a caller forgets `?.`.
+ */
+export declare function useOptionalFieldContext(): AnyFieldApi | null;
+/**
+ * The props that every field-type input (`form/*`) accepts. The value is held by the field context (TanStack Form),
+ * so `value` / `onValueChange` are not accepted (rather than accepting them and silently ignoring them).
+ */
+export type FieldInputProps = {
+  label?: React.ReactNode;
+  required?: boolean;
+  placeholder?: string;
+  description?: string;
+  className?: string;
+  wrapperClassName?: string;
+  disabled?: boolean;
+  helpText?: React.ReactNode;
+  debounce?: number;
+  /** A data-testid for tests. It is applied as is to the actual input element. */
+  "data-testid"?: string;
+};
+/**
+ * `FieldInputProps` plus a controlled mode (passing `value` / `onValueChange` skips the field context).
+ * Used only by inputs that implement the controlled mode (`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();
+/**
+* Returns the field inside a field and null outside (`useFieldContext` throws outside).
+* The return type includes null, so tsc fails if a caller forgets `?.`.
+*/
+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";
+/** The foreground / background pairs to check. `text` is 4.5:1 for body text; `ui` is 3:1 for large text and UI components and graphics. */
+export declare const CONTRAST_PAIRS: ReadonlyArray<{
+  kind: ContrastKind;
+  fg: string;
+  bg: string;
+}>;
+/**
+ * Pairs that are known not to meet the criterion and are allowed for a stated reason. The key is `<mode>:<foreground>/<background>`.
+ *
+ * **Write a reason when adding here.** Exception pairs are also checked to still be below the criterion
+ * (once they meet it, the test fails and asks for them to be removed from the exceptions, so the list does not drift from reality).
+ * A disabled `ink-300` is out of scope in WCAG, so it is not in the pairs at all.
+ */
+export declare const KNOWN_CONTRAST_EXCEPTIONS: Readonly<Record<string, string>>;
+/**
+ * Text of the same state on a light fill (such as `bg-state-error/5`, a fill that mixes the state color into the surface by `alpha` only), at 4.5:1 for 12px body text.
+ * A translucent composite does not fit in `CONTRAST_PAIRS` (pairs of tokens), so the fill is composited onto the surface color before the ratio is computed (contrast.test.ts).
+ * The test also checks that the files in `usedIn` use `tintClass` (when you change alpha, fix this and the components together).
+ */
+export declare const TINTED_STATE_PAIRS: ReadonlyArray<{
+  token: string;
+  alpha: number;
+  tintClass: string;
+  usedIn: readonly string[];
+}>;
+/** The surfaces a light fill is placed on (the 4 background levels and 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
+/** The foreground / background pairs to check. `text` is 4.5:1 for body text; `ui` is 3:1 for large text and UI components and graphics. */
+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"
+	}
+];
+/**
+* Pairs that are known not to meet the criterion and are allowed for a stated reason. The key is `<mode>:<foreground>/<background>`.
+*
+* **Write a reason when adding here.** Exception pairs are also checked to still be below the criterion
+* (once they meet it, the test fails and asks for them to be removed from the exceptions, so the list does not drift from reality).
+* A disabled `ink-300` is out of scope in WCAG, so it is not in the pairs at all.
+*/
+const KNOWN_CONTRAST_EXCEPTIONS = {
+	"light:border/background": "1px の極薄の枠（#e6e7eb）は面の区切りで、情報は文字と余白・面の明るさの差が持つ。カードや区切り線の輪郭は 3:1 に届かない（1.23:1）。「枠は極めて薄く」を意図した値",
+	"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 にわずかに届かない"
+};
+/**
+* Text of the same state on a light fill (such as `bg-state-error/5`, a fill that mixes the state color into the surface by `alpha` only), at 4.5:1 for 12px body text.
+* A translucent composite does not fit in `CONTRAST_PAIRS` (pairs of tokens), so the fill is composited onto the surface color before the ratio is computed (contrast.test.ts).
+* The test also checks that the files in `usedIn` use `tintClass` (when you change alpha, fix this and the components together).
+*/
+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"
+	]
+}];
+/** The surfaces a light fill is placed on (the 4 background levels and 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
+/** A CSS variable reference (`var(--ink-500)`). When you need the actual value, use `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
+/** A CSS variable reference (`var(--ink-500)`). When you need the actual value, use `tokens.light[name]` / `tokens.dark[name]`. */
+function cssVar(name) {
+	return `var(--${name})`;
+}
+
+//#endregion
+export { cssVar, tokenNames, tokens };