@zeno-lib/forms 0.0.0 → 0.1.0

package/src/fields/combobox-field.tsx

@@ -1,5 +1,13 @@
 "use client"
 
+import { describedBy } from "@zeno-lib/forms/lib/aria"
+import { useFieldContext } from "@zeno-lib/forms/lib/contexts"
+import {
+  useHideFieldErrors,
+  useIsFieldRequired,
+  useIsInvalid,
+} from "@zeno-lib/forms/lib/use-is-invalid"
+import type { ReactNode } from "react"
 import {
   Combobox,
   ComboboxContent,
@@ -7,25 +15,16 @@ import {
   ComboboxInput,
   ComboboxItem,
   ComboboxList,
-} from "@zeno-lib/ui/combobox"
+} from "@/components/ui/combobox"
 import {
   Field,
   FieldDescription,
   FieldError,
   FieldLabel,
-} from "@zeno-lib/ui/field"
-import { InputGroupAddon } from "@zeno-lib/ui/input-group"
-import { Spinner } from "@zeno-lib/ui/spinner"
-import type { ReactNode } from "react"
-
-import { describedBy } from "../lib/aria"
-import { useFieldContext } from "../lib/contexts"
+} from "@/components/ui/field"
+import { InputGroupAddon } from "@/components/ui/input-group"
+import { Spinner } from "@/components/ui/spinner"
 import { RequiredIndicator } from "../lib/required-indicator"
-import {
-  useHideFieldErrors,
-  useIsFieldRequired,
-  useIsInvalid,
-} from "../lib/use-is-invalid"
 
 type ComboboxItemObject<V> = { value: V; label: string }
 
@@ -112,7 +111,7 @@ function ComboboxField<T = string>({
     : ((fieldValue ?? null) as T | null)
 
   return (
-    <Field data-invalid={isInvalid}>
+    <Field data-field={field.name} data-invalid={isInvalid}>
       {label && (
         <FieldLabel htmlFor={field.name}>
           {label}

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

@@ -1,25 +1,28 @@
 "use client"
 
-import { buttonVariants } from "@zeno-lib/ui/button"
-import { Calendar } from "@zeno-lib/ui/calendar"
+import { describedBy } from "@zeno-lib/forms/lib/aria"
+import { useFieldContext } from "@zeno-lib/forms/lib/contexts"
+import {
+  useHideFieldErrors,
+  useIsFieldRequired,
+  useIsInvalid,
+} from "@zeno-lib/forms/lib/use-is-invalid"
+import type { ComponentProps, ReactNode } from "react"
+import { buttonVariants } from "@/components/ui/button"
+import { Calendar } from "@/components/ui/calendar"
 import {
   Field,
   FieldDescription,
   FieldError,
   FieldLabel,
-} from "@zeno-lib/ui/field"
-import { cn } from "@zeno-lib/ui/lib/utils"
-import { Popover, PopoverContent, PopoverTrigger } from "@zeno-lib/ui/popover"
-import type { ComponentProps, ReactNode } from "react"
-
-import { describedBy } from "../lib/aria"
-import { useFieldContext } from "../lib/contexts"
-import { RequiredIndicator } from "../lib/required-indicator"
+} from "@/components/ui/field"
 import {
-  useHideFieldErrors,
-  useIsFieldRequired,
-  useIsInvalid,
-} from "../lib/use-is-invalid"
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import { cn } from "@/lib/utils"
+import { RequiredIndicator } from "../lib/required-indicator"
 
 type CalendarProps = ComponentProps<typeof Calendar>
 
@@ -69,7 +72,7 @@ function DatePickerField({
   const empty = !value
 
   return (
-    <Field data-invalid={isInvalid}>
+    <Field data-field={field.name} data-invalid={isInvalid}>
       {label && (
         <FieldLabel htmlFor={field.name}>
           {label}

package/src/fields/input-field.tsx

@@ -1,23 +1,22 @@
 "use client"
 
+import { describedBy } from "@zeno-lib/forms/lib/aria"
+import { useFieldContext } from "@zeno-lib/forms/lib/contexts"
+import {
+  useHideFieldErrors,
+  useIsFieldRequired,
+  useIsInvalid,
+} from "@zeno-lib/forms/lib/use-is-invalid"
+import { Children, type ComponentProps, type ReactNode } from "react"
 import {
   Field,
   FieldDescription,
   FieldError,
   FieldLabel,
-} from "@zeno-lib/ui/field"
-import { Input } from "@zeno-lib/ui/input"
-import { InputGroup, InputGroupInput } from "@zeno-lib/ui/input-group"
-import { Children, type ComponentProps, type ReactNode } from "react"
-
-import { describedBy } from "../lib/aria"
-import { useFieldContext } from "../lib/contexts"
+} from "@/components/ui/field"
+import { Input } from "@/components/ui/input"
+import { InputGroup, InputGroupInput } from "@/components/ui/input-group"
 import { RequiredIndicator } from "../lib/required-indicator"
-import {
-  useHideFieldErrors,
-  useIsFieldRequired,
-  useIsInvalid,
-} from "../lib/use-is-invalid"
 
 type InputFieldProps = Omit<
   ComponentProps<typeof Input>,
@@ -66,7 +65,7 @@ function InputField({
   }
 
   return (
-    <Field data-invalid={isInvalid}>
+    <Field data-field={field.name} data-invalid={isInvalid}>
       {label && (
         <FieldLabel htmlFor={field.name}>
           {label}

package/src/fields/number-field.tsx

@@ -1,8 +1,7 @@
 "use client"
 
+import { useFieldContext } from "@zeno-lib/forms/lib/contexts"
 import type { ChangeEvent } from "react"
-
-import { useFieldContext } from "../lib/contexts"
 import { InputField, type InputFieldProps } from "./input-field"
 
 type NumberFieldProps = Omit<

package/src/fields/otp-field.tsx

@@ -1,22 +1,25 @@
 "use client"
 
+import { describedBy } from "@zeno-lib/forms/lib/aria"
+import { useFieldContext } from "@zeno-lib/forms/lib/contexts"
+import {
+  useHideFieldErrors,
+  useIsFieldRequired,
+  useIsInvalid,
+} from "@zeno-lib/forms/lib/use-is-invalid"
+import type { ReactNode } from "react"
 import {
   Field,
   FieldDescription,
   FieldError,
   FieldLabel,
-} from "@zeno-lib/ui/field"
-import { InputOTP, InputOTPGroup, InputOTPSlot } from "@zeno-lib/ui/input-otp"
-import type { ReactNode } from "react"
-
-import { describedBy } from "../lib/aria"
-import { useFieldContext } from "../lib/contexts"
-import { RequiredIndicator } from "../lib/required-indicator"
+} from "@/components/ui/field"
 import {
-  useHideFieldErrors,
-  useIsFieldRequired,
-  useIsInvalid,
-} from "../lib/use-is-invalid"
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+} from "@/components/ui/input-otp"
+import { RequiredIndicator } from "../lib/required-indicator"
 
 // Flat surface — `OTPInput`'s prop type is a discriminated union over
 // `render`/`children`, which doesn't compose cleanly with `Omit`. Listing the
@@ -63,7 +66,7 @@ function OtpField({
   const isRequired = required ?? schemaRequired
 
   return (
-    <Field data-invalid={isInvalid}>
+    <Field data-field={field.name} data-invalid={isInvalid}>
       {label && (
         <FieldLabel htmlFor={field.name}>
           {label}

package/src/fields/radio-group-field.tsx

@@ -1,23 +1,22 @@
 "use client"
 
+import { describedBy } from "@zeno-lib/forms/lib/aria"
+import { useFieldContext } from "@zeno-lib/forms/lib/contexts"
+import {
+  useHideFieldErrors,
+  useIsFieldRequired,
+  useIsInvalid,
+} from "@zeno-lib/forms/lib/use-is-invalid"
+import { type ComponentProps, type ReactNode, useId } from "react"
 import {
   Field,
   FieldDescription,
   FieldError,
   FieldLabel,
-} from "@zeno-lib/ui/field"
-import { cn } from "@zeno-lib/ui/lib/utils"
-import { RadioGroup, RadioGroupItem } from "@zeno-lib/ui/radio-group"
-import { type ComponentProps, type ReactNode, useId } from "react"
-
-import { describedBy } from "../lib/aria"
-import { useFieldContext } from "../lib/contexts"
+} from "@/components/ui/field"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { cn } from "@/lib/utils"
 import { RequiredIndicator } from "../lib/required-indicator"
-import {
-  useHideFieldErrors,
-  useIsFieldRequired,
-  useIsInvalid,
-} from "../lib/use-is-invalid"
 
 type RadioGroupFieldProps = Omit<
   ComponentProps<typeof RadioGroup>,
@@ -46,7 +45,7 @@ function RadioGroupField({
   const isRequired = required ?? schemaRequired
 
   return (
-    <Field data-invalid={isInvalid}>
+    <Field data-field={field.name} data-invalid={isInvalid}>
       {label && (
         <FieldLabel>
           {label}

package/src/fields/reset-button.tsx

@@ -1,9 +1,8 @@
 "use client"
 
-import { Button } from "@zeno-lib/ui/button"
+import { useFormContext } from "@zeno-lib/forms/lib/contexts"
 import type { ComponentProps, ReactNode } from "react"
-
-import { useFormContext } from "../lib/contexts"
+import { Button } from "@/components/ui/button"
 
 type ResetButtonProps = Omit<ComponentProps<typeof Button>, "onClick" | "type">
 

package/src/fields/select-field.tsx

@@ -1,28 +1,27 @@
 "use client"
 
+import { describedBy } from "@zeno-lib/forms/lib/aria"
+import { useFieldContext } from "@zeno-lib/forms/lib/contexts"
+import {
+  useHideFieldErrors,
+  useIsFieldRequired,
+  useIsInvalid,
+} from "@zeno-lib/forms/lib/use-is-invalid"
+import type { ComponentProps, ReactNode } from "react"
+import { Children, isValidElement, useMemo } from "react"
 import {
   Field,
   FieldDescription,
   FieldError,
   FieldLabel,
-} from "@zeno-lib/ui/field"
+} from "@/components/ui/field"
 import {
   Select,
   SelectContent,
   SelectTrigger,
   SelectValue,
-} from "@zeno-lib/ui/select"
-import type { ComponentProps, ReactNode } from "react"
-import { Children, isValidElement, useMemo } from "react"
-
-import { describedBy } from "../lib/aria"
-import { useFieldContext } from "../lib/contexts"
+} from "@/components/ui/select"
 import { RequiredIndicator } from "../lib/required-indicator"
-import {
-  useHideFieldErrors,
-  useIsFieldRequired,
-  useIsInvalid,
-} from "../lib/use-is-invalid"
 
 type SelectFieldProps = Omit<
   ComponentProps<typeof Select>,
@@ -71,7 +70,7 @@ function SelectField({
   }, [children])
 
   return (
-    <Field data-invalid={isInvalid}>
+    <Field data-field={field.name} data-invalid={isInvalid}>
       {label && (
         <FieldLabel htmlFor={field.name}>
           {label}

package/src/fields/slider-field.tsx

@@ -1,23 +1,22 @@
 "use client"
 
+import { describedBy } from "@zeno-lib/forms/lib/aria"
+import { useFieldContext } from "@zeno-lib/forms/lib/contexts"
+import {
+  useHideFieldErrors,
+  useIsFieldRequired,
+  useIsInvalid,
+} from "@zeno-lib/forms/lib/use-is-invalid"
+import type { ComponentProps, ReactNode } from "react"
 import {
   Field,
   FieldContent,
   FieldDescription,
   FieldError,
   FieldLabel,
-} from "@zeno-lib/ui/field"
-import { Slider } from "@zeno-lib/ui/slider"
-import type { ComponentProps, ReactNode } from "react"
-
-import { describedBy } from "../lib/aria"
-import { useFieldContext } from "../lib/contexts"
+} from "@/components/ui/field"
+import { Slider } from "@/components/ui/slider"
 import { RequiredIndicator } from "../lib/required-indicator"
-import {
-  useHideFieldErrors,
-  useIsFieldRequired,
-  useIsInvalid,
-} from "../lib/use-is-invalid"
 
 type SliderValue = number | number[]
 
@@ -56,7 +55,7 @@ function SliderField({
   const readout = formatValue && value !== undefined ? formatValue(value) : null
 
   return (
-    <Field data-invalid={isInvalid}>
+    <Field data-field={field.name} data-invalid={isInvalid}>
       {(label || readout) && (
         <FieldContent className="flex-row items-center justify-between">
           {label && (

package/src/fields/submit-button.tsx

@@ -1,10 +1,9 @@
 "use client"
 
-import { Button } from "@zeno-lib/ui/button"
-import { Spinner } from "@zeno-lib/ui/spinner"
+import { useFormContext } from "@zeno-lib/forms/lib/contexts"
 import type { ComponentProps } from "react"
-
-import { useFormContext } from "../lib/contexts"
+import { Button } from "@/components/ui/button"
+import { Spinner } from "@/components/ui/spinner"
 
 type SubmitButtonProps = Omit<ComponentProps<typeof Button>, "type">
 

package/src/fields/switch-field.tsx

@@ -1,23 +1,22 @@
 "use client"
 
+import { describedBy } from "@zeno-lib/forms/lib/aria"
+import { useFieldContext } from "@zeno-lib/forms/lib/contexts"
+import {
+  useHideFieldErrors,
+  useIsFieldRequired,
+  useIsInvalid,
+} from "@zeno-lib/forms/lib/use-is-invalid"
+import type { ComponentProps, ReactNode } from "react"
 import {
   Field,
   FieldContent,
   FieldDescription,
   FieldError,
   FieldLabel,
-} from "@zeno-lib/ui/field"
-import { Switch } from "@zeno-lib/ui/switch"
-import type { ComponentProps, ReactNode } from "react"
-
-import { describedBy } from "../lib/aria"
-import { useFieldContext } from "../lib/contexts"
+} from "@/components/ui/field"
+import { Switch } from "@/components/ui/switch"
 import { RequiredIndicator } from "../lib/required-indicator"
-import {
-  useHideFieldErrors,
-  useIsFieldRequired,
-  useIsInvalid,
-} from "../lib/use-is-invalid"
 
 type SwitchFieldProps = Omit<
   ComponentProps<typeof Switch>,
@@ -45,7 +44,11 @@ function SwitchField({
   const isRequired = required ?? schemaRequired
 
   return (
-    <Field data-invalid={isInvalid} orientation="horizontal">
+    <Field
+      data-field={field.name}
+      data-invalid={isInvalid}
+      orientation="horizontal"
+    >
       <FieldContent>
         {label && (
           <FieldLabel htmlFor={field.name}>

package/src/fields/textarea-field.tsx

@@ -1,23 +1,22 @@
 "use client"
 
+import { describedBy } from "@zeno-lib/forms/lib/aria"
+import { useFieldContext } from "@zeno-lib/forms/lib/contexts"
+import {
+  useHideFieldErrors,
+  useIsFieldRequired,
+  useIsInvalid,
+} from "@zeno-lib/forms/lib/use-is-invalid"
+import { Children, type ComponentProps, type ReactNode } from "react"
 import {
   Field,
   FieldDescription,
   FieldError,
   FieldLabel,
-} from "@zeno-lib/ui/field"
-import { InputGroup, InputGroupTextarea } from "@zeno-lib/ui/input-group"
-import { Textarea } from "@zeno-lib/ui/textarea"
-import { Children, type ComponentProps, type ReactNode } from "react"
-
-import { describedBy } from "../lib/aria"
-import { useFieldContext } from "../lib/contexts"
+} from "@/components/ui/field"
+import { InputGroup, InputGroupTextarea } from "@/components/ui/input-group"
+import { Textarea } from "@/components/ui/textarea"
 import { RequiredIndicator } from "../lib/required-indicator"
-import {
-  useHideFieldErrors,
-  useIsFieldRequired,
-  useIsInvalid,
-} from "../lib/use-is-invalid"
 
 type TextAreaFieldProps = Omit<
   ComponentProps<typeof Textarea>,
@@ -63,7 +62,7 @@ function TextAreaField({
   }
 
   return (
-    <Field data-invalid={isInvalid}>
+    <Field data-field={field.name} data-invalid={isInvalid}>
       {label && (
         <FieldLabel htmlFor={field.name}>
           {label}

package/src/form-element.tsx

@@ -0,0 +1,51 @@
+"use client"
+
+import type { AnyFormApi } from "@tanstack/react-form"
+import type { ComponentProps, FormEvent, ReactNode } from "react"
+
+import { FormProvider as RawFormProvider, useFormContext } from "./lib/contexts"
+
+type FormProviderProps = {
+  children: ReactNode
+  form: { handleSubmit: () => unknown }
+}
+
+function FormProvider({ children, form }: FormProviderProps) {
+  return (
+    <RawFormProvider value={form as AnyFormApi}>{children}</RawFormProvider>
+  )
+}
+
+type FormProps = Omit<ComponentProps<"form">, "onSubmit">
+
+function Form({ children, className, ...props }: FormProps) {
+  const form = useFormContext()
+  return (
+    <form
+      className={className}
+      noValidate
+      onSubmit={async (event: FormEvent<HTMLFormElement>) => {
+        event.preventDefault()
+        event.stopPropagation()
+        const node = event.currentTarget
+        await Promise.resolve(form.handleSubmit()).catch(() => undefined)
+        if (!form.state.isValid) {
+          // First invalid control in *this* form; a group root (radio group,
+          // slider) hands focus to its first tabbable child.
+          const invalid = node.querySelector<HTMLElement>(
+            '[aria-invalid="true"]'
+          )
+          const targets = invalid
+            ? [invalid, ...invalid.querySelectorAll<HTMLElement>("*")]
+            : []
+          targets.find((el) => el.tabIndex >= 0)?.focus()
+        }
+      }}
+      {...props}
+    >
+      {children}
+    </form>
+  )
+}
+
+export { Form, FormProvider }

package/src/index.ts

@@ -0,0 +1,14 @@
+/* biome-ignore-all lint/performance/noBarrelFile: single npm entry for the headless form API. */
+
+export { createZenoForm } from "./create-zeno-form"
+export { Form, FormProvider } from "./form-element"
+export { applyValidationError } from "./lib/apply-validation-error"
+export { useFieldContext, useFormContext } from "./lib/contexts"
+export {
+  useHideFieldErrors,
+  useIsFieldRequired,
+  useIsInvalid,
+} from "./lib/use-is-invalid"
+export { type FieldMessage, ValidationError } from "./lib/validation-error"
+export { blurThenChangeLogic } from "./lib/validation-logic"
+export type { ValidationMode } from "./lib/validation-modes"

package/src/lib/apply-validation-error.test.ts

@@ -1,6 +1,5 @@
 import type { AnyFormApi } from "@tanstack/react-form"
-import { describe, expect, test, vi } from "@zeno-lib/vitest"
-
+import { describe, expect, test, vi } from "vitest"
 import { applyValidationError } from "./apply-validation-error"
 import { ValidationError } from "./validation-error"
 

package/src/lib/required-indicator.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { cn } from "@zeno-lib/ui/lib/utils"
 import type { ComponentProps } from "react"
+import { cn } from "@/lib/utils"
 
 type RequiredIndicatorProps = ComponentProps<"span">
 

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

@@ -1,6 +1,5 @@
-import { describe, expect, test } from "@zeno-lib/vitest"
+import { describe, expect, test } from "vitest"
 import { z } from "zod"
-
 import { deepMergeDefaults, extractZodDefaults } from "./schema-defaults"
 
 describe("extractZodDefaults — primitives", () => {