@zeno-lib/forms 0.2.1 → 0.2.2

package/dist/create-zeno-form.d.mts

@@ -99,7 +99,7 @@ type CreateZenoFormConfig<FC extends Record<string, AnyComponent>, FMC extends R
  * the `createFormHook` primitives plus the schema-aware `useForm` and the typed
  * `useAppFields` wrappers (prop types are inferred from the injected components).
  */
-declare function createZenoForm<FC extends Record<string, AnyComponent>, FMC extends Record<string, AnyComponent>>(config: CreateZenoFormConfig<FC, FMC>): {
+export declare function createZenoForm<FC extends Record<string, AnyComponent>, FMC extends Record<string, AnyComponent>>(config: CreateZenoFormConfig<FC, FMC>): {
   useAppFields: <TForm extends AnyAppForm>(form: TForm) => FieldWrappers<FC, FormDataOf<TForm>>;
   useAppForm: <TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnDynamic extends undefined | FormValidateOrFn<TFormData>, TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta>(props: FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>) => import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, FC, FMC>;
   useForm: <TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData> = undefined, TOnChange extends undefined | FormValidateOrFn<TFormData> = undefined, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData> = undefined, TOnBlur extends undefined | FormValidateOrFn<TFormData> = undefined, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData> = undefined, TOnSubmit extends undefined | FormValidateOrFn<TFormData> = undefined, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData> = undefined, TOnDynamic extends undefined | FormValidateOrFn<TFormData> = undefined, TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData> = undefined, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData> = undefined, TSubmitMeta = never>(options: UseFormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>) => import("@tanstack/react-form").FormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta> & import("@tanstack/react-form").ReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta> & NoInfer<FMC> & {
@@ -114,5 +114,4 @@ declare function createZenoForm<FC extends Record<string, AnyComponent>, FMC ext
     form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<[unknown] extends [TFormData] ? any : TFormData, [FormValidateOrFn<TFormData> | undefined] extends [TOnMount] ? [TOnMount] extends [TOnMount & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnMount : TOnMount, [FormValidateOrFn<TFormData> | undefined] extends [TOnChange] ? [TOnChange] extends [TOnChange & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnChange : TOnChange, [FormValidateOrFn<TFormData> | undefined] extends [TOnChangeAsync] ? [TOnChangeAsync] extends [TOnChangeAsync & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnChangeAsync : TOnChangeAsync, [FormValidateOrFn<TFormData> | undefined] extends [TOnBlur] ? [TOnBlur] extends [TOnBlur & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlur : TOnBlur, [FormValidateOrFn<TFormData> | undefined] extends [TOnBlurAsync] ? [TOnBlurAsync] extends [TOnBlurAsync & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlurAsync : TOnBlurAsync, [FormValidateOrFn<TFormData> | undefined] extends [TOnSubmit] ? [TOnSubmit] extends [TOnSubmit & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmit : TOnSubmit, [FormValidateOrFn<TFormData> | undefined] extends [TOnSubmitAsync] ? [TOnSubmitAsync] extends [TOnSubmitAsync & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmitAsync : TOnSubmitAsync, [FormValidateOrFn<TFormData> | undefined] extends [TOnDynamic] ? [TOnDynamic] extends [TOnDynamic & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamic : TOnDynamic, [FormValidateOrFn<TFormData> | undefined] extends [TOnDynamicAsync] ? [TOnDynamicAsync] extends [TOnDynamicAsync & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamicAsync : TOnDynamicAsync, [FormValidateOrFn<TFormData> | undefined] extends [TOnServer] ? [TOnServer] extends [TOnServer & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnServer : TOnServer, [unknown] extends [TSubmitMeta] ? any : TSubmitMeta, [unknown] extends [FC] ? any : FC, [unknown] extends [FMC] ? any : FMC>;
   }>>;
 };
-//#endregion
-export { createZenoForm };
+//#endregion

package/dist/form-element.d.mts

@@ -6,8 +6,8 @@ type FormProviderProps = {
     handleSubmit: () => unknown;
   };
 };
-declare function FormProvider({ children, form }: FormProviderProps): import("react/jsx-runtime").JSX.Element;
+declare function FormProvider({ children, form }: FormProviderProps): import("react").JSX.Element;
 type FormProps = Omit<ComponentProps<"form">, "onSubmit">;
-declare function Form({ children, className, ...props }: FormProps): import("react/jsx-runtime").JSX.Element;
+declare function Form({ children, className, ...props }: FormProps): import("react").JSX.Element;
 //#endregion
 export { Form, FormProvider };

package/dist/lib/aria.d.mts

@@ -1,4 +1,3 @@
 //#region src/lib/aria.d.ts
-declare function describedBy(...entries: [unknown, string][]): string | undefined;
-//#endregion
-export { describedBy };
+export declare function describedBy(...entries: [unknown, string][]): string | undefined;
+//#endregion

package/dist/lib/contexts.d.mts

@@ -1,5 +1,5 @@
 //#region src/lib/contexts.d.ts
 declare const fieldContext: import("react").Context<import("@tanstack/react-form").AnyFieldApi>, formContext: import("react").Context<import("@tanstack/react-form").AnyFormApi>, 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>, useFormContext: () => import("@tanstack/react-form").ReactFormExtendedApi<Record<string, never>, any, any, any, any, any, any, any, any, any, any, any>;
-declare const FormProvider: import("react").Provider<import("@tanstack/react-form").AnyFormApi>;
+export declare const FormProvider: import("react").Provider<import("@tanstack/react-form").AnyFormApi>;
 //#endregion
-export { FormProvider, fieldContext, formContext, useFieldContext, useFormContext };
+export { fieldContext, formContext, useFieldContext, useFormContext };

package/dist/lib/formatted-number.mjs

@@ -26,7 +26,7 @@ function normalizeMinus(text) {
 }
 /** Format a number for display (on blur, on reset, on first render). */
 function formatNumber(value, { locale, maximumFractionDigits, minimumFractionDigits = 0, useGrouping = true }) {
-	if (value == null || !Number.isFinite(value)) return "";
+	if (value === null || value === void 0 || !Number.isFinite(value)) return "";
 	return normalizeMinus(new Intl.NumberFormat(locale, {
 		maximumFractionDigits,
 		minimumFractionDigits: Math.min(minimumFractionDigits, maximumFractionDigits),
@@ -102,19 +102,19 @@ function parseLocaleNumber(text, locale) {
 }
 function countSignificant(text, end, decimal) {
 	let count = 0;
-	for (let i = 0; i < end && i < text.length; i++) {
+	for (let i = 0; i < end && i < text.length; i += 1) {
 		const char = text[i];
-		if (DIGIT.test(char) || char === decimal || MINUS_SIGNS.test(char)) count++;
+		if (DIGIT.test(char) || char === decimal || MINUS_SIGNS.test(char)) count += 1;
 	}
 	return count;
 }
 function caretForSignificant(text, significant, decimal) {
 	if (significant <= 0) return 0;
 	let count = 0;
-	for (let i = 0; i < text.length; i++) {
+	for (let i = 0; i < text.length; i += 1) {
 		const char = text[i];
 		if (DIGIT.test(char) || char === decimal || char === "-") {
-			count++;
+			count += 1;
 			if (count === significant) return i + 1;
 		}
 	}

package/dist/lib/schema-defaults.mjs

@@ -5,7 +5,7 @@ function getDef(node) {
 }
 function extractDefaultForField(node) {
 	let current = node;
-	for (let depth = 0; depth < MAX_WRAPPER_DEPTH; depth++) {
+	for (let depth = 0; depth < MAX_WRAPPER_DEPTH; depth += 1) {
 		const def = getDef(current);
 		if (!def?.type) return { ok: false };
 		switch (def.type) {

package/dist/lib/schema-required.mjs

@@ -26,7 +26,7 @@ function probeContainer(expected) {
 	if (typeof expected !== "string") return;
 	const kind = expected.toLowerCase();
 	if (kind === "object") return {};
-	if (kind === "array") return [{}];
+	return kind === "array" ? [{}] : void 0;
 }
 function fillAt(root, keys, value) {
 	let node = root;
@@ -53,7 +53,7 @@ function validateSync(schema, value) {
 function getRequiredPaths(schema) {
 	const required = /* @__PURE__ */ new Set();
 	const probe = {};
-	for (let depth = 0; depth < MAX_PROBE_DEPTH; depth++) {
+	for (let depth = 0; depth < MAX_PROBE_DEPTH; depth += 1) {
 		const issues = validateSync(schema, probe);
 		if (!issues) return required;
 		let descended = false;

package/package.json

@@ -1,6 +1,10 @@
 {
   "name": "@zeno-lib/forms",
-  "version": "0.2.1",
+  "version": "0.2.2",
+  "repository": {
+    "url": "https://github.com/zeno-lib/zeno.git",
+    "directory": "packages/forms"
+  },
   "type": "module",
   "exports": {
     ".": {
@@ -25,12 +29,23 @@
     "dist",
     "src"
   ],
-  "publishConfig": {
-    "access": "public"
+  "dependencies": {
+    "@tanstack/react-form": "1.33.5",
+    "@tanstack/react-form-nextjs": "1.33.5"
   },
-  "repository": {
-    "url": "https://github.com/zeno-lib/zeno.git",
-    "directory": "packages/forms"
+  "devDependencies": {
+    "@types/node": "26.6.4",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "@zeno-lib/test": "^0.1.1",
+    "@zeno-lib/typescript": "^1.1.0",
+    "@zeno-lib/ui": "^0.0.1",
+    "lucide-react": "^1.52.0",
+    "tsdown": "^0.23.0",
+    "typescript": "7.0.2",
+    "vite": "8.3.3",
+    "vitest": "5.0.3",
+    "zod": "^4.6.5"
   },
   "peerDependencies": {
     "@tanstack/react-devtools": ">=0.10",
@@ -48,26 +63,12 @@
       "optional": true
     }
   },
-  "dependencies": {
-    "@tanstack/react-form": "1.33.5",
-    "@tanstack/react-form-nextjs": "1.33.5"
-  },
-  "devDependencies": {
-    "@types/node": "25.6.0",
-    "@types/react": "19.2.14",
-    "@types/react-dom": "19.2.3",
-    "lucide-react": "^1.23.0",
-    "tsdown": "^0.22.14",
-    "typescript": "7.0.2",
-    "vite": "8.0.16",
-    "vitest": "5.0.2",
-    "zod": "^4.3.6",
-    "@zeno-lib/test": "^0.1.0",
-    "@zeno-lib/typescript": "^1.1.0",
-    "@zeno-lib/ui": "^0.0.1"
+  "publishConfig": {
+    "access": "public"
   },
   "scripts": {
     "build": "tsdown",
+    "dev": "tsdown --watch --no-clean",
     "test": "vitest --run",
     "test:watch": "vitest watch",
     "types:check": "tsc --noEmit"

package/src/fields/combobox-field.tsx

@@ -124,7 +124,7 @@ function ComboboxField<T = string>({
         items={items}
         onInputValueChange={onInputValueChange}
         onValueChange={(next) => {
-          if (next == null) {
+          if (next === null) {
             field.handleChange(undefined)
             return
           }
@@ -143,7 +143,7 @@ function ComboboxField<T = string>({
           name={field.name}
           onBlur={field.handleBlur}
           placeholder={placeholder}
-          showClear={showClear && value != null && value !== "" && !loading}
+          showClear={showClear && value !== null && value !== "" && !loading}
         >
           {loading && (
             <InputGroupAddon align="inline-end">

package/src/fields/date-picker-field.tsx

@@ -68,7 +68,7 @@ function DatePickerField({
   const schemaRequired = useIsFieldRequired(field)
   const isRequired = required ?? schemaRequired
 
-  const value = field.state.value
+  const { value } = field.state
   const empty = !value
 
   return (

package/src/fields/number-field.tsx

@@ -11,7 +11,7 @@ type NumberFieldProps = Omit<
 
 function NumberField(props: NumberFieldProps) {
   const field = useFieldContext<number | undefined>()
-  const value = field.state.value
+  const { value } = field.state
   const inputValue =
     typeof value === "number" && !Number.isNaN(value) ? value : ""
 

package/src/fields/slider-field.tsx

@@ -51,12 +51,14 @@ function SliderField({
   const schemaRequired = useIsFieldRequired(field)
   const isRequired = required ?? schemaRequired
 
-  const value = field.state.value
+  const { value } = field.state
   const readout = formatValue && value !== undefined ? formatValue(value) : null
+  // Not a truthiness check: a formatter may return the number 0, which must still render.
+  const hasReadout = readout !== null && readout !== undefined
 
   return (
     <Field data-field={field.name} data-invalid={isInvalid}>
-      {(label || readout) && (
+      {(label || hasReadout) && (
         <FieldContent className="flex-row items-center justify-between">
           {label && (
             <FieldLabel htmlFor={field.name}>
@@ -64,7 +66,7 @@ function SliderField({
               {isRequired && <RequiredIndicator />}
             </FieldLabel>
           )}
-          {readout && (
+          {hasReadout && (
             <span className="text-muted-foreground text-sm tabular-nums">
               {readout}
             </span>
@@ -81,9 +83,9 @@ function SliderField({
         name={field.name}
         onBlur={field.handleBlur}
         onValueChange={(next) => {
-          const value: SliderValue =
+          const nextValue: SliderValue =
             typeof next === "number" ? next : Array.from(next)
-          field.handleChange(value)
+          field.handleChange(nextValue)
         }}
         value={value}
         {...props}

package/src/form-dialog.tsx

@@ -63,8 +63,8 @@ type DialogForm<TValues> = {
     }
   }
   readonly state: DialogFormState
-  handleSubmit(): unknown
-  reset(values?: TValues): void
+  handleSubmit: () => unknown
+  reset: (values?: TValues) => void
 }
 
 type FormDialogProps<TValues> = {

package/src/lib/formatted-number.ts

@@ -84,7 +84,7 @@ function formatNumber(
     useGrouping = true,
   }: FormatNumberOptions
 ): string {
-  if (value == null || !Number.isFinite(value)) {
+  if (value === null || value === undefined || !Number.isFinite(value)) {
     return ""
   }
   return normalizeMinus(
@@ -236,10 +236,10 @@ function parseLocaleNumber(text: string, locale?: string): number | null {
 // the same logical place after separators were inserted or removed.
 function countSignificant(text: string, end: number, decimal: string): number {
   let count = 0
-  for (let i = 0; i < end && i < text.length; i++) {
+  for (let i = 0; i < end && i < text.length; i += 1) {
     const char = text[i] as string
     if (DIGIT.test(char) || char === decimal || MINUS_SIGNS.test(char)) {
-      count++
+      count += 1
     }
   }
   return count
@@ -254,10 +254,10 @@ function caretForSignificant(
     return 0
   }
   let count = 0
-  for (let i = 0; i < text.length; i++) {
+  for (let i = 0; i < text.length; i += 1) {
     const char = text[i] as string
     if (DIGIT.test(char) || char === decimal || char === "-") {
-      count++
+      count += 1
       if (count === significant) {
         return i + 1
       }

package/src/lib/schema-defaults.ts

@@ -37,7 +37,7 @@ function getDef(node: SchemaNode | undefined): SchemaDef | undefined {
 
 function extractDefaultForField(node: SchemaNode): ExtractResult {
   let current: SchemaNode | undefined = node
-  for (let depth = 0; depth < MAX_WRAPPER_DEPTH; depth++) {
+  for (let depth = 0; depth < MAX_WRAPPER_DEPTH; depth += 1) {
     const def: SchemaDef | undefined = getDef(current)
     if (!def?.type) {
       return { ok: false }

package/src/lib/schema-required.test.ts

@@ -166,7 +166,7 @@ describe("getRequiredPaths", () => {
     const schema: StandardSchemaLike = {
       "~standard": {
         validate: (value) => {
-          const profile = (value as { profile?: unknown }).profile
+          const { profile } = value as { profile?: unknown }
           return profile === undefined
             ? { issues: [{ expected: "Object", path: [{ key: "profile" }] }] }
             : {

package/src/lib/schema-required.ts

@@ -50,6 +50,7 @@ const INDEX_SEGMENT = /^\d+$/
 const INDEX_IN_NAME = /\[\d+\]|\.(\d+)(?=\.|\[|$)/g
 
 function pathKey(part: PathPart): PropertyKey {
+  // biome-ignore lint/suspicious/noUnnecessaryConditions: issue paths come from third-party validators at runtime, and a non-conforming `null` segment would make `in` throw.
   if (typeof part === "object" && part !== null && "key" in part) {
     return part.key
   }
@@ -93,10 +94,7 @@ function probeContainer(expected: unknown): unknown {
   if (kind === "object") {
     return {}
   }
-  if (kind === "array") {
-    return [{}]
-  }
-  return
+  return kind === "array" ? [{}] : undefined
 }
 
 // Write `value` at `keys` inside `root`, only where nothing is set yet.
@@ -140,7 +138,7 @@ function validateSync(
 function getRequiredPaths(schema: StandardSchemaLike): Set<string> {
   const required = new Set<string>()
   const probe: Record<PropertyKey, unknown> = {}
-  for (let depth = 0; depth < MAX_PROBE_DEPTH; depth++) {
+  for (let depth = 0; depth < MAX_PROBE_DEPTH; depth += 1) {
     const issues = validateSync(schema, probe)
     if (!issues) {
       return required

package/src/lib/validation-logic.test.ts

@@ -32,7 +32,6 @@ function makeRun() {
   const runValidation = vi.fn(
     (props: { form: AnyFormApi; validators: ObservedValidator[] }) => {
       observed.push(props.validators)
-      return
     }
   )
   return { observed, runValidation }

package/src/slider-field.test.tsx

@@ -0,0 +1,30 @@
+import { cleanup, render, screen } from "@zeno-lib/test/testing-library"
+import { afterEach, describe, expect, test, vi } from "vitest"
+import { Form, FormProvider, useForm } from "./create-form"
+
+afterEach(() => {
+  cleanup()
+})
+
+describe("SliderField", () => {
+  function Harness() {
+    const form = useForm({ defaultValues: { volume: 0 }, onSubmit: vi.fn() })
+    const { SliderField } = form
+    return (
+      <FormProvider form={form}>
+        <Form>
+          <SliderField
+            formatValue={(value) => value}
+            label="Volume"
+            name="volume"
+          />
+        </Form>
+      </FormProvider>
+    )
+  }
+
+  test("renders a numeric readout of 0", () => {
+    render(<Harness />)
+    expect(screen.getByText("0").tagName).toBe("SPAN")
+  })
+})