@flamingo-stack/openframe-frontend-core 0.0.399 → 0.0.400

package/src/components/features/auth/login-form.tsx

@@ -2,6 +2,7 @@
 
 import type * as React from 'react'
 import { cn } from '../../../utils/cn'
+import { useDeferredError } from '../../../hooks/ui/use-deferred-error'
 import { Button } from '../../ui/button'
 import { Input } from '../../ui/input'
 import type { AuthSsoProvider } from './sso-providers'
@@ -61,6 +62,9 @@ export function LoginForm({
   const isSsoMode = !!ssoProviders && ssoProviders.length > 0
   const fieldDisabled = disabled || loading || isSsoMode
 
+  // Validation messages are deferred while the user is typing (shown on blur or after a pause).
+  const emailErr = useDeferredError(errors?.email, email)
+
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter' && !fieldDisabled) {
       onSubmit()
@@ -86,8 +90,9 @@ export function LoginForm({
         label="Email"
         placeholder={emailPlaceholder}
         value={email}
-        error={errors?.email}
+        error={emailErr.error}
         disabled={fieldDisabled}
+        onBlur={emailErr.onBlur}
         onChange={(event) => onEmailChange(event.target.value)}
         onKeyDown={handleKeyDown}
       />

package/src/components/features/auth/openframe-sso-login-form.tsx

@@ -2,6 +2,7 @@
 
 import type * as React from 'react'
 import { cn } from '../../../utils/cn'
+import { useDeferredError } from '../../../hooks/ui/use-deferred-error'
 import { Button } from '../../ui/button'
 import { Input } from '../../ui/input'
 import { PasswordInput } from '../../ui/password-input'
@@ -60,6 +61,10 @@ export function OpenFrameSsoLoginForm({
 }: OpenFrameSsoLoginFormProps) {
   const fieldsDisabled = disabled || loading
 
+  // Validation messages are deferred while the user is typing (shown on blur or after a pause).
+  const emailErr = useDeferredError(errors?.email, email)
+  const passwordErr = useDeferredError(errors?.password, password)
+
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter' && !fieldsDisabled && !submitDisabled) {
       onSubmit()
@@ -84,8 +89,9 @@ export function OpenFrameSsoLoginForm({
         label={emailLabel}
         placeholder={emailPlaceholder}
         value={email}
-        error={errors?.email}
+        error={emailErr.error}
         disabled={fieldsDisabled}
+        onBlur={emailErr.onBlur}
         onChange={(event) => onEmailChange(event.target.value)}
         onKeyDown={handleKeyDown}
       />
@@ -94,8 +100,9 @@ export function OpenFrameSsoLoginForm({
         label={passwordLabel}
         placeholder={passwordPlaceholder}
         value={password}
-        error={errors?.password}
+        error={passwordErr.error}
         disabled={fieldsDisabled}
+        onBlur={passwordErr.onBlur}
         onChange={(event) => onPasswordChange(event.target.value)}
         onKeyDown={handleKeyDown}
       />

package/src/components/features/auth/openframe-sso-signup-form.tsx

@@ -2,6 +2,7 @@
 
 import type * as React from 'react'
 import { cn } from '../../../utils/cn'
+import { useDeferredError } from '../../../hooks/ui/use-deferred-error'
 import { Button } from '../../ui/button'
 import { Input } from '../../ui/input'
 import { PasswordInput } from '../../ui/password-input'
@@ -72,6 +73,13 @@ export function OpenFrameSsoSignUpForm({
 }: OpenFrameSsoSignUpFormProps) {
   const fieldsDisabled = disabled || loading
 
+  // Validation messages are deferred while the user is typing (shown on blur or after a pause).
+  const emailErr = useDeferredError(errors?.email, email)
+  const firstNameErr = useDeferredError(errors?.firstName, firstName)
+  const lastNameErr = useDeferredError(errors?.lastName, lastName)
+  const passwordErr = useDeferredError(errors?.password, password)
+  const confirmErr = useDeferredError(errors?.confirmPassword, confirmPassword)
+
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter' && !fieldsDisabled && !submitDisabled) {
       onSubmit()
@@ -96,8 +104,9 @@ export function OpenFrameSsoSignUpForm({
         label={emailLabel}
         placeholder="username@mail.com"
         value={email}
-        error={errors?.email}
+        error={emailErr.error}
         disabled={fieldsDisabled || emailReadOnly}
+        onBlur={emailErr.onBlur}
         onChange={(event) => onEmailChange(event.target.value)}
         onKeyDown={handleKeyDown}
       />
@@ -107,8 +116,9 @@ export function OpenFrameSsoSignUpForm({
         label="First Name"
         placeholder="Enter First Name"
         value={firstName}
-        error={errors?.firstName}
+        error={firstNameErr.error}
         disabled={fieldsDisabled}
+        onBlur={firstNameErr.onBlur}
         onChange={(event) => onFirstNameChange(event.target.value)}
         onKeyDown={handleKeyDown}
       />
@@ -116,8 +126,9 @@ export function OpenFrameSsoSignUpForm({
         label="Last Name"
         placeholder="Enter Last Name"
         value={lastName}
-        error={errors?.lastName}
+        error={lastNameErr.error}
         disabled={fieldsDisabled}
+        onBlur={lastNameErr.onBlur}
         onChange={(event) => onLastNameChange(event.target.value)}
         onKeyDown={handleKeyDown}
       />
@@ -125,8 +136,9 @@ export function OpenFrameSsoSignUpForm({
         label="Password"
         placeholder="Enter Password"
         value={password}
-        error={errors?.password}
+        error={passwordErr.error}
         disabled={fieldsDisabled}
+        onBlur={passwordErr.onBlur}
         onChange={(event) => onPasswordChange(event.target.value)}
         onKeyDown={handleKeyDown}
       />
@@ -134,8 +146,9 @@ export function OpenFrameSsoSignUpForm({
         label="Confirm Password"
         placeholder="Confirm Password"
         value={confirmPassword}
-        error={errors?.confirmPassword}
+        error={confirmErr.error}
         disabled={fieldsDisabled}
+        onBlur={confirmErr.onBlur}
         onChange={(event) => onConfirmPasswordChange(event.target.value)}
         onKeyDown={handleKeyDown}
       />

package/src/components/features/auth/password-reset-form.tsx

@@ -2,6 +2,7 @@
 
 import type * as React from 'react'
 import { cn } from '../../../utils/cn'
+import { useDeferredError } from '../../../hooks/ui/use-deferred-error'
 import { Button } from '../../ui/button'
 import { Input } from '../../ui/input'
 import { BackToLoginLink } from './back-to-login-link'
@@ -66,6 +67,10 @@ export function PasswordResetForm({
 }: PasswordResetFormProps) {
   const fieldsDisabled = disabled || loading
 
+  // Validation messages are deferred while the user is typing (shown on blur or after a pause).
+  const passwordErr = useDeferredError(errors?.password, password)
+  const confirmErr = useDeferredError(errors?.confirmPassword, confirmPassword)
+
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter' && !fieldsDisabled && !submitDisabled) {
       onSubmit()
@@ -91,8 +96,9 @@ export function PasswordResetForm({
         label={newPasswordLabel}
         placeholder={newPasswordPlaceholder}
         value={password}
-        error={errors?.password}
+        error={passwordErr.error}
         disabled={fieldsDisabled}
+        onBlur={passwordErr.onBlur}
         onChange={(event) => onPasswordChange(event.target.value)}
         onKeyDown={handleKeyDown}
       />
@@ -103,8 +109,9 @@ export function PasswordResetForm({
         label={confirmPasswordLabel}
         placeholder={confirmPasswordPlaceholder}
         value={confirmPassword}
-        error={errors?.confirmPassword}
+        error={confirmErr.error}
         disabled={fieldsDisabled}
+        onBlur={confirmErr.onBlur}
         onChange={(event) => onConfirmPasswordChange(event.target.value)}
         onKeyDown={handleKeyDown}
       />

package/src/hooks/ui/index.ts

@@ -1,6 +1,7 @@
 // UI Hooks exports
 export * from './use-auto-limit-tags'
 export * from './use-debounce'
+export * from './use-deferred-error'
 export * from './use-header-height'
 export * from './use-horizontal-scrollbar'
 export * from './use-image-edge-color'

package/src/hooks/ui/use-deferred-error.ts

@@ -0,0 +1,38 @@
+'use client'
+
+import * as React from 'react'
+
+export interface UseDeferredErrorResult {
+  /** The message to render (undefined while the reveal is deferred or the field is valid). */
+  error: string | undefined
+  /** Attach to the field's onBlur — reveals validation immediately and keeps it live from then on. */
+  onBlur: () => void
+}
+
+/**
+ * Defers showing a field validation message while the user is still typing.
+ *
+ * The message is revealed when the field loses focus (touched) or when the
+ * value hasn't changed for `delay` ms; every keystroke restarts the timer.
+ * Once touched, validation stays live. A message that clears (the value became
+ * valid) disappears immediately.
+ */
+export function useDeferredError(error: string | undefined, value: string, delay = 1500): UseDeferredErrorResult {
+  const [touched, setTouched] = React.useState(false)
+  const [paused, setPaused] = React.useState(false)
+
+  // Typing hides the message and restarts the pause timer.
+  React.useEffect(() => {
+    if (touched) return
+    setPaused(false)
+    const timer = setTimeout(() => setPaused(true), delay)
+    return () => clearTimeout(timer)
+  }, [value, delay, touched])
+
+  const onBlur = React.useCallback(() => setTouched(true), [])
+
+  return {
+    error: error && (touched || paused) ? error : undefined,
+    onBlur,
+  }
+}

package/src/stories/Input.stories.tsx

@@ -244,7 +244,7 @@ export const ErrorState: Story = {
         />
         <Input
           label="Organization Name"
-          defaultValue="ϕ"
+          defaultValue="A"
           error="Organization Name must be 2-100 characters"
         />
       </div>

package/src/stories/auth/CreateOrganization.stories.tsx

@@ -99,12 +99,13 @@ export const Filled: Story = {
 
 /**
  * Error state: long messages under the fields wrap up to two lines.
+ * Validation is deferred — messages appear after a 1.5s typing pause or on blur.
  */
 export const ErrorState: Story = {
   render: () => (
     <CreateOrganizationPage
       email="ada@example.com"
-      organizationName="ϕ"
+      organizationName="A"
       domainSuffix=".openframe.ai"
       termsUrl="#terms"
       privacyPolicyUrl="#privacy"