@fuf-stack/uniform 1.11.2 → 1.11.3

package/dist/{FormContext-CN9n_KdE.js.map → FormContext-Dl3k1r_k.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FormContext-CN9n_KdE.js","names":["FormProvider","HookFormProvider"],"sources":["../src/Form/subcomponents/FormResolver.ts","../src/Form/subcomponents/FormContext.tsx"],"sourcesContent":["import type {\n  VetoFormattedError,\n  VetoInstance,\n  VetoTypeAny,\n} from '@fuf-stack/veto';\nimport type { FieldValues } from 'react-hook-form';\n\nimport { useMemo, useRef, useState } from 'react';\n\nimport { and, veto } from '@fuf-stack/veto';\n\nimport { toValidationFormat } from '../../helpers';\n\n/**\n * Hook that manages client validation schemas state.\n *\n * Provides a centralized way to add/remove dynamic validation schemas\n * that can be combined with base form validation.\n *\n * @returns Object with client validation state and memoized setter function\n */\nexport const useClientValidationManager = () => {\n  // Client validation schemas state\n  const [clientValidationSchemas, setClientValidationSchemas] = useState<\n    Record<string, VetoTypeAny>\n  >({});\n\n  // Memoized function to set/clear client validation schema\n  const setClientValidationSchema = useMemo(() => {\n    return (key: string, schema: VetoTypeAny | null) => {\n      // update client validation schemas\n      setClientValidationSchemas((prev) => {\n        // if no schema and no existing client validation schema for this key, do nothing\n        if (!prev[key] && !schema) {\n          return prev;\n        }\n        // if no schema, remove the client validation schema for this key\n        if (!schema) {\n          const { [key]: _removed, ...rest } = prev;\n          return rest;\n        }\n        // if schema, add or update the client validation schema for this key\n        return { ...prev, [key]: schema };\n      });\n    };\n  }, []);\n\n  return {\n    clientValidationSchemas,\n    setClientValidationSchema,\n  };\n};\n\n/**\n * Hook that creates an extended validation instance combining base Veto validation with dynamic client validation.\n *\n * @param baseValidation - Optional base Veto validation schema\n * @returns Combined validation instance and client schema setter\n */\nexport const useExtendedValidation = (baseValidation?: VetoInstance) => {\n  // Setup client validation schemas\n  const { clientValidationSchemas, setClientValidationSchema } =\n    useClientValidationManager();\n\n  // Create a stable dependency array from the client validation schemas\n  const clientSchemaValues = useMemo(\n    () => {\n      const keys = Object.keys(clientValidationSchemas).sort();\n      return keys\n        .map((key) => {\n          return clientValidationSchemas[key];\n        })\n        .filter(Boolean);\n    },\n    // Include the object identity to react to schema instance updates with same shape\n    [clientValidationSchemas],\n  );\n\n  // Memoized extended validation instance\n  const extendedValidation = useMemo(\n    () => {\n      const hasBaseValidation = !!baseValidation;\n      const hasClientSchemas = clientSchemaValues.length > 0;\n\n      // If no base validation and no client schemas, return undefined\n      if (!hasBaseValidation && !hasClientSchemas) {\n        return undefined;\n      }\n\n      // If no client schemas, return base validation\n      if (!hasClientSchemas) {\n        return baseValidation;\n      }\n\n      // Combine client validation schemas\n      const clientSchemasCombined = clientSchemaValues.reduce(\n        // @ts-expect-error is ok, because initially it is null\n        (combined, clientSchema) => {\n          return combined ? and(combined, clientSchema) : clientSchema;\n        },\n        null,\n      );\n\n      // return combined validation\n      if (hasBaseValidation && clientSchemasCombined) {\n        return veto(and(baseValidation.schema, clientSchemasCombined));\n      }\n\n      // If we only have client schemas, return them as a veto instance\n      if (clientSchemasCombined) {\n        return veto(clientSchemasCombined);\n      }\n\n      // This should not happen due to the conditions above, but just in case\n      return baseValidation;\n    },\n    // Recompute when validation schema instances change\n    [baseValidation, clientSchemaValues],\n  );\n\n  return {\n    extendedValidation,\n    setClientValidationSchema,\n  };\n};\n\n/**\n * Hook that creates a React Hook Form resolver from an extended validation instance.\n *\n * @param extendedValidation - Extended validation instance from useExtendedValidation\n * @returns Object containing resolver function, current validation errors, and optimization hash\n */\nexport const useFormResolver = (extendedValidation?: VetoInstance) => {\n  // Use ref to store validation errors without triggering re-renders\n  const validationErrors = useRef<VetoFormattedError>(undefined);\n\n  // Memoized resolver function for React Hook Form\n  const resolver = useMemo(() => {\n    if (!extendedValidation) {\n      return undefined;\n    }\n\n    return async (values: FieldValues) => {\n      const validationValues = toValidationFormat(values) ?? {};\n      const result = await extendedValidation.validateAsync(validationValues);\n      validationErrors.current = result.errors ?? undefined;\n\n      // Transform veto result to React Hook Form format\n      return {\n        values: result.data ?? {},\n        errors: result.errors ?? {},\n      };\n    };\n  }, [extendedValidation]);\n\n  // Hash for memo dependency optimization in consuming components\n  const validationErrorsHash = JSON.stringify(validationErrors.current);\n\n  return {\n    resolver,\n    validationErrors: validationErrors.current,\n    validationErrorsHash,\n  };\n};\n","import type {\n  VetoFormattedError,\n  VetoInstance,\n  VetoTypeAny,\n} from '@fuf-stack/veto';\nimport type { BaseSyntheticEvent, ReactNode } from 'react';\nimport type { FieldValues, Path, SubmitHandler } from 'react-hook-form';\n\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { FormProvider as HookFormProvider, useForm } from 'react-hook-form';\n\nimport createDebug from 'debug';\n\nimport { useLocalStorage } from '@fuf-stack/pixels';\n\nimport { toFormFormat, toValidationFormat } from '../../helpers';\nimport { useExtendedValidation, useFormResolver } from './FormResolver';\n\nconst debug = createDebug('uniform:FormContext');\n\ntype DebugMode = 'debug' | 'debug-testids' | 'off' | 'disabled';\n\nexport interface DebugModeSettings {\n  /** disable form debug completely */\n  disable?: boolean;\n  /** custom localStorage key to save debug mode state */\n  localStorageKey?: string;\n}\n\n/**\n * Listener function that gets called when a field changes due to user input\n */\nexport type UserChangeListener<TFieldValues extends object = object> = (\n  fieldName: Path<TFieldValues>,\n  value: unknown,\n) => void;\n\nconst DEBUG_MODE_LOCAL_STORAGE_KEY_DEFAULT = 'uniform:debug-mode';\n\n/**\n * The `UniformContext` provides control over the form's submission behavior and may optionally include\n * a Veto validation schema for form validation.\n *\n * Specifically, this context offers:\n * 1. **Form Submission Control**: The `preventSubmit` function allows components to enable or disable\n *    form submissions.\n * 2. **Optional Validation Schema**: The `validation` property may hold a Veto validation schema instance\n *    that can be used to validate form fields and handle validation logic.\n * 3. **Client Validation**: The `setClientValidationSchema` function allows setting dynamic client-side\n *    validation schemas that complement the base Veto validation.\n * 4. **User Change Tracking**: The `userChange` property provides a pub/sub system for tracking\n *    user-initiated field changes (typing, clicking, selecting) - NOT programmatic changes like\n *    form.reset() or form.setValue(). Used by the `useWatchUserChange` hook to enable reactive\n *    field dependencies.\n *\n * This context is useful for components that need to interact with or control the form submission state,\n * or access the validation schema for managing form validation logic.\n *\n * IMPORTANT: Context Singleton Pattern for HMR (Hot Module Replacement)\n * =====================================================================\n *\n * We use a global window variable to ensure only ONE context instance exists across\n * hot module reloads during development. This is critical because:\n *\n * **The Problem:**\n * When using Vite/Storybook with Fast Refresh (HMR), editing this file causes it to\n * be re-evaluated. Each re-evaluation runs `React.createContext()` again, creating a\n * NEW context instance. This leads to \"context instance mismatch\":\n *\n *   1. FormProvider (provider) loads and uses context instance A\n *   2. File is edited, HMR triggers\n *   3. SubmitButton (consumer) hot-reloads and imports context instance B\n *   4. Provider writes to instance A, Consumer reads from instance B\n *   5. Result: Consumer sees default values (triggerSubmit = () => undefined)\n *   6. Clicking submit does nothing because it calls the empty default function\n *\n * **The Solution:**\n * By storing the context in `window.__UNIFORM_CONTEXT__`, we ensure:\n *   - First load: Create context and store in window\n *   - Subsequent HMRs: Reuse the same context from window\n *   - All components always reference the SAME context instance\n *   - Provider and consumers can properly communicate\n *\n * **Why This Is Safe:**\n * - Only affects development (production has no HMR)\n * - Context type never changes (same interface)\n * - React handles cleanup on unmount normally\n * - No memory leaks (context is lightweight)\n *\n * Without this pattern, you'd need to restart the dev server after every edit\n * to FormContext.tsx to ensure all components use the same context instance.\n */\n\n// Define the context type\ninterface UniformContextType {\n  /** Form debug mode enabled or not */\n  debugMode: DebugMode;\n  /** settings for from debug mode */\n  debugModeSettings?: DebugModeSettings;\n  /** Function to update if the form can currently be submitted */\n  preventSubmit: (prevent: boolean) => void;\n  /** Setter to enable or disable form debug mode */\n  setDebugMode: (debugMode: DebugMode) => void;\n  /** Function to trigger form submit programmatically */\n  triggerSubmit: (e?: BaseSyntheticEvent) => Promise<void> | void;\n  /** User change tracking (user input only, not programmatic changes) */\n  userChange: {\n    /**\n     * Subscribe to user field changes.\n     * Returns an unsubscribe function.\n     */\n    subscribe: (listener: UserChangeListener) => () => void;\n    /**\n     * Notify all subscribers about a user field change.\n     * Called from useController when user interacts with a field.\n     */\n    notify: (fieldName: string, value: unknown) => void;\n  };\n  /** Form validation configuration */\n  validation: {\n    /** Base validation schema instance (without client validation) */\n    baseInstance?: VetoInstance;\n    /** Veto validation schema instance for form validation */\n    instance?: VetoInstance;\n    /** Current validation errors in form */\n    errors?: VetoFormattedError;\n    /** Function to set client validation schema for a specific key */\n    setClientValidationSchema: (\n      key: string,\n      schema: VetoTypeAny | null,\n    ) => void;\n  };\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nif (!(window as any).__UNIFORM_CONTEXT__) {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  (window as any).__UNIFORM_CONTEXT__ = React.createContext<UniformContextType>(\n    {\n      debugMode: 'off',\n      preventSubmit: () => {\n        return undefined;\n      },\n      setDebugMode: () => {\n        return undefined;\n      },\n      triggerSubmit: () => {\n        return undefined;\n      },\n      userChange: {\n        subscribe: () => {\n          return () => {\n            return undefined;\n          };\n        },\n        notify: () => {\n          return undefined;\n        },\n      },\n      validation: {\n        setClientValidationSchema: () => {\n          return undefined;\n        },\n      },\n    },\n  );\n  debug('Creating new UniformContext instance');\n} else {\n  debug(\n    'Reusing existing UniformContext instance from window.__UNIFORM_CONTEXT__',\n  );\n}\n\n// Export the singleton context instance from window\n// This ensures all imports get the same context, even after HMR\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const UniformContext = (window as any)\n  .__UNIFORM_CONTEXT__ as React.Context<UniformContextType>;\n\ndebug('UniformContext exported', {\n  contextExists: !!UniformContext,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  windowContextExists: !!(window as any).__UNIFORM_CONTEXT__,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  contextsMatch: UniformContext === (window as any).__UNIFORM_CONTEXT__,\n});\n\n// Define props for the FormProvider component, extending HookForm's props\ninterface FormProviderProps {\n  /** children form render function */\n  children: (childProps: {\n    handleSubmit: (e?: BaseSyntheticEvent) => Promise<void>;\n    isValid: boolean;\n  }) => ReactNode;\n  /** settings for from debug mode */\n  debugModeSettings?: DebugModeSettings;\n  /** initial form values */\n  initialValues?: FieldValues;\n  /** form submit handler */\n  onSubmit: SubmitHandler<FieldValues>;\n  /** Veto validation schema instance */\n  validation?: VetoInstance;\n  /** when the validation should be triggered */\n  validationTrigger: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\n/**\n * FormProvider component provides:\n * - Veto validation schema context\n * - Client validation schema management\n * - Submit handler with automatic data conversion and submission control with preventSubmit\n * - Form Debug Mode state\n * - React Hook Form context\n */\nconst FormProvider: React.FC<FormProviderProps> = ({\n  children,\n  debugModeSettings = undefined,\n  initialValues = undefined,\n  onSubmit,\n  validation: baseValidation = undefined,\n  validationTrigger,\n}) => {\n  // Form Debug mode state is handled in the form context\n  const [debugMode, setDebugMode] = useLocalStorage<DebugMode>(\n    debugModeSettings?.localStorageKey ?? DEBUG_MODE_LOCAL_STORAGE_KEY_DEFAULT,\n    'off',\n  );\n\n  // Create extended validation combining base + client validations\n  const { extendedValidation, setClientValidationSchema } =\n    useExtendedValidation(baseValidation);\n\n  // Create resolver from extended validation + get current validation errors\n  const { resolver, validationErrors, validationErrorsHash } =\n    useFormResolver(extendedValidation);\n\n  // Initialize react hook form with the resolver\n  const methods = useForm({\n    defaultValues: initialValues ? toFormFormat(initialValues) : initialValues,\n    // set rhf mode\n    // see: https://react-hook-form.com/docs/useform#mode\n    mode: validationTrigger,\n    resolver,\n  });\n\n  // Get isValid from React Hook Form's formState\n  const isValid = methods.formState?.isValid;\n\n  // Control if the form can currently be submitted\n  const [preventSubmit, setPreventSubmit] = useState(false);\n\n  // User change listener registry (stored in ref to avoid re-renders)\n  const userChangeListenersRef = useRef<Set<UserChangeListener>>(new Set());\n\n  // Subscribe to user changes\n  const subscribeUserChange = useCallback(\n    (listener: UserChangeListener): (() => void) => {\n      userChangeListenersRef.current.add(listener);\n      // Return cleanup function to unsubscribe\n      return () => {\n        userChangeListenersRef.current.delete(listener);\n      };\n    },\n    [],\n  );\n\n  // Notify all subscribers about user change\n  const notifyUserChange = useCallback(\n    (fieldName: string, value: unknown): void => {\n      // Notify all registered listeners\n      userChangeListenersRef.current.forEach((listener) => {\n        listener(fieldName as Path<object>, value);\n      });\n    },\n    [],\n  );\n\n  // Create submit handler with automatic data conversion\n  // eslint-disable-next-line consistent-return\n  const handleSubmit = async (e?: React.BaseSyntheticEvent) => {\n    debug('handleSubmit called', {\n      preventSubmit,\n      formStateIsValid: methods.formState.isValid,\n      validationErrors: methods.formState.errors,\n      validationTrigger,\n      formValues: methods.getValues(),\n    });\n\n    // only prevent submit when form state is valid, because otherwise\n    // submit will only trigger validation and add errors / focus invalid fields\n    if (methods.formState.isValid && preventSubmit) {\n      debug('⛔ Form submit PREVENTED', {\n        formStateIsValid: methods.formState.isValid,\n        preventSubmit,\n      });\n      console.warn(\n        '[FormProvider] form submit was prevented because preventSubmit is true...',\n      );\n      e?.preventDefault();\n      return Promise.resolve();\n    }\n\n    debug('✓ Form submit ALLOWED', {\n      formStateIsValid: methods.formState.isValid,\n      preventSubmit,\n      reason: !methods.formState.isValid\n        ? 'Form is invalid (will trigger validation and show errors)'\n        : 'Form is valid and preventSubmit is false',\n    });\n\n    // Convert nullish strings and filter out empty values before submission\n    const wrappedOnSubmit = (data: FieldValues, event?: BaseSyntheticEvent) => {\n      const submitData = toValidationFormat(data) ?? {};\n      debug('onSubmit callback called', { submitData });\n      return onSubmit(submitData, event);\n    };\n\n    await methods.handleSubmit(wrappedOnSubmit)(e);\n\n    debug('handleSubmit completed');\n  };\n\n  // Memoize the context value to prevent re-renders\n  const contextValue = useMemo(\n    () => {\n      return {\n        // set debugMode to disabled when debugModeSettings.disable is true\n        // otherwise use current debug mode from localStorage\n        debugMode: debugModeSettings?.disable ? 'disabled' : debugMode,\n        preventSubmit: (prevent: boolean) => {\n          debug('preventSubmit called', {\n            previousValue: preventSubmit,\n            newValue: prevent,\n            formStateIsValid: methods.formState.isValid,\n            validationErrors: methods.formState.errors,\n          });\n          setPreventSubmit(prevent);\n        },\n        setClientValidationSchema,\n        setDebugMode,\n        triggerSubmit: handleSubmit,\n        userChange: {\n          subscribe: subscribeUserChange,\n          notify: notifyUserChange,\n        },\n        validation: {\n          baseInstance: baseValidation,\n          instance: extendedValidation,\n          errors: validationErrors,\n          setClientValidationSchema,\n        },\n      };\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [debugMode, debugModeSettings?.disable, validationErrorsHash],\n  );\n\n  return (\n    <UniformContext.Provider value={contextValue}>\n      {/* Spread all hook form props into HookFormProvider */}\n      <HookFormProvider {...methods}>\n        {children({ handleSubmit, isValid })}\n      </HookFormProvider>\n    </UniformContext.Provider>\n  );\n};\n\nexport default FormProvider;\n"],"mappings":"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"}
+{"version":3,"file":"FormContext-Dl3k1r_k.js","names":["FormProvider","HookFormProvider"],"sources":["../src/Form/subcomponents/FormResolver.ts","../src/Form/subcomponents/FormContext.tsx"],"sourcesContent":["import type {\n  VetoFormattedError,\n  VetoInstance,\n  VetoTypeAny,\n} from '@fuf-stack/veto';\nimport type { FieldValues } from 'react-hook-form';\n\nimport { useMemo, useRef, useState } from 'react';\n\nimport { and, veto } from '@fuf-stack/veto';\n\nimport { toValidationFormat } from '../../helpers';\n\n/**\n * Hook that manages client validation schemas state.\n *\n * Provides a centralized way to add/remove dynamic validation schemas\n * that can be combined with base form validation.\n *\n * @returns Object with client validation state and memoized setter function\n */\nexport const useClientValidationManager = () => {\n  // Client validation schemas state\n  const [clientValidationSchemas, setClientValidationSchemas] = useState<\n    Record<string, VetoTypeAny>\n  >({});\n\n  // Memoized function to set/clear client validation schema\n  const setClientValidationSchema = useMemo(() => {\n    return (key: string, schema: VetoTypeAny | null) => {\n      // update client validation schemas\n      setClientValidationSchemas((prev) => {\n        // if no schema and no existing client validation schema for this key, do nothing\n        if (!prev[key] && !schema) {\n          return prev;\n        }\n        // if no schema, remove the client validation schema for this key\n        if (!schema) {\n          const { [key]: _removed, ...rest } = prev;\n          return rest;\n        }\n        // if schema, add or update the client validation schema for this key\n        return { ...prev, [key]: schema };\n      });\n    };\n  }, []);\n\n  return {\n    clientValidationSchemas,\n    setClientValidationSchema,\n  };\n};\n\n/**\n * Hook that creates an extended validation instance combining base Veto validation with dynamic client validation.\n *\n * @param baseValidation - Optional base Veto validation schema\n * @returns Combined validation instance and client schema setter\n */\nexport const useExtendedValidation = (baseValidation?: VetoInstance) => {\n  // Setup client validation schemas\n  const { clientValidationSchemas, setClientValidationSchema } =\n    useClientValidationManager();\n\n  // Create a stable dependency array from the client validation schemas\n  const clientSchemaValues = useMemo(\n    () => {\n      const keys = Object.keys(clientValidationSchemas).sort();\n      return keys\n        .map((key) => {\n          return clientValidationSchemas[key];\n        })\n        .filter(Boolean);\n    },\n    // Include the object identity to react to schema instance updates with same shape\n    [clientValidationSchemas],\n  );\n\n  // Memoized extended validation instance\n  const extendedValidation = useMemo(\n    () => {\n      const hasBaseValidation = !!baseValidation;\n      const hasClientSchemas = clientSchemaValues.length > 0;\n\n      // If no base validation and no client schemas, return undefined\n      if (!hasBaseValidation && !hasClientSchemas) {\n        return undefined;\n      }\n\n      // If no client schemas, return base validation\n      if (!hasClientSchemas) {\n        return baseValidation;\n      }\n\n      // Combine client validation schemas\n      const clientSchemasCombined = clientSchemaValues.reduce(\n        // @ts-expect-error is ok, because initially it is null\n        (combined, clientSchema) => {\n          return combined ? and(combined, clientSchema) : clientSchema;\n        },\n        null,\n      );\n\n      // return combined validation\n      if (hasBaseValidation && clientSchemasCombined) {\n        return veto(and(baseValidation.schema, clientSchemasCombined));\n      }\n\n      // If we only have client schemas, return them as a veto instance\n      if (clientSchemasCombined) {\n        return veto(clientSchemasCombined);\n      }\n\n      // This should not happen due to the conditions above, but just in case\n      return baseValidation;\n    },\n    // Recompute when validation schema instances change\n    [baseValidation, clientSchemaValues],\n  );\n\n  return {\n    extendedValidation,\n    setClientValidationSchema,\n  };\n};\n\n/**\n * Hook that creates a React Hook Form resolver from an extended validation instance.\n *\n * @param extendedValidation - Extended validation instance from useExtendedValidation\n * @returns Object containing resolver function, current validation errors, and optimization hash\n */\nexport const useFormResolver = (extendedValidation?: VetoInstance) => {\n  // Use ref to store validation errors without triggering re-renders\n  const validationErrors = useRef<VetoFormattedError>(undefined);\n\n  // Memoized resolver function for React Hook Form\n  const resolver = useMemo(() => {\n    if (!extendedValidation) {\n      return undefined;\n    }\n\n    return async (values: FieldValues) => {\n      const validationValues = toValidationFormat(values) ?? {};\n      const result = await extendedValidation.validateAsync(validationValues);\n      validationErrors.current = result.errors ?? undefined;\n\n      // Transform veto result to React Hook Form format\n      return {\n        values: result.data ?? {},\n        errors: result.errors ?? {},\n      };\n    };\n  }, [extendedValidation]);\n\n  // Hash for memo dependency optimization in consuming components\n  const validationErrorsHash = JSON.stringify(validationErrors.current);\n\n  return {\n    resolver,\n    validationErrors: validationErrors.current,\n    validationErrorsHash,\n  };\n};\n","import type {\n  VetoFormattedError,\n  VetoInstance,\n  VetoTypeAny,\n} from '@fuf-stack/veto';\nimport type { BaseSyntheticEvent, ReactNode } from 'react';\nimport type { FieldValues, Path, SubmitHandler } from 'react-hook-form';\n\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { FormProvider as HookFormProvider, useForm } from 'react-hook-form';\n\nimport createDebug from 'debug';\n\nimport { useLocalStorage } from '@fuf-stack/pixels';\n\nimport { toFormFormat, toValidationFormat } from '../../helpers';\nimport { useExtendedValidation, useFormResolver } from './FormResolver';\n\nconst debug = createDebug('uniform:FormContext');\n\ntype DebugMode = 'debug' | 'debug-testids' | 'off' | 'disabled';\n\nexport interface DebugModeSettings {\n  /** disable form debug completely */\n  disable?: boolean;\n  /** custom localStorage key to save debug mode state */\n  localStorageKey?: string;\n}\n\n/**\n * Listener function that gets called when a field changes due to user input\n */\nexport type UserChangeListener<TFieldValues extends object = object> = (\n  fieldName: Path<TFieldValues>,\n  value: unknown,\n) => void;\n\nconst DEBUG_MODE_LOCAL_STORAGE_KEY_DEFAULT = 'uniform:debug-mode';\n\n/**\n * The `UniformContext` provides control over the form's submission behavior and may optionally include\n * a Veto validation schema for form validation.\n *\n * Specifically, this context offers:\n * 1. **Form Submission Control**: The `preventSubmit` function allows components to enable or disable\n *    form submissions.\n * 2. **Optional Validation Schema**: The `validation` property may hold a Veto validation schema instance\n *    that can be used to validate form fields and handle validation logic.\n * 3. **Client Validation**: The `setClientValidationSchema` function allows setting dynamic client-side\n *    validation schemas that complement the base Veto validation.\n * 4. **User Change Tracking**: The `userChange` property provides a pub/sub system for tracking\n *    user-initiated field changes (typing, clicking, selecting) - NOT programmatic changes like\n *    form.reset() or form.setValue(). Used by the `useWatchUserChange` hook to enable reactive\n *    field dependencies.\n *\n * This context is useful for components that need to interact with or control the form submission state,\n * or access the validation schema for managing form validation logic.\n *\n * IMPORTANT: Context Singleton Pattern for HMR (Hot Module Replacement)\n * =====================================================================\n *\n * We use a global window variable to ensure only ONE context instance exists across\n * hot module reloads during development. This is critical because:\n *\n * **The Problem:**\n * When using Vite/Storybook with Fast Refresh (HMR), editing this file causes it to\n * be re-evaluated. Each re-evaluation runs `React.createContext()` again, creating a\n * NEW context instance. This leads to \"context instance mismatch\":\n *\n *   1. FormProvider (provider) loads and uses context instance A\n *   2. File is edited, HMR triggers\n *   3. SubmitButton (consumer) hot-reloads and imports context instance B\n *   4. Provider writes to instance A, Consumer reads from instance B\n *   5. Result: Consumer sees default values (triggerSubmit = () => undefined)\n *   6. Clicking submit does nothing because it calls the empty default function\n *\n * **The Solution:**\n * By storing the context in `window.__UNIFORM_CONTEXT__`, we ensure:\n *   - First load: Create context and store in window\n *   - Subsequent HMRs: Reuse the same context from window\n *   - All components always reference the SAME context instance\n *   - Provider and consumers can properly communicate\n *\n * **Why This Is Safe:**\n * - Only affects development (production has no HMR)\n * - Context type never changes (same interface)\n * - React handles cleanup on unmount normally\n * - No memory leaks (context is lightweight)\n *\n * Without this pattern, you'd need to restart the dev server after every edit\n * to FormContext.tsx to ensure all components use the same context instance.\n */\n\n// Define the context type\ninterface UniformContextType {\n  /** Form debug mode enabled or not */\n  debugMode: DebugMode;\n  /** settings for from debug mode */\n  debugModeSettings?: DebugModeSettings;\n  /** Function to update if the form can currently be submitted */\n  preventSubmit: (prevent: boolean) => void;\n  /** Setter to enable or disable form debug mode */\n  setDebugMode: (debugMode: DebugMode) => void;\n  /** Function to trigger form submit programmatically */\n  triggerSubmit: (e?: BaseSyntheticEvent) => Promise<void> | void;\n  /** User change tracking (user input only, not programmatic changes) */\n  userChange: {\n    /**\n     * Subscribe to user field changes.\n     * Returns an unsubscribe function.\n     */\n    subscribe: (listener: UserChangeListener) => () => void;\n    /**\n     * Notify all subscribers about a user field change.\n     * Called from useController when user interacts with a field.\n     */\n    notify: (fieldName: string, value: unknown) => void;\n  };\n  /** Form validation configuration */\n  validation: {\n    /** Base validation schema instance (without client validation) */\n    baseInstance?: VetoInstance;\n    /** Veto validation schema instance for form validation */\n    instance?: VetoInstance;\n    /** Current validation errors in form */\n    errors?: VetoFormattedError;\n    /** Function to set client validation schema for a specific key */\n    setClientValidationSchema: (\n      key: string,\n      schema: VetoTypeAny | null,\n    ) => void;\n  };\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nif (!(window as any).__UNIFORM_CONTEXT__) {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  (window as any).__UNIFORM_CONTEXT__ = React.createContext<UniformContextType>(\n    {\n      debugMode: 'off',\n      preventSubmit: () => {\n        return undefined;\n      },\n      setDebugMode: () => {\n        return undefined;\n      },\n      triggerSubmit: () => {\n        return undefined;\n      },\n      userChange: {\n        subscribe: () => {\n          return () => {\n            return undefined;\n          };\n        },\n        notify: () => {\n          return undefined;\n        },\n      },\n      validation: {\n        setClientValidationSchema: () => {\n          return undefined;\n        },\n      },\n    },\n  );\n  debug('Creating new UniformContext instance');\n} else {\n  debug(\n    'Reusing existing UniformContext instance from window.__UNIFORM_CONTEXT__',\n  );\n}\n\n// Export the singleton context instance from window\n// This ensures all imports get the same context, even after HMR\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const UniformContext = (window as any)\n  .__UNIFORM_CONTEXT__ as React.Context<UniformContextType>;\n\ndebug('UniformContext exported', {\n  contextExists: !!UniformContext,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  windowContextExists: !!(window as any).__UNIFORM_CONTEXT__,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  contextsMatch: UniformContext === (window as any).__UNIFORM_CONTEXT__,\n});\n\n// Define props for the FormProvider component, extending HookForm's props\ninterface FormProviderProps {\n  /** children form render function */\n  children: (childProps: {\n    handleSubmit: (e?: BaseSyntheticEvent) => Promise<void>;\n    isValid: boolean;\n  }) => ReactNode;\n  /** settings for from debug mode */\n  debugModeSettings?: DebugModeSettings;\n  /** initial form values */\n  initialValues?: FieldValues;\n  /** form submit handler */\n  onSubmit: SubmitHandler<FieldValues>;\n  /** Veto validation schema instance */\n  validation?: VetoInstance;\n  /** when the validation should be triggered */\n  validationTrigger: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\n/**\n * FormProvider component provides:\n * - Veto validation schema context\n * - Client validation schema management\n * - Submit handler with automatic data conversion and submission control with preventSubmit\n * - Form Debug Mode state\n * - React Hook Form context\n */\nconst FormProvider: React.FC<FormProviderProps> = ({\n  children,\n  debugModeSettings = undefined,\n  initialValues = undefined,\n  onSubmit,\n  validation: baseValidation = undefined,\n  validationTrigger,\n}) => {\n  // Form Debug mode state is handled in the form context\n  const [debugMode, setDebugMode] = useLocalStorage<DebugMode>(\n    debugModeSettings?.localStorageKey ?? DEBUG_MODE_LOCAL_STORAGE_KEY_DEFAULT,\n    'off',\n  );\n\n  // Create extended validation combining base + client validations\n  const { extendedValidation, setClientValidationSchema } =\n    useExtendedValidation(baseValidation);\n\n  // Create resolver from extended validation + get current validation errors\n  const { resolver, validationErrors, validationErrorsHash } =\n    useFormResolver(extendedValidation);\n\n  // Initialize react hook form with the resolver\n  const methods = useForm({\n    defaultValues: initialValues ? toFormFormat(initialValues) : initialValues,\n    // set rhf mode\n    // see: https://react-hook-form.com/docs/useform#mode\n    mode: validationTrigger,\n    resolver,\n  });\n\n  // Get isValid from React Hook Form's formState\n  const isValid = methods.formState?.isValid;\n\n  // Control if the form can currently be submitted\n  const [preventSubmit, setPreventSubmit] = useState(false);\n\n  // User change listener registry (stored in ref to avoid re-renders)\n  const userChangeListenersRef = useRef<Set<UserChangeListener>>(new Set());\n\n  // Subscribe to user changes\n  const subscribeUserChange = useCallback(\n    (listener: UserChangeListener): (() => void) => {\n      userChangeListenersRef.current.add(listener);\n      // Return cleanup function to unsubscribe\n      return () => {\n        userChangeListenersRef.current.delete(listener);\n      };\n    },\n    [],\n  );\n\n  // Notify all subscribers about user change\n  const notifyUserChange = useCallback(\n    (fieldName: string, value: unknown): void => {\n      // Notify all registered listeners\n      userChangeListenersRef.current.forEach((listener) => {\n        listener(fieldName as Path<object>, value);\n      });\n    },\n    [],\n  );\n\n  // Create submit handler with automatic data conversion\n  // eslint-disable-next-line consistent-return\n  const handleSubmit = async (e?: React.BaseSyntheticEvent) => {\n    debug('handleSubmit called', {\n      preventSubmit,\n      formStateIsValid: methods.formState.isValid,\n      validationErrors: methods.formState.errors,\n      validationTrigger,\n      formValues: methods.getValues(),\n    });\n\n    // only prevent submit when form state is valid, because otherwise\n    // submit will only trigger validation and add errors / focus invalid fields\n    if (methods.formState.isValid && preventSubmit) {\n      debug('⛔ Form submit PREVENTED', {\n        formStateIsValid: methods.formState.isValid,\n        preventSubmit,\n      });\n      console.warn(\n        '[FormProvider] form submit was prevented because preventSubmit is true...',\n      );\n      e?.preventDefault();\n      return Promise.resolve();\n    }\n\n    debug('✓ Form submit ALLOWED', {\n      formStateIsValid: methods.formState.isValid,\n      preventSubmit,\n      reason: !methods.formState.isValid\n        ? 'Form is invalid (will trigger validation and show errors)'\n        : 'Form is valid and preventSubmit is false',\n    });\n\n    // Convert nullish strings and filter out empty values before submission\n    const wrappedOnSubmit = (data: FieldValues, event?: BaseSyntheticEvent) => {\n      const submitData = toValidationFormat(data) ?? {};\n      debug('onSubmit callback called', { submitData });\n      return onSubmit(submitData, event);\n    };\n\n    await methods.handleSubmit(wrappedOnSubmit)(e);\n\n    debug('handleSubmit completed');\n  };\n\n  // Memoize the context value to prevent re-renders\n  const contextValue = useMemo(\n    () => {\n      return {\n        // set debugMode to disabled when debugModeSettings.disable is true\n        // otherwise use current debug mode from localStorage\n        debugMode: debugModeSettings?.disable ? 'disabled' : debugMode,\n        preventSubmit: (prevent: boolean) => {\n          debug('preventSubmit called', {\n            previousValue: preventSubmit,\n            newValue: prevent,\n            formStateIsValid: methods.formState.isValid,\n            validationErrors: methods.formState.errors,\n          });\n          setPreventSubmit(prevent);\n        },\n        setClientValidationSchema,\n        setDebugMode,\n        triggerSubmit: handleSubmit,\n        userChange: {\n          subscribe: subscribeUserChange,\n          notify: notifyUserChange,\n        },\n        validation: {\n          baseInstance: baseValidation,\n          instance: extendedValidation,\n          errors: validationErrors,\n          setClientValidationSchema,\n        },\n      };\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [debugMode, debugModeSettings?.disable, validationErrorsHash],\n  );\n\n  return (\n    <UniformContext.Provider value={contextValue}>\n      {/* Spread all hook form props into HookFormProvider */}\n      <HookFormProvider {...methods}>\n        {children({ handleSubmit, isValid })}\n      </HookFormProvider>\n    </UniformContext.Provider>\n  );\n};\n\nexport default FormProvider;\n"],"mappings":"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"}

package/dist/{FormContext-Bb6d8hdG.cjs → FormContext-Lw4YL4-B.cjs}

@@ -25,7 +25,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 }) : target, mod));
 
 //#endregion
-const require_helpers = require('./helpers-B84E9vHd.cjs');
+const require_helpers = require('./helpers-nYTmL2gX.cjs');
 let react = require("react");
 react = __toESM(react);
 let _fuf_stack_pixels = require("@fuf-stack/pixels");
@@ -272,4 +272,4 @@ Object.defineProperty(exports, '__toESM', {
     return __toESM;
   }
 });
-//# sourceMappingURL=FormContext-Bb6d8hdG.cjs.map
+//# sourceMappingURL=FormContext-Lw4YL4-B.cjs.map

package/dist/{FormContext-Bb6d8hdG.cjs.map → FormContext-Lw4YL4-B.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"FormContext-Bb6d8hdG.cjs","names":["toValidationFormat","debug","React","toFormFormat","toValidationFormat","HookFormProvider"],"sources":["../src/Form/subcomponents/FormResolver.ts","../src/Form/subcomponents/FormContext.tsx"],"sourcesContent":["import type {\n  VetoFormattedError,\n  VetoInstance,\n  VetoTypeAny,\n} from '@fuf-stack/veto';\nimport type { FieldValues } from 'react-hook-form';\n\nimport { useMemo, useRef, useState } from 'react';\n\nimport { and, veto } from '@fuf-stack/veto';\n\nimport { toValidationFormat } from '../../helpers';\n\n/**\n * Hook that manages client validation schemas state.\n *\n * Provides a centralized way to add/remove dynamic validation schemas\n * that can be combined with base form validation.\n *\n * @returns Object with client validation state and memoized setter function\n */\nexport const useClientValidationManager = () => {\n  // Client validation schemas state\n  const [clientValidationSchemas, setClientValidationSchemas] = useState<\n    Record<string, VetoTypeAny>\n  >({});\n\n  // Memoized function to set/clear client validation schema\n  const setClientValidationSchema = useMemo(() => {\n    return (key: string, schema: VetoTypeAny | null) => {\n      // update client validation schemas\n      setClientValidationSchemas((prev) => {\n        // if no schema and no existing client validation schema for this key, do nothing\n        if (!prev[key] && !schema) {\n          return prev;\n        }\n        // if no schema, remove the client validation schema for this key\n        if (!schema) {\n          const { [key]: _removed, ...rest } = prev;\n          return rest;\n        }\n        // if schema, add or update the client validation schema for this key\n        return { ...prev, [key]: schema };\n      });\n    };\n  }, []);\n\n  return {\n    clientValidationSchemas,\n    setClientValidationSchema,\n  };\n};\n\n/**\n * Hook that creates an extended validation instance combining base Veto validation with dynamic client validation.\n *\n * @param baseValidation - Optional base Veto validation schema\n * @returns Combined validation instance and client schema setter\n */\nexport const useExtendedValidation = (baseValidation?: VetoInstance) => {\n  // Setup client validation schemas\n  const { clientValidationSchemas, setClientValidationSchema } =\n    useClientValidationManager();\n\n  // Create a stable dependency array from the client validation schemas\n  const clientSchemaValues = useMemo(\n    () => {\n      const keys = Object.keys(clientValidationSchemas).sort();\n      return keys\n        .map((key) => {\n          return clientValidationSchemas[key];\n        })\n        .filter(Boolean);\n    },\n    // Include the object identity to react to schema instance updates with same shape\n    [clientValidationSchemas],\n  );\n\n  // Memoized extended validation instance\n  const extendedValidation = useMemo(\n    () => {\n      const hasBaseValidation = !!baseValidation;\n      const hasClientSchemas = clientSchemaValues.length > 0;\n\n      // If no base validation and no client schemas, return undefined\n      if (!hasBaseValidation && !hasClientSchemas) {\n        return undefined;\n      }\n\n      // If no client schemas, return base validation\n      if (!hasClientSchemas) {\n        return baseValidation;\n      }\n\n      // Combine client validation schemas\n      const clientSchemasCombined = clientSchemaValues.reduce(\n        // @ts-expect-error is ok, because initially it is null\n        (combined, clientSchema) => {\n          return combined ? and(combined, clientSchema) : clientSchema;\n        },\n        null,\n      );\n\n      // return combined validation\n      if (hasBaseValidation && clientSchemasCombined) {\n        return veto(and(baseValidation.schema, clientSchemasCombined));\n      }\n\n      // If we only have client schemas, return them as a veto instance\n      if (clientSchemasCombined) {\n        return veto(clientSchemasCombined);\n      }\n\n      // This should not happen due to the conditions above, but just in case\n      return baseValidation;\n    },\n    // Recompute when validation schema instances change\n    [baseValidation, clientSchemaValues],\n  );\n\n  return {\n    extendedValidation,\n    setClientValidationSchema,\n  };\n};\n\n/**\n * Hook that creates a React Hook Form resolver from an extended validation instance.\n *\n * @param extendedValidation - Extended validation instance from useExtendedValidation\n * @returns Object containing resolver function, current validation errors, and optimization hash\n */\nexport const useFormResolver = (extendedValidation?: VetoInstance) => {\n  // Use ref to store validation errors without triggering re-renders\n  const validationErrors = useRef<VetoFormattedError>(undefined);\n\n  // Memoized resolver function for React Hook Form\n  const resolver = useMemo(() => {\n    if (!extendedValidation) {\n      return undefined;\n    }\n\n    return async (values: FieldValues) => {\n      const validationValues = toValidationFormat(values) ?? {};\n      const result = await extendedValidation.validateAsync(validationValues);\n      validationErrors.current = result.errors ?? undefined;\n\n      // Transform veto result to React Hook Form format\n      return {\n        values: result.data ?? {},\n        errors: result.errors ?? {},\n      };\n    };\n  }, [extendedValidation]);\n\n  // Hash for memo dependency optimization in consuming components\n  const validationErrorsHash = JSON.stringify(validationErrors.current);\n\n  return {\n    resolver,\n    validationErrors: validationErrors.current,\n    validationErrorsHash,\n  };\n};\n","import type {\n  VetoFormattedError,\n  VetoInstance,\n  VetoTypeAny,\n} from '@fuf-stack/veto';\nimport type { BaseSyntheticEvent, ReactNode } from 'react';\nimport type { FieldValues, Path, SubmitHandler } from 'react-hook-form';\n\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { FormProvider as HookFormProvider, useForm } from 'react-hook-form';\n\nimport createDebug from 'debug';\n\nimport { useLocalStorage } from '@fuf-stack/pixels';\n\nimport { toFormFormat, toValidationFormat } from '../../helpers';\nimport { useExtendedValidation, useFormResolver } from './FormResolver';\n\nconst debug = createDebug('uniform:FormContext');\n\ntype DebugMode = 'debug' | 'debug-testids' | 'off' | 'disabled';\n\nexport interface DebugModeSettings {\n  /** disable form debug completely */\n  disable?: boolean;\n  /** custom localStorage key to save debug mode state */\n  localStorageKey?: string;\n}\n\n/**\n * Listener function that gets called when a field changes due to user input\n */\nexport type UserChangeListener<TFieldValues extends object = object> = (\n  fieldName: Path<TFieldValues>,\n  value: unknown,\n) => void;\n\nconst DEBUG_MODE_LOCAL_STORAGE_KEY_DEFAULT = 'uniform:debug-mode';\n\n/**\n * The `UniformContext` provides control over the form's submission behavior and may optionally include\n * a Veto validation schema for form validation.\n *\n * Specifically, this context offers:\n * 1. **Form Submission Control**: The `preventSubmit` function allows components to enable or disable\n *    form submissions.\n * 2. **Optional Validation Schema**: The `validation` property may hold a Veto validation schema instance\n *    that can be used to validate form fields and handle validation logic.\n * 3. **Client Validation**: The `setClientValidationSchema` function allows setting dynamic client-side\n *    validation schemas that complement the base Veto validation.\n * 4. **User Change Tracking**: The `userChange` property provides a pub/sub system for tracking\n *    user-initiated field changes (typing, clicking, selecting) - NOT programmatic changes like\n *    form.reset() or form.setValue(). Used by the `useWatchUserChange` hook to enable reactive\n *    field dependencies.\n *\n * This context is useful for components that need to interact with or control the form submission state,\n * or access the validation schema for managing form validation logic.\n *\n * IMPORTANT: Context Singleton Pattern for HMR (Hot Module Replacement)\n * =====================================================================\n *\n * We use a global window variable to ensure only ONE context instance exists across\n * hot module reloads during development. This is critical because:\n *\n * **The Problem:**\n * When using Vite/Storybook with Fast Refresh (HMR), editing this file causes it to\n * be re-evaluated. Each re-evaluation runs `React.createContext()` again, creating a\n * NEW context instance. This leads to \"context instance mismatch\":\n *\n *   1. FormProvider (provider) loads and uses context instance A\n *   2. File is edited, HMR triggers\n *   3. SubmitButton (consumer) hot-reloads and imports context instance B\n *   4. Provider writes to instance A, Consumer reads from instance B\n *   5. Result: Consumer sees default values (triggerSubmit = () => undefined)\n *   6. Clicking submit does nothing because it calls the empty default function\n *\n * **The Solution:**\n * By storing the context in `window.__UNIFORM_CONTEXT__`, we ensure:\n *   - First load: Create context and store in window\n *   - Subsequent HMRs: Reuse the same context from window\n *   - All components always reference the SAME context instance\n *   - Provider and consumers can properly communicate\n *\n * **Why This Is Safe:**\n * - Only affects development (production has no HMR)\n * - Context type never changes (same interface)\n * - React handles cleanup on unmount normally\n * - No memory leaks (context is lightweight)\n *\n * Without this pattern, you'd need to restart the dev server after every edit\n * to FormContext.tsx to ensure all components use the same context instance.\n */\n\n// Define the context type\ninterface UniformContextType {\n  /** Form debug mode enabled or not */\n  debugMode: DebugMode;\n  /** settings for from debug mode */\n  debugModeSettings?: DebugModeSettings;\n  /** Function to update if the form can currently be submitted */\n  preventSubmit: (prevent: boolean) => void;\n  /** Setter to enable or disable form debug mode */\n  setDebugMode: (debugMode: DebugMode) => void;\n  /** Function to trigger form submit programmatically */\n  triggerSubmit: (e?: BaseSyntheticEvent) => Promise<void> | void;\n  /** User change tracking (user input only, not programmatic changes) */\n  userChange: {\n    /**\n     * Subscribe to user field changes.\n     * Returns an unsubscribe function.\n     */\n    subscribe: (listener: UserChangeListener) => () => void;\n    /**\n     * Notify all subscribers about a user field change.\n     * Called from useController when user interacts with a field.\n     */\n    notify: (fieldName: string, value: unknown) => void;\n  };\n  /** Form validation configuration */\n  validation: {\n    /** Base validation schema instance (without client validation) */\n    baseInstance?: VetoInstance;\n    /** Veto validation schema instance for form validation */\n    instance?: VetoInstance;\n    /** Current validation errors in form */\n    errors?: VetoFormattedError;\n    /** Function to set client validation schema for a specific key */\n    setClientValidationSchema: (\n      key: string,\n      schema: VetoTypeAny | null,\n    ) => void;\n  };\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nif (!(window as any).__UNIFORM_CONTEXT__) {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  (window as any).__UNIFORM_CONTEXT__ = React.createContext<UniformContextType>(\n    {\n      debugMode: 'off',\n      preventSubmit: () => {\n        return undefined;\n      },\n      setDebugMode: () => {\n        return undefined;\n      },\n      triggerSubmit: () => {\n        return undefined;\n      },\n      userChange: {\n        subscribe: () => {\n          return () => {\n            return undefined;\n          };\n        },\n        notify: () => {\n          return undefined;\n        },\n      },\n      validation: {\n        setClientValidationSchema: () => {\n          return undefined;\n        },\n      },\n    },\n  );\n  debug('Creating new UniformContext instance');\n} else {\n  debug(\n    'Reusing existing UniformContext instance from window.__UNIFORM_CONTEXT__',\n  );\n}\n\n// Export the singleton context instance from window\n// This ensures all imports get the same context, even after HMR\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const UniformContext = (window as any)\n  .__UNIFORM_CONTEXT__ as React.Context<UniformContextType>;\n\ndebug('UniformContext exported', {\n  contextExists: !!UniformContext,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  windowContextExists: !!(window as any).__UNIFORM_CONTEXT__,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  contextsMatch: UniformContext === (window as any).__UNIFORM_CONTEXT__,\n});\n\n// Define props for the FormProvider component, extending HookForm's props\ninterface FormProviderProps {\n  /** children form render function */\n  children: (childProps: {\n    handleSubmit: (e?: BaseSyntheticEvent) => Promise<void>;\n    isValid: boolean;\n  }) => ReactNode;\n  /** settings for from debug mode */\n  debugModeSettings?: DebugModeSettings;\n  /** initial form values */\n  initialValues?: FieldValues;\n  /** form submit handler */\n  onSubmit: SubmitHandler<FieldValues>;\n  /** Veto validation schema instance */\n  validation?: VetoInstance;\n  /** when the validation should be triggered */\n  validationTrigger: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\n/**\n * FormProvider component provides:\n * - Veto validation schema context\n * - Client validation schema management\n * - Submit handler with automatic data conversion and submission control with preventSubmit\n * - Form Debug Mode state\n * - React Hook Form context\n */\nconst FormProvider: React.FC<FormProviderProps> = ({\n  children,\n  debugModeSettings = undefined,\n  initialValues = undefined,\n  onSubmit,\n  validation: baseValidation = undefined,\n  validationTrigger,\n}) => {\n  // Form Debug mode state is handled in the form context\n  const [debugMode, setDebugMode] = useLocalStorage<DebugMode>(\n    debugModeSettings?.localStorageKey ?? DEBUG_MODE_LOCAL_STORAGE_KEY_DEFAULT,\n    'off',\n  );\n\n  // Create extended validation combining base + client validations\n  const { extendedValidation, setClientValidationSchema } =\n    useExtendedValidation(baseValidation);\n\n  // Create resolver from extended validation + get current validation errors\n  const { resolver, validationErrors, validationErrorsHash } =\n    useFormResolver(extendedValidation);\n\n  // Initialize react hook form with the resolver\n  const methods = useForm({\n    defaultValues: initialValues ? toFormFormat(initialValues) : initialValues,\n    // set rhf mode\n    // see: https://react-hook-form.com/docs/useform#mode\n    mode: validationTrigger,\n    resolver,\n  });\n\n  // Get isValid from React Hook Form's formState\n  const isValid = methods.formState?.isValid;\n\n  // Control if the form can currently be submitted\n  const [preventSubmit, setPreventSubmit] = useState(false);\n\n  // User change listener registry (stored in ref to avoid re-renders)\n  const userChangeListenersRef = useRef<Set<UserChangeListener>>(new Set());\n\n  // Subscribe to user changes\n  const subscribeUserChange = useCallback(\n    (listener: UserChangeListener): (() => void) => {\n      userChangeListenersRef.current.add(listener);\n      // Return cleanup function to unsubscribe\n      return () => {\n        userChangeListenersRef.current.delete(listener);\n      };\n    },\n    [],\n  );\n\n  // Notify all subscribers about user change\n  const notifyUserChange = useCallback(\n    (fieldName: string, value: unknown): void => {\n      // Notify all registered listeners\n      userChangeListenersRef.current.forEach((listener) => {\n        listener(fieldName as Path<object>, value);\n      });\n    },\n    [],\n  );\n\n  // Create submit handler with automatic data conversion\n  // eslint-disable-next-line consistent-return\n  const handleSubmit = async (e?: React.BaseSyntheticEvent) => {\n    debug('handleSubmit called', {\n      preventSubmit,\n      formStateIsValid: methods.formState.isValid,\n      validationErrors: methods.formState.errors,\n      validationTrigger,\n      formValues: methods.getValues(),\n    });\n\n    // only prevent submit when form state is valid, because otherwise\n    // submit will only trigger validation and add errors / focus invalid fields\n    if (methods.formState.isValid && preventSubmit) {\n      debug('⛔ Form submit PREVENTED', {\n        formStateIsValid: methods.formState.isValid,\n        preventSubmit,\n      });\n      console.warn(\n        '[FormProvider] form submit was prevented because preventSubmit is true...',\n      );\n      e?.preventDefault();\n      return Promise.resolve();\n    }\n\n    debug('✓ Form submit ALLOWED', {\n      formStateIsValid: methods.formState.isValid,\n      preventSubmit,\n      reason: !methods.formState.isValid\n        ? 'Form is invalid (will trigger validation and show errors)'\n        : 'Form is valid and preventSubmit is false',\n    });\n\n    // Convert nullish strings and filter out empty values before submission\n    const wrappedOnSubmit = (data: FieldValues, event?: BaseSyntheticEvent) => {\n      const submitData = toValidationFormat(data) ?? {};\n      debug('onSubmit callback called', { submitData });\n      return onSubmit(submitData, event);\n    };\n\n    await methods.handleSubmit(wrappedOnSubmit)(e);\n\n    debug('handleSubmit completed');\n  };\n\n  // Memoize the context value to prevent re-renders\n  const contextValue = useMemo(\n    () => {\n      return {\n        // set debugMode to disabled when debugModeSettings.disable is true\n        // otherwise use current debug mode from localStorage\n        debugMode: debugModeSettings?.disable ? 'disabled' : debugMode,\n        preventSubmit: (prevent: boolean) => {\n          debug('preventSubmit called', {\n            previousValue: preventSubmit,\n            newValue: prevent,\n            formStateIsValid: methods.formState.isValid,\n            validationErrors: methods.formState.errors,\n          });\n          setPreventSubmit(prevent);\n        },\n        setClientValidationSchema,\n        setDebugMode,\n        triggerSubmit: handleSubmit,\n        userChange: {\n          subscribe: subscribeUserChange,\n          notify: notifyUserChange,\n        },\n        validation: {\n          baseInstance: baseValidation,\n          instance: extendedValidation,\n          errors: validationErrors,\n          setClientValidationSchema,\n        },\n      };\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [debugMode, debugModeSettings?.disable, validationErrorsHash],\n  );\n\n  return (\n    <UniformContext.Provider value={contextValue}>\n      {/* Spread all hook form props into HookFormProvider */}\n      <HookFormProvider {...methods}>\n        {children({ handleSubmit, isValid })}\n      </HookFormProvider>\n    </UniformContext.Provider>\n  );\n};\n\nexport default FormProvider;\n"],"mappings":"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"}
+{"version":3,"file":"FormContext-Lw4YL4-B.cjs","names":["toValidationFormat","debug","React","toFormFormat","toValidationFormat","HookFormProvider"],"sources":["../src/Form/subcomponents/FormResolver.ts","../src/Form/subcomponents/FormContext.tsx"],"sourcesContent":["import type {\n  VetoFormattedError,\n  VetoInstance,\n  VetoTypeAny,\n} from '@fuf-stack/veto';\nimport type { FieldValues } from 'react-hook-form';\n\nimport { useMemo, useRef, useState } from 'react';\n\nimport { and, veto } from '@fuf-stack/veto';\n\nimport { toValidationFormat } from '../../helpers';\n\n/**\n * Hook that manages client validation schemas state.\n *\n * Provides a centralized way to add/remove dynamic validation schemas\n * that can be combined with base form validation.\n *\n * @returns Object with client validation state and memoized setter function\n */\nexport const useClientValidationManager = () => {\n  // Client validation schemas state\n  const [clientValidationSchemas, setClientValidationSchemas] = useState<\n    Record<string, VetoTypeAny>\n  >({});\n\n  // Memoized function to set/clear client validation schema\n  const setClientValidationSchema = useMemo(() => {\n    return (key: string, schema: VetoTypeAny | null) => {\n      // update client validation schemas\n      setClientValidationSchemas((prev) => {\n        // if no schema and no existing client validation schema for this key, do nothing\n        if (!prev[key] && !schema) {\n          return prev;\n        }\n        // if no schema, remove the client validation schema for this key\n        if (!schema) {\n          const { [key]: _removed, ...rest } = prev;\n          return rest;\n        }\n        // if schema, add or update the client validation schema for this key\n        return { ...prev, [key]: schema };\n      });\n    };\n  }, []);\n\n  return {\n    clientValidationSchemas,\n    setClientValidationSchema,\n  };\n};\n\n/**\n * Hook that creates an extended validation instance combining base Veto validation with dynamic client validation.\n *\n * @param baseValidation - Optional base Veto validation schema\n * @returns Combined validation instance and client schema setter\n */\nexport const useExtendedValidation = (baseValidation?: VetoInstance) => {\n  // Setup client validation schemas\n  const { clientValidationSchemas, setClientValidationSchema } =\n    useClientValidationManager();\n\n  // Create a stable dependency array from the client validation schemas\n  const clientSchemaValues = useMemo(\n    () => {\n      const keys = Object.keys(clientValidationSchemas).sort();\n      return keys\n        .map((key) => {\n          return clientValidationSchemas[key];\n        })\n        .filter(Boolean);\n    },\n    // Include the object identity to react to schema instance updates with same shape\n    [clientValidationSchemas],\n  );\n\n  // Memoized extended validation instance\n  const extendedValidation = useMemo(\n    () => {\n      const hasBaseValidation = !!baseValidation;\n      const hasClientSchemas = clientSchemaValues.length > 0;\n\n      // If no base validation and no client schemas, return undefined\n      if (!hasBaseValidation && !hasClientSchemas) {\n        return undefined;\n      }\n\n      // If no client schemas, return base validation\n      if (!hasClientSchemas) {\n        return baseValidation;\n      }\n\n      // Combine client validation schemas\n      const clientSchemasCombined = clientSchemaValues.reduce(\n        // @ts-expect-error is ok, because initially it is null\n        (combined, clientSchema) => {\n          return combined ? and(combined, clientSchema) : clientSchema;\n        },\n        null,\n      );\n\n      // return combined validation\n      if (hasBaseValidation && clientSchemasCombined) {\n        return veto(and(baseValidation.schema, clientSchemasCombined));\n      }\n\n      // If we only have client schemas, return them as a veto instance\n      if (clientSchemasCombined) {\n        return veto(clientSchemasCombined);\n      }\n\n      // This should not happen due to the conditions above, but just in case\n      return baseValidation;\n    },\n    // Recompute when validation schema instances change\n    [baseValidation, clientSchemaValues],\n  );\n\n  return {\n    extendedValidation,\n    setClientValidationSchema,\n  };\n};\n\n/**\n * Hook that creates a React Hook Form resolver from an extended validation instance.\n *\n * @param extendedValidation - Extended validation instance from useExtendedValidation\n * @returns Object containing resolver function, current validation errors, and optimization hash\n */\nexport const useFormResolver = (extendedValidation?: VetoInstance) => {\n  // Use ref to store validation errors without triggering re-renders\n  const validationErrors = useRef<VetoFormattedError>(undefined);\n\n  // Memoized resolver function for React Hook Form\n  const resolver = useMemo(() => {\n    if (!extendedValidation) {\n      return undefined;\n    }\n\n    return async (values: FieldValues) => {\n      const validationValues = toValidationFormat(values) ?? {};\n      const result = await extendedValidation.validateAsync(validationValues);\n      validationErrors.current = result.errors ?? undefined;\n\n      // Transform veto result to React Hook Form format\n      return {\n        values: result.data ?? {},\n        errors: result.errors ?? {},\n      };\n    };\n  }, [extendedValidation]);\n\n  // Hash for memo dependency optimization in consuming components\n  const validationErrorsHash = JSON.stringify(validationErrors.current);\n\n  return {\n    resolver,\n    validationErrors: validationErrors.current,\n    validationErrorsHash,\n  };\n};\n","import type {\n  VetoFormattedError,\n  VetoInstance,\n  VetoTypeAny,\n} from '@fuf-stack/veto';\nimport type { BaseSyntheticEvent, ReactNode } from 'react';\nimport type { FieldValues, Path, SubmitHandler } from 'react-hook-form';\n\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { FormProvider as HookFormProvider, useForm } from 'react-hook-form';\n\nimport createDebug from 'debug';\n\nimport { useLocalStorage } from '@fuf-stack/pixels';\n\nimport { toFormFormat, toValidationFormat } from '../../helpers';\nimport { useExtendedValidation, useFormResolver } from './FormResolver';\n\nconst debug = createDebug('uniform:FormContext');\n\ntype DebugMode = 'debug' | 'debug-testids' | 'off' | 'disabled';\n\nexport interface DebugModeSettings {\n  /** disable form debug completely */\n  disable?: boolean;\n  /** custom localStorage key to save debug mode state */\n  localStorageKey?: string;\n}\n\n/**\n * Listener function that gets called when a field changes due to user input\n */\nexport type UserChangeListener<TFieldValues extends object = object> = (\n  fieldName: Path<TFieldValues>,\n  value: unknown,\n) => void;\n\nconst DEBUG_MODE_LOCAL_STORAGE_KEY_DEFAULT = 'uniform:debug-mode';\n\n/**\n * The `UniformContext` provides control over the form's submission behavior and may optionally include\n * a Veto validation schema for form validation.\n *\n * Specifically, this context offers:\n * 1. **Form Submission Control**: The `preventSubmit` function allows components to enable or disable\n *    form submissions.\n * 2. **Optional Validation Schema**: The `validation` property may hold a Veto validation schema instance\n *    that can be used to validate form fields and handle validation logic.\n * 3. **Client Validation**: The `setClientValidationSchema` function allows setting dynamic client-side\n *    validation schemas that complement the base Veto validation.\n * 4. **User Change Tracking**: The `userChange` property provides a pub/sub system for tracking\n *    user-initiated field changes (typing, clicking, selecting) - NOT programmatic changes like\n *    form.reset() or form.setValue(). Used by the `useWatchUserChange` hook to enable reactive\n *    field dependencies.\n *\n * This context is useful for components that need to interact with or control the form submission state,\n * or access the validation schema for managing form validation logic.\n *\n * IMPORTANT: Context Singleton Pattern for HMR (Hot Module Replacement)\n * =====================================================================\n *\n * We use a global window variable to ensure only ONE context instance exists across\n * hot module reloads during development. This is critical because:\n *\n * **The Problem:**\n * When using Vite/Storybook with Fast Refresh (HMR), editing this file causes it to\n * be re-evaluated. Each re-evaluation runs `React.createContext()` again, creating a\n * NEW context instance. This leads to \"context instance mismatch\":\n *\n *   1. FormProvider (provider) loads and uses context instance A\n *   2. File is edited, HMR triggers\n *   3. SubmitButton (consumer) hot-reloads and imports context instance B\n *   4. Provider writes to instance A, Consumer reads from instance B\n *   5. Result: Consumer sees default values (triggerSubmit = () => undefined)\n *   6. Clicking submit does nothing because it calls the empty default function\n *\n * **The Solution:**\n * By storing the context in `window.__UNIFORM_CONTEXT__`, we ensure:\n *   - First load: Create context and store in window\n *   - Subsequent HMRs: Reuse the same context from window\n *   - All components always reference the SAME context instance\n *   - Provider and consumers can properly communicate\n *\n * **Why This Is Safe:**\n * - Only affects development (production has no HMR)\n * - Context type never changes (same interface)\n * - React handles cleanup on unmount normally\n * - No memory leaks (context is lightweight)\n *\n * Without this pattern, you'd need to restart the dev server after every edit\n * to FormContext.tsx to ensure all components use the same context instance.\n */\n\n// Define the context type\ninterface UniformContextType {\n  /** Form debug mode enabled or not */\n  debugMode: DebugMode;\n  /** settings for from debug mode */\n  debugModeSettings?: DebugModeSettings;\n  /** Function to update if the form can currently be submitted */\n  preventSubmit: (prevent: boolean) => void;\n  /** Setter to enable or disable form debug mode */\n  setDebugMode: (debugMode: DebugMode) => void;\n  /** Function to trigger form submit programmatically */\n  triggerSubmit: (e?: BaseSyntheticEvent) => Promise<void> | void;\n  /** User change tracking (user input only, not programmatic changes) */\n  userChange: {\n    /**\n     * Subscribe to user field changes.\n     * Returns an unsubscribe function.\n     */\n    subscribe: (listener: UserChangeListener) => () => void;\n    /**\n     * Notify all subscribers about a user field change.\n     * Called from useController when user interacts with a field.\n     */\n    notify: (fieldName: string, value: unknown) => void;\n  };\n  /** Form validation configuration */\n  validation: {\n    /** Base validation schema instance (without client validation) */\n    baseInstance?: VetoInstance;\n    /** Veto validation schema instance for form validation */\n    instance?: VetoInstance;\n    /** Current validation errors in form */\n    errors?: VetoFormattedError;\n    /** Function to set client validation schema for a specific key */\n    setClientValidationSchema: (\n      key: string,\n      schema: VetoTypeAny | null,\n    ) => void;\n  };\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nif (!(window as any).__UNIFORM_CONTEXT__) {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  (window as any).__UNIFORM_CONTEXT__ = React.createContext<UniformContextType>(\n    {\n      debugMode: 'off',\n      preventSubmit: () => {\n        return undefined;\n      },\n      setDebugMode: () => {\n        return undefined;\n      },\n      triggerSubmit: () => {\n        return undefined;\n      },\n      userChange: {\n        subscribe: () => {\n          return () => {\n            return undefined;\n          };\n        },\n        notify: () => {\n          return undefined;\n        },\n      },\n      validation: {\n        setClientValidationSchema: () => {\n          return undefined;\n        },\n      },\n    },\n  );\n  debug('Creating new UniformContext instance');\n} else {\n  debug(\n    'Reusing existing UniformContext instance from window.__UNIFORM_CONTEXT__',\n  );\n}\n\n// Export the singleton context instance from window\n// This ensures all imports get the same context, even after HMR\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const UniformContext = (window as any)\n  .__UNIFORM_CONTEXT__ as React.Context<UniformContextType>;\n\ndebug('UniformContext exported', {\n  contextExists: !!UniformContext,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  windowContextExists: !!(window as any).__UNIFORM_CONTEXT__,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  contextsMatch: UniformContext === (window as any).__UNIFORM_CONTEXT__,\n});\n\n// Define props for the FormProvider component, extending HookForm's props\ninterface FormProviderProps {\n  /** children form render function */\n  children: (childProps: {\n    handleSubmit: (e?: BaseSyntheticEvent) => Promise<void>;\n    isValid: boolean;\n  }) => ReactNode;\n  /** settings for from debug mode */\n  debugModeSettings?: DebugModeSettings;\n  /** initial form values */\n  initialValues?: FieldValues;\n  /** form submit handler */\n  onSubmit: SubmitHandler<FieldValues>;\n  /** Veto validation schema instance */\n  validation?: VetoInstance;\n  /** when the validation should be triggered */\n  validationTrigger: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\n/**\n * FormProvider component provides:\n * - Veto validation schema context\n * - Client validation schema management\n * - Submit handler with automatic data conversion and submission control with preventSubmit\n * - Form Debug Mode state\n * - React Hook Form context\n */\nconst FormProvider: React.FC<FormProviderProps> = ({\n  children,\n  debugModeSettings = undefined,\n  initialValues = undefined,\n  onSubmit,\n  validation: baseValidation = undefined,\n  validationTrigger,\n}) => {\n  // Form Debug mode state is handled in the form context\n  const [debugMode, setDebugMode] = useLocalStorage<DebugMode>(\n    debugModeSettings?.localStorageKey ?? DEBUG_MODE_LOCAL_STORAGE_KEY_DEFAULT,\n    'off',\n  );\n\n  // Create extended validation combining base + client validations\n  const { extendedValidation, setClientValidationSchema } =\n    useExtendedValidation(baseValidation);\n\n  // Create resolver from extended validation + get current validation errors\n  const { resolver, validationErrors, validationErrorsHash } =\n    useFormResolver(extendedValidation);\n\n  // Initialize react hook form with the resolver\n  const methods = useForm({\n    defaultValues: initialValues ? toFormFormat(initialValues) : initialValues,\n    // set rhf mode\n    // see: https://react-hook-form.com/docs/useform#mode\n    mode: validationTrigger,\n    resolver,\n  });\n\n  // Get isValid from React Hook Form's formState\n  const isValid = methods.formState?.isValid;\n\n  // Control if the form can currently be submitted\n  const [preventSubmit, setPreventSubmit] = useState(false);\n\n  // User change listener registry (stored in ref to avoid re-renders)\n  const userChangeListenersRef = useRef<Set<UserChangeListener>>(new Set());\n\n  // Subscribe to user changes\n  const subscribeUserChange = useCallback(\n    (listener: UserChangeListener): (() => void) => {\n      userChangeListenersRef.current.add(listener);\n      // Return cleanup function to unsubscribe\n      return () => {\n        userChangeListenersRef.current.delete(listener);\n      };\n    },\n    [],\n  );\n\n  // Notify all subscribers about user change\n  const notifyUserChange = useCallback(\n    (fieldName: string, value: unknown): void => {\n      // Notify all registered listeners\n      userChangeListenersRef.current.forEach((listener) => {\n        listener(fieldName as Path<object>, value);\n      });\n    },\n    [],\n  );\n\n  // Create submit handler with automatic data conversion\n  // eslint-disable-next-line consistent-return\n  const handleSubmit = async (e?: React.BaseSyntheticEvent) => {\n    debug('handleSubmit called', {\n      preventSubmit,\n      formStateIsValid: methods.formState.isValid,\n      validationErrors: methods.formState.errors,\n      validationTrigger,\n      formValues: methods.getValues(),\n    });\n\n    // only prevent submit when form state is valid, because otherwise\n    // submit will only trigger validation and add errors / focus invalid fields\n    if (methods.formState.isValid && preventSubmit) {\n      debug('⛔ Form submit PREVENTED', {\n        formStateIsValid: methods.formState.isValid,\n        preventSubmit,\n      });\n      console.warn(\n        '[FormProvider] form submit was prevented because preventSubmit is true...',\n      );\n      e?.preventDefault();\n      return Promise.resolve();\n    }\n\n    debug('✓ Form submit ALLOWED', {\n      formStateIsValid: methods.formState.isValid,\n      preventSubmit,\n      reason: !methods.formState.isValid\n        ? 'Form is invalid (will trigger validation and show errors)'\n        : 'Form is valid and preventSubmit is false',\n    });\n\n    // Convert nullish strings and filter out empty values before submission\n    const wrappedOnSubmit = (data: FieldValues, event?: BaseSyntheticEvent) => {\n      const submitData = toValidationFormat(data) ?? {};\n      debug('onSubmit callback called', { submitData });\n      return onSubmit(submitData, event);\n    };\n\n    await methods.handleSubmit(wrappedOnSubmit)(e);\n\n    debug('handleSubmit completed');\n  };\n\n  // Memoize the context value to prevent re-renders\n  const contextValue = useMemo(\n    () => {\n      return {\n        // set debugMode to disabled when debugModeSettings.disable is true\n        // otherwise use current debug mode from localStorage\n        debugMode: debugModeSettings?.disable ? 'disabled' : debugMode,\n        preventSubmit: (prevent: boolean) => {\n          debug('preventSubmit called', {\n            previousValue: preventSubmit,\n            newValue: prevent,\n            formStateIsValid: methods.formState.isValid,\n            validationErrors: methods.formState.errors,\n          });\n          setPreventSubmit(prevent);\n        },\n        setClientValidationSchema,\n        setDebugMode,\n        triggerSubmit: handleSubmit,\n        userChange: {\n          subscribe: subscribeUserChange,\n          notify: notifyUserChange,\n        },\n        validation: {\n          baseInstance: baseValidation,\n          instance: extendedValidation,\n          errors: validationErrors,\n          setClientValidationSchema,\n        },\n      };\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [debugMode, debugModeSettings?.disable, validationErrorsHash],\n  );\n\n  return (\n    <UniformContext.Provider value={contextValue}>\n      {/* Spread all hook form props into HookFormProvider */}\n      <HookFormProvider {...methods}>\n        {children({ handleSubmit, isValid })}\n      </HookFormProvider>\n    </UniformContext.Provider>\n  );\n};\n\nexport default FormProvider;\n"],"mappings":"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"}

package/dist/Grid/index.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const require_Grid = require('../Grid-D84e76CE.cjs');
+const require_Grid = require('../Grid-DezBAZbx.cjs');
 
 exports.Grid = require_Grid.Grid_default$1;
 exports.default = require_Grid.Grid_default;

package/dist/Grid/index.d.cts

@@ -1,2 +1,2 @@
-import { n as GridProps, t as Grid } from "../index-DxdaxM3o.cjs";
+import { n as GridProps, t as Grid } from "../index-DvF_C1Bz.cjs";
 export { Grid, Grid as default, GridProps };

package/dist/Grid/index.d.ts

@@ -1,2 +1,2 @@
-import { n as GridProps, t as Grid } from "../index-Edx7MxXu.js";
+import { n as GridProps, t as Grid } from "../index-BFLKkqA3.js";
 export { Grid, Grid as default, GridProps };

package/dist/{Grid-D84e76CE.cjs → Grid-DezBAZbx.cjs}

@@ -1,4 +1,4 @@
-const require_FormContext = require('./FormContext-Bb6d8hdG.cjs');
+const require_FormContext = require('./FormContext-Lw4YL4-B.cjs');
 let _fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
 let react_jsx_runtime = require("react/jsx-runtime");
 
@@ -32,4 +32,4 @@ Object.defineProperty(exports, 'Grid_default$1', {
     return Grid_default$1;
   }
 });
-//# sourceMappingURL=Grid-D84e76CE.cjs.map
+//# sourceMappingURL=Grid-DezBAZbx.cjs.map

package/dist/{Grid-D84e76CE.cjs.map → Grid-DezBAZbx.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Grid-D84e76CE.cjs","names":["Grid"],"sources":["../src/Grid/Grid.tsx","../src/Grid/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nexport interface GridProps {\n  /** child components */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: string;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * Defines the default grid for form components\n */\nconst Grid = ({\n  children = null,\n  className = undefined,\n  testId = undefined,\n}: GridProps) => {\n  return (\n    <div className={cn('grid gap-4', className)} data-testid={testId}>\n      {children}\n    </div>\n  );\n};\n\nexport default Grid;\n","import Grid from './Grid';\n\nexport type { GridProps } from './Grid';\n\nexport { Grid };\n\nexport default Grid;\n"],"mappings":";;;;;;;;AAgBA,MAAM,QAAQ,EACZ,WAAW,MACX,YAAY,QACZ,SAAS,aACM;AACf,QACE,2CAAC;EAAI,0CAAc,cAAc,UAAU;EAAE,eAAa;EACvD;GACG;;AAIV,qBAAe;;;;ACtBf,mBAAeA"}
+{"version":3,"file":"Grid-DezBAZbx.cjs","names":["Grid"],"sources":["../src/Grid/Grid.tsx","../src/Grid/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nexport interface GridProps {\n  /** child components */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: string;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * Defines the default grid for form components\n */\nconst Grid = ({\n  children = null,\n  className = undefined,\n  testId = undefined,\n}: GridProps) => {\n  return (\n    <div className={cn('grid gap-4', className)} data-testid={testId}>\n      {children}\n    </div>\n  );\n};\n\nexport default Grid;\n","import Grid from './Grid';\n\nexport type { GridProps } from './Grid';\n\nexport { Grid };\n\nexport default Grid;\n"],"mappings":";;;;;;;;AAgBA,MAAM,QAAQ,EACZ,WAAW,MACX,YAAY,QACZ,SAAS,aACM;AACf,QACE,2CAAC;EAAI,0CAAc,cAAc,UAAU;EAAE,eAAa;EACvD;GACG;;AAIV,qBAAe;;;;ACtBf,mBAAeA"}

package/dist/Input/index.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const require_Input = require('../Input-DeTpxiK_.cjs');
+const require_Input = require('../Input-DR0gCf9q.cjs');
 
 exports.Input = require_Input.Input_default$1;
 exports.default = require_Input.Input_default;

package/dist/Input/index.d.cts

@@ -1,2 +1,2 @@
-import { n as InputProps, t as Input } from "../index-BxA_pJWn.cjs";
+import { n as InputProps, t as Input } from "../index-CeYRsehb.cjs";
 export { Input, Input as default, InputProps };

package/dist/Input/index.d.ts

@@ -1,2 +1,2 @@
-import { n as InputProps, t as Input } from "../index-C-2nxT8D.js";
+import { n as InputProps, t as Input } from "../index-CZyNkPDq.js";
 export { Input, Input as default, InputProps };

package/dist/Input/index.js

@@ -1,3 +1,3 @@
-import { n as Input_default, t as Input_default$1 } from "../Input-DXMWGTBh.js";
+import { n as Input_default, t as Input_default$1 } from "../Input-DksaHK1Y.js";
 
 export { Input_default as Input, Input_default$1 as default };

package/dist/{Input-DeTpxiK_.cjs → Input-DR0gCf9q.cjs}

@@ -1,6 +1,6 @@
-const require_FormContext = require('./FormContext-Bb6d8hdG.cjs');
-const require_useUniformField = require('./useUniformField-Bj23Kvbs.cjs');
-const require_useInputValueDebounce = require('./useInputValueDebounce-BcUyaS94.cjs');
+const require_FormContext = require('./FormContext-Lw4YL4-B.cjs');
+const require_useUniformField = require('./useUniformField-D6fwSjrH.cjs');
+const require_useInputValueDebounce = require('./useInputValueDebounce-TiNR4jtG.cjs');
 let _fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _heroui_input = require("@heroui/input");
@@ -24,6 +24,7 @@ const Input = ({ className: _className = void 0, clearable = false, debounceDela
 	});
 	const { onChange, onBlur, value } = require_useInputValueDebounce.useInputValueDebounce({
 		debounceDelay,
+		name,
 		onBlur: fieldOnBlur,
 		onChange: fieldOnChange,
 		value: fieldValue
@@ -103,4 +104,4 @@ Object.defineProperty(exports, 'Input_default$1', {
     return Input_default$1;
   }
 });
-//# sourceMappingURL=Input-DeTpxiK_.cjs.map
+//# sourceMappingURL=Input-DR0gCf9q.cjs.map

package/dist/Input-DR0gCf9q.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input-DR0gCf9q.cjs","names":["useUniformField","useInputValueDebounce","HeroNumberInput","HeroInput","Input"],"sources":["../src/Input/Input.tsx","../src/Input/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { InputProps as HeroInputProps } from '@heroui/input';\nimport type { ReactNode } from 'react';\nimport type { InputValueTransform } from '../hooks/useInputValueTransform';\n\nimport { Input as HeroInput } from '@heroui/input';\nimport { NumberInput as HeroNumberInput } from '@heroui/number-input';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useInputValueDebounce } from '../hooks/useInputValueDebounce';\nimport { useUniformField } from '../hooks/useUniformField';\n\n// input variants\nexport const inputVariants = tv({\n  slots: {\n    /** wrapper around the whole input */\n    base: '',\n    /** clear button */\n    clearButton: '',\n    /** actual input element */\n    input: '',\n    /** inner wrapper (HeroUI inputWrapper slot) */\n    inputWrapper: 'bg-content1 group-data-[focus=true]:border-focus',\n  },\n});\n\ntype VariantProps = TVProps<typeof inputVariants>;\ntype ClassName = TVClassName<typeof inputVariants>;\n\nexport interface InputProps extends VariantProps {\n  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName;\n  /** shows clear button when input has value */\n  clearable?: boolean;\n  /** debounce delay in milliseconds for form state updates (default: 300ms) */\n  debounceDelay?: number;\n  /** input field is disabled */\n  disabled?: boolean;\n  /** added content to the end of the input Field. */\n  endContent?: ReactNode;\n  /** form field label */\n  label?: ReactNode;\n  /** form field name */\n  name: string;\n  /** callback that is fired when the value is cleared */\n  onClear?: () => void;\n  /** form field placeholder */\n  placeholder?: string;\n  /** size of the input */\n  size?: 'sm' | 'md' | 'lg';\n  /** content added to the start of the input field */\n  startContent?: ReactNode;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** allows disentangled display and form values for a field */\n  transform?: InputValueTransform<string>;\n  /** input type */\n  type?: 'number' | 'password';\n}\n\n/**\n * Input component based on [HeroUI Input](https://www.heroui.com//docs/components/input)\n */\nconst Input = ({\n  className: _className = undefined,\n  clearable = false,\n  debounceDelay = 300,\n  endContent = undefined,\n  name,\n  onClear = undefined,\n  placeholder = ' ',\n  size = undefined,\n  startContent = undefined,\n  type = undefined,\n  ...uniformFieldProps\n}: InputProps) => {\n  const {\n    ariaLabel,\n    disabled,\n    field: {\n      onChange: fieldOnChange,\n      onBlur: fieldOnBlur,\n      value: fieldValue,\n      ref,\n    },\n    errorMessage,\n    invalid,\n    label,\n    required,\n    testId,\n    resetField,\n  } = useUniformField({ name, type, ...uniformFieldProps });\n\n  // Use hook that provides debounced onChange and enhanced blur handling\n  const { onChange, onBlur, value } = useInputValueDebounce({\n    debounceDelay,\n    name,\n    onBlur: fieldOnBlur,\n    onChange: fieldOnChange,\n    value: fieldValue,\n  });\n\n  // If input is clearable add props for clearing input value\n  const clearableProps: Pick<HeroInputProps, 'isClearable' | 'onClear'> =\n    clearable\n      ? {\n          isClearable: true,\n          onClear: () => {\n            // if field had initial value we do not reset it\n            // to that value, but clear it instead\n            resetField(name, { defaultValue: null });\n            // if onClear cb provided we call it\n            if (onClear) {\n              onClear();\n            }\n          },\n        }\n      : {};\n\n  // classNames from slots\n  const variants = inputVariants();\n  const classNames = variantsToClassNames(variants, _className, 'base');\n\n  // Common props for both Input and NumberInput\n  const commonProps = {\n    ref,\n    // Only add aria-label if there's no meaningful placeholder (HeroUI uses placeholder as aria-label)\n    'aria-label':\n      !placeholder || placeholder.trim() === '' ? ariaLabel : undefined,\n    // disable autocomplete\n    autoComplete: 'off',\n    classNames: {\n      base: classNames.base,\n      clearButton: classNames.clearButton,\n      // set padding to 0 for error message exit animation\n      helperWrapper: 'p-0',\n      input: classNames.input,\n      inputWrapper: classNames.inputWrapper,\n    },\n    'data-testid': testId,\n    endContent,\n    errorMessage,\n    id: testId,\n    isDisabled: disabled,\n    isInvalid: invalid,\n    isRequired: required,\n    label,\n    labelPlacement: 'outside' as const,\n    name,\n    onBlur,\n    placeholder,\n    radius: 'sm' as const,\n    size,\n    startContent,\n    variant: 'bordered' as const,\n    ...clearableProps,\n  };\n\n  // Render NumberInput for number type\n  if (type === 'number') {\n    // Parse the string value to number - use null for empty/cleared state to keep component controlled\n    const numberValue =\n      value !== '' && value != null && !Number.isNaN(Number(value))\n        ? Number(value)\n        : null;\n\n    return (\n      <HeroNumberInput\n        {...commonProps}\n        // @ts-expect-error - HeroUI NumberInput type is not compatible with null,\n        // but it needs to be for empty/cleared state to be controlled\n        value={numberValue}\n        // Disable thousands separator to avoid parsing issues\n        formatOptions={{\n          useGrouping: false,\n        }}\n        // NumberInput onChange receives either an event or a number\n        onChange={(e: React.ChangeEvent<HTMLInputElement> | number) => {\n          if (typeof e === 'number') {\n            // Convert number to synthetic event and pass through debounced onChange\n            onChange({\n              target: { value: String(e) },\n            } as React.ChangeEvent<HTMLInputElement>);\n          } else {\n            // Pass event through debounced onChange\n            onChange(e);\n          }\n        }}\n      />\n    );\n  }\n\n  // Render regular Input for text/password\n  return (\n    <HeroInput {...commonProps} onChange={onChange} type={type} value={value} />\n  );\n};\n\nexport default Input;\n","import Input from './Input';\n\nexport type { InputProps } from './Input';\n\nexport { Input };\n\nexport default Input;\n"],"mappings":";;;;;;;;;AAcA,MAAa,+CAAmB,EAC9B,OAAO;CAEL,MAAM;CAEN,aAAa;CAEb,OAAO;CAEP,cAAc;CACf,EACF,CAAC;;;;AAyCF,MAAM,SAAS,EACb,WAAW,aAAa,QACxB,YAAY,OACZ,gBAAgB,KAChB,aAAa,QACb,MACA,UAAU,QACV,cAAc,KACd,OAAO,QACP,eAAe,QACf,OAAO,QACP,GAAG,wBACa;CAChB,MAAM,EACJ,WACA,UACA,OAAO,EACL,UAAU,eACV,QAAQ,aACR,OAAO,YACP,OAEF,cACA,SACA,OACA,UACA,QACA,eACEA,wCAAgB;EAAE;EAAM;EAAM,GAAG;EAAmB,CAAC;CAGzD,MAAM,EAAE,UAAU,QAAQ,UAAUC,oDAAsB;EACxD;EACA;EACA,QAAQ;EACR,UAAU;EACV,OAAO;EACR,CAAC;CAGF,MAAM,iBACJ,YACI;EACE,aAAa;EACb,eAAe;AAGb,cAAW,MAAM,EAAE,cAAc,MAAM,CAAC;AAExC,OAAI,QACF,UAAS;;EAGd,GACD,EAAE;CAIR,MAAM,8DADW,eAAe,EACkB,YAAY,OAAO;CAGrE,MAAM,cAAc;EAClB;EAEA,cACE,CAAC,eAAe,YAAY,MAAM,KAAK,KAAK,YAAY;EAE1D,cAAc;EACd,YAAY;GACV,MAAM,WAAW;GACjB,aAAa,WAAW;GAExB,eAAe;GACf,OAAO,WAAW;GAClB,cAAc,WAAW;GAC1B;EACD,eAAe;EACf;EACA;EACA,IAAI;EACJ,YAAY;EACZ,WAAW;EACX,YAAY;EACZ;EACA,gBAAgB;EAChB;EACA;EACA;EACA,QAAQ;EACR;EACA;EACA,SAAS;EACT,GAAG;EACJ;AAGD,KAAI,SAAS,UAAU;EAErB,MAAM,cACJ,UAAU,MAAM,SAAS,QAAQ,CAAC,OAAO,MAAM,OAAO,MAAM,CAAC,GACzD,OAAO,MAAM,GACb;AAEN,SACE,2CAACC;GACC,GAAI;GAGJ,OAAO;GAEP,eAAe,EACb,aAAa,OACd;GAED,WAAW,MAAoD;AAC7D,QAAI,OAAO,MAAM,SAEf,UAAS,EACP,QAAQ,EAAE,OAAO,OAAO,EAAE,EAAE,EAC7B,CAAwC;QAGzC,UAAS,EAAE;;IAGf;;AAKN,QACE,2CAACC;EAAU,GAAI;EAAuB;EAAgB;EAAa;GAAS;;AAIhF,sBAAe;;;;ACnMf,oBAAeC"}

package/dist/{Input-DXMWGTBh.js → Input-DksaHK1Y.js}

@@ -1,5 +1,5 @@
-import { t as useUniformField } from "./useUniformField-gU4qYUwL.js";
-import { t as useInputValueDebounce } from "./useInputValueDebounce-DaH5ONlQ.js";
+import { t as useUniformField } from "./useUniformField-BKVVns0E.js";
+import { t as useInputValueDebounce } from "./useInputValueDebounce-Dop_8_OK.js";
 import { tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
 import { jsx } from "react/jsx-runtime";
 import { Input } from "@heroui/input";
@@ -23,6 +23,7 @@ const Input$1 = ({ className: _className = void 0, clearable = false, debounceDe
 	});
 	const { onChange, onBlur, value } = useInputValueDebounce({
 		debounceDelay,
+		name,
 		onBlur: fieldOnBlur,
 		onChange: fieldOnChange,
 		value: fieldValue
@@ -91,4 +92,4 @@ var Input_default = Input_default$1;
 
 //#endregion
 export { Input_default$1 as n, Input_default as t };
-//# sourceMappingURL=Input-DXMWGTBh.js.map
+//# sourceMappingURL=Input-DksaHK1Y.js.map

package/dist/Input-DksaHK1Y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input-DksaHK1Y.js","names":["Input","HeroNumberInput","HeroInput","Input"],"sources":["../src/Input/Input.tsx","../src/Input/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { InputProps as HeroInputProps } from '@heroui/input';\nimport type { ReactNode } from 'react';\nimport type { InputValueTransform } from '../hooks/useInputValueTransform';\n\nimport { Input as HeroInput } from '@heroui/input';\nimport { NumberInput as HeroNumberInput } from '@heroui/number-input';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useInputValueDebounce } from '../hooks/useInputValueDebounce';\nimport { useUniformField } from '../hooks/useUniformField';\n\n// input variants\nexport const inputVariants = tv({\n  slots: {\n    /** wrapper around the whole input */\n    base: '',\n    /** clear button */\n    clearButton: '',\n    /** actual input element */\n    input: '',\n    /** inner wrapper (HeroUI inputWrapper slot) */\n    inputWrapper: 'bg-content1 group-data-[focus=true]:border-focus',\n  },\n});\n\ntype VariantProps = TVProps<typeof inputVariants>;\ntype ClassName = TVClassName<typeof inputVariants>;\n\nexport interface InputProps extends VariantProps {\n  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName;\n  /** shows clear button when input has value */\n  clearable?: boolean;\n  /** debounce delay in milliseconds for form state updates (default: 300ms) */\n  debounceDelay?: number;\n  /** input field is disabled */\n  disabled?: boolean;\n  /** added content to the end of the input Field. */\n  endContent?: ReactNode;\n  /** form field label */\n  label?: ReactNode;\n  /** form field name */\n  name: string;\n  /** callback that is fired when the value is cleared */\n  onClear?: () => void;\n  /** form field placeholder */\n  placeholder?: string;\n  /** size of the input */\n  size?: 'sm' | 'md' | 'lg';\n  /** content added to the start of the input field */\n  startContent?: ReactNode;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** allows disentangled display and form values for a field */\n  transform?: InputValueTransform<string>;\n  /** input type */\n  type?: 'number' | 'password';\n}\n\n/**\n * Input component based on [HeroUI Input](https://www.heroui.com//docs/components/input)\n */\nconst Input = ({\n  className: _className = undefined,\n  clearable = false,\n  debounceDelay = 300,\n  endContent = undefined,\n  name,\n  onClear = undefined,\n  placeholder = ' ',\n  size = undefined,\n  startContent = undefined,\n  type = undefined,\n  ...uniformFieldProps\n}: InputProps) => {\n  const {\n    ariaLabel,\n    disabled,\n    field: {\n      onChange: fieldOnChange,\n      onBlur: fieldOnBlur,\n      value: fieldValue,\n      ref,\n    },\n    errorMessage,\n    invalid,\n    label,\n    required,\n    testId,\n    resetField,\n  } = useUniformField({ name, type, ...uniformFieldProps });\n\n  // Use hook that provides debounced onChange and enhanced blur handling\n  const { onChange, onBlur, value } = useInputValueDebounce({\n    debounceDelay,\n    name,\n    onBlur: fieldOnBlur,\n    onChange: fieldOnChange,\n    value: fieldValue,\n  });\n\n  // If input is clearable add props for clearing input value\n  const clearableProps: Pick<HeroInputProps, 'isClearable' | 'onClear'> =\n    clearable\n      ? {\n          isClearable: true,\n          onClear: () => {\n            // if field had initial value we do not reset it\n            // to that value, but clear it instead\n            resetField(name, { defaultValue: null });\n            // if onClear cb provided we call it\n            if (onClear) {\n              onClear();\n            }\n          },\n        }\n      : {};\n\n  // classNames from slots\n  const variants = inputVariants();\n  const classNames = variantsToClassNames(variants, _className, 'base');\n\n  // Common props for both Input and NumberInput\n  const commonProps = {\n    ref,\n    // Only add aria-label if there's no meaningful placeholder (HeroUI uses placeholder as aria-label)\n    'aria-label':\n      !placeholder || placeholder.trim() === '' ? ariaLabel : undefined,\n    // disable autocomplete\n    autoComplete: 'off',\n    classNames: {\n      base: classNames.base,\n      clearButton: classNames.clearButton,\n      // set padding to 0 for error message exit animation\n      helperWrapper: 'p-0',\n      input: classNames.input,\n      inputWrapper: classNames.inputWrapper,\n    },\n    'data-testid': testId,\n    endContent,\n    errorMessage,\n    id: testId,\n    isDisabled: disabled,\n    isInvalid: invalid,\n    isRequired: required,\n    label,\n    labelPlacement: 'outside' as const,\n    name,\n    onBlur,\n    placeholder,\n    radius: 'sm' as const,\n    size,\n    startContent,\n    variant: 'bordered' as const,\n    ...clearableProps,\n  };\n\n  // Render NumberInput for number type\n  if (type === 'number') {\n    // Parse the string value to number - use null for empty/cleared state to keep component controlled\n    const numberValue =\n      value !== '' && value != null && !Number.isNaN(Number(value))\n        ? Number(value)\n        : null;\n\n    return (\n      <HeroNumberInput\n        {...commonProps}\n        // @ts-expect-error - HeroUI NumberInput type is not compatible with null,\n        // but it needs to be for empty/cleared state to be controlled\n        value={numberValue}\n        // Disable thousands separator to avoid parsing issues\n        formatOptions={{\n          useGrouping: false,\n        }}\n        // NumberInput onChange receives either an event or a number\n        onChange={(e: React.ChangeEvent<HTMLInputElement> | number) => {\n          if (typeof e === 'number') {\n            // Convert number to synthetic event and pass through debounced onChange\n            onChange({\n              target: { value: String(e) },\n            } as React.ChangeEvent<HTMLInputElement>);\n          } else {\n            // Pass event through debounced onChange\n            onChange(e);\n          }\n        }}\n      />\n    );\n  }\n\n  // Render regular Input for text/password\n  return (\n    <HeroInput {...commonProps} onChange={onChange} type={type} value={value} />\n  );\n};\n\nexport default Input;\n","import Input from './Input';\n\nexport type { InputProps } from './Input';\n\nexport { Input };\n\nexport default Input;\n"],"mappings":";;;;;;;;AAcA,MAAa,gBAAgB,GAAG,EAC9B,OAAO;CAEL,MAAM;CAEN,aAAa;CAEb,OAAO;CAEP,cAAc;CACf,EACF,CAAC;;;;AAyCF,MAAMA,WAAS,EACb,WAAW,aAAa,QACxB,YAAY,OACZ,gBAAgB,KAChB,aAAa,QACb,MACA,UAAU,QACV,cAAc,KACd,OAAO,QACP,eAAe,QACf,OAAO,QACP,GAAG,wBACa;CAChB,MAAM,EACJ,WACA,UACA,OAAO,EACL,UAAU,eACV,QAAQ,aACR,OAAO,YACP,OAEF,cACA,SACA,OACA,UACA,QACA,eACE,gBAAgB;EAAE;EAAM;EAAM,GAAG;EAAmB,CAAC;CAGzD,MAAM,EAAE,UAAU,QAAQ,UAAU,sBAAsB;EACxD;EACA;EACA,QAAQ;EACR,UAAU;EACV,OAAO;EACR,CAAC;CAGF,MAAM,iBACJ,YACI;EACE,aAAa;EACb,eAAe;AAGb,cAAW,MAAM,EAAE,cAAc,MAAM,CAAC;AAExC,OAAI,QACF,UAAS;;EAGd,GACD,EAAE;CAIR,MAAM,aAAa,qBADF,eAAe,EACkB,YAAY,OAAO;CAGrE,MAAM,cAAc;EAClB;EAEA,cACE,CAAC,eAAe,YAAY,MAAM,KAAK,KAAK,YAAY;EAE1D,cAAc;EACd,YAAY;GACV,MAAM,WAAW;GACjB,aAAa,WAAW;GAExB,eAAe;GACf,OAAO,WAAW;GAClB,cAAc,WAAW;GAC1B;EACD,eAAe;EACf;EACA;EACA,IAAI;EACJ,YAAY;EACZ,WAAW;EACX,YAAY;EACZ;EACA,gBAAgB;EAChB;EACA;EACA;EACA,QAAQ;EACR;EACA;EACA,SAAS;EACT,GAAG;EACJ;AAGD,KAAI,SAAS,UAAU;EAErB,MAAM,cACJ,UAAU,MAAM,SAAS,QAAQ,CAAC,OAAO,MAAM,OAAO,MAAM,CAAC,GACzD,OAAO,MAAM,GACb;AAEN,SACE,oBAACC;GACC,GAAI;GAGJ,OAAO;GAEP,eAAe,EACb,aAAa,OACd;GAED,WAAW,MAAoD;AAC7D,QAAI,OAAO,MAAM,SAEf,UAAS,EACP,QAAQ,EAAE,OAAO,OAAO,EAAE,EAAE,EAC7B,CAAwC;QAGzC,UAAS,EAAE;;IAGf;;AAKN,QACE,oBAACC;EAAU,GAAI;EAAuB;EAAgB;EAAa;GAAS;;AAIhF,sBAAeF;;;;ACnMf,oBAAeG"}

package/dist/RadioBoxes/index.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const require_RadioBoxes = require('../RadioBoxes-gsQGqQCd.cjs');
+const require_RadioBoxes = require('../RadioBoxes-h-VLhJ9d.cjs');
 
 exports.RadioBoxes = require_RadioBoxes.RadioBoxes_default$1;
 exports.default = require_RadioBoxes.RadioBoxes_default;

package/dist/RadioBoxes/index.d.cts

@@ -1,2 +1,2 @@
-import { n as RadioBoxes, r as RadioBoxesProps, t as radioBoxVariants } from "../index-DNkZrb7P.cjs";
+import { n as RadioBoxes, r as RadioBoxesProps, t as radioBoxVariants } from "../index-CjJHVJwD.cjs";
 export { RadioBoxes, RadioBoxes as default, RadioBoxesProps, radioBoxVariants };

package/dist/RadioBoxes/index.d.ts

@@ -1,2 +1,2 @@
-import { n as RadioBoxes, r as RadioBoxesProps, t as radioBoxVariants } from "../index-DG9C0kHA.js";
+import { n as RadioBoxes, r as RadioBoxesProps, t as radioBoxVariants } from "../index-BGXgvZKr.js";
 export { RadioBoxes, RadioBoxes as default, RadioBoxesProps, radioBoxVariants };

package/dist/RadioBoxes/index.js

@@ -1,3 +1,3 @@
-import { n as RadioBoxes_default, r as radioBoxVariants, t as RadioBoxes_default$1 } from "../RadioBoxes-BEln4a-B.js";
+import { n as RadioBoxes_default, r as radioBoxVariants, t as RadioBoxes_default$1 } from "../RadioBoxes-DdIHH6B5.js";
 
 export { RadioBoxes_default as RadioBoxes, RadioBoxes_default$1 as default, radioBoxVariants };

package/dist/{RadioBoxes-BEln4a-B.js → RadioBoxes-DdIHH6B5.js}

@@ -1,4 +1,4 @@
-import { t as useUniformField } from "./useUniformField-gU4qYUwL.js";
+import { t as useUniformField } from "./useUniformField-BKVVns0E.js";
 import { cn, slugify, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { RadioGroup, useRadio } from "@heroui/radio";
@@ -135,4 +135,4 @@ var RadioBoxes_default = RadioBoxes_default$1;
 
 //#endregion
 export { RadioBoxes_default$1 as n, radioBoxVariants as r, RadioBoxes_default as t };
-//# sourceMappingURL=RadioBoxes-BEln4a-B.js.map
+//# sourceMappingURL=RadioBoxes-DdIHH6B5.js.map

package/dist/{RadioBoxes-BEln4a-B.js.map → RadioBoxes-DdIHH6B5.js.map}

@@ -1 +1 @@
-{"version":3,"file":"RadioBoxes-BEln4a-B.js","names":["HeroRadioGroup","RadioBoxes"],"sources":["../src/RadioBoxes/RadioBox.tsx","../src/RadioBoxes/RadioBoxes.tsx","../src/RadioBoxes/index.ts"],"sourcesContent":["import type { TVClassName } from '@fuf-stack/pixel-utils';\nimport type { RadioProps as HeroRadioProps } from '@heroui/radio';\nimport type { ReactNode } from 'react';\n\nimport { useRadio } from '@heroui/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nexport const radioBoxVariants = tv({\n  slots: {\n    base: 'group inline-flex flex-auto cursor-pointer items-center justify-between gap-4 rounded-lg border-2 border-default p-4 hover:bg-content2 data-[selected=true]:border-focus',\n    control: '',\n    description: 'text-foreground opacity-70 text-small',\n    icon: '',\n    label: '',\n    labelWrapper: 'grow',\n  },\n  variants: {\n    isDisabled: {\n      true: {\n        base: 'pointer-events-none opacity-disabled',\n      },\n    },\n    isInvalid: {\n      true: {\n        base: '!border-danger',\n      },\n    },\n  },\n});\n\ntype ClassName = TVClassName<typeof radioBoxVariants>;\n\nexport interface RadioBoxProps extends Omit<HeroRadioProps, 'className'> {\n  /** CSS class name */\n  className?: ClassName;\n  /** icon for the option */\n  icon?: ReactNode;\n  /** whether the radio is invalid */\n  isInvalid?: boolean;\n}\n\nexport const RadioBox = ({\n  classNames: _classNames = undefined,\n  icon = undefined,\n  isInvalid = false,\n  ...props\n}: RadioBoxProps) => {\n  const {\n    children,\n    Component,\n    description,\n    getBaseProps,\n    getControlProps,\n    getInputProps,\n    getLabelProps,\n    getLabelWrapperProps,\n    getWrapperProps,\n    isDisabled,\n  } = useRadio(props as HeroRadioProps);\n\n  // classNames from slots\n  const variants = radioBoxVariants({\n    isDisabled,\n    isInvalid,\n  });\n  const classNames = variantsToClassNames(\n    variants,\n    // @ts-expect-error not sure here, but it works\n    _classNames,\n    'base',\n  );\n\n  return (\n    <Component {...getBaseProps()} className={classNames.base}>\n      <VisuallyHidden>\n        <input {...getInputProps()} />\n      </VisuallyHidden>\n      {!icon ? (\n        <span {...getWrapperProps()}>\n          <span\n            {...getControlProps()}\n            className={cn(getControlProps().className, classNames.control)}\n          />\n        </span>\n      ) : null}\n      {icon ? <div className={classNames.icon}>{icon}</div> : null}\n      <div\n        {...getLabelWrapperProps()}\n        className={cn(\n          getLabelWrapperProps().className,\n          classNames.labelWrapper,\n        )}\n      >\n        {children ? (\n          <span\n            {...getLabelProps()}\n            className={cn(getLabelProps().className, classNames.label)}\n          >\n            {children}\n          </span>\n        ) : null}\n        {description ? (\n          <div className={classNames.description}>{description}</div>\n        ) : null}\n      </div>\n      {icon ? (\n        <span {...getWrapperProps()}>\n          <span\n            {...getControlProps()}\n            className={cn(getControlProps().className, classNames.control)}\n          />\n        </span>\n      ) : null}\n    </Component>\n  );\n};\n\nexport default RadioBox;\n","import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n//\nimport type { RadioBoxProps } from './RadioBox';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../hooks/useUniformField';\nimport { RadioBox } from './RadioBox';\n\nexport const radioBoxesVariants = tv({\n  slots: {\n    base: 'group gap-0', // Needs group for group-data condition\n    boxBase: '',\n    boxControl: '',\n    boxDescription: '',\n    boxLabel: '',\n    boxLabelWrapper: '',\n    // see HeroUI styles for group-data condition,\n    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n    wrapper: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof radioBoxesVariants>;\ntype ClassName = TVClassName<typeof radioBoxesVariants>;\n\nexport interface RadioBoxesOption {\n  /** Description of the value. Works with variant radioBox. */\n  description?: ReactNode;\n  /** disables the option */\n  disabled?: boolean;\n  /** option label */\n  label?: ReactNode;\n  /** option icon */\n  icon?: ReactNode;\n  /** HTML data-testid attribute of the option */\n  testId?: string;\n  /** option value */\n  value: string;\n}\n\nexport interface RadioBoxesProps extends VariantProps {\n  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName;\n  /** Determines if the Buttons are disabled or not. */\n  disabled?: boolean;\n  /** determines orientation of the Buttons. */\n  inline?: boolean;\n  /** Label displayed next to the RadioButton. */\n  label?: ReactNode;\n  /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n  name: string;\n  /** Radio button configuration. */\n  options: RadioBoxesOption[];\n  /** Id to grab element in internal tests. */\n  testId?: string;\n}\n\n/**\n * RadioBoxes component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst RadioBoxes = ({\n  className = undefined,\n  inline = false,\n  name,\n  options,\n  ...uniformFieldProps\n}: RadioBoxesProps) => {\n  const {\n    ariaLabel,\n    defaultValue,\n    errorMessage,\n    invalid,\n    disabled,\n    label,\n    onBlur,\n    onChange,\n    ref,\n    required,\n    testId,\n  } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  // classNames from slots\n  const variants = radioBoxesVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n  const boxClassNames: RadioBoxProps['classNames'] = {\n    base: classNames.boxBase,\n    control: classNames.boxControl,\n    description: classNames.boxDescription,\n    label: classNames.boxLabel,\n    labelWrapper: classNames.boxLabelWrapper,\n  };\n\n  return (\n    <HeroRadioGroup\n      ref={ref}\n      aria-label={ariaLabel}\n      classNames={classNames}\n      // see HeroUI styles for group-data condition (data-invalid),\n      // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n      data-invalid={invalid}\n      data-required={required}\n      data-testid={testId}\n      defaultValue={defaultValue as string | undefined}\n      errorMessage={errorMessage}\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isRequired={required}\n      label={label ? <legend>{label}</legend> : null}\n      name={name}\n      onBlur={onBlur}\n      onValueChange={onChange}\n      orientation={inline ? 'horizontal' : 'vertical'}\n    >\n      {options.map((option) => {\n        if ('value' in option) {\n          const optionTestId = slugify(\n            `${testId}_option_${option.testId ?? option.value}`,\n            { replaceDots: true },\n          );\n          return (\n            <RadioBox\n              key={option.value}\n              classNames={boxClassNames}\n              data-testid={optionTestId}\n              description={option.description}\n              icon={option.icon}\n              isDisabled={!!disabled || option.disabled}\n              isInvalid={invalid}\n              value={option.value}\n            >\n              {option.label ?? option.value}\n            </RadioBox>\n          );\n        }\n        return null;\n      })}\n    </HeroRadioGroup>\n  );\n};\n\nexport default RadioBoxes;\n","import RadioBoxes from './RadioBoxes';\n\nexport type { RadioBoxesProps } from './RadioBoxes';\nexport { radioBoxVariants } from './RadioBox';\n\nexport { RadioBoxes };\n\nexport default RadioBoxes;\n"],"mappings":"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"}
+{"version":3,"file":"RadioBoxes-DdIHH6B5.js","names":["HeroRadioGroup","RadioBoxes"],"sources":["../src/RadioBoxes/RadioBox.tsx","../src/RadioBoxes/RadioBoxes.tsx","../src/RadioBoxes/index.ts"],"sourcesContent":["import type { TVClassName } from '@fuf-stack/pixel-utils';\nimport type { RadioProps as HeroRadioProps } from '@heroui/radio';\nimport type { ReactNode } from 'react';\n\nimport { useRadio } from '@heroui/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nexport const radioBoxVariants = tv({\n  slots: {\n    base: 'group inline-flex flex-auto cursor-pointer items-center justify-between gap-4 rounded-lg border-2 border-default p-4 hover:bg-content2 data-[selected=true]:border-focus',\n    control: '',\n    description: 'text-foreground opacity-70 text-small',\n    icon: '',\n    label: '',\n    labelWrapper: 'grow',\n  },\n  variants: {\n    isDisabled: {\n      true: {\n        base: 'pointer-events-none opacity-disabled',\n      },\n    },\n    isInvalid: {\n      true: {\n        base: '!border-danger',\n      },\n    },\n  },\n});\n\ntype ClassName = TVClassName<typeof radioBoxVariants>;\n\nexport interface RadioBoxProps extends Omit<HeroRadioProps, 'className'> {\n  /** CSS class name */\n  className?: ClassName;\n  /** icon for the option */\n  icon?: ReactNode;\n  /** whether the radio is invalid */\n  isInvalid?: boolean;\n}\n\nexport const RadioBox = ({\n  classNames: _classNames = undefined,\n  icon = undefined,\n  isInvalid = false,\n  ...props\n}: RadioBoxProps) => {\n  const {\n    children,\n    Component,\n    description,\n    getBaseProps,\n    getControlProps,\n    getInputProps,\n    getLabelProps,\n    getLabelWrapperProps,\n    getWrapperProps,\n    isDisabled,\n  } = useRadio(props as HeroRadioProps);\n\n  // classNames from slots\n  const variants = radioBoxVariants({\n    isDisabled,\n    isInvalid,\n  });\n  const classNames = variantsToClassNames(\n    variants,\n    // @ts-expect-error not sure here, but it works\n    _classNames,\n    'base',\n  );\n\n  return (\n    <Component {...getBaseProps()} className={classNames.base}>\n      <VisuallyHidden>\n        <input {...getInputProps()} />\n      </VisuallyHidden>\n      {!icon ? (\n        <span {...getWrapperProps()}>\n          <span\n            {...getControlProps()}\n            className={cn(getControlProps().className, classNames.control)}\n          />\n        </span>\n      ) : null}\n      {icon ? <div className={classNames.icon}>{icon}</div> : null}\n      <div\n        {...getLabelWrapperProps()}\n        className={cn(\n          getLabelWrapperProps().className,\n          classNames.labelWrapper,\n        )}\n      >\n        {children ? (\n          <span\n            {...getLabelProps()}\n            className={cn(getLabelProps().className, classNames.label)}\n          >\n            {children}\n          </span>\n        ) : null}\n        {description ? (\n          <div className={classNames.description}>{description}</div>\n        ) : null}\n      </div>\n      {icon ? (\n        <span {...getWrapperProps()}>\n          <span\n            {...getControlProps()}\n            className={cn(getControlProps().className, classNames.control)}\n          />\n        </span>\n      ) : null}\n    </Component>\n  );\n};\n\nexport default RadioBox;\n","import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n//\nimport type { RadioBoxProps } from './RadioBox';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../hooks/useUniformField';\nimport { RadioBox } from './RadioBox';\n\nexport const radioBoxesVariants = tv({\n  slots: {\n    base: 'group gap-0', // Needs group for group-data condition\n    boxBase: '',\n    boxControl: '',\n    boxDescription: '',\n    boxLabel: '',\n    boxLabelWrapper: '',\n    // see HeroUI styles for group-data condition,\n    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n    wrapper: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof radioBoxesVariants>;\ntype ClassName = TVClassName<typeof radioBoxesVariants>;\n\nexport interface RadioBoxesOption {\n  /** Description of the value. Works with variant radioBox. */\n  description?: ReactNode;\n  /** disables the option */\n  disabled?: boolean;\n  /** option label */\n  label?: ReactNode;\n  /** option icon */\n  icon?: ReactNode;\n  /** HTML data-testid attribute of the option */\n  testId?: string;\n  /** option value */\n  value: string;\n}\n\nexport interface RadioBoxesProps extends VariantProps {\n  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName;\n  /** Determines if the Buttons are disabled or not. */\n  disabled?: boolean;\n  /** determines orientation of the Buttons. */\n  inline?: boolean;\n  /** Label displayed next to the RadioButton. */\n  label?: ReactNode;\n  /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n  name: string;\n  /** Radio button configuration. */\n  options: RadioBoxesOption[];\n  /** Id to grab element in internal tests. */\n  testId?: string;\n}\n\n/**\n * RadioBoxes component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst RadioBoxes = ({\n  className = undefined,\n  inline = false,\n  name,\n  options,\n  ...uniformFieldProps\n}: RadioBoxesProps) => {\n  const {\n    ariaLabel,\n    defaultValue,\n    errorMessage,\n    invalid,\n    disabled,\n    label,\n    onBlur,\n    onChange,\n    ref,\n    required,\n    testId,\n  } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  // classNames from slots\n  const variants = radioBoxesVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n  const boxClassNames: RadioBoxProps['classNames'] = {\n    base: classNames.boxBase,\n    control: classNames.boxControl,\n    description: classNames.boxDescription,\n    label: classNames.boxLabel,\n    labelWrapper: classNames.boxLabelWrapper,\n  };\n\n  return (\n    <HeroRadioGroup\n      ref={ref}\n      aria-label={ariaLabel}\n      classNames={classNames}\n      // see HeroUI styles for group-data condition (data-invalid),\n      // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n      data-invalid={invalid}\n      data-required={required}\n      data-testid={testId}\n      defaultValue={defaultValue as string | undefined}\n      errorMessage={errorMessage}\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isRequired={required}\n      label={label ? <legend>{label}</legend> : null}\n      name={name}\n      onBlur={onBlur}\n      onValueChange={onChange}\n      orientation={inline ? 'horizontal' : 'vertical'}\n    >\n      {options.map((option) => {\n        if ('value' in option) {\n          const optionTestId = slugify(\n            `${testId}_option_${option.testId ?? option.value}`,\n            { replaceDots: true },\n          );\n          return (\n            <RadioBox\n              key={option.value}\n              classNames={boxClassNames}\n              data-testid={optionTestId}\n              description={option.description}\n              icon={option.icon}\n              isDisabled={!!disabled || option.disabled}\n              isInvalid={invalid}\n              value={option.value}\n            >\n              {option.label ?? option.value}\n            </RadioBox>\n          );\n        }\n        return null;\n      })}\n    </HeroRadioGroup>\n  );\n};\n\nexport default RadioBoxes;\n","import RadioBoxes from './RadioBoxes';\n\nexport type { RadioBoxesProps } from './RadioBoxes';\nexport { radioBoxVariants } from './RadioBox';\n\nexport { RadioBoxes };\n\nexport default RadioBoxes;\n"],"mappings":"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"}

package/dist/{RadioBoxes-gsQGqQCd.cjs → RadioBoxes-h-VLhJ9d.cjs}

@@ -1,5 +1,5 @@
-const require_FormContext = require('./FormContext-Bb6d8hdG.cjs');
-const require_useUniformField = require('./useUniformField-Bj23Kvbs.cjs');
+const require_FormContext = require('./FormContext-Lw4YL4-B.cjs');
+const require_useUniformField = require('./useUniformField-D6fwSjrH.cjs');
 let _fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _heroui_radio = require("@heroui/radio");
@@ -153,4 +153,4 @@ Object.defineProperty(exports, 'radioBoxVariants', {
     return radioBoxVariants;
   }
 });
-//# sourceMappingURL=RadioBoxes-gsQGqQCd.cjs.map
+//# sourceMappingURL=RadioBoxes-h-VLhJ9d.cjs.map

package/dist/{RadioBoxes-gsQGqQCd.cjs.map → RadioBoxes-h-VLhJ9d.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"RadioBoxes-gsQGqQCd.cjs","names":["VisuallyHidden","useUniformField","HeroRadioGroup","RadioBoxes"],"sources":["../src/RadioBoxes/RadioBox.tsx","../src/RadioBoxes/RadioBoxes.tsx","../src/RadioBoxes/index.ts"],"sourcesContent":["import type { TVClassName } from '@fuf-stack/pixel-utils';\nimport type { RadioProps as HeroRadioProps } from '@heroui/radio';\nimport type { ReactNode } from 'react';\n\nimport { useRadio } from '@heroui/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nexport const radioBoxVariants = tv({\n  slots: {\n    base: 'group inline-flex flex-auto cursor-pointer items-center justify-between gap-4 rounded-lg border-2 border-default p-4 hover:bg-content2 data-[selected=true]:border-focus',\n    control: '',\n    description: 'text-foreground opacity-70 text-small',\n    icon: '',\n    label: '',\n    labelWrapper: 'grow',\n  },\n  variants: {\n    isDisabled: {\n      true: {\n        base: 'pointer-events-none opacity-disabled',\n      },\n    },\n    isInvalid: {\n      true: {\n        base: '!border-danger',\n      },\n    },\n  },\n});\n\ntype ClassName = TVClassName<typeof radioBoxVariants>;\n\nexport interface RadioBoxProps extends Omit<HeroRadioProps, 'className'> {\n  /** CSS class name */\n  className?: ClassName;\n  /** icon for the option */\n  icon?: ReactNode;\n  /** whether the radio is invalid */\n  isInvalid?: boolean;\n}\n\nexport const RadioBox = ({\n  classNames: _classNames = undefined,\n  icon = undefined,\n  isInvalid = false,\n  ...props\n}: RadioBoxProps) => {\n  const {\n    children,\n    Component,\n    description,\n    getBaseProps,\n    getControlProps,\n    getInputProps,\n    getLabelProps,\n    getLabelWrapperProps,\n    getWrapperProps,\n    isDisabled,\n  } = useRadio(props as HeroRadioProps);\n\n  // classNames from slots\n  const variants = radioBoxVariants({\n    isDisabled,\n    isInvalid,\n  });\n  const classNames = variantsToClassNames(\n    variants,\n    // @ts-expect-error not sure here, but it works\n    _classNames,\n    'base',\n  );\n\n  return (\n    <Component {...getBaseProps()} className={classNames.base}>\n      <VisuallyHidden>\n        <input {...getInputProps()} />\n      </VisuallyHidden>\n      {!icon ? (\n        <span {...getWrapperProps()}>\n          <span\n            {...getControlProps()}\n            className={cn(getControlProps().className, classNames.control)}\n          />\n        </span>\n      ) : null}\n      {icon ? <div className={classNames.icon}>{icon}</div> : null}\n      <div\n        {...getLabelWrapperProps()}\n        className={cn(\n          getLabelWrapperProps().className,\n          classNames.labelWrapper,\n        )}\n      >\n        {children ? (\n          <span\n            {...getLabelProps()}\n            className={cn(getLabelProps().className, classNames.label)}\n          >\n            {children}\n          </span>\n        ) : null}\n        {description ? (\n          <div className={classNames.description}>{description}</div>\n        ) : null}\n      </div>\n      {icon ? (\n        <span {...getWrapperProps()}>\n          <span\n            {...getControlProps()}\n            className={cn(getControlProps().className, classNames.control)}\n          />\n        </span>\n      ) : null}\n    </Component>\n  );\n};\n\nexport default RadioBox;\n","import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n//\nimport type { RadioBoxProps } from './RadioBox';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../hooks/useUniformField';\nimport { RadioBox } from './RadioBox';\n\nexport const radioBoxesVariants = tv({\n  slots: {\n    base: 'group gap-0', // Needs group for group-data condition\n    boxBase: '',\n    boxControl: '',\n    boxDescription: '',\n    boxLabel: '',\n    boxLabelWrapper: '',\n    // see HeroUI styles for group-data condition,\n    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n    wrapper: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof radioBoxesVariants>;\ntype ClassName = TVClassName<typeof radioBoxesVariants>;\n\nexport interface RadioBoxesOption {\n  /** Description of the value. Works with variant radioBox. */\n  description?: ReactNode;\n  /** disables the option */\n  disabled?: boolean;\n  /** option label */\n  label?: ReactNode;\n  /** option icon */\n  icon?: ReactNode;\n  /** HTML data-testid attribute of the option */\n  testId?: string;\n  /** option value */\n  value: string;\n}\n\nexport interface RadioBoxesProps extends VariantProps {\n  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName;\n  /** Determines if the Buttons are disabled or not. */\n  disabled?: boolean;\n  /** determines orientation of the Buttons. */\n  inline?: boolean;\n  /** Label displayed next to the RadioButton. */\n  label?: ReactNode;\n  /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n  name: string;\n  /** Radio button configuration. */\n  options: RadioBoxesOption[];\n  /** Id to grab element in internal tests. */\n  testId?: string;\n}\n\n/**\n * RadioBoxes component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst RadioBoxes = ({\n  className = undefined,\n  inline = false,\n  name,\n  options,\n  ...uniformFieldProps\n}: RadioBoxesProps) => {\n  const {\n    ariaLabel,\n    defaultValue,\n    errorMessage,\n    invalid,\n    disabled,\n    label,\n    onBlur,\n    onChange,\n    ref,\n    required,\n    testId,\n  } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  // classNames from slots\n  const variants = radioBoxesVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n  const boxClassNames: RadioBoxProps['classNames'] = {\n    base: classNames.boxBase,\n    control: classNames.boxControl,\n    description: classNames.boxDescription,\n    label: classNames.boxLabel,\n    labelWrapper: classNames.boxLabelWrapper,\n  };\n\n  return (\n    <HeroRadioGroup\n      ref={ref}\n      aria-label={ariaLabel}\n      classNames={classNames}\n      // see HeroUI styles for group-data condition (data-invalid),\n      // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n      data-invalid={invalid}\n      data-required={required}\n      data-testid={testId}\n      defaultValue={defaultValue as string | undefined}\n      errorMessage={errorMessage}\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isRequired={required}\n      label={label ? <legend>{label}</legend> : null}\n      name={name}\n      onBlur={onBlur}\n      onValueChange={onChange}\n      orientation={inline ? 'horizontal' : 'vertical'}\n    >\n      {options.map((option) => {\n        if ('value' in option) {\n          const optionTestId = slugify(\n            `${testId}_option_${option.testId ?? option.value}`,\n            { replaceDots: true },\n          );\n          return (\n            <RadioBox\n              key={option.value}\n              classNames={boxClassNames}\n              data-testid={optionTestId}\n              description={option.description}\n              icon={option.icon}\n              isDisabled={!!disabled || option.disabled}\n              isInvalid={invalid}\n              value={option.value}\n            >\n              {option.label ?? option.value}\n            </RadioBox>\n          );\n        }\n        return null;\n      })}\n    </HeroRadioGroup>\n  );\n};\n\nexport default RadioBoxes;\n","import RadioBoxes from './RadioBoxes';\n\nexport type { RadioBoxesProps } from './RadioBoxes';\nexport { radioBoxVariants } from './RadioBox';\n\nexport { RadioBoxes };\n\nexport default RadioBoxes;\n"],"mappings":";;;;;;;;AASA,MAAa,kDAAsB;CACjC,OAAO;EACL,MAAM;EACN,SAAS;EACT,aAAa;EACb,MAAM;EACN,OAAO;EACP,cAAc;EACf;CACD,UAAU;EACR,YAAY,EACV,MAAM,EACJ,MAAM,wCACP,EACF;EACD,WAAW,EACT,MAAM,EACJ,MAAM,kBACP,EACF;EACF;CACF,CAAC;AAaF,MAAa,YAAY,EACvB,YAAY,cAAc,QAC1B,OAAO,QACP,YAAY,OACZ,GAAG,YACgB;CACnB,MAAM,EACJ,UACA,WACA,aACA,cACA,iBACA,eACA,eACA,sBACA,iBACA,2CACW,MAAwB;CAOrC,MAAM,8DAJW,iBAAiB;EAChC;EACA;EACD,CAAC,EAIA,aACA,OACD;AAED,QACE,4CAAC;EAAU,GAAI,cAAc;EAAE,WAAW,WAAW;;GACnD,2CAACA,wDACC,2CAAC,WAAM,GAAI,eAAe,GAAI,GACf;GAChB,CAAC,OACA,2CAAC;IAAK,GAAI,iBAAiB;cACzB,2CAAC;KACC,GAAI,iBAAiB;KACrB,0CAAc,iBAAiB,CAAC,WAAW,WAAW,QAAQ;MAC9D;KACG,GACL;GACH,OAAO,2CAAC;IAAI,WAAW,WAAW;cAAO;KAAW,GAAG;GACxD,4CAAC;IACC,GAAI,sBAAsB;IAC1B,0CACE,sBAAsB,CAAC,WACvB,WAAW,aACZ;eAEA,WACC,2CAAC;KACC,GAAI,eAAe;KACnB,0CAAc,eAAe,CAAC,WAAW,WAAW,MAAM;KAEzD;MACI,GACL,MACH,cACC,2CAAC;KAAI,WAAW,WAAW;eAAc;MAAkB,GACzD;KACA;GACL,OACC,2CAAC;IAAK,GAAI,iBAAiB;cACzB,2CAAC;KACC,GAAI,iBAAiB;KACrB,0CAAc,iBAAiB,CAAC,WAAW,WAAW,QAAQ;MAC9D;KACG,GACL;;GACM;;;;;ACvGhB,MAAa,oDAAwB,EACnC,OAAO;CACL,MAAM;CACN,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,UAAU;CACV,iBAAiB;CAGjB,OACE;CACF,SAAS;CACV,EACF,CAAC;;;;AA0CF,MAAM,cAAc,EAClB,YAAY,QACZ,SAAS,OACT,MACA,SACA,GAAG,wBACkB;CACrB,MAAM,EACJ,WACA,cACA,cACA,SACA,UACA,OACA,QACA,UACA,KACA,UACA,WACEC,wCAAgB;EAClB;EACA,GAAG;EACJ,CAAC;CAIF,MAAM,8DADW,oBAAoB,EACa,WAAW,OAAO;CACpE,MAAM,gBAA6C;EACjD,MAAM,WAAW;EACjB,SAAS,WAAW;EACpB,aAAa,WAAW;EACxB,OAAO,WAAW;EAClB,cAAc,WAAW;EAC1B;AAED,QACE,2CAACC;EACM;EACL,cAAY;EACA;EAGZ,gBAAc;EACd,iBAAe;EACf,eAAa;EACC;EACA;EACd,YAAY;EACZ,WAAW;EACX,YAAY;EACZ,OAAO,QAAQ,2CAAC,sBAAQ,QAAe,GAAG;EACpC;EACE;EACR,eAAe;EACf,aAAa,SAAS,eAAe;YAEpC,QAAQ,KAAK,WAAW;AACvB,OAAI,WAAW,QAAQ;IACrB,MAAM,mDACJ,GAAG,OAAO,UAAU,OAAO,UAAU,OAAO,SAC5C,EAAE,aAAa,MAAM,CACtB;AACD,WACE,2CAAC;KAEC,YAAY;KACZ,eAAa;KACb,aAAa,OAAO;KACpB,MAAM,OAAO;KACb,YAAY,CAAC,CAAC,YAAY,OAAO;KACjC,WAAW;KACX,OAAO,OAAO;eAEb,OAAO,SAAS,OAAO;OATnB,OAAO,MAUH;;AAGf,UAAO;IACP;GACa;;AAIrB,2BAAe;;;;AChJf,yBAAeC"}
+{"version":3,"file":"RadioBoxes-h-VLhJ9d.cjs","names":["VisuallyHidden","useUniformField","HeroRadioGroup","RadioBoxes"],"sources":["../src/RadioBoxes/RadioBox.tsx","../src/RadioBoxes/RadioBoxes.tsx","../src/RadioBoxes/index.ts"],"sourcesContent":["import type { TVClassName } from '@fuf-stack/pixel-utils';\nimport type { RadioProps as HeroRadioProps } from '@heroui/radio';\nimport type { ReactNode } from 'react';\n\nimport { useRadio } from '@heroui/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nexport const radioBoxVariants = tv({\n  slots: {\n    base: 'group inline-flex flex-auto cursor-pointer items-center justify-between gap-4 rounded-lg border-2 border-default p-4 hover:bg-content2 data-[selected=true]:border-focus',\n    control: '',\n    description: 'text-foreground opacity-70 text-small',\n    icon: '',\n    label: '',\n    labelWrapper: 'grow',\n  },\n  variants: {\n    isDisabled: {\n      true: {\n        base: 'pointer-events-none opacity-disabled',\n      },\n    },\n    isInvalid: {\n      true: {\n        base: '!border-danger',\n      },\n    },\n  },\n});\n\ntype ClassName = TVClassName<typeof radioBoxVariants>;\n\nexport interface RadioBoxProps extends Omit<HeroRadioProps, 'className'> {\n  /** CSS class name */\n  className?: ClassName;\n  /** icon for the option */\n  icon?: ReactNode;\n  /** whether the radio is invalid */\n  isInvalid?: boolean;\n}\n\nexport const RadioBox = ({\n  classNames: _classNames = undefined,\n  icon = undefined,\n  isInvalid = false,\n  ...props\n}: RadioBoxProps) => {\n  const {\n    children,\n    Component,\n    description,\n    getBaseProps,\n    getControlProps,\n    getInputProps,\n    getLabelProps,\n    getLabelWrapperProps,\n    getWrapperProps,\n    isDisabled,\n  } = useRadio(props as HeroRadioProps);\n\n  // classNames from slots\n  const variants = radioBoxVariants({\n    isDisabled,\n    isInvalid,\n  });\n  const classNames = variantsToClassNames(\n    variants,\n    // @ts-expect-error not sure here, but it works\n    _classNames,\n    'base',\n  );\n\n  return (\n    <Component {...getBaseProps()} className={classNames.base}>\n      <VisuallyHidden>\n        <input {...getInputProps()} />\n      </VisuallyHidden>\n      {!icon ? (\n        <span {...getWrapperProps()}>\n          <span\n            {...getControlProps()}\n            className={cn(getControlProps().className, classNames.control)}\n          />\n        </span>\n      ) : null}\n      {icon ? <div className={classNames.icon}>{icon}</div> : null}\n      <div\n        {...getLabelWrapperProps()}\n        className={cn(\n          getLabelWrapperProps().className,\n          classNames.labelWrapper,\n        )}\n      >\n        {children ? (\n          <span\n            {...getLabelProps()}\n            className={cn(getLabelProps().className, classNames.label)}\n          >\n            {children}\n          </span>\n        ) : null}\n        {description ? (\n          <div className={classNames.description}>{description}</div>\n        ) : null}\n      </div>\n      {icon ? (\n        <span {...getWrapperProps()}>\n          <span\n            {...getControlProps()}\n            className={cn(getControlProps().className, classNames.control)}\n          />\n        </span>\n      ) : null}\n    </Component>\n  );\n};\n\nexport default RadioBox;\n","import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n//\nimport type { RadioBoxProps } from './RadioBox';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../hooks/useUniformField';\nimport { RadioBox } from './RadioBox';\n\nexport const radioBoxesVariants = tv({\n  slots: {\n    base: 'group gap-0', // Needs group for group-data condition\n    boxBase: '',\n    boxControl: '',\n    boxDescription: '',\n    boxLabel: '',\n    boxLabelWrapper: '',\n    // see HeroUI styles for group-data condition,\n    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n    wrapper: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof radioBoxesVariants>;\ntype ClassName = TVClassName<typeof radioBoxesVariants>;\n\nexport interface RadioBoxesOption {\n  /** Description of the value. Works with variant radioBox. */\n  description?: ReactNode;\n  /** disables the option */\n  disabled?: boolean;\n  /** option label */\n  label?: ReactNode;\n  /** option icon */\n  icon?: ReactNode;\n  /** HTML data-testid attribute of the option */\n  testId?: string;\n  /** option value */\n  value: string;\n}\n\nexport interface RadioBoxesProps extends VariantProps {\n  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName;\n  /** Determines if the Buttons are disabled or not. */\n  disabled?: boolean;\n  /** determines orientation of the Buttons. */\n  inline?: boolean;\n  /** Label displayed next to the RadioButton. */\n  label?: ReactNode;\n  /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n  name: string;\n  /** Radio button configuration. */\n  options: RadioBoxesOption[];\n  /** Id to grab element in internal tests. */\n  testId?: string;\n}\n\n/**\n * RadioBoxes component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst RadioBoxes = ({\n  className = undefined,\n  inline = false,\n  name,\n  options,\n  ...uniformFieldProps\n}: RadioBoxesProps) => {\n  const {\n    ariaLabel,\n    defaultValue,\n    errorMessage,\n    invalid,\n    disabled,\n    label,\n    onBlur,\n    onChange,\n    ref,\n    required,\n    testId,\n  } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  // classNames from slots\n  const variants = radioBoxesVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n  const boxClassNames: RadioBoxProps['classNames'] = {\n    base: classNames.boxBase,\n    control: classNames.boxControl,\n    description: classNames.boxDescription,\n    label: classNames.boxLabel,\n    labelWrapper: classNames.boxLabelWrapper,\n  };\n\n  return (\n    <HeroRadioGroup\n      ref={ref}\n      aria-label={ariaLabel}\n      classNames={classNames}\n      // see HeroUI styles for group-data condition (data-invalid),\n      // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n      data-invalid={invalid}\n      data-required={required}\n      data-testid={testId}\n      defaultValue={defaultValue as string | undefined}\n      errorMessage={errorMessage}\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isRequired={required}\n      label={label ? <legend>{label}</legend> : null}\n      name={name}\n      onBlur={onBlur}\n      onValueChange={onChange}\n      orientation={inline ? 'horizontal' : 'vertical'}\n    >\n      {options.map((option) => {\n        if ('value' in option) {\n          const optionTestId = slugify(\n            `${testId}_option_${option.testId ?? option.value}`,\n            { replaceDots: true },\n          );\n          return (\n            <RadioBox\n              key={option.value}\n              classNames={boxClassNames}\n              data-testid={optionTestId}\n              description={option.description}\n              icon={option.icon}\n              isDisabled={!!disabled || option.disabled}\n              isInvalid={invalid}\n              value={option.value}\n            >\n              {option.label ?? option.value}\n            </RadioBox>\n          );\n        }\n        return null;\n      })}\n    </HeroRadioGroup>\n  );\n};\n\nexport default RadioBoxes;\n","import RadioBoxes from './RadioBoxes';\n\nexport type { RadioBoxesProps } from './RadioBoxes';\nexport { radioBoxVariants } from './RadioBox';\n\nexport { RadioBoxes };\n\nexport default RadioBoxes;\n"],"mappings":";;;;;;;;AASA,MAAa,kDAAsB;CACjC,OAAO;EACL,MAAM;EACN,SAAS;EACT,aAAa;EACb,MAAM;EACN,OAAO;EACP,cAAc;EACf;CACD,UAAU;EACR,YAAY,EACV,MAAM,EACJ,MAAM,wCACP,EACF;EACD,WAAW,EACT,MAAM,EACJ,MAAM,kBACP,EACF;EACF;CACF,CAAC;AAaF,MAAa,YAAY,EACvB,YAAY,cAAc,QAC1B,OAAO,QACP,YAAY,OACZ,GAAG,YACgB;CACnB,MAAM,EACJ,UACA,WACA,aACA,cACA,iBACA,eACA,eACA,sBACA,iBACA,2CACW,MAAwB;CAOrC,MAAM,8DAJW,iBAAiB;EAChC;EACA;EACD,CAAC,EAIA,aACA,OACD;AAED,QACE,4CAAC;EAAU,GAAI,cAAc;EAAE,WAAW,WAAW;;GACnD,2CAACA,wDACC,2CAAC,WAAM,GAAI,eAAe,GAAI,GACf;GAChB,CAAC,OACA,2CAAC;IAAK,GAAI,iBAAiB;cACzB,2CAAC;KACC,GAAI,iBAAiB;KACrB,0CAAc,iBAAiB,CAAC,WAAW,WAAW,QAAQ;MAC9D;KACG,GACL;GACH,OAAO,2CAAC;IAAI,WAAW,WAAW;cAAO;KAAW,GAAG;GACxD,4CAAC;IACC,GAAI,sBAAsB;IAC1B,0CACE,sBAAsB,CAAC,WACvB,WAAW,aACZ;eAEA,WACC,2CAAC;KACC,GAAI,eAAe;KACnB,0CAAc,eAAe,CAAC,WAAW,WAAW,MAAM;KAEzD;MACI,GACL,MACH,cACC,2CAAC;KAAI,WAAW,WAAW;eAAc;MAAkB,GACzD;KACA;GACL,OACC,2CAAC;IAAK,GAAI,iBAAiB;cACzB,2CAAC;KACC,GAAI,iBAAiB;KACrB,0CAAc,iBAAiB,CAAC,WAAW,WAAW,QAAQ;MAC9D;KACG,GACL;;GACM;;;;;ACvGhB,MAAa,oDAAwB,EACnC,OAAO;CACL,MAAM;CACN,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,UAAU;CACV,iBAAiB;CAGjB,OACE;CACF,SAAS;CACV,EACF,CAAC;;;;AA0CF,MAAM,cAAc,EAClB,YAAY,QACZ,SAAS,OACT,MACA,SACA,GAAG,wBACkB;CACrB,MAAM,EACJ,WACA,cACA,cACA,SACA,UACA,OACA,QACA,UACA,KACA,UACA,WACEC,wCAAgB;EAClB;EACA,GAAG;EACJ,CAAC;CAIF,MAAM,8DADW,oBAAoB,EACa,WAAW,OAAO;CACpE,MAAM,gBAA6C;EACjD,MAAM,WAAW;EACjB,SAAS,WAAW;EACpB,aAAa,WAAW;EACxB,OAAO,WAAW;EAClB,cAAc,WAAW;EAC1B;AAED,QACE,2CAACC;EACM;EACL,cAAY;EACA;EAGZ,gBAAc;EACd,iBAAe;EACf,eAAa;EACC;EACA;EACd,YAAY;EACZ,WAAW;EACX,YAAY;EACZ,OAAO,QAAQ,2CAAC,sBAAQ,QAAe,GAAG;EACpC;EACE;EACR,eAAe;EACf,aAAa,SAAS,eAAe;YAEpC,QAAQ,KAAK,WAAW;AACvB,OAAI,WAAW,QAAQ;IACrB,MAAM,mDACJ,GAAG,OAAO,UAAU,OAAO,UAAU,OAAO,SAC5C,EAAE,aAAa,MAAM,CACtB;AACD,WACE,2CAAC;KAEC,YAAY;KACZ,eAAa;KACb,aAAa,OAAO;KACpB,MAAM,OAAO;KACb,YAAY,CAAC,CAAC,YAAY,OAAO;KACjC,WAAW;KACX,OAAO,OAAO;eAEb,OAAO,SAAS,OAAO;OATnB,OAAO,MAUH;;AAGf,UAAO;IACP;GACa;;AAIrB,2BAAe;;;;AChJf,yBAAeC"}

package/dist/RadioTabs/index.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const require_RadioTabs = require('../RadioTabs-BYpP0tKA.cjs');
+const require_RadioTabs = require('../RadioTabs-D6yF9jE3.cjs');
 
 exports.RadioTabs = require_RadioTabs.RadioTabs_default$1;
 exports.default = require_RadioTabs.RadioTabs_default;

package/dist/RadioTabs/index.d.cts

@@ -1,2 +1,2 @@
-import { n as RadioTabsProps, t as RadioTabs } from "../index-BITJ-CZL.cjs";
+import { n as RadioTabsProps, t as RadioTabs } from "../index-BSjUaHEO.cjs";
 export { RadioTabs, RadioTabs as default, RadioTabsProps };

package/dist/RadioTabs/index.d.ts

@@ -1,2 +1,2 @@
-import { n as RadioTabsProps, t as RadioTabs } from "../index-CVnn6mEI.js";
+import { n as RadioTabsProps, t as RadioTabs } from "../index-Bcppi5O7.js";
 export { RadioTabs, RadioTabs as default, RadioTabsProps };