mayoiga 0.1.8 → 0.2.0

package/dist/component.d.ts

@@ -1,8 +1,24 @@
-import React from 'react';
 import type { SliceProps, FieldProps, StateRestriction, Controller } from './index';
 type ControlledComponentProps<State extends StateRestriction, Props> = Props & {
     controller: Controller<State>;
 };
-export declare function Slicer<State extends StateRestriction, R extends ReadonlyArray<unknown>>(props: ControlledComponentProps<State, SliceProps<State, R>>): React.JSX.Element;
-export declare function Field<State extends StateRestriction, Name extends keyof State>(props: ControlledComponentProps<State, FieldProps<State, Name>>): React.JSX.Element;
+/**
+ * Controller-driven variant of `<Slicer>` for reusable components.
+ *
+ * Functionally identical to `controller.components.Slicer`, but accepts the
+ * `controller` as a prop rather than being bound to a single form instance.
+ * Use this when you want to author a shared component (a date range picker,
+ * a multi-step section, etc.) that works against any form whose state satisfies
+ * its required shape.
+ */
+export declare function Slicer<State extends StateRestriction, R extends ReadonlyArray<unknown>>(props: ControlledComponentProps<State, SliceProps<State, R>>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Controller-driven variant of `<Field>` for reusable components.
+ *
+ * Functionally identical to `controller.components.Field`, but accepts the
+ * `controller` as a prop so it can be rendered against any compatible form.
+ * The `name` prop is still constrained to keys of the controller's state,
+ * preserving end-to-end type safety.
+ */
+export declare function Field<State extends StateRestriction, Name extends keyof State>(props: ControlledComponentProps<State, FieldProps<State, Name>>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/component.js

@@ -1,11 +1,28 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Controller-driven variant of `<Slicer>` for reusable components.
+ *
+ * Functionally identical to `controller.components.Slicer`, but accepts the
+ * `controller` as a prop rather than being bound to a single form instance.
+ * Use this when you want to author a shared component (a date range picker,
+ * a multi-step section, etc.) that works against any form whose state satisfies
+ * its required shape.
+ */
 export function Slicer(props) {
     const { controller, ...restProps } = props;
     const { Slicer: Delegate } = controller.components;
-    return React.createElement(Delegate, { ...restProps });
+    return _jsx(Delegate, { ...restProps });
 }
+/**
+ * Controller-driven variant of `<Field>` for reusable components.
+ *
+ * Functionally identical to `controller.components.Field`, but accepts the
+ * `controller` as a prop so it can be rendered against any compatible form.
+ * The `name` prop is still constrained to keys of the controller's state,
+ * preserving end-to-end type safety.
+ */
 export function Field(props) {
     const { controller, ...restProps } = props;
     const { Field: Delegate } = controller.components;
-    return React.createElement(Delegate, { ...restProps });
+    return _jsx(Delegate, { ...restProps });
 }

package/dist/index.d.ts

@@ -1,7 +1,13 @@
 import type { Subscriber } from 'nozuchi';
-import type { BaseSyntheticEvent, ChangeEvent, ReactNode, ReactElement } from 'react';
-import type { infer as zodInfer, ZodIssue, ZodType } from 'zod';
-export type StateRestriction = Record<string, any>;
+import type { BaseSyntheticEvent, ChangeEvent, ReactNode } from 'react';
+import type { ZodIssue, ZodType, infer as zodInfer } from 'zod';
+/**
+ * Base constraint for any form state shape handled by Mayoiga.
+ *
+ * State is expected to be a flat (shallow) record. Nested objects are not traversed
+ * by the built-in change/validation machinery.
+ */
+export type StateRestriction = Record<string, unknown>;
 type FormStatus = {
     isDirty: boolean;
     isValid: boolean;
@@ -9,11 +15,39 @@ type FormStatus = {
 type FormErrors<State extends StateRestriction> = {
     [k in keyof State]: string | null;
 };
+/**
+ * Complete snapshot of a form: the current values, per-field error messages,
+ * and top-level status flags.
+ *
+ * @typeParam State - the pre-validation shape of the form
+ */
 export type FullFormState<State extends StateRestriction> = FormStatus & {
     value: State;
     errors: FormErrors<State>;
 };
+/**
+ * Signature of the handler used to update a single field value.
+ *
+ * `Name` is constrained to keys of the state so the value type is inferred
+ * from the field being written — invalid field/value pairs fail to type-check.
+ *
+ * @typeParam State - pre-validation form state
+ * @typeParam R - return type of the handler (defaults to `void`; internal
+ *   reducer variants return the next form state)
+ */
 export type HandleChangeAction<State extends StateRestriction, R = void> = <Name extends keyof State>(name: Name, value: State[Name]) => R;
+/**
+ * Props for the `<Field>` render-prop component.
+ *
+ * The `children` callback is called with a pre-wired `tool` object (so most inputs
+ * can simply spread it: `<input {...tool} />`), the current value, and the current
+ * error message for the field. `onChange` is overloaded to accept either a
+ * DOM `ChangeEvent` or an explicit `(name, value)` pair — the latter is useful
+ * for non-DOM inputs or typed values that do not serialize to strings.
+ *
+ * @typeParam State - pre-validation form state
+ * @typeParam Name - the key of the field being rendered
+ */
 export type FieldProps<State extends StateRestriction, Name extends keyof State> = {
     name: Name;
     children: (tool: {
@@ -28,6 +62,16 @@ export type FieldProps<State extends StateRestriction, Name extends keyof State>
      */
     deps?: ReadonlyArray<unknown>;
 };
+/**
+ * Props for the `<Slicer>` render-prop component.
+ *
+ * Unlike `<Field>`, `<Slicer>` subscribes to an arbitrary derivation of the form
+ * state (via `selector`) and only re-renders when the selected tuple changes.
+ * Use this when you need to project multiple fields or computed values at once.
+ *
+ * @typeParam State - pre-validation form state
+ * @typeParam Selected - tuple of values returned by the selector
+ */
 export type SliceProps<State extends StateRestriction, Selected extends ReadonlyArray<unknown>> = {
     selector: (s: FullFormState<State>) => Selected;
     children: (tool: {
@@ -71,7 +115,14 @@ type FormControllerBehavior<StateBeforeValidation extends StateRestriction> = {
     reduceFormState: (reducer: (prevValue: StateBeforeValidation) => StateBeforeValidation) => (prev: FullFormState<StateBeforeValidation>) => FullFormState<StateBeforeValidation>;
     handleBulkChange: (setter: (prev: StateBeforeValidation) => Partial<StateBeforeValidation>) => (prev: FullFormState<StateBeforeValidation>) => FullFormState<StateBeforeValidation>;
 };
+/**
+ * The subset of store actions that are safe to call from application code.
+ *
+ * Internal reducers are hidden behind this narrower type so consumers only see
+ * effects (returning `void`) rather than the underlying reducer functions.
+ */
 type ActionsCanBePublic<State extends StateRestriction> = {
+    /** Reset the form back to its original initial state and clear all errors. */
     reset: VoidFunction;
     /**
      * Initialize form state without validation.
@@ -82,26 +133,75 @@ type ActionsCanBePublic<State extends StateRestriction> = {
     initializeForm: (initial: Partial<State>, opts?: {
         cleanup?: true;
     }) => void;
+    /**
+     * Merge external errors (e.g. server-side validation results) into the form.
+     *
+     * The validator receives the current value and returns a partial error map;
+     * unspecified fields keep their existing error. `isValid` is recomputed from
+     * the merged result.
+     */
     pushFormErrors: (validator: (state: State) => Partial<FormErrors<State>>) => void;
+    /** Update a single field. Triggers schema validation on the next state. */
     handleChange: HandleChangeAction<State>;
+    /**
+     * Update multiple fields in one commit.
+     *
+     * The setter receives the current value and returns a partial patch that is
+     * merged shallowly before validation runs once over the result.
+     */
     handleBulkChange: (setter: (prev: State) => Partial<State>) => void;
 };
 /**
- * Restricted type interface of the form store
+ * Narrowed public view of a form store.
+ *
+ * Passing a `Controller` (rather than the full form hook) to reusable components
+ * is the recommended way to keep them decoupled from the concrete form instance.
+ * See `useFormSlice` and the `<Field>` / `<Slicer>` components in `./component`
+ * for consumers of this shape.
+ *
  * TODO: more restriction
  */
 export type Controller<State extends StateRestriction> = {
+    /**
+     * Effect hook that seeds the form with `initialValue` on mount.
+     * Intended to be called once per form instance at the top of a component.
+     */
     useInitialize: (initialValue: Partial<State>) => void;
+    /**
+     * Subscribe to a derived slice of form state. The component re-renders only
+     * when the selected value changes according to `isEqual` (defaults to
+     * reference equality, as provided by the underlying store).
+     */
     useSelector: <R>(selector: (state: FullFormState<State>) => R, isEqual?: (prev: R, current: R) => boolean) => R;
     actions: ActionsCanBePublic<State>;
     components: {
-        Field: <Name extends keyof State>(props: FieldProps<State, Name>) => ReactElement<any, any> | null;
-        Slicer: <Selected extends ReadonlyArray<unknown>>(props: SliceProps<State, Selected>) => ReactElement<any, any> | null;
+        Field: <Name extends keyof State>(props: FieldProps<State, Name>) => ReactNode;
+        Slicer: <Selected extends ReadonlyArray<unknown>>(props: SliceProps<State, Selected>) => ReactNode;
     };
 };
-type FormHook<State extends StateRestriction, Schema extends ZodType<any, any, any>> = {
+/**
+ * The full return value of {@link createFormHook}.
+ *
+ * Embeds a {@link Controller} for sharing with child components, plus the
+ * top-level `handleSubmit` helper and the raw store `api` for advanced use
+ * cases (e.g. reading state outside React, composing with other stores).
+ *
+ * For convenience the controller members are also spread onto the root, so
+ * `form.useSelector(...)` and `form.controller.useSelector(...)` behave
+ * identically.
+ */
+type FormHook<State extends StateRestriction, Schema extends ZodType<unknown>> = {
     controller: Controller<State>;
     /**
+     * Build a submit handler that runs schema validation before invoking
+     * the user-supplied logic.
+     *
+     * The outer callback receives the DOM event so the caller can call
+     * `e.preventDefault()` or inspect it before validation; the inner callback
+     * then receives a discriminated result with either the parsed data (on
+     * success) or the collected Zod issues (on failure). On failure the issues
+     * are also pushed into form errors so fields light up automatically.
+     *
      * @param handler handling logic
      * @returns created handler is always return Promise, because of the schema validation run it asynchronously.
      */
@@ -113,11 +213,50 @@ type FormHook<State extends StateRestriction, Schema extends ZodType<any, any, a
         success: false;
         error: ReadonlyArray<ZodIssue>;
     }) => R) => (e: BaseSyntheticEvent) => Promise<R>;
+    /**
+     * Low-level handle to the underlying store (from `nozuchi`).
+     *
+     * Exposed for advanced integrations — reading/writing state outside React,
+     * subscribing imperatively, or composing this form with other stores.
+     * Prefer the hook-based API (`useSelector`, `actions`, `components`) for
+     * ordinary component code.
+     */
     api: Subscriber<FullFormState<State>, FormControllerBehavior<State>>;
 } & Controller<State>;
 /**
+ * Create a self-contained form instance backed by a Zod schema.
+ *
+ * Mayoiga keeps two distinct state types in mind:
+ *
+ * 1. the **pre-validation** shape (what the UI edits, typically loose — nullable
+ *    fields, string inputs for numbers, etc.), inferred from `initialState`.
+ * 2. the **post-validation** shape, inferred from `schema` and surfaced through
+ *    `handleSubmit`. Zod transforms (e.g. `z.string().transform(Number)`) apply
+ *    here, so `data` in the submit callback can have a narrower/coerced type
+ *    than the editable state.
+ *
+ * The returned object exposes hooks (`useSelector`, `useInitialize`), actions
+ * (`handleChange`, `reset`, …), render-prop components (`Field`, `Slicer`),
+ * a `handleSubmit` builder, and the raw store `api` for advanced use.
+ *
+ * @param initialState - default values for every field; shape drives the
+ *   pre-validation type inference
+ * @param schema - Zod schema used for field-level and submit-time validation
  * @typeParam InitialState should be shallow
  */
-export declare function createFormHook<StateBeforeValidation extends StateRestriction, Schema extends ZodType<any, any, any>>(initialState: StateBeforeValidation, schema: Schema): FormHook<StateBeforeValidation, Schema>;
+export declare function createFormHook<StateBeforeValidation extends StateRestriction, Schema extends ZodType<unknown>>(initialState: StateBeforeValidation, schema: Schema): FormHook<StateBeforeValidation, Schema>;
+/**
+ * Convenience hook that reads a derived slice of state and returns it alongside
+ * the controller's actions — mirroring the `[state, dispatch]` shape familiar
+ * from `useReducer`.
+ *
+ * Prefer this over calling `useSelector` and pulling `actions` separately when
+ * a component consumes both in the same render.
+ *
+ * @param formController - the controller obtained from {@link createFormHook}
+ *   (or passed down as a prop)
+ * @param selector - projection function from full form state to the needed slice
+ * @returns a tuple of `[slicedValue, actions]`
+ */
 export declare function useFormSlice<State extends StateRestriction, Sliced>(formController: Controller<State>, selector: (s: FullFormState<State>) => Sliced): readonly [Sliced, ActionsCanBePublic<State>];
 export {};

package/dist/index.js

@@ -1,7 +1,10 @@
 import { createStore } from 'nozuchi';
-import { createElement, Fragment, useEffect, useMemo } from 'react';
-import { isChangeEvent } from './utils';
-const initialFormState = Object.freeze({ isDirty: false, isValid: false });
+import { Fragment, createElement, useEffect, useMemo } from 'react';
+import { isChangeEvent, isThennable } from './utils';
+const initialFormState = Object.freeze({
+    isDirty: false,
+    isValid: false,
+});
 function createFormStore(initialState, schema) {
     const initialErrors = Object.freeze(Object.keys(initialState).reduce((buf, k) => {
         buf[k] = null;
@@ -15,7 +18,13 @@ function createFormStore(initialState, schema) {
     const withValidation = (prev, newValue) => {
         const result = schema.safeParse(newValue);
         if (result.success) {
-            return { ...prev, isDirty: true, isValid: true, value: newValue, errors: initialErrors };
+            return {
+                ...prev,
+                isDirty: true,
+                isValid: true,
+                value: newValue,
+                errors: initialErrors,
+            };
         }
         const newErrors = result.error.issues.reduce((buf, iss) => {
             // TODO: should support nested value?
@@ -25,8 +34,14 @@ function createFormStore(initialState, schema) {
             }
             buf[shallowPath] = iss.message;
             return buf;
-        }, {});
-        return { ...prev, isDirty: true, isValid: false, errors: newErrors, value: newValue };
+        }, { ...initialErrors });
+        return {
+            ...prev,
+            isDirty: true,
+            isValid: false,
+            errors: newErrors,
+            value: newValue,
+        };
     };
     return createStore(fullInitialState, {
         peek: (eyeball) => (prev) => {
@@ -36,7 +51,10 @@ function createFormStore(initialState, schema) {
         reset: () => () => fullInitialState,
         initializeForm: (initialVal, opts) => (prev) => ({
             ...prev,
-            value: { ...prev.value, ...initialVal },
+            value: {
+                ...prev.value,
+                ...initialVal,
+            },
             errors: { ...initialErrors },
             isDirty: opts?.cleanup === true ? false : prev.isDirty,
         }),
@@ -49,22 +67,40 @@ function createFormStore(initialState, schema) {
                 }
                 buf[shallowPath] = iss.message;
                 return buf;
-            }, {});
-            return { ...prev, isDirty: true, isValid: false, errors: newErrors };
+            }, { ...initialErrors });
+            return {
+                ...prev,
+                isDirty: true,
+                isValid: false,
+                errors: newErrors,
+            };
         },
         pushFormErrors: (validator) => (prev) => {
             const pushedErrors = validator(prev.value);
-            const allErrors = { ...prev.errors, ...pushedErrors };
-            return { ...prev, isValid: Object.keys(allErrors).length === 0, errors: allErrors };
+            const allErrors = {
+                ...prev.errors,
+                ...pushedErrors,
+            };
+            return {
+                ...prev,
+                isValid: Object.values(allErrors).every((v) => v == null),
+                errors: allErrors,
+            };
         },
         reduceFormErrors: (reducer) => (prev) => {
-            return { ...prev, errors: reducer(prev.errors) };
+            return {
+                ...prev,
+                errors: reducer(prev.errors),
+            };
         },
         handleChange: (name, value) => (prev) => {
             if (name in prev.value === false) {
                 return prev;
             }
-            const newValue = { ...prev.value, [name]: value };
+            const newValue = {
+                ...prev.value,
+                [name]: value,
+            };
             return withValidation(prev, newValue);
         },
         reduceFormState: (reducer) => (prev) => {
@@ -72,18 +108,40 @@ function createFormStore(initialState, schema) {
             return withValidation(prev, reducedState);
         },
         handleBulkChange: (setter) => (prev) => {
-            const mergedNewState = { ...prev.value, ...setter(prev.value) };
+            const mergedNewState = {
+                ...prev.value,
+                ...setter(prev.value),
+            };
             return withValidation(prev, mergedNewState);
         },
     });
 }
 /**
+ * Create a self-contained form instance backed by a Zod schema.
+ *
+ * Mayoiga keeps two distinct state types in mind:
+ *
+ * 1. the **pre-validation** shape (what the UI edits, typically loose — nullable
+ *    fields, string inputs for numbers, etc.), inferred from `initialState`.
+ * 2. the **post-validation** shape, inferred from `schema` and surfaced through
+ *    `handleSubmit`. Zod transforms (e.g. `z.string().transform(Number)`) apply
+ *    here, so `data` in the submit callback can have a narrower/coerced type
+ *    than the editable state.
+ *
+ * The returned object exposes hooks (`useSelector`, `useInitialize`), actions
+ * (`handleChange`, `reset`, …), render-prop components (`Field`, `Slicer`),
+ * a `handleSubmit` builder, and the raw store `api` for advanced use.
+ *
+ * @param initialState - default values for every field; shape drives the
+ *   pre-validation type inference
+ * @param schema - Zod schema used for field-level and submit-time validation
  * @typeParam InitialState should be shallow
  */
 export function createFormHook(initialState, schema) {
     const store = createFormStore(initialState, schema);
     const formHook = {
         useInitialize: (initialValue) => {
+            // biome-ignore lint/correctness/useExhaustiveDependencies: on init effect
             useEffect(() => {
                 store.actions.initializeForm(initialValue);
             }, []);
@@ -94,25 +152,25 @@ export function createFormHook(initialState, schema) {
                 const eventHandled = handler(e);
                 const value = store.getState().value;
                 return schema.safeParseAsync(value).then((result) => {
-                    // FIXME: hook formを捨ててzodのバージョンをあげればこの辺に型をつけられる
                     if (result.success) {
-                        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-                        return eventHandled({ success: true, data: result.data, error: undefined });
+                        return eventHandled({
+                            success: true,
+                            data: result.data,
+                            error: undefined,
+                        });
                     }
-                    const handled = eventHandled({ success: false, error: result.error.issues });
-                    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-                    if (typeof handled['then'] === 'function') {
-                        // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+                    const handled = eventHandled({
+                        success: false,
+                        error: result.error.issues,
+                    });
+                    if (isThennable(handled)) {
                         return handled.then((x) => {
                             store.actions.handleIssues(result.error.issues);
-                            // eslint-disable-next-line @typescript-eslint/no-unsafe-return
                             return x;
                         });
                     }
-                    else {
-                        store.actions.handleIssues(result.error.issues);
-                        return handled;
-                    }
+                    store.actions.handleIssues(result.error.issues);
+                    return handled;
                 });
             };
         },
@@ -121,9 +179,13 @@ export function createFormHook(initialState, schema) {
                 const { selector, children, deps } = props;
                 const slicedValues = formHook.useSelector(selector);
                 return useMemo(() => {
-                    const renderContent = children({ handleChange: formHook.actions.handleChange }, ...slicedValues);
+                    const renderContent = children({
+                        handleChange: formHook.actions.handleChange,
+                    }, ...slicedValues);
                     return createElement(Fragment, {}, renderContent);
-                }, deps ? [...slicedValues, ...deps] : slicedValues);
+                }, 
+                // biome-ignore lint/correctness/useExhaustiveDependencies: deps array is conditionally spread; Biome cannot statically verify it.
+                deps ? [...slicedValues, ...deps] : slicedValues);
             },
             Field(props) {
                 const { name, children, deps } = props;
@@ -135,19 +197,21 @@ export function createFormHook(initialState, schema) {
                         onChange: (name_or_event, value_or_none) => {
                             if (typeof name_or_event === 'string') {
                                 // assumes name is valid if it's string
-                                // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+                                // biome-ignore lint/suspicious/noExplicitAny: has to be safe
                                 return store.actions.handleChange(name_or_event, value_or_none);
                             }
                             if (isChangeEvent(name_or_event)) {
                                 const target = name_or_event.currentTarget || name_or_event.target;
-                                // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
+                                // biome-ignore lint/suspicious/noExplicitAny: FIXME
                                 return store.actions.handleChange(target.name, target.value);
                             }
                             throw new Error('`handleChange` handles unexpected formed object.');
                         },
                     }, value, errMsg);
                     return createElement(Fragment, {}, renderContent);
-                }, deps ? [value, errMsg, ...deps] : [value, errMsg]);
+                }, 
+                // biome-ignore lint/correctness/useExhaustiveDependencies: deps array is conditionally spread; Biome cannot statically verify it.
+                deps ? [value, errMsg, ...deps] : [value, errMsg]);
             },
         },
         actions: store.actions,
@@ -158,6 +222,19 @@ export function createFormHook(initialState, schema) {
         ...formHook,
     };
 }
+/**
+ * Convenience hook that reads a derived slice of state and returns it alongside
+ * the controller's actions — mirroring the `[state, dispatch]` shape familiar
+ * from `useReducer`.
+ *
+ * Prefer this over calling `useSelector` and pulling `actions` separately when
+ * a component consumes both in the same render.
+ *
+ * @param formController - the controller obtained from {@link createFormHook}
+ *   (or passed down as a prop)
+ * @param selector - projection function from full form state to the needed slice
+ * @returns a tuple of `[slicedValue, actions]`
+ */
 export function useFormSlice(formController, selector) {
     const sliced = formController.useSelector((s) => selector(s));
     return [sliced, formController.actions];

package/dist/utils.d.ts

@@ -1,2 +1,3 @@
 import type { ChangeEvent } from 'react';
-export declare function isChangeEvent<T>(x: any): x is ChangeEvent<T>;
+export declare function isChangeEvent<T extends HTMLInputElement>(x: any): x is ChangeEvent<T>;
+export declare function isThennable<T>(x: any): x is Promise<T>;

package/dist/utils.js

@@ -1,6 +1,11 @@
+// biome-ignore lint/suspicious/noExplicitAny: "unsafe" type guard
 export function isChangeEvent(x) {
     if (typeof x !== 'object') {
         return false;
     }
     return 'target' in x;
 }
+// biome-ignore lint/suspicious/noExplicitAny: "unsafe" type guard
+export function isThennable(x) {
+    return x != null && typeof x.then === 'function';
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mayoiga",
-  "version": "0.1.8",
+  "version": "0.2.0",
   "description": "Type safe hook based form library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -10,18 +10,6 @@
     "/component.d.ts",
     "!*.test.js"
   ],
-  "scripts": {
-    "clean": "rm -rf dist",
-    "test": "vitest run",
-    "prebuild": "npm run clean",
-    "build": "tsc",
-    "check:type": "tsc --noEmit",
-    "check:style": "prettier --check 'src/**/*.{js,ts,jsx,tsx}'",
-    "check:lint": "eslint 'src/**/*.{ts,tsx}'",
-    "check-all": "npm run check:type && npm run check:style && npm run check:lint && npm run build --noEmit && npm run test",
-    "fix-all": "npm run check:style -- --write && npm run check:lint -- --fix",
-    "prepublish": "npm run check-all && npm run build"
-  },
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/hachibeeDI/mayoiga.git"
@@ -40,35 +28,41 @@
   },
   "homepage": "https://github.com/hachibeeDI/mayoiga#readme",
   "peerDependencies": {
-    "zod": "^3.20.2"
+    "zod": "^3.25.0 || ^4.0.0"
   },
   "dependencies": {
-    "nozuchi": "^0.0.6"
-  },
-  "resolutions": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "@types/react": "^18.2.57"
+    "nozuchi": "^0.1.0"
   },
   "devDependencies": {
-    "@testing-library/react": "^14.2.1",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/node": "^20.11.19",
-    "@types/react": "^18.2.57",
-    "@types/use-sync-external-store": "^0.0.6",
-    "@typescript-eslint/eslint-plugin": "^7.0.2",
-    "@typescript-eslint/parser": "^7.0.2",
-    "eslint": "^8.56.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-testing-library": "^6.2.0",
-    "jsdom": "^24.0.0",
-    "prettier": "^3.2.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "typedoc": "^0.25.8",
-    "typescript": "^5.3.3",
-    "use-sync-external-store": "^1.2.0",
-    "vitest": "^1.3.0",
-    "zod": "^3.22.4"
+    "@biomejs/biome": "^2.5.15",
+    "@testing-library/dom": "^10.4.2",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.8",
+    "@types/node": "^26.6.5",
+    "@types/react": "^19.3.0",
+    "@types/use-sync-external-store": "^1.7.0",
+    "@vitest/coverage-v8": "^5.0.5",
+    "jsdom": "^30.1.3",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "typedoc": "^0.28.20",
+    "typescript": "^6.0.3",
+    "use-sync-external-store": "^1.7.0",
+    "vitest": "^5.0.5",
+    "zod": "^4.6.7"
+  },
+  "scripts": {
+    "clean": "rm -rf dist",
+    "docs": "typedoc src/index.ts src/component.tsx --out docs",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "prebuild": "pnpm run clean",
+    "build": "tsc -p tsconfig.build.json",
+    "check:type": "tsc --noEmit",
+    "check:lint": "biome lint src/",
+    "check:style": "biome format src/",
+    "check-all": "pnpm run check:type && pnpm run check:style && pnpm run check:lint && pnpm run test",
+    "fix:lint": "biome lint src/ --fix",
+    "fix-all": "pnpm run check:style --write && pnpm run check:lint --fix"
   }
-}
+}